fix padding

Bumps the npm_and_yarn group with 1 update in the / directory: [webpack](https://github.com/webpack/webpack).


Updates `webpack` from 5.82.1 to 5.94.0
- [Release notes](https://github.com/webpack/webpack/releases)
- [Commits](https://github.com/webpack/webpack/compare/v5.82.1...v5.94.0)

---
updated-dependencies:
- dependency-name: webpack
  dependency-type: direct:production
  dependency-group: npm_and_yarn
...

Signed-off-by: dependabot[bot] <support@github.com>

.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.4
       - 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.4
       - name: Cache gems
         uses: actions/cache@v1
         with:
@@ -100,13 +100,15 @@ jobs:
       - name: Install Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3.3.1
+          ruby-version: 3.3.4
       - name: Set up Node
         uses: actions/setup-node@v1
         with:
           node-version: 20.9.0
       - name: Install Chrome
         uses: browser-actions/setup-chrome@latest
+        with:
+          chrome-version: 125
       - name: Cache node_modules
         uses: actions/cache@v1
         with:

.rubocop.yml

@@ -11,6 +11,7 @@ AllCops:
     - bin/*
     - vendor/**/*
   TargetRubyVersion: '3.3'
+  SuggestExtensions: false
 
 Metrics/BlockLength:
   Exclude:
@@ -33,6 +34,7 @@ Metrics/MethodLength:
   Max: 30
   Exclude:
     - 'db/migrate/**'
+    - 'spec/**/*'
 
 Metrics/CyclomaticComplexity:
   Max: 15
@@ -45,6 +47,8 @@ Layout/LineLength:
 
 Metrics/AbcSize:
   Max: 45
+  Exclude:
+    - spec/**/*
 
 Metrics/ModuleLength:
   Max: 500
@@ -64,6 +68,9 @@ RSpec/ExampleLength:
 RSpec/MultipleMemoizedHelpers:
   Max: 6
 
+Metrics/BlockNesting:
+  Max: 4
+
 Rails/I18nLocaleTexts:
   Enabled: false
 
@@ -78,6 +85,3 @@ Rails/ApplicationController:
 
 Rails/Output:
   Enabled: false
-
-Capybara/ClickLinkOrButtonStyle:
-  Enabled: false

Dockerfile

@@ -1,12 +1,12 @@
-FROM ruby:3.3.1-alpine as fonts
+FROM ruby:3.3.4-alpine as fonts
 
 WORKDIR /fonts
 
-RUN apk --no-cache add fontforge wget && wget https://github.com/satbyy/go-noto-universal/releases/download/v7.0/GoNotoKurrent-Regular.ttf && wget https://github.com/satbyy/go-noto-universal/releases/download/v7.0/GoNotoKurrent-Bold.ttf && wget https://github.com/impallari/DancingScript/raw/master/fonts/v2031/DancingScript-Regular.otf && wget https://cdn.jsdelivr.net/gh/notofonts/notofonts.github.io/fonts/NotoSansSymbols2/hinted/ttf/NotoSansSymbols2-Regular.ttf && wget https://github.com/Maxattax97/gnu-freefont/raw/master/ttf/FreeSans.ttf && wget https://github.com/impallari/DancingScript/raw/master/OFL.txt
+RUN apk --no-cache add fontforge wget && wget https://github.com/satbyy/go-noto-universal/releases/download/v7.0/GoNotoKurrent-Regular.ttf && wget https://github.com/satbyy/go-noto-universal/releases/download/v7.0/GoNotoKurrent-Bold.ttf && wget https://github.com/impallari/DancingScript/raw/master/fonts/DancingScript-Regular.otf && wget https://cdn.jsdelivr.net/gh/notofonts/notofonts.github.io/fonts/NotoSansSymbols2/hinted/ttf/NotoSansSymbols2-Regular.ttf && wget https://github.com/Maxattax97/gnu-freefont/raw/master/ttf/FreeSans.ttf && wget https://github.com/impallari/DancingScript/raw/master/OFL.txt
 
 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.4-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.4-alpine as app
 
 ENV RAILS_ENV=production
 ENV BUNDLE_WITHOUT="development:test"

Gemfile

@@ -2,10 +2,11 @@
 
 source 'https://rubygems.org'
 
-ruby '3.3.1'
+ruby '3.3.4'
 
 gem 'arabic-letter-connector', require: 'arabic-letter-connector/logic'
 gem 'aws-sdk-s3', require: false
+gem 'aws-sdk-secretsmanager', require: false
 gem 'azure-storage-blob', require: false
 gem 'bootsnap', require: false
 gem 'cancancan'
@@ -22,6 +23,7 @@ gem 'image_processing'
 gem 'jwt'
 gem 'lograge'
 gem 'mysql2', require: false
+gem 'net-smtp', '0.4.0'
 gem 'oj'
 gem 'pagy'
 gem 'pg', require: false

Gemfile.lock

@@ -1,35 +1,35 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (7.1.3.2)
+    actioncable (7.1.3.4)
-      actionpack (= 7.1.3.2)
+      actionpack (= 7.1.3.4)
-      activesupport (= 7.1.3.2)
+      activesupport (= 7.1.3.4)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
       zeitwerk (~> 2.6)
-    actionmailbox (7.1.3.2)
+    actionmailbox (7.1.3.4)
-      actionpack (= 7.1.3.2)
+      actionpack (= 7.1.3.4)
-      activejob (= 7.1.3.2)
+      activejob (= 7.1.3.4)
-      activerecord (= 7.1.3.2)
+      activerecord (= 7.1.3.4)
-      activestorage (= 7.1.3.2)
+      activestorage (= 7.1.3.4)
-      activesupport (= 7.1.3.2)
+      activesupport (= 7.1.3.4)
       mail (>= 2.7.1)
       net-imap
       net-pop
       net-smtp
-    actionmailer (7.1.3.2)
+    actionmailer (7.1.3.4)
-      actionpack (= 7.1.3.2)
+      actionpack (= 7.1.3.4)
-      actionview (= 7.1.3.2)
+      actionview (= 7.1.3.4)
-      activejob (= 7.1.3.2)
+      activejob (= 7.1.3.4)
-      activesupport (= 7.1.3.2)
+      activesupport (= 7.1.3.4)
       mail (~> 2.5, >= 2.5.4)
       net-imap
       net-pop
       net-smtp
       rails-dom-testing (~> 2.2)
-    actionpack (7.1.3.2)
+    actionpack (7.1.3.4)
-      actionview (= 7.1.3.2)
+      actionview (= 7.1.3.4)
-      activesupport (= 7.1.3.2)
+      activesupport (= 7.1.3.4)
       nokogiri (>= 1.8.5)
       racc
       rack (>= 2.2.4)
@@ -37,35 +37,35 @@ GEM
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.2)
       rails-html-sanitizer (~> 1.6)
-    actiontext (7.1.3.2)
+    actiontext (7.1.3.4)
-      actionpack (= 7.1.3.2)
+      actionpack (= 7.1.3.4)
-      activerecord (= 7.1.3.2)
+      activerecord (= 7.1.3.4)
-      activestorage (= 7.1.3.2)
+      activestorage (= 7.1.3.4)
-      activesupport (= 7.1.3.2)
+      activesupport (= 7.1.3.4)
       globalid (>= 0.6.0)
       nokogiri (>= 1.8.5)
-    actionview (7.1.3.2)
+    actionview (7.1.3.4)
-      activesupport (= 7.1.3.2)
+      activesupport (= 7.1.3.4)
       builder (~> 3.1)
       erubi (~> 1.11)
       rails-dom-testing (~> 2.2)
       rails-html-sanitizer (~> 1.6)
-    activejob (7.1.3.2)
+    activejob (7.1.3.4)
-      activesupport (= 7.1.3.2)
+      activesupport (= 7.1.3.4)
       globalid (>= 0.3.6)
-    activemodel (7.1.3.2)
+    activemodel (7.1.3.4)
-      activesupport (= 7.1.3.2)
+      activesupport (= 7.1.3.4)
-    activerecord (7.1.3.2)
+    activerecord (7.1.3.4)
-      activemodel (= 7.1.3.2)
+      activemodel (= 7.1.3.4)
-      activesupport (= 7.1.3.2)
+      activesupport (= 7.1.3.4)
       timeout (>= 0.4.0)
-    activestorage (7.1.3.2)
+    activestorage (7.1.3.4)
-      actionpack (= 7.1.3.2)
+      actionpack (= 7.1.3.4)
-      activejob (= 7.1.3.2)
+      activejob (= 7.1.3.4)
-      activerecord (= 7.1.3.2)
+      activerecord (= 7.1.3.4)
-      activesupport (= 7.1.3.2)
+      activesupport (= 7.1.3.4)
       marcel (~> 1.0)
-    activesupport (7.1.3.2)
+    activesupport (7.1.3.4)
       base64
       bigdecimal
       concurrent-ruby (~> 1.0, >= 1.0.2)
@@ -96,6 +96,9 @@ GEM
       aws-sdk-core (~> 3, >= 3.191.0)
       aws-sdk-kms (~> 1)
       aws-sigv4 (~> 1.8)
+    aws-sdk-secretsmanager (1.91.0)
+      aws-sdk-core (~> 3, >= 3.191.0)
+      aws-sigv4 (~> 1.1)
     aws-sigv4 (1.8.0)
       aws-eventstream (~> 1, >= 1.0.2)
     azure-storage-blob (2.0.3)
@@ -119,7 +122,7 @@ GEM
     bindex (0.8.1)
     bootsnap (1.18.3)
       msgpack (~> 1.2)
-    builder (3.2.4)
+    builder (3.3.0)
     bullet (7.1.6)
       activesupport (>= 3.0.0)
       uniform_notifier (~> 1.11)
@@ -139,7 +142,7 @@ GEM
     cldr-plurals-runtime-rb (1.1.0)
     cmdparse (3.0.7)
     coderay (1.1.3)
-    concurrent-ruby (1.2.3)
+    concurrent-ruby (1.3.4)
     connection_pool (2.4.1)
     crack (1.0.0)
       bigdecimal
@@ -181,7 +184,7 @@ GEM
       rainbow
       rubocop
       smart_properties
-    erubi (1.12.0)
+    erubi (1.13.0)
     factory_bot (6.4.6)
       activesupport (>= 5.0.0)
     factory_bot_rails (6.4.3)
@@ -308,8 +311,8 @@ GEM
     method_source (1.1.0)
     mini_magick (4.12.0)
     mini_mime (1.1.5)
-    mini_portile2 (2.8.6)
+    mini_portile2 (2.8.7)
-    minitest (5.23.0)
+    minitest (5.24.1)
     msgpack (1.7.2)
     multi_json (1.15.0)
     multipart-post (2.4.0)
@@ -317,7 +320,7 @@ GEM
     mysql2 (0.5.6)
     net-http-persistent (4.0.2)
       connection_pool (~> 2.2)
-    net-imap (0.4.10)
+    net-imap (0.4.14)
       date
       net-protocol
     net-pop (0.1.2)
@@ -327,12 +330,12 @@ GEM
     net-smtp (0.4.0)
       net-protocol
     nio4r (2.7.1)
-    nokogiri (1.16.5)
+    nokogiri (1.16.7)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.16.5-aarch64-linux)
+    nokogiri (1.16.7-aarch64-linux)
       racc (~> 1.4)
-    nokogiri (1.16.5-x86_64-linux)
+    nokogiri (1.16.7-x86_64-linux)
       racc (~> 1.4)
     oj (3.16.3)
       bigdecimal (>= 3.0)
@@ -341,8 +344,8 @@ GEM
     os (1.1.4)
     package_json (0.1.0)
     pagy (8.1.2)
-    parallel (1.24.0)
+    parallel (1.25.1)
-    parser (3.3.1.0)
+    parser (3.3.4.0)
       ast (~> 2.4.1)
       racc
     pg (1.5.6)
@@ -366,8 +369,8 @@ GEM
     public_suffix (5.0.5)
     puma (6.4.2)
       nio4r (~> 2.0)
-    racc (1.8.0)
+    racc (1.8.1)
-    rack (3.0.11)
+    rack (3.1.7)
     rack-proxy (0.7.7)
       rack
     rack-session (2.0.0)
@@ -377,20 +380,20 @@ GEM
     rackup (2.1.0)
       rack (>= 3)
       webrick (~> 1.8)
-    rails (7.1.3.2)
+    rails (7.1.3.4)
-      actioncable (= 7.1.3.2)
+      actioncable (= 7.1.3.4)
-      actionmailbox (= 7.1.3.2)
+      actionmailbox (= 7.1.3.4)
-      actionmailer (= 7.1.3.2)
+      actionmailer (= 7.1.3.4)
-      actionpack (= 7.1.3.2)
+      actionpack (= 7.1.3.4)
-      actiontext (= 7.1.3.2)
+      actiontext (= 7.1.3.4)
-      actionview (= 7.1.3.2)
+      actionview (= 7.1.3.4)
-      activejob (= 7.1.3.2)
+      activejob (= 7.1.3.4)
-      activemodel (= 7.1.3.2)
+      activemodel (= 7.1.3.4)
-      activerecord (= 7.1.3.2)
+      activerecord (= 7.1.3.4)
-      activestorage (= 7.1.3.2)
+      activestorage (= 7.1.3.4)
-      activesupport (= 7.1.3.2)
+      activesupport (= 7.1.3.4)
       bundler (>= 1.15.0)
-      railties (= 7.1.3.2)
+      railties (= 7.1.3.4)
     rails-dom-testing (2.2.0)
       activesupport (>= 5.0.0)
       minitest
@@ -405,9 +408,9 @@ GEM
       actionview (> 3.1)
       activesupport (> 3.1)
       railties (> 3.1)
-    railties (7.1.3.2)
+    railties (7.1.3.4)
-      actionpack (= 7.1.3.2)
+      actionpack (= 7.1.3.4)
-      activesupport (= 7.1.3.2)
+      activesupport (= 7.1.3.4)
       irb
       rackup (>= 1.0.0)
       rake (>= 12.2)
@@ -417,9 +420,9 @@ GEM
     rake (13.2.1)
     rdoc (6.6.3.1)
       psych (>= 4.0.0)
-    redis-client (0.22.0)
+    redis-client (0.22.2)
       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 +435,8 @@ GEM
       actionpack (>= 5.2)
       railties (>= 5.2)
     retriable (3.1.2)
-    rexml (3.2.6)
+    rexml (3.3.6)
+      strscan
     rotp (6.3.0)
     rqrcode (2.2.0)
       chunky_png (~> 1.0)
@@ -455,23 +459,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)
+    rubocop-ast (1.31.3)
-      parser (>= 3.3.0.4)
+      parser (>= 3.3.1.0)
-    rubocop-capybara (2.20.0)
-      rubocop (~> 1.41)
-    rubocop-factory_bot (2.25.1)
-      rubocop (~> 1.41)
     rubocop-performance (1.21.0)
       rubocop (>= 1.48.1, < 2.0)
       rubocop-ast (>= 1.31.1, < 2.0)
@@ -480,13 +480,8 @@ GEM
       rack (>= 1.1)
       rubocop (>= 1.33.0, < 2.0)
       rubocop-ast (>= 1.31.1, < 2.0)
-    rubocop-rspec (2.29.1)
+    rubocop-rspec (3.0.3)
-      rubocop (~> 1.40)
+      rubocop (~> 1.61)
-      rubocop-capybara (~> 2.17)
-      rubocop-factory_bot (~> 2.22)
-      rubocop-rspec_rails (~> 2.28)
-    rubocop-rspec_rails (2.28.3)
-      rubocop (~> 1.40)
     ruby-progressbar (1.13.0)
     ruby-vips (2.2.1)
       ffi (~> 1.12)
@@ -502,7 +497,7 @@ GEM
       rack-proxy (>= 0.6.1)
       railties (>= 5.2)
       semantic_range (>= 2.3.0)
-    sidekiq (7.2.2)
+    sidekiq (7.2.4)
       concurrent-ruby (< 2)
       connection_pool (>= 2.3.0)
       rack (>= 2.2.4)
@@ -524,6 +519,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)
@@ -570,6 +566,7 @@ DEPENDENCIES
   annotate
   arabic-letter-connector
   aws-sdk-s3
+  aws-sdk-secretsmanager
   azure-storage-blob
   better_html
   bootsnap
@@ -595,6 +592,7 @@ DEPENDENCIES
   letter_opener_web
   lograge
   mysql2
+  net-smtp (= 0.4.0)
   oj
   pagy
   pg
@@ -627,7 +625,7 @@ DEPENDENCIES
   webmock
 
 RUBY VERSION
-   ruby 3.3.1p55
+   ruby 3.3.4p94
 
 BUNDLED WITH
    2.5.3

app/controllers/account_configs_controller.rb

@@ -13,7 +13,10 @@ class AccountConfigsController < ApplicationController
     AccountConfig::FORM_WITH_CONFETTI_KEY,
     AccountConfig::DOWNLOAD_LINKS_AUTH_KEY,
     AccountConfig::FORCE_SSO_AUTH_KEY,
-    AccountConfig::FLATTEN_RESULT_PDF_KEY
+    AccountConfig::FLATTEN_RESULT_PDF_KEY,
+    AccountConfig::WITH_SIGNATURE_ID,
+    AccountConfig::COMBINE_PDF_RESULT_KEY,
+    AccountConfig::REQUIRE_SIGNING_REASON_KEY
   ].freeze
 
   InvalidKey = Class.new(StandardError)

app/controllers/accounts_controller.rb

@@ -7,7 +7,8 @@ class AccountsController < ApplicationController
     'fr-FR' => 'French (France)',
     'es-ES' => 'Spanish (Spain)',
     'pt-PT' => 'Portuguese (Portugal)',
-    'de-DE' => 'German (Germany)'
+    'de-DE' => 'German (Germany)',
+    'it-IT' => 'Italian (Italy)'
   }.freeze
 
   before_action :load_account

app/controllers/api/api_base_controller.rb

@@ -39,12 +39,17 @@ module Api
 
     private
 
-    def paginate(relation)
+    def paginate(relation, field: :id)
-      result = relation.order(id: :desc)
+      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?
+      if field == :id
-      result = result.where(id: (params[:before].to_i + 1)...) if params[:before].present?
+        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/attachments_controller.rb

@@ -16,7 +16,7 @@ module Api
         cookies.encrypted[:signature_uuids] = build_new_cookie_signatures_json(submitter, attachment)
       end
 
-      render json: attachment.as_json(only: %i[uuid], methods: %i[url filename content_type])
+      render json: attachment.as_json(only: %i[uuid created_at], methods: %i[url filename content_type])
     end
 
     def build_new_cookie_signatures_json(submitter, attachment)

app/controllers/api/form_events_controller.rb

@@ -0,0 +1,36 @@
+# 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,
+                                                                          combined_document_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/submission_events_controller.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Api
+  class SubmissionEventsController < ApiBaseController
+    load_and_authorize_resource :submission, parent: false
+
+    def index
+      submissions = build_completed_query(@submissions)
+
+      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?
+
+      submissions = paginate(submissions.preload(
+                               :created_by_user, :submission_events,
+                               template: :folder,
+                               submitters: { documents_attachments: :blob, attachments_attachments: :blob },
+                               audit_trail_attachment: :blob
+                             ),
+                             field: :completed_at)
+
+      render json: {
+        data: submissions.map do |s|
+                {
+                  event_type: 'submission.completed',
+                  timestamp: s.completed_at,
+                  data: Submissions::SerializeForApi.call(s, s.submitters)
+                }
+              end,
+        pagination: {
+          count: submissions.size,
+          next: submissions.last&.completed_at&.to_i,
+          prev: submissions.first&.completed_at&.to_i
+        }
+      }
+    end
+
+    private
+
+    def build_completed_query(submissions)
+      submissions = submissions.where(
+        Submitter.where(completed_at: nil).where(
+          Submitter.arel_table[:submission_id].eq(Submission.arel_table[:id])
+        ).select(1).arel.exists.not
+      )
+
+      submissions.joins(:submitters)
+                 .group(:id)
+                 .select(Submission.arel_table[Arel.star],
+                         Submitter.arel_table[:completed_at].maximum.as('completed_at'))
+    end
+  end
+end

app/controllers/api/submissions_controller.rb

@@ -19,10 +19,14 @@ module Api
 
       submissions = paginate(submissions.preload(:created_by_user, :submitters,
                                                  template: :folder,
+                                                 combined_document_attachment: :blob,
                                                  audit_trail_attachment: :blob))
 
       render json: {
-        data: submissions.as_json(Submissions::SerializeForApi::SERIALIZE_PARAMS),
+        data: submissions.map do |s|
+          Submissions::SerializeForApi.call(s, s.submitters, params,
+                                            with_events: false, with_documents: false, with_values: false)
+        end,
         pagination: {
           count: submissions.size,
           next: submissions.last&.id,
@@ -44,7 +48,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,14 +79,8 @@ module Api
         end
       end
 
-      json = submissions.flat_map do |submission|
+      render json: build_create_json(submissions)
-        submission.submitters.map do |s|
+    rescue Submitters::NormalizeValues::BaseError, DownloadUtils::UnableToDownload => e
-          Submitters::SerializeForApi.call(s, with_documents: false, with_urls: true)
-        end
-      end
-
-      render json:
-    rescue Submitters::NormalizeValues::BaseError => e
       Rollbar.warning(e) if defined?(Rollbar)
 
       render json: { error: e.message }, status: :unprocessable_entity
@@ -102,6 +100,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 +131,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:
@@ -142,13 +151,14 @@ module Api
     def submissions_params
       permitted_attrs = [
         :send_email, :send_sms, :bcc_completed, :completed_redirect_url, :reply_to, :go_to_last,
+        :expire_at,
         {
           message: %i[subject body],
           submitters: [[:send_email, :send_sms, :completed_redirect_url, :uuid, :name, :email, :role,
                         :completed, :phone, :application_key, :external_id, :reply_to, :go_to_last,
                         { metadata: {}, values: {}, readonly_fields: [], message: %i[subject body],
                           fields: [:name, :uuid, :default_value, :value, :title, :description,
-                                   :readonly, :redacted, :validation_pattern, :invalid_message,
+                                   :readonly, :validation_pattern, :invalid_message,
                                    { default_value: [], value: [], preferences: {} }] }]]
         }
       ]

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,12 @@ module Api
 
       render json: Submitters::SerializeForApi.call(@submitter, with_template: false,
                                                                 with_urls: true,
-                                                                with_events: false)
+                                                                with_events: false,
+                                                                params:)
+    rescue Submitters::NormalizeValues::BaseError, DownloadUtils::UnableToDownload => e
+      Rollbar.warning(e) if defined?(Rollbar)
+
+      render json: { error: e.message }, status: :unprocessable_entity
     end
 
     def submitter_params
@@ -84,7 +91,7 @@ module Api
         :completed, :phone, :application_key, :external_id, :go_to_last,
         { metadata: {}, values: {}, readonly_fields: [], message: %i[subject body],
           fields: [[:name, :uuid, :default_value, :value,
-                    :readonly, :redacted, :validation_pattern, :invalid_message,
+                    :readonly, :validation_pattern, :invalid_message,
                     { default_value: [], value: [], preferences: {} }]] }
       )
     end

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/templates_controller.rb

@@ -18,7 +18,7 @@ module Api
 
       preview_image_attachments =
         ActiveStorage::Attachment.joins(:blob)
-                                 .where(blob: { filename: '0.jpg' })
+                                 .where(blob: { filename: ['0.png', '0.jpg'] })
                                  .where(record_id: schema_documents.map(&:id),
                                         record_type: 'ActiveStorage::Attachment',
                                         name: :preview_images)
@@ -95,8 +95,9 @@ module Api
     def template_params
       permitted_params = [
         :name,
+        :external_id,
         {
-          submitters: [%i[name uuid]],
+          submitters: [%i[name uuid is_requester invite_by_uuid invite_by_uuid linked_to_uuid email]],
           fields: [[:uuid, :submitter_uuid, :name, :type,
                     :required, :readonly, :default_value,
                     :title, :description,

app/controllers/api/tools_controller.rb

@@ -0,0 +1,42 @@
+# 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
+
+    def verify
+      file = Base64.decode64(params[:file])
+      pdf = HexaPDF::Document.new(io: StringIO.new(file))
+
+      trusted_certs = Accounts.load_trusted_certs(current_account)
+
+      is_checksum_found = ActiveStorage::Attachment.joins(:blob)
+                                                   .where(name: 'documents', record_type: 'Submitter')
+                                                   .exists?(blob: { checksum: Digest::MD5.base64digest(file) })
+
+      render json: {
+        checksum_status: is_checksum_found ? 'verified' : 'not_found',
+        signatures: pdf.signatures.map do |sig|
+          {
+            verification_result: sig.verify(trusted_certs:).messages,
+            signer_name: sig.signer_name,
+            signing_reason: sig.signing_reason,
+            signing_time: sig.signing_time,
+            signature_type: sig.signature_type
+          }
+        end
+      }
+    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/embed_scripts_controller.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+class EmbedScriptsController < ActionController::Metal
+  DUMMY_SCRIPT = <<~JAVASCRIPT.freeze
+    const DummyBuilder = class extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+          <div style="text-align: center; padding: 20px; font-family: Arial, sans-serif;">
+            <h2>Upgrade to Pro</h2>
+            <p>Unlock embedded components by upgrading to Pro</p>
+            <div style="margin-top: 40px;">
+              <a href="#{Docuseal::CONSOLE_URL}/on_premise" target="_blank" style="padding: 15px 25px; background-color: #222; color: white; text-decoration: none; border-radius: 5px; font-size: 16px; cursor: pointer;">
+                Learn More
+              </a>
+            </div>
+          </div>
+        `;
+      }
+    };
+
+    const DummyForm = class extends DummyBuilder {};
+
+    if (!window.customElements.get('docuseal-builder')) {
+      window.customElements.define('docuseal-builder', DummyBuilder);
+    }
+
+    if (!window.customElements.get('docuseal-form')) {
+      window.customElements.define('docuseal-form', DummyForm);
+    }
+  JAVASCRIPT
+
+  def show
+    headers['Content-Type'] = 'application/javascript'
+
+    self.response_body = DUMMY_SCRIPT
+
+    self.status = 200
+  end
+end

app/controllers/start_form_controller.rb

@@ -11,29 +11,29 @@ class StartFormController < ApplicationController
 
   def show
     @submitter = @template.submissions.new(account_id: @template.account_id)
-                          .submitters.new(uuid: @template.submitters.first['uuid'])
+                          .submitters.new(uuid: (filter_undefined_submitters(@template).first ||
+                                                 @template.submitters.first)['uuid'])
   end
 
   def update
     return redirect_to start_form_path(@template.slug) if @template.archived_at?
 
-    @submitter = Submitter.where(submission: @template.submissions.where(archived_at: nil))
+    @submitter = find_or_initialize_submitter(@template, submitter_params)
-                          .order(id: :desc)
-                          .then { |rel| params[:resubmit].present? ? rel.where(completed_at: nil) : rel }
-                          .find_or_initialize_by(**submitter_params.compact_blank)
 
     if @submitter.completed_at?
       redirect_to start_form_completed_path(@template.slug, email: submitter_params[:email])
     else
-      if @template.submitters.to_a.size > 1 && @submitter.new_record?
+      if filter_undefined_submitters(@template).size > 1 && @submitter.new_record?
         @error_message = 'Not found'
 
         return render :show
       end
 
-      assign_submission_attributes(@submitter, @template) if @submitter.new_record?
+      if (is_new_record = @submitter.new_record?)
+        assign_submission_attributes(@submitter, @template)
 
-      is_new_record = @submitter.new_record?
+        Submissions::AssignDefinedSubmitters.call(@submitter.submission)
+      end
 
       if @submitter.save
         if is_new_record
@@ -55,14 +55,21 @@ class StartFormController < ApplicationController
 
   private
 
+  def find_or_initialize_submitter(template, submitter_params)
+    Submitter.where(submission: template.submissions.where(expire_at: Time.current..)
+                                        .or(template.submissions.where(expire_at: nil)).where(archived_at: nil))
+             .order(id: :desc)
+             .where(declined_at: nil)
+             .then { |rel| params[:resubmit].present? ? rel.where(completed_at: nil) : rel }
+             .find_or_initialize_by(**submitter_params.compact_blank)
+  end
+
   def assign_submission_attributes(submitter, template)
     resubmit_submitter =
-      if params[:resubmit].present?
+      (Submitter.where(submission: template.submissions).find_by(slug: params[:resubmit]) if params[:resubmit].present?)
-        Submitter.where(submission: @template.submissions).find_by(slug: params[:resubmit])
-      end
 
     submitter.assign_attributes(
-      uuid: template.submitters.first['uuid'],
+      uuid: (filter_undefined_submitters(template).first || @template.submitters.first)['uuid'],
       ip: request.remote_ip,
       ua: request.user_agent,
       values: resubmit_submitter&.preferences&.fetch('default_values', nil) || {},
@@ -79,11 +86,18 @@ class StartFormController < ApplicationController
     submitter.submission ||= Submission.new(template:,
                                             account_id: template.account_id,
                                             template_submitters: template.submitters,
+                                            submitters: [submitter],
                                             source: :link)
 
+    submitter.account_id = submitter.submission.account_id
+
     submitter
   end
 
+  def filter_undefined_submitters(template)
+    Templates.filter_undefined_submitters(template)
+  end
+
   def submitter_params
     params.require(:submitter).permit(:email, :phone, :name).tap do |attrs|
       attrs[:email] = Submissions.normalize_email(attrs[:email])

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,20 @@ 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)
+        'Submission has been removed'
+      else
+        @submission.update!(archived_at: Time.current)
 
-    redirect_back(fallback_location: template_path(@submission.template), notice: 'Submission has been archived')
+        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/submissions_download_controller.rb

@@ -33,7 +33,7 @@ class SubmissionsDownloadController < ApplicationController
       return head :not_found
     end
 
-    if params[:combined]
+    if params[:combined] == 'true'
       url = build_combined_url(submitter)
 
       if url

app/controllers/submit_form_controller.rb

@@ -8,28 +8,16 @@ class SubmitFormController < ApplicationController
   skip_authorization_check
 
   CONFIG_KEYS = [].freeze
-  PRELOAD_ALL_PAGES_AMOUNT = 200
 
   def show
     @submitter = Submitter.find_by!(slug: params[:slug])
 
     return redirect_to submit_form_completed_path(@submitter.slug) if @submitter.completed_at?
     return render :archived if @submitter.submission.template.archived_at? || @submitter.submission.archived_at?
+    return render :expired if @submitter.submission.expired?
+    return render :declined if @submitter.declined_at?
 
-    ActiveRecord::Associations::Preloader.new(
+    Submitters.preload_with_pages(@submitter)
-      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
 
     Submitters::MaybeUpdateDefaultValues.call(@submitter, current_user)
 
@@ -40,7 +28,15 @@ class SubmitFormController < ApplicationController
 
     return unless @form_configs[:prefill_signature]
 
-    @signature_attachment =
+    if (user_signature = UserConfigs.load_signature(current_user))
+      @signature_attachment = ActiveStorage::Attachment.find_or_create_by!(
+        blob_id: user_signature.blob_id,
+        name: 'attachments',
+        record: @submitter
+      )
+    end
+
+    @signature_attachment ||=
       Submitters::MaybeAssignDefaultBrowserSignature.call(@submitter, params, cookies, @attachments_index.values)
 
     @attachments_index[@signature_attachment.uuid] = @signature_attachment if @signature_attachment
@@ -54,11 +50,15 @@ class SubmitFormController < ApplicationController
     end
 
     if submitter.template.archived_at? || submitter.submission.archived_at?
-      Rollbar.info("Archived template: #{submitter.template.id}") if defined?(Rollbar)
-
       return render json: { error: 'Form has been archived.' }, status: :unprocessable_entity
     end
 
+    if submitter.submission.expired?
+      return render json: { error: 'Form has been expired.' }, status: :unprocessable_entity
+    end
+
+    return render json: { error: 'Form has been declined.' }, status: :unprocessable_entity if submitter.declined_at?
+
     Submitters::SubmitValues.call(submitter, params, request)
 
     head :ok

app/controllers/submit_form_decline_controller.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class SubmitFormDeclineController < ApplicationController
+  skip_before_action :authenticate_user!
+  skip_authorization_check
+
+  def create
+    submitter = Submitter.find_by!(slug: params[:submit_form_slug])
+
+    return redirect_to submit_form_path(submitter.slug) if submitter.declined_at? ||
+                                                           submitter.completed_at? ||
+                                                           submitter.submission.archived_at? ||
+                                                           submitter.submission.expired? ||
+                                                           submitter.submission.template.archived_at?
+
+    ApplicationRecord.transaction do
+      submitter.update!(declined_at: Time.current)
+
+      SubmissionEvents.create_with_tracking_data(submitter, 'decline_form', request, { reason: params[:reason] })
+    end
+
+    user = submitter.submission.created_by_user || submitter.template.author
+
+    SubmitterMailer.declined_email(submitter, user).deliver_later!
+    SendFormDeclinedWebhookRequestJob.perform_async('submitter_id' => submitter.id)
+
+    redirect_to submit_form_path(submitter.slug)
+  end
+end

app/controllers/submit_form_download_controller.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+class SubmitFormDownloadController < ApplicationController
+  skip_before_action :authenticate_user!
+  skip_authorization_check
+
+  FILES_TTL = 5.minutes
+
+  def index
+    submitter = Submitter.find_by!(slug: params[:submit_form_slug])
+
+    return redirect_to submitter_download_index_path(submitter.slug) if submitter.completed_at?
+
+    return head :unprocessable_entity if submitter.declined_at? ||
+                                         submitter.submission.archived_at? ||
+                                         submitter.submission.expired? ||
+                                         submitter.submission.template.archived_at?
+
+    last_completed_submitter = submitter.submission.submitters
+                                        .where.not(id: submitter.id)
+                                        .where.not(completed_at: nil)
+                                        .max_by(&:completed_at)
+
+    attachments =
+      if last_completed_submitter
+        Submitters.select_attachments_for_download(last_completed_submitter)
+      else
+        submitter.submission.template.schema_documents.preload(:blob)
+      end
+
+    urls = attachments.map do |attachment|
+      ActiveStorage::Blob.proxy_url(attachment.blob, expires_at: FILES_TTL.from_now.to_i)
+    end
+
+    render json: urls
+  end
+end

app/controllers/submit_form_invite_controller.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+class SubmitFormInviteController < ApplicationController
+  skip_before_action :authenticate_user!
+  skip_authorization_check
+
+  def create
+    submitter = Submitter.find_by!(slug: params[:submit_form_slug])
+
+    return head :unprocessable_entity unless can_invite?(submitter)
+
+    invite_submitters = filter_invite_submitters(submitter)
+
+    ApplicationRecord.transaction do
+      invite_submitters.each do |item|
+        attrs = submitters_attributes.find { |e| e[:uuid] == item['uuid'] }
+
+        next unless attrs
+
+        submitter.submission.submitters.create!(**attrs, account_id: submitter.account_id)
+
+        SubmissionEvents.create_with_tracking_data(submitter, 'invite_party', request, { uuid: submitter.uuid })
+      end
+
+      submitter.submission.update!(submitters_order: :preserved)
+    end
+
+    submitter.submission.submitters.reload
+
+    if invite_submitters.all? { |s| submitter.submission.submitters.any? { |e| e.uuid == s['uuid'] } }
+      Submitters::SubmitValues.call(submitter, ActionController::Parameters.new(completed: 'true'), request)
+
+      head :ok
+    else
+      head :unprocessable_entity
+    end
+  end
+
+  private
+
+  def can_invite?(submitter)
+    !submitter.declined_at? &&
+      !submitter.completed_at? &&
+      !submitter.submission.archived_at? &&
+      !submitter.submission.expired? &&
+      !submitter.submission.template.archived_at?
+  end
+
+  def filter_invite_submitters(submitter)
+    (submitter.submission.template_submitters || submitter.submission.template.submitters).select do |s|
+      s['invite_by_uuid'] == submitter.uuid && submitter.submission.submitters.none? { |e| e.uuid == s['uuid'] }
+    end
+  end
+
+  def submitters_attributes
+    params.require(:submission).permit(submitters: [%i[uuid email]]).fetch(:submitters, [])
+  end
+end

app/controllers/submit_form_values_controller.rb

@@ -7,15 +7,17 @@ class SubmitFormValuesController < ApplicationController
   def index
     submitter = Submitter.find_by!(slug: params[:submit_form_slug])
 
-    return render json: {} if submitter.completed_at?
+    return render json: {} if submitter.completed_at? || submitter.declined_at?
-    return render json: {} if submitter.submission.template.archived_at? || submitter.submission.archived_at?
+    return render json: {} if submitter.submission.template.archived_at? ||
+                              submitter.submission.archived_at? ||
+                              submitter.submission.expired?
 
     value = submitter.values[params['field_uuid']]
     attachment = submitter.attachments.where(created_at: params[:after]..).find_by(uuid: value) if value.present?
 
     render json: {
       value:,
-      attachment: attachment&.as_json(only: %i[uuid], methods: %i[url filename content_type])
+      attachment: attachment&.as_json(only: %i[uuid created_at], methods: %i[url filename content_type])
     }, head: :ok
   end
 end

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])
@@ -82,8 +87,6 @@ class TemplatesController < ApplicationController
       if params[:permanently].present?
         @template.destroy!
 
-        Rollbar.info("Remove template: #{@template.id}") if defined?(Rollbar)
-
         'Template has been removed.'
       else
         @template.update!(archived_at: Time.current)
@@ -100,7 +103,7 @@ class TemplatesController < ApplicationController
     params.require(:template).permit(
       :name,
       { schema: [%i[attachment_uuid name]],
-        submitters: [%i[name uuid]],
+        submitters: [%i[name uuid is_requester linked_to_uuid invite_by_uuid email]],
         fields: [[:uuid, :submitter_uuid, :name, :type,
                   :required, :readonly, :default_value,
                   :title, :description,
@@ -120,7 +123,7 @@ class TemplatesController < ApplicationController
     if template.account == current_account
       redirect_to(edit_template_path(@template))
     else
-      redirect_back(fallback_location: root_path, notice: 'Template has been clonned')
+      redirect_back(fallback_location: root_path, notice: 'Template has been cloned')
     end
   end
 

app/controllers/templates_form_preview_controller.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+class TemplatesFormPreviewController < ApplicationController
+  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']) }
+
+    Submitters.preload_with_pages(@submitter)
+
+    @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

@@ -9,7 +9,7 @@ class TemplatesPreferencesController < ApplicationController
     authorize!(:update, @template)
 
     @template.preferences = @template.preferences.merge(template_params[:preferences])
-    @template.preferences = @template.preferences.reject { |_, v| v.is_a?(String) && v.blank? }
+    @template.preferences = @template.preferences.reject { |_, v| (v.is_a?(String) || v.is_a?(Hash)) && v.blank? }
     @template.save!
 
     head :ok
@@ -22,12 +22,17 @@ 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_redirect_url
                       completed_notification_email_subject completed_notification_email_body
-                      completed_notification_email_enabled completed_notification_email_attach_audit]
+                      completed_notification_email_enabled completed_notification_email_attach_audit] +
+                      [completed_message: %i[title body]]
     ).tap do |attrs|
       attrs[:preferences] = attrs[:preferences].transform_values do |value|
         if %w[true false].include?(value)
           value == 'true'
+        elsif value.respond_to?(:compact_blank)
+          value.compact_blank
         else
           value
         end

app/controllers/templates_recipients_controller.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+class TemplatesRecipientsController < ApplicationController
+  load_and_authorize_resource :template
+
+  def create
+    authorize!(:update, @template)
+
+    @template.submitters =
+      submitters_params.map { |s| s.reject { |_, v| v.is_a?(String) && v.blank? } }
+
+    @template.save!
+
+    render json: { submitters: @template.submitters }
+  end
+
+  private
+
+  def submitters_params
+    params.require(:template).permit(
+      submitters: [%i[name uuid is_requester invite_by_uuid linked_to_uuid email option]]
+    ).fetch(:submitters, {}).values.filter_map do |s|
+      next if s[:uuid].blank?
+
+      if s[:is_requester] == '1' && s[:invite_by_uuid].blank?
+        s[:is_requester] = true
+      else
+        s.delete(:is_requester)
+      end
+
+      s.delete(:invite_by_uuid) if s[:invite_by_uuid].blank?
+
+      option = s.delete(:option)
+
+      if option.present?
+        case option
+        when 'is_requester'
+          s[:is_requester] = true
+        when 'not_set'
+          s.delete(:is_requester)
+          s.delete(:email)
+          s.delete(:linked_to_uuid)
+          s.delete(:invite_by_uuid)
+        when /\Alinked_to_(.*)\z/
+          s[:linked_to_uuid] = ::Regexp.last_match(-1)
+        when /\Ainvite_by_(.*)\z/
+          s[:invite_by_uuid] = ::Regexp.last_match(-1)
+        end
+      end
+
+      s
+    end
+  end
+end

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)
 
@@ -50,23 +52,17 @@ class TemplatesUploadsController < ApplicationController
   def create_file_params_from_url
     tempfile = Tempfile.new
     tempfile.binmode
-    tempfile.write(conn.get(Addressable::URI.parse(params[:url]).display_uri.to_s).body)
+    tempfile.write(DownloadUtils.call(params[:url]).body)
     tempfile.rewind
 
     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)
     )
 
     { files: [file] }
   end
-
-  def conn
-    Faraday.new do |faraday|
-      faraday.response :follow_redirects
-    end
-  end
 end

app/controllers/verify_pdf_signature_controller.rb

@@ -9,26 +9,7 @@ class VerifyPdfSignatureController < ApplicationController
         HexaPDF::Document.new(io: file.open)
       end
 
-    cert_data =
+    trusted_certs = Accounts.load_trusted_certs(current_account)
-      if Docuseal.multitenant?
-        value = EncryptedConfig.find_by(account: current_account, key: EncryptedConfig::ESIGN_CERTS_KEY)&.value || {}
-
-        Docuseal::CERTS.merge(value)
-      else
-        EncryptedConfig.find_by(key: EncryptedConfig::ESIGN_CERTS_KEY)&.value || {}
-      end
-
-    default_pkcs = GenerateCertificate.load_pkcs(cert_data)
-
-    custom_certs = cert_data.fetch('custom', []).map do |e|
-      OpenSSL::PKCS12.new(Base64.urlsafe_decode64(e['data']), e['password'].to_s)
-    end
-
-    trusted_certs = [default_pkcs.certificate,
-                     *default_pkcs.ca_certs,
-                     *custom_certs.map(&:certificate),
-                     *custom_certs.flat_map(&:ca_certs).compact,
-                     *Docuseal.trusted_certs]
 
     render turbo_stream: turbo_stream.replace('result', partial: 'result',
                                                         locals: { pdfs:, files: params[:files], trusted_certs: })

app/controllers/webhook_preferences_controller.rb

@@ -5,6 +5,7 @@ class WebhookPreferencesController < ApplicationController
     form.viewed
     form.started
     form.completed
+    form.declined
     template.created
     template.updated
     submission.created

app/controllers/webhook_secret_controller.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class WebhookSecretController < ApplicationController
+  before_action :load_encrypted_config
+  authorize_resource :encrypted_config, parent: false
+
+  def index; end
+
+  def create
+    @encrypted_config.assign_attributes(value: {
+      encrypted_config_params[:key] => encrypted_config_params[:value]
+    }.compact_blank)
+
+    @encrypted_config.value.present? ? @encrypted_config.save! : @encrypted_config.delete
+
+    redirect_back(fallback_location: settings_webhooks_path, notice: 'Webhook Secret has been saved.')
+  end
+
+  private
+
+  def load_encrypted_config
+    @encrypted_config =
+      current_account.encrypted_configs.find_or_initialize_by(key: EncryptedConfig::WEBHOOK_SECRET_KEY)
+  end
+
+  def encrypted_config_params
+    params.require(:encrypted_config).permit(value: %i[key value]).fetch(:value, {})
+  end
+end

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

@@ -24,6 +24,11 @@ import SubmitForm from './elements/submit_form'
 import PromptPassword from './elements/prompt_password'
 import EmailsTextarea from './elements/emails_textarea'
 import ToggleOnSubmit from './elements/toggle_on_submit'
+import PasswordInput from './elements/password_input'
+import SearchInput from './elements/search_input'
+import ToggleAttribute from './elements/toggle_attribute'
+import LinkedInput from './elements/linked_input'
+import CheckboxGroup from './elements/checkbox_group'
 
 import * as TurboInstantClick from './lib/turbo_instant_click'
 
@@ -85,9 +90,16 @@ safeRegisterElement('prompt-password', PromptPassword)
 safeRegisterElement('emails-textarea', EmailsTextarea)
 safeRegisterElement('toggle-cookies', ToggleCookies)
 safeRegisterElement('toggle-on-submit', ToggleOnSubmit)
+safeRegisterElement('password-input', PasswordInput)
+safeRegisterElement('search-input', SearchInput)
+safeRegisterElement('toggle-attribute', ToggleAttribute)
+safeRegisterElement('linked-input', LinkedInput)
+safeRegisterElement('checkbox-group', CheckboxGroup)
 
 safeRegisterElement('template-builder', class extends HTMLElement {
   connectedCallback () {
+    document.addEventListener('turbo:submit-end', this.onSubmit)
+
     this.appElem = document.createElement('div')
 
     this.appElem.classList.add('md:h-screen')
@@ -95,6 +107,7 @@ safeRegisterElement('template-builder', class extends HTMLElement {
     this.app = createApp(TemplateBuilder, {
       template: reactive(JSON.parse(this.dataset.template)),
       backgroundColor: '#faf7f5',
+      locale: this.dataset.locale,
       withPhone: this.dataset.withPhone === 'true',
       withLogo: this.dataset.withLogo !== 'false',
       editable: this.dataset.editable !== 'false',
@@ -102,17 +115,29 @@ safeRegisterElement('template-builder', class extends HTMLElement {
       withPayment: this.dataset.withPayment === 'true',
       isPaymentConnected: this.dataset.isPaymentConnected === 'true',
       withFormula: this.dataset.withFormula === 'true',
+      withSendButton: this.dataset.withSendButton !== 'false',
+      withSignYourselfButton: this.dataset.withSignYourselfButton !== 'false',
       withConditions: this.dataset.withConditions === 'true',
       currencies: (this.dataset.currencies || '').split(',').filter(Boolean),
       acceptFileTypes: this.dataset.acceptFileTypes
     })
 
-    this.app.mount(this.appElem)
+    this.component = this.app.mount(this.appElem)
 
     this.appendChild(this.appElem)
   }
 
+  onSubmit = (e) => {
+    if (e.detail.success && e.detail?.formSubmission?.formElement?.id === 'submitters_form') {
+      e.detail.fetchResponse.response.json().then((data) => {
+        this.component.template.submitters = data.submitters
+      })
+    }
+  }
+
   disconnectedCallback () {
+    document.removeEventListener('turbo:submit-end', this.onSubmit)
+
     this.app?.unmount()
     this.appElem?.remove()
   }
@@ -124,6 +149,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/application.scss

@@ -51,6 +51,10 @@ button[disabled] .enabled {
   @apply input input-bordered bg-white;
 }
 
+.base-input-slim {
+  @apply input input-bordered bg-white h-10;
+}
+
 .base-textarea {
   @apply textarea textarea-bordered bg-white rounded-3xl;
 }
@@ -100,7 +104,7 @@ button[disabled] .enabled {
 .autocomplete {
   background: white;
   z-index: 1000;
-  font: 14px/22px "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font: 16px/25px "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   overflow: auto;
   box-sizing: border-box;
   @apply border border-base-300 mt-1 rounded-md;
@@ -111,7 +115,7 @@ button[disabled] .enabled {
 }
 
 .autocomplete > div {
-  @apply px-2 py-1 font-normal text-sm;
+  @apply px-2 py-1.5 font-normal;
 }
 
 .autocomplete .group {

app/javascript/elements/checkbox_group.js

@@ -0,0 +1,15 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.items.forEach((item) => {
+      item.addEventListener('change', (e) => {
+        this.items.forEach((item) => {
+          item.checked = item === e.target && e.target.checked
+        })
+      })
+    })
+  }
+
+  get items () {
+    return this.querySelectorAll('input[type="checkbox"]')
+  }
+}

app/javascript/elements/linked_input.js

@@ -0,0 +1,31 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    if (this.target) {
+      this.input.value = this.target.value
+
+      this.target.addEventListener('input', (e) => {
+        this.input.value = e.target.value
+      })
+
+      this.target.addEventListener('linked-input.update', (e) => {
+        this.input.value = e.target.value
+      })
+    }
+  }
+
+  get input () {
+    return this.querySelector('input')
+  }
+
+  get target () {
+    if (this.dataset.targetId) {
+      const listItem = this.closest('[data-targets="dynamic-list.items"]')
+
+      if (listItem) {
+        return listItem.querySelector(`#${this.dataset.targetId}`)
+      } else {
+        return document.getElementById(this.dataset.targetId)
+      }
+    }
+  }
+}

app/javascript/elements/password_input.js

@@ -0,0 +1,35 @@
+import { target, targetable } from '@github/catalyst/lib/targetable'
+
+export default targetable(class extends HTMLElement {
+  static [target.static] = [
+    'visiblePasswordIcon',
+    'hiddenPasswordIcon',
+    'passwordInput',
+    'togglePasswordVisibility'
+  ]
+
+  connectedCallback () {
+    this.togglePasswordVisibility.addEventListener('click', this.handleTogglePasswordVisibility)
+    document.addEventListener('turbo:submit-start', this.setInitialPasswordType)
+  }
+
+  disconnectedCallback () {
+    this.togglePasswordVisibility.removeEventListener('click', this.handleTogglePasswordVisibility)
+    document.removeEventListener('turbo:submit-start', this.setInitialPasswordType)
+  }
+
+  handleTogglePasswordVisibility = () => {
+    this.passwordInput.type = this.passwordInput.type === 'password' ? 'text' : 'password'
+    this.toggleIcon()
+  }
+
+  setInitialPasswordType = () => {
+    this.passwordInput.type = 'password'
+    this.toggleIcon()
+  }
+
+  toggleIcon = () => {
+    this.visiblePasswordIcon.classList.toggle('hidden', this.passwordInput.type === 'password')
+    this.hiddenPasswordIcon.classList.toggle('hidden', this.passwordInput.type === 'text')
+  }
+})

app/javascript/elements/search_input.js

@@ -0,0 +1,25 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.input.addEventListener('focus', () => {
+      if (this.title) {
+        this.title.classList.add('hidden', 'md:block')
+        this.input.classList.add('w-60')
+      }
+    })
+
+    this.input.addEventListener('blur', (e) => {
+      if (this.title && !e.target.value) {
+        this.title.classList.remove('hidden')
+        this.input.classList.remove('w-60')
+      }
+    })
+  }
+
+  get input () {
+    return this.querySelector('input')
+  }
+
+  get title () {
+    return document.querySelector(this.dataset.title)
+  }
+}

app/javascript/elements/submitter_autocomplete.js

@@ -24,6 +24,7 @@ export default class extends HTMLElement {
 
       if (input && item[field]) {
         input.value = item[field]
+        input.dispatchEvent(new CustomEvent('linked-input.update', { bubbles: true }))
       }
 
       if (textarea && item[field]) {

app/javascript/elements/toggle_attribute.js

@@ -0,0 +1,28 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.input.addEventListener('change', (event) => {
+      if (this.dataset.attribute) {
+        this.target[this.dataset.attribute] = event.target.checked
+      }
+
+      if (this.dataset.className) {
+        this.target.classList.toggle(this.dataset.className, event.target.value !== this.dataset.value)
+        if (this.dataset.className === 'hidden' && this.target.tagName === 'INPUT') {
+          this.target.disabled = event.target.value !== this.dataset.value
+        }
+      }
+
+      if (this.dataset.attribute === 'disabled') {
+        this.target.value = ''
+      }
+    })
+  }
+
+  get input () {
+    return this.querySelector('input[type="checkbox"]') || this.querySelector('select')
+  }
+
+  get target () {
+    return document.getElementById(this.dataset.targetId)
+  }
+}

app/javascript/elements/turbo_modal.js

@@ -22,7 +22,7 @@ export default actionable(class extends HTMLElement {
   }
 
   onSubmit = (e) => {
-    if (e.detail.success) {
+    if (e.detail.success && e.detail?.formSubmission?.formElement?.dataset?.closeOnSubmit !== 'false') {
       this.close()
     }
   }

app/javascript/form.js

@@ -14,11 +14,17 @@ safeRegisterElement('submission-form', class extends HTMLElement {
 
     this.app = createApp(Form, {
       submitter: JSON.parse(this.dataset.submitter),
+      inviteSubmitters: JSON.parse(this.dataset.inviteSubmitters),
       canSendEmail: this.dataset.canSendEmail === 'true',
       previousSignatureValue: this.dataset.previousSignatureValue,
       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,
+      withSignatureId: this.dataset.withSignatureId === 'true',
+      requireSigningReason: this.dataset.requireSigningReason === 'true',
       withConfetti: this.dataset.withConfetti !== 'false',
       withDisclosure: this.dataset.withDisclosure === 'true',
       withTypedSignature: this.dataset.withTypedSignature !== 'false',

app/javascript/rollbar.js

@@ -18,9 +18,15 @@ if (token) {
     transform (payload) {
       payload.body.telemetry = []
 
-      const string = JSON.stringify(payload)
+      if (payload.request.query_string) {
+        payload.request.query_string = ''
+      }
 
-      return JSON.parse(string.replace(/(\/[des]\/)\w{6}/g, (_, m) => m))
+      if (payload.request.url) {
+        payload.request.url = payload.request.url.replace(/(\/[sdep]\/)(\w{5})[^/]+/, '$1$2')
+      }
+
+      return payload
     },
     payload: {
       client: {

app/javascript/submission_form/area.vue

@@ -3,10 +3,10 @@
     class="field-area flex absolute lg:text-base -outline-offset-1"
     dir="auto"
     :style="computedStyle"
-    :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 }"
+    :class="{ 'text-[1.6vw] 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"
@@ -53,18 +54,44 @@
       class="object-contain mx-auto"
       :src="stamp.url"
     >
-    <img
+    <div
       v-else-if="field.type === 'signature' && signature"
-      class="object-contain mx-auto"
+      class="flex flex-col justify-between h-full overflow-hidden"
-      :src="signature.url"
     >
+      <div
+        class="flex-grow flex overflow-hidden"
+        style="min-height: 50%"
+      >
+        <img
+          class="object-contain mx-auto"
+          :src="signature.url"
+        >
+      </div>
+      <div
+        v-if="withSignatureId"
+        class="w-full mt-1 text-[1vw] lg:text-[0.55rem] lg:leading-[0.65rem]"
+      >
+        <div class="truncate uppercase">
+          ID: {{ signature.uuid }}
+        </div>
+        <div>
+          {{ t('reason') }}: {{ values[field.preferences?.reason_field_uuid] || t('digitally_signed_by') }} {{ submitter.name }}
+          <template v-if="submitter.email">
+            &lt;{{ submitter.email }}&gt;
+          </template>
+        </div>
+        <div>
+          {{ new Date(signature.created_at).toLocaleString(undefined, { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric', timeZoneName: 'short' }) }}
+        </div>
+      </div>
+    </div>
     <img
       v-else-if="field.type === 'initials' && initials"
       class="object-contain mx-auto"
       :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
@@ -74,7 +101,7 @@
         :href="attachment.url"
       >
         <IconPaperclip
-          class="inline w-[1.5vw] h-[1.5vw] lg:w-4 lg:h-4"
+          class="inline w-[1.6vw] h-[1.6vw] lg:w-4 lg:h-4"
         />
         {{ attachment.filename }}
       </a>
@@ -159,7 +186,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'">
@@ -192,11 +224,31 @@ export default {
       type: Object,
       required: true
     },
+    submitter: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    withSignatureId: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     isValueSet: {
       type: Boolean,
       required: false,
       default: false
     },
+    scrollPadding: {
+      type: String,
+      required: false,
+      default: '-80px'
+    },
+    withFieldPlaceholder: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     submittable: {
       type: Boolean,
       required: false,
@@ -207,6 +259,11 @@ export default {
       required: false,
       default: ''
     },
+    values: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
     isActive: {
       type: Boolean,
       required: false,
@@ -358,7 +415,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 +423,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

@@ -1,6 +1,6 @@
 <template>
   <template
-    v-for="step in steps"
+    v-for="(step, stepIndex) in steps"
     :key="step[0].uuid"
   >
     <template
@@ -18,15 +18,20 @@
           <FieldArea
             :ref="setAreaRef"
             v-model="values[field.uuid]"
+            :values="values"
             :field="field"
             :area="area"
-            :submittable="true"
+            :submittable="submittable"
             :field-index="fieldIndex"
+            :scroll-padding="scrollPadding"
+            :submitter="submitter"
+            :with-field-placeholder="withFieldPlaceholder"
+            :with-signature-id="withSignatureId"
             :is-active="currentStep === step"
-            :with-label="withLabel"
+            :with-label="withLabel && !withFieldPlaceholder && step.length < 2"
             :is-value-set="step.some((f) => f.uuid in values)"
             :attachments-index="attachmentsIndex"
-            @click="$emit('focus-step', step)"
+            @click="$emit('focus-step', stepIndex)"
           />
         </Teleport>
       </template>
@@ -48,11 +53,35 @@ export default {
       required: false,
       default: () => []
     },
+    withSignatureId: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    submittable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    submitter: {
+      type: Object,
+      required: true
+    },
     values: {
       type: Object,
       required: false,
       default: () => ({})
     },
+    withFieldPlaceholder: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    scrollPadding: {
+      type: String,
+      required: false,
+      default: '-80px'
+    },
     attachmentsIndex: {
       type: Object,
       required: false,
@@ -63,6 +92,11 @@ export default {
       required: false,
       default: true
     },
+    scrollEl: {
+      type: Object,
+      required: false,
+      default: null
+    },
     currentStep: {
       type: Array,
       required: false,
@@ -97,7 +131,12 @@ export default {
         if (container.style.overflow === 'hidden') {
           this.scrollInContainer(areaRef.$el)
         } else {
-          areaRef.$refs.scrollToElem.scrollIntoView({ behavior: 'smooth', block: 'start' })
+          const targetRect = areaRef.$refs.scrollToElem.getBoundingClientRect()
+          const root = this.$root.$el?.parentNode?.classList?.contains('ds') ? this.$root.$el : document.body
+          const rootRect = root.getBoundingClientRect()
+          const scrollEl = this.scrollEl || window
+
+          scrollEl.scrollTo({ top: targetRect.top - rootRect.top, behavior: 'smooth' })
         }
 
         return true
@@ -116,7 +155,7 @@ export default {
 
       const targetTopRelativeToBox = targetRect.top - boxRect.top
 
-      scrollbox.scrollTop = targetTopRelativeToBox - container.offsetHeight + formContainer.offsetHeight + target.offsetHeight + padding
+      scrollbox.scrollTo({ top: targetTopRelativeToBox - container.offsetHeight + formContainer.offsetHeight + target.offsetHeight + padding, behavior: 'smooth' })
     },
     setAreaRef (el) {
       if (el) {

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

@@ -181,6 +181,10 @@ export default {
         spread: 140
       })
     }
+
+    if (window.decline_button) {
+      window.decline_button.setAttribute('disabled', 'true')
+    }
   },
   methods: {
     sendCopyToEmail () {

app/javascript/submission_form/date_step.vue

@@ -43,6 +43,7 @@
         :required="field.required"
         type="date"
         :name="`values[${field.uuid}]`"
+        @keydown.enter="onEnter"
         @focus="$emit('focus')"
       >
     </div>
@@ -78,7 +79,7 @@ export default {
       default: ''
     }
   },
-  emits: ['update:model-value', 'focus'],
+  emits: ['update:model-value', 'focus', 'submit'],
   computed: {
     value: {
       set (value) {
@@ -90,6 +91,13 @@ export default {
     }
   },
   methods: {
+    onEnter (e) {
+      if (this.modelValue) {
+        e.preventDefault()
+
+        this.$emit('submit')
+      }
+    },
     setCurrentDate () {
       const inputEl = this.$refs.input
 

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') {
+          if (this.dryRun) {
-            file = await this.convertBmpToPng(file)
+            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,21 @@
     ref="areas"
     :steps="stepFields"
     :values="values"
+    :with-field-placeholder="withFieldPlaceholder"
+    :submitter="submitter"
+    :scroll-el="scrollEl"
+    :with-signature-id="withSignatureId"
     :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)]"
+  />
+  <FieldAreas
+    :steps="readonlyConditionalFields.map((e) => [e])"
+    :values="readonlyConditionalFields.reduce((acc, f) => { acc[f.uuid] = f.default_value; return acc }, {})"
+    :submitter="submitter"
+    :submittable="false"
   />
   <FormulaFieldAreas
     v-if="formulaFields.length"
@@ -59,7 +70,7 @@
       :class="{ 'md:px-4': isBreakpointMd }"
     >
       <form
-        v-if="!isCompleted"
+        v-if="!isCompleted && !isInvite"
         ref="form"
         :action="submitPath"
         method="post"
@@ -101,6 +112,7 @@
             v-model="values[currentField.uuid]"
             :show-field-names="showFieldNames"
             :field="currentField"
+            @submit="submitStep"
             @focus="scrollIntoField(currentField)"
           />
           <div v-else-if="currentField.type === 'select'">
@@ -310,6 +322,7 @@
             :key="currentField.uuid"
             v-model="values[currentField.uuid]"
             :field="currentField"
+            :dry-run="dryRun"
             :attachments-index="attachmentsIndex"
             :submitter-slug="submitterSlug"
             :show-field-names="showFieldNames"
@@ -320,16 +333,20 @@
             ref="currentStep"
             :key="currentField.uuid"
             v-model="values[currentField.uuid]"
+            :reason="values[currentField.preferences?.reason_field_uuid]"
             :field="currentField"
             :previous-value="previousSignatureValueFor(currentField) || previousSignatureValue"
             :with-typed-signature="withTypedSignature"
             :remember-signature="rememberSignature"
             :attachments-index="attachmentsIndex"
+            :require-signing-reason="requireSigningReason"
             :button-text="buttonText"
+            :dry-run="dryRun"
             :with-disclosure="withDisclosure"
             :with-qr-button="withQrButton"
             :submitter="submitter"
             :show-field-names="showFieldNames"
+            @update:reason="values[currentField.preferences?.reason_field_uuid] = $event"
             @attached="attachments.push($event)"
             @start="scrollIntoField(currentField)"
             @minimize="isFormVisible = false"
@@ -340,6 +357,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 +371,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"
@@ -379,6 +398,7 @@
             v-model="values[currentField.uuid]"
             :field="currentField"
             :submitter-slug="submitterSlug"
+            :values="values"
             @attached="attachments.push($event)"
             @focus="scrollIntoField(currentField)"
             @submit="submitStep"
@@ -416,6 +436,15 @@
           </div>
         </div>
       </form>
+      <InviteForm
+        v-else-if="isInvite"
+        :submitters="inviteSubmitters"
+        :submitter-slug="submitterSlug"
+        :authenticity-token="authenticityToken"
+        :url="baseUrl + submitPath + '/invite'"
+        :style="{ maxWidth: isBreakpointMd ? '582px' : '' }"
+        @success="[isInvite = false, performComplete($event)]"
+      />
       <FormCompleted
         v-else
         :is-demo="isDemo"
@@ -423,7 +452,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"
@@ -439,7 +468,7 @@
             href="#"
             class="inline border border-base-300 h-3 w-3 rounded-full mx-1 mt-1"
             :class="{ 'bg-base-300': index === currentStep, 'bg-base-content': (index < currentStep && stepFields[index].every((f) => !f.required || ![null, undefined, ''].includes(values[f.uuid]))) || isCompleted, 'bg-white': index > currentStep }"
-            @click.prevent="isCompleted ? '' : [saveStep(), goToStep(step, true)]"
+            @click.prevent="isCompleted ? '' : [saveStep(), goToStep(index, true)]"
           />
         </div>
       </div>
@@ -465,6 +494,7 @@ import TextStep from './text_step'
 import NumberStep from './number_step'
 import DateStep from './date_step'
 import MarkdownContent from './markdown_content'
+import InviteForm from './invite_form'
 import FormCompleted from './completed'
 import { IconInnerShadowTop, IconArrowsDiagonal, IconWritingSign, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
 import AppearsOn from './appears_on'
@@ -502,6 +532,7 @@ export default {
     IconWritingSign,
     AttachmentStep,
     InitialsStep,
+    InviteForm,
     MultiSelectStep,
     IconInnerShadowTop,
     DateStep,
@@ -528,6 +559,26 @@ export default {
       type: Object,
       required: true
     },
+    inviteSubmitters: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    withSignatureId: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    scrollPadding: {
+      type: String,
+      required: false,
+      default: '-80px'
+    },
+    requireSigningReason: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     canSendEmail: {
       type: Boolean,
       required: false,
@@ -538,6 +589,16 @@ export default {
       required: false,
       default: () => []
     },
+    withFieldPlaceholder: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    scrollEl: {
+      type: Object,
+      required: false,
+      default: null
+    },
     onComplete: {
       type: Function,
       required: false,
@@ -694,6 +755,7 @@ export default {
   data () {
     return {
       isCompleted: false,
+      isInvite: false,
       isFormVisible: this.expand !== false,
       showFillAllRequiredFields: false,
       currentStep: 0,
@@ -763,6 +825,9 @@ export default {
     currentField () {
       return this.currentStepFields[0]
     },
+    readonlyConditionalFields () {
+      return this.fields.filter((f) => f.readonly && f.conditions?.length && this.checkFieldConditions(f))
+    },
     stepFields () {
       return this.fields.filter((f) => !f.readonly).reduce((acc, f) => {
         const prevStep = acc[acc.length - 1]
@@ -779,7 +844,7 @@ export default {
       }, [])
     },
     formulaFields () {
-      return this.fields.filter((f) => f.preferences?.formula)
+      return this.fields.filter((f) => f.preferences?.formula && f.type !== 'payment')
     },
     attachmentsIndex () {
       return this.attachments.reduce((acc, a) => {
@@ -864,12 +929,14 @@ export default {
     this.$nextTick(() => {
       this.recalculateButtonDisabledKey = Math.random()
 
-      Promise.all([
+      if (!this.dryRun) {
-        this.maybeTrackEmailClick(),
+        Promise.all([
-        this.maybeTrackSmsClick()
+          this.maybeTrackEmailClick(),
-      ]).finally(() => {
+          this.maybeTrackSmsClick()
-        this.trackViewForm()
+        ]).finally(() => {
-      })
+          this.trackViewForm()
+        })
+      }
     })
   },
   methods: {
@@ -882,18 +949,22 @@ export default {
     checkFieldConditions (field) {
       if (field.conditions?.length) {
         return field.conditions.reduce((acc, c) => {
+          const field = this.fieldsUuidIndex[c.field_uuid]
+
+          if (['not_empty', 'checked', 'equal', 'contains'].includes(c.action) && field && !this.checkFieldConditions(field)) {
+            return false
+          }
+
           if (['empty', 'unchecked'].includes(c.action)) {
             return acc && isEmpty(this.values[c.field_uuid])
           } else if (['not_empty', 'checked'].includes(c.action)) {
             return acc && !isEmpty(this.values[c.field_uuid])
-          } else if (['equal', 'contains'].includes(c.action)) {
+          } else if (['equal', 'contains'].includes(c.action) && field) {
-            const field = this.fieldsUuidIndex[c.field_uuid]
             const option = field.options.find((o) => o.uuid === c.value)
             const values = [this.values[c.field_uuid]].flat()
 
             return acc && values.includes(this.optionValue(option, field.options.indexOf(option)))
-          } else if (['not_equal', 'does_not_contain'].includes(c.action)) {
+          } else if (['not_equal', 'does_not_contain'].includes(c.action) && field) {
-            const field = this.fieldsUuidIndex[c.field_uuid]
             const option = field.options.find((o) => o.uuid === c.value)
             const values = [this.values[c.field_uuid]].flat()
 
@@ -983,8 +1054,8 @@ export default {
         return null
       }
     },
-    goToStep (step, scrollToArea = false, clickUpload = false) {
+    goToStep (stepIndex, scrollToArea = false, clickUpload = false) {
-      this.currentStep = this.stepFields.indexOf(step)
+      this.currentStep = stepIndex
       this.showFillAllRequiredFields = false
 
       this.$nextTick(() => {
@@ -992,7 +1063,7 @@ export default {
 
         if (!this.isCompleted) {
           if (scrollToArea) {
-            this.scrollIntoField(step[0])
+            this.scrollIntoField(this.currentField)
           }
 
           this.enableScrollIntoField = false
@@ -1009,7 +1080,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 +1136,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 && !this.inviteSubmitters.length) {
           formData.append('completed', 'true')
         }
 
@@ -1075,7 +1152,9 @@ export default {
           if (response.status === 422 || response.status === 500) {
             const data = await response.json()
 
-            alert(data.error || 'Value is invalid')
+            const i18nError = data.error ? this.t(data.error.replace(/\s+/g, '_').toLowerCase()) : ''
+
+            alert(i18nError !== data.error ? i18nError : (data.error || this.t('value_is_invalid')))
 
             return Promise.reject(new Error(data.error))
           }
@@ -1091,23 +1170,15 @@ export default {
               this.isFormVisible = false
             }
 
-            this.goToStep(nextStep, this.autoscrollFields)
+            this.goToStep(this.stepFields.indexOf(nextStep), this.autoscrollFields)
 
             if (emptyRequiredField === nextStep) {
               this.showFillAllRequiredFields = true
             }
+          } else if (this.inviteSubmitters.length) {
+            this.isInvite = true
           } else {
-            this.isCompleted = true
+            this.performComplete(response)
-
-            const respData = await response.text()
-
-            if (respData) {
-              this.onComplete(JSON.parse(respData))
-            }
-
-            if (this.completedRedirectUrl) {
-              window.location.href = this.completedRedirectUrl
-            }
           }
         }).catch(error => {
           console.error(error)
@@ -1123,6 +1194,21 @@ export default {
       }).finally(() => {
         this.isSubmitting = false
       })
+    },
+    async performComplete (resp) {
+      this.isCompleted = true
+
+      if (resp) {
+        const respData = await resp.text()
+
+        if (respData) {
+          this.onComplete(JSON.parse(respData))
+        }
+      }
+
+      if (this.completedRedirectUrl) {
+        window.location.href = this.completedRedirectUrl
+      }
     }
   }
 }

app/javascript/submission_form/i18n.js

@@ -6,13 +6,29 @@ const en = {
   signature: 'Signature',
   initials: 'Initials',
   drawn_signature_on_a_touchscreen_device: 'Drawn signature on a touchscreen device',
+  approved: 'Approved',
+  reviewed: 'Reviewed',
+  other: 'Other',
+  authored_by_me: 'Authored by me',
+  invite: 'Invite',
+  email: 'Email',
+  approved_by: 'Approved by',
+  reviewed_by: 'Reviewed by',
+  authored_by: 'Authored by',
+  select_a_reason: 'Select a reason',
   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',
+  value_is_invalid: 'Value is invalid',
+  verification_code_is_invalid: 'Verification code is invalid',
+  already_paid: 'Already paid',
   image: 'Image',
+  pay: 'Pay',
   take_photo: 'Take photo',
   number_phone_is_invalid: '{number} phone is invalid',
   file: 'File',
+  digitally_signed_by: 'Digitally signed by',
+  reason: 'Reason',
   select: 'Select',
   checkbox: 'Checkbox',
   multiple: 'Multiple',
@@ -71,14 +87,30 @@ const en = {
 }
 
 const es = {
+  invite: 'Invitar',
+  email: 'Correo electrónico',
+  approved: 'Aprobado',
+  reviewed: 'Revisado',
+  other: 'Otro',
+  authored_by_me: 'Escrito por mí',
+  approved_by: 'Aprobado por',
+  reviewed_by: 'Revisado por',
+  authored_by: 'Escrito por',
+  select_a_reason: 'Selecciona una razón',
+  value_is_invalid: 'El valor no es válido',
+  verification_code_is_invalid: 'El código de verificación no es válido',
   drawn_signature_on_a_touchscreen_device: 'Firma dibujada en un dispositivo con pantalla táctil',
   scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Escanea el código QR con la aplicación de la cámara para abrir el formulario en el móvil y dibujar tu firma',
   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',
+  digitally_signed_by: 'Firmado digitalmente por',
+  reason: 'Razón',
   initials: 'Iniciales',
   date: 'Fecha',
   number: 'Número',
@@ -142,18 +174,34 @@ const es = {
 }
 
 const it = {
+  invite: 'Invita',
+  email: 'Email',
+  approved: 'Approvato',
+  reviewed: 'Revisionato',
+  other: 'Altro',
+  authored_by_me: 'Creato da me',
+  approved_by: 'Approvato da',
+  reviewed_by: 'Revisionato da',
+  authored_by: 'Creato da',
+  select_a_reason: 'Seleziona una ragione',
+  value_is_invalid: 'Il valore non è valido',
+  verification_code_is_invalid: 'Il codice di verifica non è valido',
   drawn_signature_on_a_touchscreen_device: 'Firma disegnata su un dispositivo con schermo tattile',
   scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scansiona il codice QR con l\'app della fotocamera per aprire il modulo sul cellulare e disegnare la tua firma',
   by_clicking_you_agree_to_the: 'Cliccando su "{button}", accetti il',
   electronic_signature_disclosure: 'Divulgazione della Firma Elettronica',
   esignature_disclosure: 'Divulgazione della eFirma',
   minimize: 'Minimizza',
+  already_paid: 'Pagato',
   text: 'Testo',
   signature: 'Firma',
+  digitally_signed_by: 'Firmato digitalmente da',
+  reason: 'Motivo',
   initials: 'Iniziali',
   date: 'Data',
   number: 'Numero',
   image: 'Immagine',
+  pay: 'Pagamento',
   file: 'File',
   select: 'Seleziona',
   checkbox: 'Casella di controllo',
@@ -213,18 +261,34 @@ const it = {
 }
 
 const de = {
+  invite: 'Einladen',
+  email: 'E-Mail',
+  approved: 'Genehmigt',
+  reviewed: 'Überprüft',
+  other: 'Andere',
+  authored_by_me: 'Von mir verfasst',
+  approved_by: 'Genehmigt von',
+  reviewed_by: 'Überprüft von',
+  authored_by: 'Verfasst von',
+  select_a_reason: 'Grund auswählen',
+  value_is_invalid: 'Wert ist ungültig',
+  verification_code_is_invalid: 'Bestätigungscode ist ungültig',
   drawn_signature_on_a_touchscreen_device: 'Gezeichnete Unterschrift auf einem Touchscreen-Gerät',
   scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scannen Sie den QR-Code mit der Kamera-App, um das Formular auf dem Handy zu öffnen und Ihre Unterschrift zu zeichnen',
   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',
+  digitally_signed_by: 'Digital unterschrieben von',
+  reason: 'Grund',
   initials: 'Initialen',
   date: 'Datum',
   number: 'Nummer',
   image: 'Bild',
+  pay: 'Bezahlen',
   file: 'Datei',
   select: 'Auswählen',
   checkbox: 'Checkbox',
@@ -284,6 +348,18 @@ const de = {
 }
 
 const fr = {
+  invite: 'Inviter',
+  email: 'Courriel',
+  approved: 'Approuvé',
+  reviewed: 'Révisé',
+  other: 'Autre',
+  authored_by_me: 'Rédigé par moi',
+  approved_by: 'Approuvé par',
+  reviewed_by: 'Révisé par',
+  authored_by: 'Rédigé par',
+  select_a_reason: 'Sélectionnez une raison',
+  value_is_invalid: 'La valeur est invalide',
+  verification_code_is_invalid: 'Le code de vérification est invalide',
   drawn_signature_on_a_touchscreen_device: 'Signature dessinée sur un appareil à écran tactile',
   scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scannez le code QR avec l\'application de l\'appareil photo pour ouvrir le formulaire sur mobile et dessiner votre signature',
   by_clicking_you_agree_to_the: 'En cliquant sur "{button}", vous acceptez la',
@@ -291,8 +367,12 @@ const fr = {
   esignature_disclosure: 'Divulgation de la eSignature',
   minimize: 'Réduire',
   text: 'Texte',
+  already_paid: 'Déjà payé',
   signature: 'Signature',
   initials: 'Initiales',
+  digitally_signed_by: 'Signé numériquement par',
+  reason: 'Raison',
+  pay: 'Payer',
   date: 'Date',
   number: 'Numéro',
   image: 'Image',
@@ -355,6 +435,18 @@ const fr = {
 }
 
 const pl = {
+  invite: 'Zaproś',
+  email: 'E-mail',
+  approved: 'Zaakceptowany',
+  reviewed: 'Przejrzany',
+  other: 'Inny',
+  authored_by_me: 'Napisane przeze mnie',
+  approved_by: 'Zaakceptowany przez',
+  reviewed_by: 'Przejrzany przez',
+  authored_by: 'Napisane przez',
+  select_a_reason: 'Wybierz powód',
+  value_is_invalid: 'Wartość jest nieprawidłowa',
+  verification_code_is_invalid: 'Kod weryfikacyjny jest nieprawidłowy',
   drawn_signature_on_a_touchscreen_device: 'Podpis odręczny na urządzeniu z ekranem dotykowym',
   scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Zeskanuj kod QR za pomocą aplikacji aparatu, aby otworzyć formularz na telefonie i narysować swój podpis',
   by_clicking_you_agree_to_the: 'Klikając na "{button}", zgadzasz się na',
@@ -362,12 +454,16 @@ const pl = {
   esignature_disclosure: 'Ujawnienie ePodpisu',
   minimize: 'Zminimalizuj',
   text: 'Tekst',
+  already_paid: 'Już zapłacono',
+  digitally_signed_by: 'Podpisano cyfrowo przez',
+  reason: 'Powód',
   signature: 'Podpis',
   initials: 'Inicjały',
   date: 'Data',
   number: 'Numer',
   image: 'Obraz',
   file: 'Plik',
+  pay: 'Zapłać',
   select: 'Wybierz',
   checkbox: 'Pole wyboru',
   multiple: 'Wielokrotne',
@@ -426,6 +522,18 @@ const pl = {
 }
 
 const uk = {
+  invite: 'Запросити',
+  email: 'Електронна пошта',
+  approved: 'Затверджено',
+  reviewed: 'Переглянуто',
+  other: 'Інше',
+  authored_by_me: 'Авторство моє',
+  approved_by: 'Затверджено',
+  reviewed_by: 'Переглянуто',
+  authored_by: 'Автор',
+  select_a_reason: 'Виберіть причину',
+  value_is_invalid: 'Значення є неправильним',
+  verification_code_is_invalid: 'Код підтвердження є неправильним',
   drawn_signature_on_a_touchscreen_device: 'Підпис на сенсорному пристрої',
   scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Скануйте QR-код за допомогою програми камери, щоб відкрити форму на мобільному пристрої та намалювати свій підпис',
   by_clicking_you_agree_to_the: 'Натиснувши на "{button}", ви погоджуєтеся з',
@@ -433,11 +541,15 @@ const uk = {
   esignature_disclosure: 'Розголошення еПідпису',
   minimize: 'Зменшити',
   text: 'Текст',
+  already_paid: 'Вже оплачено',
   signature: 'Підпис',
+  digitally_signed_by: 'Підписано в електронному вигляді',
+  reason: 'Причина',
   initials: 'Ініціали',
   date: 'Дата',
   number: 'Число',
   image: 'Зображення',
+  pay: 'Оплатити',
   file: 'Файл',
   select: 'Вибрати',
   checkbox: 'Прапорець',
@@ -497,18 +609,34 @@ const uk = {
 }
 
 const cs = {
+  invite: 'Pozvat',
+  email: 'E-mail',
+  approved: 'Schváleno',
+  reviewed: 'Zkontrolováno',
+  other: 'Jiné',
+  authored_by_me: 'Autorem jsem já',
+  approved_by: 'Schváleno kým',
+  reviewed_by: 'Zkontrolováno kým',
+  authored_by: 'Autorem',
+  select_a_reason: 'Vyberte důvod',
+  value_is_invalid: 'Hodnota je neplatná',
+  verification_code_is_invalid: 'Ověřovací kód je neplatný',
   drawn_signature_on_a_touchscreen_device: 'Namalovaný podpis na dotykovém zařízení',
   scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Naskenujte QR kód pomocí aplikace fotoaparátu, abyste otevřeli formulář na mobilním zařízení a nakreslili svůj podpis',
   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',
   initials: 'Iniciály',
   date: 'Datum',
   number: 'Číslo',
+  digitally_signed_by: 'Digitálně podepsáno',
+  reason: 'Důvod',
   image: 'Obrázek',
+  pay: 'Zaplatit',
   file: 'Soubor',
   select: 'Vybrat',
   checkbox: 'Zaškrtávací políčko',
@@ -568,18 +696,34 @@ const cs = {
 }
 
 const pt = {
+  invite: 'Convidar',
+  email: 'E-mail',
+  approved: 'Aprovado',
+  reviewed: 'Revisado',
+  other: 'Outro',
+  authored_by_me: 'Autorizado por mim',
+  approved_by: 'Aprovado por',
+  reviewed_by: 'Revisado por',
+  authored_by: 'Autorizado por',
+  select_a_reason: 'Selecione um motivo',
+  value_is_invalid: 'Valor é inválido',
+  verification_code_is_invalid: 'Código de verificação é inválido',
   drawn_signature_on_a_touchscreen_device: 'Assinatura desenhada em um dispositivo com tela sensível ao toque',
   scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Escaneie o código QR com o aplicativo da câmera para abrir o formulário no celular e desenhar sua assinatura',
   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',
   initials: 'Iniciais',
+  digitally_signed_by: 'Assinado digitalmente por',
+  reason: 'Razão',
   date: 'Data',
   number: 'Número',
   image: 'Imagem',
+  pay: 'Pagar',
   file: 'Arquivo',
   select: 'Selecionar',
   checkbox: 'Caixa',
@@ -639,6 +783,18 @@ const pt = {
 }
 
 const he = {
+  invite: 'הזמן',
+  email: 'דוא"ל',
+  approved: 'מאושר',
+  reviewed: 'נסקר',
+  other: 'אחר',
+  authored_by_me: 'נכתב על ידי',
+  approved_by: 'אושר על ידי',
+  reviewed_by: 'נסקר על ידי',
+  authored_by: 'נכתב על ידי',
+  select_a_reason: 'בחר סיבה',
+  value_is_invalid: 'ערך לא תקין',
+  verification_code_is_invalid: 'קוד האימות אינו תקין',
   drawn_signature_on_a_touchscreen_device: 'חתימה שנוצרה במכשיר עם מסך מגע',
   scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'סרוק את קוד ה-QR באמצעות אפליקציית המצלמה כדי לפתוח את הטופס במובייל ולצייר את החתימה שלך',
   by_clicking_you_agree_to_the: 'על ידי לחיצה על "{button}", אתה מסכים ל',
@@ -646,12 +802,16 @@ const he = {
   esignature_disclosure: 'חשיפת ה-eחתימה',
   minimize: 'לקטן',
   text: 'טקסט',
+  already_paid: 'כבר שולם',
   signature: 'חתימה',
   initials: 'ראשי תיבות',
   date: 'תאריך',
+  digitally_signed_by: 'חתום דיגיטלית על ידי',
+  reason: 'סיבה',
   number: 'מספר',
   image: 'תמונה',
   file: 'קובץ',
+  pay: 'תשלום',
   select: 'בחר',
   checkbox: 'תיק בחירה',
   multiple: 'רב ערכים',
@@ -711,6 +871,18 @@ const he = {
 }
 
 const nl = {
+  invite: 'Uitnodigen',
+  email: 'E-mail',
+  approved: 'Goedgekeurd',
+  reviewed: 'Beoordeeld',
+  other: 'Anders',
+  authored_by_me: 'Door mij geschreven',
+  approved_by: 'Goedgekeurd door',
+  reviewed_by: 'Beoordeeld door',
+  authored_by: 'Geschreven door',
+  select_a_reason: 'Selecteer een reden',
+  value_is_invalid: 'Waarde is ongeldig',
+  verification_code_is_invalid: 'Verificatiecode is ongeldig',
   drawn_signature_on_a_touchscreen_device: 'Getekende handtekening op een apparaat met een touchscreen',
   scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scan de QR-code met de camera-app om het formulier op mobiel te openen en uw handtekening te tekenen',
   by_clicking_you_agree_to_the: 'Door op "{button}" te klikken, gaat u akkoord met de',
@@ -718,7 +890,10 @@ const nl = {
   esignature_disclosure: 'Openbaarmaking van eHandtekening',
   minimize: 'Minimaliseren',
   text: 'Tekst',
+  already_paid: 'Al betaald',
   signature: 'Handtekening',
+  digitally_signed_by: 'Digitaal ondertekend door',
+  reason: 'Reden',
   initials: 'Initialen',
   date: 'Datum',
   number: 'Nummer',
@@ -728,6 +903,7 @@ const nl = {
   select: 'Selecteer',
   checkbox: 'Aankruisvakje',
   multiple: 'Meerdere',
+  pay: 'Betaal',
   radio: 'Radio',
   cells: 'Cellen',
   stamp: 'Stempel',
@@ -783,6 +959,18 @@ const nl = {
 }
 
 const ar = {
+  invite: 'دعوة',
+  email: 'البريد الإلكتروني',
+  approved: 'موافق عليه',
+  reviewed: 'تمت مراجعته',
+  other: 'آخر',
+  authored_by_me: 'مؤلف بواسطتي',
+  approved_by: 'موافق عليه من قبل',
+  reviewed_by: 'مراجع من قبل',
+  authored_by: 'مؤلف من قبل',
+  select_a_reason: 'اختر سببًا',
+  value_is_invalid: 'القيمة غير صالحة',
+  verification_code_is_invalid: 'رمز التحقق غير صالح',
   drawn_signature_on_a_touchscreen_device: 'توقيع مرسوم على جهاز بشاشة تعمل باللمس',
   scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'امسح رمز الاستجابة السريعة باستخدام تطبيق الكاميرا لفتح النموذج على الهاتف المحمول ورسم توقيعك',
   by_clicking_you_agree_to_the: 'بالنقر فوق "{button}"، أنت توافق على',
@@ -793,8 +981,11 @@ const ar = {
   initials: 'الاختصارات',
   date: 'تاريخ',
   number: 'رقم',
+  digitally_signed_by: 'تم التوقيع رقميًا بواسطة',
+  reason: 'السبب',
   image: 'صورة',
   take_photo: 'التقاط صورة',
+  pay: 'دفع',
   file: 'ملف',
   select: 'اختيار',
   checkbox: 'خانة اختيار',
@@ -855,16 +1046,30 @@ const ar = {
 }
 
 const ko = {
+  invite: '초대하기',
+  email: '이메일',
+  approved: '승인됨',
+  reviewed: '검토됨',
+  other: '기타',
+  authored_by_me: '내가 작성한',
+  approved_by: '승인자',
+  reviewed_by: '검토자',
+  authored_by: '작성자',
+  select_a_reason: '이유 선택',
   drawn_signature_on_a_touchscreen_device: '터치스크린 장치에서 그린 서명',
   scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: '카메라 앱으로 QR 코드를 스캔하여 모바일에서 양식을 열고 서명을 그리세요',
   by_clicking_you_agree_to_the: '"{button}"를 클릭함으로써, 다음에 동의하게 됩니다',
   electronic_signature_disclosure: '전자 서명 공개',
   esignature_disclosure: '전자 서명 공개',
+  already_paid: '이미 지불됨',
   text: '텍스트',
   signature: '서명',
   initials: '이니셜',
   date: '날짜',
+  digitally_signed_by: '디지털 서명이 완료되었습니다',
+  reason: '이유',
   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

@@ -50,6 +50,26 @@
             </span>
           </a>
         </span>
+        <span
+          class="tooltip"
+          :data-tip="t('click_to_upload')"
+        >
+          <label
+            class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap"
+          >
+            <IconUpload :width="16" />
+            <input
+              :key="uploadImageInputKey"
+              type="file"
+              hidden
+              accept="image/*"
+              @change="drawImage"
+            >
+            <span class="hidden sm:inline">
+              {{ t('upload') }}
+            </span>
+          </label>
+        </span>
         <a
           v-if="modelValue || computedPreviousValue"
           href="#"
@@ -97,7 +117,7 @@
     <img
       v-if="modelValue || computedPreviousValue"
       :src="attachmentsIndex[modelValue || computedPreviousValue].url"
-      class="mx-auto bg-white border border-base-300 rounded max-h-72"
+      class="mx-auto bg-white border border-base-300 rounded max-h-44"
     >
     <canvas
       v-show="!modelValue && !computedPreviousValue"
@@ -120,16 +140,18 @@
 
 <script>
 import { cropCanvasAndExportToPNG } from './crop_canvas'
-import { IconReload, IconTextSize, IconSignature, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
+import { IconReload, IconTextSize, IconUpload, IconSignature, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
 import SignaturePad from 'signature_pad'
 import AppearsOn from './appears_on'
 import MarkdownContent from './markdown_content'
+import SignatureStep from './signature_step'
 
 const scale = 3
 
 export default {
   name: 'InitialsStep',
   components: {
+    IconUpload,
     AppearsOn,
     IconReload,
     IconTextSize,
@@ -143,6 +165,11 @@ export default {
       type: Object,
       required: true
     },
+    dryRun: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     submitterSlug: {
       type: String,
       required: true
@@ -173,7 +200,8 @@ export default {
     return {
       isInitialsStarted: !!this.previousValue,
       isUsePreviousValue: true,
-      isDrawInitials: false
+      isDrawInitials: false,
+      uploadImageInputKey: Math.random().toString()
     }
   },
   computed: {
@@ -224,6 +252,15 @@ export default {
     this.intersectionObserver?.disconnect()
   },
   methods: {
+    drawOnCanvas: SignatureStep.methods.drawOnCanvas,
+    drawImage (event) {
+      this.remove()
+      this.isInitialsStarted = true
+
+      this.drawOnCanvas(event.target.files[0], this.$refs.canvas)
+
+      this.uploadImageInputKey = Math.random().toString()
+    },
     remove () {
       this.$emit('update:model-value', '')
 
@@ -246,13 +283,28 @@ export default {
       const context = canvas.getContext('2d')
 
       const fontFamily = 'Arial'
-      const fontSize = '44px'
+      const initialFontSize = 50
       const fontStyle = 'italic'
       const fontWeight = ''
 
-      context.font = fontStyle + ' ' + fontWeight + ' ' + fontSize + ' ' + fontFamily
+      const setFontSize = (size) => {
-      context.textAlign = 'center'
+        context.font = `${fontStyle} ${fontWeight} ${size}px ${fontFamily}`
+      }
 
+      const adjustFontSizeToFit = (text, maxWidth, initialSize) => {
+        let size = initialSize
+
+        setFontSize(size)
+
+        while (context.measureText(text).width > maxWidth && size > 1) {
+          size -= 1
+          setFontSize(size)
+        }
+      }
+
+      adjustFontSizeToFit(e.target.value, canvas.width / scale, initialFontSize)
+
+      context.textAlign = 'center'
       context.clearRect(0, 0, canvas.width / scale, canvas.height / scale)
       context.fillText(e.target.value, canvas.width / 2 / scale, canvas.height / 2 / scale + 11)
     },
@@ -282,21 +334,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)
+            reader.readAsDataURL(file)
-          formData.append('submitter_slug', this.submitterSlug)
-          formData.append('name', 'attachments')
 
-          return fetch(this.baseUrl + '/api/attachments', {
+            reader.onloadend = () => {
-            method: 'POST',
+              const attachment = { url: reader.result, uuid: Math.random().toString() }
-            body: formData
-          }).then((resp) => resp.json()).then((attachment) => {
-            this.$emit('attached', attachment)
-            this.$emit('update:model-value', attachment.uuid)
 
-            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/invite_form.vue

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

app/javascript/submission_form/markdown_content.vue

@@ -51,7 +51,17 @@ export default {
   },
   computed: {
     items () {
-      return snarkdown(this.string.replace(/\n/g, '<br>')).split(htmlSplitRegexp)
+      const linkParts = this.string.split(/(https?:\/\/[^\s)]+)/g)
+
+      const text = linkParts.map((part, index) => {
+        if (part.match(/^https?:\/\//) && !linkParts[index - 1]?.match(/\(\s*$/) && !linkParts[index + 1]?.match(/^\s*\)/)) {
+          return `[${part}](${part})`
+        } else {
+          return part
+        }
+      }).join('')
+
+      return snarkdown(text.replace(/\n/g, '<br>')).split(htmlSplitRegexp)
     }
   },
   methods: {

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
   },
@@ -79,6 +93,10 @@ export default {
       type: Object,
       required: true
     },
+    values: {
+      type: Object,
+      required: true
+    },
     submitterSlug: {
       type: String,
       required: true
@@ -87,7 +105,8 @@ export default {
   emits: ['focus', 'submit', 'update:model-value', 'attached'],
   data () {
     return {
-      isCreatingCheckout: false
+      isCreatingCheckout: false,
+      isMathLoaded: false
     }
   },
   computed: {
@@ -100,20 +119,72 @@ export default {
     defaultName () {
       const { price, currency } = this.field.preferences || {}
 
-      const formattedPrice = new Intl.NumberFormat([], {
+      const formatter = new Intl.NumberFormat([], {
         style: 'currency',
         currency
-      }).format(price)
+      })
 
-      return `Pay ${formattedPrice}`
+      if (this.field.preferences?.formula) {
+        if (this.isMathLoaded) {
+          return this.t('pay') + ' ' + formatter.format(this.calculateFormula())
+        } else {
+          return ''
+        }
+      } else {
+        return this.t('pay') + ' ' + formatter.format(price)
+      }
     }
   },
-  mounted () {
+  async mounted () {
     if (this.sessionId) {
       this.$emit('submit')
     }
+
+    if (!this.sessionId) {
+      this.postCheckout({ checkStatus: true })
+    }
+
+    if (this.field.preferences?.formula) {
+      const {
+        create,
+        evaluateDependencies,
+        addDependencies,
+        subtractDependencies,
+        divideDependencies,
+        multiplyDependencies,
+        powDependencies,
+        roundDependencies,
+        absDependencies,
+        sinDependencies,
+        tanDependencies,
+        cosDependencies
+      } = await import('mathjs')
+
+      this.math = create({
+        evaluateDependencies,
+        addDependencies,
+        subtractDependencies,
+        divideDependencies,
+        multiplyDependencies,
+        powDependencies,
+        roundDependencies,
+        absDependencies,
+        sinDependencies,
+        tanDependencies,
+        cosDependencies
+      })
+
+      this.isMathLoaded = true
+    }
   },
   methods: {
+    calculateFormula () {
+      const transformedFormula = this.field.preferences.formula.replace(/{{(.*?)}}/g, (match, uuid) => {
+        return this.values[uuid] || 0.0
+      })
+
+      return this.math.evaluate(transformedFormula.toLowerCase())
+    },
     async submit () {
       if (this.sessionId) {
         return fetch(this.baseUrl + '/api/stripe_payments/' + this.sessionId, {
@@ -144,7 +215,7 @@ export default {
         return Promise.resolve({})
       }
     },
-    startCheckout () {
+    postCheckout ({ checkStatus } = {}) {
       this.isCreatingCheckout = true
 
       fetch(this.baseUrl + '/api/stripe_payments', {
@@ -152,6 +223,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>
@@ -194,6 +194,48 @@
       type="text"
       @input="updateWrittenSignature"
     >
+    <select
+      v-if="requireSigningReason && !isOtherReason"
+      class="select base-input !text-2xl w-full mt-6 text-center"
+      required
+      :name="`values[${field.preferences.reason_field_uuid}]`"
+      @change="$event.target.value === 'other' ? [reason = '', isOtherReason = true] : $emit('update:reason', $event.target.value)"
+    >
+      <option
+        value=""
+        disabled
+        :selected="!reason"
+      >
+        {{ t('select_a_reason') }}
+      </option>
+      <option
+        v-for="(label, option) in defaultReasons"
+        :key="option"
+        :value="option"
+        :selected="reason === option"
+      >
+        {{ label }}
+      </option>
+      <option value="other">
+        {{ t('other') }}
+      </option>
+    </select>
+    <input
+      v-if="requireSigningReason && isOtherReason"
+      class="base-input !text-2xl w-full mt-6"
+      required
+      :name="`values[${field.preferences.reason_field_uuid}]`"
+      :placeholder="t('type_here_')"
+      :value="reason"
+      type="text"
+      @input="$emit('update:reason', $event.target.value)"
+    >
+    <input
+      v-if="requireSigningReason"
+      hidden
+      name="with_reason"
+      :value="field.preferences.reason_field_uuid"
+    >
     <div
       v-if="isShowQr"
       dir="auto"
@@ -231,6 +273,7 @@ import { cropCanvasAndExportToPNG } from './crop_canvas'
 import SignaturePad from 'signature_pad'
 import AppearsOn from './appears_on'
 import MarkdownContent from './markdown_content'
+import { v4 } from 'uuid'
 
 let isFontLoaded = false
 
@@ -255,6 +298,11 @@ export default {
       type: Object,
       required: true
     },
+    requireSigningReason: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     submitter: {
       type: Object,
       required: true
@@ -264,6 +312,11 @@ export default {
       required: false,
       default: true
     },
+    dryRun: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     withDisclosure: {
       type: Boolean,
       required: false,
@@ -299,17 +352,23 @@ export default {
       required: false,
       default: ''
     },
+    reason: {
+      type: String,
+      required: false,
+      default: ''
+    },
     modelValue: {
       type: String,
       required: false,
       default: ''
     }
   },
-  emits: ['attached', 'update:model-value', 'start', 'minimize'],
+  emits: ['attached', 'update:model-value', 'start', 'minimize', 'update:reason'],
   data () {
     return {
       isSignatureStarted: !!this.previousValue,
       isShowQr: false,
+      isOtherReason: false,
       isUsePreviousValue: true,
       isTextSignature: this.field.preferences?.format === 'typed',
       uploadImageInputKey: Math.random().toString()
@@ -319,6 +378,13 @@ export default {
     submitterSlug () {
       return this.submitter.slug
     },
+    defaultReasons () {
+      return {
+        [this.t('approved_by')]: this.t('approved'),
+        [this.t('reviewed_by')]: this.t('reviewed'),
+        [this.t('authored_by')]: this.t('authored_by_me')
+      }
+    },
     computedPreviousValue () {
       if (this.isUsePreviousValue) {
         return this.previousValue
@@ -327,6 +393,13 @@ export default {
       }
     }
   },
+  created () {
+    if (this.requireSigningReason) {
+      this.field.preferences ||= {}
+      this.field.preferences.reason_field_uuid ||= v4()
+      this.isOtherReason = this.reason && !this.defaultReasons[this.reason]
+    }
+  },
   async mounted () {
     this.$nextTick(() => {
       if (this.$refs.canvas) {
@@ -335,18 +408,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 +462,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 +525,28 @@ export default {
       const context = canvas.getContext('2d')
 
       const fontFamily = 'Dancing Script'
-      const fontSize = '38px'
+      const initialFontSize = 44
       const fontStyle = 'italic'
       const fontWeight = ''
 
-      context.font = fontStyle + ' ' + fontWeight + ' ' + fontSize + ' ' + fontFamily
+      const setFontSize = (size) => {
-      context.textAlign = 'center'
+        context.font = `${fontStyle} ${fontWeight} ${size}px ${fontFamily}`
+      }
 
+      const adjustFontSizeToFit = (text, maxWidth, initialSize) => {
+        let size = initialSize
+
+        setFontSize(size)
+
+        while (context.measureText(text).width > maxWidth && size > 1) {
+          size -= 1
+          setFontSize(size)
+        }
+      }
+
+      adjustFontSizeToFit(e.target.value, canvas.width / scale, initialFontSize)
+
+      context.textAlign = 'center'
       context.clearRect(0, 0, canvas.width / scale, canvas.height / scale)
       context.fillText(e.target.value, canvas.width / 2 / scale, canvas.height / 2 / scale + 11)
     },
@@ -479,8 +569,11 @@ export default {
       this.remove()
       this.isSignatureStarted = true
 
-      const file = event.target.files[0]
+      this.drawOnCanvas(event.target.files[0], this.$refs.canvas)
 
+      this.uploadImageInputKey = Math.random().toString()
+    },
+    drawOnCanvas (file, canvas) {
       if (file && file.type.match('image.*')) {
         const reader = new FileReader()
 
@@ -490,7 +583,6 @@ export default {
           img.src = event.target.result
 
           img.onload = () => {
-            const canvas = this.$refs.canvas
             const context = canvas.getContext('2d')
 
             const aspectRatio = img.width / img.height
@@ -525,8 +617,6 @@ export default {
         }
 
         reader.readAsDataURL(file)
-
-        this.uploadImageInputKey = Math.random().toString()
       }
     },
     maybeSetSignedUuid (signedUuid) {
@@ -563,24 +653,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)
+            reader.readAsDataURL(file)
-          formData.append('submitter_slug', this.submitterSlug)
-          formData.append('name', 'attachments')
-          formData.append('remember_signature', this.rememberSignature)
 
-          return fetch(this.baseUrl + '/api/attachments', {
+            reader.onloadend = () => {
-            method: 'POST',
+              const attachment = { url: reader.result, uuid: Math.random().toString() }
-            body: formData
-          }).then((resp) => resp.json()).then((attachment) => {
-            this.$emit('attached', attachment)
-            this.$emit('update:model-value', attachment.uuid)
 
-            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/submission_form/text_step.vue

@@ -147,7 +147,7 @@ export default {
       const textarea = this.$refs.textarea
 
       textarea.style.height = 'auto'
-      textarea.style.height = textarea.scrollHeight + 'px'
+      textarea.style.height = Math.min(250, textarea.scrollHeight) + 'px'
     },
     toggleTextArea () {
       this.isTextArea = true

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"
+      v-if="field?.type && (isSelected || isNameFocus)"
-      class="absolute bg-white rounded-t border overflow-visible whitespace-nowrap group-hover:flex group-hover:z-10"
+      class="absolute bg-white rounded-t border overflow-visible whitespace-nowrap flex z-10"
-      :class="{ 'flex z-10': isNameFocus || isSelected, invisible: !isNameFocus && !isSelected }"
       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,18 +157,20 @@
       </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="flex justify-center items-center space-x-1"
-        :class="{ 'w-full h-full': ['cells', 'checkbox'].includes(field.type) }"
+        :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 }"
+          :class="{ 'w-full h-full': ['cells', 'checkbox'].includes(field.type), 'text-[1.6vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars }"
         >
           <div
             ref="textContainer"
@@ -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 }"
+              :class="{ 'cursor-text': isValueInput }"
-              :placeholder="t('type_value')"
+              :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.$nextTick(() => this.focusValueInput())
-          this.$refs.defaultValue.focus()
-
-          if (this.$refs.defaultValue.innerText.length) {
-            window.getSelection().collapse(
-              this.$refs.defaultValue.firstChild,
-              this.$refs.defaultValue.innerText.length
-            )
-          }
-        })
       } 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

@@ -58,6 +58,7 @@
         />
         <template v-else>
           <a
+            v-if="withSignYourselfButton"
             :href="template.submitters.length > 1 ? `/templates/${template.id}/submissions/new?selfsign=true` : `/d/${template.slug}`"
             class="btn btn-primary btn-ghost text-base hidden md:flex"
             :target="template.submitters.length > 1 ? '' : '_blank'"
@@ -73,6 +74,7 @@
             </span>
           </a>
           <a
+            v-if="withSendButton"
             :href="`/templates/${template.id}/submissions/new?with_link=true`"
             data-turbo-frame="modal"
             class="white-button md:!px-6"
@@ -86,26 +88,66 @@
               {{ t('send') }}
             </span>
           </a>
-          <button
+          <span
             v-if="editable"
-            class="base-button"
+            class="flex"
-            :class="{ disabled: isSaving }"
-            v-bind="isSaving ? { disabled: true } : {}"
-            @click.prevent="onSaveClick"
           >
-            <IconInnerShadowTop
+            <button
-              v-if="isSaving"
+              class="base-button !rounded-r-none !pr-2"
-              width="22"
+              :class="{ disabled: isSaving }"
-              class="animate-spin"
+              v-bind="isSaving ? { disabled: true } : {}"
-            />
+              @click.prevent="onSaveClick"
-            <IconDeviceFloppy
+            >
-              v-else
+              <IconInnerShadowTop
-              width="22"
+                v-if="isSaving"
-            />
+                width="22"
-            <span class="hidden md:inline">
+                class="animate-spin"
-              {{ t('save') }}
+              />
-            </span>
+              <IconDeviceFloppy
-          </button>
+                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>
+                <li>
+                  <a
+                    :href="`/templates/${template.id}/preferences`"
+                    data-turbo-frame="modal"
+                    class="flex space-x-2"
+                    @click="closeDropdown"
+                  >
+                    <IconAdjustments class="w-6 h-6 flex-shrink-0" />
+                    <span class="whitespace-nowrap">Preferences</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </span>
           <a
             v-else
             :href="`/templates/${template.id}`"
@@ -148,7 +190,7 @@
           @change="save"
         />
         <div
-          class="sticky bottom-0 py-2"
+          class="sticky bottom-0 py-2 space-y-2"
           :style="{ backgroundColor }"
         >
           <Upload
@@ -157,6 +199,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 +225,30 @@
           ref="documents"
           class="pr-3.5 pl-0.5"
         >
-          <Dropzone
+          <template v-if="!sortedDocuments.length && (withUploadButton || withAddPageButton)">
-            v-if="!sortedDocuments.length && withUploadButton"
+            <Dropzone
-            :template-id="template.id"
+              v-if="withUploadButton"
-            :accept-file-types="acceptFileTypes"
+              :template-id="template.id"
-            @success="updateFromUpload"
+              :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 +260,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 +291,7 @@
             </template>
             <div
               v-if="sortedDocuments.length && isBreakpointLg && editable"
-              class="pb-4"
+              class="pb-4 space-y-2"
             >
               <Upload
                 v-if="withUploadButton"
@@ -221,6 +299,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 +342,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 +415,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, IconAdjustments } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 import { ref, computed } from 'vue'
 import { en as i18nEn } from './i18n'
@@ -334,6 +428,7 @@ export default {
     Fields,
     IconInfoCircle,
     MobileDrawField,
+    IconPlus,
     IconWritingSign,
     MobileFields,
     Logo,
@@ -343,6 +438,9 @@ export default {
     IconInnerShadowTop,
     Contenteditable,
     IconUsersPlus,
+    IconChevronDown,
+    IconAdjustments,
+    IconEye,
     IconDeviceFloppy
   },
   provide () {
@@ -351,6 +449,7 @@ export default {
       save: this.save,
       t: this.t,
       currencies: this.currencies,
+      locale: this.locale,
       baseFetch: this.baseFetch,
       fieldTypes: this.fieldTypes,
       backgroundColor: this.backgroundColor,
@@ -374,21 +473,51 @@ export default {
       required: false,
       default: () => ({})
     },
+    withFieldPlaceholder: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     backgroundColor: {
       type: String,
       required: false,
       default: ''
     },
+    locale: {
+      type: String,
+      required: false,
+      default: ''
+    },
     editable: {
       type: Boolean,
       required: false,
       default: true
     },
+    withSendButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    withSignYourselfButton: {
+      type: Boolean,
+      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 +664,7 @@ export default {
     return {
       documentRefs: [],
       isBreakpointLg: false,
+      isLoadingBlankPage: false,
       isSaving: false,
       selectedSubmitter: null,
       showDrawField: false,
@@ -549,6 +679,20 @@ export default {
   computed: {
     selectedAreaRef: () => ref(),
     fieldsDragFieldRef: () => ref(),
+    defaultDateFormat () {
+      const isUsBrowser = Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US')
+      const isUsTimezone = new Intl.DateTimeFormat('en-US', { timeZoneName: 'short' }).format(new Date()).match(/\s(?:CST|CDT|PST|PDT|EST|EDT)$/)
+
+      return this.localeDateFormats[this.locale] || ((isUsBrowser || isUsTimezone) ? 'MM/DD/YYYY' : 'DD/MM/YYYY')
+    },
+    localeDateFormats () {
+      return {
+        'de-DE': 'DD.MM.YYYY',
+        'fr-FR': 'DD/MM/YYYY',
+        'it-IT': 'DD/MM/YYYY',
+        'es-ES': 'DD/MM/YYYY'
+      }
+    },
     fieldAreasIndex () {
       const areas = {}
 
@@ -638,6 +782,9 @@ export default {
     this.documentRefs = []
   },
   methods: {
+    closeDropdown () {
+      document.activeElement.blur()
+    },
     t (key) {
       return this.i18n[key] || i18nEn[key] || key
     },
@@ -668,7 +815,7 @@ export default {
 
       if (type === 'date') {
         field.preferences = {
-          format: Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') || new Intl.DateTimeFormat('en-US', { timeZoneName: 'short' }).format(new Date()).match(/\s(?:CST|CDT|PST|PDT|EST|EDT)$/) ? 'MM/DD/YYYY' : 'DD/MM/YYYY'
+          format: this.defaultDateFormat
         }
       }
 
@@ -701,7 +848,7 @@ export default {
 
         if (type === 'date') {
           field.preferences = {
-            format: Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') || new Intl.DateTimeFormat('en-US', { timeZoneName: 'short' }).format(new Date()).match(/\s(?:CST|CDT|PST|PDT|EST|EDT)$/) ? 'MM/DD/YYYY' : 'DD/MM/YYYY'
+            format: this.defaultDateFormat
           }
         }
 
@@ -796,8 +943,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,13 +1179,13 @@ export default {
           field.options = [{ value: '', uuid: v4() }]
         }
 
-        if (field.type === 'stamp') {
+        if (['stamp', 'heading'].includes(field.type)) {
           field.readonly = true
         }
 
         if (field.type === 'date') {
           field.preferences = {
-            format: Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') || new Intl.DateTimeFormat('en-US', { timeZoneName: 'short' }).format(new Date()).match(/\s(?:CST|CDT|PST|PDT|EST|EDT)$/) ? 'MM/DD/YYYY' : 'DD/MM/YYYY'
+            format: this.defaultDateFormat
           }
         }
       }
@@ -1074,6 +1263,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,11 @@
             v-if="field.type === 'payment'"
             :field="field"
             @click-condition="isShowConditionsModal = true"
+            @click-description="isShowDescriptionModal = true"
+            @click-formula="isShowFormulaModal = true"
           />
           <span
-            v-else
+            v-else-if="field.type !== 'heading'"
             class="dropdown dropdown-end"
             @mouseenter="renderDropdown = true"
             @touchstart="renderDropdown = true"
@@ -128,6 +130,7 @@
                 @click-description="isShowDescriptionModal = true"
                 @click-condition="isShowConditionsModal = true"
                 @set-draw="$emit('set-draw', $event)"
+                @remove-area="removeArea"
                 @scroll-to="$emit('scroll-to', $event)"
               />
             </ul>
@@ -279,7 +282,7 @@ export default {
     IconMathFunction,
     FieldType
   },
-  inject: ['template', 'save', 'backgroundColor', 'selectedAreaRef', 't'],
+  inject: ['template', 'save', 'backgroundColor', 'selectedAreaRef', 't', 'locale'],
   props: {
     field: {
       type: Object,
@@ -339,12 +342,17 @@ export default {
 
     if (this.field.type === 'date') {
       this.field.preferences.format ||=
-        (Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') || new Intl.DateTimeFormat('en-US', { timeZoneName: 'short' }).format(new Date()).match(/\s(?:CST|CDT|PST|PDT|EST|EDT)$/) ? 'MM/DD/YYYY' : 'DD/MM/YYYY')
+       ({ 'de-DE': 'DD.MM.YYYY' }[this.locale] || ((Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') || new Intl.DateTimeFormat('en-US', { timeZoneName: 'short' }).format(new Date()).match(/\s(?:CST|CDT|PST|PDT|EST|EDT)$/)) ? 'MM/DD/YYYY' : 'DD/MM/YYYY'))
     }
   },
   methods: {
+    removeArea (area) {
+      this.field.areas.splice(this.field.areas.indexOf(area), 1)
+
+      this.save()
+    },
     buildDefaultName (field, fields) {
-      if (field.type === 'payment' && field.preferences?.price) {
+      if (field.type === 'payment' && field.preferences?.price && !field.preferences?.formula) {
         const { price, currency } = field.preferences || {}
 
         const formattedPrice = new Intl.NumberFormat([], {
@@ -356,9 +364,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')
+        if (this.field.type === 'heading') {
-
+          return `${this.fieldNames[field.type]} ${typeIndex + 1}`
-        return `${this.fieldNames[field.type]} ${suffix} ${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 +427,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_settings.vue

@@ -358,7 +358,7 @@
     >
       <a
         href="#"
-        class="text-sm py-1 px-2"
+        class="text-sm py-1 px-2 group/1"
         @click.prevent="$emit('scroll-to', area)"
       >
         <IconShape
@@ -367,6 +367,11 @@
         />
         {{ t('page') }}
         <template v-if="template.schema.length > 1">{{ template.schema.findIndex((item) => item.attachment_uuid === area.attachment_uuid) + 1 }}-</template>{{ area.page + 1 }}
+        <IconX
+          :width="12"
+          class="group-hover/1:inline hidden"
+          @click.prevent.stop="[$emit('remove-area', area), $event.target.closest('.dropdown').querySelector('label').focus()]"
+        />
       </a>
     </li>
     <li v-if="!field.areas?.length || !['radio', 'multiple'].includes(field.type)">
@@ -399,7 +404,7 @@
 </template>
 
 <script>
-import { IconRouteAltLeft, IconShape, IconMathFunction, IconNewSection, IconInfoCircle, IconCopy } from '@tabler/icons-vue'
+import { IconRouteAltLeft, IconShape, IconX, IconMathFunction, IconNewSection, IconInfoCircle, IconCopy } from '@tabler/icons-vue'
 
 export default {
   name: 'FieldSettings',
@@ -409,7 +414,8 @@ export default {
     IconMathFunction,
     IconRouteAltLeft,
     IconCopy,
-    IconNewSection
+    IconNewSection,
+    IconX
   },
   inject: ['template', 'save', 't'],
   props: {
@@ -443,7 +449,7 @@ export default {
       default: true
     }
   },
-  emits: ['set-draw', 'scroll-to', 'click-formula', 'click-description', 'click-condition'],
+  emits: ['set-draw', 'scroll-to', 'click-formula', 'click-description', 'click-condition', 'remove-area'],
   data () {
     return {
     }

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

@@ -204,7 +204,10 @@ export default {
         alert('Some fields are missing in the formula.')
       } else {
         this.field.preferences.formula = normalizedFormula
-        this.field.readonly = !!normalizedFormula
+
+        if (this.field.type !== 'payment') {
+          this.field.readonly = !!normalizedFormula
+        }
 
         this.save()
 

app/javascript/template_builder/i18n.js

@@ -8,13 +8,16 @@ 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',
   display_title: 'Display title',
   with_logo: 'With logo',
   unchecked: 'Unchecked',
+  price: 'Price',
   type_value: 'Type value',
   equal: 'Equal',
   not_equal: 'Not equal',

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

@@ -52,7 +52,7 @@
       </template>
       <template v-else>
         <template
-          v-for="(icon, type) in fieldIcons"
+          v-for="(icon, type) in fieldIconsSorted"
           :key="type"
         >
           <li v-if="(fieldTypes.length === 0 || fieldTypes.includes(type)) && (withPhone || type != 'phone') && (withPayment || type != 'payment')">

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

@@ -1,7 +1,7 @@
 <template>
   <span
     class="dropdown dropdown-end"
-    :class="{ 'dropdown-open': (!field.preferences?.price || !isConnected) && !isLoading }"
+    :class="{ 'dropdown-open': ((!field.preferences?.price && !field.preferences?.formula) || !isConnected) && !isLoading }"
   >
     <label
       tabindex="0"
@@ -26,7 +26,7 @@
       >
         <select
           v-model="field.preferences.currency"
-          placeholder="Price"
+          :placeholder="t('price')"
           class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0"
           @change="save"
         >
@@ -51,14 +51,23 @@
         @click.stop
       >
         <input
+          v-if="field.preferences.formula"
+          type="number"
+          :placeholder="t('price')"
+          disabled="true"
+          class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
+          @blur="save"
+        >
+        <input
+          v-else
           v-model="field.preferences.price"
           type="number"
-          placeholder="Price"
+          :placeholder="t('price')"
           class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
           @blur="save"
         >
         <label
-          v-if="field.preferences.price"
+          v-if="field.preferences.price && !field.preferences.formula"
           :style="{ backgroundColor: backgroundColor }"
           class="absolute -top-1 left-2.5 px-1 h-4"
           style="font-size: 8px"
@@ -149,7 +158,33 @@
           data-turbo="false"
         >Learn more</a>
       </div>
+      <li class="mb-1">
+        <label
+          class="label-text cursor-pointer text-center w-full flex items-center"
+          @click="$emit('click-formula')"
+        >
+          <IconMathFunction
+            width="18"
+          />
+          <span class="text-sm">
+            {{ t('formula') }}
+          </span>
+        </label>
+      </li>
       <hr>
+      <li>
+        <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 +203,7 @@
 </template>
 
 <script>
-import { IconSettings, IconCircleCheck, IconBrandStripe, IconInnerShadowTop, IconRouteAltLeft } from '@tabler/icons-vue'
+import { IconMathFunction, IconSettings, IconCircleCheck, IconInfoCircle, IconBrandStripe, IconInnerShadowTop, IconRouteAltLeft } from '@tabler/icons-vue'
 import { ref } from 'vue'
 
 const isConnected = ref(false)
@@ -179,6 +214,8 @@ export default {
     IconSettings,
     IconCircleCheck,
     IconRouteAltLeft,
+    IconInfoCircle,
+    IconMathFunction,
     IconInnerShadowTop,
     IconBrandStripe
   },
@@ -189,7 +226,7 @@ export default {
       required: true
     }
   },
-  emits: ['click-condition'],
+  emits: ['click-condition', 'click-description', 'click-formula'],
   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

@@ -15,14 +15,47 @@ class ProcessSubmitterCompletionJob
     Submissions::EnsureResultGenerated.call(submitter)
 
     if is_all_completed && submitter.completed_at == submitter.submission.submitters.maximum(:completed_at)
+      if submitter.submission.account.account_configs.exists?(key: AccountConfig::COMBINE_PDF_RESULT_KEY, value: true)
+        Submissions::GenerateCombinedAttachment.call(submitter)
+      end
+
       Submissions::GenerateAuditTrail.call(submitter.submission)
 
       enqueue_completed_emails(submitter)
     end
 
-    return if Accounts.load_webhook_url(submitter.account).blank?
+    enqueue_completed_webhooks(submitter, is_all_completed:)
+  end
 
-    SendFormCompletedWebhookRequestJob.perform_async({ 'submitter_id' => submitter.id })
+  def enqueue_completed_webhooks(submitter, is_all_completed: false)
+    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_urls = submitter.account.webhook_urls
+
+    webhook_urls = webhook_urls.where(
+      Arel::Table.new(:webhook_urls)[:events].matches('%"form.completed"%')
+    ).or(
+      webhook_urls.where(
+        Arel::Table.new(:webhook_urls)[:events].matches('%"submission.completed"%')
+      )
+    )
+
+    webhook_urls.each do |webhook|
+      if webhook.events.include?('form.completed')
+        SendFormCompletedWebhookRequestJob.perform_async({ 'submitter_id' => submitter.id,
+                                                           'webhook_url_id' => webhook.id })
+      end
+
+      if webhook.events.include?('submission.completed') && is_all_completed
+        SendSubmissionCompletedWebhookRequestJob.perform_async({ 'submission_id' => submitter.submission_id,
+                                                                 'webhook_url_id' => webhook.id })
+      end
+    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, secret = load_url_and_secret(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
@@ -32,6 +29,7 @@ class SendFormCompletedWebhookRequestJob
                      timestamp: Time.current,
                      data: Submitters::SerializeForWebhook.call(submitter)
                    }.to_json,
+                   **secret.to_h,
                    'Content-Type' => 'application/json',
                    'User-Agent' => USER_AGENT)
     rescue Faraday::Error
@@ -41,10 +39,33 @@ 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_and_secret(submitter, params)
+    if params['encrypted_config_id']
+      config = EncryptedConfig.find(params['encrypted_config_id'])
+
+      url = config.value
+
+      return if url.blank?
+
+      preferences = Accounts.load_webhook_preferences(submitter.submission.account)
+
+      return if preferences['form.completed'] == false
+
+      secret = EncryptedConfig.find_or_initialize_by(account_id: config.account_id,
+                                                     key: EncryptedConfig::WEBHOOK_SECRET_KEY)&.value.to_h
+
+      [url, secret]
+    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/jobs/send_form_declined_webhook_request_job.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+class SendFormDeclinedWebhookRequestJob
+  include Sidekiq::Job
+
+  sidekiq_options queue: :webhooks
+
+  USER_AGENT = 'DocuSeal.co Webhook'
+
+  MAX_ATTEMPTS = 10
+
+  def perform(params = {})
+    submitter = Submitter.find(params['submitter_id'])
+
+    attempt = params['attempt'].to_i
+    config = Accounts.load_webhook_config(submitter.submission.account)
+    url = config&.value.presence
+
+    return if url.blank?
+
+    preferences = Accounts.load_webhook_preferences(submitter.submission.account)
+
+    return if preferences['form.declined'] == false
+
+    ActiveStorage::Current.url_options = Docuseal.default_url_options
+
+    resp = begin
+      Faraday.post(url,
+                   {
+                     event_type: 'form.declined',
+                     timestamp: Time.current,
+                     data: Submitters::SerializeForWebhook.call(submitter)
+                   }.to_json,
+                   **EncryptedConfig.find_or_initialize_by(account_id: config.account_id,
+                                                           key: EncryptedConfig::WEBHOOK_SECRET_KEY)&.value.to_h,
+                   'Content-Type' => 'application/json',
+                   'User-Agent' => USER_AGENT)
+    rescue Faraday::Error
+      nil
+    end
+
+    if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
+       (!Docuseal.multitenant? || submitter.account.account_configs.exists?(key: :plan))
+      SendFormDeclinedWebhookRequestJob.perform_in((2**attempt).minutes, {
+                                                     'submitter_id' => submitter.id,
+                                                     'attempt' => attempt + 1,
+                                                     'last_status' => resp&.status.to_i
+                                                   })
+    end
+  end
+end

app/jobs/send_form_started_webhook_request_job.rb

@@ -13,7 +13,8 @@ class SendFormStartedWebhookRequestJob
     submitter = Submitter.find(params['submitter_id'])
 
     attempt = params['attempt'].to_i
-    url = Accounts.load_webhook_url(submitter.submission.account)
+    config = Accounts.load_webhook_config(submitter.submission.account)
+    url = config&.value.presence
 
     return if url.blank?
 
@@ -30,6 +31,8 @@ class SendFormStartedWebhookRequestJob
                      timestamp: Time.current,
                      data: Submitters::SerializeForWebhook.call(submitter)
                    }.to_json,
+                   **EncryptedConfig.find_or_initialize_by(account_id: config.account_id,
+                                                           key: EncryptedConfig::WEBHOOK_SECRET_KEY)&.value.to_h,
                    'Content-Type' => 'application/json',
                    'User-Agent' => USER_AGENT)
     rescue Faraday::Error

app/jobs/send_form_viewed_webhook_request_job.rb

@@ -13,7 +13,8 @@ class SendFormViewedWebhookRequestJob
     submitter = Submitter.find(params['submitter_id'])
 
     attempt = params['attempt'].to_i
-    url = Accounts.load_webhook_url(submitter.submission.account)
+    config = Accounts.load_webhook_config(submitter.submission.account)
+    url = config&.value.presence
 
     return if url.blank?
 
@@ -30,6 +31,8 @@ class SendFormViewedWebhookRequestJob
                      timestamp: Time.current,
                      data: Submitters::SerializeForWebhook.call(submitter)
                    }.to_json,
+                   **EncryptedConfig.find_or_initialize_by(account_id: config.account_id,
+                                                           key: EncryptedConfig::WEBHOOK_SECRET_KEY)&.value.to_h,
                    'Content-Type' => 'application/json',
                    'User-Agent' => USER_AGENT)
     rescue Faraday::Error

app/jobs/send_submission_archived_webhook_request_job.rb

@@ -13,7 +13,9 @@ class SendSubmissionArchivedWebhookRequestJob
     submission = Submission.find(params['submission_id'])
 
     attempt = params['attempt'].to_i
-    url = Accounts.load_webhook_url(submission.account)
+
+    config = Accounts.load_webhook_config(submission.account)
+    url = config&.value.presence
 
     return if url.blank?
 
@@ -28,6 +30,8 @@ class SendSubmissionArchivedWebhookRequestJob
                      timestamp: Time.current,
                      data: submission.as_json(only: %i[id archived_at])
                    }.to_json,
+                   **EncryptedConfig.find_or_initialize_by(account_id: config.account_id,
+                                                           key: EncryptedConfig::WEBHOOK_SECRET_KEY)&.value.to_h,
                    'Content-Type' => 'application/json',
                    'User-Agent' => USER_AGENT)
     rescue Faraday::Error

app/jobs/send_submission_completed_webhook_request_job.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+class SendSubmissionCompletedWebhookRequestJob
+  include Sidekiq::Job
+
+  sidekiq_options queue: :webhooks
+
+  USER_AGENT = 'DocuSeal.co Webhook'
+
+  MAX_ATTEMPTS = 10
+
+  def perform(params = {})
+    submission = Submission.find(params['submission_id'])
+
+    attempt = params['attempt'].to_i
+
+    webhook_url = submission.account.webhook_urls.find(params['webhook_url_id'])
+
+    url = webhook_url.url if webhook_url.events.include?('submission.completed')
+
+    return if url.blank?
+
+    resp = begin
+      Faraday.post(url,
+                   {
+                     event_type: 'submission.completed',
+                     timestamp: Time.current,
+                     data: Submissions::SerializeForApi.call(submission)
+                   }.to_json,
+                   **EncryptedConfig.find_or_initialize_by(account_id: submission.account_id,
+                                                           key: EncryptedConfig::WEBHOOK_SECRET_KEY)&.value.to_h,
+                   'Content-Type' => 'application/json',
+                   'User-Agent' => USER_AGENT)
+    rescue Faraday::Error
+      nil
+    end
+
+    if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
+       (!Docuseal.multitenant? || submission.account.account_configs.exists?(key: :plan))
+      SendSubmissionCompletedWebhookRequestJob.perform_in((2**attempt).minutes, {
+                                                            **params,
+                                                            'attempt' => attempt + 1,
+                                                            'last_status' => resp&.status.to_i
+                                                          })
+    end
+  end
+end

app/jobs/send_submission_created_webhook_request_job.rb

@@ -13,7 +13,9 @@ class SendSubmissionCreatedWebhookRequestJob
     submission = Submission.find(params['submission_id'])
 
     attempt = params['attempt'].to_i
-    url = Accounts.load_webhook_url(submission.account)
+
+    config = Accounts.load_webhook_config(submission.account)
+    url = config&.value.presence
 
     return if url.blank?
 
@@ -28,6 +30,8 @@ class SendSubmissionCreatedWebhookRequestJob
                      timestamp: Time.current,
                      data: Submissions::SerializeForApi.call(submission)
                    }.to_json,
+                   **EncryptedConfig.find_or_initialize_by(account_id: config.account_id,
+                                                           key: EncryptedConfig::WEBHOOK_SECRET_KEY)&.value.to_h,
                    'Content-Type' => 'application/json',
                    'User-Agent' => USER_AGENT)
     rescue Faraday::Error

app/jobs/send_submitter_invitation_email_job.rb

@@ -6,11 +6,7 @@ class SendSubmitterInvitationEmailJob
   def perform(params = {})
     submitter = Submitter.find(params['submitter_id'])
 
-    if submitter.submission.source == 'invite' && !Accounts.can_send_emails?(submitter.account, on_events: true)
+    return if submitter.submission.source == 'invite' && !Accounts.can_send_emails?(submitter.account, on_events: true)
-      Rollbar.error("Skip email: #{submitter.id}") if defined?(Rollbar)
-
-      return
-    end
 
     mail = SubmitterMailer.invitation_email(submitter)
 

app/jobs/send_template_created_webhook_request_job.rb

@@ -13,7 +13,9 @@ class SendTemplateCreatedWebhookRequestJob
     template = Template.find(params['template_id'])
 
     attempt = params['attempt'].to_i
-    url = Accounts.load_webhook_url(template.account)
+
+    config = Accounts.load_webhook_config(template.account)
+    url = config&.value.presence
 
     return if url.blank?
 
@@ -28,6 +30,8 @@ class SendTemplateCreatedWebhookRequestJob
                      timestamp: Time.current,
                      data: Templates::SerializeForApi.call(template)
                    }.to_json,
+                   **EncryptedConfig.find_or_initialize_by(account_id: config.account_id,
+                                                           key: EncryptedConfig::WEBHOOK_SECRET_KEY)&.value.to_h,
                    'Content-Type' => 'application/json',
                    'User-Agent' => USER_AGENT)
     rescue Faraday::Error

app/jobs/send_template_updated_webhook_request_job.rb

@@ -13,7 +13,9 @@ class SendTemplateUpdatedWebhookRequestJob
     template = Template.find(params['template_id'])
 
     attempt = params['attempt'].to_i
-    url = Accounts.load_webhook_url(template.account)
+
+    config = Accounts.load_webhook_config(template.account)
+    url = config&.value.presence
 
     return if url.blank?
 
@@ -28,6 +30,8 @@ class SendTemplateUpdatedWebhookRequestJob
                      timestamp: Time.current,
                      data: Templates::SerializeForApi.call(template)
                    }.to_json,
+                   **EncryptedConfig.find_or_initialize_by(account_id: config.account_id,
+                                                           key: EncryptedConfig::WEBHOOK_SECRET_KEY)&.value.to_h,
                    'Content-Type' => 'application/json',
                    'User-Agent' => USER_AGENT)
     rescue Faraday::Error

app/mailers/submitter_mailer.rb

@@ -6,6 +6,8 @@ class SubmitterMailer < ApplicationMailer
 
   DEFAULT_INVITATION_SUBJECT = 'You are invited to submit a form'
 
+  NO_REPLY_REGEXP = /no-?reply@/i
+
   def invitation_email(submitter)
     @current_account = submitter.submission.account
     @submitter = submitter
@@ -28,12 +30,13 @@ class SubmitterMailer < ApplicationMailer
 
     assign_message_metadata('submitter_invitation', @submitter)
 
+    reply_to = build_submitter_reply_to(@submitter)
+
     mail(
       to: @submitter.friendly_name,
       from: from_address_for_submitter(submitter),
       subject:,
-      reply_to: submitter.preferences['reply_to'].presence ||
+      reply_to:
-                (submitter.submission.created_by_user || submitter.template.author)&.friendly_name&.sub(/\+\w+@/, '@')
     )
   end
 
@@ -48,8 +51,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,
-                                 @submitter.template.preferences['completed_notification_email_attach_audit'] != false
+      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
@@ -72,6 +78,24 @@ class SubmitterMailer < ApplicationMailer
          subject:)
   end
 
+  def declined_email(submitter, user)
+    @current_account = submitter.submission.account
+    @submitter = submitter
+    @submission = submitter.submission
+    @user = user
+
+    assign_message_metadata('submitter_declined', @submitter)
+
+    I18n.with_locale(submitter.account.locale) do
+      mail(from: from_address_for_submitter(submitter),
+           to: user.role == 'integration' ? user.friendly_name.sub(/\+\w+@/, '@') : user.friendly_name,
+           reply_to: @submitter.friendly_name,
+           subject: I18n.t(:name_declined_by_submitter,
+                           name: @submission.template.name.truncate(20),
+                           submitter: @submitter.name || @submitter.email || @submitter.phone))
+    end
+  end
+
   def documents_copy_email(submitter, to: nil, sig: false)
     @current_account = submitter.submission.account
     @submitter = submitter
@@ -101,29 +125,39 @@ class SubmitterMailer < ApplicationMailer
 
     assign_message_metadata('submitter_documents_copy', @submitter)
 
+    reply_to = build_submitter_reply_to(submitter)
+
     mail(from: from_address_for_submitter(submitter),
          to: to || @submitter.friendly_name,
-         reply_to: @submitter.preferences['reply_to'].presence ||
+         reply_to:,
-                   (@submitter.submission.created_by_user ||
-                    @submitter.template.author)&.friendly_name&.sub(/\+\w+@/, '@'),
          subject:)
   end
 
   private
 
+  def build_submitter_reply_to(submitter)
+    reply_to =
+      submitter.preferences['reply_to'].presence ||
+      (submitter.submission.created_by_user || submitter.template.author)&.friendly_name&.sub(/\+\w+@/, '@')
+
+    return nil if reply_to.to_s.match?(NO_REPLY_REGEXP)
+
+    reply_to
+  end
+
   def build_completed_subject(submitter)
     submitters = submitter.submission.submitters.order(:completed_at)
                           .map { |e| e.name || e.email || e.phone }.join(', ')
     %(#{submitter.submission.template.name} has been completed by #{submitters})
   end
 
-  def add_completed_email_attachments!(submitter, with_audit_log: true)
+  def add_completed_email_attachments!(submitter, with_audit_log: true, with_documents: true)
-    documents = Submitters.select_attachments_for_download(submitter)
+    documents = with_documents ? Submitters.select_attachments_for_download(submitter) : []
 
     total_size = 0
     audit_trail_data = nil
 
-    if with_audit_log && submitter.submission.audit_trail.present?
+    if with_audit_log && submitter.submission.audit_trail.present? && documents.first&.name != 'combined_document'
       audit_trail_data = submitter.submission.audit_trail.download
 
       total_size = audit_trail_data.size
@@ -133,13 +167,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
+      if file_fields.pluck('submitter_uuid').uniq.size == 1
-      storage_attachments =
+        storage_attachments =
-        submitter.attachments.where(uuid: submitter.values.values_at(*file_fields.pluck('uuid')).flatten)
+          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

@@ -29,9 +29,10 @@ class Account < ApplicationRecord
   has_one :default_template_folder, -> { where(name: TemplateFolder::DEFAULT_NAME) },
           class_name: 'TemplateFolder', dependent: :destroy, inverse_of: :account
   has_many :submissions, dependent: :destroy
-  has_many :submitters, through: :submissions
+  has_many :submitters, dependent: :destroy
   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/account_config.rb

@@ -38,6 +38,9 @@ class AccountConfig < ApplicationRecord
   DOWNLOAD_LINKS_AUTH_KEY = 'download_links_auth'
   FORCE_SSO_AUTH_KEY = 'force_sso_auth'
   FLATTEN_RESULT_PDF_KEY = 'flatten_result_pdf'
+  WITH_SIGNATURE_ID = 'with_signature_id'
+  REQUIRE_SIGNING_REASON_KEY = 'require_signing_reason'
+  COMBINE_PDF_RESULT_KEY = 'combine_pdf_result_key'
 
   DEFAULT_VALUES = {
     SUBMITTER_INVITATION_EMAIL_KEY => {

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/encrypted_config.rb

@@ -27,7 +27,8 @@ class EncryptedConfig < ApplicationRecord
     ESIGN_CERTS_KEY = 'esign_certs',
     TIMESTAMP_SERVER_URL_KEY = 'timestamp_server_url',
     APP_URL_KEY = 'app_url',
-    WEBHOOK_URL_KEY = 'webhook_url'
+    WEBHOOK_URL_KEY = 'webhook_url',
+    WEBHOOK_SECRET_KEY = 'webhook_secret'
   ].freeze
 
   belongs_to :account

app/models/submission.rb

@@ -6,6 +6,7 @@
 #
 #  id                  :bigint           not null, primary key
 #  archived_at         :datetime
+#  expire_at           :datetime
 #  preferences         :text             not null
 #  slug                :string           not null
 #  source              :text             not null
@@ -21,7 +22,7 @@
 #
 # Indexes
 #
-#  index_submissions_on_account_id          (account_id)
+#  index_submissions_on_account_id_and_id   (account_id,id)
 #  index_submissions_on_created_by_user_id  (created_by_user_id)
 #  index_submissions_on_slug                (slug) UNIQUE
 #  index_submissions_on_template_id         (template_id)
@@ -75,10 +76,20 @@ class Submission < ApplicationRecord
     preserved: 'preserved'
   }, scope: false, prefix: true
 
+  def expired?
+    expire_at && expire_at <= Time.current
+  end
+
   def audit_trail_url
     return if audit_trail.blank?
 
     ActiveStorage::Blob.proxy_url(audit_trail.blob)
   end
   alias audit_log_url audit_trail_url
+
+  def combined_document_url
+    return if combined_document.blank?
+
+    ActiveStorage::Blob.proxy_url(combined_document.blob)
+  end
 end

app/models/submission_event.rb

@@ -47,7 +47,9 @@ class SubmissionEvent < ApplicationRecord
     phone_verified: 'phone_verified',
     start_form: 'start_form',
     view_form: 'view_form',
+    invite_party: 'invite_party',
     complete_form: 'complete_form',
+    decline_form: 'decline_form',
     api_complete_form: 'api_complete_form'
   }, scope: false
 

app/models/submitter.rb

@@ -6,6 +6,7 @@
 #
 #  id            :bigint           not null, primary key
 #  completed_at  :datetime
+#  declined_at   :datetime
 #  email         :string
 #  ip            :string
 #  metadata      :text             not null
@@ -20,15 +21,17 @@
 #  values        :text             not null
 #  created_at    :datetime         not null
 #  updated_at    :datetime         not null
+#  account_id    :bigint           not null
 #  external_id   :string
 #  submission_id :bigint           not null
 #
 # Indexes
 #
-#  index_submitters_on_email          (email)
+#  index_submitters_on_account_id_and_id  (account_id,id)
-#  index_submitters_on_external_id    (external_id)
+#  index_submitters_on_email              (email)
-#  index_submitters_on_slug           (slug) UNIQUE
+#  index_submitters_on_external_id        (external_id)
-#  index_submitters_on_submission_id  (submission_id)
+#  index_submitters_on_slug               (slug) UNIQUE
+#  index_submitters_on_submission_id      (submission_id)
 #
 # Foreign Keys
 #
@@ -36,8 +39,8 @@
 #
 class Submitter < ApplicationRecord
   belongs_to :submission
+  belongs_to :account
   has_one :template, through: :submission
-  has_one :account, through: :submission
 
   attribute :values, :string, default: -> { {} }
   attribute :preferences, :string, default: -> { {} }
@@ -57,7 +60,9 @@ class Submitter < ApplicationRecord
   scope :completed, -> { where.not(completed_at: nil) }
 
   def status
-    if completed_at?
+    if declined_at?
+      'declined'
+    elsif completed_at?
       'completed'
     elsif opened_at?
       'opened'
@@ -80,7 +85,15 @@ class Submitter < ApplicationRecord
     end
   end
 
+  def first_name
+    name.split(/\s+/, 2).first
+  end
+
+  def last_name
+    name.split(/\s+/, 2).last
+  end
+
   def status_event_at
-    completed_at || opened_at || sent_at || created_at
+    declined_at || completed_at || opened_at || sent_at || created_at
   end
 end

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/accounts/show.html.erb

@@ -22,7 +22,7 @@
         </div>
       <% end %>
       <% encrypted_config = @encrypted_config || EncryptedConfig.find_or_initialize_by(account: current_account, key: EncryptedConfig::APP_URL_KEY) %>
-      <% if !Docuseal.multitenant? && can?(:manage, encrypted_config) && !current_account.testing? %>
+      <% if !Docuseal.multitenant? && can?(:manage, encrypted_config) && !current_account.testing? && ENV['APP_URL'].blank? %>
         <%= fields_for encrypted_config do |ff| %>
           <div class="form-control">
             <%= ff.label :value, 'App URL', class: 'label' %>
@@ -51,6 +51,30 @@
             </div>
           <% end %>
         <% end %>
+        <% account_config = AccountConfig.find_or_initialize_by(account: current_account, key: AccountConfig::WITH_SIGNATURE_ID) %>
+        <% if can?(:manage, account_config) %>
+          <%= form_for account_config, url: account_configs_path, method: :post do |f| %>
+            <%= f.hidden_field :key %>
+            <div class="flex items-center justify-between py-2.5">
+              <span>
+                Add signature ID to the documents
+              </span>
+              <%= f.check_box :value, class: 'toggle', checked: account_config.value, onchange: 'this.form.requestSubmit()' %>
+            </div>
+          <% end %>
+        <% end %>
+        <% account_config = AccountConfig.find_or_initialize_by(account: current_account, key: AccountConfig::REQUIRE_SIGNING_REASON_KEY) %>
+        <% if can?(:manage, account_config) %>
+          <%= form_for account_config, url: account_configs_path, method: :post do |f| %>
+            <%= f.hidden_field :key %>
+            <div class="flex items-center justify-between py-2.5">
+              <span>
+                Require signing reason
+              </span>
+              <%= f.check_box :value, class: 'toggle', checked: account_config.value, onchange: 'this.form.requestSubmit()' %>
+            </div>
+          <% end %>
+        <% end %>
         <% account_config = AccountConfig.find_or_initialize_by(account: current_account, key: AccountConfig::ALLOW_TYPED_SIGNATURE) %>
         <% if can?(:manage, account_config) %>
           <%= form_for account_config, url: account_configs_path, method: :post do |f| %>
@@ -99,6 +123,18 @@
             </div>
           <% end %>
         <% end %>
+        <% account_config = AccountConfig.find_or_initialize_by(account: current_account, key: AccountConfig::COMBINE_PDF_RESULT_KEY) %>
+        <% if can?(:manage, account_config) %>
+          <%= form_for account_config, url: account_configs_path, method: :post do |f| %>
+            <%= f.hidden_field :key %>
+            <div class="flex items-center justify-between py-2.5">
+              <span>
+                Combine completed documents and Audit Log
+              </span>
+              <%= f.check_box :value, class: 'toggle', checked: account_config.value, onchange: 'this.form.requestSubmit()' %>
+            </div>
+          <% end %>
+        <% end %>
       </div>
     <% end %>
     <%= render 'integrations' %>

app/views/dashboard/_toggle_view.html.erb

@@ -1,4 +1,4 @@
-<form action="<%= root_path %>" method="get" class="bg-base-200 px-1.5 rounded-xl py-1">
+<form action="<%= root_path %>" method="get" class="bg-base-200 px-1.5 rounded-xl py-1 whitespace-nowrap">
   <toggle-cookies data-value="templates" data-key="dashboard_view" class="sm:tooltip tooltip-top" data-tip="Templates">
     <button class="<%= local_assigns[:selected] == 'submissions' ? 'btn !border !rounded-lg btn-square !p-0 !btn-sm !h-8 !w-9' : 'btn btn-neutral !rounded-lg btn-square !p-0 hover:text-neutral-300 !btn-sm !h-8 !w-9 disabled:btn-neutral' %>">
       <%= svg_icon('layout_grid', class: 'w-6 h-6 stroke-2') %>

app/views/devise/shared/_links.html.erb

@@ -14,6 +14,6 @@
     <% if params[:redir].present? %>
       <%= hidden_field_tag :redir, params[:redir] %>
     <% end %>
-    <%= select_tag :lang, options_for_select((I18n.available_locales - %i[en pt-PT de-DE fr-FR es-ES]).map { |code| [t("language_#{code}"), code] }, I18n.locale), onchange: 'this.form.requestSubmit();', class: 'select select-sm border-base-content/30 text-base' %>
+    <%= select_tag :lang, options_for_select((I18n.available_locales - %i[en pt-PT de-DE fr-FR it-IT es-ES]).map { |code| [t("language_#{code}"), code] }, I18n.locale), onchange: 'this.form.requestSubmit();', class: 'select select-sm border-base-content/30 text-base' %>
   <% end %>
 </div>