@zuplo/zudoku-plugin-monetization 0.0.37 → 0.0.39

package/dist/index.d.mts

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

package/dist/index.mjs

@@ -1,17 +1,16 @@
 import { _ as formatDuration, a as subscriptionTaxLegendSentence, c as getPriceFromPlan, f as categorizeRateCards, g as formatPrice, h as formatMinorCurrencyAmount, i as planHasDefaultTaxBehavior, l as PlanEntitlements, m as formatStaticEntitlementConfig, p as formatTieredPriceBreakdown, t as PricingTable, v as formatDurationAdjective, y as formatDurationInterval } from "./PricingTable-Dsbd3E2Q.mjs";
-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";
 import { useAuth, useZudoku } from "zudoku/hooks";
-import { QueryClient, QueryClientProvider, useMutation, useQuery, useQueryClient, useSuspenseQuery } from "zudoku/react-query";
+import { QueryClient, QueryClientProvider, queryOptions, 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, CardDescription, CardHeader, CardTitle } from "zudoku/ui/Card";
 import { Separator } from "zudoku/ui/Separator";
+import { createContext, use, useEffect, useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Button as Button$1 } from "zudoku/ui/Button";
-import { Skeleton } from "zudoku/ui/Skeleton";
 import { DismissibleAlert, DismissibleAlertAction } from "zudoku/ui/DismissibleAlert";
 import { ActionButton } from "zudoku/ui/ActionButton";
 import { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "zudoku/ui/Item";
@@ -443,26 +442,34 @@ const ManagePaymentPage = () => {
 	});
 };
 //#endregion
+//#region src/queries.ts
+const getDeploymentName = (context) => {
+	const deploymentName = context.env.ZUPLO_PUBLIC_DEPLOYMENT_NAME;
+	if (!deploymentName) throw new Error("ZUPLO_PUBLIC_DEPLOYMENT_NAME is not set");
+	return deploymentName;
+};
+const pricingPageQuery = (context) => queryOptions({
+	queryKey: [`/v3/zudoku-metering/${getDeploymentName(context)}/pricing-page`],
+	meta: { context: context.getAuthState().isAuthenticated ? context : void 0 }
+});
+const subscriptionsQuery = (context) => queryOptions({
+	queryKey: [`/v3/zudoku-metering/${getDeploymentName(context)}/subscriptions`],
+	meta: { context }
+});
+//#endregion
 //#region src/hooks/usePlans.ts
 const usePlans = () => {
-	const zudoku = useZudoku();
-	const auth = useAuth();
-	return useSuspenseQuery({
-		queryKey: [`/v3/zudoku-metering/${useDeploymentName()}/pricing-page`],
-		meta: { context: auth.isAuthenticated ? zudoku : void 0 }
-	});
+	return useSuspenseQuery(pricingPageQuery(useZudoku()));
 };
 //#endregion
 //#region src/pages/PricingPage.tsx
 const PricingPage = () => {
 	const { pricing } = useMonetizationConfig();
 	const zudoku = useZudoku();
-	const deploymentName = useDeploymentName();
 	const auth = useAuth();
 	const { data: pricingTable } = usePlans();
 	const { data: subscriptions = { items: [] } } = useQuery({
-		meta: { context: zudoku },
-		queryKey: [`/v3/zudoku-metering/${deploymentName}/subscriptions`],
+		...subscriptionsQuery(zudoku),
 		enabled: auth.isAuthenticated
 	});
 	const isSubscribed = subscriptions.items.some((subscription) => ["active", "canceled"].includes(subscription.status));
@@ -510,33 +517,6 @@ 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(200px,1fr))] justify-center gap-2",
-		children: [
-			1,
-			2,
-			3
-		].map((i) => /* @__PURE__ */ jsxs(Card, { 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();
@@ -695,11 +675,9 @@ const SubscriptionChangeConfirmPage = () => {
 };
 //#endregion
 //#region src/hooks/useSubscriptions.ts
-const useSubscriptions = (environmentName) => {
-	const zudoku = useZudoku();
+const useSubscriptions = () => {
 	return useSuspenseQuery({
-		queryKey: [`/v3/zudoku-metering/${environmentName}/subscriptions`],
-		meta: { context: zudoku },
+		...subscriptionsQuery(useZudoku()),
 		select: (data) => ({
 			...data,
 			items: [...data.items].sort((a, b) => {
@@ -1346,6 +1324,7 @@ const comparePlans = (currentPlan, targetPlan, currentIndex, targetIndex, units)
 	return {
 		plan: targetPlan,
 		isUpgrade,
+		isNewerVersion: false,
 		quotaChanges,
 		featureChanges
 	};
@@ -1356,6 +1335,14 @@ const ChangeIndicator = ({ change }) => {
 	return /* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-green-600 shrink-0" });
 };
 const isPrivatePlan = (plan) => plan.metadata?.zuplo_private_plan === "true";
+const planVersion = (plan) => plan.version ?? 1;
+const isNewerPlanVersion = (subscribedPlan, target) => target.key === subscribedPlan.key && planVersion(target) > planVersion(subscribedPlan);
+/** Baseline for comparisons: catalog entry when present, else subscription plan. */
+const resolvePlanForComparison = (subscribedPlan, catalogItems) => catalogItems?.find((p) => p.id === subscribedPlan.id) ?? subscribedPlan;
+const resolveIsUpgrade = ({ target, targetIndex, subscribedPlan, currentIndex }) => {
+	if (target.key === subscribedPlan.key) return planVersion(target) > planVersion(subscribedPlan);
+	return targetIndex > currentIndex;
+};
 const modeLabelMap = {
 	upgrade: "Upgrade",
 	downgrade: "Downgrade",
@@ -1376,10 +1363,17 @@ const PlanComparisonItem = ({ comparison, subscriptionId, mode, onRequestChange,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center justify-between mb-3",
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex items-baseline gap-2",
-				children: [/* @__PURE__ */ jsx("h4", {
-					className: "font-semibold text-foreground",
-					children: comparison.plan.name
+				className: "flex items-baseline gap-2 flex-wrap",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx("h4", {
+						className: "font-semibold text-foreground",
+						children: comparison.plan.name
+					}), comparison.isNewerVersion && /* @__PURE__ */ jsx(Badge, {
+						variant: "outline",
+						className: "rounded-full border-primary/30 bg-primary/10 text-primary font-medium",
+						children: "New version"
+					})]
 				}), isCustom ? /* @__PURE__ */ jsx("span", {
 					className: "text-primary font-medium",
 					children: "Custom"
@@ -1544,35 +1538,35 @@ const SwitchPlanModal = ({ subscription, children }) => {
 			window.location.href = data.url;
 		}
 	});
-	const currentPlan = plansData?.items.find((p) => p.key === subscription.plan.key);
+	const subscribedPlan = subscription.plan;
 	const { upgrades, downgrades, privatePlans } = useMemo(() => {
-		if (!plansData?.items) return {
+		const catalogItems = plansData?.items;
+		if (!catalogItems?.length) return {
 			upgrades: [],
 			downgrades: [],
 			privatePlans: []
 		};
-		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);
+		const planForComparison = resolvePlanForComparison(subscribedPlan, catalogItems);
+		const currentIndex = catalogItems.some((p) => p.id === subscribedPlan.id) ? catalogItems.findIndex((p) => p.id === subscribedPlan.id) : -1;
+		const subscribedIsPrivate = isPrivatePlan(subscribedPlan);
+		const allComparisons = catalogItems.flatMap((plan, targetIndex) => {
+			if (plan.id === subscribedPlan.id) return [];
+			return [{
+				...comparePlans(planForComparison, plan, currentIndex, targetIndex, pricing?.units),
+				isUpgrade: resolveIsUpgrade({
+					target: plan,
+					targetIndex,
+					subscribedPlan,
+					currentIndex
+				}),
+				isNewerVersion: isNewerPlanVersion(subscribedPlan, plan)
+			}];
 		});
+		if (subscribedIsPrivate) return {
+			upgrades: allComparisons.filter((c) => !isPrivatePlan(c.plan)),
+			downgrades: [],
+			privatePlans: allComparisons.filter((c) => isPrivatePlan(c.plan))
+		};
 		return {
 			upgrades: allComparisons.filter((c) => c.isUpgrade && !isPrivatePlan(c.plan)),
 			downgrades: allComparisons.filter((c) => !c.isUpgrade && !isPrivatePlan(c.plan)),
@@ -1580,7 +1574,7 @@ const SwitchPlanModal = ({ subscription, children }) => {
 		};
 	}, [
 		plansData?.items,
-		currentPlan,
+		subscribedPlan,
 		pricing?.units
 	]);
 	return /* @__PURE__ */ jsxs(Dialog, {
@@ -1611,18 +1605,11 @@ const SwitchPlanModal = ({ subscription, children }) => {
 							children: switchPlanMutation.error.message
 						})
 					}),
-					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: currentPlan.name
-						})] })
-					}),
-					!currentPlan && /* @__PURE__ */ jsx(Item, {
+					/* @__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
+							children: subscribedPlan.name
 						})] })
 					}),
 					upgrades.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
@@ -2316,7 +2303,7 @@ const SubscriptionItem = ({ subscription, isSelected, isExpired }) => {
 //#region src/pages/SubscriptionsPage.tsx
 const SubscriptionsPage = () => {
 	const deploymentName = useDeploymentName();
-	const { data } = useSubscriptions(deploymentName);
+	const { data } = useSubscriptions();
 	const [searchParams] = useSearchParams();
 	const subscriptionId = searchParams.get("subscriptionId");
 	const subscriptions = data?.items ?? [];
@@ -2357,39 +2344,6 @@ 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";
 const zuploMonetizationPlugin = createPlugin((options = {}) => ({
@@ -2400,13 +2354,12 @@ const zuploMonetizationPlugin = createPlugin((options = {}) => ({
 			to: PRICING_PATH
 		}] }
 	}),
+	initialize: (context) => {
+		queryClient.prefetchQuery(pricingPageQuery(context));
+		if (context.getAuthState().isAuthenticated) queryClient.prefetchQuery(subscriptionsQuery(context));
+	},
 	getIdentities: async (context) => {
-		const deploymentName = context.env.ZUPLO_PUBLIC_DEPLOYMENT_NAME;
-		if (!deploymentName) throw new Error("ZUPLO_PUBLIC_DEPLOYMENT_NAME is not set");
-		return (await queryClient.fetchQuery({
-			queryKey: [`/v3/zudoku-metering/${deploymentName}/subscriptions`],
-			meta: { context }
-		})).items.flatMap((sub) => sub.status !== "active" ? [] : sub.consumer.apiKeys.flatMap((apiKey) => apiKey.expiresOn && new Date(apiKey.expiresOn) < /* @__PURE__ */ new Date() ? [] : {
+		return (await queryClient.fetchQuery(subscriptionsQuery(context))).items.flatMap((sub) => sub.status !== "active" ? [] : sub.consumer.apiKeys.flatMap((apiKey) => apiKey.expiresOn && new Date(apiKey.expiresOn) < /* @__PURE__ */ new Date() ? [] : {
 			label: `${sub.name} (****${apiKey.key.slice(-5)})`,
 			id: apiKey.id,
 			authorizeRequest: async (request) => {
@@ -2452,16 +2405,10 @@ const zuploMonetizationPlugin = createPlugin((options = {}) => ({
 			element: /* @__PURE__ */ jsx(ZuploMonetizationWrapper, { options }),
 			children: [{
 				path: PRICING_PATH,
-				element: /* @__PURE__ */ jsx(Suspense, {
-					fallback: /* @__PURE__ */ jsx(PricingPageSkeleton, {}),
-					children: /* @__PURE__ */ jsx(PricingPage, {})
-				})
+				element: /* @__PURE__ */ jsx(PricingPage, {})
 			}, {
 				path: "/subscriptions",
-				element: /* @__PURE__ */ jsx(Suspense, {
-					fallback: /* @__PURE__ */ jsx(SubscriptionsPageSkeleton, {}),
-					children: /* @__PURE__ */ jsx(SubscriptionsPage, {})
-				})
+				element: /* @__PURE__ */ jsx(SubscriptionsPage, {})
 			}]
 		}];
 	},

package/dist/pricing-ui.d.mts

@@ -1,5 +1,4 @@
 import { ReactNode } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/types/PlanType.d.ts
 type EntitlementTemplate = MeteredEntitlementTemplate | StaticEntitlementTemplate | BooleanEntitlementTemplate;
@@ -141,7 +140,7 @@ declare const FeatureItem: ({
 }: {
   feature: Feature;
   className?: string;
-}) => _$react_jsx_runtime0.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 //#endregion
 //#region src/pricing-ui/PlanEntitlements.d.ts
 declare const PlanEntitlements: ({
@@ -156,7 +155,7 @@ declare const PlanEntitlements: ({
   billingCadence?: string;
   units?: Record<string, string>;
   itemClassName?: string;
-}) => _$react_jsx_runtime0.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 //#endregion
 //#region src/pricing-ui/PricingCard.d.ts
 type PricingCardProps = {
@@ -174,7 +173,7 @@ declare const PricingCard: ({
   units,
   action,
   className
-}: PricingCardProps) => _$react_jsx_runtime0.JSX.Element | null;
+}: PricingCardProps) => import("react/jsx-runtime").JSX.Element | null;
 //#endregion
 //#region src/pricing-ui/PricingTable.d.ts
 type PricingTableProps = {
@@ -226,7 +225,7 @@ declare const PricingTable: ({
   showTaxLegend,
   className,
   cardClassName
-}: PricingTableProps) => _$react_jsx_runtime0.JSX.Element;
+}: PricingTableProps) => import("react/jsx-runtime").JSX.Element;
 //#endregion
 //#region src/pricing-ui/QuotaItem.d.ts
 declare const QuotaItem: ({
@@ -235,7 +234,7 @@ declare const QuotaItem: ({
 }: {
   quota: Quota;
   className?: string;
-}) => _$react_jsx_runtime0.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 //#endregion
 //#region src/utils/categorizeRateCards.d.ts
 declare const categorizeRateCards: (rateCards: RateCard[], options?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuplo/zudoku-plugin-monetization",
-  "version": "0.0.37",
+  "version": "0.0.39",
   "repository": {
     "type": "git",
     "url": "https://github.com/zuplo/zudoku",
@@ -36,8 +36,8 @@
     "happy-dom": "20.9.0",
     "react": "19.2.5",
     "react-dom": "19.2.5",
-    "tsdown": "0.21.10",
-    "zudoku": "0.77.0"
+    "tsdown": "0.22.0",
+    "zudoku": "0.78.1"
   },
   "peerDependencies": {
     "react": ">=19.2.0",