@worksafevictoria/wcl7.5 1.2.0 → 1.2.2

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">
@@ -222,32 +222,23 @@ 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 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
     },
@@ -259,59 +250,56 @@ export default {
       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')
       }
     },
     // 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) {
@@ -328,107 +316,112 @@ 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')
-      ) {
-        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')
+      const cookieElement = document.getElementById('mainCookieContainer');
+      const bannerDisplayed = localStorage.getItem('cookieBannerDisplayed');
 
-        // 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
+        if (this.showCookie && bannerDisplayed !== 'true') {
+          // Show the banner if it's not been displayed yet
+          console.log('** Show the banner if its not been displayed yet:-')
+          cookieElement.classList.remove('hide')
+          cookieElement.classList.add('show')
+        } else {
+          // Hide the banner if user has already made a selection
+          console.log('** 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 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 list of categorised cookies
+          const analyticsArr = analyticsCookies
+          const marketingArr = marketingCookies
 
-        var marketingValue = localStorage.getItem('marketingCookies')
-        if (marketingValue !== null && marketingValue === 'denied') {
-          checkMarketing = true
-        }
+          // 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) => {
+          // 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 =
-                  tmpName +
+                  cookieName.name +
                   '=;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) => {
+              }
+            })
+          }
+          // 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 =
-                  tmpName +
+                  cookieName.name +
                   '=;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
-            }
-          })
+              }
+            })
+          }
         }
-      }
+
     }
   }
 }

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

@@ -69,6 +69,12 @@ export default {
       displayGlobal: false,
     }
   },
+  computed: {
+    showGlobalNotice() {
+      //Check first if SHOW_GLOBAL_NOTICE have been turned on in the environment variable
+      return process.env.SHOW_GLOBAL_NOTICE === false ? false : true
+    }
+  },
   mounted() {
     window.addEventListener('load', this.checkPage())
   },
@@ -89,12 +95,16 @@ export default {
         this.setCookie()
         this.displayGlobal = false
       } else if (typeof window !== 'undefined') {
+        console.log('**else this.showGlobalNotice:-', this.showGlobalNotice)
+        console.log('**else tocalStorage.getItem(globalModalHidden):-', localStorage.getItem('globalModalHidden'))
+
         this.displayGlobal =
-          process.env.SHOW_GLOBAL_NOTICE === 'true' &&
+          this.showGlobalNotice === true &&
           !localStorage.getItem('globalModalHidden')
       } else {
-        this.displayGlobal = process.env.SHOW_GLOBAL_NOTICE === 'true'
+        this.displayGlobal = process.env.SHOW_GLOBAL_NOTICE === true
       }
+      console.log('**this.displayGlobal:- ', this.displayGlobal)
     }
   }
 }
@@ -104,6 +114,17 @@ export default {
 @import '../../../includes/scss/all';
 
 // modal and modal backdrop styles required in order to display the overlay behind the modal
+#global-notice-modal {
+  .modal-dialog-centered {
+    border-radius: 6px !important;
+    // box-shadow: 0 0 16px 8px rgba(0, 0, 0, 0.24) !important;
+    left: 50%;
+    margin-left: -200px;
+    margin-top: -240px;
+    top: 50%;
+    width: 400px !important;
+  }
+}
 
 .modal {
   background: rgba(0,0,0,0.5)

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

@@ -48,7 +48,8 @@
               class="wcl-hero-header__content-wrapper__content-col"
               :md="7"
               :class="{
-                [`wcl-hero-header__content-wrapper__content-col--split`]: $slots.side
+                [`wcl-hero-header__content-wrapper__content-col--split`]:
+                  $slots.side,
               }"
             >
               <breadcrumb
@@ -98,7 +99,7 @@
               >
             </column>
           </row>
-            <social-share v-show="showSocial && type !== 'hero'" :rtl="rtl" />
+          <social-share v-show="showSocial && type !== 'hero'" :rtl="rtl" />
         </container>
       </div>
       <!-- Type Default -->
@@ -176,63 +177,63 @@ export default {
     CtaButton,
     HeroHeaderChevron,
     RichText,
-    Icon
+    Icon,
   },
   props: {
     type: {
       type: String,
-      default: 'default'
+      default: 'default',
     },
     title: {
       type: String,
-      default: ''
+      default: '',
     },
     description: {
       type: String,
-      default: ''
+      default: '',
     },
     image: {
       type: Object,
-      default: () => {}
+      default: () => {},
     },
     cta: {
       type: Object,
-      default: () => {}
+      default: () => {},
     },
     bgColor: {
       type: Boolean,
-      default: false
+      default: false,
     },
     breadcrumbItems: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     workwell: {
       type: Boolean,
-      default: false
+      default: false,
     },
     showBreadcrumb: {
       type: Boolean,
-      default: true
+      default: true,
     },
     showMask: {
       type: Boolean,
-      default: true
+      default: true,
     },
     showSocial: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
   data() {
     return {
       socialShareToggle: false,
       HeroHeaderChevron,
-      CaretDown
+      CaretDown,
     }
   },
   computed: {
@@ -269,7 +270,7 @@ export default {
       //   }
       // }
       return this.title
-    }
+    },
     // Will reintroduce if business requirement
     //   strippedDescription() {
     //     let strippedString = this.description.replace(/(<([^>]+)>)/gi, '')
@@ -281,15 +282,16 @@ export default {
   },
   mounted() {
     if (this.$nuxt?.$on) {
-      this.$nuxt.$on('scrollToTop', () => {
-        setTimeout(() => {
-          const title = this.$refs.title
-          if (title) {
-            title.$el.setAttribute('tabindex', 0)
-            title.$el.focus()
-          }
-        }, 500)
-      })
+      // console.log('🚀 ~ this.$nuxt.$on ~ this.$nuxt:', this.$nuxt)
+      // this.$nuxt.$on('scrollToTop', () => {
+      //   setTimeout(() => {
+      //     const title = this.$refs.title
+      //     if (title) {
+      //       title.$el.setAttribute('tabindex', 0)
+      //       title.$el.focus()
+      //     }
+      //   }, 500)
+      // })
     }
   },
   beforeDestroy() {
@@ -314,20 +316,20 @@ export default {
         ev.target.scrollIntoView({
           behavior: 'smooth',
           alignToTop: true,
-          block: 'start'
+          block: 'start',
         })
       }
     },
     fireGTM() {
       let attrs = {
         label: this.cta.uri,
-        document_title: this.cta.filename
+        document_title: this.cta.filename,
       }
       if (this.$gtm) {
         this.$gtm.push({ event: 'custom.interaction.download', ...attrs })
       }
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>