@lukoweb/apitogo-plugin-dev-portal-billing 0.1.73 → 0.1.75

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

@@ -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,22 +292,28 @@ 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) {
@@ -315,24 +321,28 @@ function createDemoCredentials(plans) {
 		idToken: "demo-id-token",
 		accessToken: null,
 		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
 	};
@@ -502,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),
@@ -519,7 +530,7 @@ function useApiKeys() {
 	});
 	if (isDemoSession && auth.isAuthenticated) return {
 		...liveQuery,
-		data: createDemoApiKeys(),
+		data: createDemoApiKeys(previewPlans),
 		error: null,
 		isError: false,
 		isFetching: false,
@@ -534,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",
@@ -543,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.");
@@ -583,24 +597,27 @@ 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 [openRevokeId, setOpenRevokeId] = useState(null);
 	const [pendingRevokeId, setPendingRevokeId] = 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 activeKeys = plan.keys.filter((key) => key.status === "active");
+	const planActiveCount = activeKeys.length;
+	const capLabel = plan.maxKeys == null ? `${plan.activeCount} active` : `${plan.activeCount} of ${plan.maxKeys} used`;
+	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("");
 		} });
@@ -619,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: [
@@ -629,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 this plan's rate limit and key cap."
 						]
 					})]
-				}), 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 }),
@@ -658,23 +675,15 @@ 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",
@@ -738,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),
@@ -752,9 +761,9 @@ const ApiKeysPanel = ({ readOnly = false }) => {
 					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 this plan's limit of ${plan.maxKeys} API keys. Revoke a key to create a new one.`
 			}) : null
 		]
 	});
@@ -981,8 +990,10 @@ const CredentialsPage = () => {
 	const isPreview = useDevPortalPreviewMode();
 	const isDemoSession = useIsDemoSession();
 	const { data: credentials, isLoading, error } = useCredentials();
-	const { data: catalog } = usePlans();
-	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: [
@@ -999,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."
 					})]
 				})]
 			}),
@@ -1018,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,
@@ -1028,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,
@@ -1046,43 +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 }),
-					/* @__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.73",
+  "version": "0.1.75",
   "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.73"
+    "@lukoweb/apitogo": "0.1.75"
   },
   "peerDependencies": {
     "react": ">=19.2.0",