adjust payment step

.github/workflows/ci.yml

@@ -11,7 +11,7 @@ jobs:
       - name: Install Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3.3.1
+          ruby-version: 3.3.3
       - name: Cache gems
         uses: actions/cache@v1
         with:
@@ -35,7 +35,7 @@ jobs:
       - name: Install Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3.3.1
+          ruby-version: 3.3.3
       - name: Cache gems
         uses: actions/cache@v1
         with:
@@ -100,7 +100,7 @@ jobs:
       - name: Install Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3.3.1
+          ruby-version: 3.3.3
       - name: Set up Node
         uses: actions/setup-node@v1
         with:

Dockerfile

@@ -1,4 +1,4 @@
-FROM ruby:3.3.1-alpine as fonts
+FROM ruby:3.3.3-alpine as fonts
 
 WORKDIR /fonts
 
@@ -6,7 +6,7 @@ RUN apk --no-cache add fontforge wget && wget https://github.com/satbyy/go-noto-
 
 RUN fontforge -lang=py -c 'font1 = fontforge.open("FreeSans.ttf"); font2 = fontforge.open("NotoSansSymbols2-Regular.ttf"); font1.mergeFonts(font2); font1.generate("FreeSans.ttf")'
 
-FROM ruby:3.3.1-alpine as webpack
+FROM ruby:3.3.3-alpine as webpack
 
 ENV RAILS_ENV=production
 ENV NODE_ENV=production
@@ -32,7 +32,7 @@ COPY ./app/views ./app/views
 
 RUN echo "gem 'shakapacker'" > Gemfile && ./bin/shakapacker
 
-FROM ruby:3.3.1-alpine as app
+FROM ruby:3.3.3-alpine as app
 
 ENV RAILS_ENV=production
 ENV BUNDLE_WITHOUT="development:test"

Gemfile

@@ -2,7 +2,7 @@
 
 source 'https://rubygems.org'
 
-ruby '3.3.1'
+ruby '3.3.3'
 
 gem 'arabic-letter-connector', require: 'arabic-letter-connector/logic'
 gem 'aws-sdk-s3', require: false

Gemfile.lock

@@ -627,7 +627,7 @@ DEPENDENCIES
   webmock
 
 RUBY VERSION
-   ruby 3.3.1p55
+   ruby 3.3.3p89
 
 BUNDLED WITH
    2.5.3

app/controllers/api/submissions_controller.rb

@@ -44,7 +44,7 @@ module Api
         @submission.audit_trail_attachment = Submissions::GenerateAuditTrail.call(@submission)
       end
 
-      render json: Submissions::SerializeForApi.call(@submission, submitters)
+      render json: Submissions::SerializeForApi.call(@submission, submitters, params)
     end
 
     def create

app/controllers/templates_form_preview_controller.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+class TemplatesFormPreviewController < ApplicationController
+  PRELOAD_ALL_PAGES_AMOUNT = 200
+
+  layout 'form'
+
+  load_and_authorize_resource :template
+
+  def show
+    @submitter = Submitter.new(uuid: params[:uuid] || @template.submitters.first['uuid'],
+                               account: current_account,
+                               submission: @template.submissions.new(template_submitters: @template.submitters,
+                                                                     account: current_account))
+
+    @submitter.submission.submitters = @template.submitters.map { |item| Submitter.new(uuid: item['uuid']) }
+
+    ActiveRecord::Associations::Preloader.new(
+      records: [@submitter],
+      associations: [submission: [:template, { template_schema_documents: :blob }]]
+    ).call
+
+    total_pages =
+      @submitter.submission.template_schema_documents.sum { |e| e.metadata.dig('pdf', 'number_of_pages').to_i }
+
+    if total_pages < PRELOAD_ALL_PAGES_AMOUNT
+      ActiveRecord::Associations::Preloader.new(
+        records: @submitter.submission.template_schema_documents,
+        associations: [:blob, { preview_images_attachments: :blob }]
+      ).call
+    end
+
+    @attachments_index = ActiveStorage::Attachment.where(record: @submitter.submission.submitters, name: :attachments)
+                                                  .preload(:blob).index_by(&:uuid)
+
+    @form_configs = Submitters::FormConfigs.call(@submitter)
+  end
+end

app/javascript/application.js

@@ -124,6 +124,7 @@ safeRegisterElement('import-list', class extends HTMLElement {
 
     this.app = createApp(ImportList, {
       template: JSON.parse(this.dataset.template),
+      multitenant: this.dataset.multitenant === 'true',
       authenticityToken: document.querySelector('meta[name="csrf-token"]')?.content
     })
 

app/javascript/form.js

@@ -19,6 +19,9 @@ safeRegisterElement('submission-form', class extends HTMLElement {
       goToLast: this.dataset.goToLast === 'true',
       isDemo: this.dataset.isDemo === 'true',
       attribution: this.dataset.attribution !== 'false',
+      scrollPadding: this.dataset.scrollPadding || '-80px',
+      dryRun: this.dataset.dryRun === 'true',
+      expand: ['true', 'false'].includes(this.dataset.expand) ? this.dataset.expand === 'true' : null,
       withConfetti: this.dataset.withConfetti !== 'false',
       withDisclosure: this.dataset.withDisclosure === 'true',
       withTypedSignature: this.dataset.withTypedSignature !== 'false',

app/javascript/submission_form/area.vue

@@ -41,7 +41,8 @@
     <div
       v-if="isActive"
       ref="scrollToElem"
-      class="absolute -top-20"
+      class="absolute"
+      :style="{ top: scrollPadding }"
     />
     <img
       v-if="field.type === 'image' && image"
@@ -197,6 +198,11 @@ export default {
       required: false,
       default: false
     },
+    scrollPadding: {
+      type: String,
+      required: false,
+      default: '-80px'
+    },
     submittable: {
       type: Boolean,
       required: false,

app/javascript/submission_form/areas.vue

@@ -22,6 +22,7 @@
             :area="area"
             :submittable="true"
             :field-index="fieldIndex"
+            :scroll-padding="scrollPadding"
             :is-active="currentStep === step"
             :with-label="withLabel"
             :is-value-set="step.some((f) => f.uuid in values)"
@@ -53,6 +54,11 @@ export default {
       required: false,
       default: () => ({})
     },
+    scrollPadding: {
+      type: String,
+      required: false,
+      default: '-80px'
+    },
     attachmentsIndex: {
       type: Object,
       required: false,

app/javascript/submission_form/attachment_step.vue

@@ -52,6 +52,7 @@
       :message="`${t('upload')} ${field.name || t('files')}${field.required ? '' : ` (${t('optional')})`}`"
       :submitter-slug="submitterSlug"
       :multiple="true"
+      :dry-run="dryRun"
       @upload="onUpload"
     />
   </div>
@@ -80,6 +81,11 @@ export default {
       type: String,
       required: true
     },
+    dryRun: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     attachmentsIndex: {
       type: Object,
       required: false,

app/javascript/submission_form/dropzone.vue

@@ -65,6 +65,11 @@ export default {
       type: String,
       required: true
     },
+    dryRun: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     accept: {
       type: String,
       required: false,
@@ -107,6 +112,21 @@ export default {
         Array.from(files).map(async (file) => {
           const formData = new FormData()
 
+          if (this.dryRun) {
+            return new Promise((resolve) => {
+              const reader = new FileReader()
+
+              reader.readAsDataURL(file)
+
+              reader.onloadend = () => {
+                resolve({
+                  url: reader.result,
+                  uuid: Math.random().toString(),
+                  filename: file.name
+                })
+              }
+            })
+          } else {
             if (file.type === 'image/bmp') {
               file = await this.convertBmpToPng(file)
             }
@@ -121,6 +141,7 @@ export default {
             }).then(resp => resp.json()).then((data) => {
               return data
             })
+          }
         })).then((result) => {
         this.$emit('upload', result)
       }).finally(() => {

app/javascript/submission_form/form.vue

@@ -6,7 +6,8 @@
     :attachments-index="attachmentsIndex"
     :with-label="!isAnonymousChecboxes && showFieldNames"
     :current-step="currentStepFields"
-    @focus-step="[saveStep(), goToStep($event, false, true), currentField.type !== 'checkbox' ? isFormVisible = true : '']"
+    :scroll-padding="scrollPadding"
+    @focus-step="[saveStep(), currentField.type !== 'checkbox' ? isFormVisible = true : '', goToStep($event, false, true)]"
   />
   <FormulaFieldAreas
     v-if="formulaFields.length"
@@ -310,6 +311,7 @@
             :key="currentField.uuid"
             v-model="values[currentField.uuid]"
             :field="currentField"
+            :dry-run="dryRun"
             :attachments-index="attachmentsIndex"
             :submitter-slug="submitterSlug"
             :show-field-names="showFieldNames"
@@ -326,6 +328,7 @@
             :remember-signature="rememberSignature"
             :attachments-index="attachmentsIndex"
             :button-text="buttonText"
+            :dry-run="dryRun"
             :with-disclosure="withDisclosure"
             :with-qr-button="withQrButton"
             :submitter="submitter"
@@ -340,6 +343,7 @@
             :key="currentField.uuid"
             v-model="values[currentField.uuid]"
             :field="currentField"
+            :dry-run="dryRun"
             :previous-value="previousInitialsValue"
             :attachments-index="attachmentsIndex"
             :show-field-names="showFieldNames"
@@ -353,6 +357,7 @@
             v-else-if="currentField.type === 'file'"
             :key="currentField.uuid"
             v-model="values[currentField.uuid]"
+            :dry-run="dryRun"
             :field="currentField"
             :attachments-index="attachmentsIndex"
             :submitter-slug="submitterSlug"
@@ -423,7 +428,7 @@
         :completed-button="completedRedirectUrl ? {} : completedButton"
         :completed-message="completedRedirectUrl ? {} : completedMessage"
         :with-send-copy-button="withSendCopyButton && !completedRedirectUrl"
-        :with-download-button="withDownloadButton && !completedRedirectUrl"
+        :with-download-button="withDownloadButton && !completedRedirectUrl && !dryRun"
         :with-confetti="withConfetti"
         :can-send-email="canSendEmail && !!submitter.email"
         :submitter-slug="submitterSlug"
@@ -528,6 +533,11 @@ export default {
       type: Object,
       required: true
     },
+    scrollPadding: {
+      type: String,
+      required: false,
+      default: '-80px'
+    },
     canSendEmail: {
       type: Boolean,
       required: false,
@@ -864,12 +874,14 @@ export default {
     this.$nextTick(() => {
       this.recalculateButtonDisabledKey = Math.random()
 
+      if (!this.dryRun) {
         Promise.all([
           this.maybeTrackEmailClick(),
           this.maybeTrackSmsClick()
         ]).finally(() => {
           this.trackViewForm()
         })
+      }
     })
   },
   methods: {
@@ -1009,7 +1021,13 @@ export default {
       const currentFieldUuids = this.currentStepFields.map((f) => f.uuid)
       const currentFieldType = this.currentField.type
 
-      if (this.isCompleted) {
+      if (this.dryRun) {
+        currentFieldUuids.forEach((fieldUuid) => {
+          this.submittedValues[fieldUuid] = this.values[fieldUuid]
+        })
+
+        return Promise.resolve({})
+      } else if (this.isCompleted) {
         return Promise.resolve({})
       } else {
         return fetch(this.baseUrl + this.submitPath, {
@@ -1059,7 +1077,7 @@ export default {
         const formData = new FormData(this.$refs.form)
         const isLastStep = this.currentStep === this.stepFields.length - 1
 
-        if (isLastStep && !emptyRequiredField && !this.dryRun) {
+        if (isLastStep && !emptyRequiredField) {
           formData.append('completed', 'true')
         }
 

app/javascript/submission_form/i18n.js

@@ -9,7 +9,9 @@ const en = {
   scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scan the QR code with the camera app to open the form on mobile and draw your signature',
   date: 'Date',
   number: 'Number',
+  already_paid: 'Already paid',
   image: 'Image',
+  pay: 'Pay',
   take_photo: 'Take photo',
   number_phone_is_invalid: '{number} phone is invalid',
   file: 'File',
@@ -76,9 +78,11 @@ const es = {
   by_clicking_you_agree_to_the: 'Al hacer clic en "{button}", usted acepta el',
   electronic_signature_disclosure: 'Divulgación de Firma Electrónica',
   esignature_disclosure: 'Divulgación de eFirma',
+  already_paid: 'Ya pagado',
   minimize: 'Minimizar',
   text: 'Texto',
   signature: 'Firma',
+  pay: 'Pagar',
   initials: 'Iniciales',
   date: 'Fecha',
   number: 'Número',
@@ -148,12 +152,14 @@ const it = {
   electronic_signature_disclosure: 'Divulgazione della Firma Elettronica',
   esignature_disclosure: 'Divulgazione della eFirma',
   minimize: 'Minimizza',
+  already_paid: 'Pagato',
   text: 'Testo',
   signature: 'Firma',
   initials: 'Iniziali',
   date: 'Data',
   number: 'Numero',
   image: 'Immagine',
+  pay: 'Pagamento',
   file: 'File',
   select: 'Seleziona',
   checkbox: 'Casella di controllo',
@@ -218,6 +224,7 @@ const de = {
   by_clicking_you_agree_to_the: 'Durch Klicken auf "{button}" stimmen Sie zu, dass Sie die',
   electronic_signature_disclosure: 'Elektronische Unterschriftenoffenlegung',
   esignature_disclosure: 'eSignatur Offenlegung',
+  already_paid: 'Bereits bezahlt',
   minimize: 'Minimieren',
   text: 'Text',
   signature: 'Unterschrift',
@@ -225,6 +232,7 @@ const de = {
   date: 'Datum',
   number: 'Nummer',
   image: 'Bild',
+  pay: 'Bezahlen',
   file: 'Datei',
   select: 'Auswählen',
   checkbox: 'Checkbox',
@@ -291,8 +299,10 @@ const fr = {
   esignature_disclosure: 'Divulgation de la eSignature',
   minimize: 'Réduire',
   text: 'Texte',
+  already_paid: 'Déjà payé',
   signature: 'Signature',
   initials: 'Initiales',
+  pay: 'Payer',
   date: 'Date',
   number: 'Numéro',
   image: 'Image',
@@ -362,12 +372,14 @@ const pl = {
   esignature_disclosure: 'Ujawnienie ePodpisu',
   minimize: 'Zminimalizuj',
   text: 'Tekst',
+  already_paid: 'Już zapłacono',
   signature: 'Podpis',
   initials: 'Inicjały',
   date: 'Data',
   number: 'Numer',
   image: 'Obraz',
   file: 'Plik',
+  pay: 'Zapłać',
   select: 'Wybierz',
   checkbox: 'Pole wyboru',
   multiple: 'Wielokrotne',
@@ -433,11 +445,13 @@ const uk = {
   esignature_disclosure: 'Розголошення еПідпису',
   minimize: 'Зменшити',
   text: 'Текст',
+  already_paid: 'Вже оплачено',
   signature: 'Підпис',
   initials: 'Ініціали',
   date: 'Дата',
   number: 'Число',
   image: 'Зображення',
+  pay: 'Оплатити',
   file: 'Файл',
   select: 'Вибрати',
   checkbox: 'Прапорець',
@@ -502,6 +516,7 @@ const cs = {
   by_clicking_you_agree_to_the: 'Kliknutím na "{button}" souhlasíte s',
   electronic_signature_disclosure: 'Zveřejněním Elektronického Podpisu',
   esignature_disclosure: 'Zveřejnění ePodpisu',
+  already_paid: 'Už zaplaceno',
   minimize: 'Minimalizovat',
   text: 'Text',
   signature: 'Podpis',
@@ -509,6 +524,7 @@ const cs = {
   date: 'Datum',
   number: 'Číslo',
   image: 'Obrázek',
+  pay: 'Zaplatit',
   file: 'Soubor',
   select: 'Vybrat',
   checkbox: 'Zaškrtávací políčko',
@@ -573,6 +589,7 @@ const pt = {
   by_clicking_you_agree_to_the: 'Ao clicar em "{button}", você concorda com o',
   electronic_signature_disclosure: 'Divulgação de Assinatura Eletrônica',
   esignature_disclosure: 'Divulgação da eAssinatura',
+  already_paid: 'Já pago',
   minimize: 'Minimizar',
   text: 'Texto',
   signature: 'Assinatura',
@@ -580,6 +597,7 @@ const pt = {
   date: 'Data',
   number: 'Número',
   image: 'Imagem',
+  pay: 'Pagar',
   file: 'Arquivo',
   select: 'Selecionar',
   checkbox: 'Caixa',
@@ -646,12 +664,14 @@ const he = {
   esignature_disclosure: 'חשיפת ה-eחתימה',
   minimize: 'לקטן',
   text: 'טקסט',
+  already_paid: 'כבר שולם',
   signature: 'חתימה',
   initials: 'ראשי תיבות',
   date: 'תאריך',
   number: 'מספר',
   image: 'תמונה',
   file: 'קובץ',
+  pay: 'תשלום',
   select: 'בחר',
   checkbox: 'תיק בחירה',
   multiple: 'רב ערכים',
@@ -718,6 +738,7 @@ const nl = {
   esignature_disclosure: 'Openbaarmaking van eHandtekening',
   minimize: 'Minimaliseren',
   text: 'Tekst',
+  already_paid: 'Al betaald',
   signature: 'Handtekening',
   initials: 'Initialen',
   date: 'Datum',
@@ -728,6 +749,7 @@ const nl = {
   select: 'Selecteer',
   checkbox: 'Aankruisvakje',
   multiple: 'Meerdere',
+  pay: 'Betaal',
   radio: 'Radio',
   cells: 'Cellen',
   stamp: 'Stempel',
@@ -795,6 +817,7 @@ const ar = {
   number: 'رقم',
   image: 'صورة',
   take_photo: 'التقاط صورة',
+  pay: 'دفع',
   file: 'ملف',
   select: 'اختيار',
   checkbox: 'خانة اختيار',
@@ -860,11 +883,13 @@ const ko = {
   by_clicking_you_agree_to_the: '"{button}"를 클릭함으로써, 다음에 동의하게 됩니다',
   electronic_signature_disclosure: '전자 서명 공개',
   esignature_disclosure: '전자 서명 공개',
+  already_paid: '이미 지불됨',
   text: '텍스트',
   signature: '서명',
   initials: '이니셜',
   date: '날짜',
   number: '숫자',
+  pay: '급여',
   image: '이미지',
   take_photo: '사진 찍기',
   file: '파일',

app/javascript/submission_form/image_step.vue

@@ -37,6 +37,7 @@
     <FileDropzone
       :message="`${t('upload')} ${field.name || t('image')}${field.required ? '' : ` (${t('optional')})`}`"
       :submitter-slug="submitterSlug"
+      :dry-run="dryRun"
       :accept="'image/*'"
       @upload="onImageUpload"
     />
@@ -66,6 +67,11 @@ export default {
       required: false,
       default: true
     },
+    dryRun: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     submitterSlug: {
       type: String,
       required: true

app/javascript/submission_form/initials_step.vue

@@ -143,6 +143,11 @@ export default {
       type: Object,
       required: true
     },
+    dryRun: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     submitterSlug: {
       type: String,
       required: true
@@ -246,13 +251,28 @@ export default {
       const context = canvas.getContext('2d')
 
       const fontFamily = 'Arial'
-      const fontSize = '44px'
+      const initialFontSize = 50
       const fontStyle = 'italic'
       const fontWeight = ''
 
-      context.font = fontStyle + ' ' + fontWeight + ' ' + fontSize + ' ' + fontFamily
+      const setFontSize = (size) => {
-      context.textAlign = 'center'
+        context.font = `${fontStyle} ${fontWeight} ${size}px ${fontFamily}`
+      }
 
+      const adjustFontSizeToFit = (text, maxWidth, initialSize) => {
+        let size = initialSize
+
+        setFontSize(size)
+
+        while (context.measureText(text).width > maxWidth && size > 1) {
+          size -= 1
+          setFontSize(size)
+        }
+      }
+
+      adjustFontSizeToFit(e.target.value, canvas.width / scale, initialFontSize)
+
+      context.textAlign = 'center'
       context.clearRect(0, 0, canvas.width / scale, canvas.height / scale)
       context.fillText(e.target.value, canvas.width / 2 / scale, canvas.height / 2 / scale + 11)
     },
@@ -282,6 +302,20 @@ export default {
         cropCanvasAndExportToPNG(this.$refs.canvas).then(async (blob) => {
           const file = new File([blob], 'initials.png', { type: 'image/png' })
 
+          if (this.dryRun) {
+            const reader = new FileReader()
+
+            reader.readAsDataURL(file)
+
+            reader.onloadend = () => {
+              const attachment = { url: reader.result, uuid: Math.random().toString() }
+
+              this.$emit('attached', attachment)
+              this.$emit('update:model-value', attachment.uuid)
+
+              resolve(attachment)
+            }
+          } else {
             const formData = new FormData()
 
             formData.append('file', file)
@@ -297,6 +331,7 @@ export default {
 
               return resolve(attachment)
             })
+          }
         })
       })
     }

app/javascript/submission_form/payment_step.vue

@@ -3,8 +3,20 @@
     v-if="!modelValue && !sessionId"
     :for="field.uuid"
     class="label text-2xl mb-2"
-  >{{ field.name || defaultName }}
+  >
+    <MarkdownContent
+      v-if="field.title"
+      :string="field.title"
+    />
+    <template v-else>{{ field.name || defaultName }}</template>
   </label>
+  <div
+    v-if="field.description"
+    dir="auto"
+    class="mb-4 px-1"
+  >
+    <MarkdownContent :string="field.description" />
+  </div>
   <div>
     <input
       type="text"
@@ -17,7 +29,7 @@
       v-if="modelValue && !sessionId"
       class=" text-2xl mb-2"
     >
-      Already paid
+      {{ t('already_paid') }}
     </div>
     <div v-else>
       <button
@@ -60,11 +72,13 @@
 
 <script>
 import { IconBrandStripe, IconInnerShadowTop, IconLoader } from '@tabler/icons-vue'
+import MarkdownContent from './markdown_content'
 
 export default {
   name: 'PaymentStep',
   components: {
     IconBrandStripe,
+    MarkdownContent,
     IconInnerShadowTop,
     IconLoader
   },
@@ -105,7 +119,7 @@ export default {
         currency
       }).format(price)
 
-      return `Pay ${formattedPrice}`
+      return this.t('pay') + ' ' + formattedPrice
     }
   },
   mounted () {

app/javascript/submission_form/signature_step.vue

@@ -264,6 +264,11 @@ export default {
       required: false,
       default: true
     },
+    dryRun: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     withDisclosure: {
       type: Boolean,
       required: false,
@@ -450,13 +455,28 @@ export default {
       const context = canvas.getContext('2d')
 
       const fontFamily = 'Dancing Script'
-      const fontSize = '38px'
+      const initialFontSize = 44
       const fontStyle = 'italic'
       const fontWeight = ''
 
-      context.font = fontStyle + ' ' + fontWeight + ' ' + fontSize + ' ' + fontFamily
+      const setFontSize = (size) => {
-      context.textAlign = 'center'
+        context.font = `${fontStyle} ${fontWeight} ${size}px ${fontFamily}`
+      }
 
+      const adjustFontSizeToFit = (text, maxWidth, initialSize) => {
+        let size = initialSize
+
+        setFontSize(size)
+
+        while (context.measureText(text).width > maxWidth && size > 1) {
+          size -= 1
+          setFontSize(size)
+        }
+      }
+
+      adjustFontSizeToFit(e.target.value, canvas.width / scale, initialFontSize)
+
+      context.textAlign = 'center'
       context.clearRect(0, 0, canvas.width / scale, canvas.height / scale)
       context.fillText(e.target.value, canvas.width / 2 / scale, canvas.height / 2 / scale + 11)
     },
@@ -563,6 +583,20 @@ export default {
         cropCanvasAndExportToPNG(this.$refs.canvas, { errorOnTooSmall: true }).then(async (blob) => {
           const file = new File([blob], 'signature.png', { type: 'image/png' })
 
+          if (this.dryRun) {
+            const reader = new FileReader()
+
+            reader.readAsDataURL(file)
+
+            reader.onloadend = () => {
+              const attachment = { url: reader.result, uuid: Math.random().toString() }
+
+              this.$emit('attached', attachment)
+              this.$emit('update:model-value', attachment.uuid)
+
+              resolve(attachment)
+            }
+          } else {
             const formData = new FormData()
 
             formData.append('file', file)
@@ -581,6 +615,7 @@ export default {
 
               return resolve(attachment)
             })
+          }
         }).catch((error) => {
           if (error.message === 'Image too small' && this.field.required === false) {
             return resolve({})

app/javascript/template_builder/area.vue

@@ -338,6 +338,7 @@ export default {
       isShowDescriptionModal: false,
       isResize: false,
       isDragged: false,
+      isMoved: false,
       renderDropdown: false,
       isNameFocus: false,
       textOverflowChars: 0,
@@ -690,6 +691,10 @@ export default {
       this.$emit('start-drag')
     },
     touchDrag (e) {
+      if (!this.editable) {
+        return
+      }
+
       const page = this.$parent.$refs.mask.previousSibling
       const rect = page.getBoundingClientRect()
 
@@ -731,6 +736,12 @@ export default {
       this.$emit('start-drag')
     },
     mouseMove (e) {
+      if (!this.editable) {
+        return
+      }
+
+      this.isMoved = true
+
       const page = this.$parent.$refs.mask.previousSibling
       const rect = page.getBoundingClientRect()
 
@@ -741,11 +752,12 @@ export default {
       this.$el.getRootNode().removeEventListener('mousemove', this.mouseMove)
       this.$el.getRootNode().removeEventListener('mouseup', this.stopMouseMove)
 
-      if (this.isDragged) {
+      if (this.isMoved) {
         this.save()
       }
 
       this.isDragged = false
+      this.isMoved = false
 
       this.$emit('stop-drag')
     },

app/javascript/template_builder/builder.vue

@@ -86,9 +86,12 @@
               {{ t('send') }}
             </span>
           </a>
-          <button
+          <span
             v-if="editable"
-            class="base-button"
+            class="flex"
+          >
+            <button
+              class="base-button !rounded-r-none !pr-2"
               :class="{ disabled: isSaving }"
               v-bind="isSaving ? { disabled: true } : {}"
               @click.prevent="onSaveClick"
@@ -106,6 +109,32 @@
                 {{ t('save') }}
               </span>
             </button>
+            <div class="dropdown dropdown-end">
+              <label
+                tabindex="0"
+                class="base-button !rounded-l-none !pl-1 !pr-2 !border-l-neutral-500"
+              >
+                <span class="text-sm align-text-top">
+                  <IconChevronDown class="w-5 h-5 flex-shrink-0" />
+                </span>
+              </label>
+              <ul
+                tabindex="0"
+                class="dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box text-right"
+              >
+                <li>
+                  <a
+                    :href="`/templates/${template.id}/form`"
+                    data-turbo="false"
+                    class="flex items-center justify-center space-x-2"
+                  >
+                    <IconEye class="w-6 h-6 flex-shrink-0" />
+                    <span class="whitespace-nowrap">Save and Preview</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </span>
           <a
             v-else
             :href="`/templates/${template.id}`"
@@ -321,7 +350,7 @@ import Contenteditable from './contenteditable'
 import DocumentPreview from './preview'
 import DocumentControls from './controls'
 import MobileFields from './mobile_fields'
-import { IconUsersPlus, IconDeviceFloppy, IconWritingSign, IconInnerShadowTop, IconInfoCircle } from '@tabler/icons-vue'
+import { IconUsersPlus, IconDeviceFloppy, IconChevronDown, IconEye, IconWritingSign, IconInnerShadowTop, IconInfoCircle } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 import { ref, computed } from 'vue'
 import { en as i18nEn } from './i18n'
@@ -343,6 +372,8 @@ export default {
     IconInnerShadowTop,
     Contenteditable,
     IconUsersPlus,
+    IconChevronDown,
+    IconEye,
     IconDeviceFloppy
   },
   provide () {
@@ -796,8 +827,50 @@ export default {
         event.preventDefault()
 
         this.pasteField()
+      } else if (this.selectedAreaRef.value && ['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'].includes(event.key) && document.activeElement === document.body) {
+        event.preventDefault()
+
+        this.handleAreaArrows(event)
       }
     },
+    handleAreaArrows (event) {
+      if (!this.editable) {
+        return
+      }
+
+      const area = this.selectedAreaRef.value
+      const documentRef = this.documentRefs.find((e) => e.document.uuid === area.attachment_uuid)
+      const page = documentRef.pageRefs[area.page].$refs.image
+      const rect = page.getBoundingClientRect()
+      const diff = (event.shiftKey ? 5.0 : 1.0)
+
+      if (event.key === 'ArrowRight' && event.altKey) {
+        area.w = Math.min(Math.max(area.w + diff / rect.width, 0), 1 - area.x)
+      } else if (event.key === 'ArrowLeft' && event.altKey) {
+        area.w = Math.min(Math.max(area.w - diff / rect.width, 0), 1 - area.x)
+      } else if (event.key === 'ArrowUp' && event.altKey) {
+        area.h = Math.min(Math.max(area.h - diff / rect.height, 0), 1 - area.y)
+      } else if (event.key === 'ArrowDown' && event.altKey) {
+        area.h = Math.min(Math.max(area.h + diff / rect.height, 0), 1 - area.y)
+      } else if (event.key === 'ArrowRight') {
+        area.x = Math.min(Math.max(area.x + diff / rect.width, 0), 1 - area.w)
+      } else if (event.key === 'ArrowLeft') {
+        area.x = Math.min(Math.max(area.x - diff / rect.width, 0), 1 - area.w)
+      } else if (event.key === 'ArrowUp') {
+        area.y = Math.min(Math.max(area.y - diff / rect.height, 0), 1 - area.h)
+      } else if (event.key === 'ArrowDown') {
+        area.y = Math.min(Math.max(area.y + diff / rect.height, 0), 1 - area.h)
+      }
+
+      this.debouncedSave()
+    },
+    debouncedSave () {
+      clearTimeout(this._saveTimeout)
+
+      this._saveTimeout = setTimeout(() => {
+        this.save()
+      }, 700)
+    },
     removeArea (area) {
       const field = this.template.fields.find((f) => f.areas?.includes(area))
 

app/javascript/template_builder/field.vue

@@ -93,6 +93,7 @@
             v-if="field.type === 'payment'"
             :field="field"
             @click-condition="isShowConditionsModal = true"
+            @click-description="isShowDescriptionModal = true"
           />
           <span
             v-else

app/javascript/template_builder/fields.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="withStickySubmitters ? 'sticky top-0 z-10' : ''">
+  <div :class="withStickySubmitters ? 'sticky top-0 z-[1]' : ''">
     <FieldSubmitter
       :model-value="selectedSubmitter.uuid"
       class="roles-dropdown w-full rounded-lg"

app/javascript/template_builder/import_list.vue

@@ -146,14 +146,14 @@
         <input
           name="submissions_json"
           hidden
-          :value="JSON.stringify(submissionsData.slice(0, 1100))"
+          :value="multitenant ? JSON.stringify(submissionsData.slice(0, 1100)) : JSON.stringify(submissionsData)"
         >
       </div>
       <div
         class="px-3 border-y py-2 border-base-300 text-center w-full text-sm font-semibold"
       >
         Total entries: {{ submissionsData.length }}
-        <template v-if="submissionsData.length >= 1000">
+        <template v-if="multitenant && submissionsData.length >= 1000">
           / 1000
         </template>
       </div>
@@ -239,6 +239,11 @@ export default {
       type: Object,
       required: true
     },
+    multitenant: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     authenticityToken: {
       type: String,
       required: false,
@@ -269,7 +274,11 @@ export default {
 
             if (['name', 'email', 'phone', 'external_id'].includes(mapping.field_name.toLowerCase())) {
               submittersIndex[mapping.submitter_uuid][mapping.field_name.toLowerCase()] = row[mapping.column_index]
-            } else {
+            }
+
+            const fieldType = this.fieldTypesIndex[mapping.submitter_uuid][mapping.field_name]
+
+            if (fieldType && fieldType !== 'phone') {
               submittersIndex[mapping.submitter_uuid].fields.push({
                 name: mapping.field_name, default_value: row[mapping.column_index], readonly: true
               })
@@ -306,6 +315,17 @@ export default {
     submitters () {
       return this.template.submitters
     },
+    fieldTypesIndex () {
+      return this.template.fields.reduce((acc, field) => {
+        acc[field.submitter_uuid] ||= {}
+
+        if (field.name) {
+          acc[field.submitter_uuid][field.name] = field.type
+        }
+
+        return acc
+      }, {})
+    },
     columns () {
       return this.table[0]
     },

app/javascript/template_builder/payment_settings.vue

@@ -150,6 +150,19 @@
         >Learn more</a>
       </div>
       <hr>
+      <li class="mt-1">
+        <label
+          class="label-text cursor-pointer text-center w-full flex items-center"
+          @click="$emit('click-description')"
+        >
+          <IconInfoCircle
+            width="18"
+          />
+          <span class="text-sm">
+            {{ t('description') }}
+          </span>
+        </label>
+      </li>
       <li class="mt-1">
         <label
           class="label-text cursor-pointer text-center w-full flex items-center"
@@ -168,7 +181,7 @@
 </template>
 
 <script>
-import { IconSettings, IconCircleCheck, IconBrandStripe, IconInnerShadowTop, IconRouteAltLeft } from '@tabler/icons-vue'
+import { IconSettings, IconCircleCheck, IconInfoCircle, IconBrandStripe, IconInnerShadowTop, IconRouteAltLeft } from '@tabler/icons-vue'
 import { ref } from 'vue'
 
 const isConnected = ref(false)
@@ -179,6 +192,7 @@ export default {
     IconSettings,
     IconCircleCheck,
     IconRouteAltLeft,
+    IconInfoCircle,
     IconInnerShadowTop,
     IconBrandStripe
   },
@@ -189,7 +203,7 @@ export default {
       required: true
     }
   },
-  emits: ['click-condition'],
+  emits: ['click-condition', 'click-description'],
   data () {
     return {
       isLoading: false

app/views/shared/_meta.html.erb

@@ -9,7 +9,10 @@
 <meta property="og:type" content="website">
 <meta property="og:url" content="<%= root_url %>">
 <meta property="og:site_name" content="DocuSeal">
-<% unless content_for(:disable_image_preview) %>
+<% if content_for(:disable_image_preview) %>
+  <meta property="og:image" content="">
+  <meta name="twitter:image" content="">
+<% else %>
   <meta property="og:image" content="<%= image_pack_url('images/preview.png') %>">
   <meta property="og:image:width" content="800">
   <meta property="og:image:height" content="800">

app/views/submit_form/_banner.html.erb

@@ -1,3 +1,3 @@
 <div class="flex mt-4">
-  <%= render 'docuseal_logo' %>
+  <%= render 'submit_form/docuseal_logo' %>
 </div>

app/views/submit_form/_submission_form.html.erb

@@ -1,3 +1,3 @@
 <% data_attachments = attachments_index.values.select { |e| e.record_id == submitter.id }.to_json(only: %i[uuid], methods: %i[url filename content_type]) %>
 <% data_fields = (submitter.submission.template_fields || submitter.submission.template.fields).select { |f| f['submitter_uuid'] == submitter.uuid }.to_json %>
-<submission-form data-is-demo="<%= Docuseal.demo? %>" data-with-confetti="<%= configs[:with_confetti] %>" data-completed-redirect-url="<%= submitter.preferences['completed_redirect_url'] %>" data-completed-message="<%= configs[:completed_message].to_json %>" data-completed-button="<%= configs[:completed_button].to_json %>" data-go-to-last="<%= submitter.preferences.key?('go_to_last') ? submitter.preferences['go_to_last'] : submitter.opened_at? %>" data-submitter="<%= submitter.to_json(only: %i[uuid slug name phone email]) %>" data-can-send-email="<%= Accounts.can_send_emails?(submitter.submission.account) %>" data-attachments="<%= data_attachments %>" data-fields="<%= data_fields %>" data-values="<%= submitter.values.to_json %>" data-with-typed-signature="<%= configs[:with_typed_signature] %>" data-previous-signature-value="<%= local_assigns[:signature_attachment]&.uuid %>" data-remember-signature="<%= configs[:prefill_signature] %>"></submission-form>
+<submission-form data-is-demo="<%= Docuseal.demo? %>" data-with-confetti="<%= configs[:with_confetti] %>" data-completed-redirect-url="<%= submitter.preferences['completed_redirect_url'] %>" data-completed-message="<%= configs[:completed_message].to_json %>" data-completed-button="<%= configs[:completed_button].to_json %>" data-go-to-last="<%= submitter.preferences.key?('go_to_last') ? submitter.preferences['go_to_last'] : submitter.opened_at? %>" data-submitter="<%= submitter.to_json(only: %i[uuid slug name phone email]) %>" data-can-send-email="<%= Accounts.can_send_emails?(submitter.submission.account) %>" data-attachments="<%= data_attachments %>" data-fields="<%= data_fields %>" data-values="<%= submitter.values.to_json %>" data-with-typed-signature="<%= configs[:with_typed_signature] %>" data-previous-signature-value="<%= local_assigns[:signature_attachment]&.uuid %>" data-remember-signature="<%= configs[:prefill_signature] %>" data-dry-run="<%= local_assigns[:dry_run] %>" data-expand="<%= local_assigns[:expand] %>" data-scroll-padding="<%= local_assigns[:scroll_padding] %>"></submission-form>

app/views/submit_form/show.html.erb

@@ -7,7 +7,7 @@
   <div id="scrollbox">
     <div class="mx-auto block pb-72" style="max-width: 1000px">
       <%# flex block w-full sticky top-0 z-50 space-x-2 items-center bg-yellow-100 p-2 border-y border-yellow-200 %>
-      <%= render 'banner' %>
+      <%= local_assigns[:banner_html] || render('submit_form/banner') %>
       <% (@submitter.submission.template_schema || @submitter.submission.template.schema).each do |item| %>
         <% document = @submitter.submission.template_schema_documents.find { |a| a.uuid == item['attachment_uuid'] } %>
         <% document_annots_index = document.metadata.dig('pdf', 'annotations')&.group_by { |e| e['page'] } || {} %>
@@ -41,7 +41,7 @@
 <div class="fixed bottom-0 w-full h-0 z-20">
   <div class="mx-auto" style="max-width: 1000px">
     <div class="relative md:mx-32">
-      <%= render 'submission_form', attachments_index: @attachments_index, submitter: @submitter, signature_attachment: @signature_attachment, configs: @form_configs %>
+      <%= render 'submit_form/submission_form', attachments_index: @attachments_index, submitter: @submitter, signature_attachment: @signature_attachment, configs: @form_configs, dry_run: local_assigns[:dry_run], expand: local_assigns[:expand], scroll_padding: local_assigns[:scroll_padding] %>
     </div>
   </div>
 </div>

app/views/templates_form_preview/show.html.erb

@@ -0,0 +1,24 @@
+<% banner_html = capture do %>
+  <div class="sticky top-0 z-50 bg-base-100 py-2 px-2 flex items-center" style="margin: 0px -8px -16px -8px">
+    <div class="text-xl md:text-3xl font-semibold focus:text-clip" style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+      <%= @template.name %>
+    </div>
+    <div class="flex items-center" style="margin-left: 20px; flex-shrink: 0">
+      <% if @template.submitters.size > 1 %>
+        <form action="<%= template_form_path(@template) %>" method="get" class="mr-3">
+          <select onchange="this.form.submit()" name="uuid" class="select base-input text-center font-normal" style="width: 180px; flex-shrink: 0;">
+            <% @template.submitters.each do |submitter| %>
+              <%= tag.option(value: submitter['uuid'], selected: submitter['uuid'] == @submitter.uuid) do %>
+                <%= submitter['name'] %>
+              <% end %>
+            <% end %>
+          </select>
+        </form>
+      <% end %>
+      <a href="<%= edit_template_path(@template) %>" class="base-button" data-turbo="false" style="flex-shrink: 0; padding: 0px 24px;">
+        Exit Preview
+      </a>
+    </div>
+  </div>
+<% end %>
+<%= render template: 'submit_form/show', locals: { dry_run: true, expand: false, banner_html:, scroll_padding: '-120px' } %>

config/routes.rb

@@ -83,6 +83,7 @@ Rails.application.routes.draw do
     resources :submissions, only: %i[new create]
     resource :folder, only: %i[edit update], controller: 'templates_folders'
     resource :preview, only: %i[show], controller: 'templates_preview'
+    resource :form, only: %i[show], controller: 'templates_form_preview'
     resource :code_modal, only: %i[show], controller: 'templates_code_modal'
     resource :preferences, only: %i[show create], controller: 'templates_preferences'
     resources :submissions_export, only: %i[index new]

docker-compose.yml

@@ -1,5 +1,3 @@
-version: '3'
-
 services:
   app:
     depends_on:

lib/submissions/generate_result_attachments.rb

@@ -247,10 +247,30 @@ module Submissions
             cell_width = area['cell_w'] * width
 
             TextUtils.maybe_rtl_reverse(value).chars.each_with_index do |char, index|
+              next if char.blank?
+
               text = HexaPDF::Layout::TextFragment.create(char, font: pdf.fonts.add(FONT_NAME),
                                                                 font_size:)
 
-              cell_layouter.fit([text], cell_width, area['h'] * height)
+              line_height = layouter.fit([text], cell_width, height).lines.first.height
+
+              if preferences_font_size.blank? && line_height > (area['h'] * height)
+                text = HexaPDF::Layout::TextFragment.create(char,
+                                                            font: pdf.fonts.add(FONT_NAME),
+                                                            font_size: (font_size / 1.4).to_i)
+
+                line_height = layouter.fit([text], cell_width, height).lines.first.height
+              end
+
+              if preferences_font_size.blank? && line_height > (area['h'] * height)
+                text = HexaPDF::Layout::TextFragment.create(char,
+                                                            font: pdf.fonts.add(FONT_NAME),
+                                                            font_size: (font_size / 1.9).to_i)
+
+                line_height = layouter.fit([text], cell_width, height).lines.first.height
+              end
+
+              cell_layouter.fit([text], cell_width, [line_height, area['h'] * height].max)
                            .draw(canvas, ((area['x'] * width) + (cell_width * index)),
                                  height - (area['y'] * height))
             end

lib/submissions/serialize_for_api.rb

@@ -18,7 +18,7 @@ module Submissions
 
     module_function
 
-    def call(submission, submitters = nil)
+    def call(submission, submitters = nil, params = {})
       submitters ||= submission.submitters.preload(documents_attachments: :blob, attachments_attachments: :blob)
 
       serialized_submitters = submitters.map { |submitter| Submitters::SerializeForApi.call(submitter) }
@@ -32,6 +32,10 @@ module Submissions
       if submitters.all?(&:completed_at?)
         last_submitter = submitters.max_by(&:completed_at)
 
+        if params[:include].to_s.include?('combined_document_url')
+          json[:combined_document_url] = build_combined_url(submitters.max_by(&:completed_at), submission)
+        end
+
         json[:documents] = serialized_submitters.find { |e| e['id'] == last_submitter.id }['documents']
         json[:status] = 'completed'
         json[:completed_at] = last_submitter.completed_at
@@ -45,5 +49,14 @@ module Submissions
 
       json
     end
+
+    def build_combined_url(submitter, submission)
+      return unless submitter.completed_at?
+
+      attachment = submission.combined_document_attachment
+      attachment ||= Submissions::GenerateCombinedAttachment.call(submitter)
+
+      ActiveStorage::Blob.proxy_url(attachment.blob)
+    end
   end
 end

lib/submitters/create_stamp_attachment.rb

@@ -89,6 +89,9 @@ module Submitters
 
       digitally_signed_by = I18n.t(:digitally_signed_by, locale: submitter.submission.account.locale)
 
+      name = ERB::Util.html_escape(name)
+      role = ERB::Util.html_escape(role)
+
       text = %(<span size="90">#{digitally_signed_by}:\n<b>#{name}</b>\n#{role}#{time} #{timezone}</span>)
 
       Vips::Image.text(text, width: WIDTH, height: HEIGHT, wrap: :'word-char')

lib/submitters/normalize_values.rb

@@ -11,6 +11,9 @@ module Submitters
     UnknownSubmitterName = Class.new(BaseError)
     UnableToDownload = Class.new(BaseError)
 
+    TRUE_VALUES = ['1', 'true', true, 'TRUE', 'True', 'yes', 'YES', 'Yes'].freeze
+    FALSE_VALUES = ['0', 'false', false, 'FALSE', 'False', 'no', 'NO', 'No'].freeze
+
     module_function
 
     def call(template, values, submitter_name: nil, for_submitter: nil, throw_errors: false)
@@ -50,11 +53,25 @@ module Submitters
     end
 
     def normalize_value(field, value)
-      if field['type'] == 'text' && value.present?
+      if field['type'] == 'checkbox'
+        return true if TRUE_VALUES.include?(value)
+        return false if FALSE_VALUES.include?(value)
+      end
+
+      return nil if value.blank?
+
+      if field['type'] == 'text'
         value.to_s
-      elsif field['type'] == 'number' && value.present?
+      elsif field['type'] == 'number'
         (value.to_f % 1).zero? ? value.to_i : value.to_f
-      elsif field['type'] == 'date' && value.present? && value != '{{date}}'
+      elsif field['type'] == 'date' && value != '{{date}}'
+        normalize_date(field, value)
+      else
+        value
+      end
+    end
+
+    def normalize_date(field, value)
       if value.is_a?(Integer)
         Time.zone.at(value.to_s.first(10).to_i).to_date.to_s
       elsif value.gsub(/\w/, '0') == field.dig('preferences', 'format').to_s.gsub(/\w/, '0')
@@ -62,9 +79,6 @@ module Submitters
       else
         Date.parse(value).to_s
       end
-      else
-        value
-      end
     rescue Date::Error => e
       Rollbar.warning(e) if defined?(Rollbar)
 

lib/submitters/serialize_for_webhook.rb

@@ -67,7 +67,7 @@ module Submitters
     end
 
     def fetch_field_value(field, value, attachments_index)
-      if field['type'].in?(%w[image signature initials stamp])
+      if field['type'].in?(%w[image signature initials stamp payment])
         rails_storage_proxy_url(attachments_index[value])
       elsif field['type'] == 'file'
         Array.wrap(value).compact_blank.filter_map { |e| rails_storage_proxy_url(attachments_index[e]) }

lib/templates/find_acro_fields.rb

@@ -5,6 +5,7 @@ module Templates
     PDF_CONTENT_TYPE = 'application/pdf'
 
     FIELD_NAME_REGEXP = /\A(?=.*\p{L})[\p{L}\d\s]+\z/
+    SKIP_FIELD_DESCRIPTION = %w[undefined].freeze
 
     module_function
 
@@ -102,14 +103,18 @@ module Templates
 
       field_name = field_name&.encode('utf-8', invalid: :replace, undef: :replace, replace: '')
 
+      attrs = { name: field_name.to_s }
+      attrs[:description] = field[:TU] if field[:TU].present? &&
+                                          field[:TU] != field.full_field_name &&
+                                          !field[:TU].in?(SKIP_FIELD_DESCRIPTION)
+
       if field.field_type == :Btn && field.concrete_field_type == :radio_button && field[:Opt].present?
         selected_option_index = (field.allowed_values || []).find_index(field.field_value)
         selected_option = field[:Opt][selected_option_index] if selected_option_index
 
         {
-          name: field_name.to_s,
+          **attrs,
           type: 'radio',
-          description: field[:TU],
           options: build_options(field[:Opt], 'radio'),
           default_value: selected_option
         }
@@ -120,55 +125,48 @@ module Templates
         return {} if field.allowed_values.include?(:BBox)
 
         {
-          name: field_name.to_s,
+          **attrs,
           type: 'radio',
-          description: field[:TU],
           options: build_options(field.allowed_values, 'radio'),
           default_value: selected_option
         }
       elsif field.field_type == :Btn && field.concrete_field_type == :check_box
         {
-          name: field_name.to_s,
+          **attrs,
           type: 'checkbox',
-          description: field[:TU],
           default_value: field.field_value.present?
         }
       elsif field.field_type == :Ch &&
             %i[combo_box editable_combo_box].include?(field.concrete_field_type) && field[:Opt].present?
         {
-          name: field_name.to_s,
+          **attrs,
           type: 'select',
-          description: field[:TU],
           options: build_options(field[:Opt]),
           default_value: field.field_value
         }
       elsif field.field_type == :Ch && field.concrete_field_type == :multi_select && field[:Opt].present?
         {
-          name: field_name.to_s,
+          **attrs,
           type: 'multiple',
-          description: field[:TU],
           options: build_options(field[:Opt], 'multiple'),
           default_value: field.field_value
         }
       elsif field.field_type == :Tx && field.concrete_field_type == :comb_text_field
         {
-          name: field_name.to_s,
+          **attrs,
           type: 'cells',
-          description: field[:TU],
           default_value: field.field_value
         }
       elsif field.field_type == :Tx
         {
-          name: field_name.to_s,
+          **attrs,
           type: 'text',
-          description: field[:TU],
           default_value: field.field_value
         }
       elsif field.field_type == :Sig
         {
-          name: field_name.to_s,
+          **attrs,
-          type: 'signature',
+          type: 'signature'
-          description: field[:TU]
         }
       else
         {}