@worksafevictoria/wcl7.5 1.1.0-beta.42 → 1.1.0-beta.44

package/.env

@@ -1,6 +1,4 @@
 CONTENT_API_URL=https://content-staging-v2.api.worksafe.vic.gov.au
 IS_STORYBOOK=TRUE
 SHOW_COOKIE=true
-GOOGLE__URL=https://cse.google.com/cse.js?cx=53b1506aa03c64160
-CARETAKER=false
-SHOW_GLOBAL_NOTICE=true
+GOOGLE__URL=https://cse.google.com/cse.js?cx=53b1506aa03c64160

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.1.0-beta.42",
+  "version": "1.1.0-beta.44",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {
@@ -44,7 +44,7 @@
     "axios": "^1.6.0",
     "bootstrap": "^5.3.2",
     "bootstrap-vue": "^2.23.1",
-    "bootstrap-vue-next": "^0.23.2",
+    "bootstrap-vue-next": "^0.25.10",
     "date-fns": "^2.30.0",
     "formiojs": "4.13.13",
     "storybook-addon-deep-controls": "^0.6.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/SubComponents/FormInstance/models/overrides/address.js

@@ -26,7 +26,8 @@ export class AddresseFormElement extends BaseFormElement {
         key,
         type: 'textfield',
         input: true,
-        customConditional: "show = _.get(instance, 'parent.manualMode', false);"
+        customConditional:
+          "show = _.get(instance, 'parent.manualMode', false);",
       }
     }
   }
@@ -40,23 +41,27 @@ export class AddresseFormElement extends BaseFormElement {
 
   getCustomProperties() {
     const autoCompletePath = '/places/api/v1/place/autocomplete/json'
-    const baseUrl = window.origin
+    // Uses WorkSafe PROD API for storybook site (ensure site is white listed)
+    const baseUrl =
+      window.origin.toLowerCase().indexOf('worksafe') === -1
+        ? 'https://www.worksafe.vic.gov.au'
+        : window.origin
     return {
       provider: 'custom',
       enableManualMode: this.webformElement['#flexbox'] !== '0',
       providerOptions: {
         params: {
           types: this.isFullAddressSearch() ? 'address' : '(regions)',
-          components: 'country:au'
+          components: 'country:au',
         },
         url: `${baseUrl}${autoCompletePath}`,
         queryProperty: 'input',
         displayValueProperty: 'description',
-        responseProperty: 'predictions'
+        responseProperty: 'predictions',
       },
       switchToManualModeLabel: "Can't find address? Switch to manual mode.",
       input: true,
-      components: this.getManualFields()
+      components: this.getManualFields(),
     }
   }
 
@@ -70,7 +75,7 @@ export class AddresseFormElement extends BaseFormElement {
       if (isAutoComplete) {
         const getVal = (key) =>
           value?.geocode?.address_components.find(
-            (item) => item?.types?.[0] === key
+            (item) => item?.types?.[0] === key,
           )?.long_name
         const address1 = getComponents('address')
         const city = getComponents('city')
@@ -84,12 +89,12 @@ export class AddresseFormElement extends BaseFormElement {
             [city?.key]: getVal('locality'),
             [state?.key]: getVal('administrative_area_level_1'),
             [postcode?.key]: getVal('postal_code'),
-            [country?.key]: getVal('country')
-          }
+            [country?.key]: getVal('country'),
+          },
         }
       } else if (value.mode === 'manual') {
         return {
-          [this.getKey()]: value.address
+          [this.getKey()]: value.address,
         }
       }
     }
@@ -106,7 +111,11 @@ export class AddresseFormElement extends BaseFormElement {
         value.geocode.formatted_address !== value.address.description)
     ) {
       const geocodePath = '/places/api/v1/geocode/json'
-      const baseUrl = window.origin
+      // Uses WorkSafe PROD API for storybook site (ensure site is white listed)
+      const baseUrl =
+        window.origin.toLowerCase().indexOf('worksafe') === -1
+          ? 'https://www.worksafe.vic.gov.au'
+          : window.origin
       const qs = `?place_id=${value.address.place_id}`
       const url = `${baseUrl}${geocodePath}${qs}`
 
@@ -114,11 +123,11 @@ export class AddresseFormElement extends BaseFormElement {
         const results = response?.data?.results
         if (Array.isArray(results) && results.length > 0) {
           const postcode = results[0].address_components.find((item) =>
-            item.types.find((type) => type === 'postal_code')
+            item.types.find((type) => type === 'postal_code'),
           )?.short_name
           const fullAddress = value.address.description.replace(
             /,(?=[^,]*$)/,
-            `, ${postcode}`
+            `, ${postcode}`,
           )
           value.address.description = fullAddress
           value.geocode = results[0]

package/src/components/SubComponents/FormInstance/tests/address.test.js

@@ -18,7 +18,7 @@ describe(`Form ${testComponent} parser`, () => {
               key: 'address',
               label: 'Address',
               tableView: false,
-              type: 'textfield'
+              type: 'textfield',
             },
             {
               customConditional:
@@ -27,7 +27,7 @@ describe(`Form ${testComponent} parser`, () => {
               key: 'address_2',
               label: 'Address 2',
               tableView: false,
-              type: 'textfield'
+              type: 'textfield',
             },
             {
               customConditional:
@@ -36,7 +36,7 @@ describe(`Form ${testComponent} parser`, () => {
               key: 'city',
               label: 'Suburb',
               tableView: false,
-              type: 'textfield'
+              type: 'textfield',
             },
             {
               customConditional:
@@ -45,7 +45,7 @@ describe(`Form ${testComponent} parser`, () => {
               key: 'state_province',
               label: 'State',
               tableView: false,
-              type: 'textfield'
+              type: 'textfield',
             },
             {
               customConditional:
@@ -54,7 +54,7 @@ describe(`Form ${testComponent} parser`, () => {
               key: 'postal_code',
               label: 'Postcode',
               tableView: false,
-              type: 'textfield'
+              type: 'textfield',
             },
             {
               customConditional:
@@ -63,8 +63,8 @@ describe(`Form ${testComponent} parser`, () => {
               key: 'country',
               label: 'Country',
               tableView: false,
-              type: 'textfield'
-            }
+              type: 'textfield',
+            },
           ],
           customClass: 'custom-formio-1',
           defaultValue: {
@@ -73,7 +73,7 @@ describe(`Form ${testComponent} parser`, () => {
             city: '',
             country: '',
             postal_code: '',
-            state_province: ''
+            state_province: '',
           },
           disabled: false,
           enableManualMode: true,
@@ -89,13 +89,13 @@ describe(`Form ${testComponent} parser`, () => {
             params: { components: 'country:au', types: 'address' },
             queryProperty: 'input',
             responseProperty: 'predictions',
-            url: 'http://localhost/places/api/v1/place/autocomplete/json'
+            url: 'https://www.worksafe.vic.gov.au/places/api/v1/place/autocomplete/json',
           },
           switchToManualModeLabel: "Can't find address? Switch to manual mode.",
           type: 'address',
-          validate: { required: false }
-        }
-      ])
+          validate: { required: false },
+        },
+      ]),
     )
   })
 
@@ -108,8 +108,8 @@ describe(`Form ${testComponent} parser`, () => {
         city: 'sd',
         state_province: 'sd',
         postal_code: 'sd',
-        country: 'sds'
-      }
+        country: 'sds',
+      },
     })
     expect(submission).toEqual({
       address1: {
@@ -118,8 +118,8 @@ describe(`Form ${testComponent} parser`, () => {
         city: 'sd',
         country: 'sds',
         postal_code: 'sd',
-        state_province: 'sd'
-      }
+        state_province: 'sd',
+      },
     })
   })
 
@@ -131,12 +131,12 @@ describe(`Form ${testComponent} parser`, () => {
         matched_substrings: [
           {
             length: 3,
-            offset: 0
+            offset: 0,
           },
           {
             length: 3,
-            offset: 4
-          }
+            offset: 4,
+          },
         ],
         place_id: 'ChIJe_yY7VRD1moR4FaCIXpujzc',
         reference: 'ChIJe_yY7VRD1moR4FaCIXpujzc',
@@ -145,102 +145,102 @@ describe(`Form ${testComponent} parser`, () => {
           main_text_matched_substrings: [
             {
               length: 3,
-              offset: 0
+              offset: 0,
             },
             {
               length: 3,
-              offset: 4
-            }
+              offset: 4,
+            },
           ],
-          secondary_text: 'Brunswick VIC, Australia'
+          secondary_text: 'Brunswick VIC, Australia',
         },
         terms: [
           {
             offset: 0,
-            value: '715'
+            value: '715',
           },
           {
             offset: 4,
-            value: 'Sydney Road'
+            value: 'Sydney Road',
           },
           {
             offset: 17,
-            value: 'Brunswick'
+            value: 'Brunswick',
           },
           {
             offset: 27,
-            value: 'VIC'
+            value: 'VIC',
           },
           {
             offset: 32,
-            value: 'Australia'
-          }
+            value: 'Australia',
+          },
         ],
-        types: ['street_address', 'geocode']
+        types: ['street_address', 'geocode'],
       },
       geocode: {
         address_components: [
           {
             long_name: '715',
             short_name: '715',
-            types: ['street_number']
+            types: ['street_number'],
           },
           {
             long_name: 'Sydney Road',
             short_name: 'Sydney Rd',
-            types: ['route']
+            types: ['route'],
           },
           {
             long_name: 'Brunswick',
             short_name: 'Brunswick',
-            types: ['locality', 'political']
+            types: ['locality', 'political'],
           },
           {
             long_name: 'Moreland City',
             short_name: 'Moreland',
-            types: ['administrative_area_level_2', 'political']
+            types: ['administrative_area_level_2', 'political'],
           },
           {
             long_name: 'Victoria',
             short_name: 'VIC',
-            types: ['administrative_area_level_1', 'political']
+            types: ['administrative_area_level_1', 'political'],
           },
           {
             long_name: 'Australia',
             short_name: 'AU',
-            types: ['country', 'political']
+            types: ['country', 'political'],
           },
           {
             long_name: '3056',
             short_name: '3056',
-            types: ['postal_code']
-          }
+            types: ['postal_code'],
+          },
         ],
         formatted_address: '715 Sydney Rd, Brunswick VIC 3056, Australia',
         geometry: {
           location: {
             lat: -37.7598676,
-            lng: 144.9631721
+            lng: 144.9631721,
           },
           location_type: 'ROOFTOP',
           viewport: {
             northeast: {
               lat: -37.75852881970849,
-              lng: 144.9646129302915
+              lng: 144.9646129302915,
             },
             southwest: {
               lat: -37.76122678029149,
-              lng: 144.9619149697085
-            }
-          }
+              lng: 144.9619149697085,
+            },
+          },
         },
         place_id: 'ChIJe_yY7VRD1moR4FaCIXpujzc',
         plus_code: {
           compound_code: '6XR7+37 Brunswick VIC, Australia',
-          global_code: '4RJ66XR7+37'
+          global_code: '4RJ66XR7+37',
         },
-        types: ['street_address']
-      }
+        types: ['street_address'],
+      },
     })
     expect(submission).toEqual({
       address1: {
@@ -248,8 +248,8 @@ describe(`Form ${testComponent} parser`, () => {
         city: 'Brunswick',
         country: 'Australia',
         postal_code: '3056',
-        state_province: 'Victoria'
-      }
+        state_province: 'Victoria',
+      },
     })
   })
 })

package/src/components/SubComponents/ResourceGroup/index.vue

@@ -1,120 +1,122 @@
 <template>
-  <card-grid
-    :title="title"
-    :title-tag="titleTag"
-    :cards="displayedCards"
-    :rtl="rtl"
-    :force-lg-columns-per-row="columns"
-    :force-md-columns-per-row="columns"
-    :force-sm-columns-per-row="columns"
-    :is-selectable="false"
-    :row-spacing="'large'"
-    :class="[`card_group--${background}`, `card_group--${cardResourseType}`]"
-    :background-variant="background"
-    @selected="selectedCard"
-  >
-    <template
-      v-if="enableBundleFilter && bundle.length > 1"
-      v-slot:gridHeaderRight
+  <div>
+    <card-grid
+      :title="title"
+      :title-tag="titleTag"
+      :cards="displayedCards"
+      :rtl="rtl"
+      :force-lg-columns-per-row="columns"
+      :force-md-columns-per-row="columns"
+      :force-sm-columns-per-row="columns"
+      :is-selectable="false"
+      :row-spacing="'large'"
+      :class="[`card_group--${background}`, `card_group--${cardResourseType}`]"
+      :background-variant="background"
+      @selected="selectedCard"
     >
-      <switcher
-        v-if="enableBundleFilter"
-        :options="bundle"
-        class="card_group__switcher"
-        :get-option-alias="getBundleAlias"
-        @switched="onSwitcher"
-        @reset="onSwitcher"
-      />
-    </template>
-
-    <template v-if="filters.taxonomies.length > 0" v-slot:gridPreContent>
-      <directory-filters
-        class="card_group__filter"
-        :filters="filters"
-        :results="allCards.total"
-        :is-filtering="loader"
-        @onFilter="onFilter"
-        @onReset="reset"
-      />
-    </template>
-
-    <template v-slot:cardItem="{ card }">
-      <card-grid-item
-        v-if="card"
-        :show-divider="false"
-        :header-size="'large'"
-        class="card_group__card"
-        :class="{
-          [`card_group__card--${card.colour}`]: card.pillText,
-          [`card_group__card--none`]: !card.pillText,
-          [`card_group__card--${cardResourseType}`]:
-            'card_group__card--resourse-group',
-        }"
-        :card-header-title="card.title"
-        :caret="getCaret(card)"
-        :description="card.description"
-        :card-padding="'none'"
-        :caret-position="'bottom'"
-        :rtl="card.rtl"
-        :border-type="background === 'white' ? 'thick' : 'none'"
-        :pill-text="card.pillText"
-        :link="card.link ? card.link : false"
-        :taxonomies="{
-          industry: card.industry,
-          topic: card.topic,
-          language: card.language,
-        }"
+      <template
+        v-if="enableBundleFilter && bundle.length > 1"
+        v-slot:gridHeaderRight
       >
-        <template v-slot:cardTop>
-          <card-top :card="card" :resource-type="cardResourseType" />
-        </template>
+        <switcher
+          v-if="enableBundleFilter"
+          :options="bundle"
+          class="card_group__switcher"
+          :get-option-alias="getBundleAlias"
+          @switched="onSwitcher"
+          @reset="onSwitcher"
+        />
+      </template>
 
-        <template v-slot:cardDescription>
-          <card-body :card="card" :resource-type="cardResourseType" />
-        </template>
+      <template v-if="filters.taxonomies.length > 0" v-slot:gridPreContent>
+        <directory-filters
+          class="card_group__filter"
+          :filters="filters"
+          :results="allCards.total"
+          :is-filtering="loader"
+          @onFilter="onFilter"
+          @onReset="reset"
+        />
+      </template>
 
-        <!-- footer - download button -->
-        <template
-          v-if="cardResourseType === 'resource-group'"
-          v-slot:cardFooter
+      <template v-slot:cardItem="{ card }">
+        <card-grid-item
+          v-if="card"
+          :show-divider="false"
+          :header-size="'large'"
+          class="card_group__card"
+          :class="{
+            [`card_group__card--${card.colour}`]: card.pillText,
+            [`card_group__card--none`]: !card.pillText,
+            [`card_group__card--${cardResourseType}`]:
+              'card_group__card--resourse-group',
+          }"
+          :card-header-title="card.title"
+          :caret="getCaret(card)"
+          :description="card.description"
+          :card-padding="'none'"
+          :caret-position="'bottom'"
+          :rtl="card.rtl"
+          :border-type="background === 'white' ? 'thick' : 'none'"
+          :pill-text="card.pillText"
+          :link="card.link ? card.link : false"
+          :taxonomies="{
+            industry: card.industry,
+            topic: card.topic,
+            language: card.language,
+          }"
         >
-          <card-footer :card="card" :resource-type="cardResourseType" />
-        </template>
-      </card-grid-item>
-    </template>
+          <template v-slot:cardTop>
+            <card-top :card="card" :resource-type="cardResourseType" />
+          </template>
 
-    <template
-      v-if="
-        loader ||
-        (displayedCards.length === 0 && !loader) ||
-        $slots.cardGroupFooter ||
-        (!loader && showLoadMore && hasMorePages)
-      "
-      v-slot:cardGridFooter
-    >
-      <column v-if="loader" sm="12">
-        <strong>Loading... </strong>
-        <b-spinner class="float-right"></b-spinner>
-      </column>
-      <column v-if="displayedCards.length === 0 && !loading" sm="12">
-        <strong>{{ emptyCardsText }}</strong>
-      </column>
-      <column v-if="$slots.cardGroupFooter" sm="12">
-        <slot name="cardGroupFooter"></slot>
-      </column>
-      <column v-if="!loader && showLoadMore" sm="12" class="text-center">
-        <cta-button
-          type="dark"
-          :focus-outline="'light'"
-          :text-only="true"
-          :is-centred="true"
-          :class="'card_group__loadmore mb-0'"
-          @clicked="handleLoadMore"
-          >Load more</cta-button
-        >
-      </column>
-    </template>
-  </card-grid>
+          <template v-slot:cardDescription>
+            <card-body :card="card" :resource-type="cardResourseType" />
+          </template>
+
+          <!-- footer - download button -->
+          <template
+            v-if="cardResourseType === 'resource-group'"
+            v-slot:cardFooter
+          >
+            <card-footer :card="card" :resource-type="cardResourseType" />
+          </template>
+        </card-grid-item>
+      </template>
+
+      <template
+        v-if="
+          loader ||
+          (displayedCards.length === 0 && !loader) ||
+          $slots.cardGroupFooter ||
+          (!loader && showLoadMore && hasMorePages)
+        "
+        v-slot:cardGridFooter
+      >
+        <column v-if="loader" sm="12">
+          <strong>Loading... </strong>
+          <b-spinner class="float-right"></b-spinner>
+        </column>
+        <column v-if="displayedCards.length === 0 && !loading" sm="12">
+          <strong>{{ emptyCardsText }}</strong>
+        </column>
+        <column v-if="$slots.cardGroupFooter" sm="12">
+          <slot name="cardGroupFooter"></slot>
+        </column>
+        <column v-if="!loader && showLoadMore" sm="12" class="text-center">
+          <cta-button
+            type="dark"
+            :focus-outline="'light'"
+            :text-only="true"
+            :is-centred="true"
+            :class="'card_group__loadmore mb-0'"
+            @clicked="handleLoadMore"
+            >Load more</cta-button
+          >
+        </column>
+      </template>
+    </card-grid>
+  </div>
 </template>
 
 <script>

package/vite.config.js

@@ -1,24 +1,36 @@
 import { fileURLToPath, URL } from 'node:url'
 import svgLoader from 'vite-svg-loader'
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    vue(), svgLoader()
-  ],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+export default defineConfig(({ command, mode }) => {
+  // Load env file based on `mode` in the current working directory.
+  // Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
+  const env = loadEnv(mode, process.cwd(), '')
+
+  return{
+    css: {
+      preprocessorOptions: {
+        scss: {
+          api: 'modern-compiler', // or "modern", "legacy"
+        },
+      },
+    },
+    plugins: [
+      vue(), svgLoader()
+    ],
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url))
+      }
+    },
+    define: {
+      SHOW_COOKIE: JSON.stringify(env.SHOW_COOKIE),
+      'process.env.CONTENT_API_URL': `"${process.env.CONTENT_API_URL}"`,
+      'process.env.IS_STORYBOOK': `"${process.env.IS_STORYBOOK}"`,
+      'process.env.CARETAKER': `"${process.env.CARETAKER}"`,
+      'process.env.GOOGLE__URL': `"${process.env.GOOGLE__URL}"`
     }
-  },
-  define: {
-     'process.env.SHOW_COOKIE': `"${process.env.SHOW_COOKIE}"`,
-    'process.env.CONTENT_API_URL': `"${process.env.CONTENT_API_URL}"`,
-    'process.env.IS_STORYBOOK': `"${process.env.IS_STORYBOOK}"`,
-    'process.env.CARETAKER': `"${process.env.CARETAKER}"`,
-    'process.env.SHOW_GLOBAL_NOTICE': `"${process.env.SHOW_GLOBAL_NOTICE}"`,
-    'process.env.GOOGLE__URL': `"${process.env.GOOGLE__URL}"`
   }
 })