Create Climate Setting Schedule - Timezone Picker (#468)

Co-authored-by: Seam Bot <[email protected]>

Author: Andrewjeska

Diff for: src/lib/ui/ClimateSettingForm/ClimateSettingScheduleForm.tsx

@@ -3,8 +3,10 @@ import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import type { ClimateSetting } from 'seamapi'
 
+import { getBrowserTimezone } 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'
 
 export interface ClimateSettingScheduleFormSubmitData {
   name: string
@@ -22,6 +24,14 @@ export interface ClimateSettingScheduleFormProps {
   onSubmit: (data: ClimateSettingScheduleFormSubmitData) => void
 }
 
+export interface ClimateSettingScheduleFormFields {
+  name: string
+  deviceId: string
+  startDate: string
+  endDate: string
+  timezone: string
+}
+
 export function ClimateSettingScheduleForm({
   className,
   ...props
@@ -38,9 +48,18 @@ export function ClimateSettingScheduleForm({
 function Content({
   onBack,
 }: Omit<ClimateSettingScheduleFormProps, 'className'>): JSX.Element {
-  const { control, watch } = useForm()
+  const { control, watch } = useForm({
+    defaultValues: {
+      deviceId: '',
+      name: '',
+      startDate: '',
+      endDate: '',
+      timezone: getBrowserTimezone(),
+    },
+  })
 
-  const deviceId = watch('deviceId', null)
+  const deviceId = watch('deviceId')
+  const timezone = watch('timezone')
 
   const [page, setPage] = useState<
     | 'device_select'
@@ -76,6 +95,21 @@ function Content({
         onNext={() => {
           setPage('climate_setting')
         }}
+        onChangeTimezone={() => {
+          setPage('timezone_select')
+        }}
+        timezone={timezone}
+      />
+    )
+  }
+
+  if (page === 'timezone_select') {
+    return (
+      <ClimateSettingScheduleFormTimezonePicker
+        control={control}
+        onClose={() => {
+          setPage('name_and_schedule')
+        }}
       />
     )
   }

Diff for: src/lib/ui/ClimateSettingForm/ClimateSettingScheduleFormDeviceSelect.tsx

@@ -1,11 +1,12 @@
-import { type Control, Controller, type FieldValues } from 'react-hook-form'
+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 { ThermostatSelect } from 'lib/ui/thermostat/ThermostatSelect.js'
 
 interface ClimateSettingScheduleFormDeviceSelectProps {
   title: string
-  control: Control<FieldValues>
+  control: Control<ClimateSettingScheduleFormFields>
   onSelect: () => void
   onBack: (() => void) | undefined
 }

Diff for: src/lib/ui/ClimateSettingForm/ClimateSettingScheduleFormNameAndSchedule.tsx

@@ -1,7 +1,10 @@
-import { type Control, Controller, type FieldValues } from 'react-hook-form'
+import { type Control, Controller } from 'react-hook-form'
 
+import { getTimezoneLabel } 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'
+import type { ClimateSettingScheduleFormFields } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleForm.js'
 import { DateTimePicker } from 'lib/ui/DateTimePicker/DateTimePicker.js'
 import { FormField } from 'lib/ui/FormField.js'
 import { InputLabel } from 'lib/ui/InputLabel.js'
@@ -10,20 +13,24 @@ import { TextField } from 'lib/ui/TextField/TextField.js'
 
 interface ClimateSettingScheduleFormNameAndScheduleProps {
   title: string
-  control: Control<FieldValues>
+  control: Control<ClimateSettingScheduleFormFields>
   deviceId: string
+  timezone: string
   onBack: () => void
   onCancel: (() => void) | undefined
   onNext: () => void
+  onChangeTimezone: () => void
 }
 
 export function ClimateSettingScheduleFormNameAndSchedule({
   title,
+  control,
   deviceId,
+  timezone,
   onBack,
   onCancel,
   onNext,
-  control,
+  onChangeTimezone,
 }: ClimateSettingScheduleFormNameAndScheduleProps): JSX.Element {
   const { device } = useDevice({
     device_id: deviceId,
@@ -58,8 +65,16 @@ export function ClimateSettingScheduleFormNameAndSchedule({
                 }}
               />
             </FormField>
+
             <FormField>
               <InputLabel>{t.startTimeLabel}</InputLabel>
+              <div className='seam-timezone'>
+                <span className='seam-label'>{t.selectedTimezoneLabel}</span>
+                <span className='seam-selected' onClick={onChangeTimezone}>
+                  {getTimezoneLabel(timezone)}
+                  <ChevronRightIcon />
+                </span>
+              </div>
               <Controller
                 name='startDate'
                 control={control}
@@ -101,4 +116,5 @@ const t = {
   cancel: 'Cancel',
   save: 'Save',
   next: 'Next',
+  selectedTimezoneLabel: 'All times in',
 }

Diff for: src/lib/ui/ClimateSettingForm/ClimateSettingScheduleFormTimezonePicker.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react'
+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'
+
+interface ClimateSettingScheduleFormTimezonePickerProps {
+  control: Control<ClimateSettingScheduleFormFields>
+  onClose: () => void
+}
+
+export function ClimateSettingScheduleFormTimezonePicker({
+  control,
+  onClose,
+}: ClimateSettingScheduleFormTimezonePickerProps): JSX.Element {
+  const [title, setTitle] = useState(t.titleAuto)
+
+  return (
+    <>
+      <ContentHeader title={title} onBack={onClose} />
+      <div className='seam-main'>
+        <Controller
+          name='timezone'
+          control={control}
+          render={({ field }) => (
+            <TimezonePicker
+              {...field}
+              onManualTimezoneSelected={(manualTimezoneSelected) => {
+                setTitle(manualTimezoneSelected ? t.titleManual : t.titleAuto)
+              }}
+            />
+          )}
+        />
+      </div>
+    </>
+  )
+}
+
+const t = {
+  titleAuto: 'Time Zone (automatic)',
+  titleManual: 'Time Zone (manual)',
+}

Diff for: src/styles/_climate-setting-schedule-form.scss

@@ -3,6 +3,7 @@
 @mixin all {
   .seam-climate-setting-schedule-form {
     @include main;
+    @include name-and-schedule;
   }
 }
 
@@ -21,3 +22,36 @@
     }
   }
 }
+
+@mixin name-and-schedule {
+  .seam-climate-setting-schedule-form-name-and-schedule {
+    .seam-timezone {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      margin-top: -6px;
+      margin-bottom: 4px;
+
+      .seam-label {
+        color: colors.$text-gray-2;
+        margin-right: 4px;
+      }
+
+      .seam-selected {
+        color: colors.$primary;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+
+        svg {
+          scale: 0.6667;
+          transform: translate(-6px, 2px);
+
+          * {
+            fill: colors.$primary;
+          }
+        }
+      }
+    }
+  }
+}