feat(WIP): add user config for dates and hours format

siiick · siiick · commit d647a10dfc05 · 2025-07-28T13:33:30.000+02:00
diff --git a/packages/app-builder/src/repositories/SessionStorageRepositories/LngStorageRepository.ts b/packages/app-builder/src/repositories/SessionStorageRepositories/LngStorageRepository.ts
@@ -2,11 +2,11 @@ import { createCookie, createCookieSessionStorage } from '@remix-run/node';
 
 import { type SessionStorageRepositoryOptions } from './SessionStorageRepository';
 
-export function getLngStorageRepository({
+export function getUserPreferencesStorageRepository({
   secrets,
   secure,
 }: Omit<SessionStorageRepositoryOptions, 'maxAge'>) {
-  const lngCookie = createCookie('lng', {
+  const userPreferencesCookie = createCookie('user-preferences', {
     sameSite: 'lax', // this helps with CSRF
     path: '/', // remember to add this so the cookie will work in all routes
     httpOnly: true,
@@ -15,13 +15,21 @@ export function getLngStorageRepository({
   });
 
   // export the whole sessionStorage object
-  const lngStorage = createCookieSessionStorage<{
+  const userPreferencesStorage = createCookieSessionStorage<{
     lng: string;
+    dateFormat?: string;
+    hoursFormat?: string;
   }>({
-    cookie: lngCookie,
+    cookie: userPreferencesCookie,
   });
 
-  return { lngStorage };
+  return { userPreferencesStorage };
 }
 
-export type LngStorageRepository = ReturnType<typeof getLngStorageRepository>;
+export type UserPreferencesStorageRepository = ReturnType<
+  typeof getUserPreferencesStorageRepository
+>;
+
+// Legacy export for backward compatibility
+export const getLngStorageRepository = getUserPreferencesStorageRepository;
+export type LngStorageRepository = UserPreferencesStorageRepository;
diff --git a/packages/app-builder/src/repositories/init.server.ts b/packages/app-builder/src/repositories/init.server.ts
@@ -28,8 +28,8 @@ import { makeGetScenarioRepository } from './ScenarioRepository';
 import {
   getAuthStorageRepository,
   getCsrfCookie,
-  getLngStorageRepository,
   getToastStorageRepository,
+  getUserPreferencesStorageRepository,
   type SessionStorageRepositoryOptions,
 } from './SessionStorageRepositories';
 import { makeGetTestRunRepository } from './TestRunRepository';
@@ -57,7 +57,7 @@ export function makeServerRepositories({
     authStorageRepository: getAuthStorageRepository(sessionStorageRepositoryOptions),
     csrfCookie: getCsrfCookie(sessionStorageRepositoryOptions),
     toastStorageRepository: getToastStorageRepository(sessionStorageRepositoryOptions),
-    lngStorageRepository: getLngStorageRepository(sessionStorageRepositoryOptions),
+    lngStorageRepository: getUserPreferencesStorageRepository(sessionStorageRepositoryOptions),
     getFeatureAccessApiClientWithoutAuth,
     getFeatureAccessAPIClientWithAuth,
     marbleCoreApiClient,
diff --git a/packages/app-builder/src/root.tsx b/packages/app-builder/src/root.tsx
@@ -83,6 +83,8 @@ export async function loader({ request }: LoaderFunctionArgs) {
   const disableSegment = getServerEnv('DISABLE_SEGMENT') ?? false;
   const appConfig = await appConfigRepository.getAppConfig();
 
+  const userPreferences = await i18nextService.getUserPreferences(request);
+
   return Response.json(
     {
       ENV,
@@ -91,6 +93,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
       toastMessage,
       segmentScript: !disableSegment && segmentApiKey ? getSegmentScript(segmentApiKey) : undefined,
       appConfig,
+      userPreferences,
     },
     {
       headers,
diff --git a/packages/app-builder/src/routes/ressources+/user+/language.tsx b/packages/app-builder/src/routes/ressources+/user+/language.tsx
@@ -1,33 +1,70 @@
-import { supportedLngs } from '@app-builder/services/i18n/i18n-config';
+import {
+  sampleDateFormats,
+  sampleHoursFormats,
+  supportedLngs,
+} from '@app-builder/services/i18n/i18n-config';
 import { initServerServices } from '@app-builder/services/init.server';
 import { parseForm } from '@app-builder/utils/input-validation';
 import { getRoute } from '@app-builder/utils/routes';
-import { type ActionFunctionArgs, json } from '@remix-run/node';
+import { type ActionFunctionArgs } from '@remix-run/node';
 import { useFetcher } from '@remix-run/react';
 import { useTranslation } from 'react-i18next';
 import { redirectBack } from 'remix-utils/redirect-back';
-import { Select } from 'ui-design-system';
+import { Button, MenuCommand } from 'ui-design-system';
 import * as z from 'zod';
 
 import { setToastMessage } from '../../../components/MarbleToaster';
+import { useFormatPreferencesHook } from '../../../utils/format';
 
 const formSchema = z.object({
-  preferredLanguage: z.enum(supportedLngs),
+  preferredLanguage: z.enum(supportedLngs).optional(),
+  preferredDate: z.enum(Object.keys(sampleDateFormats) as [string, ...string[]]).optional(),
+  preferredHours: z.enum(Object.keys(sampleHoursFormats) as [string, ...string[]]).optional(),
 });
 
+// Helper function to get human-readable language names
+function getLanguageDisplayName(languageCode: string): string {
+  const languageNames: Record<string, string> = {
+    en: 'English',
+    fr: 'Français',
+    ar: 'العربية',
+  };
+
+  return languageNames[languageCode] ?? languageCode;
+}
+
 export async function action({ request }: ActionFunctionArgs) {
   const { i18nextService, toastSessionService } = initServerServices(request);
 
   try {
-    const { preferredLanguage } = await parseForm(request, formSchema);
+    const { preferredLanguage, preferredDate, preferredHours } = await parseForm(
+      request,
+      formSchema,
+    );
+
+    const headers = new Headers();
 
-    const { cookie } = await i18nextService.setLanguage(request, preferredLanguage);
+    // Set language if provided
+    if (preferredLanguage) {
+      const { cookie } = await i18nextService.setLanguage(request, preferredLanguage);
+      headers.append('Set-Cookie', cookie);
+    }
+
+    // Set date format if provided
+    if (preferredDate) {
+      const { cookie } = await i18nextService.setDateFormat(request, preferredDate);
+      headers.append('Set-Cookie', cookie);
+    }
+
+    // Set hours format if provided
+    if (preferredHours) {
+      const { cookie } = await i18nextService.setHoursFormat(request, preferredHours);
+      headers.append('Set-Cookie', cookie);
+    }
 
     return redirectBack(request, {
       fallback: getRoute('/scenarios'),
-      headers: {
-        'Set-Cookie': cookie,
-      },
+      headers,
     });
   } catch (_error) {
     const toastSession = await toastSessionService.getSession(request);
@@ -36,7 +73,7 @@ export async function action({ request }: ActionFunctionArgs) {
       messageKey: 'common:errors.unknown',
     });
 
-    return json(
+    return Response.json(
       {
         success: false as const,
       },
@@ -56,27 +93,99 @@ export function LanguagePicker() {
   const {
     i18n: { language },
   } = useTranslation<'common'>();
+  const formatPreferences = useFormatPreferencesHook();
   const fetcher = useFetcher<typeof action>();
 
   if (supportedLngs.every((lng: string) => lng.startsWith('en'))) return null;
 
+  console.log('language', language);
   return (
-    <Select.Default
-      value={language}
-      onValueChange={(newPreferredLanguage) => {
-        fetcher.submit(
-          { preferredLanguage: newPreferredLanguage },
-          { method: 'POST', action: getRoute('/ressources/user/language') },
-        );
-      }}
-    >
-      {supportedLngs.map((lng) => {
-        return (
-          <Select.DefaultItem key={lng} value={lng}>
-            {lng}
-          </Select.DefaultItem>
-        );
-      })}
-    </Select.Default>
+    <div className="flex flex-col gap-2">
+      <MenuCommand.Menu>
+        <MenuCommand.Trigger>
+          <Button variant="secondary" className="h-10 gap-2">
+            {getLanguageDisplayName(language)}
+            <MenuCommand.Arrow />
+          </Button>
+        </MenuCommand.Trigger>
+        <MenuCommand.Content sameWidth>
+          <MenuCommand.List>
+            {supportedLngs.map((lng) => {
+              return (
+                <MenuCommand.Item
+                  key={lng}
+                  value={lng}
+                  onSelect={(selectedLanguage) => {
+                    fetcher.submit(
+                      { preferredLanguage: selectedLanguage },
+                      { method: 'POST', action: getRoute('/ressources/user/language') },
+                    );
+                  }}
+                >
+                  {getLanguageDisplayName(lng)}
+                </MenuCommand.Item>
+              );
+            })}
+          </MenuCommand.List>
+        </MenuCommand.Content>
+      </MenuCommand.Menu>
+      <MenuCommand.Menu>
+        <MenuCommand.Trigger>
+          <Button variant="secondary" className="h-10 gap-2">
+            {formatPreferences.dateFormatDisplay || 'Unknown Format'}
+            <MenuCommand.Arrow />
+          </Button>
+        </MenuCommand.Trigger>
+        <MenuCommand.Content sameWidth>
+          <MenuCommand.List>
+            {Object.values(sampleDateFormats).map((dateFormat) => {
+              return (
+                <MenuCommand.Item
+                  key={dateFormat.value}
+                  value={dateFormat.value}
+                  onSelect={(selectedDate) => {
+                    fetcher.submit(
+                      { preferredDate: selectedDate },
+                      { method: 'POST', action: getRoute('/ressources/user/language') },
+                    );
+                  }}
+                >
+                  {dateFormat.displayName}
+                </MenuCommand.Item>
+              );
+            })}
+          </MenuCommand.List>
+        </MenuCommand.Content>
+      </MenuCommand.Menu>
+      <MenuCommand.Menu>
+        <MenuCommand.Trigger>
+          <Button variant="secondary" className="h-10 gap-2">
+            {formatPreferences.hoursFormatDisplay || 'Unknown Format'}
+            <MenuCommand.Arrow />
+          </Button>
+        </MenuCommand.Trigger>
+
+        <MenuCommand.Content sameWidth>
+          <MenuCommand.List>
+            {Object.values(sampleHoursFormats).map((hoursFormat) => {
+              return (
+                <MenuCommand.Item
+                  key={hoursFormat.value}
+                  value={hoursFormat.value}
+                  onSelect={(selectedHours) => {
+                    fetcher.submit(
+                      { preferredHours: selectedHours },
+                      { method: 'POST', action: getRoute('/ressources/user/language') },
+                    );
+                  }}
+                >
+                  {hoursFormat.displayName}
+                </MenuCommand.Item>
+              );
+            })}
+          </MenuCommand.List>
+        </MenuCommand.Content>
+      </MenuCommand.Menu>
+    </div>
   );
 }
diff --git a/packages/app-builder/src/services/i18n/i18n-config.ts b/packages/app-builder/src/services/i18n/i18n-config.ts
@@ -39,3 +39,21 @@ export function getDateFnsLocale(locale: string): Locale {
   const supportedLocale = supportedLngs.find((lng) => lang === lng) ?? fallbackLng;
   return dateFnsLocales[supportedLocale];
 }
+
+/** Dates and hours formats */
+export const dateFormatsLocales = {
+  en: 'en-GB',
+  fr: 'fr-FR',
+  ar: 'ar-SA',
+} satisfies Record<(typeof supportedLngs)[number], string>;
+
+export const sampleDateFormats = {
+  'dd/MM/yyyy': { value: 'dd/MM/yyyy', displayName: 'European (DD/MM/YYYY)' },
+  'MM/dd/yyyy': { value: 'MM/dd/yyyy', displayName: 'US (MM/DD/YYYY)' },
+  'yyyy-MM-dd': { value: 'yyyy-MM-dd', displayName: 'ISO (YYYY-MM-DD)' },
+} as const;
+
+export const sampleHoursFormats = {
+  'HH:mm': { value: 'HH:mm', displayName: '24 hours' },
+  'hh:mm': { value: 'hh:mm', displayName: '12 hours' },
+} as const;
diff --git a/packages/app-builder/src/services/i18n/i18next.server.ts b/packages/app-builder/src/services/i18n/i18next.server.ts
@@ -1,4 +1,4 @@
-import { type LngStorageRepository } from '@app-builder/repositories/SessionStorageRepositories/LngStorageRepository';
+import { type UserPreferencesStorageRepository } from '@app-builder/repositories/SessionStorageRepositories/LngStorageRepository';
 import { type EntryContext } from '@remix-run/node';
 import { createInstance, type FlatNamespace, type InitOptions } from 'i18next';
 import { initReactI18next } from 'react-i18next';
@@ -7,12 +7,14 @@ import { RemixI18Next } from 'remix-i18next/server';
 import { i18nConfig } from './i18n-config';
 import { resources } from './resources/resources.server';
 
-export function makeI18nextServerService({ lngStorage }: LngStorageRepository) {
+export function makeI18nextServerService({
+  userPreferencesStorage,
+}: UserPreferencesStorageRepository) {
   const remixI18next = new RemixI18Next({
     detection: {
       supportedLanguages: i18nConfig.supportedLngs,
       fallbackLanguage: i18nConfig.fallbackLng,
-      sessionStorage: lngStorage,
+      sessionStorage: userPreferencesStorage,
     },
     // This is the configuration for i18next used
     // when translating messages server-side only
@@ -43,12 +45,45 @@ export function makeI18nextServerService({ lngStorage }: LngStorageRepository) {
   }
 
   async function setLanguage(request: Request, language: string) {
-    const session = await lngStorage.getSession(request.headers.get('cookie'));
+    const session = await userPreferencesStorage.getSession(request.headers.get('cookie'));
     session.set('lng', language);
-    const cookie = await lngStorage.commitSession(session);
+    const cookie = await userPreferencesStorage.commitSession(session);
     return { cookie };
   }
 
+  async function setDateFormat(request: Request, dateFormat: string) {
+    const session = await userPreferencesStorage.getSession(request.headers.get('cookie'));
+    session.set('dateFormat', dateFormat);
+    const cookie = await userPreferencesStorage.commitSession(session);
+    return { cookie };
+  }
+
+  async function setHoursFormat(request: Request, hoursFormat: string) {
+    const session = await userPreferencesStorage.getSession(request.headers.get('cookie'));
+    session.set('hoursFormat', hoursFormat);
+    const cookie = await userPreferencesStorage.commitSession(session);
+    return { cookie };
+  }
+
+  async function getDateFormat(request: Request): Promise<string | undefined> {
+    const session = await userPreferencesStorage.getSession(request.headers.get('cookie'));
+    return session.get('dateFormat');
+  }
+
+  async function getHoursFormat(request: Request): Promise<string | undefined> {
+    const session = await userPreferencesStorage.getSession(request.headers.get('cookie'));
+    return session.get('hoursFormat');
+  }
+
+  async function getUserPreferences(request: Request) {
+    const session = await userPreferencesStorage.getSession(request.headers.get('cookie'));
+    return {
+      language: await remixI18next.getLocale(request),
+      dateFormat: session.get('dateFormat'),
+      hoursFormat: session.get('hoursFormat'),
+    };
+  }
+
   return {
     getLocale: (request: Request) => remixI18next.getLocale(request),
     getFixedT: <N extends FlatNamespace | readonly [FlatNamespace, ...FlatNamespace[]]>(
@@ -58,6 +93,11 @@ export function makeI18nextServerService({ lngStorage }: LngStorageRepository) {
     ) => remixI18next.getFixedT(request, namespaces, options),
     getI18nextServerInstance,
     setLanguage,
+    setDateFormat,
+    setHoursFormat,
+    getDateFormat,
+    getHoursFormat,
+    getUserPreferences,
   };
 }
 
diff --git a/packages/app-builder/src/utils/format.ts b/packages/app-builder/src/utils/format.ts
diff --git a/packages/app-builder/src/utils/hooks/index.ts b/packages/app-builder/src/utils/hooks/index.ts
diff --git a/packages/app-builder/src/utils/hooks/use-format-preferences.ts b/packages/app-builder/src/utils/hooks/use-format-preferences.ts
