Merge from docusealco/wip

adjust image type
remove oj
2026-08-07 15:25:16 +00:00 · 2026-06-08 11:56:14 +03:00 · 2026-06-08 09:31:38 +03:00 · 2026-06-05 16:55:55 +03:00 · 2026-06-05 14:45:22 +03:00 · 2026-06-05 09:55:21 +03:00
173 changed files with 3966 additions and 1318 deletions
@@ -12,7 +12,7 @@ jobs:
      - name: Install Ruby
        uses: ruby/setup-ruby@v1
        with:
-          ruby-version: 4.0.1
+          ruby-version: 4.0.5
      - name: Cache gems
        uses: actions/cache@v4
        with:
@@ -37,7 +37,7 @@ jobs:
      - name: Install Ruby
        uses: ruby/setup-ruby@v1
        with:
-          ruby-version: 4.0.1
+          ruby-version: 4.0.5
      - name: Cache gems
        uses: actions/cache@v4
        with:
@@ -89,7 +89,7 @@ jobs:
      - name: Install Ruby
        uses: ruby/setup-ruby@v1
        with:
-          ruby-version: 4.0.1
+          ruby-version: 4.0.5
      - name: Cache gems
        uses: actions/cache@v4
        with:
@@ -132,7 +132,7 @@ jobs:
      - name: Install Ruby
        uses: ruby/setup-ruby@v1
        with:
-          ruby-version: 4.0.1
+          ruby-version: 4.0.5
      - name: Set up Node
        uses: actions/setup-node@v1
        with:
@@ -163,7 +163,7 @@ jobs:
          yarn install
          sudo apt-get update
          sudo apt-get install -y libvips
-          wget -O pdfium-linux.tgz "https://github.com/docusealco/pdfium-binaries/releases/latest/download/pdfium-linux-$(uname -m | sed 's/x86_64/x64/;s/aarch64/arm64/').tgz"
+          wget -O pdfium-linux.tgz "https://github.com/bblanchon/pdfium-binaries/releases/latest/download/pdfium-linux-$(uname -m | sed 's/x86_64/x64/;s/aarch64/arm64/').tgz"
          sudo tar -xzf pdfium-linux.tgz --strip-components=1 -C /usr/lib lib/libpdfium.so
          rm -f pdfium-linux.tgz
      - name: Run
@@ -1,4 +1,4 @@
-FROM ruby:4.0.1-alpine AS download
+FROM ruby:4.0.5-alpine AS download

 WORKDIR /fonts

@@ -13,7 +13,7 @@ RUN apk --no-cache add wget && \
    mkdir -p /pdfium-linux && \
    tar -xzf pdfium-linux.tgz -C /pdfium-linux

-FROM ruby:4.0.1-alpine AS webpack
+FROM ruby:4.0.5-alpine AS webpack

 ENV RAILS_ENV=production
 ENV NODE_ENV=production
@@ -40,7 +40,7 @@ COPY ./app/views ./app/views

 RUN echo "gem 'shakapacker'" > Gemfile && ./bin/shakapacker

-FROM ruby:4.0.1-alpine AS app
+FROM ruby:4.0.5-alpine AS app

 ENV RAILS_ENV=production
 ENV BUNDLE_WITHOUT="development:test"
@@ -48,7 +48,8 @@ ENV OPENSSL_CONF=/etc/openssl_legacy.cnf

 WORKDIR /app

-RUN apk add --no-cache libpq vips redis vips-heif onnxruntime
+RUN apk add --no-cache libpq vips redis onnxruntime && \
+    rm -f /usr/bin/onnx_test_runner /usr/bin/onnxruntime_test

 RUN addgroup -g 2000 docuseal && adduser -u 2000 -G docuseal -s /bin/sh -D -h /home/docuseal docuseal

@@ -94,6 +95,7 @@ WORKDIR /data/docuseal
 ENV HOME=/home/docuseal
 ENV WORKDIR=/data/docuseal
 ENV VIPS_MAX_COORD=17000
+ENV VIPS_BLOCK_UNTRUSTED=1

 EXPOSE 3000
 CMD ["/app/bin/bundle", "exec", "puma", "-C", "/app/config/puma.rb", "--dir", "/app"]
@@ -2,7 +2,7 @@

 source 'https://rubygems.org'

-ruby '4.0.1'
+ruby '4.0.5'

 gem 'addressable'
 gem 'arabic-letter-connector', require: false
@@ -21,11 +21,9 @@ gem 'faraday'
 gem 'faraday-follow_redirects'
 gem 'google-cloud-storage', require: false
 gem 'hexapdf'
-gem 'image_processing'
 gem 'jwt', require: false
 gem 'lograge'
 gem 'numo-narray-alt', require: false
-gem 'oj'
 gem 'onnxruntime', require: false
 gem 'pagy'
 gem 'pg', require: false
@@ -116,7 +116,7 @@ GEM
      erubi (~> 1.4)
      parser (>= 2.4)
      smart_properties
-    bigdecimal (4.1.0)
+    bigdecimal (4.1.2)
    bindex (0.8.1)
    bootsnap (1.23.0)
      msgpack (~> 1.2)
@@ -161,7 +161,7 @@ GEM
      irb (~> 1.10)
      reline (>= 0.3.8)
    declarative (0.0.20)
-    devise (5.0.3)
+    devise (5.0.4)
      bcrypt (~> 3.0)
      orm_adapter (~> 0.1)
      railties (>= 7.0)
@@ -179,7 +179,7 @@ GEM
    dotenv (3.2.0)
    drb (2.2.3)
    email_typo (0.2.3)
-    erb (6.0.2)
+    erb (6.0.4)
    erb_lint (0.9.0)
      activesupport
      better_html (>= 2.0.1)
@@ -195,7 +195,7 @@ GEM
      railties (>= 6.1.0)
    faker (3.6.1)
      i18n (>= 1.8.11, < 2)
-    faraday (2.14.1)
+    faraday (2.14.2)
      faraday-net_http (>= 2.0, < 3.5)
      json
      logger
@@ -257,25 +257,22 @@ GEM
      os (>= 0.9, < 2.0)
      signet (>= 0.16, < 2.a)
    hashdiff (1.2.1)
-    hexapdf (1.6.0)
+    hexapdf (1.7.0)
      cmdparse (~> 3.0, >= 3.0.3)
      geom2d (~> 0.4, >= 0.4.1)
      openssl (>= 2.2.1)
      strscan (>= 3.1.2)
    i18n (1.14.8)
      concurrent-ruby (~> 1.0)
-    image_processing (1.14.0)
-      mini_magick (>= 4.9.5, < 6)
-      ruby-vips (>= 2.0.17, < 3)
    io-console (0.8.2)
-    irb (1.17.0)
+    irb (1.18.0)
      pp (>= 0.6.0)
      prism (>= 1.3.0)
      rdoc (>= 4.0.0)
      reline (>= 0.4.2)
    jmespath (1.6.2)
-    json (2.19.3)
-    jwt (3.1.2)
+    json (2.19.8)
+    jwt (3.2.0)
      base64
    language_server-protocol (3.17.0.5)
    launchy (3.1.1)
@@ -308,17 +305,15 @@ GEM
    marcel (1.1.0)
    matrix (0.4.3)
    method_source (1.1.0)
-    mini_magick (5.3.1)
-      logger
    mini_mime (1.1.5)
-    minitest (6.0.3)
+    minitest (6.0.6)
      drb (~> 2.0)
      prism (~> 1.5)
    msgpack (1.8.0)
    multi_json (1.19.1)
    net-http (0.9.1)
      uri (>= 0.11.1)
-    net-imap (0.6.3)
+    net-imap (0.6.4)
      date
      net-protocol
    net-pop (0.1.2)
@@ -328,20 +323,17 @@ GEM
    net-smtp (0.5.1)
      net-protocol
    nio4r (2.7.5)
-    nokogiri (1.19.2-aarch64-linux-gnu)
+    nokogiri (1.19.3-aarch64-linux-gnu)
      racc (~> 1.4)
-    nokogiri (1.19.2-aarch64-linux-musl)
+    nokogiri (1.19.3-aarch64-linux-musl)
      racc (~> 1.4)
-    nokogiri (1.19.2-arm64-darwin)
+    nokogiri (1.19.3-arm64-darwin)
      racc (~> 1.4)
-    nokogiri (1.19.2-x86_64-linux-gnu)
+    nokogiri (1.19.3-x86_64-linux-gnu)
      racc (~> 1.4)
-    nokogiri (1.19.2-x86_64-linux-musl)
+    nokogiri (1.19.3-x86_64-linux-musl)
      racc (~> 1.4)
    numo-narray-alt (0.10.3)
-    oj (3.16.16)
-      bigdecimal (>= 3.0)
-      ostruct (>= 0.2)
    onnxruntime (0.10.1-aarch64-linux)
      ffi
    onnxruntime (0.10.1-arm64-darwin)
@@ -351,7 +343,6 @@ GEM
    openssl (4.0.1)
    orm_adapter (0.5.0)
    os (1.1.4)
-    ostruct (0.6.3)
    package_json (0.2.0)
    pagy (43.4.4)
      json
@@ -429,12 +420,12 @@ GEM
      tsort (>= 0.2)
      zeitwerk (~> 2.6)
    rainbow (3.1.1)
-    rake (13.3.1)
+    rake (13.4.2)
    rdoc (7.2.0)
      erb
      psych (>= 4.0.0)
      tsort
-    redis-client (0.28.0)
+    redis-client (0.29.0)
      connection_pool
    regexp_parser (2.11.3)
    reline (0.6.3)
@@ -516,12 +507,12 @@ GEM
      rack-proxy (>= 0.6.1)
      railties (>= 5.2)
      semantic_range (>= 2.3.0)
-    sidekiq (8.1.2)
+    sidekiq (8.1.6)
      connection_pool (>= 3.0.0)
      json (>= 2.16.0)
      logger (>= 1.7.0)
      rack (>= 3.2.0)
-      redis-client (>= 0.26.0)
+      redis-client (>= 0.29.0)
    signet (0.21.0)
      addressable (~> 2.8)
      faraday (>= 0.17.5, < 3.a)
@@ -624,12 +615,10 @@ DEPENDENCIES
  foreman
  google-cloud-storage
  hexapdf
-  image_processing
  jwt
  letter_opener_web
  lograge
  numo-narray-alt
-  oj
  onnxruntime
  pagy
  pg
@@ -662,7 +651,7 @@ DEPENDENCIES
  webmock

 RUBY VERSION
-  ruby 4.0.1
+  ruby 4.0.5

 BUNDLED WITH
  4.0.3
@@ -50,7 +50,7 @@ DocuSeal is an open source platform that provides secure and efficient digital d
 - Company logo and white-label
 - User roles
 - Automated reminders
- Invitation and identify verification via SMS
+- Invitation and identity verification via SMS
 - Conditional fields and formulas
 - Bulk send with CSV, XLSX spreadsheet import
 - SSO / SAML
@@ -74,7 +74,7 @@ DocuSeal is an open source platform that provides secure and efficient digital d
 docker run --name docuseal -p 3000:3000 -v.:/data docuseal/docuseal
 ```

-By default DocuSeal docker container uses an SQLite database to store data and configurations. Alternatively, it is possible use PostgreSQL or MySQL databases by specifying the `DATABASE_URL` env variable.
+By default DocuSeal docker container uses an SQLite database to store data and configurations. Alternatively, it is possible to use PostgreSQL or MySQL databases by specifying the `DATABASE_URL` env variable.

 #### Docker Compose

@@ -9,7 +9,9 @@ module Api

    before_action :set_cors_headers
    before_action :set_noindex_headers
+    before_action :set_security_headers

+    # rubocop:disable Metrics
    def show
      blob_uuid, purp, exp = ApplicationRecord.signed_id_verifier.verified(params[:signed_uuid])

@@ -21,6 +23,12 @@ module Api

      blob = ActiveStorage::Blob.find_by!(uuid: blob_uuid)

+      if Submitters::DANGEROUS_EXTENSIONS.include?(blob.filename.extension.to_s.downcase)
+        Rollbar.error('Dangerous extension') if defined?(Rollbar)
+
+        return head :unprocessable_content
+      end
+
      attachment = blob.attachments.take

      @record = attachment.record
@@ -33,12 +41,19 @@ module Api
      else
        http_cache_forever public: true do
          response.headers['Accept-Ranges'] = 'bytes'
-          response.headers['Content-Length'] = blob.byte_size.to_s

-          send_blob_stream blob, disposition: params[:disposition]
+          if request.head?
+            response.headers['Content-Type'] = blob.content_type_for_serving
+            head :ok
+          else
+            send_blob_stream blob, disposition: params[:disposition]
+          end
+
+          response.headers['Content-Length'] = blob.byte_size.to_s
        end
      end
    end
+    # rubocop:enable Metrics

    private

@@ -57,8 +72,6 @@ module Api
        return if !require_ttl && !require_auth
      end

-      Rollbar.error('Blob unauthorized') if defined?(Rollbar)
-
      raise CanCan::AccessDenied
    end
  end
@@ -9,6 +9,7 @@ module Api

    before_action :set_cors_headers
    before_action :set_noindex_headers
+    before_action :set_security_headers

    # rubocop:disable Metrics
    def show
@@ -18,6 +19,12 @@ module Api

      return head :not_found unless blob

+      if Submitters::DANGEROUS_EXTENSIONS.include?(blob.filename.extension.to_s.downcase)
+        Rollbar.error('Dangerous extension') if defined?(Rollbar)
+
+        return head :unprocessable_content
+      end
+
      is_permitted = blob.attachments.any? do |a|
        (current_user && a.record.account.id == current_user.account_id) ||
          a.record.account.account_configs.any? { |e| e.key == 'legacy_blob_proxy' } ||
@@ -102,6 +102,10 @@ module Api
      headers['X-Robots-Tag'] = 'noindex'
    end

+    def set_security_headers
+      response.headers['X-Content-Type-Options'] = 'nosniff'
+    end
+
    def set_cors_headers
      headers['Access-Control-Allow-Origin'] = '*'
      headers['Access-Control-Allow-Methods'] = 'POST, GET, PUT, PATCH, DELETE, OPTIONS'
@@ -8,35 +8,37 @@ module Api
    COOKIE_STORE_LIMIT = 10

    def create
-      submitter = Submitter.find_by!(slug: params[:submitter_slug])
-
-      unless can_upload?(submitter)
-        Rollbar.error("Can't upload: #{submitter.id}") if defined?(Rollbar)
+      @submitter = Submitter.find_by!(slug: params[:submitter_slug])

+      unless can_upload?(@submitter)
        return render json: { error: I18n.t('form_has_been_archived') }, status: :unprocessable_content
      end

+      file = params[:file]
+
      if params[:type].in?(%w[initials signature])
-        image = Vips::Image.new_from_file(params[:file].path)
+        image = ImageUtils.load_vips(file.read, content_type: file.content_type)

        if ImageUtils.blank?(image)
-          Rollbar.error("Empty signature: #{submitter.id}") if defined?(Rollbar)
+          Rollbar.error("Empty signature: #{@submitter.id}") if defined?(Rollbar)

          return render json: { error: "#{params[:type]} is empty" }, status: :unprocessable_content
        end

        if ImageUtils.error?(image)
-          Rollbar.error("Error signature: #{submitter.id}") if defined?(Rollbar)
+          Rollbar.error("Error signature: #{@submitter.id}") if defined?(Rollbar)

          return render json: { error: "#{params[:type]} error, try to sign on another device" },
                        status: :unprocessable_content
        end
+
+        metadata = { analyzed: true, identified: true, width: image.width, height: image.height }
      end

-      attachment = Submitters.create_attachment!(submitter, params)
+      attachment = Submitters.create_attachment!(@submitter, file, metadata:)

-      if params[:remember_signature] == 'true' && submitter.email.present?
-        cookies.encrypted[:signature_uuids] = build_new_cookie_signatures_json(submitter, attachment)
+      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 created_at], methods: %i[url filename content_type])
@@ -161,9 +161,7 @@ module Api
          submitter.values = Submitters::SubmitValues.maybe_remove_condition_values(submitter)
        end

-        submitter.values = submitter.values.transform_values do |v|
-          v == '{{date}}' ? Time.current.in_time_zone(submitter.account.timezone).to_date.to_s : v
-        end
+        submitter.values = Submitters::SubmitValues.replace_current_date_placeholders(submitter)
      end

      submitter
@@ -205,10 +203,15 @@ module Api

      submitter.preferences['send_sms'] = submitter_preferences['send_sms'] if submitter_preferences.key?('send_sms')
      submitter.preferences['reply_to'] = submitter_preferences['reply_to'] if submitter_preferences.key?('reply_to')
+
      if submitter_preferences.key?('require_phone_2fa')
        submitter.preferences['require_phone_2fa'] = submitter_preferences['require_phone_2fa']
      end

+      if submitter_preferences.key?('require_email_2fa')
+        submitter.preferences['require_email_2fa'] = submitter_preferences['require_email_2fa']
+      end
+
      if submitter_preferences.key?('go_to_last')
        submitter.preferences['go_to_last'] = submitter_preferences['go_to_last']
      end
@@ -9,20 +9,7 @@ module Api

      templates = paginate(templates.preload(:author, folder: :parent_folder))

-      schema_documents =
-        ActiveStorage::Attachment.where(record_id: templates.map(&:id),
-                                        record_type: 'Template',
-                                        name: :documents,
-                                        uuid: templates.flat_map { |t| t.schema.pluck('attachment_uuid') })
-                                 .preload(:blob)
-
-      preview_image_attachments =
-        ActiveStorage::Attachment.joins(:blob)
-                                 .where(blob: { filename: ['0.png', '0.jpg'] })
-                                 .where(record_id: schema_documents.map(&:id),
-                                        record_type: 'ActiveStorage::Attachment',
-                                        name: :preview_images)
-                                 .preload(:blob)
+      schema_documents, dynamic_documents, preview_image_attachments = preload_relations(templates)

      expires_at = Accounts.link_expires_at(current_account)

@@ -30,6 +17,7 @@ module Api
        data: templates.map do |t|
          Templates::SerializeForApi.call(t,
                                          schema_documents: schema_documents.select { |e| e.record_id == t.id },
+                                          dynamic_documents:,
                                          preview_image_attachments:,
                                          expires_at:)
        end,
@@ -88,6 +76,41 @@ module Api

    private

+    def preload_relations(templates)
+      schema_documents =
+        ActiveStorage::Attachment.where(record_id: templates.map(&:id),
+                                        record_type: 'Template',
+                                        name: :documents,
+                                        uuid: templates.flat_map { |t| t.schema.pluck('attachment_uuid') })
+                                 .preload(:blob)
+
+      dynamic_document_uuids =
+        templates.flat_map { |t| t.schema.select { |item| item['dynamic'] }.pluck('attachment_uuid') }
+
+      dynamic_documents =
+        if dynamic_document_uuids.present?
+          DynamicDocument.where(template: templates.map(&:id))
+                         .where(uuid: dynamic_document_uuids)
+                         .preload(current_version: { document_attachment: :blob })
+                         .select(:id, :uuid, :template_id, :sha1, :created_at, :updated_at)
+        else
+          DynamicDocument.none
+        end
+
+      preview_attachment_ids =
+        schema_documents.map(&:id) + dynamic_documents.filter_map { |d| d.current_version&.document_attachment&.id }
+
+      preview_image_attachments =
+        ActiveStorage::Attachment.joins(:blob)
+                                 .where(blob: { filename: ['0.png', '0.jpg'] })
+                                 .where(record_id: preview_attachment_ids,
+                                        record_type: 'ActiveStorage::Attachment',
+                                        name: :preview_images)
+                                 .preload(:blob)
+
+      [schema_documents, dynamic_documents, preview_image_attachments]
+    end
+
    def filter_templates(templates, params)
      templates = Templates.search(current_user, templates, params[:q])
      templates = params[:archived].in?(['true', true]) ? templates.archived : templates.active
@@ -41,7 +41,7 @@ class PreviewDocumentPageController < ActionController::API
  end

  def find_or_create_document_tempfile_path(attachment)
-    file_path = "#{Dir.tmpdir}/#{attachment.uuid}"
+    file_path = "#{Dir.tmpdir}/attachment-#{Digest::SHA1.hexdigest("#{attachment.id}-#{attachment.uuid}")}"

    File.open(file_path, File::RDWR | File::CREAT, 0o644) do |f|
      f.flock(File::LOCK_EX)
@@ -1,6 +1,14 @@
 # frozen_string_literal: true

 class RevealAccessTokenController < ApplicationController
+  rate_limit to: 4, within: 1.minute, only: %i[create], by: -> { current_user.id }, with: lambda {
+    Rollbar.error('Rate limit api key') if defined?(Rollbar)
+
+    render turbo_stream: turbo_stream.replace(:modal, template: 'reveal_access_token/show',
+                                                      locals: { error_message: I18n.t(:too_many_attempts) }),
+           status: :unprocessable_content
+  }
+
  def show
    authorize!(:manage, current_user.access_token)
  end
@@ -14,7 +14,7 @@ class SendSubmissionEmailController < ApplicationController
      template = Template.find_by!(slug: params[:template_slug])

      @submitter =
-        Submitter.completed.where(submission: template.submissions).find_by!(email: params[:email].to_s.downcase)
+        Submitter.completed.where(submission: template.submissions).find_by(email: params[:email].to_s.downcase)
    elsif params[:submission_slug]
      submission = Submission.find_by(slug: params[:submission_slug])

@@ -27,9 +27,11 @@ class SendSubmissionEmailController < ApplicationController
      @submitter = Submitter.completed.find_by!(slug: params[:submitter_slug])
    end

-    RateLimit.call("send-email-#{@submitter.id}", limit: 2, ttl: 5.minutes)
+    if @submitter
+      RateLimit.call("send-email-#{@submitter.id}", limit: 2, ttl: 5.minutes)

-    SubmitterMailer.documents_copy_email(@submitter, sig: true).deliver_later! if can_send?(@submitter)
+      SubmitterMailer.documents_copy_email(@submitter, sig: true).deliver_later! if can_send?(@submitter)
+    end

    respond_to do |f|
      f.html { render :success }
@@ -101,11 +101,18 @@ class StartFormController < ApplicationController
  def load_resubmit_submitter
    @resubmit_submitter =
      if params[:resubmit].present? && !params[:resubmit].in?([true, 'true'])
-        Submitter.find_by(slug: params[:resubmit])
+        submitter = Submitter.find_by(slug: params[:resubmit])
+
+        submitter if submitter && can_resubmit?(submitter)
      end
  end

+  def can_resubmit?(submitter)
+    submitter.account.account_configs.find_or_initialize_by(key: AccountConfig::ALLOW_TO_RESUBMIT).value != false
+  end
+
  def authorize_start!
+    return redirect_to submit_form_path(@resubmit_submitter.slug) if @resubmit_submitter && @template.archived_at?
    return redirect_to start_form_path(@template.slug) if @template.archived_at?

    return if @resubmit_submitter
@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+class SubmissionsResendEmailController < ApplicationController
+  load_and_authorize_resource :submission
+
+  before_action do
+    authorize!(:manage, :resend_all)
+    authorize!(:update, @submission)
+  end
+
+  def create
+    submitters = @submission.submitters.reject(&:completed_at?).select { |s| s.email.present? && !s.declined_at? }
+
+    if Docuseal.multitenant?
+      recent_submitter_ids =
+        SubmissionEvent.where(submitter_id: submitters.map(&:id),
+                              event_type: 'send_email',
+                              created_at: 10.hours.ago..Time.current).pluck(:submitter_id).to_set
+
+      submitters = submitters.reject { |s| recent_submitter_ids.include?(s.id) }
+    end
+
+    submitters.each do |submitter|
+      SendSubmitterInvitationEmailJob.perform_async('submitter_id' => submitter.id)
+
+      submitter.sent_at ||= Time.current
+      submitter.save!
+    end
+
+    notice =
+      if submitters.empty?
+        I18n.t('email_has_been_sent_already')
+      else
+        I18n.t('emails_have_been_sent_to_n_recipients', count: submitters.size)
+      end
+
+    redirect_back(fallback_location: submission_path(@submission), notice:)
+  end
+end
@@ -4,6 +4,8 @@ class SubmissionsUnarchiveController < ApplicationController
  load_and_authorize_resource :submission

  def create
+    authorize!(:update, @submission)
+
    @submission.update!(archived_at: nil)

    redirect_to submission_path(@submission), notice: I18n.t('submission_has_been_unarchived')
@@ -5,12 +5,12 @@ class SubmitFormInviteController < ApplicationController
  skip_authorization_check

  def create
-    submitter = Submitter.find_by!(slug: params[:submit_form_slug])
+    @submitter = Submitter.find_by!(slug: params[:submit_form_slug])

-    return head :unprocessable_content unless can_invite?(submitter)
+    return head :unprocessable_content unless can_invite?(@submitter)

-    invite_submitters = filter_invite_submitters(submitter, 'invite_by_uuid')
-    optional_invite_submitters = filter_invite_submitters(submitter, 'optional_invite_by_uuid')
+    invite_submitters = filter_invite_submitters(@submitter, 'invite_by_uuid')
+    optional_invite_submitters = filter_invite_submitters(@submitter, 'optional_invite_by_uuid')

    ApplicationRecord.transaction do
      (invite_submitters + optional_invite_submitters).each do |item|
@@ -21,18 +21,18 @@ class SubmitFormInviteController < ApplicationController

        email = Submissions.normalize_email(attrs[:email])

-        submitter.submission.submitters.create!(uuid: attrs[:uuid], email:, account_id: submitter.account_id)
+        @submitter.submission.submitters.create!(uuid: attrs[:uuid], email:, account_id: @submitter.account_id)

-        SubmissionEvents.create_with_tracking_data(submitter, 'invite_party', request, { uuid: submitter.uuid })
+        SubmissionEvents.create_with_tracking_data(@submitter, 'invite_party', request, { uuid: @submitter.uuid })
      end

-      submitter.submission.update!(submitters_order: :preserved)
+      @submitter.submission.update!(submitters_order: :preserved)
    end

-    submitter.submission.submitters.reload
+    @submitter.submission.submitters.reload

-    if invite_submitters.all? { |s| submitter.submission.submitters.any? { |e| e.uuid == s['uuid'] } }
-      Submitters::SubmitValues.call(submitter, ActionController::Parameters.new(completed: 'true'), request)
+    if invite_submitters.all? { |s| @submitter.submission.submitters.any? { |e| e.uuid == s['uuid'] } }
+      Submitters::SubmitValues.call(@submitter, ActionController::Parameters.new(completed: 'true'), request)

      head :ok
    else
@@ -5,19 +5,19 @@ class SubmitFormMetadataController < ApplicationController
  skip_authorization_check

  def index
-    submitter = Submitter.find_by!(slug: params[:submit_form_slug])
+    @submitter = Submitter.find_by!(slug: params[:submit_form_slug])

-    return head :not_found if submitter.declined_at? ||
-                              submitter.completed_at? ||
-                              submitter.submission.archived_at? ||
-                              submitter.submission.expired? ||
-                              submitter.submission.template&.archived_at? ||
-                              submitter.account.archived_at? ||
-                              !Submitters::AuthorizedForForm.call(submitter, current_user, request)
+    return head :not_found if @submitter.declined_at? ||
+                              @submitter.completed_at? ||
+                              @submitter.submission.archived_at? ||
+                              @submitter.submission.expired? ||
+                              @submitter.submission.template&.archived_at? ||
+                              @submitter.account.archived_at? ||
+                              !Submitters::AuthorizedForForm.call(@submitter, current_user, request)

-    submission = submitter.submission
+    submission = @submitter.submission
    values = submission.submitters.reduce({}) { |acc, sub| acc.merge(sub.values) }
-    schema = Submissions.filtered_conditions_schema(submission, values:, include_submitter_uuid: submitter.uuid)
+    schema = Submissions.filtered_conditions_schema(submission, values:, include_submitter_uuid: @submitter.uuid)

    documents = schema.filter_map do |item|
      submission.schema_documents.find { |a| a.uuid == item['attachment_uuid'] }
@@ -5,21 +5,21 @@ class SubmitFormValuesController < ApplicationController
  skip_authorization_check

  def index
-    submitter = Submitter.find_by!(slug: params[:submit_form_slug])
+    @submitter = Submitter.find_by!(slug: params[:submit_form_slug])

-    return render json: {} if submitter.completed_at? ||
-                              submitter.declined_at? ||
-                              submitter.submission.template&.archived_at? ||
-                              submitter.submission.archived_at? ||
-                              submitter.submission.expired? ||
-                              !Submitters::AuthorizedForForm.call(submitter, current_user, request)
+    return render json: {} if @submitter.completed_at? ||
+                              @submitter.declined_at? ||
+                              @submitter.submission.template&.archived_at? ||
+                              @submitter.submission.archived_at? ||
+                              @submitter.submission.expired? ||
+                              !Submitters::AuthorizedForForm.call(@submitter, current_user, request)

-    value = submitter.values[params['field_uuid']]
-    attachment = submitter.attachments.where(created_at: params[:after]..).find_by(uuid: value) if value.present?
+    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 created_at], methods: %i[url filename content_type])
-    }, head: :ok
+    }
  end
 end
@@ -4,6 +4,8 @@ class SubmittersSendEmailController < ApplicationController
  load_and_authorize_resource :submitter

  def create
+    authorize!(:update, @submitter)
+
    if Docuseal.multitenant? && SubmissionEvent.exists?(submitter: @submitter,
                                                        event_type: 'send_email',
                                                        created_at: 10.hours.ago..Time.current)
@@ -10,6 +10,8 @@ class TemplateDocumentsController < ApplicationController
  end

  def create
+    authorize!(:update, @template)
+
    if params[:blobs].blank? && params[:files].blank?
      return render json: { error: I18n.t('file_is_missing') }, status: :unprocessable_content
    end
@@ -13,6 +13,9 @@ class TemplatesCloneAndReplaceController < ApplicationController

    cloned_template = Templates::Clone.call(@template, author: current_user)
    cloned_template.name = File.basename(params[:files].first.original_filename, '.*')
+
+    authorize!(:create, cloned_template)
+
    cloned_template.save!

    documents = Templates::ReplaceAttachments.call(cloned_template, params, extract_fields: true)
@@ -27,18 +27,7 @@ class TemplatesController < ApplicationController
  def new; end

  def edit
-    ActiveRecord::Associations::Preloader.new(
-      records: [@template],
-      associations: [{ schema_documents: [:blob, { preview_images_attachments: :blob }] }]
-    ).call
-
-    @template_data =
-      @template.as_json.merge(
-        documents: @template.schema_documents.as_json(
-          methods: %i[metadata signed_key],
-          include: { preview_images: { methods: %i[url metadata filename] } }
-        )
-      ).to_json
+    @template_data = Templates.serialize_for_builder(@template)

    render :edit, layout: 'plain'
  end
@@ -16,7 +16,12 @@ class TemplatesDetectFieldsController < ApplicationController
    page_number = params[:page].presence&.to_i

    documents.each do |document|
-      io = StringIO.new(document.download)
+      io =
+        if document.image?
+          StringIO.new(document.preview_images.joins(:blob).find_by(blob: { filename: ['0.png', '0.jpg'] }).download)
+        else
+          StringIO.new(document.download)
+        end

      Templates::DetectFields.call(io, attachment: document, page_number:) do |(attachment_uuid, page, fields)|
        sse.write({ attachment_uuid:, page:, fields: })
@@ -6,6 +6,8 @@ class TemplatesFoldersController < ApplicationController
  def edit; end

  def update
+    authorize!(:update, @template)
+
    name = [params[:parent_name], params[:name]].compact_blank.join(' / ')

    @template.folder = TemplateFolders.find_or_create_by_name(current_user, name)
@@ -4,18 +4,7 @@ class TemplatesPreviewController < ApplicationController
  load_and_authorize_resource :template

  def show
-    ActiveRecord::Associations::Preloader.new(
-      records: [@template],
-      associations: [{ schema_documents: { preview_images_attachments: :blob } }]
-    ).call
-
-    @template_data =
-      @template.as_json.merge(
-        documents: @template.schema_documents.as_json(
-          methods: %i[metadata signed_key],
-          include: { preview_images: { methods: %i[url metadata filename] } }
-        )
-      ).to_json
+    @template_data = Templates.serialize_for_builder(@template)

    render :show, layout: 'plain'
  end
@@ -4,6 +4,8 @@ class TemplatesRestoreController < ApplicationController
  load_and_authorize_resource :template

  def create
+    authorize!(:update, @template)
+
    @template.update!(archived_at: nil)

    WebhookUrls.enqueue_events(@template, 'template.updated')
@@ -5,7 +5,9 @@ class TemplatesUploadsController < ApplicationController

  layout 'plain'

-  def show; end
+  def show
+    redirect_to root_path if params[:url].blank?
+  end

  def create
    url_params = create_file_params_from_url if params[:url].present?
@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+class TemplatesVersionsController < ApplicationController
+  load_and_authorize_resource :template
+
+  def index
+    versions = @template.template_versions.order(id: :desc).preload(:author)
+
+    render json: versions.as_json(TemplateVersions::SERIALIZE_PARAMS)
+  end
+
+  def show
+    version = @template.template_versions.find(params[:id])
+
+    render json: TemplateVersions.serialize(version)
+  end
+
+  def create
+    authorize!(:update, @template)
+
+    TemplateVersions.find_or_create_for(@template, author: current_user)
+
+    head :ok
+  end
+end
@@ -3,7 +3,7 @@
 class TestingAccountsController < ApplicationController
  skip_authorization_check only: :destroy

-  def show
+  def create
    authorize!(:manage, current_account)
    authorize!(:manage, current_user)

@@ -11,6 +11,12 @@ class UserInitialsController < ApplicationController

    return redirect_to settings_profile_index_path, notice: I18n.t('unable_to_save_initials') if file.blank?

+    extension = File.extname(file.original_filename).delete_prefix('.').downcase
+
+    if Submitters::DANGEROUS_EXTENSIONS.include?(extension)
+      raise Submitters::MaliciousFileExtension, "File type '.#{extension}' is not allowed."
+    end
+
    blob = ActiveStorage::Blob.create_and_upload!(io: file.open,
                                                  filename: file.original_filename,
                                                  content_type: file.content_type)
@@ -11,6 +11,12 @@ class UserSignaturesController < ApplicationController

    return redirect_to settings_profile_index_path, notice: I18n.t('unable_to_save_signature') if file.blank?

+    extension = File.extname(file.original_filename).delete_prefix('.').downcase
+
+    if Submitters::DANGEROUS_EXTENSIONS.include?(extension)
+      raise Submitters::MaliciousFileExtension, "File type '.#{extension}' is not allowed."
+    end
+
    blob = ActiveStorage::Blob.create_and_upload!(io: file.open,
                                                  filename: file.original_filename,
                                                  content_type: file.content_type)
@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class WebhookHmacController < ApplicationController
+  load_and_authorize_resource :webhook_url, parent: false
+
+  def show; end
+end
@@ -21,6 +21,7 @@ import SubmittersAutocomplete from './elements/submitter_autocomplete'
 import FolderAutocomplete from './elements/folder_autocomplete'
 import SignatureForm from './elements/signature_form'
 import SubmitForm from './elements/submit_form'
+import ConvertUpload from './elements/convert_upload'
 import PromptPassword from './elements/prompt_password'
 import EmailsTextarea from './elements/emails_textarea'
 import ToggleSubmit from './elements/toggle_submit'
@@ -47,13 +48,13 @@ import ScrollTo from './elements/scroll_to'
 import SetValue from './elements/set_value'
 import ReviewForm from './elements/review_form'
 import ShowOnValue from './elements/show_on_value'
-import CustomValidation from './elements/custom_validation'
 import ToggleClasses from './elements/toggle_classes'
 import AutosizeField from './elements/autosize_field'
 import GoogleDriveFilePicker from './elements/google_drive_file_picker'
 import OpenModal from './elements/open_modal'
 import BarChart from './elements/bar_chart'
 import FieldCondition from './elements/field_condition'
+import ConfirmUpload from './elements/confirm_upload'

 import * as TurboInstantClick from './lib/turbo_instant_click'

@@ -112,6 +113,7 @@ safeRegisterElement('submitters-autocomplete', SubmittersAutocomplete)
 safeRegisterElement('folder-autocomplete', FolderAutocomplete)
 safeRegisterElement('signature-form', SignatureForm)
 safeRegisterElement('submit-form', SubmitForm)
+safeRegisterElement('convert-upload', ConvertUpload)
 safeRegisterElement('prompt-password', PromptPassword)
 safeRegisterElement('emails-textarea', EmailsTextarea)
 safeRegisterElement('toggle-cookies', ToggleCookies)
@@ -139,13 +141,13 @@ safeRegisterElement('scroll-to', ScrollTo)
 safeRegisterElement('set-value', SetValue)
 safeRegisterElement('review-form', ReviewForm)
 safeRegisterElement('show-on-value', ShowOnValue)
-safeRegisterElement('custom-validation', CustomValidation)
 safeRegisterElement('toggle-classes', ToggleClasses)
 safeRegisterElement('autosize-field', AutosizeField)
 safeRegisterElement('google-drive-file-picker', GoogleDriveFilePicker)
 safeRegisterElement('open-modal', OpenModal)
 safeRegisterElement('bar-chart', BarChart)
 safeRegisterElement('field-condition', FieldCondition)
+safeRegisterElement('confirm-upload', ConfirmUpload)

 safeRegisterElement('template-builder', class extends HTMLElement {
  connectedCallback () {
@@ -169,6 +171,9 @@ safeRegisterElement('template-builder', class extends HTMLElement {
      withKba: ['true', 'false'].includes(this.dataset.withKba) ? this.dataset.withKba === 'true' : null,
      withLogo: this.dataset.withLogo !== 'false',
      withFieldsDetection: this.dataset.withFieldsDetection === 'true',
+      withDetectExistingFields: this.dataset.withDetectExistingFields === 'true',
+      withRevisions: true,
+      withRevisionsMenu: this.dataset.withRevisionsMenu === 'true',
      editable: this.dataset.editable !== 'false',
      authenticityToken: document.querySelector('meta[name="csrf-token"]')?.content,
      withCustomFields: true,
@@ -180,6 +185,7 @@ safeRegisterElement('template-builder', class extends HTMLElement {
      withConditions: this.dataset.withConditions === 'true',
      withDynamicDocuments: this.dataset.withDynamicDocuments === 'true',
      withGoogleDrive: this.dataset.withGoogleDrive === 'true',
+      pagePreviewFormat: this.dataset.pagePreviewFormat || '.jpg',
      withReplaceAndCloneUpload: true,
      withDownload: true,
      currencies: (this.dataset.currencies || '').split(',').filter(Boolean),
@@ -193,10 +199,35 @@ safeRegisterElement('template-builder', class extends HTMLElement {
  }

  onSubmit = (e) => {
-    if (e.detail.success && e.detail?.formSubmission?.formElement?.id === 'submitters_form') {
-      e.detail.fetchResponse.response.json().then((data) => {
-        this.component.template.submitters = data.submitters
-      })
+    if (e.detail.success) {
+      if (e.detail?.formSubmission?.formElement?.id === 'submitters_form') {
+        e.detail.fetchResponse.response.json().then((data) => {
+          this.component.template.submitters = data.submitters
+        })
+      }
+
+      if (e.detail?.formSubmission?.formElement?.action?.endsWith('/prefillable_fields')) {
+        e.detail.fetchResponse.response.text().then((data) => {
+          const doc = new DOMParser().parseFromString(data, 'text/html')
+          const fragment = doc.querySelector('turbo-stream template').content
+
+          const prefillableUuidsIndex = {}
+
+          fragment.querySelectorAll('[name="field_uuid"]').forEach((field) => {
+            prefillableUuidsIndex[field.value] = true
+          })
+
+          this.component.template.fields.forEach((field) => {
+            if (prefillableUuidsIndex[field.uuid]) {
+              field.prefillable = true
+              field.readonly = true
+            } else if (field.prefillable) {
+              delete field.prefillable
+              delete field.readonly
+            }
+          })
+        })
+      }
    }
  }

@@ -11,6 +11,7 @@ window.customElements.define('draw-signature', class extends HTMLElement {
    this.resizeObserver = new ResizeObserver(() => {
      requestAnimationFrame(() => {
        if (!this.canvas) return
+        if (!this.canvas.parentNode?.clientWidth) return

        const { width, height } = this.canvas

@@ -89,7 +90,7 @@ window.customElements.define('draw-signature', class extends HTMLElement {
  }

  redrawCanvas (oldWidth, oldHeight) {
-    if (this.pad && !this.pad.isEmpty() && oldWidth > 0 && oldHeight > 0) {
+    if (this.pad && !this.pad.isEmpty() && oldWidth > 0 && oldHeight > 0 && this.canvas.width > 0 && this.canvas.height > 0) {
      const sx = this.canvas.width / oldWidth
      const sy = this.canvas.height / oldHeight

@@ -0,0 +1,27 @@
+import { target, targetable } from '@github/catalyst/lib/targetable'
+
+export default targetable(class extends HTMLElement {
+  static [target.static] = [
+    'prompt',
+    'processing',
+    'logo'
+  ]
+
+  connectedCallback () {
+    this.form.addEventListener('submit', this.onSubmit)
+  }
+
+  disconnectedCallback () {
+    this.form.removeEventListener('submit', this.onSubmit)
+  }
+
+  onSubmit = () => {
+    this.prompt.classList.add('hidden')
+    this.processing.classList.remove('hidden')
+    this.logo.classList.add('animate-bounce')
+  }
+
+  get form () {
+    return this.querySelector('form')
+  }
+})
@@ -0,0 +1,73 @@
+export function convertImage (sourceFile, targetType, quality) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+
+    reader.onload = function (event) {
+      const img = new Image()
+
+      img.onload = function () {
+        const canvas = document.createElement('canvas')
+        const ctx = canvas.getContext('2d')
+
+        canvas.width = img.width
+        canvas.height = img.height
+        ctx.drawImage(img, 0, 0)
+        canvas.toBlob(function (blob) {
+          const ext = targetType === 'image/jpeg' ? '.jpg' : '.png'
+          const newFile = new File([blob], sourceFile.name.replace(/\.\w+$/, ext), { type: targetType })
+          resolve(newFile)
+        }, targetType, quality)
+      }
+
+      img.onerror = () => reject(new Error(`browser cannot decode ${sourceFile.type || sourceFile.name}`))
+
+      img.src = event.target.result
+    }
+    reader.onerror = reject
+    reader.readAsDataURL(sourceFile)
+  })
+}
+
+export async function convertImagesInInput (input) {
+  if (!input.files || input.files.length === 0) return
+
+  const dt = new DataTransfer()
+  let didConvert = false
+
+  for (const file of Array.from(input.files)) {
+    let converted = file
+
+    try {
+      if (['image/bmp', 'image/vnd.microsoft.icon', 'image/svg+xml', 'image/gif'].includes(file.type)) {
+        converted = await convertImage(file, 'image/png')
+        didConvert = true
+      } else if (['image/heic', 'image/heif', 'image/heic-sequence', 'image/heif-sequence', 'image/avif', 'image/avif-sequence', 'image/webp'].includes(file.type)) {
+        converted = await convertImage(file, 'image/jpeg', 0.9)
+        didConvert = true
+      }
+    } catch (e) {
+      alert(e.message)
+    }
+
+    dt.items.add(converted)
+  }
+
+  if (didConvert) {
+    input.files = dt.files
+  }
+}
+
+export default class extends HTMLElement {
+  connectedCallback () {
+    const input = this.querySelector('input[type="file"]')
+    const form = input.form
+
+    input.addEventListener('change', async () => {
+      await convertImagesInInput(input)
+
+      form.querySelector('[type="submit"]')?.setAttribute('disabled', true)
+
+      form.requestSubmit()
+    })
+  }
+}
@@ -1,14 +0,0 @@
-export default class extends HTMLElement {
-  connectedCallback () {
-    const input = this.querySelector('input')
-    const invalidMessage = this.dataset.invalidMessage || ''
-
-    input.addEventListener('invalid', () => {
-      input.setCustomValidity(input.value ? invalidMessage : '')
-    })
-
-    input.addEventListener('input', () => {
-      input.setCustomValidity('')
-    })
-  }
-}
@@ -1,4 +1,5 @@
 import { target, targets, targetable } from '@github/catalyst/lib/targetable'
+import { convertImagesInInput } from './convert_upload'

 const loadingIconHtml = `<svg xmlns="http://www.w3.org/2000/svg" class="animate-spin" 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" />
@@ -150,12 +151,16 @@ export default targetable(class extends HTMLElement {
    if (!this.isLoading) this.hideDraghover()
  }

-  uploadFiles (files, url) {
+  async uploadFiles (files, url) {
    this.isLoading = true

    this.form.action = url

-    this.form.querySelector('[type="file"]').files = files
+    const input = this.form.querySelector('[type="file"]')
+
+    input.files = files
+
+    await convertImagesInInput(input)

    this.form.querySelector('[type="submit"]').click()
  }
@@ -1,5 +1,6 @@
 import { actionable } from '@github/catalyst/lib/actionable'
 import { target, targetable } from '@github/catalyst/lib/targetable'
+import { convertImagesInInput } from './convert_upload'

 export default actionable(targetable(class extends HTMLElement {
  static [target.static] = [
@@ -38,17 +39,21 @@ export default actionable(targetable(class extends HTMLElement {
    this.classList.add('border-base-300', 'hover:bg-base-200/30')
  }

-  onDrop (e) {
+  async onDrop (e) {
    e.preventDefault()

    this.input.files = e.dataTransfer.files

-    this.uploadFiles(e.dataTransfer.files)
+    await convertImagesInInput(this.input)
+
+    this.uploadFiles(this.input.files)
  }

-  onSelectFiles (e) {
+  async onSelectFiles (e) {
    e.preventDefault()

+    await convertImagesInInput(this.input)
+
    this.uploadFiles(this.input.files)
  }

@@ -14,6 +14,7 @@ export default targetable(class extends HTMLElement {
    this.resizeObserver = new ResizeObserver(() => {
      requestAnimationFrame(() => {
        if (!this.canvas) return
+        if (!this.canvas.parentNode?.clientWidth) return

        const { width, height } = this.canvas

@@ -80,7 +81,7 @@ export default targetable(class extends HTMLElement {
  }

  redrawCanvas (oldWidth, oldHeight) {
-    if (this.pad && !this.pad.isEmpty() && oldWidth > 0 && oldHeight > 0) {
+    if (this.pad && !this.pad.isEmpty() && oldWidth > 0 && oldHeight > 0 && this.canvas.width > 0 && this.canvas.height > 0) {
      const sx = this.canvas.width / oldWidth
      const sy = this.canvas.height / oldHeight

@@ -52,7 +52,9 @@ safeRegisterElement('submission-form', class extends HTMLElement {
      completedMessage: JSON.parse(this.dataset.completedMessage || '{}'),
      completedRedirectUrl: this.dataset.completedRedirectUrl,
      attachments: reactive(JSON.parse(this.dataset.attachments)),
-      fields: JSON.parse(this.dataset.fields)
+      fields: JSON.parse(this.dataset.fields),
+      completeButtonContainer: document.getElementById('complete_button_container'),
+      completeButtonScrollContainer: document.getElementById('complete_button_container_scroll')
    })

    this.app.mount(this.appElem)
@@ -42,10 +42,25 @@ export default {
      const areas = {}

      this.field.areas?.forEach((area) => {
-        areas[area.attachment_uuid + area.page] ||= area
+        areas[area.attachment_uuid] ||= []
+        areas[area.attachment_uuid].push(area)
      })

-      return Object.values(areas).slice(0, 6)
+      const sortedAreas = Object.values(areas).reduce((acc, group) => {
+        const seen = {}
+        const sortedGroup = [...group].sort((a, b) => a.page - b.page)
+
+        sortedGroup.forEach((area) => {
+          if (!seen[area.page]) {
+            seen[area.page] = true
+            acc.push(area)
+          }
+        })
+
+        return acc
+      }, [])
+
+      return sortedAreas.slice(0, 6)
    }
  }
 }
@@ -527,7 +527,8 @@ export default {
        try {
          return this.formatDate(
            this.modelValue === '{{date}}' ? new Date() : new Date(this.modelValue),
-            this.field.preferences?.format || (this.locale.endsWith('-US') ? 'MM/DD/YYYY' : 'DD/MM/YYYY')
+            this.field.preferences?.format || (this.locale.endsWith('-US') ? 'MM/DD/YYYY' : 'DD/MM/YYYY'),
+            { withTimePlaceholders: this.modelValue === '{{date}}' }
          )
        } catch {
          return this.modelValue
@@ -642,40 +643,63 @@ export default {
        return new Intl.NumberFormat('de-DE').format(number)
      } else if (format === 'space') {
        return new Intl.NumberFormat('fr-FR').format(number)
+      } else if (format === 'percent') {
+        return `${number}%`
+      } else if (format === 'percent_space') {
+        return `${String(number).replace('.', ',')} %`
      } else {
        return number
      }
    },
-    formatDate (date, format) {
-      const monthFormats = {
-        M: 'numeric',
-        MM: '2-digit',
-        MMM: 'short',
-        MMMM: 'long'
-      }
+    formatDate (date, format, { withTimePlaceholders = false } = {}) {
+      const monthFormats = { M: 'numeric', MM: '2-digit', MMM: 'short', MMMM: 'long' }
+      const dayFormats = { D: 'numeric', DD: '2-digit' }
+      const yearFormats = { YYYY: 'numeric', YYY: 'numeric', YY: '2-digit' }
+      const hourFormats = { H: 'numeric', HH: '2-digit', h: 'numeric', hh: '2-digit' }
+      const minuteFormats = { m: 'numeric', mm: '2-digit' }
+      const secondFormats = { s: 'numeric', ss: '2-digit' }

-      const dayFormats = {
-        D: 'numeric',
-        DD: '2-digit'
-      }
+      const hasTime = /[HhAasz]/.test(format)

-      const yearFormats = {
-        YYYY: 'numeric',
-        YYY: 'numeric',
-        YY: '2-digit'
-      }
-
-      const parts = new Intl.DateTimeFormat([], {
+      const opts = {
        day: dayFormats[format.match(/D+/)],
        month: monthFormats[format.match(/M+/)],
-        year: yearFormats[format.match(/Y+/)],
-        timeZone: 'UTC'
-      }).formatToParts(date)
+        year: yearFormats[format.match(/Y+/)]
+      }

-      return format
-        .replace(/D+/, parts.find((p) => p.type === 'day').value)
-        .replace(/M+/, parts.find((p) => p.type === 'month').value)
-        .replace(/Y+/, parts.find((p) => p.type === 'year').value)
+      if (format.match(/H+/)) { opts.hour = hourFormats[format.match(/H+/)[0]]; opts.hour12 = false }
+      if (format.match(/h+/)) { opts.hour = hourFormats[format.match(/h+/)[0]]; opts.hour12 = true }
+      if (/[Aa]/.test(format) && opts.hour12 === undefined) opts.hour12 = true
+      if (format.match(/m+/)) opts.minute = minuteFormats[format.match(/m+/)[0]]
+      if (format.match(/s+/)) opts.second = secondFormats[format.match(/s+/)[0]]
+      if (/z/.test(format)) opts.timeZoneName = 'short'
+      if (!hasTime) opts.timeZone = 'UTC'
+
+      const partTypes = {
+        M: 'month',
+        D: 'day',
+        Y: 'year',
+        H: 'hour',
+        h: 'hour',
+        m: 'minute',
+        s: 'second',
+        z: 'timeZoneName',
+        A: 'dayPeriod',
+        a: 'dayPeriod'
+      }
+
+      const parts = new Intl.DateTimeFormat([], opts).formatToParts(date)
+
+      return format.replace(/MMMM|MMM|MM|M|DD|D|YYYY|YYY|YY|HH|hh|H|h|mm|m|ss|s|A|a|z/g, (token) => {
+        if (withTimePlaceholders && /^(HH|hh|H|h|mm|m|ss|s|A|a)$/.test(token)) return '--'
+
+        const value = parts.find((p) => p.type === partTypes[token[0]])?.value
+
+        if (token === 'A') return (value || '').toUpperCase()
+        if (token === 'a') return (value || '').toLowerCase()
+
+        return value
+      })
    },
    updateMultipleSelectValue (value) {
      if (this.modelValue?.includes(value)) {
@@ -27,6 +27,7 @@
      </label>
      <button
        v-if="withToday"
+        type="button"
        class="btn btn-outline btn-sm !normal-case font-normal set-current-date-button"
        @click.prevent="[setCurrentDate(), $emit('focus')]"
      >
@@ -56,12 +57,18 @@
        class="base-input !text-2xl text-center w-full"
        :required="field.required"
        :aria-describedby="field.description ? field.uuid + '-desc' : undefined"
-        type="date"
-        :name="`values[${field.uuid}]`"
+        :type="inputType"
+        :name="formatType === 'datetime' ? undefined : `values[${field.uuid}]`"
        @keydown.enter="onEnter"
        @focus="$emit('focus')"
        @paste="onPaste"
      >
+      <input
+        v-if="formatType === 'datetime'"
+        type="hidden"
+        :name="`values[${field.uuid}]`"
+        :value="modelValue"
+      >
    </div>
  </div>
 </template>
@@ -97,14 +104,19 @@ export default {
  },
  emits: ['update:model-value', 'focus', 'submit'],
  computed: {
+    formatType () {
+      const format = this.field.preferences?.format || ''
+
+      if (/[HhAasz]/.test(format)) return 'datetime'
+      if (format && !/[Dd]/.test(format)) return 'month'
+
+      return 'date'
+    },
+    inputType () {
+      return { datetime: 'datetime-local', month: 'month', date: 'date' }[this.formatType]
+    },
    dateNowString () {
-      const today = new Date()
-
-      const yyyy = today.getFullYear()
-      const mm = String(today.getMonth() + 1).padStart(2, '0')
-      const dd = String(today.getDate()).padStart(2, '0')
-
-      return `${yyyy}-${mm}-${dd}`
+      return this.formatDateValue(new Date())
    },
    validationMin () {
      if (this.field.validation?.min) {
@@ -121,6 +133,8 @@ export default {
      }
    },
    withToday () {
+      if (this.formatType === 'datetime') return false
+
      const todayDate = new Date().setHours(0, 0, 0, 0)

      if (this.validationMin) {
@@ -137,9 +151,25 @@ export default {
    },
    value: {
      set (value) {
+        if (this.formatType === 'datetime' && value) {
+          const d = new Date(value)
+
+          if (!isNaN(d)) {
+            this.$emit('update:model-value', d.toISOString())
+
+            return
+          }
+        }
+
        this.$emit('update:model-value', value)
      },
      get () {
+        if (this.formatType === 'datetime') {
+          const d = new Date(this.modelValue)
+
+          return isNaN(d) ? '' : this.formatDateValue(d)
+        }
+
        return this.modelValue
      }
    }
@@ -163,20 +193,32 @@ export default {

      const parsedDate = new Date(pasteData)

-      if (!isNaN(parsedDate)) {
-        const inputEl = this.$refs.input
+      if (isNaN(parsedDate)) return

-        inputEl.valueAsDate = new Date(parsedDate.getTime() - parsedDate.getTimezoneOffset() * 60000)
-
-        inputEl.dispatchEvent(new Event('input', { bubbles: true }))
-      }
+      this.setInputValue(parsedDate)
    },
    setCurrentDate () {
+      this.setInputValue(new Date())
+    },
+    setInputValue (date) {
      const inputEl = this.$refs.input

-      inputEl.valueAsDate = new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000)
+      if (this.formatType === 'date') {
+        inputEl.valueAsDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000)
+      } else {
+        inputEl.value = this.formatDateValue(date)
+      }

      inputEl.dispatchEvent(new Event('input', { bubbles: true }))
+    },
+    formatDateValue (date) {
+      const pad = (n) => String(n).padStart(2, '0')
+      const ymd = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
+
+      if (this.formatType === 'month') return ymd.slice(0, 7)
+      if (this.formatType === 'datetime') return `${ymd}T${pad(date.getHours())}:${pad(date.getMinutes())}`
+
+      return ymd
    }
  }
 }
@@ -51,6 +51,36 @@
 <script>
 import { IconCloudUpload, IconInnerShadowTop } from '@tabler/icons-vue'

+function convertImage (sourceFile, targetType, quality) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+
+    reader.onload = function (event) {
+      const img = new Image()
+
+      img.onload = function () {
+        const canvas = document.createElement('canvas')
+        const ctx = canvas.getContext('2d')
+
+        canvas.width = img.width
+        canvas.height = img.height
+        ctx.drawImage(img, 0, 0)
+        canvas.toBlob(function (blob) {
+          const ext = targetType === 'image/jpeg' ? '.jpg' : '.png'
+          const newFile = new File([blob], sourceFile.name.replace(/\.\w+$/, ext), { type: targetType })
+          resolve(newFile)
+        }, targetType, quality)
+      }
+
+      img.onerror = () => reject(new Error(`browser cannot decode ${sourceFile.type || sourceFile.name}`))
+
+      img.src = event.target.result
+    }
+    reader.onerror = reject
+    reader.readAsDataURL(sourceFile)
+  })
+}
+
 export default {
  name: 'FileDropzone',
  components: {
@@ -153,8 +183,14 @@ export default {
              }
            })
          } else {
-            if (file.type === 'image/bmp' || file.type === 'image/vnd.microsoft.icon') {
-              file = await this.convertBmpToPng(file)
+            try {
+              if (['image/bmp', 'image/vnd.microsoft.icon', 'image/svg+xml', 'image/gif'].includes(file.type)) {
+                file = await convertImage(file, 'image/png')
+              } else if (['image/heic', 'image/heif', 'image/heic-sequence', 'image/heif-sequence', 'image/avif', 'image/avif-sequence', 'image/webp'].includes(file.type)) {
+                file = await convertImage(file, 'image/jpeg', 0.9)
+              }
+            } catch (e) {
+              alert(e.message)
            }

            formData.append('file', file)
@@ -181,32 +217,6 @@ export default {
      }).finally(() => {
        this.isLoading = false
      })
-    },
-    convertBmpToPng (bmpFile) {
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader()
-
-        reader.onload = function (event) {
-          const img = new Image()
-
-          img.onload = function () {
-            const canvas = document.createElement('canvas')
-            const ctx = canvas.getContext('2d')
-
-            canvas.width = img.width
-            canvas.height = img.height
-            ctx.drawImage(img, 0, 0)
-            canvas.toBlob(function (blob) {
-              const newFile = new File([blob], bmpFile.name.replace(/\.\w+$/, '.png'), { type: 'image/png' })
-              resolve(newFile)
-            }, 'image/png')
-          }
-
-          img.src = event.target.result
-        }
-        reader.onerror = reject
-        reader.readAsDataURL(bmpFile)
-      })
    }
  }
 }
@@ -95,7 +95,7 @@
      v-else
      id="complete_form_button"
      class="btn btn-sm btn-neutral text-white px-4 w-full flex justify-center"
-      form="steps_form"
+      form="complete_form"
      type="submit"
      name="completed"
      value="true"
@@ -113,6 +113,39 @@
      </span>
    </button>
  </Teleport>
+  <Teleport
+    v-for="ref in (showCompleteButton ? [completeButtonContainer, completeButtonScrollContainer].filter(Boolean) : [])"
+    :key="ref"
+    :to="ref"
+  >
+    <button
+      class="complete-button btn btn-sm btn-neutral text-white px-4"
+      form="complete_form"
+      type="submit"
+      name="completed"
+      value="true"
+      :disabled="isSubmittingComplete"
+    >
+      <span class="flex items-center">
+        <IconInnerShadowTop
+          v-if="isSubmittingComplete"
+          class="mr-1 animate-spin w-5 h-5"
+          aria-hidden="true"
+        />
+        <span>
+          {{ t('complete') }}
+        </span>
+      </span>
+    </button>
+  </Teleport>
+  <form
+    v-if="!isCompleted && !isInvite"
+    id="complete_form"
+    class="hidden"
+    :action="submitPath"
+    method="post"
+    @submit.prevent="submitStep"
+  />
  <button
    v-if="!isFormVisible"
    id="expand_form_button"
@@ -791,6 +824,16 @@ export default {
      required: false,
      default: null
    },
+    completeButtonContainer: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    completeButtonScrollContainer: {
+      type: Object,
+      required: false,
+      default: null
+    },
    schema: {
      type: Array,
      required: false,
@@ -1008,6 +1051,7 @@ export default {
      isSubmitting: false,
      isSubmittingComplete: false,
      submittedValues: {},
+      isFormStarted: false,
      recalculateButtonDisabledKey: '',
      isAccessibilityMode: false
    }
@@ -1056,6 +1100,10 @@ export default {
        })
      })
    },
+    showCompleteButton () {
+      return this.completeButtonContainer && !this.isCompleted && !this.isInvite && this.isFormStarted &&
+        !this.stepFields.find((fields) => fields.some((f) => f.required && isEmpty(this.submittedValues[f.uuid])))
+    },
    submitButtonText () {
      if (this.alwaysMinimize) {
        return this.t('submit')
@@ -1657,6 +1705,8 @@ export default {
            return Promise.reject(new Error(data.error))
          }

+          this.isFormStarted = true
+
          const nextStep = (isLastStep && emptyRequiredField) || (forceComplete ? null : this.findNextStep(submitStepIndex))

          if (nextStep) {
@@ -1693,6 +1743,7 @@ export default {
    },
    async performComplete (resp) {
      this.isCompleted = true
+      this.isFormVisible = true

      if (resp?.text) {
        const respData = await resp.text()
@@ -7,6 +7,13 @@ const en = {
  kba: 'KBA',
  please_upload_an_image_file: 'Please upload an image file',
  must_be_characters_length: 'Must be {number} characters long',
+  must_be_valid_ssn: 'Must be a valid SSN (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Must be a valid EIN (XX-XXXXXXX)',
+  must_be_valid_email: 'Must be a valid email address',
+  must_be_valid_url: 'Must be a valid URL (starting with http:// or https://)',
+  must_be_valid_zip: 'Must be a valid ZIP code (XXXXX or XXXXX-XXXX)',
+  must_contain_numbers_only: 'Must contain numbers only',
+  must_contain_letters_only: 'Must contain letters only',
  complete_all_required_fields_to_proceed_with_identity_verification: 'Complete all required fields to proceed with identity verification.',
  verify_id: 'Verify ID',
  identity_verification: 'Identity verification',
@@ -116,6 +123,13 @@ const es = {
  kba: 'KBA',
  please_upload_an_image_file: 'Por favor, sube un archivo de imagen',
  must_be_characters_length: 'Debe tener {number} caracteres de longitud',
+  must_be_valid_ssn: 'Debe ser un SSN válido (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Debe ser un EIN válido (XX-XXXXXXX)',
+  must_be_valid_email: 'Debe ser una dirección de correo electrónico válida',
+  must_be_valid_url: 'Debe ser una URL válida (que comience con http:// o https://)',
+  must_be_valid_zip: 'Debe ser un ZIP válido (XXXXX o XXXXX-XXXX)',
+  must_contain_numbers_only: 'Debe contener solo números',
+  must_contain_letters_only: 'Debe contener solo letras',
  complete_all_required_fields_to_proceed_with_identity_verification: 'Complete todos los campos requeridos para continuar con la verificación de identidad.',
  verify_id: 'Verificar ID',
  identity_verification: 'Verificación de identidad',
@@ -136,7 +150,7 @@ const es = {
  verification_code_is_invalid: 'El código de verificación no es válido',
  sign_on_the_touchscreen: 'Firmar en 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',
+  by_clicking_you_agree_to_the: 'Al hacer clic en "{button}", usted acepta la',
  electronic_signature_disclosure: 'Divulgación de Firma Electrónica',
  esignature_disclosure: 'Divulgación de eFirma',
  already_paid: 'Ya pagado',
@@ -225,6 +239,13 @@ const it = {
  kba: 'KBA',
  please_upload_an_image_file: 'Per favore carica un file immagine',
  must_be_characters_length: 'Deve essere lungo {number} caratteri',
+  must_be_valid_ssn: 'Deve essere un SSN valido (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Deve essere un EIN valido (XX-XXXXXXX)',
+  must_be_valid_email: 'Deve essere un indirizzo email valido',
+  must_be_valid_url: 'Deve essere un URL valido (che inizia con http:// o https://)',
+  must_be_valid_zip: 'Deve essere uno ZIP valido (XXXXX o XXXXX-XXXX)',
+  must_contain_numbers_only: 'Deve contenere solo numeri',
+  must_contain_letters_only: 'Deve contenere solo lettere',
  complete_all_required_fields_to_proceed_with_identity_verification: "Compila tutti i campi obbligatori per procedere con la verifica dell'identità.",
  verify_id: 'Verifica ID',
  identity_verification: "Verifica dell'identità",
@@ -245,7 +266,7 @@ const it = {
  verification_code_is_invalid: 'Il codice di verifica non è valido',
  sign_on_the_touchscreen: 'Firma su 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',
+  by_clicking_you_agree_to_the: 'Cliccando su "{button}", accetti la',
  electronic_signature_disclosure: 'Divulgazione della Firma Elettronica',
  esignature_disclosure: 'Divulgazione della eFirma',
  minimize: 'Minimizza',
@@ -258,7 +279,7 @@ const it = {
  date: 'Data',
  number: 'Numero',
  image: 'Immagine',
-  pay: 'Pagamento',
+  pay: 'Paga',
  file: 'File',
  select: 'Seleziona',
  checkbox: 'Checkbox',
@@ -334,6 +355,13 @@ const de = {
  kba: 'KBA',
  please_upload_an_image_file: 'Bitte laden Sie eine Bilddatei hoch',
  must_be_characters_length: 'Muss {number} Zeichen lang sein',
+  must_be_valid_ssn: 'Muss eine gültige SSN sein (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Muss eine gültige EIN sein (XX-XXXXXXX)',
+  must_be_valid_email: 'Muss eine gültige E-Mail-Adresse sein',
+  must_be_valid_url: 'Muss eine gültige URL sein (beginnend mit http:// oder https://)',
+  must_be_valid_zip: 'Muss eine gültige ZIP sein (XXXXX oder XXXXX-XXXX)',
+  must_contain_numbers_only: 'Darf nur Zahlen enthalten',
+  must_contain_letters_only: 'Darf nur Buchstaben enthalten',
  complete_all_required_fields_to_proceed_with_identity_verification: 'Füllen Sie alle Pflichtfelder aus, um mit der Identitätsprüfung fortzufahren.',
  verify_id: 'ID überprüfen',
  identity_verification: 'Identitätsprüfung',
@@ -443,6 +471,13 @@ const fr = {
  kba: 'KBA',
  please_upload_an_image_file: 'Veuillez téléverser un fichier image',
  must_be_characters_length: 'Doit comporter {number} caractères',
+  must_be_valid_ssn: 'Doit être un SSN valide (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Doit être un EIN valide (XX-XXXXXXX)',
+  must_be_valid_email: 'Doit être une adresse e-mail valide',
+  must_be_valid_url: 'Doit être une URL valide (commençant par http:// ou https://)',
+  must_be_valid_zip: 'Doit être un ZIP valide (XXXXX ou XXXXX-XXXX)',
+  must_contain_numbers_only: 'Doit contenir uniquement des chiffres',
+  must_contain_letters_only: 'Doit contenir uniquement des lettres',
  complete_all_required_fields_to_proceed_with_identity_verification: "Veuillez remplir tous les champs obligatoires pour poursuivre la vérification d'identité.",
  verify_id: "Vérifier l'ID",
  identity_verification: "Vérification d'identité",
@@ -552,6 +587,13 @@ const pl = {
  kba: 'KBA',
  please_upload_an_image_file: 'Proszę przesłać plik obrazu',
  must_be_characters_length: 'Musi mieć długość {number} znaków',
+  must_be_valid_ssn: 'Musi być prawidłowym numerem SSN (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Musi być prawidłowym numerem EIN (XX-XXXXXXX)',
+  must_be_valid_email: 'Musi być prawidłowym adresem e-mail',
+  must_be_valid_url: 'Musi być prawidłowym adresem URL (zaczynającym się od http:// lub https://)',
+  must_be_valid_zip: 'Musi być prawidłowym ZIP (XXXXX lub XXXXX-XXXX)',
+  must_contain_numbers_only: 'Może zawierać tylko cyfry',
+  must_contain_letters_only: 'Może zawierać tylko litery',
  complete_all_required_fields_to_proceed_with_identity_verification: 'Uzupełnij wszystkie wymagane pola, aby kontynuować weryfikację tożsamości.',
  verify_id: 'Zweryfikuj ID',
  identity_verification: 'Weryfikacja tożsamości',
@@ -574,7 +616,7 @@ const pl = {
  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',
+  esignature_disclosure: 'informację o e-podpisie',
  minimize: 'Zminimalizuj',
  text: 'Tekst',
  already_paid: 'Już zapłacono',
@@ -642,7 +684,7 @@ const pl = {
  toggle_multiline_text: 'Przełącz Tekst Wielolinijkowy',
  email_has_been_sent: 'E-mail został wysłany',
  processing: 'Przetwarzanie',
-  pay_with_stripe: 'Płatność za pomocą Stripe',
+  pay_with_stripe: 'Zapłać za pomocą Stripe',
  reupload: 'Ponowne przesłanie',
  upload: 'Przesyłanie',
  files: 'Pliki',
@@ -661,6 +703,13 @@ const uk = {
  kba: 'KBA',
  please_upload_an_image_file: 'Будь ласка, завантажте файл зображення',
  must_be_characters_length: 'Має містити {number} символів',
+  must_be_valid_ssn: 'Має бути дійсним SSN (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Має бути дійсним EIN (XX-XXXXXXX)',
+  must_be_valid_email: 'Має бути дійсною адресою електронної пошти',
+  must_be_valid_url: 'Має бути дійсним URL (починаючи з http:// або https://)',
+  must_be_valid_zip: 'Має бути дійсним ZIP (XXXXX або XXXXX-XXXX)',
+  must_contain_numbers_only: 'Має містити лише цифри',
+  must_contain_letters_only: 'Має містити лише літери',
  complete_all_required_fields_to_proceed_with_identity_verification: "Заповніть всі обов'язкові поля, щоб продовжити перевірку особи.",
  verify_id: 'Підтвердження ідентичності',
  identity_verification: 'Ідентифікація особи',
@@ -678,12 +727,12 @@ const uk = {
  authored_by: 'Автор',
  select_a_reason: 'Виберіть причину',
  value_is_invalid: 'Значення є неправильним',
-  verification_code_is_invalid: 'Код підтвердження є неправильним',
+  verification_code_is_invalid: 'Невірний код підтвердження',
  sign_on_the_touchscreen: 'Підписати на сенсорному екрані',
  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: 'Розголошення еПідпису',
+  electronic_signature_disclosure: 'інформацією про е-підпис',
+  esignature_disclosure: 'інформацією про е-підпис',
  minimize: 'Зменшити',
  text: 'Текст',
  already_paid: 'Вже оплачено',
@@ -751,7 +800,7 @@ const uk = {
  toggle_multiline_text: 'Перемкнути Багаторядковий Текст',
  email_has_been_sent: 'Електронний лист був відправлений',
  processing: 'Обробка',
-  pay_with_strip: 'Сплатити за допомогою Stripe',
+  pay_with_stripe: 'Сплатити за допомогою Stripe',
  reupload: 'Перезавантажити',
  upload: 'Завантажити',
  files: 'Файли',
@@ -770,11 +819,18 @@ const cs = {
  kba: 'KBA',
  please_upload_an_image_file: 'Nahrajte prosím obrázkový soubor',
  must_be_characters_length: 'Musí mít délku {number} znaků',
+  must_be_valid_ssn: 'Musí být platné SSN (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Musí být platné EIN (XX-XXXXXXX)',
+  must_be_valid_email: 'Musí být platná e-mailová adresa',
+  must_be_valid_url: 'Musí být platná URL (začínající http:// nebo https://)',
+  must_be_valid_zip: 'Musí být platný ZIP (XXXXX nebo XXXXX-XXXX)',
+  must_contain_numbers_only: 'Musí obsahovat pouze čísla',
+  must_contain_letters_only: 'Musí obsahovat pouze písmena',
  complete_all_required_fields_to_proceed_with_identity_verification: 'Vyplňte všechna povinná pole, abyste mohli pokračovat v ověření identity.',
  verify_id: 'Ověřit ID',
  identity_verification: 'Ověření identity',
  complete: 'Dokončit',
-  fill_all_required_fields_to_complete: 'Please complete all mandatory fields',
+  fill_all_required_fields_to_complete: 'Vyplňte povinná pole pro dokončení',
  sign_and_complete: 'Podepsat a dokončit',
  invite: 'Pozvat',
  email: 'E-mail',
@@ -782,8 +838,8 @@ const cs = {
  reviewed: 'Zkontrolováno',
  other: 'Jiné',
  authored_by_me: 'Autorem jsem já',
-  approved_by: 'Schváleno kým',
-  reviewed_by: 'Zkontrolováno kým',
+  approved_by: 'Schválil(a)',
+  reviewed_by: 'Zkontroloval(a)',
  authored_by: 'Autorem',
  select_a_reason: 'Vyberte důvod',
  value_is_invalid: 'Hodnota je neplatná',
@@ -792,7 +848,7 @@ const cs = {
  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',
+  esignature_disclosure: 'informací o e-podpisu',
  already_paid: 'Už zaplaceno',
  minimize: 'Minimalizovat',
  text: 'Text',
@@ -860,7 +916,7 @@ const cs = {
  toggle_multiline_text: 'Přepnout Víceřádkový Text',
  email_has_been_sent: 'E-mail byl odeslán',
  processing: 'Zpracování',
-  pay_with_stripe: 'Zaplacení přes Stripe',
+  pay_with_stripe: 'Zaplatit přes Stripe',
  reupload: 'Znovu nahrát',
  upload: 'Nahrát',
  files: 'Soubory',
@@ -879,6 +935,13 @@ const pt = {
  kba: 'KBA',
  please_upload_an_image_file: 'Por favor, envie um arquivo de imagem',
  must_be_characters_length: 'Deve ter {number} caracteres',
+  must_be_valid_ssn: 'Deve ser um SSN válido (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Deve ser um EIN válido (XX-XXXXXXX)',
+  must_be_valid_email: 'Deve ser um endereço de e-mail válido',
+  must_be_valid_url: 'Deve ser uma URL válida (começando com http:// ou https://)',
+  must_be_valid_zip: 'Deve ser um ZIP válido (XXXXX ou XXXXX-XXXX)',
+  must_contain_numbers_only: 'Deve conter apenas números',
+  must_contain_letters_only: 'Deve conter apenas letras',
  complete_all_required_fields_to_proceed_with_identity_verification: 'Preencha todos os campos obrigatórios para prosseguir com a verificação de identidade.',
  verify_id: 'Verificar ID',
  identity_verification: 'Verificação de identidade',
@@ -890,18 +953,18 @@ const pt = {
  approved: 'Aprovado',
  reviewed: 'Revisado',
  other: 'Outro',
-  authored_by_me: 'Autorizado por mim',
+  authored_by_me: 'Escrito por mim',
  approved_by: 'Aprovado por',
  reviewed_by: 'Revisado por',
-  authored_by: 'Autorizado por',
+  authored_by: 'Escrito por',
  select_a_reason: 'Selecione um motivo',
  value_is_invalid: 'Valor é inválido',
  verification_code_is_invalid: 'Código de verificação é inválido',
  sign_on_the_touchscreen: 'Assinar na tela sensível',
  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',
+  by_clicking_you_agree_to_the: 'Ao clicar em "{button}", você concorda com a',
  electronic_signature_disclosure: 'Divulgação de Assinatura Eletrônica',
-  esignature_disclosure: 'Divulgação da eAssinatura',
+  esignature_disclosure: 'Informação sobre eAssinatura',
  already_paid: 'Já pago',
  minimize: 'Minimizar',
  text: 'Texto',
@@ -970,7 +1033,7 @@ const pt = {
  email_has_been_sent: 'Email enviado',
  processing: 'Processamento',
  pay_with_stripe: 'Pagar com Stripe',
-  reupload: 'Reenviar',
+  reupload: 'Recarregar',
  upload: 'Carregar',
  files: 'Arquivos',
  signature_is_too_small_or_simple_please_redraw: 'A assinatura é muito pequena ou simples. Por favor, redesenhe.',
@@ -988,6 +1051,13 @@ const he = {
  kba: 'KBA',
  please_upload_an_image_file: 'אנא העלה קובץ תמונה',
  must_be_characters_length: 'חייב להיות באורך של {number} תווים',
+  must_be_valid_ssn: 'חייב להיות SSN חוקי (XXX-XX-XXXX)',
+  must_be_valid_ein: 'חייב להיות EIN חוקי (XX-XXXXXXX)',
+  must_be_valid_email: 'חייבת להיות כתובת אימייל חוקית',
+  must_be_valid_url: 'חייבת להיות כתובת URL חוקית (המתחילה ב-http:// או https://)',
+  must_be_valid_zip: 'חייב להיות ZIP חוקי (XXXXX או XXXXX-XXXX)',
+  must_contain_numbers_only: 'חייב להכיל מספרים בלבד',
+  must_contain_letters_only: 'חייב להכיל אותיות בלבד',
  complete_all_required_fields_to_proceed_with_identity_verification: 'מלא את כל השדות הנדרשים כדי להמשיך עם אימות זהות.',
  verify_id: 'אמת מזהה',
  identity_verification: 'אימות זהות',
@@ -1010,8 +1080,8 @@ const he = {
  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: 'לקטן',
+  esignature_disclosure: 'חשיפת חתימה אלקטרונית',
+  minimize: 'מזער',
  text: 'טקסט',
  already_paid: 'כבר שולם',
  signature: 'חתימה',
@@ -1022,9 +1092,9 @@ const he = {
  number: 'מספר',
  image: 'תמונה',
  file: 'קובץ',
-  pay: 'תשלום',
+  pay: 'שלם',
  select: 'בחר',
-  checkbox: 'תיק בחירה',
+  checkbox: 'סימון',
  multiple: 'רב ערכים',
  radio: 'רדיו',
  cells: 'תאים',
@@ -1051,9 +1121,9 @@ const he = {
  download: 'הורדה',
  clear: 'נקה',
  redraw: 'צייר מחדש',
-  draw_initials: 'צייר ציוני ראשי תיבות',
+  draw_initials: 'צייר ראשי תיבות',
  type_signature_here: 'הקלד חתימה כאן',
-  type_initial_here: 'הקלד ציוני ראשי תיבות כאן',
+  type_initial_here: 'הקלד ראשי תיבות כאן',
  form_has_been_completed: 'הטופס הושלם',
  document_has_been_signed: 'המסמך נחתם!',
  documents_have_been_signed: 'המסמכים נחתמו!',
@@ -1063,7 +1133,7 @@ const he = {
  open_source_documents_software: 'תוכנה פתוחה למסמכים',
  verified_phone_number: 'אימות מספר טלפון',
  use_international_format: 'השתמש בפורמט בינלאומי: +1xxx',
-  six_digits_code: 'קוד משתמש שש ספרות',
+  six_digits_code: 'קוד שש ספרות',
  change_phone_number: 'שינוי מספר טלפון',
  sending: 'שולח',
  resend_code: 'שלח מחדש קוד',
@@ -1072,7 +1142,7 @@ const he = {
  set_today: 'קבע היום',
  toggle_multiline_text: 'שנה בין טקסט במספר שורות לטקסט בשורה אחת',
  draw_signature: 'צייר חתימה',
-  type_initial: 'הקלד ציוני ראשי תיבות',
+  type_initial: 'הקלד ראשי תיבות',
  draw: 'צייר',
  type: 'הקלד',
  type_text: 'הקלד טקסט',
@@ -1097,8 +1167,15 @@ const nl = {
  kba: 'KBA',
  please_upload_an_image_file: 'Upload alstublieft een afbeeldingsbestand',
  must_be_characters_length: 'Moet {number} tekens lang zijn',
+  must_be_valid_ssn: 'Moet een geldig SSN zijn (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Moet een geldig EIN zijn (XX-XXXXXXX)',
+  must_be_valid_email: 'Moet een geldig e-mailadres zijn',
+  must_be_valid_url: 'Moet een geldige URL zijn (beginnend met http:// of https://)',
+  must_be_valid_zip: 'Moet een geldige ZIP zijn (XXXXX of XXXXX-XXXX)',
+  must_contain_numbers_only: 'Mag alleen cijfers bevatten',
+  must_contain_letters_only: 'Mag alleen letters bevatten',
  complete_all_required_fields_to_proceed_with_identity_verification: 'Vul alle verplichte velden in om door te gaan met de identiteitsverificatie.',
-  verify_id: 'Verifiëren ID',
+  verify_id: 'ID verifiëren',
  identity_verification: 'Identiteitsverificatie',
  complete: 'Voltooien',
  fill_all_required_fields_to_complete: 'Vul alle verplichte velden in om te voltooien',
@@ -1146,7 +1223,7 @@ const nl = {
  continue: 'Doorgaan',
  sign_now: 'Nu ondertekenen',
  type_here_: 'Typ hier...',
-  optional: 'Optioneel',
+  optional: 'optioneel',
  option: 'Optie',
  appears_on: 'Verschijnt op',
  page: 'Pagina',
@@ -1170,11 +1247,11 @@ const nl = {
  powered_by: 'Aangedreven door',
  please_check_the_box_to_continue: 'Vink het vakje aan om door te gaan.',
  open_source_documents_software: 'Open source documenten software',
-  verified_phone_number: 'Geverifieerd telefoonnummer',
+  verified_phone_number: 'Telefoonnummer verifiëren',
  use_international_format: 'Gebruik internationaal formaat: +1xxx',
  six_digits_code: '6-cijferige code',
  change_phone_number: 'Wijzig telefoonnummer',
-  sending: 'Voltooien...',
+  sending: 'Verzenden...',
  resend_code: 'Code opnieuw verzenden',
  verification_code_has_been_resent: 'Verificatiecode is opnieuw verzonden via SMS',
  please_fill_all_required_fields: 'Vul alle verplichte velden in',
@@ -1206,6 +1283,13 @@ const ar = {
  kba: 'KBA',
  please_upload_an_image_file: 'يرجى تحميل ملف صورة',
  must_be_characters_length: 'يجب أن يكون الطول {number} حرفًا',
+  must_be_valid_ssn: 'يجب أن يكون SSN صالحًا (XXX-XX-XXXX)',
+  must_be_valid_ein: 'يجب أن يكون EIN صالحًا (XX-XXXXXXX)',
+  must_be_valid_email: 'يجب أن يكون عنوان بريد إلكتروني صالحًا',
+  must_be_valid_url: 'يجب أن يكون عنوان URL صالحًا (يبدأ بـ http:// أو https://)',
+  must_be_valid_zip: 'يجب أن يكون ZIP صالحًا (XXXXX أو XXXXX-XXXX)',
+  must_contain_numbers_only: 'يجب أن يحتوي على أرقام فقط',
+  must_contain_letters_only: 'يجب أن يحتوي على أحرف فقط',
  complete_all_required_fields_to_proceed_with_identity_verification: 'أكمل جميع الحقول المطلوبة للمتابعة في التحقق من الهوية.',
  verify_id: 'تحقق من الهوية',
  identity_verification: 'التحقق من الهوية',
@@ -1232,7 +1316,7 @@ const ar = {
  esignature_disclosure: 'كشف التوقيع الإلكتروني',
  text: 'نص',
  signature: 'توقيع',
-  initials: 'الاختصارات',
+  initials: 'حروف أولى',
  date: 'تاريخ',
  number: 'رقم',
  digitally_signed_by: 'تم التوقيع رقميًا بواسطة',
@@ -1269,9 +1353,9 @@ const ar = {
  download: 'تحميل',
  clear: 'مسح',
  redraw: 'إعادة الرسم',
-  draw_initials: 'ارسم الاختصارات',
+  draw_initials: 'ارسم حروف أولى',
  type_signature_here: 'اكتب التوقيع هنا',
-  type_initial_here: 'اكتب الاختصارات هنا',
+  type_initial_here: 'اكتب حروف أولى هنا',
  form_has_been_completed: 'تم إكمال النموذج!',
  document_has_been_signed: 'تم توقيع الوثيقة!',
  documents_have_been_signed: 'تم توقيع الوثائق!',
@@ -1290,13 +1374,13 @@ const ar = {
  set_today: 'تعيين اليوم',
  toggle_multiline_text: 'تبديل النصوص متعددة الأسطر',
  draw_signature: 'ارسم التوقيع',
-  type_initial: 'اكتب الاختصارات',
+  type_initial: 'اكتب حروف أولى',
  draw: 'ارسم',
  type: 'اكتب',
  type_text: 'اكتب نصًا',
  email_has_been_sent: 'تم إرسال البريد الإلكتروني',
  processing: 'جارٍ المعالجة',
-  pay_with_strip: 'الدفع بواسطة Stripe',
+  pay_with_stripe: 'الدفع بواسطة Stripe',
  reupload: 'إعادة التحميل',
  upload: 'تحميل',
  files: 'الملفات',
@@ -1315,6 +1399,13 @@ const ko = {
  kba: 'KBA',
  please_upload_an_image_file: '이미지 파일을 업로드해 주세요',
  must_be_characters_length: '{number}자여야 합니다',
+  must_be_valid_ssn: '유효한 SSN이어야 합니다 (XXX-XX-XXXX)',
+  must_be_valid_ein: '유효한 EIN이어야 합니다 (XX-XXXXXXX)',
+  must_be_valid_email: '유효한 이메일 주소여야 합니다',
+  must_be_valid_url: '유효한 URL이어야 합니다 (http:// 또는 https://로 시작)',
+  must_be_valid_zip: '유효한 ZIP이어야 합니다 (XXXXX 또는 XXXXX-XXXX)',
+  must_contain_numbers_only: '숫자만 포함해야 합니다',
+  must_contain_letters_only: '문자만 포함해야 합니다',
  complete_all_required_fields_to_proceed_with_identity_verification: '신원 확인을 진행하려면 모든 필수 필드를 작성하십시오.',
  verify_id: '아이디 확인',
  identity_verification: '신원 확인',
@@ -1343,10 +1434,10 @@ const ko = {
  signature: '서명',
  initials: '이니셜',
  date: '날짜',
-  digitally_signed_by: '디지털 서명이 완료되었습니다',
+  digitally_signed_by: '디지털 서명자:',
  reason: '이유',
  number: '숫자',
-  pay: '급여',
+  pay: '결제',
  image: '이미지',
  take_photo: '사진 찍기',
  file: '파일',
@@ -1424,6 +1515,13 @@ const ja = {
  kba: 'KBA',
  please_upload_an_image_file: '画像ファイルをアップロードしてください',
  must_be_characters_length: '{number}文字でなければなりません',
+  must_be_valid_ssn: '有効なSSNである必要があります (XXX-XX-XXXX)',
+  must_be_valid_ein: '有効なEINである必要があります (XX-XXXXXXX)',
+  must_be_valid_email: '有効なメールアドレスである必要があります',
+  must_be_valid_url: '有効なURLである必要があります (http://またはhttps://で始まる)',
+  must_be_valid_zip: '有効なZIPである必要があります (XXXXX または XXXXX-XXXX)',
+  must_contain_numbers_only: '数字のみを含む必要があります',
+  must_contain_letters_only: '文字のみを含む必要があります',
  complete_all_required_fields_to_proceed_with_identity_verification: '本人確認を進めるには、すべての必須項目を入力してください。',
  verify_id: '本人確認',
  identity_verification: '本人確認',
@@ -15,6 +15,7 @@
        </template>
      </label>
      <button
+        type="button"
        class="btn btn-outline btn-sm reupload-button"
        @click.prevent="remove"
      >
@@ -42,6 +42,7 @@
      {{ error }}
    </div>
    <button
+      type="button"
      class="base-button w-full flex justify-center submit-form-button"
      @click="restartKba"
    >
@@ -33,6 +33,7 @@
    <div v-else>
      <button
        v-if="sessionId"
+        type="button"
        disabled
        class="base-button w-full modal-save-button"
      >
@@ -47,6 +48,7 @@
      <button
        v-else
        :id="field.uuid"
+        type="button"
        class="btn bg-[#7B73FF] text-white hover:bg-[#0A2540] text-lg w-full"
        :class="{ disabled: isCreatingCheckout }"
        :disabled="isCreatingCheckout"
@@ -544,6 +544,7 @@ export default {
      this.resizeObserver = new ResizeObserver(() => {
        requestAnimationFrame(() => {
          if (!this.$refs.canvas) return
+          if (!this.$refs.canvas.parentNode?.clientWidth) return

          const { width, height } = this.$refs.canvas

@@ -586,7 +587,7 @@ export default {
    redrawCanvas (oldWidth, oldHeight) {
      const canvas = this.$refs.canvas

-      if (this.pad && !this.isTextSignature && !this.pad.isEmpty() && oldWidth > 0 && oldHeight > 0) {
+      if (this.pad && !this.isTextSignature && !this.pad.isEmpty() && oldWidth > 0 && oldHeight > 0 && canvas.width > 0 && canvas.height > 0) {
        const sx = canvas.width / oldWidth
        const sy = canvas.height / oldHeight

@@ -41,12 +41,11 @@
      :class="{ '!pr-11 -mr-10': !field.validation?.pattern }"
      :required="field.required"
      :pattern="field.validation?.pattern"
+      :title="validationMessage"
      :aria-describedby="field.description ? field.uuid + '-desc' : undefined"
      :placeholder="`${t('type_here_')}${field.required ? '' : ` (${t('optional')})`}`"
      type="text"
      :name="`values[${field.uuid}]`"
-      @invalid="validationMessage ? $event.target.setCustomValidity(validationMessage) : ''"
-      @input="validationMessage ? $event.target.setCustomValidity('') : ''"
      @focus="$emit('focus')"
    >
    <textarea
@@ -138,6 +137,17 @@ export default {
        return null
      }
    },
+    patternMessageKeys () {
+      return {
+        '^[0-9]{3}-[0-9]{2}-[0-9]{4}$': 'must_be_valid_ssn',
+        '^[0-9]{2}-[0-9]{7}$': 'must_be_valid_ein',
+        '^[^@\\s]+@[^@\\s]+\\.[^@\\s]+$': 'must_be_valid_email',
+        '^https?://.*': 'must_be_valid_url',
+        '^[0-9]{5}(?:-[0-9]{4})?$': 'must_be_valid_zip',
+        '^[0-9]+$': 'must_contain_numbers_only',
+        '^[a-zA-Z]+$': 'must_contain_letters_only'
+      }
+    },
    validationMessage () {
      if (this.field.validation?.message) {
        return this.field.validation.message
@@ -149,6 +159,10 @@ export default {
            .join('-')

        return this.t('must_be_characters_length').replace('{number}', number)
+      } else if (this.field.validation?.pattern) {
+        const key = this.patternMessageKeys[this.field.validation.pattern]
+
+        return key ? this.t(key) : ''
      } else {
        return ''
      }
@@ -50,6 +50,7 @@
      @remove="$emit('remove')"
      @scroll-to="$emit('scroll-to', $event)"
      @add-custom-field="$emit('add-custom-field')"
+      @click-title="$emit('click-title')"
    />
    <div
      ref="touchValueTarget"
@@ -113,7 +114,7 @@
          <div
            ref="textContainer"
            class="flex items-center px-0.5"
-            :style="{ color: field.preferences?.color }"
+            :style="{ color: isConditionMatch ? field.preferences?.color : '#9ca3af' }"
            :class="{ 'w-full h-full': isWFullType }"
          >
            <IconCheck
@@ -131,13 +132,13 @@
              />
            </template>
            <span
-              v-else-if="field.type === 'number' && !isValueInput && (field.default_value || field.default_value == 0)"
+              v-else-if="field.type === 'number' && !isContenteditable && (displayValue || displayValue == 0)"
              class="whitespace-pre-wrap"
-            >{{ formatNumber(field.default_value, field.preferences?.format) }}</span>
+            >{{ formatNumber(displayValue, field.preferences?.format) }}</span>
            <span
              v-else-if="field.default_value === '{{date}}'"
            >
-              {{ t('signing_date') }}
+              {{ /[HhAasz]/.test(field.preferences?.format || '') ? t('signing_date_and_time') : t('signing_date') }}
            </span>
            <div
              v-else-if="field.type === 'cells' && field.default_value"
@@ -183,12 +184,12 @@
              :contenteditable="isValueInput"
              class="whitespace-pre-wrap outline-none empty:before:content-[attr(placeholder)] before:text-base-content/30"
              :class="{ 'cursor-text': isValueInput }"
-              :placeholder="withFieldPlaceholder && !isValueInput ? defaultField?.title || field.title || field.name || defaultName : (field.type === 'date' ? field.preferences?.format || t('type_value') : t('type_value'))"
+              :placeholder="withFieldPlaceholder && !isValueInput ? defaultField?.title || field.title || field.name || defaultName : (isConditionMatch ? (field.type === 'date' ? field.preferences?.format || t('type_value') : t('type_value')) : '')"
              @blur="onDefaultValueBlur"
              @focus="selectedAreasRef.value = [area]"
              @paste.prevent="onPaste"
              @keydown.enter="onDefaultValueEnter"
-            >{{ field.default_value }}</span>
+            >{{ displayValue }}</span>
          </div>
        </div>
        <component
@@ -196,7 +197,8 @@
          v-else-if="!isCheckboxInput"
          width="100%"
          height="100%"
-          class="max-h-10 opacity-50"
+          class="opacity-50"
+          :style="{ maxHeight: isInlineSize ? '4.4cqmin' : '40px' }"
        />
      </span>
    </div>
@@ -241,6 +243,16 @@ export default {
      required: false,
      default: false
    },
+    conditionalFieldIndex: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    formulaValuesIndex: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
    isDraw: {
      type: Boolean,
      required: false,
@@ -307,7 +319,7 @@ export default {
      default: false
    }
  },
-  emits: ['start-resize', 'stop-resize', 'start-drag', 'stop-drag', 'remove', 'scroll-to', 'add-custom-field'],
+  emits: ['start-resize', 'stop-resize', 'start-drag', 'stop-drag', 'remove', 'scroll-to', 'add-custom-field', 'click-title'],
  data () {
    return {
      isContenteditable: false,
@@ -323,11 +335,27 @@ export default {
    fieldNames: FieldType.computed.fieldNames,
    fieldLabels: FieldType.computed.fieldLabels,
    fieldIcons: FieldType.computed.fieldIcons,
+    isConditionMatch () {
+      return !this.inputMode || this.conditionalFieldIndex[this.field.uuid] !== false
+    },
+    displayValue () {
+      if (this.field.preferences?.formula && this.field.type !== 'payment') {
+        const computed = this.formulaValuesIndex[this.field.uuid]
+
+        if (computed != null) {
+          return computed
+        }
+      }
+
+      return this.field.default_value
+    },
    bgClasses () {
      if (this.field.type === 'heading') {
        return 'bg-gray-50'
      } else if (this.field.type === 'strikethrough') {
        return 'bg-transparent'
+      } else if (!this.isConditionMatch) {
+        return 'bg-gray-100'
      } else {
        return this.bgColors[this.submitterIndex % this.bgColors.length]
      }
@@ -337,6 +365,8 @@ export default {
        return ''
      } else if (this.field.type === 'strikethrough') {
        return 'border-dashed border-gray-300'
+      } else if (!this.isConditionMatch) {
+        return 'border-gray-300'
      } else {
        return this.borderColors[this.submitterIndex % this.borderColors.length]
      }
@@ -390,7 +420,7 @@ export default {
      return this.basePageWidth / 612.0
    },
    isDefaultValuePresent () {
-      return this.field?.default_value || this.field?.default_value === 0
+      return this.field?.default_value || this.field?.default_value === 0 || this.displayValue || this.displayValue === 0
    },
    isSelectInput () {
      return this.inputMode && (this.field.type === 'select' || (this.field.type === 'radio' && this.field.areas?.length < 2))
@@ -399,6 +429,8 @@ export default {
      return this.inputMode && (this.field.type === 'checkbox' || (['radio', 'multiple'].includes(this.field.type) && this.area.option_uuid))
    },
    isValueInput () {
+      if (this.inputMode && this.field.preferences?.formula) return false
+
      return (this.field.type === 'heading' && this.isHeadingSelected) || this.isContenteditable ||
        (this.inputMode && (['text', 'number'].includes(this.field.type) || (this.field.type === 'date' && this.field.default_value !== '{{date}}')))
    },
@@ -511,7 +543,7 @@ export default {
      return option?.value || `${this.t('option')} ${this.field.options.indexOf(option) + 1}`
    },
    maybeToggleDefaultValue () {
-      if (!this.editable || this.isCmdKeyRef.value) {
+      if (!this.editable || this.isCmdKeyRef.value || this.field.preferences?.formula) {
        return
      }

@@ -559,6 +591,10 @@ export default {
      }
    },
    focusValueInput (e) {
+      if (this.inputMode && this.field.type === 'number' && !this.isContenteditable && !this.field.preferences?.formula) {
+        this.isContenteditable = true
+      }
+
      this.$nextTick(() => {
        if (this.$refs.defaultValue && this.$refs.defaultValue !== document.activeElement) {
          this.$refs.defaultValue.focus()
@@ -585,6 +621,10 @@ export default {
        return new Intl.NumberFormat('de-DE').format(number)
      } else if (format === 'space') {
        return new Intl.NumberFormat('fr-FR').format(number)
+      } else if (format === 'percent') {
+        return `${number}%`
+      } else if (format === 'percent_space') {
+        return `${String(number).replace('.', ',')} %`
      } else {
        return number
      }
@@ -624,6 +664,12 @@ export default {
      }
    },
    onDefaultValueBlur (e) {
+      if (this.field.preferences?.formula) {
+        this.isContenteditable = false
+
+        return
+      }
+
      const text = this.$refs.defaultValue.innerText.trim()

      this.isContenteditable = false
@@ -675,14 +721,6 @@ export default {
        }
      }
    },
-    drag (e) {
-      if (e.target.id === 'mask' && this.editable) {
-        this.isDragged = true
-
-        this.area.x = (e.offsetX - this.dragFrom.x) / e.target.clientWidth
-        this.area.y = (e.offsetY - this.dragFrom.y) / e.target.clientHeight
-      }
-    },
    startTouchDrag (e) {
      if (e.target !== this.$refs.touchTarget && e.target !== this.$refs.touchValueTarget) {
        return
@@ -728,6 +766,8 @@ export default {

      this.maybeChangeAreaPage(this.area)

+      this.clampAreaBounds(this.area)
+
      if (this.isDragged) {
        this.save()
      }
@@ -795,6 +835,8 @@ export default {

      this.maybeChangeAreaPage(this.area)

+      this.clampAreaBounds(this.area)
+
      if (this.isMoved) {
        this.save()
      }
@@ -819,18 +861,6 @@ export default {
        area.y = area.y - 1 - (16.0 / this.$parent.$refs.mask.previousSibling.offsetHeight)
      }
    },
-    stopDrag () {
-      this.$el.getRootNode().removeEventListener('mousemove', this.drag)
-      this.$el.getRootNode().removeEventListener('mouseup', this.stopDrag)
-
-      if (this.isDragged) {
-        this.save()
-      }
-
-      this.isDragged = false
-
-      this.$emit('stop-drag')
-    },
    startResize () {
      if (!this.selectedAreasRef.value.includes(this.area)) {
        this.selectedAreasRef.value = [this.area]
@@ -845,6 +875,8 @@ export default {
      this.$el.getRootNode().removeEventListener('mousemove', this.resize)
      this.$el.getRootNode().removeEventListener('mouseup', this.stopResize)

+      this.clampAreaBounds(this.area)
+
      this.$emit('stop-resize')

      this.save()
@@ -883,9 +915,17 @@ export default {
      this.$el.getRootNode().removeEventListener('touchmove', this.touchResize)
      this.$el.getRootNode().removeEventListener('touchend', this.stopTouchResize)

+      this.clampAreaBounds(this.area)
+
      this.$emit('stop-resize')

      this.save()
+    },
+    clampAreaBounds (area) {
+      area.x = Math.min(Math.max(area.x, 0), 1)
+      area.y = Math.min(Math.max(area.y, 0), 1)
+      area.w = Math.min(Math.max(area.w, 0), 1)
+      area.h = Math.min(Math.max(area.h, 0), 1)
    }
  }
 }
@@ -3,7 +3,7 @@
    v-if="field?.type && (isSelected || isNameFocus) && !isInMultiSelection"
    class="absolute bg-white rounded-t border overflow-visible whitespace-nowrap flex z-10 field-area-controls"
    style="top: -25px; height: 25px"
-    @mousedown.stop
+    @mousedown.stop="$emit('click-title')"
    @pointerdown.stop
  >
    <FieldSubmitter
@@ -279,7 +279,7 @@ export default {
      default: false
    }
  },
-  emits: ['remove', 'scroll-to', 'add-custom-field', 'change'],
+  emits: ['remove', 'scroll-to', 'add-custom-field', 'change', 'click-title'],
  data () {
    return {
      isShowFormulaModal: false,
@@ -51,6 +51,30 @@
        </div>
      </div>
    </div>
+    <div
+      v-if="beforeRevisionSnapshot"
+      class="top-1.5 sticky h-0 z-20 max-w-2xl mx-auto"
+    >
+      <div class="alert border-base-content/30 py-2 px-2.5">
+        <IconInfoCircle class="stroke-info shrink-0 w-6 h-6" />
+        <span>{{ t('viewing_revision_from').replace('{date}', formatRevisionTime(beforeRevisionSnapshot.revision.created_at)) }}</span>
+        <div>
+          <button
+            class="btn btn-sm"
+            @click.prevent="cancelRevision"
+          >
+            {{ t('cancel') }}
+          </button>
+          <button
+            v-if="editable"
+            class="btn btn-sm btn-neutral text-white"
+            @click.prevent="applyRevision"
+          >
+            {{ t('apply') }}
+          </button>
+        </div>
+      </div>
+    </div>
    <div
      v-if="$slots.buttons || withTitle"
      id="title_container"
@@ -213,6 +237,18 @@
                    <span class="whitespace-nowrap">{{ t('preferences') }}</span>
                  </a>
                </li>
+                <li v-if="withRevisionsMenu">
+                  <button
+                    class="flex space-x-2"
+                    @click.prevent="openRevisionsModal"
+                    @mouseenter="preloadRevisions"
+                  >
+                    <span class="w-6 h-6 flex-shrink-0 flex items-center justify-center">
+                      <IconHistory class="w-5 h-5" />
+                    </span>
+                    <span class="whitespace-nowrap">{{ t('revisions') }}</span>
+                  </button>
+                </li>
                <li v-if="withDownload">
                  <button
                    class="flex space-x-2"
@@ -273,6 +309,8 @@
          :data-document-uuid="item.attachment_uuid"
          :accept-file-types="acceptFileTypes"
          :with-replace-button="withUploadButton"
+          :with-google-drive="withGoogleDrive"
+          :authenticity-token="authenticityToken"
          :editable="editable"
          :dynamic-documents="dynamicDocuments"
          :with-dynamic-documents="withDynamicDocuments"
@@ -319,12 +357,17 @@
      </div>
      <div
        id="pages_container"
-        class="w-full overflow-x-hidden mt-0.5 pt-0.5"
-        :class="isMobile ? 'overflow-y-auto' : 'overflow-y-hidden md:overflow-y-auto'"
+        ref="pagesContainer"
+        class="w-full mt-0.5 pt-0.5"
+        :class="[
+          isMobile ? 'overflow-y-auto' : 'overflow-y-hidden md:overflow-y-auto',
+          zoomLevel > 1 ? 'overflow-x-auto' : 'overflow-x-hidden'
+        ]"
      >
        <div
          ref="documents"
          class="pr-3.5 pl-0.5"
+          :style="zoomLevel > 1 ? { width: `${zoomLevel * 100}%` } : null"
        >
          <template v-if="!sortedDocuments.length && (withUploadButton || withAddPageButton)">
            <Dropzone
@@ -381,6 +424,9 @@
                :document="document"
                :is-drag="!!dragField"
                :input-mode="inputMode"
+                :conditional-field-index="conditionalFieldIndex"
+                :formula-values-index="formulaValuesIndex"
+                :page-preview-format="pagePreviewFormat"
                :default-fields="[...defaultRequiredFields, ...defaultFields]"
                :allow-draw="!onlyDefinedFields || drawField || drawCustomField"
                :with-signature-id="withSignatureId"
@@ -412,6 +458,8 @@
                :with-arrows="template.schema.length > 1"
                :item="template.schema.find((item) => item.attachment_uuid === document.uuid)"
                :with-replace-button="withUploadButton"
+                :with-google-drive="withGoogleDrive"
+                :authenticity-token="authenticityToken"
                :accept-file-types="acceptFileTypes"
                :document="document"
                :template="template"
@@ -504,11 +552,14 @@
            :with-custom-fields="withCustomFields"
            :with-fields-search="withFieldsSearch"
            :default-fields="[...defaultRequiredFields, ...defaultFields]"
+            :with-custom-fields-tab="withCustomFieldsTab"
            :template="template"
            :default-required-fields="defaultRequiredFields"
+            :detect-custom-fields-index="detectCustomFieldsIndex"
            :field-types="fieldTypes"
            :with-sticky-submitters="withStickySubmitters"
            :with-fields-detection="withFieldsDetection"
+            :with-detect-existing-fields="withDetectExistingFields"
            :with-signature-id="withSignatureId"
            :with-prefillable="withPrefillable"
            :only-defined-fields="onlyDefinedFields"
@@ -591,10 +642,49 @@
        </div>
      </div>
    </Transition>
+    <Transition
+      enter-active-class="transition-all duration-200 ease-out"
+      enter-from-class="translate-y-4 opacity-0"
+      enter-to-class="translate-y-0 opacity-100"
+      leave-active-class="transition-all duration-200 ease-in"
+      leave-from-class="translate-y-0 opacity-100"
+      leave-to-class="translate-y-4 opacity-0"
+    >
+      <div
+        v-if="zoomLevel > 1"
+        class="sticky bottom-0 z-40 pointer-events-none"
+      >
+        <div class="absolute left-0 right-0 bottom-4 flex justify-center">
+          <div class="join shadow pointer-events-auto">
+            <span class="join-item bg-base-content text-white pl-2 pr-2.5 h-9 items-center text-sm font-medium cursor-default w-16 flex justify-end">
+              <span>
+                {{ Math.round(zoomLevel * 100) }}%
+              </span>
+            </span>
+            <button
+              type="button"
+              class="join-item bg-base-content text-white h-9 pl-2 pr-3 inline-flex items-center justify-center cursor-pointer hover:opacity-90 border-l border-white/20"
+              @click="zoomLevel = 1"
+            >
+              <IconX class="w-4 h-4 stroke-2" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
    <div
      id="docuseal_modal_container"
      class="modal-container"
-    />
+    >
+      <RevisionsModal
+        v-if="isRevisionsModalOpen"
+        :template="template"
+        :revisions="revisions"
+        :locale="locale"
+        @close="isRevisionsModalOpen = false"
+        @apply="onRevisionApply"
+      />
+    </div>
  </div>
 </template>

@@ -612,11 +702,22 @@ import DocumentPreview from './preview'
 import DocumentControls from './controls'
 import MobileFields from './mobile_fields'
 import FieldSubmitter from './field_submitter'
-import { IconPlus, IconUsersPlus, IconDeviceFloppy, IconChevronDown, IconEye, IconWritingSign, IconInnerShadowTop, IconInfoCircle, IconAdjustments, IconDownload } from '@tabler/icons-vue'
+import RevisionsModal from './revisions_modal'
+import { IconPlus, IconUsersPlus, IconDeviceFloppy, IconChevronDown, IconEye, IconWritingSign, IconInnerShadowTop, IconInfoCircle, IconAdjustments, IconDownload, IconHistory, IconX } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 import { ref, computed, toRaw, defineAsyncComponent } from 'vue'
 import * as i18n from './i18n'

+const isEmpty = (obj) => {
+  if (obj == null) return true
+  if (Array.isArray(obj)) return obj.length === 0
+  if (typeof obj === 'string') return obj.trim().length === 0
+  if (typeof obj === 'object') return Object.keys(obj).length === 0
+  if (obj === false) return true
+
+  return false
+}
+
 export default {
  name: 'TemplateBuilder',
  components: {
@@ -642,7 +743,10 @@ export default {
    IconDownload,
    IconAdjustments,
    IconEye,
-    IconDeviceFloppy
+    IconHistory,
+    IconDeviceFloppy,
+    IconX,
+    RevisionsModal
  },
  provide () {
    return {
@@ -654,6 +758,7 @@ export default {
      locale: this.locale,
      baseFetch: this.baseFetch,
      fieldTypes: this.fieldTypes,
+      dateFormats: this.dateFormats,
      backgroundColor: this.backgroundColor,
      withPhone: this.withPhone,
      withVerification: this.withVerification,
@@ -738,6 +843,11 @@ export default {
      required: false,
      default: false
    },
+    withDetectExistingFields: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    withCustomFields: {
      type: Boolean,
      required: false,
@@ -778,6 +888,11 @@ export default {
      required: false,
      default: () => []
    },
+    withCustomFieldsTab: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    withSelectedFieldType: {
      type: Boolean,
      required: false,
@@ -798,6 +913,11 @@ export default {
      required: false,
      default: () => []
    },
+    dateFormats: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
    defaultSubmitters: {
      type: Array,
      required: false,
@@ -808,6 +928,11 @@ export default {
      required: false,
      default: () => []
    },
+    pagePreviewFormat: {
+      type: String,
+      required: false,
+      default: '.jpg'
+    },
    acceptFileTypes: {
      type: String,
      required: false,
@@ -943,6 +1068,16 @@ export default {
      type: Boolean,
      required: false,
      default: false
+    },
+    withRevisions: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    withRevisionsMenu: {
+      type: Boolean,
+      required: false,
+      default: false
    }
  },
  data () {
@@ -953,6 +1088,7 @@ export default {
      isLoadingBlankPage: false,
      isSaving: false,
      isDetectingPageFields: false,
+      detectFieldsQueue: [],
      detectingAnalyzingProgress: null,
      detectingFieldsAddedCount: null,
      selectedSubmitter: null,
@@ -963,7 +1099,12 @@ export default {
      drawCustomField: null,
      drawOption: null,
      dragField: null,
-      isDragFile: false
+      isDragFile: false,
+      isMathLoaded: false,
+      isRevisionsModalOpen: false,
+      revisions: [],
+      beforeRevisionSnapshot: null,
+      zoomLevel: 1
    }
  },
  computed: {
@@ -973,6 +1114,13 @@ export default {
    fieldsDragFieldRef: () => ref(),
    customDragFieldRef: () => ref(),
    selectedAreasRef: () => ref([]),
+    attachmentUuidsIndex () {
+      return this.template.schema.reduce((acc, e, index) => {
+        acc[e.attachment_uuid] = index
+
+        return acc
+      }, {})
+    },
    language () {
      return this.locale.split('-')[0].toLowerCase()
    },
@@ -1003,6 +1151,8 @@ export default {
      return isMobileSafariIos || /android|iphone|ipad/i.test(navigator.userAgent)
    },
    defaultDateFormat () {
+      if (this.dateFormats.length) return this.dateFormats[0]
+
      const isUsBrowser = Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US')
      const isUsTimezone = new Intl.DateTimeFormat('en-US', { timeZoneName: 'short' }).format(new Date()).match(/\s(?:CST|CDT|PST|PDT|EST|EDT)$/)

@@ -1044,6 +1194,43 @@ export default {

      return map
    },
+    fieldsUuidIndex () {
+      return this.template.fields.reduce((acc, f) => {
+        acc[f.uuid] = f
+
+        return acc
+      }, {})
+    },
+    conditionalFieldIndex () {
+      if (!this.inputMode) return {}
+
+      const cache = {}
+
+      return this.template.fields.reduce((acc, f) => {
+        acc[f.uuid] = this.checkFieldConditions(f, cache)
+
+        return acc
+      }, {})
+    },
+    formulaValuesIndex () {
+      const formulaFields = this.template.fields.filter((f) => f.preferences?.formula && f.type !== 'payment' && this.hasFormulaDependencyValue(f))
+
+      if (!formulaFields.length) return {}
+
+      if (!this.isMathLoaded) {
+        this.loadCalculator()
+
+        return {}
+      }
+
+      return formulaFields.reduce((acc, f) => {
+        if (this.conditionalFieldIndex[f.uuid] !== false) {
+          acc[f.uuid] = this.calculateFormula(f)
+        }
+
+        return acc
+      }, {})
+    },
    isAllRequiredFieldsAdded () {
      return !this.defaultRequiredFields?.some((f) => {
        return !this.template.fields?.some((field) => field.name === f.name)
@@ -1052,6 +1239,39 @@ export default {
    selectedField () {
      return this.template.fields.find((f) => f.areas?.includes(this.lastSelectedArea))
    },
+    detectFieldsIndex () {
+      const submittersByUuid = {}
+
+      this.template.submitters.forEach((s) => {
+        submittersByUuid[s.uuid] = s
+      })
+
+      const index = {}
+
+      this.template.fields.forEach((f) => {
+        if (!f.name) return
+
+        const role = submittersByUuid[f.submitter_uuid]?.name
+        const key = [f.name, role].filter(Boolean).join(':').toLowerCase()
+
+        if (!index[key]) index[key] = f
+      })
+
+      return index
+    },
+    detectCustomFieldsIndex () {
+      const index = {}
+
+      ;[...this.customFields, ...this.defaultRequiredFields, ...this.defaultFields].forEach((c) => {
+        if (!c.name) return
+
+        const key = [c.name, c.role].filter(Boolean).join(':').toLowerCase()
+
+        if (!index[key]) index[key] = c
+      })
+
+      return index
+    },
    sortedDocuments () {
      return this.template.schema.map((item) => {
        return this.template.documents.find(doc => doc.uuid === item.attachment_uuid)
@@ -1134,6 +1354,8 @@ export default {
        this.pendingFieldAttachmentUuids.push(item.attachment_uuid)
      }
    })
+
+    this.$refs.pagesContainer.addEventListener('wheel', this.onPagesWheel, { passive: false })
  },
  unmounted () {
    document.removeEventListener('keyup', this.onKeyUp)
@@ -1141,12 +1363,140 @@ export default {

    window.removeEventListener('resize', this.onWindowResize)
    window.removeEventListener('dragleave', this.onWindowDragLeave)
+
+    this.$refs.pagesContainer.removeEventListener('wheel', this.onPagesWheel)
  },
  beforeUpdate () {
    this.documentRefs = []
  },
  methods: {
    toRaw,
+    applyCustomFieldAttributes: Fields.methods.applyCustomFieldAttributes,
+    buildExistingFields: Fields.methods.buildExistingFields,
+    async loadCalculator () {
+      if (this.math) return
+
+      const { Calculator } = await import('../submission_form/calculator')
+
+      this.math = new Calculator()
+      this.isMathLoaded = true
+    },
+    optionValue (option, index) {
+      if (option.value) {
+        return option.value
+      } else {
+        return `${this.t('option')} ${index + 1}`
+      }
+    },
+    checkFieldConditions (field, cache = {}) {
+      const cacheKey = field.uuid || field.attachment_uuid
+
+      if (cache[cacheKey] !== undefined) {
+        return cache[cacheKey]
+      }
+
+      if (field.conditions?.length) {
+        const result = field.conditions.reduce((acc, cond) => {
+          if (cond.operation === 'or') {
+            acc.push(acc.pop() || this.checkFieldCondition(cond, cache))
+          } else {
+            acc.push(this.checkFieldCondition(cond, cache))
+          }
+
+          return acc
+        }, [])
+
+        cache[cacheKey] = !result.includes(false)
+      } else {
+        cache[cacheKey] = true
+      }
+
+      return cache[cacheKey]
+    },
+    checkFieldCondition (condition, cache = {}) {
+      const field = this.fieldsUuidIndex[condition.field_uuid]
+
+      if (['not_empty', 'checked', 'equal', 'contains', 'greater_than', 'less_than'].includes(condition.action) && field && !this.checkFieldConditions(field, cache)) {
+        return false
+      }
+
+      const defaultValue = !field || isEmpty(field.default_value) ? null : field.default_value
+
+      if (['empty', 'unchecked'].includes(condition.action)) {
+        return isEmpty(defaultValue)
+      } else if (['not_empty', 'checked'].includes(condition.action)) {
+        return !isEmpty(defaultValue)
+      } else if (field?.type === 'number' && ['equal', 'not_equal', 'greater_than', 'less_than'].includes(condition.action)) {
+        const value = defaultValue
+
+        if (isEmpty(value) || isEmpty(condition.value)) return false
+
+        const actual = parseFloat(value)
+        const expected = parseFloat(condition.value)
+
+        if (Number.isNaN(actual) || Number.isNaN(expected)) return false
+
+        if (condition.action === 'equal') return Math.abs(actual - expected) < Number.EPSILON
+        if (condition.action === 'not_equal') return Math.abs(actual - expected) > Number.EPSILON
+        if (condition.action === 'greater_than') return actual > expected
+        if (condition.action === 'less_than') return actual < expected
+
+        return false
+      } else if (['equal', 'contains'].includes(condition.action) && field) {
+        if (field.options) {
+          const option = field.options.find((o) => o.uuid === condition.value)
+
+          if (option) {
+            const values = [defaultValue].flat()
+
+            return values.includes(this.optionValue(option, field.options.indexOf(option)))
+          } else {
+            return false
+          }
+        } else {
+          return [defaultValue].flat().includes(condition.value)
+        }
+      } else if (['not_equal', 'does_not_contain'].includes(condition.action) && field) {
+        if (field.options) {
+          const option = field.options.find((o) => o.uuid === condition.value)
+
+          if (option) {
+            const values = [defaultValue].flat()
+
+            return !values.includes(this.optionValue(option, field.options.indexOf(option)))
+          } else {
+            return false
+          }
+        } else {
+          return false
+        }
+      } else {
+        return true
+      }
+    },
+    normalizeFormula (formula, depth = 0) {
+      if (depth > 10) return formula
+
+      return formula.replace(/{{(.*?)}}/g, (match, uuid) => {
+        if (this.fieldsUuidIndex[uuid]?.preferences?.formula) {
+          return `(${this.normalizeFormula(this.fieldsUuidIndex[uuid].preferences.formula, depth + 1)})`
+        } else {
+          return match
+        }
+      })
+    },
+    calculateFormula (field) {
+      const transformedFormula = this.normalizeFormula(field.preferences.formula).replace(/{{(.*?)}}/g, (match, uuid) => {
+        return this.fieldsUuidIndex[uuid]?.default_value || 0.0
+      })
+
+      return this.math.evaluate(transformedFormula.toLowerCase())
+    },
+    hasFormulaDependencyValue (field) {
+      const normalized = this.normalizeFormula(field.preferences.formula)
+
+      return [...normalized.matchAll(/{{(.*?)}}/g)].some(([, uuid]) => !isEmpty(this.fieldsUuidIndex[uuid]?.default_value))
+    },
    addCustomField (field) {
      return this.$refs.fields.addCustomField(field)
    },
@@ -1426,33 +1776,26 @@ export default {
        this.save()
      }
    },
+    compareAreas (a, b) {
+      const aAttIdx = this.attachmentUuidsIndex[a.attachment_uuid]
+      const bAttIdx = this.attachmentUuidsIndex[b.attachment_uuid]
+
+      if (aAttIdx !== bAttIdx) return aAttIdx - bAttIdx
+      if (a.page !== b.page) return a.page - b.page
+
+      const aY = a.y + a.h
+      const bY = b.y + b.h
+
+      if (Math.abs(aY - bY) < 0.01) return a.x - b.x
+      if (a.h < b.h ? a.y >= b.y && aY <= bY : b.y >= a.y && bY <= aY) return a.x - b.x
+
+      return aY - bY
+    },
    findFieldInsertIndex (field) {
      if (!field.areas?.length) return -1

      const area = field.areas[0]

-      const attachmentUuidsIndex = this.template.schema.reduce((acc, e, index) => {
-        acc[e.attachment_uuid] = index
-
-        return acc
-      }, {})
-
-      const compareAreas = (a, b) => {
-        const aAttIdx = attachmentUuidsIndex[a.attachment_uuid]
-        const bAttIdx = attachmentUuidsIndex[b.attachment_uuid]
-
-        if (aAttIdx !== bAttIdx) return aAttIdx - bAttIdx
-        if (a.page !== b.page) return a.page - b.page
-
-        const aY = a.y + a.h
-        const bY = b.y + b.h
-
-        if (Math.abs(aY - bY) < 0.01) return a.x - b.x
-        if (a.h < b.h ? a.y >= b.y && aY <= bY : b.y >= a.y && bY <= aY) return a.x - b.x
-
-        return aY - bY
-      }
-
      let closestBeforeIndex = -1
      let closestBeforeArea = null
      let closestAfterIndex = -1
@@ -1461,15 +1804,15 @@ export default {
      this.template.fields.forEach((f, index) => {
        if (f.submitter_uuid === field.submitter_uuid) {
          (f.areas || []).forEach((a) => {
-            const cmp = compareAreas(a, area)
+            const cmp = this.compareAreas(a, area)

            if (cmp < 0) {
-              if (!closestBeforeArea || (compareAreas(a, closestBeforeArea) > 0 && closestBeforeIndex < index)) {
+              if (!closestBeforeArea || (this.compareAreas(a, closestBeforeArea) > 0 && closestBeforeIndex < index)) {
                closestBeforeIndex = index
                closestBeforeArea = a
              }
            } else {
-              if (!closestAfterArea || (compareAreas(a, closestAfterArea) < 0 && closestAfterIndex > index)) {
+              if (!closestAfterArea || (this.compareAreas(a, closestAfterArea) < 0 && closestAfterIndex > index)) {
                closestAfterIndex = index
                closestAfterArea = a
              }
@@ -1492,9 +1835,111 @@ export default {
        this.template.fields.push(field)
      }
    },
+    insertArea (field, area) {
+      field.areas ||= []
+
+      const insertIndex = field.areas.findIndex((a) => this.compareAreas(a, area) > 0)
+
+      if (insertIndex === -1) {
+        field.areas.push(area)
+      } else {
+        field.areas.splice(insertIndex, 0, area)
+      }
+    },
+    insertDetectedField (field) {
+      if (!this.withDetectExistingFields || !field.name) {
+        this.insertField(field)
+
+        return
+      }
+
+      const role = this.template.submitters.find((s) => s.uuid === field.submitter_uuid)?.name
+      const nameKey = field.name.toLowerCase()
+      const indexKey = [field.name, role].filter(Boolean).join(':').toLowerCase()
+
+      const existingField = this.detectFieldsIndex[indexKey]
+
+      if (existingField) {
+        existingField.areas = existingField.areas || []
+        field.areas.forEach((area) => this.insertArea(existingField, area))
+      } else {
+        const customField = this.detectCustomFieldsIndex[indexKey] || this.detectCustomFieldsIndex[nameKey]
+
+        if (customField) this.applyCustomFieldAttributes(field, customField)
+
+        this.insertField(field)
+      }
+    },
    closeDropdown () {
      document.activeElement.blur()
    },
+    preloadRevisions () {
+      this.loadRevisionsPromise ||= this.baseFetch(`/templates/${this.template.id}/versions`)
+    },
+    openRevisionsModal () {
+      this.closeDropdown()
+
+      this.loadRevisionsPromise ||= this.baseFetch(`/templates/${this.template.id}/versions`)
+
+      this.loadRevisionsPromise.then(async (resp) => {
+        this.revisions = await resp.json()
+
+        this.isRevisionsModalOpen = true
+      }).finally(() => {
+        this.loadRevisionsPromise = null
+      })
+    },
+    onRevisionApply (revision) {
+      this.beforeRevisionSnapshot = {
+        template: JSON.parse(JSON.stringify(this.template)),
+        dynamicDocuments: JSON.parse(JSON.stringify(this.dynamicDocuments)),
+        revision
+      }
+
+      const { dynamic_documents: nextDynamicDocs = [], ...nextTemplate } = revision.data
+
+      Object.assign(this.template, nextTemplate)
+
+      this.dynamicDocuments.splice(0, this.dynamicDocuments.length, ...nextDynamicDocs)
+
+      this.$nextTick(() => this.reloadDynamicDocumentContent())
+
+      this.isRevisionsModalOpen = false
+    },
+    cancelRevision () {
+      Object.assign(this.template, this.beforeRevisionSnapshot.template)
+
+      this.dynamicDocuments.splice(0, this.dynamicDocuments.length, ...this.beforeRevisionSnapshot.dynamicDocuments)
+
+      this.beforeRevisionSnapshot = null
+
+      this.$nextTick(() => this.reloadDynamicDocumentContent())
+    },
+    applyRevision () {
+      this.beforeRevisionSnapshot = null
+
+      const dynamicDocumentRefs = this.documentRefs.filter((ref) => ref.isDynamic)
+
+      dynamicDocumentRefs.forEach((ref) => ref.update())
+
+      this.rebuildVariablesSchema({ disable: false })
+
+      return Promise.all([this.save({ force: true }), ...dynamicDocumentRefs.map((ref) => ref.saveBody())])
+    },
+    reloadDynamicDocumentContent () {
+      this.documentRefs.forEach((ref) => {
+        if (ref.isDynamic) ref.reloadContent()
+      })
+    },
+    formatRevisionTime (string) {
+      return new Date(string).toLocaleString(this.locale || undefined, {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit'
+      })
+    },
    t (key) {
      return this.i18n[key] || i18n[this.language]?.[key] || i18n.en[key] || key
    },
@@ -1618,6 +2063,30 @@ export default {

      this.isBreakpointLg = this.$el.getRootNode().querySelector('div[data-v-app]').offsetWidth < breakpointLg
    },
+    onPagesWheel (event) {
+      if (!event.ctrlKey && !event.metaKey) return
+
+      event.preventDefault()
+
+      const oldZoom = this.zoomLevel
+      const nextZoom = Math.max(1, Math.min(3, oldZoom - event.deltaY * 0.006))
+
+      if (nextZoom === oldZoom) return
+
+      const rect = this.$refs.pagesContainer.getBoundingClientRect()
+      const cursorX = event.clientX - rect.left
+      const cursorY = event.clientY - rect.top
+      const ratio = nextZoom / oldZoom
+      const nextScrollLeft = (this.$refs.pagesContainer.scrollLeft + cursorX) * ratio - cursorX
+      const nextScrollTop = (this.$refs.pagesContainer.scrollTop + cursorY) * ratio - cursorY
+
+      this.zoomLevel = nextZoom
+
+      this.$nextTick(() => {
+        this.$refs.pagesContainer.scrollLeft = nextScrollLeft
+        this.$refs.pagesContainer.scrollTop = nextScrollTop
+      })
+    },
    setDocumentRefs (el) {
      if (el) {
        this.documentRefs.push(el)
@@ -1988,7 +2457,7 @@ export default {

        fieldUuidIndex[field.uuid] = newField

-        newField.areas.push(newArea)
+        this.insertArea(newField, newArea)
        newAreas.push(newArea)

        if (['radio', 'multiple'].includes(field.type) && field.options?.length) {
@@ -2101,17 +2570,7 @@ export default {
          area.y -= area.h / 2
        }

-        this.drawField.areas ||= []
-
-        const insertBeforeAreaIndex = this.drawField.areas.findIndex((a) => {
-          return a.attachment_uuid === area.attachment_uuid && a.page > area.page
-        })
-
-        if (insertBeforeAreaIndex !== -1) {
-          this.drawField.areas.splice(insertBeforeAreaIndex, 0, area)
-        } else {
-          this.drawField.areas.push(area)
-        }
+        this.insertArea(this.drawField, area)

        if (this.template.fields.indexOf(this.drawField) === -1) {
          this.insertField(this.drawField)
@@ -2122,6 +2581,11 @@ export default {

        this.selectedAreasRef.value = [area]

+        area.x = Math.min(Math.max(area.x, 0), 1)
+        area.y = Math.min(Math.max(area.y, 0), 1)
+        area.w = Math.min(Math.max(area.w, 0), 1)
+        area.h = Math.min(Math.max(area.h, 0), 1)
+
        this.save()
      } else {
        const documentRef = this.documentRefs.find((e) => e.document.uuid === area.attachment_uuid)
@@ -2252,9 +2716,7 @@ export default {
        delete field.height
      }

-      field.areas ||= []
-
-      field.areas.push(fieldArea)
+      this.insertArea(field, fieldArea)

      if (this.selectedAreasRef.value.length < 2) {
        this.selectedAreasRef.value = [fieldArea]
@@ -2324,7 +2786,7 @@ export default {
            }
          }

-          field.areas.push(fieldArea)
+          this.insertArea(field, fieldArea)
        })
      } else {
        const fieldArea = {
@@ -2753,7 +3215,11 @@ export default {

          const dynamicDocumentSaves = dynamicDocumentRefs.map((ref) => ref.saveBody())

-          Promise.all([this.save(), ...dynamicDocumentSaves]).then(() => {
+          Promise.all([this.save({ force: true }), ...dynamicDocumentSaves]).then(() => {
+            if (this.withRevisions) {
+              this.captureRevision()
+            }
+
            window.Turbo.visit(`/templates/${this.template.id}`)
          }).finally(() => {
            this.isSaving = false
@@ -2783,6 +3249,12 @@ export default {
      })
    },
    detectFieldsForPage ({ page, attachmentUuid }) {
+      if (this.isDetectingPageFields) {
+        this.detectFieldsQueue.push({ page, attachmentUuid })
+
+        return
+      }
+
      this.isDetectingPageFields = true
      this.detectingAnalyzingProgress = null
      this.detectingFieldsAddedCount = null
@@ -2821,7 +3293,11 @@ export default {
      this.baseFetch(`/templates/${this.template.id}/detect_fields`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ attachment_uuid: attachmentUuid, page })
+        body: JSON.stringify({
+          attachment_uuid: attachmentUuid,
+          page,
+          ...(this.withDetectExistingFields ? { fields: this.buildExistingFields() } : {})
+        })
      }).then(async (response) => {
        const reader = response.body.getReader()
        const decoder = new TextDecoder('utf-8')
@@ -2850,7 +3326,7 @@ export default {
                    if (!f.submitter_uuid) {
                      f.submitter_uuid = this.template.submitters[0].uuid
                    }
-                    this.insertField(f)
+                    this.insertDetectedField(f)
                  })

                  totalFieldsAdded += errorFields.length
@@ -2879,7 +3355,7 @@ export default {

                    const nonOverlappingFields = filterNonOverlappingFields(finalFields)

-                    nonOverlappingFields.forEach((f) => this.insertField(f))
+                    nonOverlappingFields.forEach((f) => this.insertDetectedField(f))
                    totalFieldsAdded += nonOverlappingFields.length

                    if (nonOverlappingFields.length) {
@@ -2917,7 +3393,7 @@ export default {

                    const nonOverlappingFields = filterNonOverlappingFields(finalFields)

-                    nonOverlappingFields.forEach((f) => this.insertField(f))
+                    nonOverlappingFields.forEach((f) => this.insertDetectedField(f))
                    totalFieldsAdded += nonOverlappingFields.length

                    if (nonOverlappingFields.length) {
@@ -2935,7 +3411,7 @@ export default {

                  const nonOverlappingFields = filterNonOverlappingFields(finalFields)

-                  nonOverlappingFields.forEach((f) => this.insertField(f))
+                  nonOverlappingFields.forEach((f) => this.insertDetectedField(f))
                  totalFieldsAdded += nonOverlappingFields.length

                  if (nonOverlappingFields.length) {
@@ -2968,11 +3444,19 @@ export default {
        setTimeout(() => {
          this.detectingFieldsAddedCount = null
        }, 1000)
+
+        if (this.detectFieldsQueue.length) {
+          this.detectFieldsForPage(this.detectFieldsQueue.shift())
+        }
      })
    },
-    save ({ force } = { force: false }) {
+    save ({ force = false } = {}) {
      this.pendingFieldAttachmentUuids = []

+      if (this.beforeRevisionSnapshot) {
+        this.beforeRevisionSnapshot = null
+      }
+
      if (this.onChange) {
        this.onChange(this.template)
      }
@@ -3007,6 +3491,12 @@ export default {
        }
      })
    },
+    captureRevision () {
+      return this.baseFetch(`/templates/${this.template.id}/versions`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' }
+      })
+    },
    onDynamicDocumentUpdate () {
      this.rebuildVariablesSchema()

@@ -6,7 +6,7 @@
      class="absolute top-0 bottom-0 right-0 left-0"
      @click.prevent="$emit('close')"
    />
-    <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
+    <div class="modal-box pt-4 pb-6 px-6 mt-20 w-full max-w-xl">
      <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
        <span class="modal-title">
          {{ t('condition') }} - {{ (defaultField ? (defaultField.title || item.title || item.name) : item.name) || buildDefaultName(item) }}
@@ -10,6 +10,9 @@
      v-if="withReplaceButton"
      :template-id="template.id"
      :accept-file-types="acceptFileTypes"
+      :authenticity-token="authenticityToken"
+      :with-google-drive="withGoogleDrive"
+      :google-drive-file-id="item.google_drive_file_id"
      @click.stop
      @success="$emit('replace', { replaceSchemaItem: item, ...$event })"
    />
@@ -73,6 +76,16 @@ export default {
      required: true,
      default: true
    },
+    withGoogleDrive: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    authenticityToken: {
+      type: String,
+      required: false,
+      default: ''
+    },
    withArrows: {
      type: Boolean,
      required: false,
@@ -5,6 +5,8 @@
      :key="image.id"
      :ref="setPageRefs"
      :input-mode="inputMode"
+      :conditional-field-index="conditionalFieldIndex"
+      :formula-values-index="formulaValuesIndex"
      :number="index"
      :editable="editable"
      :data-page="index"
@@ -64,6 +66,16 @@ export default {
      required: false,
      default: false
    },
+    conditionalFieldIndex: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    formulaValuesIndex: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
    areasIndex: {
      type: Object,
      required: false,
@@ -138,6 +150,11 @@ export default {
      required: false,
      default: false
    },
+    pagePreviewFormat: {
+      type: String,
+      required: false,
+      default: '.jpg'
+    },
    withFieldsDetection: {
      type: Boolean,
      required: false,
@@ -168,7 +185,7 @@ export default {
        return this.previewImagesIndex[i] || reactive({
          metadata: { ...lazyloadMetadata },
          id: Math.random().toString(),
-          url: this.basePreviewUrl + `/preview/${this.document.signed_key || this.document.signed_uuid || this.document.uuid}/${i}.jpg`
+          url: this.basePreviewUrl + `/preview/${this.document.signed_key || this.document.signed_uuid || this.document.uuid}/${i}${this.pagePreviewFormat}`
        })
      })
    },
@@ -62,7 +62,7 @@
          name="files[]"
          :accept="acceptFileTypes"
          multiple
-          @change="upload"
+          @change="upload()"
        >
      </form>
    </label>
@@ -183,6 +183,9 @@ export default {
        this.sectionRefs.push(ref)
      }
    },
+    reloadContent () {
+      this.sectionRefs.forEach((ref) => ref.reloadContent())
+    },
    onBeforeUnload (event) {
      if (this.saveTimer) {
        event.preventDefault()
@@ -94,6 +94,8 @@ img.ProseMirror-separator {
 }
 dynamic-variable {
  background-color: #fef3c7;
+  word-break: break-all;
+  overflow-wrap: anywhere;
 }`)

 function collectDomAttrs (dom) {
@@ -136,11 +138,12 @@ function collectSpanDomAttrs (dom) {
  return result
 }

-function createBlockNode (name, tag, content) {
+function createBlockNode (name, tag, content, extra = {}) {
  return Node.create({
    name,
    group: 'block',
    content: content || 'block+',
+    ...extra,
    addAttributes () {
      return {
        htmlAttrs: { default: {} }
@@ -194,9 +197,9 @@ const CustomHeading = Node.create({
 })

 const SectionNode = createBlockNode('section', 'section')
-const ArticleNode = createBlockNode('article', 'article')
-const HeaderNode = createBlockNode('header', 'header')
-const FooterNode = createBlockNode('footer', 'footer')
+const ArticleNode = createBlockNode('article', 'article', null, { isolating: true })
+const HeaderNode = createBlockNode('header', 'header', null, { isolating: true })
+const FooterNode = createBlockNode('footer', 'footer', null, { isolating: true })
 const DivNode = createBlockNode('div', 'div')
 const BlockquoteNode = createBlockNode('blockquote', 'blockquote')
 const PreNode = createBlockNode('pre', 'pre')
@@ -281,6 +281,9 @@ export default {
    }
  },
  methods: {
+    reloadContent () {
+      this.editor.commands.setContent(this.section.innerHTML, { emitUpdate: false })
+    },
    findAreaNodePos (areaUuid) {
      const el = this.editor.view.dom.querySelector(`[data-area-uuid="${areaUuid}"]`)

@@ -119,7 +119,7 @@
                @change="[schema.format = $event.target.value, save()]"
              >
                <option
-                  v-for="format in dateFormats"
+                  v-for="format in availableDateFormats"
                  :key="format"
                  :value="format"
                >{{ formatDate(new Date(), format) }}</option>
@@ -248,7 +248,7 @@ export default {
    FieldType,
    IconSettings
  },
-  inject: ['t', 'save', 'backgroundColor'],
+  inject: ['t', 'save', 'backgroundColor', 'dateFormats', 'locale'],
  provide () {
    return {
      fieldTypes: ['text', 'number', 'date', 'checkbox', 'radio', 'select']
@@ -308,30 +308,36 @@ export default {
      return { text: 'string', number: 'number', date: 'date', checkbox: 'boolean', radio: 'string', select: 'string' }
    },
    numberFormats () {
-      return [
-        'none',
-        'usd',
-        'eur',
-        'gbp',
-        'comma',
-        'dot',
-        'space'
-      ]
-    },
-    dateFormats () {
-      const formats = [
-        'MM/DD/YYYY',
-        'DD/MM/YYYY',
-        'YYYY-MM-DD',
-        'DD-MM-YYYY',
-        'DD.MM.YYYY',
-        'MMM D, YYYY',
-        'MMMM D, YYYY',
-        'D MMM YYYY',
-        'D MMMM YYYY'
-      ]
+      const formats = ['none', 'usd', 'eur', 'gbp', 'comma', 'dot', 'space']
+      const spaceLocales = ['fr-FR', 'es-ES', 'pt-PT', 'de-DE', 'it-IT', 'nl-NL']

-      if (Intl.DateTimeFormat().resolvedOptions().timeZone?.includes('Seoul') || navigator.language?.startsWith('ko')) {
+      formats.push(spaceLocales.includes(this.locale) ? 'percent_space' : 'percent')
+
+      const selectedFormat = this.schema.format
+
+      if (selectedFormat && !formats.includes(selectedFormat)) {
+        formats.push(selectedFormat)
+      }
+
+      return formats
+    },
+    availableDateFormats () {
+      const formats = this.dateFormats.length
+        ? [...this.dateFormats]
+        : [
+            'MM/DD/YYYY',
+            'DD/MM/YYYY',
+            'YYYY-MM-DD',
+            'DD-MM-YYYY',
+            'DD.MM.YYYY',
+            'MMM D, YYYY',
+            'MMMM D, YYYY',
+            'MMMM YYYY',
+            'D MMM YYYY',
+            'D MMMM YYYY'
+          ]
+
+      if (!this.dateFormats.length && (Intl.DateTimeFormat().resolvedOptions().timeZone?.includes('Seoul') || navigator.language?.startsWith('ko'))) {
        formats.push('YYYY년 MM월 DD일')
      }

@@ -394,6 +400,10 @@ export default {
        return new Intl.NumberFormat('de-DE').format(number)
      } else if (format === 'space') {
        return new Intl.NumberFormat('fr-FR').format(number)
+      } else if (format === 'percent') {
+        return `${number}%`
+      } else if (format === 'percent_space') {
+        return `${String(number).replace('.', ',')} %`
      } else {
        return number
      }
@@ -401,18 +411,47 @@ export default {
    formatDate (date, format) {
      const monthFormats = { M: 'numeric', MM: '2-digit', MMM: 'short', MMMM: 'long' }
      const dayFormats = { D: 'numeric', DD: '2-digit' }
-      const yearFormats = { YYYY: 'numeric', YY: '2-digit' }
+      const yearFormats = { YYYY: 'numeric', YYY: 'numeric', YY: '2-digit' }
+      const hourFormats = { H: 'numeric', HH: '2-digit', h: 'numeric', hh: '2-digit' }
+      const minuteFormats = { m: 'numeric', mm: '2-digit' }
+      const secondFormats = { s: 'numeric', ss: '2-digit' }

-      const parts = new Intl.DateTimeFormat([], {
+      const opts = {
        day: dayFormats[format.match(/D+/)],
        month: monthFormats[format.match(/M+/)],
        year: yearFormats[format.match(/Y+/)]
-      }).formatToParts(date)
+      }

-      return format
-        .replace(/D+/, parts.find((p) => p.type === 'day').value)
-        .replace(/M+/, parts.find((p) => p.type === 'month').value)
-        .replace(/Y+/, parts.find((p) => p.type === 'year').value)
+      if (format.match(/H+/)) { opts.hour = hourFormats[format.match(/H+/)[0]]; opts.hour12 = false }
+      if (format.match(/h+/)) { opts.hour = hourFormats[format.match(/h+/)[0]]; opts.hour12 = true }
+      if (/[Aa]/.test(format) && opts.hour12 === undefined) opts.hour12 = true
+      if (format.match(/m+/)) opts.minute = minuteFormats[format.match(/m+/)[0]]
+      if (format.match(/s+/)) opts.second = secondFormats[format.match(/s+/)[0]]
+      if (/z/.test(format)) opts.timeZoneName = 'short'
+
+      const partTypes = {
+        M: 'month',
+        D: 'day',
+        Y: 'year',
+        H: 'hour',
+        h: 'hour',
+        m: 'minute',
+        s: 'second',
+        z: 'timeZoneName',
+        A: 'dayPeriod',
+        a: 'dayPeriod'
+      }
+
+      const parts = new Intl.DateTimeFormat([], opts).formatToParts(date)
+
+      return format.replace(/MMMM|MMM|MM|M|DD|D|YYYY|YYY|YY|HH|hh|H|h|mm|m|ss|s|A|a|z/g, (token) => {
+        const value = parts.find((p) => p.type === partTypes[token[0]])?.value
+
+        if (token === 'A') return (value || '').toUpperCase()
+        if (token === 'a') return (value || '').toLowerCase()
+
+        return value
+      })
    },
    closeDropdown () {
      this.$el.getRootNode().activeElement.blur()
@@ -345,7 +345,7 @@ export default {
    IconMathFunction,
    FieldType
  },
-  inject: ['template', 'backgroundColor', 'selectedAreasRef', 't', 'locale', 'getFieldTypeIndex'],
+  inject: ['template', 'backgroundColor', 'selectedAreasRef', 't', 'locale', 'getFieldTypeIndex', 'dateFormats'],
  props: {
    field: {
      type: Object,
@@ -428,7 +428,8 @@ export default {

    if (this.field.type === 'date') {
      this.field.preferences.format ||=
-       ({ 'de-DE': 'DD.MM.YYYY' }[this.locale] || ((Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') || new Intl.DateTimeFormat('en-US', { timeZoneName: 'short' }).format(new Date()).match(/\s(?:CST|CDT|PST|PDT|EST|EDT)$/)) ? 'MM/DD/YYYY' : 'DD/MM/YYYY'))
+        this.dateFormats[0] ||
+        ({ 'de-DE': 'DD.MM.YYYY' }[this.locale] || ((Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') || new Intl.DateTimeFormat('en-US', { timeZoneName: 'short' }).format(new Date()).match(/\s(?:CST|CDT|PST|PDT|EST|EDT)$/)) ? 'MM/DD/YYYY' : 'DD/MM/YYYY'))
    }
  },
  methods: {
@@ -514,7 +514,7 @@ export default {
    ContextSubmenu,
    ContextModal
  },
-  inject: ['t', 'getFieldTypeIndex', 'template', 'withCustomFields', 'currencies'],
+  inject: ['t', 'getFieldTypeIndex', 'template', 'withCustomFields', 'currencies', 'dateFormats', 'locale'],
  props: {
    contextMenu: {
      type: Object,
@@ -580,7 +580,7 @@ export default {
    fieldNames: FieldType.computed.fieldNames,
    fieldLabels: FieldType.computed.fieldLabels,
    validationOptions: FieldSettings.computed.validations,
-    dateFormats: FieldSettings.computed.dateFormats,
+    availableDateFormats: FieldSettings.computed.availableDateFormats,
    numberFormats: FieldSettings.computed.numberFormats,
    prefillableFieldTypes: FieldSettings.computed.prefillableFieldTypes,
    verificationMethods: FieldSettings.computed.verificationMethods,
@@ -686,7 +686,7 @@ export default {
    },
    formatOptions () {
      switch (this.field.type) {
-        case 'date': return this.dateFormats.map(f => ({ value: f, label: this.formatDate(new Date(), f) }))
+        case 'date': return this.availableDateFormats.map(f => ({ value: f, label: this.formatDate(new Date(), f) }))
        case 'number': return this.numberFormats.map(f => ({ value: f, label: this.formatNumber(123456789.567, f) }))
        case 'signature': return this.signatureFormats.map(f => ({ value: f, label: this.t(f) }))
        default: return []
@@ -290,7 +290,7 @@
      @change="$emit('save')"
    >
      <option
-        v-for="format in dateFormats"
+        v-for="format in availableDateFormats"
        :key="format"
        :value="format"
      >
@@ -610,7 +610,7 @@ export default {
    IconTypography,
    IconX
  },
-  inject: ['template', 't'],
+  inject: ['template', 't', 'dateFormats', 'locale'],
  props: {
    field: {
      type: Object,
@@ -691,30 +691,36 @@ export default {
      }
    },
    numberFormats () {
-      return [
-        'none',
-        'usd',
-        'eur',
-        'gbp',
-        'comma',
-        'dot',
-        'space'
-      ]
-    },
-    dateFormats () {
-      const formats = [
-        'MM/DD/YYYY',
-        'DD/MM/YYYY',
-        'YYYY-MM-DD',
-        'DD-MM-YYYY',
-        'DD.MM.YYYY',
-        'MMM D, YYYY',
-        'MMMM D, YYYY',
-        'D MMM YYYY',
-        'D MMMM YYYY'
-      ]
+      const formats = ['none', 'usd', 'eur', 'gbp', 'comma', 'dot', 'space']
+      const spaceLocales = ['fr-FR', 'es-ES', 'pt-PT', 'de-DE', 'it-IT', 'nl-NL']

-      if (Intl.DateTimeFormat().resolvedOptions().timeZone?.includes('Seoul') || navigator.language?.startsWith('ko')) {
+      formats.push(spaceLocales.includes(this.locale) ? 'percent_space' : 'percent')
+
+      const selectedFormat = this.field.preferences?.format
+
+      if (selectedFormat && !formats.includes(selectedFormat)) {
+        formats.push(selectedFormat)
+      }
+
+      return formats
+    },
+    availableDateFormats () {
+      const formats = this.dateFormats.length
+        ? [...this.dateFormats]
+        : [
+            'MM/DD/YYYY',
+            'DD/MM/YYYY',
+            'YYYY-MM-DD',
+            'DD-MM-YYYY',
+            'DD.MM.YYYY',
+            'MMM D, YYYY',
+            'MMMM D, YYYY',
+            'MMMM YYYY',
+            'D MMM YYYY',
+            'D MMMM YYYY'
+          ]
+
+      if (!this.dateFormats.length && (Intl.DateTimeFormat().resolvedOptions().timeZone?.includes('Seoul') || navigator.language?.startsWith('ko'))) {
        formats.push('YYYY년 MM월 DD일')
      }

@@ -783,17 +789,27 @@ export default {
    },
    copyToAllPages (field) {
      const areaString = JSON.stringify(field.areas[0])
+      const newAreas = []
+      const existingAreasIndex = field.areas.reduce((acc, area) => {
+        acc[`${area.attachment_uuid}-${area.page}`] = area
+
+        return acc
+      }, {})
+
+      this.template.schema.forEach((item) => {
+        const attachment = this.template.documents.find((d) => d.uuid === item.attachment_uuid)

-      this.template.documents.forEach((attachment) => {
        const numberOfPages = attachment.metadata?.pdf?.number_of_pages || attachment.preview_images.length

        for (let page = 0; page <= numberOfPages - 1; page++) {
-          if (!field.areas.find((area) => area.attachment_uuid === attachment.uuid && area.page === page)) {
-            field.areas.push({ ...JSON.parse(areaString), attachment_uuid: attachment.uuid, page })
-          }
+          const existing = existingAreasIndex[`${attachment.uuid}-${page}`]
+
+          newAreas.push(existing || { ...JSON.parse(areaString), attachment_uuid: attachment.uuid, page })
        }
      })

+      field.areas = newAreas
+
      this.$emit('scroll-to', this.field.areas[this.field.areas.length - 1])

      this.$emit('save')
@@ -811,6 +827,10 @@ export default {
        return new Intl.NumberFormat('de-DE').format(number)
      } else if (format === 'space') {
        return new Intl.NumberFormat('fr-FR').format(number)
+      } else if (format === 'percent') {
+        return `${number}%`
+      } else if (format === 'percent_space') {
+        return `${String(number).replace('.', ',')} %`
      } else {
        return number
      }
@@ -819,33 +839,49 @@ export default {
      return pattern?.match(/^\.{(?<min>\d+),(?<max>\d+)?}$/)?.groups || null
    },
    formatDate (date, format) {
-      const monthFormats = {
-        M: 'numeric',
-        MM: '2-digit',
-        MMM: 'short',
-        MMMM: 'long'
-      }
+      const monthFormats = { M: 'numeric', MM: '2-digit', MMM: 'short', MMMM: 'long' }
+      const dayFormats = { D: 'numeric', DD: '2-digit' }
+      const yearFormats = { YYYY: 'numeric', YYY: 'numeric', YY: '2-digit' }
+      const hourFormats = { H: 'numeric', HH: '2-digit', h: 'numeric', hh: '2-digit' }
+      const minuteFormats = { m: 'numeric', mm: '2-digit' }
+      const secondFormats = { s: 'numeric', ss: '2-digit' }

-      const dayFormats = {
-        D: 'numeric',
-        DD: '2-digit'
-      }
-
-      const yearFormats = {
-        YYYY: 'numeric',
-        YY: '2-digit'
-      }
-
-      const parts = new Intl.DateTimeFormat([], {
+      const opts = {
        day: dayFormats[format.match(/D+/)],
        month: monthFormats[format.match(/M+/)],
        year: yearFormats[format.match(/Y+/)]
-      }).formatToParts(date)
+      }

-      return format
-        .replace(/D+/, parts.find((p) => p.type === 'day').value)
-        .replace(/M+/, parts.find((p) => p.type === 'month').value)
-        .replace(/Y+/, parts.find((p) => p.type === 'year').value)
+      if (format.match(/H+/)) { opts.hour = hourFormats[format.match(/H+/)[0]]; opts.hour12 = false }
+      if (format.match(/h+/)) { opts.hour = hourFormats[format.match(/h+/)[0]]; opts.hour12 = true }
+      if (/[Aa]/.test(format) && opts.hour12 === undefined) opts.hour12 = true
+      if (format.match(/m+/)) opts.minute = minuteFormats[format.match(/m+/)[0]]
+      if (format.match(/s+/)) opts.second = secondFormats[format.match(/s+/)[0]]
+      if (/z/.test(format)) opts.timeZoneName = 'short'
+
+      const partTypes = {
+        M: 'month',
+        D: 'day',
+        Y: 'year',
+        H: 'hour',
+        h: 'hour',
+        m: 'minute',
+        s: 'second',
+        z: 'timeZoneName',
+        A: 'dayPeriod',
+        a: 'dayPeriod'
+      }
+
+      const parts = new Intl.DateTimeFormat([], opts).formatToParts(date)
+
+      return format.replace(/MMMM|MMM|MM|M|DD|D|YYYY|YYY|YY|HH|hh|H|h|mm|m|ss|s|A|a|z/g, (token) => {
+        const value = parts.find((p) => p.type === partTypes[token[0]])?.value
+
+        if (token === 'A') return (value || '').toUpperCase()
+        if (token === 'a') return (value || '').toLowerCase()
+
+        return value
+      })
    }
  }
 }
@@ -147,7 +147,7 @@
      >
        <a
          href="#"
-          class="flex px-2 group justify-between items-center"
+          class="flex px-2 text-sm group justify-between items-center"
          :class="{ 'active': submitter === selectedSubmitter, 'py-0.5': submitters.length > 8 }"
          @click.prevent="selectSubmitter(submitter)"
        >
@@ -198,7 +198,7 @@
      >
        <a
          href="#"
-          class="flex px-2"
+          class="flex px-2 text-sm"
          @click.prevent="addSubmitter"
        >
          <IconUserPlus
@@ -65,13 +65,33 @@
      @set-draw="$emit('set-draw', $event)"
    />
  </div>
-  <div v-if="!isShowVariables && submitterDefaultFields.length && editable">
-    <hr class="mb-2">
+  <div
+    v-if="editable && withCustomFieldsTab"
+    class="tabs w-full mb-1.5 custom-fields-tabs"
+  >
+    <a
+      class="tab tab-bordered w-1/2 border-base-300 custom-fields-tab"
+      :class="{ 'tab-active': !showCustomTab }"
+      :style="{ '--tab-border': showCustomTab ? '0px' : '0.5px' }"
+      @click="setFieldsTab('default')"
+    >{{ t('default') }}</a>
+    <a
+      class="tab tab-bordered w-1/2 border-base-300 custom-fields-tab"
+      :class="{ 'tab-active': showCustomTab }"
+      :style="{ '--tab-border': showCustomTab ? '0.5px' : '0px' }"
+      @click="setFieldsTab('custom')"
+    >{{ t('custom') }}</a>
+  </div>
+  <div v-if="!isShowVariables && submitterDefaultFields.length && editable && (!withCustomFieldsTab || showCustomTab)">
+    <hr
+      v-if="!withCustomFieldsTab"
+      class="mb-1.5"
+    >
    <template v-if="isShowFieldSearch">
      <input
        v-model="defaultFieldsSearch"
        :placeholder="t('search_field')"
-        class="input input-ghost input-xs px-0 text-base mb-2 !outline-0 !rounded bg-transparent w-full"
+        class="input input-ghost input-xs px-0 text-base mb-1.5 !outline-0 !rounded bg-transparent w-full"
      >
      <hr class="mb-2">
    </template>
@@ -218,7 +238,7 @@
    </div>
  </div>
  <div
-    v-if="!isShowVariables && editable && !onlyDefinedFields && (!showCustomTab || (!customFields.length && !newCustomField))"
+    v-if="!isShowVariables && editable && !onlyDefinedFields && (!showCustomTab || (!customFields.length && !newCustomField)) && (!withCustomFieldsTab || !showCustomTab)"
    id="field-types-grid"
    class="grid grid-cols-3 gap-1 pb-2 fields-grid"
  >
@@ -363,7 +383,7 @@
    class="rounded py-2 px-4 w-full border border-dashed border-base-300"
  >
    <div class="text-center text-sm">
-      {{ t('start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document') }}
+      {{ t('start_a_quick_tour_to_learn_how_to_create_and_send_your_first_document') }}
    </div>
    <div class="flex justify-center">
      <label
@@ -418,6 +438,11 @@ export default {
      required: false,
      default: false
    },
+    withCustomFieldsTab: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    withFieldsSearch: {
      type: Boolean,
      required: false,
@@ -428,6 +453,11 @@ export default {
      required: false,
      default: false
    },
+    withDetectExistingFields: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    withSignatureId: {
      type: Boolean,
      required: false,
@@ -495,6 +525,11 @@ export default {
      type: Object,
      required: true
    },
+    detectCustomFieldsIndex: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
    showTourStartForm: {
      type: Boolean,
      required: false,
@@ -557,7 +592,8 @@ export default {
    },
    submitterDefaultFields () {
      return this.defaultFields.filter((f) => {
-        return !this.submitterFields.find((field) => field.name === f.name) && (!f.role || f.role === this.selectedSubmitter.name)
+        return (this.withCustomFieldsTab ? true : !this.submitterFields.find((field) => field.name === f.name)) &&
+          (!f.role || f.role === this.selectedSubmitter.name)
      })
    },
    filteredSubmitterDefaultFields () {
@@ -656,6 +692,78 @@ export default {
        this.customFields.splice(0, this.customFields.length, ...fields)
      })
    },
+    buildExistingFields () {
+      const existing = []
+      const seen = new Set()
+
+      const submittersByUuid = this.template.submitters.reduce((acc, s) => {
+        acc[s.uuid] = s
+
+        return acc
+      }, {})
+
+      const add = (field, role) => {
+        if (!field?.name) return
+
+        const key = field.name.toLowerCase() + ':' + (role || '').toLowerCase()
+
+        if (seen.has(key)) return
+
+        seen.add(key)
+
+        const item = { name: field.name, type: field.type || 'text' }
+
+        if (role) item.role = role
+
+        const optionValues = Array.isArray(field.options)
+          ? field.options.map((o) => (typeof o === 'string' ? o : o?.value)).filter(Boolean)
+          : []
+
+        if (optionValues.length) item.options = optionValues
+
+        existing.push(item)
+      }
+
+      this.template.fields.forEach((f) => add(f, submittersByUuid[f.submitter_uuid]?.name))
+      this.defaultRequiredFields.forEach((f) => add(f, f.role))
+      this.defaultFields.forEach((f) => add(f, f.role))
+      this.customFields.forEach((f) => add(f, f.role))
+
+      return existing
+    },
+    enrichDetectedField (field) {
+      if (!this.withDetectExistingFields || !field.name) return field
+
+      const role = this.template.submitters.find((s) => s.uuid === field.submitter_uuid)?.name
+      const nameKey = field.name.toLowerCase()
+      const indexKey = [field.name, role].filter(Boolean).join(':').toLowerCase()
+
+      const customField = this.detectCustomFieldsIndex[indexKey] || this.detectCustomFieldsIndex[nameKey]
+
+      if (customField) this.applyCustomFieldAttributes(field, customField)
+
+      return field
+    },
+    applyCustomFieldAttributes (field, customField) {
+      const skipKeys = new Set(['uuid', 'areas', 'submitter_uuid', 'conditions', 'prefillable', 'role'])
+
+      Object.entries(customField).forEach(([key, value]) => {
+        if (skipKeys.has(key)) return
+        if (value === null || value === undefined) return
+
+        if (key === 'options') {
+          if (Array.isArray(value) && !Array.isArray(field.options)) {
+            field.options = value.map((o) => (
+              typeof o === 'string' ? { value: o, uuid: v4() } : { ...o, uuid: v4() }
+            ))
+          }
+        } else if (value && typeof value === 'object' && !Array.isArray(value)) {
+          field[key] = JSON.parse(JSON.stringify(value))
+        } else {
+          field[key] = value
+        }
+      })
+    },
    detectFields () {
      const fields = []

@@ -665,7 +773,10 @@ export default {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
-        }
+        },
+        ...(this.withDetectExistingFields
+          ? { body: JSON.stringify({ fields: this.buildExistingFields() }) }
+          : {})
      }).then(async (response) => {
        const reader = response.body.getReader()
        const decoder = new TextDecoder('utf-8')
@@ -687,7 +798,7 @@ export default {

              if (data.error) {
                if ((data.fields || fields).length) {
-                  this.template.fields = data.fields || fields
+                  this.template.fields = (data.fields || fields).map((f) => this.enrichDetectedField(f))

                  this.save()
                } else {
@@ -705,7 +816,7 @@ export default {
                  this.$emit('select-submitter', this.template.submitters[0])
                }

-                this.template.fields = data.fields || fields
+                this.template.fields = (data.fields || fields).map((f) => this.enrichDetectedField(f))

                this.save()

@@ -0,0 +1,165 @@
+<template>
+  <Teleport :to="modalContainerEl">
+    <div
+      class="modal modal-open items-start !animate-none overflow-y-auto"
+    >
+      <div
+        class="absolute top-0 bottom-0 right-0 left-0"
+        @click.prevent="$emit('close')"
+      />
+      <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
+        <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
+          <span class="modal-title">
+            Google Drive
+          </span>
+          <a
+            href="#"
+            class="text-xl modal-close-button"
+            @click.prevent="$emit('close')"
+          >&times;</a>
+        </div>
+        <div>
+          <form
+            v-if="showOauthButton"
+            method="post"
+            :action="oauthPath"
+            @submit="isConnectClicked = true"
+          >
+            <input
+              type="hidden"
+              name="authenticity_token"
+              :value="authenticityToken"
+              autocomplete="off"
+            >
+            <button
+              class="btn bg-white btn-outline w-full text-base font-medium mt-4"
+              data-turbo="false"
+              type="submit"
+              :disabled="isConnectClicked"
+            >
+              <span v-if="isConnectClicked">
+                <span class="flex items-center justify-center space-x-2">
+                  <IconInnerShadowTop class="animate-spin" />
+                  <span>{{ t('submitting') }}...</span>
+                </span>
+              </span>
+              <span v-else>
+                <span class="flex items-center justify-center space-x-2">
+                  <IconBrandGoogleDrive />
+                  <span>{{ t('connect_google_drive') }}</span>
+                </span>
+              </span>
+            </button>
+          </form>
+          <div
+            v-else
+            class="relative"
+          >
+            <iframe
+              class="border border-base-300 rounded-lg"
+              style="width: 100%; height: 440px; background: white;"
+              src="/template_google_drive"
+            />
+            <div v-if="loading">
+              <div
+                class="bg-white absolute top-0 bottom-0 left-0 right-0 opacity-80 rounded-lg"
+                style="margin: 1px"
+              />
+              <div class="absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center">
+                <IconInnerShadowTop class="animate-spin" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script>
+import { IconBrandGoogleDrive, IconInnerShadowTop } from '@tabler/icons-vue'
+
+export default {
+  name: 'GoogleDrivePickerModal',
+  components: {
+    IconBrandGoogleDrive,
+    IconInnerShadowTop
+  },
+  inject: ['t'],
+  props: {
+    templateId: {
+      type: [Number, String],
+      required: true
+    },
+    authenticityToken: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    reopenAfterAuth: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    modalContainerEl: {
+      type: [Object, String],
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ['close', 'picked', 'update:loading'],
+  data () {
+    return {
+      isConnectClicked: false,
+      showOauthButton: false
+    }
+  },
+  computed: {
+    oauthPath () {
+      const redir = this.reopenAfterAuth
+        ? `/templates/${this.templateId}/edit?google_drive_open=1`
+        : `/templates/${this.templateId}/edit`
+
+      const params = {
+        access_type: 'offline',
+        include_granted_scopes: 'true',
+        prompt: 'consent',
+        scope: [
+          'https://www.googleapis.com/auth/userinfo.email',
+          'https://www.googleapis.com/auth/drive.file'
+        ].join(' '),
+        oauth_data: new URLSearchParams({ redir }).toString()
+      }
+
+      return `/auth/google_oauth2?${new URLSearchParams(params).toString()}`
+    }
+  },
+  mounted () {
+    window.addEventListener('message', this.messageHandler)
+  },
+  beforeUnmount () {
+    window.removeEventListener('message', this.messageHandler)
+  },
+  methods: {
+    messageHandler (event) {
+      if (event.data.type === 'google-drive-files-picked') {
+        const files = event.data.files || []
+
+        if (!files.length) return
+
+        this.$emit('update:loading', true)
+        this.$emit('picked', files)
+      } else if (event.data.type === 'google-drive-picker-loaded') {
+        this.$emit('update:loading', false)
+      } else if (event.data.type === 'google-drive-picker-request-oauth') {
+        this.showOauthButton = true
+        this.$emit('update:loading', false)
+      }
+    }
+  }
+}
+</script>
@@ -70,6 +70,7 @@ const en = {
  sign_yourself: 'Sign Yourself',
  set_signing_date: 'Set signing date',
  signing_date: 'Signing Date',
+  signing_date_and_time: 'Signing Date and Time',
  send: 'Send',
  remove: 'Remove',
  edit: 'Edit',
@@ -199,7 +200,7 @@ const en = {
  learn_more: 'Learn more',
  and: 'and',
  or: 'or',
-  start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: 'Start a quick tour to learn how to create and send your first document',
+  start_a_quick_tour_to_learn_how_to_create_and_send_your_first_document: 'Start a quick tour to learn how to create and send your first document',
  start_tour: 'Start Tour',
  or_add_from: 'Or add from',
  sync: 'Sync',
@@ -214,7 +215,13 @@ const en = {
  align_bottom: 'Align Bottom',
  fields_selected: '{count} Fields Selected',
  field_added: '{count} Field Added',
-  fields_added: '{count} Fields Added'
+  fields_added: '{count} Fields Added',
+  revisions: 'Revisions',
+  apply: 'Apply',
+  no_revisions_yet: 'No revisions yet',
+  viewing_revision_from: 'Viewing revision from {date}',
+  connect_google_drive: 'Connect Google Drive',
+  submitting: 'Submitting'
 }

 const es = {
@@ -238,7 +245,7 @@ const es = {
  min: 'Mín',
  max: 'Máx',
  date_signed: 'Fecha actual',
-  fuente: 'Fuente',
+  font: 'Fuente',
  party: 'Parte',
  method: 'Método',
  reorder_fields: 'Reordenar campos',
@@ -271,6 +278,7 @@ const es = {
  with_logo: 'Con logotipo',
  description: 'Descripción',
  signing_date: 'Fecha de Firma',
+  signing_date_and_time: 'Fecha y Hora de Firma',
  display_title: 'Título de visualización',
  unchecked: 'No marcado',
  price: 'Precio',
@@ -296,7 +304,7 @@ const es = {
  set_signing_date: 'Establecer fecha de firma',
  are_you_sure_: '¿Estás seguro?',
  sign_yourself: 'Firma tú mismo',
-  checked: 'Seleccionado',
+  checked: 'Marcado',
  current_date: 'Fecha actual',
  send: 'Enviar',
  remove: 'Eliminar',
@@ -334,16 +342,16 @@ const es = {
  eighth_party: 'Octava Parte',
  ninth_party: 'Novena Parte',
  tenth_party: 'Décima Parte',
-  eleventh_party: 'Undécimo Partido',
-  twelfth_party: 'Duodécimo Partido',
-  thirteenth_party: 'Decimotercer Partido',
-  fourteenth_party: 'Catorceavo Partido',
-  fifteenth_party: 'Quinceavo Partido',
-  sixteenth_party: 'Dieciséisavo Partido',
-  seventeenth_party: 'Diecisieteavo Partido',
-  eighteenth_party: 'Dieciochoavo Partido',
-  nineteenth_party: 'Decimonovena Fiesta',
-  twentieth_party: 'Vigésima Fiesta',
+  eleventh_party: 'Undécima Parte',
+  twelfth_party: 'Duodécima Parte',
+  thirteenth_party: 'Decimotercera Parte',
+  fourteenth_party: 'Decimocuarta Parte',
+  fifteenth_party: 'Decimoquinta Parte',
+  sixteenth_party: 'Decimosexta Parte',
+  seventeenth_party: 'Decimoséptima Parte',
+  eighteenth_party: 'Decimoctava Parte',
+  nineteenth_party: 'Decimonovena Parte',
+  twentieth_party: 'Vigésima Parte',
  draw: 'Dibujar',
  add: 'Agregar',
  text: 'Texto',
@@ -418,7 +426,7 @@ const es = {
  learn_more: 'Aprende más',
  and: 'y',
  or: 'o',
-  start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: 'Inicia una guía rápida para aprender a crear y enviar tu primer documento.',
+  start_a_quick_tour_to_learn_how_to_create_and_send_your_first_document: 'Inicia una guía rápida para aprender a crear y enviar tu primer documento.',
  start_tour: 'Iniciar guía',
  or_add_from: 'O agregar desde',
  sync: 'Sincronizar',
@@ -433,7 +441,13 @@ const es = {
  align_bottom: 'Alinear abajo',
  fields_selected: '{count} Campos Seleccionados',
  field_added: '{count} Campo Añadido',
-  fields_added: '{count} Campos Añadidos'
+  fields_added: '{count} Campos Añadidos',
+  revisions: 'Revisiones',
+  apply: 'Aplicar',
+  no_revisions_yet: 'Aún no hay revisiones',
+  viewing_revision_from: 'Viendo revisión del {date}',
+  connect_google_drive: 'Conectar Google Drive',
+  submitting: 'Enviando'
 }

 const it = {
@@ -456,15 +470,15 @@ const it = {
  length: 'Lunghezza',
  min: 'Min',
  max: 'Max',
-  date_signed: 'Data attuale',
+  date_signed: 'Data corrente',
  font: 'Carattere',
  party: 'Parte',
  method: 'Metodo',
  reorder_fields: 'Riordina i campi',
  verify_id: 'Verifica ID',
  obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more: 'Ottieni una firma elettronica qualificata (QeS) con il fornitore di fiducia. Clicca per saperne di più.',
-  ricorrente: 'Ricorrente',
-  una_volta: 'Una volta',
+  recurrent: 'Ricorrente',
+  one_off: 'Una tantum',
  editable: 'Modificabile',
  search_field: 'Campo di ricerca',
  field_not_found: 'Campo non trovato',
@@ -508,6 +522,7 @@ const it = {
  sign_yourself: 'Firma te stesso',
  set_signing_date: 'Imposta data di firma',
  signing_date: 'Data di firma',
+  signing_date_and_time: 'Data e ora di firma',
  send: 'Invia',
  remove: 'Rimuovi',
  edit: 'Modifica',
@@ -522,7 +537,7 @@ const it = {
  drawn: 'Disegnato',
  drawn_or_typed: 'Disegnato o Digitato',
  drawn_or_upload: 'Disegnato o Caricato',
-  upload: 'Caricare',
+  upload: 'Carica',
  formula: 'Formula',
  typed: 'Digitato',
  draw_field_on_the_document: 'Disegnare un campo sul documento',
@@ -637,7 +652,7 @@ const it = {
  learn_more: 'Scopri di più',
  and: 'e',
  or: 'o',
-  start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: 'Inizia un tour rapido per imparare a creare e inviare il tuo primo documento.',
+  start_a_quick_tour_to_learn_how_to_create_and_send_your_first_document: 'Inizia un tour rapido per imparare a creare e inviare il tuo primo documento.',
  start_tour: 'Inizia il tour',
  or_add_from: 'O aggiungi da',
  sync: 'Sincronizza',
@@ -652,7 +667,13 @@ const it = {
  align_bottom: 'Allinea in basso',
  fields_selected: '{count} Campi Selezionati',
  field_added: '{count} Campo Aggiunto',
-  fields_added: '{count} Campi Aggiunti'
+  fields_added: '{count} Campi Aggiunti',
+  revisions: 'Revisioni',
+  apply: 'Applica',
+  no_revisions_yet: 'Nessuna revisione ancora',
+  viewing_revision_from: 'Visualizzazione revisione del {date}',
+  connect_google_drive: 'Connetti Google Drive',
+  submitting: 'Invio'
 }

 const pt = {
@@ -664,7 +685,7 @@ const pt = {
  analyzing_: 'Analisando...',
  download: 'Baixar',
  downloading_: 'Baixando...',
-  view: 'Visualizar',
+  view: 'Ver',
  payment_link: 'Link de pagamento',
  strikeout: 'Tachado',
  draw_strikethrough_the_document: 'Desenhe uma linha de tachado no documento',
@@ -676,13 +697,13 @@ const pt = {
  min: 'Mín',
  max: 'Máx',
  date_signed: 'Data atual',
-  fonte: 'Fonte',
+  font: 'Fonte',
  party: 'Parte',
  method: 'Método',
  reorder_fields: 'Reorganizar campos',
  verify_id: 'Verificar ID',
  obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more: 'Obtenha a assinatura eletrônica qualificada (QeS) com o provedor confiável. Clique para saber mais.',
-  recurrent: 'Recurrente',
+  recurrent: 'Recorrente',
  one_off: 'Único',
  editable: 'Editável',
  search_field: 'Campo de busca',
@@ -710,6 +731,7 @@ const pt = {
  description: 'Descrição',
  display_title: 'Título de exibição',
  signing_date: 'Data da Assinatura',
+  signing_date_and_time: 'Data e Hora da Assinatura',
  unchecked: 'Não marcado',
  price: 'Preço',
  equal: 'Igual',
@@ -748,7 +770,7 @@ const pt = {
  processing_: 'Processando...',
  add_pdf_documents_or_images: 'Adicionar documentos PDF ou imagens',
  add_documents_or_images: 'Adicionar documentos ou imagens',
-  add_a_new_document: 'Ajouter un nouveau document',
+  add_a_new_document: 'Adicionar um novo documento',
  replace_existing_document: 'Substituir documento existente',
  clone_and_replace_documents: 'Clonar e substituir documentos',
  required: 'Obrigatório',
@@ -856,7 +878,7 @@ const pt = {
  learn_more: 'Saiba mais',
  and: 'e',
  or: 'ou',
-  start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: 'Comece um tour rápido para aprender a criar e enviar seu primeiro documento.',
+  start_a_quick_tour_to_learn_how_to_create_and_send_your_first_document: 'Comece um tour rápido para aprender a criar e enviar seu primeiro documento.',
  start_tour: 'Iniciar tour',
  or_add_from: 'Ou adicionar de',
  sync: 'Sincronizar',
@@ -871,7 +893,13 @@ const pt = {
  align_bottom: 'Alinhar à parte inferior',
  fields_selected: '{count} Campos Selecionados',
  field_added: '{count} Campo Adicionado',
-  fields_added: '{count} Campos Adicionados'
+  fields_added: '{count} Campos Adicionados',
+  revisions: 'Revisões',
+  apply: 'Aplicar',
+  no_revisions_yet: 'Nenhuma revisão ainda',
+  viewing_revision_from: 'Visualizando revisão de {date}',
+  connect_google_drive: 'Conectar Google Drive',
+  submitting: 'Enviando'
 }

 const fr = {
@@ -896,7 +924,7 @@ const fr = {
  max: 'Max',
  font: 'Police',
  party: 'Partie',
-  date_signed: 'Date de signature',
+  date_signed: 'Date du jour',
  method: 'Méthode',
  reorder_fields: 'Réorganiser les champs',
  verify_id: "Vérifier l'ID",
@@ -946,6 +974,7 @@ const fr = {
  sign_yourself: 'Signer vous-même',
  set_signing_date: 'Définir la date de signature',
  signing_date: 'Date de signature',
+  signing_date_and_time: 'Date et heure de signature',
  send: 'Envoyer',
  remove: 'Supprimer',
  edit: 'Modifier',
@@ -1075,7 +1104,7 @@ const fr = {
  learn_more: 'En savoir plus',
  and: 'et',
  or: 'ou',
-  start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: 'Commencez une visite rapide pour apprendre à créer et à envoyer votre premier document',
+  start_a_quick_tour_to_learn_how_to_create_and_send_your_first_document: 'Commencez une visite rapide pour apprendre à créer et à envoyer votre premier document',
  start_tour: 'Démarrer',
  or_add_from: 'Ou ajouter depuis',
  sync: 'Synchroniser',
@@ -1090,7 +1119,13 @@ const fr = {
  align_bottom: 'Aligner en bas',
  fields_selected: '{count} Champs Sélectionnés',
  field_added: '{count} Champ Ajouté',
-  fields_added: '{count} Champs Ajoutés'
+  fields_added: '{count} Champs Ajoutés',
+  revisions: 'Révisions',
+  apply: 'Appliquer',
+  no_revisions_yet: 'Aucune révision pour le moment',
+  viewing_revision_from: 'Affichage de la révision du {date}',
+  connect_google_drive: 'Connecter Google Drive',
+  submitting: 'Soumission'
 }

 const de = {
@@ -1115,7 +1150,7 @@ const de = {
  max: 'Max.',
  font: 'Schriftart',
  party: 'Partei',
-  date_signed: 'Unterzeichnungsdatum',
+  date_signed: 'Aktuelles Datum',
  method: 'Methode',
  reorder_fields: 'Felder neu anordnen',
  verify_id: 'ID überprüfen',
@@ -1165,6 +1200,7 @@ const de = {
  sign_yourself: 'Selbst unterschreiben',
  set_signing_date: 'Unterzeichnungsdatum festlegen',
  signing_date: 'Unterzeichnungsdatum',
+  signing_date_and_time: 'Unterzeichnungsdatum und -uhrzeit',
  send: 'Senden',
  remove: 'Entfernen',
  edit: 'Bearbeiten',
@@ -1294,7 +1330,7 @@ const de = {
  learn_more: 'Mehr erfahren',
  and: 'und',
  or: 'oder',
-  start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: 'Starten Sie eine Kurztour, um zu lernen, wie Sie Ihr erstes Dokument erstellen und versenden.',
+  start_a_quick_tour_to_learn_how_to_create_and_send_your_first_document: 'Starten Sie eine Kurztour, um zu lernen, wie Sie Ihr erstes Dokument erstellen und versenden.',
  start_tour: 'Tour starten',
  or_add_from: 'Oder hinzufügen aus',
  sync: 'Synchronisieren',
@@ -1309,7 +1345,13 @@ const de = {
  align_bottom: 'Unten ausrichten',
  fields_selected: '{count} Felder Ausgewählt',
  field_added: '{count} Feld Hinzugefügt',
-  fields_added: '{count} Felder Hinzugefügt'
+  fields_added: '{count} Felder Hinzugefügt',
+  revisions: 'Revisionen',
+  apply: 'Anwenden',
+  no_revisions_yet: 'Noch keine Revisionen',
+  viewing_revision_from: 'Ansicht der Revision vom {date}',
+  connect_google_drive: 'Google Drive verbinden',
+  submitting: 'Übermittlung'
 }

 const nl = {
@@ -1334,7 +1376,7 @@ const nl = {
  max: 'Max',
  font: 'Lettertype',
  party: 'Partij',
-  date_signed: 'Datum ondertekend',
+  date_signed: 'Huidige datum',
  method: 'Methode',
  reorder_fields: 'Velden herschikken',
  verify_id: 'ID verifiëren',
@@ -1384,6 +1426,7 @@ const nl = {
  sign_yourself: 'Zelf ondertekenen',
  set_signing_date: 'Ondertekeningsdatum instellen',
  signing_date: 'Ondertekeningsdatum',
+  signing_date_and_time: 'Ondertekeningsdatum en -tijd',
  send: 'Verzenden',
  remove: 'Verwijderen',
  edit: 'Bewerken',
@@ -1513,7 +1556,7 @@ const nl = {
  learn_more: 'Meer informatie',
  and: 'en',
  or: 'of',
-  start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: 'Start een korte rondleiding om te leren hoe u uw eerste document maakt en verzendt',
+  start_a_quick_tour_to_learn_how_to_create_and_send_your_first_document: 'Start een korte rondleiding om te leren hoe u uw eerste document maakt en verzendt',
  start_tour: 'Rondleiding starten',
  or_add_from: 'Of toevoegen van',
  sync: 'Synchroniseren',
@@ -1528,7 +1571,13 @@ const nl = {
  align_bottom: 'Onder uitlijnen',
  fields_selected: '{count} Velden Geselecteerd',
  field_added: '{count} Veld Toegevoegd',
-  fields_added: '{count} Velden Toegevoegd'
+  fields_added: '{count} Velden Toegevoegd',
+  revisions: 'Revisies',
+  apply: 'Toepassen',
+  no_revisions_yet: 'Nog geen revisies',
+  viewing_revision_from: 'Revisie van {date} bekijken',
+  connect_google_drive: 'Verbind Google Drive',
+  submitting: 'Indienen'
 }

 export { en, es, it, pt, fr, de, nl }
@@ -11,7 +11,7 @@
      :src="image.url"
      :width="width"
      :height="height"
-      class="rounded"
+      class="w-full h-full rounded"
      @load="onImageLoad"
    >
    <div
@@ -37,6 +37,8 @@
        :ref="setAreaRefs"
        :area="item.area"
        :input-mode="inputMode"
+        :conditional-field-index="conditionalFieldIndex"
+        :formula-values-index="formulaValuesIndex"
        :page-width="width"
        :page-height="height"
        :field="item.field"
@@ -55,6 +57,7 @@
        @scroll-to="$emit('scroll-to', $event)"
        @add-custom-field="$emit('add-custom-field', $event)"
        @contextmenu="openAreaContextMenu($event, item.area, item.field)"
+        @click-title="closeContextMenu"
      />
      <FieldArea
        v-for="(area, index) in newAreas"
@@ -180,6 +183,16 @@ export default {
      required: false,
      default: false
    },
+    conditionalFieldIndex: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    formulaValuesIndex: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
    defaultFields: {
      type: Array,
      required: false,
@@ -143,8 +143,8 @@
        >
          <input
            type="hidden"
-            name="state"
-            :value="oauthState"
+            name="oauth_data"
+            :value="oauthData"
            autocomplete="off"
          >
          <input
@@ -334,7 +334,7 @@ export default {
    authenticityToken () {
      return document.querySelector('meta[name="csrf-token"]')?.content
    },
-    oauthState () {
+    oauthData () {
      const params = new URLSearchParams('')

      params.set('redir', document.location.href)
@@ -36,7 +36,10 @@
              v-if="withReplaceButton"
              :template-id="template.id"
              :accept-file-types="acceptFileTypes"
-              class="opacity-0 group-hover:opacity-100"
+              :authenticity-token="authenticityToken"
+              :with-google-drive="withGoogleDrive"
+              :google-drive-file-id="item.google_drive_file_id"
+              class="opacity-0 group-hover:opacity-100 has-[label:focus]:opacity-100"
              @click.stop
              @success="$emit('replace', { replaceSchemaItem: item, ...$event })"
            />
@@ -232,6 +235,16 @@ export default {
      required: true,
      default: true
    },
+    withGoogleDrive: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    authenticityToken: {
+      type: String,
+      required: false,
+      default: ''
+    },
    dynamicDocuments: {
      type: Array,
      required: true
@@ -1,37 +1,106 @@
 <template>
-  <label
-    :for="inputId"
-    class="btn btn-neutral btn-xs text-white transition-none replace-document-button"
-    :class="{ 'opacity-100': isLoading }"
-  >
-    {{ message }}
+  <div class="inline-flex items-stretch replace-document-control">
+    <label
+      :for="inputId"
+      class="btn btn-neutral btn-xs transition-none replace-document-button"
+      :class="{ 'opacity-100': isLoading, 'pr-0': showGoogleDriveDropdown && !isLoading }"
+    >
+      <div class="flex items-center justify-between w-full h-full">
+        <span class="flex items-center space-x-2 w-full justify-center text-white">
+          {{ message }}
+        </span>
+        <span
+          v-if="showGoogleDriveDropdown && !isLoading"
+          class="dropdown dropdown-end inline h-full"
+          style="width: 30px"
+        >
+          <label
+            tabindex="0"
+            class="flex items-center h-full cursor-pointer text-white"
+          >
+            <IconChevronDown class="w-4 h-4 flex-shrink-0" />
+          </label>
+          <ul
+            tabindex="0"
+            :style="{ backgroundColor }"
+            class="dropdown-content p-2 mt-2 shadow menu text-base mb-1 rounded-box text-right !text-base-content"
+          >
+            <li>
+              <button
+                type="button"
+                @click.prevent="openGoogleDriveModal"
+              >
+                <IconBrandGoogleDrive class="w-4 h-4 flex-shrink-0" />
+                <span class="whitespace-nowrap text-sm normal-case font-medium">Google Drive</span>
+              </button>
+            </li>
+          </ul>
+        </span>
+      </div>
+    </label>
    <form
      ref="form"
      class="hidden"
    >
+      <input
+        v-if="googleDriveFile"
+        name="google_drive_file_ids[]"
+        :value="googleDriveFile.id"
+      >
      <input
        :id="inputId"
        ref="input"
        name="files[]"
        type="file"
        :accept="acceptFileTypes"
-        @change="upload"
+        @change="upload()"
      >
    </form>
-  </label>
+    <GoogleDrivePickerModal
+      v-if="showGoogleDriveModal"
+      v-model:loading="isLoadingGoogleDrive"
+      :template-id="templateId"
+      :authenticity-token="authenticityToken"
+      :modal-container-el="modalContainerEl"
+      @close="showGoogleDriveModal = false"
+      @picked="onGoogleDrivePicked"
+    />
+  </div>
 </template>

 <script>
 import Upload from './upload'
+import GoogleDrivePickerModal from './google_drive_picker_modal'
+import { IconChevronDown, IconBrandGoogleDrive } from '@tabler/icons-vue'

 export default {
  name: 'ReplaceDocument',
-  inject: ['baseFetch', 't'],
+  components: {
+    IconChevronDown,
+    IconBrandGoogleDrive,
+    GoogleDrivePickerModal
+  },
+  inject: ['baseFetch', 't', 'backgroundColor'],
  props: {
    templateId: {
      type: [Number, String],
      required: true
    },
+    authenticityToken: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    googleDriveFileId: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    withGoogleDrive: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    acceptFileTypes: {
      type: String,
      required: false,
@@ -41,16 +110,25 @@ export default {
  emits: ['success'],
  data () {
    return {
-      isLoading: false
+      isLoading: false,
+      isLoadingGoogleDrive: true,
+      googleDriveFile: null,
+      showGoogleDriveModal: false
    }
  },
  computed: {
    inputId () {
      return 'el' + Math.random().toString(32).split('.')[1]
    },
+    showGoogleDriveDropdown () {
+      return this.withGoogleDrive && !!this.googleDriveFileId
+    },
    uploadUrl () {
      return `/templates/${this.templateId}/documents`
    },
+    modalContainerEl () {
+      return this.$el.getRootNode().querySelector('#docuseal_modal_container')
+    },
    message () {
      if (this.isLoading) {
        return this.t('uploading_')
@@ -60,7 +138,27 @@ export default {
    }
  },
  methods: {
-    upload: Upload.methods.upload
+    upload: Upload.methods.upload,
+    openGoogleDriveModal () {
+      this.showGoogleDriveModal = true
+      this.isLoadingGoogleDrive = true
+      this.googleDriveFile = null
+      this.$el.getRootNode().activeElement?.blur()
+    },
+    onGoogleDrivePicked (files) {
+      this.googleDriveFile = files[0]
+
+      this.$nextTick(() => {
+        this.upload({ path: `/templates/${this.templateId}/google_drive_documents` }).then((resp) => {
+          if (resp.ok) {
+            this.showGoogleDriveModal = false
+          }
+        }).finally(() => {
+          this.isLoadingGoogleDrive = false
+          this.googleDriveFile = null
+        })
+      })
+    }
  }
 }
 </script>
@@ -0,0 +1,104 @@
+<template>
+  <div class="modal modal-open items-start !animate-none overflow-y-auto">
+    <div
+      class="absolute top-0 bottom-0 right-0 left-0"
+      @click.prevent="$emit('close')"
+    />
+    <div class="modal-box pt-4 pb-6 mt-20 w-full">
+      <div class="flex justify-between items-center border-b pb-2 mb-3 font-medium">
+        <span>{{ t('revisions') }}</span>
+        <a
+          href="#"
+          class="text-xl"
+          @click.prevent="$emit('close')"
+        >&times;</a>
+      </div>
+      <ul class="space-y-1.5">
+        <li
+          v-for="revision in revisions"
+          :key="revision.id"
+        >
+          <button
+            type="button"
+            class="w-full text-left rounded-lg p-3 border border-dashed border-base-200 transition-colors disabled:cursor-default hover:bg-base-200 hover:border-base-200"
+            :disabled="loadingId !== null"
+            @click="viewRevision(revision.id)"
+          >
+            <div class="flex justify-between items-center gap-2">
+              <div class="flex flex-col">
+                <span>{{ formatDate(revision.created_at) }}</span>
+                <span class="-ml-0.5 flex items-center space-x-1 text-xs text-base-content/60 mt-0.5">
+                  <IconUser class="w-3.5 h-3.5 flex-shrink-0" />
+                  <span class="truncate">{{ revision.author.full_name || revision.author.email }}</span>
+                </span>
+              </div>
+              <span class="btn btn-sm btn-neutral text-white pointer-events-none flex-shrink-0">
+                <IconInnerShadowTop
+                  v-if="loadingId === revision.id"
+                  class="w-4 h-4 animate-spin"
+                />
+                <span v-else>{{ t('view') }}</span>
+              </span>
+            </div>
+          </button>
+        </li>
+        <li
+          v-if="!revisions.length"
+          class="py-4 text-center text-base-content/60"
+        >
+          {{ t('no_revisions_yet') }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import { IconUser, IconInnerShadowTop } from '@tabler/icons-vue'
+
+export default {
+  name: 'RevisionsModal',
+  components: { IconUser, IconInnerShadowTop },
+  inject: ['t', 'baseFetch'],
+  props: {
+    template: {
+      type: Object,
+      required: true
+    },
+    revisions: {
+      type: Array,
+      required: true
+    },
+    locale: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['close', 'apply'],
+  data () {
+    return {
+      loadingId: null
+    }
+  },
+  methods: {
+    viewRevision (id) {
+      if (this.loadingId !== null) return
+
+      this.loadingId = id
+
+      this.baseFetch(`/templates/${this.template.id}/versions/${id}`)
+        .then((r) => r.json())
+        .then((revision) => { this.$emit('apply', revision) })
+        .finally(() => { this.loadingId = null })
+    },
+    formatDate (string) {
+      return new Date(string).toLocaleString(this.locale || undefined, {
+        month: 'long',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit'
+      })
+    }
+  }
+}
+</script>
@@ -61,87 +61,16 @@
        </span>
      </div>
    </label>
-    <Teleport
+    <GoogleDrivePickerModal
      v-if="showGoogleDriveModal"
-      :to="modalContainerEl"
-    >
-      <div
-        class="modal modal-open items-start !animate-none overflow-y-auto"
-      >
-        <div
-          class="absolute top-0 bottom-0 right-0 left-0"
-          @click.prevent="showGoogleDriveModal = false"
-        />
-        <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
-          <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
-            <span class="modal-title">
-              Google Drive
-            </span>
-            <a
-              href="#"
-              class="text-xl modal-close-button"
-              @click.prevent="showGoogleDriveModal = false"
-            >&times;</a>
-          </div>
-          <div>
-            <form
-              v-if="showGoogleDriveOauthButton"
-              method="post"
-              :action="googleDriveOauthPath"
-              @submit="isConnectGoogleDriveClicked = true"
-            >
-              <input
-                type="hidden"
-                name="authenticity_token"
-                :value="authenticityToken"
-                autocomplete="off"
-              >
-              <button
-                id="gdrive_oauth_button"
-                class="btn bg-white btn-outline w-full text-base font-medium mt-4"
-                data-turbo="false"
-                type="submit"
-                :disabled="isConnectGoogleDriveClicked"
-              >
-                <span v-if="isConnectGoogleDriveClicked">
-                  <span class="flex items-center justify-center space-x-2">
-                    <IconInnerShadowTop class="animate-spin" />
-                    <span class="">Submitting...</span>
-                  </span>
-                </span>
-                <span
-                  v-else
-                >
-                  <span class="flex items-center justify-center space-x-2">
-                    <IconBrandGoogleDrive />
-                    <span>Connect Google Drive</span>
-                  </span>
-                </span>
-              </button>
-            </form>
-            <div
-              v-else
-              class="relative"
-            >
-              <iframe
-                class="border border-base-300 rounded-lg"
-                style="width: 100%; height: 440px; background: white;"
-                src="/template_google_drive"
-              />
-              <div v-if="isLoadingGoogleDrive">
-                <div
-                  class="bg-white absolute top-0 bottom-0 left-0 right-0 opacity-80 rounded-lg"
-                  style="margin: 1px"
-                />
-                <div class="absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center">
-                  <IconInnerShadowTop class="animate-spin" />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Teleport>
+      v-model:loading="isLoadingGoogleDrive"
+      :template-id="templateId"
+      :authenticity-token="authenticityToken"
+      :modal-container-el="modalContainerEl"
+      :reopen-after-auth="true"
+      @close="showGoogleDriveModal = false"
+      @picked="onGoogleDrivePicked"
+    />
    <form
      ref="form"
      class="hidden"
@@ -159,7 +88,7 @@
        type="file"
        :accept="acceptFileTypes"
        multiple
-        @change="upload"
+        @change="upload()"
      >
    </form>
  </div>
@@ -167,6 +96,66 @@

 <script>
 import { IconUpload, IconInnerShadowTop, IconChevronDown, IconBrandGoogleDrive } from '@tabler/icons-vue'
+import GoogleDrivePickerModal from './google_drive_picker_modal'
+
+function convertImage (sourceFile, targetType, quality) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+
+    reader.onload = function (event) {
+      const img = new Image()
+
+      img.onload = function () {
+        const canvas = document.createElement('canvas')
+        const ctx = canvas.getContext('2d')
+
+        canvas.width = img.width
+        canvas.height = img.height
+        ctx.drawImage(img, 0, 0)
+        canvas.toBlob(function (blob) {
+          const ext = targetType === 'image/jpeg' ? '.jpg' : '.png'
+          const newFile = new File([blob], sourceFile.name.replace(/\.\w+$/, ext), { type: targetType })
+          resolve(newFile)
+        }, targetType, quality)
+      }
+
+      img.onerror = () => reject(new Error(`browser cannot decode ${sourceFile.type || sourceFile.name}`))
+
+      img.src = event.target.result
+    }
+    reader.onerror = reject
+    reader.readAsDataURL(sourceFile)
+  })
+}
+
+async function convertImagesInInput (input) {
+  if (!input.files || input.files.length === 0) return
+
+  const dt = new DataTransfer()
+  let didConvert = false
+
+  for (const file of Array.from(input.files)) {
+    let converted = file
+
+    try {
+      if (['image/bmp', 'image/vnd.microsoft.icon', 'image/svg+xml', 'image/gif'].includes(file.type)) {
+        converted = await convertImage(file, 'image/png')
+        didConvert = true
+      } else if (['image/heic', 'image/heif', 'image/heic-sequence', 'image/heif-sequence', 'image/avif', 'image/avif-sequence', 'image/webp'].includes(file.type)) {
+        converted = await convertImage(file, 'image/jpeg', 0.9)
+        didConvert = true
+      }
+    } catch (e) {
+      alert(e.message)
+    }
+
+    dt.items.add(converted)
+  }
+
+  if (didConvert) {
+    input.files = dt.files
+  }
+}

 export default {
  name: 'DocumentsUpload',
@@ -174,7 +163,8 @@ export default {
    IconUpload,
    IconInnerShadowTop,
    IconChevronDown,
-    IconBrandGoogleDrive
+    IconBrandGoogleDrive,
+    GoogleDrivePickerModal
  },
  inject: ['baseFetch', 't', 'backgroundColor'],
  props: {
@@ -202,11 +192,9 @@ export default {
  data () {
    return {
      isLoading: false,
-      isConnectGoogleDriveClicked: false,
-      isLoadingGoogleDrive: false,
+      isLoadingGoogleDrive: true,
      googleDriveFiles: [],
-      showGoogleDriveModal: false,
-      showGoogleDriveOauthButton: false
+      showGoogleDriveModal: false
    }
  },
  computed: {
@@ -219,69 +207,43 @@ export default {
    uploadUrl () {
      return `/templates/${this.templateId}/documents`
    },
-    googleDriveOauthPath () {
-      const params = {
-        access_type: 'offline',
-        include_granted_scopes: 'true',
-        prompt: 'consent',
-        scope: [
-          'https://www.googleapis.com/auth/userinfo.email',
-          'https://www.googleapis.com/auth/drive.file'
-        ].join(' '),
-        state: new URLSearchParams({
-          redir: `/templates/${this.templateId}/edit?google_drive_open=1`
-        }).toString()
-      }
-
-      const query = new URLSearchParams(params).toString()
-
-      return `/auth/google_oauth2?${query}`
-    },
    modalContainerEl () {
      return this.$el.getRootNode().querySelector('#docuseal_modal_container')
    }
  },
  mounted () {
-    window.addEventListener('message', this.messageHandler)
-
    if (this.queryParams.get('google_drive_open') === '1') {
      this.openGoogleDriveModal()

      window.history.replaceState({}, document.title, window.location.pathname)
    }
  },
-  beforeUnmount () {
-    window.removeEventListener('message', this.messageHandler)
-  },
  methods: {
    openGoogleDriveModal () {
      this.showGoogleDriveModal = true
      this.isLoadingGoogleDrive = true
    },
-    messageHandler (event) {
-      if (event.data.type === 'google-drive-files-picked') {
-        this.googleDriveFiles = event.data.files || []
+    onGoogleDrivePicked (files) {
+      this.googleDriveFiles = files

-        this.$nextTick(() => {
-          this.isLoadingGoogleDrive = true
-
-          this.upload({ path: `/templates/${this.templateId}/google_drive_documents` }).then((resp) => {
-            if (resp.ok) {
-              this.showGoogleDriveModal = false
-            }
-          }).finally(() => {
-            this.isLoadingGoogleDrive = false
-          })
+      this.$nextTick(() => {
+        this.upload({ path: `/templates/${this.templateId}/google_drive_documents` }).then((resp) => {
+          if (resp.ok) {
+            this.showGoogleDriveModal = false
+          }
+        }).finally(() => {
+          this.isLoadingGoogleDrive = false
+          this.googleDriveFiles = []
        })
-      } else if (event.data.type === 'google-drive-picker-loaded') {
-        this.isLoadingGoogleDrive = false
-      } else if (event.data.type === 'google-drive-picker-request-oauth') {
-        this.showGoogleDriveOauthButton = true
-      }
+      })
    },
    async upload ({ path } = {}) {
      this.isLoading = true

+      if (this.$refs.input) {
+        await convertImagesInInput(this.$refs.input)
+      }
+
      return this.baseFetch(path || this.uploadUrl, {
        method: 'POST',
        headers: { Accept: 'application/json' },
@@ -3,8 +3,6 @@
 class ReindexSearchEntryJob
  include Sidekiq::Job

-  InvalidFormat = Class.new(StandardError)
-
  def perform(params = {})
    entry = SearchEntry.find_or_initialize_by(params.slice('record_type', 'record_id'))

@@ -30,13 +30,12 @@ class SendFormCompletedWebhookRequestJob
                                                attempt:,
                                                data: Submitters::SerializeForWebhook.call(submitter))

-    if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
-       (!Docuseal.multitenant? || submitter.account.account_configs.exists?(key: :plan))
-      SendFormCompletedWebhookRequestJob.perform_in((2**attempt).minutes, {
-                                                      **params,
-                                                      'attempt' => attempt + 1,
-                                                      'last_status' => resp&.status.to_i
-                                                    })
-    end
+    return if attempt > MAX_ATTEMPTS || (resp && resp.status.to_i < 400)
+
+    SendFormCompletedWebhookRequestJob.perform_in((2**attempt).minutes, {
+                                                    **params,
+                                                    'attempt' => attempt + 1,
+                                                    'last_status' => resp&.status.to_i
+                                                  })
  end
 end
@@ -28,13 +28,12 @@ class SendFormDeclinedWebhookRequestJob
                                                attempt:,
                                                data: Submitters::SerializeForWebhook.call(submitter))

-    if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
-       (!Docuseal.multitenant? || submitter.account.account_configs.exists?(key: :plan))
-      SendFormDeclinedWebhookRequestJob.perform_in((2**attempt).minutes, {
-                                                     **params,
-                                                     'attempt' => attempt + 1,
-                                                     'last_status' => resp&.status.to_i
-                                                   })
-    end
+    return if attempt > MAX_ATTEMPTS || (resp && resp.status.to_i < 400)
+
+    SendFormDeclinedWebhookRequestJob.perform_in((2**attempt).minutes, {
+                                                   **params,
+                                                   'attempt' => attempt + 1,
+                                                   'last_status' => resp&.status.to_i
+                                                 })
  end
 end
@@ -28,13 +28,12 @@ class SendFormStartedWebhookRequestJob
                                                attempt:,
                                                data: Submitters::SerializeForWebhook.call(submitter))

-    if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
-       (!Docuseal.multitenant? || submitter.account.account_configs.exists?(key: :plan))
-      SendFormStartedWebhookRequestJob.perform_in((2**attempt).minutes, {
-                                                    **params,
-                                                    'attempt' => attempt + 1,
-                                                    'last_status' => resp&.status.to_i
-                                                  })
-    end
+    return if attempt > MAX_ATTEMPTS || (resp && resp.status.to_i < 400)
+
+    SendFormStartedWebhookRequestJob.perform_in((2**attempt).minutes, {
+                                                  **params,
+                                                  'attempt' => attempt + 1,
+                                                  'last_status' => resp&.status.to_i
+                                                })
  end
 end
@@ -28,13 +28,12 @@ class SendFormViewedWebhookRequestJob
                                                attempt:,
                                                data: Submitters::SerializeForWebhook.call(submitter))

-    if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
-       (!Docuseal.multitenant? || submitter.account.account_configs.exists?(key: :plan))
-      SendFormViewedWebhookRequestJob.perform_in((2**attempt).minutes, {
-                                                   **params,
-                                                   'attempt' => attempt + 1,
-                                                   'last_status' => resp&.status.to_i
-                                                 })
-    end
+    return if attempt > MAX_ATTEMPTS || (resp && resp.status.to_i < 400)
+
+    SendFormViewedWebhookRequestJob.perform_in((2**attempt).minutes, {
+                                                 **params,
+                                                 'attempt' => attempt + 1,
+                                                 'last_status' => resp&.status.to_i
+                                               })
  end
 end
@@ -26,13 +26,12 @@ class SendSubmissionArchivedWebhookRequestJob
                                                attempt:,
                                                data: submission.as_json(only: %i[id archived_at]))

-    if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
-       (!Docuseal.multitenant? || submission.account.account_configs.exists?(key: :plan))
-      SendSubmissionArchivedWebhookRequestJob.perform_in((2**attempt).minutes, {
-                                                           **params,
-                                                           'attempt' => attempt + 1,
-                                                           'last_status' => resp&.status.to_i
-                                                         })
-    end
+    return if attempt > MAX_ATTEMPTS || (resp && resp.status.to_i < 400)
+
+    SendSubmissionArchivedWebhookRequestJob.perform_in((2**attempt).minutes, {
+                                                         **params,
+                                                         'attempt' => attempt + 1,
+                                                         'last_status' => resp&.status.to_i
+                                                       })
  end
 end
@@ -26,13 +26,12 @@ class SendSubmissionCompletedWebhookRequestJob
                                                attempt:,
                                                data: Submissions::SerializeForApi.call(submission))

-    if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
-       (!Docuseal.multitenant? || submission.account.account_configs.exists?(key: :plan))
-      SendSubmissionCompletedWebhookRequestJob.perform_in((2**attempt).minutes, {
-                                                            **params,
-                                                            'attempt' => attempt + 1,
-                                                            'last_status' => resp&.status.to_i
-                                                          })
-    end
+    return if attempt > MAX_ATTEMPTS || (resp && resp.status.to_i < 400)
+
+    SendSubmissionCompletedWebhookRequestJob.perform_in((2**attempt).minutes, {
+                                                          **params,
+                                                          'attempt' => attempt + 1,
+                                                          'last_status' => resp&.status.to_i
+                                                        })
  end
 end
@@ -26,13 +26,12 @@ class SendSubmissionCreatedWebhookRequestJob
                                                attempt:,
                                                data: Submissions::SerializeForApi.call(submission))

-    if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
-       (!Docuseal.multitenant? || submission.account.account_configs.exists?(key: :plan))
-      SendSubmissionCreatedWebhookRequestJob.perform_in((2**attempt).minutes, {
-                                                          **params,
-                                                          'attempt' => attempt + 1,
-                                                          'last_status' => resp&.status.to_i
-                                                        })
-    end
+    return if attempt > MAX_ATTEMPTS || (resp && resp.status.to_i < 400)
+
+    SendSubmissionCreatedWebhookRequestJob.perform_in((2**attempt).minutes, {
+                                                        **params,
+                                                        'attempt' => attempt + 1,
+                                                        'last_status' => resp&.status.to_i
+                                                      })
  end
 end
@@ -26,13 +26,12 @@ class SendSubmissionExpiredWebhookRequestJob
                                                attempt:,
                                                data: Submissions::SerializeForApi.call(submission))

-    if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
-       (!Docuseal.multitenant? || submission.account.account_configs.exists?(key: :plan))
-      SendSubmissionExpiredWebhookRequestJob.perform_in((2**attempt).minutes, {
-                                                          **params,
-                                                          'attempt' => attempt + 1,
-                                                          'last_status' => resp&.status.to_i
-                                                        })
-    end
+    return if attempt > MAX_ATTEMPTS || (resp && resp.status.to_i < 400)
+
+    SendSubmissionExpiredWebhookRequestJob.perform_in((2**attempt).minutes, {
+                                                        **params,
+                                                        'attempt' => attempt + 1,
+                                                        'last_status' => resp&.status.to_i
+                                                      })
  end
 end
@@ -26,13 +26,12 @@ class SendTemplateArchivedWebhookRequestJob
                                                attempt:,
                                                data: template.as_json(only: %i[id archived_at]))

-    if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
-       (!Docuseal.multitenant? || template.account.account_configs.exists?(key: :plan))
-      SendTemplateArchivedWebhookRequestJob.perform_in((2**attempt).minutes, {
-                                                         **params,
-                                                         'attempt' => attempt + 1,
-                                                         'last_status' => resp&.status.to_i
-                                                       })
-    end
+    return if attempt > MAX_ATTEMPTS || (resp && resp.status.to_i < 400)
+
+    SendTemplateArchivedWebhookRequestJob.perform_in((2**attempt).minutes, {
+                                                       **params,
+                                                       'attempt' => attempt + 1,
+                                                       'last_status' => resp&.status.to_i
+                                                     })
  end
 end
@@ -26,13 +26,12 @@ class SendTemplateCreatedWebhookRequestJob
                                                attempt:,
                                                data: Templates::SerializeForApi.call(template))

-    if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
-       (!Docuseal.multitenant? || template.account.account_configs.exists?(key: :plan))
-      SendTemplateCreatedWebhookRequestJob.perform_in((2**attempt).minutes, {
-                                                        **params,
-                                                        'attempt' => attempt + 1,
-                                                        'last_status' => resp&.status.to_i
-                                                      })
-    end
+    return if attempt > MAX_ATTEMPTS || (resp && resp.status.to_i < 400)
+
+    SendTemplateCreatedWebhookRequestJob.perform_in((2**attempt).minutes, {
+                                                      **params,
+                                                      'attempt' => attempt + 1,
+                                                      'last_status' => resp&.status.to_i
+                                                    })
  end
 end
@@ -26,13 +26,12 @@ class SendTemplateUpdatedWebhookRequestJob
                                                attempt:,
                                                data: Templates::SerializeForApi.call(template))

-    if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
-       (!Docuseal.multitenant? || template.account.account_configs.exists?(key: :plan))
-      SendTemplateUpdatedWebhookRequestJob.perform_in((2**attempt).minutes, {
-                                                        **params,
-                                                        'attempt' => attempt + 1,
-                                                        'last_status' => resp&.status.to_i
-                                                      })
-    end
+    return if attempt > MAX_ATTEMPTS || (resp && resp.status.to_i < 400)
+
+    SendTemplateUpdatedWebhookRequestJob.perform_in((2**attempt).minutes, {
+                                                      **params,
+                                                      'attempt' => attempt + 1,
+                                                      'last_status' => resp&.status.to_i
+                                                    })
  end
 end
@@ -32,6 +32,7 @@ class Account < ApplicationRecord
  has_many :submitters, dependent: :destroy
  has_many :account_linked_accounts, dependent: :destroy
  has_many :email_events, dependent: :destroy
+  has_many :document_metadata, class_name: 'DocumentMetadata', dependent: :destroy
  has_many :webhook_urls, dependent: :destroy
  has_many :webhook_events, dependent: nil
  has_many :account_accesses, dependent: :destroy
@@ -43,6 +43,7 @@ class AccountConfig < ApplicationRecord
  DOWNLOAD_LINKS_EXPIRE_KEY = 'download_links_expire'
  FORCE_SSO_AUTH_KEY = 'force_sso_auth'
  FLATTEN_RESULT_PDF_KEY = 'flatten_result_pdf'
+  ROTATE_INCREMENTAL_PDF_KEY = 'rotate_incremental_pdf'
  WITH_SIGNATURE_ID = 'with_signature_id'
  WITH_FILE_LINKS_KEY = 'with_file_links'
  WITH_SIGNATURE_ID_REASON_KEY = 'with_signature_id_reason'
@@ -28,6 +28,12 @@ class DynamicDocument < ApplicationRecord

  has_many :versions, class_name: 'DynamicDocumentVersion', dependent: :destroy

+  has_one :current_version, class_name: 'DynamicDocumentVersion',
+                            primary_key: %i[id sha1],
+                            foreign_key: %i[dynamic_document_id sha1],
+                            dependent: :destroy,
+                            inverse_of: :dynamic_document
+
  attribute :fields, :json

  before_validation :set_sha1
@@ -101,13 +101,18 @@ class Submission < ApplicationRecord
    where(Submitter.where(Submitter.arel_table[:submission_id].eq(Submission.arel_table[:id])
     .and(Submitter.arel_table[:declined_at].not_eq(nil))).select(1).arel.exists)
  }
-  scope :expired, -> { pending.where(expire_at: ..Time.current) }
+  scope :expired, lambda {
+    where(expire_at: ..Time.current)
+      .where(Submitter.where(Submitter.arel_table[:submission_id].eq(Submission.arel_table[:id])
+                      .and(Submitter.arel_table[:completed_at].eq(nil))).select(1).arel.exists)
+  }

  enum :source, {
    invite: 'invite',
    bulk: 'bulk',
    api: 'api',
    embed: 'embed',
+    mcp: 'mcp',
    link: 'link'
  }, scope: false, prefix: true

@@ -70,11 +70,12 @@ class Template < ApplicationRecord
  has_many :submissions, dependent: :destroy
  has_many :template_sharings, dependent: :destroy
  has_many :template_accesses, dependent: :destroy
+  has_many :template_versions, dependent: :destroy
  has_many :dynamic_documents, dependent: :destroy
  has_many :dynamic_document_versions, through: :dynamic_documents, source: :versions

  has_many :schema_dynamic_documents, lambda { |e|
-    where(uuid: e.schema.select { |e| e['dynamic'] }.pluck('attachment_uuid'))
+    where(uuid: e.schema.select { |item| item['dynamic'] }.pluck('attachment_uuid'))
  }, class_name: 'DynamicDocument', dependent: :destroy, inverse_of: :template

  scope :active, -> { where(archived_at: nil) }
@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+# == Schema Information
+#
+# Table name: template_versions
+#
+#  id          :bigint           not null, primary key
+#  data        :text             not null
+#  sha1        :string           not null
+#  created_at  :datetime         not null
+#  updated_at  :datetime         not null
+#  account_id  :bigint           not null
+#  author_id   :bigint           not null
+#  template_id :bigint           not null
+#
+# Indexes
+#
+#  index_template_versions_on_account_id            (account_id)
+#  index_template_versions_on_author_id             (author_id)
+#  index_template_versions_on_template_id_and_sha1  (template_id,sha1) UNIQUE
+#
+# Foreign Keys
+#
+#  fk_rails_...  (account_id => accounts.id)
+#  fk_rails_...  (author_id => users.id)
+#  fk_rails_...  (template_id => templates.id)
+#
+class TemplateVersion < ApplicationRecord
+  belongs_to :template
+  belongs_to :account
+  belongs_to :author, class_name: 'User'
+
+  attribute :data, :string, default: -> { {} }
+
+  serialize :data, coder: JSON
+
+  before_validation :set_account, on: :create
+
+  private
+
+  def set_account
+    self.account ||= template.account
+  end
+end
@@ -4,14 +4,15 @@
 #
 # Table name: webhook_urls
 #
-#  id         :bigint           not null, primary key
-#  events     :text             not null
-#  secret     :text             not null
-#  sha1       :string           not null
-#  url        :text             not null
-#  created_at :datetime         not null
-#  updated_at :datetime         not null
-#  account_id :bigint           not null
+#  id          :bigint           not null, primary key
+#  events      :text             not null
+#  hmac_secret :text             not null
+#  secret      :text             not null
+#  sha1        :string           not null
+#  url         :text             not null
+#  created_at  :datetime         not null
+#  updated_at  :datetime         not null
+#  account_id  :bigint           not null
 #
 # Indexes
 #
@@ -47,10 +48,15 @@ class WebhookUrl < ApplicationRecord
  serialize :secret, coder: JSON

  before_validation :set_sha1
+  before_validation :set_hmac_secret

-  encrypts :url, :secret
+  encrypts :url, :secret, :hmac_secret

  def set_sha1
    self.sha1 = Digest::SHA1.hexdigest(url)
  end
+
+  def set_hmac_secret
+    self.hmac_secret ||= WebhookUrls::Signatures.generate_secret
+  end
 end
@@ -18,24 +18,7 @@
      <%= f.button button_title(title: t(:sign_in), disabled_with: t(:signing_in)), class: 'base-button' %>
    </div>
  <% end %>
-  <% if devise_mapping.omniauthable? %>
-    <div class="space-y-4">
-      <% if User.omniauth_providers.include?(:google_oauth2) %>
-        <%= 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: 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: t('sign_in_with_microsoft'), icon: svg_icon('brand_microsoft', class: 'w-6 h-6')), class: 'white-button w-full' %>
-        <% end %>
-      <% end %>
-    </div>
-  <% end %>
+  <%= render 'omniauthable' %>
  <%= render 'extra_links' %>
  <%= render 'devise/shared/links' %>
 </div>
@@ -20,9 +20,10 @@
  </head>
  <body>
    <% if params[:modal].present? %>
-      <% url_params = Rails.application.routes.recognize_path(params[:modal], method: :get) %>
+      <% modal_uri = Addressable::URI.parse(params[:modal]) %>
+      <% url_params = Rails.application.routes.recognize_path(modal_uri.path, method: :get) %>
      <% if url_params[:action] == 'new' %>
-        <open-modal src="<%= url_for(url_params) %>"></open-modal>
+        <open-modal src="<%= url_for(**url_params, params: modal_uri.query_values) %>"></open-modal>
      <% end %>
    <% end %>
    <turbo-frame id="modal"></turbo-frame>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Alex Turchyn	ed46af8418	Merge from docusealco/wip	2026-06-08 11:56:14 +03:00
Pete Matsyburka	095f25a6e9	adjust image type	2026-06-08 09:31:38 +03:00
Pete Matsyburka	3cdab30dc8	remove oj	2026-06-05 16:55:55 +03:00
Pete Matsyburka	8e462047ba	fix upload callback	2026-06-05 14:45:22 +03:00
Pete Matsyburka	b7f8b65d9d	adjust button style	2026-06-05 09:55:21 +03:00
Alex Turchyn	da21c37254	add Google Drive replace option	2026-06-05 09:55:21 +03:00
Pete Matsyburka	a89aef4a89	adjust zoom	2026-06-04 14:39:02 +03:00
Alex Turchyn	dd6516fd11	add cmd+scroll zooming to template builder	2026-06-04 08:20:38 +03:00
Pete Matsyburka	344a3ce198	adjust sanitize	2026-06-03 13:24:08 +03:00
Pete Matsyburka	62f8283587	adjust html to text	2026-06-02 13:44:52 +03:00
Alex Turchyn	1f89accac3	Merge from docusealco/wip	2026-06-01 14:58:06 +03:00
Pete Matsyburka	9fcaef4cf7	use new_from_memory_copy	2026-05-31 14:28:35 +03:00
Pete Matsyburka	d5738a0631	disable variant_processor	2026-05-31 12:51:52 +03:00
Pete Matsyburka	8bf7a1f95a	adjust image detect fields	2026-05-31 09:20:51 +03:00
Pete Matsyburka	04cf36891e	fix complete button press enter	2026-05-31 09:09:57 +03:00
Pete Matsyburka	b2d9948c30	remove active storage analyzers	2026-05-31 08:06:52 +03:00
Pete Matsyburka	a2c9ac1707	remove image_processing	2026-05-30 21:37:00 +03:00
Pete Matsyburka	46a6bd0108	fix stamp	2026-05-30 12:04:23 +03:00
Pete Matsyburka	5f069e7a40	use load vips	2026-05-30 07:49:40 +03:00
Pete Matsyburka	ff57e5c6ae	fix pdfa	2026-05-29 15:31:32 +03:00
Alex Turchyn	f65b6e2d76	add confirm prompt for template upload via URL	2026-05-29 09:29:21 +03:00
Pete Matsyburka	58fd180ae0	update gem	2026-05-29 08:04:53 +03:00
Pete Matsyburka	cd6503c4c3	adjust image size	2026-05-28 15:37:20 +03:00
Pete Matsyburka	e8b36c2b6d	update gh stars	2026-05-28 14:38:34 +03:00
Pete Matsyburka	51743f1359	fix spec	2026-05-28 10:18:45 +03:00
Pete Matsyburka	504c42646b	refactor template builder data	2026-05-28 10:06:47 +03:00
Pete Matsyburka	c61e84d1b4	adjust archive	2026-05-28 08:40:05 +03:00
Pete Matsyburka	b8ab01c46c	add dynamic documents to template response	2026-05-28 08:29:10 +03:00
Pete Matsyburka	9558060bde	check resubmit config	2026-05-28 08:29:09 +03:00
Pete Matsyburka	0741c879f1	use expires_at with file links	2026-05-27 22:19:18 +03:00
Pete Matsyburka	2e6dd2867e	file url ttl env var	2026-05-26 21:54:59 +03:00
Pete Matsyburka	9f3fcccb61	optimize build	2026-05-26 16:50:10 +03:00
Pete Matsyburka	ae08d7abad	adjust opacity_layer	2026-05-26 13:11:15 +03:00
Pete Matsyburka	16808a7ec6	use pngload_buffer	2026-05-26 13:11:15 +03:00
Pete Matsyburka	b1dfcd6283	fix email typo	2026-05-26 13:11:15 +03:00
Pete Matsyburka	369f4c0f08	sync prefillable field changes	2026-05-26 13:11:15 +03:00
Pete Matsyburka	827de03579	fix result generatrion	2026-05-26 08:57:30 +03:00
Alex Turchyn	0c7f4e5b43	fix sidekiq embedded redis connection	2026-05-25 21:52:34 +03:00
Alex Turchyn	9c700a3fb6	Merge from docusealco/wip	2026-05-25 12:28:05 +03:00
Pete Matsyburka	89bf83febb	adjust autorot	2026-05-23 11:43:28 +03:00
Pete Matsyburka	d44b35cf0a	convert images on upload	2026-05-23 08:25:04 +03:00
Pete Matsyburka	891833e273	refactor process doc	2026-05-22 14:06:04 +03:00
Pete Matsyburka	29d3a80d3f	fix rubocop	2026-05-21 21:55:30 +03:00
Pete Matsyburka	90fef58684	ruby 4.0.5	2026-05-21 21:46:27 +03:00
Pete Matsyburka	07841722ac	adjust image load	2026-05-21 21:44:13 +03:00
Pete Matsyburka	9e4da5948b	convert images on upload	2026-05-21 14:50:30 +03:00
Pete Matsyburka	dc6e4313a1	fix ci	2026-05-20 16:15:15 +03:00
Pete Matsyburka	a68cc0b689	convert images on upload	2026-05-20 15:23:42 +03:00
Pete Matsyburka	d057fb0f67	content type priority	2026-05-19 13:27:16 +03:00
Pete Matsyburka	7e8f045a29	cleanup	2026-05-19 11:42:14 +03:00
Pete Matsyburka	5249d8d18d	update gem	2026-05-19 11:02:15 +03:00
Pete Matsyburka	f0fafbadd4	isolate editor nodes	2026-05-19 10:52:48 +03:00
Pete Matsyburka	8b51079dcc	update gem	2026-05-18 18:42:04 +03:00
Pete Matsyburka	354bccd6e8	handle dangerous extensions	2026-05-18 18:05:16 +03:00
Pete Matsyburka	6806772346	add security headers	2026-05-18 16:47:19 +03:00
Alex Turchyn	60082655d4	Merge from docusealco/wip	2026-05-18 13:45:07 +03:00
Pete Matsyburka	7fe56941fd	optimize pdf images	2026-05-17 19:55:03 +03:00
Pete Matsyburka	abd498dd33	adjust validation message	2026-05-16 08:15:02 +03:00
Pete Matsyburka	99ca0136ed	add percent format	2026-05-16 08:15:02 +03:00
Pete Matsyburka	e52830c9b4	add authorization checks	2026-05-16 08:15:01 +03:00
Pete Matsyburka	755decca27	adjust capture revision	2026-05-15 17:50:18 +03:00
Pete Matsyburka	41604008d1	clamp area box	2026-05-15 17:20:29 +03:00
Pete Matsyburka	5bddce8969	fix i18n	2026-05-14 12:16:36 +03:00
Pete Matsyburka	b25503f141	fix i18n	2026-05-13 10:08:13 +03:00
Pete Matsyburka	bdf1850448	resend emails	2026-05-13 09:59:06 +03:00
Pete Matsyburka	230d3ccf69	fix with download config	2026-05-13 08:52:41 +03:00
Pete Matsyburka	e378025a2d	fix refactor complete button	2026-05-12 22:24:09 +03:00
Alex Turchyn	04129ded90	add complete button to signing form header	2026-05-12 19:19:49 +03:00
Pete Matsyburka	a7891f89f8	do not override custom webhook header	2026-05-11 17:13:26 +03:00
Pete Matsyburka	37d4a8e834	update gem	2026-05-11 14:06:17 +03:00
Alex Turchyn	528a1216f8	Merge from docusealco/wip	2026-05-11 13:52:58 +03:00
Pete Matsyburka	f2479bd259	adjust open revisions	2026-05-11 11:11:16 +03:00
Pete Matsyburka	135f0826d2	fix style	2026-05-09 21:17:18 +03:00
Pete Matsyburka	5710f0177b	update gh stars	2026-05-09 19:25:42 +03:00
Pete Matsyburka	1a3a0528ba	fix i18n	2026-05-09 10:34:20 +03:00
Pete Matsyburka	59793ff374	adjust builder	2026-05-08 19:35:46 +03:00
Pete Matsyburka	3c4ed42419	fix i18n	2026-05-08 18:08:35 +03:00
Pete Matsyburka	6a17b61550	update gem	2026-05-08 16:25:11 +03:00
Pete Matsyburka	76659497b7	typos	2026-05-08 16:12:09 +03:00
Pete Matsyburka	ee50c957cb	update gem	2026-05-08 15:43:34 +03:00
Pete Matsyburka	a9dd200919	add pdfium rotate	2026-05-08 15:43:34 +03:00
Pete Matsyburka	1fa953104a	update gh stars	2026-05-08 15:43:34 +03:00
Pete Matsyburka	50eb5b070e	fix typo	2026-05-08 15:43:34 +03:00
Pete Matsyburka	10fd624bec	add revisions	2026-05-08 15:43:34 +03:00
Alex Turchyn	04ec2f8260	allow permanent delete submissions in archived templates	2026-05-08 15:43:34 +03:00
Pete Matsyburka	d828d79574	improve log	2026-05-08 15:43:34 +03:00
Pete Matsyburka	01dd3fefe5	retry webhooks in test mode	2026-05-08 15:43:34 +03:00
Pete Matsyburka	45ae954c0c	add hmac webhook secret	2026-05-08 15:43:34 +03:00
Pete Matsyburka	1304849b55	update gh stars	2026-05-08 15:43:34 +03:00
Pete Matsyburka	0875faa079	fix date preview	2026-05-08 15:43:34 +03:00
Pete Matsyburka	3aa15d6ea6	update gem	2026-05-08 15:43:34 +03:00
Pete Matsyburka	6557329e97	gh 13k	2026-05-08 15:43:34 +03:00
Pete Matsyburka	be27ce4161	Merge pull request #666 from aqilaziz/docs-fix-readme-typos docs: fix README typos	2026-05-08 14:02:33 +03:00
aqilaziz	a3391a970e	docs: fix README typos	2026-05-08 05:23:28 +07:00
Alex Turchyn	744d45d2c5	Merge from docusealco/wip	2026-05-04 13:55:19 +03:00
Pete Matsyburka	310b16f54a	use mcp source	2026-05-04 09:42:51 +03:00
Pete Matsyburka	6d3ad4a869	update gh stars	2026-05-03 18:37:56 +03:00
Alex Turchyn	1ce2448820	update create_template and send_documents annotations	2026-05-03 17:43:22 +03:00
Pete Matsyburka	07b4ada5be	optimize edit json	2026-05-03 16:32:37 +03:00
Pete Matsyburka	f70bf530ba	hide qr link	2026-05-03 08:19:58 +03:00
Pete Matsyburka	a26aa0f411	remove log	2026-05-03 07:27:24 +03:00
Pete Matsyburka	584577c21f	fix ed.jp email typo	2026-05-01 13:50:17 +03:00
Pete Matsyburka	1503375eed	respond to HEAD file proxy	2026-04-30 17:55:13 +03:00
Pete Matsyburka	2dec099f20	fix signature canvas minimize	2026-04-30 14:51:24 +03:00
Pete Matsyburka	bf6eed4ea2	fix canvas error	2026-04-30 14:42:22 +03:00
Pete Matsyburka	e0dc33cfb4	fix email domain search	2026-04-30 11:27:17 +03:00
Pete Matsyburka	9c9dc27537	fix new area order	2026-04-30 11:13:35 +03:00
Pete Matsyburka	7305637b8c	sort appears on	2026-04-30 10:32:51 +03:00
Pete Matsyburka	a6e22adf2e	fix preview	2026-04-29 18:00:47 +03:00
Pete Matsyburka	809c6b1aa8	fix modal open	2026-04-29 10:27:02 +03:00
Pete Matsyburka	1536ded2a6	redis error log	2026-04-28 19:30:51 +03:00
Pete Matsyburka	76d54971ce	fix test mode clone	2026-04-28 11:58:17 +03:00
Pete Matsyburka	6dec56198c	add require email 2fa to submitter update	2026-04-28 11:58:17 +03:00
Pete Matsyburka	d96d252df3	use post for test mode	2026-04-28 11:58:17 +03:00
Pete Matsyburka	3fca76a716	change state param	2026-04-28 11:58:17 +03:00
Pete Matsyburka	a184fa11f1	move auth links	2026-04-28 11:58:17 +03:00
Pete Matsyburka	e9c0b6a703	rate limit	2026-04-28 11:58:17 +03:00
Pete Matsyburka	ec7df08496	adjust send submission email	2026-04-28 11:58:17 +03:00
Pete Matsyburka	6627d7eac5	fix erblint	2026-04-27 15:34:57 +03:00
Pete Matsyburka	1f8945d710	fix expired filter	2026-04-27 15:31:29 +03:00
Alex Turchyn	daaa289a5c	Merge from docusealco/wip	2026-04-27 13:43:34 +03:00
Pete Matsyburka	81a6a48d70	validate color	2026-04-26 15:13:19 +03:00
Pete Matsyburka	b93c7cd261	add has_many document_metadata	2026-04-26 10:24:20 +03:00
Pete Matsyburka	570482e12d	rename error	2026-04-25 12:39:26 +03:00
Pete Matsyburka	39407557f2	adjust page preview	2026-04-25 09:01:53 +03:00
Pete Matsyburka	3b040d558d	adjust compression	2026-04-24 18:39:19 +03:00
Alex Turchyn	56ba3c2a52	add custom classes	2026-04-24 17:01:33 +03:00
Pete Matsyburka	c7afe33c72	add time formats	2026-04-24 14:01:28 +03:00
Pete Matsyburka	82500c2d7d	update dep	2026-04-24 10:56:19 +03:00
Pete Matsyburka	fb1c1f117b	remove unused const	2026-04-24 10:56:19 +03:00
Pete Matsyburka	7c6a7513fd	add with custom field tab	2026-04-24 09:59:34 +03:00
Pete Matsyburka	6d13119ee0	input mode condition and formula	2026-04-22 10:58:50 +03:00
Pete Matsyburka	1e2c752937	detect existing fields	2026-04-22 10:27:18 +03:00
Pete Matsyburka	e82faf8320	queue page field detection	2026-04-22 07:43:45 +03:00
Pete Matsyburka	4adb1001b0	add rotate incremental config	2026-04-21 12:35:00 +03:00
Pete Matsyburka	992a1b26c0	adjust tooltip position	2026-04-20 20:18:07 +03:00
Pete Matsyburka	c07bc6687c	add metadata param	2026-04-20 15:43:41 +03:00