62 lines
2.6 KiB
TypeScript
62 lines
2.6 KiB
TypeScript
import { useState } from "react";
|
|
import { BellRing, Loader2, X } from "lucide-react";
|
|
import {
|
|
ocultarBannerPush,
|
|
suscribirTokenPush,
|
|
useNotificacionesPush,
|
|
} from "@/lib/notificacionesService";
|
|
import { notificar } from "@/lib/notificaciones";
|
|
|
|
/** Banner discreto que invita al socio a activar las notificaciones push. */
|
|
export function BannerPush() {
|
|
const { token, bannerOculto, permiso } = useNotificacionesPush();
|
|
const [activando, setActivando] = useState(false);
|
|
|
|
if (token || bannerOculto) return null;
|
|
|
|
return (
|
|
<section className="mb-5 grid gap-3 rounded-3xl border border-border bg-card p-4 shadow-soft sm:grid-cols-[auto_minmax(0,1fr)_auto] sm:items-center">
|
|
<span className="grid size-11 shrink-0 place-items-center rounded-2xl bg-accent/60 text-primary">
|
|
<BellRing className="size-5" />
|
|
</span>
|
|
<div className="min-w-0">
|
|
<p className="break-words text-sm font-bold leading-tight">Activa las notificaciones de vuelos</p>
|
|
<p className="break-words text-xs text-muted-foreground">
|
|
Recibe avisos de reservas confirmadas, cambios por clima y promociones exclusivas.
|
|
</p>
|
|
</div>
|
|
<div className="flex shrink-0 items-center gap-2">
|
|
<button
|
|
type="button"
|
|
disabled={activando || permiso === "unsupported"}
|
|
onClick={async () => {
|
|
setActivando(true);
|
|
const res = await suscribirTokenPush();
|
|
setActivando(false);
|
|
notificar(
|
|
res.ok ? "Notificaciones activadas" : "No pudimos activarlas",
|
|
res.ok
|
|
? "Registramos tu dispositivo para recibir avisos de vuelos."
|
|
: res.motivo === "unsupported"
|
|
? "Tu navegador no admite notificaciones."
|
|
: "Debes permitir las notificaciones en tu navegador.",
|
|
);
|
|
}}
|
|
className="flex flex-1 items-center justify-center gap-2 rounded-2xl bg-primary px-4 py-3 text-sm font-bold text-primary-foreground transition-all hover:-translate-y-0.5 hover:shadow-lift active:scale-[0.99] disabled:opacity-60 sm:flex-none"
|
|
>
|
|
{activando && <Loader2 className="size-4 animate-spin" />}
|
|
{activando ? "Activando…" : "Activar"}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={ocultarBannerPush}
|
|
aria-label="Descartar aviso"
|
|
className="grid size-11 shrink-0 place-items-center rounded-2xl border border-border transition-colors hover:bg-muted"
|
|
>
|
|
<X className="size-4" />
|
|
</button>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|