feat: add Display calendar settings (#4164)

* feat: add Color calendar setting Closes #4067 * fix: fix wrong imports * feat: add Display calendar settings Closes #4068 * feat: add 12h/24h in Format option labels * fix tests * Fix * Fix --------- Co-authored-by: Charles Bochet <charles@twenty.com>
twentyhq · Feb 24, 2024 · 3d809d5 · 3d809d5
1 parent a993155
commit 3d809d5
Show file tree

Hide file tree

Showing 16 changed files with 926 additions and 82 deletions.
diff --git a/package.json b/package.json
@@ -73,6 +73,7 @@
     "danger-plugin-todos": "^1.3.1",
     "dataloader": "^2.2.2",
     "date-fns": "^2.30.0",
+    "date-fns-tz": "^2.0.0",
     "debounce": "^2.0.0",
     "deep-equal": "^2.2.2",
     "docusaurus-node-polyfills": "^1.0.0",

diff --git a/...ttingsAccountsCalendarSettingsSection.tsx → ...tingsAccountsCalendarAccountsListCard.tsx b/...ttingsAccountsCalendarSettingsSection.tsx → ...tingsAccountsCalendarAccountsListCard.tsx
@@ -10,9 +10,7 @@ import { SettingsAccountsListCard } from '@/settings/accounts/components/Setting
 import { SettingsAccountsSynchronizationStatus } from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
 import { IconChevronRight } from '@/ui/display/icon';
 import { IconGoogleCalendar } from '@/ui/display/icon/components/IconGoogleCalendar';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
-import { Section } from '@/ui/layout/section/components/Section';
 import { mockedConnectedAccounts } from '~/testing/mock-data/accounts';
 
 const StyledRowRightContainer = styled.div`
@@ -21,7 +19,7 @@ const StyledRowRightContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(1)};
 `;
 
-export const SettingsAccountsCalendarSettingsSection = () => {
+export const SettingsAccountsCalendarAccountsListCard = () => {
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
   const navigate = useNavigate();
 
@@ -35,25 +33,19 @@ export const SettingsAccountsCalendarSettingsSection = () => {
   });
 
   return (
-    <Section>
-      <H2Title
-        title="Calendar settings"
-        description="Sync your calendars and set your preferences"
-      />
-      <SettingsAccountsListCard
-        accounts={mockedConnectedAccounts}
-        isLoading={loading}
-        onRowClick={(account) =>
-          navigate(`/settings/accounts/calendars/${account.id}`)
-        }
-        RowIcon={IconGoogleCalendar}
-        RowRightComponent={({ account: _account }) => (
-          <StyledRowRightContainer>
-            <SettingsAccountsSynchronizationStatus synced />
-            <LightIconButton Icon={IconChevronRight} accent="tertiary" />
-          </StyledRowRightContainer>
-        )}
-      />
-    </Section>
+    <SettingsAccountsListCard
+      accounts={mockedConnectedAccounts}
+      isLoading={loading}
+      onRowClick={(account) =>
+        navigate(`/settings/accounts/calendars/${account.id}`)
+      }
+      RowIcon={IconGoogleCalendar}
+      RowRightComponent={({ account: _account }) => (
+        <StyledRowRightContainer>
+          <SettingsAccountsSynchronizationStatus synced />
+          <LightIconButton Icon={IconChevronRight} accent="tertiary" />
+        </StyledRowRightContainer>
+      )}
+    />
   );
 };
diff --git a/...ront/src/modules/settings/accounts/components/SettingsAccountsCalendarDisplaySettings.tsx b/...ront/src/modules/settings/accounts/components/SettingsAccountsCalendarDisplaySettings.tsx
@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import styled from '@emotion/styled';
+import { formatInTimeZone } from 'date-fns-tz';
+
+import { SettingsAccountsCalendarTimeZoneSelect } from '@/settings/accounts/components/SettingsAccountsCalendarTimeZoneSelect';
+import { detectTimeZone } from '@/settings/accounts/utils/detectTimeZone';
+import { Select } from '@/ui/input/components/Select';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(4)};
+`;
+
+export const SettingsAccountsCalendarDisplaySettings = () => {
+  // TODO: use the user's saved time zone. If undefined, default it with the user's detected time zone.
+  const [timeZone, setTimeZone] = useState(detectTimeZone());
+
+  // TODO: use the user's saved time format.
+  const [timeFormat, setTimeFormat] = useState<12 | 24>(24);
+
+  return (
+    <StyledContainer>
+      <SettingsAccountsCalendarTimeZoneSelect
+        value={timeZone}
+        onChange={setTimeZone}
+      />
+      <Select
+        dropdownId="settings-accounts-calendar-time-format"
+        label="Format"
+        fullWidth
+        value={timeFormat}
+        options={[
+          {
+            label: `24h (${formatInTimeZone(Date.now(), timeZone, 'HH:mm')})`,
+            value: 24,
+          },
+          {
+            label: `12h (${formatInTimeZone(Date.now(), timeZone, 'h:mm aa')})`,
+            value: 12,
+          },
+        ]}
+        onChange={setTimeFormat}
+      />
+    </StyledContainer>
+  );
+};
diff --git a/...front/src/modules/settings/accounts/components/SettingsAccountsCalendarTimeZoneSelect.tsx b/...front/src/modules/settings/accounts/components/SettingsAccountsCalendarTimeZoneSelect.tsx
@@ -0,0 +1,25 @@
+import { availableTimeZoneOptions } from '@/settings/accounts/constants/timeZoneSelectOptions';
+import { detectTimeZone } from '@/settings/accounts/utils/detectTimeZone';
+import { findAvailableTimeZoneOption } from '@/settings/accounts/utils/findAvailableTimeZoneOption';
+import { Select } from '@/ui/input/components/Select';
+
+type SettingsAccountsCalendarTimeZoneSelectProps = {
+  value?: string;
+  onChange: (nextValue: string) => void;
+};
+
+export const SettingsAccountsCalendarTimeZoneSelect = ({
+  value = detectTimeZone(),
+  onChange,
+}: SettingsAccountsCalendarTimeZoneSelectProps) => (
+  <Select
+    dropdownId="settings-accounts-calendar-time-zone"
+    dropdownWidth={416}
+    label="Time zone"
+    fullWidth
+    value={findAvailableTimeZoneOption(value)?.value}
+    options={availableTimeZoneOptions}
+    onChange={onChange}
+    withSearchInput
+  />
+);
diff --git a/...nts/SettingsAccountsEmailsSyncSection.tsx → ...ettingsAccountsEmailsAccountsListCard.tsx b/...nts/SettingsAccountsEmailsSyncSection.tsx → ...ettingsAccountsEmailsAccountsListCard.tsx
@@ -12,16 +12,14 @@ import { SettingsAccountsListCard } from '@/settings/accounts/components/Setting
 import { SettingsAccountsSynchronizationStatus } from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
 import { IconChevronRight } from '@/ui/display/icon';
 import { IconGmail } from '@/ui/display/icon/components/IconGmail';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
-import { Section } from '@/ui/layout/section/components/Section';
 
 const StyledRowRightContainer = styled.div`
   align-items: center;
   display: flex;
   gap: ${({ theme }) => theme.spacing(1)};
 `;
 
-export const SettingsAccountsEmailsSyncSection = () => {
+export const SettingsAccountsEmailsAccountsListCard = () => {
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
   const navigate = useNavigate();
 
@@ -53,27 +51,21 @@ export const SettingsAccountsEmailsSyncSection = () => {
   );
 
   return (
-    <Section>
-      <H2Title
-        title="Emails sync"
-        description="Sync your inboxes and set your privacy settings"
-      />
-      <SettingsAccountsListCard
-        accounts={messageChannelsWithSyncedEmails}
-        isLoading={accountsLoading || messageChannelsLoading}
-        onRowClick={(messageChannel) =>
-          navigate(`/settings/accounts/emails/${messageChannel.id}`)
-        }
-        RowIcon={IconGmail}
-        RowRightComponent={({ account: messageChannel }) => (
-          <StyledRowRightContainer>
-            <SettingsAccountsSynchronizationStatus
-              synced={messageChannel.isSynced}
-            />
-            <LightIconButton Icon={IconChevronRight} accent="tertiary" />
-          </StyledRowRightContainer>
-        )}
-      />
-    </Section>
+    <SettingsAccountsListCard
+      accounts={messageChannelsWithSyncedEmails}
+      isLoading={accountsLoading || messageChannelsLoading}
+      onRowClick={(messageChannel) =>
+        navigate(`/settings/accounts/emails/${messageChannel.id}`)
+      }
+      RowIcon={IconGmail}
+      RowRightComponent={({ account: messageChannel }) => (
+        <StyledRowRightContainer>
+          <SettingsAccountsSynchronizationStatus
+            synced={messageChannel.isSynced}
+          />
+          <LightIconButton Icon={IconChevronRight} accent="tertiary" />
+        </StyledRowRightContainer>
+      )}
+    />
   );
 };