@lukoweb/apitogo-plugin-dev-portal-billing 0.1.120 → 0.1.127

package/dist/index.d.mts

@@ -29,6 +29,8 @@ type DevPortalBillingConfig = {
     sku: string;
     displayName: string;
     priceAmount?: number;
+    pricingModel?: string;
+    priceLabel?: string;
     priceCurrency?: string;
     billingPeriod?: string;
     limits?: Record<string, unknown>;
@@ -79,6 +81,7 @@ declare const ApiKeysPanel: ({
 declare const PRICING_PATH = "/pricing";
 declare const ACCOUNT_PLANS_PATH = "/account/plans";
 declare const CHECKOUT_PATH = "/checkout";
+declare const CONTACT_SALES_PATH = "/contact-sales";
 declare const SUBSCRIPTIONS_PATH = "/account/subscriptions";
 declare const CREDENTIALS_PATH = "/account/credentials";
 declare const USAGE_PATH = "/account/usage";
@@ -204,4 +207,4 @@ 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, CREDENTIALS_PATH, OverviewDashboardPage, PRICING_PATH, SUBSCRIPTIONS_PATH, USAGE_PATH, devPortalBillingPlugin, useApiKeys, useCreateApiKey, useRevokeApiKey };
+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 };

package/dist/index.mjs

@@ -16,10 +16,24 @@ import { Input } from "@lukoweb/apitogo/ui/Input.js";
 import { Secret } from "@lukoweb/apitogo/ui/Secret.js";
 import { AccountLayout } from "@lukoweb/apitogo-module-user-panel";
 import { createPlugin } from "@lukoweb/apitogo/plugins";
-import { Alert as Alert$1, AlertAction, AlertDescription } from "@lukoweb/apitogo/ui/Alert";
+import { Alert as Alert$1, AlertAction, AlertDescription, AlertTitle as AlertTitle$1 } from "@lukoweb/apitogo/ui/Alert";
 import { Button as Button$2 } from "@lukoweb/apitogo/ui/Button";
+import { Input as Input$1 } from "@lukoweb/apitogo/ui/Input";
+import { Label } from "@lukoweb/apitogo/ui/Label";
+import { Textarea } from "@lukoweb/apitogo/ui/Textarea";
 import { Value } from "@lukoweb/apitogo/ui/Value.js";
 
+//#region src/paths.ts
+const PRICING_PATH = "/pricing";
+const ACCOUNT_PLANS_PATH = "/account/plans";
+const CHECKOUT_PATH = "/checkout";
+const CONTACT_SALES_PATH = "/contact-sales";
+const SUBSCRIPTIONS_PATH = "/account/subscriptions";
+const CREDENTIALS_PATH = "/account/credentials";
+const USAGE_PATH = "/account/usage";
+const LOGIN_NAV_PATH = "/signin";
+
+//#endregion
 //#region src/utils/dev-portal-api.ts
 const DEV_PORTAL_PLACEHOLDER_API_URL = "https://dp-example.azurecontainerapps.io";
 function resolveDevPortalApiBaseUrl(configuredUrl) {
@@ -41,6 +55,8 @@ function mapPreviewPlans(plans) {
 		sku: plan.sku,
 		displayName: plan.displayName,
 		priceAmount: plan.priceAmount,
+		pricingModel: plan.pricingModel,
+		priceLabel: plan.priceLabel,
 		priceCurrency: plan.priceCurrency,
 		billingPeriod: plan.billingPeriod,
 		limitsJson: resolveLimitsJson(plan),
@@ -57,6 +73,8 @@ function parseManifestPlans(configPlans) {
 		sku: plan.sku,
 		displayName: plan.displayName,
 		priceAmount: plan.priceAmount ?? 0,
+		pricingModel: plan.pricingModel,
+		priceLabel: plan.priceLabel,
 		priceCurrency: plan.priceCurrency ?? "usd",
 		billingPeriod: plan.billingPeriod ?? "monthly",
 		limits: plan.limits,
@@ -72,6 +90,8 @@ function parseManifestPlans(configPlans) {
 		sku: plan.sku,
 		displayName: plan.displayName,
 		priceAmount: plan.priceAmount ?? 0,
+		pricingModel: plan.pricingModel,
+		priceLabel: plan.priceLabel,
 		priceCurrency: plan.priceCurrency ?? "usd",
 		billingPeriod: plan.billingPeriod ?? "monthly",
 		limits: plan.limits,
@@ -86,8 +106,15 @@ function formatActionKey(actionKey) {
 	if (separatorIndex <= 0) return actionKey;
 	return `${actionKey.slice(0, separatorIndex).toUpperCase()} ${actionKey.slice(separatorIndex + 1)}`;
 }
+/** Custom-priced plans go to a contact form; a negative price is the legacy marker for the same. */
+function isPlanCustomPriced(plan) {
+	return plan.pricingModel?.toLowerCase() === "custom" || plan.priceAmount < 0;
+}
+function formatCustomPriceLabel(plan) {
+	return plan.priceLabel?.trim() || "Custom";
+}
 function formatPlanPrice(plan) {
-	if (plan.priceAmount < 0) return "Custom";
+	if (isPlanCustomPriced(plan)) return formatCustomPriceLabel(plan);
 	if (plan.priceAmount <= 0) return "Free";
 	const amount = new Intl.NumberFormat(void 0, {
 		style: "currency",
@@ -100,7 +127,7 @@ function formatPlanPrice(plan) {
 	return amount;
 }
 function isPlanFree(plan) {
-	return plan.priceAmount === 0;
+	return !isPlanCustomPriced(plan) && plan.priceAmount <= 0;
 }
 function formatBillingPeriod(period) {
 	const normalized = period.toLowerCase();
@@ -179,16 +206,22 @@ function parseMonthlyQuotaCalls(limitsJson) {
 //#endregion
 //#region src/components/PricingCard.tsx
 const publicCtaLabel = (plan) => {
-	if (plan.priceAmount < 0) return "Contact sales";
+	if (isPlanCustomPriced(plan)) return "Contact sales";
 	if (isPlanFree(plan)) return "Start for free";
 	return "Start free trial";
 };
+const accountCtaLabel = (plan) => {
+	if (isPlanCustomPriced(plan)) return "Contact sales";
+	return isPlanFree(plan) ? "Get started" : "Subscribe";
+};
+/** 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, isCanceling = false, cancelDisabled = false, featured = false }) => {
 	const isActive = isSubscribed || isActiveSubscription(subscriptionStatus ?? "");
 	const features = listPlanFeatureLines(plan);
 	const priceLabel = formatPlanPrice(plan);
-	const isCustom = plan.priceAmount < 0;
-	const displayPrice = isCustom ? "Custom" : isPlanFree(plan) ? "$0" : priceLabel.replace(/\/mo$/, "").replace(/\/yr$/, "") || priceLabel;
+	const isCustom = isPlanCustomPriced(plan);
+	const displayPrice = isCustom ? formatCustomPriceLabel(plan) : isPlanFree(plan) ? "$0" : priceLabel.replace(/\/mo$/, "").replace(/\/yr$/, "") || priceLabel;
 	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}`,
@@ -255,15 +288,15 @@ const PricingCard = ({ plan, mode = "public", subscriptionStatus, isSubscribed =
 					className: "w-full",
 					asChild: true,
 					children: /* @__PURE__ */ jsx(Link$1, {
-						to: `/checkout?planSku=${encodeURIComponent(plan.sku)}`,
-						children: isPlanFree(plan) ? "Get started" : "Subscribe"
+						to: planCtaPath(plan),
+						children: accountCtaLabel(plan)
 					})
 				}) : /* @__PURE__ */ jsx(Button, {
 					variant: featured ? "default" : "outline",
 					className: "w-full",
 					asChild: true,
 					children: /* @__PURE__ */ jsx(Link$1, {
-						to: `/checkout?planSku=${encodeURIComponent(plan.sku)}`,
+						to: planCtaPath(plan),
 						children: publicCtaLabel(plan)
 					})
 				})
@@ -616,7 +649,7 @@ function useCreateApiKey() {
 				})
 			});
 			if (response.status === 409) throw new Error(API_KEY_CAP_REACHED);
-			if (!response.ok) throw new Error(await readProblemDetail(response) ?? "Failed to create API key.");
+			if (!response.ok) throw new Error(await readProblemDetail$1(response) ?? "Failed to create API key.");
 			return await response.json();
 		},
 		onSuccess: async () => {
@@ -635,14 +668,14 @@ function useRevokeApiKey() {
 				headers: { Accept: "application/json" },
 				credentials: "include"
 			});
-			if (!response.ok && response.status !== 204) throw new Error(await readProblemDetail(response) ?? "Failed to revoke API key.");
+			if (!response.ok && response.status !== 204) throw new Error(await readProblemDetail$1(response) ?? "Failed to revoke API key.");
 		},
 		onSuccess: async () => {
 			await queryClient.invalidateQueries({ queryKey: apiKeysQueryKey(apiBaseUrl) });
 		}
 	});
 }
-async function readProblemDetail(response) {
+async function readProblemDetail$1(response) {
 	try {
 		return (await response.json()).detail?.trim() || null;
 	} catch {
@@ -809,16 +842,6 @@ function useUsageRecent(limit = 20) {
 	return liveQuery;
 }
 
-//#endregion
-//#region src/paths.ts
-const PRICING_PATH = "/pricing";
-const ACCOUNT_PLANS_PATH = "/account/plans";
-const CHECKOUT_PATH = "/checkout";
-const SUBSCRIPTIONS_PATH = "/account/subscriptions";
-const CREDENTIALS_PATH = "/account/credentials";
-const USAGE_PATH = "/account/usage";
-const LOGIN_NAV_PATH = "/signin";
-
 //#endregion
 //#region src/pages/OverviewDashboardPage.tsx
 function StatCard({ label, value, sub, subClassName }) {
@@ -1382,6 +1405,246 @@ const CheckoutPage = () => {
 	});
 };
 
+//#endregion
+//#region src/hooks/usePlanInquiry.ts
+const PLAN_INQUIRY_RATE_LIMITED = "Too many messages were sent from your network. Please try again later.";
+function useSubmitPlanInquiry() {
+	const apiBaseUrl = useDevPortalApiBaseUrl();
+	return useMutation({ mutationFn: async ({ planSku, inquiry }) => {
+		if (!apiBaseUrl) throw new Error("Dev portal API is not configured.");
+		const response = await fetch(`${apiBaseUrl}/api/v1/plans/${encodeURIComponent(planSku)}/inquiries`, {
+			method: "POST",
+			headers: {
+				Accept: "application/json",
+				"Content-Type": "application/json"
+			},
+			credentials: "include",
+			body: JSON.stringify(inquiry)
+		});
+		if (response.status === 429) throw new Error(PLAN_INQUIRY_RATE_LIMITED);
+		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
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const validate = (form) => ({
+	...form.name.trim() ? {} : { name: "Enter your name." },
+	...EMAIL_PATTERN.test(form.email.trim()) ? {} : { email: "Enter a valid email address." },
+	...form.message.trim() ? {} : { message: "Tell us what you need." }
+});
+const ContactSalesPage = () => {
+	const [searchParams] = useSearchParams();
+	const planSku = searchParams.get("planSku") ?? "";
+	const auth = useAuth();
+	const isPreview = useDevPortalPreviewMode();
+	const isDemoSession = useIsDemoSession();
+	const plans = usePlans();
+	const submit = useSubmitPlanInquiry();
+	const [form, setForm] = useState(() => ({
+		name: auth.profile?.name ?? "",
+		email: auth.profile?.email ?? "",
+		company: "",
+		message: "",
+		website: ""
+	}));
+	const [errors, setErrors] = useState({});
+	const plan = plans.data?.plans.find((p) => p.sku === planSku);
+	const isSimulated = isPreview || isDemoSession;
+	if (!planSku || plans.isSuccess && (!plan || !isPlanCustomPriced(plan))) return /* @__PURE__ */ jsxs("div", {
+		className: "mx-auto max-w-lg px-4 py-16 text-center text-muted-foreground",
+		children: [
+			"This plan is not available for sales inquiries.",
+			" ",
+			/* @__PURE__ */ jsx(Link$1, {
+				to: PRICING_PATH,
+				className: "text-primary underline",
+				children: "Back to pricing"
+			})
+		]
+	});
+	if (submit.isSuccess) 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: "Thanks, we got your message"
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "text-muted-foreground",
+				children: [
+					"The team will reply to ",
+					form.email.trim(),
+					" soon."
+				]
+			}),
+			/* @__PURE__ */ jsx(Button$2, {
+				asChild: true,
+				variant: "outline",
+				children: /* @__PURE__ */ jsx(Link$1, {
+					to: PRICING_PATH,
+					children: "Back to pricing"
+				})
+			})
+		]
+	});
+	const update = (field) => (event) => setForm((prev) => ({
+		...prev,
+		[field]: event.target.value
+	}));
+	const handleSubmit = (event) => {
+		event.preventDefault();
+		const nextErrors = validate(form);
+		setErrors(nextErrors);
+		if (Object.keys(nextErrors).length > 0 || isSimulated) return;
+		submit.mutate({
+			planSku,
+			inquiry: {
+				name: form.name.trim(),
+				email: form.email.trim(),
+				company: form.company.trim() || void 0,
+				message: form.message.trim(),
+				website: form.website || void 0
+			}
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mx-auto w-full max-w-lg px-4 py-12",
+		children: [
+			/* @__PURE__ */ jsx("h1", {
+				className: "text-2xl font-semibold tracking-tight",
+				children: "Contact sales"
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "mt-2 text-muted-foreground",
+				children: plan ? `Tell us about your needs for the ${plan.displayName} plan and we'll get back to you with pricing.` : "Tell us about your needs and we'll get back to you with pricing."
+			}),
+			isSimulated ? /* @__PURE__ */ jsxs(Alert$1, {
+				className: "mt-6",
+				children: [/* @__PURE__ */ jsx(AlertTitle$1, { children: "Preview only" }), /* @__PURE__ */ jsx(AlertDescription, { children: "Messages are sent once your portal is published to API ToGo." })]
+			}) : null,
+			/* @__PURE__ */ jsxs("form", {
+				className: "mt-6 space-y-4",
+				noValidate: true,
+				onSubmit: handleSubmit,
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "space-y-1.5",
+						children: [
+							/* @__PURE__ */ jsx(Label, {
+								htmlFor: "contact-name",
+								children: "Name"
+							}),
+							/* @__PURE__ */ jsx(Input$1, {
+								id: "contact-name",
+								autoComplete: "name",
+								maxLength: 200,
+								value: form.name,
+								onChange: update("name"),
+								"aria-invalid": Boolean(errors.name)
+							}),
+							errors.name ? /* @__PURE__ */ jsx("p", {
+								className: "text-sm text-destructive",
+								children: errors.name
+							}) : null
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "space-y-1.5",
+						children: [
+							/* @__PURE__ */ jsx(Label, {
+								htmlFor: "contact-email",
+								children: "Work email"
+							}),
+							/* @__PURE__ */ jsx(Input$1, {
+								id: "contact-email",
+								type: "email",
+								autoComplete: "email",
+								maxLength: 320,
+								value: form.email,
+								onChange: update("email"),
+								"aria-invalid": Boolean(errors.email)
+							}),
+							errors.email ? /* @__PURE__ */ jsx("p", {
+								className: "text-sm text-destructive",
+								children: errors.email
+							}) : null
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "space-y-1.5",
+						children: [/* @__PURE__ */ jsx(Label, {
+							htmlFor: "contact-company",
+							children: "Company (optional)"
+						}), /* @__PURE__ */ jsx(Input$1, {
+							id: "contact-company",
+							autoComplete: "organization",
+							maxLength: 200,
+							value: form.company,
+							onChange: update("company")
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "space-y-1.5",
+						children: [
+							/* @__PURE__ */ jsx(Label, {
+								htmlFor: "contact-message",
+								children: "Message"
+							}),
+							/* @__PURE__ */ jsx(Textarea, {
+								id: "contact-message",
+								rows: 5,
+								maxLength: 5e3,
+								placeholder: "Expected traffic, use case, timeline…",
+								value: form.message,
+								onChange: update("message"),
+								"aria-invalid": Boolean(errors.message)
+							}),
+							errors.message ? /* @__PURE__ */ jsx("p", {
+								className: "text-sm text-destructive",
+								children: errors.message
+							}) : null
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "absolute -left-[9999px]",
+						"aria-hidden": "true",
+						children: [/* @__PURE__ */ jsx("label", {
+							htmlFor: "contact-website",
+							children: "Website"
+						}), /* @__PURE__ */ jsx("input", {
+							id: "contact-website",
+							tabIndex: -1,
+							autoComplete: "off",
+							value: form.website,
+							onChange: update("website")
+						})]
+					}),
+					submit.isError ? /* @__PURE__ */ jsx(Alert$1, {
+						variant: "destructive",
+						children: /* @__PURE__ */ jsx(AlertDescription, { children: submit.error.message })
+					}) : null,
+					/* @__PURE__ */ jsx(Button$2, {
+						type: "submit",
+						className: "w-full",
+						disabled: submit.isPending || isSimulated,
+						children: submit.isPending ? "Sending…" : "Send message"
+					})
+				]
+			})
+		]
+	});
+};
+
 //#endregion
 //#region src/hooks/useCredentials.ts
 function useCredentials() {
@@ -1740,7 +2003,7 @@ const PricingPage = () => {
 								children: [/* @__PURE__ */ jsx("div", {
 									className: "font-medium text-foreground",
 									children: row.label
-								}), compareHeaders.map((_, index) => /* @__PURE__ */ jsx("div", { children: row.values[index] ?? "—" }, `${row.label}-${index}`))]
+								}), compareHeaders.map((header, index) => /* @__PURE__ */ jsx("div", { children: row.values[index] ?? "—" }, `${row.label}-${header}`))]
 							}, row.label))]
 						})
 					})]
@@ -2289,6 +2552,11 @@ const devPortalBillingPlugin = createPlugin((options = {}) => ({
 				handle: { layout: "default" },
 				element: /* @__PURE__ */ jsx(CheckoutPage, {})
 			},
+			{
+				path: CONTACT_SALES_PATH,
+				handle: { layout: "default" },
+				element: /* @__PURE__ */ jsx(ContactSalesPage, {})
+			},
 			{
 				path: SUBSCRIPTIONS_PATH,
 				handle: { layout: "default" },
@@ -2325,4 +2593,4 @@ const devPortalBillingPlugin = createPlugin((options = {}) => ({
 }));
 
 //#endregion
-export { ACCOUNT_PLANS_PATH, API_KEY_CAP_REACHED, AccountPlansPage, ApiKeysPanel, CHECKOUT_PATH, CREDENTIALS_PATH, OverviewDashboardPage, PRICING_PATH, SUBSCRIPTIONS_PATH, USAGE_PATH, devPortalBillingPlugin, useApiKeys, useCreateApiKey, useRevokeApiKey };
+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 };

package/package.json

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