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

package/src/components/SubComponents/FormInstance/components/handler/index.vue

@@ -0,0 +1,204 @@
+<template>
+  <div ref="formhandler" class="formhandler">
+    <div v-if="loading">Loading...</div>
+    <div class="formhandler__messages">
+      <form-alert
+        v-if="alert"
+        :message="alert.message"
+        :fields="alert.fields"
+        :is-error="alert.isError"
+        :process-i-d="processID"
+        :sid="sid"
+      />
+    </div>
+    <form-renderer
+      v-if="form && !submitSuccess"
+      :formiodefinition="form.definition"
+      :options="form.options"
+      :override-c-s-s="form.css"
+      :process-i-d="processID"
+      @changed="changed"
+      @submitted="beforeSubmit"
+      @rendered="() => rendered('rendered')"
+      @nextPage="() => rendered('nextPage')"
+      @prevPage="() => rendered('prevPage')"
+    ></form-renderer>
+  </div>
+</template>
+<script>
+import axios from 'axios'
+import FormRenderer from '../renderer/index.vue'
+import FormAlert from '../alert/index.vue'
+import { FormCallbackQueue } from '../../models/form-callback-queue'
+import { FormRenderParser } from '../../services/form-render-parser'
+import { FormSubmitParser } from '../../services/form-submit-parser'
+import { FormApi } from '../../services/form-api'
+import { registerCustomComponents } from '../custom/custom-formio-registry.js'
+
+export default {
+  name: 'FormHandler',
+  components: {
+    FormRenderer,
+    FormAlert,
+  },
+  props: {
+    formid: {
+      type: String,
+      required: true,
+    },
+    contentApiUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    webFormJson: {
+      type: Object,
+      required: false,
+      default: () => null,
+    },
+    preview: {
+      type: Boolean,
+      required: false,
+    },
+    processID: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      loading: true,
+      form: undefined,
+      alert: null,
+      formApi: new FormApi(),
+      formRenderParser: new FormRenderParser(),
+      formSubmitParser: new FormSubmitParser(),
+      submitSuccess: false,
+      sid: '',
+      successMessage: `<h1>Your submission has been successful.</h1><p>A confirmation email will be sent to the email account provided.</p><p><a class="cta-button" href="/">Back to Homepage</a></p>`,
+      submitErrorMessage: `<h1>Unable to submit</h1><p>Unfortunately something has gone wrong when processing your submission. Please try again.</p><p><a class="cta-button" href="/">Back to Homepage</a></p>`,
+      notFoundMessage: `<h1>Unable to find form</h1><p>Unfortunately the form you are looking for cannot be found. Please try again or return to the our home page.</p><p><a class="cta-button" href="/">Back to Homepage</a></p>`,
+    }
+  },
+  async mounted() {
+    registerCustomComponents()
+    this.initialiseHelpers()
+    const webFormJson =
+      this.webFormJson || (await this.formApi.fetchFormSchema())
+    this.form = this.formRenderParser.parse(webFormJson, this.getFormOptions())
+    if (!webFormJson || !this.form) {
+      this.setAlert(!webFormJson ? this.notFoundMessage : this.notFoundMessage)
+    }
+    // this.scrollToTopOfForm()
+    this.loading = false
+  },
+  methods: {
+    setAlert(message, fields, isError, sid) {
+      this.alert = message
+        ? {
+            message,
+            isError: isError ?? true,
+            fields: fields ?? [],
+          }
+        : null
+      if (sid) {
+        this.sid = sid
+      }
+    },
+    initialiseHelpers() {
+      this.formApi.initialise(
+        this.contentApiUrl,
+        this.formid,
+        this.$axios || axios,
+      )
+      this.formSubmitParser.initialise(this.formid, this.$axios || axios)
+      this.formRenderParser.initialise(this.contentApiUrl, this.preview)
+    },
+    async submitForm(submission, formioinstance) {
+      this.setAlert(null)
+      this.loading = true
+      const submitPayload = this.formSubmitParser.parse(
+        submission,
+        this.form,
+        formioinstance,
+      )
+      const isFormStandAlone = submitPayload && !submitPayload.webform_id
+      if (!isFormStandAlone) {
+        const { submitted, message, fields, sid } =
+          await this.formApi.submitForm(
+            submitPayload,
+            this.preview,
+            this.form.tree,
+          )
+        if (!submitPayload) {
+          this.setAlert(this.submitErrorMessage)
+        } else if (!submitted) {
+          this.setAlert(`<h1>Error</h1><p>${message}</p>`, [])
+        } else if (!!submitted) {
+          this.submitSuccess = true
+          this.setAlert(this.successMessage, [], false, sid)
+        }
+      }
+
+      this.loading = false
+      this.scrollToTopOfForm()
+    },
+    rendered(eventName) {
+      Object.values(this.form.tree).forEach((element) =>
+        FormCallbackQueue.enqueue(async () => {
+          await element.onRender(this.$refs.formhandler)
+          this.$emit(eventName)
+        }),
+      )
+    },
+    changed(event) {
+      const getSubmitButton = () =>
+        this.$refs.formhandler?.querySelector(
+          "button[type='submit'], .btn-wizard-nav-submit",
+        )
+
+      let isSubmitDisabledWhileUpdating
+      let submitButton = getSubmitButton()
+      if (submitButton && !submitButton.disabled) {
+        submitButton.disabled = true
+        isSubmitDisabledWhileUpdating = true
+      }
+
+      FormCallbackQueue.enqueue(async () => {
+        const elementModel = this.form.tree[event.key]
+        if (elementModel) {
+          await elementModel.onchange(
+            event.component,
+            event.instance,
+            this.$axios || axios,
+          )
+        }
+        submitButton = getSubmitButton()
+        if (isSubmitDisabledWhileUpdating && submitButton.disabled) {
+          submitButton.disabled = false
+          isSubmitDisabledWhileUpdating = false
+        }
+
+        this.$emit('changed', elementModel, event.instance)
+      })
+    },
+    scrollToTopOfForm() {
+      const el = this.$refs.formhandler
+      if (el && el.scrollIntoView) {
+        el.scrollIntoView({ behavior: 'smooth' })
+      }
+    },
+    beforeSubmit({ submission, formioinstance }) {
+      FormCallbackQueue.enqueue(async () => {
+        await this.submitForm(submission, formioinstance)
+        this.$emit('submitted', submission, formioinstance)
+      })
+    },
+    getFormOptions() {
+      return {
+        noAlerts: true,
+      }
+    },
+  },
+}
+</script>

package/src/components/SubComponents/FormInstance/components/renderer/index.vue

@@ -0,0 +1,282 @@
+<template>
+  <div :id="formiodefinition.id" class="formrenderer">
+    <formio
+      v-if="!!debouncedChanges"
+      ref="formio"
+      :form="formiodefinition"
+      :options="options"
+      @blur="handleBlur"
+      @change="debouncedChanges"
+      @submit="debouncedSubmission"
+      @initialized="() => $emit('rendered')"
+      @nextPage="next($event)"
+      @prevPage="prev($event)"
+    ></formio>
+  </div>
+</template>
+
+<script>
+// import { Form, Formio } from 'vue-formio'
+import { Form, Formio } from '@formio/vue'
+import '@fortawesome/fontawesome-free/css/all.min.css'
+import '@fortawesome/fontawesome-free/css/v4-shims.min.css'
+import 'formiojs/dist/formio.builder.min.css'
+
+export default {
+  name: 'FormRenderer',
+  components: { formio: Form },
+  props: {
+    formiodefinition: {
+      type: Object,
+      required: true
+    },
+    options: {
+      type: Object,
+      required: true
+    },
+    overrideCSS: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    processID: { type: String, required: true }
+  },
+  data() {
+    return {
+      debouncedChanges: this.debounce(this.changed, 250),
+      debouncedSubmission: this.debounce(this.submit, 250),
+      firstEl: null,
+      started: false
+    }
+  },
+  mounted() {
+    const styleTag = document.createElement('style')
+    styleTag.appendChild(document.createTextNode(this.overrideCSS))
+    this.$el.appendChild(styleTag)
+
+    const tooltips = document.getElementsByClassName(
+      'fa fa-question-circle text-muted'
+    )
+    if (tooltips.length) {
+      ;[...tooltips].forEach((tt) => {
+        tt.addEventListener('mouseover', (e) => {
+          if (this.$gtm) {
+            let attrs = {
+              group: document.title,
+              category: 'form help',
+              data: e.target.parentElement.innerText,
+              label: 'tooltip',
+              processId: this.processID
+            }
+            this.$gtm.push({
+              event: 'custom.form.interaction.tooltip.show',
+              ...attrs
+            })
+          }
+        })
+      })
+    }
+    this.findFirstEl()
+  },
+  methods: {
+    findFirstEl() {
+      const firstEl = this.$el.querySelector('input, select, textarea')
+      if (firstEl) {
+        this.firstEl = firstEl.id
+      }
+    },
+    handleBlur(ev) {
+      // this does not work on checkbox, select and radio buttons
+      if (!ev.error && ev._data[ev.component.key]) {
+        let attrs = {
+          group: document.title,
+          label: ev.component.key,
+          data: ev._data[ev.component.key]
+        }
+        if (this.$gtm) {
+          this.$gtm.push({
+            event: 'custom.form.progress.field.complete',
+            ...attrs
+          })
+        }
+      }
+    },
+    changed(_e, event) {
+      if (
+        this.$gtm &&
+        !this.started &&
+        event?.changed?.component.id + '-' + event?.changed?.component.key ===
+          this.firstEl
+      ) {
+        this.started = true
+        const attrs = {
+          group: document.title,
+          data: undefined,
+          category: '',
+          label: 'Start',
+          targetElement: this.firstEl,
+          processId: this.processID
+        }
+        this.$gtm.push({ event: 'custom.form.progress.start', ...attrs })
+      }
+
+      if (this.$gtm) {
+        // if there are validation errors onChange
+        if (
+          event?.changed?.instance?.error &&
+          event?.changed?.instance?.error?.messages
+        ) {
+          this.handleValidationGTM(event.changed.instance.error)
+        }
+        //todo : radio and select
+        if (event?.changed?.component?.type === 'checkbox') {
+          let attrs = {
+            group: document.title,
+            label: event.changed.component.key,
+            data: event.changed.value
+          }
+          this.$gtm.push({
+            event: 'custom.form.progress.field.complete',
+            ...attrs
+          })
+        }
+      }
+      // emit values
+      if (event?.changed?.component) {
+        this.$emit('changed', {
+          ...event.changed,
+          key: event.changed.component.key
+        })
+      }
+    },
+    submit(submission) {
+      this.$emit('submitted', {
+        submission,
+        formioinstance: Object.values(Formio.forms)[0]
+      })
+    },
+    debounce(func, wait, immediate) {
+      let timeout
+      return function() {
+        const context = this,
+          args = arguments
+        const later = function() {
+          timeout = null
+          if (!immediate) func.apply(context, args)
+        }
+        const callNow = immediate && !timeout
+        clearTimeout(timeout)
+        timeout = setTimeout(later, wait)
+        if (callNow) {
+          func.apply(context, args)
+        }
+      }
+    },
+    next(ev) {
+      this.$emit('nextPage')
+      if (this.$gtm) {
+        let attrs = {
+          group: document.title,
+          step: {
+            label: this.formiodefinition.components[ev.page - 1].title,
+            stepNumber: ev.page + 1,
+            subStepNumber: undefined
+          },
+          processId: this.processID
+        }
+        this.$gtm.push({ event: 'custom.form.progress.step', ...attrs })
+      }
+    },
+    prev(ev) {
+      this.$emit('prevPage')
+      if (this.$gtm) {
+        let attrs = {
+          group: document.title,
+          step: {
+            label: this.formiodefinition.components[ev.page + 1].title,
+            stepNumber: ev.page + 1,
+            subStepNumber: undefined
+          },
+          processId: this.processID
+        }
+        this.$gtm.push({ event: 'custom.form.progress.step', ...attrs })
+      }
+    },
+    handleValidationGTM(ev) {
+      let attrs = {
+        event: '',
+        data: {
+          group: document.title,
+          errors: [
+            {
+              errorId: '',
+              errorDetail: ev.messages[0].key,
+              errorMessage: ev.messages[0].message
+            }
+          ]
+        }
+      }
+      if (ev.messages[0].context?.validator === 'required') {
+        attrs.event = 'custom.form.error.required'
+        attrs.data.errors[0].errorId = 'ER8000'
+        attrs.data.errors[0].errorDetail =
+          'Required Field - ' + attrs.data.errors[0].errorDetail
+      } else {
+        attrs.event = 'custom.form.error.validation'
+        attrs.data.errors[0].errorId = 'ER8001'
+        attrs.data.errors[0].errorDetail =
+          'Validation Error - ' + attrs.data.errors[0].errorDetail
+      }
+      if (this.$gtm) {
+        this.$gtm.push({ event: attrs.event, ...attrs.data })
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+.formrenderer {
+  animation: fadein 1s;
+}
+
+input:not([type='range']),
+.dropdown,
+.button,
+textarea {
+  box-shadow: 0 0 16px 0 rgb(0 0 0 / 10%);
+}
+
+#form--actions,
+.btn-wizard-nav-next,
+.btn-wizard-nav-submit,
+.btn-wizard-nav-previous {
+  margin-top: 10px;
+}
+
+.server-side-error {
+  animation: fadein 1s;
+  border: 2px solid #e60000;
+  padding: 3px;
+}
+
+.disable-caret {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.col-form-label {
+  font-weight: 900;
+  font-size: 125%;
+}
+
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+</style>

package/src/components/SubComponents/FormInstance/index.test.js

@@ -0,0 +1,65 @@
+import { mount } from '@vue/test-utils'
+import FormInstance from './index.vue'
+import {nextTick} from 'vue'
+import * as axios from 'axios'
+import scale from './stories/mocks/scale.json'
+import autocomplete from './stories/mocks/autocomplete.json'
+
+jest.mock('axios')
+describe('Form Instance', () => {
+
+  it('should create a scale form instance component', async () => {
+    axios.get.mockImplementation((path) => {
+      if (String(path).endsWith('/fields')) {
+        return Promise.resolve({ data: scale })
+      }
+      return Promise.reject({})
+    })
+    const wrapper = mount(FormInstance, {
+      propsData: {
+        preview: false,
+        formid: 'test',
+        contentApiUrl: '',
+        processID: 'xx12345xx'
+      }
+    })
+    await new Promise(process.nextTick);
+    expect(wrapper.find(`[ref="webform"]`).exists()).toBe(true)
+    expect(wrapper.find(`[type="submit"]`).exists()).toBe(true)
+    expect(wrapper.find(`.formio-component-scale1`).exists()).toBe(true)
+    expect(wrapper.find(`.col-form-label`).exists()).toBe(true)
+    expect(wrapper.find(`.col-form-label`).text()).toBe('scale1')
+
+    const scaleButton = wrapper.find('[title="4"]')
+    scaleButton.trigger('click')
+    await nextTick()
+    expect(wrapper.find(`.formalert`).exists()).toBe(false)
+  })
+
+  it('should create an autocomplete form instance component', async () => {
+    axios.get.mockImplementation((path) => {
+      if (String(path).endsWith('/fields')) {
+        return Promise.resolve({ data: autocomplete })
+      }
+      return Promise.reject({})
+    })
+    const wrapper = mount(FormInstance, {
+      propsData: {
+        preview: false,
+        formid: 'test',
+        contentApiUrl: '',
+        processID: 'xx12345xx'
+      }
+    })
+    await new Promise(process.nextTick);
+    expect(wrapper.find(`.formio-component-autocomplete1`).exists()).toBe(true)
+
+    const dropdown = wrapper.find('.form-control')
+    dropdown.trigger('click')
+    await nextTick()
+    expect(wrapper.findAll('.choices__item').length).toBe(1)
+    expect(wrapper.find(`.choices__item`).text()).toBe(
+      'No choices to choose from'
+    )
+  })
+})

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

@@ -1,14 +1,63 @@
 <template>
-  <div>
-    <h1>Form Instance</h1>
-  <p>
-    The .vue and .stories.js files for SubComponents/FormInstance (displayed in Storybook under Form) must be copied from current Storybook 6 branch when time to upgrade them.  They are causing errors preventing Storybook from being rendered and therefore tested.
-  </p>
+  <div class="webforms">
+    <form-handler
+      :formid="formid"
+      :web-form-json="webFormJson"
+      :content-api-url="contentApiUrl"
+      :preview="preview"
+      :process-i-d="processID"
+      @changed="(e, i) => $emit('changed', e, i)"
+      @submitted="(e, i) => $emit('submitted', e, i)"
+      @rendered="() => $emit('rendered')"
+      @nextPage="() => $emit('nextPage')"
+      @prevPage="() => $emit('prevPage')"
+    />
+    <i v-if="preview" class="fa fa-info-circle text-muted">
+      <span> preview mode. submission logged to console</span>
+    </i>
   </div>
 </template>
 
 <script>
+import FormHandler from './components/handler/index.vue'
+
 export default {
-    name: 'FormInstance'
+  name: 'FormInstance',
+  components: { FormHandler },
+  props: {
+    formid: {
+      type: String,
+      required: false,
+      default: null
+    },
+    webFormJson: {
+      type: Object,
+      required: false,
+      default: () => null
+    },
+    contentApiUrl: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    preview: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    processID: {
+      type: String,
+      required: true
+    }
+  }
 }
 </script>
+<style scoped lang="scss">
+.webforms {
+  max-width: 800px;
+  margin: 0 auto;
+  :deep() {
+    @import './style.scss';
+  }
+}
+</style>