@seamapi/react 1.60.1 → 1.60.3

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

@@ -14,6 +14,7 @@ import { getValidationError } from 'lib/seam/error-handlers.js'
 import {
   AccessCodeForm,
   type AccessCodeFormSubmitData,
+  type ResponseErrors,
 } from 'lib/ui/AccessCodeForm/AccessCodeForm.js'
 
 export interface CreateAccessCodeFormProps extends CommonProps {
@@ -48,7 +49,7 @@ function Content({
 }: Omit<CreateAccessCodeFormProps, 'deviceId'> & {
   device: NonNullable<UseDeviceData>
 }): JSX.Element {
-  const { submit, isSubmitting, codeError } = useSubmitCreateAccessCode({
+  const { submit, isSubmitting, responseErrors } = useSubmitCreateAccessCode({
     onSuccess: () => {
       if (onBack != null) {
         onBack()
@@ -63,29 +64,23 @@ function Content({
       onBack={onBack}
       onSubmit={submit}
       isSubmitting={isSubmitting}
-      codeError={codeError}
+      responseErrors={responseErrors}
     />
   )
 }
 
 function useSubmitCreateAccessCode(params: { onSuccess: () => void }): {
-  codeError: string | null
   submit: (data: AccessCodeFormSubmitData) => void
   isSubmitting: boolean
+  responseErrors: ResponseErrors | null
 } {
   const { onSuccess } = params
   const { mutate, isLoading: isSubmitting } = useCreateAccessCode()
-  const [codeError, setCodeError] = useState<string | null>(null)
-
-  const handleError = (error: SeamError): void => {
-    const codeError = getValidationError({ error, property: 'code' })
-    if (codeError != null) {
-      setCodeError(codeError)
-    }
-  }
+  const { responseErrors, handleResponseError, resetResponseErrors } =
+    useResponseErrors()
 
   const submit = (data: AccessCodeFormSubmitData): void => {
-    setCodeError(null)
+    resetResponseErrors()
 
     const { name, code, type, device, startDate, endDate, timezone } = data
     if (name === '') {
@@ -107,7 +102,7 @@ function useSubmitCreateAccessCode(params: { onSuccess: () => void }): {
         },
         {
           onSuccess,
-          onError: handleError,
+          onError: handleResponseError,
         }
       )
 
@@ -122,10 +117,53 @@ function useSubmitCreateAccessCode(params: { onSuccess: () => void }): {
       },
       {
         onSuccess,
-        onError: handleError,
+        onError: handleResponseError,
       }
     )
   }
 
-  return { submit, isSubmitting, codeError }
+  return { submit, isSubmitting, responseErrors }
+}
+
+export function useResponseErrors(): {
+  responseErrors: ResponseErrors | null
+  handleResponseError: (error: SeamError) => void
+  resetResponseErrors: () => void
+} {
+  const [responseErrors, setResponseErrors] = useState<Record<
+    string,
+    string | undefined
+  > | null>(null)
+
+  const handleResponseError = (error: SeamError): void => {
+    const code = getValidationError({ error, property: 'code' })
+    const name = getValidationError({ error, property: 'name' })
+
+    if (code != null || name != null) {
+      setResponseErrors({
+        code,
+        name,
+      })
+
+      return
+    }
+
+    setResponseErrors({
+      unknown: t.genericResponseError,
+    })
+  }
+
+  const resetResponseErrors = (): void => {
+    setResponseErrors(null)
+  }
+
+  return {
+    responseErrors,
+    handleResponseError,
+    resetResponseErrors,
+  }
+}
+
+const t = {
+  genericResponseError: 'The code could not be saved. Please try again.',
 }

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

@@ -1,6 +1,3 @@
-import { useState } from 'react'
-import type { SeamError } from 'seamapi'
-
 import { useComponentTelemetry } from 'lib/telemetry/index.js'
 
 import { createIsoDate } from 'lib/dates.js'
@@ -13,11 +10,12 @@ import {
   type CommonProps,
   withRequiredCommonProps,
 } from 'lib/seam/components/common-props.js'
+import { useResponseErrors } from 'lib/seam/components/CreateAccessCodeForm/CreateAccessCodeForm.js'
 import { useDevice } from 'lib/seam/devices/use-device.js'
-import { getValidationError } from 'lib/seam/error-handlers.js'
 import {
   AccessCodeForm,
   type AccessCodeFormSubmitData,
+  type ResponseErrors,
 } from 'lib/ui/AccessCodeForm/AccessCodeForm.js'
 
 export interface EditAccessCodeFormProps extends CommonProps {
@@ -58,7 +56,7 @@ function Content({
     device_id: accessCode.device_id,
   })
 
-  const { submit, isSubmitting, codeError } = useSubmitEditAccessCode(
+  const { submit, isSubmitting, responseErrors } = useSubmitEditAccessCode(
     accessCode,
     onBack
   )
@@ -75,7 +73,7 @@ function Content({
       device={device}
       onSubmit={submit}
       isSubmitting={isSubmitting}
-      codeError={codeError}
+      responseErrors={responseErrors}
     />
   )
 }
@@ -86,20 +84,14 @@ function useSubmitEditAccessCode(
 ): {
   submit: (data: AccessCodeFormSubmitData) => void
   isSubmitting: boolean
-  codeError: string | null
+  responseErrors: ResponseErrors | null
 } {
   const { mutate, isLoading: isSubmitting } = useUpdateAccessCode()
-  const [codeError, setCodeError] = useState<string | null>(null)
-
-  const handleError = (error: SeamError): void => {
-    const codeError = getValidationError({ error, property: 'code' })
-    if (codeError != null) {
-      setCodeError(codeError)
-    }
-  }
+  const { responseErrors, handleResponseError, resetResponseErrors } =
+    useResponseErrors()
 
   const submit = (data: AccessCodeFormSubmitData): void => {
-    setCodeError(null)
+    resetResponseErrors()
 
     const { name, code, type, device, startDate, endDate, timezone } = data
     if (name === '') {
@@ -123,7 +115,7 @@ function useSubmitEditAccessCode(
         },
         {
           onSuccess,
-          onError: handleError,
+          onError: handleResponseError,
         }
       )
 
@@ -139,10 +131,10 @@ function useSubmitEditAccessCode(
       },
       {
         onSuccess,
-        onError: handleError,
+        onError: handleResponseError,
       }
     )
   }
 
-  return { submit, isSubmitting, codeError }
+  return { submit, isSubmitting, responseErrors }
 }

package/src/lib/ui/AccessCodeForm/AccessCodeForm.tsx

@@ -33,12 +33,17 @@ export interface AccessCodeFormSubmitData {
   timezone: string
 }
 
+export interface ResponseErrors {
+  unknown?: string | undefined
+  code?: string | undefined
+}
+
 export interface AccessCodeFormProps {
   accessCode?: NonNullable<UseAccessCodeData>
   device: NonNullable<UseDeviceData>
   isSubmitting: boolean
   onSubmit: (data: AccessCodeFormSubmitData) => void
-  codeError: string | null
+  responseErrors: ResponseErrors | null
   onBack: (() => void) | undefined
   className: string | undefined
 }
@@ -60,7 +65,7 @@ function Content({
   device,
   onSubmit,
   isSubmitting,
-  codeError,
+  responseErrors,
 }: Omit<AccessCodeFormProps, 'className'>): JSX.Element {
   const [type, setType] = useState<AccessCode['type']>(
     accessCode?.type ?? 'ongoing'
@@ -171,7 +176,7 @@ function Content({
     )
   }
 
-  const hasCodeError = errors.code != null || codeError != null
+  const hasCodeError = errors.code != null || responseErrors?.code != null
 
   const codeLengthRequirement = getCodeLengthRequirement(device)
 
@@ -217,7 +222,7 @@ function Content({
               size='large'
               clearable
               hasError={hasCodeError}
-              helperText={codeError ?? errors.code?.message}
+              helperText={responseErrors?.code ?? errors.code?.message}
               inputProps={{
                 ...register('code', {
                   required: t.codeRequiredError,
@@ -281,6 +286,9 @@ function Content({
               )}
             </>
           </FormField>
+          {responseErrors?.unknown != null && (
+            <div className='seam-unknown-error'>{responseErrors?.unknown}</div>
+          )}
           <div className='seam-actions'>
             <Button onClick={onBack}>{t.cancel}</Button>
             <Button

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.60.1'
+const seamapiReactVersion = '1.60.3'
 
 export default seamapiReactVersion

package/src/styles/_access-code-form.scss

@@ -72,6 +72,13 @@
       }
     }
 
+    .seam-unknown-error {
+      text-align: center;
+      margin-bottom: 16px;
+      line-height: 134%;
+      color: colors.$status-red;
+    }
+
     .seam-actions {
       display: flex;
       gap: 8px;