feat: support generic lock devices (#669)

* expand isLockDevice to check more properties

* conditionally render UI based on availability: online, device property, access code type, etc.

* add test assertion

* ci: Format code

---------

Co-authored-by: Seam Bot <[email protected]>

Author: mikewuu

src/lib/seam/components/AccessCodeDetails/AccessCodeDetails.tsx

@@ -217,7 +217,7 @@ export function AccessCodeDetails({
         </div>
         {(!disableEditAccessCode || !disableDeleteAccessCode) && (
           <div className='seam-actions'>
-            {!disableEditAccessCode && (
+            {!disableEditAccessCode && !accessCode.is_offline_access_code && (
               <Button
                 size='small'
                 onClick={handleEdit}
@@ -226,7 +226,7 @@ export function AccessCodeDetails({
                 {t.editCode}
               </Button>
             )}
-            {!disableDeleteAccessCode && (
+            {!disableDeleteAccessCode && !accessCode.is_offline_access_code && (
               <Button
                 size='small'
                 onClick={handleDelete}

src/lib/seam/components/AccessCodeDetails/AccessCodeDevice.tsx

@@ -68,7 +68,7 @@ function Content(props: {
           {t.deviceDetails}
         </TextButton>
       </div>
-      {!disableLockUnlock && (
+      {!disableLockUnlock && device.properties.online && (
         <Button
           onClick={() => {
             toggleLock.mutate(device)

src/lib/seam/components/AccessCodeTable/AccessCodeTable.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { compareByCreatedAtDesc } from 'lib/dates.js'
 import { AddIcon } from 'lib/icons/Add.js'
+import { useDevice } from 'lib/index.js'
 import { useAccessCodes } from 'lib/seam/access-codes/use-access-codes.js'
 import { NestedAccessCodeDetails } from 'lib/seam/components/AccessCodeDetails/AccessCodeDetails.js'
 import {
@@ -73,6 +74,10 @@ export function AccessCodeTable({
     device_id: deviceId,
   })
 
+  const { device } = useDevice({
+    device_id: deviceId,
+  })
+
   const [selectedViewAccessCodeId, setSelectedViewAccessCodeId] = useState<
     string | null
   >(null)
@@ -128,6 +133,10 @@ export function AccessCodeTable({
     }
   }, [accessCodeResult])
 
+  if (device == null) {
+    return <></>
+  }
+
   if (selectedEditAccessCodeId != null) {
     return (
       <NestedEditAccessCodeForm
@@ -214,14 +223,16 @@ export function AccessCodeTable({
             ) : (
               <div className='seam-fragment' />
             )}
-            {!disableCreateAccessCode && (
-              <IconButton
-                onClick={toggleAddAccessCodeForm}
-                className='seam-add-button'
-              >
-                <AddIcon />
-              </IconButton>
-            )}
+            {!disableCreateAccessCode &&
+              (device.properties.online_access_codes_enabled === true ||
+                device.can_program_online_access_codes === true) && (
+                <IconButton
+                  onClick={toggleAddAccessCodeForm}
+                  className='seam-add-button'
+                >
+                  <AddIcon />
+                </IconButton>
+              )}
           </div>
           <div className='seam-table-header-loading-wrap'>
             <LoadingToast

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

@@ -99,8 +99,12 @@ export function LockDeviceDetails({
               <div className='seam-properties'>
                 <span className='seam-label'>{t.status}:</span>{' '}
                 <OnlineStatus device={device} />
-                <span className='seam-label'>{t.power}:</span>{' '}
-                <BatteryStatusIndicator device={device} />
+                {device.properties.online && (
+                  <>
+                    <span className='seam-label'>{t.power}:</span>{' '}
+                    <BatteryStatusIndicator device={device} />
+                  </>
+                )}
                 <DeviceModel device={device} />
               </div>
             </div>
@@ -120,25 +124,28 @@ export function LockDeviceDetails({
         </div>
 
         <div className='seam-box'>
-          <div className='seam-content seam-lock-status'>
-            <div>
-              <span className='seam-label'>{t.lockStatus}</span>
-              <span className='seam-value'>{lockStatus}</span>
-            </div>
-            <div className='seam-right'>
-              {!disableLockUnlock &&
-                device.capabilities_supported.includes('lock') && (
-                  <Button
-                    size='small'
-                    onClick={() => {
-                      toggleLock.mutate(device)
-                    }}
-                  >
-                    {toggleLockLabel}
-                  </Button>
-                )}
+          {device.properties.locked && device.properties.online && (
+            <div className='seam-content seam-lock-status'>
+              <div>
+                <span className='seam-label'>{t.lockStatus}</span>
+                <span className='seam-value'>{lockStatus}</span>
+              </div>
+              <div className='seam-right'>
+                {!disableLockUnlock &&
+                  device.capabilities_supported.includes('lock') && (
+                    <Button
+                      size='small'
+                      onClick={() => {
+                        toggleLock.mutate(device)
+                      }}
+                    >
+                      {toggleLockLabel}
+                    </Button>
+                  )}
+              </div>
             </div>
-          </div>
+          )}
+
           <AccessCodeLength
             supportedCodeLengths={
               device.properties?.supported_code_lengths ?? []

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

@@ -5,7 +5,34 @@ import { render, screen } from 'fixtures/react.js'
 
 import { DeviceTable } from './DeviceTable.js'
 
-test<ApiTestContext>('DeviceTable', async (ctx) => {
+test<ApiTestContext>('DeviceTable renders devices', async (ctx) => {
   render(<DeviceTable />, ctx)
   await screen.findByText('Fake August Lock 1')
 })
+
+test<ApiTestContext>('DeviceTable renders generic lock device', async (ctx) => {
+  const existingDevice = ctx.database.devices[0]
+
+  ctx.database.addDevice({
+    device_id: 'august_generic_lock_device',
+    device_type: 'august_lock',
+    name: 'Generic August Device',
+    display_name: 'Generic August Device',
+    connected_account_id: existingDevice?.connected_account_id,
+    can_remotely_unlock: false,
+    can_remotely_lock: false,
+    can_program_online_access_codes: true,
+    properties: {
+      online: false,
+      manufacturer: 'august',
+      name: 'Generic August Device',
+    },
+    workspace_id: existingDevice?.workspace_id ?? '',
+    errors: [],
+    warnings: [],
+    custom_metadata: {},
+  })
+
+  render(<DeviceTable />, ctx)
+  await screen.findByText('Generic August Device')
+})

src/lib/seam/locks/lock-device.ts

@@ -5,5 +5,14 @@ export type LockDevice = Omit<Device, 'properties'> & {
     NonNullable<Required<Pick<Device['properties'], 'locked'>>>
 }
 
-export const isLockDevice = (device: Device): device is LockDevice =>
-  'locked' in device.properties
+export const isLockDevice = (device: Device): device is LockDevice => {
+  return (
+    'locked' in device.properties ||
+    'can_remotely_lock' in device ||
+    'can_remotely_unlock' in device ||
+    'can_program_online_access_code' in device ||
+    'can_program_offline_access_code' in device ||
+    device.properties.online_access_codes_enabled === true ||
+    device.properties.offline_access_codes_enabled === true
+  )
+}

src/lib/ui/device/LockStatus.tsx

@@ -19,6 +19,10 @@ export function LockStatus(props: LockStatusProps): JSX.Element | null {
     },
   } = props
 
+  if (locked === null) {
+    return null
+  }
+
   return (
     <div className='seam-lock-status'>
       <Content isLocked={locked} />

test/fixtures/api.ts

@@ -2,12 +2,18 @@ import {
   createFake as createFakeDevicedb,
   type Fake as FakeDevicedb,
 } from '@seamapi/fake-devicedb'
-import { createFake, type Fake, type Seed } from '@seamapi/fake-seam-connect'
+import {
+  createFake,
+  type Database,
+  type Fake,
+  type Seed,
+} from '@seamapi/fake-seam-connect'
 import { beforeEach } from 'vitest'
 
 export interface ApiTestContext {
   endpoint: string
   seed: Seed
+  database: Database
 }
 
 beforeEach<ApiTestContext>(async (ctx) => {
@@ -22,6 +28,7 @@ beforeEach<ApiTestContext>(async (ctx) => {
 
   ctx.endpoint = endpoint
   ctx.seed = seed
+  ctx.database = fake.database
 
   return () => {
     fake.server?.close()