@fluid-app/portal-sdk 0.1.253 → 0.1.255

package/dist/{SubscriptionsScreen-Y4UgpC1Y.mjs → SubscriptionsScreen-CsNE6gik.mjs}

@@ -3,18 +3,18 @@ import { i as usePayApi } from "./api-context-3GmfqvIB.mjs";
 import { n as useCountriesApi } from "./countries-api-context-CMh13cfX.mjs";
 import { C as subscriptions_reactivate, D as subscriptions_update, E as subscriptions_skip, S as subscriptions_pause, T as subscriptions_show, b as subscriptions_cancel, w as subscriptions_resume, x as subscriptions_list } from "./portal_tenant-Q3x7ALaZ.mjs";
 import { n as usePortalTenantClient } from "./PortalTenantClientProvider-4ZmY6hac.mjs";
-import { A as Select, Bt as warnOrThrowProtectedError, C as Skeleton, Cn as AlertDialogContent, Dn as AlertDialogTitle, En as AlertDialogHeader, Gt as enUS, Ht as getWeek, In as cn$1, It as isAfter, K as Label, L as Input, Lt as format, M as SelectItem, Mn as AccordionContent, Mt as Calendar$1, N as SelectTrigger, Nn as AccordionItem, On as Button, P as SelectValue, Pn as AccordionTrigger, Rt as isProtectedDayOfYearToken, Sn as AlertDialogCancel, Tn as AlertDialogFooter, Ut as getWeekYear, Vt as longFormatters, Wt as getISOWeek, Xt as addWeeks, Yt as addYears, a as ToggleGroup, an as addDays, b as fluidToast, bn as AlertDialog, cn as millisecondsInHour, ct as DialogFooter, d as Table$1, dn as Breadcrumb, en as getTimezoneOffsetInMilliseconds, f as TableBody, fn as BreadcrumbItem, ft as DialogTitle, g as TableRow, gn as BreadcrumbSeparator, h as TableHeader, hn as BreadcrumbPage, ht as PopoverTrigger, in as addMonths, it as Dialog, j as SelectContent, jn as Accordion, ln as millisecondsInMinute, lt as DialogHeader, mn as BreadcrumbList, mt as PopoverContent, nn as startOfWeek, o as ToggleGroupItem, on as toDate, ot as DialogContent, p as TableCell, pn as BreadcrumbLink, pt as Popover, rn as getDefaultOptions$1, sn as constructFrom, tn as startOfISOWeek, un as millisecondsInSecond, wn as AlertDialogDescription, zt as isProtectedWeekYearToken } from "./src-C2-FdDaD.mjs";
+import { A as Select, Bt as warnOrThrowProtectedError, C as Skeleton, Cn as AlertDialogContent, Dn as AlertDialogTitle, En as AlertDialogHeader, Gt as enUS, Ht as getWeek, In as cn$1, It as isAfter, K as Label, L as Input, Lt as format, M as SelectItem, Mt as Calendar$1, N as SelectTrigger, On as Button, P as SelectValue, Rt as isProtectedDayOfYearToken, Sn as AlertDialogCancel, Tn as AlertDialogFooter, Ut as getWeekYear, Vt as longFormatters, Wt as getISOWeek, Xt as addWeeks, Yt as addYears, a as ToggleGroup, an as addDays, b as fluidToast, bn as AlertDialog, cn as millisecondsInHour, ct as DialogFooter, d as Table$1, dn as Breadcrumb, en as getTimezoneOffsetInMilliseconds, f as TableBody, fn as BreadcrumbItem, ft as DialogTitle, g as TableRow, gn as BreadcrumbSeparator, h as TableHeader, hn as BreadcrumbPage, ht as PopoverTrigger, in as addMonths, it as Dialog, j as SelectContent, ln as millisecondsInMinute, lt as DialogHeader, mn as BreadcrumbList, mt as PopoverContent, nn as startOfWeek, o as ToggleGroupItem, on as toDate, ot as DialogContent, p as TableCell, pn as BreadcrumbLink, pt as Popover, rn as getDefaultOptions$1, sn as constructFrom, tn as startOfISOWeek, un as millisecondsInSecond, wn as AlertDialogDescription, zt as isProtectedWeekYearToken } from "./src-C2-FdDaD.mjs";
 import { r as useScreenHeaderBreadcrumbs } from "./ScreenHeaderContext-kG_zh0zW.mjs";
 import { n as payKeys, r as storeKeys } from "./query-keys-xJy_fapN.mjs";
 import { t as useAccount } from "./use-account-CBMPhhs7.mjs";
 import { n as useAppNavigation } from "./AppNavigationContext-Dvc0yoZF.mjs";
-import { f as PaymentIcon, h as FluidPayCoreProvider, i as CreditCardFormDialog, m as getCardExpiry, n as createFluidPayApiAdapter, p as getCardDisplayName, r as mapToFluidPayPaymentMethod, t as AddressAutocompleteInput } from "./AddressAutocompleteInput-Dy5sL54V.mjs";
+import { _ as EllipsesDropdown, a as AddressFormDialog, f as EditPaymentMethodDialog, g as ConfirmActionDialog, h as getCardExpiry, i as CreditCardFormDialog, m as getCardDisplayName, n as createFluidPayApiAdapter, p as PaymentIcon, r as mapToFluidPayPaymentMethod, t as AddressAutocompleteInput, v as FluidPayCoreProvider, y as ProfileUIProvider } from "./AddressAutocompleteInput-Dg-75n-K.mjs";
 import { i as InfiniteScrollSentinel, r as TableColumn } from "./order-status-badge-z-_tAqHq.mjs";
 import { t as SearchSort } from "./SearchSort-RMqZCtu4.mjs";
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { CalendarDays, CalendarIcon, ChevronLeft, ChevronRight, Pause, Play, RotateCcw, SkipForward, XCircle } from "lucide-react";
+import { CalendarDays, CalendarIcon, ChevronDown, ChevronLeft, ChevronRight, Pause, Play, RotateCcw, SkipForward, XCircle } from "lucide-react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 //#region ../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/getDefaultOptions.js
@@ -2645,6 +2645,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 subscriptions_update(client, subscriptionToken, { subscription }));
 		}
@@ -4003,7 +4004,7 @@ function SubscriptionManagementSection({ subscription, isActive, isPaused, isCan
 				/* @__PURE__ */ jsxs("div", {
 					className: "pt-2",
 					children: [/* @__PURE__ */ jsx("h3", {
-						className: "text-foreground text-sm/6 font-semibold",
+						className: "text-foreground mb-4 text-sm/6 font-semibold",
 						children: "Payment & Shipping"
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "flex flex-col",
@@ -4403,136 +4404,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] = useState("");
-	const renderPaymentMethod = (paymentMethod) => {
-		const expiry = getCardExpiry(paymentMethod);
-		return /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-row items-center space-x-2",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "flex h-6 w-10 flex-shrink-0 items-center justify-center",
-				children: /* @__PURE__ */ jsx(PaymentIcon, {
-					logoUrl: paymentMethod.details.logo_url,
-					brand: paymentMethod.details.card_type,
-					alt: paymentMethod.details.card_type ?? "Payment Method"
-				})
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "flex flex-col",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "text-foreground flex items-center text-sm font-medium capitalize",
-					children: getCardDisplayName(paymentMethod)
-				}), expiry && /* @__PURE__ */ 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] = useState(false);
+	const sectionId = useId();
+	const collapsedExpiry = displayPaymentMethod ? getCardExpiry(displayPaymentMethod) : null;
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn$1("border-border mb-6 border-b pb-4", className),
-		children: [/* @__PURE__ */ jsx(Accordion, {
-			type: "single",
-			collapsible: true,
-			value: paymentsValue,
-			onValueChange: setPaymentsValue,
-			className: "w-full",
-			children: /* @__PURE__ */ jsxs(AccordionItem, {
-				value: "payment_methods",
-				className: "border-b-0",
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex flex-row items-center justify-between",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: "text-muted-foreground mt-4 mb-1 text-sm",
-							children: title
-						}), /* @__PURE__ */ jsx(AccordionTrigger, { className: "m-0 ml-2 flex h-auto min-h-0 w-auto py-0 hover:no-underline" })]
-					}),
-					!paymentsValue && isLoading ? /* @__PURE__ */ jsxs("div", {
-						className: "mb-2 flex w-full flex-row items-center space-x-2",
-						children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-10" }), /* @__PURE__ */ jsxs("div", {
-							className: "flex flex-col space-y-1",
-							children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })]
-						})]
-					}) : !paymentsValue && displayPaymentMethod && /* @__PURE__ */ jsx("div", {
-						className: "mb-2 flex w-full cursor-pointer flex-col",
-						onClick: () => setPaymentsValue("payment_methods"),
-						children: renderPaymentMethod(displayPaymentMethod)
-					}),
-					/* @__PURE__ */ jsx(AccordionContent, {
-						className: "max-h-[400px] overflow-y-auto px-0.5 pt-2 pb-1",
-						children: /* @__PURE__ */ jsx("div", {
-							className: "mt-2 flex flex-col justify-between space-y-4",
-							children: isLoading ? /* @__PURE__ */ jsx(Fragment$1, { children: [1, 2].map((i) => /* @__PURE__ */ jsx("div", {
-								className: "bg-muted items-center rounded p-3",
-								children: /* @__PURE__ */ jsxs("div", {
-									className: "flex flex-row items-center space-x-2",
-									children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-10" }), /* @__PURE__ */ jsxs("div", {
-										className: "flex flex-col space-y-1",
-										children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })]
-									})]
-								})
-							}, `skeleton-${i}`)) }) : paymentMethodList.map((paymentMethod) => {
-								const isSelected = selectedPaymentMethodId === paymentMethod.id;
-								const expiry = getCardExpiry(paymentMethod);
-								return /* @__PURE__ */ jsxs("button", {
-									type: "button",
-									"aria-pressed": isSelected,
-									disabled: isPending,
-									onClick: () => onSelectPaymentMethod(paymentMethod),
-									className: cn$1("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__ */ jsxs("div", {
-										className: "flex flex-row items-center space-x-3",
-										children: [
-											/* @__PURE__ */ jsx("span", {
-												"aria-hidden": true,
-												className: cn$1("flex h-4 w-4 shrink-0 items-center justify-center rounded-full border", isSelected ? "border-primary" : "border-input"),
-												children: isSelected && /* @__PURE__ */ jsx("span", { className: "bg-primary h-2 w-2 rounded-full" })
-											}),
-											/* @__PURE__ */ jsx("div", {
-												className: "flex h-6 w-10 flex-shrink-0 items-center justify-center",
-												children: /* @__PURE__ */ jsx(PaymentIcon, {
-													logoUrl: paymentMethod.details.logo_url,
-													brand: paymentMethod.details.card_type,
-													alt: paymentMethod.details.card_type ?? "Payment Method"
-												})
-											}),
-											/* @__PURE__ */ jsxs("div", {
-												className: "flex flex-col",
-												children: [/* @__PURE__ */ jsx("div", {
-													className: "text-card-foreground flex items-center text-sm font-medium capitalize",
-													children: getCardDisplayName(paymentMethod)
-												}), expiry && /* @__PURE__ */ jsx("div", {
-													className: "text-muted-foreground text-sm",
-													children: expiry
-												})]
-											})
-										]
-									}), paymentMethod.default && /* @__PURE__ */ jsx("p", {
-										className: "bg-secondary text-secondary-foreground rounded px-2 py-0.5 text-xs font-medium",
-										children: "Default"
-									})]
-								}, paymentMethod.id);
-							})
-						})
+		children: [
+			/* @__PURE__ */ 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__ */ jsx("span", {
+					className: "text-muted-foreground text-sm",
+					children: title
+				}), /* @__PURE__ */ jsx(ChevronDown, { className: cn$1("text-muted-foreground h-4 w-4 transition-transform duration-200", isOpen && "rotate-180") })]
+			}),
+			!isOpen && displayPaymentMethod && /* @__PURE__ */ 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__ */ jsx("div", {
+					className: "flex h-6 w-10 flex-shrink-0 items-center justify-center",
+					children: /* @__PURE__ */ jsx(PaymentIcon, {
+						logoUrl: displayPaymentMethod.details.logo_url,
+						brand: displayPaymentMethod.details.card_type,
+						alt: displayPaymentMethod.details.card_type ?? "Payment Method"
 					})
-				]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-col",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-foreground text-sm font-medium capitalize",
+						children: getCardDisplayName(displayPaymentMethod)
+					}), collapsedExpiry && /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground text-sm",
+						children: collapsedExpiry
+					})]
+				})]
+			}),
+			isOpen && /* @__PURE__ */ 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__ */ jsx(Fragment$1, { children: [1, 2].map((i) => /* @__PURE__ */ jsxs("div", {
+					className: "bg-muted flex flex-row items-center space-x-2 rounded-sm p-3",
+					children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-10" }), /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col space-y-1",
+						children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })]
+					})]
+				}, `skeleton-${i}`)) }) : paymentMethodList.map((paymentMethod) => {
+					const isSelected = selectedPaymentMethodId === paymentMethod.id;
+					const expiry = getCardExpiry(paymentMethod);
+					return /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						"aria-pressed": isSelected,
+						disabled: isPending,
+						onClick: () => onSelectPaymentMethod(paymentMethod),
+						className: cn$1("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__ */ jsxs("div", {
+							className: "flex min-w-0 flex-row items-center gap-3",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "flex h-6 w-10 flex-shrink-0 items-center justify-center",
+								children: /* @__PURE__ */ jsx(PaymentIcon, {
+									logoUrl: paymentMethod.details.logo_url,
+									brand: paymentMethod.details.card_type,
+									alt: paymentMethod.details.card_type ?? "Payment Method"
+								})
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "flex min-w-0 flex-col",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-foreground text-sm font-medium capitalize",
+									children: getCardDisplayName(paymentMethod)
+								}), expiry && /* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground text-sm",
+									children: expiry
+								})]
+							})]
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex shrink-0 flex-row items-center gap-2",
+							children: [paymentMethod.default && /* @__PURE__ */ jsx("span", {
+								className: "bg-primary text-primary-foreground rounded px-2 py-0.5 text-xs font-medium",
+								children: "Default"
+							}), (onEditPaymentMethod || onDeletePaymentMethod || onMakeDefaultPaymentMethod) && /* @__PURE__ */ jsx("span", {
+								onClick: (e) => e.stopPropagation(),
+								onKeyDown: (e) => e.stopPropagation(),
+								children: /* @__PURE__ */ jsx(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__ */ 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__ */ jsx("button", {
-			type: "button",
-			disabled: isPending,
-			className: cn$1("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",
@@ -4580,6 +4564,9 @@ function PortalSubscriptionPaymentMethodSection({ paymentMethod: currentPaymentM
 	const queryClient = useQueryClient();
 	const fluidPayShim = useMemo(() => createFluidPayApiAdapter(payApi), [payApi]);
 	const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
+	const [editingPaymentMethod, setEditingPaymentMethod] = useState(null);
+	const [deletingPaymentMethod, setDeletingPaymentMethod] = useState(null);
+	const [deleteError, setDeleteError] = useState(void 0);
 	const { data: paymentMethods = [], isLoading: isLoadingMethods } = useQuery({
 		queryKey: payKeys.paymentMethods.list(),
 		queryFn: async () => {
@@ -4590,7 +4577,7 @@ function PortalSubscriptionPaymentMethodSection({ paymentMethod: currentPaymentM
 	const { data: countriesData } = useQuery({
 		queryKey: storeKeys.countries(),
 		queryFn: () => countriesApi.listCountries(),
-		enabled: isAddDialogOpen
+		enabled: isAddDialogOpen || editingPaymentMethod !== null
 	});
 	const countryOptions = useMemo(() => [...countriesData?.countries ?? []].map((c) => ({
 		iso: c.code,
@@ -4615,49 +4602,513 @@ function PortalSubscriptionPaymentMethodSection({ paymentMethod: currentPaymentM
 		},
 		onError: (err) => onError?.("Failed to add payment method", err)
 	});
-	return /* @__PURE__ */ jsxs(FluidPayCoreProvider, {
-		api: fluidPayShim,
-		children: [/* @__PURE__ */ 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 = 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__ */ jsx(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__ */ jsx(AddressAutocompleteInput, {
-				control,
-				setValue,
-				countryIso: countryCode,
-				addressLineField: "address1",
-				cityField: "city",
-				stateField: "state",
-				postalCodeField: "zip",
-				placeholder: t("address_line_1")
+		} }),
+		onSuccess: async () => {
+			await queryClient.invalidateQueries({ queryKey: payKeys.paymentMethods.all });
+			onSuccess?.("Payment method updated");
+		},
+		onError: (err) => onError?.("Failed to update payment method", err)
+	});
+	const deletePaymentMethodMutation = useMutation({
+		mutationFn: (paymentMethodId) => payApi.deletePaymentMethod(paymentMethodId),
+		onSuccess: async () => {
+			await queryClient.invalidateQueries({ queryKey: payKeys.paymentMethods.all });
+			onSuccess?.("Payment method deleted");
+		}
+	});
+	const makeDefaultPaymentMethodMutation = 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: 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__ */ jsx(FluidPayCoreProvider, {
+		api: fluidPayShim,
+		children: /* @__PURE__ */ jsxs(ProfileUIProvider, {
+			t: t$1,
+			children: [
+				/* @__PURE__ */ 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__ */ jsx(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__ */ jsx(AddressAutocompleteInput, {
+						control,
+						setValue,
+						countryIso: countryCode,
+						addressLineField: "address1",
+						cityField: "city",
+						stateField: "state",
+						postalCodeField: "zip",
+						placeholder: t$1("address_line_1")
+					})
+				}),
+				/* @__PURE__ */ jsx(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__ */ jsx(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] = useState(false);
+	const sectionId = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn$1("border-border mb-6 border-b pb-4", className),
+		children: [
+			/* @__PURE__ */ 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__ */ jsx("span", {
+					className: "text-muted-foreground text-sm",
+					children: title
+				}), /* @__PURE__ */ jsx(ChevronDown, { className: cn$1("text-muted-foreground h-4 w-4 transition-transform duration-200", isOpen && "rotate-180") })]
+			}),
+			!isOpen && displayAddress && /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => setIsOpen(true),
+				className: "mt-1 mb-2 flex w-full cursor-pointer flex-col text-left",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "text-foreground text-sm font-medium",
+					children: [
+						displayAddress.name,
+						displayAddress.name && displayAddress.address1 ? ", " : "",
+						displayAddress.address1
+					]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground text-sm",
+					children: formatCityStateZip(displayAddress)
+				})]
+			}),
+			isOpen && /* @__PURE__ */ 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__ */ jsx(Fragment$1, { children: [1, 2].map((i) => /* @__PURE__ */ jsxs("div", {
+					className: "bg-muted rounded-sm p-3",
+					children: [
+						/* @__PURE__ */ jsx(Skeleton, { className: "mb-1 h-4 w-32" }),
+						/* @__PURE__ */ jsx(Skeleton, { className: "mb-1 h-4 w-48" }),
+						/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-40" })
+					]
+				}, `skeleton-${i}`)) }) : addressList.map((address) => {
+					const isSelected = selectedAddressId === address.id;
+					return /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						"aria-pressed": isSelected,
+						disabled: isPending,
+						onClick: () => onSelectAddress(address),
+						className: cn$1("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__ */ jsxs("div", {
+							className: "flex min-w-0 flex-col",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "text-foreground text-sm font-medium",
+									children: address.name
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground text-sm",
+									children: formatLine1(address)
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground text-sm",
+									children: formatCityStateZip(address)
+								})
+							]
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex shrink-0 flex-row items-center gap-2",
+							children: [address.default && /* @__PURE__ */ jsx("span", {
+								className: "bg-primary text-primary-foreground rounded px-2 py-0.5 text-xs font-medium",
+								children: "Default"
+							}), (onEditAddress || onDeleteAddress || onMakeDefaultAddress) && /* @__PURE__ */ jsx("span", {
+								onClick: (e) => e.stopPropagation(),
+								onKeyDown: (e) => e.stopPropagation(),
+								children: /* @__PURE__ */ jsx(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__ */ 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 = usePayApi();
+	const queryClient = useQueryClient();
+	const fluidPayShim = useMemo(() => createFluidPayApiAdapter(payApi), [payApi]);
+	const [isFormDialogOpen, setIsFormDialogOpen] = useState(false);
+	const [editingAddress, setEditingAddress] = useState(null);
+	const [deletingAddress, setDeletingAddress] = useState(null);
+	const [deleteError, setDeleteError] = useState(void 0);
+	const { data: addresses = [], isLoading } = useQuery({
+		queryKey: payKeys.addresses.list(),
+		queryFn: async () => {
+			return (await payApi.fetchAddresses()).addresses.map(mapToFluidPayAddress);
+		}
+	});
+	const countriesApi = useCountriesApi();
+	const { data: countriesData } = useQuery({
+		queryKey: storeKeys.countries(),
+		queryFn: () => countriesApi.listCountries(),
+		enabled: isFormDialogOpen
+	});
+	const countryOptions = useMemo(() => [...countriesData?.countries ?? []].map((c) => ({
+		iso: c.code,
+		name: c.name
+	})).sort((a, b) => a.name.localeCompare(b.name)), [countriesData]);
+	const statesByCountry = 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 = 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 = 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: payKeys.addresses.all });
+			onSuccess?.("Address added");
+		},
+		onError: (err) => onError?.("Failed to add address", err)
+	});
+	const updateAddressMutation = 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: payKeys.addresses.all });
+			onSuccess?.("Address updated");
+		},
+		onError: (err) => onError?.("Failed to update address", err)
+	});
+	const deleteAddressMutation = useMutation({
+		mutationFn: (addressId) => payApi.deleteAddress(addressId),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: payKeys.addresses.all });
+			onSuccess?.("Address deleted");
+		}
+	});
+	const makeDefaultAddressMutation = 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: 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__ */ jsx(FluidPayCoreProvider, {
+		api: fluidPayShim,
+		children: /* @__PURE__ */ jsxs(ProfileUIProvider, {
+			t,
+			children: [
+				/* @__PURE__ */ 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__ */ jsx(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__ */ jsx(AddressAutocompleteInput, {
+						control,
+						setValue,
+						countryIso: countryCode,
+						addressLineField: "address1",
+						cityField: "city",
+						stateField: "state",
+						postalCodeField: "postal_code",
+						placeholder: t("address_line_1")
+					})
+				}),
+				/* @__PURE__ */ jsx(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
@@ -4687,6 +5138,13 @@ function SubscriptionDetailScreen({ token, onToast }) {
 			onError: (message, err) => {
 				onToast(`${message}: ${err instanceof Error ? err.message : "An error occurred"}`, "error");
 			}
+		}),
+		renderShippingAddress: (ctx) => /* @__PURE__ */ jsx(PortalSubscriptionShippingAddressSection, {
+			...ctx,
+			onSuccess: (message) => onToast(message, "success"),
+			onError: (message, err) => {
+				onToast(`${message}: ${err instanceof Error ? err.message : "An error occurred"}`, "error");
+			}
 		})
 	});
 }
@@ -4737,4 +5195,4 @@ const subscriptionsScreenPropertySchema = {
 //#endregion
 export { SubscriptionsScreen_exports as n, subscriptionsScreenPropertySchema as r, SubscriptionsScreen as t };
 
-//# sourceMappingURL=SubscriptionsScreen-Y4UgpC1Y.mjs.map
+//# sourceMappingURL=SubscriptionsScreen-CsNE6gik.mjs.map