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

package/dist/PricingTable-DfYAmAjk.mjs

@@ -0,0 +1,443 @@
+import { Fragment } from "react";
+import { parse } from "tinyduration";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+//#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/formatStaticEntitlementConfig.ts
+const hasValueField = (value) => typeof value === "object" && value !== null && "value" in value;
+const formatJsonValue = (value) => {
+	if (value === void 0) return void 0;
+	if (typeof value === "string") return value;
+	if (value === null || typeof value === "number" || typeof value === "boolean") return String(value);
+	return JSON.stringify(value);
+};
+const formatStaticEntitlementConfig = (config) => {
+	if (!config) return void 0;
+	try {
+		const parsed = JSON.parse(config);
+		return formatJsonValue(hasValueField(parsed) ? parsed.value : parsed);
+	} catch {
+		return;
+	}
+};
+//#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) features.push({
+			key: rc.featureKey ?? rc.key,
+			name: rc.name,
+			value: formatStaticEntitlementConfig(et.config)
+		});
+	}
+	return {
+		quotas,
+		features
+	};
+};
+//#endregion
+//#region src/pricing-ui/CheckIcon.tsx
+/**
+* Inline `Check` icon, visually identical to `lucide-react`'s `CheckIcon`
+* (path: `M20 6 9 17l-5-5`). Kept local so the module has no icon-library
+* peer dep and consumers don't need a specific lucide-react version.
+*/
+const CheckIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 24,
+	height: 24,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+});
+//#endregion
+//#region src/pricing-ui/cn.ts
+const cn = (...inputs) => twMerge(clsx(inputs));
+//#endregion
+//#region src/pricing-ui/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 !== void 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "font-medium",
+					children: [feature.name, ":"]
+				}),
+				" ",
+				feature.value
+			] }) : feature.name
+		})]
+	});
+};
+//#endregion
+//#region src/pricing-ui/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/pricing-ui/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/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/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/pricing-ui/PricingCard.tsx
+const PricingCard = ({ plan, isPopular = false, showYearlyPrice = true, units, action, className }) => {
+	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", className),
+		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$1, { children: [/* @__PURE__ */ jsx("span", {
+							className: "text-3xl font-bold text-card-foreground",
+							children: isFree ? "Free" : formatPrice(price.monthly, plan.currency)
+						}), !isFree && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+							className: "text-muted-foreground text-sm",
+							children: ["/", billingInterval]
+						}), showYearlyPrice && 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
+				})
+			}),
+			action
+		]
+	});
+};
+//#endregion
+//#region src/pricing-ui/PricingTable.tsx
+const DefaultEmptyState = () => /* @__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."
+	})]
+});
+const PricingTable = ({ plans, showYearlyPrice = true, units, renderAction, renderCard, isPopular = (plan) => plan.metadata?.zuplo_most_popular === "true", emptyState, showTaxLegend = true, className, cardClassName }) => {
+	if (plans.length === 0) return /* @__PURE__ */ jsx(Fragment$1, { children: emptyState ?? /* @__PURE__ */ jsx(DefaultEmptyState, {}) });
+	const firstPlan = plans[0];
+	const taxLegendSentence = showTaxLegend && firstPlan ? taxBehaviorLegendSentence(collectDefaultTaxBehaviors(firstPlan)) : void 0;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		className: cn("w-full grid grid-cols-1 sm:grid-cols-[repeat(auto-fit,minmax(300px,max-content))] justify-center gap-6", className),
+		children: plans.map((plan) => {
+			const popular = isPopular(plan);
+			const defaultCard = /* @__PURE__ */ jsx(PricingCard, {
+				plan,
+				isPopular: popular,
+				showYearlyPrice,
+				units,
+				action: renderAction?.(plan, popular),
+				className: cardClassName
+			});
+			return /* @__PURE__ */ jsx(Fragment, { children: renderCard ? renderCard(plan, {
+				isPopular: popular,
+				defaultCard
+			}) : defaultCard }, 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
+		})]
+	})] });
+};
+//#endregion
+export { formatDurationAdjective as _, subscriptionTaxLegendSentence as a, PlanEntitlements as c, categorizeRateCards as d, formatTieredPriceBreakdown as f, formatDuration as g, formatPrice as h, planHasDefaultTaxBehavior as i, QuotaItem as l, formatMinorCurrencyAmount as m, PricingCard as n, taxBehaviorLegendSentence as o, formatStaticEntitlementConfig as p, collectDefaultTaxBehaviors as r, getPriceFromPlan as s, PricingTable as t, FeatureItem as u, formatDurationInterval as v };