From 5bbd1a7c495c0983526f573fbcb22f594c6e3687 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tha=C3=AFs?= <guigon.thais@gmail.com>
Date: Wed, 20 Dec 2023 15:59:02 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20add=20Settings/Accounts/Emails/Inbox=20?=
 =?UTF-8?q?Settings=20synchronization=20sec=E2=80=A6=20(#3071)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: add Settings/Accounts/Emails/Inbox Settings page

Closes #3013

* feat: add Settings/Accounts/Emails/Inbox Settings synchronization section

Closes #3014

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
---
 ...SettingsAccountsInboxSettingsCardMedia.tsx | 16 ++++++
 ...ntsInboxSettingsSynchronizationSection.tsx | 57 +++++++++++++++++++
 .../src/modules/ui/display/icon/index.ts      |  1 +
 .../SettingsAccountsEmailsInboxSettings.tsx   |  9 +++
 4 files changed, 83 insertions(+)
 create mode 100644 packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia.tsx
 create mode 100644 packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsSynchronizationSection.tsx

diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia.tsx
new file mode 100644
index 000000000..6d8987634
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia.tsx
@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+
+const StyledCardMedia = styled.div`
+  align-items: center;
+  border: 2px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.xs};
+  color: ${({ theme }) => theme.font.color.light};
+  display: flex;
+  flex-direction: column;
+  height: ${({ theme }) => theme.spacing(8)};
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing(0.5)};
+  width: ${({ theme }) => theme.spacing(6)};
+`;
+
+export { StyledCardMedia as SettingsAccountsInboxSettingsCardMedia };
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsSynchronizationSection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsSynchronizationSection.tsx
new file mode 100644
index 000000000..f8db05182
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsSynchronizationSection.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 { 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 SettingsAccountsInboxSettingsSynchronizationSectionProps = {
+  account: Account;
+  onToggle: (value: boolean) => void;
+};
+
+export const SettingsAccountsInboxSettingsSynchronizationSection = ({
+  account,
+  onToggle,
+}: SettingsAccountsInboxSettingsSynchronizationSectionProps) => {
+  const theme = useTheme();
+
+  return (
+    <Section>
+      <H2Title
+        title="Synchronization"
+        description="Past and future emails will automatically be synced to this workspace"
+      />
+      <Card>
+        <StyledCardContent>
+          <SettingsAccountsInboxSettingsCardMedia>
+            <IconRefresh
+              size={theme.icon.size.sm}
+              stroke={theme.icon.stroke.lg}
+            />
+          </SettingsAccountsInboxSettingsCardMedia>
+          <StyledTitle>Sync emails</StyledTitle>
+          <Toggle value={account.isSynced} onChange={onToggle} />
+        </StyledCardContent>
+      </Card>
+    </Section>
+  );
+};
diff --git a/packages/twenty-front/src/modules/ui/display/icon/index.ts b/packages/twenty-front/src/modules/ui/display/icon/index.ts
index 367724fe6..04612c9de 100644
--- a/packages/twenty-front/src/modules/ui/display/icon/index.ts
+++ b/packages/twenty-front/src/modules/ui/display/icon/index.ts
@@ -88,6 +88,7 @@ export {
   IconPlus,
   IconPresentation,
   IconProgressCheck,
+  IconRefresh,
   IconRelationManyToMany,
   IconRelationOneToMany,
   IconRelationOneToOne,
diff --git a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmailsInboxSettings.tsx b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmailsInboxSettings.tsx
index 6f8b14c3f..00ed41ac0 100644
--- a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmailsInboxSettings.tsx
+++ b/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 { SettingsAccountsInboxSettingsSynchronizationSection } from '@/settings/accounts/components/SettingsAccountsInboxSettingsSynchronizationSection';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { AppPath } from '@/types/AppPath';
 import { IconSettings } from '@/ui/display/icon';
@@ -19,6 +20,10 @@ export const SettingsAccountsEmailsInboxSettings = () => {
     if (!account) navigate(AppPath.NotFound);
   }, [account, navigate]);
 
+  const handleToggle = (_value: boolean) => {};
+
+  if (!account) return <></>;
+
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <SettingsPageContainer>
@@ -29,6 +34,10 @@ export const SettingsAccountsEmailsInboxSettings = () => {
             { children: account?.email || '' },
           ]}
         />
+        <SettingsAccountsInboxSettingsSynchronizationSection
+          account={account}
+          onToggle={handleToggle}
+        />
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );