feat(AccessCodeForm): Show confirmation message after creating or updating an access code (#517)

Co-authored-by: Evan Sosenko <[email protected]>
Co-authored-by: Seam Bot <[email protected]>

Author: 3 people

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

@@ -24,6 +24,7 @@ import { NestedEditAccessCodeForm } from 'lib/seam/components/EditAccessCodeForm
 import { IconButton } from 'lib/ui/IconButton.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { LoadingToast } from 'lib/ui/LoadingToast/LoadingToast.js'
+import { Snackbar } from 'lib/ui/Snackbar/Snackbar.js'
 import { EmptyPlaceholder } from 'lib/ui/Table/EmptyPlaceholder.js'
 import { TableBody } from 'lib/ui/Table/TableBody.js'
 import { TableHeader } from 'lib/ui/Table/TableHeader.js'
@@ -130,6 +131,13 @@ export function AccessCodeTable({
     [setSelectedEditAccessCodeId]
   )
 
+  const [accessCodeResult, setAccessCodeResult] = useState<
+    'created' | 'updated' | null
+  >(null)
+
+  const accessCodeResultMessage =
+    accessCodeResult === 'created' ? t.accesCodeCreated : t.accesCodeUpdated
+
   if (selectedEditAccessCodeId != null) {
     return (
       <NestedEditAccessCodeForm
@@ -141,27 +149,41 @@ export function AccessCodeTable({
         onBack={() => {
           setSelectedEditAccessCodeId(null)
         }}
+        onSuccess={() => {
+          setAccessCodeResult('updated')
+        }}
         className={className}
       />
     )
   }
 
   if (selectedViewAccessCodeId != null) {
     return (
-      <NestedAccessCodeDetails
-        accessCodeId={selectedViewAccessCodeId}
-        onEdit={() => {
-          setSelectedEditAccessCodeId(selectedViewAccessCodeId)
-        }}
-        disableLockUnlock={disableLockUnlock}
-        disableCreateAccessCode={disableCreateAccessCode}
-        disableEditAccessCode={disableEditAccessCode}
-        disableDeleteAccessCode={disableDeleteAccessCode}
-        onBack={() => {
-          setSelectedViewAccessCodeId(null)
-        }}
-        className={className}
-      />
+      <>
+        <Snackbar
+          variant='success'
+          message={accessCodeResultMessage}
+          visible={accessCodeResult != null}
+          autoDismiss
+          onClose={() => {
+            setAccessCodeResult(null)
+          }}
+        />
+        <NestedAccessCodeDetails
+          accessCodeId={selectedViewAccessCodeId}
+          onEdit={() => {
+            setSelectedEditAccessCodeId(selectedViewAccessCodeId)
+          }}
+          disableLockUnlock={disableLockUnlock}
+          disableCreateAccessCode={disableCreateAccessCode}
+          disableEditAccessCode={disableEditAccessCode}
+          disableDeleteAccessCode={disableDeleteAccessCode}
+          onBack={() => {
+            setSelectedViewAccessCodeId(null)
+          }}
+          className={className}
+        />
+      </>
     )
   }
 
@@ -175,6 +197,9 @@ export function AccessCodeTable({
         disableDeleteAccessCode={disableDeleteAccessCode}
         onBack={toggleAddAccessCodeForm}
         className={className}
+        onSuccess={() => {
+          setAccessCodeResult('created')
+        }}
       />
     )
   }
@@ -184,52 +209,63 @@ export function AccessCodeTable({
   }
 
   return (
-    <div className={classNames('seam-table', className)}>
-      <ContentHeader onBack={onBack} />
-      <TableHeader>
-        <div className='seam-left'>
-          {title != null ? (
-            <TableTitle>
-              {heading ?? title ?? t.accessCodes}{' '}
-              <Caption>({filteredAccessCodes.length})</Caption>
-            </TableTitle>
-          ) : (
-            <div className='seam-fragment' />
-          )}
-          {!disableCreateAccessCode && (
-            <IconButton
-              onClick={toggleAddAccessCodeForm}
-              className='seam-add-button'
-            >
-              <AddIcon />
-            </IconButton>
+    <>
+      <Snackbar
+        variant='success'
+        message={accessCodeResultMessage}
+        visible={accessCodeResult != null}
+        autoDismiss
+        onClose={() => {
+          setAccessCodeResult(null)
+        }}
+      />
+      <div className={classNames('seam-table', className)}>
+        <ContentHeader onBack={onBack} />
+        <TableHeader>
+          <div className='seam-left'>
+            {title != null ? (
+              <TableTitle>
+                {heading ?? title ?? t.accessCodes}{' '}
+                <Caption>({filteredAccessCodes.length})</Caption>
+              </TableTitle>
+            ) : (
+              <div className='seam-fragment' />
+            )}
+            {!disableCreateAccessCode && (
+              <IconButton
+                onClick={toggleAddAccessCodeForm}
+                className='seam-add-button'
+              >
+                <AddIcon />
+              </IconButton>
+            )}
+          </div>
+          <div className='seam-table-header-loading-wrap'>
+            <LoadingToast
+              isLoading={isInitialLoading}
+              label={t.loading}
+              top={-20}
+            />
+          </div>
+          {!disableSearch && (
+            <SearchTextField
+              value={searchInputValue}
+              onChange={setSearchInputValue}
+              disabled={(accessCodes?.length ?? 0) === 0}
+            />
           )}
-        </div>
-        <div className='seam-table-header-loading-wrap'>
-          <LoadingToast
-            isLoading={isInitialLoading}
-            label={t.loading}
-            top={-20}
+        </TableHeader>
+        <TableBody>
+          <Content
+            accessCodes={filteredAccessCodes}
+            onAccessCodeClick={handleAccessCodeClick}
+            onAccessCodeEdit={handleAccessCodeEdit}
+            disableEditAccessCode={disableEditAccessCode}
+            disableDeleteAccessCode={disableDeleteAccessCode}
           />
-        </div>
-        {!disableSearch && (
-          <SearchTextField
-            value={searchInputValue}
-            onChange={setSearchInputValue}
-            disabled={(accessCodes?.length ?? 0) === 0}
-          />
-        )}
-      </TableHeader>
-      <TableBody>
-        <Content
-          accessCodes={filteredAccessCodes}
-          onAccessCodeClick={handleAccessCodeClick}
-          onAccessCodeEdit={handleAccessCodeEdit}
-          disableEditAccessCode={disableEditAccessCode}
-          disableDeleteAccessCode={disableDeleteAccessCode}
-        />
-      </TableBody>
-    </div>
+        </TableBody>
+      </div>
+    </>
   )
 }
 
@@ -296,4 +332,6 @@ const t = {
   accessCodes: 'Access Codes',
   noAccessCodesMessage: 'Sorry, no access codes were found',
   loading: 'Loading access codes',
+  accesCodeUpdated: 'Access code updated',
+  accesCodeCreated: 'Access code created',
 }

src/lib/seam/components/CreateAccessCodeForm/CreateAccessCodeForm.element.ts

@@ -5,6 +5,7 @@ export const name = 'seam-create-access-code-form'
 
 export const props: ElementProps<CreateAccessCodeFormProps> = {
   deviceId: 'string',
+  onSuccess: 'object',
 }
 
 export { CreateAccessCodeForm as Component } from './CreateAccessCodeForm.js'

src/lib/seam/components/CreateAccessCodeForm/CreateAccessCodeForm.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import type { SeamError } from 'seamapi'
+import type { AccessCode, SeamError } from 'seamapi'
 
 import { useComponentTelemetry } from 'lib/telemetry/index.js'
 
@@ -18,6 +18,7 @@ import {
 
 export interface CreateAccessCodeFormProps extends CommonProps {
   deviceId: string
+  onSuccess?: (accessCodeId: string) => void
 }
 
 export const NestedCreateAccessCodeForm =
@@ -27,6 +28,7 @@ export function CreateAccessCodeForm({
   className,
   onBack,
   deviceId,
+  onSuccess,
 }: CreateAccessCodeFormProps): JSX.Element | null {
   useComponentTelemetry('CreateAccessCodeForm')
 
@@ -38,18 +40,30 @@ export function CreateAccessCodeForm({
     return null
   }
 
-  return <Content device={device} className={className} onBack={onBack} />
+  return (
+    <Content
+      device={device}
+      className={className}
+      onBack={onBack}
+      onSuccess={onSuccess}
+    />
+  )
 }
 
 function Content({
   device,
   className,
   onBack,
+  onSuccess,
 }: Omit<CreateAccessCodeFormProps, 'deviceId'> & {
   device: NonNullable<UseDeviceData>
 }): JSX.Element {
   const { submit, isSubmitting, responseErrors } = useSubmitCreateAccessCode({
-    onSuccess: () => {
+    onSuccess: (accessCode: AccessCode) => {
+      if (onSuccess != null) {
+        onSuccess(accessCode.access_code_id)
+      }
+
       if (onBack != null) {
         onBack()
       }
@@ -68,7 +82,9 @@ function Content({
   )
 }
 
-function useSubmitCreateAccessCode(params: { onSuccess: () => void }): {
+function useSubmitCreateAccessCode(params: {
+  onSuccess: (accessCode: AccessCode) => void
+}): {
   submit: (data: AccessCodeFormSubmitData) => void
   isSubmitting: boolean
   responseErrors: ResponseErrors | null

src/lib/seam/components/EditAccessCodeForm/EditAccessCodeForm.element.ts

@@ -5,6 +5,7 @@ export const name = 'seam-edit-access-code-form'
 
 export const props: ElementProps<EditAccessCodeFormProps> = {
   accessCodeId: 'string',
+  onSuccess: 'object',
 }
 
 export { EditAccessCodeForm as Component } from './EditAccessCodeForm.js'

src/lib/seam/components/EditAccessCodeForm/EditAccessCodeForm.tsx

@@ -19,6 +19,7 @@ import {
 
 export interface EditAccessCodeFormProps extends CommonProps {
   accessCodeId: string
+  onSuccess?: (accessCodeId: string) => void
 }
 
 export const NestedEditAccessCodeForm =
@@ -28,6 +29,7 @@ export function EditAccessCodeForm({
   accessCodeId,
   onBack,
   className,
+  onSuccess,
 }: EditAccessCodeFormProps): JSX.Element | null {
   useComponentTelemetry('EditAccessCodeForm')
 
@@ -40,14 +42,20 @@ export function EditAccessCodeForm({
   }
 
   return (
-    <Content accessCode={accessCode} className={className} onBack={onBack} />
+    <Content
+      accessCode={accessCode}
+      className={className}
+      onBack={onBack}
+      onSuccess={onSuccess}
+    />
   )
 }
 
 function Content({
   className,
   onBack,
   accessCode,
+  onSuccess,
 }: Omit<EditAccessCodeFormProps, 'accessCodeId'> & {
   accessCode: NonNullable<UseAccessCodeData>
 }): JSX.Element | null {
@@ -57,7 +65,15 @@ function Content({
 
   const { submit, isSubmitting, responseErrors } = useSubmitEditAccessCode(
     accessCode,
-    onBack
+    () => {
+      if (onSuccess != null) {
+        onSuccess(accessCode.access_code_id)
+      }
+
+      if (onBack != null) {
+        onBack()
+      }
+    }
   )
 
   if (device == null) {