[Westminster] Add cookie banner.

templates/web/westminster/footer_extra_js.html

@@ -6,3 +6,45 @@
     );
 END
 %]
+
+[% IF c.config.BASE_URL == "https://www.fixmystreet.com" OR c.config.BASE_URL == 'https://staging.fixmystreet.com';
+    scripts.push( version('/cobrands/westminster/vendor/banner.js') );
+%]
+<div class="westminster-cookie-banner">
+    <div class="alert cookiealert" role="alert">
+      <div class="row p-6">
+        <div class="col text-left">
+          <div>
+            <span class="header-4 text-white"
+              >We use cookies on this site to enhance your user experience</span
+            >
+            <p>By clicking the Accept button, you agree to us doing so.</p>
+            <div>
+              <a
+                href="https://www.westminster.gov.uk/data-protection/privacy"
+                class="text-link-colour underline hover:text-link-hover-colour"
+                target="_blank"
+                rel="noopener noreferrer"
+                >More info on our cookie policy</a
+              >
+            </div>
+          </div>
+        </div>
+        <div class="col ml-auto text-right">
+          <div class="text-center">
+            <button
+              type="button"
+              id="cookiepolicy"
+              class="primary-button bg-button-default"
+            >
+              Accept cookies policy
+            </button>
+            <div class="mt-3">
+              <a href="/report-it" id="declinepolicy">Decline cookies policy</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+</div>
+[% END %]

web/cobrands/westminster/base.scss

@@ -272,3 +272,126 @@ body.alertpage, body.authpage, body.twothirdswidthpage {
         @include btn-medium-primary
     }
 }
+
+.westminster-cookie-banner {
+    *, ::before, ::after {
+        box-sizing: border-box;
+        border-width: 0;
+        border-style: solid;
+        border-color: #e5e7eb;
+    }
+
+    .cookiealert.show {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0%);
+        transition: all 200ms;
+    }
+
+    .cookiealert {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        margin: 0 !important;
+        z-index: 999;
+        opacity: 0;
+        visibility: hidden;
+        border-radius: 0;
+        transform: translateY(100%);
+        transition: all 200ms ease-out;
+        color: #fff;
+        background: #0B2265;
+        border-top: 0.4rem solid #ffd420;
+        font-family: "Source Sans Pro" !important;
+        font-size: 19px;
+        line-height: 1.78125rem;
+    }
+
+
+    .row {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        flex-flow: row wrap;
+        position: relative;
+    }
+
+    .p-6 {
+        padding: 1.5rem;
+    }
+
+    .text-left {
+        text-align: left;
+    }
+
+    .text-right {
+        text-align: right;
+    }
+
+    .text-center {
+        text-align: center;
+    }
+
+    .ml-auto {
+        margin-left: auto;
+    }
+
+
+    .header-4 {
+        font-size: 1.5rem;
+        font-family: "Source Sans Pro";
+        letter-spacing: 0;
+        color: #0B2265;
+        line-height: 1.9375rem;
+    }
+
+    .cookiealert p {
+        font-size: 1.0625rem;
+        line-height: 1.59375rem;
+        margin-top: 0;
+        margin-bottom: 0.625rem;
+    }
+
+    .cookiealert a {
+        color: #ffffff;
+        text-decoration: underline;
+    }
+
+    .text-link-colour {
+        color: rgb(0, 89, 175);
+    }
+
+    .text-white {
+        color: rgb(255, 255, 255);
+    }
+
+    button, [type='button'] {
+        background-color: transparent;
+        background-image: none;
+        cursor: pointer;
+        text-transform: none;
+    }
+
+    .primary-button {
+        font-size: 1.1475rem;
+        line-height: 1.336rem;
+        background-color: #0335ff;
+        color: #ffffff;
+        padding: 0.5em;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        box-shadow: 0 0.125rem 0.735rem 0 rgba(0, 0, 0, 0.3);
+        outline: none;
+        border-radius: 0.4rem;
+    }
+
+    .bg-button-default {
+        background-color: rgb(3, 53, 255);
+    }
+
+    .mt-3 {
+        margin-top: 0.75rem;
+    }
+}

web/cobrands/westminster/vendor/banner.js

@@ -0,0 +1,66 @@
+const reportItCookieDefault = "westminster-city-council_cookiecontrol-version";
+const reportItCookieDefaultContent = "1.0.0";
+const reportItCookie = "westminster-city-council_cookiecontrol";
+const reportItCookieContent = "2";
+const googleTagManagerUrl =
+  "https://www.googletagmanager.com/gtag/js?id=G-89XXDEKFEX";
+const cookiePolicyButton = document.querySelector("#cookiepolicy");
+const cookieAlert = document.querySelector(".cookiealert");
+const declineLink = document.querySelector("#declinepolicy");
+
+const loadGoogleAnalyticsScripts = () => {
+  var script1 = document.createElement("script");
+  script1.async = true;
+  script1.src = googleTagManagerUrl;
+
+  var script2 = document.createElement("script");
+  script2.innerHTML = `
+window.dataLayer = window.dataLayer || [];
+function gtag(){dataLayer.push(arguments);}
+gtag('js', new Date());
+gtag('config', 'G-89XXDEKFEX');
+`;
+
+  document.body.appendChild(script1);
+  document.body.appendChild(script2);
+};
+
+const isScriptAdded = (scriptUrl) => {
+  const scripts = document.getElementsByTagName("script");
+  const scriptExists = [...scripts].some((script) => script.src === scriptUrl);
+  return scriptExists;
+};
+
+const removeBanner = () => cookieAlert.classList.remove("show");
+
+const placeGoogleAnalyticsCookie = () => {
+  document.cookie = `${reportItCookie}=${reportItCookieContent}`;
+  document.cookie = `${reportItCookieDefault}=${reportItCookieDefaultContent}`;
+  if (!isScriptAdded(googleTagManagerUrl)) {
+    loadGoogleAnalyticsScripts();
+  }
+  removeBanner();
+};
+
+const declineCookie = (event) => {
+  event.preventDefault();
+  document.cookie = `${reportItCookieDefault}=${reportItCookieDefaultContent}`;
+  removeBanner();
+};
+
+cookiePolicyButton.addEventListener("click", () =>
+  placeGoogleAnalyticsCookie()
+);
+declineLink.addEventListener("click", (event) => declineCookie(event));
+
+window.addEventListener("load", () => {
+  const cookie = document.cookie;
+  if (cookie.includes(reportItCookieDefault)) {
+    cookieAlert.classList.remove("show");
+  } else {
+    cookieAlert.classList.add("show");
+  }
+  if (cookie.includes(reportItCookie) && !isScriptAdded(googleTagManagerUrl)) {
+    loadGoogleAnalyticsScripts();
+  }
+});