@lukoweb/apitogo-plugin-dev-portal-billing 0.1.38 → 0.1.40

package/dist/index.d.mts

@@ -1,5 +1,9 @@
 import * as _lukoweb_apitogo0 from "@lukoweb/apitogo";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
+//#region src/pages/AccountPlansPage.d.ts
+declare const AccountPlansPage: () => react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/types.d.ts
 type DevPortalBillingConfig = {
   pricing?: {
@@ -8,10 +12,13 @@ type DevPortalBillingConfig = {
   };
 };
 //#endregion
-//#region src/DevPortalBillingPlugin.d.ts
+//#region src/paths.d.ts
 declare const PRICING_PATH = "/pricing";
 declare const CHECKOUT_PATH = "/checkout";
 declare const SUBSCRIPTIONS_PATH = "/account/subscriptions";
+declare const CREDENTIALS_PATH = "/account/credentials";
+//#endregion
+//#region src/DevPortalBillingPlugin.d.ts
 declare const devPortalBillingPlugin: (options?: DevPortalBillingConfig | undefined) => _lukoweb_apitogo0.ApitogoPlugin;
 //#endregion
-export { CHECKOUT_PATH, PRICING_PATH, SUBSCRIPTIONS_PATH, devPortalBillingPlugin };
+export { AccountPlansPage, CHECKOUT_PATH, CREDENTIALS_PATH, PRICING_PATH, SUBSCRIPTIONS_PATH, devPortalBillingPlugin };

package/dist/index.mjs

@@ -1,72 +1,16 @@
-import { cn, createPlugin } from "@lukoweb/apitogo";
-import { ShieldIcon, StarsIcon } from "@lukoweb/apitogo/icons";
 import { Button, ClientOnly, Head, Heading } from "@lukoweb/apitogo/components";
-import { Link, Outlet, useNavigate, useSearchParams } from "@lukoweb/apitogo/router";
-import { createContext, useContext, useEffect } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { CreditCardIcon, KeyRoundIcon, ShieldIcon, StarsIcon } from "@lukoweb/apitogo/icons";
+import { createContext, useContext, useEffect, useState } from "react";
+import { cn, createPlugin } from "@lukoweb/apitogo";
+import { Link, Navigate, Outlet, useNavigate, useSearchParams } from "@lukoweb/apitogo/router";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@lukoweb/apitogo/ui/AlertDialog.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMutation, useQuery, useQueryClient } from "@lukoweb/apitogo/react-query";
 import { useAuth } from "@lukoweb/apitogo/hooks";
-import { useQuery } from "@lukoweb/apitogo/react-query";
 import { Alert, AlertAction, AlertDescription } from "@lukoweb/apitogo/ui/Alert";
 import { Button as Button$1 } from "@lukoweb/apitogo/ui/Button";
+import { Secret } from "@lukoweb/apitogo/ui/Secret.js";
 
-//#region src/DevPortalBillingContext.tsx
-const DevPortalBillingContext = createContext({});
-const DevPortalBillingProvider = ({ options, children }) => /* @__PURE__ */ jsx(DevPortalBillingContext.Provider, {
-	value: options,
-	children
-});
-const useDevPortalBillingConfig = () => useContext(DevPortalBillingContext);
-
-//#endregion
-//#region src/DevPortalBillingWrapper.tsx
-const DevPortalBillingWrapper = ({ options = {} }) => /* @__PURE__ */ jsx(DevPortalBillingProvider, {
-	options,
-	children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Outlet, {}) })
-});
-
-//#endregion
-//#region src/components/RedirectPage.tsx
-const RedirectPage = ({ icon: Icon, title, description, url, children }) => {
-	useEffect(() => {
-		if (url) window.location.assign(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: "h-12 w-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__ */ 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/utils/dev-portal-api.ts
 const DEV_PORTAL_PLACEHOLDER_API_URL = "https://dp-example.azurecontainerapps.io";
 function resolveDevPortalApiBaseUrl(configuredUrl) {
@@ -138,6 +82,99 @@ function isActiveSubscription(status) {
 	return status.toLowerCase() === "active";
 }
 
+//#endregion
+//#region src/components/PricingCard.tsx
+const PricingCard = ({ plan, mode = "public", subscriptionStatus, isSubscribed = false, onUnsubscribe, isCanceling = false, cancelDisabled = false }) => {
+	const limitsSummary = summarizeLimits(plan.limitsJson);
+	const isActive = isSubscribed || isActiveSubscription(subscriptionStatus ?? "");
+	return /* @__PURE__ */ jsxs("article", {
+		className: cn("flex w-full max-w-sm flex-col rounded-xl border bg-card/60 p-6 shadow-xs", isActive && mode === "account" && "border-primary/40 ring-1 ring-primary/20"),
+		"data-testid": `pricing-card-${plan.sku}`,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start justify-between gap-2",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-xl font-semibold",
+					children: plan.displayName
+				}), isActive && mode === "account" ? /* @__PURE__ */ jsx("span", {
+					className: "shrink-0 rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary",
+					"data-testid": `subscribed-badge-${plan.sku}`,
+					children: "Subscribed"
+				}) : null]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "mt-2 text-3xl font-bold",
+				children: formatPlanPrice(plan)
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "mt-1 text-sm text-muted-foreground",
+				children: formatBillingPeriod(plan.billingPeriod)
+			}),
+			limitsSummary ? /* @__PURE__ */ jsx("p", {
+				className: "mt-4 text-sm text-muted-foreground",
+				children: limitsSummary
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: "mt-6 space-y-2",
+				children: mode === "account" ? isActive ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(Button, {
+						variant: "secondary",
+						className: "w-full",
+						disabled: true,
+						children: "Current plan"
+					}),
+					onUnsubscribe ? /* @__PURE__ */ jsxs(AlertDialog, { children: [/* @__PURE__ */ jsx(AlertDialogTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							className: "w-full",
+							disabled: cancelDisabled || isCanceling,
+							"data-testid": `unsubscribe-${plan.sku}`,
+							children: isCanceling ? "Canceling…" : "Unsubscribe"
+						})
+					}), /* @__PURE__ */ jsxs(AlertDialogContent, { children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsxs(AlertDialogTitle, { children: [
+						"Unsubscribe from ",
+						plan.displayName,
+						"?"
+					] }), /* @__PURE__ */ jsx(AlertDialogDescription, { children: "Your API access for this plan will be revoked. You can subscribe again later." })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, { children: "Keep subscription" }), /* @__PURE__ */ jsx(AlertDialogAction, {
+						onClick: () => onUnsubscribe(plan.sku),
+						disabled: isCanceling,
+						children: "Unsubscribe"
+					})] })] })] }) : null,
+					cancelDisabled ? /* @__PURE__ */ jsx("p", {
+						className: "text-center text-xs text-muted-foreground",
+						children: "Unsubscribe is available after the portal is published."
+					}) : null
+				] }) : /* @__PURE__ */ jsx(Button, {
+					variant: "default",
+					className: "w-full",
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Link, {
+						to: `/checkout?planSku=${encodeURIComponent(plan.sku)}`,
+						children: plan.isFree ? "Get started" : "Subscribe"
+					})
+				}) : isActive ? /* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					className: "w-full",
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Link, {
+						to: "/account/subscriptions",
+						children: "Manage subscription"
+					})
+				}) : /* @__PURE__ */ jsx(Button, {
+					variant: "default",
+					className: "w-full",
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Link, {
+						to: `/checkout?planSku=${encodeURIComponent(plan.sku)}`,
+						children: plan.isFree ? "Get started" : "Subscribe"
+					})
+				})
+			})
+		]
+	});
+};
+
 //#endregion
 //#region src/hooks/useDevPortalApiBaseUrl.ts
 function useDevPortalApiBaseUrl() {
@@ -152,8 +189,221 @@ function useDevPortalPreviewMode() {
 	return isPlaceholderDevPortalApiUrl(apiBaseUrl);
 }
 
+//#endregion
+//#region src/hooks/useCancelSubscription.ts
+function useCancelSubscription() {
+	const apiBaseUrl = useDevPortalApiBaseUrl();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: async (planSku) => {
+			if (!apiBaseUrl) throw new Error("Dev portal API is not configured.");
+			const response = await fetch(`${apiBaseUrl}/api/v1/subscriptions/cancel`, {
+				method: "POST",
+				headers: {
+					Accept: "application/json",
+					"Content-Type": "application/json"
+				},
+				credentials: "include",
+				body: JSON.stringify({ planSku })
+			});
+			if (!response.ok) {
+				const detail = await response.text();
+				throw new Error(detail || "Failed to cancel subscription.");
+			}
+			return await response.json();
+		},
+		onSuccess: async () => {
+			await queryClient.invalidateQueries({ queryKey: ["dev-portal-me", apiBaseUrl] });
+		}
+	});
+}
+
+//#endregion
+//#region src/hooks/useMySubscriptions.ts
+function useMySubscriptions() {
+	const auth = useAuth();
+	const apiBaseUrl = useDevPortalApiBaseUrl();
+	const isPreview = useDevPortalPreviewMode();
+	return useQuery({
+		queryKey: ["dev-portal-me", apiBaseUrl],
+		enabled: auth.isAuthenticated && !isPreview && Boolean(apiBaseUrl),
+		queryFn: async () => {
+			const response = await fetch(`${apiBaseUrl}/api/v1/auth/me`, {
+				method: "GET",
+				headers: { Accept: "application/json" },
+				credentials: "include"
+			});
+			if (!response.ok) throw new Error("Failed to load subscription status.");
+			return await response.json();
+		}
+	});
+}
+
+//#endregion
+//#region src/hooks/usePlans.ts
+function usePlans() {
+	const apiBaseUrl = useDevPortalApiBaseUrl();
+	const isPreview = useDevPortalPreviewMode();
+	return useQuery({
+		queryKey: [
+			"dev-portal-plans",
+			apiBaseUrl,
+			isPreview
+		],
+		queryFn: async () => {
+			if (isPreview) return parseMockPlans();
+			if (!apiBaseUrl) return { plans: [] };
+			const response = await fetch(`${apiBaseUrl}/api/v1/plans`, { headers: { Accept: "application/json" } });
+			if (!response.ok) throw new Error("Failed to load plans.");
+			return await response.json();
+		}
+	});
+}
+
+//#endregion
+//#region src/pages/AccountPlansPage.tsx
+const AccountPlansPage = () => {
+	const isPreview = useDevPortalPreviewMode();
+	const { data: catalog, isLoading, isError } = usePlans();
+	const { data: me } = useMySubscriptions();
+	const cancelMutation = useCancelSubscription();
+	const [cancelingSku, setCancelingSku] = useState(null);
+	const subscriptionBySku = new Map((me?.subscriptions ?? []).map((sub) => [sub.planSku, sub]));
+	const handleUnsubscribe = async (planSku) => {
+		setCancelingSku(planSku);
+		try {
+			await cancelMutation.mutateAsync(planSku);
+		} finally {
+			setCancelingSku(null);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mx-auto max-w-screen-xl px-4 pb-16 pt-(--padding-content-top) lg:px-8",
+		children: [
+			/* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx("title", { children: "Plans & billing" }) }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-8 flex items-start gap-4",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex size-12 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary",
+					children: /* @__PURE__ */ jsx(CreditCardIcon, { size: 24 })
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "space-y-1",
+					children: [/* @__PURE__ */ jsx("h1", {
+						className: "text-3xl font-semibold tracking-tight",
+						children: "Plans & billing"
+					}), /* @__PURE__ */ jsx("p", {
+						className: "max-w-2xl text-muted-foreground",
+						children: "Compare plans, manage your subscriptions, and change tiers."
+					})]
+				})]
+			}),
+			isPreview ? /* @__PURE__ */ jsx("div", {
+				className: "mb-8 rounded-xl border border-dashed bg-muted/20 p-6 text-center text-sm text-muted-foreground",
+				children: "Local preview uses mock plans. Subscribe and unsubscribe activate after the portal is published."
+			}) : null,
+			cancelMutation.isError ? /* @__PURE__ */ jsx("div", {
+				className: "mb-6 rounded-xl border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive",
+				children: cancelMutation.error instanceof Error ? cancelMutation.error.message : "Failed to cancel subscription."
+			}) : null,
+			isLoading ? /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground",
+				children: "Loading plans…"
+			}) : null,
+			isError ? /* @__PURE__ */ jsx("p", {
+				className: "text-destructive",
+				children: "Unable to load plans."
+			}) : null,
+			catalog && catalog.plans.length > 0 ? /* @__PURE__ */ jsx("div", {
+				className: "grid grid-cols-1 justify-center gap-6 sm:grid-cols-[repeat(auto-fit,minmax(280px,max-content))]",
+				children: catalog.plans.map((plan) => {
+					const subscription = subscriptionBySku.get(plan.sku);
+					const isSubscribed = isActiveSubscription(subscription?.status ?? "");
+					return /* @__PURE__ */ jsx(PricingCard, {
+						plan,
+						mode: "account",
+						subscriptionStatus: subscription?.status,
+						isSubscribed,
+						onUnsubscribe: isPreview ? void 0 : handleUnsubscribe,
+						isCanceling: cancelingSku === plan.sku,
+						cancelDisabled: isPreview
+					}, plan.sku);
+				})
+			}) : !isLoading && !isError ? /* @__PURE__ */ jsx("div", {
+				className: "rounded-xl border border-dashed p-8 text-center text-sm text-muted-foreground",
+				children: "No plans are available yet. Sync plans from your APItoGo manifest or platform gateway."
+			}) : null
+		]
+	});
+};
+
+//#endregion
+//#region src/DevPortalBillingContext.tsx
+const DevPortalBillingContext = createContext({});
+const DevPortalBillingProvider = ({ options, children }) => /* @__PURE__ */ jsx(DevPortalBillingContext.Provider, {
+	value: options,
+	children
+});
+const useDevPortalBillingConfig = () => useContext(DevPortalBillingContext);
+
+//#endregion
+//#region src/DevPortalBillingWrapper.tsx
+const DevPortalBillingWrapper = ({ options = {} }) => /* @__PURE__ */ jsx(DevPortalBillingProvider, {
+	options,
+	children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Outlet, {}) })
+});
+
+//#endregion
+//#region src/components/RedirectPage.tsx
+const RedirectPage = ({ icon: Icon, title, description, url, children }) => {
+	useEffect(() => {
+		if (url) window.location.assign(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: "h-12 w-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__ */ 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/paths.ts
+const PRICING_PATH = "/pricing";
+const CHECKOUT_PATH = "/checkout";
+const SUBSCRIPTIONS_PATH = "/account/subscriptions";
+const CREDENTIALS_PATH = "/account/credentials";
+
 //#endregion
 //#region src/pages/CheckoutPage.tsx
+const ACCOUNT_PLANS_PATH = "/account/plans";
 const CheckoutPage = () => {
 	const [searchParams] = useSearchParams();
 	const planSku = searchParams.get("planSku") ?? "";
@@ -161,6 +411,7 @@ const CheckoutPage = () => {
 	const auth = useAuth();
 	const apiBaseUrl = useDevPortalApiBaseUrl();
 	const isPreview = useDevPortalPreviewMode();
+	const plansPath = auth.isAuthenticated ? ACCOUNT_PLANS_PATH : PRICING_PATH;
 	const checkoutQuery = useQuery({
 		queryKey: [
 			"dev-portal-checkout",
@@ -197,9 +448,9 @@ const CheckoutPage = () => {
 			"Missing plan SKU.",
 			" ",
 			/* @__PURE__ */ jsx(Link, {
-				to: "/pricing",
+				to: plansPath,
 				className: "text-primary underline",
-				children: "Back to pricing"
+				children: "Back to plans"
 			})
 		]
 	});
@@ -218,8 +469,8 @@ const CheckoutPage = () => {
 				asChild: true,
 				variant: "outline",
 				children: /* @__PURE__ */ jsx(Link, {
-					to: "/pricing",
-					children: "Back to pricing"
+					to: plansPath,
+					children: "Back to plans"
 				})
 			})
 		]
@@ -240,8 +491,8 @@ const CheckoutPage = () => {
 				size: "xs",
 				asChild: true,
 				children: /* @__PURE__ */ jsx(Link, {
-					to: "/pricing",
-					children: "Back to pricing"
+					to: plansPath,
+					children: "Back to plans"
 				})
 			}) })]
 		}) : null
@@ -249,94 +500,181 @@ const CheckoutPage = () => {
 };
 
 //#endregion
-//#region src/components/PricingCard.tsx
-const PricingCard = ({ plan, isSubscribed = false }) => {
-	const limitsSummary = summarizeLimits(plan.limitsJson);
-	return /* @__PURE__ */ jsxs("article", {
-		className: cn("flex w-full max-w-sm flex-col rounded-xl border bg-card/60 p-6 shadow-xs"),
-		"data-testid": `pricing-card-${plan.sku}`,
-		children: [
-			/* @__PURE__ */ jsx("h2", {
-				className: "text-xl font-semibold",
-				children: plan.displayName
-			}),
-			/* @__PURE__ */ jsx("p", {
-				className: "mt-2 text-3xl font-bold",
-				children: formatPlanPrice(plan)
-			}),
-			/* @__PURE__ */ jsx("p", {
-				className: "mt-1 text-sm text-muted-foreground",
-				children: formatBillingPeriod(plan.billingPeriod)
-			}),
-			limitsSummary ? /* @__PURE__ */ jsx("p", {
-				className: "mt-4 text-sm text-muted-foreground",
-				children: limitsSummary
-			}) : null,
-			/* @__PURE__ */ jsx("div", {
-				className: "mt-6",
-				children: isSubscribed ? /* @__PURE__ */ jsx(Button, {
-					variant: "secondary",
-					className: "w-full",
-					asChild: true,
-					children: /* @__PURE__ */ jsx(Link, {
-						to: "/account/subscriptions",
-						children: "Manage subscription"
-					})
-				}) : /* @__PURE__ */ jsx(Button, {
-					variant: "default",
-					className: "w-full",
-					asChild: true,
-					children: /* @__PURE__ */ jsx(Link, {
-						to: `/checkout?planSku=${encodeURIComponent(plan.sku)}`,
-						children: plan.isFree ? "Get started" : "Subscribe"
-					})
-				})
-			})
-		]
-	});
-};
-
-//#endregion
-//#region src/hooks/useMySubscriptions.ts
-function useMySubscriptions() {
+//#region src/hooks/useCredentials.ts
+function useCredentials() {
 	const auth = useAuth();
 	const apiBaseUrl = useDevPortalApiBaseUrl();
 	const isPreview = useDevPortalPreviewMode();
 	return useQuery({
-		queryKey: ["dev-portal-me", apiBaseUrl],
+		queryKey: ["dev-portal-credentials", apiBaseUrl],
 		enabled: auth.isAuthenticated && !isPreview && Boolean(apiBaseUrl),
 		queryFn: async () => {
-			const response = await fetch(`${apiBaseUrl}/api/v1/auth/me`, {
+			const response = await fetch(`${apiBaseUrl}/api/v1/credentials`, {
 				method: "GET",
 				headers: { Accept: "application/json" },
 				credentials: "include"
 			});
-			if (!response.ok) throw new Error("Failed to load subscription status.");
+			if (response.status === 404) throw new Error("NO_ENTITLEMENT");
+			if (!response.ok) throw new Error("Failed to load API credentials.");
 			return await response.json();
-		}
+		},
+		retry: (failureCount, error) => error instanceof Error && error.message === "NO_ENTITLEMENT" ? false : failureCount < 2
 	});
 }
 
 //#endregion
-//#region src/hooks/usePlans.ts
-function usePlans() {
-	const apiBaseUrl = useDevPortalApiBaseUrl();
+//#region src/pages/CredentialsPage.tsx
+const CredentialsPage = () => {
+	const auth = useAuth();
 	const isPreview = useDevPortalPreviewMode();
-	return useQuery({
-		queryKey: [
-			"dev-portal-plans",
-			apiBaseUrl,
-			isPreview
-		],
-		queryFn: async () => {
-			if (isPreview) return parseMockPlans();
-			if (!apiBaseUrl) return { plans: [] };
-			const response = await fetch(`${apiBaseUrl}/api/v1/plans`, { headers: { Accept: "application/json" } });
-			if (!response.ok) throw new Error("Failed to load plans.");
-			return await response.json();
-		}
+	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);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mx-auto max-w-screen-lg px-4 pb-16 pt-(--padding-content-top) lg:px-8",
+		children: [
+			/* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx("title", { children: "API credentials" }) }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-8 flex items-start gap-4",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex size-12 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary",
+					children: /* @__PURE__ */ jsx(KeyRoundIcon, { size: 24 })
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "space-y-1",
+					children: [/* @__PURE__ */ jsx("h1", {
+						className: "text-3xl font-semibold tracking-tight",
+						children: "API credentials"
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground",
+						children: "Use your subscription key to authenticate requests to the API gateway."
+					})]
+				})]
+			}),
+			isPreview ? /* @__PURE__ */ jsx("div", {
+				className: "rounded-xl border border-dashed p-8 text-center",
+				children: /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground",
+					children: "API credentials are available after the developer portal is published."
+				})
+			}) : null,
+			!isPreview && !auth.isAuthenticated ? /* @__PURE__ */ jsxs("div", {
+				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."
+				}), /* @__PURE__ */ jsx(Button$1, {
+					className: "mt-4",
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Link, {
+						to: "/account/plans",
+						children: "View plans"
+					})
+				})]
+			}) : null,
+			!isPreview && auth.isAuthenticated && isLoading ? /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground",
+				children: "Loading credentials…"
+			}) : null,
+			!isPreview && auth.isAuthenticated && error ? /* @__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."
+				}), /* @__PURE__ */ jsx(Button$1, {
+					className: "mt-4",
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Link, {
+						to: "/account/plans",
+						children: "View plans"
+					})
+				})]
+			}) : null,
+			!isPreview && credentials ? /* @__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
+							})]
+						})
+					}),
+					/* @__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: "Subscription key"
+							}), /* @__PURE__ */ jsxs("p", {
+								className: "text-sm text-muted-foreground",
+								children: [
+									"Send this value in the",
+									" ",
+									/* @__PURE__ */ jsx("code", {
+										className: "rounded bg-muted px-1 py-0.5 text-xs",
+										children: "Ocp-Apim-Subscription-Key"
+									}),
+									" ",
+									"header when calling the gateway."
+								]
+							})]
+						}), /* @__PURE__ */ jsx(Secret, {
+							className: "max-w-full w-full",
+							secret: credentials.subscriptionKey,
+							status: "active",
+							revealed,
+							onReveal: setRevealed
+						})]
+					}),
+					/* @__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."
+							})]
+						}), /* @__PURE__ */ jsx(Secret, {
+							className: "max-w-full w-full",
+							secret: credentials.gatewayBaseUrl,
+							status: "none",
+							noReveal: true
+						})]
+					})
+				]
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-8 flex flex-wrap gap-3",
+				children: [/* @__PURE__ */ jsx(Button$1, {
+					variant: "outline",
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Link, {
+						to: "/account/subscriptions",
+						children: "My subscriptions"
+					})
+				}), /* @__PURE__ */ jsx(Button$1, {
+					variant: "outline",
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Link, {
+						to: "/api",
+						children: "API reference"
+					})
+				})]
+			})
+		]
 	});
-}
+};
 
 //#endregion
 //#region src/pages/PricingPage.tsx
@@ -346,6 +684,10 @@ const PricingPage = () => {
 	const isPreview = useDevPortalPreviewMode();
 	const { data: catalog, isLoading, isError } = usePlans();
 	const { data: me } = useMySubscriptions();
+	if (auth.isAuthenticated) return /* @__PURE__ */ jsx(Navigate, {
+		to: "/account/plans",
+		replace: true
+	});
 	const activeSkus = new Set((me?.subscriptions ?? []).filter((sub) => isActiveSubscription(sub.status)).map((sub) => sub.planSku));
 	const title = pricing?.title ?? "Pricing";
 	const subtitle = pricing?.subtitle ?? "Compare plans and subscribe when you are ready to integrate.";
@@ -392,22 +734,12 @@ const PricingPage = () => {
 				className: "grid grid-cols-1 justify-center gap-6 sm:grid-cols-[repeat(auto-fit,minmax(280px,max-content))]",
 				children: catalog.plans.map((plan) => /* @__PURE__ */ jsx(PricingCard, {
 					plan,
+					mode: "public",
 					isSubscribed: activeSkus.has(plan.sku)
 				}, plan.sku))
 			}) : !isLoading && !isError ? /* @__PURE__ */ jsx("div", {
 				className: "mx-auto max-w-lg rounded-xl border border-dashed p-8 text-center text-sm text-muted-foreground",
 				children: "No plans are available yet. Sync plans from your APItoGo manifest or platform gateway."
-			}) : null,
-			auth.isAuthenticated ? /* @__PURE__ */ jsx("div", {
-				className: "mt-10 text-center",
-				children: /* @__PURE__ */ jsx(Button$1, {
-					variant: "outline",
-					asChild: true,
-					children: /* @__PURE__ */ jsx(Link, {
-						to: "/account/plans",
-						children: "Manage billing"
-					})
-				})
 			}) : null
 		]
 	});
@@ -437,9 +769,18 @@ const SubscriptionsPage = () => {
 					children: "Review your active plans and manage billing."
 				})]
 			}),
-			checkoutSuccess ? /* @__PURE__ */ jsx("div", {
+			checkoutSuccess ? /* @__PURE__ */ jsxs("div", {
 				className: "mb-6 rounded-xl border border-green-500/30 bg-green-500/10 p-4 text-sm",
-				children: "Your subscription is active. API credentials are available from your account dashboard."
+				children: [
+					"Your subscription is active.",
+					" ",
+					/* @__PURE__ */ jsx(Link, {
+						to: CREDENTIALS_PATH,
+						className: "font-medium underline",
+						children: "View your API credentials"
+					}),
+					"."
+				]
 			}) : null,
 			isLoading ? /* @__PURE__ */ jsx("p", {
 				className: "text-muted-foreground",
@@ -454,7 +795,7 @@ const SubscriptionsPage = () => {
 					className: "mt-4",
 					asChild: true,
 					children: /* @__PURE__ */ jsx(Link, {
-						to: "/pricing",
+						to: "/account/plans",
 						children: "View plans"
 					})
 				})]
@@ -500,7 +841,7 @@ const SubscriptionsPage = () => {
 						variant: "outline",
 						asChild: true,
 						children: /* @__PURE__ */ jsx(Link, {
-							to: "/pricing",
+							to: "/account/plans",
 							children: "Change plan"
 						})
 					}),
@@ -516,8 +857,8 @@ const SubscriptionsPage = () => {
 						variant: "secondary",
 						asChild: true,
 						children: /* @__PURE__ */ jsx(Link, {
-							to: "/account/dashboard",
-							children: "Account dashboard"
+							to: CREDENTIALS_PATH,
+							children: "API credentials"
 						})
 					}) : null
 				]
@@ -528,13 +869,11 @@ const SubscriptionsPage = () => {
 
 //#endregion
 //#region src/DevPortalBillingPlugin.tsx
-const PRICING_PATH = "/pricing";
-const CHECKOUT_PATH = "/checkout";
-const SUBSCRIPTIONS_PATH = "/account/subscriptions";
 const devPortalBillingPlugin = createPlugin((options = {}) => ({
 	transformConfig: ({ config, merge }) => merge({ header: { navigation: [...config.header?.navigation ?? [], {
 		label: "Pricing",
-		to: PRICING_PATH
+		to: PRICING_PATH,
+		display: "anon"
 	}] } }),
 	getProfileMenuItems: () => [{
 		label: "My Subscriptions",
@@ -542,6 +881,12 @@ const devPortalBillingPlugin = createPlugin((options = {}) => ({
 		icon: StarsIcon,
 		category: "middle",
 		weight: 25
+	}, {
+		label: "API credentials",
+		path: CREDENTIALS_PATH,
+		icon: KeyRoundIcon,
+		category: "middle",
+		weight: 26
 	}],
 	getRoutes: () => [{
 		element: /* @__PURE__ */ jsx(DevPortalBillingWrapper, { options }),
@@ -561,11 +906,20 @@ const devPortalBillingPlugin = createPlugin((options = {}) => ({
 				path: SUBSCRIPTIONS_PATH,
 				handle: { layout: "default" },
 				element: /* @__PURE__ */ jsx(SubscriptionsPage, {})
+			},
+			{
+				path: CREDENTIALS_PATH,
+				handle: { layout: "default" },
+				element: /* @__PURE__ */ jsx(CredentialsPage, {})
 			}
 		]
 	}],
-	getProtectedRoutes: () => [CHECKOUT_PATH, SUBSCRIPTIONS_PATH]
+	getProtectedRoutes: () => [
+		CHECKOUT_PATH,
+		SUBSCRIPTIONS_PATH,
+		CREDENTIALS_PATH
+	]
 }));
 
 //#endregion
-export { CHECKOUT_PATH, PRICING_PATH, SUBSCRIPTIONS_PATH, devPortalBillingPlugin };
+export { AccountPlansPage, CHECKOUT_PATH, CREDENTIALS_PATH, PRICING_PATH, SUBSCRIPTIONS_PATH, devPortalBillingPlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukoweb/apitogo-plugin-dev-portal-billing",
-  "version": "0.1.38",
+  "version": "0.1.40",
   "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.38"
+    "@lukoweb/apitogo": "0.1.40"
   },
   "peerDependencies": {
     "react": ">=19.2.0",