@lukoweb/apitogo-plugin-dev-portal-billing 0.1.42 → 0.1.44

package/dist/index.mjs

@@ -4,12 +4,14 @@ 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 manifestCatalog from "virtual:apitogo-local-manifest";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMutation, useQuery, useQueryClient } from "@lukoweb/apitogo/react-query";
 import { useAuth } from "@lukoweb/apitogo/hooks";
 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";
 
 //#region src/utils/dev-portal-api.ts
 const DEV_PORTAL_PLACEHOLDER_API_URL = "https://dp-example.azurecontainerapps.io";
@@ -23,22 +25,23 @@ function isPlaceholderDevPortalApiUrl(apiBaseUrl) {
 	if (!apiBaseUrl) return true;
 	return apiBaseUrl === DEV_PORTAL_PLACEHOLDER_API_URL || apiBaseUrl.includes("dp-example.azurecontainerapps.io");
 }
-function parseMockPlans() {
-	const raw = typeof VITE_APITOGO_DEV_PORTAL_MOCK_PLANS === "string" ? VITE_APITOGO_DEV_PORTAL_MOCK_PLANS.trim() : "";
-	if (!raw) return { plans: [] };
-	try {
-		return { plans: JSON.parse(raw).map((plan) => ({
-			sku: plan.sku,
-			displayName: plan.displayName,
-			isFree: plan.isFree ?? false,
-			priceAmount: plan.priceAmount ?? 0,
-			priceCurrency: plan.priceCurrency ?? "usd",
-			billingPeriod: plan.billingPeriod ?? "monthly",
-			limitsJson: plan.limitsJson ?? null
-		})) };
-	} catch {
-		return { plans: [] };
-	}
+function parseManifestPlans() {
+	if (!manifestCatalog?.plans?.length) return { plans: [] };
+	return { plans: manifestCatalog.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 formatActionKey(actionKey) {
+	const separatorIndex = actionKey.indexOf(":");
+	if (separatorIndex <= 0) return actionKey;
+	return `${actionKey.slice(0, separatorIndex).toUpperCase()} ${actionKey.slice(separatorIndex + 1)}`;
 }
 function formatPlanPrice(plan) {
 	if (plan.isFree || plan.priceAmount <= 0) return "Free";
@@ -114,6 +117,23 @@ const PricingCard = ({ plan, mode = "public", subscriptionStatus, isSubscribed =
 				className: "mt-4 text-sm text-muted-foreground",
 				children: limitsSummary
 			}) : null,
+			plan.includedActionKeys && plan.includedActionKeys.length > 0 ? /* @__PURE__ */ jsxs("div", {
+				className: "mt-4",
+				"data-testid": `included-endpoints-${plan.sku}`,
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-xs font-medium uppercase tracking-wide text-muted-foreground",
+					children: "Included endpoints"
+				}), /* @__PURE__ */ jsx("ul", {
+					className: "mt-2 space-y-1 text-sm text-muted-foreground",
+					children: plan.includedActionKeys.map((actionKey) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("code", {
+						className: "rounded bg-muted px-1.5 py-0.5 text-xs",
+						children: formatActionKey(actionKey)
+					}) }, actionKey))
+				})]
+			}) : plan.isFree ? /* @__PURE__ */ jsx("p", {
+				className: "mt-4 text-sm text-muted-foreground",
+				children: "API access not included"
+			}) : null,
 			/* @__PURE__ */ jsx("div", {
 				className: "mt-6 space-y-2",
 				children: mode === "account" ? isActive ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -251,7 +271,7 @@ function usePlans() {
 			isPreview
 		],
 		queryFn: async () => {
-			if (isPreview) return parseMockPlans();
+			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.");
@@ -297,9 +317,17 @@ const AccountPlansPage = () => {
 					})]
 				})]
 			}),
-			isPreview ? /* @__PURE__ */ jsx("div", {
+			isPreview ? /* @__PURE__ */ jsxs("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."
+				children: [
+					"Local preview uses plans from",
+					" ",
+					/* @__PURE__ */ jsx("code", {
+						className: "rounded bg-muted px-1.5 py-0.5",
+						children: "apitogo.local.json"
+					}),
+					". 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",
@@ -645,11 +673,9 @@ const CredentialsPage = () => {
 								className: "text-sm text-muted-foreground",
 								children: "Base URL for API requests through the gateway."
 							})]
-						}), credentials.gatewayBaseUrl ? /* @__PURE__ */ jsx(Secret, {
+						}), credentials.gatewayBaseUrl ? /* @__PURE__ */ jsx(Value, {
 							className: "max-w-full w-full",
-							secret: credentials.gatewayBaseUrl,
-							status: "none",
-							noReveal: true
+							value: credentials.gatewayBaseUrl
 						}) : /* @__PURE__ */ jsx("p", {
 							className: "text-sm text-muted-foreground",
 							children: "Available after your API is deployed to the gateway."
@@ -716,11 +742,11 @@ const PricingPage = () => {
 			isPreview && !auth.isAuthenticated ? /* @__PURE__ */ jsxs("div", {
 				className: "mx-auto mb-8 max-w-2xl rounded-xl border border-dashed bg-muted/20 p-6 text-center text-sm text-muted-foreground",
 				children: [
-					"Local preview uses mock plans from",
+					"Local preview uses plans from",
 					" ",
 					/* @__PURE__ */ jsx("code", {
 						className: "rounded bg-muted px-1.5 py-0.5",
-						children: "VITE_APITOGO_DEV_PORTAL_MOCK_PLANS"
+						children: "apitogo.local.json"
 					}),
 					". Checkout activates after the portal is published."
 				]

package/package.json

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