@zuplo/zudoku-plugin-monetization 0.0.2

package/LICENSE.md

@@ -0,0 +1,18 @@
+The MIT License (MIT)
+
+Copyright (c) Zuplo, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+associated documentation files (the "Software"), to deal in the Software without restriction,
+including without limitation the rights to use, copy, modify, merge, publish, distribute,
+sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
+NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES
+OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/index.d.mts

@@ -0,0 +1,10 @@
+import { ZudokuConfig, ZudokuPlugin } from "zudoku";
+
+//#region src/ZuploMonetizationPlugin.d.ts
+type ZudokuMonetizationPluginOptions = {
+  environmentName: string;
+};
+declare const enableMonetization: (config: ZudokuConfig, options: ZudokuMonetizationPluginOptions) => ZudokuConfig;
+declare const zuploMonetizationPlugin: (options: ZudokuMonetizationPluginOptions) => ZudokuPlugin;
+//#endregion
+export { enableMonetization, zuploMonetizationPlugin };

package/dist/index.mjs

@@ -0,0 +1,931 @@
+import { ArrowLeftIcon, CheckIcon, ClockIcon, LockIcon, RefreshCwIcon, ShieldIcon, StarsIcon, Trash2Icon } from "zudoku/icons";
+import { Link, Outlet, useNavigate, useParams, useSearchParams } from "zudoku/router";
+import { Button, Heading } from "zudoku/components";
+import { useAuth, useZudoku } from "zudoku/hooks";
+import { QueryClient, QueryClientProvider, useMutation, useQuery, useQueryClient, useSuspenseQuery } from "zudoku/react-query";
+import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert";
+import { Card, CardContent, CardHeader, CardTitle } from "zudoku/ui/Card";
+import { Separator } from "zudoku/ui/Separator";
+import { cn, joinUrl } from "zudoku";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { parse } from "tinyduration";
+import { useMemo } from "react";
+import { Button as Button$1 } from "zudoku/ui/Button";
+import { Secret } from "zudoku/ui/Secret";
+import { Item, ItemContent, ItemTitle } from "zudoku/ui/Item";
+import { Progress } from "zudoku/ui/Progress";
+
+//#region src/components/FeatureItem.tsx
+const FeatureItem = ({ feature, className }) => {
+	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__ */ jsx("div", {
+			className: "text-sm",
+			children: feature.value ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "font-medium",
+					children: [feature.name, ":"]
+				}),
+				" ",
+				feature.value
+			] }) : feature.name
+		})]
+	});
+};
+
+//#endregion
+//#region src/components/QuotaItem.tsx
+const QuotaItem = ({ quota, className }) => {
+	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", {
+			className: "text-sm",
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "font-medium",
+					children: [quota.name, ":"]
+				}),
+				" ",
+				quota.limit.toLocaleString(),
+				" / ",
+				quota.period,
+				quota.overagePrice && /* @__PURE__ */ jsxs("div", {
+					className: "text-xs text-muted-foreground mt-0.5",
+					children: [
+						"+",
+						quota.overagePrice,
+						" after quota"
+					]
+				})
+			]
+		})]
+	});
+};
+
+//#endregion
+//#region src/hooks/usePlans.ts
+const usePlans = (environmentName) => {
+	return useSuspenseQuery({ queryKey: [`/v3/zudoku-metering/${environmentName}/pricing-page`] });
+};
+
+//#endregion
+//#region src/utils/formatDuration.ts
+const formatDuration = (iso) => {
+	try {
+		const d = parse(iso);
+		if (d.months === 1) return "month";
+		if (d.months && d.months > 1) return `${d.months} months`;
+		if (d.years === 1) return "year";
+		if (d.years && d.years > 1) return `${d.years} years`;
+		if (d.weeks === 1) return "week";
+		if (d.weeks && d.weeks > 1) return `${d.weeks} weeks`;
+		if (d.days === 1) return "day";
+		if (d.days && d.days > 1) return `${d.days} days`;
+		return iso;
+	} catch {
+		return iso;
+	}
+};
+
+//#endregion
+//#region src/utils/categorizeRateCards.ts
+const categorizeRateCards = (rateCards) => {
+	const quotas = [];
+	const features = [];
+	for (const rc of rateCards) {
+		const et = rc.entitlementTemplate;
+		if (!et) continue;
+		if (et.type === "metered" && et.issueAfterReset != null) {
+			let overagePrice;
+			if (rc.price?.type === "tiered" && rc.price.tiers) {
+				const overageTier = rc.price.tiers.find((t) => t.unitPrice?.amount);
+				if (overageTier?.unitPrice) overagePrice = `$${parseFloat(overageTier.unitPrice.amount).toFixed(2)}/unit`;
+			}
+			quotas.push({
+				key: rc.featureKey,
+				name: rc.name,
+				limit: et.issueAfterReset,
+				period: et.usagePeriod ? formatDuration(et.usagePeriod) : "Month",
+				overagePrice
+			});
+		} else if (et.type === "boolean") features.push({
+			key: rc.featureKey,
+			name: rc.name
+		});
+		else if (et.type === "static" && et.config) try {
+			const config = JSON.parse(et.config);
+			features.push({
+				key: rc.featureKey,
+				name: rc.name,
+				value: String(config.value)
+			});
+		} catch {
+			features.push({
+				key: rc.featureKey,
+				name: rc.name
+			});
+		}
+	}
+	return {
+		quotas,
+		features
+	};
+};
+
+//#endregion
+//#region src/utils/getPriceFromPlan.ts
+const getPriceFromPlan = (plan) => {
+	const defaultPhase = plan.phases.at(-1);
+	if (!defaultPhase) return {
+		monthly: 0,
+		yearly: 0
+	};
+	const flatFeeCard = defaultPhase.rateCards.find((rc) => rc.type === "flat_fee" && rc.price?.type === "flat");
+	const monthlyAmount = flatFeeCard?.price.amount ? parseInt(flatFeeCard.price.amount, 10) : 0;
+	return {
+		monthly: monthlyAmount,
+		yearly: monthlyAmount * 12
+	};
+};
+
+//#endregion
+//#region src/pages/CheckoutConfimPage.tsx
+const formatBillingCycle = (duration) => {
+	if (duration === "month") return "monthly";
+	if (duration === "year") return "annually";
+	if (duration === "week") return "weekly";
+	if (duration === "day") return "daily";
+	if (duration.includes(" ")) return `every ${duration}`;
+	return `every ${duration}`;
+};
+const CheckoutConfirmPage = ({ environmentName }) => {
+	const [search] = useSearchParams();
+	const planId = search.get("plan");
+	const auth = useAuth();
+	const zudoku = useZudoku();
+	const navigate = useNavigate();
+	const { data: plans } = usePlans(environmentName);
+	const selectedPlan = plans?.items?.find((plan) => plan.id === planId);
+	const rateCards = selectedPlan?.phases.at(-1)?.rateCards;
+	const { quotas, features } = categorizeRateCards(rateCards ?? []);
+	const price = selectedPlan ? getPriceFromPlan(selectedPlan) : null;
+	const billingCycle = selectedPlan?.billingCadence ? formatDuration(selectedPlan.billingCadence) : null;
+	const createSubscriptionMutation = useMutation({
+		mutationFn: async () => {
+			if (!auth.profile?.email) throw new Error("No email found for user. Make sure your Authentication Provider exposes the email address.");
+			const signedRequest = await zudoku.signRequest(new Request(`https://api.zuploedge.com/v3/zudoku-metering/${environmentName}/subscriptions`, {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ planId })
+			}));
+			const response = await fetch(signedRequest);
+			const subscription = await response.json();
+			if (!response.ok) throw new Error(subscription.message);
+			return subscription.id;
+		},
+		onSuccess: (subscriptionId) => {
+			navigate(`/subscriptions/${subscriptionId}`);
+		},
+		onError: (error) => {
+			console.error("Error creating subscription:", error);
+		}
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "w-full bg-muted min-h-screen flex items-center justify-center px-4 py-12 gap-4",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "max-w-2xl w-full",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex gap-2 text-muted-foreground text-sm items-center pt-4 pb-4",
+					children: [/* @__PURE__ */ jsx(ArrowLeftIcon, { className: "size-4" }), "Your payment is secured by Stripe"]
+				}),
+				" ",
+				createSubscriptionMutation.isError && /* @__PURE__ */ jsxs(Alert, {
+					className: "mb-4",
+					children: [/* @__PURE__ */ jsx(AlertTitle, { children: "Error" }), /* @__PURE__ */ jsx(AlertDescription, { children: createSubscriptionMutation.error.message })]
+				}),
+				/* @__PURE__ */ jsxs(Card, {
+					className: "p-8 w-full max-w-7xl",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "flex justify-center mb-6",
+							children: /* @__PURE__ */ jsx("div", {
+								className: "rounded-full bg-primary/10 p-3",
+								children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-9 text-primary" })
+							})
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "text-center mb-8",
+							children: [/* @__PURE__ */ jsx("h1", {
+								className: "text-2xl font-bold text-card-foreground mb-3",
+								children: "Review you subscription"
+							}), /* @__PURE__ */ jsx("p", {
+								className: "text-muted-foreground text-base",
+								children: "Please confirm the details below before completing your purchase."
+							})]
+						}),
+						selectedPlan && /* @__PURE__ */ jsxs(Card, {
+							className: "bg-muted/50",
+							children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
+								className: "flex justify-between items-start",
+								children: [
+									/* @__PURE__ */ jsxs("div", {
+										className: "flex items-center gap-3",
+										children: [/* @__PURE__ */ jsx("div", {
+											className: "flex flex-col text-2xl font-bold bg-primary text-primary-foreground items-center justify-center rounded size-12",
+											children: selectedPlan.name.at(0)?.toUpperCase()
+										}), /* @__PURE__ */ jsxs("div", {
+											className: "flex flex-col",
+											children: [/* @__PURE__ */ jsx("span", {
+												className: "text-lg font-bold",
+												children: selectedPlan.name
+											}), /* @__PURE__ */ jsx("span", {
+												className: "text-sm font-normal text-muted-foreground",
+												children: selectedPlan.description || "Selected plan"
+											})]
+										})]
+									}),
+									price && price.monthly > 0 && /* @__PURE__ */ jsxs("div", {
+										className: "text-right",
+										children: [/* @__PURE__ */ jsxs("div", {
+											className: "text-2xl font-bold",
+											children: ["$", price.monthly.toLocaleString()]
+										}), billingCycle && /* @__PURE__ */ jsxs("div", {
+											className: "text-sm text-muted-foreground font-normal",
+											children: ["Billed ", formatBillingCycle(billingCycle)]
+										})]
+									}),
+									price && price.monthly === 0 && /* @__PURE__ */ jsx("div", {
+										className: "text-2xl text-muted-foreground font-bold",
+										children: "Free"
+									})
+								]
+							}) }), /* @__PURE__ */ jsxs(CardContent, { children: [
+								/* @__PURE__ */ jsx(Separator, {}),
+								/* @__PURE__ */ jsx("div", {
+									className: "text-sm font-medium mb-3 mt-3",
+									children: "What's included:"
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "grid grid-cols-2 gap-2 text-muted-foreground",
+									children: [quotas.map((quota) => /* @__PURE__ */ jsx(QuotaItem, {
+										quota,
+										className: "text-muted-foreground"
+									}, quota.key)), features.map((feature) => /* @__PURE__ */ jsx(FeatureItem, {
+										feature,
+										className: "text-muted-foreground"
+									}, feature.key))]
+								})
+							] })]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "space-y-3 mt-4",
+							children: [/* @__PURE__ */ jsx(Button, {
+								className: "w-full",
+								onClick: () => createSubscriptionMutation.mutate(),
+								disabled: createSubscriptionMutation.isPending,
+								children: createSubscriptionMutation.isPending ? "Processing Payment..." : "Confirm & Subscribe"
+							}), /* @__PURE__ */ jsx(Button, {
+								variant: "outline",
+								className: "w-full",
+								asChild: true
+							})]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "mt-6 pt-6 border-t text-center",
+							children: /* @__PURE__ */ jsx("p", {
+								className: "text-xs text-muted-foreground",
+								children: "By confirming, you agree to our Terms of Service and Privacy Policy. You can cancel anytime."
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 text-muted-foreground text-xs item-center justify-center pt-4",
+					children: [/* @__PURE__ */ jsx(LockIcon, { className: "size-3" }), "Your payment is secured by Stripe"]
+				})
+			]
+		})
+	});
+};
+var CheckoutConfimPage_default = CheckoutConfirmPage;
+
+//#endregion
+//#region src/pages/CheckoutFailedPage.tsx
+const CheckoutFailedPage = () => {
+	return /* @__PURE__ */ jsx("div", { children: "CheckoutFailedPage" });
+};
+var CheckoutFailedPage_default = CheckoutFailedPage;
+
+//#endregion
+//#region src/hooks/useUrlUtils.ts
+const useUrlUtils = () => {
+	const basePath = useZudoku().options.basePath;
+	return { generateUrl: (path) => {
+		if (!window.location.origin) throw new Error("Only works in browser environment");
+		return joinUrl(window.location.origin, basePath, path);
+	} };
+};
+
+//#endregion
+//#region src/pages/CheckoutPage.tsx
+const CheckoutPage = ({ environmentName }) => {
+	const [search] = useSearchParams();
+	const zudoku = useZudoku();
+	const planId = search.get("plan");
+	const auth = useAuth();
+	const { generateUrl } = useUrlUtils();
+	const { data: _data } = useQuery({
+		queryKey: ["plan", planId],
+		queryFn: async () => {
+			if (!auth.profile?.email) throw new Error("No email found for user. Make sure your Authentication Provider exposes the email address.");
+			const request = await zudoku.signRequest(new Request(`https://api.zuploedge.com/v3/zudoku-metering/${environmentName}/stripe/checkout`, {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					email: auth.profile?.email,
+					planId,
+					successURL: generateUrl(`/checkout-confirm`) + `?${planId ? `plan=${planId}` : ""}`,
+					cancelURL: generateUrl(`/checkout-failed`) + `?${planId ? `plan=${planId}` : ""}`
+				})
+			}));
+			console.log({
+				email: auth.profile?.email,
+				planId,
+				successURL: `${generateUrl(`/checkout-confirm`)}?${planId ? `plan=${planId}` : ""}`,
+				cancelURL: `${generateUrl(`/checkout-failed`)}?${planId ? `plan=${planId}` : ""}`
+			});
+			const checkoutRequest = await fetch(request).then((res) => res.json());
+			if (checkoutRequest.url) window.location.href = checkoutRequest.url;
+			return checkoutRequest;
+		}
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex min-h-screen items-center justify-center bg-muted",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex max-w-md flex-col items-center space-y-6 text-center",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "relative",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex h-24 w-24 items-center justify-center rounded-full bg-foreground/10",
+						children: /* @__PURE__ */ jsx(ShieldIcon, { className: "w-12 h-12 text-foreground" })
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "space-y-2",
+					children: [
+						/* @__PURE__ */ jsx("h2", {
+							className: "text-2xl font-bold text-card-foreground",
+							children: "Establishing encrypted connection..."
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground",
+							children: "Setting up your secure checkout experience"
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "text-sm text-muted-foreground",
+							children: "Powered by Stripe for maximum security"
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex space-x-2",
+					children: [
+						/* @__PURE__ */ jsx("div", { className: "h-3 w-3 animate-pulse rounded-full bg-primary [animation-delay:-0.3s]" }),
+						/* @__PURE__ */ jsx("div", { className: "h-3 w-3 animate-pulse rounded-full bg-primary [animation-delay:-0.15s]" }),
+						/* @__PURE__ */ jsx("div", { className: "h-3 w-3 animate-pulse rounded-full bg-primary" })
+					]
+				})
+			]
+		})
+	});
+};
+var CheckoutPage_default = CheckoutPage;
+
+//#endregion
+//#region src/pages/PricingPage.tsx
+const PricingCard = ({ plan, isPopular = false }) => {
+	const defaultPhase = plan.phases.at(-1);
+	if (!defaultPhase) return null;
+	const { quotas, features } = categorizeRateCards(defaultPhase.rateCards);
+	const price = getPriceFromPlan(plan);
+	const isFree = price.monthly === 0;
+	const isCustom = plan.key === "enterprise";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative rounded-lg border p-6 flex flex-col min-w-72", isPopular && "border-primary border-2"),
+		children: [
+			isPopular && /* @__PURE__ */ jsx("div", {
+				className: "absolute top-0 -translate-y-1/2 left-1/2 -translate-x-1/2 whitespace-nowrap",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "bg-primary text-primary-foreground text-xs font-semibold px-3 py-1 rounded-full uppercase",
+					children: "Most Popular"
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-4 pb-4 border-b",
+				children: [
+					/* @__PURE__ */ jsx("h3", {
+						className: "text-base font-semibold text-muted-foreground mb-2",
+						children: plan.name
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "flex items-baseline gap-1 flex-wrap",
+						children: isCustom ? /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+							className: "text-3xl font-bold text-card-foreground",
+							children: "Custom"
+						}), /* @__PURE__ */ jsx("div", {
+							className: "text-sm text-muted-foreground mt-1",
+							children: "Contact Sales"
+						})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+							className: "text-3xl font-bold text-card-foreground",
+							children: isFree ? "Free" : `$${price.monthly.toLocaleString()}`
+						}), !isFree && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground text-sm",
+							children: "/mo"
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "w-full text-sm text-muted-foreground mt-1",
+							children: [
+								"$",
+								price.yearly.toLocaleString(),
+								"/year"
+							]
+						})] })] })
+					}),
+					isFree && /* @__PURE__ */ jsx("div", {
+						className: "text-sm text-muted-foreground mt-1",
+						children: "No CC required"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-4 mb-6 flex-grow",
+				children: [quotas.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "space-y-2",
+					children: quotas.map((quota) => /* @__PURE__ */ jsx(QuotaItem, { quota }, quota.key))
+				}), features.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "space-y-2",
+					children: features.map((feature) => /* @__PURE__ */ jsx(FeatureItem, { feature }, feature.key))
+				})]
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				variant: isPopular ? "default" : "secondary",
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Link, {
+					to: `/checkout?plan=${plan.id}`,
+					children: "Subscribe"
+				})
+			})
+		]
+	});
+};
+const PricingPage = ({ environmentName }) => {
+	const { data: pricingTableData } = usePlans(environmentName);
+	const planOrder = [
+		"developer",
+		"startup",
+		"pro",
+		"business",
+		"enterprise"
+	];
+	const sortedPlans = [...pricingTableData.items].sort((a, b) => {
+		return planOrder.indexOf(a.key) - planOrder.indexOf(b.key);
+	});
+	const getGridCols = (count) => {
+		if (count === 1) return "lg:grid-cols-1";
+		if (count === 2) return "lg:grid-cols-2";
+		if (count === 3) return "lg:grid-cols-3";
+		if (count === 4) return "lg:grid-cols-4";
+		return "lg:grid-cols-5";
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full px-4 py-12",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "text-center mb-12",
+			children: [/* @__PURE__ */ jsx(Heading, {
+				level: 1,
+				children: "Pricing"
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-lg text-gray-600 dark:text-gray-400",
+				children: "Global live music data, flexible plans for every scale"
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex justify-center",
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("w-full md:w-auto grid grid-cols-1 md:grid-cols-2 gap-6 md:max-w-fit", getGridCols(sortedPlans.length)),
+				children: sortedPlans.map((plan) => /* @__PURE__ */ jsx(PricingCard, {
+					plan,
+					isPopular: plan.key === "pro"
+				}, plan.id))
+			})
+		})]
+	});
+};
+var PricingPage_default = PricingPage;
+
+//#endregion
+//#region src/hooks/useSubscriptions.ts
+const useSubscriptions = (environmentName) => {
+	return useSuspenseQuery({
+		meta: { context: useZudoku() },
+		queryKey: [`/v3/zudoku-metering/${environmentName}/subscriptions`]
+	});
+};
+
+//#endregion
+//#region src/ZuploMonetizationWrapper.tsx
+const BASE_URL = "https://api.zuploedge.com";
+const createMutationFn = (url, context, init) => {
+	return async () => {
+		const request = new Request(`${BASE_URL}${url}`, {
+			method: "POST",
+			...init,
+			headers: {
+				"Content-Type": "application/json",
+				...init?.headers
+			}
+		});
+		const response = await fetch(context ? await context.signRequest(request) : request);
+		if (!response.ok) {
+			const errorText = await response.text();
+			throw new Error(`Request failed: ${response.status} ${errorText}`);
+		}
+		return response.json();
+	};
+};
+const client = new QueryClient({ defaultOptions: {
+	queries: {
+		retry: false,
+		queryFn: async (q) => {
+			if (!Array.isArray(q.queryKey)) throw new Error("Query key must be an array");
+			if (q.queryKey.length === 0) throw new Error("Query key must be a non-empty array");
+			const url = q.queryKey[0];
+			if (!url || typeof url !== "string") throw new Error("URL is required");
+			const init = q.queryKey[1] ?? {};
+			const request = new Request(`${BASE_URL}${url}`, {
+				...init,
+				headers: {
+					"Content-Type": "application/json",
+					...init.headers
+				}
+			});
+			const response = await fetch(q.meta?.context ? await q.meta.context.signRequest(request) : request);
+			if (!response.ok) throw new Error("Failed to fetch request");
+			return response.json();
+		}
+	},
+	mutations: { retry: false }
+} });
+const ZuploMonetizationWrapper = () => {
+	return /* @__PURE__ */ jsx(QueryClientProvider, {
+		client,
+		children: /* @__PURE__ */ jsx(Outlet, {})
+	});
+};
+var ZuploMonetizationWrapper_default = ZuploMonetizationWrapper;
+
+//#endregion
+//#region src/pages/subscriptions/ApiKey.tsx
+const ApiKey = ({ apiKey, createdAt, lastUsed, expiresAt, isActive = true, label, apiKeyId }) => {
+	const formatDate = (dateString) => {
+		if (!dateString) return "";
+		return new Date(dateString).toLocaleDateString("en-US", {
+			month: "short",
+			day: "numeric",
+			year: "numeric"
+		});
+	};
+	const getTimeAgo = (dateString) => {
+		if (!dateString) return "Never";
+		const date = new Date(dateString);
+		const now = /* @__PURE__ */ new Date();
+		const diffInMinutes = Math.floor((now.getTime() - date.getTime()) / (1e3 * 60));
+		if (diffInMinutes < 1) return "Just now";
+		if (diffInMinutes < 60) return `${diffInMinutes} minutes ago`;
+		const diffInHours = Math.floor(diffInMinutes / 60);
+		if (diffInHours < 24) return `${diffInHours} hours ago`;
+		const diffInDays = Math.floor(diffInHours / 24);
+		if (diffInDays === 1) return "1 day ago";
+		if (diffInDays < 30) return `${diffInDays} days ago`;
+		return formatDate(dateString);
+	};
+	const isExpiring = expiresAt && new Date(expiresAt) < new Date(Date.now() + 720 * 60 * 60 * 1e3);
+	const isExpired = expiresAt && new Date(expiresAt) < /* @__PURE__ */ new Date();
+	const handleDelete = () => {
+		console.log("Delete API Key", apiKeyId);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: isExpiring && !isExpired ? "border-l-4 border-yellow-500 pl-4" : "",
+		children: /* @__PURE__ */ jsx(Card, {
+			className: isExpiring && !isExpired ? "border-yellow-200 bg-yellow-50" : "",
+			children: /* @__PURE__ */ jsx(CardContent, {
+				className: "p-6",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "space-y-4",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "flex items-center justify-between",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "font-semibold text-base",
+									children: label || "API Key"
+								}), isActive ? /* @__PURE__ */ jsx("span", {
+									className: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800",
+									children: "Active"
+								}) : /* @__PURE__ */ jsx("span", {
+									className: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800",
+									children: "Expiring"
+								})]
+							})
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-1.5 text-sm text-muted-foreground",
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-1.5",
+									children: [/* @__PURE__ */ jsx(ClockIcon, { className: "size-3.5" }), /* @__PURE__ */ jsxs("span", { children: ["Created ", formatDate(createdAt)] })]
+								}),
+								/* @__PURE__ */ jsx("span", { children: "•" }),
+								/* @__PURE__ */ jsxs("span", { children: ["Last used ", getTimeAgo(lastUsed)] }),
+								expiresAt,
+								expiresAt && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { children: "•" }), /* @__PURE__ */ jsxs("span", {
+									className: isExpired ? "text-red-700 font-medium" : isExpiring ? "text-yellow-700 font-medium" : "",
+									children: ["Expires ", formatDate(expiresAt)]
+								})] })
+							]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2 rounded-md font-mono text-sm",
+							children: [/* @__PURE__ */ jsx(Secret, {
+								secret: apiKey,
+								status: isActive ? "active" : "expiring"
+							}), !isActive && /* @__PURE__ */ jsx("button", {
+								onClick: handleDelete,
+								className: "text-red-500 hover:text-red-700 p-1",
+								type: "button",
+								"aria-label": "Delete API key",
+								children: /* @__PURE__ */ jsx(Trash2Icon, { className: "size-4" })
+							})]
+						})
+					]
+				})
+			})
+		})
+	});
+};
+
+//#endregion
+//#region src/pages/subscriptions/ApiKeysList.tsx
+const ApiKeysList = ({ apiKeys, deploymentName, consumerId }) => {
+	const queryClient = useQueryClient();
+	const context = useZudoku();
+	const rollKeyMutation = useMutation({
+		mutationFn: createMutationFn(`/v2/client/${deploymentName}/consumers/${consumerId}/roll-key`, context, {
+			method: "POST",
+			body: JSON.stringify({})
+		}),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: [`/${deploymentName}/consumers/${consumerId}`] });
+		}
+	});
+	if (!apiKeys || apiKeys.length === 0) return null;
+	const sortedKeys = [...apiKeys].sort((a, b) => {
+		const aExpired = new Date(a.expiresAt) < /* @__PURE__ */ new Date();
+		if (aExpired !== new Date(b.expiresAt) < /* @__PURE__ */ new Date()) return aExpired ? 1 : -1;
+		return new Date(b.createdOn).getTime() - new Date(a.createdOn).getTime();
+	});
+	const activeKey = sortedKeys.find((k) => !k.expiresAt);
+	const expiringKeys = sortedKeys.filter((k) => !k.expiresAt);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ jsx("h3", {
+				className: "text-lg font-semibold",
+				children: "API Keys"
+			}), /* @__PURE__ */ jsxs(Button$1, {
+				onClick: () => rollKeyMutation.mutate(),
+				disabled: rollKeyMutation.isPending,
+				children: [/* @__PURE__ */ jsx(RefreshCwIcon, { className: `size-4 ${rollKeyMutation.isPending ? "animate-spin" : ""}` }), rollKeyMutation.isPending ? "Rolling..." : "Roll API Key"]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "space-y-4",
+			children: [activeKey && /* @__PURE__ */ jsx(ApiKey, {
+				deploymentName,
+				consumerId,
+				apiKeyId: activeKey.id,
+				apiKey: activeKey.key,
+				createdAt: activeKey.createdOn,
+				lastUsed: activeKey.updatedOn,
+				expiresAt: activeKey.expiresAt,
+				isActive: true,
+				label: "Current Key"
+			}, activeKey.id), expiringKeys.map((apiKey) => /* @__PURE__ */ jsx(ApiKey, {
+				deploymentName,
+				consumerId,
+				apiKeyId: apiKey.id,
+				apiKey: apiKey.key,
+				createdAt: apiKey.createdOn,
+				lastUsed: apiKey.updatedOn,
+				expiresAt: apiKey.expiresAt,
+				isActive: false,
+				label: "Previous Key"
+			}, apiKey.id))]
+		})]
+	});
+};
+
+//#endregion
+//#region src/pages/subscriptions/SubscriptionsList.tsx
+const SubscriptionsList = ({ subscriptions, activeSubscriptionId }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3",
+		children: subscriptions.map((subscription) => {
+			const isActive = activeSubscriptionId === subscription.id;
+			return /* @__PURE__ */ jsx(Link, {
+				to: `/subscriptions/${subscription.id}`,
+				children: /* @__PURE__ */ jsx(Item, {
+					size: "sm",
+					variant: "outline",
+					className: cn(isActive && "border-primary bg-primary/5 shadow-md"),
+					children: /* @__PURE__ */ jsx(ItemContent, { children: /* @__PURE__ */ jsx(ItemTitle, { children: subscription.name }) })
+				}, subscription.id)
+			}, subscription.id);
+		})
+	});
+};
+
+//#endregion
+//#region src/pages/subscriptions/Usage.tsx
+const isMeteredEntitlement = (entitlement) => {
+	return "balance" in entitlement;
+};
+const Usage = ({ subscriptionId, environmentName }) => {
+	const zudoku = useZudoku();
+	const { data: plans } = usePlans(environmentName);
+	const { data: usage } = useSuspenseQuery({
+		queryKey: [`/v3/zudoku-metering/${environmentName}/subscriptions/${subscriptionId}/usage`],
+		meta: { context: zudoku }
+	});
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Heading, {
+		level: 3,
+		className: "mb-4",
+		children: "Usage"
+	}), /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, {
+		className: "p-6",
+		children: Object.entries(usage.entitlements).filter((entry) => isMeteredEntitlement(entry[1])).map(([key, metric], index) => /* @__PURE__ */ jsxs("div", { children: [index > 0 && /* @__PURE__ */ jsx("div", { className: "my-4 border-t" }), /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between text-sm",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-base font-medium capitalize",
+							children: key
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "text-muted-foreground",
+							children: [metric.usage.toLocaleString(), " used"]
+						})]
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "text-muted-foreground",
+						children: [metric.balance.toLocaleString(), " limit"]
+					})]
+				}),
+				/* @__PURE__ */ jsx(Progress, {
+					value: metric.usage / metric.balance * 100,
+					className: "h-2"
+				}),
+				/* @__PURE__ */ jsxs("p", {
+					className: "text-sm text-muted-foreground",
+					children: [metric.balance - metric.usage, " calls remaining this month"]
+				})
+			]
+		})] }, key))
+	}) })] });
+};
+
+//#endregion
+//#region src/pages/SubscriptionsPage.tsx
+const SubscriptionsPage = ({ environmentName }) => {
+	const { data } = useSubscriptions(environmentName);
+	const { subscriptionId } = useParams();
+	const subscriptions = data?.items ?? [];
+	const activeSubscription = useMemo(() => {
+		if (subscriptions.length === 0) return null;
+		if (subscriptionId) return subscriptions.find((s) => s.id === subscriptionId) ?? subscriptions[0];
+		return subscriptions[0];
+	}, [subscriptions, subscriptionId]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "w-full py-12",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "max-w-4xl space-y-8",
+			children: [
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h1", {
+					className: "text-2xl font-bold text-foreground mb-2",
+					children: "My Subscriptions"
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-base text-muted-foreground",
+					children: "Manage your subscriptions, usage, and API keys"
+				})] }),
+				/* @__PURE__ */ jsx(SubscriptionsList, {
+					subscriptions,
+					activeSubscriptionId: activeSubscription?.id
+				}),
+				activeSubscription && /* @__PURE__ */ jsx(Usage, {
+					subscriptionId: activeSubscription?.id,
+					environmentName
+				}),
+				activeSubscription?.consumer?.apiKeys && /* @__PURE__ */ jsx(ApiKeysList, {
+					deploymentName: environmentName,
+					consumerId: activeSubscription.consumer.id,
+					apiKeys: activeSubscription.consumer.apiKeys
+				}),
+				subscriptions.length === 0 && /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, {
+					className: "p-12 text-center",
+					children: /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground",
+						children: "No active subscriptions found."
+					})
+				}) })
+			]
+		})
+	});
+};
+var SubscriptionsPage_default = SubscriptionsPage;
+
+//#endregion
+//#region src/ZuploMonetizationPlugin.tsx
+const PRICING_PATH = "/pricing";
+const enableMonetization = (config, options) => {
+	return {
+		...config,
+		plugins: [...config.plugins ?? [], zuploMonetizationPlugin(options)],
+		slots: { "head-navigation-start": () => {
+			return /* @__PURE__ */ jsx(Link, {
+				to: PRICING_PATH,
+				children: "Pricing"
+			});
+		} }
+	};
+};
+const zuploMonetizationPlugin = (options) => {
+	return {
+		getIdentities: async (context) => {
+			return (await client.fetchQuery({
+				queryKey: [`/v3/zudoku-metering/${options.environmentName}/subscriptions`],
+				meta: { context }
+			})).items.flatMap((item) => item.consumer.apiKeys.map((apiKey) => ({
+				label: item.name,
+				id: apiKey.id,
+				authorizeRequest: async (request) => {
+					return new Request(request, { headers: { Authorization: `Bearer ${apiKey.key}` } });
+				},
+				authorizationFields: { headers: ["Authorization"] }
+			})));
+		},
+		getProfileMenuItems: () => [{
+			label: "My Subscriptions",
+			path: "/subscriptions",
+			icon: StarsIcon
+		}],
+		getRoutes: () => [{
+			Component: ZuploMonetizationWrapper_default,
+			handle: { layout: "none" },
+			children: [{
+				path: "/checkout",
+				element: /* @__PURE__ */ jsx(CheckoutPage_default, { environmentName: options.environmentName })
+			}, {
+				path: "/checkout-confirm",
+				element: /* @__PURE__ */ jsx(CheckoutConfimPage_default, { environmentName: options.environmentName })
+			}]
+		}, {
+			Component: ZuploMonetizationWrapper_default,
+			children: [
+				{
+					path: "/pricing",
+					element: /* @__PURE__ */ jsx(PricingPage_default, { environmentName: options.environmentName })
+				},
+				{
+					path: "/checkout-failed",
+					element: /* @__PURE__ */ jsx(CheckoutFailedPage_default, {})
+				},
+				{
+					path: "/subscriptions/:subscriptionId?",
+					element: /* @__PURE__ */ jsx(SubscriptionsPage_default, { environmentName: options.environmentName })
+				}
+			]
+		}],
+		getProtectedRoutes: () => {
+			return [
+				"/checkout",
+				"/checkout-success",
+				"/checkout-failed"
+			];
+		}
+	};
+};
+
+//#endregion
+export { enableMonetization, zuploMonetizationPlugin };

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@zuplo/zudoku-plugin-monetization",
+  "version": "0.0.2",
+  "type": "module",
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.mts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "tinyduration": "3.4.1"
+  },
+  "devDependencies": {
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "tsdown": "0.20.0-beta.3",
+    "zudoku": "0.67.0"
+  },
+  "peerDependencies": {
+    "react": ">=19.2.0",
+    "react-dom": ">=19.2.0",
+    "zudoku": ">=0.67.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch"
+  }
+}