optional invite

app/javascript/submission_form/form.vue

@@ -498,6 +498,7 @@
       <InviteForm
         v-else-if="isInvite"
         :submitters="inviteSubmitters"
+        :optional-submitters="optionalInviteSubmitters"
         :submitter-slug="submitterSlug"
         :authenticity-token="authenticityToken"
         :url="baseUrl + submitPath + '/invite'"
@@ -627,6 +628,11 @@ export default {
       required: false,
       default: () => []
     },
+    optionalInviteSubmitters: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     withSignatureId: {
       type: Boolean,
       required: false,
@@ -1320,7 +1326,7 @@ export default {
         const formData = new FormData(this.$refs.form)
         const isLastStep = (submitStep === this.stepFields.length - 1) || forceComplete
 
-        if (isLastStep && !emptyRequiredField && !this.inviteSubmitters.length) {
+        if (isLastStep && !emptyRequiredField && !this.inviteSubmitters.length && !this.optionalInviteSubmitters.length) {
           formData.append('completed', 'true')
         }
 
@@ -1359,7 +1365,7 @@ export default {
             if (emptyRequiredField === nextStep) {
               this.showFillAllRequiredFields = true
             }
-          } else if (this.inviteSubmitters.length) {
+          } else if (this.inviteSubmitters.length || this.optionalInviteSubmitters.length) {
             this.isInvite = true
           } else {
             this.performComplete(response)

app/javascript/submission_form/invite_form.vue

@@ -12,7 +12,7 @@
       :value="authenticityToken"
     >
     <div
-      v-for="(submitter, index) in submitters"
+      v-for="(submitter, index) in [...submitters, ...optionalSubmitters]"
       :key="submitter.uuid"
       :class="{ 'mt-4': index !== 0 }"
     >
@@ -26,7 +26,7 @@
         dir="auto"
         class="label text-2xl"
       >
-        {{ t('invite') }} {{ submitter.name }}
+        {{ t('invite') }} {{ submitter.name }} <template v-if="!submitters.includes(submitter)">({{ t('optional') }})</template>
       </label>
       <input
         :id="submitter.uuid"
@@ -34,7 +34,7 @@
         class="base-input !text-2xl w-full"
         :placeholder="t('email')"
         type="email"
-        required
+        :required="submitters.includes(submitter)"
         autofocus="true"
         name="submission[submitters][][email]"
       >
@@ -53,7 +53,7 @@
             class="mr-1 animate-spin"
           />
           <span>
-            {{ t('submit') }}
+            {{ t('complete') }}
           </span><span
             v-if="isSubmitting"
             class="w-6 flex justify-start mr-1"
@@ -78,6 +78,11 @@ export default {
       type: Array,
       required: true
     },
+    optionalSubmitters: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     url: {
       type: String,
       required: true