feat: add Event Visibility calendar settings (#4138)

Closes #4064

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

@@ -1,5 +1,12 @@
 import { useParams } from 'react-router-dom';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
 
+import {
+  EventSettingsVisibilityValue,
+  SettingsAccountsEventVisibilitySettingsCard,
+} from '@/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard';
+import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
 import { SettingsAccountsToggleSettingCard } from '@/settings/accounts/components/SettingsAccountsToggleSettingCard';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
@@ -11,7 +18,12 @@ import { Section } from '@/ui/layout/section/components/Section';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { mockedConnectedAccounts } from '~/testing/mock-data/accounts';
 
+const StyledCardMedia = styled(SettingsAccountsCardMedia)`
+  height: ${({ theme }) => theme.spacing(6)};
+`;
+
 export const SettingsAccountsCalendarsSettings = () => {
+  const theme = useTheme();
   const { accountUuid = '' } = useParams();
   const connectedAccount = mockedConnectedAccounts.find(
     ({ id }) => id === accountUuid,
@@ -33,15 +45,32 @@ export const SettingsAccountsCalendarsSettings = () => {
             { children: connectedAccount?.handle || '' },
           ]}
         />
+        <Section>
+          <H2Title
+            title="Event visibility"
+            description="Define what will be visible to other users in your workspace"
+          />
+          <SettingsAccountsEventVisibilitySettingsCard
+            value={EventSettingsVisibilityValue.Everything}
+            onChange={() => {}}
+          />
+        </Section>
         <Section>
           <H2Title
             title="Contact auto-creation"
             description="Automatically create contacts for people you've participated in an event with."
           />
           <SettingsAccountsToggleSettingCard
-            Icon={IconUser}
+            cardMedia={
+              <StyledCardMedia>
+                <IconUser
+                  size={theme.icon.size.sm}
+                  stroke={theme.icon.stroke.lg}
+                />
+              </StyledCardMedia>
+            }
             title="Auto-creation"
-            isEnabled={false}
+            value={false}
             onToggle={() => {}}
           />
         </Section>
@@ -51,9 +80,16 @@ export const SettingsAccountsCalendarsSettings = () => {
             description="Past and future calendar events will automatically be synced to this workspace"
           />
           <SettingsAccountsToggleSettingCard
-            Icon={IconRefresh}
+            cardMedia={
+              <StyledCardMedia>
+                <IconRefresh
+                  size={theme.icon.size.sm}
+                  stroke={theme.icon.stroke.lg}
+                />
+              </StyledCardMedia>
+            }
             title="Sync events"
-            isEnabled={false}
+            value={false}
             onToggle={() => {}}
           />
         </Section>

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

@@ -1,14 +1,16 @@
 import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+import { useTheme } from '@emotion/react';
 
 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 { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
 import {
   InboxSettingsVisibilityValue,
-  SettingsAccountsInboxSettingsVisibilitySection,
-} from '@/settings/accounts/components/SettingsAccountsInboxSettingsVisibilitySection';
+  SettingsAccountsInboxVisibilitySettingsCard,
+} from '@/settings/accounts/components/SettingsAccountsInboxVisibilitySettingsCard';
 import { SettingsAccountsToggleSettingCard } from '@/settings/accounts/components/SettingsAccountsToggleSettingCard';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { AppPath } from '@/types/AppPath';
@@ -19,6 +21,7 @@ import { Section } from '@/ui/layout/section/components/Section';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 
 export const SettingsAccountsEmailsInboxSettings = () => {
+  const theme = useTheme();
   const navigate = useNavigate();
   const { accountUuid: messageChannelId = '' } = useParams();
 
@@ -65,32 +68,33 @@ export const SettingsAccountsEmailsInboxSettings = () => {
             { children: messageChannel.handle || '' },
           ]}
         />
-        {/* TODO : discuss the desired sync behaviour */}
-        {/* <Section>
+        {/* TODO : discuss the desired sync behaviour and add Synchronization section */}
+        <Section>
           <H2Title
-            title="Synchronization"
-            description="Past and future emails will automatically be synced to this workspace"
+            title="Email visibility"
+            description="Define what will be visible to other users in your workspace"
           />
-          <SettingsAccountsSettingCard
-            Icon={IconRefresh}
-            title="Sync emails"
-            isEnabled={!!messageChannel.isSynced}
-            onToggle={handleSynchronizationToggle}
+          <SettingsAccountsInboxVisibilitySettingsCard
+            value={messageChannel.visibility}
+            onChange={handleVisibilityChange}
           />
-        </Section> */}
-        <SettingsAccountsInboxSettingsVisibilitySection
-          value={messageChannel.visibility}
-          onChange={handleVisibilityChange}
-        />
+        </Section>
         <Section>
           <H2Title
             title="Contact auto-creation"
             description="Automatically create contacts for people you’ve sent emails to"
           />
           <SettingsAccountsToggleSettingCard
-            Icon={IconUser}
+            cardMedia={
+              <SettingsAccountsCardMedia>
+                <IconUser
+                  size={theme.icon.size.sm}
+                  stroke={theme.icon.stroke.lg}
+                />
+              </SettingsAccountsCardMedia>
+            }
             title="Auto-creation"
-            isEnabled={!!messageChannel.isContactAutoCreationEnabled}
+            value={!!messageChannel.isContactAutoCreationEnabled}
             onToggle={handleContactAutoCreationToggle}
           />
         </Section>