verification

app/javascript/submission_form/area.vue

@@ -209,7 +209,7 @@
 </template>
 
 <script>
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1 } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1, IconId } from '@tabler/icons-vue'
 
 export default {
   name: 'FieldArea',
@@ -311,7 +311,8 @@ export default {
         cells: this.t('cells'),
         stamp: this.t('stamp'),
         payment: this.t('payment'),
-        phone: this.t('phone')
+        phone: this.t('phone'),
+        verification: this.t('verify_id')
       }
     },
     alignClasses () {
@@ -340,7 +341,8 @@ export default {
         cells: IconColumns3,
         multiple: IconChecks,
         phone: IconPhoneCheck,
-        payment: IconCreditCard
+        payment: IconCreditCard,
+        verification: IconId
       }
     },
     image () {

app/javascript/submission_form/form.vue

@@ -448,9 +448,22 @@
             @focus="scrollIntoField(currentField)"
             @submit="!isSubmitting && submitStep()"
           />
+          <VerificationStep
+            v-else-if="currentField.type === 'verification'"
+            ref="currentStep"
+            :key="currentField.uuid"
+            :locale="language?.toLowerCase() || browserLanguage"
+            :submitter="submitter"
+            :empty-value-required-step="emptyValueRequiredStep"
+            :field="currentField"
+            :submitter-slug="submitterSlug"
+            :values="values"
+            @focus="scrollIntoField(currentField)"
+            @submit="!isSubmitting && submitStep()"
+          />
         </div>
         <div
-          v-if="currentField.type !== 'payment' || submittedValues[currentField.uuid]"
+          v-if="(currentField.type !== 'payment' && currentField.type !== 'verification') || submittedValues[currentField.uuid]"
           :class="currentField.type === 'signature' ? 'mt-2' : 'mt-6 md:mt-8'"
         >
           <button
@@ -537,6 +550,7 @@ import AttachmentStep from './attachment_step'
 import MultiSelectStep from './multi_select_step'
 import PhoneStep from './phone_step'
 import PaymentStep from './payment_step'
+import VerificationStep from './verification_step'
 import TextStep from './text_step'
 import NumberStep from './number_step'
 import DateStep from './date_step'
@@ -579,6 +593,7 @@ export default {
     IconWritingSign,
     AttachmentStep,
     InitialsStep,
+    VerificationStep,
     InviteForm,
     MultiSelectStep,
     IconInnerShadowTop,
@@ -908,7 +923,23 @@ export default {
       return this.fields.filter((f) => f.readonly && f.conditions?.length && this.checkFieldConditions(f))
     },
     stepFields () {
-      return this.fields.filter((f) => !f.readonly).reduce((acc, f) => {
+      const verificationFields = []
+
+      const sortedFields = this.fields.reduce((acc, f) => {
+        if (f.type === 'verification') {
+          verificationFields.push(f)
+        } else if (!f.readonly) {
+          acc.push(f)
+        }
+
+        return acc
+      }, [])
+
+      if (verificationFields.length) {
+        sortedFields.push(verificationFields.pop())
+      }
+
+      return sortedFields.reduce((acc, f) => {
         const prevStep = acc[acc.length - 1]
 
         if (this.checkFieldConditions(f)) {
@@ -1224,7 +1255,7 @@ export default {
 
       const submitStep = this.currentStep
 
-      const stepPromise = ['signature', 'phone', 'initials', 'payment'].includes(this.currentField.type)
+      const stepPromise = ['signature', 'phone', 'initials', 'payment', 'verification'].includes(this.currentField.type)
         ? this.$refs.currentStep.submit
         : () => Promise.resolve({})
 

app/javascript/submission_form/i18n.js

@@ -1,4 +1,7 @@
 const en = {
+  complete_all_required_fields_to_proceed_with_identity_verification: 'Complete all required fields to proceed with identity verification.',
+  verify_id: 'Verify ID',
+  identity_verification: 'Identity verification',
   complete: 'Complete',
   fill_all_required_fields_to_complete: 'Fill all required fields to complete',
   sign_and_complete: 'Sign and Complete',
@@ -94,6 +97,9 @@ const en = {
 }
 
 const es = {
+  complete_all_required_fields_to_proceed_with_identity_verification: 'Complete todos los campos requeridos para continuar con la verificación de identidad.',
+  verify_id: 'Verificar ID',
+  identity_verification: 'Verificación de identidad',
   complete: 'Completar',
   fill_all_required_fields_to_complete: 'Complete todos los campos requeridos para finalizar',
   sign_and_complete: 'Firmar y Completar',
@@ -188,6 +194,9 @@ const es = {
 }
 
 const it = {
+  complete_all_required_fields_to_proceed_with_identity_verification: "Compila tutti i campi obbligatori per procedere con la verifica dell'identità.",
+  verify_id: 'Verifica ID',
+  identity_verification: "Verifica dell'identità",
   complete: 'Completa',
   fill_all_required_fields_to_complete: 'Compila tutti i campi obbligatori per completare',
   sign_and_complete: 'Firma e Completa',
@@ -282,6 +291,9 @@ const it = {
 }
 
 const de = {
+  complete_all_required_fields_to_proceed_with_identity_verification: 'Vervollständigen Sie alle erforderlichen Felder, um mit der Identitätsverifizierung fortzufahren.',
+  verify_id: 'ID überprüfen',
+  identity_verification: 'Identitätsüberprüfung',
   complete: 'Abschließen',
   fill_all_required_fields_to_complete: 'Alle erforderlichen Felder ausfüllen, um abzuschließen',
   sign_and_complete: 'Signieren und Abschließen',
@@ -376,6 +388,9 @@ const de = {
 }
 
 const fr = {
+  complete_all_required_fields_to_proceed_with_identity_verification: "Veuillez remplir tous les champs obligatoires pour continuer la vérification de l'identité.",
+  verif_id: "Vérification de l'ID",
+  verif_identite: "Vérification de l'identité",
   complete: 'Terminer',
   fill_all_required_fields_to_complete: 'Veuillez remplir tous les champs obligatoires pour compléter',
   sign_and_complete: 'Signer et Terminer',
@@ -470,6 +485,9 @@ const fr = {
 }
 
 const pl = {
+  complete_all_required_fields_to_proceed_with_identity_verification: 'Uzupełnij wszystkie wymagane pola, aby kontynuować weryfikację tożsamości.',
+  verify_id: 'Zweryfikuj ID',
+  identity_verification: 'Weryfikacja tożsamości',
   complete: 'Zakończ',
   fill_all_required_fields_to_complete: 'Uzupełnij wszystkie wymagane pola, aby zakończyć',
   sign_and_complete: 'Podpisz i zakończ',
@@ -564,6 +582,9 @@ const pl = {
 }
 
 const uk = {
+  complete_all_required_fields_to_proceed_with_identity_verification: "Заповніть всі обов'язкові поля, щоб продовжити перевірку особи.",
+  verify_id: 'Підтвердження ідентичності',
+  identity_verification: 'Ідентифікація особи',
   complete: 'Завершити',
   fill_all_required_fields_to_complete: "Заповніть всі обов'язкові поля для завершення",
   sign_and_complete: 'Підписати і завершити',
@@ -658,6 +679,9 @@ const uk = {
 }
 
 const cs = {
+  complete_all_required_fields_to_proceed_with_identity_verification: 'Vyplňte všechna povinná pole, abyste mohli pokračovat v ověření identity.',
+  verify_id: 'Ověřit ID',
+  identity_verification: 'Ověření identity',
   complete: 'Dokončit',
   fill_all_required_fields_to_complete: 'Please complete all mandatory fields',
   sign_and_complete: 'Podepsat a dokončit',
@@ -752,6 +776,9 @@ const cs = {
 }
 
 const pt = {
+  complete_all_required_fields_to_proceed_with_identity_verification: 'Preencha todos os campos obrigatórios para prosseguir com a verificação de identidade.',
+  verify_id: 'Verificar ID',
+  identity_verification: 'Verificação de identidade',
   complete: 'Completar',
   preencher_todos_os_campos_obrigatórios_para_concluir: 'Preencher todos os campos obrigatórios para concluir',
   sign_and_complete: 'Assinar e Completar',
@@ -846,6 +873,9 @@ const pt = {
 }
 
 const he = {
+  complete_all_required_fields_to_proceed_with_identity_verification: 'מלא את כל השדות הנדרשים כדי להמשיך עם אימות זהות.',
+  verify_id: 'אמת מזהה',
+  identity_verification: 'אימות זהות',
   complete: 'השלם',
   fill_all_required_fields_to_complete: 'נא למלא את כל השדות הנדרשים להשלמה',
   sign_and_complete: 'חתום והשלם',
@@ -941,6 +971,9 @@ const he = {
 }
 
 const nl = {
+  complete_all_required_fields_to_proceed_with_identity_verification: 'Vul alle verplichte velden in om door te gaan met de identiteitsverificatie.',
+  verify_id: 'Verifiëren ID',
+  identity_verification: 'Identiteitsverificatie',
   complete: 'Voltooien',
   vul_alle_verplichte_velden_in_om_te_voltooien: 'Vul alle verplichte velden in om te voltooien',
   sign_and_complete: 'Ondertekenen en voltooien',
@@ -1036,6 +1069,9 @@ const nl = {
 }
 
 const ar = {
+  complete_all_required_fields_to_proceed_with_identity_verification: 'أكمل جميع الحقول المطلوبة للمتابعة في التحقق من الهوية.',
+  verify_id: 'تحقق من الهوية',
+  identity_verification: 'التحقق من الهوية',
   complete: 'اكتمال',
   fill_all_required_fields_to_complete: 'يرجى ملء جميع الحقول المطلوبة لإكمال',
   sign_and_complete: 'التوقيع والاكتمال',
@@ -1130,6 +1166,9 @@ const ar = {
 }
 
 const ko = {
+  complete_all_required_fields_to_proceed_with_identity_verification: '신원 확인을 진행하려면 모든 필수 필드를 작성하십시오.',
+  verify_id: '아이디 확인',
+  identity_verification: '신원 확인',
   complete: '완료',
   fill_all_required_fields_to_complete: '모든 필수 필드를 작성하여 완료하세요',
   sign_and_complete: '서명하고 완료하기',

app/javascript/submission_form/payment_step.vue

@@ -1,7 +1,6 @@
 <template>
   <label
     v-if="!modelValue && !sessionId"
-    :for="field.uuid"
     class="label text-2xl mb-2"
   >
     <MarkdownContent

app/javascript/submission_form/verification_step.vue

@@ -0,0 +1,169 @@
+<template>
+  <label
+    class="label text-2xl mb-2"
+  >
+    <MarkdownContent
+      v-if="field.title"
+      :string="field.title"
+    />
+    <template v-else>{{ field.name || t('identity_verification') }}</template>
+  </label>
+  <div
+    v-if="field.description"
+    dir="auto"
+    class="mb-4 px-1"
+  >
+    <MarkdownContent :string="field.description" />
+  </div>
+  <div
+    v-if="emptyValueRequiredStep && emptyValueRequiredStep[0] !== field"
+    class="px-1"
+  >
+    {{ t('complete_all_required_fields_to_proceed_with_identity_verification') }}
+  </div>
+  <div v-else>
+    <div
+      v-if="isLoading"
+      class="w-full flex space-x-2 justify-center mb-2"
+    >
+      <IconInnerShadowTop
+        width="40"
+        class="animate-spin h-10"
+      />
+    </div>
+    <div
+      ref="widgetContainer"
+    />
+  </div>
+</template>
+
+<script>
+import MarkdownContent from './markdown_content'
+import { IconInnerShadowTop } from '@tabler/icons-vue'
+import phoneData from './phone_data'
+
+export default {
+  name: 'VerificationStep',
+  components: {
+    MarkdownContent,
+    IconInnerShadowTop
+  },
+  inject: ['baseUrl', 't'],
+  props: {
+    modelValue: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    submitter: {
+      type: Object,
+      required: true
+    },
+    field: {
+      type: Object,
+      required: true
+    },
+    emptyValueRequiredStep: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    values: {
+      type: Object,
+      required: true
+    },
+    locale: {
+      type: String,
+      required: false,
+      default: 'en'
+    },
+    submitterSlug: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['focus', 'submit', 'update:model-value', 'attached'],
+  data () {
+    return {
+      isCreatingCheckout: false,
+      isMathLoaded: false,
+      isLoading: false,
+      eidEasyData: {}
+    }
+  },
+  computed: {
+    countryCode () {
+      const browserTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
+      const browserTz = browserTimeZone.split('/')[1]
+      const country = phoneData.find(([a, b, c, tz]) => tz.includes(browserTz))
+
+      return country[0]
+    },
+    browserCountry () {
+      return (navigator.language || navigator.userLanguage || 'en').split('-')[1]
+    },
+    widgetSettings () {
+      return {
+        clientId: this.eidEasyData.client_id,
+        docId: this.eidEasyData.doc_id,
+        language: this.locale,
+        countryCode: this.browserCountry,
+        enabledMethods: {
+          signature: this.eidEasyData.available_methods
+        },
+        selectedMethod: null,
+        enabledCountries: 'all',
+        onSuccess: (data) => {
+          this.$emit('submit')
+        },
+        onFail: (error) => {
+          console.error(error)
+        }
+      }
+    }
+  },
+  async mounted () {
+    this.isLoading = true
+
+    Promise.all([
+      import('@eid-easy/eideasy-widget'),
+      this.start()
+    ]).finally(() => {
+      this.isLoading = false
+    })
+  },
+  methods: {
+    start () {
+      return fetch(this.baseUrl + `/api/identity_verification/${this.field.uuid}`, {
+        method: 'PUT',
+        body: JSON.stringify({
+          submitter_slug: this.submitterSlug
+        }),
+        headers: { 'Content-Type': 'application/json' }
+      }).then(async (resp) => {
+        this.eidEasyData = await resp.json()
+
+        const eidEasyWidget = document.createElement('eideasy-widget')
+
+        for (const key in this.widgetSettings) {
+          eidEasyWidget[key] = this.widgetSettings[key]
+        }
+
+        this.$refs.widgetContainer.innerHTML = ''
+        this.$refs.widgetContainer.appendChild(eidEasyWidget)
+      })
+    },
+    async submit () {
+      return fetch(this.baseUrl + '/api/identity_verification', {
+        method: 'POST',
+        body: JSON.stringify({
+          submitter_slug: this.submitterSlug
+        }),
+        headers: { 'Content-Type': 'application/json' }
+      }).then(async (resp) => {
+        return resp
+      })
+    }
+  }
+}
+</script>