@agence-zef/astro 0.7.1 → 0.8.0

package/components/CookieBanner.astro

@@ -1,12 +1,17 @@
 ---
 /**
- * Bandeau cookies (C-28, CNIL), sans style imposé : réglages lus à l'exécution au CMS.
- * « Tout refuser » au même niveau que « Tout accepter », choix par catégorie, gardé 6 mois
- * (redemandé si les catégories changent). Google Analytics 4 (`gaId`) n'est chargé
- * qu'après accord sur « Mesure d'audience ». Un élément `data-zef-cookies` (lien « Gérer
- * les cookies » du footer) rouvre le bandeau. Le choix est publié dans `window.zefConsent`
- * et l'événement `zef:consent`. À placer une fois dans le gabarit, avant `</body>`.
+ * Bandeau cookies (C-28, CNIL) avec vanilla-cookieconsent : encart en bas à droite, réglages
+ * lus à l'exécution au CMS. « Tout refuser » au même niveau que « Tout accepter », choix par
+ * catégorie dans « Personnaliser » (aucune catégorie facultative cochée d'avance), gardé 6 mois
+ * dans le cookie `zef-consent` (redemandé si les catégories changent). Google Analytics 4
+ * (`gaId`) n'est chargé qu'après accord sur « Mesure d'audience » ; un retrait efface ses
+ * cookies `_ga*` et recharge la page. Un élément `data-zef-cookies` (lien « Gérer les cookies »
+ * du footer) rouvre les préférences. Le choix est publié dans `window.zefConsent` et
+ * l'événement `zef:consent`. À placer une fois dans le gabarit, avant `</body>`. Habillage :
+ * variables `--zef-*` (`@agence-zef/astro/styles.css`) ou `--cc-*` de vanilla-cookieconsent.
  */
+import "vanilla-cookieconsent/dist/cookieconsent.css";
+
 interface Props {
 	/** Identifiant de mesure GA4 (`G-XXXXXXX`), chargé seulement après accord. */
 	gaId?: string | null;
@@ -20,6 +25,8 @@ const locale = Astro.currentLocale ?? "";
 {cms && <div data-zef-cookie-banner={`${cms}/api/public/cookies`} data-locale={locale} data-ga={gaId ?? undefined} hidden />}
 
 <script>
+	import * as CookieConsent from "vanilla-cookieconsent";
+
 	type Texts = {
 		title: string;
 		message: string;
@@ -30,7 +37,6 @@ const locale = Astro.currentLocale ?? "";
 		policyUrl: string | null;
 	};
 	type Banner = {
-		layout: string;
 		consentDays: number;
 		version: string;
 		texts: Record<string, Texts>;
@@ -44,13 +50,12 @@ const locale = Astro.currentLocale ?? "";
 	};
 	type Consent = { version: string; at: number; choices: Record<string, boolean> };
 
-	const KEY = "zef-consent";
-	const read = (): Consent | null => {
-		try {
-			return JSON.parse(localStorage.getItem(KEY) ?? "null");
-		} catch {
-			return null;
-		}
+	/** Catégorie qui porte Google Analytics 4. */
+	const ANALYTICS = "mesure";
+
+	const UI: Record<string, { save: string; close: string }> = {
+		fr: { save: "Enregistrer mes choix", close: "Fermer" },
+		en: { save: "Save my choices", close: "Close" },
 	};
 
 	function loadGa(id: string) {
@@ -69,17 +74,14 @@ const locale = Astro.currentLocale ?? "";
 		w.gtag("config", id, { anonymize_ip: true });
 	}
 
-	function apply(consent: Consent, gaId: string | undefined) {
-		(window as unknown as { zefConsent: Consent }).zefConsent = consent;
-		document.dispatchEvent(new CustomEvent("zef:consent", { detail: consent.choices }));
-		if (gaId && consent.choices.mesure) loadGa(gaId);
-	}
+	const escape = (text: string) =>
+		text.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c] ?? c);
 
-	function el<K extends keyof HTMLElementTagNameMap>(tag: K, className: string, text?: string) {
-		const node = document.createElement(tag);
-		node.className = className;
-		if (text !== undefined) node.textContent = text;
-		return node;
+	/** Numéro de révision (entier ≥ 1) tiré de la liste des catégories. */
+	function revision(version: string) {
+		let hash = 0;
+		for (const char of version) hash = (hash * 31 + char.charCodeAt(0)) % 1_000_000;
+		return hash + 1;
 	}
 
 	async function start(root: HTMLElement) {
@@ -92,90 +94,97 @@ const locale = Astro.currentLocale ?? "";
 		}
 		if (!banner) return;
 		const b = banner;
-		const locale = root.dataset.locale || document.documentElement.lang || "fr";
-		const texts = b.texts[locale] ?? Object.values(b.texts)[0];
-		const pick = (v: Record<string, string>) => v[locale] || Object.values(v)[0] || "";
-
-		const save = (choices: Record<string, boolean>) => {
-			const consent = { version: b.version, at: Date.now(), choices };
-			try {
-				localStorage.setItem(KEY, JSON.stringify(consent));
-			} catch {
-				// Navigation privée : le choix vaut pour la page.
-			}
-			apply(consent, gaId);
-			document.querySelector(".zef-cookies")?.remove();
-		};
-		const all = (value: boolean) =>
-			Object.fromEntries(b.categories.map((c) => [c.key, c.required || value]));
-
-		const show = (customize = false) => {
-			document.querySelector(".zef-cookies")?.remove();
-			const current = read();
-			const box = el("section", "zef-cookies");
-			box.dataset.layout = b.layout;
-			box.setAttribute("role", "dialog");
-			box.setAttribute("aria-label", texts.title);
-			box.append(el("h2", "zef-cookies__title", texts.title), el("p", "zef-cookies__message", texts.message));
-			if (texts.policyUrl) {
-				const a = el("a", "zef-cookies__policy", texts.policyLabel);
-				a.href = texts.policyUrl;
-				box.append(a);
-			}
-			const boxes = new Map<string, HTMLInputElement>();
-			if (customize) {
-				const list = el("ul", "zef-cookies__categories");
-				for (const c of b.categories) {
-					const item = el("li", "zef-cookies__category");
-					const label = el("label", "zef-cookies__check");
-					const input = document.createElement("input");
-					input.type = "checkbox";
-					input.checked = c.required || Boolean(current?.choices[c.key]);
-					input.disabled = c.required;
-					boxes.set(c.key, input);
-					label.append(input, el("span", "", pick(c.label)));
-					item.append(label, el("p", "zef-cookies__description", pick(c.description)));
-					if (c.services) item.append(el("p", "zef-cookies__services", c.services));
-					list.append(item);
-				}
-				box.append(list);
-			}
-			const actions = el("div", "zef-cookies__actions");
-			const button = (text: string, kind: string, onClick: () => void) => {
-				const btn = el("button", "zef-cookies__button", text);
-				btn.type = "button";
-				btn.dataset.kind = kind;
-				btn.addEventListener("click", onClick);
-				actions.append(btn);
+		const locales = Object.keys(b.texts);
+		const wanted = root.dataset.locale || document.documentElement.lang || "fr";
+		const locale = locales.includes(wanted) ? wanted : locales[0];
+
+		const apply = () => {
+			const consent: Consent = {
+				version: b.version,
+				at: Date.now(),
+				choices: Object.fromEntries(
+					b.categories.map((c) => [c.key, CookieConsent.acceptedCategory(c.key)]),
+				),
 			};
-			button(texts.reject, "reject", () => save(all(false)));
-			button(texts.accept, "accept", () => save(all(true)));
-			if (customize) {
-				button(locale === "en" ? "Save my choices" : "Enregistrer mes choix", "save", () =>
-					save(Object.fromEntries([...boxes].map(([k, input]) => [k, input.checked]))),
-				);
-			} else {
-				button(texts.customize, "customize", () => show(true));
-			}
-			box.append(actions);
-			document.body.append(box);
-			box.querySelector<HTMLButtonElement>("button")?.focus();
+			(window as unknown as { zefConsent: Consent }).zefConsent = consent;
+			document.dispatchEvent(new CustomEvent("zef:consent", { detail: consent.choices }));
+			if (gaId && consent.choices[ANALYTICS]) loadGa(gaId);
 		};
 
-		// « Gérer les cookies » (footer) rouvre le bandeau avec les choix en cours.
+		const translations = Object.fromEntries(
+			locales.map((l) => {
+				const t = b.texts[l];
+				const ui = UI[l] ?? UI.fr;
+				const pick = (v: Record<string, string>) => v[l] || Object.values(v)[0] || "";
+				const policy = t.policyUrl
+					? `<a href="${escape(t.policyUrl)}">${escape(t.policyLabel)}</a>`
+					: undefined;
+				return [
+					l,
+					{
+						consentModal: {
+							title: t.title,
+							description: escape(t.message),
+							acceptAllBtn: t.accept,
+							acceptNecessaryBtn: t.reject,
+							showPreferencesBtn: t.customize,
+							footer: policy,
+						},
+						preferencesModal: {
+							title: t.title,
+							acceptAllBtn: t.accept,
+							acceptNecessaryBtn: t.reject,
+							savePreferencesBtn: ui.save,
+							closeIconLabel: ui.close,
+							sections: [
+								{ description: escape(t.message) + (policy ? ` ${policy}` : "") },
+								...b.categories.map((c) => ({
+									title: pick(c.label),
+									description:
+										escape(pick(c.description)) +
+										(c.services ? `<br><small>${escape(c.services)}</small>` : ""),
+									linkedCategory: c.key,
+								})),
+							],
+						},
+					},
+				];
+			}),
+		);
+
+		await CookieConsent.run({
+			cookie: { name: "zef-consent", expiresAfterDays: b.consentDays },
+			revision: revision(b.version),
+			guiOptions: {
+				consentModal: { layout: "box", position: "bottom right", equalWeightButtons: true },
+				preferencesModal: { layout: "box", equalWeightButtons: true },
+			},
+			categories: Object.fromEntries(
+				b.categories.map((c) => [
+					c.key,
+					c.required
+						? { enabled: true, readOnly: true }
+						: {
+								// Jamais cochée d'avance : le consentement doit être un acte positif (CNIL).
+								enabled: false,
+								...(c.key === ANALYTICS && {
+									autoClear: { cookies: [{ name: /^_ga/ }], reloadPage: true },
+								}),
+							},
+				]),
+			),
+			language: { default: locale, translations },
+			// `onConsent` part aussi à chaque page quand le choix est déjà fait.
+			onConsent: apply,
+			onChange: apply,
+		});
+
+		// « Gérer les cookies » (footer) rouvre les préférences avec les choix en cours.
 		document.addEventListener("click", (e) => {
 			if (!(e.target as Element | null)?.closest("[data-zef-cookies]")) return;
 			e.preventDefault();
-			show(true);
+			CookieConsent.showPreferences();
 		});
-
-		const current = read();
-		const valid =
-			current &&
-			current.version === b.version &&
-			Date.now() - current.at < b.consentDays * 86_400_000;
-		if (valid) apply(current, gaId);
-		else show();
 	}
 
 	const root = document.querySelector<HTMLElement>("[data-zef-cookie-banner]");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agence-zef/astro",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Intégration Astro du CMS ZEF : routes, rendu des sections, aperçu, composants réutilisables sans style.",
   "license": "MIT",
   "type": "module",
@@ -80,13 +80,14 @@
     "astro": "^6.0.0 || ^7.0.0"
   },
   "devDependencies": {
-    "astro": "^7.4.4",
-    "@types/node": "^24.0.0"
+    "@types/node": "^24.0.0",
+    "astro": "^7.4.4"
   },
   "dependencies": {
     "jiti": "^2.6.1",
-    "@agence-zef/schema": "0.7.0",
-    "@agence-zef/sdk": "0.7.0"
+    "vanilla-cookieconsent": "3.1.0",
+    "@agence-zef/schema": "0.8.0",
+    "@agence-zef/sdk": "0.8.0"
   },
   "homepage": "https://agence-zef.fr",
   "scripts": {

package/styles.css

@@ -171,7 +171,7 @@
 	font-weight: 400;
 	cursor: pointer;
 }
-:where(.zef-check, .zef-form__check, .zef-account, .zef-checkout, .zef-cart-add, .zef-cookies)
+:where(.zef-check, .zef-form__check, .zef-account, .zef-checkout, .zef-cart-add)
 	:where(input[type="checkbox"], input[type="radio"]) {
 	flex-shrink: 0;
 	width: 1.125rem;
@@ -646,6 +646,41 @@
 	}
 }
 
+/* ---------- Bandeau cookies (vanilla-cookieconsent) ---------- */
+/* Ses variables `--cc-*` suivent celles du site ; `:where()` laisse le site les redéfinir. */
+
+:where(#cc-main) {
+	--cc-font-family: var(--zef-font);
+	--cc-bg: var(--zef-surface);
+	--cc-primary-color: var(--zef-text);
+	--cc-secondary-color: var(--zef-muted);
+	--cc-link-color: var(--zef-text);
+	--cc-modal-border-radius: var(--zef-radius);
+	--cc-btn-border-radius: var(--zef-radius-small);
+	--cc-btn-primary-bg: var(--zef-accent);
+	--cc-btn-primary-color: var(--zef-on-accent);
+	--cc-btn-primary-border-color: var(--zef-accent);
+	--cc-btn-primary-hover-bg: color-mix(in srgb, var(--zef-accent) 85%, black);
+	--cc-btn-primary-hover-color: var(--zef-on-accent);
+	--cc-btn-primary-hover-border-color: color-mix(in srgb, var(--zef-accent) 85%, black);
+	--cc-btn-secondary-bg: var(--zef-surface);
+	--cc-btn-secondary-color: var(--zef-text);
+	--cc-btn-secondary-border-color: var(--zef-border-strong);
+	--cc-btn-secondary-hover-bg: var(--zef-surface-muted);
+	--cc-btn-secondary-hover-color: var(--zef-text);
+	--cc-btn-secondary-hover-border-color: var(--zef-border-strong);
+	--cc-separator-border-color: var(--zef-border);
+	--cc-toggle-on-bg: var(--zef-accent);
+	--cc-cookie-category-block-bg: var(--zef-surface-muted);
+	--cc-cookie-category-block-border: var(--zef-border);
+	--cc-cookie-category-block-hover-bg: var(--zef-surface-muted);
+	--cc-cookie-category-block-hover-border: var(--zef-border-strong);
+	--cc-footer-bg: var(--zef-surface);
+	--cc-footer-color: var(--zef-muted);
+	--cc-footer-border-color: var(--zef-border);
+	--cc-overlay-bg: var(--zef-backdrop);
+}
+
 @media (max-width: 40rem) {
 	:where(.zef-form__field[data-width="half"]) {
 		flex-basis: 100%;