allow to invite party

app/javascript/submission_form/form.vue

@@ -436,6 +436,15 @@
           </div>
         </div>
       </form>
+      <InviteForm
+        v-else-if="!isInvited && inviteSubmitters.length"
+        :submitters="inviteSubmitters"
+        :submitter-slug="submitterSlug"
+        :authenticity-token="authenticityToken"
+        :url="baseUrl + submitPath + '/invite'"
+        :style="{ maxWidth: isBreakpointMd ? '582px' : '' }"
+        @success="isInvited = true"
+      />
       <FormCompleted
         v-else
         :is-demo="isDemo"
@@ -485,6 +494,7 @@ import TextStep from './text_step'
 import NumberStep from './number_step'
 import DateStep from './date_step'
 import MarkdownContent from './markdown_content'
+import InviteForm from './invite_form'
 import FormCompleted from './completed'
 import { IconInnerShadowTop, IconArrowsDiagonal, IconWritingSign, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
 import AppearsOn from './appears_on'
@@ -522,6 +532,7 @@ export default {
     IconWritingSign,
     AttachmentStep,
     InitialsStep,
+    InviteForm,
     MultiSelectStep,
     IconInnerShadowTop,
     DateStep,
@@ -548,6 +559,11 @@ export default {
       type: Object,
       required: true
     },
+    inviteSubmitters: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     withSignatureId: {
       type: Boolean,
       required: false,
@@ -739,6 +755,7 @@ export default {
   data () {
     return {
       isCompleted: false,
+      isInvited: false,
       isFormVisible: this.expand !== false,
       showFillAllRequiredFields: false,
       currentStep: 0,
@@ -1119,7 +1136,7 @@ export default {
         const formData = new FormData(this.$refs.form)
         const isLastStep = this.currentStep === this.stepFields.length - 1
 
-        if (isLastStep && !emptyRequiredField) {
+        if (isLastStep && !emptyRequiredField && !this.inviteSubmitters.length) {
           formData.append('completed', 'true')
         }
 

app/javascript/submission_form/i18n.js

@@ -10,6 +10,8 @@ const en = {
   reviewed: 'Reviewed',
   other: 'Other',
   authored_by_me: 'Authored by me',
+  invite: 'Invite',
+  email: 'Email',
   approved_by: 'Approved by',
   reviewed_by: 'Reviewed by',
   authored_by: 'Authored by',
@@ -85,6 +87,8 @@ const en = {
 }
 
 const es = {
+  invite: 'Invitar',
+  email: 'Correo electrónico',
   approved: 'Aprobado',
   reviewed: 'Revisado',
   other: 'Otro',
@@ -170,6 +174,8 @@ const es = {
 }
 
 const it = {
+  invite: 'Invita',
+  email: 'Email',
   approved: 'Approvato',
   reviewed: 'Revisionato',
   other: 'Altro',
@@ -255,6 +261,8 @@ const it = {
 }
 
 const de = {
+  invite: 'Einladen',
+  email: 'E-Mail',
   approved: 'Genehmigt',
   reviewed: 'Überprüft',
   other: 'Andere',
@@ -340,6 +348,8 @@ const de = {
 }
 
 const fr = {
+  invite: 'Inviter',
+  email: 'Courriel',
   approved: 'Approuvé',
   reviewed: 'Révisé',
   other: 'Autre',
@@ -425,6 +435,8 @@ const fr = {
 }
 
 const pl = {
+  invite: 'Zaproś',
+  email: 'E-mail',
   approved: 'Zaakceptowany',
   reviewed: 'Przejrzany',
   other: 'Inny',
@@ -510,6 +522,8 @@ const pl = {
 }
 
 const uk = {
+  invite: 'Запросити',
+  email: 'Електронна пошта',
   approved: 'Затверджено',
   reviewed: 'Переглянуто',
   other: 'Інше',
@@ -595,6 +609,8 @@ const uk = {
 }
 
 const cs = {
+  invite: 'Pozvat',
+  email: 'E-mail',
   approved: 'Schváleno',
   reviewed: 'Zkontrolováno',
   other: 'Jiné',
@@ -680,6 +696,8 @@ const cs = {
 }
 
 const pt = {
+  invite: 'Convidar',
+  email: 'E-mail',
   approved: 'Aprovado',
   reviewed: 'Revisado',
   other: 'Outro',
@@ -765,6 +783,8 @@ const pt = {
 }
 
 const he = {
+  invite: 'הזמן',
+  email: 'דוא"ל',
   approved: 'מאושר',
   reviewed: 'נסקר',
   other: 'אחר',
@@ -851,6 +871,8 @@ const he = {
 }
 
 const nl = {
+  invite: 'Uitnodigen',
+  email: 'E-mail',
   approved: 'Goedgekeurd',
   reviewed: 'Beoordeeld',
   other: 'Anders',
@@ -937,6 +959,8 @@ const nl = {
 }
 
 const ar = {
+  invite: 'دعوة',
+  email: 'البريد الإلكتروني',
   approved: 'موافق عليه',
   reviewed: 'تمت مراجعته',
   other: 'آخر',
@@ -1022,6 +1046,8 @@ const ar = {
 }
 
 const ko = {
+  invite: '초대하기',
+  email: '이메일',
   approved: '승인됨',
   reviewed: '검토됨',
   other: '기타',

app/javascript/submission_form/invite_form.vue

@@ -0,0 +1,117 @@
+<template>
+  <form
+    ref="form"
+    action="post"
+    method="post"
+    class="mx-auto"
+    @submit.prevent="submit"
+  >
+    <input
+      type="hidden"
+      name="authenticity_token"
+      :value="authenticityToken"
+    >
+    <div
+      v-for="(submitter, index) in submitters"
+      :key="submitter.uuid"
+      :class="{ 'mt-4': index !== 0 }"
+    >
+      <input
+        :value="submitter.uuid"
+        hidden
+        name="submission[submitters][][uuid]"
+      >
+      <label
+        :for="submitter.uuid"
+        dir="auto"
+        class="label text-2xl"
+      >
+        {{ t('invite') }} {{ submitter.name }}
+      </label>
+      <input
+        :id="submitter.uuid"
+        dir="auto"
+        class="base-input !text-2xl w-full"
+        :placeholder="t('email')"
+        type="email"
+        required
+        autofocus="true"
+        name="submission[submitters][][email]"
+      >
+    </div>
+    <div
+      class="mt-6 md:mt-8"
+    >
+      <button
+        type="submit"
+        class="base-button w-full flex justify-center"
+        :disabled="isSubmitting"
+      >
+        <span class="flex">
+          <IconInnerShadowTop
+            v-if="isSubmitting"
+            class="mr-1 animate-spin"
+          />
+          <span>
+            {{ t('submit') }}
+          </span><span
+            v-if="isSubmitting"
+            class="w-6 flex justify-start mr-1"
+          ><span>...</span></span>
+        </span>
+      </button>
+    </div>
+  </form>
+</template>
+
+<script>
+import { IconInnerShadowTop } from '@tabler/icons-vue'
+
+export default {
+  name: 'InviteForm',
+  components: {
+    IconInnerShadowTop
+  },
+  inject: ['t'],
+  props: {
+    submitters: {
+      type: Array,
+      required: true
+    },
+    url: {
+      type: String,
+      required: true
+    },
+    authenticityToken: {
+      type: String,
+      required: true
+    },
+    submitterSlug: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['success'],
+  data () {
+    return {
+      isSubmitting: false
+    }
+  },
+  methods: {
+    submit () {
+      this.isSubmitting = true
+
+      return fetch(this.url, {
+        method: 'POST',
+        body: new FormData(this.$refs.form)
+      }).then((response) => {
+        if (response.status === 200) {
+          this.$emit('success')
+        }
+      }).finally(() => {
+        this.isSubmitting = false
+      })
+    }
+  }
+}
+</script>