Merge from docusealco/wip

Wip

.rubocop.yml

@@ -84,7 +84,7 @@ RSpec/AnyInstance:
   Enabled: false
 
 Metrics/BlockNesting:
-  Max: 5
+  Max: 6
 
 Rails/I18nLocaleTexts:
   Enabled: false
@@ -106,3 +106,10 @@ Rails/StrongParametersExpect:
 
 Rails/RedirectBackOrTo:
   Enabled: false
+
+Rails/UnknownEnv:
+  Environments:
+    - development
+    - test
+    - production
+    - local

Dockerfile

@@ -48,10 +48,11 @@ ENV RAILS_ENV=production
 ENV BUNDLE_WITHOUT="development:test"
 ENV LD_PRELOAD=/lib/libgcompat.so.0
 ENV OPENSSL_CONF=/etc/openssl_legacy.cnf
+ENV VIPS_MAX_COORD=15000
 
 WORKDIR /app
 
-RUN apk add --no-cache sqlite-dev libpq-dev mariadb-dev vips-dev yaml-dev redis libheif vips-heif gcompat ttf-freefont onnxruntime && mkdir /fonts && rm /usr/share/fonts/freefont/FreeSans.otf
+RUN apk add --no-cache sqlite-dev libpq-dev vips-dev yaml-dev redis libheif vips-heif gcompat ttf-freefont onnxruntime && mkdir /fonts && rm /usr/share/fonts/freefont/FreeSans.otf
 
 RUN addgroup -g 2000 docuseal && adduser -u 2000 -G docuseal -s /bin/sh -D -h /home/docuseal docuseal
 
@@ -69,7 +70,7 @@ activate = 1' >> /etc/openssl_legacy.cnf
 
 COPY --chown=docuseal:docuseal ./Gemfile ./Gemfile.lock ./
 
-RUN apk add --no-cache build-base && bundle install && apk del --no-cache build-base && rm -rf ~/.bundle /usr/local/bundle/cache && ruby -e "puts Dir['/usr/local/bundle/**/{spec,rdoc,resources/shared,resources/collation,resources/locales}']" | xargs rm -rf && ln -sf /usr/lib/libonnxruntime.so.1 $(ruby -e "print Dir[Gem::Specification.find_by_name('onnxruntime').gem_dir + '/vendor/*.so'].first")
+RUN apk add --no-cache build-base git && bundle install && apk del --no-cache build-base git && rm -rf ~/.bundle /usr/local/bundle/cache && ruby -e "puts Dir['/usr/local/bundle/**/{spec,rdoc,resources/shared,resources/collation,resources/locales}']" | xargs rm -rf && ln -sf /usr/lib/libonnxruntime.so.1 $(ruby -e "print Dir[Gem::Specification.find_by_name('onnxruntime').gem_dir + '/vendor/*.so'].first")
 
 COPY --chown=docuseal:docuseal ./bin ./bin
 COPY --chown=docuseal:docuseal ./app ./app
@@ -79,7 +80,7 @@ COPY --chown=docuseal:docuseal ./log ./log
 COPY --chown=docuseal:docuseal ./lib ./lib
 COPY --chown=docuseal:docuseal ./public ./public
 COPY --chown=docuseal:docuseal ./tmp ./tmp
-COPY --chown=docuseal:docuseal LICENSE README.md Rakefile config.ru .version ./
+COPY --chown=docuseal:docuseal LICENSE LICENSE_ADDITIONAL_TERMS README.md Rakefile config.ru .version ./
 COPY --chown=docuseal:docuseal .version ./public/version
 
 COPY --chown=docuseal:docuseal --from=download /fonts/GoNotoKurrent-Regular.ttf /fonts/GoNotoKurrent-Bold.ttf /fonts/DancingScript-Regular.otf /fonts/OFL.txt /fonts

Gemfile

@@ -23,7 +23,6 @@ gem 'hexapdf'
 gem 'image_processing'
 gem 'jwt', require: false
 gem 'lograge'
-gem 'mysql2', require: false
 gem 'numo-narray-alt', require: false
 gem 'oj'
 gem 'onnxruntime', require: false
@@ -34,7 +33,6 @@ gem 'pretender'
 gem 'puma', require: false
 gem 'rack'
 gem 'rails'
-gem 'rails_autolink'
 gem 'rails-i18n'
 gem 'rotp'
 gem 'rouge', require: false
@@ -45,6 +43,7 @@ gem 'shakapacker'
 gem 'sidekiq'
 gem 'sqlite3', require: false
 gem 'strip_attributes'
+gem 'trilogy', github: 'trilogy-libraries/trilogy', glob: 'contrib/ruby/*.gemspec', require: false
 gem 'turbo-rails'
 gem 'twitter_cldr', require: false
 gem 'tzinfo-data'

Gemfile.lock

@@ -1,3 +1,11 @@
+GIT
+  remote: https://github.com/trilogy-libraries/trilogy.git
+  revision: 3963d490459df7a2b5bedb42424c3285f25eab22
+  glob: contrib/ruby/*.gemspec
+  specs:
+    trilogy (2.10.0)
+      bigdecimal
+
 GEM
   remote: https://rubygems.org/
   specs:
@@ -197,7 +205,7 @@ GEM
       railties (>= 6.1.0)
     faker (3.6.0)
       i18n (>= 1.8.11, < 2)
-    faraday (2.14.0)
+    faraday (2.14.1)
       faraday-net_http (>= 2.0, < 3.5)
       json
       logger
@@ -211,7 +219,6 @@ GEM
       concurrent-ruby (~> 1.1)
       webrick (~> 1.7)
       websocket-driver (~> 0.7)
-    ffi (1.17.3)
     ffi (1.17.3-aarch64-linux-gnu)
     ffi (1.17.3-aarch64-linux-musl)
     ffi (1.17.3-arm64-darwin)
@@ -277,7 +284,7 @@ GEM
       rdoc (>= 4.0.0)
       reline (>= 0.4.2)
     jmespath (1.6.2)
-    json (2.18.0)
+    json (2.18.1)
     jwt (3.1.2)
       base64
     language_server-protocol (3.17.0.5)
@@ -318,8 +325,6 @@ GEM
       prism (~> 1.5)
     msgpack (1.8.0)
     multi_json (1.19.1)
-    mysql2 (0.5.7)
-      bigdecimal
     net-http (0.9.1)
       uri (>= 0.11.1)
     net-imap (0.6.2)
@@ -332,22 +337,20 @@ GEM
     net-smtp (0.5.1)
       net-protocol
     nio4r (2.7.5)
-    nokogiri (1.19.0-aarch64-linux-gnu)
+    nokogiri (1.19.1-aarch64-linux-gnu)
       racc (~> 1.4)
-    nokogiri (1.19.0-aarch64-linux-musl)
+    nokogiri (1.19.1-aarch64-linux-musl)
       racc (~> 1.4)
-    nokogiri (1.19.0-arm64-darwin)
+    nokogiri (1.19.1-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.19.0-x86_64-linux-gnu)
+    nokogiri (1.19.1-x86_64-linux-gnu)
       racc (~> 1.4)
-    nokogiri (1.19.0-x86_64-linux-musl)
+    nokogiri (1.19.1-x86_64-linux-musl)
       racc (~> 1.4)
     numo-narray-alt (0.9.13)
     oj (3.16.13)
       bigdecimal (>= 3.0)
       ostruct (>= 0.2)
-    onnxruntime (0.10.1)
-      ffi
     onnxruntime (0.10.1-aarch64-linux)
       ffi
     onnxruntime (0.10.1-arm64-darwin)
@@ -366,7 +369,6 @@ GEM
     parser (3.3.10.1)
       ast (~> 2.4.1)
       racc
-    pg (1.6.3)
     pg (1.6.3-aarch64-linux)
     pg (1.6.3-aarch64-linux-musl)
     pg (1.6.3-arm64-darwin)
@@ -399,7 +401,7 @@ GEM
     puma (7.2.0)
       nio4r (~> 2.0)
     racc (1.8.1)
-    rack (3.2.4)
+    rack (3.2.5)
     rack-proxy (0.7.7)
       rack
     rack-session (2.1.1)
@@ -433,10 +435,6 @@ GEM
     rails-i18n (8.1.0)
       i18n (>= 0.7, < 2)
       railties (>= 8.0.0, < 9)
-    rails_autolink (1.1.8)
-      actionview (> 3.1)
-      activesupport (> 3.1)
-      railties (> 3.1)
     railties (8.1.2)
       actionpack (= 8.1.2)
       activesupport (= 8.1.2)
@@ -644,7 +642,6 @@ DEPENDENCIES
   jwt
   letter_opener_web
   lograge
-  mysql2
   numo-narray-alt
   oj
   onnxruntime
@@ -657,7 +654,6 @@ DEPENDENCIES
   rack
   rails
   rails-i18n
-  rails_autolink
   rotp
   rouge
   rqrcode
@@ -673,6 +669,7 @@ DEPENDENCIES
   simplecov
   sqlite3
   strip_attributes
+  trilogy!
   turbo-rails
   twitter_cldr
   tzinfo-data

LICENSE_ADDITIONAL_TERMS

@@ -0,0 +1,5 @@
+Additional Terms
+
+In accordance with Section 7(b) of the GNU Affero General Public License,
+a covered work must retain the original DocuSeal attribution in interactive
+user interfaces.

README.md

@@ -1,7 +1,7 @@
 <h1 align="center" style="border-bottom: none">
   <div>
     <a href="https://www.docuseal.com">
-      <img  alt="DocuSeal" src="https://github.com/docusealco/docuseal/assets/5418788/c12cd051-81cd-4402-bc3a-92f2cfdc1b06" width="80" />
+      <img  alt="DocuSeal" src="https://github.com/user-attachments/assets/38b45682-ffa4-4919-abde-d2d422325c44" width="80" />
       <br>
     </a>
     DocuSeal
@@ -97,8 +97,8 @@ At DocuSeal we have expertise and technologies to make documents creation, filli
 
 ## License
 
-Distributed under the AGPLv3 License. See [LICENSE](https://github.com/docusealco/docuseal/blob/master/LICENSE) for more information.
+Distributed under the AGPLv3 License with Section 7(b) Additional Terms. See [LICENSE](https://github.com/docusealco/docuseal/blob/master/LICENSE) and [LICENSE_ADDITIONAL_TERMS](https://github.com/docusealco/docuseal/blob/master/LICENSE_ADDITIONAL_TERMS) for more information.
-Unless otherwise noted, all files © 2023 DocuSeal LLC.
+Unless otherwise noted, all files © 2023-2026 DocuSeal LLC.
 
 ## Tools
 

app/controllers/api/submissions_controller.rb

@@ -172,7 +172,10 @@ module Api
         Submissions::NormalizeParamUtils.save_default_value_attachments!(attachments, submitters)
 
         submitters.each do |submitter|
-          SubmissionEvents.create_with_tracking_data(submitter, 'api_complete_form', request) if submitter.completed_at?
+          if submitter.completed_at?
+            Submitters::SubmitValues.maybe_invite_via_field(submitter, request)
+            SubmissionEvents.create_with_tracking_data(submitter, 'api_complete_form', request)
+          end
         end
 
         submissions
@@ -188,7 +191,7 @@ module Api
           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,
-                        :require_phone_2fa, :require_email_2fa, :order, :invite_by,
+                        :require_phone_2fa, :require_email_2fa, :order, :index, :invite_by,
                         { metadata: {}, values: {}, roles: [], readonly_fields: [], message: %i[subject body],
                           fields: [:name, :uuid, :default_value, :value, :title, :description,
                                    :readonly, :required, :validation_pattern, :invalid_message,

app/controllers/api/submitters_controller.rb

@@ -34,6 +34,7 @@ module Api
       render json: Submitters::SerializeForApi.call(@submitter, with_template: true, with_events: true, params:)
     end
 
+    # rubocop:disable Metrics/MethodLength
     def update
       if @submitter.completed_at?
         return render json: { error: 'Submitter has already completed the submission.' }, status: :unprocessable_content
@@ -60,7 +61,10 @@ module Api
 
         @submitter.submission.save!
 
-        SubmissionEvents.create_with_tracking_data(@submitter, 'api_complete_form', request) if @submitter.completed_at?
+        if @submitter.completed_at?
+          Submitters::SubmitValues.maybe_invite_via_field(@submitter, request)
+          SubmissionEvents.create_with_tracking_data(@submitter, 'api_complete_form', request)
+        end
       end
 
       if @submitter.completed_at?
@@ -78,6 +82,7 @@ module Api
 
       render json: { error: e.message }, status: :unprocessable_content
     end
+    # rubocop:enable Metrics/MethodLength
 
     def submitter_params
       submitter_params = params.key?(:submitter) ? params.require(:submitter) : params

app/controllers/api/templates_controller.rb

@@ -107,7 +107,8 @@ module Api
         :external_id,
         :shared_link,
         {
-          submitters: [%i[name uuid is_requester invite_by_uuid optional_invite_by_uuid linked_to_uuid email order]],
+          submitters: [%i[name uuid is_requester invite_by_uuid invite_via_field_uuid
+                          optional_invite_by_uuid linked_to_uuid email order]],
           fields: [[:uuid, :submitter_uuid, :name, :type,
                     :required, :readonly, :default_value,
                     :title, :description, :prefillable,

app/controllers/application_controller.rb

@@ -42,10 +42,6 @@ class ApplicationController < ActionController::Base
   end
 
   def default_url_options
-    if request.domain == 'docuseal.com'
-      return { host: 'docuseal.com', protocol: ENV['FORCE_SSL'].present? ? 'https' : 'http' }
-    end
-
     Docuseal.default_url_options
   end
 

app/controllers/submissions_download_controller.rb

@@ -27,20 +27,18 @@ class SubmissionsDownloadController < ApplicationController
 
     Submissions::EnsureResultGenerated.call(last_submitter)
 
-    if last_submitter.completed_at < TTL.ago && !signature_valid && !current_user_submitter?(last_submitter)
+    if !signature_valid && !current_user_submitter?(last_submitter)
+      return head :not_found unless Submitters::AuthorizedForForm.call(@submitter, current_user, request)
+
+      if last_submitter.completed_at < TTL.ago
         Rollbar.info("TTL: #{last_submitter.id}") if defined?(Rollbar)
 
         return head :not_found
       end
+    end
 
     if params[:combined] == 'true'
-      url = build_combined_url(@submitter)
+      respond_with_combined(last_submitter)
-
-      if url
-        render json: [url]
-      else
-        head :not_found
-      end
     else
       render json: build_urls(last_submitter)
     end
@@ -48,8 +46,18 @@ class SubmissionsDownloadController < ApplicationController
 
   private
 
+  def respond_with_combined(submitter)
+    url = build_combined_url(submitter)
+
+    if url
+      render json: [url]
+    else
+      head :not_found
+    end
+  end
+
   def current_user_submitter?(submitter)
-    current_user && current_user.account.submitters.exists?(id: submitter.id)
+    current_user && current_ability.can?(:read, submitter)
   end
 
   def build_urls(submitter)
@@ -57,7 +65,7 @@ class SubmissionsDownloadController < ApplicationController
                                                           key: AccountConfig::DOCUMENT_FILENAME_FORMAT_KEY)&.value
 
     Submitters.select_attachments_for_download(submitter).map do |attachment|
-      ActiveStorage::Blob.proxy_url(
+      ActiveStorage::Blob.proxy_path(
         attachment.blob,
         expires_at: FILES_TTL.from_now.to_i,
         filename: Submitters.build_document_filename(submitter, attachment.blob, filename_format)
@@ -75,7 +83,7 @@ class SubmissionsDownloadController < ApplicationController
     filename_format = AccountConfig.find_or_initialize_by(account_id: submitter.account_id,
                                                           key: AccountConfig::DOCUMENT_FILENAME_FORMAT_KEY)&.value
 
-    ActiveStorage::Blob.proxy_url(
+    ActiveStorage::Blob.proxy_path(
       attachment.blob,
       expires_at: FILES_TTL.from_now.to_i,
       filename: Submitters.build_document_filename(submitter, attachment.blob, filename_format)

app/controllers/submissions_export_controller.rb

@@ -5,8 +5,9 @@ class SubmissionsExportController < ApplicationController
   load_and_authorize_resource :submission, through: :template, parent: false, only: :index
 
   def index
-    submissions = @submissions.active
+    submissions = params[:archived] == 'true' ? @submissions.archived : @submissions.active
-                              .preload(submitters: { documents_attachments: :blob,
+
+    submissions = submissions.preload(submitters: { documents_attachments: :blob,
                                                     attachments_attachments: :blob })
                              .order(id: :asc)
 

app/controllers/submit_form_controller.rb

@@ -9,15 +9,15 @@ class SubmitFormController < ApplicationController
 
   before_action :load_submitter, only: %i[show update completed]
   before_action :maybe_render_locked_page, only: :show
-  before_action :maybe_require_link_2fa, only: %i[show update]
+  before_action :maybe_require_link_2fa, only: %i[show]
 
   CONFIG_KEYS = [].freeze
 
   def show
     submission = @submitter.submission
 
+    return render :email_2fa unless Submitters::AuthorizedForForm.pass_email_2fa?(@submitter, request)
     return redirect_to submit_form_completed_path(@submitter.slug) if @submitter.completed_at?
-    return render :email_2fa if require_email_2fa?(@submitter)
 
     @form_configs = Submitters::FormConfigs.call(@submitter, CONFIG_KEYS)
 
@@ -48,7 +48,7 @@ class SubmitFormController < ApplicationController
   end
 
   def update
-    if require_email_2fa?(@submitter)
+    unless Submitters::AuthorizedForForm.call(@submitter, current_user, request)
       return render json: { error: I18n.t('verification_required_refresh_the_page_and_pass_2fa') },
                     status: :unprocessable_content
     end
@@ -84,7 +84,9 @@ class SubmitFormController < ApplicationController
   def completed
     raise ActionController::RoutingError, I18n.t('not_found') if @submitter.account.archived_at?
 
-    redirect_to submit_form_path(params[:submit_form_slug]) if require_email_2fa?(@submitter)
+    return if Submitters::AuthorizedForForm.call(@submitter, current_user, request)
+
+    redirect_to submit_form_path(params[:submit_form_slug])
   end
 
   def success; end
@@ -92,10 +94,7 @@ class SubmitFormController < ApplicationController
   private
 
   def maybe_require_link_2fa
-    return if @submitter.submission.source != 'link'
+    return if Submitters::AuthorizedForForm.pass_link_2fa?(@submitter, current_user, request)
-    return unless @submitter.submission.template&.preferences&.dig('shared_link_2fa') == true
-    return if cookies.encrypted[:email_2fa_slug] == @submitter.slug
-    return if @submitter.email == current_user&.email && current_user&.account_id == @submitter.account_id
 
     redirect_to start_form_path(@submitter.submission.template.slug)
   end
@@ -117,12 +116,4 @@ class SubmitFormController < ApplicationController
     ActiveStorage::Attachment.where(record: submission.submitters, name: :attachments)
                              .preload(:blob).index_by(&:uuid)
   end
-
-  def require_email_2fa?(submitter)
-    return false if submitter.submission.template&.preferences&.dig('require_email_2fa') != true &&
-                    submitter.preferences['require_email_2fa'] != true
-    return false if cookies.encrypted[:email_2fa_slug] == submitter.slug
-
-    true
-  end
 end

app/controllers/submit_form_decline_controller.rb

@@ -11,7 +11,9 @@ class SubmitFormDeclineController < ApplicationController
                                                            submitter.completed_at? ||
                                                            submitter.submission.archived_at? ||
                                                            submitter.submission.expired? ||
-                                                           submitter.submission.template&.archived_at?
+                                                           submitter.submission.template&.archived_at? ||
+                                                           !Submitters::AuthorizedForForm.call(submitter, current_user,
+                                                                                               request)
 
     ApplicationRecord.transaction do
       submitter.update!(declined_at: Time.current)

app/controllers/submit_form_download_controller.rb

@@ -17,7 +17,8 @@ class SubmitFormDownloadController < ApplicationController
                                           @submitter.submission.template&.archived_at? ||
                                           AccountConfig.exists?(account_id: @submitter.account_id,
                                                                 key: AccountConfig::ALLOW_TO_PARTIAL_DOWNLOAD_KEY,
-                                                                value: false)
+                                                                value: false) ||
+                                          !Submitters::AuthorizedForForm.call(@submitter, current_user, request)
 
     last_completed_submitter = @submitter.submission.submitters
                                          .where.not(id: @submitter.id)
@@ -32,7 +33,7 @@ class SubmitFormDownloadController < ApplicationController
       end
 
     urls = attachments.map do |attachment|
-      ActiveStorage::Blob.proxy_url(attachment.blob, expires_at: FILES_TTL.from_now.to_i)
+      ActiveStorage::Blob.proxy_path(attachment.blob, expires_at: FILES_TTL.from_now.to_i)
     end
 
     render json: urls

app/controllers/submit_form_draw_signature_controller.rb

@@ -12,7 +12,8 @@ class SubmitFormDrawSignatureController < ApplicationController
 
     return redirect_to submit_form_completed_path(@submitter.slug) if @submitter.completed_at?
 
-    if @submitter.submission.template&.archived_at? || @submitter.submission.archived_at?
+    if @submitter.submission.template&.archived_at? || @submitter.submission.archived_at? ||
+       !Submitters::AuthorizedForForm.call(@submitter, current_user, request)
       return redirect_to submit_form_path(@submitter.slug)
     end
 

app/controllers/submit_form_invite_controller.rb

@@ -19,7 +19,9 @@ class SubmitFormInviteController < ApplicationController
         next unless attrs
         next if attrs[:email].blank?
 
-        submitter.submission.submitters.create!(**attrs, account_id: submitter.account_id)
+        email = Submissions.normalize_email(attrs[:email])
+
+        submitter.submission.submitters.create!(uuid: attrs[:uuid], email:, account_id: submitter.account_id)
 
         SubmissionEvents.create_with_tracking_data(submitter, 'invite_party', request, { uuid: submitter.uuid })
       end
@@ -45,7 +47,8 @@ class SubmitFormInviteController < ApplicationController
       !submitter.completed_at? &&
       !submitter.submission.archived_at? &&
       !submitter.submission.expired? &&
-      !submitter.submission.template&.archived_at?
+      !submitter.submission.template&.archived_at? &&
+      Submitters::AuthorizedForForm.call(submitter, current_user, request)
   end
 
   def filter_invite_submitters(submitter, key = 'invite_by_uuid')

app/controllers/submit_form_values_controller.rb

@@ -7,10 +7,12 @@ class SubmitFormValuesController < ApplicationController
   def index
     submitter = Submitter.find_by!(slug: params[:submit_form_slug])
 
-    return render json: {} if submitter.completed_at? || submitter.declined_at?
+    return render json: {} if submitter.completed_at? ||
-    return render json: {} if submitter.submission.template&.archived_at? ||
+                              submitter.declined_at? ||
+                              submitter.submission.template&.archived_at? ||
                               submitter.submission.archived_at? ||
-                              submitter.submission.expired?
+                              submitter.submission.expired? ||
+                              !Submitters::AuthorizedForForm.call(submitter, current_user, request)
 
     value = submitter.values[params['field_uuid']]
     attachment = submitter.attachments.where(created_at: params[:after]..).find_by(uuid: value) if value.present?

app/controllers/submitters_autocomplete_controller.rb

@@ -7,25 +7,34 @@ class SubmittersAutocompleteController < ApplicationController
   LIMIT = 100
 
   def index
-    submitters = search_submitters(@submitters)
+    field = SELECT_COLUMNS.find { |c| c == params[:field] }
+
+    submitters = search_submitters(@submitters, field)
 
     arel_columns = SELECT_COLUMNS.map { |col| Submitter.arel_table[col] }
-    values = submitters.limit(LIMIT).group(arel_columns).pluck(arel_columns)
+
+    values =
+      if field
+        max_ids = submitters.group(field).limit(LIMIT).select(Submitter.arel_table[:id].maximum)
+
+        submitters.where(id: max_ids).order(id: :desc).pluck(arel_columns)
+      else
+        submitters.limit(LIMIT).group(arel_columns).pluck(arel_columns)
+      end
 
     attrs = values.map { |row| SELECT_COLUMNS.zip(row).to_h }
-    attrs = attrs.uniq { |e| e[params[:field]] } if params[:field].present?
 
     render json: attrs
   end
 
   private
 
-  def search_submitters(submitters)
+  def search_submitters(submitters, field)
-    if SELECT_COLUMNS.include?(params[:field])
+    if field
       if Docuseal.fulltext_search?
-        Submitters.fulltext_search_field(current_user, submitters, params[:q], params[:field])
+        Submitters.fulltext_search_field(current_user, submitters, params[:q], field)
       else
-        column = Submitter.arel_table[params[:field].to_sym]
+        column = Submitter.arel_table[field.to_sym]
 
         term = "#{params[:q].downcase}%"
 

app/controllers/template_documents_controller.rb

@@ -6,7 +6,7 @@ class TemplateDocumentsController < ApplicationController
   FILES_TTL = 5.minutes
 
   def index
-    render json: @template.schema_documents.map { |d| ActiveStorage::Blob.proxy_url(d.blob, expires_at: FILES_TTL.from_now.to_i) }
+    render json: @template.schema_documents.map { |d| ActiveStorage::Blob.proxy_path(d.blob, expires_at: FILES_TTL.from_now.to_i) }
   end
 
   def create

app/controllers/templates_clone_controller.rb

@@ -21,7 +21,7 @@ class TemplatesCloneController < ApplicationController
 
     authorize!(:create, @template)
 
-    if params[:account_id].present? && true_ability.authorize!(:manage, Account.find(params[:account_id]))
+    if params[:account_id].present? && true_ability.can?(:manage, Account.find(params[:account_id]))
       @template.account_id = params[:account_id]
       @template.author = true_user if true_user.account_id == @template.account_id
       @template.folder = @template.account.default_template_folder if @template.account_id != current_account.id

app/controllers/templates_controller.rb

@@ -97,7 +97,8 @@ class TemplatesController < ApplicationController
       :name,
       { schema: [[:attachment_uuid, :google_drive_file_id, :name,
                   { conditions: [%i[field_uuid value action operation]] }]],
-        submitters: [%i[name uuid is_requester linked_to_uuid invite_by_uuid optional_invite_by_uuid email order]],
+        submitters: [%i[name uuid is_requester linked_to_uuid invite_via_field_uuid
+                        invite_by_uuid optional_invite_by_uuid email order]],
         fields: [[:uuid, :submitter_uuid, :name, :type,
                   :required, :readonly, :default_value,
                   :title, :description, :prefillable,

app/controllers/templates_recipients_controller.rb

@@ -22,7 +22,7 @@ class TemplatesRecipientsController < ApplicationController
 
   def submitters_params
     permit_params = { submitters: [%i[name uuid is_requester optional_invite_by_uuid
-                                      invite_by_uuid linked_to_uuid email option order]] }
+                                      invite_by_uuid invite_via_field_uuid linked_to_uuid email option order]] }
 
     params.require(:template).permit(permit_params).fetch(:submitters, {}).values.filter_map do |s|
       next if s[:uuid].blank?
@@ -36,6 +36,7 @@ class TemplatesRecipientsController < ApplicationController
       s[:order] = s[:order].to_i if s[:order].present?
       s.delete(:invite_by_uuid) if s[:invite_by_uuid].blank?
       s.delete(:optional_invite_by_uuid) if s[:optional_invite_by_uuid].blank?
+      s.delete(:invite_via_field_uuid) if s[:invite_via_field_uuid].blank?
 
       normalize_option_value(s)
     end
@@ -53,6 +54,7 @@ class TemplatesRecipientsController < ApplicationController
         attrs.delete(:email)
         attrs.delete(:linked_to_uuid)
         attrs.delete(:invite_by_uuid)
+        attrs.delete(:invite_via_field_uuid)
         attrs.delete(:optional_invite_by_uuid)
       when /\Alinked_to_(.*)\z/
         attrs[:linked_to_uuid] = ::Regexp.last_match(-1)

app/controllers/templates_uploads_controller.rb

@@ -56,7 +56,7 @@ class TemplatesUploadsController < ApplicationController
   def create_file_params_from_url
     tempfile = Tempfile.new
     tempfile.binmode
-    tempfile.write(DownloadUtils.call(params[:url]).body)
+    tempfile.write(DownloadUtils.call(params[:url], validate: true).body)
     tempfile.rewind
 
     filename = URI.decode_www_form_component(params[:filename]) if params[:filename].present?

app/javascript/application.js

@@ -40,6 +40,7 @@ import DashboardDropzone from './elements/dashboard_dropzone'
 import RequiredCheckboxGroup from './elements/required_checkbox_group'
 import PageContainer from './elements/page_container'
 import EmailEditor from './elements/email_editor'
+import MarkdownEditor from './elements/markdown_editor'
 import MountOnClick from './elements/mount_on_click'
 import RemoveOnEvent from './elements/remove_on_event'
 import ScrollTo from './elements/scroll_to'
@@ -131,6 +132,7 @@ safeRegisterElement('check-on-click', CheckOnClick)
 safeRegisterElement('required-checkbox-group', RequiredCheckboxGroup)
 safeRegisterElement('page-container', PageContainer)
 safeRegisterElement('email-editor', EmailEditor)
+safeRegisterElement('markdown-editor', MarkdownEditor)
 safeRegisterElement('mount-on-click', MountOnClick)
 safeRegisterElement('remove-on-event', RemoveOnEvent)
 safeRegisterElement('scroll-to', ScrollTo)
@@ -153,12 +155,15 @@ safeRegisterElement('template-builder', class extends HTMLElement {
 
     this.appElem.classList.add('md:h-screen')
 
+    const template = reactive(JSON.parse(this.dataset.template))
+
     this.app = createApp(TemplateBuilder, {
-      template: reactive(JSON.parse(this.dataset.template)),
+      template,
       customFields: reactive(JSON.parse(this.dataset.customFields || '[]')),
       backgroundColor: '#faf7f5',
       locale: this.dataset.locale,
       withPhone: this.dataset.withPhone === 'true',
+      withPrefillable: template.fields?.some((f) => f.prefillable),
       withVerification: ['true', 'false'].includes(this.dataset.withVerification) ? this.dataset.withVerification === 'true' : null,
       withKba: ['true', 'false'].includes(this.dataset.withKba) ? this.dataset.withKba === 'true' : null,
       withLogo: this.dataset.withLogo !== 'false',

app/javascript/application.scss

@@ -155,3 +155,7 @@ button[disabled] .enabled, button.btn-disabled .enabled {
 .font-courier {
   font-family: "Courier New", Consolas, "Liberation Mono", monospace, ui-monospace, SFMono-Regular, Menlo, Monaco;
 }
+
+markdown-editor [contenteditable] p {
+  margin-bottom: 18px;
+}

app/javascript/draw.js

@@ -89,7 +89,7 @@ window.customElements.define('draw-signature', class extends HTMLElement {
   }
 
   redrawCanvas (oldWidth, oldHeight) {
-    if (this.pad && !this.pad.isEmpty()) {
+    if (this.pad && !this.pad.isEmpty() && oldWidth > 0 && oldHeight > 0) {
       const sx = this.canvas.width / oldWidth
       const sy = this.canvas.height / oldHeight
 

app/javascript/elements/field_condition.js

@@ -64,6 +64,22 @@ export default class extends HTMLElement {
     if (action === 'empty' || action === 'unchecked') return this.isEmpty(actual)
     if (action === 'not_empty' || action === 'checked') return !this.isEmpty(actual)
 
+    if (['equal', 'not_equal', 'greater_than', 'less_than'].includes(action) && this.sourceEl?.getAttribute('type') === 'number') {
+      if (this.isEmpty(actual) || this.isEmpty(expected)) return false
+
+      const actualNumber = parseFloat(actual)
+      const expectedNumber = parseFloat(expected)
+
+      if (Number.isNaN(actualNumber) || Number.isNaN(expectedNumber)) return false
+
+      if (action === 'equal') return Math.abs(actualNumber - expectedNumber) < Number.EPSILON
+      if (action === 'not_equal') return Math.abs(actualNumber - expectedNumber) > Number.EPSILON
+      if (action === 'greater_than') return actualNumber > expectedNumber
+      if (action === 'less_than') return actualNumber < expectedNumber
+
+      return false
+    }
+
     if (action === 'equal') {
       const list = Array.isArray(actual) ? actual : [actual]
       return list.filter((v) => v !== null && v !== undefined).map(String).includes(String(expected))

app/javascript/elements/markdown_editor.js

@@ -0,0 +1,382 @@
+import { target, targetable } from '@github/catalyst/lib/targetable'
+import { actionable } from '@github/catalyst/lib/actionable'
+
+function loadTiptap () {
+  return Promise.all([
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/core'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-bold'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-italic'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-paragraph'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-text'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-hard-break'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-document'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-link'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-underline'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extensions'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/markdown'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/pm/state'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/pm/view')
+  ]).then(([core, bold, italic, paragraph, text, hardBreak, document, link, underline, extensions, markdown, pmState, pmView]) => ({
+    Editor: core.Editor,
+    Extension: core.Extension,
+    Bold: bold.default || bold,
+    Italic: italic.default || italic,
+    Paragraph: paragraph.default || paragraph,
+    Text: text.default || text,
+    HardBreak: hardBreak.default || hardBreak,
+    Document: document.default || document,
+    Link: link.default || link,
+    Underline: underline.default || underline,
+    UndoRedo: extensions.UndoRedo,
+    Markdown: markdown.Markdown,
+    Plugin: pmState.Plugin,
+    Decoration: pmView.Decoration,
+    DecorationSet: pmView.DecorationSet
+  }))
+}
+
+class LinkTooltip {
+  constructor (container, editor, templateEl) {
+    this.container = container
+    this.editor = editor
+
+    this.tooltip = templateEl.content.firstElementChild.cloneNode(true)
+
+    this.input = this.tooltip.querySelector('input')
+    this.saveButton = this.tooltip.querySelector('[data-role="link-save"]')
+    this.removeButton = this.tooltip.querySelector('[data-role="link-remove"]')
+
+    container.style.position = 'relative'
+    container.appendChild(this.tooltip)
+  }
+
+  isVisible () {
+    return !this.tooltip.classList.contains('hidden')
+  }
+
+  normalizeUrl (url) {
+    if (!url) return url
+    if (/^{/i.test(url)) return url
+    if (/^https?:\/\//i.test(url)) return url
+    if (/^mailto:/i.test(url)) return url
+
+    return `https://${url}`
+  }
+
+  show (url, pos, { focus = false } = {}) {
+    this.input.value = url || ''
+    this.removeButton.classList.toggle('hidden', !url)
+
+    this.tooltip.classList.remove('hidden')
+
+    const coords = this.editor.view.coordsAtPos(pos)
+    const containerRect = this.container.getBoundingClientRect()
+
+    this.tooltip.style.left = `${coords.left - containerRect.left}px`
+    this.tooltip.style.top = `${coords.bottom - containerRect.top + 4}px`
+
+    if (focus) this.input.focus()
+
+    this.saveHandler = () => {
+      const inputUrl = this.input.value.trim()
+
+      if (inputUrl) {
+        this.editor.chain().focus().extendMarkRange('link').setLink({ href: this.normalizeUrl(inputUrl) }).run()
+      }
+
+      this.hide()
+    }
+
+    this.removeHandler = () => {
+      this.editor.chain().focus().extendMarkRange('link').unsetLink().run()
+
+      this.hide()
+    }
+
+    this.keyHandler = (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault()
+        this.saveHandler()
+      } else if (e.key === 'Escape') {
+        e.preventDefault()
+        this.hide()
+      }
+    }
+
+    this.saveButton.addEventListener('click', this.saveHandler, { once: true })
+    this.removeButton.addEventListener('click', this.removeHandler, { once: true })
+    this.input.addEventListener('keydown', this.keyHandler)
+  }
+
+  hide () {
+    if (this.saveHandler) {
+      this.saveButton.removeEventListener('click', this.saveHandler)
+      this.saveHandler = null
+    }
+
+    if (this.removeHandler) {
+      this.removeButton.removeEventListener('click', this.removeHandler)
+      this.removeHandler = null
+    }
+
+    if (this.keyHandler) {
+      this.input.removeEventListener('keydown', this.keyHandler)
+      this.keyHandler = null
+    }
+
+    this.tooltip.classList.add('hidden')
+    this.currentMark = null
+  }
+}
+
+export default actionable(targetable(class extends HTMLElement {
+  static [target.static] = [
+    'textarea',
+    'editorElement',
+    'boldButton',
+    'italicButton',
+    'underlineButton',
+    'linkButton',
+    'linkTooltipTemplate'
+  ]
+
+  async connectedCallback () {
+    if (!this.textarea || !this.editorElement) return
+
+    this.textarea.style.display = 'none'
+    this.adjustShortcutsForPlatform()
+
+    const { Editor, Extension, Bold, Italic, Paragraph, Text, HardBreak, UndoRedo, Document, Link, Underline, Markdown, Plugin, Decoration, DecorationSet } = await loadTiptap()
+
+    const buildDecorations = (doc) => {
+      const decorations = []
+      const regex = /\{\{?[a-zA-Z0-9_.-]+\}\}?/g
+
+      doc.descendants((node, pos) => {
+        if (!node.isText) return
+
+        let match
+
+        while ((match = regex.exec(node.text)) !== null) {
+          decorations.push(
+            Decoration.inline(pos + match.index, pos + match.index + match[0].length, {
+              class: 'bg-amber-100 py-0.5 px-1 rounded'
+            })
+          )
+        }
+      })
+
+      return DecorationSet.create(doc, decorations)
+    }
+
+    const VariableHighlight = Extension.create({
+      name: 'variableHighlight',
+      addProseMirrorPlugins () {
+        return [new Plugin({
+          state: {
+            init (_, { doc }) {
+              return buildDecorations(doc)
+            },
+            apply (tr, oldSet) {
+              return tr.docChanged ? buildDecorations(tr.doc) : oldSet
+            }
+          },
+          props: {
+            decorations (state) {
+              return this.getState(state)
+            }
+          }
+        })]
+      }
+    })
+
+    this.editor = new Editor({
+      element: this.editorElement,
+      extensions: [
+        Markdown,
+        Document,
+        Paragraph,
+        Text,
+        Bold,
+        Italic,
+        HardBreak.extend({
+          addKeyboardShortcuts () {
+            return {
+              Enter: () => this.editor.commands.setHardBreak()
+            }
+          }
+        }),
+        UndoRedo,
+        Link.extend({
+          inclusive: true,
+          addKeyboardShortcuts: () => ({
+            'Mod-k': () => {
+              this.toggleLink()
+
+              return true
+            }
+          })
+        }).configure({
+          openOnClick: false,
+          HTMLAttributes: {
+            class: 'link',
+            'data-turbo': 'false',
+            style: 'color: #2563eb; text-decoration: underline; cursor: text;'
+          }
+        }),
+        Underline,
+        VariableHighlight
+      ],
+      content: (this.textarea.value || '').trim().replace(/ *\n/g, '<br>'),
+      contentType: 'markdown',
+      editorProps: {
+        attributes: {
+          style: 'min-height: 220px',
+          dir: 'auto',
+          class: 'p-3 outline-none focus:outline-none'
+        }
+      },
+      onUpdate: ({ editor }) => {
+        this.textarea.value = editor.getMarkdown()
+        this.textarea.dispatchEvent(new Event('input', { bubbles: true }))
+      },
+      onSelectionUpdate: ({ editor }) => {
+        this.updateToolbarState()
+        this.handleLinkTooltip(editor)
+      },
+      onBlur: () => {
+        setTimeout(() => {
+          if (!this.linkTooltip.tooltip.contains(document.activeElement)) {
+            this.linkTooltip.hide()
+          }
+        }, 0)
+      }
+    })
+
+    this.linkTooltip = new LinkTooltip(this, this.editor, this.linkTooltipTemplate)
+  }
+
+  adjustShortcutsForPlatform () {
+    if ((navigator.userAgentData?.platform || navigator.platform)?.toLowerCase()?.includes('mac')) {
+      this.querySelectorAll('.tooltip[data-tip]').forEach(tooltip => {
+        const tip = tooltip.getAttribute('data-tip')
+
+        if (tip && tip.includes('Ctrl')) {
+          tooltip.setAttribute('data-tip', tip.replace(/Ctrl/g, '⌘'))
+        }
+      })
+    }
+  }
+
+  bold (e) {
+    e.preventDefault()
+
+    this.editor.chain().focus().toggleBold().run()
+    this.updateToolbarState()
+  }
+
+  italic (e) {
+    e.preventDefault()
+
+    this.editor.chain().focus().toggleItalic().run()
+    this.updateToolbarState()
+  }
+
+  underline (e) {
+    e.preventDefault()
+
+    this.editor.chain().focus().toggleUnderline().run()
+    this.updateToolbarState()
+  }
+
+  linkSelection (e) {
+    e.preventDefault()
+
+    this.toggleLink()
+    this.updateToolbarState()
+  }
+
+  undo (e) {
+    e.preventDefault()
+
+    this.editor.chain().focus().undo().run()
+    this.updateToolbarState()
+  }
+
+  redo (e) {
+    e.preventDefault()
+
+    this.editor.chain().focus().redo().run()
+    this.updateToolbarState()
+  }
+
+  updateToolbarState () {
+    this.boldButton.classList.toggle('bg-base-200', this.editor.isActive('bold'))
+    this.italicButton.classList.toggle('bg-base-200', this.editor.isActive('italic'))
+    this.underlineButton.classList.toggle('bg-base-200', this.editor.isActive('underline'))
+    this.linkButton.classList.toggle('bg-base-200', this.editor.isActive('link'))
+  }
+
+  handleLinkTooltip (editor) {
+    const { from } = editor.state.selection
+    const mark = editor.state.doc.resolve(from).marks().find(m => m.type.name === 'link')
+
+    if (!mark) {
+      if (this.linkTooltip.isVisible()) this.linkTooltip.hide()
+
+      return
+    }
+
+    if (this.linkTooltip.isVisible() && this.linkTooltip.currentMark === mark) return
+
+    let linkStart = from
+    const start = editor.state.doc.resolve(from).start()
+
+    for (let i = from - 1; i >= start; i--) {
+      if (editor.state.doc.resolve(i).marks().some(m => m.eq(mark))) {
+        linkStart = i
+      } else {
+        break
+      }
+    }
+
+    this.linkTooltip.hide()
+    this.linkTooltip.show(mark.attrs.href, linkStart > start ? linkStart - 1 : linkStart)
+    this.linkTooltip.currentMark = mark
+  }
+
+  toggleLink () {
+    if (this.editor.isActive('link')) {
+      this.linkTooltip.hide()
+      this.editor.chain().focus().extendMarkRange('link').unsetLink().run()
+      this.updateToolbarState()
+    } else {
+      const { from } = this.editor.state.selection
+
+      this.linkTooltip.hide()
+      this.linkTooltip.show(this.editor.getAttributes('link').href, from, { focus: true })
+    }
+  }
+
+  insertVariable (e) {
+    const variable = e.target.closest('[data-variable]')?.dataset.variable
+
+    if (variable) {
+      const { from, to } = this.editor.state.selection
+
+      if (variable.includes('link') && from !== to) {
+        this.editor.chain().focus().setLink({ href: `{${variable}}` }).run()
+      } else {
+        this.editor.chain().focus().insertContent(`{${variable}}`).run()
+      }
+    }
+  }
+
+  disconnectedCallback () {
+    this.linkTooltip.hide()
+
+    if (this.editor) {
+      this.editor.destroy()
+    }
+  }
+}))

app/javascript/elements/signature_form.js

@@ -80,7 +80,7 @@ export default targetable(class extends HTMLElement {
   }
 
   redrawCanvas (oldWidth, oldHeight) {
-    if (this.pad && !this.pad.isEmpty()) {
+    if (this.pad && !this.pad.isEmpty() && oldWidth > 0 && oldHeight > 0) {
       const sx = this.canvas.width / oldWidth
       const sy = this.canvas.height / oldHeight
 

app/javascript/elements/toggle_attribute.js

@@ -1,12 +1,18 @@
 export default class extends HTMLElement {
   connectedCallback () {
     this.input.addEventListener('change', (event) => {
+      if (!this.target) return
+
+      const value = event.target.type === 'checkbox' ? event.target.checked : event.target.value
+      const dataValue = this.dataset.value === 'false' ? false : this.dataset.value || true
+
       if (this.dataset.attribute) {
-        this.target[this.dataset.attribute] = event.target.checked
+        this.target[this.dataset.attribute] = value === dataValue
       }
 
       if (this.dataset.className) {
-        this.target.classList.toggle(this.dataset.className, event.target.value !== this.dataset.value)
+        this.target.classList.toggle(this.dataset.className, value !== dataValue)
+
         if (this.dataset.className === 'hidden' && this.target.tagName === 'INPUT') {
           this.target.disabled = event.target.value !== this.dataset.value
         }

app/javascript/elements/toggle_classes.js

@@ -1,10 +1,18 @@
 export default class extends HTMLElement {
   connectedCallback () {
-    const button = this.querySelector('a, button')
+    const button = this.querySelector('a, button, label')
+
+    const target = this.dataset.targetId ? document.getElementById(this.dataset.targetId) : button
 
     button.addEventListener('click', () => {
       this.dataset.classes.split(' ').forEach((cls) => {
-        button.classList.toggle(cls)
+        if (this.dataset.action === 'remove') {
+          target.classList.remove(cls)
+        } else if (this.dataset.action === 'add') {
+          target.classList.add(cls)
+        } else {
+          target.classList.toggle(cls)
+        }
       })
     })
   }

app/javascript/elements/toggle_cookies.js

@@ -12,6 +12,6 @@ export default class extends HTMLElement {
   }
 
   get button () {
-    return this.querySelector('button')
+    return this.querySelector('button, label')
   }
 }

app/javascript/submission_form/area.vue

@@ -182,8 +182,8 @@
     </div>
     <div
       v-else-if="field.type === 'cells'"
-      class="w-full flex items-center"
+      class="w-full flex"
-      :class="{ 'justify-end': field.preferences?.align === 'right', ...fontClasses }"
+      :class="{ 'justify-end': field.preferences?.align === 'right', ...alignClasses, ...fontClasses }"
     >
       <div
         v-for="(char, index) in modelValue"

app/javascript/submission_form/completed.vue

@@ -161,6 +161,11 @@ export default {
       required: false,
       default: false
     },
+    fetchOptions: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
     completedButton: {
       type: Object,
       required: false,
@@ -214,7 +219,10 @@ export default {
     download () {
       this.isDownloading = true
 
-      fetch(this.baseUrl + `/submitters/${this.submitterSlug}/download`).then(async (response) => {
+      fetch(this.baseUrl + `/submitters/${this.submitterSlug}/download`, {
+        method: 'GET',
+        ...this.fetchOptions
+      }).then(async (response) => {
         if (response.ok) {
           const urls = await response.json()
           const isMobileSafariIos = 'ontouchstart' in window && navigator.maxTouchPoints > 0 && /AppleWebKit/i.test(navigator.userAgent)

app/javascript/submission_form/date_step.vue

@@ -42,7 +42,7 @@
       <MarkdownContent :string="field.description" />
     </div>
     <AppearsOn :field="field" />
-    <div class="text-center">
+    <div class="text-center flex">
       <input
         :id="field.uuid"
         ref="input"

app/javascript/submission_form/form.vue

@@ -395,7 +395,9 @@
             v-model="values[currentField.uuid]"
             :reason="values[currentField.preferences?.reason_field_uuid]"
             :field="currentField"
+            :values="values"
             :previous-value="previousSignatureValueFor(currentField) || previousSignatureValue"
+            :touch-attachment-uuid="previousSignatureValue"
             :with-typed-signature="withTypedSignature"
             :remember-signature="rememberSignature"
             :attachments-index="attachmentsIndex"
@@ -407,6 +409,7 @@
             :submitter="submitter"
             :show-field-names="showFieldNames"
             @update:reason="values[currentField.preferences?.reason_field_uuid] = $event"
+            @touch-attachment="attachmentsIndex[previousSignatureValue] ? attachmentsIndex[previousSignatureValue].created_at = new Date() : null"
             @attached="attachments.push($event)"
             @start="scrollIntoField(currentField)"
             @minimize="minimizeForm"
@@ -418,6 +421,7 @@
             v-model="values[currentField.uuid]"
             :field="currentField"
             :dry-run="dryRun"
+            :submitter="submitter"
             :previous-value="previousInitialsValue"
             :attachments-index="attachmentsIndex"
             :show-field-names="showFieldNames"
@@ -526,6 +530,7 @@
         v-else-if="isInvite"
         :submitters="inviteSubmitters"
         :optional-submitters="optionalInviteSubmitters"
+        :fetch-options="fetchOptions"
         :submitter-slug="submitterSlug"
         :authenticity-token="authenticityToken"
         :url="baseUrl + submitPath + '/invite'"
@@ -539,6 +544,7 @@
         :has-signature-fields="stepFields.some((fields) => fields.some((f) => ['signature', 'initials'].includes(f.type)))"
         :has-multiple-documents="hasMultipleDocuments"
         :completed-button="completedRedirectUrl ? {} : completedButton"
+        :fetch-options="fetchOptions"
         :completed-message="completedRedirectUrl ? {} : completedMessage"
         :with-send-copy-button="withSendCopyButton && !completedRedirectUrl"
         :with-download-button="withDownloadButton && !completedRedirectUrl && !dryRun"
@@ -551,14 +557,18 @@
         class="flex justify-center mt-3 sm:mt-4 mb-0 sm:mb-1 select-none"
       >
         <div class="flex items-center flex-wrap steps-progress">
-          <a
+          <template
             v-for="(step, index) in stepFields"
             :key="step[0].uuid"
+          >
+            <a
+              v-if="!onlyRequiredFields || step.some((f) => f.required)"
               href="#"
               class="inline border border-base-300 h-3 w-3 rounded-full mx-1 mt-1"
               :class="{ 'bg-base-300 steps-progress-current': 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(index, true)]"
             />
+          </template>
         </div>
       </div>
       <div
@@ -670,6 +680,11 @@ export default {
       required: false,
       default: () => []
     },
+    fetchOptions: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
     optionalInviteSubmitters: {
       type: Array,
       required: false,
@@ -690,6 +705,11 @@ export default {
       required: false,
       default: false
     },
+    onlyRequiredFields: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     requireSigningReason: {
       type: Boolean,
       required: false,
@@ -926,10 +946,12 @@ export default {
       }, {})
     },
     attachmentConditionsIndex () {
+      const cache = {}
+
       return this.schema.reduce((acc, item) => {
         if (item.conditions?.length) {
           if (item.conditions.every((c) => this.fieldsUuidIndex[c.field_uuid])) {
-            acc[item.attachment_uuid] = this.checkFieldConditions(item)
+            acc[item.attachment_uuid] = this.checkFieldConditions(item, cache)
           } else {
             acc[item.attachment_uuid] = true
           }
@@ -950,7 +972,13 @@ export default {
     submitButtonText () {
       if (this.alwaysMinimize) {
         return this.t('submit')
-      } else if (this.stepFields.length === this.currentStep + 1) {
+      } else if (!this.onlyRequiredFields && this.stepFields.length === this.currentStep + 1) {
+        if (this.currentField.type === 'signature') {
+          return this.t('sign_and_complete')
+        } else {
+          return this.t('complete')
+        }
+      } else if (this.onlyRequiredFields && !this.findNextStep(this.currentStep)) {
         if (this.currentField.type === 'signature') {
           return this.t('sign_and_complete')
         } else {
@@ -996,7 +1024,9 @@ export default {
     },
     previousInitialsValue () {
       if (this.reuseSignature !== false) {
-        const initialsField = [...this.fields].reverse().find((field) => field.type === 'initials' && !!this.values[field.uuid])
+        const initialsField = this.fields.findLast
+          ? this.fields.findLast((field) => field.type === 'initials' && !!this.values[field.uuid])
+          : [...this.fields].reverse().find((field) => field.type === 'initials' && !!this.values[field.uuid])
 
         return this.values[initialsField?.uuid]
       } else {
@@ -1023,7 +1053,9 @@ export default {
       return this.readonlyFields.filter((f) => f.conditions?.length)
     },
     readonlyFields () {
-      return this.fields.filter((f) => f.readonly && this.checkFieldConditions(f) && this.checkFieldDocumentsConditions(f))
+      const cache = {}
+
+      return this.fields.filter((f) => f.readonly && this.checkFieldConditions(f, cache) && this.checkFieldDocumentsConditions(f))
     },
     stepFields () {
       const verificationFields = []
@@ -1078,10 +1110,12 @@ export default {
         sortedFields.push(verificationFields.pop())
       }
 
+      const cache = {}
+
       return sortedFields.reduce((acc, f) => {
         const prevStep = acc[acc.length - 1]
 
-        if (this.checkFieldConditions(f) && this.checkFieldDocumentsConditions(f)) {
+        if (this.checkFieldConditions(f, cache) && this.checkFieldDocumentsConditions(f)) {
           if (f.type === 'checkbox' && Array.isArray(prevStep) && prevStep[0].type === 'checkbox' && !f.description) {
             prevStep.push(f)
           } else {
@@ -1093,7 +1127,9 @@ export default {
       }, [])
     },
     formulaFields () {
-      return this.fields.filter((f) => f.preferences?.formula && f.type !== 'payment' && this.checkFieldConditions(f) && this.checkFieldDocumentsConditions(f))
+      const cache = {}
+
+      return this.fields.filter((f) => f.preferences?.formula && f.type !== 'payment' && this.checkFieldConditions(f, cache) && this.checkFieldDocumentsConditions(f))
     },
     attachmentsIndex () {
       return this.attachments.reduce((acc, a) => {
@@ -1155,15 +1191,17 @@ export default {
       this.currentStep = Math.max(stepIndex, 0)
     } else if (this.goToLast) {
       const requiredEmptyStepIndex = this.stepFields.indexOf(this.stepFields.find((fields) => fields.some((f) => f.required && !this.submittedValues[f.uuid])))
-      const lastFilledStepIndex = this.stepFields.indexOf([...this.stepFields].reverse().find((fields) => fields.some((f) => !!this.submittedValues[f.uuid]))) + 1
+      const lastFilledStepIndex = this.stepFields.indexOf(this.stepFields.findLast
+        ? this.stepFields.findLast((fields) => fields.some((f) => !!this.submittedValues[f.uuid]))
+        : [...this.stepFields].reverse().find((fields) => fields.some((f) => !!this.submittedValues[f.uuid]))) + 1
 
       const indexesList = [this.stepFields.length - 1]
 
-      if (requiredEmptyStepIndex !== -1) {
+      if (requiredEmptyStepIndex !== -1 && (!this.onlyRequiredFields || this.stepFields[requiredEmptyStepIndex].some((f) => f.required))) {
         indexesList.push(requiredEmptyStepIndex)
       }
 
-      if (lastFilledStepIndex !== -1) {
+      if (lastFilledStepIndex !== -1 && (!this.onlyRequiredFields || this.stepFields[lastFilledStepIndex].some((f) => f.required))) {
         indexesList.push(lastFilledStepIndex)
       }
 
@@ -1223,27 +1261,35 @@ export default {
         return true
       }
     },
-    checkFieldConditions (field) {
+    checkFieldConditions (field, cache = {}) {
+      const cacheKey = field.uuid || field.attachment_uuid
+
+      if (cache[cacheKey] !== undefined) {
+        return cache[cacheKey]
+      }
+
       if (field.conditions?.length) {
         const result = field.conditions.reduce((acc, cond) => {
           if (cond.operation === 'or') {
-            acc.push(acc.pop() || this.checkFieldCondition(cond))
+            acc.push(acc.pop() || this.checkFieldCondition(cond, cache))
           } else {
-            acc.push(this.checkFieldCondition(cond))
+            acc.push(this.checkFieldCondition(cond, cache))
           }
 
           return acc
         }, [])
 
-        return !result.includes(false)
+        cache[cacheKey] = !result.includes(false)
       } else {
-        return true
+        cache[cacheKey] = true
       }
+
+      return cache[cacheKey]
     },
-    checkFieldCondition (condition) {
+    checkFieldCondition (condition, cache = {}) {
       const field = this.fieldsUuidIndex[condition.field_uuid]
 
-      if (['not_empty', 'checked', 'equal', 'contains'].includes(condition.action) && field && !this.checkFieldConditions(field)) {
+      if (['not_empty', 'checked', 'equal', 'contains', 'greater_than', 'less_than'].includes(condition.action) && field && !this.checkFieldConditions(field, cache)) {
         return false
       }
 
@@ -1253,6 +1299,22 @@ export default {
         return isEmpty(this.values[condition.field_uuid] ?? defaultValue)
       } else if (['not_empty', 'checked'].includes(condition.action)) {
         return !isEmpty(this.values[condition.field_uuid] ?? defaultValue)
+      } else if (field?.type === 'number' && ['equal', 'not_equal', 'greater_than', 'less_than'].includes(condition.action)) {
+        const value = this.values[condition.field_uuid] ?? defaultValue
+
+        if (isEmpty(value) || isEmpty(condition.value)) return false
+
+        const actual = parseFloat(value)
+        const expected = parseFloat(condition.value)
+
+        if (Number.isNaN(actual) || Number.isNaN(expected)) return false
+
+        if (condition.action === 'equal') return Math.abs(actual - expected) < Number.EPSILON
+        if (condition.action === 'not_equal') return Math.abs(actual - expected) > Number.EPSILON
+        if (condition.action === 'greater_than') return actual > expected
+        if (condition.action === 'less_than') return actual < expected
+
+        return false
       } else if (['equal', 'contains'].includes(condition.action) && field) {
         if (field.options) {
           const option = field.options.find((o) => o.uuid === condition.value)
@@ -1292,6 +1354,13 @@ export default {
         return `${this.t('option')} ${index + 1}`
       }
     },
+    findNextStep (currentStepIndex) {
+      if (this.onlyRequiredFields) {
+        return this.stepFields.find((step, index) => index > currentStepIndex && step.some((f) => f.required))
+      } else {
+        return this.stepFields[currentStepIndex + 1]
+      }
+    },
     maybeTrackEmailClick () {
       const { queryParams } = this
 
@@ -1353,9 +1422,9 @@ export default {
     },
     previousSignatureValueFor (field) {
       if (this.reuseSignature !== false) {
-        const signatureField = [...this.fields].reverse().find((f) =>
+        const signatureField = this.fields.findLast
-          f.type === 'signature' && field.preferences?.format === f.preferences?.format && !!this.values[f.uuid]
+          ? this.fields.findLast((f) => f.type === 'signature' && field.preferences?.format === f.preferences?.format && !!this.values[f.uuid])
-        )
+          : [...this.fields].reverse().find((f) => f.type === 'signature' && field.preferences?.format === f.preferences?.format && !!this.values[f.uuid])
 
         return this.values[signatureField?.uuid]
       } else {
@@ -1405,7 +1474,8 @@ export default {
       } else {
         return fetch(this.baseUrl + this.submitPath, {
           method: 'POST',
-          body: formData || new FormData(this.$refs.form)
+          body: formData || new FormData(this.$refs.form),
+          ...this.fetchOptions
         }).then((response) => {
           if (response.status === 200) {
             currentFieldUuids.forEach((fieldUuid) => {
@@ -1438,7 +1508,7 @@ export default {
         this.isSubmittingComplete = true
       }
 
-      const submitStep = this.currentStep
+      const submitStepIndex = this.currentStep
 
       const stepPromise = ['signature', 'phone', 'initials', 'payment', 'verification', 'kba'].includes(this.currentField.type)
         ? this.$refs.currentStep.submit
@@ -1446,7 +1516,7 @@ export default {
 
       stepPromise().then(async () => {
         const emptyRequiredField = this.stepFields.find((fields, index) => {
-          if (forceComplete ? index === submitStep : index >= submitStep) {
+          if (forceComplete ? index === submitStepIndex : index >= submitStepIndex) {
             return false
           }
 
@@ -1456,7 +1526,7 @@ export default {
         })
 
         const formData = new FormData(this.$refs.form)
-        const isLastStep = (submitStep === this.stepFields.length - 1) || forceComplete
+        const isLastStep = (this.onlyRequiredFields ? !this.findNextStep(submitStepIndex) : (submitStepIndex === this.stepFields.length - 1)) || forceComplete
 
         if (isLastStep && !emptyRequiredField && !this.inviteSubmitters.length && !this.optionalInviteSubmitters.length) {
           formData.append('completed', 'true')
@@ -1500,7 +1570,7 @@ export default {
             return Promise.reject(new Error(data.error))
           }
 
-          const nextStep = (isLastStep && emptyRequiredField) || (forceComplete ? null : this.stepFields[submitStep + 1])
+          const nextStep = (isLastStep && emptyRequiredField) || (forceComplete ? null : this.findNextStep(submitStepIndex))
 
           if (nextStep) {
             if (this.alwaysMinimize) {

app/javascript/submission_form/i18n.js

@@ -1,7 +1,7 @@
 const en = {
   kba: 'KBA',
   please_upload_an_image_file: 'Please upload an image file',
-  must_be_characters_length: 'Must be {number} characters length',
+  must_be_characters_length: 'Must be {number} characters long',
   complete_all_required_fields_to_proceed_with_identity_verification: 'Complete all required fields to proceed with identity verification.',
   verify_id: 'Verify ID',
   identity_verification: 'Identity verification',
@@ -97,6 +97,7 @@ const en = {
   upload: 'Upload',
   files: 'Files',
   signature_is_too_small_or_simple_please_redraw: 'Signature is too small or simple. Please redraw.',
+  browser_privacy_settings_block_canvas: 'Your browser privacy settings restrict use of the drawing canvas. Please use a different browser or device, or disable privacy settings that block canvas in order to sign.',
   wait_countdown_seconds: 'Wait {countdown} seconds'
 }
 
@@ -199,6 +200,7 @@ const es = {
   upload: 'Subir',
   files: 'Archivos',
   signature_is_too_small_or_simple_please_redraw: 'La firma es demasiado pequeña o simple. Por favor, vuelve a dibujarla.',
+  browser_privacy_settings_block_canvas: 'La configuración de privacidad de su navegador restringe el uso del lienzo de dibujo. Utilice un navegador o dispositivo diferente, o desactive la configuración de privacidad que bloquea el lienzo para firmar.',
   wait_countdown_seconds: 'Espera {countdown} segundos'
 }
 
@@ -301,6 +303,7 @@ const it = {
   upload: 'Carica',
   files: 'File',
   signature_is_too_small_or_simple_please_redraw: 'La firma è troppo piccola o semplice. Ridisegnala, per favore.',
+  browser_privacy_settings_block_canvas: 'Le impostazioni sulla privacy del browser limitano l\'uso dell\'area di disegno. Utilizza un browser o dispositivo diverso oppure disattiva le impostazioni sulla privacy che bloccano il canvas per firmare.',
   wait_countdown_seconds: 'Attendi {countdown} secondi'
 }
 
@@ -403,6 +406,7 @@ const de = {
   upload: 'Hochladen',
   files: 'Dateien',
   signature_is_too_small_or_simple_please_redraw: 'Die Unterschrift ist zu klein oder zu einfach. Bitte neu zeichnen.',
+  browser_privacy_settings_block_canvas: 'Die Datenschutzeinstellungen Ihres Browsers schränken die Nutzung der Zeichenfläche ein. Bitte verwenden Sie einen anderen Browser oder ein anderes Gerät oder deaktivieren Sie die Datenschutzeinstellungen, die Canvas blockieren, um zu unterschreiben.',
   wait_countdown_seconds: 'Bitte {countdown} Sekunden warten'
 }
 
@@ -505,6 +509,7 @@ const fr = {
   upload: 'Téléverser',
   files: 'Fichiers',
   signature_is_too_small_or_simple_please_redraw: 'La signature est trop petite ou trop simple. Veuillez la redessiner.',
+  browser_privacy_settings_block_canvas: 'Les paramètres de confidentialité de votre navigateur empêchent l\'utilisation du canevas de dessin. Veuillez utiliser un autre navigateur ou appareil, ou désactiver les paramètres de confidentialité qui bloquent le canevas pour signer.',
   wait_countdown_seconds: 'Veuillez patienter {countdown} secondes'
 }
 
@@ -607,6 +612,7 @@ const pl = {
   upload: 'Przesyłanie',
   files: 'Pliki',
   signature_is_too_small_or_simple_please_redraw: 'Podpis jest zbyt mały lub zbyt prosty. Proszę narysować go ponownie.',
+  browser_privacy_settings_block_canvas: 'Ustawienia prywatności przeglądarki blokują użycie obszaru rysowania. Użyj innej przeglądarki lub urządzenia albo wyłącz ustawienia prywatności blokujące canvas, aby podpisać.',
   wait_countdown_seconds: 'Poczekaj {countdown} sekund'
 }
 
@@ -709,6 +715,7 @@ const uk = {
   upload: 'Завантажити',
   files: 'Файли',
   signature_is_too_small_or_simple_please_redraw: 'Підпис занадто маленький або надто простий. Будь ласка, перемалюйте.',
+  browser_privacy_settings_block_canvas: 'Налаштування конфіденційності вашого браузера блокують використання полотна для малювання. Будь ласка, скористайтеся іншим браузером або пристроєм, або вимкніть налаштування конфіденційності, що блокують canvas, щоб підписати.',
   wait_countdown_seconds: 'Зачекайте {countdown} секунд'
 }
 
@@ -811,6 +818,7 @@ const cs = {
   upload: 'Nahrát',
   files: 'Soubory',
   signature_is_too_small_or_simple_please_redraw: 'Podpis je příliš malý nebo jednoduchý. Nakreslete jej prosím znovu.',
+  browser_privacy_settings_block_canvas: 'Nastavení soukromí vašeho prohlížeče omezuje použití kreslicího plátna. Použijte prosím jiný prohlížeč nebo zařízení, nebo vypněte nastavení soukromí blokující canvas pro podepsání.',
   wait_countdown_seconds: 'Počkejte {countdown} sekund'
 }
 
@@ -913,6 +921,7 @@ const pt = {
   upload: 'Carregar',
   files: 'Arquivos',
   signature_is_too_small_or_simple_please_redraw: 'A assinatura é muito pequena ou simples. Por favor, redesenhe.',
+  browser_privacy_settings_block_canvas: 'As configurações de privacidade do seu navegador restringem o uso da área de desenho. Use um navegador ou dispositivo diferente, ou desative as configurações de privacidade que bloqueiam o canvas para assinar.',
   wait_countdown_seconds: 'Aguarde {countdown} segundos'
 }
 
@@ -1015,6 +1024,7 @@ const he = {
   upload: 'העלאה',
   files: 'קבצים',
   signature_is_too_small_or_simple_please_redraw: 'החתימה קטנה או פשוטה מדי. אנא חתום מחדש.',
+  browser_privacy_settings_block_canvas: 'הגדרות הפרטיות של הדפדפן שלך מגבילות את השימוש באזור הציור. אנא השתמש בדפדפן או מכשיר אחר, או בטל את הגדרות הפרטיות החוסמות canvas כדי לחתום.',
   wait_countdown_seconds: 'המתן {countdown} שניות'
 }
 
@@ -1117,6 +1127,7 @@ const nl = {
   upload: 'Uploaden',
   files: 'Bestanden',
   signature_is_too_small_or_simple_please_redraw: 'De handtekening is te klein of te eenvoudig. Teken opnieuw.',
+  browser_privacy_settings_block_canvas: 'De privacyinstellingen van uw browser beperken het gebruik van het tekenveld. Gebruik een andere browser of ander apparaat, of schakel de privacyinstellingen uit die canvas blokkeren om te ondertekenen.',
   wait_countdown_seconds: 'Wacht {countdown} seconden'
 }
 
@@ -1219,6 +1230,7 @@ const ar = {
   upload: 'تحميل',
   files: 'الملفات',
   signature_is_too_small_or_simple_please_redraw: 'التوقيع صغير جدًا أو بسيط جدًا. يرجى إعادة رسمه.',
+  browser_privacy_settings_block_canvas: 'إعدادات الخصوصية في متصفحك تمنع استخدام لوحة الرسم. يرجى استخدام متصفح أو جهاز مختلف، أو تعطيل إعدادات الخصوصية التي تحظر canvas للتوقيع.',
   wait_countdown_seconds: 'انتظر {countdown} ثانية'
 }
 
@@ -1321,6 +1333,7 @@ const ko = {
   upload: '업로드',
   files: '파일',
   signature_is_too_small_or_simple_please_redraw: '서명이 너무 작거나 단순합니다. 다시 그려주세요.',
+  browser_privacy_settings_block_canvas: '브라우저 개인정보 보호 설정으로 인해 그리기 캔버스를 사용할 수 없습니다. 다른 브라우저나 기기를 사용하거나, 서명을 위해 캔버스를 차단하는 개인정보 보호 설정을 비활성화해 주세요.',
   wait_countdown_seconds: '{countdown}초 기다리세요'
 }
 
@@ -1423,6 +1436,7 @@ const ja = {
   upload: 'アップロード',
   files: 'ファイル',
   signature_is_too_small_or_simple_please_redraw: '署名が小さすぎるか単純すぎます。もう一度描いてください。',
+  browser_privacy_settings_block_canvas: 'ブラウザのプライバシー設定により、描画キャンバスの使用が制限されています。別のブラウザまたはデバイスを使用するか、署名するためにキャンバスをブロックするプライバシー設定を無効にしてください。',
   wait_countdown_seconds: '{countdown} 秒お待ちください'
 }
 

app/javascript/submission_form/initials_step.vue

@@ -150,6 +150,7 @@
 
 <script>
 import { cropCanvasAndExportToPNG } from './crop_canvas'
+import { isCanvasBlocked } from './validate_signature'
 import { IconReload, IconTextSize, IconUpload, IconSignature, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
 import SignaturePad from 'signature_pad'
 import AppearsOn from './appears_on'
@@ -175,6 +176,10 @@ export default {
       type: Object,
       required: true
     },
+    submitter: {
+      type: Object,
+      required: true
+    },
     dryRun: {
       type: Boolean,
       required: false,
@@ -257,6 +262,14 @@ export default {
 
             this.$refs.canvas.getContext('2d').scale(scale, scale)
 
+            if (!this.isDrawInitials) {
+              this.$nextTick(() => {
+                if (this.$refs.textInput) {
+                  this.initTextInitial()
+                }
+              })
+            }
+
             this.intersectionObserver?.disconnect()
           }
         })
@@ -332,12 +345,27 @@ export default {
 
       if (!this.isDrawInitials) {
         this.$nextTick(() => {
+          if (this.$refs.textInput) {
+            if (!this.submitter.name) {
               this.$refs.textInput.focus()
+            }
+
+            this.initTextInitial()
 
             this.$emit('start')
+          }
         })
       }
     },
+    initTextInitial () {
+      if (this.submitter.name) {
+        this.$refs.textInput.value = this.submitter.name.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase() || '').join('')
+      }
+
+      if (this.$refs.textInput.value) {
+        this.updateWrittenInitials({ target: this.$refs.textInput })
+      }
+    },
     async submit () {
       if (this.modelValue || this.computedPreviousValue) {
         if (this.computedPreviousValue) {
@@ -392,7 +420,15 @@ export default {
           }
         }).catch((error) => {
           if (this.field.required === true) {
+            if (isCanvasBlocked()) {
+              alert(this.t('browser_privacy_settings_block_canvas'))
+
+              if (window.Rollbar) {
+                window.Rollbar.info('Canvas blocked')
+              }
+            } else {
               alert(this.t('signature_is_too_small_or_simple_please_redraw'))
+            }
 
             return reject(error)
           } else {

app/javascript/submission_form/invite_form.vue

@@ -78,6 +78,11 @@ export default {
       type: Array,
       required: true
     },
+    fetchOptions: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
     optionalSubmitters: {
       type: Array,
       required: false,
@@ -108,7 +113,8 @@ export default {
 
       return fetch(this.url, {
         method: 'POST',
-        body: new FormData(this.$refs.form)
+        body: new FormData(this.$refs.form),
+        ...this.fetchOptions
       }).then((response) => {
         if (response.status === 200) {
           this.$emit('success')

app/javascript/submission_form/kba_step.vue

@@ -497,10 +497,10 @@ export default {
           body: JSON.stringify(payload)
         })
 
-        if (!resp.ok) throw new Error('Failed to start KBA')
-
         const data = await resp.json()
 
+        if (!resp.ok) throw new Error(data.error || 'Failed to start KBA')
+
         if (data.result && data.result.action === 'FAIL') {
           if (data.result.detail === 'NO MATCH') {
             throw new Error('Unfortunately, we were unable to start Knowledge Based Authentication with the details provided. Please review and confirm that all your personal details are correct.')
@@ -555,7 +555,11 @@ export default {
         const data = await resp.json()
 
         if (data.result?.action !== 'PASS') {
+          if (data.result?.issues?.length) {
+            this.error = `Knowledge Based Authentication Failed - make sure you provide correct details for the Knowledge Based authentication: ${data.result.issues.join(', ')}`
+          } else {
             this.error = 'Knowledge Based Authentication Failed - make sure you provide correct answers for the Knowledge Based authentication.'
+          }
 
           throw new Error('Knowledge Based Authentication Failed')
         }

app/javascript/submission_form/signature_step.vue

@@ -127,6 +127,12 @@
       type="hidden"
       :name="`values[${field.uuid}]`"
     >
+    <input
+      v-if="isTouchAttachment"
+      :value="touchAttachmentUuid"
+      type="hidden"
+      name="touch_attachment_uuid"
+    >
     <img
       v-if="modelValue || computedPreviousValue"
       :src="attachmentsIndex[modelValue || computedPreviousValue].url"
@@ -303,14 +309,14 @@
 <script>
 import { IconReload, IconCamera, IconSignature, IconTextSize, IconArrowsDiagonalMinimize2, IconQrcode, IconX } from '@tabler/icons-vue'
 import { cropCanvasAndExportToPNG } from './crop_canvas'
-import { isValidSignatureCanvas } from './validate_signature'
+import { isValidSignatureCanvas, isCanvasBlocked } from './validate_signature'
 import SignaturePad from 'signature_pad'
 import AppearsOn from './appears_on'
 import FileDropzone from './dropzone'
 import MarkdownContent from './markdown_content'
 import { v4 } from 'uuid'
 
-let isFontLoaded = false
+let fontLoadPromise = null
 
 const scale = 3
 
@@ -334,6 +340,10 @@ export default {
       type: Object,
       required: true
     },
+    values: {
+      type: Object,
+      required: true
+    },
     requireSigningReason: {
       type: Boolean,
       required: false,
@@ -388,6 +398,11 @@ export default {
       required: false,
       default: ''
     },
+    touchAttachmentUuid: {
+      type: String,
+      required: false,
+      default: ''
+    },
     reason: {
       type: String,
       required: false,
@@ -399,13 +414,14 @@ export default {
       default: ''
     }
   },
-  emits: ['attached', 'update:model-value', 'start', 'minimize', 'update:reason'],
+  emits: ['attached', 'update:model-value', 'start', 'minimize', 'update:reason', 'touch-attachment'],
   data () {
     return {
       isSignatureStarted: false,
       isShowQr: false,
       isOtherReason: false,
       isUsePreviousValue: true,
+      isTouchAttachment: false,
       isTextSignature: this.field.preferences?.format === 'typed' || this.field.preferences?.format === 'typed_or_upload',
       uploadImageInputKey: Math.random().toString()
     }
@@ -466,6 +482,14 @@ export default {
           if (entry.isIntersecting) {
             this.setCanvasSize()
 
+            if (this.isTextSignature) {
+              this.$nextTick(() => {
+                if (this.$refs.textInput) {
+                  this.initTypedSignature()
+                }
+              })
+            }
+
             this.intersectionObserver?.disconnect()
           }
         })
@@ -488,6 +512,10 @@ export default {
       })
 
       this.resizeObserver.observe(this.$refs.canvas.parentNode)
+
+      if (this.isTextSignature) {
+        this.loadFont()
+      }
     }
   },
   beforeUnmount () {
@@ -514,7 +542,7 @@ export default {
     redrawCanvas (oldWidth, oldHeight) {
       const canvas = this.$refs.canvas
 
-      if (this.pad && !this.isTextSignature && !this.pad.isEmpty()) {
+      if (this.pad && !this.isTextSignature && !this.pad.isEmpty() && oldWidth > 0 && oldHeight > 0) {
         const sx = canvas.width / oldWidth
         const sy = canvas.height / oldHeight
 
@@ -525,7 +553,7 @@ export default {
 
         this.pad.fromData(scaledData)
       } else if (this.isTextSignature && this.$refs.textInput) {
-        this.updateWrittenSignature({ target: { value: this.$refs.textInput.value } })
+        this.updateWrittenSignature({ target: this.$refs.textInput })
       }
     },
     remove () {
@@ -535,17 +563,17 @@ export default {
       this.isSignatureStarted = false
     },
     loadFont () {
-      if (!isFontLoaded) {
+      if (!fontLoadPromise) {
         const font = new FontFace('Dancing Script', `url(${this.baseUrl}/fonts/DancingScript-Regular.otf) format("opentype")`)
 
-        font.load().then((loadedFont) => {
+        fontLoadPromise = font.load().then((loadedFont) => {
           document.fonts.add(loadedFont)
-
-          isFontLoaded = true
         }).catch((error) => {
           console.error('Font loading failed:', error)
         })
       }
+
+      return fontLoadPromise
     },
     showQr () {
       this.isShowQr = true
@@ -645,14 +673,29 @@ export default {
 
       if (this.isTextSignature) {
         this.$nextTick(() => {
+          if (this.$refs.textInput) {
+            if (!this.submitter.name) {
               this.$refs.textInput.focus()
+            }
 
-          this.loadFont()
+            this.initTypedSignature()
 
             this.$emit('start')
+          }
         })
       }
     },
+    async initTypedSignature () {
+      if (this.submitter.name) {
+        this.$refs.textInput.value = this.submitter.name
+      }
+
+      await this.loadFont()
+
+      if (this.$refs.textInput.value) {
+        this.updateWrittenSignature({ target: this.$refs.textInput })
+      }
+    },
     drawImage (event) {
       this.remove()
       this.clear()
@@ -731,6 +774,13 @@ export default {
     },
     async submit () {
       if (this.modelValue || this.computedPreviousValue) {
+        if (this.touchAttachmentUuid && this.computedPreviousValue === this.touchAttachmentUuid && !Object.values(this.values).includes(this.touchAttachmentUuid)) {
+          this.isTouchAttachment = true
+          this.$emit('touch-attachment', this.touchAttachmentUuid)
+        } else {
+          this.isTouchAttachment = false
+        }
+
         if (this.computedPreviousValue) {
           this.$emit('update:model-value', this.computedPreviousValue)
         }
@@ -740,7 +790,15 @@ export default {
 
       if (this.isSignatureStarted && this.pad.toData().length > 0 && !isValidSignatureCanvas(this.pad.toData())) {
         if (this.field.required === true || this.pad.toData().length > 0) {
+          if (isCanvasBlocked()) {
+            alert(this.t('browser_privacy_settings_block_canvas'))
+
+            if (window.Rollbar) {
+              window.Rollbar.info('Canvas blocked')
+            }
+          } else {
             alert(this.t('signature_is_too_small_or_simple_please_redraw'))
+          }
 
           return Promise.reject(new Error('Image too small or simple'))
         } else {
@@ -796,7 +854,15 @@ export default {
           }
         }).catch((error) => {
           if (this.field.required === true) {
+            if (isCanvasBlocked()) {
+              alert(this.t('browser_privacy_settings_block_canvas'))
+
+              if (window.Rollbar) {
+                window.Rollbar.info('Canvas blocked')
+              }
+            } else {
               alert(this.t('signature_is_too_small_or_simple_please_redraw'))
+            }
 
             return reject(error)
           } else {

app/javascript/submission_form/validate_signature.js

@@ -35,4 +35,24 @@ function isValidSignatureCanvas (data) {
   return validStrokes.length > 0
 }
 
-export { isValidSignatureCanvas }
+function isCanvasBlocked () {
+  try {
+    const testCanvas = document.createElement('canvas')
+
+    testCanvas.width = 2
+    testCanvas.height = 2
+
+    const ctx = testCanvas.getContext('2d')
+
+    ctx.fillStyle = 'rgb(255, 0, 0)'
+    ctx.fillRect(0, 0, 2, 2)
+
+    const pixel = ctx.getImageData(0, 0, 1, 1).data
+
+    return pixel[0] !== 255 || pixel[1] !== 0 || pixel[2] !== 0 || pixel[3] !== 255
+  } catch (e) {
+    return true
+  }
+}
+
+export { isValidSignatureCanvas, isCanvasBlocked }

app/javascript/submission_form/verification_step.vue

@@ -119,6 +119,7 @@ export default {
         docId: this.eidEasyData.doc_id,
         language: this.locale,
         countryCode: this.countryCode,
+        sandbox: ['demo.docuseal.tech'].includes(location.host),
         enabledMethods: {
           signature: this.eidEasyData.available_methods
         },

app/javascript/template_builder/area.vue

@@ -134,6 +134,7 @@
             @focusout="maybeBlurSettings"
           >
             <FieldSettings
+              v-if="isMobile"
               :field="field"
               :default-field="defaultField"
               :editable="editable"
@@ -150,6 +151,12 @@
               @save="save"
               @scroll-to="[selectedAreasRef.value = [$event], $emit('scroll-to', $event)]"
             />
+            <div
+              v-else
+              class="whitespace-normal"
+            >
+              The dots menu is retired in favor of the field context menu. Right-click the field to access field settings. Double-click the field to set a default value.
+            </div>
           </ul>
         </span>
       </div>
@@ -252,7 +259,8 @@
             </span>
             <div
               v-else-if="field.type === 'cells' && field.default_value"
-              class="w-full flex items-center"
+              class="w-full flex"
+              :class="fontClasses"
             >
               <div
                 v-for="(char, index) in field.default_value"
@@ -334,6 +342,7 @@
         :editable="editable && !defaultField"
         :default-field="defaultField"
         :build-default-name="buildDefaultName"
+        @save="save"
         @close="isShowFormulaModal = false"
       />
     </Teleport>
@@ -346,6 +355,7 @@
         :editable="editable && !defaultField"
         :default-field="defaultField"
         :build-default-name="buildDefaultName"
+        @save="save"
         @close="isShowFontModal = false"
       />
     </Teleport>
@@ -357,6 +367,7 @@
         :item="field"
         :build-default-name="buildDefaultName"
         :default-field="defaultField"
+        @save="save"
         @close="isShowConditionsModal = false"
       />
     </Teleport>
@@ -369,6 +380,7 @@
         :editable="editable && !defaultField"
         :default-field="defaultField"
         :build-default-name="buildDefaultName"
+        @save="save"
         @close="isShowDescriptionModal = false"
       />
     </Teleport>
@@ -401,7 +413,7 @@ export default {
     FieldSubmitter,
     IconX
   },
-  inject: ['template', 'save', 't', 'isInlineSize', 'selectedAreasRef', 'isCmdKeyRef'],
+  inject: ['template', 'save', 't', 'isInlineSize', 'selectedAreasRef', 'isCmdKeyRef', 'getFieldTypeIndex'],
   props: {
     area: {
       type: Object,
@@ -467,6 +479,11 @@ export default {
       required: false,
       default: null
     },
+    isMobile: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     isSelectMode: {
       type: Boolean,
       required: false,
@@ -579,7 +596,7 @@ export default {
       return this.$el.getRootNode().querySelector('#docuseal_modal_container')
     },
     defaultName () {
-      return this.buildDefaultName(this.field, this.template.fields)
+      return this.buildDefaultName(this.field)
     },
     fontClasses () {
       if (!this.field.preferences) {

app/javascript/template_builder/builder.vue

@@ -81,7 +81,7 @@
         />
         <template v-else>
           <form
-            v-if="withSignYourselfButton && template.submitters.length < 2"
+            v-if="withSignYourselfButton && undefinedSubmitters.length < 2"
             target="_blank"
             data-turbo="false"
             class="inline"
@@ -374,6 +374,7 @@
                 :draw-field-type="drawFieldType"
                 :draw-custom-field="drawCustomField"
                 :editable="editable"
+                :is-mobile="isMobile"
                 :base-url="baseUrl"
                 :with-fields-detection="withFieldsDetection"
                 @draw="[onDraw($event), withSelectedFieldType ? '' : drawFieldType = '', drawCustomField = null, showDrawField = false]"
@@ -382,9 +383,9 @@
                 @paste-field="pasteField"
                 @copy-field="copyField"
                 @add-custom-field="addCustomField"
+                @set-draw="[drawField = $event.field, drawOption = $event.option]"
                 @copy-selected-areas="copySelectedAreas"
                 @delete-selected-areas="deleteSelectedAreas"
-                @align-selected-areas="alignSelectedAreas"
                 @autodetect-fields="detectFieldsForPage"
               />
               <DocumentControls
@@ -645,7 +646,8 @@ export default {
       fieldsDragFieldRef: computed(() => this.fieldsDragFieldRef),
       customDragFieldRef: computed(() => this.customDragFieldRef),
       isSelectModeRef: computed(() => this.isSelectModeRef),
-      isCmdKeyRef: computed(() => this.isCmdKeyRef)
+      isCmdKeyRef: computed(() => this.isCmdKeyRef),
+      getFieldTypeIndex: this.getFieldTypeIndex
     }
   },
   props: {
@@ -718,6 +720,11 @@ export default {
       required: false,
       default: false
     },
+    withPrefillable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     customFields: {
       type: Array,
       required: false,
@@ -936,12 +943,15 @@ export default {
     language () {
       return this.locale.split('-')[0].toLowerCase()
     },
-    withPrefillable () {
+    undefinedSubmitters () {
-      if (this.template.fields) {
+      return this.template.submitters.filter((submitter) => {
-        return this.template.fields.some((f) => f.prefillable)
+        return !submitter.invite_by_uuid &&
-      } else {
+          !submitter.optional_invite_by_uuid &&
-        return false
+          !submitter.invite_via_field_uuid &&
-      }
+          !submitter.linked_to_uuid &&
+          !submitter.is_requester &&
+          !submitter.email
+      })
     },
     isInlineSize () {
       return CSS.supports('container-type: size')
@@ -989,6 +999,18 @@ export default {
 
       return areas
     },
+    fieldTypeIndexMap () {
+      const map = {}
+      const typeCounters = {}
+
+      this.template.fields.forEach((f) => {
+        typeCounters[f.type] ||= 0
+        map[f.uuid] = typeCounters[f.type]
+        typeCounters[f.type]++
+      })
+
+      return map
+    },
     isAllRequiredFieldsAdded () {
       return !this.defaultRequiredFields?.some((f) => {
         return !this.template.fields?.some((field) => field.name === f.name)
@@ -1085,6 +1107,9 @@ export default {
     addCustomField (field) {
       return this.$refs.fields.addCustomField(field)
     },
+    getFieldTypeIndex (field) {
+      return this.fieldTypeIndexMap[field.uuid]
+    },
     addCustomFieldWithoutDraw () {
       const customField = this.drawCustomField
 
@@ -1160,27 +1185,6 @@ export default {
 
       this.debouncedSave()
     },
-    alignSelectedAreas (direction) {
-      const areas = this.selectedAreasRef.value
-
-      let targetValue
-
-      if (direction === 'left') {
-        targetValue = Math.min(...areas.map(a => a.x))
-        areas.forEach((area) => { area.x = targetValue })
-      } else if (direction === 'right') {
-        targetValue = Math.max(...areas.map(a => a.x + a.w))
-        areas.forEach((area) => { area.x = targetValue - area.w })
-      } else if (direction === 'top') {
-        targetValue = Math.min(...areas.map(a => a.y))
-        areas.forEach((area) => { area.y = targetValue })
-      } else if (direction === 'bottom') {
-        targetValue = Math.max(...areas.map(a => a.y + a.h))
-        areas.forEach((area) => { area.y = targetValue - area.h })
-      }
-
-      this.save()
-    },
     download () {
       this.isDownloading = true
 
@@ -2065,7 +2069,9 @@ export default {
         }
 
         if (type === 'checkbox' && !this.drawFieldType && (this.template.fields[this.template.fields.length - 1]?.type === 'checkbox' || area.w)) {
-          const previousField = [...this.template.fields].reverse().find((f) => f.type === type)
+          const previousField = this.template.fields.findLast
+            ? this.template.fields.findLast((f) => f.type === type)
+            : [...this.template.fields].reverse().find((f) => f.type === type)
           const previousArea = previousField?.areas?.[previousField.areas.length - 1]
 
           if (previousArea || area.w) {
@@ -2329,7 +2335,9 @@ export default {
     assignDropAreaSize (fieldArea, field, area) {
       const fieldType = field.type || 'text'
 
-      const previousField = [...this.template.fields].reverse().find((f) => f.type === fieldType)
+      const previousField = this.template.fields.findLast
+        ? this.template.fields.findLast((f) => f.type === fieldType)
+        : [...this.template.fields].reverse().find((f) => f.type === fieldType)
 
       let baseArea
 

app/javascript/template_builder/conditions_modal.vue

@@ -9,7 +9,7 @@
     <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
       <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
         <span class="modal-title">
-          {{ t('condition') }} - {{ (defaultField ? (defaultField.title || item.title || item.name) : item.name) || buildDefaultName(item, template.fields) }}
+          {{ t('condition') }} - {{ (defaultField ? (defaultField.title || item.title || item.name) : item.name) || buildDefaultName(item) }}
         </span>
         <a
           href="#"
@@ -83,7 +83,7 @@
                   class="text-base-content"
                   :selected="condition.field_uuid === f.uuid"
                 >
-                  {{ f.name || buildDefaultName(f, template.fields) }}
+                  {{ f.name || buildDefaultName(f) }}
                 </option>
               </select>
               <select
@@ -124,6 +124,16 @@
                   {{ option.value || `${t('option')} ${index + 1}` }}
                 </option>
               </select>
+              <input
+                v-else-if="conditionField(condition)?.type === 'number' && ['equal', 'not_equal', 'greater_than', 'less_than'].includes(condition.action)"
+                v-model="condition.value"
+                type="number"
+                step="any"
+                class="input input-bordered input-sm w-full bg-white h-11 pl-4 text-base font-normal"
+                :class="{ 'text-gray-300': !condition.value }"
+                :placeholder="t('type_value')"
+                required
+              >
             </div>
           </div>
           <a
@@ -154,7 +164,7 @@
 <script>
 export default {
   name: 'ConditionModal',
-  inject: ['t', 'save', 'template', 'withConditions'],
+  inject: ['t', 'template', 'withConditions'],
   props: {
     item: {
       type: Object,
@@ -169,18 +179,13 @@ export default {
       type: Function,
       required: true
     },
-    withClickSaveEvent: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     excludeFieldUuids: {
       type: Array,
       required: false,
       default: () => []
     }
   },
-  emits: ['close', 'click-save'],
+  emits: ['close', 'save'],
   data () {
     return {
       conditions: this.item.conditions?.[0] ? JSON.parse(JSON.stringify(this.item.conditions)) : [{}]
@@ -227,6 +232,8 @@ export default {
         actions.push('equal', 'not_equal')
       } else if (['multiple'].includes(field.type)) {
         actions.push('contains', 'does_not_contain')
+      } else if (field.type === 'number') {
+        actions.push('not_empty', 'empty', 'equal', 'not_equal', 'greater_than', 'less_than')
       } else {
         actions.push('not_empty', 'empty')
       }
@@ -244,12 +251,7 @@ export default {
         delete this.item.conditions
       }
 
-      if (this.withClickSaveEvent) {
+      this.$emit('save')
-        this.$emit('click-save')
-      } else {
-        this.save()
-      }
-
       this.$emit('close')
     }
   }

app/javascript/template_builder/contenteditable.vue

@@ -179,8 +179,11 @@ export default {
     },
     onBlur (e) {
       setTimeout(() => {
+        if (this.$refs.contenteditable) {
           this.value = this.$refs.contenteditable.innerText.trim() || this.modelValue
           this.$emit('update:model-value', this.value)
+        }
+
         this.$emit('blur', e)
 
         this.isEditable = false

app/javascript/template_builder/context_menu.vue

@@ -1,546 +0,0 @@
-<template>
-  <div>
-    <div
-      v-if="!isShowFormulaModal && !isShowFontModal && !isShowConditionsModal && !isShowDescriptionModal"
-      ref="menu"
-      class="fixed z-50 p-1 bg-white shadow-lg rounded-lg border border-base-300 min-w-[170px] cursor-default"
-      :style="menuStyle"
-      @mousedown.stop
-      @pointerdown.stop
-    >
-      <label
-        v-if="showRequired"
-        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center space-x-2 text-sm cursor-pointer"
-        @click.stop
-      >
-        <input
-          :checked="isRequired"
-          type="checkbox"
-          class="toggle toggle-xs"
-          @change="handleToggleRequired($event.target.checked)"
-          @click.stop
-        >
-        <span>{{ t('required') }}</span>
-      </label>
-      <label
-        v-if="showReadOnly"
-        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center space-x-2 text-sm cursor-pointer"
-        @click.stop
-      >
-        <input
-          :checked="isReadOnly"
-          type="checkbox"
-          class="toggle toggle-xs"
-          @change="handleToggleReadOnly($event.target.checked)"
-          @click.stop
-        >
-        <span>{{ t('read_only') }}</span>
-      </label>
-      <hr
-        v-if="(showRequired || showReadOnly) && (showFont || showDescription || showCondition || showFormula)"
-        class="my-1 border-base-300"
-      >
-      <button
-        v-if="showFont && !isMultiSelection"
-        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center space-x-2 text-sm"
-        @click.stop="openFontModal"
-      >
-        <IconTypography class="w-4 h-4" />
-        <span>{{ t('font') }}</span>
-      </button>
-      <button
-        v-if="showDescription"
-        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center space-x-2 text-sm"
-        @click.stop="openDescriptionModal"
-      >
-        <IconInfoCircle class="w-4 h-4" />
-        <span>{{ t('description') }}</span>
-      </button>
-      <button
-        v-if="showCondition && !isMultiSelection"
-        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center space-x-2 text-sm"
-        @click.stop="openConditionModal"
-      >
-        <IconRouteAltLeft class="w-4 h-4" />
-        <span>{{ t('condition') }}</span>
-      </button>
-      <button
-        v-if="showFormula"
-        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center space-x-2 text-sm"
-        @click.stop="openFormulaModal"
-      >
-        <IconMathFunction class="w-4 h-4" />
-        <span>{{ t('formula') }}</span>
-      </button>
-      <hr
-        v-if="((showFont && !isMultiSelection) || showDescription || (showCondition && !isMultiSelection) || showFormula) && (showCopy || showDelete || showPaste)"
-        class="my-1 border-base-300"
-      >
-      <button
-        v-if="isMultiSelection"
-        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center space-x-2 text-sm"
-        @click.stop="$emit('align', 'left')"
-      >
-        <IconLayoutAlignLeft class="w-4 h-4" />
-        <span>{{ t('align_left') }}</span>
-      </button>
-      <button
-        v-if="isMultiSelection"
-        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center space-x-2 text-sm"
-        @click.stop="$emit('align', 'right')"
-      >
-        <IconLayoutAlignRight class="w-4 h-4" />
-        <span>{{ t('align_right') }}</span>
-      </button>
-      <button
-        v-if="isMultiSelection"
-        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center space-x-2 text-sm"
-        @click.stop="$emit('align', 'top')"
-      >
-        <IconLayoutAlignTop class="w-4 h-4" />
-        <span>{{ t('align_top') }}</span>
-      </button>
-      <button
-        v-if="isMultiSelection"
-        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center space-x-2 text-sm"
-        @click.stop="$emit('align', 'bottom')"
-      >
-        <IconLayoutAlignBottom class="w-4 h-4" />
-        <span>{{ t('align_bottom') }}</span>
-      </button>
-      <hr
-        v-if="isMultiSelection && (showFont || showCondition)"
-        class="my-1 border-base-300"
-      >
-      <button
-        v-if="showFont && isMultiSelection"
-        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center space-x-2 text-sm"
-        @click.stop="openFontModal"
-      >
-        <IconTypography class="w-4 h-4" />
-        <span>{{ t('font') }}</span>
-      </button>
-      <button
-        v-if="showCondition && isMultiSelection"
-        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center space-x-2 text-sm"
-        @click.stop="openConditionModal"
-      >
-        <IconRouteAltLeft class="w-4 h-4" />
-        <span>{{ t('condition') }}</span>
-      </button>
-      <hr
-        v-if="isMultiSelection"
-        class="my-1 border-base-300"
-      >
-      <button
-        v-if="showCopy"
-        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center justify-between text-sm"
-        @click.stop="$emit('copy')"
-      >
-        <span class="flex items-center space-x-2">
-          <IconCopy class="w-4 h-4" />
-          <span>{{ t('copy') }}</span>
-        </span>
-        <span class="text-xs text-base-content/60 ml-4">{{ isMac ? '⌘C' : 'Ctrl+C' }}</span>
-      </button>
-      <button
-        v-if="showDelete"
-        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center justify-between text-sm text-red-600"
-        @click.stop="$emit('delete')"
-      >
-        <span class="flex items-center space-x-2">
-          <IconTrashX class="w-4 h-4" />
-          <span>{{ t('remove') }}</span>
-        </span>
-        <span class="text-xs text-base-content/60 ml-4">Del</span>
-      </button>
-      <button
-        v-if="showPaste"
-        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center justify-between text-sm"
-        :class="!hasClipboardData ? 'opacity-50 cursor-not-allowed' : 'hover:bg-base-100'"
-        :disabled="!hasClipboardData"
-        @click.stop="!hasClipboardData ? null : $emit('paste')"
-      >
-        <span class="flex items-center space-x-2">
-          <IconClipboard class="w-4 h-4" />
-          <span>{{ t('paste') }}</span>
-        </span>
-        <span class="text-xs text-base-content/60 ml-4">{{ isMac ? '⌘V' : 'Ctrl+V' }}</span>
-      </button>
-      <button
-        v-if="showSelectFields"
-        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center justify-between text-sm"
-        @click.stop="handleToggleSelectMode"
-      >
-        <span class="flex items-center space-x-2">
-          <IconClick
-            v-if="!isSelectModeRef.value"
-            class="w-4 h-4"
-          />
-          <IconNewSection
-            v-else
-            class="w-4 h-4"
-          />
-          <span>{{ isSelectModeRef.value ? t('draw_fields') : t('select_fields') }}</span>
-        </span>
-        <span class="text-xs text-base-content/60 ml-4">Tab</span>
-      </button>
-      <hr
-        v-if="showAutodetectFields"
-        class="my-1 border-base-300"
-      >
-      <button
-        v-if="showAutodetectFields"
-        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center space-x-2 text-sm"
-        @click.stop="$emit('autodetect-fields')"
-      >
-        <IconSparkles class="w-4 h-4" />
-        <span>{{ t('autodetect_fields') }}</span>
-      </button>
-    </div>
-    <Teleport
-      v-if="isShowFormulaModal"
-      :to="modalContainerEl"
-    >
-      <FormulaModal
-        :field="field"
-        :editable="editable"
-        :build-default-name="buildDefaultName"
-        @close="closeModal"
-      />
-    </Teleport>
-    <Teleport
-      v-if="isShowFontModal"
-      :to="modalContainerEl"
-    >
-      <FontModal
-        :field="multiSelectField || field"
-        :area="contextMenu.area"
-        :editable="editable"
-        :build-default-name="buildDefaultName"
-        :with-click-save-event="isMultiSelection"
-        @click-save="handleSaveMultiSelectFontModal"
-        @close="closeModal"
-      />
-    </Teleport>
-    <Teleport
-      v-if="isShowConditionsModal"
-      :to="modalContainerEl"
-    >
-      <ConditionsModal
-        :item="multiSelectField || field"
-        :build-default-name="buildDefaultName"
-        :exclude-field-uuids="isMultiSelection ? selectedFields.map(f => f.uuid) : []"
-        :with-click-save-event="isMultiSelection"
-        @click-save="handleSaveMultiSelectConditionsModal"
-        @close="closeModal"
-      />
-    </Teleport>
-    <Teleport
-      v-if="isShowDescriptionModal"
-      :to="modalContainerEl"
-    >
-      <DescriptionModal
-        :field="field"
-        :editable="editable"
-        :build-default-name="buildDefaultName"
-        @close="closeModal"
-      />
-    </Teleport>
-  </div>
-</template>
-
-<script>
-import { IconCopy, IconClipboard, IconTrashX, IconTypography, IconInfoCircle, IconRouteAltLeft, IconMathFunction, IconClick, IconNewSection, IconLayoutAlignLeft, IconLayoutAlignRight, IconLayoutAlignTop, IconLayoutAlignBottom, IconSparkles } from '@tabler/icons-vue'
-import FormulaModal from './formula_modal'
-import FontModal from './font_modal'
-import ConditionsModal from './conditions_modal'
-import DescriptionModal from './description_modal'
-import Field from './field'
-import FieldType from './field_type.vue'
-
-export default {
-  name: 'ContextMenu',
-  components: {
-    IconCopy,
-    IconClipboard,
-    IconTrashX,
-    IconTypography,
-    IconInfoCircle,
-    IconRouteAltLeft,
-    IconMathFunction,
-    IconClick,
-    IconNewSection,
-    IconLayoutAlignLeft,
-    IconLayoutAlignRight,
-    IconLayoutAlignTop,
-    IconLayoutAlignBottom,
-    IconSparkles,
-    FormulaModal,
-    FontModal,
-    ConditionsModal,
-    DescriptionModal
-  },
-  inject: ['t', 'save', 'selectedAreasRef', 'isSelectModeRef'],
-  props: {
-    contextMenu: {
-      type: Object,
-      default: null,
-      required: true
-    },
-    field: {
-      type: Object,
-      default: null
-    },
-    editable: {
-      type: Boolean,
-      default: true
-    },
-    isMultiSelection: {
-      type: Boolean,
-      default: false
-    },
-    selectedAreas: {
-      type: Array,
-      default: () => []
-    },
-    template: {
-      type: Object,
-      default: null
-    },
-    withFieldsDetection: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['copy', 'paste', 'delete', 'close', 'align', 'autodetect-fields'],
-  data () {
-    return {
-      isShowFormulaModal: false,
-      isShowFontModal: false,
-      isShowConditionsModal: false,
-      isShowDescriptionModal: false,
-      multiSelectField: null
-    }
-  },
-  computed: {
-    fieldNames: FieldType.computed.fieldNames,
-    fieldLabels: FieldType.computed.fieldLabels,
-    modalContainerEl () {
-      return this.$el.getRootNode().querySelector('#docuseal_modal_container')
-    },
-    selectedFields () {
-      if (!this.isMultiSelection) return []
-
-      return this.selectedAreasRef.value.map((area) => {
-        return this.template.fields.find((f) => f.areas?.includes(area))
-      }).filter(Boolean)
-    },
-    isMac () {
-      return (navigator.userAgentData?.platform || navigator.platform)?.toLowerCase()?.includes('mac')
-    },
-    hasClipboardData () {
-      try {
-        const clipboard = localStorage.getItem('docuseal_clipboard')
-
-        if (clipboard) {
-          const data = JSON.parse(clipboard)
-
-          return Date.now() - data.timestamp < 3600000
-        }
-
-        return false
-      } catch {
-        return false
-      }
-    },
-    menuStyle () {
-      return {
-        left: this.contextMenu.x + 'px',
-        top: this.contextMenu.y + 'px'
-      }
-    },
-    showCopy () {
-      return !!this.contextMenu.area || this.isMultiSelection
-    },
-    showPaste () {
-      return !this.contextMenu.area && !this.isMultiSelection
-    },
-    showDelete () {
-      return !!this.contextMenu.area || this.isMultiSelection
-    },
-    showFont () {
-      if (this.isMultiSelection) return true
-      if (!this.field) return false
-
-      return ['text', 'number', 'date', 'select', 'heading'].includes(this.field.type)
-    },
-    showDescription () {
-      if (!this.field) return false
-
-      return !['stamp', 'heading', 'strikethrough'].includes(this.field.type)
-    },
-    showCondition () {
-      if (this.isMultiSelection) return true
-      if (!this.field) return false
-
-      return !['stamp', 'heading'].includes(this.field.type)
-    },
-    showFormula () {
-      if (!this.field) return false
-
-      return this.field.type === 'number'
-    },
-    showRequired () {
-      if (!this.field) return false
-
-      return !['phone', 'stamp', 'verification', 'strikethrough', 'heading'].includes(this.field.type)
-    },
-    showReadOnly () {
-      if (!this.field) return false
-
-      return ['text', 'number'].includes(this.field.type)
-    },
-    isRequired () {
-      return this.field?.required || false
-    },
-    isReadOnly () {
-      return this.field?.readonly || false
-    },
-    showSelectFields () {
-      return !this.contextMenu.area && !this.isMultiSelection
-    },
-    showAutodetectFields () {
-      return this.withFieldsDetection && this.editable && !this.contextMenu.area && !this.isMultiSelection
-    }
-  },
-  mounted () {
-    document.addEventListener('keydown', this.onKeyDown)
-    document.addEventListener('mousedown', this.handleClickOutside)
-
-    this.$nextTick(() => {
-      this.checkMenuPosition()
-    })
-  },
-  beforeUnmount () {
-    document.removeEventListener('keydown', this.onKeyDown)
-    document.removeEventListener('mousedown', this.handleClickOutside)
-  },
-  methods: {
-    buildDefaultName: Field.methods.buildDefaultName,
-    checkMenuPosition () {
-      if (this.$refs.menu) {
-        const rect = this.$refs.menu.getBoundingClientRect()
-
-        if (rect.bottom > window.innerHeight) {
-          this.contextMenu.y = this.contextMenu.y - rect.height
-        }
-
-        if (rect.right > window.innerWidth) {
-          this.contextMenu.x = this.contextMenu.x - rect.width
-        }
-      }
-    },
-    handleToggleRequired (value) {
-      if (this.field) {
-        this.field.required = value
-        this.save()
-      }
-    },
-    handleToggleReadOnly (value) {
-      if (this.field) {
-        this.field.readonly = value
-        this.save()
-      }
-    },
-    onKeyDown (event) {
-      if (event.key === 'Escape') {
-        event.preventDefault()
-        event.stopPropagation()
-
-        this.$emit('close')
-      } else if ((event.ctrlKey || event.metaKey) && event.key === 'v' && this.hasClipboardData) {
-        event.preventDefault()
-        event.stopPropagation()
-
-        this.$emit('paste')
-      }
-    },
-    handleClickOutside (event) {
-      if (this.$refs.menu && !this.$refs.menu.contains(event.target)) {
-        this.$emit('close')
-      }
-    },
-    openFontModal () {
-      if (this.isMultiSelection) {
-        this.multiSelectField = {
-          name: this.t('fields_selected').replace('{count}', this.selectedFields.length),
-          preferences: {}
-        }
-
-        const preferencesStrings = this.selectedFields.map((f) => JSON.stringify(f.preferences || {}))
-
-        if (preferencesStrings.every((s) => s === preferencesStrings[0])) {
-          this.multiSelectField.preferences = JSON.parse(preferencesStrings[0])
-        }
-      }
-
-      this.isShowFontModal = true
-    },
-    openDescriptionModal () {
-      this.isShowDescriptionModal = true
-    },
-    openConditionModal () {
-      if (this.isMultiSelection) {
-        this.multiSelectField = {
-          name: this.t('fields_selected').replace('{count}', this.selectedFields.length),
-          conditions: []
-        }
-
-        const conditionStrings = this.selectedFields.map((f) => JSON.stringify(f.conditions || []))
-
-        if (conditionStrings.every((s) => s === conditionStrings[0])) {
-          this.multiSelectField.conditions = JSON.parse(conditionStrings[0])
-        }
-      }
-
-      this.isShowConditionsModal = true
-    },
-    openFormulaModal () {
-      this.isShowFormulaModal = true
-    },
-    closeModal () {
-      this.isShowFormulaModal = false
-      this.isShowFontModal = false
-      this.isShowConditionsModal = false
-      this.isShowDescriptionModal = false
-      this.multiSelectField = null
-
-      this.$emit('close')
-    },
-    handleSaveMultiSelectFontModal () {
-      this.selectedFields.forEach((field) => {
-        field.preferences = { ...field.preferences, ...this.multiSelectField.preferences }
-      })
-
-      this.save()
-
-      this.closeModal()
-    },
-    handleSaveMultiSelectConditionsModal () {
-      this.selectedFields.forEach((field) => {
-        field.conditions = JSON.parse(JSON.stringify(this.multiSelectField.conditions))
-      })
-
-      this.save()
-
-      this.closeModal()
-    },
-    handleToggleSelectMode () {
-      this.isSelectModeRef.value = !this.isSelectModeRef.value
-
-      this.$emit('close')
-    }
-  }
-}
-</script>

app/javascript/template_builder/custom_field.vue

@@ -125,6 +125,7 @@
         :field="field"
         :default-field="defaultField"
         :build-default-name="buildDefaultName"
+        @save="$emit('save')"
         @close="isShowFormulaModal = false"
       />
     </Teleport>
@@ -136,6 +137,7 @@
         :field="field"
         :default-field="defaultField"
         :build-default-name="buildDefaultName"
+        @save="$emit('save')"
         @close="isShowFontModal = false"
       />
     </Teleport>
@@ -147,6 +149,7 @@
         :field="field"
         :default-field="defaultField"
         :build-default-name="buildDefaultName"
+        @save="$emit('save')"
         @close="isShowDescriptionModal = false"
       />
     </Teleport>

app/javascript/template_builder/description_modal.vue

@@ -9,7 +9,7 @@
     <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
       <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
         <span class="modal-title">
-          {{ (defaultField ? (defaultField.title || field.title || field.name) : field.name) || buildDefaultName(field, template.fields) }}
+          {{ (defaultField ? (defaultField.title || field.title || field.name) : field.name) || buildDefaultName(field) }}
         </span>
         <a
           href="#"
@@ -67,7 +67,7 @@
 <script>
 export default {
   name: 'DescriptionModal',
-  inject: ['t', 'save', 'template'],
+  inject: ['t', 'template'],
   props: {
     field: {
       type: Object,
@@ -88,7 +88,7 @@ export default {
       required: true
     }
   },
-  emits: ['close'],
+  emits: ['close', 'save'],
   data () {
     return {
       description: this.field.description,
@@ -103,7 +103,7 @@ export default {
       this.field.description = this.description
       this.field.title = this.title
 
-      this.save()
+      this.$emit('save')
       this.$emit('close')
     },
     resizeTextarea () {

app/javascript/template_builder/document.vue

@@ -13,6 +13,7 @@
       :with-signature-id="withSignatureId"
       :with-prefillable="withPrefillable"
       :is-drag="isDrag"
+      :is-mobile="isMobile"
       :with-field-placeholder="withFieldPlaceholder"
       :default-fields="defaultFields"
       :drag-field-placeholder="dragFieldPlaceholder"
@@ -30,9 +31,9 @@
       @copy-field="$emit('copy-field', $event)"
       @paste-field="$emit('paste-field', { ...$event, attachment_uuid: document.uuid })"
       @add-custom-field="$emit('add-custom-field', $event)"
+      @set-draw="$emit('set-draw', $event)"
       @copy-selected-areas="$emit('copy-selected-areas')"
       @delete-selected-areas="$emit('delete-selected-areas')"
-      @align-selected-areas="$emit('align-selected-areas', $event)"
       @autodetect-fields="$emit('autodetect-fields', $event)"
       @scroll-to="scrollToArea"
       @draw="$emit('draw', { area: {...$event.area, attachment_uuid: document.uuid }, isTooSmall: $event.isTooSmall })"
@@ -98,6 +99,11 @@ export default {
       required: false,
       default: () => []
     },
+    isMobile: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     allowDraw: {
       type: Boolean,
       required: false,
@@ -138,7 +144,7 @@ export default {
       default: false
     }
   },
-  emits: ['draw', 'drop-field', 'remove-area', 'paste-field', 'copy-field', 'copy-selected-areas', 'delete-selected-areas', 'align-selected-areas', 'autodetect-fields', 'add-custom-field'],
+  emits: ['draw', 'drop-field', 'remove-area', 'paste-field', 'copy-field', 'copy-selected-areas', 'delete-selected-areas', 'autodetect-fields', 'add-custom-field', 'set-draw'],
   data () {
     return {
       pageRefs: []
@@ -180,7 +186,15 @@ export default {
   methods: {
     scrollToArea (area) {
       this.$nextTick(() => {
-        this.pageRefs[area.page].areaRefs.find((e) => e.area === area).$el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        const pageRef = this.pageRefs[area.page]
+
+        if (pageRef && pageRef.areaRefs) {
+          const areaRef = pageRef.areaRefs.find((e) => e.area === area)
+
+          if (areaRef && areaRef.$el) {
+            areaRef.$el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+          }
+        }
       })
     },
     setPageRefs (el) {

app/javascript/template_builder/field.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="list-field group"
+    :class="`list-field-${field.type}`"
   >
     <div
       class="border border-base-300 rounded relative group fields-list-item"
@@ -269,6 +270,7 @@
         :editable="editable && !defaultField"
         :default-field="defaultField"
         :build-default-name="buildDefaultName"
+        @save="$emit('save')"
         @close="isShowFormulaModal = false"
       />
     </Teleport>
@@ -281,6 +283,7 @@
         :editable="editable && !defaultField"
         :default-field="defaultField"
         :build-default-name="buildDefaultName"
+        @save="$emit('save')"
         @close="isShowFontModal = false"
       />
     </Teleport>
@@ -292,6 +295,7 @@
         :item="field"
         :default-field="defaultField"
         :build-default-name="buildDefaultName"
+        @save="$emit('save')"
         @close="isShowConditionsModal = false"
       />
     </Teleport>
@@ -304,6 +308,7 @@
         :editable="editable && !defaultField"
         :default-field="defaultField"
         :build-default-name="buildDefaultName"
+        @save="$emit('save')"
         @close="isShowDescriptionModal = false"
       />
     </Teleport>
@@ -340,7 +345,7 @@ export default {
     IconMathFunction,
     FieldType
   },
-  inject: ['template', 'backgroundColor', 'selectedAreasRef', 't', 'locale'],
+  inject: ['template', 'backgroundColor', 'selectedAreasRef', 't', 'locale', 'getFieldTypeIndex'],
   props: {
     field: {
       type: Object,
@@ -412,7 +417,7 @@ export default {
       return this.$el.getRootNode().querySelector('#docuseal_modal_container')
     },
     defaultName () {
-      return this.buildDefaultName(this.field, this.template.fields)
+      return this.buildDefaultName(this.field)
     },
     areas () {
       return this.field.areas || []
@@ -432,7 +437,7 @@ export default {
 
       this.$emit('save')
     },
-    buildDefaultName (field, fields) {
+    buildDefaultName (field) {
       if (field.type === 'payment' && field.preferences?.price && !field.preferences?.formula) {
         const { price, currency } = field.preferences || {}
 
@@ -443,7 +448,7 @@ export default {
 
         return `${this.fieldNames[field.type]} ${formattedPrice}`
       } else {
-        const typeIndex = fields.filter((f) => f.type === field.type).indexOf(field)
+        const typeIndex = this.getFieldTypeIndex(field)
 
         if (field.type === 'heading' || field.type === 'strikethrough') {
           return `${this.fieldNames[field.type]} ${typeIndex + 1}`

app/javascript/template_builder/field_context_modal.vue

@@ -0,0 +1,49 @@
+<template>
+  <Teleport :to="modalContainerEl">
+    <div class="modal modal-open items-start !animate-none overflow-y-auto">
+      <div
+        class="absolute top-0 bottom-0 right-0 left-0"
+        @click.prevent="$emit('close')"
+      />
+      <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
+        <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
+          <span class="modal-title">
+            {{ title }}
+          </span>
+          <a
+            href="#"
+            class="text-xl modal-close-button"
+            @click.prevent="$emit('close')"
+          >&times;</a>
+        </div>
+        <form @submit.prevent="$emit('save')">
+          <slot />
+          <button
+            class="base-button w-full mt-4 modal-save-button"
+            type="submit"
+          >
+            {{ t('save') }}
+          </button>
+        </form>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script>
+export default {
+  name: 'ContextModal',
+  inject: ['t'],
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    modalContainerEl: {
+      type: Element,
+      required: true
+    }
+  },
+  emits: ['close', 'save']
+}
+</script>

app/javascript/template_builder/field_context_submenu.vue

@@ -0,0 +1,147 @@
+<template>
+  <div
+    class="relative"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  >
+    <button
+      class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between text-sm"
+      @click.stop="isOpen ? close() : open()"
+    >
+      <span class="flex items-center space-x-2">
+        <component
+          :is="icon || 'span'"
+          class="w-4 h-4"
+        />
+        <span>{{ label }}</span>
+      </span>
+      <IconChevronRight class="w-4 h-4" />
+    </button>
+    <div
+      v-if="isOpen"
+      ref="submenu"
+      class="absolute p-1 z-50 left-full bg-white shadow-lg rounded-lg border border-neutral-200 cursor-default"
+      style="min-width: 170px"
+      :style="submenuStyle"
+      :class="menuClass"
+      @click.stop
+    >
+      <slot>
+        <button
+          v-for="option in options"
+          :key="option.value"
+          class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between space-x-2 text-sm cursor-pointer"
+          @click="handleSelect(option.value)"
+        >
+          <span class="whitespace-nowrap">{{ option.label }}</span>
+          <IconCheck
+            v-if="modelValue === option.value"
+            class="w-4 h-4"
+          />
+        </button>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import { IconChevronRight, IconCheck } from '@tabler/icons-vue'
+
+export default {
+  name: 'ContextSubmenu',
+  components: {
+    IconChevronRight,
+    IconCheck
+  },
+  props: {
+    icon: {
+      type: [Function],
+      required: false,
+      default: null
+    },
+    label: {
+      type: String,
+      required: true
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    modelValue: {
+      type: [String, Number],
+      default: null
+    },
+    menuClass: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['select', 'update:modelValue'],
+  data () {
+    return {
+      isOpen: false,
+      topOffset: 0
+    }
+  },
+  computed: {
+    submenuStyle () {
+      return {
+        top: this.topOffset + 'px'
+      }
+    }
+  },
+  beforeUnmount () {
+    this.clearTimeout()
+  },
+  methods: {
+    handleMouseEnter () {
+      clearTimeout(this.closeTimeout)
+
+      this.openTimeout = setTimeout(() => this.open(), 200)
+    },
+    handleMouseLeave () {
+      clearTimeout(this.openTimeout)
+
+      this.closeTimeout = setTimeout(() => this.close(), 200)
+    },
+    open () {
+      this.clearTimeout()
+
+      this.isOpen = true
+      this.topOffset = 0
+
+      this.$nextTick(() => setTimeout(() => this.adjustPosition(), 0))
+    },
+    clearTimeout () {
+      if (this.openTimeout) {
+        clearTimeout(this.openTimeout)
+      }
+
+      if (this.closeTimeout) {
+        clearTimeout(this.closeTimeout)
+      }
+    },
+    close () {
+      this.clearTimeout()
+
+      this.isOpen = false
+    },
+    handleSelect (value) {
+      this.$emit('select', value)
+      this.$emit('update:modelValue', value)
+    },
+    adjustPosition () {
+      if (!this.$refs.submenu) return
+
+      const rect = this.$refs.submenu.getBoundingClientRect()
+      const overflow = rect.bottom - window.innerHeight
+
+      if (overflow > 0) {
+        this.topOffset = -overflow - 4
+      } else {
+        this.topOffset = 0
+      }
+    }
+  }
+}
+</script>

app/javascript/template_builder/field_settings.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="field.type === 'verification'"
-    class="py-1.5 px-1 relative"
+    class="field-settings-verification-method py-1.5 px-1 relative"
     @click.stop
   >
     <select
@@ -10,7 +10,7 @@
       @change="[field.preferences ||= {}, field.preferences.method = $event.target.value, $emit('save')]"
     >
       <option
-        v-for="method in ['QeS', 'AeS']"
+        v-for="method in verificationMethods"
         :key="method"
         :value="method.toLowerCase()"
         :selected="method.toLowerCase() === field.preferences?.method || (method === 'QeS' && !field.preferences?.method)"
@@ -26,35 +26,9 @@
       {{ t('method') }}
     </label>
   </div>
-  <div
-    v-if="['cells'].includes(field.type)"
-    class="py-1.5 px-1 relative"
-    @click.stop
-  >
-    <select
-      class="select select-bordered select-xs w-full max-w-xs h-7 !outline-0 font-normal bg-transparent"
-      @change="[field.preferences ||= {}, field.preferences.align = $event.target.value, $emit('save')]"
-    >
-      <option
-        v-for="value in ['left', 'right', field.type === 'cells' ? null : 'center'].filter(Boolean)"
-        :key="value"
-        :selected="field.preferences?.align ? value === field.preferences.align : value === 'left'"
-        :value="value"
-      >
-        {{ t(value) }}
-      </option>
-    </select>
-    <label
-      :style="{ backgroundColor }"
-      class="absolute -top-1 left-2.5 px-1 h-4"
-      style="font-size: 8px"
-    >
-      {{ t('align') }}
-    </label>
-  </div>
   <div
     v-if="['select', 'radio'].includes(field.type) && !defaultField"
-    class="py-1.5 px-1 relative"
+    class="field-settings-default-value py-1.5 px-1 relative"
     @click.stop
   >
     <select
@@ -88,7 +62,7 @@
   </div>
   <div
     v-if="['text', 'number'].includes(field.type) && !defaultField"
-    class="py-1.5 px-1 relative"
+    class="field-settings-default-value py-1.5 px-1 relative"
     @click.stop
   >
     <input
@@ -110,7 +84,7 @@
   </div>
   <div
     v-if="['text', 'cells'].includes(field.type)"
-    class="py-1.5 px-1 relative"
+    class="field-settings-validation py-1.5 px-1 relative"
     @click.stop
   >
     <select
@@ -148,7 +122,7 @@
   </div>
   <div
     v-if="['text', 'cells'].includes(field.type) && field.validation && lengthValidation"
-    class="py-1.5 px-1 relative flex space-x-1"
+    class="field-settings-length-validation py-1.5 px-1 relative flex space-x-1"
     @click.stop
   >
     <div class="w-1/2 relative">
@@ -192,7 +166,7 @@
   </div>
   <div
     v-if="field.type === 'number'"
-    class="py-1.5 px-1 relative flex space-x-1"
+    class="field-settings-number-range py-1.5 px-1 relative flex space-x-1"
     @click.stop
   >
     <div class="w-1/2 relative">
@@ -236,7 +210,7 @@
   </div>
   <div
     v-if="field.type === 'number'"
-    class="py-1.5 px-1 relative"
+    class="field-settings-number-format py-1.5 px-1 relative"
     @click.stop
   >
     <select
@@ -263,7 +237,7 @@
   </div>
   <div
     v-if="['text', 'cells'].includes(field.type) && field.validation && !validations[field.validation.pattern] && !lengthValidation"
-    class="py-1.5 px-1 relative"
+    class="field-settings-custom-validation py-1.5 px-1 relative"
     @click.stop
   >
     <input
@@ -285,7 +259,7 @@
   </div>
   <div
     v-if="['text', 'cells'].includes(field.type) && field.validation && !validations[field.validation.pattern] && !lengthValidation"
-    class="py-1.5 px-1 relative"
+    class="field-settings-error-message py-1.5 px-1 relative"
     @click.stop
   >
     <input
@@ -306,7 +280,7 @@
   </div>
   <div
     v-if="field.type === 'date'"
-    class="py-1.5 px-1 relative"
+    class="field-settings-date-format py-1.5 px-1 relative"
     @click.stop
   >
     <select
@@ -333,7 +307,7 @@
   </div>
   <div
     v-if="field.type === 'signature'"
-    class="py-1.5 px-1 relative"
+    class="field-settings-signature-format py-1.5 px-1 relative"
     @click.stop
   >
     <select
@@ -348,7 +322,7 @@
         {{ t('any') }}
       </option>
       <option
-        v-for="type in ['drawn', 'typed', 'drawn_or_typed', 'drawn_or_upload', 'upload']"
+        v-for="type in signatureFormats"
         :key="type"
         :value="type"
         :selected="field.preferences?.format === type"
@@ -366,6 +340,7 @@
   </div>
   <li
     v-if="[true, false].includes(withSignatureId) && field.type === 'signature'"
+    class="field-settings-signature-id"
     @click.stop
   >
     <label class="cursor-pointer py-1.5">
@@ -381,6 +356,7 @@
   </li>
   <li
     v-if="withRequired && field.type !== 'phone' && field.type !== 'stamp' && field.type !== 'verification' && field.type !== 'strikethrough' && field.type !== 'heading'"
+    class="field-settings-required"
     @click.stop
   >
     <label class="cursor-pointer py-1.5">
@@ -396,6 +372,7 @@
   </li>
   <li
     v-if="field.type == 'stamp'"
+    class="field-settings-with-logo"
     @click.stop
   >
     <label class="cursor-pointer py-1.5">
@@ -410,6 +387,7 @@
   </li>
   <li
     v-if="field.type == 'checkbox'"
+    class="field-settings-checked"
     @click.stop
   >
     <label class="cursor-pointer py-1.5">
@@ -424,6 +402,7 @@
   </li>
   <li
     v-if="field.type == 'date'"
+    class="field-settings-set-signing-date"
     @click.stop
   >
     <label class="cursor-pointer py-1.5">
@@ -437,7 +416,8 @@
     </label>
   </li>
   <li
-    v-if="['text', 'number'].includes(field.type)"
+    v-if="['text', 'number', 'radio', 'multiple', 'select'].includes(field.type)"
+    class="field-settings-read-only"
     @click.stop
   >
     <label class="cursor-pointer py-1.5">
@@ -452,7 +432,8 @@
     </label>
   </li>
   <li
-    v-if="withPrefillable && ['text', 'number', 'cells', 'date', 'checkbox', 'select', 'radio', 'phone'].includes(field['type'])"
+    v-if="withPrefillable && prefillableFieldTypes.includes(field['type'])"
+    class="field-settings-prefillable"
     @click.stop
   >
     <label class="cursor-pointer py-1.5">
@@ -470,7 +451,10 @@
     v-if="field.type != 'stamp'"
     class="pb-0.5 mt-0.5"
   >
-  <li v-if="['text', 'number', 'date', 'select', 'heading'].includes(field.type)">
+  <li
+    v-if="['text', 'number', 'date', 'select', 'heading', 'cells'].includes(field.type)"
+    class="field-settings-font"
+  >
     <label
       class="label-text cursor-pointer text-center w-full flex items-center"
       @click="$emit('click-font')"
@@ -485,6 +469,7 @@
   </li>
   <li
     v-if="field.type != 'stamp' && field.type != 'heading' && field.type != 'strikethrough'"
+    class="field-settings-description"
   >
     <label
       class="label-text cursor-pointer text-center w-full flex items-center"
@@ -500,6 +485,7 @@
   </li>
   <li
     v-if="withCondition && field.type != 'stamp' && field.type != 'heading'"
+    class="field-settings-condition"
   >
     <label
       class="label-text cursor-pointer text-center w-full flex items-center"
@@ -513,7 +499,10 @@
       </span>
     </label>
   </li>
-  <li v-if="field.type == 'number'">
+  <li
+    v-if="field.type == 'number'"
+    class="field-settings-formula"
+  >
     <label
       class="label-text cursor-pointer text-center w-full flex items-center"
       @click="$emit('click-formula')"
@@ -534,6 +523,7 @@
     <li
       v-for="(area, index) in sortedAreas"
       :key="index"
+      class="field-settings-area"
     >
       <a
         href="#"
@@ -553,7 +543,10 @@
         />
       </a>
     </li>
-    <li v-if="!field.areas?.length || !['radio', 'multiple'].includes(field.type)">
+    <li
+      v-if="!field.areas?.length || !['radio', 'multiple'].includes(field.type)"
+      class="field-settings-draw-new-area"
+    >
       <a
         href="#"
         class="text-sm py-1 px-2"
@@ -567,7 +560,10 @@
       </a>
     </li>
   </template>
-  <li v-if="withCopyToAllPages && field.areas?.length === 1 && ['date', 'signature', 'initials', 'text', 'cells', 'stamp'].includes(field.type)">
+  <li
+    v-if="withCopyToAllPages && field.areas?.length === 1 && ['date', 'signature', 'initials', 'text', 'cells', 'stamp'].includes(field.type)"
+    class="field-settings-copy-to-all-pages"
+  >
     <a
       href="#"
       class="text-sm py-1 px-2"
@@ -580,7 +576,10 @@
       {{ t('copy_to_all_pages') }}
     </a>
   </li>
-  <li v-if="withCustomFields">
+  <li
+    v-if="withCustomFields"
+    class="field-settings-save-as-custom-field"
+  >
     <a
       href="#"
       class="text-sm py-1 px-2"
@@ -718,7 +717,7 @@ export default {
     },
     lengthValidation () {
       if (this.field.validation?.pattern && this.selectedValidation !== 'custom') {
-        return this.field.validation.pattern.match(/^\.{(?<min>\d+),(?<max>\d+)?}$/)?.groups
+        return this.parseLengthPattern(this.field.validation.pattern)
       } else {
         return null
       }
@@ -735,6 +734,15 @@ export default {
         '^[a-zA-Z]+$': 'letters_only'
       }
     },
+    signatureFormats () {
+      return ['drawn', 'typed', 'drawn_or_typed', 'drawn_or_upload', 'upload']
+    },
+    verificationMethods () {
+      return ['QeS', 'AeS']
+    },
+    prefillableFieldTypes () {
+      return ['text', 'number', 'cells', 'date', 'checkbox', 'select', 'radio', 'phone']
+    },
     sortedAreas () {
       return (this.field.areas || []).sort((a, b) => {
         return this.schemaAttachmentsIndexes[a.attachment_uuid] - this.schemaAttachmentsIndexes[b.attachment_uuid]
@@ -798,6 +806,9 @@ export default {
         return number
       }
     },
+    parseLengthPattern (pattern) {
+      return pattern?.match(/^\.{(?<min>\d+),(?<max>\d+)?}$/)?.groups || null
+    },
     formatDate (date, format) {
       const monthFormats = {
         M: 'numeric',

app/javascript/template_builder/fields.vue

@@ -25,7 +25,7 @@
       :key="field.uuid"
       :data-uuid="field.uuid"
       :field="field"
-      :type-index="fields.filter((f) => f.type === field.type).indexOf(field)"
+      :type-index="getFieldTypeIndex(field)"
       :editable="editable"
       :with-signature-id="withSignatureId"
       :with-prefillable="withPrefillable"
@@ -127,7 +127,7 @@
     >{{ t('custom') }}</a>
   </div>
   <div
-    v-if="showCustomTab && editable"
+    v-if="showCustomTab && editable && (customFields.length || newCustomField)"
     ref="customFields"
     class="custom-fields"
     @dragover.prevent="onCustomFieldDragover"
@@ -376,7 +376,7 @@ export default {
     IconDrag,
     IconLock
   },
-  inject: ['save', 'backgroundColor', 'withPhone', 'withVerification', 'withKba', 'withPayment', 't', 'fieldsDragFieldRef', 'customDragFieldRef', 'baseFetch', 'selectedAreasRef'],
+  inject: ['save', 'backgroundColor', 'withPhone', 'withVerification', 'withKba', 'withPayment', 't', 'fieldsDragFieldRef', 'customDragFieldRef', 'baseFetch', 'selectedAreasRef', 'getFieldTypeIndex'],
   props: {
     fields: {
       type: Array,

app/javascript/template_builder/font_modal.vue

@@ -9,7 +9,7 @@
     <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
       <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
         <span class="modal-title">
-          {{ t('font') }} - {{ (defaultField ? (defaultField.title || field.title || field.name) : field.name) || buildDefaultName(field, template.fields) }}
+          {{ t('font') }} - {{ (defaultField ? (defaultField.title || field.title || field.name) : field.name) || buildDefaultName(field) }}
         </span>
         <a
           href="#"
@@ -171,7 +171,7 @@
               contenteditable="true"
               class="outline-none whitespace-nowrap truncate"
             >
-              {{ field.default_value || field.name || buildDefaultName(field, template.fields) }}
+              {{ field.default_value || field.name || buildDefaultName(field) }}
             </span>
           </div>
         </div>
@@ -196,7 +196,7 @@ export default {
   components: {
     IconChevronDown
   },
-  inject: ['t', 'save', 'template'],
+  inject: ['t', 'template'],
   props: {
     field: {
       type: Object,
@@ -212,17 +212,12 @@ export default {
       required: false,
       default: true
     },
-    withClickSaveEvent: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     buildDefaultName: {
       type: Function,
       required: true
     }
   },
-  emits: ['close', 'click-save'],
+  emits: ['close', 'save'],
   data () {
     return {
       preferences: {}
@@ -262,6 +257,7 @@ export default {
     colors () {
       return [
         { label: '⬛', value: 'black' },
+        { label: '⬜', value: 'white' },
         { label: '🟦', value: 'blue' },
         { label: '🟥', value: 'red' }
       ]
@@ -276,6 +272,7 @@ export default {
         'items-center': !this.preferences.valign || this.preferences.valign === 'center',
         'items-start': this.preferences.valign === 'top',
         'items-end': this.preferences.valign === 'bottom',
+        'bg-black': this.preferences.color === 'white',
         'font-bold': ['bold_italic', 'bold'].includes(this.preferences.font_type),
         italic: ['bold_italic', 'italic'].includes(this.preferences.font_type)
       }
@@ -327,12 +324,7 @@ export default {
 
       Object.assign(this.field.preferences, this.preferences)
 
-      if (this.withClickSaveEvent) {
+      this.$emit('save')
-        this.$emit('click-save')
-      } else {
-        this.save()
-      }
-
       this.$emit('close')
     }
   }

app/javascript/template_builder/formula_modal.vue

@@ -9,7 +9,7 @@
     <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
       <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
         <span class="modal-title">
-          {{ t('formula') }} - {{ (defaultField ? (defaultField.title || field.title || field.name) : field.name) || buildDefaultName(field, template.fields) }}
+          {{ t('formula') }} - {{ (defaultField ? (defaultField.title || field.title || field.name) : field.name) || buildDefaultName(field) }}
         </span>
         <a
           href="#"
@@ -33,7 +33,7 @@
             v-for="f in fields"
             :key="f.uuid"
             class="mr-1 flex btn btn-neutral btn-outline border-base-content/20 btn-sm normal-case font-normal bg-white !rounded-xl"
-            @click.prevent="insertTextUnderCursor(`{{${f.name || buildDefaultName(f, template.fields)}}}`)"
+            @click.prevent="insertTextUnderCursor(`{{${f.name || buildDefaultName(f)}}}`)"
           >
             <IconMathFunction
               v-if="f.preferences?.formula"
@@ -47,7 +47,7 @@
               height="20"
               stroke-width="1.5"
             />
-            {{ f.name || buildDefaultName(f, template.fields) }}
+            {{ f.name || buildDefaultName(f) }}
           </button>
         </div>
         <div>
@@ -131,7 +131,7 @@ export default {
     IconCodePlus,
     IconMathFunction
   },
-  inject: ['t', 'save', 'template', 'withFormula'],
+  inject: ['t', 'template', 'withFormula'],
   props: {
     field: {
       type: Object,
@@ -152,7 +152,7 @@ export default {
       required: true
     }
   },
-  emits: ['close'],
+  emits: ['close', 'save'],
   data () {
     return {
       formula: ''
@@ -161,7 +161,7 @@ export default {
   computed: {
     fields () {
       return this.template.fields.reduce((acc, f) => {
-        if (f !== this.field && ['number'].includes(f.type) && (!f.preferences?.formula || !f.preferences.formula.includes(this.field.uuid))) {
+        if (f !== this.field && this.isNumberField(f) && (!f.preferences?.formula || !f.preferences.formula.includes(this.field.uuid))) {
           acc.push(f)
         }
 
@@ -176,12 +176,15 @@ export default {
     this.formula = this.humanizeFormula(this.field.preferences.formula || '')
   },
   methods: {
+    isNumberField (field) {
+      return field.type === 'number' || (['radio', 'select'].includes(field.type) && field.options?.every((o) => String(o.value).match(/^[\d.-]+$/)))
+    },
     humanizeFormula (text) {
       return text.replace(/{{(.*?)}}/g, (match, uuid) => {
-        const foundField = this.fields.find((f) => f.uuid === uuid)
+        const foundField = this.template.fields.find((f) => f.uuid === uuid)
 
         if (foundField) {
-          return `{{${foundField.name || this.buildDefaultName(foundField, this.template.fields)}}}`
+          return `{{${foundField.name || this.buildDefaultName(foundField)}}}`
         } else {
           return '{{FIELD NOT FOUND}}'
         }
@@ -189,8 +192,8 @@ export default {
     },
     normalizeFormula (text) {
       return text.replace(/{{(.*?)}}/g, (match, name) => {
-        const foundField = this.fields.find((f) => {
+        const foundField = this.template.fields.find((f) => {
-          return (f.name || this.buildDefaultName(f, this.template.fields)).trim() === name.trim()
+          return (f.name || this.buildDefaultName(f)).trim() === name.trim()
         })
 
         if (foundField) {
@@ -212,11 +215,14 @@ export default {
       } else {
         this.field.preferences.formula = normalizedFormula
 
-        if (this.field.type !== 'payment') {
+        if (this.field.type === 'payment') {
+          delete this.field.preferences.price
+          delete this.field.preferences.payment_link_id
+        } else {
           this.field.readonly = !!normalizedFormula
         }
 
-        this.save()
+        this.$emit('save')
 
         this.$emit('close')
       }

app/javascript/template_builder/i18n.js

@@ -1,6 +1,7 @@
 const en = {
+  fixed: 'Fixed',
   default: 'Default',
-  save_as_custom_field: 'Save as Custom Field',
+  save_as_custom_field: 'Save as custom field',
   kba: 'KBA',
   analyzing_: 'Analyzing...',
   download: 'Download',
@@ -31,6 +32,9 @@ const en = {
   field_not_found: 'Field not found',
   clear: 'Clear',
   align: 'Align',
+  resize: 'Resize',
+  width: 'Width',
+  height: 'Height',
   add_all_required_fields_to_continue: 'Add all required fields to continue',
   uploaded_pdf_contains_form_fields_keep_or_remove_them: 'Uploaded PDF contains form fields. Keep or remove them?',
   keep: 'Keep',
@@ -48,6 +52,8 @@ const en = {
   type_value: 'Type value',
   equal: 'Equal',
   not_equal: 'Not equal',
+  greater_than: 'Greater than',
+  less_than: 'Less than',
   contains: 'Contains',
   does_not_contain: 'Does not contain',
   not_empty: 'Not empty',
@@ -91,8 +97,9 @@ const en = {
   format: 'Format',
   read_only: 'Read-only',
   page: 'Page',
-  draw_new_area: 'Draw New Area',
+  draw_new_area: 'Draw new area',
-  copy_to_all_pages: 'Copy to All Pages',
+  copy_to_all_pages: 'Copy to all pages',
+  more: 'More',
   add_option: 'Add option',
   option: 'Option',
   options: 'Options',
@@ -173,6 +180,9 @@ const en = {
   numbers_only: 'Numbers only',
   letters_only: 'Letters only',
   regexp_validation: 'Regexp validation',
+  custom_validation: 'Custom Validation',
+  length_validation: 'Length Validation',
+  number_range: 'Number Range',
   enter_pdf_password: 'Enter PDF password',
   wrong_password: 'Wrong password',
   currency: 'Currency',
@@ -183,7 +193,7 @@ const en = {
   learn_more: 'Learn more',
   and: 'and',
   or: 'or',
-  start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: 'Start a quick tour to learn how to create an send your first document',
+  start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: 'Start a quick tour to learn how to create and send your first document',
   start_tour: 'Start Tour',
   or_add_from: 'Or add from',
   sync: 'Sync',
@@ -202,6 +212,7 @@ const en = {
 }
 
 const es = {
+  fixed: 'Fijo',
   default: 'Predeterminado',
   save_as_custom_field: 'Guardar como personalizado',
   kba: 'KBA',
@@ -235,6 +246,9 @@ const es = {
   clear: 'Borrar',
   type_value: 'Escriba valor',
   align: 'Alinear',
+  resize: 'Redimensionar',
+  width: 'Ancho',
+  height: 'Alto',
   add_all_required_fields_to_continue: 'Agregar todos los campos requeridos para continuar',
   uploaded_pdf_contains_form_fields_keep_or_remove_them: 'El PDF cargado tiene campos. ¿Mantenerlos o eliminarlos?',
   keep: 'Mantener',
@@ -252,6 +266,8 @@ const es = {
   price: 'Precio',
   equal: 'Igual',
   not_equal: 'No es igual',
+  greater_than: 'Mayor que',
+  less_than: 'Menor que',
   contains: 'Contiene',
   does_not_contain: 'No contiene',
   not_empty: 'No vacío',
@@ -292,6 +308,7 @@ const es = {
   page: 'Página',
   draw_new_area: 'Dibujar nueva área',
   copy_to_all_pages: 'Copiar a todas las páginas',
+  more: 'Más',
   add_option: 'Agregar opción',
   option: 'Opción',
   options: 'Opciones',
@@ -376,6 +393,9 @@ const es = {
   numbers_only: 'Solo números',
   letters_only: 'Solo letras',
   regexp_validation: 'Validación de expresión regular',
+  custom_validation: 'Validación Personalizada',
+  length_validation: 'Validación de Longitud',
+  number_range: 'Rango de Números',
   enter_pdf_password: 'Ingrese la contraseña del PDF',
   wrong_password: 'Contraseña incorrecta',
   currency: 'Moneda',
@@ -405,6 +425,7 @@ const es = {
 }
 
 const it = {
+  fixed: 'Fisso',
   default: 'Predefinito',
   save_as_custom_field: 'Salva come personalizzato',
   kba: 'KBA',
@@ -437,6 +458,9 @@ const it = {
   field_not_found: 'Campo non trovato',
   clear: 'Cancella',
   align: 'Allinea',
+  resize: 'Ridimensiona',
+  width: 'Larghezza',
+  height: 'Altezza',
   add_all_required_fields_to_continue: 'Aggiungi tutti i campi obbligatori per continuare',
   uploaded_pdf_contains_form_fields_keep_or_remove_them: 'Il PDF caricato contiene campi del modulo. Mantenerli o rimuoverli?',
   keep: 'Mantieni',
@@ -454,6 +478,8 @@ const it = {
   type_value: 'Inserisci valore',
   equal: 'Uguale',
   not_equal: 'Non uguale',
+  greater_than: 'Maggiore di',
+  less_than: 'Minore di',
   contains: 'Contiene',
   does_not_contain: 'Non contiene',
   not_empty: 'Non vuoto',
@@ -499,6 +525,7 @@ const it = {
   page: 'Pagina',
   draw_new_area: 'Disegna nuova area',
   copy_to_all_pages: 'Copia in tutte le pagine',
+  more: 'Altro',
   add_option: 'Aggiungi opzione',
   option: 'Opzione',
   options: 'Opzioni',
@@ -579,6 +606,9 @@ const it = {
   numbers_only: 'Solo numeri',
   letters_only: 'Solo lettere',
   regexp_validation: 'Validazione regexp',
+  custom_validation: 'Validazione Personalizzata',
+  length_validation: 'Validazione Lunghezza',
+  number_range: 'Intervallo Numerico',
   enter_pdf_password: 'Inserisci password PDF',
   wrong_password: 'Password errata',
   currency: 'Valuta',
@@ -608,6 +638,7 @@ const it = {
 }
 
 const pt = {
+  fixed: 'Fixo',
   default: 'Padrão',
   save_as_custom_field: 'Salvar como personalizado',
   kba: 'KBA',
@@ -644,6 +675,9 @@ const pt = {
   uploaded_pdf_contains_form_fields_keep_or_remove_them: 'O PDF carregado contém campos. Manter ou removê-los?',
   keep: 'Manter',
   align: 'Alinhar',
+  resize: 'Redimensionar',
+  width: 'Largura',
+  height: 'Altura',
   left: 'Esquerda',
   heading: 'Cabeçalho',
   validation: 'Validação',
@@ -658,6 +692,8 @@ const pt = {
   price: 'Preço',
   equal: 'Igual',
   not_equal: 'Não é igual',
+  greater_than: 'Maior que',
+  less_than: 'Menor que',
   contains: 'Contém',
   does_not_contain: 'Não contém',
   not_empty: 'Não vazio',
@@ -698,6 +734,7 @@ const pt = {
   page: 'Página',
   draw_new_area: 'Desenhar nova área',
   copy_to_all_pages: 'Copiar para todas as páginas',
+  more: 'Mais',
   add_option: 'Adicionar opção',
   option: 'Opção',
   options: 'Opções',
@@ -782,6 +819,9 @@ const pt = {
   numbers_only: 'Somente números',
   letters_only: 'Somente letras',
   regexp_validation: 'Validação de expressão regular',
+  custom_validation: 'Validação Personalizada',
+  length_validation: 'Validação de Comprimento',
+  number_range: 'Intervalo de Números',
   enter_pdf_password: 'Digite a senha do PDF',
   wrong_password: 'Senha incorreta',
   currency: 'Moeda',
@@ -811,6 +851,7 @@ const pt = {
 }
 
 const fr = {
+  fixed: 'Fixe',
   default: 'Par défaut',
   save_as_custom_field: 'Enregistrer comme personnalisé',
   kba: 'KBA',
@@ -843,6 +884,9 @@ const fr = {
   field_not_found: 'Champ introuvable',
   clear: 'Effacer',
   align: 'Aligner',
+  resize: 'Redimensionner',
+  width: 'Largeur',
+  height: 'Hauteur',
   add_all_required_fields_to_continue: 'Ajoutez tous les champs obligatoires pour continuer',
   uploaded_pdf_contains_form_fields_keep_or_remove_them: 'Le PDF téléversé contient des champs de formulaire. Les conserver ou les supprimer ?',
   keep: 'Conserver',
@@ -860,6 +904,8 @@ const fr = {
   type_value: 'Saisir une valeur',
   equal: 'Égal',
   not_equal: 'Différent',
+  greater_than: 'Supérieur à',
+  less_than: 'Inférieur à',
   contains: 'Contient',
   does_not_contain: 'Ne contient pas',
   not_empty: 'Non vide',
@@ -905,6 +951,7 @@ const fr = {
   page: 'Page',
   draw_new_area: 'Dessiner une zone',
   copy_to_all_pages: 'Copier sur toutes les pages',
+  more: 'Plus',
   add_option: 'Ajouter une option',
   option: 'Option',
   options: 'Options',
@@ -985,6 +1032,9 @@ const fr = {
   numbers_only: 'Chiffres uniquement',
   letters_only: 'Lettres uniquement',
   regexp_validation: 'Validation par expression régulière',
+  custom_validation: 'Validation Personnalisée',
+  length_validation: 'Validation de Longueur',
+  number_range: 'Plage de Nombres',
   enter_pdf_password: 'Saisir le mot de passe du PDF',
   wrong_password: 'Mot de passe incorrect',
   currency: 'Devise',
@@ -1014,6 +1064,7 @@ const fr = {
 }
 
 const de = {
+  fixed: 'Fest',
   default: 'Standard',
   save_as_custom_field: 'Als benutzerdefiniert speichern',
   kba: 'KBA',
@@ -1046,6 +1097,9 @@ const de = {
   field_not_found: 'Feld nicht gefunden',
   clear: 'Leeren',
   align: 'Ausrichten',
+  resize: 'Größe ändern',
+  width: 'Breite',
+  height: 'Höhe',
   add_all_required_fields_to_continue: 'Fügen Sie alle erforderlichen Felder hinzu, um fortzufahren',
   uploaded_pdf_contains_form_fields_keep_or_remove_them: 'Das hochgeladene PDF enthält Formularfelder. Beibehalten oder entfernen?',
   keep: 'Beibehalten',
@@ -1063,6 +1117,8 @@ const de = {
   type_value: 'Wert eingeben',
   equal: 'Gleich',
   not_equal: 'Ungleich',
+  greater_than: 'Größer als',
+  less_than: 'Kleiner als',
   contains: 'Enthält',
   does_not_contain: 'Enthält nicht',
   not_empty: 'Nicht leer',
@@ -1108,6 +1164,7 @@ const de = {
   page: 'Seite',
   draw_new_area: 'Bereich zeichnen',
   copy_to_all_pages: 'Auf alle Seiten kopieren',
+  more: 'Mehr',
   add_option: 'Option hinzufügen',
   option: 'Option',
   options: 'Optionen',
@@ -1188,6 +1245,9 @@ const de = {
   numbers_only: 'Nur Zahlen',
   letters_only: 'Nur Buchstaben',
   regexp_validation: 'RegExp-Validierung',
+  custom_validation: 'Benutzerdefinierte Validierung',
+  length_validation: 'Längenvalidierung',
+  number_range: 'Zahlenbereich',
   enter_pdf_password: 'PDF-Passwort eingeben',
   wrong_password: 'Falsches Passwort',
   currency: 'Währung',
@@ -1217,6 +1277,7 @@ const de = {
 }
 
 const nl = {
+  fixed: 'Vast',
   default: 'Standaard',
   save_as_custom_field: 'Opslaan als aangepast',
   kba: 'KBA',
@@ -1249,6 +1310,9 @@ const nl = {
   field_not_found: 'Veld niet gevonden',
   clear: 'Wissen',
   align: 'Uitlijnen',
+  resize: 'Formaat wijzigen',
+  width: 'Breedte',
+  height: 'Hoogte',
   add_all_required_fields_to_continue: 'Voeg alle vereiste velden toe om door te gaan',
   uploaded_pdf_contains_form_fields_keep_or_remove_them: 'Geüploade PDF bevat formuliervelden. Behouden of verwijderen?',
   keep: 'Behouden',
@@ -1266,6 +1330,8 @@ const nl = {
   type_value: 'Typ waarde',
   equal: 'Gelijk aan',
   not_equal: 'Niet gelijk aan',
+  greater_than: 'Groter dan',
+  less_than: 'Kleiner dan',
   contains: 'Bevat',
   does_not_contain: 'Bevat niet',
   not_empty: 'Niet leeg',
@@ -1311,6 +1377,7 @@ const nl = {
   page: 'Pagina',
   draw_new_area: 'Nieuw gebied tekenen',
   copy_to_all_pages: 'Kopieer naar alle pag.',
+  more: 'Meer',
   add_option: 'Optie toevoegen',
   option: 'Optie',
   options: 'Opties',
@@ -1391,6 +1458,9 @@ const nl = {
   numbers_only: 'Alleen cijfers',
   letters_only: 'Alleen letters',
   regexp_validation: 'Regex validatie',
+  custom_validation: 'Aangepaste Validatie',
+  length_validation: 'Lengte Validatie',
+  number_range: 'Getalbereik',
   enter_pdf_password: 'Voer PDF-wachtwoord in',
   wrong_password: 'Onjuist wachtwoord',
   currency: 'Valuta',

app/javascript/template_builder/logo.vue

@@ -2,87 +2,20 @@
   <svg
     height="40"
     width="40"
-    version="1.1"
+    style="color: #e0753f"
+    viewBox="0 0 180 180"
     xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    viewBox="0 0 511.998 511.998"
-    xml:space="preserve"
   >
     <path
-      style="fill:#AA968C;"
+      fill="currentColor"
-      d="M503.999,247.999c0,128.13-111.033,240-248,240S8,376.129,8,247.999s111.033-224,248-224
+      d="M 178.224 72.09 c -0.296 -1.463 -0.627 -2.919 -0.996 -4.364 -0.293 -1.151 -0.616 -2.293 -0.956 -3.433 -0.301 -1.008 -0.612 -2.014 -0.95 -3.012 -0.531 -1.578 -1.113 -3.142 -1.735 -4.694 -0.216 -0.54 -0.433 -1.082 -0.661 -1.618 -0.195 -0.462 -0.399 -0.917 -0.601 -1.375 -0.262 -0.591 -0.53 -1.177 -0.804 -1.762 -0.074 -0.159 -0.151 -0.315 -0.226 -0.474 -0.209 -0.441 -0.422 -0.881 -0.638 -1.318 -0.076 -0.154 -0.153 -0.306 -0.229 -0.459 -0.236 -0.471 -0.477 -0.939 -0.721 -1.406 -0.053 -0.101 -0.105 -0.201 -0.158 -0.302 -1.143 -2.16 -2.367 -4.269 -3.68 -6.322 -0.116 -0.181 -0.237 -0.359 -0.355 -0.539 -0.094 -0.144 -0.189 -0.288 -0.284 -0.432 -0.284 -0.431 -0.57 -0.861 -0.862 -1.287 -0.112 -0.164 -0.225 -0.326 -0.338 -0.489 -0.193 -0.279 -0.382 -0.56 -0.579 -0.836 -0.089 -0.125 -0.182 -0.249 -0.273 -0.374 -0.13 -0.182 -0.264 -0.362 -0.395 -0.542 -0.277 -0.38 -0.556 -0.76 -0.838 -1.135 -0.15 -0.199 -0.303 -0.395 -0.454 -0.593 -0.21 -0.274 -0.417 -0.552 -0.63 -0.823 -0.055 -0.069 -0.111 -0.136 -0.166 -0.205 -0.482 -0.61 -0.971 -1.216 -1.47 -1.814 -0.129 -0.155 -0.262 -0.306 -0.392 -0.461 -0.402 -0.476 -0.808 -0.95 -1.22 -1.417 -0.186 -0.212 -0.375 -0.422 -0.563 -0.631 -0.384 -0.428 -0.773 -0.854 -1.167 -1.276 -0.176 -0.189 -0.351 -0.379 -0.529 -0.567 -0.564 -0.595 -1.134 -1.186 -1.716 -1.768 -1.091 -1.091 -2.207 -2.15 -3.346 -3.178 -1.016 -0.919 -2.05 -1.815 -3.103 -2.684 -0.772 -0.636 -1.557 -1.255 -2.348 -1.864 -3.465 -2.67 -7.112 -5.075 -10.927 -7.209 -2.869 -1.604 -5.83 -3.06 -8.883 -4.351 -2.443 -1.033 -4.922 -1.948 -7.428 -2.756 -8.879 -2.863 -18.13 -4.318 -27.605 -4.318 -3.19 0 -6.354 0.169 -9.488 0.496 -4.036 0.421 -8.019 1.114 -11.94 2.073 -1.732 0.423 -3.452 0.892 -5.157 1.42 -2.856 0.883 -5.673 1.912 -8.447 3.085 -2.645 1.118 -5.222 2.357 -7.729 3.711 -2.574 1.39 -5.073 2.901 -7.494 4.533 -1.195 0.805 -2.37 1.64 -3.527 2.503 -1.156 0.864 -2.292 1.756 -3.408 2.676 -0.553 0.456 -1.1 0.919 -1.643 1.389 -1.649 1.427 -3.252 2.92 -4.806 4.473 -2.582 2.582 -4.991 5.299 -7.222 8.138 -0.892 1.135 -1.756 2.292 -2.59 3.467 -0.417 0.588 -0.827 1.18 -1.23 1.778 -0.403 0.597 -0.798 1.199 -1.186 1.806 -0.388 0.607 -0.769 1.218 -1.143 1.835 -2.241 3.697 -4.216 7.562 -5.916 11.582 -1.095 2.589 -2.059 5.217 -2.901 7.877 -0.153 0.482 -0.3 0.965 -0.444 1.449 -0.339 1.14 -0.663 2.282 -0.956 3.433 -0.369 1.446 -0.7 2.901 -0.996 4.364 -1.034 5.121 -1.618 10.343 -1.749 15.637 -0.018 0.757 -0.028 1.514 -0.028 2.274 0 1.123 0.02 2.244 0.062 3.361 0.285 7.82 1.568 15.475 3.825 22.879 0.044 0.147 0.088 0.295 0.133 0.441 0.877 2.823 1.894 5.608 3.054 8.35 0.85 2.009 1.769 3.98 2.755 5.912 0.539 1.057 1.105 2.099 1.685 3.132 4.013 7.142 8.98 13.698 14.846 19.564 7.713 7.713 16.611 13.878 26.477 18.352 0.705 0.32 1.415 0.632 2.131 0.935 2.081 0.88 4.185 1.679 6.313 2.396 9.217 3.106 18.85 4.677 28.719 4.677 8.031 0 15.902 -1.047 23.522 -3.107 0.633 -0.172 1.266 -0.35 1.895 -0.535 0.757 -0.222 1.509 -0.456 2.26 -0.698 0.717 -0.232 1.431 -0.474 2.145 -0.723 1.752 -0.616 3.49 -1.281 5.211 -2.009 0.755 -0.319 1.503 -0.651 2.247 -0.989 1.237 -0.563 2.459 -1.15 3.664 -1.766 0.644 -0.328 1.283 -0.665 1.917 -1.009 1.654 -0.896 3.274 -1.848 4.865 -2.844 5.736 -3.591 11.06 -7.827 15.912 -12.679 0.775 -0.775 1.534 -1.562 2.278 -2.36 5.204 -5.59 9.636 -11.754 13.246 -18.417 0.343 -0.634 0.68 -1.274 1.009 -1.917 0.482 -0.944 0.943 -1.9 1.392 -2.863 0.471 -1.007 0.928 -2.021 1.364 -3.049 1.22 -2.886 2.281 -5.82 3.187 -8.793 0.559 -1.833 1.056 -3.68 1.494 -5.542 0.108 -0.458 0.211 -0.916 0.312 -1.376 0.194 -0.883 0.373 -1.77 0.539 -2.659 1.02 -5.455 1.542 -11.02 1.542 -16.663 0 -6.074 -0.595 -12.058 -1.776 -17.911 z m -161.733 19.614 c -1.118 -56.662 44.604 -74.877 60.998 -67.647 2.187 0.965 4.732 2.431 7.042 2.96 5.295 1.213 13.432 -3.113 13.521 6.273 0.078 8.156 -3.389 13.108 -10.797 16.177 -7.539 3.124 -14.777 9.181 -19.95 15.493 -21.487 26.216 -31.231 68.556 -7.565 94.296 -13.679 -5.545 -42.418 -25.467 -43.248 -67.552 z m 91.109 72.619 c -0.053 0.008 -4.171 0.775 -4.171 0.775 0 0 -15.862 -22.957 -23.509 -21.719 11.291 16.04 12.649 22.625 12.649 22.625 -0.053 0.001 -0.107 0.001 -0.161 0.003 -51.831 2.131 -42.785 -64.026 -28.246 -86.502 -1.555 13.073 8.878 39.992 39.034 44.1 9.495 1.293 32.302 -3.275 41.015 -11.38 0.098 1.825 0.163 3.85 0.159 6.013 -0.046 23.538 -13.47 42.743 -36.77 46.085 z m 30.575 -15.708 c 9.647 -9.263 12.869 -27.779 9.103 -44.137 -4.608 -20.011 -28.861 -32.383 -40.744 -35.564 5.766 -8.089 27.908 -14.274 39.567 5.363 -5.172 -10.519 -13.556 -23.023 -1.732 -33.128 12.411 13.329 19.411 29.94 20.161 48.7 0.75 18.753 -6.64 41.768 -26.355 58.765 z"
-    S503.999,119.869,503.999,247.999z"
-    />
-    <path
-      style="fill:#AA968C;"
-      d="M255.999,23.999C119.033,23.999,8,119.868,8,247.999c0,24.631,4.138,48.647,11.74,71.397
-    c25.518,34.29,66.232,56.602,112.26,56.602c53.893,0,100.6-30.495,124-75.13c23.4,44.636,70.107,75.13,124,75.13
-    c46.028,0,86.743-22.312,112.26-56.602c7.602-22.75,11.74-46.767,11.74-71.397C503.999,119.868,392.966,23.999,255.999,23.999z"
     />
     <circle
-      style="fill:#C8AF9B;"
+      fill="currentColor"
-      cx="256"
+      cx="71.927"
-      cy="351.999"
+      cy="32.004"
-      r="136"
+      r="2.829"
     />
-    <g>
-      <circle
-        style="fill:#464655;"
-        cx="132"
-        cy="203.999"
-        r="28"
-      />
-      <circle
-        style="fill:#464655;"
-        cx="380"
-        cy="203.999"
-        r="28"
-      />
-      <path
-        style="fill:#464655;"
-        d="M269.949,284.516c-7.672,10.741-20.227,10.741-27.899,0l-12.101-16.941
-      c-7.672-10.741-3.15-19.53,10.05-19.53h32c13.2,0,17.723,8.788,10.05,19.53L269.949,284.516z"
-      />
-    </g>
-    <path
-      style="fill:#AA968C;"
-      d="M 350.964 399.998 C 316.628 399.998 299.021 351.998 255.882 351.998 C 212.742 351.998 195.135 399.998 160.801 399.998 C 145.395 399.998 131.723 394.147 120.621 374.798 C 131.595 439.03 187.893 487.998 255.881 487.998 C 323.868 487.998 380.168 439.03 391.14 374.798 C 380.04 394.148 366.368 399.998 350.964 399.998 Z"
-    />
-    <g>
-      <path
-        style="fill:#8C7873;"
-        d="M32,423.998c-3.172,0-6.18-1.906-7.43-5.031c-1.641-4.105,0.359-8.758,4.461-10.402l160.008-64
-      c4.062-1.617,8.758,0.352,10.398,4.457s-0.359,8.758-4.461,10.402l-160.008,64C34,423.811,32.992,423.998,32,423.998z"
-      />
-      <path
-        style="fill:#8C7873;"
-        d="M15.992,375.995c-3.547,0-6.781-2.375-7.727-5.965c-1.125-4.273,1.422-8.648,5.695-9.773l152-40
-      c4.289-1.121,8.648,1.426,9.773,5.703c1.125,4.273-1.422,8.648-5.695,9.773l-152,40C17.351,375.913,16.672,375.995,15.992,375.995z
-      "
-      />
-      <path
-        style="fill:#8C7873;"
-        d="M7.992,335.995c-3.812,0-7.187-2.73-7.867-6.609c-0.773-4.352,2.133-8.5,6.484-9.27l136-24
-      c4.328-0.77,8.508,2.141,9.266,6.488c0.773,4.352-2.133,8.5-6.484,9.27l-136,24C8.922,335.956,8.453,335.995,7.992,335.995z"
-      />
-      <path
-        style="fill:#8C7873;"
-        d="M480,423.998c3.172,0,6.18-1.906,7.43-5.031c1.641-4.105-0.359-8.758-4.461-10.402l-160.008-64
-      c-4.063-1.617-8.758,0.352-10.398,4.457s0.359,8.758,4.461,10.402l160.008,64C478,423.811,479.007,423.998,480,423.998z"
-      />
-      <path
-        style="fill:#8C7873;"
-        d="M496.007,375.995c3.547,0,6.781-2.375,7.727-5.965c1.125-4.273-1.422-8.648-5.695-9.773l-152-40
-      c-4.289-1.121-8.648,1.426-9.773,5.703c-1.125,4.273,1.422,8.648,5.695,9.773l152,40
-      C494.648,375.913,495.328,375.995,496.007,375.995z"
-      />
-      <path
-        style="fill:#8C7873;"
-        d="M504.007,335.995c3.813,0,7.188-2.73,7.867-6.609c0.773-4.352-2.133-8.5-6.484-9.27l-136-24
-      c-4.328-0.77-8.508,2.141-9.266,6.488c-0.773,4.352,2.133,8.5,6.484,9.27l136,24C503.078,335.956,503.546,335.995,504.007,335.995z
-      "
-      />
-    </g>
   </svg>
 </template>
 

app/javascript/template_builder/page.vue

@@ -29,7 +29,7 @@
         :is-drag="isDrag"
         @move="onSelectionBoxMove"
         @contextmenu="openSelectionContextMenu"
-        @close-context-menu="closeSelectionContextMenu"
+        @close-context-menu="closeContextMenu"
       />
       <FieldArea
         v-for="(item, i) in areas"
@@ -48,6 +48,7 @@
         :default-submitters="defaultSubmitters"
         :max-page="totalPages - 1"
         :is-select-mode="isSelectMode"
+        :is-mobile="isMobile"
         @start-resize="resizeDirection = $event"
         @stop-resize="resizeDirection = null"
         @remove="$emit('remove-area', item.area)"
@@ -74,29 +75,39 @@
         class="absolute outline-dashed outline-gray-400 pointer-events-none z-20"
         :style="selectionRectStyle"
       />
-      <ContextMenu
+      <FieldContextMenu
-        v-if="contextMenu"
+        v-if="contextMenu && contextMenu.field"
         :context-menu="contextMenu"
         :field="contextMenu.field"
+        :with-signature-id="withSignatureId"
+        :with-prefillable="withPrefillable"
         :editable="editable"
-        :with-fields-detection="withFieldsDetection"
+        :default-field="defaultFieldsIndex[contextMenu.field.name]"
         @copy="handleCopy"
         @delete="handleDelete"
-        @paste="handlePaste"
-        @autodetect-fields="handleAutodetectFields"
         @close="closeContextMenu"
+        @set-draw="$emit('set-draw', $event)"
+        @scroll-to="$emit('scroll-to', $event)"
+        @save="save"
+        @add-custom-field="$emit('add-custom-field', $event)"
       />
-      <ContextMenu
+      <SelectionContextMenu
-        v-if="selectionContextMenu"
+        v-else-if="contextMenu && contextMenu.areas"
-        :context-menu="selectionContextMenu"
+        :context-menu="contextMenu"
         :editable="editable"
-        :is-multi-selection="true"
-        :selected-areas="selectedAreasRef.value"
         :template="template"
         @copy="handleSelectionCopy"
         @delete="handleSelectionDelete"
-        @align="handleSelectionAlign"
+        @close="closeContextMenu"
-        @close="closeSelectionContextMenu"
+      />
+      <PageContextMenu
+        v-else-if="contextMenu && !contextMenu.field && !contextMenu.areas"
+        :context-menu="contextMenu"
+        :editable="editable"
+        :with-fields-detection="withFieldsDetection"
+        @paste="handlePaste"
+        @autodetect-fields="handleAutodetectFields"
+        @close="closeContextMenu"
       />
     </div>
     <div
@@ -119,17 +130,21 @@
 
 <script>
 import FieldArea from './area'
-import ContextMenu from './context_menu'
+import FieldContextMenu from './field_context_menu'
+import SelectionContextMenu from './selection_context_menu'
+import PageContextMenu from './page_context_menu'
 import SelectionBox from './selection_box'
 
 export default {
   name: 'TemplatePage',
   components: {
     FieldArea,
-    ContextMenu,
+    FieldContextMenu,
+    SelectionContextMenu,
+    PageContextMenu,
     SelectionBox
   },
-  inject: ['fieldTypes', 'defaultDrawFieldType', 'fieldsDragFieldRef', 'customDragFieldRef', 'assignDropAreaSize', 'selectedAreasRef', 'template', 'isSelectModeRef'],
+  inject: ['fieldTypes', 'defaultDrawFieldType', 'fieldsDragFieldRef', 'customDragFieldRef', 'assignDropAreaSize', 'selectedAreasRef', 'template', 'isSelectModeRef', 'save'],
   props: {
     image: {
       type: Object,
@@ -140,6 +155,11 @@ export default {
       required: false,
       default: null
     },
+    isMobile: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     withSignatureId: {
       type: Boolean,
       required: false,
@@ -228,7 +248,7 @@ export default {
       default: false
     }
   },
-  emits: ['draw', 'drop-field', 'remove-area', 'copy-field', 'paste-field', 'scroll-to', 'copy-selected-areas', 'delete-selected-areas', 'align-selected-areas', 'autodetect-fields', 'add-custom-field'],
+  emits: ['draw', 'drop-field', 'remove-area', 'copy-field', 'paste-field', 'scroll-to', 'copy-selected-areas', 'delete-selected-areas', 'autodetect-fields', 'add-custom-field', 'set-draw'],
   data () {
     return {
       areaRefs: [],
@@ -236,13 +256,12 @@ export default {
       resizeDirection: null,
       newAreas: [],
       contextMenu: null,
-      selectionRect: null,
+      selectionRect: null
-      selectionContextMenu: null
     }
   },
   computed: {
     isSelectMode () {
-      return this.isSelectModeRef.value && !this.drawFieldType && this.editable && !this.drawField
+      return this.isSelectModeRef.value && !this.drawFieldType && this.editable && !this.drawField && !this.drawCustomField
     },
     pageSelectedAreas () {
       if (!this.selectedAreasRef.value) return []
@@ -305,11 +324,6 @@ export default {
         return 'text'
       }
     },
-    isMobile () {
-      const isMobileSafariIos = 'ontouchstart' in window && navigator.maxTouchPoints > 0 && /AppleWebKit/i.test(navigator.userAgent)
-
-      return isMobileSafariIos || /android|iphone|ipad/i.test(navigator.userAgent)
-    },
     resizeDirectionClasses () {
       return {
         nwse: 'cursor-nwse-resize',
@@ -399,29 +413,32 @@ export default {
       }
     },
     openSelectionContextMenu (event) {
+      if (!this.editable) {
+        return
+      }
+
+      event.preventDefault()
+      event.stopPropagation()
+
       const rect = this.$el.getBoundingClientRect()
 
-      this.selectionContextMenu = {
+      this.contextMenu = {
         x: event.clientX,
         y: event.clientY,
         relativeX: (event.clientX - rect.left) / rect.width,
-        relativeY: (event.clientY - rect.top) / rect.height
+        relativeY: (event.clientY - rect.top) / rect.height,
+        areas: this.selectedAreasRef.value
       }
     },
-    closeSelectionContextMenu () {
-      this.selectionContextMenu = null
-    },
     handleSelectionCopy () {
       this.$emit('copy-selected-areas')
-      this.closeSelectionContextMenu()
+
+      this.closeContextMenu()
     },
     handleSelectionDelete () {
       this.$emit('delete-selected-areas')
-      this.closeSelectionContextMenu()
+
-    },
+      this.closeContextMenu()
-    handleSelectionAlign (direction) {
-      this.$emit('align-selected-areas', direction)
-      this.closeSelectionContextMenu()
     },
     closeContextMenu () {
       this.contextMenu = null

app/javascript/template_builder/page_context_menu.vue

@@ -0,0 +1,159 @@
+<template>
+  <div
+    ref="menu"
+    class="fixed z-50 p-1 bg-white shadow-lg rounded-lg border border-neutral-200 cursor-default"
+    style="min-width: 170px"
+    :style="menuStyle"
+    @mousedown.stop
+    @pointerdown.stop
+  >
+    <button
+      class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between text-sm"
+      :class="!hasClipboardData ? 'opacity-50 cursor-not-allowed' : 'hover:bg-neutral-100'"
+      :disabled="!hasClipboardData"
+      @click.stop="!hasClipboardData ? null : $emit('paste')"
+    >
+      <span class="flex items-center space-x-2">
+        <IconClipboard class="w-4 h-4" />
+        <span>{{ t('paste') }}</span>
+      </span>
+      <span class="text-xs text-base-content/60 ml-4">{{ isMac ? '⌘V' : 'Ctrl+V' }}</span>
+    </button>
+    <button
+      class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between text-sm"
+      @click.stop="handleToggleSelectMode"
+    >
+      <span class="flex items-center space-x-2">
+        <IconClick
+          v-if="!isSelectModeRef.value"
+          class="w-4 h-4"
+        />
+        <IconNewSection
+          v-else
+          class="w-4 h-4"
+        />
+        <span>{{ isSelectModeRef.value ? t('draw_fields') : t('select_fields') }}</span>
+      </span>
+      <span class="text-xs text-base-content/60 ml-4">Tab</span>
+    </button>
+    <hr
+      v-if="showAutodetectFields"
+      class="my-1 border-neutral-200"
+    >
+    <button
+      v-if="showAutodetectFields"
+      class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
+      @click.stop="$emit('autodetect-fields')"
+    >
+      <IconSparkles class="w-4 h-4" />
+      <span>{{ t('autodetect_fields') }}</span>
+    </button>
+  </div>
+</template>
+
+<script>
+import { IconClipboard, IconClick, IconNewSection, IconSparkles } from '@tabler/icons-vue'
+
+export default {
+  name: 'PageContextMenu',
+  components: {
+    IconClipboard,
+    IconClick,
+    IconNewSection,
+    IconSparkles
+  },
+  inject: ['t', 'isSelectModeRef'],
+  props: {
+    contextMenu: {
+      type: Object,
+      default: null,
+      required: true
+    },
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    withFieldsDetection: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['paste', 'close', 'autodetect-fields'],
+  computed: {
+    isMac () {
+      return (navigator.userAgentData?.platform || navigator.platform)?.toLowerCase()?.includes('mac')
+    },
+    hasClipboardData () {
+      try {
+        const clipboard = localStorage.getItem('docuseal_clipboard')
+
+        if (clipboard) {
+          const data = JSON.parse(clipboard)
+
+          return Date.now() - data.timestamp < 3600000
+        }
+
+        return false
+      } catch {
+        return false
+      }
+    },
+    menuStyle () {
+      return {
+        left: this.contextMenu.x + 'px',
+        top: this.contextMenu.y + 'px'
+      }
+    },
+    showAutodetectFields () {
+      return this.withFieldsDetection && this.editable
+    }
+  },
+  mounted () {
+    document.addEventListener('keydown', this.onKeyDown)
+    document.addEventListener('mousedown', this.handleClickOutside)
+
+    this.$nextTick(() => {
+      this.checkMenuPosition()
+    })
+  },
+  beforeUnmount () {
+    document.removeEventListener('keydown', this.onKeyDown)
+    document.removeEventListener('mousedown', this.handleClickOutside)
+  },
+  methods: {
+    checkMenuPosition () {
+      if (this.$refs.menu) {
+        const rect = this.$refs.menu.getBoundingClientRect()
+        const overflow = rect.bottom - window.innerHeight
+
+        if (overflow > 0) {
+          this.contextMenu.y = this.contextMenu.y - overflow - 4
+        }
+      }
+    },
+    onKeyDown (event) {
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        event.stopPropagation()
+
+        this.$emit('close')
+      } else if ((event.ctrlKey || event.metaKey) && event.key === 'v' && this.hasClipboardData) {
+        event.preventDefault()
+        event.stopPropagation()
+
+        this.$emit('paste')
+      }
+    },
+    handleClickOutside (event) {
+      if (this.$refs.menu && !this.$refs.menu.contains(event.target)) {
+        this.$emit('close')
+      }
+    },
+    handleToggleSelectMode () {
+      this.isSelectModeRef.value = !this.isSelectModeRef.value
+
+      this.$emit('close')
+    }
+  }
+}
+</script>

app/javascript/template_builder/payment_settings.vue

@@ -22,7 +22,7 @@
     >
       <div
         v-if="!('price_id' in field.preferences) && !('payment_link_id' in field.preferences)"
-        class="py-1.5 px-1 relative"
+        class="field-settings-currency py-1.5 px-1 relative"
         @click.stop
       >
         <select
@@ -48,7 +48,7 @@
         </label>
       </div>
       <div
-        class="py-1.5 px-1 relative"
+        class="field-settings-price py-1.5 px-1 relative"
         @click.stop
       >
         <input
@@ -121,7 +121,7 @@
       </div>
       <div
         v-if="!isConnected || isOauthSuccess"
-        class="py-1.5 px-1 relative"
+        class="field-settings-stripe-connect py-1.5 px-1 relative"
         @click.stop
       >
         <div
@@ -203,7 +203,7 @@
         >{{ t('learn_more') }}</a>
       </div>
       <li
-        class="mb-1"
+        class="field-settings-formula mb-1"
       >
         <label
           class="label-text cursor-pointer text-center w-full flex items-center"
@@ -218,7 +218,7 @@
         </label>
       </li>
       <hr>
-      <li>
+      <li class="field-settings-description">
         <label
           class="label-text cursor-pointer text-center w-full flex items-center"
           @click="$emit('click-description')"
@@ -233,7 +233,7 @@
       </li>
       <li
         v-if="withCondition"
-        class="mt-1"
+        class="field-settings-condition mt-1"
       >
         <label
           class="label-text cursor-pointer text-center w-full flex items-center"
@@ -251,7 +251,10 @@
         v-if="withCustomFields"
         class="pb-0.5 mt-0.5"
       >
-      <li v-if="withCustomFields">
+      <li
+        v-if="withCustomFields"
+        class="field-settings-save-as-custom-field"
+      >
         <a
           href="#"
           class="text-sm py-1 px-2"

app/javascript/template_builder/preview.vue

@@ -119,6 +119,7 @@
       <ConditionsModal
         :item="item"
         :build-default-name="buildDefaultName"
+        @save="$emit('change')"
         @close="isShowConditionsModal = false"
       />
     </Teleport>
@@ -145,7 +146,7 @@ export default {
     GoogleDriveDocumentSettings,
     IconSortDescending2
   },
-  inject: ['t'],
+  inject: ['t', 'getFieldTypeIndex'],
   props: {
     item: {
       type: Object,

app/javascript/template_builder/selection_context_menu.vue

@@ -0,0 +1,348 @@
+<template>
+  <div>
+    <div
+      v-if="!isShowFontModal && !isShowConditionsModal"
+      ref="menu"
+      class="fixed z-50 p-1 bg-white shadow-lg rounded-lg border border-neutral-200 cursor-default"
+      style="min-width: 170px"
+      :style="menuStyle"
+      @mousedown.stop
+      @pointerdown.stop
+    >
+      <ContextSubmenu
+        :icon="IconLayoutAlignMiddle"
+        :label="t('align')"
+      >
+        <button
+          class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
+          @click.stop="alignSelectedAreas('left')"
+        >
+          <IconLayoutAlignLeft class="w-4 h-4" />
+          <span>{{ t('align_left') }}</span>
+        </button>
+        <button
+          class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
+          @click.stop="alignSelectedAreas('right')"
+        >
+          <IconLayoutAlignRight class="w-4 h-4" />
+          <span>{{ t('align_right') }}</span>
+        </button>
+        <button
+          class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
+          @click.stop="alignSelectedAreas('top')"
+        >
+          <IconLayoutAlignTop class="w-4 h-4" />
+          <span>{{ t('align_top') }}</span>
+        </button>
+        <button
+          class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
+          @click.stop="alignSelectedAreas('bottom')"
+        >
+          <IconLayoutAlignBottom class="w-4 h-4" />
+          <span>{{ t('align_bottom') }}</span>
+        </button>
+      </ContextSubmenu>
+      <ContextSubmenu
+        :icon="IconAspectRatio"
+        :label="t('resize')"
+      >
+        <button
+          class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
+          @click.stop="resizeSelectedAreas('width')"
+        >
+          <IconArrowsHorizontal class="w-4 h-4" />
+          <span>{{ t('width') }}</span>
+        </button>
+        <button
+          class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
+          @click.stop="resizeSelectedAreas('height')"
+        >
+          <IconArrowsVertical class="w-4 h-4" />
+          <span>{{ t('height') }}</span>
+        </button>
+      </ContextSubmenu>
+      <hr
+        v-if="showFont || showCondition"
+        class="my-1 border-neutral-200"
+      >
+      <button
+        v-if="showFont"
+        class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
+        @click.stop="openFontModal"
+      >
+        <IconTypography class="w-4 h-4" />
+        <span>{{ t('font') }}</span>
+      </button>
+      <button
+        v-if="showCondition"
+        class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
+        @click.stop="openConditionModal"
+      >
+        <IconRouteAltLeft class="w-4 h-4" />
+        <span>{{ t('condition') }}</span>
+      </button>
+      <hr class="my-1 border-neutral-200">
+      <button
+        class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between text-sm"
+        @click.stop="$emit('copy')"
+      >
+        <span class="flex items-center space-x-2">
+          <IconCopy class="w-4 h-4" />
+          <span>{{ t('copy') }}</span>
+        </span>
+        <span class="text-xs text-base-content/60 ml-4">{{ isMac ? '⌘C' : 'Ctrl+C' }}</span>
+      </button>
+      <button
+        class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between text-sm text-red-600"
+        @click.stop="$emit('delete')"
+      >
+        <span class="flex items-center space-x-2">
+          <IconTrashX class="w-4 h-4" />
+          <span>{{ t('remove') }}</span>
+        </span>
+        <span class="text-xs text-base-content/60 ml-4">Del</span>
+      </button>
+    </div>
+    <Teleport
+      v-if="isShowFontModal"
+      :to="modalContainerEl"
+    >
+      <FontModal
+        :field="multiSelectField"
+        :area="contextMenu.area"
+        :editable="editable"
+        :build-default-name="buildDefaultName"
+        @save="handleSaveMultiSelectFontModal"
+        @close="closeModal"
+      />
+    </Teleport>
+    <Teleport
+      v-if="isShowConditionsModal"
+      :to="modalContainerEl"
+    >
+      <ConditionsModal
+        :item="multiSelectField"
+        :build-default-name="buildDefaultName"
+        :exclude-field-uuids="selectedFields.map(f => f.uuid)"
+        @save="handleSaveMultiSelectConditionsModal"
+        @close="closeModal"
+      />
+    </Teleport>
+  </div>
+</template>
+
+<script>
+import { IconCopy, IconTrashX, IconTypography, IconRouteAltLeft, IconLayoutAlignLeft, IconLayoutAlignRight, IconLayoutAlignTop, IconLayoutAlignBottom, IconLayoutAlignMiddle, IconAspectRatio, IconArrowsHorizontal, IconArrowsVertical } from '@tabler/icons-vue'
+import FontModal from './font_modal'
+import ConditionsModal from './conditions_modal'
+import ContextSubmenu from './field_context_submenu'
+import Field from './field'
+import FieldType from './field_type'
+
+export default {
+  name: 'SelectionContextMenu',
+  components: {
+    IconCopy,
+    IconTrashX,
+    IconTypography,
+    IconRouteAltLeft,
+    IconLayoutAlignLeft,
+    IconLayoutAlignRight,
+    IconLayoutAlignTop,
+    IconLayoutAlignBottom,
+    FontModal,
+    IconArrowsHorizontal,
+    IconArrowsVertical,
+    ConditionsModal,
+    ContextSubmenu
+  },
+  inject: ['t', 'save', 'selectedAreasRef', 'getFieldTypeIndex'],
+  props: {
+    contextMenu: {
+      type: Object,
+      required: true
+    },
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    template: {
+      type: Object,
+      required: true
+    },
+    withCondition: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ['copy', 'delete', 'close'],
+  data () {
+    return {
+      isShowFontModal: false,
+      isShowConditionsModal: false,
+      multiSelectField: null
+    }
+  },
+  computed: {
+    modalContainerEl () {
+      return this.$el.getRootNode().querySelector('#docuseal_modal_container')
+    },
+    selectedFields () {
+      return this.selectedAreasRef.value.map((area) => {
+        return this.template.fields.find((f) => f.areas?.includes(area))
+      }).filter(Boolean)
+    },
+    isMac () {
+      return (navigator.userAgentData?.platform || navigator.platform)?.toLowerCase()?.includes('mac')
+    },
+    menuStyle () {
+      return {
+        left: this.contextMenu.x + 'px',
+        top: this.contextMenu.y + 'px'
+      }
+    },
+    showFont () {
+      return true
+    },
+    showCondition () {
+      return this.withCondition
+    },
+    fieldNames: FieldType.computed.fieldNames,
+    fieldLabels: FieldType.computed.fieldLabels
+  },
+  mounted () {
+    document.addEventListener('keydown', this.onKeyDown)
+    document.addEventListener('mousedown', this.handleClickOutside)
+
+    this.$nextTick(() => this.checkMenuPosition())
+  },
+  beforeUnmount () {
+    document.removeEventListener('keydown', this.onKeyDown)
+    document.removeEventListener('mousedown', this.handleClickOutside)
+  },
+  methods: {
+    IconLayoutAlignMiddle,
+    IconAspectRatio,
+    buildDefaultName: Field.methods.buildDefaultName,
+    checkMenuPosition () {
+      if (this.$refs.menu) {
+        const rect = this.$refs.menu.getBoundingClientRect()
+        const overflow = rect.bottom - window.innerHeight
+
+        if (overflow > 0) {
+          this.contextMenu.y = this.contextMenu.y - overflow - 4
+        }
+      }
+    },
+    onKeyDown (event) {
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        event.stopPropagation()
+
+        this.$emit('close')
+      }
+    },
+    handleClickOutside (event) {
+      if (this.$refs.menu && !this.$refs.menu.contains(event.target)) {
+        this.$emit('close')
+      }
+    },
+    openFontModal () {
+      this.multiSelectField = {
+        name: this.t('fields_selected').replace('{count}', this.selectedFields.length),
+        preferences: {}
+      }
+
+      const preferencesStrings = this.selectedFields.map((f) => JSON.stringify(f.preferences || {}))
+
+      if (preferencesStrings.every((s) => s === preferencesStrings[0])) {
+        this.multiSelectField.preferences = JSON.parse(preferencesStrings[0])
+      }
+
+      this.isShowFontModal = true
+    },
+    openConditionModal () {
+      this.multiSelectField = {
+        name: this.t('fields_selected').replace('{count}', this.selectedFields.length),
+        conditions: []
+      }
+
+      const conditionStrings = this.selectedFields.map((f) => JSON.stringify(f.conditions || []))
+
+      if (conditionStrings.every((s) => s === conditionStrings[0])) {
+        this.multiSelectField.conditions = JSON.parse(conditionStrings[0])
+      }
+
+      this.isShowConditionsModal = true
+    },
+    closeModal () {
+      this.isShowFontModal = false
+      this.isShowConditionsModal = false
+      this.multiSelectField = null
+
+      this.$emit('close')
+    },
+    alignSelectedAreas (direction) {
+      const areas = this.selectedAreasRef.value
+
+      let targetValue
+
+      if (direction === 'left') {
+        targetValue = Math.min(...areas.map(a => a.x))
+        areas.forEach((area) => { area.x = targetValue })
+      } else if (direction === 'right') {
+        targetValue = Math.max(...areas.map(a => a.x + a.w))
+        areas.forEach((area) => { area.x = targetValue - area.w })
+      } else if (direction === 'top') {
+        targetValue = Math.min(...areas.map(a => a.y))
+        areas.forEach((area) => { area.y = targetValue })
+      } else if (direction === 'bottom') {
+        targetValue = Math.max(...areas.map(a => a.y + a.h))
+        areas.forEach((area) => { area.y = targetValue - area.h })
+      }
+
+      this.save()
+
+      this.$emit('close')
+    },
+    resizeSelectedAreas (dimension) {
+      const areas = this.selectedAreasRef.value
+
+      const values = areas.map(a => dimension === 'width' ? a.w : a.h).sort((a, b) => a - b)
+      const medianValue = values[Math.floor(values.length / 2)]
+
+      if (dimension === 'width') {
+        areas.forEach((area) => { area.w = medianValue })
+      } else if (dimension === 'height') {
+        areas.forEach((area) => {
+          const diff = medianValue - area.h
+          area.y = area.y - diff
+          area.h = medianValue
+        })
+      }
+
+      this.save()
+
+      this.$emit('close')
+    },
+    handleSaveMultiSelectFontModal () {
+      this.selectedFields.forEach((field) => {
+        field.preferences = { ...field.preferences, ...this.multiSelectField.preferences }
+      })
+
+      this.save()
+
+      this.closeModal()
+    },
+    handleSaveMultiSelectConditionsModal () {
+      this.selectedFields.forEach((field) => {
+        field.conditions = JSON.parse(JSON.stringify(this.multiSelectField.conditions))
+      })
+
+      this.save()
+
+      this.closeModal()
+    }
+  }
+}
+</script>

app/javascript/template_builder/upload.vue

@@ -290,7 +290,11 @@ export default {
         if (resp.ok) {
           resp.json().then((data) => {
             this.$emit('success', data)
+
+            if (this.$refs.input) {
               this.$refs.input.value = ''
+            }
+
             this.isLoading = false
           })
         } else if (resp.status === 422) {

app/jobs/process_submitter_completion_job.rb

@@ -164,11 +164,13 @@ class ProcessSubmitterCompletionJob
     next_submitter_items =
       if submission.template_submitters.any? { |s| s['order'] }
         submitter_groups =
-          submission.template_submitters.group_by.with_index { |s, index| s['order'] || index }
+          submission.template_submitters
+                    .group_by.with_index { |s, index| s['order'] || index }
+                    .sort_by(&:first).pluck(1)
 
-        current_group_index = submitter_groups.find { |_, group| group.any? { |s| s['uuid'] == submitter.uuid } }&.first
+        current_group_index = submitter_groups.index { |group| group.any? { |s| s['uuid'] == submitter.uuid } }
 
-        if submitter_groups[current_group_index + 1] &&
+        if current_group_index && submitter_groups[current_group_index + 1] &&
            submitters_index.values_at(*submitter_groups[current_group_index].pluck('uuid'))
                            .compact.all?(&:completed_at?)
           submitter_groups[current_group_index + 1]

app/jobs/send_test_webhook_request_job.rb

@@ -26,7 +26,7 @@ class SendTestWebhookRequestJob
         Addressable::URI.parse(webhook_url.url).normalize
       end
 
-      raise HttpsError, 'Only HTTPS is allowed.' if uri.scheme != 'https'
+      raise HttpsError, 'Only HTTPS is allowed.' if uri.scheme != 'https' || [443, nil].exclude?(uri.port)
       raise LocalhostError, "Can't send to localhost." if uri.host.in?(SendWebhookRequest::LOCALHOSTS)
     end
 

app/mailers/submitter_mailer.rb

@@ -14,12 +14,7 @@ class SubmitterMailer < ApplicationMailer
       @email_message = submitter.account.email_messages.find_by(uuid: submitter.preferences['email_message_uuid'])
     end
 
-    template_submitters_index =
+    template_submitters_index = @email_message.blank? ? build_submitter_preferences_index(@submitter) : {}
-      if @email_message.blank?
-        build_submitter_preferences_index(@submitter)
-      else
-        {}
-      end
 
     @body = @email_message&.body.presence ||
             template_submitters_index.dig(@submitter.uuid, 'request_email_body').presence ||
@@ -34,7 +29,9 @@ class SubmitterMailer < ApplicationMailer
 
     assign_message_metadata('submitter_invitation', @submitter)
 
-    reply_to = build_submitter_reply_to(@submitter)
+    reply_to = build_submitter_reply_to(@submitter, email_config: @email_config)
+
+    maybe_set_custom_domain(@submitter)
 
     I18n.with_locale(@current_account.locale) do
       subject = build_invite_subject(@subject, @email_config, submitter)
@@ -133,6 +130,8 @@ class SubmitterMailer < ApplicationMailer
     assign_message_metadata('submitter_documents_copy', @submitter)
     reply_to = build_submitter_reply_to(submitter, email_config: @email_config, documents_copy_email: true)
 
+    maybe_set_custom_domain(@submitter)
+
     I18n.with_locale(@current_account.locale) do
       subject =
         @subject.present? ? ReplaceEmailVariables.call(@subject, submitter:) : I18n.t(:your_document_copy)
@@ -262,4 +261,10 @@ class SubmitterMailer < ApplicationMailer
   def fetch_config_email_body(email_config, _submitter = nil)
     email_config ? email_config.value['body'].presence : nil
   end
+
+  def maybe_set_custom_domain(submitter)
+    if Docuseal.multitenant? && (config = AccountConfig.find_by(account_id: submitter.account_id, key: :custom_domain))
+      @custom_domain = config.value
+    end
+  end
 end

app/models/account_config.rb

@@ -49,6 +49,7 @@ class AccountConfig < ApplicationRecord
   WITH_AUDIT_VALUES_KEY = 'with_audit_values'
   WITH_AUDIT_SENDER_KEY = 'with_audit_sender'
   WITH_SUBMITTER_TIMEZONE_KEY = 'with_submitter_timezone'
+  WITH_TIMESTAMP_SECONDS_KEY = 'with_timestamp_seconds'
   REQUIRE_SIGNING_REASON_KEY = 'require_signing_reason'
   REUSE_SIGNATURE_KEY = 'reuse_signature'
   WITH_FIELD_LABELS_KEY = 'with_field_labels'
@@ -57,6 +58,13 @@ class AccountConfig < ApplicationRecord
   TEMPLATE_CUSTOM_FIELDS_KEY = 'template_custom_fields'
   POLICY_LINKS_KEY = 'policy_links'
 
+  EMAIL_VARIABLES = {
+    SUBMITTER_INVITATION_EMAIL_KEY => %w[template.name submitter.link account.name].freeze,
+    SUBMITTER_COMPLETED_EMAIL_KEY => %w[template.name submission.submitters submission.link].freeze,
+    SUBMITTER_INVITATION_REMINDER_EMAIL_KEY => %w[template.name submitter.link account.name].freeze,
+    SUBMITTER_DOCUMENTS_COPY_EMAIL_KEY => %w[template.name documents.link account.name].freeze
+  }.freeze
+
   DEFAULT_VALUES = {
     SUBMITTER_INVITATION_EMAIL_KEY => lambda {
       {

app/views/email_smtp_settings/index.html.erb

@@ -22,7 +22,7 @@
           </div>
           <div class="form-control">
             <%= ff.label :password, 'Password', class: 'label' %>
-            <%= ff.password_field :password, value: value['password'], class: 'base-input' %>
+            <%= ff.password_field :password, class: 'base-input', required: value['password'].present?, placeholder: value['password'].present? ? '*************' : '' %>
           </div>
         </div>
         <div class="grid md:grid-cols-2 gap-4">
@@ -39,7 +39,7 @@
           <div class="form-control">
             <%= ff.label :security_label, 'SMTP Security', class: 'label' %>
             <div class="flex items-center space-x-6">
-              <% [%w[Auto none], %w[SSL ssl], %w[TLS tls], %w[Noverify noverify]].each do |(label, val)| %>
+              <% [%w[STARTTLS none], %w[TLS tls], %w[SSL ssl], %w[Noverify noverify]].each do |(label, val)| %>
                 <%= ff.label :security, value: val, for: "#{val}_radio", class: 'label' do %>
                   <%= ff.radio_button :security, val, checked: (value['security'].blank? && val == 'none') || value['security'] == val, id: "#{val}_radio", class: 'base-radio mr-2' %>
                   <%= label %>

app/views/icons/_arrow_back_up.html.erb

@@ -0,0 +1,5 @@
+<svg class="<%= local_assigns[:class] %>" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <path d="M9 14l-4 -4l4 -4" />
+  <path d="M5 10h11a4 4 0 1 1 0 8h-1" />
+</svg>

app/views/icons/_arrow_forward_up.html.erb

@@ -0,0 +1,5 @@
+<svg class="<%= local_assigns[:class] %>" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <path d="M15 14l4 -4l-4 -4" />
+  <path d="M19 10h-11a4 4 0 1 0 0 8h1" />
+</svg>

app/views/icons/_bold.html.erb

@@ -0,0 +1,5 @@
+<svg class="<%= local_assigns[:class] %>" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6l0 -7" />
+  <path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7" />
+</svg>

app/views/icons/_italic.html.erb

@@ -0,0 +1,6 @@
+<svg class="<%= local_assigns[:class] %>" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <path d="M11 5l6 0" />
+  <path d="M7 19l6 0" />
+  <path d="M14 5l-4 14" />
+</svg>

app/views/icons/_underline.html.erb

@@ -0,0 +1,5 @@
+<svg class="<%= local_assigns[:class] %>" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <path d="M7 5v5a5 5 0 0 0 10 0v-5" />
+  <path d="M5 19h14" />
+</svg>

app/views/layouts/application.html.erb

@@ -22,7 +22,7 @@
     <% if params[:modal].present? %>
       <% url_params = Rails.application.routes.recognize_path(params[:modal], method: :get) %>
       <% if url_params[:action] == 'new' %>
-        <open-modal src="<%= params[:modal] %>"></open-modal>
+        <open-modal src="<%= url_for(url_params) %>"></open-modal>
       <% end %>
     <% end %>
     <turbo-frame id="modal"></turbo-frame>

app/views/personalization_settings/_email_body_field.html.erb

@@ -1,11 +1,5 @@
 <div class="form-control">
-  <div class="flex items-center">
   <%= ff.label :body, t('body'), class: 'label' %>
-    <span class="tooltip" data-tip="<%= t('use_following_placeholders_text_') %> <%= AccountConfig::DEFAULT_VALUES[local_assigns[:config].key].call['body'].scan(/{.*?}/).join(', ') %>">
+  <% variables = AccountConfig::EMAIL_VARIABLES[local_assigns[:config].key] %>
-      <%= svg_icon('info_circle', class: 'w-4 h-4') %>
+  <%= render 'personalization_settings/markdown_editor', name: ff.field_name(:body), value: local_assigns[:config].value['body'], variables: variables %>
-    </span>
-  </div>
-  <autoresize-textarea>
-    <%= ff.text_area :body, required: true, class: 'base-input w-full !rounded-2xl py-2', dir: 'auto' %>
-  </autoresize-textarea>
 </div>

app/views/personalization_settings/_markdown_editor.html.erb

@@ -0,0 +1,76 @@
+<% if value.to_s.start_with?('<html') %>
+  <autoresize-textarea>
+    <%= text_area_tag name, value, required: true, class: 'base-input w-full py-2 !rounded-2xl', dir: 'auto', style: 'max-height: 400px' %>
+  </autoresize-textarea>
+<% else %>
+  <markdown-editor>
+    <template data-target="markdown-editor.linkTooltipTemplate">
+      <div class="hidden absolute flex bg-white border border-base-300 rounded-xl shadow p-1 gap-1 items-center z-50" contenteditable="false">
+        <input type="text" placeholder="<%= t('enter_a_url_or_variable_name') %>" class="rounded-lg border border-base-300 px-2 py-1 text-sm outline-none" style="field-sizing: content; min-width: 205px; max-width: 320px;" autocomplete="off">
+        <button type="button" data-role="link-save" class="flex items-center px-1 w-6 h-6 rounded hover:bg-success/10 cursor-pointer">
+          <%= svg_icon('check', class: 'w-4 h-4 text-success') %>
+        </button>
+        <button type="button" data-role="link-remove" class="flex items-center px-1 w-6 h-6 rounded hover:bg-error/10 cursor-pointer">
+          <%= svg_icon('x', class: 'w-4 h-4 text-error') %>
+        </button>
+      </div>
+    </template>
+    <div class="border border-base-content/20 rounded-2xl bg-white">
+      <div class="flex items-center px-2 py-2 border-b" style="height: 42px;">
+        <div class="flex items-center gap-1">
+          <div class="tooltip tooltip-top before:text-xs" data-tip="<%= t('bold') %> (Ctrl+B)">
+            <button type="button" data-action="click:markdown-editor#bold" data-target="markdown-editor.boldButton" aria-label="<%= t('bold') %>" class="flex items-center px-1 w-6 h-6 rounded hover:bg-base-300">
+              <%= svg_icon('bold', class: 'w-4 h-4') %>
+            </button>
+          </div>
+          <div class="tooltip tooltip-top before:text-xs" data-tip="<%= t('italic') %> (Ctrl+I)">
+            <button type="button" data-action="click:markdown-editor#italic" data-target="markdown-editor.italicButton" aria-label="<%= t('italic') %>" class="flex items-center px-1 w-6 h-6 rounded hover:bg-base-300">
+              <%= svg_icon('italic', class: 'w-4 h-4') %>
+            </button>
+          </div>
+          <div class="tooltip tooltip-top before:text-xs" data-tip="<%= t('underline') %> (Ctrl+U)">
+            <button type="button" data-action="click:markdown-editor#underline" data-target="markdown-editor.underlineButton" aria-label="<%= t('underline') %>" class="flex items-center px-1 w-6 h-6 rounded hover:bg-base-300">
+              <%= svg_icon('underline', class: 'w-4 h-4') %>
+            </button>
+          </div>
+          <div class="tooltip tooltip-top before:text-xs" data-tip="<%= t('link') %> (Ctrl+K)">
+            <button type="button" data-action="click:markdown-editor#linkSelection" data-target="markdown-editor.linkButton" aria-label="<%= t('link') %>" class="flex items-center px-1 w-6 h-6 rounded hover:bg-base-300">
+              <%= svg_icon('link', class: 'w-4 h-4') %>
+            </button>
+          </div>
+        </div>
+        <div class="mx-2 h-5 border-l border-base-content/20"></div>
+        <div class="flex items-center gap-1">
+          <div class="tooltip tooltip-top before:text-xs" data-tip="<%= t('undo') %> (Ctrl+Z)">
+            <button type="button" data-action="click:markdown-editor#undo" data-target="markdown-editor.undoButton" aria-label="<%= t('undo') %>" class="flex items-center px-1 w-6 h-6 rounded hover:bg-base-300">
+              <%= svg_icon('arrow_back_up', class: 'w-4 h-4') %>
+            </button>
+          </div>
+          <div class="tooltip tooltip-top before:text-xs" data-tip="<%= t('redo') %> (Ctrl+Shift+Z)">
+            <button type="button" data-action="click:markdown-editor#redo" data-target="markdown-editor.redoButton" aria-label="<%= t('redo') %>" class="flex items-center px-1 w-6 h-6 rounded hover:bg-base-300">
+              <%= svg_icon('arrow_forward_up', class: 'w-4 h-4') %>
+            </button>
+          </div>
+        </div>
+        <% if local_assigns[:variables]&.any? %>
+          <% variable_labels = { 'account.name' => t('variables.account_name'), 'submitter.link' => t('variables.submitter_link'), 'template.name' => t('variables.template_name'), 'submission.submitters' => t('variables.submission_submitters'), 'submission.link' => t('variables.submission_link'), 'documents.link' => t('variables.documents_link') } %>
+          <div class="dropdown dropdown-end ml-auto">
+            <label tabindex="0" class="flex items-center gap-1 text-sm px-2 py-1 rounded hover:bg-base-200 cursor-pointer">
+              <%= t('add_variable') %>
+              <%= svg_icon('chevron_down', class: 'w-3.5 h-3.5') %>
+            </label>
+            <div tabindex="0" class="dropdown-content right-0 top-full mt-1 p-1 bg-white border border-neutral-200 rounded-lg shadow-lg z-50">
+              <% local_assigns[:variables]&.each do |variable| %>
+                <button type="button" data-variable="<%= variable %>" data-action="click:markdown-editor#insertVariable" class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 text-left text-sm cursor-pointer whitespace-nowrap">
+                  <%= variable_labels.fetch(variable, "{#{variable}}") %>
+                </button>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+      <div data-target="markdown-editor.editorElement"></div>
+    </div>
+    <%= hidden_field_tag name, value, required: true, data: { target: 'markdown-editor.textarea' } %>
+  </markdown-editor>
+<% end %>

app/views/personalization_settings/_signature_request_email_form.html.erb

@@ -8,12 +8,18 @@
   <div class="collapse-content">
     <%= form_for AccountConfigs.find_or_initialize_for_key(current_account, AccountConfig::SUBMITTER_INVITATION_EMAIL_KEY), url: settings_personalization_path, method: :post, html: { autocomplete: 'off', class: 'space-y-4' } do |f| %>
       <%= f.hidden_field :key %>
-      <%= f.fields_for :value, Struct.new(:subject, :body).new(*f.object.value.values_at('subject', 'body')) do |ff| %>
+      <%= f.fields_for :value, Struct.new(:subject, :body, :reply_to).new(*f.object.value.values_at('subject', 'body', 'reply_to')) do |ff| %>
         <div class="form-control">
           <%= ff.label :subject, t('subject'), class: 'label' %>
           <%= ff.text_field :subject, required: true, class: 'base-input', dir: 'auto' %>
         </div>
         <%= render 'personalization_settings/email_body_field', ff:, config: f.object %>
+        <% if can?(:manage, :reply_to) || can?(:manage, :personalization_advanced) %>
+          <div class="form-control">
+            <%= ff.label :reply_to, t('reply_to'), class: 'label' %>
+            <%= ff.email_field :reply_to, class: 'base-input', dir: 'auto', placeholder: t(:email) %>
+          </div>
+        <% end %>
       <% end %>
       <div class="form-control pt-2">
         <%= f.button button_title(title: t('save'), disabled_with: t('saving')), class: 'base-button' %>

app/views/personalization_settings/_submitter_completed_email_form.html.erb

@@ -12,7 +12,7 @@
         <div class="form-control">
           <div class="flex items-center">
             <%= ff.label :subject, t('subject'), class: 'label' %>
-            <span class="tooltip" data-tip="<%= t('use_following_placeholders_text_') %> <%= AccountConfig::DEFAULT_VALUES[AccountConfig::SUBMITTER_COMPLETED_EMAIL_KEY].call['subject'].scan(/{.*?}/).join(', ') %>">
+            <span class="tooltip" data-tip="<%= t('use_following_placeholders_text_') %> <%= AccountConfig::EMAIL_VARIABLES[AccountConfig::SUBMITTER_COMPLETED_EMAIL_KEY].map { |v| "{#{v}}" }.join(', ') %>">
               <%= svg_icon('info_circle', class: 'w-4 h-4') %>
             </span>
           </div>

app/views/pwa/manifest.json.erb

@@ -4,7 +4,7 @@
   "id": "/",
   "icons": [
     {
-      "src": "/logo.svg",
+      "src": "/favicon.svg",
       "type": "image/svg+xml",
       "sizes": "any"
     },

app/views/shared/_logo.html.erb

@@ -1,32 +1,4 @@
-<svg height="<%= local_assigns.fetch(:height, '37') %>" width="<%= local_assigns.fetch(:width, '37') %>" class="<%= local_assigns[:class] %>" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 511.998 511.998" xml:space="preserve">
+<svg class="<%= local_assigns[:class] %>" height="<%= local_assigns.fetch(:height, '37') %>" width="<%= local_assigns.fetch(:width, '37') %>" style="color: #e0753f" viewBox="0 0 180 180" xmlns="http://www.w3.org/2000/svg">
-  <path style="fill:#AA968C;" d="M503.999,247.999c0,128.13-111.033,240-248,240S8,376.129,8,247.999s111.033-224,248-224
+  <path fill="currentColor" d="M 178.224 72.09 c -0.296 -1.463 -0.627 -2.919 -0.996 -4.364 -0.293 -1.151 -0.616 -2.293 -0.956 -3.433 -0.301 -1.008 -0.612 -2.014 -0.95 -3.012 -0.531 -1.578 -1.113 -3.142 -1.735 -4.694 -0.216 -0.54 -0.433 -1.082 -0.661 -1.618 -0.195 -0.462 -0.399 -0.917 -0.601 -1.375 -0.262 -0.591 -0.53 -1.177 -0.804 -1.762 -0.074 -0.159 -0.151 -0.315 -0.226 -0.474 -0.209 -0.441 -0.422 -0.881 -0.638 -1.318 -0.076 -0.154 -0.153 -0.306 -0.229 -0.459 -0.236 -0.471 -0.477 -0.939 -0.721 -1.406 -0.053 -0.101 -0.105 -0.201 -0.158 -0.302 -1.143 -2.16 -2.367 -4.269 -3.68 -6.322 -0.116 -0.181 -0.237 -0.359 -0.355 -0.539 -0.094 -0.144 -0.189 -0.288 -0.284 -0.432 -0.284 -0.431 -0.57 -0.861 -0.862 -1.287 -0.112 -0.164 -0.225 -0.326 -0.338 -0.489 -0.193 -0.279 -0.382 -0.56 -0.579 -0.836 -0.089 -0.125 -0.182 -0.249 -0.273 -0.374 -0.13 -0.182 -0.264 -0.362 -0.395 -0.542 -0.277 -0.38 -0.556 -0.76 -0.838 -1.135 -0.15 -0.199 -0.303 -0.395 -0.454 -0.593 -0.21 -0.274 -0.417 -0.552 -0.63 -0.823 -0.055 -0.069 -0.111 -0.136 -0.166 -0.205 -0.482 -0.61 -0.971 -1.216 -1.47 -1.814 -0.129 -0.155 -0.262 -0.306 -0.392 -0.461 -0.402 -0.476 -0.808 -0.95 -1.22 -1.417 -0.186 -0.212 -0.375 -0.422 -0.563 -0.631 -0.384 -0.428 -0.773 -0.854 -1.167 -1.276 -0.176 -0.189 -0.351 -0.379 -0.529 -0.567 -0.564 -0.595 -1.134 -1.186 -1.716 -1.768 -1.091 -1.091 -2.207 -2.15 -3.346 -3.178 -1.016 -0.919 -2.05 -1.815 -3.103 -2.684 -0.772 -0.636 -1.557 -1.255 -2.348 -1.864 -3.465 -2.67 -7.112 -5.075 -10.927 -7.209 -2.869 -1.604 -5.83 -3.06 -8.883 -4.351 -2.443 -1.033 -4.922 -1.948 -7.428 -2.756 -8.879 -2.863 -18.13 -4.318 -27.605 -4.318 -3.19 0 -6.354 0.169 -9.488 0.496 -4.036 0.421 -8.019 1.114 -11.94 2.073 -1.732 0.423 -3.452 0.892 -5.157 1.42 -2.856 0.883 -5.673 1.912 -8.447 3.085 -2.645 1.118 -5.222 2.357 -7.729 3.711 -2.574 1.39 -5.073 2.901 -7.494 4.533 -1.195 0.805 -2.37 1.64 -3.527 2.503 -1.156 0.864 -2.292 1.756 -3.408 2.676 -0.553 0.456 -1.1 0.919 -1.643 1.389 -1.649 1.427 -3.252 2.92 -4.806 4.473 -2.582 2.582 -4.991 5.299 -7.222 8.138 -0.892 1.135 -1.756 2.292 -2.59 3.467 -0.417 0.588 -0.827 1.18 -1.23 1.778 -0.403 0.597 -0.798 1.199 -1.186 1.806 -0.388 0.607 -0.769 1.218 -1.143 1.835 -2.241 3.697 -4.216 7.562 -5.916 11.582 -1.095 2.589 -2.059 5.217 -2.901 7.877 -0.153 0.482 -0.3 0.965 -0.444 1.449 -0.339 1.14 -0.663 2.282 -0.956 3.433 -0.369 1.446 -0.7 2.901 -0.996 4.364 -1.034 5.121 -1.618 10.343 -1.749 15.637 -0.018 0.757 -0.028 1.514 -0.028 2.274 0 1.123 0.02 2.244 0.062 3.361 0.285 7.82 1.568 15.475 3.825 22.879 0.044 0.147 0.088 0.295 0.133 0.441 0.877 2.823 1.894 5.608 3.054 8.35 0.85 2.009 1.769 3.98 2.755 5.912 0.539 1.057 1.105 2.099 1.685 3.132 4.013 7.142 8.98 13.698 14.846 19.564 7.713 7.713 16.611 13.878 26.477 18.352 0.705 0.32 1.415 0.632 2.131 0.935 2.081 0.88 4.185 1.679 6.313 2.396 9.217 3.106 18.85 4.677 28.719 4.677 8.031 0 15.902 -1.047 23.522 -3.107 0.633 -0.172 1.266 -0.35 1.895 -0.535 0.757 -0.222 1.509 -0.456 2.26 -0.698 0.717 -0.232 1.431 -0.474 2.145 -0.723 1.752 -0.616 3.49 -1.281 5.211 -2.009 0.755 -0.319 1.503 -0.651 2.247 -0.989 1.237 -0.563 2.459 -1.15 3.664 -1.766 0.644 -0.328 1.283 -0.665 1.917 -1.009 1.654 -0.896 3.274 -1.848 4.865 -2.844 5.736 -3.591 11.06 -7.827 15.912 -12.679 0.775 -0.775 1.534 -1.562 2.278 -2.36 5.204 -5.59 9.636 -11.754 13.246 -18.417 0.343 -0.634 0.68 -1.274 1.009 -1.917 0.482 -0.944 0.943 -1.9 1.392 -2.863 0.471 -1.007 0.928 -2.021 1.364 -3.049 1.22 -2.886 2.281 -5.82 3.187 -8.793 0.559 -1.833 1.056 -3.68 1.494 -5.542 0.108 -0.458 0.211 -0.916 0.312 -1.376 0.194 -0.883 0.373 -1.77 0.539 -2.659 1.02 -5.455 1.542 -11.02 1.542 -16.663 0 -6.074 -0.595 -12.058 -1.776 -17.911 z m -161.733 19.614 c -1.118 -56.662 44.604 -74.877 60.998 -67.647 2.187 0.965 4.732 2.431 7.042 2.96 5.295 1.213 13.432 -3.113 13.521 6.273 0.078 8.156 -3.389 13.108 -10.797 16.177 -7.539 3.124 -14.777 9.181 -19.95 15.493 -21.487 26.216 -31.231 68.556 -7.565 94.296 -13.679 -5.545 -42.418 -25.467 -43.248 -67.552 z m 91.109 72.619 c -0.053 0.008 -4.171 0.775 -4.171 0.775 0 0 -15.862 -22.957 -23.509 -21.719 11.291 16.04 12.649 22.625 12.649 22.625 -0.053 0.001 -0.107 0.001 -0.161 0.003 -51.831 2.131 -42.785 -64.026 -28.246 -86.502 -1.555 13.073 8.878 39.992 39.034 44.1 9.495 1.293 32.302 -3.275 41.015 -11.38 0.098 1.825 0.163 3.85 0.159 6.013 -0.046 23.538 -13.47 42.743 -36.77 46.085 z m 30.575 -15.708 c 9.647 -9.263 12.869 -27.779 9.103 -44.137 -4.608 -20.011 -28.861 -32.383 -40.744 -35.564 5.766 -8.089 27.908 -14.274 39.567 5.363 -5.172 -10.519 -13.556 -23.023 -1.732 -33.128 12.411 13.329 19.411 29.94 20.161 48.7 0.75 18.753 -6.64 41.768 -26.355 58.765 z" />
-    S503.999,119.869,503.999,247.999z" />
+  <circle fill="currentColor" cx="71.927" cy="32.004" r="2.829" />
-  <path style="fill:#AA968C;" d="M255.999,23.999C119.033,23.999,8,119.868,8,247.999c0,24.631,4.138,48.647,11.74,71.397
-    c25.518,34.29,66.232,56.602,112.26,56.602c53.893,0,100.6-30.495,124-75.13c23.4,44.636,70.107,75.13,124,75.13
-    c46.028,0,86.743-22.312,112.26-56.602c7.602-22.75,11.74-46.767,11.74-71.397C503.999,119.868,392.966,23.999,255.999,23.999z" />
-  <circle style="fill:#C8AF9B;" cx="256" cy="351.999" r="136" />
-  <g>
-    <circle style="fill:#464655;" cx="132" cy="203.999" r="28" />
-    <circle style="fill:#464655;" cx="380" cy="203.999" r="28" />
-    <path style="fill:#464655;" d="M269.949,284.516c-7.672,10.741-20.227,10.741-27.899,0l-12.101-16.941
-      c-7.672-10.741-3.15-19.53,10.05-19.53h32c13.2,0,17.723,8.788,10.05,19.53L269.949,284.516z" />
-  </g>
-  <path style="fill:#AA968C;" d="M 350.964 399.998 C 316.628 399.998 299.021 351.998 255.882 351.998 C 212.742 351.998 195.135 399.998 160.801 399.998 C 145.395 399.998 131.723 394.147 120.621 374.798 C 131.595 439.03 187.893 487.998 255.881 487.998 C 323.868 487.998 380.168 439.03 391.14 374.798 C 380.04 394.148 366.368 399.998 350.964 399.998 Z" />
-  <g>
-    <path style="fill:#8C7873;" d="M32,423.998c-3.172,0-6.18-1.906-7.43-5.031c-1.641-4.105,0.359-8.758,4.461-10.402l160.008-64
-      c4.062-1.617,8.758,0.352,10.398,4.457s-0.359,8.758-4.461,10.402l-160.008,64C34,423.811,32.992,423.998,32,423.998z" />
-    <path style="fill:#8C7873;" d="M15.992,375.995c-3.547,0-6.781-2.375-7.727-5.965c-1.125-4.273,1.422-8.648,5.695-9.773l152-40
-      c4.289-1.121,8.648,1.426,9.773,5.703c1.125,4.273-1.422,8.648-5.695,9.773l-152,40C17.351,375.913,16.672,375.995,15.992,375.995z
-      " />
-    <path style="fill:#8C7873;" d="M7.992,335.995c-3.812,0-7.187-2.73-7.867-6.609c-0.773-4.352,2.133-8.5,6.484-9.27l136-24
-      c4.328-0.77,8.508,2.141,9.266,6.488c0.773,4.352-2.133,8.5-6.484,9.27l-136,24C8.922,335.956,8.453,335.995,7.992,335.995z" />
-    <path style="fill:#8C7873;" d="M480,423.998c3.172,0,6.18-1.906,7.43-5.031c1.641-4.105-0.359-8.758-4.461-10.402l-160.008-64
-      c-4.063-1.617-8.758,0.352-10.398,4.457s0.359,8.758,4.461,10.402l160.008,64C478,423.811,479.007,423.998,480,423.998z" />
-    <path style="fill:#8C7873;" d="M496.007,375.995c3.547,0,6.781-2.375,7.727-5.965c1.125-4.273-1.422-8.648-5.695-9.773l-152-40
-      c-4.289-1.121-8.648,1.426-9.773,5.703c-1.125,4.273,1.422,8.648,5.695,9.773l152,40
-      C494.648,375.913,495.328,375.995,496.007,375.995z" />
-    <path style="fill:#8C7873;" d="M504.007,335.995c3.813,0,7.188-2.73,7.867-6.609c0.773-4.352-2.133-8.5-6.484-9.27l-136-24
-      c-4.328-0.77-8.508,2.141-9.266,6.488c-0.773,4.352,2.133,8.5,6.484,9.27l136,24C503.078,335.956,503.546,335.995,504.007,335.995z
-      " />
-  </g>
 </svg>

app/views/shared/_meta.html.erb

@@ -27,4 +27,5 @@
 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+<link rel="icon" type="image/svg+xml" href="/favicon.svg">
 <meta name="theme-color" content="#faf7f5">

app/views/shared/_search_input.html.erb

@@ -6,7 +6,7 @@
   <% end %>
   <% if params[:q].present? %>
     <div class="relative">
-      <a href="<%= url_for(params.to_unsafe_h.except(:q)) %>" title="<%= t('clear') %>" class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-auto text-neutral text-2xl font-extralight">
+      <a href="<%= url_for(params: request.query_parameters.except('q')) %>" title="<%= t('clear') %>" class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-auto text-neutral text-2xl font-extralight">
         &times;
       </a>
     </div>

app/views/start_form/_policy.html.erb

@@ -1,5 +1,5 @@
 <% if configs = account.account_configs.find_by(key: AccountConfig::POLICY_LINKS_KEY) %>
   <div class="max-w-md mx-auto flex flex-wrap gap-1 justify-center text-sm text-base-content/60 mt-2">
-    <%= auto_link(MarkdownToHtml.call(configs.value)) %>
+    <%= MarkdownToHtml.call(configs.value) %>
   </div>
 <% end %>

app/views/storage_settings/_aws_form.html.erb

@@ -8,7 +8,7 @@
       </div>
       <div class="form-control">
         <%= fff.label :secret_access_key, class: 'label' %>
-        <%= fff.password_field :secret_access_key, value: configs['secret_access_key'], required: true, class: 'base-input' %>
+        <%= fff.password_field :secret_access_key, required: true, class: 'base-input', placeholder: configs['secret_access_key'].present? ? '*************' : '' %>
       </div>
      </div>
     <div class="grid md:grid-cols-2 gap-4">

app/views/storage_settings/_azure_form.html.erb

@@ -13,7 +13,7 @@
     </div>
     <div class="form-control">
       <%= fff.label :storage_access_key, 'Storage Access Key', class: 'label' %>
-      <%= fff.password_field :storage_access_key, value: configs['storage_access_key'], required: true, class: 'base-input' %>
+      <%= fff.password_field :storage_access_key, required: true, class: 'base-input', placeholder: configs['storage_access_key'].present? ? '*************' : '' %>
     </div>
   <% end %>
 <% end %>

app/views/storage_settings/_google_cloud_form.html.erb

@@ -13,7 +13,7 @@
     </div>
     <div class="form-control">
       <%= fff.label :credentials, 'Credentials (JSON key content)', class: 'label' %>
-      <%= fff.text_area :credentials, value: configs['credentials'], required: true, class: 'base-textarea w-full font-mono', rows: 4 %>
+      <%= fff.text_area :credentials, required: true, class: 'base-textarea w-full font-mono', rows: 4, placeholder: configs['credentials'].present? ? "{\n**REDACTED**\n}" : '' %>
     </div>
   <% end %>
 <% end %>

app/views/submissions/_detailed_form.html.erb

@@ -1,6 +1,6 @@
 <% has_phone_field = false %>
 <%= form_for '', url: template_submissions_path(template), html: { class: 'space-y-4', autocomplete: 'off' }, data: { turbo_frame: :_top } do |f| %>
-  <% submitters = template.submitters.reject { |e| e['invite_by_uuid'].present? || e['optional_invite_by_uuid'].present? } %>
+  <% submitters = template.submitters.reject { |e| e['invite_by_uuid'].present? || e['optional_invite_by_uuid'].present? || e['invite_via_field_uuid'].present? } %>
   <dynamic-list class="space-y-4">
     <div class="space-y-4">
       <div class="card card-compact bg-base-300/40" data-targets="dynamic-list.items">

app/views/submissions/_email_form.html.erb

@@ -1,5 +1,5 @@
 <%= form_for '', url: template_submissions_path(template), html: { class: 'space-y-4', autocomplete: 'off' }, data: { turbo_frame: :_top } do |f| %>
-  <% submitters = template.submitters.reject { |e| e['invite_by_uuid'].present? || e['optional_invite_by_uuid'].present? } %>
+  <% submitters = template.submitters.reject { |e| e['invite_by_uuid'].present? || e['optional_invite_by_uuid'].present? || e['invite_via_field_uuid'].present? } %>
   <% if submitters.size == 1 %>
     <submitter-item class="form-control">
       <emails-textarea data-bulk-enabled="<%= Docuseal.demo? || !Docuseal.multitenant? || can?(:manage, :bulk_send) %>" data-limit="<%= Docuseal.multitenant? ? (can?(:manage, :bulk_send) ? 40 : 1) : nil %>">

app/views/submissions/_phone_form.html.erb

@@ -1,5 +1,5 @@
 <%= form_for '', url: template_submissions_path(template), html: { class: 'space-y-4', autocomplete: 'off' }, data: { turbo_frame: :_top } do |f| %>
-  <% submitters = template.submitters.reject { |e| e['invite_by_uuid'].present? || e['optional_invite_by_uuid'].present? } %>
+  <% submitters = template.submitters.reject { |e| e['invite_by_uuid'].present? || e['optional_invite_by_uuid'].present? || e['invite_via_field_uuid'].present? } %>
   <dynamic-list class="space-y-4">
     <div class="space-y-4">
       <div class="card card-compact bg-base-300/40" data-targets="dynamic-list.items">

app/views/submissions/_send_email_base.html.erb

@@ -55,15 +55,9 @@
         <%= f.text_field :subject, value: local_assigns[:submitter_email_message]&.subject.presence || submitter_preferences_index.dig(local_assigns[:submitter]&.uuid, 'request_email_subject').presence || template&.preferences&.dig('request_email_subject').presence || config.value['subject'], required: true, class: '!text-sm base-input w-full', dir: 'auto' %>
       </div>
       <div class="form-control">
-        <div class="flex items-center">
         <%= f.label :message, t('body'), class: 'label' %>
-          <span class="tooltip tooltip-right" data-tip="<%= t('use_following_placeholders_text_') %> <%= AccountConfig::DEFAULT_VALUES[AccountConfig::SUBMITTER_INVITATION_EMAIL_KEY].call['body'].scan(/{.*?}/).join(', ') %>">
+        <% body_variables = AccountConfig::EMAIL_VARIABLES[AccountConfig::SUBMITTER_INVITATION_EMAIL_KEY] %>
-            <%= svg_icon('info_circle', class: 'w-4 h-4') %>
+        <%= render 'personalization_settings/markdown_editor', name: f.field_name(:body), value: local_assigns[:submitter_email_message]&.body.presence || submitter_preferences_index.dig(local_assigns[:submitter]&.uuid, 'request_email_body').presence || template&.preferences&.dig('request_email_body').presence || config.value['body'], variables: body_variables %>
-          </span>
-        </div>
-        <autoresize-textarea>
-          <%= f.text_area :body, value: local_assigns[:submitter_email_message]&.body.presence || submitter_preferences_index.dig(local_assigns[:submitter]&.uuid, 'request_email_body').presence || template&.preferences&.dig('request_email_body').presence || config.value['body'], required: true, class: 'base-textarea w-full', rows: 10, dir: 'auto' %>
-        </autoresize-textarea>
         <% unless local_assigns.fetch(:disable_save_as_default_template_option, false) %>
           <label for="<%= uuid = SecureRandom.uuid %>" class="flex items-center cursor-pointer">
             <%= check_box_tag :save_message, id: uuid, class: 'base-checkbox', checked: false %>
@@ -97,15 +91,8 @@
                 <%= ff.text_field :subject, value: local_assigns[:submitter_email_message]&.subject.presence || submitter_preferences_index.dig(submitter['uuid'], 'request_email_subject').presence || template&.preferences&.dig('request_email_subject').presence || config.value['subject'], required: true, class: '!text-sm base-input w-full', dir: 'auto' %>
               </div>
               <div class="form-control">
-                <div class="flex items-center">
                 <%= ff.label :message, t('body'), class: 'label' %>
-                  <span class="tooltip tooltip-right" data-tip="<%= t('use_following_placeholders_text_') %> <%= AccountConfig::DEFAULT_VALUES[AccountConfig::SUBMITTER_INVITATION_EMAIL_KEY].call['body'].scan(/{.*?}/).join(', ') %>">
+                <%= render 'personalization_settings/markdown_editor', name: ff.field_name(:body), value: local_assigns[:submitter_email_message]&.body.presence || submitter_preferences_index.dig(submitter['uuid'], 'request_email_body').presence || template&.preferences&.dig('request_email_body').presence || config.value['body'], variables: body_variables %>
-                    <%= svg_icon('info_circle', class: 'w-4 h-4') %>
-                  </span>
-                </div>
-                <autoresize-textarea>
-                  <%= ff.text_area :body, value: local_assigns[:submitter_email_message]&.body.presence || submitter_preferences_index.dig(submitter['uuid'], 'request_email_body').presence || template&.preferences&.dig('request_email_body').presence || config.value['body'], required: true, class: 'base-textarea w-full', rows: 10, dir: 'auto' %>
-                </autoresize-textarea>
               </div>
             </div>
           <% end %>

app/views/submissions/_value.html.erb

@@ -28,7 +28,8 @@
           <% end %>
           <div>
             <% timezone = local_assigns[:with_submitter_timezone] ? (submitter.timezone || local_assigns[:timezone]) : local_assigns[:timezone] %>
-            <%= l(attachment.created_at.in_time_zone(timezone), format: :long, locale: local_assigns[:locale]) %> <%= TimeUtils.timezone_abbr(timezone, attachment.created_at) %>
+            <% time_format = local_assigns[:with_timestamp_seconds] ? :detailed : :long %>
+            <%= l(attachment.created_at.in_time_zone(timezone), format: time_format, locale: local_assigns[:locale]) %> <%= TimeUtils.timezone_abbr(timezone, attachment.created_at) %>
           </div>
         </div>
       <% end %>
@@ -60,7 +61,7 @@
     <% end %>
   <% elsif field['type'] == 'cells' && area['cell_w'].to_f > 0.0 %>
     <% cell_width = area['cell_w'] / area['w'] * 100 %>
-    <div class="w-full flex items-center <%= 'justify-end' if align == 'right' %>">
+    <div class="w-full flex <%= valign == 'top' ? 'items-start' : (valign == 'bottom' ? 'items-end' : 'items-center') %> <%= 'justify-end' if align == 'right' %>">
       <% (0..(area['w'] / area['cell_w']).ceil).each do |index| %>
         <% if value[index] %>
           <div class="text-center flex-none" style="width: <%= cell_width %>%;"><%= value[index] %></div>

app/views/submissions/new.html.erb

@@ -1,6 +1,7 @@
 <% require_phone_2fa = @template.preferences['require_phone_2fa'] == true %>
 <% require_email_2fa = @template.preferences['require_email_2fa'] == true %>
 <% prefillable_fields = @template.fields.select { |f| f['prefillable'] } %>
+<% default_tab = cookies.permanent[:add_recipients_tab].presence || 'email' %>
 <% recipient_form_fields = Accounts.load_recipient_form_fields(current_account) if prefillable_fields.blank? %>
 <% only_detailed = require_phone_2fa || require_email_2fa || prefillable_fields.present? || recipient_form_fields.present? %>
 <%= render 'shared/turbo_modal_large', title: params[:selfsign] ? t('add_recipients') : t('add_new_recipients') do %>
@@ -8,25 +9,25 @@
   <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>" class="relative text-center px-2 mt-4 block">
     <div class="flex justify-center">
       <% options.each_with_index do |(label, value), index| %>
-        <div>
+        <%= content_tag(value == 'list' ? 'span' : 'toggle-cookies', data: { value:, key: 'add_recipients_tab' }) do %>
-          <%= radio_button_tag 'option', value, value == (only_detailed ? 'detailed' : 'email'), class: 'peer hidden', data: { action: 'change:toggle-visible#trigger' } %>
+          <%= radio_button_tag 'option', value, value == (only_detailed ? 'detailed' : default_tab), class: 'peer hidden', data: { action: 'change:toggle-visible#trigger' } %>
           <label for="option_<%= value %>" class="block bg-base-200 md:min-w-[112px] text-sm font-semibold whitespace-nowrap py-1.5 px-4 peer-checked:bg-base-300 <%= 'hidden sm:inline-block' if value == 'list' %> <%= 'rounded-l-3xl' if index.zero? %> <%= 'rounded-r-3xl sm:rounded-r-none' if value == 'detailed' %> <%= 'rounded-r-3xl' if index == options.size - 1 %>">
             <%= label %>
           </label>
-        </div>
+        <% end %>
       <% end %>
     </div>
   </toggle-visible>
   <div class="px-5 mb-5 mt-4">
     <% unless only_detailed %>
-      <div id="email">
+      <div id="email" class="<%= 'hidden' if default_tab != 'email' %>">
         <%= render 'email_form', template: @template %>
       </div>
-      <div id="phone" class="hidden">
+      <div id="phone" class="<%= 'hidden' if default_tab != 'phone' %>">
         <%= render 'phone_form', template: @template %>
       </div>
     <% end %>
-    <div id="detailed" class="<%= 'hidden' unless only_detailed %>">
+    <div id="detailed" class="<%= 'hidden' if !only_detailed && default_tab != 'detailed' %>">
       <%= render 'detailed_form', template: @template, require_phone_2fa:, require_email_2fa:, prefillable_fields:, recipient_form_fields: %>
     </div>
     <div id="list" class="hidden">

app/views/submissions/show.html.erb

@@ -2,10 +2,11 @@
   <%= render 'submissions/preview_tags' %>
 <% end %>
 <% font_scale = 1040.0 / PdfUtils::US_LETTER_W %>
-<% configs = AccountConfig.where(account_id: @submission.account_id, key: [AccountConfig::COMBINE_PDF_RESULT_KEY, AccountConfig::WITH_SIGNATURE_ID, AccountConfig::WITH_SUBMITTER_TIMEZONE_KEY, AccountConfig::WITH_SIGNATURE_ID_REASON_KEY]) %>
+<% configs = AccountConfig.where(account_id: @submission.account_id, key: [AccountConfig::COMBINE_PDF_RESULT_KEY, AccountConfig::WITH_SIGNATURE_ID, AccountConfig::WITH_SUBMITTER_TIMEZONE_KEY, AccountConfig::WITH_SIGNATURE_ID_REASON_KEY, AccountConfig::WITH_TIMESTAMP_SECONDS_KEY]) %>
 <% with_signature_id = configs.find { |e| e.key == AccountConfig::WITH_SIGNATURE_ID }&.value == true %>
 <% is_combined_enabled = configs.find { |e| e.key == AccountConfig::COMBINE_PDF_RESULT_KEY }&.value == true && !@submission.template_fields&.any? { |f| f['type'] == 'verification' } %>
 <% with_submitter_timezone = configs.find { |e| e.key == AccountConfig::WITH_SUBMITTER_TIMEZONE_KEY }&.value == true %>
+<% with_timestamp_seconds = configs.find { |e| e.key == AccountConfig::WITH_TIMESTAMP_SECONDS_KEY }&.value == true %>
 <% with_signature_id_reason = configs.find { |e| e.key == AccountConfig::WITH_SIGNATURE_ID_REASON_KEY }&.value != false %>
 <div style="max-width: 1600px" class="mx-auto pl-4">
   <div class="flex justify-between py-1.5 items-center pr-4 sticky top-0 md:relative z-10 bg-base-100">
@@ -20,7 +21,7 @@
         <%= button_to button_title(title: t('unarchive'), disabled_with: t('unarchive')[0..-2], icon: svg_icon('rotate', class: 'w-6 h-6')), submission_unarchive_index_path(@submission), class: 'btn btn-primary btn-ghost text-base hidden md:flex' %>
       <% end %>
       <% if @submission.audit_trail.present? %>
-        <a href="<%= ActiveStorage::Blob.proxy_url(@submission.audit_trail.blob, expires_at: 4.hours.from_now) %>" class="white-button" target="_blank">
+        <a href="<%= ActiveStorage::Blob.proxy_path(@submission.audit_trail.blob, expires_at: 4.hours.from_now) %>" class="white-button" target="_blank">
           <%= svg_icon('external_link', class: 'w-6 h-6') %>
           <span class="hidden md:inline"><%= t('audit_log') %></span>
         </a>
@@ -68,7 +69,7 @@
             <% end %>
           </div>
         <% end %>
-      <% elsif @submission.submitters.to_a.size == 1 && !@submission.expired? && !@submission.submitters.to_a.first.declined_at? && !@submission.archived_at? %>
+      <% elsif @submission.submitters.to_a.size == 1 && !@submission.expired? && !@submission.submitters.to_a.first.declined_at? && !@submission.archived_at? && !@submission.template&.archived_at? %>
         <%= render 'shared/clipboard_copy', text: submit_form_url(slug: @submission.submitters.to_a.first.slug, host: form_link_host), class: 'base-button', icon_class: 'w-6 h-6 text-white', copy_title: t('copy_share_link'), copied_title: t('copied_to_clipboard') %>
       <% end %>
     </div>
@@ -125,7 +126,7 @@
                         </span>
                       </span>
                     <% else %>
-                      <%= render 'submissions/value', page_width: width, page_height: height, font_scale:, area:, field:, attachments_index:, value: mask.present? ? Array.wrap(value).map { |e| TextUtils.mask_value(e, mask) }.join(', ') : value, locale: @submission.account.locale, timezone: @submission.account.timezone, submitter:, with_signature_id:, with_submitter_timezone:, with_signature_id_reason: %>
+                      <%= render 'submissions/value', page_width: width, page_height: height, font_scale:, area:, field:, attachments_index:, value: mask.present? ? Array.wrap(value).map { |e| TextUtils.mask_value(e, mask) }.join(', ') : value, locale: @submission.account.locale, timezone: @submission.account.timezone, submitter:, with_signature_id:, with_submitter_timezone:, with_timestamp_seconds:, with_signature_id_reason: %>
                     <% end %>
                   <% elsif field['readonly'] != true && submitter && !submitter.completed_at? %>
                     <% submitters_order_index ||= (@submission.template_submitters || @submission.template.submitters).each_with_index.to_h { |s, i| [s['uuid'], i] } %>
@@ -159,7 +160,7 @@
                   <%= (@submission.template_submitters || @submission.template.submitters).find { |e| e['uuid'] == submitter&.uuid }&.dig('name') || "#{(index + 1).ordinalize} Submitter" %>
                 </span>
               </div>
-              <% if signed_in? && can?(:update, @submission) && submitter && !submitter.completed_at? && !submitter.declined_at? && !@submission.archived_at? && !@submission.expired? && !submitter.start_form_submission_events.any? %>
+              <% if signed_in? && can?(:update, @submission) && submitter && !submitter.completed_at? && !submitter.declined_at? && !@submission.archived_at? && !@submission.template&.archived_at? && !@submission.expired? && !submitter.start_form_submission_events.any? %>
                 <span class="tooltip tooltip-left" data-tip="<%= t('edit') %>">
                   <%= link_to edit_submitter_path(submitter), class: 'shrink-0 inline md:hidden md:group-hover:inline', data: { turbo_frame: 'modal' } do %>
                     <%= svg_icon('pencil', class: 'w-5 h-5') %>
@@ -225,15 +226,15 @@
                 </span>
               </div>
             <% end %>
-            <% if signed_in? && submitter && submitter.email && !submitter.completed_at && !@submission.archived_at? && can?(:update, @submission) && Accounts.can_send_emails?(current_account) && !@submission.expired? && !submitter.declined_at? %>
+            <% if signed_in? && submitter && submitter.email && !submitter.completed_at && !@submission.archived_at? && !@submission.template&.archived_at? && can?(:update, @submission) && Accounts.can_send_emails?(current_account) && !@submission.expired? && !submitter.declined_at? %>
               <div class="mt-2 mb-1">
                 <%= button_to button_title(title: submitter.sent_at? ? t('re_send_email') : t('send_email'), disabled_with: t('sending')), submitter_send_email_index_path(submitter_slug: submitter.slug), class: 'btn btn-sm btn-primary w-full' %>
               </div>
             <% end %>
-            <% if signed_in? && submitter && submitter.phone && !submitter.completed_at && !@submission.archived_at? && can?(:update, @submission) && !@submission.expired? && !submitter.declined_at? %>
+            <% if signed_in? && submitter && submitter.phone && !submitter.completed_at && !@submission.archived_at? && !@submission.template&.archived_at? && can?(:update, @submission) && !@submission.expired? && !submitter.declined_at? %>
               <%= render 'submissions/send_sms_button', submitter: %>
             <% end %>
-            <% if signed_in? && submitter && !submitter.completed_at? && !@submission.archived_at? && can?(:create, @submission) && !@submission.expired? && !submitter.declined_at? %>
+            <% if signed_in? && submitter && !submitter.completed_at? && !@submission.archived_at? && !@submission.template&.archived_at? && can?(:create, @submission) && !@submission.expired? && !submitter.declined_at? %>
               <div class="mt-2 mb-1">
                 <a class="btn btn-sm btn-primary w-full" target="_blank" href="<%= submit_form_path(slug: submitter.slug) %>">
                   <%= t('sign_in_person') %>

app/views/submissions_dashboard/index.html.erb

@@ -35,19 +35,19 @@
 <% if is_show_tabs %>
   <div class="flex items-center flex-col md:flex-row md:flex-wrap gap-2 mb-4">
     <div class="flex items-center md:items-end flex-col md:flex-row gap-2 w-full md:w-fit">
-      <a href="<%= url_for(params.to_unsafe_h.except(:status)) %>" class="<%= params[:status].blank? ? 'border-neutral-700' : 'border-neutral-300' %> flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-48 hover:border-neutral-600">
+      <a href="<%= url_for(params: request.query_parameters.except('status')) %>" class="<%= params[:status].blank? ? 'border-neutral-700' : 'border-neutral-300' %> flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-48 hover:border-neutral-600">
         <div class="flex items-center space-x-1">
           <%= svg_icon('list', class: 'w-5 h-5') %>
           <span class="font-normal"><%= t('all') %></span>
         </div>
       </a>
-      <a href="<%= url_for(params.to_unsafe_h.merge(status: :pending)) %>" class="<%= params[:status] == 'pending' ? 'border-neutral-700' : 'border-neutral-300' %> flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-48 hover:border-neutral-600">
+      <a href="<%= url_for(params: request.query_parameters.merge('status' => 'pending')) %>" class="<%= params[:status] == 'pending' ? 'border-neutral-700' : 'border-neutral-300' %> flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-48 hover:border-neutral-600">
         <div class="flex items-center space-x-1">
           <%= svg_icon('clock', class: 'w-5 h-5') %>
           <span class="font-normal"><%= t('pending') %></span>
         </div>
       </a>
-      <a href="<%= url_for(params.to_unsafe_h.merge(status: :completed)) %>" class="<%= params[:status] == 'completed' ? 'border-neutral-700' : 'border-neutral-300' %> flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-48 hover:border-neutral-600">
+      <a href="<%= url_for(params: request.query_parameters.merge('status' => 'completed')) %>" class="<%= params[:status] == 'completed' ? 'border-neutral-700' : 'border-neutral-300' %> flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-48 hover:border-neutral-600">
         <div class="flex items-center space-x-1">
           <%= svg_icon('circle_check', class: 'w-5 h-5') %>
           <span class="font-normal"><%= t('completed') %></span>

app/views/submissions_export/new.html.erb

@@ -1,4 +1,4 @@
-<% filter_params = params.permit(:q, *Submissions::Filter::ALLOWED_PARAMS) %>
+<% filter_params = params.permit(:q, :archived, *Submissions::Filter::ALLOWED_PARAMS) %>
 <%= render 'shared/turbo_modal', title: t('export'), close_after_submit: false do %>
   <div class="space-y-2">
     <%= button_to template_submissions_export_index_path(@template), params: { format: :xlsx, **filter_params }, method: :get, data: { turbo_frame: :_top } do %>