@seamapi/react 2.4.0 → 2.5.1

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

@@ -44,18 +44,6 @@ export function ThermostatDeviceDetails({
     device_id: device.device_id,
   })
 
-  const {
-    mutate: updateFanMode,
-    isError: isFanModeError,
-    isSuccess: isFanModeSuccess,
-  } = useUpdateFanMode()
-
-  const {
-    mutate: updateThermostat,
-    isSuccess: isThermostatUpdateSuccess,
-    isError: isThermostatUpdateError,
-  } = useUpdateThermostat()
-
   if (climateSettingsOpen) {
     return (
       <NestedClimateSettingScheduleTable
@@ -123,17 +111,7 @@ export function ThermostatDeviceDetails({
                   temperatureUnit='fahrenheit'
                 />
               </DetailRow>
-              <DetailRow label={t.fanMode}>
-                <FanModeMenu
-                  mode={device.properties.fan_mode_setting}
-                  onChange={(fanMode) => {
-                    updateFanMode({
-                      device_id: device.device_id,
-                      fan_mode_setting: fanMode,
-                    })
-                  }}
-                />
-              </DetailRow>
+              <FanModeRow device={device} />
             </DetailSection>
 
             <DetailSection
@@ -150,22 +128,8 @@ export function ThermostatDeviceDetails({
                   <p>{t.none}</p>
                 )}
               </DetailRow>
-              <DetailRow label={t.allowManualOverride}>
-                <Switch
-                  checked={
-                    device.properties.default_climate_setting
-                      ?.manual_override_allowed ?? true
-                  }
-                  onChange={(checked) => {
-                    updateThermostat({
-                      device_id: device.device_id,
-                      default_climate_setting: {
-                        manual_override_allowed: checked,
-                      },
-                    })
-                  }}
-                />
-              </DetailRow>
+
+              <ManualOverrideRow device={device} />
             </DetailSection>
 
             <DetailSection label={t.deviceDetails}>
@@ -189,25 +153,73 @@ export function ThermostatDeviceDetails({
           </DetailSectionGroup>
         </div>
       </div>
+    </div>
+  )
+}
 
+function ManualOverrideRow({
+  device,
+}: {
+  device: ThermostatDevice
+}): JSX.Element {
+  const { mutate, isSuccess, isError } = useUpdateThermostat()
+
+  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>
       <Snackbar
         message={t.manualOverrideSuccess}
         variant='success'
-        visible={isThermostatUpdateSuccess}
+        visible={isSuccess}
         automaticVisibility
       />
 
       <Snackbar
         message={t.manualOverrideError}
         variant='error'
-        visible={isThermostatUpdateError}
+        visible={isError}
         automaticVisibility
       />
+    </>
+  )
+}
+
+function FanModeRow({ device }: { device: ThermostatDevice }): JSX.Element {
+  const { mutate, isSuccess, isError } = useUpdateFanMode()
+
+  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>
 
       <Snackbar
         message={t.fanModeSuccess}
         variant='success'
-        visible={isFanModeSuccess}
+        visible={isSuccess}
         automaticVisibility
         autoDismiss
       />
@@ -215,10 +227,10 @@ export function ThermostatDeviceDetails({
       <Snackbar
         message={t.fanModeError}
         variant='error'
-        visible={isFanModeError}
+        visible={isError}
         automaticVisibility
       />
-    </div>
+    </>
   )
 }
 

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

@@ -1,7 +1,6 @@
 import type { DeviceModelV1 } from '@seamapi/types/devicedb'
 import { useMemo } from 'react'
 
-import { SupportedDeviceFilterResultRow } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterResultRow.js'
 import { SupportedDeviceManufacturerSection } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceManufacturerSection.js'
 import type { UseDeviceModelsData } from 'lib/seam/components/SupportedDeviceTable/use-device-models.js'
 import {
@@ -80,21 +79,6 @@ export function SupportedDeviceContent({
     )
   }
 
-  const hasFilters = filterValue.trim() !== '' || filters.manufacturer !== null
-
-  if (hasFilters) {
-    return (
-      <div className='seam-supported-device-table-content'>
-        {deviceModels.map((deviceModel) => (
-          <SupportedDeviceFilterResultRow
-            key={deviceModel.device_model_id}
-            deviceModel={deviceModel}
-          />
-        ))}
-      </div>
-    )
-  }
-
   return (
     <>
       {Object.entries(groupedDeviceModels)

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

@@ -0,0 +1,90 @@
+import {
+  useMutation,
+  type UseMutationResult,
+  useQueryClient,
+} from '@tanstack/react-query'
+import type {
+  SeamError,
+  ThermostatCoolRequest,
+  ThermostatDevice,
+  ThermostatsListResponse,
+} from 'seamapi'
+
+import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
+
+// UPSTREAM: Missing ThermostatCoolResponse in seamapi.
+type UseCoolThermostatData = Record<string, unknown>
+type UseCoolThermostatMutationParams = ThermostatCoolRequest
+
+export function useCoolThermostat(): UseMutationResult<
+  UseCoolThermostatData,
+  SeamError,
+  UseCoolThermostatMutationParams
+> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  return useMutation<
+    UseCoolThermostatData,
+    SeamError,
+    UseCoolThermostatMutationParams
+  >({
+    mutationFn: async (mutationParams: UseCoolThermostatMutationParams) => {
+      if (client === null) throw new NullSeamClientError()
+
+      return await client.thermostats.cool(mutationParams)
+    },
+    onSuccess: (_data, variables) => {
+      queryClient.setQueryData<ThermostatDevice | null>(
+        ['devices', 'get', { device_id: variables.device_id }],
+        (thermostat) => {
+          if (thermostat == null) {
+            return
+          }
+
+          return getUpdatedThermostat(thermostat, variables)
+        }
+      )
+
+      queryClient.setQueryData<ThermostatsListResponse['thermostats']>(
+        ['devices', '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: UseCoolThermostatMutationParams
+): ThermostatDevice {
+  return {
+    ...thermostat,
+    properties: {
+      ...thermostat.properties,
+      current_climate_setting: {
+        ...thermostat.properties.current_climate_setting,
+        cooling_set_point_fahrenheit:
+          variables.cooling_set_point_fahrenheit ??
+          thermostat.properties.current_climate_setting
+            .cooling_set_point_fahrenheit,
+        cooling_set_point_celsius:
+          variables.cooling_set_point_celsius ??
+          thermostat.properties.current_climate_setting
+            .cooling_set_point_celsius,
+      },
+    },
+  }
+}

package/src/lib/seam/thermostats/use-heat-cool-thermostat.ts

@@ -0,0 +1,83 @@
+import {
+  useMutation,
+  type UseMutationResult,
+  useQueryClient,
+} from '@tanstack/react-query'
+import type {
+  SeamError,
+  ThermostatDevice,
+  ThermostatHeatCoolRequest,
+  ThermostatsListResponse,
+} from 'seamapi'
+
+import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
+
+// UPSTREAM: Missing ThermostatHeatCoolResponse in seamapi.
+type UseHeatCoolThermostatData = Record<string, unknown>
+type UseHeatCoolThermostatMutationParams = ThermostatHeatCoolRequest
+
+export function useHeatCoolThermostat(): UseMutationResult<
+  UseHeatCoolThermostatData,
+  SeamError,
+  UseHeatCoolThermostatMutationParams
+> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  return useMutation<
+    UseHeatCoolThermostatData,
+    SeamError,
+    UseHeatCoolThermostatMutationParams
+  >({
+    mutationFn: async (mutationParams: UseHeatCoolThermostatMutationParams) => {
+      if (client === null) throw new NullSeamClientError()
+
+      return await client.thermostats.heatCool(mutationParams)
+    },
+    onSuccess: (_data, variables) => {
+      queryClient.setQueryData<ThermostatDevice | null>(
+        ['devices', 'get', { device_id: variables.device_id }],
+        (thermostat) => {
+          if (thermostat == null) {
+            return
+          }
+
+          return getUpdatedThermostat(thermostat, variables)
+        }
+      )
+
+      queryClient.setQueryData<ThermostatsListResponse['thermostats']>(
+        ['devices', '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: UseHeatCoolThermostatMutationParams
+): ThermostatDevice {
+  return {
+    ...thermostat,
+    properties: {
+      ...thermostat.properties,
+      current_climate_setting: {
+        ...thermostat.properties.current_climate_setting,
+        ...variables,
+      },
+    },
+  }
+}

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

@@ -0,0 +1,90 @@
+import {
+  useMutation,
+  type UseMutationResult,
+  useQueryClient,
+} from '@tanstack/react-query'
+import type {
+  SeamError,
+  ThermostatDevice,
+  ThermostatHeatRequest,
+  ThermostatsListResponse,
+} from 'seamapi'
+
+import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
+
+// UPSTREAM: Missing ThermostatHeatResponse in seamapi.
+type UseHeatThermostatData = Record<string, unknown>
+type UseHeatThermostatMutationParams = ThermostatHeatRequest
+
+export function useHeatThermostat(): UseMutationResult<
+  UseHeatThermostatData,
+  SeamError,
+  UseHeatThermostatMutationParams
+> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  return useMutation<
+    UseHeatThermostatData,
+    SeamError,
+    UseHeatThermostatMutationParams
+  >({
+    mutationFn: async (mutationParams: UseHeatThermostatMutationParams) => {
+      if (client === null) throw new NullSeamClientError()
+
+      return await client.thermostats.heat(mutationParams)
+    },
+    onSuccess: (_data, variables) => {
+      queryClient.setQueryData<ThermostatDevice | null>(
+        ['devices', 'get', { device_id: variables.device_id }],
+        (thermostat) => {
+          if (thermostat == null) {
+            return
+          }
+
+          return getUpdatedThermostat(thermostat, variables)
+        }
+      )
+
+      queryClient.setQueryData<ThermostatsListResponse['thermostats']>(
+        ['devices', '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: UseHeatThermostatMutationParams
+): ThermostatDevice {
+  return {
+    ...thermostat,
+    properties: {
+      ...thermostat.properties,
+      current_climate_setting: {
+        ...thermostat.properties.current_climate_setting,
+        heating_set_point_fahrenheit:
+          variables.heating_set_point_fahrenheit ??
+          thermostat.properties.current_climate_setting
+            .heating_set_point_fahrenheit,
+        heating_set_point_celsius:
+          variables.heating_set_point_celsius ??
+          thermostat.properties.current_climate_setting
+            .heating_set_point_celsius,
+      },
+    },
+  }
+}

package/src/lib/seam/thermostats/use-set-thermostat-off.ts

@@ -0,0 +1,83 @@
+import {
+  useMutation,
+  type UseMutationResult,
+  useQueryClient,
+} from '@tanstack/react-query'
+import type {
+  SeamError,
+  ThermostatDevice,
+  ThermostatOffRequest,
+  ThermostatsListResponse,
+} from 'seamapi'
+
+import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
+
+// UPSTREAM: Missing ThermostatOffResponse in seamapi.
+type UseSetThermostatOffData = Record<string, unknown>
+type UseSetThermostatOffMutationParams = ThermostatOffRequest
+
+export function useSetThermostatOff(): UseMutationResult<
+  UseSetThermostatOffData,
+  SeamError,
+  UseSetThermostatOffMutationParams
+> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  return useMutation<
+    UseSetThermostatOffData,
+    SeamError,
+    UseSetThermostatOffMutationParams
+  >({
+    mutationFn: async (mutationParams: UseSetThermostatOffMutationParams) => {
+      if (client === null) throw new NullSeamClientError()
+
+      return await client.thermostats.off(mutationParams)
+    },
+    onSuccess: (_data, variables) => {
+      queryClient.setQueryData<ThermostatDevice | null>(
+        ['devices', 'get', { device_id: variables.device_id }],
+        (thermostat) => {
+          if (thermostat == null) {
+            return
+          }
+
+          return getUpdatedThermostat(thermostat)
+        }
+      )
+
+      queryClient.setQueryData<ThermostatsListResponse['thermostats']>(
+        ['devices', '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)
+            }
+
+            return thermostat
+          })
+        }
+      )
+    },
+  })
+}
+
+function getUpdatedThermostat(thermostat: ThermostatDevice): ThermostatDevice {
+  return {
+    ...thermostat,
+    properties: {
+      ...thermostat.properties,
+      is_fan_running: false,
+      current_climate_setting: {
+        ...thermostat.properties.current_climate_setting,
+        automatic_cooling_enabled: false,
+        automatic_heating_enabled: false,
+        hvac_mode_setting: 'off',
+      },
+    },
+  }
+}

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '2.4.0'
+const seamapiReactVersion = '2.5.1'
 
 export default seamapiReactVersion

package/src/styles/_main.scss

@@ -5,6 +5,7 @@
 @use './alert';
 @use './buttons';
 @use './layout';
+@use './visibility';
 @use './loading_toast';
 @use './colors';
 @use './icons';
@@ -41,6 +42,7 @@
   @include form-field.all;
   @include buttons.all;
   @include layout.all;
+  @include visibility.all;
   @include loading_toast.all;
   @include icons.all;
   @include menus.all;

package/src/styles/_seam-table.scss

@@ -27,11 +27,17 @@
         justify-content: center;
 
         > div {
-          width: 40px;
+          width: 32px;
           height: 40px;
           display: flex;
           align-items: center;
           justify-content: center;
+          margin-right: 4px;
+
+          @media only screen and (width >= 768px) {
+            width: 40px;
+            margin-right: 4px;
+          }
         }
       }
 
@@ -48,10 +54,15 @@
         }
 
         .seam-details {
-          font-size: 14px;
+          font-size: 12px;
           line-height: 134%;
           color: colors.$text-gray-1;
           display: flex;
+          flex-wrap: wrap;
+
+          @media only screen and (width >= 768px) {
+            font-size: 14px;
+          }
 
           .seam-device-name {
             max-width: 190px;
@@ -66,10 +77,14 @@
       }
 
       .seam-action-cell {
-        margin-right: 12px;
+        margin-right: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
+
+        @media only screen and (width >= 768px) {
+          margin-right: 12px;
+        }
       }
 
       .seam-issue-icon-wrap {

package/src/styles/_supported-device-table.scss

@@ -248,18 +248,6 @@ $row-padding: 8px;
         display: flex;
         padding: 8px;
       }
-
-      &.filter-result-row {
-        .seam-model-name {
-          display: flex;
-          align-items: center;
-
-          .seam-manufacturer-image {
-            width: 32px;
-            margin-right: 4px;
-          }
-        }
-      }
     }
 
     .seam-status-pill {

package/src/styles/_visibility.scss

@@ -0,0 +1,25 @@
+@use './colors';
+
+@mixin all {
+  .seam-invisible {
+    display: none !important;
+  }
+
+  .seam-md-flex {
+    @media only screen and (width >= 768px) {
+      display: flex !important;
+    }
+  }
+
+  .seam-md-block {
+    @media only screen and (width >= 768px) {
+      display: block !important;
+    }
+  }
+
+  .seam-md-invisible {
+    @media only screen and (width >= 768px) {
+      display: none !important;
+    }
+  }
+}

package/lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterResultRow.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" resolution-mode="require"/>
-import type { DeviceModelV1 } from '@seamapi/types/devicedb';
-interface SupportedDeviceFilterResultRowProps {
-    deviceModel: DeviceModelV1;
-}
-export declare function SupportedDeviceFilterResultRow({ deviceModel, }: SupportedDeviceFilterResultRowProps): JSX.Element;
-export declare function ModelColumn({ deviceModel, }: SupportedDeviceFilterResultRowProps): JSX.Element;
-export {};

package/lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterResultRow.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ImageColumn, StatusColumn, } from '../../../../lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.js';
-import { DotDivider } from '../../../../lib/ui/layout/DotDivider.js';
-export function SupportedDeviceFilterResultRow({ deviceModel, }) {
-    return (_jsxs("div", { className: 'seam-row filter-result-row', children: [_jsx(ImageColumn, { deviceModel: deviceModel }), _jsx(ModelColumn, { deviceModel: deviceModel }), _jsx(StatusColumn, { deviceModel: deviceModel })] }));
-}
-export function ModelColumn({ deviceModel, }) {
-    return (_jsxs("div", { className: 'seam-col seam-model-col', children: [_jsxs("div", { className: 'seam-model-name', children: [_jsx("img", { src: deviceModel.manufacturer.logo?.url, alt: deviceModel.manufacturer.display_name, className: 'seam-manufacturer-image' }), ' ', _jsx("div", { className: 'seam-truncated-text', children: deviceModel.display_name })] }), _jsx("div", { className: 'seam-model-id', children: _jsxs("div", { className: 'seam-truncated-text', children: [deviceModel.device_model_id, _jsx(DotDivider, {}), deviceModel.main_connection_type] }) })] }));
-}
-//# sourceMappingURL=SupportedDeviceFilterResultRow.js.map

package/lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterResultRow.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SupportedDeviceFilterResultRow.js","sourceRoot":"","sources":["../../../../src/lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterResultRow.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,WAAW,EACX,YAAY,GACb,MAAM,gEAAgE,CAAA;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAMxD,MAAM,UAAU,8BAA8B,CAAC,EAC7C,WAAW,GACyB;IACpC,OAAO,CACL,eAAK,SAAS,EAAC,4BAA4B,aACzC,KAAC,WAAW,IAAC,WAAW,EAAE,WAAW,GAAI,EACzC,KAAC,WAAW,IAAC,WAAW,EAAE,WAAW,GAAI,EACzC,KAAC,YAAY,IAAC,WAAW,EAAE,WAAW,GAAI,IACtC,CACP,CAAA;AACH,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,EAC1B,WAAW,GACyB;IACpC,OAAO,CACL,eAAK,SAAS,EAAC,yBAAyB,aACtC,eAAK,SAAS,EAAC,iBAAiB,aAC9B,cACE,GAAG,EAAE,WAAW,CAAC,YAAY,CAAC,IAAI,EAAE,GAAG,EACvC,GAAG,EAAE,WAAW,CAAC,YAAY,CAAC,YAAY,EAC1C,SAAS,EAAC,yBAAyB,GACnC,EAAC,GAAG,EACN,cAAK,SAAS,EAAC,qBAAqB,YAAE,WAAW,CAAC,YAAY,GAAO,IACjE,EACN,cAAK,SAAS,EAAC,eAAe,YAC5B,eAAK,SAAS,EAAC,qBAAqB,aACjC,WAAW,CAAC,eAAe,EAC5B,KAAC,UAAU,KAAG,EACb,WAAW,CAAC,oBAAoB,IAC7B,GACF,IACF,CACP,CAAA;AACH,CAAC"}