@zuplo/zudoku-plugin-monetization 0.0.43 → 0.0.44

package/dist/index.mjs

@@ -1,6 +1,6 @@
 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";
@@ -263,8 +264,13 @@ const formatBillingCycle = (duration) => {
 * 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;
@@ -287,13 +293,20 @@ 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
+						})
+					]
 				})]
 			}), !schedule && /* @__PURE__ */ jsxs("div", {
 				className: "text-right",
@@ -314,20 +327,28 @@ const PlanSummaryCard = ({ plan, descriptionFallback, taxAmount, taxLabel, taxIn
 				className: "text-right",
 				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, {
+		})] }), /* @__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
@@ -802,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 = () => {
@@ -911,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",
@@ -1446,6 +1519,76 @@ const RestoreSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionI
 	});
 };
 //#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/components/PlanChangeCard.tsx
 const MODE_LABEL = {
 	upgrade: "Upgrade",
@@ -1924,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";
@@ -1935,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, {
@@ -1945,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
+			]
 		})] })]
 	});
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuplo/zudoku-plugin-monetization",
-  "version": "0.0.43",
+  "version": "0.0.44",
   "repository": {
     "type": "git",
     "url": "https://github.com/zuplo/zudoku",