@worksafevictoria/wcl7.5 1.1.0-beta.4 → 1.1.0-beta.40

package/src/components/SubComponents/FormInstance/models/base-form-element.js

@@ -0,0 +1,338 @@
+import { parseElementStates } from '../services/logic-parser'
+import { generateUniqueId, htmlDecode, isEmpty } from './form-utils'
+
+let counter = 0
+export class BaseFormElement {
+  constructor(webformElement, parent, moreInstance) {
+    counter = counter + 1
+    this.counter = counter
+    this.webformElement = webformElement
+    this.formIOdefinitionForElement = undefined
+    this.baseApiUrl = undefined
+    this.baseUiUrl = undefined
+    this.parent = parent
+    this.children = []
+    this.uniqueId = generateUniqueId()
+    this.moreInstance = moreInstance
+  }
+
+  getParent() {
+    return this.parent
+  }
+
+  isRenderable() {
+    // permissions this.webformElement['#access']
+    return true
+  }
+
+  getLabel() {
+    return this.webformElement['#title']
+  }
+
+  getCasing() {
+    const casing = this.webformElement['#input_mask']
+    if (casing === "'casing': 'upper'") {
+      return 'uppercase'
+    } else if (casing === "'casing': 'lower'") {
+      return 'lowercase'
+    }
+    return undefined
+  }
+
+  getAutoComplete() {
+    const autocomplete = this.webformElement['#autocomplete']
+    return autocomplete === '' ? 'off' : autocomplete
+  }
+
+  shouldHideLabel() {
+    return (
+      ['none', 'invisible'].includes(this.webformElement['#title_display']) ||
+      this.isEmpty(this.getLabel())
+    )
+  }
+
+  getLabelPosition() {
+    return this.getPosition(
+      this.webformElement['#_title_display'] ??
+        this.webformElement['#title_display']
+    )
+  }
+
+  getDescriptionPosition() {
+    return this.getPosition(this.webformElement['#description_display'])
+  }
+
+  getInputMask() {
+    const inputMask = this.webformElement['#input_mask']
+    if (!this.isEmpty(inputMask) && !inputMask.includes("': '")) {
+      return inputMask
+    }
+    return undefined
+  }
+
+  shouldHideInputText() {
+    return this.webformElement['#input_hide'] === true
+  }
+
+  getPosition(display) {
+    switch (display) {
+      case 'before':
+        return 'top'
+      case 'after':
+        return 'bottom'
+      case 'inline':
+        return 'left-left'
+      case 'none':
+      case 'invisible':
+        return undefined
+      default:
+        return 'top'
+    }
+  }
+
+  getId() {
+    return this.webformElement['#webform_id'] || this.uniqueId
+  }
+
+  getKey() {
+    return this.webformElement['#webform_key'] || this.uniqueId
+  }
+
+  getName() {
+    return this.webformElement['#name']
+  }
+
+  getType() {
+    return this.webformElement['#type']
+  }
+
+  isInput() {
+    return true
+  }
+
+  getHtmlText(markupElement) {
+    return this.webformElement[markupElement]?.['#markup']
+  }
+
+  getDescription() {
+    return this.webformElement['#description']
+  }
+
+  shouldClearValuesWhenHidden() {
+    if (!this.isEmpty(this.webformElement['#states_clear'])) {
+      return this.webformElement['#states_clear']
+    }
+    return true
+  }
+
+  isCustomPropertiesAnArray() {
+    return false
+  }
+
+  getCustomProperties() {
+    return {}
+  }
+
+  isLayoutComponent() {
+    return false
+  }
+
+  isPageComponent() {
+    return false
+  }
+
+  getCustomCSS() {
+    const getStyle = (obj) => {
+      return Object.keys(obj || {}).reduce((css, key) => {
+        if (key === 'style') {
+          css += `${obj[key]};`
+        } else {
+          const validCSS = !window.CSS || window.CSS.supports(key, obj[key])
+          if (validCSS) {
+            css += `${key}: ${obj[key]};`
+          }
+        }
+        return css
+      }, '')
+    }
+
+    const style = {
+      label: getStyle(this.webformElement['#label_attributes']),
+      wrapper: getStyle(this.webformElement['#wrapper_attributes']),
+      element: getStyle(this.webformElement['#attributes']),
+      additional: this.getAdditionalStyles(this.getCustomClass())
+    }
+    const hasOverride = Object.values(style).some((attr) => !this.isEmpty(attr))
+    return hasOverride ? style : undefined
+  }
+
+  getAdditionalStyles(_customCssClass) {
+    return ''
+  }
+
+  getTooltip() {
+    const stripHtml = (html) => {
+      const tmp = document.createElement('DIV')
+      tmp.innerHTML = html
+      return tmp.textContent || tmp.textContent || ''
+    }
+    const title = this.webformElement['#help_title']
+    const descriptionRaw = this.webformElement['#help']
+    const description = !this.isEmpty(descriptionRaw)
+      ? stripHtml(descriptionRaw)
+      : undefined
+
+    if (!this.isEmpty(title) && !this.isEmpty(description)) {
+      return `<strong>${title}</strong>\n${description}`
+    } else if (!this.isEmpty(title)) {
+      return `${title}`
+    } else if (!this.isEmpty(description)) {
+      return `${description}`
+    } else {
+      return undefined
+    }
+  }
+
+  getPlaceholder() {
+    return this.webformElement['#placeholder']
+  }
+
+  isEmpty(str) {
+    return isEmpty(str)
+  }
+
+  getPrefix() {
+    return this.webformElement['#field_prefix']
+  }
+
+  getSuffix() {
+    return this.webformElement['#field_suffix']
+  }
+
+  getValidation() {
+    if (this.isLayoutComponent()) {
+      return {}
+    }
+    const validation = {}
+
+    const addValidation = (webformProp, formIoProp) => {
+      if (!this.isEmpty(this.webformElement[webformProp])) {
+        validation[formIoProp] = this.webformElement[webformProp]
+      }
+    }
+    addValidation('#minlength', 'minLength')
+    addValidation('#maxlength', 'maxLength')
+
+    addValidation('#min', 'min')
+    addValidation('#max', 'max')
+
+    addValidation('#pattern', 'pattern')
+
+    addValidation('#required', 'required')
+    addValidation('#unique', 'unique')
+
+    if (this.webformElement['#counter_type'] === 'word') {
+      addValidation('#counter_minimum', 'minWords')
+      addValidation('#counter_maximum', 'maxWords')
+    }
+
+    addValidation('#required_error', 'customMessage')
+    addValidation('#pattern_error', 'customMessage')
+
+    const customValidation = this.webformElement['#validation']
+    if (!this.isEmpty(customValidation)) {
+      validation['custom'] = `valid = ${htmlDecode(customValidation)}`
+    }
+
+    return validation
+  }
+
+  getLogic() {
+    if (this.isEmpty(this.webformElement['#states'])) {
+      return undefined
+    } else {
+      return parseElementStates(this.webformElement)
+    }
+  }
+
+  isDisabled() {
+    return !!this.webformElement['#disabled'] || !!this.isReadOnly()
+  }
+
+  isReadOnly() {
+    return !!this.webformElement['#readonly']
+  }
+
+  shouldIgnoreSubmissionValue() {
+    return false
+  }
+
+  transformSubmissionValue(value) {
+    return value
+  }
+
+  setFormIOdefinitionForElement(def) {
+    this.formIOdefinitionForElement = def
+  }
+
+  setFormSettingsMeta(formSettingsMeta) {
+    this.formSettingsMeta = formSettingsMeta
+  }
+
+  getFormSettingsMeta() {
+    return this.formSettingsMeta
+  }
+
+  getDefaultValue() {
+    let defaultValue = !this.isEmpty(this.webformElement['#value'])
+      ? this.webformElement['#value']
+      : this.webformElement['#default_value']
+
+    if (defaultValue && typeof defaultValue === 'string') {
+      // the form loads with api worksafe user data loaded in the defaults
+      if (
+        defaultValue.startsWith('api_worksafe') ||
+        defaultValue.startsWith('api-worksafe')
+      ) {
+        defaultValue = undefined
+      }
+    } else if (defaultValue && typeof defaultValue === 'object') {
+      delete defaultValue.content
+      delete defaultValue.headers
+    }
+    return this.getPrepopulatedValue(defaultValue)
+  }
+
+  getPrepopulatedValue(defaultValue) {
+    if (this.webformElement['#prepopulate']) {
+      const urlParams = new URLSearchParams(window.location.search)
+      if (urlParams.has(this.getName())) {
+        return urlParams.get(this.getName()) ?? defaultValue
+      }
+    }
+    return defaultValue
+  }
+  onchange(_component, _instance, _axios) {
+    return Promise.resolve()
+  }
+
+  getCustomClass() {
+    return 'custom-formio-' + this.counter
+  }
+
+  onRender(formElement) {
+    if (this.moreInstance) {
+      const element = formElement.querySelector('#' + this.getId())
+      if (element) {
+        this.moreInstance.counter = this.counter + 1000
+        const text = this.moreInstance.getContent()
+
+        const div = document.createElement('div')
+        div.innerHTML = text
+        element.appendChild(div)
+        this.moreInstance.onRender(formElement)
+      }
+    }
+    return Promise.resolve()
+  }
+}

package/src/components/SubComponents/FormInstance/models/form-callback-queue.js

@@ -0,0 +1,45 @@
+export class FormCallbackQueue {
+  static queue = []
+  static pendingPromise = false
+
+  static enqueue(promise) {
+    return new Promise((resolve, reject) => {
+      this.queue.push({
+        promise,
+        resolve,
+        reject
+      })
+      this.dequeue()
+    })
+  }
+
+  static dequeue() {
+    if (this.workingOnPromise) {
+      return false
+    }
+    const item = this.queue.shift()
+    if (!item) {
+      return false
+    }
+    try {
+      this.workingOnPromise = true
+      item
+        .promise()
+        .then((value) => {
+          this.workingOnPromise = false
+          item.resolve(value)
+          this.dequeue()
+        })
+        .catch((err) => {
+          this.workingOnPromise = false
+          item.reject(err)
+          this.dequeue()
+        })
+    } catch (err) {
+      this.workingOnPromise = false
+      item.reject(err)
+      this.dequeue()
+    }
+    return true
+  }
+}

package/src/components/SubComponents/FormInstance/models/form-utils.js

@@ -0,0 +1,50 @@
+export function generateUniqueId() {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+    const r = (Math.random() * 16) | 0,
+      v = c == 'x' ? r : (r & 0x3) | 0x8
+    return v.toString(16)
+  })
+}
+
+export function htmlDecode(input) {
+  const e = document.createElement('textarea')
+  e.innerHTML = input ?? ''
+  // handle case of empty input
+  return e.childNodes.length === 0 ? '' : e.childNodes[0].nodeValue
+}
+
+export function isEmpty(str) {
+  if (str === null || str === undefined) {
+    return true
+  }
+  if (typeof str === 'string') {
+    return /^\s*$/.test(str)
+  }
+  return false
+}
+
+export function convertStringWithDotNotationToObject(obj, str, val) {
+  let keys, key
+  if (
+    !str ||
+    !str.length ||
+    Object.prototype.toString.call(str) !== '[object String]'
+  ) {
+    return false
+  }
+  if (obj !== Object(obj)) {
+    obj = {}
+  }
+  keys = str.split('.')
+  while (keys.length > 1) {
+    key = keys.shift()
+    if (obj !== Object(obj)) {
+      obj = {}
+    }
+    if (!(key in obj)) {
+      obj[key] = {}
+    }
+    obj = obj[key]
+  }
+  return (obj[keys[0]] = val)
+}

package/src/components/SubComponents/FormInstance/models/overrides/address.js

@@ -0,0 +1,132 @@
+import { BaseFormElement } from '../base-form-element'
+
+export class AddresseFormElement extends BaseFormElement {
+  getType() {
+    return 'address'
+  }
+
+  isFullAddressSearch() {
+    const composite = this.getCompositeFields()
+    return composite['address'] && composite['address']['#access'] !== false
+  }
+
+  getCompositeFields() {
+    return this.webformElement['#webform_composite_elements'] || {}
+  }
+
+  getManualField(key, composite) {
+    if (composite[key] && composite[key]['#access'] !== false) {
+      return {
+        label: (composite[key]['#title'] || '')
+          .replace('ZIP/', '')
+          .replace('/Province', '')
+          .replace('City/Town', 'Suburb')
+          .replace('Postal Code', 'Postcode'),
+        tableView: false,
+        key,
+        type: 'textfield',
+        input: true,
+        customConditional: "show = _.get(instance, 'parent.manualMode', false);"
+      }
+    }
+  }
+
+  getManualFields() {
+    const composite = this.getCompositeFields()
+    return Object.keys(composite)
+      .map((field) => this.getManualField(field, composite))
+      .filter((field) => !!field)
+  }
+
+  getCustomProperties() {
+    const autoCompletePath = '/places/api/v1/place/autocomplete/json'
+    const baseUrl = window.origin
+    return {
+      provider: 'custom',
+      enableManualMode: this.webformElement['#flexbox'] !== '0',
+      providerOptions: {
+        params: {
+          types: this.isFullAddressSearch() ? 'address' : '(regions)',
+          components: 'country:au'
+        },
+        url: `${baseUrl}${autoCompletePath}`,
+        queryProperty: 'input',
+        displayValueProperty: 'description',
+        responseProperty: 'predictions'
+      },
+      switchToManualModeLabel: "Can't find address? Switch to manual mode.",
+      input: true,
+      components: this.getManualFields()
+    }
+  }
+
+  transformSubmissionValue(value) {
+    const getComponents = (key) =>
+      this.getManualFields().find((field) => key === field.key)
+    if (value) {
+      const isAutoComplete =
+        value.mode === 'autocomplete' &&
+        Array.isArray(value?.geocode?.address_components)
+      if (isAutoComplete) {
+        const getVal = (key) =>
+          value?.geocode?.address_components.find(
+            (item) => item?.types?.[0] === key
+          )?.long_name
+        const address1 = getComponents('address')
+        const city = getComponents('city')
+        const state = getComponents('state_province')
+        const postcode = getComponents('postal_code')
+        const country = getComponents('country')
+
+        return {
+          [this.getKey()]: {
+            [address1?.key]: value.address?.structured_formatting?.main_text,
+            [city?.key]: getVal('locality'),
+            [state?.key]: getVal('administrative_area_level_1'),
+            [postcode?.key]: getVal('postal_code'),
+            [country?.key]: getVal('country')
+          }
+        }
+      } else if (value.mode === 'manual') {
+        return {
+          [this.getKey()]: value.address
+        }
+      }
+    }
+    return value
+  }
+
+  onchange(_element, formioInstance, axios) {
+    const value = formioInstance.getValue()
+    if (
+      value?.mode !== 'manual' &&
+      value?.address?.place_id &&
+      value.address.description &&
+      (!value.geocode ||
+        value.geocode.formatted_address !== value.address.description)
+    ) {
+      const geocodePath = '/places/api/v1/geocode/json'
+      const baseUrl = window.origin
+      const qs = `?place_id=${value.address.place_id}`
+      const url = `${baseUrl}${geocodePath}${qs}`
+
+      return axios.get(url).then((response) => {
+        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')
+          )?.short_name
+          const fullAddress = value.address.description.replace(
+            /,(?=[^,]*$)/,
+            `, ${postcode}`
+          )
+          value.address.description = fullAddress
+          value.geocode = results[0]
+          value.mode = 'autocomplete'
+          return Promise.resolve(value)
+        }
+      })
+    }
+    return Promise.resolve()
+  }
+}

package/src/components/SubComponents/FormInstance/models/overrides/autocomplete.js

@@ -0,0 +1,41 @@
+import { BaseFormElement } from '../base-form-element'
+import { htmlDecode } from '../form-utils'
+
+export class AutoCompleteFormElement extends BaseFormElement {
+  getType() {
+    return 'select'
+  }
+
+  getCustomProperties() {
+    const autoCompletePath = this.webformElement['#attributes']
+      ? htmlDecode(this.webformElement['#attributes']['data-autocomplete-path'])
+      : ''
+    let searchField = 'q'
+    let selectValues
+    let valueProperty = 'value'
+    let labelProp = 'label'
+    if (!this.isEmpty(this.webformElement['#storybook'])) {
+      searchField = this.webformElement['#storybook'][
+        '#data-autocomplete-query'
+      ]
+      selectValues = this.webformElement['#storybook'][
+        '#data-autocomplete-select'
+      ]
+      valueProperty = this.webformElement['#storybook'][
+        '#data-autocomplete-value'
+      ]
+      labelProp = this.webformElement['#storybook']['#data-autocomplete-label']
+    }
+    return {
+      dataSrc: 'url',
+      lazyLoad: true,
+      data: {
+        url: `${this.getFormSettingsMeta().contentApiUrl}${autoCompletePath}`
+      },
+      template: `<span>{{ item.${labelProp}}}</span>`,
+      searchField,
+      selectValues,
+      valueProperty
+    }
+  }
+}

package/src/components/SubComponents/FormInstance/models/overrides/checkbox.js

@@ -0,0 +1,14 @@
+import { BaseFormElement } from '../base-form-element'
+
+export class CheckboxFormElement extends BaseFormElement {
+  getType() {
+    return 'checkbox'
+  }
+
+  transformSubmissionValue(value) {
+    if (value && this.webformElement['#return_value'] !== undefined) {
+      return this.webformElement['#return_value']
+    }
+    return value
+  }
+}

package/src/components/SubComponents/FormInstance/models/overrides/checkboxes.js

@@ -0,0 +1,49 @@
+import { htmlDecode } from '../form-utils'
+import { SelectFormElement } from './select'
+
+export class CheckboxesFormElement extends SelectFormElement {
+  getType() {
+    return 'selectboxes'
+  }
+
+  getOptions() {
+    const options = this.webformElement['#options'] || []
+
+    const optKeys = Object.keys(options)
+    const optVals = Object.values(options)
+
+    return {
+      values: optKeys.map((key, index) => {
+        const option = options[key]
+        if (!option) {
+          return {
+            label: '',
+            value: ''
+          }
+        }
+        return {
+          label: optVals[index],
+          value: optKeys[index]
+        }
+      })
+    }
+  }
+
+  transformSubmissionValue(value) {
+    return Object.keys(value).reduce((prev, checkboxValue) => {
+      if (value[checkboxValue] === true) {
+        prev.push(checkboxValue)
+      }
+      return prev
+    }, [])
+  }
+
+  getCustomProperties() {
+    return {
+      ...this.getOptions(),
+      optionsLabelPosition: 'right',
+      inline: this.webformElement['#options_display'] === 'side_by_side',
+      inputType: 'checkbox'
+    }
+  }
+}

package/src/components/SubComponents/FormInstance/models/overrides/code.js

@@ -0,0 +1,27 @@
+import { BaseFormElement } from '../base-form-element'
+import { htmlDecode } from '../form-utils'
+
+export class CodeFormElement extends BaseFormElement {
+  getType() {
+    return 'code'
+  }
+
+  shouldHideLabel() {
+    return true
+  }
+
+  getDescription() {
+    return undefined
+  }
+
+  getCustomProperties() {
+    const description = this.webformElement['#description']
+    const html = description ? htmlDecode(description['#markup']) : undefined
+    return {
+      html,
+      refreshOnChange: false,
+      input: false,
+      tableView: false
+    }
+  }
+}