fix: Show offline lock devices

Author: razor-x

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

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

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

@@ -101,8 +101,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>{' '}
-                <BatteryStatus device={device} />
+                {device.properties.online && (
+                  <>
+                    <span className='seam-label'>{t.power}:</span>{' '}
+                    <BatteryStatus device={device} />
+                  </>
+                )}
                 <DeviceModel device={device} />
               </div>
             </div>
@@ -120,27 +124,28 @@ export function LockDeviceDetails({
             <ChevronRightIcon />
           </div>
         </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()
-                    }}
-                  >
-                    {toggleLockLabel}
-                  </Button>
-                )}
+          {device.properties.locked != null && 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()
+                      }}
+                    >
+                      {toggleLockLabel}
+                    </Button>
+                  )}
+              </div>
             </div>
-          </div>
+          )}
           <AccessCodeLength
             supportedCodeLengths={
               device.properties?.supported_code_lengths ?? []

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

@@ -1,4 +1,13 @@
 import type { CommonDevice, LockDevice } from 'seamapi'
 
-export const isLockDevice = (device: CommonDevice): device is LockDevice =>
-  'locked' in device.properties
+export const isLockDevice = (device: CommonDevice): device is LockDevice => {
+  const d = device as any
+  return (
+    (d.properties.online_access_codes_enabled as boolean) ||
+    (d.properties.offline_access_codes_enabled as boolean) ||
+    'can_remotely_lock' in d ||
+    'can_remotely_unlock' in d ||
+    'can_program_online_access_code' in d ||
+    'can_program_offline_access_code' in d
+  )
+}

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} />