80 lines
2.6 KiB
JavaScript
80 lines
2.6 KiB
JavaScript
import { useEffect, useState } from 'react'
|
|
import { Link, useLocation } from 'react-router-dom'
|
|
import { initAnalytics, trackPageView } from '../services/analytics'
|
|
|
|
export default function CookieBanner() {
|
|
const location = useLocation()
|
|
|
|
const [consent, setConsent] = useState(() =>
|
|
localStorage.getItem('cookieConsent')
|
|
)
|
|
|
|
const visible = consent === null
|
|
|
|
// Si le consentement avait déjà été donné lors d'une précédente visite,
|
|
// Analytics est initialisé au chargement de l'application.
|
|
useEffect(() => {
|
|
if (consent !== 'accepted') return
|
|
|
|
initAnalytics()
|
|
trackPageView(location.pathname + location.search)
|
|
}, [consent, location.pathname, location.search])
|
|
|
|
const handleChoice = (choice) => {
|
|
localStorage.setItem('cookieConsent', choice)
|
|
setConsent(choice)
|
|
|
|
if (choice === 'accepted') {
|
|
initAnalytics()
|
|
trackPageView(location.pathname + location.search)
|
|
}
|
|
}
|
|
|
|
if (!visible) return null
|
|
|
|
return (
|
|
<div className="fixed bottom-0 left-0 right-0 z-50 px-4 py-4 bg-white border-t border-gray-200 shadow-lg">
|
|
<div className="max-w-5xl mx-auto flex flex-col sm:flex-row items-start sm:items-center gap-4">
|
|
|
|
<div className="flex-1">
|
|
<p className="text-sm font-semibold text-gray-800 mb-1">
|
|
Gestion des cookies
|
|
</p>
|
|
|
|
<p className="text-xs text-gray-500 leading-relaxed">
|
|
Les cookies strictement nécessaires au fonctionnement du site sont
|
|
utilisés automatiquement. Avec votre accord, nous utilisons également
|
|
Google Analytics afin de mesurer l'audience et améliorer le site. Vous
|
|
pouvez accepter ou refuser ces cookies statistiques. Consultez notre{' '}
|
|
<Link
|
|
to="/confidentialite"
|
|
className="text-[#006B6B] hover:underline"
|
|
>
|
|
politique de confidentialité
|
|
</Link>.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex gap-2 flex-shrink-0 w-full sm:w-auto">
|
|
<button
|
|
type="button"
|
|
onClick={() => handleChoice('refused')}
|
|
className="flex-1 sm:flex-none border border-gray-300 text-gray-600 hover:bg-gray-50 text-sm font-medium px-4 py-2.5 rounded-lg transition-colors"
|
|
>
|
|
Refuser
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => handleChoice('accepted')}
|
|
className="flex-1 sm:flex-none bg-[#006B6B] hover:bg-[#005959] text-white text-sm font-medium px-4 py-2.5 rounded-lg transition-colors"
|
|
>
|
|
Accepter
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|