@zuplo/zudoku-plugin-monetization 0.0.22 → 0.0.24

package/dist/index.d.mts

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

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { cn, createPlugin, joinUrl } from "zudoku";
 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 { Button, ClientOnly, Head, Heading, Link } from "zudoku/components";
+import { Button, ClientOnly, Head, Heading, Link, Slot } 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";
@@ -184,6 +184,16 @@ const categorizeRateCards = (rateCards, currency, units) => {
 	};
 };
 
+//#endregion
+//#region src/utils/formatBillingCycle.ts
+const formatBillingCycle = (duration) => {
+	if (duration === "month") return "monthly";
+	if (duration === "year") return "annually";
+	if (duration === "week") return "weekly";
+	if (duration === "day") return "daily";
+	return `every ${duration}`;
+};
+
 //#endregion
 //#region src/utils/getPriceFromPlan.ts
 const getPriceFromPlan = (plan) => {
@@ -217,7 +227,13 @@ const queryClient = new QueryClient({ defaultOptions: {
 				}
 			});
 			const response = await fetch(q.meta?.context ? await q.meta.context.signRequest(request) : request);
-			if (!response.ok) throw new Error("Failed to fetch request");
+			if (!response.ok) {
+				if (response.headers.get("content-type")?.includes("application/problem+json")) {
+					const data = await response.json();
+					throw new Error(data.detail ?? data.title);
+				}
+				throw new Error("Failed to fetch request");
+			}
 			return response.json();
 		}
 	},
@@ -268,14 +284,6 @@ const ZuploMonetizationWrapper = () => {
 
 //#endregion
 //#region src/pages/CheckoutConfirmPage.tsx
-const formatBillingCycle = (duration) => {
-	if (duration === "month") return "monthly";
-	if (duration === "year") return "annually";
-	if (duration === "week") return "weekly";
-	if (duration === "day") return "daily";
-	if (duration.includes(" ")) return `every ${duration}`;
-	return `every ${duration}`;
-};
 const CheckoutConfirmPage = () => {
 	const [search] = useSearchParams();
 	const planId = search.get("plan");
@@ -603,7 +611,7 @@ const PhaseSection = ({ phase, currency, showName, excludeKeys, units }) => {
 		]
 	});
 };
-const PricingCard = ({ plan, isPopular = false, isSubscribed = false, units }) => {
+const PricingCard = ({ plan, isPopular = false, isSubscribed = false, showYearlyPrice = true, units }) => {
 	if (plan.phases.length === 0) return null;
 	const price = getPriceFromPlan(plan);
 	const isFree = price.monthly === 0;
@@ -640,7 +648,7 @@ const PricingCard = ({ plan, isPopular = false, isSubscribed = false, units }) =
 						}), !isFree && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 							className: "text-muted-foreground text-sm",
 							children: "/mo"
-						}), /* @__PURE__ */ jsxs("div", {
+						}), showYearlyPrice && /* @__PURE__ */ jsxs("div", {
 							className: "w-full text-sm text-muted-foreground mt-1",
 							children: [formatPrice(price.yearly, plan.currency), "/year"]
 						})] })] })
@@ -685,7 +693,7 @@ const PricingCard = ({ plan, isPopular = false, isSubscribed = false, units }) =
 
 //#endregion
 //#region src/pages/PricingPage.tsx
-const PricingPage = ({ subtitle = "See our pricing options and choose the one that best suits your needs.", title = "Pricing", units }) => {
+const PricingPage = ({ subtitle = "See our pricing options and choose the one that best suits your needs.", title = "Pricing", units, showYearlyPrice = true }) => {
 	const zudoku = useZudoku();
 	const deploymentName = useDeploymentName();
 	const auth = useAuth();
@@ -719,14 +727,160 @@ const PricingPage = ({ subtitle = "See our pricing options and choose the one th
 				children: pricingTable.items.map((plan) => /* @__PURE__ */ jsx(PricingCard, {
 					plan,
 					units,
+					showYearlyPrice,
 					isPopular: plan.metadata?.zuplo_most_popular === "true",
 					isSubscribed: subscriptions.items.some((subscription) => ["active", "canceled"].includes(subscription.status))
 				}, plan.id))
-			})
+			}),
+			/* @__PURE__ */ jsx(Slot.Target, { name: "pricing-page-after" })
 		]
 	});
 };
 
+//#endregion
+//#region src/pages/SubscriptionChangeConfirmPage.tsx
+const SubscriptionChangeConfirmPage = () => {
+	const [search] = useSearchParams();
+	const planId = search.get("planId");
+	const subscriptionId = search.get("subscriptionId");
+	const zudoku = useZudoku();
+	const deploymentName = useDeploymentName();
+	const navigate = useNavigate();
+	const { data: plans } = usePlans();
+	const selectedPlan = plans?.items?.find((plan) => plan.id === planId);
+	if (!planId) throw new Error("Parameter `planId` missing");
+	if (!subscriptionId) throw new Error("Parameter `subscriptionId` missing");
+	const rateCards = selectedPlan?.phases.at(-1)?.rateCards;
+	const { quotas, features } = categorizeRateCards(rateCards ?? [], selectedPlan?.currency);
+	const price = selectedPlan ? getPriceFromPlan(selectedPlan) : null;
+	const billingCycle = selectedPlan?.billingCadence ? formatDuration(selectedPlan.billingCadence) : null;
+	const changeMutation = useMutation({
+		mutationKey: [`/v3/zudoku-metering/${deploymentName}/subscriptions/${subscriptionId}/change`],
+		meta: {
+			context: zudoku,
+			request: {
+				method: "POST",
+				body: JSON.stringify({ planId })
+			}
+		},
+		onSuccess: async (subscription) => {
+			await queryClient.invalidateQueries();
+			navigate(`/subscriptions/${subscription.id}`, { state: { planSwitched: { newPlanName: selectedPlan?.name } } });
+		}
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "w-full bg-muted min-h-screen flex items-center justify-center px-4 py-12 gap-4",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "max-w-2xl w-full",
+			children: [changeMutation.isError && /* @__PURE__ */ jsxs(Alert, {
+				className: "mb-4",
+				variant: "destructive",
+				children: [/* @__PURE__ */ jsx(AlertTitle, { children: "Error" }), /* @__PURE__ */ jsx(AlertDescription, { children: changeMutation.error.message })]
+			}), /* @__PURE__ */ jsxs(Card, {
+				className: "p-8 w-full max-w-7xl",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "flex justify-center mb-6",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "rounded-full bg-primary/10 p-3",
+							children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-9 text-primary" })
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "text-center mb-8",
+						children: [/* @__PURE__ */ jsx("h1", {
+							className: "text-2xl font-bold text-card-foreground mb-3",
+							children: "Confirm plan change"
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground text-base",
+							children: "Please confirm the details below to change your subscription."
+						})]
+					}),
+					selectedPlan && /* @__PURE__ */ jsxs(Card, {
+						className: "bg-muted/50",
+						children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
+							className: "flex justify-between items-start",
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-3",
+									children: [/* @__PURE__ */ jsx("div", {
+										className: "flex flex-col text-2xl font-bold bg-primary text-primary-foreground items-center justify-center rounded size-12",
+										children: selectedPlan.name.at(0)?.toUpperCase()
+									}), /* @__PURE__ */ jsxs("div", {
+										className: "flex flex-col",
+										children: [/* @__PURE__ */ jsx("span", {
+											className: "text-lg font-bold",
+											children: selectedPlan.name
+										}), /* @__PURE__ */ jsx("span", {
+											className: "text-sm font-normal text-muted-foreground",
+											children: selectedPlan.description || "New plan"
+										})]
+									})]
+								}),
+								price && price.monthly > 0 && /* @__PURE__ */ jsxs("div", {
+									className: "text-right",
+									children: [/* @__PURE__ */ jsx("div", {
+										className: "text-2xl font-bold",
+										children: formatPrice(price.monthly, selectedPlan?.currency)
+									}), billingCycle && /* @__PURE__ */ jsxs("div", {
+										className: "text-sm text-muted-foreground font-normal",
+										children: ["Billed ", formatBillingCycle(billingCycle)]
+									})]
+								}),
+								price && price.monthly === 0 && /* @__PURE__ */ jsx("div", {
+									className: "text-2xl text-muted-foreground font-bold",
+									children: "Free"
+								})
+							]
+						}) }), /* @__PURE__ */ jsxs(CardContent, { children: [
+							/* @__PURE__ */ jsx(Separator, {}),
+							/* @__PURE__ */ jsx("div", {
+								className: "text-sm font-medium mb-3 mt-3",
+								children: "What's included:"
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "grid grid-cols-2 gap-2 text-muted-foreground",
+								children: [quotas.map((quota) => /* @__PURE__ */ jsx(QuotaItem, {
+									quota,
+									className: "text-muted-foreground"
+								}, quota.key)), features.map((feature) => /* @__PURE__ */ jsx(FeatureItem, {
+									feature,
+									className: "text-muted-foreground"
+								}, feature.key))]
+							})
+						] })]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "space-y-3 mt-4",
+						children: [/* @__PURE__ */ jsx(Button, {
+							className: "w-full",
+							onClick: () => changeMutation.mutate(),
+							disabled: changeMutation.isPending,
+							children: changeMutation.isPending ? "Changing plan..." : "Confirm & Change Plan"
+						}), /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							className: "w-full",
+							disabled: changeMutation.isPending,
+							asChild: !changeMutation.isPending,
+							children: /* @__PURE__ */ jsx(Link$1, {
+								to: `/subscriptions/${subscriptionId}`,
+								children: "Cancel"
+							})
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "mt-6 pt-6 border-t text-center",
+						children: /* @__PURE__ */ jsx("p", {
+							className: "text-xs text-muted-foreground",
+							children: "By confirming, you agree to our Terms of Service and Privacy Policy."
+						})
+					})
+				]
+			})]
+		})
+	});
+};
+
 //#endregion
 //#region src/hooks/useSubscriptions.ts
 const useSubscriptions = (environmentName) => {
@@ -1360,29 +1514,26 @@ const PlanComparisonItem = ({ comparison, subscriptionId, mode, onRequestChange
 const ConfirmSwitchAlert = ({ switchTo, onRequestClose }) => {
 	const deploymentName = useDeploymentName();
 	const context = useZudoku();
-	const queryClient = useQueryClient();
-	const navigate = useNavigate();
+	const { generateUrl } = useUrlUtils();
+	const successUrl = new URL(generateUrl("/subscription-change-confirm"));
+	successUrl.searchParams.set("planId", switchTo.plan.id);
+	successUrl.searchParams.set("subscriptionId", switchTo.subscriptionId);
 	const mutation = useMutation({
-		mutationKey: [`/v3/zudoku-metering/${deploymentName}/subscriptions/${switchTo.subscriptionId}/change`],
+		mutationKey: [`/v3/zudoku-metering/${deploymentName}/stripe/checkout`],
 		meta: {
 			context,
 			request: {
 				method: "POST",
-				body: JSON.stringify({ planId: switchTo.plan.id })
+				body: JSON.stringify({
+					planId: switchTo.plan.id,
+					successURL: successUrl.toString(),
+					cancelURL: generateUrl(`/subscriptions/${switchTo.subscriptionId}`)
+				})
 			}
 		},
 		retry: false,
-		onSuccess: async (subscription) => {
-			await queryClient.invalidateQueries();
-			navigate(`/subscriptions/${subscription.id}`, { state: { planSwitched: {
-				mode: switchTo.mode,
-				newPlanName: switchTo.plan.name
-			} } });
-			onRequestClose();
-			window.scrollTo({
-				top: 0,
-				behavior: "smooth"
-			});
+		onSuccess: (data) => {
+			window.location.href = data.url;
 		}
 	});
 	return /* @__PURE__ */ jsx(AlertDialog, {
@@ -1782,16 +1933,8 @@ const ActiveSubscription = ({ subscription, deploymentName }) => {
 			variant: "info",
 			children: [
 				/* @__PURE__ */ jsx(CheckCheckIcon, { className: "size-4" }),
-				/* @__PURE__ */ jsxs(AlertTitle, { children: [
-					"Plan",
-					" ",
-					planSwitched.mode === "upgrade" ? "upgraded" : planSwitched.mode === "downgrade" ? "downgraded" : "changed"
-				] }),
-				/* @__PURE__ */ jsxs(AlertDescription, { children: [
-					"You have successfully switched to ",
-					planSwitched.newPlanName,
-					"."
-				] }),
+				/* @__PURE__ */ jsx(AlertTitle, { children: "Plan changed" }),
+				/* @__PURE__ */ jsx(AlertDescription, { children: planSwitched.newPlanName ? `You have successfully switched to ${planSwitched.newPlanName}.` : "Your plan has been successfully changed." }),
 				/* @__PURE__ */ jsx(DismissibleAlertAction, {})
 			]
 		}),
@@ -1983,6 +2126,10 @@ const zuploMonetizationPlugin = createPlugin((options) => ({
 					path: "/checkout-confirm",
 					element: /* @__PURE__ */ jsx(CheckoutConfirmPage, {})
 				},
+				{
+					path: "/subscription-change-confirm",
+					element: /* @__PURE__ */ jsx(SubscriptionChangeConfirmPage, {})
+				},
 				{
 					path: "/manage-payment",
 					element: /* @__PURE__ */ jsx(ManagePaymentPage, {})
@@ -1993,7 +2140,8 @@ const zuploMonetizationPlugin = createPlugin((options) => ({
 					element: /* @__PURE__ */ jsx(PricingPage, {
 						subtitle: options?.pricing?.subtitle,
 						title: options?.pricing?.title,
-						units: options?.pricing?.units
+						units: options?.pricing?.units,
+						showYearlyPrice: options?.pricing?.showYearlyPrice
 					})
 				},
 				{
@@ -2008,6 +2156,7 @@ const zuploMonetizationPlugin = createPlugin((options) => ({
 		return [
 			"/checkout/*",
 			"/checkout-confirm",
+			"/subscription-change-confirm",
 			"/subscriptions/*",
 			"/manage-payment"
 		];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuplo/zudoku-plugin-monetization",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "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.7.0",
+    "happy-dom": "20.8.3",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "tsdown": "0.20.3",
-    "zudoku": "0.70.4"
+    "zudoku": "0.71.3"
   },
   "peerDependencies": {
     "react": ">=19.2.0",