@worksafevictoria/wcl7.5 1.1.0-beta.73 → 1.1.0-beta.75

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

@@ -18,7 +18,7 @@
         </div>
       </column>
       <!-- Cookie buttons displayed when not xs -->
-      <column class="cookie-container__col  hidden-on-xs">
+      <column class="cookie-container__col hidden-on-xs">
         <div class="cookie-buttons mt-md-3">
           <button
             id="moreBtn"
@@ -34,9 +34,9 @@
             id="accept_all"
             role="button"
             class="cookieBtn yellow hasIcon"
-            style="order:1;"
+            style="order: 1"
             aria-label="Accept all cookies"
-            @click="clickedCookie('accept'), fireGTM()"
+            @click="(clickedCookie('accept'), fireGTM())"
           >
             Accept all
           </button>
@@ -44,9 +44,9 @@
             id="reject_all"
             role="button"
             class="cookieBtn black hasIcon"
-            style="order:2;"
+            style="order: 2"
             aria-label="Reject all cookies"
-            @click="clickedCookie('reject'), fireGTM(), checkCookie()"
+            @click="(clickedCookie('reject'), fireGTM(), checkCookie())"
           >
             Reject all
           </button>
@@ -61,126 +61,155 @@
           <a
             id="acceptAllLink"
             href="#"
-            @click="clickedCookie('accept'), fireGTM()"
+            @click="(clickedCookie('accept'), fireGTM())"
             >Accept all</a
           >
           <a
             id="rejectAllLink"
             href="#"
-            @click="clickedCookie('reject'), fireGTM(), checkCookie()"
+            @click="(clickedCookie('reject'), fireGTM(), checkCookie())"
             >Reject all</a
           >
         </div>
       </row>
     </row>
     <!-- Modal -->
-    <div v-if="showCookieModal" class="modal fade show" tabindex="-1" aria-modal="true" role="dialog" style="display: block;">
-      <div class="modal-dialog">
-        <div class="modal-content">
-          <div class="modal-header">
-            <div class="modal-heading-text">
-              {{ cookieContent.modal.heading }}
-            </div>
-            <button type="button" class="btn-close" @click="showCookieModal = !showCookieModal" aria-label="close"></button>
-          </div>
-          <div class="modal-body">
-              <fieldset>
-                <row>
-                  <column>
-                    <h5>{{ cookieContent.modal.functional.heading }}</h5>
-                  </column>
-                  <column>
-                    <label for="modal1CB" class="option">
-                      Necessary<span class="visually-hidden">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="visually-hidden">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="visually-hidden">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 class="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(), showCookieModal = !showCookieModal"
-              >
-                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(), showCookieModal = !showCookieModal"
-              >
-                Accept all
-              </button>
-            </div>
-          </div>
+    <b-modal
+      v-model="showCookieModal"
+      scrollable
+      @hidden="reset"
+      footer-border-variant="null"
+      no-header
+      size="md"
+    >
+      <template #default="{ close }">
+        <form ref="clearForm">
+          <container>
+            <row
+              ><column>
+                <div class="modal-heading">
+                  {{ cookieContent.modal.heading }}
+                </div>
+              </column></row
+            >
+            <row>
+              <column>
+                <h5>{{ cookieContent.modal.functional.heading }}</h5>
+              </column>
+              <column>
+                <fieldset style="float: right">
+                  <label for="modal1CB" class="option">
+                    Necessary<span class="sr-only">functional label</span>
+                    <input
+                      id="modal1CB"
+                      type="checkbox"
+                      value="functional"
+                      checked
+                      disabled
+                      @keyup.enter="(e) => e.target.click()"
+                    />
+                  </label>
+                </fieldset>
+              </column>
+            </row>
+            <row>
+              <column class="modal-description">{{
+                cookieContent.modal.functional.description
+              }}</column>
+            </row>
+            <hr />
+            <row>
+              <column>
+                <h5>{{ cookieContent.modal.analytics.heading }}</h5>
+              </column>
+              <column>
+                <fieldset style="float: right">
+                  <label for="modal2CB" class="option"
+                    ><span class="sr-only">analytics checkbox</span>
+                    <input
+                      id="modal2CB"
+                      type="checkbox"
+                      name="modal2CB"
+                      value="analytics"
+                      @keyup.enter="(e) => e.target.click()"
+                  /></label>
+                </fieldset>
+              </column>
+            </row>
+            <row>
+              <column class="modal-description">{{
+                cookieContent.modal.analytics.description
+              }}</column>
+            </row>
+            <hr />
+            <row>
+              <column>
+                <h5>{{ cookieContent.modal.marketing.heading }}</h5>
+              </column>
+              <column>
+                <fieldset style="float: right">
+                  <label for="modal3CB" class="option"
+                    ><span class="sr-only">marketing checkbox</span>
+                    <input
+                      id="modal3CB"
+                      type="checkbox"
+                      name="modal3CB"
+                      value="marketing"
+                      @keyup.enter="(e) => e.target.click()"
+                  /></label>
+                </fieldset>
+              </column>
+            </row>
+            <row>
+              <column class="modal-description">{{
+                cookieContent.modal.marketing.description
+              }}</column>
+            </row>
+          </container>
+        </form>
+      </template>
+
+      <template #footer="{ close }">
+        <div>
+          <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()
+                close()
+              }
+            "
+          >
+            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()
+                close()
+              }
+            "
+          >
+            Accept all
+          </button>
         </div>
-    </div>
+      </template>
+    </b-modal>
   </container>
 </template>
 
@@ -189,23 +218,25 @@ import Container from './../../Containers/Container/index.vue'
 import Row from './../../Containers/Row/index.vue'
 import Column from './../../Containers/Column/index.vue'
 import { analyticsCookies, marketingCookies } from './Constants'
+import { BModal } from 'bootstrap-vue-next'
 
 export default {
   name: 'Cookies',
   components: {
     Container,
     Row,
-    Column
+    Column,
+    'b-modal': BModal,
   },
   props: {
     cookieHeader: {
       type: String,
-      default: 'Accept and Reject Cookies'
+      default: 'Accept and Reject Cookies',
     },
     cookieContent: {
       type: Object,
-      default: () => {}
-    }
+      default: () => {},
+    },
   },
   data() {
     return {
@@ -213,7 +244,7 @@ export default {
       analyticsCookies,
       marketingCookies,
       screenWidth: 0,
-      showCookieModal: false
+      showCookieModal: false,
     }
   },
   computed: {
@@ -223,7 +254,7 @@ export default {
     showCookie() {
       //Check first if cookies have been turned on in the environment variable
       return process.env.SHOW_COOKIE === false ? false : true
-    }
+    },
   },
   mounted() {
     // detect screen size to display smaller content
@@ -232,7 +263,6 @@ export default {
     // required, as unable to check localStorage until window loaded
     this.checkCookie()
     window.addEventListener('resize', this.updateScreenWidth)
-    
   },
   unmounted() {
     window.removeEventListener('load', this.checkCookie)
@@ -243,29 +273,36 @@ export default {
       this.screenWidth = window.innerWidth
     },
     reset() {
-      this.$emit('input', null)
+      this.$refs.clearForm.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 (cookieElement) {
         localStorage.setItem('cookieBannerDisplayed', 'true') // Mark the banner as displayed
-        
+
         if (clickResponse === 'accept') {
           // localStorage.setItem('cookieBannerDisplayed', 'false')
           localStorage.setItem(analyticsCookieName, 'granted')
           localStorage.setItem(marketingCookieName, 'granted')
-
         } else if (clickResponse === 'save') {
           // localStorage.setItem('cookieBannerDisplayed', 'false')
           const acb = document.getElementById('modal2CB')
           const mcb = document.getElementById('modal3CB')
 
-          localStorage.setItem(analyticsCookieName, acb.checked ? 'granted' : 'denied')
-          localStorage.setItem(marketingCookieName, mcb.checked ? 'granted' : 'denied')
+          localStorage.setItem(
+            analyticsCookieName,
+            acb.checked ? 'granted' : 'denied',
+          )
+          localStorage.setItem(
+            marketingCookieName,
+            mcb.checked ? 'granted' : 'denied',
+          )
         } else {
           // clickResponse === 'reject'
           // localStorage.setItem('cookieBannerDisplayed', 'false')
@@ -279,30 +316,30 @@ export default {
     },
     // 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
-      //   })
-      // }
+      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) {
+    removeLocalStorage: function (cookieName) {
       var removeArr = []
       for (var i = 0; i < localStorage.length; i++) {
         var x = localStorage.key(i)
@@ -315,123 +352,124 @@ export default {
       })
     },
     // function to remove cookies according to response from overlay or modal
-    checkCookie: function() {
-      const cookieElement = document.getElementById('mainCookieContainer');
-      const bannerDisplayed = localStorage.getItem('cookieBannerDisplayed');
-
+    checkCookie: function () {
+      const cookieElement = document.getElementById('mainCookieContainer')
+      const bannerDisplayed = localStorage.getItem('cookieBannerDisplayed')
 
-        if (this.showCookie && bannerDisplayed !== 'true') {
-          // Show the banner if it's not been displayed yet
-          cookieElement.classList.remove('hide')
-          cookieElement.classList.add('show')
-        } else {
-          // Hide the banner if user has already made a selection
-          // need to remove cookies in rejected categories, but first hide cookie overlay
-          cookieElement.classList.add('hide')
-          cookieElement.classList.remove('show')
+      if (this.showCookie && bannerDisplayed !== 'true') {
+        // Show the banner if it's not been displayed yet
+        cookieElement.classList.remove('hide')
+        cookieElement.classList.add('show')
+      } else {
+        // Hide the banner if user has already made a selection
+        // 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 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 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
-          }
+        // 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
-          }
+        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)
+        // 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 =
-                  cookieName.name +
+                  tmpName +
                   '=;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)
+              })
+            } 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 =
-                  cookieName.name +
+                  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>
+/* Removed scoped */
 @import './styles';
-
-#mainCookieContainer {
-  .modal-dialog {
-    max-width: var(--bs-modal-width);
-    margin: 1.75rem auto;
-  }
+:deep(.modal-heading) {
+  font-size: 26px;
+  font-weight: 700;
+  line-height: 30px;
+  letter-spacing: 0px;
+  margin-bottom: 16px;
+  display: flex;
+  justify-content: flex-end !important;
 }
 </style>