Merge pull request #680 from seamapi/add-climate-preset-support

feat: Add Thermostat Climate Preset Management

Author: kadiryazici

.storybook/seed-fake.js

@@ -412,6 +412,34 @@ 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,
+          can_edit: true,
+          can_delete: true,
+        },
+        {
+          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,
+          can_edit: false,
+          can_delete: false,
+        },
+      ],
     },
     errors: [],
   })

assets/icons/trash.svg

@@ -127,6 +127,7 @@
     }
   },
   "dependencies": {
+    "@floating-ui/react": "^0.27.5",
     "@seamapi/http": "^1.20.0",
     "@tanstack/react-query": "^5.27.5",
     "classnames": "^2.3.2",
@@ -143,7 +144,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,16 +328,38 @@ function ClimateSettingRow({
   )
 }
 
+interface ClimatePresetRowProps {
+  device: ThermostatDevice
+  onClickManage: () => void
+}
+
+function ClimatePresetRow({
+  device,
+  onClickManage,
+}: ClimatePresetRowProps): JSX.Element {
+  return (
+    <DetailRow label={t.climatePresets}>
+      <Button onClick={onClickManage}>
+        {t.manageNPresets(
+          (device.properties.available_climate_presets ?? []).length
+        )}
+      </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!',
   fanModeError: 'Error updating fan mode. Please try again.',
   climateSettingError: 'Error updating climate setting. Please try again.',
   saved: 'Saved',
+  manageNPresets: (n: number) => `Manage (${n} Preset${n <= 1 ? '' : 's'})`,
 }

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'
       >
     >
 }
@@ -36,3 +37,6 @@ export interface ClimateSetting {
 export const isThermostatDevice = (
   device: Device
 ): device is ThermostatDevice => 'is_fan_running' in device.properties
+
+export type ThermostatClimatePreset =
+  ThermostatDevice['properties']['available_climate_presets'][number]

src/lib/icons/Trash.tsx

@@ -1,8 +1,12 @@
 import type { Device } from '@seamapi/types/connect'
 
-export const celsiusToFahrenheit = (t: number): number => (t * 9) / 5 + 32
+type ConversionReturn<T> = T extends NonNullable<number> ? number : T
 
-export const fahrenheitToCelsius = (t: number): number => (t - 32) * (5 / 9)
+export const celsiusToFahrenheit = <T>(t: T): ConversionReturn<T> =>
+  (typeof t === 'number' ? (t * 9) / 5 + 32 : t) as ConversionReturn<T>
+
+export const fahrenheitToCelsius = <T>(t: T): ConversionReturn<T> =>
+  (typeof t === 'number' ? (t - 32) * (5 / 9) : t) as ConversionReturn<T>
 
 export const getCoolingSetPointCelsius = (
   variables: {
@@ -87,3 +91,9 @@ export const getHeatingSetPointFahrenheit = (
     undefined
   )
 }
+
+export function getTemperatureUnitSymbol(
+  type: 'fahrenheit' | 'celsius'
+): string {
+  return type === 'fahrenheit' ? '°F' : '°C'
+}