Feat: Allow to override default translation for consent modal title #…

…CCM-62
lmc-eu · Mar 4, 2022 · 32cd2ec · 32cd2ec
1 parent 71d2463
commit 32cd2ec
Show file tree

Hide file tree

Showing 13 changed files with 46 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -240,8 +240,12 @@ initLmcCookieConsentManager( // when loaded as a module, these options are passe
     onAccept: (cookieConsent) => {
       // custom code
     },
+    translationOverrides: { // overrides of the default translation for specified languages
+      cs: { consentTitle: 'Vlastní nadpis' },
+      en: { consentTitle: 'Custom title' },
+    },
     config: {
-      // overrides of default config, see https://github.com/orestbida/cookieconsent#all-configuration-options
+      // overrides of the default config, see https://github.com/orestbida/cookieconsent#all-configuration-options
     },
   }
 );
@@ -251,15 +255,16 @@ initLmcCookieConsentManager( // when loaded as a module, these options are passe
 
 ## Configuration options
 
-| Option                   | Type                 | Default value                 | Description                                                                                                                                                                                              |
-|--------------------------|----------------------|-------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `autodetectLang`         | boolean              | `true`                        | Autodetect language based on the value of `<html lang="...">`. If autodetect fails or if unsupported language is detected, fallback to `defaultLang`.<br>When disabled, force language to `defaultLang`. |
-| `defaultLang`            | string               | `'cs'`                        | Default language. One of `cs`, `de`, `en`, `hu`, `pl`, `ru`, `sk`, `uk`. This language will be used when autodetect is disabled or when it fails.                                                        |
-| `companyNames`           | array                | `['LMC']`                     | Array of strings with company names. Adjust only when the consent needs to be given to multiple companies. [See example][examples-configuration].                                                        |
-| `consentCollectorApiUrl` | ?string              | `'https://ccm.lmc.cz/(...)'`  | URL of the API where user consent information is sent. Null to disable sending data to the API.                                                                                                          |
-| `config`                 | Object               | `{}`                          | Override default config of the underlying library. For all parameters see [original library][cookie consent options].                                                                                    |
-| `displayMode`            | DisplayMode (string) | `DisplayMode.FORCE` (`force`) | `force` (default) to show consent in a centered modal box and to block page until user action. `soft` to show consent banner on the bottom of the page and do not block the page before user action.     |
-| `on*` callbacks          | function             | `(cookieConsent) => {}`       | See below for configurable callbacks.                                                                                                                                                                    |
+| Option                   | Type                                 | Default value                   | Description                                                                                                                                                                                              |
+|--------------------------|--------------------------------------|---------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `autodetectLang`         | boolean                              | `true`                          | Autodetect language based on the value of `<html lang="...">`. If autodetect fails or if unsupported language is detected, fallback to `defaultLang`.<br>When disabled, force language to `defaultLang`. |
+| `defaultLang`            | string                               | `'cs'`                          | Default language. One of `cs`, `de`, `en`, `hu`, `pl`, `ru`, `sk`, `uk`. This language will be used when autodetect is disabled or when it fails.                                                        |
+| `companyNames`           | array                                | `['LMC']`                       | Array of strings with company names. Adjust only when the consent needs to be given to multiple companies. [See example][examples-configuration].                                                        |
+| `consentCollectorApiUrl` | ?string                              | `'https://ccm.lmc.cz/(...)'`    | URL of the API where user consent information is sent. Null to disable sending data to the API.                                                                                                          |
+| `config`                 | Object                               | `{}`                            | Override default config of the underlying library. For all parameters see [original library][cookie consent options].                                                                                    |
+| `displayMode`            | DisplayMode (string)                 | `DisplayMode.FORCE` (`force`)   | `force` (default) to show consent in a centered modal box and to block page until user action. `soft` to show consent banner on the bottom of the page and do not block the page before user action.     |
+| `on*` callbacks          | function                             | `(cookieConsent) => {}`         | See below for configurable callbacks.                                                                                                                                                                    |
+| `translationOverrides`   | Record<string, TranslationOverride>  | `{}`                            | Override default translation for specified languages. Currently only `consentTitle` could be overridden. <br>For example: `{ en: { consentTitle: 'Custom consent modal title' } }`                       |
 
 ### Supported languages
 

diff --git a/examples/configuration.html b/examples/configuration.html
@@ -92,6 +92,7 @@ <h2 class="mt-md-3 mb-3">What is shown here</h2>
                     </li>
                     <li>Clearing localStorage when user gives consent to only necessary data (<code>onFirstAccept</code>)</li>
                     <li>Clearing localStorage when user updates consent and rejects some consent category (<code>onChange</code>)</li>
+                    <li>Overriding default translation (<code>translationOverrides</code>) for consent modal title</li>
                     <li>Etc.</li>
                 </ul>
 
@@ -153,6 +154,11 @@ <h2 class="mt-md-3 mb-3">Use cookieConsent instance</h2>
           if (categories.changed.includes('functionality') && !cookieConsent.allowedCategory('functionality')) {
             window.localStorage.clear(); // if we use localStorage only for some extended "functionality", remove its contents if we don't have consent
           }
+        },
+        translationOverrides: {
+          sk: {
+            consentTitle: 'Prispôsobený titulok'
+          }
         }
       }
     );

diff --git a/src/LmcCookieConsentManager.ts b/src/LmcCookieConsentManager.ts
@@ -33,6 +33,7 @@ const defaultOptions: CookieConsentManagerOptions = {
   onChange: noopChangeCallback,
   companyNames: ['LMC'],
   displayMode: DisplayMode.FORCE,
+  translationOverrides: {},
   config: {},
 };
 
@@ -51,6 +52,7 @@ const defaultOptions: CookieConsentManagerOptions = {
  *   to be given to multiple companies.
  * @param {DisplayMode} [args.displayMode] - `force` to show consent in a centered modal box and to block page until
  *   user action. `soft` to show consent in a banner on the bottom of the page.
+ * @param {Record<String, TranslationOverride>} [args.translationOverrides] - Translation overrides for specified languages
  * @param {VanillaCookieConsent.Options} [args.config] - Override default config.
  *   See https://github.com/orestbida/cookieconsent/blob/master/Readme.md#all-available-options
  * @returns {VanillaCookieConsent.CookieConsent<CookieConsentCategory>} Instance of the underlying CookieConsent component.
@@ -71,20 +73,21 @@ const LmcCookieConsentManager: CookieConsentManager = (serviceName, args) => {
     onChange,
     companyNames,
     displayMode,
+    translationOverrides,
     config,
   } = options;
   const cookieName = 'lmc_ccm';
   const cookieConsent = window.initCookieConsent();
 
   const languages = {
-    cs: configCs({ companyNames }),
-    de: configDe({ companyNames }),
-    en: configEn({ companyNames }),
-    hu: configHu({ companyNames }),
-    pl: configPl({ companyNames }),
-    ru: configRu({ companyNames }),
-    sk: configSk({ companyNames }),
-    uk: configUk({ companyNames }),
+    cs: configCs({ companyNames, consentTitle: translationOverrides.cs?.consentTitle }),
+    de: configDe({ companyNames, consentTitle: translationOverrides.de?.consentTitle }),
+    en: configEn({ companyNames, consentTitle: translationOverrides.en?.consentTitle }),
+    hu: configHu({ companyNames, consentTitle: translationOverrides.hu?.consentTitle }),
+    pl: configPl({ companyNames, consentTitle: translationOverrides.pl?.consentTitle }),
+    ru: configRu({ companyNames, consentTitle: translationOverrides.ru?.consentTitle }),
+    sk: configSk({ companyNames, consentTitle: translationOverrides.sk?.consentTitle }),
+    uk: configUk({ companyNames, consentTitle: translationOverrides.uk?.consentTitle }),
   };
 
   const onFirstAcceptHandler = (

diff --git a/src/languages/cs.ts b/src/languages/cs.ts
@@ -18,7 +18,7 @@ export const config = (extraMessages: ExtraMessages): VanillaCookieConsent.Langu
 
   return {
     consent_modal: {
-      title: 'Díky Cookies budou naše stránky ještě lepší',
+      title: extraMessages.consentTitle ?? 'Díky Cookies budou naše stránky ještě lepší',
       description: `Když lépe pochopíme, co vás zajímá, budeme vám zobrazovat přesnější obsah na míru.
       Kliknutím na tlačítko „Přijmout všechny“ dáte ${pluralize(
         lang.companyNames.length,

diff --git a/src/languages/de.ts b/src/languages/de.ts
@@ -16,7 +16,7 @@ export const config = (extraMessages: ExtraMessages): VanillaCookieConsent.Langu
 
   return {
     consent_modal: {
-      title: 'Diese Website verwendet Cookies',
+      title: extraMessages.consentTitle ?? 'Diese Website verwendet Cookies',
       description: `Indem Sie auf „Alles akzeptieren“ klicken, stimmen Sie der Verwendung von Cookies und anderen Identifikatoren auf Ihrem Gerät durch ${addSeparators(
         lang.companyNames,
         extra.and,

diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -15,7 +15,7 @@ export const config = (extraMessages: ExtraMessages): VanillaCookieConsent.Langu
 
   return {
     consent_modal: {
-      title: 'Cookies make our site even better',
+      title: extraMessages.consentTitle ?? 'Cookies make our site even better',
       description: `By better understanding what you're interested in, we'll show you more relevant content.
       By clicking the "Accept all" button, you give ${addSeparators(
         lang.companyNames,

diff --git a/src/languages/hu.ts b/src/languages/hu.ts
@@ -16,7 +16,7 @@ export const config = (extraMessages: ExtraMessages): VanillaCookieConsent.Langu
 
   return {
     consent_modal: {
-      title: 'Az oldalak süti fájlokat használnak',
+      title: extraMessages.consentTitle ?? 'Az oldalak süti fájlokat használnak',
       description: `A „Mindent elfogadok” gombra kattintva a hozzájárulását adja ahhoz, hogy az ${addSeparators(
         lang.companyNames,
         extra.and,

diff --git a/src/languages/pl.ts b/src/languages/pl.ts
@@ -18,7 +18,7 @@ export const config = (extraMessages: ExtraMessages): VanillaCookieConsent.Langu
 
   return {
     consent_modal: {
-      title: 'Dzięki plikom Cookies nasza strona będzie jeszcze lepsza',
+      title: extraMessages.consentTitle ?? 'Dzięki plikom Cookies nasza strona będzie jeszcze lepsza',
       description: `Gdy lepiej zrozumiemy, co Cię interesuje, pokażemy dokładniejsze treści dopasowane do Twoich preferencji.
       Kliknij w przycisk „Akceptuj wszystkie”, aby wyrazić zgodę na wykorzystanie plików cookie przez
       ${pluralize(lang.companyNames.length, lang.company, lang.companies)} ${addSeparators(

diff --git a/src/languages/ru.ts b/src/languages/ru.ts
@@ -18,7 +18,7 @@ export const config = (extraMessages: ExtraMessages): VanillaCookieConsent.Langu
 
   return {
     consent_modal: {
-      title: 'Этот сайт использует файлы cookie',
+      title: extraMessages.consentTitle ?? 'Этот сайт использует файлы cookie',
       description: `Нажав «Принять все», Вы даете свое согласие ${pluralize(
         lang.companyNames.length,
         lang.company,

diff --git a/src/languages/sk.ts b/src/languages/sk.ts
@@ -18,7 +18,7 @@ export const config = (extraMessages: ExtraMessages): VanillaCookieConsent.Langu
 
   return {
     consent_modal: {
-      title: 'Vďaka Cookies budú naše stránky ešte lepšie',
+      title: extraMessages.consentTitle ?? 'Vďaka Cookies budú naše stránky ešte lepšie',
       description: `Presnejší obsah na mieru vám budeme zobrazovať, keď lepšie pochopíme, čo vás zaujíma.
       Kliknutím na tlačidlo „Prijať všetky“, čím dáte ${pluralize(
         lang.companyNames.length,

diff --git a/src/languages/uk.ts b/src/languages/uk.ts
@@ -18,7 +18,7 @@ export const config = (extraMessages: ExtraMessages): VanillaCookieConsent.Langu
 
   return {
     consent_modal: {
-      title: 'Цей сайт використовує файли cookie',
+      title: extraMessages.consentTitle ?? 'Цей сайт використовує файли cookie',
       description: `Натиснувши «Прийняти все», Ви даєте свою згоду ${pluralize(
         lang.companyNames.length,
         lang.company,

diff --git a/src/types/CookieConsentManager.ts b/src/types/CookieConsentManager.ts
@@ -28,9 +28,14 @@ export type CookieConsentManagerOptions = {
   onChange: OnChangeCallback;
   companyNames: string[];
   displayMode: DisplayMode;
+  translationOverrides: Record<string, TranslationOverride>;
   config: VanillaCookieConsent.Options;
 };
 
+export type TranslationOverride = {
+  consentTitle: string;
+};
+
 export type CookieConsentManager = (
   serviceName: string,
   args?: Partial<CookieConsentManagerOptions>,

diff --git a/src/types/Messages.ts b/src/types/Messages.ts
@@ -1,3 +1,4 @@
 export interface ExtraMessages {
   companyNames: string[];
+  consentTitle?: string;
 }