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..5a11dbd6e4 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 @@ -14,11 +14,11 @@ import { DateField, FieldNameToFieldId, FieldWrapper, + FULL_NAME_FIELDS, MultilineText, 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' && FULL_NAME_FIELDS.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/app/[locale]/(default)/account/(tabs)/addresses/_components/address-book.tsx b/core/app/[locale]/(default)/account/(tabs)/addresses/_components/address-book.tsx index 27e894a022..b921fba6c2 100644 --- a/core/app/[locale]/(default)/account/(tabs)/addresses/_components/address-book.tsx +++ b/core/app/[locale]/(default)/account/(tabs)/addresses/_components/address-book.tsx @@ -79,6 +79,7 @@ export const AddressBook = ({

{accountState.message}

)} + {!addressesCount &&

{t('emptyAddresses')}

}
    {addressBook.map( ({ 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..ecca3d400c 100644 --- a/core/components/form-fields/utils.ts +++ b/core/components/form-fields/utils.ts @@ -47,6 +47,8 @@ export const BOTH_CUSTOMER_ADDRESS_FIELDS = [ FieldNameToFieldId.phone, ]; +export const FULL_NAME_FIELDS = [FieldNameToFieldId.firstName, FieldNameToFieldId.lastName]; + export const createFieldName = ( field: FragmentOf, fieldOrigin: 'customer' | 'address', diff --git a/core/messages/en.json b/core/messages/en.json index 8cc535f5a5..842bc2f9d5 100644 --- a/core/messages/en.json +++ b/core/messages/en.json @@ -153,6 +153,7 @@ "title": "Addresses", "addNewAddress": "Add new address", "editButton": "Edit", + "emptyAddresses": "No addresses added", "deleteButton": "Delete", "confirmDeleteAddress": "Delete address", "deleteModalTitle": "Are you sure you want to delete this address?", diff --git a/core/tests/ui/e2e/register.spec.ts b/core/tests/ui/e2e/register.spec.ts index bf87163f24..8c77400578 100644 --- a/core/tests/ui/e2e/register.spec.ts +++ b/core/tests/ui/e2e/register.spec.ts @@ -15,10 +15,6 @@ test('Account register', async ({ page }) => { await page.getByLabel('Confirm PasswordRequired').fill(password); await page.getByLabel('First NameRequired').fill(faker.person.firstName()); await page.getByLabel('Last NameRequired').fill(faker.person.lastName()); - await page.getByLabel('Phone Number').fill(faker.phone.number()); - await page.getByLabel('Address Line 1Required').fill(faker.location.streetAddress()); - await page.getByLabel('Suburb/CityRequired').fill(faker.location.city()); - await page.getByLabel('Zip/PostcodeRequired').fill(faker.location.zipCode()); await page.getByRole('button', { name: 'Create account' }).click(); @@ -36,9 +32,6 @@ test('Account is not created if email is already in use', async ({ page, account await page.getByLabel('Confirm PasswordRequired').fill(customer.password); await page.getByLabel('First NameRequired').fill(customer.firstName); await page.getByLabel('Last NameRequired').fill(customer.lastName); - await page.getByLabel('Address Line 1Required').fill(faker.location.streetAddress()); - await page.getByLabel('Suburb/CityRequired').fill(faker.location.city()); - await page.getByLabel('Zip/PostcodeRequired').fill(faker.location.zipCode()); await page.getByRole('button', { name: 'Create account' }).click();