@seamapi/react 1.64.0 → 1.65.0

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

@@ -7,6 +7,7 @@ import { NestedAccessCodeTable } from 'lib/seam/components/AccessCodeTable/Acces
 import type { CommonProps } from 'lib/seam/components/common-props.js'
 import { DeviceModel } from 'lib/seam/components/DeviceDetails/DeviceModel.js'
 import { useToggleLock } from 'lib/seam/devices/use-toggle-lock.js'
+import { deviceErrorFilter, deviceWarningFilter } from 'lib/seam/filters.js'
 import { Alerts } from 'lib/ui/Alert/Alerts.js'
 import { Button } from 'lib/ui/Button.js'
 import { BatteryStatus } from 'lib/ui/device/BatteryStatus.js'
@@ -24,6 +25,8 @@ export function LockDeviceDetails(
 ): JSX.Element | null {
   const {
     device,
+    errorFilter = () => true,
+    warningFilter = () => true,
     disableLockUnlock,
     disableCreateAccessCode,
     disableEditAccessCode,
@@ -52,6 +55,8 @@ export function LockDeviceDetails(
     return (
       <NestedAccessCodeTable
         deviceId={device.device_id}
+        errorFilter={errorFilter}
+        warningFilter={warningFilter}
         disableLockUnlock={disableLockUnlock}
         disableCreateAccessCode={disableCreateAccessCode}
         disableEditAccessCode={disableEditAccessCode}
@@ -64,14 +69,20 @@ export function LockDeviceDetails(
   }
 
   const alerts = [
-    ...device.errors.map((error) => ({
-      variant: 'error' as const,
-      message: error.message,
-    })),
-    ...device.warnings.map((warning) => ({
-      variant: 'warning' as const,
-      message: warning.message,
-    })),
+    ...device.errors
+      .filter(deviceErrorFilter)
+      .filter(errorFilter)
+      .map((error) => ({
+        variant: 'error' as const,
+        message: error.message,
+      })),
+    ...device.warnings
+      .filter(deviceWarningFilter)
+      .filter(warningFilter)
+      .map((warning) => ({
+        variant: 'warning' as const,
+        message: warning.message,
+      })),
   ]
 
   return (

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

@@ -23,6 +23,8 @@ export function ThermostatDeviceDetails({
   device,
   onBack,
   className,
+  errorFilter = () => true,
+  warningFilter = () => true,
   disableLockUnlock,
   disableCreateAccessCode,
   disableEditAccessCode,
@@ -41,6 +43,8 @@ export function ThermostatDeviceDetails({
     return (
       <NestedClimateSettingScheduleTable
         deviceId={device.device_id}
+        errorFilter={errorFilter}
+        warningFilter={warningFilter}
         disableLockUnlock={disableLockUnlock}
         disableCreateAccessCode={disableCreateAccessCode}
         disableEditAccessCode={disableEditAccessCode}

package/src/lib/seam/components/DeviceTable/DeviceHealthBar.tsx

@@ -1,7 +1,13 @@
+import type { ConnectedAccountError, DeviceError } from 'seamapi'
+
 import { CheckIcon } from 'lib/icons/Check.js'
 import { ExclamationCircleOutlineIcon } from 'lib/icons/ExclamationCircleOutline.js'
 import { OnlineStatusAccountOfflineIcon } from 'lib/icons/OnlineStatusAccountOffline.js'
 import type { UseDevicesData } from 'lib/seam/devices/use-devices.js'
+import {
+  connectedAccountErrorFilter,
+  deviceErrorFilter,
+} from 'lib/seam/filters.js'
 import { TableFilterBar } from 'lib/ui/Table/TableFilterBar/TableFilterBar.js'
 import { TableFilterItem } from 'lib/ui/Table/TableFilterBar/TableFilterItem.js'
 
@@ -12,22 +18,24 @@ interface DeviceHealthBarProps {
   devices: Array<UseDevicesData[number]>
   filter: AccountFilter | DeviceFilter | null
   onFilterSelect: (filter: AccountFilter | DeviceFilter | null) => void
+  errorFilter: (error: DeviceError | ConnectedAccountError) => boolean
 }
 
 export function DeviceHealthBar({
   devices,
   filter,
   onFilterSelect,
+  errorFilter,
 }: DeviceHealthBarProps): JSX.Element {
   const erroredAccounts = devices.filter((device) => {
     return (
-      device.errors.filter((error) => 'is_connected_account_error' in error)
+      device.errors.filter(errorFilter).filter(connectedAccountErrorFilter)
         .length > 0
     )
   })
   const erroredDevices = devices.filter((device) => {
     return (
-      device.errors.filter((error) => 'is_device_error' in error).length > 0
+      device.errors.filter(errorFilter).filter(deviceErrorFilter).length > 0
     )
   })
   const accountIssueCount = erroredAccounts.length

package/src/lib/seam/components/DeviceTable/DeviceTable.tsx

@@ -22,6 +22,7 @@ import {
 } from 'lib/seam/devices/use-devices.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { LoadingToast } from 'lib/ui/LoadingToast/LoadingToast.js'
+import { Snackbar } from 'lib/ui/Snackbar/Snackbar.js'
 import { EmptyPlaceholder } from 'lib/ui/Table/EmptyPlaceholder.js'
 import { TableBody } from 'lib/ui/Table/TableBody.js'
 import { TableHeader } from 'lib/ui/Table/TableHeader.js'
@@ -67,6 +68,8 @@ export function DeviceTable({
   deviceComparator = compareByCreatedAtDesc,
   heading = t.devices,
   title = t.devices,
+  errorFilter = () => true,
+  warningFilter = () => true,
   disableLockUnlock = false,
   disableCreateAccessCode = false,
   disableEditAccessCode = false,
@@ -77,7 +80,7 @@ export function DeviceTable({
 }: DeviceTableProps = {}): JSX.Element {
   useComponentTelemetry('DeviceTable')
 
-  const { devices, isInitialLoading, isError, error } = useDevices({
+  const { devices, isInitialLoading, isError, refetch } = useDevices({
     device_ids: deviceIds,
     connected_account_ids: connectedAccountIds,
   })
@@ -107,6 +110,8 @@ export function DeviceTable({
     return (
       <NestedDeviceDetails
         deviceId={selectedDeviceId}
+        errorFilter={errorFilter}
+        warningFilter={warningFilter}
         disableLockUnlock={disableLockUnlock}
         disableCreateAccessCode={disableCreateAccessCode}
         disableEditAccessCode={disableEditAccessCode}
@@ -120,10 +125,6 @@ export function DeviceTable({
     )
   }
 
-  if (isError) {
-    return <p className={className}>{error?.message}</p>
-  }
-
   return (
     <div className={classNames('seam-device-table', className)}>
       <ContentHeader onBack={onBack} />
@@ -152,8 +153,25 @@ export function DeviceTable({
         )}
       </TableHeader>
       <TableBody>
-        <Content devices={filteredDevices} onDeviceClick={handleDeviceClick} />
+        <Content
+          devices={filteredDevices}
+          onDeviceClick={handleDeviceClick}
+          errorFilter={errorFilter}
+        />
       </TableBody>
+
+      <Snackbar
+        variant='error'
+        visible={isError}
+        message={t.fallbackErrorMessage}
+        action={{
+          label: t.tryAgain,
+          onClick: () => {
+            void refetch()
+          },
+        }}
+        disableCloseButton
+      />
     </div>
   )
 }
@@ -161,8 +179,9 @@ export function DeviceTable({
 function Content(props: {
   devices: Array<UseDevicesData[number]>
   onDeviceClick: (deviceId: string) => void
+  errorFilter: (error: any) => boolean
 }): JSX.Element {
-  const { devices, onDeviceClick } = props
+  const { devices, onDeviceClick, errorFilter } = props
   const [filter, setFilter] = useState<AccountFilter | DeviceFilter | null>(
     null
   )
@@ -198,6 +217,7 @@ function Content(props: {
         devices={devices}
         filter={filter}
         onFilterSelect={setFilter}
+        errorFilter={errorFilter}
       />
       {filteredDevices.map((device) => (
         <DeviceRow
@@ -216,4 +236,6 @@ const t = {
   devices: 'Devices',
   noDevicesMessage: 'Sorry, no devices were found',
   loading: 'Loading devices',
+  tryAgain: 'Try again',
+  fallbackErrorMessage: 'Devices could not be loaded',
 }

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

@@ -0,0 +1,45 @@
+import type {
+  DeviceModelV1,
+  RouteRequestParams,
+  RouteResponse,
+} from '@seamapi/types/devicedb'
+import { useQuery } from '@tanstack/react-query'
+import type { SeamError } from 'seamapi'
+
+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 function useDeviceModel(
+  params?: UseDeviceModelParams
+): UseSeamQueryResult<'deviceModel', UseDeviceModelData> {
+  const normalizedParams =
+    typeof params === 'string' ? { device_model_id: params } : params
+
+  const { client: seam } = useSeamClient()
+  const { data, ...rest } = useQuery<
+    DeviceModelsGetResponse['device_model'] | null,
+    SeamError
+  >({
+    enabled: seam != null,
+    queryKey: ['internal', 'device_models', 'get', normalizedParams],
+    queryFn: async () => {
+      if (seam == null) return null
+      const {
+        data: { device_model: deviceModel },
+      } = await seam.client.get<DeviceModelsGetResponse>(
+        '/internal/devicedb/v1/device_models/get',
+        { params: normalizedParams }
+      )
+      return deviceModel
+    },
+  })
+
+  return { ...rest, deviceModel: data }
+}
+
+type DeviceModelsGetParams = RouteRequestParams<'/v1/device_models/get'>
+
+type DeviceModelsGetResponse = RouteResponse<'/v1/device_models/get'>

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

@@ -0,0 +1,43 @@
+import type {
+  DeviceModelV1,
+  RouteRequestParams,
+  RouteResponse,
+} from '@seamapi/types/devicedb'
+import { useQuery } from '@tanstack/react-query'
+import type { SeamError } from 'seamapi'
+
+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 function useDeviceModels(
+  params?: UseDeviceModelsParams
+): UseSeamQueryResult<'deviceModels', UseDeviceModelsData> {
+  const { client: seam } = useSeamClient()
+
+  const { data, ...rest } = useQuery<
+    DeviceModelsListResponse['device_models'],
+    SeamError
+  >({
+    enabled: seam != null,
+    queryKey: ['internal', 'device_models', 'list', params],
+    queryFn: async () => {
+      if (seam == null) return []
+      const {
+        data: { device_models: deviceModels },
+      } = await seam.client.get<DeviceModelsListResponse>(
+        '/internal/devicedb/v1/device_models/list',
+        { params }
+      )
+      return deviceModels
+    },
+  })
+
+  return { ...rest, deviceModels: data }
+}
+
+type DeviceModelsListParams = RouteRequestParams<'/v1/device_models/list'>
+
+type DeviceModelsListResponse = RouteResponse<'/v1/device_models/list'>

package/src/lib/seam/components/SupportedDeviceTable/use-manufacturer.ts

@@ -0,0 +1,45 @@
+import type {
+  Manufacturer,
+  RouteRequestParams,
+  RouteResponse,
+} from '@seamapi/types/devicedb'
+import { useQuery } from '@tanstack/react-query'
+import type { SeamError } from 'seamapi'
+
+import { useSeamClient } from 'lib/seam/use-seam-client.js'
+import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
+
+export type UseManufacturerParams = ManufacturersGetParams | string
+export type UseManufacturerData = Manufacturer | null
+
+export function useManufacturer(
+  params?: UseManufacturerParams
+): UseSeamQueryResult<'manufacturer', UseManufacturerData> {
+  const normalizedParams =
+    typeof params === 'string' ? { manufacturer_id: params } : params
+
+  const { client: seam } = useSeamClient()
+  const { data, ...rest } = useQuery<
+    ManufacturersGetResponse['manufacturer'] | null,
+    SeamError
+  >({
+    enabled: seam != null,
+    queryKey: ['internal', 'manufacturers', 'get', normalizedParams],
+    queryFn: async () => {
+      if (seam == null) return null
+      const {
+        data: { manufacturer },
+      } = await seam.client.get<ManufacturersGetResponse>(
+        '/internal/devicedb/v1/manufacturers/get',
+        { params: normalizedParams }
+      )
+      return manufacturer
+    },
+  })
+
+  return { ...rest, manufacturer: data }
+}
+
+type ManufacturersGetParams = RouteRequestParams<'/v1/manufacturers/get'>
+
+type ManufacturersGetResponse = RouteResponse<'/v1/manufacturers/get'>

package/src/lib/seam/components/SupportedDeviceTable/use-manufacturers.ts

@@ -0,0 +1,43 @@
+import type {
+  Manufacturer,
+  RouteRequestParams,
+  RouteResponse,
+} from '@seamapi/types/devicedb'
+import { useQuery } from '@tanstack/react-query'
+import type { SeamError } from 'seamapi'
+
+import { useSeamClient } from 'lib/seam/use-seam-client.js'
+import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
+
+export type UseManufacturersParams = ManufacturersListParams
+export type UseManufacturersData = Manufacturer[]
+
+export function useManufacturers(
+  params?: UseManufacturersParams
+): UseSeamQueryResult<'manufacturers', UseManufacturersData> {
+  const { client: seam } = useSeamClient()
+
+  const { data, ...rest } = useQuery<
+    ManufacturersListResponse['manufacturers'],
+    SeamError
+  >({
+    enabled: seam != null,
+    queryKey: ['internal', 'manufacturers', 'list', params],
+    queryFn: async () => {
+      if (seam == null) return []
+      const {
+        data: { manufacturers },
+      } = await seam.client.get<ManufacturersListResponse>(
+        '/internal/devicedb/v1/manufacturers/list',
+        { params }
+      )
+      return manufacturers
+    },
+  })
+
+  return { ...rest, manufacturers: data }
+}
+
+type ManufacturersListParams = RouteRequestParams<'/v1/manufacturers/list'>
+
+type ManufacturersListResponse = RouteResponse<'/v1/manufacturers/list'>

package/src/lib/seam/components/common-props.tsx

@@ -1,8 +1,18 @@
 import type { ComponentType } from 'react'
+import type {
+  AccessCodeError,
+  ConnectedAccountError,
+  DeviceError,
+  SeamWarning,
+} from 'seamapi'
 
 export interface RequiredCommonProps {
   className: string | undefined
   onBack: (() => void) | undefined
+  errorFilter: (
+    error: ConnectedAccountError | DeviceError | AccessCodeError
+  ) => boolean
+  warningFilter: (warning: SeamWarning) => boolean
   disableDeleteAccessCode: boolean | undefined
   disableCreateAccessCode: boolean | undefined
   disableEditAccessCode: boolean | undefined

package/src/lib/seam/filters.ts

@@ -0,0 +1,32 @@
+import type {
+  AccessCodeError,
+  ConnectedAccountError,
+  DeviceError,
+  SeamWarning,
+} from 'seamapi'
+
+type SeamCompositeError = ConnectedAccountError | DeviceError | AccessCodeError
+
+export const accessCodeErrorFilter = (error: SeamCompositeError): boolean => {
+  return 'is_access_code_error' in error && error.is_access_code_error
+}
+
+export const accessCodeWarningFilter = (_: SeamWarning): boolean => {
+  return true
+}
+
+export const deviceErrorFilter = (error: SeamCompositeError): boolean => {
+  return 'is_device_error' in error && error.is_device_error
+}
+
+export const deviceWarningFilter = (_: SeamWarning): boolean => {
+  return true
+}
+
+export const connectedAccountErrorFilter = (
+  error: SeamCompositeError
+): boolean => {
+  return (
+    'is_connected_account_error' in error && error.is_connected_account_error
+  )
+}

package/src/lib/telemetry/client.ts

@@ -12,7 +12,7 @@ export interface TelemetryClientOptions {
 // Implements a compatible Analytics 2.0 API with custom options.
 // https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/
 export class TelemetryClient {
-  #queue: Queue
+  readonly #queue: Queue
   #anonymousId: string | null
 
   #endpoint: string
@@ -154,7 +154,7 @@ export class TelemetryClient {
     }
   }
 
-  #push = (message: Message): void => {
+  readonly #push = (message: Message): void => {
     if (this.#disabled) return
     this.#queue.push(async () => {
       const payload: Payload = {
@@ -178,7 +178,7 @@ export class TelemetryClient {
     })
   }
 
-  #log = (
+  readonly #log = (
     method: string,
     ...args: Array<string | Traits | Properties>
   ): void => {

package/src/lib/ui/Snackbar/Snackbar.tsx

@@ -11,7 +11,7 @@ interface SnackbarProps {
   message: string
   variant: SnackbarVariant
   visible: boolean
-  onClose: () => void
+  onClose?: () => void
   action?: {
     label: string
     onClick: () => void
@@ -29,7 +29,7 @@ export function Snackbar({
   autoDismiss = false,
   dismissAfterMs = 5000,
   disableCloseButton = false,
-  onClose,
+  onClose = () => {},
 }: SnackbarProps): JSX.Element {
   const { label: actionLabel, onClick: handleActionClick } = action ?? {}
 

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.64.0'
+const seamapiReactVersion = '1.65.0'
 
 export default seamapiReactVersion

package/src/styles/_device-details.scss

@@ -99,8 +99,7 @@
               grid-auto-rows: 1fr;
               font-size: 14px;
               line-height: 134%;
-              row-gap: 4px;
-              column-gap: 28px;
+              gap: 4px 28px;
 
               .seam-label {
                 color: colors.$text-gray-2;

package/src/styles/_thermostat.scss

@@ -498,8 +498,7 @@
       width: auto;
       display: grid;
       grid-template-columns: auto auto;
-      column-gap: 16px;
-      row-gap: 8px;
+      gap: 8px 16px;
     }
 
     .seam-thermostat-property-block {