Move cookie detail labels from backend to JS SDK

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é <emile@getprobo.com>

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<ProboCookieBannerRoot>("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<string, string>): 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<string, string>,
     values: Record<string, string>,
   ): void {
-    const labels = fragment.querySelectorAll("[data-label]");
+    for (const el of fragment.querySelectorAll("[data-label]")) {
-    for (const el of labels) {
       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}"]`);

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<string, Record<string, string>> = {
+  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<string, string> {
+  return COOKIE_DETAIL_LABELS[lang] ?? COOKIE_DETAIL_LABELS.en;
+}

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",