From 2ffe5194780a454739573e335d177ca925fdbfac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tha=C3=AFs?= <guigon.thais@gmail.com>
Date: Wed, 27 Mar 2024 15:17:31 +0100
Subject: [PATCH] feat: add date format calendar setting (#4600)

Closes #4184
---
 ...ttingsAccountsCalendarDateFormatSelect.tsx | 34 +++++++++++++++
 ...ettingsAccountsCalendarDisplaySettings.tsx | 32 +++++++-------
 ...ttingsAccountsCalendarTimeFormatSelect.tsx | 42 +++++++++++++++++++
 .../settings/accounts/constants/DateFormat.ts |  4 ++
 .../settings/accounts/constants/TimeFormat.ts |  4 ++
 5 files changed, 99 insertions(+), 17 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarDateFormatSelect.tsx
 create mode 100644 packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarTimeFormatSelect.tsx
 create mode 100644 packages/twenty-front/src/modules/settings/accounts/constants/DateFormat.ts
 create mode 100644 packages/twenty-front/src/modules/settings/accounts/constants/TimeFormat.ts

diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarDateFormatSelect.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarDateFormatSelect.tsx
new file mode 100644
index 000000000..278af533e
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarDateFormatSelect.tsx
@@ -0,0 +1,34 @@
+import { formatInTimeZone } from 'date-fns-tz';
+
+import { DateFormat } from '@/settings/accounts/constants/DateFormat';
+import { Select } from '@/ui/input/components/Select';
+
+type SettingsAccountsCalendarDateFormatSelectProps = {
+  value: DateFormat;
+  onChange: (nextValue: DateFormat) => void;
+  timeZone: string;
+};
+
+export const SettingsAccountsCalendarDateFormatSelect = ({
+  onChange,
+  timeZone,
+  value,
+}: SettingsAccountsCalendarDateFormatSelectProps) => (
+  <Select
+    dropdownId="settings-accounts-calendar-date-format"
+    label="Date format"
+    fullWidth
+    value={value}
+    options={[
+      {
+        label: formatInTimeZone(Date.now(), timeZone, DateFormat.US),
+        value: DateFormat.US,
+      },
+      {
+        label: formatInTimeZone(Date.now(), timeZone, DateFormat.UK),
+        value: DateFormat.UK,
+      },
+    ]}
+    onChange={onChange}
+  />
+);
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarDisplaySettings.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarDisplaySettings.tsx
index 880cf68c0..4f01ed496 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarDisplaySettings.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarDisplaySettings.tsx
@@ -1,10 +1,12 @@
 import { useState } from 'react';
 import styled from '@emotion/styled';
-import { formatInTimeZone } from 'date-fns-tz';
 
+import { SettingsAccountsCalendarDateFormatSelect } from '@/settings/accounts/components/SettingsAccountsCalendarDateFormatSelect';
+import { SettingsAccountsCalendarTimeFormatSelect } from '@/settings/accounts/components/SettingsAccountsCalendarTimeFormatSelect';
 import { SettingsAccountsCalendarTimeZoneSelect } from '@/settings/accounts/components/SettingsAccountsCalendarTimeZoneSelect';
+import { DateFormat } from '@/settings/accounts/constants/DateFormat';
+import { TimeFormat } from '@/settings/accounts/constants/TimeFormat';
 import { detectTimeZone } from '@/settings/accounts/utils/detectTimeZone';
-import { Select } from '@/ui/input/components/Select';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -16,8 +18,11 @@ 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 date format.
+  const [dateFormat, setDateFormat] = useState(DateFormat.US);
+
   // TODO: use the user's saved time format.
-  const [timeFormat, setTimeFormat] = useState<12 | 24>(24);
+  const [timeFormat, setTimeFormat] = useState(TimeFormat['24h']);
 
   return (
     <StyledContainer>
@@ -25,22 +30,15 @@ export const SettingsAccountsCalendarDisplaySettings = () => {
         value={timeZone}
         onChange={setTimeZone}
       />
-      <Select
-        dropdownId="settings-accounts-calendar-time-format"
-        label="Format"
-        fullWidth
+      <SettingsAccountsCalendarDateFormatSelect
+        value={dateFormat}
+        onChange={setDateFormat}
+        timeZone={timeZone}
+      />
+      <SettingsAccountsCalendarTimeFormatSelect
         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}
+        timeZone={timeZone}
       />
     </StyledContainer>
   );
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarTimeFormatSelect.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarTimeFormatSelect.tsx
new file mode 100644
index 000000000..cab95257d
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarTimeFormatSelect.tsx
@@ -0,0 +1,42 @@
+import { formatInTimeZone } from 'date-fns-tz';
+
+import { TimeFormat } from '@/settings/accounts/constants/TimeFormat';
+import { Select } from '@/ui/input/components/Select';
+
+type SettingsAccountsCalendarTimeFormatSelectProps = {
+  value: TimeFormat;
+  onChange: (nextValue: TimeFormat) => void;
+  timeZone: string;
+};
+
+export const SettingsAccountsCalendarTimeFormatSelect = ({
+  onChange,
+  timeZone,
+  value,
+}: SettingsAccountsCalendarTimeFormatSelectProps) => (
+  <Select
+    dropdownId="settings-accounts-calendar-time-format"
+    label="Time format"
+    fullWidth
+    value={value}
+    options={[
+      {
+        label: `24h (${formatInTimeZone(
+          Date.now(),
+          timeZone,
+          TimeFormat['24h'],
+        )})`,
+        value: TimeFormat['24h'],
+      },
+      {
+        label: `12h (${formatInTimeZone(
+          Date.now(),
+          timeZone,
+          TimeFormat['12h'],
+        )})`,
+        value: TimeFormat['12h'],
+      },
+    ]}
+    onChange={onChange}
+  />
+);
diff --git a/packages/twenty-front/src/modules/settings/accounts/constants/DateFormat.ts b/packages/twenty-front/src/modules/settings/accounts/constants/DateFormat.ts
new file mode 100644
index 000000000..985814c67
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/accounts/constants/DateFormat.ts
@@ -0,0 +1,4 @@
+export enum DateFormat {
+  US = 'MMM	d, yyyy',
+  UK = 'd MMM yyyy',
+}
diff --git a/packages/twenty-front/src/modules/settings/accounts/constants/TimeFormat.ts b/packages/twenty-front/src/modules/settings/accounts/constants/TimeFormat.ts
new file mode 100644
index 000000000..e168d1fda
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/accounts/constants/TimeFormat.ts
@@ -0,0 +1,4 @@
+export enum TimeFormat {
+  '24h' = 'HH:mm',
+  '12h' = 'h:mm aa',
+}