@zuplo/zudoku-plugin-monetization 0.0.36 → 0.0.38

package/dist/{PricingTable-BW6uq2El.mjs → PricingTable-Dsbd3E2Q.mjs}

@@ -486,7 +486,7 @@ const PricingTable = ({ plans, showYearlyPrice = true, units, renderAction, rend
 	const firstPlan = plans[0];
 	const taxLegendSentence = showTaxLegend && firstPlan ? taxBehaviorLegendSentence(collectDefaultTaxBehaviors(firstPlan)) : void 0;
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
-		className: cn("w-full grid grid-cols-1 sm:grid-cols-[repeat(auto-fit,minmax(300px,max-content))] justify-center gap-6", className),
+		className: cn("w-full grid grid-cols-1 sm:grid-cols-[repeat(auto-fit,minmax(200px,1fr))] justify-center gap-2", className),
 		children: plans.map((plan) => {
 			const popular = isPopular(plan);
 			const defaultCard = /* @__PURE__ */ jsx(PricingCard, {

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-BW6uq2El.mjs";
-import { Suspense, createContext, use, useEffect, useMemo, useState } from "react";
+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 { 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,36 +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(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();
@@ -698,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) => {
@@ -2319,7 +2294,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 ?? [];
@@ -2360,39 +2335,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 = {}) => ({
@@ -2403,13 +2345,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) => {
@@ -2455,16 +2396,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/dist/pricing-ui.mjs

@@ -1,2 +1,2 @@
-import { _ as formatDuration, a as subscriptionTaxLegendSentence, c as getPriceFromPlan, d as FeatureItem, f as categorizeRateCards, g as formatPrice, h as formatMinorCurrencyAmount, i as planHasDefaultTaxBehavior, l as PlanEntitlements, m as formatStaticEntitlementConfig, n as PricingCard, o as taxBehaviorLegendSentence, p as formatTieredPriceBreakdown, r as collectDefaultTaxBehaviors, s as derivePriceFromPlan, t as PricingTable, u as QuotaItem, v as formatDurationAdjective, y as formatDurationInterval } from "./PricingTable-BW6uq2El.mjs";
+import { _ as formatDuration, a as subscriptionTaxLegendSentence, c as getPriceFromPlan, d as FeatureItem, f as categorizeRateCards, g as formatPrice, h as formatMinorCurrencyAmount, i as planHasDefaultTaxBehavior, l as PlanEntitlements, m as formatStaticEntitlementConfig, n as PricingCard, o as taxBehaviorLegendSentence, p as formatTieredPriceBreakdown, r as collectDefaultTaxBehaviors, s as derivePriceFromPlan, t as PricingTable, u as QuotaItem, v as formatDurationAdjective, y as formatDurationInterval } from "./PricingTable-Dsbd3E2Q.mjs";
 export { FeatureItem, PlanEntitlements, PricingCard, PricingTable, QuotaItem, categorizeRateCards, collectDefaultTaxBehaviors, derivePriceFromPlan, formatDuration, formatDurationAdjective, formatDurationInterval, formatMinorCurrencyAmount, formatPrice, formatStaticEntitlementConfig, formatTieredPriceBreakdown, getPriceFromPlan, planHasDefaultTaxBehavior, subscriptionTaxLegendSentence, taxBehaviorLegendSentence };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuplo/zudoku-plugin-monetization",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "repository": {
     "type": "git",
     "url": "https://github.com/zuplo/zudoku",
@@ -24,7 +24,7 @@
   ],
   "dependencies": {
     "clsx": "2.1.1",
-    "tailwind-merge": "3.5.0",
+    "tailwind-merge": "3.6.0",
     "tinyduration": "3.4.1"
   },
   "devDependencies": {
@@ -36,7 +36,7 @@
     "happy-dom": "20.9.0",
     "react": "19.2.5",
     "react-dom": "19.2.5",
-    "tsdown": "0.21.10",
+    "tsdown": "0.22.0",
     "zudoku": "0.77.0"
   },
   "peerDependencies": {