98 lines
4 KiB
TypeScript
98 lines
4 KiB
TypeScript
"use client";
|
|
import { useEffect, useState } from "react";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import { ShieldCheck, X } from "lucide-react";
|
|
|
|
export default function PopupInfoSuivi({
|
|
policyUrl = "/politique-confidentialite",
|
|
storageKey = "odentas_info_suivi_ack_v1",
|
|
}: {
|
|
policyUrl?: string;
|
|
storageKey?: string;
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const alreadyAck = typeof window !== "undefined" && localStorage.getItem(storageKey);
|
|
if (!alreadyAck) {
|
|
const t = setTimeout(() => setOpen(true), 1200);
|
|
return () => clearTimeout(t);
|
|
}
|
|
}, [storageKey]);
|
|
|
|
const acknowledge = () => {
|
|
try {
|
|
localStorage.setItem(storageKey, "1");
|
|
} catch {}
|
|
setOpen(false);
|
|
};
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{open && (
|
|
<motion.aside
|
|
role="dialog"
|
|
aria-live="polite"
|
|
aria-label="Information sur la confidentialité et le suivi"
|
|
initial={{ opacity: 0, y: 24, scale: 0.98 }}
|
|
animate={{ opacity: 1, y: 0, scale: 1 }}
|
|
exit={{ opacity: 0, y: 24, scale: 0.98 }}
|
|
transition={{ type: "spring", stiffness: 380, damping: 28 }}
|
|
className="fixed left-4 bottom-4 z-[60] max-w-sm w-[92vw] sm:w-96"
|
|
>
|
|
<div className="relative overflow-hidden rounded-2xl border border-slate-200 bg-gradient-to-br from-white to-slate-50 backdrop-blur shadow-lg">
|
|
<button
|
|
type="button"
|
|
aria-label="Fermer"
|
|
onClick={() => setOpen(false)}
|
|
className="absolute right-2 top-2 inline-flex items-center justify-center rounded-full p-1.5 hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-sky-400 transition-colors"
|
|
>
|
|
<X className="h-4 w-4 text-slate-500" />
|
|
</button>
|
|
|
|
<div className="flex items-start gap-3 p-4 pr-10">
|
|
<div className="mt-0.5 shrink-0 rounded-xl bg-gradient-to-br from-sky-100 to-blue-100 p-2">
|
|
<ShieldCheck className="h-5 w-5 text-sky-700" />
|
|
</div>
|
|
<div className="text-sm leading-snug text-slate-700">
|
|
<p className="font-semibold text-slate-900 mb-1.5">Transparence & confidentialité</p>
|
|
<p>
|
|
L'Espace Paie Odentas utilise des cookies essentiels pour votre authentification et votre sécurité,
|
|
ainsi qu'un outil d'analyse (PostHog) pour améliorer nos services.
|
|
Vos données sont hébergées en France 🇫🇷 et ne sont jamais revendues.
|
|
En utilisant l'Espace Paie, vous acceptez notre{" "}
|
|
<a
|
|
href={policyUrl}
|
|
className="underline underline-offset-2 decoration-sky-400 hover:decoration-sky-600 text-sky-700 font-medium transition-colors"
|
|
target="_blank"
|
|
rel="noreferrer noopener"
|
|
>
|
|
Politique de Confidentialité
|
|
</a>
|
|
.
|
|
</p>
|
|
|
|
<div className="mt-3 flex items-center gap-2">
|
|
<button
|
|
onClick={acknowledge}
|
|
className="inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-medium shadow-sm border border-sky-200 bg-sky-50 hover:bg-sky-100 text-sky-900 focus:outline-none focus:ring-2 focus:ring-sky-400 transition-colors"
|
|
>
|
|
J'ai compris
|
|
</button>
|
|
<a
|
|
href={policyUrl}
|
|
target="_blank"
|
|
rel="noreferrer noopener"
|
|
className="text-sm text-slate-600 hover:text-slate-900 underline underline-offset-2 transition-colors"
|
|
>
|
|
En savoir plus
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.aside>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
}
|