@zuplo/zudoku-plugin-monetization 0.0.41 → 0.0.42

package/dist/index.mjs

@@ -1,15 +1,15 @@
-import { _ as formatDuration, a as subscriptionTaxLegendSentence, c as getPriceFromPlan, f as categorizeRateCards, g as formatPrice, h as formatMinorCurrencyAmount, i as planHasDefaultTaxBehavior, l as PlanEntitlements, m as formatStaticEntitlementConfig, p as formatTieredPriceBreakdown, t as PricingTable, v as formatDurationAdjective, y as formatDurationInterval } from "./PricingTable-DNop2iX9.mjs";
+import { S as formatDurationInterval, a as planHasDefaultTaxBehavior, b as formatDuration, c as formatPlanPrice, d as PlanEntitlements, f as EntitlementList, h as categorizeRateCards, o as subscriptionTaxLegendSentence, r as isCustomPlan, t as PricingTable, u as PlanPriceTag, v as formatMinorCurrencyAmount, x as formatDurationAdjective, y as formatPrice } from "./PricingTable-BlcXx4-5.mjs";
 import { cn, createPlugin, joinUrl, throwIfProblemJson } from "zudoku";
 import { AlertTriangleIcon, ArrowDownIcon, ArrowLeftRightIcon, ArrowUpIcon, CalendarIcon, CheckCheckIcon, CheckIcon, CircleSlashIcon, ClockIcon, CreditCardIcon, Grid2x2XIcon, InfoIcon, Loader2Icon, LockIcon, MoreVerticalIcon, RefreshCcw, RefreshCwIcon, Settings, ShieldIcon, StarsIcon, Trash2Icon, XIcon } from "zudoku/icons";
-import { Button, ClientOnly, Head, Heading, Link, Slot } from "zudoku/components";
+import { Link, Outlet, useLocation, useNavigate, useSearchParams } from "zudoku/router";
 import { useAuth, useZudoku } from "zudoku/hooks";
 import { QueryClient, QueryClientProvider, queryOptions, useMutation, useQuery, useQueryClient, useSuspenseQuery } from "zudoku/react-query";
-import { Link as Link$1, Outlet, useLocation, useNavigate, useSearchParams } from "zudoku/router";
+import { Button, ClientOnly, Head, Heading, Link as Link$1, Slot } from "zudoku/components";
+import { createContext, use, useEffect, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Alert, AlertAction, AlertDescription, AlertTitle } from "zudoku/ui/Alert";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "zudoku/ui/Card";
 import { Separator } from "zudoku/ui/Separator";
-import { createContext, use, useEffect, useMemo, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Button as Button$1 } from "zudoku/ui/Button";
 import { DismissibleAlert, DismissibleAlertAction } from "zudoku/ui/DismissibleAlert";
 import { ActionButton } from "zudoku/ui/ActionButton";
@@ -22,6 +22,23 @@ import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "zudoku/ui/Dialog";
 import { Input } from "zudoku/ui/Input";
 import { Progress } from "zudoku/ui/Progress";
+//#region src/utils/purchaseDetails.ts
+const getPlanFromPurchaseDetails = (response) => {
+	return response;
+};
+const getTaxAmountFromPurchaseDetails = (response) => {
+	const taxAmount = response?.tax?.items[0]?.taxAmount;
+	const numericAmount = typeof taxAmount === "number" ? taxAmount : Number.parseFloat(taxAmount ?? "");
+	if (!Number.isFinite(numericAmount)) return;
+	return numericAmount;
+};
+const getTaxLabelFromPurchaseDetails = (response) => {
+	return (response.tax?.taxes ?? []).some((tax) => tax.taxType?.toLowerCase() === "vat") ? "VAT" : "tax";
+};
+const isTaxInclusiveFromPurchaseDetails = (response) => {
+	return response.tax?.taxInclusive === true;
+};
+//#endregion
 //#region src/hooks/useDeploymentName.ts
 const useDeploymentName = () => {
 	const deploymentName = useZudoku().env.ZUPLO_PUBLIC_DEPLOYMENT_NAME;
@@ -38,36 +55,26 @@ const usePurchaseDetails = (planId) => {
 	});
 };
 //#endregion
+//#region src/hooks/usePurchaseSummary.ts
+/**
+* Resolve a plan's checkout summary — the selected plan plus its tax preview —
+* from the purchase-details endpoint. Shared by the checkout and plan-change
+* confirmation pages so both read the plan and tax the same way.
+*/
+const usePurchaseSummary = (planId) => {
+	const { data } = usePurchaseDetails(planId);
+	return {
+		selectedPlan: getPlanFromPurchaseDetails(data),
+		taxAmount: getTaxAmountFromPurchaseDetails(data),
+		taxLabel: getTaxLabelFromPurchaseDetails(data),
+		taxInclusive: isTaxInclusiveFromPurchaseDetails(data)
+	};
+};
+//#endregion
 //#region src/MonetizationContext.tsx
 const MonetizationContext = createContext({});
 const useMonetizationConfig = () => use(MonetizationContext);
 //#endregion
-//#region src/utils/formatBillingCycle.ts
-const formatBillingCycle = (duration) => {
-	if (duration === "month") return "monthly";
-	if (duration === "year") return "annually";
-	if (duration === "week") return "weekly";
-	if (duration === "day") return "daily";
-	return `every ${duration}`;
-};
-//#endregion
-//#region src/utils/purchaseDetails.ts
-const getPlanFromPurchaseDetails = (response) => {
-	return response;
-};
-const getTaxAmountFromPurchaseDetails = (response) => {
-	const taxAmount = response?.tax?.items[0]?.taxAmount;
-	const numericAmount = typeof taxAmount === "number" ? taxAmount : Number.parseFloat(taxAmount ?? "");
-	if (!Number.isFinite(numericAmount)) return;
-	return numericAmount;
-};
-const getTaxLabelFromPurchaseDetails = (response) => {
-	return (response.tax?.taxes ?? []).some((tax) => tax.taxType?.toLowerCase() === "vat") ? "VAT" : "tax";
-};
-const isTaxInclusiveFromPurchaseDetails = (response) => {
-	return response.tax?.taxInclusive === true;
-};
-//#endregion
 //#region src/ZuploMonetizationWrapper.tsx
 const DEFAULT_GATEWAY_URL = "https://api.zuploedge.com";
 const getBaseUrl = (context) => {
@@ -139,24 +146,18 @@ const ZuploMonetizationWrapper = ({ options = {} }) => /* @__PURE__ */ jsx(Query
 	})
 });
 //#endregion
-//#region src/pages/CheckoutConfirmPage.tsx
-const CheckoutConfirmPage = () => {
-	const [search] = useSearchParams();
-	const planId = search.get("planId");
+//#region src/hooks/useSubscriptionConfirmMutation.ts
+/**
+* Confirm a subscription purchase or plan change: POST `{ planId }` to the
+* metering `endpoint`, invalidate cached queries, then navigate to the resulting
+* subscription. Shared by the checkout and plan-change confirmation pages, which
+* differ only by `endpoint` and the optional navigation `state`.
+*/
+const useSubscriptionConfirmMutation = ({ endpoint, planId, navigateState }) => {
 	const zudoku = useZudoku();
-	const deploymentName = useDeploymentName();
 	const navigate = useNavigate();
-	const { pricing } = useMonetizationConfig();
-	if (!planId) throw new Error("Parameter `planId` missing");
-	const purchaseDetails = usePurchaseDetails(planId);
-	const selectedPlan = getPlanFromPurchaseDetails(purchaseDetails.data);
-	const taxAmount = getTaxAmountFromPurchaseDetails(purchaseDetails.data);
-	const taxLabel = getTaxLabelFromPurchaseDetails(purchaseDetails.data);
-	const taxInclusive = isTaxInclusiveFromPurchaseDetails(purchaseDetails.data);
-	const price = selectedPlan ? getPriceFromPlan(selectedPlan) : null;
-	const billingCycle = selectedPlan?.billingCadence ? formatDuration(selectedPlan.billingCadence) : null;
-	const createSubscriptionMutation = useMutation({
-		mutationKey: [`/v3/zudoku-metering/${deploymentName}/subscriptions`],
+	return useMutation({
+		mutationKey: [`/v3/zudoku-metering/${useDeploymentName()}/${endpoint}`],
 		meta: {
 			context: zudoku,
 			request: {
@@ -166,18 +167,29 @@ const CheckoutConfirmPage = () => {
 		},
 		onSuccess: async (subscription) => {
 			await queryClient.invalidateQueries();
-			navigate(`/subscriptions?subscriptionId=${encodeURIComponent(subscription.id)}`);
+			navigate(`/subscriptions?subscriptionId=${encodeURIComponent(subscription.id)}`, navigateState ? { state: navigateState } : void 0);
 		}
 	});
+};
+//#endregion
+//#region src/pages/components/ConfirmationScreen.tsx
+/**
+* Shared chrome for the checkout and plan-change confirmation pages: the
+* centered card with a check-mark header, title/message, a summary slot
+* (`children`, typically a {@link PlanSummaryCard}), confirm/cancel actions
+* and a terms note. Keeping this in one place means both confirmation flows
+* stay visually and behaviorally consistent.
+*/
+const ConfirmationScreen = ({ title, message, errorMessage, children, confirmLabel, pendingLabel, onConfirm, isPending, confirmDisabled = false, cancelTo, cancelLabel = "Cancel", termsNote, footer }) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: "w-full bg-muted min-h-screen flex items-center justify-center px-4 py-12 gap-4",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "max-w-2xl w-full",
 			children: [
-				createSubscriptionMutation.isError && /* @__PURE__ */ jsxs(Alert, {
+				errorMessage && /* @__PURE__ */ jsxs(Alert, {
 					className: "mb-4",
 					variant: "destructive",
-					children: [/* @__PURE__ */ jsx(AlertTitle, { children: "Error" }), /* @__PURE__ */ jsx(AlertDescription, { children: createSubscriptionMutation.error.message })]
+					children: [/* @__PURE__ */ jsx(AlertTitle, { children: "Error" }), /* @__PURE__ */ jsx(AlertDescription, { children: errorMessage })]
 				}),
 				/* @__PURE__ */ jsxs(Card, {
 					className: "p-8 w-full max-w-7xl",
@@ -193,85 +205,25 @@ const CheckoutConfirmPage = () => {
 							className: "text-center mb-8",
 							children: [/* @__PURE__ */ jsx("h1", {
 								className: "text-2xl font-bold text-card-foreground mb-3",
-								children: "Review your subscription"
-							}), /* @__PURE__ */ jsx("p", {
-								className: "text-muted-foreground text-base",
-								children: "Please confirm the details below before completing your purchase."
-							})]
-						}),
-						selectedPlan && /* @__PURE__ */ jsxs(Card, {
-							className: "bg-muted/50",
-							children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
-								className: "flex justify-between items-start",
-								children: [
-									/* @__PURE__ */ jsxs("div", {
-										className: "flex items-center gap-3",
-										children: [/* @__PURE__ */ jsx("div", {
-											className: "flex flex-col text-2xl font-bold bg-primary text-primary-foreground items-center justify-center rounded size-12",
-											children: selectedPlan.name.at(0)?.toUpperCase()
-										}), /* @__PURE__ */ jsxs("div", {
-											className: "flex flex-col",
-											children: [/* @__PURE__ */ jsx("span", {
-												className: "text-lg font-bold",
-												children: selectedPlan.name
-											}), /* @__PURE__ */ jsx("span", {
-												className: "text-sm font-normal text-muted-foreground",
-												children: selectedPlan.description || "Selected plan"
-											})]
-										})]
-									}),
-									price && price.monthly > 0 && /* @__PURE__ */ jsxs("div", {
-										className: "text-right",
-										children: [
-											/* @__PURE__ */ jsx("div", {
-												className: "text-2xl font-bold",
-												children: formatPrice(price.monthly, selectedPlan?.currency)
-											}),
-											taxAmount != null && /* @__PURE__ */ jsx("div", {
-												className: "text-sm font-normal mt-1",
-												children: taxInclusive ? `${formatMinorCurrencyAmount(taxAmount, selectedPlan?.currency)} ${taxLabel} included` : `+ ${formatMinorCurrencyAmount(taxAmount, selectedPlan?.currency)} ${taxLabel}`
-											}),
-											billingCycle && /* @__PURE__ */ jsxs("div", {
-												className: "text-sm text-muted-foreground font-normal",
-												children: ["Billed ", formatBillingCycle(billingCycle)]
-											})
-										]
-									}),
-									price && price.monthly === 0 && /* @__PURE__ */ jsx("div", {
-										className: "text-2xl text-muted-foreground font-bold",
-										children: "Free"
-									})
-								]
-							}) }), /* @__PURE__ */ jsxs(CardContent, { children: [
-								/* @__PURE__ */ jsx(Separator, {}),
-								/* @__PURE__ */ jsx("div", {
-									className: "text-sm font-medium mb-3 mt-3",
-									children: "What's included:"
-								}),
-								/* @__PURE__ */ jsx(PlanEntitlements, {
-									phases: selectedPlan.phases,
-									currency: selectedPlan.currency,
-									billingCadence: selectedPlan.billingCadence,
-									units: pricing?.units,
-									itemClassName: "text-muted-foreground"
-								})
-							] })]
+								children: title
+							}), message]
 						}),
+						children,
 						/* @__PURE__ */ jsxs("div", {
 							className: "space-y-3 mt-4",
 							children: [/* @__PURE__ */ jsx(Button, {
 								className: "w-full",
-								onClick: () => createSubscriptionMutation.mutate(),
-								disabled: createSubscriptionMutation.isPending || !selectedPlan,
-								children: createSubscriptionMutation.isPending ? "Processing Payment..." : "Confirm & Subscribe"
+								onClick: onConfirm,
+								disabled: isPending || confirmDisabled,
+								children: isPending ? pendingLabel : confirmLabel
 							}), /* @__PURE__ */ jsx(Button, {
 								variant: "ghost",
 								className: "w-full",
-								disabled: createSubscriptionMutation.isPending,
-								asChild: !createSubscriptionMutation.isPending,
-								children: /* @__PURE__ */ jsx(Link$1, {
-									to: "/pricing",
-									children: "Cancel"
+								disabled: isPending,
+								asChild: !isPending,
+								children: isPending ? cancelLabel : /* @__PURE__ */ jsx(Link, {
+									to: cancelTo,
+									children: cancelLabel
 								})
 							})]
 						}),
@@ -279,20 +231,132 @@ const CheckoutConfirmPage = () => {
 							className: "mt-6 pt-6 border-t text-center",
 							children: /* @__PURE__ */ jsx("p", {
 								className: "text-xs text-muted-foreground",
-								children: "By confirming, you agree to our Terms of Service and Privacy Policy. You can cancel anytime."
+								children: termsNote
 							})
 						})
 					]
 				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-2 text-muted-foreground text-xs item-center justify-center pt-4",
-					children: [/* @__PURE__ */ jsx(LockIcon, { className: "size-3" }), "Your payment is secured by Stripe"]
-				})
+				footer
 			]
 		})
 	});
 };
 //#endregion
+//#region src/utils/formatBillingCycle.ts
+const formatBillingCycle = (duration) => {
+	if (duration === "month") return "monthly";
+	if (duration === "year") return "annually";
+	if (duration === "week") return "weekly";
+	if (duration === "day") return "daily";
+	return `every ${duration}`;
+};
+//#endregion
+//#region src/pages/components/PlanSummaryCard.tsx
+/**
+* Plan summary shown on the checkout and plan-change confirmation pages: an
+* avatar + name/description on the left and the headline price (or
+* "Free" / "Pay as you go") plus tax and billing cadence on the right,
+* followed by the plan's included entitlements.
+*
+* The price is derived from the plan's rate cards via {@link formatPlanPrice}
+* and rendered in the plan's own billing cadence, so it stays correct for any
+* cadence (e.g. `$2.99/hour`).
+*/
+const PlanSummaryCard = ({ plan, descriptionFallback, taxAmount, taxLabel, taxInclusive, units, entitlementsItemClassName }) => {
+	const priceLabel = formatPlanPrice(plan);
+	const billingCycle = plan.billingCadence ? formatDuration(plan.billingCadence) : null;
+	return /* @__PURE__ */ jsxs(Card, {
+		className: "bg-muted/50",
+		children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
+			className: "flex justify-between items-start",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex flex-col text-2xl font-bold bg-primary text-primary-foreground items-center justify-center rounded size-12",
+					children: plan.name.at(0)?.toUpperCase()
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-lg font-bold",
+						children: plan.name
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-sm font-normal text-muted-foreground",
+						children: plan.description || descriptionFallback
+					})]
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "text-right",
+				children: [/* @__PURE__ */ jsx(PlanPriceTag, {
+					label: priceLabel,
+					currency: plan.currency,
+					size: "lg",
+					description: true
+				}), priceLabel.type === "priced" && /* @__PURE__ */ jsxs(Fragment$1, { children: [taxAmount != null && /* @__PURE__ */ jsx("div", {
+					className: "text-sm font-normal mt-1",
+					children: taxInclusive ? `${formatMinorCurrencyAmount(taxAmount, plan.currency)} ${taxLabel} included` : `+ ${formatMinorCurrencyAmount(taxAmount, plan.currency)} ${taxLabel}`
+				}), billingCycle && /* @__PURE__ */ jsxs("div", {
+					className: "text-sm text-muted-foreground font-normal",
+					children: ["Billed ", formatBillingCycle(billingCycle)]
+				})] })]
+			})]
+		}) }), /* @__PURE__ */ jsxs(CardContent, { children: [
+			/* @__PURE__ */ jsx(Separator, {}),
+			/* @__PURE__ */ jsx("div", {
+				className: "text-sm font-medium mb-3 mt-3",
+				children: "What's included:"
+			}),
+			/* @__PURE__ */ jsx(PlanEntitlements, {
+				phases: plan.phases,
+				currency: plan.currency,
+				billingCadence: plan.billingCadence,
+				units,
+				itemClassName: entitlementsItemClassName
+			})
+		] })]
+	});
+};
+//#endregion
+//#region src/pages/CheckoutConfirmPage.tsx
+const CheckoutConfirmPage = () => {
+	const [search] = useSearchParams();
+	const planId = search.get("planId");
+	const { pricing } = useMonetizationConfig();
+	if (!planId) throw new Error("Parameter `planId` missing");
+	const { selectedPlan, taxAmount, taxLabel, taxInclusive } = usePurchaseSummary(planId);
+	const createSubscriptionMutation = useSubscriptionConfirmMutation({
+		endpoint: "subscriptions",
+		planId
+	});
+	return /* @__PURE__ */ jsx(ConfirmationScreen, {
+		title: "Review your subscription",
+		message: /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-base",
+			children: "Please confirm the details below before completing your purchase."
+		}),
+		errorMessage: createSubscriptionMutation.isError ? createSubscriptionMutation.error.message : void 0,
+		confirmLabel: "Confirm & Subscribe",
+		pendingLabel: "Processing Payment...",
+		onConfirm: () => createSubscriptionMutation.mutate(),
+		isPending: createSubscriptionMutation.isPending,
+		confirmDisabled: !selectedPlan,
+		cancelTo: "/pricing",
+		termsNote: "By confirming, you agree to our Terms of Service and Privacy Policy. You can cancel anytime.",
+		footer: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 text-muted-foreground text-xs item-center justify-center pt-4",
+			children: [/* @__PURE__ */ jsx(LockIcon, { className: "size-3" }), "Your payment is secured by Stripe"]
+		}),
+		children: selectedPlan && /* @__PURE__ */ jsx(PlanSummaryCard, {
+			plan: selectedPlan,
+			descriptionFallback: "Selected plan",
+			taxAmount,
+			taxLabel,
+			taxInclusive,
+			units: pricing?.units,
+			entitlementsItemClassName: "text-muted-foreground"
+		})
+	});
+};
+//#endregion
 //#region src/components/RedirectPage.tsx
 const RedirectPage = ({ icon: Icon, title, description, url, children }) => {
 	useEffect(() => {
@@ -391,7 +455,7 @@ const CheckoutPage = () => {
 				variant: "outline",
 				size: "xs",
 				asChild: true,
-				children: /* @__PURE__ */ jsx(Link$1, {
+				children: /* @__PURE__ */ jsx(Link, {
 					to: "/subscriptions",
 					children: "Back"
 				})
@@ -433,7 +497,7 @@ const ManagePaymentPage = () => {
 				variant: "outline",
 				size: "xs",
 				asChild: true,
-				children: /* @__PURE__ */ jsx(Link, {
+				children: /* @__PURE__ */ jsx(Link$1, {
 					to: "/subscriptions",
 					children: "Back"
 				})
@@ -494,19 +558,18 @@ const PricingPage = () => {
 			}),
 			/* @__PURE__ */ jsx(PricingTable, {
 				plans: pricingTable.items,
-				showYearlyPrice: pricing?.showYearlyPrice !== false,
 				units: pricing?.units,
 				renderAction: (plan, isPopular) => isSubscribed ? /* @__PURE__ */ jsx(Button, {
 					variant: isPopular ? "default" : "outline",
 					asChild: true,
-					children: /* @__PURE__ */ jsx(Link$1, {
+					children: /* @__PURE__ */ jsx(Link, {
 						to: `/subscriptions#manage`,
 						children: "Manage Subscriptions"
 					})
 				}) : /* @__PURE__ */ jsx(Button, {
 					variant: isPopular ? "default" : "outline",
 					asChild: true,
-					children: /* @__PURE__ */ jsx(Link$1, {
+					children: /* @__PURE__ */ jsx(Link, {
 						to: `/checkout?planId=${encodeURIComponent(plan.id)}`,
 						children: "Subscribe"
 					})
@@ -517,6 +580,284 @@ const PricingPage = () => {
 	});
 };
 //#endregion
+//#region src/hooks/useChangeCreditEstimate.ts
+/**
+* Preview the proration credit for changing a subscription's plan, via the
+* Zuplo metering `.../change/estimate-credit` endpoint. Failures are swallowed
+* (`retry: false`, `throwOnError: false`) so the confirmation page never breaks
+* when the preview is unavailable.
+*/
+const useChangeCreditEstimate = (subscriptionId, timing) => {
+	const zudoku = useZudoku();
+	return useQuery({
+		queryKey: [`/v3/zudoku-metering/${useDeploymentName()}/subscriptions/${subscriptionId}/change/estimate-credit`, timing],
+		meta: {
+			context: zudoku,
+			request: {
+				method: "POST",
+				body: JSON.stringify({ timing })
+			}
+		},
+		retry: false,
+		throwOnError: false
+	});
+};
+/**
+* Extract a positive credit amount from the estimate, or `undefined` when there
+* isn't a usable one (so the UI only shows a credit when there actually is one).
+*/
+const getEstimatedCreditAmount = (estimate) => {
+	if (!estimate) return void 0;
+	const amount = Number.parseFloat(estimate.creditAmount ?? "");
+	if (!Number.isFinite(amount) || amount <= 0) return void 0;
+	return {
+		amount,
+		currency: estimate.currency
+	};
+};
+//#endregion
+//#region src/utils/formatDateTime.ts
+/**
+* Format an ISO timestamp with the time of day included, e.g.
+* "Jun 3, 2026, 2:00 PM". Subscriptions can bill on sub-day cadences, so the
+* time is what disambiguates a period's boundaries and the next renewal.
+*/
+const formatDateTime = (dateString) => new Date(dateString).toLocaleString("en-US", {
+	month: "short",
+	day: "numeric",
+	year: "numeric",
+	hour: "numeric",
+	minute: "2-digit"
+});
+//#endregion
+//#region src/utils/billables.ts
+const getActivePhase = (sub) => {
+	const now = Date.now();
+	return sub.phases.filter((p) => new Date(p.activeFrom).getTime() <= now && (!p.activeTo || new Date(p.activeTo).getTime() >= now)).sort((a, b) => new Date(b.activeFrom).getTime() - new Date(a.activeFrom).getTime())[0];
+};
+const activePhaseHasBillables = (sub) => getActivePhase(sub)?.items.some((i) => i.price != null) ?? false;
+const hasFutureBillables = (sub) => {
+	const now = Date.now();
+	return sub.phases.filter((p) => new Date(p.activeFrom).getTime() > now).some((p) => p.items.some((i) => i.price != null));
+};
+//#endregion
+//#region src/utils/subscriptionEntitlements.ts
+const toRateCardPrice = (price) => {
+	if (!price) return null;
+	if (price.type === "tiered" && price.tiers) return {
+		type: "tiered",
+		mode: price.mode === "volume" ? "volume" : "graduated",
+		tiers: price.tiers.map((t) => ({
+			upToAmount: t.upToAmount,
+			flatPrice: t.flatPrice ? { amount: t.flatPrice.amount } : void 0,
+			unitPrice: t.unitPrice ? { amount: t.unitPrice.amount } : void 0
+		}))
+	};
+	if (price.type === "unit" && price.amount != null) return {
+		type: "unit",
+		amount: price.amount
+	};
+	if (price.type === "flat" && price.amount != null) return {
+		type: "flat",
+		amount: price.amount,
+		paymentTerm: price.paymentTerm === "in_advance" || price.paymentTerm === "in_arrears" ? price.paymentTerm : void 0
+	};
+	return null;
+};
+const flatOrNull = (price) => price?.type === "flat" ? price : null;
+/**
+* Convert an actual provisioned subscription line item into the `RateCard`
+* shape so it can run through the same {@link categorizeRateCards} logic the
+* pricing card uses. This is the key to showing a subscription's *real*
+* included quota (e.g. `10 / hour`) — the catalog plan reports `0` for a
+* priced first tier, but the subscription item carries the true
+* `issueAfterReset`.
+*/
+const itemToRateCard = (item) => {
+	const ent = item.included?.entitlement;
+	const name = item.name ?? item.included?.feature?.name ?? item.featureKey ?? item.key;
+	const base = {
+		key: item.key,
+		name,
+		featureKey: item.featureKey
+	};
+	const price = toRateCardPrice(item.price);
+	const billingCadence = item.billingCadence ?? ent?.usagePeriod?.intervalISO ?? null;
+	if (ent?.type === "metered") {
+		const entitlementTemplate = {
+			type: "metered",
+			isSoftLimit: ent.isSoftLimit,
+			issueAfterReset: ent.issueAfterReset,
+			usagePeriod: ent.usagePeriod?.intervalISO
+		};
+		if (price?.type === "flat") return {
+			...base,
+			type: "flat_fee",
+			billingCadence,
+			price,
+			entitlementTemplate
+		};
+		return {
+			...base,
+			type: "usage_based",
+			billingCadence: billingCadence ?? "P1M",
+			price,
+			entitlementTemplate
+		};
+	}
+	if (ent?.type === "boolean") return {
+		...base,
+		type: "flat_fee",
+		billingCadence,
+		price: flatOrNull(price),
+		entitlementTemplate: { type: "boolean" }
+	};
+	if (ent?.type === "static") return {
+		...base,
+		type: "flat_fee",
+		billingCadence,
+		price: flatOrNull(price),
+		entitlementTemplate: {
+			type: "static",
+			config: ent.config ?? ""
+		}
+	};
+	return {
+		...base,
+		type: "flat_fee",
+		billingCadence,
+		price: flatOrNull(price)
+	};
+};
+/**
+* Categorize a subscription phase's actual items into `{ quotas, features }`,
+* reusing {@link categorizeRateCards} so the subscription view stays
+* consistent with the pricing card.
+*/
+const categorizeSubscriptionItems = (items, options) => categorizeRateCards(items.map(itemToRateCard), options);
+/** Map a subscription phase's items to rate cards (for price/entitlement derivation). */
+const subscriptionItemsToRateCards = (items) => items.map(itemToRateCard);
+/**
+* Resolve a subscription's headline price and entitlements, preferring the
+* active phase's ACTUAL provisioned items (the authoritative source — real
+* included quotas and recurring fees) and falling back to the catalog plan's
+* rate cards only when items aren't populated. Keeping both the price and the
+* entitlements on the same source avoids showing "Free" for a paid plan whose
+* embedded snapshot is incomplete.
+*/
+const getSubscriptionPlanView = (subscription, options) => {
+	const plan = subscription.plan;
+	const currency = subscription.currency ?? plan.currency;
+	const billingCadence = subscription.billingCadence ?? plan.billingCadence;
+	const items = getActivePhase(subscription)?.items ?? [];
+	if (items.length > 0) {
+		const rateCards = subscriptionItemsToRateCards(items);
+		return {
+			priceLabel: formatPlanPrice({
+				...plan,
+				billingCadence,
+				phases: [{
+					key: "active",
+					name: "Active",
+					rateCards
+				}]
+			}),
+			entitlements: categorizeRateCards(rateCards, {
+				currency,
+				units: options?.units,
+				planBillingCadence: billingCadence
+			}),
+			fallbackPhases: [],
+			usingItems: true,
+			billingCadence,
+			currency
+		};
+	}
+	return {
+		priceLabel: formatPlanPrice(plan),
+		entitlements: {
+			quotas: [],
+			features: []
+		},
+		fallbackPhases: plan.phases ?? [],
+		usingItems: false,
+		billingCadence,
+		currency
+	};
+};
+/** Whether a resolved view has any entitlements to render. */
+const hasSubscriptionEntitlements = (view) => view.usingItems ? view.entitlements.quotas.length > 0 || view.entitlements.features.length > 0 : view.fallbackPhases.some((p) => p.rateCards?.some((rc) => rc.entitlementTemplate));
+//#endregion
+//#region src/pages/components/SubscriptionEntitlements.tsx
+/**
+* Render a subscription's entitlements from a resolved
+* {@link SubscriptionPlanView}: the active phase's *provisioned* items when
+* present (the real included quotas + per-unit prices), otherwise the catalog
+* plan's phases. Centralizes the "items, else fall back to plan phases" branch
+* shared by the subscription details page and the Switch Plan baseline.
+*
+* Renders `null` when there's nothing to show, so callers can wrap it with
+* {@link hasSubscriptionEntitlements} (for a section header / border) without
+* leaving an empty container behind.
+*/
+const SubscriptionEntitlements = ({ view, currency, billingCadence, units, itemClassName }) => {
+	if (view.usingItems) {
+		const { quotas, features } = view.entitlements;
+		return /* @__PURE__ */ jsx(EntitlementList, {
+			quotas,
+			features,
+			itemClassName
+		});
+	}
+	if (view.fallbackPhases.length === 0) return null;
+	return /* @__PURE__ */ jsx(PlanEntitlements, {
+		phases: view.fallbackPhases,
+		currency,
+		billingCadence,
+		units,
+		itemClassName
+	});
+};
+//#endregion
+//#region src/pages/components/CurrentPlanBaseline.tsx
+/**
+* Baseline shown at the top of the Switch Plan modal: the current plan's price
+* and what it actually includes, so users have a concrete reference to compare
+* targets against. Both the price and the entitlements come from the
+* subscription's *provisioned* items (real included quotas + recurring fees),
+* falling back to the plan's rate cards only when items aren't present — see
+* {@link getSubscriptionPlanView}.
+*/
+const CurrentPlanBaseline = ({ subscription, units }) => {
+	const plan = subscription.plan;
+	const view = getSubscriptionPlanView(subscription, { units });
+	return /* @__PURE__ */ jsxs("div", {
+		className: "border rounded-lg p-4",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start justify-between gap-3 flex-wrap",
+			children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+				className: "text-xs font-medium text-muted-foreground uppercase tracking-wide",
+				children: "Current Plan"
+			}), /* @__PURE__ */ jsx("div", {
+				className: "text-lg font-bold text-foreground",
+				children: plan.name
+			})] }), /* @__PURE__ */ jsx(PlanPriceTag, {
+				label: view.priceLabel,
+				currency: view.currency,
+				billingCadence: view.billingCadence
+			})]
+		}), hasSubscriptionEntitlements(view) && /* @__PURE__ */ jsx("div", {
+			className: "mt-3 pt-3 border-t",
+			children: /* @__PURE__ */ jsx(SubscriptionEntitlements, {
+				view,
+				currency: view.currency,
+				billingCadence: view.billingCadence,
+				units
+			})
+		})]
+	});
+};
+//#endregion
 //#region src/pages/SubscriptionChangeConfirmPage.tsx
 const SubscriptionChangeConfirmPage = () => {
 	const [search] = useSearchParams();
@@ -524,152 +865,68 @@ const SubscriptionChangeConfirmPage = () => {
 	const subscriptionId = search.get("subscriptionId");
 	const mode = search.get("mode");
 	const zudoku = useZudoku();
-	const deploymentName = useDeploymentName();
-	const navigate = useNavigate();
 	const { pricing } = useMonetizationConfig();
 	if (!planId) throw new Error("Parameter `planId` missing");
 	if (!subscriptionId) throw new Error("Parameter `subscriptionId` missing");
-	const purchaseDetails = usePurchaseDetails(planId);
-	const selectedPlan = getPlanFromPurchaseDetails(purchaseDetails.data);
-	const taxAmount = getTaxAmountFromPurchaseDetails(purchaseDetails.data);
-	const taxLabel = getTaxLabelFromPurchaseDetails(purchaseDetails.data);
-	const taxInclusive = isTaxInclusiveFromPurchaseDetails(purchaseDetails.data);
-	const price = selectedPlan ? getPriceFromPlan(selectedPlan) : null;
-	const billingCycle = selectedPlan?.billingCadence ? formatDuration(selectedPlan.billingCadence) : null;
-	const effectiveChangeMessage = mode === "downgrade" ? "This change will take effect at the start of your next billing cycle." : "This change will take effect immediately.";
-	const changeMutation = useMutation({
-		mutationKey: [`/v3/zudoku-metering/${deploymentName}/subscriptions/${subscriptionId}/change`],
-		meta: {
-			context: zudoku,
-			request: {
-				method: "POST",
-				body: JSON.stringify({ planId })
-			}
-		},
-		onSuccess: async (subscription) => {
-			await queryClient.invalidateQueries();
-			navigate(`/subscriptions?subscriptionId=${encodeURIComponent(subscription.id)}`, { state: { planSwitched: { newPlanName: selectedPlan?.name } } });
-		}
+	const { selectedPlan, taxAmount, taxLabel, taxInclusive } = usePurchaseSummary(planId);
+	const { data: subscriptionsData } = useQuery(subscriptionsQuery(zudoku));
+	const currentSubscription = subscriptionsData?.items.find((s) => s.id === subscriptionId);
+	const isDowngrade = mode === "downgrade";
+	const credit = getEstimatedCreditAmount(useChangeCreditEstimate(subscriptionId, isDowngrade ? "next_billing_cycle" : "immediate").data);
+	const nextCycleEnd = currentSubscription?.alignment?.currentAlignedBillingPeriod?.to;
+	const effectiveText = isDowngrade ? nextCycleEnd ? `Takes effect ${formatDateTime(nextCycleEnd)}, at the start of your next billing cycle` : "Takes effect at the start of your next billing cycle" : "Takes effect immediately";
+	const changeMutation = useSubscriptionConfirmMutation({
+		endpoint: `subscriptions/${subscriptionId}/change`,
+		planId,
+		navigateState: { planSwitched: { newPlanName: selectedPlan?.name } }
 	});
-	return /* @__PURE__ */ jsx("div", {
-		className: "w-full bg-muted min-h-screen flex items-center justify-center px-4 py-12 gap-4",
+	return /* @__PURE__ */ jsx(ConfirmationScreen, {
+		title: "Confirm plan change",
+		message: /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-base",
+			children: "Review the change below before confirming."
+		}),
+		errorMessage: changeMutation.isError ? changeMutation.error.message : void 0,
+		confirmLabel: "Confirm & Change Plan",
+		pendingLabel: "Changing plan...",
+		onConfirm: () => changeMutation.mutate(),
+		isPending: changeMutation.isPending,
+		cancelTo: `/subscriptions?${new URLSearchParams({ subscriptionId })}`,
+		termsNote: "By confirming, you agree to our Terms of Service and Privacy Policy.",
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "max-w-2xl w-full",
-			children: [changeMutation.isError && /* @__PURE__ */ jsxs(Alert, {
-				className: "mb-4",
-				variant: "destructive",
-				children: [/* @__PURE__ */ jsx(AlertTitle, { children: "Error" }), /* @__PURE__ */ jsx(AlertDescription, { children: changeMutation.error.message })]
-			}), /* @__PURE__ */ jsxs(Card, {
-				className: "p-8 w-full max-w-7xl",
-				children: [
-					/* @__PURE__ */ jsx("div", {
-						className: "flex justify-center mb-6",
-						children: /* @__PURE__ */ jsx("div", {
-							className: "rounded-full bg-primary/10 p-3",
-							children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-9 text-primary" })
-						})
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "text-center mb-8",
+			className: "space-y-3",
+			children: [
+				currentSubscription && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CurrentPlanBaseline, {
+					subscription: currentSubscription,
+					units: pricing?.units
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-center gap-1.5 text-sm text-muted-foreground",
+					children: [/* @__PURE__ */ jsx(ArrowDownIcon, { className: "size-4" }), " Changing to"]
+				})] }),
+				selectedPlan && /* @__PURE__ */ jsx(PlanSummaryCard, {
+					plan: selectedPlan,
+					descriptionFallback: "New plan",
+					taxAmount,
+					taxLabel,
+					taxInclusive,
+					units: pricing?.units
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "rounded-lg bg-muted/50 p-3 text-sm space-y-1",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "font-medium text-card-foreground",
+						children: effectiveText
+					}), credit && /* @__PURE__ */ jsxs("div", {
+						className: "text-muted-foreground",
 						children: [
-							/* @__PURE__ */ jsx("h1", {
-								className: "text-2xl font-bold text-card-foreground mb-3",
-								children: "Confirm plan change"
-							}),
-							/* @__PURE__ */ jsx("p", {
-								className: "text-muted-foreground text-base",
-								children: effectiveChangeMessage
-							}),
-							/* @__PURE__ */ jsx("p", {
-								className: "text-muted-foreground text-base",
-								children: "Please confirm the details below to change your subscription."
-							})
+							"You'll be credited ",
+							formatPrice(credit.amount, credit.currency),
+							" ",
+							"for unused time on your current plan."
 						]
-					}),
-					selectedPlan && /* @__PURE__ */ jsxs(Card, {
-						className: "bg-muted/50",
-						children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
-							className: "flex justify-between items-start",
-							children: [
-								/* @__PURE__ */ jsxs("div", {
-									className: "flex items-center gap-3",
-									children: [/* @__PURE__ */ jsx("div", {
-										className: "flex flex-col text-2xl font-bold bg-primary text-primary-foreground items-center justify-center rounded size-12",
-										children: selectedPlan.name.at(0)?.toUpperCase()
-									}), /* @__PURE__ */ jsxs("div", {
-										className: "flex flex-col",
-										children: [/* @__PURE__ */ jsx("span", {
-											className: "text-lg font-bold",
-											children: selectedPlan.name
-										}), /* @__PURE__ */ jsx("span", {
-											className: "text-sm font-normal text-muted-foreground",
-											children: selectedPlan.description || "New plan"
-										})]
-									})]
-								}),
-								price && price.monthly > 0 && /* @__PURE__ */ jsxs("div", {
-									className: "text-right",
-									children: [
-										/* @__PURE__ */ jsx("div", {
-											className: "text-2xl font-bold",
-											children: formatPrice(price.monthly, selectedPlan?.currency)
-										}),
-										taxAmount != null && /* @__PURE__ */ jsx("div", {
-											className: "text-sm font-normal mt-1",
-											children: taxInclusive ? `${formatMinorCurrencyAmount(taxAmount, selectedPlan?.currency)} ${taxLabel} included` : `+ ${formatMinorCurrencyAmount(taxAmount, selectedPlan?.currency)} ${taxLabel}`
-										}),
-										billingCycle && /* @__PURE__ */ jsxs("div", {
-											className: "text-sm text-muted-foreground font-normal",
-											children: ["Billed ", formatBillingCycle(billingCycle)]
-										})
-									]
-								}),
-								price && price.monthly === 0 && /* @__PURE__ */ jsx("div", {
-									className: "text-2xl text-muted-foreground font-bold",
-									children: "Free"
-								})
-							]
-						}) }), /* @__PURE__ */ jsxs(CardContent, { children: [
-							/* @__PURE__ */ jsx(Separator, {}),
-							/* @__PURE__ */ jsx("div", {
-								className: "text-sm font-medium mb-3 mt-3",
-								children: "What's included:"
-							}),
-							/* @__PURE__ */ jsx(PlanEntitlements, {
-								phases: selectedPlan.phases,
-								currency: selectedPlan.currency,
-								billingCadence: selectedPlan.billingCadence,
-								units: pricing?.units
-							})
-						] })]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "space-y-3 mt-4",
-						children: [/* @__PURE__ */ jsx(Button, {
-							className: "w-full",
-							onClick: () => changeMutation.mutate(),
-							disabled: changeMutation.isPending,
-							children: changeMutation.isPending ? "Changing plan..." : "Confirm & Change Plan"
-						}), /* @__PURE__ */ jsx(Button, {
-							variant: "ghost",
-							className: "w-full",
-							disabled: changeMutation.isPending,
-							asChild: !changeMutation.isPending,
-							children: /* @__PURE__ */ jsx(Link$1, {
-								to: `/subscriptions?${new URLSearchParams({ subscriptionId: subscriptionId ?? "" })}`,
-								children: "Cancel"
-							})
-						})]
-					}),
-					/* @__PURE__ */ jsx("div", {
-						className: "mt-6 pt-6 border-t text-center",
-						children: /* @__PURE__ */ jsx("p", {
-							className: "text-xs text-muted-foreground",
-							children: "By confirming, you agree to our Terms of Service and Privacy Policy."
-						})
-					})
-				]
-			})]
+					})]
+				})
+			]
 		})
 	});
 };
@@ -689,17 +946,6 @@ const useSubscriptions = () => {
 	});
 };
 //#endregion
-//#region src/utils/billables.ts
-const getActivePhase = (sub) => {
-	const now = Date.now();
-	return sub.phases.filter((p) => new Date(p.activeFrom).getTime() <= now && (!p.activeTo || new Date(p.activeTo).getTime() >= now)).sort((a, b) => new Date(b.activeFrom).getTime() - new Date(a.activeFrom).getTime())[0];
-};
-const activePhaseHasBillables = (sub) => getActivePhase(sub)?.items.some((i) => i.price != null) ?? false;
-const hasFutureBillables = (sub) => {
-	const now = Date.now();
-	return sub.phases.filter((p) => new Date(p.activeFrom).getTime() > now).some((p) => p.items.some((i) => i.price != null));
-};
-//#endregion
 //#region src/pages/subscriptions/ConfirmDeleteKeyAlert.tsx
 const ConfirmDeleteKeyAlert = ({ children, onDelete }) => {
 	return /* @__PURE__ */ jsxs(AlertDialog, { children: [/* @__PURE__ */ jsx(AlertDialogTrigger, {
@@ -712,7 +958,7 @@ const ConfirmDeleteKeyAlert = ({ children, onDelete }) => {
 };
 //#endregion
 //#region src/pages/subscriptions/ApiKey.tsx
-const formatDate$2 = (dateString) => {
+const formatDate$1 = (dateString) => {
 	if (!dateString) return "";
 	return new Date(dateString).toLocaleDateString("en-US", {
 		month: "short",
@@ -731,7 +977,7 @@ const getTimeAgo = (dateString) => {
 	const diffInDays = Math.floor(diffInHours / 24);
 	if (diffInDays === 1) return "1 day ago";
 	if (diffInDays < 30) return `${diffInDays} days ago`;
-	return formatDate$2(dateString);
+	return formatDate$1(dateString);
 };
 const ApiKey = ({ apiKey, createdAt, lastUsed, expiresOn, isActive = true, label, onDelete }) => {
 	const isExpiring = expiresOn && new Date(expiresOn) < new Date(Date.now() + 720 * 60 * 60 * 1e3);
@@ -788,7 +1034,7 @@ const ApiKey = ({ apiKey, createdAt, lastUsed, expiresOn, isActive = true, label
 				children: [
 					/* @__PURE__ */ jsxs("div", {
 						className: "flex items-center gap-1.5",
-						children: [/* @__PURE__ */ jsx(ClockIcon, { className: "size-3" }), /* @__PURE__ */ jsxs("span", { children: ["Created ", formatDate$2(createdAt)] })]
+						children: [/* @__PURE__ */ jsx(ClockIcon, { className: "size-3" }), /* @__PURE__ */ jsxs("span", { children: ["Created ", formatDate$1(createdAt)] })]
 					}),
 					/* @__PURE__ */ jsx("span", {
 						className: "text-muted-foreground/40",
@@ -803,7 +1049,7 @@ const ApiKey = ({ apiKey, createdAt, lastUsed, expiresOn, isActive = true, label
 						children: [
 							isExpired ? "Expired" : "Expires",
 							" on ",
-							formatDate$2(expiresOn)
+							formatDate$1(expiresOn)
 						]
 					})] })
 				]
@@ -918,7 +1164,7 @@ const ApiKeysList = ({ isPendingFirstPayment, apiKeys, deploymentName, consumerI
 					/* @__PURE__ */ jsx(AlertTitle, { children: "API key was deleted" }),
 					/* @__PURE__ */ jsx(AlertDescription, { children: (() => {
 						const deletedKey = apiKeys.find((k) => k.id === deleteKeyMutation.variables?.keyId);
-						return deletedKey ? `API key created ${formatDate$2(deletedKey.createdOn)} has been removed.` : "The API key has been deleted.";
+						return deletedKey ? `API key created ${formatDate$1(deletedKey.createdOn)} has been removed.` : "The API key has been deleted.";
 					})() }),
 					/* @__PURE__ */ jsx(DismissibleAlertAction, {})
 				]
@@ -1041,7 +1287,7 @@ const CancelSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionId
 								" subscription?"
 							] }), /* @__PURE__ */ jsx(AlertDescription, { children: "Your subscription will end immediately. You'll lose access to its entitlements right away." })] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AlertTitle, { children: "Your plan will be canceled at the end of your billing cycle." }), /* @__PURE__ */ jsxs(AlertDescription, { children: [
 								"You'll retain access until ",
-								formatDate$2(billingPeriodEnd),
+								formatDate$1(billingPeriodEnd),
 								". After your billing period ends, this plan will not renew and you would need to subscribe again to continue."
 							] })] })]
 						}),
@@ -1050,7 +1296,7 @@ const CancelSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionId
 							children: [/* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }), isImmediateCancel ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AlertTitle, { children: "You can subscribe again at any time" }), /* @__PURE__ */ jsx(AlertDescription, { children: "After canceling, you can return to the pricing page and start a new subscription whenever you're ready." })] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AlertTitle, { children: "You can still resume before then" }), /* @__PURE__ */ jsxs(AlertDescription, { children: [
 								"If you change your mind you have until",
 								" ",
-								formatDate$2(billingPeriodEnd),
+								formatDate$1(billingPeriodEnd),
 								" to remove this cancellation from Manage subscription."
 							] })] })]
 						}),
@@ -1152,7 +1398,7 @@ const RestoreSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionI
 								className: "space-y-2",
 								children: [/* @__PURE__ */ jsxs("p", { children: [
 									"Your access stays in place until ",
-									formatDate$2(billingPeriodEnd),
+									formatDate$1(billingPeriodEnd),
 									" ",
 									"either way."
 								] }), /* @__PURE__ */ jsx("p", { children: "Confirming will remove the pending cancellation. Your subscription will remain active and continue to renew on your normal billing schedule, and charges will apply as usual." })]
@@ -1185,326 +1431,315 @@ const RestoreSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionI
 	});
 };
 //#endregion
-//#region src/pages/subscriptions/SwitchPlanModal.tsx
-const getAllKeysAcrossPhases = (plan, units) => {
-	const quotaKeys = /* @__PURE__ */ new Set();
-	const featureKeys = /* @__PURE__ */ new Set();
-	for (const phase of plan.phases) {
-		const { quotas, features } = categorizeRateCards(phase.rateCards, {
-			currency: plan.currency,
-			units,
-			planBillingCadence: plan.billingCadence
-		});
-		for (const q of quotas) quotaKeys.add(q.key);
-		for (const f of features) featureKeys.add(f.key);
-	}
-	return {
-		quotaKeys,
-		featureKeys
-	};
+//#region src/utils/comparePlanEntitlements.ts
+/** Compact, human-readable value for a quota row. */
+const quotaValueLabel = (q) => {
+	if (q.unitPrice) return q.unitPrice;
+	if (q.tierPrices && q.tierPrices.length > 0) return "Tiered pricing";
+	if (q.isPayg) return "Usage-based";
+	return `${q.limit.toLocaleString("en-US")} / ${q.period}`;
 };
-const comparePlans = (currentPlan, targetPlan, currentIndex, targetIndex, units) => {
-	const isUpgrade = targetIndex > currentIndex;
-	const currentPhase = currentPlan?.phases.at(-1);
-	const targetPhase = targetPlan.phases.at(-1);
-	const { quotas: currentQuotas, features: currentFeatures } = currentPhase ? categorizeRateCards(currentPhase.rateCards, {
-		currency: currentPlan?.currency,
-		units,
-		planBillingCadence: currentPlan?.billingCadence
-	}) : {
-		quotas: [],
-		features: []
-	};
-	const { quotas: targetQuotas, features: targetFeatures } = targetPhase ? categorizeRateCards(targetPhase.rateCards, {
-		currency: targetPlan.currency,
-		units,
-		planBillingCadence: targetPlan.billingCadence
-	}) : {
-		quotas: [],
-		features: []
-	};
-	const currentAllKeys = currentPlan ? getAllKeysAcrossPhases(currentPlan, units) : {
-		quotaKeys: /* @__PURE__ */ new Set(),
-		featureKeys: /* @__PURE__ */ new Set()
-	};
-	const targetAllKeys = getAllKeysAcrossPhases(targetPlan, units);
-	const quotaChanges = [];
-	const allQuotaKeys = new Set([...currentQuotas.map((q) => q.key), ...targetQuotas.map((q) => q.key)]);
-	for (const key of allQuotaKeys) {
-		const current = currentQuotas.find((q) => q.key === key);
-		const target = targetQuotas.find((q) => q.key === key);
-		if (current && target) {
+const featureValueLabel = (f) => f.value ?? "Included";
+const isPlainNumericQuota = (q) => !q.isPayg && !q.unitPrice && (!q.tierPrices || q.tierPrices.length === 0);
+const sameTierSchedule = (a, b) => (a ?? []).join("\n") === (b ?? []).join("\n");
+/**
+* Compare two plans' entitlements, matching strictly by feature key (never by
+* display name). Each key yields exactly one change row, so a key that exists
+* on one side and a differently-keyed feature that merely shares a display
+* name can never read as a contradictory "added" + "removed" of the same
+* thing. Labels are disambiguated afterwards when they would collide.
+*/
+const comparePlanEntitlements = (current, target) => {
+	const changes = [];
+	const curQuota = new Map(current.quotas.map((q) => [q.key, q]));
+	const tgtQuota = new Map(target.quotas.map((q) => [q.key, q]));
+	const curFeat = new Map(current.features.map((f) => [f.key, f]));
+	const tgtFeat = new Map(target.features.map((f) => [f.key, f]));
+	for (const key of new Set([...curQuota.keys(), ...tgtQuota.keys()])) {
+		const c = curQuota.get(key);
+		const t = tgtQuota.get(key);
+		if (c && t) {
+			const currentValue = quotaValueLabel(c);
+			const targetValue = quotaValueLabel(t);
 			let change = "same";
-			if (target.limit > current.limit) change = "increase";
-			else if (target.limit < current.limit) change = "decrease";
-			quotaChanges.push({
-				key: key ?? "",
-				name: target.name,
-				currentValue: current.limit,
-				newValue: target.limit,
-				period: target.period,
-				change
-			});
-		} else if (target && !current) {
-			if (currentAllKeys.featureKeys.has(key)) {
-				quotaChanges.push({
-					key: key ?? "",
-					name: target.name,
-					currentValue: null,
-					newValue: target.limit,
-					period: target.period,
-					change: "same"
-				});
-				continue;
-			}
-			quotaChanges.push({
-				key: key ?? "",
-				name: target.name,
-				currentValue: null,
-				newValue: target.limit,
-				period: target.period,
-				change: "added"
-			});
-		} else if (current && !target) {
-			if (targetAllKeys.featureKeys.has(key)) continue;
-			quotaChanges.push({
-				key: key ?? "",
-				name: current.name,
-				currentValue: current.limit,
-				newValue: null,
-				period: current.period,
-				change: "removed"
+			if (isPlainNumericQuota(c) && isPlainNumericQuota(t) && c.period === t.period) {
+				if (t.limit > c.limit) change = "increase";
+				else if (t.limit < c.limit) change = "decrease";
+			} else if (currentValue !== targetValue || !sameTierSchedule(c.tierPrices, t.tierPrices)) change = "changed";
+			changes.push({
+				key,
+				label: t.name,
+				kind: "quota",
+				change,
+				currentValue,
+				targetValue,
+				tierPrices: t.tierPrices,
+				period: t.period
 			});
-		}
+		} else if (t) changes.push({
+			key,
+			label: t.name,
+			kind: "quota",
+			change: "added",
+			targetValue: quotaValueLabel(t),
+			tierPrices: t.tierPrices,
+			period: t.period
+		});
+		else if (c) changes.push({
+			key,
+			label: c.name,
+			kind: "quota",
+			change: "removed",
+			currentValue: quotaValueLabel(c),
+			period: c.period
+		});
 	}
-	const featureChanges = [];
-	const allFeatureKeys = new Set([...currentFeatures.map((f) => f.key), ...targetFeatures.map((f) => f.key)]);
-	for (const key of allFeatureKeys) {
-		const current = currentFeatures.find((f) => f.key === key);
-		const target = targetFeatures.find((f) => f.key === key);
-		if (current && target) {
-			let change = "same";
-			if (current.value !== void 0 && target.value !== void 0 && current.value !== target.value) change = isUpgrade ? "upgraded" : "downgraded";
-			featureChanges.push({
-				key: key ?? "",
-				name: target.name,
-				currentValue: current.value ?? true,
-				newValue: target.value ?? true,
-				change
-			});
-		} else if (target && !current) {
-			if (currentAllKeys.quotaKeys.has(key)) {
-				featureChanges.push({
-					key: key ?? "",
-					name: target.name,
-					currentValue: true,
-					newValue: target.value ?? true,
-					change: "same"
-				});
-				continue;
-			}
-			featureChanges.push({
-				key: key ?? "",
-				name: target.name,
-				currentValue: null,
-				newValue: target.value ?? true,
-				change: "added"
-			});
-		} else if (current && !target) {
-			if (targetAllKeys.quotaKeys.has(key)) continue;
-			featureChanges.push({
-				key: key ?? "",
-				name: current.name,
-				currentValue: current.value ?? true,
-				newValue: null,
-				change: "removed"
+	for (const key of new Set([...curFeat.keys(), ...tgtFeat.keys()])) {
+		const c = curFeat.get(key);
+		const t = tgtFeat.get(key);
+		if (c && t) {
+			const currentValue = featureValueLabel(c);
+			const targetValue = featureValueLabel(t);
+			changes.push({
+				key,
+				label: t.name,
+				kind: "feature",
+				change: currentValue === targetValue ? "same" : "changed",
+				currentValue,
+				targetValue
 			});
-		}
+		} else if (t) changes.push({
+			key,
+			label: t.name,
+			kind: "feature",
+			change: "added",
+			targetValue: featureValueLabel(t)
+		});
+		else if (c) changes.push({
+			key,
+			label: c.name,
+			kind: "feature",
+			change: "removed",
+			currentValue: featureValueLabel(c)
+		});
 	}
-	return {
-		plan: targetPlan,
-		isUpgrade,
-		isNewerVersion: false,
-		quotaChanges,
-		featureChanges
-	};
+	const labelCounts = /* @__PURE__ */ new Map();
+	for (const ch of changes) labelCounts.set(ch.label, (labelCounts.get(ch.label) ?? 0) + 1);
+	return changes.map(({ period, ...ch }) => {
+		if ((labelCounts.get(ch.label) ?? 0) > 1 && ch.kind === "quota" && period) return {
+			...ch,
+			label: `${ch.label} (${period})`
+		};
+		return ch;
+	});
 };
-const ChangeIndicator = ({ change }) => {
-	if (change === "increase" || change === "added" || change === "upgraded") return /* @__PURE__ */ jsx(ArrowUpIcon, { className: "w-4 h-4 text-primary shrink-0" });
-	if (change === "decrease" || change === "removed" || change === "downgraded") return /* @__PURE__ */ jsx(ArrowDownIcon, { className: "w-4 h-4 text-amber-600 shrink-0" });
-	return /* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-green-600 shrink-0" });
+//#endregion
+//#region src/utils/formatPhaseRampSummary.ts
+const durationWithCount = (iso) => {
+	const text = formatDuration(iso);
+	return /^\d/.test(text) ? text : `1 ${text}`;
 };
-const isPrivatePlan = (plan) => plan.metadata?.zuplo_private_plan === "true";
-const planVersion = (plan) => plan.version ?? 1;
-const isNewerPlanVersion = (subscribedPlan, target) => target.key === subscribedPlan.key && planVersion(target) > planVersion(subscribedPlan);
-/** Baseline for comparisons: catalog entry when present, else subscription plan. */
-const resolvePlanForComparison = (subscribedPlan, catalogItems) => catalogItems?.find((p) => p.id === subscribedPlan.id) ?? subscribedPlan;
-const resolveIsUpgrade = ({ target, targetIndex, subscribedPlan, currentIndex }) => {
-	if (target.key === subscribedPlan.key) return planVersion(target) > planVersion(subscribedPlan);
-	return targetIndex > currentIndex;
+const steadyStateLabel = (plan) => {
+	const label = formatPlanPrice(plan);
+	if (label.type === "priced") return `${formatPrice(label.amount, plan.currency)} / ${formatDuration(plan.billingCadence)}`;
+	return label.type === "payg" ? "Pay as you go" : "Free";
 };
-const modeLabelMap = {
+/**
+* One-line summary of a multi-phase plan's progression for compact UI, e.g.
+* `"Free Trial (1 week), then $2.99 / month"`. Returns `undefined` for
+* single-phase plans (nothing to summarize).
+*/
+const formatPhaseRampSummary = (plan) => {
+	if (!plan.phases || plan.phases.length <= 1) return void 0;
+	const first = plan.phases[0];
+	return `${first.duration ? `${first.name} (${durationWithCount(first.duration)})` : first.name}, then ${steadyStateLabel(plan)}`;
+};
+//#endregion
+//#region src/pages/components/PlanChangeCard.tsx
+const MODE_LABEL = {
 	upgrade: "Upgrade",
 	downgrade: "Downgrade",
 	private: "Switch"
 };
-const isSwitchPlanTarget = (value) => {
-	if (typeof value !== "object" || value === null) return false;
-	if (!("subscriptionId" in value) || !("plan" in value) || !("mode" in value)) return false;
-	return true;
+const ChangeRow = ({ change }) => {
+	const arrow = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: change.currentValue
+	}), /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: "→"
+	})] });
+	let icon;
+	let body;
+	switch (change.change) {
+		case "added":
+			icon = /* @__PURE__ */ jsx(CheckIcon, { className: "size-4 text-green-600 shrink-0 mt-0.5" });
+			body = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium",
+					children: change.label
+				}),
+				change.targetValue && change.targetValue !== "Included" ? /* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground",
+					children: [": ", change.targetValue]
+				}) : null,
+				/* @__PURE__ */ jsx("span", {
+					className: "text-green-600",
+					children: " — now included"
+				})
+			] });
+			break;
+		case "removed":
+			icon = /* @__PURE__ */ jsx(XIcon, { className: "size-4 text-destructive shrink-0 mt-0.5" });
+			body = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				className: "font-medium",
+				children: change.label
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-destructive",
+				children: " — no longer included"
+			})] });
+			break;
+		case "increase":
+			icon = /* @__PURE__ */ jsx(ArrowUpIcon, { className: "size-4 text-primary shrink-0 mt-0.5" });
+			body = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "font-medium",
+					children: [change.label, ":"]
+				}),
+				" ",
+				arrow,
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium text-primary",
+					children: change.targetValue
+				})
+			] });
+			break;
+		case "decrease":
+			icon = /* @__PURE__ */ jsx(ArrowDownIcon, { className: "size-4 text-amber-600 shrink-0 mt-0.5" });
+			body = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "font-medium",
+					children: [change.label, ":"]
+				}),
+				" ",
+				arrow,
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium text-amber-600",
+					children: change.targetValue
+				})
+			] });
+			break;
+		case "same":
+			icon = /* @__PURE__ */ jsx(CheckIcon, { className: "size-4 text-muted-foreground shrink-0 mt-0.5" });
+			body = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", { children: change.label }), change.targetValue && change.targetValue !== "Included" && /* @__PURE__ */ jsxs("span", {
+				className: "text-muted-foreground",
+				children: [": ", change.targetValue]
+			})] });
+			break;
+		default:
+			icon = /* @__PURE__ */ jsx(ArrowLeftRightIcon, { className: "size-4 text-muted-foreground shrink-0 mt-0.5" });
+			body = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "font-medium",
+					children: [change.label, ":"]
+				}),
+				" ",
+				change.currentValue !== change.targetValue && arrow,
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium",
+					children: change.targetValue
+				})
+			] });
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-start gap-2 text-sm",
+		children: [icon, /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap items-baseline gap-1",
+			children: body
+		}), change.tierPrices && change.tierPrices.length > 0 && /* @__PURE__ */ jsx("ul", {
+			className: "text-xs text-muted-foreground mt-1 space-y-0.5",
+			children: change.tierPrices.map((line) => /* @__PURE__ */ jsx("li", { children: line }, line))
+		})] })]
+	});
 };
-const PlanComparisonItem = ({ comparison, subscriptionId, mode, onRequestChange, isSwitching }) => {
-	const price = getPriceFromPlan(comparison.plan);
-	const isCustom = comparison.plan.key === "enterprise";
-	const displayPrice = price.monthly;
-	const hasChanges = comparison.quotaChanges.length > 0 || comparison.featureChanges.length > 0;
+const PlanChangeCard = ({ plan, mode, currentEntitlements, isNewerVersion, isSwitching, units, onSwitch }) => {
+	const isCustom = isCustomPlan(plan);
+	const priceLabel = formatPlanPrice(plan);
+	const ramp = formatPhaseRampSummary(plan);
+	const entitlementChanges = useMemo(() => {
+		const steadyPhase = plan.phases.at(-1);
+		const changes = comparePlanEntitlements(currentEntitlements, steadyPhase ? categorizeRateCards(steadyPhase.rateCards, {
+			currency: plan.currency,
+			units,
+			planBillingCadence: plan.billingCadence
+		}) : {
+			quotas: [],
+			features: []
+		});
+		return [...changes.filter((c) => c.change !== "removed"), ...changes.filter((c) => c.change === "removed")];
+	}, [
+		plan,
+		currentEntitlements,
+		units
+	]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "border rounded-lg p-4",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-center justify-between mb-3",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex items-baseline gap-2 flex-wrap",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-3 mb-2",
 				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ jsx("h4", {
-						className: "font-semibold text-foreground",
-						children: comparison.plan.name
-					}), comparison.isNewerVersion && /* @__PURE__ */ jsx(Badge, {
-						variant: "outline",
-						className: "rounded-full border-primary/30 bg-primary/10 text-primary font-medium",
-						children: "New version"
+					className: "flex items-baseline gap-2 flex-wrap",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx("h4", {
+							className: "font-semibold text-foreground",
+							children: plan.name
+						}), isNewerVersion && /* @__PURE__ */ jsx(Badge, {
+							variant: "outline",
+							className: "rounded-full border-primary/30 bg-primary/10 text-primary font-medium",
+							children: "New version"
+						})]
+					}), isCustom ? /* @__PURE__ */ jsx("span", {
+						className: "text-primary font-medium",
+						children: "Custom"
+					}) : /* @__PURE__ */ jsx(PlanPriceTag, {
+						label: priceLabel,
+						currency: plan.currency,
+						billingCadence: plan.billingCadence
 					})]
-				}), isCustom ? /* @__PURE__ */ jsx("span", {
-					className: "text-primary font-medium",
-					children: "Custom"
-				}) : displayPrice === 0 ? /* @__PURE__ */ jsx("span", {
-					className: "text-primary font-medium",
-					children: "Free"
-				}) : /* @__PURE__ */ jsxs("span", {
-					className: "text-primary font-medium text-lg",
-					children: [
-						formatPrice(displayPrice, comparison.plan.currency),
-						"/",
-						formatDuration(comparison.plan.billingCadence)
-					]
+				}), isCustom ? /* @__PURE__ */ jsx(Button$1, {
+					variant: "default",
+					size: "sm",
+					children: "Contact Sales"
+				}) : /* @__PURE__ */ jsx(Button$1, {
+					variant: mode === "upgrade" ? "default" : "outline",
+					onClick: onSwitch,
+					size: "sm",
+					disabled: isSwitching,
+					children: MODE_LABEL[mode]
 				})]
-			}), isCustom ? /* @__PURE__ */ jsx(Button$1, {
-				variant: "default",
-				size: "sm",
-				children: "Contact Sales"
-			}) : /* @__PURE__ */ jsx(Button$1, {
-				variant: mode === "upgrade" ? "default" : "outline",
-				onClick: () => onRequestChange({
-					subscriptionId,
-					plan: comparison.plan,
-					mode
-				}),
-				size: "sm",
-				disabled: isSwitching,
-				children: modeLabelMap[mode]
-			})]
-		}), hasChanges && /* @__PURE__ */ jsxs("div", {
-			className: "space-y-1.5",
-			children: [comparison.quotaChanges.map((quota) => /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2 text-sm",
-				children: [
-					/* @__PURE__ */ jsx(ChangeIndicator, { change: quota.change }),
-					/* @__PURE__ */ jsxs("span", {
-						className: "font-medium",
-						children: [quota.name, ":"]
-					}),
-					quota.change === "same" ? /* @__PURE__ */ jsxs("span", {
-						className: "text-muted-foreground",
-						children: [
-							(quota.newValue ?? quota.currentValue)?.toLocaleString(),
-							"/",
-							quota.period
-						]
-					}) : quota.change === "added" ? /* @__PURE__ */ jsx("span", {
-						className: "text-green-600",
-						children: "Now included"
-					}) : quota.change === "removed" ? /* @__PURE__ */ jsx("span", {
-						className: "text-destructive",
-						children: "No longer included"
-					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-						/* @__PURE__ */ jsxs("span", {
-							className: "text-muted-foreground",
-							children: [
-								quota.currentValue?.toLocaleString(),
-								"/",
-								quota.period
-							]
-						}),
-						/* @__PURE__ */ jsx("span", {
-							className: "text-muted-foreground",
-							children: "→"
-						}),
-						/* @__PURE__ */ jsxs("span", {
-							className: cn("font-medium", quota.change === "increase" ? "text-primary" : "text-amber-600"),
-							children: [
-								quota.newValue?.toLocaleString(),
-								"/",
-								quota.period
-							]
-						})
-					] })
-				]
-			}, quota.key)), comparison.featureChanges.map((feature) => /* @__PURE__ */ jsx("div", {
-				className: "flex items-center gap-2 text-sm",
-				children: feature.change === "same" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-green-600 shrink-0" }), /* @__PURE__ */ jsxs("span", {
-					className: "text-muted-foreground",
-					children: [feature.name, typeof feature.newValue === "string" ? `: ${feature.newValue}` : typeof feature.currentValue === "string" ? `: ${feature.currentValue}` : ""]
-				})] }) : feature.change === "added" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					/* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-green-600 shrink-0" }),
-					/* @__PURE__ */ jsx("span", {
-						className: "text-muted-foreground font-medium",
-						children: feature.name
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "text-green-600",
-						children: "—"
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "text-green-600",
-						children: "Now included"
-					})
-				] }) : feature.change === "removed" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					/* @__PURE__ */ jsx(XIcon, { className: "w-4 h-4 text-destructive shrink-0" }),
-					/* @__PURE__ */ jsx("span", {
-						className: "font-medium",
-						children: feature.name
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "text-destructive",
-						children: "—"
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "text-destructive",
-						children: "No longer included"
-					})
-				] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					/* @__PURE__ */ jsx(ChangeIndicator, { change: feature.change }),
-					/* @__PURE__ */ jsxs("span", {
-						className: "",
-						children: [feature.name, ":"]
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "text-muted-foreground",
-						children: typeof feature.currentValue === "string" ? feature.currentValue : "Included"
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "text-muted-foreground",
-						children: "→"
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: cn(feature.change === "upgraded" ? "text-green-600" : "text-destructive"),
-						children: typeof feature.newValue === "string" ? feature.newValue : "Included"
-					})
-				] })
-			}, feature.key))]
-		})]
+			}),
+			ramp && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground mb-2",
+				children: ramp
+			}),
+			entitlementChanges.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "space-y-1.5",
+				children: entitlementChanges.map((change) => /* @__PURE__ */ jsx(ChangeRow, { change }, `${change.kind}:${change.key}`))
+			})
+		]
 	});
 };
+//#endregion
+//#region src/pages/subscriptions/SwitchPlanModal.tsx
+const isPrivatePlan = (plan) => plan.metadata?.zuplo_private_plan === "true";
+const planVersion = (plan) => plan.version ?? 1;
+const isNewerPlanVersion = (subscribedPlan, target) => target.key === subscribedPlan.key && planVersion(target) > planVersion(subscribedPlan);
+const resolveIsUpgrade = ({ target, targetIndex, subscribedPlan, currentIndex }) => {
+	if (target.key === subscribedPlan.key) return planVersion(target) > planVersion(subscribedPlan);
+	return targetIndex >= currentIndex;
+};
+const isSwitchPlanTarget = (value) => typeof value === "object" && value !== null && "subscriptionId" in value && "plan" in value && "mode" in value;
 const SwitchPlanModal = ({ subscription, children }) => {
 	const [open, setOpen] = useState(false);
 	const { data: plansData } = usePlans();
@@ -1539,6 +1774,27 @@ const SwitchPlanModal = ({ subscription, children }) => {
 		}
 	});
 	const subscribedPlan = subscription.plan;
+	const currentEntitlements = useMemo(() => {
+		const currency = subscription.currency ?? subscribedPlan.currency;
+		const activePhase = getActivePhase(subscription);
+		if (activePhase && (activePhase.items?.length ?? 0) > 0) return categorizeSubscriptionItems(activePhase.items, {
+			currency,
+			units: pricing?.units
+		});
+		const lastPhase = subscribedPlan.phases?.at(-1);
+		return lastPhase ? categorizeRateCards(lastPhase.rateCards, {
+			currency,
+			units: pricing?.units,
+			planBillingCadence: subscribedPlan.billingCadence
+		}) : {
+			quotas: [],
+			features: []
+		};
+	}, [
+		subscription,
+		subscribedPlan,
+		pricing?.units
+	]);
 	const { upgrades, downgrades, privatePlans } = useMemo(() => {
 		const catalogItems = plansData?.items;
 		if (!catalogItems?.length) return {
@@ -1546,13 +1802,12 @@ const SwitchPlanModal = ({ subscription, children }) => {
 			downgrades: [],
 			privatePlans: []
 		};
-		const planForComparison = resolvePlanForComparison(subscribedPlan, catalogItems);
 		const currentIndex = catalogItems.some((p) => p.id === subscribedPlan.id) ? catalogItems.findIndex((p) => p.id === subscribedPlan.id) : -1;
 		const subscribedIsPrivate = isPrivatePlan(subscribedPlan);
-		const allComparisons = catalogItems.flatMap((plan, targetIndex) => {
+		const entries = catalogItems.flatMap((plan, targetIndex) => {
 			if (plan.id === subscribedPlan.id) return [];
 			return [{
-				...comparePlans(planForComparison, plan, currentIndex, targetIndex, pricing?.units),
+				plan,
 				isUpgrade: resolveIsUpgrade({
 					target: plan,
 					targetIndex,
@@ -1563,20 +1818,32 @@ const SwitchPlanModal = ({ subscription, children }) => {
 			}];
 		});
 		if (subscribedIsPrivate) return {
-			upgrades: allComparisons.filter((c) => !isPrivatePlan(c.plan)),
+			upgrades: entries.filter((c) => !isPrivatePlan(c.plan)),
 			downgrades: [],
-			privatePlans: allComparisons.filter((c) => isPrivatePlan(c.plan))
+			privatePlans: entries.filter((c) => isPrivatePlan(c.plan))
 		};
 		return {
-			upgrades: allComparisons.filter((c) => c.isUpgrade && !isPrivatePlan(c.plan)),
-			downgrades: allComparisons.filter((c) => !c.isUpgrade && !isPrivatePlan(c.plan)),
-			privatePlans: allComparisons.filter((c) => isPrivatePlan(c.plan))
+			upgrades: entries.filter((c) => c.isUpgrade && !isPrivatePlan(c.plan)),
+			downgrades: entries.filter((c) => !c.isUpgrade && !isPrivatePlan(c.plan)),
+			privatePlans: entries.filter((c) => isPrivatePlan(c.plan))
 		};
-	}, [
-		plansData?.items,
-		subscribedPlan,
-		pricing?.units
-	]);
+	}, [plansData?.items, subscribedPlan]);
+	const renderCards = (entries, mode) => /* @__PURE__ */ jsx("div", {
+		className: "space-y-3",
+		children: entries.map(({ plan, isNewerVersion }) => /* @__PURE__ */ jsx(PlanChangeCard, {
+			plan,
+			mode,
+			currentEntitlements,
+			isNewerVersion,
+			isSwitching: switchPlanMutation.isPending,
+			units: pricing?.units,
+			onSwitch: () => switchPlanMutation.mutate({
+				subscriptionId: subscription.id,
+				plan,
+				mode
+			})
+		}, plan.id))
+	});
 	return /* @__PURE__ */ jsxs(Dialog, {
 		open,
 		onOpenChange: setOpen,
@@ -1605,12 +1872,9 @@ const SwitchPlanModal = ({ subscription, children }) => {
 							children: switchPlanMutation.error.message
 						})
 					}),
-					/* @__PURE__ */ jsx(Item, {
-						variant: "outline",
-						children: /* @__PURE__ */ jsxs(ItemContent, { children: [/* @__PURE__ */ jsx(ItemTitle, { children: "Current Plan" }), /* @__PURE__ */ jsx(ItemDescription, {
-							className: "text-lg font-bold",
-							children: subscribedPlan.name
-						})] })
+					/* @__PURE__ */ jsx(CurrentPlanBaseline, {
+						subscription,
+						units: pricing?.units
 					}),
 					upgrades.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
 						className: "flex items-center justify-between mb-3",
@@ -1624,16 +1888,7 @@ const SwitchPlanModal = ({ subscription, children }) => {
 							className: "text-sm text-muted-foreground",
 							children: "Takes effect immediately"
 						})]
-					}), /* @__PURE__ */ jsx("div", {
-						className: "space-y-3",
-						children: upgrades.map((comparison) => /* @__PURE__ */ jsx(PlanComparisonItem, {
-							comparison,
-							subscriptionId: subscription.id,
-							mode: "upgrade",
-							onRequestChange: (target) => switchPlanMutation.mutate(target),
-							isSwitching: switchPlanMutation.isPending
-						}, comparison.plan.id))
-					})] }),
+					}), renderCards(upgrades, "upgrade")] }),
 					downgrades.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
 						className: "flex items-center justify-between mb-3",
 						children: [/* @__PURE__ */ jsxs("div", {
@@ -1644,18 +1899,9 @@ const SwitchPlanModal = ({ subscription, children }) => {
 							})]
 						}), /* @__PURE__ */ jsx("span", {
 							className: "text-sm text-muted-foreground",
-							children: "Takes effect next billing cycle"
+							children: "Takes effect at your next billing cycle"
 						})]
-					}), /* @__PURE__ */ jsx("div", {
-						className: "space-y-3",
-						children: downgrades.map((comparison) => /* @__PURE__ */ jsx(PlanComparisonItem, {
-							comparison,
-							subscriptionId: subscription.id,
-							mode: "downgrade",
-							onRequestChange: (target) => switchPlanMutation.mutate(target),
-							isSwitching: switchPlanMutation.isPending
-						}, comparison.plan.id))
-					})] }),
+					}), renderCards(downgrades, "downgrade")] }),
 					privatePlans.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
 						className: "flex items-center justify-between mb-3",
 						children: [/* @__PURE__ */ jsxs("div", {
@@ -1668,16 +1914,7 @@ const SwitchPlanModal = ({ subscription, children }) => {
 							className: "text-sm text-muted-foreground",
 							children: "Takes effect immediately"
 						})]
-					}), /* @__PURE__ */ jsx("div", {
-						className: "space-y-3",
-						children: privatePlans.map((comparison) => /* @__PURE__ */ jsx(PlanComparisonItem, {
-							comparison,
-							subscriptionId: subscription.id,
-							mode: "private",
-							onRequestChange: (target) => switchPlanMutation.mutate(target),
-							isSwitching: switchPlanMutation.isPending
-						}, comparison.plan.id))
-					})] })
+					}), renderCards(privatePlans, "private")] })
 				]
 			})]
 		}) })]
@@ -1733,7 +1970,7 @@ const ManageSubscription = ({ subscription, planName }) => {
 									variant: "outline",
 									size: "sm",
 									asChild: true,
-									children: /* @__PURE__ */ jsxs(Link, {
+									children: /* @__PURE__ */ jsxs(Link$1, {
 										to: "/pricing",
 										children: [/* @__PURE__ */ jsx(RefreshCcw, { className: "w-4 h-4 mr-2" }), "New subscription"]
 									})
@@ -1755,7 +1992,7 @@ const ManageSubscription = ({ subscription, planName }) => {
 									asChild: true,
 									size: "sm",
 									variant: "secondary",
-									children: /* @__PURE__ */ jsx(Link, {
+									children: /* @__PURE__ */ jsx(Link$1, {
 										to: "/manage-payment",
 										children: /* @__PURE__ */ jsxs("div", {
 											className: "flex items-center gap-2",
@@ -1780,140 +2017,14 @@ const ManageSubscription = ({ subscription, planName }) => {
 //#region src/pages/subscriptions/SubscriptionPlanDetails.tsx
 const detailLabelClassName = "text-sm font-semibold tracking-wide mb-1";
 const sectionLabelClassName = "text-base font-semibold tracking-wide mb-3 mt-2";
-const formatDate$1 = (dateString) => {
-	return new Date(dateString).toLocaleDateString("en-US", {
-		month: "short",
-		day: "numeric",
-		year: "numeric"
-	});
-};
-const formatDateRange = (from, to) => `${formatDate$1(from)} – ${formatDate$1(to)}`;
-const formatNumber = (value) => value.toLocaleString("en-US");
-const getTierPricesFromItem = (item, currency, units) => {
-	if (item.price?.type !== "tiered") return;
-	const tiers = item.price.tiers;
-	if (!tiers || tiers.length <= 1) return;
-	const unitLabel = units?.[item.key] ?? units?.[item.featureKey] ?? "unit";
-	return formatTieredPriceBreakdown({
-		tiers: tiers.map((t) => ({
-			upToAmount: t.upToAmount,
-			unitPriceAmount: t.unitPrice?.amount,
-			flatPriceAmount: t.flatPrice?.amount
-		})),
-		currency,
-		unitLabel,
-		includedLabel: "Included"
-	});
-};
-const hasPricedFirstTier = (item) => {
-	const firstTier = item.price?.tiers?.[0];
-	if (!firstTier) return false;
-	const flat = parseFloat(firstTier.flatPrice?.amount ?? "0");
-	const unit = parseFloat(firstTier.unitPrice?.amount ?? "0");
-	return flat > 0 || unit > 0;
-};
-const getEntitlementsFromItems = (items, currency, units, fallbackBillingCadence) => {
-	const features = [];
-	for (const item of items) {
-		const entitlement = item.included?.entitlement;
-		if (!entitlement) continue;
-		if (entitlement.type === "metered" && entitlement.issueAfterReset != null) {
-			const cadence = entitlement.usagePeriod?.intervalISO ?? item.billingCadence ?? fallbackBillingCadence;
-			const tierPrices = getTierPricesFromItem(item, currency, units);
-			const suppressLimit = hasPricedFirstTier(item) && !!tierPrices && tierPrices.length > 0;
-			features.push({
-				entitlementType: "metered",
-				key: item.featureKey ?? item.key,
-				name: item.name ?? item.featureKey ?? item.key,
-				limit: suppressLimit ? void 0 : entitlement.issueAfterReset,
-				period: suppressLimit ? void 0 : cadence ? formatDuration(cadence) : "month",
-				tierPrices
-			});
-			continue;
-		}
-		if (entitlement.type === "boolean") {
-			features.push({
-				entitlementType: "boolean",
-				key: item.featureKey ?? item.key,
-				name: item.name ?? item.featureKey ?? item.key
-			});
-			continue;
-		}
-		if (entitlement.type === "static") {
-			const base = {
-				key: item.featureKey ?? item.key,
-				name: item.name ?? item.featureKey ?? item.key
-			};
-			if (!entitlement.config) {
-				features.push({
-					entitlementType: "static",
-					...base
-				});
-				continue;
-			}
-			features.push({
-				entitlementType: "static",
-				...base,
-				value: formatStaticEntitlementConfig(entitlement.config)
-			});
-		}
-	}
-	return { features };
-};
-const getPhaseRows = (opts) => {
-	const { subscription, currency, units } = opts;
-	const phases = [...subscription.phases].sort((a, b) => new Date(a.activeFrom).getTime() - new Date(b.activeFrom).getTime());
-	const phaseGroups = [];
-	for (const phase of phases) {
-		const { features } = getEntitlementsFromItems(phase.items ?? [], currency, units, subscription.billingCadence);
-		const rows = [];
-		for (const f of features) rows.push({
-			key: f.key,
-			name: f.name,
-			entitlementType: f.entitlementType,
-			limit: f.entitlementType === "metered" ? f.limit : void 0,
-			period: f.entitlementType === "metered" ? f.period : void 0,
-			tierPrices: f.entitlementType === "metered" ? f.tierPrices : void 0,
-			value: f.entitlementType === "static" ? f.value : void 0,
-			phaseId: phase.id,
-			activeFrom: phase.activeFrom,
-			activeTo: phase.activeTo
-		});
-		if (rows.length > 0) phaseGroups.push({
-			id: phase.id,
-			name: phase.name,
-			activeFrom: phase.activeFrom,
-			activeTo: phase.activeTo,
-			rows
-		});
-	}
-	return { phaseGroups };
-};
-const formatActiveRange = (activeFrom, activeTo) => {
-	if (!activeTo) return `Starts ${formatDate$1(activeFrom)}`;
-	return `${formatDate$1(activeFrom)} – ${formatDate$1(activeTo)}`;
-};
+const formatDateTimeRange = (from, to) => `${formatDateTime(from)} – ${formatDateTime(to)}`;
 const SubscriptionPlanDetails = ({ subscription }) => {
 	const { pricing } = useMonetizationConfig();
 	const plan = subscription.plan;
-	const currency = subscription.currency ?? plan.currency;
-	const priceInfo = getPriceFromPlan(plan);
+	const view = getSubscriptionPlanView(subscription, { units: pricing?.units });
+	const { priceLabel } = view;
 	const taxLegendSentence = planHasDefaultTaxBehavior(plan) ? subscriptionTaxLegendSentence(plan.defaultTaxConfig?.behavior ?? "") : void 0;
-	const primaryPrice = priceInfo.monthly === 0 && priceInfo.yearly === 0 ? /* @__PURE__ */ jsx("span", {
-		className: "text-primary font-medium",
-		children: "Free"
-	}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-		className: "text-primary font-medium text-lg",
-		children: formatPrice(priceInfo.monthly, currency)
-	}), /* @__PURE__ */ jsxs("span", {
-		className: "text-muted-foreground",
-		children: [" / ", formatDuration(plan.billingCadence)]
-	})] });
-	const { phaseGroups } = getPhaseRows({
-		subscription,
-		currency,
-		units: pricing?.units
-	});
+	const hasEntitlements = hasSubscriptionEntitlements(view);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-4",
 		children: [/* @__PURE__ */ jsx(Heading, {
@@ -1939,14 +2050,19 @@ const SubscriptionPlanDetails = ({ subscription }) => {
 						children: "Active since"
 					}), /* @__PURE__ */ jsx("dd", {
 						className: "text-foreground",
-						children: formatDate$1(subscription.activeFrom)
+						children: formatDateTime(subscription.activeFrom)
 					})] }),
 					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", {
 						className: detailLabelClassName,
 						children: "Price"
 					}), /* @__PURE__ */ jsxs("dd", { children: [/* @__PURE__ */ jsx("div", {
 						className: "flex flex-wrap items-baseline gap-1",
-						children: primaryPrice
+						children: /* @__PURE__ */ jsx(PlanPriceTag, {
+							label: priceLabel,
+							currency: view.currency,
+							billingCadence: view.billingCadence,
+							description: true
+						})
 					}), taxLegendSentence ? /* @__PURE__ */ jsx("p", {
 						className: "text-xs text-muted-foreground mt-1",
 						children: taxLegendSentence
@@ -1956,53 +2072,20 @@ const SubscriptionPlanDetails = ({ subscription }) => {
 						children: "Current period"
 					}), /* @__PURE__ */ jsx("dd", {
 						className: "text-foreground",
-						children: subscription.alignment?.currentAlignedBillingPeriod ? formatDateRange(subscription.alignment.currentAlignedBillingPeriod.from, subscription.alignment.currentAlignedBillingPeriod.to) : "—"
+						children: subscription.alignment?.currentAlignedBillingPeriod ? formatDateTimeRange(subscription.alignment.currentAlignedBillingPeriod.from, subscription.alignment.currentAlignedBillingPeriod.to) : "—"
 					})] })
 				]
-			}), phaseGroups.length > 0 ? /* @__PURE__ */ jsx("div", {
-				className: "space-y-5 pt-2 border-t border-border",
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "space-y-2",
-					children: [/* @__PURE__ */ jsx("p", {
-						className: cn(sectionLabelClassName, "mb-5"),
-						children: "Entitlements"
-					}), /* @__PURE__ */ jsx("div", {
-						className: "space-y-5",
-						children: phaseGroups.map((phase) => /* @__PURE__ */ jsxs("div", {
-							className: "space-y-3",
-							children: [phaseGroups.length > 1 ? /* @__PURE__ */ jsxs("div", {
-								className: "text-sm font-medium text-card-foreground",
-								children: [phase.name, /* @__PURE__ */ jsxs("span", {
-									className: "text-muted-foreground font-normal",
-									children: [
-										" ",
-										"—",
-										" ",
-										formatActiveRange(phase.activeFrom, phase.activeTo)
-									]
-								})]
-							}) : null, /* @__PURE__ */ jsx("ul", {
-								className: "space-y-3",
-								children: phase.rows.map((row) => /* @__PURE__ */ jsx("li", {
-									className: "text-sm",
-									children: /* @__PURE__ */ jsxs("div", {
-										className: "flex flex-col gap-1",
-										children: [/* @__PURE__ */ jsxs("div", {
-											className: "text-foreground font-medium",
-											children: [row.name, row.entitlementType === "static" && row.value !== void 0 ? `: ${row.value}` : ""]
-										}), /* @__PURE__ */ jsx("div", {
-											className: "text-muted-foreground",
-											children: row.entitlementType === "metered" && (row.limit != null || row.tierPrices && row.tierPrices.length > 0) ? /* @__PURE__ */ jsxs(Fragment$1, { children: [row.limit != null && (!row.tierPrices || row.tierPrices.length === 0) ? /* @__PURE__ */ jsxs(Fragment$1, { children: [formatNumber(row.limit), row.period ? ` / ${row.period}` : ""] }) : null, row.tierPrices && row.tierPrices.length > 0 ? /* @__PURE__ */ jsx("ul", {
-												className: "text-xs space-y-0.5",
-												children: row.tierPrices.map((line) => /* @__PURE__ */ jsx("li", { children: line }, line))
-											}) : null] }) : row.entitlementType === "static" && row.value !== void 0 ? null : "Included"
-										})]
-									})
-								}, `${row.key}:${row.phaseId}`))
-							})]
-						}, phase.id))
-					})]
-				})
+			}), hasEntitlements ? /* @__PURE__ */ jsxs("div", {
+				className: "space-y-2 pt-2 border-t border-border",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: sectionLabelClassName,
+					children: "What's included"
+				}), /* @__PURE__ */ jsx(SubscriptionEntitlements, {
+					view,
+					currency: view.currency,
+					billingCadence: view.billingCadence,
+					units: pricing?.units
+				})]
 			}) : null]
 		})] })]
 	});
@@ -2070,11 +2153,7 @@ const UsageItem = ({ meter, item, subscription, featureKey }) => {
 					}) })
 				]
 			}),
-			/* @__PURE__ */ jsxs(CardTitle, { children: [
-				item?.name ?? featureKey,
-				" ",
-				item?.price?.amount
-			] })
+			/* @__PURE__ */ jsx(CardTitle, { children: item?.name ?? featureKey })
 		] }), /* @__PURE__ */ jsxs(CardContent, {
 			className: "space-y-2",
 			children: [
@@ -2142,7 +2221,7 @@ const Usage = ({ usage, isFetching, currentItems, subscription, isPendingFirstPa
 						variant: "destructive",
 						size: "xs",
 						asChild: true,
-						children: /* @__PURE__ */ jsx(Link, {
+						children: /* @__PURE__ */ jsx(Link$1, {
 							to: "/manage-payment",
 							target: "_blank",
 							children: "Manage billing"
@@ -2254,7 +2333,7 @@ const SubscriptionsList = ({ subscriptions, activeSubscriptionId }) => {
 };
 const SubscriptionItem = ({ subscription, isSelected, isExpired }) => {
 	const willExpire = subscription.activeTo && new Date(subscription.activeTo) > /* @__PURE__ */ new Date();
-	return /* @__PURE__ */ jsx(Link$1, {
+	return /* @__PURE__ */ jsx(Link, {
 		to: `/subscriptions?subscriptionId=${encodeURIComponent(subscription.id)}`,
 		children: /* @__PURE__ */ jsx(Item, {
 			size: "sm",