@lukoweb/apitogo-plugin-dev-portal-billing 0.1.51 → 0.1.53

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import * as _lukoweb_apitogo0 from "@lukoweb/apitogo";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _lukoweb_apitogo_plugins0 from "@lukoweb/apitogo/plugins";
 
 //#region src/pages/AccountPlansPage.d.ts
 declare const AccountPlansPage: () => react_jsx_runtime0.JSX.Element;
@@ -9,7 +9,16 @@ type DevPortalBillingConfig = {
   pricing?: {
     title?: string;
     subtitle?: string;
-  };
+  }; /** Local preview plan catalog (from `apitogo.config.json` `plans`). */
+  previewPlans?: Array<{
+    sku: string;
+    displayName: string;
+    priceAmount?: number;
+    priceCurrency?: string;
+    billingPeriod?: string;
+    limitsJson?: string | null;
+    includedActionKeys?: string[];
+  }>;
 };
 //#endregion
 //#region src/paths.d.ts
@@ -19,6 +28,6 @@ declare const SUBSCRIPTIONS_PATH = "/account/subscriptions";
 declare const CREDENTIALS_PATH = "/account/credentials";
 //#endregion
 //#region src/DevPortalBillingPlugin.d.ts
-declare const devPortalBillingPlugin: (options?: DevPortalBillingConfig | undefined) => _lukoweb_apitogo0.ApitogoPlugin;
+declare const devPortalBillingPlugin: (options?: DevPortalBillingConfig | undefined) => _lukoweb_apitogo_plugins0.ApitogoPlugin;
 //#endregion
 export { AccountPlansPage, CHECKOUT_PATH, CREDENTIALS_PATH, PRICING_PATH, SUBSCRIPTIONS_PATH, devPortalBillingPlugin };

package/dist/index.mjs

@@ -1,43 +1,71 @@
-import { Button, ClientOnly, Head, Heading } from "@lukoweb/apitogo/components";
+import { Button, Head, Heading } from "@lukoweb/apitogo/components";
 import { CreditCardIcon, KeyRoundIcon, ShieldIcon, StarsIcon } from "@lukoweb/apitogo/icons";
 import { createContext, useContext, useEffect, useState } from "react";
-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 { cn } from "@lukoweb/apitogo/ui/util.js";
 import manifestCatalog from "virtual:apitogo-local-manifest";
+import zudokuConfig from "virtual:zudoku-config";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMutation, useQuery, useQueryClient } from "@lukoweb/apitogo/react-query";
 import { useAuth } from "@lukoweb/apitogo/hooks";
+import { createPlugin } from "@lukoweb/apitogo/plugins";
 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";
 import { Value } from "@lukoweb/apitogo/ui/Value.js";
-import { isAuthenticationEnabled, readEffectiveManifest, resolveManifestEnv } from "@lukoweb/apitogo/local-manifest";
 
 //#region src/utils/dev-portal-api.ts
 const DEV_PORTAL_PLACEHOLDER_API_URL = "https://dp-example.azurecontainerapps.io";
 function resolveDevPortalApiBaseUrl(configuredUrl) {
 	const fromConfig = configuredUrl?.trim();
 	if (fromConfig) return fromConfig.replace(/\/+$/, "");
-	const envUrl = typeof VITE_APITOGO_DEV_PORTAL_API_URL === "string" ? VITE_APITOGO_DEV_PORTAL_API_URL.trim() : "";
+	const envUrl = (typeof VITE_APITOGO_AUTHENTICATION_API_BASE_URL === "string" ? VITE_APITOGO_AUTHENTICATION_API_BASE_URL.trim() : "") || (typeof VITE_APITOGO_DEV_PORTAL_API_URL === "string" ? VITE_APITOGO_DEV_PORTAL_API_URL.trim() : "");
 	return envUrl ? envUrl.replace(/\/+$/, "") : void 0;
 }
 function isPlaceholderDevPortalApiUrl(apiBaseUrl) {
 	if (!apiBaseUrl) return true;
 	return apiBaseUrl === DEV_PORTAL_PLACEHOLDER_API_URL || apiBaseUrl.includes("dp-example.azurecontainerapps.io");
 }
-function parseManifestPlans() {
-	if (!manifestCatalog?.plans?.length) return { plans: [] };
-	return { plans: manifestCatalog.plans.map((plan) => ({
+function mapPreviewPlans(plans) {
+	return plans.map((plan) => ({
 		sku: plan.sku,
 		displayName: plan.displayName,
-		isFree: plan.isFree,
 		priceAmount: plan.priceAmount,
 		priceCurrency: plan.priceCurrency,
 		billingPeriod: plan.billingPeriod,
 		limitsJson: plan.limitsJson,
 		includedActionKeys: plan.includedActionKeys
-	})) };
+	}));
+}
+function readModulePlanItems() {
+	const items = (zudokuConfig?.modules)?.userPanel?.plans?.items;
+	return Array.isArray(items) && items.length > 0 ? items : void 0;
+}
+function parseManifestPlans(configPlans) {
+	if (configPlans?.length) return { plans: mapPreviewPlans(configPlans.map((plan) => ({
+		sku: plan.sku,
+		displayName: plan.displayName,
+		priceAmount: plan.priceAmount ?? 0,
+		priceCurrency: plan.priceCurrency ?? "usd",
+		billingPeriod: plan.billingPeriod ?? "monthly",
+		limitsJson: plan.limitsJson ?? null,
+		includedActionKeys: plan.includedActionKeys ?? []
+	}))) };
+	if (manifestCatalog?.plans?.length) return { plans: mapPreviewPlans(manifestCatalog.plans) };
+	const metaPlans = zudokuConfig?.__meta?.previewPlans;
+	if (metaPlans?.length) return { plans: mapPreviewPlans(metaPlans) };
+	const moduleItems = readModulePlanItems();
+	if (moduleItems?.length) return { plans: mapPreviewPlans(moduleItems.map((plan) => ({
+		sku: plan.sku,
+		displayName: plan.displayName,
+		priceAmount: plan.priceAmount ?? 0,
+		priceCurrency: plan.priceCurrency ?? "usd",
+		billingPeriod: plan.billingPeriod ?? "monthly",
+		limitsJson: plan.limitsJson ?? null,
+		includedActionKeys: plan.includedActionKeys ?? []
+	}))) };
+	return { plans: [] };
 }
 function formatActionKey(actionKey) {
 	const separatorIndex = actionKey.indexOf(":");
@@ -45,7 +73,7 @@ function formatActionKey(actionKey) {
 	return `${actionKey.slice(0, separatorIndex).toUpperCase()} ${actionKey.slice(separatorIndex + 1)}`;
 }
 function formatPlanPrice(plan) {
-	if (plan.isFree || plan.priceAmount <= 0) return "Free";
+	if (plan.priceAmount <= 0) return "Free";
 	const amount = new Intl.NumberFormat(void 0, {
 		style: "currency",
 		currency: plan.priceCurrency.toUpperCase(),
@@ -56,6 +84,9 @@ function formatPlanPrice(plan) {
 	if (period === "annual" || period === "year") return `${amount}/yr`;
 	return amount;
 }
+function isPlanFree(plan) {
+	return plan.priceAmount <= 0;
+}
 function formatBillingPeriod(period) {
 	const normalized = period.toLowerCase();
 	if (normalized === "month" || normalized === "monthly") return "Monthly";
@@ -131,7 +162,7 @@ const PricingCard = ({ plan, mode = "public", subscriptionStatus, isSubscribed =
 						children: formatActionKey(actionKey)
 					}) }, actionKey))
 				})]
-			}) : plan.isFree ? /* @__PURE__ */ jsx("p", {
+			}) : isPlanFree(plan) ? /* @__PURE__ */ jsx("p", {
 				className: "mt-4 text-sm text-muted-foreground",
 				children: "API access not included"
 			}) : null,
@@ -172,7 +203,7 @@ const PricingCard = ({ plan, mode = "public", subscriptionStatus, isSubscribed =
 					asChild: true,
 					children: /* @__PURE__ */ jsx(Link, {
 						to: `/checkout?planSku=${encodeURIComponent(plan.sku)}`,
-						children: plan.isFree ? "Get started" : "Subscribe"
+						children: isPlanFree(plan) ? "Get started" : "Subscribe"
 					})
 				}) : isActive ? /* @__PURE__ */ jsx(Button, {
 					variant: "secondary",
@@ -188,7 +219,7 @@ const PricingCard = ({ plan, mode = "public", subscriptionStatus, isSubscribed =
 					asChild: true,
 					children: /* @__PURE__ */ jsx(Link, {
 						to: `/checkout?planSku=${encodeURIComponent(plan.sku)}`,
-						children: plan.isFree ? "Get started" : "Subscribe"
+						children: isPlanFree(plan) ? "Get started" : "Subscribe"
 					})
 				})
 			})
@@ -196,6 +227,15 @@ const PricingCard = ({ plan, mode = "public", subscriptionStatus, isSubscribed =
 	});
 };
 
+//#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/hooks/useDevPortalApiBaseUrl.ts
 function useDevPortalApiBaseUrl() {
@@ -265,27 +305,45 @@ function useMySubscriptions() {
 function usePlans() {
 	const apiBaseUrl = useDevPortalApiBaseUrl();
 	const isPreview = useDevPortalPreviewMode();
-	return useQuery({
-		queryKey: [
-			"dev-portal-plans",
-			apiBaseUrl,
-			isPreview
-		],
+	const { previewPlans } = useDevPortalBillingConfig();
+	const liveQuery = useQuery({
+		queryKey: ["dev-portal-plans", apiBaseUrl],
+		enabled: !isPreview && Boolean(apiBaseUrl),
 		queryFn: async () => {
-			if (isPreview) return parseManifestPlans();
 			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();
 		}
 	});
+	if (isPreview) {
+		const data = parseManifestPlans(previewPlans);
+		return {
+			...liveQuery,
+			data,
+			dataUpdatedAt: Date.now(),
+			error: null,
+			fetchStatus: "idle",
+			isError: false,
+			isFetching: false,
+			isLoading: false,
+			isPending: false,
+			isSuccess: true,
+			status: "success"
+		};
+	}
+	return liveQuery;
 }
 
 //#endregion
 //#region src/pages/AccountPlansPage.tsx
 const AccountPlansPage = () => {
+	const { previewPlans } = useDevPortalBillingConfig();
 	const isPreview = useDevPortalPreviewMode();
-	const { data: catalog, isLoading, isError } = usePlans();
+	const livePlans = usePlans();
+	const catalog = isPreview ? parseManifestPlans(previewPlans) : livePlans.data;
+	const isLoading = isPreview ? false : livePlans.isLoading;
+	const isError = isPreview ? false : livePlans.isError;
 	const { data: me } = useMySubscriptions();
 	const cancelMutation = useCancelSubscription();
 	const [cancelingSku, setCancelingSku] = useState(null);
@@ -372,20 +430,11 @@ const AccountPlansPage = () => {
 	});
 };
 
-//#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, {}) })
+	children: /* @__PURE__ */ jsx(Outlet, {})
 });
 
 //#endregion
@@ -436,6 +485,7 @@ const PRICING_PATH = "/pricing";
 const CHECKOUT_PATH = "/checkout";
 const SUBSCRIPTIONS_PATH = "/account/subscriptions";
 const CREDENTIALS_PATH = "/account/credentials";
+const LOGIN_NAV_PATH = "/signin";
 
 //#endregion
 //#region src/pages/CheckoutPage.tsx
@@ -474,7 +524,7 @@ const CheckoutPage = () => {
 			return await response.json();
 		}
 	});
-	const freeProvisioned = checkoutQuery.data?.isFree === true && checkoutQuery.data.entitlementProvisioned === true;
+	const freeProvisioned = checkoutQuery.data?.checkoutUrl == null && checkoutQuery.data?.entitlementProvisioned === true;
 	useEffect(() => {
 		if (freeProvisioned) navigate("/account/subscriptions?checkout=success", { replace: true });
 	}, [freeProvisioned, navigate]);
@@ -716,23 +766,27 @@ const CredentialsPage = () => {
 //#endregion
 //#region src/utils/pricing-config.ts
 function isPreviewPricingEnabled() {
-	return manifestCatalog?.pricingEnabled === true;
+	if (manifestCatalog?.pricingEnabled === true) return true;
+	return zudokuConfig?.__meta?.pricingEnabled === true;
 }
 
 //#endregion
 //#region src/pages/PricingPage.tsx
 const PricingPage = () => {
-	const { pricing } = useDevPortalBillingConfig();
+	const { pricing, previewPlans } = useDevPortalBillingConfig();
 	const auth = useAuth();
 	const isPreview = useDevPortalPreviewMode();
-	const pricingEnabled = isPreviewPricingEnabled();
-	const { data: catalog, isLoading, isError } = usePlans();
+	const pricingEnabled = isPreviewPricingEnabled() || isPreview;
+	const livePlans = usePlans();
+	const catalog = isPreview ? parseManifestPlans(previewPlans) : livePlans.data;
+	const isLoading = isPreview ? false : livePlans.isLoading;
+	const isError = isPreview ? false : livePlans.isError;
 	const { data: me } = useMySubscriptions();
 	if (!pricingEnabled) return /* @__PURE__ */ jsx(Navigate, {
 		to: "/",
 		replace: true
 	});
-	if (auth.isAuthenticated) return /* @__PURE__ */ jsx(Navigate, {
+	if (auth.sessionChecked && auth.isAuthenticated && !isPreview) return /* @__PURE__ */ jsx(Navigate, {
 		to: "/account/plans",
 		replace: true
 	});
@@ -774,8 +828,8 @@ const PricingPage = () => {
 						className: "rounded bg-muted px-1.5 py-0.5",
 						children: ".env"
 					}),
+					" with",
 					" ",
-					"with ",
 					/* @__PURE__ */ jsx("code", {
 						className: "rounded bg-muted px-1.5 py-0.5",
 						children: "APITOGO_CONFIG_*"
@@ -812,7 +866,7 @@ const PricingPage = () => {
 					" ",
 					/* @__PURE__ */ jsx("code", {
 						className: "rounded bg-muted px-1.5 py-0.5",
-						children: "pricing.enabled"
+						children: "modules.userPanel.plans.enabled"
 					}),
 					" ",
 					"to true."
@@ -946,11 +1000,9 @@ const SubscriptionsPage = () => {
 
 //#endregion
 //#region src/utils/auth-config.ts
-const LOGIN_NAV_PATH = "/signin";
 async function resolveAuthenticationNavEnabled(config) {
 	if (config.__meta?.authenticationEnabled !== void 0) return config.__meta.authenticationEnabled;
-	if (manifestCatalog?.authenticationEnabled === true) return true;
-	return isAuthenticationEnabled(await readEffectiveManifest(config.__meta?.rootDir ?? process.cwd(), resolveManifestEnv(process.env.NODE_ENV === "production" ? "production" : "development")));
+	return manifestCatalog?.authenticationEnabled === true;
 }
 
 //#endregion
@@ -973,6 +1025,18 @@ function withoutLoginNavigation(items) {
 
 //#endregion
 //#region src/utils/navigation-plans.ts
+function hasPricingLink(items) {
+	return items.some((item) => typeof item !== "string" && item.type === "link" && item.to === PRICING_PATH);
+}
+function withPricingNavigation(items) {
+	const current = items ?? [];
+	if (hasPricingLink(current)) return current;
+	return [...current, {
+		type: "link",
+		to: PRICING_PATH,
+		label: "Pricing"
+	}];
+}
 function withoutPricingNavigation(items) {
 	if (!items?.length) return [];
 	return items.map((item) => {
@@ -1027,7 +1091,7 @@ const devPortalBillingPlugin = createPlugin((options = {}) => ({
 			authNavEnabled
 		});
 		return merge({
-			navigation: pricingEnabled ? config.navigation : withoutPricingNavigation(config.navigation),
+			navigation: pricingEnabled ? withPricingNavigation(config.navigation) : withoutPricingNavigation(config.navigation),
 			header: {
 				...config.header,
 				navigation: headerNavigation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukoweb/apitogo-plugin-dev-portal-billing",
-  "version": "0.1.51",
+  "version": "0.1.53",
   "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.51"
+    "@lukoweb/apitogo": "0.1.53"
   },
   "peerDependencies": {
     "react": ">=19.2.0",