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

package/dist/index.d.mts

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

package/dist/index.mjs

@@ -1,73 +1,16 @@
-import { cn, createPlugin } from "@lukoweb/apitogo";
-import { KeyRoundIcon, ShieldIcon, StarsIcon } from "@lukoweb/apitogo/icons";
 import { Button, ClientOnly, Head, Heading } from "@lukoweb/apitogo/components";
-import { Link, Outlet, useNavigate, useSearchParams } from "@lukoweb/apitogo/router";
+import { CreditCardIcon, KeyRoundIcon, ShieldIcon, StarsIcon } from "@lukoweb/apitogo/icons";
 import { createContext, useContext, useEffect, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { cn, createPlugin } from "@lukoweb/apitogo";
+import { Link, Navigate, Outlet, useNavigate, useSearchParams } from "@lukoweb/apitogo/router";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@lukoweb/apitogo/ui/AlertDialog.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMutation, useQuery, useQueryClient } from "@lukoweb/apitogo/react-query";
 import { useAuth } from "@lukoweb/apitogo/hooks";
-import { useQuery } from "@lukoweb/apitogo/react-query";
 import { Alert, AlertAction, AlertDescription } from "@lukoweb/apitogo/ui/Alert";
 import { Button as Button$1 } from "@lukoweb/apitogo/ui/Button";
 import { Secret } from "@lukoweb/apitogo/ui/Secret.js";
 
-//#region src/DevPortalBillingContext.tsx
-const DevPortalBillingContext = createContext({});
-const DevPortalBillingProvider = ({ options, children }) => /* @__PURE__ */ jsx(DevPortalBillingContext.Provider, {
-	value: options,
-	children
-});
-const useDevPortalBillingConfig = () => useContext(DevPortalBillingContext);
-
-//#endregion
-//#region src/DevPortalBillingWrapper.tsx
-const DevPortalBillingWrapper = ({ options = {} }) => /* @__PURE__ */ jsx(DevPortalBillingProvider, {
-	options,
-	children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Outlet, {}) })
-});
-
-//#endregion
-//#region src/components/RedirectPage.tsx
-const RedirectPage = ({ icon: Icon, title, description, url, children }) => {
-	useEffect(() => {
-		if (url) window.location.assign(url);
-	}, [url]);
-	return /* @__PURE__ */ jsx("div", {
-		className: "flex min-h-screen items-center justify-center bg-muted",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex max-w-md flex-col items-center space-y-6 text-center",
-			children: [
-				/* @__PURE__ */ jsx("div", {
-					className: "relative",
-					children: /* @__PURE__ */ jsx("div", {
-						className: "flex h-24 w-24 items-center justify-center rounded-full bg-foreground/10",
-						children: /* @__PURE__ */ jsx(Icon, { className: "h-12 w-12 text-foreground" })
-					})
-				}),
-				children,
-				/* @__PURE__ */ jsxs("div", {
-					className: "space-y-2",
-					children: [/* @__PURE__ */ jsx("h2", {
-						className: "text-2xl font-bold text-card-foreground",
-						children: title
-					}), /* @__PURE__ */ jsx("p", {
-						className: "text-muted-foreground",
-						children: description
-					})]
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex space-x-2",
-					children: [
-						/* @__PURE__ */ jsx("div", { className: "h-3 w-3 animate-pulse rounded-full bg-primary [animation-delay:-0.3s]" }),
-						/* @__PURE__ */ jsx("div", { className: "h-3 w-3 animate-pulse rounded-full bg-primary [animation-delay:-0.15s]" }),
-						/* @__PURE__ */ jsx("div", { className: "h-3 w-3 animate-pulse rounded-full bg-primary" })
-					]
-				})
-			]
-		})
-	});
-};
-
-//#endregion
 //#region src/utils/dev-portal-api.ts
 const DEV_PORTAL_PLACEHOLDER_API_URL = "https://dp-example.azurecontainerapps.io";
 function resolveDevPortalApiBaseUrl(configuredUrl) {
@@ -139,6 +82,99 @@ function isActiveSubscription(status) {
 	return status.toLowerCase() === "active";
 }
 
+//#endregion
+//#region src/components/PricingCard.tsx
+const PricingCard = ({ plan, mode = "public", subscriptionStatus, isSubscribed = false, onUnsubscribe, isCanceling = false, cancelDisabled = false }) => {
+	const limitsSummary = summarizeLimits(plan.limitsJson);
+	const isActive = isSubscribed || isActiveSubscription(subscriptionStatus ?? "");
+	return /* @__PURE__ */ jsxs("article", {
+		className: cn("flex w-full max-w-sm flex-col rounded-xl border bg-card/60 p-6 shadow-xs", isActive && mode === "account" && "border-primary/40 ring-1 ring-primary/20"),
+		"data-testid": `pricing-card-${plan.sku}`,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start justify-between gap-2",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-xl font-semibold",
+					children: plan.displayName
+				}), isActive && mode === "account" ? /* @__PURE__ */ jsx("span", {
+					className: "shrink-0 rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary",
+					"data-testid": `subscribed-badge-${plan.sku}`,
+					children: "Subscribed"
+				}) : null]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "mt-2 text-3xl font-bold",
+				children: formatPlanPrice(plan)
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "mt-1 text-sm text-muted-foreground",
+				children: formatBillingPeriod(plan.billingPeriod)
+			}),
+			limitsSummary ? /* @__PURE__ */ jsx("p", {
+				className: "mt-4 text-sm text-muted-foreground",
+				children: limitsSummary
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: "mt-6 space-y-2",
+				children: mode === "account" ? isActive ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(Button, {
+						variant: "secondary",
+						className: "w-full",
+						disabled: true,
+						children: "Current plan"
+					}),
+					onUnsubscribe ? /* @__PURE__ */ jsxs(AlertDialog, { children: [/* @__PURE__ */ jsx(AlertDialogTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							className: "w-full",
+							disabled: cancelDisabled || isCanceling,
+							"data-testid": `unsubscribe-${plan.sku}`,
+							children: isCanceling ? "Canceling…" : "Unsubscribe"
+						})
+					}), /* @__PURE__ */ jsxs(AlertDialogContent, { children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsxs(AlertDialogTitle, { children: [
+						"Unsubscribe from ",
+						plan.displayName,
+						"?"
+					] }), /* @__PURE__ */ jsx(AlertDialogDescription, { children: "Your API access for this plan will be revoked. You can subscribe again later." })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, { children: "Keep subscription" }), /* @__PURE__ */ jsx(AlertDialogAction, {
+						onClick: () => onUnsubscribe(plan.sku),
+						disabled: isCanceling,
+						children: "Unsubscribe"
+					})] })] })] }) : null,
+					cancelDisabled ? /* @__PURE__ */ jsx("p", {
+						className: "text-center text-xs text-muted-foreground",
+						children: "Unsubscribe is available after the portal is published."
+					}) : null
+				] }) : /* @__PURE__ */ jsx(Button, {
+					variant: "default",
+					className: "w-full",
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Link, {
+						to: `/checkout?planSku=${encodeURIComponent(plan.sku)}`,
+						children: plan.isFree ? "Get started" : "Subscribe"
+					})
+				}) : isActive ? /* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					className: "w-full",
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Link, {
+						to: "/account/subscriptions",
+						children: "Manage subscription"
+					})
+				}) : /* @__PURE__ */ jsx(Button, {
+					variant: "default",
+					className: "w-full",
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Link, {
+						to: `/checkout?planSku=${encodeURIComponent(plan.sku)}`,
+						children: plan.isFree ? "Get started" : "Subscribe"
+					})
+				})
+			})
+		]
+	});
+};
+
 //#endregion
 //#region src/hooks/useDevPortalApiBaseUrl.ts
 function useDevPortalApiBaseUrl() {
@@ -153,8 +189,221 @@ function useDevPortalPreviewMode() {
 	return isPlaceholderDevPortalApiUrl(apiBaseUrl);
 }
 
+//#endregion
+//#region src/hooks/useCancelSubscription.ts
+function useCancelSubscription() {
+	const apiBaseUrl = useDevPortalApiBaseUrl();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: async (planSku) => {
+			if (!apiBaseUrl) throw new Error("Dev portal API is not configured.");
+			const response = await fetch(`${apiBaseUrl}/api/v1/subscriptions/cancel`, {
+				method: "POST",
+				headers: {
+					Accept: "application/json",
+					"Content-Type": "application/json"
+				},
+				credentials: "include",
+				body: JSON.stringify({ planSku })
+			});
+			if (!response.ok) {
+				const detail = await response.text();
+				throw new Error(detail || "Failed to cancel subscription.");
+			}
+			return await response.json();
+		},
+		onSuccess: async () => {
+			await queryClient.invalidateQueries({ queryKey: ["dev-portal-me", apiBaseUrl] });
+		}
+	});
+}
+
+//#endregion
+//#region src/hooks/useMySubscriptions.ts
+function useMySubscriptions() {
+	const auth = useAuth();
+	const apiBaseUrl = useDevPortalApiBaseUrl();
+	const isPreview = useDevPortalPreviewMode();
+	return useQuery({
+		queryKey: ["dev-portal-me", apiBaseUrl],
+		enabled: auth.isAuthenticated && !isPreview && Boolean(apiBaseUrl),
+		queryFn: async () => {
+			const response = await fetch(`${apiBaseUrl}/api/v1/auth/me`, {
+				method: "GET",
+				headers: { Accept: "application/json" },
+				credentials: "include"
+			});
+			if (!response.ok) throw new Error("Failed to load subscription status.");
+			return await response.json();
+		}
+	});
+}
+
+//#endregion
+//#region src/hooks/usePlans.ts
+function usePlans() {
+	const apiBaseUrl = useDevPortalApiBaseUrl();
+	const isPreview = useDevPortalPreviewMode();
+	return useQuery({
+		queryKey: [
+			"dev-portal-plans",
+			apiBaseUrl,
+			isPreview
+		],
+		queryFn: async () => {
+			if (isPreview) return parseMockPlans();
+			if (!apiBaseUrl) return { plans: [] };
+			const response = await fetch(`${apiBaseUrl}/api/v1/plans`, { headers: { Accept: "application/json" } });
+			if (!response.ok) throw new Error("Failed to load plans.");
+			return await response.json();
+		}
+	});
+}
+
+//#endregion
+//#region src/pages/AccountPlansPage.tsx
+const AccountPlansPage = () => {
+	const isPreview = useDevPortalPreviewMode();
+	const { data: catalog, isLoading, isError } = usePlans();
+	const { data: me } = useMySubscriptions();
+	const cancelMutation = useCancelSubscription();
+	const [cancelingSku, setCancelingSku] = useState(null);
+	const subscriptionBySku = new Map((me?.subscriptions ?? []).map((sub) => [sub.planSku, sub]));
+	const handleUnsubscribe = async (planSku) => {
+		setCancelingSku(planSku);
+		try {
+			await cancelMutation.mutateAsync(planSku);
+		} finally {
+			setCancelingSku(null);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mx-auto max-w-screen-xl px-4 pb-16 pt-(--padding-content-top) lg:px-8",
+		children: [
+			/* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx("title", { children: "Plans & billing" }) }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-8 flex items-start gap-4",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex size-12 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary",
+					children: /* @__PURE__ */ jsx(CreditCardIcon, { size: 24 })
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "space-y-1",
+					children: [/* @__PURE__ */ jsx("h1", {
+						className: "text-3xl font-semibold tracking-tight",
+						children: "Plans & billing"
+					}), /* @__PURE__ */ jsx("p", {
+						className: "max-w-2xl text-muted-foreground",
+						children: "Compare plans, manage your subscriptions, and change tiers."
+					})]
+				})]
+			}),
+			isPreview ? /* @__PURE__ */ jsx("div", {
+				className: "mb-8 rounded-xl border border-dashed bg-muted/20 p-6 text-center text-sm text-muted-foreground",
+				children: "Local preview uses mock plans. Subscribe and unsubscribe activate after the portal is published."
+			}) : null,
+			cancelMutation.isError ? /* @__PURE__ */ jsx("div", {
+				className: "mb-6 rounded-xl border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive",
+				children: cancelMutation.error instanceof Error ? cancelMutation.error.message : "Failed to cancel subscription."
+			}) : null,
+			isLoading ? /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground",
+				children: "Loading plans…"
+			}) : null,
+			isError ? /* @__PURE__ */ jsx("p", {
+				className: "text-destructive",
+				children: "Unable to load plans."
+			}) : null,
+			catalog && catalog.plans.length > 0 ? /* @__PURE__ */ jsx("div", {
+				className: "grid grid-cols-1 justify-center gap-6 sm:grid-cols-[repeat(auto-fit,minmax(280px,max-content))]",
+				children: catalog.plans.map((plan) => {
+					const subscription = subscriptionBySku.get(plan.sku);
+					const isSubscribed = isActiveSubscription(subscription?.status ?? "");
+					return /* @__PURE__ */ jsx(PricingCard, {
+						plan,
+						mode: "account",
+						subscriptionStatus: subscription?.status,
+						isSubscribed,
+						onUnsubscribe: isPreview ? void 0 : handleUnsubscribe,
+						isCanceling: cancelingSku === plan.sku,
+						cancelDisabled: isPreview
+					}, plan.sku);
+				})
+			}) : !isLoading && !isError ? /* @__PURE__ */ jsx("div", {
+				className: "rounded-xl border border-dashed p-8 text-center text-sm text-muted-foreground",
+				children: "No plans are available yet. Sync plans from your APItoGo manifest or platform gateway."
+			}) : null
+		]
+	});
+};
+
+//#endregion
+//#region src/DevPortalBillingContext.tsx
+const DevPortalBillingContext = createContext({});
+const DevPortalBillingProvider = ({ options, children }) => /* @__PURE__ */ jsx(DevPortalBillingContext.Provider, {
+	value: options,
+	children
+});
+const useDevPortalBillingConfig = () => useContext(DevPortalBillingContext);
+
+//#endregion
+//#region src/DevPortalBillingWrapper.tsx
+const DevPortalBillingWrapper = ({ options = {} }) => /* @__PURE__ */ jsx(DevPortalBillingProvider, {
+	options,
+	children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Outlet, {}) })
+});
+
+//#endregion
+//#region src/components/RedirectPage.tsx
+const RedirectPage = ({ icon: Icon, title, description, url, children }) => {
+	useEffect(() => {
+		if (url) window.location.assign(url);
+	}, [url]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex min-h-screen items-center justify-center bg-muted",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex max-w-md flex-col items-center space-y-6 text-center",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "relative",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex h-24 w-24 items-center justify-center rounded-full bg-foreground/10",
+						children: /* @__PURE__ */ jsx(Icon, { className: "h-12 w-12 text-foreground" })
+					})
+				}),
+				children,
+				/* @__PURE__ */ jsxs("div", {
+					className: "space-y-2",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "text-2xl font-bold text-card-foreground",
+						children: title
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground",
+						children: description
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex space-x-2",
+					children: [
+						/* @__PURE__ */ jsx("div", { className: "h-3 w-3 animate-pulse rounded-full bg-primary [animation-delay:-0.3s]" }),
+						/* @__PURE__ */ jsx("div", { className: "h-3 w-3 animate-pulse rounded-full bg-primary [animation-delay:-0.15s]" }),
+						/* @__PURE__ */ jsx("div", { className: "h-3 w-3 animate-pulse rounded-full bg-primary" })
+					]
+				})
+			]
+		})
+	});
+};
+
+//#endregion
+//#region src/paths.ts
+const PRICING_PATH = "/pricing";
+const CHECKOUT_PATH = "/checkout";
+const SUBSCRIPTIONS_PATH = "/account/subscriptions";
+const CREDENTIALS_PATH = "/account/credentials";
+
 //#endregion
 //#region src/pages/CheckoutPage.tsx
+const ACCOUNT_PLANS_PATH = "/account/plans";
 const CheckoutPage = () => {
 	const [searchParams] = useSearchParams();
 	const planSku = searchParams.get("planSku") ?? "";
@@ -162,6 +411,7 @@ const CheckoutPage = () => {
 	const auth = useAuth();
 	const apiBaseUrl = useDevPortalApiBaseUrl();
 	const isPreview = useDevPortalPreviewMode();
+	const plansPath = auth.isAuthenticated ? ACCOUNT_PLANS_PATH : PRICING_PATH;
 	const checkoutQuery = useQuery({
 		queryKey: [
 			"dev-portal-checkout",
@@ -198,9 +448,9 @@ const CheckoutPage = () => {
 			"Missing plan SKU.",
 			" ",
 			/* @__PURE__ */ jsx(Link, {
-				to: "/pricing",
+				to: plansPath,
 				className: "text-primary underline",
-				children: "Back to pricing"
+				children: "Back to plans"
 			})
 		]
 	});
@@ -219,8 +469,8 @@ const CheckoutPage = () => {
 				asChild: true,
 				variant: "outline",
 				children: /* @__PURE__ */ jsx(Link, {
-					to: "/pricing",
-					children: "Back to pricing"
+					to: plansPath,
+					children: "Back to plans"
 				})
 			})
 		]
@@ -241,8 +491,8 @@ const CheckoutPage = () => {
 				size: "xs",
 				asChild: true,
 				children: /* @__PURE__ */ jsx(Link, {
-					to: "/pricing",
-					children: "Back to pricing"
+					to: plansPath,
+					children: "Back to plans"
 				})
 			}) })]
 		}) : null
@@ -272,27 +522,6 @@ function useCredentials() {
 	});
 }
 
-//#endregion
-//#region src/hooks/usePlans.ts
-function usePlans() {
-	const apiBaseUrl = useDevPortalApiBaseUrl();
-	const isPreview = useDevPortalPreviewMode();
-	return useQuery({
-		queryKey: [
-			"dev-portal-plans",
-			apiBaseUrl,
-			isPreview
-		],
-		queryFn: async () => {
-			if (isPreview) return parseMockPlans();
-			if (!apiBaseUrl) return { plans: [] };
-			const response = await fetch(`${apiBaseUrl}/api/v1/plans`, { headers: { Accept: "application/json" } });
-			if (!response.ok) throw new Error("Failed to load plans.");
-			return await response.json();
-		}
-	});
-}
-
 //#endregion
 //#region src/pages/CredentialsPage.tsx
 const CredentialsPage = () => {
@@ -338,7 +567,7 @@ const CredentialsPage = () => {
 					className: "mt-4",
 					asChild: true,
 					children: /* @__PURE__ */ jsx(Link, {
-						to: "/pricing",
+						to: "/account/plans",
 						children: "View plans"
 					})
 				})]
@@ -356,7 +585,7 @@ const CredentialsPage = () => {
 					className: "mt-4",
 					asChild: true,
 					children: /* @__PURE__ */ jsx(Link, {
-						to: "/pricing",
+						to: "/account/plans",
 						children: "View plans"
 					})
 				})]
@@ -447,75 +676,6 @@ const CredentialsPage = () => {
 	});
 };
 
-//#endregion
-//#region src/components/PricingCard.tsx
-const PricingCard = ({ plan, isSubscribed = false }) => {
-	const limitsSummary = summarizeLimits(plan.limitsJson);
-	return /* @__PURE__ */ jsxs("article", {
-		className: cn("flex w-full max-w-sm flex-col rounded-xl border bg-card/60 p-6 shadow-xs"),
-		"data-testid": `pricing-card-${plan.sku}`,
-		children: [
-			/* @__PURE__ */ jsx("h2", {
-				className: "text-xl font-semibold",
-				children: plan.displayName
-			}),
-			/* @__PURE__ */ jsx("p", {
-				className: "mt-2 text-3xl font-bold",
-				children: formatPlanPrice(plan)
-			}),
-			/* @__PURE__ */ jsx("p", {
-				className: "mt-1 text-sm text-muted-foreground",
-				children: formatBillingPeriod(plan.billingPeriod)
-			}),
-			limitsSummary ? /* @__PURE__ */ jsx("p", {
-				className: "mt-4 text-sm text-muted-foreground",
-				children: limitsSummary
-			}) : null,
-			/* @__PURE__ */ jsx("div", {
-				className: "mt-6",
-				children: isSubscribed ? /* @__PURE__ */ jsx(Button, {
-					variant: "secondary",
-					className: "w-full",
-					asChild: true,
-					children: /* @__PURE__ */ jsx(Link, {
-						to: "/account/subscriptions",
-						children: "Manage subscription"
-					})
-				}) : /* @__PURE__ */ jsx(Button, {
-					variant: "default",
-					className: "w-full",
-					asChild: true,
-					children: /* @__PURE__ */ jsx(Link, {
-						to: `/checkout?planSku=${encodeURIComponent(plan.sku)}`,
-						children: plan.isFree ? "Get started" : "Subscribe"
-					})
-				})
-			})
-		]
-	});
-};
-
-//#endregion
-//#region src/hooks/useMySubscriptions.ts
-function useMySubscriptions() {
-	const auth = useAuth();
-	const apiBaseUrl = useDevPortalApiBaseUrl();
-	const isPreview = useDevPortalPreviewMode();
-	return useQuery({
-		queryKey: ["dev-portal-me", apiBaseUrl],
-		enabled: auth.isAuthenticated && !isPreview && Boolean(apiBaseUrl),
-		queryFn: async () => {
-			const response = await fetch(`${apiBaseUrl}/api/v1/auth/me`, {
-				method: "GET",
-				headers: { Accept: "application/json" },
-				credentials: "include"
-			});
-			if (!response.ok) throw new Error("Failed to load subscription status.");
-			return await response.json();
-		}
-	});
-}
-
 //#endregion
 //#region src/pages/PricingPage.tsx
 const PricingPage = () => {
@@ -524,6 +684,10 @@ const PricingPage = () => {
 	const isPreview = useDevPortalPreviewMode();
 	const { data: catalog, isLoading, isError } = usePlans();
 	const { data: me } = useMySubscriptions();
+	if (auth.isAuthenticated) return /* @__PURE__ */ jsx(Navigate, {
+		to: "/account/plans",
+		replace: true
+	});
 	const activeSkus = new Set((me?.subscriptions ?? []).filter((sub) => isActiveSubscription(sub.status)).map((sub) => sub.planSku));
 	const title = pricing?.title ?? "Pricing";
 	const subtitle = pricing?.subtitle ?? "Compare plans and subscribe when you are ready to integrate.";
@@ -570,34 +734,17 @@ const PricingPage = () => {
 				className: "grid grid-cols-1 justify-center gap-6 sm:grid-cols-[repeat(auto-fit,minmax(280px,max-content))]",
 				children: catalog.plans.map((plan) => /* @__PURE__ */ jsx(PricingCard, {
 					plan,
+					mode: "public",
 					isSubscribed: activeSkus.has(plan.sku)
 				}, plan.sku))
 			}) : !isLoading && !isError ? /* @__PURE__ */ jsx("div", {
 				className: "mx-auto max-w-lg rounded-xl border border-dashed p-8 text-center text-sm text-muted-foreground",
 				children: "No plans are available yet. Sync plans from your APItoGo manifest or platform gateway."
-			}) : null,
-			auth.isAuthenticated ? /* @__PURE__ */ jsx("div", {
-				className: "mt-10 text-center",
-				children: /* @__PURE__ */ jsx(Button$1, {
-					variant: "outline",
-					asChild: true,
-					children: /* @__PURE__ */ jsx(Link, {
-						to: "/account/plans",
-						children: "Manage billing"
-					})
-				})
 			}) : null
 		]
 	});
 };
 
-//#endregion
-//#region src/paths.ts
-const PRICING_PATH = "/pricing";
-const CHECKOUT_PATH = "/checkout";
-const SUBSCRIPTIONS_PATH = "/account/subscriptions";
-const CREDENTIALS_PATH = "/account/credentials";
-
 //#endregion
 //#region src/pages/SubscriptionsPage.tsx
 const SubscriptionsPage = () => {
@@ -648,7 +795,7 @@ const SubscriptionsPage = () => {
 					className: "mt-4",
 					asChild: true,
 					children: /* @__PURE__ */ jsx(Link, {
-						to: "/pricing",
+						to: "/account/plans",
 						children: "View plans"
 					})
 				})]
@@ -694,7 +841,7 @@ const SubscriptionsPage = () => {
 						variant: "outline",
 						asChild: true,
 						children: /* @__PURE__ */ jsx(Link, {
-							to: "/pricing",
+							to: "/account/plans",
 							children: "Change plan"
 						})
 					}),
@@ -725,7 +872,8 @@ const SubscriptionsPage = () => {
 const devPortalBillingPlugin = createPlugin((options = {}) => ({
 	transformConfig: ({ config, merge }) => merge({ header: { navigation: [...config.header?.navigation ?? [], {
 		label: "Pricing",
-		to: PRICING_PATH
+		to: PRICING_PATH,
+		display: "anon"
 	}] } }),
 	getProfileMenuItems: () => [{
 		label: "My Subscriptions",
@@ -774,4 +922,4 @@ const devPortalBillingPlugin = createPlugin((options = {}) => ({
 }));
 
 //#endregion
-export { CHECKOUT_PATH, CREDENTIALS_PATH, PRICING_PATH, SUBSCRIPTIONS_PATH, devPortalBillingPlugin };
+export { AccountPlansPage, CHECKOUT_PATH, CREDENTIALS_PATH, PRICING_PATH, SUBSCRIPTIONS_PATH, devPortalBillingPlugin };

package/package.json

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