feat: add date format calendar setting (#4600)

Closes #4184

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}
+  />
+);

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
+      <SettingsAccountsCalendarDateFormatSelect
-        dropdownId="settings-accounts-calendar-time-format"
+        value={dateFormat}
-        label="Format"
+        onChange={setDateFormat}
-        fullWidth
+        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>
   );

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}
+  />
+);

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',
+}

packages/twenty-front/src/modules/settings/accounts/constants/TimeFormat.ts

@@ -0,0 +1,4 @@
+export enum TimeFormat {
+  '24h' = 'HH:mm',
+  '12h' = 'h:mm aa',
+}