@zuplo/zudoku-plugin-monetization 0.0.18 → 0.0.20

package/dist/index.mjs

@@ -81,8 +81,13 @@ const useDeploymentName = () => {
 
 //#endregion
 //#region src/hooks/usePlans.ts
-const usePlans = (environmentName) => {
-	return useSuspenseQuery({ queryKey: [`/v3/zudoku-metering/${environmentName}/pricing-page`] });
+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
@@ -271,7 +276,7 @@ const CheckoutConfirmPage = () => {
 	const zudoku = useZudoku();
 	const deploymentName = useDeploymentName();
 	const navigate = useNavigate();
-	const { data: plans } = usePlans(deploymentName);
+	const { data: plans } = usePlans();
 	const selectedPlan = plans?.items?.find((plan) => plan.id === planId);
 	if (!planId) throw new Error("Parameter `planId` missing");
 	const rateCards = selectedPlan?.phases.at(-1)?.rateCards;
@@ -651,10 +656,7 @@ const PricingPage = ({ subtitle = "See our pricing options and choose the one th
 	const zudoku = useZudoku();
 	const deploymentName = useDeploymentName();
 	const auth = useAuth();
-	const { data: pricingTable } = useSuspenseQuery({
-		queryKey: [`/v3/zudoku-metering/${deploymentName}/pricing-page`],
-		meta: { context: auth.isAuthenticated ? zudoku : void 0 }
-	});
+	const { data: pricingTable } = usePlans();
 	const { data: subscriptions = { items: [] } } = useQuery({
 		meta: { context: zudoku },
 		queryKey: [`/v3/zudoku-metering/${deploymentName}/subscriptions`],
@@ -1187,7 +1189,12 @@ const ChangeIndicator = ({ change }) => {
 	if (change === "decrease" || change === "removed" || change === "downgraded") return /* @__PURE__ */ jsx(ArrowDownIcon, { className: "w-4 h-4 text-amber-600 shrink-0" });
 	return /* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-green-600 shrink-0" });
 };
-const PlanComparisonItem = ({ comparison, subscriptionId, onRequestChange }) => {
+const modeLabelMap = {
+	upgrade: "Upgrade",
+	downgrade: "Downgrade",
+	private: "Switch"
+};
+const PlanComparisonItem = ({ comparison, subscriptionId, mode, onRequestChange }) => {
 	const price = getPriceFromPlan(comparison.plan);
 	const isCustom = comparison.plan.key === "enterprise";
 	const displayPrice = price.monthly;
@@ -1216,14 +1223,14 @@ const PlanComparisonItem = ({ comparison, subscriptionId, onRequestChange }) =>
 				size: "sm",
 				children: "Contact Sales"
 			}) : /* @__PURE__ */ jsx(Button$1, {
-				variant: comparison.isUpgrade ? "default" : "outline",
+				variant: mode === "upgrade" ? "default" : "outline",
 				onClick: () => onRequestChange({
 					subscriptionId,
 					plan: comparison.plan,
-					mode: comparison.isUpgrade ? "upgrade" : "downgrade"
+					mode
 				}),
 				size: "sm",
-				children: comparison.isUpgrade ? "Upgrade" : "Downgrade"
+				children: modeLabelMap[mode]
 			})]
 		}), hasChanges && /* @__PURE__ */ jsxs("div", {
 			className: "space-y-1.5",
@@ -1335,7 +1342,7 @@ const ConfirmSwitchAlert = ({ switchTo, onRequestClose }) => {
 		onSuccess: async (subscription) => {
 			await queryClient.invalidateQueries();
 			navigate(`/subscriptions/${subscription.id}`, { state: { planSwitched: {
-				isUpgrade: switchTo.mode === "upgrade",
+				mode: switchTo.mode,
 				newPlanName: switchTo.plan.name
 			} } });
 			onRequestClose();
@@ -1349,7 +1356,11 @@ const ConfirmSwitchAlert = ({ switchTo, onRequestClose }) => {
 		open: true,
 		onOpenChange: onRequestClose,
 		children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
-			/* @__PURE__ */ jsxs(AlertDialogTitle, { children: ["Confirm ", switchTo.mode === "upgrade" ? "upgrade" : "downgrade"] }),
+			/* @__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, {
@@ -1357,31 +1368,34 @@ const ConfirmSwitchAlert = ({ switchTo, onRequestClose }) => {
 					children: mutation.error.message
 				})
 			}),
-			/* @__PURE__ */ jsx(AlertDialogDescription, { children: 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__ */ 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: switchTo.mode === "upgrade" ? "Upgrade" : "Downgrade"
+			children: modeLabelMap[switchTo.mode]
 		})] })] })
 	});
 };
 const SwitchPlanModal = ({ subscription, children }) => {
 	const [open, setOpen] = useState(false);
-	const { data: plansData } = usePlans(useDeploymentName());
+	const { data: plansData } = usePlans();
 	const [switchTo, setSwitchTo] = useState(null);
 	const currentPlan = plansData?.items.find((p) => p.id === subscription.plan.id);
-	const { upgrades, downgrades } = useMemo(() => {
+	const { upgrades, downgrades, privatePlans } = useMemo(() => {
 		if (!plansData?.items || !currentPlan) return {
 			upgrades: [],
-			downgrades: []
+			downgrades: [],
+			privatePlans: []
 		};
+		const isPrivatePlan = (plan) => plan.metadata?.zuplo_is_private === "true";
 		const allComparisons = plansData.items.filter((p) => p.id !== currentPlan.id).map((plan) => comparePlans(currentPlan, plan));
 		return {
-			upgrades: allComparisons.filter((c) => c.isUpgrade),
-			downgrades: allComparisons.filter((c) => !c.isUpgrade)
+			upgrades: allComparisons.filter((c) => c.isUpgrade && !isPrivatePlan(c.plan)),
+			downgrades: allComparisons.filter((c) => !c.isUpgrade && !isPrivatePlan(c.plan)),
+			privatePlans: allComparisons.filter((c) => isPrivatePlan(c.plan))
 		};
 	}, [plansData?.items, currentPlan]);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [switchTo !== null && /* @__PURE__ */ jsx(ConfirmSwitchAlert, {
@@ -1432,11 +1446,8 @@ const SwitchPlanModal = ({ subscription, children }) => {
 						children: upgrades.map((comparison) => /* @__PURE__ */ jsx(PlanComparisonItem, {
 							comparison,
 							subscriptionId: subscription.id,
-							onRequestChange: ({ subscriptionId, plan }) => setSwitchTo({
-								subscriptionId,
-								plan,
-								mode: "upgrade"
-							})
+							mode: "upgrade",
+							onRequestChange: setSwitchTo
 						}, comparison.plan.id))
 					})] }),
 					downgrades.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
@@ -1456,11 +1467,29 @@ const SwitchPlanModal = ({ subscription, children }) => {
 						children: downgrades.map((comparison) => /* @__PURE__ */ jsx(PlanComparisonItem, {
 							comparison,
 							subscriptionId: subscription.id,
-							onRequestChange: ({ subscriptionId, plan }) => setSwitchTo({
-								subscriptionId,
-								plan,
-								mode: "downgrade"
-							})
+							mode: "downgrade",
+							onRequestChange: setSwitchTo
+						}, comparison.plan.id))
+					})] }),
+					privatePlans.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between mb-3",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx(ArrowLeftRightIcon, { className: "size-5 text-muted-foreground" }), /* @__PURE__ */ jsx("span", {
+								className: "font-medium text-foreground",
+								children: "Private Plan Option"
+							})]
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-sm text-muted-foreground",
+							children: "Takes effect immediately"
+						})]
+					}), /* @__PURE__ */ jsx("div", {
+						className: "space-y-3",
+						children: privatePlans.map((comparison) => /* @__PURE__ */ jsx(PlanComparisonItem, {
+							comparison,
+							subscriptionId: subscription.id,
+							mode: "private",
+							onRequestChange: setSwitchTo
 						}, comparison.plan.id))
 					})] })
 				]
@@ -1717,7 +1746,11 @@ const ActiveSubscription = ({ subscription, deploymentName }) => {
 			variant: "info",
 			children: [
 				/* @__PURE__ */ jsx(CheckCheckIcon, { className: "size-4" }),
-				/* @__PURE__ */ jsxs(AlertTitle, { children: ["Plan ", planSwitched.isUpgrade ? "upgraded" : "downgraded"] }),
+				/* @__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,

package/package.json

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