Update app/success/page.tsx

app/success/page.tsx

@@ -0,0 +1,69 @@
+"use client";
+import { useSearchParams } from "next/navigation";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { CheckCircle2, Truck, Package } from "lucide-react";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+import { NavBar } from "@/components/navbar";
+import { Footer } from "@/components/footer";
+
+export default function SuccessPage() {
+  const searchParams = useSearchParams();
+  const orderId = searchParams.get("orderId");
+  const [order, setOrder] = useState<any>(null);
+
+  useEffect(() => {
+    const data = localStorage.getItem(`order_${orderId}`);
+    if (data) setOrder(JSON.parse(data));
+  }, [orderId]);
+
+  return (
+    <main>
+      <NavBar />
+      <Container className="py-32 max-w-2xl text-center">
+      <div className="mb-8 flex justify-center">
+        <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center">
+          <CheckCircle2 className="w-12 h-12 text-green-600" />
+        </div>
+      </div>
+      <Heading className="mb-4">¡Pedido Confirmado!</Heading>
+      <p className="text-neutral-600 mb-8">
+        Gracias por confiar en El Palacio de Teni. Tu pago ha sido recibido y tu pedido está siendo procesado.
+      </p>
+
+      <Card className="mb-8 text-left">
+        <CardContent className="pt-6 space-y-4">
+          <div className="flex justify-between items-center border-b pb-4">
+            <span className="text-neutral-500">Número de Orden:</span>
+            <span className="font-bold">#{orderId}</span>
+          </div>
+          <div className="flex justify-between items-center border-b pb-4">
+            <span className="text-neutral-500">Número de Guía (Rastreo):</span>
+            <span className="font-bold text-blue-600">{order?.trackingNumber || "Generando..."}</span>
+          </div>
+          <div className="flex justify-between items-center">
+            <span className="text-neutral-500">Estado:</span>
+            <span className="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm font-medium">
+              {order?.status || "Pagado"}
+            </span>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="flex flex-col sm:flex-row gap-4 justify-center">
+        <Button asChild>
+          <Link href="/tracking">Ir a Seguimiento</Link>
+        </Button>
+        <Button variant="outline" asChild>
+          <Link href="/">Volver al Inicio</Link>
+        </Button>
+      </div>
+      </Container>
+      <Footer />
+    </main>
+  );
+}