@lukoweb/apitogo-plugin-dev-portal-billing 0.2.25 → 0.2.30

package/dist/index.mjs

@@ -231,7 +231,7 @@ const accountCtaLabel = (plan) => {
 };
 /** Custom-priced plans skip checkout and open the contact-sales form. */
 const planCtaPath = (plan) => `${isPlanCustomPriced(plan) ? CONTACT_SALES_PATH : CHECKOUT_PATH}?planSku=${encodeURIComponent(plan.sku)}`;
-const PricingCard = ({ plan, mode = "public", subscriptionStatus, isSubscribed = false, onUnsubscribe, isCanceling = false, cancelDisabled = false, featured = false }) => {
+const PricingCard = ({ plan, mode = "public", subscriptionStatus, isSubscribed = false, onUnsubscribe, onSwitch, isSwitching = false, isCanceling = false, cancelDisabled = false, featured = false }) => {
 	const isActive = isSubscribed || isActiveSubscription(subscriptionStatus ?? "");
 	const features = listPlanFeatureLines(plan);
 	const displayPrice = formatPlanDisplayPrice(plan);
@@ -296,7 +296,31 @@ const PricingCard = ({ plan, mode = "public", subscriptionStatus, isSubscribed =
 						className: "text-center text-xs text-muted-foreground",
 						children: "Unsubscribe is available after the portal is published."
 					}) : null
-				] }) : /* @__PURE__ */ jsx(Button, {
+				] }) : onSwitch && !isPlanCustomPriced(plan) ? /* @__PURE__ */ jsxs(AlertDialog, { children: [/* @__PURE__ */ jsx(AlertDialogTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: featured ? "default" : "outline",
+						className: "w-full",
+						disabled: isSwitching,
+						"data-testid": `switch-${plan.sku}`,
+						children: isSwitching ? "Switching…" : "Switch to this plan"
+					})
+				}), /* @__PURE__ */ jsxs(AlertDialogContent, { children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsxs(AlertDialogTitle, { children: [
+					"Switch to ",
+					plan.displayName,
+					"?"
+				] }), /* @__PURE__ */ jsxs(AlertDialogDescription, { children: [
+					"Your current plan is replaced by ",
+					plan.displayName,
+					". The API keys of your current plan stop working. Create a key for",
+					" ",
+					plan.displayName,
+					" on the API keys page."
+				] })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, { children: "Keep current plan" }), /* @__PURE__ */ jsx(AlertDialogAction, {
+					onClick: () => onSwitch(plan.sku),
+					disabled: isSwitching,
+					children: "Switch plan"
+				})] })] })] }) : /* @__PURE__ */ jsx(Button, {
 					variant: featured ? "default" : "outline",
 					className: "w-full",
 					asChild: true,
@@ -386,6 +410,42 @@ function useCancelSubscription() {
 	});
 }
 
+//#endregion
+//#region src/hooks/useChangePlan.ts
+function useChangePlan() {
+	const apiBaseUrl = useDevPortalApiBaseUrl();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: async ({ fromPlanSku, toPlanSku }) => {
+			if (!apiBaseUrl) throw new Error("Dev portal API is not configured.");
+			const response = await fetch(`${apiBaseUrl}/api/v1/subscriptions/change`, {
+				method: "POST",
+				headers: {
+					Accept: "application/json",
+					"Content-Type": "application/json"
+				},
+				credentials: "include",
+				body: JSON.stringify({
+					fromPlanSku,
+					toPlanSku
+				})
+			});
+			if (!response.ok) {
+				const detail = await response.text();
+				throw new Error(detail || "Failed to change plan.");
+			}
+			return await response.json();
+		},
+		onSuccess: async (result) => {
+			if (result.checkoutUrl) {
+				window.location.assign(result.checkoutUrl);
+				return;
+			}
+			await queryClient.invalidateQueries({ queryKey: ["dev-portal-me", apiBaseUrl] });
+		}
+	});
+}
+
 //#endregion
 //#region src/utils/demo-session.ts
 const DEMO_SUBSCRIPTION_KEY = "demo-subscription-key";
@@ -533,8 +593,24 @@ const AccountPlansPage = () => {
 	const isError = isPreview ? false : livePlans.isError;
 	const { data: me } = useMySubscriptions();
 	const cancelMutation = useCancelSubscription();
+	const changeMutation = useChangePlan();
 	const [cancelingSku, setCancelingSku] = useState(null);
+	const [switchingSku, setSwitchingSku] = useState(null);
 	const subscriptionBySku = new Map((me?.subscriptions ?? []).map((sub) => [sub.planSku, sub]));
+	const activePlanSkus = (me?.subscriptions ?? []).filter((sub) => isActiveSubscription(sub.status)).map((sub) => sub.planSku);
+	const currentPlanSku = activePlanSkus.length === 1 ? activePlanSkus[0] : null;
+	const handleSwitch = async (toPlanSku) => {
+		if (!currentPlanSku) return;
+		setSwitchingSku(toPlanSku);
+		try {
+			await changeMutation.mutateAsync({
+				fromPlanSku: currentPlanSku,
+				toPlanSku
+			});
+		} finally {
+			setSwitchingSku(null);
+		}
+	};
 	const handleUnsubscribe = async (planSku) => {
 		setCancelingSku(planSku);
 		try {
@@ -571,6 +647,10 @@ const AccountPlansPage = () => {
 				className: "mb-6 rounded-xl border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive",
 				children: cancelMutation.error instanceof Error ? cancelMutation.error.message : "Failed to cancel subscription."
 			}) : null,
+			changeMutation.isError ? /* @__PURE__ */ jsx("div", {
+				className: "mb-6 rounded-xl border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive",
+				children: changeMutation.error instanceof Error ? changeMutation.error.message : "Failed to change plan."
+			}) : null,
 			isLoading ? /* @__PURE__ */ jsx("p", {
 				className: "text-muted-foreground",
 				children: "Loading plans…"
@@ -590,6 +670,8 @@ const AccountPlansPage = () => {
 						subscriptionStatus: subscription?.status,
 						isSubscribed,
 						onUnsubscribe: isPreview || isDemoSession ? void 0 : handleUnsubscribe,
+						onSwitch: currentPlanSku && !isPreview && !isDemoSession ? handleSwitch : void 0,
+						isSwitching: switchingSku === plan.sku,
 						isCanceling: cancelingSku === plan.sku,
 						cancelDisabled: isPreview || isDemoSession
 					}, plan.sku);
@@ -2570,6 +2652,14 @@ const devPortalBillingPlugin = createPlugin((options = {}) => ({
 				handle: { layout: "default" },
 				element: /* @__PURE__ */ jsx(ContactSalesPage, {})
 			},
+			{
+				path: ACCOUNT_PLANS_PATH,
+				handle: { layout: "default" },
+				element: /* @__PURE__ */ jsx(AccountLayout, {
+					includeBillingNav: true,
+					children: /* @__PURE__ */ jsx(AccountPlansPage, {})
+				})
+			},
 			{
 				path: SUBSCRIPTIONS_PATH,
 				handle: { layout: "default" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukoweb/apitogo-plugin-dev-portal-billing",
-  "version": "0.2.25",
+  "version": "0.2.30",
   "repository": {
     "type": "git",
     "url": "https://github.com/zuplo/zudoku",
@@ -46,8 +46,8 @@
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "tsdown": "0.20.3",
-    "@lukoweb/apitogo": "0.2.25",
-    "@lukoweb/apitogo-module-user-panel": "0.2.25"
+    "@lukoweb/apitogo": "0.2.30",
+    "@lukoweb/apitogo-module-user-panel": "0.2.30"
   },
   "peerDependencies": {
     "react": ">=19.2.0",