From 1549c4aac7c3450dd259d54c741f53ec04bc0d9a Mon Sep 17 00:00:00 2001
From: Alexandre Monjol <alexandre.monjol@gmail.com>
Date: Mon, 19 Jun 2023 10:51:05 +0200
Subject: [PATCH] bug(picker): Reset the zone to orga's one when overridden

---
 src/components/form/DatePicker/DatePicker.tsx | 14 ++++++++++++-
 src/components/form/TimePicker/TimePicker.tsx | 14 ++++++++++++-
 src/generated/graphql.tsx                     | 21 ++++++++++++++++++-
 src/hooks/useOrganizationInfos.ts             |  8 +++++++
 4 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/src/components/form/DatePicker/DatePicker.tsx b/src/components/form/DatePicker/DatePicker.tsx
index 4a6c33e9b..9bb8d5574 100644
--- a/src/components/form/DatePicker/DatePicker.tsx
+++ b/src/components/form/DatePicker/DatePicker.tsx
@@ -6,11 +6,21 @@ import { PopperProps as MuiPopperProps } from '@mui/material'
 import { DateTime, Settings } from 'luxon'
 import styled from 'styled-components'
 import _omit from 'lodash/omit'
+import { gql } from '@apollo/client'
 
 import { TextInput, TextInputProps } from '~/components/form'
 import { theme } from '~/styles'
 import { Button, Tooltip } from '~/components/designSystem'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
+import { useOrganizationInfos } from '~/hooks/useOrganizationInfos'
+import { getTimezoneConfig } from '~/core/timezone'
+
+gql`
+  fragment OrganizationForDatePicker on Organization {
+    id
+    timezone
+  }
+`
 
 export enum DATE_PICKER_ERROR_ENUM {
   invalid = 'invalid',
@@ -51,6 +61,7 @@ export const DatePicker = ({
   onChange,
   ...props
 }: DatePickerProps) => {
+  const { organization } = useOrganizationInfos()
   const [localDate, setLocalDate] = useState<DateTime | null>(
     /**
      * Date will be passed to the parent as ISO
@@ -66,7 +77,8 @@ export const DatePicker = ({
     if (defaultZone) Settings.defaultZone = defaultZone
 
     return () => {
-      if (defaultZone) Settings.defaultZone = defaultZone
+      // Reset timezone to default
+      if (defaultZone) Settings.defaultZone = getTimezoneConfig(organization?.timezone).name
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
diff --git a/src/components/form/TimePicker/TimePicker.tsx b/src/components/form/TimePicker/TimePicker.tsx
index a90b104b4..f8ef4ef3d 100644
--- a/src/components/form/TimePicker/TimePicker.tsx
+++ b/src/components/form/TimePicker/TimePicker.tsx
@@ -4,9 +4,19 @@ import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon'
 import { DateTime, Settings } from 'luxon'
 import _omit from 'lodash/omit'
 import { TimePicker as MuiTimePicker } from '@mui/x-date-pickers/TimePicker'
+import { gql } from '@apollo/client'
 
 import { TextInput, TextInputProps } from '~/components/form'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
+import { getTimezoneConfig } from '~/core/timezone'
+import { useOrganizationInfos } from '~/hooks/useOrganizationInfos'
+
+gql`
+  fragment OrganizationForTimePicker on Organization {
+    id
+    timezone
+  }
+`
 
 export enum TIME_PICKER_ERROR_ENUM {
   invalid = 'invalid',
@@ -37,6 +47,7 @@ export const TimePicker = ({
   onChange,
   ...props
 }: TimePickerProps) => {
+  const { organization } = useOrganizationInfos()
   const { translate } = useInternationalization()
   const [localTime, setLocalTime] = useState<DateTime | null>(
     /**
@@ -51,7 +62,8 @@ export const TimePicker = ({
     if (defaultZone) Settings.defaultZone = defaultZone
 
     return () => {
-      if (defaultZone) Settings.defaultZone = defaultZone
+      // Reset timezone to default
+      if (defaultZone) Settings.defaultZone = getTimezoneConfig(organization?.timezone).name
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
diff --git a/src/generated/graphql.tsx b/src/generated/graphql.tsx
index c1ace0229..c8f513ba4 100644
--- a/src/generated/graphql.tsx
+++ b/src/generated/graphql.tsx
@@ -3844,6 +3844,10 @@ export type RetryWebhookMutation = { __typename?: 'Mutation', retryWebhook?: { _
 
 export type WebhookLogItemFragment = { __typename?: 'Webhook', id: string, status: WebhookStatusEnum, updatedAt: any, webhookType: string };
 
+export type OrganizationForDatePickerFragment = { __typename?: 'Organization', id: string, timezone?: TimezoneEnum | null };
+
+export type OrganizationForTimePickerFragment = { __typename?: 'Organization', id: string, timezone?: TimezoneEnum | null };
+
 export type InvoiceMetadatasForMetadataDrawerFragment = { __typename?: 'Invoice', id: string, metadata?: Array<{ __typename?: 'InvoiceMetadata', id: string, key: string, value: string }> | null };
 
 export type UpdateInvoiceMetadataMutationVariables = Exact<{
@@ -5305,14 +5309,29 @@ export const CurrentUserInfosFragmentDoc = gql`
   }
 }
     `;
+export const OrganizationForDatePickerFragmentDoc = gql`
+    fragment OrganizationForDatePicker on Organization {
+  id
+  timezone
+}
+    `;
+export const OrganizationForTimePickerFragmentDoc = gql`
+    fragment OrganizationForTimePicker on Organization {
+  id
+  timezone
+}
+    `;
 export const MainOrganizationInfosFragmentDoc = gql`
     fragment MainOrganizationInfos on Organization {
   id
   name
   logoUrl
   timezone
+  ...OrganizationForDatePicker
+  ...OrganizationForTimePicker
 }
-    `;
+    ${OrganizationForDatePickerFragmentDoc}
+${OrganizationForTimePickerFragmentDoc}`;
 export const CustomerMetadatasForInvoiceOverviewFragmentDoc = gql`
     fragment CustomerMetadatasForInvoiceOverview on Customer {
   id
diff --git a/src/hooks/useOrganizationInfos.ts b/src/hooks/useOrganizationInfos.ts
index 8b783c35b..9527fa53f 100644
--- a/src/hooks/useOrganizationInfos.ts
+++ b/src/hooks/useOrganizationInfos.ts
@@ -4,6 +4,8 @@ import {
   TimezoneEnum,
   useGetOrganizationInfosQuery,
   MainOrganizationInfosFragment,
+  OrganizationForTimePickerFragmentDoc,
+  OrganizationForDatePickerFragmentDoc,
 } from '~/generated/graphql'
 import { TimeZonesConfig, TimezoneConfigObject } from '~/core/timezone'
 import { formatDateToTZ } from '~/core/timezone'
@@ -14,6 +16,9 @@ gql`
     name
     logoUrl
     timezone
+
+    ...OrganizationForDatePicker
+    ...OrganizationForTimePicker
   }
 
   query getOrganizationInfos {
@@ -21,6 +26,9 @@ gql`
       ...MainOrganizationInfos
     }
   }
+
+  ${OrganizationForDatePickerFragmentDoc}
+  ${OrganizationForTimePickerFragmentDoc}
 `
 
 type UseOrganizationInfos = () => {