+ {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',