feat(web): upgrade button feedback + post-checkout messaging

The Upgrade buttons gave no click feedback and, after returning from a
successful LemonSqueezy payment, the dashboard said nothing — the plan updates
asynchronously when the webhook lands, so a user saw "nothing happened".

- Per-button loading state: the clicked Upgrade/Downgrade shows a spinner +
  "Redirecting…" and disables while the checkout session is created.
- Hover/active affordance on the upgrade buttons (brightness + press scale).
- On return from checkout (redirect carries ?checkout=success) show a
  confirmation banner: "Payment received — your plan upgrades within a few
  minutes, no action needed." Param is cleaned from the URL after read.

Author: decebal

apps/web/src/app/dashboard/billing/page.tsx

@@ -36,6 +36,17 @@ export default function BillingPage() {
   const { stats } = useDashboardStats();
   const [isYearly, setIsYearly] = useState(false);
   const [isLoadingPortal, setIsLoadingPortal] = useState(false);
+  // The tier whose checkout is currently being created (button shows a spinner).
+  const [upgradingTier, setUpgradingTier] = useState<string | null>(null);
+  // Set when LemonSqueezy redirects back after a successful checkout.
+  const [checkoutSuccess, setCheckoutSuccess] = useState(false);
+  useEffect(() => {
+    if (new URLSearchParams(window.location.search).get("checkout") === "success") {
+      setCheckoutSuccess(true);
+      // Clean the param so a refresh doesn't keep showing the banner.
+      window.history.replaceState(null, "", window.location.pathname);
+    }
+  }, []);
   // Live LemonSqueezy prices (source of truth) fetched via the catalog proxy.
   const [catalog, setCatalog] = useState<Catalog | null>(null);
   useEffect(() => {
@@ -82,16 +93,20 @@ export default function BillingPage() {
       window.open("mailto:sales@all-source.xyz?subject=Enterprise%20Plan%20Inquiry", "_blank");
       return;
     }
+    setUpgradingTier(planTier);
     try {
       const response = await apiClient.createCheckout(planTier, billingPeriod, {
         tenantId: tenant?.id,
         email: user?.email,
-        redirectUrl: `${window.location.origin}/dashboard/billing`,
+        redirectUrl: `${window.location.origin}/dashboard/billing?checkout=success`,
       });
       if (response.data?.checkout_url) {
         window.location.href = response.data.checkout_url;
+        return; // navigating away; keep the spinner until the redirect happens
       }
+      setUpgradingTier(null);
     } catch (error) {
+      setUpgradingTier(null);
       console.error("Failed to create checkout:", error);
     }
   };
@@ -107,6 +122,29 @@ export default function BillingPage() {
 
   return (
     <div className="space-y-8">
+      {/* Post-checkout confirmation — the plan updates asynchronously once the
+          LemonSqueezy webhook lands, so set expectations explicitly. */}
+      {checkoutSuccess && (
+        <div className="flex items-start gap-3 rounded-lg border border-primary/30 bg-primary/10 p-4">
+          <Check className="mt-0.5 h-5 w-5 shrink-0 text-primary" />
+          <div className="text-sm">
+            <p className="font-semibold text-foreground">Payment received — thank you!</p>
+            <p className="mt-1 text-muted-foreground">
+              Your plan upgrades automatically within a few minutes once payment is confirmed. No
+              action needed — refresh this page to see the change.
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={() => setCheckoutSuccess(false)}
+            className="ml-auto text-muted-foreground hover:text-foreground"
+            aria-label="Dismiss"
+          >
+            <span aria-hidden>×</span>
+          </button>
+        </div>
+      )}
+
       {/* Header */}
       <BlurFade delay={0.1} inView>
         <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
@@ -273,6 +311,7 @@ export default function BillingPage() {
             currentPlan={currentTier}
             isYearly={isYearly}
             catalog={catalog}
+            loadingTier={upgradingTier}
             onUpgrade={handleUpgrade}
           />
         </div>

apps/web/src/components/billing/plan-cards.tsx

@@ -2,7 +2,7 @@
 
 import { Button, Card, CardContent, CardHeader, CardTitle } from "@allsource/ui";
 import { cn } from "@allsource/ui/utils";
-import { ArrowDown, Check, Sparkles } from "lucide-react";
+import { ArrowDown, Check, Loader2, Sparkles } from "lucide-react";
 import { siteConfig } from "@/lib/config";
 import { type Catalog, indexByTier } from "@/lib/pricing-catalog";
 
@@ -25,13 +25,16 @@ interface PlanCardsProps {
   currentPlan?: string;
   isYearly?: boolean;
   catalog?: Catalog | null;
+  /** Tier whose checkout is being created — its button shows a spinner. */
+  loadingTier?: string | null;
   onUpgrade?: (planName: string, billingPeriod: "monthly" | "annual") => void;
 }
 
 export function PlanCards({
   currentPlan = "free",
   isYearly = false,
   catalog,
+  loadingTier,
   onUpgrade,
 }: PlanCardsProps) {
   // Dashboard only offers checkout for tiers with a backend billing tier.
@@ -52,6 +55,7 @@ export function PlanCards({
         const isAbove = planRank > currentRank;
         const isBelow = planRank < currentRank;
         const isPopular = plan.isPopular;
+        const isUpgrading = !!loadingTier && loadingTier === planBillingTier;
         const cat = prices[plan.tier];
         const displayPrice = isYearly
           ? (cat?.annual?.per_month ?? plan.yearlyPrice)
@@ -129,21 +133,41 @@ export function PlanCards({
                 </Button>
               ) : isAbove ? (
                 <Button
-                  className="w-full"
+                  className="w-full transition-all hover:brightness-110 active:scale-[0.98] disabled:opacity-70"
                   variant={isPopular ? "default" : "outline"}
+                  disabled={isUpgrading}
                   onClick={() => onUpgrade?.(planBillingTier, isYearly ? "annual" : "monthly")}
                 >
-                  {isPopular && <Sparkles className="mr-2 h-4 w-4" />}
-                  Upgrade
+                  {isUpgrading ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Redirecting…
+                    </>
+                  ) : (
+                    <>
+                      {isPopular && <Sparkles className="mr-2 h-4 w-4" />}
+                      Upgrade
+                    </>
+                  )}
                 </Button>
               ) : isBelow && planBillingTier !== "free" ? (
                 <Button
-                  className="w-full"
+                  className="w-full transition-all hover:brightness-110 active:scale-[0.98] disabled:opacity-70"
                   variant="ghost"
+                  disabled={isUpgrading}
                   onClick={() => onUpgrade?.(planBillingTier, isYearly ? "annual" : "monthly")}
                 >
-                  <ArrowDown className="mr-2 h-4 w-4" />
-                  Downgrade
+                  {isUpgrading ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Redirecting…
+                    </>
+                  ) : (
+                    <>
+                      <ArrowDown className="mr-2 h-4 w-4" />
+                      Downgrade
+                    </>
+                  )}
                 </Button>
               ) : (
                 // Free plan when user is on a paid plan — no button, cancel via portal