@zuplo/zudoku-plugin-monetization 0.0.34 → 0.0.36-pre.0

package/dist/index.mjs

@@ -1,3 +1,4 @@
+import { _ as formatDurationAdjective, a as subscriptionTaxLegendSentence, c as PlanEntitlements, d as categorizeRateCards, f as formatTieredPriceBreakdown, g as formatDuration, h as formatPrice, i as planHasDefaultTaxBehavior, m as formatMinorCurrencyAmount, p as formatStaticEntitlementConfig, s as getPriceFromPlan, t as PricingTable, v as formatDurationInterval } from "./PricingTable-DfYAmAjk.mjs";
 import { Suspense, createContext, use, useEffect, useMemo, useState } from "react";
 import { cn, createPlugin, joinUrl, throwIfProblemJson } from "zudoku";
 import { AlertTriangleIcon, ArrowDownIcon, ArrowLeftRightIcon, ArrowUpIcon, CalendarIcon, CheckCheckIcon, CheckIcon, CircleSlashIcon, ClockIcon, CreditCardIcon, Grid2x2XIcon, InfoIcon, Loader2Icon, LockIcon, MoreVerticalIcon, RefreshCcw, RefreshCwIcon, Settings, ShieldIcon, StarsIcon, Trash2Icon, XIcon } from "zudoku/icons";
@@ -8,8 +9,7 @@ import { Link as Link$1, Outlet, useLocation, useNavigate, useSearchParams } fro
 import { Alert, AlertAction, AlertDescription, AlertTitle } from "zudoku/ui/Alert";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "zudoku/ui/Card";
 import { Separator } from "zudoku/ui/Separator";
-import { parse } from "tinyduration";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Button as Button$1 } from "zudoku/ui/Button";
 import { Skeleton } from "zudoku/ui/Skeleton";
 import { DismissibleAlert, DismissibleAlertAction } from "zudoku/ui/DismissibleAlert";
@@ -23,263 +23,6 @@ import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "zudoku/ui/Dialog";
 import { Input } from "zudoku/ui/Input";
 import { Progress } from "zudoku/ui/Progress";
-//#region src/utils/formatDuration.ts
-const formatDuration = (iso) => {
-	try {
-		const d = parse(iso);
-		if (d.months === 1) return "month";
-		if (d.months && d.months > 1) return `${d.months} months`;
-		if (d.years === 1) return "year";
-		if (d.years && d.years > 1) return `${d.years} years`;
-		if (d.weeks === 1) return "week";
-		if (d.weeks && d.weeks > 1) return `${d.weeks} weeks`;
-		if (d.days === 1) return "day";
-		if (d.days && d.days > 1) return `${d.days} days`;
-		return iso;
-	} catch {
-		return iso;
-	}
-};
-const formatDurationInterval = (iso) => {
-	try {
-		const d = parse(iso);
-		if (d.years === 1) return "yearly";
-		if (d.years && d.years > 1) return `every ${d.years} years`;
-		if (d.months === 1) return "monthly";
-		if (d.months && d.months > 1) return `every ${d.months} months`;
-		if (d.weeks === 1) return "weekly";
-		if (d.weeks && d.weeks > 1) return `every ${d.weeks} weeks`;
-		if (d.days === 1) return "daily";
-		if (d.days && d.days > 1) return `every ${d.days} days`;
-		return iso;
-	} catch {
-		return iso;
-	}
-};
-/**
-* Returns an adjective form suitable for possessive context
-* e.g. "your monthly quota", "your weekly limit".
-* Falls back to "billing period" for multi-unit cadences
-* where "every 3 months" would be grammatically awkward.
-*/
-const formatDurationAdjective = (iso) => {
-	try {
-		const d = parse(iso);
-		if (d.years === 1) return "yearly";
-		if (d.months === 1) return "monthly";
-		if (d.weeks === 1) return "weekly";
-		if (d.days === 1) return "daily";
-		return "billing period";
-	} catch {
-		return "billing period";
-	}
-};
-//#endregion
-//#region src/utils/formatPrice.ts
-const formatPrice = (amount, currency) => new Intl.NumberFormat("en-US", {
-	style: "currency",
-	currency: currency ?? "USD",
-	minimumFractionDigits: 2,
-	maximumFractionDigits: 6,
-	trailingZeroDisplay: "stripIfInteger"
-}).format(amount);
-/** Amount is in the smallest currency unit (e.g. Stripe); divisor from `Intl` / ISO 4217. */
-const formatMinorCurrencyAmount = (amountInMinorUnits, currency) => {
-	const code = (currency ?? "USD").toUpperCase();
-	const fractionDigits = new Intl.NumberFormat("en-US", {
-		style: "currency",
-		currency: code
-	}).resolvedOptions().maximumFractionDigits ?? 2;
-	const divisor = 10 ** fractionDigits;
-	return new Intl.NumberFormat("en-US", {
-		style: "currency",
-		currency: code,
-		minimumFractionDigits: fractionDigits,
-		maximumFractionDigits: fractionDigits
-	}).format(amountInMinorUnits / divisor);
-};
-//#endregion
-//#region src/utils/formatTieredPriceBreakdown.ts
-const parseAmount = (value) => {
-	if (!value) return;
-	const parsed = Number.parseFloat(value);
-	return Number.isFinite(parsed) ? parsed : void 0;
-};
-const formatTieredPriceBreakdown = (opts) => {
-	const { tiers, currency, unitLabel, includedLabel, omitIncludedUpToAmount } = opts;
-	if (!tiers || tiers.length <= 1) return;
-	const lines = [];
-	let lastUpTo;
-	for (const tier of tiers) {
-		const upTo = parseAmount(tier.upToAmount);
-		const unit = parseAmount(tier.unitPriceAmount) ?? 0;
-		const flat = parseAmount(tier.flatPriceAmount) ?? 0;
-		const prefix = upTo != null ? `Up to ${upTo.toLocaleString("en-US")}` : lastUpTo != null ? `Over ${lastUpTo.toLocaleString("en-US")}` : `Per ${unitLabel}`;
-		const unitPart = unit > 0 ? `${formatPrice(unit, currency)}/${unitLabel}` : includedLabel;
-		const flatPart = flat > 0 ? ` + ${formatPrice(flat, currency)} base` : "";
-		const line = `${prefix}: ${unitPart}${flatPart}`;
-		if (omitIncludedUpToAmount != null && upTo != null && upTo === omitIncludedUpToAmount && unitPart === includedLabel && flatPart === "") {} else lines.push(line);
-		if (upTo != null) lastUpTo = upTo;
-	}
-	return lines.length > 0 ? lines : void 0;
-};
-//#endregion
-//#region src/utils/categorizeRateCards.ts
-const categorizeRateCards = (rateCards, options) => {
-	const { currency, units, planBillingCadence } = options ?? {};
-	const quotas = [];
-	const features = [];
-	for (const rc of rateCards) {
-		const et = rc.entitlementTemplate;
-		if (!et) continue;
-		if (et.type === "metered" && et.issueAfterReset != null) {
-			let overagePrice;
-			let tierPrices;
-			if (rc.price?.type === "tiered" && rc.price.tiers) {
-				const unitLabel = units?.[rc.key] ?? units?.[rc.featureKey ?? ""] ?? "unit";
-				tierPrices = formatTieredPriceBreakdown({
-					tiers: rc.price.tiers.map((t) => ({
-						upToAmount: t.upToAmount,
-						unitPriceAmount: t.unitPrice?.amount,
-						flatPriceAmount: t.flatPrice?.amount
-					})),
-					currency,
-					unitLabel,
-					includedLabel: "Included",
-					omitIncludedUpToAmount: et.issueAfterReset
-				});
-				const overageTier = rc.price.tiers.find((t) => t.unitPrice?.amount && parseFloat(t.unitPrice.amount) > 0);
-				if (et.isSoftLimit !== false && overageTier?.unitPrice) overagePrice = `${formatPrice(parseFloat(overageTier.unitPrice.amount), currency)}/${unitLabel}`;
-			}
-			quotas.push({
-				key: rc.featureKey ?? rc.key,
-				name: rc.name,
-				limit: et.issueAfterReset,
-				period: rc.billingCadence ? formatDuration(rc.billingCadence) : planBillingCadence ? formatDuration(planBillingCadence) : "month",
-				overagePrice,
-				tierPrices
-			});
-		} else if (et.type === "boolean") features.push({
-			key: rc.featureKey ?? rc.key,
-			name: rc.name
-		});
-		else if (et.type === "static" && et.config) try {
-			const config = JSON.parse(et.config);
-			features.push({
-				key: rc.featureKey ?? rc.key,
-				name: rc.name,
-				value: String(config.value)
-			});
-		} catch {
-			features.push({
-				key: rc.featureKey ?? rc.key,
-				name: rc.name
-			});
-		}
-	}
-	return {
-		quotas,
-		features
-	};
-};
-//#endregion
-//#region src/components/FeatureItem.tsx
-const FeatureItem = ({ feature, className }) => {
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex items-start gap-2", className),
-		children: [/* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-primary shrink-0 mt-0.5" }), /* @__PURE__ */ jsx("div", {
-			className: "text-sm",
-			children: feature.value ? /* @__PURE__ */ jsxs(Fragment, { children: [
-				/* @__PURE__ */ jsxs("span", {
-					className: "font-medium",
-					children: [feature.name, ":"]
-				}),
-				" ",
-				feature.value
-			] }) : feature.name
-		})]
-	});
-};
-//#endregion
-//#region src/components/QuotaItem.tsx
-const QuotaItem = ({ quota, className }) => {
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex items-start gap-2", className),
-		children: [/* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-primary shrink-0 mt-0.5" }), /* @__PURE__ */ jsxs("div", {
-			className: "text-sm",
-			children: [
-				/* @__PURE__ */ jsxs("span", {
-					className: "font-medium",
-					children: [quota.name, ":"]
-				}),
-				" ",
-				quota.limit.toLocaleString(),
-				" / ",
-				quota.period,
-				quota.tierPrices && quota.tierPrices.length > 0 && /* @__PURE__ */ jsx("ul", {
-					className: "text-xs text-muted-foreground mt-1 space-y-0.5",
-					children: quota.tierPrices.map((line) => /* @__PURE__ */ jsx("li", { children: line }, line))
-				}),
-				quota.overagePrice && /* @__PURE__ */ jsxs("div", {
-					className: "text-xs text-muted-foreground mt-0.5",
-					children: [
-						"+",
-						quota.overagePrice,
-						" after quota"
-					]
-				})
-			]
-		})]
-	});
-};
-//#endregion
-//#region src/components/PlanEntitlements.tsx
-const PhaseSection = ({ phase, currency, showName, billingCadence, units, itemClassName }) => {
-	const { quotas, features } = categorizeRateCards(phase.rateCards, {
-		currency,
-		units,
-		planBillingCadence: billingCadence
-	});
-	if (quotas.length === 0 && features.length === 0) return null;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-2",
-		children: [
-			showName && /* @__PURE__ */ jsxs("div", {
-				className: "text-sm font-medium text-card-foreground",
-				children: [phase.name, phase.duration && /* @__PURE__ */ jsxs("span", {
-					className: "text-muted-foreground font-normal",
-					children: [
-						" ",
-						"— ",
-						formatDuration(phase.duration)
-					]
-				})]
-			}),
-			quotas.map((quota) => /* @__PURE__ */ jsx(QuotaItem, {
-				quota,
-				className: itemClassName
-			}, quota.key)),
-			features.map((feature) => /* @__PURE__ */ jsx(FeatureItem, {
-				feature,
-				className: itemClassName
-			}, feature.key))
-		]
-	});
-};
-const PlanEntitlements = ({ phases, currency, billingCadence, units, itemClassName }) => {
-	return /* @__PURE__ */ jsx("div", {
-		className: "space-y-4",
-		children: phases.map((phase, idx) => /* @__PURE__ */ jsx(PhaseSection, {
-			phase,
-			currency,
-			showName: phases.length > 1,
-			billingCadence,
-			units,
-			itemClassName
-		}, phase.key ?? String(idx)))
-	});
-};
-//#endregion
 //#region src/hooks/useDeploymentName.ts
 const useDeploymentName = () => {
 	const deploymentName = useZudoku().env.ZUPLO_PUBLIC_DEPLOYMENT_NAME;
@@ -309,14 +52,6 @@ const formatBillingCycle = (duration) => {
 	return `every ${duration}`;
 };
 //#endregion
-//#region src/utils/getPriceFromPlan.ts
-const getPriceFromPlan = (plan) => {
-	return {
-		monthly: plan.monthlyPrice != null ? parseFloat(plan.monthlyPrice) : 0,
-		yearly: plan.yearlyPrice != null ? parseFloat(plan.yearlyPrice) : 0
-	};
-};
-//#endregion
 //#region src/utils/purchaseDetails.ts
 const getPlanFromPurchaseDetails = (response) => {
 	return response;
@@ -718,117 +453,6 @@ const usePlans = () => {
 	});
 };
 //#endregion
-//#region src/utils/pricingTaxLegend.ts
-const normalizeTaxBehavior = (behavior) => {
-	switch (behavior.trim().toLowerCase()) {
-		case "exclusive":
-		case "tax_exclusive": return "exclusive";
-		case "inclusive":
-		case "tax_inclusive": return "inclusive";
-		default: return "unspecified";
-	}
-};
-const planHasDefaultTaxBehavior = (plan) => {
-	const behavior = plan.defaultTaxConfig?.behavior;
-	return typeof behavior === "string" && behavior.trim().length > 0;
-};
-const collectDefaultTaxBehaviors = (plan) => {
-	const behavior = plan.defaultTaxConfig?.behavior;
-	return typeof behavior === "string" && behavior.trim().length > 0 ? normalizeTaxBehavior(behavior) : "unspecified";
-};
-const taxBehaviorLegendSentence = (behavior) => {
-	switch (normalizeTaxBehavior(behavior)) {
-		case "exclusive": return "Prices exclude tax; taxes may be added at checkout if applicable.";
-		case "inclusive": return "Prices include tax where applicable.";
-		default: return;
-	}
-};
-const subscriptionTaxLegendSentence = (behavior) => {
-	switch (normalizeTaxBehavior(behavior)) {
-		case "exclusive": return "Price excludes tax; taxes may be added on invoice if applicable.";
-		case "inclusive": return "Price includes tax where applicable.";
-		default: return;
-	}
-};
-//#endregion
-//#region src/pages/pricing/PricingCard.tsx
-const PricingCard = ({ plan, isPopular = false, isSubscribed = false }) => {
-	const { pricing } = useMonetizationConfig();
-	if (plan.phases.length === 0) return null;
-	const price = getPriceFromPlan(plan);
-	const isFree = price.monthly === 0;
-	const isCustom = plan.metadata?.isCustom === true;
-	const billingInterval = formatDuration(plan.billingCadence);
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative rounded-lg border p-6 flex flex-col", isPopular && "border-primary border-2"),
-		children: [
-			isPopular && /* @__PURE__ */ jsx("div", {
-				className: "absolute top-0 -translate-y-1/2 left-1/2 -translate-x-1/2 whitespace-nowrap",
-				children: /* @__PURE__ */ jsx("span", {
-					className: "bg-primary text-primary-foreground text-xs font-semibold px-3 py-1 rounded-full uppercase",
-					children: "Most Popular"
-				})
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "mb-4 pb-4 border-b",
-				children: [
-					/* @__PURE__ */ jsx("h3", {
-						className: "text-base font-semibold text-muted-foreground mb-2",
-						children: plan.name
-					}),
-					/* @__PURE__ */ jsx("div", {
-						className: "flex items-baseline gap-1 flex-wrap",
-						children: isCustom ? /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-							className: "text-3xl font-bold text-card-foreground",
-							children: "Custom"
-						}), /* @__PURE__ */ jsx("div", {
-							className: "text-sm text-muted-foreground mt-1",
-							children: "Contact Sales"
-						})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-							className: "text-3xl font-bold text-card-foreground",
-							children: isFree ? "Free" : formatPrice(price.monthly, plan.currency)
-						}), !isFree && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
-							className: "text-muted-foreground text-sm",
-							children: ["/", billingInterval]
-						}), pricing?.showYearlyPrice !== false && price.yearly > 0 && /* @__PURE__ */ jsxs("div", {
-							className: "w-full text-sm text-muted-foreground mt-1",
-							children: [formatPrice(price.yearly, plan.currency), "/year"]
-						})] })] })
-					}),
-					plan.paymentRequired === false && /* @__PURE__ */ jsx("div", {
-						className: "text-sm text-muted-foreground mt-1",
-						children: "No CC required"
-					})
-				]
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "space-y-4 mb-6 grow",
-				children: /* @__PURE__ */ jsx(PlanEntitlements, {
-					phases: plan.phases,
-					currency: plan.currency,
-					billingCadence: plan.billingCadence,
-					units: pricing?.units
-				})
-			}),
-			isSubscribed ? /* @__PURE__ */ jsx(Button, {
-				variant: isPopular ? "default" : "secondary",
-				asChild: true,
-				children: /* @__PURE__ */ jsx(Link$1, {
-					to: `/subscriptions#manage`,
-					children: "Manage Subscriptions"
-				})
-			}) : /* @__PURE__ */ jsx(Button, {
-				variant: isPopular ? "default" : "secondary",
-				asChild: true,
-				children: /* @__PURE__ */ jsx(Link$1, {
-					to: `/checkout?planId=${encodeURIComponent(plan.id)}`,
-					children: "Subscribe"
-				})
-			})
-		]
-	});
-};
-//#endregion
 //#region src/pages/PricingPage.tsx
 const PricingPage = () => {
 	const { pricing } = useMonetizationConfig();
@@ -836,12 +460,12 @@ const PricingPage = () => {
 	const deploymentName = useDeploymentName();
 	const auth = useAuth();
 	const { data: pricingTable } = usePlans();
-	const taxLegendSentence = taxBehaviorLegendSentence(collectDefaultTaxBehaviors(pricingTable.items[0]));
 	const { data: subscriptions = { items: [] } } = useQuery({
 		meta: { context: zudoku },
 		queryKey: [`/v3/zudoku-metering/${deploymentName}/subscriptions`],
 		enabled: auth.isAuthenticated
 	});
+	const isSubscribed = subscriptions.items.some((subscription) => ["active", "canceled"].includes(subscription.status));
 	return /* @__PURE__ */ jsxs("div", {
 		className: "w-full px-4 pt-(--padding-content-top) pb-(--padding-content-bottom)",
 		children: [
@@ -861,30 +485,26 @@ const PricingPage = () => {
 					children: pricing?.subtitle ?? "See our pricing options and choose the one that best suits your needs."
 				})]
 			}),
-			pricingTable.items.length === 0 ? /* @__PURE__ */ jsxs("div", {
-				className: "text-center py-12 text-muted-foreground",
-				children: [/* @__PURE__ */ jsx("p", { children: "No plans are currently available." }), /* @__PURE__ */ jsx("p", {
-					className: "text-sm mt-2",
-					children: "Make sure your plans are set up and published."
-				})]
-			}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-				className: "w-full grid grid-cols-1 sm:grid-cols-[repeat(auto-fit,minmax(300px,max-content))] justify-center gap-6",
-				children: pricingTable.items.map((plan) => /* @__PURE__ */ jsx(PricingCard, {
-					plan,
-					isPopular: plan.metadata?.zuplo_most_popular === "true",
-					isSubscribed: subscriptions.items.some((subscription) => ["active", "canceled"].includes(subscription.status))
-				}, plan.id))
-			}), taxLegendSentence && /* @__PURE__ */ jsxs("div", {
-				role: "note",
-				className: "mt-10 pt-6 border-t border-border max-w-2xl mx-auto text-center space-y-2",
-				children: [/* @__PURE__ */ jsx("p", {
-					className: "text-xs font-medium text-muted-foreground",
-					children: "Tax & Pricing"
-				}), /* @__PURE__ */ jsx("p", {
-					className: "text-xs text-muted-foreground",
-					children: taxLegendSentence
-				})]
-			})] }),
+			/* @__PURE__ */ jsx(PricingTable, {
+				plans: pricingTable.items,
+				showYearlyPrice: pricing?.showYearlyPrice !== false,
+				units: pricing?.units,
+				renderAction: (plan, isPopular) => isSubscribed ? /* @__PURE__ */ jsx(Button, {
+					variant: isPopular ? "default" : "outline",
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Link$1, {
+						to: `/subscriptions#manage`,
+						children: "Manage Subscriptions"
+					})
+				}) : /* @__PURE__ */ jsx(Button, {
+					variant: isPopular ? "default" : "outline",
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Link$1, {
+						to: `/checkout?planId=${encodeURIComponent(plan.id)}`,
+						children: "Subscribe"
+					})
+				})
+			}),
 			/* @__PURE__ */ jsx(Slot.Target, { name: "pricing-page-after" })
 		]
 	});
@@ -1200,7 +820,7 @@ const ApiKey = ({ apiKey, createdAt, lastUsed, expiresOn, isActive = true, label
 						children: "•"
 					}),
 					/* @__PURE__ */ jsxs("span", { children: ["Last updated ", getTimeAgo(lastUsed)] }),
-					expiresOn && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					expiresOn && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 						className: "text-muted-foreground/40",
 						children: "•"
 					}), /* @__PURE__ */ jsxs("span", {
@@ -1432,7 +1052,7 @@ const CancelSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionId
 					children: [
 						/* @__PURE__ */ jsxs(Alert, {
 							variant: "warning",
-							children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "size-4" }), isTrialCancel ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(AlertTitle, { children: [
+							children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "size-4" }), isTrialCancel ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(AlertTitle, { children: [
 								"Cancel your trial of ",
 								planName,
 								"?"
@@ -1440,11 +1060,11 @@ const CancelSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionId
 								"Your subscription will end now and you won't be charged when the trial would have converted to ",
 								planName,
 								"."
-							] })] }) : isImmediateCancel ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(AlertTitle, { children: [
+							] })] }) : isImmediateCancel ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(AlertTitle, { children: [
 								"Cancel your ",
 								planName,
 								" subscription?"
-							] }), /* @__PURE__ */ jsx(AlertDescription, { children: "Your subscription will end immediately. You'll lose access to its entitlements right away." })] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AlertTitle, { children: "Your plan will be canceled at the end of your billing cycle." }), /* @__PURE__ */ jsxs(AlertDescription, { children: [
+							] }), /* @__PURE__ */ jsx(AlertDescription, { children: "Your subscription will end immediately. You'll lose access to its entitlements right away." })] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AlertTitle, { children: "Your plan will be canceled at the end of your billing cycle." }), /* @__PURE__ */ jsxs(AlertDescription, { children: [
 								"You'll retain access until ",
 								formatDate$2(billingPeriodEnd),
 								". After your billing period ends, this plan will not renew and you would need to subscribe again to continue."
@@ -1452,7 +1072,7 @@ const CancelSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionId
 						}),
 						/* @__PURE__ */ jsxs(Alert, {
 							variant: "info",
-							children: [/* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }), isImmediateCancel ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AlertTitle, { children: "You can subscribe again at any time" }), /* @__PURE__ */ jsx(AlertDescription, { children: "After canceling, you can return to the pricing page and start a new subscription whenever you're ready." })] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AlertTitle, { children: "You can still resume before then" }), /* @__PURE__ */ jsxs(AlertDescription, { children: [
+							children: [/* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }), isImmediateCancel ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AlertTitle, { children: "You can subscribe again at any time" }), /* @__PURE__ */ jsx(AlertDescription, { children: "After canceling, you can return to the pricing page and start a new subscription whenever you're ready." })] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AlertTitle, { children: "You can still resume before then" }), /* @__PURE__ */ jsxs(AlertDescription, { children: [
 								"If you change your mind you have until",
 								" ",
 								formatDate$2(billingPeriodEnd),
@@ -1689,7 +1309,7 @@ const comparePlans = (currentPlan, targetPlan, currentIndex, targetIndex, units)
 		const target = targetFeatures.find((f) => f.key === key);
 		if (current && target) {
 			let change = "same";
-			if (current.value && target.value && current.value !== target.value) change = isUpgrade ? "upgraded" : "downgraded";
+			if (current.value !== void 0 && target.value !== void 0 && current.value !== target.value) change = isUpgrade ? "upgraded" : "downgraded";
 			featureChanges.push({
 				key: key ?? "",
 				name: target.name,
@@ -1815,7 +1435,7 @@ const PlanComparisonItem = ({ comparison, subscriptionId, mode, onRequestChange,
 					}) : quota.change === "removed" ? /* @__PURE__ */ jsx("span", {
 						className: "text-destructive",
 						children: "No longer included"
-					}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 						/* @__PURE__ */ jsxs("span", {
 							className: "text-muted-foreground",
 							children: [
@@ -1840,10 +1460,10 @@ const PlanComparisonItem = ({ comparison, subscriptionId, mode, onRequestChange,
 				]
 			}, quota.key)), comparison.featureChanges.map((feature) => /* @__PURE__ */ jsx("div", {
 				className: "flex items-center gap-2 text-sm",
-				children: feature.change === "same" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-green-600 shrink-0" }), /* @__PURE__ */ jsxs("span", {
+				children: feature.change === "same" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-green-600 shrink-0" }), /* @__PURE__ */ jsxs("span", {
 					className: "text-muted-foreground",
 					children: [feature.name, typeof feature.newValue === "string" ? `: ${feature.newValue}` : typeof feature.currentValue === "string" ? `: ${feature.currentValue}` : ""]
-				})] }) : feature.change === "added" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				})] }) : feature.change === "added" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					/* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-green-600 shrink-0" }),
 					/* @__PURE__ */ jsx("span", {
 						className: "text-muted-foreground font-medium",
@@ -1857,7 +1477,7 @@ const PlanComparisonItem = ({ comparison, subscriptionId, mode, onRequestChange,
 						className: "text-green-600",
 						children: "Now included"
 					})
-				] }) : feature.change === "removed" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				] }) : feature.change === "removed" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					/* @__PURE__ */ jsx(XIcon, { className: "w-4 h-4 text-destructive shrink-0" }),
 					/* @__PURE__ */ jsx("span", {
 						className: "font-medium",
@@ -1871,7 +1491,7 @@ const PlanComparisonItem = ({ comparison, subscriptionId, mode, onRequestChange,
 						className: "text-destructive",
 						children: "No longer included"
 					})
-				] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+				] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					/* @__PURE__ */ jsx(ChangeIndicator, { change: feature.change }),
 					/* @__PURE__ */ jsxs("span", {
 						className: "",
@@ -2255,19 +1875,11 @@ const getEntitlementsFromItems = (items, currency, units, fallbackBillingCadence
 				});
 				continue;
 			}
-			try {
-				const parsed = JSON.parse(entitlement.config);
-				features.push({
-					entitlementType: "static",
-					...base,
-					value: parsed?.value != null ? String(parsed.value) : void 0
-				});
-			} catch {
-				features.push({
-					entitlementType: "static",
-					...base
-				});
-			}
+			features.push({
+				entitlementType: "static",
+				...base,
+				value: formatStaticEntitlementConfig(entitlement.config)
+			});
 		}
 	}
 	return { features };
@@ -2315,7 +1927,7 @@ const SubscriptionPlanDetails = ({ subscription }) => {
 	const primaryPrice = priceInfo.monthly === 0 && priceInfo.yearly === 0 ? /* @__PURE__ */ jsx("span", {
 		className: "text-primary font-medium",
 		children: "Free"
-	}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+	}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 		className: "text-primary font-medium text-lg",
 		children: formatPrice(priceInfo.monthly, currency)
 	}), /* @__PURE__ */ jsxs("span", {
@@ -2402,10 +2014,10 @@ const SubscriptionPlanDetails = ({ subscription }) => {
 										className: "flex flex-col gap-1",
 										children: [/* @__PURE__ */ jsxs("div", {
 											className: "text-foreground font-medium",
-											children: [row.name, row.entitlementType === "static" && row.value ? `: ${row.value}` : ""]
+											children: [row.name, row.entitlementType === "static" && row.value !== void 0 ? `: ${row.value}` : ""]
 										}), /* @__PURE__ */ jsx("div", {
 											className: "text-muted-foreground",
-											children: row.entitlementType === "metered" && row.limit != null ? /* @__PURE__ */ jsxs(Fragment, { children: [
+											children: row.entitlementType === "metered" && row.limit != null ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 												formatNumber(row.limit),
 												row.period ? ` / ${row.period}` : "",
 												row.tierPrices && row.tierPrices.length > 0 ? /* @__PURE__ */ jsx("ul", {
@@ -2416,7 +2028,7 @@ const SubscriptionPlanDetails = ({ subscription }) => {
 													className: "text-xs mt-0.5",
 													children: ["Overage: ", row.overagePrice]
 												}) : null
-											] }) : row.entitlementType === "static" && row.value ? null : "Included"
+											] }) : row.entitlementType === "static" && row.value !== void 0 ? null : "Included"
 										})]
 									})
 								}, `${row.key}:${row.phaseId}`))
@@ -2600,7 +2212,7 @@ const ActiveSubscription = ({ subscription, deploymentName }) => {
 	});
 	const isPendingFirstPayment = usageQuery.data.paymentStatus.isFirstPayment === true && usageQuery.data.paymentStatus.status !== "paid" && usageQuery.data.paymentStatus.status !== "not_required";
 	const activePhase = getActivePhase(subscription);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		planSwitched && /* @__PURE__ */ jsxs(DismissibleAlert, {
 			variant: "info",
 			children: [