fix rubocop

.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:

.rubocop.yml

@@ -11,6 +11,7 @@ AllCops:
     - bin/*
     - vendor/**/*
   TargetRubyVersion: '3.3'
+  SuggestExtensions: false
 
 Metrics/BlockLength:
   Exclude:

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

@@ -341,8 +341,8 @@ GEM
     os (1.1.4)
     package_json (0.1.0)
     pagy (8.1.2)
-    parallel (1.24.0)
-    parser (3.3.1.0)
+    parallel (1.25.1)
+    parser (3.3.4.0)
       ast (~> 2.4.1)
       racc
     pg (1.5.6)
@@ -419,7 +419,7 @@ GEM
       psych (>= 4.0.0)
     redis-client (0.22.0)
       connection_pool
-    regexp_parser (2.9.0)
+    regexp_parser (2.9.2)
     reline (0.5.7)
       io-console (~> 0.5)
     representable (3.2.0)
@@ -432,7 +432,8 @@ GEM
       actionpack (>= 5.2)
       railties (>= 5.2)
     retriable (3.1.2)
-    rexml (3.2.6)
+    rexml (3.3.2)
+      strscan
     rotp (6.3.0)
     rqrcode (2.2.0)
       chunky_png (~> 1.0)
@@ -455,19 +456,19 @@ GEM
       rspec-mocks (~> 3.13)
       rspec-support (~> 3.13)
     rspec-support (3.13.1)
-    rubocop (1.63.3)
+    rubocop (1.65.0)
       json (~> 2.3)
       language_server-protocol (>= 3.17.0)
       parallel (~> 1.10)
       parser (>= 3.3.0.2)
       rainbow (>= 2.2.2, < 4.0)
-      regexp_parser (>= 1.8, < 3.0)
+      regexp_parser (>= 2.4, < 3.0)
       rexml (>= 3.2.5, < 4.0)
       rubocop-ast (>= 1.31.1, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 2.4.0, < 3.0)
-    rubocop-ast (1.31.2)
-      parser (>= 3.3.0.4)
+    rubocop-ast (1.31.3)
+      parser (>= 3.3.1.0)
     rubocop-capybara (2.20.0)
       rubocop (~> 1.41)
     rubocop-factory_bot (2.25.1)
@@ -524,6 +525,7 @@ GEM
     stringio (3.1.0)
     strip_attributes (1.13.0)
       activemodel (>= 3.0, < 8.0)
+    strscan (3.1.0)
     thor (1.3.1)
     timeout (0.4.1)
     trailblazer-option (0.1.2)
@@ -627,7 +629,7 @@ DEPENDENCIES
   webmock
 
 RUBY VERSION
-   ruby 3.3.1p55
+   ruby 3.3.3p89
 
 BUNDLED WITH
    2.5.3

app/controllers/api/api_base_controller.rb

@@ -39,12 +39,17 @@ module Api
 
     private
 
-    def paginate(relation)
-      result = relation.order(id: :desc)
+    def paginate(relation, field: :id)
+      result = relation.order(field => :desc)
                        .limit([params.fetch(:limit, DEFAULT_LIMIT).to_i, MAX_LIMIT].min)
 
-      result = result.where(id: ...params[:after].to_i) if params[:after].present?
-      result = result.where(id: (params[:before].to_i + 1)...) if params[:before].present?
+      if field == :id
+        result = result.where(id: ...params[:after].to_i) if params[:after].present?
+        result = result.where(id: (params[:before].to_i + 1)...) if params[:before].present?
+      else
+        result = result.where(field => ...params[:after]) if params[:after].present?
+        result = result.where(field => (params[:before] + 1)...) if params[:before].present?
+      end
 
       result
     end

app/controllers/api/form_events_controller.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Api
+  class FormEventsController < ApiBaseController
+    load_and_authorize_resource :submitter, parent: false
+
+    def index
+      submitters = @submitters.where.not(completed_at: nil)
+
+      params[:after] = Time.zone.at(params[:after].to_i) if params[:after].present?
+      params[:before] = Time.zone.at(params[:before].to_i) if params[:before].present?
+
+      submitters = paginate(
+        submitters.preload(template: :folder, submission: [:submitters, { audit_trail_attachment: :blob }],
+                           documents_attachments: :blob, attachments_attachments: :blob),
+        field: :completed_at
+      )
+
+      render json: {
+        data: submitters.map do |s|
+                {
+                  event_type: 'form.completed',
+                  timestamp: s.completed_at,
+                  data: Submitters::SerializeForWebhook.call(s)
+                }
+              end,
+        pagination: {
+          count: submitters.size,
+          next: submitters.last&.completed_at&.to_i,
+          prev: submitters.first&.completed_at&.to_i
+        }
+      }
+    end
+  end
+end

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
@@ -75,13 +75,7 @@ module Api
         end
       end
 
-      json = submissions.flat_map do |submission|
-        submission.submitters.map do |s|
-          Submitters::SerializeForApi.call(s, with_documents: false, with_urls: true)
-        end
-      end
-
-      render json:
+      render json: build_create_json(submissions)
     rescue Submitters::NormalizeValues::BaseError => e
       Rollbar.warning(e) if defined?(Rollbar)
 
@@ -102,6 +96,18 @@ module Api
 
     private
 
+    def build_create_json(submissions)
+      json = submissions.flat_map do |submission|
+        submission.submitters.map do |s|
+          Submitters::SerializeForApi.call(s, with_documents: false, with_urls: true, params:)
+        end
+      end
+
+      json = { submitters: json } if request.path.ends_with?('/init')
+
+      json
+    end
+
     def create_submissions(template, params)
       is_send_email = !params[:send_email].in?(['false', false])
 
@@ -121,7 +127,6 @@ module Api
           template:,
           user: current_user,
           source: :api,
-          mark_as_sent: is_send_email,
           submitters_order: params[:submitters_order] || params[:order] || 'preserved',
           submissions_attrs:,
           params:

app/controllers/api/submitters_controller.rb

@@ -23,7 +23,9 @@ module Api
       )
 
       render json: {
-        data: submitters.map { |s| Submitters::SerializeForApi.call(s, with_template: true, with_events: true) },
+        data: submitters.map do |s|
+                Submitters::SerializeForApi.call(s, with_template: true, with_events: true, params:)
+              end,
         pagination: {
           count: submitters.size,
           next: submitters.last&.id,
@@ -35,7 +37,7 @@ module Api
     def show
       Submissions::EnsureResultGenerated.call(@submitter) if @submitter.completed_at?
 
-      render json: Submitters::SerializeForApi.call(@submitter, with_template: true, with_events: true)
+      render json: Submitters::SerializeForApi.call(@submitter, with_template: true, with_events: true, params:)
     end
 
     def update
@@ -73,7 +75,8 @@ module Api
 
       render json: Submitters::SerializeForApi.call(@submitter, with_template: false,
                                                                 with_urls: true,
-                                                                with_events: false)
+                                                                with_events: false,
+                                                                params:)
     end
 
     def submitter_params

app/controllers/api/templates_clone_controller.rb

@@ -7,6 +7,11 @@ module Api
     def create
       authorize!(:manage, @template)
 
+      ActiveRecord::Associations::Preloader.new(
+        records: [@template],
+        associations: [schema_documents: :preview_images_attachments]
+      ).call
+
       cloned_template = Templates::Clone.call(
         @template,
         author: current_user,
@@ -18,11 +23,11 @@ module Api
       cloned_template.source = :api
       cloned_template.save!
 
-      Templates::CloneAttachments.call(template: cloned_template, original_template: @template)
+      schema_documents = Templates::CloneAttachments.call(template: cloned_template, original_template: @template)
 
       SendTemplateCreatedWebhookRequestJob.perform_async('template_id' => cloned_template.id)
 
-      render json: Templates::SerializeForApi.call(cloned_template)
+      render json: Templates::SerializeForApi.call(cloned_template, schema_documents)
     end
   end
 end

app/controllers/api/tools_controller.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Api
+  class ToolsController < ApiBaseController
+    skip_authorization_check
+
+    def merge
+      files = params[:files] || []
+
+      return render json: { error: 'Files are required' }, status: :unprocessable_entity if files.blank?
+      return render json: { error: 'At least 2 files are required' }, status: :unprocessable_entity if files.size < 2
+
+      render json: {
+        data: Base64.encode64(PdfUtils.merge(files.map { |base64| StringIO.new(Base64.decode64(base64)) }).string)
+      }
+    end
+  end
+end

app/controllers/api/users_controller.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Api
+  class UsersController < ApiBaseController
+    authorize_resource :current_user
+
+    def show
+      render json: current_user.as_json(only: %i[id first_name last_name email])
+    end
+  end
+end

app/controllers/submissions_controller.rb

@@ -39,7 +39,6 @@ class SubmissionsController < ApplicationController
                                            user: current_user,
                                            source: :invite,
                                            submitters_order: params[:preserve_order] == '1' ? 'preserved' : 'random',
-                                           mark_as_sent: params[:send_email] == '1',
                                            submissions_attrs: submissions_params[:submission].to_h.values,
                                            params: params.merge('send_completed_email' => true))
       end
@@ -54,11 +53,22 @@ class SubmissionsController < ApplicationController
   end
 
   def destroy
-    @submission.update!(archived_at: Time.current)
+    notice =
+      if params[:permanently].present?
+        @submission.destroy!
 
-    SendSubmissionArchivedWebhookRequestJob.perform_async('submission_id' => @submission.id)
+        Rollbar.info("Remove submission: #{@submission.id}") if defined?(Rollbar)
 
-    redirect_back(fallback_location: template_path(@submission.template), notice: 'Submission has been archived')
+        'Submission has been removed'
+      else
+        @submission.update!(archived_at: Time.current)
+
+        SendSubmissionArchivedWebhookRequestJob.perform_async('submission_id' => @submission.id)
+
+        'Submission has been archived'
+      end
+
+    redirect_back(fallback_location: template_path(@submission.template), notice:)
   end
 
   private

app/controllers/templates_controller.rb

@@ -27,7 +27,7 @@ class TemplatesController < ApplicationController
   def edit
     ActiveRecord::Associations::Preloader.new(
       records: [@template],
-      associations: [schema_documents: { preview_images_attachments: :blob }]
+      associations: [schema_documents: [:blob, { preview_images_attachments: :blob }]]
     ).call
 
     @template_data =
@@ -43,6 +43,11 @@ class TemplatesController < ApplicationController
 
   def create
     if @base_template
+      ActiveRecord::Associations::Preloader.new(
+        records: [@base_template],
+        associations: [schema_documents: :preview_images_attachments]
+      ).call
+
       @template = Templates::Clone.call(@base_template, author: current_user,
                                                         name: params.dig(:template, :name),
                                                         folder_name: params[:folder_name])

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/controllers/templates_preferences_controller.rb

@@ -22,6 +22,7 @@ class TemplatesPreferencesController < ApplicationController
       preferences: %i[bcc_completed request_email_subject request_email_body
                       documents_copy_email_subject documents_copy_email_body
                       documents_copy_email_enabled documents_copy_email_attach_audit
+                      completed_notification_email_attach_documents
                       completed_notification_email_subject completed_notification_email_body
                       completed_notification_email_enabled completed_notification_email_attach_audit]
     ).tap do |attrs|

app/controllers/templates_uploads_controller.rb

@@ -15,11 +15,13 @@ class TemplatesUploadsController < ApplicationController
     documents = Templates::CreateAttachments.call(@template, url_params || params, extract_fields: true)
     schema = documents.map { |doc| { attachment_uuid: doc.uuid, name: doc.filename.base } }
 
-    fields = Templates::ProcessDocument.normalize_attachment_fields(@template, documents)
+    if @template.fields.blank?
+      @template.fields = Templates::ProcessDocument.normalize_attachment_fields(@template, documents)
 
-    schema.each { |item| item['pending_fields'] = true } if fields.present?
+      schema.each { |item| item['pending_fields'] = true } if @template.fields.present?
+    end
 
-    @template.update!(schema:, fields:)
+    @template.update!(schema:)
 
     SendTemplateCreatedWebhookRequestJob.perform_async('template_id' => @template.id)
 
@@ -56,7 +58,7 @@ class TemplatesUploadsController < ApplicationController
     file = ActionDispatch::Http::UploadedFile.new(
       tempfile:,
       filename: File.basename(
-        URI.decode_www_form_component(params[:filename].presence || params[:url])
+        URI.decode_www_form_component(params[:filename].presence || params[:url]), '.*'
       ),
       type: Marcel::MimeType.for(tempfile)
     )

app/controllers/webhook_settings_controller.rb

@@ -17,7 +17,8 @@ class WebhookSettingsController < ApplicationController
   def update
     submitter = current_account.submitters.where.not(completed_at: nil).order(:id).last
 
-    SendFormCompletedWebhookRequestJob.perform_async({ 'submitter_id' => submitter.id })
+    SendFormCompletedWebhookRequestJob.perform_async({ 'submitter_id' => submitter.id,
+                                                       'encrypted_config_id' => @encrypted_config.id })
 
     redirect_back(fallback_location: settings_webhooks_path, notice: 'Webhook request has been sent.')
   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

@@ -6,7 +6,7 @@
     :class="{ 'text-[1.5vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars, 'cursor-default': !submittable, 'border border-red-100 bg-red-100 cursor-pointer': submittable, 'border border-red-100': !isActive && submittable, 'bg-opacity-80': !isActive && !isValueSet && submittable, 'field-area-active outline-red-500 outline-dashed outline-2 z-10': isActive && submittable, 'bg-opacity-40': (isActive || isValueSet) && submittable }"
   >
     <div
-      v-if="!isActive && !isValueSet && field.type !== 'checkbox' && submittable && !area.option_uuid"
+      v-if="(!withFieldPlaceholder || !field.name || field.type === 'cells') && !isActive && !isValueSet && field.type !== 'checkbox' && submittable && !area.option_uuid"
       class="absolute top-0 bottom-0 right-0 left-0 items-center justify-center h-full w-full"
     >
       <span
@@ -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"
@@ -64,7 +65,7 @@
       :src="initials.url"
     >
     <div
-      v-else-if="field.type === 'file' || field.type === 'payment'"
+      v-else-if="(field.type === 'file' || field.type === 'payment') && attachments.length"
       class="px-0.5 flex flex-col justify-center"
     >
       <a
@@ -159,7 +160,12 @@
       class="flex items-center px-0.5 w-full"
       :class="alignClasses[field.preferences?.align]"
     >
-      <span v-if="Array.isArray(modelValue)">
+      <span
+        v-if="field && field.name && withFieldPlaceholder && !modelValue && modelValue !== 0"
+        class="whitespace-pre-wrap text-gray-400"
+        :class="{ 'w-full': field.preferences?.align }"
+      >{{ field.name }}</span>
+      <span v-else-if="Array.isArray(modelValue)">
         {{ modelValue.join(', ') }}
       </span>
       <span v-else-if="field.type === 'date'">
@@ -197,6 +203,16 @@ export default {
       required: false,
       default: false
     },
+    scrollPadding: {
+      type: String,
+      required: false,
+      default: '-80px'
+    },
+    withFieldPlaceholder: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     submittable: {
       type: Boolean,
       required: false,
@@ -358,7 +374,7 @@ export default {
     modelValue () {
       this.$nextTick(() => {
         if (['date', 'text', 'number'].includes(this.field.type) && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > `${this.modelValue}`.length)) {
-          this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? `${this.modelValue}`.length : 0
+          this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? `${this.modelValue || (this.withFieldPlaceholder ? this.field.name : '')}`.length : 0
         }
       })
     }
@@ -366,7 +382,7 @@ export default {
   mounted () {
     this.$nextTick(() => {
       if (['date', 'text', 'number'].includes(this.field.type) && this.$refs.textContainer) {
-        this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? `${this.modelValue}`.length : 0
+        this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? `${this.modelValue || (this.withFieldPlaceholder ? this.field.name : '')}`.length : 0
       }
     })
   },

app/javascript/submission_form/areas.vue

@@ -22,8 +22,10 @@
             :area="area"
             :submittable="true"
             :field-index="fieldIndex"
+            :scroll-padding="scrollPadding"
+            :with-field-placeholder="withFieldPlaceholder"
             :is-active="currentStep === step"
-            :with-label="withLabel"
+            :with-label="withLabel && !withFieldPlaceholder"
             :is-value-set="step.some((f) => f.uuid in values)"
             :attachments-index="attachmentsIndex"
             @click="$emit('focus-step', step)"
@@ -53,6 +55,16 @@ export default {
       required: false,
       default: () => ({})
     },
+    withFieldPlaceholder: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    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,20 +112,36 @@ export default {
         Array.from(files).map(async (file) => {
           const formData = new FormData()
 
-          if (file.type === 'image/bmp') {
-            file = await this.convertBmpToPng(file)
+          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)
+            }
+
+            formData.append('file', file)
+            formData.append('submitter_slug', this.submitterSlug)
+            formData.append('name', 'attachments')
+
+            return fetch(this.baseUrl + '/api/attachments', {
+              method: 'POST',
+              body: formData
+            }).then(resp => resp.json()).then((data) => {
+              return data
+            })
           }
-
-          formData.append('file', file)
-          formData.append('submitter_slug', this.submitterSlug)
-          formData.append('name', 'attachments')
-
-          return fetch(this.baseUrl + '/api/attachments', {
-            method: 'POST',
-            body: formData
-          }).then(resp => resp.json()).then((data) => {
-            return data
-          })
         })).then((result) => {
         this.$emit('upload', result)
       }).finally(() => {

app/javascript/submission_form/form.vue

@@ -3,10 +3,12 @@
     ref="areas"
     :steps="stepFields"
     :values="values"
+    :with-field-placeholder="withFieldPlaceholder"
     :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 +312,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 +329,7 @@
             :remember-signature="rememberSignature"
             :attachments-index="attachmentsIndex"
             :button-text="buttonText"
+            :dry-run="dryRun"
             :with-disclosure="withDisclosure"
             :with-qr-button="withQrButton"
             :submitter="submitter"
@@ -340,6 +344,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 +358,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 +429,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 +534,11 @@ export default {
       type: Object,
       required: true
     },
+    scrollPadding: {
+      type: String,
+      required: false,
+      default: '-80px'
+    },
     canSendEmail: {
       type: Boolean,
       required: false,
@@ -538,6 +549,11 @@ export default {
       required: false,
       default: () => []
     },
+    withFieldPlaceholder: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     onComplete: {
       type: Function,
       required: false,
@@ -864,12 +880,14 @@ export default {
     this.$nextTick(() => {
       this.recalculateButtonDisabledKey = Math.random()
 
-      Promise.all([
-        this.maybeTrackEmailClick(),
-        this.maybeTrackSmsClick()
-      ]).finally(() => {
-        this.trackViewForm()
-      })
+      if (!this.dryRun) {
+        Promise.all([
+          this.maybeTrackEmailClick(),
+          this.maybeTrackSmsClick()
+        ]).finally(() => {
+          this.trackViewForm()
+        })
+      }
     })
   },
   methods: {
@@ -1009,7 +1027,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 +1083,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
-      context.textAlign = 'center'
+      const setFontSize = (size) => {
+        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,21 +302,36 @@ export default {
         cropCanvasAndExportToPNG(this.$refs.canvas).then(async (blob) => {
           const file = new File([blob], 'initials.png', { type: 'image/png' })
 
-          const formData = new FormData()
+          if (this.dryRun) {
+            const reader = new FileReader()
 
-          formData.append('file', file)
-          formData.append('submitter_slug', this.submitterSlug)
-          formData.append('name', 'attachments')
+            reader.readAsDataURL(file)
 
-          return fetch(this.baseUrl + '/api/attachments', {
-            method: 'POST',
-            body: formData
-          }).then((resp) => resp.json()).then((attachment) => {
-            this.$emit('attached', attachment)
-            this.$emit('update:model-value', attachment.uuid)
+            reader.onloadend = () => {
+              const attachment = { url: reader.result, uuid: Math.random().toString() }
 
-            return resolve(attachment)
-          })
+              this.$emit('attached', attachment)
+              this.$emit('update:model-value', attachment.uuid)
+
+              resolve(attachment)
+            }
+          } else {
+            const formData = new FormData()
+
+            formData.append('file', file)
+            formData.append('submitter_slug', this.submitterSlug)
+            formData.append('name', 'attachments')
+
+            return fetch(this.baseUrl + '/api/attachments', {
+              method: 'POST',
+              body: formData
+            }).then((resp) => resp.json()).then((attachment) => {
+              this.$emit('attached', attachment)
+              this.$emit('update:model-value', attachment.uuid)
+
+              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
@@ -39,7 +51,7 @@
         class="btn bg-[#7B73FF] text-white hover:bg-[#0A2540] text-lg w-full"
         :class="{ disabled: isCreatingCheckout }"
         :disabled="isCreatingCheckout"
-        @click.prevent="startCheckout"
+        @click.prevent="postCheckout"
       >
         <IconInnerShadowTop
           v-if="isCreatingCheckout"
@@ -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,13 +119,17 @@ export default {
         currency
       }).format(price)
 
-      return `Pay ${formattedPrice}`
+      return this.t('pay') + ' ' + formattedPrice
     }
   },
   mounted () {
     if (this.sessionId) {
       this.$emit('submit')
     }
+
+    if (!this.sessionId) {
+      this.postCheckout({ checkStatus: true })
+    }
   },
   methods: {
     async submit () {
@@ -144,7 +162,7 @@ export default {
         return Promise.resolve({})
       }
     },
-    startCheckout () {
+    postCheckout ({ checkStatus } = {}) {
       this.isCreatingCheckout = true
 
       fetch(this.baseUrl + '/api/stripe_payments', {
@@ -152,6 +170,7 @@ export default {
         body: JSON.stringify({
           submitter_slug: this.submitterSlug,
           field_uuid: this.field.uuid,
+          check_status: checkStatus,
           referer: document.location.href
         }),
         headers: { 'Content-Type': 'application/json' }

app/javascript/submission_form/signature_step.vue

@@ -156,7 +156,7 @@
         class="top-0 bottom-0 right-0 left-0 absolute bg-white rounded-2xl m-0.5"
       />
       <div
-        v-show="isShowQr"
+        v-if="isShowQr"
         class="top-0 bottom-0 right-0 left-0 absolute bg-base-content/10 rounded-2xl"
       >
         <div
@@ -172,13 +172,13 @@
         </div>
         <div class="flex items-center justify-center w-full h-full p-4">
           <div
-            v-if="withQrButton"
-            ref="qr"
             class="bg-white p-4 rounded-xl h-full"
           >
             <canvas
               ref="qrCanvas"
               class="h-full"
+              width="132"
+              height="132"
             />
           </div>
         </div>
@@ -264,6 +264,11 @@ export default {
       required: false,
       default: true
     },
+    dryRun: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     withDisclosure: {
       type: Boolean,
       required: false,
@@ -335,18 +340,6 @@ export default {
 
         this.$refs.canvas.getContext('2d').scale(scale, scale)
       }
-
-      if (this.withQrButton) {
-        import('qr-creator').then(({ default: Qr }) => {
-          Qr.render({
-            text: `${document.location.origin}/p/${this.submitterSlug}?f=${this.field.uuid.split('-')[0]}`,
-            radius: 0.0,
-            ecLevel: 'H',
-            background: null,
-            size: 132
-          }, this.$refs.qrCanvas)
-        })
-      }
     })
 
     if (this.$refs.canvas) {
@@ -401,6 +394,20 @@ export default {
     showQr () {
       this.isShowQr = true
 
+      this.$nextTick(() => {
+        import('qr-creator').then(({ default: Qr }) => {
+          if (this.$refs.qrCanvas) {
+            Qr.render({
+              text: `${document.location.origin}/p/${this.submitterSlug}?f=${this.field.uuid.split('-')[0]}`,
+              radius: 0.0,
+              ecLevel: 'H',
+              background: null,
+              size: 132
+            }, this.$refs.qrCanvas)
+          }
+        })
+      })
+
       this.startCheckSignature()
     },
     hideQr () {
@@ -450,13 +457,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
-      context.textAlign = 'center'
+      const setFontSize = (size) => {
+        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,24 +585,39 @@ export default {
         cropCanvasAndExportToPNG(this.$refs.canvas, { errorOnTooSmall: true }).then(async (blob) => {
           const file = new File([blob], 'signature.png', { type: 'image/png' })
 
-          const formData = new FormData()
+          if (this.dryRun) {
+            const reader = new FileReader()
 
-          formData.append('file', file)
-          formData.append('submitter_slug', this.submitterSlug)
-          formData.append('name', 'attachments')
-          formData.append('remember_signature', this.rememberSignature)
+            reader.readAsDataURL(file)
 
-          return fetch(this.baseUrl + '/api/attachments', {
-            method: 'POST',
-            body: formData
-          }).then((resp) => resp.json()).then((attachment) => {
-            this.$emit('attached', attachment)
-            this.$emit('update:model-value', attachment.uuid)
+            reader.onloadend = () => {
+              const attachment = { url: reader.result, uuid: Math.random().toString() }
 
-            this.maybeSetSignedUuid(attachment.signed_uuid)
+              this.$emit('attached', attachment)
+              this.$emit('update:model-value', attachment.uuid)
 
-            return resolve(attachment)
-          })
+              resolve(attachment)
+            }
+          } else {
+            const formData = new FormData()
+
+            formData.append('file', file)
+            formData.append('submitter_slug', this.submitterSlug)
+            formData.append('name', 'attachments')
+            formData.append('remember_signature', this.rememberSignature)
+
+            return fetch(this.baseUrl + '/api/attachments', {
+              method: 'POST',
+              body: formData
+            }).then((resp) => resp.json()).then((attachment) => {
+              this.$emit('attached', attachment)
+              this.$emit('update:model-value', attachment.uuid)
+
+              this.maybeSetSignedUuid(attachment.signed_uuid)
+
+              return resolve(attachment)
+            })
+          }
         }).catch((error) => {
           if (error.message === 'Image too small' && this.field.required === false) {
             return resolve({})

app/javascript/template_builder/area.vue

@@ -9,7 +9,7 @@
     <div
       v-if="isSelected || isDraw"
       class="top-0 bottom-0 right-0 left-0 absolute border border-1.5 pointer-events-none"
-      :class="borderColors[submitterIndex]"
+      :class="field.type === 'heading' ? '' : borderColors[submitterIndex]"
     />
     <div
       v-if="field.type === 'cells' && (isSelected || isDraw)"
@@ -19,7 +19,7 @@
         v-for="(cellW, index) in cells"
         :key="index"
         class="absolute top-0 bottom-0 border-r"
-        :class="borderColors[submitterIndex]"
+        :class="field.type === 'heading' ? '' : borderColors[submitterIndex]"
         :style="{ left: (cellW / area.w * 100) + '%' }"
       >
         <span
@@ -31,14 +31,14 @@
       </div>
     </div>
     <div
-      v-if="field?.type"
-      class="absolute bg-white rounded-t border overflow-visible whitespace-nowrap group-hover:flex group-hover:z-10"
-      :class="{ 'flex z-10': isNameFocus || isSelected, invisible: !isNameFocus && !isSelected }"
+      v-if="field?.type && (isSelected || isNameFocus)"
+      class="absolute bg-white rounded-t border overflow-visible whitespace-nowrap flex z-10"
       style="top: -25px; height: 25px"
       @mousedown.stop
       @pointerdown.stop
     >
       <FieldSubmitter
+        v-if="field.type != 'heading'"
         v-model="field.submitter_uuid"
         class="border-r"
         :compact="true"
@@ -61,7 +61,7 @@
       <span
         v-if="field.type !== 'checkbox' || field.name"
         ref="name"
-        :contenteditable="editable && !defaultField"
+        :contenteditable="editable && !defaultField && field.type !== 'heading'"
         dir="auto"
         class="pr-1 cursor-text outline-none block"
         style="min-width: 2px"
@@ -71,11 +71,11 @@
         @blur="onNameBlur"
       >{{ optionIndexText }} {{ (defaultField ? (field.title || field.name) : field.name) || defaultName }}</span>
       <div
-        v-if="isSettingsFocus || isContenteditable || (isNameFocus && !['checkbox', 'phone'].includes(field.type))"
+        v-if="isSettingsFocus || (isValueInput && field.type !== 'heading') || (isNameFocus && !['checkbox', 'phone'].includes(field.type))"
         class="flex items-center ml-1.5"
       >
         <input
-          v-if="!isContenteditable"
+          v-if="!isValueInput"
           :id="`required-checkbox-${field.uuid}`"
           v-model="field.required"
           type="checkbox"
@@ -83,14 +83,14 @@
           @mousedown.prevent
         >
         <label
-          v-if="!isContenteditable"
+          v-if="!isValueInput"
           :for="`required-checkbox-${field.uuid}`"
           class="label text-xs"
           @click.prevent="field.required = !field.required"
           @mousedown.prevent
         >{{ t('required') }}</label>
         <input
-          v-if="isContenteditable"
+          v-if="isValueInput"
           :id="`readonly-checkbox-${field.uuid}`"
           type="checkbox"
           class="checkbox checkbox-xs no-animation rounded"
@@ -99,14 +99,14 @@
           @mousedown.prevent
         >
         <label
-          v-if="isContenteditable"
+          v-if="isValueInput"
           :for="`readonly-checkbox-${field.uuid}`"
           class="label text-xs"
           @click.prevent="field.readonly = !(field.readonly ?? true)"
           @mousedown.prevent
         >{{ t('editable') }}</label>
         <span
-          v-if="field.type !== 'payment' && !isContenteditable"
+          v-if="field.type !== 'payment' && !isValueInput"
           class="dropdown dropdown-end"
           @mouseenter="renderDropdown = true"
           @touchstart="renderDropdown = true"
@@ -157,17 +157,19 @@
       </button>
     </div>
     <div
+      ref="touchValueTarget"
       class="flex items-center h-full w-full"
       dir="auto"
-      :class="[isContenteditable ? 'bg-opacity-50' : 'bg-opacity-80', bgColors[submitterIndex], isDefaultValuePresent || isContenteditable ? (alignClasses[field.preferences?.align] || '') : 'justify-center']"
+      :class="[isValueInput ? 'bg-opacity-50' : 'bg-opacity-80', field.type === 'heading' ? 'bg-gray-50' : bgColors[submitterIndex], isDefaultValuePresent || isValueInput || (withFieldPlaceholder && field.areas) ? (alignClasses[field.preferences?.align] || '') : 'justify-center']"
+      @click="focusValueInput"
     >
       <span
         v-if="field"
-        class="flex justify-center items-center space-x-1 h-full"
-        :class="{ 'w-full h-full': ['cells', 'checkbox'].includes(field.type) }"
+        class="flex justify-center items-center space-x-1"
+        :class="{ 'w-full': ['cells', 'checkbox'].includes(field.type), 'h-full': !isValueInput }"
       >
         <div
-          v-if="isDefaultValuePresent || isContenteditable"
+          v-if="isDefaultValuePresent || isValueInput || (withFieldPlaceholder && field.areas && field.type !== 'checkbox')"
           :class="{ 'w-full h-full': ['cells', 'checkbox'].includes(field.type), 'text-[1.5vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars }"
         >
           <div
@@ -181,7 +183,7 @@
               :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
             />
             <span
-              v-else-if="field.type === 'number' && !isContenteditable"
+              v-else-if="field.type === 'number' && !isValueInput && (field.default_value || field.default_value == 0)"
               class="whitespace-pre-wrap"
             >{{ formatNumber(field.default_value, field.preferences?.format) }}</span>
             <span
@@ -205,13 +207,13 @@
             <span
               v-else
               ref="defaultValue"
-              :contenteditable="isContenteditable"
+              :contenteditable="isValueInput"
               class="whitespace-pre-wrap outline-none empty:before:content-[attr(placeholder)] before:text-gray-400"
-              :class="{ 'cursor-text': isContenteditable }"
-              :placeholder="t('type_value')"
+              :class="{ 'cursor-text': isValueInput }"
+              :placeholder="withFieldPlaceholder && !isValueInput ? field.name || defaultName : t('type_value')"
               @blur="onDefaultValueBlur"
               @paste.prevent="onPaste"
-              @keydown.enter.prevent="onDefaultValueEnter"
+              @keydown.enter="onDefaultValueEnter"
             >{{ field.default_value }}</span>
           </div>
         </div>
@@ -225,11 +227,12 @@
       </span>
     </div>
     <div
-      v-if="!isContenteditable"
+      v-if="!isValueInput"
       ref="touchTarget"
       class="absolute top-0 bottom-0 right-0 left-0"
       :class="isDragged ? 'cursor-grab' : 'cursor-pointer'"
       @dblclick="maybeToggleDefaultValue"
+      @click="maybeToggleCheckboxValue"
     />
     <span
       v-if="field?.type && editable"
@@ -302,6 +305,11 @@ export default {
       type: Object,
       required: true
     },
+    inputMode: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     isDraw: {
       type: Boolean,
       required: false,
@@ -312,6 +320,11 @@ export default {
       required: false,
       default: null
     },
+    withFieldPlaceholder: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     defaultSubmitters: {
       type: Array,
       required: false,
@@ -338,6 +351,7 @@ export default {
       isShowDescriptionModal: false,
       isResize: false,
       isDragged: false,
+      isMoved: false,
       renderDropdown: false,
       isNameFocus: false,
       textOverflowChars: 0,
@@ -354,6 +368,9 @@ export default {
         return this.field?.default_value || this.field?.default_value === 0
       }
     },
+    isValueInput () {
+      return (this.field.type === 'heading' && this.isSelected) || this.isContenteditable || (this.inputMode && ['text', 'number', 'date'].includes(this.field.type))
+    },
     modalContainerEl () {
       return this.$el.getRootNode().querySelector('#docuseal_modal_container')
     },
@@ -480,16 +497,7 @@ export default {
       if (['text', 'number'].includes(this.field.type)) {
         this.isContenteditable = true
 
-        this.$nextTick(() => {
-          this.$refs.defaultValue.focus()
-
-          if (this.$refs.defaultValue.innerText.length) {
-            window.getSelection().collapse(
-              this.$refs.defaultValue.firstChild,
-              this.$refs.defaultValue.innerText.length
-            )
-          }
-        })
+        this.$nextTick(() => this.focusValueInput())
       } else if (this.field.type === 'checkbox') {
         this.field.readonly = !this.field.readonly
         this.field.default_value === true ? delete this.field.default_value : this.field.default_value = true
@@ -502,6 +510,26 @@ export default {
         this.save()
       }
     },
+    maybeToggleCheckboxValue () {
+      if (this.inputMode && this.field.type === 'checkbox') {
+        this.field.readonly = !this.field.readonly
+        this.field.default_value === true ? delete this.field.default_value : this.field.default_value = true
+
+        this.save()
+      }
+    },
+    focusValueInput (e) {
+      if (this.$refs.defaultValue !== document.activeElement) {
+        this.$refs.defaultValue.focus()
+
+        if (this.$refs.defaultValue.innerText.length && this.$refs.defaultValue !== e?.target) {
+          window.getSelection().collapse(
+            this.$refs.defaultValue.firstChild,
+            this.$refs.defaultValue.innerText.length
+          )
+        }
+      }
+    },
     formatNumber (number, format) {
       if (format === 'comma') {
         return new Intl.NumberFormat('en-US').format(number)
@@ -547,7 +575,7 @@ export default {
     onPaste (e) {
       const text = (e.clipboardData || window.clipboardData).getData('text/plain')
 
-      const selection = window.getSelection()
+      const selection = this.$el.getRootNode().getSelection()
 
       if (selection.rangeCount) {
         selection.deleteFromDocument()
@@ -571,6 +599,10 @@ export default {
         delete this.field.options
       }
 
+      if (['heading'].includes(this.field.type)) {
+        this.field.readonly = true
+      }
+
       if (['select', 'multiple', 'radio'].includes(this.field.type)) {
         this.field.options ||= [{ value: '', uuid: v4() }]
       }
@@ -632,7 +664,11 @@ export default {
       this.save()
     },
     onDefaultValueEnter (e) {
-      this.$refs.defaultValue.blur()
+      if (this.field.type !== 'heading') {
+        e.preventDefault()
+
+        this.$refs.defaultValue.blur()
+      }
     },
     onNameEnter (e) {
       this.$refs.name.blur()
@@ -651,24 +687,8 @@ export default {
         this.area.y = (e.offsetY - this.dragFrom.y) / e.target.clientHeight
       }
     },
-    startDrag (e) {
-      this.selectedAreaRef.value = this.area
-
-      if (!this.editable) {
-        return
-      }
-
-      const rect = e.target.getBoundingClientRect()
-
-      this.dragFrom = { x: e.clientX - rect.left, y: e.clientY - rect.top }
-
-      this.$el.getRootNode().addEventListener('mousemove', this.drag)
-      this.$el.getRootNode().addEventListener('mouseup', this.stopDrag)
-
-      this.$emit('start-drag')
-    },
     startTouchDrag (e) {
-      if (e.target !== this.$refs.touchTarget) {
+      if (e.target !== this.$refs.touchTarget && e.target !== this.$refs.touchValueTarget) {
         return
       }
 
@@ -690,6 +710,10 @@ export default {
       this.$emit('start-drag')
     },
     touchDrag (e) {
+      if (!this.editable) {
+        return
+      }
+
       const page = this.$parent.$refs.mask.previousSibling
       const rect = page.getBoundingClientRect()
 
@@ -709,11 +733,13 @@ export default {
       this.$emit('stop-drag')
     },
     startMouseMove (e) {
-      if (e.target !== this.$refs.touchTarget) {
+      if (e.target !== this.$refs.touchTarget && e.target !== this.$refs.touchValueTarget) {
         return
       }
 
-      document.activeElement?.blur()
+      if (document.activeElement !== this.$refs.defaultValue) {
+        document.activeElement?.blur()
+      }
 
       e.preventDefault()
 
@@ -723,6 +749,10 @@ export default {
 
       this.selectedAreaRef.value = this.area
 
+      if (this.field.type === 'heading') {
+        this.$nextTick(() => this.focusValueInput())
+      }
+
       this.dragFrom = { x: rect.left - e.clientX, y: rect.top - e.clientY }
 
       this.$el.getRootNode().addEventListener('mousemove', this.mouseMove)
@@ -731,6 +761,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 +777,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,26 +86,55 @@
               {{ t('send') }}
             </span>
           </a>
-          <button
+          <span
             v-if="editable"
-            class="base-button"
-            :class="{ disabled: isSaving }"
-            v-bind="isSaving ? { disabled: true } : {}"
-            @click.prevent="onSaveClick"
+            class="flex"
           >
-            <IconInnerShadowTop
-              v-if="isSaving"
-              width="22"
-              class="animate-spin"
-            />
-            <IconDeviceFloppy
-              v-else
-              width="22"
-            />
-            <span class="hidden md:inline">
-              {{ t('save') }}
-            </span>
-          </button>
+            <button
+              class="base-button !rounded-r-none !pr-2"
+              :class="{ disabled: isSaving }"
+              v-bind="isSaving ? { disabled: true } : {}"
+              @click.prevent="onSaveClick"
+            >
+              <IconInnerShadowTop
+                v-if="isSaving"
+                width="22"
+                class="animate-spin"
+              />
+              <IconDeviceFloppy
+                v-else
+                width="22"
+              />
+              <span class="hidden md:inline">
+                {{ 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}`"
@@ -148,7 +177,7 @@
           @change="save"
         />
         <div
-          class="sticky bottom-0 py-2"
+          class="sticky bottom-0 py-2 space-y-2"
           :style="{ backgroundColor }"
         >
           <Upload
@@ -157,6 +186,22 @@
             :template-id="template.id"
             @success="updateFromUpload"
           />
+          <button
+            v-if="sortedDocuments.length && editable && withAddPageButton"
+            id="add_blank_page_button"
+            class="btn btn-outline w-full"
+            @click.prevent="addBlankPage"
+          >
+            <IconInnerShadowTop
+              v-if="isLoadingBlankPage"
+              class="animate-spin w-5 h-5"
+            />
+            <IconPlus
+              v-else
+              class="w-5 h-5"
+            />
+            {{ t('add_blank_page') }}
+          </button>
         </div>
       </div>
       <div
@@ -167,12 +212,30 @@
           ref="documents"
           class="pr-3.5 pl-0.5"
         >
-          <Dropzone
-            v-if="!sortedDocuments.length && withUploadButton"
-            :template-id="template.id"
-            :accept-file-types="acceptFileTypes"
-            @success="updateFromUpload"
-          />
+          <template v-if="!sortedDocuments.length && (withUploadButton || withAddPageButton)">
+            <Dropzone
+              v-if="withUploadButton"
+              :template-id="template.id"
+              :accept-file-types="acceptFileTypes"
+              @success="updateFromUpload"
+            />
+            <button
+              v-if="withAddPageButton"
+              id="add_blank_page_button"
+              class="btn btn-outline w-full mt-4"
+              @click.prevent="addBlankPage"
+            >
+              <IconInnerShadowTop
+                v-if="isLoadingBlankPage"
+                class="animate-spin w-5 h-5"
+              />
+              <IconPlus
+                v-else
+                class="w-5 h-5"
+              />
+              {{ t('add_blank_page') }}
+            </button>
+          </template>
           <template v-else>
             <template
               v-for="document in sortedDocuments"
@@ -184,9 +247,11 @@
                 :selected-submitter="selectedSubmitter"
                 :document="document"
                 :is-drag="!!dragField"
+                :input-mode="inputMode"
                 :default-fields="[...defaultRequiredFields, ...defaultFields]"
                 :allow-draw="!onlyDefinedFields"
                 :default-submitters="defaultSubmitters"
+                :with-field-placeholder="withFieldPlaceholder"
                 :draw-field="drawField"
                 :draw-field-type="drawFieldType"
                 :editable="editable"
@@ -213,7 +278,7 @@
             </template>
             <div
               v-if="sortedDocuments.length && isBreakpointLg && editable"
-              class="pb-4"
+              class="pb-4 space-y-2"
             >
               <Upload
                 v-if="withUploadButton"
@@ -221,6 +286,22 @@
                 :accept-file-types="acceptFileTypes"
                 @success="updateFromUpload"
               />
+              <button
+                v-if="withAddPageButton"
+                id="add_blank_page_button"
+                class="btn btn-outline w-full mt-4"
+                @click.prevent="addBlankPage"
+              >
+                <IconInnerShadowTop
+                  v-if="isLoadingBlankPage"
+                  class="animate-spin w-5 h-5"
+                />
+                <IconPlus
+                  v-else
+                  class="w-5 h-5"
+                />
+                {{ t('add_blank_page') }}
+              </button>
             </div>
           </template>
         </div>
@@ -248,7 +329,7 @@
                 {{ t('cancel') }}
               </button>
               <a
-                v-if="!drawField && !drawOption && !['stamp', 'signature', 'initials'].includes(drawField?.type || drawFieldType)"
+                v-if="!drawField && !drawOption && !['stamp', 'signature', 'initials', 'heading'].includes(drawField?.type || drawFieldType)"
                 href="#"
                 class="link block mt-3 text-sm"
                 @click.prevent="[addField(drawFieldType), drawField = null, drawOption = null, withSelectedFieldType ? '' : drawFieldType = '', showDrawField = false]"
@@ -321,7 +402,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 { IconPlus, 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'
@@ -334,6 +415,7 @@ export default {
     Fields,
     IconInfoCircle,
     MobileDrawField,
+    IconPlus,
     IconWritingSign,
     MobileFields,
     Logo,
@@ -343,6 +425,8 @@ export default {
     IconInnerShadowTop,
     Contenteditable,
     IconUsersPlus,
+    IconChevronDown,
+    IconEye,
     IconDeviceFloppy
   },
   provide () {
@@ -374,6 +458,11 @@ export default {
       required: false,
       default: () => ({})
     },
+    withFieldPlaceholder: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     backgroundColor: {
       type: String,
       required: false,
@@ -384,11 +473,21 @@ export default {
       required: false,
       default: true
     },
+    inputMode: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     withHelp: {
       type: Boolean,
       required: false,
       default: true
     },
+    withAddPageButton: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     autosave: {
       type: Boolean,
       required: false,
@@ -535,6 +634,7 @@ export default {
     return {
       documentRefs: [],
       isBreakpointLg: false,
+      isLoadingBlankPage: false,
       isSaving: false,
       selectedSubmitter: null,
       showDrawField: false,
@@ -796,8 +896,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))
 
@@ -990,7 +1132,7 @@ export default {
           field.options = [{ value: '', uuid: v4() }]
         }
 
-        if (field.type === 'stamp') {
+        if (['stamp', 'heading'].includes(field.type)) {
           field.readonly = true
         }
 
@@ -1074,6 +1216,44 @@ export default {
       this.save()
 
       document.activeElement?.blur()
+
+      if (field.type === 'heading') {
+        this.$nextTick(() => {
+          const documentRef = this.documentRefs.find((e) => e.document.uuid === area.attachment_uuid)
+          const areaRef = documentRef.pageRefs[area.page].areaRefs.find((ref) => ref.area === this.selectedAreaRef.value)
+
+          areaRef.focusValueInput()
+        })
+      }
+    },
+    addBlankPage () {
+      this.isLoadingBlankPage = true
+
+      const canvas = document.createElement('canvas')
+
+      canvas.width = 816
+      canvas.height = 1056
+
+      const ctx = canvas.getContext('2d')
+
+      ctx.fillStyle = 'white'
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+      canvas.toBlob((blob) => {
+        const file = new File([blob], `Page ${this.template.schema.length + 1}.png`, { type: blob.type, lastModified: Date.now() })
+
+        const formData = new FormData()
+        formData.append('files[]', file)
+
+        this.baseFetch(`/templates/${this.template.id}/documents`, {
+          method: 'POST',
+          body: formData
+        }).then(async (resp) => {
+          this.updateFromUpload(await resp.json())
+        }).finally(() => {
+          this.isLoadingBlankPage = false
+        })
+      }, 'image/png')
     },
     updateFromUpload (data) {
       this.template.schema.push(...data.schema)

app/javascript/template_builder/contenteditable.vue

@@ -101,7 +101,7 @@ export default {
     onPaste (e) {
       const text = (e.clipboardData || window.clipboardData).getData('text/plain')
 
-      const selection = window.getSelection()
+      const selection = this.$el.getRootNode().getSelection()
 
       if (selection.rangeCount) {
         selection.deleteFromDocument()

app/javascript/template_builder/document.vue

@@ -4,11 +4,13 @@
       v-for="(image, index) in sortedPreviewImages"
       :key="image.id"
       :ref="setPageRefs"
+      :input-mode="inputMode"
       :number="index"
       :editable="editable"
       :areas="areasIndex[index]"
       :allow-draw="allowDraw"
       :is-drag="isDrag"
+      :with-field-placeholder="withFieldPlaceholder"
       :default-fields="defaultFields"
       :default-submitters="defaultSubmitters"
       :draw-field="drawField"
@@ -35,6 +37,11 @@ export default {
       type: Object,
       required: true
     },
+    inputMode: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     areasIndex: {
       type: Object,
       required: false,
@@ -45,6 +52,11 @@ export default {
       required: false,
       default: () => []
     },
+    withFieldPlaceholder: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     drawFieldType: {
       type: String,
       required: false,

app/javascript/template_builder/dropzone.vue

@@ -5,6 +5,7 @@
     @drop.prevent="onDropFiles"
   >
     <label
+      id="document_dropzone"
       class="w-full relative hover:bg-base-200/30 rounded-md border border-2 border-base-content/10 border-dashed"
       :for="inputId"
       :class="{ 'opacity-50': isLoading || isProcessing }"

app/javascript/template_builder/field.vue

@@ -14,7 +14,7 @@
         <div class="flex items-center p-1 space-x-1">
           <FieldType
             v-model="field.type"
-            :editable="editable && !defaultField"
+            :editable="editable && !defaultField && field.type != 'heading'"
             :button-width="20"
             :menu-classes="'mt-1.5'"
             :menu-style="{ backgroundColor: dropdownBgColor }"
@@ -24,7 +24,7 @@
           <Contenteditable
             ref="name"
             :model-value="(defaultField ? (field.title || field.name) : field.name) || defaultName"
-            :editable="editable && !defaultField"
+            :editable="editable && !defaultField && field.type != 'heading'"
             :icon-inline="true"
             :icon-width="18"
             :icon-stroke-width="1.6"
@@ -93,9 +93,10 @@
             v-if="field.type === 'payment'"
             :field="field"
             @click-condition="isShowConditionsModal = true"
+            @click-description="isShowDescriptionModal = true"
           />
           <span
-            v-else
+            v-else-if="field.type !== 'heading'"
             class="dropdown dropdown-end"
             @mouseenter="renderDropdown = true"
             @touchstart="renderDropdown = true"
@@ -356,9 +357,12 @@ export default {
       } else {
         const typeIndex = fields.filter((f) => f.type === field.type).indexOf(field)
 
-        const suffix = { multiple: this.t('select'), radio: this.t('group') }[field.type] || this.t('field')
-
-        return `${this.fieldNames[field.type]} ${suffix} ${typeIndex + 1}`
+        if (this.field.type === 'heading') {
+          return `${this.fieldNames[field.type]} ${typeIndex + 1}`
+        } else {
+          const suffix = { multiple: this.t('select'), radio: this.t('group') }[field.type] || this.t('field')
+          return `${this.fieldNames[field.type]} ${suffix} ${typeIndex + 1}`
+        }
       }
     },
     onNameFocus (e) {
@@ -416,6 +420,10 @@ export default {
         this.field.options ||= [{ value: '', uuid: v4() }]
       }
 
+      if (['heading'].includes(this.field.type)) {
+        this.field.readonly = true
+      }
+
       (this.field.areas || []).forEach((area) => {
         if (this.field.type === 'cells') {
           area.cell_w = area.w * 2 / Math.floor(area.w / area.h)

app/javascript/template_builder/field_type.vue

@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1 } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1, IconHeading } from '@tabler/icons-vue'
 
 export default {
   name: 'FiledTypeDropdown',
@@ -96,6 +96,7 @@ export default {
   computed: {
     fieldNames () {
       return {
+        heading: this.t('heading'),
         text: this.t('text'),
         signature: this.t('signature'),
         initials: this.t('initials'),
@@ -115,6 +116,7 @@ export default {
     },
     fieldIcons () {
       return {
+        heading: IconHeading,
         text: IconTextSize,
         signature: IconWritingSign,
         initials: IconLetterCaseUpper,
@@ -140,7 +142,7 @@ export default {
           return acc
         }, {})
       } else {
-        return this.fieldIcons
+        return Object.fromEntries(Object.entries(this.fieldIcons).filter(([key]) => key !== 'heading'))
       }
     }
   },

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"
@@ -277,7 +277,7 @@ export default {
           return acc
         }, {})
       } else {
-        return this.fieldIcons
+        return Object.fromEntries(Object.entries(this.fieldIcons).filter(([key]) => key !== 'heading'))
       }
     },
     submitterFields () {

app/javascript/template_builder/i18n.js

@@ -8,7 +8,9 @@ const en = {
   uploaded_pdf_contains_form_fields_keep_or_remove_them: 'Uploaded PDF contains form fields. Keep or remove them?',
   keep: 'Keep',
   left: 'Left',
+  heading: 'Heading',
   validation: 'Validation',
+  add_blank_page: 'Add blank page',
   right: 'Right',
   center: 'Center',
   description: 'Description',

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/page.vue

@@ -21,8 +21,10 @@
         :key="i"
         :ref="setAreaRefs"
         :area="item.area"
+        :input-mode="inputMode"
         :field="item.field"
         :editable="editable"
+        :with-field-placeholder="withFieldPlaceholder"
         :default-field="defaultFields.find((f) => f.name === item.field.name)"
         :default-submitters="defaultSubmitters"
         @start-resize="resizeDirection = $event"
@@ -71,11 +73,21 @@ export default {
       required: false,
       default: () => []
     },
+    inputMode: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     defaultFields: {
       type: Array,
       required: false,
       default: () => []
     },
+    withFieldPlaceholder: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     drawFieldType: {
       type: String,
       required: false,

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/javascript/template_builder/upload.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <label
+      id="add_document_button"
       :for="inputId"
       class="btn btn-outline w-full"
       :class="{ 'btn-disabled': isLoading || isProcessing }"

app/jobs/process_submitter_completion_job.rb

@@ -20,9 +20,25 @@ class ProcessSubmitterCompletionJob
       enqueue_completed_emails(submitter)
     end
 
-    return if Accounts.load_webhook_url(submitter.account).blank?
+    enqueue_completed_webhooks(submitter)
+  end
 
-    SendFormCompletedWebhookRequestJob.perform_async({ 'submitter_id' => submitter.id })
+  def enqueue_completed_webhooks(submitter)
+    webhook_config = Accounts.load_webhook_config(submitter.account)
+
+    if webhook_config
+      SendFormCompletedWebhookRequestJob.perform_async({ 'submitter_id' => submitter.id,
+                                                         'encrypted_config_id' => webhook_config.id })
+    end
+
+    webhook_ids = submitter.account.webhook_urls.where(
+      Arel::Table.new(:webhook_urls)[:events].matches('%"form.completed"%')
+    ).pluck(:id)
+
+    webhook_ids.each do |webhook_id|
+      SendFormCompletedWebhookRequestJob.perform_async({ 'submitter_id' => submitter.id,
+                                                         'webhook_url_id' => webhook_id })
+    end
   end
 
   def enqueue_completed_emails(submitter)

app/jobs/send_form_completed_webhook_request_job.rb

@@ -13,14 +13,11 @@ class SendFormCompletedWebhookRequestJob
     submitter = Submitter.find(params['submitter_id'])
 
     attempt = params['attempt'].to_i
-    url = Accounts.load_webhook_url(submitter.submission.account)
+
+    url = load_url(submitter, params)
 
     return if url.blank?
 
-    preferences = Accounts.load_webhook_preferences(submitter.submission.account)
-
-    return if preferences['form.completed'] == false
-
     Submissions::EnsureResultGenerated.call(submitter)
 
     ActiveStorage::Current.url_options = Docuseal.default_url_options
@@ -41,10 +38,28 @@ class SendFormCompletedWebhookRequestJob
     if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
        (!Docuseal.multitenant? || submitter.account.account_configs.exists?(key: :plan))
       SendFormCompletedWebhookRequestJob.perform_in((2**attempt).minutes, {
-                                                      'submitter_id' => submitter.id,
+                                                      **params,
                                                       'attempt' => attempt + 1,
                                                       'last_status' => resp&.status.to_i
                                                     })
     end
   end
+
+  def load_url(submitter, params)
+    if params['encrypted_config_id']
+      url = EncryptedConfig.find(params['encrypted_config_id']).value
+
+      return if url.blank?
+
+      preferences = Accounts.load_webhook_preferences(submitter.submission.account)
+
+      return if preferences['form.completed'] == false
+
+      url
+    elsif params['webhook_url_id']
+      webhook_url = submitter.account.webhook_urls.find(params['webhook_url_id'])
+
+      webhook_url.url if webhook_url.events.include?('form.completed')
+    end
+  end
 end

app/mailers/submitter_mailer.rb

@@ -48,8 +48,11 @@ class SubmitterMailer < ApplicationMailer
     @email_config = AccountConfigs.find_for_account(@current_account, AccountConfig::SUBMITTER_COMPLETED_EMAIL_KEY)
 
     add_completed_email_attachments!(
-      submitter, with_audit_log: (@email_config.nil? || @email_config.value['attach_audit_log'] != false) &&
-                                 @submitter.template.preferences['completed_notification_email_attach_audit'] != false
+      submitter,
+      with_documents: @email_config&.value&.dig('attach_documents') != false &&
+                      @submitter.template.preferences['completed_notification_email_attach_documents'] != false,
+      with_audit_log: @email_config&.value&.dig('attach_audit_log') != false &&
+                      @submitter.template.preferences['completed_notification_email_attach_audit'] != false
     )
 
     @subject = @submitter.template.preferences['completed_notification_email_subject'].presence
@@ -117,8 +120,8 @@ class SubmitterMailer < ApplicationMailer
     %(#{submitter.submission.template.name} has been completed by #{submitters})
   end
 
-  def add_completed_email_attachments!(submitter, with_audit_log: true)
-    documents = Submitters.select_attachments_for_download(submitter)
+  def add_completed_email_attachments!(submitter, with_audit_log: true, with_documents: true)
+    documents = with_documents ? Submitters.select_attachments_for_download(submitter) : []
 
     total_size = 0
     audit_trail_data = nil
@@ -133,13 +136,15 @@ class SubmitterMailer < ApplicationMailer
 
     attachments[submitter.submission.audit_trail.filename.to_s.tr('"', "'")] = audit_trail_data if audit_trail_data
 
-    file_fields = submitter.submission.template_fields.select { |e| e['type'].in?(%w[file payment]) }
+    if with_documents
+      file_fields = submitter.submission.template_fields.select { |e| e['type'].in?(%w[file payment]) }
 
-    if file_fields.pluck('submitter_uuid').uniq.size == 1
-      storage_attachments =
-        submitter.attachments.where(uuid: submitter.values.values_at(*file_fields.pluck('uuid')).flatten)
+      if file_fields.pluck('submitter_uuid').uniq.size == 1
+        storage_attachments =
+          submitter.attachments.where(uuid: submitter.values.values_at(*file_fields.pluck('uuid')).flatten)
 
-      add_attachments_with_size_limit(storage_attachments, total_size)
+        add_attachments_with_size_limit(storage_attachments, total_size)
+      end
     end
 
     documents

app/models/account.rb

@@ -32,6 +32,7 @@ class Account < ApplicationRecord
   has_many :submitters, through: :submissions
   has_many :account_linked_accounts, dependent: :destroy
   has_many :email_events, dependent: :destroy
+  has_many :webhook_urls, dependent: :destroy
   has_many :account_testing_accounts, -> { testing }, dependent: :destroy,
                                                       class_name: 'AccountLinkedAccount',
                                                       inverse_of: :account

app/models/email_event.rb

@@ -19,6 +19,7 @@
 # Indexes
 #
 #  index_email_events_on_account_id  (account_id)
+#  index_email_events_on_email       (email)
 #  index_email_events_on_emailable   (emailable_type,emailable_id)
 #  index_email_events_on_message_id  (message_id)
 #

app/models/webhook_url.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+# == Schema Information
+#
+# Table name: webhook_urls
+#
+#  id         :bigint           not null, primary key
+#  events     :text             not null
+#  sha1       :string           not null
+#  url        :text             not null
+#  created_at :datetime         not null
+#  updated_at :datetime         not null
+#  account_id :bigint           not null
+#
+# Indexes
+#
+#  index_webhook_urls_on_account_id  (account_id)
+#  index_webhook_urls_on_sha1        (sha1)
+#
+# Foreign Keys
+#
+#  fk_rails_...  (account_id => accounts.id)
+#
+class WebhookUrl < ApplicationRecord
+  belongs_to :account
+
+  attribute :events, :string, default: -> { [] }
+
+  serialize :events, coder: JSON
+
+  before_validation :set_sha1
+
+  encrypts :url
+
+  def set_sha1
+    self.sha1 = Digest::SHA1.hexdigest(url)
+  end
+end

app/views/icons/_alert_circle.html.erb

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" />
+  <path d="M12 8v4" />
+  <path d="M12 16h.01" />
+</svg>

app/views/icons/_lock_open.html.erb

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <path d="M5 11m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z" />
+  <path d="M12 16m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+  <path d="M8 11v-5a4 4 0 0 1 8 0" />
+</svg>

app/views/personalization_settings/_submitter_completed_email_form.html.erb

@@ -8,7 +8,7 @@
   <div class="collapse-content">
     <%= form_for AccountConfigs.find_or_initialize_for_key(current_account, AccountConfig::SUBMITTER_COMPLETED_EMAIL_KEY), url: settings_personalization_path, method: :post, html: { autocomplete: 'off', class: 'space-y-4' } do |f| %>
       <%= f.hidden_field :key %>
-      <%= f.fields_for :value, Struct.new(:subject, :body, :attach_audit_log).new(*f.object.value.values_at('subject', 'body', 'attach_audit_log')) do |ff| %>
+      <%= f.fields_for :value, Struct.new(:subject, :body, :attach_audit_log, :attach_documents).new(*f.object.value.values_at('subject', 'body', 'attach_audit_log', 'attach_documents')) do |ff| %>
         <div class="form-control">
           <div class="flex items-center">
             <%= ff.label :subject, class: 'label' %>
@@ -29,7 +29,13 @@
             <%= ff.text_area :body, required: true, class: 'base-input w-full py-2', dir: 'auto' %>
           </autoresize-textarea>
         </div>
-        <div class="flex items-center justify-between py-2.5 mx-1">
+        <div class="flex items-center justify-between pt-2.5 mx-1">
+          <span>
+            Attach documents
+          </span>
+          <%= ff.check_box :attach_documents, { checked: ff.object.attach_documents != false, class: 'toggle' }, 'true', 'false' %>
+        </div>
+        <div class="flex items-center justify-between pb-2.5 mx-1">
           <span>
             Attach audit log PDF
           </span>

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/submissions_archived/index.html.erb

@@ -12,7 +12,7 @@
 </div>
 <% if @pagy.count > 0 %>
   <div class="space-y-4">
-    <%= render partial: 'templates/submission', collection: @submissions, locals: { with_template: true } %>
+    <%= render partial: 'templates/submission', collection: @submissions, locals: { with_template: true, archived: true } %>
   </div>
 <% elsif params[:q].present? %>
   <div class="text-center">

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'] } || {} %>
@@ -27,7 +27,7 @@
                 <% next if !field['readonly'] && field['submitter_uuid'] == @submitter.uuid %>
                 <% next if field['redacted'] && field['submitter_uuid'] != @submitter.uuid %>
                 <% next if value == '{{date}}' && field['submitter_uuid'] != @submitter.uuid %>
-                <% next if field.dig('preferences', 'formula') && field['submitter_uuid'] == @submitter.uuid %>
+                <% next if field.dig('preferences', 'formula').present? && field['submitter_uuid'] == @submitter.uuid %>
                 <%= render 'submissions/value', area:, field:, attachments_index: @attachments_index, value:, locale: @submitter.account.locale, timezone: @submitter.account.timezone %>
               <% end %>
             </div>
@@ -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/_submission.html.erb

@@ -85,6 +85,11 @@
             <%= button_to button_title(title: nil, disabled_with: 'Arch', icon: svg_icon('archive', class: 'w-6 h-6')), submission_path(submission), class: 'btn btn-outline btn-sm w-full md:w-fit', form: { class: 'flex' }, title: 'Archive', method: :delete, data: { turbo_confirm: 'Are you sure?' }, onclick: 'event.stopPropagation()' %>
           </span>
         <% end %>
+        <% if local_assigns[:archived] && can?(:destroy, submission) %>
+          <span data-tip="Remove" class="sm:tooltip tooltip-top">
+            <%= button_to button_title(title: nil, disabled_with: 'Rem', icon: svg_icon('trash', class: 'w-6 h-6')), submission_path(submission, permanently: true), class: 'btn btn-outline btn-sm w-full md:w-fit', form: { class: 'flex' }, title: 'Remove', method: :delete, data: { turbo_confirm: 'Submission deletion is irreversible and will permanently remove all associated signed documents with it. Are you sure?' }, onclick: 'event.stopPropagation()' %>
+          </span>
+        <% end %>
       </div>
     <% else %>
       <div class="space-y-1 w-full md:mr-2">

app/views/templates/_title.html.erb

@@ -54,7 +54,7 @@
     <% if !template.archived_at? && can?(:destroy, template) %>
       <%= button_to button_title(title: 'Archive', disabled_with: 'Archiving', title_class: 'inline', icon: svg_icon('archive', class: 'w-6 h-6')), template_path(template), class: 'btn btn-outline btn-sm w-full', form_class: 'flex-1', method: :delete, data: { turbo_confirm: 'Are you sure?' } %>
     <% end %>
-    <% if can?(:create, template) %>
+    <% if can?(:create, current_account.templates.new(author: current_user)) %>
       <%= link_to new_template_path(base_template_id: template.id), class: 'btn btn-outline btn-sm flex-1', data: { turbo_frame: :modal } do %>
         <span class="flex items-center justify-center space-x-2">
           <%= svg_icon('copy', class: 'w-6 h-6') %>

app/views/templates_archived_submissions/index.html.erb

@@ -19,7 +19,7 @@
 </div>
 <% if @pagy.count > 0 %>
   <div class="space-y-4">
-    <%= render partial: 'templates/submission', collection: @submissions, locals: { template: @template } %>
+    <%= render partial: 'templates/submission', collection: @submissions, locals: { template: @template, archived: true } %>
   </div>
 <% elsif params[:q].present? %>
   <div class="text-center">

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' } %>

app/views/templates_preferences/show.html.erb

@@ -130,7 +130,7 @@
           <%= form_for @template, url: template_preferences_path(@template), method: :post, html: { autocomplete: 'off', class: 'mt-1' } do |f| %>
             <toggle-on-submit data-element-id="email_saved_alert3"></toggle-on-submit>
             <% configs = AccountConfigs.find_or_initialize_for_key(current_account, AccountConfig::SUBMITTER_COMPLETED_EMAIL_KEY).value %>
-            <%= f.fields_for :preferences, Struct.new(:completed_notification_email_subject, :completed_notification_email_body, :completed_notification_email_enabled, :completed_notification_email_attach_audit).new(@template.preferences['completed_notification_email_subject'].presence || configs['subject'], @template.preferences['completed_notification_email_body'].presence || configs['body'], @template.preferences['completed_notification_email_enabled'], configs['attach_audit_log'] != false && @template.preferences['completed_notification_email_attach_audit'] != false) do |ff| %>
+            <%= f.fields_for :preferences, Struct.new(:completed_notification_email_subject, :completed_notification_email_body, :completed_notification_email_enabled, :completed_notification_email_attach_audit, :completed_notification_email_attach_documents).new(@template.preferences['completed_notification_email_subject'].presence || configs['subject'], @template.preferences['completed_notification_email_body'].presence || configs['body'], @template.preferences['completed_notification_email_enabled'], configs['attach_audit_log'] != false && @template.preferences['completed_notification_email_attach_audit'] != false, configs['attach_documents'] != false && @template.preferences['completed_notification_email_attach_documents'] != false) do |ff| %>
               <div class="form-control">
                 <%= ff.label :completed_notification_email_subject, 'Email subject', class: 'label' %>
                 <%= ff.text_field :completed_notification_email_subject, required: true, class: 'base-input', dir: 'auto' %>
@@ -147,17 +147,23 @@
                 </autoresize-textarea>
               </div>
               <div class="flex items-center justify-between pt-2.5 px-1 mb-2">
-                <span>
-                  Attach Audit Log PDF to the email
-                </span>
-                <%= ff.check_box :completed_notification_email_attach_audit, { checked: ff.object.completed_notification_email_attach_audit != false, class: 'toggle', onchange: 'this.form.requestSubmit()', disabled: configs['attach_audit_log'] == false }, 'true', 'false' %>
-              </div>
-              <div class="flex items-center justify-between py-2.5 px-1 mb-2">
                 <span>
                   Send emails automatically on completion
                 </span>
                 <%= ff.check_box :completed_notification_email_enabled, { checked: ff.object.completed_notification_email_enabled != false, class: 'toggle', onchange: 'this.form.requestSubmit()' }, 'true', 'false' %>
               </div>
+              <div class="flex items-center justify-between pt-2.5 px-1 mb-2">
+                <span>
+                  Attach documents to the email
+                </span>
+                <%= ff.check_box :completed_notification_email_attach_documents, { checked: ff.object.completed_notification_email_attach_documents != false, class: 'toggle', onchange: 'this.form.requestSubmit()', disabled: configs['attach_documents'] == false }, 'true', 'false' %>
+              </div>
+              <div class="flex items-center justify-between py-2.5 px-1 mb-2">
+                <span>
+                  Attach Audit Log PDF to the email
+                </span>
+                <%= ff.check_box :completed_notification_email_attach_audit, { checked: ff.object.completed_notification_email_attach_audit != false, class: 'toggle', onchange: 'this.form.requestSubmit()', disabled: configs['attach_audit_log'] == false }, 'true', 'false' %>
+              </div>
             <% end %>
             <div class="form-control pt-2">
               <%= f.button button_title(title: 'Save', disabled_with: 'Saving'), class: 'base-button' %>

config/locales/en.yml

@@ -57,6 +57,10 @@ en: &en
   sign_up_with_microsoft: Sign up with Microsoft
   by_creating_an_account_you_agree_to_our_html: 'By creating an account, you agree to our <a target="_blank" href="https://www.docuseal.co/privacy">Privacy Policy</a> and <a target="_blank" href="https://www.docuseal.co/terms">Terms of Service</a>.'
   enter_email_to_continue: Enter email to continue
+  doorkeeper:
+    scopes:
+      write: Update your data
+      read: Read your data
 
 es: &es
   role: Rol

config/routes.rb

@@ -28,12 +28,14 @@ Rails.application.routes.draw do
   end
 
   namespace :api, defaults: { format: :json } do
+    resource :user, only: %i[show]
     resources :attachments, only: %i[create]
     resources :submitter_email_clicks, only: %i[create]
     resources :submitter_form_views, only: %i[create]
     resources :submitters, only: %i[index show update]
     resources :submissions, only: %i[index show create destroy] do
       collection do
+        resources :init, only: %i[create], controller: 'submissions'
         resources :emails, only: %i[create], controller: 'submissions', as: :submissions_emails
       end
     end
@@ -41,6 +43,12 @@ Rails.application.routes.draw do
       resources :clone, only: %i[create], controller: 'templates_clone'
       resources :submissions, only: %i[index create]
     end
+    resources :tools, only: %i[] do
+      post :merge, on: :collection
+    end
+    scope 'events' do
+      resources :form_events, only: %i[index], path: 'form/:type'
+    end
   end
 
   resources :verify_pdf_signature, only: %i[create]
@@ -83,6 +91,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]

db/migrate/20240714172222_create_webhook_urls.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class CreateWebhookUrls < ActiveRecord::Migration[7.1]
+  def change
+    create_table :webhook_urls do |t|
+      t.references :account, null: false, foreign_key: true, index: true
+      t.text :url, null: false
+      t.text :events, null: false
+      t.string :sha1, null: false, index: true
+
+      t.timestamps
+    end
+  end
+end

db/migrate/20240720063826_add_index_on_email_email_events.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class AddIndexOnEmailEmailEvents < ActiveRecord::Migration[7.1]
+  def change
+    add_index :email_events, :email
+  end
+end

db/migrate/20240720063827_create_doorkeeper_tables.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+class CreateDoorkeeperTables < ActiveRecord::Migration[7.1]
+  def change
+    create_table :oauth_applications do |t|
+      t.string  :name,    null: false
+      t.string  :uid,     null: false
+      t.string  :secret,  null: false
+      t.text    :redirect_uri
+      t.string  :scopes,       null: false, default: ''
+      t.boolean :confidential, null: false, default: true
+      t.timestamps             null: false
+    end
+
+    add_index :oauth_applications, :uid, unique: true
+
+    create_table :oauth_access_grants do |t|
+      t.references :resource_owner,  null: false
+      t.references :application,     null: false
+      t.string   :token,             null: false
+      t.integer  :expires_in,        null: false
+      t.text     :redirect_uri,      null: false
+      t.string   :scopes,            null: false, default: ''
+      t.datetime :created_at,        null: false
+      t.datetime :revoked_at
+    end
+
+    add_index :oauth_access_grants, :token, unique: true
+    add_foreign_key :oauth_access_grants, :oauth_applications, column: :application_id
+
+    create_table :oauth_access_tokens do |t|
+      t.references :resource_owner, index: true
+      t.references :application,    null: false
+      t.string :token, null: false
+      t.string   :refresh_token
+      t.integer  :expires_in
+      t.string   :scopes
+      t.datetime :created_at, null: false
+      t.datetime :revoked_at
+      t.string   :previous_refresh_token, null: false, default: ''
+    end
+
+    add_index :oauth_access_tokens, :token, unique: true
+    add_index :oauth_access_tokens, :refresh_token, unique: true
+
+    add_foreign_key :oauth_access_tokens, :oauth_applications, column: :application_id
+    add_foreign_key :oauth_access_grants, :users, column: :resource_owner_id
+    add_foreign_key :oauth_access_tokens, :users, column: :resource_owner_id
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.1].define(version: 2024_06_24_102526) do
+ActiveRecord::Schema[7.1].define(version: 2024_07_20_063827) do
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
 
@@ -110,6 +110,7 @@ ActiveRecord::Schema[7.1].define(version: 2024_06_24_102526) do
     t.datetime "event_datetime", null: false
     t.datetime "created_at", null: false
     t.index ["account_id"], name: "index_email_events_on_account_id"
+    t.index ["email"], name: "index_email_events_on_email"
     t.index ["emailable_type", "emailable_id"], name: "index_email_events_on_emailable"
     t.index ["message_id"], name: "index_email_events_on_message_id"
   end
@@ -148,6 +149,48 @@ ActiveRecord::Schema[7.1].define(version: 2024_06_24_102526) do
     t.index ["user_id"], name: "index_encrypted_user_configs_on_user_id"
   end
 
+  create_table "oauth_access_grants", force: :cascade do |t|
+    t.bigint "resource_owner_id", null: false
+    t.bigint "application_id", null: false
+    t.string "token", null: false
+    t.integer "expires_in", null: false
+    t.text "redirect_uri", null: false
+    t.string "scopes", default: "", null: false
+    t.datetime "created_at", null: false
+    t.datetime "revoked_at"
+    t.index ["application_id"], name: "index_oauth_access_grants_on_application_id"
+    t.index ["resource_owner_id"], name: "index_oauth_access_grants_on_resource_owner_id"
+    t.index ["token"], name: "index_oauth_access_grants_on_token", unique: true
+  end
+
+  create_table "oauth_access_tokens", force: :cascade do |t|
+    t.bigint "resource_owner_id"
+    t.bigint "application_id", null: false
+    t.string "token", null: false
+    t.string "refresh_token"
+    t.integer "expires_in"
+    t.string "scopes"
+    t.datetime "created_at", null: false
+    t.datetime "revoked_at"
+    t.string "previous_refresh_token", default: "", null: false
+    t.index ["application_id"], name: "index_oauth_access_tokens_on_application_id"
+    t.index ["refresh_token"], name: "index_oauth_access_tokens_on_refresh_token", unique: true
+    t.index ["resource_owner_id"], name: "index_oauth_access_tokens_on_resource_owner_id"
+    t.index ["token"], name: "index_oauth_access_tokens_on_token", unique: true
+  end
+
+  create_table "oauth_applications", force: :cascade do |t|
+    t.string "name", null: false
+    t.string "uid", null: false
+    t.string "secret", null: false
+    t.text "redirect_uri"
+    t.string "scopes", default: "", null: false
+    t.boolean "confidential", default: true, null: false
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.index ["uid"], name: "index_oauth_applications_on_uid", unique: true
+  end
+
   create_table "submission_events", force: :cascade do |t|
     t.bigint "submission_id", null: false
     t.bigint "submitter_id"
@@ -290,6 +333,17 @@ ActiveRecord::Schema[7.1].define(version: 2024_06_24_102526) do
     t.index ["uuid"], name: "index_users_on_uuid", unique: true
   end
 
+  create_table "webhook_urls", force: :cascade do |t|
+    t.bigint "account_id", null: false
+    t.text "url", null: false
+    t.text "events", null: false
+    t.string "sha1", null: false
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.index ["account_id"], name: "index_webhook_urls_on_account_id"
+    t.index ["sha1"], name: "index_webhook_urls_on_sha1"
+  end
+
   add_foreign_key "access_tokens", "users"
   add_foreign_key "account_configs", "accounts"
   add_foreign_key "account_linked_accounts", "accounts"
@@ -302,6 +356,10 @@ ActiveRecord::Schema[7.1].define(version: 2024_06_24_102526) do
   add_foreign_key "email_messages", "users", column: "author_id"
   add_foreign_key "encrypted_configs", "accounts"
   add_foreign_key "encrypted_user_configs", "users"
+  add_foreign_key "oauth_access_grants", "oauth_applications", column: "application_id"
+  add_foreign_key "oauth_access_grants", "users", column: "resource_owner_id"
+  add_foreign_key "oauth_access_tokens", "oauth_applications", column: "application_id"
+  add_foreign_key "oauth_access_tokens", "users", column: "resource_owner_id"
   add_foreign_key "submission_events", "submissions"
   add_foreign_key "submission_events", "submitters"
   add_foreign_key "submissions", "templates"
@@ -315,4 +373,5 @@ ActiveRecord::Schema[7.1].define(version: 2024_06_24_102526) do
   add_foreign_key "templates", "users", column: "author_id"
   add_foreign_key "user_configs", "users"
   add_foreign_key "users", "accounts"
+  add_foreign_key "webhook_urls", "accounts"
 end

docker-compose.yml

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

lib/accounts.rb

@@ -79,13 +79,17 @@ module Accounts
   end
 
   def load_webhook_url(account)
+    load_webhook_config(account)&.value.presence
+  end
+
+  def load_webhook_config(account)
     configs = account.encrypted_configs.find_by(key: EncryptedConfig::WEBHOOK_URL_KEY)
 
     if !configs && !Docuseal.multitenant? && !account.testing?
       configs = Account.order(:id).first.encrypted_configs.find_by(key: EncryptedConfig::WEBHOOK_URL_KEY)
     end
 
-    configs&.value.presence
+    configs
   end
 
   def load_webhook_preferences(account)

lib/pdf_utils.rb

@@ -26,4 +26,19 @@ module PdfUtils
 
     decrypted_io.tap(&:rewind).read
   end
+
+  def merge(files)
+    merged_pdf = HexaPDF::Document.new
+
+    files.each do |file|
+      pdf = HexaPDF::Document.new(io: file)
+      pdf.pages.each { |page| merged_pdf.pages << merged_pdf.import(page) }
+    end
+
+    merged_content = StringIO.new
+    merged_pdf.write(merged_content)
+    merged_content.rewind
+
+    merged_content
+  end
 end

lib/submissions.rb

@@ -80,10 +80,10 @@ module Submissions
     emails
   end
 
-  def create_from_submitters(template:, user:, submissions_attrs:, source:, mark_as_sent: false,
+  def create_from_submitters(template:, user:, submissions_attrs:, source:,
                              submitters_order: DEFAULT_SUBMITTERS_ORDER, params: {})
     Submissions::CreateFromSubmitters.call(
-      template:, user:, submissions_attrs:, source:, mark_as_sent:, submitters_order:, params:
+      template:, user:, submissions_attrs:, source:, submitters_order:, params:
     )
   end
 
@@ -107,6 +107,7 @@ module Submissions
     return email.downcase if email.to_s.include?(',')
     return email.downcase if email.to_s.include?('.gob')
     return email.downcase if email.to_s.include?('.om')
+    return email.downcase if email.to_s.include?('.mm')
     return email.downcase unless email.to_s.include?('.')
 
     fixed_email = EmailTypo.call(email.delete_prefix('<'))

lib/submissions/create_from_submitters.rb

@@ -4,7 +4,7 @@ module Submissions
   module CreateFromSubmitters
     module_function
 
-    def call(template:, user:, submissions_attrs:, source:, submitters_order:, mark_as_sent: false, params: {})
+    def call(template:, user:, submissions_attrs:, source:, submitters_order:, params: {})
       preferences = Submitters.normalize_preferences(user.account, user, params)
 
       Array.wrap(submissions_attrs).filter_map do |attrs|
@@ -32,7 +32,7 @@ module Submissions
           is_order_sent = submitters_order == 'random' || index.zero?
 
           build_submitter(submission:, attrs: submitter_attrs, uuid:,
-                          is_order_sent:, mark_as_sent:, user:,
+                          is_order_sent:, user:,
                           preferences: preferences.merge(submission_preferences))
         end
 
@@ -149,7 +149,7 @@ module Submissions
       uuid || template.submitters[index]&.dig('uuid')
     end
 
-    def build_submitter(submission:, attrs:, uuid:, is_order_sent:, mark_as_sent:, user:, preferences:)
+    def build_submitter(submission:, attrs:, uuid:, is_order_sent:, user:, preferences:)
       email = Submissions.normalize_email(attrs[:email])
       submitter_preferences = Submitters.normalize_preferences(submission.account, user, attrs)
       values = attrs[:values] || {}
@@ -166,7 +166,6 @@ module Submissions
           name: attrs[:name],
           external_id: attrs[:external_id].presence || attrs[:application_key],
           completed_at: attrs[:completed].present? ? Time.current : nil,
-          sent_at: mark_as_sent && email.present? && is_order_sent ? Time.current : nil,
           values: values.except(phone_field_uuid),
           metadata: attrs[:metadata] || {},
           preferences: preferences.merge(submitter_preferences)
@@ -175,6 +174,9 @@ module Submissions
           uuid:
         )
 
+      submitter.sent_at =
+        submitter.preferences['send_email'] != false && email.present? && is_order_sent ? Time.current : nil
+
       assign_completed_attributes(submitter) if submitter.completed_at?
 
       submitter

lib/submissions/generate_audit_trail.rb

@@ -48,9 +48,11 @@ module Submissions
 
       document.sign(io, **sign_params)
 
+      Submissions::GenerateResultAttachments.maybe_enable_ltv(io, sign_params)
+
       ActiveStorage::Attachment.create!(
         blob: ActiveStorage::Blob.create_and_upload!(
-          io: StringIO.new(io.string), filename: "Audit Log - #{submission.template.name}.pdf"
+          io: io.tap(&:rewind), filename: "Audit Log - #{submission.template.name}.pdf"
         ),
         name: 'audit_trail',
         record: submission
@@ -222,6 +224,7 @@ module Submissions
 
         submission.template_fields.filter_map do |field|
           next if field['submitter_uuid'] != submitter.uuid
+          next if field['type'] == 'heading'
 
           submitter_field_counters[field['type']] += 1
 

lib/submissions/generate_combined_attachment.rb

@@ -24,9 +24,11 @@ module Submissions
 
       pdf.sign(io, **sign_params)
 
+      Submissions::GenerateResultAttachments.maybe_enable_ltv(io, sign_params)
+
       ActiveStorage::Attachment.create!(
         blob: ActiveStorage::Blob.create_and_upload!(
-          io: StringIO.new(io.string), filename: "#{submission.template.name}.pdf"
+          io: io.tap(&:rewind), filename: "#{submission.template.name}.pdf"
         ),
         name: 'combined_document',
         record: submission

lib/submissions/generate_result_attachments.rb

@@ -126,13 +126,15 @@ module Submissions
           font_size   = preferences_font_size
           font_size ||= (([page.box.width, page.box.height].min / A4_SIZE[0].to_f) * FONT_SIZE).to_i
 
+          font = pdf.fonts.add(field.dig('preferences', 'font').presence || FONT_NAME)
+
           value = submitter.values[field['uuid']]
 
           text_align = field.dig('preferences', 'align').to_s.to_sym.presence ||
                        (value.to_s.match?(RTL_REGEXP) ? :right : :left)
 
           layouter = HexaPDF::Layout::TextLayouter.new(text_valign: :center, text_align:,
-                                                       font: pdf.fonts.add(FONT_NAME), font_size:)
+                                                       font:, font_size:)
 
           next if Array.wrap(value).compact_blank.blank?
 
@@ -178,7 +180,7 @@ module Submissions
                 cv.image(PdfIcons.paperclip_io, at: [0, 0], width: box.content_width)
               end
 
-              acc << HexaPDF::Layout::TextFragment.create("#{attachment.filename}\n", font: pdf.fonts.add(FONT_NAME),
+              acc << HexaPDF::Layout::TextFragment.create("#{attachment.filename}\n", font:,
                                                                                       font_size:)
             end
 
@@ -247,10 +249,30 @@ module Submissions
             cell_width = area['cell_w'] * width
 
             TextUtils.maybe_rtl_reverse(value).chars.each_with_index do |char, index|
-              text = HexaPDF::Layout::TextFragment.create(char, font: pdf.fonts.add(FONT_NAME),
+              next if char.blank?
+
+              text = HexaPDF::Layout::TextFragment.create(char, font:,
                                                                 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:,
+                                                            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:,
+                                                            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
@@ -263,7 +285,7 @@ module Submissions
 
             value = TextUtils.maybe_rtl_reverse(Array.wrap(value).join(', '))
 
-            text = HexaPDF::Layout::TextFragment.create(value, font: pdf.fonts.add(FONT_NAME),
+            text = HexaPDF::Layout::TextFragment.create(value, font:,
                                                                font_size:)
 
             lines = layouter.fit([text], area['w'] * width, height).lines
@@ -271,7 +293,7 @@ module Submissions
 
             if preferences_font_size.blank? && box_height > (area['h'] * height) + 1
               text = HexaPDF::Layout::TextFragment.create(value,
-                                                          font: pdf.fonts.add(FONT_NAME),
+                                                          font:,
                                                           font_size: (font_size / 1.4).to_i)
 
               lines = layouter.fit([text], field['type'].in?(%w[date number]) ? width : area['w'] * width, height).lines
@@ -281,7 +303,7 @@ module Submissions
 
             if preferences_font_size.blank? && box_height > (area['h'] * height) + 1
               text = HexaPDF::Layout::TextFragment.create(value,
-                                                          font: pdf.fonts.add(FONT_NAME),
+                                                          font:,
                                                           font_size: (font_size / 1.9).to_i)
 
               lines = layouter.fit([text], field['type'].in?(%w[date number]) ? width : area['w'] * width, height).lines
@@ -329,6 +351,8 @@ module Submissions
 
           pdf.sign(io, write_options: { validate: false, incremental: false }, **sign_params)
         end
+
+        maybe_enable_ltv(io, sign_params)
       else
         begin
           pdf.write(io, incremental: true, validate: false)
@@ -338,10 +362,9 @@ module Submissions
           pdf.write(io, incremental: false, validate: false)
         end
       end
-      # rubocop:enable Metrics
 
       ActiveStorage::Attachment.new(
-        blob: ActiveStorage::Blob.create_and_upload!(io: StringIO.new(io.string), filename: "#{name}.pdf"),
+        blob: ActiveStorage::Blob.create_and_upload!(io: io.tap(&:rewind), filename: "#{name}.pdf"),
         metadata: { original_uuid: uuid,
                     analyzed: true,
                     sha256: Base64.urlsafe_encode64(Digest::SHA256.digest(io.string)) },
@@ -349,6 +372,11 @@ module Submissions
         record: submitter
       )
     end
+    # rubocop:enable Metrics
+
+    def maybe_enable_ltv(io, _sign_params)
+      io
+    end
 
     def build_signing_params(pkcs, tsa_url)
       params = {

lib/submissions/serialize_for_api.rb

@@ -18,10 +18,10 @@ 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) }
+      serialized_submitters = submitters.map { |submitter| Submitters::SerializeForApi.call(submitter, params:) }
 
       json = submission.as_json(
         SERIALIZE_PARAMS.deep_merge(
@@ -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,21 +53,32 @@ 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}}'
-        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')
-          TimeUtils.parse_date_string(value, field.dig('preferences', 'format')).to_s
-        else
-          Date.parse(value).to_s
-        end
+      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')
+        TimeUtils.parse_date_string(value, field.dig('preferences', 'format')).to_s
+      else
+        Date.parse(value).to_s
+      end
     rescue Date::Error => e
       Rollbar.warning(e) if defined?(Rollbar)
 

lib/submitters/serialize_for_api.rb

@@ -10,7 +10,7 @@ module Submitters
 
     module_function
 
-    def call(submitter, with_template: false, with_events: false, with_documents: true, with_urls: false)
+    def call(submitter, with_template: false, with_events: false, with_documents: true, with_urls: false, params: {})
       ActiveRecord::Associations::Preloader.new(
         records: [submitter],
         associations: if with_documents
@@ -22,6 +22,10 @@ module Submitters
 
       additional_attrs = {}
 
+      if params[:include].to_s.include?('fields')
+        additional_attrs['fields'] = SerializeForWebhook.build_fields_array(submitter)
+      end
+
       additional_attrs['values'] = SerializeForWebhook.build_values_array(submitter)
       additional_attrs['documents'] = SerializeForWebhook.build_documents_array(submitter) if with_documents
       additional_attrs['preferences'] = submitter.preferences.except('default_values')

lib/submitters/serialize_for_webhook.rb

@@ -48,6 +48,7 @@ module Submitters
         submitter_field_counters[field['type']] += 1
 
         next if field['submitter_uuid'] != submitter.uuid
+        next if field['type'] == 'heading'
 
         field_name =
           field['name'].presence || "#{field['type'].titleize} Field #{submitter_field_counters[field['type']]}"
@@ -60,6 +61,28 @@ module Submitters
       end
     end
 
+    def build_fields_array(submitter)
+      fields = submitter.submission.template_fields.presence || submitter.submission.template.fields
+      attachments_index = submitter.attachments.index_by(&:uuid)
+      submitter_field_counters = Hash.new { 0 }
+
+      fields.filter_map do |field|
+        submitter_field_counters[field['type']] += 1
+
+        next if field['submitter_uuid'] != submitter.uuid
+        next if field['type'] == 'heading'
+
+        field_name =
+          field['name'].presence || "#{field['type'].titleize} Field #{submitter_field_counters[field['type']]}"
+
+        next if !submitter.values.key?(field['uuid']) && !submitter.completed_at?
+
+        value = fetch_field_value(field, submitter.values[field['uuid']], attachments_index)
+
+        { name: field_name, uuid: field['uuid'], value: }
+      end
+    end
+
     def build_documents_array(submitter)
       submitter.documents.map do |attachment|
         { name: attachment.filename.base, url: rails_storage_proxy_url(attachment) }
@@ -67,7 +90,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/clone.rb

@@ -4,7 +4,6 @@ module Templates
   module Clone
     module_function
 
-    # rubocop:disable Metrics
     def call(original_template, author:, external_id: nil, name: nil, folder_name: nil)
       template = original_template.account.templates.new
 
@@ -17,6 +16,12 @@ module Templates
 
       template.folder = TemplateFolders.find_or_create_by_name(author, folder_name) if folder_name.present?
 
+      template.submitters, template.fields = clone_submitters_and_fields(original_template)
+
+      template
+    end
+
+    def clone_submitters_and_fields(original_template)
       submitter_uuids_replacements = {}
       field_uuids_replacements = {}
 
@@ -52,10 +57,7 @@ module Templates
         end
       end
 
-      template.assign_attributes(fields: cloned_fields, submitters: cloned_submitters)
-
-      template
+      [cloned_submitters, cloned_fields]
     end
-    # rubocop:enable Metrics
   end
 end

lib/templates/clone_attachments.rb

@@ -7,8 +7,8 @@ module Templates
     def call(template:, original_template:)
       schema_uuids_replacements = {}
 
-      cloned_schema = original_template['schema'].deep_dup
-      cloned_fields = template['fields'].deep_dup
+      cloned_schema = original_template.schema.deep_dup
+      cloned_fields = template.fields.deep_dup
 
       cloned_schema.each do |schema_item|
         new_schema_item_uuid = SecureRandom.uuid
@@ -27,26 +27,25 @@ module Templates
 
       template.update!(schema: cloned_schema, fields: cloned_fields)
 
-      original_template.schema_documents.preload(:preview_images_attachments).each do |document|
-        new_document = ActiveStorage::Attachment.create!(
-          uuid: schema_uuids_replacements[document.uuid],
-          blob_id: document.blob_id,
-          name: 'documents',
-          record: template
-        )
+      original_template.schema_documents.map do |document|
+        new_document =
+          ApplicationRecord.no_touching do
+            template.documents_attachments.create!(
+              uuid: schema_uuids_replacements[document.uuid],
+              blob_id: document.blob_id
+            )
+          end
 
         clone_document_preview_images_attachments(document:, new_document:)
+
+        new_document
       end
     end
 
     def clone_document_preview_images_attachments(document:, new_document:)
       ApplicationRecord.no_touching do
         document.preview_images_attachments.each do |preview_image|
-          ActiveStorage::Attachment.create!(
-            blob_id: preview_image.blob_id,
-            name: 'preview_images',
-            record: new_document
-          )
+          new_document.preview_images_attachments.create!(blob_id: preview_image.blob_id)
         end
       end
     end

lib/templates/create_attachments.rb

@@ -11,11 +11,7 @@ module Templates
 
     def call(template, params, extract_fields: false)
       Array.wrap(params[:files].presence || params[:file]).map do |file|
-        if file.content_type.exclude?('image') && file.content_type != PDF_CONTENT_TYPE
-          next handle_file_types(template, file, params)
-        end
-
-        handle_pdf_or_image(template, file, file.read, params, extract_fields:)
+        handle_file_types(template, file, params, extract_fields:)
       end
     end
 
@@ -57,7 +53,11 @@ module Templates
       raise PdfEncrypted
     end
 
-    def handle_file_types(_template, file, _params)
+    def handle_file_types(template, file, params, extract_fields:)
+      if file.content_type.include?('image') || file.content_type == PDF_CONTENT_TYPE
+        return handle_pdf_or_image(template, file, file.read, params, extract_fields:)
+      end
+
       raise InvalidFileType, file.content_type
     end
   end

lib/templates/find_acro_fields.rb

@@ -4,7 +4,8 @@ module Templates
   module FindAcroFields
     PDF_CONTENT_TYPE = 'application/pdf'
 
-    FIELD_NAME_REGEXP = /\A(?=.*\p{L})[\p{L}\d\s]+\z/
+    FIELD_NAME_REGEXP = /\A(?=.*\p{L})[\p{L}\d\s-]+\z/
+    SKIP_FIELD_DESCRIPTION = %w[undefined].freeze
 
     module_function
 
@@ -18,7 +19,7 @@ module Templates
         areas = Array.wrap(field[:Kids] || field).filter_map do |child_field|
           page = annots_index[child_field.hash]
 
-          media_box = page[:MediaBox]
+          media_box = page[:CropBox] || page[:MediaBox]
           crop_box = page[:CropBox] || media_box
 
           media_box_start = [media_box[0], media_box[1]]
@@ -41,16 +42,16 @@ module Templates
 
           attrs = {
             page: page.index,
-            x: x / page_width,
-            y: transformed_y / page_height,
-            w: w / page_width,
-            h: h / page_height,
+            x: x / page_width.to_f,
+            y: transformed_y / page_height.to_f,
+            w: w / page_width.to_f,
+            h: h / page_height.to_f,
             attachment_uuid: attachment.uuid
           }
 
           next if attrs[:w].zero? || attrs[:h].zero?
 
-          if child_field[:MaxLen] && child_field.concrete_field_type == :comb_text_field
+          if child_field[:MaxLen] && child_field.try(:concrete_field_type) == :comb_text_field
             attrs[:cell_w] = w / page_width / child_field[:MaxLen].to_f
           end
 
@@ -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,
-          type: 'signature',
-          description: field[:TU]
+          **attrs,
+          type: 'signature'
         }
       else
         {}