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

package/dist/{AccountPlansPage-DvRFe3di.mjs → AccountPlansPage-BuM7fe82.mjs}

@@ -1,12 +1,14 @@
-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 { f as parseManifestPlans, n as useDevPortalPreviewMode, r as useIsDemoSession, s as isActiveSubscription, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-BiI2jFjU.mjs";
+import { t as PricingCard } from "./PricingCard-DFuQEw7Y.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-BYVIIWbe.mjs";
+import { t as usePlans } from "./usePlans-HyhIIuJZ.mjs";
+import { n as readPendingCheckout, t as clearPendingCheckout } from "./pending-checkout-DpVaNnTu.mjs";
 import { Head } from "@lukoweb/apitogo/components";
 import { CreditCardIcon } from "@lukoweb/apitogo/icons";
 import { useSearchParams } from "@lukoweb/apitogo/router";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMutation, useQueryClient } from "@lukoweb/apitogo/react-query";
 
@@ -43,10 +45,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 () => {
@@ -72,6 +71,10 @@ const AccountPlansPage = () => {
 	const cancelMutation = useCancelSubscription();
 	const [cancelingSku, setCancelingSku] = useState(null);
 	const subscriptionBySku = new Map((me?.subscriptions ?? []).map((sub) => [sub.planSku, sub]));
+	useEffect(() => {
+		if (checkoutCancelled) clearPendingCheckout();
+	}, [checkoutCancelled]);
+	const pendingSku = checkoutCancelled ? void 0 : readPendingCheckout();
 	const handleUnsubscribe = async (planSku) => {
 		setCancelingSku(planSku);
 		try {
@@ -135,7 +138,8 @@ const AccountPlansPage = () => {
 						isSubscribed,
 						onUnsubscribe: isPreview || isDemoSession ? void 0 : handleUnsubscribe,
 						isCanceling: cancelingSku === plan.sku,
-						cancelDisabled: isPreview || isDemoSession
+						cancelDisabled: isPreview || isDemoSession,
+						isConfirming: !isSubscribed && pendingSku === plan.sku
 					}, plan.sku);
 				})
 			}) : !isLoading && !isError ? /* @__PURE__ */ jsx("div", {

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

@@ -1,6 +1,8 @@
-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-BstWzITX.mjs";
-import { t as FREE_CHECKOUT_MARKER } from "./billing-state-DbU5Lpoz.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-BiI2jFjU.mjs";
+import { n as readProblemDetail, t as isAlreadySubscribedMessage } from "./problem-details-n20-dy3w.mjs";
+import { r as rememberPendingCheckout } from "./pending-checkout-DpVaNnTu.mjs";
+import { t as FREE_CHECKOUT_MARKER } from "./billing-state-DBQR2tad.mjs";
 import { ShieldIcon } from "@lukoweb/apitogo/icons";
 import { Link, useNavigate, useSearchParams } from "@lukoweb/apitogo/router";
 import { useEffect } from "react";
@@ -81,14 +83,23 @@ 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 checkoutUrl = checkoutQuery.data?.checkoutUrl;
+	useEffect(() => {
+		if (checkoutUrl) rememberPendingCheckout(planSku);
+	}, [checkoutUrl, planSku]);
+	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 +157,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 +177,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-BqqDmorF.mjs}

@@ -1,7 +1,8 @@
-import { o as PRICING_PATH } from "./paths-ujy9wjVK.mjs";
-import { l as isPlanCustomPriced, n as useDevPortalPreviewMode, r as useIsDemoSession, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-BstWzITX.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-BiI2jFjU.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-HyhIIuJZ.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-DjNvBBLb.mjs}

@@ -1,10 +1,10 @@
-import { t as ACCOUNT_PLANS_PATH } from "./paths-ujy9wjVK.mjs";
-import { n as useDevPortalPreviewMode, r as useIsDemoSession, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-BstWzITX.mjs";
+import { t as ACCOUNT_PLANS_PATH } from "./paths-DaVyTIDJ.mjs";
+import { n as useDevPortalPreviewMode, r as useIsDemoSession, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-BiI2jFjU.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-BOY3vIOr.mjs";
+import { n as apiReferencePath, r as ApiKeysPanel } from "./account-links-Drofs-f-.mjs";
+import { i as ChoosePlanNotice, r as keyPlanNote, t as apiKeysPageState } from "./page-state-BLL2JJBc.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-DFuQEw7Y.mjs}

@@ -1,5 +1,5 @@
-import { n as CHECKOUT_PATH, r as CONTACT_SALES_PATH } from "./paths-ujy9wjVK.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 { 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-BiI2jFjU.mjs";
 import { Button } from "@lukoweb/apitogo/components";
 import { Link as Link$1 } from "@lukoweb/apitogo/router";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@lukoweb/apitogo/ui/AlertDialog.js";
@@ -18,7 +18,7 @@ const accountCtaLabel = (plan) => {
 };
 /** Custom-priced plans skip checkout and open the contact-sales form. */
 const planCtaPath = (plan) => `${isPlanCustomPriced(plan) ? CONTACT_SALES_PATH : CHECKOUT_PATH}?planSku=${encodeURIComponent(plan.sku)}`;
-const PricingCard = ({ plan, mode = "public", subscriptionStatus, isSubscribed = false, onUnsubscribe, onSwitch, isSwitching = false, isCanceling = false, cancelDisabled = false, featured = false }) => {
+const PricingCard = ({ plan, mode = "public", subscriptionStatus, isSubscribed = false, onUnsubscribe, onSwitch, isSwitching = false, isCanceling = false, cancelDisabled = false, featured = false, isConfirming = false }) => {
 	const isActive = isSubscribed || isActiveSubscription(subscriptionStatus ?? "");
 	const features = listPlanFeatureLines(plan);
 	const displayPrice = formatPlanDisplayPrice(plan);
@@ -83,7 +83,13 @@ const PricingCard = ({ plan, mode = "public", subscriptionStatus, isSubscribed =
 						className: "text-center text-xs text-muted-foreground",
 						children: "Unsubscribe is available after the portal is published."
 					}) : null
-				] }) : onSwitch && !isPlanCustomPriced(plan) ? /* @__PURE__ */ jsxs(AlertDialog, { children: [/* @__PURE__ */ jsx(AlertDialogTrigger, {
+				] }) : isConfirming ? /* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					className: "w-full",
+					disabled: true,
+					"data-testid": `confirming-${plan.sku}`,
+					children: "Confirming payment…"
+				}) : onSwitch && !isPlanCustomPriced(plan) ? /* @__PURE__ */ jsxs(AlertDialog, { children: [/* @__PURE__ */ jsx(AlertDialogTrigger, {
 					asChild: true,
 					children: /* @__PURE__ */ jsx(Button, {
 						variant: featured ? "default" : "outline",

package/dist/{PricingPage-DnQQfy9L.mjs → PricingPage-SpL81vpd.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 { f as parseManifestPlans, h as pickFeaturedPlanSku, n as useDevPortalPreviewMode } from "./useDevPortalApiBaseUrl-BiI2jFjU.mjs";
+import { t as PricingCard } from "./PricingCard-DFuQEw7Y.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-HyhIIuJZ.mjs";
+import { t as isPreviewPricingEnabled } from "./pricing-config-Bc6eWFUO.mjs";
+import { a as isPricingLoading, n as buildCompareRows } from "./billing-state-DBQR2tad.mjs";
 import { Head, Heading } from "@lukoweb/apitogo/components";
 import { Navigate } from "@lukoweb/apitogo/router";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -66,15 +66,16 @@ const DEFAULT_COMPARE_ROWS = [
 		]
 	}
 ];
+/** Only what the platform itself does, so the defaults never promise anything for the tenant (API-124). */
 const DEFAULT_FAQS = [{
-	question: "What happens if I exceed my quota?",
-	answer: "Requests over your monthly quota return a 429 response so you can test rate-limit handling instead of being cut off unexpectedly."
+	question: "What happens if I go over my plan's limits?",
+	answer: "Calls over the rate limit or the quota are refused with a 429 response, and its Retry-After header says when to try again."
 }, {
-	question: "Can I change plans later?",
-	answer: "Yes, upgrade or downgrade any time from your billing page. Changes apply on your next billing cycle."
+	question: "Can I have more than one plan?",
+	answer: "Yes. Each plan has its own API keys and limits: create a key for a plan on the API keys page and use it in your app."
 }];
 const PricingPage = () => {
-	const { pricing, previewPlans } = useDevPortalBillingConfig();
+	const { pricing, previewPlans, featuredPlanSku } = useDevPortalBillingConfig();
 	const isPreview = useDevPortalPreviewMode();
 	const pricingEnabled = isPreviewPricingEnabled() || isPreview;
 	const livePlans = usePlans();
@@ -92,10 +93,10 @@ const PricingPage = () => {
 		to: "/",
 		replace: true
 	});
-	const title = pricing?.title ?? "Pay for what you call";
-	const subtitle = pricing?.subtitle ?? "Every plan includes the full endpoint catalog. Higher tiers raise your request quota, rate limit, and support level.";
+	const title = pricing?.title ?? "Plans and pricing";
+	const subtitle = pricing?.subtitle ?? "Choose the plan that fits how you use the API. Each plan lists its limits and what it includes.";
 	const plans = catalog?.plans ?? [];
-	const featuredSku = pickFeaturedPlanSku(plans);
+	const featuredSku = pickFeaturedPlanSku(plans, featuredPlanSku);
 	const compareRows = buildCompareRows({
 		plans,
 		configuredRows: pricing?.compareRows,

package/dist/SubscriptionsPage-CwsBtNld.mjs

@@ -0,0 +1,274 @@
+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-BiI2jFjU.mjs";
+import { n as useDevPortalBillingConfig } from "./DevPortalBillingContext-CR83s4LO.mjs";
+import { t as useMySubscriptions } from "./useMySubscriptions-BYVIIWbe.mjs";
+import { t as usePlans } from "./usePlans-HyhIIuJZ.mjs";
+import { n as readPendingCheckout, t as clearPendingCheckout } from "./pending-checkout-DpVaNnTu.mjs";
+import { n as useApiKeys } from "./useApiKeys-BOY3vIOr.mjs";
+import { t as useUsage } from "./useUsage-B5x9YuKa.mjs";
+import { i as hasPaymentProvider, r as checkoutConfirmingText } from "./billing-state-DBQR2tad.mjs";
+import { i as ChoosePlanNotice, n as billingPageState, r as keyPlanNote } from "./page-state-BLL2JJBc.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 pendingSku = checkoutSuccess ? readPendingCheckout() : void 0;
+	const pendingActive = pendingSku !== void 0 && activeSubscriptions.some((sub) => sub.planSku === pendingSku);
+	const confirmingPayment = checkoutSuccess && !isLoading && (pendingSku !== void 0 ? !pendingActive : !hasActivePlan);
+	useEffect(() => {
+		if (pendingActive) clearPendingCheckout();
+	}, [pendingActive]);
+	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 && !confirmingPayment ? /* @__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" && !confirmingPayment ? /* @__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 };