@zuplo/zudoku-plugin-monetization 0.0.24 → 0.0.26

package/dist/index.d.mts

@@ -1,14 +1,17 @@
 import * as zudoku from "zudoku";
+import "react";
 
-//#region src/ZuploMonetizationPlugin.d.ts
-type ZudokuMonetizationPluginOptions = {
+//#region src/MonetizationContext.d.ts
+interface MonetizationConfig {
   pricing?: {
     subtitle?: string;
     title?: string;
-    units?: Record<string, string>;
     showYearlyPrice?: boolean;
+    units?: Record<string, string>;
   };
-};
-declare const zuploMonetizationPlugin: (options?: ZudokuMonetizationPluginOptions | undefined) => zudoku.ZudokuPlugin;
+}
+//#endregion
+//#region src/ZuploMonetizationPlugin.d.ts
+declare const zuploMonetizationPlugin: (options?: MonetizationConfig | undefined) => zudoku.ZudokuPlugin;
 //#endregion
 export { zuploMonetizationPlugin };

package/dist/index.mjs

@@ -1,16 +1,16 @@
-import { cn, createPlugin, joinUrl } from "zudoku";
+import { cn, createPlugin, joinUrl, throwIfProblemJson } from "zudoku";
 import { AlertTriangleIcon, ArrowDownIcon, ArrowLeftRightIcon, ArrowUpIcon, CalendarIcon, CheckCheckIcon, CheckIcon, CircleAlert, 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 { Link as Link$1, Outlet, useLocation, useNavigate, useParams, useSearchParams } from "zudoku/router";
+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 { 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 { useEffect, useMemo, useState } from "react";
 import { DismissibleAlert, DismissibleAlertAction } from "zudoku/ui/DismissibleAlert";
 import { ActionButton } from "zudoku/ui/ActionButton";
 import { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "zudoku/ui/Item";
@@ -90,6 +90,11 @@ const usePlans = () => {
 	});
 };
 
+//#endregion
+//#region src/MonetizationContext.tsx
+const MonetizationContext = createContext({});
+const useMonetizationConfig = () => use(MonetizationContext);
+
 //#endregion
 //#region src/utils/formatDuration.ts
 const formatDuration = (iso) => {
@@ -124,6 +129,24 @@ const formatDurationInterval = (iso) => {
 		return iso;
 	}
 };
+/**
+* Returns an adjective form suitable for possessive context
+* e.g. "your monthly quota", "your weekly limit".
+* Falls back to "billing period" for multi-unit cadences
+* where "every 3 months" would be grammatically awkward.
+*/
+const formatDurationAdjective = (iso) => {
+	try {
+		const d = parse(iso);
+		if (d.years === 1) return "yearly";
+		if (d.months === 1) return "monthly";
+		if (d.weeks === 1) return "weekly";
+		if (d.days === 1) return "daily";
+		return "billing period";
+	} catch {
+		return "billing period";
+	}
+};
 
 //#endregion
 //#region src/utils/formatPrice.ts
@@ -137,7 +160,8 @@ const formatPrice = (amount, currency) => new Intl.NumberFormat("en-US", {
 
 //#endregion
 //#region src/utils/categorizeRateCards.ts
-const categorizeRateCards = (rateCards, currency, units) => {
+const categorizeRateCards = (rateCards, options) => {
+	const { currency, units, planBillingCadence } = options ?? {};
 	const quotas = [];
 	const features = [];
 	for (const rc of rateCards) {
@@ -157,7 +181,7 @@ const categorizeRateCards = (rateCards, currency, units) => {
 				key: rc.featureKey ?? rc.key,
 				name: rc.name,
 				limit: et.issueAfterReset,
-				period: et.usagePeriod ? formatDuration(et.usagePeriod) : "Month",
+				period: rc.billingCadence ? formatDuration(rc.billingCadence) : planBillingCadence ? formatDuration(planBillingCadence) : "month",
 				overagePrice
 			});
 		} else if (et.type === "boolean") features.push({
@@ -227,13 +251,8 @@ const queryClient = new QueryClient({ defaultOptions: {
 				}
 			});
 			const response = await fetch(q.meta?.context ? await q.meta.context.signRequest(request) : request);
-			if (!response.ok) {
-				if (response.headers.get("content-type")?.includes("application/problem+json")) {
-					const data = await response.json();
-					throw new Error(data.detail ?? data.title);
-				}
-				throw new Error("Failed to fetch request");
-			}
+			await throwIfProblemJson(response);
+			if (!response.ok) throw new Error("Failed to fetch request");
 			return response.json();
 		}
 	},
@@ -262,11 +281,8 @@ const queryClient = new QueryClient({ defaultOptions: {
 				}
 			});
 			const response = await fetch(m.meta?.context ? await m.meta.context.signRequest(request) : request);
+			await throwIfProblemJson(response);
 			if (!response.ok) {
-				if (response.headers.get("content-type")?.includes("application/problem+json")) {
-					const data = await response.json();
-					throw new Error(data.detail ?? data.title);
-				}
 				const errorText = await response.text();
 				throw new Error(`Request failed: ${response.status} ${errorText}`);
 			}
@@ -275,26 +291,32 @@ const queryClient = new QueryClient({ defaultOptions: {
 		}
 	}
 } });
-const ZuploMonetizationWrapper = () => {
-	return /* @__PURE__ */ jsx(QueryClientProvider, {
-		client: queryClient,
+const ZuploMonetizationWrapper = ({ options = {} }) => /* @__PURE__ */ jsx(QueryClientProvider, {
+	client: queryClient,
+	children: /* @__PURE__ */ jsx(MonetizationContext, {
+		value: options,
 		children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Outlet, {}) })
-	});
-};
+	})
+});
 
 //#endregion
 //#region src/pages/CheckoutConfirmPage.tsx
 const CheckoutConfirmPage = () => {
 	const [search] = useSearchParams();
-	const planId = search.get("plan");
+	const planId = search.get("planId");
 	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");
 	const rateCards = selectedPlan?.phases.at(-1)?.rateCards;
-	const { quotas, features } = categorizeRateCards(rateCards ?? [], selectedPlan?.currency);
+	const { quotas, features } = categorizeRateCards(rateCards ?? [], {
+		currency: selectedPlan?.currency,
+		units: pricing?.units,
+		planBillingCadence: selectedPlan?.billingCadence
+	});
 	const price = selectedPlan ? getPriceFromPlan(selectedPlan) : null;
 	const billingCycle = selectedPlan?.billingCadence ? formatDuration(selectedPlan.billingCadence) : null;
 	const createSubscriptionMutation = useMutation({
@@ -308,7 +330,7 @@ const CheckoutConfirmPage = () => {
 		},
 		onSuccess: async (subscription) => {
 			await queryClient.invalidateQueries();
-			navigate(`/subscriptions/${subscription.id}`);
+			navigate(`/subscriptions?subscriptionId=${encodeURIComponent(subscription.id)}`);
 		}
 	});
 	return /* @__PURE__ */ jsx("div", {
@@ -484,23 +506,22 @@ const RedirectPage = ({ icon: Icon, title, description, url, children }) => {
 //#region src/hooks/useUrlUtils.ts
 const useUrlUtils = () => {
 	const basePath = useZudoku().options.basePath;
-	return { generateUrl: (path) => {
+	return { generateUrl: (path, { searchParams } = {}) => {
 		if (!window.location.origin) throw new Error("Only works in browser environment");
-		return joinUrl(window.location.origin, basePath, path);
+		return joinUrl(window.location.origin, basePath, path, searchParams ? `?${new URLSearchParams(searchParams)}` : void 0);
 	} };
 };
 
 //#endregion
 //#region src/pages/CheckoutPage.tsx
 const CheckoutPage = () => {
-	const { planId } = useParams();
+	const [searchParams] = useSearchParams();
+	const planId = searchParams.get("planId");
 	const zudoku = useZudoku();
 	const auth = useAuth();
 	const { generateUrl } = useUrlUtils();
 	const deploymentName = useDeploymentName();
 	if (!planId) throw new Error(`missing planId in URL`);
-	const successUrl = new URL(generateUrl("/checkout-confirm"));
-	successUrl.searchParams.set("plan", planId);
 	const checkoutLink = useQuery({
 		queryKey: [
 			`/v3/zudoku-metering/${deploymentName}/stripe/checkout`,
@@ -513,7 +534,7 @@ const CheckoutPage = () => {
 				method: "POST",
 				body: JSON.stringify({
 					planId,
-					successURL: successUrl.toString(),
+					successURL: generateUrl("/checkout-confirm", { searchParams: { planId } }),
 					cancelURL: generateUrl("/pricing")
 				})
 			}
@@ -587,11 +608,14 @@ const ManagePaymentPage = () => {
 
 //#endregion
 //#region src/pages/pricing/PricingCard.tsx
-const PhaseSection = ({ phase, currency, showName, excludeKeys, units }) => {
-	const { quotas, features } = categorizeRateCards(phase.rateCards, currency, units);
-	const filteredQuotas = quotas.filter((q) => !excludeKeys.has(q.key));
-	const filteredFeatures = features.filter((f) => !excludeKeys.has(f.key));
-	if (filteredQuotas.length === 0 && filteredFeatures.length === 0) return null;
+const PhaseSection = ({ phase, currency, showName, billingCadence }) => {
+	const { pricing } = useMonetizationConfig();
+	const { quotas, features } = categorizeRateCards(phase.rateCards, {
+		currency,
+		units: pricing?.units,
+		planBillingCadence: billingCadence
+	});
+	if (quotas.length === 0 && features.length === 0) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-2",
 		children: [
@@ -606,17 +630,19 @@ const PhaseSection = ({ phase, currency, showName, excludeKeys, units }) => {
 					]
 				})]
 			}),
-			filteredQuotas.map((quota) => /* @__PURE__ */ jsx(QuotaItem, { quota }, quota.key)),
-			filteredFeatures.map((feature) => /* @__PURE__ */ jsx(FeatureItem, { feature }, feature.key))
+			quotas.map((quota) => /* @__PURE__ */ jsx(QuotaItem, { quota }, quota.key)),
+			features.map((feature) => /* @__PURE__ */ jsx(FeatureItem, { feature }, feature.key))
 		]
 	});
 };
-const PricingCard = ({ plan, isPopular = false, isSubscribed = false, showYearlyPrice = true, units }) => {
+const PricingCard = ({ plan, isPopular = false, isSubscribed = false }) => {
+	const { pricing } = useMonetizationConfig();
 	if (plan.phases.length === 0) return null;
 	const price = getPriceFromPlan(plan);
 	const isFree = price.monthly === 0;
 	const isCustom = plan.metadata?.isCustom === true;
 	const hasMultiplePhases = plan.phases.length > 1;
+	const billingInterval = formatDuration(plan.billingCadence);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("relative rounded-lg border p-6 flex flex-col", isPopular && "border-primary border-2"),
 		children: [
@@ -645,10 +671,10 @@ const PricingCard = ({ plan, isPopular = false, isSubscribed = false, showYearly
 						})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 							className: "text-3xl font-bold text-card-foreground",
 							children: isFree ? "Free" : formatPrice(price.monthly, plan.currency)
-						}), !isFree && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						}), !isFree && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
 							className: "text-muted-foreground text-sm",
-							children: "/mo"
-						}), showYearlyPrice && /* @__PURE__ */ jsxs("div", {
+							children: ["/", billingInterval]
+						}), pricing?.showYearlyPrice !== false && price.yearly > 0 && /* @__PURE__ */ jsxs("div", {
 							className: "w-full text-sm text-muted-foreground mt-1",
 							children: [formatPrice(price.yearly, plan.currency), "/year"]
 						})] })] })
@@ -661,16 +687,12 @@ const PricingCard = ({ plan, isPopular = false, isSubscribed = false, showYearly
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "space-y-4 mb-6 grow",
-				children: plan.phases.map((phase, index) => {
-					const laterKeys = new Set(plan.phases.slice(index + 1).flatMap((p) => p.rateCards.map((rc) => rc.featureKey ?? rc.key)));
-					return /* @__PURE__ */ jsx(PhaseSection, {
-						phase,
-						currency: plan.currency,
-						showName: hasMultiplePhases,
-						excludeKeys: laterKeys,
-						units
-					}, phase.key);
-				})
+				children: plan.phases.map((phase) => /* @__PURE__ */ jsx(PhaseSection, {
+					phase,
+					currency: plan.currency,
+					showName: hasMultiplePhases,
+					billingCadence: plan.billingCadence
+				}, phase.key))
 			}),
 			isSubscribed ? /* @__PURE__ */ jsx(Button, {
 				variant: isPopular ? "default" : "secondary",
@@ -683,7 +705,7 @@ const PricingCard = ({ plan, isPopular = false, isSubscribed = false, showYearly
 				variant: isPopular ? "default" : "secondary",
 				asChild: true,
 				children: /* @__PURE__ */ jsx(Link$1, {
-					to: `/checkout/${plan.id}`,
+					to: `/checkout?planId=${encodeURIComponent(plan.id)}`,
 					children: "Subscribe"
 				})
 			})
@@ -693,7 +715,8 @@ const PricingCard = ({ plan, isPopular = false, isSubscribed = false, showYearly
 
 //#endregion
 //#region src/pages/PricingPage.tsx
-const PricingPage = ({ subtitle = "See our pricing options and choose the one that best suits your needs.", title = "Pricing", units, showYearlyPrice = true }) => {
+const PricingPage = () => {
+	const { pricing } = useMonetizationConfig();
 	const zudoku = useZudoku();
 	const deploymentName = useDeploymentName();
 	const auth = useAuth();
@@ -706,28 +729,26 @@ const PricingPage = ({ subtitle = "See our pricing options and choose the one th
 	return /* @__PURE__ */ jsxs("div", {
 		className: "w-full px-4 pt-(--padding-content-top) pb-(--padding-content-bottom)",
 		children: [
-			/* @__PURE__ */ jsxs(Head, { children: [/* @__PURE__ */ jsx("title", { children: title }), /* @__PURE__ */ jsx("meta", {
+			/* @__PURE__ */ jsxs(Head, { children: [/* @__PURE__ */ jsx("title", { children: pricing?.title ?? "Pricing" }), /* @__PURE__ */ jsx("meta", {
 				name: "description",
-				content: subtitle
+				content: pricing?.subtitle ?? "See our pricing options and choose the one that best suits your needs."
 			})] }),
 			/* @__PURE__ */ jsxs("div", {
 				className: "text-center space-y-4 mb-12",
 				children: [/* @__PURE__ */ jsx(Heading, {
 					level: 1,
 					"data-testid": "title",
-					children: title
+					children: pricing?.title ?? "Pricing"
 				}), /* @__PURE__ */ jsx("p", {
 					className: "text-muted-foreground",
 					"data-testid": "subtitle",
-					children: subtitle
+					children: pricing?.subtitle ?? "See our pricing options and choose the one that best suits your needs."
 				})]
 			}),
 			/* @__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,
-					units,
-					showYearlyPrice,
 					isPopular: plan.metadata?.zuplo_most_popular === "true",
 					isSubscribed: subscriptions.items.some((subscription) => ["active", "canceled"].includes(subscription.status))
 				}, plan.id))
@@ -747,11 +768,16 @@ const SubscriptionChangeConfirmPage = () => {
 	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 rateCards = selectedPlan?.phases.at(-1)?.rateCards;
-	const { quotas, features } = categorizeRateCards(rateCards ?? [], selectedPlan?.currency);
+	const { quotas, features } = categorizeRateCards(rateCards ?? [], {
+		currency: selectedPlan?.currency,
+		units: pricing?.units,
+		planBillingCadence: selectedPlan?.billingCadence
+	});
 	const price = selectedPlan ? getPriceFromPlan(selectedPlan) : null;
 	const billingCycle = selectedPlan?.billingCadence ? formatDuration(selectedPlan.billingCadence) : null;
 	const changeMutation = useMutation({
@@ -765,7 +791,7 @@ const SubscriptionChangeConfirmPage = () => {
 		},
 		onSuccess: async (subscription) => {
 			await queryClient.invalidateQueries();
-			navigate(`/subscriptions/${subscription.id}`, { state: { planSwitched: { newPlanName: selectedPlan?.name } } });
+			navigate(`/subscriptions?subscriptionId=${encodeURIComponent(subscription.id)}`, { state: { planSwitched: { newPlanName: selectedPlan?.name } } });
 		}
 	});
 	return /* @__PURE__ */ jsx("div", {
@@ -863,7 +889,7 @@ const SubscriptionChangeConfirmPage = () => {
 							disabled: changeMutation.isPending,
 							asChild: !changeMutation.isPending,
 							children: /* @__PURE__ */ jsx(Link$1, {
-								to: `/subscriptions/${subscriptionId}`,
+								to: `/subscriptions?${new URLSearchParams({ subscriptionId: subscriptionId ?? "" })}`,
 								children: "Cancel"
 							})
 						})]
@@ -1288,15 +1314,23 @@ const CancelSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionId
 
 //#endregion
 //#region src/pages/subscriptions/SwitchPlanModal.tsx
-const comparePlans = (currentPlan, targetPlan, currentIndex, targetIndex) => {
+const comparePlans = (currentPlan, targetPlan, currentIndex, targetIndex, units) => {
 	const isUpgrade = targetIndex > currentIndex;
 	const currentPhase = currentPlan?.phases.at(-1);
 	const targetPhase = targetPlan.phases.at(-1);
-	const { quotas: currentQuotas, features: currentFeatures } = currentPhase ? categorizeRateCards(currentPhase.rateCards, currentPlan?.currency) : {
+	const { quotas: currentQuotas, features: currentFeatures } = currentPhase ? categorizeRateCards(currentPhase.rateCards, {
+		currency: currentPlan?.currency,
+		units,
+		planBillingCadence: currentPlan?.billingCadence
+	}) : {
 		quotas: [],
 		features: []
 	};
-	const { quotas: targetQuotas, features: targetFeatures } = targetPhase ? categorizeRateCards(targetPhase.rateCards, targetPlan.currency) : {
+	const { quotas: targetQuotas, features: targetFeatures } = targetPhase ? categorizeRateCards(targetPhase.rateCards, {
+		currency: targetPlan.currency,
+		units,
+		planBillingCadence: targetPlan.billingCadence
+	}) : {
 		quotas: [],
 		features: []
 	};
@@ -1403,7 +1437,11 @@ const PlanComparisonItem = ({ comparison, subscriptionId, mode, onRequestChange
 					children: "Free"
 				}) : /* @__PURE__ */ jsxs("span", {
 					className: "text-primary font-medium text-lg",
-					children: [formatPrice(displayPrice, comparison.plan.currency), "/ mo"]
+					children: [
+						formatPrice(displayPrice, comparison.plan.currency),
+						"/",
+						formatDuration(comparison.plan.billingCadence)
+					]
 				})]
 			}), isCustom ? /* @__PURE__ */ jsx(Button$1, {
 				variant: "default",
@@ -1515,9 +1553,6 @@ const ConfirmSwitchAlert = ({ switchTo, onRequestClose }) => {
 	const deploymentName = useDeploymentName();
 	const context = useZudoku();
 	const { generateUrl } = useUrlUtils();
-	const successUrl = new URL(generateUrl("/subscription-change-confirm"));
-	successUrl.searchParams.set("planId", switchTo.plan.id);
-	successUrl.searchParams.set("subscriptionId", switchTo.subscriptionId);
 	const mutation = useMutation({
 		mutationKey: [`/v3/zudoku-metering/${deploymentName}/stripe/checkout`],
 		meta: {
@@ -1526,8 +1561,11 @@ const ConfirmSwitchAlert = ({ switchTo, onRequestClose }) => {
 				method: "POST",
 				body: JSON.stringify({
 					planId: switchTo.plan.id,
-					successURL: successUrl.toString(),
-					cancelURL: generateUrl(`/subscriptions/${switchTo.subscriptionId}`)
+					successURL: generateUrl(`/subscription-change-confirm`, { searchParams: {
+						planId: switchTo.plan.id,
+						subscriptionId: switchTo.subscriptionId
+					} }),
+					cancelURL: generateUrl("/subscriptions", { searchParams: { subscriptionId: switchTo.subscriptionId } })
 				})
 			}
 		},
@@ -1567,6 +1605,7 @@ 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 { upgrades, downgrades, privatePlans } = useMemo(() => {
 		if (!plansData?.items || !currentPlan) return {
@@ -1577,14 +1616,18 @@ const SwitchPlanModal = ({ subscription, children }) => {
 		const isPrivatePlan = (plan) => plan.metadata?.zuplo_private_plan === "true";
 		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));
+			return comparePlans(currentPlan, plan, currentIndex, plansData.items.indexOf(plan), pricing?.units);
 		});
 		return {
 			upgrades: allComparisons.filter((c) => c.isUpgrade && !isPrivatePlan(c.plan)),
 			downgrades: allComparisons.filter((c) => !c.isUpgrade && !isPrivatePlan(c.plan)),
 			privatePlans: allComparisons.filter((c) => isPrivatePlan(c.plan))
 		};
-	}, [plansData?.items, currentPlan]);
+	}, [
+		plansData?.items,
+		currentPlan,
+		pricing?.units
+	]);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [switchTo !== null && /* @__PURE__ */ jsx(ConfirmSwitchAlert, {
 		switchTo,
 		onRequestClose: () => setSwitchTo(null)
@@ -1772,6 +1815,8 @@ const isMeteredEntitlement = (entitlement) => {
 	return "balance" in entitlement;
 };
 const UsageItem = ({ meter, item, subscription }) => {
+	const cadence = item?.billingCadence ?? subscription?.billingCadence;
+	const billingPeriod = cadence ? formatDurationAdjective(cadence) : "monthly";
 	const isSoftLimit = item?.included?.entitlement?.isSoftLimit ?? true;
 	const rate = (item?.price?.tiers?.find((t) => !t.upToAmount) ?? item?.price?.tiers?.at(-1))?.unitPrice?.amount;
 	const hasOverage = meter.overage > 0;
@@ -1786,7 +1831,11 @@ const UsageItem = ({ meter, item, subscription }) => {
 				className: "mb-4",
 				children: [
 					/* @__PURE__ */ jsx(AlertTriangleIcon, { className: "size-4 text-red-600 shrink-0" }),
-					/* @__PURE__ */ jsx(AlertTitle, { children: "You've exceeded your monthly quota" }),
+					/* @__PURE__ */ jsxs(AlertTitle, { children: [
+						"You've exceeded your ",
+						billingPeriod,
+						" quota"
+					] }),
 					/* @__PURE__ */ jsxs(AlertDescription, { children: [
 						"Additional usage is being charged at the overage rate",
 						rate ? ` ($${Number(rate).toFixed(2)}/call)` : "",
@@ -1807,7 +1856,11 @@ const UsageItem = ({ meter, item, subscription }) => {
 				className: "mb-4",
 				children: [
 					/* @__PURE__ */ jsx(AlertTriangleIcon, { className: "size-4 text-red-600 shrink-0" }),
-					/* @__PURE__ */ jsx(AlertTitle, { children: "You've reached your monthly limit" }),
+					/* @__PURE__ */ jsxs(AlertTitle, { children: [
+						"You've reached your ",
+						billingPeriod,
+						" limit"
+					] }),
 					/* @__PURE__ */ jsx(AlertDescription, { children: "Requests beyond your quota are blocked. Upgrade to a higher plan for more usage." }),
 					subscription && /* @__PURE__ */ jsx(AlertAction, { children: /* @__PURE__ */ jsx(SwitchPlanModal, {
 						subscription,
@@ -1857,7 +1910,7 @@ const UsageItem = ({ meter, item, subscription }) => {
 				}),
 				/* @__PURE__ */ jsxs("p", {
 					className: "text-xs text-muted-foreground",
-					children: [meter.balance.toLocaleString(), " remaining this month"]
+					children: [meter.balance.toLocaleString(), " remaining this billing period"]
 				})
 			]
 		})]
@@ -2004,7 +2057,7 @@ const SubscriptionsList = ({ subscriptions, activeSubscriptionId }) => {
 const SubscriptionItem = ({ subscription, isSelected, isExpired }) => {
 	const willExpire = subscription.activeTo && new Date(subscription.activeTo) > /* @__PURE__ */ new Date();
 	return /* @__PURE__ */ jsx(Link$1, {
-		to: `/subscriptions/${subscription.id}`,
+		to: `/subscriptions?subscriptionId=${encodeURIComponent(subscription.id)}`,
 		children: /* @__PURE__ */ jsx(Item, {
 			size: "sm",
 			variant: "outline",
@@ -2029,7 +2082,7 @@ const SubscriptionItem = ({ subscription, isSelected, isExpired }) => {
 				]
 			})] })
 		}, subscription.id)
-	}, subscription.id);
+	});
 };
 
 //#endregion
@@ -2037,7 +2090,8 @@ const SubscriptionItem = ({ subscription, isSelected, isExpired }) => {
 const SubscriptionsPage = () => {
 	const deploymentName = useDeploymentName();
 	const { data } = useSubscriptions(deploymentName);
-	const { subscriptionId } = useParams();
+	const [searchParams] = useSearchParams();
+	const subscriptionId = searchParams.get("subscriptionId");
 	const subscriptions = data?.items ?? [];
 	const activeSubscription = useMemo(() => {
 		if (subscriptions.length === 0) return null;
@@ -2079,7 +2133,7 @@ const SubscriptionsPage = () => {
 //#endregion
 //#region src/ZuploMonetizationPlugin.tsx
 const PRICING_PATH = "/pricing";
-const zuploMonetizationPlugin = createPlugin((options) => ({
+const zuploMonetizationPlugin = createPlugin((options = {}) => ({
 	transformConfig: ({ config, merge }) => merge({
 		apiKeys: { enabled: false },
 		header: { navigation: [...config.header?.navigation ?? [], {
@@ -2115,11 +2169,11 @@ const zuploMonetizationPlugin = createPlugin((options) => ({
 	}],
 	getRoutes: () => {
 		return [{
-			Component: ZuploMonetizationWrapper,
+			element: /* @__PURE__ */ jsx(ZuploMonetizationWrapper, { options }),
 			handle: { layout: "none" },
 			children: [
 				{
-					path: "/checkout/:planId?",
+					path: "/checkout",
 					element: /* @__PURE__ */ jsx(CheckoutPage, {})
 				},
 				{
@@ -2137,16 +2191,11 @@ const zuploMonetizationPlugin = createPlugin((options) => ({
 				{
 					path: PRICING_PATH,
 					handle: { layout: "default" },
-					element: /* @__PURE__ */ jsx(PricingPage, {
-						subtitle: options?.pricing?.subtitle,
-						title: options?.pricing?.title,
-						units: options?.pricing?.units,
-						showYearlyPrice: options?.pricing?.showYearlyPrice
-					})
+					element: /* @__PURE__ */ jsx(PricingPage, {})
 				},
 				{
 					handle: { layout: "default" },
-					path: "/subscriptions/:subscriptionId?",
+					path: "/subscriptions",
 					element: /* @__PURE__ */ jsx(SubscriptionsPage, {})
 				}
 			]
@@ -2154,10 +2203,10 @@ const zuploMonetizationPlugin = createPlugin((options) => ({
 	},
 	getProtectedRoutes: () => {
 		return [
-			"/checkout/*",
+			"/checkout",
 			"/checkout-confirm",
 			"/subscription-change-confirm",
-			"/subscriptions/*",
+			"/subscriptions",
 			"/manage-payment"
 		];
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuplo/zudoku-plugin-monetization",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "repository": {
     "type": "git",
     "url": "https://github.com/zuplo/zudoku",
@@ -31,7 +31,7 @@
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "tsdown": "0.20.3",
-    "zudoku": "0.71.3"
+    "zudoku": "0.71.10"
   },
   "peerDependencies": {
     "react": ">=19.2.0",