@fluid-app/portal-sdk 0.1.306 → 0.1.308

package/dist/{SubscriptionsScreen-1hP0t23a.cjs → SubscriptionsScreen-Dfmqn6LY.cjs}

@@ -1,5 +1,5 @@
 require("./chunk-9hOWP6kD.cjs");
-const require_portal_tenant = require("./portal_tenant-DG4gKXnu.cjs");
+const require_portal_tenant = require("./portal_tenant-ywAHQ1k3.cjs");
 const require_api_context = require("./api-context-BkBvyFVK.cjs");
 const require_countries_api_context = require("./countries-api-context-C0C0K9gJ.cjs");
 const require_PortalTenantClientProvider = require("./PortalTenantClientProvider-CVv-4rQ9.cjs");
@@ -8,7 +8,7 @@ const require_src = require("./src-D4b32Kh_.cjs");
 const require_ScreenHeaderContext = require("./ScreenHeaderContext-DWDN0-mb.cjs");
 const require_translation_api_context_factory = require("./translation-api-context-factory-Cv42jpKn.cjs");
 const require_query_keys = require("./query-keys-e9EEoWxN.cjs");
-const require_use_account = require("./use-account-EicAlO8K.cjs");
+const require_use_account = require("./use-account-DeRJHrd3.cjs");
 const require_AppNavigationContext = require("./AppNavigationContext-BDs1cOuG.cjs");
 const require_static_dict_adapter = require("./static-dict-adapter-DIeL3Npb.cjs");
 const require_AddressAutocompleteInput = require("./AddressAutocompleteInput-Bchlq8ch.cjs");
@@ -2169,6 +2169,27 @@ const subscriptionsKeys = {
 		token
 	]
 };
+const bundlesKeys = {
+	all: ["subscription_bundles"],
+	list: () => [...bundlesKeys.all, "list"]
+};
+//#endregion
+//#region ../../subscriptions/core/src/bundles-api-context.ts
+const BundlesApiContext = (0, react.createContext)(null);
+const BundlesApiProvider = BundlesApiContext.Provider;
+function useBundlesApi() {
+	const api = (0, react.useContext)(BundlesApiContext);
+	if (!api) throw new Error("useBundlesApi must be used within a BundlesCoreProvider");
+	return api;
+}
+//#endregion
+//#region ../../subscriptions/core/src/bundles-provider.tsx
+function BundlesCoreProvider({ api, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BundlesApiProvider, {
+		value: api,
+		children
+	});
+}
 //#endregion
 //#region ../../subscriptions/core/src/hooks/use-subscriptions.ts
 function useSubscriptions(params, options) {
@@ -2294,6 +2315,31 @@ function useUpdateSubscriptionInfo(options) {
 	});
 }
 //#endregion
+//#region ../../subscriptions/core/src/hooks/use-bundles.ts
+function useBundles(options) {
+	const api = useBundlesApi();
+	return (0, _tanstack_react_query.useQuery)({
+		queryKey: bundlesKeys.list(),
+		queryFn: () => api.fetchBundles(),
+		enabled: options?.enabled ?? true
+	});
+}
+//#endregion
+//#region ../../subscriptions/core/src/hooks/use-create-bundle.ts
+function useCreateBundle(options) {
+	const api = useBundlesApi();
+	const queryClient = (0, _tanstack_react_query.useQueryClient)();
+	return (0, _tanstack_react_query.useMutation)({
+		mutationFn: (params) => api.createBundle(params),
+		onSuccess: (bundle) => {
+			queryClient.invalidateQueries({ queryKey: bundlesKeys.all });
+			queryClient.invalidateQueries({ queryKey: subscriptionsKeys.all });
+			options?.onSuccess?.(bundle);
+		},
+		onError: options?.onError
+	});
+}
+//#endregion
 //#region ../../subscriptions/core/src/utils/subscription-helpers.ts
 function formatSubscriptionFrequency(frequency) {
 	if (frequency === "day") return "Daily";
@@ -2585,7 +2631,23 @@ function mapDetailSubscription(bff) {
 			name: ""
 		},
 		subscription_skips: [],
-		orders: []
+		orders: [],
+		bundled_items: bff.bundled_items ? bff.bundled_items.map((item) => ({
+			quantity: item.quantity ?? 0,
+			product_id: item.product_id ?? 0,
+			variant_id: item.variant_id ?? 0,
+			option_titles: item.option_titles ?? [],
+			product_title: item.product_title ?? "",
+			variant_title: item.variant_title ?? "",
+			display_to_customer: item.display_to_customer ?? true
+		})) : void 0,
+		bundled_subscriptions: bff.bundled_subscriptions ? bff.bundled_subscriptions.map((sib) => ({
+			subscription_token: sib.subscription_token ?? "",
+			product_title: sib.product_title ?? "",
+			variant_title: sib.variant_title ?? null,
+			price: sib.price ?? 0,
+			image_url: sib.image_url ?? null
+		})) : void 0
 	};
 }
 function mapSubscriptionDetail(response) {
@@ -2629,12 +2691,12 @@ function mapListItem(bff) {
 		quantity: bff.quantity ?? 1,
 		status: bff.status ?? "",
 		subscription_plan: {
-			id: 0,
+			id: bff.plan?.id ?? 0,
 			active: true,
-			billing_interval: 1,
-			billing_interval_unit: bff.interval ?? "",
-			shipping_interval: 1,
-			shipping_interval_unit: bff.interval ?? ""
+			billing_interval: bff.plan?.billing_interval ?? 1,
+			billing_interval_unit: bff.plan?.billing_interval_unit ?? "",
+			shipping_interval: bff.plan?.billing_interval ?? 1,
+			shipping_interval_unit: bff.plan?.billing_interval_unit ?? ""
 		},
 		variant: {
 			id: bff.product?.id ?? 0,
@@ -2645,7 +2707,14 @@ function mapListItem(bff) {
 				image_url: bff.product?.image_url ?? "",
 				price_in_currency: bff.total ?? "0"
 			}
-		}
+		},
+		bundled_subscriptions: (bff.bundled_subscriptions ?? []).map((b) => ({
+			subscription_token: b.subscription_token ?? "",
+			product_title: b.product_title ?? "",
+			variant_title: b.variant_title ?? null,
+			price: b.price ?? 0,
+			image_url: b.image_url ?? null
+		}))
 	};
 }
 function mapSubscriptionList(response) {
@@ -2723,6 +2792,68 @@ function PortalSubscriptionsApiProvider({ children }) {
 	});
 }
 //#endregion
+//#region src/adapters/bundles-api-adapter.ts
+function mapAddress(bff) {
+	if (!bff) return null;
+	return {
+		id: bff.id ?? 0,
+		name: bff.name ?? null,
+		address1: bff.address1 ?? "",
+		address2: bff.address2 ?? null,
+		city: bff.city ?? "",
+		state: bff.state ?? "",
+		subdivision_code: null,
+		postal_code: bff.postal_code ?? "",
+		country_code: bff.country_code ?? null,
+		default: false
+	};
+}
+function mapVolumeRep(bff) {
+	if (!bff) return null;
+	return {
+		id: bff.id ?? 0,
+		email: bff.email ?? null,
+		full_name: bff.full_name ?? null,
+		image_url: bff.image_url ?? null
+	};
+}
+function mapBundle(bff) {
+	return {
+		next_bill_date: bff.next_bill_date ?? null,
+		subscription_count: bff.subscription_count ?? 0,
+		address: mapAddress(bff.address),
+		volume_rep: mapVolumeRep(bff.volume_rep),
+		subscriptions: (bff.subscriptions ?? []).map((s) => mapDetailSubscription(s))
+	};
+}
+function createPortalBundlesAdapter(client) {
+	return {
+		fetchBundles: async () => {
+			return ((await require_portal_tenant.subscription_bundles_list(client)).subscription_bundles ?? []).map(mapBundle);
+		},
+		createBundle: async (params) => {
+			const bundle = {
+				subscription_tokens: params.subscription_tokens,
+				next_bill_date: params.next_bill_date
+			};
+			if (params.address_id !== void 0) bundle.address_id = params.address_id;
+			if (params.volume_rep_id !== void 0) bundle.volume_rep_id = params.volume_rep_id;
+			const bff = (await require_portal_tenant.subscription_bundles_create(client, { bundle })).subscription_bundle;
+			if (!bff) throw new Error("BFF returned a successful response but bundle data was missing");
+			return mapBundle(bff);
+		}
+	};
+}
+//#endregion
+//#region src/subscriptions/PortalBundlesApiProvider.tsx
+function PortalBundlesApiProvider({ children }) {
+	const client = require_PortalTenantClientProvider.usePortalTenantClient();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BundlesCoreProvider, {
+		api: (0, react.useMemo)(() => createPortalBundlesAdapter(client), [client]),
+		children
+	});
+}
+//#endregion
 //#region ../../subscriptions/core/src/translation-api-context.ts
 const { Provider: SubscriptionsProvider, useTranslation } = require_translation_api_context_factory.createTranslationContext("Subscriptions");
 const SubscriptionsTranslationProvider = SubscriptionsProvider;
@@ -2898,7 +3029,43 @@ const subscriptionsDomain = require_static_dict_adapter.createDomainTranslations
 		list_empty_hint: "When you subscribe to a product, it'll show up here.",
 		list_load_failed_title: "Couldn't load your subscriptions",
 		list_load_failed_hint: "Something went wrong on our end. Please try again.",
-		list_try_again: "Try again"
+		list_try_again: "Try again",
+		list_bundle_cta: "Bundle",
+		list_bundle_card_label: "Bundle · {{n}} subscriptions",
+		list_bundle_more_count: "+{{n}} more",
+		list_bundle_members_title: "Bundle members",
+		bundle_subscriptions: "Bundle subscriptions",
+		bundle_back: "Back",
+		bundle_done: "Done",
+		bundle_create: "Create bundle",
+		bundle_step_select: "Select",
+		bundle_step_date: "Date",
+		bundle_step_address: "Address",
+		bundle_step_payment: "Payment",
+		bundle_and_save: "Bundle and save",
+		bundle_select_subs: "Select 2 or more subscriptions to bundle them onto one bill date and shipment.",
+		bundle_step1_message: "✨ Bundle and save on shipping",
+		bundle_select_new_bill_date: "Select a new bill date",
+		bundle_select_new_bill_date_description: "All bundled subscriptions will share this bill date.",
+		bundle_year: "Year",
+		bundle_month: "Month",
+		bundle_day: "Day",
+		bundle_step2_message: "📅 Choose when they ship together",
+		bundle_select_address: "Select shipping address",
+		bundle_select_address_description: "All bundled subscriptions will ship to this address.",
+		bundle_selected_bill_date: "Selected bill date:",
+		bundle_add_new_address: "Add new address",
+		bundle_default_badge: "Default",
+		bundle_step3_message: "🎁 Almost there — pick delivery",
+		bundle_select_payment: "Select payment method",
+		bundle_select_payment_description: "All bundled subscriptions will be charged to this payment method.",
+		bundle_no_usable_payment_methods: "No usable payment methods. Add one in your profile.",
+		bundle_card_expires: "Expires",
+		bundle_add_new_card: "Add new card",
+		bundle_step4_message: "💳 Last step — choose payment method",
+		bundle_succeeded: "Subscriptions bundled successfully.",
+		bundle_partial_payment_failure: "Bundle created but payment method failed for {{n}} subscription(s).",
+		bundle_failed: "Couldn't bundle subscriptions. Please try again."
 	},
 	loaders: {
 		de: () => Promise.resolve().then(() => require("./de-CfNYQbnG.cjs")).then((m) => m.default),
@@ -3057,10 +3224,17 @@ function pricingSuffix(plan, t) {
 }
 function formatLongDate(iso) {
 	try {
-		return new Date(iso).toLocaleDateString(void 0, {
+		const match = /^(\d{4})-(\d{2})-(\d{2})/.exec(iso);
+		if (!match) return iso;
+		const y = Number(match[1]);
+		const m = Number(match[2]);
+		const d = Number(match[3]);
+		if (!y || !m || !d) return iso;
+		return new Date(Date.UTC(y, m - 1, d)).toLocaleDateString(void 0, {
 			month: "long",
 			day: "numeric",
-			year: "numeric"
+			year: "numeric",
+			timeZone: "UTC"
 		});
 	} catch {
 		return iso;
@@ -3077,6 +3251,17 @@ function formatPrice(sub) {
 	return sub.price.toFixed(2);
 }
 /**
+* Mirror of `formatPrice` for the detail subscription shape used inside a
+* `Bundle.subscriptions[]`. The detail variant carries `price_in_currency`
+* directly (no nested `product` like the list variant), so this peels off
+* one less layer.
+*/
+function formatDetailPrice(sub) {
+	const fromBff = sub.variant?.price_in_currency;
+	if (fromBff && fromBff.trim().length > 0) return fromBff;
+	return sub.price.toFixed(2);
+}
+/**
 * Compute progress through a billing cycle. Returns `null` when either
 * date is missing, unparseable, or `end <= start`. `now` is injectable
 * for tests.
@@ -3108,7 +3293,8 @@ function friendlyDaysAhead(end, t, now = Date.now()) {
 }
 //#endregion
 //#region src/screens/subscriptions/PortalSubscriptionsList.tsx
-function PortalSubscriptionsList({ customerId, isLoadingCustomer, onSubscriptionClick, onResume }) {
+const EMPTY_BUNDLES = [];
+function PortalSubscriptionsList({ customerId, isLoadingCustomer, onSubscriptionClick, onResume, onBundleClick, bundles = EMPTY_BUNDLES }) {
 	const { t } = useSubscriptionsTranslation();
 	const [filter, setFilter] = (0, react.useState)("all");
 	const { data, isLoading, isError, refetch, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteSubscriptions({
@@ -3118,13 +3304,26 @@ function PortalSubscriptionsList({ customerId, isLoadingCustomer, onSubscription
 	const list = (0, react.useMemo)(() => data?.pages.flatMap((p) => p.subscriptions) ?? [], [data]);
 	const counts = (0, react.useMemo)(() => countByFilter(list), [list]);
 	const filteredList = (0, react.useMemo)(() => list.filter((s) => filterPredicate(filter, s)), [list, filter]);
+	const relevantBundles = (0, react.useMemo)(() => bundles.filter((b) => b.subscription_count > 1), [bundles]);
+	const bundledTokens = (0, react.useMemo)(() => {
+		const tokens = /* @__PURE__ */ new Set();
+		for (const bundle of relevantBundles) for (const sub of bundle.subscriptions) if (sub.subscription_token) tokens.add(sub.subscription_token);
+		return tokens;
+	}, [relevantBundles]);
+	const showBundleSection = filter === "all" && relevantBundles.length > 0;
 	const { activeSubs, inactiveSubs } = (0, react.useMemo)(() => {
 		const sorted = filteredList.slice().sort((a, b) => STATUS_PRIORITY[mapStatus(a.status, t).kind] - STATUS_PRIORITY[mapStatus(b.status, t).kind]);
+		const activeCandidates = sorted.filter((s) => isActiveKind(mapStatus(s.status, t).kind));
 		return {
-			activeSubs: sorted.filter((s) => isActiveKind(mapStatus(s.status, t).kind)),
+			activeSubs: showBundleSection ? activeCandidates.filter((s) => !bundledTokens.has(s.subscription_token)) : activeCandidates,
 			inactiveSubs: sorted.filter((s) => !isActiveKind(mapStatus(s.status, t).kind))
 		};
-	}, [filteredList, t]);
+	}, [
+		filteredList,
+		t,
+		showBundleSection,
+		bundledTokens
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScreenHeaderContext.ScreenHeaderBreadcrumbs, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Breadcrumb, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbList, {
 		className: "text-lg",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbPage, {
@@ -3144,6 +3343,7 @@ function PortalSubscriptionsList({ customerId, isLoadingCustomer, onSubscription
 					active: filter,
 					counts,
 					onChange: setFilter,
+					onBundleClick,
 					t
 				}),
 				isLoading || isLoadingCustomer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -3155,14 +3355,18 @@ function PortalSubscriptionsList({ customerId, isLoadingCustomer, onSubscription
 				}) : filteredList.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyState, {
 					filtered: filter !== "all" && list.length > 0,
 					t
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [activeSubs.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(showBundleSection || activeSubs.length > 0) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "mt-6 grid grid-cols-1 gap-5 md:grid-cols-2",
-					children: activeSubs.map((sub) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionCard, {
+					children: [showBundleSection && relevantBundles.map((bundle, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BundleCard, {
+						bundle,
+						onSubscriptionClick,
+						t
+					}, `bundle-${i}-${bundle.next_bill_date}`)), activeSubs.map((sub) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionCard, {
 						sub,
 						onClick: () => onSubscriptionClick(sub.subscription_token),
 						onResume: onResume ? () => onResume(sub) : void 0,
 						t
-					}, sub.id))
+					}, sub.id))]
 				}), inactiveSubs.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: activeSubs.length > 0 ? "mt-10" : "mt-6",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -3209,10 +3413,10 @@ const FILTER_KEYS = [
 		labelKey: "list_filter_cancelled"
 	}
 ];
-function FilterPills({ active, counts, onChange, t }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "-mx-1 mt-5 flex flex-wrap gap-1.5 px-1",
-		children: FILTER_KEYS.map((f) => {
+function FilterPills({ active, counts, onChange, onBundleClick, t }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "-mx-1 mt-5 flex flex-wrap items-center gap-1.5 px-1",
+		children: [FILTER_KEYS.map((f) => {
 			const isActive = f.key === active;
 			const count = counts[f.key];
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
@@ -3224,8 +3428,153 @@ function FilterPills({ active, counts, onChange, t }) {
 					children: count
 				})]
 			}, f.key);
-		})
+		}), counts.all >= 2 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			onClick: onBundleClick,
+			className: "bg-primary text-primary-foreground hover:bg-primary/90 ml-auto inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-bold transition-all",
+			children: t("list_bundle_cta")
+		})]
+	});
+}
+const BUNDLE_INLINE_LIMIT = 2;
+function BundleCard({ bundle, onSubscriptionClick, t }) {
+	const [popoverOpen, setPopoverOpen] = (0, react.useState)(false);
+	const total = bundle.subscriptions.reduce((sum, s) => sum + s.price, 0);
+	const nextBillLong = bundle.next_bill_date ? formatLongDate(bundle.next_bill_date) : null;
+	const inlineMembers = bundle.subscriptions.slice(0, BUNDLE_INLINE_LIMIT);
+	const overflowCount = bundle.subscriptions.length - inlineMembers.length;
+	const handleMemberClick = (token) => {
+		onSubscriptionClick(token);
+		setPopoverOpen(false);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "ring-border hover:ring-foreground/10 relative flex flex-col gap-4 rounded-2xl bg-transparent p-5 shadow-sm ring-1 transition-all duration-300 hover:shadow-lg",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "bg-muted flex size-7 items-center justify-center rounded-full",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Package, {
+						className: "text-foreground size-4",
+						strokeWidth: 2
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "text-foreground text-xs font-bold",
+					children: t("list_bundle_card_label", { n: String(bundle.subscription_count) })
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col",
+				children: [inlineMembers.map((sub) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BundleMemberRow, {
+					sub,
+					onClick: () => handleMemberClick(sub.subscription_token),
+					t
+				}, sub.subscription_token)), overflowCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Popover, {
+					open: popoverOpen,
+					onOpenChange: setPopoverOpen,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.PopoverTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "text-muted-foreground hover:text-foreground focus-visible:ring-foreground/30 mt-1 inline-flex w-fit cursor-pointer items-center rounded-md px-2 py-1 text-xs font-bold transition-colors focus-visible:ring-2 focus-visible:outline-none",
+							children: t("list_bundle_more_count", { n: String(overflowCount) })
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.PopoverContent, {
+						align: "start",
+						className: "bg-background ring-border w-80 rounded-2xl p-3 shadow-lg ring-1",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "text-muted-foreground px-2 pt-1 pb-2 text-xs font-bold uppercase",
+							children: t("list_bundle_members_title")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "flex max-h-80 flex-col overflow-y-auto",
+							children: bundle.subscriptions.map((sub) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BundleMemberRow, {
+								sub,
+								onClick: () => handleMemberClick(sub.subscription_token),
+								t
+							}, sub.subscription_token))
+						})]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "bg-muted mt-auto rounded-xl px-4 py-3.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "text-foreground text-sm font-bold",
+					children: t("list_next_bill_label")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mt-3 grid grid-cols-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "pr-4",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "text-muted-foreground text-xs",
+							children: t("list_bill_date")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "text-foreground mt-1 text-base font-bold tracking-tight tabular-nums",
+							children: nextBillLong ?? "—"
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "border-border border-l pl-4",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "text-muted-foreground text-xs",
+							children: t("list_bill_amount")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "text-foreground mt-1 text-base font-bold tracking-tight tabular-nums",
+							children: total.toFixed(2)
+						})]
+					})]
+				})]
+			})
+		]
+	});
+}
+function BundleMemberRow({ sub, onClick, t }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		onClick,
+		className: "hover:bg-muted/60 focus-visible:ring-foreground/30 -mx-2 flex cursor-pointer items-center gap-3 rounded-lg px-2 py-2 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "relative size-12 shrink-0",
+				children: sub.variant.product.image_url ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+					src: sub.variant.product.image_url,
+					alt: "",
+					className: "ring-background size-12 rounded-lg bg-transparent object-cover ring-2"
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "bg-muted ring-background text-muted-foreground flex size-12 items-center justify-center rounded-lg ring-2",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ImageOff, {
+						className: "size-4",
+						strokeWidth: 1.75
+					})
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "text-foreground truncate text-xs font-bold",
+					children: sub.variant.product.title || t("list_product_fallback")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "text-muted-foreground truncate text-xs",
+					children: bundleMemberCadence(sub.subscription_plan, t)
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-foreground shrink-0 text-xs font-bold tabular-nums",
+				children: formatDetailPrice(sub)
+			})
+		]
+	});
+}
+function bundleMemberCadence(plan, t) {
+	const { billing_interval: interval, billing_interval_unit: unit } = plan;
+	if (interval === 1 && unit === "month") return t("list_cadence_monthly");
+	if (interval === 1 && unit === "week") return t("list_cadence_weekly");
+	if (interval === 1 && unit === "year") return t("list_cadence_yearly");
+	if (interval === 3 && unit === "month") return t("list_cadence_quarterly");
+	if (interval > 1) return t("list_cadence_every_n_units", {
+		n: String(interval),
+		unit: unit + "s"
 	});
+	return t("list_cadence_every_unit", { unit });
 }
 function SubscriptionCard({ sub, onClick, onResume, t }) {
 	const status = mapStatus(sub.status, t);
@@ -3243,7 +3592,7 @@ function SubscriptionCard({ sub, onClick, onResume, t }) {
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 			type: "button",
 			onClick,
-			className: "flex cursor-pointer flex-col gap-5 text-left focus:outline-none",
+			className: "flex flex-1 cursor-pointer flex-col gap-5 text-left focus:outline-none",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex items-start gap-4",
@@ -3270,10 +3619,10 @@ function SubscriptionCard({ sub, onClick, onResume, t }) {
 					})]
 				}),
 				isCancelled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "bg-muted text-muted-foreground rounded-xl px-4 py-3 text-sm font-semibold",
+					className: "bg-muted text-muted-foreground mt-auto rounded-xl px-4 py-3 text-sm font-semibold",
 					children: status.label
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "bg-muted rounded-xl px-4 py-3.5",
+					className: "bg-muted mt-auto rounded-xl px-4 py-3.5",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: `text-sm font-bold ${isPastDue ? "text-destructive" : "text-foreground"}`,
 						children: isPastDue ? daysOverdue === 1 ? t("list_bill_due_1_day_ago") : daysOverdue > 0 ? t("list_bill_due_n_days_ago", { n: String(daysOverdue) }) : t("list_bill_overdue") : isPaused ? t("list_last_bill_label") : t("list_next_bill_label")
@@ -3445,15 +3794,972 @@ function ErrorState({ onRetry, t }) {
 	});
 }
 //#endregion
+//#region src/screens/subscriptions/bundle-drawer/payment-utils.ts
+/**
+* Mirrors fluid-checkout's `isPaymentMethodUsable`. A payment method is only
+* eligible for bundle attachment when it has a complete billing address.
+*
+* Note: the portal's `fluidPay.CustomerPaymentMethod` does not surface the
+* checkout-only `au_status` field, so we only check billing-address completeness.
+*/
+function isPaymentMethodUsable(pm) {
+	const addr = pm.billing_address;
+	if (!addr) return false;
+	return Boolean(addr.address1 && addr.city && addr.state && addr.zip && addr.country_code);
+}
+//#endregion
+//#region src/screens/subscriptions/bundle-drawer/use-bundle-form.ts
+function pickDefaultAddressId(addresses, defaultAddressId) {
+	if (defaultAddressId != null) {
+		const match = addresses.find((a) => a.id === defaultAddressId);
+		if (match) return match.id;
+	}
+	const flagged = addresses.find((a) => a.default);
+	if (flagged) return flagged.id;
+	return addresses[0]?.id ?? null;
+}
+function pickDefaultPaymentMethodId(paymentMethods, defaultPaymentMethodId) {
+	const usable = paymentMethods.filter(isPaymentMethodUsable);
+	if (defaultPaymentMethodId != null) {
+		const match = usable.find((pm) => pm.id === defaultPaymentMethodId);
+		if (match) return match.id;
+	}
+	const flagged = usable.find((pm) => pm.default);
+	if (flagged) return flagged.id;
+	return usable[0]?.id ?? null;
+}
+function useBundleForm({ addresses, paymentMethods, defaultAddressId, defaultPaymentMethodId }) {
+	const [step, setStep] = (0, react.useState)(1);
+	const [selectedTokens, setSelectedTokens] = (0, react.useState)(() => /* @__PURE__ */ new Set());
+	const today = (0, react.useMemo)(() => /* @__PURE__ */ new Date(), []);
+	const [selectedYear, setYearState] = (0, react.useState)(today.getUTCFullYear());
+	const [selectedMonth, setMonthState] = (0, react.useState)(null);
+	const [selectedDay, setDayState] = (0, react.useState)(null);
+	const [selectedAddressId, setSelectedAddressId] = (0, react.useState)(() => pickDefaultAddressId(addresses, defaultAddressId));
+	const [selectedPaymentMethodId, setSelectedPaymentMethodId] = (0, react.useState)(() => pickDefaultPaymentMethodId(paymentMethods, defaultPaymentMethodId));
+	(0, react.useEffect)(() => {
+		if (selectedAddressId == null && addresses.length > 0) setSelectedAddressId(pickDefaultAddressId(addresses, defaultAddressId));
+	}, [
+		selectedAddressId,
+		addresses,
+		defaultAddressId
+	]);
+	(0, react.useEffect)(() => {
+		if (selectedPaymentMethodId == null && paymentMethods.some(isPaymentMethodUsable)) setSelectedPaymentMethodId(pickDefaultPaymentMethodId(paymentMethods, defaultPaymentMethodId));
+	}, [
+		selectedPaymentMethodId,
+		paymentMethods,
+		defaultPaymentMethodId
+	]);
+	return {
+		step,
+		setStep,
+		selectedTokens,
+		toggleToken: (0, react.useCallback)((token) => {
+			setSelectedTokens((prev) => {
+				const next = new Set(prev);
+				if (next.has(token)) next.delete(token);
+				else next.add(token);
+				return next;
+			});
+		}, []),
+		selectedYear,
+		selectedMonth,
+		selectedDay,
+		setYear: (0, react.useCallback)((y) => {
+			setYearState(y);
+			if (selectedMonth != null) {
+				const isPastMonth = y < today.getUTCFullYear() || y === today.getUTCFullYear() && selectedMonth < today.getUTCMonth();
+				const isPastDay = y === today.getUTCFullYear() && selectedMonth === today.getUTCMonth() && selectedDay != null && selectedDay < today.getUTCDate();
+				if (isPastMonth) {
+					setMonthState(null);
+					setDayState(null);
+				} else if (isPastDay) setDayState(null);
+			}
+		}, [
+			selectedMonth,
+			selectedDay,
+			today
+		]),
+		setMonth: (0, react.useCallback)((m) => {
+			setMonthState(m);
+			if (selectedDay != null) {
+				const daysInNewMonth = new Date(Date.UTC(selectedYear, m + 1, 0)).getUTCDate();
+				const isPastDay = selectedYear === today.getUTCFullYear() && m === today.getUTCMonth() && selectedDay < today.getUTCDate();
+				if (selectedDay > daysInNewMonth || isPastDay) setDayState(null);
+			}
+		}, [
+			selectedDay,
+			selectedYear,
+			today
+		]),
+		setDay: (0, react.useCallback)((d) => setDayState(d), []),
+		selectedAddressId,
+		setSelectedAddressId,
+		selectedPaymentMethodId,
+		setSelectedPaymentMethodId,
+		canProceedFromStep1: selectedTokens.size >= 2,
+		canProceedFromStep2: selectedMonth !== null && selectedDay !== null,
+		canProceedFromStep3: selectedAddressId != null,
+		canProceedFromStep4: selectedPaymentMethodId != null,
+		formattedDate: (0, react.useMemo)(() => {
+			if (selectedMonth == null || selectedDay == null) return null;
+			return `${selectedYear}-${String(selectedMonth + 1).padStart(2, "0")}-${String(selectedDay).padStart(2, "0")}`;
+		}, [
+			selectedYear,
+			selectedMonth,
+			selectedDay
+		])
+	};
+}
+//#endregion
+//#region src/screens/subscriptions/bundle-drawer/DrawerStepTabs.tsx
+const TABS = [
+	{
+		id: 1,
+		labelKey: "bundle_step_select"
+	},
+	{
+		id: 2,
+		labelKey: "bundle_step_date"
+	},
+	{
+		id: 3,
+		labelKey: "bundle_step_address"
+	},
+	{
+		id: 4,
+		labelKey: "bundle_step_payment"
+	}
+];
+const PROGRESS_BY_STEP = {
+	1: "0%",
+	2: "33%",
+	3: "66%",
+	4: "100%"
+};
+function DrawerStepTabs({ step, onStepClick, canProceedFromStep1, canProceedFromStep2, canProceedFromStep3 }) {
+	const { t } = useSubscriptionsTranslation();
+	const handleClick = (target) => {
+		if (target < step) onStepClick(target);
+		else if (target === 2 && canProceedFromStep1) onStepClick(2);
+		else if (target === 3 && canProceedFromStep1 && canProceedFromStep2) onStepClick(3);
+		else if (target === 4 && canProceedFromStep1 && canProceedFromStep2 && canProceedFromStep3) onStepClick(4);
+	};
+	const messageKey = step === 1 ? "bundle_step1_message" : step === 2 ? "bundle_step2_message" : step === 3 ? "bundle_step3_message" : "bundle_step4_message";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "px-6 pt-4",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mb-2 flex items-center justify-between",
+				children: TABS.map((tab) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: () => handleClick(tab.id),
+					className: `text-xs font-bold transition-colors ${step === tab.id ? "text-foreground" : step > tab.id ? "text-muted-foreground cursor-pointer" : "text-muted-foreground/75"}`,
+					children: t(tab.labelKey)
+				}, tab.id))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "bg-muted relative h-1 rounded-full",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "bg-primary absolute h-1 rounded-full transition-all duration-300",
+					style: { width: PROGRESS_BY_STEP[step] }
+				}), TABS.map((tab, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: `absolute top-1/2 size-3 rounded-full transition-colors ${step >= tab.id ? "bg-primary" : "bg-muted ring-border ring-1"}`,
+					style: index === 0 ? {
+						left: 0,
+						transform: "translateY(-50%)"
+					} : index === TABS.length - 1 ? {
+						right: 0,
+						transform: "translateY(-50%)"
+					} : {
+						left: `${index / (TABS.length - 1) * 100}%`,
+						transform: "translate(-50%, -50%)"
+					}
+				}, tab.id))]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-muted-foreground mt-3 flex items-center justify-center text-xs",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t(messageKey) })
+			})
+		]
+	});
+}
+//#endregion
+//#region src/screens/subscriptions/bundle-drawer/DrawerStepSelect.tsx
+function formatBillDate(value) {
+	if (!value) return "—";
+	try {
+		const match = /^(\d{4})-(\d{2})-(\d{2})/.exec(value);
+		if (!match) return "—";
+		const y = Number(match[1]);
+		const m = Number(match[2]);
+		const d = Number(match[3]);
+		if (!y || !m || !d) return "—";
+		return new Date(Date.UTC(y, m - 1, d)).toLocaleDateString(void 0, {
+			month: "short",
+			day: "numeric",
+			timeZone: "UTC"
+		});
+	} catch {
+		return "—";
+	}
+}
+function DrawerStepSelect({ subscriptions, selectedTokens, onToggle }) {
+	const { t } = useSubscriptionsTranslation();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex-1 overflow-y-auto px-6 py-4",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "bg-muted mt-2 rounded-2xl p-6 text-center",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "mx-auto mb-3 flex size-14 items-center justify-center rounded-2xl bg-transparent shadow-sm",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Truck, {
+						className: "text-foreground size-7",
+						strokeWidth: 2
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+					className: "text-foreground text-sm font-bold",
+					children: t("bundle_and_save")
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-muted-foreground mt-1 text-xs",
+					children: t("bundle_select_subs")
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "mt-4 space-y-2",
+			children: subscriptions.map((sub) => {
+				const isSelected = selectedTokens.has(sub.subscription_token);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					role: "checkbox",
+					"aria-checked": isSelected,
+					tabIndex: 0,
+					onClick: () => onToggle(sub.subscription_token),
+					onKeyDown: (e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							onToggle(sub.subscription_token);
+						}
+					},
+					className: `flex cursor-pointer items-start gap-3 rounded-2xl p-4 transition-all ${isSelected ? "ring-primary bg-muted ring-2" : "ring-border hover:ring-foreground/20 ring-1"}`,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "pt-1",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: `flex size-5 items-center justify-center rounded-full transition-colors ${isSelected ? "bg-primary" : "ring-foreground/30 ring-2"}`,
+								children: isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, {
+									className: "text-primary-foreground size-3",
+									strokeWidth: 3
+								})
+							})
+						}),
+						sub.variant?.product?.image_url ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+							src: sub.variant.product.image_url,
+							alt: sub.variant.product.title ?? "",
+							className: "size-12 shrink-0 rounded-lg object-cover"
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "bg-muted flex size-12 shrink-0 items-center justify-center rounded-lg",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Package, {
+								className: "text-muted-foreground size-6",
+								strokeWidth: 1.75
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "min-w-0 flex-1",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "text-foreground truncate text-xs font-bold",
+									children: sub.variant?.product?.title ?? t("list_product_fallback")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "text-foreground mt-0.5 text-xs",
+									children: formatPrice(sub)
+								}),
+								sub.customer?.full_name && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "text-muted-foreground mt-0.5 truncate text-xs",
+									children: sub.customer.full_name
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "shrink-0 text-right",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "text-muted-foreground inline-flex items-center gap-1 text-xs",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Repeat, {
+									className: "size-3",
+									strokeWidth: 2
+								}), formatCadence(sub.subscription_plan, t)]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-muted-foreground/75 mt-1 text-xs",
+								children: formatBillDate(sub.next_bill_date)
+							})]
+						})
+					]
+				}, sub.subscription_token);
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/screens/subscriptions/bundle-drawer/DrawerStepDate.tsx
+const MONTHS = [
+	"Jan",
+	"Feb",
+	"Mar",
+	"Apr",
+	"May",
+	"Jun",
+	"Jul",
+	"Aug",
+	"Sep",
+	"Oct",
+	"Nov",
+	"Dec"
+];
+function getDaysInMonth(year, month) {
+	return new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
+}
+function DrawerStepDate({ selectedYear, selectedMonth, selectedDay, onYearChange, onMonthChange, onDayChange }) {
+	const { t } = useSubscriptionsTranslation();
+	const today = (0, react.useMemo)(() => /* @__PURE__ */ new Date(), []);
+	const currentYear = today.getUTCFullYear();
+	const currentMonth = today.getUTCMonth();
+	const currentDay = today.getUTCDate();
+	const availableYears = (0, react.useMemo)(() => [
+		currentYear,
+		currentYear + 1,
+		currentYear + 2
+	], [currentYear]);
+	const isMonthDisabled = (monthIndex) => {
+		if (selectedYear < currentYear) return true;
+		if (selectedYear > currentYear) return false;
+		return monthIndex < currentMonth;
+	};
+	const daysInSelectedMonth = selectedMonth == null ? 31 : getDaysInMonth(selectedYear, selectedMonth);
+	const isDayDisabled = (day) => {
+		if (selectedMonth == null) return true;
+		if (day > getDaysInMonth(selectedYear, selectedMonth)) return true;
+		if (selectedYear < currentYear) return true;
+		if (selectedYear > currentYear) return false;
+		if (selectedMonth > currentMonth) return false;
+		if (selectedMonth < currentMonth) return true;
+		return day < currentDay;
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex-1 overflow-y-auto px-6 py-4",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mt-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+					className: "text-foreground text-sm font-bold",
+					children: t("bundle_select_new_bill_date")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-muted-foreground mt-1 text-xs",
+					children: t("bundle_select_new_bill_date_description")
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mt-6",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+					className: "text-foreground mb-3 text-xs font-bold",
+					children: t("bundle_year")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "grid grid-cols-3 gap-2",
+					children: availableYears.map((year) => {
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							onClick: () => onYearChange(year),
+							className: `rounded-lg px-3 py-2.5 text-xs font-semibold transition-all ${selectedYear === year ? "bg-primary text-primary-foreground" : "text-foreground ring-border hover:ring-foreground/20 bg-transparent ring-1"}`,
+							children: year
+						}, year);
+					})
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mt-6",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+					className: "text-foreground mb-3 text-xs font-bold",
+					children: t("bundle_month")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "grid grid-cols-4 gap-2",
+					children: MONTHS.map((month, index) => {
+						const isActive = selectedMonth === index;
+						const disabled = isMonthDisabled(index);
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							disabled,
+							onClick: () => onMonthChange(index),
+							className: `rounded-lg px-3 py-2.5 text-xs font-semibold transition-all ${isActive ? "bg-primary text-primary-foreground" : "text-foreground ring-border hover:ring-foreground/20 bg-transparent ring-1"} ${disabled ? "cursor-not-allowed opacity-40" : ""}`,
+							children: month
+						}, month);
+					})
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mt-6",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+					className: "text-foreground mb-3 text-xs font-bold",
+					children: t("bundle_day")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "grid grid-cols-8 gap-1.5",
+					children: Array.from({ length: daysInSelectedMonth }, (_, i) => i + 1).map((day) => {
+						const isActive = selectedDay === day;
+						const disabled = isDayDisabled(day);
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							disabled,
+							onClick: () => onDayChange(day),
+							className: `rounded-lg py-2 text-xs font-semibold transition-all ${isActive ? "bg-primary text-primary-foreground" : "text-foreground ring-border hover:ring-foreground/20 bg-transparent ring-1"} ${disabled ? "cursor-not-allowed opacity-40" : ""}`,
+							children: day
+						}, day);
+					})
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/screens/subscriptions/bundle-drawer/DrawerStepAddress.tsx
+function DrawerStepAddress({ addresses, selectedAddressId, onAddressSelect, onAddAddress, formattedSelectedDate }) {
+	const { t } = useSubscriptionsTranslation();
+	const hasFlaggedDefault = addresses.some((a) => a.default);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex-1 overflow-y-auto px-6 py-4",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mt-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+					className: "text-foreground text-sm font-bold",
+					children: t("bundle_select_address")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-muted-foreground mt-1 text-xs",
+					children: t("bundle_select_address_description")
+				})]
+			}),
+			formattedSelectedDate && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "bg-muted text-muted-foreground mt-4 rounded-lg px-4 py-2.5 text-xs",
+				children: [
+					t("bundle_selected_bill_date"),
+					" ",
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-foreground font-semibold",
+						children: formatLongDate(formattedSelectedDate)
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mt-4 space-y-2",
+				role: "radiogroup",
+				children: addresses.map((address, index) => {
+					const isSelected = selectedAddressId === address.id;
+					const isDefault = address.default || !hasFlaggedDefault && index === 0;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						role: "radio",
+						"aria-checked": isSelected,
+						onClick: () => onAddressSelect(address.id),
+						className: `flex h-auto w-full cursor-pointer items-start gap-3 rounded-2xl p-4 text-left transition-all ${isSelected ? "ring-primary bg-muted ring-2" : "ring-border hover:ring-foreground/20 ring-1"}`,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "pt-0.5",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: `flex size-5 items-center justify-center rounded-full transition-colors ${isSelected ? "bg-primary" : "ring-foreground/30 ring-2"}`,
+								children: isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, {
+									className: "text-primary-foreground size-3",
+									strokeWidth: 3
+								})
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "min-w-0 flex-1",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex flex-wrap items-center gap-2",
+									children: [address.name && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "text-foreground truncate text-xs font-bold",
+										children: address.name
+									}), isDefault && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "text-foreground ring-border rounded-full bg-transparent px-2 py-0.5 text-xs font-bold ring-1",
+										children: t("bundle_default_badge")
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "text-muted-foreground mt-0.5 truncate text-xs",
+									children: address.address1
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+									className: "text-muted-foreground truncate text-xs",
+									children: [
+										[address.city, address.state].filter(Boolean).join(", "),
+										" ",
+										address.postal_code
+									]
+								})
+							]
+						})]
+					}, address.id);
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mt-4 text-right",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: onAddAddress,
+					className: "text-foreground inline-flex items-center text-xs font-bold underline-offset-2 hover:underline",
+					children: t("bundle_add_new_address")
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/screens/subscriptions/bundle-drawer/DrawerStepPayment.tsx
+function DrawerStepPayment({ paymentMethods, selectedPaymentMethodId, onPaymentMethodSelect, onAddPaymentMethod }) {
+	const { t } = useSubscriptionsTranslation();
+	const usable = (0, react.useMemo)(() => {
+		const filtered = paymentMethods.filter(isPaymentMethodUsable);
+		const defaultIdx = filtered.findIndex((pm) => pm.default);
+		if (defaultIdx <= 0) return filtered;
+		const defaultCard = filtered[defaultIdx];
+		if (!defaultCard) return filtered;
+		return [defaultCard, ...filtered.filter((_, i) => i !== defaultIdx)];
+	}, [paymentMethods]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex-1 overflow-y-auto px-6 py-4",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mt-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+					className: "text-foreground text-sm font-bold",
+					children: t("bundle_select_payment")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-muted-foreground mt-1 text-xs",
+					children: t("bundle_select_payment_description")
+				})]
+			}),
+			usable.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "bg-muted text-muted-foreground mt-4 rounded-lg px-4 py-3 text-xs",
+				children: t("bundle_no_usable_payment_methods")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mt-4 space-y-2",
+				role: "radiogroup",
+				children: usable.map((pm) => {
+					const isSelected = selectedPaymentMethodId === pm.id;
+					const brand = pm.details.card_brand ?? pm.details.card_type ?? pm.payment_type ?? "Card";
+					const lastFour = pm.details.last_four ?? "••••";
+					const expiry = pm.details.exp_month != null && pm.details.exp_year != null ? `${t("bundle_card_expires")} ${pm.details.exp_month}/${pm.details.exp_year}` : null;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						role: "radio",
+						"aria-checked": isSelected,
+						onClick: () => onPaymentMethodSelect(pm.id),
+						className: `flex h-auto w-full cursor-pointer items-start gap-3 rounded-2xl p-4 text-left transition-all ${isSelected ? "ring-primary bg-muted ring-2" : "ring-border hover:ring-foreground/20 ring-1"}`,
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "pt-0.5",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: `flex size-5 items-center justify-center rounded-full transition-colors ${isSelected ? "bg-primary" : "ring-foreground/30 ring-2"}`,
+									children: isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, {
+										className: "text-primary-foreground size-3",
+										strokeWidth: 3
+									})
+								})
+							}),
+							pm.details.logo_url ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+								src: pm.details.logo_url,
+								alt: brand,
+								className: "h-6 w-10 shrink-0 object-contain"
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "bg-muted text-muted-foreground flex h-6 w-10 shrink-0 items-center justify-center rounded",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CreditCard, {
+									className: "size-4",
+									strokeWidth: 1.75
+								})
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "min-w-0 flex-1",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex flex-wrap items-center gap-2",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+										className: "text-foreground text-xs font-bold",
+										children: [
+											brand,
+											" •••• ",
+											lastFour
+										]
+									}), pm.default && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "text-foreground ring-border rounded-full bg-transparent px-2 py-0.5 text-xs font-bold ring-1",
+										children: t("bundle_default_badge")
+									})]
+								}), expiry && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "text-muted-foreground mt-0.5 text-xs",
+									children: expiry
+								})]
+							})
+						]
+					}, pm.id);
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mt-4 text-right",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: onAddPaymentMethod,
+					className: "text-foreground inline-flex items-center text-xs font-bold underline-offset-2 hover:underline",
+					children: t("bundle_add_new_card")
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/screens/subscriptions/bundle-drawer/BundleSubscriptionsDrawer.tsx
+function BundleSubscriptionsDrawer({ open, onOpenChange, subscriptions: subscriptionList, addresses, paymentMethods, defaultAddressId, defaultPaymentMethodId, onAddAddress, onAddPaymentMethod, onSubmit, isSubmitting }) {
+	const { t } = useSubscriptionsTranslation();
+	const form = useBundleForm({
+		addresses,
+		paymentMethods,
+		defaultAddressId,
+		defaultPaymentMethodId
+	});
+	const handleClose = () => onOpenChange(false);
+	const handleNext = () => {
+		if (form.step < 4) form.setStep(form.step + 1);
+	};
+	const handleBack = () => {
+		if (form.step === 1) handleClose();
+		else form.setStep(form.step - 1);
+	};
+	const handleSubmit = async () => {
+		if (!form.canProceedFromStep1 || !form.canProceedFromStep2 || !form.canProceedFromStep3 || !form.canProceedFromStep4 || form.formattedDate == null || form.selectedAddressId == null || form.selectedPaymentMethodId == null) return;
+		await onSubmit({
+			subscription_tokens: Array.from(form.selectedTokens),
+			next_bill_date: form.formattedDate,
+			address_id: form.selectedAddressId,
+			payment_method_id: form.selectedPaymentMethodId
+		});
+	};
+	const nextDisabled = form.step === 1 && !form.canProceedFromStep1 || form.step === 2 && !form.canProceedFromStep2 || form.step === 3 && !form.canProceedFromStep3;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Sheet, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.SheetContent, {
+			side: "right",
+			className: "bg-background flex h-full w-full flex-col gap-0 p-0 sm:max-w-md",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "border-border flex items-center justify-between border-b px-6 py-4",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.SheetTitle, {
+						className: "text-foreground text-base font-bold",
+						children: t("bundle_subscriptions")
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerStepTabs, {
+					step: form.step,
+					onStepClick: form.setStep,
+					canProceedFromStep1: form.canProceedFromStep1,
+					canProceedFromStep2: form.canProceedFromStep2,
+					canProceedFromStep3: form.canProceedFromStep3
+				}),
+				form.step === 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerStepSelect, {
+					subscriptions: subscriptionList,
+					selectedTokens: form.selectedTokens,
+					onToggle: form.toggleToken
+				}),
+				form.step === 2 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerStepDate, {
+					selectedYear: form.selectedYear,
+					selectedMonth: form.selectedMonth,
+					selectedDay: form.selectedDay,
+					onYearChange: form.setYear,
+					onMonthChange: form.setMonth,
+					onDayChange: form.setDay
+				}),
+				form.step === 3 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerStepAddress, {
+					addresses,
+					selectedAddressId: form.selectedAddressId,
+					onAddressSelect: form.setSelectedAddressId,
+					onAddAddress,
+					formattedSelectedDate: form.formattedDate
+				}),
+				form.step === 4 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerStepPayment, {
+					paymentMethods,
+					selectedPaymentMethodId: form.selectedPaymentMethodId,
+					onPaymentMethodSelect: form.setSelectedPaymentMethodId,
+					onAddPaymentMethod
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "border-border flex items-center justify-between gap-3 border-t px-6 py-4",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: handleBack,
+						className: "text-foreground ring-border hover:bg-muted rounded-lg bg-transparent px-6 py-2.5 text-xs font-bold ring-1 transition-all",
+						children: form.step === 1 ? t("bundle_done") : t("bundle_back")
+					}), form.step < 4 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: handleNext,
+						disabled: nextDisabled,
+						className: "bg-primary text-primary-foreground hover:bg-primary/90 rounded-lg px-6 py-2.5 text-xs font-bold transition-all disabled:cursor-not-allowed disabled:opacity-40",
+						children: t("next")
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: handleSubmit,
+						disabled: !form.canProceedFromStep4 || isSubmitting,
+						className: "bg-primary text-primary-foreground hover:bg-primary/90 inline-flex min-w-[140px] items-center justify-center rounded-lg px-6 py-2.5 text-xs font-bold transition-all disabled:cursor-not-allowed disabled:opacity-40",
+						children: isSubmitting ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "border-primary-foreground size-5 animate-spin rounded-full border-2 border-t-transparent" }) : t("bundle_create")
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
 //#region src/screens/SubscriptionsListScreen.tsx
-function SubscriptionsListScreen({ customerId, isLoadingCustomer }) {
+const ADDRESS_DIALOG_LABELS = {
+	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",
+	first_name: "First Name",
+	last_name: "Last Name",
+	deleting: "Deleting…",
+	tap_to_confirm: "Tap to confirm"
+};
+function addressDialogT(key) {
+	return ADDRESS_DIALOG_LABELS[key] ?? key.split("_").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+}
+function mapToFluidPayAddress$1(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 composeAddressName$1(firstName, lastName) {
+	const combined = `${firstName} ${lastName}`.trim();
+	return combined.length > 0 ? combined : null;
+}
+function SubscriptionsListScreenInner({ customerId, isLoadingCustomer, onToast }) {
 	const { navigate } = require_AppNavigationContext.useAppNavigation();
-	const goToDetail = (token) => navigate(`subscriptions/${token}`);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PortalSubscriptionsList, {
+	const queryClient = (0, _tanstack_react_query.useQueryClient)();
+	const payApi = require_api_context.usePayApi();
+	const countriesApi = require_countries_api_context.useCountriesApi();
+	const { t } = useSubscriptionsTranslation();
+	const { data: addresses = [] } = (0, _tanstack_react_query.useQuery)({
+		queryKey: require_query_keys.payKeys.addresses.list(),
+		queryFn: async () => {
+			return (await payApi.fetchAddresses()).addresses.map(mapToFluidPayAddress$1);
+		},
+		enabled: !!customerId && !isLoadingCustomer
+	});
+	const { data: paymentMethods = [] } = (0, _tanstack_react_query.useQuery)({
+		queryKey: require_query_keys.payKeys.paymentMethods.list(),
+		queryFn: async () => {
+			return (await payApi.fetchPaymentMethods()).payment_methods.map(require_AddressAutocompleteInput.mapToFluidPayPaymentMethod);
+		},
+		enabled: !!customerId && !isLoadingCustomer
+	});
+	const { data: subscriptionsData } = useInfiniteSubscriptions({
 		customerId,
-		isLoadingCustomer,
-		onSubscriptionClick: goToDetail,
-		onResume: (sub) => goToDetail(sub.subscription_token)
+		limit: 12
+	}, { enabled: !!customerId && !isLoadingCustomer });
+	const subscriptionsList = (0, react.useMemo)(() => subscriptionsData?.pages.flatMap((p) => p.subscriptions) ?? [], [subscriptionsData]);
+	const { data: bundlesData } = useBundles({ enabled: !!customerId && !isLoadingCustomer });
+	const [bundleDrawerOpen, setBundleDrawerOpen] = (0, react.useState)(false);
+	const [bundleDrawerKey, setBundleDrawerKey] = (0, react.useState)(0);
+	const [addressDialog, setAddressDialog] = (0, react.useState)({
+		open: false,
+		selected: null
+	});
+	const [isAddCardOpen, setIsAddCardOpen] = (0, react.useState)(false);
+	const [isBundling, setIsBundling] = (0, react.useState)(false);
+	const { data: countriesData } = (0, _tanstack_react_query.useQuery)({
+		queryKey: require_query_keys.storeKeys.countries(),
+		queryFn: () => countriesApi.listCountries(),
+		enabled: addressDialog.open || isAddCardOpen
+	});
+	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 createAddressMutation = (0, _tanstack_react_query.useMutation)({
+		mutationFn: (body) => payApi.createAddress({ address: {
+			name: composeAddressName$1(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 });
+			onToast?.("Address added", "success");
+		},
+		onError: () => onToast?.("Failed to add address", "error")
+	});
+	const addCreditCardMutation = (0, _tanstack_react_query.useMutation)({
+		mutationFn: (data) => payApi.createPaymentMethod({ payment_method: {
+			type: "card",
+			token: data.payment_method.token,
+			default: data.default_payment_method
+		} }),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: require_query_keys.payKeys.paymentMethods.all });
+			onToast?.("Payment method added", "success");
+		},
+		onError: () => onToast?.("Failed to add payment method", "error")
+	});
+	const createBundle = useCreateBundle();
+	const updateSubscription = useUpdateSubscriptionInfo();
+	const handleBundleClick = () => {
+		setBundleDrawerKey((k) => k + 1);
+		setBundleDrawerOpen(true);
+	};
+	const handleBundle = async (params) => {
+		if (isBundling) return;
+		setIsBundling(true);
+		try {
+			await createBundle.mutateAsync({
+				subscription_tokens: params.subscription_tokens,
+				next_bill_date: params.next_bill_date,
+				address_id: params.address_id
+			});
+		} catch {
+			onToast?.(t("bundle_failed"), "error");
+			setIsBundling(false);
+			return;
+		}
+		const failedCount = (await Promise.allSettled(params.subscription_tokens.map((token) => updateSubscription.mutateAsync({
+			subscriptionToken: token,
+			body: { payment_method_id: params.payment_method_id }
+		})))).filter((r) => r.status === "rejected").length;
+		if (failedCount === 0) onToast?.(t("bundle_succeeded"), "success");
+		else onToast?.(t("bundle_partial_payment_failure", { n: String(failedCount) }), "warning");
+		setBundleDrawerOpen(false);
+		setIsBundling(false);
+	};
+	const goToDetail = (token) => navigate(`subscriptions/${token}`);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PortalSubscriptionsList, {
+			customerId,
+			isLoadingCustomer,
+			onSubscriptionClick: goToDetail,
+			onResume: (sub) => goToDetail(sub.subscription_token),
+			onBundleClick: handleBundleClick,
+			bundles: bundlesData
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BundleSubscriptionsDrawer, {
+			open: bundleDrawerOpen,
+			onOpenChange: setBundleDrawerOpen,
+			subscriptions: subscriptionsList,
+			addresses,
+			paymentMethods,
+			defaultAddressId: addresses.find((a) => a.default)?.id ?? addresses[0]?.id ?? null,
+			defaultPaymentMethodId: paymentMethods.find((pm) => pm.default)?.id ?? paymentMethods[0]?.id ?? null,
+			onAddAddress: () => setAddressDialog({
+				open: true,
+				selected: null
+			}),
+			onAddPaymentMethod: () => setIsAddCardOpen(true),
+			onSubmit: handleBundle,
+			isSubmitting: isBundling
+		}, bundleDrawerKey),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.AddressFormDialog, {
+			isOpen: addressDialog.open,
+			onClose: () => setAddressDialog({
+				open: false,
+				selected: null
+			}),
+			selectedAddress: addressDialog.selected,
+			t: addressDialogT,
+			onSubmit: async (formData) => {
+				try {
+					await createAddressMutation.mutateAsync(formData);
+					setAddressDialog({
+						open: false,
+						selected: null
+					});
+				} catch {}
+			},
+			isSubmitting: createAddressMutation.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: addressDialogT("address_line_1")
+			})
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.CreditCardFormDialog, {
+			isOpen: isAddCardOpen,
+			onClose: () => setIsAddCardOpen(false),
+			t: addressDialogT,
+			onSubmit: async (data) => {
+				try {
+					await addCreditCardMutation.mutateAsync(data);
+					setIsAddCardOpen(false);
+				} catch {}
+			},
+			isSubmitting: addCreditCardMutation.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: addressDialogT("address_line_1")
+			})
+		})
+	] });
+}
+function SubscriptionsListScreen(props) {
+	const payApi = require_api_context.usePayApi();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.FluidPayCoreProvider, {
+		api: (0, react.useMemo)(() => require_AddressAutocompleteInput.createFluidPayApiAdapter(payApi), [payApi]),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionsListScreenInner, { ...props })
 	});
 }
 //#endregion
@@ -5779,13 +7085,14 @@ function SubscriptionsScreen({ onToast, background, textColor, accentColor, padd
 	const isLoadingCustomer = account === void 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		...divProps,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionsTranslationBridge, { children: isDetailView ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PortalSubscriptionsApiProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionDetailScreen, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionsTranslationBridge, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PortalSubscriptionsApiProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PortalBundlesApiProvider, { children: isDetailView ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionDetailScreen, {
 			token: detailToken,
 			onToast: effectiveToast
-		}) }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PortalSubscriptionsApiProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionsListScreen, {
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionsListScreen, {
 			customerId,
-			isLoadingCustomer
-		}) }) })
+			isLoadingCustomer,
+			onToast: effectiveToast
+		}) }) }) })
 	});
 }
 const subscriptionsScreenPropertySchema = {
@@ -5811,4 +7118,4 @@ Object.defineProperty(exports, "subscriptionsScreenPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=SubscriptionsScreen-1hP0t23a.cjs.map
+//# sourceMappingURL=SubscriptionsScreen-Dfmqn6LY.cjs.map