From cdacabab094445b7485fcaee7904b8e1cd77e94f Mon Sep 17 00:00:00 2001
From: Sergio Eduardo Castro Ceballos
 <72516762+SergioCasCeb@users.noreply.github.com>
Date: Tue, 30 Apr 2024 23:12:07 +0200
Subject: [PATCH] Implemented the analytics consent banner for Playground

---
 packages/web/src/scripts/consent-banner.js  | 57 ++++++++++++++
 packages/web/src/scripts/main.js            |  2 +
 packages/web/src/styles/_settings-menu.scss | 19 +++--
 packages/web/src/styles/styles.scss         | 85 ++++++++++++++++++++-
 packages/web/src/template.html              | 56 +++++++++++++-
 5 files changed, 204 insertions(+), 15 deletions(-)
 create mode 100644 packages/web/src/scripts/consent-banner.js

diff --git a/packages/web/src/scripts/consent-banner.js b/packages/web/src/scripts/consent-banner.js
new file mode 100644
index 00000000..f02cc281
--- /dev/null
+++ b/packages/web/src/scripts/consent-banner.js
@@ -0,0 +1,57 @@
+const analyticsAcceptBtn = document.getElementById("accept-analytics-btn")
+const analyticsDeclineBtn = document.getElementById("decline-analytics-btn")
+const analyticsBanner = document.getElementById("analytics-banner")
+const manageAnalyticsLink = document.getElementById("consent-link")
+
+// Show banner if the user has not set any preference
+if(localStorage.getItem('consentMode') === null){
+    analyticsBanner.classList.remove("hidden")
+}
+
+// Open analytics banner when clicking on the cookie manager link
+manageAnalyticsLink.addEventListener("click", () => {
+    analyticsBanner.classList.remove("hidden")
+})
+
+//If analytics are rejected, close the banner and update the new user preference
+analyticsDeclineBtn.addEventListener("click", () => {
+    analyticsBanner.classList.add("hidden")
+
+    const consentPreferences = {
+        'ad_storage': 'denied',
+        'analytics_storage': 'denied',
+        'ad_user_data': 'denied',
+        'ad_personalization': 'denied',
+        'personalization_storage': 'denied',
+        'functionality_storage': 'denied',
+        'security_storage': 'denied',
+    }
+
+    updateConsentMode(consentPreferences)
+})
+
+//If analytics are accepted, close the banner and update the new user preference
+analyticsAcceptBtn.addEventListener("click", () => {
+    analyticsBanner.classList.add("hidden")
+
+    const consentPreferences = {
+        'ad_storage': 'denied',
+        'analytics_storage': 'granted',
+        'ad_user_data': 'denied',
+        'ad_personalization': 'denied',
+        'personalization_storage': 'denied',
+        'functionality_storage': 'denied',
+        'security_storage': 'denied',
+    }
+
+    updateConsentMode(consentPreferences)
+})
+
+/**
+ * Update the user preferences to grant or decline google analytics tracking
+ * @param { Object } preferences 
+ */
+function updateConsentMode(preferences) {
+    gtag('consent', 'update', preferences)
+    localStorage.setItem('consentMode', JSON.stringify(preferences))
+}
\ No newline at end of file
diff --git a/packages/web/src/scripts/main.js b/packages/web/src/scripts/main.js
index 45ceb027..2a1bcd96 100644
--- a/packages/web/src/scripts/main.js
+++ b/packages/web/src/scripts/main.js
@@ -20,6 +20,7 @@
  * to integrate the monaco editor
  */
 
+import './consent-banner'
 import './visualize'
 import './editor'
 import './json-yaml'
@@ -34,6 +35,7 @@ import './defaults'
 import './visualize'
 import './validation'
 
+
 /***********************************************************/
 /*                          Loader                         */
 /***********************************************************/
diff --git a/packages/web/src/styles/_settings-menu.scss b/packages/web/src/styles/_settings-menu.scss
index 5e2140df..e2e97362 100644
--- a/packages/web/src/styles/_settings-menu.scss
+++ b/packages/web/src/styles/_settings-menu.scss
@@ -31,7 +31,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
-    z-index: 100;
+    z-index: 80;
 
     .settings {
         width: 100%;
@@ -72,7 +72,6 @@
 
                 label {
                     font-size: var(--fs-p);
-                    max-width: 10ch;
                 }
 
                 input[type="checkbox"] {
@@ -261,17 +260,21 @@
             display: flex;
             flex-direction: row;
             align-items: center;
-            justify-content: center;
+            justify-content: space-between;
 
 
             a {
-                font-size: 1.2rem;
-                padding: 0 1rem;
+                font-size: 1.1rem;
                 height: 100%;
+                text-wrap: nowrap;
+                font-weight: bold;
+            }
 
-                &:not(:last-child) {
-                    border-right: 1px solid var(--clr-neutral-50);
-                }
+            &__separator {
+                height: 1rem;
+                width: 1px;
+                background-color: var(--clr-neutral-50);
+                margin: 0 .5rem;
             }
         }
     }
diff --git a/packages/web/src/styles/styles.scss b/packages/web/src/styles/styles.scss
index f471de69..94d6552f 100644
--- a/packages/web/src/styles/styles.scss
+++ b/packages/web/src/styles/styles.scss
@@ -40,18 +40,23 @@
     --fs-h2: 2.5rem;
     --fs-sub-header: 1.75rem;
     --fs-p: 1.2rem;
+    --fs-p-lg: 1.4rem;
     --fs-footer: 0.8rem;
     --fs-i: 1.4rem;
 
-    //responsive font size values
-    --fs-h1: clamp(2rem, 1.8rem + 0.625vw, 3rem);
-    --fs-h2: clamp(2rem, 1.8rem + 0.625vw, 3rem);
-    --fs-h3: clamp(1.5rem, 1.3rem + 0.625vw, 2.5rem);
+    //Fluid typography values
+    //Min viewport value: 20rem = 320px
+    //Max viewport value: 120rem = 1920px
+    --fs-h1: clamp(2rem, 1.8rem + 1vw, 3rem);
+    --fs-h2: clamp(2rem, 1.8rem + 1vw, 3rem);
+    --fs-h3: clamp(1.5rem, 1.3rem + 1vw, 2.5rem);
     --fs-sub-header: clamp(1.25rem, 1.05rem + 1vw, 2.25rem);
     --fs-p: clamp(1rem, 0.92rem + 0.3999999999999999vw, 1.4rem);
+    --fs-p-lg: clamp(1.2rem, 1.1199999999999999rem + 0.4000000000000002vw, 1.6rem);
     --fs-footer: clamp(0.8rem, 0.76rem + 0.19999999999999996vw, 1rem);
     --fs-i: clamp(1.2rem, 1.04rem + 0.8vw, 2rem);
 
+
     /*line heights*/
     --lh-h1: 4rem;
     --lh-h2: 4rem;
@@ -405,6 +410,78 @@ main {
     }
 }
 
+/** Analytics banner **/
+.analytics-banner{
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 90;
+    width: 100%;
+    padding: 2rem;
+    background-color: var(--clr-neutral-900);
+    box-shadow: 0px -5px 10px var(--clr-neutral-300);
+
+    &.hidden {
+        display: none;
+    }
+
+    &__disclaimer {
+        color: var(--clr-neutral-100);
+
+        & > *{
+            margin-bottom: 1rem;
+        }
+
+        h4 {
+            font-size: var(--fs-h2);
+            color: var(--clr-controls-bg);
+        }
+
+        p {
+            font-size: var(--fs-p-lg);
+
+            a {
+                text-decoration: underline;
+                color: var(--clr-neutral-300);
+            }
+        }
+    }
+
+    &__interactions {
+        margin-top: 2rem;
+
+        button {
+            appearance:unset;
+            padding: 0.75rem 1.75rem;
+            min-width: 9rem;
+            cursor: pointer;
+            border: 2px solid var(--clr-controls-bg);
+            border-radius: 5px;
+            font-size: var(--fs-p-lg);
+            font-weight: var(--fw-bold);
+            transition: all 250ms ease-in-out;
+
+            &.decline-btn {
+                background-color: transparent;
+                color: var(--clr-controls-bg);
+                margin-right: 1rem;
+            }
+
+            &.accept-btn{
+                background-color: var(--clr-controls-bg);
+                color: var(--clr-controls);
+            }
+
+            &:hover {
+                background-color: var(--clr-primary-900);
+                color: var(--clr-controls);
+                border-color: var(--clr-primary-900);
+            }
+        }
+
+    }
+}
+
 @keyframes fade{
     0%{opacity: 1;}
     50%{opacity: .1;}
diff --git a/packages/web/src/template.html b/packages/web/src/template.html
index 874d8894..c0d28571 100644
--- a/packages/web/src/template.html
+++ b/packages/web/src/template.html
@@ -37,6 +37,36 @@
     <link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#33b8a4">
     <meta name="msapplication-TileColor" content="#33b8a4">
     <meta name="theme-color" content="#33b8a4">
+
+    <!-- Google Consent Default State -->
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+
+        if (localStorage.getItem('consentMode') === null) {
+            gtag('consent', 'default', {
+                'ad_storage': 'denied',
+                'analytics_storage': 'denied',
+                'ad_user_data': 'denied',
+                'ad_personalization': 'denied',
+                'personalization_storage': 'denied',
+                'functionality_storage': 'denied',
+                'security_storage': 'denied',
+            });
+        }
+        else {
+            gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')))
+        }
+    </script>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-FTBPVB8Z65"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+        gtag('js', new Date());
+        gtag('config', 'G-FTBPVB8Z65');
+    </script>
+    <!-- Google tag end -->
 </head>
 
 <body>
@@ -974,21 +1004,27 @@ <h3 class="settings__preferences">Preferences</h3>
 
             <footer>
                 <div class="project-links">
-                    <p class="thingweb-link"><a href="https://www.thingweb.io/" target="_blank" id="thingweb-link">© 2024 The Eclipse Thingweb
-                            Project</a></p>
+                    <p class="thingweb-link"><a href="https://www.thingweb.io/" target="_blank" id="thingweb-link">©
+                            2024 The Eclipse Thingweb Project</a></p>
                     <p class="netlify-link">This site is powered by <a href="https://www.netlify.com" target="_blank"
                             id="netlify-link">Netlify</a></p>
                 </div>
 
                 <div class="footer-links">
                     <a href="https://www.eclipse.org" target="_blank" id="eclipse-link">Eclipse</a>
+                    <div class="footer-links__separator"></div>
                     <a href="https://www.eclipse.org/legal/privacy.php" target="_blank" id="privacy-link">Privacy
                         Policy</a>
+                    <div class="footer-links__separator"></div>
                     <a href="https://www.eclipse.org/legal/termsofuse.php" target="_blank" id="terms-link">Terms of
                         Use</a>
+                    <div class="footer-links__separator"></div>
                     <a href="https://www.eclipse.org/legal/copyright.php" target="_blank" id="copyright-link">Copyright
                         Agent</a>
+                    <div class="footer-links__separator"></div>
                     <a href="https://www.eclipse.org/legal/" target="_blank" id="legal-link">Legal</a>
+                    <div class="footer-links__separator"></div>
+                    <a href="#" id="consent-link">Manage Consent</a>
                 </div>
             </footer>
         </div>
@@ -1149,8 +1185,22 @@ <h3>Warning!</h3>
                 </div>
             </div>
         </div>
-
     </main>
+
+    <div class="analytics-banner hidden" id="analytics-banner">
+        <div class="analytics-banner__disclaimer">
+            <h4>Site Analytics Consent</h4>
+            <p>We are an open-source project under the Eclipse Foundation. This means that without your consent
+                we don't track anything at all and even with consent we don't track any personal information, we
+                only look at the website usage statistics. For more details, check out the <a
+                    href="https://www.eclipse.org/legal/privacy.php">Eclipse Foundation Privacy Policy.</a></p>
+            <p>You can change your preference later at the <b>Manage Consent</b> link in the settings menu.</p>
+        </div>
+        <form action="#" class="analytics-banner__interactions">
+            <button type="button" class="decline-btn" id="decline-analytics-btn">Decline</button>
+            <button type="button" class="accept-btn" id="accept-analytics-btn">Allow</button>
+        </form>
+    </div>
 </body>
 
 </html>
\ No newline at end of file