4971 add issyncenabled toggle in messaging settings (#4995)

- Closes #4971
- Fix calendar import to take isSyncEnabled into account

packages/twenty-front/src/modules/accounts/types/MessageChannel.ts

@@ -4,6 +4,6 @@ export type MessageChannel = {
   id: string;
   handle: string;
   isContactAutoCreationEnabled?: boolean;
-  isSynced?: boolean;
+  isSyncEnabled: boolean;
   visibility: InboxSettingsVisibilityValue;
 };

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

@@ -57,7 +57,9 @@ export const SettingsAccountsMessageChannelsListCard = () => {
       ...messageChannel,
       syncStatus: messageChannel.connectedAccount?.authFailedAt
         ? 'failed'
-        : 'synced',
+        : messageChannel.isSyncEnabled
+          ? 'synced'
+          : 'notSynced',
     }),
   );
 

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

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
-import { IconSettings, IconUser } from 'twenty-ui';
+import { IconRefresh, IconSettings, IconUser } from 'twenty-ui';
 
 import { MessageChannel } from '@/accounts/types/MessageChannel';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@@ -52,6 +52,15 @@ export const SettingsAccountsEmailsInboxSettings = () => {
     });
   };
 
+  const handleIsSyncEnabledToggle = (value: boolean) => {
+    updateOneRecord({
+      idToUpdate: messageChannelId,
+      updateOneRecordInput: {
+        isSyncEnabled: value,
+      },
+    });
+  };
+
   useEffect(() => {
     if (!loading && !messageChannel) navigate(AppPath.NotFound);
   }, [loading, messageChannel, navigate]);
@@ -68,7 +77,6 @@ export const SettingsAccountsEmailsInboxSettings = () => {
             { children: messageChannel.handle || '' },
           ]}
         />
-        {/* TODO : discuss the desired sync behaviour and add Synchronization section */}
         <Section>
           <H2Title
             title="Email visibility"
@@ -98,6 +106,25 @@ export const SettingsAccountsEmailsInboxSettings = () => {
             onToggle={handleContactAutoCreationToggle}
           />
         </Section>
+        <Section>
+          <H2Title
+            title="Synchronization"
+            description="Past and future emails will automatically be synced to this workspace"
+          />
+          <SettingsAccountsToggleSettingCard
+            cardMedia={
+              <SettingsAccountsCardMedia>
+                <IconRefresh
+                  size={theme.icon.size.sm}
+                  stroke={theme.icon.stroke.lg}
+                />
+              </SettingsAccountsCardMedia>
+            }
+            title="Sync emails"
+            value={!!messageChannel.isSyncEnabled}
+            onToggle={handleIsSyncEnabledToggle}
+          />
+        </Section>
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );