@zuplo/zudoku-plugin-monetization 0.0.26 → 0.0.28

package/dist/index.mjs

@@ -1,5 +1,5 @@
 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 { AlertTriangleIcon, ArrowDownIcon, ArrowLeftRightIcon, ArrowUpIcon, CalendarIcon, CheckCheckIcon, CheckIcon, 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";
@@ -19,7 +19,6 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
 import { Frame, FrameFooter, FramePanel } from "zudoku/ui/Frame";
 import { Secret } from "zudoku/ui/Secret";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "zudoku/ui/AlertDialog";
-import { Tooltip, TooltipContent, TooltipTrigger } from "zudoku/ui/Tooltip";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "zudoku/ui/Dialog";
 import { Input } from "zudoku/ui/Input";
 import { Progress } from "zudoku/ui/Progress";
@@ -80,13 +79,12 @@ const useDeploymentName = () => {
 };
 
 //#endregion
-//#region src/hooks/usePlans.ts
-const usePlans = () => {
+//#region src/hooks/usePurchaseDetails.ts
+const usePurchaseDetails = (planId) => {
 	const zudoku = useZudoku();
-	const auth = useAuth();
 	return useSuspenseQuery({
-		queryKey: [`/v3/zudoku-metering/${useDeploymentName()}/pricing-page`],
-		meta: { context: auth.isAuthenticated ? zudoku : void 0 }
+		queryKey: [`/v3/zudoku-metering/${useDeploymentName()}/plans/${planId}/purchase-details`],
+		meta: { context: zudoku }
 	});
 };
 
@@ -227,6 +225,24 @@ const getPriceFromPlan = (plan) => {
 	};
 };
 
+//#endregion
+//#region src/utils/purchaseDetails.ts
+const getPlanFromPurchaseDetails = (response) => {
+	return response;
+};
+const getTaxAmountFromPurchaseDetails = (response) => {
+	const taxAmount = response?.tax?.taxAmount;
+	const numericAmount = typeof taxAmount === "number" ? taxAmount : Number.parseFloat(taxAmount ?? "");
+	if (!Number.isFinite(numericAmount)) return;
+	return numericAmount;
+};
+const getTaxLabelFromPurchaseDetails = (response) => {
+	return (response.tax?.taxes ?? []).some((tax) => tax.taxType?.toLowerCase() === "vat") ? "VAT" : "tax";
+};
+const isTaxInclusiveFromPurchaseDetails = (response) => {
+	return response.tax?.taxInclusive === true;
+};
+
 //#endregion
 //#region src/ZuploMonetizationWrapper.tsx
 const DEFAULT_GATEWAY_URL = "https://api.zuploedge.com";
@@ -307,10 +323,13 @@ const CheckoutConfirmPage = () => {
 	const zudoku = useZudoku();
 	const deploymentName = useDeploymentName();
 	const navigate = useNavigate();
-	const { data: plans } = usePlans();
 	const { pricing } = useMonetizationConfig();
-	const selectedPlan = plans?.items?.find((plan) => plan.id === planId);
 	if (!planId) throw new Error("Parameter `planId` missing");
+	const purchaseDetails = usePurchaseDetails(planId);
+	const selectedPlan = getPlanFromPurchaseDetails(purchaseDetails.data);
+	const taxAmount = getTaxAmountFromPurchaseDetails(purchaseDetails.data);
+	const taxLabel = getTaxLabelFromPurchaseDetails(purchaseDetails.data);
+	const taxInclusive = isTaxInclusiveFromPurchaseDetails(purchaseDetails.data);
 	const rateCards = selectedPlan?.phases.at(-1)?.rateCards;
 	const { quotas, features } = categorizeRateCards(rateCards ?? [], {
 		currency: selectedPlan?.currency,
@@ -386,13 +405,20 @@ const CheckoutConfirmPage = () => {
 									}),
 									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)]
-										})]
+										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)]
+											}),
+											taxAmount != null && /* @__PURE__ */ jsx("div", {
+												className: "text-xs text-muted-foreground font-normal mt-1",
+												children: taxInclusive ? `${formatPrice(taxAmount, selectedPlan?.currency)} ${taxLabel} included` : `+ ${formatPrice(taxAmount, selectedPlan?.currency)} ${taxLabel}`
+											})
+										]
 									}),
 									price && price.monthly === 0 && /* @__PURE__ */ jsx("div", {
 										className: "text-2xl text-muted-foreground font-bold",
@@ -422,7 +448,7 @@ const CheckoutConfirmPage = () => {
 							children: [/* @__PURE__ */ jsx(Button, {
 								className: "w-full",
 								onClick: () => createSubscriptionMutation.mutate(),
-								disabled: createSubscriptionMutation.isPending,
+								disabled: createSubscriptionMutation.isPending || !selectedPlan,
 								children: createSubscriptionMutation.isPending ? "Processing Payment..." : "Confirm & Subscribe"
 							}), /* @__PURE__ */ jsx(Button, {
 								variant: "ghost",
@@ -606,6 +632,17 @@ const ManagePaymentPage = () => {
 	});
 };
 
+//#endregion
+//#region src/hooks/usePlans.ts
+const usePlans = () => {
+	const zudoku = useZudoku();
+	const auth = useAuth();
+	return useSuspenseQuery({
+		queryKey: [`/v3/zudoku-metering/${useDeploymentName()}/pricing-page`],
+		meta: { context: auth.isAuthenticated ? zudoku : void 0 }
+	});
+};
+
 //#endregion
 //#region src/pages/pricing/PricingCard.tsx
 const PhaseSection = ({ phase, currency, showName, billingCadence }) => {
@@ -764,14 +801,18 @@ const SubscriptionChangeConfirmPage = () => {
 	const [search] = useSearchParams();
 	const planId = search.get("planId");
 	const subscriptionId = search.get("subscriptionId");
+	const mode = search.get("mode");
 	const zudoku = useZudoku();
 	const deploymentName = useDeploymentName();
 	const navigate = useNavigate();
-	const { data: plans } = usePlans();
 	const { pricing } = useMonetizationConfig();
-	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 purchaseDetails = usePurchaseDetails(planId);
+	const selectedPlan = getPlanFromPurchaseDetails(purchaseDetails.data);
+	const taxAmount = getTaxAmountFromPurchaseDetails(purchaseDetails.data);
+	const taxLabel = getTaxLabelFromPurchaseDetails(purchaseDetails.data);
+	const taxInclusive = isTaxInclusiveFromPurchaseDetails(purchaseDetails.data);
 	const rateCards = selectedPlan?.phases.at(-1)?.rateCards;
 	const { quotas, features } = categorizeRateCards(rateCards ?? [], {
 		currency: selectedPlan?.currency,
@@ -780,6 +821,7 @@ const SubscriptionChangeConfirmPage = () => {
 	});
 	const price = selectedPlan ? getPriceFromPlan(selectedPlan) : null;
 	const billingCycle = selectedPlan?.billingCadence ? formatDuration(selectedPlan.billingCadence) : null;
+	const effectiveChangeMessage = mode === "downgrade" ? "This change will take effect at the start of your next billing cycle." : "This change will take effect immediately.";
 	const changeMutation = useMutation({
 		mutationKey: [`/v3/zudoku-metering/${deploymentName}/subscriptions/${subscriptionId}/change`],
 		meta: {
@@ -814,13 +856,20 @@ const SubscriptionChangeConfirmPage = () => {
 					}),
 					/* @__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."
-						})]
+						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: effectiveChangeMessage
+							}),
+							/* @__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",
@@ -845,13 +894,20 @@ const SubscriptionChangeConfirmPage = () => {
 								}),
 								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)]
-									})]
+									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)]
+										}),
+										taxAmount != null && /* @__PURE__ */ jsx("div", {
+											className: "text-xs text-muted-foreground font-normal mt-1",
+											children: taxInclusive ? `${formatPrice(taxAmount, selectedPlan?.currency)} ${taxLabel} included` : `+ ${formatPrice(taxAmount, selectedPlan?.currency)} ${taxLabel}`
+										})
+									]
 								}),
 								price && price.monthly === 0 && /* @__PURE__ */ jsx("div", {
 									className: "text-2xl text-muted-foreground font-bold",
@@ -1251,15 +1307,24 @@ const CancelSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionId
 							children: [
 								/* @__PURE__ */ jsx(CalendarIcon, { className: "size-4" }),
 								/* @__PURE__ */ jsx(AlertTitle, { children: "Your plan will be canceled at the end of your billing cycle." }),
-								/* @__PURE__ */ jsxs(AlertDescription, { children: ["You'll retain access until ", formatDate$1(billingPeriodEnd)] })
+								/* @__PURE__ */ jsxs(AlertDescription, { children: [
+									"You'll retain access until ",
+									formatDate$1(billingPeriodEnd),
+									". After your billing period ends, this plan will not renew and you would need to subscribe again to continue."
+								] })
 							]
 						}),
 						/* @__PURE__ */ jsxs(Alert, {
-							variant: "destructive",
+							variant: "info",
 							children: [
-								/* @__PURE__ */ jsx(CircleAlert, { className: "size-4" }),
-								/* @__PURE__ */ jsx(AlertTitle, { children: "This action cannot be undone" }),
-								/* @__PURE__ */ jsx(AlertDescription, { children: "Once cancelled, you will not be able to recover this plan or its associated settings. You would need to subscribe again." })
+								/* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }),
+								/* @__PURE__ */ jsx(AlertTitle, { children: "You can still resume before then" }),
+								/* @__PURE__ */ jsxs(AlertDescription, { children: [
+									"If you change your mind you have until",
+									" ",
+									formatDate$1(billingPeriodEnd),
+									" to remove this cancellation from Manage subscription."
+								] })
 							]
 						}),
 						/* @__PURE__ */ jsxs("div", {
@@ -1312,6 +1377,88 @@ const CancelSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionId
 	});
 };
 
+//#endregion
+//#region src/pages/subscriptions/RestoreSubscriptionDialog.tsx
+const RestoreSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionId, billingPeriodEnd }) => {
+	const deploymentName = useDeploymentName();
+	const context = useZudoku();
+	const queryClient = useQueryClient();
+	const restoreSubscriptionMutation = useMutation({
+		mutationKey: [`/v3/zudoku-metering/${deploymentName}/subscriptions/${subscriptionId}/restore`],
+		meta: {
+			context,
+			request: { method: "POST" }
+		},
+		onSuccess: async () => {
+			await queryClient.invalidateQueries();
+			onOpenChange(false);
+		}
+	});
+	useEffect(() => {
+		if (open) restoreSubscriptionMutation.reset();
+	}, [open, restoreSubscriptionMutation]);
+	const handleOpenChange = (nextOpen) => {
+		if (!nextOpen) restoreSubscriptionMutation.reset();
+		onOpenChange(nextOpen);
+	};
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "sm:max-w-md",
+			children: [
+				/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Resume subscription" }), /* @__PURE__ */ jsxs(DialogDescription, { children: [
+					"You scheduled ",
+					/* @__PURE__ */ jsx("span", {
+						className: "font-medium",
+						children: planName
+					}),
+					" to end. You can still change your mind before the current billing period ends."
+				] })] }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "space-y-4 mt-4",
+					children: [/* @__PURE__ */ jsxs(Alert, {
+						variant: "info",
+						children: [
+							/* @__PURE__ */ jsx(CalendarIcon, { className: "size-4" }),
+							/* @__PURE__ */ jsx(AlertTitle, { children: "What happens if you resume" }),
+							/* @__PURE__ */ jsxs(AlertDescription, {
+								className: "space-y-2",
+								children: [/* @__PURE__ */ jsxs("p", { children: [
+									"Your access stays in place until ",
+									formatDate$1(billingPeriodEnd),
+									" ",
+									"either way."
+								] }), /* @__PURE__ */ jsx("p", { children: "Confirming will remove the pending cancellation. Your subscription will remain active and continue to renew on your normal billing schedule, and charges will apply as usual." })]
+							})
+						]
+					}), restoreSubscriptionMutation.isError && /* @__PURE__ */ jsxs(Alert, {
+						variant: "destructive",
+						children: [
+							/* @__PURE__ */ jsx(CircleSlashIcon, { className: "size-4" }),
+							/* @__PURE__ */ jsx(AlertTitle, { children: "Could not resume subscription" }),
+							/* @__PURE__ */ jsx(AlertDescription, { children: restoreSubscriptionMutation.error.message })
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-2",
+					children: [/* @__PURE__ */ jsx(ActionButton, {
+						disabled: restoreSubscriptionMutation.isPending,
+						isPending: restoreSubscriptionMutation.isPending || restoreSubscriptionMutation.isSuccess,
+						onClick: () => restoreSubscriptionMutation.mutate(),
+						children: "Resume subscription"
+					}), /* @__PURE__ */ jsx(Button$1, {
+						variant: "ghost",
+						onClick: () => handleOpenChange(false),
+						children: "Keep cancellation"
+					})]
+				})
+			]
+		})
+	});
+};
+
 //#endregion
 //#region src/pages/subscriptions/SwitchPlanModal.tsx
 const comparePlans = (currentPlan, targetPlan, currentIndex, targetIndex, units) => {
@@ -1415,7 +1562,12 @@ const modeLabelMap = {
 	downgrade: "Downgrade",
 	private: "Switch"
 };
-const PlanComparisonItem = ({ comparison, subscriptionId, mode, onRequestChange }) => {
+const isSwitchPlanTarget = (value) => {
+	if (typeof value !== "object" || value === null) return false;
+	if (!("subscriptionId" in value) || !("plan" in value) || !("mode" in value)) return false;
+	return true;
+};
+const PlanComparisonItem = ({ comparison, subscriptionId, mode, onRequestChange, isSwitching }) => {
 	const price = getPriceFromPlan(comparison.plan);
 	const isCustom = comparison.plan.key === "enterprise";
 	const displayPrice = price.monthly;
@@ -1455,6 +1607,7 @@ const PlanComparisonItem = ({ comparison, subscriptionId, mode, onRequestChange
 					mode
 				}),
 				size: "sm",
+				disabled: isSwitching,
 				children: modeLabelMap[mode]
 			})]
 		}), hasChanges && /* @__PURE__ */ jsxs("div", {
@@ -1549,24 +1702,32 @@ const PlanComparisonItem = ({ comparison, subscriptionId, mode, onRequestChange
 		})]
 	});
 };
-const ConfirmSwitchAlert = ({ switchTo, onRequestClose }) => {
+const SwitchPlanModal = ({ subscription, children }) => {
+	const [open, setOpen] = useState(false);
+	const { data: plansData } = usePlans();
+	const { pricing } = useMonetizationConfig();
 	const deploymentName = useDeploymentName();
 	const context = useZudoku();
 	const { generateUrl } = useUrlUtils();
-	const mutation = useMutation({
+	const switchPlanMutation = useMutation({
 		mutationKey: [`/v3/zudoku-metering/${deploymentName}/stripe/checkout`],
 		meta: {
 			context,
-			request: {
-				method: "POST",
-				body: JSON.stringify({
-					planId: switchTo.plan.id,
-					successURL: generateUrl(`/subscription-change-confirm`, { searchParams: {
+			request: (variables) => {
+				if (!isSwitchPlanTarget(variables)) throw new Error("Couldn't start the plan change. Please refresh and try again.");
+				const switchTo = variables;
+				return {
+					method: "POST",
+					body: JSON.stringify({
 						planId: switchTo.plan.id,
-						subscriptionId: switchTo.subscriptionId
-					} }),
-					cancelURL: generateUrl("/subscriptions", { searchParams: { subscriptionId: switchTo.subscriptionId } })
-				})
+						successURL: generateUrl(`/subscription-change-confirm`, { searchParams: {
+							planId: switchTo.plan.id,
+							subscriptionId: switchTo.subscriptionId,
+							mode: switchTo.mode
+						} }),
+						cancelURL: generateUrl("/subscriptions", { searchParams: { subscriptionId: switchTo.subscriptionId } })
+					})
+				};
 			}
 		},
 		retry: false,
@@ -1574,38 +1735,6 @@ const ConfirmSwitchAlert = ({ switchTo, onRequestClose }) => {
 			window.location.href = data.url;
 		}
 	});
-	return /* @__PURE__ */ jsx(AlertDialog, {
-		open: true,
-		onOpenChange: onRequestClose,
-		children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
-			/* @__PURE__ */ jsxs(AlertDialogTitle, { children: [
-				"Confirm",
-				" ",
-				switchTo.mode === "private" ? "plan change" : switchTo.mode === "upgrade" ? "upgrade" : "downgrade"
-			] }),
-			mutation.isError && /* @__PURE__ */ jsx(Alert, {
-				variant: "destructive",
-				children: /* @__PURE__ */ jsx(AlertDescription, {
-					className: "first-letter:uppercase",
-					children: mutation.error.message
-				})
-			}),
-			/* @__PURE__ */ jsx(AlertDialogDescription, { children: switchTo.mode === "private" ? `Are you sure you want to switch to ${switchTo.plan.name}? This will take effect immediately.` : switchTo.mode === "upgrade" ? `Are you sure you want to upgrade to ${switchTo.plan.name}? This will take effect immediately.` : `Are you sure you want to downgrade to ${switchTo.plan.name}? This will take effect at the start of your next billing cycle.` })
-		] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, {
-			disabled: mutation.isPending,
-			children: "Cancel"
-		}), /* @__PURE__ */ jsx(ActionButton, {
-			isPending: mutation.isPending,
-			onClick: () => mutation.mutate(),
-			children: modeLabelMap[switchTo.mode]
-		})] })] })
-	});
-};
-const SwitchPlanModal = ({ subscription, children }) => {
-	const [open, setOpen] = useState(false);
-	const { data: plansData } = usePlans();
-	const [switchTo, setSwitchTo] = useState(null);
-	const { pricing } = useMonetizationConfig();
 	const currentPlan = plansData?.items.find((p) => p.id === subscription.plan.id);
 	const { upgrades, downgrades, privatePlans } = useMemo(() => {
 		if (!plansData?.items || !currentPlan) return {
@@ -1628,10 +1757,7 @@ const SwitchPlanModal = ({ subscription, children }) => {
 		currentPlan,
 		pricing?.units
 	]);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [switchTo !== null && /* @__PURE__ */ jsx(ConfirmSwitchAlert, {
-		switchTo,
-		onRequestClose: () => setSwitchTo(null)
-	}), /* @__PURE__ */ jsxs(Dialog, {
+	return /* @__PURE__ */ jsxs(Dialog, {
 		open,
 		onOpenChange: setOpen,
 		children: [/* @__PURE__ */ jsx(DialogTrigger, {
@@ -1652,6 +1778,13 @@ const SwitchPlanModal = ({ subscription, children }) => {
 			}), /* @__PURE__ */ jsxs("div", {
 				className: "mt-4 space-y-6",
 				children: [
+					switchPlanMutation.isError && /* @__PURE__ */ jsx(Alert, {
+						variant: "destructive",
+						children: /* @__PURE__ */ jsx(AlertDescription, {
+							className: "first-letter:uppercase",
+							children: switchPlanMutation.error.message
+						})
+					}),
 					currentPlan && /* @__PURE__ */ jsx(Item, {
 						variant: "outline",
 						children: /* @__PURE__ */ jsxs(ItemContent, { children: [/* @__PURE__ */ jsx(ItemTitle, { children: "Current Plan" }), /* @__PURE__ */ jsx(ItemDescription, {
@@ -1677,7 +1810,8 @@ const SwitchPlanModal = ({ subscription, children }) => {
 							comparison,
 							subscriptionId: subscription.id,
 							mode: "upgrade",
-							onRequestChange: setSwitchTo
+							onRequestChange: (target) => switchPlanMutation.mutate(target),
+							isSwitching: switchPlanMutation.isPending
 						}, comparison.plan.id))
 					})] }),
 					downgrades.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
@@ -1698,7 +1832,8 @@ const SwitchPlanModal = ({ subscription, children }) => {
 							comparison,
 							subscriptionId: subscription.id,
 							mode: "downgrade",
-							onRequestChange: setSwitchTo
+							onRequestChange: (target) => switchPlanMutation.mutate(target),
+							isSwitching: switchPlanMutation.isPending
 						}, comparison.plan.id))
 					})] }),
 					privatePlans.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
@@ -1719,94 +1854,106 @@ const SwitchPlanModal = ({ subscription, children }) => {
 							comparison,
 							subscriptionId: subscription.id,
 							mode: "private",
-							onRequestChange: setSwitchTo
+							onRequestChange: (target) => switchPlanMutation.mutate(target),
+							isSwitching: switchPlanMutation.isPending
 						}, comparison.plan.id))
 					})] })
 				]
 			})]
 		}) })]
-	})] });
+	});
 };
 
 //#endregion
 //#region src/pages/subscriptions/ManageSubscription.tsx
 const ManageSubscription = ({ subscription, planName }) => {
 	const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
-	return /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CancelSubscriptionDialog, {
-		open: cancelDialogOpen,
-		onOpenChange: setCancelDialogOpen,
-		planName,
-		subscriptionId: subscription.id,
-		billingPeriodEnd: subscription.alignment.currentAlignedBillingPeriod.to
-	}), /* @__PURE__ */ jsx(CardContent, {
-		className: "p-6",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex gap-4",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "flex items-center justify-center w-12 h-12 rounded-full bg-primary/10 shrink-0",
-				children: /* @__PURE__ */ jsx(Settings, { className: "w-6 h-6 text-primary" })
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "flex-1",
-				id: "manage",
-				children: [
-					/* @__PURE__ */ jsx("h2", {
-						className: "text-lg font-semibold text-foreground mb-1",
-						children: "Manage Subscription"
-					}),
-					/* @__PURE__ */ jsx("p", {
-						className: "text-sm text-muted-foreground mb-4",
-						children: "Switch to a different plan or cancel your current subscription."
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex flex-wrap gap-3",
-						children: [
-							subscription.status === "canceled" && /* @__PURE__ */ jsx(Button$1, {
-								variant: "outline",
-								size: "sm",
-								asChild: true,
-								children: /* @__PURE__ */ jsxs(Link, {
-									to: "/pricing",
-									children: [/* @__PURE__ */ jsx(RefreshCcw, { className: "w-4 h-4 mr-2" }), "New subscription"]
-								})
-							}),
-							subscription.status === "active" && /* @__PURE__ */ jsx(SwitchPlanModal, { subscription }),
-							/* @__PURE__ */ jsxs(Tooltip, {
-								delayDuration: 0,
-								children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+	const [restoreDialogOpen, setRestoreDialogOpen] = useState(false);
+	const billingPeriodEnd = subscription.alignment.currentAlignedBillingPeriod.to;
+	const canResumeCanceledSubscription = subscription.status === "canceled" && new Date(billingPeriodEnd) > /* @__PURE__ */ new Date();
+	return /* @__PURE__ */ jsxs(Card, { children: [
+		/* @__PURE__ */ jsx(CancelSubscriptionDialog, {
+			open: cancelDialogOpen,
+			onOpenChange: setCancelDialogOpen,
+			planName,
+			subscriptionId: subscription.id,
+			billingPeriodEnd
+		}),
+		/* @__PURE__ */ jsx(RestoreSubscriptionDialog, {
+			open: restoreDialogOpen,
+			onOpenChange: setRestoreDialogOpen,
+			planName,
+			subscriptionId: subscription.id,
+			billingPeriodEnd
+		}),
+		/* @__PURE__ */ jsx(CardContent, {
+			className: "p-6",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex gap-4",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-center w-12 h-12 rounded-full bg-primary/10 shrink-0",
+					children: /* @__PURE__ */ jsx(Settings, { className: "w-6 h-6 text-primary" })
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex-1",
+					id: "manage",
+					children: [
+						/* @__PURE__ */ jsx("h2", {
+							className: "text-lg font-semibold text-foreground mb-1",
+							children: "Manage Subscription"
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "text-sm text-muted-foreground mb-4",
+							children: "Switch to a different plan or cancel your current subscription."
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-wrap gap-3",
+							children: [
+								subscription.status === "canceled" && /* @__PURE__ */ jsx(Button$1, {
+									variant: "outline",
+									size: "sm",
 									asChild: true,
-									children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button$1, {
-										variant: "outline",
-										size: "sm",
-										onClick: () => setCancelDialogOpen(true),
-										title: "You can only cancel your subscription if it is not active.",
-										disabled: subscription.status !== "active",
-										children: "Cancel subscription"
-									}) })
-								}), subscription.status === "canceled" && /* @__PURE__ */ jsx(TooltipContent, { children: "Your subscription is already cancelled." })]
-							}),
-							/* @__PURE__ */ jsx(Button$1, {
-								asChild: true,
-								size: "sm",
-								variant: "secondary",
-								children: /* @__PURE__ */ jsx(Link, {
-									to: "/manage-payment",
-									children: /* @__PURE__ */ jsxs("div", {
-										className: "flex items-center gap-2",
-										children: [/* @__PURE__ */ jsx(CreditCardIcon, {}), "Manage payment details"]
+									children: /* @__PURE__ */ jsxs(Link, {
+										to: "/pricing",
+										children: [/* @__PURE__ */ jsx(RefreshCcw, { className: "w-4 h-4 mr-2" }), "New subscription"]
+									})
+								}),
+								subscription.status === "active" && /* @__PURE__ */ jsx(SwitchPlanModal, { subscription }),
+								subscription.status === "active" && /* @__PURE__ */ jsx(Button$1, {
+									variant: "outline",
+									size: "sm",
+									onClick: () => setCancelDialogOpen(true),
+									children: "Cancel subscription"
+								}),
+								canResumeCanceledSubscription && /* @__PURE__ */ jsx(Button$1, {
+									variant: "outline",
+									size: "sm",
+									onClick: () => setRestoreDialogOpen(true),
+									children: "Resume subscription"
+								}),
+								/* @__PURE__ */ jsx(Button$1, {
+									asChild: true,
+									size: "sm",
+									variant: "secondary",
+									children: /* @__PURE__ */ jsx(Link, {
+										to: "/manage-payment",
+										children: /* @__PURE__ */ jsxs("div", {
+											className: "flex items-center gap-2",
+											children: [/* @__PURE__ */ jsx(CreditCardIcon, {}), "Manage payment details"]
+										})
 									})
 								})
-							})
-						]
-					}),
-					/* @__PURE__ */ jsx(Separator, { className: "my-4" }),
-					/* @__PURE__ */ jsx("span", {
-						className: "text-sm text-muted-foreground",
-						children: "Your payment is securely managed by Stripe."
-					})
-				]
-			})]
+							]
+						}),
+						/* @__PURE__ */ jsx(Separator, { className: "my-4" }),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-sm text-muted-foreground",
+							children: "Your payment is securely managed by Stripe."
+						})
+					]
+				})]
+			})
 		})
-	})] });
+	] });
 };
 
 //#endregion

package/package.json

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