feat(con/tp): activate cookie banner

talent-connect · May 26, 2024 · b8ba7ae · b8ba7ae
1 parent 5904923
commit b8ba7ae
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 31 deletions.
diff --git a/apps/redi-connect/src/assets/locales/en/translation.json b/apps/redi-connect/src/assets/locales/en/translation.json
@@ -35,8 +35,8 @@
         "name": "Transparency"
       },
       {
-        "url": "https://www.redi-school.org/imprint/",
-        "name": "Cookie policy"
+        "name": "Cookie settings",
+        "triggerCookieSettingsGlobalFunction": true
       },
       {
         "url": "https://www.redi-school.org/data-privacy-policy/",

diff --git a/apps/redi-connect/src/components/organisms/Footer.tsx b/apps/redi-connect/src/components/organisms/Footer.tsx
@@ -1,8 +1,8 @@
 import { SocialMediaIcons } from '@talent-connect/shared-atomic-design-components'
 import { Columns, Container, Element, Section } from 'react-bulma-components'
 import { useTranslation } from 'react-i18next'
-import DeloitteLogo from '../../assets/images/deloitte-logo.png'
 import JpmLogo from '../../assets/images/Jpm-logo.png'
+import DeloitteLogo from '../../assets/images/deloitte-logo.png'
 import { ReactComponent as RediSchool } from '../../assets/images/redi-school-logo.svg'
 import './Footer.scss'
 
@@ -18,8 +18,18 @@ const RediFooter = () => {
   const legalLinks: Array<{
     url: string
     name: string
+    triggerCookieSettingsGlobalFunction: boolean
   }> = t('footer.legalLinks', { returnObjects: true })
 
+  const handleCookieSettingsClick = () => {
+    if (
+      typeof window !== 'undefined' &&
+      typeof (window as any).resetCookieConsent === 'function'
+    ) {
+      ;(window as any).resetCookieConsent()
+    }
+  }
+
   return (
     <footer className="footer">
       <Section>
@@ -109,6 +119,11 @@ const RediFooter = () => {
                     <Element
                       renderAs="a"
                       href={link.url}
+                      onClick={
+                        link.triggerCookieSettingsGlobalFunction
+                          ? () => handleCookieSettingsClick()
+                          : undefined
+                      }
                       target="_blank"
                       className="footer__link"
                     >

diff --git a/apps/redi-connect/src/index.html b/apps/redi-connect/src/index.html
@@ -44,11 +44,17 @@
     <!-- Trigger CookieConsent popover and only enable HotJar and Google Analytics if approved-->
     <script async defer>
       window.addEventListener('load', () => {
-        // setupCookieConsent()
-        initHotjar()
-        initGoogleAnalytics()
-        initSentry()
+        setupCookieConsent()
       })
+      function resetCookieConsent() {
+        // Crude but effective: remove the stored cookie consent
+        // preferences, then reload, which will trigger the cookie consent
+        // popover to show again. I didn't find a way to programmatically
+        // tell CookieConsent to reset/show the popover modal again.
+        document.cookie =
+          document.cookie = `cc_cookie=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=${window.location.hostname};`
+        window.location.reload()
+      }
 
       function setupCookieConsent() {
         CookieConsent.run({
@@ -83,7 +89,7 @@
                   sections: [
                     {
                       description:
-                        'At ReDI School, we value your privacy and strive to provide you with control over your online experience. Please customize your cookie settings below to align with your preferences.',
+                        'At ReDI School, we care about your privacy and want to give you choices about your online experience. You can adjust your cookie settings below to match what you prefer. You can withdraw your consent at any time via clicking a button in the footer of the website. For more information about cookies please refer to our Data Privacy Policy.',
                     },
                     {
                       title: 'Strictly Necessary cookies',
@@ -109,14 +115,15 @@
             const allowsAnalytics =
               consentData.cookie.categories.includes('analytics')
             if (allowsAnalytics) {
-              initHotjar()
-              initGoogleAnalytics()
-              initSentry()
+              console.log('analytics allowed')
+              bootstrapHotjar()
+              bootstrapGoogleAnalytics()
+              bootstrapSentry()
             }
           },
         })
       }
-      function initHotjar() {
+      function bootstrapHotjar() {
         ;(function (h, o, t, j, a, r) {
           h.hj =
             h.hj ||
@@ -134,7 +141,7 @@
           a.appendChild(r)
         })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=')
       }
-      function initGoogleAnalytics() {
+      function bootstrapGoogleAnalytics() {
         window.dataLayer = window.dataLayer || []
 
         function gtag() {
@@ -144,7 +151,7 @@
 
         gtag('config', 'UA-140306226-1')
       }
-      function initSentry() {
+      function bootstrapSentry() {
         window.initSentry?.('con')
       }
     </script>

diff --git a/apps/redi-talent-pool/src/assets/locales/en/translation.json b/apps/redi-talent-pool/src/assets/locales/en/translation.json
@@ -35,8 +35,8 @@
         "name": "Transparency"
       },
       {
-        "url": "https://www.redi-school.org/imprint/",
-        "name": "Cookie policy"
+        "name": "Cookie settings",
+        "triggerCookieSettingsGlobalFunction": true
       },
       {
         "url": "https://www.redi-school.org/data-privacy-policy/",

diff --git a/apps/redi-talent-pool/src/components/organisms/Footer.tsx b/apps/redi-talent-pool/src/components/organisms/Footer.tsx
@@ -1,11 +1,10 @@
 import { SocialMediaIcons } from '@talent-connect/shared-atomic-design-components'
-import React from 'react'
 import { Columns, Container, Element, Section } from 'react-bulma-components'
 import { useTranslation } from 'react-i18next'
-import { ReactComponent as RediSchool } from '../../assets/redi-school-logo.svg'
-import MicrosoftLogo from '../../assets/images/microsoft-logo.png'
-import DeloitteLogo from '../../assets/images/deloitte-logo.png'
 import JpmLogo from '../../assets/images/Jpm-logo.png'
+import DeloitteLogo from '../../assets/images/deloitte-logo.png'
+import MicrosoftLogo from '../../assets/images/microsoft-logo.png'
+import { ReactComponent as RediSchool } from '../../assets/redi-school-logo.svg'
 import './Footer.scss'
 
 const RediFooter = () => {
@@ -20,8 +19,18 @@ const RediFooter = () => {
   const legalLinks: Array<{
     url: string
     name: string
+    triggerCookieSettingsGlobalFunction: boolean
   }> = t('footer.legalLinks', { returnObjects: true })
 
+  const handleCookieSettingsClick = () => {
+    if (
+      typeof window !== 'undefined' &&
+      typeof (window as any).resetCookieConsent === 'function'
+    ) {
+      ;(window as any).resetCookieConsent()
+    }
+  }
+
   return (
     <footer className="footer">
       <Section>
@@ -116,6 +125,11 @@ const RediFooter = () => {
                     <Element
                       renderAs="a"
                       href={link.url}
+                      onClick={
+                        link.triggerCookieSettingsGlobalFunction
+                          ? () => handleCookieSettingsClick()
+                          : undefined
+                      }
                       target="_blank"
                       className="footer__link"
                     >

diff --git a/apps/redi-talent-pool/src/index.html b/apps/redi-talent-pool/src/index.html
@@ -64,11 +64,17 @@
     <!-- Trigger CookieConsent popover and only enable HotJar and Google Analytics if approved-->
     <script async defer>
       window.addEventListener('load', () => {
-        // setupCookieConsent()
-        initHotjar()
-        initGoogleAnalytics()
-        initSentry()
+        setupCookieConsent()
       })
+      function resetCookieConsent() {
+        // Crude but effective: remove the stored cookie consent
+        // preferences, then reload, which will trigger the cookie consent
+        // popover to show again. I didn't find a way to programmatically
+        // tell CookieConsent to reset/show the popover modal again.
+        document.cookie =
+          document.cookie = `cc_cookie=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=${window.location.hostname};`
+        window.location.reload()
+      }
 
       function setupCookieConsent() {
         CookieConsent.run({
@@ -103,7 +109,7 @@
                   sections: [
                     {
                       description:
-                        'At ReDI School, we value your privacy and strive to provide you with control over your online experience. Please customize your cookie settings below to align with your preferences.',
+                        'At ReDI School, we care about your privacy and want to give you choices about your online experience. You can adjust your cookie settings below to match what you prefer. You can withdraw your consent at any time via clicking a button in the footer of the website. For more information about cookies please refer to our Data Privacy Policy.',
                     },
                     {
                       title: 'Strictly Necessary cookies',
@@ -129,14 +135,14 @@
             const allowsAnalytics =
               consentData.cookie.categories.includes('analytics')
             if (allowsAnalytics) {
-              initHotjar()
-              initGoogleAnalytics()
-              initSentry()
+              bootstrapHotjar()
+              bootstrapGoogleAnalytics()
+              bootstrapSentry()
             }
           },
         })
       }
-      function initHotjar() {
+      function bootstrapHotjar() {
         ;(function (h, o, t, j, a, r) {
           h.hj =
             h.hj ||
@@ -151,7 +157,7 @@
           a.appendChild(r)
         })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=')
       }
-      function initGoogleAnalytics() {
+      function bootstrapGoogleAnalytics() {
         window.dataLayer = window.dataLayer || []
 
         function gtag() {
@@ -161,7 +167,7 @@
 
         gtag('config', 'UA-140306226-1')
       }
-      function initSentry() {
+      function bootstrapSentry() {
         window.initSentry?.('tp')
       }
     </script>