From fa7a9c96c127a7bcf4f0290532452ebf82692b62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= Date: Thu, 23 Apr 2026 20:57:10 +0400 Subject: [PATCH] Move cookie detail labels from backend to JS SDK MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit label_description and label_duration are not user-customizable, so they don't belong in the backend translation defaults. Hardcode them in the cookie-banner SDK's i18n module instead. Signed-off-by: Émile Ré --- .../src/components/cookie-list.ts | 18 +++++++++--------- packages/cookie-banner/src/i18n.ts | 11 +++++++++++ pkg/cookiebanner/defaults.go | 8 -------- 3 files changed, 20 insertions(+), 17 deletions(-) diff --git a/packages/cookie-banner/src/components/cookie-list.ts b/packages/cookie-banner/src/components/cookie-list.ts index 29b170784..06b2c72b6 100644 --- a/packages/cookie-banner/src/components/cookie-list.ts +++ b/packages/cookie-banner/src/components/cookie-list.ts @@ -13,7 +13,7 @@ // PERFORMANCE OF THIS SOFTWARE. import type { CookieItem } from "../client"; -import { type BannerTexts, interpolate } from "../i18n"; +import { getCookieDetailLabels, interpolate } from "../i18n"; import { ProboElement } from "./base"; import type { ProboCategory } from "./category"; import type { ProboCookieBannerRoot } from "./cookie-banner-root"; @@ -38,15 +38,16 @@ export class ProboCookieList extends ProboElement { if (!this.template || !this.category) return; const root = this.findAncestor("probo-cookie-banner-root"); - const texts = root?.bannerConfig?.texts; + const lang = root?.bannerConfig?.language ?? "en"; + const labels = getCookieDetailLabels(lang); const cookies = this.category.cookies; for (const cookie of cookies) { - this.stampCookie(cookie, texts); + this.stampCookie(cookie, labels); } } - private stampCookie(cookie: CookieItem, texts?: BannerTexts): void { + private stampCookie(cookie: CookieItem, labels: Record): void { if (!this.template) return; const wrapper = document.createElement("probo-cookie"); @@ -57,7 +58,7 @@ export class ProboCookieList extends ProboElement { duration: cookie.duration, description: cookie.description, }); - this.fillLabels(clone, texts, { + this.fillLabels(clone, labels, { description: cookie.description, duration: cookie.duration, }); @@ -80,15 +81,14 @@ export class ProboCookieList extends ProboElement { private fillLabels( fragment: DocumentFragment, - texts: BannerTexts | undefined, + labels: Record, values: Record, ): void { - const labels = fragment.querySelectorAll("[data-label]"); - for (const el of labels) { + for (const el of fragment.querySelectorAll("[data-label]")) { const key = el.getAttribute("data-label")!; const slotName = key.replace("label_", ""); const value = values[slotName] ?? ""; - const tpl = texts?.[key]; + const tpl = labels[key]; if (tpl) { el.textContent = interpolate(tpl, { value }); const slot = el.querySelector(`[data-slot="${slotName}"]`); diff --git a/packages/cookie-banner/src/i18n.ts b/packages/cookie-banner/src/i18n.ts index fd3bd0953..70168cc00 100644 --- a/packages/cookie-banner/src/i18n.ts +++ b/packages/cookie-banner/src/i18n.ts @@ -35,3 +35,14 @@ export function interpolate( ): string { return template.replace(/\{\{(\w+)\}\}/g, (_, key) => vars[key] ?? ""); } + +const COOKIE_DETAIL_LABELS: Record> = { + en: { label_description: "Description: {{value}}", label_duration: "Duration: {{value}}" }, + fr: { label_description: "Description : {{value}}", label_duration: "Durée : {{value}}" }, + de: { label_description: "Beschreibung: {{value}}", label_duration: "Dauer: {{value}}" }, + es: { label_description: "Descripción: {{value}}", label_duration: "Duración: {{value}}" }, +}; + +export function getCookieDetailLabels(lang: string): Record { + return COOKIE_DETAIL_LABELS[lang] ?? COOKIE_DETAIL_LABELS.en; +} diff --git a/pkg/cookiebanner/defaults.go b/pkg/cookiebanner/defaults.go index 7fd0427f6..38e88072a 100644 --- a/pkg/cookiebanner/defaults.go +++ b/pkg/cookiebanner/defaults.go @@ -67,8 +67,6 @@ var defaultUIStringsByLanguage = map[string]map[string]string{ "button_save": "Save preferences", "panel_title": "Customise Preferences", "panel_description": "Choose which cookie categories to allow. {{necessary_category}} cookies are always active as they are needed for the site to work.", - "label_description": "Description: {{value}}", - "label_duration": "Duration: {{value}}", "aria_close": "Close", "aria_show_details": "Show cookie details", "aria_hide_details": "Hide cookie details", @@ -86,8 +84,6 @@ var defaultUIStringsByLanguage = map[string]map[string]string{ "button_save": "Enregistrer les préférences", "panel_title": "Personnaliser les préférences", "panel_description": "Choisissez les catégories de cookies à autoriser. Les cookies {{necessary_category}} sont toujours actifs car ils sont nécessaires au fonctionnement du site.", - "label_description": "Description : {{value}}", - "label_duration": "Durée : {{value}}", "aria_close": "Fermer", "aria_show_details": "Afficher les détails des cookies", "aria_hide_details": "Masquer les détails des cookies", @@ -105,8 +101,6 @@ var defaultUIStringsByLanguage = map[string]map[string]string{ "button_save": "Einstellungen speichern", "panel_title": "Einstellungen anpassen", "panel_description": "Wählen Sie, welche Cookie-Kategorien zugelassen werden sollen. {{necessary_category}}-Cookies sind immer aktiv, da sie für den Betrieb der Website erforderlich sind.", - "label_description": "Beschreibung: {{value}}", - "label_duration": "Dauer: {{value}}", "aria_close": "Schließen", "aria_show_details": "Cookie-Details anzeigen", "aria_hide_details": "Cookie-Details ausblenden", @@ -124,8 +118,6 @@ var defaultUIStringsByLanguage = map[string]map[string]string{ "button_save": "Guardar preferencias", "panel_title": "Personalizar preferencias", "panel_description": "Elija qué categorías de cookies permitir. Las cookies {{necessary_category}} siempre están activas ya que son necesarias para el funcionamiento del sitio.", - "label_description": "Descripción: {{value}}", - "label_duration": "Duración: {{value}}", "aria_close": "Cerrar", "aria_show_details": "Mostrar detalles de cookies", "aria_hide_details": "Ocultar detalles de cookies",