@zuplo/zudoku-plugin-monetization 0.0.42 → 0.0.44

package/dist/index.mjs

@@ -1,6 +1,6 @@
-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 { D as formatDurationAdjective, E as formatDuration, O as formatDurationInterval, T as formatPrice, _ as formatPlanPrice, a as planHasDefaultTaxBehavior, b as sameEntitlementSet, c as getPlanPriceSchedule, d as PlanEntitlements, f as PlanPhaseHeader, l as PlanPriceTag, o as subscriptionTaxLegendSentence, p as EntitlementList, r as isCustomPlan, t as PricingTable, u as PlanPriceSchedule, w as formatMinorCurrencyAmount, x as categorizeRateCards, y as comparePlanEntitlements } from "./PricingTable-WkG2n7V-.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 { AlertTriangleIcon, ArrowDownIcon, ArrowLeftRightIcon, ArrowUpIcon, CalendarIcon, CheckCheckIcon, CheckIcon, ChevronDownIcon, CircleSlashIcon, ClockIcon, CreditCardIcon, Grid2x2XIcon, InfoIcon, Loader2Icon, LockIcon, MoreVerticalIcon, RefreshCcw, RefreshCwIcon, Settings, ShieldIcon, StarsIcon, Trash2Icon, XIcon } from "zudoku/icons";
 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";
@@ -9,6 +9,7 @@ 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 { Collapsible, CollapsibleContent, CollapsibleTrigger } from "zudoku/ui/Collapsible";
 import { Separator } from "zudoku/ui/Separator";
 import { Button as Button$1 } from "zudoku/ui/Button";
 import { DismissibleAlert, DismissibleAlertAction } from "zudoku/ui/DismissibleAlert";
@@ -256,18 +257,34 @@ const formatBillingCycle = (duration) => {
 * 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.
+* followed by the plan's included entitlements. Multi-phase ramp plans render
+* a full-width per-phase price schedule beneath the title instead of the
+* single right-column price.
 *
 * 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`).
+*
+* Pass `collapsibleDetails` to hide the "What's included" section behind a
+* collapsed-by-default toggle — used on the plan-change confirmation page where
+* the current and new plan are stacked and the user opens each to compare. Pass
+* `label` to render a small eyebrow above the name (e.g. "Current plan").
 */
-const PlanSummaryCard = ({ plan, descriptionFallback, taxAmount, taxLabel, taxInclusive, units, entitlementsItemClassName }) => {
+const PlanSummaryCard = ({ plan, label, descriptionFallback, taxAmount, taxLabel, taxInclusive, units, entitlementsItemClassName, collapsibleDetails = false }) => {
 	const priceLabel = formatPlanPrice(plan);
+	const schedule = getPlanPriceSchedule(plan);
 	const billingCycle = plan.billingCadence ? formatDuration(plan.billingCadence) : null;
+	const taxLine = 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}`
+	});
+	const billedLine = billingCycle && /* @__PURE__ */ jsxs("div", {
+		className: "text-sm text-muted-foreground font-normal",
+		children: ["Billed ", formatBillingCycle(billingCycle)]
+	});
 	return /* @__PURE__ */ jsxs(Card, {
 		className: "bg-muted/50",
-		children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
+		children: [/* @__PURE__ */ jsxs(CardHeader, { children: [/* @__PURE__ */ jsxs(CardTitle, {
 			className: "flex justify-between items-start",
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-3",
@@ -276,43 +293,62 @@ const PlanSummaryCard = ({ plan, descriptionFallback, taxAmount, taxLabel, taxIn
 					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
-					})]
+					children: [
+						label && /* @__PURE__ */ jsx("span", {
+							className: "text-xs font-medium text-muted-foreground uppercase tracking-wide",
+							children: label
+						}),
+						/* @__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", {
+			}), !schedule && /* @__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)]
-				})] })]
+				}), priceLabel.type === "priced" && /* @__PURE__ */ jsxs(Fragment$1, { children: [taxLine, billedLine] })]
 			})]
-		}) }), /* @__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, {
+		}), schedule && /* @__PURE__ */ jsxs("div", {
+			className: "mt-3 font-normal",
+			children: [/* @__PURE__ */ jsx(PlanPriceSchedule, {
+				schedule,
+				currency: plan.currency,
+				billingCadence: plan.billingCadence
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "text-right",
+				children: [taxLine, billedLine]
+			})]
+		})] }), /* @__PURE__ */ jsxs(CardContent, { children: [/* @__PURE__ */ jsx(Separator, {}), collapsibleDetails ? /* @__PURE__ */ jsxs(Collapsible, { children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+			className: "group flex w-full items-center justify-between text-sm font-medium mt-3",
+			children: ["Plan details", /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })]
+		}), /* @__PURE__ */ jsx(CollapsibleContent, {
+			className: "mt-3",
+			children: /* @__PURE__ */ jsx(PlanEntitlements, {
 				phases: plan.phases,
 				currency: plan.currency,
 				billingCadence: plan.billingCadence,
 				units,
 				itemClassName: entitlementsItemClassName
 			})
-		] })]
+		})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__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
@@ -787,76 +823,121 @@ const getSubscriptionPlanView = (subscription, options) => {
 };
 /** 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
+const phaseStatus = (phase, now) => {
+	if (phase.activeTo && new Date(phase.activeTo).getTime() < now) return "past";
+	if (new Date(phase.activeFrom).getTime() > now) return "future";
+	return "current";
+};
 /**
-* 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.
+* Rate cards for one subscription phase: its own provisioned items (the
+* authoritative quotas/fees), falling back to the catalog plan phase with the
+* same `key` when a phase (typically a future one) hasn't been provisioned yet.
 */
-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
-	});
+const phaseRateCards = (plan, phase) => phase.items.length > 0 ? subscriptionItemsToRateCards(phase.items) : plan.phases?.find((p) => p.key === phase.key)?.rateCards ?? [];
+const phasesByActiveFrom = (subscription) => [...subscription.phases].sort((a, b) => new Date(a.activeFrom).getTime() - new Date(b.activeFrom).getTime());
+/**
+* A clean ISO-8601 duration between two instants, preferring whole calendar
+* units (years/months/weeks) over raw days so it formats the same way catalog
+* plan durations do (e.g. `P1W` → "week", `P3M` → "3 months") rather than as
+* "7 days" / "90 days". Returns `undefined` for a non-positive span.
+*/
+const isoDurationBetween = (from, to) => {
+	const a = new Date(from);
+	const b = new Date(to);
+	const ms = b.getTime() - a.getTime();
+	if (!(ms > 0)) return void 0;
+	let months = (b.getFullYear() - a.getFullYear()) * 12 + (b.getMonth() - a.getMonth());
+	const anchor = new Date(a);
+	anchor.setMonth(a.getMonth() + months);
+	if (anchor.getTime() > b.getTime()) months -= 1;
+	const exact = new Date(a);
+	exact.setMonth(a.getMonth() + months);
+	if (months >= 1 && exact.getTime() === b.getTime()) return months % 12 === 0 ? `P${months / 12}Y` : `P${months}M`;
+	const days = Math.round(ms / 864e5);
+	if (days >= 7 && days % 7 === 0) return `P${days / 7}W`;
+	return `P${days}D`;
 };
-//#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}.
+* The intended length of a subscription phase: the matching catalog plan
+* phase's authored `duration` when available (the cleanest source), otherwise
+* computed from the phase's own `activeFrom`/`activeTo`. `undefined` for an
+* open-ended (final) phase — the price schedule labels that one "After that".
 */
-const CurrentPlanBaseline = ({ subscription, units }) => {
+const phaseDuration = (plan, phase) => {
+	const catalog = plan.phases?.find((p) => p.key === phase.key)?.duration;
+	if (catalog) return catalog;
+	if (!phase.activeTo) return void 0;
+	return isoDurationBetween(phase.activeFrom, phase.activeTo);
+};
+/**
+* Resolve EVERY phase of a subscription (not just the active one) to a
+* {@link SubscriptionPhaseView}, ordered by `activeFrom` and tagged
+* past/current/future. Generalizes {@link getSubscriptionPlanView}: each phase's
+* price and entitlements come from its own provisioned items (the authoritative
+* source), falling back to the catalog plan phase with the same `key` when a
+* phase (typically a future one) hasn't been provisioned yet. Powers the
+* subscription details page's current + upcoming + previous phase timeline.
+*/
+const getSubscriptionPhaseViews = (subscription, options) => {
 	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
-			})
-		})]
+	const currency = subscription.currency ?? plan.currency;
+	const billingCadence = subscription.billingCadence ?? plan.billingCadence;
+	const now = Date.now();
+	return phasesByActiveFrom(subscription).map((phase) => {
+		const rateCards = phaseRateCards(plan, phase);
+		return {
+			id: phase.id,
+			name: phase.name,
+			status: phaseStatus(phase, now),
+			activeFrom: phase.activeFrom,
+			activeTo: phase.activeTo,
+			priceLabel: formatPlanPrice({
+				...plan,
+				billingCadence,
+				phases: [{
+					key: phase.key,
+					name: phase.name,
+					rateCards
+				}]
+			}),
+			entitlements: categorizeRateCards(rateCards, {
+				currency,
+				units: options?.units,
+				planBillingCadence: billingCadence
+			}),
+			billingCadence,
+			currency
+		};
 	});
 };
+/**
+* Build a catalog-shaped {@link Plan} from a subscription's *own* current and
+* future phases (past phases dropped), so the plan-change confirmation page can
+* render the current subscription with the exact same pricing-table card
+* ({@link formatPlanPrice} / `getPlanPriceSchedule` / `PlanEntitlements`) used
+* for the new plan. Each phase's rate cards come from its provisioned items
+* (the authoritative source) — the embedded `subscription.plan` snapshot is
+* unreliable here (it can arrive with `phases: []`), so we never read its
+* phases for pricing. Each phase's `duration` is carried so the price schedule
+* labels read "First 3 months" / "After that" exactly like the new plan, rather
+* than falling back to the phase name (see {@link phaseDuration}).
+*/
+const subscriptionToCurrentPlan = (subscription) => {
+	const plan = subscription.plan;
+	const now = Date.now();
+	const phases = phasesByActiveFrom(subscription).filter((p) => !(p.activeTo && new Date(p.activeTo).getTime() < now)).map((phase) => ({
+		key: phase.key,
+		name: phase.name,
+		duration: phaseDuration(plan, phase),
+		rateCards: phaseRateCards(plan, phase)
+	}));
+	return {
+		...plan,
+		currency: subscription.currency ?? plan.currency,
+		billingCadence: subscription.billingCadence ?? plan.billingCadence,
+		phases
+	};
+};
 //#endregion
 //#region src/pages/SubscriptionChangeConfirmPage.tsx
 const SubscriptionChangeConfirmPage = () => {
@@ -896,20 +977,27 @@ const SubscriptionChangeConfirmPage = () => {
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "space-y-3",
 			children: [
-				currentSubscription && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CurrentPlanBaseline, {
-					subscription: currentSubscription,
-					units: pricing?.units
+				currentSubscription && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PlanSummaryCard, {
+					plan: subscriptionToCurrentPlan(currentSubscription),
+					label: "Current plan",
+					descriptionFallback: "",
+					taxLabel: "",
+					taxInclusive: false,
+					units: pricing?.units,
+					collapsibleDetails: true
 				}), /* @__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",
+					label: "New plan",
+					descriptionFallback: "",
 					taxAmount,
 					taxLabel,
 					taxInclusive,
-					units: pricing?.units
+					units: pricing?.units,
+					collapsibleDetails: true
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "rounded-lg bg-muted/50 p-3 text-sm space-y-1",
@@ -1431,128 +1519,74 @@ const RestoreSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionI
 	});
 };
 //#endregion
-//#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 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");
+//#region src/pages/components/SubscriptionEntitlements.tsx
 /**
-* 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.
+* 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 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 (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
-		});
-	}
-	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)
+const SubscriptionEntitlements = ({ view, currency, billingCadence, units, itemClassName }) => {
+	if (view.usingItems) {
+		const { quotas, features } = view.entitlements;
+		return /* @__PURE__ */ jsx(EntitlementList, {
+			quotas,
+			features,
+			itemClassName
 		});
 	}
-	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;
+	if (view.fallbackPhases.length === 0) return null;
+	return /* @__PURE__ */ jsx(PlanEntitlements, {
+		phases: view.fallbackPhases,
+		currency,
+		billingCadence,
+		units,
+		itemClassName
 	});
 };
 //#endregion
-//#region src/utils/formatPhaseRampSummary.ts
-const durationWithCount = (iso) => {
-	const text = formatDuration(iso);
-	return /^\d/.test(text) ? text : `1 ${text}`;
-};
-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";
-};
+//#region src/pages/components/CurrentPlanBaseline.tsx
 /**
-* 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).
+* 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 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)}`;
+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/components/PlanChangeCard.tsx
@@ -1665,18 +1699,28 @@ const ChangeRow = ({ change }) => {
 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, {
+	const schedule = isCustom ? void 0 : getPlanPriceSchedule(plan);
+	const phaseChangeGroups = useMemo(() => {
+		const diff = (target) => {
+			const changes = comparePlanEntitlements(currentEntitlements, target);
+			return [...changes.filter((c) => c.change !== "removed"), ...changes.filter((c) => c.change === "removed")];
+		};
+		const sets = plan.phases.map((phase) => categorizeRateCards(phase.rateCards, {
 			currency: plan.currency,
 			units,
 			planBillingCadence: plan.billingCadence
-		}) : {
+		}));
+		return (plan.phases.length <= 1 || sets.every((set) => sameEntitlementSet(set, sets[0])) ? [{ changes: diff(sets.at(-1) ?? {
 			quotas: [],
 			features: []
-		});
-		return [...changes.filter((c) => c.change !== "removed"), ...changes.filter((c) => c.change === "removed")];
+		}) }] : plan.phases.flatMap((phase, idx) => {
+			const set = sets[idx];
+			if (set.quotas.length === 0 && set.features.length === 0) return [];
+			return [{
+				phase,
+				changes: diff(set)
+			}];
+		})).filter((group) => group.changes.length > 0);
 	}, [
 		plan,
 		currentEntitlements,
@@ -1702,7 +1746,7 @@ const PlanChangeCard = ({ plan, mode, currentEntitlements, isNewerVersion, isSwi
 					}), isCustom ? /* @__PURE__ */ jsx("span", {
 						className: "text-primary font-medium",
 						children: "Custom"
-					}) : /* @__PURE__ */ jsx(PlanPriceTag, {
+					}) : !schedule && /* @__PURE__ */ jsx(PlanPriceTag, {
 						label: priceLabel,
 						currency: plan.currency,
 						billingCadence: plan.billingCadence
@@ -1719,13 +1763,22 @@ const PlanChangeCard = ({ plan, mode, currentEntitlements, isNewerVersion, isSwi
 					children: MODE_LABEL[mode]
 				})]
 			}),
-			ramp && /* @__PURE__ */ jsx("p", {
-				className: "text-sm text-muted-foreground mb-2",
-				children: ramp
+			schedule && /* @__PURE__ */ jsx(PlanPriceSchedule, {
+				schedule,
+				currency: plan.currency,
+				billingCadence: plan.billingCadence,
+				className: "mb-2"
 			}),
-			entitlementChanges.length > 0 && /* @__PURE__ */ jsx("div", {
-				className: "space-y-1.5",
-				children: entitlementChanges.map((change) => /* @__PURE__ */ jsx(ChangeRow, { change }, `${change.kind}:${change.key}`))
+			phaseChangeGroups.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "space-y-3",
+				children: phaseChangeGroups.map((group, idx) => /* @__PURE__ */ jsxs("div", {
+					className: "space-y-1.5",
+					children: [group.phase && /* @__PURE__ */ jsx(PlanPhaseHeader, {
+						phase: group.phase,
+						currency: plan.currency,
+						billingCadence: plan.billingCadence
+					}), group.changes.map((change) => /* @__PURE__ */ jsx(ChangeRow, { change }, `${change.kind}:${change.key}`))]
+				}, group.phase?.key ?? String(idx)))
 			})
 		]
 	});
@@ -2014,6 +2067,75 @@ const ManageSubscription = ({ subscription, planName }) => {
 	] });
 };
 //#endregion
+//#region src/pages/components/SubscriptionPhases.tsx
+const phaseDateLabel = (view) => {
+	if (view.status === "current") return "Current phase";
+	if (view.status === "future") return `Starts ${formatDateTime(view.activeFrom)}`;
+	return view.activeTo ? `${formatDateTime(view.activeFrom)} – ${formatDateTime(view.activeTo)}` : formatDateTime(view.activeFrom);
+};
+/**
+* One phase of a subscription: a header with the phase name, its timing
+* sub-label, and the phase's own price, followed by that phase's included
+* quotas/features. The header always renders (even when the phase has no
+* entitlements) so the price/timing is never hidden.
+*/
+const SubscriptionPhaseSection = ({ view }) => {
+	const dateLabel = phaseDateLabel(view);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-baseline justify-between gap-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "text-sm font-medium text-card-foreground",
+				children: [view.name, dateLabel && /* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground font-normal",
+					children: [
+						" ",
+						"· ",
+						dateLabel
+					]
+				})]
+			}), /* @__PURE__ */ jsx(PlanPriceTag, {
+				label: view.priceLabel,
+				currency: view.currency,
+				billingCadence: view.billingCadence
+			})]
+		}), /* @__PURE__ */ jsx(EntitlementList, {
+			quotas: view.entitlements.quotas,
+			features: view.entitlements.features
+		})]
+	});
+};
+/**
+* The subscription's future phases (each with its start date, price, and
+* entitlements), shown after the current phase on the details page and on the
+* Switch Plan baseline. Renders nothing when there are no upcoming phases.
+*/
+const UpcomingPhases = ({ subscription, units }) => {
+	const future = getSubscriptionPhaseViews(subscription, { units }).filter((v) => v.status === "future");
+	if (future.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "space-y-4",
+		children: future.map((view) => /* @__PURE__ */ jsx(SubscriptionPhaseSection, { view }, view.id))
+	});
+};
+/**
+* The subscription's already-ended phases, collapsed by default, each labelled
+* with the exact dates it ran. Lets users review what they previously paid for
+* without cluttering the page. Renders nothing when there are no past phases.
+*/
+const PreviousPhases = ({ subscription, units }) => {
+	const past = getSubscriptionPhaseViews(subscription, { units }).filter((v) => v.status === "past");
+	if (past.length === 0) return null;
+	return /* @__PURE__ */ jsxs(Collapsible, { children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+		className: "group flex w-full items-center justify-between text-sm font-medium",
+		children: ["Previous phases", /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })]
+	}), /* @__PURE__ */ jsx(CollapsibleContent, {
+		className: "mt-3 space-y-4",
+		children: past.map((view) => /* @__PURE__ */ jsx(SubscriptionPhaseSection, { view }, view.id))
+	})] });
+};
+//#endregion
 //#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";
@@ -2025,6 +2147,9 @@ const SubscriptionPlanDetails = ({ subscription }) => {
 	const { priceLabel } = view;
 	const taxLegendSentence = planHasDefaultTaxBehavior(plan) ? subscriptionTaxLegendSentence(plan.defaultTaxConfig?.behavior ?? "") : void 0;
 	const hasEntitlements = hasSubscriptionEntitlements(view);
+	const phaseViews = getSubscriptionPhaseViews(subscription, { units: pricing?.units });
+	const hasUpcomingPhases = phaseViews.some((p) => p.status === "future");
+	const hasPreviousPhases = phaseViews.some((p) => p.status === "past");
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-4",
 		children: [/* @__PURE__ */ jsx(Heading, {
@@ -2035,58 +2160,78 @@ const SubscriptionPlanDetails = ({ subscription }) => {
 			children: plan.name
 		}), plan.description ? /* @__PURE__ */ jsx(CardDescription, { children: plan.description }) : null] }), /* @__PURE__ */ jsxs(CardContent, {
 			className: "space-y-6",
-			children: [/* @__PURE__ */ jsxs("dl", {
-				className: "grid gap-4 sm:grid-cols-2 text-sm",
-				children: [
-					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", {
-						className: detailLabelClassName,
-						children: "Subscription ID"
-					}), /* @__PURE__ */ jsx("dd", {
-						className: "text-foreground font-mono text-xs break-all",
-						children: subscription.id
-					})] }),
-					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", {
-						className: detailLabelClassName,
-						children: "Active since"
-					}), /* @__PURE__ */ jsx("dd", {
-						className: "text-foreground",
-						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: /* @__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
-					}) : null] })] }),
-					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", {
-						className: detailLabelClassName,
-						children: "Current period"
-					}), /* @__PURE__ */ jsx("dd", {
-						className: "text-foreground",
-						children: subscription.alignment?.currentAlignedBillingPeriod ? formatDateTimeRange(subscription.alignment.currentAlignedBillingPeriod.from, subscription.alignment.currentAlignedBillingPeriod.to) : "—"
-					})] })
-				]
-			}), 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]
+			children: [
+				/* @__PURE__ */ jsxs("dl", {
+					className: "grid gap-4 sm:grid-cols-2 text-sm",
+					children: [
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", {
+							className: detailLabelClassName,
+							children: "Subscription ID"
+						}), /* @__PURE__ */ jsx("dd", {
+							className: "text-foreground font-mono text-xs break-all",
+							children: subscription.id
+						})] }),
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", {
+							className: detailLabelClassName,
+							children: "Active since"
+						}), /* @__PURE__ */ jsx("dd", {
+							className: "text-foreground",
+							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: /* @__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
+						}) : null] })] }),
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", {
+							className: detailLabelClassName,
+							children: "Current period"
+						}), /* @__PURE__ */ jsx("dd", {
+							className: "text-foreground",
+							children: subscription.alignment?.currentAlignedBillingPeriod ? formatDateTimeRange(subscription.alignment.currentAlignedBillingPeriod.from, subscription.alignment.currentAlignedBillingPeriod.to) : "—"
+						})] })
+					]
+				}),
+				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,
+				hasUpcomingPhases ? /* @__PURE__ */ jsxs("div", {
+					className: "space-y-3 pt-2 border-t border-border",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: sectionLabelClassName,
+						children: "Upcoming phases"
+					}), /* @__PURE__ */ jsx(UpcomingPhases, {
+						subscription,
+						units: pricing?.units
+					})]
+				}) : null,
+				hasPreviousPhases ? /* @__PURE__ */ jsx("div", {
+					className: "pt-2 border-t border-border",
+					children: /* @__PURE__ */ jsx(PreviousPhases, {
+						subscription,
+						units: pricing?.units
+					})
+				}) : null
+			]
 		})] })]
 	});
 };