@zuplo/zudoku-plugin-monetization 0.0.20 → 0.0.22

package/dist/index.d.mts

@@ -5,6 +5,7 @@ type ZudokuMonetizationPluginOptions = {
   pricing?: {
     subtitle?: string;
     title?: string;
+    units?: Record<string, string>;
   };
 };
 declare const zuploMonetizationPlugin: (options?: ZudokuMonetizationPluginOptions | undefined) => zudoku.ZudokuPlugin;

package/dist/index.mjs

@@ -1,9 +1,9 @@
 import { cn, createPlugin, joinUrl } from "zudoku";
-import { Button, ClientOnly, Head, Heading, Link } from "zudoku/components";
 import { AlertTriangleIcon, ArrowDownIcon, ArrowLeftRightIcon, ArrowUpIcon, CalendarIcon, CheckCheckIcon, CheckIcon, CircleAlert, CircleSlashIcon, ClockIcon, CreditCardIcon, Grid2x2XIcon, InfoIcon, Loader2Icon, LockIcon, MoreVerticalIcon, RefreshCcw, RefreshCwIcon, Settings, ShieldIcon, StarsIcon, Trash2Icon, XIcon } from "zudoku/icons";
-import { Link as Link$1, Outlet, useLocation, useNavigate, useParams, useSearchParams } from "zudoku/router";
+import { Button, ClientOnly, Head, Heading, Link } from "zudoku/components";
 import { useAuth, useZudoku } from "zudoku/hooks";
 import { QueryClient, QueryClientProvider, useMutation, useQuery, useQueryClient, useSuspenseQuery } from "zudoku/react-query";
+import { Link as Link$1, Outlet, useLocation, useNavigate, useParams, useSearchParams } from "zudoku/router";
 import { Alert, AlertAction, AlertDescription, AlertTitle } from "zudoku/ui/Alert";
 import { Card, CardContent, CardHeader, CardTitle } from "zudoku/ui/Card";
 import { Separator } from "zudoku/ui/Separator";
@@ -127,15 +127,17 @@ const formatDurationInterval = (iso) => {
 
 //#endregion
 //#region src/utils/formatPrice.ts
-const formatPrice = (amount, currency) => new Intl.NumberFormat(void 0, {
+const formatPrice = (amount, currency) => new Intl.NumberFormat("en-US", {
 	style: "currency",
-	currency: currency || "USD",
-	minimumFractionDigits: 0
+	currency: currency ?? "USD",
+	minimumFractionDigits: 2,
+	maximumFractionDigits: 6,
+	trailingZeroDisplay: "stripIfInteger"
 }).format(amount);
 
 //#endregion
 //#region src/utils/categorizeRateCards.ts
-const categorizeRateCards = (rateCards, currency) => {
+const categorizeRateCards = (rateCards, currency, units) => {
 	const quotas = [];
 	const features = [];
 	for (const rc of rateCards) {
@@ -144,8 +146,12 @@ const categorizeRateCards = (rateCards, currency) => {
 		if (et.type === "metered" && et.issueAfterReset != null) {
 			let overagePrice;
 			if (et.isSoftLimit !== false && rc.price?.type === "tiered" && rc.price.tiers) {
-				const overageTier = rc.price.tiers.find((t) => t.unitPrice?.amount);
-				if (overageTier?.unitPrice) overagePrice = `${formatPrice(parseFloat(overageTier.unitPrice.amount), currency)}/unit`;
+				const overageTier = rc.price.tiers.find((t) => t.unitPrice?.amount && parseFloat(t.unitPrice.amount) > 0);
+				if (overageTier?.unitPrice) {
+					const amount = parseFloat(overageTier.unitPrice.amount);
+					const unitLabel = units?.[rc.key] ?? units?.[rc.featureKey ?? ""] ?? "unit";
+					overagePrice = `${formatPrice(amount, currency)}/${unitLabel}`;
+				}
 			}
 			quotas.push({
 				key: rc.featureKey ?? rc.key,
@@ -391,7 +397,8 @@ const CheckoutConfirmPage = () => {
 							}), /* @__PURE__ */ jsx(Button, {
 								variant: "ghost",
 								className: "w-full",
-								asChild: true,
+								disabled: createSubscriptionMutation.isPending,
+								asChild: !createSubscriptionMutation.isPending,
 								children: /* @__PURE__ */ jsx(Link$1, {
 									to: "/pricing",
 									children: "Cancel"
@@ -572,13 +579,36 @@ const ManagePaymentPage = () => {
 
 //#endregion
 //#region src/pages/pricing/PricingCard.tsx
-const PricingCard = ({ plan, isPopular = false, isSubscribed = false }) => {
-	const defaultPhase = plan.phases.at(-1);
-	if (!defaultPhase) return null;
-	const { quotas, features } = categorizeRateCards(defaultPhase.rateCards, plan.currency);
+const PhaseSection = ({ phase, currency, showName, excludeKeys, units }) => {
+	const { quotas, features } = categorizeRateCards(phase.rateCards, currency, units);
+	const filteredQuotas = quotas.filter((q) => !excludeKeys.has(q.key));
+	const filteredFeatures = features.filter((f) => !excludeKeys.has(f.key));
+	if (filteredQuotas.length === 0 && filteredFeatures.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)
+					]
+				})]
+			}),
+			filteredQuotas.map((quota) => /* @__PURE__ */ jsx(QuotaItem, { quota }, quota.key)),
+			filteredFeatures.map((feature) => /* @__PURE__ */ jsx(FeatureItem, { feature }, feature.key))
+		]
+	});
+};
+const PricingCard = ({ plan, isPopular = false, isSubscribed = false, units }) => {
+	if (plan.phases.length === 0) return null;
 	const price = getPriceFromPlan(plan);
 	const isFree = price.monthly === 0;
 	const isCustom = plan.metadata?.isCustom === true;
+	const hasMultiplePhases = plan.phases.length > 1;
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("relative rounded-lg border p-6 flex flex-col", isPopular && "border-primary border-2"),
 		children: [
@@ -621,15 +651,18 @@ const PricingCard = ({ plan, isPopular = false, isSubscribed = false }) => {
 					})
 				]
 			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "space-y-4 mb-6  grow",
-				children: [quotas.length > 0 && /* @__PURE__ */ jsx("div", {
-					className: "space-y-2",
-					children: quotas.map((quota) => /* @__PURE__ */ jsx(QuotaItem, { quota }, quota.key))
-				}), features.length > 0 && /* @__PURE__ */ jsx("div", {
-					className: "space-y-2",
-					children: features.map((feature) => /* @__PURE__ */ jsx(FeatureItem, { feature }, feature.key))
-				})]
+			/* @__PURE__ */ jsx("div", {
+				className: "space-y-4 mb-6 grow",
+				children: plan.phases.map((phase, index) => {
+					const laterKeys = new Set(plan.phases.slice(index + 1).flatMap((p) => p.rateCards.map((rc) => rc.featureKey ?? rc.key)));
+					return /* @__PURE__ */ jsx(PhaseSection, {
+						phase,
+						currency: plan.currency,
+						showName: hasMultiplePhases,
+						excludeKeys: laterKeys,
+						units
+					}, phase.key);
+				})
 			}),
 			isSubscribed ? /* @__PURE__ */ jsx(Button, {
 				variant: isPopular ? "default" : "secondary",
@@ -652,7 +685,7 @@ const PricingCard = ({ plan, isPopular = false, isSubscribed = false }) => {
 
 //#endregion
 //#region src/pages/PricingPage.tsx
-const PricingPage = ({ subtitle = "See our pricing options and choose the one that best suits your needs.", title = "Pricing" }) => {
+const PricingPage = ({ subtitle = "See our pricing options and choose the one that best suits your needs.", title = "Pricing", units }) => {
 	const zudoku = useZudoku();
 	const deploymentName = useDeploymentName();
 	const auth = useAuth();
@@ -685,6 +718,7 @@ const PricingPage = ({ subtitle = "See our pricing options and choose the one th
 				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,
+					units,
 					isPopular: plan.metadata?.zuplo_most_popular === "true",
 					isSubscribed: subscriptions.items.some((subscription) => ["active", "canceled"].includes(subscription.status))
 				}, plan.id))
@@ -1100,9 +1134,8 @@ const CancelSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionId
 
 //#endregion
 //#region src/pages/subscriptions/SwitchPlanModal.tsx
-const comparePlans = (currentPlan, targetPlan) => {
-	const currentPrice = currentPlan ? getPriceFromPlan(currentPlan).monthly : 0;
-	const isUpgrade = getPriceFromPlan(targetPlan).monthly > currentPrice;
+const comparePlans = (currentPlan, targetPlan, currentIndex, targetIndex) => {
+	const isUpgrade = targetIndex > currentIndex;
 	const currentPhase = currentPlan?.phases.at(-1);
 	const targetPhase = targetPlan.phases.at(-1);
 	const { quotas: currentQuotas, features: currentFeatures } = currentPhase ? categorizeRateCards(currentPhase.rateCards, currentPlan?.currency) : {
@@ -1390,8 +1423,11 @@ const SwitchPlanModal = ({ subscription, children }) => {
 			downgrades: [],
 			privatePlans: []
 		};
-		const isPrivatePlan = (plan) => plan.metadata?.zuplo_is_private === "true";
-		const allComparisons = plansData.items.filter((p) => p.id !== currentPlan.id).map((plan) => comparePlans(currentPlan, plan));
+		const isPrivatePlan = (plan) => plan.metadata?.zuplo_private_plan === "true";
+		const currentIndex = plansData.items.findIndex((p) => p.id === currentPlan.id);
+		const allComparisons = plansData.items.filter((p) => p.id !== currentPlan.id).map((plan) => {
+			return comparePlans(currentPlan, plan, currentIndex, plansData.items.indexOf(plan));
+		});
 		return {
 			upgrades: allComparisons.filter((c) => c.isUpgrade && !isPrivatePlan(c.plan)),
 			downgrades: allComparisons.filter((c) => !c.isUpgrade && !isPrivatePlan(c.plan)),
@@ -1901,16 +1937,12 @@ const SubscriptionsPage = () => {
 //#region src/ZuploMonetizationPlugin.tsx
 const PRICING_PATH = "/pricing";
 const zuploMonetizationPlugin = createPlugin((options) => ({
-	transformConfig: ({ merge }) => merge({
+	transformConfig: ({ config, merge }) => merge({
 		apiKeys: { enabled: false },
-		slots: { "head-navigation-start": () => /* @__PURE__ */ jsx(Button, {
-			asChild: true,
-			variant: "ghost",
-			children: /* @__PURE__ */ jsx(Link$1, {
-				to: PRICING_PATH,
-				children: "Pricing"
-			})
-		}) }
+		header: { navigation: [...config.header?.navigation ?? [], {
+			label: "Pricing",
+			to: PRICING_PATH
+		}] }
 	}),
 	getIdentities: async (context) => {
 		const deploymentName = context.env.ZUPLO_PUBLIC_DEPLOYMENT_NAME;
@@ -1954,20 +1986,22 @@ const zuploMonetizationPlugin = createPlugin((options) => ({
 				{
 					path: "/manage-payment",
 					element: /* @__PURE__ */ jsx(ManagePaymentPage, {})
+				},
+				{
+					path: PRICING_PATH,
+					handle: { layout: "default" },
+					element: /* @__PURE__ */ jsx(PricingPage, {
+						subtitle: options?.pricing?.subtitle,
+						title: options?.pricing?.title,
+						units: options?.pricing?.units
+					})
+				},
+				{
+					handle: { layout: "default" },
+					path: "/subscriptions/:subscriptionId?",
+					element: /* @__PURE__ */ jsx(SubscriptionsPage, {})
 				}
 			]
-		}, {
-			Component: ZuploMonetizationWrapper,
-			children: [{
-				path: "/pricing",
-				element: /* @__PURE__ */ jsx(PricingPage, {
-					subtitle: options?.pricing?.subtitle,
-					title: options?.pricing?.title
-				})
-			}, {
-				path: "/subscriptions/:subscriptionId?",
-				element: /* @__PURE__ */ jsx(SubscriptionsPage, {})
-			}]
 		}];
 	},
 	getProtectedRoutes: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuplo/zudoku-plugin-monetization",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "repository": {
     "type": "git",
     "url": "https://github.com/zuplo/zudoku",
@@ -27,11 +27,11 @@
     "@testing-library/react": "16.3.2",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "happy-dom": "20.6.1",
+    "happy-dom": "20.7.0",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "tsdown": "0.20.3",
-    "zudoku": "0.70.2"
+    "zudoku": "0.70.4"
   },
   "peerDependencies": {
     "react": ">=19.2.0",