@worksafevictoria/wcl7.5 1.0.0

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

@@ -0,0 +1,632 @@
+<template>
+  <footer v-if="footerMenu" class="app-footer">
+    <div
+      v-if="changedDate"
+      id="feedbackQuery"
+      class="app-footer__page-info"
+      :class="{ 'app-footer__page-info--workwell': isWorkwell }"
+    >
+      <container>
+        <row>
+          <column>
+            <div class="mobilescreen">Reviewed on {{ updateDate }}</div>
+            <div v-if="!submitted">
+              <div style="margin-right:10px; display:inline">
+                <strong>Was this page helpful?</strong>
+              </div>
+              <input
+                id="frYes"
+                type="radio"
+                :aria-checked="isSet('Yes') ? 'true' : 'false'"
+                role="radio"
+                name="feedback-radio"
+                value="Yes"
+                @change="setResponse($event)"
+              />
+              <label for="frYes" class="option">Yes</label>
+              <input
+                id="frNo"
+                type="radio"
+                :aria-checked="isSet('No') ? 'true' : 'false'"
+                role="radio"
+                name="feedback-radio"
+                value="No"
+                @change="setResponse($event)"
+              />
+              <label for="frNo" class="option">No</label>
+            </div>
+            <div v-if="submitted">
+              <img class="feedback-tick" alt="" :src="Tick" />Thank you for your
+              feedback
+            </div>
+          </column>
+          <column
+            class="app-footer__page-info__reviewed-date fullscreen"
+            :xs="6"
+            >Reviewed on {{ updateDate }}</column
+          >
+        </row>
+      </container>
+    </div>
+    <div v-if="showForm" class="app-footer__feedback-form">
+      <container>
+        <row>
+          <column>
+            <div class="app-footer__feedback-form__feedback-content">
+              <div>
+                <div class="fullscreen">
+                  <h4>Tell us more (optional)</h4>
+                </div>
+                <div class="mobilescreen">
+                  <strong>Tell us more (optional)</strong>
+                </div>
+                <div>
+                  We are unable to respond to questions via this form. If you
+                  have a question and would like to receive a reply, please use
+                  one of the
+                  <a
+                    class="feedback-link"
+                    href="https://www.worksafe.vic.gov.au/contact-worksafe"
+                    >contact options</a
+                  >.
+                </div>
+                <textarea
+                  id="feedbackMessage"
+                  v-model="response.message"
+                  class="feedback-textarea"
+                ></textarea>
+                <div class="feedback-buttons">
+                  <button
+                    id="cancelBtn"
+                    role="button"
+                    class="feedback-buttons feedback-cancel"
+                    aria-label="Cancel feedback"
+                    @click="cancelFeedback()"
+                  >
+                    Cancel
+                  </button>
+                  <cta-button
+                    style="float:right;"
+                    :url="''"
+                    :rtl="rtl"
+                    @clicked="submitFeedback()"
+                    >Submit</cta-button
+                  >
+                </div>
+              </div>
+            </div>
+          </column>
+        </row>
+      </container>
+    </div>
+    <div
+      class="app-footer__main"
+      :class="{ 'app-footer__main--workwell': isWorkwell }"
+    >
+      <container>
+        <row valign="center" class="app-footer__main__social-share">
+          <column :xs="12" :sm="2"
+            ><img
+              height="48"
+              :width="isWorkwell ? 99 : 101"
+              :src="isWorkwell ? WorkWellLogo : WorkSafeLogo"
+              :alt="
+                !isWorkwell
+                  ? 'Work Safe Victoria - Logo'
+                  : 'Work Well Victoria - Logo'
+              "
+          /></column>
+          <column :xs="12" :sm="10">
+            <footer-social-share :is-workwell="isWorkwell" />
+          </column>
+        </row>
+        <row class="app-footer__main__menu">
+          <column
+            v-for="(menuItem, index) in menu"
+            :key="index"
+            :md="3"
+            :xs="12"
+            class="app-footer-menu"
+          >
+            <ul>
+              <li
+                class="app-footer-menu__title"
+                @click="handleMenuItemClick(menu, index)"
+                @keyup="handleMenuItemKeyup(menu, index, $event)"
+              >
+                <img
+                  v-show="!menuItem.isOpen"
+                  :src="CaretDown"
+                  height="12"
+                  width="17"
+                  class="app-footer-menu__title__caret"
+                  alt=""
+                />
+                <img
+                  v-show="menuItem.isOpen"
+                  :src="CaretUp"
+                  height="12"
+                  width="17"
+                  class="app-footer-menu__title__caret"
+                  alt=""
+                />
+
+                <a
+                  v-if="menuItem.absolute === menuItem.relative"
+                  :role="!menuItem.absolute ? 'button' : false"
+                  :href="menuItem.absolute"
+                  class="app-footer-menu__title--link dark"
+                  :class="!menuItem.absolute ? 'nolink' : false"
+                  target="_blank"
+                  :aria-expanded="
+                    isMobile ? (menuItem.isOpen ? 'true' : 'false') : false
+                  "
+                  @click.prevent="handleAbsoluteClick(menuItem)"
+                  ><h2>{{ menuItem.title }}</h2>
+                </a>
+                <nuxt-link
+                  v-else
+                  :to="menuItem.relative"
+                  class="app-footer-menu__title--link dark"
+                >
+                  <h2>{{ menuItem.title }}</h2>
+                </nuxt-link>
+                <ul
+                  v-if="menuItem.below"
+                  class="submenu"
+                  :class="menuItem.isOpen ? 'isOpen' : false"
+                >
+                  <li
+                    v-for="(subItem, subIndex) in menuItem.below"
+                    :key="subIndex"
+                    class="app-footer-menu__item"
+                    :class="{
+                      'app-footer-menu__item--hide': !menuItem.isOpen
+                    }"
+                  >
+                    <a
+                      v-if="subItem.absolute === subItem.relative"
+                      :href="subItem.absolute"
+                      target="_blank"
+                      class="app-footer-menu__item--link dark"
+                      @click.prevent="handleAbsoluteClick(subItem)"
+                      >{{ subItem.title
+                      }}<img
+                        :src="ExternalLink"
+                        height="12"
+                        width="12"
+                        class="app-footer-menu__item--icon"
+                        alt="external link"
+                      />
+                    </a>
+                    <nuxt-link
+                      v-else
+                      :to="subItem.relative"
+                      class="app-footer-menu__item--link dark"
+                    >
+                      {{ subItem.title }}
+                    </nuxt-link>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </column>
+          <column :md="3" :xs="12" class="app-footer-menu"
+            ><ul>
+              <li
+                class="app-footer-menu__title"
+                @click="handleContactItemClick(menu)"
+                @keyup="handleContactItemKeyup(menu, $event)"
+              >
+                <a
+                  :aria-expanded="
+                    isMobile ? (contactMenuIsOpen ? 'true' : 'false') : false
+                  "
+                  role="button"
+                  class="app-footer-menu__title--link dark nolink"
+                  ><h2>Contact</h2></a
+                >
+                <img
+                  v-show="!contactMenuIsOpen"
+                  :src="CaretDown"
+                  height="12"
+                  width="17"
+                  class="app-footer-menu__title__caret"
+                  alt=""
+                />
+                <img
+                  v-show="contactMenuIsOpen"
+                  :src="CaretUp"
+                  height="12"
+                  width="17"
+                  class="app-footer-menu__title__caret"
+                  alt=""
+                />
+                <ul
+                  class="submenu"
+                  :class="contactMenuIsOpen ? 'isOpen' : false"
+                >
+                  <li
+                    class="app-footer-menu__item app-footer-menu__address app-footer-menu__item--link"
+                    :class="{
+                      'app-footer-menu__item--hide': !contactMenuIsOpen
+                    }"
+                  >
+                    <p>
+                      WorkSafe Victoria <br />
+                      1 Malop Street <br />
+                      Geelong VIC 3220
+                    </p>
+                  </li>
+                  <li
+                    class="app-footer-menu__item app-footer-menu__item--link"
+                    :class="{
+                      'app-footer-menu__item--hide': !contactMenuIsOpen
+                    }"
+                  >
+                    <a class="dark" href="tel:+611800136089">1800 136 089</a>
+                  </li>
+                  <li
+                    class="app-footer-menu__item app-footer-menu__item--link"
+                    :class="{
+                      'app-footer-menu__item--hide': !contactMenuIsOpen
+                    }"
+                  >
+                    <nuxt-link class="dark" to="/contact-worksafe"
+                      >More contacts</nuxt-link
+                    >
+                  </li>
+                </ul>
+              </li>
+            </ul></column
+          >
+        </row>
+        <row class="app-footer__main__subscribe">
+          <column :xs="12" :md="7">
+            <img
+              :src="AboriginalFlag"
+              height="38"
+              width="64"
+              class="app-footer__main__subscribe__flag"
+              alt="Aboriginal Flag"
+            />
+            <img
+              :src="TorresStraitFlag"
+              height="38"
+              width="64"
+              class="app-footer__main__subscribe__flag"
+              alt="Torres Strait Flag"
+            />
+            <img
+              :src="PrideFlag"
+              height="38"
+              width="64"
+              class="app-footer__main__subscribe__flag"
+              alt="Pride Flag"
+            />
+            <p>
+              WorkSafe Victoria acknowledges Aboriginal and Torres Strait
+              Islander people as the Traditional Custodians of the land and
+              acknowledges and pays respect to their Elders, past and present.
+            </p>
+            <p>
+              WorkSafe Victoria is committed to safe and inclusive work places,
+              policies and services for people of LGBTIQ communities and their
+              families.
+            </p>
+          </column>
+          <column :md="1" class="app-footer__main__empty-col" />
+          <column :xs="12" :md="4" class="app-footer__main__subscribe-col">
+            <img
+              v-if="isWorkwell"
+              :src="WorkSafeLogo"
+              height="48"
+              width="101"
+              class="app-footer__main__subscribe-col__worksafe-icon"
+              alt="Work Safe Victoria - Logo"
+            />
+            <img
+              alt="Victoria State Government - Logo"
+              :src="VicGovLogo"
+              height="60"
+              width="106"
+            />
+            <p class="app-footer__main__subscribe-col__text">
+              WorkSafe Victoria © {{ new Date().getFullYear() }}
+            </p>
+            <button
+              class="app-footer__main__subscribe-col__btn"
+              :class="{
+                'app-footer__main__subscribe-btn--workwell': isWorkwell
+              }"
+              @click="subscribe"
+            >
+              <span>Subscribe</span>
+              <span class="visually-hidden">External link</span>
+              <icon
+                width="24"
+                height="24"
+                class="app-footer__main__subscribe--icon"
+                :glyph="ExternalLinkRaw"
+              />
+            </button>
+          </column>
+        </row>
+      </container>
+    </div>
+  </footer>
+</template>
+
+<script>
+import Row from './../../Containers/Row/index.vue'
+import Container from './../../Containers/Container/index.vue'
+import Column from './../../Containers/Column/index.vue'
+import FooterSocialShare from './FooterSocialShare/index.vue'
+import CaretUp from './../../../assets/icons/caret-up.svg?url'
+import CaretDown from './../../../assets/icons/caret-down.svg?url'
+import WorkSafeLogo from './../../../assets/icons/AppFooter/worksafe-footer-logo.svg?url'
+import VicGovLogo from './../../../assets/icons/brand-VicStateGov-logo-reversed.svg?url'
+import ExternalLink from './../../../assets/icons/external-link-16px.svg?url'
+import ExternalLinkRaw from './../../../assets/icons/external-link.svg?url'
+import AboriginalFlag from './../../../assets/icons/AppFooter/australian-aboriginal-flag.svg?url'
+import PrideFlag from './../../../assets/icons/AppFooter/pride-flag.svg?url'
+import TorresStraitFlag from './../../../assets/icons/AppFooter/torres-strait-islanders-flag.svg?url'
+import WorkWellLogo from './../../../assets/icons/AppFooter/logo-workwell-reversed.svg?url'
+import { format } from 'date-fns'
+import Icon from './../../SubComponents/Icon/index.vue'
+import CtaButton from './../../SubComponents/CtaButton/index.vue'
+import Tick from './../../../assets/icons/tick.svg?url'
+
+export default {
+  name: 'AppFooter',
+  components: {
+    FooterSocialShare,
+    Column,
+    Container,
+    Row,
+    Icon,
+    CtaButton
+  },
+  props: {
+    footerMenu: {
+      type: Array,
+      required: true
+    },
+    changedDate: {
+      type: String,
+      required: true
+    },
+    isWorkwell: {
+      type: Boolean,
+      default: false
+    },
+    storybook: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      contactMenuIsOpen: false,
+      Tick,
+      CaretUp,
+      CaretDown,
+      WorkSafeLogo,
+      VicGovLogo,
+      ExternalLink,
+      ExternalLinkRaw,
+      AboriginalFlag,
+      PrideFlag,
+      TorresStraitFlag,
+      WorkWellLogo,
+      menu: this.footerMenu,
+      windowWidth: 0,
+      rtl: false,
+      showForm: false,
+      submitted: false,
+      endpoint:
+        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: ''
+      }
+    }
+  },
+  computed: {
+    updateDate() {
+      // https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
+      return format(new Date(this.changedDate), 'dd/MM/yyyy')
+    },
+    isMobile() {
+      return this.windowWidth < 768
+    },
+    processID() {
+      return `${Date.now()}-${Math.floor(Math.random() * 10000)}`
+    }
+  },
+  watch: {
+    $route() {
+      this.showForm = false
+      this.submitted = false
+    },
+    showForm: {
+      handler: function() {
+        this.initialiseFeedback()
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      window.addEventListener('resize', this.onResize)
+    })
+    this.onResize()
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.onResize)
+  },
+  methods: {
+    initialiseFeedback() {
+      if (!this.showForm) {
+        var rbY = document.getElementById('frYes')
+        rbY.checked = false
+        var rbN = document.getElementById('frNo')
+        rbN.checked = false
+      }
+    },
+    setResponse(event) {
+      var answer = event.target.value
+      this.response.was_the_information_on_this_page_helpful_ = answer
+      this.response.page_url = window.location.href
+      this.showForm = true
+      this.fireGtagHelpful()
+    },
+    cancelFeedback() {
+      this.showForm = false
+    },
+    async submitFeedback() {
+      if (this.$gtm) {
+        try {
+          const res = await this.$axios.post(this.endpoint, this.response)
+          if (res.data && res.data.sid) {
+            this.submitted = true
+            this.showForm = false
+            this.fireGtagFeedback()
+          }
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.error('Error submitting webform')
+        }
+      } else {
+        this.submitted = true
+        this.showForm = false
+      }
+    },
+    isSet(ans) {
+      return this.response.was_the_information_on_this_page_helpful_ === ans
+    },
+    fireGtagHelpful() {
+      const attrs = {
+        event: 'custom.interaction.helpful',
+        label: this.response.was_the_information_on_this_page_helpful_,
+        title: this.$store?.state?.page?.content?.title
+      }
+      if (this.$gtm) {
+        this.$gtm.push({ event: 'custom.interaction.helpful', ...attrs })
+      }
+    },
+    fireGtagFeedback() {
+      const attrs = {
+        title: this.$store?.state?.page?.content?.title,
+        label: this.response.was_the_information_on_this_page_helpful_,
+        processID: this.processID
+      }
+      if (this.$gtm) {
+        this.$gtm.push({
+          event: 'custom.interaction.helpful.feedback',
+          ...attrs
+        })
+      }
+    },
+    backToTop() {
+      if (!this.storybook) {
+        this.$nuxt.$emit('scrollToTop')
+      }
+    },
+    isAbsoluteUrl(uri) {
+      let r = new RegExp('^(?:[a-z]+:)?//', 'i')
+      return r.test(uri)
+    },
+    subscribe() {
+      window.location =
+        'https://comms.worksafe.vic.gov.au/link/id/zzzz5c2d405926ec7534Pzzzz4ff385a2d38d8616/page.html?prompt=1'
+    },
+    handleMenuItemClick(menuFooter, index) {
+      // splice is needed for vue to pick up that changes to the footerMenu array and re-render the screen
+      if (this.isMobile) {
+        for (let i = 0; i < menuFooter.length; i++) {
+          let newMenuItem = menuFooter[i]
+          this.contactMenuIsOpen = false
+          if (i === index) {
+            newMenuItem.isOpen = !newMenuItem.isOpen
+          } else {
+            newMenuItem.isOpen = false
+          }
+          menuFooter.splice(i, 1, newMenuItem)
+        }
+      }
+    },
+    handleContactItemClick(menuFooter) {
+      if (this.isMobile) {
+        for (let i = 0; i < menuFooter.length; i++) {
+          let newMenuItem = menuFooter[i]
+          this.contactMenuIsOpen = !this.contactMenuIsOpen
+          newMenuItem.isOpen = false
+          menuFooter.splice(i, 1, newMenuItem)
+        }
+      }
+    },
+    handleMenuItemKeyup(menuFooter, index, event) {
+      if (this.isMobile) {
+        if (event.keyCode === 32 || event.keyCode === 13) {
+          //splice is needed for vue to pick up that changes to the menuFooter array and re-render the screen
+          for (let i = 0; i < menuFooter.length; i++) {
+            let newMenuItem = menuFooter[i]
+            this.contactMenuIsOpen = false
+            if (i === index) {
+              newMenuItem.isOpen = !newMenuItem.isOpen
+            } else {
+              newMenuItem.isOpen = false
+            }
+            menuFooter.splice(i, 1, newMenuItem)
+          }
+        }
+      }
+    },
+    handleContactItemKeyup(menuFooter, event) {
+      if (this.isMobile) {
+        if (event.keyCode === 32 || event.keyCode === 13) {
+          for (let i = 0; i < menuFooter.length; i++) {
+            let newMenuItem = menuFooter[i]
+            this.contactMenuIsOpen = !this.contactMenuIsOpen
+            newMenuItem.isOpen = false
+            menuFooter.splice(i, 1, newMenuItem)
+          }
+        }
+      }
+    },
+    onResize() {
+      this.windowWidth = window.innerWidth
+      let titles = document.getElementsByClassName('app-footer-menu__title')
+      if (Array.isArray(titles)) {
+        if (this.isMobile) {
+          titles.forEach((t) => {
+            t.setAttribute('tabIndex', '0')
+          })
+        } else {
+          titles.forEach((t) => {
+            t.removeAttribute('tabIndex')
+          })
+        }
+      }
+    },
+    handleAbsoluteClick(item) {
+      if (item.absolute) {
+        if (this.$gtm) {
+          this.$gtm.push({
+            event: 'custom.interaction.outboundlink',
+            category: item.title,
+            label: item.absolute
+          })
+        }
+        window.open(item.absolute)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './styles';
+</style>