diff --git a/packages/twenty-front/src/modules/accounts/types/Account.ts b/packages/twenty-front/src/modules/accounts/types/Account.ts index a45a1f240..9ef30adeb 100644 --- a/packages/twenty-front/src/modules/accounts/types/Account.ts +++ b/packages/twenty-front/src/modules/accounts/types/Account.ts @@ -3,6 +3,7 @@ import { InboxSettingsVisibilityValue } from '@/settings/accounts/components/Set export type Account = { id: string; handle: string; + isContactAutoCreationEnabled?: boolean; isSynced?: boolean; visibility: InboxSettingsVisibilityValue; }; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsContactAutoCreationSection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsContactAutoCreationSection.tsx new file mode 100644 index 000000000..f7d966298 --- /dev/null +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsContactAutoCreationSection.tsx @@ -0,0 +1,57 @@ +import { useTheme } from '@emotion/react'; +import styled from '@emotion/styled'; + +import { Account } from '@/accounts/types/Account'; +import { SettingsAccountsInboxSettingsCardMedia } from '@/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia'; +import { IconSend } from '@/ui/display/icon'; +import { H2Title } from '@/ui/display/typography/components/H2Title'; +import { Toggle } from '@/ui/input/components/Toggle'; +import { Card } from '@/ui/layout/card/components/Card'; +import { CardContent } from '@/ui/layout/card/components/CardContent'; +import { Section } from '@/ui/layout/section/components/Section'; + +const StyledCardContent = styled(CardContent)` + align-items: center; + display: flex; + gap: ${({ theme }) => theme.spacing(4)}; + padding: ${({ theme }) => theme.spacing(2, 4)}; +`; + +const StyledTitle = styled.span` + color: ${({ theme }) => theme.font.color.primary}; + font-weight: ${({ theme }) => theme.font.weight.medium}; + margin-right: auto; +`; + +type SettingsAccountsInboxSettingsContactAutoCreateSectionProps = { + account: Account; + onToggle: (value: boolean) => void; +}; + +export const SettingsAccountsInboxSettingsContactAutoCreateSection = ({ + account, + onToggle, +}: SettingsAccountsInboxSettingsContactAutoCreateSectionProps) => { + const theme = useTheme(); + + return ( +
+ + + + + + + Auto-creation + + + +
+ ); +}; diff --git a/packages/twenty-front/src/modules/ui/display/icon/index.ts b/packages/twenty-front/src/modules/ui/display/icon/index.ts index 3de488f8e..d4c3c1fe2 100644 --- a/packages/twenty-front/src/modules/ui/display/icon/index.ts +++ b/packages/twenty-front/src/modules/ui/display/icon/index.ts @@ -97,6 +97,7 @@ export { IconRepeat, IconRobot, IconSearch, + IconSend, IconSettings, IconTable, IconTag, diff --git a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmailsInboxSettings.tsx b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmailsInboxSettings.tsx index 26fc45842..93570ecf1 100644 --- a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmailsInboxSettings.tsx +++ b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmailsInboxSettings.tsx @@ -1,6 +1,7 @@ import { useEffect } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; +import { SettingsAccountsInboxSettingsContactAutoCreateSection } from '@/settings/accounts/components/SettingsAccountsInboxSettingsContactAutoCreationSection'; import { SettingsAccountsInboxSettingsSynchronizationSection } from '@/settings/accounts/components/SettingsAccountsInboxSettingsSynchronizationSection'; import { InboxSettingsVisibilityValue, @@ -28,6 +29,8 @@ export const SettingsAccountsEmailsInboxSettings = () => { const handleSynchronizationToggle = (_value: boolean) => {}; + const handleContactAutoCreationToggle = (_value: boolean) => {}; + const handleVisibilityChange = (_value: InboxSettingsVisibilityValue) => {}; return ( @@ -48,6 +51,10 @@ export const SettingsAccountsEmailsInboxSettings = () => { value={account.visibility} onChange={handleVisibilityChange} /> + ); diff --git a/packages/twenty-front/src/testing/mock-data/accounts.ts b/packages/twenty-front/src/testing/mock-data/accounts.ts index 87a816f24..9cc48eb17 100644 --- a/packages/twenty-front/src/testing/mock-data/accounts.ts +++ b/packages/twenty-front/src/testing/mock-data/accounts.ts @@ -6,12 +6,14 @@ export const mockedAccounts: Account[] = [ { email: 'thomas@twenty.com', isSynced: true, + isContactAutoCreationEnabled: true, uuid: '0794b782-f52e-48c3-977e-b0f57f90de24', visibility: InboxSettingsVisibilityValue.Everything, }, { email: 'thomas@twenty.dev', isSynced: false, + isContactAutoCreationEnabled: true, uuid: 'dc66a7ec-56b2-425b-a8e8-26ff0396c3aa', visibility: InboxSettingsVisibilityValue.Metadata, },