feat: add Settings/Accounts/Emails/Inbox Setting Contact auto-creation (#3188)

Co-authored-by: Lakshay saini <lakshay.saini@finmo.net>

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

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 (
+    <Section>
+      <H2Title
+        title="Contact auto-creation"
+        description="Automatically create contacts for people you’ve sent emails to"
+      />
+      <Card>
+        <StyledCardContent>
+          <SettingsAccountsInboxSettingsCardMedia>
+            <IconSend size={theme.icon.size.sm} stroke={theme.icon.stroke.lg} />
+          </SettingsAccountsInboxSettingsCardMedia>
+          <StyledTitle>Auto-creation</StyledTitle>
+          <Toggle
+            value={account.isContactAutoCreationEnabled}
+            onChange={onToggle}
+          />
+        </StyledCardContent>
+      </Card>
+    </Section>
+  );
+};

packages/twenty-front/src/modules/ui/display/icon/index.ts

@@ -97,6 +97,7 @@ export {
   IconRepeat,
   IconRobot,
   IconSearch,
+  IconSend,
   IconSettings,
   IconTable,
   IconTag,

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}
         />
+        <SettingsAccountsInboxSettingsContactAutoCreateSection
+          account={account}
+          onToggle={handleContactAutoCreationToggle}
+        />
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );

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