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..c46221d52f 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,10 +15,10 @@ import { FieldNameToFieldId, FieldWrapper, MultilineText, + NAME_FORM_FIELD, NumbersOnly, Password, Picklist, - PicklistOrText, RadioButtons, Text, } from '~/components/form-fields'; @@ -46,19 +46,10 @@ interface FormStatus { type CustomerFields = ExistingResultType['customerFields']; type AddressFields = ExistingResultType['addressFields']; -type Countries = ExistingResultType['countries']; -type CountryCode = Countries[number]['code']; -type CountryStates = Countries[number]['statesOrProvinces']; interface RegisterCustomerProps { addressFields: AddressFields; - countries: Countries; customerFields: CustomerFields; - defaultCountry: { - entityId: number; - code: CountryCode; - states: CountryStates; - }; reCaptchaSettings?: { isEnabledOnStorefront: boolean; siteKey: string; @@ -89,9 +80,7 @@ const SubmitButton = ({ messages }: SumbitMessages) => { export const RegisterCustomerForm = ({ addressFields, - countries, customerFields, - defaultCountry, reCaptchaSettings, }: RegisterCustomerProps) => { const form = useRef(null); @@ -104,7 +93,6 @@ export const RegisterCustomerForm = ({ }); const [numbersInputValid, setNumbersInputValid] = useState>({}); const [datesValid, setDatesValid] = useState>({}); - const [countryStates, setCountryStates] = useState(defaultCountry.states); const [radioButtonsValid, setRadioButtonsValid] = useState>({}); const [picklistValid, setPicklistValid] = useState>({}); const [checkboxesValid, setCheckboxesValid] = useState>({}); @@ -178,11 +166,6 @@ export const RegisterCustomerForm = ({ } }; - const handleCountryChange = (value: string) => { - const states = countries.find(({ code }) => code === value)?.statesOrProvinces; - - setCountryStates(states ?? []); - }; const handleRadioButtonsChange = createRadioButtonsValidationHandler( setRadioButtonsValid, radioButtonsValid, @@ -264,6 +247,27 @@ 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 ( + + + + ); + } + + return null; + })} +
{customerFields .filter((field) => !CUSTOMER_FIELDS_TO_EXCLUDE.includes(field.entityId)) @@ -285,6 +289,18 @@ export const RegisterCustomerForm = ({ ); + case 'PasswordFormField': + return ( + + + + ); + case 'MultilineTextFormField': { return ( @@ -366,167 +382,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 && ( name === defaultCountry) || {}; + const { addressFields, customerFields, reCaptchaSettings } = registerCustomerData; return (

{t('heading')}

diff --git a/core/components/form-fields/shared/field-wrapper.tsx b/core/components/form-fields/shared/field-wrapper.tsx index cb85c47959..93e5b06ad3 100644 --- a/core/components/form-fields/shared/field-wrapper.tsx +++ b/core/components/form-fields/shared/field-wrapper.tsx @@ -2,14 +2,11 @@ import { PropsWithChildren } from 'react'; import { FieldNameToFieldId } from '../utils'; -const LAYOUT_SINGLE_LINE_FIELDS = [ - FieldNameToFieldId.email, - FieldNameToFieldId.company, - FieldNameToFieldId.phone, -]; +const LAYOUT_HALF_OF_SINGLE_LINE_FIELDS = [FieldNameToFieldId.company, FieldNameToFieldId.phone]; +const LAYOUT_SINGLE_LINE_FIELDS = [FieldNameToFieldId.email]; export const FieldWrapper = ({ children, fieldId }: { fieldId: number } & PropsWithChildren) => { - if (LAYOUT_SINGLE_LINE_FIELDS.includes(fieldId)) { + if (LAYOUT_HALF_OF_SINGLE_LINE_FIELDS.includes(fieldId)) { return (
{children} @@ -17,5 +14,9 @@ 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..630d0c79e7 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,8 @@ 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',