minsky-webform-formkit 1.0.0

package/src/components/FormKit/FormKitRecaptcha/FormKitRecaptcha.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="formkit-recaptcha">
+    <div class="g-recaptcha" ref="recaptchaRef" data-theme="light" data-type="image"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+/* ------------------------------------------------------------------
+ * Props / Emits
+ * ------------------------------------------------------------------ */
+const props = defineProps({
+  context: Object,
+});
+
+/* ------------------------------------------------------------------
+ * Template refs
+ * ------------------------------------------------------------------ */
+const recaptchaRef = ref(null);
+
+/* =========================================================================  */
+/* Methods */
+/* =========================================================================  */
+function onSubmit(e) {
+  props.context.node.input({
+    captcha_sid: props.context.attrs.sid,
+    captcha_token: props.context.attrs.token,
+    captcha_response: '',
+    'g-recaptcha-response': e,
+    captcha_cacheable: '1',
+  });
+}
+
+/* ------------------------------------------------------------------
+ * Lifecycle
+ * ------------------------------------------------------------------ */
+onMounted(() => {
+  grecaptcha.ready(() => {
+    grecaptcha.render(recaptchaRef.value, {
+      sitekey: props.context.attrs.siteKey,
+      callback: onSubmit,
+    });
+  });
+});
+</script>

package/src/components/Icon.vue

@@ -0,0 +1,38 @@
+<template>
+  <span class="icon" :class="[name !== '' ? 'icon--' + name : '', modifiers.length ? 'icon--' + modifiers.join(' icon--') : '']">
+    <svg v-if="loading" role="img" id="L9" version="1.1" class="icon-svg icon-svg--loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" 1 enable-background="new 0 0 0 0" xml:space="preserve">
+      <title>Loading</title>
+      <path fill="currentColor" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
+        <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite" />
+      </path>
+    </svg>
+
+    <svg v-else role="img" class="icon__svg" :aria-hidden="!ariaTitle">
+      <title v-if="ariaTitle">{{ ariaTitle }}</title>
+      <use v-if="!!name" :xlink:href="'#sprite-' + name" />
+    </svg>
+  </span>
+</template>
+
+<script setup>
+const props = defineProps({
+  name: {
+    type: String,
+    default: '',
+  },
+
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+
+  modifiers: {
+    type: Array,
+    default: () => [],
+  },
+
+  ariaTitle: {
+    type: String,
+  },
+});
+</script>

package/src/components/InfoTooltip.vue

@@ -0,0 +1,16 @@
+<template>
+  <span class="info-tooltip">
+    <Tooltip :triggers="['click', 'hover']">
+      <Icon name="info" />
+      <template #popper>
+        <div v-html="props.content" />
+      </template>
+    </Tooltip>
+  </span>
+</template>
+
+<script setup>
+import { Tooltip } from 'floating-vue';
+
+const props = defineProps(['content']);
+</script>

package/src/components/MinksyWebformFormKit/MinskyWebformFormKit.vue

@@ -0,0 +1,357 @@
+<template>
+  <div ref="formRef" class="webform-formkit" :class="[{ 'webform-formkit--loading': submissionLoading || loading }, `webform-formkit--${props.id}`, props.classModifier ? `webform-formkit--${props.classModifier}` : null]">
+    <div v-if="loading && !success && !showErrorMessage" class="webform-formkit__placeholder">
+      <slot name="placeholder" />
+    </div>
+    <div v-if="!loading && !success && !showErrorMessage">
+      <FormKitSchema :schema="schema" :data="formData" :library="props.cmpLibrary" />
+      <slot name="afterSchema" />
+    </div>
+    <div v-if="loading || submissionLoading" class="webform-formkit__loader">
+      <Icon :loading="true" />
+      <p v-if="loadingMessage" class="webform-formkit__message">
+        {{ loadingMessage }}
+      </p>
+    </div>
+    <div v-if="success" class="webform-formkit__success">
+      <h5 v-if="successTitle" class="webform-formkit__succes-title">
+        {{ successTitle }}
+      </h5>
+      <div v-if="successMessage" class="webform-formkit__message" v-html="successMessage"></div>
+    </div>
+    <ul v-if="showErrorMessage" class="webform-formkit__errors">
+      <li v-for="error in errorMessages" v-html="error.message"></li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, watch, onMounted, nextTick } from 'vue';
+import { _keys, _pick, _merge, _defaultsDeep } from '../../utils/lodash';
+import gsap from 'gsap';
+import ScrollToPlugin from 'gsap/ScrollToPlugin';
+import { flattenObject, hasValue } from '../../utils/functions';
+import defaultMessages from '../../utils/messages';
+
+gsap.registerPlugin(ScrollToPlugin);
+const { lang } = document.documentElement;
+/* ------------------------------------------------------------------
+ * Props / Emits
+ * ------------------------------------------------------------------ */
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  api: {
+    type: String,
+    default: window.location.origin,
+  },
+  classModifier: String,
+  defaults: Object,
+  schemeProcessor: Function,
+  formDataAddons: Object,
+  submitProcessor: Function,
+  forceRedirect: {
+    type: Object,
+    default: () => ({ bool: false }),
+  },
+  cmpLibrary: {
+    type: Object,
+    default: () => ({}),
+  },
+  messages: {
+    type: Object,
+    default: () => {},
+  },
+  setUserData: Function,
+});
+
+const emit = defineEmits(['success']);
+
+/* ------------------------------------------------------------------
+ * Template refs
+ * ------------------------------------------------------------------ */
+const formRef = ref(null);
+
+/* ------------------------------------------------------------------
+ * State
+ * ------------------------------------------------------------------ */
+const schema = ref(null);
+const schemaDefaults = ref({});
+const msgs = ref({});
+const loading = ref(true);
+const success = ref(false);
+const submissionLoading = ref(false);
+const loadingMessage = ref(null);
+const successMessage = ref(null);
+const successTitle = ref(null);
+const errorMessages = ref(null);
+const showErrorMessage = ref(false);
+
+const formData = reactive({
+  values: {},
+  // helpers: window.WebformHeadless.helpers,
+});
+
+/* ------------------------------------------------------------------
+ * Lifecycle
+ * ------------------------------------------------------------------ */
+onMounted(() => {
+  // we merge messages provided by the user with default messages so there will alway be feedback when the form is submitted or missing
+  msgs.value = Object.assign(defaultMessages, props.messages);
+
+  formData.submit = async (data) => {
+    // remove vue values so they don't f*ck up the submit in drupal
+    delete data.form_id;
+    delete data.vApp;
+    delete data.webformId;
+
+    // check if data has multi step values + extract them
+    _keys(data).forEach((key) => {
+      if (key.includes('captcha')) {
+        Object.assign(data, data[key]);
+        delete data[key];
+      }
+    });
+
+    // we flatten all the data to a one level object so drupal can handle the data
+    data = flattenObject(data);
+    submitForm(data);
+  };
+
+  formData.submitInvalid = () => {
+    gsap.to(window, {
+      duration: 0.5,
+      scrollTo: { y: formRef.value, offsetY: 300 },
+      ease: 'power2',
+    });
+  };
+
+  fetchForm();
+
+  if (props.formDataAddons) {
+    Object.assign(formData, props.formDataAddons);
+  }
+});
+
+/* ------------------------------------------------------------------
+ * Computed
+ * ------------------------------------------------------------------ */
+const formKeys = computed(() => _keys(formData.values));
+
+/* ------------------------------------------------------------------
+ * Methods
+ * ------------------------------------------------------------------ */
+async function fetchForm() {
+  const params = new URLSearchParams(window.location.search);
+  params.append('schema', 'form_kit');
+
+  try {
+    const response = await fetch(`${props.api}/webform/${props.id}/json/schema?${params.toString()}`);
+
+    // Always read body first
+    const data = await response.json();
+
+    if (!response.ok) {
+      // Try to extract a meaningful backend error
+      throw new Error(data.errors ? data.errors.map((err) => err.message).join(', ') : 'Unknown error');
+    }
+
+    if (data.schema) {
+      schema.value = addSlots(data.schema); // TODO
+      if (props.schemeProcessor) schema.value = props.schemeProcessor(data.schema);
+      schemaDefaults.value = data.values;
+    } else {
+      showErrorMessage.value = true;
+      errorMessages.value = [{ message: msgs.value[lang].messages.missing }];
+    }
+  } catch (error) {
+    showErrorMessage.value = true;
+
+    // show extended error only for user roles that can adjust webforms
+    // user roles needs to be populated with a drupal hook (check README.md)
+    if (window.drupalSettings) {
+      const userRoles = window.drupalSettings.user.roles || [];
+      if (userRoles.some((role) => ['administrator', 'editor'].includes(role))) {
+        errorMessages.value = [
+          { message: error },
+          {
+            message: msgs.value.global.error,
+          },
+        ];
+      } else {
+        errorMessages.value = [{ message: msgs.value[lang].messages.error }];
+      }
+    } else {
+      errorMessages.value = [{ message: msgs.value[lang].messages.error }];
+    }
+
+    console.error(`Error fetching schema of form with ID ${props.id}:`, error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+function setDefaults() {
+  // set default values from schema
+  // use defaultsDeep to fill in the default value only 1 time AMNESTY-815
+  _defaultsDeep(formData.values, _pick(schemaDefaults.value, formKeys.value));
+
+  // set default values if any, like hidden fields and stuff (only those whose are available on form)
+  if (props.defaults) {
+    _merge(formData.values, _pick(props.defaults, formKeys.value));
+  }
+}
+
+async function submitForm(data) {
+  if (props.submitProcessor) {
+    data = props.submitProcessor(data);
+  }
+
+  submissionLoading.value = true;
+
+  // disable submit button
+  const submitButton = document.querySelector('.formkit-input[type=submit]');
+  if (submitButton) {
+    submitButton.disabled = true;
+  }
+
+  const params = new URLSearchParams(window.location.search);
+  params.append('schema', 'form_kit');
+
+  const fd = new FormData();
+  // convert data to formdata
+  for (const key in data) {
+    if (hasValue(data[key])) {
+      if (Array.isArray(data[key])) {
+        if (data[key].length) {
+          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 {
+              fd.append(`${key}[]`, val);
+            }
+          });
+        } else {
+          // if array is empty, sent empty string with FormData. Fix for AMNESTY-663
+          fd.append(key, '');
+        }
+      } 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) => {
+            fd.append(`${key}[${subkey}]`, values[subkey]);
+          });
+        } else {
+          fd.append(key, data[key]);
+        }
+      } else {
+        fd.append(key, data[key]);
+      }
+    }
+  }
+
+  fetch(`${props.api}/webform/${props.id}/json/submission?${params.toString()}`, {
+    method: 'POST',
+    body: fd,
+    query: window.location.search,
+  })
+    .then((r) => {
+      if (r.status === 200) {
+        r.json().then((response) => {
+          handleSuccess(response);
+
+          // store user data in localstorage
+          if (props.setUserData) {
+            props.setUserData(data);
+          }
+        });
+      } else {
+        r.json().then((response) => {
+          showErrorMessage.value = true;
+          submissionLoading.value = false;
+          errorMessages.value = response.errors;
+        });
+      }
+    })
+    .catch(() => {
+      showErrorMessage.value = true;
+      submissionLoading.value = false;
+    });
+}
+
+function handleSuccess(response) {
+  if (!props.forceRedirect.bool) {
+    switch (response.confirmation.type) {
+      case 'inline':
+        successTitle.value = response.confirmation.title;
+        successMessage.value = response.confirmation.message;
+        success.value = true;
+
+        gsap.to(window, {
+          duration: 0.5,
+          scrollTo: { y: formRef.value, offsetY: 200 },
+          ease: 'power2',
+        });
+
+        submissionLoading.value = false;
+        break;
+
+      case 'url':
+        window.location = response.confirmation.url;
+        break;
+
+      default:
+        successTitle.value = msgs.value[lang].success.title;
+        successMessage.value = msgs.value[lang].success.message;
+        success.value = true;
+        submissionLoading.value = false;
+    }
+  } else {
+    window.location = props.forceRedirect.url;
+  }
+
+  emit('success');
+}
+/* ------------------------------------------------------------------
+ * Watchers
+ * ------------------------------------------------------------------ */
+watch(formKeys, async () => {
+  setDefaults();
+
+  await nextTick();
+
+  const $form = formRef.value?.querySelector('form');
+  if ($form) {
+    $form.setAttribute('novalidate', true); // remove native js form validation because of time input error AMNESTY-785
+  }
+});
+
+/* ------------------------------------------------------------------
+ * Helpers (unchanged)
+ * ------------------------------------------------------------------ */
+function addSlots(schema) {
+  // if (schema[0].children) {
+  //   // check if actions element is present to add slot
+  //   const actions = schema[0].children.filter((cmp) => cmp.name === 'actions');
+  //   if (actions[0]) {
+  //     const index = schema[0].children.indexOf(actions[0]);
+  //     schema[0].children.splice(index, 0, {
+  //       $el: 'div',
+  //       name: 'before-actions-slot',
+  //       attrs: {
+  //         class: 'formkit-before-actions',
+  //       },
+  //       children: '$slots.beforeActions',
+  //     });
+  //   }
+  // }
+
+  return schema;
+}
+</script>