Feat: Add ability to set cookie table

examples/configuration.html

@@ -111,6 +111,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>Using <code>cookieTable</code> configuration to list cookies in the settings modal</li>
  <li>Overriding default translation (<code>translationOverrides</code>) for consent modal title</li>
  <li>Etc.</li>
  </ul>
@@ -183,6 +184,41 @@ <h2 class="mt-md-3 mb-3">Use cookieConsent instance</h2>
  <a href="https://www.almacareer.com/gdpr/sk/cookie-policy" target="_blank">druhý</a>
  a <a href="https://www.almacareer.com/sk" target="_blank">tretí</a> vlastný odkaz</a>.`,
  },
+ },
+ cookieTable: {
+ sk: {
+ necessary: [
+ {
+ name: 'lmc_ccm',
+ description: `Cookie je nevyhnutná na uloženie vašich preferencií týkajúcich sa povolených kategórií cookies.`,
+ expiration: '1 rok',
+ },
+ ],
+ // ad: [ ... ],
+ analytics: [
+ {
+ name: '_ga',
+ description: `Používame Google Analytics, aby sme zistili, koľko ľudí navštevuje našu webovú stránku a ako ju používajú`,
+ expiration: '2 roky'
+ },
+ {
+ name: '^_utm',
+ description: `Používame Google Analytics, aby sme zistili, koľko ľudí navštevuje našu webovú stránku a ako ju používajú`,
+ expiration: '2 roky',
+ is_regex: true
+ },
+ ],
+ // functionality: [ ... ],
+ personalization: [
+ {
+ name: 'sessionLog_id',
+ description: `Identifikátor používateľa za účelom prispôsobovania obsahu webu.
+ Lorem ipsum dolor sitamet, consectetur adipiscing elit. Ut elit tellus,
+ luctus nec ullamcorper mattis, pulvinar dapibus leo.`,
+ expiration: '30 dní',
+ },
+ ],
+ }
  }
  }
  );

src/LmcCookieConsentManager.ts

@@ -37,6 +37,7 @@ const defaultOptions: CookieConsentManagerOptions = {
  displayMode: DisplayMode.FORCE,
  secondaryButtonMode: SecondaryButtonMode.ACCEPT_NECESSARY,
  translationOverrides: {},
+ cookieTable: {},
  config: {},
 };
 
@@ -58,6 +59,7 @@ const defaultOptions: CookieConsentManagerOptions = {
  * @param {SecondaryButtonMode} [args.secondaryButtonMode] - `force` (default) 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 {CookieTable} [args.cookieTable] - Cookie table 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<CookieConsentCategoryValues>} Instance of the underlying CookieConsent component.
@@ -80,22 +82,23 @@ const LmcCookieConsentManager: CookieConsentManager = (serviceName, args) => {
  displayMode,
  secondaryButtonMode,
  translationOverrides,
+ cookieTable,
  config,
  } = options;
  const cookieName = 'lmc_ccm';
  const cookieConsent = window.initCookieConsent();
 
  const languages = {
- cs: configCs({ companyNames, ...translationOverrides.cs }, secondaryButtonMode),
- de: configDe({ companyNames, ...translationOverrides.de }, secondaryButtonMode),
- en: configEn({ companyNames, ...translationOverrides.en }, secondaryButtonMode),
- hr: configHr({ companyNames, ...translationOverrides.hr }, secondaryButtonMode),
- hu: configHu({ companyNames, ...translationOverrides.hu }, secondaryButtonMode),
- pl: configPl({ companyNames, ...translationOverrides.pl }, secondaryButtonMode),
- ru: configRu({ companyNames, ...translationOverrides.ru }, secondaryButtonMode),
- sk: configSk({ companyNames, ...translationOverrides.sk }, secondaryButtonMode),
- sl: configSl({ companyNames, ...translationOverrides.sl }, secondaryButtonMode),
- uk: configUk({ companyNames, ...translationOverrides.uk }, secondaryButtonMode),
+ cs: configCs({ companyNames, ...translationOverrides.cs }, secondaryButtonMode, cookieTable.cs || {}),
+ de: configDe({ companyNames, ...translationOverrides.de }, secondaryButtonMode, cookieTable.de || {}),
+ en: configEn({ companyNames, ...translationOverrides.en }, secondaryButtonMode, cookieTable.en || {}),
+ hr: configHr({ companyNames, ...translationOverrides.hr }, secondaryButtonMode, cookieTable.hr || {}),
+ hu: configHu({ companyNames, ...translationOverrides.hu }, secondaryButtonMode, cookieTable.hu || {}),
+ pl: configPl({ companyNames, ...translationOverrides.pl }, secondaryButtonMode, cookieTable.pl || {}),
+ ru: configRu({ companyNames, ...translationOverrides.ru }, secondaryButtonMode, cookieTable.ru || {}),
+ sk: configSk({ companyNames, ...translationOverrides.sk }, secondaryButtonMode, cookieTable.sk || {}),
+ sl: configSl({ companyNames, ...translationOverrides.sl }, secondaryButtonMode, cookieTable.sl || {}),
+ uk: configUk({ companyNames, ...translationOverrides.uk }, secondaryButtonMode, cookieTable.uk || {}),
  };
 
  const onFirstAcceptHandler = (

src/__tests__/utils.test.ts

@@ -12,6 +12,7 @@ import {
  assembleCategoryAd,
 } from '../utils';
 import { CookieConsentCategory, SecondaryButtonMode } from '../constants';
+import { CookieTableCategories } from '../types';
 
 describe('utils', () => {
  describe('addSeparators', () => {
@@ -100,52 +101,43 @@ describe('utils', () => {
  });
  });
 
- describe('assembleCategoryNecessary', () => {
- it('should assemble modal category block', () => {
- expect(assembleCategoryNecessary('title', 'description')).toEqual({
+ describe.each([
+ ['assembleCategoryNecessary', assembleCategoryNecessary, CookieConsentCategory.NECESSARY, true],
+ ['assembleCategoryAd', assembleCategoryAd, CookieConsentCategory.AD, false],
+ ['assembleCategoryAnalytics', assembleCategoryAnalytics, CookieConsentCategory.ANALYTICS, false],
+ ['assembleCategoryFunctionality', assembleCategoryFunctionality, CookieConsentCategory.FUNCTIONALITY, false],
+ ['assembleCategoryPersonalization', assembleCategoryPersonalization, CookieConsentCategory.PERSONALIZATION, false],
+ ])('%s', (category, assembleCategoryFunction, categoryValue, readonly) => {
+ it('should assemble modal category block without cookieTable', () => {
+ expect(assembleCategoryFunction('title', 'description', {})).toEqual({
  title: 'title',
  description: 'description',
- toggle: { value: CookieConsentCategory.NECESSARY, enabled: true, readonly: true },
+ toggle: { value: categoryValue, enabled: readonly, readonly: readonly },
  });
  });
- });
-
- describe('assembleCategoryAd', () => {
- it('should assemble modal category block', () => {
- expect(assembleCategoryAd('title', 'description')).toEqual({
- title: 'title',
- description: 'description',
- toggle: { value: CookieConsentCategory.AD, enabled: false, readonly: false },
- });
- });
- });
-
- describe('assembleCategoryAnalytics', () => {
- it('should assemble modal category block', () => {
- expect(assembleCategoryAnalytics('title', 'description')).toEqual({
- title: 'title',
- description: 'description',
- toggle: { value: CookieConsentCategory.ANALYTICS, enabled: false, readonly: false },
- });
- });
- });
 
- describe('assembleCategoryFunctionality', () => {
- it('should assemble modal category block', () => {
- expect(assembleCategoryFunctionality('title', 'description')).toEqual({
- title: 'title',
- description: 'description',
- toggle: { value: CookieConsentCategory.FUNCTIONALITY, enabled: false, readonly: false },
- });
- });
- });
+ it('should assemble modal category block with cookieTable', () => {
+ const cookieTable: CookieTableCategories = {
+ [categoryValue]: [
+ {
+ name: 'cookie1',
+ description: 'Description',
+ expiration: 'duration',
+ },
+ ],
+ };
 
- describe('assembleCategoryPersonalization', () => {
- it('should assemble modal category block', () => {
- expect(assembleCategoryPersonalization('title', 'description')).toEqual({
+ expect(assembleCategoryFunction('title', 'description', cookieTable)).toEqual({
  title: 'title',
  description: 'description',
- toggle: { value: CookieConsentCategory.PERSONALIZATION, enabled: false, readonly: false },
+ toggle: { value: categoryValue, enabled: readonly, readonly: readonly },
+ cookie_table: [
+ {
+ name: 'cookie1',
+ description: 'Description',
+ expiration: 'duration',
+ },
+ ],
  });
  });
  });