refactor submit errors

core/app/[locale]/(default)/(auth)/register/_actions/register-customer.ts

@@ -7,8 +7,6 @@ import { client } from '~/client';
 import { graphql, VariablesOf } from '~/client/graphql';
 import { parseRegisterCustomerFormData } from '~/components/form-fields/shared/parse-fields';
 
-import { createErrorsList } from '../../../account/(tabs)/_components/utils';
-
 const RegisterCustomerMutation = graphql(`
   mutation RegisterCustomer($input: RegisterCustomerInput!, $reCaptchaV2: ReCaptchaV2Input) {
     customer {
@@ -62,7 +60,7 @@ export const registerCustomer = async ({ formData, reCaptchaToken }: RegisterCus
   if (!isRegisterCustomerInput(parsedData)) {
     return {
       status: 'error',
-      error: t('Errors.inputError'),
+      errors: [t('Errors.inputError')],
     };
   }
 
@@ -86,7 +84,7 @@ export const registerCustomer = async ({ formData, reCaptchaToken }: RegisterCus
 
     return {
       status: 'error',
-      error: createErrorsList(result.errors),
+      errors: result.errors.map((error) => error.message),
     };
   } catch (error) {
     // eslint-disable-next-line no-console
@@ -95,13 +93,13 @@ export const registerCustomer = async ({ formData, reCaptchaToken }: RegisterCus
     if (error instanceof BigCommerceAPIError) {
       return {
         status: 'error',
-        error: t('Errors.apiError'),
+        errors: [t('Errors.apiError')],
       };
     }
 
     return {
       status: 'error',
-      error: t('Errors.error'),
+      errors: [t('Errors.error')],
     };
   }
 };

core/app/[locale]/(default)/(auth)/register/_components/register-customer-form.tsx

@@ -35,13 +35,14 @@ import { Button } from '~/components/ui/button';
 import { Field, Form, FormSubmit } from '~/components/ui/form';
 import { Message } from '~/components/ui/message';
 
+import { SubmitErrorsList } from '../../../account/(tabs)/_components/submit-errors-list';
 import { login } from '../_actions/login';
 import { registerCustomer } from '../_actions/register-customer';
 import { getRegisterCustomerQuery } from '../page-data';
 
 interface FormStatus {
   status: 'success' | 'error';
-  message: string;
+  messages: string[];
 }
 
 type CustomerFields = ExistingResultType<typeof getRegisterCustomerQuery>['customerFields'];
@@ -202,7 +203,7 @@ export const RegisterCustomerForm = ({
     if (formData.get('customer-password') !== formData.get('customer-confirmPassword')) {
       setFormStatus({
         status: 'error',
-        message: t('confirmPassword'),
+        messages: [t('confirmPassword')],
       });
 
       window.scrollTo({
@@ -230,7 +231,7 @@ export const RegisterCustomerForm = ({
     }
 
     if (submit.status === 'error') {
-      setFormStatus({ status: 'error', message: submit.error ?? '' });
+      setFormStatus({ status: 'error', messages: submit.errors ?? [''] });
     }
 
     window.scrollTo({
@@ -242,8 +243,8 @@ export const RegisterCustomerForm = ({
   return (
     <>
       {formStatus && (
-        <Message className="mb-8 whitespace-pre-line" variant={formStatus.status}>
-          <p>{formStatus.message}</p>
+        <Message className="mb-8" variant={formStatus.status}>
+          <SubmitErrorsList errors={formStatus.messages} />
         </Message>
       )}
       <Form action={onSubmit} onClick={preSubmitFieldsValidation} ref={form}>

core/app/[locale]/(default)/account/(tabs)/_components/submit-errors-list.tsx

@@ -0,0 +1,7 @@
+export const SubmitErrorsList = ({ errors }: { errors: string[] }) => (
+  <ul className={errors.length === 1 ? 'list-none' : 'ms-2 list-disc'}>
+    {errors.map((error) => (
+      <li key={error}>{error}</li>
+    ))}
+  </ul>
+);