bug(datepicker): fix subscription date default timezone

getlago · Jun 19, 2023 · 801499c · 801499c
1 parent 7b05264
commit 801499c
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 9 deletions.
diff --git a/src/components/customers/subscriptions/AddSubscriptionDrawer.tsx b/src/components/customers/subscriptions/AddSubscriptionDrawer.tsx
@@ -148,11 +148,13 @@ export const AddSubscriptionDrawer = forwardRef<
     if (formikProps.values.subscriptionAt) {
       if (!!customerTimezone) {
         const date = DateTime.fromISO(formikProps.values.subscriptionAt)
-          .setZone(GMT)
+          .setZone(customerTimezoneConfig.name)
           .toFormat('LLL. dd, yyyy')
-        const time = DateTime.fromISO(formikProps.values.subscriptionAt)
+        const time = `${DateTime.fromISO(formikProps.values.subscriptionAt)
+          .setZone(customerTimezoneConfig.name)
+          .toFormat('T')} ${DateTime.fromISO(formikProps.values.subscriptionAt)
           .setZone(customerTimezoneConfig.name)
-          .toFormat('t')
+          .toFormat('a')}`
         const offset = TimeZonesConfig[customerTimezone].offset
 
         if (customerTimezoneConfig?.offsetInMinute < 0) {
@@ -162,11 +164,13 @@ export const AddSubscriptionDrawer = forwardRef<
         }
       } else if (!!organizationTimezone) {
         const date = DateTime.fromISO(formikProps.values.subscriptionAt)
-          .setZone(GMT)
+          .setZone(orgaTimezoneConfig.name)
           .toFormat('LLL. dd, yyyy')
-        const time = DateTime.fromISO(formikProps.values.subscriptionAt)
+        const time = `${DateTime.fromISO(formikProps.values.subscriptionAt)
+          .setZone(orgaTimezoneConfig.name)
+          .toFormat('T')} ${DateTime.fromISO(formikProps.values.subscriptionAt)
           .setZone(orgaTimezoneConfig.name)
-          .toFormat('t')
+          .toFormat('a')}`
         const offset = TimeZonesConfig[organizationTimezone].offset
 
         if (orgaTimezoneConfig.offsetInMinute < 0) {
@@ -181,7 +185,6 @@ export const AddSubscriptionDrawer = forwardRef<
   }, [
     organizationTimezone,
     customerTimezone,
-    GMT,
     customerTimezoneConfig,
     formikProps.values.subscriptionAt,
     orgaTimezoneConfig,
@@ -291,11 +294,13 @@ export const AddSubscriptionDrawer = forwardRef<
                         <DatePickerField
                           name="subscriptionAt"
                           label={translate('text_648b1828ead1c3004b930334')}
+                          defaultZone={getTimezoneConfig(TimezoneEnum.TzUtc).name}
                           formikProps={formikProps}
                         />
                         <TimePickerField
                           name="subscriptionAt"
                           label={translate('text_648b1837da6496008dfe4b3c')}
+                          defaultZone={getTimezoneConfig(TimezoneEnum.TzUtc).name}
                           formikProps={formikProps}
                         />
                       </InlineFields>

diff --git a/src/components/form/DatePicker/DatePicker.tsx b/src/components/form/DatePicker/DatePicker.tsx
@@ -3,7 +3,7 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
 import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon'
 import { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker'
 import { PopperProps as MuiPopperProps } from '@mui/material'
-import { DateTime } from 'luxon'
+import { DateTime, Settings } from 'luxon'
 import styled from 'styled-components'
 import _omit from 'lodash/omit'
 
@@ -25,6 +25,7 @@ export interface DatePickerProps
   placeholder?: string
   error?: string
   helperText?: string
+  defaultZone?: string // Overrides the default timezone of the date picker
   disableFuture?: boolean
   disablePast?: boolean
   placement?: MuiPopperProps['placement']
@@ -40,6 +41,7 @@ export const DatePicker = ({
   className,
   value,
   error,
+  defaultZone,
   disableFuture,
   disablePast,
   placeholder,
@@ -60,6 +62,15 @@ export const DatePicker = ({
   const isInvalid = !!localDate && !localDate.isValid
   const { translate } = useInternationalization()
 
+  useEffect(() => {
+    if (defaultZone) Settings.defaultZone = defaultZone
+
+    return () => {
+      if (defaultZone) Settings.defaultZone = defaultZone
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   useEffect(() => {
     setLocalDate(!!value ? (typeof value === 'string' ? DateTime.fromISO(value) : value) : null)
   }, [value])

diff --git a/src/components/form/TimePicker/TimePicker.tsx b/src/components/form/TimePicker/TimePicker.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
 import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon'
-import { DateTime } from 'luxon'
+import { DateTime, Settings } from 'luxon'
 import _omit from 'lodash/omit'
 import { TimePicker as MuiTimePicker } from '@mui/x-date-pickers/TimePicker'
 
@@ -21,6 +21,7 @@ export interface TimePickerProps
   placeholder?: string
   error?: string
   helperText?: string
+  defaultZone?: string // Overrides the default timezone of the date picker
   onError?: (err: keyof typeof TIME_PICKER_ERROR_ENUM | undefined) => void
   onChange: (value?: string | null) => void
 }
@@ -29,6 +30,7 @@ export const TimePicker = ({
   className,
   value,
   error,
+  defaultZone,
   placeholder,
   disabled,
   onError,
@@ -45,6 +47,15 @@ export const TimePicker = ({
   )
   const isInvalid = !!localTime && !localTime.isValid
 
+  useEffect(() => {
+    if (defaultZone) Settings.defaultZone = defaultZone
+
+    return () => {
+      if (defaultZone) Settings.defaultZone = defaultZone
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   useEffect(() => {
     setLocalTime(!!value ? (typeof value === 'string' ? DateTime.fromISO(value) : value) : null)
   }, [value])