@seamapi/react 1.22.0 → 1.24.0

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

@@ -13,12 +13,14 @@ import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
 import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { useToggle } from 'lib/ui/use-toggle.js'
+
 export function LockDeviceDetails(props: {
   device: LockDevice
+  disableLockUnlock: boolean
   onBack?: () => void
   className?: string
 }): JSX.Element | null {
-  const { device, onBack, className } = props
+  const { device, disableLockUnlock, onBack, className } = props
 
   const [accessCodesOpen, toggleAccessCodesOpen] = useToggle()
   const toggleLock = useToggleLock(device)
@@ -41,6 +43,7 @@ export function LockDeviceDetails(props: {
         className={className}
         deviceId={device.device_id}
         onBack={toggleAccessCodesOpen}
+        disableLockUnlock={disableLockUnlock}
       />
     )
   }
@@ -98,14 +101,16 @@ export function LockDeviceDetails(props: {
               <span className='seam-value'>{lockStatus}</span>
             </div>
             <div className='seam-right'>
-              <Button
-                size='small'
-                onClick={() => {
-                  toggleLock.mutate()
-                }}
-              >
-                {toggleLockLabel}
-              </Button>
+              {!disableLockUnlock && (
+                <Button
+                  size='small'
+                  onClick={() => {
+                    toggleLock.mutate()
+                  }}
+                >
+                  {toggleLockLabel}
+                </Button>
+              )}
             </div>
           </div>
           <AccessCodeLength

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,6 +27,7 @@ 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
@@ -46,6 +48,7 @@ const defaultDeviceFilter = (
 export function DeviceTable({
   deviceIds,
   connectedAccountIds,
+  disableLockUnlock = false,
   onDeviceClick = () => {},
   preventDefaultOnDeviceClick = false,
   onBack,
@@ -87,6 +90,7 @@ export function DeviceTable({
         onBack={() => {
           setSelectedDeviceId(null)
         }}
+        disableLockUnlock={disableLockUnlock}
       />
     )
   }
@@ -124,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>
@@ -135,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.22.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;