From 28c0b146d49ff723fb40de8c7b784b8d876b4cbd Mon Sep 17 00:00:00 2001
From: Angela Li <156842217+angelali314159@users.noreply.github.com>
Date: Wed, 9 Oct 2024 11:05:40 -0400
Subject: [PATCH] Enhance date and time format settings to reflect system
 preferences (#7274)

Closes https://github.com/twentyhq/twenty/issues/6880

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
---
 .../localization/utils/detectTimeFormat.ts    |  6 +++++-
 .../DateTimeSettingsDateFormatSelect.tsx      | 20 ++++++++++++++-----
 .../DateTimeSettingsTimeFormatSelect.tsx      | 18 +++++++++++++----
 .../DateTimeSettingsTimeZoneSelect.tsx        | 15 ++++++++------
 4 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/packages/twenty-front/src/modules/localization/utils/detectTimeFormat.ts b/packages/twenty-front/src/modules/localization/utils/detectTimeFormat.ts
index 0580333afb90..01bad17167a5 100644
--- a/packages/twenty-front/src/modules/localization/utils/detectTimeFormat.ts
+++ b/packages/twenty-front/src/modules/localization/utils/detectTimeFormat.ts
@@ -5,6 +5,10 @@ export const detectTimeFormat = () => {
   const isHour12 = Intl.DateTimeFormat(navigator.language, {
     hour: 'numeric',
   }).resolvedOptions().hour12;
-  if (isDefined(isHour12) && isHour12) return TimeFormat.HOUR_12;
+
+  if (isDefined(isHour12) && isHour12) {
+    return TimeFormat.HOUR_12;
+  }
+
   return TimeFormat.HOUR_24;
 };
diff --git a/packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsDateFormatSelect.tsx b/packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsDateFormatSelect.tsx
index c17f7a8e712c..dcadd5ba9460 100644
--- a/packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsDateFormatSelect.tsx
+++ b/packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsDateFormatSelect.tsx
@@ -1,6 +1,7 @@
 import { formatInTimeZone } from 'date-fns-tz';
 
 import { DateFormat } from '@/localization/constants/DateFormat';
+import { detectDateFormat } from '@/localization/utils/detectDateFormat';
 import { detectTimeZone } from '@/localization/utils/detectTimeZone';
 import { Select } from '@/ui/input/components/Select';
 
@@ -15,7 +16,12 @@ export const DateTimeSettingsDateFormatSelect = ({
   timeZone,
   value,
 }: DateTimeSettingsDateFormatSelectProps) => {
-  const setTimeZone = timeZone === 'system' ? detectTimeZone() : timeZone;
+  const systemTimeZone = detectTimeZone();
+
+  const usedTimeZone = timeZone === 'system' ? systemTimeZone : timeZone;
+
+  const systemDateFormat = detectDateFormat();
+
   return (
     <Select
       dropdownId="datetime-settings-date-format"
@@ -25,13 +31,17 @@ export const DateTimeSettingsDateFormatSelect = ({
       value={value}
       options={[
         {
-          label: `System settings`,
+          label: `System settings - ${formatInTimeZone(
+            Date.now(),
+            usedTimeZone,
+            systemDateFormat,
+          )}`,
           value: DateFormat.SYSTEM,
         },
         {
           label: `${formatInTimeZone(
             Date.now(),
-            setTimeZone,
+            usedTimeZone,
             DateFormat.MONTH_FIRST,
           )}`,
           value: DateFormat.MONTH_FIRST,
@@ -39,7 +49,7 @@ export const DateTimeSettingsDateFormatSelect = ({
         {
           label: `${formatInTimeZone(
             Date.now(),
-            setTimeZone,
+            usedTimeZone,
             DateFormat.DAY_FIRST,
           )}`,
           value: DateFormat.DAY_FIRST,
@@ -47,7 +57,7 @@ export const DateTimeSettingsDateFormatSelect = ({
         {
           label: `${formatInTimeZone(
             Date.now(),
-            setTimeZone,
+            usedTimeZone,
             DateFormat.YEAR_FIRST,
           )}`,
           value: DateFormat.YEAR_FIRST,
diff --git a/packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsTimeFormatSelect.tsx b/packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsTimeFormatSelect.tsx
index 9aa24254b4b1..e06cde4cc0ff 100644
--- a/packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsTimeFormatSelect.tsx
+++ b/packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsTimeFormatSelect.tsx
@@ -1,6 +1,7 @@
 import { formatInTimeZone } from 'date-fns-tz';
 
 import { TimeFormat } from '@/localization/constants/TimeFormat';
+import { detectTimeFormat } from '@/localization/utils/detectTimeFormat';
 import { detectTimeZone } from '@/localization/utils/detectTimeZone';
 import { Select } from '@/ui/input/components/Select';
 
@@ -15,7 +16,12 @@ export const DateTimeSettingsTimeFormatSelect = ({
   timeZone,
   value,
 }: DateTimeSettingsTimeFormatSelectProps) => {
-  const setTimeZone = timeZone === 'system' ? detectTimeZone() : timeZone;
+  const systemTimeZone = detectTimeZone();
+
+  const usedTimeZone = timeZone === 'system' ? systemTimeZone : timeZone;
+
+  const systemTimeFormat = detectTimeFormat();
+
   return (
     <Select
       dropdownId="datetime-settings-time-format"
@@ -25,13 +31,17 @@ export const DateTimeSettingsTimeFormatSelect = ({
       value={value}
       options={[
         {
-          label: 'System settings',
+          label: `System Settings - ${formatInTimeZone(
+            Date.now(),
+            usedTimeZone,
+            systemTimeFormat,
+          )}`,
           value: TimeFormat.SYSTEM,
         },
         {
           label: `24h (${formatInTimeZone(
             Date.now(),
-            setTimeZone,
+            usedTimeZone,
             TimeFormat.HOUR_24,
           )})`,
           value: TimeFormat.HOUR_24,
@@ -39,7 +49,7 @@ export const DateTimeSettingsTimeFormatSelect = ({
         {
           label: `12h (${formatInTimeZone(
             Date.now(),
-            setTimeZone,
+            usedTimeZone,
             TimeFormat.HOUR_12,
           )})`,
           value: TimeFormat.HOUR_12,
diff --git a/packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsTimeZoneSelect.tsx b/packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsTimeZoneSelect.tsx
index a48dea5db8de..348cfded0779 100644
--- a/packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsTimeZoneSelect.tsx
+++ b/packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsTimeZoneSelect.tsx
@@ -12,19 +12,22 @@ export const DateTimeSettingsTimeZoneSelect = ({
   value = detectTimeZone(),
   onChange,
 }: DateTimeSettingsTimeZoneSelectProps) => {
+  const systemTimeZone = detectTimeZone();
+
+  const systemTimeZoneOption = findAvailableTimeZoneOption(systemTimeZone);
+
   return (
     <Select
       dropdownId="settings-accounts-calendar-time-zone"
       dropdownWidth={416}
       label="Time zone"
       fullWidth
-      value={
-        value === 'system'
-          ? 'System settings'
-          : findAvailableTimeZoneOption(value)?.value
-      }
+      value={value}
       options={[
-        { label: 'System settings', value: 'system' },
+        {
+          label: `System settings - ${systemTimeZoneOption.label}`,
+          value: 'system',
+        },
         ...AVAILABLE_TIMEZONE_OPTIONS,
       ]}
       onChange={onChange}