@fluid-app/portal-sdk 0.1.248 → 0.1.250

package/dist/{SubscriptionsScreen-B88_dLfE.cjs → SubscriptionsScreen-Bglm_cfM.cjs}

@@ -1,5 +1,5 @@
 require("./chunk-9hOWP6kD.cjs");
-const require_pay_api_context = require("./pay-api-context-_o5ZEXYt.cjs");
+const require_api_context = require("./api-context-BkBvyFVK.cjs");
 const require_countries_api_context = require("./countries-api-context-C0C0K9gJ.cjs");
 const require_portal_tenant = require("./portal_tenant-CNmiAf_A.cjs");
 const require_PortalTenantClientProvider = require("./PortalTenantClientProvider-BT5Y4YyL.cjs");
@@ -8,8 +8,8 @@ const require_ScreenHeaderContext = require("./ScreenHeaderContext-oIu5Bvhs.cjs"
 const require_query_keys = require("./query-keys-e9EEoWxN.cjs");
 const require_use_account = require("./use-account-D6Z9hkDX.cjs");
 const require_AppNavigationContext = require("./AppNavigationContext-BDs1cOuG.cjs");
-const require_fluid_pay_api_adapter = require("./fluid-pay-api-adapter-D63KLi5c.cjs");
-const require_format = require("./format-CLUjV1oR.cjs");
+const require_AddressAutocompleteInput = require("./AddressAutocompleteInput-CbpNjpwB.cjs");
+const require_isAfter = require("./isAfter-DXdeICis.cjs");
 const require_SearchSort = require("./SearchSort-BP2ktxyN.cjs");
 const require_InfiniteScrollSentinel = require("./InfiniteScrollSentinel-BaPx1tjC.cjs");
 const require_order_status_badge = require("./order-status-badge-BKvLeVsM.cjs");
@@ -19,7 +19,66 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
 let clsx = require("clsx");
 let tailwind_merge = require("tailwind-merge");
-let react_hook_form = require("react-hook-form");
+//#region ../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/addWeeks.js
+/**
+* The {@link addWeeks} function options.
+*/
+/**
+* @name addWeeks
+* @category Week Helpers
+* @summary Add the specified number of weeks to the given date.
+*
+* @description
+* Add the specified number of weeks to the given date.
+*
+* @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+* @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
+*
+* @param date - The date to be changed
+* @param amount - The amount of weeks to be added.
+* @param options - An object with options
+*
+* @returns The new date with the weeks added
+*
+* @example
+* // Add 4 weeks to 1 September 2014:
+* const result = addWeeks(new Date(2014, 8, 1), 4)
+* //=> Mon Sep 29 2014 00:00:00
+*/
+function addWeeks(date, amount, options) {
+	return require_isAfter.addDays(date, amount * 7, options);
+}
+//#endregion
+//#region ../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/addYears.js
+/**
+* The {@link addYears} function options.
+*/
+/**
+* @name addYears
+* @category Year Helpers
+* @summary Add the specified number of years to the given date.
+*
+* @description
+* Add the specified number of years to the given date.
+*
+* @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+* @typeParam ResultDate - The result `Date` type.
+*
+* @param date - The date to be changed
+* @param amount - The amount of years to be added.
+* @param options - The options
+*
+* @returns The new date with the years added
+*
+* @example
+* // Add 5 years to 1 September 2014:
+* const result = addYears(new Date(2014, 8, 1), 5)
+* //=> Sun Sep 01 2019 00:00:00
+*/
+function addYears(date, amount, options) {
+	return require_isAfter.addMonths(date, amount * 12, options);
+}
+//#endregion
 //#region ../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/getDefaultOptions.js
 /**
 * @name getDefaultOptions
@@ -46,7 +105,7 @@ let react_hook_form = require("react-hook-form");
 * //=> { weekStarsOn: 1, firstWeekContainsDate: 4 }
 */
 function getDefaultOptions() {
-	return Object.assign({}, require_format.getDefaultOptions());
+	return Object.assign({}, require_isAfter.getDefaultOptions());
 }
 //#endregion
 //#region ../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/getISODay.js
@@ -75,7 +134,7 @@ function getDefaultOptions() {
 * //=> 7
 */
 function getISODay(date, options) {
-	const day = require_format.toDate(date, options?.in).getDay();
+	const day = require_isAfter.toDate(date, options?.in).getDay();
 	return day === 0 ? 7 : day;
 }
 //#endregion
@@ -109,7 +168,7 @@ function getISODay(date, options) {
 * //=> 'Sun Jul 10 2022 00:00:00 GMT+0000 (Coordinated Universal Time)'
 */
 function transpose(date, constructor) {
-	const date_ = isConstructor(constructor) ? new constructor(0) : require_format.constructFrom(constructor, 0);
+	const date_ = isConstructor(constructor) ? new constructor(0) : require_isAfter.constructFrom(constructor, 0);
 	date_.setFullYear(date.getFullYear(), date.getMonth(), date.getDate());
 	date_.setHours(date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
 	return date_;
@@ -147,11 +206,11 @@ var DateTimezoneSetter = class extends Setter {
 	subPriority = -1;
 	constructor(context, reference) {
 		super();
-		this.context = context || ((date) => require_format.constructFrom(reference, date));
+		this.context = context || ((date) => require_isAfter.constructFrom(reference, date));
 	}
 	set(date, flags) {
 		if (flags.timestampIsSet) return date;
-		return require_format.constructFrom(date, transpose(date, this.context));
+		return require_isAfter.constructFrom(date, transpose(date, this.context));
 	}
 };
 //#endregion
@@ -254,7 +313,7 @@ function parseTimezonePattern(pattern, dateString) {
 	const minutes = matchResult[3] ? parseInt(matchResult[3], 10) : 0;
 	const seconds = matchResult[5] ? parseInt(matchResult[5], 10) : 0;
 	return {
-		value: sign * (hours * require_format.millisecondsInHour + minutes * require_format.millisecondsInMinute + seconds * require_format.millisecondsInSecond),
+		value: sign * (hours * require_isAfter.millisecondsInHour + minutes * require_isAfter.millisecondsInMinute + seconds * require_isAfter.millisecondsInSecond),
 		rest: dateString.slice(matchResult[0].length)
 	};
 }
@@ -368,17 +427,17 @@ var LocalWeekYearParser = class extends Parser {
 		return value.isTwoDigitYear || value.year > 0;
 	}
 	set(date, flags, value, options) {
-		const currentYear = require_format.getWeekYear(date, options);
+		const currentYear = require_isAfter.getWeekYear(date, options);
 		if (value.isTwoDigitYear) {
 			const normalizedTwoDigitYear = normalizeTwoDigitYear(value.year, currentYear);
 			date.setFullYear(normalizedTwoDigitYear, 0, options.firstWeekContainsDate);
 			date.setHours(0, 0, 0, 0);
-			return require_format.startOfWeek(date, options);
+			return require_isAfter.startOfWeek(date, options);
 		}
 		const year = !("era" in flags) || flags.era === 1 ? value.year : 1 - value.year;
 		date.setFullYear(year, 0, options.firstWeekContainsDate);
 		date.setHours(0, 0, 0, 0);
-		return require_format.startOfWeek(date, options);
+		return require_isAfter.startOfWeek(date, options);
 	}
 	incompatibleTokens = [
 		"y",
@@ -405,10 +464,10 @@ var ISOWeekYearParser = class extends Parser {
 		return parseNDigitsSigned(token.length, dateString);
 	}
 	set(date, _flags, value) {
-		const firstWeekOfYear = require_format.constructFrom(date, 0);
+		const firstWeekOfYear = require_isAfter.constructFrom(date, 0);
 		firstWeekOfYear.setFullYear(value, 0, 4);
 		firstWeekOfYear.setHours(0, 0, 0, 0);
-		return require_format.startOfISOWeek(firstWeekOfYear);
+		return require_isAfter.startOfISOWeek(firstWeekOfYear);
 	}
 	incompatibleTokens = [
 		"G",
@@ -727,10 +786,10 @@ var StandAloneMonthParser = class extends Parser {
 * //=> Sun Jan 4 2004 00:00:00
 */
 function setWeek(date, week, options) {
-	const date_ = require_format.toDate(date, options?.in);
-	const diff = require_format.getWeek(date_, options) - week;
+	const date_ = require_isAfter.toDate(date, options?.in);
+	const diff = require_isAfter.getWeek(date_, options) - week;
 	date_.setDate(date_.getDate() - diff * 7);
-	return require_format.toDate(date_, options?.in);
+	return require_isAfter.toDate(date_, options?.in);
 }
 //#endregion
 //#region ../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/parse/_lib/parsers/LocalWeekParser.js
@@ -747,7 +806,7 @@ var LocalWeekParser = class extends Parser {
 		return value >= 1 && value <= 53;
 	}
 	set(date, _flags, value, options) {
-		return require_format.startOfWeek(setWeek(date, value, options), options);
+		return require_isAfter.startOfWeek(setWeek(date, value, options), options);
 	}
 	incompatibleTokens = [
 		"y",
@@ -795,8 +854,8 @@ var LocalWeekParser = class extends Parser {
 * //=> Sat Jan 01 2005 00:00:00
 */
 function setISOWeek(date, week, options) {
-	const _date = require_format.toDate(date, options?.in);
-	const diff = require_format.getISOWeek(_date, options) - week;
+	const _date = require_isAfter.toDate(date, options?.in);
+	const diff = require_isAfter.getISOWeek(_date, options) - week;
 	_date.setDate(_date.getDate() - diff * 7);
 	return _date;
 }
@@ -815,7 +874,7 @@ var ISOWeekParser = class extends Parser {
 		return value >= 1 && value <= 53;
 	}
 	set(date, _flags, value) {
-		return require_format.startOfISOWeek(setISOWeek(date, value));
+		return require_isAfter.startOfISOWeek(setISOWeek(date, value));
 	}
 	incompatibleTokens = [
 		"y",
@@ -973,13 +1032,13 @@ var DayOfYearParser = class extends Parser {
 * //=> Sun Sep 07 2014 00:00:00
 */
 function setDay(date, day, options) {
-	const defaultOptions = require_format.getDefaultOptions();
+	const defaultOptions = require_isAfter.getDefaultOptions();
 	const weekStartsOn = options?.weekStartsOn ?? options?.locale?.options?.weekStartsOn ?? defaultOptions.weekStartsOn ?? defaultOptions.locale?.options?.weekStartsOn ?? 0;
-	const date_ = require_format.toDate(date, options?.in);
+	const date_ = require_isAfter.toDate(date, options?.in);
 	const currentDay = date_.getDay();
 	const dayIndex = (day % 7 + 7) % 7;
 	const delta = 7 - weekStartsOn;
-	return require_format.addDays(date_, day < 0 || day > 6 ? day - (currentDay + delta) % 7 : (dayIndex + delta) % 7 - (currentDay + delta) % 7, options);
+	return require_isAfter.addDays(date_, day < 0 || day > 6 ? day - (currentDay + delta) % 7 : (dayIndex + delta) % 7 - (currentDay + delta) % 7, options);
 }
 //#endregion
 //#region ../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/parse/_lib/parsers/DayParser.js
@@ -1222,8 +1281,8 @@ var StandAloneLocalDayParser = class extends Parser {
 * //=> Sun Sep 07 2014 00:00:00
 */
 function setISODay(date, day, options) {
-	const date_ = require_format.toDate(date, options?.in);
-	return require_format.addDays(date_, day - getISODay(date_, options), options);
+	const date_ = require_isAfter.toDate(date, options?.in);
+	return require_isAfter.addDays(date_, day - getISODay(date_, options), options);
 }
 //#endregion
 //#region ../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/parse/_lib/parsers/ISODayParser.js
@@ -1612,7 +1671,7 @@ var ISOTimezoneWithZParser = class extends Parser {
 	}
 	set(date, flags, value) {
 		if (flags.timestampIsSet) return date;
-		return require_format.constructFrom(date, date.getTime() - require_format.getTimezoneOffsetInMilliseconds(date) - value);
+		return require_isAfter.constructFrom(date, date.getTime() - require_isAfter.getTimezoneOffsetInMilliseconds(date) - value);
 	}
 	incompatibleTokens = [
 		"t",
@@ -1635,7 +1694,7 @@ var ISOTimezoneParser = class extends Parser {
 	}
 	set(date, flags, value) {
 		if (flags.timestampIsSet) return date;
-		return require_format.constructFrom(date, date.getTime() - require_format.getTimezoneOffsetInMilliseconds(date) - value);
+		return require_isAfter.constructFrom(date, date.getTime() - require_isAfter.getTimezoneOffsetInMilliseconds(date) - value);
 	}
 	incompatibleTokens = [
 		"t",
@@ -1651,7 +1710,7 @@ var TimestampSecondsParser = class extends Parser {
 		return parseAnyDigitsSigned(dateString);
 	}
 	set(date, _flags, value) {
-		return [require_format.constructFrom(date, value * 1e3), { timestampIsSet: true }];
+		return [require_isAfter.constructFrom(date, value * 1e3), { timestampIsSet: true }];
 	}
 	incompatibleTokens = "*";
 };
@@ -1663,7 +1722,7 @@ var TimestampMillisecondsParser = class extends Parser {
 		return parseAnyDigitsSigned(dateString);
 	}
 	set(date, _flags, value) {
-		return [require_format.constructFrom(date, value), { timestampIsSet: true }];
+		return [require_isAfter.constructFrom(date, value), { timestampIsSet: true }];
 	}
 	incompatibleTokens = "*";
 };
@@ -2012,12 +2071,12 @@ const unescapedLatinCharacterRegExp = /[a-zA-Z]/;
 * //=> Sun Feb 28 2010 00:00:00
 */
 function parse(dateStr, formatStr, referenceDate, options) {
-	const invalidDate = () => require_format.constructFrom(options?.in || referenceDate, NaN);
+	const invalidDate = () => require_isAfter.constructFrom(options?.in || referenceDate, NaN);
 	const defaultOptions = getDefaultOptions();
-	const locale = options?.locale ?? defaultOptions.locale ?? require_format.enUS;
+	const locale = options?.locale ?? defaultOptions.locale ?? require_isAfter.enUS;
 	const firstWeekContainsDate = options?.firstWeekContainsDate ?? options?.locale?.options?.firstWeekContainsDate ?? defaultOptions.firstWeekContainsDate ?? defaultOptions.locale?.options?.firstWeekContainsDate ?? 1;
 	const weekStartsOn = options?.weekStartsOn ?? options?.locale?.options?.weekStartsOn ?? defaultOptions.weekStartsOn ?? defaultOptions.locale?.options?.weekStartsOn ?? 0;
-	if (!formatStr) return dateStr ? invalidDate() : require_format.toDate(referenceDate, options?.in);
+	if (!formatStr) return dateStr ? invalidDate() : require_isAfter.toDate(referenceDate, options?.in);
 	const subFnOptions = {
 		firstWeekContainsDate,
 		weekStartsOn,
@@ -2026,16 +2085,16 @@ function parse(dateStr, formatStr, referenceDate, options) {
 	const setters = [new DateTimezoneSetter(options?.in, referenceDate)];
 	const tokens = formatStr.match(longFormattingTokensRegExp).map((substring) => {
 		const firstCharacter = substring[0];
-		if (firstCharacter in require_format.longFormatters) {
-			const longFormatter = require_format.longFormatters[firstCharacter];
+		if (firstCharacter in require_isAfter.longFormatters) {
+			const longFormatter = require_isAfter.longFormatters[firstCharacter];
 			return longFormatter(substring, locale.formatLong);
 		}
 		return substring;
 	}).join("").match(formattingTokensRegExp);
 	const usedTokens = [];
 	for (let token of tokens) {
-		if (!options?.useAdditionalWeekYearTokens && require_format.isProtectedWeekYearToken(token)) require_format.warnOrThrowProtectedError(token, formatStr, dateStr);
-		if (!options?.useAdditionalDayOfYearTokens && require_format.isProtectedDayOfYearToken(token)) require_format.warnOrThrowProtectedError(token, formatStr, dateStr);
+		if (!options?.useAdditionalWeekYearTokens && require_isAfter.isProtectedWeekYearToken(token)) require_isAfter.warnOrThrowProtectedError(token, formatStr, dateStr);
+		if (!options?.useAdditionalDayOfYearTokens && require_isAfter.isProtectedDayOfYearToken(token)) require_isAfter.warnOrThrowProtectedError(token, formatStr, dateStr);
 		const firstCharacter = token[0];
 		const parser = parsers[firstCharacter];
 		if (parser) {
@@ -2062,7 +2121,7 @@ function parse(dateStr, formatStr, referenceDate, options) {
 	}
 	if (dateStr.length > 0 && notWhitespaceRegExp.test(dateStr)) return invalidDate();
 	const uniquePrioritySetters = setters.map((setter) => setter.priority).sort((a, b) => b - a).filter((priority, index, array) => array.indexOf(priority) === index).map((priority) => setters.filter((setter) => setter.priority === priority).sort((a, b) => b.subPriority - a.subPriority)).map((setterArray) => setterArray[0]);
-	let date = require_format.toDate(referenceDate, options?.in);
+	let date = require_isAfter.toDate(referenceDate, options?.in);
 	if (isNaN(+date)) return invalidDate();
 	const flags = {};
 	for (const setter of uniquePrioritySetters) {
@@ -2111,6 +2170,16 @@ const subscriptionsKeys = {
 	]
 };
 //#endregion
+//#region ../../subscriptions/core/src/hooks/use-subscriptions.ts
+function useSubscriptions(params, options) {
+	const api = useSubscriptionsApi();
+	return (0, _tanstack_react_query.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();
@@ -2638,6 +2707,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 require_portal_tenant.subscriptions_update(client, subscriptionToken, { subscription }));
 		}
 	};
@@ -3003,92 +3073,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] = (0, react.useState)(false);
+	const [selectedMonths, setSelectedMonths] = (0, react.useState)(null);
+	(0, react.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__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialog, {
 		open,
-		onOpenChange: (v) => !isPending && setOpen(v),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogTitle, { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogDescription, { children: description })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogCancel, {
-			disabled: isPending,
-			children: cancelButtonText
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.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__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogContent, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogTitle, { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogDescription, { children: description })] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "border-border space-y-2 rounded-md border p-3",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-foreground text-sm font-medium",
+						children: pauseQuestion
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Label, {
+						htmlFor: "cancel-pause-months",
+						className: "text-foreground text-sm font-semibold",
+						children: "Pause for"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Select, {
+						value: selectedMonths ? String(selectedMonths) : void 0,
+						onValueChange: (value) => setSelectedMonths(value ? Number(value) : null),
+						disabled: isPending,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.SelectTrigger, {
+							id: "cancel-pause-months",
+							className: "w-full",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.SelectValue, { placeholder: "Select duration" })
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.SelectContent, { children: PAUSE_MONTH_OPTIONS.map((months) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.SelectItem, {
+							value: String(months),
+							children: [
+								months,
+								" ",
+								months === 1 ? "month" : "months"
+							]
+						}, months)) })]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+						variant: "outline",
+						onClick: handlePause,
+						disabled: isPending || !selectedMonths,
+						className: "w-full",
+						children: pauseButtonText
+					})
+				]
+			}),
+			errorMessage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-destructive text-left text-sm",
+				children: errorMessage
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogFooter, {
+				className: "flex-col gap-2 sm:flex-row sm:justify-end",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogCancel, {
+					disabled: isPending,
+					children: cancelButtonText
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.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] = (0, react.useState)("specific");
-	const [selectedDate, setSelectedDate] = (0, react.useState)(void 0);
-	const [calendarOpen, setCalendarOpen] = (0, react.useState)(false);
+	const [pauseType, setPauseType] = (0, react.useState)("indefinite");
 	const [selectedOrderCount, setSelectedOrderCount] = (0, react.useState)(null);
-	const today = /* @__PURE__ */ new Date();
-	today.setHours(0, 0, 0, 0);
-	const minDate = require_format.addDays(today, 1);
 	const orderCountOptions = Array.from({ length: 99 }, (_, i) => i + 1);
 	const calculatedResumeDate = selectedOrderCount && currentNextBillDate ? calculateResumeDate(billingInterval, billingIntervalUnit, selectedOrderCount, currentNextBillDate) : null;
 	(0, react.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: require_format.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);
 	};
@@ -3098,29 +3203,24 @@ function PauseSubscriptionDialog({ open, onOpenChange, onConfirm, isLoading, err
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: "Resume" }),
 			" from your account."
 		] });
-		if (pauseType === "order_count" && !selectedOrderCount) return null;
-		let displayDate;
-		if (pauseType === "order_count" && calculatedResumeDate) displayDate = require_format.format(calculatedResumeDate, "MMMM d, yyyy");
-		else if (pauseType === "specific" && selectedDate) displayDate = require_format.format(selectedDate, "MMMM d, yyyy");
-		else if (currentNextBillDate) displayDate = require_format.format(parseIsoDate(currentNextBillDate), "MMMM d, yyyy");
-		else displayDate = "a future date";
+		if (!selectedOrderCount) return null;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 			"You won't be charged until your subscription resumes on",
 			" ",
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "font-semibold",
-				children: displayDate
+				children: calculatedResumeDate ? require_isAfter.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__ */ (0, react_jsx_runtime.jsx)(require_src.Dialog, {
 		open,
 		onOpenChange: handleDismiss,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DialogContent, {
 			"aria-describedby": "pause-subscription-dialog-description",
-			className: "max-w-sm rounded md:w-90",
+			className: "rounded",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogHeader, {
 					className: "flex flex-row justify-between",
@@ -3187,57 +3287,6 @@ function PauseSubscriptionDialog({ open, onOpenChange, onConfirm, isLoading, err
 									})]
 								})]
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "space-y-2",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "flex items-center space-x-2",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_src.Label, {
-										htmlFor: "pause-until-date",
-										className: "text-foreground cursor-pointer text-sm font-medium",
-										children: "Pause until a specific date"
-									})]
-								}), pauseType === "specific" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: "ml-6",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Popover, {
-										open: calendarOpen,
-										onOpenChange: setCalendarOpen,
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.PopoverTrigger, {
-											asChild: true,
-											children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
-												variant: "outline",
-												className: require_src.cn("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 ? require_format.format(selectedDate, "MM/dd/yyyy") : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "mm/dd/yyyy" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CalendarIcon, { className: "text-muted-foreground ml-auto h-4 w-4" })]
-											})
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.PopoverContent, {
-											className: "bg-popover w-auto rounded-md border p-0 shadow-lg",
-											align: "start",
-											sideOffset: 4,
-											style: { zIndex: 9999 },
-											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Calendar, {
-												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__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "text-muted-foreground text-xs",
 								children: statusMessage
@@ -3252,12 +3301,13 @@ function PauseSubscriptionDialog({ open, onOpenChange, onConfirm, isLoading, err
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogFooter, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex w-full flex-row justify-between space-x-2",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.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__ */ (0, react_jsx_runtime.jsx)(require_src.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__ */ (0, react_jsx_runtime.jsx)("div", { className: "border-primary-foreground h-5 w-5 animate-spin rounded-full border-4 border-t-4 border-t-transparent" }) : actionText
@@ -3268,13 +3318,25 @@ 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] = (0, react.useState)(void 0);
 	const [calendarOpen, setCalendarOpen] = (0, react.useState)(false);
 	const today = /* @__PURE__ */ new Date();
 	today.setHours(0, 0, 0, 0);
-	const minDate = require_format.addDays(today, 1);
+	const minDate = require_isAfter.addDays(today, 1);
 	(0, react.useEffect)(() => {
 		if (!open) return;
 		if (defaultNextBillDate) {
@@ -3284,7 +3346,7 @@ function ResumeSubscriptionDialog({ open, onOpenChange, onConfirm, isLoading, er
 	}, [open, defaultNextBillDate]);
 	const handleConfirm = () => {
 		if (!selectedDate) return;
-		onConfirm(require_format.format(selectedDate, "yyyy-MM-dd"));
+		onConfirm(require_isAfter.format(selectedDate, "yyyy-MM-dd"));
 	};
 	const handleDismiss = (next) => {
 		if (!next) setSelectedDate(void 0);
@@ -3295,7 +3357,7 @@ function ResumeSubscriptionDialog({ open, onOpenChange, onConfirm, isLoading, er
 		onOpenChange: handleDismiss,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DialogContent, {
 			"aria-describedby": "resume-subscription-dialog-description",
-			className: "max-w-sm rounded md:w-90",
+			className: "rounded",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogHeader, {
 					className: "flex flex-row justify-between",
@@ -3325,7 +3387,7 @@ function ResumeSubscriptionDialog({ open, onOpenChange, onConfirm, isLoading, er
 									children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
 										variant: "outline",
 										className: require_src.cn("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 ? require_format.format(selectedDate, "MM/dd/yyyy") : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "mm/dd/yyyy" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CalendarIcon, { className: "text-muted-foreground ml-auto h-4 w-4" })]
+										children: [selectedDate ? require_isAfter.format(selectedDate, "MM/dd/yyyy") : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "mm/dd/yyyy" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CalendarIcon, { className: "text-muted-foreground ml-auto h-4 w-4" })]
 									})
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.PopoverContent, {
 									className: "bg-popover w-auto rounded-md border p-0 shadow-lg",
@@ -3356,7 +3418,7 @@ function ResumeSubscriptionDialog({ open, onOpenChange, onConfirm, isLoading, er
 									" ",
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										className: "font-semibold",
-										children: require_format.format(selectedDate, "MMMM d, yyyy")
+										children: require_isAfter.format(selectedDate, "MMMM d, yyyy")
 									}),
 									"."
 								]
@@ -3387,6 +3449,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 require_isAfter.addDays(date, step);
+		case "week": return addWeeks(date, step);
+		case "year": return addYears(date, step);
+		default: return require_isAfter.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] = (0, react.useState)(void 0);
+	const [calendarOpen, setCalendarOpen] = (0, react.useState)(false);
+	const today = /* @__PURE__ */ new Date();
+	today.setHours(0, 0, 0, 0);
+	const minDate = require_isAfter.addDays(today, 1);
+	const subscriptionsWithColor = (0, react.useMemo)(() => (otherSubscriptions ?? []).map((sub, idx) => ({
+		...sub,
+		color: SUBSCRIPTION_COLORS[idx % SUBSCRIPTION_COLORS.length]
+	})), [otherSubscriptions]);
+	const billingColorsByDate = (0, react.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 (!require_isAfter.isAfter(d, horizon) && count < MAX_PROJECTIONS_PER_SUB) {
+				const key = require_isAfter.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 = (0, react.useMemo)(() => ({
+		DayContent: ({ date }) => {
+			const key = require_isAfter.format(date, "yyyy-MM-dd");
+			const colors = billingColorsByDate.get(key) ?? [];
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex h-full w-full flex-col items-center justify-center",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "leading-none",
+					children: date.getDate()
+				}), colors.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "mt-0.5 flex items-center justify-center gap-0.5",
+					children: colors.map((c, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "h-1 w-1 rounded-[1px]",
+						style: { backgroundColor: c }
+					}, `${key}-${i}`))
+				})]
+			});
+		},
+		IconLeft: ({ className: iconClassName, ...iconProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, {
+			className: require_src.cn("h-4 w-4", iconClassName),
+			...iconProps
+		}),
+		IconRight: ({ className: iconClassName, ...iconProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
+			className: require_src.cn("h-4 w-4", iconClassName),
+			...iconProps
+		})
+	}), [billingColorsByDate]);
+	(0, react.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(require_isAfter.format(selectedDate, "yyyy-MM-dd"));
+	};
+	const handleDismiss = (next) => {
+		if (!next) setSelectedDate(void 0);
+		onOpenChange(next);
+	};
+	const previewDate = selectedDate ? require_isAfter.format(selectedDate, "MMMM d, yyyy") : currentNextBillDate ? require_isAfter.format(parseIsoDate(currentNextBillDate), "MMMM d, yyyy") : "a future date";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Dialog, {
+		open,
+		onOpenChange: handleDismiss,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DialogContent, {
+			"aria-describedby": "edit-bill-date-dialog-description",
+			className: "rounded",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogHeader, {
+					className: "flex flex-row justify-between",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogTitle, {
+						className: "text-md w-full text-left font-medium",
+						children: title
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "space-y-4",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							id: "edit-bill-date-dialog-description",
+							className: "text-muted-foreground text-sm",
+							children: description
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Label, {
+								className: "text-foreground text-sm font-semibold",
+								children: "Next bill date"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Popover, {
+								open: calendarOpen,
+								onOpenChange: setCalendarOpen,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.PopoverTrigger, {
+									asChild: true,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+										variant: "outline",
+										className: require_src.cn("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 ? require_isAfter.format(selectedDate, "MM/dd/yyyy") : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "mm/dd/yyyy" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CalendarIcon, { className: "text-muted-foreground ml-auto h-4 w-4" })]
+									})
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.PopoverContent, {
+									className: "bg-popover z-[9999] w-auto rounded-md border p-0 shadow-lg",
+									align: "start",
+									sideOffset: 4,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Calendar, {
+										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__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "text-muted-foreground text-xs",
+							children: [
+								"Your next bill will be on",
+								" ",
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "font-semibold",
+									children: previewDate
+								}),
+								"."
+							]
+						}),
+						subscriptionsWithColor.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Label, {
+								className: "text-foreground text-sm font-semibold",
+								children: "Your other subscriptions"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "border-border max-h-40 overflow-auto rounded-md border",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+									className: "w-full text-sm",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
+										className: "bg-muted text-muted-foreground sticky top-0",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+												className: "w-6 px-2 py-2",
+												"aria-label": "Color"
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+												className: "px-3 py-2 text-left font-medium",
+												children: "Product"
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+												className: "px-3 py-2 text-left font-medium",
+												children: "Bill Date"
+											})
+										] })
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", {
+										className: "divide-border divide-y",
+										children: subscriptionsWithColor.map((sub) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+												className: "px-2 py-2",
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													"aria-hidden": true,
+													className: "inline-block h-2.5 w-2.5 rounded-full",
+													style: { backgroundColor: sub.color }
+												})
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+												className: "truncate px-3 py-2",
+												title: sub.productTitle,
+												children: onNavigateToSubscription ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+													type: "button",
+													onClick: () => {
+														onNavigateToSubscription(sub.token);
+														handleDismiss(false);
+													},
+													className: "text-primary truncate text-left hover:underline",
+													children: sub.productTitle
+												}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "text-foreground",
+													children: sub.productTitle
+												})
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+												className: "text-muted-foreground px-3 py-2",
+												children: sub.nextBillDate ? require_isAfter.format(parseIsoDate(sub.nextBillDate), "MMM d, yyyy") : "—"
+											})
+										] }, sub.token))
+									})]
+								})
+							})]
+						})
+					]
+				}),
+				errorMessage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-destructive text-left text-sm",
+					children: errorMessage
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogFooter, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex w-full flex-row justify-between space-x-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+						variant: "outline",
+						className: "h-10 min-w-[70px] rounded p-3",
+						onClick: () => handleDismiss(false),
+						children: "Cancel"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+						type: "button",
+						className: "h-10 min-w-[70px] rounded p-3",
+						onClick: handleConfirm,
+						disabled: !selectedDate || isLoading,
+						children: isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -3452,7 +3763,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;
@@ -3461,7 +3772,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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex w-full max-w-lg flex-col",
 			children: [
@@ -3481,17 +3792,27 @@ function SubscriptionItemsSection({ subscription, displayQuantity, canEditQuanti
 									children: "Next Order Date"
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 									className: "text-foreground text-2xl font-bold",
-									children: getNextBillDisplay(subscription)
+									children: getNextBillDisplay(displayNextBillDate ? {
+										...subscription,
+										next_bill_date: displayNextBillDate
+									} : subscription)
 								})]
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "pl-4",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: "text-muted-foreground mb-1 text-sm",
-									children: "Next Bill Amount"
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: "text-foreground text-2xl font-bold",
-									children: formatCurrency(subscription.price * quantity)
-								})]
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "text-muted-foreground mb-1 text-sm",
+										children: "Next Bill Amount"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "text-foreground text-2xl font-bold",
+										children: formatCurrency(subscription.price * quantity)
+									}),
+									(displayNextBillDate ?? subscription.next_bill_date) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "text-muted-foreground mt-1 text-xs",
+										children: formatDate(displayNextBillDate ?? subscription.next_bill_date ?? "")
+									})
+								]
 							})]
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", { className: "border-border mt-4" })]
 					})]
@@ -3604,7 +3925,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);
@@ -3636,22 +3957,22 @@ function SubscriptionManagementSection({ subscription, isActive, isPaused, isCan
 							}),
 							isActive && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
 								variant: "outline",
-								onClick: onPause,
+								onClick: onEditBillDate,
 								disabled: isMutating,
 								className: actionButtonClass,
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pause, { className: "h-3 w-3 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CalendarDays, { className: "h-3 w-3 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: "truncate",
-									children: "Pause Subscription"
+									children: "Edit Bill Date"
 								})]
 							}),
-							isPaused && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+							isActive && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
 								variant: "outline",
-								onClick: onResume,
+								onClick: onPause,
 								disabled: isMutating,
 								className: actionButtonClass,
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Play, { className: "h-3 w-3 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pause, { className: "h-3 w-3 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: "truncate",
-									children: "Resume Subscription"
+									children: "Pause Subscription"
 								})]
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
@@ -3661,7 +3982,17 @@ function SubscriptionManagementSection({ subscription, isActive, isPaused, isCan
 								className: actionButtonClass,
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XCircle, { className: "h-3 w-3 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: "truncate",
-									children: isCancelled ? "Cancelled" : "Cancel Subscription"
+									children: isCancelled ? "Cancelled Subscription" : "Cancel Subscription"
+								})]
+							}),
+							isPaused && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+								variant: "outline",
+								onClick: onResume,
+								disabled: isMutating,
+								className: actionButtonClass,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Play, { className: "h-3 w-3 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "truncate",
+									children: "Resume Subscription"
 								})]
 							}),
 							isCancelled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
@@ -3703,13 +4034,20 @@ function SubscriptionManagementSection({ subscription, isActive, isPaused, isCan
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "flex-1 px-4",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: "text-muted-foreground text-sm",
-									children: "Next Payment"
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: "text-foreground font-medium",
-									children: totalPrice
-								})]
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "text-muted-foreground text-sm",
+										children: "Next Payment"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "text-foreground font-medium",
+										children: totalPrice
+									}),
+									(displayNextBillDate ?? subscription.next_bill_date) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "text-muted-foreground text-xs",
+										children: formatDate(displayNextBillDate ?? subscription.next_bill_date ?? "")
+									})
+								]
 							}),
 							subscription.last_bill_date && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "flex-1 pl-4 text-right",
@@ -3731,7 +4069,12 @@ function SubscriptionManagementSection({ subscription, isActive, isPaused, isCan
 						children: "Payment & Shipping"
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "flex flex-col",
-						children: [subscription.address && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "border-border mb-6 border-b pb-4",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "text-muted-foreground mt-3 mb-1 text-sm",
@@ -3755,7 +4098,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__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "border-border mb-6 border-b pb-4",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -3774,71 +4119,87 @@ function SubscriptionManagementSection({ subscription, isActive, isPaused, isCan
 							})]
 						}))]
 					})]
-				}),
-				subscription.orders.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "border-border mb-4 border-b pb-4",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-						className: "text-foreground mb-3 text-sm/6 font-semibold",
-						children: "Order History"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "overflow-x-auto",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
-							className: "divide-border min-w-full divide-y text-sm",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-									className: "text-muted-foreground py-2 pr-3 text-left font-medium",
-									children: "Order"
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-									className: "text-muted-foreground px-3 py-2 text-left font-medium",
-									children: "Date"
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-									className: "text-muted-foreground px-3 py-2 text-left font-medium",
-									children: "Status"
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-									className: "text-muted-foreground py-2 pl-3 text-right font-medium",
-									children: "Amount"
-								})
-							] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", {
-								className: "divide-border divide-y",
-								children: subscription.orders.map((order) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-										className: "text-foreground py-2 pr-3 font-medium",
-										children: order.order_number ?? `#${order.id}`
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-										className: "text-muted-foreground px-3 py-2",
-										children: formatDate(order.created_at.split("T")[0] ?? "")
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-										className: "px-3 py-2",
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusPill, {
-											status: order.status,
-											children: startCase(order.status)
-										})
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: "mt-6 px-8 pt-6 pb-8",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+			className: "text-foreground mb-3 text-sm/6 font-semibold",
+			children: "Subscription Order History"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "border-border overflow-x-auto rounded-md border",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+				className: "divide-border min-w-full divide-y text-sm",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
+					className: "bg-muted",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+							className: "text-muted-foreground py-2 pr-3 pl-3 text-left font-medium",
+							children: "Order"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+							className: "text-muted-foreground px-3 py-2 text-left font-medium",
+							children: "Date"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+							className: "text-muted-foreground px-3 py-2 text-left font-medium",
+							children: "Status"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+							className: "text-muted-foreground py-2 pr-3 pl-3 text-right font-medium",
+							children: "Amount"
+						})
+					] })
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", {
+					className: "divide-border divide-y",
+					children: subscription.orders.map((order) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+							className: "text-foreground py-2 pr-3 pl-3 font-medium",
+							children: order.order_number ?? `#${order.id}`
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+							className: "text-muted-foreground px-3 py-2",
+							children: formatDate(order.created_at.split("T")[0] ?? "")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+							className: "px-3 py-2",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusPill, {
+								status: order.status,
+								children: startCase(order.status)
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.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] = (0, react.useState)(false);
 	const [showPauseModal, setShowPauseModal] = (0, react.useState)(false);
 	const [showResumeModal, setShowResumeModal] = (0, react.useState)(false);
+	const [showEditBillDateModal, setShowEditBillDateModal] = (0, react.useState)(false);
+	const [pendingNextBillDate, setPendingNextBillDate] = (0, react.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 = (0, react.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)
@@ -3873,6 +4234,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;
+	(0, react.useEffect)(() => {
+		if (pendingNextBillDate != null && serverNextBillDate != null && serverNextBillDate.startsWith(pendingNextBillDate)) setPendingNextBillDate(null);
+	}, [pendingNextBillDate, serverNextBillDate]);
 	const serverQuantity = data?.subscription.quantity;
 	(0, react.useEffect)(() => {
 		if (pendingQuantity != null && serverQuantity === pendingQuantity) setPendingQuantity(null);
@@ -3920,11 +4295,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
@@ -3967,6 +4341,7 @@ function SubscriptionDetail({ token, onNotFound, onError, onSuccess, onMutationE
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionItemsSection, {
 				subscription,
 				displayQuantity: pendingQuantity ?? void 0,
+				displayNextBillDate: pendingNextBillDate ?? void 0,
 				canEditQuantity: isActive,
 				onQuantityChange: handleQuantityChange,
 				isUpdatingQuantity: quantityMutation.isPending
@@ -3981,16 +4356,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__ */ (0, react_jsx_runtime.jsx)(ConfirmDialog, {
-			title: "Cancel Subscription",
-			actionButtonText: "Cancel Subscription",
-			description: "Are you sure you want to cancel this subscription? You can reactivate it later.",
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OrderHistorySection, { subscription }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CancelSubscriptionDialog, {
 			open: showCancelModal,
-			setOpen: setShowCancelModal,
-			onConfirm: handleCancel
+			onOpenChange: setShowCancelModal,
+			onConfirm: handleCancel,
+			onPauseInstead: (months) => {
+				setShowCancelModal(false);
+				pauseMutation.mutate({
+					subscriptionToken: token,
+					pauseParams: {
+						customerId,
+						nextBillDate: require_isAfter.format(require_isAfter.addMonths(/* @__PURE__ */ new Date(), months), "yyyy-MM-dd")
+					}
+				});
+			}
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(PauseSubscriptionDialog, {
 			open: showPauseModal,
@@ -4020,7 +4425,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 }) {
 	require_ScreenHeaderContext.useScreenHeaderBreadcrumbs((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Breadcrumb, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.BreadcrumbList, {
 		className: "text-lg",
 		children: [
@@ -4047,7 +4452,9 @@ function SubscriptionDetailScreen$1({ token, onNavigateToList, onNotFound, onErr
 			onError,
 			onSuccess,
 			onMutationError,
-			renderPaymentMethod
+			onNavigateToSubscription,
+			renderPaymentMethod,
+			renderShippingAddress
 		})
 	});
 }
@@ -4061,12 +4468,12 @@ function SubscriptionDetailScreen$1({ token, onNavigateToList, onNotFound, onErr
 function SelectablePaymentMethodDropdown({ title, displayPaymentMethod, paymentMethodList, selectedPaymentMethodId, onSelectPaymentMethod, onAddPaymentMethodClick, addPaymentMethodLabel = "+ Add a payment method", showAddButton = true, isLoading = false, isPending = false, className = "" }) {
 	const [paymentsValue, setPaymentsValue] = (0, react.useState)("");
 	const renderPaymentMethod = (paymentMethod) => {
-		const expiry = require_fluid_pay_api_adapter.getCardExpiry(paymentMethod);
+		const expiry = require_AddressAutocompleteInput.getCardExpiry(paymentMethod);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex flex-row items-center space-x-2",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "flex h-6 w-10 flex-shrink-0 items-center justify-center",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_fluid_pay_api_adapter.PaymentIcon, {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.PaymentIcon, {
 					logoUrl: paymentMethod.details.logo_url,
 					brand: paymentMethod.details.card_type,
 					alt: paymentMethod.details.card_type ?? "Payment Method"
@@ -4075,7 +4482,7 @@ function SelectablePaymentMethodDropdown({ title, displayPaymentMethod, paymentM
 				className: "flex flex-col",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "text-foreground flex items-center text-sm font-medium capitalize",
-					children: require_fluid_pay_api_adapter.getCardDisplayName(paymentMethod)
+					children: require_AddressAutocompleteInput.getCardDisplayName(paymentMethod)
 				}), expiry && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "text-muted-foreground text-sm",
 					children: expiry
@@ -4128,7 +4535,7 @@ function SelectablePaymentMethodDropdown({ title, displayPaymentMethod, paymentM
 								})
 							}, `skeleton-${i}`)) }) : paymentMethodList.map((paymentMethod) => {
 								const isSelected = selectedPaymentMethodId === paymentMethod.id;
-								const expiry = require_fluid_pay_api_adapter.getCardExpiry(paymentMethod);
+								const expiry = require_AddressAutocompleteInput.getCardExpiry(paymentMethod);
 								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 									type: "button",
 									"aria-pressed": isSelected,
@@ -4148,7 +4555,7 @@ function SelectablePaymentMethodDropdown({ title, displayPaymentMethod, paymentM
 											}),
 											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 												className: "flex h-6 w-10 flex-shrink-0 items-center justify-center",
-												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_fluid_pay_api_adapter.PaymentIcon, {
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.PaymentIcon, {
 													logoUrl: paymentMethod.details.logo_url,
 													brand: paymentMethod.details.card_type,
 													alt: paymentMethod.details.card_type ?? "Payment Method"
@@ -4158,7 +4565,7 @@ function SelectablePaymentMethodDropdown({ title, displayPaymentMethod, paymentM
 												className: "flex flex-col",
 												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 													className: "text-card-foreground flex items-center text-sm font-medium capitalize",
-													children: require_fluid_pay_api_adapter.getCardDisplayName(paymentMethod)
+													children: require_AddressAutocompleteInput.getCardDisplayName(paymentMethod)
 												}), expiry && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 													className: "text-muted-foreground text-sm",
 													children: expiry
@@ -4231,14 +4638,14 @@ function subscriptionPaymentMethodToFluidPay(raw) {
 	};
 }
 function PortalSubscriptionPaymentMethodSection({ paymentMethod: currentPaymentMethod, subscriptionToken, onSuccess, onError }) {
-	const payApi = require_pay_api_context.usePayApi();
+	const payApi = require_api_context.usePayApi();
 	const queryClient = (0, _tanstack_react_query.useQueryClient)();
-	const fluidPayShim = (0, react.useMemo)(() => require_fluid_pay_api_adapter.createFluidPayApiAdapter(payApi), [payApi]);
+	const fluidPayShim = (0, react.useMemo)(() => require_AddressAutocompleteInput.createFluidPayApiAdapter(payApi), [payApi]);
 	const [isAddDialogOpen, setIsAddDialogOpen] = (0, react.useState)(false);
 	const { data: paymentMethods = [], isLoading: isLoadingMethods } = (0, _tanstack_react_query.useQuery)({
 		queryKey: require_query_keys.payKeys.paymentMethods.list(),
 		queryFn: async () => {
-			return (await payApi.fetchPaymentMethods()).payment_methods.map(require_fluid_pay_api_adapter.mapToFluidPayPaymentMethod);
+			return (await payApi.fetchPaymentMethods()).payment_methods.map(require_AddressAutocompleteInput.mapToFluidPayPaymentMethod);
 		}
 	});
 	const countriesApi = require_countries_api_context.useCountriesApi();
@@ -4270,7 +4677,7 @@ function PortalSubscriptionPaymentMethodSection({ paymentMethod: currentPaymentM
 		},
 		onError: (err) => onError?.("Failed to add payment method", err)
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_fluid_pay_api_adapter.FluidPayCoreProvider, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_AddressAutocompleteInput.FluidPayCoreProvider, {
 		api: fluidPayShim,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectablePaymentMethodDropdown, {
 			title: "Payment Method",
@@ -4289,7 +4696,7 @@ function PortalSubscriptionPaymentMethodSection({ paymentMethod: currentPaymentM
 					body: { payment_method_id: pm.id }
 				});
 			}
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_fluid_pay_api_adapter.CreditCardFormDialog, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.CreditCardFormDialog, {
 			isOpen: isAddDialogOpen,
 			onClose: () => setIsAddDialogOpen(false),
 			t,
@@ -4302,28 +4709,19 @@ function PortalSubscriptionPaymentMethodSection({ paymentMethod: currentPaymentM
 			isSubmitting: addCardMutation.isPending,
 			countries: countryOptions,
 			jwt: "",
-			renderAddressAutocomplete: ({ control }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlainAddressInput, {
+			renderAddressAutocomplete: ({ control, setValue, countryCode }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddressAutocompleteInput.AddressAutocompleteInput, {
 				control,
-				name: "address1"
+				setValue,
+				countryIso: countryCode,
+				addressLineField: "address1",
+				cityField: "city",
+				stateField: "state",
+				postalCodeField: "zip",
+				placeholder: t("address_line_1")
 			})
 		})]
 	});
 }
-function PlainAddressInput({ control, name }) {
-	const { field } = (0, react_hook_form.useController)({
-		control,
-		name
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-		type: "text",
-		ref: field.ref,
-		value: field.value ?? "",
-		placeholder: "Address Line 1",
-		className: "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
-		onChange: field.onChange,
-		onBlur: field.onBlur
-	});
-}
 //#endregion
 //#region src/screens/SubscriptionDetailScreen.tsx
 function SubscriptionDetailScreen({ token, onToast }) {
@@ -4331,6 +4729,7 @@ function SubscriptionDetailScreen({ token, onToast }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionDetailScreen$1, {
 		token,
 		onNavigateToList: () => navigate("subscriptions"),
+		onNavigateToSubscription: (nextToken) => navigate(`subscriptions/${nextToken}`),
 		onNotFound: () => {
 			onToast("Subscription not found", "warning");
 			navigate("subscriptions");
@@ -4407,4 +4806,4 @@ Object.defineProperty(exports, "subscriptionsScreenPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=SubscriptionsScreen-B88_dLfE.cjs.map
+//# sourceMappingURL=SubscriptionsScreen-Bglm_cfM.cjs.map