@seamapi/react 1.61.0 → 1.61.2

package/src/lib/ui/AccessCodeForm/AccessCodeForm.tsx

@@ -1,20 +1,16 @@
 import classNames from 'classnames'
+import { DateTime } from 'luxon'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { type AccessCode, type CommonDevice, isLockDevice } from 'seamapi'
 
-import {
-  get24HoursLater,
-  getBrowserTimezone,
-  getNow,
-  getTimezoneFromIsoDate,
-} from 'lib/dates.js'
+import { getSystemTimeZone } from 'lib/dates.js'
 import type { UseAccessCodeData } from 'lib/seam/access-codes/use-access-code.js'
 import { useGenerateAccessCodeCode } from 'lib/seam/access-codes/use-generate-access-code-code.js'
 import type { UseDeviceData } from 'lib/seam/devices/use-device.js'
 import { AccessCodeFormDatePicker } from 'lib/ui/AccessCodeForm/AccessCodeFormDatePicker.js'
 import { AccessCodeFormTimes } from 'lib/ui/AccessCodeForm/AccessCodeFormTimes.js'
-import { AccessCodeFormTimezonePicker } from 'lib/ui/AccessCodeForm/AccessCodeFormTimezonePicker.js'
+import { AccessCodeFormTimeZonePicker } from 'lib/ui/AccessCodeForm/AccessCodeFormTimeZonePicker.js'
 import { Button } from 'lib/ui/Button.js'
 import { FormField } from 'lib/ui/FormField.js'
 import { InputLabel } from 'lib/ui/InputLabel.js'
@@ -30,7 +26,7 @@ export interface AccessCodeFormSubmitData {
   device: NonNullable<UseDeviceData>
   startDate: string
   endDate: string
-  timezone: string
+  timeZone: string
 }
 
 export interface ResponseErrors {
@@ -71,14 +67,13 @@ function Content({
     accessCode?.type ?? 'ongoing'
   )
   const [datePickerVisible, setDatePickerVisible] = useState(false)
-  const [timezone, setTimezone] = useState<string>(
-    getAccessCodeTimezone(accessCode) ?? getBrowserTimezone()
-  )
-  const [startDate, setStartDate] = useState<string>(
-    getAccessCodeDate('starts_at', accessCode) ?? getNow()
+  const [timeZone, setTimeZone] = useState<string>(getSystemTimeZone())
+
+  const [startDate, setStartDate] = useState<DateTime>(
+    getAccessCodeDate('starts_at', accessCode) ?? getNow(timeZone)
   )
-  const [endDate, setEndDate] = useState<string>(
-    getAccessCodeDate('ends_at', accessCode) ?? get24HoursLater()
+  const [endDate, setEndDate] = useState<DateTime>(
+    getAccessCodeDate('ends_at', accessCode) ?? getOneDayFromNow(timeZone)
   )
 
   const save = (data: { name: string; code: string }): void => {
@@ -86,14 +81,24 @@ function Content({
       return
     }
 
+    const start = startDate.toISO()
+    if (start == null) {
+      throw new Error(`Invalid start date: ${startDate.invalidReason}`)
+    }
+
+    const end = endDate.toISO()
+    if (end == null) {
+      throw new Error(`Invalid end date: ${endDate.invalidReason}`)
+    }
+
     onSubmit({
       name: data.name,
       code: data.code,
       type,
       device,
-      startDate,
-      endDate,
-      timezone,
+      startDate: start,
+      endDate: end,
+      timeZone,
     })
   }
 
@@ -108,19 +113,23 @@ function Content({
       code: accessCode?.code ?? '',
     },
   })
-  const [timezonePickerVisible, toggleTimezonePicker] = useToggle()
+  const [timeZonePickerVisible, toggleTimeZonePicker] = useToggle()
 
   const { isLoading: isGeneratingCode, mutate: generateCode } =
     useGenerateAccessCodeCode()
 
   const submit = (): void => {}
 
-  if (timezonePickerVisible) {
+  if (timeZonePickerVisible) {
     return (
-      <AccessCodeFormTimezonePicker
-        value={timezone}
-        onChange={setTimezone}
-        onClose={toggleTimezonePicker}
+      <AccessCodeFormTimeZonePicker
+        value={timeZone}
+        onChange={(timeZone: string) => {
+          setTimeZone(timeZone)
+          setStartDate(startDate.setZone(timeZone))
+          setEndDate(endDate.setZone(timeZone))
+        }}
+        onClose={toggleTimeZonePicker}
       />
     )
   }
@@ -132,8 +141,8 @@ function Content({
         setStartDate={setStartDate}
         endDate={endDate}
         setEndDate={setEndDate}
-        timezone={timezone}
-        onChangeTimezone={toggleTimezonePicker}
+        timeZone={timeZone}
+        onChangeTimeZone={toggleTimeZonePicker}
         onBack={() => {
           setDatePickerVisible(false)
         }}
@@ -158,24 +167,6 @@ function Content({
     )
   }
 
-  const validateCodeLength = (value: string): boolean | string => {
-    if (!isLockDevice(device)) {
-      return true
-    }
-
-    if (device.properties.supported_code_lengths == null) {
-      return true
-    }
-
-    if (device.properties.supported_code_lengths.includes(value.length)) {
-      return true
-    }
-
-    return t.codeLengthError(
-      device.properties.supported_code_lengths.join(', ')
-    )
-  }
-
   const hasCodeError = errors.code != null || responseErrors?.code != null
 
   const codeLengthRequirement = getCodeLengthRequirement(device)
@@ -226,7 +217,8 @@ function Content({
               inputProps={{
                 ...register('code', {
                   required: t.codeRequiredError,
-                  validate: validateCodeLength,
+                  validate: (value: string) =>
+                    validateCodeLength(device, value),
                 }),
               }}
             />
@@ -306,28 +298,26 @@ function Content({
   )
 }
 
-function getAccessCodeTimezone(
-  accessCode?: NonNullable<UseAccessCodeData>
-): undefined | string {
-  if (accessCode == null) {
-    return undefined
+const validateCodeLength = (
+  device: CommonDevice,
+  value: string
+): boolean | string => {
+  if (!isLockDevice(device)) {
+    return true
   }
 
-  if (accessCode.type === 'ongoing') {
-    return undefined
+  if (device.properties.supported_code_lengths == null) {
+    return true
   }
 
-  const date = accessCode.starts_at
-
-  const timezone = getTimezoneFromIsoDate(date)
-  if (timezone == null) {
-    return undefined
+  if (device.properties.supported_code_lengths.includes(value.length)) {
+    return true
   }
 
-  return timezone
+  return t.codeLengthError(device.properties.supported_code_lengths.join(', '))
 }
 
-function getCodeLengthRequirement(device: CommonDevice): string | null {
+const getCodeLengthRequirement = (device: CommonDevice): string | null => {
   if (!isLockDevice(device)) {
     return null
   }
@@ -354,25 +344,29 @@ const sequentialNumbers = Array.from({ length: 100 }, (_, index) => index).join(
   ''
 )
 
-function isSequential(numbers: string): boolean {
-  return sequentialNumbers.includes(numbers)
-}
+const isSequential = (numbers: string): boolean =>
+  sequentialNumbers.includes(numbers)
 
-function getAccessCodeDate(
+const getAccessCodeDate = (
   date: 'starts_at' | 'ends_at',
   accessCode?: NonNullable<UseAccessCodeData>
-): string | undefined {
+): DateTime | null => {
   if (accessCode == null) {
-    return undefined
+    return null
   }
 
   if (accessCode.type !== 'time_bound') {
-    return undefined
+    return null
   }
 
-  return accessCode[date]
+  return DateTime.fromISO(accessCode[date])
 }
 
+const getNow = (timeZone: string): DateTime => DateTime.now().setZone(timeZone)
+
+const getOneDayFromNow = (timeZone: string): DateTime =>
+  DateTime.now().setZone(timeZone).plus({ days: 1 })
+
 const t = {
   addNewAccessCode: 'Add new access code',
   editAccessCode: 'Edit access code',

package/src/lib/ui/AccessCodeForm/AccessCodeFormDatePicker.tsx

@@ -1,4 +1,10 @@
-import { getTimezoneLabel } from 'lib/dates.js'
+import type { DateTime } from 'luxon'
+
+import {
+  formatTimeZone,
+  parseDateTimePickerValue,
+  serializeDateTimePickerValue,
+} from 'lib/dates.js'
 import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
 import { DateTimePicker } from 'lib/ui/DateTimePicker/DateTimePicker.js'
 import { FormField } from 'lib/ui/FormField.js'
@@ -6,48 +12,52 @@ import { InputLabel } from 'lib/ui/InputLabel.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 
 interface AccessCodeFormDatePickerProps {
-  startDate: string
-  setStartDate: (date: string) => void
-  endDate: string
-  setEndDate: (date: string) => void
-  timezone: string
-  onChangeTimezone: () => void
+  startDate: DateTime
+  setStartDate: (dateTime: DateTime) => void
+  endDate: DateTime
+  setEndDate: (dateTime: DateTime) => void
+  timeZone: string
+  onChangeTimeZone: () => void
   onBack: (() => void) | undefined
 }
 
 export function AccessCodeFormDatePicker({
-  timezone,
+  timeZone,
   onBack,
   startDate,
   setStartDate,
   endDate,
   setEndDate,
-  onChangeTimezone,
+  onChangeTimeZone,
 }: AccessCodeFormDatePickerProps): JSX.Element {
   return (
     <div className='seam-schedule-picker'>
       <ContentHeader title={t.timingTitle} onBack={onBack} />
       <div className='seam-content'>
-        <div className='seam-timezone'>
-          <span className='seam-label'>{t.selectedTimezoneLabel}</span>
-          <span className='seam-selected' onClick={onChangeTimezone}>
-            {getTimezoneLabel(timezone)}
+        <div className='seam-time-zone'>
+          <span className='seam-label'>{t.selectedTimeZoneLabel}</span>
+          <span className='seam-selected' onClick={onChangeTimeZone}>
+            {formatTimeZone(timeZone)}
             <ChevronRightIcon />
           </span>
         </div>
         <FormField>
           <InputLabel>{t.startTimeLabel}</InputLabel>
           <DateTimePicker
-            value={startDate ?? ''}
-            onChange={setStartDate}
+            value={serializeDateTimePickerValue(startDate, timeZone) ?? ''}
+            onChange={(value: string) => {
+              setStartDate(parseDateTimePickerValue(value, timeZone))
+            }}
             size='large'
           />
         </FormField>
         <FormField>
           <InputLabel>{t.endTimeLabel}</InputLabel>
           <DateTimePicker
-            value={endDate ?? ''}
-            onChange={setEndDate}
+            value={serializeDateTimePickerValue(endDate, timeZone) ?? ''}
+            onChange={(value: string) => {
+              setEndDate(parseDateTimePickerValue(value, timeZone))
+            }}
             size='large'
           />
         </FormField>
@@ -58,7 +68,7 @@ export function AccessCodeFormDatePicker({
 
 const t = {
   timingTitle: 'Timing',
-  selectedTimezoneLabel: 'All times in',
+  selectedTimeZoneLabel: 'All times in',
   startTimeLabel: 'Start',
   endTimeLabel: 'End',
 }

package/src/lib/ui/AccessCodeForm/{AccessCodeFormTimezonePicker.tsx → AccessCodeFormTimeZonePicker.tsx}

@@ -1,30 +1,30 @@
 import { useState } from 'react'
 
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
-import { TimezonePicker } from 'lib/ui/TimezonePicker/TimezonePicker.js'
+import { TimeZonePicker } from 'lib/ui/TimeZonePicker/TimeZonePicker.js'
 
-interface AccessCodeFormTimezonePickerProps {
+interface AccessCodeFormTimeZonePickerProps {
   value: string
-  onChange: (timezone: string) => void
+  onChange: (timeZone: string) => void
   onClose: () => void
 }
 
-export function AccessCodeFormTimezonePicker({
+export function AccessCodeFormTimeZonePicker({
   onChange,
   value,
   onClose,
-}: AccessCodeFormTimezonePickerProps): JSX.Element {
+}: AccessCodeFormTimeZonePickerProps): JSX.Element {
   const [title, setTitle] = useState(t.titleAuto)
 
   return (
-    <div className='seam-access-code-timezone-picker'>
+    <div className='seam-access-code-time-zone-picker'>
       <ContentHeader title={title} onBack={onClose} />
       <div className='seam-content'>
-        <TimezonePicker
+        <TimeZonePicker
           value={value}
           onChange={onChange}
-          onManualTimezoneSelected={(manualTimezoneSelected) => {
-            setTitle(manualTimezoneSelected ? t.titleManual : t.titleAuto)
+          onManualTimeZoneSelected={(manualTimeZoneSelected) => {
+            setTitle(manualTimeZoneSelected ? t.titleManual : t.titleAuto)
           }}
         />
       </div>
@@ -36,5 +36,5 @@ const t = {
   titleAuto: 'Time Zone (automatic)',
   titleManual: 'Time Zone (manual)',
   utc: 'UTC',
-  setTimezoneManuallyLabel: 'Use local time zone',
+  setTimeZoneManuallyLabel: 'Use local time zone',
 }

package/src/lib/ui/AccessCodeForm/AccessCodeFormTimes.tsx

@@ -1,10 +1,11 @@
-import { formatDateTimeReadable } from 'lib/dates.js'
+import { DateTime } from 'luxon'
+
 import { EditIcon } from 'lib/icons/Edit.js'
 import { IconButton } from 'lib/ui/IconButton.js'
 
 interface AccessCodeFormTimesProps {
-  startDate: string
-  endDate: string
+  startDate: DateTime
+  endDate: DateTime
   onEdit: () => void
 }
 
@@ -17,9 +18,9 @@ export function AccessCodeFormTimes({
     <div className='seam-selected-times'>
       <div>
         <span className='seam-label'>{t.startTimeLabel}</span>
-        <span className='seam-time'>{formatDateTimeReadable(startDate)}</span>
+        <span className='seam-time'>{formatDateTime(startDate)}</span>
         <span className='seam-label'>{t.endTimeLabel}</span>
-        <span className='seam-time'>{formatDateTimeReadable(endDate)}</span>
+        <span className='seam-time'>{formatDateTime(endDate)}</span>
       </div>
       <IconButton onClick={onEdit} className='seam-show-date-picker-btn'>
         <EditIcon />
@@ -28,6 +29,9 @@ export function AccessCodeFormTimes({
   )
 }
 
+const formatDateTime = (dateTime: DateTime): string =>
+  dateTime.toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)
+
 const t = {
   startTimeLabel: 'Start',
   endTimeLabel: 'End',

package/src/lib/ui/ClimateSettingForm/ClimateSettingScheduleForm.tsx

@@ -3,17 +3,17 @@ import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import type { ClimateSetting } from 'seamapi'
 
-import { getBrowserTimezone } from 'lib/dates.js'
+import { getSystemTimeZone } from 'lib/dates.js'
 import { ClimateSettingScheduleFormDeviceSelect } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleFormDeviceSelect.js'
 import { ClimateSettingScheduleFormNameAndSchedule } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleFormNameAndSchedule.js'
-import { ClimateSettingScheduleFormTimezonePicker } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleFormTimezonePicker.js'
+import { ClimateSettingScheduleFormTimeZonePicker } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleFormTimeZonePicker.js'
 
 export interface ClimateSettingScheduleFormSubmitData {
   name: string
   deviceId: string
   startDate: string
   endDate: string
-  timezone: string
+  timeZone: string
   climateSetting: ClimateSetting
 }
 
@@ -29,7 +29,7 @@ export interface ClimateSettingScheduleFormFields {
   deviceId: string
   startDate: string
   endDate: string
-  timezone: string
+  timeZone: string
 }
 
 export function ClimateSettingScheduleForm({
@@ -54,18 +54,18 @@ function Content({
       name: '',
       startDate: '',
       endDate: '',
-      timezone: getBrowserTimezone(),
+      timeZone: getSystemTimeZone(),
     },
   })
 
   const deviceId = watch('deviceId')
-  const timezone = watch('timezone')
+  const timeZone = watch('timeZone')
 
   const [page, setPage] = useState<
     | 'device_select'
     | 'default_setting'
     | 'name_and_schedule'
-    | 'timezone_select'
+    | 'time_zone_select'
     | 'climate_setting'
   >('device_select')
 
@@ -95,17 +95,17 @@ function Content({
         onNext={() => {
           setPage('climate_setting')
         }}
-        onChangeTimezone={() => {
-          setPage('timezone_select')
+        onChangeTimeZone={() => {
+          setPage('time_zone_select')
         }}
-        timezone={timezone}
+        timeZone={timeZone}
       />
     )
   }
 
-  if (page === 'timezone_select') {
+  if (page === 'time_zone_select') {
     return (
-      <ClimateSettingScheduleFormTimezonePicker
+      <ClimateSettingScheduleFormTimeZonePicker
         control={control}
         onClose={() => {
           setPage('name_and_schedule')

package/src/lib/ui/ClimateSettingForm/ClimateSettingScheduleFormNameAndSchedule.tsx

@@ -1,6 +1,6 @@
 import { type Control, Controller } from 'react-hook-form'
 
-import { getTimezoneLabel } from 'lib/dates.js'
+import { formatTimeZone } from 'lib/dates.js'
 import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
 import { useDevice } from 'lib/seam/devices/use-device.js'
 import { Button } from 'lib/ui/Button.js'
@@ -15,22 +15,22 @@ interface ClimateSettingScheduleFormNameAndScheduleProps {
   title: string
   control: Control<ClimateSettingScheduleFormFields>
   deviceId: string
-  timezone: string
+  timeZone: string
   onBack: () => void
   onCancel: (() => void) | undefined
   onNext: () => void
-  onChangeTimezone: () => void
+  onChangeTimeZone: () => void
 }
 
 export function ClimateSettingScheduleFormNameAndSchedule({
   title,
   control,
   deviceId,
-  timezone,
+  timeZone,
   onBack,
   onCancel,
   onNext,
-  onChangeTimezone,
+  onChangeTimeZone,
 }: ClimateSettingScheduleFormNameAndScheduleProps): JSX.Element {
   const { device } = useDevice({
     device_id: deviceId,
@@ -68,10 +68,10 @@ export function ClimateSettingScheduleFormNameAndSchedule({
 
             <FormField>
               <InputLabel>{t.startTimeLabel}</InputLabel>
-              <div className='seam-timezone'>
-                <span className='seam-label'>{t.selectedTimezoneLabel}</span>
-                <span className='seam-selected' onClick={onChangeTimezone}>
-                  {getTimezoneLabel(timezone)}
+              <div className='seam-time-zone'>
+                <span className='seam-label'>{t.selectedTimeZoneLabel}</span>
+                <span className='seam-selected' onClick={onChangeTimeZone}>
+                  {formatTimeZone(timeZone)}
                   <ChevronRightIcon />
                 </span>
               </div>
@@ -116,5 +116,5 @@ const t = {
   cancel: 'Cancel',
   save: 'Save',
   next: 'Next',
-  selectedTimezoneLabel: 'All times in',
+  selectedTimeZoneLabel: 'All times in',
 }

package/src/lib/ui/ClimateSettingForm/{ClimateSettingScheduleFormTimezonePicker.tsx → ClimateSettingScheduleFormTimeZonePicker.tsx}

@@ -3,17 +3,17 @@ import { type Control, Controller } from 'react-hook-form'
 
 import type { ClimateSettingScheduleFormFields } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleForm.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
-import { TimezonePicker } from 'lib/ui/TimezonePicker/TimezonePicker.js'
+import { TimeZonePicker } from 'lib/ui/TimeZonePicker/TimeZonePicker.js'
 
-interface ClimateSettingScheduleFormTimezonePickerProps {
+interface ClimateSettingScheduleFormTimeZonePickerProps {
   control: Control<ClimateSettingScheduleFormFields>
   onClose: () => void
 }
 
-export function ClimateSettingScheduleFormTimezonePicker({
+export function ClimateSettingScheduleFormTimeZonePicker({
   control,
   onClose,
-}: ClimateSettingScheduleFormTimezonePickerProps): JSX.Element {
+}: ClimateSettingScheduleFormTimeZonePickerProps): JSX.Element {
   const [title, setTitle] = useState(t.titleAuto)
 
   return (
@@ -21,13 +21,13 @@ export function ClimateSettingScheduleFormTimezonePicker({
       <ContentHeader title={title} onBack={onClose} />
       <div className='seam-main'>
         <Controller
-          name='timezone'
+          name='timeZone'
           control={control}
           render={({ field }) => (
-            <TimezonePicker
+            <TimeZonePicker
               {...field}
-              onManualTimezoneSelected={(manualTimezoneSelected) => {
-                setTitle(manualTimezoneSelected ? t.titleManual : t.titleAuto)
+              onManualTimeZoneSelected={(manualTimeZoneSelected) => {
+                setTitle(manualTimeZoneSelected ? t.titleManual : t.titleAuto)
               }}
             />
           )}

package/src/lib/ui/LoadingToast/LoadingToast.tsx

@@ -21,26 +21,23 @@ export function LoadingToast({
   const [showToast, setShowToast] = useState(isLoading)
 
   useEffect(() => {
-    if (!isLoading) {
-      const hideTimeout = globalThis.setTimeout(() => {
-        setHidden(true)
-      }, 1000)
-
-      const removeTimeout = globalThis.setTimeout(() => {
-        setShowToast(false)
-      }, 1500)
-
-      return () => {
-        globalThis.clearTimeout(hideTimeout)
-        globalThis.clearTimeout(removeTimeout)
-      }
+    if (isLoading) {
+      setHidden(false)
+      setShowToast(true)
+      return () => {}
     }
 
-    setHidden(false)
-    setShowToast(true)
+    const hideTimeout = globalThis.setTimeout(() => {
+      setHidden(true)
+    }, 1000)
+
+    const removeTimeout = globalThis.setTimeout(() => {
+      setShowToast(false)
+    }, 1500)
 
     return () => {
-      // noop
+      globalThis.clearTimeout(hideTimeout)
+      globalThis.clearTimeout(removeTimeout)
     }
   }, [isLoading])