@fluid-app/portal-sdk 0.1.249 → 0.1.251

package/dist/{SubscriptionsScreen-rZxqb0eR.mjs → SubscriptionsScreen-CTGqV8gK.mjs}

@@ -3,19 +3,19 @@ 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-Bni6J3KS.mjs";
-import { $t as startOfISOWeek, An as Accordion, Bt as warnOrThrowProtectedError, C as Skeleton, Cn as AlertDialogDescription, Dn as Button, En as AlertDialogTitle, Fn as cn$1, Gt as enUS, Ht as getWeek, K as Label, L as Input, Lt as format, Mn as AccordionItem, Mt as Calendar$1, Nn as AccordionTrigger, Qt as getTimezoneOffsetInMilliseconds, Rt as isProtectedDayOfYearToken, Sn as AlertDialogContent, Tn as AlertDialogHeader, Ut as getWeekYear, Vt as longFormatters, Wt as getISOWeek, a as ToggleGroup, an as constructFrom, b as fluidToast, bn as AlertDialogAction, cn as millisecondsInSecond, ct as DialogFooter, d as Table$1, dn as BreadcrumbLink, en as startOfWeek, f as TableBody, fn as BreadcrumbList, ft as DialogTitle, g as TableRow, h as TableHeader, ht as PopoverTrigger, in as toDate, it as Dialog, jn as AccordionContent, ln as Breadcrumb, lt as DialogHeader, mn as BreadcrumbSeparator, mt as PopoverContent, o as ToggleGroupItem, on as millisecondsInHour, ot as DialogContent, p as TableCell, pn as BreadcrumbPage, pt as Popover, rn as addDays, sn as millisecondsInMinute, tn as getDefaultOptions$1, un as BreadcrumbItem, wn as AlertDialogFooter, xn as AlertDialogCancel, yn as AlertDialog, zt as isProtectedWeekYearToken } from "./src-KINQ78Nj.mjs";
+import { A as Select, Bt as warnOrThrowProtectedError, C as Skeleton, Cn as AlertDialogCancel, Dn as AlertDialogHeader, En as AlertDialogFooter, Fn as AccordionTrigger, Gt as enUS, Ht as getWeek, It as isAfter, K as Label, L as Input, Ln as cn$1, Lt as format, M as SelectItem, Mn as Accordion, Mt as Calendar$1, N as SelectTrigger, Nn as AccordionContent, On as AlertDialogTitle, P as SelectValue, Pn as AccordionItem, Rt as isProtectedDayOfYearToken, Tn as AlertDialogDescription, Ut as getWeekYear, Vt as longFormatters, Wt as getISOWeek, Xt as addWeeks, Yt as addYears, a as ToggleGroup, an as addDays, b as fluidToast, 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, kn as Button, 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 AlertDialogContent, xn as AlertDialog, zt as isProtectedWeekYearToken } from "./src-jSFuc4IV.mjs";
 import { r as useScreenHeaderBreadcrumbs } from "./ScreenHeaderContext-4WYXIqQ5.mjs";
 import { n as payKeys, r as storeKeys } from "./query-keys-DXle2tm8.mjs";
 import { t as useAccount } from "./use-account-CGaDP8xd.mjs";
 import { n as useAppNavigation } from "./AppNavigationContext-BcZZMtV6.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-B0qLrCHN.mjs";
-import { t as SearchSort } from "./SearchSort-B5Jrk5lW.mjs";
-import { t as InfiniteScrollSentinel } from "./InfiniteScrollSentinel-BHIgNtHI.mjs";
-import { r as TableColumn } from "./order-status-badge-CjX7Qxdk.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-Bdsv2iFU.mjs";
+import { t as SearchSort } from "./SearchSort-CnUiCGu2.mjs";
+import { t as InfiniteScrollSentinel } from "./InfiniteScrollSentinel-Dq--_LMC.mjs";
+import { r as TableColumn } from "./order-status-badge-CKLegNhv.mjs";
 import { createContext, useCallback, useContext, useEffect, 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 { CalendarIcon, Pause, Play, RotateCcw, SkipForward, XCircle } from "lucide-react";
+import { CalendarDays, CalendarIcon, 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
@@ -2109,6 +2109,16 @@ const subscriptionsKeys = {
 	]
 };
 //#endregion
+//#region ../../subscriptions/core/src/hooks/use-subscriptions.ts
+function useSubscriptions(params, options) {
+	const api = useSubscriptionsApi();
+	return useQuery({
+		queryKey: subscriptionsKeys.list(params),
+		queryFn: () => api.fetchCustomerSubscriptions(params),
+		enabled: options?.enabled ?? !!params.customerId
+	});
+}
+//#endregion
 //#region ../../subscriptions/core/src/hooks/use-infinite-subscriptions.ts
 function useInfiniteSubscriptions(params, options) {
 	const api = useSubscriptionsApi();
@@ -2636,6 +2646,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.next_bill_date != null) subscription.next_bill_date = body.next_bill_date;
 			return mapSubscriptionDetail(await subscriptions_update(client, subscriptionToken, { subscription }));
 		}
 	};
@@ -3001,92 +3012,127 @@ function SubscriptionsListScreen({ customerId, isLoadingCustomer }) {
 	});
 }
 //#endregion
-//#region ../../subscriptions/ui/src/components/confirm-dialog.tsx
-function ConfirmDialog({ title, description, actionButtonText = "Delete", cancelButtonText = "Cancel", open, setOpen, onConfirm }) {
+//#region ../../subscriptions/ui/src/components/cancel-subscription-dialog.tsx
+const PAUSE_MONTH_OPTIONS = [
+	1,
+	2,
+	3
+];
+function CancelSubscriptionDialog({ open, onOpenChange, onConfirm, onPauseInstead, errorMessage, title = "Cancel Subscription", description = "Are you sure you want to cancel this subscription? You can reactivate it later.", pauseQuestion = "Would you like to pause your subscription instead?", pauseButtonText = "Pause Subscription", cancelButtonText = "Cancel", actionButtonText = "Cancel Subscription" }) {
 	const [isPending, setIsPending] = useState(false);
+	const [selectedMonths, setSelectedMonths] = useState(null);
+	useEffect(() => {
+		if (!open) setSelectedMonths(null);
+	}, [open]);
 	const handleConfirm = async () => {
+		const result = onConfirm();
+		if (!(result instanceof Promise)) {
+			onOpenChange(false);
+			return;
+		}
+		setIsPending(true);
 		try {
-			const result = onConfirm();
-			if (result instanceof Promise) {
-				setIsPending(true);
-				await result;
-			}
+			await result;
+			onOpenChange(false);
 		} catch (error) {
-			console.error("ConfirmDialog: action rejected", error);
+			console.error("CancelSubscriptionDialog: action rejected", error);
 		} finally {
 			setIsPending(false);
-			setOpen(false);
 		}
 	};
+	const handlePause = () => {
+		if (!selectedMonths) return;
+		onPauseInstead(selectedMonths);
+	};
 	return /* @__PURE__ */ jsx(AlertDialog, {
 		open,
-		onOpenChange: (v) => !isPending && setOpen(v),
-		children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: title }), /* @__PURE__ */ jsx(AlertDialogDescription, { children: description })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, {
-			disabled: isPending,
-			children: cancelButtonText
-		}), /* @__PURE__ */ jsx(AlertDialogAction, {
-			onClick: handleConfirm,
-			disabled: isPending,
-			className: "bg-red-600 text-white hover:bg-red-500",
-			children: isPending ? "..." : actionButtonText
-		})] })] })
+		onOpenChange: (v) => !isPending && onOpenChange(v),
+		children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+			/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: title }), /* @__PURE__ */ jsx(AlertDialogDescription, { children: description })] }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "border-border space-y-2 rounded-md border p-3",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "text-foreground text-sm font-medium",
+						children: pauseQuestion
+					}),
+					/* @__PURE__ */ jsx(Label, {
+						htmlFor: "cancel-pause-months",
+						className: "text-foreground text-sm font-semibold",
+						children: "Pause for"
+					}),
+					/* @__PURE__ */ jsxs(Select, {
+						value: selectedMonths ? String(selectedMonths) : void 0,
+						onValueChange: (value) => setSelectedMonths(value ? Number(value) : null),
+						disabled: isPending,
+						children: [/* @__PURE__ */ jsx(SelectTrigger, {
+							id: "cancel-pause-months",
+							className: "w-full",
+							children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select duration" })
+						}), /* @__PURE__ */ jsx(SelectContent, { children: PAUSE_MONTH_OPTIONS.map((months) => /* @__PURE__ */ jsxs(SelectItem, {
+							value: String(months),
+							children: [
+								months,
+								" ",
+								months === 1 ? "month" : "months"
+							]
+						}, months)) })]
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						onClick: handlePause,
+						disabled: isPending || !selectedMonths,
+						className: "w-full",
+						children: pauseButtonText
+					})
+				]
+			}),
+			errorMessage && /* @__PURE__ */ jsx("p", {
+				className: "text-destructive text-left text-sm",
+				children: errorMessage
+			}),
+			/* @__PURE__ */ jsxs(AlertDialogFooter, {
+				className: "flex-col gap-2 sm:flex-row sm:justify-end",
+				children: [/* @__PURE__ */ jsx(AlertDialogCancel, {
+					disabled: isPending,
+					children: cancelButtonText
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "destructive",
+					onClick: handleConfirm,
+					disabled: isPending,
+					autoFocus: true,
+					children: isPending ? "..." : actionButtonText
+				})]
+			})
+		] })
 	});
 }
 //#endregion
-//#region ../../subscriptions/ui/src/lib/parse-iso-date.ts
-const ISO_DATE = "yyyy-MM-dd";
-/**
-* Parse an ISO date string as local midnight. Accepts either a bare
-* "yyyy-MM-dd" or a full ISO timestamp — both are sliced to the date
-* portion first so the result lands on the intended calendar day
-* regardless of the viewer's timezone.
-*/
-function parseIsoDate(value) {
-	return parse(value.slice(0, 10), ISO_DATE, /* @__PURE__ */ new Date());
-}
-//#endregion
 //#region ../../subscriptions/ui/src/components/pause-subscription-dialog.tsx
 function PauseSubscriptionDialog({ open, onOpenChange, onConfirm, isLoading, errorMessage, currentNextBillDate, billingInterval = 1, billingIntervalUnit = "month", title = "Pause subscription", description = "Are you sure you want to pause subscription?", actionText = "Pause" }) {
-	const [pauseType, setPauseType] = useState("specific");
-	const [selectedDate, setSelectedDate] = useState(void 0);
-	const [calendarOpen, setCalendarOpen] = useState(false);
+	const [pauseType, setPauseType] = useState("indefinite");
 	const [selectedOrderCount, setSelectedOrderCount] = useState(null);
-	const today = /* @__PURE__ */ new Date();
-	today.setHours(0, 0, 0, 0);
-	const minDate = addDays(today, 1);
 	const orderCountOptions = Array.from({ length: 99 }, (_, i) => i + 1);
 	const calculatedResumeDate = selectedOrderCount && currentNextBillDate ? calculateResumeDate(billingInterval, billingIntervalUnit, selectedOrderCount, currentNextBillDate) : null;
 	useEffect(() => {
 		if (!open) return;
-		setPauseType("specific");
+		setPauseType("indefinite");
 		setSelectedOrderCount(null);
-		if (currentNextBillDate) {
-			const initial = parseIsoDate(currentNextBillDate);
-			setSelectedDate(initial < minDate ? minDate : initial);
-		} else setSelectedDate(void 0);
-	}, [open, currentNextBillDate]);
+	}, [open]);
 	const handleConfirm = () => {
 		if (pauseType === "indefinite") {
 			onConfirm({ type: "indefinite" });
 			return;
 		}
-		if (pauseType === "order_count" && selectedOrderCount) {
-			onConfirm({
-				type: "order_count",
-				numberOfOrders: selectedOrderCount
-			});
-			return;
-		}
-		if (pauseType === "specific" && selectedDate) onConfirm({
-			type: "specific",
-			nextBillDate: format(selectedDate, "yyyy-MM-dd")
+		if (pauseType === "order_count" && selectedOrderCount) onConfirm({
+			type: "order_count",
+			numberOfOrders: selectedOrderCount
 		});
 	};
 	const handleDismiss = (next) => {
 		if (!next) {
-			setPauseType("specific");
+			setPauseType("indefinite");
 			setSelectedOrderCount(null);
-			setSelectedDate(void 0);
 		}
 		onOpenChange(next);
 	};
@@ -3096,29 +3142,24 @@ function PauseSubscriptionDialog({ open, onOpenChange, onConfirm, isLoading, err
 			/* @__PURE__ */ jsx("strong", { children: "Resume" }),
 			" from your account."
 		] });
-		if (pauseType === "order_count" && !selectedOrderCount) return null;
-		let displayDate;
-		if (pauseType === "order_count" && calculatedResumeDate) displayDate = format(calculatedResumeDate, "MMMM d, yyyy");
-		else if (pauseType === "specific" && selectedDate) displayDate = format(selectedDate, "MMMM d, yyyy");
-		else if (currentNextBillDate) displayDate = format(parseIsoDate(currentNextBillDate), "MMMM d, yyyy");
-		else displayDate = "a future date";
+		if (!selectedOrderCount) return null;
 		return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			"You won't be charged until your subscription resumes on",
 			" ",
 			/* @__PURE__ */ jsx("span", {
 				className: "font-semibold",
-				children: displayDate
+				children: calculatedResumeDate ? format(calculatedResumeDate, "MMMM d, yyyy") : "a future date"
 			}),
 			"."
 		] });
 	})();
-	const isActionDisabled = pauseType === "specific" && !selectedDate || pauseType === "order_count" && !selectedOrderCount;
+	const isActionDisabled = pauseType === "order_count" && !selectedOrderCount;
 	return /* @__PURE__ */ jsx(Dialog, {
 		open,
 		onOpenChange: handleDismiss,
 		children: /* @__PURE__ */ jsxs(DialogContent, {
 			"aria-describedby": "pause-subscription-dialog-description",
-			className: "max-w-sm rounded md:w-90",
+			className: "rounded",
 			children: [
 				/* @__PURE__ */ jsx(DialogHeader, {
 					className: "flex flex-row justify-between",
@@ -3185,57 +3226,6 @@ function PauseSubscriptionDialog({ open, onOpenChange, onConfirm, isLoading, err
 									})]
 								})]
 							}),
-							/* @__PURE__ */ jsxs("div", {
-								className: "space-y-2",
-								children: [/* @__PURE__ */ jsxs("div", {
-									className: "flex items-center space-x-2",
-									children: [/* @__PURE__ */ jsx("input", {
-										id: "pause-until-date",
-										type: "radio",
-										checked: pauseType === "specific",
-										onChange: () => setPauseType("specific"),
-										className: "border-border accent-primary h-4 w-4 focus:ring-0"
-									}), /* @__PURE__ */ jsx(Label, {
-										htmlFor: "pause-until-date",
-										className: "text-foreground cursor-pointer text-sm font-medium",
-										children: "Pause until a specific date"
-									})]
-								}), pauseType === "specific" && /* @__PURE__ */ jsx("div", {
-									className: "ml-6",
-									children: /* @__PURE__ */ jsxs(Popover, {
-										open: calendarOpen,
-										onOpenChange: setCalendarOpen,
-										children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-											asChild: true,
-											children: /* @__PURE__ */ jsxs(Button, {
-												variant: "outline",
-												className: cn$1("border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground h-9 w-full justify-start border px-3 py-2 text-left font-normal", !selectedDate && "text-muted-foreground hover:text-muted-foreground"),
-												children: [selectedDate ? format(selectedDate, "MM/dd/yyyy") : /* @__PURE__ */ jsx("span", { children: "mm/dd/yyyy" }), /* @__PURE__ */ jsx(CalendarIcon, { className: "text-muted-foreground ml-auto h-4 w-4" })]
-											})
-										}), /* @__PURE__ */ jsx(PopoverContent, {
-											className: "bg-popover w-auto rounded-md border p-0 shadow-lg",
-											align: "start",
-											sideOffset: 4,
-											style: { zIndex: 9999 },
-											children: /* @__PURE__ */ jsx(Calendar$1, {
-												mode: "single",
-												selected: selectedDate,
-												onSelect: (date) => {
-													setSelectedDate(date);
-													setCalendarOpen(false);
-												},
-												disabled: (date) => date < minDate,
-												defaultMonth: selectedDate ?? (currentNextBillDate ? parseIsoDate(currentNextBillDate) : void 0),
-												modifiersStyles: { selected: {
-													backgroundColor: "var(--primary)",
-													color: "var(--primary-foreground)"
-												} },
-												initialFocus: true
-											})
-										})]
-									})
-								})]
-							}),
 							statusMessage && /* @__PURE__ */ jsx("div", {
 								className: "text-muted-foreground text-xs",
 								children: statusMessage
@@ -3250,12 +3240,13 @@ function PauseSubscriptionDialog({ open, onOpenChange, onConfirm, isLoading, err
 				/* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsxs("div", {
 					className: "flex w-full flex-row justify-between space-x-2",
 					children: [/* @__PURE__ */ jsx(Button, {
-						className: "bg-muted text-foreground ring-border hover:bg-muted/80 h-10 min-w-[70px] rounded p-3 ring-1",
+						variant: "outline",
+						className: "h-10 min-w-[70px] rounded p-3",
 						onClick: () => handleDismiss(false),
 						children: "Cancel"
 					}), /* @__PURE__ */ jsx(Button, {
 						type: "button",
-						className: "bg-primary text-primary-foreground h-10 min-w-[70px] rounded p-3 hover:opacity-90 disabled:opacity-50",
+						className: "h-10 min-w-[70px] rounded p-3",
 						onClick: handleConfirm,
 						disabled: isActionDisabled || isLoading,
 						children: isLoading ? /* @__PURE__ */ jsx("div", { className: "border-primary-foreground h-5 w-5 animate-spin rounded-full border-4 border-t-4 border-t-transparent" }) : actionText
@@ -3266,6 +3257,18 @@ function PauseSubscriptionDialog({ open, onOpenChange, onConfirm, isLoading, err
 	});
 }
 //#endregion
+//#region ../../subscriptions/ui/src/lib/parse-iso-date.ts
+const ISO_DATE = "yyyy-MM-dd";
+/**
+* Parse an ISO date string as local midnight. Accepts either a bare
+* "yyyy-MM-dd" or a full ISO timestamp — both are sliced to the date
+* portion first so the result lands on the intended calendar day
+* regardless of the viewer's timezone.
+*/
+function parseIsoDate(value) {
+	return parse(value.slice(0, 10), ISO_DATE, /* @__PURE__ */ new Date());
+}
+//#endregion
 //#region ../../subscriptions/ui/src/components/resume-subscription-dialog.tsx
 function ResumeSubscriptionDialog({ open, onOpenChange, onConfirm, isLoading, errorMessage, defaultNextBillDate, title = "Resume subscription", description = "Choose the date your subscription should resume.", actionText = "Resume" }) {
 	const [selectedDate, setSelectedDate] = useState(void 0);
@@ -3293,7 +3296,7 @@ function ResumeSubscriptionDialog({ open, onOpenChange, onConfirm, isLoading, er
 		onOpenChange: handleDismiss,
 		children: /* @__PURE__ */ jsxs(DialogContent, {
 			"aria-describedby": "resume-subscription-dialog-description",
-			className: "max-w-sm rounded md:w-90",
+			className: "rounded",
 			children: [
 				/* @__PURE__ */ jsx(DialogHeader, {
 					className: "flex flex-row justify-between",
@@ -3385,6 +3388,255 @@ function ResumeSubscriptionDialog({ open, onOpenChange, onConfirm, isLoading, er
 	});
 }
 //#endregion
+//#region ../../subscriptions/ui/src/components/edit-bill-date-dialog.tsx
+function advanceByInterval(date, interval, unit) {
+	const step = Math.max(1, interval);
+	switch (unit.toLowerCase()) {
+		case "day": return addDays(date, step);
+		case "week": return addWeeks(date, step);
+		case "year": return addYears(date, step);
+		default: return addMonths(date, step);
+	}
+}
+const SUBSCRIPTION_COLORS = [
+	"#3b82f6",
+	"#f97316",
+	"#10b981",
+	"#a855f7",
+	"#ec4899",
+	"#eab308",
+	"#14b8a6",
+	"#ef4444",
+	"#0ea5e9",
+	"#84cc16"
+];
+const MAX_PROJECTIONS_PER_SUB = 104;
+function EditBillDateDialog({ open, onOpenChange, onConfirm, isLoading, errorMessage, currentNextBillDate, otherSubscriptions, onNavigateToSubscription, title = "Edit bill date", description = "Select a new date for your next bill.", actionText = "Save" }) {
+	const [selectedDate, setSelectedDate] = useState(void 0);
+	const [calendarOpen, setCalendarOpen] = useState(false);
+	const today = /* @__PURE__ */ new Date();
+	today.setHours(0, 0, 0, 0);
+	const minDate = addDays(today, 1);
+	const subscriptionsWithColor = useMemo(() => (otherSubscriptions ?? []).map((sub, idx) => ({
+		...sub,
+		color: SUBSCRIPTION_COLORS[idx % SUBSCRIPTION_COLORS.length]
+	})), [otherSubscriptions]);
+	const billingColorsByDate = useMemo(() => {
+		const m = /* @__PURE__ */ new Map();
+		const horizon = addYears(/* @__PURE__ */ new Date(), 2);
+		for (const sub of subscriptionsWithColor) {
+			if (!sub.nextBillDate) continue;
+			let d = parseIsoDate(sub.nextBillDate);
+			let count = 0;
+			while (!isAfter(d, horizon) && count < MAX_PROJECTIONS_PER_SUB) {
+				const key = format(d, "yyyy-MM-dd");
+				const arr = m.get(key) ?? [];
+				arr.push(sub.color);
+				m.set(key, arr);
+				d = advanceByInterval(d, sub.billingInterval, sub.billingIntervalUnit);
+				count++;
+			}
+		}
+		return m;
+	}, [subscriptionsWithColor]);
+	const calendarComponents = useMemo(() => ({
+		DayContent: ({ date }) => {
+			const key = format(date, "yyyy-MM-dd");
+			const colors = billingColorsByDate.get(key) ?? [];
+			return /* @__PURE__ */ jsxs("div", {
+				className: "flex h-full w-full flex-col items-center justify-center",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "leading-none",
+					children: date.getDate()
+				}), colors.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "mt-0.5 flex items-center justify-center gap-0.5",
+					children: colors.map((c, i) => /* @__PURE__ */ jsx("span", {
+						className: "h-1 w-1 rounded-[1px]",
+						style: { backgroundColor: c }
+					}, `${key}-${i}`))
+				})]
+			});
+		},
+		IconLeft: ({ className: iconClassName, ...iconProps }) => /* @__PURE__ */ jsx(ChevronLeft, {
+			className: cn$1("h-4 w-4", iconClassName),
+			...iconProps
+		}),
+		IconRight: ({ className: iconClassName, ...iconProps }) => /* @__PURE__ */ jsx(ChevronRight, {
+			className: cn$1("h-4 w-4", iconClassName),
+			...iconProps
+		})
+	}), [billingColorsByDate]);
+	useEffect(() => {
+		if (!open) return;
+		if (currentNextBillDate) {
+			const initial = parseIsoDate(currentNextBillDate);
+			setSelectedDate(initial < minDate ? minDate : initial);
+		} else setSelectedDate(void 0);
+	}, [open, currentNextBillDate]);
+	const handleConfirm = () => {
+		if (!selectedDate) return;
+		onConfirm(format(selectedDate, "yyyy-MM-dd"));
+	};
+	const handleDismiss = (next) => {
+		if (!next) setSelectedDate(void 0);
+		onOpenChange(next);
+	};
+	const previewDate = selectedDate ? format(selectedDate, "MMMM d, yyyy") : currentNextBillDate ? format(parseIsoDate(currentNextBillDate), "MMMM d, yyyy") : "a future date";
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange: handleDismiss,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			"aria-describedby": "edit-bill-date-dialog-description",
+			className: "rounded",
+			children: [
+				/* @__PURE__ */ jsx(DialogHeader, {
+					className: "flex flex-row justify-between",
+					children: /* @__PURE__ */ jsx(DialogTitle, {
+						className: "text-md w-full text-left font-medium",
+						children: title
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "space-y-4",
+					children: [
+						/* @__PURE__ */ jsx("p", {
+							id: "edit-bill-date-dialog-description",
+							className: "text-muted-foreground text-sm",
+							children: description
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ jsx(Label, {
+								className: "text-foreground text-sm font-semibold",
+								children: "Next bill date"
+							}), /* @__PURE__ */ jsxs(Popover, {
+								open: calendarOpen,
+								onOpenChange: setCalendarOpen,
+								children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+									asChild: true,
+									children: /* @__PURE__ */ jsxs(Button, {
+										variant: "outline",
+										className: cn$1("border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground h-9 w-full justify-start border px-3 py-2 text-left font-normal", !selectedDate && "text-muted-foreground hover:text-muted-foreground"),
+										children: [selectedDate ? format(selectedDate, "MM/dd/yyyy") : /* @__PURE__ */ jsx("span", { children: "mm/dd/yyyy" }), /* @__PURE__ */ jsx(CalendarIcon, { className: "text-muted-foreground ml-auto h-4 w-4" })]
+									})
+								}), /* @__PURE__ */ jsx(PopoverContent, {
+									className: "bg-popover z-[9999] w-auto rounded-md border p-0 shadow-lg",
+									align: "start",
+									sideOffset: 4,
+									children: /* @__PURE__ */ jsx(Calendar$1, {
+										mode: "single",
+										selected: selectedDate,
+										onSelect: (date) => {
+											setSelectedDate(date);
+											setCalendarOpen(false);
+										},
+										disabled: (date) => date < minDate,
+										defaultMonth: selectedDate ?? (currentNextBillDate ? parseIsoDate(currentNextBillDate) : void 0),
+										components: calendarComponents,
+										initialFocus: true
+									})
+								})]
+							})]
+						}),
+						selectedDate && /* @__PURE__ */ jsxs("div", {
+							className: "text-muted-foreground text-xs",
+							children: [
+								"Your next bill will be on",
+								" ",
+								/* @__PURE__ */ jsx("span", {
+									className: "font-semibold",
+									children: previewDate
+								}),
+								"."
+							]
+						}),
+						subscriptionsWithColor.length > 0 && /* @__PURE__ */ jsxs("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ jsx(Label, {
+								className: "text-foreground text-sm font-semibold",
+								children: "Your other subscriptions"
+							}), /* @__PURE__ */ jsx("div", {
+								className: "border-border max-h-40 overflow-auto rounded-md border",
+								children: /* @__PURE__ */ jsxs("table", {
+									className: "w-full table-fixed text-sm",
+									children: [/* @__PURE__ */ jsx("thead", {
+										className: "bg-muted text-muted-foreground sticky top-0",
+										children: /* @__PURE__ */ jsxs("tr", { children: [
+											/* @__PURE__ */ jsx("th", {
+												className: "w-6 px-2 py-2",
+												"aria-label": "Color"
+											}),
+											/* @__PURE__ */ jsx("th", {
+												className: "px-3 py-2 text-left font-medium",
+												children: "Product"
+											}),
+											/* @__PURE__ */ jsx("th", {
+												className: "w-28 px-3 py-2 text-left font-medium",
+												children: "Bill Date"
+											})
+										] })
+									}), /* @__PURE__ */ jsx("tbody", {
+										className: "divide-border divide-y",
+										children: subscriptionsWithColor.map((sub) => /* @__PURE__ */ jsxs("tr", { children: [
+											/* @__PURE__ */ jsx("td", {
+												className: "px-2 py-2",
+												children: /* @__PURE__ */ jsx("span", {
+													"aria-hidden": true,
+													className: "inline-block h-2.5 w-2.5 rounded-full",
+													style: { backgroundColor: sub.color }
+												})
+											}),
+											/* @__PURE__ */ jsx("td", {
+												className: "overflow-hidden px-3 py-2",
+												title: sub.productTitle,
+												children: onNavigateToSubscription ? /* @__PURE__ */ jsx("button", {
+													type: "button",
+													onClick: () => {
+														onNavigateToSubscription(sub.token);
+														handleDismiss(false);
+													},
+													className: "text-primary block w-full truncate text-left hover:underline",
+													children: sub.productTitle
+												}) : /* @__PURE__ */ jsx("span", {
+													className: "text-foreground block truncate",
+													children: sub.productTitle
+												})
+											}),
+											/* @__PURE__ */ jsx("td", {
+												className: "text-muted-foreground px-3 py-2 whitespace-nowrap",
+												children: sub.nextBillDate ? format(parseIsoDate(sub.nextBillDate), "MMM d, yyyy") : "—"
+											})
+										] }, sub.token))
+									})]
+								})
+							})]
+						})
+					]
+				}),
+				errorMessage && /* @__PURE__ */ jsx("p", {
+					className: "text-destructive text-left text-sm",
+					children: errorMessage
+				}),
+				/* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsxs("div", {
+					className: "flex w-full flex-row justify-between space-x-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						className: "h-10 min-w-[70px] rounded p-3",
+						onClick: () => handleDismiss(false),
+						children: "Cancel"
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						className: "h-10 min-w-[70px] rounded p-3",
+						onClick: handleConfirm,
+						disabled: !selectedDate || isLoading,
+						children: isLoading ? /* @__PURE__ */ jsx("div", { className: "border-primary-foreground h-5 w-5 animate-spin rounded-full border-4 border-t-4 border-t-transparent" }) : actionText
+					})]
+				}) })
+			]
+		})
+	});
+}
+//#endregion
 //#region ../../subscriptions/ui/src/components/subscription-detail.tsx
 function SubscriptionDetailSkeleton() {
 	return /* @__PURE__ */ jsxs("div", {
@@ -3450,7 +3702,7 @@ function SubscriptionDetailSkeleton() {
 		})]
 	});
 }
-function SubscriptionItemsSection({ subscription, displayQuantity, canEditQuantity = false, onQuantityChange, isUpdatingQuantity = false }) {
+function SubscriptionItemsSection({ subscription, displayQuantity, displayNextBillDate, canEditQuantity = false, onQuantityChange, isUpdatingQuantity = false }) {
 	const variant = subscription.variant;
 	const product = variant?.product;
 	const quantity = displayQuantity ?? subscription.quantity;
@@ -3459,7 +3711,7 @@ function SubscriptionItemsSection({ subscription, displayQuantity, canEditQuanti
 	const discount = subscription.original_price != null ? subscription.original_price - subscription.price : 0;
 	const subtotal = discount > 0 ? formatCurrency(subscription.original_price * quantity) : totalPrice;
 	return /* @__PURE__ */ jsx("section", {
-		className: "bg-muted flex w-full flex-col items-center px-8 lg:col-span-4",
+		className: "bg-muted flex w-full flex-col items-center rounded-lg px-8 lg:col-span-4 lg:self-start",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex w-full max-w-lg flex-col",
 			children: [
@@ -3479,17 +3731,27 @@ function SubscriptionItemsSection({ subscription, displayQuantity, canEditQuanti
 									children: "Next Order Date"
 								}), /* @__PURE__ */ jsx("div", {
 									className: "text-foreground text-2xl font-bold",
-									children: getNextBillDisplay(subscription)
+									children: getNextBillDisplay(displayNextBillDate ? {
+										...subscription,
+										next_bill_date: displayNextBillDate
+									} : subscription)
 								})]
 							}), /* @__PURE__ */ jsxs("div", {
 								className: "pl-4",
-								children: [/* @__PURE__ */ jsx("div", {
-									className: "text-muted-foreground mb-1 text-sm",
-									children: "Next Bill Amount"
-								}), /* @__PURE__ */ jsx("div", {
-									className: "text-foreground text-2xl font-bold",
-									children: formatCurrency(subscription.price * quantity)
-								})]
+								children: [
+									/* @__PURE__ */ jsx("div", {
+										className: "text-muted-foreground mb-1 text-sm",
+										children: "Next Bill Amount"
+									}),
+									/* @__PURE__ */ jsx("div", {
+										className: "text-foreground text-2xl font-bold",
+										children: formatCurrency(subscription.price * quantity)
+									}),
+									(displayNextBillDate ?? subscription.next_bill_date) && /* @__PURE__ */ jsx("div", {
+										className: "text-muted-foreground mt-1 text-xs",
+										children: formatDate(displayNextBillDate ?? subscription.next_bill_date ?? "")
+									})
+								]
 							})]
 						}), /* @__PURE__ */ jsx("hr", { className: "border-border mt-4" })]
 					})]
@@ -3602,7 +3864,7 @@ function SubscriptionItemsSection({ subscription, displayQuantity, canEditQuanti
 		})
 	});
 }
-function SubscriptionManagementSection({ subscription, isActive, isPaused, isCancelled, isMutating, onSkip, onPause, onResume, onCancel, onReactivate, renderPaymentMethod }) {
+function SubscriptionManagementSection({ subscription, isActive, isPaused, isCancelled, isMutating, onSkip, onPause, onResume, onCancel, onReactivate, onEditBillDate, displayNextBillDate, renderPaymentMethod, renderShippingAddress }) {
 	const plan = subscription.subscription_plan;
 	const quantity = subscription.quantity;
 	const totalPrice = formatCurrency(subscription.price * quantity);
@@ -3634,22 +3896,22 @@ function SubscriptionManagementSection({ subscription, isActive, isPaused, isCan
 							}),
 							isActive && /* @__PURE__ */ jsxs(Button, {
 								variant: "outline",
-								onClick: onPause,
+								onClick: onEditBillDate,
 								disabled: isMutating,
 								className: actionButtonClass,
-								children: [/* @__PURE__ */ jsx(Pause, { className: "h-3 w-3 shrink-0" }), /* @__PURE__ */ jsx("span", {
+								children: [/* @__PURE__ */ jsx(CalendarDays, { className: "h-3 w-3 shrink-0" }), /* @__PURE__ */ jsx("span", {
 									className: "truncate",
-									children: "Pause Subscription"
+									children: "Edit Bill Date"
 								})]
 							}),
-							isPaused && /* @__PURE__ */ jsxs(Button, {
+							isActive && /* @__PURE__ */ jsxs(Button, {
 								variant: "outline",
-								onClick: onResume,
+								onClick: onPause,
 								disabled: isMutating,
 								className: actionButtonClass,
-								children: [/* @__PURE__ */ jsx(Play, { className: "h-3 w-3 shrink-0" }), /* @__PURE__ */ jsx("span", {
+								children: [/* @__PURE__ */ jsx(Pause, { className: "h-3 w-3 shrink-0" }), /* @__PURE__ */ jsx("span", {
 									className: "truncate",
-									children: "Resume Subscription"
+									children: "Pause Subscription"
 								})]
 							}),
 							/* @__PURE__ */ jsxs(Button, {
@@ -3659,7 +3921,17 @@ function SubscriptionManagementSection({ subscription, isActive, isPaused, isCan
 								className: actionButtonClass,
 								children: [/* @__PURE__ */ jsx(XCircle, { className: "h-3 w-3 shrink-0" }), /* @__PURE__ */ jsx("span", {
 									className: "truncate",
-									children: isCancelled ? "Cancelled" : "Cancel Subscription"
+									children: isCancelled ? "Cancelled Subscription" : "Cancel Subscription"
+								})]
+							}),
+							isPaused && /* @__PURE__ */ jsxs(Button, {
+								variant: "outline",
+								onClick: onResume,
+								disabled: isMutating,
+								className: actionButtonClass,
+								children: [/* @__PURE__ */ jsx(Play, { className: "h-3 w-3 shrink-0" }), /* @__PURE__ */ jsx("span", {
+									className: "truncate",
+									children: "Resume Subscription"
 								})]
 							}),
 							isCancelled && /* @__PURE__ */ jsxs(Button, {
@@ -3701,13 +3973,20 @@ function SubscriptionManagementSection({ subscription, isActive, isPaused, isCan
 							}),
 							/* @__PURE__ */ jsxs("div", {
 								className: "flex-1 px-4",
-								children: [/* @__PURE__ */ jsx("div", {
-									className: "text-muted-foreground text-sm",
-									children: "Next Payment"
-								}), /* @__PURE__ */ jsx("div", {
-									className: "text-foreground font-medium",
-									children: totalPrice
-								})]
+								children: [
+									/* @__PURE__ */ jsx("div", {
+										className: "text-muted-foreground text-sm",
+										children: "Next Payment"
+									}),
+									/* @__PURE__ */ jsx("div", {
+										className: "text-foreground font-medium",
+										children: totalPrice
+									}),
+									(displayNextBillDate ?? subscription.next_bill_date) && /* @__PURE__ */ jsx("div", {
+										className: "text-muted-foreground text-xs",
+										children: formatDate(displayNextBillDate ?? subscription.next_bill_date ?? "")
+									})
+								]
 							}),
 							subscription.last_bill_date && /* @__PURE__ */ jsxs("div", {
 								className: "flex-1 pl-4 text-right",
@@ -3729,7 +4008,12 @@ function SubscriptionManagementSection({ subscription, isActive, isPaused, isCan
 						children: "Payment & Shipping"
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "flex flex-col",
-						children: [subscription.address && /* @__PURE__ */ jsxs("div", {
+						children: [renderShippingAddress ? renderShippingAddress({
+							address: subscription.address ?? null,
+							subscriptionToken: subscription.subscription_token,
+							customerId: subscription.customer?.id ?? 0,
+							countryCode: subscription.address?.country_code ?? "US"
+						}) : subscription.address && /* @__PURE__ */ jsxs("div", {
 							className: "border-border mb-6 border-b pb-4",
 							children: [/* @__PURE__ */ jsx("div", {
 								className: "text-muted-foreground mt-3 mb-1 text-sm",
@@ -3753,7 +4037,9 @@ function SubscriptionManagementSection({ subscription, isActive, isPaused, isCan
 							})]
 						}), paymentMethod && (renderPaymentMethod ? renderPaymentMethod({
 							paymentMethod,
-							subscriptionToken: subscription.subscription_token
+							subscriptionToken: subscription.subscription_token,
+							customerId: subscription.customer?.id ?? 0,
+							countryCode: subscription.address?.country_code ?? "US"
 						}) : /* @__PURE__ */ jsxs("div", {
 							className: "border-border mb-6 border-b pb-4",
 							children: [/* @__PURE__ */ jsx("div", {
@@ -3772,71 +4058,87 @@ function SubscriptionManagementSection({ subscription, isActive, isPaused, isCan
 							})]
 						}))]
 					})]
-				}),
-				subscription.orders.length > 0 && /* @__PURE__ */ jsxs("div", {
-					className: "border-border mb-4 border-b pb-4",
-					children: [/* @__PURE__ */ jsx("h3", {
-						className: "text-foreground mb-3 text-sm/6 font-semibold",
-						children: "Order History"
-					}), /* @__PURE__ */ jsx("div", {
-						className: "overflow-x-auto",
-						children: /* @__PURE__ */ jsxs("table", {
-							className: "divide-border min-w-full divide-y text-sm",
-							children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-								/* @__PURE__ */ jsx("th", {
-									className: "text-muted-foreground py-2 pr-3 text-left font-medium",
-									children: "Order"
-								}),
-								/* @__PURE__ */ jsx("th", {
-									className: "text-muted-foreground px-3 py-2 text-left font-medium",
-									children: "Date"
-								}),
-								/* @__PURE__ */ jsx("th", {
-									className: "text-muted-foreground px-3 py-2 text-left font-medium",
-									children: "Status"
-								}),
-								/* @__PURE__ */ jsx("th", {
-									className: "text-muted-foreground py-2 pl-3 text-right font-medium",
-									children: "Amount"
-								})
-							] }) }), /* @__PURE__ */ jsx("tbody", {
-								className: "divide-border divide-y",
-								children: subscription.orders.map((order) => /* @__PURE__ */ jsxs("tr", { children: [
-									/* @__PURE__ */ jsx("td", {
-										className: "text-foreground py-2 pr-3 font-medium",
-										children: order.order_number ?? `#${order.id}`
-									}),
-									/* @__PURE__ */ jsx("td", {
-										className: "text-muted-foreground px-3 py-2",
-										children: formatDate(order.created_at.split("T")[0] ?? "")
-									}),
-									/* @__PURE__ */ jsx("td", {
-										className: "px-3 py-2",
-										children: /* @__PURE__ */ jsx(StatusPill, {
-											status: order.status,
-											children: startCase(order.status)
-										})
-									}),
-									/* @__PURE__ */ jsx("td", {
-										className: "text-foreground py-2 pl-3 text-right",
-										children: order.amount != null ? formatCurrency(Number(order.amount)) : "N/A"
-									})
-								] }, order.id))
-							})]
-						})
-					})]
 				})
 			]
 		})
 	});
 }
-function SubscriptionDetail({ token, onNotFound, onError, onSuccess, onMutationError, renderPaymentMethod }) {
+function OrderHistorySection({ subscription }) {
+	if (subscription.orders.length === 0) return null;
+	return /* @__PURE__ */ jsxs("section", {
+		className: "mt-6 px-8 pt-6 pb-8",
+		children: [/* @__PURE__ */ jsx("h3", {
+			className: "text-foreground mb-3 text-sm/6 font-semibold",
+			children: "Subscription Order History"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "border-border overflow-x-auto rounded-md border",
+			children: /* @__PURE__ */ jsxs("table", {
+				className: "divide-border min-w-full divide-y text-sm",
+				children: [/* @__PURE__ */ jsx("thead", {
+					className: "bg-muted",
+					children: /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							className: "text-muted-foreground py-2 pr-3 pl-3 text-left font-medium",
+							children: "Order"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: "text-muted-foreground px-3 py-2 text-left font-medium",
+							children: "Date"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: "text-muted-foreground px-3 py-2 text-left font-medium",
+							children: "Status"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: "text-muted-foreground py-2 pr-3 pl-3 text-right font-medium",
+							children: "Amount"
+						})
+					] })
+				}), /* @__PURE__ */ jsx("tbody", {
+					className: "divide-border divide-y",
+					children: subscription.orders.map((order) => /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("td", {
+							className: "text-foreground py-2 pr-3 pl-3 font-medium",
+							children: order.order_number ?? `#${order.id}`
+						}),
+						/* @__PURE__ */ jsx("td", {
+							className: "text-muted-foreground px-3 py-2",
+							children: formatDate(order.created_at.split("T")[0] ?? "")
+						}),
+						/* @__PURE__ */ jsx("td", {
+							className: "px-3 py-2",
+							children: /* @__PURE__ */ jsx(StatusPill, {
+								status: order.status,
+								children: startCase(order.status)
+							})
+						}),
+						/* @__PURE__ */ jsx("td", {
+							className: "text-foreground py-2 pr-3 pl-3 text-right",
+							children: order.amount != null ? formatCurrency(Number(order.amount)) : "N/A"
+						})
+					] }, order.id))
+				})]
+			})
+		})]
+	});
+}
+function SubscriptionDetail({ token, onNotFound, onError, onSuccess, onMutationError, onNavigateToSubscription, renderPaymentMethod, renderShippingAddress }) {
 	const [showCancelModal, setShowCancelModal] = useState(false);
 	const [showPauseModal, setShowPauseModal] = useState(false);
 	const [showResumeModal, setShowResumeModal] = useState(false);
+	const [showEditBillDateModal, setShowEditBillDateModal] = useState(false);
+	const [pendingNextBillDate, setPendingNextBillDate] = useState(null);
 	const { data, isLoading, error } = useSubscription(token);
 	const subscription = data?.subscription;
 	const customerId = subscription?.customer?.id ?? 0;
+	const customerSubscriptionsQuery = useSubscriptions({ perPage: 100 }, { enabled: showEditBillDateModal });
+	const otherSubscriptionsForBillDate = useMemo(() => (customerSubscriptionsQuery.data?.subscriptions ?? []).filter((s) => s.subscription_token !== token).map((s) => ({
+		token: s.subscription_token,
+		productTitle: s.variant?.product?.title ?? "Subscription",
+		nextBillDate: s.next_bill_date,
+		billingInterval: s.subscription_plan?.billing_interval ?? 1,
+		billingIntervalUnit: s.subscription_plan?.billing_interval_unit ?? "month"
+	})), [customerSubscriptionsQuery.data, token]);
 	const pauseMutation = usePauseSubscription({
 		onSuccess: () => onSuccess?.("Subscription paused"),
 		onError: (err) => onMutationError?.("Failed to pause subscription", err)
@@ -3871,6 +4173,20 @@ function SubscriptionDetail({ token, onNotFound, onError, onSuccess, onMutationE
 			onMutationError?.("Failed to update quantity", err);
 		}
 	});
+	const editBillDateMutation = useUpdateSubscriptionInfo({
+		onSuccess: () => {
+			onSuccess?.("Bill date updated");
+			setShowEditBillDateModal(false);
+		},
+		onError: (err) => {
+			setPendingNextBillDate(null);
+			onMutationError?.("Failed to update bill date", err);
+		}
+	});
+	const serverNextBillDate = data?.subscription.next_bill_date ?? null;
+	useEffect(() => {
+		if (pendingNextBillDate != null && serverNextBillDate != null && serverNextBillDate.startsWith(pendingNextBillDate)) setPendingNextBillDate(null);
+	}, [pendingNextBillDate, serverNextBillDate]);
 	const serverQuantity = data?.subscription.quantity;
 	useEffect(() => {
 		if (pendingQuantity != null && serverQuantity === pendingQuantity) setPendingQuantity(null);
@@ -3918,11 +4234,10 @@ function SubscriptionDetail({ token, onNotFound, onError, onSuccess, onMutationE
 	const isActive = subscription.status === "active";
 	const isPaused = subscription.status === "paused";
 	const isCancelled = subscription.status === "cancelled";
-	const isMutating = pauseMutation.isPending || resumeMutation.isPending || skipMutation.isPending || cancelMutation.isPending || reactivateMutation.isPending;
+	const isMutating = pauseMutation.isPending || resumeMutation.isPending || skipMutation.isPending || cancelMutation.isPending || reactivateMutation.isPending || editBillDateMutation.isPending;
 	const handlePauseConfirm = (selection) => {
 		const pauseParams = { customerId };
 		if (selection.type === "order_count") pauseParams.numberOfOrders = selection.numberOfOrders;
-		else if (selection.type === "specific") pauseParams.nextBillDate = selection.nextBillDate;
 		pauseMutation.mutate({
 			subscriptionToken: token,
 			pauseParams
@@ -3965,6 +4280,7 @@ function SubscriptionDetail({ token, onNotFound, onError, onSuccess, onMutationE
 			children: [/* @__PURE__ */ jsx(SubscriptionItemsSection, {
 				subscription,
 				displayQuantity: pendingQuantity ?? void 0,
+				displayNextBillDate: pendingNextBillDate ?? void 0,
 				canEditQuantity: isActive,
 				onQuantityChange: handleQuantityChange,
 				isUpdatingQuantity: quantityMutation.isPending
@@ -3979,16 +4295,46 @@ function SubscriptionDetail({ token, onNotFound, onError, onSuccess, onMutationE
 				onResume: () => setShowResumeModal(true),
 				onCancel: () => setShowCancelModal(true),
 				onReactivate: handleReactivate,
-				renderPaymentMethod
+				onEditBillDate: () => setShowEditBillDateModal(true),
+				displayNextBillDate: pendingNextBillDate ?? void 0,
+				renderPaymentMethod,
+				renderShippingAddress
 			})]
 		}),
-		/* @__PURE__ */ jsx(ConfirmDialog, {
-			title: "Cancel Subscription",
-			actionButtonText: "Cancel Subscription",
-			description: "Are you sure you want to cancel this subscription? You can reactivate it later.",
+		/* @__PURE__ */ jsx(OrderHistorySection, { subscription }),
+		/* @__PURE__ */ jsx(CancelSubscriptionDialog, {
 			open: showCancelModal,
-			setOpen: setShowCancelModal,
-			onConfirm: handleCancel
+			onOpenChange: setShowCancelModal,
+			onConfirm: handleCancel,
+			onPauseInstead: (months) => {
+				setShowCancelModal(false);
+				pauseMutation.mutate({
+					subscriptionToken: token,
+					pauseParams: {
+						customerId,
+						nextBillDate: format(addMonths(/* @__PURE__ */ new Date(), months), "yyyy-MM-dd")
+					}
+				});
+			}
+		}),
+		/* @__PURE__ */ jsx(EditBillDateDialog, {
+			open: showEditBillDateModal,
+			onOpenChange: (next) => {
+				if (!next) editBillDateMutation.reset();
+				setShowEditBillDateModal(next);
+			},
+			onConfirm: (nextBillDate) => {
+				setPendingNextBillDate(nextBillDate);
+				editBillDateMutation.mutate({
+					subscriptionToken: token,
+					body: { next_bill_date: nextBillDate }
+				});
+			},
+			isLoading: editBillDateMutation.isPending,
+			errorMessage: editBillDateMutation.isError ? "Could not update the bill date. Please try a different date." : void 0,
+			currentNextBillDate: subscription.next_bill_date,
+			otherSubscriptions: otherSubscriptionsForBillDate,
+			onNavigateToSubscription
 		}),
 		/* @__PURE__ */ jsx(PauseSubscriptionDialog, {
 			open: showPauseModal,
@@ -4018,7 +4364,7 @@ function SubscriptionDetail({ token, onNotFound, onError, onSuccess, onMutationE
 }
 //#endregion
 //#region ../../subscriptions/ui/src/screens/SubscriptionDetailScreen.tsx
-function SubscriptionDetailScreen$1({ token, onNavigateToList, onNotFound, onError, onSuccess, onMutationError, renderPaymentMethod }) {
+function SubscriptionDetailScreen$1({ token, onNavigateToList, onNavigateToSubscription, onNotFound, onError, onSuccess, onMutationError, renderPaymentMethod, renderShippingAddress }) {
 	useScreenHeaderBreadcrumbs(useMemo(() => /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsxs(BreadcrumbList, {
 		className: "text-lg",
 		children: [
@@ -4045,7 +4391,9 @@ function SubscriptionDetailScreen$1({ token, onNavigateToList, onNotFound, onErr
 			onError,
 			onSuccess,
 			onMutationError,
-			renderPaymentMethod
+			onNavigateToSubscription,
+			renderPaymentMethod,
+			renderShippingAddress
 		})
 	});
 }
@@ -4320,6 +4668,7 @@ function SubscriptionDetailScreen({ token, onToast }) {
 	return /* @__PURE__ */ jsx(SubscriptionDetailScreen$1, {
 		token,
 		onNavigateToList: () => navigate("subscriptions"),
+		onNavigateToSubscription: (nextToken) => navigate(`subscriptions/${nextToken}`),
 		onNotFound: () => {
 			onToast("Subscription not found", "warning");
 			navigate("subscriptions");
@@ -4389,4 +4738,4 @@ const subscriptionsScreenPropertySchema = {
 //#endregion
 export { SubscriptionsScreen_exports as n, subscriptionsScreenPropertySchema as r, SubscriptionsScreen as t };
 
-//# sourceMappingURL=SubscriptionsScreen-rZxqb0eR.mjs.map
+//# sourceMappingURL=SubscriptionsScreen-CTGqV8gK.mjs.map