feat: add Contact Auto-Creation calendar settings (#4132)

* feat: add Contact Auto-Creation calendar settings

Closes #4065

* fix: fix wrong Section component import

* fix: fix wrong Toggle import

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsContactAutoCreationSection.tsx

@@ -1,57 +0,0 @@
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-
-import { MessageChannel } from '@/accounts/types/MessageChannel';
-import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
-import { IconUser } 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 = {
-  messageChannel: MessageChannel;
-  onToggle: (value: boolean) => void;
-};
-
-export const SettingsAccountsInboxSettingsContactAutoCreateSection = ({
-  messageChannel,
-  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>
-          <SettingsAccountsCardMedia>
-            <IconUser size={theme.icon.size.sm} stroke={theme.icon.stroke.lg} />
-          </SettingsAccountsCardMedia>
-          <StyledTitle>Auto-creation</StyledTitle>
-          <Toggle
-            value={messageChannel.isContactAutoCreationEnabled}
-            onChange={onToggle}
-          />
-        </StyledCardContent>
-      </Card>
-    </Section>
-  );
-};

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListCard.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ComponentType } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -39,7 +39,7 @@ type SettingsAccountsListCardProps<
   isLoading?: boolean;
   onRowClick?: (account: Account) => void;
   RowIcon?: IconComponent;
-  RowRightComponent: ({ account }: { account: Account }) => ReactNode;
+  RowRightComponent: ComponentType<{ account: Account }>;
 };
 
 export const SettingsAccountsListCard = <

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSynchronizationSection.tsx

@@ -1,57 +0,0 @@
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-
-import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
-import { IconRefresh } 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 SettingsAccountsSynchronizationSectionProps = {
-  cardTitle: string;
-  description: string;
-  isSynced: boolean;
-  onToggle: (value: boolean) => void;
-};
-
-export const SettingsAccountsSynchronizationSection = ({
-  cardTitle,
-  description,
-  isSynced,
-  onToggle,
-}: SettingsAccountsSynchronizationSectionProps) => {
-  const theme = useTheme();
-
-  return (
-    <Section>
-      <H2Title title="Synchronization" description={description} />
-      <Card>
-        <StyledCardContent>
-          <SettingsAccountsCardMedia>
-            <IconRefresh
-              size={theme.icon.size.sm}
-              stroke={theme.icon.stroke.lg}
-            />
-          </SettingsAccountsCardMedia>
-          <StyledTitle>{cardTitle}</StyledTitle>
-          <Toggle value={isSynced} onChange={onToggle} />
-        </StyledCardContent>
-      </Card>
-    </Section>
-  );
-};

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx

@@ -0,0 +1,49 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { Toggle } from '@/ui/input/components/Toggle';
+import { Card } from '@/ui/layout/card/components/Card';
+import { CardContent } from '@/ui/layout/card/components/CardContent';
+
+type SettingsAccountsToggleSettingCardProps = {
+  Icon: IconComponent;
+  isEnabled: boolean;
+  onToggle: (value: boolean) => void;
+  title: string;
+};
+
+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;
+`;
+
+export const SettingsAccountsToggleSettingCard = ({
+  Icon,
+  isEnabled,
+  onToggle,
+  title,
+}: SettingsAccountsToggleSettingCardProps) => {
+  const theme = useTheme();
+
+  return (
+    <Card>
+      <StyledCardContent>
+        <SettingsAccountsCardMedia>
+          <Icon size={theme.icon.size.sm} stroke={theme.icon.stroke.lg} />
+        </SettingsAccountsCardMedia>
+        <StyledTitle>{title}</StyledTitle>
+        <Toggle value={isEnabled} onChange={onToggle} />
+      </StyledCardContent>
+    </Card>
+  );
+};

packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendarsSettings.tsx

@@ -1,11 +1,13 @@
 import { useParams } from 'react-router-dom';
 
-import { SettingsAccountsSynchronizationSection } from '@/settings/accounts/components/SettingsAccountsSynchronizationSection';
+import { SettingsAccountsToggleSettingCard } from '@/settings/accounts/components/SettingsAccountsToggleSettingCard';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { IconSettings } from '@/ui/display/icon';
+import { IconRefresh, IconSettings, IconUser } from '@/ui/display/icon';
+import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
+import { Section } from '@/ui/layout/section/components/Section';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { mockedConnectedAccounts } from '~/testing/mock-data/accounts';
 
@@ -31,12 +33,30 @@ export const SettingsAccountsCalendarsSettings = () => {
             { children: connectedAccount?.handle || '' },
           ]}
         />
-        <SettingsAccountsSynchronizationSection
+        <Section>
-          description="Past and future calendar events will automatically be synced to this workspace"
+          <H2Title
-          cardTitle="Sync events"
+            title="Contact auto-creation"
-          isSynced={false}
+            description="Automatically create contacts for people you've participated in an event with."
-          onToggle={() => {}}
+          />
-        />
+          <SettingsAccountsToggleSettingCard
+            Icon={IconUser}
+            title="Auto-creation"
+            isEnabled={false}
+            onToggle={() => {}}
+          />
+        </Section>
+        <Section>
+          <H2Title
+            title="Synchronization"
+            description="Past and future calendar events will automatically be synced to this workspace"
+          />
+          <SettingsAccountsToggleSettingCard
+            Icon={IconRefresh}
+            title="Sync events"
+            isEnabled={false}
+            onToggle={() => {}}
+          />
+        </Section>
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );

packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmailsInboxSettings.tsx

@@ -2,17 +2,20 @@ import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { MessageChannel } from '@/accounts/types/MessageChannel';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
-import { SettingsAccountsInboxSettingsContactAutoCreateSection } from '@/settings/accounts/components/SettingsAccountsInboxSettingsContactAutoCreationSection';
 import {
   InboxSettingsVisibilityValue,
   SettingsAccountsInboxSettingsVisibilitySection,
 } from '@/settings/accounts/components/SettingsAccountsInboxSettingsVisibilitySection';
+import { SettingsAccountsToggleSettingCard } from '@/settings/accounts/components/SettingsAccountsToggleSettingCard';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { AppPath } from '@/types/AppPath';
-import { IconSettings } from '@/ui/display/icon';
+import { IconSettings, IconUser } from '@/ui/display/icon';
+import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
+import { Section } from '@/ui/layout/section/components/Section';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 
 export const SettingsAccountsEmailsInboxSettings = () => {
@@ -20,19 +23,19 @@ export const SettingsAccountsEmailsInboxSettings = () => {
   const { accountUuid: messageChannelId = '' } = useParams();
 
   const { record: messageChannel, loading } = useFindOneRecord<MessageChannel>({
-    objectNameSingular: 'messageChannel',
+    objectNameSingular: CoreObjectNameSingular.MessageChannel,
     objectRecordId: messageChannelId,
   });
 
-  const { updateOneRecord } = useUpdateOneRecord({
+  const { updateOneRecord } = useUpdateOneRecord<MessageChannel>({
-    objectNameSingular: 'messageChannel',
+    objectNameSingular: CoreObjectNameSingular.MessageChannel,
   });
 
-  const handleVisibilityChange = (_value: InboxSettingsVisibilityValue) => {
+  const handleVisibilityChange = (value: InboxSettingsVisibilityValue) => {
     updateOneRecord({
       idToUpdate: messageChannelId,
       updateOneRecordInput: {
-        visibility: _value,
+        visibility: value,
       },
     });
   };
@@ -59,24 +62,38 @@ export const SettingsAccountsEmailsInboxSettings = () => {
           links={[
             { children: 'Accounts', href: '/settings/accounts' },
             { children: 'Emails', href: '/settings/accounts/emails' },
-            { children: messageChannel?.handle || '' },
+            { children: messageChannel.handle || '' },
           ]}
         />
         {/* TODO : discuss the desired sync behaviour */}
-        {/* <SettingsAccountsSynchronizationSection
+        {/* <Section>
-          description="Past and future emails will automatically be synced to this workspace"
+          <H2Title
-          cardTitle="Sync emails"
+            title="Synchronization"
-          isSynced={!!messageChannel?.isSynced}
+            description="Past and future emails will automatically be synced to this workspace"
-          onToggle={handleSynchronizationToggle}
+          />
-        /> */}
+          <SettingsAccountsSettingCard
+            Icon={IconRefresh}
+            title="Sync emails"
+            isEnabled={!!messageChannel.isSynced}
+            onToggle={handleSynchronizationToggle}
+          />
+        </Section> */}
         <SettingsAccountsInboxSettingsVisibilitySection
-          value={messageChannel?.visibility}
+          value={messageChannel.visibility}
           onChange={handleVisibilityChange}
         />
-        <SettingsAccountsInboxSettingsContactAutoCreateSection
+        <Section>
-          messageChannel={messageChannel}
+          <H2Title
-          onToggle={handleContactAutoCreationToggle}
+            title="Contact auto-creation"
-        />
+            description="Automatically create contacts for people you’ve sent emails to"
+          />
+          <SettingsAccountsToggleSettingCard
+            Icon={IconUser}
+            title="Auto-creation"
+            isEnabled={!!messageChannel.isContactAutoCreationEnabled}
+            onToggle={handleContactAutoCreationToggle}
+          />
+        </Section>
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );