@worksafevictoria/wcl7.5 1.1.0-beta.8 → 1.1.0-beta.80

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

@@ -1,5 +1,5 @@
 <template>
-  <container id="mainCookieContainer" class="hide">
+  <container id="mainCookieContainer">
     <row class="cookie-container">
       <column class="cookie-container__col">
         <h3 id="cookie_header" class="cookie-header hidden-on-xs">
@@ -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: {
@@ -222,69 +253,67 @@ export default {
     },
     showCookie() {
       //Check first if cookies have been turned on in the environment variable
-      if (process.env.SHOW_COOKIE === 'true') {
-        return 'true'
-      } else {
-        return 'false'
-      }
-    }
+      return (this.$config
+        ? this.$config.public.showCookie
+        : process.env.SHOW_COOKIE) === false
+        ? false
+        : true
+    },
   },
   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()
+    this.updateScreenWidth()
+    // required, as unable to check localStorage until window loaded
+    this.checkCookie()
+    window.addEventListener('resize', this.updateScreenWidth)
   },
   unmounted() {
-    window.removeEventListener('load', this.checkCookie())
+    window.removeEventListener('load', this.checkCookie)
+    window.removeEventListener('resize', this.updateScreenWidth)
   },
   methods: {
-    onScreenResize() {
-      window.addEventListener('resize', () => {
-        this.updateScreenWidth()
-      })
-    },
     updateScreenWidth() {
       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 (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) {
+
+      if (cookieElement) {
+        localStorage.setItem('cookieBannerDisplayed', 'true') // Mark the banner as displayed
+
+        if (clickResponse === 'accept') {
+          // localStorage.setItem('cookieBannerDisplayed', 'false')
           localStorage.setItem(analyticsCookieName, 'granted')
-        } else {
-          localStorage.setItem(analyticsCookieName, 'denied')
-        }
-        if (mcb.checked) {
           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',
+          )
         } else {
+          // clickResponse === 'reject'
+          // localStorage.setItem('cookieBannerDisplayed', 'false')
+          localStorage.setItem(analyticsCookieName, 'denied')
           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')
       }
@@ -296,25 +325,25 @@ export default {
         let aConsent = localStorage.getItem('analyticsCookies')
         let mConsent = localStorage.getItem('marketingCookies')
         let attrs1 = {
-          ad_storage: mConsent
+          ad_storage: mConsent,
         }
         // fire the event - marketing
         this.$gtm.push({
           event: 'gtm_consent_update',
-          ...attrs1
+          ...attrs1,
         })
         let attrs2 = {
-          analytics_storage: aConsent
+          analytics_storage: aConsent,
         }
         // fire the event - analytics
         this.$gtm.push({
           event: 'gtm_consent_update',
-          ...attrs2
+          ...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)
@@ -327,15 +356,16 @@ export default {
       })
     },
     // 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')
-      ) {
+    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')
@@ -429,11 +459,21 @@ export default {
           })
         }
       }
-    }
-  }
+    },
+  },
 }
 </script>
 
 <style lang="scss" scoped>
+/* Removed scoped */
 @import './styles';
+: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>

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

@@ -203,65 +203,65 @@ h3.cookie-header {
   }
 }
 
-.modal-content {
-  border: none !important;
-  fieldset {
-    .option {
-      margin-bottom: 24px;
-      display: flex;
-      margin-right: 0px;
-      padding-left: 24px;
-      float: right;
+// .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%;
-      }
+//       @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;
-      }
+//       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;
-      }
-    }
+//       label {
+//         font-size: 16px;
+//         font-weight: 400;
+//         vertical-align: middle;
+//         position: relative;
+//         margin-left: 24px;
+//       }
+//     }
 
-    .modal-description {
-      margin-right: 100px;
-    }
-  }
-}
+//     .modal-description {
+//       margin-right: 100px;
+//     }
+//   }
+// }
 
-.modal-content h5 {
-  font-weight: 700;
-  font-size: 20px;
-  line-height: 24px;
-  font-style: normal;
-  color: $black;
-}
+// .modal-content h5 {
+//   font-weight: 700;
+//   font-size: 20px;
+//   line-height: 24px;
+//   font-style: normal;
+//   color: $black;
+// }
 
-.modal {
-  background: rgba(0,0,0,0.5)
-}
+// .modal {
+//   background: rgba(0,0,0,0.5)
+// }
 
-.modal-backdrop {
-  display: none;
-}
+// .modal-backdrop {
+//   display: none;
+// }
 
-.modal-heading-text {
-  font-size: 26px;
-  font-weight: 700;
-  line-height: 32px;
-  letter-spacing: 0px;
-  margin-bottom: 0px;
-  margin-top: 0px;
-}
+// .modal-heading-text {
+//   font-size: 26px;
+//   font-weight: 700;
+//   line-height: 32px;
+//   letter-spacing: 0px;
+//   margin-bottom: 0px;
+//   margin-top: 0px;
+// }