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,
},