@zuplo/zudoku-plugin-monetization 0.0.23 → 0.0.24

package/dist/index.mjs

@@ -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");
@@ -729,6 +737,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/${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) => {
@@ -1362,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, {
@@ -1784,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, {})
 			]
 		}),
@@ -1985,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, {})
@@ -2011,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.23",
+  "version": "0.0.24",
   "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.3"
   },
   "peerDependencies": {
     "react": ">=19.2.0",