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>

packages/twenty-front/src/modules/settings/accounts/utils/detectTimeZone.ts

@@ -0,0 +1,6 @@
+/**
+ * Detects the user's time zone.
+ * @returns a IANA time zone
+ */
+export const detectTimeZone = () =>
+  Intl.DateTimeFormat().resolvedOptions().timeZone;

packages/twenty-front/src/modules/settings/accounts/utils/findAvailableTimeZoneOption.ts

@@ -0,0 +1,10 @@
+import { availableTimeZoneOptionsByLabel } from '@/settings/accounts/constants/timeZoneSelectOptions';
+import { formatTimeZoneLabel } from '@/settings/accounts/utils/formatTimeZoneLabel';
+
+/**
+ * Finds the matching available IANA time zone select option from a given IANA time zone.
+ * @param value the IANA time zone to match
+ * @returns the matching available IANA time zone select option or undefined
+ */
+export const findAvailableTimeZoneOption = (value: string) =>
+  availableTimeZoneOptionsByLabel[formatTimeZoneLabel(value)];

packages/twenty-front/src/modules/settings/accounts/utils/formatTimeZoneLabel.ts

@@ -0,0 +1,29 @@
+import defaultLocale from 'date-fns/locale/en-US';
+import { formatInTimeZone } from 'date-fns-tz';
+
+/**
+ * Formats a IANA time zone to a select option label.
+ * @param ianaTimeZone IANA time zone
+ * @returns Formatted label
+ * @example 'Europe/Paris' => '(GMT+01:00) Central European Time - Paris'
+ */
+export const formatTimeZoneLabel = (ianaTimeZone: string) => {
+  const timeZoneWithGmtOffset = formatInTimeZone(
+    Date.now(),
+    ianaTimeZone,
+    `(OOOO) zzzz`,
+    { locale: defaultLocale },
+  );
+  const ianaTimeZoneParts = ianaTimeZone.split('/');
+  const location =
+    ianaTimeZoneParts.length > 1
+      ? ianaTimeZoneParts.slice(-1)[0].replaceAll('_', ' ')
+      : undefined;
+
+  const timeZoneLabel =
+    !location || timeZoneWithGmtOffset.includes(location)
+      ? timeZoneWithGmtOffset
+      : [timeZoneWithGmtOffset, location].join(' - ');
+
+  return timeZoneLabel;
+};