@lukoweb/apitogo-plugin-dev-portal-billing 0.2.30 → 0.2.34

package/dist/AccountPlansPage-CXOfTwlX.mjs

@@ -0,0 +1,208 @@
+import { c as isActiveSubscription, n as useDevPortalPreviewMode, p as parseManifestPlans, r as useIsDemoSession, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-CgygF2z5.mjs";
+import { t as PricingCard } from "./PricingCard-Wra2FUX9.mjs";
+import { n as useDevPortalBillingConfig } from "./DevPortalBillingContext-CR83s4LO.mjs";
+import { t as useMySubscriptions } from "./useMySubscriptions-CLh3eFY4.mjs";
+import { t as usePlans } from "./usePlans-DUex2tzT.mjs";
+import { Head } from "@lukoweb/apitogo/components";
+import { CreditCardIcon } from "@lukoweb/apitogo/icons";
+import { useSearchParams } from "@lukoweb/apitogo/router";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMutation, useQueryClient } from "@lukoweb/apitogo/react-query";
+
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (!no_symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
+	return target;
+};
+
+//#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/useChangePlan.ts
+function useChangePlan() {
+	const apiBaseUrl = useDevPortalApiBaseUrl();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: async ({ fromPlanSku, toPlanSku }) => {
+			if (!apiBaseUrl) throw new Error("Dev portal API is not configured.");
+			const response = await fetch(`${apiBaseUrl}/api/v1/subscriptions/change`, {
+				method: "POST",
+				headers: {
+					Accept: "application/json",
+					"Content-Type": "application/json"
+				},
+				credentials: "include",
+				body: JSON.stringify({
+					fromPlanSku,
+					toPlanSku
+				})
+			});
+			if (!response.ok) {
+				const detail = await response.text();
+				throw new Error(detail || "Failed to change plan.");
+			}
+			return await response.json();
+		},
+		onSuccess: async (result) => {
+			if (result.checkoutUrl) {
+				window.location.assign(result.checkoutUrl);
+				return;
+			}
+			await queryClient.invalidateQueries({ queryKey: ["dev-portal-me", apiBaseUrl] });
+		}
+	});
+}
+
+//#endregion
+//#region src/pages/AccountPlansPage.tsx
+var AccountPlansPage_exports = /* @__PURE__ */ __exportAll({ default: () => AccountPlansPage });
+const AccountPlansPage = () => {
+	const [searchParams] = useSearchParams();
+	const checkoutCancelled = searchParams.get("checkout") === "cancelled";
+	const { previewPlans } = useDevPortalBillingConfig();
+	const isPreview = useDevPortalPreviewMode();
+	const isDemoSession = useIsDemoSession();
+	const livePlans = usePlans();
+	const catalog = isPreview ? parseManifestPlans(previewPlans) : livePlans.data;
+	const isLoading = isPreview ? false : livePlans.isLoading;
+	const isError = isPreview ? false : livePlans.isError;
+	const { data: me } = useMySubscriptions();
+	const cancelMutation = useCancelSubscription();
+	const changeMutation = useChangePlan();
+	const [cancelingSku, setCancelingSku] = useState(null);
+	const [switchingSku, setSwitchingSku] = useState(null);
+	const subscriptionBySku = new Map((me?.subscriptions ?? []).map((sub) => [sub.planSku, sub]));
+	const activePlanSkus = (me?.subscriptions ?? []).filter((sub) => isActiveSubscription(sub.status)).map((sub) => sub.planSku);
+	const currentPlanSku = activePlanSkus.length === 1 ? activePlanSkus[0] : null;
+	const handleSwitch = async (toPlanSku) => {
+		if (!currentPlanSku) return;
+		setSwitchingSku(toPlanSku);
+		try {
+			await changeMutation.mutateAsync({
+				fromPlanSku: currentPlanSku,
+				toPlanSku
+			});
+		} finally {
+			setSwitchingSku(null);
+		}
+	};
+	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."
+						}),
+						checkoutCancelled ? /* @__PURE__ */ jsx("p", {
+							className: "max-w-2xl text-sm text-muted-foreground",
+							children: "Checkout was cancelled and you were not charged."
+						}) : null
+					]
+				})]
+			}),
+			isDemoSession ? /* @__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 demo mode shows plans from your manifest with a sample active subscription. Billing actions activate after publish."
+			}) : 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,
+			changeMutation.isError ? /* @__PURE__ */ jsx("div", {
+				className: "mb-6 rounded-xl border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive",
+				children: changeMutation.error instanceof Error ? changeMutation.error.message : "Failed to change plan."
+			}) : 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 || isDemoSession ? void 0 : handleUnsubscribe,
+						onSwitch: currentPlanSku && !isPreview && !isDemoSession ? handleSwitch : void 0,
+						isSwitching: switchingSku === plan.sku,
+						isCanceling: cancelingSku === plan.sku,
+						cancelDisabled: isPreview || isDemoSession
+					}, 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 API ToGo manifest or platform gateway."
+			}) : null
+		]
+	});
+};
+
+//#endregion
+export { AccountPlansPage_exports as n, AccountPlansPage as t };

package/dist/ApiKeysPanel-DrArkHXf.mjs

@@ -0,0 +1,285 @@
+import { n as useDevPortalPreviewMode, r as useIsDemoSession, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-CgygF2z5.mjs";
+import { n as useDevPortalBillingConfig } from "./DevPortalBillingContext-CR83s4LO.mjs";
+import { t as createDemoApiKeys } from "./demo-session-Cez740bi.mjs";
+import { Spinner } from "@lukoweb/apitogo/components";
+import { KeyRoundIcon, TrashIcon } from "@lukoweb/apitogo/icons";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMutation, useQuery, useQueryClient } from "@lukoweb/apitogo/react-query";
+import { useAuth } from "@lukoweb/apitogo/hooks";
+import { Button as Button$1 } from "@lukoweb/apitogo/ui/Button.js";
+import { Alert, AlertTitle } from "@lukoweb/apitogo/ui/Alert.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";
+
+//#region src/hooks/useApiKeys.ts
+/** Thrown when the developer has hit their plan's per-developer key cap. */
+const API_KEY_CAP_REACHED = "API_KEY_CAP_REACHED";
+function apiKeysQueryKey(apiBaseUrl) {
+	return ["dev-portal-api-keys", apiBaseUrl];
+}
+function useApiKeys() {
+	const auth = useAuth();
+	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),
+		queryFn: async () => {
+			const response = await fetch(`${apiBaseUrl}/api/v1/api-keys`, {
+				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 keys.");
+			return await response.json();
+		},
+		retry: (failureCount, error) => error instanceof Error && error.message === "NO_ENTITLEMENT" ? false : failureCount < 2
+	});
+	if (isDemoSession && auth.isAuthenticated) return {
+		...liveQuery,
+		data: createDemoApiKeys(previewPlans),
+		error: null,
+		isError: false,
+		isFetching: false,
+		isLoading: false,
+		isPending: false,
+		isSuccess: true,
+		status: "success"
+	};
+	return liveQuery;
+}
+function useCreateApiKey() {
+	const apiBaseUrl = useDevPortalApiBaseUrl();
+	const queryClient = useQueryClient();
+	return useMutation({
+		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",
+				headers: {
+					Accept: "application/json",
+					"Content-Type": "application/json"
+				},
+				credentials: "include",
+				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.");
+			return await response.json();
+		},
+		onSuccess: async () => {
+			await queryClient.invalidateQueries({ queryKey: apiKeysQueryKey(apiBaseUrl) });
+		}
+	});
+}
+function useRevokeApiKey() {
+	const apiBaseUrl = useDevPortalApiBaseUrl();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: async (keyId) => {
+			if (!apiBaseUrl) throw new Error("Dev portal API is not configured.");
+			const response = await fetch(`${apiBaseUrl}/api/v1/api-keys/${keyId}`, {
+				method: "DELETE",
+				headers: { Accept: "application/json" },
+				credentials: "include"
+			});
+			if (!response.ok && response.status !== 204) throw new Error(await readProblemDetail(response) ?? "Failed to revoke API key.");
+		},
+		onSuccess: async () => {
+			await queryClient.invalidateQueries({ queryKey: apiKeysQueryKey(apiBaseUrl) });
+		}
+	});
+}
+async function readProblemDetail(response) {
+	try {
+		return (await response.json()).detail?.trim() || null;
+	} catch {
+		return null;
+	}
+}
+
+//#endregion
+//#region src/components/ApiKeysPanel.tsx
+/**
+* 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 = ({ 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 = 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({
+			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: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-start justify-between gap-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "space-y-1",
+					children: [/* @__PURE__ */ jsxs("h2", {
+						className: "text-lg font-medium",
+						children: [plan.displayName, " API keys"]
+					}), /* @__PURE__ */ jsxs("p", {
+						className: "text-sm text-muted-foreground",
+						children: [
+							"Send a key in the",
+							" ",
+							/* @__PURE__ */ jsx("code", {
+								className: "rounded bg-muted px-1 py-0.5 text-xs",
+								children: header
+							}),
+							" ",
+							"header when calling this plan's endpoints. Keys share this plan's rate limit and key cap."
+						]
+					})]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "shrink-0 rounded-full border px-3 py-1 text-xs text-muted-foreground",
+					children: capLabel
+				})]
+			}),
+			newKey?.key ? /* @__PURE__ */ jsxs(Alert, { children: [
+				/* @__PURE__ */ jsx(KeyRoundIcon, { size: 16 }),
+				/* @__PURE__ */ jsx(AlertTitle, { children: "Copy your new key now — it is shown only once." }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "mt-3 space-y-3",
+					children: [/* @__PURE__ */ jsx(Secret, {
+						className: "max-w-full w-full",
+						secret: newKey.key,
+						status: "active"
+					}), /* @__PURE__ */ jsx(Button$1, {
+						variant: "outline",
+						onClick: () => setNewKey(null),
+						children: "Done"
+					})]
+				})
+			] }) : null,
+			createKey.isError ? /* @__PURE__ */ jsx(Alert, {
+				variant: "destructive",
+				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,
+			planActiveCount === 0 ? /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground",
+				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) => {
+					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()
+								]
+							})]
+						}), 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",
+				children: [/* @__PURE__ */ jsx(Input, {
+					className: "max-w-xs",
+					maxLength: 64,
+					placeholder: "Key name (e.g. production)",
+					"aria-label": `New API key name for ${plan.displayName}`,
+					value: name,
+					disabled: !canCreate || createKey.isPending,
+					onChange: (event) => setName(event.target.value),
+					onKeyDown: (event) => {
+						if (event.key === "Enter") handleCreate();
+					}
+				}), /* @__PURE__ */ jsx(Button$1, {
+					onClick: handleCreate,
+					disabled: !canCreate || createKey.isPending || !name.trim(),
+					className: "flex items-center gap-2",
+					children: createKey.isPending ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spinner, { size: 14 }), "Creating…"] }) : "Create API key"
+				})]
+			}),
+			plan && !plan.canCreate && !readOnly ? /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground",
+				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
+		]
+	});
+};
+
+//#endregion
+export { useRevokeApiKey as a, useCreateApiKey as i, API_KEY_CAP_REACHED as n, useApiKeys as r, ApiKeysPanel as t };

package/dist/CheckoutPage-CW_EBGog.mjs

@@ -0,0 +1,174 @@
+import { o as PRICING_PATH, t as ACCOUNT_PLANS_PATH } from "./paths-ujy9wjVK.mjs";
+import { n as useDevPortalPreviewMode, r as useIsDemoSession, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-CgygF2z5.mjs";
+import { t as FREE_CHECKOUT_MARKER } from "./billing-state-pnT0H1Lm.mjs";
+import { ShieldIcon } from "@lukoweb/apitogo/icons";
+import { Link, useNavigate, useSearchParams } from "@lukoweb/apitogo/router";
+import { useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useQuery } from "@lukoweb/apitogo/react-query";
+import { useAuth } from "@lukoweb/apitogo/hooks";
+import { Alert, AlertAction, AlertDescription } from "@lukoweb/apitogo/ui/Alert";
+import { Button } from "@lukoweb/apitogo/ui/Button";
+
+//#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/pages/CheckoutPage.tsx
+const CheckoutPage = () => {
+	const [searchParams] = useSearchParams();
+	const planSku = searchParams.get("planSku") ?? "";
+	const navigate = useNavigate();
+	const auth = useAuth();
+	const apiBaseUrl = useDevPortalApiBaseUrl();
+	const isPreview = useDevPortalPreviewMode();
+	const isDemoSession = useIsDemoSession();
+	const plansPath = auth.isAuthenticated ? ACCOUNT_PLANS_PATH : PRICING_PATH;
+	const checkoutQuery = useQuery({
+		queryKey: [
+			"dev-portal-checkout",
+			apiBaseUrl,
+			planSku,
+			auth.profile?.sub
+		],
+		enabled: Boolean(planSku) && !isPreview && !isDemoSession && auth.isAuthenticated && Boolean(apiBaseUrl),
+		retry: false,
+		queryFn: async () => {
+			const response = await fetch(`${apiBaseUrl}/api/v1/subscriptions/checkout`, {
+				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 || "Checkout failed.");
+			}
+			return await response.json();
+		}
+	});
+	const freeProvisioned = checkoutQuery.data?.checkoutUrl == null && checkoutQuery.data?.entitlementProvisioned === true;
+	useEffect(() => {
+		if (freeProvisioned) navigate(`/account/subscriptions?checkout=success&${FREE_CHECKOUT_MARKER}`, { replace: true });
+	}, [freeProvisioned, navigate]);
+	if (!planSku) return /* @__PURE__ */ jsxs("div", {
+		className: "mx-auto max-w-lg px-4 py-16 text-center text-muted-foreground",
+		children: [
+			"Missing plan SKU.",
+			" ",
+			/* @__PURE__ */ jsx(Link, {
+				to: plansPath,
+				className: "text-primary underline",
+				children: "Back to plans"
+			})
+		]
+	});
+	if (isDemoSession) return /* @__PURE__ */ jsxs("div", {
+		className: "mx-auto flex min-h-[50vh] max-w-lg flex-col items-center justify-center gap-4 px-4 text-center",
+		children: [
+			/* @__PURE__ */ jsx("h1", {
+				className: "text-2xl font-semibold tracking-tight",
+				children: "Demo checkout"
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground",
+				children: "Checkout is simulated in local demo mode. Publish your portal to API ToGo to complete real subscriptions and billing."
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				asChild: true,
+				variant: "outline",
+				children: /* @__PURE__ */ jsx(Link, {
+					to: "/account/subscriptions",
+					children: "View demo subscriptions"
+				})
+			})
+		]
+	});
+	if (isPreview) return /* @__PURE__ */ jsxs("div", {
+		className: "mx-auto flex min-h-[50vh] max-w-lg flex-col items-center justify-center gap-4 px-4 text-center",
+		children: [
+			/* @__PURE__ */ jsx("h1", {
+				className: "text-2xl font-semibold tracking-tight",
+				children: "Checkout is temporarily unavailable"
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground",
+				children: "We couldn’t reach the developer portal API. Try again shortly, or contact the site owner if this continues."
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				asChild: true,
+				variant: "outline",
+				children: /* @__PURE__ */ jsx(Link, {
+					to: plansPath,
+					children: "Back to plans"
+				})
+			})
+		]
+	});
+	if (freeProvisioned) return null;
+	return /* @__PURE__ */ jsx(RedirectPage, {
+		icon: ShieldIcon,
+		title: "Establishing secure checkout…",
+		description: "Redirecting you to complete your subscription.",
+		url: checkoutQuery.data?.checkoutUrl ?? void 0,
+		children: checkoutQuery.isError ? /* @__PURE__ */ jsxs(Alert, {
+			variant: "destructive",
+			children: [/* @__PURE__ */ jsx(AlertDescription, {
+				className: "first-letter:uppercase",
+				children: checkoutQuery.error.message
+			}), /* @__PURE__ */ jsx(AlertAction, { children: /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				size: "xs",
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Link, {
+					to: plansPath,
+					children: "Back to plans"
+				})
+			}) })]
+		}) : null
+	});
+};
+
+//#endregion
+export { CheckoutPage as default };