@zuplo/zudoku-plugin-monetization 0.0.28 → 0.0.30

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";
@@ -155,6 +156,12 @@ 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);
 
 //#endregion
 //#region src/utils/categorizeRateCards.ts
@@ -231,7 +238,7 @@ const getPlanFromPurchaseDetails = (response) => {
 	return response;
 };
 const getTaxAmountFromPurchaseDetails = (response) => {
-	const taxAmount = response?.tax?.taxAmount;
+	const taxAmount = response?.tax?.items[0]?.taxAmount;
 	const numericAmount = typeof taxAmount === "number" ? taxAmount : Number.parseFloat(taxAmount ?? "");
 	if (!Number.isFinite(numericAmount)) return;
 	return numericAmount;
@@ -410,13 +417,13 @@ const CheckoutConfirmPage = () => {
 												className: "text-2xl font-bold",
 												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}`
+											}),
 											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}`
 											})
 										]
 									}),
@@ -782,7 +789,13 @@ const PricingPage = () => {
 					children: pricing?.subtitle ?? "See our pricing options and choose the one that best suits your needs."
 				})]
 			}),
-			/* @__PURE__ */ jsx("div", {
+			pricingTable.items.length === 0 ? /* @__PURE__ */ jsxs("div", {
+				className: "text-center py-12 text-muted-foreground",
+				children: [/* @__PURE__ */ jsx("p", { children: "No plans are currently available." }), /* @__PURE__ */ jsx("p", {
+					className: "text-sm mt-2",
+					children: "Make sure your plans are set up and published."
+				})]
+			}) : /* @__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,
@@ -795,6 +808,37 @@ 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 = () => {
@@ -899,13 +943,13 @@ const SubscriptionChangeConfirmPage = () => {
 											className: "text-2xl font-bold",
 											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}`
+										}),
 										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}`
 										})
 									]
 								}),
@@ -969,7 +1013,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;
+			})
+		})
 	});
 };
 
@@ -1461,6 +1513,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);
@@ -1481,6 +1550,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) {
@@ -1498,22 +1572,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)]);
@@ -1530,20 +1619,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,
@@ -1571,7 +1674,7 @@ const PlanComparisonItem = ({ comparison, subscriptionId, mode, onRequestChange,
 	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", {
@@ -1612,7 +1715,7 @@ const PlanComparisonItem = ({ comparison, subscriptionId, mode, onRequestChange,
 			})]
 		}), 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 }),
@@ -1620,7 +1723,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", {
@@ -1649,9 +1759,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",
@@ -1735,7 +1848,7 @@ const SwitchPlanModal = ({ subscription, children }) => {
 			window.location.href = data.url;
 		}
 	});
-	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: [],
@@ -1961,7 +2074,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;
@@ -2020,7 +2133,7 @@ const UsageItem = ({ meter, item, subscription }) => {
 				]
 			}),
 			/* @__PURE__ */ jsxs(CardTitle, { children: [
-				item?.name ?? "Limit",
+				item?.name ?? featureKey,
 				" ",
 				item?.price?.amount
 			] })
@@ -2100,6 +2213,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)
@@ -2277,6 +2391,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";
@@ -2334,18 +2482,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.28",
+  "version": "0.0.30",
   "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.73.0"
+    "zudoku": "0.75.0"
   },
   "peerDependencies": {
     "react": ">=19.2.0",