@lukoweb/apitogo-plugin-dev-portal-billing 0.2.31 → 0.2.34

package/dist/ContactSalesPage-Vjzm-RxO.mjs

@@ -0,0 +1,256 @@
+import { o as PRICING_PATH } from "./paths-ujy9wjVK.mjs";
+import { n as useDevPortalPreviewMode, r as useIsDemoSession, t as useDevPortalApiBaseUrl, u as isPlanCustomPriced } from "./useDevPortalApiBaseUrl-CgygF2z5.mjs";
+import "./DevPortalBillingContext-CR83s4LO.mjs";
+import { t as usePlans } from "./usePlans-DUex2tzT.mjs";
+import { Link, useSearchParams } from "@lukoweb/apitogo/router";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMutation } from "@lukoweb/apitogo/react-query";
+import { useAuth } from "@lukoweb/apitogo/hooks";
+import { Alert, AlertDescription, AlertTitle } from "@lukoweb/apitogo/ui/Alert";
+import { Button } from "@lukoweb/apitogo/ui/Button";
+import { Input } from "@lukoweb/apitogo/ui/Input";
+import { Label } from "@lukoweb/apitogo/ui/Label";
+import { Textarea } from "@lukoweb/apitogo/ui/Textarea";
+
+//#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, {
+				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, {
+				asChild: true,
+				variant: "outline",
+				children: /* @__PURE__ */ jsx(Link, {
+					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, {
+				className: "mt-6",
+				children: [/* @__PURE__ */ jsx(AlertTitle, { 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, {
+								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, {
+								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, {
+							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, {
+						variant: "destructive",
+						children: /* @__PURE__ */ jsx(AlertDescription, { children: submit.error.message })
+					}) : null,
+					/* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						className: "w-full",
+						disabled: submit.isPending || isSimulated,
+						children: submit.isPending ? "Sending…" : "Send message"
+					})
+				]
+			})
+		]
+	});
+};
+
+//#endregion
+export { ContactSalesPage as default };

package/dist/CredentialsPage-CtIEboEy.mjs

@@ -0,0 +1,189 @@
+import { t as ACCOUNT_PLANS_PATH } from "./paths-ujy9wjVK.mjs";
+import { n as useDevPortalPreviewMode, r as useIsDemoSession, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-CgygF2z5.mjs";
+import { n as useDevPortalBillingConfig } from "./DevPortalBillingContext-CR83s4LO.mjs";
+import { n as createDemoCredentials } from "./demo-session-Cez740bi.mjs";
+import { r as useApiKeys, t as ApiKeysPanel } from "./ApiKeysPanel-DrArkHXf.mjs";
+import { Head } from "@lukoweb/apitogo/components";
+import { KeyRoundIcon } from "@lukoweb/apitogo/icons";
+import { Link as Link$1 } from "@lukoweb/apitogo/router";
+import zudokuConfig from "virtual:zudoku-config";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useQuery } from "@lukoweb/apitogo/react-query";
+import { useAuth } from "@lukoweb/apitogo/hooks";
+import { Button as Button$1 } from "@lukoweb/apitogo/ui/Button";
+import { Value } from "@lukoweb/apitogo/ui/Value.js";
+
+//#region src/hooks/useCredentials.ts
+function useCredentials() {
+	const auth = useAuth();
+	const apiBaseUrl = useDevPortalApiBaseUrl();
+	const isPreview = useDevPortalPreviewMode();
+	const isDemoSession = useIsDemoSession();
+	const { previewPlans } = useDevPortalBillingConfig();
+	const liveQuery = useQuery({
+		queryKey: ["dev-portal-credentials", apiBaseUrl],
+		enabled: auth.isAuthenticated && !isPreview && !isDemoSession && Boolean(apiBaseUrl),
+		queryFn: async () => {
+			const response = await fetch(`${apiBaseUrl}/api/v1/credentials`, {
+				method: "GET",
+				headers: { Accept: "application/json" },
+				credentials: "include"
+			});
+			if (response.status === 404) throw new Error("NO_ENTITLEMENT");
+			if (!response.ok) throw new Error("Failed to load API credentials.");
+			return await response.json();
+		},
+		retry: (failureCount, error) => error instanceof Error && error.message === "NO_ENTITLEMENT" ? false : failureCount < 2
+	});
+	if (isDemoSession && auth.isAuthenticated) return {
+		...liveQuery,
+		data: createDemoCredentials(previewPlans),
+		error: null,
+		isError: false,
+		isFetching: false,
+		isLoading: false,
+		isPending: false,
+		isSuccess: true,
+		status: "success"
+	};
+	return liveQuery;
+}
+
+//#endregion
+//#region src/pages/CredentialsPage.tsx
+const CredentialsPage = () => {
+	const auth = useAuth();
+	const isPreview = useDevPortalPreviewMode();
+	const isDemoSession = useIsDemoSession();
+	const { data: credentials, isLoading, error } = useCredentials();
+	const { data: apiKeys, isLoading: keysLoading, error: keysError } = useApiKeys();
+	const { gatewayBaseUrl: configuredGatewayBaseUrl } = useDevPortalBillingConfig();
+	const gatewayBaseUrl = credentials?.gatewayBaseUrl?.trim() || apiKeys?.gatewayBaseUrl?.trim() || configuredGatewayBaseUrl?.trim() || zudokuConfig.__meta?.gatewayBaseUrl?.trim() || null;
+	const header = apiKeys?.header ?? "Ocp-Apim-Subscription-Key";
+	const plans = apiKeys?.plans ?? [];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mx-auto max-w-screen-lg px-4 pb-16 pt-(--padding-content-top) lg:px-8",
+		children: [
+			/* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx("title", { children: "API credentials" }) }),
+			/* @__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(KeyRoundIcon, { size: 24 })
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "space-y-1",
+					children: [/* @__PURE__ */ jsx("h1", {
+						className: "text-3xl font-semibold tracking-tight",
+						children: "API credentials"
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground",
+						children: "Create API keys for each subscribed plan and use them to authenticate requests to the API gateway."
+					})]
+				})]
+			}),
+			isDemoSession ? /* @__PURE__ */ jsx("div", {
+				className: "mb-6 rounded-xl border border-dashed bg-muted/20 p-4 text-sm text-muted-foreground",
+				children: "Local demo credentials. Publish the portal to receive live subscription keys from your dev-portal backend."
+			}) : null,
+			isPreview && !isDemoSession ? /* @__PURE__ */ jsx("div", {
+				className: "rounded-xl border border-dashed p-8 text-center",
+				children: /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground",
+					children: "API credentials are available after the developer portal is published."
+				})
+			}) : null,
+			!isPreview && !isDemoSession && !auth.isAuthenticated ? /* @__PURE__ */ jsxs("div", {
+				className: "rounded-xl border border-dashed p-8 text-center",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground",
+					children: "Sign in to view your subscription keys."
+				}), /* @__PURE__ */ jsx(Button$1, {
+					className: "mt-4",
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Link$1, {
+						to: ACCOUNT_PLANS_PATH,
+						children: "View plans"
+					})
+				})]
+			}) : null,
+			!isPreview && !isDemoSession && auth.isAuthenticated && (isLoading || keysLoading) ? /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground",
+				children: "Loading credentials…"
+			}) : null,
+			!isPreview && !isDemoSession && auth.isAuthenticated && (error || keysError) ? /* @__PURE__ */ jsxs("div", {
+				className: "rounded-xl border border-dashed p-8 text-center",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground",
+					children: error instanceof Error && error.message === "NO_ENTITLEMENT" || keysError instanceof Error && keysError.message === "NO_ENTITLEMENT" ? "No active subscription found. Choose a plan to get your API key." : "Unable to load API credentials. Try again in a moment."
+				}), /* @__PURE__ */ jsx(Button$1, {
+					className: "mt-4",
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Link$1, {
+						to: ACCOUNT_PLANS_PATH,
+						children: "View plans"
+					})
+				})]
+			}) : null,
+			(isDemoSession || !isPreview) && auth.isAuthenticated && !error && !keysError && !isLoading && !keysLoading ? /* @__PURE__ */ jsxs("div", {
+				className: "space-y-6",
+				children: [plans.length === 0 ? /* @__PURE__ */ jsxs("div", {
+					className: "rounded-xl border border-dashed p-8 text-center",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground",
+						children: "Choose a plan to get your first API key."
+					}), /* @__PURE__ */ jsx(Button$1, {
+						className: "mt-4",
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Link$1, {
+							to: ACCOUNT_PLANS_PATH,
+							children: "View plans"
+						})
+					})]
+				}) : plans.map((plan) => /* @__PURE__ */ jsx(ApiKeysPanel, {
+					plan,
+					header,
+					readOnly: isDemoSession
+				}, plan.planSku)), /* @__PURE__ */ jsxs("article", {
+					className: "rounded-xl border bg-card/60 p-6 space-y-4",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "space-y-1",
+						children: [/* @__PURE__ */ jsx("h2", {
+							className: "text-lg font-medium",
+							children: "Gateway URL"
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-sm text-muted-foreground",
+							children: "Base URL for API requests through the gateway."
+						})]
+					}), gatewayBaseUrl ? /* @__PURE__ */ jsx(Value, {
+						className: "max-w-full w-full",
+						value: gatewayBaseUrl
+					}) : /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground",
+						children: "Available after your API is deployed to the gateway."
+					})]
+				})]
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-8 flex flex-wrap gap-3",
+				children: [/* @__PURE__ */ jsx(Button$1, {
+					variant: "outline",
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Link$1, {
+						to: "/account/subscriptions",
+						children: "My subscriptions"
+					})
+				}), /* @__PURE__ */ jsx(Button$1, {
+					variant: "outline",
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Link$1, {
+						to: "/api",
+						children: "API reference"
+					})
+				})]
+			})
+		]
+	});
+};
+
+//#endregion
+export { CredentialsPage as default };

package/dist/DevPortalBillingContext-CR83s4LO.mjs

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/DevPortalBillingContext.tsx
+const DevPortalBillingContext = createContext({});
+const DevPortalBillingProvider = ({ options, children }) => /* @__PURE__ */ jsx(DevPortalBillingContext.Provider, {
+	value: options,
+	children
+});
+const useDevPortalBillingConfig = () => useContext(DevPortalBillingContext);
+
+//#endregion
+export { useDevPortalBillingConfig as n, DevPortalBillingProvider as t };

package/dist/PricingCard-Wra2FUX9.mjs

@@ -0,0 +1,145 @@
+import { n as CHECKOUT_PATH, r as CONTACT_SALES_PATH } from "./paths-ujy9wjVK.mjs";
+import { a as formatPlanDisplayPrice, c as isActiveSubscription, d as isPlanFree, f as listPlanFeatureLines, s as formatPlanPriceUnit, u as isPlanCustomPriced } from "./useDevPortalApiBaseUrl-CgygF2z5.mjs";
+import { Button } from "@lukoweb/apitogo/components";
+import { Link as Link$1 } 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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/PricingCard.tsx
+const publicCtaLabel = (plan) => {
+	if (isPlanCustomPriced(plan)) return "Contact sales";
+	if (isPlanFree(plan)) return "Get started for free";
+	return "Subscribe now";
+};
+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, onSwitch, isSwitching = false, isCanceling = false, cancelDisabled = false, featured = false }) => {
+	const isActive = isSubscribed || isActiveSubscription(subscriptionStatus ?? "");
+	const features = listPlanFeatureLines(plan);
+	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}`,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-2",
+				children: [
+					/* @__PURE__ */ jsx("h2", {
+						className: "text-sm font-bold uppercase tracking-[0.04em]",
+						children: plan.displayName
+					}),
+					featured && !isActive ? /* @__PURE__ */ jsx("span", {
+						className: "shrink-0 rounded-md bg-primary/10 px-2.5 py-0.5 text-xs font-semibold text-primary",
+						children: "Popular"
+					}) : null,
+					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-3.5 text-[2.1rem] font-extrabold tracking-[-0.02em]",
+				children: displayPrice
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "mb-[18px] mt-0.5 text-[0.78125rem] text-muted-foreground",
+				children: formatPlanPriceUnit(plan)
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "space-y-2",
+				children: mode === "account" ? isActive ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(Button, {
+						variant: "secondary",
+						className: "w-full",
+						disabled: true,
+						children: "Subscribed"
+					}),
+					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
+				] }) : onSwitch && !isPlanCustomPriced(plan) ? /* @__PURE__ */ jsxs(AlertDialog, { children: [/* @__PURE__ */ jsx(AlertDialogTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: featured ? "default" : "outline",
+						className: "w-full",
+						disabled: isSwitching,
+						"data-testid": `switch-${plan.sku}`,
+						children: isSwitching ? "Switching…" : "Switch to this plan"
+					})
+				}), /* @__PURE__ */ jsxs(AlertDialogContent, { children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsxs(AlertDialogTitle, { children: [
+					"Switch to ",
+					plan.displayName,
+					"?"
+				] }), /* @__PURE__ */ jsxs(AlertDialogDescription, { children: [
+					"Your current plan is replaced by ",
+					plan.displayName,
+					". The API keys of your current plan stop working. Create a key for",
+					" ",
+					plan.displayName,
+					" on the API keys page."
+				] })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, { children: "Keep current plan" }), /* @__PURE__ */ jsx(AlertDialogAction, {
+					onClick: () => onSwitch(plan.sku),
+					disabled: isSwitching,
+					children: "Switch plan"
+				})] })] })] }) : /* @__PURE__ */ jsx(Button, {
+					variant: featured ? "default" : "outline",
+					className: "w-full",
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Link$1, {
+						to: planCtaPath(plan),
+						children: accountCtaLabel(plan)
+					})
+				}) : /* @__PURE__ */ jsx(Button, {
+					variant: featured ? "default" : "outline",
+					className: "w-full",
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Link$1, {
+						to: planCtaPath(plan),
+						children: publicCtaLabel(plan)
+					})
+				})
+			}),
+			features.length > 0 ? /* @__PURE__ */ jsx("div", {
+				className: "mt-5 flex flex-1 flex-col gap-[11px] border-t border-border pt-[18px]",
+				"data-testid": plan.includedActionKeys && plan.includedActionKeys.length > 0 ? `included-endpoints-${plan.sku}` : void 0,
+				children: features.map((feat) => /* @__PURE__ */ jsxs("div", {
+					className: "flex items-start gap-2.5 text-[0.84375rem] text-muted-foreground",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "mt-0.5 shrink-0 text-emerald-600",
+						"aria-hidden": true,
+						children: "✓"
+					}), /* @__PURE__ */ jsx("span", { children: feat })]
+				}, feat))
+			}) : null
+		]
+	});
+};
+
+//#endregion
+export { PricingCard as t };