From c79fca75f331e404e828643aa72bcced88bacbee Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete@docuseal.com>
Date: Thu, 7 Nov 2024 20:58:43 +0200
Subject: [PATCH] add complete button

---
 app/javascript/submission_form/area.vue |  1 -
 app/javascript/submission_form/form.vue | 68 +++++++++++++++++++++++--
 app/javascript/submission_form/i18n.js  | 13 +++++
 3 files changed, 77 insertions(+), 5 deletions(-)

diff --git a/app/javascript/submission_form/area.vue b/app/javascript/submission_form/area.vue
index c77222e6..5d08ce75 100644
--- a/app/javascript/submission_form/area.vue
+++ b/app/javascript/submission_form/area.vue
@@ -39,7 +39,6 @@
       </template>
     </div>
     <div
-      v-if="isActive"
       ref="scrollToElem"
       class="absolute"
       :style="{ top: scrollPadding }"
diff --git a/app/javascript/submission_form/form.vue b/app/javascript/submission_form/form.vue
index 03950e47..a06ca015 100644
--- a/app/javascript/submission_form/form.vue
+++ b/app/javascript/submission_form/form.vue
@@ -24,6 +24,44 @@
     :fields="formulaFields"
     :values="values"
   />
+  <Teleport
+    v-if="completeButtonToRef"
+    :to="completeButtonToRef"
+  >
+    <span
+      v-if="(emptyValueRequiredStep && ((stepFields.length - 1) !== currentStep || currentStepFields !== emptyValueRequiredStep)) || isCompleted"
+      class="tooltip-left"
+      :class="{ tooltip: !isCompleted }"
+      :data-tip="t('fill_all_required_fields_to_complete')"
+    >
+      <button
+        class="btn btn-sm btn-neutral text-white px-4 w-full flex justify-center btn-disabled pointer-events-auto"
+        @click="[isFormVisible = true, !isCompleted && goToStep(stepFields.indexOf(emptyValueRequiredStep), true, false)]"
+      >
+        {{ t('complete') }}
+      </button>
+    </span>
+    <button
+      v-else
+      id="complete_form_button"
+      class="btn btn-sm btn-neutral text-white px-4 w-full flex justify-center"
+      form="steps_form"
+      type="submit"
+      name="completed"
+      value="true"
+      :disabled="isSubmittingComplete"
+    >
+      <span class="flex items-center">
+        <IconInnerShadowTop
+          v-if="isSubmittingComplete"
+          class="mr-1 animate-spin w-5 h-5"
+        />
+        <span>
+          {{ t('complete') }}
+        </span>
+      </span>
+    </button>
+  </Teleport>
   <button
     v-if="!isFormVisible"
     id="expand_form_button"
@@ -74,6 +112,7 @@
     >
       <form
         v-if="!isCompleted && !isInvite"
+        id="steps_form"
         ref="form"
         :action="submitPath"
         method="post"
@@ -592,6 +631,11 @@ export default {
       required: false,
       default: false
     },
+    completeButtonToRef: {
+      type: Object,
+      required: false,
+      default: null
+    },
     attachments: {
       type: Array,
       required: false,
@@ -772,6 +816,7 @@ export default {
       phoneVerifiedValues: {},
       orientation: screen?.orientation?.type,
       isSubmitting: false,
+      isSubmittingComplete: false,
       submittedValues: {},
       recalculateButtonDisabledKey: ''
     }
@@ -780,6 +825,13 @@ export default {
     isMobile () {
       return /android|iphone|ipad/i.test(navigator.userAgent)
     },
+    emptyValueRequiredStep () {
+      return this.stepFields.find((fields, index) => {
+        return fields.some((f) => {
+          return f.required && isEmpty(this.values[f.uuid])
+        })
+      })
+    },
     submitButtonText () {
       if (this.alwaysMinimize) {
         return this.t('submit')
@@ -1146,9 +1198,15 @@ export default {
     scrollIntoArea (area) {
       return this.$refs.areas.scrollIntoArea(area)
     },
-    async submitStep () {
+    async submitStep (e) {
       this.isSubmitting = true
 
+      const forceComplete = e.submitter?.getAttribute('name') === 'completed'
+
+      if (forceComplete) {
+        this.isSubmittingComplete = true
+      }
+
       const submitStep = this.currentStep
 
       const stepPromise = ['signature', 'phone', 'initials', 'payment'].includes(this.currentField.type)
@@ -1157,7 +1215,7 @@ export default {
 
       stepPromise().then(async () => {
         const emptyRequiredField = this.stepFields.find((fields, index) => {
-          if (index >= submitStep) {
+          if (forceComplete ? index === submitStep : index >= submitStep) {
             return false
           }
 
@@ -1167,7 +1225,7 @@ export default {
         })
 
         const formData = new FormData(this.$refs.form)
-        const isLastStep = submitStep === this.stepFields.length - 1
+        const isLastStep = (submitStep === this.stepFields.length - 1) || forceComplete
 
         if (isLastStep && !emptyRequiredField && !this.inviteSubmitters.length) {
           formData.append('completed', 'true')
@@ -1192,7 +1250,7 @@ export default {
             return Promise.reject(new Error(data.error))
           }
 
-          const nextStep = (isLastStep && emptyRequiredField) || this.stepFields[submitStep + 1]
+          const nextStep = (isLastStep && emptyRequiredField) || (forceComplete ? null : this.stepFields[submitStep + 1])
 
           if (nextStep) {
             if (this.alwaysMinimize) {
@@ -1213,6 +1271,7 @@ export default {
           console.error(error)
         }).finally(() => {
           this.isSubmitting = false
+          this.isSubmittingComplete = false
         })
       }).catch(error => {
         if (error?.message === 'Image too small') {
@@ -1222,6 +1281,7 @@ export default {
         }
       }).finally(() => {
         this.isSubmitting = false
+        this.isSubmittingComplete = false
       })
     },
     minimizeForm () {
diff --git a/app/javascript/submission_form/i18n.js b/app/javascript/submission_form/i18n.js
index 11909aec..42fed56b 100644
--- a/app/javascript/submission_form/i18n.js
+++ b/app/javascript/submission_form/i18n.js
@@ -1,5 +1,6 @@
 const en = {
   complete: 'Complete',
+  fill_all_required_fields_to_complete: 'Fill all required fields to complete',
   sign_and_complete: 'Sign and Complete',
   text: 'Text',
   by_clicking_you_agree_to_the: 'By clicking "{button}", you agree to the',
@@ -93,6 +94,7 @@ const en = {
 
 const es = {
   complete: 'Completar',
+  fill_all_required_fields_to_complete: 'Complete todos los campos requeridos para finalizar',
   sign_and_complete: 'Firmar y Completar',
   invite: 'Invitar',
   email: 'Correo electrónico',
@@ -185,6 +187,7 @@ const es = {
 
 const it = {
   complete: 'Completa',
+  fill_all_required_fields_to_complete: 'Compila tutti i campi obbligatori per completare',
   sign_and_complete: 'Firma e Completa',
   invite: 'Invita',
   email: 'Email',
@@ -277,6 +280,7 @@ const it = {
 
 const de = {
   complete: 'Abschließen',
+  fill_all_required_fields_to_complete: 'Alle erforderlichen Felder ausfüllen, um abzuschließen',
   sign_and_complete: 'Signieren und Abschließen',
   invite: 'Einladen',
   email: 'E-Mail',
@@ -369,6 +373,7 @@ const de = {
 
 const fr = {
   complete: 'Terminer',
+  fill_all_required_fields_to_complete: 'Veuillez remplir tous les champs obligatoires pour compléter',
   sign_and_complete: 'Signer et Terminer',
   invite: 'Inviter',
   email: 'Courriel',
@@ -461,6 +466,7 @@ const fr = {
 
 const pl = {
   complete: 'Zakończ',
+  fill_all_required_fields_to_complete: 'Uzupełnij wszystkie wymagane pola, aby zakończyć',
   sign_and_complete: 'Podpisz i zakończ',
   invite: 'Zaproś',
   email: 'E-mail',
@@ -553,6 +559,7 @@ const pl = {
 
 const uk = {
   complete: 'Завершити',
+  fill_all_required_fields_to_complete: "Заповніть всі обов'язкові поля для завершення",
   sign_and_complete: 'Підписати і завершити',
   invite: 'Запросити',
   email: 'Електронна пошта',
@@ -645,6 +652,7 @@ const uk = {
 
 const cs = {
   complete: 'Dokončit',
+  fill_all_required_fields_to_complete: 'Please complete all mandatory fields',
   sign_and_complete: 'Podepsat a dokončit',
   invite: 'Pozvat',
   email: 'E-mail',
@@ -737,6 +745,7 @@ const cs = {
 
 const pt = {
   complete: 'Completar',
+  preencher_todos_os_campos_obrigatórios_para_concluir: 'Preencher todos os campos obrigatórios para concluir',
   sign_and_complete: 'Assinar e Completar',
   invite: 'Convidar',
   email: 'E-mail',
@@ -829,6 +838,7 @@ const pt = {
 
 const he = {
   complete: 'השלם',
+  fill_all_required_fields_to_complete: 'נא למלא את כל השדות הנדרשים להשלמה',
   sign_and_complete: 'חתום והשלם',
   invite: 'הזמן',
   email: 'דוא"ל',
@@ -922,6 +932,7 @@ const he = {
 
 const nl = {
   complete: 'Voltooien',
+  vul_alle_verplichte_velden_in_om_te_voltooien: 'Vul alle verplichte velden in om te voltooien',
   sign_and_complete: 'Ondertekenen en voltooien',
   invite: 'Uitnodigen',
   email: 'E-mail',
@@ -1015,6 +1026,7 @@ const nl = {
 
 const ar = {
   complete: 'اكتمال',
+  fill_all_required_fields_to_complete: 'يرجى ملء جميع الحقول المطلوبة لإكمال',
   sign_and_complete: 'التوقيع والاكتمال',
   invite: 'دعوة',
   email: 'البريد الإلكتروني',
@@ -1107,6 +1119,7 @@ const ar = {
 
 const ko = {
   complete: '완료',
+  fill_all_required_fields_to_complete: '모든 필수 필드를 작성하여 완료하세요',
   sign_and_complete: '서명하고 완료하기',
   invite: '초대하기',
   email: '이메일',