Skip to content

Commit

Permalink
fix(core): improve create account form
Browse files Browse the repository at this point in the history
  • Loading branch information
@bc-yevhenii-buliuk
bc-yevhenii-buliuk committed Oct 14, 2024
1 parent 0e092d0 commit cba025b
Show file tree
Hide file tree
Showing 6 changed files with 64 additions and 184 deletions.
5 changes: 5 additions & 0 deletions .changeset/thick-sloths-lick.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@bigcommerce/catalyst-core": patch
---

remove unnecessary fields from create account form
2 changes: 1 addition & 1 deletion core/app/[locale]/(default)/(auth)/register/_actions/register-customer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
193 changes: 35 additions & 158 deletions core/app/[locale]/(default)/(auth)/register/_components/register-customer-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
FieldNameToFieldId,
FieldWrapper,
MultilineText,
NAME_FORM_FIELD,
NumbersOnly,
Password,
Picklist,
Expand Down Expand Up @@ -219,7 +220,8 @@ export const RegisterCustomerForm = ({
if (formData.get('customer-password') !== formData.get('customer-confirmPassword')) {
setFormStatus({
status: 'error',
message: t('confirmPassword'),
// message: t('confirmPassword'),
message: 'test error 1',
});

window.scrollTo({
Expand Down Expand Up @@ -264,6 +266,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))
Expand All @@ -285,6 +307,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}>
Expand Down Expand Up @@ -366,167 +400,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
Expand Down
19 changes: 15 additions & 4 deletions core/components/form-fields/shared/field-wrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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_FULL_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_FULL_SINGLE_LINE_FIELDS.includes(fieldId)) {
return (
<div className="grid grid-cols-1 lg:col-span-2">
{children}
</div>
);
}

return children;
};
20 changes: 1 addition & 19 deletions core/components/form-fields/shared/parse-fields.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ type FormFieldsType = VariablesOf<typeof FakeMutation>['input']['formFields'];

interface ReturnedFormData {
[k: string]: unknown;
address: Record<string, unknown>;
formFields: Record<string, unknown>;
}

Expand Down Expand Up @@ -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: {} },
);
9 changes: 7 additions & 2 deletions core/components/form-fields/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ export enum FieldNameToFieldId {
email = 1,
password,
confirmPassword,
firstName,
lastName,
firstName = 4,
lastName = 5,
company,
phone,
address1,
Expand Down Expand Up @@ -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',
Expand Down

0 comments on commit cba025b

Please sign in to comment.