70 lines
2.6 KiB
TypeScript
70 lines
2.6 KiB
TypeScript
"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>
|
|
);
|
|
}
|