@fluid-app/portal-sdk 0.1.311 → 0.1.313

package/dist/{AddressAutocompleteInput-RLaGWKfq.mjs → AddressAutocompleteInput-DY0ZFQOs.mjs}

@@ -1,4 +1,4 @@
-import { R as useAddressAutocompleteApi } from "./FluidProvider-D4T1Tfn7.mjs";
+import { R as useAddressAutocompleteApi } from "./FluidProvider-BdjVFM6g.mjs";
 import { n as useActiveLocale } from "./locale-context-DGCebJhw.mjs";
 import { B as DropdownMenuContent, C as SelectContent, Cn as cn, E as SelectValue, G as DropdownMenuSeparator, Q as DialogContent, R as Label, S as Select, Sn as useZodForm, T as SelectTrigger, V as DropdownMenuItem, X as Dialog, Y as DropdownMenuTrigger, Z as DialogClose, a as Textarea, et as DialogFooter, it as DialogTitle, k as Input, tt as DialogHeader, vn as Button, w as SelectItem, z as DropdownMenu } from "./src-CKQLslxB.mjs";
 import { t as createTranslationContext } from "./translation-api-context-factory-BYNOdpnp.mjs";
@@ -75,6 +75,9 @@ const profileDomain = 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",
@@ -1751,14 +1754,9 @@ function useVgsCollect() {
 }
 //#endregion
 //#region ../../fluid-pay/ui/src/components/CreditCardFormDialog.tsx
-const billingAddressSchema = z.object({
-	name: z.string().min(1, "Name is required"),
-	address1: z.string().min(1, "Address line 1 is required"),
-	address2: z.string().optional().nullable(),
-	city: z.string().min(1, "City is required"),
-	state: z.string().min(1, "State is required"),
-	zip: z.string().min(1, "Zip code is required"),
-	country_code: z.string().min(1, "Country is required"),
+const SENTINEL_CREATE_NEW = "__create_new__";
+const formSchema = z.object({
+	billing_address_selection: z.string().refine((value) => value !== "" && value !== SENTINEL_CREATE_NEW, { message: "Please select a billing address" }),
 	set_as_default: z.boolean()
 });
 function VgsInputWrapper({ id, label, fieldState, className }) {
@@ -1812,68 +1810,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__ */ jsxs("div", {
+		className: "border-input bg-muted/30 rounded-md border p-3 text-sm break-words",
+		children: [
+			address.name && /* @__PURE__ */ jsx("div", {
+				className: "font-medium",
+				children: address.name
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "text-muted-foreground",
+				children: address.address1
+			}),
+			address.address2 && /* @__PURE__ */ jsx("div", {
+				className: "text-muted-foreground",
+				children: address.address2
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "text-muted-foreground",
+				children: [[address.city, address.state].filter(Boolean).join(", "), address.postal_code ? ` ${address.postal_code}` : ""]
+			}),
+			address.country_code && /* @__PURE__ */ 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] = useState(void 0);
 	const [isVgsSubmitting, setIsVgsSubmitting] = useState(false);
+	const [createdAddresses, setCreatedAddresses] = useState([]);
+	const [isAddressDialogOpen, setIsAddressDialogOpen] = useState(false);
 	const { isFormReady, isLoading: isVgsLoading, isScriptLoaded, scriptLoadError, initializeForm, submitCard, vgsFieldState, resetVgs, onSuccessRef, onErrorRef } = useVgsCollect();
-	const { control, handleSubmit, reset, setValue } = useZodForm(billingAddressSchema, { defaultValues: {
-		name: "",
-		address1: "",
-		address2: "",
-		city: "",
-		state: "",
-		zip: "",
-		country_code: "US",
+	const shippingId = shippingAddress?.id ?? null;
+	const dedupedSavedAddresses = useMemo(() => shippingId === null ? savedAddresses : savedAddresses.filter((a) => a.id !== shippingId), [savedAddresses, shippingId]);
+	const allAddresses = 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 = 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 } = useZodForm(formSchema, { defaultValues: {
+		billing_address_selection: initialSelection,
 		set_as_default: false
 	} });
-	const billingCountry = useWatch({
-		control,
-		name: "country_code"
-	});
-	const setAsDefault = 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
-	}));
-	useEffect(() => {
-		handleCountryChange(billingCountry);
-	}, [billingCountry, handleCountryChange]);
 	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 = 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 = 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 = useCallback((value) => {
+		if (value === SENTINEL_CREATE_NEW) {
+			setIsAddressDialogOpen(true);
+			return;
+		}
+		setValue("billing_address_selection", value, { shouldValidate: true });
+	}, [setValue]);
+	const handleAddressCreated = useCallback((address) => {
+		setCreatedAddresses((list) => [...list, address]);
+		setValue("billing_address_selection", address.id.toString(), { shouldValidate: true });
+		setIsAddressDialogOpen(false);
+	}, [setValue]);
 	const handleVgsSuccess = useCallback((response) => {
 		const expValue = response?.card_exp;
 		if (!expValue) {
@@ -1895,31 +1965,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]);
@@ -1936,11 +2001,35 @@ function CreditCardFormDialog({ isOpen, onClose, onSubmit, isSubmitting, countri
 		onSuccessRef,
 		onErrorRef
 	]);
+	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(() => {
@@ -1949,13 +2038,13 @@ function CreditCardFormDialog({ isOpen, onClose, onSubmit, isSubmitting, countri
 		submitCard();
 	});
 	const isBusy = isSubmitting || isVgsSubmitting;
-	return /* @__PURE__ */ jsx(Dialog, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Dialog, {
 		open: isOpen,
 		onOpenChange: (open) => !open && handleClose(),
 		children: /* @__PURE__ */ jsx(DialogContent, {
 			className: "max-h-[90vh] max-w-md overflow-y-auto p-0 md:max-w-xl",
 			children: /* @__PURE__ */ jsxs("div", {
-				className: "relative p-6",
+				className: "relative min-w-0 p-6",
 				children: [
 					(isVgsLoading || !isFormReady) && !scriptLoadError && /* @__PURE__ */ jsx("div", {
 						className: "bg-background/80 absolute inset-0 z-10 flex items-center justify-center rounded backdrop-blur-[1px]",
@@ -1980,64 +2069,47 @@ function CreditCardFormDialog({ isOpen, onClose, onSubmit, isSubmitting, countri
 									className: "text-muted-foreground text-sm font-medium",
 									children: t("billing_address")
 								}),
-								/* @__PURE__ */ jsx(FormSelectField, {
-									control,
-									name: "country_code",
-									label: t("country"),
-									placeholder: t("select_an_option"),
-									options: countrySelectOptions,
-									disabled: isBusy
-								}),
-								/* @__PURE__ */ jsx(FormTextField, {
-									control,
-									name: "name",
-									label: t("name"),
-									disabled: isBusy
-								}),
-								renderAddressAutocomplete ? renderAddressAutocomplete({
-									control,
-									setValue,
-									countryCode: billingCountry
-								}) : /* @__PURE__ */ jsx(FormTextField, {
+								hasRealAddresses ? /* @__PURE__ */ jsx(Controller, {
 									control,
-									name: "address1",
-									label: t("address_line_1"),
-									disabled: isBusy
-								}),
-								/* @__PURE__ */ jsx(FormTextField, {
-									control,
-									name: "address2",
-									label: t("address_line_2"),
-									disabled: isBusy
+									name: "billing_address_selection",
+									render: ({ field: { value }, fieldState: { error: fieldError } }) => /* @__PURE__ */ jsxs("div", {
+										className: "space-y-1",
+										children: [
+											/* @__PURE__ */ jsx(Label, {
+												htmlFor: "billing-address-selection",
+												className: "mb-1.5 block text-sm font-medium",
+												children: t("billing_address")
+											}),
+											/* @__PURE__ */ jsxs(Select, {
+												value,
+												onValueChange: handleSelectionChange,
+												disabled: isBusy,
+												children: [/* @__PURE__ */ jsx(SelectTrigger, {
+													id: "billing-address-selection",
+													"aria-invalid": !!fieldError,
+													className: "w-full min-w-0 [&>span]:block! [&>span]:min-w-0 [&>span]:truncate",
+													children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t("select_an_option") })
+												}), /* @__PURE__ */ jsx(SelectContent, { children: selectOptions.map((opt) => /* @__PURE__ */ jsx(SelectItem, {
+													value: opt.value,
+													onClick: opt.value === SENTINEL_CREATE_NEW ? () => setIsAddressDialogOpen(true) : void 0,
+													children: opt.name
+												}, opt.value)) })]
+											}),
+											fieldError?.message && /* @__PURE__ */ jsx("p", {
+												className: "text-destructive text-sm",
+												children: fieldError.message
+											})
+										]
+									})
+								}) : /* @__PURE__ */ jsx(Button, {
+									type: "button",
+									variant: "outline",
+									onClick: () => setIsAddressDialogOpen(true),
+									disabled: isBusy,
+									className: "w-full",
+									children: t("add_billing_address")
 								}),
-								/* @__PURE__ */ jsxs("div", {
-									className: "flex gap-3",
-									children: [
-										/* @__PURE__ */ jsx(FormTextField, {
-											control,
-											name: "city",
-											label: t("city"),
-											containerClassName: "flex-1",
-											disabled: isBusy
-										}),
-										/* @__PURE__ */ 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__ */ jsx(FormTextField, {
-											control,
-											name: "zip",
-											label: config?.postalLabel ? t(config.postalLabel) : t("zip_code"),
-											containerClassName: "flex-1",
-											disabled: isBusy
-										})
-									]
-								})
+								selectedAddress && /* @__PURE__ */ jsx(AddressSummaryCard, { address: selectedAddress })
 							]
 						})]
 					}),
@@ -2067,7 +2139,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
@@ -2300,4 +2376,4 @@ function AddressAutocompleteInput({ control, setValue, countryIso, addressLineFi
 //#endregion
 export { AddressFormDialog as a, PaymentIcon as c, UserInfoDialog as d, ConfirmActionDialog as f, useProfileTranslation as h, CreditCardFormDialog as i, getCardDisplayName as l, ProfileTranslationBridge as m, createFluidPayApiAdapter as n, EditPaymentMethodDialog as o, EllipsesDropdown as p, mapToFluidPayPaymentMethod as r, FluidPayCoreProvider as s, AddressAutocompleteInput as t, getCardExpiry as u };
 
-//# sourceMappingURL=AddressAutocompleteInput-RLaGWKfq.mjs.map
+//# sourceMappingURL=AddressAutocompleteInput-DY0ZFQOs.mjs.map