@fluid-app/portal-sdk 0.1.311 → 0.1.313

package/dist/{AddressAutocompleteInput-CmbuVfD5.cjs → AddressAutocompleteInput-BqZwiUup.cjs}

@@ -1,5 +1,5 @@
 require("./chunk-9hOWP6kD.cjs");
-const require_FluidProvider = require("./FluidProvider-FvdFx8ML.cjs");
+const require_FluidProvider = require("./FluidProvider-CiMgrTE0.cjs");
 const require_locale_context = require("./locale-context-8CiNKIho.cjs");
 const require_src = require("./src-BYCIOmsD.cjs");
 const require_translation_api_context_factory = require("./translation-api-context-factory-BSuSh5Zg.cjs");
@@ -76,6 +76,9 @@ const profileDomain = require_static_dict_adapter.createDomainTranslations({
 		postal_code: "Postal Code",
 		select_state: "Select state",
 		set_as_default_payment_method: "Set as default payment method",
+		same_as_shipping: "Same as shipping address",
+		use_a_different_address: "Use a different address",
+		add_billing_address: "Add billing address",
 		cancel: "Cancel",
 		save: "Save",
 		close: "Close",
@@ -1752,14 +1755,9 @@ function useVgsCollect() {
 }
 //#endregion
 //#region ../../fluid-pay/ui/src/components/CreditCardFormDialog.tsx
-const billingAddressSchema = zod.z.object({
-	name: zod.z.string().min(1, "Name is required"),
-	address1: zod.z.string().min(1, "Address line 1 is required"),
-	address2: zod.z.string().optional().nullable(),
-	city: zod.z.string().min(1, "City is required"),
-	state: zod.z.string().min(1, "State is required"),
-	zip: zod.z.string().min(1, "Zip code is required"),
-	country_code: zod.z.string().min(1, "Country is required"),
+const SENTINEL_CREATE_NEW = "__create_new__";
+const formSchema = zod.z.object({
+	billing_address_selection: zod.z.string().refine((value) => value !== "" && value !== SENTINEL_CREATE_NEW, { message: "Please select a billing address" }),
 	set_as_default: zod.z.boolean()
 });
 function VgsInputWrapper({ id, label, fieldState, className }) {
@@ -1813,68 +1811,140 @@ function VgsCardForm({ vgsFieldState, networkError }) {
 		]
 	});
 }
-function CreditCardFormDialog({ isOpen, onClose, onSubmit, isSubmitting, countries = [], error, jwt, renderAddressAutocomplete, t }) {
+function formatAddressOneLine(addr) {
+	const cityStateZip = [
+		addr.city,
+		addr.state,
+		addr.postal_code
+	].filter((p) => Boolean(p && p.trim().length > 0)).join(", ");
+	return [
+		addr.address1,
+		addr.address2,
+		cityStateZip,
+		addr.country_code
+	].filter((p) => Boolean(p && p.trim().length > 0)).join(" • ");
+}
+function AddressSummaryCard({ address }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "border-input bg-muted/30 rounded-md border p-3 text-sm break-words",
+		children: [
+			address.name && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "font-medium",
+				children: address.name
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-muted-foreground",
+				children: address.address1
+			}),
+			address.address2 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-muted-foreground",
+				children: address.address2
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "text-muted-foreground",
+				children: [[address.city, address.state].filter(Boolean).join(", "), address.postal_code ? ` ${address.postal_code}` : ""]
+			}),
+			address.country_code && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-muted-foreground",
+				children: address.country_code
+			})
+		]
+	});
+}
+function CreditCardFormDialog({ isOpen, onClose, onSubmit, isSubmitting, error, jwt, shippingAddress, savedAddresses = [], defaultBillingAddressId, renderAddressFormDialog, t }) {
 	const api = useFluidPayApi();
 	const [cardError, setCardError] = (0, react.useState)(void 0);
 	const [isVgsSubmitting, setIsVgsSubmitting] = (0, react.useState)(false);
+	const [createdAddresses, setCreatedAddresses] = (0, react.useState)([]);
+	const [isAddressDialogOpen, setIsAddressDialogOpen] = (0, react.useState)(false);
 	const { isFormReady, isLoading: isVgsLoading, isScriptLoaded, scriptLoadError, initializeForm, submitCard, vgsFieldState, resetVgs, onSuccessRef, onErrorRef } = useVgsCollect();
-	const { control, handleSubmit, reset, setValue } = require_src.useZodForm(billingAddressSchema, { defaultValues: {
-		name: "",
-		address1: "",
-		address2: "",
-		city: "",
-		state: "",
-		zip: "",
-		country_code: "US",
+	const shippingId = shippingAddress?.id ?? null;
+	const dedupedSavedAddresses = (0, react.useMemo)(() => shippingId === null ? savedAddresses : savedAddresses.filter((a) => a.id !== shippingId), [savedAddresses, shippingId]);
+	const allAddresses = (0, react.useMemo)(() => {
+		const list = [];
+		if (shippingAddress) list.push(shippingAddress);
+		list.push(...dedupedSavedAddresses);
+		list.push(...createdAddresses);
+		return list;
+	}, [
+		shippingAddress,
+		dedupedSavedAddresses,
+		createdAddresses
+	]);
+	const hasRealAddresses = allAddresses.length > 0;
+	const initialSelection = (0, react.useMemo)(() => {
+		if (shippingAddress) return shippingAddress.id.toString();
+		if (defaultBillingAddressId && dedupedSavedAddresses.some((a) => a.id === defaultBillingAddressId)) return defaultBillingAddressId.toString();
+		const first = dedupedSavedAddresses[0];
+		if (first) return first.id.toString();
+		return SENTINEL_CREATE_NEW;
+	}, [
+		shippingAddress,
+		defaultBillingAddressId,
+		dedupedSavedAddresses
+	]);
+	const { control, handleSubmit, reset, setValue, watch } = require_src.useZodForm(formSchema, { defaultValues: {
+		billing_address_selection: initialSelection,
 		set_as_default: false
 	} });
-	const billingCountry = (0, react_hook_form.useWatch)({
-		control,
-		name: "country_code"
-	});
-	const setAsDefault = (0, react_hook_form.useWatch)({
-		control,
-		name: "set_as_default"
-	});
-	const { stateOptions, config, handleCountryChange } = useCountryStates();
-	const countrySelectOptions = [...countries].map((country) => ({
-		name: country.name,
-		value: country.iso
-	})).sort((a, b) => {
-		if (a.value === billingCountry) return -1;
-		if (b.value === billingCountry) return 1;
-		return a.name.localeCompare(b.name);
-	});
-	const stateSelectOptions = stateOptions.map((state) => ({
-		name: state.name,
-		value: state.isoCode
-	}));
-	(0, react.useEffect)(() => {
-		handleCountryChange(billingCountry);
-	}, [billingCountry, handleCountryChange]);
 	(0, react.useEffect)(() => {
-		if (!isOpen || !isScriptLoaded) return;
-		let cancelled = false;
-		const init = async () => {
-			try {
-				const credentials = await api.vault.fetchCredentials(jwt);
-				if (!cancelled) await initializeForm(credentials);
-			} catch (err) {
-				console.error("Failed to fetch vault credentials:", err);
-				if (!cancelled) setCardError("Failed to initialize payment form");
-			}
-		};
-		init();
-		return () => {
-			cancelled = true;
-		};
+		if (isOpen) {
+			reset({
+				billing_address_selection: initialSelection,
+				set_as_default: false
+			});
+			setCreatedAddresses([]);
+		}
 	}, [
 		isOpen,
-		isScriptLoaded,
-		jwt,
-		api,
-		initializeForm
+		initialSelection,
+		reset
 	]);
+	const currentSelection = watch("billing_address_selection");
+	const setAsDefault = watch("set_as_default");
+	const selectedAddress = (0, react.useMemo)(() => {
+		if (!currentSelection || currentSelection === SENTINEL_CREATE_NEW) return null;
+		const id = Number(currentSelection);
+		if (!Number.isFinite(id)) return null;
+		return allAddresses.find((a) => a.id === id) ?? null;
+	}, [currentSelection, allAddresses]);
+	const selectOptions = (0, react.useMemo)(() => {
+		const options = [];
+		if (shippingAddress) options.push({
+			name: t("same_as_shipping"),
+			value: shippingAddress.id.toString()
+		});
+		for (const addr of dedupedSavedAddresses) options.push({
+			name: formatAddressOneLine(addr),
+			value: addr.id.toString()
+		});
+		for (const addr of createdAddresses) options.push({
+			name: formatAddressOneLine(addr),
+			value: addr.id.toString()
+		});
+		options.push({
+			name: t("use_a_different_address"),
+			value: SENTINEL_CREATE_NEW
+		});
+		return options;
+	}, [
+		shippingAddress,
+		dedupedSavedAddresses,
+		createdAddresses,
+		t
+	]);
+	const handleSelectionChange = (0, react.useCallback)((value) => {
+		if (value === SENTINEL_CREATE_NEW) {
+			setIsAddressDialogOpen(true);
+			return;
+		}
+		setValue("billing_address_selection", value, { shouldValidate: true });
+	}, [setValue]);
+	const handleAddressCreated = (0, react.useCallback)((address) => {
+		setCreatedAddresses((list) => [...list, address]);
+		setValue("billing_address_selection", address.id.toString(), { shouldValidate: true });
+		setIsAddressDialogOpen(false);
+	}, [setValue]);
 	const handleVgsSuccess = (0, react.useCallback)((response) => {
 		const expValue = response?.card_exp;
 		if (!expValue) {
@@ -1896,31 +1966,26 @@ function CreditCardFormDialog({ isOpen, onClose, onSubmit, isSubmitting, countri
 			return;
 		}
 		handleSubmit((formData) => {
+			const billingAddressId = Number(formData.billing_address_selection);
+			if (!Number.isFinite(billingAddressId)) {
+				setCardError("Please select a billing address.");
+				setIsVgsSubmitting(false);
+				return;
+			}
 			onSubmit({
-				type: "credit_card",
-				country_code: formData.country_code,
-				default_payment_method: formData.set_as_default,
+				set_as_default: formData.set_as_default,
 				payment_method: {
 					token: response.card_number,
 					cvv_token: response.card_cvc,
 					exp_month: expMonth,
 					exp_year: expYear,
-					card_holder: cardholderName,
-					billing_zip: formData.zip
+					card_holder: cardholderName
 				},
-				billing_address: {
-					name: formData.name,
-					address1: formData.address1,
-					address2: formData.address2 ?? void 0,
-					city: formData.city,
-					state: formData.state,
-					zip: formData.zip,
-					country_code: formData.country_code
-				}
+				billing_address_id: billingAddressId
 			});
 			setIsVgsSubmitting(false);
 		}, () => {
-			setCardError("Please fix the errors in the billing address.");
+			setCardError("Please select a billing address.");
 			setIsVgsSubmitting(false);
 		})();
 	}, [handleSubmit, onSubmit]);
@@ -1937,11 +2002,35 @@ function CreditCardFormDialog({ isOpen, onClose, onSubmit, isSubmitting, countri
 		onSuccessRef,
 		onErrorRef
 	]);
+	(0, react.useEffect)(() => {
+		if (!isOpen || !isScriptLoaded) return;
+		let cancelled = false;
+		const init = async () => {
+			try {
+				const credentials = await api.vault.fetchCredentials(jwt);
+				if (!cancelled) await initializeForm(credentials);
+			} catch (err) {
+				console.error("Failed to fetch vault credentials:", err);
+				if (!cancelled) setCardError("Failed to initialize payment form");
+			}
+		};
+		init();
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		isOpen,
+		isScriptLoaded,
+		jwt,
+		api,
+		initializeForm
+	]);
 	const handleClose = () => {
 		resetVgs();
 		reset();
 		setCardError(void 0);
 		setIsVgsSubmitting(false);
+		setIsAddressDialogOpen(false);
 		onClose();
 	};
 	const handleFormSubmit = handleSubmit(() => {
@@ -1950,13 +2039,13 @@ function CreditCardFormDialog({ isOpen, onClose, onSubmit, isSubmitting, countri
 		submitCard();
 	});
 	const isBusy = isSubmitting || isVgsSubmitting;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Dialog, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Dialog, {
 		open: isOpen,
 		onOpenChange: (open) => !open && handleClose(),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogContent, {
 			className: "max-h-[90vh] max-w-md overflow-y-auto p-0 md:max-w-xl",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "relative p-6",
+				className: "relative min-w-0 p-6",
 				children: [
 					(isVgsLoading || !isFormReady) && !scriptLoadError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "bg-background/80 absolute inset-0 z-10 flex items-center justify-center rounded backdrop-blur-[1px]",
@@ -1981,64 +2070,47 @@ function CreditCardFormDialog({ isOpen, onClose, onSubmit, isSubmitting, countri
 									className: "text-muted-foreground text-sm font-medium",
 									children: t("billing_address")
 								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormSelectField, {
-									control,
-									name: "country_code",
-									label: t("country"),
-									placeholder: t("select_an_option"),
-									options: countrySelectOptions,
-									disabled: isBusy
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormTextField, {
-									control,
-									name: "name",
-									label: t("name"),
-									disabled: isBusy
-								}),
-								renderAddressAutocomplete ? renderAddressAutocomplete({
-									control,
-									setValue,
-									countryCode: billingCountry
-								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormTextField, {
+								hasRealAddresses ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_hook_form.Controller, {
 									control,
-									name: "address1",
-									label: t("address_line_1"),
-									disabled: isBusy
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormTextField, {
-									control,
-									name: "address2",
-									label: t("address_line_2"),
-									disabled: isBusy
+									name: "billing_address_selection",
+									render: ({ field: { value }, fieldState: { error: fieldError } }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "space-y-1",
+										children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Label, {
+												htmlFor: "billing-address-selection",
+												className: "mb-1.5 block text-sm font-medium",
+												children: t("billing_address")
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Select, {
+												value,
+												onValueChange: handleSelectionChange,
+												disabled: isBusy,
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.SelectTrigger, {
+													id: "billing-address-selection",
+													"aria-invalid": !!fieldError,
+													className: "w-full min-w-0 [&>span]:block! [&>span]:min-w-0 [&>span]:truncate",
+													children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.SelectValue, { placeholder: t("select_an_option") })
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.SelectContent, { children: selectOptions.map((opt) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.SelectItem, {
+													value: opt.value,
+													onClick: opt.value === SENTINEL_CREATE_NEW ? () => setIsAddressDialogOpen(true) : void 0,
+													children: opt.name
+												}, opt.value)) })]
+											}),
+											fieldError?.message && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+												className: "text-destructive text-sm",
+												children: fieldError.message
+											})
+										]
+									})
+								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+									type: "button",
+									variant: "outline",
+									onClick: () => setIsAddressDialogOpen(true),
+									disabled: isBusy,
+									className: "w-full",
+									children: t("add_billing_address")
 								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "flex gap-3",
-									children: [
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormTextField, {
-											control,
-											name: "city",
-											label: t("city"),
-											containerClassName: "flex-1",
-											disabled: isBusy
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormSelectField, {
-											control,
-											name: "state",
-											label: config?.regionLabel ? t(config.regionLabel) : t("state"),
-											placeholder: t("select_state"),
-											options: stateSelectOptions,
-											containerClassName: "flex-1",
-											disabled: isBusy
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormTextField, {
-											control,
-											name: "zip",
-											label: config?.postalLabel ? t(config.postalLabel) : t("zip_code"),
-											containerClassName: "flex-1",
-											disabled: isBusy
-										})
-									]
-								})
+								selectedAddress && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddressSummaryCard, { address: selectedAddress })
 							]
 						})]
 					}),
@@ -2068,7 +2140,11 @@ function CreditCardFormDialog({ isOpen, onClose, onSubmit, isSubmitting, countri
 				]
 			})
 		})
-	});
+	}), renderAddressFormDialog?.({
+		isOpen: isAddressDialogOpen,
+		onClose: () => setIsAddressDialogOpen(false),
+		onAddressCreated: handleAddressCreated
+	})] });
 }
 //#endregion
 //#region src/adapters/fluid-pay-api-adapter.ts
@@ -2390,4 +2466,4 @@ Object.defineProperty(exports, "useProfileTranslation", {
 	}
 });
 
-//# sourceMappingURL=AddressAutocompleteInput-CmbuVfD5.cjs.map
+//# sourceMappingURL=AddressAutocompleteInput-BqZwiUup.cjs.map