feat(billing): refacto billing (#14243)

… prices for metered billing

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-front/src/modules/users/components/UserProvider.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { isCurrentUserLoadedState } from '@/auth/states/isCurrentUserLoadedState';
-import { dateTimeFormatState } from '@/localization/states/dateTimeFormatState';
+import { useDateTimeFormat } from '@/localization/hooks/useDateTimeFormat';
 import { UserContext } from '@/users/contexts/UserContext';
 import { useLocation } from 'react-router-dom';
 import { AppPath } from 'twenty-shared/types';
@@ -13,7 +13,7 @@ export const UserProvider = ({ children }: React.PropsWithChildren) => {
   const isCurrentUserLoaded = useRecoilValue(isCurrentUserLoadedState);
   const location = useLocation();
 
-  const dateTimeFormat = useRecoilValue(dateTimeFormatState);
+  const { dateFormat, timeFormat, timeZone } = useDateTimeFormat();
 
   return !isCurrentUserLoaded &&
     !isMatchingLocation(location, AppPath.Verify) &&
@@ -23,9 +23,9 @@ export const UserProvider = ({ children }: React.PropsWithChildren) => {
   ) : (
     <UserContext.Provider
       value={{
-        dateFormat: dateTimeFormat.dateFormat,
-        timeFormat: dateTimeFormat.timeFormat,
-        timeZone: dateTimeFormat.timeZone,
+        dateFormat,
+        timeFormat,
+        timeZone,
       }}
     >
       {children}

packages/twenty-front/src/modules/users/components/UserProviderEffect.tsx

@@ -9,14 +9,7 @@ import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMembe
 import { currentWorkspaceMembersState } from '@/auth/states/currentWorkspaceMembersState';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { isCurrentUserLoadedState } from '@/auth/states/isCurrentUserLoadedState';
-import { DateFormat } from '@/localization/constants/DateFormat';
-import { TimeFormat } from '@/localization/constants/TimeFormat';
-import { dateTimeFormatState } from '@/localization/states/dateTimeFormatState';
-import { detectDateFormat } from '@/localization/utils/detectDateFormat';
-import { detectTimeFormat } from '@/localization/utils/detectTimeFormat';
-import { detectTimeZone } from '@/localization/utils/detectTimeZone';
-import { getDateFormatFromWorkspaceDateFormat } from '@/localization/utils/getDateFormatFromWorkspaceDateFormat';
-import { getTimeFormatFromWorkspaceTimeFormat } from '@/localization/utils/getTimeFormatFromWorkspaceTimeFormat';
+import { useInitializeFormatPreferences } from '@/localization/hooks/useInitializeFormatPreferences';
 import { getDateFnsLocale } from '@/ui/field/display/utils/getDateFnsLocale.util';
 import { coreViewsState } from '@/views/states/coreViewState';
 import { type CoreViewWithRelations } from '@/views/types/CoreViewWithRelations';
@@ -46,7 +39,7 @@ export const UserProviderEffect = () => {
   const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
   const setCurrentUserWorkspace = useSetRecoilState(currentUserWorkspaceState);
   const setAvailableWorkspaces = useSetRecoilState(availableWorkspacesState);
-  const setDateTimeFormat = useSetRecoilState(dateTimeFormatState);
+  const { initializeFormatPreferences } = useInitializeFormatPreferences();
   const isLoggedIn = useIsLogged();
 
   const updateLocaleCatalog = useRecoilCallback(
@@ -155,19 +148,8 @@ export const UserProviderEffect = () => {
 
       updateLocaleCatalog(updatedWorkspaceMember.locale);
 
-      // TODO: factorize
-      setDateTimeFormat({
-        timeZone:
-          workspaceMember.timeZone && workspaceMember.timeZone !== 'system'
-            ? workspaceMember.timeZone
-            : detectTimeZone(),
-        dateFormat: isDefined(workspaceMember.dateFormat)
-          ? getDateFormatFromWorkspaceDateFormat(workspaceMember.dateFormat)
-          : DateFormat[detectDateFormat()],
-        timeFormat: isDefined(workspaceMember.timeFormat)
-          ? getTimeFormatFromWorkspaceTimeFormat(workspaceMember.timeFormat)
-          : TimeFormat[detectTimeFormat()],
-      });
+      // Initialize format preferences from workspace member
+      initializeFormatPreferences(updatedWorkspaceMember);
 
       dynamicActivate(
         (workspaceMember.locale as keyof typeof APP_LOCALES) ?? SOURCE_LOCALE,
@@ -195,7 +177,7 @@ export const UserProviderEffect = () => {
     setCurrentWorkspace,
     setCurrentWorkspaceMember,
     setIsCurrentUserLoaded,
-    setDateTimeFormat,
+    initializeFormatPreferences,
     setCurrentWorkspaceMembersWithDeleted,
     updateLocaleCatalog,
     setCoreViews,