87 lines
3.8 KiB
TypeScript
87 lines
3.8 KiB
TypeScript
import { PartyPopper, Sparkles } from "lucide-react";
|
|
import { nombreCertificado, type Certificado, type PasajeroDatos } from "@/lib/reserva-flujo";
|
|
|
|
export function Paso4Certificados({
|
|
pasajeros,
|
|
certificados,
|
|
setCertificado,
|
|
finalizar,
|
|
finalizado,
|
|
}: {
|
|
pasajeros: PasajeroDatos[];
|
|
certificados: Certificado[];
|
|
setCertificado: (i: number, parcial: Partial<Certificado>) => void;
|
|
finalizar: () => void;
|
|
finalizado: boolean;
|
|
}) {
|
|
return (
|
|
<div className="space-y-6">
|
|
<section className="rounded-3xl bg-ink p-6 text-center text-ink-foreground shadow-lift animate-in fade-in-0 zoom-in-95">
|
|
<PartyPopper className="mx-auto size-8 text-brand" />
|
|
<h2 className="mt-2 text-2xl font-bold">¡Lugares Confirmados!</h2>
|
|
<p className="mt-1 text-sm opacity-80">
|
|
Personaliza los certificados de vuelo de cada pasajero antes de emitir los pases.
|
|
</p>
|
|
</section>
|
|
|
|
<section className="rounded-3xl bg-card p-5 shadow-soft">
|
|
<h3 className="flex items-center gap-2 text-base font-bold">
|
|
<Sparkles className="size-4 text-secondary" /> Certificados de vuelo
|
|
</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Si dejas el nombre vacío usaremos el registrado en el paso 2.
|
|
</p>
|
|
|
|
<div className="mt-4 space-y-4">
|
|
{pasajeros.map((p, i) => {
|
|
const cert = certificados[i];
|
|
const fallback = nombreCertificado(undefined, p, i);
|
|
return (
|
|
<div key={i} className="rounded-3xl border border-border p-4 transition-shadow hover:shadow-soft">
|
|
<p className="mb-3 text-xs font-bold uppercase tracking-wide text-primary">Pasajero {i + 1}</p>
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
<div>
|
|
<label className="mb-1.5 block text-xs text-muted-foreground">
|
|
¿Cómo aparecerá el nombre en el certificado de vuelo?
|
|
</label>
|
|
<input
|
|
value={cert?.nombre ?? ""}
|
|
onChange={(e) => setCertificado(i, { nombre: e.target.value })}
|
|
placeholder={fallback}
|
|
className="w-full rounded-2xl border border-border bg-card px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="mb-1.5 block text-xs text-muted-foreground">
|
|
Frase adicional (opcional)
|
|
</label>
|
|
<input
|
|
value={cert?.frase ?? ""}
|
|
onChange={(e) => setCertificado(i, { frase: e.target.value })}
|
|
placeholder="Ej. 'Para la mejor persona'"
|
|
className="w-full rounded-2xl border border-border bg-card px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<p className="mt-3 rounded-2xl bg-accent/60 px-4 py-2.5 text-xs text-foreground">
|
|
Vista previa: <span className="font-bold">{nombreCertificado(cert, p, i)}</span>
|
|
{cert?.frase?.trim() ? ` — “${cert.frase.trim()}”` : ""}
|
|
</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={finalizar}
|
|
disabled={finalizado}
|
|
className="mt-6 w-full rounded-2xl bg-primary px-4 py-3.5 text-sm font-bold text-primary-foreground transition-all hover:-translate-y-0.5 hover:shadow-lift active:scale-[0.99] disabled:opacity-50"
|
|
>
|
|
{finalizado ? "Pases emitidos" : "Finalizar Reservación y Emitir Pases"}
|
|
</button>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|