feat: add Synchronization calendar settings

Closes #4066
twentyhq · Feb 21, 2024 · 37fde02 · 37fde02
1 parent 4f4ca5c
commit 37fde02
Show file tree

Hide file tree

Showing 11 changed files with 46 additions and 38 deletions.
diff --git a/...ront/src/modules/settings/accounts/components/SettingsAccountsCalendarSettingsSection.tsx b/...ront/src/modules/settings/accounts/components/SettingsAccountsCalendarSettingsSection.tsx
@@ -4,12 +4,11 @@ import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
-import { SettingsAccountsListSkeletonCard } from '@/settings/accounts/components/SettingsAccountsSkeletonCard';
+import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
+import { SettingsAccountsListSkeletonCard } from '@/settings/accounts/components/SettingsAccountsListSkeletonCard';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Section } from '@/ui/layout/section/components/Section';
 
-import { SettingsAccountsListEmptyStateCard } from './SettingsAccountsEmptyStateCard';
-
 export const SettingsAccountsCalendarSettingsSection = () => {
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
 

diff --git a/...ettingsAccountsInboxSettingsCardMedia.tsx → .../components/SettingsAccountsCardMedia.tsx b/...ettingsAccountsInboxSettingsCardMedia.tsx → .../components/SettingsAccountsCardMedia.tsx
@@ -14,4 +14,4 @@ const StyledCardMedia = styled.div`
   width: ${({ theme }) => theme.spacing(6)};
 `;
 
-export { StyledCardMedia as SettingsAccountsInboxSettingsCardMedia };
+export { StyledCardMedia as SettingsAccountsCardMedia };
diff --git a/...ont/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx b/...ont/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx
@@ -3,7 +3,7 @@ import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Section } from '@/ui/layout/section/components/Section';
 
-import { SettingsAccountsCard } from './SettingsAccountsCard';
+import { SettingsAccountsListCard } from './SettingsAccountsListCard';
 import { SettingsAccountsListEmptyStateCard } from './SettingsAccountsListEmptyStateCard';
 
 export const SettingsAccountsConnectedAccountsSection = ({
@@ -25,7 +25,7 @@ export const SettingsAccountsConnectedAccountsSection = ({
         description="Manage your internet accounts."
       />
       {accounts?.length ? (
-        <SettingsAccountsCard
+        <SettingsAccountsListCard
           accounts={accounts}
           onAccountRemove={handleAccountRemove}
         />

diff --git a/...enty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsSyncSection.tsx b/...enty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsSyncSection.tsx
@@ -5,13 +5,12 @@ import { MessageChannel } from '@/accounts/types/MessageChannel';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
-import { SettingsAccountsListSkeletonCard } from '@/settings/accounts/components/SettingsAccountsSkeletonCard';
+import { SettingsAccountsEmailsCard } from '@/settings/accounts/components/SettingsAccountsEmailsCard';
+import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
+import { SettingsAccountsListSkeletonCard } from '@/settings/accounts/components/SettingsAccountsListSkeletonCard';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Section } from '@/ui/layout/section/components/Section';
 
-import { SettingsAccountsEmailsCard } from './SettingsAccountsEmailsCard';
-import { SettingsAccountsListEmptyStateCard } from './SettingsAccountsEmptyStateCard';
-
 export const SettingsAccountsEmailsSyncSection = () => {
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
 

diff --git a/.../settings/accounts/components/SettingsAccountsInboxSettingsContactAutoCreationSection.tsx b/.../settings/accounts/components/SettingsAccountsInboxSettingsContactAutoCreationSection.tsx
@@ -2,7 +2,7 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { MessageChannel } from '@/accounts/types/MessageChannel';
-import { SettingsAccountsInboxSettingsCardMedia } from '@/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia';
+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';
@@ -42,9 +42,9 @@ export const SettingsAccountsInboxSettingsContactAutoCreateSection = ({
       />
       <Card>
         <StyledCardContent>
-          <SettingsAccountsInboxSettingsCardMedia>
+          <SettingsAccountsCardMedia>
             <IconUser size={theme.icon.size.sm} stroke={theme.icon.stroke.lg} />
-          </SettingsAccountsInboxSettingsCardMedia>
+          </SettingsAccountsCardMedia>
           <StyledTitle>Auto-creation</StyledTitle>
           <Toggle
             value={messageChannel.isContactAutoCreationEnabled}

diff --git a/...c/modules/settings/accounts/components/SettingsAccountsInboxSettingsVisibilitySection.tsx b/...c/modules/settings/accounts/components/SettingsAccountsInboxSettingsVisibilitySection.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { SettingsAccountsInboxSettingsCardMedia } from '@/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia';
+import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Radio } from '@/ui/input/components/Radio';
 import { Card } from '@/ui/layout/card/components/Card';
@@ -29,7 +29,7 @@ const StyledCardContent = styled(CardContent)`
   }
 `;
 
-const StyledCardMedia = styled(SettingsAccountsInboxSettingsCardMedia)`
+const StyledCardMedia = styled(SettingsAccountsCardMedia)`
   align-items: stretch;
 `;
 

diff --git a/...ounts/components/SettingsAccountsCard.tsx → ...s/components/SettingsAccountsListCard.tsx b/...ounts/components/SettingsAccountsCard.tsx → ...s/components/SettingsAccountsListCard.tsx
@@ -4,6 +4,8 @@ import styled from '@emotion/styled';
 
 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { SettingsAccountsRowDropdownMenu } from '@/settings/accounts/components/SettingsAccountsRowDropdownMenu';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
 import { IconAt, IconPlus } from '@/ui/display/icon';
 import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
@@ -30,15 +32,15 @@ const StyledDropdown = styled(SettingsAccountsRowDropdownMenu)`
   margin-left: auto;
 `;
 
-type SettingsAccountsCardProps = {
+type SettingsAccountsListCardProps = {
   accounts: ConnectedAccount[];
   onAccountRemove?: (uuid: string) => void;
 };
 
-export const SettingsAccountsCard = ({
+export const SettingsAccountsListCard = ({
   accounts,
   onAccountRemove,
-}: SettingsAccountsCardProps) => {
+}: SettingsAccountsListCardProps) => {
   const theme = useTheme();
   const navigate = useNavigate();
 
@@ -61,7 +63,7 @@ export const SettingsAccountsCard = ({
         <StyledIconButton
           Icon={IconPlus}
           accent="tertiary"
-          onClick={() => navigate('/settings/accounts/new')}
+          onClick={() => navigate(getSettingsPagePath(SettingsPath.NewAccount))}
         />
       </StyledFooter>
     </Card>

diff --git a/...tsInboxSettingsSynchronizationSection.tsx → ...ettingsAccountsSynchronizationSection.tsx b/...tsInboxSettingsSynchronizationSection.tsx → ...ettingsAccountsSynchronizationSection.tsx
@@ -1,8 +1,7 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { MessageChannel } from '@/accounts/types/MessageChannel';
-import { SettingsAccountsInboxSettingsCardMedia } from '@/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia';
+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';
@@ -23,33 +22,34 @@ const StyledTitle = styled.span`
   margin-right: auto;
 `;
 
-type SettingsAccountsInboxSettingsSynchronizationSectionProps = {
-  messageChannel: MessageChannel;
+type SettingsAccountsSynchronizationSectionProps = {
+  cardTitle: string;
+  description: string;
+  isSynced: boolean;
   onToggle: (value: boolean) => void;
 };
 
-export const SettingsAccountsInboxSettingsSynchronizationSection = ({
-  messageChannel,
+export const SettingsAccountsSynchronizationSection = ({
+  cardTitle,
+  description,
+  isSynced,
   onToggle,
-}: SettingsAccountsInboxSettingsSynchronizationSectionProps) => {
+}: SettingsAccountsSynchronizationSectionProps) => {
   const theme = useTheme();
 
   return (
     <Section>
-      <H2Title
-        title="Synchronization"
-        description="Past and future emails will automatically be synced to this workspace"
-      />
+      <H2Title title="Synchronization" description={description} />
       <Card>
         <StyledCardContent>
-          <SettingsAccountsInboxSettingsCardMedia>
+          <SettingsAccountsCardMedia>
             <IconRefresh
               size={theme.icon.size.sm}
               stroke={theme.icon.stroke.lg}
             />
-          </SettingsAccountsInboxSettingsCardMedia>
-          <StyledTitle>Sync emails</StyledTitle>
-          <Toggle value={messageChannel.isSynced} onChange={onToggle} />
+          </SettingsAccountsCardMedia>
+          <StyledTitle>{cardTitle}</StyledTitle>
+          <Toggle value={isSynced} onChange={onToggle} />
         </StyledCardContent>
       </Card>
     </Section>

diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsNewAccountSection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsNewAccountSection.tsx
@@ -1,8 +1,7 @@
+import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Section } from '@/ui/layout/section/components/Section';
 
-import { SettingsAccountsListEmptyStateCard } from './SettingsAccountsEmptyStateCard';
-
 export const SettingsNewAccountSection = () => {
   return (
     <Section>

diff --git a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendarsSettings.tsx b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendarsSettings.tsx
@@ -1,5 +1,6 @@
 import { useParams } from 'react-router-dom';
 
+import { SettingsAccountsSynchronizationSection } from '@/settings/accounts/components/SettingsAccountsSynchronizationSection';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
@@ -30,6 +31,12 @@ export const SettingsAccountsCalendarsSettings = () => {
             { children: connectedAccount?.handle || '' },
           ]}
         />
+        <SettingsAccountsSynchronizationSection
+          description="Past and future calendar events will automatically be synced to this workspace"
+          cardTitle="Sync events"
+          isSynced={false}
+          onToggle={() => {}}
+        />
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );

diff --git a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmailsInboxSettings.tsx b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmailsInboxSettings.tsx
@@ -63,8 +63,10 @@ export const SettingsAccountsEmailsInboxSettings = () => {
           ]}
         />
         {/* TODO : discuss the desired sync behaviour */}
-        {/* <SettingsAccountsInboxSettingsSynchronizationSection
-          messageChannel={messageChannel}
+        {/* <SettingsAccountsSynchronizationSection
+          description="Past and future emails will automatically be synced to this workspace"
+          cardTitle="Sync emails"
+          isSynced={!!messageChannel?.isSynced}
           onToggle={handleSynchronizationToggle}
         /> */}
         <SettingsAccountsInboxSettingsVisibilitySection