@lukoweb/apitogo-plugin-dev-portal-billing 0.1.37 → 0.1.39

package/dist/index.d.mts

@@ -8,10 +8,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 { CHECKOUT_PATH, CREDENTIALS_PATH, PRICING_PATH, SUBSCRIPTIONS_PATH, devPortalBillingPlugin };

package/dist/index.mjs

@@ -1,13 +1,14 @@
 import { cn, createPlugin } from "@lukoweb/apitogo";
-import { ShieldIcon, StarsIcon } from "@lukoweb/apitogo/icons";
+import { KeyRoundIcon, 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 { createContext, useContext, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 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({});
@@ -248,6 +249,204 @@ const CheckoutPage = () => {
 	});
 };
 
+//#endregion
+//#region src/hooks/useCredentials.ts
+function useCredentials() {
+	const auth = useAuth();
+	const apiBaseUrl = useDevPortalApiBaseUrl();
+	const isPreview = useDevPortalPreviewMode();
+	return useQuery({
+		queryKey: ["dev-portal-credentials", apiBaseUrl],
+		enabled: auth.isAuthenticated && !isPreview && Boolean(apiBaseUrl),
+		queryFn: async () => {
+			const response = await fetch(`${apiBaseUrl}/api/v1/credentials`, {
+				method: "GET",
+				headers: { Accept: "application/json" },
+				credentials: "include"
+			});
+			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();
+	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/CredentialsPage.tsx
+const CredentialsPage = () => {
+	const auth = useAuth();
+	const isPreview = useDevPortalPreviewMode();
+	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: "/pricing",
+						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: "/pricing",
+						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/components/PricingCard.tsx
 const PricingCard = ({ plan, isSubscribed = false }) => {
@@ -317,27 +516,6 @@ function useMySubscriptions() {
 	});
 }
 
-//#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/PricingPage.tsx
 const PricingPage = () => {
@@ -413,6 +591,13 @@ const PricingPage = () => {
 	});
 };
 
+//#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/SubscriptionsPage.tsx
 const SubscriptionsPage = () => {
@@ -437,9 +622,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",
@@ -516,8 +710,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,9 +722,6 @@ 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",
@@ -542,6 +733,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 +758,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 { 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.37",
+  "version": "0.1.39",
   "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.37"
+    "@lukoweb/apitogo": "0.1.39"
   },
   "peerDependencies": {
     "react": ">=19.2.0",