@lukoweb/apitogo-plugin-dev-portal-billing 0.1.138 → 0.1.139

package/dist/index.d.mts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { UseQueryResult } from "@lukoweb/apitogo/react-query";
 import * as _lukoweb_apitogo0 from "@lukoweb/apitogo";
 import * as _tanstack_react_query0 from "@tanstack/react-query";
 
@@ -9,6 +10,23 @@ declare const AccountPlansPage: () => react_jsx_runtime0.JSX.Element;
 declare const OverviewDashboardPage: () => react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/types.d.ts
+type DevPortalPlan = {
+  sku: string;
+  displayName: string;
+  limitsJson: string | null;
+  priceAmount: number; /** `custom` plans are sold via a contact-sales form instead of checkout. Absent means `fixed`. */
+  pricingModel?: string; /** Text shown instead of the price (custom plans), e.g. "Let's talk". */
+  priceLabel?: string | null;
+  priceCurrency: string;
+  billingPeriod: string;
+  syncedAtUtc?: string;
+  includedActionKeys?: string[]; /** Optional marketing bullets for pricing cards (preview / local catalog). */
+  features?: string[];
+};
+type DevPortalPlanCatalog = {
+  plans: DevPortalPlan[];
+  lastSyncedAtUtc?: string | null;
+};
 type DevPortalPricingCompareRow = {
   label: string;
   values: string[];
@@ -207,4 +225,26 @@ declare function useCreateApiKey(): _tanstack_react_query0.UseMutationResult<Dev
 }, unknown>;
 declare function useRevokeApiKey(): _tanstack_react_query0.UseMutationResult<void, Error, string, unknown>;
 //#endregion
-export { ACCOUNT_PLANS_PATH, API_KEY_CAP_REACHED, AccountPlansPage, ApiKeysPanel, CHECKOUT_PATH, CONTACT_SALES_PATH, CREDENTIALS_PATH, OverviewDashboardPage, PRICING_PATH, SUBSCRIPTIONS_PATH, USAGE_PATH, devPortalBillingPlugin, useApiKeys, useCreateApiKey, useRevokeApiKey };
+//#region src/hooks/usePlans.d.ts
+declare function usePlans(): UseQueryResult<DevPortalPlanCatalog>;
+//#endregion
+//#region src/hooks/usePlansPreview.d.ts
+/** Matches `PlansPreviewPlan` from `@lukoweb/apitogo-module-landing`. */
+type PlansPreviewItem = {
+  name: string;
+  price: string;
+  unit: string;
+  blurb: string;
+  featured?: boolean;
+};
+/** Maps plans to landing `PlansPreviewSection` cards, highlighting the same plan as /pricing. */
+declare const toPlansPreviewItems: (plans: DevPortalPlan[]) => PlansPreviewItem[];
+/**
+ * Plan cards for the landing `PlansPreviewSection`, sourced like the /pricing page: the dev
+ * portal backend when live, `modules.userPanel.plans.items` from `apitogo.config.json` in
+ * preview/demo mode. Falls back to the config catalog while the live one is loading or
+ * unavailable, so prerendered pages still show plans.
+ */
+declare const usePlansPreview: () => PlansPreviewItem[];
+//#endregion
+export { ACCOUNT_PLANS_PATH, API_KEY_CAP_REACHED, AccountPlansPage, ApiKeysPanel, CHECKOUT_PATH, CONTACT_SALES_PATH, CREDENTIALS_PATH, type DevPortalPlan, type DevPortalPlanCatalog, OverviewDashboardPage, PRICING_PATH, type PlansPreviewItem, SUBSCRIPTIONS_PATH, USAGE_PATH, devPortalBillingPlugin, toPlansPreviewItems, useApiKeys, useCreateApiKey, usePlans, usePlansPreview, useRevokeApiKey };

package/dist/index.mjs

@@ -136,6 +136,21 @@ function formatBillingPeriod(period) {
 	if (normalized === "custom") return "talk to us";
 	return period;
 }
+/** Headline price for a plan card, without the period suffix (e.g. `$19`, `$0`, `Custom`). */
+function formatPlanDisplayPrice(plan) {
+	if (isPlanCustomPriced(plan)) return formatCustomPriceLabel(plan);
+	if (isPlanFree(plan)) return "$0";
+	const priceLabel = formatPlanPrice(plan);
+	return priceLabel.replace(/\/mo$/, "").replace(/\/yr$/, "") || priceLabel;
+}
+/** Caption shown under the plan price (e.g. `per month`, `talk to us`). */
+function formatPlanPriceUnit(plan) {
+	return isPlanCustomPriced(plan) ? "talk to us" : formatBillingPeriod(plan.billingPeriod);
+}
+/** SKU of the plan to highlight: `developer` if present, else the first low-priced paid plan. */
+function pickFeaturedPlanSku(plans) {
+	return plans.find((p) => p.sku === "developer")?.sku ?? plans.find((p) => p.priceAmount > 0 && p.priceAmount < 50)?.sku ?? plans.find((p) => p.priceAmount > 0)?.sku;
+}
 function formatRateLimit(rate) {
 	if (!rate || typeof rate !== "object") return null;
 	const { calls, renewalPeriodSeconds } = rate;
@@ -219,9 +234,7 @@ const planCtaPath = (plan) => `${isPlanCustomPriced(plan) ? CONTACT_SALES_PATH :
 const PricingCard = ({ plan, mode = "public", subscriptionStatus, isSubscribed = false, onUnsubscribe, isCanceling = false, cancelDisabled = false, featured = false }) => {
 	const isActive = isSubscribed || isActiveSubscription(subscriptionStatus ?? "");
 	const features = listPlanFeatureLines(plan);
-	const priceLabel = formatPlanPrice(plan);
-	const isCustom = isPlanCustomPriced(plan);
-	const displayPrice = isCustom ? formatCustomPriceLabel(plan) : isPlanFree(plan) ? "$0" : priceLabel.replace(/\/mo$/, "").replace(/\/yr$/, "") || priceLabel;
+	const displayPrice = formatPlanDisplayPrice(plan);
 	return /* @__PURE__ */ jsxs("article", {
 		className: cn("flex h-full w-full flex-col rounded-xl border border-border bg-card p-7", featured && "border-primary/50 shadow-[0_10px_28px_rgba(13,148,136,0.28)] ring-1 ring-primary/25", isActive && mode === "account" && "border-primary/40 ring-1 ring-primary/20"),
 		"data-testid": `pricing-card-${plan.sku}`,
@@ -250,7 +263,7 @@ const PricingCard = ({ plan, mode = "public", subscriptionStatus, isSubscribed =
 			}),
 			/* @__PURE__ */ jsx("p", {
 				className: "mb-[18px] mt-0.5 text-[0.78125rem] text-muted-foreground",
-				children: isCustom ? "talk to us" : formatBillingPeriod(plan.billingPeriod)
+				children: formatPlanPriceUnit(plan)
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "space-y-2",
@@ -1905,7 +1918,7 @@ const PricingPage = () => {
 	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 plans = catalog?.plans ?? [];
-	const featuredSku = plans.find((p) => p.sku === "developer")?.sku ?? plans.find((p) => p.priceAmount > 0 && p.priceAmount < 50)?.sku ?? plans.find((p) => p.priceAmount > 0)?.sku;
+	const featuredSku = pickFeaturedPlanSku(plans);
 	const compareRows = pricing?.compareRows && pricing.compareRows.length > 0 ? pricing.compareRows : DEFAULT_COMPARE_ROWS;
 	const faqs = pricing?.faqs && pricing.faqs.length > 0 ? pricing.faqs : DEFAULT_FAQS;
 	const compareHeaders = plans.length > 0 ? plans.map((p) => p.displayName) : [
@@ -2593,4 +2606,28 @@ const devPortalBillingPlugin = createPlugin((options = {}) => ({
 }));
 
 //#endregion
-export { ACCOUNT_PLANS_PATH, API_KEY_CAP_REACHED, AccountPlansPage, ApiKeysPanel, CHECKOUT_PATH, CONTACT_SALES_PATH, CREDENTIALS_PATH, OverviewDashboardPage, PRICING_PATH, SUBSCRIPTIONS_PATH, USAGE_PATH, devPortalBillingPlugin, useApiKeys, useCreateApiKey, useRevokeApiKey };
+//#region src/hooks/usePlansPreview.ts
+/** Maps plans to landing `PlansPreviewSection` cards, highlighting the same plan as /pricing. */
+const toPlansPreviewItems = (plans) => {
+	const featuredSku = pickFeaturedPlanSku(plans);
+	return plans.map((plan) => ({
+		name: plan.displayName,
+		price: formatPlanDisplayPrice(plan),
+		unit: formatPlanPriceUnit(plan),
+		blurb: listPlanFeatureLines(plan).slice(0, 2).join(" · "),
+		featured: plan.sku === featuredSku
+	}));
+};
+/**
+* Plan cards for the landing `PlansPreviewSection`, sourced like the /pricing page: the dev
+* portal backend when live, `modules.userPanel.plans.items` from `apitogo.config.json` in
+* preview/demo mode. Falls back to the config catalog while the live one is loading or
+* unavailable, so prerendered pages still show plans.
+*/
+const usePlansPreview = () => {
+	const { data } = usePlans();
+	return toPlansPreviewItems(data?.plans ?? parseManifestPlans().plans);
+};
+
+//#endregion
+export { ACCOUNT_PLANS_PATH, API_KEY_CAP_REACHED, AccountPlansPage, ApiKeysPanel, CHECKOUT_PATH, CONTACT_SALES_PATH, CREDENTIALS_PATH, OverviewDashboardPage, PRICING_PATH, SUBSCRIPTIONS_PATH, USAGE_PATH, devPortalBillingPlugin, toPlansPreviewItems, useApiKeys, useCreateApiKey, usePlans, usePlansPreview, useRevokeApiKey };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukoweb/apitogo-plugin-dev-portal-billing",
-  "version": "0.1.138",
+  "version": "0.1.139",
   "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.1.138",
-    "@lukoweb/apitogo-module-user-panel": "0.1.138"
+    "@lukoweb/apitogo": "0.1.139",
+    "@lukoweb/apitogo-module-user-panel": "0.1.139"
   },
   "peerDependencies": {
     "react": ">=19.2.0",