Enhance date and time format settings to reflect system preferences (#…

…7274) Closes #6880 --------- Co-authored-by: Lucas Bordeau <[email protected]>
twentyhq · Oct 9, 2024 · 28c0b14 · 28c0b14
1 parent b80fa9c
commit 28c0b14
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 16 deletions.
diff --git 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/...ont/src/pages/settings/profile/appearance/components/DateTimeSettingsDateFormatSelect.tsx b/...ont/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,29 +31,33 @@ 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,
         },
         {
           label: `${formatInTimeZone(
             Date.now(),
-            setTimeZone,
+            usedTimeZone,
             DateFormat.DAY_FIRST,
           )}`,
           value: DateFormat.DAY_FIRST,
         },
         {
           label: `${formatInTimeZone(
             Date.now(),
-            setTimeZone,
+            usedTimeZone,
             DateFormat.YEAR_FIRST,
           )}`,
           value: DateFormat.YEAR_FIRST,

diff --git a/...ont/src/pages/settings/profile/appearance/components/DateTimeSettingsTimeFormatSelect.tsx b/...ont/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,21 +31,25 @@ 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,
         },
         {
           label: `12h (${formatInTimeZone(
             Date.now(),
-            setTimeZone,
+            usedTimeZone,
             TimeFormat.HOUR_12,
           )})`,
           value: TimeFormat.HOUR_12,

diff --git a/...front/src/pages/settings/profile/appearance/components/DateTimeSettingsTimeZoneSelect.tsx b/...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}