@seamapi/react 1.22.0 → 1.23.0

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

@@ -0,0 +1,68 @@
+import { CheckIcon } from 'lib/icons/Check.js'
+import { ExclamationCircleOutlineIcon } from 'lib/icons/ExclamationCircleOutline.js'
+import type { UseAccessCodesData } from 'lib/seam/access-codes/use-access-codes.js'
+import { TableFilterBar } from 'lib/ui/Table/TableFilterBar/TableFilterBar.js'
+import { TableFilterItem } from 'lib/ui/Table/TableFilterBar/TableFilterItem.js'
+
+export type AccessCodeFilter = 'access_code_issues'
+
+interface AccessCodeHealthBarProps {
+  accessCodes: Array<UseAccessCodesData[number]>
+  filter: AccessCodeFilter | null
+  onFilterSelect: (filter: AccessCodeFilter | null) => void
+}
+
+export function AccessCodeHealthBar({
+  accessCodes,
+  filter,
+  onFilterSelect,
+}: AccessCodeHealthBarProps): JSX.Element {
+  const codesWithIssues = accessCodes.filter(
+    ({ errors, warnings }) => errors.length > 0 || warnings.length > 0
+  )
+  const issueCount = codesWithIssues.length
+
+  const toggle = (target: AccessCodeFilter) => () => {
+    const newFilter = target === filter ? null : target
+    onFilterSelect(newFilter)
+  }
+
+  const isPlural = issueCount === 0 || issueCount > 1
+  const label = isPlural
+    ? `${issueCount} ${t.accessCodeIssues}`
+    : `${issueCount} ${t.accessCodeIssue}`
+
+  if (issueCount === 0) {
+    return (
+      <TableFilterBar filterCleared>
+        <TableFilterItem>
+          <CheckIcon />
+          {t.accessCodesOk}
+        </TableFilterItem>
+      </TableFilterBar>
+    )
+  }
+
+  return (
+    <TableFilterBar
+      filterCleared={filter == null}
+      onFilterClear={() => {
+        onFilterSelect(null)
+      }}
+    >
+      <TableFilterItem
+        onClick={toggle('access_code_issues')}
+        selected={filter === 'access_code_issues'}
+      >
+        <ExclamationCircleOutlineIcon />
+        {label}
+      </TableFilterItem>
+    </TableFilterBar>
+  )
+}
+
+const t = {
+  accessCodesOk: 'Access codes OK',
+  accessCodeIssue: 'access code issue',
+  accessCodeIssues: 'access code issues',
+}

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

@@ -5,11 +5,16 @@ import { compareByCreatedAtDesc } from 'lib/dates.js'
 import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
 import { CopyIcon } from 'lib/icons/Copy.js'
 import { ExclamationCircleOutlineIcon } from 'lib/icons/ExclamationCircleOutline.js'
+import { TriangleWarningOutlineIcon } from 'lib/icons/TriangleWarningOutline.js'
 import {
   useAccessCodes,
   type UseAccessCodesData,
 } from 'lib/seam/access-codes/use-access-codes.js'
 import { AccessCodeDetails } from 'lib/seam/components/AccessCodeDetails/AccessCodeDetails.js'
+import {
+  type AccessCodeFilter,
+  AccessCodeHealthBar,
+} from 'lib/seam/components/AccessCodeTable/AccessCodeHealthBar.js'
 import { CodeDetails } from 'lib/seam/components/AccessCodeTable/CodeDetails.js'
 import { copyToClipboard } from 'lib/ui/clipboard.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
@@ -37,6 +42,7 @@ export interface AccessCodeTableProps {
   ) => number
   onAccessCodeClick?: (accessCodeId: string) => void
   preventDefaultOnAccessCodeClick?: boolean
+  disableLockUnlock?: boolean
   onBack?: () => void
   className?: string
 }
@@ -49,13 +55,18 @@ const defaultAccessCodeFilter = (
 ): boolean => {
   const value = searchInputValue.trim()
   if (value === '') return true
-  return new RegExp(value, 'i').test(accessCode.name ?? '')
+  const searchRegex = new RegExp(value, 'i')
+  return (
+    searchRegex.test(accessCode?.name ?? '') ||
+    searchRegex.test(accessCode?.code ?? '')
+  )
 }
 
 export function AccessCodeTable({
   deviceId,
   onAccessCodeClick = () => {},
   preventDefaultOnAccessCodeClick = false,
+  disableLockUnlock = false,
   onBack,
   accessCodeFilter = defaultAccessCodeFilter,
   accessCodeComparator = compareByCreatedAtDesc,
@@ -100,6 +111,7 @@ export function AccessCodeTable({
         onBack={() => {
           setSelectedAccessCodeId(null)
         }}
+        disableLockUnlock={disableLockUnlock}
       />
     )
   }
@@ -132,6 +144,21 @@ function Content(props: {
   onAccessCodeClick: (accessCodeId: string) => void
 }): JSX.Element {
   const { accessCodes, onAccessCodeClick } = props
+  const [filter, setFilter] = useState<AccessCodeFilter | null>(null)
+
+  const filteredAccessCodes = useMemo(() => {
+    if (filter === null) {
+      return accessCodes
+    }
+
+    if (filter === 'access_code_issues') {
+      return accessCodes.filter((accessCode) => {
+        return accessCode.errors.length > 0 || accessCode.warnings.length > 0
+      })
+    }
+
+    return accessCodes
+  }, [accessCodes, filter])
 
   if (accessCodes.length === 0) {
     return <EmptyPlaceholder>{t.noAccessCodesMessage}</EmptyPlaceholder>
@@ -139,7 +166,12 @@ function Content(props: {
 
   return (
     <>
-      {accessCodes.map((accessCode) => (
+      <AccessCodeHealthBar
+        accessCodes={accessCodes}
+        filter={filter}
+        onFilterSelect={setFilter}
+      />
+      {filteredAccessCodes.map((accessCode) => (
         <AccessCodeRow
           key={accessCode.access_code_id}
           accessCode={accessCode}
@@ -158,14 +190,18 @@ function AccessCodeRow(props: {
 }): JSX.Element {
   const { onClick, accessCode } = props
 
-  const errorCount = accessCode.errors?.length ?? 0
+  const errorCount = accessCode.errors.length
+  const warningCount = accessCode.warnings.length
   const isPlural = errorCount === 0 || errorCount > 1
-  const issueIconTitle = isPlural
+  const errorIconTitle = isPlural
     ? `${errorCount} ${t.codeIssues}`
     : `${errorCount} ${t.codeIssue}`
+  const warningIconTitle = isPlural
+    ? `${warningCount} ${t.codeIssues}`
+    : `${warningCount} ${t.codeIssue}`
 
   return (
-    <TableRow key={accessCode.access_code_id} onClick={onClick}>
+    <TableRow onClick={onClick}>
       <TableCell className='seam-icon-cell'>
         <div>
           <AccessCodeKeyIcon />
@@ -177,10 +213,15 @@ function AccessCodeRow(props: {
       </TableCell>
       <TableCell className='seam-action-cell'>
         {errorCount > 0 && (
-          <div className='seam-code-issue-icon-wrap' title={issueIconTitle}>
+          <div className='seam-code-issue-icon-wrap' title={errorIconTitle}>
             <ExclamationCircleOutlineIcon />
           </div>
         )}
+        {errorCount === 0 && warningCount > 0 && (
+          <div className='seam-code-issue-icon-wrap' title={warningIconTitle}>
+            <TriangleWarningOutlineIcon />
+          </div>
+        )}
         <MoreActionsMenu
           menuProps={{
             backgroundProps: {

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

@@ -5,12 +5,14 @@ import { useDevice } from 'lib/seam/devices/use-device.js'
 
 export interface DeviceDetailsProps {
   deviceId: string
+  disableLockUnlock?: boolean
   onBack?: () => void
   className?: string
 }
 
 export function DeviceDetails({
   deviceId,
+  disableLockUnlock = false,
   onBack,
   className,
 }: DeviceDetailsProps): JSX.Element | null {
@@ -27,6 +29,7 @@ export function DeviceDetails({
       <LockDeviceDetails
         className={className}
         device={device}
+        disableLockUnlock={disableLockUnlock}
         onBack={onBack}
       />
     )

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

@@ -13,12 +13,14 @@ import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
 import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { useToggle } from 'lib/ui/use-toggle.js'
+
 export function LockDeviceDetails(props: {
   device: LockDevice
+  disableLockUnlock: boolean
   onBack?: () => void
   className?: string
 }): JSX.Element | null {
-  const { device, onBack, className } = props
+  const { device, disableLockUnlock, onBack, className } = props
 
   const [accessCodesOpen, toggleAccessCodesOpen] = useToggle()
   const toggleLock = useToggleLock(device)
@@ -41,6 +43,7 @@ export function LockDeviceDetails(props: {
         className={className}
         deviceId={device.device_id}
         onBack={toggleAccessCodesOpen}
+        disableLockUnlock={disableLockUnlock}
       />
     )
   }
@@ -98,14 +101,16 @@ export function LockDeviceDetails(props: {
               <span className='seam-value'>{lockStatus}</span>
             </div>
             <div className='seam-right'>
-              <Button
-                size='small'
-                onClick={() => {
-                  toggleLock.mutate()
-                }}
-              >
-                {toggleLockLabel}
-              </Button>
+              {!disableLockUnlock && (
+                <Button
+                  size='small'
+                  onClick={() => {
+                    toggleLock.mutate()
+                  }}
+                >
+                  {toggleLockLabel}
+                </Button>
+              )}
             </div>
           </div>
           <AccessCodeLength

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

@@ -30,6 +30,7 @@ export interface DeviceTableProps {
   deviceComparator?: (deviceA: Device, deviceB: Device) => number
   onDeviceClick?: (deviceId: string) => void
   preventDefaultOnDeviceClick?: boolean
+  disableLockUnlock?: boolean
   onBack?: () => void
   className?: string
 }
@@ -48,6 +49,7 @@ export function DeviceTable({
   connectedAccountIds,
   onDeviceClick = () => {},
   preventDefaultOnDeviceClick = false,
+  disableLockUnlock = false,
   onBack,
   deviceFilter = defaultDeviceFilter,
   deviceComparator = compareByCreatedAtDesc,
@@ -87,6 +89,7 @@ export function DeviceTable({
         onBack={() => {
           setSelectedDeviceId(null)
         }}
+        disableLockUnlock={disableLockUnlock}
       />
     )
   }

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.22.0'
+const seamapiReactVersion = '1.23.0'
 
 export default seamapiReactVersion