@zuplo/zudoku-plugin-monetization 0.0.24 → 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";
@@ -227,13 +227,8 @@ const queryClient = new QueryClient({ defaultOptions: {
 				}
 			});
 			const response = await fetch(q.meta?.context ? await q.meta.context.signRequest(request) : 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");
-			}
+			await throwIfProblemJson(response);
+			if (!response.ok) throw new Error("Failed to fetch request");
 			return response.json();
 		}
 	},
@@ -262,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}`);
 			}
@@ -286,7 +278,7 @@ const ZuploMonetizationWrapper = () => {
 //#region src/pages/CheckoutConfirmPage.tsx
 const CheckoutConfirmPage = () => {
 	const [search] = useSearchParams();
-	const planId = search.get("plan");
+	const planId = search.get("planId");
 	const zudoku = useZudoku();
 	const deploymentName = useDeploymentName();
 	const navigate = useNavigate();
@@ -308,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", {
@@ -484,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`,
@@ -513,7 +504,7 @@ const CheckoutPage = () => {
 				method: "POST",
 				body: JSON.stringify({
 					planId,
-					successURL: successUrl.toString(),
+					successURL: generateUrl("/checkout-confirm", { searchParams: { planId } }),
 					cancelURL: generateUrl("/pricing")
 				})
 			}
@@ -683,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"
 				})
 			})
@@ -765,7 +756,7 @@ const SubscriptionChangeConfirmPage = () => {
 		},
 		onSuccess: async (subscription) => {
 			await queryClient.invalidateQueries();
-			navigate(`/subscriptions/${subscription.id}`, { state: { planSwitched: { newPlanName: selectedPlan?.name } } });
+			navigate(`/subscriptions?subscriptionId=${encodeURIComponent(subscription.id)}`, { state: { planSwitched: { newPlanName: selectedPlan?.name } } });
 		}
 	});
 	return /* @__PURE__ */ jsx("div", {
@@ -863,7 +854,7 @@ const SubscriptionChangeConfirmPage = () => {
 							disabled: changeMutation.isPending,
 							asChild: !changeMutation.isPending,
 							children: /* @__PURE__ */ jsx(Link$1, {
-								to: `/subscriptions/${subscriptionId}`,
+								to: `/subscriptions?${new URLSearchParams({ subscriptionId: subscriptionId ?? "" })}`,
 								children: "Cancel"
 							})
 						})]
@@ -1515,9 +1506,6 @@ const ConfirmSwitchAlert = ({ switchTo, onRequestClose }) => {
 	const deploymentName = useDeploymentName();
 	const context = useZudoku();
 	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}/stripe/checkout`],
 		meta: {
@@ -1526,8 +1514,11 @@ const ConfirmSwitchAlert = ({ switchTo, onRequestClose }) => {
 				method: "POST",
 				body: JSON.stringify({
 					planId: switchTo.plan.id,
-					successURL: successUrl.toString(),
-					cancelURL: generateUrl(`/subscriptions/${switchTo.subscriptionId}`)
+					successURL: generateUrl(`/subscription-change-confirm`, { searchParams: {
+						planId: switchTo.plan.id,
+						subscriptionId: switchTo.subscriptionId
+					} }),
+					cancelURL: generateUrl("/subscriptions", { searchParams: { subscriptionId: switchTo.subscriptionId } })
 				})
 			}
 		},
@@ -2004,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",
@@ -2029,7 +2020,7 @@ const SubscriptionItem = ({ subscription, isSelected, isExpired }) => {
 				]
 			})] })
 		}, subscription.id)
-	}, subscription.id);
+	});
 };
 
 //#endregion
@@ -2037,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;
@@ -2119,7 +2111,7 @@ const zuploMonetizationPlugin = createPlugin((options) => ({
 			handle: { layout: "none" },
 			children: [
 				{
-					path: "/checkout/:planId?",
+					path: "/checkout",
 					element: /* @__PURE__ */ jsx(CheckoutPage, {})
 				},
 				{
@@ -2146,7 +2138,7 @@ const zuploMonetizationPlugin = createPlugin((options) => ({
 				},
 				{
 					handle: { layout: "default" },
-					path: "/subscriptions/:subscriptionId?",
+					path: "/subscriptions",
 					element: /* @__PURE__ */ jsx(SubscriptionsPage, {})
 				}
 			]
@@ -2154,10 +2146,10 @@ const zuploMonetizationPlugin = createPlugin((options) => ({
 	},
 	getProtectedRoutes: () => {
 		return [
-			"/checkout/*",
+			"/checkout",
 			"/checkout-confirm",
 			"/subscription-change-confirm",
-			"/subscriptions/*",
+			"/subscriptions",
 			"/manage-payment"
 		];
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuplo/zudoku-plugin-monetization",
-  "version": "0.0.24",
+  "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.3"
+    "zudoku": "0.71.10"
   },
   "peerDependencies": {
     "react": ">=19.2.0",