@zuplo/zudoku-plugin-monetization 0.0.23 → 0.0.25

package/dist/index.mjs

@@ -1,9 +1,9 @@
-import { cn, createPlugin, joinUrl } from "zudoku";
+import { cn, createPlugin, joinUrl, throwIfProblemJson } 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, 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";
+import { Link as Link$1, Outlet, useLocation, useNavigate, 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";
@@ -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,6 +227,7 @@ const queryClient = new QueryClient({ defaultOptions: {
 				}
 			});
 			const response = await fetch(q.meta?.context ? await q.meta.context.signRequest(request) : request);
+			await throwIfProblemJson(response);
 			if (!response.ok) throw new Error("Failed to fetch request");
 			return response.json();
 		}
@@ -246,11 +257,8 @@ const queryClient = new QueryClient({ defaultOptions: {
 				}
 			});
 			const response = await fetch(m.meta?.context ? await m.meta.context.signRequest(request) : request);
+			await throwIfProblemJson(response);
 			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);
-				}
 				const errorText = await response.text();
 				throw new Error(`Request failed: ${response.status} ${errorText}`);
 			}
@@ -268,17 +276,9 @@ 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");
+	const planId = search.get("planId");
 	const zudoku = useZudoku();
 	const deploymentName = useDeploymentName();
 	const navigate = useNavigate();
@@ -300,7 +300,7 @@ const CheckoutConfirmPage = () => {
 		},
 		onSuccess: async (subscription) => {
 			await queryClient.invalidateQueries();
-			navigate(`/subscriptions/${subscription.id}`);
+			navigate(`/subscriptions?subscriptionId=${encodeURIComponent(subscription.id)}`);
 		}
 	});
 	return /* @__PURE__ */ jsx("div", {
@@ -476,23 +476,22 @@ const RedirectPage = ({ icon: Icon, title, description, url, children }) => {
 //#region src/hooks/useUrlUtils.ts
 const useUrlUtils = () => {
 	const basePath = useZudoku().options.basePath;
-	return { generateUrl: (path) => {
+	return { generateUrl: (path, { searchParams } = {}) => {
 		if (!window.location.origin) throw new Error("Only works in browser environment");
-		return joinUrl(window.location.origin, basePath, path);
+		return joinUrl(window.location.origin, basePath, path, searchParams ? `?${new URLSearchParams(searchParams)}` : void 0);
 	} };
 };
 
 //#endregion
 //#region src/pages/CheckoutPage.tsx
 const CheckoutPage = () => {
-	const { planId } = useParams();
+	const [searchParams] = useSearchParams();
+	const planId = searchParams.get("planId");
 	const zudoku = useZudoku();
 	const auth = useAuth();
 	const { generateUrl } = useUrlUtils();
 	const deploymentName = useDeploymentName();
 	if (!planId) throw new Error(`missing planId in URL`);
-	const successUrl = new URL(generateUrl("/checkout-confirm"));
-	successUrl.searchParams.set("plan", planId);
 	const checkoutLink = useQuery({
 		queryKey: [
 			`/v3/zudoku-metering/${deploymentName}/stripe/checkout`,
@@ -505,7 +504,7 @@ const CheckoutPage = () => {
 				method: "POST",
 				body: JSON.stringify({
 					planId,
-					successURL: successUrl.toString(),
+					successURL: generateUrl("/checkout-confirm", { searchParams: { planId } }),
 					cancelURL: generateUrl("/pricing")
 				})
 			}
@@ -675,7 +674,7 @@ const PricingCard = ({ plan, isPopular = false, isSubscribed = false, showYearly
 				variant: isPopular ? "default" : "secondary",
 				asChild: true,
 				children: /* @__PURE__ */ jsx(Link$1, {
-					to: `/checkout/${plan.id}`,
+					to: `/checkout?planId=${encodeURIComponent(plan.id)}`,
 					children: "Subscribe"
 				})
 			})
@@ -729,6 +728,150 @@ const PricingPage = ({ subtitle = "See our pricing options and choose the one th
 	});
 };
 
+//#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?subscriptionId=${encodeURIComponent(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?${new URLSearchParams({ subscriptionId: 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) => {
@@ -1362,29 +1505,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 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: generateUrl(`/subscription-change-confirm`, { searchParams: {
+						planId: switchTo.plan.id,
+						subscriptionId: switchTo.subscriptionId
+					} }),
+					cancelURL: generateUrl("/subscriptions", { searchParams: { subscriptionId: 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, {
@@ -1784,16 +1924,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, {})
 			]
 		}),
@@ -1863,7 +1995,7 @@ const SubscriptionsList = ({ subscriptions, activeSubscriptionId }) => {
 const SubscriptionItem = ({ subscription, isSelected, isExpired }) => {
 	const willExpire = subscription.activeTo && new Date(subscription.activeTo) > /* @__PURE__ */ new Date();
 	return /* @__PURE__ */ jsx(Link$1, {
-		to: `/subscriptions/${subscription.id}`,
+		to: `/subscriptions?subscriptionId=${encodeURIComponent(subscription.id)}`,
 		children: /* @__PURE__ */ jsx(Item, {
 			size: "sm",
 			variant: "outline",
@@ -1888,7 +2020,7 @@ const SubscriptionItem = ({ subscription, isSelected, isExpired }) => {
 				]
 			})] })
 		}, subscription.id)
-	}, subscription.id);
+	});
 };
 
 //#endregion
@@ -1896,7 +2028,8 @@ const SubscriptionItem = ({ subscription, isSelected, isExpired }) => {
 const SubscriptionsPage = () => {
 	const deploymentName = useDeploymentName();
 	const { data } = useSubscriptions(deploymentName);
-	const { subscriptionId } = useParams();
+	const [searchParams] = useSearchParams();
+	const subscriptionId = searchParams.get("subscriptionId");
 	const subscriptions = data?.items ?? [];
 	const activeSubscription = useMemo(() => {
 		if (subscriptions.length === 0) return null;
@@ -1978,13 +2111,17 @@ const zuploMonetizationPlugin = createPlugin((options) => ({
 			handle: { layout: "none" },
 			children: [
 				{
-					path: "/checkout/:planId?",
+					path: "/checkout",
 					element: /* @__PURE__ */ jsx(CheckoutPage, {})
 				},
 				{
 					path: "/checkout-confirm",
 					element: /* @__PURE__ */ jsx(CheckoutConfirmPage, {})
 				},
+				{
+					path: "/subscription-change-confirm",
+					element: /* @__PURE__ */ jsx(SubscriptionChangeConfirmPage, {})
+				},
 				{
 					path: "/manage-payment",
 					element: /* @__PURE__ */ jsx(ManagePaymentPage, {})
@@ -2001,7 +2138,7 @@ const zuploMonetizationPlugin = createPlugin((options) => ({
 				},
 				{
 					handle: { layout: "default" },
-					path: "/subscriptions/:subscriptionId?",
+					path: "/subscriptions",
 					element: /* @__PURE__ */ jsx(SubscriptionsPage, {})
 				}
 			]
@@ -2009,9 +2146,10 @@ const zuploMonetizationPlugin = createPlugin((options) => ({
 	},
 	getProtectedRoutes: () => {
 		return [
-			"/checkout/*",
+			"/checkout",
 			"/checkout-confirm",
-			"/subscriptions/*",
+			"/subscription-change-confirm",
+			"/subscriptions",
 			"/manage-payment"
 		];
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuplo/zudoku-plugin-monetization",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "repository": {
     "type": "git",
     "url": "https://github.com/zuplo/zudoku",
@@ -31,7 +31,7 @@
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "tsdown": "0.20.3",
-    "zudoku": "0.71.2"
+    "zudoku": "0.71.10"
   },
   "peerDependencies": {
     "react": ">=19.2.0",