From 4ebe3c34d318ab8f036f523897d9fdc38291632c Mon Sep 17 00:00:00 2001
From: adevopg <adevopg@gmail.com>
Date: Mon, 13 Jul 2026 11:58:54 +0000
Subject: [PATCH] web-next: banner de consentimiento de cookies + estado de la
 API (Zaraz)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Banner real `uw-cookie-content` (Rechazar/Personalizar/Aceptar todas) fijo
  abajo y site-wide (montado en el layout, componente CookieBanner). Aparece
  en la primera visita, guarda la decisión en la cookie uw_cookie_consent (1
  año) y se sincroniza con Cloudflare Zaraz si está presente
  (zaraz.consent.setAll / .modal). Estilos en globals.css.
- «Personalizar» abre el modal granular de Zaraz (o /cookies si no hay Zaraz).
- window.UWCookies {showBanner, revokeConsent, acceptAll, rejectAll}.
- Página /cookies: panel «Tu estado de consentimiento» (ConsentStatus) que
  muestra los datos EN VIVO de la API de Zaraz (zaraz.consent.getAll()) por
  propósito; si Zaraz no está, cae a la preferencia guardada por categoría.

Verificado con navegador: el banner aparece, «Aceptar todas» lo oculta y
escribe la cookie, y el panel de /cookies refleja el estado.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web-next/app/[locale]/cookies/page.tsx |   3 +-
 web-next/app/[locale]/layout.tsx       |   2 +
 web-next/app/globals.css               | 102 ++++++++++++
 web-next/components/CookieConsent.tsx  | 214 ++++++++++++++++++++++---
 4 files changed, 298 insertions(+), 23 deletions(-)

diff --git a/web-next/app/[locale]/cookies/page.tsx b/web-next/app/[locale]/cookies/page.tsx
index c76924d..0150fdb 100644
--- a/web-next/app/[locale]/cookies/page.tsx
+++ b/web-next/app/[locale]/cookies/page.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from 'next'
 import { Link } from '@/i18n/navigation'
-import { CookieConsentButtons } from '@/components/CookieConsent'
+import { CookieConsentButtons, ConsentStatus } from '@/components/CookieConsent'
 
 export const metadata: Metadata = {
   title: 'Declaración de Cookies',
@@ -163,6 +163,7 @@ export default function CookiesPage() {
               <span>Tu estado de consentimiento</span>
               <p>Puedes cambiar o retirar tu consentimiento en cualquier momento. Al contactarnos respecto a su consentimiento, por favor, indique la fecha de su consentimiento.</p>
 
+              <ConsentStatus />
               <CookieConsentButtons />
               <br />
               <hr />
diff --git a/web-next/app/[locale]/layout.tsx b/web-next/app/[locale]/layout.tsx
index 81a6295..728c873 100644
--- a/web-next/app/[locale]/layout.tsx
+++ b/web-next/app/[locale]/layout.tsx
@@ -7,6 +7,7 @@ import { Header } from '@/components/Header'
 import { Video } from '@/components/Video'
 import { Social } from '@/components/Social'
 import { Footer } from '@/components/Footer'
+import { CookieBanner } from '@/components/CookieConsent'
 import '../globals.css'
 
 export function generateStaticParams() {
@@ -73,6 +74,7 @@ export default async function LocaleLayout({
           {children}
           <Social />
           <Footer />
+          <CookieBanner />
         </NextIntlClientProvider>
       </body>
     </html>
diff --git a/web-next/app/globals.css b/web-next/app/globals.css
index a82b969..a6700c4 100644
--- a/web-next/app/globals.css
+++ b/web-next/app/globals.css
@@ -197,6 +197,108 @@ textarea:focus {
   color: #fff;
 }
 
+/* Banner de consentimiento de cookies (fijo abajo). */
+.uw-cookie-content {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  flex-wrap: wrap;
+  padding: 16px 24px;
+  background: #140d08;
+  border-top: 2px solid #4a3320;
+  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.55);
+}
+.uw-cookie-text {
+  flex: 1 1 420px;
+}
+.uw-cookie-text h3 {
+  color: #d79602;
+  margin-bottom: 6px;
+}
+.uw-cookie-text p {
+  color: #b1997f;
+  font-size: 14px;
+  line-height: 20px;
+}
+.uw-cookie-link {
+  display: inline-block;
+  margin-top: 6px;
+  color: #2471a9;
+}
+.uw-cookie-actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.uw-cookie-btn {
+  border: 2px solid #352e2b;
+  background: hsla(0, 0%, 100%, 0.05);
+  color: #ebdec2;
+  padding: 9px 16px;
+  cursor: pointer;
+  text-transform: uppercase;
+  font-size: 14px;
+  transition: 0.3s;
+}
+.uw-cookie-btn:hover {
+  background: hsla(0, 0%, 100%, 0.1);
+  color: #fff;
+}
+.uw-cookie-btn-accept {
+  border-color: #b17c02;
+  color: #f0b93f;
+}
+.uw-cookie-btn-accept:hover {
+  background: hsla(40, 90%, 45%, 0.15);
+  color: #fff;
+}
+.uw-cookie-btn-reject {
+  border-color: #5c2b2b;
+  color: #d98c8c;
+}
+
+/* Panel «Tu estado de consentimiento» en /cookies (datos de la API de Zaraz). */
+.uw-consent-status {
+  border: 1px solid #352e2b;
+  padding: 12px 14px;
+  margin: 12px 0;
+}
+.uw-consent-status .uw-consent-source {
+  font-size: 13px;
+  color: #7e8d09;
+  margin-bottom: 8px;
+}
+.uw-consent-status ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.uw-consent-status li {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 4px 0;
+  border-bottom: 1px solid #241812;
+}
+.uw-consent-status li:last-child {
+  border-bottom: 0;
+}
+.uw-consent-on {
+  color: #6aa84f;
+}
+.uw-consent-off {
+  color: #cc5b5b;
+}
+.uw-consent-always {
+  color: #b1997f;
+}
+
 /* Colores de clase de WoW (nombre de personaje) */
 .class-warrior { color: #c79c6e; }
 .class-paladin { color: #f58cba; }
diff --git a/web-next/components/CookieConsent.tsx b/web-next/components/CookieConsent.tsx
index 0d50aaf..f67c728 100644
--- a/web-next/components/CookieConsent.tsx
+++ b/web-next/components/CookieConsent.tsx
@@ -1,50 +1,148 @@
 'use client'
 
-import { useEffect } from 'react'
+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 }
+    UWCookies?: {
+      showBanner: () => void
+      revokeConsent: () => void
+      acceptAll: () => void
+      rejectAll: () => void
+    }
   }
 }
 
-/** Abre el modal de consentimiento de Zaraz. */
-function showBanner() {
-  const c = typeof window !== 'undefined' ? window.zaraz?.consent : undefined
+// Categorías de consentimiento (necesarias siempre activas).
+type Category = { key: string; label: string; always?: boolean }
+export const CONSENT_CATEGORIES: readonly Category[] = [
+  { key: 'necessary', label: 'Necesarias', always: true },
+  { key: 'preferences', label: 'Preferencias' },
+  { key: 'analytics', label: 'Analíticas' },
+  { key: 'marketing', label: 'Marketing' },
+]
+
+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))
+}
+/** Abre el modal granular de Zaraz; si no está, lleva a la página de cookies. */
+function customize() {
+  const c = zaraz()
   if (c) c.modal = true
-  else console.warn('[UWCookies] Zaraz no disponible (el sitio debe pasar por Cloudflare con Zaraz Consent activado).')
+  else if (typeof window !== 'undefined') window.location.href = '/cookies'
+}
+function showBanner() {
+  window.dispatchEvent(new CustomEvent(SHOW_EVENT))
 }
-
-/** Retira el consentimiento (pone todos los propósitos a false) y reabre el modal. */
 function revokeConsent() {
-  const c = typeof window !== 'undefined' ? window.zaraz?.consent : undefined
-  if (c?.setAll) {
-    c.setAll(false)
-    c.modal = true
-  } else {
-    console.warn('[UWCookies] Zaraz no disponible; no se puede retirar el consentimiento.')
-  }
+  // 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()
 }
 
-/**
- * Botones de consentimiento de la página /cookies. Cablean el sistema de
- * Cloudflare Zaraz y exponen window.UWCookies (showBanner/revokeConsent) para
- * el resto del sitio.
- */
-export function CookieConsentButtons() {
+// ---------------------------------------------------------------------------
+// Banner de consentimiento (fijo abajo, en todo el sitio).
+// ---------------------------------------------------------------------------
+export function CookieBanner() {
+  const [visible, setVisible] = useState(false)
+
   useEffect(() => {
-    window.UWCookies = { showBanner, revokeConsent }
+    window.UWCookies = { showBanner, revokeConsent, acceptAll, rejectAll }
+    // Aparece si aún no hay decisión guardada.
+    if (!readConsent()) setVisible(true)
+    const onShow = () => 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
+
+  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>
+      </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={customize}>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">
@@ -56,3 +154,75 @@ export function CookieConsentButtons() {
     </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>
+  )
+}