@zuplo/zudoku-plugin-monetization 0.0.32 → 0.0.33

package/dist/index.mjs

@@ -8,8 +8,8 @@ import { Link as Link$1, Outlet, useLocation, useNavigate, useSearchParams } fro
 import { Alert, AlertAction, AlertDescription, AlertTitle } from "zudoku/ui/Alert";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "zudoku/ui/Card";
 import { Separator } from "zudoku/ui/Separator";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { parse } from "tinyduration";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button as Button$1 } from "zudoku/ui/Button";
 import { Skeleton } from "zudoku/ui/Skeleton";
 import { DismissibleAlert, DismissibleAlertAction } from "zudoku/ui/DismissibleAlert";
@@ -23,72 +23,6 @@ import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "zudoku/ui/Dialog";
 import { Input } from "zudoku/ui/Input";
 import { Progress } from "zudoku/ui/Progress";
-//#region src/components/FeatureItem.tsx
-const FeatureItem = ({ feature, className }) => {
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex items-start gap-2", className),
-		children: [/* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-primary shrink-0 mt-0.5" }), /* @__PURE__ */ jsx("div", {
-			className: "text-sm",
-			children: feature.value ? /* @__PURE__ */ jsxs(Fragment, { children: [
-				/* @__PURE__ */ jsxs("span", {
-					className: "font-medium",
-					children: [feature.name, ":"]
-				}),
-				" ",
-				feature.value
-			] }) : feature.name
-		})]
-	});
-};
-//#endregion
-//#region src/components/QuotaItem.tsx
-const QuotaItem = ({ quota, className }) => {
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex items-start gap-2", className),
-		children: [/* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-primary shrink-0 mt-0.5" }), /* @__PURE__ */ jsxs("div", {
-			className: "text-sm",
-			children: [
-				/* @__PURE__ */ jsxs("span", {
-					className: "font-medium",
-					children: [quota.name, ":"]
-				}),
-				" ",
-				quota.limit.toLocaleString(),
-				" / ",
-				quota.period,
-				quota.overagePrice && /* @__PURE__ */ jsxs("div", {
-					className: "text-xs text-muted-foreground mt-0.5",
-					children: [
-						"+",
-						quota.overagePrice,
-						" after quota"
-					]
-				})
-			]
-		})]
-	});
-};
-//#endregion
-//#region src/hooks/useDeploymentName.ts
-const useDeploymentName = () => {
-	const deploymentName = useZudoku().env.ZUPLO_PUBLIC_DEPLOYMENT_NAME;
-	if (!deploymentName) throw new Error("ZUPLO_PUBLIC_DEPLOYMENT_NAME is not set");
-	return deploymentName;
-};
-//#endregion
-//#region src/hooks/usePurchaseDetails.ts
-const usePurchaseDetails = (planId) => {
-	const zudoku = useZudoku();
-	return useSuspenseQuery({
-		queryKey: [`/v3/zudoku-metering/${useDeploymentName()}/plans/${planId}/purchase-details`],
-		meta: { context: zudoku }
-	});
-};
-//#endregion
-//#region src/MonetizationContext.tsx
-const MonetizationContext = createContext({});
-const useMonetizationConfig = () => use(MonetizationContext);
-//#endregion
 //#region src/utils/formatDuration.ts
 const formatDuration = (iso) => {
 	try {
@@ -165,6 +99,31 @@ const formatMinorCurrencyAmount = (amountInMinorUnits, currency) => {
 	}).format(amountInMinorUnits / divisor);
 };
 //#endregion
+//#region src/utils/formatTieredPriceBreakdown.ts
+const parseAmount = (value) => {
+	if (!value) return;
+	const parsed = Number.parseFloat(value);
+	return Number.isFinite(parsed) ? parsed : void 0;
+};
+const formatTieredPriceBreakdown = (opts) => {
+	const { tiers, currency, unitLabel, includedLabel, omitIncludedUpToAmount } = opts;
+	if (!tiers || tiers.length <= 1) return;
+	const lines = [];
+	let lastUpTo;
+	for (const tier of tiers) {
+		const upTo = parseAmount(tier.upToAmount);
+		const unit = parseAmount(tier.unitPriceAmount) ?? 0;
+		const flat = parseAmount(tier.flatPriceAmount) ?? 0;
+		const prefix = upTo != null ? `Up to ${upTo.toLocaleString("en-US")}` : lastUpTo != null ? `Over ${lastUpTo.toLocaleString("en-US")}` : `Per ${unitLabel}`;
+		const unitPart = unit > 0 ? `${formatPrice(unit, currency)}/${unitLabel}` : includedLabel;
+		const flatPart = flat > 0 ? ` + ${formatPrice(flat, currency)} base` : "";
+		const line = `${prefix}: ${unitPart}${flatPart}`;
+		if (omitIncludedUpToAmount != null && upTo != null && upTo === omitIncludedUpToAmount && unitPart === includedLabel && flatPart === "") {} else lines.push(line);
+		if (upTo != null) lastUpTo = upTo;
+	}
+	return lines.length > 0 ? lines : void 0;
+};
+//#endregion
 //#region src/utils/categorizeRateCards.ts
 const categorizeRateCards = (rateCards, options) => {
 	const { currency, units, planBillingCadence } = options ?? {};
@@ -175,20 +134,30 @@ const categorizeRateCards = (rateCards, options) => {
 		if (!et) continue;
 		if (et.type === "metered" && et.issueAfterReset != null) {
 			let overagePrice;
-			if (et.isSoftLimit !== false && rc.price?.type === "tiered" && rc.price.tiers) {
+			let tierPrices;
+			if (rc.price?.type === "tiered" && rc.price.tiers) {
+				const unitLabel = units?.[rc.key] ?? units?.[rc.featureKey ?? ""] ?? "unit";
+				tierPrices = formatTieredPriceBreakdown({
+					tiers: rc.price.tiers.map((t) => ({
+						upToAmount: t.upToAmount,
+						unitPriceAmount: t.unitPrice?.amount,
+						flatPriceAmount: t.flatPrice?.amount
+					})),
+					currency,
+					unitLabel,
+					includedLabel: "Included",
+					omitIncludedUpToAmount: et.issueAfterReset
+				});
 				const overageTier = rc.price.tiers.find((t) => t.unitPrice?.amount && parseFloat(t.unitPrice.amount) > 0);
-				if (overageTier?.unitPrice) {
-					const amount = parseFloat(overageTier.unitPrice.amount);
-					const unitLabel = units?.[rc.key] ?? units?.[rc.featureKey ?? ""] ?? "unit";
-					overagePrice = `${formatPrice(amount, currency)}/${unitLabel}`;
-				}
+				if (et.isSoftLimit !== false && overageTier?.unitPrice) overagePrice = `${formatPrice(parseFloat(overageTier.unitPrice.amount), currency)}/${unitLabel}`;
 			}
 			quotas.push({
 				key: rc.featureKey ?? rc.key,
 				name: rc.name,
 				limit: et.issueAfterReset,
 				period: rc.billingCadence ? formatDuration(rc.billingCadence) : planBillingCadence ? formatDuration(planBillingCadence) : "month",
-				overagePrice
+				overagePrice,
+				tierPrices
 			});
 		} else if (et.type === "boolean") features.push({
 			key: rc.featureKey ?? rc.key,
@@ -214,6 +183,123 @@ const categorizeRateCards = (rateCards, options) => {
 	};
 };
 //#endregion
+//#region src/components/FeatureItem.tsx
+const FeatureItem = ({ feature, className }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-start gap-2", className),
+		children: [/* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-primary shrink-0 mt-0.5" }), /* @__PURE__ */ jsx("div", {
+			className: "text-sm",
+			children: feature.value ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "font-medium",
+					children: [feature.name, ":"]
+				}),
+				" ",
+				feature.value
+			] }) : feature.name
+		})]
+	});
+};
+//#endregion
+//#region src/components/QuotaItem.tsx
+const QuotaItem = ({ quota, className }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-start gap-2", className),
+		children: [/* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-primary shrink-0 mt-0.5" }), /* @__PURE__ */ jsxs("div", {
+			className: "text-sm",
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "font-medium",
+					children: [quota.name, ":"]
+				}),
+				" ",
+				quota.limit.toLocaleString(),
+				" / ",
+				quota.period,
+				quota.tierPrices && quota.tierPrices.length > 0 && /* @__PURE__ */ jsx("ul", {
+					className: "text-xs text-muted-foreground mt-1 space-y-0.5",
+					children: quota.tierPrices.map((line) => /* @__PURE__ */ jsx("li", { children: line }, line))
+				}),
+				quota.overagePrice && /* @__PURE__ */ jsxs("div", {
+					className: "text-xs text-muted-foreground mt-0.5",
+					children: [
+						"+",
+						quota.overagePrice,
+						" after quota"
+					]
+				})
+			]
+		})]
+	});
+};
+//#endregion
+//#region src/components/PlanEntitlements.tsx
+const PhaseSection = ({ phase, currency, showName, billingCadence, units, itemClassName }) => {
+	const { quotas, features } = categorizeRateCards(phase.rateCards, {
+		currency,
+		units,
+		planBillingCadence: billingCadence
+	});
+	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)
+					]
+				})]
+			}),
+			quotas.map((quota) => /* @__PURE__ */ jsx(QuotaItem, {
+				quota,
+				className: itemClassName
+			}, quota.key)),
+			features.map((feature) => /* @__PURE__ */ jsx(FeatureItem, {
+				feature,
+				className: itemClassName
+			}, feature.key))
+		]
+	});
+};
+const PlanEntitlements = ({ phases, currency, billingCadence, units, itemClassName }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "space-y-4",
+		children: phases.map((phase, idx) => /* @__PURE__ */ jsx(PhaseSection, {
+			phase,
+			currency,
+			showName: phases.length > 1,
+			billingCadence,
+			units,
+			itemClassName
+		}, phase.key ?? String(idx)))
+	});
+};
+//#endregion
+//#region src/hooks/useDeploymentName.ts
+const useDeploymentName = () => {
+	const deploymentName = useZudoku().env.ZUPLO_PUBLIC_DEPLOYMENT_NAME;
+	if (!deploymentName) throw new Error("ZUPLO_PUBLIC_DEPLOYMENT_NAME is not set");
+	return deploymentName;
+};
+//#endregion
+//#region src/hooks/usePurchaseDetails.ts
+const usePurchaseDetails = (planId) => {
+	const zudoku = useZudoku();
+	return useSuspenseQuery({
+		queryKey: [`/v3/zudoku-metering/${useDeploymentName()}/plans/${planId}/purchase-details`],
+		meta: { context: zudoku }
+	});
+};
+//#endregion
+//#region src/MonetizationContext.tsx
+const MonetizationContext = createContext({});
+const useMonetizationConfig = () => use(MonetizationContext);
+//#endregion
 //#region src/utils/formatBillingCycle.ts
 const formatBillingCycle = (duration) => {
 	if (duration === "month") return "monthly";
@@ -333,12 +419,6 @@ const CheckoutConfirmPage = () => {
 	const taxAmount = getTaxAmountFromPurchaseDetails(purchaseDetails.data);
 	const taxLabel = getTaxLabelFromPurchaseDetails(purchaseDetails.data);
 	const taxInclusive = isTaxInclusiveFromPurchaseDetails(purchaseDetails.data);
-	const rateCards = selectedPlan?.phases.at(-1)?.rateCards;
-	const { quotas, features } = categorizeRateCards(rateCards ?? [], {
-		currency: selectedPlan?.currency,
-		units: pricing?.units,
-		planBillingCadence: selectedPlan?.billingCadence
-	});
 	const price = selectedPlan ? getPriceFromPlan(selectedPlan) : null;
 	const billingCycle = selectedPlan?.billingCadence ? formatDuration(selectedPlan.billingCadence) : null;
 	const createSubscriptionMutation = useMutation({
@@ -434,15 +514,12 @@ const CheckoutConfirmPage = () => {
 									className: "text-sm font-medium mb-3 mt-3",
 									children: "What's included:"
 								}),
-								/* @__PURE__ */ jsxs("div", {
-									className: "grid grid-cols-2 gap-2 text-muted-foreground",
-									children: [quotas.map((quota) => /* @__PURE__ */ jsx(QuotaItem, {
-										quota,
-										className: "text-muted-foreground"
-									}, quota.key)), features.map((feature) => /* @__PURE__ */ jsx(FeatureItem, {
-										feature,
-										className: "text-muted-foreground"
-									}, feature.key))]
+								/* @__PURE__ */ jsx(PlanEntitlements, {
+									phases: selectedPlan.phases,
+									currency: selectedPlan.currency,
+									billingCadence: selectedPlan.billingCadence,
+									units: pricing?.units,
+									itemClassName: "text-muted-foreground"
 								})
 							] })]
 						}),
@@ -641,41 +718,46 @@ const usePlans = () => {
 	});
 };
 //#endregion
-//#region src/pages/pricing/PricingCard.tsx
-const PhaseSection = ({ phase, currency, showName, billingCadence }) => {
-	const { pricing } = useMonetizationConfig();
-	const { quotas, features } = categorizeRateCards(phase.rateCards, {
-		currency,
-		units: pricing?.units,
-		planBillingCadence: billingCadence
-	});
-	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)
-					]
-				})]
-			}),
-			quotas.map((quota) => /* @__PURE__ */ jsx(QuotaItem, { quota }, quota.key)),
-			features.map((feature) => /* @__PURE__ */ jsx(FeatureItem, { feature }, feature.key))
-		]
-	});
+//#region src/utils/pricingTaxLegend.ts
+const normalizeTaxBehavior = (behavior) => {
+	switch (behavior.trim().toLowerCase()) {
+		case "exclusive":
+		case "tax_exclusive": return "exclusive";
+		case "inclusive":
+		case "tax_inclusive": return "inclusive";
+		default: return "unspecified";
+	}
+};
+const planHasDefaultTaxBehavior = (plan) => {
+	const behavior = plan.defaultTaxConfig?.behavior;
+	return typeof behavior === "string" && behavior.trim().length > 0;
+};
+const collectDefaultTaxBehaviors = (plan) => {
+	const behavior = plan.defaultTaxConfig?.behavior;
+	return typeof behavior === "string" && behavior.trim().length > 0 ? normalizeTaxBehavior(behavior) : "unspecified";
+};
+const taxBehaviorLegendSentence = (behavior) => {
+	switch (normalizeTaxBehavior(behavior)) {
+		case "exclusive": return "Prices exclude tax; taxes may be added at checkout if applicable.";
+		case "inclusive": return "Prices include tax where applicable.";
+		default: return;
+	}
 };
+const subscriptionTaxLegendSentence = (behavior) => {
+	switch (normalizeTaxBehavior(behavior)) {
+		case "exclusive": return "Price excludes tax; taxes may be added on invoice if applicable.";
+		case "inclusive": return "Price includes tax where applicable.";
+		default: return;
+	}
+};
+//#endregion
+//#region src/pages/pricing/PricingCard.tsx
 const PricingCard = ({ plan, isPopular = false, isSubscribed = false }) => {
 	const { pricing } = useMonetizationConfig();
 	if (plan.phases.length === 0) return null;
 	const price = getPriceFromPlan(plan);
 	const isFree = price.monthly === 0;
 	const isCustom = plan.metadata?.isCustom === true;
-	const hasMultiplePhases = plan.phases.length > 1;
 	const billingInterval = formatDuration(plan.billingCadence);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("relative rounded-lg border p-6 flex flex-col", isPopular && "border-primary border-2"),
@@ -721,12 +803,12 @@ const PricingCard = ({ plan, isPopular = false, isSubscribed = false }) => {
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "space-y-4 mb-6 grow",
-				children: plan.phases.map((phase) => /* @__PURE__ */ jsx(PhaseSection, {
-					phase,
+				children: /* @__PURE__ */ jsx(PlanEntitlements, {
+					phases: plan.phases,
 					currency: plan.currency,
-					showName: hasMultiplePhases,
-					billingCadence: plan.billingCadence
-				}, phase.key))
+					billingCadence: plan.billingCadence,
+					units: pricing?.units
+				})
 			}),
 			isSubscribed ? /* @__PURE__ */ jsx(Button, {
 				variant: isPopular ? "default" : "secondary",
@@ -754,6 +836,7 @@ const PricingPage = () => {
 	const deploymentName = useDeploymentName();
 	const auth = useAuth();
 	const { data: pricingTable } = usePlans();
+	const taxLegendSentence = taxBehaviorLegendSentence(collectDefaultTaxBehaviors(pricingTable.items[0]));
 	const { data: subscriptions = { items: [] } } = useQuery({
 		meta: { context: zudoku },
 		queryKey: [`/v3/zudoku-metering/${deploymentName}/subscriptions`],
@@ -784,14 +867,24 @@ const PricingPage = () => {
 					className: "text-sm mt-2",
 					children: "Make sure your plans are set up and published."
 				})]
-			}) : /* @__PURE__ */ jsx("div", {
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 				className: "w-full grid grid-cols-1 sm:grid-cols-[repeat(auto-fit,minmax(300px,max-content))] justify-center gap-6",
 				children: pricingTable.items.map((plan) => /* @__PURE__ */ jsx(PricingCard, {
 					plan,
 					isPopular: plan.metadata?.zuplo_most_popular === "true",
 					isSubscribed: subscriptions.items.some((subscription) => ["active", "canceled"].includes(subscription.status))
 				}, plan.id))
-			}),
+			}), taxLegendSentence && /* @__PURE__ */ jsxs("div", {
+				role: "note",
+				className: "mt-10 pt-6 border-t border-border max-w-2xl mx-auto text-center space-y-2",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-xs font-medium text-muted-foreground",
+					children: "Tax & Pricing"
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-xs text-muted-foreground",
+					children: taxLegendSentence
+				})]
+			})] }),
 			/* @__PURE__ */ jsx(Slot.Target, { name: "pricing-page-after" })
 		]
 	});
@@ -844,12 +937,6 @@ const SubscriptionChangeConfirmPage = () => {
 	const taxAmount = getTaxAmountFromPurchaseDetails(purchaseDetails.data);
 	const taxLabel = getTaxLabelFromPurchaseDetails(purchaseDetails.data);
 	const taxInclusive = isTaxInclusiveFromPurchaseDetails(purchaseDetails.data);
-	const rateCards = selectedPlan?.phases.at(-1)?.rateCards;
-	const { quotas, features } = categorizeRateCards(rateCards ?? [], {
-		currency: selectedPlan?.currency,
-		units: pricing?.units,
-		planBillingCadence: selectedPlan?.billingCadence
-	});
 	const price = selectedPlan ? getPriceFromPlan(selectedPlan) : null;
 	const billingCycle = selectedPlan?.billingCadence ? formatDuration(selectedPlan.billingCadence) : null;
 	const effectiveChangeMessage = mode === "downgrade" ? "This change will take effect at the start of your next billing cycle." : "This change will take effect immediately.";
@@ -951,15 +1038,11 @@ const SubscriptionChangeConfirmPage = () => {
 								className: "text-sm font-medium mb-3 mt-3",
 								children: "What's included:"
 							}),
-							/* @__PURE__ */ jsxs("div", {
-								className: "grid grid-cols-2 gap-2 text-muted-foreground",
-								children: [quotas.map((quota) => /* @__PURE__ */ jsx(QuotaItem, {
-									quota,
-									className: "text-muted-foreground"
-								}, quota.key)), features.map((feature) => /* @__PURE__ */ jsx(FeatureItem, {
-									feature,
-									className: "text-muted-foreground"
-								}, feature.key))]
+							/* @__PURE__ */ jsx(PlanEntitlements, {
+								phases: selectedPlan.phases,
+								currency: selectedPlan.currency,
+								billingCadence: selectedPlan.billingCadence,
+								units: pricing?.units
 							})
 						] })]
 					}),
@@ -2097,6 +2180,23 @@ const getOveragePriceFromItem = (item, currency, units) => {
 	const unitLabel = units?.[item.key] ?? units?.[item.featureKey] ?? "unit";
 	return `${formatPrice(parsed, currency)}/${unitLabel}`;
 };
+const getTierPricesFromItem = (item, currency, units) => {
+	if (item.price?.type !== "tiered") return;
+	const tiers = item.price.tiers;
+	if (!tiers || tiers.length <= 1) return;
+	const unitLabel = units?.[item.key] ?? units?.[item.featureKey] ?? "unit";
+	return formatTieredPriceBreakdown({
+		tiers: tiers.map((t) => ({
+			upToAmount: t.upToAmount,
+			unitPriceAmount: t.unitPrice?.amount,
+			flatPriceAmount: t.flatPrice?.amount
+		})),
+		currency,
+		unitLabel,
+		includedLabel: "Included",
+		omitIncludedUpToAmount: item.included?.entitlement?.issueAfterReset
+	});
+};
 const getEntitlementsFromItems = (items, currency, units, fallbackBillingCadence) => {
 	const features = [];
 	for (const item of items) {
@@ -2110,7 +2210,8 @@ const getEntitlementsFromItems = (items, currency, units, fallbackBillingCadence
 				name: item.name ?? item.featureKey ?? item.key,
 				limit: entitlement.issueAfterReset,
 				period: cadence ? formatDuration(cadence) : "month",
-				overagePrice: entitlement.isSoftLimit !== false ? getOveragePriceFromItem(item, currency, units) : void 0
+				overagePrice: entitlement.isSoftLimit !== false ? getOveragePriceFromItem(item, currency, units) : void 0,
+				tierPrices: getTierPricesFromItem(item, currency, units)
 			});
 			continue;
 		}
@@ -2154,23 +2255,32 @@ const getEntitlementsFromItems = (items, currency, units, fallbackBillingCadence
 const getPhaseRows = (opts) => {
 	const { subscription, currency, units } = opts;
 	const phases = [...subscription.phases].sort((a, b) => new Date(a.activeFrom).getTime() - new Date(b.activeFrom).getTime());
-	const featureRows = [];
+	const phaseGroups = [];
 	for (const phase of phases) {
 		const { features } = getEntitlementsFromItems(phase.items ?? [], currency, units, subscription.billingCadence);
-		for (const f of features) featureRows.push({
+		const rows = [];
+		for (const f of features) rows.push({
 			key: f.key,
 			name: f.name,
 			entitlementType: f.entitlementType,
 			limit: f.entitlementType === "metered" ? f.limit : void 0,
 			period: f.entitlementType === "metered" ? f.period : void 0,
 			overagePrice: f.entitlementType === "metered" ? f.overagePrice : void 0,
+			tierPrices: f.entitlementType === "metered" ? f.tierPrices : void 0,
 			value: f.entitlementType === "static" ? f.value : void 0,
 			phaseId: phase.id,
 			activeFrom: phase.activeFrom,
 			activeTo: phase.activeTo
 		});
+		if (rows.length > 0) phaseGroups.push({
+			id: phase.id,
+			name: phase.name,
+			activeFrom: phase.activeFrom,
+			activeTo: phase.activeTo,
+			rows
+		});
 	}
-	return { featureRows };
+	return { phaseGroups };
 };
 const formatActiveRange = (activeFrom, activeTo) => {
 	if (!activeTo) return `Starts ${formatDate$1(activeFrom)}`;
@@ -2181,6 +2291,7 @@ const SubscriptionPlanDetails = ({ subscription }) => {
 	const plan = subscription.plan;
 	const currency = subscription.currency ?? plan.currency;
 	const priceInfo = getPriceFromPlan(plan);
+	const taxLegendSentence = planHasDefaultTaxBehavior(plan) ? subscriptionTaxLegendSentence(plan.defaultTaxConfig?.behavior ?? "") : void 0;
 	const primaryPrice = priceInfo.monthly === 0 && priceInfo.yearly === 0 ? /* @__PURE__ */ jsx("span", {
 		className: "text-primary font-medium",
 		children: "Free"
@@ -2191,7 +2302,7 @@ const SubscriptionPlanDetails = ({ subscription }) => {
 		className: "text-muted-foreground",
 		children: [" / ", formatDuration(plan.billingCadence)]
 	})] });
-	const { featureRows } = getPhaseRows({
+	const { phaseGroups } = getPhaseRows({
 		subscription,
 		currency,
 		units: pricing?.units
@@ -2226,10 +2337,13 @@ const SubscriptionPlanDetails = ({ subscription }) => {
 					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", {
 						className: detailLabelClassName,
 						children: "Price"
-					}), /* @__PURE__ */ jsx("dd", {
+					}), /* @__PURE__ */ jsxs("dd", { children: [/* @__PURE__ */ jsx("div", {
 						className: "flex flex-wrap items-baseline gap-1",
 						children: primaryPrice
-					})] }),
+					}), 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"
@@ -2238,42 +2352,56 @@ const SubscriptionPlanDetails = ({ subscription }) => {
 						children: subscription.alignment?.currentAlignedBillingPeriod ? formatDateRange(subscription.alignment.currentAlignedBillingPeriod.from, subscription.alignment.currentAlignedBillingPeriod.to) : "—"
 					})] })
 				]
-			}), featureRows.length > 0 ? /* @__PURE__ */ jsx("div", {
+			}), phaseGroups.length > 0 ? /* @__PURE__ */ jsx("div", {
 				className: "space-y-5 pt-2 border-t border-border",
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "space-y-2",
 					children: [/* @__PURE__ */ jsx("p", {
 						className: cn(sectionLabelClassName, "mb-5"),
 						children: "Entitlements"
-					}), /* @__PURE__ */ jsx("ul", {
-						className: "space-y-3",
-						children: featureRows.map((row) => /* @__PURE__ */ jsxs("li", {
-							className: "grid gap-1 text-sm sm:grid-cols-4 sm:items-center sm:gap-4",
-							children: [
-								/* @__PURE__ */ jsx("div", {
-									className: "flex items-start gap-2 text-muted-foreground sm:col-span-2",
-									children: /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsxs("span", {
-										className: "text-foreground font-medium",
-										children: [row.name, " "]
-									}), row.entitlementType === "static" && row.value ? `: ${row.value}` : ""] })
-								}),
-								/* @__PURE__ */ jsx("div", {
-									className: "text-muted-foreground sm:text-right",
-									children: row.entitlementType === "metered" && row.limit != null ? /* @__PURE__ */ jsxs(Fragment, { children: [
-										formatNumber(row.limit),
-										row.period ? ` / ${row.period}` : "",
-										row.overagePrice ? /* @__PURE__ */ jsxs("div", {
-											className: "text-xs mt-0.5",
-											children: ["Overage: ", row.overagePrice]
-										}) : null
-									] }) : row.entitlementType === "static" && row.value ? row.value : "Included"
-								}),
-								/* @__PURE__ */ jsx("div", {
-									className: "text-xs text-muted-foreground sm:text-right",
-									children: formatActiveRange(row.activeFrom, row.activeTo)
-								})
-							]
-						}, `${row.key}:${row.phaseId}`))
+					}), /* @__PURE__ */ jsx("div", {
+						className: "space-y-5",
+						children: phaseGroups.map((phase) => /* @__PURE__ */ jsxs("div", {
+							className: "space-y-3",
+							children: [phaseGroups.length > 1 ? /* @__PURE__ */ jsxs("div", {
+								className: "text-sm font-medium text-card-foreground",
+								children: [phase.name, /* @__PURE__ */ jsxs("span", {
+									className: "text-muted-foreground font-normal",
+									children: [
+										" ",
+										"—",
+										" ",
+										formatActiveRange(phase.activeFrom, phase.activeTo)
+									]
+								})]
+							}) : null, /* @__PURE__ */ jsx("ul", {
+								className: "space-y-3",
+								children: phase.rows.map((row) => /* @__PURE__ */ jsx("li", {
+									className: "text-sm",
+									children: /* @__PURE__ */ jsxs("div", {
+										className: "flex flex-col gap-1",
+										children: [/* @__PURE__ */ jsxs("div", {
+											className: "text-foreground font-medium",
+											children: [row.name, row.entitlementType === "static" && row.value ? `: ${row.value}` : ""]
+										}), /* @__PURE__ */ jsx("div", {
+											className: "text-muted-foreground",
+											children: row.entitlementType === "metered" && row.limit != null ? /* @__PURE__ */ jsxs(Fragment, { children: [
+												formatNumber(row.limit),
+												row.period ? ` / ${row.period}` : "",
+												row.tierPrices && row.tierPrices.length > 0 ? /* @__PURE__ */ jsx("ul", {
+													className: "text-xs mt-1 space-y-0.5",
+													children: row.tierPrices.map((line) => /* @__PURE__ */ jsx("li", { children: line }, line))
+												}) : null,
+												row.overagePrice ? /* @__PURE__ */ jsxs("div", {
+													className: "text-xs mt-0.5",
+													children: ["Overage: ", row.overagePrice]
+												}) : null
+											] }) : row.entitlementType === "static" && row.value ? null : "Included"
+										})]
+									})
+								}, `${row.key}:${row.phaseId}`))
+							})]
+						}, phase.id))
 					})]
 				})
 			}) : null]

package/package.json

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