@seamapi/react 2.8.6 → 2.9.0

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

@@ -1,23 +1,33 @@
 import classNames from 'classnames'
-import { useState } from 'react'
-import type { ThermostatDevice } from 'seamapi'
+import { useEffect, useState } from 'react'
+import type { HvacModeSetting, ThermostatDevice } from 'seamapi'
 
+import { debounce } from 'lib/debounce.js'
 import { BeeIcon } from 'lib/icons/Bee.js'
+import { CheckBlackIcon } from 'lib/icons/CheckBlack.js'
 import { ChevronWideIcon } from 'lib/icons/ChevronWide.js'
 import { NestedClimateSettingScheduleTable } from 'lib/seam/components/ClimateSettingScheduleTable/ClimateSettingScheduleTable.js'
 import type { CommonProps } from 'lib/seam/components/common-props.js'
 import { useConnectedAccount } from 'lib/seam/connected-accounts/use-connected-account.js'
 import { useClimateSettingSchedules } from 'lib/seam/thermostats/climate-setting-schedules/use-climate-setting-schedules.js'
+import { useCoolThermostat } from 'lib/seam/thermostats/use-cool-thermostat.js'
+import { useHeatCoolThermostat } from 'lib/seam/thermostats/use-heat-cool-thermostat.js'
+import { useHeatThermostat } from 'lib/seam/thermostats/use-heat-thermostat.js'
+import { useSetThermostatOff } from 'lib/seam/thermostats/use-set-thermostat-off.js'
 import { useUpdateFanMode } from 'lib/seam/thermostats/use-update-fan-mode.js'
 import { useUpdateThermostat } from 'lib/seam/thermostats/use-update-thermostat.js'
+import { getSupportedThermostatModes } from 'lib/temperature-bounds.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 { Switch } from 'lib/ui/Switch/Switch.js'
+import { ClimateModeMenu } from 'lib/ui/thermostat/ClimateModeMenu.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'
 import { ThermostatCard } from 'lib/ui/thermostat/ThermostatCard.js'
 
 interface ThermostatDeviceDetailsProps extends CommonProps {
@@ -105,12 +115,7 @@ export function ThermostatDeviceDetails({
               label={t.currentSettings}
               tooltipContent={t.currentSettingsTooltip}
             >
-              <DetailRow label={t.climate}>
-                <ClimateSettingStatus
-                  climateSetting={device.properties.current_climate_setting}
-                  temperatureUnit='fahrenheit'
-                />
-              </DetailRow>
+              <ClimateSettingRow device={device} />
               <FanModeRow device={device} />
             </DetailSection>
 
@@ -166,22 +171,25 @@ function ManualOverrideRow({
 
   return (
     <>
-      <DetailRow label={t.allowManualOverride}>
-        <Switch
-          checked={
-            device.properties.default_climate_setting
-              ?.manual_override_allowed ?? true
-          }
-          onChange={(checked) => {
-            mutate({
-              device_id: device.device_id,
-              default_climate_setting: {
-                manual_override_allowed: checked,
-              },
-            })
-          }}
-        />
-      </DetailRow>
+      <div className='seam-detail-row-wrap'>
+        <DetailRow label={t.allowManualOverride}>
+          <Switch
+            checked={
+              device.properties.default_climate_setting
+                ?.manual_override_allowed ?? true
+            }
+            onChange={(checked) => {
+              mutate({
+                device_id: device.device_id,
+                default_climate_setting: {
+                  manual_override_allowed: checked,
+                },
+              })
+            }}
+          />
+        </DetailRow>
+      </div>
+
       <Snackbar
         message={t.manualOverrideSuccess}
         variant='success'
@@ -204,17 +212,19 @@ function FanModeRow({ device }: { device: ThermostatDevice }): JSX.Element {
 
   return (
     <>
-      <DetailRow label={t.fanMode}>
-        <FanModeMenu
-          mode={device.properties.fan_mode_setting}
-          onChange={(fanMode) => {
-            mutate({
-              device_id: device.device_id,
-              fan_mode_setting: fanMode,
-            })
-          }}
-        />
-      </DetailRow>
+      <div className='seam-detail-row-wrap'>
+        <DetailRow label={t.fanMode}>
+          <FanModeMenu
+            mode={device.properties.fan_mode_setting}
+            onChange={(fanMode) => {
+              mutate({
+                device_id: device.device_id,
+                fan_mode_setting: fanMode,
+              })
+            }}
+          />
+        </DetailRow>
+      </div>
 
       <Snackbar
         message={t.fanModeSuccess}
@@ -234,6 +244,191 @@ function FanModeRow({ device }: { device: ThermostatDevice }): JSX.Element {
   )
 }
 
+function ClimateSettingRow({
+  device,
+}: {
+  device: ThermostatDevice
+}): JSX.Element {
+  const deviceHeatValue =
+    device.properties.current_climate_setting.heating_set_point_fahrenheit
+  const deviceCoolValue =
+    device.properties.current_climate_setting.cooling_set_point_fahrenheit
+
+  const supportedModes = getSupportedThermostatModes(device)
+
+  const [showSuccess, setShowSuccess] = useState(false)
+  const [mode, setMode] = useState<HvacModeSetting>(
+    (supportedModes.includes('heat_cool') ? 'heat_cool' : supportedModes[0]) ??
+      'off'
+  )
+
+  const [heatValue, setHeatValue] = useState(
+    device.properties.current_climate_setting.heating_set_point_fahrenheit ?? 0
+  )
+
+  const [coolValue, setCoolValue] = useState(
+    device.properties.current_climate_setting.cooling_set_point_fahrenheit ?? 0
+  )
+
+  const {
+    mutate: heatCoolThermostat,
+    isSuccess: isHeatCoolSuccess,
+    isError: isHeatCoolError,
+  } = useHeatCoolThermostat()
+
+  const {
+    mutate: heatThermostat,
+    isSuccess: isHeatSuccess,
+    isError: isHeatError,
+  } = useHeatThermostat()
+
+  const {
+    mutate: coolThermostat,
+    isSuccess: isCoolSuccess,
+    isError: isCoolError,
+  } = useCoolThermostat()
+
+  const {
+    mutate: setThermostatOff,
+    isSuccess: isSetOffSuccess,
+    isError: isSetOffError,
+  } = useSetThermostatOff()
+
+  useEffect(() => {
+    const handler = debounce(() => {
+      switch (mode) {
+        case 'heat_cool':
+          heatCoolThermostat({
+            device_id: device.device_id,
+            heating_set_point_fahrenheit: heatValue,
+            cooling_set_point_fahrenheit: coolValue,
+          })
+          break
+        case 'heat':
+          heatThermostat({
+            device_id: device.device_id,
+            heating_set_point_fahrenheit: heatValue,
+          })
+          break
+        case 'cool':
+          coolThermostat({
+            device_id: device.device_id,
+            cooling_set_point_fahrenheit: coolValue,
+          })
+          break
+        case 'off':
+          setThermostatOff({
+            device_id: device.device_id,
+          })
+          break
+      }
+    }, 2000)
+
+    if (
+      heatValue !== deviceHeatValue ||
+      coolValue !== deviceCoolValue ||
+      mode === 'off'
+    ) {
+      handler()
+    }
+
+    return () => {
+      handler.cancel()
+    }
+  }, [
+    heatValue,
+    coolValue,
+    mode,
+    deviceHeatValue,
+    deviceCoolValue,
+    device,
+    heatThermostat,
+    coolThermostat,
+    heatCoolThermostat,
+    setThermostatOff,
+  ])
+
+  useEffect(() => {
+    if (
+      isHeatCoolSuccess ||
+      isHeatSuccess ||
+      isCoolSuccess ||
+      isSetOffSuccess
+    ) {
+      setShowSuccess(true)
+
+      const timeout = globalThis.setTimeout(() => {
+        setShowSuccess(false)
+      }, 3000)
+
+      return () => {
+        globalThis.clearTimeout(timeout)
+      }
+    }
+
+    return () => {}
+  }, [isHeatCoolSuccess, isHeatSuccess, isCoolSuccess, isSetOffSuccess])
+
+  return (
+    <>
+      <AccordionRow
+        label={t.climate}
+        leftContent={
+          <div
+            className={classNames('seam-thermostat-mutation-status', {
+              'is-visible': showSuccess,
+            })}
+          >
+            <div className='seam-thermostat-mutation-status-icon'>
+              <CheckBlackIcon />
+            </div>
+            <div className='seam-thermostat-mutation-status-label'>
+              {t.saved}
+            </div>
+          </div>
+        }
+        rightCollapsedContent={
+          <ClimateSettingStatus
+            climateSetting={device.properties.current_climate_setting}
+            temperatureUnit='fahrenheit'
+          />
+        }
+      >
+        <div className='seam-detail-row-end-alignment'>
+          {mode !== 'off' && (
+            <TemperatureControlGroup
+              mode={mode}
+              heatValue={heatValue}
+              coolValue={coolValue}
+              onHeatValueChange={setHeatValue}
+              onCoolValueChange={setCoolValue}
+              delta={
+                Number(
+                  'min_heating_cooling_delta_fahrenheit' in device.properties &&
+                    device.properties.min_heating_cooling_delta_fahrenheit
+                ) ?? 0
+              }
+            />
+          )}
+
+          <ClimateModeMenu
+            mode={mode}
+            onChange={setMode}
+            supportedModes={supportedModes}
+          />
+        </div>
+      </AccordionRow>
+
+      <Snackbar
+        message={t.climateSettingError}
+        variant='error'
+        visible={isHeatCoolError || isHeatError || isCoolError || isSetOffError}
+        automaticVisibility
+      />
+    </>
+  )
+}
+
 const t = {
   thermostat: 'Thermostat',
   climateSchedule: 'scheduled climate',
@@ -261,4 +456,6 @@ const t = {
   fanModeError: 'Error updating fan mode. Please try again.',
   manualOverrideSuccess: 'Successfully updated manual override!',
   manualOverrideError: 'Error updating manual override. Please try again.',
+  climateSettingError: 'Error updating climate setting. Please try again.',
+  saved: 'Saved',
 }

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceContent.tsx

@@ -1,4 +1,4 @@
-import type { DeviceModelV1 } from '@seamapi/types/devicedb'
+import type { DeviceModel } from '@seamapi/types/devicedb'
 import { useMemo } from 'react'
 
 import { SupportedDeviceManufacturerSection } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceManufacturerSection.js'
@@ -141,8 +141,8 @@ function EmptyResult({
 
 const groupDeviceModelsByManufacturer = (
   deviceModels: UseDeviceModelsData
-): Record<string, DeviceModelV1[]> => {
-  const result: Record<string, DeviceModelV1[]> = {}
+): Record<string, DeviceModel[]> => {
+  const result: Record<string, DeviceModel[]> = {}
 
   for (const model of deviceModels) {
     const { manufacturer } = model

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceManufacturerSection.tsx

@@ -1,5 +1,5 @@
 import type {
-  DeviceModelV1,
+  DeviceModel,
   ManufacturerAnnotation,
 } from '@seamapi/types/devicedb'
 import classNames from 'classnames'
@@ -20,7 +20,7 @@ const maxDevicesBeforeCollapsing = 3
 
 interface SupportedDeviceManufacturerSectionProps {
   manufacturerId: string
-  deviceModels: DeviceModelV1[]
+  deviceModels: DeviceModel[]
 }
 
 export function SupportedDeviceManufacturerSection({

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.tsx

@@ -1,11 +1,10 @@
-import type { DeviceModelV1 } from '@seamapi/types/devicedb'
+import type { DeviceModel } from '@seamapi/types/devicedb'
 import classNames from 'classnames'
-import type { DeviceModel } from 'seamapi'
 
 import { DotDivider } from 'lib/ui/layout/DotDivider.js'
 
 interface SupportedDeviceRowProps {
-  deviceModel: DeviceModelV1
+  deviceModel: DeviceModel
 }
 
 export function SupportedDeviceRow({
@@ -75,7 +74,7 @@ export function StatusColumn({
 }
 
 const supportLevelColors: Record<
-  DeviceModelV1['manufacturer']['integration'],
+  DeviceModel['manufacturer']['integration'],
   'green' | 'blue' | 'unknown'
 > = {
   stable: 'green',
@@ -85,20 +84,10 @@ const supportLevelColors: Record<
   inquire: 'unknown',
 }
 
-const status: Record<DeviceModelV1['manufacturer']['integration'], string> = {
+const status: Record<DeviceModel['manufacturer']['integration'], string> = {
   stable: 'LIVE',
   beta: 'BETA',
   unsupported: 'Inquire',
   planned: 'Inquire',
   inquire: 'Inquire',
 }
-
-export const connectionTypeNames: Record<
-  DeviceModel['connection_type'],
-  string
-> = {
-  wifi: 'Wifi',
-  zwave: 'Z-Wave',
-  zigbee: 'Zigbee',
-  unknown: 'Unknown',
-}

package/src/lib/seam/components/SupportedDeviceTable/use-device-model.ts

@@ -1,5 +1,5 @@
 import type {
-  DeviceModelV1,
+  DeviceModel,
   RouteRequestParams,
   RouteResponse,
 } from '@seamapi/types/devicedb'
@@ -10,7 +10,7 @@ import { useSeamClient } from 'lib/seam/use-seam-client.js'
 import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
 
 export type UseDeviceModelParams = DeviceModelsGetParams | string
-export type UseDeviceModelData = DeviceModelV1 | null
+export type UseDeviceModelData = DeviceModel | null
 
 export function useDeviceModel(
   params?: UseDeviceModelParams

package/src/lib/seam/components/SupportedDeviceTable/use-device-models.ts

@@ -1,5 +1,5 @@
 import type {
-  DeviceModelV1,
+  DeviceModel,
   RouteRequestParams,
   RouteResponse,
 } from '@seamapi/types/devicedb'
@@ -10,7 +10,7 @@ import { useSeamClient } from 'lib/seam/use-seam-client.js'
 import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
 
 export type UseDeviceModelsParams = DeviceModelsListParams
-export type UseDeviceModelsData = DeviceModelV1[]
+export type UseDeviceModelsData = DeviceModel[]
 
 export function useDeviceModels(
   params?: UseDeviceModelsParams

package/src/lib/seam/components/SupportedDeviceTable/use-filtered-device-models.ts

@@ -77,13 +77,12 @@ export const useFilteredDeviceModels = ({
       // UPSTREAM: API does not parse zero-length arrays correctly.
       includeIf?.length === 0
         ? []
-        : deviceModels?.filter(
-            (deviceModel) =>
-              manufacturers?.some(
-                (manufacturer) =>
-                  deviceModel.manufacturer.manufacturer_id ===
-                  manufacturer.manufacturer_id
-              )
+        : deviceModels?.filter((deviceModel) =>
+            manufacturers?.some(
+              (manufacturer) =>
+                deviceModel.manufacturer.manufacturer_id ===
+                manufacturer.manufacturer_id
+            )
           ),
   }
 }

package/src/lib/temperature-bounds.ts

@@ -1,4 +1,4 @@
-import type { HvacModeSetting } from 'seamapi'
+import type { HvacModeSetting, ThermostatDevice } from 'seamapi'
 
 export interface ControlBounds {
   mode: Exclude<HvacModeSetting, 'off'>
@@ -51,3 +51,25 @@ export const getTemperatureBounds = (
   heat: getHeatBounds(controlBounds),
   cool: getCoolBounds(controlBounds),
 })
+
+export const getSupportedThermostatModes = (
+  device: ThermostatDevice
+): HvacModeSetting[] => {
+  const allModes: HvacModeSetting[] = ['heat', 'cool', 'heat_cool', 'off']
+
+  return allModes.filter((mode) => {
+    switch (mode) {
+      case 'cool':
+        return device.properties.is_cooling_available
+      case 'heat':
+        return device.properties.is_heating_available
+      case 'heat_cool':
+        return (
+          device.properties.is_heating_available &&
+          device.properties.is_cooling_available
+        )
+      default:
+        return true
+    }
+  })
+}

package/src/lib/ui/layout/AccordionRow.tsx

@@ -5,11 +5,13 @@ import { useToggle } from 'lib/ui/use-toggle.js'
 
 interface AccordionRowProps extends PropsWithChildren {
   label: string
+  leftContent?: JSX.Element
   rightCollapsedContent?: JSX.Element
 }
 
 export function AccordionRow({
   label,
+  leftContent,
   rightCollapsedContent,
   children,
 }: AccordionRowProps): JSX.Element {
@@ -18,7 +20,10 @@ export function AccordionRow({
   return (
     <div className='seam-accordion-row' aria-expanded={isExpanded}>
       <button className='seam-accordion-row-trigger' onClick={toggle}>
-        <p className='seam-row-label'>{label}</p>
+        <div className='seam-row-inner-wrap'>
+          <p className='seam-row-label'>{label}</p>
+          <div className='seam-row-trigger-left-content'>{leftContent}</div>
+        </div>
         <div className='seam-row-inner-wrap'>
           <div className='seam-row-trigger-right-content'>
             {rightCollapsedContent}

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

@@ -8,16 +8,16 @@ import { ThermostatHeatCoolIcon } from 'lib/icons/ThermostatHeatCool.js'
 import { Menu } from 'lib/ui/Menu/Menu.js'
 import { ThermoModeMenuOption } from 'lib/ui/thermostat/ThermoModeMenuOption.js'
 
-const modes: HvacModeSetting[] = ['heat', 'cool', 'heat_cool', 'off']
-
 interface ClimateModeMenuProps {
   mode: HvacModeSetting
   onChange: (mode: HvacModeSetting) => void
+  supportedModes?: HvacModeSetting[]
 }
 
 export function ClimateModeMenu({
   mode,
   onChange,
+  supportedModes = ['heat', 'cool', 'heat_cool', 'off'],
 }: ClimateModeMenuProps): JSX.Element {
   return (
     <Menu
@@ -35,7 +35,7 @@ export function ClimateModeMenu({
         className: 'seam-thermo-mode-menu',
       }}
     >
-      {modes.map((m) => (
+      {supportedModes.map((m) => (
         <ThermoModeMenuOption
           key={m}
           label={t[m]}

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '2.8.6'
+const seamapiReactVersion = '2.9.0'
 
 export default seamapiReactVersion

package/src/styles/_layout.scss

@@ -126,6 +126,16 @@
     gap: 8px;
   }
 
+  .seam-detail-row-end-alignment {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-start;
+    flex-direction: row;
+    gap: 24px;
+    padding-top: 12px;
+  }
+
   .seam-detail-row-rotated-icon {
     transform: rotate(-90deg);
   }
@@ -168,7 +178,7 @@
 
     &[aria-expanded='true'] {
       .seam-accordion-row-content {
-        max-height: 64px;
+        max-height: 128px;
         opacity: 1;
       }
 
@@ -183,7 +193,8 @@
     }
 
     .seam-accordion-row-inner-content {
-      height: 64px;
+      width: 100%;
+      height: 128px;
       padding: 0 16px;
       overflow: hidden;
     }

package/src/styles/_thermostat.scss

@@ -703,6 +703,31 @@
   }
 }
 
+@mixin status {
+  .seam-thermostat-mutation-status {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    gap: 4px;
+    opacity: 0;
+    transition: 0.2s ease-in-out;
+
+    &.is-visible {
+      opacity: 1;
+    }
+  }
+
+  .seam-thermostat-mutation-status-icon {
+    opacity: 0.25;
+  }
+
+  .seam-thermostat-mutation-status-label {
+    font-size: 14px;
+    color: colors.$text-gray-2-5;
+  }
+}
+
 @mixin all {
   @include climate-setting-control-group;
   @include temperature-control-group;
@@ -712,4 +737,5 @@
   @include mode-menu-common;
   @include fan-mode-menu;
   @include climate-mode-menu;
+  @include status;
 }