@zuplo/zudoku-plugin-monetization 0.0.27 → 0.0.29

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import * as zudoku from "zudoku";
 import "react";
+import * as zudoku from "zudoku";
 
 //#region src/MonetizationContext.d.ts
 interface MonetizationConfig {

package/dist/index.mjs

@@ -1,3 +1,4 @@
+import { Suspense, createContext, use, useEffect, useMemo, useState } from "react";
 import { cn, createPlugin, joinUrl, throwIfProblemJson } from "zudoku";
 import { AlertTriangleIcon, ArrowDownIcon, ArrowLeftRightIcon, ArrowUpIcon, CalendarIcon, CheckCheckIcon, CheckIcon, CircleSlashIcon, ClockIcon, CreditCardIcon, Grid2x2XIcon, InfoIcon, Loader2Icon, LockIcon, MoreVerticalIcon, RefreshCcw, RefreshCwIcon, Settings, ShieldIcon, StarsIcon, Trash2Icon, XIcon } from "zudoku/icons";
 import { Button, ClientOnly, Head, Heading, Link, Slot } from "zudoku/components";
@@ -8,9 +9,9 @@ import { Alert, AlertAction, AlertDescription, AlertTitle } from "zudoku/ui/Aler
 import { Card, CardContent, CardHeader, CardTitle } from "zudoku/ui/Card";
 import { Separator } from "zudoku/ui/Separator";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createContext, use, useEffect, useMemo, useState } from "react";
 import { parse } from "tinyduration";
 import { Button as Button$1 } from "zudoku/ui/Button";
+import { Skeleton } from "zudoku/ui/Skeleton";
 import { DismissibleAlert, DismissibleAlertAction } from "zudoku/ui/DismissibleAlert";
 import { ActionButton } from "zudoku/ui/ActionButton";
 import { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "zudoku/ui/Item";
@@ -78,6 +79,16 @@ const useDeploymentName = () => {
 	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({});
@@ -215,6 +226,24 @@ const getPriceFromPlan = (plan) => {
 	};
 };
 
+//#endregion
+//#region src/utils/purchaseDetails.ts
+const getPlanFromPurchaseDetails = (response) => {
+	return response;
+};
+const getTaxAmountFromPurchaseDetails = (response) => {
+	const taxAmount = response?.tax?.taxAmount;
+	const numericAmount = typeof taxAmount === "number" ? taxAmount : Number.parseFloat(taxAmount ?? "");
+	if (!Number.isFinite(numericAmount)) return;
+	return numericAmount;
+};
+const getTaxLabelFromPurchaseDetails = (response) => {
+	return (response.tax?.taxes ?? []).some((tax) => tax.taxType?.toLowerCase() === "vat") ? "VAT" : "tax";
+};
+const isTaxInclusiveFromPurchaseDetails = (response) => {
+	return response.tax?.taxInclusive === true;
+};
+
 //#endregion
 //#region src/ZuploMonetizationWrapper.tsx
 const DEFAULT_GATEWAY_URL = "https://api.zuploedge.com";
@@ -289,15 +318,6 @@ const ZuploMonetizationWrapper = ({ options = {} }) => /* @__PURE__ */ jsx(Query
 
 //#endregion
 //#region src/pages/CheckoutConfirmPage.tsx
-const getPlanFromPurchaseDetails = (response) => {
-	return "plan" in response ? response.plan : response;
-};
-const getTaxAmountFromPurchaseDetails = (response) => {
-	const taxAmount = response?.tax?.amount;
-	const numericAmount = typeof taxAmount === "number" ? taxAmount : Number.parseFloat(taxAmount ?? "");
-	if (!Number.isFinite(numericAmount)) return;
-	return numericAmount;
-};
 const CheckoutConfirmPage = () => {
 	const [search] = useSearchParams();
 	const planId = search.get("planId");
@@ -306,12 +326,11 @@ const CheckoutConfirmPage = () => {
 	const navigate = useNavigate();
 	const { pricing } = useMonetizationConfig();
 	if (!planId) throw new Error("Parameter `planId` missing");
-	const purchaseDetails = useSuspenseQuery({
-		queryKey: [`/v3/zudoku-metering/${deploymentName}/plans/${planId}/purchase-details`],
-		meta: { context: zudoku }
-	});
+	const purchaseDetails = usePurchaseDetails(planId);
 	const selectedPlan = getPlanFromPurchaseDetails(purchaseDetails.data);
 	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,
@@ -396,13 +415,9 @@ const CheckoutConfirmPage = () => {
 												className: "text-sm text-muted-foreground font-normal",
 												children: ["Billed ", formatBillingCycle(billingCycle)]
 											}),
-											taxAmount != null && /* @__PURE__ */ jsxs("div", {
+											taxAmount != null && /* @__PURE__ */ jsx("div", {
 												className: "text-xs text-muted-foreground font-normal mt-1",
-												children: [
-													"+ ",
-													formatPrice(taxAmount, selectedPlan?.currency),
-													" VAT"
-												]
+												children: taxInclusive ? `${formatPrice(taxAmount, selectedPlan?.currency)} ${taxLabel} included` : `+ ${formatPrice(taxAmount, selectedPlan?.currency)} ${taxLabel}`
 											})
 										]
 									}),
@@ -781,20 +796,55 @@ const PricingPage = () => {
 	});
 };
 
+//#endregion
+//#region src/pages/PricingPageSkeleton.tsx
+const PricingPageSkeleton = () => /* @__PURE__ */ jsxs("div", {
+	className: "w-full px-4 pt-(--padding-content-top) pb-(--padding-content-bottom)",
+	children: [/* @__PURE__ */ jsxs("div", {
+		className: "text-center space-y-4 mb-12",
+		children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-48 mx-auto" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-96 mx-auto" })]
+	}), /* @__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: [
+			1,
+			2,
+			3
+		].map((i) => /* @__PURE__ */ jsxs(Card, {
+			className: "w-[300px]",
+			children: [/* @__PURE__ */ jsxs(CardHeader, {
+				className: "space-y-3",
+				children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-24" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-32" })]
+			}), /* @__PURE__ */ jsxs(CardContent, {
+				className: "space-y-3",
+				children: [
+					/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
+					/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
+					/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" }),
+					/* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full mt-4" })
+				]
+			})]
+		}, i))
+	})]
+});
+
 //#endregion
 //#region src/pages/SubscriptionChangeConfirmPage.tsx
 const SubscriptionChangeConfirmPage = () => {
 	const [search] = useSearchParams();
 	const planId = search.get("planId");
 	const subscriptionId = search.get("subscriptionId");
+	const mode = search.get("mode");
 	const zudoku = useZudoku();
 	const deploymentName = useDeploymentName();
 	const navigate = useNavigate();
-	const { data: plans } = usePlans();
 	const { pricing } = useMonetizationConfig();
-	const selectedPlan = plans?.items?.find((plan) => plan.id === planId);
 	if (!planId) throw new Error("Parameter `planId` missing");
 	if (!subscriptionId) throw new Error("Parameter `subscriptionId` missing");
+	const purchaseDetails = usePurchaseDetails(planId);
+	const selectedPlan = getPlanFromPurchaseDetails(purchaseDetails.data);
+	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,
@@ -803,6 +853,7 @@ const SubscriptionChangeConfirmPage = () => {
 	});
 	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.";
 	const changeMutation = useMutation({
 		mutationKey: [`/v3/zudoku-metering/${deploymentName}/subscriptions/${subscriptionId}/change`],
 		meta: {
@@ -837,13 +888,20 @@ const SubscriptionChangeConfirmPage = () => {
 					}),
 					/* @__PURE__ */ jsxs("div", {
 						className: "text-center mb-8",
-						children: [/* @__PURE__ */ jsx("h1", {
-							className: "text-2xl font-bold text-card-foreground mb-3",
-							children: "Confirm plan change"
-						}), /* @__PURE__ */ jsx("p", {
-							className: "text-muted-foreground text-base",
-							children: "Please confirm the details below to change your subscription."
-						})]
+						children: [
+							/* @__PURE__ */ jsx("h1", {
+								className: "text-2xl font-bold text-card-foreground mb-3",
+								children: "Confirm plan change"
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: "text-muted-foreground text-base",
+								children: effectiveChangeMessage
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: "text-muted-foreground text-base",
+								children: "Please confirm the details below to change your subscription."
+							})
+						]
 					}),
 					selectedPlan && /* @__PURE__ */ jsxs(Card, {
 						className: "bg-muted/50",
@@ -868,13 +926,20 @@ const SubscriptionChangeConfirmPage = () => {
 								}),
 								price && price.monthly > 0 && /* @__PURE__ */ jsxs("div", {
 									className: "text-right",
-									children: [/* @__PURE__ */ jsx("div", {
-										className: "text-2xl font-bold",
-										children: formatPrice(price.monthly, selectedPlan?.currency)
-									}), billingCycle && /* @__PURE__ */ jsxs("div", {
-										className: "text-sm text-muted-foreground font-normal",
-										children: ["Billed ", formatBillingCycle(billingCycle)]
-									})]
+									children: [
+										/* @__PURE__ */ jsx("div", {
+											className: "text-2xl font-bold",
+											children: formatPrice(price.monthly, selectedPlan?.currency)
+										}),
+										billingCycle && /* @__PURE__ */ jsxs("div", {
+											className: "text-sm text-muted-foreground font-normal",
+											children: ["Billed ", formatBillingCycle(billingCycle)]
+										}),
+										taxAmount != null && /* @__PURE__ */ jsx("div", {
+											className: "text-xs text-muted-foreground font-normal mt-1",
+											children: taxInclusive ? `${formatPrice(taxAmount, selectedPlan?.currency)} ${taxLabel} included` : `+ ${formatPrice(taxAmount, selectedPlan?.currency)} ${taxLabel}`
+										})
+									]
 								}),
 								price && price.monthly === 0 && /* @__PURE__ */ jsx("div", {
 									className: "text-2xl text-muted-foreground font-bold",
@@ -936,7 +1001,15 @@ const useSubscriptions = (environmentName) => {
 	const zudoku = useZudoku();
 	return useSuspenseQuery({
 		queryKey: [`/v3/zudoku-metering/${environmentName}/subscriptions`],
-		meta: { context: zudoku }
+		meta: { context: zudoku },
+		select: (data) => ({
+			...data,
+			items: [...data.items].sort((a, b) => {
+				if (a.status === "active" && b.status !== "active") return -1;
+				if (a.status !== "active" && b.status === "active") return 1;
+				return 0;
+			})
+		})
 	});
 };
 
@@ -1428,6 +1501,23 @@ const RestoreSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionI
 
 //#endregion
 //#region src/pages/subscriptions/SwitchPlanModal.tsx
+const getAllKeysAcrossPhases = (plan, units) => {
+	const quotaKeys = /* @__PURE__ */ new Set();
+	const featureKeys = /* @__PURE__ */ new Set();
+	for (const phase of plan.phases) {
+		const { quotas, features } = categorizeRateCards(phase.rateCards, {
+			currency: plan.currency,
+			units,
+			planBillingCadence: plan.billingCadence
+		});
+		for (const q of quotas) quotaKeys.add(q.key);
+		for (const f of features) featureKeys.add(f.key);
+	}
+	return {
+		quotaKeys,
+		featureKeys
+	};
+};
 const comparePlans = (currentPlan, targetPlan, currentIndex, targetIndex, units) => {
 	const isUpgrade = targetIndex > currentIndex;
 	const currentPhase = currentPlan?.phases.at(-1);
@@ -1448,6 +1538,11 @@ const comparePlans = (currentPlan, targetPlan, currentIndex, targetIndex, units)
 		quotas: [],
 		features: []
 	};
+	const currentAllKeys = currentPlan ? getAllKeysAcrossPhases(currentPlan, units) : {
+		quotaKeys: /* @__PURE__ */ new Set(),
+		featureKeys: /* @__PURE__ */ new Set()
+	};
+	const targetAllKeys = getAllKeysAcrossPhases(targetPlan, units);
 	const quotaChanges = [];
 	const allQuotaKeys = new Set([...currentQuotas.map((q) => q.key), ...targetQuotas.map((q) => q.key)]);
 	for (const key of allQuotaKeys) {
@@ -1465,22 +1560,37 @@ const comparePlans = (currentPlan, targetPlan, currentIndex, targetIndex, units)
 				period: target.period,
 				change
 			});
-		} else if (target && !current) quotaChanges.push({
-			key: key ?? "",
-			name: target.name,
-			currentValue: null,
-			newValue: target.limit,
-			period: target.period,
-			change: "added"
-		});
-		else if (current && !target) quotaChanges.push({
-			key: key ?? "",
-			name: current.name,
-			currentValue: current.limit,
-			newValue: null,
-			period: current.period,
-			change: "removed"
-		});
+		} else if (target && !current) {
+			if (currentAllKeys.featureKeys.has(key)) {
+				quotaChanges.push({
+					key: key ?? "",
+					name: target.name,
+					currentValue: null,
+					newValue: target.limit,
+					period: target.period,
+					change: "same"
+				});
+				continue;
+			}
+			quotaChanges.push({
+				key: key ?? "",
+				name: target.name,
+				currentValue: null,
+				newValue: target.limit,
+				period: target.period,
+				change: "added"
+			});
+		} else if (current && !target) {
+			if (targetAllKeys.featureKeys.has(key)) continue;
+			quotaChanges.push({
+				key: key ?? "",
+				name: current.name,
+				currentValue: current.limit,
+				newValue: null,
+				period: current.period,
+				change: "removed"
+			});
+		}
 	}
 	const featureChanges = [];
 	const allFeatureKeys = new Set([...currentFeatures.map((f) => f.key), ...targetFeatures.map((f) => f.key)]);
@@ -1497,20 +1607,34 @@ const comparePlans = (currentPlan, targetPlan, currentIndex, targetIndex, units)
 				newValue: target.value ?? true,
 				change
 			});
-		} else if (target && !current) featureChanges.push({
-			key: key ?? "",
-			name: target.name,
-			currentValue: null,
-			newValue: target.value ?? true,
-			change: "added"
-		});
-		else if (current && !target) featureChanges.push({
-			key: key ?? "",
-			name: current.name,
-			currentValue: current.value ?? true,
-			newValue: null,
-			change: "removed"
-		});
+		} else if (target && !current) {
+			if (currentAllKeys.quotaKeys.has(key)) {
+				featureChanges.push({
+					key: key ?? "",
+					name: target.name,
+					currentValue: true,
+					newValue: target.value ?? true,
+					change: "same"
+				});
+				continue;
+			}
+			featureChanges.push({
+				key: key ?? "",
+				name: target.name,
+				currentValue: null,
+				newValue: target.value ?? true,
+				change: "added"
+			});
+		} else if (current && !target) {
+			if (targetAllKeys.quotaKeys.has(key)) continue;
+			featureChanges.push({
+				key: key ?? "",
+				name: current.name,
+				currentValue: current.value ?? true,
+				newValue: null,
+				change: "removed"
+			});
+		}
 	}
 	return {
 		plan: targetPlan,
@@ -1529,11 +1653,16 @@ const modeLabelMap = {
 	downgrade: "Downgrade",
 	private: "Switch"
 };
-const PlanComparisonItem = ({ comparison, subscriptionId, mode, onRequestChange }) => {
+const isSwitchPlanTarget = (value) => {
+	if (typeof value !== "object" || value === null) return false;
+	if (!("subscriptionId" in value) || !("plan" in value) || !("mode" in value)) return false;
+	return true;
+};
+const PlanComparisonItem = ({ comparison, subscriptionId, mode, onRequestChange, isSwitching }) => {
 	const price = getPriceFromPlan(comparison.plan);
 	const isCustom = comparison.plan.key === "enterprise";
 	const displayPrice = price.monthly;
-	const hasChanges = comparison.quotaChanges.some((q) => q.change !== "same") || comparison.featureChanges.some((f) => f.change !== "same");
+	const hasChanges = comparison.quotaChanges.length > 0 || comparison.featureChanges.length > 0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "border rounded-lg p-4",
 		children: [/* @__PURE__ */ jsxs("div", {
@@ -1569,11 +1698,12 @@ const PlanComparisonItem = ({ comparison, subscriptionId, mode, onRequestChange
 					mode
 				}),
 				size: "sm",
+				disabled: isSwitching,
 				children: modeLabelMap[mode]
 			})]
 		}), hasChanges && /* @__PURE__ */ jsxs("div", {
 			className: "space-y-1.5",
-			children: [comparison.quotaChanges.filter((q) => q.change !== "same").map((quota) => /* @__PURE__ */ jsxs("div", {
+			children: [comparison.quotaChanges.map((quota) => /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2 text-sm",
 				children: [
 					/* @__PURE__ */ jsx(ChangeIndicator, { change: quota.change }),
@@ -1581,7 +1711,14 @@ const PlanComparisonItem = ({ comparison, subscriptionId, mode, onRequestChange
 						className: "font-medium",
 						children: [quota.name, ":"]
 					}),
-					quota.change === "added" ? /* @__PURE__ */ jsx("span", {
+					quota.change === "same" ? /* @__PURE__ */ jsxs("span", {
+						className: "text-muted-foreground",
+						children: [
+							(quota.newValue ?? quota.currentValue)?.toLocaleString(),
+							"/",
+							quota.period
+						]
+					}) : quota.change === "added" ? /* @__PURE__ */ jsx("span", {
 						className: "text-green-600",
 						children: "Now included"
 					}) : quota.change === "removed" ? /* @__PURE__ */ jsx("span", {
@@ -1610,9 +1747,12 @@ const PlanComparisonItem = ({ comparison, subscriptionId, mode, onRequestChange
 						})
 					] })
 				]
-			}, quota.key)), comparison.featureChanges.filter((f) => f.change !== "same").map((feature) => /* @__PURE__ */ jsx("div", {
+			}, quota.key)), comparison.featureChanges.map((feature) => /* @__PURE__ */ jsx("div", {
 				className: "flex items-center gap-2 text-sm",
-				children: feature.change === "added" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				children: feature.change === "same" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-green-600 shrink-0" }), /* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground",
+					children: [feature.name, typeof feature.newValue === "string" ? `: ${feature.newValue}` : typeof feature.currentValue === "string" ? `: ${feature.currentValue}` : ""]
+				})] }) : feature.change === "added" ? /* @__PURE__ */ jsxs(Fragment, { children: [
 					/* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-green-600 shrink-0" }),
 					/* @__PURE__ */ jsx("span", {
 						className: "text-muted-foreground font-medium",
@@ -1663,24 +1803,32 @@ const PlanComparisonItem = ({ comparison, subscriptionId, mode, onRequestChange
 		})]
 	});
 };
-const ConfirmSwitchAlert = ({ switchTo, onRequestClose }) => {
+const SwitchPlanModal = ({ subscription, children }) => {
+	const [open, setOpen] = useState(false);
+	const { data: plansData } = usePlans();
+	const { pricing } = useMonetizationConfig();
 	const deploymentName = useDeploymentName();
 	const context = useZudoku();
 	const { generateUrl } = useUrlUtils();
-	const mutation = useMutation({
+	const switchPlanMutation = useMutation({
 		mutationKey: [`/v3/zudoku-metering/${deploymentName}/stripe/checkout`],
 		meta: {
 			context,
-			request: {
-				method: "POST",
-				body: JSON.stringify({
-					planId: switchTo.plan.id,
-					successURL: generateUrl(`/subscription-change-confirm`, { searchParams: {
+			request: (variables) => {
+				if (!isSwitchPlanTarget(variables)) throw new Error("Couldn't start the plan change. Please refresh and try again.");
+				const switchTo = variables;
+				return {
+					method: "POST",
+					body: JSON.stringify({
 						planId: switchTo.plan.id,
-						subscriptionId: switchTo.subscriptionId
-					} }),
-					cancelURL: generateUrl("/subscriptions", { searchParams: { subscriptionId: switchTo.subscriptionId } })
-				})
+						successURL: generateUrl(`/subscription-change-confirm`, { searchParams: {
+							planId: switchTo.plan.id,
+							subscriptionId: switchTo.subscriptionId,
+							mode: switchTo.mode
+						} }),
+						cancelURL: generateUrl("/subscriptions", { searchParams: { subscriptionId: switchTo.subscriptionId } })
+					})
+				};
 			}
 		},
 		retry: false,
@@ -1688,39 +1836,7 @@ const ConfirmSwitchAlert = ({ switchTo, onRequestClose }) => {
 			window.location.href = data.url;
 		}
 	});
-	return /* @__PURE__ */ jsx(AlertDialog, {
-		open: true,
-		onOpenChange: onRequestClose,
-		children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
-			/* @__PURE__ */ jsxs(AlertDialogTitle, { children: [
-				"Confirm",
-				" ",
-				switchTo.mode === "private" ? "plan change" : switchTo.mode === "upgrade" ? "upgrade" : "downgrade"
-			] }),
-			mutation.isError && /* @__PURE__ */ jsx(Alert, {
-				variant: "destructive",
-				children: /* @__PURE__ */ jsx(AlertDescription, {
-					className: "first-letter:uppercase",
-					children: mutation.error.message
-				})
-			}),
-			/* @__PURE__ */ jsx(AlertDialogDescription, { children: switchTo.mode === "private" ? `Are you sure you want to switch to ${switchTo.plan.name}? This will take effect immediately.` : switchTo.mode === "upgrade" ? `Are you sure you want to upgrade to ${switchTo.plan.name}? This will take effect immediately.` : `Are you sure you want to downgrade to ${switchTo.plan.name}? This will take effect at the start of your next billing cycle.` })
-		] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, {
-			disabled: mutation.isPending,
-			children: "Cancel"
-		}), /* @__PURE__ */ jsx(ActionButton, {
-			isPending: mutation.isPending,
-			onClick: () => mutation.mutate(),
-			children: modeLabelMap[switchTo.mode]
-		})] })] })
-	});
-};
-const SwitchPlanModal = ({ subscription, children }) => {
-	const [open, setOpen] = useState(false);
-	const { data: plansData } = usePlans();
-	const [switchTo, setSwitchTo] = useState(null);
-	const { pricing } = useMonetizationConfig();
-	const currentPlan = plansData?.items.find((p) => p.id === subscription.plan.id);
+	const currentPlan = plansData?.items.find((p) => p.key === subscription.plan.key);
 	const { upgrades, downgrades, privatePlans } = useMemo(() => {
 		if (!plansData?.items || !currentPlan) return {
 			upgrades: [],
@@ -1742,10 +1858,7 @@ const SwitchPlanModal = ({ subscription, children }) => {
 		currentPlan,
 		pricing?.units
 	]);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [switchTo !== null && /* @__PURE__ */ jsx(ConfirmSwitchAlert, {
-		switchTo,
-		onRequestClose: () => setSwitchTo(null)
-	}), /* @__PURE__ */ jsxs(Dialog, {
+	return /* @__PURE__ */ jsxs(Dialog, {
 		open,
 		onOpenChange: setOpen,
 		children: [/* @__PURE__ */ jsx(DialogTrigger, {
@@ -1766,6 +1879,13 @@ const SwitchPlanModal = ({ subscription, children }) => {
 			}), /* @__PURE__ */ jsxs("div", {
 				className: "mt-4 space-y-6",
 				children: [
+					switchPlanMutation.isError && /* @__PURE__ */ jsx(Alert, {
+						variant: "destructive",
+						children: /* @__PURE__ */ jsx(AlertDescription, {
+							className: "first-letter:uppercase",
+							children: switchPlanMutation.error.message
+						})
+					}),
 					currentPlan && /* @__PURE__ */ jsx(Item, {
 						variant: "outline",
 						children: /* @__PURE__ */ jsxs(ItemContent, { children: [/* @__PURE__ */ jsx(ItemTitle, { children: "Current Plan" }), /* @__PURE__ */ jsx(ItemDescription, {
@@ -1791,7 +1911,8 @@ const SwitchPlanModal = ({ subscription, children }) => {
 							comparison,
 							subscriptionId: subscription.id,
 							mode: "upgrade",
-							onRequestChange: setSwitchTo
+							onRequestChange: (target) => switchPlanMutation.mutate(target),
+							isSwitching: switchPlanMutation.isPending
 						}, comparison.plan.id))
 					})] }),
 					downgrades.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
@@ -1812,7 +1933,8 @@ const SwitchPlanModal = ({ subscription, children }) => {
 							comparison,
 							subscriptionId: subscription.id,
 							mode: "downgrade",
-							onRequestChange: setSwitchTo
+							onRequestChange: (target) => switchPlanMutation.mutate(target),
+							isSwitching: switchPlanMutation.isPending
 						}, comparison.plan.id))
 					})] }),
 					privatePlans.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
@@ -1833,13 +1955,14 @@ const SwitchPlanModal = ({ subscription, children }) => {
 							comparison,
 							subscriptionId: subscription.id,
 							mode: "private",
-							onRequestChange: setSwitchTo
+							onRequestChange: (target) => switchPlanMutation.mutate(target),
+							isSwitching: switchPlanMutation.isPending
 						}, comparison.plan.id))
 					})] })
 				]
 			})]
 		}) })]
-	})] });
+	});
 };
 
 //#endregion
@@ -1939,7 +2062,7 @@ const ManageSubscription = ({ subscription, planName }) => {
 const isMeteredEntitlement = (entitlement) => {
 	return "balance" in entitlement;
 };
-const UsageItem = ({ meter, item, subscription }) => {
+const UsageItem = ({ meter, item, subscription, featureKey }) => {
 	const cadence = item?.billingCadence ?? subscription?.billingCadence;
 	const billingPeriod = cadence ? formatDurationAdjective(cadence) : "monthly";
 	const isSoftLimit = item?.included?.entitlement?.isSoftLimit ?? true;
@@ -1998,7 +2121,7 @@ const UsageItem = ({ meter, item, subscription }) => {
 				]
 			}),
 			/* @__PURE__ */ jsxs(CardTitle, { children: [
-				item?.name ?? "Limit",
+				item?.name ?? featureKey,
 				" ",
 				item?.price?.amount
 			] })
@@ -2078,6 +2201,7 @@ const Usage = ({ usage, isFetching, currentItems, subscription, isPendingFirstPa
 				]
 			}),
 			hasUsage ? Object.entries(usage.entitlements).flatMap(([key, value]) => isMeteredEntitlement(value) ? /* @__PURE__ */ jsx(UsageItem, {
+				featureKey: key,
 				meter: { ...value },
 				subscription,
 				item: currentItems?.find((item) => item.featureKey === key)
@@ -2255,6 +2379,40 @@ const SubscriptionsPage = () => {
 	});
 };
 
+//#endregion
+//#region src/pages/SubscriptionsPageSkeleton.tsx
+const SubscriptionsPageSkeleton = () => /* @__PURE__ */ jsx("div", {
+	className: "w-full pt-(--padding-content-top) pb-(--padding-content-bottom)",
+	children: /* @__PURE__ */ jsxs("div", {
+		className: "max-w-4xl space-y-8",
+		children: [
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-56 mb-2" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-80" })] }),
+			/* @__PURE__ */ jsx("div", {
+				className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3",
+				children: [1, 2].map((i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-20 rounded-lg" }, i))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-4",
+				children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-16" }), /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-32" }) }), /* @__PURE__ */ jsxs(CardContent, {
+					className: "space-y-2",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex justify-between",
+							children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })]
+						}),
+						/* @__PURE__ */ jsx(Skeleton, { className: "h-2 w-full" }),
+						/* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-48" })
+					]
+				})] })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-4",
+				children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-20" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-12 rounded-lg" })]
+			})
+		]
+	})
+});
+
 //#endregion
 //#region src/ZuploMonetizationPlugin.tsx
 const PRICING_PATH = "/pricing";
@@ -2312,18 +2470,23 @@ const zuploMonetizationPlugin = createPlugin((options = {}) => ({
 				{
 					path: "/manage-payment",
 					element: /* @__PURE__ */ jsx(ManagePaymentPage, {})
-				},
-				{
-					path: PRICING_PATH,
-					handle: { layout: "default" },
-					element: /* @__PURE__ */ jsx(PricingPage, {})
-				},
-				{
-					handle: { layout: "default" },
-					path: "/subscriptions",
-					element: /* @__PURE__ */ jsx(SubscriptionsPage, {})
 				}
 			]
+		}, {
+			element: /* @__PURE__ */ jsx(ZuploMonetizationWrapper, { options }),
+			children: [{
+				path: PRICING_PATH,
+				element: /* @__PURE__ */ jsx(Suspense, {
+					fallback: /* @__PURE__ */ jsx(PricingPageSkeleton, {}),
+					children: /* @__PURE__ */ jsx(PricingPage, {})
+				})
+			}, {
+				path: "/subscriptions",
+				element: /* @__PURE__ */ jsx(Suspense, {
+					fallback: /* @__PURE__ */ jsx(SubscriptionsPageSkeleton, {}),
+					children: /* @__PURE__ */ jsx(SubscriptionsPage, {})
+				})
+			}]
 		}];
 	},
 	getProtectedRoutes: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuplo/zudoku-plugin-monetization",
-  "version": "0.0.27",
+  "version": "0.0.29",
   "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.3",
+    "happy-dom": "20.8.9",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "tsdown": "0.20.3",
-    "zudoku": "0.72.0"
+    "zudoku": "0.73.1"
   },
   "peerDependencies": {
     "react": ">=19.2.0",