@zuplo/zudoku-plugin-monetization 0.0.31 → 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", {
@@ -171,7 +164,6 @@ const formatMinorCurrencyAmount = (amountInMinorUnits, currency) => {
 		maximumFractionDigits: fractionDigits
 	}).format(amountInMinorUnits / divisor);
 };
-
 //#endregion
 //#region src/utils/categorizeRateCards.ts
 const categorizeRateCards = (rateCards, options) => {
@@ -221,7 +213,6 @@ const categorizeRateCards = (rateCards, options) => {
 		features
 	};
 };
-
 //#endregion
 //#region src/utils/formatBillingCycle.ts
 const formatBillingCycle = (duration) => {
@@ -231,7 +222,6 @@ const formatBillingCycle = (duration) => {
 	if (duration === "day") return "daily";
 	return `every ${duration}`;
 };
-
 //#endregion
 //#region src/utils/getPriceFromPlan.ts
 const getPriceFromPlan = (plan) => {
@@ -240,7 +230,6 @@ const getPriceFromPlan = (plan) => {
 		yearly: plan.yearlyPrice != null ? parseFloat(plan.yearlyPrice) : 0
 	};
 };
-
 //#endregion
 //#region src/utils/purchaseDetails.ts
 const getPlanFromPurchaseDetails = (response) => {
@@ -258,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";
@@ -330,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 = () => {
@@ -494,7 +481,6 @@ const CheckoutConfirmPage = () => {
 		})
 	});
 };
-
 //#endregion
 //#region src/components/RedirectPage.tsx
 const RedirectPage = ({ icon: Icon, title, description, url, children }) => {
@@ -543,7 +529,6 @@ const RedirectPage = ({ icon: Icon, title, description, url, children }) => {
 		})
 	});
 };
-
 //#endregion
 //#region src/hooks/useUrlUtils.ts
 const useUrlUtils = () => {
@@ -553,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 = () => {
@@ -604,7 +588,6 @@ const CheckoutPage = () => {
 		})
 	});
 };
-
 //#endregion
 //#region src/pages/ManagePaymentPage.tsx
 const ManagePaymentPage = () => {
@@ -647,7 +630,6 @@ const ManagePaymentPage = () => {
 		})
 	});
 };
-
 //#endregion
 //#region src/hooks/usePlans.ts
 const usePlans = () => {
@@ -658,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 }) => {
@@ -765,7 +746,6 @@ const PricingCard = ({ plan, isPopular = false, isSubscribed = false }) => {
 		]
 	});
 };
-
 //#endregion
 //#region src/pages/PricingPage.tsx
 const PricingPage = () => {
@@ -816,7 +796,6 @@ const PricingPage = () => {
 		]
 	});
 };
-
 //#endregion
 //#region src/pages/PricingPageSkeleton.tsx
 const PricingPageSkeleton = () => /* @__PURE__ */ jsxs("div", {
@@ -847,7 +826,6 @@ const PricingPageSkeleton = () => /* @__PURE__ */ jsxs("div", {
 		}, i))
 	})]
 });
-
 //#endregion
 //#region src/pages/SubscriptionChangeConfirmPage.tsx
 const SubscriptionChangeConfirmPage = () => {
@@ -1015,7 +993,6 @@ const SubscriptionChangeConfirmPage = () => {
 		})
 	});
 };
-
 //#endregion
 //#region src/hooks/useSubscriptions.ts
 const useSubscriptions = (environmentName) => {
@@ -1033,7 +1010,6 @@ const useSubscriptions = (environmentName) => {
 		})
 	});
 };
-
 //#endregion
 //#region src/pages/subscriptions/ConfirmDeleteKeyAlert.tsx
 const ConfirmDeleteKeyAlert = ({ children, onDelete }) => {
@@ -1045,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",
@@ -1059,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);
@@ -1068,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);
@@ -1125,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",
@@ -1140,7 +1114,7 @@ const ApiKey = ({ apiKey, createdAt, lastUsed, expiresOn, isActive = true, label
 						children: [
 							isExpired ? "Expired" : "Expires",
 							" on ",
-							formatDate$1(expiresOn)
+							formatDate$2(expiresOn)
 						]
 					})] })
 				]
@@ -1148,7 +1122,6 @@ const ApiKey = ({ apiKey, createdAt, lastUsed, expiresOn, isActive = true, label
 		})]
 	});
 };
-
 //#endregion
 //#region src/pages/subscriptions/ApiKeyInfo.tsx
 const ApiKeyInfo = () => /* @__PURE__ */ jsxs(DismissibleAlert, {
@@ -1168,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, {
@@ -1178,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", {
@@ -1258,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, {})
 				]
@@ -1330,7 +1301,6 @@ const ApiKeysList = ({ isPendingFirstPayment, apiKeys, deploymentName, consumerI
 		]
 	});
 };
-
 //#endregion
 //#region src/pages/subscriptions/CancelSubscriptionDialog.tsx
 const CancelSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionId, billingPeriodEnd }) => {
@@ -1370,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."
 								] })
 							]
@@ -1383,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."
 								] })
 							]
@@ -1437,7 +1407,6 @@ const CancelSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionId
 		})
 	});
 };
-
 //#endregion
 //#region src/pages/subscriptions/RestoreSubscriptionDialog.tsx
 const RestoreSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionId, billingPeriodEnd }) => {
@@ -1487,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." })]
@@ -1519,7 +1488,6 @@ const RestoreSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionI
 		})
 	});
 };
-
 //#endregion
 //#region src/pages/subscriptions/SwitchPlanModal.tsx
 const getAllKeysAcrossPhases = (plan, units) => {
@@ -1669,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",
@@ -1859,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);
@@ -1914,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", {
@@ -1985,7 +1978,6 @@ const SwitchPlanModal = ({ subscription, children }) => {
 		}) })]
 	});
 };
-
 //#endregion
 //#region src/pages/subscriptions/ManageSubscription.tsx
 const ManageSubscription = ({ subscription, planName }) => {
@@ -2077,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) => {
@@ -2237,7 +2439,6 @@ const Usage = ({ usage, isFetching, currentItems, subscription, isPendingFirstPa
 		]
 	});
 };
-
 //#endregion
 //#region src/pages/subscriptions/ActiveSubscription.tsx
 const ActiveSubscription = ({ subscription, deploymentName }) => {
@@ -2261,6 +2462,7 @@ const ActiveSubscription = ({ subscription, deploymentName }) => {
 				/* @__PURE__ */ jsx(DismissibleAlertAction, {})
 			]
 		}),
+		/* @__PURE__ */ jsx(SubscriptionPlanDetails, { subscription }),
 		/* @__PURE__ */ jsx(Usage, {
 			currentItems: activePhase?.items,
 			usage: usageQuery.data,
@@ -2280,7 +2482,6 @@ const ActiveSubscription = ({ subscription, deploymentName }) => {
 		})
 	] });
 };
-
 //#endregion
 //#region src/pages/subscriptions/SubscriptionsList.tsx
 const formatDate = (dateString) => {
@@ -2354,7 +2555,6 @@ const SubscriptionItem = ({ subscription, isSelected, isExpired }) => {
 		}, subscription.id)
 	});
 };
-
 //#endregion
 //#region src/pages/SubscriptionsPage.tsx
 const SubscriptionsPage = () => {
@@ -2399,7 +2599,6 @@ const SubscriptionsPage = () => {
 		})]
 	});
 };
-
 //#endregion
 //#region src/pages/SubscriptionsPageSkeleton.tsx
 const SubscriptionsPageSkeleton = () => /* @__PURE__ */ jsx("div", {
@@ -2433,7 +2632,6 @@ const SubscriptionsPageSkeleton = () => /* @__PURE__ */ jsx("div", {
 		]
 	})
 });
-
 //#endregion
 //#region src/ZuploMonetizationPlugin.tsx
 const PRICING_PATH = "/pricing";
@@ -2520,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.31",
+  "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",