@zuplo/zudoku-plugin-monetization 0.0.4 → 0.0.5

package/dist/index.d.mts

@@ -1,10 +1,47 @@
-import { ZudokuConfig, ZudokuPlugin } from "zudoku";
+import * as zudoku0 from "zudoku";
+import { ZudokuConfig } from "zudoku";
+import * as zudoku_icons0 from "zudoku/icons";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react0 from "react";
+import * as zudoku_plugins0 from "zudoku/plugins";
 
 //#region src/ZuploMonetizationPlugin.d.ts
 type ZudokuMonetizationPluginOptions = {
   environmentName: string;
 };
 declare const enableMonetization: (config: ZudokuConfig, options: ZudokuMonetizationPluginOptions) => ZudokuConfig;
-declare const zuploMonetizationPlugin: (options: ZudokuMonetizationPluginOptions) => ZudokuPlugin;
+declare const zuploMonetizationPlugin: (options: ZudokuMonetizationPluginOptions) => {
+  getIdentities: (context: zudoku0.ZudokuContext) => Promise<{
+    label: string;
+    id: string;
+    authorizeRequest: (request: Request) => Promise<Request>;
+    authorizationFields: {
+      headers: string[];
+    };
+  }[]>;
+  getProfileMenuItems: () => {
+    label: string;
+    path: string;
+    icon: react0.ForwardRefExoticComponent<Omit<zudoku_icons0.LucideProps, "ref"> & react0.RefAttributes<SVGSVGElement>>;
+  }[];
+  getRoutes: () => ({
+    Component: () => react_jsx_runtime0.JSX.Element;
+    handle: {
+      layout: string;
+    };
+    children: {
+      path: string;
+      element: react_jsx_runtime0.JSX.Element;
+    }[];
+  } | {
+    Component: () => react_jsx_runtime0.JSX.Element;
+    children: {
+      path: string;
+      element: react_jsx_runtime0.JSX.Element;
+    }[];
+    handle?: undefined;
+  })[];
+  getProtectedRoutes: () => string[];
+} & zudoku_plugins0.TransformConfigPlugin;
 //#endregion
 export { enableMonetization, zuploMonetizationPlugin };

package/dist/index.mjs

@@ -1,18 +1,21 @@
-import { ArrowLeftIcon, CheckIcon, ClockIcon, InfoIcon, LockIcon, RefreshCwIcon, ShieldIcon, StarsIcon, Trash2Icon } from "zudoku/icons";
+import { cn, createPlugin, joinUrl } from "zudoku";
+import { AlertTriangleIcon, ArrowLeftIcon, ArrowUpIcon, CheckIcon, ClockIcon, InfoIcon, LockIcon, RefreshCwIcon, ShieldIcon, StarsIcon, Trash2Icon } from "zudoku/icons";
 import { Link, Outlet, useNavigate, useParams, useSearchParams } from "zudoku/router";
-import { Button, Heading } from "zudoku/components";
+import { Button, ClientOnly, Heading } from "zudoku/components";
 import { useAuth, useZudoku } from "zudoku/hooks";
 import { QueryClient, QueryClientProvider, useMutation, useQuery, useSuspenseQuery } from "zudoku/react-query";
 import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert";
-import { Card, CardContent, CardHeader, CardTitle } from "zudoku/ui/Card";
+import { Card, CardContent, CardDescription, 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 { ActionButton } from "zudoku/ui/ActionButton";
 import { Button as Button$1 } from "zudoku/ui/Button";
 import { Secret } from "zudoku/ui/Secret";
-import { Item, ItemContent, ItemTitle } from "zudoku/ui/Item";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "zudoku/ui/AlertDialog";
+import { Badge } from "zudoku/ui/Badge";
+import { Item, ItemContent, ItemDescription, ItemTitle } from "zudoku/ui/Item";
 import { Progress } from "zudoku/ui/Progress";
 
 //#region src/components/FeatureItem.tsx
@@ -86,6 +89,22 @@ const formatDuration = (iso) => {
 		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;
+	}
+};
 
 //#endregion
 //#region src/utils/categorizeRateCards.ts
@@ -201,7 +220,7 @@ const queryClient = new QueryClient({ defaultOptions: {
 const ZuploMonetizationWrapper = () => {
 	return /* @__PURE__ */ jsx(QueryClientProvider, {
 		client: queryClient,
-		children: /* @__PURE__ */ jsx(Outlet, {})
+		children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Outlet, {}) })
 	});
 };
 var ZuploMonetizationWrapper_default = ZuploMonetizationWrapper;
@@ -336,9 +355,13 @@ const CheckoutConfirmPage = ({ environmentName }) => {
 								disabled: createSubscriptionMutation.isPending,
 								children: createSubscriptionMutation.isPending ? "Processing Payment..." : "Confirm & Subscribe"
 							}), /* @__PURE__ */ jsx(Button, {
-								variant: "outline",
+								variant: "ghost",
 								className: "w-full",
-								asChild: true
+								asChild: true,
+								children: /* @__PURE__ */ jsx(Link, {
+									to: "/pricing",
+									children: "Cancel"
+								})
 							})]
 						}),
 						/* @__PURE__ */ jsx("div", {
@@ -579,10 +602,23 @@ const useSubscriptions = (environmentName) => {
 	});
 };
 
+//#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"
+	})] })] })] });
+};
+var ConfirmDeleteKeyAlert_default = ConfirmDeleteKeyAlert;
+
 //#endregion
 //#region src/pages/subscriptions/ApiKey.tsx
 const ApiKey = ({ apiKey, createdAt, lastUsed, expiresOn, isActive = true, label, onDelete }) => {
-	const formatDate = (dateString) => {
+	const formatDate$1 = (dateString) => {
 		if (!dateString) return "";
 		return new Date(dateString).toLocaleDateString("en-US", {
 			month: "short",
@@ -602,12 +638,12 @@ const ApiKey = ({ apiKey, createdAt, lastUsed, expiresOn, isActive = true, label
 		const diffInDays = Math.floor(diffInHours / 24);
 		if (diffInDays === 1) return "1 day ago";
 		if (diffInDays < 30) return `${diffInDays} days ago`;
-		return formatDate(dateString);
+		return formatDate$1(dateString);
 	};
 	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__ */ jsx(Card, {
-		className: isExpiring && !isExpired ? "border-yellow-200 bg-yellow-50" : "",
+		className: isExpiring && !isExpired ? "border-amber-200 bg-amber-50 dark:bg-amber-900/50 dark:border-amber-800" : "",
 		children: /* @__PURE__ */ jsx(CardContent, {
 			className: "p-6",
 			children: /* @__PURE__ */ jsxs("div", {
@@ -624,7 +660,7 @@ const ApiKey = ({ apiKey, createdAt, lastUsed, expiresOn, isActive = true, label
 								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",
+								className: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800",
 								children: "Expiring"
 							})]
 						})
@@ -634,27 +670,32 @@ const ApiKey = ({ apiKey, createdAt, lastUsed, expiresOn, isActive = true, label
 						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)] })]
+								children: [/* @__PURE__ */ jsx(ClockIcon, { className: "size-3.5" }), /* @__PURE__ */ jsxs("span", { children: ["Created ", formatDate$1(createdAt)] })]
 							}),
 							/* @__PURE__ */ jsx("span", { children: "•" }),
 							/* @__PURE__ */ jsxs("span", { children: ["Last used ", getTimeAgo(lastUsed)] }),
 							expiresOn && /* @__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(expiresOn)]
+								className: isExpired ? "text-red-700 font-medium" : isExpiring ? "text-amber-700 font-medium" : "",
+								children: ["Expires ", formatDate$1(expiresOn)]
 							})] })
 						]
 					}),
 					/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-2 rounded-md font-mono text-sm",
+						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: onDelete,
-							className: "text-red-500 hover:text-red-700 p-1",
-							type: "button",
-							"aria-label": "Delete API key",
-							children: /* @__PURE__ */ jsx(Trash2Icon, { className: "size-4" })
+							status: isActive ? "active" : "expiring",
+							className: cn((isExpired || isExpiring) && "bg-amber-100 dark:bg-amber-900 border border-amber-200 dark:border-amber-800")
+						}), !isActive && /* @__PURE__ */ jsx(ConfirmDeleteKeyAlert_default, {
+							onDelete,
+							children: /* @__PURE__ */ jsx(Button$1, {
+								className: "text-red-500 hover:text-red-700 p-1",
+								type: "button",
+								"aria-label": "Delete API key",
+								variant: "ghost",
+								size: "icon-sm",
+								children: /* @__PURE__ */ jsx(Trash2Icon, { className: "size-4" })
+							})
 						})]
 					})
 				]
@@ -688,6 +729,19 @@ const ApiKeyInfo = () => {
 	});
 };
 
+//#endregion
+//#region src/pages/subscriptions/ConfirmRollKeyAlert.tsx
+const ConfirmRollKeyAlert = ({ children, onRollKey }) => {
+	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 will roll your API key and create a new one. You will need to update 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: onRollKey,
+		children: "Continue"
+	})] })] })] });
+};
+var ConfirmRollKeyAlert_default = ConfirmRollKeyAlert;
+
 //#endregion
 //#region src/pages/subscriptions/ApiKeysList.tsx
 const ApiKeysList = ({ apiKeys, deploymentName, consumerId }) => {
@@ -727,10 +781,16 @@ const ApiKeysList = ({ apiKeys, deploymentName, consumerId }) => {
 				children: [/* @__PURE__ */ jsx("h3", {
 					className: "text-lg font-semibold",
 					children: "API Keys"
-				}), /* @__PURE__ */ jsxs(Button$1, {
-					onClick: () => rollKeyMutation.mutateAsync(),
-					disabled: rollKeyMutation.isPending,
-					children: [/* @__PURE__ */ jsx(RefreshCwIcon, { className: `size-4 ${rollKeyMutation.isPending ? "animate-spin" : ""}` }), rollKeyMutation.isPending ? "Rolling..." : "Roll API Key"]
+				}), /* @__PURE__ */ jsx(ConfirmRollKeyAlert_default, {
+					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"]
+						})
+					})
 				})]
 			}),
 			deleteKeyMutation.error && /* @__PURE__ */ jsxs(Alert, {
@@ -773,6 +833,13 @@ const ApiKeysList = ({ apiKeys, deploymentName, consumerId }) => {
 
 //#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 }) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3",
@@ -783,8 +850,11 @@ const SubscriptionsList = ({ subscriptions, activeSubscriptionId }) => {
 				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 }) })
+					className: cn(isActive && "border-primary bg-primary/5"),
+					children: /* @__PURE__ */ jsxs(ItemContent, { children: [/* @__PURE__ */ jsxs(ItemTitle, { children: [subscription.name, /* @__PURE__ */ jsx(Badge, {
+						className: "capitalize",
+						children: formatDurationInterval(subscription.billingCadence)
+					})] }), /* @__PURE__ */ jsxs(ItemDescription, { children: ["Started: ", formatDate(subscription.activeFrom)] })] })
 				}, subscription.id)
 			}, subscription.id);
 		})
@@ -796,49 +866,98 @@ const SubscriptionsList = ({ subscriptions, activeSubscriptionId }) => {
 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",
+const UsageItem = ({ meter, item }) => {
+	return /* @__PURE__ */ jsxs(Card, {
+		className: cn(meter.overage > 0 && "border-red-400 bg-red-50/50"),
+		children: [/* @__PURE__ */ jsxs(CardHeader, {
+			className: cn("pb-2"),
+			children: [
+				meter.overage > 0 && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-start gap-3 p-3 bg-red-100 rounded-lg mb-4",
+					children: [
+						/* @__PURE__ */ jsx(AlertTriangleIcon, { className: "size-5 text-red-600 shrink-0 mt-0.5" }),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex-1",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "text-sm font-medium text-red-800",
+								children: "You've exceeded your monthly quota"
+							}), /* @__PURE__ */ jsx("p", {
+								className: "text-xs text-red-700 mt-0.5",
+								children: "Additional API calls are being charged at the overage rate ($0.03/call). Upgrade to Enterprise for unlimited calls."
+							})]
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "destructive",
+							size: "sm",
+							asChild: true,
+							children: /* @__PURE__ */ jsxs(Link, {
+								to: "/pricing",
+								children: [/* @__PURE__ */ jsx(ArrowUpIcon, {}), "Upgrade"]
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs(CardTitle, { children: [
+					item.name,
+					" ",
+					item.price?.amount
+				] }),
+				/* @__PURE__ */ jsx(CardDescription, {})
+			]
+		}), /* @__PURE__ */ jsxs(CardContent, {
+			className: "pace-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"]
-						})]
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "flex flex-col gap-2 mb-2",
+						children: /* @__PURE__ */ jsxs("span", {
+							className: cn(meter.overage > 0 && "text-red-600 font-medium"),
+							children: [
+								meter.usage.toLocaleString(),
+								" used",
+								meter.overage > 0 && /* @__PURE__ */ jsxs("span", {
+									className: "ml-1 text-xs",
+									children: [
+										"(+",
+										meter.overage.toLocaleString(),
+										" overage)"
+									]
+								})
+							]
+						})
 					}), /* @__PURE__ */ jsxs("span", {
-						className: "text-muted-foreground",
-						children: [metric.balance.toLocaleString(), " limit"]
+						className: "text-foreground font-medium",
+						children: [meter.balance.toLocaleString(), " limit"]
 					})]
 				}),
 				/* @__PURE__ */ jsx(Progress, {
-					value: metric.usage / metric.balance * 100,
-					className: "h-2"
+					value: meter.usage / meter.balance * 100,
+					className: cn("mb-3 h-2", meter.overage > 0 && "bg-red-500")
 				}),
 				/* @__PURE__ */ jsxs("p", {
-					className: "text-sm text-muted-foreground",
-					children: [metric.balance - metric.usage, " calls remaining this month"]
+					className: "text-xs text-muted-foreground",
+					children: [(meter.balance - meter.usage).toLocaleString(), " remaining this month"]
 				})
 			]
-		})] }, key))
-	}) })] });
+		})]
+	});
+};
+const Usage = ({ subscriptionId, environmentName, currentItems }) => {
+	const zudoku = useZudoku();
+	const { data: usage } = useSuspenseQuery({
+		queryKey: [`/v3/zudoku-metering/${environmentName}/subscriptions/${subscriptionId}/usage`],
+		meta: { context: zudoku }
+	});
+	const meteredEntitlements = currentItems.filter((item) => item.included.entitlement?.type === "metered");
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Heading, {
+		level: 3,
+		className: "mb-4",
+		children: "Usage"
+	}), Object.entries(usage.entitlements).filter((entry) => isMeteredEntitlement(entry[1])).map(([key, metric]) => /* @__PURE__ */ jsx(UsageItem, {
+		meter: { ...metric },
+		item: meteredEntitlements.find((item) => item.included.entitlement?.featureKey === key)
+	}, key))] });
 };
 
 //#endregion
@@ -852,6 +971,7 @@ const SubscriptionsPage = ({ environmentName }) => {
 		if (subscriptionId) return subscriptions.find((s) => s.id === subscriptionId) ?? subscriptions[0];
 		return subscriptions[0];
 	}, [subscriptions, subscriptionId]);
+	const activePhase = activeSubscription.phases.find((p) => new Date(p.activeFrom) <= /* @__PURE__ */ new Date() && new Date(p.activeTo) >= /* @__PURE__ */ new Date());
 	return /* @__PURE__ */ jsx("div", {
 		className: "w-full py-12",
 		children: /* @__PURE__ */ jsxs("div", {
@@ -870,7 +990,8 @@ const SubscriptionsPage = ({ environmentName }) => {
 				}),
 				activeSubscription && /* @__PURE__ */ jsx(Usage, {
 					subscriptionId: activeSubscription?.id,
-					environmentName
+					environmentName,
+					currentItems: activePhase?.items
 				}),
 				activeSubscription?.consumer?.apiKeys && /* @__PURE__ */ jsx(ApiKeysList, {
 					deploymentName: environmentName,
@@ -905,62 +1026,60 @@ const enableMonetization = (config, options) => {
 		} }
 	};
 };
-const zuploMonetizationPlugin = (options) => {
-	return {
-		getIdentities: async (context) => {
-			return (await queryClient.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 })
-			}]
+const zuploMonetizationPlugin = createPlugin((options) => ({
+	getIdentities: async (context) => {
+		return (await queryClient.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 })
 		}, {
-			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"
-			];
-		}
-	};
-};
+			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"
+		];
+	}
+}), import.meta.url);
 
 //#endregion
 export { enableMonetization, zuploMonetizationPlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuplo/zudoku-plugin-monetization",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "type": "module",
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
@@ -27,7 +27,7 @@
   "peerDependencies": {
     "react": ">=19.2.0",
     "react-dom": ">=19.2.0",
-    "zudoku": ">=0.67.0"
+    "zudoku": "*"
   },
   "scripts": {
     "build": "tsdown",