Inna
57e91480d1
El botón Personalizar del banner ahora despliega un panel con checkboxes por
categoría (Necesarias fija+desactivada, Analíticas, Marketing) y «Guardar
preferencias», tal como el markup del usuario. Al guardar, escribe la cookie
uw_cookie_consent con la selección granular y sincroniza con Zaraz. Categorías
alineadas a las del panel (Necesarias/Analíticas/Marketing); ConsentStatus y
acceptAll/rejectAll usan las mismas. Estilos del panel en globals.css.
Verificado: Personalizar abre el panel, marcar Analíticas + Guardar deja la
cookie {necessary,analytics:true,marketing:false} y /cookies lo refleja.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
266 lines
10 KiB
TypeScript
266 lines
10 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { Link } from '@/i18n/navigation'
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// API de consentimiento de Cloudflare Zaraz (se inyecta cuando el dominio pasa
|
|
// por el proxy de Cloudflare con Zaraz Consent activado).
|
|
// ---------------------------------------------------------------------------
|
|
interface ZarazConsent {
|
|
modal?: boolean
|
|
APIReady?: boolean
|
|
setAll?: (status: boolean) => void
|
|
getAll?: () => Record<string, boolean>
|
|
sendQueuedEvents?: () => void
|
|
}
|
|
declare global {
|
|
interface Window {
|
|
zaraz?: { consent?: ZarazConsent }
|
|
UWCookies?: {
|
|
showBanner: () => void
|
|
revokeConsent: () => void
|
|
acceptAll: () => void
|
|
rejectAll: () => void
|
|
}
|
|
}
|
|
}
|
|
|
|
// Categorías de consentimiento (necesarias siempre activas).
|
|
type Category = { key: string; label: string; always?: boolean; desc?: string }
|
|
export const CONSENT_CATEGORIES: readonly Category[] = [
|
|
{ key: 'necessary', label: 'Necesarias', always: true, desc: 'Esenciales para el funcionamiento del sitio. No se pueden desactivar.' },
|
|
{ key: 'analytics', label: 'Analíticas', desc: 'Nos ayudan a entender cómo usas el sitio para mejorarlo.' },
|
|
{ key: 'marketing', label: 'Marketing', desc: 'Se utilizan para mostrarte anuncios relevantes.' },
|
|
]
|
|
|
|
type Consent = Record<string, boolean>
|
|
const CONSENT_COOKIE = 'uw_cookie_consent'
|
|
const CONSENT_EVENT = 'uw:consentchange'
|
|
const SHOW_EVENT = 'uw:showbanner'
|
|
|
|
function zaraz(): ZarazConsent | undefined {
|
|
return typeof window !== 'undefined' ? window.zaraz?.consent : undefined
|
|
}
|
|
|
|
/** Lee la preferencia guardada en la cookie uw_cookie_consent. */
|
|
function readConsent(): Consent | null {
|
|
if (typeof document === 'undefined') return null
|
|
const m = document.cookie.match(/(?:^|; )uw_cookie_consent=([^;]*)/)
|
|
if (!m) return null
|
|
try {
|
|
return JSON.parse(decodeURIComponent(m[1])) as Consent
|
|
} catch {
|
|
return null
|
|
}
|
|
}
|
|
|
|
function writeConsent(c: Consent) {
|
|
const maxAge = 60 * 60 * 24 * 365 // 1 año
|
|
document.cookie = `${CONSENT_COOKIE}=${encodeURIComponent(JSON.stringify(c))}; path=/; max-age=${maxAge}; SameSite=Lax`
|
|
// Sincroniza con Cloudflare Zaraz si está presente (control granular real lo
|
|
// gestiona el panel de Zaraz; aquí aplicamos aceptar/rechazar todo).
|
|
const nonNecessary = CONSENT_CATEGORIES.some((cat) => !cat.always && c[cat.key])
|
|
zaraz()?.setAll?.(nonNecessary)
|
|
zaraz()?.sendQueuedEvents?.()
|
|
window.dispatchEvent(new CustomEvent(CONSENT_EVENT))
|
|
}
|
|
|
|
function allFlags(value: boolean): Consent {
|
|
const c: Consent = {}
|
|
for (const cat of CONSENT_CATEGORIES) c[cat.key] = cat.always ? true : value
|
|
return c
|
|
}
|
|
|
|
function acceptAll() {
|
|
writeConsent(allFlags(true))
|
|
}
|
|
function rejectAll() {
|
|
writeConsent(allFlags(false))
|
|
}
|
|
function showBanner() {
|
|
window.dispatchEvent(new CustomEvent(SHOW_EVENT))
|
|
}
|
|
function revokeConsent() {
|
|
// Borra la cookie, retira en Zaraz y reabre el banner.
|
|
document.cookie = `${CONSENT_COOKIE}=; path=/; max-age=0; SameSite=Lax`
|
|
zaraz()?.setAll?.(false)
|
|
window.dispatchEvent(new CustomEvent(CONSENT_EVENT))
|
|
showBanner()
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Banner de consentimiento (fijo abajo, en todo el sitio).
|
|
// ---------------------------------------------------------------------------
|
|
export function CookieBanner() {
|
|
const [visible, setVisible] = useState(false)
|
|
const [details, setDetails] = useState(false)
|
|
// Estado de los checkboxes granulares (categorías no necesarias).
|
|
const [prefs, setPrefs] = useState<Consent>({ analytics: false, marketing: false })
|
|
|
|
useEffect(() => {
|
|
window.UWCookies = { showBanner, revokeConsent, acceptAll, rejectAll }
|
|
// Precarga los checkboxes con lo ya guardado (si lo hay).
|
|
const saved = readConsent()
|
|
if (saved) setPrefs({ analytics: !!saved.analytics, marketing: !!saved.marketing })
|
|
else setVisible(true) // Aparece si aún no hay decisión guardada.
|
|
const onShow = () => {
|
|
const cur = readConsent()
|
|
if (cur) setPrefs({ analytics: !!cur.analytics, marketing: !!cur.marketing })
|
|
setDetails(false)
|
|
setVisible(true)
|
|
}
|
|
const onChange = () => {
|
|
if (readConsent()) setVisible(false)
|
|
}
|
|
window.addEventListener(SHOW_EVENT, onShow)
|
|
window.addEventListener(CONSENT_EVENT, onChange)
|
|
return () => {
|
|
window.removeEventListener(SHOW_EVENT, onShow)
|
|
window.removeEventListener(CONSENT_EVENT, onChange)
|
|
}
|
|
}, [])
|
|
|
|
if (!visible) return null
|
|
|
|
function savePrefs() {
|
|
writeConsent({ necessary: true, analytics: !!prefs.analytics, marketing: !!prefs.marketing })
|
|
setVisible(false)
|
|
}
|
|
|
|
return (
|
|
<div className="uw-cookie-content" role="dialog" aria-label="Consentimiento de cookies">
|
|
<div className="uw-cookie-text">
|
|
<h3>Utilizamos cookies</h3>
|
|
<p>Este sitio utiliza cookies propias y de terceros para garantizar el funcionamiento del sitio, analizar el tráfico y ofrecerte publicidad personalizada. Consulta nuestra política de cookies para más información.</p>
|
|
<Link href="/cookies" className="uw-cookie-link">Política de Cookies</Link>
|
|
|
|
{details && (
|
|
<div className="uw-cookie-details" style={{ display: 'block' }}>
|
|
<div className="uw-cookie-category">
|
|
<label>
|
|
<input type="checkbox" checked disabled readOnly />
|
|
<span className="uw-cookie-cat-name">Necesarias</span>
|
|
</label>
|
|
<p>Esenciales para el funcionamiento del sitio. No se pueden desactivar.</p>
|
|
</div>
|
|
<div className="uw-cookie-category">
|
|
<label>
|
|
<input type="checkbox" id="uw-cookie-analytics" checked={!!prefs.analytics} onChange={(e) => setPrefs((s) => ({ ...s, analytics: e.target.checked }))} />
|
|
<span className="uw-cookie-cat-name">Analíticas</span>
|
|
</label>
|
|
<p>Nos ayudan a entender cómo usas el sitio para mejorarlo.</p>
|
|
</div>
|
|
<div className="uw-cookie-category">
|
|
<label>
|
|
<input type="checkbox" id="uw-cookie-marketing" checked={!!prefs.marketing} onChange={(e) => setPrefs((s) => ({ ...s, marketing: e.target.checked }))} />
|
|
<span className="uw-cookie-cat-name">Marketing</span>
|
|
</label>
|
|
<p>Se utilizan para mostrarte anuncios relevantes.</p>
|
|
</div>
|
|
<div className="uw-cookie-actions-detail">
|
|
<button type="button" className="uw-cookie-btn uw-cookie-btn-save" data-action="save" onClick={savePrefs}>Guardar preferencias</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="uw-cookie-actions">
|
|
<button type="button" className="uw-cookie-btn uw-cookie-btn-reject" data-action="reject" onClick={() => { rejectAll(); setVisible(false) }}>Rechazar</button>
|
|
<button type="button" className="uw-cookie-btn uw-cookie-btn-customize" data-action="customize" onClick={() => setDetails((v) => !v)}>Personalizar</button>
|
|
<button type="button" className="uw-cookie-btn uw-cookie-btn-accept" data-action="accept" onClick={() => { acceptAll(); setVisible(false) }}>Aceptar todas</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Botones «Cambiar / Retirar consentimiento» de la página /cookies.
|
|
// ---------------------------------------------------------------------------
|
|
export function CookieConsentButtons() {
|
|
useEffect(() => {
|
|
window.UWCookies = { showBanner, revokeConsent, acceptAll, rejectAll }
|
|
}, [])
|
|
return (
|
|
<div className="uw-consent-buttons">
|
|
<button type="button" onClick={showBanner} className="btn-uw btn-uw-form">
|
|
Cambiar consentimiento
|
|
</button>
|
|
<button type="button" onClick={revokeConsent} className="btn-uw btn-uw-form btn-uw-secondary">
|
|
Retirar consentimiento
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Panel «Tu estado de consentimiento»: muestra los datos de la API de Zaraz
|
|
// (o, si Zaraz no está, la preferencia guardada en la cookie uw_cookie_consent).
|
|
// ---------------------------------------------------------------------------
|
|
export function ConsentStatus() {
|
|
const [state, setState] = useState<{ source: string; values: Consent | null }>({
|
|
source: 'cookie',
|
|
values: null,
|
|
})
|
|
|
|
useEffect(() => {
|
|
function refresh() {
|
|
const c = zaraz()
|
|
if (c?.APIReady && c.getAll) {
|
|
setState({ source: 'zaraz', values: c.getAll() })
|
|
} else {
|
|
setState({ source: 'cookie', values: readConsent() })
|
|
}
|
|
}
|
|
refresh()
|
|
window.addEventListener(CONSENT_EVENT, refresh)
|
|
window.addEventListener('zarazConsentAPIReady', refresh)
|
|
window.addEventListener('zarazConsentChoicesUpdated', refresh)
|
|
return () => {
|
|
window.removeEventListener(CONSENT_EVENT, refresh)
|
|
window.removeEventListener('zarazConsentAPIReady', refresh)
|
|
window.removeEventListener('zarazConsentChoicesUpdated', refresh)
|
|
}
|
|
}, [])
|
|
|
|
const zarazData = state.source === 'zaraz' && state.values
|
|
const values = state.values
|
|
|
|
return (
|
|
<div className="uw-consent-status">
|
|
<p className="uw-consent-source">
|
|
{zarazData
|
|
? 'Estado actual (Cloudflare Zaraz Consent API):'
|
|
: values
|
|
? 'Estado actual (preferencia guardada):'
|
|
: 'Cloudflare Zaraz no está disponible en este dominio; aún no hay preferencia guardada.'}
|
|
</p>
|
|
<ul>
|
|
{zarazData ? (
|
|
// Datos en vivo de la API de Zaraz: cada propósito y su estado.
|
|
Object.entries(values as Consent).map(([purpose, granted]) => (
|
|
<li key={purpose}>
|
|
<span>{purpose}</span>
|
|
<span className={granted ? 'uw-consent-on' : 'uw-consent-off'}>
|
|
{granted ? 'Aceptada' : 'Rechazada'}
|
|
</span>
|
|
</li>
|
|
))
|
|
) : (
|
|
// Categorías locales (cookie uw_cookie_consent).
|
|
CONSENT_CATEGORIES.map((cat) => {
|
|
const on = cat.always || Boolean(values?.[cat.key])
|
|
return (
|
|
<li key={cat.key}>
|
|
<span>{cat.label}</span>
|
|
<span className={cat.always ? 'uw-consent-always' : on ? 'uw-consent-on' : 'uw-consent-off'}>
|
|
{cat.always ? 'Siempre activas' : values ? (on ? 'Aceptada' : 'Rechazada') : '—'}
|
|
</span>
|
|
</li>
|
|
)
|
|
})
|
|
)}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|