fix: offline lock device missing details

Author: mikewuu

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

@@ -62,11 +62,7 @@ export function LockDeviceDetails({
   const lockStatus = device.properties.locked ? t.locked : t.unlocked
   const toggleLockLabel = device.properties.locked ? t.unlock : t.lock
 
-  const accessCodeCount = accessCodes?.length
-
-  if (accessCodes == null) {
-    return null
-  }
+  const accessCodeCount = accessCodes?.length ?? 0
 
   if (accessCodesOpen) {
     return (
@@ -152,13 +148,15 @@ export function LockDeviceDetails({
           </div>
           <div className='seam-box'>
             <div
-              className='seam-content seam-access-codes'
-              onClick={toggleAccessCodesOpen}
+              className={classNames('seam-content seam-access-codes', {
+                disabled: accessCodes == null,
+              })}
+              onClick={accessCodes != null ? toggleAccessCodesOpen : undefined}
             >
               <span className='seam-value'>
-                {accessCodeCount} {t.accessCodes}
+                {accessCodes != null ? accessCodeCount : '–'} {t.accessCodes}
               </span>
-              <ChevronRightIcon />
+              {accessCodes != null && <ChevronRightIcon />}
             </div>
           </div>
 

src/styles/_device-details.scss

@@ -25,7 +25,12 @@
             display: flex;
             align-items: center;
             justify-content: space-between;
-            cursor: pointer;
+              cursor: pointer;
+
+            &.disabled {
+              opacity: 0.6;
+              cursor: not-allowed;
+            }
 
             &:hover {
               background: colors.$item-hover-bg;