@lukoweb/apitogo-plugin-dev-portal-billing 0.2.29 → 0.2.31

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { Button, Head, Heading, Link, Spinner } from "@lukoweb/apitogo/components";
 import { ArrowRightIcon, CreditCardIcon, KeyRoundIcon, ShieldIcon, StarsIcon, TrashIcon } from "@lukoweb/apitogo/icons";
-import { createContext, useContext, useEffect, useState } from "react";
 import { Link as Link$1, Navigate, Outlet, useNavigate, useSearchParams } from "@lukoweb/apitogo/router";
+import { createContext, useContext, useEffect, useState } from "react";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@lukoweb/apitogo/ui/AlertDialog.js";
 import { cn } from "@lukoweb/apitogo/ui/util.js";
 import manifestCatalog from "virtual:apitogo-local-manifest";
@@ -584,6 +584,8 @@ function usePlans() {
 //#endregion
 //#region src/pages/AccountPlansPage.tsx
 const AccountPlansPage = () => {
+	const [searchParams] = useSearchParams();
+	const checkoutCancelled = searchParams.get("checkout") === "cancelled";
 	const { previewPlans } = useDevPortalBillingConfig();
 	const isPreview = useDevPortalPreviewMode();
 	const isDemoSession = useIsDemoSession();
@@ -630,13 +632,20 @@ const AccountPlansPage = () => {
 					children: /* @__PURE__ */ jsx(CreditCardIcon, { size: 24 })
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "space-y-1",
-					children: [/* @__PURE__ */ jsx("h1", {
-						className: "text-3xl font-semibold tracking-tight",
-						children: "Plans & billing"
-					}), /* @__PURE__ */ jsx("p", {
-						className: "max-w-2xl text-muted-foreground",
-						children: "Compare plans, manage your subscriptions, and change tiers."
-					})]
+					children: [
+						/* @__PURE__ */ jsx("h1", {
+							className: "text-3xl font-semibold tracking-tight",
+							children: "Plans & billing"
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "max-w-2xl text-muted-foreground",
+							children: "Compare plans, manage your subscriptions, and change tiers."
+						}),
+						checkoutCancelled ? /* @__PURE__ */ jsx("p", {
+							className: "max-w-2xl text-sm text-muted-foreground",
+							children: "Checkout was cancelled and you were not charged."
+						}) : null
+					]
 				})]
 			}),
 			isDemoSession ? /* @__PURE__ */ jsx("div", {
@@ -2156,7 +2165,7 @@ const SubscriptionsPage = () => {
 	const auth = useAuth();
 	const [searchParams] = useSearchParams();
 	const checkoutSuccess = searchParams.get("checkout") === "success";
-	const { data: me, isLoading } = useMySubscriptions();
+	const { data: me, isLoading, refetch } = useMySubscriptions();
 	const { data: catalog } = usePlans();
 	const billingPortal = useBillingPortal();
 	const { data: usage } = useUsage("mtd");
@@ -2164,6 +2173,17 @@ const SubscriptionsPage = () => {
 	const subscriptions = me?.subscriptions ?? [];
 	const activeSubscription = subscriptions.find((sub) => isActiveSubscription(sub.status));
 	const activePlan = activeSubscription ? planBySku.get(activeSubscription.planSku) : void 0;
+	const confirmingPayment = checkoutSuccess && !isLoading && !activeSubscription;
+	useEffect(() => {
+		if (!confirmingPayment) return;
+		let attempts = 0;
+		const timer = setInterval(() => {
+			attempts += 1;
+			refetch();
+			if (attempts >= 30) clearInterval(timer);
+		}, 2e3);
+		return () => clearInterval(timer);
+	}, [confirmingPayment, refetch]);
 	const monthlyQuota = activePlan ? parseMonthlyQuotaCalls(activePlan.limitsJson) : null;
 	const usedRequests = usage?.requestCount ?? 0;
 	const quotaPct = monthlyQuota && monthlyQuota > 0 ? Math.min(100, Math.round(usedRequests / monthlyQuota * 100)) : null;
@@ -2179,7 +2199,11 @@ const SubscriptionsPage = () => {
 				className: "mb-8 text-muted-foreground",
 				children: "Manage your plan, payment method, and invoices."
 			}),
-			checkoutSuccess ? /* @__PURE__ */ jsxs("div", {
+			confirmingPayment ? /* @__PURE__ */ jsx("div", {
+				className: "mb-6 rounded-xl border border-border bg-card p-4 text-sm",
+				children: "Payment received. Confirming your subscription, this takes a few seconds…"
+			}) : null,
+			checkoutSuccess && activeSubscription ? /* @__PURE__ */ jsxs("div", {
 				className: "mb-6 rounded-xl border border-green-500/30 bg-green-500/10 p-4 text-sm",
 				children: [
 					"Your subscription is active.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukoweb/apitogo-plugin-dev-portal-billing",
-  "version": "0.2.29",
+  "version": "0.2.31",
   "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.29",
-    "@lukoweb/apitogo-module-user-panel": "0.2.29"
+    "@lukoweb/apitogo": "0.2.31",
+    "@lukoweb/apitogo-module-user-panel": "0.2.31"
   },
   "peerDependencies": {
     "react": ">=19.2.0",