@lukoweb/apitogo-plugin-dev-portal-billing 0.1.72 → 0.1.74

package/dist/index.d.mts

@@ -5,17 +5,6 @@ import * as _tanstack_react_query0 from "@tanstack/react-query";
 //#region src/pages/AccountPlansPage.d.ts
 declare const AccountPlansPage: () => react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/ApiKeysPanel.d.ts
-/**
- * Lists the developer's gateway API keys with create and revoke. The plaintext key is returned by the
- * platform exactly once, so it is held in local state until dismissed and never re-fetched.
- */
-declare const ApiKeysPanel: ({
-  readOnly
-}: {
-  readOnly?: boolean;
-}) => react_jsx_runtime0.JSX.Element;
-//#endregion
 //#region src/types.d.ts
 type DevPortalApiKey = {
   id: string;
@@ -26,11 +15,16 @@ type DevPortalApiKey = {
   revokedAtUtc: string | null; /** Present only in the response to a successful create; never returned again. */
   key: string | null;
 };
-type DevPortalApiKeyListResponse = {
+type DevPortalApiKeyPlan = {
+  planSku: string;
+  displayName: string;
   keys: DevPortalApiKey[];
   activeCount: number; /** Per-developer cap from the project's platform plan; null means unlimited. */
   maxKeys: number | null;
-  canCreate: boolean; /** Header the key must be sent in when calling the gateway. */
+  canCreate: boolean;
+};
+type DevPortalApiKeyListResponse = {
+  plans: DevPortalApiKeyPlan[]; /** Header the key must be sent in when calling the gateway. */
   header: string;
   gatewayBaseUrl: string | null;
 };
@@ -50,6 +44,21 @@ type DevPortalBillingConfig = {
   }>;
 };
 //#endregion
+//#region src/components/ApiKeysPanel.d.ts
+/**
+ * Lists gateway API keys for one plan with create and revoke. The plaintext key is returned by the
+ * platform exactly once, so it is held in local state until dismissed and never re-fetched.
+ */
+declare const ApiKeysPanel: ({
+  plan,
+  header,
+  readOnly
+}: {
+  plan: DevPortalApiKeyPlan;
+  header: string;
+  readOnly?: boolean;
+}) => react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/paths.d.ts
 declare const PRICING_PATH = "/pricing";
 declare const CHECKOUT_PATH = "/checkout";
@@ -171,7 +180,10 @@ declare function useApiKeys(): _tanstack_react_query0.QueryObserverRefetchErrorR
   fetchStatus: _tanstack_react_query0.FetchStatus;
   promise: Promise<DevPortalApiKeyListResponse>;
 };
-declare function useCreateApiKey(): _tanstack_react_query0.UseMutationResult<DevPortalApiKey, Error, string, unknown>;
+declare function useCreateApiKey(): _tanstack_react_query0.UseMutationResult<DevPortalApiKey, Error, {
+  name: string;
+  planSku: string;
+}, unknown>;
 declare function useRevokeApiKey(): _tanstack_react_query0.UseMutationResult<void, Error, string, unknown>;
 //#endregion
 export { API_KEY_CAP_REACHED, AccountPlansPage, ApiKeysPanel, CHECKOUT_PATH, CREDENTIALS_PATH, PRICING_PATH, SUBSCRIPTIONS_PATH, devPortalBillingPlugin, useApiKeys, useCreateApiKey, useRevokeApiKey };

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { Button, Head, Heading } from "@lukoweb/apitogo/components";
+import { Button, Head, Heading, Spinner } from "@lukoweb/apitogo/components";
 import { CreditCardIcon, KeyRoundIcon, ShieldIcon, StarsIcon, TrashIcon } from "@lukoweb/apitogo/icons";
 import { createContext, useContext, useEffect, useState } from "react";
 import { Link, Navigate, Outlet, useNavigate, useSearchParams } from "@lukoweb/apitogo/router";
@@ -11,7 +11,7 @@ import { useMutation, useQuery, useQueryClient } from "@lukoweb/apitogo/react-qu
 import { useAuth } from "@lukoweb/apitogo/hooks";
 import { Alert, AlertTitle } from "@lukoweb/apitogo/ui/Alert.js";
 import { Button as Button$1 } from "@lukoweb/apitogo/ui/Button.js";
-import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@lukoweb/apitogo/ui/Dialog.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@lukoweb/apitogo/ui/Dialog.js";
 import { Input } from "@lukoweb/apitogo/ui/Input.js";
 import { Secret } from "@lukoweb/apitogo/ui/Secret.js";
 import { createPlugin } from "@lukoweb/apitogo/plugins";
@@ -177,7 +177,7 @@ const PricingCard = ({ plan, mode = "public", subscriptionStatus, isSubscribed =
 						variant: "secondary",
 						className: "w-full",
 						disabled: true,
-						children: "Current plan"
+						children: "Subscribed"
 					}),
 					onUnsubscribe ? /* @__PURE__ */ jsxs(AlertDialog, { children: [/* @__PURE__ */ jsx(AlertDialogTrigger, {
 						asChild: true,
@@ -292,48 +292,57 @@ function useCancelSubscription() {
 const DEMO_SUBSCRIPTION_KEY = "demo-subscription-key";
 const DEMO_GATEWAY_KEY_HEADER = "Ocp-Apim-Subscription-Key";
 const DEMO_MAX_KEYS = 5;
-function resolveDemoPlanSku(plans) {
-	return plans?.[0]?.sku ?? "free";
+function resolveDemoPlans(plans) {
+	if (plans && plans.length > 0) return plans.map((plan) => ({
+		sku: plan.sku,
+		displayName: plan.displayName
+	}));
+	return [{
+		sku: "free",
+		displayName: "Free"
+	}];
 }
 function createDemoMeResponse(plans) {
-	const planSku = resolveDemoPlanSku(plans);
 	const periodEnd = /* @__PURE__ */ new Date();
 	periodEnd.setMonth(periodEnd.getMonth() + 1);
 	return {
 		userId: "00000000-0000-0000-0000-000000000001",
 		displayName: "Demo User",
-		subscriptions: [{
-			planSku,
+		subscriptions: resolveDemoPlans(plans).map((plan) => ({
+			planSku: plan.sku,
 			status: "Active",
 			entitlementState: "active",
 			currentPeriodEnd: periodEnd.toISOString()
-		}]
+		}))
 	};
 }
 function createDemoCredentials(plans) {
 	return {
 		idToken: "demo-id-token",
 		accessToken: null,
-		subscriptionKey: DEMO_SUBSCRIPTION_KEY,
 		gatewayBaseUrl: null,
-		planSku: resolveDemoPlanSku(plans),
+		planSkus: resolveDemoPlans(plans).map((plan) => plan.sku),
 		expiresAt: null
 	};
 }
-function createDemoApiKeys() {
+function createDemoApiKeys(plans) {
 	return {
-		keys: [{
-			id: "00000000-0000-0000-0000-0000000000a1",
-			name: "default",
-			keyPrefix: DEMO_SUBSCRIPTION_KEY.slice(0, 8),
-			status: "active",
-			createdAtUtc: (/* @__PURE__ */ new Date()).toISOString(),
-			revokedAtUtc: null,
-			key: null
-		}],
-		activeCount: 1,
-		maxKeys: DEMO_MAX_KEYS,
-		canCreate: true,
+		plans: resolveDemoPlans(plans).map((plan, index) => ({
+			planSku: plan.sku,
+			displayName: plan.displayName,
+			keys: index === 0 ? [{
+				id: "00000000-0000-0000-0000-0000000000a1",
+				name: "default",
+				keyPrefix: DEMO_SUBSCRIPTION_KEY.slice(0, 8),
+				status: "active",
+				createdAtUtc: (/* @__PURE__ */ new Date()).toISOString(),
+				revokedAtUtc: null,
+				key: null
+			}] : [],
+			activeCount: index === 0 ? 1 : 0,
+			maxKeys: DEMO_MAX_KEYS,
+			canCreate: true
+		})),
 		header: DEMO_GATEWAY_KEY_HEADER,
 		gatewayBaseUrl: null
 	};
@@ -503,6 +512,7 @@ function useApiKeys() {
 	const apiBaseUrl = useDevPortalApiBaseUrl();
 	const isPreview = useDevPortalPreviewMode();
 	const isDemoSession = useIsDemoSession();
+	const { previewPlans } = useDevPortalBillingConfig();
 	const liveQuery = useQuery({
 		queryKey: apiKeysQueryKey(apiBaseUrl),
 		enabled: auth.isAuthenticated && !isPreview && !isDemoSession && Boolean(apiBaseUrl),
@@ -520,7 +530,7 @@ function useApiKeys() {
 	});
 	if (isDemoSession && auth.isAuthenticated) return {
 		...liveQuery,
-		data: createDemoApiKeys(),
+		data: createDemoApiKeys(previewPlans),
 		error: null,
 		isError: false,
 		isFetching: false,
@@ -535,7 +545,7 @@ function useCreateApiKey() {
 	const apiBaseUrl = useDevPortalApiBaseUrl();
 	const queryClient = useQueryClient();
 	return useMutation({
-		mutationFn: async (name) => {
+		mutationFn: async ({ name, planSku }) => {
 			if (!apiBaseUrl) throw new Error("Dev portal API is not configured.");
 			const response = await fetch(`${apiBaseUrl}/api/v1/api-keys`, {
 				method: "POST",
@@ -544,7 +554,10 @@ function useCreateApiKey() {
 					"Content-Type": "application/json"
 				},
 				credentials: "include",
-				body: JSON.stringify({ name })
+				body: JSON.stringify({
+					name,
+					planSku
+				})
 			});
 			if (response.status === 409) throw new Error(API_KEY_CAP_REACHED);
 			if (!response.ok) throw new Error(await readProblemDetail(response) ?? "Failed to create API key.");
@@ -584,26 +597,38 @@ async function readProblemDetail(response) {
 //#endregion
 //#region src/components/ApiKeysPanel.tsx
 /**
-* Lists the developer's gateway API keys with create and revoke. The plaintext key is returned by the
+* Lists gateway API keys for one plan with create and revoke. The plaintext key is returned by the
 * platform exactly once, so it is held in local state until dismissed and never re-fetched.
 */
-const ApiKeysPanel = ({ readOnly = false }) => {
-	const { data, isLoading, error } = useApiKeys();
+const ApiKeysPanel = ({ plan, header, readOnly = false }) => {
 	const createKey = useCreateApiKey();
 	const revokeKey = useRevokeApiKey();
 	const [name, setName] = useState("");
 	const [newKey, setNewKey] = useState(null);
-	const activeKeys = data?.keys.filter((key) => key.status === "active") ?? [];
-	const capLabel = data?.maxKeys == null ? `${data?.activeCount ?? activeKeys.length} active` : `${data.activeCount} of ${data.maxKeys} used`;
-	const canCreate = !readOnly && (data?.canCreate ?? false);
+	const [openRevokeId, setOpenRevokeId] = useState(null);
+	const [pendingRevokeId, setPendingRevokeId] = useState(null);
+	const activeKeys = plan.keys.filter((key) => key.status === "active");
+	const planActiveCount = activeKeys.length;
+	const capLabel = plan.maxKeys == null ? `${plan.activeCount} active (all plans)` : `${plan.activeCount} of ${plan.maxKeys} used (all plans)`;
+	const canCreate = !readOnly && plan.canCreate;
 	const handleCreate = () => {
 		const trimmed = name.trim();
 		if (!trimmed) return;
-		createKey.mutate(trimmed, { onSuccess: (key) => {
+		createKey.mutate({
+			name: trimmed,
+			planSku: plan.planSku
+		}, { onSuccess: (key) => {
 			setNewKey(key);
 			setName("");
 		} });
 	};
+	const handleRevoke = (keyId) => {
+		setPendingRevokeId(keyId);
+		revokeKey.mutate(keyId, { onSettled: () => {
+			setPendingRevokeId(null);
+			setOpenRevokeId(null);
+		} });
+	};
 	return /* @__PURE__ */ jsxs("article", {
 		className: "rounded-xl border bg-card/60 p-6 space-y-5",
 		children: [
@@ -611,9 +636,9 @@ const ApiKeysPanel = ({ readOnly = false }) => {
 				className: "flex flex-wrap items-start justify-between gap-3",
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "space-y-1",
-					children: [/* @__PURE__ */ jsx("h2", {
+					children: [/* @__PURE__ */ jsxs("h2", {
 						className: "text-lg font-medium",
-						children: "API keys"
+						children: [plan.displayName, " API keys"]
 					}), /* @__PURE__ */ jsxs("p", {
 						className: "text-sm text-muted-foreground",
 						children: [
@@ -621,16 +646,16 @@ const ApiKeysPanel = ({ readOnly = false }) => {
 							" ",
 							/* @__PURE__ */ jsx("code", {
 								className: "rounded bg-muted px-1 py-0.5 text-xs",
-								children: data?.header ?? "Ocp-Apim-Subscription-Key"
+								children: header
 							}),
 							" ",
-							"header when calling the gateway. Keys share your plan's rate limit and quota."
+							"header when calling this plan's endpoints. Keys share your developer key cap across all plans."
 						]
 					})]
-				}), data ? /* @__PURE__ */ jsx("span", {
+				}), /* @__PURE__ */ jsx("span", {
 					className: "shrink-0 rounded-full border px-3 py-1 text-xs text-muted-foreground",
 					children: capLabel
-				}) : null]
+				})]
 			}),
 			newKey?.key ? /* @__PURE__ */ jsxs(Alert, { children: [
 				/* @__PURE__ */ jsx(KeyRoundIcon, { size: 16 }),
@@ -650,72 +675,71 @@ const ApiKeysPanel = ({ readOnly = false }) => {
 			] }) : null,
 			createKey.isError ? /* @__PURE__ */ jsx(Alert, {
 				variant: "destructive",
-				children: /* @__PURE__ */ jsx(AlertTitle, { children: createKey.error.message === API_KEY_CAP_REACHED ? data?.maxKeys == null ? "You cannot create more API keys right now." : `You already have the maximum of ${data.maxKeys} active API keys. Revoke one to create another.` : createKey.error.message })
+				children: /* @__PURE__ */ jsx(AlertTitle, { children: createKey.error.message === API_KEY_CAP_REACHED ? plan.maxKeys == null ? "You cannot create more API keys right now." : `You already have the maximum of ${plan.maxKeys} active API keys. Revoke one to create another.` : createKey.error.message })
 			}) : null,
 			revokeKey.isError ? /* @__PURE__ */ jsx(Alert, {
 				variant: "destructive",
 				children: /* @__PURE__ */ jsx(AlertTitle, { children: revokeKey.error.message })
 			}) : null,
-			isLoading ? /* @__PURE__ */ jsx("p", {
-				className: "text-sm text-muted-foreground",
-				children: "Loading…"
-			}) : null,
-			error ? /* @__PURE__ */ jsx("p", {
-				className: "text-sm text-muted-foreground",
-				children: error instanceof Error && error.message === "NO_ENTITLEMENT" ? "Choose a plan to get your first API key." : "Unable to load your API keys. Try again in a moment."
-			}) : null,
-			data && activeKeys.length === 0 && !isLoading ? /* @__PURE__ */ jsx("p", {
+			planActiveCount === 0 ? /* @__PURE__ */ jsx("p", {
 				className: "text-sm text-muted-foreground",
-				children: "You have no active API keys yet."
+				children: "You have no active API keys for this plan yet."
 			}) : null,
 			activeKeys.length > 0 ? /* @__PURE__ */ jsx("ul", {
 				className: "divide-y rounded-lg border",
-				children: activeKeys.map((key) => /* @__PURE__ */ jsxs("li", {
-					className: "flex flex-wrap items-center justify-between gap-3 p-4",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "min-w-0 space-y-1",
-						children: [/* @__PURE__ */ jsx("p", {
-							className: "truncate font-medium",
-							children: key.name
-						}), /* @__PURE__ */ jsxs("p", {
-							className: "text-xs text-muted-foreground",
-							children: [
-								/* @__PURE__ */ jsxs("code", { children: [key.keyPrefix, "…"] }),
-								" · created",
-								" ",
-								new Date(key.createdAtUtc).toLocaleDateString()
-							]
-						})]
-					}), readOnly ? null : /* @__PURE__ */ jsxs(Dialog, { children: [/* @__PURE__ */ jsx(DialogTrigger, {
-						asChild: true,
-						children: /* @__PURE__ */ jsxs(Button$1, {
-							variant: "ghost",
-							className: "flex items-center gap-2",
-							disabled: revokeKey.isPending,
-							children: [/* @__PURE__ */ jsx(TrashIcon, { size: 16 }), /* @__PURE__ */ jsx("span", {
-								className: "hidden md:block",
-								children: "Revoke"
+				children: activeKeys.map((key) => {
+					const isRevoking = pendingRevokeId === key.id;
+					return /* @__PURE__ */ jsxs("li", {
+						className: "flex flex-wrap items-center justify-between gap-3 p-4",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "min-w-0 space-y-1",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "truncate font-medium",
+								children: key.name
+							}), /* @__PURE__ */ jsxs("p", {
+								className: "text-xs text-muted-foreground",
+								children: [
+									/* @__PURE__ */ jsxs("code", { children: [key.keyPrefix, "…"] }),
+									" · created",
+									" ",
+									new Date(key.createdAtUtc).toLocaleDateString()
+								]
 							})]
-						})
-					}), /* @__PURE__ */ jsxs(DialogContent, { children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsxs(DialogTitle, { children: [
-						"Revoke “",
-						key.name,
-						"”?"
-					] }), /* @__PURE__ */ jsx(DialogDescription, { children: "Any application using this key will immediately start getting 401 responses from the gateway. This cannot be undone." })] }), /* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(DialogClose, {
-						asChild: true,
-						children: /* @__PURE__ */ jsx(Button$1, {
-							variant: "outline",
-							children: "Cancel"
-						})
-					}), /* @__PURE__ */ jsx(DialogClose, {
-						asChild: true,
-						children: /* @__PURE__ */ jsx(Button$1, {
-							variant: "destructive",
-							onClick: () => revokeKey.mutate(key.id),
-							children: "Revoke key"
-						})
-					})] })] })] })]
-				}, key.id))
+						}), readOnly ? null : /* @__PURE__ */ jsxs(Dialog, {
+							open: openRevokeId === key.id,
+							onOpenChange: (open) => {
+								if (isRevoking) return;
+								setOpenRevokeId(open ? key.id : null);
+							},
+							children: [/* @__PURE__ */ jsx(DialogTrigger, {
+								asChild: true,
+								children: /* @__PURE__ */ jsxs(Button$1, {
+									variant: "ghost",
+									className: "flex items-center gap-2",
+									disabled: isRevoking,
+									children: [isRevoking ? /* @__PURE__ */ jsx(Spinner, { size: 14 }) : /* @__PURE__ */ jsx(TrashIcon, { size: 16 }), /* @__PURE__ */ jsx("span", {
+										className: "hidden md:block",
+										children: isRevoking ? "Revoking…" : "Revoke"
+									})]
+								})
+							}), /* @__PURE__ */ jsxs(DialogContent, { children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsxs(DialogTitle, { children: [
+								"Revoke “",
+								key.name,
+								"”?"
+							] }), /* @__PURE__ */ jsx(DialogDescription, { children: "Any application using this key will immediately start getting 401 responses from the gateway. This cannot be undone." })] }), /* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button$1, {
+								variant: "outline",
+								disabled: isRevoking,
+								onClick: () => setOpenRevokeId(null),
+								children: "Cancel"
+							}), /* @__PURE__ */ jsx(Button$1, {
+								variant: "destructive",
+								disabled: isRevoking,
+								onClick: () => handleRevoke(key.id),
+								children: isRevoking ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spinner, { size: 14 }), "Revoking…"] }) : "Revoke key"
+							})] })] })]
+						})]
+					}, key.id);
+				})
 			}) : null,
 			readOnly ? null : /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-wrap items-center gap-2",
@@ -723,7 +747,7 @@ const ApiKeysPanel = ({ readOnly = false }) => {
 					className: "max-w-xs",
 					maxLength: 64,
 					placeholder: "Key name (e.g. production)",
-					"aria-label": "New API key name",
+					"aria-label": `New API key name for ${plan.displayName}`,
 					value: name,
 					disabled: !canCreate || createKey.isPending,
 					onChange: (event) => setName(event.target.value),
@@ -733,12 +757,13 @@ const ApiKeysPanel = ({ readOnly = false }) => {
 				}), /* @__PURE__ */ jsx(Button$1, {
 					onClick: handleCreate,
 					disabled: !canCreate || createKey.isPending || !name.trim(),
-					children: createKey.isPending ? "Creating…" : "Create API key"
+					className: "flex items-center gap-2",
+					children: createKey.isPending ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spinner, { size: 14 }), "Creating…"] }) : "Create API key"
 				})]
 			}),
-			data && !data.canCreate && !readOnly ? /* @__PURE__ */ jsx("p", {
+			plan && !plan.canCreate && !readOnly ? /* @__PURE__ */ jsx("p", {
 				className: "text-sm text-muted-foreground",
-				children: data.maxKeys == null ? "API key creation is currently disabled for this API." : `You have reached your plan limit of ${data.maxKeys} API keys. Revoke a key to create a new one.`
+				children: plan.maxKeys == null ? "API key creation is currently disabled for this API." : `You have reached your limit of ${plan.maxKeys} API keys across all plans. Revoke a key to create a new one.`
 			}) : null
 		]
 	});
@@ -965,9 +990,10 @@ const CredentialsPage = () => {
 	const isPreview = useDevPortalPreviewMode();
 	const isDemoSession = useIsDemoSession();
 	const { data: credentials, isLoading, error } = useCredentials();
-	const { data: catalog } = usePlans();
-	const [revealed, setRevealed] = useState(false);
-	const plan = catalog?.plans.find((item) => item.sku === credentials?.planSku);
+	const { data: apiKeys, isLoading: keysLoading, error: keysError } = useApiKeys();
+	const gatewayBaseUrl = credentials?.gatewayBaseUrl ?? apiKeys?.gatewayBaseUrl ?? null;
+	const header = apiKeys?.header ?? "Ocp-Apim-Subscription-Key";
+	const plans = apiKeys?.plans ?? [];
 	return /* @__PURE__ */ jsxs("div", {
 		className: "mx-auto max-w-screen-lg px-4 pb-16 pt-(--padding-content-top) lg:px-8",
 		children: [
@@ -984,7 +1010,7 @@ const CredentialsPage = () => {
 						children: "API credentials"
 					}), /* @__PURE__ */ jsx("p", {
 						className: "text-muted-foreground",
-						children: "Create API keys and use them to authenticate requests to the API gateway."
+						children: "Create API keys for each subscribed plan and use them to authenticate requests to the API gateway."
 					})]
 				})]
 			}),
@@ -1003,7 +1029,7 @@ const CredentialsPage = () => {
 				className: "rounded-xl border border-dashed p-8 text-center",
 				children: [/* @__PURE__ */ jsx("p", {
 					className: "text-muted-foreground",
-					children: "Sign in to view your subscription key."
+					children: "Sign in to view your subscription keys."
 				}), /* @__PURE__ */ jsx(Button$2, {
 					className: "mt-4",
 					asChild: true,
@@ -1013,15 +1039,15 @@ const CredentialsPage = () => {
 					})
 				})]
 			}) : null,
-			!isPreview && !isDemoSession && auth.isAuthenticated && isLoading ? /* @__PURE__ */ jsx("p", {
+			!isPreview && !isDemoSession && auth.isAuthenticated && (isLoading || keysLoading) ? /* @__PURE__ */ jsx("p", {
 				className: "text-muted-foreground",
 				children: "Loading credentials…"
 			}) : null,
-			!isPreview && !isDemoSession && auth.isAuthenticated && error ? /* @__PURE__ */ jsxs("div", {
+			!isPreview && !isDemoSession && auth.isAuthenticated && (error || keysError) ? /* @__PURE__ */ jsxs("div", {
 				className: "rounded-xl border border-dashed p-8 text-center",
 				children: [/* @__PURE__ */ jsx("p", {
 					className: "text-muted-foreground",
-					children: error instanceof Error && error.message === "NO_ENTITLEMENT" ? "No active subscription found. Choose a plan to get your API key." : "Unable to load API credentials. Try again in a moment."
+					children: error instanceof Error && error.message === "NO_ENTITLEMENT" || keysError instanceof Error && keysError.message === "NO_ENTITLEMENT" ? "No active subscription found. Choose a plan to get your API key." : "Unable to load API credentials. Try again in a moment."
 				}), /* @__PURE__ */ jsx(Button$2, {
 					className: "mt-4",
 					asChild: true,
@@ -1031,66 +1057,44 @@ const CredentialsPage = () => {
 					})
 				})]
 			}) : null,
-			(isDemoSession || !isPreview) && credentials ? /* @__PURE__ */ jsxs("div", {
+			(isDemoSession || !isPreview) && auth.isAuthenticated && !error && !keysError && !isLoading && !keysLoading ? /* @__PURE__ */ jsxs("div", {
 				className: "space-y-6",
-				children: [
-					/* @__PURE__ */ jsx("article", {
-						className: "rounded-xl border bg-card/60 p-6",
-						children: /* @__PURE__ */ jsxs("div", {
-							className: "space-y-1",
-							children: [/* @__PURE__ */ jsx("h2", {
-								className: "text-lg font-medium",
-								children: "Active plan"
-							}), /* @__PURE__ */ jsx("p", {
-								className: "text-sm text-muted-foreground",
-								children: plan?.displayName ?? credentials.planSku
-							})]
+				children: [plans.length === 0 ? /* @__PURE__ */ jsxs("div", {
+					className: "rounded-xl border border-dashed p-8 text-center",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground",
+						children: "Choose a plan to get your first API key."
+					}), /* @__PURE__ */ jsx(Button$2, {
+						className: "mt-4",
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Link, {
+							to: "/account/plans",
+							children: "View plans"
 						})
-					}),
-					/* @__PURE__ */ jsx(ApiKeysPanel, { readOnly: isDemoSession }),
-					credentials.subscriptionKey ? /* @__PURE__ */ jsxs("article", {
-						className: "rounded-xl border bg-card/60 p-6 space-y-4",
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "space-y-1",
-							children: [/* @__PURE__ */ jsx("h2", {
-								className: "text-lg font-medium",
-								children: "Default key value"
-							}), /* @__PURE__ */ jsxs("p", {
-								className: "text-sm text-muted-foreground",
-								children: [
-									"The full value of the ",
-									/* @__PURE__ */ jsx("code", { children: "default" }),
-									" key issued with your plan. Keys you create above are shown only once, so store them yourself."
-								]
-							})]
-						}), /* @__PURE__ */ jsx(Secret, {
-							className: "max-w-full w-full",
-							secret: credentials.subscriptionKey,
-							status: "active",
-							revealed,
-							onReveal: setRevealed
-						})]
-					}) : null,
-					/* @__PURE__ */ jsxs("article", {
-						className: "rounded-xl border bg-card/60 p-6 space-y-4",
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "space-y-1",
-							children: [/* @__PURE__ */ jsx("h2", {
-								className: "text-lg font-medium",
-								children: "Gateway URL"
-							}), /* @__PURE__ */ jsx("p", {
-								className: "text-sm text-muted-foreground",
-								children: "Base URL for API requests through the gateway."
-							})]
-						}), credentials.gatewayBaseUrl ? /* @__PURE__ */ jsx(Value, {
-							className: "max-w-full w-full",
-							value: credentials.gatewayBaseUrl
-						}) : /* @__PURE__ */ jsx("p", {
+					})]
+				}) : plans.map((plan) => /* @__PURE__ */ jsx(ApiKeysPanel, {
+					plan,
+					header,
+					readOnly: isDemoSession
+				}, plan.planSku)), /* @__PURE__ */ jsxs("article", {
+					className: "rounded-xl border bg-card/60 p-6 space-y-4",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "space-y-1",
+						children: [/* @__PURE__ */ jsx("h2", {
+							className: "text-lg font-medium",
+							children: "Gateway URL"
+						}), /* @__PURE__ */ jsx("p", {
 							className: "text-sm text-muted-foreground",
-							children: "Available after your API is deployed to the gateway."
+							children: "Base URL for API requests through the gateway."
 						})]
-					})
-				]
+					}), gatewayBaseUrl ? /* @__PURE__ */ jsx(Value, {
+						className: "max-w-full w-full",
+						value: gatewayBaseUrl
+					}) : /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground",
+						children: "Available after your API is deployed to the gateway."
+					})]
+				})]
 			}) : null,
 			/* @__PURE__ */ jsxs("div", {
 				className: "mt-8 flex flex-wrap gap-3",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukoweb/apitogo-plugin-dev-portal-billing",
-  "version": "0.1.72",
+  "version": "0.1.74",
   "repository": {
     "type": "git",
     "url": "https://github.com/zuplo/zudoku",
@@ -46,7 +46,7 @@
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "tsdown": "0.20.3",
-    "@lukoweb/apitogo": "0.1.72"
+    "@lukoweb/apitogo": "0.1.74"
   },
   "peerDependencies": {
     "react": ">=19.2.0",