bug(picker): Reset the zone to orga's one when overridden

getlago · Jun 19, 2023 · 1549c4a · 1549c4a
1 parent ea6285c
commit 1549c4a
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,13 +16,19 @@ gql`
     name
     logoUrl
     timezone
+
+    ...OrganizationForDatePicker
+    ...OrganizationForTimePicker
   }
 
   query getOrganizationInfos {
     organization {
       ...MainOrganizationInfos
     }
   }
+
+  ${OrganizationForDatePickerFragmentDoc}
+  ${OrganizationForTimePickerFragmentDoc}
 `
 
 type UseOrganizationInfos = () => {