@lukoweb/apitogo-plugin-dev-portal-billing 0.2.53 → 0.2.54

package/dist/{AccountPlansPage-DvRFe3di.mjs → AccountPlansPage-0PYGy1aV.mjs}

@@ -1,8 +1,9 @@
 import { f as parseManifestPlans, n as useDevPortalPreviewMode, r as useIsDemoSession, s as isActiveSubscription, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-BstWzITX.mjs";
-import { t as PricingCard } from "./PricingCard-CKdq1oWn.mjs";
+import { t as PricingCard } from "./PricingCard-YJIEwydG.mjs";
 import { n as useDevPortalBillingConfig } from "./DevPortalBillingContext-CR83s4LO.mjs";
-import { t as useMySubscriptions } from "./useMySubscriptions-BtxAXA1m.mjs";
-import { t as usePlans } from "./usePlans-DPGFWcVo.mjs";
+import { n as readProblemDetail } from "./problem-details-n20-dy3w.mjs";
+import { t as useMySubscriptions } from "./useMySubscriptions-DuVq2tXL.mjs";
+import { t as usePlans } from "./usePlans-BF7Hy2qJ.mjs";
 import { Head } from "@lukoweb/apitogo/components";
 import { CreditCardIcon } from "@lukoweb/apitogo/icons";
 import { useSearchParams } from "@lukoweb/apitogo/router";
@@ -43,10 +44,7 @@ function useCancelSubscription() {
 				credentials: "include",
 				body: JSON.stringify({ planSku })
 			});
-			if (!response.ok) {
-				const detail = await response.text();
-				throw new Error(detail || "Failed to cancel subscription.");
-			}
+			if (!response.ok) throw new Error(await readProblemDetail(response) ?? "Failed to cancel subscription.");
 			return await response.json();
 		},
 		onSuccess: async () => {

package/dist/{CheckoutPage-CwSElFUk.mjs → CheckoutPage-Bpa128i2.mjs}

@@ -1,6 +1,7 @@
-import { o as PRICING_PATH, t as ACCOUNT_PLANS_PATH } from "./paths-ujy9wjVK.mjs";
+import { n as ALREADY_SUBSCRIBED_PARAM, s as PRICING_PATH, t as ACCOUNT_PLANS_PATH } from "./paths-DaVyTIDJ.mjs";
 import { n as useDevPortalPreviewMode, r as useIsDemoSession, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-BstWzITX.mjs";
-import { t as FREE_CHECKOUT_MARKER } from "./billing-state-DbU5Lpoz.mjs";
+import { n as readProblemDetail, t as isAlreadySubscribedMessage } from "./problem-details-n20-dy3w.mjs";
+import { t as FREE_CHECKOUT_MARKER } from "./billing-state-Dgcc3_pT.mjs";
 import { ShieldIcon } from "@lukoweb/apitogo/icons";
 import { Link, useNavigate, useSearchParams } from "@lukoweb/apitogo/router";
 import { useEffect } from "react";
@@ -81,14 +82,19 @@ const CheckoutPage = () => {
 				credentials: "include",
 				body: JSON.stringify({ planSku })
 			});
-			if (!response.ok) {
-				const detail = await response.text();
-				throw new Error(detail || "Checkout failed.");
-			}
+			if (!response.ok) throw new Error(await readProblemDetail(response) ?? "Checkout failed.");
 			return await response.json();
 		}
 	});
 	const freeProvisioned = checkoutQuery.data?.checkoutUrl == null && checkoutQuery.data?.entitlementProvisioned === true;
+	const alreadySubscribed = checkoutQuery.isError && isAlreadySubscribedMessage(checkoutQuery.error.message);
+	useEffect(() => {
+		if (alreadySubscribed) navigate(`/account/subscriptions?${ALREADY_SUBSCRIBED_PARAM}=${encodeURIComponent(planSku)}`, { replace: true });
+	}, [
+		alreadySubscribed,
+		navigate,
+		planSku
+	]);
 	useEffect(() => {
 		if (freeProvisioned) navigate(`/account/subscriptions?checkout=success&${FREE_CHECKOUT_MARKER}`, { replace: true });
 	}, [freeProvisioned, navigate]);
@@ -146,13 +152,13 @@ const CheckoutPage = () => {
 			})
 		]
 	});
-	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, {
+	if (freeProvisioned || alreadySubscribed) return null;
+	if (checkoutQuery.isError) 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 could not start"
+		}), /* @__PURE__ */ jsxs(Alert, {
 			variant: "destructive",
 			children: [/* @__PURE__ */ jsx(AlertDescription, {
 				className: "first-letter:uppercase",
@@ -166,7 +172,13 @@ const CheckoutPage = () => {
 					children: "Back to plans"
 				})
 			}) })]
-		}) : null
+		})]
+	});
+	return /* @__PURE__ */ jsx(RedirectPage, {
+		icon: ShieldIcon,
+		title: "Establishing secure checkout…",
+		description: "Redirecting you to complete your subscription.",
+		url: checkoutQuery.data?.checkoutUrl ?? void 0
 	});
 };
 

package/dist/{ContactSalesPage-q7Dxxtx6.mjs → ContactSalesPage-BslD3Yk4.mjs}

@@ -1,7 +1,8 @@
-import { o as PRICING_PATH } from "./paths-ujy9wjVK.mjs";
+import { s as PRICING_PATH } from "./paths-DaVyTIDJ.mjs";
 import { l as isPlanCustomPriced, n as useDevPortalPreviewMode, r as useIsDemoSession, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-BstWzITX.mjs";
 import "./DevPortalBillingContext-CR83s4LO.mjs";
-import { t as usePlans } from "./usePlans-DPGFWcVo.mjs";
+import { n as readProblemDetail } from "./problem-details-n20-dy3w.mjs";
+import { t as usePlans } from "./usePlans-BF7Hy2qJ.mjs";
 import { Link, useSearchParams } from "@lukoweb/apitogo/router";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -32,14 +33,6 @@ function useSubmitPlanInquiry() {
 		if (!response.ok) throw new Error(await readProblemDetail(response) ?? "Your message could not be sent. Please try again later.");
 	} });
 }
-async function readProblemDetail(response) {
-	try {
-		const body = await response.json();
-		return (body.errors ? Object.values(body.errors).flat()[0] : void 0) ?? body.detail ?? body.title ?? null;
-	} catch {
-		return null;
-	}
-}
 
 //#endregion
 //#region src/pages/ContactSalesPage.tsx

package/dist/{CredentialsPage-B2jPo6Go.mjs → CredentialsPage-C4qpBVrh.mjs}

@@ -1,10 +1,10 @@
-import { t as ACCOUNT_PLANS_PATH } from "./paths-ujy9wjVK.mjs";
+import { t as ACCOUNT_PLANS_PATH } from "./paths-DaVyTIDJ.mjs";
 import { n as useDevPortalPreviewMode, r as useIsDemoSession, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-BstWzITX.mjs";
 import { n as useDevPortalBillingConfig } from "./DevPortalBillingContext-CR83s4LO.mjs";
-import { r as createDemoCredentials, t as DEMO_GATEWAY_KEY_HEADER } from "./demo-session-rN2Gj4lM.mjs";
-import { n as useApiKeys } from "./useApiKeys-CVgXfUop.mjs";
-import { n as apiReferencePath, r as ApiKeysPanel } from "./account-links-D_vS0GJn.mjs";
-import { n as ChoosePlanNotice, t as keyPlanNote } from "./key-plan-note-DTWeFhn2.mjs";
+import { r as createDemoCredentials, t as DEMO_GATEWAY_KEY_HEADER } from "./demo-session-yK9qEqV-.mjs";
+import { n as useApiKeys } from "./useApiKeys-CEwMzqju.mjs";
+import { n as apiReferencePath, r as ApiKeysPanel } from "./account-links-9h91uCGj.mjs";
+import { i as ChoosePlanNotice, r as keyPlanNote, t as apiKeysPageState } from "./page-state-BB-72pbw.mjs";
 import { Head } from "@lukoweb/apitogo/components";
 import { KeyRoundIcon } from "@lukoweb/apitogo/icons";
 import { Link as Link$1 } from "@lukoweb/apitogo/router";
@@ -57,18 +57,23 @@ const CredentialsPage = () => {
 	const auth = useAuth();
 	const isPreview = useDevPortalPreviewMode();
 	const isDemoSession = useIsDemoSession();
-	const { data: credentials, isLoading, error } = useCredentials();
-	const { data: apiKeys, isLoading: keysLoading, error: keysError } = useApiKeys();
+	const { data: credentials } = useCredentials();
+	const { data: apiKeys, error: keysError } = useApiKeys();
 	const { gatewayBaseUrl: configuredGatewayBaseUrl, links, keyHeader: configuredKeyHeader } = useDevPortalBillingConfig();
 	const apiReferenceLink = apiReferencePath(links);
 	const gatewayBaseUrl = credentials?.gatewayBaseUrl?.trim() || apiKeys?.gatewayBaseUrl?.trim() || configuredGatewayBaseUrl?.trim() || zudokuConfig.__meta?.gatewayBaseUrl?.trim() || null;
 	const header = configuredKeyHeader?.trim() || apiKeys?.header || DEMO_GATEWAY_KEY_HEADER;
 	const plans = apiKeys?.plans ?? [];
 	const planNote = isDemoSession ? null : keyPlanNote(plans);
+	const pageState = apiKeysPageState({
+		data: apiKeys,
+		error: keysError
+	});
+	const showsLiveData = auth.isAuthenticated && (isDemoSession || !isPreview);
 	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__ */ jsx(Head, { children: /* @__PURE__ */ jsx("title", { children: "API keys" }) }),
 			/* @__PURE__ */ jsxs("div", {
 				className: "mb-8 flex items-start gap-4",
 				children: [/* @__PURE__ */ jsx("div", {
@@ -78,7 +83,7 @@ const CredentialsPage = () => {
 					className: "space-y-1",
 					children: [/* @__PURE__ */ jsx("h1", {
 						className: "text-3xl font-semibold tracking-tight",
-						children: "API credentials"
+						children: "API keys"
 					}), /* @__PURE__ */ jsx("p", {
 						className: "text-muted-foreground",
 						children: "Create API keys for each subscribed plan and use them to authenticate requests to the API gateway."
@@ -93,7 +98,7 @@ const CredentialsPage = () => {
 				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."
+					children: "API keys are available after the developer portal is published."
 				})
 			}) : null,
 			!isPreview && !isDemoSession && !auth.isAuthenticated ? /* @__PURE__ */ jsxs("div", {
@@ -110,15 +115,18 @@ const CredentialsPage = () => {
 					})
 				})]
 			}) : null,
-			!isPreview && !isDemoSession && auth.isAuthenticated && (isLoading || keysLoading) ? /* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground",
-				children: "Loading credentials…"
+			showsLiveData && pageState === "loading" ? /* @__PURE__ */ jsx("div", {
+				className: "space-y-6",
+				role: "status",
+				"aria-busy": "true",
+				"aria-label": "Loading API keys",
+				children: [0, 1].map((i) => /* @__PURE__ */ jsx("div", { className: "h-40 animate-pulse rounded-xl border bg-muted/40" }, i))
 			}) : null,
-			!isPreview && !isDemoSession && auth.isAuthenticated && (error || keysError) ? error instanceof Error && error.message === "NO_ENTITLEMENT" || keysError instanceof Error && keysError.message === "NO_ENTITLEMENT" ? /* @__PURE__ */ jsx(ChoosePlanNotice, {}) : /* @__PURE__ */ jsxs("div", {
+			showsLiveData && pageState === "failed" ? /* @__PURE__ */ jsxs("div", {
 				className: "rounded-xl border border-dashed p-8 text-center",
 				children: [/* @__PURE__ */ jsx("p", {
 					className: "text-muted-foreground",
-					children: "Unable to load API credentials. Try again in a moment."
+					children: "Unable to load your API keys. Try again in a moment."
 				}), /* @__PURE__ */ jsx(Button$1, {
 					className: "mt-4",
 					asChild: true,
@@ -128,7 +136,8 @@ const CredentialsPage = () => {
 					})
 				})]
 			}) : null,
-			(isDemoSession || !isPreview) && auth.isAuthenticated && !error && !keysError && !isLoading && !keysLoading ? /* @__PURE__ */ jsxs("div", {
+			showsLiveData && pageState === "empty" ? /* @__PURE__ */ jsx(ChoosePlanNotice, {}) : null,
+			showsLiveData && pageState === "ready" ? /* @__PURE__ */ jsxs("div", {
 				className: "space-y-6",
 				children: [
 					planNote ? /* @__PURE__ */ jsx("div", {
@@ -136,7 +145,7 @@ const CredentialsPage = () => {
 						className: "rounded-xl border border-primary/30 bg-primary/5 p-4 text-sm",
 						children: planNote.text
 					}) : null,
-					plans.length === 0 ? /* @__PURE__ */ jsx(ChoosePlanNotice, {}) : plans.map((plan) => /* @__PURE__ */ jsx(ApiKeysPanel, {
+					plans.map((plan) => /* @__PURE__ */ jsx(ApiKeysPanel, {
 						plan,
 						header,
 						readOnly: isDemoSession
@@ -169,7 +178,7 @@ const CredentialsPage = () => {
 					asChild: true,
 					children: /* @__PURE__ */ jsx(Link$1, {
 						to: "/account/subscriptions",
-						children: "My subscriptions"
+						children: "Billing"
 					})
 				}), apiReferenceLink ? /* @__PURE__ */ jsx(Button$1, {
 					variant: "outline",

package/dist/{PricingCard-CKdq1oWn.mjs → PricingCard-YJIEwydG.mjs}

@@ -1,4 +1,4 @@
-import { n as CHECKOUT_PATH, r as CONTACT_SALES_PATH } from "./paths-ujy9wjVK.mjs";
+import { i as CONTACT_SALES_PATH, r as CHECKOUT_PATH } from "./paths-DaVyTIDJ.mjs";
 import { d as listPlanFeatureLines, i as formatPlanDisplayPrice, l as isPlanCustomPriced, o as formatPlanPriceUnit, s as isActiveSubscription, u as isPlanFree } from "./useDevPortalApiBaseUrl-BstWzITX.mjs";
 import { Button } from "@lukoweb/apitogo/components";
 import { Link as Link$1 } from "@lukoweb/apitogo/router";

package/dist/{PricingPage-DnQQfy9L.mjs → PricingPage-DIhoFOd9.mjs}

@@ -1,9 +1,9 @@
 import { f as parseManifestPlans, h as pickFeaturedPlanSku, n as useDevPortalPreviewMode } from "./useDevPortalApiBaseUrl-BstWzITX.mjs";
-import { t as PricingCard } from "./PricingCard-CKdq1oWn.mjs";
+import { t as PricingCard } from "./PricingCard-YJIEwydG.mjs";
 import { n as useDevPortalBillingConfig } from "./DevPortalBillingContext-CR83s4LO.mjs";
-import { t as usePlans } from "./usePlans-DPGFWcVo.mjs";
-import { t as isPreviewPricingEnabled } from "./pricing-config-02m4dyFf.mjs";
-import { a as isPricingLoading, n as buildCompareRows } from "./billing-state-DbU5Lpoz.mjs";
+import { t as usePlans } from "./usePlans-BF7Hy2qJ.mjs";
+import { t as isPreviewPricingEnabled } from "./pricing-config-C44AIqql.mjs";
+import { a as isPricingLoading, n as buildCompareRows } from "./billing-state-Dgcc3_pT.mjs";
 import { Head, Heading } from "@lukoweb/apitogo/components";
 import { Navigate } from "@lukoweb/apitogo/router";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/SubscriptionsPage-D7hsYtTB.mjs

@@ -0,0 +1,268 @@
+import { a as CREDENTIALS_PATH, n as ALREADY_SUBSCRIBED_PARAM, t as ACCOUNT_PLANS_PATH } from "./paths-DaVyTIDJ.mjs";
+import { a as formatPlanPrice, p as parseMonthlyQuotaCalls, s as isActiveSubscription, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-BstWzITX.mjs";
+import { n as useDevPortalBillingConfig } from "./DevPortalBillingContext-CR83s4LO.mjs";
+import { t as useMySubscriptions } from "./useMySubscriptions-DuVq2tXL.mjs";
+import { t as usePlans } from "./usePlans-BF7Hy2qJ.mjs";
+import { n as useApiKeys } from "./useApiKeys-CEwMzqju.mjs";
+import { t as useUsage } from "./useUsage-CJ9VIBc7.mjs";
+import { i as hasPaymentProvider, r as checkoutConfirmingText } from "./billing-state-Dgcc3_pT.mjs";
+import { i as ChoosePlanNotice, n as billingPageState, r as keyPlanNote } from "./page-state-BB-72pbw.mjs";
+import { Head, Spinner } from "@lukoweb/apitogo/components";
+import { Link as Link$1, useSearchParams } from "@lukoweb/apitogo/router";
+import { useEffect } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMutation } from "@lukoweb/apitogo/react-query";
+import { useAuth } from "@lukoweb/apitogo/hooks";
+import { Button as Button$1 } from "@lukoweb/apitogo/ui/Button.js";
+
+//#region src/hooks/useBillingPortal.ts
+function useBillingPortal() {
+	const apiBaseUrl = useDevPortalApiBaseUrl();
+	return useMutation({ mutationFn: async (returnUrl) => {
+		if (!apiBaseUrl) throw new Error("Dev portal API is not configured.");
+		const response = await fetch(`${apiBaseUrl}/api/v1/subscriptions/billing-portal`, {
+			method: "POST",
+			headers: {
+				Accept: "application/json",
+				"Content-Type": "application/json"
+			},
+			credentials: "include",
+			body: JSON.stringify({ returnUrl: returnUrl ?? `${window.location.origin}/account/subscriptions` })
+		});
+		if (!response.ok) throw new Error("Unable to open billing portal.");
+		const body = await response.json();
+		if (!body.url) throw new Error("Billing portal URL was not returned.");
+		window.location.assign(body.url);
+	} });
+}
+
+//#endregion
+//#region src/pages/SubscriptionsPage.tsx
+/** How an earlier plan ended, in words a customer reads. */
+function subscriptionStatusLabel(status) {
+	switch (status.toLowerCase().replace(/_/g, "")) {
+		case "canceled": return "Ended";
+		case "pastdue": return "Payment due";
+		case "incomplete": return "Not started";
+		default: return status.charAt(0).toUpperCase() + status.slice(1).toLowerCase();
+	}
+}
+const SubscriptionsPage = () => {
+	const { billing } = useDevPortalBillingConfig();
+	const auth = useAuth();
+	const [searchParams] = useSearchParams();
+	const checkoutSuccess = searchParams.get("checkout") === "success";
+	const alreadySubscribedSku = searchParams.get(ALREADY_SUBSCRIBED_PARAM);
+	const checkoutPaid = searchParams.get("paid") !== "0";
+	const { data: me, error: meError, refetch } = useMySubscriptions();
+	const billingState = billingPageState({
+		data: me,
+		error: meError
+	});
+	const isLoading = billingState === "loading";
+	const { data: catalog } = usePlans();
+	const billingPortal = useBillingPortal();
+	const { data: usage } = useUsage("30d");
+	const { data: apiKeys } = useApiKeys();
+	const planNote = keyPlanNote(apiKeys?.plans ?? []);
+	const planBySku = new Map((catalog?.plans ?? []).map((plan) => [plan.sku, plan]));
+	const subscriptions = me?.subscriptions ?? [];
+	const activeSubscriptions = subscriptions.filter((sub) => isActiveSubscription(sub.status));
+	const earlierSubscriptions = subscriptions.filter((sub) => !isActiveSubscription(sub.status));
+	const hasActivePlan = activeSubscriptions.length > 0;
+	const singlePlan = activeSubscriptions.length === 1 ? planBySku.get(activeSubscriptions[0].planSku) : void 0;
+	const confirmingPayment = checkoutSuccess && !isLoading && !hasActivePlan;
+	useEffect(() => {
+		if (!confirmingPayment) return;
+		let attempts = 0;
+		const timer = setInterval(() => {
+			attempts += 1;
+			refetch();
+			if (attempts >= 30) clearInterval(timer);
+		}, 2e3);
+		return () => clearInterval(timer);
+	}, [confirmingPayment, refetch]);
+	const monthlyQuota = singlePlan ? parseMonthlyQuotaCalls(singlePlan.limitsJson) : null;
+	const usedRequests = usage?.requestCount ?? 0;
+	const quotaPct = monthlyQuota && monthlyQuota > 0 ? Math.min(100, Math.round(usedRequests / monthlyQuota * 100)) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "px-8 py-7",
+		children: [
+			/* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx("title", { children: "Billing" }) }),
+			/* @__PURE__ */ jsx("h1", {
+				className: "mb-2 text-[1.6rem] font-bold tracking-[-0.01em]",
+				children: "Billing"
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "mb-8 text-muted-foreground",
+				children: "Manage your plans, payment method, and invoices."
+			}),
+			alreadySubscribedSku ? /* @__PURE__ */ jsxs("div", {
+				role: "status",
+				className: "mb-6 rounded-xl border border-primary/30 bg-primary/5 p-4 text-sm",
+				children: [
+					"You're already on the",
+					" ",
+					planBySku.get(alreadySubscribedSku)?.displayName ?? alreadySubscribedSku,
+					" ",
+					"plan. Go to",
+					" ",
+					/* @__PURE__ */ jsx(Link$1, {
+						to: CREDENTIALS_PATH,
+						className: "font-medium underline",
+						children: "API keys"
+					}),
+					" ",
+					"to create a key."
+				]
+			}) : null,
+			confirmingPayment ? /* @__PURE__ */ jsx("div", {
+				className: "mb-6 rounded-xl border border-border bg-card p-4 text-sm",
+				children: checkoutConfirmingText(checkoutPaid)
+			}) : null,
+			checkoutSuccess && hasActivePlan ? /* @__PURE__ */ jsx("div", {
+				className: "mb-6 rounded-xl border border-green-500/30 bg-green-500/10 p-4 text-sm",
+				children: planNote ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					planNote.text,
+					" ",
+					/* @__PURE__ */ jsx(Link$1, {
+						to: CREDENTIALS_PATH,
+						className: "font-medium underline",
+						children: "Create the key"
+					}),
+					"."
+				] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					"Your subscription is active.",
+					" ",
+					/* @__PURE__ */ jsx(Link$1, {
+						to: CREDENTIALS_PATH,
+						className: "font-medium underline",
+						children: "View your API keys"
+					}),
+					"."
+				] })
+			}) : null,
+			isLoading ? /* @__PURE__ */ jsx("div", {
+				className: "mb-8 h-40 animate-pulse rounded-xl border bg-muted/40",
+				role: "status",
+				"aria-busy": "true",
+				"aria-label": "Loading billing details"
+			}) : null,
+			billingState === "failed" ? /* @__PURE__ */ jsx("p", {
+				className: "mb-8 text-muted-foreground",
+				children: "Unable to load your plans. Try again in a moment."
+			}) : null,
+			!isLoading && hasActivePlan ? /* @__PURE__ */ jsxs("section", {
+				className: "mb-8",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "mb-3 text-xs font-medium uppercase tracking-[0.05em] text-muted-foreground",
+					children: activeSubscriptions.length > 1 ? "Your plans" : "Current plan"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "space-y-4",
+					children: activeSubscriptions.map((subscription) => {
+						const plan = planBySku.get(subscription.planSku);
+						return /* @__PURE__ */ jsxs("article", {
+							className: "rounded-xl border border-border bg-card p-6",
+							"data-testid": `active-plan-${subscription.planSku}`,
+							children: [
+								/* @__PURE__ */ jsx("h2", {
+									className: "text-2xl font-bold",
+									children: plan?.displayName ?? subscription.planSku
+								}),
+								plan ? /* @__PURE__ */ jsx("p", {
+									className: "mt-1 text-sm text-muted-foreground",
+									children: formatPlanPrice(plan)
+								}) : /* @__PURE__ */ jsx("p", {
+									className: "mt-1 text-sm text-muted-foreground",
+									children: "This plan is no longer offered. Your access continues until you cancel it."
+								}),
+								subscription.currentPeriodEnd ? /* @__PURE__ */ jsxs("p", {
+									className: "mt-3 text-sm text-muted-foreground",
+									children: [
+										"Renews",
+										" ",
+										new Date(subscription.currentPeriodEnd).toLocaleDateString()
+									]
+								}) : null,
+								singlePlan && quotaPct != null && monthlyQuota != null ? /* @__PURE__ */ jsxs("div", {
+									className: "mt-5",
+									children: [/* @__PURE__ */ jsxs("div", {
+										className: "mb-1.5 flex justify-between text-xs text-muted-foreground",
+										children: [/* @__PURE__ */ jsx("span", { children: "Monthly requests" }), /* @__PURE__ */ jsxs("span", { children: [
+											usedRequests.toLocaleString(),
+											" /",
+											" ",
+											monthlyQuota.toLocaleString()
+										] })]
+									}), /* @__PURE__ */ jsx("div", {
+										className: "h-2 rounded-full bg-muted",
+										children: /* @__PURE__ */ jsx("div", {
+											className: "h-full rounded-full bg-primary transition-[width]",
+											style: { width: `${quotaPct}%` }
+										})
+									})]
+								}) : null
+							]
+						}, subscription.planSku);
+					})
+				})]
+			}) : null,
+			billingState === "empty" ? /* @__PURE__ */ jsx(ChoosePlanNotice, {
+				className: "mb-8 rounded-xl border border-dashed p-8 text-center",
+				body: "You do not have a plan yet. Choose one to start using the API; your billing details appear here afterwards."
+			}) : null,
+			!isLoading && earlierSubscriptions.length > 0 ? /* @__PURE__ */ jsxs("section", {
+				className: "mb-8",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "mb-2 text-xs font-medium uppercase tracking-[0.05em] text-muted-foreground",
+					children: "Earlier plans"
+				}), /* @__PURE__ */ jsx("ul", {
+					className: "divide-y rounded-xl border bg-card text-sm",
+					children: earlierSubscriptions.map((subscription) => /* @__PURE__ */ jsxs("li", {
+						className: "flex items-center justify-between gap-4 px-5 py-3",
+						children: [/* @__PURE__ */ jsx("span", { children: planBySku.get(subscription.planSku)?.displayName ?? subscription.planSku }), /* @__PURE__ */ jsx("span", {
+							className: "text-xs text-muted-foreground",
+							children: subscriptionStatusLabel(subscription.status)
+						})]
+					}, `${subscription.planSku}-${subscription.status}`))
+				})]
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap gap-3",
+				children: [
+					/* @__PURE__ */ jsx(Button$1, {
+						variant: "outline",
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Link$1, {
+							to: ACCOUNT_PLANS_PATH,
+							children: "Manage plans"
+						})
+					}),
+					auth.isAuthenticated && hasPaymentProvider(billing) ? /* @__PURE__ */ jsx(Button$1, {
+						variant: "default",
+						disabled: billingPortal.isPending,
+						onClick: () => {
+							billingPortal.mutate();
+						},
+						children: billingPortal.isPending ? /* @__PURE__ */ jsx(Spinner, {}) : "Manage payment & invoices"
+					}) : null,
+					auth.isAuthenticated ? /* @__PURE__ */ jsx(Button$1, {
+						variant: "secondary",
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Link$1, {
+							to: CREDENTIALS_PATH,
+							children: "API keys"
+						})
+					}) : null
+				]
+			}),
+			billingPortal.isError ? /* @__PURE__ */ jsx("p", {
+				className: "mt-4 text-sm text-destructive",
+				children: billingPortal.error instanceof Error ? billingPortal.error.message : "Unable to open billing portal."
+			}) : null
+		]
+	});
+};
+
+//#endregion
+export { SubscriptionsPage as default, subscriptionStatusLabel };

package/dist/{UsagePage-BF4QgrTc.mjs → UsagePage-Di9kQ_3Z.mjs}

@@ -1,8 +1,8 @@
 import { m as parseQuotaPeriodDays, p as parseMonthlyQuotaCalls, s as isActiveSubscription } from "./useDevPortalApiBaseUrl-BstWzITX.mjs";
 import "./DevPortalBillingContext-CR83s4LO.mjs";
-import { t as useMySubscriptions } from "./useMySubscriptions-BtxAXA1m.mjs";
-import { t as usePlans } from "./usePlans-DPGFWcVo.mjs";
-import { t as useUsage } from "./useUsage--5sZub3M.mjs";
+import { t as useMySubscriptions } from "./useMySubscriptions-DuVq2tXL.mjs";
+import { t as usePlans } from "./usePlans-BF7Hy2qJ.mjs";
+import { n as useUsageRecent, t as useUsage } from "./useUsage-CJ9VIBc7.mjs";
 import { Head } from "@lukoweb/apitogo/components";
 import { Link as Link$1 } from "@lukoweb/apitogo/router";
 import { useState } from "react";
@@ -35,6 +35,27 @@ function quotaSummary(used, limit, periodDays, periodEnd) {
 	};
 }
 
+//#endregion
+//#region src/utils/usage-display.ts
+/**
+* How the usage page shows its numbers (API-126).
+*/
+/** "GET /p<project id>/hello" becomes "GET /hello": the shared gateway's project prefix means nothing to an API user. */
+function endpointLabel(label) {
+	return label.replace(/(^|\s)\/p[0-9a-f]{32}(\/|$)/i, "$1/");
+}
+/** Calls the gateway refused because the plan's rate limit or quota was reached (counted as "429"). */
+function blockedCount(byStatus) {
+	return byStatus.filter((item) => item.label === "429").reduce((sum, item) => sum + item.count, 0);
+}
+/** The middle latency of the given calls, or null without any. A slow outlier moves it less than an average. */
+function medianLatency(latencies) {
+	const values = latencies.filter((value) => typeof value === "number").sort((a, b) => a - b);
+	if (values.length === 0) return null;
+	const middle = Math.floor(values.length / 2);
+	return values.length % 2 === 1 ? values[middle] : Math.round((values[middle - 1] + values[middle]) / 2);
+}
+
 //#endregion
 //#region src/pages/UsagePage.tsx
 const RANGES = [
@@ -65,6 +86,9 @@ const UsagePage = () => {
 	const auth = useAuth();
 	const [range, setRange] = useState("30d");
 	const { data, isLoading, isError } = useUsage(range);
+	const { data: recent } = useUsageRecent(50);
+	const median = medianLatency((recent?.items ?? []).map((item) => item.latencyMs));
+	const blocked = data ? blockedCount(data.byStatus) : 0;
 	const { data: quotaUsage } = useUsage("30d");
 	const { data: mine } = useMySubscriptions();
 	const { data: catalog } = usePlans();
@@ -129,23 +153,41 @@ const UsagePage = () => {
 				children: [
 					/* @__PURE__ */ jsxs("div", {
 						className: "rounded-xl border border-border bg-card p-4",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: "text-xs uppercase tracking-[0.05em] text-muted-foreground",
-							children: "Requests"
-						}), /* @__PURE__ */ jsx("div", {
-							className: "mt-1.5 text-2xl font-bold",
-							children: data ? formatNumber(data.requestCount) : "—"
-						})]
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: "text-xs uppercase tracking-[0.05em] text-muted-foreground",
+								children: "Requests"
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "mt-1.5 text-2xl font-bold",
+								children: data ? formatNumber(data.requestCount) : "—"
+							}),
+							blocked > 0 ? /* @__PURE__ */ jsxs("div", {
+								className: "mt-1 text-xs text-muted-foreground",
+								children: ["Blocked by rate limit: ", formatNumber(blocked)]
+							}) : null
+						]
 					}),
 					/* @__PURE__ */ jsxs("div", {
 						className: "rounded-xl border border-border bg-card p-4",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: "text-xs uppercase tracking-[0.05em] text-muted-foreground",
-							children: "Avg latency"
-						}), /* @__PURE__ */ jsx("div", {
-							className: "mt-1.5 text-2xl font-bold",
-							children: data?.avgLatencyMs != null ? `${data.avgLatencyMs} ms` : "—"
-						})]
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: "text-xs uppercase tracking-[0.05em] text-muted-foreground",
+								children: median != null ? "Median latency" : "Avg latency"
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "mt-1.5 text-2xl font-bold",
+								children: median != null ? `${median} ms` : data?.avgLatencyMs != null ? `${data.avgLatencyMs} ms` : "—"
+							}),
+							median != null ? /* @__PURE__ */ jsxs("div", {
+								className: "mt-1 text-xs text-muted-foreground",
+								children: [
+									"Of the latest ",
+									recent?.items.length ?? 0,
+									" calls"
+								]
+							}) : null
+						]
 					}),
 					/* @__PURE__ */ jsxs("div", {
 						className: "rounded-xl border border-border bg-card p-4",
@@ -222,7 +264,7 @@ const UsagePage = () => {
 								className: "mb-1 flex justify-between text-[13px]",
 								children: [/* @__PURE__ */ jsx("code", {
 									className: "font-mono text-foreground",
-									children: item.path
+									children: endpointLabel(item.path)
 								}), /* @__PURE__ */ jsxs("span", {
 									className: "text-muted-foreground",
 									children: [pct, "%"]

package/dist/{account-links-D_vS0GJn.mjs → account-links-9h91uCGj.mjs}

@@ -1,4 +1,4 @@
-import { i as useRevokeApiKey, r as useCreateApiKey, t as API_KEY_CAP_REACHED } from "./useApiKeys-CVgXfUop.mjs";
+import { i as useRevokeApiKey, r as useCreateApiKey, t as API_KEY_CAP_REACHED } from "./useApiKeys-CEwMzqju.mjs";
 import { Spinner } from "@lukoweb/apitogo/components";
 import { KeyRoundIcon, TrashIcon } from "@lukoweb/apitogo/icons";
 import { useState } from "react";

package/dist/index.mjs

@@ -1,15 +1,15 @@
-import { t as AccountPlansPage } from "./AccountPlansPage-DvRFe3di.mjs";
-import { a as LOGIN_NAV_PATH, c as USAGE_PATH, i as CREDENTIALS_PATH, n as CHECKOUT_PATH, o as PRICING_PATH, r as CONTACT_SALES_PATH, s as SUBSCRIPTIONS_PATH, t as ACCOUNT_PLANS_PATH } from "./paths-ujy9wjVK.mjs";
+import { t as AccountPlansPage } from "./AccountPlansPage-0PYGy1aV.mjs";
+import { a as CREDENTIALS_PATH, c as SUBSCRIPTIONS_PATH, i as CONTACT_SALES_PATH, l as USAGE_PATH, o as LOGIN_NAV_PATH, r as CHECKOUT_PATH, s as PRICING_PATH, t as ACCOUNT_PLANS_PATH } from "./paths-DaVyTIDJ.mjs";
 import { d as listPlanFeatureLines, f as parseManifestPlans, h as pickFeaturedPlanSku, i as formatPlanDisplayPrice, o as formatPlanPriceUnit, s as isActiveSubscription, v as resolveDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-BstWzITX.mjs";
-import "./PricingCard-CKdq1oWn.mjs";
+import "./PricingCard-YJIEwydG.mjs";
 import { n as useDevPortalBillingConfig, t as DevPortalBillingProvider } from "./DevPortalBillingContext-CR83s4LO.mjs";
-import { t as DEMO_GATEWAY_KEY_HEADER } from "./demo-session-rN2Gj4lM.mjs";
-import { t as useMySubscriptions } from "./useMySubscriptions-BtxAXA1m.mjs";
-import { n as startPlansPrefetch, t as usePlans } from "./usePlans-DPGFWcVo.mjs";
-import { a as playgroundKeyIdentities, i as useRevokeApiKey, n as useApiKeys, r as useCreateApiKey, t as API_KEY_CAP_REACHED } from "./useApiKeys-CVgXfUop.mjs";
-import { n as useUsageRecent, t as useUsage } from "./useUsage--5sZub3M.mjs";
-import { r as ApiKeysPanel, t as accountLayoutProps } from "./account-links-D_vS0GJn.mjs";
-import { t as isPreviewPricingEnabled } from "./pricing-config-02m4dyFf.mjs";
+import { t as DEMO_GATEWAY_KEY_HEADER } from "./demo-session-yK9qEqV-.mjs";
+import { t as useMySubscriptions } from "./useMySubscriptions-DuVq2tXL.mjs";
+import { n as startPlansPrefetch, t as usePlans } from "./usePlans-BF7Hy2qJ.mjs";
+import { a as playgroundKeyIdentities, i as useRevokeApiKey, n as useApiKeys, r as useCreateApiKey, t as API_KEY_CAP_REACHED } from "./useApiKeys-CEwMzqju.mjs";
+import { n as useUsageRecent, t as useUsage } from "./useUsage-CJ9VIBc7.mjs";
+import { r as ApiKeysPanel, t as accountLayoutProps } from "./account-links-9h91uCGj.mjs";
+import { t as isPreviewPricingEnabled } from "./pricing-config-C44AIqql.mjs";
 import { Head, Link } from "@lukoweb/apitogo/components";
 import { ArrowRightIcon, KeyRoundIcon, StarsIcon } from "@lukoweb/apitogo/icons";
 import { Outlet } from "@lukoweb/apitogo/router";
@@ -366,13 +366,13 @@ async function getSignedInIdentities(apiBaseUrl, fetchImpl = fetch) {
 
 //#endregion
 //#region src/DevPortalBillingPlugin.tsx
-const AccountPlansPage$1 = lazy(() => import("./AccountPlansPage-DvRFe3di.mjs").then((n) => n.n));
-const CheckoutPage = lazy(() => import("./CheckoutPage-CwSElFUk.mjs"));
-const ContactSalesPage = lazy(() => import("./ContactSalesPage-q7Dxxtx6.mjs"));
-const CredentialsPage = lazy(() => import("./CredentialsPage-B2jPo6Go.mjs"));
-const PricingPage = lazy(() => import("./PricingPage-DnQQfy9L.mjs"));
-const SubscriptionsPage = lazy(() => import("./SubscriptionsPage-msO31jv-.mjs"));
-const UsagePage = lazy(() => import("./UsagePage-BF4QgrTc.mjs"));
+const AccountPlansPage$1 = lazy(() => import("./AccountPlansPage-0PYGy1aV.mjs").then((n) => n.n));
+const CheckoutPage = lazy(() => import("./CheckoutPage-Bpa128i2.mjs"));
+const ContactSalesPage = lazy(() => import("./ContactSalesPage-BslD3Yk4.mjs"));
+const CredentialsPage = lazy(() => import("./CredentialsPage-C4qpBVrh.mjs"));
+const PricingPage = lazy(() => import("./PricingPage-DIhoFOd9.mjs"));
+const SubscriptionsPage = lazy(() => import("./SubscriptionsPage-D7hsYtTB.mjs"));
+const UsagePage = lazy(() => import("./UsagePage-Di9kQ_3Z.mjs"));
 function resolvePricingEnabled(config) {
 	if (config.__meta?.pricingEnabled !== void 0) return config.__meta.pricingEnabled;
 	return isPreviewPricingEnabled();
@@ -399,13 +399,13 @@ const devPortalBillingPlugin = createPlugin((options = {}) => {
 		},
 		getIdentities: async () => [...playgroundKeyIdentities(), ...await getSignedInIdentities(resolveDevPortalApiBaseUrl(options.apiBaseUrl))],
 		getProfileMenuItems: () => [{
-			label: "My Subscriptions",
+			label: "Billing",
 			path: SUBSCRIPTIONS_PATH,
 			icon: StarsIcon,
 			category: "middle",
 			weight: 25
 		}, {
-			label: "API credentials",
+			label: "API keys",
 			path: CREDENTIALS_PATH,
 			icon: KeyRoundIcon,
 			category: "middle",

package/dist/{key-plan-note-DTWeFhn2.mjs → page-state-BB-72pbw.mjs}

@@ -1,4 +1,4 @@
-import { t as ACCOUNT_PLANS_PATH } from "./paths-ujy9wjVK.mjs";
+import { t as ACCOUNT_PLANS_PATH } from "./paths-DaVyTIDJ.mjs";
 import { Link } from "@lukoweb/apitogo/router";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@lukoweb/apitogo/ui/Button.js";
@@ -50,4 +50,24 @@ function keyPlanNote(plans) {
 }
 
 //#endregion
-export { ChoosePlanNotice as n, keyPlanNote as t };
+//#region src/utils/page-state.ts
+/** True for the error the keys endpoint gives a user without any plan (HTTP 404). */
+const isNoEntitlement = (error) => error instanceof Error && error.message === "NO_ENTITLEMENT";
+/**
+* The API keys page. The key list is what the page shows, so it decides: the credentials request only adds the gateway
+* address, which the key list also carries, and its quick 404 right after sign-up must not show "no plan" while the
+* keys are still loading.
+*/
+function apiKeysPageState(keys) {
+	if (keys.data) return keys.data.plans.length > 0 ? "ready" : "empty";
+	if (keys.error) return isNoEntitlement(keys.error) ? "empty" : "failed";
+	return "loading";
+}
+/** The Billing page: subscriptions decide; until they arrive the page is loading. */
+function billingPageState(me) {
+	if (me.data) return (me.data.subscriptions ?? []).length > 0 ? "ready" : "empty";
+	return me.error ? "failed" : "loading";
+}
+
+//#endregion
+export { ChoosePlanNotice as i, billingPageState as n, keyPlanNote as r, apiKeysPageState as t };

package/dist/paths-DaVyTIDJ.mjs

@@ -0,0 +1,14 @@
+//#region src/paths.ts
+const PRICING_PATH = "/pricing";
+const ACCOUNT_PLANS_PATH = "/account/plans";
+const CHECKOUT_PATH = "/checkout";
+const CONTACT_SALES_PATH = "/contact-sales";
+const SUBSCRIPTIONS_PATH = "/account/subscriptions";
+const CREDENTIALS_PATH = "/account/credentials";
+const USAGE_PATH = "/account/usage";
+const LOGIN_NAV_PATH = "/signin";
+/** Billing opens with this query parameter, naming the plan the user tried to buy again (API-123). */
+const ALREADY_SUBSCRIBED_PARAM = "alreadySubscribed";
+
+//#endregion
+export { CREDENTIALS_PATH as a, SUBSCRIPTIONS_PATH as c, CONTACT_SALES_PATH as i, USAGE_PATH as l, ALREADY_SUBSCRIBED_PARAM as n, LOGIN_NAV_PATH as o, CHECKOUT_PATH as r, PRICING_PATH as s, ACCOUNT_PLANS_PATH as t };

package/dist/problem-details-n20-dy3w.mjs

@@ -0,0 +1,18 @@
+//#region src/utils/problem-details.ts
+/**
+* The sentence an RFC 7807 Problem Details response carries for a person: the first field error, else `detail`, else
+* `title`. Pages show this, never the raw JSON (API-123). Null when the body is not Problem Details.
+*/
+async function readProblemDetail(response) {
+	try {
+		const body = await response.json();
+		return (body.errors ? Object.values(body.errors).flat()[0] : void 0)?.trim() || body.detail?.trim() || body.title?.trim() || null;
+	} catch {
+		return null;
+	}
+}
+/** The plans service's answer when a user starts checkout for a plan they already hold. */
+const isAlreadySubscribedMessage = (message) => /already have an active subscription/i.test(message);
+
+//#endregion
+export { readProblemDetail as n, isAlreadySubscribedMessage as t };

package/dist/{useApiKeys-CVgXfUop.mjs → useApiKeys-CEwMzqju.mjs}

@@ -1,6 +1,7 @@
 import { n as useDevPortalPreviewMode, r as useIsDemoSession, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-BstWzITX.mjs";
 import { n as useDevPortalBillingConfig } from "./DevPortalBillingContext-CR83s4LO.mjs";
-import { n as createDemoApiKeys, t as DEMO_GATEWAY_KEY_HEADER } from "./demo-session-rN2Gj4lM.mjs";
+import { n as readProblemDetail } from "./problem-details-n20-dy3w.mjs";
+import { n as createDemoApiKeys, t as DEMO_GATEWAY_KEY_HEADER } from "./demo-session-yK9qEqV-.mjs";
 import { useMutation, useQuery, useQueryClient } from "@lukoweb/apitogo/react-query";
 import { useAuth } from "@lukoweb/apitogo/hooks";
 
@@ -154,13 +155,6 @@ function useRevokeApiKey() {
 		}
 	});
 }
-async function readProblemDetail(response) {
-	try {
-		return (await response.json()).detail?.trim() || null;
-	} catch {
-		return null;
-	}
-}
 
 //#endregion
 export { playgroundKeyIdentities as a, useRevokeApiKey as i, useApiKeys as n, useCreateApiKey as r, API_KEY_CAP_REACHED as t };

package/dist/{useMySubscriptions-BtxAXA1m.mjs → useMySubscriptions-DuVq2tXL.mjs}

@@ -1,6 +1,6 @@
 import { n as useDevPortalPreviewMode, r as useIsDemoSession, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-BstWzITX.mjs";
 import { n as useDevPortalBillingConfig } from "./DevPortalBillingContext-CR83s4LO.mjs";
-import { i as createDemoMeResponse } from "./demo-session-rN2Gj4lM.mjs";
+import { i as createDemoMeResponse } from "./demo-session-yK9qEqV-.mjs";
 import { useQuery } from "@lukoweb/apitogo/react-query";
 import { useAuth } from "@lukoweb/apitogo/hooks";
 

package/package.json

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

package/dist/SubscriptionsPage-msO31jv-.mjs

@@ -1,223 +0,0 @@
-import { i as CREDENTIALS_PATH, t as ACCOUNT_PLANS_PATH } from "./paths-ujy9wjVK.mjs";
-import { a as formatPlanPrice, p as parseMonthlyQuotaCalls, s as isActiveSubscription, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-BstWzITX.mjs";
-import { n as useDevPortalBillingConfig } from "./DevPortalBillingContext-CR83s4LO.mjs";
-import { t as useMySubscriptions } from "./useMySubscriptions-BtxAXA1m.mjs";
-import { t as usePlans } from "./usePlans-DPGFWcVo.mjs";
-import { n as useApiKeys } from "./useApiKeys-CVgXfUop.mjs";
-import { t as useUsage } from "./useUsage--5sZub3M.mjs";
-import { i as hasPaymentProvider, r as checkoutConfirmingText } from "./billing-state-DbU5Lpoz.mjs";
-import { n as ChoosePlanNotice, t as keyPlanNote } from "./key-plan-note-DTWeFhn2.mjs";
-import { Head, Spinner } from "@lukoweb/apitogo/components";
-import { Link as Link$1, useSearchParams } from "@lukoweb/apitogo/router";
-import { useEffect } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useMutation } from "@lukoweb/apitogo/react-query";
-import { useAuth } from "@lukoweb/apitogo/hooks";
-import { Button as Button$1 } from "@lukoweb/apitogo/ui/Button.js";
-
-//#region src/hooks/useBillingPortal.ts
-function useBillingPortal() {
-	const apiBaseUrl = useDevPortalApiBaseUrl();
-	return useMutation({ mutationFn: async (returnUrl) => {
-		if (!apiBaseUrl) throw new Error("Dev portal API is not configured.");
-		const response = await fetch(`${apiBaseUrl}/api/v1/subscriptions/billing-portal`, {
-			method: "POST",
-			headers: {
-				Accept: "application/json",
-				"Content-Type": "application/json"
-			},
-			credentials: "include",
-			body: JSON.stringify({ returnUrl: returnUrl ?? `${window.location.origin}/account/subscriptions` })
-		});
-		if (!response.ok) throw new Error("Unable to open billing portal.");
-		const body = await response.json();
-		if (!body.url) throw new Error("Billing portal URL was not returned.");
-		window.location.assign(body.url);
-	} });
-}
-
-//#endregion
-//#region src/pages/SubscriptionsPage.tsx
-const SubscriptionsPage = () => {
-	const { billing } = useDevPortalBillingConfig();
-	const auth = useAuth();
-	const [searchParams] = useSearchParams();
-	const checkoutSuccess = searchParams.get("checkout") === "success";
-	const checkoutPaid = searchParams.get("paid") !== "0";
-	const { data: me, isLoading, refetch } = useMySubscriptions();
-	const { data: catalog } = usePlans();
-	const billingPortal = useBillingPortal();
-	const { data: usage } = useUsage("30d");
-	const { data: apiKeys } = useApiKeys();
-	const planNote = keyPlanNote(apiKeys?.plans ?? []);
-	const planBySku = new Map((catalog?.plans ?? []).map((plan) => [plan.sku, plan]));
-	const subscriptions = me?.subscriptions ?? [];
-	const activeSubscription = subscriptions.find((sub) => isActiveSubscription(sub.status));
-	const activePlan = activeSubscription ? planBySku.get(activeSubscription.planSku) : void 0;
-	const confirmingPayment = checkoutSuccess && !isLoading && !activeSubscription;
-	useEffect(() => {
-		if (!confirmingPayment) return;
-		let attempts = 0;
-		const timer = setInterval(() => {
-			attempts += 1;
-			refetch();
-			if (attempts >= 30) clearInterval(timer);
-		}, 2e3);
-		return () => clearInterval(timer);
-	}, [confirmingPayment, refetch]);
-	const monthlyQuota = activePlan ? parseMonthlyQuotaCalls(activePlan.limitsJson) : null;
-	const usedRequests = usage?.requestCount ?? 0;
-	const quotaPct = monthlyQuota && monthlyQuota > 0 ? Math.min(100, Math.round(usedRequests / monthlyQuota * 100)) : null;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "px-8 py-7",
-		children: [
-			/* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx("title", { children: "Billing" }) }),
-			/* @__PURE__ */ jsx("h1", {
-				className: "mb-2 text-[1.6rem] font-bold tracking-[-0.01em]",
-				children: "Billing"
-			}),
-			/* @__PURE__ */ jsx("p", {
-				className: "mb-8 text-muted-foreground",
-				children: "Manage your plan, payment method, and invoices."
-			}),
-			confirmingPayment ? /* @__PURE__ */ jsx("div", {
-				className: "mb-6 rounded-xl border border-border bg-card p-4 text-sm",
-				children: checkoutConfirmingText(checkoutPaid)
-			}) : null,
-			checkoutSuccess && activeSubscription ? /* @__PURE__ */ jsx("div", {
-				className: "mb-6 rounded-xl border border-green-500/30 bg-green-500/10 p-4 text-sm",
-				children: planNote ? /* @__PURE__ */ jsxs(Fragment, { children: [
-					planNote.text,
-					" ",
-					/* @__PURE__ */ jsx(Link$1, {
-						to: CREDENTIALS_PATH,
-						className: "font-medium underline",
-						children: "Create the key"
-					}),
-					"."
-				] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-					"Your subscription is active.",
-					" ",
-					/* @__PURE__ */ jsx(Link$1, {
-						to: CREDENTIALS_PATH,
-						className: "font-medium underline",
-						children: "View your API credentials"
-					}),
-					"."
-				] })
-			}) : null,
-			isLoading ? /* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground",
-				children: "Loading billing details…"
-			}) : null,
-			!isLoading && activeSubscription ? /* @__PURE__ */ jsxs("div", {
-				className: "mb-8 rounded-xl border border-border bg-card p-6",
-				children: [
-					/* @__PURE__ */ jsx("p", {
-						className: "text-xs font-medium uppercase tracking-[0.05em] text-muted-foreground",
-						children: "Current plan"
-					}),
-					/* @__PURE__ */ jsx("h2", {
-						className: "mt-2 text-2xl font-bold",
-						children: activePlan?.displayName ?? activeSubscription.planSku
-					}),
-					activePlan ? /* @__PURE__ */ jsx("p", {
-						className: "mt-1 text-sm text-muted-foreground",
-						children: formatPlanPrice(activePlan)
-					}) : /* @__PURE__ */ jsx("p", {
-						className: "mt-1 text-sm text-muted-foreground",
-						children: "This plan is no longer offered. Your access continues until you cancel or change plan."
-					}),
-					activeSubscription.currentPeriodEnd ? /* @__PURE__ */ jsxs("p", {
-						className: "mt-3 text-sm text-muted-foreground",
-						children: [
-							"Renews",
-							" ",
-							new Date(activeSubscription.currentPeriodEnd).toLocaleDateString()
-						]
-					}) : null,
-					quotaPct != null && monthlyQuota != null ? /* @__PURE__ */ jsxs("div", {
-						className: "mt-5",
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "mb-1.5 flex justify-between text-xs text-muted-foreground",
-							children: [/* @__PURE__ */ jsx("span", { children: "Monthly requests" }), /* @__PURE__ */ jsxs("span", { children: [
-								usedRequests.toLocaleString(),
-								" /",
-								" ",
-								monthlyQuota.toLocaleString()
-							] })]
-						}), /* @__PURE__ */ jsx("div", {
-							className: "h-2 rounded-full bg-muted",
-							children: /* @__PURE__ */ jsx("div", {
-								className: "h-full rounded-full bg-primary transition-[width]",
-								style: { width: `${quotaPct}%` }
-							})
-						})]
-					}) : null
-				]
-			}) : null,
-			!isLoading && subscriptions.length === 0 ? /* @__PURE__ */ jsx(ChoosePlanNotice, {
-				className: "mb-8 rounded-xl border border-dashed p-8 text-center",
-				body: "You do not have a plan yet. Choose one to start using the API; your billing details appear here afterwards."
-			}) : null,
-			!isLoading && subscriptions.length > 1 ? /* @__PURE__ */ jsx("div", {
-				className: "mb-8 space-y-4",
-				children: subscriptions.map((subscription) => {
-					const plan = planBySku.get(subscription.planSku);
-					return /* @__PURE__ */ jsx("article", {
-						className: "rounded-xl border bg-card p-5",
-						children: /* @__PURE__ */ jsxs("div", {
-							className: "flex flex-wrap items-start justify-between gap-4",
-							children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
-								className: "font-semibold",
-								children: plan?.displayName ?? subscription.planSku
-							}), plan ? /* @__PURE__ */ jsx("p", {
-								className: "mt-1 text-sm text-muted-foreground",
-								children: formatPlanPrice(plan)
-							}) : null] }), /* @__PURE__ */ jsx("span", {
-								className: "rounded-full bg-muted px-3 py-1 text-xs font-medium text-muted-foreground",
-								children: subscription.status
-							})]
-						})
-					}, `${subscription.planSku}-${subscription.status}`);
-				})
-			}) : null,
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex flex-wrap gap-3",
-				children: [
-					/* @__PURE__ */ jsx(Button$1, {
-						variant: "outline",
-						asChild: true,
-						children: /* @__PURE__ */ jsx(Link$1, {
-							to: ACCOUNT_PLANS_PATH,
-							children: "Change plan"
-						})
-					}),
-					auth.isAuthenticated && hasPaymentProvider(billing) ? /* @__PURE__ */ jsx(Button$1, {
-						variant: "default",
-						disabled: billingPortal.isPending,
-						onClick: () => {
-							billingPortal.mutate();
-						},
-						children: billingPortal.isPending ? /* @__PURE__ */ jsx(Spinner, {}) : "Manage payment & invoices"
-					}) : null,
-					auth.isAuthenticated ? /* @__PURE__ */ jsx(Button$1, {
-						variant: "secondary",
-						asChild: true,
-						children: /* @__PURE__ */ jsx(Link$1, {
-							to: CREDENTIALS_PATH,
-							children: "API credentials"
-						})
-					}) : null
-				]
-			}),
-			billingPortal.isError ? /* @__PURE__ */ jsx("p", {
-				className: "mt-4 text-sm text-destructive",
-				children: billingPortal.error instanceof Error ? billingPortal.error.message : "Unable to open billing portal."
-			}) : null
-		]
-	});
-};
-
-//#endregion
-export { SubscriptionsPage as default };

package/dist/paths-ujy9wjVK.mjs

@@ -1,12 +0,0 @@
-//#region src/paths.ts
-const PRICING_PATH = "/pricing";
-const ACCOUNT_PLANS_PATH = "/account/plans";
-const CHECKOUT_PATH = "/checkout";
-const CONTACT_SALES_PATH = "/contact-sales";
-const SUBSCRIPTIONS_PATH = "/account/subscriptions";
-const CREDENTIALS_PATH = "/account/credentials";
-const USAGE_PATH = "/account/usage";
-const LOGIN_NAV_PATH = "/signin";
-
-//#endregion
-export { LOGIN_NAV_PATH as a, USAGE_PATH as c, CREDENTIALS_PATH as i, CHECKOUT_PATH as n, PRICING_PATH as o, CONTACT_SALES_PATH as r, SUBSCRIPTIONS_PATH as s, ACCOUNT_PLANS_PATH as t };