feat: Show access code errors and warnings in AccessCodeDetails

.storybook/seed-fake.js

@@ -85,8 +85,43 @@ export const seedFake = (db) => {
     common_code_key: null,
     type: 'ongoing',
     status: 'set',
-    errors: [],
-    warnings: [],
+    errors: [
+      {
+        error_code: 'account_disconnected',
+        is_connected_account_error: true,
+        message:
+          'Seam has lost connection to a connected account. This may happen if the third-party provider triggered an access token to be revoked (e.g., after a password change). The account owner needs to reconnect the connected account with a new connect webview.',
+        created_at: '2023-06-27T22:50:19.440Z',
+      },
+      {
+        error_code: 'device_disconnected',
+        is_device_error: true,
+        message: 'Device Disconnected, you may need to reconnect the device.',
+        created_at: '2023-06-27T22:50:19.440Z',
+      },
+      {
+        error_code: 'failed_to_set_on_device',
+        is_access_code_error: true,
+        message:
+          'An access code with the same pin already exists on the device.',
+        created_at: '2023-06-27T06:01:11.885Z',
+      },
+      {
+        error_code: 'duplicate_code_on_device',
+        is_access_code_error: true,
+        message:
+          'An access code with the same pin already exists on the device.',
+        created_at: '2023-06-27T06:01:11.914Z',
+      },
+    ],
+    warnings: [
+      {
+        warning_code: 'delay_in_setting_on_device',
+        message:
+          'There was an unusually long delay in programming the code onto the device. For time bound codes, this is sent when the code enters its active time. Note that this is a temporary warning and might be removed if the code is successfully set.',
+        created_at: '2023-06-27T06:01:11.885Z',
+      },
+    ],
     is_managed: true,
   })
 

package.json

@@ -110,7 +110,7 @@
     "@tanstack/react-query": "^4.28.0",
     "classnames": "^2.3.2",
     "luxon": "^3.3.0",
-    "seamapi": "^6.14.3",
+    "seamapi": "^6.15.1",
     "uuid": "^9.0.0"
   },
   "devDependencies": {

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

@@ -1,11 +1,17 @@
 import classNames from 'classnames'
 import { DateTime } from 'luxon'
 import { useState } from 'react'
-import type { AccessCode } from 'seamapi'
+import type {
+  AccessCode,
+  AccessCodeError,
+  ConnectedAccountError,
+  DeviceError,
+} from 'seamapi'
 
 import { useAccessCode } from 'lib/seam/access-codes/use-access-code.js'
 import { AccessCodeDevice } from 'lib/seam/components/AccessCodeDetails/AccessCodeDevice.js'
 import { DeviceDetails } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
+import { Alerts } from 'lib/ui/Alert/Alerts.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { useIsDateInPast } from 'lib/ui/use-is-date-in-past.js'
 
@@ -41,18 +47,37 @@ export function AccessCodeDetails({
     )
   }
 
+  const alerts = [
+    ...accessCode.errors.filter(errorFilter).map((error) => ({
+      variant: 'error' as const,
+      message: error.message,
+    })),
+    ...accessCode.warnings.map((warning) => ({
+      variant: 'warning' as const,
+      message: warning.message,
+    })),
+  ]
+
   return (
     <div className={classNames('seam-access-code-details', className)}>
       <ContentHeader title='Access code' onBack={onBack} />
       <div className='seam-summary'>
-        <div className='seam-top'>
+        <div
+          className={classNames(
+            'seam-top',
+            alerts.length > 0 && 'seam-top-has-alerts'
+          )}
+        >
           <span className='seam-label'>{t.accessCode}</span>
           <h5 className='seam-access-code-name'>{name}</h5>
           <div className='seam-code'>{accessCode.code}</div>
           <div className='seam-duration'>
             <Duration accessCode={accessCode} />
           </div>
         </div>
+
+        <Alerts alerts={alerts} className='seam-alerts-padded' />
+
         <AccessCodeDevice
           deviceId={accessCode.device_id}
           onSelectDevice={selectDevice}
@@ -157,6 +182,22 @@ function formatDate(date: string): string {
   })
 }
 
+const errorFilter = (
+  error: AccessCodeError | DeviceError | ConnectedAccountError
+): boolean => {
+  if ('is_access_code_error' in error && !error.is_access_code_error)
+    return true
+
+  if (
+    error.error_code === 'failed_to_set_on_device' ||
+    error.error_code === 'failed_to_remove_on_device'
+  ) {
+    return true
+  }
+
+  return false
+}
+
 const t = {
   accessCode: 'Access code',
   fallbackName: 'Code',

src/lib/seam/components/DeviceTable/DeviceHealthBar.stories.tsx

@@ -47,6 +47,7 @@ export const Content: Story = {
                 {
                   error_code: 'account_disconnected',
                   message: 'Device account has been disconnected.',
+                  is_connected_account_error: true,
                 },
               ],
               warnings: [
@@ -77,6 +78,7 @@ export const Content: Story = {
                 {
                   error_code: 'account_disconnected',
                   message: 'Device account has been disconnected.',
+                  is_connected_account_error: true,
                 },
               ],
               warnings: [

src/styles/_access-code-details.scss

@@ -10,6 +10,10 @@
       > .seam-top {
         padding: 24px 16px;
 
+        &.seam-top-has-alerts {
+          padding-bottom: 8px;
+        }
+
         > .seam-label {
           font-weight: 600;
           font-size: 14px;

src/styles/_alert.scss

@@ -13,6 +13,10 @@
     &.seam-alerts-space-top {
       margin-top: 16px;
     }
+
+    &.seam-alerts-padded {
+      padding: 0 16px 24px;
+    }
   }
 
   // Alert