[WIP] Implement cookie banner for CON and TP

.vscode/settings.json

@@ -14,7 +14,9 @@
       }
     ]
   },
-  "editor.codeActionsOnSave": { "source.organizeImports": true },
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": "explicit"
+  },
   "explorer.fileNesting.patterns": {
     "*.ts": "${capture}.js, ${capture}.typegen.ts, ${capture}.graphql, ${capture}.generated.ts",
     "*.js": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts",

apps/redi-connect/src/index.html

@@ -7,10 +7,6 @@
       name="Description"
       content="ReDI School Connect platform: to connect mentors with mentees"
     />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
-    />
     <link
       rel="stylesheet"
       href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
@@ -38,41 +34,122 @@
     `npm run build`. -->
     <title>ReDI Connect</title>
 
-    <!--HotJar-->
-    <!-- Hotjar Tracking Code for connect.redi-school.org -->
+    <!-- CookieConsent resources-->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v3.0.0-rc.17/dist/cookieconsent.css"
+    />
+    <script src="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v3.0.0-rc.17/dist/cookieconsent.umd.js"></script>
+
+    <!-- Trigger CookieConsent popover and only enable HotJar and Google Analytics if approved-->
     <script async defer>
-      ;(function (h, o, t, j, a, r) {
-        h.hj =
-          h.hj ||
-          function () {
-            ;(h.hj.q = h.hj.q || []).push(arguments)
+      window.addEventListener('load', () => {
+        setupCookieConsent()
+      })
+
+      function setupCookieConsent() {
+        CookieConsent.run({
+          categories: {
+            necessary: {
+              enabled: true, // this category is enabled by default
+              readOnly: true, // this category cannot be disabled
+            },
+            analytics: {
+              enabled: true,
+            },
+          },
+
+          language: {
+            default: 'en',
+            translations: {
+              en: {
+                consentModal: {
+                  title: '🍪 Cookie Information: Welcome to ReDI Connect.',
+                  description:
+                    'To create the best mentoring experience on ReDI Connect, we use cookies. These cookies are crucial for the smooth operation of our platform and provide insights into how you engage with mentoring content.<br /><br /><em>Your Choices Matter:</em><br /> Click "Accept all" to allow the use of all cookies. If you prefer a personalized approach, select "Cookie Preferences" to manage your preferences.',
+                  acceptAllBtn: 'Accept all',
+                  acceptNecessaryBtn: 'Reject all',
+                  showPreferencesBtn: 'Manage Cookie Preferences',
+                },
+                preferencesModal: {
+                  title: 'Manage cookie preferences',
+                  acceptAllBtn: 'Accept all',
+                  acceptNecessaryBtn: 'Reject all',
+                  savePreferencesBtn: 'Accept current selection',
+                  closeIconLabel: 'Close modal',
+                  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.',
+                    },
+                    {
+                      title: 'Strictly Necessary cookies',
+                      description:
+                        'These cookies are essential for the proper functioning of the website and cannot be disabled.',
+
+                      //this field will generate a toggle linked to the 'necessary' category
+                      linkedCategory: 'necessary',
+                    },
+                    {
+                      title: 'Performance and Analytics',
+                      description:
+                        'Enable these cookies to help us improve our platform by collecting and reporting information on how you use it. The data is anonymized and cannot be used to identify you.',
+                      linkedCategory: 'analytics',
+                    },
+                  ],
+                },
+              },
+            },
+          },
+
+          onConsent: (consentData) => {
+            const allowsAnalytics =
+              consentData.cookie.categories.includes('analytics')
+            if (allowsAnalytics) {
+              initHotjar()
+              initGoogleAnalytics()
+              initSentry()
+            }
+          },
+        })
+      }
+      function initHotjar() {
+        ;(function (h, o, t, j, a, r) {
+          h.hj =
+            h.hj ||
+            function () {
+              ;(h.hj.q = h.hj.q || []).push(arguments)
+            }
+          h._hjSettings = {
+            hjid: 1322938,
+            hjsv: 6,
           }
-        h._hjSettings = {
-          hjid: 1322938,
-          hjsv: 6,
+          a = o.getElementsByTagName('head')[0]
+          r = o.createElement('script')
+          r.async = 1
+          r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv
+          a.appendChild(r)
+        })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=')
+      }
+      function initGoogleAnalytics() {
+        window.dataLayer = window.dataLayer || []
+
+        function gtag() {
+          dataLayer.push(arguments)
         }
-        a = o.getElementsByTagName('head')[0]
-        r = o.createElement('script')
-        r.async = 1
-        r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv
-        a.appendChild(r)
-      })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=')
+        gtag('js', new Date())
+
+        gtag('config', 'UA-140306226-1')
+      }
+      function initSentry() {
+        window.initSentry?.('con')
+      }
     </script>
-    <!-- Global site tag (gtag.js) - Google Analytics -->
+
     <script
       async
       src="https://www.googletagmanager.com/gtag/js?id=UA-140306226-1"
     ></script>
-    <script async defer>
-      window.dataLayer = window.dataLayer || []
-
-      function gtag() {
-        dataLayer.push(arguments)
-      }
-      gtag('js', new Date())
-
-      gtag('config', 'UA-140306226-1')
-    </script>
   </head>
 
   <body>

apps/redi-connect/src/main.tsx

@@ -6,15 +6,11 @@ import App from './App'
 import './services/i18n/i18n'
 import './styles/main.scss'
 
-// Needed for datepicker in <LogMentoringSessionDialog>
-
-// uncomment this to see wasted/unnecessary renders of your components
-// if (process.env.NODE_ENV !== 'production') {
-// const whyDidYouRender = require('@welldone-software/why-did-you-render');
-// whyDidYouRender(React, {include: [/.*/]});
-// }
-
-initSentry('con')
+// We used to call initSentry('con') here. Now we can only init Sentry
+// if user accepts it in the cookie banner. So we expose the function
+// here to window so that cookie banner can call as needed.
+// prettier-ignore
+(window as any).initSentry = initSentry
 
 ReactDOM.render(
   <React.StrictMode>

apps/redi-talent-pool/src/index.html

@@ -7,10 +7,6 @@
       name="Description"
       content="ReDI Talent Pool platform: connecting ReDI jobseekers to jobs at ReDI's partners"
     />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
-    />
     <link
       rel="stylesheet"
       href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
@@ -58,39 +54,120 @@
     `npm run build`. -->
     <title>ReDI Talent Pool</title>
 
-    <!--HotJar-->
-    <!-- Hotjar Tracking Code for connect.redi-school.org -->
-    <!-- Hotjar Tracking Code for https://talent-pool.redi-school.org -->
-    <script>
-      ;(function (h, o, t, j, a, r) {
-        h.hj =
-          h.hj ||
-          function () {
-            ;(h.hj.q = h.hj.q || []).push(arguments)
-          }
-        h._hjSettings = { hjid: 2456374, hjsv: 6 }
-        a = o.getElementsByTagName('head')[0]
-        r = o.createElement('script')
-        r.async = 1
-        r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv
-        a.appendChild(r)
-      })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=')
+    <!-- CookieConsent resources-->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v3.0.0-rc.17/dist/cookieconsent.css"
+    />
+    <script src="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v3.0.0-rc.17/dist/cookieconsent.umd.js"></script>
+
+    <!-- Trigger CookieConsent popover and only enable HotJar and Google Analytics if approved-->
+    <script async defer>
+      window.addEventListener('load', () => {
+        setupCookieConsent()
+      })
+
+      function setupCookieConsent() {
+        CookieConsent.run({
+          categories: {
+            necessary: {
+              enabled: true, // this category is enabled by default
+              readOnly: true, // this category cannot be disabled
+            },
+            analytics: {
+              enabled: true,
+            },
+          },
+
+          language: {
+            default: 'en',
+            translations: {
+              en: {
+                consentModal: {
+                  title: '🍪 Cookie Information: Welcome to ReDI Talent Pool.',
+                  description:
+                    'To create the best mentoring experience on ReDI Talent Pool, we use cookies. These cookies are crucial for the smooth operation of our platform and provide insights into how you engage with mentoring content.<br /><br /><em>Your Choices Matter:</em><br /> Click "Accept all" to allow the use of all cookies. If you prefer a personalized approach, select "Cookie Preferences" to manage your preferences.',
+                  acceptAllBtn: 'Accept all',
+                  acceptNecessaryBtn: 'Reject all',
+                  showPreferencesBtn: 'Manage Cookie Preferences',
+                },
+                preferencesModal: {
+                  title: 'Manage cookie preferences',
+                  acceptAllBtn: 'Accept all',
+                  acceptNecessaryBtn: 'Reject all',
+                  savePreferencesBtn: 'Accept current selection',
+                  closeIconLabel: 'Close modal',
+                  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.',
+                    },
+                    {
+                      title: 'Strictly Necessary cookies',
+                      description:
+                        'These cookies are essential for the proper functioning of the website and cannot be disabled.',
+
+                      //this field will generate a toggle linked to the 'necessary' category
+                      linkedCategory: 'necessary',
+                    },
+                    {
+                      title: 'Performance and Analytics',
+                      description:
+                        'Enable these cookies to help us improve our platform by collecting and reporting information on how you use it. The data is anonymized and cannot be used to identify you.',
+                      linkedCategory: 'analytics',
+                    },
+                  ],
+                },
+              },
+            },
+          },
+
+          onConsent: (consentData) => {
+            const allowsAnalytics =
+              consentData.cookie.categories.includes('analytics')
+            if (allowsAnalytics) {
+              initHotjar()
+              initGoogleAnalytics()
+              initSentry()
+            }
+          },
+        })
+      }
+      function initHotjar() {
+        ;(function (h, o, t, j, a, r) {
+          h.hj =
+            h.hj ||
+            function () {
+              ;(h.hj.q = h.hj.q || []).push(arguments)
+            }
+          h._hjSettings = { hjid: 2456374, hjsv: 6 }
+          a = o.getElementsByTagName('head')[0]
+          r = o.createElement('script')
+          r.async = 1
+          r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv
+          a.appendChild(r)
+        })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=')
+      }
+      function initGoogleAnalytics() {
+        window.dataLayer = window.dataLayer || []
+
+        function gtag() {
+          dataLayer.push(arguments)
+        }
+        gtag('js', new Date())
+
+        gtag('config', 'UA-140306226-1')
+      }
+      function initSentry() {
+        window.initSentry?.('tp')
+      }
     </script>
+
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script
       async
       src="https://www.googletagmanager.com/gtag/js?id=UA-140306226-1"
     ></script>
-    <script async defer>
-      window.dataLayer = window.dataLayer || []
-
-      function gtag() {
-        dataLayer.push(arguments)
-      }
-      gtag('js', new Date())
-
-      gtag('config', 'UA-140306226-1')
-    </script>
   </head>
 
   <body>

apps/redi-talent-pool/src/main.tsx

@@ -5,15 +5,12 @@ import App from './App'
 // import i18n (needs to be bundled ;))
 import './main.scss'
 import './services/i18n/i18n'
-// Needed for datepicker in <LogMentoringSessionDialog>
 
-// uncomment this to see wasted/unnecessary renders of your components
-// if (process.env.NODE_ENV !== 'production') {
-// const whyDidYouRender = require('@welldone-software/why-did-you-render');
-// whyDidYouRender(React, {include: [/.*/]});
-// }
-
-initSentry('tp')
+// We used to call initSentry('con') here. Now we can only init Sentry
+// if user accepts it in the cookie banner. So we expose the function
+// here to window so that cookie banner can call as needed.
+// prettier-ignore
+(window as any).initSentry = initSentry
 
 ReactDOM.render(
   <React.StrictMode>