@fluid-app/portal-sdk 0.1.254 → 0.1.255

package/dist/{SubscriptionsScreen-ByoOMsky.cjs → SubscriptionsScreen-Bm8Ncl1e.cjs}

@@ -8,7 +8,7 @@ const require_ScreenHeaderContext = require("./ScreenHeaderContext-JDIUM84f.cjs"
 const require_query_keys = require("./query-keys-BpEJqQUB.cjs");
 const require_use_account = require("./use-account-BfU-TydK.cjs");
 const require_AppNavigationContext = require("./AppNavigationContext-CDowN9gd.cjs");
-const require_AddressAutocompleteInput = require("./AddressAutocompleteInput-eO2ZMNvX.cjs");
+const require_AddressAutocompleteInput = require("./AddressAutocompleteInput-W2jWPYoJ.cjs");
 const require_isAfter = require("./isAfter-DoabulQ5.cjs");
 const require_order_status_badge = require("./order-status-badge-BbY5RoiL.cjs");
 const require_SearchSort = require("./SearchSort-CKdDCwqf.cjs");
@@ -2706,6 +2706,7 @@ function createPortalSubscriptionsAdapter(client) {
 			const subscription = {};
 			if (body.payment_method_id != null) subscription.payment_method_id = body.payment_method_id;
 			if (body.quantity != null) subscription.quantity = body.quantity;
+			if (body.address_id != null) subscription.address_id = body.address_id;
 			if (body.next_bill_date != null) subscription.next_bill_date = body.next_bill_date;
 			return mapSubscriptionDetail(await require_portal_tenant.subscriptions_update(client, subscriptionToken, { subscription }));
 		}
@@ -4064,7 +4065,7 @@ function SubscriptionManagementSection({ subscription, isActive, isPaused, isCan
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "pt-2",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-						className: "text-foreground text-sm/6 font-semibold",
+						className: "text-foreground mb-4 text-sm/6 font-semibold",
 						children: "Payment & Shipping"
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "flex flex-col",
@@ -4464,136 +4465,119 @@ function SubscriptionDetailScreen$1({ token, onNavigateToList, onNavigateToSubsc
 * (accordion, collapsed summary, list, add button), with rows that
 * commit a selection through onSelectPaymentMethod when clicked.
 */
-function SelectablePaymentMethodDropdown({ title, displayPaymentMethod, paymentMethodList, selectedPaymentMethodId, onSelectPaymentMethod, onAddPaymentMethodClick, addPaymentMethodLabel = "+ Add a payment method", showAddButton = true, isLoading = false, isPending = false, className = "" }) {
-	const [paymentsValue, setPaymentsValue] = (0, react.useState)("");
-	const renderPaymentMethod = (paymentMethod) => {
-		const expiry = require_AddressAutocompleteInput.getCardExpiry(paymentMethod);
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex flex-row items-center space-x-2",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex h-6 w-10 flex-shrink-0 items-center justify-center",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.PaymentIcon, {
-					logoUrl: paymentMethod.details.logo_url,
-					brand: paymentMethod.details.card_type,
-					alt: paymentMethod.details.card_type ?? "Payment Method"
-				})
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex flex-col",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "text-foreground flex items-center text-sm font-medium capitalize",
-					children: require_AddressAutocompleteInput.getCardDisplayName(paymentMethod)
-				}), expiry && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "text-muted-foreground text-sm",
-					children: expiry
-				})]
-			})]
-		});
-	};
+function SelectablePaymentMethodDropdown({ title, displayPaymentMethod, paymentMethodList, selectedPaymentMethodId, onSelectPaymentMethod, onAddPaymentMethodClick, onEditPaymentMethod, onDeletePaymentMethod, onMakeDefaultPaymentMethod, addPaymentMethodLabel = "+ Add a payment method", showAddButton = true, isLoading = false, isPending = false, className = "" }) {
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const sectionId = (0, react.useId)();
+	const collapsedExpiry = displayPaymentMethod ? require_AddressAutocompleteInput.getCardExpiry(displayPaymentMethod) : null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: require_src.cn("border-border mb-6 border-b pb-4", className),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Accordion, {
-			type: "single",
-			collapsible: true,
-			value: paymentsValue,
-			onValueChange: setPaymentsValue,
-			className: "w-full",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AccordionItem, {
-				value: "payment_methods",
-				className: "border-b-0",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex flex-row items-center justify-between",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "text-muted-foreground mt-4 mb-1 text-sm",
-							children: title
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AccordionTrigger, { className: "m-0 ml-2 flex h-auto min-h-0 w-auto py-0 hover:no-underline" })]
-					}),
-					!paymentsValue && isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "mb-2 flex w-full flex-row items-center space-x-2",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-6 w-10" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex flex-col space-y-1",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-32" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-24" })]
-						})]
-					}) : !paymentsValue && displayPaymentMethod && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "mb-2 flex w-full cursor-pointer flex-col",
-						onClick: () => setPaymentsValue("payment_methods"),
-						children: renderPaymentMethod(displayPaymentMethod)
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AccordionContent, {
-						className: "max-h-[400px] overflow-y-auto px-0.5 pt-2 pb-1",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "mt-2 flex flex-col justify-between space-y-4",
-							children: isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: [1, 2].map((i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "bg-muted items-center rounded p-3",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "flex flex-row items-center space-x-2",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-6 w-10" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "flex flex-col space-y-1",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-32" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-24" })]
-									})]
-								})
-							}, `skeleton-${i}`)) }) : paymentMethodList.map((paymentMethod) => {
-								const isSelected = selectedPaymentMethodId === paymentMethod.id;
-								const expiry = require_AddressAutocompleteInput.getCardExpiry(paymentMethod);
-								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-									type: "button",
-									"aria-pressed": isSelected,
-									disabled: isPending,
-									onClick: () => onSelectPaymentMethod(paymentMethod),
-									className: require_src.cn("bg-card text-card-foreground ring-border flex min-h-[48px] w-full flex-row items-center justify-between space-x-2 rounded p-3 text-left ring-1 transition-opacity", "not-disabled:cursor-pointer disabled:cursor-not-allowed", {
-										"opacity-60 hover:opacity-100": !isSelected,
-										"ring-primary z-10 opacity-100": isSelected
-									}),
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "flex flex-row items-center space-x-3",
-										children: [
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												"aria-hidden": true,
-												className: require_src.cn("flex h-4 w-4 shrink-0 items-center justify-center rounded-full border", isSelected ? "border-primary" : "border-input"),
-												children: isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "bg-primary h-2 w-2 rounded-full" })
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-												className: "flex h-6 w-10 flex-shrink-0 items-center justify-center",
-												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.PaymentIcon, {
-													logoUrl: paymentMethod.details.logo_url,
-													brand: paymentMethod.details.card_type,
-													alt: paymentMethod.details.card_type ?? "Payment Method"
-												})
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-												className: "flex flex-col",
-												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-													className: "text-card-foreground flex items-center text-sm font-medium capitalize",
-													children: require_AddressAutocompleteInput.getCardDisplayName(paymentMethod)
-												}), expiry && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-													className: "text-muted-foreground text-sm",
-													children: expiry
-												})]
-											})
-										]
-									}), paymentMethod.default && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-										className: "bg-secondary text-secondary-foreground rounded px-2 py-0.5 text-xs font-medium",
-										children: "Default"
-									})]
-								}, paymentMethod.id);
-							})
-						})
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				"aria-expanded": isOpen,
+				"aria-controls": sectionId,
+				onClick: () => setIsOpen((prev) => !prev),
+				className: "flex w-full flex-row items-center justify-between",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-muted-foreground text-sm",
+					children: title
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: require_src.cn("text-muted-foreground h-4 w-4 transition-transform duration-200", isOpen && "rotate-180") })]
+			}),
+			!isOpen && displayPaymentMethod && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				onClick: () => setIsOpen(true),
+				className: "mt-1 mb-2 flex w-full cursor-pointer flex-row items-center gap-3 text-left",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex h-6 w-10 flex-shrink-0 items-center justify-center",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.PaymentIcon, {
+						logoUrl: displayPaymentMethod.details.logo_url,
+						brand: displayPaymentMethod.details.card_type,
+						alt: displayPaymentMethod.details.card_type ?? "Payment Method"
 					})
-				]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex min-w-0 flex-col",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-foreground text-sm font-medium capitalize",
+						children: require_AddressAutocompleteInput.getCardDisplayName(displayPaymentMethod)
+					}), collapsedExpiry && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-muted-foreground text-sm",
+						children: collapsedExpiry
+					})]
+				})]
+			}),
+			isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				id: sectionId,
+				className: "mt-5 flex max-h-[400px] flex-col space-y-4 overflow-y-auto pr-0.5",
+				children: isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: [1, 2].map((i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "bg-muted flex flex-row items-center space-x-2 rounded-sm p-3",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-6 w-10" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-col space-y-1",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-32" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-24" })]
+					})]
+				}, `skeleton-${i}`)) }) : paymentMethodList.map((paymentMethod) => {
+					const isSelected = selectedPaymentMethodId === paymentMethod.id;
+					const expiry = require_AddressAutocompleteInput.getCardExpiry(paymentMethod);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						"aria-pressed": isSelected,
+						disabled: isPending,
+						onClick: () => onSelectPaymentMethod(paymentMethod),
+						className: require_src.cn("text-foreground flex w-full flex-row items-center justify-between gap-3 rounded-sm p-3 text-left transition-colors", "not-disabled:cursor-pointer disabled:cursor-not-allowed disabled:opacity-60", isSelected ? "bg-background border-border border" : "bg-muted hover:bg-muted/80 border border-transparent"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex min-w-0 flex-row items-center gap-3",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "flex h-6 w-10 flex-shrink-0 items-center justify-center",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.PaymentIcon, {
+									logoUrl: paymentMethod.details.logo_url,
+									brand: paymentMethod.details.card_type,
+									alt: paymentMethod.details.card_type ?? "Payment Method"
+								})
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex min-w-0 flex-col",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "text-foreground text-sm font-medium capitalize",
+									children: require_AddressAutocompleteInput.getCardDisplayName(paymentMethod)
+								}), expiry && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "text-muted-foreground text-sm",
+									children: expiry
+								})]
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex shrink-0 flex-row items-center gap-2",
+							children: [paymentMethod.default && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "bg-primary text-primary-foreground rounded px-2 py-0.5 text-xs font-medium",
+								children: "Default"
+							}), (onEditPaymentMethod || onDeletePaymentMethod || onMakeDefaultPaymentMethod) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								onClick: (e) => e.stopPropagation(),
+								onKeyDown: (e) => e.stopPropagation(),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.EllipsesDropdown, {
+									onEdit: onEditPaymentMethod ? () => onEditPaymentMethod(paymentMethod) : void 0,
+									onDelete: onDeletePaymentMethod ? () => onDeletePaymentMethod(paymentMethod) : void 0,
+									onMakeDefault: !paymentMethod.default && onMakeDefaultPaymentMethod ? () => onMakeDefaultPaymentMethod(paymentMethod) : void 0
+								})
+							})]
+						})]
+					}, paymentMethod.id);
+				})
+			}),
+			showAddButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				disabled: isPending,
+				className: "text-foreground mt-3 text-left text-sm disabled:cursor-not-allowed disabled:opacity-60",
+				onClick: onAddPaymentMethodClick,
+				children: addPaymentMethodLabel
 			})
-		}), showAddButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-			type: "button",
-			disabled: isPending,
-			className: require_src.cn("text-foreground text-left text-sm disabled:cursor-not-allowed disabled:opacity-60", paymentsValue ? "mt-4" : "mt-3"),
-			onClick: onAddPaymentMethodClick,
-			children: addPaymentMethodLabel
-		})]
+		]
 	});
 }
 //#endregion
 //#region src/subscriptions/PortalSubscriptionPaymentMethodSection.tsx
-const t = (key) => ({
+const t$1 = (key) => ({
 	add_credit_card: "Add Credit Card",
+	edit_card: "Card Details",
+	delete_credit_card: "Delete Credit Card",
+	delete_credit_card_message: "Are you sure you want to delete this payment method? This action cannot be undone.",
+	delete: "Delete",
 	save_card: "Save Card",
 	securing: "Loading secure form...",
 	cancel: "Cancel",
@@ -4641,6 +4625,9 @@ function PortalSubscriptionPaymentMethodSection({ paymentMethod: currentPaymentM
 	const queryClient = (0, _tanstack_react_query.useQueryClient)();
 	const fluidPayShim = (0, react.useMemo)(() => require_AddressAutocompleteInput.createFluidPayApiAdapter(payApi), [payApi]);
 	const [isAddDialogOpen, setIsAddDialogOpen] = (0, react.useState)(false);
+	const [editingPaymentMethod, setEditingPaymentMethod] = (0, react.useState)(null);
+	const [deletingPaymentMethod, setDeletingPaymentMethod] = (0, react.useState)(null);
+	const [deleteError, setDeleteError] = (0, react.useState)(void 0);
 	const { data: paymentMethods = [], isLoading: isLoadingMethods } = (0, _tanstack_react_query.useQuery)({
 		queryKey: require_query_keys.payKeys.paymentMethods.list(),
 		queryFn: async () => {
@@ -4651,7 +4638,7 @@ function PortalSubscriptionPaymentMethodSection({ paymentMethod: currentPaymentM
 	const { data: countriesData } = (0, _tanstack_react_query.useQuery)({
 		queryKey: require_query_keys.storeKeys.countries(),
 		queryFn: () => countriesApi.listCountries(),
-		enabled: isAddDialogOpen
+		enabled: isAddDialogOpen || editingPaymentMethod !== null
 	});
 	const countryOptions = (0, react.useMemo)(() => [...countriesData?.countries ?? []].map((c) => ({
 		iso: c.code,
@@ -4676,49 +4663,513 @@ function PortalSubscriptionPaymentMethodSection({ paymentMethod: currentPaymentM
 		},
 		onError: (err) => onError?.("Failed to add payment method", err)
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_AddressAutocompleteInput.FluidPayCoreProvider, {
-		api: fluidPayShim,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectablePaymentMethodDropdown, {
-			title: "Payment Method",
-			displayPaymentMethod: paymentMethods.find((pm) => pm.id === currentPaymentMethod.id) ?? subscriptionPaymentMethodToFluidPay(currentPaymentMethod),
-			paymentMethodList: paymentMethods,
-			onAddPaymentMethodClick: () => setIsAddDialogOpen(true),
-			addPaymentMethodLabel: "+ Add Payment Method",
-			showAddButton: true,
-			isLoading: isLoadingMethods,
-			isPending: updateSubscription.isPending || addCardMutation.isPending,
-			selectedPaymentMethodId: currentPaymentMethod.id,
-			onSelectPaymentMethod: (pm) => {
-				if (pm.id === currentPaymentMethod.id) return;
-				updateSubscription.mutate({
-					subscriptionToken,
-					body: { payment_method_id: pm.id }
-				});
+	const updatePaymentMethodMutation = (0, _tanstack_react_query.useMutation)({
+		mutationFn: ({ paymentMethodId, data }) => payApi.updatePaymentMethod(paymentMethodId, { payment_method: {
+			default: data.set_as_default,
+			billing_address: {
+				name: data.billing_address.name,
+				street1: data.billing_address.address1,
+				street2: data.billing_address.address2 ?? null,
+				city: data.billing_address.city,
+				state: data.billing_address.state,
+				zip: data.billing_address.zip,
+				country: data.billing_address.country_code
 			}
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.CreditCardFormDialog, {
-			isOpen: isAddDialogOpen,
-			onClose: () => setIsAddDialogOpen(false),
-			t,
-			onSubmit: async (data) => {
-				try {
-					await addCardMutation.mutateAsync(data);
-					setIsAddDialogOpen(false);
-				} catch {}
-			},
-			isSubmitting: addCardMutation.isPending,
-			countries: countryOptions,
-			jwt: "",
-			renderAddressAutocomplete: ({ control, setValue, countryCode }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.AddressAutocompleteInput, {
-				control,
-				setValue,
-				countryIso: countryCode,
-				addressLineField: "address1",
-				cityField: "city",
-				stateField: "state",
-				postalCodeField: "zip",
-				placeholder: t("address_line_1")
+		} }),
+		onSuccess: async () => {
+			await queryClient.invalidateQueries({ queryKey: require_query_keys.payKeys.paymentMethods.all });
+			onSuccess?.("Payment method updated");
+		},
+		onError: (err) => onError?.("Failed to update payment method", err)
+	});
+	const deletePaymentMethodMutation = (0, _tanstack_react_query.useMutation)({
+		mutationFn: (paymentMethodId) => payApi.deletePaymentMethod(paymentMethodId),
+		onSuccess: async () => {
+			await queryClient.invalidateQueries({ queryKey: require_query_keys.payKeys.paymentMethods.all });
+			onSuccess?.("Payment method deleted");
+		}
+	});
+	const makeDefaultPaymentMethodMutation = (0, _tanstack_react_query.useMutation)({
+		mutationFn: (pm) => {
+			const body = { payment_method: { default: true } };
+			if (pm.billing_address) body.payment_method.billing_address = {
+				name: pm.billing_address.name,
+				street1: pm.billing_address.address1 ?? "",
+				street2: pm.billing_address.address2 ?? null,
+				city: pm.billing_address.city ?? "",
+				state: pm.billing_address.state ?? "",
+				zip: pm.billing_address.zip ?? "",
+				country: pm.billing_address.country_code ?? ""
+			};
+			return payApi.updatePaymentMethod(pm.id, body);
+		},
+		onSuccess: async () => {
+			await queryClient.invalidateQueries({ queryKey: require_query_keys.payKeys.paymentMethods.all });
+			onSuccess?.("Default payment method updated");
+		},
+		onError: (err) => onError?.("Failed to update default payment method", err)
+	});
+	const displayed = paymentMethods.find((pm) => pm.id === currentPaymentMethod.id) ?? subscriptionPaymentMethodToFluidPay(currentPaymentMethod);
+	const handleConfirmDelete = async () => {
+		if (!deletingPaymentMethod) return;
+		setDeleteError(void 0);
+		try {
+			await deletePaymentMethodMutation.mutateAsync(deletingPaymentMethod.id);
+			setDeletingPaymentMethod(null);
+		} catch (err) {
+			setDeleteError(err instanceof Error ? err.message : "We were unable to delete this payment method. Please try again.");
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.FluidPayCoreProvider, {
+		api: fluidPayShim,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_AddressAutocompleteInput.ProfileUIProvider, {
+			t: t$1,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectablePaymentMethodDropdown, {
+					title: "Payment Method",
+					displayPaymentMethod: displayed,
+					paymentMethodList: paymentMethods,
+					onAddPaymentMethodClick: () => setIsAddDialogOpen(true),
+					addPaymentMethodLabel: "+ Add Payment Method",
+					showAddButton: true,
+					isLoading: isLoadingMethods,
+					isPending: updateSubscription.isPending || addCardMutation.isPending || updatePaymentMethodMutation.isPending || makeDefaultPaymentMethodMutation.isPending,
+					selectedPaymentMethodId: currentPaymentMethod.id,
+					onSelectPaymentMethod: (pm) => {
+						if (pm.id === currentPaymentMethod.id) return;
+						updateSubscription.mutate({
+							subscriptionToken,
+							body: { payment_method_id: pm.id }
+						});
+					},
+					onEditPaymentMethod: (pm) => setEditingPaymentMethod(pm),
+					onDeletePaymentMethod: (pm) => {
+						setDeleteError(void 0);
+						setDeletingPaymentMethod(pm);
+					},
+					onMakeDefaultPaymentMethod: (pm) => makeDefaultPaymentMethodMutation.mutate(pm)
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.CreditCardFormDialog, {
+					isOpen: isAddDialogOpen,
+					onClose: () => setIsAddDialogOpen(false),
+					t: t$1,
+					onSubmit: async (data) => {
+						try {
+							await addCardMutation.mutateAsync(data);
+							setIsAddDialogOpen(false);
+						} catch {}
+					},
+					isSubmitting: addCardMutation.isPending,
+					countries: countryOptions,
+					jwt: "",
+					renderAddressAutocomplete: ({ control, setValue, countryCode }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.AddressAutocompleteInput, {
+						control,
+						setValue,
+						countryIso: countryCode,
+						addressLineField: "address1",
+						cityField: "city",
+						stateField: "state",
+						postalCodeField: "zip",
+						placeholder: t$1("address_line_1")
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.EditPaymentMethodDialog, {
+					isOpen: editingPaymentMethod !== null,
+					paymentMethod: editingPaymentMethod,
+					billingAddress: editingPaymentMethod?.billing_address ?? null,
+					onClose: () => setEditingPaymentMethod(null),
+					onSubmit: async (data) => {
+						if (!editingPaymentMethod) return;
+						try {
+							await updatePaymentMethodMutation.mutateAsync({
+								paymentMethodId: editingPaymentMethod.id,
+								data
+							});
+							setEditingPaymentMethod(null);
+						} catch {}
+					},
+					isSubmitting: updatePaymentMethodMutation.isPending,
+					countries: countryOptions
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.ConfirmActionDialog, {
+					title: t$1("delete_credit_card"),
+					description: t$1("delete_credit_card_message"),
+					actionText: t$1("delete"),
+					openDialog: deletingPaymentMethod !== null,
+					setOpenDialog: (open) => {
+						if (!open) {
+							setDeletingPaymentMethod(null);
+							setDeleteError(void 0);
+						}
+					},
+					onAction: handleConfirmDelete,
+					errorMsg: deleteError,
+					isLoading: deletePaymentMethodMutation.isPending
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/subscriptions/SelectableAddressDropdown.tsx
+function formatLine1(address) {
+	return [address.address1, address.address2].filter(Boolean).join(", ");
+}
+function formatCityStateZip(address) {
+	return [[address.city, address.state].filter(Boolean).join(", "), address.postal_code].filter(Boolean).join(" ");
+}
+/**
+* Selectable variant of profile-ui's AddressDropdown, mirroring
+* SelectablePaymentMethodDropdown. Flat layout (no Card wrapper) so it
+* sits inline next to the payment method dropdown in the subscription
+* detail's Payment & Shipping section.
+*/
+function SelectableAddressDropdown({ title, displayAddress, addressList, selectedAddressId, onSelectAddress, onAddAddressClick, onEditAddress, onDeleteAddress, onMakeDefaultAddress, addAddressLabel = "+ Add an Address", showAddButton = true, isLoading = false, isPending = false, className = "" }) {
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const sectionId = (0, react.useId)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_src.cn("border-border mb-6 border-b pb-4", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				"aria-expanded": isOpen,
+				"aria-controls": sectionId,
+				onClick: () => setIsOpen((prev) => !prev),
+				className: "flex w-full flex-row items-center justify-between",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-muted-foreground text-sm",
+					children: title
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: require_src.cn("text-muted-foreground h-4 w-4 transition-transform duration-200", isOpen && "rotate-180") })]
+			}),
+			!isOpen && displayAddress && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				onClick: () => setIsOpen(true),
+				className: "mt-1 mb-2 flex w-full cursor-pointer flex-col text-left",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "text-foreground text-sm font-medium",
+					children: [
+						displayAddress.name,
+						displayAddress.name && displayAddress.address1 ? ", " : "",
+						displayAddress.address1
+					]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-muted-foreground text-sm",
+					children: formatCityStateZip(displayAddress)
+				})]
+			}),
+			isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				id: sectionId,
+				className: "mt-5 flex max-h-[400px] flex-col space-y-4 overflow-y-auto pr-0.5",
+				children: isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: [1, 2].map((i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "bg-muted rounded-sm p-3",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "mb-1 h-4 w-32" }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "mb-1 h-4 w-48" }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-40" })
+					]
+				}, `skeleton-${i}`)) }) : addressList.map((address) => {
+					const isSelected = selectedAddressId === address.id;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						"aria-pressed": isSelected,
+						disabled: isPending,
+						onClick: () => onSelectAddress(address),
+						className: require_src.cn("text-foreground flex w-full flex-row items-center justify-between gap-3 rounded-sm p-3 text-left transition-colors", "not-disabled:cursor-pointer disabled:cursor-not-allowed disabled:opacity-60", isSelected ? "bg-background border-border border" : "bg-muted hover:bg-muted/80 border border-transparent"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex min-w-0 flex-col",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "text-foreground text-sm font-medium",
+									children: address.name
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "text-muted-foreground text-sm",
+									children: formatLine1(address)
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "text-muted-foreground text-sm",
+									children: formatCityStateZip(address)
+								})
+							]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex shrink-0 flex-row items-center gap-2",
+							children: [address.default && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "bg-primary text-primary-foreground rounded px-2 py-0.5 text-xs font-medium",
+								children: "Default"
+							}), (onEditAddress || onDeleteAddress || onMakeDefaultAddress) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								onClick: (e) => e.stopPropagation(),
+								onKeyDown: (e) => e.stopPropagation(),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.EllipsesDropdown, {
+									onEdit: onEditAddress ? () => onEditAddress(address) : void 0,
+									onDelete: onDeleteAddress ? () => onDeleteAddress(address) : void 0,
+									onMakeDefault: !address.default && onMakeDefaultAddress ? () => onMakeDefaultAddress(address) : void 0
+								})
+							})]
+						})]
+					}, address.id);
+				})
+			}),
+			showAddButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				disabled: isPending,
+				className: "text-foreground mt-3 text-left text-sm disabled:cursor-not-allowed disabled:opacity-60",
+				onClick: onAddAddressClick,
+				children: addAddressLabel
 			})
-		})]
+		]
+	});
+}
+//#endregion
+//#region src/subscriptions/PortalSubscriptionShippingAddressSection.tsx
+const t = (key) => ({
+	add_an_address: "Add an Address",
+	add_address: "Add Address",
+	edit_address: "Edit Address",
+	delete_address: "Delete Address",
+	delete_address_message: "Are you sure you want to delete this address? This action cannot be undone.",
+	delete: "Delete",
+	cancel: "Cancel",
+	country: "Country",
+	name: "Name",
+	address_line_1: "Address Line 1",
+	address_line_2: "Address Line 2",
+	city: "City",
+	state: "State",
+	province: "Province",
+	zip_code: "Zip Code",
+	postal_code: "Postal Code",
+	select_state: "Select state",
+	select_an_option: "Select an option",
+	set_as_default_address: "Set as default address",
+	save_address: "Save Address"
+})[key] ?? key.split("_").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+function composeAddressName(firstName, lastName) {
+	const combined = `${firstName} ${lastName}`.trim();
+	return combined.length > 0 ? combined : null;
+}
+function mapToFluidPayAddress(raw) {
+	return {
+		id: raw.id,
+		address1: raw.street1,
+		address2: raw.street2,
+		city: raw.city,
+		country_code: raw.country,
+		default: raw.default,
+		name: raw.name,
+		postal_code: raw.zip,
+		state: raw.state,
+		subdivision_code: null
+	};
+}
+function subscriptionAddressToFluidPay(raw) {
+	if (!raw) return null;
+	return {
+		id: raw.id,
+		address1: raw.address1,
+		address2: raw.address2,
+		city: raw.city,
+		country_code: raw.country_code,
+		default: raw.default,
+		name: raw.name,
+		postal_code: raw.postal_code,
+		state: raw.state,
+		subdivision_code: raw.subdivision_code
+	};
+}
+function PortalSubscriptionShippingAddressSection({ address: currentAddress, subscriptionToken, onSuccess, onError }) {
+	const payApi = require_api_context.usePayApi();
+	const queryClient = (0, _tanstack_react_query.useQueryClient)();
+	const fluidPayShim = (0, react.useMemo)(() => require_AddressAutocompleteInput.createFluidPayApiAdapter(payApi), [payApi]);
+	const [isFormDialogOpen, setIsFormDialogOpen] = (0, react.useState)(false);
+	const [editingAddress, setEditingAddress] = (0, react.useState)(null);
+	const [deletingAddress, setDeletingAddress] = (0, react.useState)(null);
+	const [deleteError, setDeleteError] = (0, react.useState)(void 0);
+	const { data: addresses = [], isLoading } = (0, _tanstack_react_query.useQuery)({
+		queryKey: require_query_keys.payKeys.addresses.list(),
+		queryFn: async () => {
+			return (await payApi.fetchAddresses()).addresses.map(mapToFluidPayAddress);
+		}
+	});
+	const countriesApi = require_countries_api_context.useCountriesApi();
+	const { data: countriesData } = (0, _tanstack_react_query.useQuery)({
+		queryKey: require_query_keys.storeKeys.countries(),
+		queryFn: () => countriesApi.listCountries(),
+		enabled: isFormDialogOpen
+	});
+	const countryOptions = (0, react.useMemo)(() => [...countriesData?.countries ?? []].map((c) => ({
+		iso: c.code,
+		name: c.name
+	})).sort((a, b) => a.name.localeCompare(b.name)), [countriesData]);
+	const statesByCountry = (0, react.useMemo)(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const c of countriesData?.countries ?? []) map.set(c.code, c.states.map((s) => ({
+			name: s.name,
+			isoCode: s.code
+		})));
+		return map;
+	}, [countriesData]);
+	const fetchStatesFromCountries = (0, react.useCallback)((countryCode) => Promise.resolve(statesByCountry.get(countryCode) ?? []), [statesByCountry]);
+	const updateSubscription = useUpdateSubscriptionInfo({
+		onSuccess: () => {
+			onSuccess?.("Shipping address updated");
+			queryClient.invalidateQueries({ queryKey: subscriptionsKeys.detail(subscriptionToken) });
+		},
+		onError: (err) => onError?.("Failed to update shipping address", err)
+	});
+	const createAddressMutation = (0, _tanstack_react_query.useMutation)({
+		mutationFn: (body) => payApi.createAddress({ address: {
+			name: composeAddressName(body.address.first_name, body.address.last_name),
+			street1: body.address.address1,
+			street2: body.address.address2,
+			city: body.address.city,
+			state: body.address.state,
+			zip: body.address.postal_code,
+			country: body.address.country_code,
+			default: body.address.default
+		} }),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: require_query_keys.payKeys.addresses.all });
+			onSuccess?.("Address added");
+		},
+		onError: (err) => onError?.("Failed to add address", err)
+	});
+	const updateAddressMutation = (0, _tanstack_react_query.useMutation)({
+		mutationFn: ({ addressId, body }) => payApi.updateAddress(addressId, { address: {
+			name: composeAddressName(body.address.first_name, body.address.last_name),
+			street1: body.address.address1,
+			street2: body.address.address2,
+			city: body.address.city,
+			state: body.address.state,
+			zip: body.address.postal_code,
+			country: body.address.country_code,
+			default: body.address.default
+		} }),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: require_query_keys.payKeys.addresses.all });
+			onSuccess?.("Address updated");
+		},
+		onError: (err) => onError?.("Failed to update address", err)
+	});
+	const deleteAddressMutation = (0, _tanstack_react_query.useMutation)({
+		mutationFn: (addressId) => payApi.deleteAddress(addressId),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: require_query_keys.payKeys.addresses.all });
+			onSuccess?.("Address deleted");
+		}
+	});
+	const makeDefaultAddressMutation = (0, _tanstack_react_query.useMutation)({
+		mutationFn: (address) => payApi.updateAddress(address.id, { address: {
+			name: address.name ?? null,
+			street1: address.address1 ?? "",
+			street2: address.address2,
+			city: address.city ?? "",
+			state: address.state ?? "",
+			zip: address.postal_code ?? "",
+			country: address.country_code ?? "",
+			default: true
+		} }),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: require_query_keys.payKeys.addresses.all });
+			onSuccess?.("Default address updated");
+		},
+		onError: (err) => onError?.("Failed to update default address", err)
+	});
+	const displayed = addresses.find((a) => a.id === currentAddress?.id) ?? subscriptionAddressToFluidPay(currentAddress);
+	const handleCloseFormDialog = () => {
+		setIsFormDialogOpen(false);
+		setEditingAddress(null);
+	};
+	const handleConfirmDelete = async () => {
+		if (!deletingAddress) return;
+		setDeleteError(void 0);
+		try {
+			await deleteAddressMutation.mutateAsync(deletingAddress.id);
+			setDeletingAddress(null);
+		} catch (err) {
+			setDeleteError(err instanceof Error ? err.message : "We were unable to delete this address. Please try again.");
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.FluidPayCoreProvider, {
+		api: fluidPayShim,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_AddressAutocompleteInput.ProfileUIProvider, {
+			t,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectableAddressDropdown, {
+					title: "Shipping Address",
+					displayAddress: displayed,
+					addressList: addresses,
+					selectedAddressId: currentAddress?.id ?? 0,
+					onSelectAddress: (addr) => {
+						if (addr.id === currentAddress?.id) return;
+						updateSubscription.mutate({
+							subscriptionToken,
+							body: { address_id: addr.id }
+						});
+					},
+					onAddAddressClick: () => {
+						setEditingAddress(null);
+						setIsFormDialogOpen(true);
+					},
+					onEditAddress: (addr) => {
+						setEditingAddress(addr);
+						setIsFormDialogOpen(true);
+					},
+					onDeleteAddress: (addr) => {
+						setDeleteError(void 0);
+						setDeletingAddress(addr);
+					},
+					onMakeDefaultAddress: (addr) => makeDefaultAddressMutation.mutate(addr),
+					addAddressLabel: "+ Add an address",
+					showAddButton: true,
+					isLoading,
+					isPending: updateSubscription.isPending || createAddressMutation.isPending || updateAddressMutation.isPending || makeDefaultAddressMutation.isPending
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.AddressFormDialog, {
+					isOpen: isFormDialogOpen,
+					onClose: handleCloseFormDialog,
+					selectedAddress: editingAddress,
+					t,
+					onSubmit: async (data) => {
+						try {
+							if (editingAddress) await updateAddressMutation.mutateAsync({
+								addressId: editingAddress.id,
+								body: data
+							});
+							else await createAddressMutation.mutateAsync(data);
+							handleCloseFormDialog();
+						} catch {}
+					},
+					isSubmitting: createAddressMutation.isPending || updateAddressMutation.isPending,
+					countries: countryOptions,
+					fetchStates: fetchStatesFromCountries,
+					renderAddressAutocomplete: ({ control, setValue, countryCode }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.AddressAutocompleteInput, {
+						control,
+						setValue,
+						countryIso: countryCode,
+						addressLineField: "address1",
+						cityField: "city",
+						stateField: "state",
+						postalCodeField: "postal_code",
+						placeholder: t("address_line_1")
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.ConfirmActionDialog, {
+					title: t("delete_address"),
+					description: t("delete_address_message"),
+					actionText: t("delete"),
+					openDialog: deletingAddress !== null,
+					setOpenDialog: (open) => {
+						if (!open) {
+							setDeletingAddress(null);
+							setDeleteError(void 0);
+						}
+					},
+					onAction: handleConfirmDelete,
+					errorMsg: deleteError,
+					isLoading: deleteAddressMutation.isPending
+				})
+			]
+		})
 	});
 }
 //#endregion
@@ -4748,6 +5199,13 @@ function SubscriptionDetailScreen({ token, onToast }) {
 			onError: (message, err) => {
 				onToast(`${message}: ${err instanceof Error ? err.message : "An error occurred"}`, "error");
 			}
+		}),
+		renderShippingAddress: (ctx) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PortalSubscriptionShippingAddressSection, {
+			...ctx,
+			onSuccess: (message) => onToast(message, "success"),
+			onError: (message, err) => {
+				onToast(`${message}: ${err instanceof Error ? err.message : "An error occurred"}`, "error");
+			}
 		})
 	});
 }
@@ -4805,4 +5263,4 @@ Object.defineProperty(exports, "subscriptionsScreenPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=SubscriptionsScreen-ByoOMsky.cjs.map
+//# sourceMappingURL=SubscriptionsScreen-Bm8Ncl1e.cjs.map