@zuplo/zudoku-plugin-monetization 0.0.31 → 0.0.33

package/dist/index.d.mts

@@ -1,5 +1,4 @@
-import "react";
-import * as zudoku from "zudoku";
+import * as _$zudoku from "zudoku";
 
 //#region src/MonetizationContext.d.ts
 interface MonetizationConfig {
@@ -12,6 +11,6 @@ interface MonetizationConfig {
 }
 //#endregion
 //#region src/ZuploMonetizationPlugin.d.ts
-declare const zuploMonetizationPlugin: (options?: MonetizationConfig | undefined) => zudoku.ZudokuPlugin;
+declare const zuploMonetizationPlugin: (options?: MonetizationConfig | undefined) => _$zudoku.ZudokuPlugin;
 //#endregion
 export { zuploMonetizationPlugin };

package/dist/index.mjs

@@ -6,10 +6,10 @@ import { useAuth, useZudoku } from "zudoku/hooks";
 import { QueryClient, QueryClientProvider, useMutation, useQuery, useQueryClient, useSuspenseQuery } from "zudoku/react-query";
 import { Link as Link$1, Outlet, useLocation, useNavigate, useSearchParams } from "zudoku/router";
 import { Alert, AlertAction, AlertDescription, AlertTitle } from "zudoku/ui/Alert";
-import { Card, CardContent, CardHeader, CardTitle } from "zudoku/ui/Card";
+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,78 +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 {
@@ -146,7 +74,6 @@ const formatDurationAdjective = (iso) => {
 		return "billing period";
 	}
 };
-
 //#endregion
 //#region src/utils/formatPrice.ts
 const formatPrice = (amount, currency) => new Intl.NumberFormat("en-US", {
@@ -171,7 +98,31 @@ const formatMinorCurrencyAmount = (amountInMinorUnits, currency) => {
 		maximumFractionDigits: fractionDigits
 	}).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) => {
@@ -183,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,
@@ -221,7 +182,123 @@ const categorizeRateCards = (rateCards, options) => {
 		features
 	};
 };
-
+//#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) => {
@@ -231,7 +308,6 @@ const formatBillingCycle = (duration) => {
 	if (duration === "day") return "daily";
 	return `every ${duration}`;
 };
-
 //#endregion
 //#region src/utils/getPriceFromPlan.ts
 const getPriceFromPlan = (plan) => {
@@ -240,7 +316,6 @@ const getPriceFromPlan = (plan) => {
 		yearly: plan.yearlyPrice != null ? parseFloat(plan.yearlyPrice) : 0
 	};
 };
-
 //#endregion
 //#region src/utils/purchaseDetails.ts
 const getPlanFromPurchaseDetails = (response) => {
@@ -258,7 +333,6 @@ const getTaxLabelFromPurchaseDetails = (response) => {
 const isTaxInclusiveFromPurchaseDetails = (response) => {
 	return response.tax?.taxInclusive === true;
 };
-
 //#endregion
 //#region src/ZuploMonetizationWrapper.tsx
 const DEFAULT_GATEWAY_URL = "https://api.zuploedge.com";
@@ -330,7 +404,6 @@ const ZuploMonetizationWrapper = ({ options = {} }) => /* @__PURE__ */ jsx(Query
 		children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Outlet, {}) })
 	})
 });
-
 //#endregion
 //#region src/pages/CheckoutConfirmPage.tsx
 const CheckoutConfirmPage = () => {
@@ -346,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({
@@ -447,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"
 								})
 							] })]
 						}),
@@ -494,7 +558,6 @@ const CheckoutConfirmPage = () => {
 		})
 	});
 };
-
 //#endregion
 //#region src/components/RedirectPage.tsx
 const RedirectPage = ({ icon: Icon, title, description, url, children }) => {
@@ -543,7 +606,6 @@ const RedirectPage = ({ icon: Icon, title, description, url, children }) => {
 		})
 	});
 };
-
 //#endregion
 //#region src/hooks/useUrlUtils.ts
 const useUrlUtils = () => {
@@ -553,7 +615,6 @@ const useUrlUtils = () => {
 		return joinUrl(window.location.origin, basePath, path, searchParams ? `?${new URLSearchParams(searchParams)}` : void 0);
 	} };
 };
-
 //#endregion
 //#region src/pages/CheckoutPage.tsx
 const CheckoutPage = () => {
@@ -604,7 +665,6 @@ const CheckoutPage = () => {
 		})
 	});
 };
-
 //#endregion
 //#region src/pages/ManagePaymentPage.tsx
 const ManagePaymentPage = () => {
@@ -647,7 +707,6 @@ const ManagePaymentPage = () => {
 		})
 	});
 };
-
 //#endregion
 //#region src/hooks/usePlans.ts
 const usePlans = () => {
@@ -658,43 +717,47 @@ const usePlans = () => {
 		meta: { context: auth.isAuthenticated ? zudoku : void 0 }
 	});
 };
-
 //#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"),
@@ -740,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",
@@ -765,7 +828,6 @@ const PricingCard = ({ plan, isPopular = false, isSubscribed = false }) => {
 		]
 	});
 };
-
 //#endregion
 //#region src/pages/PricingPage.tsx
 const PricingPage = () => {
@@ -774,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`],
@@ -804,19 +867,28 @@ 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" })
 		]
 	});
 };
-
 //#endregion
 //#region src/pages/PricingPageSkeleton.tsx
 const PricingPageSkeleton = () => /* @__PURE__ */ jsxs("div", {
@@ -847,7 +919,6 @@ const PricingPageSkeleton = () => /* @__PURE__ */ jsxs("div", {
 		}, i))
 	})]
 });
-
 //#endregion
 //#region src/pages/SubscriptionChangeConfirmPage.tsx
 const SubscriptionChangeConfirmPage = () => {
@@ -866,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.";
@@ -973,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
 							})
 						] })]
 					}),
@@ -1015,7 +1076,6 @@ const SubscriptionChangeConfirmPage = () => {
 		})
 	});
 };
-
 //#endregion
 //#region src/hooks/useSubscriptions.ts
 const useSubscriptions = (environmentName) => {
@@ -1033,7 +1093,6 @@ const useSubscriptions = (environmentName) => {
 		})
 	});
 };
-
 //#endregion
 //#region src/pages/subscriptions/ConfirmDeleteKeyAlert.tsx
 const ConfirmDeleteKeyAlert = ({ children, onDelete }) => {
@@ -1045,10 +1104,9 @@ const ConfirmDeleteKeyAlert = ({ children, onDelete }) => {
 		children: "Continue"
 	})] })] })] });
 };
-
 //#endregion
 //#region src/pages/subscriptions/ApiKey.tsx
-const formatDate$1 = (dateString) => {
+const formatDate$2 = (dateString) => {
 	if (!dateString) return "";
 	return new Date(dateString).toLocaleDateString("en-US", {
 		month: "short",
@@ -1059,8 +1117,7 @@ const formatDate$1 = (dateString) => {
 const getTimeAgo = (dateString) => {
 	if (!dateString) return "Never";
 	const date = new Date(dateString);
-	const now = /* @__PURE__ */ new Date();
-	const diffInMinutes = Math.floor((now.getTime() - date.getTime()) / (1e3 * 60));
+	const diffInMinutes = Math.floor(((/* @__PURE__ */ new Date()).getTime() - date.getTime()) / (1e3 * 60));
 	if (diffInMinutes < 1) return "Just now";
 	if (diffInMinutes < 60) return `${diffInMinutes} minutes ago`;
 	const diffInHours = Math.floor(diffInMinutes / 60);
@@ -1068,7 +1125,7 @@ const getTimeAgo = (dateString) => {
 	const diffInDays = Math.floor(diffInHours / 24);
 	if (diffInDays === 1) return "1 day ago";
 	if (diffInDays < 30) return `${diffInDays} days ago`;
-	return formatDate$1(dateString);
+	return formatDate$2(dateString);
 };
 const ApiKey = ({ apiKey, createdAt, lastUsed, expiresOn, isActive = true, label, onDelete }) => {
 	const isExpiring = expiresOn && new Date(expiresOn) < new Date(Date.now() + 720 * 60 * 60 * 1e3);
@@ -1125,7 +1182,7 @@ const ApiKey = ({ apiKey, createdAt, lastUsed, expiresOn, isActive = true, label
 				children: [
 					/* @__PURE__ */ jsxs("div", {
 						className: "flex items-center gap-1.5",
-						children: [/* @__PURE__ */ jsx(ClockIcon, { className: "size-3" }), /* @__PURE__ */ jsxs("span", { children: ["Created ", formatDate$1(createdAt)] })]
+						children: [/* @__PURE__ */ jsx(ClockIcon, { className: "size-3" }), /* @__PURE__ */ jsxs("span", { children: ["Created ", formatDate$2(createdAt)] })]
 					}),
 					/* @__PURE__ */ jsx("span", {
 						className: "text-muted-foreground/40",
@@ -1140,7 +1197,7 @@ const ApiKey = ({ apiKey, createdAt, lastUsed, expiresOn, isActive = true, label
 						children: [
 							isExpired ? "Expired" : "Expires",
 							" on ",
-							formatDate$1(expiresOn)
+							formatDate$2(expiresOn)
 						]
 					})] })
 				]
@@ -1148,7 +1205,6 @@ const ApiKey = ({ apiKey, createdAt, lastUsed, expiresOn, isActive = true, label
 		})]
 	});
 };
-
 //#endregion
 //#region src/pages/subscriptions/ApiKeyInfo.tsx
 const ApiKeyInfo = () => /* @__PURE__ */ jsxs(DismissibleAlert, {
@@ -1168,7 +1224,6 @@ const ApiKeyInfo = () => /* @__PURE__ */ jsxs(DismissibleAlert, {
 		/* @__PURE__ */ jsx(DismissibleAlertAction, {})
 	]
 });
-
 //#endregion
 //#region src/pages/subscriptions/ConfirmRollKeyAlert.tsx
 const ConfirmRollKeyAlert = (props) => /* @__PURE__ */ jsxs(AlertDialog, { children: [/* @__PURE__ */ jsx(AlertDialogTrigger, {
@@ -1178,7 +1233,6 @@ const ConfirmRollKeyAlert = (props) => /* @__PURE__ */ jsxs(AlertDialog, { child
 	onClick: props.onRollKey,
 	children: "Continue"
 })] })] })] });
-
 //#endregion
 //#region src/pages/subscriptions/ApiKeysList.tsx
 const PendingFirstPaymentAlert = ({ children }) => /* @__PURE__ */ jsxs("div", {
@@ -1258,7 +1312,7 @@ const ApiKeysList = ({ isPendingFirstPayment, apiKeys, deploymentName, consumerI
 					/* @__PURE__ */ jsx(AlertTitle, { children: "API key was deleted" }),
 					/* @__PURE__ */ jsx(AlertDescription, { children: (() => {
 						const deletedKey = apiKeys.find((k) => k.id === deleteKeyMutation.variables?.keyId);
-						return deletedKey ? `API key created ${formatDate$1(deletedKey.createdOn)} has been removed.` : "The API key has been deleted.";
+						return deletedKey ? `API key created ${formatDate$2(deletedKey.createdOn)} has been removed.` : "The API key has been deleted.";
 					})() }),
 					/* @__PURE__ */ jsx(DismissibleAlertAction, {})
 				]
@@ -1330,7 +1384,6 @@ const ApiKeysList = ({ isPendingFirstPayment, apiKeys, deploymentName, consumerI
 		]
 	});
 };
-
 //#endregion
 //#region src/pages/subscriptions/CancelSubscriptionDialog.tsx
 const CancelSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionId, billingPeriodEnd }) => {
@@ -1370,7 +1423,7 @@ const CancelSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionId
 								/* @__PURE__ */ jsx(AlertTitle, { children: "Your plan will be canceled at the end of your billing cycle." }),
 								/* @__PURE__ */ jsxs(AlertDescription, { children: [
 									"You'll retain access until ",
-									formatDate$1(billingPeriodEnd),
+									formatDate$2(billingPeriodEnd),
 									". After your billing period ends, this plan will not renew and you would need to subscribe again to continue."
 								] })
 							]
@@ -1383,7 +1436,7 @@ const CancelSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionId
 								/* @__PURE__ */ jsxs(AlertDescription, { children: [
 									"If you change your mind you have until",
 									" ",
-									formatDate$1(billingPeriodEnd),
+									formatDate$2(billingPeriodEnd),
 									" to remove this cancellation from Manage subscription."
 								] })
 							]
@@ -1437,7 +1490,6 @@ const CancelSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionId
 		})
 	});
 };
-
 //#endregion
 //#region src/pages/subscriptions/RestoreSubscriptionDialog.tsx
 const RestoreSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionId, billingPeriodEnd }) => {
@@ -1487,7 +1539,7 @@ const RestoreSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionI
 								className: "space-y-2",
 								children: [/* @__PURE__ */ jsxs("p", { children: [
 									"Your access stays in place until ",
-									formatDate$1(billingPeriodEnd),
+									formatDate$2(billingPeriodEnd),
 									" ",
 									"either way."
 								] }), /* @__PURE__ */ jsx("p", { children: "Confirming will remove the pending cancellation. Your subscription will remain active and continue to renew on your normal billing schedule, and charges will apply as usual." })]
@@ -1519,7 +1571,6 @@ const RestoreSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionI
 		})
 	});
 };
-
 //#endregion
 //#region src/pages/subscriptions/SwitchPlanModal.tsx
 const getAllKeysAcrossPhases = (plan, units) => {
@@ -1669,6 +1720,7 @@ const ChangeIndicator = ({ change }) => {
 	if (change === "decrease" || change === "removed" || change === "downgraded") return /* @__PURE__ */ jsx(ArrowDownIcon, { className: "w-4 h-4 text-amber-600 shrink-0" });
 	return /* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-green-600 shrink-0" });
 };
+const isPrivatePlan = (plan) => plan.metadata?.zuplo_private_plan === "true";
 const modeLabelMap = {
 	upgrade: "Upgrade",
 	downgrade: "Downgrade",
@@ -1859,12 +1911,29 @@ const SwitchPlanModal = ({ subscription, children }) => {
 	});
 	const currentPlan = plansData?.items.find((p) => p.key === subscription.plan.key);
 	const { upgrades, downgrades, privatePlans } = useMemo(() => {
-		if (!plansData?.items || !currentPlan) return {
+		if (!plansData?.items) return {
 			upgrades: [],
 			downgrades: [],
 			privatePlans: []
 		};
-		const isPrivatePlan = (plan) => plan.metadata?.zuplo_private_plan === "true";
+		if (!currentPlan) {
+			const currentIndex = -1;
+			return {
+				upgrades: plansData.items.map((plan, targetIndex) => comparePlans(void 0, plan, currentIndex, targetIndex, pricing?.units)).filter((c) => !isPrivatePlan(c.plan)),
+				downgrades: [],
+				privatePlans: []
+			};
+		}
+		if (isPrivatePlan(currentPlan)) {
+			const currentIndex = plansData.items.findIndex((p) => p.id === currentPlan.id);
+			return {
+				upgrades: plansData.items.filter((p) => p.id !== currentPlan.id).map((plan) => {
+					return comparePlans(currentPlan, plan, currentIndex, plansData.items.indexOf(plan), pricing?.units);
+				}).filter((c) => !isPrivatePlan(c.plan)),
+				downgrades: [],
+				privatePlans: []
+			};
+		}
 		const currentIndex = plansData.items.findIndex((p) => p.id === currentPlan.id);
 		const allComparisons = plansData.items.filter((p) => p.id !== currentPlan.id).map((plan) => {
 			return comparePlans(currentPlan, plan, currentIndex, plansData.items.indexOf(plan), pricing?.units);
@@ -1914,6 +1983,13 @@ const SwitchPlanModal = ({ subscription, children }) => {
 							children: currentPlan.name
 						})] })
 					}),
+					!currentPlan && /* @__PURE__ */ jsx(Item, {
+						variant: "outline",
+						children: /* @__PURE__ */ jsxs(ItemContent, { children: [/* @__PURE__ */ jsx(ItemTitle, { children: "Current Plan" }), /* @__PURE__ */ jsx(ItemDescription, {
+							className: "text-lg font-bold",
+							children: subscription.plan.name
+						})] })
+					}),
 					upgrades.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
 						className: "flex items-center justify-between mb-3",
 						children: [/* @__PURE__ */ jsxs("div", {
@@ -1985,7 +2061,6 @@ const SwitchPlanModal = ({ subscription, children }) => {
 		}) })]
 	});
 };
-
 //#endregion
 //#region src/pages/subscriptions/ManageSubscription.tsx
 const ManageSubscription = ({ subscription, planName }) => {
@@ -2077,7 +2152,262 @@ const ManageSubscription = ({ subscription, planName }) => {
 		})
 	] });
 };
-
+//#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 formatDate$1 = (dateString) => {
+	return new Date(dateString).toLocaleDateString("en-US", {
+		month: "short",
+		day: "numeric",
+		year: "numeric"
+	});
+};
+const formatDateRange = (from, to) => `${formatDate$1(from)} – ${formatDate$1(to)}`;
+const formatNumber = (value) => value.toLocaleString("en-US");
+const getOveragePriceFromItem = (item, currency, units) => {
+	const tiers = item.price?.tiers;
+	if (!tiers || tiers.length === 0) return void 0;
+	const amount = tiers.find((t) => {
+		const amount = t.unitPrice?.amount;
+		if (!amount) return false;
+		const parsed = parseFloat(amount);
+		return Number.isFinite(parsed) && parsed > 0;
+	})?.unitPrice?.amount;
+	if (!amount) return void 0;
+	const parsed = parseFloat(amount);
+	if (!Number.isFinite(parsed) || parsed <= 0) return void 0;
+	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) {
+		const entitlement = item.included?.entitlement;
+		if (!entitlement) continue;
+		if (entitlement.type === "metered" && entitlement.issueAfterReset != null) {
+			const cadence = item.billingCadence ?? fallbackBillingCadence;
+			features.push({
+				entitlementType: "metered",
+				key: item.featureKey ?? item.key,
+				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,
+				tierPrices: getTierPricesFromItem(item, currency, units)
+			});
+			continue;
+		}
+		if (entitlement.type === "boolean") {
+			features.push({
+				entitlementType: "boolean",
+				key: item.featureKey ?? item.key,
+				name: item.name ?? item.featureKey ?? item.key
+			});
+			continue;
+		}
+		if (entitlement.type === "static") {
+			const base = {
+				key: item.featureKey ?? item.key,
+				name: item.name ?? item.featureKey ?? item.key
+			};
+			if (!entitlement.config) {
+				features.push({
+					entitlementType: "static",
+					...base
+				});
+				continue;
+			}
+			try {
+				const parsed = JSON.parse(entitlement.config);
+				features.push({
+					entitlementType: "static",
+					...base,
+					value: parsed?.value != null ? String(parsed.value) : void 0
+				});
+			} catch {
+				features.push({
+					entitlementType: "static",
+					...base
+				});
+			}
+		}
+	}
+	return { features };
+};
+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 phaseGroups = [];
+	for (const phase of phases) {
+		const { features } = getEntitlementsFromItems(phase.items ?? [], currency, units, subscription.billingCadence);
+		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 { phaseGroups };
+};
+const formatActiveRange = (activeFrom, activeTo) => {
+	if (!activeTo) return `Starts ${formatDate$1(activeFrom)}`;
+	return `${formatDate$1(activeFrom)} – ${formatDate$1(activeTo)}`;
+};
+const SubscriptionPlanDetails = ({ subscription }) => {
+	const { pricing } = useMonetizationConfig();
+	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"
+	}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: "text-primary font-medium text-lg",
+		children: formatPrice(priceInfo.monthly, currency)
+	}), /* @__PURE__ */ jsxs("span", {
+		className: "text-muted-foreground",
+		children: [" / ", formatDuration(plan.billingCadence)]
+	})] });
+	const { phaseGroups } = getPhaseRows({
+		subscription,
+		currency,
+		units: pricing?.units
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [/* @__PURE__ */ jsx(Heading, {
+			level: 3,
+			children: "Subscription Details"
+		}), /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsxs(CardHeader, { children: [/* @__PURE__ */ jsx(CardTitle, {
+			className: "text-lg font-semibold leading-tight",
+			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: formatDate$1(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: 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"
+					}), /* @__PURE__ */ jsx("dd", {
+						className: "text-foreground",
+						children: subscription.alignment?.currentAlignedBillingPeriod ? formatDateRange(subscription.alignment.currentAlignedBillingPeriod.from, subscription.alignment.currentAlignedBillingPeriod.to) : "—"
+					})] })
+				]
+			}), 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("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]
+		})] })]
+	});
+};
 //#endregion
 //#region src/pages/subscriptions/Usage.tsx
 const isMeteredEntitlement = (entitlement) => {
@@ -2237,7 +2567,6 @@ const Usage = ({ usage, isFetching, currentItems, subscription, isPendingFirstPa
 		]
 	});
 };
-
 //#endregion
 //#region src/pages/subscriptions/ActiveSubscription.tsx
 const ActiveSubscription = ({ subscription, deploymentName }) => {
@@ -2261,6 +2590,7 @@ const ActiveSubscription = ({ subscription, deploymentName }) => {
 				/* @__PURE__ */ jsx(DismissibleAlertAction, {})
 			]
 		}),
+		/* @__PURE__ */ jsx(SubscriptionPlanDetails, { subscription }),
 		/* @__PURE__ */ jsx(Usage, {
 			currentItems: activePhase?.items,
 			usage: usageQuery.data,
@@ -2280,7 +2610,6 @@ const ActiveSubscription = ({ subscription, deploymentName }) => {
 		})
 	] });
 };
-
 //#endregion
 //#region src/pages/subscriptions/SubscriptionsList.tsx
 const formatDate = (dateString) => {
@@ -2354,7 +2683,6 @@ const SubscriptionItem = ({ subscription, isSelected, isExpired }) => {
 		}, subscription.id)
 	});
 };
-
 //#endregion
 //#region src/pages/SubscriptionsPage.tsx
 const SubscriptionsPage = () => {
@@ -2399,7 +2727,6 @@ const SubscriptionsPage = () => {
 		})]
 	});
 };
-
 //#endregion
 //#region src/pages/SubscriptionsPageSkeleton.tsx
 const SubscriptionsPageSkeleton = () => /* @__PURE__ */ jsx("div", {
@@ -2433,7 +2760,6 @@ const SubscriptionsPageSkeleton = () => /* @__PURE__ */ jsx("div", {
 		]
 	})
 });
-
 //#endregion
 //#region src/ZuploMonetizationPlugin.tsx
 const PRICING_PATH = "/pricing";
@@ -2520,6 +2846,5 @@ const zuploMonetizationPlugin = createPlugin((options = {}) => ({
 		];
 	}
 }));
-
 //#endregion
-export { zuploMonetizationPlugin };
+export { zuploMonetizationPlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuplo/zudoku-plugin-monetization",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "repository": {
     "type": "git",
     "url": "https://github.com/zuplo/zudoku",
@@ -27,11 +27,11 @@
     "@testing-library/react": "16.3.2",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "happy-dom": "20.8.9",
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
-    "tsdown": "0.20.3",
-    "zudoku": "0.75.0"
+    "happy-dom": "20.9.0",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
+    "tsdown": "0.21.9",
+    "zudoku": "0.76.0"
   },
   "peerDependencies": {
     "react": ">=19.2.0",