From 7fa96525255225572b6f3f4ac8c3a4f3e28523e4 Mon Sep 17 00:00:00 2001 From: bc-yevhenii-buliuk Date: Mon, 14 Oct 2024 15:17:36 +0300 Subject: [PATCH] fix(core): improve create account form --- .changeset/thick-sloths-lick.md | 5 + .../register/_actions/register-customer.ts | 2 +- .../_components/register-customer-form.tsx | 189 +++--------------- .../form-fields/shared/field-wrapper.tsx | 19 +- .../form-fields/shared/parse-fields.ts | 20 +- core/components/form-fields/utils.ts | 9 +- 6 files changed, 61 insertions(+), 183 deletions(-) create mode 100644 .changeset/thick-sloths-lick.md diff --git a/.changeset/thick-sloths-lick.md b/.changeset/thick-sloths-lick.md new file mode 100644 index 0000000000..2545af0834 --- /dev/null +++ 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 index ac496e11e2..9207237435 100644 --- 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 index b0fff75e1e..ab8744bffc 100644 --- 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,25 @@ export const RegisterCustomerForm = ({ )}
+
+ {addressFields.map((field) => { + const fieldId = field.entityId; + const fieldName = createFieldName(field, 'customer'); + + if (field.__typename === 'TextFormField' && NAME_FORM_FIELD.includes(fieldId)) { + return ( + + + + ); + } + })} +
{customerFields .filter((field) => !CUSTOMER_FIELDS_TO_EXCLUDE.includes(field.entityId)) @@ -285,6 +305,18 @@ export const RegisterCustomerForm = ({ ); + case 'PasswordFormField': + return ( + + + + ); + case 'MultilineTextFormField': { return ( @@ -366,167 +398,10 @@ export const RegisterCustomerForm = ({ ); } - case 'PasswordFormField': { - return ( - - - - ); - } - default: return null; } })} -
-
- {addressFields.map((field) => { - const fieldId = field.entityId; - const fieldName = createFieldName(field, 'address'); - - switch (field.__typename) { - case 'TextFormField': { - return ( - - - - ); - } - - case 'MultilineTextFormField': { - return ( - - - - ); - } - - case 'NumberFormField': { - return ( - - - - ); - } - - case 'DateFormField': { - return ( - - - - ); - } - - case 'RadioButtonsFormField': { - return ( - - - - ); - } - - case 'PicklistFormField': { - const isCountrySelector = fieldId === FieldNameToFieldId.countryCode; - const picklistOptions = isCountrySelector - ? countries.map(({ name, code }) => ({ label: name, entityId: code })) - : field.options; - - return ( - - - - ); - } - - case 'CheckboxesFormField': { - return ( - - - - ); - } - - case 'PicklistOrTextFormField': { - return ( - - { - return { entityId: name, label: name }; - })} - /> - - ); - } - - case 'PasswordFormField': { - return ( - - - - ); - } - - default: - return null; - } - })} {reCaptchaSettings?.isEnabledOnStorefront && ( { - 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 (
{children} @@ -17,5 +20,13 @@ export const FieldWrapper = ({ children, fieldId }: { fieldId: number } & PropsW ); } + if (LAYOUT_SINGLE_LINE_FIELDS.includes(fieldId)) { + return ( +
+ {children} +
+ ); + } + return children; }; diff --git a/core/components/form-fields/shared/parse-fields.ts b/core/components/form-fields/shared/parse-fields.ts index 5e8c84a0a7..bd3434ddba 100644 --- 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['input']['formFields']; interface ReturnedFormData { [k: string]: unknown; - address: Record; formFields: Record; } @@ -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 index e86468e636..f4e7101515 100644 --- 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, fieldOrigin: 'customer' | 'address',