TRAC-291 hide State/Province when the selected country has no states

.changeset/trac-291-state-optional.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Fix Account Registration validating State/Province as required for countries without any states (e.g., Algeria). The register page now queries per-country state data from BigCommerce and hides the State/Province field entirely when the selected country has no states.

core/app/[locale]/(default)/(auth)/register/_actions/register-customer.ts

@@ -340,7 +340,7 @@ function parseRegisterCustomerInput(
 }
 
 export async function registerCustomer<F extends Field>(
-  { fields, passwordComplexity }: DynamicFormActionArgs<F>,
+  { fields, passwordComplexity, countriesWithoutStates }: DynamicFormActionArgs<F>,
   _prevState: {
     lastResult: SubmissionResult | null;
   },
@@ -350,8 +350,11 @@ export async function registerCustomer<F extends Field>(
   const locale = await getLocale();
   const cartId = await getCartId();
 
+  const countryCode = formData.get('countryCode');
+  const currentCountry = typeof countryCode === 'string' ? countryCode : undefined;
+
   const submission = parseWithZod(formData, {
-    schema: schema(fields, passwordComplexity),
+    schema: schema(fields, passwordComplexity, undefined, countriesWithoutStates, currentCountry),
   });
 
   if (submission.status !== 'success') {

core/app/[locale]/(default)/(auth)/register/page-data.ts

@@ -40,6 +40,9 @@ const RegisterCustomerQuery = graphql(
         countries {
           code
           name
+          statesOrProvinces {
+            entityId
+          }
         }
       }
     }

core/app/[locale]/(default)/(auth)/register/page.tsx

@@ -64,6 +64,10 @@ export default async function Register({ params }: Props) {
   const { addressFields, customerFields, countries, passwordComplexitySettings } =
     registerCustomerData;
 
+  const countriesWithoutStates = (countries ?? [])
+    .filter((country) => country.statesOrProvinces.length === 0)
+    .map((country) => country.code);
+
   const recaptchaSiteKey = await getRecaptchaSiteKey();
 
   const fields = transformFieldsToLayout(
@@ -112,6 +116,7 @@ export default async function Register({ params }: Props) {
   return (
     <DynamicFormSection
       action={registerCustomer}
+      countriesWithoutStates={countriesWithoutStates}
       errorTranslations={{
         firstName: {
           invalid_type: t('FieldErrors.firstNameRequired'),

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

@@ -19,6 +19,7 @@ import {
   startTransition,
   useActionState,
   useEffect,
+  useState,
 } from 'react';
 import { useFormStatus } from 'react-dom';
 import RecaptchaWidget from 'react-google-recaptcha';
@@ -50,6 +51,7 @@ import { removeOptionsFromFields } from './utils';
 export interface DynamicFormActionArgs<F extends Field> {
   fields: Array<F | FieldGroup<F>>;
   passwordComplexity?: PasswordComplexitySettings | null;
+  countriesWithoutStates?: string[];
 }
 
 type Action<F extends Field, S, P> = (
@@ -79,6 +81,7 @@ export interface DynamicFormProps<F extends Field> {
   passwordComplexity?: PasswordComplexitySettings | null;
   errorTranslations?: FormErrorTranslationMap;
   recaptchaSiteKey?: string;
+  countriesWithoutStates?: string[];
 }
 
 export function DynamicForm<F extends Field>({
@@ -95,19 +98,32 @@ export function DynamicForm<F extends Field>({
   passwordComplexity,
   errorTranslations,
   recaptchaSiteKey,
+  countriesWithoutStates,
 }: DynamicFormProps<F>) {
   const t = useTranslations('Form');
   // Remove options from fields before passing to action to reduce payload size
   // Options are only needed for rendering, not for processing form submissions
   // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
   const fieldsWithoutOptions = removeOptionsFromFields(fields) as Array<F | FieldGroup<F>>;
-  const actionWithFields = action.bind(null, { fields: fieldsWithoutOptions, passwordComplexity });
+  const actionWithFields = action.bind(null, {
+    fields: fieldsWithoutOptions,
+    passwordComplexity,
+    countriesWithoutStates,
+  });
 
   const [{ lastResult, successMessage }, formAction] = useActionState(actionWithFields, {
     lastResult: null,
   });
 
-  const dynamicSchema = schema(fields, passwordComplexity, errorTranslations);
+  const [currentCountry, setCurrentCountry] = useState<string | undefined>(undefined);
+
+  const dynamicSchema = schema(
+    fields,
+    passwordComplexity,
+    errorTranslations,
+    countriesWithoutStates,
+    currentCountry,
+  );
   const defaultValue = fields
     .flatMap((f) => (Array.isArray(f) ? f : [f]))
     .reduce<z.infer<typeof dynamicSchema>>(
@@ -163,6 +179,19 @@ export function DynamicForm<F extends Field>({
     }
   }, [lastResult, successMessage, onSuccess]);
 
+  const countryValue = formFields.countryCode?.value;
+
+  useEffect(() => {
+    setCurrentCountry(typeof countryValue === 'string' ? countryValue : undefined);
+  }, [countryValue]);
+
+  const isCurrentCountryStateless =
+    countriesWithoutStates != null &&
+    typeof countryValue === 'string' &&
+    countriesWithoutStates.includes(countryValue);
+  const shouldHideStateField = (fieldName: string) =>
+    fieldName === 'stateOrProvince' && isCurrentCountryStateless;
+
   return (
     <FormProvider context={form.context}>
       <form {...getFormProps(form)} action={formAction} onChange={onChange}>
@@ -172,6 +201,8 @@ export function DynamicForm<F extends Field>({
               return (
                 <div className="flex flex-col gap-4 @sm:flex-row" key={index}>
                   {field.map((f) => {
+                    if (shouldHideStateField(f.name)) return null;
+
                     const groupFormField = formFields[f.name];
 
                     if (!groupFormField) return null;
@@ -188,6 +219,8 @@ export function DynamicForm<F extends Field>({
               );
             }
 
+            if (shouldHideStateField(field.name)) return null;
+
             const formField = formFields[field.name];
 
             if (formField == null) return null;

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

@@ -352,11 +352,26 @@ export function schema(
   fields: Array<Field | FieldGroup<Field>>,
   passwordComplexity?: PasswordComplexitySettings | null,
   errorTranslations?: FormErrorTranslationMap,
+  countriesWithoutStates?: string[],
+  currentCountry?: string,
 ) {
   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;
+  const stateFieldName = flatFields.find((f) => f.name === 'stateOrProvince')?.name;
+  const countryIsStateless =
+    countriesWithoutStates != null &&
+    currentCountry != null &&
+    countriesWithoutStates.includes(currentCountry);
+
+  if (countryIsStateless && stateFieldName != null) {
+    const existing = shape[stateFieldName];
+
+    if (existing instanceof z.ZodString) {
+      shape[stateFieldName] = existing.optional();
+    }
+  }
 
   return z.object(shape).superRefine((data, ctx) => {
     if (

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

@@ -19,6 +19,7 @@ interface Props<F extends Field> {
   passwordComplexity?: PasswordComplexitySettings | null;
   errorTranslations?: FormErrorTranslationMap;
   recaptchaSiteKey?: string;
+  countriesWithoutStates?: string[];
 }
 
 export function DynamicFormSection<F extends Field>({
@@ -31,6 +32,7 @@ export function DynamicFormSection<F extends Field>({
   passwordComplexity,
   errorTranslations,
   recaptchaSiteKey,
+  countriesWithoutStates,
 }: Props<F>) {
   return (
     <SectionLayout className={clsx('mx-auto w-full max-w-4xl', className)} containerSize="lg">
@@ -46,6 +48,7 @@ export function DynamicFormSection<F extends Field>({
       )}
       <DynamicForm
         action={action}
+        countriesWithoutStates={countriesWithoutStates}
         errorTranslations={errorTranslations}
         fields={fields}
         passwordComplexity={passwordComplexity}