add signing form specs

.rubocop.yml

@@ -60,10 +60,10 @@ RSpec/NestedGroups:
   Max: 6
 
 RSpec/MultipleExpectations:
-  Max: 20
+  Max: 25
 
 RSpec/ExampleLength:
-  Max: 40
+  Max: 50
 
 RSpec/MultipleMemoizedHelpers:
   Max: 9

app/javascript/submission_form/date_step.vue

@@ -37,6 +37,7 @@
     <AppearsOn :field="field" />
     <div class="text-center">
       <input
+        :id="field.uuid"
         ref="input"
         v-model="value"
         class="base-input !text-2xl text-center w-full"

app/javascript/submission_form/dropzone.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    id="dropzone"
     class="flex h-32 w-full"
     @dragover.prevent
     @drop.prevent="onDropFiles"

app/javascript/submission_form/i18n.js

@@ -67,7 +67,7 @@ const en = {
   documents_have_been_signed: 'Documents have been signed!',
   create_a_free_account: 'Create a Free Account',
   powered_by: 'Powered by',
-  please_check_the_box_to_continue: 'Please check the box to continue',
+  please_check_the_box_to_continue: 'Please check the box to continue.',
   open_source_documents_software: 'open source documents software',
   verified_phone_number: 'Verify Phone Number',
   use_international_format: 'Use international format: +1xxx',
@@ -89,7 +89,8 @@ const en = {
   pay_with_strip: 'Pay with Stripe',
   reupload: 'Reupload',
   upload: 'Upload',
-  files: 'Files'
+  files: 'Files',
+  signature_is_too_small_please_redraw: 'Signature is too small. Please redraw.'
 }
 
 const es = {
@@ -160,7 +161,7 @@ const es = {
   documents_have_been_signed: '¡Los documentos han sido firmados!',
   create_a_free_account: 'Crear una Cuenta Gratuita',
   powered_by: 'Desarrollado por',
-  please_check_the_box_to_continue: 'Por favor marque la casilla para continuar',
+  please_check_the_box_to_continue: 'Por favor marque la casilla para continuar.',
   open_source_documents_software: 'software de documentos de código abierto',
   verified_phone_number: 'Verificar número de teléfono',
   use_international_format: 'Usar formato internacional: +1xxx',
@@ -182,7 +183,8 @@ const es = {
   pay_with_strip: 'Pagar con Stripe',
   reupload: 'Volver a subir',
   upload: 'Subir',
-  files: 'Archivos'
+  files: 'Archivos',
+  signature_is_too_small_please_redraw: 'La firma es demasiado pequeña. Por favor, dibújala de nuevo.'
 }
 
 const it = {
@@ -253,7 +255,7 @@ const it = {
   documents_have_been_signed: 'I documenti sono stati firmati!',
   create_a_free_account: 'Crea un Account Gratuito',
   powered_by: 'Desarrollado por',
-  please_check_the_box_to_continue: 'Si prega di spuntare la casella per continuare',
+  please_check_the_box_to_continue: 'Si prega di spuntare la casella per continuare.',
   open_source_documents_software: 'software di documenti open source',
   verified_phone_number: 'Verifica numero di telefono',
   use_international_format: 'Usa formato internazionale: +1xxx',
@@ -275,7 +277,8 @@ const it = {
   pay_with_strip: 'Paga con Stripe',
   reupload: 'Ricarica',
   upload: 'Carica',
-  files: 'File'
+  files: 'File',
+  signature_is_too_small_please_redraw: 'La firma è troppo piccola. Ridisegnala per favore.'
 }
 
 const de = {
@@ -346,7 +349,7 @@ const de = {
   documents_have_been_signed: 'Dokumente wurden unterschrieben!',
   create_a_free_account: 'Kostenloses Konto erstellen',
   powered_by: 'Bereitgestellt von',
-  please_check_the_box_to_continue: 'Bitte setzen Sie das Häkchen, um fortzufahren',
+  please_check_the_box_to_continue: 'Bitte setzen Sie das Häkchen, um fortzufahren.',
   open_source_documents_software: 'Open-Source-Dokumentensoftware',
   verified_phone_number: 'Telefonnummer überprüfen',
   use_international_format: 'Internationales Format verwenden: +1xxx',
@@ -368,7 +371,8 @@ const de = {
   pay_with_strip: 'Mit Stripe bezahlen',
   reupload: 'Erneut hochladen',
   upload: 'Hochladen',
-  files: 'Dateien'
+  files: 'Dateien',
+  signature_is_too_small_please_redraw: 'Die Unterschrift ist zu klein. Bitte erneut zeichnen.'
 }
 
 const fr = {
@@ -439,7 +443,7 @@ const fr = {
   documents_have_been_signed: 'Les documents ont été signés!',
   create_a_free_account: 'Créer un Compte Gratuit',
   powered_by: 'Propulsé par',
-  please_check_the_box_to_continue: 'Veuillez cocher la case pour continuer',
+  please_check_the_box_to_continue: 'Veuillez cocher la case pour continuer.',
   open_source_documents_software: 'logiciel de documents open source',
   verified_phone_number: 'Vérifier le numéro de téléphone',
   use_international_format: 'Utiliser le format international : +1xxx',
@@ -461,7 +465,8 @@ const fr = {
   pay_with_strip: 'Paiement avec Stripe',
   reupload: 'Recharger',
   upload: 'Télécharger',
-  files: 'Fichiers'
+  files: 'Fichiers',
+  signature_is_too_small_please_redraw: 'La signature est trop petite. Veuillez la redessiner.'
 }
 
 const pl = {
@@ -532,7 +537,7 @@ const pl = {
   documents_have_been_signed: 'Dokumenty zostały podpisane!',
   create_a_free_account: 'Utwórz darmowe konto',
   powered_by: 'Napędzany przez',
-  please_check_the_box_to_continue: 'Proszę zaznaczyć pole, aby kontynuować',
+  please_check_the_box_to_continue: 'Proszę zaznaczyć pole, aby kontynuować.',
   open_source_documents_software: 'oprogramowanie do dokumentów open source',
   verified_phone_number: 'Zweryfikuj numer telefonu',
   use_international_format: 'Użyj międzynarodowego formatu: +1xxx',
@@ -554,7 +559,8 @@ const pl = {
   pay_with_strip: 'Płatność za pomocą Stripe',
   reupload: 'Ponowne przesłanie',
   upload: 'Przesyłanie',
-  files: 'Pliki'
+  files: 'Pliki',
+  signature_is_too_small_please_redraw: 'Podpis jest zbyt mały. Proszę narysować go ponownie.'
 }
 
 const uk = {
@@ -625,7 +631,7 @@ const uk = {
   documents_have_been_signed: 'Документи були підписані!',
   create_a_free_account: 'Створити безкоштовний обліковий запис',
   powered_by: 'Працює на базі',
-  please_check_the_box_to_continue: 'Будь ласка, позначте прапорець, щоб продовжити',
+  please_check_the_box_to_continue: 'Будь ласка, позначте прапорець, щоб продовжити.',
   open_source_documents_software: 'відкритий програмний засіб для документів',
   verified_phone_number: 'Підтвердіть номер телефону',
   use_international_format: 'Використовуйте міжнародний формат: +1xxx',
@@ -647,7 +653,8 @@ const uk = {
   pay_with_strip: 'Сплатити за допомогою Stripe',
   reupload: 'Перезавантажити',
   upload: 'Завантажити',
-  files: 'Файли'
+  files: 'Файли',
+  signature_is_too_small_please_redraw: 'Підпис занадто малий. Будь ласка, перемалюйте його.'
 }
 
 const cs = {
@@ -718,7 +725,7 @@ const cs = {
   documents_have_been_signed: 'Dokumenty byly podepsány!',
   create_a_free_account: 'Vytvořit bezplatný účet',
   powered_by: 'Poháněno',
-  please_check_the_box_to_continue: 'Prosím, zaškrtněte políčko pro pokračování',
+  please_check_the_box_to_continue: 'Prosím, zaškrtněte políčko pro pokračování.',
   open_source_documents_software: 'open source software pro dokumenty',
   verified_phone_number: 'Ověřte telefonní číslo',
   use_international_format: 'Použijte mezinárodní formát: +1xxx',
@@ -740,7 +747,8 @@ const cs = {
   pay_with_strip: 'Zaplacení přes Stripe',
   reupload: 'Znovu nahrát',
   upload: 'Nahrát',
-  files: 'Soubory'
+  files: 'Soubory',
+  signature_is_too_small_please_redraw: 'Podpis je příliš malý. Prosím, překreslete ho.'
 }
 
 const pt = {
@@ -811,7 +819,7 @@ const pt = {
   documents_have_been_signed: 'Os documentos foram assinados!',
   create_a_free_account: 'Criar uma Conta Gratuita',
   powered_by: 'Desenvolvido por',
-  please_check_the_box_to_continue: 'Por favor, marque a caixa para continuar',
+  please_check_the_box_to_continue: 'Por favor, marque a caixa para continuar.',
   open_source_documents_software: 'software de documentos de código aberto',
   verified_phone_number: 'Verificar Número de Telefone',
   use_international_format: 'Use formato internacional: +1xxx',
@@ -833,7 +841,8 @@ const pt = {
   pay_with_strip: 'Pagar com Stripe',
   reupload: 'Reenviar',
   upload: 'Carregar',
-  files: 'Arquivos'
+  files: 'Arquivos',
+  signature_is_too_small_please_redraw: 'A assinatura é muito pequena. Por favor, redesenhe-a.'
 }
 
 const he = {
@@ -905,7 +914,7 @@ const he = {
   documents_have_been_signed: 'המסמכים נחתמו!',
   create_a_free_account: 'צור חשבון חינם',
   powered_by: 'מופעל על ידי',
-  please_check_the_box_to_continue: 'אנא סמן את התיבה כדי להמשיך',
+  please_check_the_box_to_continue: 'אנא סמן את התיבה כדי להמשיך.',
   open_source_documents_software: 'תוכנה פתוחה למסמכים',
   verified_phone_number: 'אימות מספר טלפון',
   use_international_format: 'השתמש בפורמט בינלאומי: +1xxx',
@@ -927,7 +936,8 @@ const he = {
   pay_with_strip: 'שלם עם סטרייפ',
   reupload: 'העלה שוב',
   upload: 'העלאה',
-  files: 'קבצים'
+  files: 'קבצים',
+  signature_is_too_small_please_redraw: 'החתימה קטנה מדי. אנא צייר מחדש.'
 }
 
 const nl = {
@@ -999,7 +1009,7 @@ const nl = {
   documents_have_been_signed: 'De documenten zijn ondertekend!',
   create_a_free_account: 'Maak een gratis account aan',
   powered_by: 'Aangedreven door',
-  please_check_the_box_to_continue: 'Vink het vakje aan om door te gaan',
+  please_check_the_box_to_continue: 'Vink het vakje aan om door te gaan.',
   open_source_documents_software: 'Open source documenten software',
   verified_phone_number: 'Geverifieerd telefoonnummer',
   use_international_format: 'Gebruik internationaal formaat: +1xxx',
@@ -1021,7 +1031,8 @@ const nl = {
   pay_with_strip: 'Betalen met Stripe',
   reupload: 'Opnieuw uploaden',
   upload: 'Uploaden',
-  files: 'Bestanden'
+  files: 'Bestanden',
+  signature_is_too_small_please_redraw: 'De handtekening is te klein. Teken deze opnieuw, alstublieft.'
 }
 
 const ar = {
@@ -1092,7 +1103,7 @@ const ar = {
   documents_have_been_signed: 'تم توقيع الوثائق!',
   create_a_free_account: 'إنشاء حساب مجاني',
   powered_by: 'مدعوم من',
-  please_check_the_box_to_continue: 'الرجاء التحقق من الخانة للمتابعة',
+  please_check_the_box_to_continue: 'الرجاء التحقق من الخانة للمتابعة.',
   open_source_documents_software: 'برنامج وثائق مفتوح المصدر',
   verified_phone_number: 'تحقق من رقم الهاتف',
   use_international_format: 'استخدم الشكل الدولي: +1xxx',
@@ -1114,7 +1125,8 @@ const ar = {
   pay_with_strip: 'الدفع بواسطة Stripe',
   reupload: 'إعادة التحميل',
   upload: 'تحميل',
-  files: 'الملفات'
+  files: 'الملفات',
+  signature_is_too_small_please_redraw: 'التوقيع صغير جدًا. يرجى إعادة الرسم.'
 }
 
 const ko = {
@@ -1184,7 +1196,7 @@ const ko = {
   documents_have_been_signed: '문서가 서명되었습니다!',
   create_a_free_account: '무료 계정 생성',
   powered_by: '구동',
-  please_check_the_box_to_continue: '계속하려면 확인란을 선택하십시오',
+  please_check_the_box_to_continue: '계속하려면 확인란을 선택하십시오.',
   open_source_documents_software: '오픈 소스 문서 소프트웨어',
   verified_phone_number: '전화번호 확인됨',
   use_international_format: '국제 포맷 사용: +1xxx',
@@ -1206,7 +1218,8 @@ const ko = {
   pay_with_strip: '스트라이프로 결제',
   reupload: '다시 업로드',
   upload: '업로드',
-  files: '파일'
+  files: '파일',
+  signature_is_too_small_please_redraw: '서명이 너무 작습니다. 다시 그려주세요.'
 }
 
 const i18n = { en, es, it, de, fr, pl, uk, cs, pt, he, nl, ar, ko }

app/javascript/submission_form/phone_step.vue

@@ -65,11 +65,15 @@
         v-show="!isCodeSent"
         class="flex w-full rounded-full outline-neutral-content outline-2 outline-offset-2 focus-within:outline"
       >
-        <div class="relative inline-block">
+        <div
+          id="country_code"
+          class="relative inline-block"
+        >
           <div class="btn bg-base-200 border border-neutral-300 text-2xl whitespace-nowrap font-normal rounded-l-full">
             {{ selectedCountry.flag }} +{{ selectedCountry.dial }}
           </div>
           <select
+            id="country_code_select"
             class="absolute top-0 bottom-0 right-0 left-0 opacity-0 w-full h-full cursor-pointer"
             :disabled="!!defaultValue"
             @change="onCountrySelect(countries.find((country) => country.flag === $event.target.value))"

app/javascript/template_builder/i18n.js

@@ -126,7 +126,6 @@ const en = {
   unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'Unlock SMS-verified phone number field with paid plan. Use text field for phone numbers without verification.',
   available_only_in_pro: 'Available only in Pro',
   failed_to_download_files: 'Failed to download files',
-  signature_is_too_small_please_redraw: 'Signature is too small - please redraw.',
   please_add_fields_for_the_submitter_name_or_remove_the_submitter_name_if_not_needed: 'Please add fields for the {submitter_name}. Or, remove the {submitter_name} if not needed.',
   draw_field: 'Draw {field} Field',
   replace: 'Replace',
@@ -277,7 +276,6 @@ const es = {
   unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'Desbloquea el campo de número de teléfono verificado por SMS con un plan pago. Usa el campo de texto para números de teléfono sin verificación.',
   available_only_in_pro: 'Disponible solo en Pro',
   failed_to_download_files: 'Error al descargar los archivos',
-  signature_is_too_small_please_redraw: 'La firma es demasiado pequeña. Por favor, dibújala de nuevo.',
   please_add_fields_for_the_submitter_name_or_remove_the_submitter_name_if_not_needed: 'Por favor, añade campos para {submitter_name} o elimina {submitter_name} si no es necesario.',
   draw_field: 'Dibujar campo {field}',
   replace: 'Reemplazar',
@@ -434,7 +432,6 @@ const it = {
   unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'Sblocca il campo numero di telefono verificato tramite SMS con un piano a pagamento. Usa il campo di testo per numeri di telefono senza verifica.',
   available_only_in_pro: 'Disponibile solo in Pro',
   failed_to_download_files: 'Impossibile scaricare i file',
-  signature_is_too_small_please_redraw: 'La firma è troppo piccola. Ridisegnala per favore.',
   please_add_fields_for_the_submitter_name_or_remove_the_submitter_name_if_not_needed: 'Aggiungi campi per {submitter_name} o rimuovi {submitter_name} se non necessario.',
   draw_field: 'Disegna il campo {field}',
   replace: 'Sostituisci',
@@ -585,7 +582,6 @@ const pt = {
   unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'Desbloqueie o campo de número de telefone verificado por SMS com um plano pago. Use o campo de texto para números de telefone sem verificação.',
   available_only_in_pro: 'Disponível apenas no Pro',
   failed_to_download_files: 'Falha ao baixar arquivos',
-  signature_is_too_small_please_redraw: 'A assinatura é muito pequena. Por favor, redesenhe.',
   please_add_fields_for_the_submitter_name_or_remove_the_submitter_name_if_not_needed: 'Adicione campos para {submitter_name} ou remova {submitter_name} se não for necessário.',
   draw_field: 'Desenhar campo {field}',
   replace: 'Substituir',
@@ -739,7 +735,6 @@ const fr = {
   unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'Débloquez le champ de numéro de téléphone vérifié par SMS avec un plan payant. Utilisez un champ texte pour les numéros de téléphone sans vérification.',
   available_only_in_pro: 'Disponible uniquement en Pro',
   failed_to_download_files: 'Échec du téléchargement des fichiers',
-  signature_is_too_small_please_redraw: 'La signature est trop petite. Veuillez la redessiner.',
   please_add_fields_for_the_submitter_name_or_remove_the_submitter_name_if_not_needed: 'Veuillez ajouter des champs pour {submitter_name} ou retirer {submitter_name} si ce n\'est pas nécessaire.',
   draw_field: 'Dessiner le champ {field}',
   replace: 'Remplacer',
@@ -893,7 +888,6 @@ const de = {
   unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'Schalte das SMS-verifizierte Telefonnummernfeld mit einem kostenpflichtigen Plan frei. Verwende das Textfeld für Telefonnummern ohne Verifizierung.',
   available_only_in_pro: 'Nur in Pro verfügbar',
   failed_to_download_files: 'Fehler beim Herunterladen der Dateien',
-  signature_is_too_small_please_redraw: 'Die Unterschrift ist zu klein. Bitte erneut zeichnen.',
   please_add_fields_for_the_submitter_name_or_remove_the_submitter_name_if_not_needed: 'Bitte füge Felder für {submitter_name} hinzu oder entferne {submitter_name}, falls nicht erforderlich.',
   draw_field: 'Feld {field} zeichnen',
   replace: 'Ersetzen',

spec/factories/submitters.rb

@@ -5,7 +5,6 @@ FactoryBot.define do
     submission
     email { Faker::Internet.email }
     name { Faker::Name.name }
-    phone { Faker::PhoneNumber.phone_number }
 
     before(:create) do |submitter, _|
       submitter.account_id = submitter.submission.account_id

spec/factories/templates.rb

@@ -9,9 +9,13 @@ FactoryBot.define do
 
     transient do
       submitter_count { 1 }
+      only_field_types do
+        %w[text date checkbox radio signature number multiple select initials image file stamp cells phone payment]
+      end
+      except_field_types { [] }
     end
 
-    after(:create) do |template, evaluator|
+    after(:create) do |template, ev|
       blob = ActiveStorage::Blob.create_and_upload!(
         io: Rails.root.join('spec/fixtures/sample-document.pdf').open,
         filename: 'sample-document.pdf',
@@ -28,7 +32,7 @@ FactoryBot.define do
       template.schema = [{ attachment_uuid: attachment.uuid, name: 'sample-document' }]
       number_words = %w[first second third fourth fifth sixth seventh eighth ninth tenth]
 
-      template.submitters = Array.new(evaluator.submitter_count) do |i|
+      template.submitters = Array.new(ev.submitter_count) do |i|
         {
           'name' => "#{number_words[i]&.capitalize} Party",
           'uuid' => SecureRandom.uuid
@@ -43,12 +47,13 @@ FactoryBot.define do
             'name' => 'First Name',
             'type' => 'text',
             'required' => true,
+            'preferences' => {},
             'areas' => [
               {
-                'x' => 0.09027777777777778,
+                'x' => 0.09273546006944444,
-                'y' => 0.1197252208047105,
+                'y' => 0.1099851117387033,
-                'w' => 0.3069444444444444,
+                'w' => 0.2701497395833333,
-                'h' => 0.03336604514229637,
+                'h' => 0.0372705365913556,
                 'attachment_uuid' => attachment.uuid,
                 'page' => 0
               }
@@ -57,12 +62,271 @@ FactoryBot.define do
           {
             'uuid' => SecureRandom.uuid,
             'submitter_uuid' => submitter['uuid'],
-            'name' => '',
+            'name' => 'Birthday',
+            'type' => 'date',
+            'required' => true,
+            'preferences' => { 'format' => 'DD/MM/YYYY' },
+            'areas' => [
+              {
+                'x' => 0.09166666666666666,
+                'y' => 0.1762778204144282,
+                'w' => 0.2763888888888889,
+                'h' => 0.0359029261474578,
+                'attachment_uuid' => attachment.uuid,
+                'page' => 0
+              }
+            ]
+          },
+          {
+            'uuid' => SecureRandom.uuid,
+            'submitter_uuid' => submitter['uuid'],
+            'name' => 'Do you agree?',
+            'type' => 'checkbox',
+            'required' => true,
+            'preferences' => {},
+            'areas' => [
+              {
+                'x' => 0.09051106770833334,
+                'y' => 0.227587027259332,
+                'w' => 0.2784450954861111,
+                'h' => 0.04113074042239687,
+                'attachment_uuid' => attachment.uuid,
+                'page' => 0
+              }
+            ]
+          },
+          {
+            'uuid' => SecureRandom.uuid,
+            'submitter_uuid' => submitter['uuid'],
+            'name' => 'First child',
+            'type' => 'radio',
+            'required' => true,
+            'preferences' => {},
+            'options' => [
+              { 'value' => 'Girl', 'uuid' => SecureRandom.uuid },
+              { 'value' => 'Boy', 'uuid' => SecureRandom.uuid }
+            ],
+            'areas' => [
+              {
+                'x' => 0.09027777777777778,
+                'y' => 0.3020184190330008,
+                'w' => 0.2,
+                'h' => 0.02857142857142857,
+                'attachment_uuid' => attachment.uuid,
+                'page' => 0
+              }
+            ]
+          },
+          {
+            'uuid' => SecureRandom.uuid,
+            'submitter_uuid' => submitter['uuid'],
+            'name' => 'Signature',
             'type' => 'signature',
             'required' => true,
-            'areas' => []
+            'preferences' => {},
+            'areas' => [
+              {
+                'x' => 0.08611111111111111,
+                'y' => 0.3487183422870299,
+                'w' => 0.2,
+                'h' => 0.0707269155206287,
+                'attachment_uuid' => attachment.uuid,
+                'page' => 0
+              }
+            ]
+          },
+          {
+            'uuid' => SecureRandom.uuid,
+            'submitter_uuid' => submitter['uuid'],
+            'name' => 'House number',
+            'type' => 'number',
+            'required' => true,
+            'preferences' => {},
+            'areas' => [
+              {
+                'x' => 0.08333333333333333,
+                'y' => 0.4582041442824252,
+                'w' => 0.2,
+                'h' => 0.02857142857142857,
+                'attachment_uuid' => attachment.uuid,
+                'page' => 0
+              }
+            ]
+          },
+          {
+            'uuid' => SecureRandom.uuid,
+            'submitter_uuid' => submitter['uuid'],
+            'name' => 'Colors',
+            'type' => 'multiple',
+            'required' => true,
+            'preferences' => {},
+            'options' => [
+              { 'value' => 'Red', 'uuid' => SecureRandom.uuid },
+              { 'value' => 'Green', 'uuid' => SecureRandom.uuid },
+              { 'value' => 'Blue', 'uuid' => SecureRandom.uuid }
+            ],
+            'areas' => [
+              {
+                'x' => 0.45,
+                'y' => 0.1133998465080583,
+                'w' => 0.2,
+                'h' => 0.02857142857142857,
+                'attachment_uuid' => attachment.uuid,
+                'page' => 0
+              }
+            ]
+          },
+          {
+            'uuid' => SecureRandom.uuid,
+            'submitter_uuid' => submitter['uuid'],
+            'name' => 'Gender',
+            'type' => 'select',
+            'required' => true,
+            'preferences' => {},
+            'options' => [
+              { 'value' => 'Male', 'uuid' => SecureRandom.uuid },
+              { 'value' => 'Female', 'uuid' => SecureRandom.uuid }
+            ],
+            'areas' => [
+              {
+                'x' => 0.4513888888888889,
+                'y' => 0.1752954719877206,
+                'w' => 0.2,
+                'h' => 0.02857142857142857,
+                'attachment_uuid' => attachment.uuid,
+                'page' => 0
+              }
+            ]
+          },
+          {
+            'uuid' => SecureRandom.uuid,
+            'submitter_uuid' => submitter['uuid'],
+            'name' => 'Initials',
+            'type' => 'initials',
+            'required' => true,
+            'preferences' => {},
+            'areas' => [
+              {
+                'x' => 0.4486111111111111,
+                'y' => 0.2273599386032233,
+                'w' => 0.1,
+                'h' => 0.02857142857142857,
+                'attachment_uuid' => attachment.uuid,
+                'page' => 0
+              }
+            ]
+          },
+          {
+            'uuid' => SecureRandom.uuid,
+            'submitter_uuid' => submitter['uuid'],
+            'name' => 'Avatar',
+            'type' => 'image',
+            'required' => true,
+            'preferences' => {},
+            'areas' => [
+              {
+                'x' => 0.7180555555555556,
+                'y' => 0.1129547198772064,
+                'w' => 0.2,
+                'h' => 0.1414538310412574,
+                'attachment_uuid' => attachment.uuid,
+                'page' => 0
+              }
+            ]
+          },
+          {
+            'uuid' => SecureRandom.uuid,
+            'submitter_uuid' => submitter['uuid'],
+            'name' => 'Attachment',
+            'type' => 'file',
+            'required' => true,
+            'preferences' => {},
+            'areas' => [
+              {
+                'x' => 0.7166666666666667,
+                'y' => 0.3020107444359171,
+                'w' => 0.2,
+                'h' => 0.02857142857142857,
+                'attachment_uuid' => attachment.uuid,
+                'page' => 0
+              }
+            ]
+          },
+          {
+            'uuid' => SecureRandom.uuid,
+            'submitter_uuid' => submitter['uuid'],
+            'name' => 'Stamp',
+            'type' => 'stamp',
+            'required' => true,
+            'readonly' => true,
+            'preferences' => {},
+            'areas' => [
+              {
+                'x' => 0.7166666666666667,
+                'y' => 0.3771910974673829,
+                'w' => 0.2,
+                'h' => 0.0707269155206287,
+                'attachment_uuid' => attachment.uuid,
+                'page' => 0
+              }
+            ]
+          },
+          {
+            'uuid' => SecureRandom.uuid,
+            'submitter_uuid' => submitter['uuid'],
+            'name' => 'Cell code',
+            'type' => 'cells',
+            'required' => true,
+            'preferences' => {},
+            'areas' => [
+              {
+                'x' => 0.4472222222222222,
+                'y' => 0.3530851880276286,
+                'w' => 0.2,
+                'h' => 0.02857142857142857,
+                'cell_w' => 0.04,
+                'attachment_uuid' => attachment.uuid,
+                'page' => 0
+              }
+            ]
+          },
+          {
+            'uuid' => SecureRandom.uuid,
+            'submitter_uuid' => submitter['uuid'],
+            'name' => 'Payment',
+            'type' => 'payment',
+            'required' => true,
+            'preferences' => { 'currency' => 'EUR', 'price' => 1000 },
+            'areas' => [
+              {
+                'x' => 0.4486111111111111,
+                'y' => 0.43168073676132,
+                'w' => 0.2,
+                'h' => 0.02857142857142857,
+                'attachment_uuid' => attachment.uuid,
+                'page' => 0
+              }
+            ]
+          },
+          {
+            'uuid' => SecureRandom.uuid,
+            'submitter_uuid' => submitter['uuid'],
+            'name' => 'Mobile Phone',
+            'type' => 'phone',
+            'required' => true,
+            'preferences' => {},
+            'areas' => [
+              {
+                'x' => 0.44443359375,
+                'y' => 0.3010283960092095,
+                'w' => 0.2,
+                'h' => 0.02857142857142857,
+                'attachment_uuid' => attachment.uuid,
+                'page' => 0
+              }
+            ]
           }
-        ]
+        ].select { |f| ev.only_field_types.include?(f['type']) && ev.except_field_types.exclude?(f['type']) }
 
         fields
       end

spec/rails_helper.rb

@@ -10,6 +10,7 @@ require 'capybara/cuprite'
 require 'capybara/rspec'
 require 'webmock/rspec'
 require 'sidekiq/testing'
+require 'signing_form_helper'
 
 Sidekiq::Testing.fake!
 
@@ -50,6 +51,7 @@ RSpec.configure do |config|
 
   config.include FactoryBot::Syntax::Methods
   config.include Devise::Test::IntegrationHelpers
+  config.include SigningFormHelper
 
   config.before(:each, type: :system) do
     if ENV['HEADLESS'] == 'false'

spec/requests/templates_spec.rb

@@ -176,33 +176,7 @@ describe 'Templates API', type: :request do
       id: template.id,
       slug: template.slug,
       name: template.name,
-      fields: [
+      fields: template.fields,
-        {
-          'uuid' => template.fields[0]['uuid'],
-          'submitter_uuid' => template.submitters[0]['uuid'],
-          'name' => 'First Name',
-          'type' => 'text',
-          'required' => true,
-          'areas' => [
-            {
-              'x' => 0.09027777777777778,
-              'y' => 0.1197252208047105,
-              'w' => 0.3069444444444444,
-              'h' => 0.03336604514229637,
-              'attachment_uuid' => template_attachment_uuid,
-              'page' => 0
-            }
-          ]
-        },
-        {
-          'uuid' => template.fields[1]['uuid'],
-          'submitter_uuid' => template.submitters[0]['uuid'],
-          'name' => '',
-          'type' => 'signature',
-          'required' => true,
-          'areas' => []
-        }
-      ],
       submitters: [
         {
           name: 'First Party',

spec/signing_form_helper.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module SigningFormHelper
+  module_function
+
+  def draw_canvas
+    page.find('canvas').click([], { x: 150, y: 100 })
+    page.execute_script <<~JS
+      const canvas = document.getElementsByTagName('canvas')[0];
+      const ctx = canvas.getContext('2d');
+
+      ctx.beginPath();
+      ctx.moveTo(150, 100);
+      ctx.lineTo(450, 100);
+      ctx.stroke();
+
+      ctx.beginPath();
+      ctx.moveTo(150, 100);
+      ctx.lineTo(150, 150);
+      ctx.stroke();
+    JS
+    sleep 1
+  end
+
+  def field_value(submitter, field_name)
+    field = template_field(submitter.template, field_name)
+
+    submitter.values[field['uuid']]
+  end
+
+  def template_field(template, field_name)
+    template.fields.find { |f| f['name'] == field_name || f['title'] == field_name } || {}
+  end
+end

spec/system/signing_form_spec.rb

@@ -0,0 +1,598 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+RSpec.describe 'Signing Form', type: :system do
+  let(:account) { create(:account) }
+  let(:author) { create(:user, account:) }
+
+  context 'when the template form link is opened' do
+    let(:template) { create(:template, account:, author:, except_field_types: %w[phone payment stamp]) }
+
+    before do
+      visit start_form_path(slug: template.slug)
+    end
+
+    it 'shows the email step', type: :system do
+      expect(page).to have_content('You have been invited to submit a form')
+      expect(page).to have_content("Invited by #{account.name}")
+      expect(page).to have_field('Email', type: 'email')
+      expect(page).to have_button('Start')
+    end
+
+    it 'completes the form' do
+      # Submit's email step
+      fill_in 'Email', with: 'john.dou@example.com'
+      click_button 'Start'
+
+      # Text step
+      fill_in 'First Name', with: 'John'
+      click_button 'next'
+
+      # Date step
+      fill_in 'Birthday', with: I18n.l(20.years.ago, format: '%Y-%m-%d')
+      click_button 'next'
+
+      # Checkbox step
+      check 'Do you agree?'
+      click_button 'next'
+
+      # Radio step
+      choose 'Boy'
+      click_button 'next'
+
+      # Signature step
+      draw_canvas
+      click_button 'next'
+
+      # Number step
+      fill_in 'House number', with: '123'
+      click_button 'next'
+
+      # Multiple choice step
+      %w[Red Blue].each { |color| check color }
+      click_button 'next'
+
+      # Select step
+      select 'Male', from: 'Gender'
+      click_button 'next'
+
+      # Initials step
+      draw_canvas
+      click_button 'next'
+
+      # Image step
+      find('#dropzone').click
+      find('input[type="file"]', visible: false).attach_file(Rails.root.join('spec/fixtures/sample-image.png'))
+      click_button 'next'
+
+      # File step
+      find('#dropzone').click
+      find('input[type="file"]', visible: false).attach_file(Rails.root.join('spec/fixtures/sample-document.pdf'))
+      click_button 'next'
+
+      # Cell step
+      fill_in 'Cell code', with: '123'
+      click_on 'Complete'
+
+      expect(page).to have_button('Download')
+      expect(page).to have_content('Document has been signed!')
+
+      submitter = template.submissions.last.submitters.last
+
+      expect(submitter.email).to eq('john.dou@example.com')
+      expect(submitter.ip).to eq('127.0.0.1')
+      expect(submitter.ua).to be_present
+      expect(submitter.opened_at).to be_present
+      expect(submitter.completed_at).to be_present
+      expect(submitter.declined_at).to be_nil
+
+      expect(field_value(submitter, 'First Name')).to eq 'John'
+      expect(field_value(submitter, 'Birthday')).to eq 20.years.ago.strftime('%Y-%m-%d')
+      expect(field_value(submitter, 'Do you agree?')).to be_truthy
+      expect(field_value(submitter, 'First child')).to eq 'Boy'
+      expect(field_value(submitter, 'Signature')).to be_present
+      expect(field_value(submitter, 'House number')).to eq 123
+      expect(field_value(submitter, 'Colors')).to contain_exactly('Red', 'Blue')
+      expect(field_value(submitter, 'Gender')).to eq 'Male'
+      expect(field_value(submitter, 'Initials')).to be_present
+      expect(field_value(submitter, 'Avatar')).to be_present
+      expect(field_value(submitter, 'Attachment')).to be_present
+      expect(field_value(submitter, 'Cell code')).to eq '123'
+    end
+  end
+
+  context 'when the submitter form link is opened' do
+    let(:template) { create(:template, account:, author:, except_field_types: %w[phone payment stamp]) }
+    let(:submission) { create(:submission, template:) }
+    let(:submitter) do
+      create(:submitter, submission:, uuid: template.submitters.first['uuid'], account:, email: 'robin@example.com')
+    end
+
+    before do
+      visit submit_form_path(slug: submitter.slug)
+    end
+
+    it 'complete the form' do
+      # Text step
+      fill_in 'First Name', with: 'John'
+      click_button 'next'
+
+      # Date step
+      fill_in 'Birthday', with: I18n.l(20.years.ago, format: '%Y-%m-%d')
+      click_button 'next'
+
+      # Checkbox step
+      check 'Do you agree?'
+      click_button 'next'
+
+      # Radio step
+      choose 'Boy'
+      click_button 'next'
+
+      # Signature step
+      draw_canvas
+      click_button 'next'
+
+      # Number step
+      fill_in 'House number', with: '123'
+      click_button 'next'
+
+      # Multiple choice step
+      %w[Red Blue].each { |color| check color }
+      click_button 'next'
+
+      # Select step
+      select 'Male', from: 'Gender'
+      click_button 'next'
+
+      # Initials step
+      draw_canvas
+      click_button 'next'
+
+      # Image step
+      find('#dropzone').click
+      find('input[type="file"]', visible: false).attach_file(Rails.root.join('spec/fixtures/sample-image.png'))
+      click_button 'next'
+
+      # File step
+      find('#dropzone').click
+      find('input[type="file"]', visible: false).attach_file(Rails.root.join('spec/fixtures/sample-document.pdf'))
+      click_button 'next'
+
+      # Cell step
+      fill_in 'Cell code', with: '123'
+      click_on 'Complete'
+
+      expect(page).to have_button('Download')
+      expect(page).to have_content('Document has been signed!')
+
+      submitter.reload
+
+      expect(submitter.email).to eq 'robin@example.com'
+      expect(submitter.ip).to eq('127.0.0.1')
+      expect(submitter.ua).to be_present
+      expect(submitter.opened_at).to be_present
+      expect(submitter.completed_at).to be_present
+      expect(submitter.declined_at).to be_nil
+
+      expect(field_value(submitter, 'First Name')).to eq 'John'
+      expect(field_value(submitter, 'Birthday')).to eq 20.years.ago.strftime('%Y-%m-%d')
+      expect(field_value(submitter, 'Do you agree?')).to be_truthy
+      expect(field_value(submitter, 'First child')).to eq 'Boy'
+      expect(field_value(submitter, 'Signature')).to be_present
+      expect(field_value(submitter, 'House number')).to eq 123
+      expect(field_value(submitter, 'Colors')).to contain_exactly('Red', 'Blue')
+      expect(field_value(submitter, 'Gender')).to eq 'Male'
+      expect(field_value(submitter, 'Initials')).to be_present
+      expect(field_value(submitter, 'Avatar')).to be_present
+      expect(field_value(submitter, 'Attachment')).to be_present
+      expect(field_value(submitter, 'Cell code')).to eq '123'
+    end
+  end
+
+  context 'when the text step' do
+    let(:template) { create(:template, account:, author:, only_field_types: %w[text]) }
+    let(:submission) { create(:submission, template:) }
+    let(:submitter) do
+      create(:submitter, submission:, uuid: template.submitters.first['uuid'], account:)
+    end
+
+    it 'completes the form if the field is filled' do
+      visit submit_form_path(slug: submitter.slug)
+
+      input = find_field('First Name')
+
+      expect(input[:required]).to be_truthy
+      expect(input[:placeholder]).to eq 'Type here...'
+
+      fill_in 'First Name', with: 'Mary'
+      click_button 'Complete'
+
+      expect(page).to have_content('Form has been completed!')
+
+      submitter.reload
+
+      expect(submitter.completed_at).to be_present
+      expect(field_value(submitter, 'First Name')).to eq 'Mary'
+    end
+
+    it 'toggle multiple text button' do
+      visit submit_form_path(slug: submitter.slug)
+
+      input = find_field('First Name')
+
+      expect(input.tag_name).to eq('input')
+
+      find(:css, 'div[data-tip="Toggle Multiline Text"]').click
+
+      input = find_field('First Name')
+
+      expect(input.tag_name).to eq('textarea')
+      expect(page).not_to have_selector(:css, 'div[data-tip="Toggle Multiline Text"]')
+
+      fill_in 'First Name', with: 'Very long text'
+      click_button 'Complete'
+
+      expect(page).to have_content('Form has been completed!')
+
+      submitter.reload
+
+      expect(field_value(submitter, 'First Name')).to eq 'Very long text'
+      expect(submitter.completed_at).to be_present
+    end
+  end
+
+  context 'when the date step' do
+    let(:template) { create(:template, account:, author:, only_field_types: %w[date]) }
+    let(:submission) { create(:submission, template:) }
+    let(:submitter) do
+      create(:submitter, submission:, uuid: template.submitters.first['uuid'], account:)
+    end
+
+    it 'completes the form if the field is filled' do
+      visit submit_form_path(slug: submitter.slug)
+
+      input = find_field('Birthday')
+
+      expect(input[:required]).to be_truthy
+
+      fill_in 'Birthday', with: I18n.l(25.years.ago, format: '%Y-%m-%d')
+      click_button 'Complete'
+
+      expect(page).to have_content('Form has been completed!')
+
+      submitter.reload
+
+      expect(submitter.completed_at).to be_present
+      expect(field_value(submitter, 'Birthday')).to eq 25.years.ago.strftime('%Y-%m-%d')
+    end
+
+    it 'pre-fills the current date into the form field' do
+      visit submit_form_path(slug: submitter.slug)
+
+      input = find_field('Birthday')
+
+      expect(input[:value]).to eq ''
+
+      click_button 'Set Today'
+
+      input = find_field('Birthday')
+
+      expect(input[:value]).to eq Time.zone.now.strftime('%Y-%m-%d')
+
+      click_button 'Complete'
+
+      expect(page).to have_content('Form has been completed!')
+
+      submitter.reload
+
+      expect(submitter.completed_at).to be_present
+      expect(field_value(submitter, 'Birthday')).to eq Time.zone.now.strftime('%Y-%m-%d')
+    end
+  end
+
+  context 'when the checkbox step' do
+    let(:template) { create(:template, account:, author:, only_field_types: %w[checkbox]) }
+    let(:submission) { create(:submission, template:) }
+    let(:submitter) do
+      create(:submitter, submission:, uuid: template.submitters.first['uuid'], account:)
+    end
+
+    it 'completes the form if the checkbox is checked' do
+      visit submit_form_path(slug: submitter.slug)
+
+      check 'Do you agree?'
+      click_button 'Complete'
+
+      expect(page).to have_content('Form has been completed!')
+
+      submitter.reload
+
+      expect(submitter.completed_at).to be_present
+      expect(field_value(submitter, 'Do you agree?')).to be true
+    end
+  end
+
+  context 'when the radio step' do
+    let(:template) { create(:template, account:, author:, only_field_types: %w[radio]) }
+    let(:submission) { create(:submission, template:) }
+    let(:submitter) do
+      create(:submitter, submission:, uuid: template.submitters.first['uuid'], account:)
+    end
+
+    it 'completes the form if the checkbox is checked' do
+      visit submit_form_path(slug: submitter.slug)
+
+      %w[Girl Boy].map { |v| find_field(v) }.each { |input| expect(input[:required]).to be_truthy }
+
+      choose 'Boy'
+      click_button 'Complete'
+
+      expect(page).to have_content('Form has been completed!')
+
+      submitter.reload
+
+      expect(submitter.completed_at).to be_present
+      expect(field_value(submitter, 'First child')).to eq 'Boy'
+    end
+  end
+
+  context 'when the signature step' do
+    let(:template) { create(:template, account:, author:, only_field_types: %w[signature]) }
+    let(:submission) { create(:submission, template:) }
+    let(:submitter) do
+      create(:submitter, submission:, uuid: template.submitters.first['uuid'], account:)
+    end
+
+    it 'completes the form if the canvas is drawn' do
+      visit submit_form_path(slug: submitter.slug)
+
+      find('#expand_form_button').click
+      draw_canvas
+      click_button 'Sign and Complete'
+
+      expect(page).to have_content('Document has been signed!')
+
+      submitter.reload
+
+      expect(submitter.completed_at).to be_present
+      expect(field_value(submitter, 'Signature')).to be_present
+    end
+
+    it 'completes the form if the canvas is typed' do
+      visit submit_form_path(slug: submitter.slug)
+
+      find('#expand_form_button').click
+      click_link 'Type'
+      fill_in 'signature_text_input', with: 'John Doe'
+      click_button 'Sign and Complete'
+
+      expect(page).to have_content('Document has been signed!')
+
+      submitter.reload
+
+      expect(submitter.completed_at).to be_present
+      expect(field_value(submitter, 'Signature')).to be_present
+    end
+  end
+
+  context 'when the number step' do
+    let(:template) { create(:template, account:, author:, only_field_types: %w[number]) }
+    let(:submission) { create(:submission, template:) }
+    let(:submitter) do
+      create(:submitter, submission:, uuid: template.submitters.first['uuid'], account:)
+    end
+
+    it 'completes the form if the field is filled' do
+      visit submit_form_path(slug: submitter.slug)
+
+      input = find_field('House number')
+
+      expect(input[:required]).to be_truthy
+      expect(input[:placeholder]).to eq 'Type here...'
+
+      fill_in 'House number', with: '4'
+      click_button 'Complete'
+
+      expect(page).to have_content('Form has been completed!')
+
+      submitter.reload
+
+      expect(submitter.completed_at).to be_present
+      expect(field_value(submitter, 'House number')).to eq 4
+    end
+  end
+
+  context 'when the multiple choice step' do
+    let(:template) { create(:template, account:, author:, only_field_types: %w[multiple]) }
+    let(:submission) { create(:submission, template:) }
+    let(:submitter) do
+      create(:submitter, submission:, uuid: template.submitters.first['uuid'], account:)
+    end
+
+    it 'completes the form if the multiple choice is checked' do
+      visit submit_form_path(slug: submitter.slug)
+
+      %w[Red Green].each { |color| check color }
+      click_button 'Complete'
+
+      expect(page).to have_content('Form has been completed!')
+
+      submitter.reload
+
+      expect(submitter.completed_at).to be_present
+      expect(field_value(submitter, 'Colors')).to contain_exactly('Red', 'Green')
+    end
+  end
+
+  context 'when the select step' do
+    let(:template) { create(:template, account:, author:, only_field_types: %w[select]) }
+    let(:submission) { create(:submission, template:) }
+    let(:submitter) do
+      create(:submitter, submission:, uuid: template.submitters.first['uuid'], account:)
+    end
+
+    it 'completes the form if the multiple choice is checked' do
+      visit submit_form_path(slug: submitter.slug)
+
+      select 'Female', from: 'Gender'
+
+      click_button 'Complete'
+
+      expect(page).to have_content('Form has been completed!')
+
+      submitter.reload
+
+      expect(submitter.completed_at).to be_present
+      expect(field_value(submitter, 'Gender')).to eq 'Female'
+    end
+  end
+
+  context 'when the initials step' do
+    let(:template) { create(:template, account:, author:, only_field_types: %w[initials]) }
+    let(:submission) { create(:submission, template:) }
+    let(:submitter) do
+      create(:submitter, submission:, uuid: template.submitters.first['uuid'], account:)
+    end
+
+    it 'completes the form if the canvas is typed' do
+      visit submit_form_path(slug: submitter.slug)
+
+      find('#expand_form_button').click
+      fill_in 'initials_text_input', with: 'John Doe'
+      click_button 'Complete'
+
+      expect(page).to have_content('Document has been signed!')
+
+      submitter.reload
+
+      expect(submitter.completed_at).to be_present
+      expect(field_value(submitter, 'Initials')).to be_present
+    end
+
+    it 'completes the form if the canvas is drawn' do
+      visit submit_form_path(slug: submitter.slug)
+
+      find('#expand_form_button').click
+      click_link 'Draw'
+      draw_canvas
+      click_button 'Complete'
+
+      expect(page).to have_content('Document has been signed!')
+
+      submitter.reload
+
+      expect(submitter.completed_at).to be_present
+      expect(field_value(submitter, 'Initials')).to be_present
+    end
+
+    it 'completes the form if the initials is uploaded' do
+      visit submit_form_path(slug: submitter.slug)
+
+      find('#expand_form_button').click
+      find('span[data-tip="Click to upload"]').click
+      find('input[type="file"]', visible: false).attach_file(Rails.root.join('spec/fixtures/sample-image.png'))
+      click_button 'Complete'
+
+      expect(page).to have_content('Document has been signed!')
+
+      submitter.reload
+
+      expect(submitter.completed_at).to be_present
+      expect(field_value(submitter, 'Initials')).to be_present
+    end
+  end
+
+  context 'when the image step' do
+    let(:template) { create(:template, account:, author:, only_field_types: %w[image]) }
+    let(:submission) { create(:submission, template:) }
+    let(:submitter) do
+      create(:submitter, submission:, uuid: template.submitters.first['uuid'], account:)
+    end
+
+    it 'completes the form if the image is uploaded' do
+      visit submit_form_path(slug: submitter.slug)
+
+      find('#expand_form_button').click
+      find('#dropzone').click
+      find('input[type="file"]', visible: false).attach_file(Rails.root.join('spec/fixtures/sample-image.png'))
+      click_button 'Complete'
+
+      expect(page).to have_content('Form has been completed!')
+
+      submitter.reload
+
+      expect(submitter.completed_at).to be_present
+      expect(field_value(submitter, 'Avatar')).to be_present
+    end
+  end
+
+  context 'when the file step' do
+    let(:template) { create(:template, account:, author:, only_field_types: %w[file]) }
+    let(:submission) { create(:submission, template:) }
+    let(:submitter) do
+      create(:submitter, submission:, uuid: template.submitters.first['uuid'], account:)
+    end
+
+    it 'completes the form if the file is uploaded' do
+      visit submit_form_path(slug: submitter.slug)
+
+      find('#expand_form_button').click
+      find('#dropzone').click
+      find('input[type="file"]', visible: false).attach_file(Rails.root.join('spec/fixtures/sample-document.pdf'))
+      click_button 'Complete'
+
+      expect(page).to have_content('Form has been completed!')
+
+      submitter.reload
+
+      expect(submitter.completed_at).to be_present
+      expect(field_value(submitter, 'Attachment')).to be_present
+    end
+  end
+
+  context 'when the cells step' do
+    let(:template) { create(:template, account:, author:, only_field_types: %w[cells]) }
+    let(:submission) { create(:submission, template:) }
+    let(:submitter) do
+      create(:submitter, submission:, uuid: template.submitters.first['uuid'], account:)
+    end
+
+    it 'completes the form if the field is filled' do
+      visit submit_form_path(slug: submitter.slug)
+
+      input = find_field('Cell code')
+
+      expect(input[:required]).to be_truthy
+      expect(input[:placeholder]).to eq 'Type here...'
+
+      fill_in 'Cell code', with: '456'
+      click_button 'Complete'
+
+      expect(page).to have_content('Form has been completed!')
+
+      submitter.reload
+
+      expect(submitter.completed_at).to be_present
+      expect(field_value(submitter, 'Cell code')).to eq '456'
+    end
+  end
+
+  it 'sends completed email' do
+    template = create(:template, account:, author:, only_field_types: %w[text signature])
+    submission = create(:submission, template:)
+    submitter = create(:submitter, submission:, uuid: template.submitters.first['uuid'], account:)
+
+    visit submit_form_path(slug: submitter.slug)
+
+    fill_in 'First Name', with: 'Adam'
+    click_on 'next'
+    click_link 'Type'
+    fill_in 'signature_text_input', with: 'Adam'
+
+    expect do
+      click_on 'Sign and Complete'
+    end.to change(ProcessSubmitterCompletionJob.jobs, :size).by(1)
+  end
+end

spec/system/submit_form_spec.rb

@@ -1,87 +0,0 @@
-# frozen_string_literal: true
-
-require 'rails_helper'
-
-RSpec.describe 'Submit Form' do
-  let(:account) { create(:account) }
-  let(:user) { create(:user, account:) }
-  let(:template) { create(:template, account:, author: user) }
-
-  before do
-    sign_in(user)
-  end
-
-  context 'when initialized by shared link' do
-    before do
-      visit start_form_path(slug: template.slug)
-    end
-
-    it 'shows start form page' do
-      expect(page).to have_content('You have been invited to submit a form')
-      expect(page).to have_content(template.name)
-      expect(page).to have_content("Invited by #{template.account.name}")
-    end
-
-    it 'complete the form' do
-      fill_in 'Email', with: 'john.dou@example.com'
-      click_button 'Start'
-
-      fill_in 'First Name', with: 'Adam'
-      click_on 'next'
-      click_on 'type_text_button'
-      fill_in 'signature_text_input', with: 'Adam'
-
-      expect do
-        click_on 'Sign and Complete'
-      end.not_to(change(Submitter, :count))
-
-      submitter = Submitter.find_by(email: 'john.dou@example.com')
-
-      expect(page).to have_button('Download')
-      expect(submitter.email).to eq('john.dou@example.com')
-      expect(submitter.ip).to eq('127.0.0.1')
-      expect(submitter.ua).to be_present
-      expect(submitter.opened_at).to be_present
-      expect(submitter.completed_at).to be_present
-      expect(submitter.values.values).to include('Adam')
-    end
-  end
-
-  context 'when initialized by shared email address' do
-    let(:submission) { create(:submission, template:, created_by_user: user) }
-    let(:submitters) { template.submitters.map { |s| create(:submitter, submission:, uuid: s['uuid']) } }
-    let(:submitter) { submitters.first }
-
-    before do
-      visit submit_form_path(slug: submitter.slug)
-    end
-
-    it 'completes the form' do
-      fill_in 'First Name', with: 'Sally'
-      click_on 'next'
-      click_on 'type_text_button'
-      fill_in 'signature_text_input', with: 'Sally'
-      click_on 'Sign and Complete'
-
-      submitter.reload
-
-      expect(page).to have_button('Download')
-      expect(submitter.ip).to eq('127.0.0.1')
-      expect(submitter.ua).to be_present
-      expect(submitter.opened_at).to be_present
-      expect(submitter.completed_at).to be_present
-      expect(submitter.values.values).to include('Sally')
-    end
-
-    it 'sends completed email' do
-      fill_in 'First Name', with: 'Adam'
-      click_on 'next'
-      click_on 'type_text_button'
-      fill_in 'signature_text_input', with: 'Adam'
-
-      expect do
-        click_on 'Sign and Complete'
-      end.to change(ProcessSubmitterCompletionJob.jobs, :size).by(1)
-    end
-  end
-end

spec/system/template_spec.rb

@@ -5,7 +5,7 @@ require 'rails_helper'
 RSpec.describe 'Template' do
   let!(:account) { create(:account) }
   let!(:user) { create(:user, account:) }
-  let!(:template) { create(:template, account:, author: user) }
+  let!(:template) { create(:template, account:, author: user, except_field_types: %w[phone payment]) }
 
   before do
     sign_in(user)