@zuplo/zudoku-plugin-monetization 0.0.42 → 0.0.44

package/dist/{PricingTable-BlcXx4-5.mjs → PricingTable-WkG2n7V-.mjs}

@@ -265,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`
@@ -372,43 +582,128 @@ const EntitlementList = ({ quotas, features, header, itemClassName }) => {
 };
 //#endregion
 //#region src/pricing-ui/PlanEntitlements.tsx
-const PhaseSection = ({ phase, currency, showName, billingCadence, units, itemClassName }) => {
-	const { quotas, features } = categorizeRateCards(phase.rateCards, {
+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
-	});
-	return /* @__PURE__ */ jsx(EntitlementList, {
-		quotas,
-		features,
-		itemClassName,
-		header: 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)
-				]
-			})]
-		}) : void 0
-	});
-};
-const PlanEntitlements = ({ phases, currency, billingCadence, units, itemClassName }) => {
+	}));
+	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/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"
+	});
+};
+/**
+* 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 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
 /**
 * Headline price for a plan/subscription: `$X/cadence`, "Pay as you go", or
@@ -445,64 +740,38 @@ const PlanPriceTag = ({ label, currency, billingCadence, description = false, si
 	});
 };
 //#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;
+//#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;
 };
-/**
-* 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 ?? []);
+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}`;
 };
-//#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.
+* 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 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" };
+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
@@ -557,6 +826,7 @@ const PricingCard = ({ plan, isPopular = false, units, action, className }) => {
 	const priceLabel = formatPlanPrice(plan);
 	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: [
@@ -574,7 +844,12 @@ const PricingCard = ({ plan, isPopular = false, units, action, className }) => {
 						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",
@@ -660,4 +935,4 @@ const PricingTable = ({ plans, units, renderAction, renderCard, isPopular = (pla
 	})] });
 };
 //#endregion
-export { formatDurationInterval as S, formatStaticEntitlementConfig as _, planHasDefaultTaxBehavior as a, formatDuration as b, formatPlanPrice as c, PlanEntitlements as d, EntitlementList as f, formatTieredPriceBreakdown as g, categorizeRateCards as h, collectDefaultTaxBehaviors as i, getPlanPrice as l, FeatureItem as m, PricingCard as n, subscriptionTaxLegendSentence as o, QuotaItem as p, isCustomPlan as r, taxBehaviorLegendSentence as s, PricingTable as t, PlanPriceTag as u, formatMinorCurrencyAmount as v, formatDurationAdjective as x, formatPrice 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 };