@fluid-app/portal-sdk 0.1.350 → 0.1.352

package/dist/{AddressAutocompleteInput-JBXGT1iL.cjs → AddressAutocompleteInput-BQz2jaUO.cjs}

@@ -1,7 +1,7 @@
 require("./chunk-9hOWP6kD.cjs");
-const require_FluidProvider = require("./FluidProvider-BVJmIM13.cjs");
-const require_static_dict_adapter = require("./static-dict-adapter-JAau5LHb.cjs");
-const require_translation_api_context_factory = require("./translation-api-context-factory-BSRK6Z50.cjs");
+const require_FluidProvider = require("./FluidProvider-CMfpLju8.cjs");
+const require_static_dict_adapter = require("./static-dict-adapter-BLq4QzCI.cjs");
+const require_translation_api_context_factory = require("./translation-api-context-factory-CjRDqIhF.cjs");
 const require_src = require("./src-Cx7UyT_c.cjs");
 const require_Combobox = require("./Combobox-BqqGQkac.cjs");
 let react = require("react");
@@ -343,7 +343,7 @@ function ConfirmActionDialog({ title, description, onAction, openDialog, setOpen
 					children: errorMsg
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogFooter, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex w-full flex-row justify-between space-x-2",
+					className: "flex w-full flex-row justify-between gap-x-2",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogClose, {
 						asChild: true,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
@@ -1052,7 +1052,7 @@ function EditPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "bg-muted rounded-lg p-4",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex items-center space-x-3",
+							className: "flex items-center gap-x-3",
 							children: [details.logo_url && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "h-6 w-10 flex-shrink-0",
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
@@ -1140,7 +1140,7 @@ function EditPaymentMethodDialog({ isOpen, paymentMethod, billingAddress, onClos
 					})] })]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "mt-2 flex items-center space-x-2",
+					className: "mt-2 flex items-center gap-x-2",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 						type: "checkbox",
 						id: "set_as_default",
@@ -1285,8 +1285,58 @@ const addressFormSchema = zod.z.object({
 	country_code: zod.z.string().min(1, "Country is required"),
 	default: zod.z.boolean()
 });
-function AddressFormDialog({ isOpen, onClose, selectedAddress, onSubmit, isSubmitting, countries = [], error, renderAddressAutocomplete, fetchStates, t, onDelete, isDeleting = false, defaultCountry = "US" }) {
+const STATIC_FIELD_ORDER = [
+	"first_name",
+	"last_name",
+	"address1",
+	"address2",
+	"city",
+	"state",
+	"postal_code"
+];
+const STATIC_LABELS = {
+	first_name: "first_name",
+	last_name: "last_name",
+	address1: "address_line_1",
+	address2: "address_line_2",
+	city: "city",
+	state: "state",
+	postal_code: "zip_code"
+};
+function groupFields(fields) {
+	const groups = [];
+	let i = 0;
+	while (i < fields.length) {
+		const current = fields[i];
+		const next = fields[i + 1];
+		if (current === "first_name" && next === "last_name" || current === "last_name" && next === "first_name") {
+			groups.push([current, next]);
+			i += 2;
+			continue;
+		}
+		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 AddressFormDialog({ isOpen, onClose, selectedAddress, onSubmit, isSubmitting, countries = [], error, renderAddressAutocomplete, fetchStates, t, onDelete, isDeleting = false, defaultCountry = "US", languageIso }) {
 	const [confirmDelete, setConfirmDelete] = (0, react.useState)(false);
+	const addressFieldsApi = require_FluidProvider.useAddressFieldsApiOptional();
+	const [bffFields, setBffFields] = (0, react.useState)(null);
 	(0, react.useEffect)(() => {
 		if (!isOpen) setConfirmDelete(false);
 	}, [isOpen]);
@@ -1324,6 +1374,40 @@ function AddressFormDialog({ isOpen, onClose, selectedAddress, onSubmit, isSubmi
 		name: "default"
 	});
 	const { stateOptions, config, handleCountryChange } = useCountryStates();
+	(0, react.useEffect)(() => {
+		if (!addressFieldsApi || !selectedCountryCode) return;
+		let cancelled = false;
+		setBffFields(null);
+		addressFieldsApi.fetchAddressFields(selectedCountryCode, languageIso).then((response) => {
+			if (!cancelled) setBffFields([...response.address_fields.fields]);
+		}).catch(() => {
+			if (!cancelled) setBffFields(null);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		addressFieldsApi,
+		selectedCountryCode,
+		languageIso
+	]);
+	const fieldOrder = (0, react.useMemo)(() => {
+		if (!bffFields) return STATIC_FIELD_ORDER;
+		const bffOrder = bffFields.map((f) => f.field).filter((f) => STATIC_FIELD_ORDER.includes(f));
+		const missing = STATIC_FIELD_ORDER.filter((f) => !bffOrder.includes(f));
+		return [...bffOrder, ...missing];
+	}, [bffFields]);
+	const fieldGroups = (0, react.useMemo)(() => groupFields(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 countrySelectOptions = [...countries].map((country) => ({
 		name: country.name,
 		value: country.iso
@@ -1392,6 +1476,33 @@ function AddressFormDialog({ isOpen, onClose, selectedAddress, onSubmit, isSubmi
 			default: data.default
 		} });
 	});
+	const renderField = (fieldName, containerClassName) => {
+		const label = getFieldLabel(fieldName);
+		if (fieldName === "state" && stateSelectOptions.length > 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormComboboxField, {
+			control,
+			name: "state",
+			label,
+			placeholder: t("select_state"),
+			options: stateSelectOptions,
+			containerClassName,
+			disabled: isSubmitting
+		}, fieldName);
+		if (fieldName === "address1" && renderAddressAutocomplete) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: containerClassName,
+			children: renderAddressAutocomplete({
+				control,
+				setValue,
+				countryCode: selectedCountryCode
+			})
+		}, fieldName);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormTextField, {
+			control,
+			name: fieldName,
+			label,
+			containerClassName,
+			disabled: isSubmitting
+		}, fieldName);
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Dialog, {
 		open: isOpen,
 		onOpenChange: (open) => !open && onClose(),
@@ -1404,76 +1515,20 @@ function AddressFormDialog({ isOpen, onClose, selectedAddress, onSubmit, isSubmi
 				}) }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "space-y-3 pt-2",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormComboboxField, {
-							control,
-							name: "country_code",
-							label: t("country"),
-							placeholder: t("select_an_option"),
-							options: countrySelectOptions,
-							disabled: isSubmitting
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex gap-3",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormTextField, {
-								control,
-								name: "first_name",
-								label: t("first_name"),
-								containerClassName: "flex-1",
-								disabled: isSubmitting
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormTextField, {
-								control,
-								name: "last_name",
-								label: t("last_name"),
-								containerClassName: "flex-1",
-								disabled: isSubmitting
-							})]
-						}),
-						renderAddressAutocomplete ? renderAddressAutocomplete({
-							control,
-							setValue,
-							countryCode: selectedCountryCode
-						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormTextField, {
-							control,
-							name: "address1",
-							label: t("address_line_1"),
-							disabled: isSubmitting
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormTextField, {
-							control,
-							name: "address2",
-							label: t("address_line_2"),
-							disabled: isSubmitting
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormComboboxField, {
+						control,
+						name: "country_code",
+						label: t("country"),
+						placeholder: t("select_an_option"),
+						options: countrySelectOptions,
+						disabled: isSubmitting
+					}), fieldGroups.map((group) => {
+						if (group.length === 1) return renderField(group[0]);
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "flex gap-3",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormTextField, {
-									control,
-									name: "city",
-									label: t("city"),
-									containerClassName: "flex-1",
-									disabled: isSubmitting
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormComboboxField, {
-									control,
-									name: "state",
-									label: config?.regionLabel ? t(config.regionLabel) : t("state"),
-									placeholder: t("select_state"),
-									options: stateSelectOptions,
-									containerClassName: "flex-1",
-									disabled: isSubmitting
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormTextField, {
-									control,
-									name: "postal_code",
-									label: config?.postalLabel ? t(config.postalLabel) : t("zip_code"),
-									containerClassName: "flex-1",
-									disabled: isSubmitting
-								})
-							]
-						})
-					]
+							children: group.map((fieldName) => renderField(fieldName, "flex-1"))
+						}, group.join("-"));
+					})]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "mt-4 flex flex-wrap items-center justify-between gap-3",
@@ -1490,7 +1545,7 @@ function AddressFormDialog({ isOpen, onClose, selectedAddress, onSubmit, isSubmi
 					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "flex items-center gap-3",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex items-center space-x-2",
+							className: "flex items-center gap-x-2",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 								type: "checkbox",
 								id: "set_as_default_address",
@@ -2115,7 +2170,7 @@ function CreditCardFormDialog({ isOpen, onClose, onSubmit, isSubmitting, error,
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "mt-4 flex items-center justify-between",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex items-center space-x-2",
+							className: "flex items-center gap-x-2",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 								type: "checkbox",
 								id: "set_as_default_cc",
@@ -2465,4 +2520,4 @@ Object.defineProperty(exports, "useProfileTranslation", {
 	}
 });
 
-//# sourceMappingURL=AddressAutocompleteInput-JBXGT1iL.cjs.map
+//# sourceMappingURL=AddressAutocompleteInput-BQz2jaUO.cjs.map