@lukoweb/apitogo-plugin-dev-portal-billing 0.1.86 → 0.1.88

package/dist/index.d.mts

@@ -6,6 +6,32 @@ import * as _tanstack_react_query0 from "@tanstack/react-query";
 declare const AccountPlansPage: () => react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/types.d.ts
+type DevPortalPricingCompareRow = {
+  label: string;
+  values: string[];
+};
+type DevPortalPricingFaq = {
+  question: string;
+  answer: string;
+};
+type DevPortalBillingConfig = {
+  pricing?: {
+    title?: string;
+    subtitle?: string;
+    compareRows?: DevPortalPricingCompareRow[];
+    faqs?: DevPortalPricingFaq[];
+  }; /** 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[];
+    features?: string[];
+  }>;
+};
 type DevPortalApiKey = {
   id: string;
   name: string;
@@ -28,21 +54,6 @@ type DevPortalApiKeyListResponse = {
   header: string;
   gatewayBaseUrl: string | null;
 };
-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/components/ApiKeysPanel.d.ts
 /**

package/dist/index.mjs

@@ -39,7 +39,8 @@ function mapPreviewPlans(plans) {
 		priceCurrency: plan.priceCurrency,
 		billingPeriod: plan.billingPeriod,
 		limitsJson: plan.limitsJson,
-		includedActionKeys: plan.includedActionKeys
+		includedActionKeys: plan.includedActionKeys,
+		features: plan.features
 	}));
 }
 function readModulePlanItems() {
@@ -54,7 +55,8 @@ function parseManifestPlans(configPlans) {
 		priceCurrency: plan.priceCurrency ?? "usd",
 		billingPeriod: plan.billingPeriod ?? "monthly",
 		limitsJson: plan.limitsJson ?? null,
-		includedActionKeys: plan.includedActionKeys ?? []
+		includedActionKeys: plan.includedActionKeys ?? [],
+		features: plan.features
 	}))) };
 	if (manifestCatalog?.plans?.length) return { plans: mapPreviewPlans(manifestCatalog.plans) };
 	const metaPlans = zudokuConfig?.__meta?.previewPlans;
@@ -67,7 +69,8 @@ function parseManifestPlans(configPlans) {
 		priceCurrency: plan.priceCurrency ?? "usd",
 		billingPeriod: plan.billingPeriod ?? "monthly",
 		limitsJson: plan.limitsJson ?? null,
-		includedActionKeys: plan.includedActionKeys ?? []
+		includedActionKeys: plan.includedActionKeys ?? [],
+		features: plan.features
 	}))) };
 	return { plans: [] };
 }
@@ -77,6 +80,7 @@ function formatActionKey(actionKey) {
 	return `${actionKey.slice(0, separatorIndex).toUpperCase()} ${actionKey.slice(separatorIndex + 1)}`;
 }
 function formatPlanPrice(plan) {
+	if (plan.priceAmount < 0) return "Custom";
 	if (plan.priceAmount <= 0) return "Free";
 	const amount = new Intl.NumberFormat(void 0, {
 		style: "currency",
@@ -89,33 +93,63 @@ function formatPlanPrice(plan) {
 	return amount;
 }
 function isPlanFree(plan) {
-	return plan.priceAmount <= 0;
+	return plan.priceAmount === 0;
 }
 function formatBillingPeriod(period) {
 	const normalized = period.toLowerCase();
-	if (normalized === "month" || normalized === "monthly") return "Monthly";
-	if (normalized === "year" || normalized === "annual") return "Annual";
+	if (normalized === "month" || normalized === "monthly") return "per month";
+	if (normalized === "year" || normalized === "annual") return "per year";
+	if (normalized === "custom") return "talk to us";
 	return period;
 }
 function formatRateLimit(rate) {
 	if (!rate || typeof rate !== "object") return null;
 	const { calls, renewalPeriodSeconds } = rate;
 	if (calls == null || renewalPeriodSeconds == null) return null;
+	if (renewalPeriodSeconds === 1) return `${calls} req/sec rate limit`;
 	const window = renewalPeriodSeconds === 60 ? "minute" : `${renewalPeriodSeconds} seconds`;
 	return `${calls} request${calls === 1 ? "" : "s"} per ${window}`;
 }
-function summarizeLimits(limitsJson) {
-	if (!limitsJson?.trim()) return null;
-	try {
-		const limits = JSON.parse(limitsJson);
-		const rateSummary = formatRateLimit(limits.rateLimit);
-		if (rateSummary) return rateSummary;
-		const entries = Object.entries(limits).filter(([, value]) => value != null && typeof value !== "object");
-		if (entries.length === 0) return null;
-		return entries.slice(0, 3).map(([key, value]) => `${key}: ${String(value)}`).join(" · ");
-	} catch {
-		return null;
+function formatQuota(quota) {
+	if (!quota || typeof quota !== "object") return null;
+	const { calls, renewalPeriodDays } = quota;
+	if (calls == null) return null;
+	if (calls < 0) return "Unlimited requests";
+	const formatted = calls.toLocaleString();
+	if (renewalPeriodDays === 30 || renewalPeriodDays === 31) return `${formatted} requests / month`;
+	if (renewalPeriodDays === 1) return `${formatted} requests / day`;
+	if (renewalPeriodDays != null) return `${formatted} requests / ${renewalPeriodDays} days`;
+	return `${formatted} requests`;
+}
+/** Marketing bullets keyed by common sample SKUs when limitsJson is sparse. */
+const SAMPLE_PLAN_FEATURE_EXTRAS = {
+	free: ["All endpoints", "Community support"],
+	developer: ["Webhooks included", "Email support"],
+	team: ["5 team seats", "Priority support"],
+	enterprise: [
+		"Unlimited requests",
+		"Custom rate limits",
+		"SSO & audit logs",
+		"Dedicated SLA"
+	]
+};
+function listPlanFeatureLines(plan) {
+	if (plan.features && plan.features.length > 0) return plan.features;
+	const lines = [];
+	if (plan.limitsJson?.trim()) try {
+		const limits = JSON.parse(plan.limitsJson);
+		const quotaLine = formatQuota(limits.quota);
+		if (quotaLine) lines.push(quotaLine);
+		const rateLine = formatRateLimit(limits.rateLimit);
+		if (rateLine) lines.push(rateLine);
+	} catch {}
+	const extras = SAMPLE_PLAN_FEATURE_EXTRAS[plan.sku.toLowerCase()];
+	if (extras) {
+		for (const extra of extras) if (!lines.includes(extra)) lines.push(extra);
 	}
+	if (plan.includedActionKeys && plan.includedActionKeys.length > 0) for (const actionKey of plan.includedActionKeys) lines.push(formatActionKey(actionKey));
+	if (lines.length === 0 && isPlanFree(plan)) lines.push("API access not included");
+	return lines;
 }
 function isActiveSubscription(status) {
 	return status.toLowerCase() === "active";
@@ -123,55 +157,49 @@ function isActiveSubscription(status) {
 
 //#endregion
 //#region src/components/PricingCard.tsx
-const PricingCard = ({ plan, mode = "public", subscriptionStatus, isSubscribed = false, onUnsubscribe, isCanceling = false, cancelDisabled = false }) => {
-	const limitsSummary = summarizeLimits(plan.limitsJson);
+const publicCtaLabel = (plan) => {
+	if (plan.priceAmount < 0) return "Contact sales";
+	if (isPlanFree(plan)) return "Start for free";
+	return "Start free trial";
+};
+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;
 	return /* @__PURE__ */ jsxs("article", {
-		className: cn("flex w-full max-w-sm flex-col rounded-xl border bg-card/60 p-6 shadow-xs", isActive && mode === "account" && "border-primary/40 ring-1 ring-primary/20"),
+		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-start justify-between gap-2",
-				children: [/* @__PURE__ */ jsx("h2", {
-					className: "text-xl font-semibold",
-					children: plan.displayName
-				}), 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]
+				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-2 text-3xl font-bold",
-				children: formatPlanPrice(plan)
+				className: "mt-3.5 text-[2.1rem] font-extrabold tracking-[-0.02em]",
+				children: displayPrice
 			}),
 			/* @__PURE__ */ jsx("p", {
-				className: "mt-1 text-sm text-muted-foreground",
-				children: formatBillingPeriod(plan.billingPeriod)
+				className: "mb-[18px] mt-0.5 text-[0.78125rem] text-muted-foreground",
+				children: isCustom ? "talk to us" : formatBillingPeriod(plan.billingPeriod)
 			}),
-			limitsSummary ? /* @__PURE__ */ jsx("p", {
-				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))
-				})]
-			}) : isPlanFree(plan) ? /* @__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",
+				className: "space-y-2",
 				children: mode === "account" ? isActive ? /* @__PURE__ */ jsxs(Fragment, { children: [
 					/* @__PURE__ */ jsx(Button, {
 						variant: "secondary",
@@ -202,7 +230,7 @@ const PricingCard = ({ plan, mode = "public", subscriptionStatus, isSubscribed =
 						children: "Unsubscribe is available after the portal is published."
 					}) : null
 				] }) : /* @__PURE__ */ jsx(Button, {
-					variant: "default",
+					variant: featured ? "default" : "outline",
 					className: "w-full",
 					asChild: true,
 					children: /* @__PURE__ */ jsx(Link, {
@@ -218,15 +246,27 @@ const PricingCard = ({ plan, mode = "public", subscriptionStatus, isSubscribed =
 						children: "Manage subscription"
 					})
 				}) : /* @__PURE__ */ jsx(Button, {
-					variant: "default",
+					variant: featured ? "default" : "outline",
 					className: "w-full",
 					asChild: true,
 					children: /* @__PURE__ */ jsx(Link, {
 						to: `/checkout?planSku=${encodeURIComponent(plan.sku)}`,
-						children: isPlanFree(plan) ? "Get started" : "Subscribe"
+						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
 		]
 	});
 };
@@ -1127,6 +1167,69 @@ function isPreviewPricingEnabled() {
 
 //#endregion
 //#region src/pages/PricingPage.tsx
+const DEFAULT_COMPARE_ROWS = [
+	{
+		label: "Monthly requests",
+		values: [
+			"1,000",
+			"50,000",
+			"500,000",
+			"Unlimited"
+		]
+	},
+	{
+		label: "Rate limit",
+		values: [
+			"10/sec",
+			"50/sec",
+			"200/sec",
+			"Custom"
+		]
+	},
+	{
+		label: "Team seats",
+		values: [
+			"1",
+			"1",
+			"5",
+			"Unlimited"
+		]
+	},
+	{
+		label: "Webhooks",
+		values: [
+			"—",
+			"Included",
+			"Included",
+			"Included"
+		]
+	},
+	{
+		label: "SSO",
+		values: [
+			"—",
+			"—",
+			"—",
+			"Included"
+		]
+	},
+	{
+		label: "Support",
+		values: [
+			"Community",
+			"Email",
+			"Priority",
+			"Dedicated SLA"
+		]
+	}
+];
+const DEFAULT_FAQS = [{
+	question: "What happens if I exceed my quota?",
+	answer: "Requests over your monthly quota return a 429 response so you can test rate-limit handling instead of being cut off unexpectedly."
+}, {
+	question: "Can I change plans later?",
+	answer: "Yes, upgrade or downgrade any time from your billing page. Changes apply on your next billing cycle."
+}];
 const PricingPage = () => {
 	const { pricing, previewPlans } = useDevPortalBillingConfig();
 	const auth = useAuth();
@@ -1146,62 +1249,134 @@ const PricingPage = () => {
 		replace: true
 	});
 	const activeSkus = new Set((me?.subscriptions ?? []).filter((sub) => isActiveSubscription(sub.status)).map((sub) => sub.planSku));
-	const title = pricing?.title ?? "Pricing";
-	const subtitle = pricing?.subtitle ?? "Compare plans and subscribe when you are ready to integrate.";
+	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 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) : [
+		"Free",
+		"Developer",
+		"Team",
+		"Enterprise"
+	];
 	return /* @__PURE__ */ jsxs("div", {
-		className: "w-full px-4 pt-(--padding-content-top) pb-(--padding-content-bottom)",
+		className: "w-full",
 		children: [
 			/* @__PURE__ */ jsxs(Head, { children: [/* @__PURE__ */ jsx("title", { children: title }), /* @__PURE__ */ jsx("meta", {
 				name: "description",
 				content: subtitle
 			})] }),
-			/* @__PURE__ */ jsxs("div", {
-				className: "mb-12 space-y-4 text-center",
-				children: [/* @__PURE__ */ jsx(Heading, {
-					level: 1,
-					"data-testid": "title",
-					children: title
-				}), /* @__PURE__ */ jsx("p", {
-					className: "text-muted-foreground",
-					"data-testid": "subtitle",
-					children: subtitle
-				})]
-			}),
-			isLoading ? /* @__PURE__ */ jsx("p", {
-				className: "text-center text-muted-foreground",
-				children: "Loading plans…"
-			}) : null,
-			isError ? /* @__PURE__ */ jsx("p", {
-				className: "text-center text-destructive",
-				children: "Unable to load plans."
-			}) : null,
-			catalog && catalog.plans.length > 0 ? /* @__PURE__ */ jsx("div", {
-				className: "grid grid-cols-1 justify-center gap-6 sm:grid-cols-[repeat(auto-fit,minmax(280px,max-content))]",
-				children: catalog.plans.map((plan) => /* @__PURE__ */ jsx(PricingCard, {
-					plan,
-					mode: "public",
-					isSubscribed: activeSkus.has(plan.sku)
-				}, plan.sku))
-			}) : !isLoading && !isError ? /* @__PURE__ */ jsxs("div", {
-				className: "mx-auto max-w-lg rounded-xl border border-dashed p-8 text-center text-sm text-muted-foreground",
+			/* @__PURE__ */ jsxs("section", {
+				className: "px-6 pb-4 pt-[clamp(3rem,6vw,4.5rem)] text-center",
 				children: [
-					"No plans are configured yet. Add plans in",
-					" ",
-					/* @__PURE__ */ jsx("code", {
-						className: "rounded bg-muted px-1.5 py-0.5",
-						children: "apitogo.config.json"
+					/* @__PURE__ */ jsx("p", {
+						className: "text-xs font-bold uppercase tracking-[0.08em] text-primary",
+						children: "Pricing"
 					}),
-					" ",
-					"and set",
-					" ",
-					/* @__PURE__ */ jsx("code", {
-						className: "rounded bg-muted px-1.5 py-0.5",
-						children: "modules.userPanel.plans.enabled"
+					/* @__PURE__ */ jsx(Heading, {
+						level: 1,
+						className: "mt-3 text-[clamp(2rem,3.5vw,3rem)] font-extrabold tracking-[-0.02em]",
+						"data-testid": "title",
+						children: title
 					}),
-					" ",
-					"to true."
+					/* @__PURE__ */ jsx("p", {
+						className: "mx-auto mt-3.5 max-w-[34rem] text-lg leading-relaxed text-muted-foreground",
+						"data-testid": "subtitle",
+						children: subtitle
+					})
 				]
-			}) : null
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				className: "px-6 pb-16 pt-8",
+				children: [
+					isLoading ? /* @__PURE__ */ jsx("p", {
+						className: "text-center text-muted-foreground",
+						children: "Loading plans…"
+					}) : null,
+					isError ? /* @__PURE__ */ jsx("p", {
+						className: "text-center text-destructive",
+						children: "Unable to load plans."
+					}) : null,
+					plans.length > 0 ? /* @__PURE__ */ jsx("div", {
+						className: "mx-auto grid max-w-[1200px] grid-cols-1 items-stretch gap-5 sm:grid-cols-2 lg:grid-cols-4",
+						children: plans.map((plan) => /* @__PURE__ */ jsx(PricingCard, {
+							plan,
+							mode: "public",
+							isSubscribed: activeSkus.has(plan.sku),
+							featured: plan.sku === featuredSku
+						}, plan.sku))
+					}) : !isLoading && !isError ? /* @__PURE__ */ jsxs("div", {
+						className: "mx-auto max-w-lg rounded-xl border border-dashed p-8 text-center text-sm text-muted-foreground",
+						children: [
+							"No plans are configured yet. Add plans in",
+							" ",
+							/* @__PURE__ */ jsx("code", {
+								className: "rounded bg-muted px-1.5 py-0.5",
+								children: "apitogo.config.json"
+							}),
+							" ",
+							"and set",
+							" ",
+							/* @__PURE__ */ jsx("code", {
+								className: "rounded bg-muted px-1.5 py-0.5",
+								children: "modules.userPanel.plans.enabled"
+							}),
+							" ",
+							"to true."
+						]
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsx("section", {
+				className: "border-t border-border bg-muted/40 px-6 py-16",
+				"data-testid": "pricing-compare",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "mx-auto max-w-[1200px]",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "mb-6 text-[clamp(1.5rem,2.5vw,2.25rem)] font-extrabold tracking-[-0.02em]",
+						children: "Compare plans"
+					}), /* @__PURE__ */ jsx("div", {
+						className: "overflow-x-auto rounded-xl border border-border bg-card",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "min-w-[720px]",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "grid gap-0 border-b border-border px-5 py-3.5 text-[0.78125rem] font-bold uppercase tracking-[0.04em] text-muted-foreground",
+								style: { gridTemplateColumns: `minmax(10rem,1.4fr) repeat(${compareHeaders.length}, minmax(6rem,1fr))` },
+								children: [/* @__PURE__ */ jsx("div", { children: "Feature" }), compareHeaders.map((header) => /* @__PURE__ */ jsx("div", { children: header }, header))]
+							}), compareRows.map((row) => /* @__PURE__ */ jsxs("div", {
+								className: "grid gap-0 border-b border-border px-5 py-3.5 text-[0.84375rem] text-muted-foreground last:border-b-0",
+								style: { gridTemplateColumns: `minmax(10rem,1.4fr) repeat(${compareHeaders.length}, minmax(6rem,1fr))` },
+								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}`))]
+							}, row.label))]
+						})
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx("section", {
+				className: "px-6 py-16",
+				"data-testid": "pricing-faq",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "mx-auto max-w-4xl",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "mb-8 text-center text-[clamp(1.5rem,2.5vw,2.25rem)] font-extrabold tracking-[-0.02em]",
+						children: "Frequently asked questions"
+					}), /* @__PURE__ */ jsx("div", { children: faqs.map((faq) => /* @__PURE__ */ jsxs("div", {
+						className: "border-b border-border py-5 last:border-b-0",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "text-[0.9375rem] font-bold",
+							children: faq.question
+						}), /* @__PURE__ */ jsx("p", {
+							className: "mt-2 text-sm leading-relaxed text-muted-foreground",
+							children: faq.answer
+						})]
+					}, faq.question)) })]
+				})
+			})
 		]
 	});
 };

package/package.json

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