fix(core): improve create account form

bigcommerce · Oct 14, 2024 · 3448a09 · 3448a09
1 parent 0e092d0
commit 3448a09
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 183 deletions.
diff --git a/.changeset/thick-sloths-lick.md b/.changeset/thick-sloths-lick.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+remove unnecessary fields from create account form
diff --git a/core/app/[locale]/(default)/(auth)/register/_actions/register-customer.ts b/core/app/[locale]/(default)/(auth)/register/_actions/register-customer.ts
@@ -43,7 +43,7 @@ interface RegisterCustomerForm {
 }
 
 const isRegisterCustomerInput = (data: unknown): data is RegisterCustomerInput => {
-  if (typeof data === 'object' && data !== null && 'email' in data && 'address' in data) {
+  if (typeof data === 'object' && data !== null && 'email' in data) {
     return true;
   }
 

diff --git a/core/app/[locale]/(default)/(auth)/register/_components/register-customer-form.tsx b/core/app/[locale]/(default)/(auth)/register/_components/register-customer-form.tsx
@@ -15,6 +15,7 @@ import {
   FieldNameToFieldId,
   FieldWrapper,
   MultilineText,
+  NAME_FORM_FIELD,
   NumbersOnly,
   Password,
   Picklist,
@@ -264,6 +265,26 @@ export const RegisterCustomerForm = ({
         </Message>
       )}
       <Form action={onSubmit} onClick={preSubmitFieldsValidation} ref={form}>
+        <div className="grid grid-cols-1 gap-y-3 lg:grid-cols-2 lg:gap-x-6">
+          {addressFields.map((field) => {
+            const fieldId = field.entityId;
+            const fieldName = createFieldName(field, 'customer');
+
+            if (field.__typename === 'TextFormField' && NAME_FORM_FIELD.includes(fieldId)) {
+              return (
+                <FieldWrapper fieldId={fieldId} key={fieldId}>
+                  <Text
+                    field={field}
+                    isValid={textInputValid[fieldId]}
+                    name={fieldName}
+                    onChange={handleTextInputValidation}
+                  />
+                </FieldWrapper>
+              );
+            }
+          })}
+        </div>
+
         <div className="mb-4 grid grid-cols-1 gap-y-3 lg:grid-cols-2 lg:gap-x-6">
           {customerFields
             .filter((field) => !CUSTOMER_FIELDS_TO_EXCLUDE.includes(field.entityId))
@@ -285,6 +306,18 @@ export const RegisterCustomerForm = ({
                     </FieldWrapper>
                   );
 
+                case 'PasswordFormField':
+                  return (
+                    <FieldWrapper fieldId={fieldId} key={fieldId}>
+                      <Password
+                        field={field}
+                        isValid={passwordValid[fieldId]}
+                        name={fieldName}
+                        onChange={handlePasswordValidation}
+                      />
+                    </FieldWrapper>
+                  );
+
                 case 'MultilineTextFormField': {
                   return (
                     <FieldWrapper fieldId={fieldId} key={fieldId}>
@@ -366,167 +399,10 @@ export const RegisterCustomerForm = ({
                   );
                 }
 
-                case 'PasswordFormField': {
-                  return (
-                    <FieldWrapper fieldId={fieldId} key={fieldId}>
-                      <Password
-                        field={field}
-                        isValid={passwordValid[fieldId]}
-                        name={fieldName}
-                        onChange={handlePasswordValidation}
-                      />
-                    </FieldWrapper>
-                  );
-                }
-
                 default:
                   return null;
               }
             })}
-        </div>
-        <div className="grid grid-cols-1 gap-y-3 lg:grid-cols-2 lg:gap-x-6">
-          {addressFields.map((field) => {
-            const fieldId = field.entityId;
-            const fieldName = createFieldName(field, 'address');
-
-            switch (field.__typename) {
-              case 'TextFormField': {
-                return (
-                  <FieldWrapper fieldId={fieldId} key={fieldId}>
-                    <Text
-                      field={field}
-                      isValid={textInputValid[fieldId]}
-                      name={fieldName}
-                      onChange={handleTextInputValidation}
-                    />
-                  </FieldWrapper>
-                );
-              }
-
-              case 'MultilineTextFormField': {
-                return (
-                  <FieldWrapper fieldId={fieldId} key={fieldId}>
-                    <MultilineText
-                      field={field}
-                      isValid={multiTextValid[fieldId]}
-                      name={fieldName}
-                      onChange={handleMultiTextValidation}
-                    />
-                  </FieldWrapper>
-                );
-              }
-
-              case 'NumberFormField': {
-                return (
-                  <FieldWrapper fieldId={fieldId} key={fieldId}>
-                    <NumbersOnly
-                      field={field}
-                      isValid={numbersInputValid[fieldId]}
-                      name={fieldName}
-                      onChange={handleNumbersInputValidation}
-                    />
-                  </FieldWrapper>
-                );
-              }
-
-              case 'DateFormField': {
-                return (
-                  <FieldWrapper fieldId={fieldId} key={fieldId}>
-                    <DateField
-                      field={field}
-                      isValid={datesValid[fieldId]}
-                      name={fieldName}
-                      onChange={handleDatesValidation}
-                      onValidate={setDatesValid}
-                    />
-                  </FieldWrapper>
-                );
-              }
-
-              case 'RadioButtonsFormField': {
-                return (
-                  <FieldWrapper fieldId={fieldId} key={fieldId}>
-                    <RadioButtons
-                      field={field}
-                      isValid={radioButtonsValid[fieldId]}
-                      name={fieldName}
-                      onChange={handleRadioButtonsChange}
-                    />
-                  </FieldWrapper>
-                );
-              }
-
-              case 'PicklistFormField': {
-                const isCountrySelector = fieldId === FieldNameToFieldId.countryCode;
-                const picklistOptions = isCountrySelector
-                  ? countries.map(({ name, code }) => ({ label: name, entityId: code }))
-                  : field.options;
-
-                return (
-                  <FieldWrapper fieldId={fieldId} key={fieldId}>
-                    <Picklist
-                      defaultValue={isCountrySelector ? defaultCountry.code : undefined}
-                      field={field}
-                      isValid={picklistValid[fieldId]}
-                      name={fieldName}
-                      onChange={isCountrySelector ? handleCountryChange : undefined}
-                      onValidate={setPicklistValid}
-                      options={picklistOptions}
-                    />
-                  </FieldWrapper>
-                );
-              }
-
-              case 'CheckboxesFormField': {
-                return (
-                  <FieldWrapper fieldId={fieldId} key={fieldId}>
-                    <Checkboxes
-                      field={field}
-                      isValid={checkboxesValid[fieldId]}
-                      name={fieldName}
-                      onValidate={setCheckboxesValid}
-                      options={field.options}
-                    />
-                  </FieldWrapper>
-                );
-              }
-
-              case 'PicklistOrTextFormField': {
-                return (
-                  <FieldWrapper fieldId={fieldId} key={fieldId}>
-                    <PicklistOrText
-                      defaultValue={
-                        fieldId === FieldNameToFieldId.stateOrProvince
-                          ? countryStates[0]?.name
-                          : undefined
-                      }
-                      field={field}
-                      name={fieldName}
-                      options={countryStates.map(({ name }) => {
-                        return { entityId: name, label: name };
-                      })}
-                    />
-                  </FieldWrapper>
-                );
-              }
-
-              case 'PasswordFormField': {
-                return (
-                  <FieldWrapper fieldId={fieldId} key={fieldId}>
-                    <Password
-                      field={field}
-                      isValid={passwordValid[fieldId]}
-                      name={fieldName}
-                      onChange={handlePasswordValidation}
-                    />
-                  </FieldWrapper>
-                );
-              }
-
-              default:
-                return null;
-            }
-          })}
           {reCaptchaSettings?.isEnabledOnStorefront && (
             <Field className="relative col-span-full max-w-full space-y-2 pb-7" name="ReCAPTCHA">
               <ReCaptcha

diff --git a/core/components/form-fields/shared/field-wrapper.tsx b/core/components/form-fields/shared/field-wrapper.tsx
@@ -2,20 +2,31 @@ import { PropsWithChildren } from 'react';
 
 import { FieldNameToFieldId } from '../utils';
 
-const LAYOUT_SINGLE_LINE_FIELDS = [
-  FieldNameToFieldId.email,
+const LAYOUT_HALF_OF_SINGLE_LINE_FIELDS = [
   FieldNameToFieldId.company,
   FieldNameToFieldId.phone,
 ];
 
-export const FieldWrapper = ({ children, fieldId }: { fieldId: number } & PropsWithChildren) => {
-  if (LAYOUT_SINGLE_LINE_FIELDS.includes(fieldId)) {
+const LAYOUT_SINGLE_LINE_FIELDS = [
+  FieldNameToFieldId.email,
+];
+
+export const FieldWrapper = ({ children, fieldId }: { fieldId: number } & PropsWithChildren) => {  
+  if (LAYOUT_HALF_OF_SINGLE_LINE_FIELDS.includes(fieldId)) {
     return (
       <div className="grid grid-cols-1 gap-y-6 lg:col-span-2 lg:grid-cols-2 lg:gap-x-6 lg:gap-y-2">
         {children}
       </div>
     );
   }
 
+  if (LAYOUT_SINGLE_LINE_FIELDS.includes(fieldId)) {
+    return (
+      <div className="grid grid-cols-1 lg:col-span-2">
+        {children}
+      </div>
+    );
+  }
+
   return children;
 };
diff --git a/core/components/form-fields/shared/parse-fields.ts b/core/components/form-fields/shared/parse-fields.ts
@@ -19,7 +19,6 @@ type FormFieldsType = VariablesOf<typeof FakeMutation>['input']['formFields'];
 
 interface ReturnedFormData {
   [k: string]: unknown;
-  address: Record<string, unknown>;
   formFields: Record<string, unknown>;
 }
 
@@ -225,24 +224,7 @@ export const parseRegisterCustomerFormData = (registerFormData: FormData): unkno
         });
       }
 
-      if (sections.includes('address')) {
-        parsedData.address[key] = value;
-      }
-
-      if (sections.some((section) => section.startsWith('custom_address'))) {
-        const fields = updateFormFields({
-          formFields: isFormFieldsType(parsedData.address.formFields)
-            ? parsedData.address.formFields
-            : null,
-          fieldType: sections[1] ?? '',
-          fieldEntityId: Number(key),
-          fieldValue: value,
-        });
-
-        parsedData.address = { ...parsedData.address, formFields: { ...fields } };
-      }
-
       return parsedData;
     },
-    { formFields: {}, address: {} },
+    { formFields: {} },
   );
diff --git a/core/components/form-fields/utils.ts b/core/components/form-fields/utils.ts
@@ -11,8 +11,8 @@ export enum FieldNameToFieldId {
   email = 1,
   password,
   confirmPassword,
-  firstName,
-  lastName,
+  firstName = 4,
+  lastName = 5,
   company,
   phone,
   address1,
@@ -47,6 +47,11 @@ export const BOTH_CUSTOMER_ADDRESS_FIELDS = [
   FieldNameToFieldId.phone,
 ];
 
+export const NAME_FORM_FIELD = [
+  FieldNameToFieldId.firstName,
+  FieldNameToFieldId.lastName,
+];
+
 export const createFieldName = (
   field: FragmentOf<typeof FormFieldsFragment>,
   fieldOrigin: 'customer' | 'address',