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

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

@@ -29,6 +29,7 @@ import { TableTitle } from 'lib/ui/Table/TableTitle.js'
 import { SearchTextField } from 'lib/ui/TextField/SearchTextField.js'
 import { Caption } from 'lib/ui/typography/Caption.js'
 import { useToggle } from 'lib/ui/use-toggle.js'
+import { useDevice } from 'lib/index.js'
 
 export const NestedAccessCodeTable = withRequiredCommonProps(AccessCodeTable)
 
@@ -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/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} />