@seamapi/react 2.1.0 → 2.1.1

package/src/lib/seam/thermostats/climate-setting-schedules/use-climate-setting-schedules.ts

@@ -33,7 +33,6 @@ export function useClimateSettingSchedules(
       return await client.thermostats.climateSettingSchedules.list(params)
     },
     onSuccess: (schedules) => {
-      // Prime cache for each schedule.
       for (const schedule of schedules) {
         queryClient.setQueryData(
           [

package/src/lib/seam/thermostats/use-update-fan-mode.ts

@@ -0,0 +1,81 @@
+import {
+  useMutation,
+  type UseMutationResult,
+  useQueryClient,
+} from '@tanstack/react-query'
+import type {
+  SeamError,
+  ThermostatDevice,
+  ThermostatSetFanModeRequest,
+  ThermostatsListResponse,
+} from 'seamapi'
+
+import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
+
+// UPSTREAM: Missing ThermostatSetFanModeResponse in seamapi.
+type UseUpdateFanModeData = Record<string, unknown>
+type UseUpdateFanModeMutationParams = ThermostatSetFanModeRequest
+
+export function useUpdateFanMode(): UseMutationResult<
+  UseUpdateFanModeData,
+  SeamError,
+  UseUpdateFanModeMutationParams
+> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  return useMutation<
+    UseUpdateFanModeData,
+    SeamError,
+    UseUpdateFanModeMutationParams
+  >({
+    mutationFn: async (mutationParams: UseUpdateFanModeMutationParams) => {
+      if (client === null) throw new NullSeamClientError()
+
+      return await client.thermostats.setFanMode(mutationParams)
+    },
+    onSuccess: (_data, variables) => {
+      queryClient.setQueryData<ThermostatDevice | null>(
+        ['thermostats', 'get', { device_id: variables.device_id }],
+        (thermostat) => {
+          if (thermostat == null) {
+            return
+          }
+
+          return getUpdatedThermostat(thermostat, variables)
+        }
+      )
+
+      queryClient.setQueryData<ThermostatsListResponse['thermostats']>(
+        ['thermostats', 'list', { device_id: variables.device_id }],
+        (thermostats): ThermostatDevice[] => {
+          if (thermostats == null) {
+            return []
+          }
+
+          return thermostats.map((thermostat) => {
+            if (thermostat.device_id === variables.device_id) {
+              return getUpdatedThermostat(thermostat, variables)
+            }
+
+            return thermostat
+          })
+        }
+      )
+    },
+  })
+}
+
+function getUpdatedThermostat(
+  thermostat: ThermostatDevice,
+  variables: UseUpdateFanModeMutationParams
+): ThermostatDevice {
+  return {
+    ...thermostat,
+    properties: {
+      ...thermostat.properties,
+      fan_mode_setting:
+        variables.fan_mode_setting ?? thermostat.properties.fan_mode_setting,
+    },
+  }
+}

package/src/lib/seam/thermostats/use-update-thermostat.ts

@@ -0,0 +1,92 @@
+import {
+  useMutation,
+  type UseMutationResult,
+  useQueryClient,
+} from '@tanstack/react-query'
+import type {
+  SeamError,
+  ThermostatDevice,
+  ThermostatsListResponse,
+  ThermostatUpdateRequest,
+} from 'seamapi'
+
+import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
+
+// UPSTREAM: Missing ThermostatUpdateResponse in seamapi.
+type UseUpdateThermostatData = Record<string, unknown>
+type UseUpdateThermostatMutationParams = ThermostatUpdateRequest
+
+export function useUpdateThermostat(): UseMutationResult<
+  UseUpdateThermostatData,
+  SeamError,
+  UseUpdateThermostatMutationParams
+> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  return useMutation<
+    UseUpdateThermostatData,
+    SeamError,
+    UseUpdateThermostatMutationParams
+  >({
+    mutationFn: async (mutationParams: UseUpdateThermostatMutationParams) => {
+      if (client === null) throw new NullSeamClientError()
+
+      return await client.thermostats.update(mutationParams)
+    },
+    onSuccess: (_data, variables) => {
+      queryClient.setQueryData<ThermostatDevice | null>(
+        ['thermostats', 'get', { device_id: variables.device_id }],
+        (thermostat) => {
+          if (thermostat == null) {
+            return
+          }
+
+          return getUpdatedThermostat(thermostat, variables)
+        }
+      )
+
+      queryClient.setQueryData<ThermostatsListResponse['thermostats']>(
+        ['thermostats', 'list', { device_id: variables.device_id }],
+        (thermostats): ThermostatDevice[] => {
+          if (thermostats == null) {
+            return []
+          }
+
+          return thermostats.map((thermostat) => {
+            if (thermostat.device_id === variables.device_id) {
+              return getUpdatedThermostat(thermostat, variables)
+            }
+
+            return thermostat
+          })
+        }
+      )
+    },
+  })
+}
+
+function getUpdatedThermostat(
+  thermostat: ThermostatDevice,
+  variables: UseUpdateThermostatMutationParams
+): ThermostatDevice {
+  return {
+    ...thermostat,
+
+    properties: {
+      ...thermostat.properties,
+
+      default_climate_setting: {
+        ...thermostat.properties.default_climate_setting,
+        manual_override_allowed:
+          thermostat.properties?.default_climate_setting
+            ?.manual_override_allowed != null
+            ? thermostat.properties.default_climate_setting
+                .manual_override_allowed
+            : true,
+
+        ...variables.default_climate_setting,
+      },
+    },
+  }
+}

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

@@ -1,10 +1,17 @@
 import classNames from 'classnames'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import type { ClimateSetting, HvacModeSetting } from 'seamapi'
+import {
+  type ClimateSetting,
+  type HvacModeSetting,
+  isThermostatDevice,
+} from 'seamapi'
+
+import { useDevice } from 'lib/index.js'
 
 import { getSystemTimeZone } from 'lib/dates.js'
 import { ClimateSettingScheduleFormClimateSetting } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleFormClimateSetting.js'
+import { ClimateSettingScheduleFormDefaultClimateSetting } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleFormDefaultClimateSetting.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'
@@ -31,8 +38,9 @@ export interface ClimateSettingScheduleFormFields {
   startDate: string
   endDate: string
   timeZone: string
-  hvacModeSetting: HvacModeSetting
-  setPoints: {
+  climateSetting: {
+    hvacModeSetting: HvacModeSetting
+    // may have to ignore one or the other fields here on submit
     heatingSetPoint: number
     coolingSetPoint: number
   }
@@ -54,24 +62,29 @@ export function ClimateSettingScheduleForm({
 function Content({
   onBack,
 }: Omit<ClimateSettingScheduleFormProps, 'className'>): JSX.Element {
-  const { control, watch, resetField } = useForm({
-    defaultValues: {
-      deviceId: '',
-      name: '',
-      startDate: '',
-      endDate: '',
-      timeZone: getSystemTimeZone(),
-      hvacModeSetting: 'heat_cool' as HvacModeSetting,
-      setPoints: {
-        heatingSetPoint: 70,
-        coolingSetPoint: 75,
+  const { control, watch, resetField } =
+    useForm<ClimateSettingScheduleFormFields>({
+      defaultValues: {
+        deviceId: '',
+        name: '',
+        startDate: '',
+        endDate: '',
+        timeZone: getSystemTimeZone(),
+        climateSetting: {
+          hvacModeSetting: 'heat_cool',
+          heatingSetPoint: 70,
+          coolingSetPoint: 75,
+        },
       },
-    },
-  })
+    })
 
   const deviceId = watch('deviceId')
   const timeZone = watch('timeZone')
 
+  const { device } = useDevice({
+    device_id: deviceId,
+  })
+
   const [page, setPage] = useState<
     | 'device_select'
     | 'default_setting'
@@ -80,13 +93,38 @@ function Content({
     | 'climate_setting'
   >('device_select')
 
+  const returnToDeviceSelect = (): void => {
+    resetField('deviceId')
+    setPage('device_select')
+  }
+
+  useEffect(() => {
+    if (page === 'device_select' && device != null) {
+      if (!isThermostatDevice(device)) return
+      const defaultSetting = device.properties.default_climate_setting
+      if (defaultSetting != null) setPage('name_and_schedule')
+      else setPage('default_setting')
+    }
+  }, [device, page, setPage])
+
   if (page === 'device_select') {
     return (
       <ClimateSettingScheduleFormDeviceSelect
         title={t.addNewClimateSettingSchedule}
         control={control}
         onBack={onBack}
-        onSelect={() => {
+      />
+    )
+  }
+
+  if (page === 'default_setting') {
+    return (
+      <ClimateSettingScheduleFormDefaultClimateSetting
+        title={t.addNewClimateSettingSchedule}
+        deviceId={deviceId}
+        onBack={returnToDeviceSelect}
+        onCancel={onBack}
+        onSave={() => {
           setPage('name_and_schedule')
         }}
       />
@@ -99,9 +137,7 @@ function Content({
         title={t.addNewClimateSettingSchedule}
         control={control}
         deviceId={deviceId}
-        onBack={() => {
-          setPage('device_select')
-        }}
+        onBack={returnToDeviceSelect}
         onCancel={onBack}
         onNext={() => {
           setPage('climate_setting')
@@ -130,8 +166,6 @@ function Content({
       <ClimateSettingScheduleFormClimateSetting
         title={t.addNewClimateSettingSchedule}
         control={control}
-        watch={watch}
-        resetField={resetField}
         deviceId={deviceId}
         onBack={() => {
           setPage('name_and_schedule')

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

@@ -1,10 +1,4 @@
-import {
-  type Control,
-  Controller,
-  type UseFormResetField,
-  type UseFormWatch,
-} from 'react-hook-form'
-import type { HvacModeSetting } from 'seamapi'
+import { type Control, Controller } from 'react-hook-form'
 
 import { useDevice } from 'lib/seam/devices/use-device.js'
 import { Button } from 'lib/ui/Button.js'
@@ -12,14 +6,11 @@ import type { ClimateSettingScheduleFormFields } from 'lib/ui/ClimateSettingForm
 import { FormField } from 'lib/ui/FormField.js'
 import { InputLabel } from 'lib/ui/InputLabel.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
-import { ClimateModeMenu } from 'lib/ui/thermostat/ClimateModeMenu.js'
-import { TemperatureControlGroup } from 'lib/ui/thermostat/TemperatureControlGroup.js'
+import { ClimateSettingControlGroup } from 'lib/ui/thermostat/ClimateSettingControlGroup.js'
 
 interface ClimateSettingScheduleFormClimateSettingProps {
   title: string
   control: Control<ClimateSettingScheduleFormFields>
-  watch: UseFormWatch<ClimateSettingScheduleFormFields>
-  resetField: UseFormResetField<ClimateSettingScheduleFormFields>
   deviceId: string
   onBack: () => void
   onCancel: (() => void) | undefined
@@ -29,8 +20,6 @@ interface ClimateSettingScheduleFormClimateSettingProps {
 export function ClimateSettingScheduleFormClimateSetting({
   title,
   control,
-  watch,
-  resetField,
   deviceId,
   onBack,
   onCancel,
@@ -40,8 +29,6 @@ export function ClimateSettingScheduleFormClimateSetting({
     device_id: deviceId,
   })
 
-  const hvacModeSetting = watch('hvacModeSetting')
-
   return (
     <>
       <ContentHeader
@@ -56,11 +43,7 @@ export function ClimateSettingScheduleFormClimateSetting({
               <InputLabel>{t.climateSetting}</InputLabel>
               <span className='seam-label'>{t.climateSettingSubHeading}</span>
             </div>
-            <FormContent
-              control={control}
-              resetField={resetField}
-              hvacModeSetting={hvacModeSetting}
-            />
+            <FormContent control={control} />
           </div>
         </div>
         <div className='seam-actions'>
@@ -76,67 +59,38 @@ export function ClimateSettingScheduleFormClimateSetting({
 
 interface FormContentProps {
   control: Control<ClimateSettingScheduleFormFields>
-  resetField: UseFormResetField<ClimateSettingScheduleFormFields>
-  hvacModeSetting: HvacModeSetting
 }
 
-function FormContent({
-  control,
-  resetField,
-  hvacModeSetting,
-}: FormContentProps): JSX.Element {
+function FormContent({ control }: FormContentProps): JSX.Element {
   return (
-    <>
-      <FormField>
-        <Controller
-          name='hvacModeSetting'
-          control={control}
-          render={({ field: { value, onChange } }) => {
-            return (
-              <ClimateModeMenu
-                mode={value}
-                onChange={(mode) => {
-                  resetField('setPoints')
-                  onChange(mode)
-                }}
-              />
-            )
-          }}
-        />
-      </FormField>
-      {hvacModeSetting !== 'off' && (
-        <FormField className='seam-climate-setting-slider-container'>
-          <Controller
-            name='setPoints'
-            control={control}
-            render={({ field: { value, onChange } }) => (
-              <TemperatureControlGroup
-                coolValue={value.coolingSetPoint}
-                heatValue={value.heatingSetPoint}
-                delta={5}
-                maxCool={90}
-                maxHeat={100}
-                minCool={50}
-                minHeat={70}
-                mode={hvacModeSetting}
-                onCoolValueChange={(coolingSetPoint) => {
-                  onChange({
-                    ...value,
-                    coolingSetPoint,
-                  })
-                }}
-                onHeatValueChange={(heatingSetPoint) => {
-                  onChange({
-                    ...value,
-                    heatingSetPoint,
-                  })
-                }}
-              />
-            )}
+    <FormField>
+      <Controller
+        name='climateSetting'
+        control={control}
+        render={({ field: { value, onChange } }) => (
+          <ClimateSettingControlGroup
+            mode={value.hvacModeSetting}
+            onModeChange={(mode) => {
+              onChange({ ...value, hvacModeSetting: mode })
+            }}
+            coolValue={value.coolingSetPoint}
+            heatValue={value.heatingSetPoint}
+            onCoolValueChange={(coolingSetPoint) => {
+              onChange({
+                ...value,
+                coolingSetPoint,
+              })
+            }}
+            onHeatValueChange={(heatingSetPoint) => {
+              onChange({
+                ...value,
+                heatingSetPoint,
+              })
+            }}
           />
-        </FormField>
-      )}
-    </>
+        )}
+      />
+    </FormField>
   )
 }
 

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

@@ -0,0 +1,79 @@
+import { useState } from 'react'
+import type { HvacModeSetting } from 'seamapi'
+
+import { useDevice } from 'lib/seam/devices/use-device.js'
+import { Button } from 'lib/ui/Button.js'
+import { InputLabel } from 'lib/ui/InputLabel.js'
+import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import { ClimateSettingControlGroup } from 'lib/ui/thermostat/ClimateSettingControlGroup.js'
+
+interface ClimateSettingScheduleFormDefaultClimateSettingProps {
+  title: string
+  deviceId: string
+  onBack: () => void
+  onCancel: (() => void) | undefined
+  onSave: () => void
+}
+
+export function ClimateSettingScheduleFormDefaultClimateSetting({
+  title,
+  deviceId,
+  onBack,
+  onCancel,
+  onSave,
+}: ClimateSettingScheduleFormDefaultClimateSettingProps): JSX.Element {
+  const { device } = useDevice({
+    device_id: deviceId,
+  })
+
+  const [mode, setMode] = useState<HvacModeSetting>('heat_cool')
+  const [heatValue, setHeatValue] = useState(70)
+  const [coolValue, setCoolValue] = useState(75)
+
+  return (
+    <>
+      <ContentHeader
+        title={title}
+        onBack={onBack}
+        subheading={device?.properties.name}
+      />
+      <div className='seam-main'>
+        <div className='seam-climate-setting-schedule-form-default-climate-setting'>
+          <div className='seam-content'>
+            <div className='seam-default-climate-setting-message'>
+              <p>{t.defaultClimateMessage}</p>
+            </div>
+            <div className='seam-control-group-title'>
+              <InputLabel>{t.defaultClimate}</InputLabel>
+              <span className='seam-label'>{t.defautClimateSubHeading}</span>
+            </div>
+            <ClimateSettingControlGroup
+              mode={mode}
+              onModeChange={setMode}
+              heatValue={heatValue}
+              onHeatValueChange={setHeatValue}
+              coolValue={coolValue}
+              onCoolValueChange={setCoolValue}
+            />
+          </div>
+        </div>
+        <div className='seam-actions'>
+          <Button onClick={onCancel}>{t.cancel}</Button>
+          <Button variant='solid' onClick={onSave}>
+            {t.save}
+          </Button>
+        </div>
+      </div>
+    </>
+  )
+}
+
+const t = {
+  defaultClimate: 'Default Climate',
+  defautClimateSubHeading:
+    'Choose the default mode and climate for this device',
+  defaultClimateMessage:
+    'This device doesn’t have a default climate set up yet. Choose the climate you’d like the device to fall back to after scheduled climates reach their ends.',
+  cancel: 'Cancel',
+  save: 'Save',
+}

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

@@ -7,7 +7,6 @@ import { ThermostatSelect } from 'lib/ui/thermostat/ThermostatSelect.js'
 interface ClimateSettingScheduleFormDeviceSelectProps {
   title: string
   control: Control<ClimateSettingScheduleFormFields>
-  onSelect: () => void
   onBack: (() => void) | undefined
 }
 
@@ -15,7 +14,6 @@ export function ClimateSettingScheduleFormDeviceSelect({
   title,
   control,
   onBack,
-  onSelect,
 }: ClimateSettingScheduleFormDeviceSelectProps): JSX.Element {
   return (
     <>
@@ -28,7 +26,6 @@ export function ClimateSettingScheduleFormDeviceSelect({
             <ThermostatSelect
               onSelect={(deviceId) => {
                 onChange(deviceId)
-                onSelect()
               }}
             />
           )}

package/src/lib/ui/thermostat/TemperatureControlGroup.tsx

@@ -16,11 +16,11 @@ export interface TemperatureControlGroupProps {
   onHeatValueChange: (temperature: number) => void
   coolValue: number
   onCoolValueChange: (temperature: number) => void
-  delta: number
-  minHeat: number
-  maxHeat: number
-  minCool: number
-  maxCool: number
+  delta?: number
+  minHeat?: number
+  maxHeat?: number
+  minCool?: number
+  maxCool?: number
 }
 
 export function TemperatureControlGroup({
@@ -29,11 +29,11 @@ export function TemperatureControlGroup({
   onHeatValueChange,
   coolValue,
   onCoolValueChange,
-  delta,
-  minHeat,
-  maxHeat,
-  minCool,
-  maxCool,
+  delta = 5,
+  minHeat = 60,
+  maxHeat = 90,
+  minCool = 60,
+  maxCool = 90,
 }: TemperatureControlGroupProps): JSX.Element {
   const showHeat = mode === 'heat' || mode === 'heat_cool'
   const showCool = mode === 'cool' || mode === 'heat_cool'

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '2.1.0'
+const seamapiReactVersion = '2.1.1'
 
 export default seamapiReactVersion

package/src/styles/_climate-setting-schedule-form.scss

@@ -4,6 +4,7 @@
   .seam-climate-setting-schedule-form {
     @include main;
     @include name-and-schedule;
+    @include default-climate-setting;
     @include climate-setting;
   }
 }
@@ -57,6 +58,35 @@
   }
 }
 
+@mixin default-climate-setting {
+  .seam-climate-setting-schedule-form-default-climate-setting {
+    .seam-control-group-title {
+      margin-top: 16px;
+      margin-bottom: 16px;
+    }
+
+    .seam-label {
+      color: colors.$text-gray-1;
+      font-size: 14px;
+    }
+
+    .seam-default-climate-setting-message {
+      > p {
+        color: colors.$text-gray-1;
+        font-size: 14px;
+        margin-bottom: 16px;
+      }
+
+      margin-top: 4px;
+      border-bottom: 1px solid colors.$divider-stroke-light;
+    }
+
+    .seam-climate-setting-control-group {
+      margin-bottom: 32px;
+    }
+  }
+}
+
 @mixin climate-setting {
   .seam-climate-setting-schedule-form-climate-setting {
     .seam-content {