migrate cookie banner

process-analytics · Apr 12, 2024 · 8c999be · 8c999be
1 parent 4b07be7
commit 8c999be
Show file tree

Hide file tree

Showing 2 changed files with 113 additions and 146 deletions.
diff --git a/src/assets/css/cookieconsent.css b/src/assets/css/cookieconsent.css
@@ -1,82 +1,53 @@
-.pa_cookie_consent_theme {
+.pa_cookie_consent_theme #cc-main {
+    color-scheme: light;
+
     --cc-font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
     --cc-bg: #f8fdff;
-    --cc-text: #001f25;
+    --cc-color: #001f25;
+
     --cc-btn-primary-bg: #006c4d;
-    --cc-btn-primary-text: #ffffff;
-    --cc-btn-primary-hover-bg: var(--cc-btn-primary-text);
-    --cc-btn-primary-hover-text: var(--cc-btn-primary-bg);
+    --cc-btn-primary-color: #ffffff;
+    --cc-btn-primary-border-color: var(--cc-btn-primary-bg);
+    --cc-btn-primary-hover-bg: var(--cc-btn-primary-color);
+    --cc-btn-primary-hover-color: var(--cc-btn-primary-bg);
+
     --cc-btn-secondary-bg: var(--cc-bg);
-    --cc-btn-secondary-text: var(--cc-text);
+    --cc-btn-secondary-color: var(--cc-color);
     --cc-btn-secondary-hover-bg: #ffd9dc;
-    --cc-btn-secondary-hover-text: #400011;
-    --cc-toggle-bg-off: #4B9B85;
-    --cc-toggle-bg-on: #006c4d;
-    --cc-toggle-bg-readonly: #ACDBC3;
-    --cc-cookie-category-block-bg: #dbe5dd;
-    --cc-cookie-category-block-bg-hover: #404944;
-    --cc-cookie-category-block-text-hover: var(--cc-bg);
-    --cc-cookie-table-border: var(--cc-bg);
-    --cc-overlay-bg: rgba(4, 6, 8, .85);
-    --cc-webkit-scrollbar-bg: var(--cc-cookie-category-block-bg);
-    --cc-webkit-scrollbar-bg-hover: var(--cc-btn-primary-bg);
-    --mobile-logo-size: 5rem;
-    --desktop-logo-size: 8rem;
-}
+    --cc-btn-secondary-hover-color: #400011;
+    --cc-btn-secondary-hover-border-color: var(--cc-btn-secondary-hover-bg);
 
-.pa_cookie_consent_theme #c-ttl{
-    color: var(--cc-btn-primary-bg);
-}
 
-/* Custom border radius */
-.pa_cookie_consent_theme #cm,
-.pa_cookie_consent_theme #s-bl .act .b-acc,
-.pa_cookie_consent_theme #s-inr,
-.pa_cookie_consent_theme .cc_div .b-tl,
-.pa_cookie_consent_theme .cc_div .c-bl{
-    border-radius: 1.2em;
-}
+    --cc-cookie-category-block-bg: #dbe5dd;
+    --cc-cookie-category-block-border: var(--cc-cookie-category-block-bg);
+    --cc-cookie-category-block-hover-bg: #ebeff9;
+    --cc-cookie-category-block-hover-border: var(--cc-cookie-category-block-hover-bg);
 
-.pa_cookie_consent_theme .cc_div .c-bn{
-    border-radius: .7em;
-}
+    --cc-toggle-off-bg: #4B9B85;
+    --cc-toggle-readonly-bg: #ACDBC3;
 
-.pa_cookie_consent_theme .c-bn#c-p-bn,
-.pa_cookie_consent_theme .c-bn#s-all-bn{
-    box-shadow: inset 0 0 0 .1rem var(--cc-btn-primary-hover-text);
-}
+    --cc-link-color: var(--cc-btn-primary-bg);
 
+    --cc-overlay-bg: rgba(4, 6, 8, .85) !important;
 
-.pa_cookie_consent_theme #s-bl tbody tr,
-.pa_cookie_consent_theme .cc_div .bar #s-bl tr:hover td::before {
-    transition: background-color .25s ease, color .25s ease
-}
+    --cc-webkit-scrollbar-bg: var(--cc-cookie-category-block-bg);
+    --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-bg);
 
-.pa_cookie_consent_theme #s-bl tbody tr:hover,
-.pa_cookie_consent_theme #s-cnt .b-bn .b-tl:active,
-.pa_cookie_consent_theme #s-cnt .b-bn .b-tl:hover {
-    background: var(--cc-cookie-category-block-bg-hover);
-    color: var(--cc-cookie-category-block-text-hover);
-}
-.pa_cookie_consent_theme .cc_div .bar #s-bl tr:hover td::before {
-    color: var(--cc-cookie-category-block-text-hover);
+    --mobile-logo-size: 5rem;
+    --desktop-logo-size: 8rem;
 }
 
+.pa_cookie_consent_theme #cc-main .cc__link:hover, .pa_cookie_consent_theme #cc-main a:hover {
+    color: var(--cc-link-color)
+}
 
-.pa_cookie_consent_theme #s-hdr,
-.pa_cookie_consent_theme #s-ttl {
+.pa_cookie_consent_theme #cc-main .pm__header,
+.pa_cookie_consent_theme #cc-main .pm__title {
     height: var(--mobile-logo-size);
 }
-.pa_cookie_consent_theme #s-inr {
-    padding-top: var(--mobile-logo-size);
-}
 @media (min-width: 62rem) {
-    .pa_cookie_consent_theme #s-hdr,
-    .pa_cookie_consent_theme #s-ttl {
+    .pa_cookie_consent_theme #cc-main .pm__header,
+    .pa_cookie_consent_theme #cc-main .pm__title {
         height: var(--desktop-logo-size);
     }
-    .pa_cookie_consent_theme #s-inr {
-        padding-top: var(--desktop-logo-size);
-    }
-}
-
+}
diff --git a/src/components/CookieConsentBanner.tsx b/src/components/CookieConsentBanner.tsx
@@ -13,9 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-// eslint-disable-next-line @typescript-eslint/triple-slash-reference
-/// <reference types="vanilla-cookieconsent" />
-
+import 'vanilla-cookieconsent/dist/cookieconsent.css';
+import type { Category, GuiOptions } from 'vanilla-cookieconsent';
+import * as CookieConsent from 'vanilla-cookieconsent';
 import { CookieManager } from '../helper';
 
 import Logo from '../assets/images/logo.svg';
@@ -25,74 +25,40 @@ const cookieManager = new CookieManager();
 const analyticsCookieCategory = 'analytics';
 const cookieExpirationDays = 365;
 
-const handleAnalyticsCategory = (cookie: SavedCookieContent): void => {
-  if (cookie.categories.includes(analyticsCookieCategory)) {
-    cookieManager.setAllAnalyticsCookies(cookieExpirationDays);
-  } else {
-    gaOptout();
-
-    // Clean the unnecessary cookies
-    cookieManager.deleteAllAnalyticsCookies();
-  }
-};
-
-const getGuiOptions = (): GUIOptions => ({
-  consent_modal: {
+const getGuiOptions = (): GuiOptions => ({
+  consentModal: {
     layout: 'cloud',
     position: 'bottom center',
-    transition: 'slide',
-    swap_buttons: false,
+    flipButtons: false,
+    equalWeightButtons: false,
   },
-  settings_modal: {
-    layout: 'bar',
+  preferencesModal: {
+    layout: 'bar wide',
     position: 'right',
-    transition: 'slide',
+    flipButtons: true,
+    equalWeightButtons: false,
   },
 });
 
-const onFirstAction: (
-  userPreferences: UserPreferences,
-  cookie: SavedCookieContent,
-) => void = (userPreferences, cookie) => handleAnalyticsCategory(cookie);
-
-const onAccept: (
-  savedCookieContent: SavedCookieContent,
-) => void = savedCookieContent => handleAnalyticsCategory(savedCookieContent);
-
-const onChange: (
-  cookie: SavedCookieContent,
-  changedCookieCategories: string[],
-) => void = (cookie, changedCookieCategories) => {
-  if (changedCookieCategories.includes(analyticsCookieCategory)) {
-    handleAnalyticsCategory(cookie);
-  }
-};
-
-const getEn = (): LanguageSetting => ({
-  consent_modal: {
+const getEn = (): CookieConsent.Translation => ({
+  consentModal: {
     title: '🍪 Our way of improving your experience!',
     description:
       '<p>This website uses essential cookies to ensure its proper functioning and tracking cookies to analyze your interaction with it. The latter are only activated with your consent.</p></br>' +
-      '<button type="button" data-cc="c-settings" class="cc-link">Manage your settings!</button>',
-    revision_message:
+      '<button type="button" data-cc="show-preferencesModal" class="cc__link">Manage your settings!</button>',
+    revisionMessage:
       '<p>Important update: Our Terms and Conditions have changed. Please take a moment to review our updated policies.</p></br>' +
       'Thank you for your understanding 🙂',
-    primary_btn: { text: 'Accept all', role: 'accept_all' },
-    secondary_btn: { text: 'Deny', role: 'accept_necessary' },
+    acceptAllBtn: 'Accept all',
+    acceptNecessaryBtn: 'Accept only necessary',
   },
 
-  settings_modal: {
+  preferencesModal: {
     title: `<img src="${Logo}" alt="Logo" loading="lazy" style="height: calc(100% - 2rem); margin: 1rem auto;">`,
-    save_settings_btn: 'Save settings',
-    accept_all_btn: 'Accept all',
-    reject_all_btn: 'Reject all',
-    cookie_table_headers: [
-      { name: 'Name' },
-      { domain: 'Domain' },
-      { expiration: 'Expiration' },
-      { description: 'Description' },
-    ],
-    blocks: [
+    savePreferencesBtn: 'Save settings',
+    acceptAllBtn: 'Accept all',
+    acceptNecessaryBtn: 'Accept only necessary',
+    sections: [
       {
         title: 'Cookie settings',
         description:
@@ -102,21 +68,25 @@ const getEn = (): LanguageSetting => ({
         title: 'Essential Cookies',
         description:
           'Essential cookies are necessary for the proper functioning of our website. Without them, the website would not function effectively.',
-        toggle: { value: 'necessary', enabled: true, readonly: true },
+        linkedCategory: 'necessary',
       },
       {
         title: 'Analytics Cookies',
         description:
           'These cookies track your behavior on the website, including the pages you visit and the links you click. All information is anonymous and cannot be used to identify you.',
-        toggle: {
-          value: analyticsCookieCategory,
-          enabled: false,
-          readonly: false,
+        linkedCategory: analyticsCookieCategory,
+        cookieTable: {
+          headers: {
+            name: 'Name',
+            domain: 'Domain',
+            expiration: 'Expiration',
+            description: 'Description',
+          },
+          body: cookieManager.analyticsCookies.map(cookie => ({
+            ...cookie,
+            expiration: `${cookieExpirationDays} days`,
+          })),
         },
-        cookie_table: cookieManager.analyticsCookies.map(cookie => ({
-          ...cookie,
-          expiration: `${cookieExpirationDays} days`,
-        })),
       },
 
       // TODO To uncomment when we have a page for the policy
@@ -129,31 +99,57 @@ const getEn = (): LanguageSetting => ({
   },
 });
 
+const getCategories = (): { [key: string]: Category } => ({
+  necessary: { enabled: true, readOnly: true },
+  [analyticsCookieCategory]: {
+    enabled: false,
+    readOnly: false,
+    autoClear: {
+      cookies: [{ name: /^(_ga|_gid)/ }],
+    },
+    services: {
+      ga: {
+        label: 'Google Analytics',
+        onAccept: () => {
+          cookieManager.setAllAnalyticsCookies(cookieExpirationDays);
+        },
+        onReject: () => {
+          gaOptout();
+
+          // Clean the unnecessary cookies
+          cookieManager.deleteAllAnalyticsCookies();
+        },
+        cookies: [{ name: /^(_ga|_gid)/ }],
+      },
+    },
+  },
+});
+
 export const initCookieConsentBanner = (): void => {
   if (
     process.env.GATSBY_GA_MEASUREMENT_ID &&
-    !document.getElementById('cc--main')
+    !document.getElementById('cc-main')
   ) {
-    const cookieConsent = initCookieConsent();
-    cookieConsent.run({
-      autorun: true,
-      auto_language: 'document',
-      current_lang: 'en',
-      autoclear_cookies: true,
-      cookie_expiration: cookieExpirationDays,
-      force_consent: true,
-      revision: 0,
-      gui_options: getGuiOptions(),
-      onFirstAction,
-      onAccept,
-      onChange,
-      languages: {
-        en: getEn(),
+    void CookieConsent.run({
+      autoClearCookies: true,
+      autoShow: true,
+      cookie: {
+        expiresAfterDays: cookieExpirationDays,
       },
+      disablePageInteraction: true,
+      guiOptions: getGuiOptions(),
+      hideFromBots: true,
+      categories: getCategories(),
+      language: {
+        default: 'en',
+        autoDetect: 'document',
+        translations: { en: getEn() },
+      },
+      lazyHtmlGeneration: true,
+      root: document.body,
+      revision: 0,
     });
 
-    document
-      .getElementById('cc--main')
-      ?.classList.add('pa_cookie_consent_theme');
+    document.documentElement.classList.add('pa_cookie_consent_theme');
   }
 };