minsky-webform-formkit 1.0.0

package/src/components/MinksyWebformFormKit/_MinskyWebformFormKit.js

@@ -0,0 +1,282 @@
+import _keys from 'lodash/keys';
+import _values from 'lodash/values';
+import gsap from 'gsap';
+import ScrollToPlugin from 'gsap/ScrollToPlugin';
+import defaultMessages from '../../utils/messages';
+
+gsap.registerPlugin(ScrollToPlugin);
+
+
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    api: {
+      type: String,
+      default: window.location.origin,
+    },
+    defaults: {
+      type: Object,
+    },
+    schemeProcessor: {
+      type: Function,
+    },
+    formDataAddons: {
+      type: Object,
+    },
+    cmpLibrary: {
+      type: Object,
+      default: () => { },
+    },
+    forceRedirect: {
+      type: Object,
+      default: {
+        bool: false,
+      },
+    },
+    messages: {
+      type: Object,
+      default: () => { }
+    }
+  },
+
+  components: {
+
+  },
+
+  mounted() {
+    //we merge messages provided by the user with default messages so there will alway be feedback when the form is submitted or missing
+    this.msgs = Object.assign(defaultMessages, this.messages);
+    console.log('BOEM');
+
+    this.formData.submit = async (data) => {
+      //we remove vue values so they don't f*ck up the submit in drupal
+      delete data.form_id;
+      delete data.vApp;
+      delete data.webformId;
+      //we flatten all the data to a one level object so drupal can handle the data
+      data = flattenObject(data);
+
+      this.submitForm(data);
+    };
+
+    // fetch the form
+    this.fetchForm();
+
+    if (this.formDataAddons) {
+      this.formData = Object.assign(this.formData, this.formDataAddons);
+    }
+  },
+
+  data() {
+    return {
+      otherSchema: [],
+      schema: null,
+      schemaDefaults: {},
+      settings: null,
+      loading: true,
+      success: false,
+      submissionLoading: false,
+      loadingMessage: null,
+      successMessage: null,
+      successTitle: null,
+      errorMessages: null,
+      showErrorMessage: false,
+      multiStep: null,
+      msgs: {},
+      formData: {
+        values: {},
+      },
+    };
+  },
+
+  computed: {
+    formKeys: {
+      get() {
+        return _keys(this.formData.values);
+      },
+    },
+  },
+
+  methods: {
+    async fetchForm() {
+      // add page params
+      const params = new URLSearchParams(window.location.search);
+      params.append('schema', 'form_kit');
+
+      fetch(`${this.api}/webform/${this.id}/json/schema?${params.toString()}`)
+        .then((r) => r.json())
+        .then((result) => {
+          if (result.schema) {
+            this.schema = this.schemeProcessor ? this.schemeProcessor(result.schema) : result.schema;
+            this.schemaDefaults = result.values;
+          } else {
+            this.errorMessage = this.msgs.missing;
+            this.showErrorMessage = true;
+          }
+
+          this.loading = false;
+        });
+    },
+
+    setDefaults() {
+      _keys(this.defaults).forEach((key) => {
+        if (this.$formkit.get(`${this.id}--${key}`)) {
+          this.$formkit.get(`${this.id}--${key}`).context.node.input(this.defaults[key]);
+        }
+      });
+
+      _keys(this.schemaDefaults).forEach((key) => {
+        if (this.$formkit.get(`${this.id}--${key}`)) {
+          if (this.schemaDefaults[key].fids) return;
+          this.$formkit.get(`${this.id}--${key}`).context.node.input(this.schemaDefaults[key]);
+        }
+      });
+    },
+
+    async submitForm(data) {
+      /* eslint-disable */
+      this.submissionLoading = true;
+
+      // disable submit button
+      const submitButton = document.querySelector('.formkit-input[type=submit]');
+      if (submitButton) {
+        submitButton.disabled = true;
+      }
+
+      // add page params
+      const params = new URLSearchParams(window.location.search);
+      params.append('schema', 'form_kit');
+
+      // convert data to formdata
+      const formData = new FormData();
+      for (const key in data) {
+        // only add to formdata if has value
+        if (hasValue(data[key])) {
+          if (Array.isArray(data[key])) {
+            data[key].forEach((val) => {
+              if (this.$formkit.get(`${this.id}--${key}`).context.type === 'imageUpload') {
+                if (typeof val === 'object') {
+                  formData.append(`${key}[]`, _values(val)[0]);
+                } else {
+                  formData.append(`${key}[]`, val);
+                }
+              }
+            });
+          } else if (typeof data[key] === 'string') {
+            if (data[key].indexOf('json_value') === 2) {
+              const values = JSON.parse(data[key]).json_value;
+              _keys(values).forEach(subkey => {
+                formData.append(`${key}[${subkey}]`, values[subkey]);
+              })
+            } else {
+              formData.append(key, data[key]);
+            }
+          }
+          else {
+            formData.append(key, data[key]);
+          }
+        }
+      }
+      /* eslint-enable */
+      fetch(`${this.api}/webform/${this.id}/json/submission?${params.toString()}`, {
+        method: 'POST',
+        body: formData,
+        query: window.location.search,
+      })
+        .then((r) => {
+          if (r.status === 200) {
+            r.json().then((response) => {
+              this.handleSuccess(response);
+            });
+          } else {
+            r.json().then((response) => {
+              this.showErrorMessage = true;
+              this.submissionLoading = false;
+              this.errorMessages = response.errors;
+            });
+          }
+        })
+        .catch(() => {
+          this.showErrorMessage = true;
+          this.submissionLoading = false;
+        });
+    },
+
+    handleSuccess(response) {
+      if (!this.forceRedirect.bool) {
+        switch (response.confirmation.type) {
+          case 'inline':
+            this.successTitle = response.confirmation.title;
+            this.successMessage = response.confirmation.message;
+            this.success = true;
+            // scroll to success
+            gsap.to(window, {
+              duration: 0.5,
+              scrollTo: { y: this.$refs.form, offsetY: 200 },
+              ease: 'power2',
+            });
+            // remove toggle
+            this.submissionLoading = false;
+            break;
+          case 'url':
+            window.location = response.confirmation.url;
+            break;
+          default:
+            this.successTitle = this.msgs.success.title;
+            this.successMessage = this.msgs.success.description;
+            this.success = true;
+            // remove toggle
+            this.submissionLoading = false;
+            break;
+        }
+      } else {
+        window.location = this.forceRedirect.url;
+      }
+    },
+  },
+
+  watch: {
+    formKeys() {
+      this.setDefaults();
+
+      const $form = this.$refs.form.querySelector('form');
+      if ($form) $form.setAttribute('novalidate', true); // remove native js form validation because of time input error AMNESTY-785
+    },
+  },
+};
+
+function flattenObject(obj) {
+  const flattened = {};
+
+  function flatten(_obj, parentKey = '') {
+    for (const key in _obj) {
+      if (Array.isArray(_obj[key])) {
+        flattened[key] = _obj[key];
+      } else if (typeof _obj[key] === 'object' && _obj[key] !== null) {
+        flatten(_obj[key], `${parentKey + key}.`);
+      } else {
+        flattened[key] = _obj[key];
+      }
+    }
+  }
+
+  flatten(obj);
+
+  return flattened;
+}
+
+function hasValue(val) {
+  let _hasValue = false;
+  if (val || val === 0) {
+    _hasValue = true;
+  }
+
+  if (Array.isArray(val)) {
+    _hasValue = Boolean(val.length);
+  }
+
+  return _hasValue;
+}

package/src/formkit.config.js

@@ -0,0 +1,72 @@
+import { nl, en, fr } from '@formkit/i18n';
+import { createMultiStepPlugin } from '@formkit/addons';
+import { createInput } from '@formkit/vue';
+
+// import plugins
+import customLabelPlugin from './plugins/customLabelPlugin';
+import htmlHelpPlugin from './plugins/htmlHelpPlugin';
+
+// import custom components
+import FormKitPhoneEnhanced from './components/FormKit/FormKitPhoneEnhanced/FormKitPhoneEnhanced.vue';
+import FormKitRecaptcha from './components/FormKit/FormKitRecaptcha/FormKitRecaptcha.vue';
+
+// import rules
+import { internationalPhone, phone } from './rules/phone';
+import iban from './rules/iban';
+import vat from './rules/vat';
+import insz from './rules/insz';
+import { timeRule, timeMessage } from './rules/time';
+
+// config
+const config = {
+  plugins: [
+    customLabelPlugin,
+    htmlHelpPlugin,
+    createMultiStepPlugin({ allowIncomplete: false }),
+  ],
+  rules: {
+    internationalPhone,
+    phone,
+    iban,
+    vat,
+    insz,
+    timeRule,
+  },
+  messages: {
+    nl: {
+      validation: {
+        phone: 'Dit is geen geldig telefoonnummer.',
+        required: 'Dit veld is verplicht.',
+        vat: 'Dit is geen geldig Btw-nummer.',
+        is: 'Dit veld is verplicht.',
+        timeRule({ node }) {
+          return timeMessage(node);
+        },
+      },
+    },
+    en: {
+      validation: {
+        phone: 'This is not a valid phone number.',
+        required: 'This field is required.',
+        is: 'This field is required.',
+        vat: 'This is not a valid VAT number.',
+      },
+    },
+    fr: {
+      validation: {
+        phone: "Ce numéro de téléphone n'est pas valide.",
+        required: 'Ce champ est obligatoire.',
+        is: 'Ce champ est obligatoire.',
+        vat: "Ce numéro de TVA n'est pas valide.",
+      },
+    },
+  },
+  locales: { nl, en, fr },
+  locale: document.documentElement.lang,
+  inputs: {
+    phoneEnhanced: createInput(FormKitPhoneEnhanced),
+    recaptcha: createInput(FormKitRecaptcha),
+  },
+};
+
+export default config;

package/src/index.mjs

@@ -0,0 +1,20 @@
+import MinskyWebformFormKit from './components/MinksyWebformFormKit/MinskyWebformFormKit.vue';
+import { plugin, defaultConfig, FormKitMessages } from '@formkit/vue';
+import Icon from './components/Icon.vue';
+import InfoTooltip from './components/InfoTooltip.vue';
+import formkitConfig from './formkit.config.js';
+import { _merge } from './utils/lodash.js';
+import './styles/main.scss';
+
+export { MinskyWebformFormKit };
+
+export default {
+  install(app, userConfig) {
+    const mergedConfig = _merge({}, formkitConfig, userConfig);
+    app.component('MinskyWebformFormKit', MinskyWebformFormKit);
+    app.use(plugin, defaultConfig(mergedConfig));
+    app.component('Icon', Icon);
+    app.component('InfoTooltip', InfoTooltip);
+    app.component('FormKitMessages', FormKitMessages);
+  },
+};

package/src/plugins/customLabelPlugin.js

@@ -0,0 +1,42 @@
+const legends = ['checkbox_multi', 'radio_multi', 'repeater', 'transferlist'];
+
+function customLabelPlugin(node) {
+  if (['button', 'submit', 'hidden', 'group', 'list', 'meta'].includes(node.props.type)) return;
+
+  node.on('created', () => {
+    const legendOrLabel = legends.includes(`${node.props.type}${node.props.options ? '_multi' : ''}`) ? 'legend' : 'label';
+
+    if (node.props.definition.schemaMemoKey) {
+      node.props.definition.schemaMemoKey += `${node.props.options ? '_multi' : ''}_add_asterisk`;
+    }
+
+    const schemaFn = node.props.definition.schema;
+
+    node.props.definition.schema = (sectionsSchema = {}) => {
+      sectionsSchema[legendOrLabel] = {
+        children: [
+          '$label',
+          {
+            $cmp: 'InfoTooltip',
+            if: '$attrs.tooltip',
+            props: {
+              content: '$attrs.tooltip',
+            },
+          },
+          {
+            $el: 'span',
+            if: '$state.required',
+            attrs: {
+              class: 'formkit-asterisk',
+            },
+            children: ['*'],
+          },
+        ],
+      };
+
+      return schemaFn(sectionsSchema);
+    };
+  });
+}
+
+export default customLabelPlugin;

package/src/plugins/htmlHelpPlugin.js

@@ -0,0 +1,23 @@
+function htmlHelpPlugin(node) {
+  if (['button', 'submit', 'hidden', 'group', 'list', 'meta'].includes(node.props.type)) return;
+
+  node.on('created', () => {
+    const schemaFn = node.props.definition.schema;
+
+    node.props.definition.schema = (sectionsSchema = {}) => {
+      sectionsSchema.help = {
+        children: [
+          {
+            $el: 'div',
+            attrs: {
+              innerHTML: '$help',
+            },
+          },
+        ],
+      };
+
+      return schemaFn(sectionsSchema);
+    };
+  });
+}
+export default htmlHelpPlugin;

package/src/rules/iban.js

@@ -0,0 +1,9 @@
+import { IBAN } from 'ibankit';
+/**
+ * A contrived validation rule that ensures the input’s value is a valid iban number.
+ */
+const iban = function (node) {
+    return IBAN.isValid(node.value);
+};
+
+export default iban;

package/src/rules/insz.js

@@ -0,0 +1,21 @@
+const insz =  function IsRRNoValid(node) {
+  // keep only digits
+  const n = node.value.replace(/[^0-9]/g, '');
+
+  // RR numbers need to be 11 chars long
+  if (n.length != 11) return false;
+
+  const checkDigit = n.substr(n.length - 2, 2);
+  const modFunction = function(nr) { return 97 - (nr % 97); };
+  let nrToCheck = parseInt(n.substr(0, 9));
+  
+  // first check without 2
+  if (modFunction(nrToCheck) == checkDigit) return true;
+
+  // then check with 2 appended for y2k+ births
+  nrToCheck = parseInt('2' + n.substr(0, 9));
+
+  return (modFunction(nrToCheck) == checkDigit);
+}
+
+export default insz;

package/src/rules/phone.js

@@ -0,0 +1,29 @@
+import { parsePhoneNumber } from 'libphonenumber-js';
+/**
+ * A contrived validation rule that ensures the input’s value is a valid phone number.
+ */
+export const internationalPhone = function (node) {
+    if (node.value !== '') {
+        try {
+            return parsePhoneNumber(node.value).isValid();
+        } catch (error) {
+            return false;
+        }
+    } else {
+        return true;
+    }
+};
+
+export const phone = function (node) {
+    if (node.value !== '') {
+        try {
+            return parsePhoneNumber(node.value, 'BE').isValid();
+        } catch (error) {
+            return false;
+        }
+    } else {
+        return true;
+    }
+};
+
+export default { internationalPhone, phone };

package/src/rules/time.js

@@ -0,0 +1,79 @@
+const timeRule = function (node) {
+  const value = node.value;
+  const { step, min, max } = node.props.attrs;
+
+  if (!value) return true;
+
+  const total = parseTimeToSeconds(value)
+  const minSeconds = parseTimeToSeconds(min)
+  const maxSeconds = parseTimeToSeconds(max)
+  const stepSize = Number(step)
+
+  // ⏰ Before min
+  if (total < minSeconds) {
+    return false;
+  }
+
+  // 🕒 After max
+  if (total > maxSeconds) {
+    return false;
+  }
+
+  // 🔢 Between steps
+  const delta = total - minSeconds
+  const remainder = delta % stepSize
+  if (remainder === 0) return true;
+
+  return false;
+}
+
+const timeMessage = function (node) {
+  const value = node.value;
+  const { step, min, max } = node.props.attrs;
+
+  if (!value) return ''
+
+  const total = parseTimeToSeconds(value)
+  const minSeconds = parseTimeToSeconds(min)
+  const maxSeconds = parseTimeToSeconds(max)
+  const stepSize = Number(step)
+
+  // ⏰ Before min
+  if (total < minSeconds) {
+    const minStr = formatSecondsToTime(minSeconds)
+    return `De waarde moet ${minStr} uur of later zijn.`
+  }
+
+  // 🕒 After max
+  if (total > maxSeconds) {
+    const maxStr = formatSecondsToTime(maxSeconds)
+    return `De waarde moet ${maxStr} uur of eerder zijn.`
+  }
+
+  // 🔢 Between steps
+  const delta = total - minSeconds
+  const remainder = delta % stepSize
+  if (remainder === 0) return ''
+
+  const lower = total - remainder
+  const upper = lower + stepSize
+
+  const lowerStr = formatSecondsToTime(Math.max(lower, minSeconds))
+  const upperStr = formatSecondsToTime(Math.min(upper, maxSeconds))
+
+  return `Voer een geldige tijd in. De twee dichtstbijzijnde geldige waarden zijn ${lowerStr} en ${upperStr}.`
+}
+
+function parseTimeToSeconds(timeStr) {
+  if (!timeStr) return 0
+  const [h, m = 0, s = 0] = timeStr.split(':').map(Number)
+  return h * 3600 + m * 60 + s
+}
+
+function formatSecondsToTime(seconds) {
+  const hh = Math.floor(seconds / 3600)
+  const mm = Math.floor((seconds % 3600) / 60)
+  return `${String(hh).padStart(2, '0')}:${String(mm).padStart(2, '0')}`
+}
+
+export { timeRule, timeMessage };

package/src/rules/vat.js

@@ -0,0 +1,42 @@
+import { checkVAT, countries } from '@accountable/jsvat';
+
+const isVatValid = (vat) => {
+  // BE0xxxxxxx → mod 97 on first 8 digits
+  if (vat[0] === '0') {
+    const base = Number(vat.slice(0, 8));
+    const checkDigits = Number(vat.slice(8, 10));
+    return 97 - (base % 97) === checkDigits;
+  }
+
+  // BE1xxxxxxx → check if is 10 digits
+  if (vat[0] === '1') {
+    return vat.length === 10;
+  }
+
+  return false; // other leading digits not allowed
+};
+
+const newBelgium = {
+  name: 'newBelgium',
+  codes: ['BE', 'BEL', '056'],
+  calcWithFormatFn: (vat) => {
+    if (vat.length === 10) {
+      return { vat: `BE${vat}`, isValid: isVatValid(vat) };
+    }
+
+    // Invalid length
+    return { vat: `BE${vat}`, isValid: false };
+  },
+  rules: {
+    multipliers: {},
+    regex: [/^(BE)(\d{10})$/],
+  },
+};
+
+const newCountries = countries.map((obj) => (obj.name === 'Belgium' ? newBelgium : obj));
+
+const vat = function (node) {
+  return checkVAT(node.value, newCountries).isValid;
+};
+
+export default vat;