@lukoweb/zudoku-plugin-monetization 0.1.37

package/dist/index.mjs

@@ -0,0 +1,2216 @@
+import { cn, createPlugin, joinUrl, throwIfProblemJson } from "@lukoweb/apitogo";
+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 "@lukoweb/apitogo/icons";
+import { Button, ClientOnly, Head, Heading, Link, Slot } from "@lukoweb/apitogo/components";
+import { useAuth, useZudoku } from "@lukoweb/apitogo/hooks";
+import { QueryClient, QueryClientProvider, useMutation, useQuery, useQueryClient, useSuspenseQuery } from "@lukoweb/apitogo/react-query";
+import { Link as Link$1, Outlet, useLocation, useNavigate, useSearchParams } from "@lukoweb/apitogo/router";
+import { Alert, AlertAction, AlertDescription, AlertTitle } from "@lukoweb/apitogo/ui/Alert";
+import { Card, CardContent, CardHeader, CardTitle } from "@lukoweb/apitogo/ui/Card";
+import { Separator } from "@lukoweb/apitogo/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 "@lukoweb/apitogo/ui/Button";
+import { DismissibleAlert, DismissibleAlertAction } from "@lukoweb/apitogo/ui/DismissibleAlert";
+import { ActionButton } from "@lukoweb/apitogo/ui/ActionButton";
+import { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "@lukoweb/apitogo/ui/Item";
+import { Badge } from "@lukoweb/apitogo/ui/Badge";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@lukoweb/apitogo/ui/DropdownMenu";
+import { Frame, FrameFooter, FramePanel } from "@lukoweb/apitogo/ui/Frame";
+import { Secret } from "@lukoweb/apitogo/ui/Secret";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@lukoweb/apitogo/ui/AlertDialog";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@lukoweb/apitogo/ui/Tooltip";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@lukoweb/apitogo/ui/Dialog";
+import { Input } from "@lukoweb/apitogo/ui/Input";
+import { Progress } from "@lukoweb/apitogo/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/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;
+};
+
+//#endregion
+//#region src/hooks/usePlans.ts
+const usePlans = () => {
+	const zudoku = useZudoku();
+	const auth = useAuth();
+	return useSuspenseQuery({
+		queryKey: [`/v3/zudoku-metering/${useDeploymentName()}/pricing-page`],
+		meta: { context: auth.isAuthenticated ? zudoku : void 0 }
+	});
+};
+
+//#endregion
+//#region src/MonetizationContext.tsx
+const MonetizationContext = createContext({});
+const useMonetizationConfig = () => use(MonetizationContext);
+
+//#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;
+	}
+};
+const formatDurationInterval = (iso) => {
+	try {
+		const d = parse(iso);
+		if (d.years === 1) return "yearly";
+		if (d.years && d.years > 1) return `every ${d.years} years`;
+		if (d.months === 1) return "monthly";
+		if (d.months && d.months > 1) return `every ${d.months} months`;
+		if (d.weeks === 1) return "weekly";
+		if (d.weeks && d.weeks > 1) return `every ${d.weeks} weeks`;
+		if (d.days === 1) return "daily";
+		if (d.days && d.days > 1) return `every ${d.days} days`;
+		return iso;
+	} catch {
+		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
+const formatPrice = (amount, currency) => new Intl.NumberFormat("en-US", {
+	style: "currency",
+	currency: currency ?? "USD",
+	minimumFractionDigits: 2,
+	maximumFractionDigits: 6,
+	trailingZeroDisplay: "stripIfInteger"
+}).format(amount);
+
+//#endregion
+//#region src/utils/categorizeRateCards.ts
+const categorizeRateCards = (rateCards, options) => {
+	const { currency, units, planBillingCadence } = options ?? {};
+	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 (et.isSoftLimit !== false && rc.price?.type === "tiered" && rc.price.tiers) {
+				const overageTier = rc.price.tiers.find((t) => t.unitPrice?.amount && parseFloat(t.unitPrice.amount) > 0);
+				if (overageTier?.unitPrice) {
+					const amount = parseFloat(overageTier.unitPrice.amount);
+					const unitLabel = units?.[rc.key] ?? units?.[rc.featureKey ?? ""] ?? "unit";
+					overagePrice = `${formatPrice(amount, currency)}/${unitLabel}`;
+				}
+			}
+			quotas.push({
+				key: rc.featureKey ?? rc.key,
+				name: rc.name,
+				limit: et.issueAfterReset,
+				period: rc.billingCadence ? formatDuration(rc.billingCadence) : planBillingCadence ? formatDuration(planBillingCadence) : "month",
+				overagePrice
+			});
+		} else if (et.type === "boolean") features.push({
+			key: rc.featureKey ?? rc.key,
+			name: rc.name
+		});
+		else if (et.type === "static" && et.config) try {
+			const config = JSON.parse(et.config);
+			features.push({
+				key: rc.featureKey ?? rc.key,
+				name: rc.name,
+				value: String(config.value)
+			});
+		} catch {
+			features.push({
+				key: rc.featureKey ?? rc.key,
+				name: rc.name
+			});
+		}
+	}
+	return {
+		quotas,
+		features
+	};
+};
+
+//#endregion
+//#region src/utils/formatBillingCycle.ts
+const formatBillingCycle = (duration) => {
+	if (duration === "month") return "monthly";
+	if (duration === "year") return "annually";
+	if (duration === "week") return "weekly";
+	if (duration === "day") return "daily";
+	return `every ${duration}`;
+};
+
+//#endregion
+//#region src/utils/getPriceFromPlan.ts
+const getPriceFromPlan = (plan) => {
+	return {
+		monthly: plan.monthlyPrice != null ? parseFloat(plan.monthlyPrice) : 0,
+		yearly: plan.yearlyPrice != null ? parseFloat(plan.yearlyPrice) : 0
+	};
+};
+
+//#endregion
+//#region src/ZuploMonetizationWrapper.tsx
+const DEFAULT_GATEWAY_URL = "https://api.zuploedge.com";
+const getBaseUrl = (context) => {
+	if (!context) return DEFAULT_GATEWAY_URL;
+	return context.env.ZUPLO_GATEWAY_SERVICE_URL || DEFAULT_GATEWAY_URL;
+};
+const hasVariables = (value) => typeof value === "object" && value != null;
+const queryClient = 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 request = new Request(joinUrl(getBaseUrl(q.meta?.context), url), {
+				...q.meta?.request,
+				headers: {
+					"Content-Type": "application/json",
+					...q.meta?.request?.headers
+				}
+			});
+			const response = await fetch(q.meta?.context ? await q.meta.context.signRequest(request) : request);
+			await throwIfProblemJson(response);
+			if (!response.ok) throw new Error("Failed to fetch request");
+			return response.json();
+		}
+	},
+	mutations: {
+		retry: false,
+		mutationFn: async (variables, m) => {
+			if (!m.mutationKey || !Array.isArray(m.mutationKey)) throw new Error("Mutation key must be an array");
+			if (m.mutationKey.length === 0) throw new Error("Mutation key must be a non-empty array");
+			let url = m.mutationKey[0];
+			if (!url || typeof url !== "string") throw new Error("URL is required as first element of mutationKey");
+			if (typeof url === "string" && hasVariables(variables)) url = url.replace(/{(\w+)}/g, (_, key) => {
+				const value = variables[key];
+				if (value === void 0) throw new Error(`Missing variable "${key}" for URL template`);
+				return encodeURIComponent(String(value));
+			});
+			const init = typeof m.meta?.request === "function" ? m.meta.request(variables) : m.meta?.request ?? {};
+			const method = init.method || "POST";
+			const body = init.body ?? (method !== "GET" && method !== "HEAD" ? JSON.stringify(variables) : void 0);
+			const request = new Request(joinUrl(getBaseUrl(m.meta?.context), url), {
+				...init,
+				method,
+				body,
+				headers: {
+					"Content-Type": "application/json",
+					...init.headers
+				}
+			});
+			const response = await fetch(m.meta?.context ? await m.meta.context.signRequest(request) : request);
+			await throwIfProblemJson(response);
+			if (!response.ok) {
+				const errorText = await response.text();
+				throw new Error(`Request failed: ${response.status} ${errorText}`);
+			}
+			if (response.headers.get("content-type")?.includes("application/json")) return response.json();
+			return response.text();
+		}
+	}
+} });
+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("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 ?? [], {
+		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({
+		mutationKey: [`/v3/zudoku-metering/${deploymentName}/subscriptions`],
+		meta: {
+			context: zudoku,
+			request: {
+				method: "POST",
+				body: JSON.stringify({ planId })
+			}
+		},
+		onSuccess: async (subscription) => {
+			await queryClient.invalidateQueries();
+			navigate(`/subscriptions?subscriptionId=${encodeURIComponent(subscription.id)}`);
+		}
+	});
+	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: [
+				createSubscriptionMutation.isError && /* @__PURE__ */ jsxs(Alert, {
+					className: "mb-4",
+					variant: "destructive",
+					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 your 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__ */ jsx("div", {
+											className: "text-2xl font-bold",
+											children: formatPrice(price.monthly, selectedPlan?.currency)
+										}), 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: "ghost",
+								className: "w-full",
+								disabled: createSubscriptionMutation.isPending,
+								asChild: !createSubscriptionMutation.isPending,
+								children: /* @__PURE__ */ jsx(Link$1, {
+									to: "/pricing",
+									children: "Cancel"
+								})
+							})]
+						}),
+						/* @__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"]
+				})
+			]
+		})
+	});
+};
+
+//#endregion
+//#region src/components/RedirectPage.tsx
+const RedirectPage = ({ icon: Icon, title, description, url, children }) => {
+	useEffect(() => {
+		if (url) window.location.href = url;
+	}, [url]);
+	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(Icon, { className: "w-12 h-12 text-foreground" })
+					})
+				}),
+				children,
+				/* @__PURE__ */ jsxs("div", {
+					className: "space-y-2",
+					children: [
+						/* @__PURE__ */ jsx("h2", {
+							className: "text-2xl font-bold text-card-foreground",
+							children: title
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground",
+							children: description
+						}),
+						/* @__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" })
+					]
+				})
+			]
+		})
+	});
+};
+
+//#endregion
+//#region src/hooks/useUrlUtils.ts
+const useUrlUtils = () => {
+	const basePath = useZudoku().options.basePath;
+	return { generateUrl: (path, { searchParams } = {}) => {
+		if (!window.location.origin) throw new Error("Only works in browser environment");
+		return joinUrl(window.location.origin, basePath, path, searchParams ? `?${new URLSearchParams(searchParams)}` : void 0);
+	} };
+};
+
+//#endregion
+//#region src/pages/CheckoutPage.tsx
+const CheckoutPage = () => {
+	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 checkoutLink = useQuery({
+		queryKey: [
+			`/v3/zudoku-metering/${deploymentName}/stripe/checkout`,
+			planId,
+			auth.profile?.sub
+		],
+		meta: {
+			context: zudoku,
+			request: {
+				method: "POST",
+				body: JSON.stringify({
+					planId,
+					successURL: generateUrl("/checkout-confirm", { searchParams: { planId } }),
+					cancelURL: generateUrl("/pricing")
+				})
+			}
+		}
+	});
+	return /* @__PURE__ */ jsx(RedirectPage, {
+		icon: ShieldIcon,
+		title: "Establishing encrypted connection...",
+		description: "Setting up your secure checkout experience",
+		url: checkoutLink.data?.url,
+		children: checkoutLink.isError && /* @__PURE__ */ jsxs(Alert, {
+			variant: "destructive",
+			children: [/* @__PURE__ */ jsx(AlertDescription, {
+				className: "first-letter:uppercase",
+				children: checkoutLink.error.message
+			}), /* @__PURE__ */ jsx(AlertAction, { children: /* @__PURE__ */ jsx(Button$1, {
+				variant: "outline",
+				size: "xs",
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Link$1, {
+					to: "/subscriptions",
+					children: "Back"
+				})
+			}) })]
+		})
+	});
+};
+
+//#endregion
+//#region src/pages/ManagePaymentPage.tsx
+const ManagePaymentPage = () => {
+	const zudoku = useZudoku();
+	const { generateUrl } = useUrlUtils();
+	const deploymentName = useDeploymentName();
+	const auth = useAuth();
+	const billingPortal = useQuery({
+		queryKey: [`/v3/zudoku-metering/${deploymentName}/stripe/portal`],
+		meta: {
+			context: zudoku,
+			request: {
+				method: "POST",
+				body: JSON.stringify({
+					email: auth.profile?.email,
+					returnURL: generateUrl("/subscriptions")
+				})
+			}
+		}
+	});
+	return /* @__PURE__ */ jsx(RedirectPage, {
+		icon: CreditCardIcon,
+		title: "Redirecting to payment portal...",
+		description: "Setting up your secure connection",
+		url: billingPortal.data?.url,
+		children: billingPortal.isError && /* @__PURE__ */ jsxs(Alert, {
+			variant: "destructive",
+			children: [/* @__PURE__ */ jsx(AlertDescription, {
+				className: "first-letter:uppercase",
+				children: billingPortal.error.message
+			}), /* @__PURE__ */ jsx(AlertAction, { children: /* @__PURE__ */ jsx(Button$1, {
+				variant: "outline",
+				size: "xs",
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Link, {
+					to: "/subscriptions",
+					children: "Back"
+				})
+			}) })]
+		})
+	});
+};
+
+//#endregion
+//#region src/pages/pricing/PricingCard.tsx
+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: [
+			showName && /* @__PURE__ */ jsxs("div", {
+				className: "text-sm font-medium text-card-foreground",
+				children: [phase.name, phase.duration && /* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground font-normal",
+					children: [
+						" ",
+						"— ",
+						formatDuration(phase.duration)
+					]
+				})]
+			}),
+			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 }) => {
+	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: [
+			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" : formatPrice(price.monthly, plan.currency)
+						}), !isFree && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+							className: "text-muted-foreground text-sm",
+							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"]
+						})] })] })
+					}),
+					plan.paymentRequired === false && /* @__PURE__ */ jsx("div", {
+						className: "text-sm text-muted-foreground mt-1",
+						children: "No CC required"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "space-y-4 mb-6 grow",
+				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",
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Link$1, {
+					to: `/subscriptions#manage`,
+					children: "Manage Subscriptions"
+				})
+			}) : /* @__PURE__ */ jsx(Button, {
+				variant: isPopular ? "default" : "secondary",
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Link$1, {
+					to: `/checkout?planId=${encodeURIComponent(plan.id)}`,
+					children: "Subscribe"
+				})
+			})
+		]
+	});
+};
+
+//#endregion
+//#region src/pages/PricingPage.tsx
+const PricingPage = () => {
+	const { pricing } = useMonetizationConfig();
+	const zudoku = useZudoku();
+	const deploymentName = useDeploymentName();
+	const auth = useAuth();
+	const { data: pricingTable } = usePlans();
+	const { data: subscriptions = { items: [] } } = useQuery({
+		meta: { context: zudoku },
+		queryKey: [`/v3/zudoku-metering/${deploymentName}/subscriptions`],
+		enabled: auth.isAuthenticated
+	});
+	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: pricing?.title ?? "Pricing" }), /* @__PURE__ */ jsx("meta", {
+				name: "description",
+				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: pricing?.title ?? "Pricing"
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground",
+					"data-testid": "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,
+					isPopular: plan.metadata?.zuplo_most_popular === "true",
+					isSubscribed: subscriptions.items.some((subscription) => ["active", "canceled"].includes(subscription.status))
+				}, plan.id))
+			}),
+			/* @__PURE__ */ jsx(Slot.Target, { name: "pricing-page-after" })
+		]
+	});
+};
+
+//#endregion
+//#region src/pages/SubscriptionChangeConfirmPage.tsx
+const SubscriptionChangeConfirmPage = () => {
+	const [search] = useSearchParams();
+	const planId = search.get("planId");
+	const subscriptionId = search.get("subscriptionId");
+	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");
+	if (!subscriptionId) throw new Error("Parameter `subscriptionId` missing");
+	const rateCards = selectedPlan?.phases.at(-1)?.rateCards;
+	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({
+		mutationKey: [`/v3/zudoku-metering/${deploymentName}/subscriptions/${subscriptionId}/change`],
+		meta: {
+			context: zudoku,
+			request: {
+				method: "POST",
+				body: JSON.stringify({ planId })
+			}
+		},
+		onSuccess: async (subscription) => {
+			await queryClient.invalidateQueries();
+			navigate(`/subscriptions?subscriptionId=${encodeURIComponent(subscription.id)}`, { state: { planSwitched: { newPlanName: selectedPlan?.name } } });
+		}
+	});
+	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: [changeMutation.isError && /* @__PURE__ */ jsxs(Alert, {
+				className: "mb-4",
+				variant: "destructive",
+				children: [/* @__PURE__ */ jsx(AlertTitle, { children: "Error" }), /* @__PURE__ */ jsx(AlertDescription, { children: changeMutation.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: "Confirm plan change"
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground text-base",
+							children: "Please confirm the details below to change your subscription."
+						})]
+					}),
+					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 || "New plan"
+										})]
+									})]
+								}),
+								price && price.monthly > 0 && /* @__PURE__ */ jsxs("div", {
+									className: "text-right",
+									children: [/* @__PURE__ */ jsx("div", {
+										className: "text-2xl font-bold",
+										children: formatPrice(price.monthly, selectedPlan?.currency)
+									}), 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: () => changeMutation.mutate(),
+							disabled: changeMutation.isPending,
+							children: changeMutation.isPending ? "Changing plan..." : "Confirm & Change Plan"
+						}), /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							className: "w-full",
+							disabled: changeMutation.isPending,
+							asChild: !changeMutation.isPending,
+							children: /* @__PURE__ */ jsx(Link$1, {
+								to: `/subscriptions?${new URLSearchParams({ subscriptionId: subscriptionId ?? "" })}`,
+								children: "Cancel"
+							})
+						})]
+					}),
+					/* @__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."
+						})
+					})
+				]
+			})]
+		})
+	});
+};
+
+//#endregion
+//#region src/hooks/useSubscriptions.ts
+const useSubscriptions = (environmentName) => {
+	const zudoku = useZudoku();
+	return useSuspenseQuery({
+		queryKey: [`/v3/zudoku-metering/${environmentName}/subscriptions`],
+		meta: { context: zudoku }
+	});
+};
+
+//#endregion
+//#region src/pages/subscriptions/ConfirmDeleteKeyAlert.tsx
+const ConfirmDeleteKeyAlert = ({ children, onDelete }) => {
+	return /* @__PURE__ */ jsxs(AlertDialog, { children: [/* @__PURE__ */ jsx(AlertDialogTrigger, {
+		asChild: true,
+		children
+	}), /* @__PURE__ */ jsxs(AlertDialogContent, { children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: "Are you absolutely sure?" }), /* @__PURE__ */ jsx(AlertDialogDescription, { children: "This action cannot be undone. This will permanently delete your API key." })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, { children: "Cancel" }), /* @__PURE__ */ jsx(AlertDialogAction, {
+		onClick: onDelete,
+		children: "Continue"
+	})] })] })] });
+};
+
+//#endregion
+//#region src/pages/subscriptions/ApiKey.tsx
+const formatDate$1 = (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$1(dateString);
+};
+const ApiKey = ({ apiKey, createdAt, lastUsed, expiresOn, isActive = true, label, onDelete }) => {
+	const isExpiring = expiresOn && new Date(expiresOn) < new Date(Date.now() + 720 * 60 * 60 * 1e3);
+	const isExpired = expiresOn && new Date(expiresOn) < /* @__PURE__ */ new Date();
+	return /* @__PURE__ */ jsxs(Frame, {
+		className: cn(isExpired && "opacity-50 hover:opacity-100 transition-opacity"),
+		children: [/* @__PURE__ */ jsx(FramePanel, {
+			className: cn(isExpiring && "border-amber-300 dark:border-yellow-400/30"),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "space-y-4",
+				children: [/* @__PURE__ */ jsxs("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(Badge, {
+							variant: "muted",
+							children: "Active"
+						}) : /* @__PURE__ */ jsx(Badge, {
+							variant: "warning",
+							children: "Expiring"
+						})]
+					}), !isActive && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Button$1, {
+							variant: "ghost",
+							size: "icon-sm",
+							"aria-label": "More options",
+							children: /* @__PURE__ */ jsx(MoreVerticalIcon, { className: "size-4" })
+						})
+					}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+						align: "end",
+						children: /* @__PURE__ */ jsx(ConfirmDeleteKeyAlert, {
+							onDelete,
+							children: /* @__PURE__ */ jsxs(DropdownMenuItem, {
+								variant: "destructive",
+								onSelect: (e) => e.preventDefault(),
+								children: [/* @__PURE__ */ jsx(Trash2Icon, { className: "size-4" }), "Delete key"]
+							})
+						})
+					})] })]
+				}), /* @__PURE__ */ jsx(Secret, {
+					secret: apiKey,
+					status: isActive ? "active" : "expiring",
+					className: "max-w-fit"
+				})]
+			})
+		}), /* @__PURE__ */ jsx(FrameFooter, {
+			className: "text-xs text-muted-foreground p-2.5",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center flex-wrap gap-x-3 gap-y-1",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1.5",
+						children: [/* @__PURE__ */ jsx(ClockIcon, { className: "size-3" }), /* @__PURE__ */ jsxs("span", { children: ["Created ", formatDate$1(createdAt)] })]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground/40",
+						children: "•"
+					}),
+					/* @__PURE__ */ jsxs("span", { children: ["Last updated ", getTimeAgo(lastUsed)] }),
+					expiresOn && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground/40",
+						children: "•"
+					}), /* @__PURE__ */ jsxs("span", {
+						className: cn(isExpired && "text-red-600 font-medium dark:text-red-400", isExpiring && !isExpired && "text-amber-500 font-medium dark:text-amber-400"),
+						children: [
+							isExpired ? "Expired" : "Expires",
+							" on ",
+							formatDate$1(expiresOn)
+						]
+					})] })
+				]
+			})
+		})]
+	});
+};
+
+//#endregion
+//#region src/pages/subscriptions/ApiKeyInfo.tsx
+const ApiKeyInfo = () => /* @__PURE__ */ jsxs(DismissibleAlert, {
+	className: "space-y-2",
+	fit: "loose",
+	children: [
+		/* @__PURE__ */ jsx(InfoIcon, {}),
+		/* @__PURE__ */ jsx(AlertTitle, { children: "How API key management works" }),
+		/* @__PURE__ */ jsx(AlertDescription, { children: /* @__PURE__ */ jsxs("ul", {
+			className: "list-disc list-inside space-y-1",
+			children: [
+				/* @__PURE__ */ jsx("li", { children: "Each subscription includes one active API key automatically" }),
+				/* @__PURE__ */ jsx("li", { children: "Rolling your key creates a new current key and sets the old one to expire in 7 days" }),
+				/* @__PURE__ */ jsx("li", { children: "Expiring keys can be deleted early if you no longer need them" })
+			]
+		}) }),
+		/* @__PURE__ */ jsx(DismissibleAlertAction, {})
+	]
+});
+
+//#endregion
+//#region src/pages/subscriptions/ConfirmRollKeyAlert.tsx
+const ConfirmRollKeyAlert = (props) => /* @__PURE__ */ jsxs(AlertDialog, { children: [/* @__PURE__ */ jsx(AlertDialogTrigger, {
+	asChild: true,
+	children: props.children
+}), /* @__PURE__ */ jsxs(AlertDialogContent, { children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: "Are you absolutely sure?" }), /* @__PURE__ */ jsx(AlertDialogDescription, { children: "This will roll your API key and create a new one. You will need to update your API client to use the new key. The old key will be deleted after 7 days." })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, { children: "Cancel" }), /* @__PURE__ */ jsx(AlertDialogAction, {
+	onClick: props.onRollKey,
+	children: "Continue"
+})] })] })] });
+
+//#endregion
+//#region src/pages/subscriptions/ApiKeysList.tsx
+const PendingFirstPaymentAlert = ({ children }) => /* @__PURE__ */ jsxs("div", {
+	className: "relative rounded-lg overflow-hidden",
+	"data-testid": "pending-first-payment-alert",
+	children: [/* @__PURE__ */ jsx("div", { children }), /* @__PURE__ */ jsx("div", {
+		className: "absolute inset-0 bg-background/80 flex items-center justify-center",
+		children: /* @__PURE__ */ jsxs(Item, {
+			className: "max-w-md bg-muted",
+			children: [/* @__PURE__ */ jsx(ItemMedia, { children: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }) }), /* @__PURE__ */ jsx(ItemContent, { children: /* @__PURE__ */ jsx(ItemTitle, { children: "Your keys will be available once the payment has been successfully processed." }) })]
+		})
+	})]
+});
+const ApiKeysList = ({ isPendingFirstPayment, apiKeys, deploymentName, consumerId }) => {
+	const context = useZudoku();
+	const rollKeyMutation = useMutation({
+		mutationKey: [`/v3/zudoku-metering/${deploymentName}/consumers/${consumerId}/roll-key`],
+		meta: {
+			request: {
+				method: "POST",
+				body: "{}"
+			},
+			context
+		},
+		onSuccess: async () => {
+			await queryClient.invalidateQueries();
+		}
+	});
+	const deleteKeyMutation = useMutation({
+		mutationKey: [`/v3/zudoku-metering/${deploymentName}/consumers/${consumerId}/keys/{keyId}`],
+		meta: {
+			context,
+			request: { method: "DELETE" }
+		},
+		onSuccess: async () => {
+			await queryClient.invalidateQueries();
+		}
+	});
+	if (!apiKeys || apiKeys.length === 0) return null;
+	const sortedKeys = [...apiKeys].sort((a, b) => {
+		const aExpired = a.expiresOn && new Date(a.expiresOn) < /* @__PURE__ */ new Date();
+		if (aExpired !== (b.expiresOn && new Date(b.expiresOn) < /* @__PURE__ */ new Date())) return aExpired ? 1 : -1;
+		return new Date(b.createdOn).getTime() - new Date(a.createdOn).getTime();
+	});
+	const activeKey = sortedKeys.find((k) => !k.expiresOn);
+	const expiringKeys = sortedKeys.filter((k) => typeof k.expiresOn === "string");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx(Heading, {
+					level: 3,
+					children: "API Keys"
+				}), /* @__PURE__ */ jsx(ConfirmRollKeyAlert, {
+					onRollKey: () => rollKeyMutation.mutateAsync(),
+					children: /* @__PURE__ */ jsx(ActionButton, {
+						isPending: rollKeyMutation.isPending,
+						variant: "outline",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx(RefreshCwIcon, { className: `size-4 ${rollKeyMutation.isPending ? "animate-spin" : ""}` }), "Roll API Key"]
+						})
+					})
+				})]
+			}),
+			rollKeyMutation.isError && /* @__PURE__ */ jsxs(Alert, {
+				variant: "destructive",
+				children: [/* @__PURE__ */ jsx(AlertTitle, { children: "Could not roll API key" }), /* @__PURE__ */ jsx(AlertDescription, { children: rollKeyMutation.error.message })]
+			}),
+			/* @__PURE__ */ jsx(ApiKeyInfo, {}),
+			deleteKeyMutation.isSuccess && deleteKeyMutation.variables && /* @__PURE__ */ jsxs(DismissibleAlert, {
+				variant: "info",
+				onDismiss: () => deleteKeyMutation.reset(),
+				children: [
+					/* @__PURE__ */ jsx(CheckCheckIcon, { className: "size-4" }),
+					/* @__PURE__ */ jsx(AlertTitle, { children: "API key was deleted" }),
+					/* @__PURE__ */ jsx(AlertDescription, { children: (() => {
+						const deletedKey = apiKeys.find((k) => k.id === deleteKeyMutation.variables?.keyId);
+						return deletedKey ? `API key created ${formatDate$1(deletedKey.createdOn)} has been removed.` : "The API key has been deleted.";
+					})() }),
+					/* @__PURE__ */ jsx(DismissibleAlertAction, {})
+				]
+			}),
+			rollKeyMutation.isSuccess && /* @__PURE__ */ jsxs(DismissibleAlert, {
+				variant: "info",
+				onDismiss: () => rollKeyMutation.reset(),
+				children: [
+					/* @__PURE__ */ jsx(CheckCheckIcon, { className: "size-4" }),
+					/* @__PURE__ */ jsx(AlertTitle, { children: "API key was rolled" }),
+					/* @__PURE__ */ jsx(AlertDescription, { children: "A new API key has been created and the old one has been set to expire in 7 days." }),
+					/* @__PURE__ */ jsx(DismissibleAlertAction, {})
+				]
+			}),
+			deleteKeyMutation.isError && /* @__PURE__ */ jsxs(Alert, {
+				variant: "destructive",
+				children: [
+					/* @__PURE__ */ jsx(CircleSlashIcon, { className: "size-4" }),
+					/* @__PURE__ */ jsx(AlertTitle, { children: "Could not delete API key" }),
+					/* @__PURE__ */ jsx(AlertDescription, { children: deleteKeyMutation.error.message }),
+					/* @__PURE__ */ jsx(AlertAction, { children: /* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						onClick: () => {
+							const keyId = deleteKeyMutation.variables?.keyId;
+							if (!keyId) return;
+							deleteKeyMutation.mutateAsync({ keyId });
+						},
+						children: "Retry"
+					}) })
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-4",
+				children: [activeKey && (isPendingFirstPayment ? /* @__PURE__ */ jsx(PendingFirstPaymentAlert, { children: /* @__PURE__ */ jsx(ApiKey, {
+					deploymentName,
+					consumerId,
+					apiKeyId: activeKey.id,
+					apiKey: activeKey.key,
+					createdAt: activeKey.createdOn,
+					lastUsed: activeKey.updatedOn,
+					expiresOn: activeKey.expiresOn,
+					isActive: true,
+					label: "Current Key",
+					onDelete: () => deleteKeyMutation.mutateAsync({ keyId: activeKey.id })
+				}, activeKey.id) }) : /* @__PURE__ */ jsx(ApiKey, {
+					deploymentName,
+					consumerId,
+					apiKeyId: activeKey.id,
+					apiKey: activeKey.key,
+					createdAt: activeKey.createdOn,
+					lastUsed: activeKey.updatedOn,
+					expiresOn: activeKey.expiresOn,
+					isActive: true,
+					label: "Current Key",
+					onDelete: () => deleteKeyMutation.mutateAsync({ keyId: activeKey.id })
+				}, activeKey.id)), expiringKeys.map((apiKey) => /* @__PURE__ */ jsx(ApiKey, {
+					deploymentName,
+					consumerId,
+					apiKeyId: apiKey.id,
+					apiKey: apiKey.key,
+					createdAt: apiKey.createdOn,
+					lastUsed: apiKey.updatedOn,
+					expiresOn: apiKey.expiresOn,
+					isActive: false,
+					label: "Previous Key",
+					onDelete: () => deleteKeyMutation.mutateAsync({ keyId: apiKey.id })
+				}, apiKey.id))]
+			})
+		]
+	});
+};
+
+//#endregion
+//#region src/pages/subscriptions/CancelSubscriptionDialog.tsx
+const CancelSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionId, billingPeriodEnd }) => {
+	const [confirmationText, setConfirmationText] = useState("");
+	const isConfirmed = planName.startsWith(confirmationText);
+	const deploymentName = useDeploymentName();
+	const context = useZudoku();
+	const queryClient = useQueryClient();
+	const cancelSubscriptionMutation = useMutation({
+		mutationKey: [`/v3/zudoku-metering/${deploymentName}/subscriptions/${subscriptionId}/cancel`],
+		meta: {
+			context,
+			request: {
+				method: "POST",
+				body: JSON.stringify({ timing: "next_billing_cycle" })
+			}
+		},
+		onSuccess: async () => {
+			await queryClient.invalidateQueries();
+			onOpenChange(false);
+		}
+	});
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "sm:max-w-md",
+			children: [
+				/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Cancel Subscription" }), /* @__PURE__ */ jsx(DialogDescription, { children: "We're sorry to see you go." })] }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "space-y-4 mt-4",
+					children: [
+						/* @__PURE__ */ jsxs(Alert, {
+							variant: "warning",
+							children: [
+								/* @__PURE__ */ jsx(CalendarIcon, { className: "size-4" }),
+								/* @__PURE__ */ jsx(AlertTitle, { children: "Your plan will be canceled at the end of your billing cycle." }),
+								/* @__PURE__ */ jsxs(AlertDescription, { children: ["You'll retain access until ", formatDate$1(billingPeriodEnd)] })
+							]
+						}),
+						/* @__PURE__ */ jsxs(Alert, {
+							variant: "destructive",
+							children: [
+								/* @__PURE__ */ jsx(CircleAlert, { className: "size-4" }),
+								/* @__PURE__ */ jsx(AlertTitle, { children: "This action cannot be undone" }),
+								/* @__PURE__ */ jsx(AlertDescription, { children: "Once cancelled, you will not be able to recover this plan or its associated settings. You would need to subscribe again." })
+							]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "space-y-2",
+							children: [
+								/* @__PURE__ */ jsxs("label", {
+									className: "text-sm text-foreground",
+									htmlFor: "confirmationText",
+									children: [
+										"Type",
+										" ",
+										/* @__PURE__ */ jsx("span", {
+											className: "font-medium text-destructive",
+											children: planName
+										}),
+										" ",
+										"to confirm"
+									]
+								}),
+								/* @__PURE__ */ jsx(Input, {
+									id: "confirmationText",
+									value: confirmationText,
+									onChange: (e) => setConfirmationText(e.target.value),
+									placeholder: ""
+								}),
+								/* @__PURE__ */ jsx("p", {
+									className: cn("text-xs text-destructive transition-opacity opacity-0", confirmationText && !isConfirmed && "opacity-100"),
+									children: "Please type the plan name exactly as shown"
+								})
+							]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-2",
+					children: [/* @__PURE__ */ jsx(ActionButton, {
+						variant: "destructive",
+						disabled: !isConfirmed || confirmationText !== planName || cancelSubscriptionMutation.isPending,
+						isPending: cancelSubscriptionMutation.isPending || cancelSubscriptionMutation.isSuccess,
+						onClick: () => cancelSubscriptionMutation.mutate(),
+						children: "Cancel subscription"
+					}), /* @__PURE__ */ jsx(Button$1, {
+						variant: "ghost",
+						onClick: () => onOpenChange(false),
+						children: "Keep my subscription"
+					})]
+				})
+			]
+		})
+	});
+};
+
+//#endregion
+//#region src/pages/subscriptions/SwitchPlanModal.tsx
+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, {
+		currency: currentPlan?.currency,
+		units,
+		planBillingCadence: currentPlan?.billingCadence
+	}) : {
+		quotas: [],
+		features: []
+	};
+	const { quotas: targetQuotas, features: targetFeatures } = targetPhase ? categorizeRateCards(targetPhase.rateCards, {
+		currency: targetPlan.currency,
+		units,
+		planBillingCadence: targetPlan.billingCadence
+	}) : {
+		quotas: [],
+		features: []
+	};
+	const quotaChanges = [];
+	const allQuotaKeys = new Set([...currentQuotas.map((q) => q.key), ...targetQuotas.map((q) => q.key)]);
+	for (const key of allQuotaKeys) {
+		const current = currentQuotas.find((q) => q.key === key);
+		const target = targetQuotas.find((q) => q.key === key);
+		if (current && target) {
+			let change = "same";
+			if (target.limit > current.limit) change = "increase";
+			else if (target.limit < current.limit) change = "decrease";
+			quotaChanges.push({
+				key: key ?? "",
+				name: target.name,
+				currentValue: current.limit,
+				newValue: target.limit,
+				period: target.period,
+				change
+			});
+		} else if (target && !current) quotaChanges.push({
+			key: key ?? "",
+			name: target.name,
+			currentValue: null,
+			newValue: target.limit,
+			period: target.period,
+			change: "added"
+		});
+		else if (current && !target) quotaChanges.push({
+			key: key ?? "",
+			name: current.name,
+			currentValue: current.limit,
+			newValue: null,
+			period: current.period,
+			change: "removed"
+		});
+	}
+	const featureChanges = [];
+	const allFeatureKeys = new Set([...currentFeatures.map((f) => f.key), ...targetFeatures.map((f) => f.key)]);
+	for (const key of allFeatureKeys) {
+		const current = currentFeatures.find((f) => f.key === key);
+		const target = targetFeatures.find((f) => f.key === key);
+		if (current && target) {
+			let change = "same";
+			if (current.value && target.value && current.value !== target.value) change = isUpgrade ? "upgraded" : "downgraded";
+			featureChanges.push({
+				key: key ?? "",
+				name: target.name,
+				currentValue: current.value ?? true,
+				newValue: target.value ?? true,
+				change
+			});
+		} else if (target && !current) featureChanges.push({
+			key: key ?? "",
+			name: target.name,
+			currentValue: null,
+			newValue: target.value ?? true,
+			change: "added"
+		});
+		else if (current && !target) featureChanges.push({
+			key: key ?? "",
+			name: current.name,
+			currentValue: current.value ?? true,
+			newValue: null,
+			change: "removed"
+		});
+	}
+	return {
+		plan: targetPlan,
+		isUpgrade,
+		quotaChanges,
+		featureChanges
+	};
+};
+const ChangeIndicator = ({ change }) => {
+	if (change === "increase" || change === "added" || change === "upgraded") return /* @__PURE__ */ jsx(ArrowUpIcon, { className: "w-4 h-4 text-primary shrink-0" });
+	if (change === "decrease" || change === "removed" || change === "downgraded") return /* @__PURE__ */ jsx(ArrowDownIcon, { className: "w-4 h-4 text-amber-600 shrink-0" });
+	return /* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-green-600 shrink-0" });
+};
+const modeLabelMap = {
+	upgrade: "Upgrade",
+	downgrade: "Downgrade",
+	private: "Switch"
+};
+const PlanComparisonItem = ({ comparison, subscriptionId, mode, onRequestChange }) => {
+	const price = getPriceFromPlan(comparison.plan);
+	const isCustom = comparison.plan.key === "enterprise";
+	const displayPrice = price.monthly;
+	const hasChanges = comparison.quotaChanges.some((q) => q.change !== "same") || comparison.featureChanges.some((f) => f.change !== "same");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "border rounded-lg p-4",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between mb-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-baseline gap-2",
+				children: [/* @__PURE__ */ jsx("h4", {
+					className: "font-semibold text-foreground",
+					children: comparison.plan.name
+				}), isCustom ? /* @__PURE__ */ jsx("span", {
+					className: "text-primary font-medium",
+					children: "Custom"
+				}) : displayPrice === 0 ? /* @__PURE__ */ jsx("span", {
+					className: "text-primary font-medium",
+					children: "Free"
+				}) : /* @__PURE__ */ jsxs("span", {
+					className: "text-primary font-medium text-lg",
+					children: [
+						formatPrice(displayPrice, comparison.plan.currency),
+						"/",
+						formatDuration(comparison.plan.billingCadence)
+					]
+				})]
+			}), isCustom ? /* @__PURE__ */ jsx(Button$1, {
+				variant: "default",
+				size: "sm",
+				children: "Contact Sales"
+			}) : /* @__PURE__ */ jsx(Button$1, {
+				variant: mode === "upgrade" ? "default" : "outline",
+				onClick: () => onRequestChange({
+					subscriptionId,
+					plan: comparison.plan,
+					mode
+				}),
+				size: "sm",
+				children: modeLabelMap[mode]
+			})]
+		}), hasChanges && /* @__PURE__ */ jsxs("div", {
+			className: "space-y-1.5",
+			children: [comparison.quotaChanges.filter((q) => q.change !== "same").map((quota) => /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 text-sm",
+				children: [
+					/* @__PURE__ */ jsx(ChangeIndicator, { change: quota.change }),
+					/* @__PURE__ */ jsxs("span", {
+						className: "font-medium",
+						children: [quota.name, ":"]
+					}),
+					quota.change === "added" ? /* @__PURE__ */ jsx("span", {
+						className: "text-green-600",
+						children: "Now included"
+					}) : quota.change === "removed" ? /* @__PURE__ */ jsx("span", {
+						className: "text-destructive",
+						children: "No longer included"
+					}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsxs("span", {
+							className: "text-muted-foreground",
+							children: [
+								quota.currentValue?.toLocaleString(),
+								"/",
+								quota.period
+							]
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground",
+							children: "→"
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: cn("font-medium", quota.change === "increase" ? "text-primary" : "text-amber-600"),
+							children: [
+								quota.newValue?.toLocaleString(),
+								"/",
+								quota.period
+							]
+						})
+					] })
+				]
+			}, quota.key)), comparison.featureChanges.filter((f) => f.change !== "same").map((feature) => /* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-2 text-sm",
+				children: feature.change === "added" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-green-600 shrink-0" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground font-medium",
+						children: feature.name
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-green-600",
+						children: "—"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-green-600",
+						children: "Now included"
+					})
+				] }) : feature.change === "removed" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(XIcon, { className: "w-4 h-4 text-destructive shrink-0" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "font-medium",
+						children: feature.name
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-destructive",
+						children: "—"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-destructive",
+						children: "No longer included"
+					})
+				] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(ChangeIndicator, { change: feature.change }),
+					/* @__PURE__ */ jsxs("span", {
+						className: "",
+						children: [feature.name, ":"]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: typeof feature.currentValue === "string" ? feature.currentValue : "Included"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: "→"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: cn(feature.change === "upgraded" ? "text-green-600" : "text-destructive"),
+						children: typeof feature.newValue === "string" ? feature.newValue : "Included"
+					})
+				] })
+			}, feature.key))]
+		})]
+	});
+};
+const ConfirmSwitchAlert = ({ switchTo, onRequestClose }) => {
+	const deploymentName = useDeploymentName();
+	const context = useZudoku();
+	const { generateUrl } = useUrlUtils();
+	const mutation = useMutation({
+		mutationKey: [`/v3/zudoku-metering/${deploymentName}/stripe/checkout`],
+		meta: {
+			context,
+			request: {
+				method: "POST",
+				body: JSON.stringify({
+					planId: switchTo.plan.id,
+					successURL: generateUrl(`/subscription-change-confirm`, { searchParams: {
+						planId: switchTo.plan.id,
+						subscriptionId: switchTo.subscriptionId
+					} }),
+					cancelURL: generateUrl("/subscriptions", { searchParams: { subscriptionId: switchTo.subscriptionId } })
+				})
+			}
+		},
+		retry: false,
+		onSuccess: (data) => {
+			window.location.href = data.url;
+		}
+	});
+	return /* @__PURE__ */ jsx(AlertDialog, {
+		open: true,
+		onOpenChange: onRequestClose,
+		children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+			/* @__PURE__ */ jsxs(AlertDialogTitle, { children: [
+				"Confirm",
+				" ",
+				switchTo.mode === "private" ? "plan change" : switchTo.mode === "upgrade" ? "upgrade" : "downgrade"
+			] }),
+			mutation.isError && /* @__PURE__ */ jsx(Alert, {
+				variant: "destructive",
+				children: /* @__PURE__ */ jsx(AlertDescription, {
+					className: "first-letter:uppercase",
+					children: mutation.error.message
+				})
+			}),
+			/* @__PURE__ */ jsx(AlertDialogDescription, { children: switchTo.mode === "private" ? `Are you sure you want to switch to ${switchTo.plan.name}? This will take effect immediately.` : switchTo.mode === "upgrade" ? `Are you sure you want to upgrade to ${switchTo.plan.name}? This will take effect immediately.` : `Are you sure you want to downgrade to ${switchTo.plan.name}? This will take effect at the start of your next billing cycle.` })
+		] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, {
+			disabled: mutation.isPending,
+			children: "Cancel"
+		}), /* @__PURE__ */ jsx(ActionButton, {
+			isPending: mutation.isPending,
+			onClick: () => mutation.mutate(),
+			children: modeLabelMap[switchTo.mode]
+		})] })] })
+	});
+};
+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 {
+			upgrades: [],
+			downgrades: [],
+			privatePlans: []
+		};
+		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), 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,
+		pricing?.units
+	]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [switchTo !== null && /* @__PURE__ */ jsx(ConfirmSwitchAlert, {
+		switchTo,
+		onRequestClose: () => setSwitchTo(null)
+	}), /* @__PURE__ */ jsxs(Dialog, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(DialogTrigger, {
+			asChild: true,
+			children: children ?? /* @__PURE__ */ jsxs(Button$1, {
+				variant: "outline",
+				size: "sm",
+				children: [/* @__PURE__ */ jsx(ArrowLeftRightIcon, {}), " Switch Plan"]
+			})
+		}), /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs("div", {
+			className: "sm:max-w-2xl max-h-[70vh] overflow-y-auto ",
+			children: [/* @__PURE__ */ jsx(DialogHeader, {
+				className: "text-center",
+				children: /* @__PURE__ */ jsx(DialogTitle, {
+					className: "text-xl font-semibold",
+					children: "Change Your Plan"
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "mt-4 space-y-6",
+				children: [
+					currentPlan && /* @__PURE__ */ jsx(Item, {
+						variant: "outline",
+						children: /* @__PURE__ */ jsxs(ItemContent, { children: [/* @__PURE__ */ jsx(ItemTitle, { children: "Current Plan" }), /* @__PURE__ */ jsx(ItemDescription, {
+							className: "text-lg font-bold",
+							children: currentPlan.name
+						})] })
+					}),
+					upgrades.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between mb-3",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx(ArrowUpIcon, { className: "size-5 text-muted-foreground" }), /* @__PURE__ */ jsx("span", {
+								className: "font-medium text-primary",
+								children: "Upgrade Options"
+							})]
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-sm text-muted-foreground",
+							children: "Takes effect immediately"
+						})]
+					}), /* @__PURE__ */ jsx("div", {
+						className: "space-y-3",
+						children: upgrades.map((comparison) => /* @__PURE__ */ jsx(PlanComparisonItem, {
+							comparison,
+							subscriptionId: subscription.id,
+							mode: "upgrade",
+							onRequestChange: setSwitchTo
+						}, comparison.plan.id))
+					})] }),
+					downgrades.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between mb-3",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx(ArrowDownIcon, { className: "size-5 text-primary" }), /* @__PURE__ */ jsx("span", {
+								className: "font-medium text-foreground",
+								children: "Downgrade Options"
+							})]
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-sm text-muted-foreground",
+							children: "Takes effect next billing cycle"
+						})]
+					}), /* @__PURE__ */ jsx("div", {
+						className: "space-y-3",
+						children: downgrades.map((comparison) => /* @__PURE__ */ jsx(PlanComparisonItem, {
+							comparison,
+							subscriptionId: subscription.id,
+							mode: "downgrade",
+							onRequestChange: setSwitchTo
+						}, comparison.plan.id))
+					})] }),
+					privatePlans.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between mb-3",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx(ArrowLeftRightIcon, { className: "size-5 text-muted-foreground" }), /* @__PURE__ */ jsx("span", {
+								className: "font-medium text-foreground",
+								children: "Private Plan Option"
+							})]
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-sm text-muted-foreground",
+							children: "Takes effect immediately"
+						})]
+					}), /* @__PURE__ */ jsx("div", {
+						className: "space-y-3",
+						children: privatePlans.map((comparison) => /* @__PURE__ */ jsx(PlanComparisonItem, {
+							comparison,
+							subscriptionId: subscription.id,
+							mode: "private",
+							onRequestChange: setSwitchTo
+						}, comparison.plan.id))
+					})] })
+				]
+			})]
+		}) })]
+	})] });
+};
+
+//#endregion
+//#region src/pages/subscriptions/ManageSubscription.tsx
+const ManageSubscription = ({ subscription, planName }) => {
+	const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
+	return /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CancelSubscriptionDialog, {
+		open: cancelDialogOpen,
+		onOpenChange: setCancelDialogOpen,
+		planName,
+		subscriptionId: subscription.id,
+		billingPeriodEnd: subscription.alignment.currentAlignedBillingPeriod.to
+	}), /* @__PURE__ */ jsx(CardContent, {
+		className: "p-6",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex gap-4",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-center w-12 h-12 rounded-full bg-primary/10 shrink-0",
+				children: /* @__PURE__ */ jsx(Settings, { className: "w-6 h-6 text-primary" })
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex-1",
+				id: "manage",
+				children: [
+					/* @__PURE__ */ jsx("h2", {
+						className: "text-lg font-semibold text-foreground mb-1",
+						children: "Manage Subscription"
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground mb-4",
+						children: "Switch to a different plan or cancel your current subscription."
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap gap-3",
+						children: [
+							subscription.status === "canceled" && /* @__PURE__ */ jsx(Button$1, {
+								variant: "outline",
+								size: "sm",
+								asChild: true,
+								children: /* @__PURE__ */ jsxs(Link, {
+									to: "/pricing",
+									children: [/* @__PURE__ */ jsx(RefreshCcw, { className: "w-4 h-4 mr-2" }), "New subscription"]
+								})
+							}),
+							subscription.status === "active" && /* @__PURE__ */ jsx(SwitchPlanModal, { subscription }),
+							/* @__PURE__ */ jsxs(Tooltip, {
+								delayDuration: 0,
+								children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+									asChild: true,
+									children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button$1, {
+										variant: "outline",
+										size: "sm",
+										onClick: () => setCancelDialogOpen(true),
+										title: "You can only cancel your subscription if it is not active.",
+										disabled: subscription.status !== "active",
+										children: "Cancel subscription"
+									}) })
+								}), subscription.status === "canceled" && /* @__PURE__ */ jsx(TooltipContent, { children: "Your subscription is already cancelled." })]
+							}),
+							/* @__PURE__ */ jsx(Button$1, {
+								asChild: true,
+								size: "sm",
+								variant: "secondary",
+								children: /* @__PURE__ */ jsx(Link, {
+									to: "/manage-payment",
+									children: /* @__PURE__ */ jsxs("div", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ jsx(CreditCardIcon, {}), "Manage payment details"]
+									})
+								})
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(Separator, { className: "my-4" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-sm text-muted-foreground",
+						children: "Your payment is securely managed by Stripe."
+					})
+				]
+			})]
+		})
+	})] });
+};
+
+//#endregion
+//#region src/pages/subscriptions/Usage.tsx
+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;
+	const limit = meter.balance + meter.usage - meter.overage;
+	const isAtLimit = !isSoftLimit && meter.usage >= limit;
+	const dangerZone = hasOverage || isAtLimit;
+	return /* @__PURE__ */ jsxs(Card, {
+		className: cn(dangerZone && "border-destructive bg-destructive/5"),
+		children: [/* @__PURE__ */ jsxs(CardHeader, { children: [
+			hasOverage && isSoftLimit && /* @__PURE__ */ jsxs(Alert, {
+				variant: "destructive",
+				className: "mb-4",
+				children: [
+					/* @__PURE__ */ jsx(AlertTriangleIcon, { className: "size-4 text-red-600 shrink-0" }),
+					/* @__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)` : "",
+						". 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"]
+						})
+					}) })
+				]
+			}),
+			isAtLimit && !isSoftLimit && /* @__PURE__ */ jsxs(Alert, {
+				variant: "destructive",
+				className: "mb-4",
+				children: [
+					/* @__PURE__ */ jsx(AlertTriangleIcon, { className: "size-4 text-red-600 shrink-0" }),
+					/* @__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,
+						children: /* @__PURE__ */ jsxs(Button, {
+							variant: "destructive",
+							size: "xs",
+							children: [/* @__PURE__ */ jsx(ArrowUpIcon, {}), "Upgrade"]
+						})
+					}) })
+				]
+			}),
+			/* @__PURE__ */ jsxs(CardTitle, { children: [
+				item?.name ?? "Limit",
+				" ",
+				item?.price?.amount
+			] })
+		] }), /* @__PURE__ */ jsxs(CardContent, {
+			className: "space-y-2",
+			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"),
+							children: [
+								meter.usage.toLocaleString(),
+								" used",
+								hasOverage && isSoftLimit && /* @__PURE__ */ jsxs("span", {
+									className: "ml-1 text-xs",
+									children: [
+										"(+",
+										meter.overage.toLocaleString(),
+										" overage)"
+									]
+								})
+							]
+						})
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "text-foreground font-medium",
+						children: [limit.toLocaleString(), " limit"]
+					})]
+				}),
+				/* @__PURE__ */ jsx(Progress, {
+					value: Math.min(100, limit > 0 ? meter.usage / limit * 100 : 100),
+					className: cn("mb-3 h-2", dangerZone && "bg-destructive")
+				}),
+				/* @__PURE__ */ jsxs("p", {
+					className: "text-xs text-muted-foreground",
+					children: [meter.balance.toLocaleString(), " remaining this billing period"]
+				})
+			]
+		})]
+	});
+};
+const Usage = ({ usage, isFetching, currentItems, subscription, isPendingFirstPayment }) => {
+	const hasUsage = Object.values(usage.entitlements).some((value) => isMeteredEntitlement(value));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ jsx(Heading, {
+				level: 3,
+				children: "Usage"
+			}),
+			(isPendingFirstPayment || usage.paymentStatus.status === "pending") && /* @__PURE__ */ jsxs(Alert, {
+				fit: "loose",
+				children: [
+					/* @__PURE__ */ jsx(Loader2Icon, { className: "size-5 animate-spin mr-1 ml-1 self-center" }),
+					/* @__PURE__ */ jsx(AlertTitle, { children: "Your payment is being processed" }),
+					/* @__PURE__ */ jsx(AlertDescription, { children: "Your API keys may take a minute to load. Please wait while we set up your subscription." })
+				]
+			}),
+			(usage.paymentStatus.status === "failed" || usage.paymentStatus.status === "uncollectible") && /* @__PURE__ */ jsxs(Alert, {
+				variant: "destructive",
+				fit: "loose",
+				children: [
+					/* @__PURE__ */ jsx(AlertTriangleIcon, { className: "size-4 shrink-0" }),
+					/* @__PURE__ */ jsx(AlertTitle, { children: usage.paymentStatus.status === "failed" ? "Payment failed" : "Payment unsuccessful" }),
+					/* @__PURE__ */ jsx(AlertDescription, { children: "Your last payment was unsuccessful. Please update your billing information to continue using your subscription." }),
+					/* @__PURE__ */ jsx(AlertAction, { children: /* @__PURE__ */ jsx(Button, {
+						variant: "destructive",
+						size: "xs",
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Link, {
+							to: "/manage-payment",
+							target: "_blank",
+							children: "Manage billing"
+						})
+					}) })
+				]
+			}),
+			hasUsage ? Object.entries(usage.entitlements).flatMap(([key, value]) => isMeteredEntitlement(value) ? /* @__PURE__ */ jsx(UsageItem, {
+				meter: { ...value },
+				subscription,
+				item: currentItems?.find((item) => item.featureKey === key)
+			}, key) : []) : !isFetching && !subscription?.annotations?.["subscription.previous.id"] ? /* @__PURE__ */ jsxs(Alert, {
+				variant: "warning",
+				children: [
+					/* @__PURE__ */ jsx(Grid2x2XIcon, {}),
+					/* @__PURE__ */ jsx(AlertTitle, { children: "No usage data available" }),
+					/* @__PURE__ */ jsx(AlertDescription, { children: "This subscription does not have any usage data." })
+				]
+			}) : null
+		]
+	});
+};
+
+//#endregion
+//#region src/pages/subscriptions/ActiveSubscription.tsx
+const ActiveSubscription = ({ subscription, deploymentName }) => {
+	const zudoku = useZudoku();
+	const planSwitched = useLocation().state?.planSwitched;
+	const usageQuery = useSuspenseQuery({
+		queryKey: [`/v3/zudoku-metering/${deploymentName}/subscriptions/${subscription.id}/usage`],
+		refetchInterval: (query) => query.state.data?.paymentStatus.status === "pending" ? 1500 : 30 * 1e3,
+		refetchOnWindowFocus: true,
+		meta: { context: zudoku }
+	});
+	const isPendingFirstPayment = usageQuery.data.paymentStatus.isFirstPayment === true && usageQuery.data.paymentStatus.status !== "paid" && usageQuery.data.paymentStatus.status !== "not_required";
+	const activePhase = subscription?.phases.find((p) => new Date(p.activeFrom) <= /* @__PURE__ */ new Date() && (!p.activeTo || new Date(p.activeTo) >= /* @__PURE__ */ new Date()));
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		planSwitched && /* @__PURE__ */ jsxs(DismissibleAlert, {
+			variant: "info",
+			children: [
+				/* @__PURE__ */ jsx(CheckCheckIcon, { className: "size-4" }),
+				/* @__PURE__ */ jsx(AlertTitle, { children: "Plan changed" }),
+				/* @__PURE__ */ jsx(AlertDescription, { children: planSwitched.newPlanName ? `You have successfully switched to ${planSwitched.newPlanName}.` : "Your plan has been successfully changed." }),
+				/* @__PURE__ */ jsx(DismissibleAlertAction, {})
+			]
+		}),
+		/* @__PURE__ */ jsx(Usage, {
+			currentItems: activePhase?.items,
+			usage: usageQuery.data,
+			isFetching: usageQuery.isFetching,
+			subscription,
+			isPendingFirstPayment
+		}),
+		subscription?.consumer?.apiKeys && /* @__PURE__ */ jsx(ApiKeysList, {
+			isPendingFirstPayment,
+			deploymentName,
+			consumerId: subscription.consumer.id,
+			apiKeys: subscription.consumer.apiKeys
+		}),
+		activePhase && /* @__PURE__ */ jsx(ManageSubscription, {
+			subscription,
+			planName: subscription.name
+		})
+	] });
+};
+
+//#endregion
+//#region src/pages/subscriptions/SubscriptionsList.tsx
+const formatDate = (dateString) => {
+	return new Date(dateString).toLocaleDateString("en-US", {
+		month: "short",
+		day: "numeric",
+		year: "numeric"
+	});
+};
+const SubscriptionsList = ({ subscriptions, activeSubscriptionId }) => {
+	const groupedSubscriptions = useMemo(() => {
+		return Object.groupBy(subscriptions.sort((a, b) => {
+			if (a.activeTo && !b.activeTo) return 1;
+			if (!a.activeTo && b.activeTo) return -1;
+			return new Date(b.activeTo ?? b.activeFrom).getTime() - new Date(a.activeTo ?? a.activeFrom).getTime();
+		}), (s) => s.activeTo && new Date(s.activeTo) < /* @__PURE__ */ new Date() ? "expired" : "running");
+	}, [subscriptions]);
+	const [showAllSubscriptions, setShowAllSubscriptions] = useState(groupedSubscriptions.expired?.some((s) => s.id === activeSubscriptionId));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3",
+		children: [
+			groupedSubscriptions.running?.map((subscription) => /* @__PURE__ */ jsx(SubscriptionItem, {
+				subscription,
+				isSelected: activeSubscriptionId === subscription.id,
+				isExpired: Boolean(subscription.activeTo && new Date(subscription.activeTo) < /* @__PURE__ */ new Date())
+			}, subscription.id)),
+			showAllSubscriptions && groupedSubscriptions.expired?.map((subscription) => /* @__PURE__ */ jsx(SubscriptionItem, {
+				subscription,
+				isSelected: activeSubscriptionId === subscription.id,
+				isExpired: Boolean(subscription.activeTo && new Date(subscription.activeTo) < /* @__PURE__ */ new Date())
+			}, subscription.id)),
+			Boolean(groupedSubscriptions.expired?.length) && /* @__PURE__ */ jsx("div", {
+				className: "self-center justify-self-center md:justify-self-start",
+				children: /* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					size: "sm",
+					onClick: () => setShowAllSubscriptions(!showAllSubscriptions),
+					children: [showAllSubscriptions ? "Hide" : "Show", " expired subscriptions"]
+				})
+			})
+		]
+	});
+};
+const SubscriptionItem = ({ subscription, isSelected, isExpired }) => {
+	const willExpire = subscription.activeTo && new Date(subscription.activeTo) > /* @__PURE__ */ new Date();
+	return /* @__PURE__ */ jsx(Link$1, {
+		to: `/subscriptions?subscriptionId=${encodeURIComponent(subscription.id)}`,
+		children: /* @__PURE__ */ jsx(Item, {
+			size: "sm",
+			variant: "outline",
+			className: cn(isSelected ? "border-primary bg-primary/5" : isExpired ? "opacity-50 hover:opacity-100 transition-opacity" : "border-muted bg-muted/5"),
+			children: /* @__PURE__ */ jsxs(ItemContent, { children: [/* @__PURE__ */ jsxs(ItemTitle, { children: [/* @__PURE__ */ jsx("span", { children: subscription.name }), subscription.activeTo ? isExpired ? /* @__PURE__ */ jsx(Badge, {
+				variant: "outline",
+				className: "capitalize",
+				children: "Expired"
+			}) : /* @__PURE__ */ jsx(Badge, {
+				variant: "muted",
+				className: "capitalize",
+				children: "Expiring"
+			}) : /* @__PURE__ */ jsx(Badge, {
+				className: "capitalize",
+				children: formatDurationInterval(subscription.billingCadence)
+			})] }), /* @__PURE__ */ jsxs(ItemDescription, {
+				className: cn(willExpire && "text-destructive"),
+				children: [
+					subscription.activeTo ? willExpire ? "Expires on" : "Expired on" : new Date(subscription.activeFrom) > /* @__PURE__ */ new Date() ? "Starts on" : "Started on",
+					" ",
+					formatDate(subscription.activeTo ?? subscription.activeFrom)
+				]
+			})] })
+		}, subscription.id)
+	});
+};
+
+//#endregion
+//#region src/pages/SubscriptionsPage.tsx
+const SubscriptionsPage = () => {
+	const deploymentName = useDeploymentName();
+	const { data } = useSubscriptions(deploymentName);
+	const [searchParams] = useSearchParams();
+	const subscriptionId = searchParams.get("subscriptionId");
+	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__ */ jsxs("div", {
+		className: "w-full pt-(--padding-content-top) pb-(--padding-content-bottom)",
+		children: [/* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx("title", { children: "My Subscriptions" }) }), /* @__PURE__ */ jsxs("div", {
+			className: "max-w-4xl space-y-8",
+			children: [
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Heading, {
+					level: 2,
+					children: "My Subscriptions"
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground",
+					children: "Manage your subscriptions, usage, and API keys"
+				})] }),
+				/* @__PURE__ */ jsx(SubscriptionsList, {
+					subscriptions,
+					activeSubscriptionId: activeSubscription?.id
+				}),
+				activeSubscription && /* @__PURE__ */ jsx(ActiveSubscription, {
+					subscription: activeSubscription,
+					deploymentName
+				}, activeSubscription.id),
+				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."
+					})
+				}) })
+			]
+		})]
+	});
+};
+
+//#endregion
+//#region src/ZuploMonetizationPlugin.tsx
+const PRICING_PATH = "/pricing";
+const zuploMonetizationPlugin = createPlugin((options = {}) => ({
+	transformConfig: ({ config, merge }) => merge({
+		apiKeys: { enabled: false },
+		header: { navigation: [...config.header?.navigation ?? [], {
+			label: "Pricing",
+			to: PRICING_PATH
+		}] }
+	}),
+	getIdentities: async (context) => {
+		const deploymentName = context.env.ZUPLO_PUBLIC_DEPLOYMENT_NAME;
+		if (!deploymentName) throw new Error("ZUPLO_PUBLIC_DEPLOYMENT_NAME is not set");
+		return (await queryClient.fetchQuery({
+			queryKey: [`/v3/zudoku-metering/${deploymentName}/subscriptions`],
+			meta: { context }
+		})).items.flatMap((sub) => sub.status !== "active" ? [] : sub.consumer.apiKeys.flatMap((apiKey) => apiKey.expiresOn && new Date(apiKey.expiresOn) < /* @__PURE__ */ new Date() ? [] : {
+			label: `${sub.name} (****${apiKey.key.slice(-5)})`,
+			id: apiKey.id,
+			authorizeRequest: async (request) => {
+				request.headers.set("Authorization", `Bearer ${apiKey.key}`);
+				return request;
+			},
+			authorizationFields: { headers: ["Authorization"] }
+		}));
+	},
+	getProfileMenuItems: () => [{
+		label: "My Subscriptions",
+		path: "/subscriptions",
+		icon: StarsIcon
+	}, {
+		label: "Manage payment details",
+		path: "/manage-payment",
+		target: "_blank",
+		icon: CreditCardIcon
+	}],
+	getRoutes: () => {
+		return [{
+			element: /* @__PURE__ */ jsx(ZuploMonetizationWrapper, { options }),
+			handle: { layout: "none" },
+			children: [
+				{
+					path: "/checkout",
+					element: /* @__PURE__ */ jsx(CheckoutPage, {})
+				},
+				{
+					path: "/checkout-confirm",
+					element: /* @__PURE__ */ jsx(CheckoutConfirmPage, {})
+				},
+				{
+					path: "/subscription-change-confirm",
+					element: /* @__PURE__ */ jsx(SubscriptionChangeConfirmPage, {})
+				},
+				{
+					path: "/manage-payment",
+					element: /* @__PURE__ */ jsx(ManagePaymentPage, {})
+				},
+				{
+					path: PRICING_PATH,
+					handle: { layout: "default" },
+					element: /* @__PURE__ */ jsx(PricingPage, {})
+				},
+				{
+					handle: { layout: "default" },
+					path: "/subscriptions",
+					element: /* @__PURE__ */ jsx(SubscriptionsPage, {})
+				}
+			]
+		}];
+	},
+	getProtectedRoutes: () => {
+		return [
+			"/checkout",
+			"/checkout-confirm",
+			"/subscription-change-confirm",
+			"/subscriptions",
+			"/manage-payment"
+		];
+	}
+}));
+
+//#endregion
+export { zuploMonetizationPlugin };