@zuplo/zudoku-plugin-monetization 0.0.43 → 0.0.45

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, BadgePercentIcon, CalendarIcon, CheckCheckIcon, CheckIcon, ChevronDownIcon, CircleSlashIcon, ClockIcon, CreditCardIcon, Grid2x2XIcon, HistoryIcon, 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",
@@ -961,6 +1034,24 @@ const useSubscriptions = () => {
 	});
 };
 //#endregion
+//#region src/hooks/usePendingCredits.ts
+/**
+* Fetch the operator-applied usage credits for a subscription, via the Zuplo
+* metering `.../pending-credits` endpoint. Failures are swallowed (`retry: false`,
+* `throwOnError: false`) so the usage page never breaks when credits are
+* unavailable — the credit banner simply isn't shown.
+*/
+const usePendingCredits = (deploymentName, subscriptionId) => {
+	const zudoku = useZudoku();
+	return useQuery({
+		queryKey: [`/v3/zudoku-metering/${deploymentName}/subscriptions/${subscriptionId}/pending-credits`],
+		meta: { context: zudoku },
+		refetchOnWindowFocus: true,
+		retry: false,
+		throwOnError: false
+	});
+};
+//#endregion
 //#region src/pages/subscriptions/ConfirmDeleteKeyAlert.tsx
 const ConfirmDeleteKeyAlert = ({ children, onDelete }) => {
 	return /* @__PURE__ */ jsxs(AlertDialog, { children: [/* @__PURE__ */ jsx(AlertDialogTrigger, {
@@ -1446,6 +1537,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,17 +2085,90 @@ 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";
 const formatDateTimeRange = (from, to) => `${formatDateTime(from)} – ${formatDateTime(to)}`;
 const SubscriptionPlanDetails = ({ subscription }) => {
 	const { pricing } = useMonetizationConfig();
+	const hasEnded = !!subscription.activeTo && new Date(subscription.activeTo).getTime() < Date.now();
 	const plan = subscription.plan;
 	const view = getSubscriptionPlanView(subscription, { units: pricing?.units });
 	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,104 +2179,261 @@ 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: hasEnded ? "Ended" : "Current period"
+						}), /* @__PURE__ */ jsx("dd", {
+							className: "text-foreground",
+							children: hasEnded ? formatDateTime(subscription.activeTo ?? "") : 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
+			]
 		})] })]
 	});
 };
 //#endregion
+//#region src/utils/priceIncludedUnits.ts
+const partAmount = (part) => {
+	if (!part || part.amount === void 0) return 0;
+	const amount = parseFloat(part.amount);
+	return Number.isFinite(amount) ? amount : Number.POSITIVE_INFINITY;
+};
+const priceIncludedUnits = (price) => {
+	if (!price) return 0;
+	if (price.type === "flat" || price.type === "package" || price.type === "dynamic") return 0;
+	if (price.tiers?.length) {
+		if ((price.mode ?? "graduated") !== "graduated") return 0;
+		const sorted = [...price.tiers].sort((a, b) => {
+			if (a.upToAmount === void 0) return 1;
+			if (b.upToAmount === void 0) return -1;
+			return Number(a.upToAmount) - Number(b.upToAmount);
+		});
+		let free = 0;
+		for (const [index, tier] of sorted.entries()) {
+			if (partAmount(tier.unitPrice) > 0) break;
+			if (index > 0 && partAmount(tier.flatPrice) > 0) break;
+			if (tier.upToAmount === void 0) return Number.POSITIVE_INFINITY;
+			const bound = Number(tier.upToAmount);
+			if (!Number.isFinite(bound) || bound <= free) break;
+			free = bound;
+		}
+		return free;
+	}
+	if (price.type === "unit") {
+		const amount = parseFloat(price.amount ?? "");
+		return Number.isFinite(amount) && amount === 0 ? Number.POSITIVE_INFINITY : 0;
+	}
+	return 0;
+};
+//#endregion
+//#region src/pages/subscriptions/deriveUsageView.ts
+const formatAmount = (amount) => {
+	const value = parseFloat(amount ?? "");
+	return Number.isFinite(value) ? `$${value.toFixed(2)}` : void 0;
+};
+const pluralizeUnit = (unitName) => unitName.endsWith("s") ? unitName : `${unitName}s`;
+/** The label for what additional usage costs, when the shape has one number. */
+const rateLabelFor = (price, unitName) => {
+	if (!price) return void 0;
+	if (price.type === "unit") {
+		const amount = formatAmount(price.amount);
+		return amount ? `${amount}/${unitName}` : void 0;
+	}
+	if (price.type === "tiered") {
+		const amount = formatAmount((price.tiers?.find((t) => !t.upToAmount) ?? price.tiers?.at(-1))?.unitPrice?.amount);
+		return amount ? `${amount}/${unitName}` : void 0;
+	}
+	if (price.type === "package") {
+		const amount = formatAmount(price.amount);
+		if (!amount) return void 0;
+		const size = parseFloat(price.quantityPerUnit ?? "");
+		return Number.isFinite(size) && size > 0 ? `${amount} per ${size.toLocaleString()} ${pluralizeUnit(unitName)}` : amount;
+	}
+};
+const NO_CAP = "There is no usage cap.";
+const deriveUsageView = (meter, item, unitName = "unit") => {
+	const quota = meter.balance + meter.usage - meter.overage;
+	const isSoftLimit = item?.included?.entitlement?.isSoftLimit ?? true;
+	const rateLabel = rateLabelFor(item?.price, unitName);
+	if (!isSoftLimit) return {
+		kind: "capped",
+		usage: meter.usage,
+		quota,
+		remaining: meter.balance,
+		atLimit: meter.usage >= quota,
+		rateLabel
+	};
+	if (!item) return {
+		kind: "meteredGeneric",
+		usage: meter.usage,
+		quota: quota > 0 ? quota : void 0,
+		caption: "Usage is billed per your plan's pricing."
+	};
+	if (!item.price || item.price.type === "flat") return {
+		kind: "meteredGeneric",
+		usage: meter.usage,
+		quota: quota > 0 ? quota : void 0,
+		caption: `Usage doesn't change your bill. ${NO_CAP}`
+	};
+	const isGraduated = item.price.type === "tiered" && (item.price.mode ?? "graduated") === "graduated";
+	const derivable = item.price.type === "unit" || isGraduated;
+	const freeUnits = priceIncludedUnits(item.price);
+	if (derivable) {
+		if (freeUnits === 0) return {
+			kind: "payAsYouGo",
+			usage: meter.usage,
+			caption: `Pay as you go — every ${unitName} is billed; there is no usage cap.`,
+			rateLabel
+		};
+		if (freeUnits === Number.POSITIVE_INFINITY) return {
+			kind: "meteredGeneric",
+			usage: meter.usage,
+			quota: quota > 0 ? quota : void 0,
+			caption: `Included with your plan. ${NO_CAP}`,
+			rateLabel
+		};
+		if (quota > 0) return {
+			kind: "included",
+			usage: meter.usage,
+			included: quota,
+			remaining: meter.balance,
+			overage: meter.overage,
+			rateLabel
+		};
+		return {
+			kind: "meteredGeneric",
+			usage: meter.usage,
+			caption: `The first ${freeUnits.toLocaleString()} ${pluralizeUnit(unitName)} are included; additional usage is billed. ${NO_CAP}`,
+			rateLabel
+		};
+	}
+	return {
+		kind: "meteredGeneric",
+		usage: meter.usage,
+		quota: quota > 0 ? quota : void 0,
+		caption: `Usage is billed per your plan's pricing. ${NO_CAP}`,
+		rateLabel
+	};
+};
+//#endregion
 //#region src/pages/subscriptions/Usage.tsx
 const isMeteredEntitlement = (entitlement) => {
 	return "balance" in entitlement;
 };
-const UsageItem = ({ meter, item, subscription, featureKey }) => {
+const UsageItem = ({ meter, item, subscription, featureKey, pendingCredit }) => {
+	const { pricing } = useMonetizationConfig();
 	const cadence = item?.billingCadence ?? subscription?.billingCadence;
 	const billingPeriod = cadence ? formatDurationAdjective(cadence) : "monthly";
-	const isSoftLimit = item?.included?.entitlement?.isSoftLimit ?? true;
-	const rate = (item?.price?.tiers?.find((t) => !t.upToAmount) ?? item?.price?.tiers?.at(-1))?.unitPrice?.amount;
-	const hasOverage = meter.overage > 0;
-	const limit = meter.balance + meter.usage - meter.overage;
-	const isAtLimit = !isSoftLimit && meter.usage >= limit;
-	const dangerZone = hasOverage || isAtLimit;
+	const view = deriveUsageView(meter, item, pricing?.units?.[item?.key ?? ""] ?? pricing?.units?.[featureKey] ?? "unit");
+	const atHardLimit = view.kind === "capped" && view.atLimit;
+	const overIncluded = view.kind === "included" && view.overage > 0;
+	const upgradeAction = (variant) => subscription && /* @__PURE__ */ jsx(AlertAction, { children: /* @__PURE__ */ jsx(SwitchPlanModal, {
+		subscription,
+		children: /* @__PURE__ */ jsxs(Button, {
+			variant,
+			size: "xs",
+			children: [/* @__PURE__ */ jsx(ArrowUpIcon, {}), "Upgrade"]
+		})
+	}) });
 	return /* @__PURE__ */ jsxs(Card, {
-		className: cn(dangerZone && "border-destructive bg-destructive/5"),
+		className: cn(atHardLimit && "border-destructive bg-destructive/5"),
 		children: [/* @__PURE__ */ jsxs(CardHeader, { children: [
-			hasOverage && isSoftLimit && /* @__PURE__ */ jsxs(Alert, {
-				variant: "destructive",
+			pendingCredit && /* @__PURE__ */ jsxs(Alert, {
 				className: "mb-4",
 				children: [
-					/* @__PURE__ */ jsx(AlertTriangleIcon, { className: "size-4 text-red-600 shrink-0" }),
+					/* @__PURE__ */ jsx(BadgePercentIcon, { className: "size-4 text-green-600 shrink-0" }),
+					/* @__PURE__ */ jsx(AlertTitle, { children: "Usage credit applied" }),
+					/* @__PURE__ */ jsxs(AlertDescription, { children: [
+						"A credit of ",
+						pendingCredit.units.toLocaleString(),
+						" ",
+						pendingCredit.units === 1 ? "unit" : "units",
+						" applies to this billing period and will be deducted from your next invoice automatically."
+					] })
+				]
+			}),
+			overIncluded && /* @__PURE__ */ jsxs(Alert, {
+				variant: "warning",
+				className: "mb-4",
+				children: [
+					/* @__PURE__ */ jsx(AlertTriangleIcon, { className: "size-4 shrink-0" }),
 					/* @__PURE__ */ jsxs(AlertTitle, { children: [
-						"You've exceeded your ",
+						"You've used your included ",
 						billingPeriod,
-						" quota"
+						" usage"
 					] }),
 					/* @__PURE__ */ jsxs(AlertDescription, { children: [
-						"Additional usage is being charged at the overage rate",
-						rate ? ` ($${Number(rate).toFixed(2)}/call)` : "",
-						". Upgrade to a higher plan for more usage."
+						"Additional usage is billed",
+						view.rateLabel ? ` at ${view.rateLabel}` : "",
+						". Upgrade to a higher plan for more included usage."
 					] }),
-					subscription && /* @__PURE__ */ jsx(AlertAction, { children: /* @__PURE__ */ jsx(SwitchPlanModal, {
-						subscription,
-						children: /* @__PURE__ */ jsxs(Button, {
-							variant: "destructive",
-							size: "xs",
-							children: [/* @__PURE__ */ jsx(ArrowUpIcon, {}), "Upgrade"]
-						})
-					}) })
+					upgradeAction("outline")
 				]
 			}),
-			isAtLimit && !isSoftLimit && /* @__PURE__ */ jsxs(Alert, {
+			atHardLimit && /* @__PURE__ */ jsxs(Alert, {
 				variant: "destructive",
 				className: "mb-4",
 				children: [
@@ -2053,58 +2444,79 @@ const UsageItem = ({ meter, item, subscription, featureKey }) => {
 						" limit"
 					] }),
 					/* @__PURE__ */ jsx(AlertDescription, { children: "Requests beyond your quota are blocked. Upgrade to a higher plan for more usage." }),
-					subscription && /* @__PURE__ */ jsx(AlertAction, { children: /* @__PURE__ */ jsx(SwitchPlanModal, {
-						subscription,
-						children: /* @__PURE__ */ jsxs(Button, {
-							variant: "destructive",
-							size: "xs",
-							children: [/* @__PURE__ */ jsx(ArrowUpIcon, {}), "Upgrade"]
-						})
-					}) })
+					upgradeAction("destructive")
 				]
 			}),
 			/* @__PURE__ */ jsx(CardTitle, { children: item?.name ?? featureKey })
-		] }), /* @__PURE__ */ jsxs(CardContent, {
+		] }), /* @__PURE__ */ jsx(CardContent, {
 			className: "space-y-2",
-			children: [
+			children: view.kind === "capped" || view.kind === "included" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center justify-between text-sm",
 					children: [/* @__PURE__ */ jsx("div", {
 						className: "flex flex-col gap-2 mb-2",
 						children: /* @__PURE__ */ jsxs("span", {
-							className: cn(dangerZone && "text-red-600 font-medium"),
+							className: cn(atHardLimit && "text-red-600 font-medium"),
 							children: [
-								meter.usage.toLocaleString(),
+								view.usage.toLocaleString(),
 								" used",
-								hasOverage && isSoftLimit && /* @__PURE__ */ jsxs("span", {
+								view.kind === "included" && view.overage > 0 && /* @__PURE__ */ jsxs("span", {
 									className: "ml-1 text-xs",
 									children: [
 										"(+",
-										meter.overage.toLocaleString(),
+										view.overage.toLocaleString(),
 										" overage)"
 									]
 								})
 							]
 						})
-					}), /* @__PURE__ */ jsxs("span", {
+					}), /* @__PURE__ */ jsx("span", {
 						className: "text-foreground font-medium",
-						children: [limit.toLocaleString(), " limit"]
+						children: view.kind === "capped" ? `${view.quota.toLocaleString()} limit` : `${view.included.toLocaleString()} included`
 					})]
 				}),
 				/* @__PURE__ */ jsx(Progress, {
-					value: Math.min(100, limit > 0 ? meter.usage / limit * 100 : 100),
-					className: cn("mb-3 h-2", dangerZone && "bg-destructive")
+					value: Math.min(100, (view.kind === "capped" ? view.quota : view.included) > 0 ? view.usage / (view.kind === "capped" ? view.quota : view.included) * 100 : 100),
+					className: cn("mb-3 h-2", atHardLimit && "bg-destructive")
 				}),
 				/* @__PURE__ */ jsxs("p", {
 					className: "text-xs text-muted-foreground",
-					children: [meter.balance.toLocaleString(), " remaining this billing period"]
+					children: [
+						view.remaining.toLocaleString(),
+						view.kind === "included" ? " included" : "",
+						" remaining this billing period"
+					]
 				})
-			]
+			] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between text-sm",
+				children: [/* @__PURE__ */ jsxs("span", { children: [view.usage.toLocaleString(), " used this billing period"] }), view.kind === "meteredGeneric" && view.quota !== void 0 ? /* @__PURE__ */ jsxs("span", {
+					className: "text-foreground font-medium",
+					children: [view.quota.toLocaleString(), " quota"]
+				}) : view.rateLabel && /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: view.rateLabel
+				})]
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-xs text-muted-foreground",
+				children: view.caption
+			})] })
 		})]
 	});
 };
-const Usage = ({ usage, isFetching, currentItems, subscription, isPendingFirstPayment }) => {
+const Usage = ({ usage, isFetching, currentItems, subscription, isPendingFirstPayment, pendingCredits }) => {
 	const hasUsage = Object.values(usage.entitlements).some((value) => isMeteredEntitlement(value));
+	if (!!subscription?.activeTo && new Date(subscription.activeTo).getTime() < Date.now()) return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [/* @__PURE__ */ jsx(Heading, {
+			level: 3,
+			children: "Usage"
+		}), /* @__PURE__ */ jsxs(Alert, { children: [
+			/* @__PURE__ */ jsx(HistoryIcon, { className: "size-4 shrink-0" }),
+			/* @__PURE__ */ jsx(AlertTitle, { children: "This subscription has ended" }),
+			/* @__PURE__ */ jsx(AlertDescription, { children: "Usage history isn't available yet." })
+		] })]
+	});
+	const creditByFeature = new Map((pendingCredits ?? []).map((credit) => [credit.featureKey, credit]));
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-4",
 		children: [
@@ -2143,7 +2555,8 @@ const Usage = ({ usage, isFetching, currentItems, subscription, isPendingFirstPa
 				featureKey: key,
 				meter: { ...value },
 				subscription,
-				item: currentItems?.find((item) => item.featureKey === key)
+				item: currentItems?.find((item) => item.featureKey === key),
+				pendingCredit: creditByFeature.get(key)
 			}, key) : []) : !isFetching && !subscription?.annotations?.["subscription.previous.id"] ? /* @__PURE__ */ jsxs(Alert, {
 				variant: "warning",
 				children: [
@@ -2166,6 +2579,7 @@ const ActiveSubscription = ({ subscription, deploymentName }) => {
 		refetchOnWindowFocus: true,
 		meta: { context: zudoku }
 	});
+	const pendingCreditsQuery = usePendingCredits(deploymentName, subscription.id);
 	const isPendingFirstPayment = usageQuery.data.paymentStatus.isFirstPayment === true && usageQuery.data.paymentStatus.status !== "paid" && usageQuery.data.paymentStatus.status !== "not_required";
 	const activePhase = getActivePhase(subscription);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
@@ -2184,7 +2598,8 @@ const ActiveSubscription = ({ subscription, deploymentName }) => {
 			usage: usageQuery.data,
 			isFetching: usageQuery.isFetching,
 			subscription,
-			isPendingFirstPayment
+			isPendingFirstPayment,
+			pendingCredits: pendingCreditsQuery.data?.pendingCredits
 		}),
 		subscription?.consumer?.apiKeys && /* @__PURE__ */ jsx(ApiKeysList, {
 			isPendingFirstPayment,
@@ -2331,6 +2746,7 @@ const zuploMonetizationPlugin = createPlugin((options = {}) => ({
 		if (context.getAuthState().isAuthenticated) queryClient.prefetchQuery(subscriptionsQuery(context));
 	},
 	getIdentities: async (context) => {
+		if (!context.getAuthState().isAuthenticated) return [];
 		return (await queryClient.fetchQuery(subscriptionsQuery(context))).items.flatMap((sub) => sub.status !== "active" ? [] : sub.consumer.apiKeys.flatMap((apiKey) => apiKey.expiresOn && new Date(apiKey.expiresOn) < /* @__PURE__ */ new Date() ? [] : {
 			label: `${sub.name} (****${apiKey.key.slice(-5)})`,
 			id: apiKey.id,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuplo/zudoku-plugin-monetization",
-  "version": "0.0.43",
+  "version": "0.0.45",
   "repository": {
     "type": "git",
     "url": "https://github.com/zuplo/zudoku",
@@ -33,11 +33,11 @@
     "@testing-library/react": "16.3.2",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "happy-dom": "20.9.0",
+    "happy-dom": "20.10.2",
     "react": "19.2.5",
     "react-dom": "19.2.5",
     "tsdown": "0.22.0",
-    "zudoku": "0.79.1"
+    "zudoku": "0.81.0"
   },
   "peerDependencies": {
     "react": ">=19.2.0",