@seamapi/react 1.23.0 → 1.24.0

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

@@ -1,15 +1,17 @@
 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 { TableFilterBar } from 'lib/ui/Table/TableFilterBar/TableFilterBar.js'
 import { TableFilterItem } from 'lib/ui/Table/TableFilterBar/TableFilterItem.js'
 
+export type AccountFilter = 'account_issues'
 export type DeviceFilter = 'device_issues'
 
 interface DeviceHealthBarProps {
   devices: Array<UseDevicesData[number]>
-  filter: DeviceFilter | null
-  onFilterSelect: (filter: DeviceFilter | null) => void
+  filter: AccountFilter | DeviceFilter | null
+  onFilterSelect: (filter: AccountFilter | DeviceFilter | null) => void
 }
 
 export function DeviceHealthBar({
@@ -17,25 +19,40 @@ export function DeviceHealthBar({
   filter,
   onFilterSelect,
 }: DeviceHealthBarProps): JSX.Element {
-  const erroredDevices = devices.filter((device) => device.errors.length > 0)
-  const issueCount = erroredDevices.length
+  const erroredAccounts = devices.filter((device) => {
+    return (
+      device.errors.filter((error) => 'is_connected_account_error' in error)
+        .length > 0
+    )
+  })
+  const erroredDevices = devices.filter((device) => {
+    return (
+      device.errors.filter((error) => 'is_device_error' in error).length > 0
+    )
+  })
+  const accountIssueCount = erroredAccounts.length
+  const deviceIssueCount = erroredDevices.length
 
-  const toggle = (target: DeviceFilter) => () => {
+  const toggle = (target: AccountFilter | DeviceFilter) => () => {
     const newFilter = target === filter ? null : target
     onFilterSelect(newFilter)
   }
 
-  const isPlural = issueCount === 0 || issueCount > 1
-  const label = isPlural
-    ? `${issueCount} ${t.deviceIssues}`
-    : `${issueCount} ${t.deviceIssue}`
+  const deviceLabel =
+    deviceIssueCount > 0
+      ? `${deviceIssueCount} ${t.deviceIssues}`
+      : `${deviceIssueCount} ${t.deviceIssue}`
+  const accountLabel =
+    accountIssueCount > 0
+      ? `${accountIssueCount} ${t.accountIssues}`
+      : `${accountIssueCount} ${t.accountIssue}`
 
-  if (issueCount === 0) {
+  if (accountIssueCount === 0 && deviceIssueCount === 0) {
     return (
       <TableFilterBar filterCleared>
         <TableFilterItem>
           <CheckIcon />
-          {t.devicesOk}
+          {t.devicesAndAccountsOk}
         </TableFilterItem>
       </TableFilterBar>
     )
@@ -48,19 +65,32 @@ export function DeviceHealthBar({
         onFilterSelect(null)
       }}
     >
-      <TableFilterItem
-        onClick={toggle('device_issues')}
-        selected={filter === 'device_issues'}
-      >
-        <ExclamationCircleOutlineIcon />
-        {label}
-      </TableFilterItem>
+      {deviceIssueCount > 0 && (
+        <TableFilterItem
+          onClick={toggle('device_issues')}
+          selected={filter === 'device_issues'}
+        >
+          <ExclamationCircleOutlineIcon />
+          {deviceLabel}
+        </TableFilterItem>
+      )}
+      {accountIssueCount > 0 && (
+        <TableFilterItem
+          onClick={toggle('account_issues')}
+          selected={filter === 'account_issues'}
+        >
+          <OnlineStatusAccountOfflineIcon />
+          {accountLabel}
+        </TableFilterItem>
+      )}
     </TableFilterBar>
   )
 }
 
 const t = {
-  devicesOk: 'Devices OK',
+  devicesAndAccountsOk: 'Devices & accounts OK',
+  accountIssue: 'account issue',
+  accountIssues: 'account issues',
   deviceIssue: 'device issue',
   deviceIssues: 'device issues',
 }

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

@@ -1,3 +1,5 @@
+import classNames from 'classnames'
+
 import type {
   UseDevicesData,
   UseDevicesParams,
@@ -25,24 +27,61 @@ export function DeviceRow({
   device,
   onClick,
 }: DeviceRowProps): JSX.Element | null {
+  const opacityClass =
+    isAccountOffline(device) || isDeviceOffline(device)
+      ? 'seam-offline-fade'
+      : undefined
   return (
-    <TableRow key={device.device_id} onClick={onClick}>
-      <TableCell className='seam-image-cell'>
+    <TableRow onClick={onClick}>
+      <TableCell className={classNames('seam-image-cell', opacityClass)}>
         <DeviceImage device={device} />
       </TableCell>
       <TableCell className='seam-body-cell'>
-        <Title className='seam-truncated-text'>{device.properties.name}</Title>
+        <Title className={classNames('seam-truncated-text', opacityClass)}>
+          {device.properties.name}
+        </Title>
         <div className='seam-bottom'>
-          <span className='seam-device-model'>
+          <span className={classNames('seam-device-model', opacityClass)}>
             {device.properties.model.display_name}
           </span>
-          <div className='seam-device-statuses'>
-            <OnlineStatus device={device} />
-            <BatteryStatus device={device} />
-            <LockStatus device={device} />
-          </div>
+          <DeviceStatuses device={device} />
         </div>
       </TableCell>
     </TableRow>
   )
 }
+
+interface DeviceStatusesProps {
+  device: UseDevicesData[number]
+}
+
+function DeviceStatuses({ device }: DeviceStatusesProps): JSX.Element | null {
+  if (isAccountOffline(device) || isDeviceOffline(device)) {
+    return (
+      <div className='seam-device-statuses'>
+        <OnlineStatus device={device} />
+      </div>
+    )
+  }
+  return (
+    <div className='seam-device-statuses'>
+      <OnlineStatus device={device} />
+      <BatteryStatus device={device} />
+      <LockStatus device={device} />
+    </div>
+  )
+}
+
+const isAccountOffline = (device: UseDevicesData[number]): boolean => {
+  return (
+    device.errors.filter((error) => error.error_code === 'account_disconnected')
+      .length > 0
+  )
+}
+
+const isDeviceOffline = (device: UseDevicesData[number]): boolean => {
+  return (
+    device.errors.filter((error) => error.error_code === 'device_disconnected')
+      .length > 0
+  )
+}

package/src/lib/seam/components/DeviceTable/DeviceTable.element.ts

@@ -7,6 +7,7 @@ export const name = 'seam-device-table'
 export const props: ElementProps<DeviceTableProps> = {
   deviceIds: 'json',
   connectedAccountIds: 'json',
+  disableLockUnlock: 'boolean',
   deviceFilter: 'function',
   deviceComparator: 'function',
   onDeviceClick: 'function',

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

@@ -5,6 +5,7 @@ import { isLockDevice } from 'seamapi'
 import { compareByCreatedAtDesc } from 'lib/dates.js'
 import { DeviceDetails } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
 import {
+  type AccountFilter,
   type DeviceFilter,
   DeviceHealthBar,
 } from 'lib/seam/components/DeviceTable/DeviceHealthBar.js'
@@ -26,11 +27,11 @@ type Device = UseDevicesData[number]
 export interface DeviceTableProps {
   deviceIds?: string[]
   connectedAccountIds?: string[]
+  disableLockUnlock?: boolean
   deviceFilter?: (device: Device, searchInputValue: string) => boolean
   deviceComparator?: (deviceA: Device, deviceB: Device) => number
   onDeviceClick?: (deviceId: string) => void
   preventDefaultOnDeviceClick?: boolean
-  disableLockUnlock?: boolean
   onBack?: () => void
   className?: string
 }
@@ -47,9 +48,9 @@ const defaultDeviceFilter = (
 export function DeviceTable({
   deviceIds,
   connectedAccountIds,
+  disableLockUnlock = false,
   onDeviceClick = () => {},
   preventDefaultOnDeviceClick = false,
-  disableLockUnlock = false,
   onBack,
   deviceFilter = defaultDeviceFilter,
   deviceComparator = compareByCreatedAtDesc,
@@ -127,7 +128,9 @@ function Content(props: {
   onDeviceClick: (deviceId: string) => void
 }): JSX.Element {
   const { devices, onDeviceClick } = props
-  const [filter, setFilter] = useState<DeviceFilter | null>(null)
+  const [filter, setFilter] = useState<AccountFilter | DeviceFilter | null>(
+    null
+  )
 
   if (devices.length === 0) {
     return <EmptyPlaceholder>{t.noDevicesMessage}</EmptyPlaceholder>
@@ -138,8 +141,17 @@ function Content(props: {
       return true
     }
 
+    if (filter === 'account_issues') {
+      return (
+        device.errors.filter((error) => 'is_connected_account_error' in error)
+          .length > 0
+      )
+    }
+
     if (filter === 'device_issues') {
-      return device.errors.length > 0
+      return (
+        device.errors.filter((error) => 'is_device_error' in error).length > 0
+      )
     }
 
     return true

package/src/lib/ui/device/OnlineStatus.tsx

@@ -1,5 +1,6 @@
 import type { CommonDevice } from 'seamapi'
 
+import { OnlineStatusAccountOfflineIcon } from 'lib/icons/OnlineStatusAccountOffline.js'
 import { OnlineStatusDeviceOfflineIcon } from 'lib/icons/OnlineStatusDeviceOffline.js'
 import { OnlineStatusOnlineIcon } from 'lib/icons/OnlineStatusOnline.js'
 
@@ -8,20 +9,34 @@ interface OnlineStatusProps {
 }
 
 export function OnlineStatus(props: OnlineStatusProps): JSX.Element {
-  const {
-    device: {
-      properties: { online },
-    },
-  } = props
+  const { device } = props
 
+  const isAccountOffline =
+    device.errors.filter((error) => error.error_code === 'account_disconnected')
+      .length > 0
+
+  if (isAccountOffline) {
+    return <AccountOfflineContent />
+  }
+
+  return (
+    <div className='seam-online-status'>
+      {isAccountOffline && <OnlineStatusAccountOfflineIcon />}
+      <DeviceOnlineContent isOnline={device.properties.online} />
+    </div>
+  )
+}
+
+function AccountOfflineContent() {
   return (
     <div className='seam-online-status'>
-      <Content isOnline={online} />
+      <OnlineStatusAccountOfflineIcon />
+      <span className='seam-text-danger'>{t.accountOffline}</span>
     </div>
   )
 }
 
-function Content(props: { isOnline: boolean }): JSX.Element {
+function DeviceOnlineContent(props: { isOnline: boolean }): JSX.Element {
   const { isOnline } = props
   if (isOnline) {
     return (
@@ -42,5 +57,6 @@ function Content(props: { isOnline: boolean }): JSX.Element {
 
 const t = {
   online: 'Online',
+  accountOffline: 'Account Offline',
   deviceOffline: 'Device Offline',
 }

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.23.0'
+const seamapiReactVersion = '1.24.0'
 
 export default seamapiReactVersion

package/src/styles/_device-table.scss

@@ -9,6 +9,10 @@
     .seam-table-row {
       cursor: pointer;
 
+      .seam-offline-fade {
+        opacity: 0.4;
+      }
+
       .seam-image-cell {
         width: 64px;
         height: 64px;