@worksafevictoria/wcl7.5 1.1.0-beta.1 → 1.1.0-beta.100

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

@@ -11,7 +11,7 @@
           <column>
             <div class="mobilescreen">Reviewed on {{ updateDate }}</div>
             <div v-if="!submitted">
-              <div style="margin-right:10px; display:inline">
+              <div style="margin-right: 10px; display: inline">
                 <strong>Was this page helpful?</strong>
               </div>
               <input
@@ -86,7 +86,7 @@
                     Cancel
                   </button>
                   <cta-button
-                    style="float:right;"
+                    style="float: right"
                     :url="''"
                     :rtl="rtl"
                     @clicked="submitFeedback()"
@@ -181,7 +181,7 @@
                     :key="subIndex"
                     class="app-footer-menu__item"
                     :class="{
-                      'app-footer-menu__item--hide': !menuItem.isOpen
+                      'app-footer-menu__item--hide': !menuItem.isOpen,
                     }"
                   >
                     <a
@@ -249,7 +249,7 @@
                   <li
                     class="app-footer-menu__item app-footer-menu__address app-footer-menu__item--link"
                     :class="{
-                      'app-footer-menu__item--hide': !contactMenuIsOpen
+                      'app-footer-menu__item--hide': !contactMenuIsOpen,
                     }"
                   >
                     <p>
@@ -261,7 +261,7 @@
                   <li
                     class="app-footer-menu__item app-footer-menu__item--link"
                     :class="{
-                      'app-footer-menu__item--hide': !contactMenuIsOpen
+                      'app-footer-menu__item--hide': !contactMenuIsOpen,
                     }"
                   >
                     <a class="dark" href="tel:+611800136089">1800 136 089</a>
@@ -269,7 +269,7 @@
                   <li
                     class="app-footer-menu__item app-footer-menu__item--link"
                     :class="{
-                      'app-footer-menu__item--hide': !contactMenuIsOpen
+                      'app-footer-menu__item--hide': !contactMenuIsOpen,
                     }"
                   >
                     <nuxt-link class="dark" to="/contact-worksafe"
@@ -337,7 +337,7 @@
             <button
               class="app-footer__main__subscribe-col__btn"
               :class="{
-                'app-footer__main__subscribe-btn--workwell': isWorkwell
+                'app-footer__main__subscribe-btn--workwell': isWorkwell,
               }"
               @click="subscribe"
             >
@@ -385,25 +385,25 @@ export default {
     Container,
     Row,
     Icon,
-    CtaButton
+    CtaButton,
   },
   props: {
     footerMenu: {
       type: Array,
-      required: true
+      required: true,
     },
     changedDate: {
       type: String,
-      required: true
+      required: true,
     },
     isWorkwell: {
       type: Boolean,
-      default: false
+      default: false,
     },
     storybook: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
@@ -425,26 +425,33 @@ export default {
       showForm: false,
       submitted: false,
       endpoint:
-        process.env.CONTENT_API_URL + '/webform_rest/submit?_format=json',
+        (this.$config
+          ? this.$config.public.apiURL
+          : process.env.CONTENT_API_URL) + '/webform_rest/submit?_format=json',
       response: {
         webform_id: 'page_feedback_form',
         page_url: '',
         was_the_information_on_this_page_helpful_: '',
-        message: ''
-      }
+        message: '',
+      },
     }
   },
   computed: {
     updateDate() {
-      // https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
-      return format(new Date(this.changedDate), 'dd/MM/yyyy')
+      // Change to remove hydration date
+      return new Date(this.changedDate)
+        .toLocaleString('en-AU', {
+          timeZone: 'Australia/Sydney',
+        })
+        .split(',')[0]
     },
     isMobile() {
       return this.windowWidth < 768
     },
-    processID() {
-      return `${Date.now()}-${Math.floor(Math.random() * 10000)}`
-    }
+    // Why send junk id
+    // processID() {
+    //   return `${Date.now()}-${Math.floor(Math.random() * 10000)}`
+    // },
   },
   watch: {
     $route() {
@@ -452,10 +459,10 @@ export default {
       this.submitted = false
     },
     showForm: {
-      handler: function() {
+      handler: function () {
         this.initialiseFeedback()
-      }
-    }
+      },
+    },
   },
   mounted() {
     this.$nextTick(() => {
@@ -510,7 +517,8 @@ export default {
       const attrs = {
         event: 'custom.interaction.helpful',
         label: this.response.was_the_information_on_this_page_helpful_,
-        title: this.$store?.state?.page?.content?.title
+        //title: this.$store?.state?.page?.content?.title,
+        title: this.$pageStore?.content?.title,
       }
       if (this.$gtm) {
         this.$gtm.push({ event: 'custom.interaction.helpful', ...attrs })
@@ -518,20 +526,21 @@ export default {
     },
     fireGtagFeedback() {
       const attrs = {
-        title: this.$store?.state?.page?.content?.title,
+        //title: this.$store?.state?.page?.content?.title,
+        title: this.$pageStore?.content?.title,
         label: this.response.was_the_information_on_this_page_helpful_,
-        processID: this.processID
+        // processID: this.processID, why send GTM junk id
       }
       if (this.$gtm) {
         this.$gtm.push({
           event: 'custom.interaction.helpful.feedback',
-          ...attrs
+          ...attrs,
         })
       }
     },
     backToTop() {
-      if (!this.storybook) {
-        this.$nuxt.$emit('scrollToTop')
+      if (this.$bus) {
+        this.$bus.$emit('scrollToTop')
       }
     },
     isAbsoluteUrl(uri) {
@@ -617,13 +626,13 @@ export default {
           this.$gtm.push({
             event: 'custom.interaction.outboundlink',
             category: item.title,
-            label: item.absolute
+            label: item.absolute,
           })
         }
         window.open(item.absolute)
       }
-    }
-  }
+    },
+  },
 }
 </script>
 

package/src/components/Global/AppHeader/ModalSearch/index.vue

@@ -17,6 +17,7 @@
       >
       <search
         ref="searchInputBox"
+        :google-search-flag="googleSearchFlag"
         :initial-search-query="searchQuery"
         :page-limit="pageLimit"
         :page-number="pageNumber"
@@ -31,7 +32,7 @@
 </template>
 
 <script>
-import Close from '../../../../assets/icons/close.svg'
+import Close from '../../../../assets/icons/close.svg?url'
 import Search from '../../../SubComponents/Search/index.vue'
 
 export default {
@@ -45,6 +46,10 @@ export default {
     contentParser: {
       type: Function,
       required: true
+    },
+    googleSearchFlag: {
+      type: String,
+      default: 'googlerest'
     }
   },
   data() {

package/src/components/Global/AppHeader/index.stories.js

@@ -18,45 +18,42 @@ const contentParser = () => {
 export default {
   title: 'Global/AppHeader',
   component: AppHeader,
+  tags: ['autodocs'],
   data() {
     return {
       appHeaderData
     }
   },
   argTypes: {
-    headerMenu: {
-      control: 'object',
-      defaultValue: appHeaderData
-    },
     contentParser: {
-      control: 'function',
-      defaultValue: contentParser,
       table: { disable: true }
-    },
-    isWorkWell: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    authenticated: {
-      control: 'boolean',
-      defaultValue: false
     }
+  },
+  args: {
+    headerMenu: appHeaderData,
+    contentParser: contentParser,
+    isWorkWell: false,
+    authenticated: false,
+    mainContent: 'Some dummy main content required for this example',
+    footerContent: 'Some dummy footer content required for this example'
   }
 }
 
-const DefaultContent = (args, { argTypes }) => ({
+const DefaultContent = (args) => ({
   components: { AppHeader },
-  props: Object.keys(argTypes),
+  setup() {
+    return { args }
+  },
   template: `
   <div>
   <app-header
-  v-bind="$props"
+  v-bind="args"
   />
     <main>
       <div class="container">
         <div class="row">
           <div class="col">
-            {{$props.mainContent}}
+            {{args.mainContent}}
           </div>
         </div>
       </div>
@@ -65,7 +62,7 @@ const DefaultContent = (args, { argTypes }) => ({
       <div class="container">
         <div class="row">
           <div class="col">
-          {{$props.footerContent}}
+          {{args.footerContent}}
           </div>
         </div>
       </div>
@@ -75,8 +72,3 @@ const DefaultContent = (args, { argTypes }) => ({
 })
 
 export const Default = DefaultContent.bind({})
-
-Default.args = {
-  mainContent: 'Some dummy main content required for this example',
-  footerContent: 'Some dummy footer content required for this example'
-}

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

@@ -7,7 +7,7 @@
       <div
         v-if="
           (!isSecondLevelOpen && screen === 'desktop') ||
-            (!isMobileMenuOpen && screen === 'mobile')
+          (!isMobileMenuOpen && screen === 'mobile')
         "
         class="app-header__app-branding"
       >
@@ -29,7 +29,7 @@
         <button
           v-if="
             (isSecondLevelOpen && screen === 'desktop') ||
-              (isMobileMenuOpen && screen === 'mobile')
+            (isMobileMenuOpen && screen === 'mobile')
           "
           ref="closeMenuButton"
           class="dark"
@@ -56,7 +56,7 @@
       <nav
         v-if="isMobileMenuOpen || screen === 'desktop'"
         :class="{
-          'styled-scrollbar': screen === 'mobile' && !isSecondLevelOpen
+          'styled-scrollbar': screen === 'mobile' && !isSecondLevelOpen,
         }"
       >
         <ul class="app-header__nav-menu">
@@ -75,7 +75,7 @@
               @click.prevent="
                 firstLevelClick(
                   firstLevelLink,
-                  `firstLevelMenuItem-${parentIndex}`
+                  `firstLevelMenuItem-${parentIndex}`,
                 )
               "
               @mouseover="mouseHover('firstLevelMenuItem', parentIndex)"
@@ -114,7 +114,8 @@
                 <div
                   class="sub-nav-container__wrap"
                   :class="{
-                    'styled-scrollbar': screen === 'mobile' && isSecondLevelOpen
+                    'styled-scrollbar':
+                      screen === 'mobile' && isSecondLevelOpen,
                   }"
                 >
                   <div
@@ -136,12 +137,11 @@
                   <div class="selected-items">
                     <ul v-if="firstLevelLink.below" class="sub-nav-group">
                       <li
-                        v-for="(secondLevelLink,
-                        secondIndex) in firstLevelLink.below"
+                        v-for="(
+                          secondLevelLink, secondIndex
+                        ) in firstLevelLink.below"
                         :key="secondLevelLink.key"
-                        :ref="
-                          `secondLevelMenuItem-${parentIndex}-${secondIndex}`
-                        "
+                        :ref="`secondLevelMenuItem-${parentIndex}-${secondIndex}`"
                         class="sub-nav-parent-item"
                       >
                         <a
@@ -154,41 +154,41 @@
                             searchFocus(
                               secondIndex,
                               firstLevelLink.below.length,
-                              $event
+                              $event,
                             )
                           "
                           @click.prevent="
                             secondLevelClick(
                               secondLevelLink,
-                              `secondLevelMenuItem-${parentIndex}-${secondIndex}`
+                              `secondLevelMenuItem-${parentIndex}-${secondIndex}`,
                             )
                           "
                           @mouseover="
                             mouseHover(
                               'secondLevelMenuItem',
                               parentIndex,
-                              secondIndex
+                              secondIndex,
                             )
                           "
                           @mouseleave="
                             mouseLeave(
                               'secondLevelMenuItem',
                               parentIndex,
-                              secondIndex
+                              secondIndex,
                             )
                           "
                           @focusin="
                             mouseHover(
                               'secondLevelMenuItem',
                               parentIndex,
-                              secondIndex
+                              secondIndex,
                             )
                           "
                           @focusout="
                             mouseLeave(
                               'secondLevelMenuItem',
                               parentIndex,
-                              secondIndex
+                              secondIndex,
                             )
                           "
                         >
@@ -213,35 +213,35 @@
                             searchFocus(
                               secondIndex,
                               firstLevelLink.below.length,
-                              $event
+                              $event,
                             )
                           "
                           @mouseover.native="
                             mouseHover(
                               'secondLevelMenuItem',
                               parentIndex,
-                              secondIndex
+                              secondIndex,
                             )
                           "
                           @mouseleave.native="
                             mouseLeave(
                               'secondLevelMenuItem',
                               parentIndex,
-                              secondIndex
+                              secondIndex,
                             )
                           "
                           @focusin.native="
                             mouseHover(
                               'secondLevelMenuItem',
                               parentIndex,
-                              secondIndex
+                              secondIndex,
                             )
                           "
                           @focusout.native="
                             mouseLeave(
                               'secondLevelMenuItem',
                               parentIndex,
-                              secondIndex
+                              secondIndex,
                             )
                           "
                           @click.native="fireAnalytics(secondLevelLink)"
@@ -253,9 +253,7 @@
                             <div class="selected-title">
                               <nuxt-link
                                 v-if="secondLevelLink.relative"
-                                :ref="
-                                  `secondLevelSelectedTitle-${parentIndex}-${secondIndex}`
-                                "
+                                :ref="`secondLevelSelectedTitle-${parentIndex}-${secondIndex}`"
                                 :to="secondLevelLink.relative"
                                 class="dark"
                                 @click.native="fireAnalytics(secondLevelLink)"
@@ -271,12 +269,11 @@
                                 class="sub-nav-group"
                               >
                                 <li
-                                  v-for="(thirdLevelLink,
-                                  thirdIndex) in secondLevelLink.below"
+                                  v-for="(
+                                    thirdLevelLink, thirdIndex
+                                  ) in secondLevelLink.below"
                                   :key="thirdLevelLink.key"
-                                  :ref="
-                                    `thirdLevelMenuItem-${parentIndex}-${secondIndex}-${thirdIndex}`
-                                  "
+                                  :ref="`thirdLevelMenuItem-${parentIndex}-${secondIndex}-${thirdIndex}`"
                                 >
                                   <nuxt-link
                                     v-if="thirdLevelLink.relative"
@@ -286,7 +283,7 @@
                                       searchFocus(
                                         thirdIndex,
                                         secondLevelLink.below.length,
-                                        $event
+                                        $event,
                                       )
                                     "
                                     @mouseover.native="
@@ -294,7 +291,7 @@
                                         'thirdLevelMenuItem',
                                         parentIndex,
                                         secondIndex,
-                                        thirdIndex
+                                        thirdIndex,
                                       )
                                     "
                                     @mouseleave.native="
@@ -302,7 +299,7 @@
                                         'thirdLevelMenuItem',
                                         parentIndex,
                                         secondIndex,
-                                        thirdIndex
+                                        thirdIndex,
                                       )
                                     "
                                     @focusin.native="
@@ -310,7 +307,7 @@
                                         'thirdLevelMenuItem',
                                         parentIndex,
                                         secondIndex,
-                                        thirdIndex
+                                        thirdIndex,
                                       )
                                     "
                                     @focusout.native="
@@ -318,7 +315,7 @@
                                         'thirdLevelMenuItem',
                                         parentIndex,
                                         secondIndex,
-                                        thirdIndex
+                                        thirdIndex,
                                       )
                                     "
                                     @click.native="
@@ -416,14 +413,14 @@
 
 <script>
 import ModalSearch from './ModalSearch/index.vue'
-import Close from './../../../assets/icons/close.svg'
-import WorkSafeLogo from './../../../assets/icons/AppFooter/worksafe-footer-logo.svg'
-import WorkWellLogo from './../../../assets/icons/AppFooter/logo-workwell-reversed.svg'
-import CaretRight from './../../../assets/icons/caret-right.svg'
-import CaretDown from './../../../assets/icons/caret-down.svg'
-import SearchIcon from './../../../assets/icons/AppHeader/search-32px.svg'
-import CaretLeft from './../../../assets/icons/caret-left.svg'
-import MenuIcon from './../../../assets/icons/AppHeader/menu-32px.svg'
+import Close from './../../../assets/icons/close.svg?component'
+import WorkSafeLogo from './../../../assets/icons/AppFooter/worksafe-footer-logo.svg?url'
+import WorkWellLogo from './../../../assets/icons/AppFooter/logo-workwell-reversed.svg?url'
+import CaretRight from './../../../assets/icons/caret-right.svg?component'
+import CaretDown from './../../../assets/icons/caret-down.svg?component'
+import SearchIcon from './../../../assets/icons/AppHeader/search-32px.svg?component'
+import CaretLeft from './../../../assets/icons/caret-left.svg?component'
+import MenuIcon from './../../../assets/icons/AppHeader/menu-32px.svg?component'
 
 export default {
   components: {
@@ -433,25 +430,25 @@ export default {
     CaretDown,
     CaretLeft,
     MenuIcon,
-    SearchIcon
+    SearchIcon,
   },
   props: {
     headerMenu: {
       type: Array,
-      required: true
+      required: true,
     },
     contentParser: {
       type: Function,
-      required: true
+      required: true,
     },
     isWorkWell: {
       type: Boolean,
-      default: false
+      default: false,
     },
     authenticated: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
@@ -472,7 +469,7 @@ export default {
       CaretLeft,
       MenuIcon,
       windowWidth: 0,
-      searchQuery: null
+      searchQuery: null,
     }
   },
   computed: {
@@ -486,7 +483,7 @@ export default {
     },
     isChrome() {
       return !!window.chrome
-    }
+    },
   },
   watch: {
     $route() {
@@ -503,7 +500,7 @@ export default {
           this.isMobileMenuOpen = true
         }
       }
-    }
+    },
   },
   destroyed() {
     window.removeEventListener('resize', this.screenWidth)
@@ -513,8 +510,8 @@ export default {
       window.addEventListener('resize', this.screenWidth)
       this.screenWidth()
     }
-    if (this.$nuxt) {
-      this.$nuxt.$on('site-search', (query) => {
+    if (this.$bus) {
+      this.$bus.$on('site-search', (query) => {
         this.searchQuery = query
         if (query) {
           this.showSearch()
@@ -527,6 +524,7 @@ export default {
       this.windowWidth = window.innerWidth
     },
     firstLevelClick(item, ref) {
+      console.log('in first level click')
       // Reset screen to fix whitespace
       if (window && window.scrollTo && this.screen === 'desktop') {
         window.scrollTo(0, 0)
@@ -657,7 +655,7 @@ export default {
         refID,
         parentIndex,
         secondIndex,
-        thirdIndex
+        thirdIndex,
       )
       if (theLI) {
         let A = theLI.getElementsByTagName('A')[0]
@@ -669,7 +667,7 @@ export default {
         refID,
         parentIndex,
         secondIndex,
-        thirdIndex
+        thirdIndex,
       )
       if (theLI) {
         let A = theLI.getElementsByTagName('A')[0]
@@ -859,16 +857,16 @@ export default {
         event: 'custom.interaction.megamenu.click',
         group: 'Mega Menu',
         label: content.title,
-        url: content.relative
+        url: content.relative,
       }
       // this.$store.dispatch('tracking/event', payload)
     },
     skipToContent() {
-      if (this.$nuxt) {
-        this.$nuxt.$emit('scrollToTop')
+      if (this.$bus) {
+        this.$bus.$emit('scrollToTop')
       }
-    }
-  }
+    },
+  },
 }
 </script>