117 lines
4.1 KiB
TypeScript
117 lines
4.1 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Search, Truck, Package, MapPin, CheckCircle2 } from "lucide-react";
|
|
|
|
import { NavBar } from "@/components/navbar";
|
|
import { Footer } from "@/components/footer";
|
|
|
|
export default function TrackingPage() {
|
|
const [orderId, setOrderId] = useState("");
|
|
const [order, setOrder] = useState<any>(null);
|
|
const [error, setError] = useState(false);
|
|
|
|
const handleSearch = () => {
|
|
const data = localStorage.getItem(`order_${orderId.toUpperCase()}`);
|
|
if (data) {
|
|
setOrder(JSON.parse(data));
|
|
setError(false);
|
|
} else {
|
|
setOrder(null);
|
|
setError(true);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<main>
|
|
<NavBar />
|
|
<Container className="py-32 max-w-3xl">
|
|
<div className="text-center mb-12">
|
|
<Heading>Rastrea tu Pedido</Heading>
|
|
<p className="text-neutral-600 mt-4">Ingresa tu número de orden o guía para conocer el estado de tu envío</p>
|
|
</div>
|
|
|
|
<div className="flex gap-2 mb-12">
|
|
<Input
|
|
placeholder="Ej: PAL-X1Y2Z3 o ID de Orden"
|
|
value={orderId}
|
|
onChange={(e) => setOrderId(e.target.value)}
|
|
className="h-12"
|
|
/>
|
|
<Button onClick={handleSearch} className="h-12 px-8">
|
|
<Search className="w-4 h-4 mr-2" /> Buscar
|
|
</Button>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="p-4 bg-red-50 text-red-600 rounded-lg text-center">
|
|
No se encontró ningún pedido con ese número. Por favor verifica tus datos.
|
|
</div>
|
|
)}
|
|
|
|
{order && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex justify-between items-center">
|
|
<span>Detalles del Envío</span>
|
|
<span className="text-sm font-normal text-neutral-500">Orden #{orderId}</span>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-8">
|
|
<div className="relative">
|
|
<div className="absolute left-4 top-0 bottom-0 w-0.5 bg-neutral-200"></div>
|
|
|
|
<TrackingStep
|
|
active={true}
|
|
done={true}
|
|
icon={<CheckCircle2 className="w-5 h-5" />}
|
|
title="Pedido Recibido"
|
|
date={new Date(order.date).toLocaleDateString()}
|
|
/>
|
|
<TrackingStep
|
|
active={order.status !== "Pendiente"}
|
|
done={order.status !== "Pendiente"}
|
|
icon={<Package className="w-5 h-5" />}
|
|
title="Pago Confirmado"
|
|
date="Verificado"
|
|
/>
|
|
<TrackingStep
|
|
active={order.status === "Enviado" || order.status === "Entregado"}
|
|
done={order.status === "Enviado" || order.status === "Entregado"}
|
|
icon={<Truck className="w-5 h-5" />}
|
|
title="En Camino"
|
|
date={order.trackingNumber}
|
|
/>
|
|
<TrackingStep
|
|
active={order.status === "Entregado"}
|
|
done={order.status === "Entregado"}
|
|
icon={<MapPin className="w-5 h-5" />}
|
|
title="Entregado"
|
|
date="Destino Final"
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</Container>
|
|
<Footer />
|
|
</main>
|
|
);
|
|
}
|
|
|
|
function TrackingStep({ active, done, icon, title, date }: any) {
|
|
return (
|
|
<div className={`relative pl-12 pb-8 last:pb-0 ${active ? 'text-neutral-900' : 'text-neutral-400'}`}>
|
|
<div className={`absolute left-0 w-8 h-8 rounded-full flex items-center justify-center z-10 ${done ? 'bg-green-600 text-white' : active ? 'bg-blue-600 text-white' : 'bg-neutral-200 text-neutral-500'}`}>
|
|
{icon}
|
|
</div>
|
|
<h4 className="font-bold">{title}</h4>
|
|
<p className="text-sm">{date}</p>
|
|
</div>
|
|
);
|
|
}
|