feat: Add Thermostat Climate Preset Management

Author: kadiryazici

.storybook/seed-fake.js

@@ -412,6 +412,30 @@ export const seedFake = (db) => {
       image_url:
         'https://connect.getseam.com/assets/images/devices/ecobee_3-lite_front.png',
       image_alt_text: 'Placeholder Lock Image',
+      available_climate_presets: [
+        {
+          climate_preset_key: 'occupied',
+          name: 'Occupied',
+          display_name: 'Occupied',
+          fan_mode_setting: 'auto',
+          hvac_mode_setting: 'heat_cool',
+          cooling_set_point_celsius: 25,
+          heating_set_point_celsius: 20,
+          cooling_set_point_fahrenheit: 77,
+          heating_set_point_fahrenheit: 68,
+        },
+        {
+          climate_preset_key: 'unoccupied',
+          name: 'Unoccupied',
+          display_name: 'Unoccupied',
+          fan_mode_setting: 'auto',
+          hvac_mode_setting: 'heat_cool',
+          cooling_set_point_celsius: 30,
+          heating_set_point_celsius: 15,
+          cooling_set_point_fahrenheit: 86,
+          heating_set_point_fahrenheit: 59,
+        },
+      ],
     },
     errors: [],
   })

assets/icons/trash.svg

@@ -143,7 +143,7 @@
     "@rollup/plugin-replace": "^5.0.5",
     "@rxfork/r2wc-react-to-web-component": "^2.4.0",
     "@seamapi/fake-devicedb": "^1.6.1",
-    "@seamapi/fake-seam-connect": "^1.69.1",
+    "@seamapi/fake-seam-connect": "^1.76.0",
     "@seamapi/types": "^1.344.3",
     "@storybook/addon-designs": "^7.0.1",
     "@storybook/addon-essentials": "^7.0.2",

package-lock.json

@@ -14,13 +14,15 @@ import { useHeatCoolThermostat } from 'lib/seam/thermostats/use-heat-cool-thermo
 import { useHeatThermostat } from 'lib/seam/thermostats/use-heat-thermostat.js'
 import { useSetThermostatFanMode } from 'lib/seam/thermostats/use-set-thermostat-fan-mode.js'
 import { useSetThermostatOff } from 'lib/seam/thermostats/use-set-thermostat-off.js'
+import { Button } from 'lib/ui/Button.js'
 import { AccordionRow } from 'lib/ui/layout/AccordionRow.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { DetailRow } from 'lib/ui/layout/DetailRow.js'
 import { DetailSection } from 'lib/ui/layout/DetailSection.js'
 import { DetailSectionGroup } from 'lib/ui/layout/DetailSectionGroup.js'
 import { Snackbar } from 'lib/ui/Snackbar/Snackbar.js'
 import { ClimateModeMenu } from 'lib/ui/thermostat/ClimateModeMenu.js'
+import { ClimatePresets } from 'lib/ui/thermostat/ClimatePresets.js'
 import { ClimateSettingStatus } from 'lib/ui/thermostat/ClimateSettingStatus.js'
 import { FanModeMenu } from 'lib/ui/thermostat/FanModeMenu.js'
 import { TemperatureControlGroup } from 'lib/ui/thermostat/TemperatureControlGroup.js'
@@ -40,16 +42,37 @@ export function ThermostatDeviceDetails({
   className,
   onEditName,
 }: ThermostatDeviceDetailsProps): JSX.Element | null {
+  const [temperatureUnit, setTemperatureUnit] = useState<
+    'fahrenheit' | 'celsius'
+  >('fahrenheit')
+  const [climateSettingsVisible, setClimateSettingsVisible] = useState(false)
+
   if (device == null) {
     return null
   }
 
+  if (climateSettingsVisible) {
+    return (
+      <ClimatePresets
+        device={device}
+        temperatureUnit={temperatureUnit}
+        onBack={() => {
+          setClimateSettingsVisible(false)
+        }}
+      />
+    )
+  }
+
   return (
     <div className={classNames('seam-device-details', className)}>
       <ContentHeader title={t.thermostat} onBack={onBack} />
 
       <div className='seam-body'>
-        <ThermostatCard device={device} onEditName={onEditName} />
+        <ThermostatCard
+          onTemperatureUnitChange={setTemperatureUnit}
+          device={device}
+          onEditName={onEditName}
+        />
 
         <div className='seam-thermostat-device-details'>
           <DetailSectionGroup>
@@ -58,6 +81,12 @@ export function ThermostatDeviceDetails({
               tooltipContent={t.currentSettingsTooltip}
             >
               <ClimateSettingRow device={device} />
+              <ClimatePresetRow
+                onClickManage={() => {
+                  setClimateSettingsVisible(true)
+                }}
+                device={device}
+              />
               <FanModeRow device={device} />
             </DetailSection>
 
@@ -299,12 +328,32 @@ function ClimateSettingRow({
   )
 }
 
+interface ClimatePresetRowProps {
+  device: ThermostatDevice
+  onClickManage: () => void
+}
+
+function ClimatePresetRow({
+  device,
+  onClickManage,
+}: ClimatePresetRowProps): JSX.Element {
+  return (
+    <DetailRow label={t.climatePresets}>
+      <Button onClick={onClickManage}>
+        Manage ({(device.properties.available_climate_presets ?? []).length}{' '}
+        Presets)
+      </Button>
+    </DetailRow>
+  )
+}
+
 const t = {
   thermostat: 'Thermostat',
   currentSettings: 'Current settings',
   currentSettingsTooltip:
     'These are the settings currently on the device. If you change them here, they change on the device.',
   climate: 'Climate',
+  climatePresets: 'Climate presets',
   fanMode: 'Fan mode',
   none: 'None',
   fanModeSuccess: 'Successfully updated fan mode!',

package.json

@@ -13,6 +13,7 @@ export type ThermostatDevice = Omit<Device, 'properties'> & {
         | 'available_hvac_mode_settings'
         | 'fan_mode_setting'
         | 'current_climate_setting'
+        | 'available_climate_presets'
       >
     >
 }

src/lib/icons/Trash.tsx

@@ -0,0 +1,98 @@
+import type {
+  SeamHttpApiError,
+  ThermostatsCreateClimatePresetBody,
+} from '@seamapi/http/connect'
+import {
+  useMutation,
+  type UseMutationResult,
+  useQueryClient,
+} from '@tanstack/react-query'
+
+import type { ThermostatDevice } from 'lib/seam/thermostats/thermostat-device.js'
+import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
+
+export type UseCreateThermostatClimatePresetParams = never
+export type UseCreateThermostatClimatePresetData = undefined
+
+export type UseCreateThermostatClimatePresetVariables = ThermostatsCreateClimatePresetBody
+
+const fhToCelsius = (t?: number): number | undefined => t == null ? undefined : (t - 32) * (5 / 9)
+
+type ClimatePreset = ThermostatDevice['properties']['available_climate_presets'][number];
+
+export function useCreateThermostatClimatePreset(): UseMutationResult<
+  UseCreateThermostatClimatePresetData,
+  SeamHttpApiError,
+  UseCreateThermostatClimatePresetVariables
+> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  return useMutation<
+    UseCreateThermostatClimatePresetData,
+    SeamHttpApiError,
+    UseCreateThermostatClimatePresetVariables
+  >({
+    mutationFn: async (variables) => {
+      if (client === null) throw new NullSeamClientError()
+      await client.thermostats.createClimatePreset(variables)
+    },
+    onSuccess: (_data, variables) => {
+      const preset: ClimatePreset = {
+        ...variables,
+        cooling_set_point_celsius: fhToCelsius(variables.cooling_set_point_fahrenheit),
+        heating_set_point_celsius: fhToCelsius(variables.heating_set_point_fahrenheit),
+        display_name: variables.name ?? variables.climate_preset_key,
+        can_delete: true,
+        can_edit: true,
+        manual_override_allowed: true,
+      };
+
+      queryClient.setQueryData<ThermostatDevice | null>(
+        ['devices', 'get', { device_id: variables.device_id }],
+        (device) => {
+          if (device == null) {
+            return;
+          }
+
+          return getUpdatedDevice(device, preset)
+        }
+      )
+
+      queryClient.setQueryData<ThermostatDevice[]>(
+        ['devices', 'list', { device_id: variables.device_id }],
+        (devices): ThermostatDevice[] => {
+          if (devices == null) {
+            return []
+          }
+
+          return devices.map((device) => {
+            if (device.device_id === variables.device_id) {
+              return getUpdatedDevice(device, preset)
+            }
+
+            return device
+          })
+        }
+      )
+    },
+  })
+}
+
+
+function getUpdatedDevice(device: ThermostatDevice, preset: ClimatePreset): ThermostatDevice {
+  if (device == null) {
+    return device;
+  }
+
+  return {
+    ...device,
+    properties: {
+      ...device.properties,
+      available_climate_presets: [
+        preset,
+        ...(device.properties.available_climate_presets ?? []),
+      ],
+    },
+  }
+}

src/lib/seam/components/DeviceDetails/ThermostatDeviceDetails.tsx

@@ -0,0 +1,78 @@
+import type {
+  SeamHttpApiError,
+  ThermostatsDeleteClimatePresetBody,
+} from '@seamapi/http/connect'
+import {
+  useMutation,
+  type UseMutationResult,
+  useQueryClient,
+} from '@tanstack/react-query'
+
+import type { ThermostatDevice } from 'lib/seam/thermostats/thermostat-device.js'
+import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
+
+export type UseDeleteThermostatClimatePresetParams = never
+
+export type UseDeleteThermostatClimatePresetData = undefined
+
+export type UseDeleteThermostatClimatePresetVariables = ThermostatsDeleteClimatePresetBody
+
+export function useDeleteThermostatClimatePreset(): UseMutationResult<
+  UseDeleteThermostatClimatePresetData,
+  SeamHttpApiError,
+  UseDeleteThermostatClimatePresetVariables
+> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  return useMutation<
+    UseDeleteThermostatClimatePresetData,
+    SeamHttpApiError,
+    UseDeleteThermostatClimatePresetVariables
+  >({
+    mutationFn: async (variables) => {
+      if (client === null) throw new NullSeamClientError()
+      await client.thermostats.deleteClimatePreset(variables)
+    },
+    onSuccess: (_data, variables) => {
+          queryClient.setQueryData<ThermostatDevice | null>(
+            ['devices', 'get', { device_id: variables.device_id }],
+            (device) => {
+              if (device == null) {
+                return
+              }
+              
+              return getUpdatedDevice(device, variables.climate_preset_key)
+            }
+          )
+    
+          queryClient.setQueryData<ThermostatDevice[]>(
+            ['devices', 'list', { device_id: variables.device_id }],
+            (devices): ThermostatDevice[] => {
+              if (devices == null) {
+                return []
+              }
+    
+              return devices.map((device) => {
+                if (device.device_id === variables.device_id) {
+                  return getUpdatedDevice(device, variables.climate_preset_key)
+                }
+    
+                return device
+              })
+            }
+          )
+        },
+  })
+}
+
+
+function getUpdatedDevice(device: ThermostatDevice, climatePresetKey: string): ThermostatDevice {
+  return {
+    ...device,
+    properties: {
+      ...device.properties,
+      available_climate_presets: device.properties.available_climate_presets.filter(preset => preset.climate_preset_key !== climatePresetKey),
+    }
+  }
+}