@worksafevictoria/wcl7.5 1.0.0

package/src/components/Global/Cookies/index.vue

@@ -0,0 +1,453 @@
+<template>
+  <container id="mainCookieContainer" class="hide">
+    <row class="cookie-container">
+      <column class="cookie-container__col">
+        <h3 id="cookie_header" class="cookie-header hidden-on-xs">
+          {{ cookieContent.header }}
+        </h3>
+        <div id="cookie_header_xs" class="cookie-header-xs display-on-xs">
+          {{ cookieContent.header }}
+        </div>
+        <div class="cookie-content">
+          <div v-if="screenWidth > 350">
+            {{ cookieContent.content.default }}
+          </div>
+          <div v-else-if="screenWidth <= 350">
+            {{ cookieContent.content.small }}
+          </div>
+        </div>
+      </column>
+      <column class="cookie-container__col  hidden-on-xs">
+        <div class="cookie-buttons mt-md-3">
+          <button
+            id="moreBtn"
+            v-b-modal.cookieModal
+            role="button"
+            class="cookieBtn moreOptions"
+            aria-label="More cookie options"
+          >
+            More options
+          </button>
+          <button
+            id="accept_all"
+            role="button"
+            class="cookieBtn yellow hasIcon"
+            style="order:1;"
+            aria-label="Accept all cookies"
+            @click="
+              clickedCookie('accept')
+              fireGTM()
+            "
+          >
+            Accept all
+          </button>
+          <button
+            id="reject_all"
+            role="button"
+            class="cookieBtn black hasIcon"
+            style="order:2;"
+            aria-label="Reject all cookies"
+            @click="
+              clickedCookie('reject')
+              fireGTM()
+              checkCookie()
+            "
+          >
+            Reject all
+          </button>
+        </div>
+      </column>
+      <row class="cookie-links col mt-3 display-on-xs">
+        <div>
+          <a id="moreLink" href="#" @click="$bvModal.show('cookieModal')"
+            >More options</a
+          >
+          <a
+            id="acceptAllLink"
+            href="#"
+            @click="
+              clickedCookie('accept')
+              fireGTM()
+            "
+            >Accept all</a
+          >
+          <a
+            id="rejectAllLink"
+            href="#"
+            @click="
+              clickedCookie('reject')
+              fireGTM()
+              checkCookie()
+            "
+            >Reject all</a
+          >
+        </div>
+      </row>
+    </row>
+
+    <b-modal
+      id="cookieModal"
+      refs="cookieModal"
+      :visible="visible"
+      role="dialog"
+      scrollable
+      @hidden="reset"
+    >
+      <div slot="modal-title" class="modal-heading">
+        {{ cookieContent.modal.heading }}
+      </div>
+      <div class="modal-content">
+        <fieldset>
+          <row>
+            <column>
+              <h5>{{ cookieContent.modal.functional.heading }}</h5>
+            </column>
+            <column>
+              <label for="modal1CB" class="option"
+                >Necessary<span class="sr-only">functional label</span>
+                <input
+                  id="modal1CB"
+                  type="checkbox"
+                  value="functional"
+                  checked
+                  disabled
+              /></label>
+            </column>
+          </row>
+          <row>
+            <column class="modal-description">{{
+              cookieContent.modal.functional.description
+            }}</column>
+          </row>
+          <hr />
+          <row>
+            <column>
+              <h5>{{ cookieContent.modal.analytics.heading }}</h5>
+            </column>
+            <column>
+              <label for="modal2CB" class="option"
+                ><span class="sr-only">analytics checkbox</span>
+                <input
+                  id="modal2CB"
+                  type="checkbox"
+                  name="modal2CB"
+                  value="analytics"
+              /></label>
+            </column>
+          </row>
+          <row>
+            <column class="modal-description">{{
+              cookieContent.modal.analytics.description
+            }}</column>
+          </row>
+          <hr />
+          <row>
+            <column>
+              <h5>{{ cookieContent.modal.marketing.heading }}</h5>
+            </column>
+            <column text-align="right">
+              <label for="modal3CB" class="option"
+                ><span class="sr-only">marketing checkbox</span>
+                <input
+                  id="modal3CB"
+                  type="checkbox"
+                  name="modal3CB"
+                  value="marketing"
+              /></label>
+            </column>
+          </row>
+          <row>
+            <column class="modal-description">{{
+              cookieContent.modal.marketing.description
+            }}</column>
+          </row>
+        </fieldset>
+      </div>
+      <div slot="modal-footer">
+        <button
+          id="modal_save"
+          type="button"
+          role="button"
+          class="cookieBtn yellow hasIcon"
+          style="order:1;"
+          aria-label="Save cookie settings"
+          @click="
+            clickedCookie('save')
+            fireGTM()
+            checkCookie()
+            $bvModal.hide('cookieModal')
+          "
+        >
+          Save
+        </button>
+        <button
+          id="modal_accept"
+          type="button"
+          role="button"
+          class="cookieBtn black hasIcon"
+          style="order:2;"
+          data-bs-dismiss="cookieModal"
+          aria-label="Accept all cookies"
+          @click="
+            clickedCookie('accept')
+            fireGTM()
+            $bvModal.hide('cookieModal')
+          "
+        >
+          Accept all
+        </button>
+      </div>
+    </b-modal>
+  </container>
+</template>
+
+<script>
+import { Container, Row, Column } from '../../../index.vue'
+import { analyticsCookies, marketingCookies } from './Constants'
+
+export default {
+  name: 'Cookies',
+  components: {
+    Container,
+    Row,
+    Column
+  },
+  props: {
+    cookieHeader: {
+      type: String,
+      default: 'Accept and Reject Cookies'
+    },
+    cookieContent: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      modalTitle: this.modalHeading,
+      analyticsCookies,
+      marketingCookies,
+      screenWidth: 0
+    }
+  },
+  computed: {
+    visible() {
+      return this.item === null
+    },
+    showCookie() {
+      //Check first if cookies have been turned on in the environment variable
+      if (process.env.SHOW_COOKIE === 'true') {
+        return 'true'
+      } else {
+        return 'false'
+      }
+    }
+  },
+  mounted() {
+    // required, as unable to check localStorage until window loaded
+    window.addEventListener('load', this.checkCookie())
+    // detect screen size to display smaller content
+    this.screenWidth = window.innerWidth
+    this.$nextTick(() => {
+      window.addEventListener('resize', this.onScreenResize())
+    })
+    this.onScreenResize()
+  },
+  unmounted() {
+    window.removeEventListener('load', this.checkCookie())
+  },
+  methods: {
+    onScreenResize() {
+      window.addEventListener('resize', () => {
+        this.updateScreenWidth()
+      })
+    },
+    updateScreenWidth() {
+      this.screenWidth = window.innerWidth
+    },
+    reset() {
+      this.$emit('input', null)
+    },
+    //function to set cookies based on response in overlay or modal
+    clickedCookie: (clickResponse) => {
+      const analyticsCookieName = 'analyticsCookies'
+      const marketingCookieName = 'marketingCookies'
+      var cookieElement = document.getElementById('mainCookieContainer')
+      if (clickResponse === 'accept') {
+        localStorage.setItem('cookieBannerDisplayed', 'false')
+        localStorage.setItem(analyticsCookieName, 'granted')
+        localStorage.setItem(marketingCookieName, 'granted')
+        cookieElement.classList.add('hide')
+        cookieElement.classList.remove('show')
+      } else if (clickResponse === 'save') {
+        const acb = document.getElementById('modal2CB')
+        const mcb = document.getElementById('modal3CB')
+        localStorage.setItem('cookieBannerDisplayed', 'false')
+        if (acb.checked) {
+          localStorage.setItem(analyticsCookieName, 'granted')
+        } else {
+          localStorage.setItem(analyticsCookieName, 'denied')
+        }
+        if (mcb.checked) {
+          localStorage.setItem(marketingCookieName, 'granted')
+        } else {
+          localStorage.setItem(marketingCookieName, 'denied')
+        }
+        cookieElement.classList.add('hide')
+        cookieElement.classList.remove('show')
+      } else {
+        localStorage.setItem('cookieBannerDisplayed', 'false')
+        localStorage.setItem(analyticsCookieName, 'denied')
+        localStorage.setItem(marketingCookieName, 'denied')
+        cookieElement.classList.add('hide')
+        cookieElement.classList.remove('show')
+      }
+    },
+    // function to update consent in GTM
+    fireGTM() {
+      if (this.$gtm) {
+        // gather attrs
+        let aConsent = localStorage.getItem('analyticsCookies')
+        let mConsent = localStorage.getItem('marketingCookies')
+        let attrs1 = {
+          ad_storage: mConsent
+        }
+        // fire the event - marketing
+        this.$gtm.push({
+          event: 'gtm_consent_update',
+          ...attrs1
+        })
+        let attrs2 = {
+          analytics_storage: aConsent
+        }
+        // fire the event - analytics
+        this.$gtm.push({
+          event: 'gtm_consent_update',
+          ...attrs2
+        })
+      }
+    },
+    //function to remove from local storage based on partial match - called from checkCookie
+    removeLocalStorage: function(cookieName) {
+      var removeArr = []
+      for (var i = 0; i < localStorage.length; i++) {
+        var x = localStorage.key(i)
+        if (x.startsWith(cookieName)) {
+          removeArr.push(x)
+        }
+      }
+      removeArr.forEach((y) => {
+        localStorage.removeItem(y)
+      })
+    },
+    // function to remove cookies according to response from overlay or modal
+    checkCookie: function() {
+      var cookieElement = document.getElementById('mainCookieContainer')
+      if (
+        this.showCookie === 'true' &&
+        !localStorage.getItem('cookieBannerDisplayed')
+      ) {
+        cookieElement.classList.remove('hide')
+        cookieElement.classList.add('show')
+      } else {
+        // need to remove cookies in rejected categories, but first hide cookie overlay
+        cookieElement.classList.add('hide')
+        cookieElement.classList.remove('show')
+
+        // get list of categorised cookies
+        const analyticsArr = analyticsCookies
+        const marketingArr = marketingCookies
+
+        // get list of cookies to process
+        var pairs = document.cookie.split(';')
+        var cookieArr = []
+        for (var i = 0; i < pairs.length; i++) {
+          var pair = pairs[i].split('=')
+          var nameVar = [pair[0].trim()]
+          cookieArr.push(nameVar[0])
+        }
+        // identify which categories to process, initialising variables to false
+        // will only be set to true if user has rejected any cookies
+        var checkAnalytics = false
+        var checkMarketing = false
+
+        // get value of consent cookies to determine if cookies have to be removed
+        var analyticsValue = localStorage.getItem('analyticsCookies')
+        if (analyticsValue !== null && analyticsValue === 'denied') {
+          checkAnalytics = true
+        }
+
+        var marketingValue = localStorage.getItem('marketingCookies')
+        if (marketingValue !== null && marketingValue === 'denied') {
+          checkMarketing = true
+        }
+
+        // Remove analytics cookies stored as cookies or localStorage
+        if (checkAnalytics) {
+          analyticsArr.forEach((cookieName) => {
+            if (cookieName.name.slice(-1) === '*') {
+              var tmpVar = cookieName.name.slice(0, -1)
+              this.removeLocalStorage(tmpVar)
+              var tmpArr = cookieArr.filter((x) => x.match(cookieName.name))
+              tmpArr.forEach((tmpName) => {
+                document.cookie =
+                  tmpName +
+                  '=;expires=' +
+                  new Date(0).toUTCString() +
+                  ';domain=' +
+                  cookieName.domain +
+                  ';path=' +
+                  cookieName.path
+              })
+            } else {
+              localStorage.removeItem(cookieName.name)
+              document.cookie =
+                cookieName.name +
+                '=;expires=' +
+                new Date(0).toUTCString() +
+                ';domain=' +
+                cookieName.domain +
+                ';path=' +
+                cookieName.path
+            }
+          })
+        }
+        // Remove marketing cookies stored as cookies or localStorage
+        if (checkMarketing) {
+          marketingArr.forEach((cookieName) => {
+            if (cookieName.name.slice(-1) === '*') {
+              var tmpVar = cookieName.name.slice(0, -1)
+              this.removeLocalStorage(tmpVar)
+              var tmpArr = cookieArr.filter((x) => x.match(cookieName.name))
+              tmpArr.forEach((tmpName) => {
+                document.cookie =
+                  tmpName +
+                  '=;expires=' +
+                  new Date(0).toUTCString() +
+                  ';domain=' +
+                  cookieName.domain +
+                  ';path=' +
+                  cookieName.path
+              })
+            } else {
+              localStorage.removeItem(cookieName.name)
+              document.cookie =
+                cookieName.name +
+                '=;expires=' +
+                new Date(0).toUTCString() +
+                ';domain=' +
+                cookieName.domain +
+                ';path=' +
+                cookieName.path
+            }
+          })
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './styles';
+</style>

package/src/components/Global/Cookies/styles.scss

@@ -0,0 +1,259 @@
+@import '../../../assets/styles/generated-icons.scss';
+@import '../../../includes/scss/all';
+
+h3.cookie-header {
+  font-weight: 700;
+}
+
+.cookie-header-xs {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  margin-bottom: 12px;
+  display: none;
+}
+
+.hide {
+  visibility: hidden;
+}
+
+.show {
+  visibility: visible;
+}
+
+.cookie-container {
+  position: fixed;
+  bottom: 0;
+  left: 0px;
+  right: 0px;
+  width: 100%;
+  max-width: none;
+  box-sizing: border-box;
+  border-top: 2px solid $gray;
+  display: flex;
+  align-self: stretch;
+  flex-direction: row;
+  align-items: center;
+  background: $white;
+  padding: 24px 45px 24px 45px;
+  @media screen and (max-width: 575px) {
+    padding: 24px 15px 24px 15px;
+  }
+  color: $black;
+  transition: 400ms;
+  margin: 0;
+  z-index: 5;
+
+  &__col {
+    @media screen and (max-width: 575px) {
+      padding: 0;
+    }
+    &:first-of-type {
+      flex: 0 0 55%;
+      max-width: 55%;
+    }
+
+    &:last-of-type {
+      flex: 0 0 45%;
+      max-width: 45%;
+    }
+
+    @media screen and (max-width: 1150px) {
+      &:first-of-type {
+        flex: 0 0 100%;
+        max-width: 100%;
+      }
+
+      &:last-of-type {
+        flex: 0 0 100%;
+        max-width: 100%;
+      }
+    }
+    .cookie-buttons {
+      justify-content: flex-end;
+      margin: 0;
+      display: flex;
+      button {
+        &:first-of-type {
+          margin-left: 0;
+        }
+      }
+    }
+
+    @include mq('mm') {
+      .cookie-buttons {
+        margin-top: 16px;
+        justify-content: flex-start;
+      }
+    }
+  }
+  .cookie-links {
+    display: none;
+  }
+  a {
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    color: $black;
+    text-decoration-line: underline;
+    padding-left: 16px;
+    white-space: nowrap;
+    &:first-of-type {
+      @media screen and (max-width: 575px) {
+        padding-left: 0px;
+      }
+    }
+    @media screen and (max-width: 350px) {
+      width: 100%;
+      display: block;
+      padding-left: 0px;
+      margin-bottom: 16px;
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
+  &:deep(.hidden-on-xs) {
+    @include mq('xs') {
+      display: none;
+    }
+  }
+
+  &:deep(.display-on-xs) {
+    @include mq('xs') {
+      display: flex;
+    }
+  }
+}
+
+.cookie-container.cookie-content {
+  top: 48px;
+  width: 100%;
+  height: 48px;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.cookieBtn {
+  position: relative;
+  text-decoration: none;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 20px;
+  letter-spacing: 0px;
+  display: inline-flex;
+  caret-color: transparent;
+  border: none;
+  border-radius: 8px;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  padding-left: 16px;
+  padding-right: 16px;
+  margin-bottom: 16px;
+  margin-left: 16px;
+
+  &.moreOptions {
+    background-color: $white;
+    color: $black;
+    padding-left: 8px;
+    padding-right: 8px;
+    width: 120px;
+  }
+  &.yellow {
+    background-color: $yellow;
+    color: $black;
+    width: 151px;
+    &:after {
+      content: arrow-right();
+      margin-left: 16px;
+    }
+  }
+  &.black {
+    background-color: $black;
+    color: white;
+    width: 145px;
+    &:after {
+      content: arrow-right();
+      margin-left: 16px;
+      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(302deg)
+        brightness(103%) contrast(103%);
+    }
+  }
+  &.hasIcon {
+    span {
+      margin-left: 16px;
+      top: -1px;
+      position: relative;
+      img {
+        width: 16px;
+      }
+    }
+  }
+  &.isWiderYellow {
+    background-color: $yellow;
+    color: $black;
+    width: 180px;
+
+    &:after {
+      content: arrow-right();
+      margin-left: 16px;
+    }
+  }
+}
+
+.modal-content {
+  border: none !important;
+  fieldset {
+    .option {
+      margin-bottom: 24px;
+      display: flex;
+      margin-right: 0px;
+      padding-left: 24px;
+      float: right;
+
+      @media screen and (max-width: 600px) {
+        flex-basis: 100%;
+      }
+
+      input[type='checkbox'] {
+        height: 24px;
+        border: 1px solid $gray;
+        width: 24px;
+        margin-left: 16px;
+        margin-right: 16px;
+        border-radius: 4px;
+      }
+
+      label {
+        font-size: 16px;
+        font-weight: 400;
+        vertical-align: middle;
+        position: relative;
+        margin-left: 24px;
+      }
+    }
+
+    .modal-description {
+      margin-right: 100px;
+    }
+  }
+}
+
+.modal-content h5 {
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 24px;
+  font-style: normal;
+  color: $black;
+}
+
+.modal-heading {
+  font-size: 26px;
+  font-weight: 700;
+  line-height: 32px;
+  letter-spacing: 0px;
+  margin-bottom: 0px;
+  margin-top: 0px;
+}