@zuplo/zudoku-plugin-monetization 0.0.30 → 0.0.32

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,7 +6,7 @@ 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";
@@ -23,7 +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", {
@@ -41,7 +40,6 @@ const FeatureItem = ({ feature, className }) => {
 		})]
 	});
 };
-
 //#endregion
 //#region src/components/QuotaItem.tsx
 const QuotaItem = ({ quota, className }) => {
@@ -70,7 +68,6 @@ const QuotaItem = ({ quota, className }) => {
 		})]
 	});
 };
-
 //#endregion
 //#region src/hooks/useDeploymentName.ts
 const useDeploymentName = () => {
@@ -78,7 +75,6 @@ const useDeploymentName = () => {
 	if (!deploymentName) throw new Error("ZUPLO_PUBLIC_DEPLOYMENT_NAME is not set");
 	return deploymentName;
 };
-
 //#endregion
 //#region src/hooks/usePurchaseDetails.ts
 const usePurchaseDetails = (planId) => {
@@ -88,12 +84,10 @@ const usePurchaseDetails = (planId) => {
 		meta: { context: zudoku }
 	});
 };
-
 //#endregion
 //#region src/MonetizationContext.tsx
 const MonetizationContext = createContext({});
 const useMonetizationConfig = () => use(MonetizationContext);
-
 //#endregion
 //#region src/utils/formatDuration.ts
 const formatDuration = (iso) => {
@@ -146,7 +140,6 @@ const formatDurationAdjective = (iso) => {
 		return "billing period";
 	}
 };
-
 //#endregion
 //#region src/utils/formatPrice.ts
 const formatPrice = (amount, currency) => new Intl.NumberFormat("en-US", {
@@ -156,13 +149,21 @@ const formatPrice = (amount, currency) => new Intl.NumberFormat("en-US", {
 	maximumFractionDigits: 6,
 	trailingZeroDisplay: "stripIfInteger"
 }).format(amount);
-const formatPriceTwoDecimals = (amount, currency) => new Intl.NumberFormat("en-US", {
-	style: "currency",
-	currency: currency ?? "USD",
-	minimumFractionDigits: 2,
-	maximumFractionDigits: 2
-}).format(amount);
-
+/** Amount is in the smallest currency unit (e.g. Stripe); divisor from `Intl` / ISO 4217. */
+const formatMinorCurrencyAmount = (amountInMinorUnits, currency) => {
+	const code = (currency ?? "USD").toUpperCase();
+	const fractionDigits = new Intl.NumberFormat("en-US", {
+		style: "currency",
+		currency: code
+	}).resolvedOptions().maximumFractionDigits ?? 2;
+	const divisor = 10 ** fractionDigits;
+	return new Intl.NumberFormat("en-US", {
+		style: "currency",
+		currency: code,
+		minimumFractionDigits: fractionDigits,
+		maximumFractionDigits: fractionDigits
+	}).format(amountInMinorUnits / divisor);
+};
 //#endregion
 //#region src/utils/categorizeRateCards.ts
 const categorizeRateCards = (rateCards, options) => {
@@ -212,7 +213,6 @@ const categorizeRateCards = (rateCards, options) => {
 		features
 	};
 };
-
 //#endregion
 //#region src/utils/formatBillingCycle.ts
 const formatBillingCycle = (duration) => {
@@ -222,7 +222,6 @@ const formatBillingCycle = (duration) => {
 	if (duration === "day") return "daily";
 	return `every ${duration}`;
 };
-
 //#endregion
 //#region src/utils/getPriceFromPlan.ts
 const getPriceFromPlan = (plan) => {
@@ -231,7 +230,6 @@ const getPriceFromPlan = (plan) => {
 		yearly: plan.yearlyPrice != null ? parseFloat(plan.yearlyPrice) : 0
 	};
 };
-
 //#endregion
 //#region src/utils/purchaseDetails.ts
 const getPlanFromPurchaseDetails = (response) => {
@@ -249,7 +247,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";
@@ -321,7 +318,6 @@ const ZuploMonetizationWrapper = ({ options = {} }) => /* @__PURE__ */ jsx(Query
 		children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Outlet, {}) })
 	})
 });
-
 //#endregion
 //#region src/pages/CheckoutConfirmPage.tsx
 const CheckoutConfirmPage = () => {
@@ -418,8 +414,8 @@ const CheckoutConfirmPage = () => {
 												children: formatPrice(price.monthly, selectedPlan?.currency)
 											}),
 											taxAmount != null && /* @__PURE__ */ jsx("div", {
-												className: "text-xs font-normal mt-1",
-												children: taxInclusive ? `${formatPriceTwoDecimals(taxAmount, selectedPlan?.currency)} ${taxLabel} included` : `+ ${formatPriceTwoDecimals(taxAmount, selectedPlan?.currency)} ${taxLabel}`
+												className: "text-sm font-normal mt-1",
+												children: taxInclusive ? `${formatMinorCurrencyAmount(taxAmount, selectedPlan?.currency)} ${taxLabel} included` : `+ ${formatMinorCurrencyAmount(taxAmount, selectedPlan?.currency)} ${taxLabel}`
 											}),
 											billingCycle && /* @__PURE__ */ jsxs("div", {
 												className: "text-sm text-muted-foreground font-normal",
@@ -485,7 +481,6 @@ const CheckoutConfirmPage = () => {
 		})
 	});
 };
-
 //#endregion
 //#region src/components/RedirectPage.tsx
 const RedirectPage = ({ icon: Icon, title, description, url, children }) => {
@@ -534,7 +529,6 @@ const RedirectPage = ({ icon: Icon, title, description, url, children }) => {
 		})
 	});
 };
-
 //#endregion
 //#region src/hooks/useUrlUtils.ts
 const useUrlUtils = () => {
@@ -544,7 +538,6 @@ const useUrlUtils = () => {
 		return joinUrl(window.location.origin, basePath, path, searchParams ? `?${new URLSearchParams(searchParams)}` : void 0);
 	} };
 };
-
 //#endregion
 //#region src/pages/CheckoutPage.tsx
 const CheckoutPage = () => {
@@ -595,7 +588,6 @@ const CheckoutPage = () => {
 		})
 	});
 };
-
 //#endregion
 //#region src/pages/ManagePaymentPage.tsx
 const ManagePaymentPage = () => {
@@ -638,7 +630,6 @@ const ManagePaymentPage = () => {
 		})
 	});
 };
-
 //#endregion
 //#region src/hooks/usePlans.ts
 const usePlans = () => {
@@ -649,7 +640,6 @@ const usePlans = () => {
 		meta: { context: auth.isAuthenticated ? zudoku : void 0 }
 	});
 };
-
 //#endregion
 //#region src/pages/pricing/PricingCard.tsx
 const PhaseSection = ({ phase, currency, showName, billingCadence }) => {
@@ -756,7 +746,6 @@ const PricingCard = ({ plan, isPopular = false, isSubscribed = false }) => {
 		]
 	});
 };
-
 //#endregion
 //#region src/pages/PricingPage.tsx
 const PricingPage = () => {
@@ -807,7 +796,6 @@ const PricingPage = () => {
 		]
 	});
 };
-
 //#endregion
 //#region src/pages/PricingPageSkeleton.tsx
 const PricingPageSkeleton = () => /* @__PURE__ */ jsxs("div", {
@@ -838,7 +826,6 @@ const PricingPageSkeleton = () => /* @__PURE__ */ jsxs("div", {
 		}, i))
 	})]
 });
-
 //#endregion
 //#region src/pages/SubscriptionChangeConfirmPage.tsx
 const SubscriptionChangeConfirmPage = () => {
@@ -944,8 +931,8 @@ const SubscriptionChangeConfirmPage = () => {
 											children: formatPrice(price.monthly, selectedPlan?.currency)
 										}),
 										taxAmount != null && /* @__PURE__ */ jsx("div", {
-											className: "text-xs font-normal mt-1",
-											children: taxInclusive ? `${formatPriceTwoDecimals(taxAmount, selectedPlan?.currency)} ${taxLabel} included` : `+ ${formatPriceTwoDecimals(taxAmount, selectedPlan?.currency)} ${taxLabel}`
+											className: "text-sm font-normal mt-1",
+											children: taxInclusive ? `${formatMinorCurrencyAmount(taxAmount, selectedPlan?.currency)} ${taxLabel} included` : `+ ${formatMinorCurrencyAmount(taxAmount, selectedPlan?.currency)} ${taxLabel}`
 										}),
 										billingCycle && /* @__PURE__ */ jsxs("div", {
 											className: "text-sm text-muted-foreground font-normal",
@@ -1006,7 +993,6 @@ const SubscriptionChangeConfirmPage = () => {
 		})
 	});
 };
-
 //#endregion
 //#region src/hooks/useSubscriptions.ts
 const useSubscriptions = (environmentName) => {
@@ -1024,7 +1010,6 @@ const useSubscriptions = (environmentName) => {
 		})
 	});
 };
-
 //#endregion
 //#region src/pages/subscriptions/ConfirmDeleteKeyAlert.tsx
 const ConfirmDeleteKeyAlert = ({ children, onDelete }) => {
@@ -1036,10 +1021,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",
@@ -1050,8 +1034,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);
@@ -1059,7 +1042,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);
@@ -1116,7 +1099,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",
@@ -1131,7 +1114,7 @@ const ApiKey = ({ apiKey, createdAt, lastUsed, expiresOn, isActive = true, label
 						children: [
 							isExpired ? "Expired" : "Expires",
 							" on ",
-							formatDate$1(expiresOn)
+							formatDate$2(expiresOn)
 						]
 					})] })
 				]
@@ -1139,7 +1122,6 @@ const ApiKey = ({ apiKey, createdAt, lastUsed, expiresOn, isActive = true, label
 		})]
 	});
 };
-
 //#endregion
 //#region src/pages/subscriptions/ApiKeyInfo.tsx
 const ApiKeyInfo = () => /* @__PURE__ */ jsxs(DismissibleAlert, {
@@ -1159,7 +1141,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, {
@@ -1169,7 +1150,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", {
@@ -1249,7 +1229,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, {})
 				]
@@ -1321,7 +1301,6 @@ const ApiKeysList = ({ isPendingFirstPayment, apiKeys, deploymentName, consumerI
 		]
 	});
 };
-
 //#endregion
 //#region src/pages/subscriptions/CancelSubscriptionDialog.tsx
 const CancelSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionId, billingPeriodEnd }) => {
@@ -1361,7 +1340,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."
 								] })
 							]
@@ -1374,7 +1353,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."
 								] })
 							]
@@ -1428,7 +1407,6 @@ const CancelSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionId
 		})
 	});
 };
-
 //#endregion
 //#region src/pages/subscriptions/RestoreSubscriptionDialog.tsx
 const RestoreSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionId, billingPeriodEnd }) => {
@@ -1478,7 +1456,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." })]
@@ -1510,7 +1488,6 @@ const RestoreSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionI
 		})
 	});
 };
-
 //#endregion
 //#region src/pages/subscriptions/SwitchPlanModal.tsx
 const getAllKeysAcrossPhases = (plan, units) => {
@@ -1660,6 +1637,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",
@@ -1850,12 +1828,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);
@@ -1905,6 +1900,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", {
@@ -1976,7 +1978,6 @@ const SwitchPlanModal = ({ subscription, children }) => {
 		}) })]
 	});
 };
-
 //#endregion
 //#region src/pages/subscriptions/ManageSubscription.tsx
 const ManageSubscription = ({ subscription, planName }) => {
@@ -2068,7 +2069,217 @@ 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 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
+			});
+			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 featureRows = [];
+	for (const phase of phases) {
+		const { features } = getEntitlementsFromItems(phase.items ?? [], currency, units, subscription.billingCadence);
+		for (const f of features) featureRows.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,
+			value: f.entitlementType === "static" ? f.value : void 0,
+			phaseId: phase.id,
+			activeFrom: phase.activeFrom,
+			activeTo: phase.activeTo
+		});
+	}
+	return { featureRows };
+};
+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 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 { featureRows } = 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__ */ jsx("dd", {
+						className: "flex flex-wrap items-baseline gap-1",
+						children: primaryPrice
+					})] }),
+					/* @__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) : "—"
+					})] })
+				]
+			}), featureRows.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}`))
+					})]
+				})
+			}) : null]
+		})] })]
+	});
+};
 //#endregion
 //#region src/pages/subscriptions/Usage.tsx
 const isMeteredEntitlement = (entitlement) => {
@@ -2228,7 +2439,6 @@ const Usage = ({ usage, isFetching, currentItems, subscription, isPendingFirstPa
 		]
 	});
 };
-
 //#endregion
 //#region src/pages/subscriptions/ActiveSubscription.tsx
 const ActiveSubscription = ({ subscription, deploymentName }) => {
@@ -2252,6 +2462,7 @@ const ActiveSubscription = ({ subscription, deploymentName }) => {
 				/* @__PURE__ */ jsx(DismissibleAlertAction, {})
 			]
 		}),
+		/* @__PURE__ */ jsx(SubscriptionPlanDetails, { subscription }),
 		/* @__PURE__ */ jsx(Usage, {
 			currentItems: activePhase?.items,
 			usage: usageQuery.data,
@@ -2271,7 +2482,6 @@ const ActiveSubscription = ({ subscription, deploymentName }) => {
 		})
 	] });
 };
-
 //#endregion
 //#region src/pages/subscriptions/SubscriptionsList.tsx
 const formatDate = (dateString) => {
@@ -2345,7 +2555,6 @@ const SubscriptionItem = ({ subscription, isSelected, isExpired }) => {
 		}, subscription.id)
 	});
 };
-
 //#endregion
 //#region src/pages/SubscriptionsPage.tsx
 const SubscriptionsPage = () => {
@@ -2390,7 +2599,6 @@ const SubscriptionsPage = () => {
 		})]
 	});
 };
-
 //#endregion
 //#region src/pages/SubscriptionsPageSkeleton.tsx
 const SubscriptionsPageSkeleton = () => /* @__PURE__ */ jsx("div", {
@@ -2424,7 +2632,6 @@ const SubscriptionsPageSkeleton = () => /* @__PURE__ */ jsx("div", {
 		]
 	})
 });
-
 //#endregion
 //#region src/ZuploMonetizationPlugin.tsx
 const PRICING_PATH = "/pricing";
@@ -2511,6 +2718,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.30",
+  "version": "0.0.32",
   "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",