Refactor(typescript): Separate types for cookie consent manager

and cookie consent implementation
lmc-eu · Dec 15, 2021 · cf0e933 · cf0e933
1 parent 4b20feb
commit cf0e933
Show file tree

Hide file tree

Showing 17 changed files with 256 additions and 153 deletions.
diff --git a/src/LmcCookieConsentManager.ts b/src/LmcCookieConsentManager.ts
@@ -9,12 +9,13 @@ import { config as configRu } from './languages/ru';
 import { config as configSk } from './languages/sk';
 import { config as configUk } from './languages/uk';
 import submitConsent from './consentCollector';
-import { Cookie, CookieConsentLevel, OnAcceptCallback, CookieConsentOptions, CookieConsentManager } from './types';
+import { CookieConsentLevel, OnAcceptCallback, CookieConsentManagerOptions, CookieConsentManager } from './types';
+import { VanillaCookieConsent } from './types/vanilla-cookieconsent';
 
 /* eslint-disable-next-line no-unused-vars */
 const noopAcceptCallback: OnAcceptCallback = (cookie, cookieConsent) => {};
 
-const defaultOptions: CookieConsentOptions = {
+const defaultOptions: CookieConsentManagerOptions = {
   defaultLang: 'cs',
   autodetectLang: true,
   consentCollectorApiUrl: 'https://ccm.lmc.cz/local-data-acceptation-data-entries',
@@ -30,7 +31,7 @@ const defaultOptions: CookieConsentOptions = {
 
 /**
  * @param {string} serviceName - Identifier of the source service (website/application). Must be provided.
- * @param {CookieConsentOptions} [args] - Options for cookie consent manager
+ * @param {CookieConsentManagerOptions} [args] - Options for cookie consent manager
  * @param {string} [args.defaultLang] - Default language. Must be one of predefined languages.
  * @param {boolean} [args.autodetectLang] - Autodetect language from the browser
  * @param {?string} [args.consentCollectorApiUrl] - URL of the API where user consent information should be sent.
@@ -47,9 +48,9 @@ const defaultOptions: CookieConsentOptions = {
  *   (either given right now or already saved previously)
  * @param {array} [args.companyNames] - Array of strings with company names. Adjust only when the consent needs
  *   to be given to multiple companies.
- * @param {Object} [args.config] - Override default config.
+ * @param {VanillaCookieConsent.Options} [args.config] - Override default config.
  *   See https://github.com/orestbida/cookieconsent/blob/master/Readme.md#all-available-options
- * @returns {CookieConsent} Instance of the underlying CookieConsent component.
+ * @returns {VanillaCookieConsent.CookieConsent<CookieConsentLevel>} Instance of the underlying CookieConsent component.
  *   For available API, see https://github.com/orestbida/cookieconsent#apis--configuration-parameters
  */
 const LmcCookieConsentManager: CookieConsentManager = (serviceName, args) => {
@@ -99,14 +100,14 @@ const LmcCookieConsentManager: CookieConsentManager = (serviceName, args) => {
     use_rfc_cookie: true, // Store cookie content in RFC compatible format.
     gui_options: {
       consent_modal: {
-        layout: 'bar', // box/cloud/bar
-        position: 'bottom center', // bottom/middle/top + left/right/center
-        transition: 'slide', // zoom/slide
+        layout: VanillaCookieConsent.GuiConsentLayout.BAR, // box/cloud/bar
+        position: VanillaCookieConsent.GuiConsentPosition.BOTTOM_CENTER, // bottom/middle/top + left/right/center
+        transition: VanillaCookieConsent.Transition.SLIDE, // zoom/slide
       },
     },
-    onAccept: (cookie: Cookie) => {
+    onAccept: (cookie: VanillaCookieConsent.Cookie<CookieConsentLevel>) => {
       const givenLevels = cookieConsent.get('level');
-      const acceptedOnlyNecessary = givenLevels.length === 1 && givenLevels[0] === 'necessary';
+      const acceptedOnlyNecessary = givenLevels.length === 1 && givenLevels[0] === CookieConsentLevel.NECESSARY;
 
       onAccept(cookie, cookieConsent);
 
@@ -143,7 +144,7 @@ const LmcCookieConsentManager: CookieConsentManager = (serviceName, args) => {
   return cookieConsent;
 };
 
-function pushToDataLayer(cookie: Cookie) {
+function pushToDataLayer(cookie: VanillaCookieConsent.Cookie<CookieConsentLevel>) {
   window.dataLayer = window.dataLayer || [];
   window.dataLayer.push({
     event: 'CookieConsent-update',

diff --git a/src/consentCollector.ts b/src/consentCollector.ts
@@ -1,19 +1,23 @@
-import { CookieConsent, CookieConsentLevel } from './types/CookieConsent';
+import { CookieConsentLevel } from './types';
+import { VanillaCookieConsent } from './types/vanilla-cookieconsent';
 
 /**
  * Submit information about consent level given by the user.
  */
 function submitConsent(
   consentCollectorApiUrl: string,
-  cookieConsent: CookieConsent,
+  cookieConsent: VanillaCookieConsent.CookieConsent<CookieConsentLevel>,
   acceptedOnlyNecessary: boolean,
 ): void {
   const payload = buildPayload(cookieConsent, acceptedOnlyNecessary);
 
   postDataToApi(consentCollectorApiUrl, payload);
 }
 
-function buildPayload(cookieConsent: CookieConsent, acceptedOnlyNecessary: boolean): Object {
+function buildPayload(
+  cookieConsent: VanillaCookieConsent.CookieConsent<CookieConsentLevel>,
+  acceptedOnlyNecessary: boolean,
+): Object {
   const cookieData = cookieConsent.get('data');
   const acceptedCategories = cookieConsent.get('level');
   // TODO: read actual categories once following is implemented in vanilla-cookieconsent:
@@ -32,7 +36,9 @@ function buildPayload(cookieConsent: CookieConsent, acceptedOnlyNecessary: boole
       type: 'localDataAcceptationDataEntries',
       attributes: {
         acceptation_id: cookieData.uid,
-        accept_type: acceptedOnlyNecessary ? 'accept_necessary' : 'accept_all',
+        accept_type: acceptedOnlyNecessary
+          ? VanillaCookieConsent.SecondaryButtonRole.ACCEPT_NECESSARY
+          : VanillaCookieConsent.PrimaryButtonRole.ACCEPT_ALL,
         accepted_categories: acceptedCategories,
         rejected_categories: rejectedCategories,
         revision: cookieConsent.get('revision'),

diff --git a/src/languages/cs.ts b/src/languages/cs.ts
@@ -1,5 +1,6 @@
 import { addSeparators, pluralize } from '../utils';
-import { ExtraMessages, LanguageConfig, PrimaryButtonRole, SecondaryButtonRole, CookieConsentLevel } from '../types';
+import { ExtraMessages, CookieConsentLevel } from '../types';
+import { VanillaCookieConsent } from '../types/vanilla-cookieconsent';
 
 const extra = {
   and: 'a',
@@ -10,9 +11,9 @@ const extra = {
 /**
  * @param {ExtraMessages} [extraMessages] - Object with extra messages
  * @param {array} [extraMessages.companyNames] - Array of strings with company names used to parametrized translations
- * @returns {LanguageConfig} Object with translated messages
+ * @returns {VanillaCookieConsent.Languages} Object with translated messages
  */
-export const config = (extraMessages: ExtraMessages): LanguageConfig => {
+export const config = (extraMessages: ExtraMessages): VanillaCookieConsent.Languages => {
   const lang = { ...extra, ...extraMessages };
 
   return {
@@ -29,11 +30,11 @@ export const config = (extraMessages: ExtraMessages): LanguageConfig => {
       Více informací naleznete na stránce <a href="https://www.lmc.eu/cs/cookies" target="_blank">Používání cookies</a>.`,
       primary_btn: {
         text: 'Přijmout vše',
-        role: PrimaryButtonRole.ACCEPT_ALL,
+        role: VanillaCookieConsent.PrimaryButtonRole.ACCEPT_ALL,
       },
       secondary_btn: {
         text: 'Přijmout nezbytné',
-        role: SecondaryButtonRole.ACCEPT_NECESSARY,
+        role: VanillaCookieConsent.SecondaryButtonRole.ACCEPT_NECESSARY,
       },
     },
     settings_modal: {

diff --git a/src/languages/de.ts b/src/languages/de.ts
@@ -1,5 +1,6 @@
 import { addSeparators } from '../utils';
-import { ExtraMessages, LanguageConfig, PrimaryButtonRole, SecondaryButtonRole, CookieConsentLevel } from '../types';
+import { ExtraMessages, CookieConsentLevel } from '../types';
+import { VanillaCookieConsent } from '../types/vanilla-cookieconsent';
 
 const extra = {
   and: 'und',
@@ -8,9 +9,9 @@ const extra = {
 /**
  * @param {ExtraMessages} [extraMessages] - Object with extra messages
  * @param {array} [extraMessages.companyNames] - Array of strings with company names used to parametrized translations
- * @returns {LanguageConfig} Object with translated messages
+ * @returns {VanillaCookieConsent.Languages} Object with translated messages
  */
-export const config = (extraMessages: ExtraMessages): LanguageConfig => {
+export const config = (extraMessages: ExtraMessages): VanillaCookieConsent.Languages => {
   const lang = { ...extra, ...extraMessages };
 
   return {
@@ -23,11 +24,11 @@ export const config = (extraMessages: ExtraMessages): LanguageConfig => {
       Weitere Informationen finden Sie unter <a href="https://www.lmc.eu/en/cookies/" target="_blank">Verwendung von Cookies</a>.`,
       primary_btn: {
         text: 'Alles akzeptieren',
-        role: PrimaryButtonRole.ACCEPT_ALL,
+        role: VanillaCookieConsent.PrimaryButtonRole.ACCEPT_ALL,
       },
       secondary_btn: {
         text: 'Das Notwendigste akzeptieren',
-        role: SecondaryButtonRole.ACCEPT_NECESSARY,
+        role: VanillaCookieConsent.SecondaryButtonRole.ACCEPT_NECESSARY,
       },
     },
     settings_modal: {

diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -1,15 +1,16 @@
 import { addSeparators } from '../utils';
-import { ExtraMessages, LanguageConfig, PrimaryButtonRole, SecondaryButtonRole, CookieConsentLevel } from '../types';
+import { ExtraMessages, CookieConsentLevel } from '../types';
+import { VanillaCookieConsent } from '../types/vanilla-cookieconsent';
 
 const extra = {
   and: 'and',
 };
 /**
  * @param {ExtraMessages} [extraMessages] - Object with extra messages
  * @param {array} [extraMessages.companyNames] - Array of strings with company names used to parametrized translations
- * @returns {LanguageConfig} Object with translated messages
+ * @returns {VanillaCookieConsent.Languages} Object with translated messages
  */
-export const config = (extraMessages: ExtraMessages): LanguageConfig => {
+export const config = (extraMessages: ExtraMessages): VanillaCookieConsent.Languages => {
   const lang = { ...extra, ...extraMessages };
 
   return {
@@ -22,11 +23,11 @@ export const config = (extraMessages: ExtraMessages): LanguageConfig => {
       For more information read page <a href="https://www.lmc.eu/en/cookies/" target="_blank">Use of cookies</a>.`,
       primary_btn: {
         text: 'Accept all',
-        role: PrimaryButtonRole.ACCEPT_ALL,
+        role: VanillaCookieConsent.PrimaryButtonRole.ACCEPT_ALL,
       },
       secondary_btn: {
         text: 'Accept necessary',
-        role: SecondaryButtonRole.ACCEPT_NECESSARY,
+        role: VanillaCookieConsent.SecondaryButtonRole.ACCEPT_NECESSARY,
       },
     },
     settings_modal: {

diff --git a/src/languages/hu.ts b/src/languages/hu.ts
@@ -1,5 +1,6 @@
 import { addSeparators } from '../utils';
-import { ExtraMessages, LanguageConfig, PrimaryButtonRole, SecondaryButtonRole, CookieConsentLevel } from '../types';
+import { ExtraMessages, CookieConsentLevel } from '../types';
+import { VanillaCookieConsent } from '../types/vanilla-cookieconsent';
 
 const extra = {
   and: 'és',
@@ -8,9 +9,9 @@ const extra = {
 /**
  * @param {ExtraMessages} [extraMessages] - Object with extra messages
  * @param {array} [extraMessages.companyNames] - Array of strings with company names used to parametrized translations
- * @returns {LanguageConfig} Object with translated messages
+ * @returns {VanillaCookieConsent.Languages} Object with translated messages
  */
-export const config = (extraMessages: ExtraMessages): LanguageConfig => {
+export const config = (extraMessages: ExtraMessages): VanillaCookieConsent.Languages => {
   const lang = { ...extra, ...extraMessages };
 
   return {
@@ -23,11 +24,11 @@ export const config = (extraMessages: ExtraMessages): LanguageConfig => {
       Bővebb információkat a <a href="https://www.lmc.eu/en/cookies/" target="_blank">Sütihasználat</a> oldalon talál.`,
       primary_btn: {
         text: 'Minden elfogadása',
-        role: PrimaryButtonRole.ACCEPT_ALL,
+        role: VanillaCookieConsent.PrimaryButtonRole.ACCEPT_ALL,
       },
       secondary_btn: {
         text: 'A legszükségesebbek elfogadása',
-        role: SecondaryButtonRole.ACCEPT_NECESSARY,
+        role: VanillaCookieConsent.SecondaryButtonRole.ACCEPT_NECESSARY,
       },
     },
     settings_modal: {

diff --git a/src/languages/pl.ts b/src/languages/pl.ts
@@ -1,5 +1,6 @@
 import { addSeparators } from '../utils';
-import { ExtraMessages, LanguageConfig, PrimaryButtonRole, SecondaryButtonRole, CookieConsentLevel } from '../types';
+import { ExtraMessages, CookieConsentLevel } from '../types';
+import { VanillaCookieConsent } from '../types/vanilla-cookieconsent';
 
 const extra = {
   and: 'i',
@@ -8,9 +9,9 @@ const extra = {
 /**
  * @param {ExtraMessages} [extraMessages] - Object with extra messages
  * @param {array} [extraMessages.companyNames] - Array of strings with company names used to parametrized translations
- * @returns {LanguageConfig} Object with translated messages
+ * @returns {VanillaCookieConsent.Languages} Object with translated messages
  */
-export const config = (extraMessages: ExtraMessages): LanguageConfig => {
+export const config = (extraMessages: ExtraMessages): VanillaCookieConsent.Languages => {
   const lang = { ...extra, ...extraMessages };
 
   return {
@@ -23,11 +24,11 @@ export const config = (extraMessages: ExtraMessages): LanguageConfig => {
       Więcej informacji znajdziesz na stronie <a href="https://www.lmc.eu/pl/cookies" target="_blank">Korzystanie z plików Cookies</a>.`,
       primary_btn: {
         text: 'Akceptuj wszystkie',
-        role: PrimaryButtonRole.ACCEPT_ALL,
+        role: VanillaCookieConsent.PrimaryButtonRole.ACCEPT_ALL,
       },
       secondary_btn: {
         text: 'Akceptuj niezbędne',
-        role: SecondaryButtonRole.ACCEPT_NECESSARY,
+        role: VanillaCookieConsent.SecondaryButtonRole.ACCEPT_NECESSARY,
       },
     },
     settings_modal: {

diff --git a/src/languages/ru.ts b/src/languages/ru.ts
@@ -1,5 +1,6 @@
 import { addSeparators, pluralize } from '../utils';
-import { ExtraMessages, LanguageConfig, PrimaryButtonRole, SecondaryButtonRole, CookieConsentLevel } from '../types';
+import { ExtraMessages, CookieConsentLevel } from '../types';
+import { VanillaCookieConsent } from '../types/vanilla-cookieconsent';
 
 const extra = {
   and: 'и',
@@ -10,9 +11,9 @@ const extra = {
 /**
  * @param {ExtraMessages} [extraMessages] - Object with extra messages
  * @param {array} [extraMessages.companyNames] - Array of strings with company names used to parametrized translations
- * @returns {LanguageConfig} Object with translated messages
+ * @returns {VanillaCookieConsent.Languages} Object with translated messages
  */
-export const config = (extraMessages: ExtraMessages): LanguageConfig => {
+export const config = (extraMessages: ExtraMessages): VanillaCookieConsent.Languages => {
   const lang = { ...extra, ...extraMessages };
 
   return {
@@ -29,11 +30,11 @@ export const config = (extraMessages: ExtraMessages): LanguageConfig => {
       Для получения дополнительной информации см. раздел <a href="https://www.lmc.eu/en/cookies/" target="_blank">использование файлов cookie</a>.`,
       primary_btn: {
         text: 'Принять все',
-        role: PrimaryButtonRole.ACCEPT_ALL,
+        role: VanillaCookieConsent.PrimaryButtonRole.ACCEPT_ALL,
       },
       secondary_btn: {
         text: 'Принятие необходимо',
-        role: SecondaryButtonRole.ACCEPT_NECESSARY,
+        role: VanillaCookieConsent.SecondaryButtonRole.ACCEPT_NECESSARY,
       },
     },
     settings_modal: {

diff --git a/src/languages/sk.ts b/src/languages/sk.ts
@@ -1,5 +1,6 @@
 import { addSeparators, pluralize } from '../utils';
-import { ExtraMessages, LanguageConfig, PrimaryButtonRole, SecondaryButtonRole, CookieConsentLevel } from '../types';
+import { ExtraMessages, CookieConsentLevel } from '../types';
+import { VanillaCookieConsent } from '../types/vanilla-cookieconsent';
 
 const extra = {
   and: 'a',
@@ -10,9 +11,9 @@ const extra = {
 /**
  * @param {ExtraMessages} [extraMessages] - Object with extra messages
  * @param {array} [extraMessages.companyNames] - Array of strings with company names used to parametrized translations
- * @returns {LanguageConfig} Object with translated messages
+ * @returns {VanillaCookieConsent.Languages} Object with translated messages
  */
-export const config = (extraMessages: ExtraMessages): LanguageConfig => {
+export const config = (extraMessages: ExtraMessages): VanillaCookieConsent.Languages => {
   const lang = { ...extra, ...extraMessages };
 
   return {
@@ -29,11 +30,11 @@ export const config = (extraMessages: ExtraMessages): LanguageConfig => {
       Viac informácií nájdete na stránke <a href="https://www.lmc.eu/sk/cookies" target="_blank">Používanie cookies</a>.`,
       primary_btn: {
         text: 'Prijať všetky',
-        role: PrimaryButtonRole.ACCEPT_ALL,
+        role: VanillaCookieConsent.PrimaryButtonRole.ACCEPT_ALL,
       },
       secondary_btn: {
         text: 'Prijať nevyhnutné',
-        role: SecondaryButtonRole.ACCEPT_NECESSARY,
+        role: VanillaCookieConsent.SecondaryButtonRole.ACCEPT_NECESSARY,
       },
     },
     settings_modal: {

diff --git a/src/languages/uk.ts b/src/languages/uk.ts
@@ -1,5 +1,6 @@
 import { addSeparators, pluralize } from '../utils';
-import { ExtraMessages, LanguageConfig, PrimaryButtonRole, SecondaryButtonRole, CookieConsentLevel } from '../types';
+import { ExtraMessages, CookieConsentLevel } from '../types';
+import { VanillaCookieConsent } from '../types/vanilla-cookieconsent';
 
 const extra = {
   and: 'i',
@@ -10,9 +11,9 @@ const extra = {
 /**
  * @param {ExtraMessages} [extraMessages] - Object with extra messages
  * @param {array} [extraMessages.companyNames] - Array of strings with company names used to parametrized translations
- * @returns {LanguageConfig} Object with translated messages
+ * @returns {VanillaCookieConsent.Languages} Object with translated messages
  */
-export const config = (extraMessages: ExtraMessages): LanguageConfig => {
+export const config = (extraMessages: ExtraMessages): VanillaCookieConsent.Languages => {
   const lang = { ...extra, ...extraMessages };
 
   return {
@@ -29,11 +30,11 @@ export const config = (extraMessages: ExtraMessages): LanguageConfig => {
       Для отримання додаткової інформації див. розділ <a href="https://www.lmc.eu/en/cookies/" target="_blank">Використання файлів cookie</a>.`,
       primary_btn: {
         text: 'Прийняти все',
-        role: PrimaryButtonRole.ACCEPT_ALL,
+        role: VanillaCookieConsent.PrimaryButtonRole.ACCEPT_ALL,
       },
       secondary_btn: {
         text: 'Прийняття необхідно',
-        role: SecondaryButtonRole.ACCEPT_NECESSARY,
+        role: VanillaCookieConsent.SecondaryButtonRole.ACCEPT_NECESSARY,
       },
     },
     settings_modal: {