@zuplo/zudoku-plugin-monetization 0.0.41 → 0.0.43

package/dist/{PricingTable-DNop2iX9.mjs → PricingTable-WkG2n7V-.mjs}

@@ -1,6 +1,6 @@
 import { Fragment } from "react";
-import { parse } from "tinyduration";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { parse } from "tinyduration";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 //#region src/utils/formatDuration.ts
@@ -136,6 +136,17 @@ const formatTieredPriceBreakdown = (opts) => {
 	return lines.length > 0 ? lines : void 0;
 };
 //#endregion
+//#region src/utils/tierHasPositivePrice.ts
+/**
+* Whether a price tier charges anything — a non-zero flat or per-unit amount.
+* Amounts are decimal strings and a missing part counts as zero, so this
+* distinguishes a genuinely priced tier from an all-zero ("Included") tier.
+* Shared by the pricing-label path ({@link formatPlanPrice}) and rate-card
+* categorization ({@link categorizeRateCards}) so both decide "is this tier
+* free?" the same way.
+*/
+const tierHasPositivePrice = (tier) => parseFloat(tier.flatPrice?.amount ?? "0") > 0 || parseFloat(tier.unitPrice?.amount ?? "0") > 0;
+//#endregion
 //#region src/utils/categorizeRateCards.ts
 const categorizeRateCards = (rateCards, options) => {
 	const { currency, units, planBillingCadence } = options ?? {};
@@ -152,7 +163,7 @@ const categorizeRateCards = (rateCards, options) => {
 			return "month";
 		};
 		const firstTier = rc.price?.type === "tiered" && rc.price.tiers.length > 0 ? rc.price.tiers[0] : void 0;
-		const firstTierIsPriced = !!firstTier && (parseFloat(firstTier.flatPrice?.amount ?? "0") > 0 || parseFloat(firstTier.unitPrice?.amount ?? "0") > 0);
+		const firstTierIsPriced = !!firstTier && tierHasPositivePrice(firstTier);
 		if (et.type === "metered" && et.issueAfterReset != null && !firstTierIsPriced) {
 			let tierPrices;
 			if (rc.price?.type === "tiered" && rc.price.tiers) tierPrices = formatTieredPriceBreakdown({
@@ -176,7 +187,7 @@ const categorizeRateCards = (rateCards, options) => {
 			const unitLabel = unitLabelFor(rc);
 			if (rc.price.type === "tiered" && rc.price.tiers.length > 0) {
 				const tiers = rc.price.tiers;
-				if (!tiers.some((t) => parseFloat(t.flatPrice?.amount ?? "0") > 0 || parseFloat(t.unitPrice?.amount ?? "0") > 0)) {
+				if (!tiers.some(tierHasPositivePrice)) {
 					features.push({
 						key: rc.featureKey ?? rc.key,
 						name: rc.name
@@ -254,6 +265,216 @@ const categorizeRateCards = (rateCards, options) => {
 	};
 };
 //#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");
+const sameQuota = (a, b) => a.name === b.name && a.limit === b.limit && a.period === b.period && a.isPayg === b.isPayg && a.unitPrice === b.unitPrice && sameTierSchedule(a.tierPrices, b.tierPrices);
+const sameFeature = (a, b) => a.name === b.name && a.value === b.value;
+/**
+* Whether two entitlement sets render identically: the same quota and feature
+* keys, each with identical display fields. Order-insensitive (matched by
+* key), so two phases whose rate cards merely differ in order still compare
+* equal. Used to collapse per-phase entitlement lists that would repeat the
+* exact same rows.
+*/
+const sameEntitlementSet = (a, b) => {
+	if (a.quotas.length !== b.quotas.length || a.features.length !== b.features.length) return false;
+	const bQuotas = new Map(b.quotas.map((q) => [q.key, q]));
+	const bFeatures = new Map(b.features.map((f) => [f.key, f]));
+	return a.quotas.every((q) => {
+		const other = bQuotas.get(q.key);
+		return other !== void 0 && sameQuota(q, other);
+	}) && a.features.every((f) => {
+		const other = bFeatures.get(f.key);
+		return other !== void 0 && sameFeature(f, other);
+	});
+};
+/**
+* Compare two plans' entitlements, matching strictly by feature key (never by
+* display name). Each key yields exactly one change row, so a key that exists
+* on one side and a differently-keyed feature that merely shares a display
+* name can never read as a contradictory "added" + "removed" of the same
+* thing. Labels are disambiguated afterwards when they would collide.
+*/
+const comparePlanEntitlements = (current, target) => {
+	const changes = [];
+	const curQuota = new Map(current.quotas.map((q) => [q.key, q]));
+	const tgtQuota = new Map(target.quotas.map((q) => [q.key, q]));
+	const curFeat = new Map(current.features.map((f) => [f.key, f]));
+	const tgtFeat = new Map(target.features.map((f) => [f.key, f]));
+	for (const key of new Set([...curQuota.keys(), ...tgtQuota.keys()])) {
+		const c = curQuota.get(key);
+		const t = tgtQuota.get(key);
+		if (c && t) {
+			const currentValue = quotaValueLabel(c);
+			const targetValue = quotaValueLabel(t);
+			let change = "same";
+			if (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 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;
+	});
+};
+//#endregion
+//#region src/utils/getPlanPrice.ts
+const sumFlatFeeAmounts = (rateCards) => {
+	let total = 0;
+	for (const rc of rateCards) if (rc.type === "flat_fee" && rc.price && rc.billingCadence !== null) {
+		const amount = Number(rc.price.amount);
+		if (Number.isFinite(amount)) total += amount;
+	}
+	return total;
+};
+/**
+* The plan's headline recurring price: the sum of every recurring `flat_fee`
+* rate-card amount on the plan's steady-state (last) phase, expressed in the
+* plan's own `billingCadence`. One-time fees (`flat_fee` with
+* `billingCadence: null`, e.g. a setup fee) are excluded.
+*
+* This is derived entirely from the plan's rate cards. It deliberately does
+* NOT read any server-provided `monthlyPrice` / `yearlyPrice` and performs no
+* cadence conversion, so it stays correct for any billing cadence — hourly
+* (`PT1H`), weekly, monthly, yearly, etc. Callers pair the returned amount
+* with `formatDuration(plan.billingCadence)` to render e.g. `$2.99/hour`.
+*
+* Returns `0` when there are no phases or no recurring flat fee, which callers
+* render as "Free" (or "Pay as you go" when the plan bills on usage — see
+* {@link formatPlanPrice}).
+*/
+const getPlanPrice = (plan) => {
+	const lastPhase = plan.phases?.at(-1);
+	if (!lastPhase) return 0;
+	return sumFlatFeeAmounts(lastPhase.rateCards ?? []);
+};
+//#endregion
+//#region src/utils/formatPlanPrice.ts
+const isPricedUsageRateCard = (rc) => {
+	if (rc.type !== "usage_based" || !rc.price) return false;
+	const p = rc.price;
+	if (p.type === "unit") return parseFloat(p.amount) > 0;
+	if (p.type === "tiered") return p.tiers.some(tierHasPositivePrice);
+	return true;
+};
+const hasPricedUsageRateCard = (plan) => plan.phases.some((phase) => phase.rateCards.some(isPricedUsageRateCard));
+/**
+* Headline pricing for plan cards. Centralizes the "Pay as you go" detection:
+* plans whose flat-fee total is zero but that bill on usage shouldn't render
+* as "Free" - they're charged per-unit.
+*/
+const formatPlanPrice = (plan) => {
+	if (!plan.phases || plan.phases.length === 0) return { type: "free" };
+	const amount = getPlanPrice(plan);
+	if (amount > 0) return {
+		type: "priced",
+		amount
+	};
+	if (hasPricedUsageRateCard(plan)) return {
+		type: "payg",
+		main: "Pay as you go",
+		sub: "Usage-based pricing"
+	};
+	return { type: "free" };
+};
+//#endregion
+//#region src/utils/getPhasePriceLabel.ts
+/**
+* Headline price for a SINGLE phase, derived only from that phase's own rate
+* cards. Mirrors {@link formatPlanPrice}'s rules, but scoped to the phase:
+* a positive recurring flat-fee total is `priced`; otherwise a priced
+* `usage_based` card in this phase makes it `payg`; otherwise it's `free`.
+*
+* Like {@link getPlanPrice}, one-time fees (`flat_fee` with
+* `billingCadence: null`) and `price: null` rate cards contribute nothing —
+* an intro phase whose fees all have `price: null` derives as `free`.
+*/
+const getPhasePriceLabel = (phase) => {
+	const rateCards = phase.rateCards ?? [];
+	const amount = sumFlatFeeAmounts(rateCards);
+	if (amount > 0) return {
+		type: "priced",
+		amount
+	};
+	if (rateCards.some(isPricedUsageRateCard)) return {
+		type: "payg",
+		main: "Pay as you go",
+		sub: "Usage-based pricing"
+	};
+	return { type: "free" };
+};
+//#endregion
 //#region src/pricing-ui/CheckIcon.tsx
 /**
 * Inline `Check` icon, visually identical to `lucide-react`'s `CheckIcon`
@@ -331,28 +552,23 @@ const QuotaItem = ({ quota, className }) => {
 	});
 };
 //#endregion
-//#region src/pricing-ui/PlanEntitlements.tsx
-const PhaseSection = ({ phase, currency, showName, billingCadence, units, itemClassName }) => {
-	const { quotas, features } = categorizeRateCards(phase.rateCards, {
-		currency,
-		units,
-		planBillingCadence: billingCadence
-	});
+//#region src/pricing-ui/EntitlementList.tsx
+/**
+* Vertical list of a resolved entitlement set — quotas first, then features —
+* with an optional leading `header` (e.g. a phase name) rendered inside the same
+* spacing container. Returns `null` when there are no quotas or features, so
+* callers can gate a section header / border without leaving an empty container
+* behind.
+*
+* Shared by {@link PlanEntitlements} (one list per phase) and the subscription
+* entitlement views so quotas and features always render identically.
+*/
+const EntitlementList = ({ quotas, features, header, itemClassName }) => {
 	if (quotas.length === 0 && features.length === 0) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-2",
 		children: [
-			showName && /* @__PURE__ */ jsxs("div", {
-				className: "text-sm font-medium text-card-foreground",
-				children: [phase.name, phase.duration && /* @__PURE__ */ jsxs("span", {
-					className: "text-muted-foreground font-normal",
-					children: [
-						" ",
-						"— ",
-						formatDuration(phase.duration)
-					]
-				})]
-			}),
+			header,
 			quotas.map((quota) => /* @__PURE__ */ jsx(QuotaItem, {
 				quota,
 				className: itemClassName
@@ -364,101 +580,198 @@ const PhaseSection = ({ phase, currency, showName, billingCadence, units, itemCl
 		]
 	});
 };
+//#endregion
+//#region src/pricing-ui/PlanEntitlements.tsx
+const priceLabelText = (label, currency, billingCadence) => {
+	if (label.type === "payg") return label.main;
+	if (label.type === "free") return "Free";
+	const amount = formatPrice(label.amount, currency);
+	return billingCadence ? `${amount}/${formatDuration(billingCadence)}` : amount;
+};
+/**
+* Section header for one phase of a multi-phase plan: the phase name, its
+* duration, and the phase's own price. Shared by {@link PlanEntitlements} and
+* the plan-change card so per-phase sections read identically everywhere.
+*/
+const PlanPhaseHeader = ({ phase, currency, billingCadence }) => /* @__PURE__ */ jsxs("div", {
+	className: "text-sm font-medium text-card-foreground",
+	children: [
+		phase.name,
+		phase.duration && /* @__PURE__ */ jsxs("span", {
+			className: "text-muted-foreground font-normal",
+			children: [
+				" ",
+				"— ",
+				formatDuration(phase.duration)
+			]
+		}),
+		/* @__PURE__ */ jsxs("span", {
+			className: "text-muted-foreground font-normal",
+			children: [
+				" ",
+				"·",
+				" ",
+				priceLabelText(getPhasePriceLabel(phase), currency, billingCadence)
+			]
+		})
+	]
+});
+const PhaseSection = ({ phase, set, currency, billingCadence, itemClassName }) => /* @__PURE__ */ jsx(EntitlementList, {
+	quotas: set.quotas,
+	features: set.features,
+	itemClassName,
+	header: /* @__PURE__ */ jsx(PlanPhaseHeader, {
+		phase,
+		currency,
+		billingCadence
+	})
+});
+/**
+* A plan's entitlements, phase by phase. Multi-phase plans whose phases all
+* resolve to the same entitlements collapse into a single list (the phases
+* only differ in price, which the price schedule already tells); phases with
+* genuinely different entitlements render as separate sections headed by the
+* phase name, duration, and that phase's own price.
+*/
 const PlanEntitlements = ({ phases, currency, billingCadence, units, itemClassName }) => {
+	const sets = phases.map((phase) => categorizeRateCards(phase.rateCards, {
+		currency,
+		units,
+		planBillingCadence: billingCadence
+	}));
+	if (phases.length <= 1 || sets.every((set) => sameEntitlementSet(set, sets[0]))) {
+		const steady = sets.at(-1);
+		return /* @__PURE__ */ jsx("div", {
+			className: "space-y-4",
+			children: steady && /* @__PURE__ */ jsx(EntitlementList, {
+				quotas: steady.quotas,
+				features: steady.features,
+				itemClassName
+			})
+		});
+	}
 	return /* @__PURE__ */ jsx("div", {
 		className: "space-y-4",
 		children: phases.map((phase, idx) => /* @__PURE__ */ jsx(PhaseSection, {
 			phase,
+			set: sets[idx],
 			currency,
-			showName: phases.length > 1,
 			billingCadence,
-			units,
 			itemClassName
 		}, phase.key ?? String(idx)))
 	});
 };
 //#endregion
-//#region src/utils/getPriceFromPlan.ts
-const sumFlatFeeAmounts = (rateCards) => {
-	let total = 0;
-	for (const rc of rateCards) if (rc.type === "flat_fee" && rc.price) {
-		const amount = Number(rc.price.amount);
-		if (Number.isFinite(amount)) total += amount;
-	}
-	return total;
+//#region src/pricing-ui/PlanPriceSchedule.tsx
+const RowPrice = ({ price, currency, billingCadence, className }) => {
+	if (price.type === "priced") return /* @__PURE__ */ jsxs("span", {
+		className: cn("font-semibold text-card-foreground", className),
+		children: [formatPrice(price.amount, currency), billingCadence && /* @__PURE__ */ jsxs("span", {
+			className: "text-muted-foreground font-normal text-sm",
+			children: ["/", formatDuration(billingCadence)]
+		})]
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("font-semibold text-card-foreground", className),
+		children: price.type === "payg" ? price.main : "Free"
+	});
 };
 /**
-* Convert an ISO 8601 duration to an approximate number of months.
-* Years and months contribute exactly; weeks use 12/52 months/week and
-* days use 1/30 months/day. Sub-day units (hours, minutes, seconds) do
-* not contribute and a duration consisting only of those returns
-* `undefined` because there is no sensible monthly equivalent.
+* Stacked per-phase price rows for a multi-phase plan, replacing the single
+* headline price (which only reflects the steady-state phase): each row pairs
+* a phase label ("First 3 months", "After that") with that phase's own price.
+* Every row gets equal visual weight — the intro price is part of the plan's
+* price, not a footnote.
+*
+* Callers derive the rows via {@link getPlanPriceSchedule} and fall back to
+* the single-price rendering when it returns `undefined`. `size` picks the
+* typographic treatment: `"lg"` for a card's headline area, `"sm"` for
+* compact contexts (plan-change rows, summary cards).
 */
-const cadenceToMonths = (iso) => {
-	try {
-		const d = parse(iso);
-		let months = 0;
-		if (d.years) months += d.years * 12;
-		if (d.months) months += d.months;
-		if (d.weeks) months += d.weeks * (12 / 52);
-		if (d.days) months += d.days * (1 / 30);
-		return months > 0 ? months : void 0;
-	} catch {
-		return;
-	}
-};
+const PlanPriceSchedule = ({ schedule, currency, billingCadence, size = "sm", className }) => /* @__PURE__ */ jsx("div", {
+	className: cn("space-y-1 text-sm", className),
+	children: schedule.map((row) => /* @__PURE__ */ jsxs("div", {
+		className: "flex items-baseline justify-between gap-3",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground",
+			children: row.label
+		}), /* @__PURE__ */ jsx(RowPrice, {
+			price: row.price,
+			currency,
+			billingCadence,
+			className: size === "lg" ? "text-lg" : void 0
+		})]
+	}, row.key))
+});
+//#endregion
+//#region src/pricing-ui/PlanPriceTag.tsx
 /**
-* Derive a (monthly, yearly) headline price from a plan's last phase by
-* summing all `flat_fee` rate-card amounts and converting from the plan's
-* `billingCadence` to a monthly equivalent.
+* Headline price for a plan/subscription: `$X/cadence`, "Pay as you go", or
+* "Free", from a {@link PlanPriceLabel}. Shared by the subscription details
+* page, the Switch Plan baseline, each plan-change card, and the checkout /
+* plan-change summary cards so they all render the price identically.
 *
-* Returns `null` for either field when no value can be derived (no
-* phases, or an unparseable / sub-day cadence). A flat-fee sum of 0
-* returns `{ monthly: 0, yearly: 0 }` (Free).
+* `size` selects the typographic treatment:
+*   - `"inline"` (default): compact, primary-colored text for use beside a name.
+*   - `"lg"`: a large foreground headline for a summary card's price column.
 *
-* Useful for consumers whose source data doesn't already include
-* pre-computed `monthlyPrice` / `yearlyPrice` — pass the result through
-* (or rely on `getPriceFromPlan`'s built-in fallback).
+* Pass `description` to surface the "Usage-based pricing" subline under the
+* "Pay as you go" headline (used where there's room for it).
 */
-const derivePriceFromPlan = (plan) => {
-	const lastPhase = plan.phases?.at(-1);
-	if (!lastPhase) return {
-		monthly: null,
-		yearly: null
-	};
-	const flatPrice = sumFlatFeeAmounts(lastPhase.rateCards ?? []);
-	if (flatPrice === 0) return {
-		monthly: 0,
-		yearly: 0
-	};
-	const months = cadenceToMonths(plan.billingCadence);
-	if (months == null) return {
-		monthly: null,
-		yearly: null
-	};
-	const monthly = flatPrice / months;
-	return {
-		monthly,
-		yearly: monthly * 12
-	};
+const PlanPriceTag = ({ label, currency, billingCadence, description = false, size = "inline" }) => {
+	const isLg = size === "lg";
+	if (label.type === "priced") return /* @__PURE__ */ jsxs("span", {
+		className: isLg ? "text-2xl font-bold" : "text-primary font-medium text-lg",
+		children: [formatPrice(label.amount, currency), billingCadence && /* @__PURE__ */ jsxs("span", {
+			className: "text-muted-foreground font-normal",
+			children: ["/", formatDuration(billingCadence)]
+		})]
+	});
+	if (label.type === "payg") return /* @__PURE__ */ jsxs("span", {
+		className: isLg ? "text-2xl font-bold text-balance" : "text-primary font-medium",
+		children: [label.main, description && /* @__PURE__ */ jsx("span", {
+			className: isLg ? "block text-sm text-muted-foreground font-normal mt-1" : "block text-xs text-muted-foreground font-normal",
+			children: label.sub
+		})]
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: isLg ? "text-2xl text-muted-foreground font-bold" : "text-primary font-medium",
+		children: "Free"
+	});
+};
+//#endregion
+//#region src/utils/getPlanPriceSchedule.ts
+const samePriceLabel = (a, b) => {
+	if (a.type !== b.type) return false;
+	return a.type !== "priced" || b.type !== "priced" || a.amount === b.amount;
+};
+const rowLabel = (phase, index, lastIndex) => {
+	if (index === lastIndex) return "After that";
+	if (!phase.duration) return phase.name;
+	const duration = formatDuration(phase.duration);
+	return index === 0 ? `First ${duration}` : `Next ${duration}`;
 };
 /**
-* Returns the monthly and yearly headline price for a plan. Prefers the
-* server-provided `monthlyPrice` / `yearlyPrice` strings when present;
-* otherwise falls back to {@link derivePriceFromPlan}. Values that can't
-* be resolved are reported as `0`, which the pricing card renders as
-* "Free".
+* A stacked price schedule for a multi-phase plan: one row per phase, each
+* priced from its own rate cards (e.g. "First 3 months — Free" then
+* "After that — $750/month"). This is how an intro/ramp phase's price gets
+* surfaced instead of only the steady-state price from {@link getPlanPrice}.
+*
+* Returns `undefined` when there is nothing to stack — fewer than two phases,
+* or every phase resolving to the same price label (a free trial into a free
+* plan, two identically-priced phases, …) — so callers fall back to the
+* single-headline rendering.
 */
-const getPriceFromPlan = (plan) => {
-	if (plan.monthlyPrice != null || plan.yearlyPrice != null) return {
-		monthly: plan.monthlyPrice != null ? parseFloat(plan.monthlyPrice) : 0,
-		yearly: plan.yearlyPrice != null ? parseFloat(plan.yearlyPrice) : 0
-	};
-	const derived = derivePriceFromPlan(plan);
-	return {
-		monthly: derived.monthly ?? 0,
-		yearly: derived.yearly ?? 0
-	};
+const getPlanPriceSchedule = (plan) => {
+	const phases = plan.phases ?? [];
+	if (phases.length <= 1) return void 0;
+	const prices = phases.map(getPhasePriceLabel);
+	if (prices.every((price) => samePriceLabel(price, prices[0]))) return;
+	return phases.map((phase, index) => ({
+		key: phase.key ?? String(index),
+		label: rowLabel(phase, index, phases.length - 1),
+		price: prices[index]
+	}));
 };
 //#endregion
 //#region src/utils/pricingTaxLegend.ts
@@ -494,42 +807,26 @@ const subscriptionTaxLegendSentence = (behavior) => {
 	}
 };
 //#endregion
-//#region src/utils/formatPlanPrice.ts
-const isPricedUsageRateCard = (rc) => {
-	if (rc.type !== "usage_based" || !rc.price) return false;
-	const p = rc.price;
-	if (p.type === "unit") return parseFloat(p.amount) > 0;
-	if (p.type === "tiered") return p.tiers.some((t) => parseFloat(t.flatPrice?.amount ?? "0") > 0 || parseFloat(t.unitPrice?.amount ?? "0") > 0);
-	return true;
-};
-const hasPricedUsageRateCard = (plan) => plan.phases.some((phase) => phase.rateCards.some(isPricedUsageRateCard));
+//#region src/utils/isCustomPlan.ts
 /**
-* Headline pricing for plan cards. Centralizes the "Pay as you go" detection:
-* plans whose flat-fee total is zero but that bill on usage shouldn't render
-* as "Free" - they're charged per-unit.
+* A plan is "custom" (contact-sales, no self-serve price) when its metadata
+* flags it. Mirrors the convention used by the pricing card
+* (`PricingCard.tsx`), accepting boolean `true` or the string `"true"` — plan
+* metadata values arrive as strings from the API but may be set as booleans in
+* code/fixtures.
 */
-const formatPlanPrice = (plan) => {
-	if (plan.phases.length === 0) return { type: "free" };
-	const { monthly, yearly } = getPriceFromPlan(plan);
-	if (monthly > 0) return {
-		type: "priced",
-		monthly,
-		yearly
-	};
-	if (hasPricedUsageRateCard(plan)) return {
-		type: "payg",
-		main: "Pay as you go",
-		sub: "Usage-based pricing"
-	};
-	return { type: "free" };
+const isCustomPlan = (plan) => {
+	const flag = plan.metadata?.isCustom;
+	return flag === true || flag === "true";
 };
 //#endregion
 //#region src/pricing-ui/PricingCard.tsx
-const PricingCard = ({ plan, isPopular = false, showYearlyPrice = true, units, action, className }) => {
+const PricingCard = ({ plan, isPopular = false, units, action, className }) => {
 	if (plan.phases.length === 0) return null;
 	const priceLabel = formatPlanPrice(plan);
-	const isCustom = plan.metadata?.isCustom === true;
+	const isCustom = isCustomPlan(plan);
 	const billingInterval = formatDuration(plan.billingCadence);
+	const schedule = isCustom ? void 0 : getPlanPriceSchedule(plan);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("relative rounded-lg border p-6 flex flex-col", isPopular && "border-primary border-2", className),
 		children: [
@@ -547,7 +844,12 @@ const PricingCard = ({ plan, isPopular = false, showYearlyPrice = true, units, a
 						className: "text-base font-semibold text-muted-foreground mb-2",
 						children: plan.name
 					}),
-					/* @__PURE__ */ jsx("div", {
+					schedule ? /* @__PURE__ */ jsx(PlanPriceSchedule, {
+						schedule,
+						currency: plan.currency,
+						billingCadence: plan.billingCadence,
+						size: "lg"
+					}) : /* @__PURE__ */ jsx("div", {
 						className: "flex items-baseline gap-1 flex-wrap",
 						children: isCustom ? /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
 							className: "text-3xl font-bold text-card-foreground",
@@ -564,20 +866,13 @@ const PricingCard = ({ plan, isPopular = false, showYearlyPrice = true, units, a
 						})] }) : priceLabel.type === "free" ? /* @__PURE__ */ jsx("span", {
 							className: "text-3xl font-bold text-card-foreground",
 							children: "Free"
-						}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-							/* @__PURE__ */ jsx("span", {
-								className: "text-3xl font-bold text-card-foreground",
-								children: formatPrice(priceLabel.monthly, plan.currency)
-							}),
-							/* @__PURE__ */ jsxs("span", {
-								className: "text-muted-foreground text-sm",
-								children: ["/", billingInterval]
-							}),
-							showYearlyPrice && priceLabel.yearly > 0 && /* @__PURE__ */ jsxs("div", {
-								className: "w-full text-sm text-muted-foreground mt-1",
-								children: [formatPrice(priceLabel.yearly, plan.currency), "/year"]
-							})
-						] })
+						}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+							className: "text-3xl font-bold text-card-foreground",
+							children: formatPrice(priceLabel.amount, plan.currency)
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "text-muted-foreground text-sm",
+							children: ["/", billingInterval]
+						})] })
 					}),
 					plan.paymentRequired === false && /* @__PURE__ */ jsx("div", {
 						className: "text-sm text-muted-foreground mt-1",
@@ -607,7 +902,7 @@ const DefaultEmptyState = () => /* @__PURE__ */ jsxs("div", {
 		children: "Make sure your plans are set up and published."
 	})]
 });
-const PricingTable = ({ plans, showYearlyPrice = true, units, renderAction, renderCard, isPopular = (plan) => plan.metadata?.zuplo_most_popular === "true", emptyState, showTaxLegend = true, className, cardClassName }) => {
+const PricingTable = ({ plans, units, renderAction, renderCard, isPopular = (plan) => plan.metadata?.zuplo_most_popular === "true", emptyState, showTaxLegend = true, className, cardClassName }) => {
 	if (plans.length === 0) return /* @__PURE__ */ jsx(Fragment$1, { children: emptyState ?? /* @__PURE__ */ jsx(DefaultEmptyState, {}) });
 	const firstPlan = plans[0];
 	const taxLegendSentence = showTaxLegend && firstPlan ? taxBehaviorLegendSentence(collectDefaultTaxBehaviors(firstPlan)) : void 0;
@@ -618,7 +913,6 @@ const PricingTable = ({ plans, showYearlyPrice = true, units, renderAction, rend
 			const defaultCard = /* @__PURE__ */ jsx(PricingCard, {
 				plan,
 				isPopular: popular,
-				showYearlyPrice,
 				units,
 				action: renderAction?.(plan, popular),
 				className: cardClassName
@@ -641,4 +935,4 @@ const PricingTable = ({ plans, showYearlyPrice = true, units, renderAction, rend
 	})] });
 };
 //#endregion
-export { formatDuration as _, subscriptionTaxLegendSentence as a, getPriceFromPlan as c, FeatureItem as d, categorizeRateCards as f, formatPrice as g, formatMinorCurrencyAmount as h, planHasDefaultTaxBehavior as i, PlanEntitlements as l, formatStaticEntitlementConfig as m, PricingCard as n, taxBehaviorLegendSentence as o, formatTieredPriceBreakdown as p, collectDefaultTaxBehaviors as r, derivePriceFromPlan as s, PricingTable as t, QuotaItem as u, formatDurationAdjective as v, formatDurationInterval as y };
+export { formatStaticEntitlementConfig as C, formatDurationAdjective as D, formatDuration as E, formatDurationInterval as O, formatTieredPriceBreakdown as S, formatPrice as T, formatPlanPrice as _, planHasDefaultTaxBehavior as a, sameEntitlementSet as b, getPlanPriceSchedule as c, PlanEntitlements as d, PlanPhaseHeader as f, getPhasePriceLabel as g, FeatureItem as h, collectDefaultTaxBehaviors as i, PlanPriceTag as l, QuotaItem as m, PricingCard as n, subscriptionTaxLegendSentence as o, EntitlementList as p, isCustomPlan as r, taxBehaviorLegendSentence as s, PricingTable as t, PlanPriceSchedule as u, getPlanPrice as v, formatMinorCurrencyAmount as w, categorizeRateCards as x, comparePlanEntitlements as y };