Merge from docusealco/wip

This reverts commit c24ae1751e.

.annotaterb.yml

@@ -0,0 +1,58 @@
+---
+:position: before
+:position_in_additional_file_patterns: before
+:position_in_class: before
+:position_in_factory: before
+:position_in_fixture: before
+:position_in_routes: before
+:position_in_serializer: before
+:position_in_test: before
+:classified_sort: true
+:exclude_controllers: true
+:exclude_factories: true
+:exclude_fixtures: false
+:exclude_helpers: true
+:exclude_scaffolds: true
+:exclude_serializers: false
+:exclude_sti_subclasses: false
+:exclude_tests: false
+:force: false
+:format_markdown: false
+:format_rdoc: false
+:format_yard: false
+:frozen: false
+:ignore_model_sub_dir: false
+:ignore_unknown_models: false
+:include_version: false
+:show_check_constraints: false
+:show_complete_foreign_keys: false
+:show_foreign_keys: true
+:show_indexes: true
+:simple_indexes: false
+:sort: false
+:timestamp: false
+:trace: false
+:with_comment: true
+:with_column_comments: true
+:with_table_comments: true
+:active_admin: false
+:command:
+:debug: false
+:hide_default_column_types: ''
+:hide_limit_column_types: ''
+:ignore_columns:
+:ignore_routes:
+:models: true
+:routes: false
+:skip_on_db_migrate: false
+:target_action: :do_annotations
+:wrapper:
+:wrapper_close:
+:wrapper_open:
+:classes_default_to_s: []
+:additional_file_patterns: []
+:model_dir:
+- app/models
+:require: []
+:root_dir:
+- ''

.github/workflows/ci.yml

@@ -7,13 +7,13 @@ jobs:
     name: Rubocop
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Install Ruby
         uses: ruby/setup-ruby@v1
         with:
           ruby-version: 3.4.1
       - name: Cache gems
-        uses: actions/cache@v1
+        uses: actions/cache@v4
         with:
           path: vendor/bundle
           key: ${{ runner.os }}-gem-${{ hashFiles('**/Gemfile.lock') }}
@@ -31,13 +31,13 @@ jobs:
     name: Erblint
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Install Ruby
         uses: ruby/setup-ruby@v1
         with:
           ruby-version: 3.4.1
       - name: Cache gems
-        uses: actions/cache@v1
+        uses: actions/cache@v4
         with:
           path: vendor/bundle
           key: ${{ runner.os }}-gem-${{ hashFiles('**/Gemfile.lock') }}
@@ -49,13 +49,13 @@ jobs:
           bundle config path vendor/bundle
           bundle install --jobs 4 --retry 4
       - name: Run Erblint
-        run: bundle exec erblint ./app
+        run: bundle exec erb_lint ./app
 
   eslint:
     name: ESLint
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Install Node.js
         uses: actions/setup-node@v1
         with:
@@ -63,7 +63,7 @@ jobs:
       - name: Cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
-      - uses: actions/cache@v1
+      - uses: actions/cache@v4
         id: yarn-cache
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -77,6 +77,33 @@ jobs:
         run: |
           ./node_modules/eslint/bin/eslint.js "app/javascript/**/*.js"
 
+  brakeman:
+    name: Brakeman
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: 3.4.1
+      - name: Cache gems
+        uses: actions/cache@v4
+        with:
+          path: vendor/bundle
+          key: ${{ runner.os }}-gem-${{ hashFiles('**/Gemfile.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-gem-
+      - name: Install gems
+        run: |
+          gem install bundler
+          bundle config path vendor/bundle
+          bundle install --jobs 4 --retry 4
+          yarn install
+          sudo apt-get update
+          sudo apt-get install libvips
+      - name: Run Brakeman
+        run: bundle exec brakeman -q --exit-on-warn
+
   rspec:
     name: RSpec
     runs-on: ubuntu-latest
@@ -96,7 +123,7 @@ jobs:
           --health-retries 5
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Install Ruby
         uses: ruby/setup-ruby@v1
         with:
@@ -110,12 +137,12 @@ jobs:
         with:
           chrome-version: 125
       - name: Cache node_modules
-        uses: actions/cache@v1
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
       - name: Cache gems
-        uses: actions/cache@v1
+        uses: actions/cache@v4
         with:
           path: vendor/bundle
           key: ${{ runner.os }}-gem-${{ hashFiles('**/Gemfile.lock') }}

.github/workflows/docker.yml

@@ -7,7 +7,7 @@ on:
 
 jobs:
   build:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04-arm
 
     steps:
     - name: Checkout code
@@ -25,22 +25,22 @@ jobs:
         tags: |
           type=semver,pattern={{version}}
     - name: Set up QEMU
-      uses: docker/setup-qemu-action@v2
+      uses: docker/setup-qemu-action@v3
 
     - name: Set up Docker Buildx
-      uses: docker/setup-buildx-action@v2
+      uses: docker/setup-buildx-action@v3
 
     - name: Create .version file
       run: echo ${{ github.ref_name }} > .version
 
     - name: Login to Docker Hub
-      uses: docker/login-action@v2
+      uses: docker/login-action@v3
       with:
         username: ${{ secrets.DOCKERHUB_USERNAME }}
         password: ${{ secrets.DOCKERHUB_TOKEN }}
 
     - name: Build and push Docker image
-      uses: docker/build-push-action@v4
+      uses: docker/build-push-action@v6
       with:
         context: .
         push: true

Dockerfile

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

Gemfile

@@ -46,7 +46,6 @@ gem 'twitter_cldr', require: false
 gem 'tzinfo-data'
 
 group :development, :test do
-  gem 'annotate'
   gem 'better_html'
   gem 'bullet'
   gem 'debug'
@@ -63,6 +62,9 @@ group :development, :test do
 end
 
 group :development do
+  gem 'annotaterb'
+  gem 'brakeman', require: false
+  gem 'foreman', require: false
   gem 'letter_opener_web'
   gem 'web-console'
 end

Gemfile.lock

@@ -74,9 +74,7 @@ GEM
       uri (>= 0.13.1)
     addressable (2.8.7)
       public_suffix (>= 2.0.2, < 7.0)
-    annotate (2.6.5)
-      activerecord (>= 2.3.0)
-      rake (>= 0.8.7)
+    annotaterb (4.14.0)
     arabic-letter-connector (0.1.1)
     ast (2.4.2)
     aws-eventstream (1.3.0)
@@ -120,6 +118,8 @@ GEM
     bindex (0.8.1)
     bootsnap (1.18.4)
       msgpack (~> 1.2)
+    brakeman (7.0.0)
+      racc
     builder (3.3.0)
     bullet (8.0.0)
       activesupport (>= 3.0.0)
@@ -223,9 +223,13 @@ GEM
       concurrent-ruby (~> 1.1)
       webrick (~> 1.7)
       websocket-driver (~> 0.7)
-    ffi (1.17.0)
-    ffi (1.17.0-aarch64-linux-gnu)
-    ffi (1.17.0-x86_64-linux-gnu)
+    ffi (1.17.1)
+    ffi (1.17.1-aarch64-linux-gnu)
+    ffi (1.17.1-aarch64-linux-musl)
+    ffi (1.17.1-arm64-darwin)
+    ffi (1.17.1-x86_64-linux-gnu)
+    ffi (1.17.1-x86_64-linux-musl)
+    foreman (0.88.1)
     geom2d (0.4.1)
     globalid (1.2.1)
       activesupport (>= 6.1)
@@ -324,7 +328,7 @@ GEM
     mysql2 (0.5.6)
     net-http-persistent (4.0.5)
       connection_pool (~> 2.2)
-    net-imap (0.5.3)
+    net-imap (0.5.6)
       date
       net-protocol
     net-pop (0.1.2)
@@ -334,12 +338,18 @@ GEM
     net-smtp (0.5.0)
       net-protocol
     nio4r (2.7.4)
-    nokogiri (1.17.2)
+    nokogiri (1.18.5)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.17.2-aarch64-linux)
+    nokogiri (1.18.5-aarch64-linux-gnu)
       racc (~> 1.4)
-    nokogiri (1.17.2-x86_64-linux)
+    nokogiri (1.18.5-aarch64-linux-musl)
+      racc (~> 1.4)
+    nokogiri (1.18.5-arm64-darwin)
+      racc (~> 1.4)
+    nokogiri (1.18.5-x86_64-linux-gnu)
+      racc (~> 1.4)
+    nokogiri (1.18.5-x86_64-linux-musl)
       racc (~> 1.4)
     oj (3.16.8)
       bigdecimal (>= 3.0)
@@ -377,7 +387,7 @@ GEM
     puma (6.5.0)
       nio4r (~> 2.0)
     racc (1.8.1)
-    rack (3.1.8)
+    rack (3.1.12)
     rack-proxy (0.7.7)
       rack
     rack-session (2.0.0)
@@ -520,10 +530,13 @@ GEM
     simplecov-html (0.13.1)
     simplecov_json_formatter (0.1.4)
     smart_properties (1.17.0)
-    sqlite3 (2.4.1)
+    sqlite3 (2.5.0)
       mini_portile2 (~> 2.8.0)
-    sqlite3 (2.4.1-aarch64-linux-gnu)
-    sqlite3 (2.4.1-x86_64-linux-gnu)
+    sqlite3 (2.5.0-aarch64-linux-gnu)
+    sqlite3 (2.5.0-aarch64-linux-musl)
+    sqlite3 (2.5.0-arm64-darwin)
+    sqlite3 (2.5.0-x86_64-linux-gnu)
+    sqlite3 (2.5.0-x86_64-linux-musl)
     stringio (3.1.2)
     strip_attributes (1.14.1)
       activemodel (>= 3.0, < 9.0)
@@ -546,7 +559,7 @@ GEM
       unicode-emoji (~> 4.0, >= 4.0.4)
     unicode-emoji (4.0.4)
     uniform_notifier (1.16.0)
-    uri (1.0.2)
+    uri (1.0.3)
     useragent (0.16.11)
     warden (1.2.9)
       rack (>= 2.0.9)
@@ -569,17 +582,21 @@ GEM
 
 PLATFORMS
   aarch64-linux
+  aarch64-linux-musl
+  arm64-darwin
   ruby
   x86_64-linux
+  x86_64-linux-musl
 
 DEPENDENCIES
-  annotate
+  annotaterb
   arabic-letter-connector
   aws-sdk-s3
   aws-sdk-secretsmanager
   azure-storage-blob
   better_html
   bootsnap
+  brakeman
   bullet
   cancancan
   capybara
@@ -595,6 +612,7 @@ DEPENDENCIES
   faker
   faraday
   faraday-follow_redirects
+  foreman
   google-cloud-storage
   hexapdf
   image_processing

app/controllers/account_configs_controller.rb

@@ -39,7 +39,7 @@ class AccountConfigsController < ApplicationController
   end
 
   def account_config_params
-    params.required(:account_config).permit!.tap do |attrs|
+    params.required(:account_config).permit(:key, :value, { value: {} }, { value: [] }).tap do |attrs|
       attrs[:value] = attrs[:value] == '1' if attrs[:value].in?(%w[1 0])
     end
   end

app/controllers/accounts_controller.rb

@@ -50,7 +50,7 @@ class AccountsController < ApplicationController
     # rubocop:disable Layout/LineLength
     render turbo_stream: turbo_stream.replace(
       :account_delete_button,
-      html: helpers.tag.p(I18n.t('your_account_removal_request_will_be_processed_within_2_weeks_please_contact_us_if_you_want_to_keep_your_account'))
+      html: helpers.tag.p(I18n.t('your_account_removal_request_will_be_processed_within_2_months_please_contact_us_if_you_want_to_keep_your_account'))
     )
     # rubocop:enable Layout/LineLength
   end

app/controllers/api/submission_documents_controller.rb

@@ -10,7 +10,7 @@ module Api
           last_submitter = @submission.submitters.max_by(&:completed_at)
 
           if last_submitter.documents_attachments.blank?
-            last_submitter.documents_attachments = Submissions::EnsureResultGenerated.call(submitter)
+            last_submitter.documents_attachments = Submissions::EnsureResultGenerated.call(last_submitter)
           end
 
           last_submitter.documents_attachments

app/controllers/api/submissions_controller.rb

@@ -179,7 +179,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,
-                        { metadata: {}, values: {}, readonly_fields: [], message: %i[subject body],
+                        { metadata: {}, values: {}, roles: [], readonly_fields: [], message: %i[subject body],
                           fields: [:name, :uuid, :default_value, :value, :title, :description,
                                    :readonly, :validation_pattern, :invalid_message,
                                    { default_value: [], value: [], preferences: {} }] }]]

app/controllers/api/submitters_controller.rb

@@ -146,9 +146,15 @@ module Api
 
       if attrs[:completed]
         submitter.values = Submitters::SubmitValues.merge_default_values(submitter)
-        submitter.values = Submitters::SubmitValues.merge_formula_values(submitter)
         submitter.values = Submitters::SubmitValues.maybe_remove_condition_values(submitter)
 
+        formula_values = Submitters::SubmitValues.build_formula_values(submitter)
+
+        if formula_values.present?
+          submitter.values = submitter.values.merge(formula_values)
+          submitter.values = Submitters::SubmitValues.maybe_remove_condition_values(submitter)
+        end
+
         submitter.values = submitter.values.transform_values do |v|
           v == '{{date}}' ? Time.current.in_time_zone(submitter.account.timezone).to_date.to_s : v
         end

app/controllers/api/tools_controller.rb

@@ -34,6 +34,8 @@ module Api
           }
         end
       }
+    rescue HexaPDF::MalformedPDFError
+      render json: { error: 'Malformed PDF' }, status: :unprocessable_entity
     end
   end
 end

app/controllers/application_controller.rb

@@ -30,7 +30,7 @@ class ApplicationController < ActionController::Base
     redirect_to request.referer, alert: 'Too many requests', status: :too_many_requests
   end
 
-  if Rails.env.production?
+  if Rails.env.production? || Rails.env.test?
     rescue_from CanCan::AccessDenied do |e|
       Rollbar.warning(e) if defined?(Rollbar)
 

app/controllers/notifications_settings_controller.rb

@@ -39,7 +39,7 @@ class NotificationsSettingsController < ApplicationController
   end
 
   def email_config_params
-    params.require(:account_config).permit!.tap do |attrs|
+    params.require(:account_config).permit(:key, :value, { value: {} }, { value: [] }).tap do |attrs|
       attrs[:key] = nil unless attrs[:key].in?([AccountConfig::BCC_EMAILS, AccountConfig::SUBMITTER_REMINDERS])
     end
   end

app/controllers/personalization_settings_controller.rb

@@ -50,7 +50,7 @@ class PersonalizationSettingsController < ApplicationController
   end
 
   def account_config_params
-    attrs = params.require(:account_config).permit!
+    attrs = params.require(:account_config).permit(:key, :value, { value: {} }, { value: [] })
 
     return attrs if attrs[:value].is_a?(String)
 

app/controllers/pwa_controller.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class PwaController < ActionController::Base
+end

app/controllers/send_submission_email_controller.rb

@@ -9,8 +9,6 @@ class SendSubmissionEmailController < ApplicationController
 
   SEND_DURATION = 30.minutes
 
-  def success; end
-
   def create
     @submitter =
       if params[:template_slug]
@@ -31,7 +29,7 @@ class SendSubmissionEmailController < ApplicationController
     end
 
     respond_to do |f|
-      f.html { redirect_to success_send_submission_email_index_path }
+      f.html { render :success }
       f.json { head :ok }
     end
   end

app/controllers/start_form_controller.rb

@@ -25,7 +25,7 @@ class StartFormController < ApplicationController
       redirect_to start_form_completed_path(@template.slug, email: submitter_params[:email])
     else
       if filter_undefined_submitters(@template).size > 1 && @submitter.new_record?
-        @error_message = I18n.t('not_found')
+        @error_message = multiple_submitters_error_message
 
         return render :show
       end
@@ -34,6 +34,8 @@ class StartFormController < ApplicationController
         assign_submission_attributes(@submitter, @template)
 
         Submissions::AssignDefinedSubmitters.call(@submitter.submission)
+      else
+        @submitter.assign_attributes(ip: request.remote_ip, ua: request.user_agent)
       end
 
       if @submitter.save
@@ -64,8 +66,10 @@ class StartFormController < ApplicationController
                                         .or(template.submissions.where(expire_at: nil)).where(archived_at: nil))
              .order(id: :desc)
              .where(declined_at: nil)
+             .where(external_id: nil)
+             .where(ip: [nil, request.remote_ip])
              .then { |rel| params[:resubmit].present? ? rel.where(completed_at: nil) : rel }
-             .find_or_initialize_by(**submitter_params.compact_blank)
+             .find_or_initialize_by(email: submitter_params[:email], **submitter_params.compact_blank)
   end
 
   def assign_submission_attributes(submitter, template)
@@ -113,4 +117,12 @@ class StartFormController < ApplicationController
 
     @template = Template.find_by!(slug:)
   end
+
+  def multiple_submitters_error_message
+    if current_user&.account_id == @template.account_id
+      helpers.t('this_submission_has_multiple_signers_which_prevents_the_use_of_a_sharing_link_html')
+    else
+      I18n.t('not_found')
+    end
+  end
 end

app/controllers/submission_events_controller.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+class SubmissionEventsController < ApplicationController
+  SUBMISSION_EVENT_ICONS = {
+    'view_form' => 'eye',
+    'start_form' => 'player_play',
+    'complete_form' => 'check',
+    'send_email' => 'mail_forward',
+    'click_email' => 'hand_click',
+    'api_complete_form' => 'check',
+    'send_reminder_email' => 'mail_forward',
+    'send_2fa_sms' => '2fa',
+    'send_sms' => 'send',
+    'phone_verified' => 'phone_check',
+    'click_sms' => 'hand_click',
+    'decline_form' => 'x',
+    'start_verification' => 'player_play',
+    'complete_verification' => 'check',
+    'invite_party' => 'user_plus'
+  }.freeze
+
+  load_and_authorize_resource :submission
+
+  def index; end
+end

app/controllers/submissions_preview_controller.rb

@@ -20,7 +20,10 @@ class SubmissionsPreviewController < ApplicationController
 
     @submission ||= Submission.find_by!(slug: params[:slug])
 
-    if @submission.account.archived_at? || (!@submission.submitters.all?(&:completed_at?) && current_user.blank?)
+    raise ActionController::RoutingError, I18n.t('not_found') if @submission.account.archived_at?
+
+    if !@submission.submitters.all?(&:completed_at?) && !signature_valid &&
+       (!current_user || !current_ability.can?(:read, @submission))
       raise ActionController::RoutingError, I18n.t('not_found')
     end
 
@@ -37,6 +40,7 @@ class SubmissionsPreviewController < ApplicationController
 
   def completed
     @submission = Submission.find_by!(slug: params[:submissions_preview_slug])
+    @template = @submission.template
 
     render :completed, layout: 'form'
   end

app/controllers/submitters_resubmit_controller.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+class SubmittersResubmitController < ApplicationController
+  load_and_authorize_resource :submitter, parent: false
+
+  def update
+    return redirect_to submit_form_path(slug: @submitter.slug) if @submitter.email != current_user.email
+
+    submission = @submitter.template.submissions.new(created_by_user: current_user,
+                                                     submitters_order: :preserved,
+                                                     **@submitter.submission.slice(:template_fields,
+                                                                                   :account_id,
+                                                                                   :template_schema,
+                                                                                   :template_submitters,
+                                                                                   :preferences))
+
+    @submitter.submission.submitters.each do |submitter|
+      new_submitter = submission.submitters.new(submitter.slice(:uuid, :email, :phone, :name,
+                                                                :preferences, :metadata, :account_id))
+
+      next unless submitter.uuid == @submitter.uuid
+
+      assign_submitter_values(new_submitter, submitter)
+
+      @new_submitter ||= new_submitter
+    end
+
+    submission.save!
+
+    redirect_to submit_form_path(slug: @new_submitter.slug)
+  end
+
+  private
+
+  def assign_submitter_values(new_submitter, submitter)
+    attachments_index = submitter.attachments.index_by(&:uuid)
+
+    submitter.submission.template_fields.each do |field|
+      next if field['submitter_uuid'] != submitter.uuid
+      next if field['default_value'] == '{{date}}'
+      next if field['type'] == 'stamp'
+      next if field['type'] == 'signature'
+      next if field.dig('preferences', 'formula').present?
+
+      value = submitter.values[field['uuid']]
+
+      next if value.blank?
+
+      if field['type'].in?(%w[image file initials])
+        Array.wrap(value).each do |attachment_uuid|
+          new_submitter.attachments << attachments_index[attachment_uuid].dup
+        end
+      end
+
+      new_submitter.values[field['uuid']] = value
+    end
+  end
+end

app/controllers/templates_debug_controller.rb

@@ -6,9 +6,10 @@ class TemplatesDebugController < ApplicationController
   def show
     attachment = @template.documents.first
 
-    pdf = HexaPDF::Document.new(io: StringIO.new(attachment.download))
+    data = attachment.download
+    pdf = HexaPDF::Document.new(io: StringIO.new(data))
 
-    fields = Templates::FindAcroFields.call(pdf, attachment)
+    fields = Templates::FindAcroFields.call(pdf, attachment, data)
 
     attachment.metadata['pdf'] ||= {}
     attachment.metadata['pdf']['fields'] = fields

app/controllers/templates_preferences_controller.rb

@@ -28,8 +28,10 @@ class TemplatesPreferencesController < ApplicationController
                       submitters_order
                       completed_notification_email_subject completed_notification_email_body
                       completed_notification_email_enabled completed_notification_email_attach_audit] +
-                      [completed_message: %i[title body]]
+                      [completed_message: %i[title body],
+                       submitters: [%i[uuid request_email_subject request_email_body]]]
     ).tap do |attrs|
+      attrs[:preferences].delete(:submitters) if params[:request_email_per_submitter] != '1'
       attrs[:preferences] = attrs[:preferences].transform_values do |value|
         if %w[true false].include?(value)
           value == 'true'

app/controllers/user_configs_controller.rb

@@ -26,7 +26,7 @@ class UserConfigsController < ApplicationController
   end
 
   def user_config_params
-    params.required(:user_config).permit!.tap do |attrs|
+    params.required(:user_config).permit(:key, :value, { value: {} }, { value: [] }).tap do |attrs|
       attrs[:value] = attrs[:value] == '1' if attrs[:value].in?(%w[1 0])
     end
   end

app/controllers/users_controller.rb

@@ -45,17 +45,16 @@ class UsersController < ApplicationController
     return redirect_to settings_users_path, notice: I18n.t('unable_to_update_user') if Docuseal.demo?
 
     attrs = user_params.compact_blank.merge(user_params.slice(:archived_at))
-    attrs.delete(:role) if !role_valid?(attrs[:role]) || current_user == @user
 
     if params.dig(:user, :account_id).present?
-      account = Account.accessible_by(current_ability).find(params[:user][:account_id])
+      account = Account.accessible_by(current_ability).find(params.dig(:user, :account_id))
 
       authorize!(:manage, account)
 
       @user.account = account
     end
 
-    if @user.update(attrs)
+    if @user.update(attrs.except(current_user == @user ? :role : nil))
       redirect_back fallback_location: settings_users_path, notice: I18n.t('user_has_been_updated')
     else
       render turbo_stream: turbo_stream.replace(:modal, template: 'users/edit'), status: :unprocessable_entity
@@ -84,8 +83,11 @@ class UsersController < ApplicationController
 
   def user_params
     if params.key?(:user)
-      params.require(:user).permit(:email, :first_name, :last_name, :password,
-                                   :role, :archived_at, :account_id)
+      permitted_params = %i[email first_name last_name password archived_at]
+
+      permitted_params << :role if role_valid?(params.dig(:user, :role))
+
+      params.require(:user).permit(permitted_params)
     else
       {}
     end

app/javascript/elements/autoresize_textarea.js

@@ -3,6 +3,8 @@ export default class extends HTMLElement {
     this.resize()
 
     this.textarea.addEventListener('input', () => this.resize())
+
+    this.observeVisibility()
   }
 
   resize () {
@@ -11,6 +13,28 @@ export default class extends HTMLElement {
     }
   }
 
+  observeVisibility () {
+    this.observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            this.resize()
+            this.observer.unobserve(this.textarea)
+          }
+        })
+      },
+      {
+        threshold: 0.1
+      }
+    )
+
+    this.observer.observe(this.textarea)
+  }
+
+  disconnectedCallback () {
+    this.observer.unobserve(this.textarea)
+  }
+
   get textarea () {
     return this.querySelector('textarea')
   }

app/javascript/submission_form/area.vue

@@ -1,9 +1,9 @@
 <template>
   <div
-    class="field-area flex absolute lg:text-base -outline-offset-1"
+    class="flex absolute lg:text-base -outline-offset-1 field-area"
     dir="auto"
     :style="computedStyle"
-    :class="{ 'font-serif': field.preferences?.font === 'Times', 'text-[1.6vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars, 'cursor-default': !submittable, 'border border-red-100 bg-red-100 cursor-pointer': submittable, 'border border-red-100': !isActive && submittable, 'bg-opacity-80': !isActive && !isValueSet && submittable, 'field-area-active outline-red-500 outline-dashed outline-2 z-10': isActive && submittable, 'bg-opacity-40': (isActive || isValueSet) && submittable }"
+    :class="{ 'text-[1.6vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars, 'cursor-default': !submittable, 'border border-red-100 bg-red-100 cursor-pointer': submittable, 'border border-red-100': !isActive && submittable, 'bg-opacity-80': !isActive && !isValueSet && submittable, 'outline-red-500 outline-dashed outline-2 z-10 field-area-active': isActive && submittable, 'bg-opacity-40': (isActive || isValueSet) && submittable }"
   >
     <div
       v-if="(!withFieldPlaceholder || !field.name || field.type === 'cells') && !isActive && !isValueSet && field.type !== 'checkbox' && submittable && !area.option_uuid"
@@ -168,7 +168,7 @@
     <div
       v-else-if="field.type === 'cells'"
       class="w-full flex items-center"
-      :class="{ 'justify-end': field.preferences?.align === 'right' }"
+      :class="{ 'justify-end': field.preferences?.align === 'right', ...fontClasses }"
     >
       <div
         v-for="(char, index) in modelValue"
@@ -184,17 +184,23 @@
       ref="textContainer"
       dir="auto"
       class="flex items-center px-0.5 w-full"
-      :class="alignClasses[field.preferences?.align]"
+      :class="{ ...alignClasses, ...fontClasses }"
     >
       <span
         v-if="field && field.name && withFieldPlaceholder && !modelValue && modelValue !== 0"
         class="whitespace-pre-wrap text-gray-400"
         :class="{ 'w-full': field.preferences?.align }"
       >{{ field.name }}</span>
-      <span v-else-if="Array.isArray(modelValue)">
+      <span
+        v-else-if="Array.isArray(modelValue)"
+        :class="{ 'w-full': field.preferences?.align }"
+      >
         {{ modelValue.join(', ') }}
       </span>
-      <span v-else-if="field.type === 'date'">
+      <span
+        v-else-if="field.type === 'date'"
+        :class="{ 'w-full': field.preferences?.align }"
+      >
         {{ formattedDate }}
       </span>
       <span
@@ -320,10 +326,26 @@ export default {
       }
     },
     alignClasses () {
+      if (!this.field.preferences) {
+        return {}
+      }
+
       return {
-        center: 'text-center',
-        left: 'text-left',
-        right: 'text-right'
+        'text-center': this.field.preferences.align === 'center',
+        'text-left': this.field.preferences.align === 'left',
+        'text-right': this.field.preferences.align === 'right'
+      }
+    },
+    fontClasses () {
+      if (!this.field.preferences) {
+        return {}
+      }
+
+      return {
+        'font-mono': this.field.preferences.font === 'Courier',
+        'font-serif': this.field.preferences.font === 'Times',
+        'font-bold': ['bold_italic', 'bold'].includes(this.field.preferences.font_type),
+        italic: ['bold_italic', 'italic'].includes(this.field.preferences.font_type)
       }
     },
     option () {
@@ -450,8 +472,18 @@ export default {
       }
     },
     formatNumber (number, format) {
+      if (!number && number !== 0) {
+        return ''
+      }
+
       if (format === 'comma') {
         return new Intl.NumberFormat('en-US').format(number)
+      } else if (format === 'usd') {
+        return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
+      } else if (format === 'gbp') {
+        return new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
+      } else if (format === 'eur') {
+        return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
       } else if (format === 'dot') {
         return new Intl.NumberFormat('de-DE').format(number)
       } else if (format === 'space') {

app/javascript/submission_form/areas.vue

@@ -31,7 +31,7 @@
             :with-label="withLabel && !withFieldPlaceholder && step.length < 2"
             :is-value-set="step.some((f) => f.uuid in values)"
             :attachments-index="attachmentsIndex"
-            @click="$emit('focus-step', stepIndex)"
+            @click="[$emit('focus-step', stepIndex), maybeScrollOnClick(field, area)]"
           />
         </Teleport>
       </template>
@@ -109,6 +109,14 @@ export default {
       areaRefs: []
     }
   },
+  computed: {
+    isMobileContainer () {
+      const root = this.$root.$el.parentNode.getRootNode()
+      const container = root.body || root.querySelector('div')
+
+      return container.style.overflow === 'hidden'
+    }
+  },
   beforeUpdate () {
     this.areaRefs = []
   },
@@ -121,14 +129,16 @@ export default {
         this.scrollIntoArea(field.areas[0])
       }
     },
+    maybeScrollOnClick (field, area) {
+      if (['text', 'number', 'cells'].includes(field.type) && this.isMobileContainer) {
+        this.scrollIntoArea(area)
+      }
+    },
     scrollIntoArea (area) {
       const areaRef = this.areaRefs.find((a) => a.area === area)
 
       if (areaRef) {
-        const root = this.$root.$el.parentNode.getRootNode()
-        const container = root.body || root.querySelector('div')
-
-        if (container.style.overflow === 'hidden') {
+        if (this.isMobileContainer) {
           this.scrollInContainer(areaRef.$el)
         } else {
           const targetRect = areaRef.$refs.scrollToElem.getBoundingClientRect()
@@ -157,13 +167,15 @@ export default {
       const formContainer = root.getElementById('form_container')
       const container = root.body || root.querySelector('div')
 
-      const padding = 64
+      const isAndroid = /android/i.test(navigator.userAgent)
+      const padding = isAndroid ? 128 : 64
+      const scrollboxTop = isAndroid ? scrollbox.getBoundingClientRect().top : 0
       const boxRect = scrollbox.children[0].getBoundingClientRect()
       const targetRect = target.getBoundingClientRect()
 
       const targetTopRelativeToBox = targetRect.top - boxRect.top
 
-      scrollbox.scrollTo({ top: targetTopRelativeToBox - container.offsetHeight + formContainer.offsetHeight + target.offsetHeight + padding, behavior: 'smooth' })
+      scrollbox.scrollTo({ top: targetTopRelativeToBox + scrollboxTop - container.offsetHeight + formContainer.offsetHeight + target.offsetHeight + padding, behavior: 'smooth' })
     },
     setAreaRef (el) {
       if (el) {

app/javascript/submission_form/attachment_step.vue

@@ -13,7 +13,7 @@
         >
         <a
           v-if="val"
-          class="flex items-center space-x-1.5 w-full"
+          class="flex items-center space-x-1.5 w-full attachment-file-name"
           :href="attachmentsIndex[val].url"
           target="_blank"
         >
@@ -26,7 +26,10 @@
             {{ attachmentsIndex[val].filename }}
           </span>
         </a>
-        <button @click.prevent="removeAttachment(val)">
+        <button
+          class="remove-attachment-button"
+          @click.prevent="removeAttachment(val)"
+        >
           <IconTrashX
             :width="18"
             :heigh="19"
@@ -44,12 +47,12 @@
     <div
       v-if="field.description && !modelValue.length"
       dir="auto"
-      class="mb-3 px-1"
+      class="mb-3 px-1 field-description-text"
     >
       <MarkdownContent :string="field.description" />
     </div>
     <FileDropzone
-      :message="`${t('upload')} ${field.name || t('files')}${field.required ? '' : ` (${t('optional')})`}`"
+      :message="`${t('upload')} ${(field.title || field.name) || t('files')}${field.required ? '' : ` (${t('optional')})`}`"
       :submitter-slug="submitterSlug"
       :multiple="true"
       :dry-run="dryRun"

app/javascript/submission_form/completed.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     id="form_completed"
-    class="mx-auto max-w-md flex flex-col"
+    class="mx-auto max-w-md flex flex-col completed-form"
     dir="auto"
   >
     <div class="font-medium text-2xl flex items-center space-x-1.5 mx-auto">
@@ -10,13 +10,13 @@
         :width="30"
         :height="30"
       />
-      <span>
+      <span class="completed-form-message-title">
         {{ completedMessage.title || (hasSignatureFields ? (hasMultipleDocuments ? t('documents_have_been_signed') : t('document_has_been_signed')) : t('form_has_been_completed')) }}
       </span>
     </div>
     <div
       v-if="completedMessage.body"
-      class="mt-2"
+      class="mt-2 completed-form-message-body"
     >
       <MarkdownContent
         :string="completedMessage.body"
@@ -27,7 +27,7 @@
         v-if="completedButton.url"
         :href="sanitizeHref(completedButton.url)"
         rel="noopener noreferrer nofollow"
-        class="white-button flex items-center w-full"
+        class="white-button flex items-center w-full completed-form-completed-button"
       >
         <span>
           {{ completedButton.title || 'Back to Website' }}
@@ -35,7 +35,7 @@
       </a>
       <button
         v-if="canSendEmail && !isDemo && withSendCopyButton"
-        class="white-button !h-auto flex items-center space-x-1 w-full"
+        class="white-button !h-auto flex items-center space-x-1 w-full completed-form-send-copy-button"
         :disabled="isSendingCopy"
         @click.prevent="sendCopyToEmail"
       >
@@ -50,7 +50,7 @@
       </button>
       <button
         v-if="!isWebView && withDownloadButton"
-        class="base-button flex items-center space-x-1 w-full"
+        class="base-button flex items-center space-x-1 w-full completed-form-download-button"
         :disabled="isDownloading"
         @click.prevent="download"
       >

app/javascript/submission_form/date_step.vue

@@ -1,26 +1,32 @@
 <template>
   <div dir="auto">
     <div
-      class="flex justify-between items-center w-full"
+      class="flex justify-between items-end w-full mb-3.5 sm:mb-4"
       :class="{ 'mb-2': !field.description }"
     >
       <label
+        v-if="showFieldNames"
         :for="field.uuid"
-        class="label text-2xl"
+        class="label text-xl sm:text-2xl py-0 field-name-label"
       >
         <MarkdownContent
           v-if="field.title"
           :string="field.title"
         />
         <template v-else>
-          {{ field.name && showFieldNames ? field.name : t('date') }}
-          <template v-if="!field.required">
+          {{ field.name || t('date') }}
+        </template>
+        <template v-if="!field.required">
+          <span
+            class="ml-1"
+            :class="{ 'hidden sm:inline': (field.title || field.name || t('date') ).length > 10 }"
+          >
             ({{ t('optional') }})
-          </template>
+          </span>
         </template>
       </label>
       <button
-        class="btn btn-outline btn-sm !normal-case font-normal"
+        class="btn btn-outline btn-sm !normal-case font-normal set-current-date-button"
         @click.prevent="[setCurrentDate(), $emit('focus')]"
       >
         <IconCalendarCheck :width="16" />
@@ -29,7 +35,7 @@
     </div>
     <div
       v-if="field.description"
-      class="mb-3 px-1"
+      class="mb-3 px-1 field-description-text"
       dir="auto"
     >
       <MarkdownContent :string="field.description" />

app/javascript/submission_form/dropzone.vue

@@ -7,7 +7,7 @@
   >
     <label
       :for="inputId"
-      class="w-full relative bg-base-300 hover:bg-base-200 rounded-md border border-base-content border-dashed"
+      class="w-full relative bg-base-300 hover:bg-base-200 rounded-md border border-base-content border-dashed file-dropzone"
       :class="{ 'opacity-50': isLoading }"
     >
       <div class="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center">
@@ -128,7 +128,7 @@ export default {
               }
             })
           } else {
-            if (file.type === 'image/bmp') {
+            if (file.type === 'image/bmp' || file.type === 'image/vnd.microsoft.icon') {
               file = await this.convertBmpToPng(file)
             }
 

app/javascript/submission_form/form.vue

@@ -67,7 +67,7 @@
   <button
     v-if="!isFormVisible"
     id="expand_form_button"
-    class="btn btn-neutral flex text-white absolute bottom-0 w-full mb-3"
+    class="btn btn-neutral flex text-white absolute bottom-0 w-full mb-3 expand-form-button"
     style="width: 96%; margin-left: 2%"
     @click.prevent="[isFormVisible = true, scrollIntoField(currentField)]"
   >
@@ -93,14 +93,15 @@
   <div
     v-show="isFormVisible"
     id="form_container"
-    class="shadow-md bg-base-100 absolute bottom-0 w-full border-base-200 border p-4 rounded"
+    class="shadow-md bg-base-100 absolute bottom-0 w-full border-base-200 border p-4 rounded form-container"
     :class="{ 'md:bottom-4': isBreakpointMd }"
     :style="{ backgroundColor: backgroundColor }"
   >
     <button
       v-if="!isCompleted"
       id="minimize_form_button"
-      class="absolute right-0 mr-2 mt-2 top-0 hidden md:block"
+      class="absolute right-0 top-0 minimize-form-button"
+      :class="currentField?.description?.length > 100 ? 'mr-1 mt-1 md:mr-2 md:mt-2': 'mr-2 mt-2 hidden md:block'"
       :title="t('minimize')"
       @click.prevent="minimizeForm"
     >
@@ -118,7 +119,7 @@
         ref="form"
         :action="submitPath"
         method="post"
-        class="mx-auto"
+        class="mx-auto steps-form"
         :style="{ maxWidth: isBreakpointMd ? '582px' : '' }"
         @submit.prevent="submitStep"
       >
@@ -164,7 +165,7 @@
               v-if="showFieldNames && (currentField.name || currentField.title)"
               :for="currentField.uuid"
               dir="auto"
-              class="label text-2xl"
+              class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5 field-name-label"
               :class="{ 'mb-2': !currentField.description }"
             >
               <MarkdownContent
@@ -173,7 +174,11 @@
               />
               <template v-else>
                 {{ currentField.name }}
-                <template v-if="!currentField.required">({{ t('optional') }})</template>
+              </template>
+              <template v-if="!currentField.required">
+                <span :class="{ 'hidden sm:inline': (currentField.title || currentField.name).length > 20 }">
+                  ({{ t('optional') }})
+                </span>
               </template>
             </label>
             <div
@@ -183,7 +188,7 @@
             <div
               v-if="currentField.description"
               dir="auto"
-              class="mb-3 px-1"
+              class="mb-3 px-1 field-description-text"
             >
               <MarkdownContent :string="currentField.description" />
             </div>
@@ -221,7 +226,7 @@
               v-if="showFieldNames && (currentField.name || currentField.title)"
               :for="currentField.uuid"
               dir="auto"
-              class="label text-2xl"
+              class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5 field-name-label"
               :class="{ 'mb-2': !currentField.description }"
             >
               <MarkdownContent
@@ -230,13 +235,17 @@
               />
               <template v-else>
                 {{ currentField.name }}
-                <template v-if="!currentField.required">({{ t('optional') }})</template>
+              </template>
+              <template v-if="!currentField.required">
+                <span :class="{ 'hidden sm:inline': (currentField.title || currentField.name).length > 20 }">
+                  ({{ t('optional') }})
+                </span>
               </template>
             </label>
             <div
               v-if="currentField.description"
               dir="auto"
-              class="mb-3 px-1"
+              class="mb-3 px-1 field-description-text"
             >
               <MarkdownContent :string="currentField.description" />
             </div>
@@ -261,7 +270,7 @@
                 >
                   <label
                     :for="option.uuid"
-                    class="flex items-center space-x-3"
+                    class="flex items-center space-x-3 radio-label"
                   >
                     <input
                       :id="option.uuid"
@@ -295,7 +304,7 @@
             <div
               v-if="currentField.description"
               dir="auto"
-              class="mb-3 px-1"
+              class="mb-3 px-1 field-description-text"
             >
               <MarkdownContent :string="currentField.description" />
             </div>
@@ -329,7 +338,7 @@
                   >
                     <label
                       :for="field.uuid"
-                      class="flex items-center space-x-3"
+                      class="flex items-center space-x-3 checkbox-label"
                     >
                       <input
                         type="hidden"
@@ -466,13 +475,13 @@
         </div>
         <div
           v-if="(currentField.type !== 'payment' && currentField.type !== 'verification') || submittedValues[currentField.uuid]"
-          :class="currentField.type === 'signature' ? 'mt-2' : 'mt-6 md:mt-8'"
+          :class="currentField.type === 'signature' ? 'mt-2' : 'mt-4 md:mt-6'"
         >
           <button
             id="submit_form_button"
             ref="submitButton"
             type="submit"
-            class="base-button w-full flex justify-center"
+            class="base-button w-full flex justify-center submit-form-button"
             :disabled="isButtonDisabled"
           >
             <span class="flex">
@@ -522,15 +531,15 @@
       />
       <div
         v-if="stepFields.length < 80"
-        class="flex justify-center"
+        class="flex justify-center mt-3 sm:mt-4 mb-0 sm:mb-1"
       >
-        <div class="flex items-center mt-4 mb-1 flex-wrap">
+        <div class="flex items-center flex-wrap steps-progress">
           <a
             v-for="(step, index) in stepFields"
             :key="step[0].uuid"
             href="#"
             class="inline border border-base-300 h-3 w-3 rounded-full mx-1 mt-1"
-            :class="{ 'bg-base-300': index === currentStep, 'bg-base-content': (index < currentStep && stepFields[index].every((f) => !f.required || ![null, undefined, ''].includes(values[f.uuid]))) || isCompleted, 'bg-white': index > currentStep }"
+            :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)]"
           />
         </div>
@@ -1028,7 +1037,7 @@ export default {
       }, [])
     },
     formulaFields () {
-      return this.fields.filter((f) => f.preferences?.formula && f.type !== 'payment')
+      return this.fields.filter((f) => f.preferences?.formula && f.type !== 'payment' && this.checkFieldConditions(f) && this.checkFieldDocumentsConditions(f))
     },
     attachmentsIndex () {
       return this.attachments.reduce((acc, a) => {
@@ -1113,9 +1122,9 @@ export default {
       this.minimizeForm()
     }
 
-    const isMobileSafariIos = 'ontouchstart' in window && navigator.maxTouchPoints > 0 && /AppleWebKit/i.test(navigator.userAgent)
+    const isMobile = 'ontouchstart' in window && navigator.maxTouchPoints > 0 && /AppleWebKit|android/i.test(navigator.userAgent)
 
-    if (isMobileSafariIos || /iPhone|iPad|iPod/i.test(navigator.userAgent)) {
+    if (isMobile || /iPhone|iPad|iPod/i.test(navigator.userAgent)) {
       this.$nextTick(() => {
         const root = this.$root.$el.parentNode.getRootNode()
         const scrollbox = root.getElementById('scrollbox')
@@ -1182,22 +1191,24 @@ export default {
         return false
       }
 
+      const defaultValue = !field || isEmpty(field.default_value) ? null : field.default_value
+
       if (['empty', 'unchecked'].includes(condition.action)) {
-        return isEmpty(this.values[condition.field_uuid])
+        return isEmpty(this.values[condition.field_uuid] ?? defaultValue)
       } else if (['not_empty', 'checked'].includes(condition.action)) {
-        return !isEmpty(this.values[condition.field_uuid])
+        return !isEmpty(this.values[condition.field_uuid] ?? defaultValue)
       } else if (['equal', 'contains'].includes(condition.action) && field) {
         if (field.options) {
           const option = field.options.find((o) => o.uuid === condition.value)
-          const values = [this.values[condition.field_uuid]].flat()
+          const values = [this.values[condition.field_uuid] ?? defaultValue].flat()
 
           return values.includes(this.optionValue(option, field.options.indexOf(option)))
         } else {
-          return [this.values[condition.field_uuid]].flat().includes(condition.value)
+          return [this.values[condition.field_uuid] ?? defaultValue].flat().includes(condition.value)
         }
       } else if (['not_equal', 'does_not_contain'].includes(condition.action) && field) {
         const option = field.options.find((o) => o.uuid === condition.value)
-        const values = [this.values[condition.field_uuid]].flat()
+        const values = [this.values[condition.field_uuid] ?? defaultValue].flat()
 
         return !values.includes(this.optionValue(option, field.options.indexOf(option)))
       } else {
@@ -1290,7 +1301,9 @@ export default {
 
         if (!this.isCompleted) {
           if (scrollToArea) {
-            this.scrollIntoField(this.currentField)
+            this.$nextTick(() => {
+              setTimeout(() => this.scrollIntoField(this.currentField), 1)
+            })
           }
 
           this.enableScrollIntoField = false
@@ -1307,7 +1320,7 @@ export default {
       const currentFieldUuids = this.currentStepFields.map((f) => f.uuid)
       const currentFieldType = this.currentField.type
 
-      if (!formData && !this.$refs.form.checkValidity()) {
+      if (!formData && !this.$refs.form.checkValidity() && currentFieldUuids.every((fieldUuid) => isEmpty(this.submittedValues[fieldUuid]) || !isEmpty(this.values[fieldUuid]))) {
         return
       }
 

app/javascript/submission_form/image_step.vue

@@ -1,11 +1,21 @@
 <template>
   <div v-if="modelValue">
-    <div class="flex justify-between items-center w-full mb-2">
+    <div class="flex justify-between items-end w-full mb-3.5 md:mb-4">
       <label
-        class="label text-2xl"
-      >{{ showFieldNames && field.name ? field.name : t('image') }}</label>
+        v-if="showFieldNames"
+        :for="field.uuid"
+        class="label text-xl sm:text-2xl py-0 field-name-label"
+      >
+        <MarkdownContent
+          v-if="field.title"
+          :string="field.title"
+        />
+        <template v-else>
+          {{ field.name || t('image') }}
+        </template>
+      </label>
       <button
-        class="btn btn-outline btn-sm"
+        class="btn btn-outline btn-sm reupload-button"
         @click.prevent="remove"
       >
         <IconReload :width="16" />
@@ -15,7 +25,7 @@
     <div>
       <img
         :src="attachmentsIndex[modelValue].url"
-        class="h-52 border border-base-300 rounded mx-auto"
+        class="h-52 border border-base-300 rounded mx-auto uploaded-image-preview"
       >
     </div>
     <input
@@ -30,12 +40,12 @@
     <div
       v-if="field.description"
       dir="auto"
-      class="mb-3 px-1"
+      class="mb-3 px-1 field-description-text"
     >
       <MarkdownContent :string="field.description" />
     </div>
     <FileDropzone
-      :message="`${t('upload')} ${field.name || t('image')}${field.required ? '' : ` (${t('optional')})`}`"
+      :message="`${t('upload')} ${(field.title || field.name) || t('image')}${field.required ? '' : ` (${t('optional')})`}`"
       :submitter-slug="submitterSlug"
       :dry-run="dryRun"
       :accept="'image/*'"

app/javascript/submission_form/initials_step.vue

@@ -1,21 +1,22 @@
 <template>
   <div dir="auto">
     <div
-      class="flex justify-between items-center w-full"
+      class="flex justify-between items-end w-full mb-3.5 md:mb-4"
       :class="{ 'mb-2': !field.description }"
     >
       <label
-        class="label text-2xl"
+        v-if="showFieldNames"
+        class="label text-xl sm:text-2xl py-0 field-name-label"
       >
         <MarkdownContent
           v-if="field.title"
           :string="field.title"
         />
         <template v-else>
-          {{ showFieldNames && field.name ? field.name : t('initials') }}
+          {{ field.name || t('initials') }}
         </template>
       </label>
-      <div class="space-x-2 flex">
+      <div class="space-x-2 flex flex-none">
         <span
           v-if="isDrawInitials"
           class="tooltip"
@@ -24,7 +25,7 @@
           <a
             id="type_text_button"
             href="#"
-            class="btn btn-outline font-medium btn-sm"
+            class="btn btn-outline font-medium btn-sm type-text-button"
             @click.prevent="toggleTextInput"
           >
             <IconTextSize :width="16" />
@@ -41,7 +42,7 @@
           <a
             id="type_text_button"
             href="#"
-            class="btn btn-outline font-medium btn-sm"
+            class="btn btn-outline font-medium btn-sm type-text-button"
             @click.prevent="toggleTextInput"
           >
             <IconSignature :width="16" />
@@ -54,9 +55,7 @@
           class="tooltip"
           :data-tip="t('click_to_upload')"
         >
-          <label
-            class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap"
-          >
+          <label class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap upload-image-button">
             <IconUpload :width="16" />
             <input
               :key="uploadImageInputKey"
@@ -73,7 +72,7 @@
         <a
           v-if="modelValue || computedPreviousValue"
           href="#"
-          class="btn font-medium btn-outline btn-sm"
+          class="btn font-medium btn-outline btn-sm clear-canvas-button"
           @click.prevent="remove"
         >
           <IconReload :width="16" />
@@ -82,7 +81,7 @@
         <a
           v-else
           href="#"
-          class="btn font-medium btn-outline btn-sm"
+          class="btn font-medium btn-outline btn-sm clear-canvas-button"
           @click.prevent="clear"
         >
           <IconReload :width="16" />
@@ -104,7 +103,7 @@
     <div
       v-if="field.description"
       dir="auto"
-      class="mb-3 px-1"
+      class="mb-3 px-1 field-description-text"
     >
       <MarkdownContent :string="field.description" />
     </div>
@@ -122,7 +121,7 @@
     <canvas
       v-show="!modelValue && !computedPreviousValue"
       ref="canvas"
-      class="bg-white border border-base-300 rounded-2xl w-full"
+      class="bg-white border border-base-300 rounded-2xl w-full draw-canvas"
     />
     <input
       v-if="!isDrawInitials && !modelValue && !computedPreviousValue"

app/javascript/submission_form/invite_form.vue

@@ -40,7 +40,7 @@
       >
     </div>
     <div
-      class="mt-6 md:mt-8"
+      class="mt-4 md:mt-6"
     >
       <button
         type="submit"

app/javascript/submission_form/multi_select_step.vue

@@ -3,18 +3,24 @@
     v-if="showFieldNames && (field.name || field.title)"
     :for="field.uuid"
     dir="auto"
-    class="label text-2xl"
+    class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5 field-name-label"
     :class="{ 'mb-2': !field.description }"
-  ><MarkdownContent
-     v-if="field.title"
-     :string="field.title"
-   />
+  >
+    <MarkdownContent
+      v-if="field.title"
+      :string="field.title"
+    />
     <template v-else>{{ field.name }}</template>
+    <template v-if="!field.required">
+      <span :class="{ 'hidden sm:inline': (field.title || field.name).length > 20 }">
+        ({{ t('optional') }})
+      </span>
+    </template>
   </label>
   <div
     v-if="field.description"
     dir="auto"
-    class="mb-3 px-1"
+    class="mb-3 px-1 field-description-text"
   >
     <MarkdownContent :string="field.description" />
   </div>
@@ -44,7 +50,7 @@
       >
         <label
           :for="option.uuid"
-          class="flex items-center space-x-3"
+          class="flex items-center space-x-3 checkbox-label"
           @click="scrollIntoField(field)"
         >
           <input

app/javascript/submission_form/number_step.vue

@@ -3,15 +3,18 @@
     v-if="showFieldNames && (field.name || field.title)"
     :for="field.uuid"
     dir="auto"
-    class="label text-2xl"
+    class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5 field-name-label"
     :class="{ 'mb-2': !field.description }"
-  ><MarkdownContent
-     v-if="field.title"
-     :string="field.title"
-   />
+  >
+    <MarkdownContent
+      v-if="field.title"
+      :string="field.title"
+    />
     <template v-else>{{ field.name }}</template>
     <template v-if="!field.required">
-      ({{ t('optional') }})
+      <span :class="{ 'hidden sm:inline': (field.title || field.name).length > 20 }">
+        ({{ t('optional') }})
+      </span>
     </template>
   </label>
   <div
@@ -21,7 +24,7 @@
   <div
     v-if="field.description"
     dir="auto"
-    class="mb-3 px-1"
+    class="mb-3 px-1 field-description-text"
   >
     <MarkdownContent :string="field.description" />
   </div>

app/javascript/submission_form/payment_step.vue

@@ -1,7 +1,7 @@
 <template>
   <label
     v-if="!modelValue && !sessionId"
-    class="label text-2xl mb-2"
+    class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5 field-name-label"
   >
     <MarkdownContent
       v-if="field.title"
@@ -34,7 +34,7 @@
       <button
         v-if="sessionId"
         disabled
-        class="base-button w-full"
+        class="base-button w-full modal-save-button"
       >
         <IconLoader
           width="22"

app/javascript/submission_form/phone_step.vue

@@ -1,8 +1,9 @@
 <template>
   <div>
     <label
+      v-if="showFieldNames"
       :for="isCodeSent ? 'one_time_code' : field.uuid"
-      class="label text-2xl"
+      class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5 field-name-label"
       :class="{ 'mb-2': !field.description }"
     >
       <MarkdownContent
@@ -10,16 +11,13 @@
         :string="field.title"
       />
       <template v-else>
-        {{ showFieldNames && field.name ? field.name : t('verified_phone_number') }}
-        <template v-if="!field.required">
-          ({{ t('optional') }})
-        </template>
+        {{ field.name || t('verified_phone_number') }}
       </template>
     </label>
     <div
       v-if="field.description"
       dir="auto"
-      class="mb-3 px-1"
+      class="mb-3 px-1 field-description-text"
     >
       <MarkdownContent :string="field.description" />
     </div>
@@ -47,7 +45,7 @@
           <a
             v-if="!defaultValue"
             href="#"
-            class="link"
+            class="link change-phone-number-link"
             @click.prevent="isCodeSent = false"
           >
             {{ t('change_phone_number') }}
@@ -61,7 +59,7 @@
           <a
             v-else
             href="#"
-            class="link"
+            class="link resend-code-link"
             @click.prevent="resendCode"
           >
             {{ isResendLoading ? t('sending') : t('resend_code') }}
@@ -70,13 +68,13 @@
       </div>
       <div
         v-show="!isCodeSent"
-        class="flex w-full rounded-full outline-neutral-content outline-2 outline-offset-2 focus-within:outline"
+        class="flex w-full rounded-full outline-neutral-content outline-2 outline-offset-2 focus-within:outline phone-number-input-container"
       >
         <div
           id="country_code"
           class="relative inline-block"
         >
-          <div class="btn bg-base-200 border border-neutral-300 text-2xl whitespace-nowrap font-normal rounded-l-full">
+          <div class="btn bg-base-200 border border-neutral-300 text-2xl whitespace-nowrap font-normal rounded-l-full country-code-select-label">
             {{ selectedCountry.flag }} +{{ selectedCountry.dial }}
           </div>
           <select
@@ -297,7 +295,7 @@ export default {
           const data = await resp.json()
 
           if (resp.status === 422) {
-            alert(this.t('number_phone_is_invalid').replace('{number}', this.fullInternationalPhoneValue))
+            alert(data.error || this.t('number_phone_is_invalid').replace('{number}', this.fullInternationalPhoneValue))
           } else if (resp.status === 429) {
             alert(data.error)
           }

app/javascript/submission_form/signature_step.vue

@@ -4,21 +4,22 @@
     class="relative"
   >
     <div
-      class="flex justify-between items-center w-full"
+      class="flex justify-between items-end w-full mb-3.5 md:mb-4"
       :class="{ 'mb-2': !field.description }"
     >
       <label
-        class="label text-2xl"
+        v-if="showFieldNames"
+        class="label text-xl sm:text-2xl py-0 field-name-label"
       >
         <MarkdownContent
           v-if="field.title"
           :string="field.title"
         />
         <template v-else>
-          {{ showFieldNames && field.name ? field.name : t('signature') }}
+          {{ field.name || t('signature') }}
         </template>
       </label>
-      <div class="space-x-2 flex">
+      <div class="space-x-2 flex flex-none">
         <span
           v-if="isTextSignature && format !== 'typed' && format !== 'upload'"
           class="tooltip"
@@ -27,7 +28,7 @@
           <a
             id="type_text_button"
             href="#"
-            class="btn btn-outline btn-sm font-medium"
+            class="btn btn-outline btn-sm font-medium type-text-button"
             @click.prevent="[toggleTextInput(), hideQr()]"
           >
             <IconSignature :width="16" />
@@ -39,12 +40,13 @@
         <span
           v-else-if="withTypedSignature && format !== 'typed' && format !== 'drawn' && format !== 'upload'"
           class="tooltip ml-2"
+          :class="{ 'hidden sm:inline': modelValue || computedPreviousValue }"
           :data-tip="t('type_text')"
         >
           <a
             id="type_text_button"
             href="#"
-            class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap"
+            class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap type-text-button"
             @click.prevent="[toggleTextInput(), hideQr()]"
           >
             <IconTextSize :width="16" />
@@ -56,11 +58,10 @@
         <span
           v-if="format !== 'typed' && format !== 'drawn' && format !== 'upload' && format !== 'drawn_or_typed'"
           class="tooltip"
+          :class="{ 'hidden sm:inline': modelValue || computedPreviousValue }"
           :data-tip="t('take_photo')"
         >
-          <label
-            class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap"
-          >
+          <label class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap upload-image-button">
             <IconCamera :width="16" />
             <input
               :key="uploadImageInputKey"
@@ -77,7 +78,7 @@
         <a
           v-if="modelValue || computedPreviousValue"
           href="#"
-          class="btn btn-outline btn-sm font-medium"
+          class="btn btn-outline btn-sm font-medium reupload-button"
           @click.prevent="remove"
         >
           <IconReload :width="16" />
@@ -116,7 +117,7 @@
     <div
       v-if="field.description"
       dir="auto"
-      class="mb-3 px-1"
+      class="mb-3 px-1 field-description-text"
     >
       <MarkdownContent :string="field.description" />
     </div>
@@ -164,7 +165,7 @@
         v-show="!modelValue && !computedPreviousValue"
         ref="canvas"
         style="padding: 1px; 0"
-        class="bg-white border border-base-300 rounded-2xl w-full"
+        class="bg-white border border-base-300 rounded-2xl w-full draw-canvas"
       />
       <div
         v-if="isShowQr"

app/javascript/submission_form/text_step.vue

@@ -3,15 +3,18 @@
     v-if="showFieldNames && (field.name || field.title)"
     :for="field.uuid"
     dir="auto"
-    class="label text-2xl"
+    class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5 field-name-label"
     :class="{ 'mb-2': !field.description }"
-  ><MarkdownContent
-     v-if="field.title"
-     :string="field.title"
-   />
+  >
+    <MarkdownContent
+      v-if="field.title"
+      :string="field.title"
+    />
     <template v-else>{{ field.name }}</template>
     <template v-if="!field.required">
-      ({{ t('optional') }})
+      <span :class="{ 'hidden sm:inline': (field.title || field.name).length > 20 }">
+        ({{ t('optional') }})
+      </span>
     </template>
   </label>
   <div
@@ -21,7 +24,7 @@
   <div
     v-if="field.description"
     dir="auto"
-    class="mb-3 px-1"
+    class="mb-3 px-1 field-description-text"
   >
     <MarkdownContent :string="field.description" />
   </div>
@@ -64,7 +67,7 @@
     >
       <a
         href="#"
-        class="btn btn-ghost btn-circle btn-sm"
+        class="btn btn-ghost btn-circle btn-sm toggle-multiline-text-button"
         @click.prevent="toggleTextArea"
       >
         <IconAlignBoxLeftTop />

app/javascript/submission_form/verification_step.vue

@@ -1,7 +1,5 @@
 <template>
-  <label
-    class="label text-2xl mb-2"
-  >
+  <label class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5 field-name-label">
     <MarkdownContent
       v-if="field.title"
       :string="field.title"
@@ -11,13 +9,13 @@
   <div
     v-if="field.description"
     dir="auto"
-    class="mb-4 px-1"
+    class="mb-4 px-1 field-description-text"
   >
     <MarkdownContent :string="field.description" />
   </div>
   <div
     v-if="emptyValueRequiredStep && emptyValueRequiredStep[0] !== field"
-    class="px-1"
+    class="px-1 field-description-text"
   >
     {{ t('complete_all_required_fields_to_proceed_with_identity_verification') }}
   </div>
@@ -31,6 +29,15 @@
         class="animate-spin h-10"
       />
     </div>
+    <div v-else-if="redirectUrl">
+      <a
+        :href="redirectUrl"
+        target="_blank"
+        class="white-button w-full"
+      >
+        {{ t('verify_id') }}
+      </a>
+    </div>
     <div
       ref="widgetContainer"
     />
@@ -87,6 +94,7 @@ export default {
     return {
       isCreatingCheckout: false,
       isMathLoaded: false,
+      redirectUrl: '',
       isLoading: false,
       eidEasyData: {}
     }
@@ -147,14 +155,26 @@ export default {
       }).then(async (resp) => {
         this.eidEasyData = await resp.json()
 
-        const eidEasyWidget = document.createElement('eideasy-widget')
+        if (this.eidEasyData.available_methods[0] === 'itsme-qes-signature' &&
+            this.eidEasyData.available_methods.length === 1) {
+          const redirectUrl = new URL('https://id.eideasy.com/sign_contract_external')
 
-        for (const key in this.widgetSettings) {
-          eidEasyWidget[key] = this.widgetSettings[key]
+          redirectUrl.searchParams.append('client_id', this.eidEasyData.client_id)
+          redirectUrl.searchParams.append('doc_id', this.eidEasyData.doc_id)
+          redirectUrl.searchParams.append('country', this.countryCode)
+          redirectUrl.searchParams.append('lang', this.locale)
+
+          this.redirectUrl = redirectUrl.toString()
+        } else {
+          const eidEasyWidget = document.createElement('eideasy-widget')
+
+          for (const key in this.widgetSettings) {
+            eidEasyWidget[key] = this.widgetSettings[key]
+          }
+
+          this.$refs.widgetContainer.innerHTML = ''
+          this.$refs.widgetContainer.appendChild(eidEasyWidget)
         }
-
-        this.$refs.widgetContainer.innerHTML = ''
-        this.$refs.widgetContainer.appendChild(eidEasyWidget)
       })
     },
     async submit () {

app/javascript/template_builder/area.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="absolute overflow-visible group"
+    class="absolute overflow-visible group field-area-container"
     :style="positionStyle"
     :class="{ 'z-[1]': isMoved || isDragged }"
     @pointerdown.stop
@@ -33,7 +33,7 @@
     </div>
     <div
       v-if="field?.type && (isSelected || isNameFocus)"
-      class="absolute bg-white rounded-t border overflow-visible whitespace-nowrap flex z-10"
+      class="absolute bg-white rounded-t border overflow-visible whitespace-nowrap flex z-10 field-area-controls"
       style="top: -25px; height: 25px"
       @mousedown.stop
       @pointerdown.stop
@@ -41,7 +41,7 @@
       <FieldSubmitter
         v-if="field.type != 'heading'"
         v-model="field.submitter_uuid"
-        class="border-r"
+        class="border-r roles-dropdown"
         :compact="true"
         :editable="editable && (!defaultField || defaultField.role !== submitter?.name)"
         :allow-add-new="!defaultSubmitters.length"
@@ -108,7 +108,7 @@
         >{{ t('editable') }}</label>
         <span
           v-if="field.type !== 'payment' && !isValueInput"
-          class="dropdown dropdown-end"
+          class="dropdown dropdown-end field-area-settings-dropdown"
           @mouseenter="renderDropdown = true"
           @touchstart="renderDropdown = true"
         >
@@ -141,6 +141,7 @@
               :with-required="false"
               :with-areas="false"
               @click-formula="isShowFormulaModal = true"
+              @click-font="isShowFontModal = true"
               @click-description="isShowDescriptionModal = true"
               @click-condition="isShowConditionsModal = true"
               @scroll-to="[selectedAreaRef.value = $event, $emit('scroll-to', $event)]"
@@ -159,9 +160,9 @@
     </div>
     <div
       ref="touchValueTarget"
-      class="flex items-center h-full w-full"
+      class="flex items-center h-full w-full field-area"
       dir="auto"
-      :class="[isValueInput ? 'bg-opacity-50' : 'bg-opacity-80', field.type === 'heading' ? 'bg-gray-50' : bgColors[submitterIndex % bgColors.length], isDefaultValuePresent || isValueInput || (withFieldPlaceholder && field.areas) ? (alignClasses[field.preferences?.align] || '') : 'justify-center']"
+      :class="[isValueInput ? 'bg-opacity-50' : 'bg-opacity-80', field.type === 'heading' ? 'bg-gray-50' : bgColors[submitterIndex % bgColors.length], isDefaultValuePresent || isValueInput || (withFieldPlaceholder && field.areas) ? fontClasses : 'justify-center']"
       @click="focusValueInput"
     >
       <span
@@ -253,6 +254,17 @@
         @close="isShowFormulaModal = false"
       />
     </Teleport>
+    <Teleport
+      v-if="isShowFontModal"
+      :to="modalContainerEl"
+    >
+      <FontModal
+        :field="field"
+        :editable="editable && !defaultField"
+        :build-default-name="buildDefaultName"
+        @close="isShowFontModal = false"
+      />
+    </Teleport>
     <Teleport
       v-if="isShowConditionsModal"
       :to="modalContainerEl"
@@ -283,6 +295,7 @@ import FieldType from './field_type'
 import Field from './field'
 import FieldSettings from './field_settings'
 import FormulaModal from './formula_modal'
+import FontModal from './font_modal'
 import ConditionsModal from './conditions_modal'
 import DescriptionModal from './description_modal'
 import { IconX, IconCheck, IconDotsVertical } from '@tabler/icons-vue'
@@ -295,6 +308,7 @@ export default {
     IconCheck,
     FieldSettings,
     FormulaModal,
+    FontModal,
     IconDotsVertical,
     DescriptionModal,
     ConditionsModal,
@@ -352,6 +366,7 @@ export default {
   data () {
     return {
       isShowFormulaModal: false,
+      isShowFontModal: false,
       isShowConditionsModal: false,
       isContenteditable: false,
       isSettingsFocus: false,
@@ -361,6 +376,7 @@ export default {
       isMoved: false,
       renderDropdown: false,
       isNameFocus: false,
+      isHeadingSelected: false,
       textOverflowChars: 0,
       dragFrom: { x: 0, y: 0 }
     }
@@ -377,7 +393,7 @@ export default {
       }
     },
     isValueInput () {
-      return (this.field.type === 'heading' && this.isSelected) || this.isContenteditable || (this.inputMode && ['text', 'number', 'date'].includes(this.field.type))
+      return (this.field.type === 'heading' && this.isHeadingSelected) || this.isContenteditable || (this.inputMode && ['text', 'number', 'date'].includes(this.field.type))
     },
     modalContainerEl () {
       return this.$el.getRootNode().querySelector('#docuseal_modal_container')
@@ -385,11 +401,19 @@ export default {
     defaultName () {
       return this.buildDefaultName(this.field, this.template.fields)
     },
-    alignClasses () {
+    fontClasses () {
+      if (!this.field.preferences) {
+        return {}
+      }
+
       return {
-        center: 'justify-center',
-        left: 'justify-start',
-        right: 'justify-end'
+        'justify-center': this.field.preferences.align === 'center',
+        'justify-start': this.field.preferences.align === 'left',
+        'justify-end': this.field.preferences.align === 'right',
+        'font-mono': this.field.preferences.font === 'Courier',
+        'font-serif': this.field.preferences.font === 'Times',
+        'font-bold': ['bold_italic', 'bold'].includes(this.field.preferences.font_type),
+        italic: ['bold_italic', 'italic'].includes(this.field.preferences.font_type)
       }
     },
     optionIndexText () {
@@ -479,13 +503,17 @@ export default {
   methods: {
     buildDefaultName: Field.methods.buildDefaultName,
     closeDropdown () {
-      document.activeElement.blur()
+      this.$el.getRootNode().activeElement.blur()
     },
     maybeToggleDefaultValue () {
+      if (!this.editable) {
+        return
+      }
+
       if (['text', 'number'].includes(this.field.type)) {
         this.isContenteditable = true
 
-        this.$nextTick(() => this.focusValueInput())
+        this.focusValueInput()
       } else if (this.field.type === 'checkbox') {
         this.field.readonly = !this.field.readonly
         this.field.default_value === true ? delete this.field.default_value : this.field.default_value = true
@@ -507,20 +535,28 @@ export default {
       }
     },
     focusValueInput (e) {
-      if (this.$refs.defaultValue !== document.activeElement) {
-        this.$refs.defaultValue.focus()
+      this.$nextTick(() => {
+        if (this.$refs.defaultValue && this.$refs.defaultValue !== document.activeElement) {
+          this.$refs.defaultValue.focus()
 
-        if (this.$refs.defaultValue.innerText.length && this.$refs.defaultValue !== e?.target) {
-          window.getSelection().collapse(
-            this.$refs.defaultValue.firstChild,
-            this.$refs.defaultValue.innerText.length
-          )
+          if (this.$refs.defaultValue.innerText.length && this.$refs.defaultValue !== e?.target) {
+            window.getSelection().collapse(
+              this.$refs.defaultValue.firstChild,
+              this.$refs.defaultValue.innerText.length
+            )
+          }
         }
-      }
+      })
     },
     formatNumber (number, format) {
       if (format === 'comma') {
         return new Intl.NumberFormat('en-US').format(number)
+      } else if (format === 'usd') {
+        return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
+      } else if (format === 'gbp') {
+        return new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
+      } else if (format === 'eur') {
+        return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
       } else if (format === 'dot') {
         return new Intl.NumberFormat('de-DE').format(number)
       } else if (format === 'space') {
@@ -626,6 +662,7 @@ export default {
       const text = this.$refs.defaultValue.innerText.trim()
 
       this.isContenteditable = false
+      this.isHeadingSelected = false
 
       if (text) {
         if (this.field.type === 'number') {
@@ -743,10 +780,6 @@ export default {
 
       this.selectedAreaRef.value = this.area
 
-      if (this.field.type === 'heading') {
-        this.$nextTick(() => this.focusValueInput())
-      }
-
       this.dragFrom = { x: rect.left - e.clientX, y: rect.top - e.clientY }
 
       this.$el.getRootNode().addEventListener('mousemove', this.mouseMove)
@@ -781,6 +814,12 @@ export default {
         this.save()
       }
 
+      if (this.field.type === 'heading') {
+        this.isHeadingSelected = !this.isMoved
+
+        this.focusValueInput()
+      }
+
       this.isDragged = false
       this.isMoved = false
 

app/javascript/template_builder/builder.vue

@@ -32,7 +32,7 @@
     <div
       v-if="$slots.buttons || withTitle"
       id="title_container"
-      class="flex justify-between py-1.5 items-center pr-4 top-0 z-10"
+      class="flex justify-between py-1.5 items-center pr-4 top-0 z-10 title-container"
       :class="{ sticky: withStickySubmitters || isBreakpointLg }"
       :style="{ backgroundColor }"
     >
@@ -47,7 +47,7 @@
           v-if="withTitle"
           :model-value="template.name"
           :editable="editable"
-          class="text-xl md:text-3xl font-semibold focus:text-clip"
+          class="text-xl md:text-3xl font-semibold focus:text-clip template-name"
           :icon-stroke-width="2.3"
           @update:model-value="updateName"
         />
@@ -163,7 +163,7 @@
     </div>
     <div
       id="main_container"
-      class="flex"
+      class="flex main-container"
       :class="$slots.buttons || withTitle ? (isMobile ? 'max-h-[calc(100%_-_60px)]' : 'md:max-h-[calc(100%_-_60px)]') : (isMobile ? 'max-h-[100%]' : 'md:max-h-[100%]')"
     >
       <div
@@ -205,7 +205,7 @@
           <button
             v-if="sortedDocuments.length && editable && withAddPageButton"
             id="add_blank_page_button"
-            class="btn btn-outline w-full"
+            class="btn btn-outline w-full add-blank-page-button"
             @click.prevent="addBlankPage"
           >
             <IconInnerShadowTop
@@ -222,8 +222,8 @@
       </div>
       <div
         id="pages_container"
-        class="w-full overflow-y-hidden overflow-x-hidden mt-0.5 pt-0.5"
-        :class="isMobile ? 'overflow-y-auto' : 'md:overflow-y-auto'"
+        class="w-full overflow-x-hidden mt-0.5 pt-0.5"
+        :class="isMobile ? 'overflow-y-auto' : 'overflow-y-hidden md:overflow-y-auto'"
       >
         <div
           ref="documents"
@@ -239,7 +239,7 @@
             <button
               v-if="withAddPageButton"
               id="add_blank_page_button"
-              class="btn btn-outline w-full mt-4"
+              class="btn btn-outline w-full mt-4 add-blank-page-button"
               @click.prevent="addBlankPage"
             >
               <IconInnerShadowTop
@@ -266,7 +266,7 @@
                 :is-drag="!!dragField"
                 :input-mode="inputMode"
                 :default-fields="[...defaultRequiredFields, ...defaultFields]"
-                :allow-draw="!onlyDefinedFields"
+                :allow-draw="!onlyDefinedFields || drawField"
                 :data-document-uuid="document.uuid"
                 :default-submitters="defaultSubmitters"
                 :with-field-placeholder="withFieldPlaceholder"
@@ -307,7 +307,7 @@
               <button
                 v-if="withAddPageButton"
                 id="add_blank_page_button"
-                class="btn btn-outline w-full mt-4"
+                class="btn btn-outline w-full mt-4 add-blank-page-button"
                 @click.prevent="addBlankPage"
               >
                 <IconInnerShadowTop
@@ -327,7 +327,7 @@
       <div
         v-if="withFieldsList && !isMobile"
         id="fields_list_container"
-        class="relative w-80 flex-none mt-1 pr-4 pl-0.5 hidden md:block"
+        class="relative w-80 flex-none mt-1 pr-4 pl-0.5 hidden md:block fields-list-container"
         :class="drawField ? 'overflow-hidden' : 'overflow-y-auto overflow-x-hidden'"
       >
         <div
@@ -335,13 +335,13 @@
           class="sticky inset-0 h-full z-20"
           :style="{ backgroundColor }"
         >
-          <div class="bg-base-200 rounded-lg p-5 text-center space-y-4">
+          <div class="bg-base-200 rounded-lg p-5 text-center space-y-4 draw-field-container">
             <p>
               {{ t('draw_field_on_the_document') }}
             </p>
             <div>
               <button
-                class="base-button"
+                class="base-button cancel-draw-button"
                 @click="clearDrawField"
               >
                 {{ t('cancel') }}
@@ -366,6 +366,7 @@
             :with-help="withHelp"
             :default-submitters="defaultSubmitters"
             :draw-field-type="drawFieldType"
+            :with-fields-search="withFieldsSearch"
             :default-fields="[...defaultRequiredFields, ...defaultFields]"
             :template="template"
             :default-required-fields="defaultRequiredFields"
@@ -407,7 +408,10 @@
         @select="startFieldDraw($event)"
       />
     </div>
-    <div id="docuseal_modal_container" />
+    <div
+      id="docuseal_modal_container"
+      class="modal-container"
+    />
   </div>
 </template>
 
@@ -623,6 +627,11 @@ export default {
       required: false,
       default: true
     },
+    withFieldsSearch: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
     withFieldsList: {
       type: Boolean,
       required: false,
@@ -1310,6 +1319,10 @@ export default {
       }
     },
     onDropfield (area) {
+      if (!this.editable) {
+        return
+      }
+
       const field = this.fieldsDragFieldRef.value || {
         name: '',
         uuid: v4(),
@@ -1320,7 +1333,11 @@ export default {
 
       if (!this.fieldsDragFieldRef.value) {
         if (['select', 'multiple', 'radio'].includes(field.type)) {
-          field.options = [{ value: '', uuid: v4() }]
+          if (this.dragField?.options?.length) {
+            field.options = this.dragField.options.map(option => ({ value: option, uuid: v4() }))
+          } else {
+            field.options = [{ value: '', uuid: v4() }]
+          }
         }
 
         if (['stamp', 'heading'].includes(field.type)) {
@@ -1328,9 +1345,8 @@ export default {
         }
 
         if (field.type === 'date') {
-          field.preferences = {
-            format: this.defaultDateFormat
-          }
+          field.preferences ||= {}
+          field.preferences.format ||= this.defaultDateFormat
         }
       }
 
@@ -1391,7 +1407,6 @@ export default {
       const lastArea = field.areas[field.areas.length - 1]
 
       if (lastArea) {
-        fieldArea.x -= lastArea.w / 2
         fieldArea.w = lastArea.w
         fieldArea.h = lastArea.h
       }
@@ -1423,6 +1438,8 @@ export default {
           const documentRef = this.documentRefs.find((e) => e.document.uuid === area.attachment_uuid)
           const areaRef = documentRef.pageRefs[area.page].areaRefs.find((ref) => ref.area === this.selectedAreaRef.value)
 
+          areaRef.isHeadingSelected = true
+
           areaRef.focusValueInput()
         })
       }
@@ -1510,29 +1527,29 @@ export default {
     onDocumentRemove (item) {
       if (window.confirm(this.t('are_you_sure_'))) {
         this.template.schema.splice(this.template.schema.indexOf(item), 1)
-      }
 
-      const removedFieldUuids = []
+        const removedFieldUuids = []
 
-      this.template.fields.forEach((field) => {
-        [...(field.areas || [])].forEach((area) => {
-          if (area.attachment_uuid === item.attachment_uuid) {
-            field.areas.splice(field.areas.indexOf(area), 1)
+        this.template.fields.forEach((field) => {
+          [...(field.areas || [])].forEach((area) => {
+            if (area.attachment_uuid === item.attachment_uuid) {
+              field.areas.splice(field.areas.indexOf(area), 1)
 
-            removedFieldUuids.push(field.uuid)
-          }
+              removedFieldUuids.push(field.uuid)
+            }
+          })
         })
-      })
 
-      this.template.fields =
-        this.template.fields.filter((f) => !removedFieldUuids.includes(f.uuid) || f.areas?.length)
+        this.template.fields =
+          this.template.fields.filter((f) => !removedFieldUuids.includes(f.uuid) || f.areas?.length)
 
-      this.save()
+        this.save()
+      }
     },
     onDocumentReplace (data) {
       const { replaceSchemaItem, schema, documents } = data
 
-      this.template.schema.splice(this.template.schema.indexOf(replaceSchemaItem), 1, schema[0])
+      this.template.schema.splice(this.template.schema.indexOf(replaceSchemaItem), 1, { ...replaceSchemaItem, ...schema[0] })
       this.template.documents.push(...documents)
 
       if (data.fields) {

app/javascript/template_builder/conditions_modal.vue

@@ -8,12 +8,12 @@
     />
     <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>
+        <span class="modal-title">
           {{ t('condition') }} - {{ item.name || buildDefaultName(item, template.fields) }}
         </span>
         <a
           href="#"
-          class="text-xl"
+          class="text-xl modal-close-button"
           @click.prevent="$emit('close')"
         >&times;</a>
       </div>
@@ -50,9 +50,9 @@
                 v-if="conditions.length > 1"
                 class="flex justify-between mx-1"
               >
-                <span class="text-sm">
+                <label class="text-sm">
                   {{ t('condition') }} {{ cindex + 1 }}
-                </span>
+                </label>
                 <a
                   href="#"
                   class="link text-sm"
@@ -131,9 +131,7 @@
             class="inline float-right link text-right mb-3 px-2"
             @click.prevent="conditions.push({})"
           > + {{ t('add_condition') }}</a>
-          <button
-            class="base-button w-full mt-2"
-          >
+          <button class="base-button w-full mt-2 modal-save-button">
             {{ t('save') }}
           </button>
         </form>
@@ -177,7 +175,7 @@ export default {
     fields () {
       if (this.item.submitter_uuid) {
         return this.template.fields.reduce((acc, f) => {
-          if (f !== this.item && f.submitter_uuid === this.item.submitter_uuid) {
+          if (f !== this.item) {
             acc.push(f)
           }
 

app/javascript/template_builder/controls.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex space-x-2">
     <Contenteditable
-      class="w-full block mr-6"
+      class="w-full block mr-6 document-preview-name"
       :model-value="item.name"
       :icon-width="16"
       @update:model-value="onUpdateName"
@@ -15,7 +15,7 @@
     />
     <button
       v-if="withArrows"
-      class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors"
+      class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
       style="width: 24px; height: 24px"
       @click.stop="$emit('up', item)"
     >
@@ -23,14 +23,14 @@
     </button>
     <button
       v-if="withArrows"
-      class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors"
+      class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
       style="width: 24px; height: 24px"
       @click.stop="$emit('down', item)"
     >
       &darr;
     </button>
     <button
-      class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors"
+      class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
       style="width: 24px; height: 24px"
       @click.stop="$emit('remove', item)"
     >

app/javascript/template_builder/description_modal.vue

@@ -8,12 +8,12 @@
     />
     <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>
+        <span class="modal-title">
           {{ field.name || buildDefaultName(field, template.fields) }}
         </span>
         <a
           href="#"
-          class="text-xl"
+          class="text-xl modal-close-button"
           @click.prevent="$emit('close')"
         >&times;</a>
       </div>
@@ -55,9 +55,7 @@
               >
             </div>
           </div>
-          <button
-            class="base-button w-full mt-4"
-          >
+          <button class="base-button w-full mt-4 modal-save-button">
             {{ t('save') }}
           </button>
         </form>

app/javascript/template_builder/field.vue

@@ -3,7 +3,7 @@
     class="list-field group mb-2"
   >
     <div
-      class="border border-base-300 rounded rounded-tr-none relative group"
+      class="border border-base-300 rounded rounded-tr-none relative group fields-list-item"
       :style="{ backgroundColor: backgroundColor }"
     >
       <div class="flex items-center justify-between relative group/contenteditable-container">
@@ -98,7 +98,7 @@
           />
           <span
             v-else-if="field.type !== 'heading'"
-            class="dropdown dropdown-end"
+            class="dropdown dropdown-end field-settings-dropdown"
             @mouseenter="renderDropdown = true"
             @touchstart="renderDropdown = true"
           >
@@ -127,6 +127,7 @@
                 :editable="editable"
                 :background-color="dropdownBgColor"
                 @click-formula="isShowFormulaModal = true"
+                @click-font="isShowFontModal = true"
                 @click-description="isShowDescriptionModal = true"
                 @click-condition="isShowConditionsModal = true"
                 @set-draw="$emit('set-draw', $event)"
@@ -136,7 +137,7 @@
             </ul>
           </span>
           <button
-            class="relative text-transparent group-hover:text-base-content pr-1"
+            class="relative text-transparent group-hover:text-base-content pr-1 field-remove-button"
             :title="t('remove')"
             @click="$emit('remove', field)"
           >
@@ -192,14 +193,14 @@
             class="w-full input input-primary input-xs text-sm bg-transparent"
             :placeholder="`${t('option')} ${index + 1}`"
             type="text"
-            :readonly="!editable"
+            :readonly="!editable || defaultField"
             required
             dir="auto"
             @focus="maybeFocusOnOptionArea(option)"
             @blur="save"
           >
           <button
-            v-if="editable"
+            v-if="editable && !defaultField"
             class="text-sm w-3.5"
             tabindex="-1"
             @click="removeOption(option)"
@@ -208,11 +209,11 @@
           </button>
         </div>
         <div
-          v-if="field.options && !editable"
+          v-if="field.options && (!editable || defaultField)"
           class="pb-1"
         />
         <button
-          v-else-if="field.options && editable"
+          v-else-if="field.options && editable && !defaultField"
           class="text-center text-sm w-full pb-1"
           @click="addOption"
         >
@@ -231,6 +232,17 @@
         @close="isShowFormulaModal = false"
       />
     </Teleport>
+    <Teleport
+      v-if="isShowFontModal"
+      :to="modalContainerEl"
+    >
+      <FontModal
+        :field="field"
+        :editable="editable && !defaultField"
+        :build-default-name="buildDefaultName"
+        @close="isShowFontModal = false"
+      />
+    </Teleport>
     <Teleport
       v-if="isShowConditionsModal"
       :to="modalContainerEl"
@@ -261,6 +273,7 @@ import FieldType from './field_type'
 import PaymentSettings from './payment_settings'
 import FieldSettings from './field_settings'
 import FormulaModal from './formula_modal'
+import FontModal from './font_modal'
 import ConditionsModal from './conditions_modal'
 import DescriptionModal from './description_modal'
 import { IconRouteAltLeft, IconMathFunction, IconNewSection, IconTrashX, IconSettings } from '@tabler/icons-vue'
@@ -275,6 +288,7 @@ export default {
     PaymentSettings,
     IconNewSection,
     FormulaModal,
+    FontModal,
     DescriptionModal,
     ConditionsModal,
     IconRouteAltLeft,
@@ -305,6 +319,7 @@ export default {
       isNameFocus: false,
       showPaymentModal: false,
       isShowFormulaModal: false,
+      isShowFontModal: false,
       isShowConditionsModal: false,
       isShowDescriptionModal: false,
       renderDropdown: false
@@ -392,7 +407,7 @@ export default {
       return this.sortedAreas[0] && this.$emit('scroll-to', this.sortedAreas[0])
     },
     closeDropdown () {
-      document.activeElement.blur()
+      this.$el.getRootNode().activeElement.blur()
     },
     addOption () {
       this.field.options.push({ value: '', uuid: v4() })

app/javascript/template_builder/field_settings.vue

@@ -27,7 +27,34 @@
     </label>
   </div>
   <div
-    v-if="['number', 'cells'].includes(field.type)"
+    v-if="field.type === 'verification'"
+    class="py-1.5 px-1 relative"
+    @click.stop
+  >
+    <select
+      :placeholder="t('method')"
+      class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0 bg-transparent"
+      @change="[field.preferences ||= {}, field.preferences.method = $event.target.value, save()]"
+    >
+      <option
+        v-for="method in ['QeS', 'AeS']"
+        :key="method"
+        :value="method.toLowerCase()"
+        :selected="method.toLowerCase() === field.preferences?.method || (method === 'QeS' && !field.preferences?.method)"
+      >
+        {{ method }}
+      </option>
+    </select>
+    <label
+      :style="{ backgroundColor }"
+      class="absolute -top-1 left-2.5 px-1 h-4"
+      style="font-size: 8px"
+    >
+      {{ t('method') }}
+    </label>
+  </div>
+  <div
+    v-if="['cells'].includes(field.type)"
     class="py-1.5 px-1 relative"
     @click.stop
   >
@@ -229,7 +256,7 @@
     </label>
   </div>
   <li
-    v-if="withRequired && field.type != 'phone' && field.type != 'stamp'"
+    v-if="withRequired && field.type !== 'phone' && field.type !== 'stamp' && field.type !== 'verification'"
     @click.stop
   >
     <label class="cursor-pointer py-1.5">
@@ -303,6 +330,19 @@
     v-if="field.type != 'stamp'"
     class="pb-0.5 mt-0.5"
   >
+  <li v-if="['text', 'number', 'date'].includes(field.type)">
+    <label
+      class="label-text cursor-pointer text-center w-full flex items-center"
+      @click="$emit('click-font')"
+    >
+      <IconTypography
+        width="18"
+      />
+      <span class="text-sm">
+        {{ t('font') }}
+      </span>
+    </label>
+  </li>
   <li
     v-if="field.type != 'stamp'"
   >
@@ -400,7 +440,7 @@
 </template>
 
 <script>
-import { IconRouteAltLeft, IconShape, IconX, IconMathFunction, IconNewSection, IconInfoCircle, IconCopy } from '@tabler/icons-vue'
+import { IconRouteAltLeft, IconTypography, IconShape, IconX, IconMathFunction, IconNewSection, IconInfoCircle, IconCopy } from '@tabler/icons-vue'
 
 export default {
   name: 'FieldSettings',
@@ -411,6 +451,7 @@ export default {
     IconRouteAltLeft,
     IconCopy,
     IconNewSection,
+    IconTypography,
     IconX
   },
   inject: ['template', 'save', 't'],
@@ -445,7 +486,7 @@ export default {
       default: true
     }
   },
-  emits: ['set-draw', 'scroll-to', 'click-formula', 'click-description', 'click-condition', 'remove-area'],
+  emits: ['set-draw', 'scroll-to', 'click-formula', 'click-description', 'click-condition', 'click-font', 'remove-area'],
   data () {
     return {
     }
@@ -461,6 +502,9 @@ export default {
     numberFormats () {
       return [
         'none',
+        'usd',
+        'eur',
+        'gbp',
         'comma',
         'dot',
         'space'
@@ -541,6 +585,12 @@ export default {
     formatNumber (number, format) {
       if (format === 'comma') {
         return new Intl.NumberFormat('en-US').format(number)
+      } else if (format === 'usd') {
+        return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
+      } else if (format === 'gbp') {
+        return new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
+      } else if (format === 'eur') {
+        return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
       } else if (format === 'dot') {
         return new Intl.NumberFormat('de-DE').format(number)
       } else if (format === 'space') {

app/javascript/template_builder/field_submitter.vue

@@ -5,7 +5,7 @@
     @touchstart="renderDropdown = true"
   >
     <div class="flex space-x-2 items-end">
-      <div class="group/contenteditable-container bg-base-100 rounded-md p-2 border border-base-300 w-full flex justify-between items-end">
+      <div class="group/contenteditable-container bg-base-100 rounded-md p-2 border border-base-300 w-full flex justify-between items-end roles-dropdown-label-mobile">
         <div class="flex items-center space-x-2">
           <span
             class="w-3 h-3 flex-shrink-0 rounded-full"
@@ -22,7 +22,7 @@
           />
         </div>
       </div>
-      <div class="dropdown dropdown-top dropdown-end">
+      <div class="dropdown dropdown-top dropdown-end roles-dropdown-mobile">
         <label
           tabindex="0"
           class="bg-base-100 cursor-pointer rounded-md p-2 border border-base-300 w-full flex justify-center"
@@ -143,6 +143,7 @@
       <li
         v-for="(submitter, index) in submitters"
         :key="submitter.uuid"
+        class="w-full"
       >
         <a
           href="#"
@@ -191,7 +192,10 @@
           </div>
         </a>
       </li>
-      <li v-if="submitters.length < names.length && editable && allowAddNew">
+      <li
+        v-if="submitters.length < names.length && editable && allowAddNew"
+        class="w-full"
+      >
         <a
           href="#"
           class="flex px-2"
@@ -215,6 +219,14 @@ import { IconUserPlus, IconTrashX, IconPlus, IconChevronUp, IconChevronDown } fr
 import Contenteditable from './contenteditable'
 import { v4 } from 'uuid'
 
+function getOrdinalSuffix (num) {
+  if (num % 10 === 1 && num % 100 !== 11) return 'st'
+  if (num % 10 === 2 && num % 100 !== 12) return 'nd'
+  if (num % 10 === 3 && num % 100 !== 13) return 'rd'
+
+  return 'th'
+}
+
 export default {
   name: 'FieldSubmitter',
   components: {
@@ -288,6 +300,14 @@ export default {
       ]
     },
     names () {
+      const generatedNames = []
+
+      for (let i = 21; i < 101; i++) {
+        const suffix = getOrdinalSuffix(i)
+
+        generatedNames.push(`${i}${suffix} ${this.t('party')}`)
+      }
+
       return [
         this.t('first_party'),
         this.t('second_party'),
@@ -308,7 +328,8 @@ export default {
         this.t('seventeenth_party'),
         this.t('eighteenth_party'),
         this.t('nineteenth_party'),
-        this.t('twentieth_party')
+        this.t('twentieth_party'),
+        ...generatedNames
       ]
     },
     lastPartyIndex () {
@@ -362,7 +383,7 @@ export default {
       this.$emit('new-submitter', newSubmitter)
     },
     closeDropdown () {
-      document.activeElement.blur()
+      this.$el.getRootNode().activeElement.blur()
     }
   }
 }

app/javascript/template_builder/field_type.vue

@@ -1,6 +1,6 @@
 <template>
   <span
-    class="dropdown"
+    class="dropdown field-types-dropdown"
     @mouseenter="renderDropdown = true"
     @touchstart="renderDropdown = true"
   >
@@ -170,7 +170,7 @@ export default {
   },
   methods: {
     closeDropdown () {
-      document.activeElement.blur()
+      this.$el.getRootNode().activeElement.blur()
     }
   }
 }

app/javascript/template_builder/fields.vue

@@ -2,10 +2,10 @@
   <div :class="withStickySubmitters ? 'sticky top-0 z-[1]' : ''">
     <FieldSubmitter
       :model-value="selectedSubmitter.uuid"
-      class="roles-dropdown w-full rounded-lg"
+      class="roles-dropdown w-full rounded-lg roles-dropdown"
       :style="withStickySubmitters ? { backgroundColor } : {}"
       :submitters="submitters"
-      :menu-style="{ backgroundColor: ['', null, 'transparent'].includes(backgroundColor) ? 'white' : backgroundColor }"
+      :menu-style="{ overflow: 'auto', display: 'flex', flexDirection: 'row', maxHeight: 'calc(100vh - 120px)', backgroundColor: ['', null, 'transparent'].includes(backgroundColor) ? 'white' : backgroundColor }"
       :editable="editable && !defaultSubmitters.length"
       @new-submitter="save"
       @remove="removeSubmitter"
@@ -74,7 +74,7 @@
         <div
           :style="{ backgroundColor }"
           draggable="true"
-          class="default-field border border-base-300 rounded rounded-tr-none relative group mb-2"
+          class="border border-base-300 rounded rounded-tr-none relative group mb-2 default-field fields-list-item"
           @dragstart="onDragstart({ type: 'text', ...field })"
           @dragend="$emit('drag-end')"
         >
@@ -104,7 +104,7 @@
   </div>
   <div
     v-if="editable && !onlyDefinedFields"
-    class="grid grid-cols-3 gap-1 pb-2"
+    class="grid grid-cols-3 gap-1 pb-2 fields-grid"
   >
     <template
       v-for="(icon, type) in fieldIconsSorted"
@@ -113,7 +113,7 @@
       <button
         v-if="(fieldTypes.length === 0 || fieldTypes.includes(type)) && (withPhone || type != 'phone') && (withPayment || type != 'payment') && (withVerification || type != 'verification')"
         draggable="true"
-        class="field-type-button group flex items-center justify-center border border-dashed w-full rounded relative"
+        class="field-type-button group flex items-center justify-center border border-dashed w-full rounded relative fields-grid-item"
         :style="{ backgroundColor }"
         :class="drawFieldType === type ? 'border-base-content/40' : 'border-base-300 hover:border-base-content/20'"
         @dragstart="onDragstart({ type: type })"
@@ -142,7 +142,7 @@
         <a
           href="https://www.docuseal.com/pricing"
           target="_blank"
-          class="opacity-50 flex items-center justify-center border border-dashed border-base-300 w-full rounded relative"
+          class="opacity-50 flex items-center justify-center border border-dashed border-base-300 w-full rounded relative fields-grid-item"
           :style="{ backgroundColor }"
         >
           <div class="w-0 absolute left-0">
@@ -168,7 +168,7 @@
         <a
           href="https://www.docuseal.com/contact"
           target="_blank"
-          class="opacity-50 flex items-center justify-center border border-dashed border-base-300 w-full rounded relative"
+          class="opacity-50 flex items-center justify-center border border-dashed border-base-300 w-full rounded relative fields-grid-item"
           :style="{ backgroundColor }"
         >
           <div class="w-0 absolute left-0">
@@ -229,6 +229,11 @@ export default {
       type: Array,
       required: true
     },
+    withFieldsSearch: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
     template: {
       type: Object,
       required: true
@@ -297,7 +302,11 @@ export default {
     fieldNames: FieldType.computed.fieldNames,
     fieldIcons: FieldType.computed.fieldIcons,
     isShowFieldSearch () {
-      return this.submitterDefaultFields.length > 15
+      if (this.withFieldsSearch === false) {
+        return false
+      } else {
+        return this.submitterDefaultFields.length > 15
+      }
     },
     defaultFieldsIndex () {
       return this.defaultFields.reduce((acc, field) => {
@@ -327,7 +336,7 @@ export default {
     },
     filteredSubmitterDefaultFields () {
       if (this.defaultFieldsSearch) {
-        return this.submitterDefaultFields.filter((f) => f.name.toLowerCase().includes(this.defaultFieldsSearch.toLowerCase()))
+        return this.submitterDefaultFields.filter((f) => (f.title || f.name).toLowerCase().includes(this.defaultFieldsSearch.toLowerCase()))
       } else {
         return this.submitterDefaultFields
       }

app/javascript/template_builder/font_modal.vue

@@ -0,0 +1,290 @@
+<template>
+  <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">
+          {{ t('font') }} - {{ field.name || buildDefaultName(field, template.fields) }}
+        </span>
+        <a
+          href="#"
+          class="text-xl modal-close-button"
+          @click.prevent="$emit('close')"
+        >&times;</a>
+      </div>
+      <div class="mt-4">
+        <div>
+          <div class="flex items-center space-x-1.5">
+            <span>
+              <div class="dropdown modal-field-font-dropdown">
+                <label
+                  tabindex="0"
+                  class="base-input flex items-center justify-between"
+                  style="height: 32px; padding-right: 0; width: 120px"
+                  :class="fonts.find((f) => f.value === preferences.font)?.class"
+                >
+                  <span style="margin-top: 1px">
+                    {{ preferences.font || 'Default' }}
+                  </span>
+                  <IconChevronDown
+                    class="ml-2 mr-2 mt-0.5"
+                    width="18"
+                    height="18"
+                  />
+                </label>
+                <div
+                  tabindex="0"
+                  class="dropdown-content p-0 mt-1 block z-10 menu shadow bg-white border border-base-300 rounded-md w-52"
+                >
+                  <div
+                    v-for="(font, index) in fonts"
+                    :key="index"
+                    :value="font.value"
+                    :class="{ 'bg-base-300': preferences.font == font.value, [font.class]: true }"
+                    class="hover:bg-base-300 px-2 py-1.5 cursor-pointer"
+                    @click="[font.value ? preferences.font = font.value : delete preferences.font, closeDropdown()]"
+                  >
+                    {{ font.label }}
+                  </div>
+                </div>
+              </div>
+            </span>
+            <span class="relative">
+              <select
+                class="select input-bordered bg-white select-sm text-center pl-2"
+                style="font-size: 16px; width: 86px; text-align-last: center;"
+                @change="$event.target.value ? preferences.font_size = parseInt($event.target.value) : delete preferences.font_size"
+              >
+                <option
+                  :selected="!preferences.font_size"
+                  value=""
+                >
+                  Auto
+                </option>
+                <option
+                  v-for="size in sizes"
+                  :key="size"
+                  :value="size"
+                  :selected="size === preferences.font_size"
+                >
+                  {{ size }}
+                </option>
+              </select>
+              <span
+                class="border-l pl-1.5 absolute bg-white bottom-0 pointer-events-none text-sm h-5"
+                style="right: 13px; top: 7px"
+              >
+                pt
+              </span>
+            </span>
+            <span>
+              <div
+                class="join"
+                style="height: 32px"
+              >
+                <button
+                  v-for="(type, index) in types"
+                  :key="index"
+                  class="btn btn-sm join-item bg-white input-bordered hover:border-base-content/20 hover:bg-base-200/50 px-2"
+                  :class="{ '!bg-base-300': preferences.font_type?.includes(type.value) }"
+                  @click="setFontType(type.value)"
+                >
+                  <component :is="type.icon" />
+                </button>
+              </div>
+            </span>
+            <span>
+              <div
+                class="join"
+                style="height: 32px"
+              >
+                <button
+                  v-for="(align, index) in aligns"
+                  :key="index"
+                  class="btn btn-sm join-item bg-white input-bordered hover:border-base-content/20 hover:bg-base-200/50 px-2"
+                  :class="{ '!bg-base-300': preferences.align === align.value }"
+                  @click="align.value && preferences.align != align.value ? preferences.align = align.value : delete preferences.align"
+                >
+                  <component :is="align.icon" />
+                </button>
+              </div>
+            </span>
+            <span>
+              <select
+                class="input input-bordered bg-white input-sm text-lg rounded-md"
+                style="-webkit-appearance: none; -moz-appearance: none; text-indent: 0px; text-overflow: ''; padding: 0px 6px; height: 32px"
+                @change="$event.target.value ? preferences.color = $event.target.value : delete preferences.color"
+              >
+                <option
+                  v-for="(color, index) in colors"
+                  :key="index"
+                  :value="color.value"
+                  :selected="color.value == preferences.color"
+                >
+                  {{ color.label }}
+                </option>
+              </select>
+            </span>
+          </div>
+        </div>
+        <div class="mt-4">
+          <div
+            class="flex items-center border border-base-content/20 rounded-xl bg-white px-4 h-16 modal-field-font-preview"
+            :style="{
+              color: preferences.color || 'black',
+              fontSize: (preferences.font_size || 12) + 'pt',
+            }"
+            :class="textClasses"
+          >
+            <span
+              contenteditable="true"
+              class="outline-none"
+            >
+              {{ field.default_value || field.name || buildDefaultName(field, template.fields) }}
+            </span>
+          </div>
+        </div>
+        <div class="mt-4">
+          <button
+            class="base-button w-full modal-save-button"
+            @click.prevent="saveAndClose"
+          >
+            {{ t('save') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { IconChevronDown, IconBold, IconItalic, IconAlignLeft, IconAlignRight, IconAlignCenter } from '@tabler/icons-vue'
+
+export default {
+  name: 'FontModal',
+  components: {
+    IconChevronDown
+  },
+  inject: ['t', 'save', 'template'],
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    buildDefaultName: {
+      type: Function,
+      required: true
+    }
+  },
+  emits: ['close'],
+  data () {
+    return {
+      preferences: {}
+    }
+  },
+  computed: {
+    fonts () {
+      return [
+        { value: null, label: 'Default' },
+        { value: 'Times', label: 'Times', class: 'font-serif' },
+        { value: 'Courier', label: 'Courier', class: 'font-mono' }
+      ]
+    },
+    types () {
+      return [
+        { icon: IconBold, value: 'bold' },
+        { icon: IconItalic, value: 'italic' }
+      ]
+    },
+    aligns () {
+      return [
+        { icon: IconAlignLeft, value: 'left' },
+        { icon: IconAlignCenter, value: 'center' },
+        { icon: IconAlignRight, value: 'right' }
+      ]
+    },
+    sizes () {
+      return [...Array(23).keys()].map(i => i + 6)
+    },
+    colors () {
+      return [
+        { label: '⬛', value: 'black' },
+        { label: '🟦', value: 'blue' },
+        { label: '🟥', value: 'red' }
+      ]
+    },
+    textClasses () {
+      return {
+        'font-mono': this.preferences.font === 'Courier',
+        'font-serif': this.preferences.font === 'Times',
+        'justify-center': this.preferences.align === 'center',
+        'justify-start': this.preferences.align === 'left',
+        'justify-end': this.preferences.align === 'right',
+        'font-bold': ['bold_italic', 'bold'].includes(this.preferences.font_type),
+        italic: ['bold_italic', 'italic'].includes(this.preferences.font_type)
+      }
+    },
+    keys () {
+      return ['font_type', 'font_size', 'color', 'align', 'font']
+    }
+  },
+  created () {
+    this.preferences = this.keys.reduce((acc, key) => {
+      acc[key] = this.field.preferences?.[key]
+
+      return acc
+    }, {})
+  },
+  methods: {
+    closeDropdown () {
+      this.$el.getRootNode().activeElement.blur()
+    },
+    setFontType (value) {
+      if (value === 'bold') {
+        if (this.preferences.font_type === 'bold') {
+          delete this.preferences.font_type
+        } else if (this.preferences.font_type === 'italic') {
+          this.preferences.font_type = 'bold_italic'
+        } else if (this.preferences.font_type === 'bold_italic') {
+          this.preferences.font_type = 'italic'
+        } else {
+          this.preferences.font_type = value
+        }
+      }
+
+      if (value === 'italic') {
+        if (this.preferences.font_type === 'italic') {
+          delete this.preferences.font_type
+        } else if (this.preferences.font_type === 'bold') {
+          this.preferences.font_type = 'bold_italic'
+        } else if (this.preferences.font_type === 'bold_italic') {
+          this.preferences.font_type = 'bold'
+        } else {
+          this.preferences.font_type = value
+        }
+      }
+    },
+    saveAndClose () {
+      this.field.preferences ||= {}
+
+      this.keys.forEach((key) => delete this.field.preferences[key])
+
+      Object.assign(this.field.preferences, this.preferences)
+
+      this.save()
+
+      this.$emit('close')
+    }
+  }
+}
+</script>

app/javascript/template_builder/formula_modal.vue

@@ -8,12 +8,12 @@
     />
     <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>
+        <span class="modal-title">
           {{ t('formula') }} - {{ field.name || buildDefaultName(field, template.fields) }}
         </span>
         <a
           href="#"
-          class="text-xl"
+          class="text-xl modal-close-button"
           @click.prevent="$emit('close')"
         >&times;</a>
       </div>
@@ -111,7 +111,7 @@
           </div>
         </div>
         <button
-          class="base-button w-full"
+          class="base-button w-full modal-save-button"
           @click.prevent="validateSaveAndClose"
         >
           {{ t('save') }}

app/javascript/template_builder/i18n.js

@@ -1,4 +1,7 @@
 const en = {
+  font: 'Font',
+  party: 'Party',
+  method: 'Method',
   reorder_fields: 'Reorder fields',
   verify_id: 'Verify ID',
   obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more: 'Obtain qualified electronic signature (QeS) with the trusted provider. Click to learn more.',
@@ -159,6 +162,9 @@ const en = {
 }
 
 const es = {
+  fuente: 'Fuente',
+  party: 'Parte',
+  method: 'Método',
   reorder_fields: 'Reordenar campos',
   verify_id: 'Verificar ID',
   obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more: 'Obtenga una firma electrónica cualificada (QeS) con el proveedor de confianza. Haga clic para obtener más información.',
@@ -319,6 +325,9 @@ const es = {
 }
 
 const it = {
+  font: 'Carattere',
+  party: 'Parte',
+  method: 'Metodo',
   reorder_fields: 'Riordina i campi',
   verify_id: 'Verifica ID',
   obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more: 'Ottieni una firma elettronica qualificata (QeS) con il fornitore di fiducia. Clicca per saperne di più.',
@@ -479,6 +488,9 @@ const it = {
 }
 
 const pt = {
+  fonte: 'Fonte',
+  party: 'Parte',
+  method: 'Método',
   reorder_fields: 'Reorganizar campos',
   verify_id: 'Verificar ID',
   obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more: 'Obtenha a assinatura eletrônica qualificada (QeS) com o provedor confiável. Clique para saber mais.',
@@ -639,6 +651,9 @@ const pt = {
 }
 
 const fr = {
+  font: 'Police',
+  party: 'Partie',
+  method: 'Méthode',
   reorder_fields: 'Réorganiser les champs',
   verify_id: "Vérifier l'ID",
   obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more: 'Obtenez une signature électronique qualifiée (QeS) avec le fournisseur de confiance. Cliquez pour en savoir plus.',
@@ -799,6 +814,9 @@ const fr = {
 }
 
 const de = {
+  font: 'Schriftart',
+  party: 'Partei',
+  method: 'Verfahren',
   reorder_fields: 'Felder neu anordnen',
   verify_id: 'ID überprüfen',
   obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more: 'Erhalten Sie eine qualifizierte elektronische Signatur (QeS) beim vertrauenswürdigen Anbieter. Klicken Sie hier, um mehr zu erfahren.',

app/javascript/template_builder/mobile_draw_field.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="absolute text-center w-full bottom-0 pr-3 mb-4">
-    <span class="w-full bg-base-200 px-4 py-2 rounded-md inline-flex space-x-2 mx-auto items-center justify-between mb-2 z-20">
+    <span class="w-full bg-base-200 px-4 py-2 rounded-md inline-flex space-x-2 mx-auto items-center justify-between mb-2 z-20 draw-field-container-mobile">
       <div class="flex items-center space-x-2">
         <component
           :is="fieldIcons[drawField.type]"

app/javascript/template_builder/mobile_fields.vue

@@ -1,7 +1,5 @@
 <template>
-  <span
-    class="dropdown dropdown-top dropdown-end absolute bottom-4 right-4 z-10"
-  >
+  <span class="dropdown dropdown-top dropdown-end absolute bottom-4 right-4 z-10 fields-dropdown-mobile">
     <label
       class="btn btn-neutral text-white btn-circle btn-lg group"
       tabindex="0"

app/javascript/template_builder/payment_settings.vue

@@ -1,6 +1,6 @@
 <template>
   <span
-    class="dropdown dropdown-end"
+    class="dropdown dropdown-end field-settings-dropdown"
     :class="{ 'dropdown-open': ((!field.preferences?.price && !field.preferences?.formula) || !isConnected) && !isLoading }"
   >
     <label

app/javascript/template_builder/preview.vue

@@ -23,7 +23,7 @@
           >
             <div>
               <button
-                class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors p-0"
+                class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors p-0 document-control-button"
                 @click.stop="isShowConditionsModal = true"
               >
                 <IconRouteAltLeft
@@ -48,7 +48,7 @@
           >
             <div>
               <button
-                class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors"
+                class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
                 style="width: 24px; height: 24px"
                 @click.stop="$emit('remove', item)"
               >
@@ -63,7 +63,7 @@
                 class="tooltip tooltip-left before:text-xs"
               >
                 <button
-                  class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors p-0"
+                  class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors p-0 document-control-button"
                   @click.stop="$emit('reorder', item)"
                 >
                   <IconSortDescending2
@@ -75,14 +75,14 @@
               </span>
               <template v-if="withArrows">
                 <button
-                  class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors"
+                  class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
                   style="width: 24px; height: 24px"
                   @click.stop="$emit('up', item)"
                 >
                   &uarr;
                 </button>
                 <button
-                  class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors"
+                  class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
                   style="width: 24px; height: 24px"
                   @click.stop="$emit('down', item)"
                 >
@@ -94,7 +94,7 @@
         </div>
       </div>
     </div>
-    <div class="flex pb-2 pt-1.5">
+    <div class="flex pb-2 pt-1.5 document-preview-name">
       <Contenteditable
         :model-value="item.name"
         :icon-width="16"

app/javascript/template_builder/replace.vue

@@ -1,7 +1,7 @@
 <template>
   <label
     :for="inputId"
-    class="btn btn-neutral btn-xs text-white transition-none"
+    class="btn btn-neutral btn-xs text-white transition-none replace-document-button"
     :class="{ 'opacity-100': isLoading || isProcessing }"
   >
     {{ message }}

app/javascript/template_builder/upload.vue

@@ -3,7 +3,7 @@
     <label
       id="add_document_button"
       :for="inputId"
-      class="btn btn-outline w-full"
+      class="btn btn-outline w-full add-document-button"
       :class="{ 'btn-disabled': isLoading || isProcessing }"
     >
       <IconInnerShadowTop

app/jobs/process_submission_expired_job.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class ProcessSubmissionExpiredJob
+  include Sidekiq::Job
+
+  def perform(params = {})
+    submission = Submission.find(params['submission_id'])
+
+    return if submission.archived_at?
+    return if submission.template.archived_at?
+    return if submission.submitters.where.not(declined_at: nil).exists?
+    return unless submission.submitters.exists?(completed_at: nil)
+
+    WebhookUrls.for_account_id(submission.account_id, %w[submission.expired]).each do |webhook|
+      SendSubmissionExpiredWebhookRequestJob.perform_async('submission_id' => submission.id,
+                                                           'webhook_url_id' => webhook.id)
+    end
+  end
+end

app/jobs/send_form_completed_webhook_request_job.rb

@@ -5,9 +5,7 @@ class SendFormCompletedWebhookRequestJob
 
   sidekiq_options queue: :webhooks
 
-  USER_AGENT = 'DocuSeal.com Webhook'
-
-  MAX_ATTEMPTS = 20
+  MAX_ATTEMPTS = 12
 
   def perform(params = {})
     submitter = Submitter.find(params['submitter_id'])
@@ -21,19 +19,8 @@ class SendFormCompletedWebhookRequestJob
 
     ActiveStorage::Current.url_options = Docuseal.default_url_options
 
-    resp = begin
-      Faraday.post(webhook_url.url,
-                   {
-                     event_type: 'form.completed',
-                     timestamp: Time.current,
-                     data: Submitters::SerializeForWebhook.call(submitter)
-                   }.to_json,
-                   'Content-Type' => 'application/json',
-                   'User-Agent' => USER_AGENT,
-                   **webhook_url.secret.to_h)
-    rescue Faraday::Error
-      nil
-    end
+    resp = SendWebhookRequest.call(webhook_url, event_type: 'form.completed',
+                                                data: Submitters::SerializeForWebhook.call(submitter))
 
     if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
        (!Docuseal.multitenant? || submitter.account.account_configs.exists?(key: :plan))

app/jobs/send_form_declined_webhook_request_job.rb

@@ -5,8 +5,6 @@ class SendFormDeclinedWebhookRequestJob
 
   sidekiq_options queue: :webhooks
 
-  USER_AGENT = 'DocuSeal.com Webhook'
-
   MAX_ATTEMPTS = 10
 
   def perform(params = {})
@@ -19,19 +17,8 @@ class SendFormDeclinedWebhookRequestJob
 
     ActiveStorage::Current.url_options = Docuseal.default_url_options
 
-    resp = begin
-      Faraday.post(webhook_url.url,
-                   {
-                     event_type: 'form.declined',
-                     timestamp: Time.current,
-                     data: Submitters::SerializeForWebhook.call(submitter)
-                   }.to_json,
-                   **webhook_url.secret.to_h,
-                   'Content-Type' => 'application/json',
-                   'User-Agent' => USER_AGENT)
-    rescue Faraday::Error
-      nil
-    end
+    resp = SendWebhookRequest.call(webhook_url, event_type: 'form.declined',
+                                                data: Submitters::SerializeForWebhook.call(submitter))
 
     if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
        (!Docuseal.multitenant? || submitter.account.account_configs.exists?(key: :plan))

app/jobs/send_form_started_webhook_request_job.rb

@@ -5,8 +5,6 @@ class SendFormStartedWebhookRequestJob
 
   sidekiq_options queue: :webhooks
 
-  USER_AGENT = 'DocuSeal.com Webhook'
-
   MAX_ATTEMPTS = 10
 
   def perform(params = {})
@@ -19,19 +17,8 @@ class SendFormStartedWebhookRequestJob
 
     ActiveStorage::Current.url_options = Docuseal.default_url_options
 
-    resp = begin
-      Faraday.post(webhook_url.url,
-                   {
-                     event_type: 'form.started',
-                     timestamp: Time.current,
-                     data: Submitters::SerializeForWebhook.call(submitter)
-                   }.to_json,
-                   **webhook_url.secret.to_h,
-                   'Content-Type' => 'application/json',
-                   'User-Agent' => USER_AGENT)
-    rescue Faraday::Error
-      nil
-    end
+    resp = SendWebhookRequest.call(webhook_url, event_type: 'form.started',
+                                                data: Submitters::SerializeForWebhook.call(submitter))
 
     if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
        (!Docuseal.multitenant? || submitter.account.account_configs.exists?(key: :plan))

app/jobs/send_form_viewed_webhook_request_job.rb

@@ -5,8 +5,6 @@ class SendFormViewedWebhookRequestJob
 
   sidekiq_options queue: :webhooks
 
-  USER_AGENT = 'DocuSeal.com Webhook'
-
   MAX_ATTEMPTS = 10
 
   def perform(params = {})
@@ -19,19 +17,8 @@ class SendFormViewedWebhookRequestJob
 
     ActiveStorage::Current.url_options = Docuseal.default_url_options
 
-    resp = begin
-      Faraday.post(webhook_url.url,
-                   {
-                     event_type: 'form.viewed',
-                     timestamp: Time.current,
-                     data: Submitters::SerializeForWebhook.call(submitter)
-                   }.to_json,
-                   **webhook_url.secret.to_h,
-                   'Content-Type' => 'application/json',
-                   'User-Agent' => USER_AGENT)
-    rescue Faraday::Error
-      nil
-    end
+    resp = SendWebhookRequest.call(webhook_url, event_type: 'form.viewed',
+                                                data: Submitters::SerializeForWebhook.call(submitter))
 
     if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
        (!Docuseal.multitenant? || submitter.account.account_configs.exists?(key: :plan))

app/jobs/send_submission_archived_webhook_request_job.rb

@@ -5,8 +5,6 @@ class SendSubmissionArchivedWebhookRequestJob
 
   sidekiq_options queue: :webhooks
 
-  USER_AGENT = 'DocuSeal.com Webhook'
-
   MAX_ATTEMPTS = 10
 
   def perform(params = {})
@@ -17,19 +15,8 @@ class SendSubmissionArchivedWebhookRequestJob
 
     return if webhook_url.url.blank? || webhook_url.events.exclude?('submission.archived')
 
-    resp = begin
-      Faraday.post(webhook_url.url,
-                   {
-                     event_type: 'submission.archived',
-                     timestamp: Time.current,
-                     data: submission.as_json(only: %i[id archived_at])
-                   }.to_json,
-                   **webhook_url.secret.to_h,
-                   'Content-Type' => 'application/json',
-                   'User-Agent' => USER_AGENT)
-    rescue Faraday::Error
-      nil
-    end
+    resp = SendWebhookRequest.call(webhook_url, event_type: 'submission.archived',
+                                                data: submission.as_json(only: %i[id archived_at]))
 
     if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
        (!Docuseal.multitenant? || submission.account.account_configs.exists?(key: :plan))

app/jobs/send_submission_completed_webhook_request_job.rb

@@ -5,8 +5,6 @@ class SendSubmissionCompletedWebhookRequestJob
 
   sidekiq_options queue: :webhooks
 
-  USER_AGENT = 'DocuSeal.com Webhook'
-
   MAX_ATTEMPTS = 10
 
   def perform(params = {})
@@ -17,19 +15,8 @@ class SendSubmissionCompletedWebhookRequestJob
 
     return if webhook_url.url.blank? || webhook_url.events.exclude?('submission.completed')
 
-    resp = begin
-      Faraday.post(webhook_url.url,
-                   {
-                     event_type: 'submission.completed',
-                     timestamp: Time.current,
-                     data: Submissions::SerializeForApi.call(submission)
-                   }.to_json,
-                   'Content-Type' => 'application/json',
-                   'User-Agent' => USER_AGENT,
-                   **webhook_url.secret.to_h)
-    rescue Faraday::Error
-      nil
-    end
+    resp = SendWebhookRequest.call(webhook_url, event_type: 'submission.completed',
+                                                data: Submissions::SerializeForApi.call(submission))
 
     if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
        (!Docuseal.multitenant? || submission.account.account_configs.exists?(key: :plan))

app/jobs/send_submission_created_webhook_request_job.rb

@@ -5,8 +5,6 @@ class SendSubmissionCreatedWebhookRequestJob
 
   sidekiq_options queue: :webhooks
 
-  USER_AGENT = 'DocuSeal.com Webhook'
-
   MAX_ATTEMPTS = 10
 
   def perform(params = {})
@@ -17,19 +15,8 @@ class SendSubmissionCreatedWebhookRequestJob
 
     return if webhook_url.url.blank? || webhook_url.events.exclude?('submission.created')
 
-    resp = begin
-      Faraday.post(webhook_url.url,
-                   {
-                     event_type: 'submission.created',
-                     timestamp: Time.current,
-                     data: Submissions::SerializeForApi.call(submission)
-                   }.to_json,
-                   **webhook_url.secret.to_h,
-                   'Content-Type' => 'application/json',
-                   'User-Agent' => USER_AGENT)
-    rescue Faraday::Error
-      nil
-    end
+    resp = SendWebhookRequest.call(webhook_url, event_type: 'submission.created',
+                                                data: Submissions::SerializeForApi.call(submission))
 
     if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
        (!Docuseal.multitenant? || submission.account.account_configs.exists?(key: :plan))

app/jobs/send_submission_expired_webhook_request_job.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+class SendSubmissionExpiredWebhookRequestJob
+  include Sidekiq::Job
+
+  sidekiq_options queue: :webhooks
+
+  MAX_ATTEMPTS = 10
+
+  def perform(params = {})
+    submission = Submission.find(params['submission_id'])
+    webhook_url = WebhookUrl.find(params['webhook_url_id'])
+
+    attempt = params['attempt'].to_i
+
+    return if webhook_url.url.blank? || webhook_url.events.exclude?('submission.expired')
+
+    resp = SendWebhookRequest.call(webhook_url, event_type: 'submission.expired',
+                                                data: Submissions::SerializeForApi.call(submission))
+
+    if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
+       (!Docuseal.multitenant? || submission.account.account_configs.exists?(key: :plan))
+      SendSubmissionExpiredWebhookRequestJob.perform_in((2**attempt).minutes, {
+                                                          'submission_id' => submission.id,
+                                                          'webhook_url_id' => webhook_url.id,
+                                                          'attempt' => attempt + 1,
+                                                          'last_status' => resp&.status.to_i
+                                                        })
+    end
+  end
+end

app/jobs/send_submitter_invitation_email_job.rb

@@ -8,6 +8,12 @@ class SendSubmitterInvitationEmailJob
 
     return if submitter.submission.source == 'invite' && !Accounts.can_send_emails?(submitter.account, on_events: true)
 
+    unless Accounts.can_send_invitation_emails?(submitter.account)
+      Rollbar.warning("Skip email: #{submitter.account.id}") if defined?(Rollbar)
+
+      return
+    end
+
     mail = SubmitterMailer.invitation_email(submitter)
 
     Submitters::ValidateSending.call(submitter, mail)
@@ -17,6 +23,6 @@ class SendSubmitterInvitationEmailJob
     SubmissionEvent.create!(submitter:, event_type: 'send_email')
 
     submitter.sent_at ||= Time.current
-    submitter.save
+    submitter.save!
   end
 end

app/jobs/send_template_created_webhook_request_job.rb

@@ -5,8 +5,6 @@ class SendTemplateCreatedWebhookRequestJob
 
   sidekiq_options queue: :webhooks
 
-  USER_AGENT = 'DocuSeal.com Webhook'
-
   MAX_ATTEMPTS = 10
 
   def perform(params = {})
@@ -17,19 +15,8 @@ class SendTemplateCreatedWebhookRequestJob
 
     return if webhook_url.url.blank? || webhook_url.events.exclude?('template.created')
 
-    resp = begin
-      Faraday.post(webhook_url.url,
-                   {
-                     event_type: 'template.created',
-                     timestamp: Time.current,
-                     data: Templates::SerializeForApi.call(template)
-                   }.to_json,
-                   **webhook_url.secret.to_h,
-                   'Content-Type' => 'application/json',
-                   'User-Agent' => USER_AGENT)
-    rescue Faraday::Error
-      nil
-    end
+    resp = SendWebhookRequest.call(webhook_url, event_type: 'template.created',
+                                                data: Templates::SerializeForApi.call(template))
 
     if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
        (!Docuseal.multitenant? || template.account.account_configs.exists?(key: :plan))

app/jobs/send_template_updated_webhook_request_job.rb

@@ -5,8 +5,6 @@ class SendTemplateUpdatedWebhookRequestJob
 
   sidekiq_options queue: :webhooks
 
-  USER_AGENT = 'DocuSeal.com Webhook'
-
   MAX_ATTEMPTS = 10
 
   def perform(params = {})
@@ -17,19 +15,8 @@ class SendTemplateUpdatedWebhookRequestJob
 
     return if webhook_url.url.blank? || webhook_url.events.exclude?('template.updated')
 
-    resp = begin
-      Faraday.post(webhook_url.url,
-                   {
-                     event_type: 'template.updated',
-                     timestamp: Time.current,
-                     data: Templates::SerializeForApi.call(template)
-                   }.to_json,
-                   **webhook_url.secret.to_h,
-                   'Content-Type' => 'application/json',
-                   'User-Agent' => USER_AGENT)
-    rescue Faraday::Error
-      nil
-    end
+    resp = SendWebhookRequest.call(webhook_url, event_type: 'template.updated',
+                                                data: Templates::SerializeForApi.call(template))
 
     if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
        (!Docuseal.multitenant? || template.account.account_configs.exists?(key: :plan))

app/mailers/submitter_mailer.rb

@@ -14,8 +14,20 @@ class SubmitterMailer < ApplicationMailer
       @email_message = submitter.account.email_messages.find_by(uuid: submitter.preferences['email_message_uuid'])
     end
 
-    @body = @email_message&.body.presence || @submitter.template.preferences['request_email_body'].presence
-    @subject = @email_message&.subject.presence || @submitter.template.preferences['request_email_subject'].presence
+    template_submitters_index =
+      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 ||
+            @submitter.template.preferences['request_email_body'].presence
+
+    @subject = @email_message&.subject.presence ||
+               template_submitters_index.dig(@submitter.uuid, 'request_email_subject').presence ||
+               @submitter.template.preferences['request_email_subject'].presence
 
     @email_config = AccountConfigs.find_for_account(@current_account, AccountConfig::SUBMITTER_INVITATION_EMAIL_KEY)
 
@@ -24,14 +36,7 @@ class SubmitterMailer < ApplicationMailer
     reply_to = build_submitter_reply_to(@submitter)
 
     I18n.with_locale(@current_account.locale) do
-      subject =
-        if @email_config || @subject
-          ReplaceEmailVariables.call(@subject || @email_config.value['subject'], submitter:)
-        elsif @submitter.with_signature_fields?
-          I18n.t(:you_are_invited_to_sign_a_document)
-        else
-          I18n.t(:you_are_invited_to_submit_a_form)
-        end
+      subject = build_invite_subject(@subject, @email_config, submitter)
 
       mail(
         to: @submitter.friendly_name,
@@ -196,6 +201,20 @@ class SubmitterMailer < ApplicationMailer
     user.role == 'integration' ? user.friendly_name.sub(/\+\w+@/, '@') : user.friendly_name
   end
 
+  def build_invite_subject(subject, email_config, submitter)
+    if email_config || subject
+      ReplaceEmailVariables.call(subject || email_config.value['subject'], submitter:)
+    elsif submitter.with_signature_fields?
+      I18n.t(:you_are_invited_to_sign_a_document)
+    else
+      I18n.t(:you_are_invited_to_submit_a_form)
+    end
+  end
+
+  def build_submitter_preferences_index(submitter)
+    submitter.template.preferences['submitters'].to_a.index_by { |e| e['uuid'] }
+  end
+
   def add_attachments_with_size_limit(submitter, storage_attachments, current_size, filename_format = nil)
     total_size = current_size
 

app/models/submitter.rb

@@ -55,6 +55,7 @@ class Submitter < ApplicationRecord
   has_many_attached :attachments
   has_many_attached :preview_documents
   has_many :template_accesses, through: :template
+  has_many :email_events, as: :emailable, dependent: (Docuseal.multitenant? ? nil : :destroy)
 
   has_many :document_generation_events, dependent: :destroy
   has_many :submission_events, dependent: :destroy
@@ -63,6 +64,8 @@ class Submitter < ApplicationRecord
 
   scope :completed, -> { where.not(completed_at: nil) }
 
+  after_destroy :anonymize_email_events, if: -> { Docuseal.multitenant? }
+
   def status
     if declined_at?
       'declined'
@@ -108,4 +111,12 @@ class Submitter < ApplicationRecord
       fields.any? { |f| f['submitter_uuid'] == uuid && signature_field_types.include?(f['type']) }
     end
   end
+
+  private
+
+  def anonymize_email_events
+    email_events.each do |event|
+      event.update!(email: Digest::MD5.base64digest(event.email))
+    end
+  end
 end

app/models/webhook_url.rb

@@ -28,10 +28,12 @@ class WebhookUrl < ApplicationRecord
     form.started
     form.completed
     form.declined
+    submission.created
+    submission.completed
+    submission.expired
+    submission.archived
     template.created
     template.updated
-    submission.created
-    submission.archived
   ].freeze
 
   belongs_to :account

app/views/accounts/show.html.erb

@@ -63,7 +63,7 @@
               <span>
                 <%= t('add_signature_id_to_the_documents') %>
               </span>
-              <%= f.check_box :value, class: 'toggle', checked: account_config.value, onchange: 'this.form.requestSubmit()' %>
+              <%= f.check_box :value, class: 'toggle', checked: account_config.value, onchange: 'this.form.requestSubmit()', disabled: can?(:manage, :cfr) %>
             </div>
           <% end %>
         <% end %>
@@ -75,7 +75,7 @@
               <span>
                 <%= t('require_signing_reason') %>
               </span>
-              <%= f.check_box :value, class: 'toggle', checked: account_config.value, onchange: 'this.form.requestSubmit()' %>
+              <%= f.check_box :value, class: 'toggle', checked: account_config.value, onchange: 'this.form.requestSubmit()', disabled: can?(:manage, :cfr) %>
             </div>
           <% end %>
         <% end %>
@@ -153,6 +153,7 @@
         <% end %>
       </div>
     <% end %>
+    <%= render 'compliances' %>
     <%= render 'integrations' %>
     <% if can?(:manage, current_account) && Docuseal.multitenant? && true_user == current_user %>
       <div class="px-1 mt-8">

app/views/esign_settings/show.html.erb

@@ -173,7 +173,7 @@
                 <%= t('document_download_filename_format') %>
               </span>
               <div class="mt-3">
-                <%= f.select :value, [["#{I18n.t('document_name')}.pdf", '{document.name}'], ["#{I18n.t('document_name')} - name@domain.com.pdf", '{document.name} - {submission.submitters}'], ["#{I18n.t('document_name')} - name@domain.com - #{I18n.l(Time.current.beginning_of_year.in_time_zone(current_account.timezone), format: :short)}.pdf", '{document.name} - {submission.submitters} - {submission.completed_at}']], {}, class: 'base-select', onchange: 'this.form.requestSubmit()' %>
+                <%= f.select :value, [["#{I18n.t('document_name')}.pdf", '{document.name}'], ["#{I18n.t('document_name')} - #{I18n.t(:signed)}.pdf", '{document.name} - {submission.status}'], ["#{I18n.t('document_name')} - name@domain.com.pdf", '{document.name} - {submission.submitters}'], ["#{I18n.t('document_name')} - name@domain.com - #{I18n.l(Time.current.beginning_of_year.in_time_zone(current_account.timezone), format: :short)}.pdf", '{document.name} - {submission.submitters} - {submission.completed_at}']], {}, class: 'base-select', onchange: 'this.form.requestSubmit()' %>
               </div>
             </div>
           <% end %>

app/views/icons/_2fa.html.erb

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="2">
+  <path d="M7 16h-4l3.47 -4.66a2 2 0 1 0 -3.47 -1.54"></path>
+  <path d="M10 16v-8h4"></path> <path d="M10 12l3 0"></path>
+  <path d="M17 16v-6a2 2 0 0 1 4 0v6"></path>
+  <path d="M17 13l4 0"></path>
+</svg>

app/views/icons/_circle_dot.html.erb

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

app/views/icons/_hand_click.html.erb

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="2">
+  <path d="M8 13v-8.5a1.5 1.5 0 0 1 3 0v7.5"></path>
+  <path d="M11 11.5v-2a1.5 1.5 0 0 1 3 0v2.5"></path>
+  <path d="M14 10.5a1.5 1.5 0 0 1 3 0v1.5"></path>
+  <path d="M17 11.5a1.5 1.5 0 0 1 3 0v4.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7l-.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47"></path>
+  <path d="M5 3l-1 -1"></path>
+  <path d="M4 7h-1"></path>
+  <path d="M14 3l1 -1"></path>
+  <path d="M15 6h1"></path>
+</svg>

app/views/icons/_logs.html.erb

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="2">
+  <path d="M4 12h.01"></path>
+  <path d="M4 6h.01"></path>
+  <path d="M4 18h.01"></path>
+  <path d="M8 18h2"></path>
+  <path d="M8 12h2"></path>
+  <path d="M8 6h2"></path>
+  <path d="M14 6h6"></path>
+  <path d="M14 12h6"></path>
+  <path d="M14 18h6"></path>
+</svg>

app/views/icons/_mail_opened.html.erb

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="2">
+  <path d="M3 9l9 6l9 -6l-9 -6l-9 6"></path>
+  <path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10"></path>
+  <path d="M3 19l6 -6"></path>
+  <path d="M15 13l6 6"></path>
+</svg>

app/views/icons/_phone_check.html.erb

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="2">
+  <path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2"></path>
+  <path d="M15 6l2 2l4 -4"></path>
+</svg>

app/views/icons/_player_play.html.erb

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="2">
+  <path d="M7 4v16l13 -8z"></path>
+</svg>

app/views/layouts/application.html.erb

@@ -2,6 +2,9 @@
 <html data-theme="docuseal" lang="<%= I18n.locale %>">
   <head>
     <%= render 'layouts/head_tags' %>
+    <% if Docuseal.enable_pwa? %>
+      <link rel="manifest" href="/manifest.json">
+    <% end %>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>

app/views/pwa/manifest.json.erb

@@ -0,0 +1,25 @@
+{
+  "name": "<%= Docuseal.product_name %>",
+  "short_name": "<%= Docuseal.product_name %>",
+  "id": "/",
+  "icons": [
+    {
+      "src": "/logo.svg",
+      "type": "image/svg+xml",
+      "sizes": "any"
+    },
+    {
+      "src": "/apple-touch-icon.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    }
+  ],
+  "start_url": "/",
+  "display": "standalone",
+  "scope": "/",
+  "orientation": "natural",
+  "description": "<%= Docuseal.product_name %> is an open source platform that provides secure and efficient digital document signing and processing.",
+  "categories": ["productivity", "utilities"],
+  "theme_color": "#FAF7F4",
+  "background_color": "#FAF7F4"
+}

app/views/send_submission_email/success.html.erb

@@ -2,7 +2,7 @@
   <div class="space-y-6 mx-auto">
     <div class="space-y-6">
       <div class="flex items-center justify-center">
-        <%= render 'start_form/docuseal_logo' %>
+        <%= render 'start_form/banner' %>
       </div>
       <div class="text-center text-4xl font-bold">
         <%= t('email_has_been_sent') %>

app/views/shared/_email_attribution.html.erb

@@ -2,5 +2,9 @@
   ---
 </p>
 <p>
-  <%= t('sent_using_product_name_free_document_signing_html', product_url: "#{Docuseal::PRODUCT_EMAIL_URL}/start", product_name: Docuseal.product_name) %>
+  <% if @current_account&.testing? %>
+    <%= t('sent_using_product_name_in_testing_mode_html', product_url: "#{Docuseal::PRODUCT_EMAIL_URL}/start", product_name: Docuseal.product_name) %>
+  <% else %>
+    <%= t('sent_using_product_name_free_document_signing_html', product_url: "#{Docuseal::PRODUCT_EMAIL_URL}/start", product_name: Docuseal.product_name) %>
+  <% end %>
 </p>

app/views/shared/_navbar.html.erb

@@ -1,3 +1,4 @@
+<%= render 'shared/navbar_warning' %>
 <div class="max-w-6xl mb-4 mx-auto px-4 md:px-2 py-3 flex items-center justify-between">
   <div class="flex items-center space-x-4">
     <a href="<%= root_path %>" class="text-2xl font-bold items-center flex space-x-2">

app/views/start_form/show.html.erb

@@ -30,7 +30,9 @@
         <div dir="auto" class="form-control !mt-0">
           <%= f.label :email, t('email'), class: 'label' %>
           <%= f.email_field :email, value: current_user&.email || params[:email] || @submitter.email, required: true, class: 'base-input', placeholder: t('provide_your_email_to_start') %>
-          <%= @error_message %>
+          <% if @error_message %>
+            <span class="label-text-alt text-red-400 mt-1"><%= @error_message %></span>
+          <% end %>
         </div>
         <toggle-submit dir="auto" class="form-control">
           <%= f.button button_title(title: t('start'), disabled_with: t('starting')), class: 'base-button' %>

app/views/submission_events/index.html.erb

@@ -0,0 +1,49 @@
+<% event_colors = %w[bg-red-200 bg-sky-200 bg-emerald-200 bg-yellow-200 bg-purple-200 bg-pink-200 bg-cyan-200 bg-orange-200 bg-lime-200 bg-indigo-200] %>
+<% submitters_uuids = (@submission.template_submitters || @submission.template.submitters).pluck('uuid') %>
+<%= render 'shared/turbo_modal_large', title: t('event_log') do %>
+  <div class="pl-8 pr-4 py-4">
+    <ol class="relative border-s border-base-300 space-y-6">
+      <li class="ml-7">
+        <span class="absolute flex items-center justify-center w-7 h-7 rounded-full -start-3.5 ring-8 ring-base-100 text-base-content bg-gray-200">
+          <%= svg_icon('file_text', class: 'w-4 h-4') %>
+        </span>
+        <p class="text-sm leading-none text-base-content/60 pt-1.5">
+          <%= l(@submission.created_at.in_time_zone(current_account.timezone), format: :long, locale: current_account.locale) %>
+        </p>
+        <p class="text-base-content/80 mt-1">
+          <% if @submission.source == 'invite' %>
+            <%= t('submission_created_by_email_html', email: @submission.created_by_user.email) %>
+          <% elsif @submission.created_by_user %>
+            <%= t('submission_created_by_email_via_source_html', email: @submission.created_by_user.email, source: t("submission_sources.#{@submission.source}")) %>
+          <% else %>
+            <%= t('submission_created_via_source_html', source: t("submission_sources.#{@submission.source}")) %>
+          <% end %>
+        </p>
+      </li>
+      <% @submission.submission_events.order(:event_timestamp).each do |event| %>
+        <% submitter = @submission.submitters.find { |e| e.id == event.submitter_id } %>
+        <% bg_class = event_colors[submitters_uuids.index(submitter.uuid) % event_colors.length] %>
+        <% submitter_name = event.event_type.include?('sms') || event.event_type.include?('phone') ? (event.data['phone'] || submitter.phone) : (submitter.name || submitter.email || submitter.phone) %>
+        <li class="ml-7">
+          <span class="absolute flex items-center justify-center w-7 h-7 rounded-full -start-3.5 ring-8 ring-base-100 text-base-content <%= bg_class %>">
+            <%= svg_icon(SubmissionEventsController::SUBMISSION_EVENT_ICONS.fetch(event.event_type, 'circle_dot'), class: 'w-4 h-4') %>
+          </span>
+          <p class="text-sm leading-none text-base-content/60 pt-1.5">
+            <%= l(event.event_timestamp.in_time_zone(current_account.timezone), format: :long, locale: current_account.locale) %>
+          </p>
+          <p class="text-base-content/80 mt-1">
+            <% if event.event_type == 'complete_verification' %>
+              <%= t('submission_event_names.complete_verification_by_html', provider: event.data['method'], submitter_name:) %>
+            <% elsif event.event_type == 'invite_party' && (invited_submitter = @submission.submitters.find { |e| e.uuid == event.data['uuid'] }) && (name = @submission.template_submitters.find { |e| e['uuid'] == event.data['uuid'] }&.dig('name')) %>
+              <%= t('submission_event_names.invite_party_by_html', invited_submitter_name: [invited_submitter.name || invited_submitter.email || invited_submitter.phone, name].join(' '), submitter_name:) %>
+            <% elsif event.event_type.include?('send_') %>
+              <%= t("submission_event_names.#{event.event_type}_to_html", submitter_name:) %>
+            <% else %>
+              <%= t("submission_event_names.#{event.event_type}_by_html", submitter_name:) %>
+            <% end %>
+          </p>
+        </li>
+      <% end %>
+    </ol>
+  </div>
+<% end %>

app/views/submissions/_send_email.html.erb

@@ -1,3 +1,4 @@
+<% submitter_preferences_index = template.preferences['submitters'].to_a.index_by { |e| e['uuid'] } %>
 <div class="form-control">
   <% can_send_emails = Accounts.can_send_emails?(current_account) %>
   <div class="flex justify-between items-center">
@@ -36,10 +37,18 @@
 <% config = AccountConfigs.find_or_initialize_for_key(current_account, AccountConfig::SUBMITTER_INVITATION_EMAIL_KEY) %>
 <div id="message_field" class="card card-compact bg-base-300/40 hidden">
   <div class="card-body">
-    <div class="form-control space-y-2">
+    <%= tag.input id: toggle_uuid = SecureRandom.uuid, value: '1', name: 'request_email_per_submitter', class: 'peer', type: 'checkbox', hidden: true, checked: local_assigns[:message_per_submitter] != false && template.preferences['submitters'].to_a.size > 1 %>
+    <div class="peer-checked:hidden form-control space-y-2">
       <div class="form-control">
-        <%= f.label :subject, t('subject'), class: 'label' %>
-        <%= f.text_field :subject, value: local_assigns[:submitter_email_message]&.subject.presence || template.preferences['request_email_subject'].presence || config.value['subject'], required: true, class: '!text-sm base-input w-full', dir: 'auto' %>
+        <div class="flex justify-between">
+          <%= f.label :subject, t('subject'), class: 'label' %>
+          <% if template.submitters.size > 1 && template.submitters.size < 5 && local_assigns[:message_per_submitter] != false %>
+            <label for="<%= toggle_uuid %>" class="label underline">
+              <%= t('edit_per_party') %>
+            </label>
+          <% end %>
+        </div>
+        <%= 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['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">
@@ -49,7 +58,7 @@
           </span>
         </div>
         <autoresize-textarea>
-          <%= f.text_area :body, value: local_assigns[:submitter_email_message]&.body.presence || template.preferences['request_email_body'].presence || config.value['body'], required: true, class: 'base-textarea w-full', rows: 10, dir: 'auto' %>
+          <%= 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['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">
@@ -60,5 +69,44 @@
       </div>
       <%= render 'submissions/message_fields' %>
     </div>
+    <% if template.submitters.size > 1 && template.submitters.size < 5 && local_assigns[:message_per_submitter] != false %>
+      <div class="hidden peer-checked:block form-control space-y-2">
+        <% uuid = SecureRandom.uuid %>
+        <% options = template.submitters.map { |e| [e['name'], "request_email_#{uuid}_#{e['uuid']}"] } %>
+        <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>" class="flex relative px-1">
+          <ul class="tabs w-full flex flex-nowrap">
+            <% options.each_with_index do |(label, val), index| %>
+              <div class="w-full">
+                <%= f.radio_button :selected, val, checked: index.zero?, id: "#{val}_radio", data: { action: 'click:toggle-visible#trigger' }, class: 'hidden peer' %>
+                <%= f.label :selected, label, value: val, for: "#{val}_radio", class: 'tab w-full tab-lifted peer-checked:tab-active !bg-transparent' %>
+              </div>
+            <% end %>
+          </ul>
+        </toggle-visible>
+        <% template.submitters.each_with_index do |submitter, index| %>
+          <%= fields_for :submitter_preferences, nil, index: submitter['uuid'] do |ff| %>
+            <div id="request_email_<%= uuid %>_<%= submitter['uuid'] %>" class="<%= 'hidden' if index != 0 %>">
+              <div class="form-control">
+                <div class="flex justify-between">
+                  <%= ff.label :subject, t('subject'), class: 'label' %>
+                </div>
+                <%= ff.text_field :subject, value: local_assigns[:submitter_email_message]&.subject.presence || submitter_preferences_index.dig(submitter['uuid'], 'request_email_subject').presence || template.preferences['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(', ') %>">
+                    <%= 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['request_email_body'].presence || config.value['body'], required: true, class: 'base-textarea w-full', rows: 10, dir: 'auto' %>
+                </autoresize-textarea>
+              </div>
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
   </div>
 </div>

app/views/submissions/_value.html.erb

@@ -1,6 +1,8 @@
 <% align = field.dig('preferences', 'align') %>
 <% color = field.dig('preferences', 'color') %>
-<field-value dir="auto" class="flex absolute text-[1.6vw] lg:text-base <%= 'font-serif' if field.dig('preferences', 'font') == 'Times' %> <%= align == 'right' ? 'justify-end' : (align == 'center' ? 'justify-center' : '') %>" style="<%= "color: #{color}; " if color.present? %>width: <%= area['w'] * 100 %>%; height: <%= area['h'] * 100 %>%; left: <%= area['x'] * 100 %>%; top: <%= area['y'] * 100 %>%; <%= "font-size: clamp(4pt, 1.6vw, #{field['preferences']['font_size'].to_i * 1.23}pt); line-height: `clamp(6pt, 2.0vw, #{(field['preferences']['font_size'].to_i * 1.23) + 3}pt)`" if field.dig('preferences', 'font_size') %>">
+<% font = field.dig('preferences', 'font') %>
+<% font_type = field.dig('preferences', 'font_type') %>
+<field-value dir="auto" class="flex absolute text-[1.6vw] lg:text-base <%= 'font-mono' if font == 'Courier' %> <%= 'font-serif' if font == 'Times' %> <%= 'font-bold' if font_type == 'bold' || font_type == 'bold_italic' %> <%= 'italic' if font_type == 'italic' || font_type == 'bold_italic' %> <%= align == 'right' ? 'justify-end' : (align == 'center' ? 'justify-center' : '') %>" style="<%= "color: #{color}; " if color.present? %>width: <%= area['w'] * 100 %>%; height: <%= area['h'] * 100 %>%; left: <%= area['x'] * 100 %>%; top: <%= area['y'] * 100 %>%; <%= "font-size: clamp(4pt, 1.6vw, #{field['preferences']['font_size'].to_i * 1.23}pt); line-height: `clamp(6pt, 2.0vw, #{(field['preferences']['font_size'].to_i * 1.23) + 3}pt)`" if field.dig('preferences', 'font_size') %>">
   <% if field['type'] == 'signature' %>
     <div class="flex flex-col justify-between h-full overflow-hidden">
       <div class="flex-grow flex overflow-hidden" style="min-height: 50%">

app/views/submissions/show.html.erb

@@ -19,6 +19,11 @@
           <%= svg_icon('external_link', class: 'w-6 h-6') %>
           <span class="hidden md:inline"><%= t('audit_log') %></span>
         </a>
+      <% elsif signed_in? %>
+        <%= link_to submission_events_path(@submission), class: 'white-button', data: { turbo_frame: :modal } do %>
+          <%= svg_icon('logs', class: 'w-6 h-6') %>
+          <span class="hidden md:block"><%= t('event_log') %></span>
+        <% end %>
       <% end %>
       <% if last_submitter %>
         <% if is_all_completed || !is_combined_enabled %>
@@ -100,7 +105,18 @@
                   <% value = values[field['uuid']] %>
                   <% value ||= field['default_value'] if field['type'] == 'heading' %>
                   <% next if value.blank? %>
-                  <%= render 'submissions/value', area:, field:, attachments_index:, value:, locale: @submission.account.locale, timezone: @submission.account.timezone, submitter: submitters_index[field['submitter_uuid']], with_signature_id: %>
+                  <% if (mask = field.dig('preferences', 'mask').presence) && signed_in? && can?(:read, @submission) %>
+                    <span class="group">
+                      <span class="hidden group-hover:inline">
+                        <%= render 'submissions/value', area:, field:, attachments_index:, value:, locale: @submission.account.locale, timezone: @submission.account.timezone, submitter: submitters_index[field['submitter_uuid']], with_signature_id: %>
+                      </span>
+                      <span class="group-hover:hidden">
+                        <%= render 'submissions/value', area:, field:, attachments_index:, value: Array.wrap(value).map { |e| TextUtils.mask_value(e, mask) }.join(', '), locale: @submission.account.locale, timezone: @submission.account.timezone, submitter: submitters_index[field['submitter_uuid']], with_signature_id: %>
+                      </span>
+                    </span>
+                  <% else %>
+                    <%= render 'submissions/value', 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: submitters_index[field['submitter_uuid']], with_signature_id: %>
+                  <% end %>
                 <% end %>
               </div>
             </div>
@@ -118,7 +134,7 @@
           <div class="group border border-base-300 rounded-md px-2 py-1 mb-1">
             <div class="flex items-center justify-between">
               <div class="flex items-center space-x-1">
-                <span class="mx-1 w-3 h-3 shrink-0 rounded-full <%= colors[index] %>"></span>
+                <span class="mx-1 w-3 h-3 shrink-0 rounded-full <%= colors[index % 10] %>"></span>
                 <span class="text-lg" dir="auto">
                   <%= (@submission.template_submitters || @submission.template.submitters).find { |e| e['uuid'] == submitter&.uuid }&.dig('name') || "#{(index + 1).ordinalize} Submitter" %>
                 </span>
@@ -190,6 +206,11 @@
                 </a>
               </div>
             <% end %>
+            <% if signed_in? && submitter && submitter.completed_at? && submitter.email == current_user.email && submitter.completed_at > 1.month.ago && can?(:update, @submission) %>
+              <div class="mt-2 mb-1">
+                <%= button_to t('resubmit'), submitters_resubmit_path(submitter), method: :put, class: 'btn btn-sm btn-primary w-full', form: { target: '_blank' }, data: { turbo: false } %>
+              </div>
+            <% end %>
           </div>
         </div>
         <div class="px-1.5 mb-4">
@@ -222,10 +243,21 @@
                   </div>
                 <% elsif field['type'] == 'checkbox' %>
                   <%= svg_icon('check', class: 'w-6 h-6') %>
-                <% elsif field['type'] == 'date' %>
-                  <%= TimeUtils.format_date_string(value, field.dig('preferences', 'format'), @submission.account.locale) %>
                 <% else %>
-                  <%= Array.wrap(value).join(', ') %>
+                  <% if field['type'] == 'number' %>
+                    <% value = NumberUtils.format_number(value, field.dig('preferences', 'format')) %>
+                  <% elsif field['type'] == 'date' %>
+                    <% value = TimeUtils.format_date_string(value, field.dig('preferences', 'format'), @submission.account.locale) %>
+                  <% end %>
+                  <% if (mask = field.dig('preferences', 'mask').presence) %>
+                    <% if signed_in? && can?(:read, @submission) %>
+                      <div class="[&:not(:hover)]:after:content-[attr(data-value)] block whitespace-pre-wrap group" data-value="<%= Array.wrap(value).map { |e| TextUtils.mask_value(e, mask) }.join(', ') %>"><span class="hidden group-hover:block"><%= Array.wrap(value).join(', ') %></span></div>
+                    <% else %>
+                      <div class="whitespace-pre-wrap"><%= Array.wrap(value).map { |e| TextUtils.mask_value(e, mask) }.join(', ') %></div>
+                    <% end %>
+                  <% else %>
+                    <div class="whitespace-pre-wrap"><%= Array.wrap(value).join(', ') %></div>
+                  <% end %>
                 <% end %>
               </div>
             </div>

app/views/submissions_filters/_applied_filters.html.erb

@@ -1,5 +1,5 @@
 <% query_params = params.permit(:q).merge(filter_params) %>
-<% if icon = { 'declined' => 'x_circle', 'expired' => 'clock_cancel', 'partially_completed' => 'clock_edit' }[params[:status]] %>
+<% if icon = { 'declined' => 'x_circle', 'expired' => 'clock_cancel', 'partially_completed' => 'clock_edit', 'sent' => 'send', 'opened' => 'mail_opened' }[params[:status]] %>
   <div class="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-34 border-neutral-700">
     <%= link_to submissions_filter_path('status', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal' }, class: 'flex items-center space-x-1 w-full pr-1 md:max-w-[140px]' do %>
       <%= svg_icon(icon, class: 'w-5 h-5 shrink-0') %>