@zuplo/zudoku-plugin-monetization 0.0.45 → 0.0.47

package/dist/{PricingTable-WkG2n7V-.mjs → PricingTable-Ec-BAGAS.mjs}

@@ -148,6 +148,13 @@ const formatTieredPriceBreakdown = (opts) => {
 const tierHasPositivePrice = (tier) => parseFloat(tier.flatPrice?.amount ?? "0") > 0 || parseFloat(tier.unitPrice?.amount ?? "0") > 0;
 //#endregion
 //#region src/utils/categorizeRateCards.ts
+const formatInlinePrice = (opts) => {
+	const unit = parseFloat(opts.unitAmount ?? "0");
+	const flat = parseFloat(opts.flatAmount ?? "0");
+	const flatPart = flat > 0 ? formatPrice(flat, opts.currency) : "";
+	const unitPart = unit > 0 ? `${formatPrice(unit, opts.currency)}/${opts.unitLabel}` : "";
+	return (flatPart && unitPart ? `${flatPart} + ${unitPart}` : flatPart || unitPart) || void 0;
+};
 const categorizeRateCards = (rateCards, options) => {
 	const { currency, units, planBillingCadence } = options ?? {};
 	const quotas = [];
@@ -163,8 +170,10 @@ const categorizeRateCards = (rateCards, options) => {
 			return "month";
 		};
 		const firstTier = rc.price?.type === "tiered" && rc.price.tiers.length > 0 ? rc.price.tiers[0] : void 0;
-		const firstTierIsPriced = !!firstTier && tierHasPositivePrice(firstTier);
-		if (et.type === "metered" && et.issueAfterReset != null && !firstTierIsPriced) {
+		const billsFromFirstUnit = !!firstTier && tierHasPositivePrice(firstTier) || rc.price?.type === "unit" && parseFloat(rc.price.amount) > 0;
+		const includedQuota = et.type === "metered" ? et.issueAfterReset ?? 0 : 0;
+		const isHardCap = et.type === "metered" && et.isSoftLimit === false;
+		if (et.type === "metered" && (isHardCap || includedQuota > 0 && !billsFromFirstUnit)) {
 			let tierPrices;
 			if (rc.price?.type === "tiered" && rc.price.tiers) tierPrices = formatTieredPriceBreakdown({
 				tiers: rc.price.tiers.map((t) => ({
@@ -176,12 +185,24 @@ const categorizeRateCards = (rateCards, options) => {
 				unitLabel: unitLabelFor(rc),
 				includedLabel: "Included"
 			});
+			const inlinePrice = rc.price?.type === "unit" ? formatInlinePrice({
+				unitAmount: rc.price.amount,
+				currency,
+				unitLabel: unitLabelFor(rc)
+			}) : rc.price?.type === "tiered" && rc.price.tiers.length === 1 ? formatInlinePrice({
+				flatAmount: rc.price.tiers[0].flatPrice?.amount,
+				unitAmount: rc.price.tiers[0].unitPrice?.amount,
+				currency,
+				unitLabel: unitLabelFor(rc)
+			}) : void 0;
 			quotas.push({
 				key: rc.featureKey ?? rc.key,
 				name: rc.name,
-				limit: et.issueAfterReset,
+				limit: includedQuota,
 				period: periodFor(rc),
-				tierPrices
+				tierPrices,
+				...inlinePrice ? { unitPrice: inlinePrice } : {},
+				...isHardCap ? { isHardCap: true } : {}
 			});
 		} else if (et.type === "metered" && rc.type === "usage_based" && rc.price) {
 			const unitLabel = unitLabelFor(rc);
@@ -195,11 +216,12 @@ const categorizeRateCards = (rateCards, options) => {
 					continue;
 				}
 				if (tiers.length === 1) {
-					const unit = parseFloat(tiers[0].unitPrice?.amount ?? "0");
-					const flat = parseFloat(tiers[0].flatPrice?.amount ?? "0");
-					const flatPart = flat > 0 ? formatPrice(flat, currency) : "";
-					const unitPart = unit > 0 ? `${formatPrice(unit, currency)}/${unitLabel}` : "";
-					const pricePart = flatPart && unitPart ? `${flatPart} + ${unitPart}` : flatPart || unitPart;
+					const pricePart = formatInlinePrice({
+						flatAmount: tiers[0].flatPrice?.amount,
+						unitAmount: tiers[0].unitPrice?.amount,
+						currency,
+						unitLabel
+					});
 					if (pricePart) {
 						quotas.push({
 							key: rc.featureKey ?? rc.key,
@@ -249,7 +271,11 @@ const categorizeRateCards = (rateCards, options) => {
 				key: rc.featureKey ?? rc.key,
 				name: rc.name
 			});
-		} else if (et.type === "boolean") features.push({
+		} else if (et.type === "metered") features.push({
+			key: rc.featureKey ?? rc.key,
+			name: rc.name
+		});
+		else if (et.type === "boolean") features.push({
 			key: rc.featureKey ?? rc.key,
 			name: rc.name
 		});
@@ -520,7 +546,7 @@ const FeatureItem = ({ feature, className }) => {
 //#region src/pricing-ui/QuotaItem.tsx
 const QuotaItem = ({ quota, className }) => {
 	const hasTierBreakdown = !!quota.tierPrices && quota.tierPrices.length > 0;
-	const showQuotaLine = !quota.isPayg && !hasTierBreakdown;
+	const showQuotaLine = !quota.isPayg && (quota.isHardCap || !hasTierBreakdown);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex items-start gap-2", className),
 		children: [/* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-primary shrink-0 mt-0.5" }), /* @__PURE__ */ jsxs("div", {

package/dist/index.mjs

@@ -1,10 +1,10 @@
-import { D as formatDurationAdjective, E as formatDuration, O as formatDurationInterval, T as formatPrice, _ as formatPlanPrice, a as planHasDefaultTaxBehavior, b as sameEntitlementSet, c as getPlanPriceSchedule, d as PlanEntitlements, f as PlanPhaseHeader, l as PlanPriceTag, o as subscriptionTaxLegendSentence, p as EntitlementList, r as isCustomPlan, t as PricingTable, u as PlanPriceSchedule, w as formatMinorCurrencyAmount, x as categorizeRateCards, y as comparePlanEntitlements } from "./PricingTable-WkG2n7V-.mjs";
+import { D as formatDurationAdjective, E as formatDuration, O as formatDurationInterval, T as formatPrice, _ as formatPlanPrice, a as planHasDefaultTaxBehavior, b as sameEntitlementSet, c as getPlanPriceSchedule, d as PlanEntitlements, f as PlanPhaseHeader, l as PlanPriceTag, o as subscriptionTaxLegendSentence, p as EntitlementList, r as isCustomPlan, t as PricingTable, u as PlanPriceSchedule, w as formatMinorCurrencyAmount, x as categorizeRateCards, y as comparePlanEntitlements } from "./PricingTable-Ec-BAGAS.mjs";
 import { cn, createPlugin, joinUrl, throwIfProblemJson } from "zudoku";
 import { AlertTriangleIcon, ArrowDownIcon, ArrowLeftRightIcon, ArrowUpIcon, BadgePercentIcon, CalendarIcon, CheckCheckIcon, CheckIcon, ChevronDownIcon, CircleSlashIcon, ClockIcon, CreditCardIcon, Grid2x2XIcon, HistoryIcon, InfoIcon, Loader2Icon, LockIcon, MoreVerticalIcon, RefreshCcw, RefreshCwIcon, Settings, ShieldIcon, StarsIcon, Trash2Icon, XIcon } from "zudoku/icons";
-import { Link, Outlet, useLocation, useNavigate, useSearchParams } from "zudoku/router";
+import { Link, Navigate, Outlet, useLocation, useNavigate, useSearchParams } from "zudoku/router";
 import { useAuth, useZudoku } from "zudoku/hooks";
 import { QueryClient, QueryClientProvider, queryOptions, useMutation, useQuery, useQueryClient, useSuspenseQuery } from "zudoku/react-query";
-import { Button, ClientOnly, Head, Heading, Link as Link$1, Slot } from "zudoku/components";
+import { Button, ClientOnly, Head, Heading, Link as Link$1, Slot, ZudokuError } from "zudoku/components";
 import { createContext, use, useEffect, useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Alert, AlertAction, AlertDescription, AlertTitle } from "zudoku/ui/Alert";
@@ -40,11 +40,27 @@ const isTaxInclusiveFromPurchaseDetails = (response) => {
 	return response.tax?.taxInclusive === true;
 };
 //#endregion
+//#region src/deploymentName.ts
+/**
+* Resolves the Zuplo deployment name from the environment.
+*
+* `ZUPLO_PUBLIC_DEPLOYMENT_NAME` is populated by `zuplo link`, so a missing
+* value almost always means the project hasn't been linked yet (the common
+* case when running the docs locally). Throw a `ZudokuError` with actionable
+* guidance rather than a bare "not set" so the UI can surface the fix.
+*/
+const resolveDeploymentName = (deploymentName) => {
+	const trimmed = deploymentName?.trim();
+	if (!trimmed) throw new ZudokuError("This project is not linked to a Zuplo deployment, so the monetization plugin can't load pricing or subscriptions.", {
+		title: "Not linked to a Zuplo deployment",
+		developerHint: "Run `zuplo link` to connect this project to your Zuplo deployment. This sets the `ZUPLO_PUBLIC_DEPLOYMENT_NAME` environment variable that the monetization plugin needs."
+	});
+	return trimmed;
+};
+//#endregion
 //#region src/hooks/useDeploymentName.ts
 const useDeploymentName = () => {
-	const deploymentName = useZudoku().env.ZUPLO_PUBLIC_DEPLOYMENT_NAME;
-	if (!deploymentName) throw new Error("ZUPLO_PUBLIC_DEPLOYMENT_NAME is not set");
-	return deploymentName;
+	return resolveDeploymentName(useZudoku().env.ZUPLO_PUBLIC_DEPLOYMENT_NAME);
 };
 //#endregion
 //#region src/hooks/usePurchaseDetails.ts
@@ -98,7 +114,8 @@ const queryClient = new QueryClient({ defaultOptions: {
 					...q.meta?.request?.headers
 				}
 			});
-			const response = await fetch(q.meta?.context ? await q.meta.context.signRequest(request) : request);
+			const queryContext = q.meta?.context;
+			const response = await fetch(queryContext?.getAuthState().isAuthenticated ? await queryContext.signRequest(request) : request);
 			await throwIfProblemJson(response);
 			if (!response.ok) throw new Error("Failed to fetch request");
 			return response.json();
@@ -128,7 +145,8 @@ const queryClient = new QueryClient({ defaultOptions: {
 					...init.headers
 				}
 			});
-			const response = await fetch(m.meta?.context ? await m.meta.context.signRequest(request) : request);
+			const mutationContext = m.meta?.context;
+			const response = await fetch(mutationContext?.getAuthState().isAuthenticated ? await mutationContext.signRequest(request) : request);
 			await throwIfProblemJson(response);
 			if (!response.ok) {
 				const errorText = await response.text();
@@ -451,17 +469,13 @@ const useUrlUtils = () => {
 };
 //#endregion
 //#region src/pages/CheckoutPage.tsx
-const CheckoutPage = () => {
-	const [searchParams] = useSearchParams();
-	const planId = searchParams.get("planId");
+const CheckoutRedirect = ({ planId }) => {
 	const zudoku = useZudoku();
 	const auth = useAuth();
 	const { generateUrl } = useUrlUtils();
-	const deploymentName = useDeploymentName();
-	if (!planId) throw new Error(`missing planId in URL`);
 	const checkoutLink = useQuery({
 		queryKey: [
-			`/v3/zudoku-metering/${deploymentName}/stripe/checkout`,
+			`/v3/zudoku-metering/${useDeploymentName()}/stripe/checkout`,
 			planId,
 			auth.profile?.sub
 		],
@@ -499,6 +513,15 @@ const CheckoutPage = () => {
 		})
 	});
 };
+const CheckoutPage = () => {
+	const [searchParams] = useSearchParams();
+	const planId = searchParams.get("planId");
+	if (!planId) return /* @__PURE__ */ jsx(Navigate, {
+		to: "/pricing",
+		replace: true
+	});
+	return /* @__PURE__ */ jsx(CheckoutRedirect, { planId });
+};
 //#endregion
 //#region src/pages/ManagePaymentPage.tsx
 const ManagePaymentPage = () => {
@@ -543,11 +566,7 @@ 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 getDeploymentName = (context) => resolveDeploymentName(context.env.ZUPLO_PUBLIC_DEPLOYMENT_NAME);
 const pricingPageQuery = (context) => queryOptions({
 	queryKey: [`/v3/zudoku-metering/${getDeploymentName(context)}/pricing-page`],
 	meta: { context: context.getAuthState().isAuthenticated ? context : void 0 }
@@ -2745,6 +2764,9 @@ const zuploMonetizationPlugin = createPlugin((options = {}) => ({
 		queryClient.prefetchQuery(pricingPageQuery(context));
 		if (context.getAuthState().isAuthenticated) queryClient.prefetchQuery(subscriptionsQuery(context));
 	},
+	events: { auth: ({ prev, next }) => {
+		if (prev.isAuthenticated && !next.isAuthenticated) queryClient.removeQueries();
+	} },
 	getIdentities: async (context) => {
 		if (!context.getAuthState().isAuthenticated) return [];
 		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() ? [] : {

package/dist/pricing-ui.d.mts

@@ -87,6 +87,7 @@ interface Quota {
   tierPrices?: string[];
   isPayg?: boolean;
   unitPrice?: string;
+  isHardCap?: boolean;
 }
 interface Feature {
   key: string;
@@ -139,7 +140,7 @@ declare const FeatureItem: ({
 }: {
   feature: Feature;
   className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 //#endregion
 //#region src/pricing-ui/PlanEntitlements.d.ts
 /**
@@ -161,7 +162,7 @@ declare const PlanEntitlements: ({
   billingCadence?: string;
   units?: Record<string, string>;
   itemClassName?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 //#endregion
 //#region src/utils/formatPlanPrice.d.ts
 type PlanPriceLabel = {
@@ -225,7 +226,7 @@ declare const PlanPriceSchedule: ({
   billingCadence?: string;
   size?: "sm" | "lg";
   className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 //#endregion
 //#region src/pricing-ui/PlanPriceTag.d.ts
 /**
@@ -253,7 +254,7 @@ declare const PlanPriceTag: ({
   billingCadence?: string;
   description?: boolean;
   size?: "inline" | "lg";
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 //#endregion
 //#region src/pricing-ui/PricingCard.d.ts
 type PricingCardProps = {
@@ -269,7 +270,7 @@ declare const PricingCard: ({
   units,
   action,
   className
-}: PricingCardProps) => import("react/jsx-runtime").JSX.Element | null;
+}: PricingCardProps) => import("react").JSX.Element | null;
 //#endregion
 //#region src/pricing-ui/PricingTable.d.ts
 type PricingTableProps = {
@@ -319,7 +320,7 @@ declare const PricingTable: ({
   showTaxLegend,
   className,
   cardClassName
-}: PricingTableProps) => import("react/jsx-runtime").JSX.Element;
+}: PricingTableProps) => import("react").JSX.Element;
 //#endregion
 //#region src/pricing-ui/QuotaItem.d.ts
 declare const QuotaItem: ({
@@ -328,7 +329,7 @@ declare const QuotaItem: ({
 }: {
   quota: Quota;
   className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").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 { C as formatStaticEntitlementConfig, D as formatDurationAdjective, E as formatDuration, O as formatDurationInterval, S as formatTieredPriceBreakdown, T as formatPrice, _ as formatPlanPrice, a as planHasDefaultTaxBehavior, c as getPlanPriceSchedule, d as PlanEntitlements, g as getPhasePriceLabel, h as FeatureItem, i as collectDefaultTaxBehaviors, l as PlanPriceTag, m as QuotaItem, n as PricingCard, o as subscriptionTaxLegendSentence, s as taxBehaviorLegendSentence, t as PricingTable, u as PlanPriceSchedule, v as getPlanPrice, w as formatMinorCurrencyAmount, x as categorizeRateCards } from "./PricingTable-WkG2n7V-.mjs";
+import { C as formatStaticEntitlementConfig, D as formatDurationAdjective, E as formatDuration, O as formatDurationInterval, S as formatTieredPriceBreakdown, T as formatPrice, _ as formatPlanPrice, a as planHasDefaultTaxBehavior, c as getPlanPriceSchedule, d as PlanEntitlements, g as getPhasePriceLabel, h as FeatureItem, i as collectDefaultTaxBehaviors, l as PlanPriceTag, m as QuotaItem, n as PricingCard, o as subscriptionTaxLegendSentence, s as taxBehaviorLegendSentence, t as PricingTable, u as PlanPriceSchedule, v as getPlanPrice, w as formatMinorCurrencyAmount, x as categorizeRateCards } from "./PricingTable-Ec-BAGAS.mjs";
 export { FeatureItem, PlanEntitlements, PlanPriceSchedule, PlanPriceTag, PricingCard, PricingTable, QuotaItem, categorizeRateCards, collectDefaultTaxBehaviors, formatDuration, formatDurationAdjective, formatDurationInterval, formatMinorCurrencyAmount, formatPlanPrice, formatPrice, formatStaticEntitlementConfig, formatTieredPriceBreakdown, getPhasePriceLabel, getPlanPrice, getPlanPriceSchedule, planHasDefaultTaxBehavior, subscriptionTaxLegendSentence, taxBehaviorLegendSentence };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuplo/zudoku-plugin-monetization",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "repository": {
     "type": "git",
     "url": "https://github.com/zuplo/zudoku",
@@ -31,13 +31,14 @@
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.2",
-    "@types/react": "19.2.14",
+    "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
+    "@typescript/native-preview": "7.0.0-dev.20260624.1",
     "happy-dom": "20.10.2",
-    "react": "19.2.5",
-    "react-dom": "19.2.5",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
     "tsdown": "0.22.0",
-    "zudoku": "0.81.0"
+    "zudoku": "0.82.3"
   },
   "peerDependencies": {
     "react": ">=19.2.0",
@@ -52,6 +53,6 @@
   "scripts": {
     "build": "tsdown",
     "dev": "tsdown --watch",
-    "typecheck": "tsc --project tsconfig.json"
+    "typecheck": "tsgo --project tsconfig.json"
   }
 }