@seamapi/react 3.0.2 → 3.1.0

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

@@ -1,7 +1,7 @@
 import type { AccessCode } from '@seamapi/types/connect'
 import classNames from 'classnames'
 import { DateTime } from 'luxon'
-import { useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 import { CopyIcon } from 'lib/icons/Copy.js'
 import { useAccessCode } from 'lib/seam/access-codes/use-access-code.js'
@@ -12,6 +12,7 @@ import {
   withRequiredCommonProps,
 } from 'lib/seam/components/common-props.js'
 import { NestedDeviceDetails } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
+import { NestedEditAccessCodeForm } from 'lib/seam/components/EditAccessCodeForm/EditAccessCodeForm.js'
 import {
   accessCodeErrorFilter,
   accessCodeWarningFilter,
@@ -22,11 +23,15 @@ import { Button } from 'lib/ui/Button.js'
 import { copyToClipboard } from 'lib/ui/clipboard.js'
 import { IconButton } from 'lib/ui/IconButton.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import { Snackbar } from 'lib/ui/Snackbar/Snackbar.js'
 import { useIsDateInPast } from 'lib/ui/use-is-date-in-past.js'
 
 export interface AccessCodeDetailsProps extends CommonProps {
   accessCodeId: string
-  onEdit: () => void
+  onEdit?: () => void
+  preventDefaultOnEdit?: boolean
+  onDelete?: () => void
+  preventDefaultOnDelete?: boolean
 }
 
 export const NestedAccessCodeDetails =
@@ -35,6 +40,9 @@ export const NestedAccessCodeDetails =
 export function AccessCodeDetails({
   accessCodeId,
   onEdit,
+  preventDefaultOnEdit = false,
+  onDelete,
+  preventDefaultOnDelete = false,
   errorFilter = () => true,
   warningFilter = () => true,
   disableCreateAccessCode = false,
@@ -52,12 +60,72 @@ export function AccessCodeDetails({
   const { accessCode } = useAccessCode({ access_code_id: accessCodeId })
   const [selectedDeviceId, selectDevice] = useState<string | null>(null)
   const { mutate: deleteCode, isPending: isDeleting } = useDeleteAccessCode()
+  const [editFormOpen, setEditFormOpen] = useState<boolean>(false)
+
+  const [accessCodeResult, setAccessCodeResult] = useState<
+    'updated' | 'deleted' | null
+  >(null)
+  const [snackbarMessage, setSnackbarMessage] = useState<string>('')
+
+  // Circumvent Snackbar bug that causes it to switch to default message
+  // while the dismiss animation is playing
+  useEffect(() => {
+    if (accessCodeResult !== null) {
+      setSnackbarMessage(accessCodeResultToMessage(accessCodeResult))
+    }
+  }, [accessCodeResult])
+
+  const handleEdit = useCallback((): void => {
+    onEdit?.()
+    if (preventDefaultOnEdit) return
+    setEditFormOpen(true)
+  }, [onEdit, preventDefaultOnEdit, setEditFormOpen])
+
+  const handleDelete = useCallback((): void => {
+    onDelete?.()
+    if (preventDefaultOnDelete) return
+    if (accessCode == null) return
+    deleteCode(
+      { access_code_id: accessCode.access_code_id },
+      {
+        onSuccess: () => {
+          setAccessCodeResult('deleted')
+        },
+      }
+    )
+  }, [accessCode, deleteCode, onDelete, preventDefaultOnDelete])
 
   if (accessCode == null) {
     return null
   }
 
   const name = accessCode.name ?? t.fallbackName
+  const isAccessCodeBeingRemoved = accessCode.status === 'removing'
+
+  if (editFormOpen) {
+    return (
+      <NestedEditAccessCodeForm
+        accessCodeId={accessCode.access_code_id}
+        errorFilter={errorFilter}
+        warningFilter={warningFilter}
+        disableLockUnlock={disableLockUnlock}
+        disableCreateAccessCode={disableCreateAccessCode}
+        disableEditAccessCode={disableEditAccessCode}
+        disableDeleteAccessCode={disableDeleteAccessCode}
+        disableResourceIds={disableResourceIds}
+        disableConnectedAccountInformation={disableConnectedAccountInformation}
+        disableClimateSettingSchedules={disableClimateSettingSchedules}
+        onBack={() => {
+          setEditFormOpen(false)
+        }}
+        onSuccess={() => {
+          setAccessCodeResult('updated')
+          setEditFormOpen(false)
+        }}
+        className={className}
+      />
+    )
+  }
 
   if (selectedDeviceId != null) {
     return (
@@ -96,92 +164,114 @@ export function AccessCodeDetails({
         variant: 'warning' as const,
         message: warning.message,
       })),
+
+    ...(isAccessCodeBeingRemoved
+      ? [
+          {
+            variant: 'warning' as const,
+            message: t.warningRemoving,
+          },
+        ]
+      : []),
   ]
 
   return (
-    <div className={classNames('seam-access-code-details', className)}>
-      <ContentHeader title='Access code' onBack={onBack} />
-      <div className='seam-summary'>
-        <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'>
-            <span>{accessCode.code}</span>
-            <IconButton
-              onClick={() => {
-                void copyToClipboard(accessCode.code ?? '')
-              }}
-            >
-              <CopyIcon />
-            </IconButton>
-          </div>
-          <div className='seam-duration'>
-            <Duration accessCode={accessCode} />
-          </div>
-        </div>
-        <Alerts alerts={alerts} className='seam-alerts-padded' />
-        <AccessCodeDevice
-          deviceId={accessCode.device_id}
-          disableLockUnlock={disableLockUnlock}
-          onSelectDevice={selectDevice}
-        />
-      </div>
-      {(!disableEditAccessCode || !disableDeleteAccessCode) && (
-        <div className='seam-actions'>
-          {!disableEditAccessCode && (
-            <Button size='small' onClick={onEdit} disabled={isDeleting}>
-              {t.editCode}
-            </Button>
-          )}
-          {!disableDeleteAccessCode && (
-            <Button
-              size='small'
-              onClick={() => {
-                deleteCode({ access_code_id: accessCode.access_code_id })
-              }}
-              disabled={isDeleting}
-            >
-              {t.deleteCode}
-            </Button>
-          )}
-        </div>
-      )}
-      <div className='seam-details'>
-        {!disableResourceIds && (
-          <div className='seam-row'>
-            <div className='seam-heading'>{t.id}:</div>
-            <div className='seam-content seam-code-id'>
-              <span>{accessCode.access_code_id}</span>
+    <>
+      <Snackbar
+        variant='success'
+        message={snackbarMessage}
+        visible={accessCodeResult != null}
+        autoDismiss
+        onClose={() => {
+          setAccessCodeResult(null)
+        }}
+      />
+      <div className={classNames('seam-access-code-details', className)}>
+        <ContentHeader title='Access code' onBack={onBack} />
+        <div className='seam-summary'>
+          <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'>
+              <span>{accessCode.code}</span>
               <IconButton
                 onClick={() => {
-                  void copyToClipboard(accessCode.access_code_id)
+                  void copyToClipboard(accessCode.code ?? '')
                 }}
               >
                 <CopyIcon />
               </IconButton>
             </div>
+            <div className='seam-duration'>
+              <Duration accessCode={accessCode} />
+            </div>
+          </div>
+          <Alerts alerts={alerts} className='seam-alerts-padded' />
+          <AccessCodeDevice
+            deviceId={accessCode.device_id}
+            disableLockUnlock={disableLockUnlock}
+            onSelectDevice={selectDevice}
+          />
+        </div>
+        {(!disableEditAccessCode || !disableDeleteAccessCode) && (
+          <div className='seam-actions'>
+            {!disableEditAccessCode && (
+              <Button
+                size='small'
+                onClick={handleEdit}
+                disabled={isAccessCodeBeingRemoved || isDeleting}
+              >
+                {t.editCode}
+              </Button>
+            )}
+            {!disableDeleteAccessCode && (
+              <Button
+                size='small'
+                onClick={handleDelete}
+                disabled={isAccessCodeBeingRemoved || isDeleting}
+              >
+                {t.deleteCode}
+              </Button>
+            )}
           </div>
         )}
-        <div className='seam-row'>
-          <div className='seam-heading'>{t.created}:</div>
-          <div className='seam-content'>
-            {formatDate(accessCode.created_at)}
+        <div className='seam-details'>
+          {!disableResourceIds && (
+            <div className='seam-row'>
+              <div className='seam-heading'>{t.id}:</div>
+              <div className='seam-content seam-code-id'>
+                <span>{accessCode.access_code_id}</span>
+                <IconButton
+                  onClick={() => {
+                    void copyToClipboard(accessCode.access_code_id)
+                  }}
+                >
+                  <CopyIcon />
+                </IconButton>
+              </div>
+            </div>
+          )}
+          <div className='seam-row'>
+            <div className='seam-heading'>{t.created}:</div>
+            <div className='seam-content'>
+              {formatDate(accessCode.created_at)}
+            </div>
           </div>
-        </div>
 
-        <div className='seam-row seam-schedule'>
-          <div className='seam-heading'>{t.timing}:</div>
-          <div className='seam-content'>
-            <ScheduleInfo accessCode={accessCode} />
+          <div className='seam-row seam-schedule'>
+            <div className='seam-heading'>{t.timing}:</div>
+            <div className='seam-content'>
+              <ScheduleInfo accessCode={accessCode} />
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </>
   )
 }
 
@@ -266,6 +356,11 @@ const formatDate = (date: string): string =>
     year: 'numeric',
   })
 
+const accessCodeResultToMessage = (result: 'updated' | 'deleted'): string => {
+  if (result === 'deleted') return t.accessCodeDeleted
+  return t.accessCodeUpdated
+}
+
 const t = {
   accessCode: 'Access code',
   fallbackName: 'Code',
@@ -282,4 +377,7 @@ const t = {
   at: 'at',
   editCode: 'Edit code',
   deleteCode: 'Delete code',
+  warningRemoving: 'This access code is currently being removed.',
+  accessCodeUpdated: 'Access code updated',
+  accessCodeDeleted: 'Access code is being removed',
 }

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

@@ -11,54 +11,75 @@ import { useToggle } from 'lib/ui/use-toggle.js'
 export interface AccessCodeMenuProps {
   accessCode: AccessCode
   onEdit: () => void
+  onDeleteSuccess: () => void
   onViewDetails: () => void
   disableEditAccessCode: boolean
   disableDeleteAccessCode: boolean
 }
 
 export function AccessCodeMenu(props: AccessCodeMenuProps): JSX.Element {
+  const [deleteConfirmationVisible, toggleDeleteConfirmation] = useToggle()
+
   return (
     <MoreActionsMenu
       menuProps={{
         backgroundProps: {
           className: 'seam-table-action-menu',
         },
+        onClose: () => {
+          if (deleteConfirmationVisible) {
+            toggleDeleteConfirmation()
+          }
+        },
       }}
     >
-      <Content {...props} />
+      <Content
+        {...props}
+        deleteConfirmationVisible={deleteConfirmationVisible}
+        toggleDeleteConfirmation={toggleDeleteConfirmation}
+      />
     </MoreActionsMenu>
   )
 }
 
+interface ContentProps extends AccessCodeMenuProps {
+  deleteConfirmationVisible: boolean
+  toggleDeleteConfirmation: () => void
+}
+
 function Content({
   accessCode,
   onViewDetails,
   disableEditAccessCode,
   disableDeleteAccessCode,
   onEdit,
-}: AccessCodeMenuProps): JSX.Element {
-  const [deleteConfirmationVisible, toggleDeleteConfirmation] = useToggle()
-
+  onDeleteSuccess,
+  deleteConfirmationVisible,
+  toggleDeleteConfirmation,
+}: ContentProps): JSX.Element {
   const deleteAccessCode = useDeleteAccessCode()
+  const isAccessCodeBeingRemoved = accessCode.status === 'removing'
 
   if (deleteConfirmationVisible) {
     return (
       <div className='seam-delete-confirmation'>
         <span>{t.deleteCodeConfirmation}</span>
         <div className='seam-actions'>
-          <Button
-            onClick={toggleDeleteConfirmation}
-            disabled={deleteAccessCode.isPending}
-          >
+          <Button disabled={deleteAccessCode.isPending}>
             {t.cancelDelete}
           </Button>
           <Button
             variant='solid'
             disabled={deleteAccessCode.isPending}
             onClick={() => {
-              deleteAccessCode.mutate({
-                access_code_id: accessCode.access_code_id,
-              })
+              deleteAccessCode.mutate(
+                {
+                  access_code_id: accessCode.access_code_id,
+                },
+                {
+                  onSuccess: onDeleteSuccess,
+                }
+              )
             }}
           >
             {t.confirmDelete}
@@ -84,10 +105,10 @@ function Content({
       </MenuItem>
       <div className='seam-divider' />
       <MenuItem onClick={onViewDetails}>{t.viewCodeDetails}</MenuItem>
-      {!disableEditAccessCode && (
+      {!disableEditAccessCode && !isAccessCodeBeingRemoved && (
         <MenuItem onClick={onEdit}>{t.editCode}</MenuItem>
       )}
-      {!disableDeleteAccessCode && (
+      {!disableDeleteAccessCode && !isAccessCodeBeingRemoved && (
         <>
           <div className='seam-divider' />
           <MenuItem

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

@@ -1,4 +1,5 @@
 import type { AccessCode } from '@seamapi/types/connect'
+import classNames from 'classnames'
 
 import { ExclamationCircleOutlineIcon } from 'lib/icons/ExclamationCircleOutline.js'
 import { TriangleWarningOutlineIcon } from 'lib/icons/TriangleWarningOutline.js'
@@ -13,6 +14,7 @@ export interface AccessCodeRowProps {
   accessCode: AccessCode
   onClick: () => void
   onEdit: () => void
+  onDeleteSuccess: () => void
   disableEditAccessCode: boolean
   disableDeleteAccessCode: boolean
 }
@@ -21,25 +23,37 @@ export function AccessCodeRow({
   onClick,
   accessCode,
   onEdit,
+  onDeleteSuccess,
   disableEditAccessCode,
   disableDeleteAccessCode,
 }: AccessCodeRowProps): JSX.Element {
+  const isAccessCodeBeingRemoved = accessCode.status === 'removing'
+
   const errorCount = accessCode.errors.length
   const warningCount = accessCode.warnings.length
-  const isPlural = errorCount === 0 || errorCount > 1
-  const errorIconTitle = isPlural
-    ? `${errorCount} ${t.codeIssues}`
-    : `${errorCount} ${t.codeIssue}`
-  const warningIconTitle = isPlural
-    ? `${warningCount} ${t.codeIssues}`
-    : `${warningCount} ${t.codeIssue}`
+  const errorIconTitle =
+    errorCount === 0 || errorCount > 1
+      ? `${errorCount} ${t.codeIssues}`
+      : `${errorCount} ${t.codeIssue}`
+  const warningIconTitle =
+    warningCount === 0 || warningCount > 1
+      ? `${warningCount} ${t.codeIssues}`
+      : `${warningCount} ${t.codeIssue}`
 
   return (
     <TableRow onClick={onClick}>
-      <TableCell className='seam-icon-cell'>
+      <TableCell
+        className={classNames('seam-icon-cell', {
+          'seam-grayed-out': isAccessCodeBeingRemoved,
+        })}
+      >
         <AccessCodeMainIcon accessCode={accessCode} />
       </TableCell>
-      <TableCell className='seam-name-cell'>
+      <TableCell
+        className={classNames('seam-name-cell', {
+          'seam-grayed-out': isAccessCodeBeingRemoved,
+        })}
+      >
         <Title className='seam-truncated-text'>{accessCode.name}</Title>
         <CodeDetails accessCode={accessCode} />
       </TableCell>
@@ -63,6 +77,7 @@ export function AccessCodeRow({
         <AccessCodeMenu
           accessCode={accessCode}
           onEdit={onEdit}
+          onDeleteSuccess={onDeleteSuccess}
           onViewDetails={onClick}
           disableDeleteAccessCode={disableDeleteAccessCode}
           disableEditAccessCode={disableEditAccessCode}

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

@@ -1,6 +1,6 @@
 import type { AccessCode } from '@seamapi/types/connect'
 import classNames from 'classnames'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { compareByCreatedAtDesc } from 'lib/dates.js'
 import { AddIcon } from 'lib/icons/Add.js'
@@ -48,20 +48,6 @@ export interface AccessCodeTableProps extends CommonProps {
   heading?: string | null
 }
 
-const defaultAccessCodeFilter = (
-  accessCode: AccessCode,
-  searchInputValue: string
-): boolean => {
-  const value = searchInputValue.trim().toLowerCase()
-  if (value === '') return true
-  const name = accessCode.name ?? ''
-  const code = accessCode.code ?? ''
-  return (
-    name.trim().toLowerCase().includes(value) ||
-    code.trim().toLowerCase().includes(value)
-  )
-}
-
 export function AccessCodeTable({
   deviceId,
   disableSearch = false,
@@ -127,11 +113,21 @@ export function AccessCodeTable({
   )
 
   const [accessCodeResult, setAccessCodeResult] = useState<
-    'created' | 'updated' | null
+    'created' | 'updated' | 'deleted' | null
   >(null)
+  const [snackbarMessage, setSnackbarMessage] = useState<string>('')
 
-  const accessCodeResultMessage =
-    accessCodeResult === 'created' ? t.accesCodeCreated : t.accesCodeUpdated
+  const handleAccessCodeDeleteSuccess = useCallback((): void => {
+    setAccessCodeResult('deleted')
+  }, [setAccessCodeResult])
+
+  // Circumvent Snackbar bug that causes it to switch to default message
+  // while the dismiss animation is playing
+  useEffect(() => {
+    if (accessCodeResult !== null) {
+      setSnackbarMessage(accessCodeResultToMessage(accessCodeResult))
+    }
+  }, [accessCodeResult])
 
   if (selectedEditAccessCodeId != null) {
     return (
@@ -159,38 +155,22 @@ export function AccessCodeTable({
 
   if (selectedViewAccessCodeId != null) {
     return (
-      <>
-        <Snackbar
-          variant='success'
-          message={accessCodeResultMessage}
-          visible={accessCodeResult != null}
-          autoDismiss
-          onClose={() => {
-            setAccessCodeResult(null)
-          }}
-        />
-        <NestedAccessCodeDetails
-          accessCodeId={selectedViewAccessCodeId}
-          onEdit={() => {
-            setSelectedEditAccessCodeId(selectedViewAccessCodeId)
-          }}
-          errorFilter={errorFilter}
-          warningFilter={warningFilter}
-          disableLockUnlock={disableLockUnlock}
-          disableCreateAccessCode={disableCreateAccessCode}
-          disableEditAccessCode={disableEditAccessCode}
-          disableDeleteAccessCode={disableDeleteAccessCode}
-          disableResourceIds={disableResourceIds}
-          disableConnectedAccountInformation={
-            disableConnectedAccountInformation
-          }
-          disableClimateSettingSchedules={disableClimateSettingSchedules}
-          onBack={() => {
-            setSelectedViewAccessCodeId(null)
-          }}
-          className={className}
-        />
-      </>
+      <NestedAccessCodeDetails
+        accessCodeId={selectedViewAccessCodeId}
+        errorFilter={errorFilter}
+        warningFilter={warningFilter}
+        disableLockUnlock={disableLockUnlock}
+        disableCreateAccessCode={disableCreateAccessCode}
+        disableEditAccessCode={disableEditAccessCode}
+        disableDeleteAccessCode={disableDeleteAccessCode}
+        disableResourceIds={disableResourceIds}
+        disableConnectedAccountInformation={disableConnectedAccountInformation}
+        disableClimateSettingSchedules={disableClimateSettingSchedules}
+        onBack={() => {
+          setSelectedViewAccessCodeId(null)
+        }}
+        className={className}
+      />
     )
   }
 
@@ -220,7 +200,7 @@ export function AccessCodeTable({
     <>
       <Snackbar
         variant='success'
-        message={accessCodeResultMessage}
+        message={snackbarMessage}
         visible={accessCodeResult != null}
         autoDismiss
         onClose={() => {
@@ -267,6 +247,7 @@ export function AccessCodeTable({
             accessCodes={filteredAccessCodes}
             onAccessCodeClick={handleAccessCodeClick}
             onAccessCodeEdit={handleAccessCodeEdit}
+            onAccessCodeDeleteSuccess={handleAccessCodeDeleteSuccess}
             errorFilter={errorFilter}
             warningFilter={warningFilter}
             disableEditAccessCode={disableEditAccessCode}
@@ -295,6 +276,7 @@ function Content(props: {
   accessCodes: AccessCode[]
   onAccessCodeClick: (accessCodeId: string) => void
   onAccessCodeEdit: (accessCodeId: string) => void
+  onAccessCodeDeleteSuccess: (accessCodeId: string) => void
   errorFilter: (error: AccessCode['errors'][number]) => boolean
   warningFilter: (warning: AccessCode['warnings'][number]) => boolean
   disableEditAccessCode: boolean
@@ -304,6 +286,7 @@ function Content(props: {
     accessCodes,
     onAccessCodeClick,
     onAccessCodeEdit,
+    onAccessCodeDeleteSuccess,
     errorFilter,
     warningFilter,
     disableEditAccessCode,
@@ -350,18 +333,44 @@ function Content(props: {
           onEdit={() => {
             onAccessCodeEdit(accessCode.access_code_id)
           }}
+          onDeleteSuccess={() => {
+            onAccessCodeDeleteSuccess(accessCode.access_code_id)
+          }}
         />
       ))}
     </>
   )
 }
 
+const defaultAccessCodeFilter = (
+  accessCode: AccessCode,
+  searchInputValue: string
+): boolean => {
+  const value = searchInputValue.trim().toLowerCase()
+  if (value === '') return true
+  const name = accessCode.name ?? ''
+  const code = accessCode.code ?? ''
+  return (
+    name.trim().toLowerCase().includes(value) ||
+    code.trim().toLowerCase().includes(value)
+  )
+}
+
+const accessCodeResultToMessage = (
+  result: 'created' | 'updated' | 'deleted'
+): string => {
+  if (result === 'created') return t.accessCodeCreated
+  if (result === 'deleted') return t.accessCodeDeleted
+  return t.accessCodeUpdated
+}
+
 const t = {
   accessCodes: 'Access Codes',
   noAccessCodesMessage: 'Sorry, no access codes were found',
   loading: 'Loading access codes',
-  accesCodeUpdated: 'Access code updated',
-  accesCodeCreated: 'Access code created',
+  accessCodeUpdated: 'Access code updated',
+  accessCodeCreated: 'Access code created',
+  accessCodeDeleted: 'Access code is being removed',
   tryAgain: 'Try again',
   fallbackErrorMessage: 'Access codes could not be loaded',
 }