@fluid-app/portal-sdk 0.1.498 → 0.1.500

package/dist/{use-portal-card-add-3ds-flow-LyyuhE0C.cjs → use-portal-card-add-3ds-flow-BD_RPuyR.cjs}

@@ -1,7 +1,7 @@
 require("./chunk-9hOWP6kD.cjs");
-const require_build_widget_registry = require("./build-widget-registry-DSu1FrDF.cjs");
+const require_build_widget_registry = require("./build-widget-registry-BQLi4JqV.cjs");
 const require_Combobox = require("./Combobox-CReJLJfk.cjs");
-const require_FluidProvider = require("./FluidProvider-BMwY9-iq.cjs");
+const require_FluidProvider = require("./FluidProvider-DqMKDA_x.cjs");
 const require_MobileBottomSheet = require("./MobileBottomSheet-HzfAr8dE.cjs");
 const require_static_dict_adapter = require("./static-dict-adapter-BCgoKiVT.cjs");
 const require_translation_api_context_factory = require("./translation-api-context-factory-mbsJk2UU.cjs");
@@ -581,7 +581,7 @@ function AddressAutocompleteInput({ control, setValue, countryIso, addressLineFi
 	const populate = (0, react.useCallback)((s) => {
 		setValue(addressLineField, s.streetLine, SET_OPTS);
 		setValue(cityField, s.city, SET_OPTS);
-		setValue(stateField, resolveAdministrativeAreaState(s, stateOptions), SET_OPTS);
+		if (stateField) setValue(stateField, resolveAdministrativeAreaState(s, stateOptions), SET_OPTS);
 		setValue(postalCodeField, s.postalCode, SET_OPTS);
 	}, [
 		addressLineField,
@@ -714,6 +714,115 @@ function AddressAutocompleteInput({ control, setValue, countryIso, addressLineFi
 	});
 }
 //#endregion
+//#region ../../platform/address-fields/src/field-layout.ts
+/**
+* Which address fields a country collects, in what order, and how they group
+* into rows. The address-fields service is the authority: when it answers, its
+* list decides presence and order, and its labels arrive already translated.
+* The static values below cover only the window before it answers, or a host
+* with no provider wired.
+*/
+const ADDRESS_FIELD_NAMES = [
+	"name",
+	"address1",
+	"address2",
+	"city",
+	"state",
+	"postal_code",
+	"phone"
+];
+const STATIC_LABEL_KEYS = {
+	name: "name",
+	address1: "address_line_1",
+	address2: "address_line_2",
+	city: "city",
+	state: "state",
+	postal_code: "zip_code",
+	phone: "phone_number"
+};
+const DEFAULT_HIDDEN_FIELDS = new Set(["phone"]);
+const STATIC_REQUIRED_FIELDS = new Set([
+	"name",
+	"address1",
+	"city",
+	"state",
+	"postal_code"
+]);
+const AUTOCOMPLETE_FIELD_PREFIX = [
+	"name",
+	"address1",
+	"address2"
+];
+const ROW_GROUPED_FIELDS = new Set([
+	"city",
+	"state",
+	"postal_code"
+]);
+function isAddressFieldName(value) {
+	return ADDRESS_FIELD_NAMES.includes(value);
+}
+function addressFieldOrder(fields) {
+	if (!fields) return ADDRESS_FIELD_NAMES.filter((field) => !DEFAULT_HIDDEN_FIELDS.has(field));
+	const fromService = fields.map((field) => field.field).filter(isAddressFieldName);
+	const prefix = AUTOCOMPLETE_FIELD_PREFIX.filter((field) => fromService.includes(field));
+	const rest = fromService.filter((field) => !AUTOCOMPLETE_FIELD_PREFIX.includes(field));
+	return [...prefix, ...rest];
+}
+/** Consecutive city, state and postal fields share one row. */
+function groupAddressFields(fields) {
+	const groups = [];
+	let i = 0;
+	while (i < fields.length) {
+		const current = fields[i];
+		if (ROW_GROUPED_FIELDS.has(current)) {
+			const group = [current];
+			while (i + group.length < fields.length && ROW_GROUPED_FIELDS.has(fields[i + group.length])) group.push(fields[i + group.length]);
+			if (group.length > 1) {
+				groups.push(group);
+				i += group.length;
+				continue;
+			}
+		}
+		groups.push([current]);
+		i++;
+	}
+	return groups;
+}
+function isAddressFieldRequired(fields, fieldName) {
+	if (!fields) return STATIC_REQUIRED_FIELDS.has(fieldName);
+	return fields.find((field) => field.field === fieldName)?.required ?? false;
+}
+/**
+* The service's label when it has one, otherwise a translation key for the
+* caller to resolve. `regionKey` and `postalKey` let a caller pass the
+* country-specific key it already has, such as province or postal_code.
+*/
+function addressFieldLabel(fields, fieldName, fallbackKeys) {
+	const serviceLabel = fields?.find((field) => field.field === fieldName)?.label;
+	if (serviceLabel) return { label: serviceLabel };
+	if (fieldName === "state" && fallbackKeys?.regionKey) return { translationKey: fallbackKeys.regionKey };
+	if (fieldName === "postal_code" && fallbackKeys?.postalKey) return { translationKey: fallbackKeys.postalKey };
+	return { translationKey: STATIC_LABEL_KEYS[fieldName] };
+}
+(0, react.createContext)(null);
+//#endregion
+//#region ../../fluid-pay/core/src/context.ts
+const FluidPayApiContext = (0, react.createContext)(null);
+const FluidPayApiProvider = FluidPayApiContext.Provider;
+function useFluidPayApi() {
+	const api = (0, react.useContext)(FluidPayApiContext);
+	if (!api) throw new Error("useFluidPayApi must be used within a FluidPayCoreProvider");
+	return api;
+}
+//#endregion
+//#region ../../fluid-pay/core/src/provider.tsx
+function FluidPayCoreProvider({ api, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FluidPayApiProvider, {
+		value: api,
+		children
+	});
+}
+//#endregion
 //#region ../../platform/address-fields/src/country-config.ts
 const US_STATES = [
 	{
@@ -941,42 +1050,21 @@ const US_STATES = [
 		isoCode: "WY"
 	}
 ];
-function isFieldRequired$1(addressFields, fieldName) {
-	return addressFields.find((f) => f.field === fieldName)?.required ?? false;
-}
-(0, react.createContext)(null);
-//#endregion
-//#region ../../fluid-pay/core/src/context.ts
-const FluidPayApiContext = (0, react.createContext)(null);
-const FluidPayApiProvider = FluidPayApiContext.Provider;
-function useFluidPayApi() {
-	const api = (0, react.useContext)(FluidPayApiContext);
-	if (!api) throw new Error("useFluidPayApi must be used within a FluidPayCoreProvider");
-	return api;
-}
-//#endregion
-//#region ../../fluid-pay/core/src/provider.tsx
-function FluidPayCoreProvider({ api, children }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FluidPayApiProvider, {
-		value: api,
-		children
-	});
-}
 //#endregion
 //#region ../../fluid-pay/core/src/utils/country-config.ts
 const COUNTRY_CONFIGS = {
 	US: {
-		regionLabel: "State",
-		postalLabel: "ZIP Code"
+		regionLabel: "state",
+		postalLabel: "zip_code"
 	},
 	JP: {
-		regionLabel: "Prefecture",
-		postalLabel: "Postal Code"
+		regionLabel: "prefecture",
+		postalLabel: "postal_code"
 	}
 };
 const DEFAULT_REGION_CONFIG = {
-	regionLabel: "Province",
-	postalLabel: "Postal Code"
+	regionLabel: "province",
+	postalLabel: "postal_code"
 };
 function getRegionConfig(countryCode) {
 	return COUNTRY_CONFIGS[countryCode] ?? DEFAULT_REGION_CONFIG;
@@ -1022,18 +1110,59 @@ function useCountryStates() {
 function createEditPaymentMethodFormSchema(t) {
 	return zod.z.object({
 		billing_address: zod.z.object({
-			name: zod.z.string().min(1, t("name_is_required")),
-			address1: zod.z.string().min(1, t("address_line_1_is_required")),
+			name: zod.z.string(),
+			address1: zod.z.string(),
 			address2: zod.z.string().optional().nullable(),
-			city: zod.z.string().min(1, t("city_is_required")),
+			city: zod.z.string(),
 			state: zod.z.string(),
-			zip: zod.z.string().min(1, t("zip_code_is_required")),
+			zip: zod.z.string(),
 			country_code: zod.z.string().min(1, t("country_is_required"))
 		}),
 		set_as_default: zod.z.boolean()
 	});
 }
-function EditPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClose, onSubmit, isSubmitting, error, countries = [], fetchStates, onDelete, isDeleting = false, presentation = "dialog" }) {
+const FORM_PATHS_BY_FIELD = [
+	{
+		field: "name",
+		key: "name",
+		path: "billing_address.name"
+	},
+	{
+		field: "address1",
+		key: "address1",
+		path: "billing_address.address1"
+	},
+	{
+		field: "address2",
+		key: "address2",
+		path: "billing_address.address2"
+	},
+	{
+		field: "city",
+		key: "city",
+		path: "billing_address.city"
+	},
+	{
+		field: "state",
+		key: "state",
+		path: "billing_address.state"
+	},
+	{
+		field: "postal_code",
+		key: "zip",
+		path: "billing_address.zip"
+	}
+];
+function pathForField(fieldName) {
+	return FORM_PATHS_BY_FIELD.find((e) => e.field === fieldName)?.path ?? "billing_address.address1";
+}
+function valueForField(data, fieldName) {
+	const entry = FORM_PATHS_BY_FIELD.find((e) => e.field === fieldName);
+	if (!entry) return void 0;
+	const value = data.billing_address[entry.key];
+	return typeof value === "string" ? value : void 0;
+}
+function EditPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClose, onSubmit, isSubmitting, error, countries = [], fetchStates, languageIso, onDelete, isDeleting = false, presentation = "dialog" }) {
 	const { t } = useProfileTranslation();
 	const [confirmDelete, setConfirmDelete] = (0, react.useState)(false);
 	(0, react.useEffect)(() => {
@@ -1113,7 +1242,7 @@ function EditPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 		if (!addressFieldsApi || !lookupCountry) return;
 		let cancelled = false;
 		setCountryFields(null);
-		addressFieldsApi.fetchAddressFields(lookupCountry).then((response) => {
+		addressFieldsApi.fetchAddressFields(lookupCountry, languageIso).then((response) => {
 			if (cancelled) return;
 			setCountryFields({
 				country: lookupCountry,
@@ -1128,50 +1257,50 @@ function EditPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 		return () => {
 			cancelled = true;
 		};
-	}, [addressFieldsApi, lookupCountry]);
-	const stateLabel = config?.regionLabel ? t(config.regionLabel) : t("state");
-	const stateDecision = (0, react.useMemo)(() => {
-		const answered = countryFields?.country === billingCountry;
-		const fields = answered ? countryFields?.fields : null;
-		if (fields) return {
-			ready: true,
-			used: fields.some((field) => field.field === "state") || stateSelectOptions.length > 0,
-			required: isFieldRequired$1(fields, "state")
-		};
-		if (addressFieldsApi && !answered) return {
-			ready: false,
-			used: true,
-			required: false
-		};
-		return {
-			ready: stateOptionsReady,
-			used: true,
-			required: stateSelectOptions.length > 0
-		};
 	}, [
 		addressFieldsApi,
-		billingCountry,
-		countryFields,
-		stateOptionsReady,
-		stateSelectOptions.length
+		lookupCountry,
+		languageIso
 	]);
+	const answeredFields = countryFields?.country === billingCountry ? countryFields?.fields : null;
+	const fieldOrder = (0, react.useMemo)(() => addressFieldOrder(answeredFields ?? null).filter((f) => f !== "phone"), [answeredFields]);
+	const fieldGroups = (0, react.useMemo)(() => groupAddressFields(fieldOrder), [fieldOrder]);
+	const layoutReady = addressFieldsApi ? lookupCountry === null || countryFields?.country === billingCountry : stateOptionsReady;
+	const isRequired = (fieldName) => {
+		if (answeredFields) return isAddressFieldRequired(answeredFields, fieldName);
+		if (fieldName === "state") return stateSelectOptions.length > 0;
+		return isAddressFieldRequired(null, fieldName);
+	};
+	const fieldLabel = (fieldName) => {
+		const resolved = addressFieldLabel(answeredFields ?? null, fieldName, {
+			regionKey: config?.regionLabel,
+			postalKey: config?.postalLabel
+		});
+		return resolved.label ?? t(resolved.translationKey ?? fieldName);
+	};
+	const REQUIRED_MESSAGE_KEYS = {
+		name: "name_is_required",
+		address1: "address_line_1_is_required",
+		city: "city_is_required",
+		state: "state_is_required",
+		postal_code: "zip_code_is_required"
+	};
 	const handleFormSubmit = handleSubmit((data) => {
-		clearErrors("billing_address.state");
-		if (!stateDecision.ready) return;
-		if (stateDecision.required && !data.billing_address.state) {
-			setError("billing_address.state", {
-				type: "manual",
-				message: t("state_is_required")
-			});
+		clearErrors(FORM_PATHS_BY_FIELD.map((entry) => entry.path));
+		if (!layoutReady) return;
+		const missing = fieldOrder.filter((fieldName) => isRequired(fieldName) && !valueForField(data, fieldName)?.trim());
+		if (missing.length > 0) {
+			for (const fieldName of missing) {
+				const key = REQUIRED_MESSAGE_KEYS[fieldName];
+				if (!key) continue;
+				setError(pathForField(fieldName), {
+					type: "manual",
+					message: t(key)
+				});
+			}
 			return;
 		}
-		onSubmit(stateDecision.used ? data : {
-			...data,
-			billing_address: {
-				...data.billing_address,
-				state: ""
-			}
-		});
+		onSubmit(data);
 	});
 	const deleteButtonLabel = (0, react.useMemo)(() => {
 		if (isDeleting) return t("deleting");
@@ -1187,6 +1316,33 @@ function EditPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 	const displayName = getCardDisplayName(paymentMethod, t("card_fallback"));
 	const expMonth = details.exp_month;
 	const expYear = details.exp_year;
+	const renderField = (fieldName) => {
+		const label = fieldLabel(fieldName);
+		if (fieldName === "address1") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddressAutocompleteInput, {
+			control,
+			setValue,
+			countryIso: billingCountry,
+			addressLineField: "billing_address.address1",
+			cityField: "billing_address.city",
+			stateField: fieldOrder.includes("state") ? "billing_address.state" : void 0,
+			postalCodeField: "billing_address.zip",
+			stateOptions,
+			label,
+			disabled: isSubmitting
+		}, fieldName);
+		if (fieldName === "state" && stateSelectOptions.length > 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormSelectField, {
+			control,
+			name: "billing_address.state",
+			label,
+			options: stateSelectOptions,
+			placeholder: t("select_state")
+		}, fieldName);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormTextField$1, {
+			control,
+			name: pathForField(fieldName),
+			label
+		}, fieldName);
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ResponsiveDialog.ResponsiveDialog, {
 		open: isOpen,
 		onOpenChange: (open) => !open && onClose(),
@@ -1228,68 +1384,21 @@ function EditPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 					children: t("billing_address")
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "space-y-3",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormSelectField, {
-							control,
-							name: "billing_address.country_code",
-							label: t("country"),
-							options: countryOptions,
-							placeholder: t("select_an_option"),
-							onChange: () => {
-								countryTouchedRef.current = true;
-								setValue("billing_address.state", "");
-								clearErrors("billing_address.state");
-							}
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormTextField$1, {
-							control,
-							name: "billing_address.name",
-							label: t("name")
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddressAutocompleteInput, {
-							control,
-							setValue,
-							countryIso: billingCountry,
-							addressLineField: "billing_address.address1",
-							cityField: "billing_address.city",
-							stateField: "billing_address.state",
-							postalCodeField: "billing_address.zip",
-							stateOptions,
-							label: t("address_line_1"),
-							disabled: isSubmitting
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormTextField$1, {
-							control,
-							name: "billing_address.address2",
-							label: t("address_line_2")
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: require_src.cn("grid grid-cols-1 gap-3", stateDecision.used ? "sm:grid-cols-3" : "sm:grid-cols-2"),
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormTextField$1, {
-									control,
-									name: "billing_address.city",
-									label: t("city")
-								}),
-								stateDecision.used && (stateSelectOptions.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormSelectField, {
-									control,
-									name: "billing_address.state",
-									label: stateLabel,
-									options: stateSelectOptions,
-									placeholder: t("select_state")
-								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormTextField$1, {
-									control,
-									name: "billing_address.state",
-									label: stateLabel
-								})),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormTextField$1, {
-									control,
-									name: "billing_address.zip",
-									label: config?.postalLabel ? t(config.postalLabel) : t("zip_code")
-								})
-							]
-						})
-					]
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormSelectField, {
+						control,
+						name: "billing_address.country_code",
+						label: t("country"),
+						options: countryOptions,
+						placeholder: t("select_an_option"),
+						onChange: () => {
+							countryTouchedRef.current = true;
+							setValue("billing_address.state", "");
+							clearErrors("billing_address.state");
+						}
+					}), fieldGroups.map((group) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: require_src.cn("grid grid-cols-1 gap-3", group.length === 3 ? "sm:grid-cols-3" : group.length === 2 ? "sm:grid-cols-2" : void 0),
+						children: group.map((fieldName) => renderField(fieldName))
+					}, group.join("-")))]
 				})] })]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_hook_form.Controller, {
@@ -1335,7 +1444,7 @@ function EditPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
 						type: "button",
 						onClick: handleFormSubmit,
-						disabled: isSubmitting || isDeleting || !stateDecision.ready,
+						disabled: isSubmitting || isDeleting || !layoutReady,
 						children: [isSubmitting && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "mr-2 size-4 animate-spin rounded-full border-2 border-current/30 border-t-current" }), isSubmitting ? t("saving") : t("save_changes")]
 					})]
 				})]
@@ -1399,7 +1508,7 @@ function FormTextField({ control, name, label, placeholder, containerClassName,
 }
 //#endregion
 //#region ../../fluid-pay/ui/src/components/form-fields/FormComboboxField.tsx
-function FormComboboxField({ control, name, label, placeholder = "Select", emptyText = "No results found.", options, containerClassName, disabled }) {
+function FormComboboxField({ control, name, label, placeholder = "Select", emptyText = "No results found.", options, containerClassName, disabled, onChange }) {
 	const comboboxOptions = (0, react.useMemo)(() => options?.map((opt) => ({
 		label: opt.name,
 		value: opt.value.toString()
@@ -1413,10 +1522,13 @@ function FormComboboxField({ control, name, label, placeholder = "Select", empty
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_hook_form.Controller, {
 			control,
 			name,
-			render: ({ field: { onChange, value }, fieldState: { error } }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox, {
+			render: ({ field: { onChange: fieldOnChange, value }, fieldState: { error } }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox, {
 				options: comboboxOptions,
 				value: value?.toString() ?? "",
-				onValueChange: onChange,
+				onValueChange: (next) => {
+					fieldOnChange(next);
+					onChange?.(next);
+				},
 				placeholder,
 				emptyText,
 				disabled
@@ -1440,32 +1552,6 @@ const addressFormSchema = zod.z.object({
 	country_code: zod.z.string().min(1, "Country is required"),
 	default: zod.z.boolean()
 });
-const STATIC_FIELD_ORDER = [
-	"name",
-	"address1",
-	"address2",
-	"city",
-	"state",
-	"postal_code",
-	"phone"
-];
-const STATIC_LABELS = {
-	name: "name",
-	address1: "address_line_1",
-	address2: "address_line_2",
-	city: "city",
-	state: "state",
-	postal_code: "zip_code",
-	phone: "phone_number"
-};
-const DEFAULT_HIDDEN_FIELDS = new Set(["phone"]);
-const STATIC_REQUIRED_FIELDS = new Set([
-	"name",
-	"address1",
-	"city",
-	"state",
-	"postal_code"
-]);
 const REQUIRED_FIELD_MESSAGES = {
 	name: "Name is required",
 	address1: "Address line 1 is required",
@@ -1475,47 +1561,6 @@ const REQUIRED_FIELD_MESSAGES = {
 	postal_code: "Postal code is required",
 	phone: "Phone is required"
 };
-const AUTOCOMPLETE_FIELD_PREFIX = [
-	"name",
-	"address1",
-	"address2"
-];
-function isAddressFieldName(value) {
-	return STATIC_FIELD_ORDER.includes(value);
-}
-function prioritizeAutocompleteFields(fields) {
-	const prefix = AUTOCOMPLETE_FIELD_PREFIX.filter((field) => fields.includes(field));
-	const rest = fields.filter((field) => !AUTOCOMPLETE_FIELD_PREFIX.includes(field));
-	return [...prefix, ...rest];
-}
-function groupFields(fields) {
-	const groups = [];
-	let i = 0;
-	while (i < fields.length) {
-		const current = fields[i];
-		const locationFields = new Set([
-			"city",
-			"state",
-			"postal_code"
-		]);
-		if (locationFields.has(current)) {
-			const group = [current];
-			while (i + group.length < fields.length && locationFields.has(fields[i + group.length])) group.push(fields[i + group.length]);
-			if (group.length > 1) {
-				groups.push(group);
-				i += group.length;
-				continue;
-			}
-		}
-		groups.push([current]);
-		i++;
-	}
-	return groups;
-}
-function isFieldRequired(bffFields, fieldName) {
-	if (!bffFields) return STATIC_REQUIRED_FIELDS.has(fieldName);
-	return bffFields.find((field) => field.field === fieldName)?.required ?? false;
-}
 function isBlank(value) {
 	return value == null || value.trim().length === 0;
 }
@@ -1574,20 +1619,14 @@ function AddressFormDialog({ isOpen, onClose, selectedAddress, onSubmit, isSubmi
 		selectedCountryCode,
 		languageIso
 	]);
-	const fieldOrder = (0, react.useMemo)(() => {
-		if (!bffFields) return STATIC_FIELD_ORDER.filter((f) => !DEFAULT_HIDDEN_FIELDS.has(f));
-		return prioritizeAutocompleteFields(bffFields.map((f) => f.field).filter(isAddressFieldName));
-	}, [bffFields]);
-	const fieldGroups = (0, react.useMemo)(() => groupFields(fieldOrder), [fieldOrder]);
+	const fieldOrder = (0, react.useMemo)(() => addressFieldOrder(bffFields), [bffFields]);
+	const fieldGroups = (0, react.useMemo)(() => groupAddressFields(fieldOrder), [fieldOrder]);
 	const getFieldLabel = (fieldName) => {
-		if (bffFields) {
-			const bffField = bffFields.find((f) => f.field === fieldName);
-			if (bffField) return bffField.label;
-		}
-		if (fieldName === "state" && config?.regionLabel) return t(config.regionLabel);
-		if (fieldName === "postal_code" && config?.postalLabel) return t(config.postalLabel);
-		const key = STATIC_LABELS[fieldName];
-		return key ? t(key) : fieldName;
+		const resolved = addressFieldLabel(bffFields, fieldName, {
+			regionKey: config?.regionLabel,
+			postalKey: config?.postalLabel
+		});
+		return resolved.label ?? t(resolved.translationKey ?? fieldName);
 	};
 	const countrySelectOptions = [...countries].map((country) => ({
 		name: country.name,
@@ -1644,8 +1683,8 @@ function AddressFormDialog({ isOpen, onClose, selectedAddress, onSubmit, isSubmi
 		fetchStates
 	]);
 	const handleFormSubmit = handleSubmit((data) => {
-		clearErrors(STATIC_FIELD_ORDER);
-		const missingRequiredFields = fieldOrder.filter((fieldName) => isFieldRequired(bffFields, fieldName) && isBlank(data[fieldName]));
+		clearErrors(fieldOrder);
+		const missingRequiredFields = fieldOrder.filter((fieldName) => isAddressFieldRequired(bffFields, fieldName) && isBlank(data[fieldName]));
 		if (missingRequiredFields.length > 0) {
 			for (const fieldName of missingRequiredFields) setError(fieldName, {
 				type: "manual",
@@ -1653,14 +1692,12 @@ function AddressFormDialog({ isOpen, onClose, selectedAddress, onSubmit, isSubmi
 			});
 			return;
 		}
-		const city = bffFields && !fieldOrder.includes("city") ? "" : data.city;
-		const state = bffFields && !fieldOrder.includes("state") ? "" : data.state;
 		onSubmit({ address: {
 			name: data.name,
 			address1: data.address1,
 			address2: data.address2 ?? null,
-			city,
-			state,
+			city: data.city,
+			state: data.state,
 			postal_code: data.postal_code,
 			phone: data.phone || null,
 			country_code: data.country_code,
@@ -1690,7 +1727,7 @@ function AddressFormDialog({ isOpen, onClose, selectedAddress, onSubmit, isSubmi
 				countryIso: selectedCountryCode,
 				addressLineField: "address1",
 				cityField: "city",
-				stateField: "state",
+				stateField: fieldOrder.includes("state") ? "state" : void 0,
 				postalCodeField: "postal_code",
 				stateOptions,
 				disabled: isSubmitting
@@ -1751,7 +1788,11 @@ function AddressFormDialog({ isOpen, onClose, selectedAddress, onSubmit, isSubmi
 					label: t("country"),
 					placeholder: t("select_an_option"),
 					options: countrySelectOptions,
-					disabled: isSubmitting
+					disabled: isSubmitting,
+					onChange: () => {
+						setValue("state", "");
+						clearErrors("state");
+					}
 				}), fieldGroups.map((group) => {
 					if (group.length === 1) return renderField(group[0]);
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -3114,4 +3155,4 @@ Object.defineProperty(exports, "useProfileTranslation", {
 	}
 });
 
-//# sourceMappingURL=use-portal-card-add-3ds-flow-LyyuhE0C.cjs.map
+//# sourceMappingURL=use-portal-card-add-3ds-flow-BD_RPuyR.cjs.map