@zuplo/zudoku-plugin-monetization 0.0.44 → 0.0.45

package/dist/index.mjs

@@ -1,6 +1,6 @@
 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 { cn, createPlugin, joinUrl, throwIfProblemJson } from "zudoku";
-import { AlertTriangleIcon, ArrowDownIcon, ArrowLeftRightIcon, ArrowUpIcon, CalendarIcon, CheckCheckIcon, CheckIcon, ChevronDownIcon, CircleSlashIcon, ClockIcon, CreditCardIcon, Grid2x2XIcon, InfoIcon, Loader2Icon, LockIcon, MoreVerticalIcon, RefreshCcw, RefreshCwIcon, Settings, ShieldIcon, StarsIcon, Trash2Icon, XIcon } from "zudoku/icons";
+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 { useAuth, useZudoku } from "zudoku/hooks";
 import { QueryClient, QueryClientProvider, queryOptions, useMutation, useQuery, useQueryClient, useSuspenseQuery } from "zudoku/react-query";
@@ -1034,6 +1034,24 @@ const useSubscriptions = () => {
 	});
 };
 //#endregion
+//#region src/hooks/usePendingCredits.ts
+/**
+* Fetch the operator-applied usage credits for a subscription, via the Zuplo
+* metering `.../pending-credits` endpoint. Failures are swallowed (`retry: false`,
+* `throwOnError: false`) so the usage page never breaks when credits are
+* unavailable — the credit banner simply isn't shown.
+*/
+const usePendingCredits = (deploymentName, subscriptionId) => {
+	const zudoku = useZudoku();
+	return useQuery({
+		queryKey: [`/v3/zudoku-metering/${deploymentName}/subscriptions/${subscriptionId}/pending-credits`],
+		meta: { context: zudoku },
+		refetchOnWindowFocus: true,
+		retry: false,
+		throwOnError: false
+	});
+};
+//#endregion
 //#region src/pages/subscriptions/ConfirmDeleteKeyAlert.tsx
 const ConfirmDeleteKeyAlert = ({ children, onDelete }) => {
 	return /* @__PURE__ */ jsxs(AlertDialog, { children: [/* @__PURE__ */ jsx(AlertDialogTrigger, {
@@ -2142,6 +2160,7 @@ const sectionLabelClassName = "text-base font-semibold tracking-wide mb-3 mt-2";
 const formatDateTimeRange = (from, to) => `${formatDateTime(from)} – ${formatDateTime(to)}`;
 const SubscriptionPlanDetails = ({ subscription }) => {
 	const { pricing } = useMonetizationConfig();
+	const hasEnded = !!subscription.activeTo && new Date(subscription.activeTo).getTime() < Date.now();
 	const plan = subscription.plan;
 	const view = getSubscriptionPlanView(subscription, { units: pricing?.units });
 	const { priceLabel } = view;
@@ -2195,10 +2214,10 @@ const SubscriptionPlanDetails = ({ subscription }) => {
 						}) : null] })] }),
 						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", {
 							className: detailLabelClassName,
-							children: "Current period"
+							children: hasEnded ? "Ended" : "Current period"
 						}), /* @__PURE__ */ jsx("dd", {
 							className: "text-foreground",
-							children: subscription.alignment?.currentAlignedBillingPeriod ? formatDateTimeRange(subscription.alignment.currentAlignedBillingPeriod.from, subscription.alignment.currentAlignedBillingPeriod.to) : "—"
+							children: hasEnded ? formatDateTime(subscription.activeTo ?? "") : subscription.alignment?.currentAlignedBillingPeriod ? formatDateTimeRange(subscription.alignment.currentAlignedBillingPeriod.from, subscription.alignment.currentAlignedBillingPeriod.to) : "—"
 						})] })
 					]
 				}),
@@ -2236,48 +2255,185 @@ const SubscriptionPlanDetails = ({ subscription }) => {
 	});
 };
 //#endregion
+//#region src/utils/priceIncludedUnits.ts
+const partAmount = (part) => {
+	if (!part || part.amount === void 0) return 0;
+	const amount = parseFloat(part.amount);
+	return Number.isFinite(amount) ? amount : Number.POSITIVE_INFINITY;
+};
+const priceIncludedUnits = (price) => {
+	if (!price) return 0;
+	if (price.type === "flat" || price.type === "package" || price.type === "dynamic") return 0;
+	if (price.tiers?.length) {
+		if ((price.mode ?? "graduated") !== "graduated") return 0;
+		const sorted = [...price.tiers].sort((a, b) => {
+			if (a.upToAmount === void 0) return 1;
+			if (b.upToAmount === void 0) return -1;
+			return Number(a.upToAmount) - Number(b.upToAmount);
+		});
+		let free = 0;
+		for (const [index, tier] of sorted.entries()) {
+			if (partAmount(tier.unitPrice) > 0) break;
+			if (index > 0 && partAmount(tier.flatPrice) > 0) break;
+			if (tier.upToAmount === void 0) return Number.POSITIVE_INFINITY;
+			const bound = Number(tier.upToAmount);
+			if (!Number.isFinite(bound) || bound <= free) break;
+			free = bound;
+		}
+		return free;
+	}
+	if (price.type === "unit") {
+		const amount = parseFloat(price.amount ?? "");
+		return Number.isFinite(amount) && amount === 0 ? Number.POSITIVE_INFINITY : 0;
+	}
+	return 0;
+};
+//#endregion
+//#region src/pages/subscriptions/deriveUsageView.ts
+const formatAmount = (amount) => {
+	const value = parseFloat(amount ?? "");
+	return Number.isFinite(value) ? `$${value.toFixed(2)}` : void 0;
+};
+const pluralizeUnit = (unitName) => unitName.endsWith("s") ? unitName : `${unitName}s`;
+/** The label for what additional usage costs, when the shape has one number. */
+const rateLabelFor = (price, unitName) => {
+	if (!price) return void 0;
+	if (price.type === "unit") {
+		const amount = formatAmount(price.amount);
+		return amount ? `${amount}/${unitName}` : void 0;
+	}
+	if (price.type === "tiered") {
+		const amount = formatAmount((price.tiers?.find((t) => !t.upToAmount) ?? price.tiers?.at(-1))?.unitPrice?.amount);
+		return amount ? `${amount}/${unitName}` : void 0;
+	}
+	if (price.type === "package") {
+		const amount = formatAmount(price.amount);
+		if (!amount) return void 0;
+		const size = parseFloat(price.quantityPerUnit ?? "");
+		return Number.isFinite(size) && size > 0 ? `${amount} per ${size.toLocaleString()} ${pluralizeUnit(unitName)}` : amount;
+	}
+};
+const NO_CAP = "There is no usage cap.";
+const deriveUsageView = (meter, item, unitName = "unit") => {
+	const quota = meter.balance + meter.usage - meter.overage;
+	const isSoftLimit = item?.included?.entitlement?.isSoftLimit ?? true;
+	const rateLabel = rateLabelFor(item?.price, unitName);
+	if (!isSoftLimit) return {
+		kind: "capped",
+		usage: meter.usage,
+		quota,
+		remaining: meter.balance,
+		atLimit: meter.usage >= quota,
+		rateLabel
+	};
+	if (!item) return {
+		kind: "meteredGeneric",
+		usage: meter.usage,
+		quota: quota > 0 ? quota : void 0,
+		caption: "Usage is billed per your plan's pricing."
+	};
+	if (!item.price || item.price.type === "flat") return {
+		kind: "meteredGeneric",
+		usage: meter.usage,
+		quota: quota > 0 ? quota : void 0,
+		caption: `Usage doesn't change your bill. ${NO_CAP}`
+	};
+	const isGraduated = item.price.type === "tiered" && (item.price.mode ?? "graduated") === "graduated";
+	const derivable = item.price.type === "unit" || isGraduated;
+	const freeUnits = priceIncludedUnits(item.price);
+	if (derivable) {
+		if (freeUnits === 0) return {
+			kind: "payAsYouGo",
+			usage: meter.usage,
+			caption: `Pay as you go — every ${unitName} is billed; there is no usage cap.`,
+			rateLabel
+		};
+		if (freeUnits === Number.POSITIVE_INFINITY) return {
+			kind: "meteredGeneric",
+			usage: meter.usage,
+			quota: quota > 0 ? quota : void 0,
+			caption: `Included with your plan. ${NO_CAP}`,
+			rateLabel
+		};
+		if (quota > 0) return {
+			kind: "included",
+			usage: meter.usage,
+			included: quota,
+			remaining: meter.balance,
+			overage: meter.overage,
+			rateLabel
+		};
+		return {
+			kind: "meteredGeneric",
+			usage: meter.usage,
+			caption: `The first ${freeUnits.toLocaleString()} ${pluralizeUnit(unitName)} are included; additional usage is billed. ${NO_CAP}`,
+			rateLabel
+		};
+	}
+	return {
+		kind: "meteredGeneric",
+		usage: meter.usage,
+		quota: quota > 0 ? quota : void 0,
+		caption: `Usage is billed per your plan's pricing. ${NO_CAP}`,
+		rateLabel
+	};
+};
+//#endregion
 //#region src/pages/subscriptions/Usage.tsx
 const isMeteredEntitlement = (entitlement) => {
 	return "balance" in entitlement;
 };
-const UsageItem = ({ meter, item, subscription, featureKey }) => {
+const UsageItem = ({ meter, item, subscription, featureKey, pendingCredit }) => {
+	const { pricing } = useMonetizationConfig();
 	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;
-	const limit = meter.balance + meter.usage - meter.overage;
-	const isAtLimit = !isSoftLimit && meter.usage >= limit;
-	const dangerZone = hasOverage || isAtLimit;
+	const view = deriveUsageView(meter, item, pricing?.units?.[item?.key ?? ""] ?? pricing?.units?.[featureKey] ?? "unit");
+	const atHardLimit = view.kind === "capped" && view.atLimit;
+	const overIncluded = view.kind === "included" && view.overage > 0;
+	const upgradeAction = (variant) => subscription && /* @__PURE__ */ jsx(AlertAction, { children: /* @__PURE__ */ jsx(SwitchPlanModal, {
+		subscription,
+		children: /* @__PURE__ */ jsxs(Button, {
+			variant,
+			size: "xs",
+			children: [/* @__PURE__ */ jsx(ArrowUpIcon, {}), "Upgrade"]
+		})
+	}) });
 	return /* @__PURE__ */ jsxs(Card, {
-		className: cn(dangerZone && "border-destructive bg-destructive/5"),
+		className: cn(atHardLimit && "border-destructive bg-destructive/5"),
 		children: [/* @__PURE__ */ jsxs(CardHeader, { children: [
-			hasOverage && isSoftLimit && /* @__PURE__ */ jsxs(Alert, {
-				variant: "destructive",
+			pendingCredit && /* @__PURE__ */ jsxs(Alert, {
 				className: "mb-4",
 				children: [
-					/* @__PURE__ */ jsx(AlertTriangleIcon, { className: "size-4 text-red-600 shrink-0" }),
+					/* @__PURE__ */ jsx(BadgePercentIcon, { className: "size-4 text-green-600 shrink-0" }),
+					/* @__PURE__ */ jsx(AlertTitle, { children: "Usage credit applied" }),
+					/* @__PURE__ */ jsxs(AlertDescription, { children: [
+						"A credit of ",
+						pendingCredit.units.toLocaleString(),
+						" ",
+						pendingCredit.units === 1 ? "unit" : "units",
+						" applies to this billing period and will be deducted from your next invoice automatically."
+					] })
+				]
+			}),
+			overIncluded && /* @__PURE__ */ jsxs(Alert, {
+				variant: "warning",
+				className: "mb-4",
+				children: [
+					/* @__PURE__ */ jsx(AlertTriangleIcon, { className: "size-4 shrink-0" }),
 					/* @__PURE__ */ jsxs(AlertTitle, { children: [
-						"You've exceeded your ",
+						"You've used your included ",
 						billingPeriod,
-						" quota"
+						" usage"
 					] }),
 					/* @__PURE__ */ jsxs(AlertDescription, { children: [
-						"Additional usage is being charged at the overage rate",
-						rate ? ` ($${Number(rate).toFixed(2)}/call)` : "",
-						". Upgrade to a higher plan for more usage."
+						"Additional usage is billed",
+						view.rateLabel ? ` at ${view.rateLabel}` : "",
+						". Upgrade to a higher plan for more included usage."
 					] }),
-					subscription && /* @__PURE__ */ jsx(AlertAction, { children: /* @__PURE__ */ jsx(SwitchPlanModal, {
-						subscription,
-						children: /* @__PURE__ */ jsxs(Button, {
-							variant: "destructive",
-							size: "xs",
-							children: [/* @__PURE__ */ jsx(ArrowUpIcon, {}), "Upgrade"]
-						})
-					}) })
+					upgradeAction("outline")
 				]
 			}),
-			isAtLimit && !isSoftLimit && /* @__PURE__ */ jsxs(Alert, {
+			atHardLimit && /* @__PURE__ */ jsxs(Alert, {
 				variant: "destructive",
 				className: "mb-4",
 				children: [
@@ -2288,58 +2444,79 @@ const UsageItem = ({ meter, item, subscription, featureKey }) => {
 						" 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,
-						children: /* @__PURE__ */ jsxs(Button, {
-							variant: "destructive",
-							size: "xs",
-							children: [/* @__PURE__ */ jsx(ArrowUpIcon, {}), "Upgrade"]
-						})
-					}) })
+					upgradeAction("destructive")
 				]
 			}),
 			/* @__PURE__ */ jsx(CardTitle, { children: item?.name ?? featureKey })
-		] }), /* @__PURE__ */ jsxs(CardContent, {
+		] }), /* @__PURE__ */ jsx(CardContent, {
 			className: "space-y-2",
-			children: [
+			children: view.kind === "capped" || view.kind === "included" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center justify-between text-sm",
 					children: [/* @__PURE__ */ jsx("div", {
 						className: "flex flex-col gap-2 mb-2",
 						children: /* @__PURE__ */ jsxs("span", {
-							className: cn(dangerZone && "text-red-600 font-medium"),
+							className: cn(atHardLimit && "text-red-600 font-medium"),
 							children: [
-								meter.usage.toLocaleString(),
+								view.usage.toLocaleString(),
 								" used",
-								hasOverage && isSoftLimit && /* @__PURE__ */ jsxs("span", {
+								view.kind === "included" && view.overage > 0 && /* @__PURE__ */ jsxs("span", {
 									className: "ml-1 text-xs",
 									children: [
 										"(+",
-										meter.overage.toLocaleString(),
+										view.overage.toLocaleString(),
 										" overage)"
 									]
 								})
 							]
 						})
-					}), /* @__PURE__ */ jsxs("span", {
+					}), /* @__PURE__ */ jsx("span", {
 						className: "text-foreground font-medium",
-						children: [limit.toLocaleString(), " limit"]
+						children: view.kind === "capped" ? `${view.quota.toLocaleString()} limit` : `${view.included.toLocaleString()} included`
 					})]
 				}),
 				/* @__PURE__ */ jsx(Progress, {
-					value: Math.min(100, limit > 0 ? meter.usage / limit * 100 : 100),
-					className: cn("mb-3 h-2", dangerZone && "bg-destructive")
+					value: Math.min(100, (view.kind === "capped" ? view.quota : view.included) > 0 ? view.usage / (view.kind === "capped" ? view.quota : view.included) * 100 : 100),
+					className: cn("mb-3 h-2", atHardLimit && "bg-destructive")
 				}),
 				/* @__PURE__ */ jsxs("p", {
 					className: "text-xs text-muted-foreground",
-					children: [meter.balance.toLocaleString(), " remaining this billing period"]
+					children: [
+						view.remaining.toLocaleString(),
+						view.kind === "included" ? " included" : "",
+						" remaining this billing period"
+					]
 				})
-			]
+			] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between text-sm",
+				children: [/* @__PURE__ */ jsxs("span", { children: [view.usage.toLocaleString(), " used this billing period"] }), view.kind === "meteredGeneric" && view.quota !== void 0 ? /* @__PURE__ */ jsxs("span", {
+					className: "text-foreground font-medium",
+					children: [view.quota.toLocaleString(), " quota"]
+				}) : view.rateLabel && /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: view.rateLabel
+				})]
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-xs text-muted-foreground",
+				children: view.caption
+			})] })
 		})]
 	});
 };
-const Usage = ({ usage, isFetching, currentItems, subscription, isPendingFirstPayment }) => {
+const Usage = ({ usage, isFetching, currentItems, subscription, isPendingFirstPayment, pendingCredits }) => {
 	const hasUsage = Object.values(usage.entitlements).some((value) => isMeteredEntitlement(value));
+	if (!!subscription?.activeTo && new Date(subscription.activeTo).getTime() < Date.now()) return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [/* @__PURE__ */ jsx(Heading, {
+			level: 3,
+			children: "Usage"
+		}), /* @__PURE__ */ jsxs(Alert, { children: [
+			/* @__PURE__ */ jsx(HistoryIcon, { className: "size-4 shrink-0" }),
+			/* @__PURE__ */ jsx(AlertTitle, { children: "This subscription has ended" }),
+			/* @__PURE__ */ jsx(AlertDescription, { children: "Usage history isn't available yet." })
+		] })]
+	});
+	const creditByFeature = new Map((pendingCredits ?? []).map((credit) => [credit.featureKey, credit]));
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-4",
 		children: [
@@ -2378,7 +2555,8 @@ const Usage = ({ usage, isFetching, currentItems, subscription, isPendingFirstPa
 				featureKey: key,
 				meter: { ...value },
 				subscription,
-				item: currentItems?.find((item) => item.featureKey === key)
+				item: currentItems?.find((item) => item.featureKey === key),
+				pendingCredit: creditByFeature.get(key)
 			}, key) : []) : !isFetching && !subscription?.annotations?.["subscription.previous.id"] ? /* @__PURE__ */ jsxs(Alert, {
 				variant: "warning",
 				children: [
@@ -2401,6 +2579,7 @@ const ActiveSubscription = ({ subscription, deploymentName }) => {
 		refetchOnWindowFocus: true,
 		meta: { context: zudoku }
 	});
+	const pendingCreditsQuery = usePendingCredits(deploymentName, subscription.id);
 	const isPendingFirstPayment = usageQuery.data.paymentStatus.isFirstPayment === true && usageQuery.data.paymentStatus.status !== "paid" && usageQuery.data.paymentStatus.status !== "not_required";
 	const activePhase = getActivePhase(subscription);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
@@ -2419,7 +2598,8 @@ const ActiveSubscription = ({ subscription, deploymentName }) => {
 			usage: usageQuery.data,
 			isFetching: usageQuery.isFetching,
 			subscription,
-			isPendingFirstPayment
+			isPendingFirstPayment,
+			pendingCredits: pendingCreditsQuery.data?.pendingCredits
 		}),
 		subscription?.consumer?.apiKeys && /* @__PURE__ */ jsx(ApiKeysList, {
 			isPendingFirstPayment,
@@ -2566,6 +2746,7 @@ const zuploMonetizationPlugin = createPlugin((options = {}) => ({
 		if (context.getAuthState().isAuthenticated) queryClient.prefetchQuery(subscriptionsQuery(context));
 	},
 	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() ? [] : {
 			label: `${sub.name} (****${apiKey.key.slice(-5)})`,
 			id: apiKey.id,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuplo/zudoku-plugin-monetization",
-  "version": "0.0.44",
+  "version": "0.0.45",
   "repository": {
     "type": "git",
     "url": "https://github.com/zuplo/zudoku",
@@ -33,11 +33,11 @@
     "@testing-library/react": "16.3.2",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "happy-dom": "20.9.0",
+    "happy-dom": "20.10.2",
     "react": "19.2.5",
     "react-dom": "19.2.5",
     "tsdown": "0.22.0",
-    "zudoku": "0.79.1"
+    "zudoku": "0.81.0"
   },
   "peerDependencies": {
     "react": ">=19.2.0",