@fluid-app/portal-sdk 0.1.499 → 0.1.500

package/dist/{use-portal-card-add-3ds-flow-Cu9yqnIn.mjs → use-portal-card-add-3ds-flow-y2cBmujb.mjs}

@@ -1,7 +1,7 @@
 import { D as SelectItem, E as SelectContent, Ft as Checkbox, G as DropdownMenuContent, H as Label, K as DropdownMenuItem, N as Input, O as SelectTrigger, Rn as useZodForm, T as Select, Tn as Button, U as DropdownMenu, X as DropdownMenuSeparator, at as DialogFooter, et as DropdownMenuTrigger, k as SelectValue, lt as DialogTitle, o as Textarea, rt as DialogContent, tt as Dialog, zn as cn } from "./src-BfINy9nC.mjs";
 import { A as isCardPaymentDescriptor, B as normalizeCardBrand, F as resolvePaymentLogo, I as resolvePaymentMethodDisplay, N as normalizePaymentDescriptor, P as paymentDescriptorLabel, l as PhoneInput, yt as useAddressFieldsApiOptional } from "./build-widget-registry-C-WhTBEe.mjs";
 import { t as Combobox } from "./Combobox-D8ukt9Tb.mjs";
-import { o as createProfileTranslationAdapter, s as profileDomain, y as useAddressAutocompleteApiOptional } from "./FluidProvider-BY-IWBBl.mjs";
+import { o as createProfileTranslationAdapter, s as profileDomain, y as useAddressAutocompleteApiOptional } from "./FluidProvider-pfuaCUAu.mjs";
 import { t as MobileBottomSheet } from "./MobileBottomSheet-BKm3ysnd.mjs";
 import { a as useActiveLocale, r as useDomainDict } from "./static-dict-adapter-DUyazFbx.mjs";
 import { t as createTranslationContext } from "./translation-api-context-factory-BTpIuUF0.mjs";
@@ -580,7 +580,7 @@ function AddressAutocompleteInput({ control, setValue, countryIso, addressLineFi
 	const populate = 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,
@@ -713,6 +713,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] };
+}
+createContext(null);
+//#endregion
+//#region ../../fluid-pay/core/src/context.ts
+const FluidPayApiContext = createContext(null);
+const FluidPayApiProvider = FluidPayApiContext.Provider;
+function useFluidPayApi() {
+	const api = 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__ */ jsx(FluidPayApiProvider, {
+		value: api,
+		children
+	});
+}
+//#endregion
 //#region ../../platform/address-fields/src/country-config.ts
 const US_STATES = [
 	{
@@ -940,42 +1049,21 @@ const US_STATES = [
 		isoCode: "WY"
 	}
 ];
-function isFieldRequired$1(addressFields, fieldName) {
-	return addressFields.find((f) => f.field === fieldName)?.required ?? false;
-}
-createContext(null);
-//#endregion
-//#region ../../fluid-pay/core/src/context.ts
-const FluidPayApiContext = createContext(null);
-const FluidPayApiProvider = FluidPayApiContext.Provider;
-function useFluidPayApi() {
-	const api = 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__ */ 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;
@@ -1021,18 +1109,59 @@ function useCountryStates() {
 function createEditPaymentMethodFormSchema(t) {
 	return z.object({
 		billing_address: z.object({
-			name: z.string().min(1, t("name_is_required")),
-			address1: z.string().min(1, t("address_line_1_is_required")),
+			name: z.string(),
+			address1: z.string(),
 			address2: z.string().optional().nullable(),
-			city: z.string().min(1, t("city_is_required")),
+			city: z.string(),
 			state: z.string(),
-			zip: z.string().min(1, t("zip_code_is_required")),
+			zip: z.string(),
 			country_code: z.string().min(1, t("country_is_required"))
 		}),
 		set_as_default: 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] = useState(false);
 	useEffect(() => {
@@ -1112,7 +1241,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,
@@ -1127,50 +1256,50 @@ function EditPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 		return () => {
 			cancelled = true;
 		};
-	}, [addressFieldsApi, lookupCountry]);
-	const stateLabel = config?.regionLabel ? t(config.regionLabel) : t("state");
-	const stateDecision = 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 = useMemo(() => addressFieldOrder(answeredFields ?? null).filter((f) => f !== "phone"), [answeredFields]);
+	const fieldGroups = 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 = useMemo(() => {
 		if (isDeleting) return t("deleting");
@@ -1186,6 +1315,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__ */ 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__ */ jsx(FormSelectField, {
+			control,
+			name: "billing_address.state",
+			label,
+			options: stateSelectOptions,
+			placeholder: t("select_state")
+		}, fieldName);
+		return /* @__PURE__ */ jsx(FormTextField$1, {
+			control,
+			name: pathForField(fieldName),
+			label
+		}, fieldName);
+	};
 	return /* @__PURE__ */ jsxs(ResponsiveDialog, {
 		open: isOpen,
 		onOpenChange: (open) => !open && onClose(),
@@ -1227,68 +1383,21 @@ function EditPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 					children: t("billing_address")
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "space-y-3",
-					children: [
-						/* @__PURE__ */ 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__ */ jsx(FormTextField$1, {
-							control,
-							name: "billing_address.name",
-							label: t("name")
-						}),
-						/* @__PURE__ */ 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__ */ jsx(FormTextField$1, {
-							control,
-							name: "billing_address.address2",
-							label: t("address_line_2")
-						}),
-						/* @__PURE__ */ jsxs("div", {
-							className: cn("grid grid-cols-1 gap-3", stateDecision.used ? "sm:grid-cols-3" : "sm:grid-cols-2"),
-							children: [
-								/* @__PURE__ */ jsx(FormTextField$1, {
-									control,
-									name: "billing_address.city",
-									label: t("city")
-								}),
-								stateDecision.used && (stateSelectOptions.length > 0 ? /* @__PURE__ */ jsx(FormSelectField, {
-									control,
-									name: "billing_address.state",
-									label: stateLabel,
-									options: stateSelectOptions,
-									placeholder: t("select_state")
-								}) : /* @__PURE__ */ jsx(FormTextField$1, {
-									control,
-									name: "billing_address.state",
-									label: stateLabel
-								})),
-								/* @__PURE__ */ jsx(FormTextField$1, {
-									control,
-									name: "billing_address.zip",
-									label: config?.postalLabel ? t(config.postalLabel) : t("zip_code")
-								})
-							]
-						})
-					]
+					children: [/* @__PURE__ */ 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__ */ jsx("div", {
+						className: 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__ */ jsx(Controller, {
@@ -1334,7 +1443,7 @@ function EditPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 					}), /* @__PURE__ */ jsxs(Button, {
 						type: "button",
 						onClick: handleFormSubmit,
-						disabled: isSubmitting || isDeleting || !stateDecision.ready,
+						disabled: isSubmitting || isDeleting || !layoutReady,
 						children: [isSubmitting && /* @__PURE__ */ 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")]
 					})]
 				})]
@@ -1398,7 +1507,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 = useMemo(() => options?.map((opt) => ({
 		label: opt.name,
 		value: opt.value.toString()
@@ -1412,10 +1521,13 @@ function FormComboboxField({ control, name, label, placeholder = "Select", empty
 		}), /* @__PURE__ */ jsx(Controller, {
 			control,
 			name,
-			render: ({ field: { onChange, value }, fieldState: { error } }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Combobox, {
+			render: ({ field: { onChange: fieldOnChange, value }, fieldState: { error } }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Combobox, {
 				options: comboboxOptions,
 				value: value?.toString() ?? "",
-				onValueChange: onChange,
+				onValueChange: (next) => {
+					fieldOnChange(next);
+					onChange?.(next);
+				},
 				placeholder,
 				emptyText,
 				disabled
@@ -1439,32 +1551,6 @@ const addressFormSchema = z.object({
 	country_code: z.string().min(1, "Country is required"),
 	default: 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",
@@ -1474,47 +1560,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;
 }
@@ -1573,20 +1618,14 @@ function AddressFormDialog({ isOpen, onClose, selectedAddress, onSubmit, isSubmi
 		selectedCountryCode,
 		languageIso
 	]);
-	const fieldOrder = 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 = useMemo(() => groupFields(fieldOrder), [fieldOrder]);
+	const fieldOrder = useMemo(() => addressFieldOrder(bffFields), [bffFields]);
+	const fieldGroups = 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,
@@ -1643,8 +1682,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",
@@ -1652,14 +1691,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,
@@ -1689,7 +1726,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
@@ -1750,7 +1787,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__ */ jsx("div", {
@@ -3006,4 +3047,4 @@ function usePortalCardAdd3DSFlow({ payApi, onApproved, onFailed, onCanceled, t }
 //#endregion
 export { ProfileTranslationBridge as _, getBrowserInfo as a, EditPaymentMethodDialog as c, getCardDisplayName as d, getCardExpiry as f, EllipsesDropdown as g, ConfirmActionDialog as h, isThreeDsRequiredCreate as i, FluidPayCoreProvider as l, UserInfoDialog as m, createFluidPayApiAdapter as n, CreditCardFormDialog as o, getPaymentMethodLogoBrand as p, mapToFluidPayPaymentMethod as r, AddressFormDialog as s, usePortalCardAdd3DSFlow as t, PaymentIcon as u, useProfileTranslation as v };
 
-//# sourceMappingURL=use-portal-card-add-3ds-flow-Cu9yqnIn.mjs.map
+//# sourceMappingURL=use-portal-card-add-3ds-flow-y2cBmujb.mjs.map