optimize large files upload

Dockerfile

@@ -2,7 +2,7 @@ FROM ruby:3.3.1-alpine3.18 as fonts
 
 WORKDIR /fonts
 
-RUN apk --no-cache add fontforge wget && wget https://github.com/satbyy/go-noto-universal/releases/download/v7.0/GoNotoKurrent-Regular.ttf && wget https://github.com/satbyy/go-noto-universal/releases/download/v7.0/GoNotoKurrent-Bold.ttf && wget https://github.com/impallari/DancingScript/raw/master/fonts/DancingScript-Regular.otf && wget https://cdn.jsdelivr.net/gh/notofonts/notofonts.github.io/fonts/NotoSansSymbols2/hinted/ttf/NotoSansSymbols2-Regular.ttf && wget https://github.com/Maxattax97/gnu-freefont/raw/master/ttf/FreeSans.ttf && wget https://github.com/impallari/DancingScript/raw/master/OFL.txt
+RUN apk --no-cache add fontforge wget && wget https://github.com/satbyy/go-noto-universal/releases/download/v7.0/GoNotoKurrent-Regular.ttf && wget https://github.com/satbyy/go-noto-universal/releases/download/v7.0/GoNotoKurrent-Bold.ttf && wget https://github.com/impallari/DancingScript/raw/master/fonts/v2031/DancingScript-Regular.otf && wget https://cdn.jsdelivr.net/gh/notofonts/notofonts.github.io/fonts/NotoSansSymbols2/hinted/ttf/NotoSansSymbols2-Regular.ttf && wget https://github.com/Maxattax97/gnu-freefont/raw/master/ttf/FreeSans.ttf && wget https://github.com/impallari/DancingScript/raw/master/OFL.txt
 
 RUN fontforge -lang=py -c 'font1 = fontforge.open("FreeSans.ttf"); font2 = fontforge.open("NotoSansSymbols2-Regular.ttf"); font1.mergeFonts(font2); font1.generate("FreeSans.ttf")'
 
@@ -37,11 +37,24 @@ FROM ruby:3.3.1-alpine3.18 as app
 ENV RAILS_ENV=production
 ENV BUNDLE_WITHOUT="development:test"
 ENV LD_PRELOAD=/lib/libgcompat.so.0
+ENV OPENSSL_CONF=/app/openssl_legacy.cnf
 
 WORKDIR /app
 
 RUN apk add --no-cache sqlite-dev libpq-dev mariadb-dev vips-dev vips-poppler poppler-utils vips-heif gcompat ttf-freefont && mkdir /fonts && rm /usr/share/fonts/freefont/FreeSans.otf
 
+RUN echo $'.include = /etc/ssl/openssl.cnf\n\
+\n\
+[provider_sect]\n\
+default = default_sect\n\
+legacy = legacy_sect\n\
+\n\
+[default_sect]\n\
+activate = 1\n\
+\n\
+[legacy_sect]\n\
+activate = 1' >> /app/openssl_legacy.cnf
+
 COPY ./Gemfile ./Gemfile.lock ./
 
 RUN apk add --no-cache build-base && bundle install && apk del build-base && rm -rf ~/.bundle /usr/local/bundle/cache && ruby -e "puts Dir['/usr/local/bundle/**/{spec,rdoc,resources/shared,resources/collation,resources/locales}']" | xargs rm -rf

Gemfile

@@ -24,7 +24,6 @@ gem 'lograge'
 gem 'mysql2', require: false
 gem 'oj'
 gem 'pagy'
-gem 'pdf-reader'
 gem 'pg', require: false
 gem 'premailer-rails'
 gem 'pretender'

Gemfile.lock

@@ -1,7 +1,6 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    Ascii85 (1.1.0)
     actioncable (7.1.3.2)
       actionpack (= 7.1.3.2)
       activesupport (= 7.1.3.2)
@@ -78,7 +77,6 @@ GEM
       tzinfo (~> 2.0)
     addressable (2.8.6)
       public_suffix (>= 2.0.2, < 6.0)
-    afm (0.2.2)
     annotate (3.2.0)
       activerecord (>= 3.2, < 8.0)
       rake (>= 10.4, < 14.0)
@@ -117,7 +115,7 @@ GEM
       erubi (~> 1.4)
       parser (>= 2.4)
       smart_properties
-    bigdecimal (3.1.7)
+    bigdecimal (3.1.8)
     bindex (0.8.1)
     bootsnap (1.18.3)
       msgpack (~> 1.2)
@@ -262,21 +260,20 @@ GEM
       os (>= 0.9, < 2.0)
       signet (>= 0.16, < 2.a)
     hashdiff (1.1.0)
-    hashery (2.1.2)
-    hexapdf (0.40.0)
+    hexapdf (0.42.0)
       cmdparse (~> 3.0, >= 3.0.3)
       geom2d (~> 0.4, >= 0.4.1)
       openssl (>= 2.2.1)
     htmlentities (4.3.4)
     httpclient (2.8.3)
-    i18n (1.14.4)
+    i18n (1.14.5)
       concurrent-ruby (~> 1.0)
     image_processing (1.12.2)
       mini_magick (>= 4.9.5, < 5)
       ruby-vips (>= 2.0.17, < 3)
     io-console (0.7.2)
-    irb (1.12.0)
-      rdoc
+    irb (1.13.1)
+      rdoc (>= 4.0.0)
       reline (>= 0.4.2)
     jmespath (1.6.2)
     json (2.7.2)
@@ -312,7 +309,7 @@ GEM
     mini_magick (4.12.0)
     mini_mime (1.1.5)
     mini_portile2 (2.8.6)
-    minitest (5.22.3)
+    minitest (5.23.0)
     msgpack (1.7.2)
     multi_json (1.15.0)
     multipart-post (2.4.0)
@@ -330,12 +327,12 @@ GEM
     net-smtp (0.4.0)
       net-protocol
     nio4r (2.7.1)
-    nokogiri (1.16.4)
+    nokogiri (1.16.5)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.16.4-aarch64-linux)
+    nokogiri (1.16.5-aarch64-linux)
       racc (~> 1.4)
-    nokogiri (1.16.4-x86_64-linux)
+    nokogiri (1.16.5-x86_64-linux)
       racc (~> 1.4)
     oj (3.16.3)
       bigdecimal (>= 3.0)
@@ -348,12 +345,6 @@ GEM
     parser (3.3.1.0)
       ast (~> 2.4.1)
       racc
-    pdf-reader (2.12.0)
-      Ascii85 (~> 1.0)
-      afm (~> 0.2.1)
-      hashery (~> 2.0)
-      ruby-rc4
-      ttfunk
     pg (1.5.6)
     premailer (1.23.0)
       addressable
@@ -375,17 +366,17 @@ GEM
     public_suffix (5.0.5)
     puma (6.4.2)
       nio4r (~> 2.0)
-    racc (1.7.3)
-    rack (2.2.9)
+    racc (1.8.0)
+    rack (3.0.11)
     rack-proxy (0.7.7)
       rack
-    rack-session (1.0.2)
-      rack (< 3)
+    rack-session (2.0.0)
+      rack (>= 3.0.0)
     rack-test (2.1.0)
       rack (>= 1.3)
-    rackup (1.0.0)
-      rack (< 3)
-      webrick
+    rackup (2.1.0)
+      rack (>= 3)
+      webrick (~> 1.8)
     rails (7.1.3.2)
       actioncable (= 7.1.3.2)
       actionmailbox (= 7.1.3.2)
@@ -429,7 +420,7 @@ GEM
     redis-client (0.22.0)
       connection_pool
     regexp_parser (2.9.0)
-    reline (0.5.1)
+    reline (0.5.7)
       io-console (~> 0.5)
     representable (3.2.0)
       declarative (< 0.1.0)
@@ -497,7 +488,6 @@ GEM
     rubocop-rspec_rails (2.28.3)
       rubocop (~> 1.40)
     ruby-progressbar (1.13.0)
-    ruby-rc4 (0.1.5)
     ruby-vips (2.2.1)
       ffi (~> 1.12)
     ruby2_keywords (0.0.5)
@@ -506,7 +496,7 @@ GEM
       rubyzip (>= 1.3.0)
     rubyzip (2.3.2)
     semantic_range (3.0.0)
-    shakapacker (7.2.3)
+    shakapacker (8.0.0)
       activesupport (>= 5.2)
       package_json
       rack-proxy (>= 0.6.1)
@@ -537,8 +527,6 @@ GEM
     thor (1.3.1)
     timeout (0.4.1)
     trailblazer-option (0.1.2)
-    ttfunk (1.8.0)
-      bigdecimal (~> 3.1)
     turbo-rails (2.0.5)
       actionpack (>= 6.0.0)
       activejob (>= 6.0.0)
@@ -571,7 +559,7 @@ GEM
     websocket-extensions (0.1.5)
     xpath (3.2.0)
       nokogiri (~> 1.8)
-    zeitwerk (2.6.13)
+    zeitwerk (2.6.14)
 
 PLATFORMS
   aarch64-linux
@@ -609,7 +597,6 @@ DEPENDENCIES
   mysql2
   oj
   pagy
-  pdf-reader
   pg
   premailer-rails
   pretender

app/controllers/account_configs_controller.rb

@@ -8,6 +8,7 @@ class AccountConfigsController < ApplicationController
     AccountConfig::ALLOW_TYPED_SIGNATURE,
     AccountConfig::FORCE_MFA,
     AccountConfig::ALLOW_TO_RESUBMIT,
+    AccountConfig::FORM_PREFILL_SIGNATURE_KEY,
     AccountConfig::ESIGNING_PREFERENCE_KEY,
     AccountConfig::FORM_WITH_CONFETTI_KEY,
     AccountConfig::DOWNLOAD_LINKS_AUTH_KEY,

app/controllers/api/attachments_controller.rb

@@ -1,16 +1,37 @@
 # frozen_string_literal: true
 
 module Api
-  class AttachmentsController < ApiBaseController
-    skip_before_action :authenticate_user!
-    skip_authorization_check
+  class AttachmentsController < ActionController::API
+    include ActionController::Cookies
+    include ActiveStorage::SetCurrent
+
+    COOKIE_STORE_LIMIT = 10
 
     def create
       submitter = Submitter.find_by!(slug: params[:submitter_slug])
 
       attachment = Submitters.create_attachment!(submitter, params)
 
+      if params[:remember_signature] == 'true' && submitter.email.present?
+        cookies.encrypted[:signature_uuids] = build_new_cookie_signatures_json(submitter, attachment)
+      end
+
       render json: attachment.as_json(only: %i[uuid], methods: %i[url filename content_type])
     end
+
+    def build_new_cookie_signatures_json(submitter, attachment)
+      values =
+        begin
+          JSON.parse(cookies.encrypted[:signature_uuids].presence || '{}')
+        rescue JSON::ParserError
+          {}
+        end
+
+      values[submitter.email] = attachment.uuid
+
+      values = values.to_a.last(COOKIE_STORE_LIMIT).to_h if values.size > COOKIE_STORE_LIMIT
+
+      values.to_json
+    end
   end
 end

app/controllers/api/submissions_controller.rb

@@ -22,7 +22,7 @@ module Api
                                                  audit_trail_attachment: :blob))
 
       render json: {
-        data: submissions.as_json(serialize_params),
+        data: submissions.as_json(Submissions::SerializeForApi::SERIALIZE_PARAMS),
         pagination: {
           count: submissions.size,
           next: submissions.last&.id,
@@ -44,29 +44,7 @@ module Api
         @submission.audit_trail_attachment = Submissions::GenerateAuditTrail.call(@submission)
       end
 
-      serialized_submitters = submitters.map { |submitter| Submitters::SerializeForApi.call(submitter) }
-
-      json = @submission.as_json(
-        serialize_params.deep_merge(
-          include: { submission_events: { only: %i[id submitter_id event_type event_timestamp] } }
-        )
-      )
-
-      if submitters.all?(&:completed_at?)
-        last_submitter = submitters.max_by(&:completed_at)
-
-        json[:documents] = serialized_submitters.find { |e| e['id'] == last_submitter.id }['documents']
-        json[:status] = 'completed'
-        json[:completed_at] = last_submitter.completed_at
-      else
-        json[:documents] = []
-        json[:status] = 'pending'
-        json[:completed_at] = nil
-      end
-
-      json[:submitters] = serialized_submitters
-
-      render json:
+      render json: Submissions::SerializeForApi.call(@submission, submitters)
     end
 
     def create
@@ -85,6 +63,10 @@ module Api
 
       submissions = create_submissions(@template, params)
 
+      submissions.each do |submission|
+        SendSubmissionCreatedWebhookRequestJob.perform_later(submission)
+      end
+
       Submissions.send_signature_requests(submissions)
 
       submissions.each do |submission|
@@ -153,22 +135,6 @@ module Api
       end
     end
 
-    def serialize_params
-      {
-        only: %i[id source submitters_order created_at updated_at archived_at],
-        methods: %i[audit_log_url],
-        include: {
-          submitters: { only: %i[id slug uuid name email phone
-                                 completed_at opened_at sent_at
-                                 created_at updated_at external_id metadata],
-                        methods: %i[status application_key] },
-          template: { only: %i[id name external_id created_at updated_at],
-                      methods: %i[folder_name] },
-          created_by_user: { only: %i[id email first_name last_name] }
-        }
-      }
-    end
-
     def submissions_params
       permitted_attrs = [
         :send_email, :send_sms, :bcc_completed, :completed_redirect_url, :reply_to, :go_to_last,
@@ -179,7 +145,7 @@ module Api
                         { metadata: {}, values: {}, readonly_fields: [], message: %i[subject body],
                           fields: [:name, :uuid, :default_value, :value, :title, :description,
                                    :readonly, :redacted, :validation_pattern, :invalid_message,
-                                   { default_value: [], value: [] }] }]]
+                                   { default_value: [], value: [], preferences: {} }] }]]
         }
       ]
 

app/controllers/api/submitter_email_clicks_controller.rb

@@ -8,7 +8,8 @@ module Api
     def create
       submitter = Submitter.find_by!(slug: params[:submitter_slug])
 
-      if params[:t] == SubmissionEvents.build_tracking_param(submitter, 'click_email')
+      if params[:t] == SubmissionEvents.build_tracking_param(submitter, 'click_email') ||
+         params[:t] == SubmissionEvents.build_tracking_param_legacy(submitter, 'click_email')
         SubmissionEvents.create_with_tracking_data(submitter, 'click_email', request)
       end
 

app/controllers/api/submitters_controller.rb

@@ -85,7 +85,7 @@ module Api
         { metadata: {}, values: {}, readonly_fields: [], message: %i[subject body],
           fields: [[:name, :uuid, :default_value, :value,
                     :readonly, :redacted, :validation_pattern, :invalid_message,
-                    { default_value: [], value: [] }]] }
+                    { default_value: [], value: [], preferences: {} }]] }
       )
     end
 
@@ -123,15 +123,32 @@ module Api
       values = values.except(phone_field_uuid)
 
       submitter.values = submitter.values.merge(values) if values.present?
-      submitter.completed_at = attrs[:completed] ? Time.current : submitter.completed_at
       submitter.metadata = attrs[:metadata] if attrs.key?(:metadata)
 
+      maybe_assign_completed_attributes(submitter, attrs)
+
       assign_external_id(submitter, attrs)
       assign_preferences(submitter, attrs)
 
       submitter
     end
 
+    def maybe_assign_completed_attributes(submitter, attrs)
+      submitter.completed_at = attrs[:completed] ? Time.current : submitter.completed_at
+
+      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)
+
+        submitter.values = submitter.values.transform_values do |v|
+          v == '{{date}}' ? Time.current.in_time_zone(submitter.account.timezone).to_date.to_s : v
+        end
+      end
+
+      submitter
+    end
+
     def assign_external_id(submitter, attrs)
       submitter.external_id = attrs[:application_key] if attrs.key?(:application_key)
       submitter.external_id = attrs[:external_id] if attrs.key?(:external_id)

app/controllers/api/templates_clone_controller.rb

@@ -20,6 +20,8 @@ module Api
 
       Templates::CloneAttachments.call(template: cloned_template, original_template: @template)
 
+      SendTemplateCreatedWebhookRequestJob.perform_later(cloned_template)
+
       render json: Templates::SerializeForApi.call(cloned_template)
     end
   end

app/controllers/api/templates_controller.rb

@@ -65,6 +65,8 @@ module Api
 
       @template.update!(template_params)
 
+      SendTemplateUpdatedWebhookRequestJob.perform_later(@template)
+
       render json: @template.as_json(only: %i[id updated_at])
     end
 

app/controllers/application_controller.rb

@@ -52,7 +52,8 @@ class ApplicationController < ActionController::Base
   private
 
   def with_browser_locale(&)
-    locale = request.env['HTTP_ACCEPT_LANGUAGE'].to_s[BROWSER_LOCALE_REGEXP].to_s
+    locale   = params[:lang].presence
+    locale ||= request.env['HTTP_ACCEPT_LANGUAGE'].to_s[BROWSER_LOCALE_REGEXP].to_s
 
     locale =
       if locale.starts_with?('en-') && locale != 'en-US'

app/controllers/console_redirect_controller.rb

@@ -9,6 +9,8 @@ class ConsoleRedirectController < ApplicationController
       params[:redir] = Docuseal.multitenant? ? "#{Docuseal::CONSOLE_URL}/plans" : "#{Docuseal::CONSOLE_URL}/on_premise"
     end
 
+    params[:redir] = "#{Docuseal::CONSOLE_URL}/manage" if request.path == '/manage'
+
     return redirect_to(new_user_session_path({ redir: params[:redir] }.compact)) if true_user.blank?
 
     auth = JsonWebToken.encode(uuid: true_user.uuid,

app/controllers/esign_settings_controller.rb

@@ -57,8 +57,10 @@ class EsignSettingsController < ApplicationController
     save_new_cert!(@encrypted_config, @cert_record)
 
     redirect_to settings_esign_path, notice: 'Certificate has been successfully added!'
-  rescue OpenSSL::PKCS12::PKCS12Error
-    @cert_record.errors.add(:password, "is invalid. Make sure you're uploading a valid .p12 file")
+  rescue OpenSSL::PKCS12::PKCS12Error => e
+    Rollbar.error(e) if defined?(Rollbar)
+
+    @cert_record.errors.add(:password, e.message)
 
     render turbo_stream: turbo_stream.replace(:modal, template: 'esign_settings/new'), status: :unprocessable_entity
   end

app/controllers/sessions_controller.rb

@@ -3,6 +3,8 @@
 class SessionsController < Devise::SessionsController
   before_action :configure_permitted_parameters
 
+  around_action :with_browser_locale
+
   def create
     email = sign_in_params[:email].to_s.downcase
 

app/controllers/start_form_controller.rb

@@ -33,7 +33,11 @@ class StartFormController < ApplicationController
 
       assign_submission_attributes(@submitter, @template) if @submitter.new_record?
 
+      is_new_record = @submitter.new_record?
+
       if @submitter.save
+        SendSubmissionCreatedWebhookRequestJob.perform_later(@submitter.submission) if is_new_record
+
         redirect_to submit_form_path(@submitter.slug)
       else
         render :show

app/controllers/submissions_controller.rb

@@ -44,6 +44,10 @@ class SubmissionsController < ApplicationController
                                            params: params.merge('send_completed_email' => true))
       end
 
+    submissions.each do |submission|
+      SendSubmissionCreatedWebhookRequestJob.perform_later(submission)
+    end
+
     Submissions.send_signature_requests(submissions)
 
     redirect_to template_path(@template), notice: 'New recipients have been added'

app/controllers/submissions_debug_controller.rb

@@ -16,13 +16,16 @@ class SubmissionsDebugController < ApplicationController
         render 'submit_form/show'
       end
       f.pdf do
-        if params[:audit]
-          Submissions::GenerateAuditTrail.call(@submitter.submission)
-        else
-          Submissions::GenerateResultAttachments.call(@submitter)
-        end
+        result =
+          if params[:audit]
+            Submissions::GenerateAuditTrail.call(@submitter.submission)
+          elsif params[:combined]
+            Submissions::GenerateCombinedAttachment.call(@submitter)
+          else
+            Submissions::GenerateResultAttachments.call(@submitter)
+          end
 
-        send_data ActiveStorage::Attachment.where(name: params[:audit] ? :audit_trail : :documents).last.download,
+        send_data Array.wrap(result).first.download,
                   filename: 'debug.pdf',
                   disposition: 'inline',
                   type: 'application/pdf'

app/controllers/submissions_download_controller.rb

@@ -33,7 +33,17 @@ class SubmissionsDownloadController < ApplicationController
       return head :not_found
     end
 
-    render json: build_urls(last_submitter)
+    if params[:combined]
+      url = build_combined_url(submitter)
+
+      if url
+        render json: [url]
+      else
+        head :not_found
+      end
+    else
+      render json: build_urls(last_submitter)
+    end
   end
 
   private
@@ -47,4 +57,14 @@ class SubmissionsDownloadController < ApplicationController
       ActiveStorage::Blob.proxy_url(attachment.blob, expires_at: FILES_TTL.from_now.to_i)
     end
   end
+
+  def build_combined_url(submitter)
+    return if submitter.submission.submitters.exists?(completed_at: nil)
+    return if submitter.submission.submitters.order(:completed_at).last != submitter
+
+    attachment = submitter.submission.combined_document_attachment
+    attachment ||= Submissions::GenerateCombinedAttachment.call(submitter)
+
+    ActiveStorage::Blob.proxy_url(attachment.blob, expires_at: FILES_TTL.from_now.to_i)
+  end
 end

app/controllers/submit_form_controller.rb

@@ -7,12 +7,14 @@ class SubmitFormController < ApplicationController
   skip_before_action :authenticate_user!
   skip_authorization_check
 
+  CONFIG_KEYS = [].freeze
   PRELOAD_ALL_PAGES_AMOUNT = 200
 
   def show
     @submitter = Submitter.find_by!(slug: params[:slug])
 
     return redirect_to submit_form_completed_path(@submitter.slug) if @submitter.completed_at?
+    return render :archived if @submitter.submission.template.archived_at? || @submitter.submission.archived_at?
 
     ActiveRecord::Associations::Preloader.new(
       records: [@submitter],
@@ -31,7 +33,17 @@ class SubmitFormController < ApplicationController
 
     Submitters::MaybeUpdateDefaultValues.call(@submitter, current_user)
 
-    render(@submitter.submission.template.archived_at? || @submitter.submission.archived_at? ? :archived : :show)
+    @attachments_index = ActiveStorage::Attachment.where(record: @submitter.submission.submitters, name: :attachments)
+                                                  .preload(:blob).index_by(&:uuid)
+
+    @form_configs = Submitters::FormConfigs.call(@submitter, CONFIG_KEYS)
+
+    return unless @form_configs[:prefill_signature]
+
+    @signature_attachment =
+      Submitters::MaybeAssignDefaultBrowserSignature.call(@submitter, params, cookies, @attachments_index.values)
+
+    @attachments_index[@signature_attachment.uuid] = @signature_attachment if @signature_attachment
   end
 
   def update

app/controllers/submit_form_draw_signature_controller.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class SubmitFormDrawSignatureController < ApplicationController
+  layout false
+
+  around_action :with_browser_locale, only: %i[show]
+  skip_before_action :authenticate_user!
+  skip_authorization_check
+
+  def show
+    @submitter = Submitter.find_by!(slug: params[:slug])
+
+    return redirect_to submit_form_completed_path(@submitter.slug) if @submitter.completed_at?
+
+    if @submitter.submission.template.archived_at? || @submitter.submission.archived_at?
+      return redirect_to submit_form_path(@submitter.slug)
+    end
+
+    render :show
+  end
+end

app/controllers/submit_form_values_controller.rb

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

app/controllers/submitters_autocomplete_controller.rb

@@ -25,7 +25,7 @@ class SubmittersAutocompleteController < ApplicationController
 
       term = "#{params[:q].downcase}%"
 
-      submitters.where(column.matches(term, false, true))
+      submitters.where(column.matches(term))
     else
       Submitters.search(submitters, params[:q])
     end

app/controllers/template_documents_controller.rb

@@ -4,7 +4,9 @@ class TemplateDocumentsController < ApplicationController
   load_and_authorize_resource :template
 
   def create
-    return head :unprocessable_entity if params[:blobs].blank? && params[:files].blank?
+    if params[:blobs].blank? && params[:files].blank?
+      return render json: { error: 'File is missing' }, status: :unprocessable_entity
+    end
 
     old_fields_hash = @template.fields.hash
 

app/controllers/templates_controller.rb

@@ -61,6 +61,8 @@ class TemplatesController < ApplicationController
     if @template.save
       Templates::CloneAttachments.call(template: @template, original_template: @base_template) if @base_template
 
+      SendTemplateUpdatedWebhookRequestJob.perform_later(@template)
+
       maybe_redirect_to_template(@template)
     else
       render turbo_stream: turbo_stream.replace(:modal, template: 'templates/new'), status: :unprocessable_entity
@@ -70,6 +72,8 @@ class TemplatesController < ApplicationController
   def update
     @template.update!(template_params)
 
+    SendTemplateUpdatedWebhookRequestJob.perform_later(@template)
+
     head :ok
   end
 

app/controllers/templates_preferences_controller.rb

@@ -9,6 +9,7 @@ class TemplatesPreferencesController < ApplicationController
     authorize!(:update, @template)
 
     @template.preferences = @template.preferences.merge(template_params[:preferences])
+    @template.preferences = @template.preferences.reject { |_, v| v.is_a?(String) && v.blank? }
     @template.save!
 
     head :ok
@@ -17,6 +18,18 @@ class TemplatesPreferencesController < ApplicationController
   private
 
   def template_params
-    params.require(:template).permit(preferences: %i[bcc_completed request_email_subject request_email_body])
+    params.require(:template).permit(
+      preferences: %i[bcc_completed request_email_subject request_email_body
+                      documents_copy_email_subject documents_copy_email_body
+                      documents_copy_email_enabled]
+    ).tap do |attrs|
+      attrs[:preferences] = attrs[:preferences].transform_values do |value|
+        if %w[true false].include?(value)
+          value == 'true'
+        else
+          value
+        end
+      end
+    end
   end
 end

app/controllers/templates_uploads_controller.rb

@@ -18,12 +18,16 @@ class TemplatesUploadsController < ApplicationController
 
     @template.update!(schema:)
 
+    SendTemplateCreatedWebhookRequestJob.perform_later(@template)
+
     redirect_to edit_template_path(@template)
   rescue Templates::CreateAttachments::PdfEncrypted
     render turbo_stream: turbo_stream.append(params[:form_id], html: helpers.tag.prompt_password)
   rescue StandardError => e
     Rollbar.error(e) if defined?(Rollbar)
 
+    raise if Rails.env.local?
+
     redirect_to root_path, alert: 'Unable to upload file'
   end
 

app/controllers/timestamp_server_controller.rb

@@ -1,9 +1,13 @@
 # frozen_string_literal: true
 
 class TimestampServerController < ApplicationController
+  HASH_ALGORITHM = 'SHA256'
+
   before_action :build_encrypted_config
   authorize_resource :encrypted_config
 
+  TimestampError = Class.new(StandardError)
+
   def create
     return head :not_found if Docuseal.multitenant?
 
@@ -14,25 +18,29 @@ class TimestampServerController < ApplicationController
     else
       redirect_back fallback_location: settings_notifications_path, alert: 'Unable to save'
     end
-  rescue HexaPDF::Error, SocketError, Submissions::TimestampHandler::TimestampError, OpenSSL::Timestamp::TimestampError
+  rescue SocketError, TimestampError, OpenSSL::Timestamp::TimestampError
     redirect_back fallback_location: settings_notifications_path, alert: 'Invalid Timeserver'
   end
 
   private
 
   def test_timeserver_url(url)
-    pdf = HexaPDF::Document.new
-    pdf.pages.add
+    req = OpenSSL::Timestamp::Request.new
+    req.algorithm = HASH_ALGORITHM
+    req.message_imprint = OpenSSL::Digest.digest(HASH_ALGORITHM, 'test')
 
-    pkcs = Accounts.load_signing_pkcs(current_account)
+    uri = Addressable::URI.parse(url)
 
-    pdf.sign(StringIO.new,
-             reason: 'Test',
-             certificate: pkcs.certificate,
-             key: pkcs.key,
-             signature_size: 10_000,
-             certificate_chain: pkcs.ca_certs || [],
-             timestamp_handler: Submissions::TimestampHandler.new(tsa_url: url))
+    conn = Faraday.new(uri.origin) do |c|
+      c.basic_auth(uri.user, uri.password) if uri.password.present?
+    end
+
+    response = conn.post(uri.path, req.to_der,
+                         'content-type' => 'application/timestamp-query')
+
+    raise TimestampError if response.status != 200 || response.body.blank?
+
+    response
   end
 
   def load_encrypted_config

app/controllers/user_initials_controller.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+class UserInitialsController < ApplicationController
+  before_action :load_user_config
+  authorize_resource :user_config
+
+  def edit; end
+
+  def update
+    file = params[:file]
+
+    return redirect_to settings_profile_index_path, notice: 'Unable to save initials' if file.blank?
+
+    blob = ActiveStorage::Blob.create_and_upload!(io: file.open,
+                                                  filename: file.original_filename,
+                                                  content_type: file.content_type)
+
+    attachment = ActiveStorage::Attachment.create!(
+      blob:,
+      name: 'initials',
+      record: current_user
+    )
+
+    if @user_config.update(value: attachment.uuid)
+      redirect_to settings_profile_index_path, notice: 'Initials has been saved'
+    else
+      redirect_to settings_profile_index_path, notice: 'Unable to save initials'
+    end
+  end
+
+  def destroy
+    @user_config.destroy
+
+    redirect_to settings_profile_index_path, notice: 'Initials has been removed'
+  end
+
+  private
+
+  def load_user_config
+    @user_config =
+      UserConfig.find_or_initialize_by(user: current_user, key: UserConfig::INITIALS_KEY)
+  end
+end

app/controllers/users_controller.rb

@@ -27,6 +27,7 @@ class UsersController < ApplicationController
     if existing_user
       existing_user.archived_at = nil
       existing_user.assign_attributes(user_params)
+      existing_user.account = current_account
 
       @user = existing_user
     end
@@ -46,6 +47,14 @@ class UsersController < ApplicationController
     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])
+
+      authorize!(:manage, account)
+
+      @user.account = account
+    end
+
     if @user.update(attrs)
       redirect_back fallback_location: settings_users_path, notice: 'User has been updated'
     else

app/controllers/webhook_preferences_controller.rb

@@ -5,6 +5,9 @@ class WebhookPreferencesController < ApplicationController
     form.viewed
     form.started
     form.completed
+    template.created
+    template.updated
+    submission.created
     submission.archived
   ].freeze
 

app/javascript/application.js

@@ -41,26 +41,6 @@ document.addEventListener('keyup', (e) => {
   }
 })
 
-window.customElements.define('toggle-visible', ToggleVisible)
-window.customElements.define('disable-hidden', DisableHidden)
-window.customElements.define('turbo-modal', TurboModal)
-window.customElements.define('file-dropzone', FileDropzone)
-window.customElements.define('menu-active', MenuActive)
-window.customElements.define('clipboard-copy', ClipboardCopy)
-window.customElements.define('dynamic-list', DynamicList)
-window.customElements.define('download-button', DownloadButton)
-window.customElements.define('set-origin-url', SetOriginUrl)
-window.customElements.define('set-timezone', SetTimezone)
-window.customElements.define('autoresize-textarea', AutoresizeTextarea)
-window.customElements.define('submitters-autocomplete', SubmittersAutocomplete)
-window.customElements.define('folder-autocomplete', FolderAutocomplete)
-window.customElements.define('signature-form', SignatureForm)
-window.customElements.define('submit-form', SubmitForm)
-window.customElements.define('prompt-password', PromptPassword)
-window.customElements.define('emails-textarea', EmailsTextarea)
-window.customElements.define('toggle-cookies', ToggleCookies)
-window.customElements.define('toggle-on-submit', ToggleOnSubmit)
-
 document.addEventListener('turbo:before-fetch-request', encodeMethodIntoRequestBody)
 document.addEventListener('turbo:submit-end', async (event) => {
   const resp = event.detail?.formSubmission?.result?.fetchResponse?.response
@@ -84,7 +64,29 @@ document.addEventListener('turbo:submit-end', async (event) => {
   URL.revokeObjectURL(url)
 })
 
-window.customElements.define('template-builder', class extends HTMLElement {
+const safeRegisterElement = (name, element, options = {}) => !window.customElements.get(name) && window.customElements.define(name, element, options)
+
+safeRegisterElement('toggle-visible', ToggleVisible)
+safeRegisterElement('disable-hidden', DisableHidden)
+safeRegisterElement('turbo-modal', TurboModal)
+safeRegisterElement('file-dropzone', FileDropzone)
+safeRegisterElement('menu-active', MenuActive)
+safeRegisterElement('clipboard-copy', ClipboardCopy)
+safeRegisterElement('dynamic-list', DynamicList)
+safeRegisterElement('download-button', DownloadButton)
+safeRegisterElement('set-origin-url', SetOriginUrl)
+safeRegisterElement('set-timezone', SetTimezone)
+safeRegisterElement('autoresize-textarea', AutoresizeTextarea)
+safeRegisterElement('submitters-autocomplete', SubmittersAutocomplete)
+safeRegisterElement('folder-autocomplete', FolderAutocomplete)
+safeRegisterElement('signature-form', SignatureForm)
+safeRegisterElement('submit-form', SubmitForm)
+safeRegisterElement('prompt-password', PromptPassword)
+safeRegisterElement('emails-textarea', EmailsTextarea)
+safeRegisterElement('toggle-cookies', ToggleCookies)
+safeRegisterElement('toggle-on-submit', ToggleOnSubmit)
+
+safeRegisterElement('template-builder', class extends HTMLElement {
   connectedCallback () {
     this.appElem = document.createElement('div')
 
@@ -116,7 +118,7 @@ window.customElements.define('template-builder', class extends HTMLElement {
   }
 })
 
-window.customElements.define('import-list', class extends HTMLElement {
+safeRegisterElement('import-list', class extends HTMLElement {
   connectedCallback () {
     this.appElem = document.createElement('div')
 

app/javascript/draw.js

@@ -0,0 +1,114 @@
+import SignaturePad from 'signature_pad'
+import { cropCanvasAndExportToPNG } from './submission_form/crop_canvas'
+
+window.customElements.define('draw-signature', class extends HTMLElement {
+  connectedCallback () {
+    const scale = 3
+
+    this.canvas.width = this.canvas.parentNode.clientWidth * scale
+    this.canvas.height = this.canvas.parentNode.clientHeight * scale
+
+    this.canvas.getContext('2d').scale(scale, scale)
+
+    this.pad = new SignaturePad(this.canvas)
+
+    this.pad.addEventListener('endStroke', () => {
+      this.updateSubmitButtonVisibility()
+    })
+
+    this.clearButton.addEventListener('click', (e) => {
+      e.preventDefault()
+
+      this.clearSignaturePad()
+    })
+
+    this.form.addEventListener('submit', (e) => {
+      e.preventDefault()
+
+      this.submitButton.disabled = true
+
+      this.submitImage().then((data) => {
+        this.valueInput.value = data.uuid
+
+        return fetch(this.form.action, {
+          method: 'PUT',
+          body: new FormData(this.form)
+        }).then((response) => {
+          this.form.classList.add('hidden')
+          this.success.classList.remove('hidden')
+
+          return response
+        })
+      }).finally(() => {
+        this.submitButton.disabled = false
+      })
+    })
+  }
+
+  clearSignaturePad () {
+    this.pad.clear()
+    this.updateSubmitButtonVisibility()
+  }
+
+  updateSubmitButtonVisibility () {
+    if (this.pad.isEmpty()) {
+      this.submitButton.style.display = 'none'
+      this.placeholderButton.style.display = 'block'
+    } else {
+      this.submitButton.style.display = 'block'
+      this.placeholderButton.style.display = 'none'
+    }
+  }
+
+  async submitImage () {
+    return new Promise((resolve, reject) => {
+      cropCanvasAndExportToPNG(this.canvas, { errorOnTooSmall: true }).then(async (blob) => {
+        const file = new File([blob], 'signature.png', { type: 'image/png' })
+
+        const formData = new FormData()
+
+        formData.append('file', file)
+        formData.append('submitter_slug', this.dataset.slug)
+        formData.append('name', 'attachments')
+        formData.append('remember_signature', 'true')
+
+        return fetch('/api/attachments', {
+          method: 'POST',
+          body: formData
+        }).then((resp) => resp.json()).then((attachment) => {
+          return resolve(attachment)
+        })
+      }).catch((error) => {
+        return reject(error)
+      })
+    })
+  }
+
+  get submitButton () {
+    return this.querySelector('button[type="submit"]')
+  }
+
+  get clearButton () {
+    return this.querySelector('button[aria-label="Clear"]')
+  }
+
+  get placeholderButton () {
+    return this.querySelector('button[disabled]')
+  }
+
+  get canvas () {
+    return this.querySelector('canvas')
+  }
+
+  get valueInput () {
+    return this.querySelector('input[name^="values"]')
+  }
+
+  get form () {
+    return this.querySelector('form')
+  }
+
+  get success () {
+    return this.querySelector('#success')
+  }
+})

app/javascript/elements/download_button.js

@@ -17,13 +17,18 @@ export default targetable(class extends HTMLElement {
 
     this.toggleState()
 
-    fetch(this.dataset.src).then((response) => response.json()).then((urls) => {
-      const isSafariIos = /iPhone|iPad|iPod/i.test(navigator.userAgent)
+    fetch(this.dataset.src).then(async (response) => {
+      if (response.ok) {
+        const urls = await response.json()
+        const isSafariIos = /iPhone|iPad|iPod/i.test(navigator.userAgent)
 
-      if (isSafariIos && urls.length > 1) {
-        this.downloadSafariIos(urls)
+        if (isSafariIos && urls.length > 1) {
+          this.downloadSafariIos(urls)
+        } else {
+          this.downloadUrls(urls)
+        }
       } else {
-        this.downloadUrls(urls)
+        alert('Failed to download files')
       }
     })
   }

app/javascript/elements/submitter_autocomplete.js

@@ -45,11 +45,7 @@ export default class extends HTMLElement {
       this.currentFetch.then(async (resp) => {
         const items = await resp.json()
 
-        if (q.length < 3) {
-          resolve(items.filter((e) => e[this.dataset.field].startsWith(q)))
-        } else {
-          resolve(items)
-        }
+        resolve(items)
       }).catch(() => {
         resolve([])
       }).finally(() => {

app/javascript/elements/toggle_submit.js

@@ -0,0 +1,21 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.button.disabled = false
+
+    this.form.addEventListener('submit', () => {
+      this.button.disabled = true
+    })
+  }
+
+  disconnectedCallback () {
+    this.button.disabled = false
+  }
+
+  get button () {
+    return this.querySelector('[type="submit"]')
+  }
+
+  get form () {
+    return this.querySelector('form') || this.closest('form')
+  }
+}

app/javascript/form.js

@@ -2,23 +2,31 @@ import { createApp, reactive } from 'vue'
 
 import Form from './submission_form/form'
 import DownloadButton from './elements/download_button'
+import ToggleSubmit from './elements/toggle_submit'
 
-window.customElements.define('download-button', DownloadButton)
-window.customElements.define('submission-form', class extends HTMLElement {
+const safeRegisterElement = (name, element, options = {}) => !window.customElements.get(name) && window.customElements.define(name, element, options)
+
+safeRegisterElement('download-button', DownloadButton)
+safeRegisterElement('toggle-submit', ToggleSubmit)
+safeRegisterElement('submission-form', class extends HTMLElement {
   connectedCallback () {
     this.appElem = document.createElement('div')
 
     this.app = createApp(Form, {
       submitter: JSON.parse(this.dataset.submitter),
       canSendEmail: this.dataset.canSendEmail === 'true',
+      previousSignatureValue: this.dataset.previousSignatureValue,
       goToLast: this.dataset.goToLast === 'true',
       isDemo: this.dataset.isDemo === 'true',
       attribution: this.dataset.attribution !== 'false',
       withConfetti: this.dataset.withConfetti !== 'false',
+      withDisclosure: this.dataset.withDisclosure === 'true',
       withTypedSignature: this.dataset.withTypedSignature !== 'false',
       authenticityToken: document.querySelector('meta[name="csrf-token"]')?.content,
+      rememberSignature: this.dataset.rememberSignature === 'true',
       values: reactive(JSON.parse(this.dataset.values)),
       completedButton: JSON.parse(this.dataset.completedButton || '{}'),
+      withQrButton: true,
       completedMessage: JSON.parse(this.dataset.completedMessage || '{}'),
       completedRedirectUrl: this.dataset.completedRedirectUrl,
       attachments: reactive(JSON.parse(this.dataset.attachments)),

app/javascript/rollbar.js

@@ -0,0 +1,34 @@
+import Rollbar from 'rollbar/dist/rollbar.umd'
+
+const token = document.querySelector('meta[name="rollbar-token"]')?.getAttribute('content')
+
+if (token) {
+  window.Rollbar ||= new Rollbar({
+    accessToken: token,
+    captureUncaught: true,
+    captureUnhandledRejections: true,
+    captureIp: false,
+    autoInstrument: false,
+    ignoredMessages: [
+      /Failed to fetch/i,
+      /NetworkError/i,
+      /Load failed/i,
+      /Clipboard write is not allowed/i
+    ],
+    transform (payload) {
+      payload.body.telemetry = []
+
+      const string = JSON.stringify(payload)
+
+      return JSON.parse(string.replace(/(\/[des]\/)\w{6}/g, (_, m) => m))
+    },
+    payload: {
+      client: {
+        javascript: {
+          source_map_enabled: true
+        }
+      },
+      environment: 'production'
+    }
+  })
+}

app/javascript/submission_form/area.vue

@@ -165,6 +165,9 @@
       <span v-else-if="field.type === 'date'">
         {{ formattedDate }}
       </span>
+      <span v-else-if="field.type === 'number'">
+        {{ formatNumber(modelValue, field.preferences?.format) }}
+      </span>
       <span
         v-else
         class="whitespace-pre-wrap"
@@ -373,6 +376,17 @@ export default {
         }
       }
     },
+    formatNumber (number, format) {
+      if (format === 'comma') {
+        return new Intl.NumberFormat('en-US').format(number)
+      } else if (format === 'dot') {
+        return new Intl.NumberFormat('de-DE').format(number)
+      } else if (format === 'space') {
+        return new Intl.NumberFormat('fr-FR').format(number)
+      } else {
+        return number
+      }
+    },
     formatDate (date, format) {
       const monthFormats = {
         M: 'numeric',
@@ -388,6 +402,7 @@ export default {
 
       const yearFormats = {
         YYYY: 'numeric',
+        YYY: 'numeric',
         YY: '2-digit'
       }
 

app/javascript/submission_form/completed.vue

@@ -197,13 +197,18 @@ export default {
     download () {
       this.isDownloading = true
 
-      fetch(this.baseUrl + `/submitters/${this.submitterSlug}/download`).then((response) => response.json()).then((urls) => {
-        const isSafariIos = /iPhone|iPad|iPod/i.test(navigator.userAgent)
+      fetch(this.baseUrl + `/submitters/${this.submitterSlug}/download`).then(async (response) => {
+        if (response.ok) {
+          const urls = await response.json()
+          const isSafariIos = /iPhone|iPad|iPod/i.test(navigator.userAgent)
 
-        if (isSafariIos && urls.length > 1) {
-          this.downloadSafariIos(urls)
+          if (isSafariIos && urls.length > 1) {
+            this.downloadSafariIos(urls)
+          } else {
+            this.downloadUrls(urls)
+          }
         } else {
-          this.downloadUrls(urls)
+          alert('Failed to download files')
         }
       })
     },

app/javascript/submission_form/date_step.vue

@@ -14,7 +14,9 @@
         />
         <template v-else>
           {{ field.name && showFieldNames ? field.name : t('date') }}
-          <template v-if="!field.required">({{ t('optional') }})</template>
+          <template v-if="!field.required">
+            ({{ t('optional') }})
+          </template>
         </template>
       </label>
       <button

app/javascript/submission_form/form.vue

@@ -321,10 +321,14 @@
             :key="currentField.uuid"
             v-model="values[currentField.uuid]"
             :field="currentField"
-            :previous-value="previousSignatureValueFor(currentField)"
+            :previous-value="previousSignatureValueFor(currentField) || previousSignatureValue"
             :with-typed-signature="withTypedSignature"
+            :remember-signature="rememberSignature"
             :attachments-index="attachmentsIndex"
-            :submitter-slug="submitterSlug"
+            :button-text="buttonText"
+            :with-disclosure="withDisclosure"
+            :with-qr-button="withQrButton"
+            :submitter="submitter"
             :show-field-names="showFieldNames"
             @attached="attachments.push($event)"
             @start="scrollIntoField(currentField)"
@@ -382,7 +386,7 @@
         </div>
         <div
           v-if="currentField.type !== 'payment' || submittedValues[currentField.uuid]"
-          class="mt-6 md:mt-8"
+          :class="currentField.type === 'signature' ? 'mt-2' : 'mt-6 md:mt-8'"
         >
           <button
             id="submit_form_button"
@@ -396,11 +400,8 @@
                 v-if="isSubmitting"
                 class="mr-1 animate-spin"
               />
-              <span v-if="alwaysMinimize || stepFields.length === currentStep + 1">
-                {{ t('submit') }}
-              </span>
-              <span v-else>
-                {{ t('next') }}
+              <span>
+                {{ buttonText }}
               </span><span
                 v-if="isSubmitting"
                 class="w-6 flex justify-start mr-1"
@@ -549,11 +550,21 @@ export default {
       required: false,
       default: null
     },
+    rememberSignature: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     minimize: {
       type: Boolean,
       required: false,
       default: false
     },
+    withDisclosure: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     reuseSignature: {
       type: Boolean,
       required: false,
@@ -574,6 +585,11 @@ export default {
       required: false,
       default: true
     },
+    withQrButton: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     withTypedSignature: {
       type: Boolean,
       required: false,
@@ -599,6 +615,11 @@ export default {
       required: false,
       default: ''
     },
+    previousSignatureValue: {
+      type: String,
+      required: false,
+      default: ''
+    },
     allowToSkip: {
       type: Boolean,
       required: false,
@@ -614,6 +635,11 @@ export default {
       required: false,
       default: false
     },
+    dryRun: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     attribution: {
       type: Boolean,
       required: false,
@@ -682,11 +708,18 @@ export default {
     isMobile () {
       return /android|iphone|ipad/i.test(navigator.userAgent)
     },
+    buttonText () {
+      if (this.alwaysMinimize || this.stepFields.length === this.currentStep + 1) {
+        return this.t('submit')
+      } else {
+        return this.t('next')
+      }
+    },
     alwaysMinimize () {
       return this.minimize || (this.orientation?.includes('landscape') && this.isMobile && parseInt(window.innerHeight) < 550)
     },
     currentStepFields () {
-      return this.stepFields[this.currentStep]
+      return this.stepFields[this.currentStep] || []
     },
     browserLanguage () {
       return (navigator.language || navigator.userLanguage || 'en').split('-')[0]
@@ -763,7 +796,7 @@ export default {
       this.isFormVisible = value
     },
     currentStepFields (value) {
-      if (!value) {
+      if (isEmpty(value) && this.currentStep > 0) {
         this.currentStep -= 1
       }
     }
@@ -956,14 +989,16 @@ export default {
       this.$nextTick(() => {
         this.recalculateButtonDisabledKey = Math.random()
 
-        if (scrollToArea) {
-          this.scrollIntoField(step[0])
+        if (!this.isCompleted) {
+          if (scrollToArea) {
+            this.scrollIntoField(step[0])
 
-          this.$refs.form.querySelector('input[type="date"], input[type="number"], input[type="text"], select')?.focus()
-        }
+            this.$refs.form.querySelector('input[type="date"], input[type="number"], input[type="text"], select')?.focus()
+          }
 
-        if (clickUpload && !this.values[this.currentField.uuid] && ['file', 'image'].includes(this.currentField.type)) {
-          this.$refs.form.querySelector('input[type="file"]')?.click()
+          if (clickUpload && !this.values[this.currentField.uuid] && ['file', 'image'].includes(this.currentField.type)) {
+            this.$refs.form.querySelector('input[type="file"]')?.click()
+          }
         }
       })
     },
@@ -1019,7 +1054,7 @@ export default {
         const formData = new FormData(this.$refs.form)
         const isLastStep = this.currentStep === this.stepFields.length - 1
 
-        if (isLastStep && !emptyRequiredField) {
+        if (isLastStep && !emptyRequiredField && !this.dryRun) {
           formData.append('completed', 'true')
         }
 

app/javascript/submission_form/i18n.js

@@ -1,7 +1,12 @@
 const en = {
   text: 'Text',
+  by_clicking_you_agree_to_the: 'By clicking "{button}", you agree to the',
+  electronic_signature_disclosure: 'Electronic Signature Disclosure',
+  esignature_disclosure: 'eSignature Disclosure',
   signature: 'Signature',
   initials: 'Initials',
+  drawn_signature_on_a_touchscreen_device: 'Drawn signature on a touchscreen device',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scan the QR code with the camera app to open the form on mobile and draw your signature',
   date: 'Date',
   number: 'Number',
   image: 'Image',
@@ -65,6 +70,11 @@ const en = {
 }
 
 const es = {
+  drawn_signature_on_a_touchscreen_device: 'Firma dibujada en un dispositivo con pantalla táctil',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Escanea el código QR con la aplicación de la cámara para abrir el formulario en el móvil y dibujar tu firma',
+  by_clicking_you_agree_to_the: 'Al hacer clic en "{button}", usted acepta el',
+  electronic_signature_disclosure: 'Divulgación de Firma Electrónica',
+  esignature_disclosure: 'Divulgación de eFirma',
   minimize: 'Minimizar',
   text: 'Texto',
   signature: 'Firma',
@@ -130,6 +140,11 @@ const es = {
 }
 
 const it = {
+  drawn_signature_on_a_touchscreen_device: 'Firma disegnata su un dispositivo con schermo tattile',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scansiona il codice QR con l\'app della fotocamera per aprire il modulo sul cellulare e disegnare la tua firma',
+  by_clicking_you_agree_to_the: 'Cliccando su "{button}", accetti il',
+  electronic_signature_disclosure: 'Divulgazione della Firma Elettronica',
+  esignature_disclosure: 'Divulgazione della eFirma',
   minimize: 'Minimizza',
   text: 'Testo',
   signature: 'Firma',
@@ -195,6 +210,11 @@ const it = {
 }
 
 const de = {
+  drawn_signature_on_a_touchscreen_device: 'Gezeichnete Unterschrift auf einem Touchscreen-Gerät',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scannen Sie den QR-Code mit der Kamera-App, um das Formular auf dem Handy zu öffnen und Ihre Unterschrift zu zeichnen',
+  by_clicking_you_agree_to_the: 'Durch Klicken auf "{button}" stimmen Sie zu, dass Sie die',
+  electronic_signature_disclosure: 'Elektronische Unterschriftenoffenlegung',
+  esignature_disclosure: 'eSignatur Offenlegung',
   minimize: 'Minimieren',
   text: 'Text',
   signature: 'Unterschrift',
@@ -260,6 +280,11 @@ const de = {
 }
 
 const fr = {
+  drawn_signature_on_a_touchscreen_device: 'Signature dessinée sur un appareil à écran tactile',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scannez le code QR avec l\'application de l\'appareil photo pour ouvrir le formulaire sur mobile et dessiner votre signature',
+  by_clicking_you_agree_to_the: 'En cliquant sur "{button}", vous acceptez la',
+  electronic_signature_disclosure: 'Divulgation de Signature Électronique',
+  esignature_disclosure: 'Divulgation de la eSignature',
   minimize: 'Réduire',
   text: 'Texte',
   signature: 'Signature',
@@ -325,6 +350,11 @@ const fr = {
 }
 
 const pl = {
+  drawn_signature_on_a_touchscreen_device: 'Podpis odręczny na urządzeniu z ekranem dotykowym',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Zeskanuj kod QR za pomocą aplikacji aparatu, aby otworzyć formularz na telefonie i narysować swój podpis',
+  by_clicking_you_agree_to_the: 'Klikając na "{button}", zgadzasz się na',
+  electronic_signature_disclosure: 'Ujawnienie Elektronicznej Sygnatury',
+  esignature_disclosure: 'Ujawnienie ePodpisu',
   minimize: 'Zminimalizuj',
   text: 'Tekst',
   signature: 'Podpis',
@@ -390,6 +420,11 @@ const pl = {
 }
 
 const uk = {
+  drawn_signature_on_a_touchscreen_device: 'Підпис на сенсорному пристрої',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Скануйте QR-код за допомогою програми камери, щоб відкрити форму на мобільному пристрої та намалювати свій підпис',
+  by_clicking_you_agree_to_the: 'Натиснувши на "{button}", ви погоджуєтеся з',
+  electronic_signature_disclosure: 'Розголошення Електронного Підпису',
+  esignature_disclosure: 'Розголошення еПідпису',
   minimize: 'Зменшити',
   text: 'Текст',
   signature: 'Підпис',
@@ -455,6 +490,11 @@ const uk = {
 }
 
 const cs = {
+  drawn_signature_on_a_touchscreen_device: 'Namalovaný podpis na dotykovém zařízení',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Naskenujte QR kód pomocí aplikace fotoaparátu, abyste otevřeli formulář na mobilním zařízení a nakreslili svůj podpis',
+  by_clicking_you_agree_to_the: 'Kliknutím na "{button}" souhlasíte s',
+  electronic_signature_disclosure: 'Zveřejněním Elektronického Podpisu',
+  esignature_disclosure: 'Zveřejnění ePodpisu',
   minimize: 'Minimalizovat',
   text: 'Text',
   signature: 'Podpis',
@@ -520,6 +560,11 @@ const cs = {
 }
 
 const pt = {
+  drawn_signature_on_a_touchscreen_device: 'Assinatura desenhada em um dispositivo com tela sensível ao toque',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Escaneie o código QR com o aplicativo da câmera para abrir o formulário no celular e desenhar sua assinatura',
+  by_clicking_you_agree_to_the: 'Ao clicar em "{button}", você concorda com o',
+  electronic_signature_disclosure: 'Divulgação de Assinatura Eletrônica',
+  esignature_disclosure: 'Divulgação da eAssinatura',
   minimize: 'Minimizar',
   text: 'Texto',
   signature: 'Assinatura',
@@ -585,6 +630,11 @@ const pt = {
 }
 
 const he = {
+  drawn_signature_on_a_touchscreen_device: 'חתימה שנוצרה במכשיר עם מסך מגע',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'סרוק את קוד ה-QR באמצעות אפליקציית המצלמה כדי לפתוח את הטופס במובייל ולצייר את החתימה שלך',
+  by_clicking_you_agree_to_the: 'על ידי לחיצה על "{button}", אתה מסכים ל',
+  electronic_signature_disclosure: 'חשיפת חתימה אלקטרונית',
+  esignature_disclosure: 'חשיפת ה-eחתימה',
   minimize: 'לקטן',
   text: 'טקסט',
   signature: 'חתימה',
@@ -651,6 +701,11 @@ const he = {
 }
 
 const nl = {
+  drawn_signature_on_a_touchscreen_device: 'Getekende handtekening op een apparaat met een touchscreen',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scan de QR-code met de camera-app om het formulier op mobiel te openen en uw handtekening te tekenen',
+  by_clicking_you_agree_to_the: 'Door op "{button}" te klikken, gaat u akkoord met de',
+  electronic_signature_disclosure: 'Openbaarmaking van Elektronische Handtekening',
+  esignature_disclosure: 'Openbaarmaking van eHandtekening',
   minimize: 'Minimaliseren',
   text: 'Tekst',
   signature: 'Handtekening',
@@ -717,6 +772,11 @@ const nl = {
 }
 
 const ar = {
+  drawn_signature_on_a_touchscreen_device: 'توقيع مرسوم على جهاز بشاشة تعمل باللمس',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'امسح رمز الاستجابة السريعة باستخدام تطبيق الكاميرا لفتح النموذج على الهاتف المحمول ورسم توقيعك',
+  by_clicking_you_agree_to_the: 'بالنقر فوق "{button}"، أنت توافق على',
+  electronic_signature_disclosure: 'كشف التوقيع الإلكتروني',
+  esignature_disclosure: 'كشف التوقيع الإلكتروني',
   text: 'نص',
   signature: 'توقيع',
   initials: 'الاختصارات',
@@ -783,6 +843,11 @@ const ar = {
 }
 
 const ko = {
+  drawn_signature_on_a_touchscreen_device: '터치스크린 장치에서 그린 서명',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: '카메라 앱으로 QR 코드를 스캔하여 모바일에서 양식을 열고 서명을 그리세요',
+  by_clicking_you_agree_to_the: '"{button}"를 클릭함으로써, 다음에 동의하게 됩니다',
+  electronic_signature_disclosure: '전자 서명 공개',
+  esignature_disclosure: '전자 서명 공개',
   text: '텍스트',
   signature: '서명',
   initials: '이니셜',

app/javascript/submission_form/initials_step.vue

@@ -189,7 +189,7 @@ export default {
     this.$nextTick(() => {
       if (this.$refs.canvas) {
         this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth * scale
-        this.$refs.canvas.height = (this.$refs.canvas.parentNode.clientWidth / 3) * scale
+        this.$refs.canvas.height = (this.$refs.canvas.parentNode.clientWidth / 4.5) * scale
 
         this.$refs.canvas.getContext('2d').scale(scale, scale)
       }
@@ -208,7 +208,7 @@ export default {
         entries.forEach(entry => {
           if (entry.isIntersecting) {
             this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth * scale
-            this.$refs.canvas.height = (this.$refs.canvas.parentNode.clientWidth / 3) * scale
+            this.$refs.canvas.height = (this.$refs.canvas.parentNode.clientWidth / 4.5) * scale
 
             this.$refs.canvas.getContext('2d').scale(scale, scale)
 

app/javascript/submission_form/number_step.vue

@@ -10,7 +10,9 @@
      :string="field.title"
    />
     <template v-else>{{ field.name }}</template>
-    <template v-if="!field.required">({{ t('optional') }})</template>
+    <template v-if="!field.required">
+      ({{ t('optional') }})
+    </template>
   </label>
   <div
     v-else

app/javascript/submission_form/payment_step.vue

@@ -116,7 +116,7 @@ export default {
   methods: {
     async submit () {
       if (this.sessionId) {
-        return fetch((this.baseUrl || '/embed').replace('/embed', '/api/stripe_payments/' + this.sessionId), {
+        return fetch(this.baseUrl + '/api/stripe_payments/' + this.sessionId, {
           method: 'PUT',
           body: JSON.stringify({
             submitter_slug: this.submitterSlug
@@ -147,11 +147,12 @@ export default {
     startCheckout () {
       this.isCreatingCheckout = true
 
-      fetch((this.baseUrl || '/embed').replace('/embed', '/api/stripe_payments'), {
+      fetch(this.baseUrl + '/api/stripe_payments', {
         method: 'POST',
         body: JSON.stringify({
           submitter_slug: this.submitterSlug,
-          field_uuid: this.field.uuid
+          field_uuid: this.field.uuid,
+          referer: document.location.href
         }),
         headers: { 'Content-Type': 'application/json' }
       }).then(async (resp) => {

app/javascript/submission_form/phone_step.vue

@@ -11,7 +11,9 @@
       />
       <template v-else>
         {{ showFieldNames && field.name ? field.name : t('verified_phone_number') }}
-        <template v-if="!field.required">({{ t('optional') }})</template>
+        <template v-if="!field.required">
+          ({{ t('optional') }})
+        </template>
       </template>
     </label>
     <div

app/javascript/submission_form/signature_step.vue

@@ -1,5 +1,8 @@
 <template>
-  <div dir="auto">
+  <div
+    dir="auto"
+    class="relative"
+  >
     <div
       class="flex justify-between items-center w-full"
       :class="{ 'mb-2': !field.description }"
@@ -25,7 +28,7 @@
             id="type_text_button"
             href="#"
             class="btn btn-outline btn-sm font-medium"
-            @click.prevent="toggleTextInput"
+            @click.prevent="[toggleTextInput(), hideQr()]"
           >
             <IconSignature :width="16" />
             <span class="hidden sm:inline">
@@ -42,7 +45,7 @@
             id="type_text_button"
             href="#"
             class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap"
-            @click.prevent="toggleTextInput"
+            @click.prevent="[toggleTextInput(), hideQr()]"
           >
             <IconTextSize :width="16" />
             <span class="hidden sm:inline">
@@ -80,15 +83,23 @@
           <IconReload :width="16" />
           {{ t('redraw') }}
         </a>
-        <a
-          v-else
-          href="#"
-          class="btn btn-outline btn-sm font-medium"
-          @click.prevent="clear"
+        <span
+          v-if="withQrButton && !modelValue && !computedPreviousValue && field.preferences?.format !== 'typed'"
+          class=" tooltip"
+          :data-tip="t('drawn_signature_on_a_touchscreen_device')"
         >
-          <IconReload :width="16" />
-          {{ t('clear') }}
-        </a>
+          <a
+            href="#"
+            class="btn btn-sm btn-neutral font-medium hidden md:flex"
+            :class="{ 'btn-outline': !isShowQr, 'text-white': isShowQr }"
+            @click.prevent="isShowQr ? hideQr() : [isTextSignature = false, showQr()]"
+          >
+            <IconQrcode
+              :width="19"
+              :height="19"
+            />
+          </a>
+        </span>
         <a
           href="#"
           :title="t('minimize')"
@@ -118,14 +129,61 @@
     <img
       v-if="modelValue || computedPreviousValue"
       :src="attachmentsIndex[modelValue || computedPreviousValue].url"
-      class="mx-auto bg-white border border-base-300 rounded max-h-72"
+      class="mx-auto bg-white border border-base-300 rounded max-h-44"
     >
-    <canvas
-      v-show="!modelValue && !computedPreviousValue"
-      ref="canvas"
-      style="padding: 1px; 0"
-      class="bg-white border border-base-300 rounded-2xl w-full"
-    />
+    <div class="relative">
+      <div
+        v-if="!modelValue && !computedPreviousValue && !isShowQr && !isTextSignature && isSignatureStarted"
+        class="absolute top-0.5 right-0.5"
+      >
+        <a
+          href="#"
+          class="btn btn-ghost font-medium btn-xs md:btn-sm"
+          @click.prevent="[clear(), hideQr()]"
+        >
+          <IconReload :width="16" />
+          {{ t('clear') }}
+        </a>
+      </div>
+      <canvas
+        v-show="!modelValue && !computedPreviousValue"
+        ref="canvas"
+        style="padding: 1px; 0"
+        class="bg-white border border-base-300 rounded-2xl w-full"
+      />
+      <div
+        v-if="isShowQr"
+        class="top-0 bottom-0 right-0 left-0 absolute bg-white rounded-2xl m-0.5"
+      />
+      <div
+        v-show="isShowQr"
+        class="top-0 bottom-0 right-0 left-0 absolute bg-base-content/10 rounded-2xl"
+      >
+        <div
+          class="absolute top-1.5 right-1.5 tooltip"
+        >
+          <a
+            href="#"
+            class="btn btn-sm btn-circle btn-normal btn-outline"
+            @click.prevent="hideQr"
+          >
+            <IconX />
+          </a>
+        </div>
+        <div class="flex items-center justify-center w-full h-full p-4">
+          <div
+            v-if="withQrButton"
+            ref="qr"
+            class="bg-white p-4 rounded-xl h-full"
+          >
+            <canvas
+              ref="qrCanvas"
+              class="h-full"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
     <input
       v-if="isTextSignature"
       id="signature_text_input"
@@ -136,11 +194,39 @@
       type="text"
       @input="updateWrittenSignature"
     >
+    <div
+      v-if="isShowQr"
+      dir="auto"
+      class="text-base-content/60 text-xs text-center w-full mt-1"
+    >
+      {{ t('scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature') }}
+    </div>
+    <div
+      v-else-if="withDisclosure"
+      dir="auto"
+      class="text-base-content/60 text-xs text-center w-full mt-1"
+    >
+      {{ t('by_clicking_you_agree_to_the').replace('{button}', buttonText.charAt(0).toUpperCase() + buttonText.slice(1)) }} <a
+        href="https://www.docuseal.co/esign-disclosure"
+        target="_blank"
+      >
+        <span class="inline md:hidden">
+          {{ t('esignature_disclosure') }}
+        </span>
+        <span class="hidden md:inline">
+          {{ t('electronic_signature_disclosure') }}
+        </span>
+      </a>
+    </div>
+    <div
+      v-else
+      class="mt-5 md:mt-7"
+    />
   </div>
 </template>
 
 <script>
-import { IconReload, IconCamera, IconSignature, IconTextSize, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
+import { IconReload, IconCamera, IconSignature, IconTextSize, IconArrowsDiagonalMinimize2, IconQrcode, IconX } from '@tabler/icons-vue'
 import { cropCanvasAndExportToPNG } from './crop_canvas'
 import SignaturePad from 'signature_pad'
 import AppearsOn from './appears_on'
@@ -156,7 +242,9 @@ export default {
     AppearsOn,
     IconReload,
     IconCamera,
+    IconQrcode,
     MarkdownContent,
+    IconX,
     IconTextSize,
     IconSignature,
     IconArrowsDiagonalMinimize2
@@ -167,8 +255,8 @@ export default {
       type: Object,
       required: true
     },
-    submitterSlug: {
-      type: String,
+    submitter: {
+      type: Object,
       required: true
     },
     showFieldNames: {
@@ -176,11 +264,31 @@ export default {
       required: false,
       default: true
     },
+    withDisclosure: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    withQrButton: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    buttonText: {
+      type: String,
+      required: false,
+      default: 'Submit'
+    },
     withTypedSignature: {
       type: Boolean,
       required: false,
       default: true
     },
+    rememberSignature: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     attachmentsIndex: {
       type: Object,
       required: false,
@@ -201,12 +309,16 @@ export default {
   data () {
     return {
       isSignatureStarted: !!this.previousValue,
+      isShowQr: false,
       isUsePreviousValue: true,
       isTextSignature: this.field.preferences?.format === 'typed',
       uploadImageInputKey: Math.random().toString()
     }
   },
   computed: {
+    submitterSlug () {
+      return this.submitter.slug
+    },
     computedPreviousValue () {
       if (this.isUsePreviousValue) {
         return this.previousValue
@@ -223,12 +335,24 @@ export default {
 
         this.$refs.canvas.getContext('2d').scale(scale, scale)
       }
+
+      if (this.withQrButton) {
+        import('qr-creator').then(({ default: Qr }) => {
+          Qr.render({
+            text: `${document.location.origin}/p/${this.submitterSlug}?f=${this.field.uuid.split('-')[0]}`,
+            radius: 0.0,
+            ecLevel: 'H',
+            background: null,
+            size: 132
+          }, this.$refs.qrCanvas)
+        })
+      }
     })
 
     if (this.$refs.canvas) {
       this.pad = new SignaturePad(this.$refs.canvas)
 
-      this.pad.addEventListener('beginStroke', () => {
+      this.pad.addEventListener('endStroke', () => {
         this.isSignatureStarted = true
 
         this.$emit('start')
@@ -252,6 +376,7 @@ export default {
   },
   beforeUnmount () {
     this.intersectionObserver?.disconnect()
+    this.stopCheckSignature()
   },
   methods: {
     remove () {
@@ -273,6 +398,41 @@ export default {
         })
       }
     },
+    showQr () {
+      this.isShowQr = true
+
+      this.startCheckSignature()
+    },
+    hideQr () {
+      this.isShowQr = false
+
+      this.stopCheckSignature()
+    },
+    startCheckSignature () {
+      const after = JSON.stringify(new Date())
+
+      this.checkSignatureInterval = setInterval(() => {
+        this.checkSignature({ after })
+      }, 2000)
+    },
+    stopCheckSignature () {
+      if (this.checkSignatureInterval) {
+        clearInterval(this.checkSignatureInterval)
+      }
+    },
+    checkSignature (params = {}) {
+      return fetch(this.baseUrl + '/s/' + this.submitterSlug + '/values?field_uuid=' + this.field.uuid + '&after=' + params.after, {
+        method: 'GET'
+      }).then(async (resp) => {
+        const { attachment } = await resp.json()
+
+        if (attachment?.uuid) {
+          this.$emit('attached', attachment)
+          this.$emit('update:model-value', attachment.uuid)
+          this.hideQr()
+        }
+      })
+    },
     clear () {
       this.pad.clear()
 
@@ -280,6 +440,7 @@ export default {
 
       if (this.$refs.textInput) {
         this.$refs.textInput.value = ''
+        this.$refs.textInput.focus()
       }
     },
     updateWrittenSignature (e) {
@@ -368,6 +529,27 @@ export default {
         this.uploadImageInputKey = Math.random().toString()
       }
     },
+    maybeSetSignedUuid (signedUuid) {
+      try {
+        if (window.localStorage && signedUuid && this.rememberSignature) {
+          const values = window.localStorage.getItem('signed_signature_uuids')
+
+          let data
+
+          if (values) {
+            data = JSON.parse(values)
+          } else {
+            data = {}
+          }
+
+          data[this.submitter.email] = signedUuid
+
+          window.localStorage.setItem('signed_signature_uuids', JSON.stringify(data))
+        }
+      } catch (e) {
+        console.error(e)
+      }
+    },
     async submit () {
       if (this.modelValue || this.computedPreviousValue) {
         if (this.computedPreviousValue) {
@@ -386,6 +568,7 @@ export default {
           formData.append('file', file)
           formData.append('submitter_slug', this.submitterSlug)
           formData.append('name', 'attachments')
+          formData.append('remember_signature', this.rememberSignature)
 
           return fetch(this.baseUrl + '/api/attachments', {
             method: 'POST',
@@ -394,6 +577,8 @@ export default {
             this.$emit('attached', attachment)
             this.$emit('update:model-value', attachment.uuid)
 
+            this.maybeSetSignedUuid(attachment.signed_uuid)
+
             return resolve(attachment)
           })
         }).catch((error) => {

app/javascript/submission_form/text_step.vue

@@ -10,7 +10,9 @@
      :string="field.title"
    />
     <template v-else>{{ field.name }}</template>
-    <template v-if="!field.required">({{ t('optional') }})</template>
+    <template v-if="!field.required">
+      ({{ t('optional') }})
+    </template>
   </label>
   <div
     v-else

app/javascript/template_builder/area.vue

@@ -3,7 +3,7 @@
     class="absolute overflow-visible group"
     :style="positionStyle"
     @pointerdown.stop
-    @mousedown.stop="startDrag"
+    @mousedown="startMouseMove"
     @touchstart="startTouchDrag"
   >
     <div
@@ -65,15 +65,17 @@
         dir="auto"
         class="pr-1 cursor-text outline-none block"
         style="min-width: 2px"
+        @paste.prevent="onPaste"
         @keydown.enter.prevent="onNameEnter"
         @focus="onNameFocus"
         @blur="onNameBlur"
       >{{ optionIndexText }} {{ (defaultField ? (field.title || field.name) : field.name) || defaultName }}</span>
       <div
-        v-if="isSettingsFocus || (isNameFocus && !['checkbox', 'phone'].includes(field.type))"
+        v-if="isSettingsFocus || isContenteditable || (isNameFocus && !['checkbox', 'phone'].includes(field.type))"
         class="flex items-center ml-1.5"
       >
         <input
+          v-if="!isContenteditable"
           :id="`required-checkbox-${field.uuid}`"
           v-model="field.required"
           type="checkbox"
@@ -81,13 +83,30 @@
           @mousedown.prevent
         >
         <label
+          v-if="!isContenteditable"
           :for="`required-checkbox-${field.uuid}`"
           class="label text-xs"
           @click.prevent="field.required = !field.required"
           @mousedown.prevent
         >{{ t('required') }}</label>
+        <input
+          v-if="isContenteditable"
+          :id="`readonly-checkbox-${field.uuid}`"
+          type="checkbox"
+          class="checkbox checkbox-xs no-animation rounded"
+          :checked="!(field.readonly ?? true)"
+          @change="field.readonly = !(field.readonly ?? true)"
+          @mousedown.prevent
+        >
+        <label
+          v-if="isContenteditable"
+          :for="`readonly-checkbox-${field.uuid}`"
+          class="label text-xs"
+          @click.prevent="field.readonly = !(field.readonly ?? true)"
+          @mousedown.prevent
+        >{{ t('editable') }}</label>
         <span
-          v-if="field.type !== 'payment'"
+          v-if="field.type !== 'payment' && !isContenteditable"
           class="dropdown dropdown-end"
           @mouseenter="renderDropdown = true"
           @touchstart="renderDropdown = true"
@@ -140,7 +159,7 @@
     <div
       class="flex items-center h-full w-full"
       dir="auto"
-      :class="[bgColors[submitterIndex], field?.default_value ? (alignClasses[field.preferences?.align] || '') : 'justify-center']"
+      :class="[isContenteditable ? 'bg-opacity-50' : 'bg-opacity-80', bgColors[submitterIndex], isDefaultValuePresent || isContenteditable ? (alignClasses[field.preferences?.align] || '') : 'justify-center']"
     >
       <span
         v-if="field"
@@ -148,7 +167,7 @@
         :class="{'w-full h-full': field.type == 'checkbox'}"
       >
         <div
-          v-if="field?.default_value"
+          v-if="isDefaultValuePresent || isContenteditable"
           :class="{ 'w-full h-full': field.type == 'checkbox', 'text-[1.5vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars }"
         >
           <div
@@ -162,8 +181,19 @@
               :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
             />
             <span
-              v-else
+              v-else-if="field.type === 'number' && !isContenteditable"
               class="whitespace-pre-wrap"
+            >{{ formatNumber(field.default_value, field.preferences?.format) }}</span>
+            <span
+              v-else
+              ref="defaultValue"
+              :contenteditable="isContenteditable"
+              class="whitespace-pre-wrap outline-none empty:before:content-[attr(placeholder)] before:text-gray-400"
+              :class="{ 'cursor-text': isContenteditable }"
+              :placeholder="t('type_value')"
+              @blur="onDefaultValueBlur"
+              @paste.prevent="onPaste"
+              @keydown.enter.prevent="onDefaultValueEnter"
             >{{ field.default_value }}</span>
           </div>
         </div>
@@ -177,8 +207,11 @@
       </span>
     </div>
     <div
+      v-if="!isContenteditable"
       ref="touchTarget"
-      class="absolute top-0 bottom-0 right-0 left-0 cursor-pointer"
+      class="absolute top-0 bottom-0 right-0 left-0"
+      :class="isDragged ? 'cursor-grab' : 'cursor-pointer'"
+      @dblclick="maybeFocusDefaultValue"
     />
     <span
       v-if="field?.type && editable"
@@ -282,6 +315,7 @@ export default {
     return {
       isShowFormulaModal: false,
       isShowConditionsModal: false,
+      isContenteditable: false,
       isSettingsFocus: false,
       isShowDescriptionModal: false,
       isResize: false,
@@ -295,6 +329,9 @@ export default {
   computed: {
     fieldNames: FieldType.computed.fieldNames,
     fieldIcons: FieldType.computed.fieldIcons,
+    isDefaultValuePresent () {
+      return this.field?.default_value || this.field?.default_value === 0
+    },
     modalContainerEl () {
       return this.$el.getRootNode().querySelector('#docuseal_modal_container')
     },
@@ -360,26 +397,26 @@ export default {
     },
     bgColors () {
       return [
-        'bg-red-100/80',
-        'bg-sky-100/80',
-        'bg-emerald-100/80',
-        'bg-yellow-100/80',
-        'bg-purple-100/80',
-        'bg-pink-100/80',
-        'bg-cyan-100/80',
-        'bg-orange-100/80',
-        'bg-lime-100/80',
-        'bg-indigo-100/80',
-        'bg-red-100/80',
-        'bg-sky-100/80',
-        'bg-emerald-100/80',
-        'bg-yellow-100/80',
-        'bg-purple-100/80',
-        'bg-pink-100/80',
-        'bg-cyan-100/80',
-        'bg-orange-100/80',
-        'bg-lime-100/80',
-        'bg-indigo-100/80'
+        'bg-red-100',
+        'bg-sky-100',
+        'bg-emerald-100',
+        'bg-yellow-100',
+        'bg-purple-100',
+        'bg-pink-100',
+        'bg-cyan-100',
+        'bg-orange-100',
+        'bg-lime-100',
+        'bg-indigo-100',
+        'bg-red-100',
+        'bg-sky-100',
+        'bg-emerald-100',
+        'bg-yellow-100',
+        'bg-purple-100',
+        'bg-pink-100',
+        'bg-cyan-100',
+        'bg-orange-100',
+        'bg-lime-100',
+        'bg-indigo-100'
       ]
     },
     isSelected () {
@@ -417,6 +454,33 @@ export default {
     closeDropdown () {
       document.activeElement.blur()
     },
+    maybeFocusDefaultValue () {
+      if (['text', 'number'].includes(this.field.type)) {
+        this.isContenteditable = true
+
+        this.$nextTick(() => {
+          this.$refs.defaultValue.focus()
+
+          if (this.$refs.defaultValue.innerText.length) {
+            window.getSelection().collapse(
+              this.$refs.defaultValue.firstChild,
+              this.$refs.defaultValue.innerText.length
+            )
+          }
+        })
+      }
+    },
+    formatNumber (number, format) {
+      if (format === 'comma') {
+        return new Intl.NumberFormat('en-US').format(number)
+      } else if (format === 'dot') {
+        return new Intl.NumberFormat('de-DE').format(number)
+      } else if (format === 'space') {
+        return new Intl.NumberFormat('fr-FR').format(number)
+      } else {
+        return number
+      }
+    },
     maybeBlurSettings (e) {
       if (!e.relatedTarget || !this.$refs.settingsDropdown.contains(e.relatedTarget)) {
         this.isSettingsFocus = false
@@ -448,6 +512,9 @@ export default {
 
       this.save()
     },
+    onPaste (e) {
+      e.target.innerText = (e.clipboardData || window.clipboardData).getData('text/plain')
+    },
     onResizeCell (e) {
       if (e.target.id === 'mask') {
         const positionX = e.offsetX / (e.target.clientWidth - 1)
@@ -495,6 +562,38 @@ export default {
 
       this.save()
     },
+    onDefaultValueBlur (e) {
+      const text = this.$refs.defaultValue.innerText.trim()
+
+      this.isContenteditable = false
+
+      if (text) {
+        if (this.field.type === 'number') {
+          const number = parseFloat(text)
+
+          if (number || number === 0) {
+            this.field.default_value = parseFloat(text)
+          }
+        } else {
+          this.field.default_value = text
+        }
+
+        if (![true, false].includes(this.field.readonly)) {
+          this.field.readonly = true
+        }
+
+        this.$refs.defaultValue.innerText = text
+      } else {
+        delete this.field.readonly
+        delete this.field.default_value
+        this.$refs.defaultValue.innerText = ''
+      }
+
+      this.save()
+    },
+    onDefaultValueEnter (e) {
+      this.$refs.defaultValue.blur()
+    },
     onNameEnter (e) {
       this.$refs.name.blur()
     },
@@ -533,7 +632,7 @@ export default {
         return
       }
 
-      this.$refs?.name?.blur()
+      document.activeElement?.blur()
 
       e.preventDefault()
 
@@ -554,8 +653,8 @@ export default {
       const page = this.$parent.$refs.mask.previousSibling
       const rect = page.getBoundingClientRect()
 
-      this.area.x = (this.dragFrom.x + e.touches[0].clientX - rect.left) / rect.width
-      this.area.y = (this.dragFrom.y + e.touches[0].clientY - rect.top) / rect.height
+      this.area.x = Math.min(Math.max((this.dragFrom.x + e.touches[0].clientX - rect.left) / rect.width, 0), 1 - this.area.w)
+      this.area.y = Math.min(Math.max((this.dragFrom.y + e.touches[0].clientY - rect.top) / rect.height, 0), 1 - this.area.h)
     },
     stopTouchDrag () {
       this.$el.getRootNode().removeEventListener('touchmove', this.touchDrag)
@@ -569,6 +668,47 @@ export default {
 
       this.$emit('stop-drag')
     },
+    startMouseMove (e) {
+      if (e.target !== this.$refs.touchTarget) {
+        return
+      }
+
+      document.activeElement?.blur()
+
+      e.preventDefault()
+
+      this.isDragged = true
+
+      const rect = e.target.getBoundingClientRect()
+
+      this.selectedAreaRef.value = this.area
+
+      this.dragFrom = { x: rect.left - e.clientX, y: rect.top - e.clientY }
+
+      this.$el.getRootNode().addEventListener('mousemove', this.mouseMove)
+      this.$el.getRootNode().addEventListener('mouseup', this.stopMouseMove)
+
+      this.$emit('start-drag')
+    },
+    mouseMove (e) {
+      const page = this.$parent.$refs.mask.previousSibling
+      const rect = page.getBoundingClientRect()
+
+      this.area.x = Math.min(Math.max((this.dragFrom.x + e.clientX - rect.left) / rect.width, 0), 1 - this.area.w)
+      this.area.y = Math.min(Math.max((this.dragFrom.y + e.clientY - rect.top) / rect.height, 0), 1 - this.area.h)
+    },
+    stopMouseMove (e) {
+      this.$el.getRootNode().removeEventListener('mousemove', this.mouseMove)
+      this.$el.getRootNode().removeEventListener('mouseup', this.stopMouseMove)
+
+      if (this.isDragged) {
+        this.save()
+      }
+
+      this.isDragged = false
+
+      this.$emit('stop-drag')
+    },
     stopDrag () {
       this.$el.getRootNode().removeEventListener('mousemove', this.drag)
       this.$el.getRootNode().removeEventListener('mouseup', this.stopDrag)

app/javascript/template_builder/builder.vue

@@ -1116,30 +1116,58 @@ export default {
       if (!this.isAllRequiredFieldsAdded) {
         e.preventDefault()
 
-        return alert(this.t('add_all_required_fields_to_continue'))
+        const fields = this.defaultRequiredFields?.filter((f) => {
+          return !this.template.fields?.some((field) => field.name === f.name)
+        })
+
+        if (fields?.length) {
+          return alert(this.t('add_all_required_fields_to_continue') + ': ' + fields.map((f) => f.name).join(', '))
+        }
       }
 
       if (!this.template.fields.length) {
         e.preventDefault()
 
         alert('Please draw fields to prepare the document.')
+      } else {
+        const submitterWithoutFields =
+          this.template.submitters.find((submitter) => !this.template.fields.some((f) => f.submitter_uuid === submitter.uuid))
+
+        if (submitterWithoutFields) {
+          e.preventDefault()
+
+          alert(`Please add fields for ${submitterWithoutFields.name} to prepare the document or remove the party.`)
+        }
       }
     },
     onSaveClick () {
       if (!this.isAllRequiredFieldsAdded) {
-        return alert(this.t('add_all_required_fields_to_continue'))
+        const fields = this.defaultRequiredFields?.filter((f) => {
+          return !this.template.fields?.some((field) => field.name === f.name)
+        })
+
+        if (fields?.length) {
+          return alert(this.t('add_all_required_fields_to_continue') + ': ' + fields.map((f) => f.name).join(', '))
+        }
       }
 
-      if (this.template.fields.length) {
-        this.isSaving = true
-
-        this.save().then(() => {
-          window.Turbo.visit(`/templates/${this.template.id}`)
-        }).finally(() => {
-          this.isSaving = false
-        })
-      } else {
+      if (!this.template.fields.length) {
         alert('Please draw fields to prepare the document.')
+      } else {
+        const submitterWithoutFields =
+          this.template.submitters.find((submitter) => !this.template.fields.some((f) => f.submitter_uuid === submitter.uuid))
+
+        if (submitterWithoutFields) {
+          alert(`Please add fields for ${submitterWithoutFields.name} to prepare the document or remove the party.`)
+        } else {
+          this.isSaving = true
+
+          this.save().then(() => {
+            window.Turbo.visit(`/templates/${this.template.id}`)
+          }).finally(() => {
+            this.isSaving = false
+          })
+        }
       }
     },
     scrollToArea (area) {

app/javascript/template_builder/conditions_modal.vue

@@ -29,21 +29,38 @@
           >Available in Pro</a>
         </div>
         <form @submit.prevent="validateSaveAndClose">
-          <div class="my-4">
-            <div class="space-y-4">
+          <div class="my-4 space-y-5">
+            <div
+              v-for="(condition, cindex) in conditions"
+              :key="cindex"
+              class="space-y-4 relative"
+            >
+              <div
+                v-if="conditions.length > 1"
+                class="flex justify-between border-b mx-1 -mb-1 pb-1"
+              >
+                <span class="text-sm">
+                  {{ t('condition') }} {{ cindex + 1 }}
+                </span>
+                <a
+                  href="#"
+                  class="link text-sm"
+                  @click.prevent="conditions.splice(cindex, 1)"
+                > {{ t('remove') }}</a>
+              </div>
               <select
                 class="select select-bordered select-sm w-full bg-white h-11 pl-4 text-base font-normal"
                 required
                 @change="[
-                  newCondition.field_uuid = $event.target.value,
-                  delete newCondition.value,
-                  (conditionActions.includes(newCondition.action) ? '' : newCondition.action = conditionActions[0])
+                  condition.field_uuid = $event.target.value,
+                  delete condition.value,
+                  (conditionActions(condition).includes(condition.action) ? '' : condition.action = conditionActions(condition)[0])
                 ]"
               >
                 <option
                   value=""
                   disabled
-                  :selected="!newCondition.field_uuid"
+                  :selected="!condition.field_uuid"
                 >
                   {{ t('select_field_') }}
                 </option>
@@ -51,19 +68,19 @@
                   v-for="f in fields"
                   :key="f.uuid"
                   :value="f.uuid"
-                  :selected="newCondition.field_uuid === f.uuid"
+                  :selected="condition.field_uuid === f.uuid"
                 >
                   {{ f.name || buildDefaultName(f, template.fields) }}
                 </option>
               </select>
               <select
-                v-model="newCondition.action"
+                v-model="condition.action"
                 class="select select-bordered select-sm w-full h-11 pl-4 text-base font-normal"
-                :class="{ 'bg-white': newCondition.field_uuid, 'bg-base-300': !newCondition.field_uuid }"
-                :required="newCondition.field_uuid"
+                :class="{ 'bg-white': condition.field_uuid, 'bg-base-300': !condition.field_uuid }"
+                :required="condition.field_uuid"
               >
                 <option
-                  v-for="action in conditionActions"
+                  v-for="action in conditionActions(condition)"
                   :key="action"
                   :value="action"
                 >
@@ -71,10 +88,10 @@
                 </option>
               </select>
               <select
-                v-if="conditionField?.options?.length"
+                v-if="conditionField(condition)?.options?.length"
                 class="select select-bordered select-sm w-full bg-white h-11 pl-4 text-base font-normal"
                 required
-                @change="newCondition.value = $event.target.value"
+                @change="condition.value = $event.target.value"
               >
                 <option
                   value=""
@@ -84,16 +101,21 @@
                   {{ t('select_value_') }}
                 </option>
                 <option
-                  v-for="(option, index) in conditionField.options"
+                  v-for="(option, index) in conditionField(condition).options"
                   :key="option.uuid"
                   :value="option.uuid"
-                  :selected="newCondition.value === option.uuid"
+                  :selected="condition.value === option.uuid"
                 >
                   {{ option.value || `${t('option')} ${index + 1}` }}
                 </option>
               </select>
             </div>
           </div>
+          <a
+            href="#"
+            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"
           >
@@ -106,7 +128,7 @@
         >
           <button
             class="link"
-            @click="[newCondition.field_uuid = null, delete field.conditions, validateSaveAndClose()]"
+            @click="[conditions = [], delete field.conditions, validateSaveAndClose()]"
           >
             {{ t('remove_condition') }}
           </button>
@@ -133,16 +155,10 @@ export default {
   emits: ['close'],
   data () {
     return {
-      newCondition: this.field.conditions?.[0] || {}
+      conditions: this.field.conditions?.[0] ? JSON.parse(JSON.stringify(this.field.conditions)) : [{}]
     }
   },
   computed: {
-    conditionField () {
-      return this.fields.find((f) => f.uuid === this.newCondition.field_uuid)
-    },
-    conditionActions () {
-      return this.fieldActions(this.conditionField)
-    },
     fields () {
       return this.template.fields.reduce((acc, f) => {
         if (f !== this.field && f.submitter_uuid === this.field.submitter_uuid) {
@@ -157,6 +173,12 @@ export default {
     this.field.conditions ||= []
   },
   methods: {
+    conditionField (condition) {
+      return this.fields.find((f) => f.uuid === condition.field_uuid)
+    },
+    conditionActions (condition) {
+      return this.fieldActions(this.conditionField(condition))
+    },
     fieldActions (field) {
       const actions = []
 
@@ -181,8 +203,8 @@ export default {
         return alert('Available only in Pro')
       }
 
-      if (this.newCondition.field_uuid) {
-        this.field.conditions = [this.newCondition]
+      if (this.conditions.find((f) => f.field_uuid)) {
+        this.field.conditions = this.conditions
       } else {
         delete this.field.conditions
       }

app/javascript/template_builder/contenteditable.vue

@@ -10,6 +10,7 @@
       style="min-width: 2px"
       :class="iconInline ? 'inline' : 'block'"
       class="peer outline-none focus:block"
+      @paste.prevent="onPaste"
       @keydown.enter.prevent="blurContenteditable"
       @focus="$emit('focus', $event)"
       @blur="onBlur"
@@ -97,6 +98,9 @@ export default {
     }
   },
   methods: {
+    onPaste (e) {
+      e.target.innerText = (e.clipboardData || window.clipboardData).getData('text/plain')
+    },
     selectContent () {
       const el = this.$refs.contenteditable
 

app/javascript/template_builder/field.vue

@@ -57,7 +57,7 @@
           class="flex items-center space-x-1"
         >
           <button
-            v-if="field && !field.areas.length"
+            v-if="field && !field.areas?.length"
             :title="t('draw')"
             class="relative cursor-pointer text-transparent group-hover:text-base-content"
             @click="$emit('set-draw', { field })"
@@ -92,6 +92,7 @@
           <PaymentSettings
             v-if="field.type === 'payment'"
             :field="field"
+            @click-condition="isShowConditionsModal = true"
           />
           <span
             v-else

app/javascript/template_builder/field_settings.vue

@@ -1,4 +1,31 @@
 <template>
+  <div
+    v-if="field.type === 'number'"
+    class="py-1.5 px-1 relative"
+    @click.stop
+  >
+    <select
+      :placeholder="t('format')"
+      class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0 bg-transparent"
+      @change="[field.preferences ||= {}, field.preferences.format = $event.target.value, save()]"
+    >
+      <option
+        v-for="format in numberFormats"
+        :key="format"
+        :value="format"
+        :selected="format === field.preferences?.format || (format === 'none' && !field.preferences?.format)"
+      >
+        {{ formatNumber(123456789.567, format) }}
+      </option>
+    </select>
+    <label
+      :style="{ backgroundColor }"
+      class="absolute -top-1 left-2.5 px-1 h-4"
+      style="font-size: 8px"
+    >
+      {{ t('format') }}
+    </label>
+  </div>
   <div
     v-if="['number'].includes(field.type)"
     class="py-1.5 px-1 relative"
@@ -47,6 +74,66 @@
       {{ t('default_value') }}
     </label>
   </div>
+  <div
+    v-if="['text', 'cells'].includes(field.type)"
+    class="py-1.5 px-1 relative"
+    @click.stop
+  >
+    <select
+      class="select select-bordered select-xs w-full max-w-xs h-7 !outline-0 font-normal bg-transparent"
+      @change="onChangeValidation"
+    >
+      <option
+        :selected="!field.validation"
+        value=""
+      >
+        {{ t('none') }}
+      </option>
+      <option
+        v-for="(key, value) in validations"
+        :key="key"
+        :selected="field.validation?.pattern ? value === field.validation.pattern : value === 'none'"
+        :value="value"
+      >
+        {{ t(key) }}
+      </option>
+      <option
+        :selected="field.validation && !validations[field.validation.pattern]"
+        :value="validations[field.validation?.pattern] || !field.validation?.pattern ? 'custom' : field.validation?.pattern"
+      >
+        {{ t('custom') }}
+      </option>
+    </select>
+    <label
+      :style="{ backgroundColor }"
+      class="absolute -top-1 left-2.5 px-1 h-4"
+      style="font-size: 8px"
+    >
+      {{ t('validation') }}
+    </label>
+  </div>
+  <div
+    v-if="['text', 'cells'].includes(field.type) && field.validation && !validations[field.validation.pattern]"
+    class="py-1.5 px-1 relative"
+    @click.stop
+  >
+    <input
+      ref="validationCustom"
+      v-model="field.validation.pattern"
+      :placeholder="t('regexp_validation')"
+      dir="auto"
+      class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0 bg-transparent"
+      @blur="save"
+    >
+    <label
+      v-if="field.validation.pattern"
+      :style="{ backgroundColor }"
+      class="absolute -top-1 left-2.5 px-1 h-4"
+      style="font-size: 8px"
+    >
+      {{ t('regexp_validation') }}
+    </label>
+  </div>
   <div
     v-if="field.type === 'date'"
     class="py-1.5 px-1 relative"
@@ -335,6 +422,14 @@ export default {
         return acc
       }, {})
     },
+    numberFormats () {
+      return [
+        'none',
+        'comma',
+        'dot',
+        'space'
+      ]
+    },
     dateFormats () {
       const formats = [
         'MM/DD/YYYY',
@@ -358,6 +453,17 @@ export default {
 
       return formats
     },
+    validations () {
+      return {
+        '^[0-9]{3}-[0-9]{2}-[0-9]{4}$': 'ssn',
+        '^[0-9]{2}-[0-9]{7}$': 'ein',
+        '^[^@\\s]+@[^@\\s]+\\.[^@\\s]+$': 'email',
+        '^https?://.*': 'url',
+        '^[0-9]{5}(?:-[0-9]{4})?$': 'zip',
+        '^[0-9]+$': 'numbers_only',
+        '^[a-zA-Z]+$': 'letters_only'
+      }
+    },
     sortedAreas () {
       return (this.field.areas || []).sort((a, b) => {
         return this.schemaAttachmentsIndexes[a.attachment_uuid] - this.schemaAttachmentsIndexes[b.attachment_uuid]
@@ -365,6 +471,20 @@ export default {
     }
   },
   methods: {
+    onChangeValidation (event) {
+      if (event.target.value === 'custom') {
+        this.field.validation = { pattern: '' }
+
+        this.$nextTick(() => this.$refs.validationCustom.focus())
+      } else if (event.target.value) {
+        this.field.validation ||= {}
+        this.field.validation.pattern = event.target.value
+      } else {
+        delete this.field.validation
+      }
+
+      this.save()
+    },
     copyToAllPages (field) {
       const areaString = JSON.stringify(field.areas[0])
 
@@ -382,6 +502,17 @@ export default {
 
       this.save()
     },
+    formatNumber (number, format) {
+      if (format === 'comma') {
+        return new Intl.NumberFormat('en-US').format(number)
+      } else if (format === 'dot') {
+        return new Intl.NumberFormat('de-DE').format(number)
+      } else if (format === 'space') {
+        return new Intl.NumberFormat('fr-FR').format(number)
+      } else {
+        return number
+      }
+    },
     formatDate (date, format) {
       const monthFormats = {
         M: 'numeric',

app/javascript/template_builder/i18n.js

@@ -1,16 +1,19 @@
 const en = {
+  editable: 'Editable',
   search_field: 'Search field',
   field_not_found: 'Field not found',
   clear: 'Clear',
   align: 'Align',
   add_all_required_fields_to_continue: 'Add all required fields to continue',
   left: 'Left',
+  validation: 'Validation',
   right: 'Right',
   center: 'Center',
   description: 'Description',
   display_title: 'Display title',
   with_logo: 'With logo',
   unchecked: 'Unchecked',
+  type_value: 'Type value',
   equal: 'Equal',
   not_equal: 'Not equal',
   contains: 'Contains',
@@ -20,6 +23,7 @@ const en = {
   select_field_: 'Select field...',
   select_value_: 'Select value...',
   remove_condition: 'Remove condition',
+  add_condition: 'Add condition',
   are_you_sure: 'Are you sure?',
   sign_yourself: 'Sign Yourself',
   set_signing_date: 'Set signing date',
@@ -97,7 +101,17 @@ const en = {
   draw_field: 'Draw {field} Field',
   replace: 'Replace',
   uploading_: 'Uploading...',
-  add_document: 'Add Document'
+  add_document: 'Add Document',
+  none: 'None',
+  ssn: 'SSN',
+  ein: 'EIN',
+  email: 'Email',
+  url: 'URL',
+  zip: 'ZIP',
+  custom: 'Custom',
+  numbers_only: 'Numbers only',
+  letters_only: 'Letters only',
+  regexp_validation: 'Regexp validation'
 }
 
 export { en }

app/javascript/template_builder/import_list.vue

@@ -267,7 +267,7 @@ export default {
           if (mapping.field_name && mapping.column_index != null) {
             submittersIndex[mapping.submitter_uuid] ||= { uuid: mapping.submitter_uuid, fields: [] }
 
-            if (['name', 'email', 'phone'].includes(mapping.field_name.toLowerCase())) {
+            if (['name', 'email', 'phone', 'external_id'].includes(mapping.field_name.toLowerCase())) {
               submittersIndex[mapping.submitter_uuid][mapping.field_name.toLowerCase()] = row[mapping.column_index]
             } else {
               submittersIndex[mapping.submitter_uuid].fields.push({
@@ -351,7 +351,13 @@ export default {
           this.defaultFields.every((f) => field.name?.toLowerCase() !== f.name?.toLowerCase())
       })
 
-      return [...this.defaultFields, ...templateFields]
+      const fields = [...this.defaultFields, ...templateFields]
+
+      if (this.spreadsheet && this.columns.includes('external_id')) {
+        fields.push({ name: 'external_id' })
+      }
+
+      return fields
     },
     buildDefaultMappings () {
       this.submitters.forEach((submitter) => {

app/javascript/template_builder/page.vue

@@ -27,8 +27,6 @@
         :default-submitters="defaultSubmitters"
         @start-resize="resizeDirection = $event"
         @stop-resize="resizeDirection = null"
-        @start-drag="isMove = true"
-        @stop-drag="isMove = false"
         @remove="$emit('remove-area', item.area)"
         @scroll-to="$emit('scroll-to', $event)"
       />
@@ -40,11 +38,11 @@
       />
     </div>
     <div
-      v-show="resizeDirection || isMove || isDrag || showMask || (drawField && isMobile) || fieldsDragFieldRef.value"
+      v-show="resizeDirection || isDrag || showMask || (drawField && isMobile) || fieldsDragFieldRef.value"
       id="mask"
       ref="mask"
       class="top-0 bottom-0 left-0 right-0 absolute"
-      :class="{ 'z-10': !isMobile, 'cursor-grab': isDrag || isMove, 'cursor-nwse-resize': drawField, [resizeDirectionClasses[resizeDirection]]: !!resizeDirectionClasses }"
+      :class="{ 'z-10': !isMobile, 'cursor-grab': isDrag, 'cursor-nwse-resize': drawField, [resizeDirectionClasses[resizeDirection]]: !!resizeDirectionClasses }"
       @pointermove="onPointermove"
       @pointerdown="onStartDraw"
       @dragover.prevent
@@ -122,7 +120,6 @@ export default {
     return {
       areaRefs: [],
       showMask: false,
-      isMove: false,
       resizeDirection: null,
       newArea: null
     }

app/javascript/template_builder/payment_settings.vue

@@ -149,12 +149,26 @@
           data-turbo="false"
         >Learn more</a>
       </div>
+      <hr>
+      <li class="mt-1">
+        <label
+          class="label-text cursor-pointer text-center w-full flex items-center"
+          @click="$emit('click-condition')"
+        >
+          <IconRouteAltLeft
+            width="18"
+          />
+          <span class="text-sm">
+            {{ t('condition') }}
+          </span>
+        </label>
+      </li>
     </ul>
   </span>
 </template>
 
 <script>
-import { IconSettings, IconCircleCheck, IconBrandStripe, IconInnerShadowTop } from '@tabler/icons-vue'
+import { IconSettings, IconCircleCheck, IconBrandStripe, IconInnerShadowTop, IconRouteAltLeft } from '@tabler/icons-vue'
 import { ref } from 'vue'
 
 const isConnected = ref(false)
@@ -164,6 +178,7 @@ export default {
   components: {
     IconSettings,
     IconCircleCheck,
+    IconRouteAltLeft,
     IconInnerShadowTop,
     IconBrandStripe
   },
@@ -174,6 +189,7 @@ export default {
       required: true
     }
   },
+  emits: ['click-condition'],
   data () {
     return {
       isLoading: false

app/jobs/process_submitter_completion_job.rb

@@ -33,19 +33,25 @@ class ProcessSubmitterCompletionJob < ApplicationJob
         SubmitterMailer.completed_email(submitter, user).deliver_later!
       end
 
-      bcc = submission.preferences['bcc_completed'].presence ||
-            submission.template.preferences['bcc_completed'].presence ||
-            submission.account.account_configs
-                      .find_by(key: AccountConfig::BCC_EMAILS)&.value
-
-      bcc.to_s.scan(User::EMAIL_REGEXP).each do |to|
+      build_bcc_addresses(submission).each do |to|
         SubmitterMailer.completed_email(submitter, user, to:).deliver_later!
       end
     end
 
     to = build_to_addresses(submitter)
 
-    SubmitterMailer.documents_copy_email(submitter, to:).deliver_later! if to.present?
+    return if to.blank? || submitter.template.preferences['documents_copy_email_enabled'] == false
+
+    SubmitterMailer.documents_copy_email(submitter, to:).deliver_later!
+  end
+
+  def build_bcc_addresses(submission)
+    bcc = submission.preferences['bcc_completed'].presence ||
+          submission.template.preferences['bcc_completed'].presence ||
+          submission.account.account_configs
+                    .find_by(key: AccountConfig::BCC_EMAILS)&.value
+
+    bcc.to_s.scan(User::EMAIL_REGEXP)
   end
 
   def build_to_addresses(submitter)

app/jobs/send_form_completed_webhook_request_job.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class SendFormCompletedWebhookRequestJob < ApplicationJob
+  queue_as :webhooks
+
   USER_AGENT = 'DocuSeal.co Webhook'
 
   MAX_ATTEMPTS = 10

app/jobs/send_form_started_webhook_request_job.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class SendFormStartedWebhookRequestJob < ApplicationJob
+  queue_as :webhooks
+
   USER_AGENT = 'DocuSeal.co Webhook'
 
   MAX_ATTEMPTS = 10

app/jobs/send_form_viewed_webhook_request_job.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class SendFormViewedWebhookRequestJob < ApplicationJob
+  queue_as :webhooks
+
   USER_AGENT = 'DocuSeal.co Webhook'
 
   MAX_ATTEMPTS = 10

app/jobs/send_submission_archived_webhook_request_job.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class SendSubmissionArchivedWebhookRequestJob < ApplicationJob
+  queue_as :webhooks
+
   USER_AGENT = 'DocuSeal.co Webhook'
 
   MAX_ATTEMPTS = 10
@@ -29,9 +31,9 @@ class SendSubmissionArchivedWebhookRequestJob < ApplicationJob
     end
 
     if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
-       (!Docuseal.multitenant? || submitter.account.account_configs.exists?(key: :plan))
+       (!Docuseal.multitenant? || submission.account.account_configs.exists?(key: :plan))
       SendSubmissionArchivedWebhookRequestJob.set(wait: (2**attempt).minutes)
-                                             .perform_later(submitter, {
+                                             .perform_later(submission, {
                                                               attempt: attempt + 1,
                                                               last_status: resp&.status.to_i
                                                             })

app/jobs/send_submission_created_webhook_request_job.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+class SendSubmissionCreatedWebhookRequestJob < ApplicationJob
+  queue_as :webhooks
+
+  USER_AGENT = 'DocuSeal.co Webhook'
+
+  MAX_ATTEMPTS = 10
+
+  def perform(submission, params = {})
+    attempt = params[:attempt].to_i
+    url = Accounts.load_webhook_url(submission.account)
+
+    return if url.blank?
+
+    preferences = Accounts.load_webhook_preferences(submission.account)
+
+    return if preferences['submission.created'].blank?
+
+    resp = begin
+      Faraday.post(url,
+                   {
+                     event_type: 'submission.created',
+                     timestamp: Time.current,
+                     data: Submissions::SerializeForApi.call(submission)
+                   }.to_json,
+                   'Content-Type' => 'application/json',
+                   'User-Agent' => USER_AGENT)
+    rescue Faraday::Error
+      nil
+    end
+
+    if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
+       (!Docuseal.multitenant? || submission.account.account_configs.exists?(key: :plan))
+      SendSubmissionCreatedWebhookRequestJob.set(wait: (2**attempt).minutes)
+                                            .perform_later(submission, {
+                                                             attempt: attempt + 1,
+                                                             last_status: resp&.status.to_i
+                                                           })
+    end
+  end
+end

app/jobs/send_template_created_webhook_request_job.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+class SendTemplateCreatedWebhookRequestJob < ApplicationJob
+  queue_as :webhooks
+
+  USER_AGENT = 'DocuSeal.co Webhook'
+
+  MAX_ATTEMPTS = 10
+
+  def perform(template, params = {})
+    attempt = params[:attempt].to_i
+    url = Accounts.load_webhook_url(template.account)
+
+    return if url.blank?
+
+    preferences = Accounts.load_webhook_preferences(template.account)
+
+    return if preferences['template.created'].blank?
+
+    resp = begin
+      Faraday.post(url,
+                   {
+                     event_type: 'template.created',
+                     timestamp: Time.current,
+                     data: Templates::SerializeForApi.call(template)
+                   }.to_json,
+                   'Content-Type' => 'application/json',
+                   'User-Agent' => USER_AGENT)
+    rescue Faraday::Error
+      nil
+    end
+
+    if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
+       (!Docuseal.multitenant? || template.account.account_configs.exists?(key: :plan))
+      SendTemplateCreatedWebhookRequestJob.set(wait: (2**attempt).minutes)
+                                          .perform_later(template, {
+                                                           attempt: attempt + 1,
+                                                           last_status: resp&.status.to_i
+                                                         })
+    end
+  end
+end

app/jobs/send_template_updated_webhook_request_job.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+class SendTemplateUpdatedWebhookRequestJob < ApplicationJob
+  queue_as :webhooks
+
+  USER_AGENT = 'DocuSeal.co Webhook'
+
+  MAX_ATTEMPTS = 10
+
+  def perform(template, params = {})
+    attempt = params[:attempt].to_i
+    url = Accounts.load_webhook_url(template.account)
+
+    return if url.blank?
+
+    preferences = Accounts.load_webhook_preferences(template.account)
+
+    return if preferences['template.updated'].blank?
+
+    resp = begin
+      Faraday.post(url,
+                   {
+                     event_type: 'template.updated',
+                     timestamp: Time.current,
+                     data: Templates::SerializeForApi.call(template)
+                   }.to_json,
+                   'Content-Type' => 'application/json',
+                   'User-Agent' => USER_AGENT)
+    rescue Faraday::Error
+      nil
+    end
+
+    if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
+       (!Docuseal.multitenant? || template.account.account_configs.exists?(key: :plan))
+      SendTemplateUpdatedWebhookRequestJob.set(wait: (2**attempt).minutes)
+                                          .perform_later(template, {
+                                                           attempt: attempt + 1,
+                                                           last_status: resp&.status.to_i
+                                                         })
+    end
+  end
+end

app/mailers/application_mailer.rb

@@ -6,11 +6,32 @@ class ApplicationMailer < ActionMailer::Base
 
   register_interceptor ActionMailerConfigsInterceptor
 
+  register_observer ActionMailerEventsObserver
+
   before_action do
     ActiveStorage::Current.url_options = Docuseal.default_url_options
   end
 
+  after_action :set_message_metadata
+  after_action :set_message_uuid
+
   def default_url_options
     Docuseal.default_url_options
   end
+
+  def set_message_metadata
+    message.instance_variable_set(:@message_metadata, @message_metadata)
+  end
+
+  def set_message_uuid
+    message['X-Message-Uuid'] = SecureRandom.uuid
+  end
+
+  def assign_message_metadata(tag, record)
+    @message_metadata = {
+      'tag' => tag,
+      'record_id' => record.id,
+      'record_type' => record.class.name
+    }
+  end
 end

app/mailers/submitter_mailer.rb

@@ -26,6 +26,8 @@ class SubmitterMailer < ApplicationMailer
         DEFAULT_INVITATION_SUBJECT
       end
 
+    assign_message_metadata('submitter_invitation', @submitter)
+
     mail(
       to: @submitter.friendly_name,
       from: from_address_for_submitter(submitter),
@@ -58,6 +60,8 @@ class SubmitterMailer < ApplicationMailer
         %(#{submitter.submission.template.name} has been completed by #{submitters})
       end
 
+    assign_message_metadata('submitter_completed', @submitter)
+
     mail(from: from_address_for_submitter(submitter),
          to: to || (user.role == 'integration' ? user.friendly_name.sub(/\+\w+@/, '@') : user.friendly_name),
          subject:)
@@ -76,13 +80,21 @@ class SubmitterMailer < ApplicationMailer
       submitter, with_audit_log: @email_config.nil? || @email_config.value['attach_audit_log'] != false
     )
 
+    @subject = @submitter.template.preferences['documents_copy_email_subject'].presence
+    @subject ||= @email_config.value['subject'] if @email_config
+
+    @body = @submitter.template.preferences['documents_copy_email_body'].presence
+    @body ||= @email_config.value['body'] if @email_config
+
     subject =
-      if @email_config
-        ReplaceEmailVariables.call(@email_config.value['subject'], submitter:)
+      if @subject.present?
+        ReplaceEmailVariables.call(@subject, submitter:)
       else
         'Your document copy'
       end
 
+    assign_message_metadata('submitter_documents_copy', @submitter)
+
     mail(from: from_address_for_submitter(submitter),
          to: to || @submitter.friendly_name,
          reply_to: @submitter.preferences['reply_to'].presence ||

app/mailers/user_mailer.rb

@@ -6,6 +6,8 @@ class UserMailer < ApplicationMailer
     @user = user
     @token = @user.send(:set_reset_password_token)
 
+    assign_message_metadata('user_invitation', @user)
+
     mail(to: @user.friendly_name,
          subject: 'You are invited to DocuSeal')
   end

app/models/account.rb

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

app/models/account_config.rb

@@ -32,6 +32,7 @@ class AccountConfig < ApplicationRecord
   FORM_COMPLETED_BUTTON_KEY = 'form_completed_button'
   FORM_COMPLETED_MESSAGE_KEY = 'form_completed_message'
   FORM_WITH_CONFETTI_KEY = 'form_with_confetti'
+  FORM_PREFILL_SIGNATURE_KEY = 'form_prefill_signature'
   ESIGNING_PREFERENCE_KEY = 'esigning_preference'
   WEBHOOK_PREFERENCES_KEY = 'webhook_preferences'
   DOWNLOAD_LINKS_AUTH_KEY = 'download_links_auth'

app/models/email_event.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+# == Schema Information
+#
+# Table name: email_events
+#
+#  id             :bigint           not null, primary key
+#  data           :text             not null
+#  email          :string           not null
+#  emailable_type :string           not null
+#  event_datetime :datetime         not null
+#  event_type     :string           not null
+#  tag            :string           not null
+#  created_at     :datetime         not null
+#  account_id     :bigint           not null
+#  emailable_id   :bigint           not null
+#  message_id     :string           not null
+#
+# Indexes
+#
+#  index_email_events_on_account_id  (account_id)
+#  index_email_events_on_emailable   (emailable_type,emailable_id)
+#  index_email_events_on_message_id  (message_id)
+#
+# Foreign Keys
+#
+#  fk_rails_...  (account_id => accounts.id)
+#
+class EmailEvent < ApplicationRecord
+  belongs_to :emailable, polymorphic: true
+  belongs_to :account
+
+  attribute :data, :string, default: -> { {} }
+
+  serialize :data, coder: JSON
+
+  before_validation :maybe_set_account, on: :create
+
+  def maybe_set_account
+    self.account ||= emailable.account
+  end
+end

app/models/submission.rb

@@ -52,6 +52,7 @@ class Submission < ApplicationRecord
   attribute :slug, :string, default: -> { SecureRandom.base58(14) }
 
   has_one_attached :audit_trail
+  has_one_attached :combined_document
 
   has_many :template_schema_documents,
            ->(e) { where(uuid: (e.template_schema.presence || e.template.schema).pluck('attachment_uuid')) },

app/models/user.rb

@@ -50,6 +50,7 @@ class User < ApplicationRecord
   EMAIL_REGEXP = /[^@;,<>\s]+@[^@;,<>\s]+/
 
   has_one_attached :signature
+  has_one_attached :initials
 
   belongs_to :account
   has_one :access_token, dependent: :destroy

app/models/user_config.rb

@@ -22,6 +22,7 @@
 #
 class UserConfig < ApplicationRecord
   SIGNATURE_KEY = 'signature'
+  INITIALS_KEY = 'initials'
   RECEIVE_COMPLETED_EMAIL = 'receive_completed_email'
 
   belongs_to :user

app/views/accounts/show.html.erb

@@ -3,7 +3,7 @@
   <div class="flex-grow max-w-xl mx-auto">
     <h1 class="text-4xl font-bold mb-4">Account</h1>
     <%= form_for '', url: settings_account_path, method: :patch, html: { autocomplete: 'off', class: 'space-y-4' } do |f| %>
-      <%= f.fields_for current_account do |ff| %>
+      <%= fields_for current_account do |ff| %>
         <div class="form-control">
           <%= ff.label :name, 'Company Name', class: 'label' %>
           <%= ff.text_field :name, required: true, class: 'base-input', dir: 'auto' %>
@@ -23,7 +23,7 @@
       <% end %>
       <% encrypted_config = @encrypted_config || EncryptedConfig.find_or_initialize_by(account: current_account, key: EncryptedConfig::APP_URL_KEY) %>
       <% if !Docuseal.multitenant? && can?(:manage, encrypted_config) && !current_account.testing? %>
-        <%= f.fields_for encrypted_config do |ff| %>
+        <%= fields_for encrypted_config do |ff| %>
           <div class="form-control">
             <%= ff.label :value, 'App URL', class: 'label' %>
             <%= ff.text_field :value, autocomplete: 'off', class: 'base-input' %>
@@ -75,6 +75,18 @@
             </div>
           <% end %>
         <% end %>
+        <% account_config = AccountConfig.find_or_initialize_by(account: current_account, key: AccountConfig::FORM_PREFILL_SIGNATURE_KEY) %>
+        <% if can?(:manage, account_config) %>
+          <%= form_for account_config, url: account_configs_path, method: :post do |f| %>
+            <%= f.hidden_field :key %>
+            <div class="flex items-center justify-between py-2.5">
+              <span>
+                Remember and pre-fill signatures
+              </span>
+              <%= f.check_box :value, class: 'toggle', checked: account_config.value != false, onchange: 'this.form.requestSubmit()' %>
+            </div>
+          <% end %>
+        <% end %>
         <% account_config = AccountConfig.find_or_initialize_by(account: current_account, key: AccountConfig::DOWNLOAD_LINKS_AUTH_KEY) %>
         <% if can?(:manage, account_config) %>
           <%= form_for account_config, url: account_configs_path, method: :post do |f| %>
@@ -89,6 +101,7 @@
         <% end %>
       </div>
     <% end %>
+    <%= render 'integrations' %>
     <% if can?(:manage, current_account) && Docuseal.multitenant? && true_user == current_user %>
       <div class="px-1 mt-8">
         <h2 class="text-2xl font-bold mb-2">Danger Zone</h2>

app/views/devise/sessions/new.html.erb

@@ -1,22 +1,22 @@
 <div class="max-w-lg mx-auto px-2">
   <%= render 'devise/shared/select_server' if Docuseal.multitenant? %>
-  <h1 class="text-4xl font-bold text-center mt-8">Sign In</h1>
+  <h1 class="text-4xl font-bold text-center mt-8"><%= t('sign_in') %></h1>
   <%= form_for(resource, as: resource_name, html: { class: 'space-y-6' }, data: { turbo: params[:redir].blank? }, url: session_path(resource_name)) do |f| %>
     <% if params[:redir].present? %>
       <%= hidden_field_tag :redir, params[:redir] %>
     <% end %>
-    <div class="space-y-2">
+    <div class="space-y-2" dir="auto">
       <div class="form-control">
-        <%= f.label :email, class: 'label' %>
+        <%= f.label :email, t(:email), class: 'label' %>
         <%= f.email_field :email, autofocus: true, autocomplete: 'email', class: 'base-input' %>
       </div>
       <div class="form-control">
-        <%= f.label :password, class: 'label' %>
+        <%= f.label :password, t(:password), class: 'label' %>
         <%= f.password_field :password, autocomplete: 'current-password', class: 'base-input' %>
       </div>
     </div>
     <div class="form-control">
-      <%= f.button button_title(title: 'Sign In', disabled_with: 'Signing In'), class: 'base-button' %>
+      <%= f.button button_title(title: t(:sign_in), disabled_with: t(:signing_in)), class: 'base-button' %>
     </div>
   <% end %>
   <% if devise_mapping.omniauthable? %>
@@ -25,14 +25,14 @@
         <%= form_for '', url: omniauth_authorize_path(resource_name, :google_oauth2), data: { turbo: false }, method: :post do |f| %>
           <set-timezone data-input-id="state" data-params="true"></set-timezone>
           <%= hidden_field_tag :state, { redir: params[:redir].to_s }.compact_blank.to_query %>
-          <%= f.button button_title(title: 'Sign in with Google', icon: svg_icon('brand_google', class: 'w-6 h-6')), class: 'white-button w-full mt-4' %>
+          <%= f.button button_title(title: t('sign_in_with_google'), icon: svg_icon('brand_google', class: 'w-6 h-6')), class: 'white-button w-full mt-4' %>
         <% end %>
       <% end %>
       <% if User.omniauth_providers.include?(:microsoft_office365) %>
         <%= form_for '', url: omniauth_authorize_path(resource_name, :microsoft_office365), data: { turbo: false }, method: :post do |f| %>
           <set-timezone data-input-id="state_microsoft" data-params="true"></set-timezone>
           <%= hidden_field_tag :state, { redir: params[:redir].to_s }.compact_blank.to_query, id: 'state_microsoft' %>
-          <%= f.button button_title(title: 'Sign in with Microsoft', icon: svg_icon('brand_microsoft', class: 'w-6 h-6')), class: 'white-button w-full' %>
+          <%= f.button button_title(title: t('sign_in_with_microsoft'), icon: svg_icon('brand_microsoft', class: 'w-6 h-6')), class: 'white-button w-full' %>
         <% end %>
       <% end %>
     </div>

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

@@ -1,11 +1,19 @@
 <div class="flex justify-between mt-4">
   <%- if controller_name != 'sessions' %>
-    <%= link_to 'Already have an account?', new_session_path(resource_name), class: 'link link-hover mx-auto' %>
+    <%= link_to t('already_have_an_account'), new_session_path(resource_name, { lang: params[:lang] }.compact_blank), class: 'link link-hover mx-auto' %>
   <% end %>
   <%- if devise_mapping.registerable? && controller_name != 'registrations' %>
-    <%= link_to 'Create free account', registration_path({ redir: params[:redir] }.compact_blank), class: 'link link-hover' %>
+    <%= link_to t('create_free_account'), registration_path({ redir: params[:redir], lang: params[:lang] }.compact_blank), class: 'link link-hover' %>
   <% end %>
   <%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
-    <%= link_to 'Forgot your password?', new_password_path(resource_name), class: 'link link-hover' %>
+    <%= link_to t('forgot_your_password_'), new_password_path(resource_name, { lang: params[:lang] }.compact_blank), class: 'link link-hover' %>
+  <% end %>
+</div>
+<div class="text-center mt-10">
+  <%= form_with url: url_for, method: :get do %>
+    <% if params[:redir].present? %>
+      <%= hidden_field_tag :redir, params[:redir] %>
+    <% end %>
+    <%= select_tag :lang, options_for_select((I18n.available_locales - %i[en pt-PT de-DE fr-FR es-ES]).map { |code| [t("language_#{code}"), code] }, I18n.locale), onchange: 'this.form.requestSubmit();', class: 'select select-sm border-base-content/30 text-base' %>
   <% end %>
 </div>

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

@@ -1,10 +1,12 @@
 <div class="text-center">
   <div class="join">
     <a href="https://docuseal.co<%= request.fullpath.gsub('docuseal.eu', 'docuseal.co') %>" class="btn bg-base-200 join-item w-32  <%= 'bg-base-300' if request.host == 'docuseal.co' %>">
-      🌎 Global
+      <%= svg_icon 'world', class: 'w-5 h-5' %>
+      Global
     </a>
     <a href="https://docuseal.eu<%= request.fullpath.gsub('docuseal.co', 'docuseal.eu') %>" class="btn bg-base-200 join-item w-32 <%= 'bg-base-300' if request.host == 'docuseal.eu' %>">
-      🇪🇺 Europe
+      <%= svg_icon 'eu_flag', class: 'w-5 h-5' %>
+      Europe
     </a>
   </div>
 </div>

app/views/esign_settings/show.html.erb

@@ -123,7 +123,7 @@
         <% end %>
       </div>
     <% end %>
-    <% account_config = AccountConfig.where(account: current_account, key: AccountConfig::ESIGNING_PREFERENCE_KEY).first_or_initialize(value: 'multiple') %>
+    <% account_config = AccountConfig.where(account: current_account, key: AccountConfig::ESIGNING_PREFERENCE_KEY).first_or_initialize(value: 'single') %>
     <% if can?(:manage, account_config) %>
       <div class="px-1 mt-8 max-w-xl">
         <div class="flex justify-between items-end mb-4 mt-8">

app/views/icons/_chevron_down.html.erb

@@ -0,0 +1,4 @@
+<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="M6 9l6 6l6 -6" />
+</svg>

app/views/icons/_eu_flag.html.erb

@@ -0,0 +1,125 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" version="1.1" viewBox="0 0 1000 1000">
+  <defs />
+  <path fill="#039" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,195.25" />
+  <path fill="#fc0" d="M500,238.67 L488.74,272.43 L506.07,280.88 L500,238.67" />
+  <path fill="#fc0" d="M500,238.67 L511.26,275.92 L493.93,279 L500,238.67" />
+  <path fill="#fc0" d="M534.66,269.79 L498.22,264.19 L498.22,282.85 L534.66,269.79" />
+  <path fill="#fc0" d="M534.66,269.79 L505.18,287.21 L494.47,270.45 L534.66,269.79" />
+  <path fill="#fc0" d="M521.42,309.51 L510.16,272.27 L492.83,275.36 L521.42,309.51" />
+  <path fill="#fc0" d="M521.42,309.51 L491.94,283.01 L502.65,269.57 L521.42,309.51" />
+  <path fill="#fc0" d="M465.34,259.13 L501.78,264.74 L501.78,283.41 L465.34,259.13" />
+  <path fill="#fc0" d="M465.34,259.13 L494.82,285.61 L505.53,272.16 L465.34,259.13" />
+  <path fill="#fc0" d="M478.58,302.9 L489.84,269.13 L507.17,277.58 L478.58,302.9" />
+  <path fill="#fc0" d="M478.58,302.9 L508.06,285.51 L497.35,268.75 L478.58,302.9" />
+  <path fill="#fc0" d="M500,686.67 L488.74,720.43 L506.07,728.88 L500,686.67" />
+  <path fill="#fc0" d="M500,686.67 L511.26,723.92 L493.93,727 L500,686.67" />
+  <path fill="#fc0" d="M534.66,717.79 L498.22,712.19 L498.22,730.85 L534.66,717.79" />
+  <path fill="#fc0" d="M534.66,717.79 L505.18,735.21 L494.47,718.45 L534.66,717.79" />
+  <path fill="#fc0" d="M521.42,757.51 L510.16,720.27 L492.83,723.36 L521.42,757.51" />
+  <path fill="#fc0" d="M521.42,757.51 L491.94,731.01 L502.65,717.57 L521.42,757.51" />
+  <path fill="#fc0" d="M465.34,707.13 L501.78,712.74 L501.78,731.41 L465.34,707.13" />
+  <path fill="#fc0" d="M465.34,707.13 L494.82,733.61 L505.53,720.16 L465.34,707.13" />
+  <path fill="#fc0" d="M478.58,750.9 L489.84,717.13 L507.17,725.58 L478.58,750.9" />
+  <path fill="#fc0" d="M478.58,750.9 L508.06,733.51 L497.35,716.75 L478.58,750.9" />
+  <path fill="#fc0" d="M281.33,438.24 L270.07,473.54 L287.4,479.69 L281.33,438.24" />
+  <path fill="#fc0" d="M281.33,438.24 L292.6,474.11 L275.27,479.39 L281.33,438.24" />
+  <path fill="#fc0" d="M315.99,465.59 C303.97,464.84 291.94,464.29 279.55,464 L279.55,482.66 L315.99,465.59" />
+  <path fill="#fc0" d="M315.99,465.59 L286.51,486.13 L275.8,470.76 C289.06,468.76 302.33,467.06 315.99,465.59" />
+  <path fill="#fc0" d="M302.76,506.59 L291.49,470.59 L274.16,475.89 L302.76,506.59" />
+  <path fill="#fc0" d="M302.76,506.59 L273.27,483.67 L283.98,468.81 L302.76,506.59" />
+  <path fill="#fc0" d="M246.67,463.91 C258.7,463.69 270.72,463.75 283.12,464.09 L283.12,482.75 C271.09,476.27 259.06,470.03 246.67,463.91" />
+  <path fill="#fc0" d="M246.67,463.91 L276.16,485.87 L286.87,471.04 C273.6,468.37 260.34,465.98 246.67,463.91" />
+  <path fill="#fc0" d="M259.91,505.52 L271.17,470.08 L288.5,476.25 L259.91,505.52" />
+  <path fill="#fc0" d="M259.91,505.52 L289.4,484.08 L278.69,468.67 L259.91,505.52" />
+  <path fill="#fc0" d="M369.24,317.99 L398.73,299.53 L388.02,283.1 L369.24,317.99" />
+  <path fill="#fc0" d="M369.24,317.99 L380.51,283.75 L397.84,291.62 L369.24,317.99" />
+  <path fill="#fc0" d="M356.01,274.87 L385.49,300.04 L396.2,286.25 L356.01,274.87" />
+  <path fill="#fc0" d="M356.01,274.87 L392.45,278.94 L392.45,297.61 L356.01,274.87" />
+  <path fill="#fc0" d="M390.67,252.93 L379.4,287.09 L396.73,294.96 L390.67,252.93" />
+  <path fill="#fc0" d="M390.67,252.93 L401.93,289.85 L384.6,293.47 L390.67,252.93" />
+  <path fill="#fc0" d="M412.09,323.22 L382.6,297.55 L393.31,283.75 L412.09,323.22" />
+  <path fill="#fc0" d="M412.09,323.22 L400.83,286.23 L383.5,289.87 L412.09,323.22" />
+  <path fill="#fc0" d="M425.33,283.29 L395.84,301.31 L385.13,284.9 L425.33,283.29" />
+  <path fill="#fc0" d="M425.33,283.29 L388.88,278.51 L388.88,297.17 L425.33,283.29" />
+  <path fill="#fc0" d="M332.05,396.47 L320.79,360.14 L303.46,364.88 L332.05,396.47" />
+  <path fill="#fc0" d="M332.05,396.47 L302.57,372.63 L313.28,358.12 L332.05,396.47" />
+  <path fill="#fc0" d="M289.21,394.02 L318.69,373.56 L307.98,357.82 L289.21,394.02" />
+  <path fill="#fc0" d="M289.21,394.02 L300.47,358.97 L317.8,365.71 L289.21,394.02" />
+  <path fill="#fc0" d="M275.97,351.92 L305.45,374.93 L316.16,360.45 C302.9,357.36 289.63,354.51 275.97,351.92" />
+  <path fill="#fc0" d="M275.97,351.92 C288,352.16 300.02,352.64 312.41,353.37 L312.41,372.04 L275.97,351.92" />
+  <path fill="#fc0" d="M345.29,355.85 L315.81,375.53 L305.1,359.81 C318.36,358.25 331.62,356.95 345.29,355.85" />
+  <path fill="#fc0" d="M345.29,355.85 L308.85,353.17 L308.85,371.83 L345.29,355.85" />
+  <path fill="#fc0" d="M310.63,327.47 L321.89,363.69 L304.56,368.42 L310.63,327.47" />
+  <path fill="#fc0" d="M310.63,327.47 L299.37,362.4 L316.7,369.12 L310.63,327.47" />
+  <path fill="#fc0" d="M345.29,579.85 L308.85,577.17 L308.85,595.83 L345.29,579.85" />
+  <path fill="#fc0" d="M345.29,579.85 L315.81,599.53 L305.1,583.81 C318.36,582.25 331.62,580.95 345.29,579.85" />
+  <path fill="#fc0" d="M332.05,620.47 L320.79,584.14 L303.46,588.88 L332.05,620.47" />
+  <path fill="#fc0" d="M332.05,620.47 L302.57,596.63 L313.28,582.12 L332.05,620.47" />
+  <path fill="#fc0" d="M289.21,618.02 L318.69,597.56 L307.98,581.82 L289.21,618.02" />
+  <path fill="#fc0" d="M289.21,618.02 L300.47,582.97 L317.8,589.71 L289.21,618.02" />
+  <path fill="#fc0" d="M310.63,551.47 L321.89,587.69 L304.56,592.42 L310.63,551.47" />
+  <path fill="#fc0" d="M310.63,551.47 L299.37,586.4 L316.7,593.12 L310.63,551.47" />
+  <path fill="#fc0" d="M275.97,575.92 C288,576.16 300.02,576.64 312.41,577.37 L312.41,596.04 L275.97,575.92" />
+  <path fill="#fc0" d="M275.97,575.92 L305.45,598.93 L316.16,584.45 C302.9,581.36 289.63,578.51 275.97,575.92" />
+  <path fill="#fc0" d="M425.33,671.27 L388.88,666.49 L388.88,685.15 L425.33,671.27" />
+  <path fill="#fc0" d="M425.33,671.27 L395.84,689.29 L385.13,672.88 L425.33,671.27" />
+  <path fill="#fc0" d="M412.09,711.2 L400.83,674.21 L383.5,677.84 L412.09,711.2" />
+  <path fill="#fc0" d="M412.09,711.2 L382.6,685.53 L393.31,671.73 L412.09,711.2" />
+  <path fill="#fc0" d="M369.24,705.97 L398.73,687.51 L388.02,671.08 L369.24,705.97" />
+  <path fill="#fc0" d="M369.24,705.97 L380.51,671.73 L397.84,679.6 L369.24,705.97" />
+  <path fill="#fc0" d="M390.67,640.91 L401.93,677.83 L384.6,681.45 L390.67,640.91" />
+  <path fill="#fc0" d="M390.67,640.91 L379.4,675.07 L396.73,682.94 L390.67,640.91" />
+  <path fill="#fc0" d="M356.01,662.85 L392.45,666.92 L392.45,685.59 L356.01,662.85" />
+  <path fill="#fc0" d="M356.01,662.85 L385.49,688.02 L396.2,674.23 L356.01,662.85" />
+  <path fill="#fc0" d="M718.67,487.09 L729.93,522.81 L712.6,528.19 L718.67,487.09" />
+  <path fill="#fc0" d="M718.67,487.09 L707.4,522.24 L724.73,528.5 L718.67,487.09" />
+  <path fill="#fc0" d="M684.01,511.33 C696.03,512.09 708.06,512.63 720.45,512.93 L720.45,531.6 L684.01,511.33" />
+  <path fill="#fc0" d="M684.01,511.33 L713.49,534.68 L724.2,519.85 C710.94,517.34 697.67,514.52 684.01,511.33" />
+  <path fill="#fc0" d="M697.24,553.82 L708.51,518.8 L725.84,525.04 L697.24,553.82" />
+  <path fill="#fc0" d="M697.24,553.82 L726.73,532.85 L716.02,517.51 L697.24,553.82" />
+  <path fill="#fc0" d="M753.33,513.02 C741.3,513.24 729.28,513.17 716.88,512.84 L716.88,531.51 C728.91,525.67 740.93,519.59 753.33,513.02" />
+  <path fill="#fc0" d="M753.33,513.02 L723.84,534.95 L713.13,519.57 C726.4,517.73 739.66,515.59 753.33,513.02" />
+  <path fill="#fc0" d="M740.09,554.89 L728.83,519.32 L711.5,524.68 L740.09,554.89" />
+  <path fill="#fc0" d="M740.09,554.89 L710.6,532.44 L721.31,517.64 L740.09,554.89" />
+  <path fill="#fc0" d="M630.76,354.44 L601.27,329.01 L611.98,315.24 L630.76,354.44" />
+  <path fill="#fc0" d="M630.76,354.44 L619.49,317.67 L602.16,321.33 L630.76,354.44" />
+  <path fill="#fc0" d="M643.99,314.07 L614.51,332.79 L603.8,316.38 L643.99,314.07" />
+  <path fill="#fc0" d="M643.99,314.07 L607.55,310 L607.55,328.67 L643.99,314.07" />
+  <path fill="#fc0" d="M609.33,284.42 L620.6,321.27 L603.27,324.95 L609.33,284.42" />
+  <path fill="#fc0" d="M609.33,284.42 L598.07,318.52 L615.4,326.43 L609.33,284.42" />
+  <path fill="#fc0" d="M587.91,349.21 L617.4,330.99 L606.69,314.59 L587.91,349.21" />
+  <path fill="#fc0" d="M587.91,349.21 L599.17,315.18 L616.5,323.09 L587.91,349.21" />
+  <path fill="#fc0" d="M574.67,305.66 L604.16,331.52 L614.87,317.73 L574.67,305.66" />
+  <path fill="#fc0" d="M574.67,305.66 L611.12,310.44 L611.12,329.11 L574.67,305.66" />
+  <path fill="#fc0" d="M667.95,439.93 L679.21,405.25 L696.54,412.05 L667.95,439.93" />
+  <path fill="#fc0" d="M667.95,439.93 L697.43,419.88 L686.72,404.19 L667.95,439.93" />
+  <path fill="#fc0" d="M710.79,442.39 L681.31,418.95 L692.02,404.5 L710.79,442.39" />
+  <path fill="#fc0" d="M710.79,442.39 L699.53,406.42 L682.2,411.22 L710.79,442.39" />
+  <path fill="#fc0" d="M724.03,401.01 L694.55,421.89 L683.84,406.16 C697.1,404.74 710.36,403.06 724.03,401.01" />
+  <path fill="#fc0" d="M724.03,401.01 C712,400.77 699.98,400.28 687.59,399.55 L687.59,418.22 L724.03,401.01" />
+  <path fill="#fc0" d="M654.71,397.08 L684.19,421.29 L694.9,406.8 C681.64,403.85 668.38,400.63 654.71,397.08" />
+  <path fill="#fc0" d="M654.71,397.08 L691.15,399.76 L691.15,418.42 L654.71,397.08" />
+  <path fill="#fc0" d="M689.37,373.86 L678.11,408.65 L695.44,415.47 L689.37,373.86" />
+  <path fill="#fc0" d="M689.37,373.86 L700.63,409.95 L683.3,414.76 L689.37,373.86" />
+  <path fill="#fc0" d="M654.71,621.08 L691.15,623.76 L691.15,642.42 L654.71,621.08" />
+  <path fill="#fc0" d="M654.71,621.08 L684.19,645.29 L694.9,630.8 C681.64,627.85 668.38,624.63 654.71,621.08" />
+  <path fill="#fc0" d="M667.95,663.93 L679.21,629.25 L696.54,636.05 L667.95,663.93" />
+  <path fill="#fc0" d="M667.95,663.93 L697.43,643.88 L686.72,628.19 L667.95,663.93" />
+  <path fill="#fc0" d="M710.79,666.39 L681.31,642.95 L692.02,628.5 L710.79,666.39" />
+  <path fill="#fc0" d="M710.79,666.39 L699.53,630.42 L682.2,635.22 L710.79,666.39" />
+  <path fill="#fc0" d="M689.37,597.86 L678.11,632.65 L695.44,639.47 L689.37,597.86" />
+  <path fill="#fc0" d="M689.37,597.86 L700.63,633.95 L683.3,638.76 L689.37,597.86" />
+  <path fill="#fc0" d="M724.03,625.01 C712,624.77 699.98,624.28 687.59,623.55 L687.59,642.22 L724.03,625.01" />
+  <path fill="#fc0" d="M724.03,625.01 L694.55,645.89 L683.84,630.16 C697.1,628.74 710.36,627.06 724.03,625.01" />
+  <path fill="#fc0" d="M574.67,693.64 L611.12,698.42 L611.12,717.09 L574.67,693.64" />
+  <path fill="#fc0" d="M574.67,693.64 L604.16,719.5 L614.87,705.71 L574.67,693.64" />
+  <path fill="#fc0" d="M587.91,737.19 L599.17,703.16 L616.5,711.07 L587.91,737.19" />
+  <path fill="#fc0" d="M587.91,737.19 L617.4,718.97 L606.69,702.57 L587.91,737.19" />
+  <path fill="#fc0" d="M630.76,742.42 L601.27,716.99 L611.98,703.22 L630.76,742.42" />
+  <path fill="#fc0" d="M630.76,742.42 L619.49,705.65 L602.16,709.31 L630.76,742.42" />
+  <path fill="#fc0" d="M609.33,672.41 L598.07,706.49 L615.4,714.41 L609.33,672.41" />
+  <path fill="#fc0" d="M609.33,672.41 L620.6,709.25 L603.27,712.93 L609.33,672.41" />
+  <path fill="#fc0" d="M643.99,702.05 L607.55,697.98 L607.55,716.65 L643.99,702.05" />
+  <path fill="#fc0" d="M643.99,702.05 L614.51,720.77 L603.8,704.36 L643.99,702.05" />
+  <path fill="#1A1A1A" opacity="0.2" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,195.25 M39.25,214.64 L39.25,819.14 C345.81,690.88 650.43,915.18 960.75,785.36 L960.75,180.86 C654.19,309.12 349.57,84.82 39.25,214.64" />
+</svg>

app/views/icons/_waving_hand.html.erb

@@ -0,0 +1,50 @@
+<svg version="1.1" class="<%= local_assigns[:class] %>" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+   y="0px" viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
+  <g>
+    <g>
+      <path style="fill:#FFCA28;" d="M17.57,62.68c-2.79-4.01-3.91-7.79-1.18-10.08c2.31-1.94,5.71-2.31,9.91,2.54
+      c0,0,12.55,14.58,16.87,18.63c0.98,0.91,2.2,1.05,3.31-0.1c0.94-0.98,0.6-1.83-0.2-3c0,0-17.69-26.3-20.01-29.51
+      c-3.87-5.37-2.38-8.84-0.59-10.49c2.49-2.31,6.87-2.77,10.94,2.81l21.42,28.67c0.65,0.69,1.7,0.79,2.47,0.25
+      c0.1-0.07,0.2-0.14,0.3-0.21c0.79-0.56,1.02-1.63,0.54-2.47c-3.75-6.53-18.67-32.55-20.86-37.29c-2.52-5.47-1.44-8.25,1.23-9.86
+      c3.17-1.91,6.15-1.77,9.71,3.52c3.86,5.76,18.85,30.01,22.66,36.53c0.5,0.85,1.57,1.17,2.45,0.74c0.01-0.01,0.03-0.01,0.04-0.02
+      c0.84-0.41,1.6-1.24,1.25-2.42c-2.08-6.86-12.29-28.22-14.43-33.13c-2.93-6.71-1.5-8.99,1.53-10.53c3.18-1.61,6.49-0.34,8.74,4.14
+      c1.52,3.04,28.21,51.61,28.21,51.61c-0.39-7.24,1.44-12.37,3-17.52c2.84-9.37,9.71-14.24,14.69-12.05
+      c2.59,1.14,3.06,3.41,2.78,5.15c-0.56,3.38-2.94,13.85-3.4,22.05c-1.08,19.22,4.73,41.37-16.92,55.29
+      c-14.49,9.32-30.02,7.68-40.28,0.51C49.31,107.75,19.85,65.96,17.57,62.68z" />
+      <path style="fill:#EDA600;" d="M117.68,51.77c-1.81,7.61-2.05,16.95-1.99,20.93c0.24,15.51,0.16,28.93-15.39,41.19
+      c-1.91,1.51-7.9,5.19-14.87,7.11c-2.24,0.61-1.39,1.33-0.01,1.17c7.61-0.88,13.38-4.16,16.59-6.23
+      c21.64-13.92,16.32-35.92,17.4-55.14c0.46-8.2,2.96-21.1,2.92-22.21C122.28,37.48,119.49,44.16,117.68,51.77z" />
+      <path style="fill:#EDA600;" d="M77.53,52.57c0,0-1.55,0.01-3.02-2.04C70.1,44.4,56.27,21.25,52.29,15.57
+      c-4.54-6.48-8.77-4-9.73-3.48c0,0,3.48,0.12,5.4,2.97c3.92,5.81,18.78,31.85,23.47,37.44C74.46,56.11,77.53,52.57,77.53,52.57z" />
+      <path style="fill:#EDA600;" d="M22.71,54.54c1.36,1.46,13.3,15.63,17.7,19.58c3.78,3.39,6.6-0.93,6.6-0.93s-1.39,0.19-3.29-1.24
+      c-4.72-3.57-15.9-16.3-18.42-18.98c-3.74-3.98-7.22-1.49-7.96-1.04C17.35,51.93,19.49,51.1,22.71,54.54z" />
+      <path style="fill:#EDA600;" d="M61.59,61.26c0,0-1.28,0.93-3.63-1.82c-1.71-2.01-21.34-25.96-21.34-25.96
+      c-4.92-6.01-8.79-4.22-9.59-3.76c0,0,2.47-0.13,5.36,3.2c1.32,1.52,22.27,28.23,23.11,29.14C58.57,65.41,61.41,62.53,61.59,61.26z
+      " />
+      <path style="fill:#EDA600;" d="M101.8,57.83c0,0-26.01-43.61-27.67-46.58c-3.69-6.59-7.98-4.57-8.71-4.24c0,0,2.39-0.68,5.2,4.1
+      c1.5,2.54,20.61,36.9,26.71,47.88c0.48,2.05,0.44,4.72-1.1,6.44c-5.52,6.19-12.56,12.51-10.49,28.18
+      c0.52,3.97,1.99,7.73,3.08,9.54c1.38,2.27,2.97,1.41,2.27-0.29c-0.47-1.15-1.22-3.86-1.37-5.02c-0.7-5.4-3.06-14.84,7.52-26.16
+      C99.03,69.79,103.58,64.08,101.8,57.83z" />
+    </g>
+    <g>
+      <path style="fill:#B0BEC5;" d="M103.49,30.96c-1.39-4.93-3.55-9.45-6.35-13.37c-2.52-3.53-5.57-6.57-9.05-9.01
+      c-0.44-0.31-1-1.27-0.52-2.2s1.52-0.81,1.91-0.65c4.35,1.79,7.91,4.88,10.85,9.12c3.49,5.04,5.22,9.79,6.11,15.1
+      c0.1,0.58,0.08,1.8-1.16,2.12C104.05,32.39,103.63,31.44,103.49,30.96z" />
+    </g>
+    <g>
+      <path style="fill:#B0BEC5;" d="M96.69,36.25c-1.39-4.93-3.55-9.45-6.35-13.37c-2.52-3.53-5.57-6.57-9.05-9.01
+      c-0.44-0.31-1-1.27-0.52-2.2c0.48-0.94,1.52-0.81,1.91-0.65c4.35,1.79,7.91,4.88,10.85,9.12c3.49,5.04,5.22,9.79,6.11,15.1
+      c0.1,0.58,0.08,1.8-1.16,2.12C97.26,37.68,96.83,36.74,96.69,36.25z" />
+    </g>
+    <g>
+      <path style="fill:#B0BEC5;" d="M8.56,77.46c1.72,4.83,4.17,9.19,7.22,12.92c2.75,3.35,5.99,6.19,9.62,8.4
+      c0.46,0.28,1.08,1.2,0.66,2.16c-0.42,0.97-1.46,0.91-1.87,0.78c-4.46-1.5-8.22-4.35-11.43-8.39c-3.81-4.8-5.86-9.42-7.1-14.66
+      c-0.14-0.58-0.2-1.79,1.02-2.19C7.9,76.08,8.39,76.99,8.56,77.46z" />
+    </g>
+    <g>
+      <path style="fill:#B0BEC5;" d="M14.99,71.73c1.72,4.83,4.17,9.19,7.22,12.92c2.75,3.35,5.99,6.19,9.62,8.4
+      c0.46,0.28,1.08,1.2,0.66,2.16c-0.42,0.97-1.46,0.91-1.87,0.78c-4.46-1.5-8.22-4.35-11.43-8.39c-3.81-4.8-5.86-9.42-7.1-14.66
+      c-0.14-0.58-0.2-1.79,1.02-2.19C14.33,70.34,14.82,71.26,14.99,71.73z" />
+    </g>
+  </g>
+</svg>

app/views/icons/_world.html.erb

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

app/views/invitations/edit.html.erb

@@ -1,5 +1,8 @@
 <div class="max-w-xl mx-auto px-2">
-  <h1 class="text-4xl font-bold text-center my-8">👋 Welcome to <%= Docuseal.product_name %></h1>
+  <h1 class="flex text-4xl font-bold items-center justify-center my-8 space-x-2">
+    <%= svg_icon('waving_hand', class: 'h-10 w-10') %>
+    <span>Welcome to <%= Docuseal.product_name %></span>
+  </h1>
   <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put, class: 'space-y-6' }) do |f| %>
     <div class="space-y-2">
       <%= render 'devise/shared/error_messages', resource: %>

app/views/layouts/_head_tags.html.erb

@@ -1,4 +1,4 @@
 <title>
-  DocuSeal | Open Source Document Filling and Signing
+  <%= content_for(:html_title) || 'DocuSeal | Open Source Document Signing' %>
 </title>
 <%= render 'shared/meta' %>

app/views/layouts/application.html.erb

@@ -1,11 +1,16 @@
 <!DOCTYPE html>
-<html data-theme="docuseal" lang="en">
+<html data-theme="docuseal" lang="<%= I18n.locale %>">
   <head>
     <%= render 'layouts/head_tags' %>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
-    <%= javascript_pack_tag 'application', defer: true %>
+    <% if ENV['ROLLBAR_CLIENT_TOKEN'] %>
+      <meta name="rollbar-token" content="<%= ENV.fetch('ROLLBAR_CLIENT_TOKEN', nil) %>">
+      <%= javascript_pack_tag 'rollbar', 'application', defer: true %>
+    <% else %>
+      <%= javascript_pack_tag 'application', defer: true %>
+    <% end %>
     <%= stylesheet_pack_tag 'application', media: 'all' %>
     <%= render 'shared/posthog' if ENV['POSTHOG_TOKEN'] %>
     <%= render 'shared/plausible' if !signed_in? && ENV['PLAUSIBLE_DOMAIN'] %>

app/views/layouts/form.html.erb

@@ -1,11 +1,16 @@
 <!DOCTYPE html>
-<html data-theme="docuseal" lang="en">
+<html data-theme="docuseal" lang="<%= I18n.locale %>">
   <head>
     <%= render 'layouts/head_tags' %>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
-    <%= javascript_pack_tag 'form', defer: true %>
+    <% if ENV['ROLLBAR_CLIENT_TOKEN'] %>
+      <meta name="rollbar-token" content="<%= ENV.fetch('ROLLBAR_CLIENT_TOKEN', nil) %>">
+      <%= javascript_pack_tag 'rollbar', 'form', defer: true %>
+    <% else %>
+      <%= javascript_pack_tag 'form', defer: true %>
+    <% end %>
     <%= stylesheet_pack_tag 'form', media: 'all' %>
     <%= render 'shared/posthog' if ENV['POSTHOG_TOKEN'] %>
   </head>

app/views/layouts/plain.html.erb

@@ -1,11 +1,16 @@
 <!DOCTYPE html>
-<html data-theme="docuseal" lang="en">
+<html data-theme="docuseal" lang="<%= I18n.locale %>">
   <head>
     <%= render 'layouts/head_tags' %>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
-    <%= javascript_pack_tag 'application', defer: true %>
+    <% if ENV['ROLLBAR_CLIENT_TOKEN'] %>
+      <meta name="rollbar-token" content="<%= ENV.fetch('ROLLBAR_CLIENT_TOKEN', nil) %>">
+      <%= javascript_pack_tag 'rollbar', 'application', defer: true %>
+    <% else %>
+      <%= javascript_pack_tag 'application', defer: true %>
+    <% end %>
     <%= stylesheet_pack_tag 'application', media: 'all' %>
     <%= render 'shared/posthog' if ENV['POSTHOG_TOKEN'] %>
   </head>

app/views/notifications_settings/_reminder_form.html.erb

@@ -2,23 +2,24 @@
   <%= f.hidden_field :key %>
   <div class="form-control">
     <% record = Struct.new(:first_duration, :second_duration, :third_duration).new(*(f.object.value || {}).values_at('first_duration', 'second_duration', 'third_duration')) %>
+    <% durations = Docuseal.multitenant? ? AccountConfigs::REMINDER_DURATIONS.except('one_hour', 'two_hours').invert : AccountConfigs::REMINDER_DURATIONS.invert %>
     <div class="flex flex-col md:flex-row gap-4">
       <div class="w-full">
         <%= f.fields_for :value, record  do |ff| %>
           <%= ff.label :first_duration, 'First reminder in', class: 'label' %>
-          <%= ff.select :first_duration, AccountConfigs::REMINDER_DURATIONS.invert, { include_blank: 'None' }, class: 'base-select' %>
+          <%= ff.select :first_duration, durations, { include_blank: 'None' }, class: 'base-select' %>
         <% end %>
       </div>
       <div class="w-full">
         <%= f.fields_for :value, record  do |ff| %>
           <%= ff.label :second_duration, 'Second reminder in', class: 'label' %>
-          <%= ff.select :second_duration, AccountConfigs::REMINDER_DURATIONS.invert, { include_blank: 'None' }, class: 'base-select' %>
+          <%= ff.select :second_duration, durations, { include_blank: 'None' }, class: 'base-select' %>
         <% end %>
       </div>
       <div class="w-full">
         <%= f.fields_for :value, record  do |ff| %>
           <%= ff.label :third_duration, 'Third reminder in', class: 'label' %>
-          <%= ff.select :third_duration, AccountConfigs::REMINDER_DURATIONS.invert, { include_blank: 'None' }, class: 'base-select' %>
+          <%= ff.select :third_duration, durations, { include_blank: 'None' }, class: 'base-select' %>
         <% end %>
       </div>
     </div>

app/views/profile/index.html.erb

@@ -31,6 +31,15 @@
       </div>
     <% end %>
     <a href="<%= edit_user_signature_path %>" data-turbo-frame="modal" class="base-button w-full">Update Signature</a>
+    <p class="text-2xl font-bold mt-8 mb-4">Initials</p>
+    <% initials = UserConfigs.load_initials(current_user) %>
+    <% if initials %>
+      <div class="flex justify-center mb-4 relative">
+        <%= button_to button_title(title: 'Remove', disabled_with: 'Removing'), user_initials_path, method: :delete, class: 'right-0 top-0 absolute link' %>
+        <img src="<%= initials.url %>" style="max-height: 200px; width: auto" width="<%= initials.metadata['width'] %>" height="<%= initials.metadata['height'] %>">
+      </div>
+    <% end %>
+    <a href="<%= edit_user_initials_path %>" data-turbo-frame="modal" class="base-button w-full">Update Initials</a>
     <% if true_user == current_user && !current_account.testing? %>
       <p class="text-2xl font-bold mt-8 mb-4">Change Password</p>
       <%= form_for current_user, url: update_password_settings_profile_index_path, method: :patch, html: { autocomplete: 'off', class: 'space-y-4' } do |f| %>

app/views/setup/index.html.erb

@@ -1,8 +1,11 @@
 <div class="max-w-xl mx-auto px-2">
-  <h1 class="text-4xl font-bold text-center my-8">Initial Setup 👋</h1>
+  <h1 class="flex text-4xl font-bold items-center justify-center my-8 space-x-2">
+    <span>Initial Setup</span>
+    <%= svg_icon('waving_hand', class: 'h-10 w-10') %>
+  </h1>
   <%= form_for '', html: { class: 'space-y-6' }, url: setup_index_path do |f| %>
     <div class="space-y-2">
-      <%= f.fields_for @user do |ff| %>
+      <%= fields_for @user do |ff| %>
         <div class="grid gap-2 md:grid-cols-2 md:gap-4">
           <div class="form-control">
             <%= ff.label :first_name, class: 'label' %>
@@ -14,30 +17,30 @@
           </div>
         </div>
       <% end %>
-      <%= f.fields_for @user do |ff| %>
+      <%= fields_for @user do |ff| %>
         <div class="form-control">
           <%= ff.label :email, class: 'label' %>
           <%= ff.email_field :email, required: true, class: 'base-input' %>
         </div>
       <% end %>
-      <%= f.fields_for @account do |ff| %>
-        <set-timezone data-input-id="_account_timezone"></set-timezone>
+      <%= fields_for @account do |ff| %>
+        <set-timezone data-input-id="account_timezone"></set-timezone>
         <%= ff.hidden_field :timezone %>
         <div class="form-control">
           <%= ff.label :name, 'Company name', class: 'label' %>
           <%= ff.text_field :name, required: true, class: 'base-input' %>
         </div>
       <% end %>
-      <%= f.fields_for @user do |ff| %>
+      <%= fields_for @user do |ff| %>
         <div class="form-control">
           <%= ff.label :password, class: 'label' %>
           <%= ff.password_field :password, required: true, placeholder: '************', class: 'base-input' %>
         </div>
       <% end %>
-      <%= f.fields_for @encrypted_config do |ff| %>
+      <%= fields_for @encrypted_config do |ff| %>
         <div class="form-control">
           <% if @encrypted_config.value.blank? %>
-            <set-origin-url data-input-id="_encrypted_config_value"></set-origin-url>
+            <set-origin-url data-input-id="encrypted_config_value"></set-origin-url>
           <% end %>
           <%= ff.label :value, 'App URL', class: 'label' %>
           <%= ff.text_field :value, required: true, class: 'base-input' %>

app/views/shared/_meta.html.erb

@@ -1,21 +1,25 @@
 <% if Docuseal.demo? || (request.path != '/' && !devise_controller?) %>
   <meta name="robots" content="noindex">
 <% end %>
-<meta name="description" content="Open source, self-hosted tool to streamline document filling and signing. Create custom PDF forms to complete and sign with an easy to use online tool.">
-<meta property="og:title" content="DocuSeal | Open Source Document Filling and Signing">
-<meta property="og:description" content="Open source, self-hosted tool to streamline document filling and signing. Create custom PDF forms to complete and sign with an easy to use online tool.">
+<% title = content_for(:html_title) || 'DocuSeal | Open Source Document Filling and Signing' %>
+<% description = content_for(:html_description) || 'Open source, self-hosted tool to streamline document filling and signing. Create custom PDF forms to complete and sign with an easy to use online tool.' %>
+<meta name="description" content="<%= description %>">
+<meta property="og:title" content="<%= title %>">
+<meta property="og:description" content="<%= description %>">
 <meta property="og:type" content="website">
 <meta property="og:url" content="<%= root_url %>">
 <meta property="og:site_name" content="DocuSeal">
-<meta property="og:image" content="<%= image_pack_url('images/preview.png') %>">
-<meta property="og:image:width" content="800">
-<meta property="og:image:height" content="800">
-<meta name="twitter:image" content="<%= image_pack_url('images/preview.png') %>">
+<% unless content_for(:disable_image_preview) %>
+  <meta property="og:image" content="<%= image_pack_url('images/preview.png') %>">
+  <meta property="og:image:width" content="800">
+  <meta property="og:image:height" content="800">
+  <meta name="twitter:image" content="<%= image_pack_url('images/preview.png') %>">
+<% end %>
 <meta name="twitter:card" content="summary">
 <meta name="twitter:creator" content="@docusealco">
 <meta name="twitter:site" content="@docusealco">
-<meta name="twitter:title" content="DocuSeal | Open Source Document Filling and Signing">
-<meta name="twitter:description" content="Open source, self-hosted tool to streamline document filling and signing. Create custom PDF forms to complete and sign with an easy to use online tool.">
+<meta name="twitter:title" content="<%= title %>">
+<meta name="twitter:description" content="<%= description %>">
 <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

app/views/shared/_navbar.html.erb

@@ -11,7 +11,7 @@
     <div class="space-x-4 flex items-center">
       <% if Docuseal.demo? %>
         <a href="https://docuseal.co/sign_up" class="btn btn-neutral btn-sm btn-outline inline-flex items-center justify-center" style="height: 37px">
-          Sign Up
+          <%= t('sign_up') %>
         </a>
         <span class="hidden sm:inline">
           <%= render 'shared/github_button' %>
@@ -26,10 +26,10 @@
         <label tabindex="0" class="cursor-pointer bg-base-content text-purple-300 rounded-full p-2 w-9 justify-center flex">
           <span class="text-sm align-text-top"><%= current_user.initials %></span>
         </label>
-        <ul tabindex="0" class="z-10 dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box whitespace-nowrap text-right">
+        <ul tabindex="0" class="z-10 dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box w-40 text-right">
           <li>
             <%= link_to settings_profile_index_path, class: 'flex items-center' do %>
-              <%= svg_icon('adjustments', class: 'w-5 h-5 stroke-2') %>
+              <%= svg_icon('adjustments', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>
               <span class="mr-1">Profile</span>
             <% end %>
           </li>
@@ -61,18 +61,18 @@
   <% else %>
     <div class="flex space-x-2">
       <% if request.path != new_user_session_path %>
-        <%= link_to new_user_session_path, class: 'font-medium text-lg' do %>
+        <%= link_to new_user_session_path({ lang: params[:lang] }.compact_blank), class: 'font-medium text-lg' do %>
           <span class="flex items-center justify-center space-x-1">
             <%= svg_icon('login', class: 'w-6 h-6') %>
-            <span>Sign in</span>
+            <span><%= t('sign_in') %></span>
           </span>
         <% end %>
       <% end %>
       <% if Docuseal.multitenant? && !request.path.in?([registration_path, new_registration_path]) %>
-        <%= link_to registration_path, class: 'btn btn-neutral btn-sm btn-outline' do %>
+        <%= link_to registration_path({ lang: params[:lang] }.compact_blank), class: 'btn btn-neutral btn-sm btn-outline' do %>
           <span class="flex items-center justify-center space-x-1">
-            <span class="hidden sm:block">Create free Account</span>
-            <span class="md:hidden">Sign Up</span>
+            <span class="hidden sm:block"><%= t('create_free_account') %></span>
+            <span class="md:hidden"><%= t('sign_up') %></span>
           </span>
         <% end %>
       <% end %>

app/views/shared/_settings_nav.html.erb

@@ -60,7 +60,7 @@
           </li>
         <% end %>
       <% end %>
-      <% if !Docuseal.demo? && can?(:manage, EncryptedConfig) && (current_user != true_user || !current_account.testing?) %>
+      <% if !Docuseal.demo? && can?(:manage, EncryptedConfig) && (current_user != true_user || !current_account.linked_account_account) %>
         <li>
           <%= link_to Docuseal.multitenant? ? console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/plans") : "#{Docuseal::CLOUD_URL}/sign_up?#{{ redir: "#{Docuseal::CONSOLE_URL}/on_premise" }.to_query}", class: 'text-base hover:bg-base-300', data: { prefetch: false } do %>
             Plans

app/views/start_form/completed.html.erb

@@ -20,14 +20,14 @@
       <%= t('form_has_been_submitted_already') %>
     </div>
     <% if Docuseal.multitenant? || Accounts.can_send_emails?(@submitter.account) %>
-      <div>
-        <%= button_to button_title(title: t('send_copy_to_email'), disabled_with: t('sending'), icon: svg_icon('mail_forward', class: 'w-6 h-6')), send_submission_email_index_path, params: { submitter_slug: @submitter.slug }, form: { onsubmit: 'event.submitter.disabled = true' }, class: 'base-button w-full' %>
-      </div>
+      <toggle-submit class="block">
+        <%= button_to button_title(title: t('send_copy_to_email'), disabled_with: t('sending'), icon: svg_icon('mail_forward', class: 'w-6 h-6')), send_submission_email_index_path, params: { submitter_slug: @submitter.slug }, class: 'base-button w-full' %>
+      </toggle-submit>
     <% end %>
     <% if @template.submitters.to_a.size == 1 && %w[api embed].exclude?(@submitter.submission.source) && @submitter.account.account_configs.find_or_initialize_by(key: AccountConfig::ALLOW_TO_RESUBMIT).value != false %>
-      <div>
-        <%= button_to button_title(title: t('resubmit'), disabled_with: t('resubmit'), icon: svg_icon('reload', class: 'w-6 h-6')), start_form_path(@template.slug), params: { submitter: { email: params[:email] }, resubmit: @submitter.slug }, method: :put, form: { onsubmit: 'event.submitter.disabled = true' }, class: 'white-button w-full' %>
-      </div>
+      <toggle-submit class="block">
+        <%= button_to button_title(title: t('resubmit'), disabled_with: t('resubmit'), icon: svg_icon('reload', class: 'w-6 h-6')), start_form_path(@template.slug), params: { submitter: { email: params[:email] }, resubmit: @submitter.slug }, method: :put, class: 'white-button w-full' %>
+      </toggle-submit>
     <% end %>
   </div>
 </div>

app/views/start_form/show.html.erb

@@ -1,3 +1,5 @@
+<% content_for(:html_title, "#{@template.name} | DocuSeal") %>
+<% content_for(:html_description, "#{@template.account.name} has invited you to fill and sign documents online effortlessly with a secure, fast, and user-friendly digital document signing solution.") %>
 <div class="max-w-md mx-auto px-2 mt-12 mb-4">
   <div class="space-y-6 mx-auto">
     <div class="space-y-6">
@@ -24,15 +26,15 @@
       </div>
     </div>
     <% unless @template.archived_at? %>
-      <%= form_for @submitter, url: start_form_path(@template.slug), data: { turbo_frame: :_top }, method: :put, html: { class: 'space-y-4', onsubmit: 'event.submitter.disabled = true' } do |f| %>
+      <%= form_for @submitter, url: start_form_path(@template.slug), data: { turbo_frame: :_top }, method: :put, html: { class: 'space-y-4' } do |f| %>
         <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 %>
         </div>
-        <div dir="auto" class="form-control">
+        <toggle-submit dir="auto" class="form-control">
           <%= f.button button_title(title: t('start'), disabled_with: t('starting')), class: 'base-button' %>
-        </div>
+        </toggle-submit>
       <% end %>
     <% end %>
   </div>

app/views/submissions/_value.html.erb

@@ -39,6 +39,11 @@
       <% value = Time.current.in_time_zone(local_assigns[:timezone]).to_date.to_s if value == '{{date}}' %>
       <%= TimeUtils.format_date_string(value, field.dig('preferences', 'format'), local_assigns[:locale]) %>
     </div>
+  <% elsif field['type'] == 'number' %>
+    <autosize-field></autosize-field>
+    <div class="flex items-center px-0.5 whitespace-nowrap">
+      <%= NumberUtils.format_number(value, field.dig('preferences', 'format')) %>
+    </div>
   <% else %>
     <autosize-field></autosize-field>
     <div class="flex items-center px-0.5 whitespace-pre-wrap"><%= Array.wrap(value).join(', ') %></div>