fix(core): support required custom customer fields in Account Settings

.changeset/account-settings-custom-fields-3074.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Fix Account Settings failing to save for customers when a merchant-defined required custom customer field exists. BigCommerce revalidates required custom fields on every `updateCustomer` call, so Account Settings now renders and resubmits those fields (mirroring the existing Register/Address form-field support) instead of only supporting first name, last name, email, and company.

core/app/[locale]/(default)/account/settings/_actions/update-customer.ts

@@ -5,11 +5,12 @@ import { parseWithZod } from '@conform-to/zod';
 import { revalidateTag } from 'next/cache';
 import { getTranslations } from 'next-intl/server';
 
+import { Field, FieldGroup } from '@/vibes/soul/form/dynamic-form/schema';
 import { updateAccountSchema } from '@/vibes/soul/sections/account-settings/schema';
-import { UpdateAccountAction } from '@/vibes/soul/sections/account-settings/update-account-form';
+import { State } from '@/vibes/soul/sections/account-settings/update-account-form';
 import { getSessionCustomerAccessToken } from '~/auth';
 import { client } from '~/client';
-import { graphql } from '~/client/graphql';
+import { graphql, VariablesOf } from '~/client/graphql';
 import { TAGS } from '~/client/tags';
 
 const UpdateCustomerMutation = graphql(`
@@ -19,6 +20,8 @@ const UpdateCustomerMutation = graphql(`
         customer {
           firstName
           lastName
+          email
+          company
         }
         errors {
           __typename
@@ -43,11 +46,81 @@ const UpdateCustomerMutation = graphql(`
   }
 `);
 
-export const updateCustomer: UpdateAccountAction = async (prevState, formData) => {
+type FormFieldsInput = NonNullable<
+  VariablesOf<typeof UpdateCustomerMutation>['input']['formFields']
+>;
+
+/*
+ * BigCommerce re-validates every required custom customer field on every updateCustomer call,
+ * even ones already satisfied by a prior save (see issue #3074) - so any required custom field
+ * rendered in the form must always be resent here, not just the ones the user actually changed.
+ */
+function buildFormFieldsInput(
+  fields: Array<Field | FieldGroup<Field>>,
+  value: Record<string, unknown>,
+): FormFieldsInput {
+  const flatFields = fields.flatMap((field) => (Array.isArray(field) ? field : [field]));
+
+  return {
+    checkboxes: flatFields
+      .filter((field) => field.type === 'checkbox-group')
+      .filter((field) => Boolean(value[field.name]))
+      .map((field) => {
+        const rawValue = value[field.name];
+        const rawValues = Array.isArray(rawValue) ? rawValue : [rawValue];
+
+        return {
+          fieldEntityId: Number(field.id),
+          fieldValueEntityIds: rawValues.map(Number),
+        };
+      }),
+    multipleChoices: flatFields
+      .filter((field) => ['radio-group', 'button-radio-group', 'select'].includes(field.type))
+      .filter((field) => Boolean(value[field.name]))
+      .map((field) => ({
+        fieldEntityId: Number(field.id),
+        fieldValueEntityId: Number(value[field.name]),
+      })),
+    numbers: flatFields
+      .filter((field) => field.type === 'number')
+      .filter((field) => Boolean(value[field.name]))
+      .map((field) => ({
+        fieldEntityId: Number(field.id),
+        number: Number(value[field.name]),
+      })),
+    dates: flatFields
+      .filter((field) => field.type === 'date')
+      .filter((field) => Boolean(value[field.name]))
+      .map((field) => ({
+        fieldEntityId: Number(field.id),
+        date: new Date(String(value[field.name])).toISOString(),
+      })),
+    multilineTexts: flatFields
+      .filter((field) => field.type === 'textarea')
+      .filter((field) => Boolean(value[field.name]))
+      .map((field) => ({
+        fieldEntityId: Number(field.id),
+        multilineText: String(value[field.name]),
+      })),
+    texts: flatFields
+      .filter((field) => field.type === 'text' || field.type === 'email')
+      .filter((field) => Boolean(value[field.name]))
+      .map((field) => ({
+        fieldEntityId: Number(field.id),
+        text: String(value[field.name]),
+      })),
+  };
+}
+
+export async function updateCustomer(
+  { fields }: { fields: Array<Field | FieldGroup<Field>> },
+  prevState: Awaited<State>,
+  formData: FormData,
+): Promise<State> {
   const t = await getTranslations('Account.Settings');
   const customerAccessToken = await getSessionCustomerAccessToken();
 
-  const submission = parseWithZod(formData, { schema: updateAccountSchema });
+  const submission = parseWithZod(formData, { schema: updateAccountSchema(fields) });
 
   if (submission.status !== 'success') {
     return {
@@ -56,12 +129,20 @@ export const updateCustomer: UpdateAccountAction = async (prevState, formData) =
     };
   }
 
+  const { firstName, lastName, email, company, ...customFieldValues } = submission.value;
+
   try {
     const response = await client.fetch({
       document: UpdateCustomerMutation,
       customerAccessToken,
       variables: {
-        input: submission.value,
+        input: {
+          firstName,
+          lastName,
+          email,
+          company,
+          formFields: buildFormFieldsInput(fields, customFieldValues),
+        },
       },
       fetchOptions: { cache: 'no-store' },
     });
@@ -107,4 +188,4 @@ export const updateCustomer: UpdateAccountAction = async (prevState, formData) =
       lastResult: submission.reply({ formErrors: [t('somethingWentWrong')] }),
     };
   }
-};
+}

core/app/[locale]/(default)/account/settings/page-data.tsx

@@ -4,7 +4,10 @@ import { getSessionCustomerAccessToken } from '~/auth';
 import { client } from '~/client';
 import { graphql, VariablesOf } from '~/client/graphql';
 import { TAGS } from '~/client/tags';
-import { FormFieldsFragment } from '~/data-transformers/form-field-transformer/fragment';
+import {
+  FormFieldsFragment,
+  FormFieldValuesFragment,
+} from '~/data-transformers/form-field-transformer/fragment';
 
 const AccountSettingsQuery = graphql(
   `
@@ -21,6 +24,9 @@ const AccountSettingsQuery = graphql(
         lastName
         company
         isSubscribedToNewsletter
+        formFields {
+          ...FormFieldValuesFragment
+        }
       }
       site {
         settings {
@@ -50,7 +56,7 @@ const AccountSettingsQuery = graphql(
       }
     }
   `,
-  [FormFieldsFragment],
+  [FormFieldsFragment, FormFieldValuesFragment],
 );
 
 type Variables = VariablesOf<typeof AccountSettingsQuery>;
@@ -96,6 +102,7 @@ export const getAccountSettingsQuery = cache(async ({ address, customer }: Props
   return {
     addressFields,
     customerFields,
+    customerFormFieldValues: customerInfo.formFields,
     customerInfo,
     newsletterSettings,
     passwordComplexitySettings,

core/app/[locale]/(default)/account/settings/page.tsx

@@ -3,13 +3,49 @@ import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 
+import { Field } from '@/vibes/soul/form/dynamic-form/schema';
 import { AccountSettingsSection } from '@/vibes/soul/sections/account-settings';
+import { formFieldTransformer } from '~/data-transformers/form-field-transformer';
+import {
+  ACCOUNT_SETTINGS_FIELDS_TO_EXCLUDE,
+  mapFormFieldValueToName,
+} from '~/data-transformers/form-field-transformer/utils';
+import { exists } from '~/lib/utils';
 
 import { changePassword } from './_actions/change-password';
 import { updateCustomer } from './_actions/update-customer';
 import { updateNewsletterSubscription } from './_actions/update-newsletter-subscription';
 import { getAccountSettingsQuery } from './page-data';
 
+function withDefaultValue(field: Field, value: unknown): Field {
+  if (field.type === 'checkbox-group') {
+    return { ...field, defaultValue: Array.isArray(value) ? value.map(String) : undefined };
+  }
+
+  if (typeof value !== 'string') {
+    return field;
+  }
+
+  switch (field.type) {
+    case 'radio-group':
+    case 'select':
+    case 'swatch-radio-group':
+    case 'card-radio-group':
+    case 'button-radio-group':
+    case 'checkbox':
+    case 'number':
+    case 'text':
+    case 'textarea':
+    case 'date':
+    case 'email':
+    case 'hidden':
+      return { ...field, defaultValue: value };
+
+    default:
+      return field;
+  }
+}
+
 interface Props {
   params: Promise<{ locale: string }>;
 }
@@ -47,6 +83,21 @@ export default async function Settings({ params }: Props) {
     },
   );
 
+  const customFieldValues = accountSettings.customerFormFieldValues.reduce<Record<string, unknown>>(
+    (acc, field) => ({ ...acc, ...mapFormFieldValueToName(field) }),
+    {},
+  );
+
+  const updateAccountCustomFields = accountSettings.customerFields
+    .filter((field) => !ACCOUNT_SETTINGS_FIELDS_TO_EXCLUDE.includes(field.entityId))
+    .map(formFieldTransformer)
+    .filter(exists)
+    .map((field) => withDefaultValue(field, customFieldValues[field.name]));
+
+  const updateCustomerWithFields = updateCustomer.bind(null, {
+    fields: updateAccountCustomFields,
+  });
+
   return (
     <AccountSettingsSection
       account={accountSettings.customerInfo}
@@ -63,7 +114,8 @@ export default async function Settings({ params }: Props) {
       newsletterSubscriptionTitle={t('NewsletterSubscription.title')}
       passwordComplexitySettings={accountSettings.passwordComplexitySettings}
       title={t('title')}
-      updateAccountAction={updateCustomer}
+      updateAccountAction={updateCustomerWithFields}
+      updateAccountCustomFields={updateAccountCustomFields}
       updateAccountSubmitLabel={t('cta')}
       updateNewsletterSubscriptionAction={updateNewsletterSubscriptionActionWithCustomerInfo}
     />

core/data-transformers/form-field-transformer/utils.ts

@@ -25,6 +25,20 @@ export enum FieldNameToFieldId {
 
 export const CUSTOMER_FIELDS_TO_EXCLUDE = [FieldNameToFieldId.currentPassword];
 
+/* Account Settings only manages the fields below directly; anything else returned by
+ site.settings.formFields.customer is a genuinely merchant-defined custom field. */
+export const ACCOUNT_SETTINGS_FIELDS_TO_EXCLUDE = [
+  FieldNameToFieldId.email,
+  FieldNameToFieldId.password,
+  FieldNameToFieldId.confirmPassword,
+  FieldNameToFieldId.currentPassword,
+  FieldNameToFieldId.firstName,
+  FieldNameToFieldId.lastName,
+  FieldNameToFieldId.company,
+  FieldNameToFieldId.phone,
+  FieldNameToFieldId.exclusiveOffers,
+];
+
 export const REGISTER_CUSTOMER_FORM_LAYOUT = [
   [FieldNameToFieldId.firstName, FieldNameToFieldId.lastName],
   FieldNameToFieldId.email,

core/vibes/soul/form/dynamic-form/index.tsx

@@ -241,7 +241,7 @@ function SubmitButton({
   );
 }
 
-function DynamicFormField({
+export function DynamicFormField({
   field,
   formField,
 }: {

core/vibes/soul/form/dynamic-form/schema.ts

@@ -328,31 +328,36 @@ function getFieldSchema(
   return fieldSchema;
 }
 
-export function schema(
+export function getFieldsShape(
   fields: Array<Field | FieldGroup<Field>>,
   passwordComplexity?: PasswordComplexitySettings | null,
   errorTranslations?: FormErrorTranslationMap,
-) {
+): SchemaRawShape {
   const shape: SchemaRawShape = {};
-  let passwordFieldName: string | undefined;
-  let confirmPasswordFieldName: string | undefined;
 
   fields.forEach((field) => {
     if (Array.isArray(field)) {
       field.forEach((f) => {
         shape[f.name] = getFieldSchema(f, passwordComplexity, errorTranslations);
-
-        if (f.type === 'password') passwordFieldName = f.name;
-        if (f.type === 'confirm-password') confirmPasswordFieldName = f.name;
       });
     } else {
       shape[field.name] = getFieldSchema(field, passwordComplexity, errorTranslations);
-
-      if (field.type === 'password') passwordFieldName = field.name;
-      if (field.type === 'confirm-password') confirmPasswordFieldName = field.name;
     }
   });
 
+  return shape;
+}
+
+export function schema(
+  fields: Array<Field | FieldGroup<Field>>,
+  passwordComplexity?: PasswordComplexitySettings | null,
+  errorTranslations?: FormErrorTranslationMap,
+) {
+  const shape = getFieldsShape(fields, passwordComplexity, errorTranslations);
+  const flatFields = fields.flatMap((field) => (Array.isArray(field) ? field : [field]));
+  const passwordFieldName = flatFields.find((f) => f.type === 'password')?.name;
+  const confirmPasswordFieldName = flatFields.find((f) => f.type === 'confirm-password')?.name;
+
   return z.object(shape).superRefine((data, ctx) => {
     if (
       passwordFieldName != null &&

core/vibes/soul/sections/account-settings/index.tsx

@@ -1,4 +1,8 @@
-import { PasswordComplexitySettings } from '@/vibes/soul/form/dynamic-form/schema';
+import {
+  Field,
+  FieldGroup,
+  PasswordComplexitySettings,
+} from '@/vibes/soul/form/dynamic-form/schema';
 
 import { ChangePasswordAction, ChangePasswordForm } from './change-password-form';
 import {
@@ -11,6 +15,7 @@ export interface AccountSettingsSectionProps {
   title?: string;
   account: Account;
   updateAccountAction: UpdateAccountAction;
+  updateAccountCustomFields?: Array<Field | FieldGroup<Field>>;
   updateAccountSubmitLabel?: string;
   changePasswordTitle?: string;
   changePasswordAction: ChangePasswordAction;
@@ -45,6 +50,7 @@ export function AccountSettingsSection({
   title = 'Account Settings',
   account,
   updateAccountAction,
+  updateAccountCustomFields,
   updateAccountSubmitLabel,
   changePasswordTitle = 'Change Password',
   changePasswordAction,
@@ -73,6 +79,7 @@ export function AccountSettingsSection({
             <UpdateAccountForm
               account={account}
               action={updateAccountAction}
+              customFields={updateAccountCustomFields}
               submitLabel={updateAccountSubmitLabel}
             />
           </div>