fix(web): wrap useSearchParams in Suspense boundary

Wrap the checkout success page content in a Suspense boundary
as required by Next.js 14 for useSearchParams hook.

Author: Sakeeb91

apps/web/src/app/checkout/success/page.tsx

@@ -1,13 +1,13 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { useSearchParams } from "next/navigation";
 import Link from "next/link";
 import { CheckCircle2, Loader2, ArrowRight, Sparkles } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 
-export default function CheckoutSuccessPage() {
+function CheckoutSuccessContent() {
   const searchParams = useSearchParams();
   const [isVerifying, setIsVerifying] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -140,3 +140,26 @@ export default function CheckoutSuccessPage() {
     </div>
   );
 }
+
+function LoadingFallback() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-background to-muted/30">
+      <Card className="w-full max-w-md mx-4">
+        <CardContent className="pt-6">
+          <div className="flex flex-col items-center text-center space-y-4">
+            <Loader2 className="h-12 w-12 text-primary animate-spin" />
+            <h2 className="text-xl font-semibold">Loading...</h2>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default function CheckoutSuccessPage() {
+  return (
+    <Suspense fallback={<LoadingFallback />}>
+      <CheckoutSuccessContent />
+    </Suspense>
+  );
+}