add app url var

add combine pdf toggle
adjust error page
2026-08-07 07:14:43 +00:00 · 2024-08-25 16:03:23 +03:00 · 2024-08-25 16:03:23 +03:00 · 2024-08-25 16:03:23 +03:00 · 2024-08-25 16:03:23 +03:00 · 2024-08-25 16:03:23 +03:00
301 changed files with 9540 additions and 2047 deletions
@@ -11,7 +11,7 @@ jobs:
      - name: Install Ruby
        uses: ruby/setup-ruby@v1
        with:
-          ruby-version: 3.2.2
+          ruby-version: 3.3.3
      - name: Cache gems
        uses: actions/cache@v1
        with:
@@ -35,7 +35,7 @@ jobs:
      - name: Install Ruby
        uses: ruby/setup-ruby@v1
        with:
-          ruby-version: 3.2.2
+          ruby-version: 3.3.3
      - name: Cache gems
        uses: actions/cache@v1
        with:
@@ -100,13 +100,15 @@ jobs:
      - name: Install Ruby
        uses: ruby/setup-ruby@v1
        with:
-          ruby-version: 3.2.2
+          ruby-version: 3.3.3
      - name: Set up Node
        uses: actions/setup-node@v1
        with:
          node-version: 20.9.0
      - name: Install Chrome
        uses: browser-actions/setup-chrome@latest
+        with:
+          chrome-version: 125
      - name: Cache node_modules
        uses: actions/cache@v1
        with:
@@ -36,3 +36,4 @@ yarn-debug.log*
 /attachments
 /docuseal
 /ee
+dump.rdb
@@ -10,7 +10,8 @@ AllCops:
    - node_modules/**/*
    - bin/*
    - vendor/**/*
-  TargetRubyVersion: '3.2'
+  TargetRubyVersion: '3.3'
+  SuggestExtensions: false

 Metrics/BlockLength:
  Exclude:
@@ -76,5 +77,5 @@ Rails/SkipsModelValidations:
 Rails/ApplicationController:
  Enabled: false

-Capybara/ClickLinkOrButtonStyle:
+Rails/Output:
  Enabled: false
@@ -1,4 +1,4 @@
-FROM ruby:3.2.2-alpine3.18 as fonts
+FROM ruby:3.3.3-alpine as fonts

 WORKDIR /fonts

@@ -6,7 +6,7 @@ RUN apk --no-cache add fontforge wget && wget https://github.com/satbyy/go-noto-

 RUN fontforge -lang=py -c 'font1 = fontforge.open("FreeSans.ttf"); font2 = fontforge.open("NotoSansSymbols2-Regular.ttf"); font1.mergeFonts(font2); font1.generate("FreeSans.ttf")'

-FROM ruby:3.2.2-alpine3.18 as webpack
+FROM ruby:3.3.3-alpine as webpack

 ENV RAILS_ENV=production
 ENV NODE_ENV=production
@@ -32,18 +32,32 @@ COPY ./app/views ./app/views

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

-FROM ruby:3.2.2-alpine3.18 as app
+FROM ruby:3.3.3-alpine as app

 ENV RAILS_ENV=production
 ENV BUNDLE_WITHOUT="development:test"
+ENV LD_PRELOAD=/lib/libgcompat.so.0
+ENV OPENSSL_CONF=/app/openssl_legacy.cnf

 WORKDIR /app

-RUN apk add --no-cache sqlite-dev libpq-dev mariadb-dev vips-dev vips-poppler poppler-utils vips-heif libc6-compat ttf-freefont && mkdir /fonts && rm /usr/share/fonts/freefont/FreeSans.otf
+RUN apk add --no-cache sqlite-dev libpq-dev mariadb-dev vips-dev vips-poppler poppler-utils redis vips-heif gcompat ttf-freefont && mkdir /fonts && rm /usr/share/fonts/freefont/FreeSans.otf
+
+RUN echo $'.include = /etc/ssl/openssl.cnf\n\
+\n\
+[provider_sect]\n\
+default = default_sect\n\
+legacy = legacy_sect\n\
+\n\
+[default_sect]\n\
+activate = 1\n\
+\n\
+[legacy_sect]\n\
+activate = 1' >> /app/openssl_legacy.cnf

 COPY ./Gemfile ./Gemfile.lock ./

-RUN apk add --no-cache build-base && bundle update --bundler && bundle install && apk del build-base && rm -rf ~/.bundle /usr/local/bundle/cache && ruby -e "puts Dir['/usr/local/bundle/**/{spec,rdoc,resources/shared,resources/collation,resources/locales}']" | xargs rm -rf
+RUN apk add --no-cache build-base && bundle install && apk del build-base && rm -rf ~/.bundle /usr/local/bundle/cache && ruby -e "puts Dir['/usr/local/bundle/**/{spec,rdoc,resources/shared,resources/collation,resources/locales}']" | xargs rm -rf

 COPY ./bin ./bin
 COPY ./app ./app
@@ -2,13 +2,15 @@

 source 'https://rubygems.org'

-ruby '3.2.2'
+ruby '3.3.3'

 gem 'arabic-letter-connector', require: 'arabic-letter-connector/logic'
 gem 'aws-sdk-s3', require: false
+gem 'aws-sdk-secretsmanager', require: false
 gem 'azure-storage-blob', require: false
 gem 'bootsnap', require: false
 gem 'cancancan'
+gem 'csv'
 gem 'devise'
 gem 'devise-two-factor'
 gem 'dotenv', require: false
@@ -21,13 +23,13 @@ gem 'image_processing'
 gem 'jwt'
 gem 'lograge'
 gem 'mysql2', require: false
+gem 'net-smtp', '0.4.0'
 gem 'oj'
 gem 'pagy'
-gem 'pdf-reader'
 gem 'pg', require: false
 gem 'premailer-rails'
 gem 'pretender'
-gem 'puma'
+gem 'puma', require: false
 gem 'rack'
 gem 'rails'
 gem 'rails_autolink'
@@ -37,8 +39,8 @@ gem 'rqrcode'
 gem 'ruby-vips'
 gem 'rubyXL'
 gem 'shakapacker'
-gem 'sidekiq', require: ENV.key?('REDIS_URL')
-gem 'sqlite3', require: false
+gem 'sidekiq'
+gem 'sqlite3', require: false, force_ruby_platform: true
 gem 'strip_attributes'
 gem 'turbo-rails'
 gem 'twitter_cldr', require: false
@@ -1,36 +1,35 @@
 GEM
  remote: https://rubygems.org/
  specs:
-    Ascii85 (1.1.0)
-    actioncable (7.1.2)
-      actionpack (= 7.1.2)
-      activesupport (= 7.1.2)
+    actioncable (7.1.3.4)
+      actionpack (= 7.1.3.4)
+      activesupport (= 7.1.3.4)
      nio4r (~> 2.0)
      websocket-driver (>= 0.6.1)
      zeitwerk (~> 2.6)
-    actionmailbox (7.1.2)
-      actionpack (= 7.1.2)
-      activejob (= 7.1.2)
-      activerecord (= 7.1.2)
-      activestorage (= 7.1.2)
-      activesupport (= 7.1.2)
+    actionmailbox (7.1.3.4)
+      actionpack (= 7.1.3.4)
+      activejob (= 7.1.3.4)
+      activerecord (= 7.1.3.4)
+      activestorage (= 7.1.3.4)
+      activesupport (= 7.1.3.4)
      mail (>= 2.7.1)
      net-imap
      net-pop
      net-smtp
-    actionmailer (7.1.2)
-      actionpack (= 7.1.2)
-      actionview (= 7.1.2)
-      activejob (= 7.1.2)
-      activesupport (= 7.1.2)
+    actionmailer (7.1.3.4)
+      actionpack (= 7.1.3.4)
+      actionview (= 7.1.3.4)
+      activejob (= 7.1.3.4)
+      activesupport (= 7.1.3.4)
      mail (~> 2.5, >= 2.5.4)
      net-imap
      net-pop
      net-smtp
      rails-dom-testing (~> 2.2)
-    actionpack (7.1.2)
-      actionview (= 7.1.2)
-      activesupport (= 7.1.2)
+    actionpack (7.1.3.4)
+      actionview (= 7.1.3.4)
+      activesupport (= 7.1.3.4)
      nokogiri (>= 1.8.5)
      racc
      rack (>= 2.2.4)
@@ -38,35 +37,35 @@ GEM
      rack-test (>= 0.6.3)
      rails-dom-testing (~> 2.2)
      rails-html-sanitizer (~> 1.6)
-    actiontext (7.1.2)
-      actionpack (= 7.1.2)
-      activerecord (= 7.1.2)
-      activestorage (= 7.1.2)
-      activesupport (= 7.1.2)
+    actiontext (7.1.3.4)
+      actionpack (= 7.1.3.4)
+      activerecord (= 7.1.3.4)
+      activestorage (= 7.1.3.4)
+      activesupport (= 7.1.3.4)
      globalid (>= 0.6.0)
      nokogiri (>= 1.8.5)
-    actionview (7.1.2)
-      activesupport (= 7.1.2)
+    actionview (7.1.3.4)
+      activesupport (= 7.1.3.4)
      builder (~> 3.1)
      erubi (~> 1.11)
      rails-dom-testing (~> 2.2)
      rails-html-sanitizer (~> 1.6)
-    activejob (7.1.2)
-      activesupport (= 7.1.2)
+    activejob (7.1.3.4)
+      activesupport (= 7.1.3.4)
      globalid (>= 0.3.6)
-    activemodel (7.1.2)
-      activesupport (= 7.1.2)
-    activerecord (7.1.2)
-      activemodel (= 7.1.2)
-      activesupport (= 7.1.2)
+    activemodel (7.1.3.4)
+      activesupport (= 7.1.3.4)
+    activerecord (7.1.3.4)
+      activemodel (= 7.1.3.4)
+      activesupport (= 7.1.3.4)
      timeout (>= 0.4.0)
-    activestorage (7.1.2)
-      actionpack (= 7.1.2)
-      activejob (= 7.1.2)
-      activerecord (= 7.1.2)
-      activesupport (= 7.1.2)
+    activestorage (7.1.3.4)
+      actionpack (= 7.1.3.4)
+      activejob (= 7.1.3.4)
+      activerecord (= 7.1.3.4)
+      activesupport (= 7.1.3.4)
      marcel (~> 1.0)
-    activesupport (7.1.2)
+    activesupport (7.1.3.4)
      base64
      bigdecimal
      concurrent-ruby (~> 1.0, >= 1.0.2)
@@ -78,26 +77,28 @@ GEM
      tzinfo (~> 2.0)
    addressable (2.8.6)
      public_suffix (>= 2.0.2, < 6.0)
-    afm (0.2.2)
    annotate (3.2.0)
      activerecord (>= 3.2, < 8.0)
      rake (>= 10.4, < 14.0)
    arabic-letter-connector (0.1.1)
    ast (2.4.2)
    aws-eventstream (1.3.0)
-    aws-partitions (1.874.0)
-    aws-sdk-core (3.190.1)
+    aws-partitions (1.913.0)
+    aws-sdk-core (3.191.6)
      aws-eventstream (~> 1, >= 1.3.0)
      aws-partitions (~> 1, >= 1.651.0)
      aws-sigv4 (~> 1.8)
      jmespath (~> 1, >= 1.6.1)
-    aws-sdk-kms (1.75.0)
-      aws-sdk-core (~> 3, >= 3.188.0)
+    aws-sdk-kms (1.79.0)
+      aws-sdk-core (~> 3, >= 3.191.0)
      aws-sigv4 (~> 1.1)
-    aws-sdk-s3 (1.142.0)
-      aws-sdk-core (~> 3, >= 3.189.0)
+    aws-sdk-s3 (1.146.1)
+      aws-sdk-core (~> 3, >= 3.191.0)
      aws-sdk-kms (~> 1)
      aws-sigv4 (~> 1.8)
+    aws-sdk-secretsmanager (1.91.0)
+      aws-sdk-core (~> 3, >= 3.191.0)
+      aws-sigv4 (~> 1.1)
    aws-sigv4 (1.8.0)
      aws-eventstream (~> 1, >= 1.0.2)
    azure-storage-blob (2.0.3)
@@ -110,52 +111,55 @@ GEM
      nokogiri (~> 1, >= 1.10.8)
    base64 (0.2.0)
    bcrypt (3.1.20)
-    better_html (2.0.2)
+    better_html (2.1.1)
      actionview (>= 6.0)
      activesupport (>= 6.0)
      ast (~> 2.0)
      erubi (~> 1.4)
      parser (>= 2.4)
      smart_properties
-    bigdecimal (3.1.5)
+    bigdecimal (3.1.8)
    bindex (0.8.1)
-    bootsnap (1.17.0)
+    bootsnap (1.18.3)
      msgpack (~> 1.2)
-    builder (3.2.4)
-    bullet (7.1.4)
+    builder (3.3.0)
+    bullet (7.1.6)
      activesupport (>= 3.0.0)
      uniform_notifier (~> 1.11)
    camertron-eprun (1.1.1)
    cancancan (3.5.0)
-    capybara (3.39.2)
+    capybara (3.40.0)
      addressable
      matrix
      mini_mime (>= 0.1.3)
-      nokogiri (~> 1.8)
+      nokogiri (~> 1.11)
      rack (>= 1.6.0)
      rack-test (>= 0.6.3)
      regexp_parser (>= 1.5, < 3.0)
      xpath (~> 3.2)
+    childprocess (5.0.0)
    chunky_png (1.4.0)
    cldr-plurals-runtime-rb (1.1.0)
    cmdparse (3.0.7)
    coderay (1.1.3)
-    concurrent-ruby (1.2.2)
+    concurrent-ruby (1.3.4)
    connection_pool (2.4.1)
-    crack (0.4.5)
+    crack (1.0.0)
+      bigdecimal
      rexml
    crass (1.0.6)
-    css_parser (1.16.0)
+    css_parser (1.17.1)
      addressable
+    csv (3.3.0)
    cuprite (0.15)
      capybara (~> 3.0)
      ferrum (~> 0.14.0)
    date (3.3.4)
-    debug (1.9.1)
+    debug (1.9.2)
      irb (~> 1.10)
      reline (>= 0.3.8)
    declarative (0.0.20)
-    devise (4.9.3)
+    devise (4.9.4)
      bcrypt (~> 3.0)
      orm_adapter (~> 0.1)
      railties (>= 4.1.0)
@@ -166,13 +170,12 @@ GEM
      devise (~> 4.0)
      railties (~> 7.0)
      rotp (~> 6.0)
-    diff-lcs (1.5.0)
+    diff-lcs (1.5.1)
    digest-crc (0.6.5)
      rake (>= 12.0.0, < 14.0.0)
    docile (1.4.0)
-    dotenv (2.8.1)
-    drb (2.2.0)
-      ruby2_keywords
+    dotenv (3.1.0)
+    drb (2.2.1)
    email_typo (0.2.3)
    erb_lint (0.5.0)
      activesupport
@@ -181,13 +184,13 @@ GEM
      rainbow
      rubocop
      smart_properties
-    erubi (1.12.0)
-    factory_bot (6.4.4)
+    erubi (1.13.0)
+    factory_bot (6.4.6)
      activesupport (>= 5.0.0)
-    factory_bot_rails (6.4.2)
+    factory_bot_rails (6.4.3)
      factory_bot (~> 6.4)
      railties (>= 5.0.0)
-    faker (3.2.2)
+    faker (3.3.1)
      i18n (>= 1.8.11, < 2)
    faraday (1.10.3)
      faraday-em_http (~> 1.0)
@@ -225,34 +228,34 @@ GEM
    geom2d (0.4.1)
    globalid (1.2.1)
      activesupport (>= 6.1)
-    google-apis-core (0.11.2)
+    google-apis-core (0.14.1)
      addressable (~> 2.5, >= 2.5.1)
-      googleauth (>= 0.16.2, < 2.a)
+      googleauth (~> 1.9)
      httpclient (>= 2.8.1, < 3.a)
      mini_mime (~> 1.0)
      representable (~> 3.0)
      retriable (>= 2.0, < 4.a)
      rexml
-      webrick
-    google-apis-iamcredentials_v1 (0.17.0)
-      google-apis-core (>= 0.11.0, < 2.a)
-    google-apis-storage_v1 (0.29.0)
-      google-apis-core (>= 0.11.0, < 2.a)
-    google-cloud-core (1.6.1)
+    google-apis-iamcredentials_v1 (0.20.0)
+      google-apis-core (>= 0.14.0, < 2.a)
+    google-apis-storage_v1 (0.37.0)
+      google-apis-core (>= 0.14.0, < 2.a)
+    google-cloud-core (1.7.0)
      google-cloud-env (>= 1.0, < 3.a)
      google-cloud-errors (~> 1.0)
-    google-cloud-env (2.1.0)
+    google-cloud-env (2.1.1)
      faraday (>= 1.0, < 3.a)
-    google-cloud-errors (1.3.1)
-    google-cloud-storage (1.45.0)
+    google-cloud-errors (1.4.0)
+    google-cloud-storage (1.49.0)
      addressable (~> 2.8)
      digest-crc (~> 0.4)
-      google-apis-iamcredentials_v1 (~> 0.1)
-      google-apis-storage_v1 (~> 0.29.0)
+      google-apis-core (~> 0.13)
+      google-apis-iamcredentials_v1 (~> 0.18)
+      google-apis-storage_v1 (~> 0.33)
      google-cloud-core (~> 1.6)
-      googleauth (>= 0.16.2, < 2.a)
+      googleauth (~> 1.9)
      mini_mime (~> 1.0)
-    googleauth (1.9.1)
+    googleauth (1.11.0)
      faraday (>= 1.0, < 3.a)
      google-cloud-env (~> 2.1)
      jwt (>= 1.4, < 3.0)
@@ -260,30 +263,31 @@ GEM
      os (>= 0.9, < 2.0)
      signet (>= 0.16, < 2.a)
    hashdiff (1.1.0)
-    hashery (2.1.2)
-    hexapdf (0.37.1)
+    hexapdf (0.42.0)
      cmdparse (~> 3.0, >= 3.0.3)
      geom2d (~> 0.4, >= 0.4.1)
      openssl (>= 2.2.1)
    htmlentities (4.3.4)
    httpclient (2.8.3)
-    i18n (1.14.1)
+    i18n (1.14.5)
      concurrent-ruby (~> 1.0)
    image_processing (1.12.2)
      mini_magick (>= 4.9.5, < 5)
      ruby-vips (>= 2.0.17, < 3)
-    io-console (0.7.1)
-    irb (1.11.0)
-      rdoc
-      reline (>= 0.3.8)
+    io-console (0.7.2)
+    irb (1.13.1)
+      rdoc (>= 4.0.0)
+      reline (>= 0.4.2)
    jmespath (1.6.2)
-    json (2.7.1)
-    jwt (2.7.1)
+    json (2.7.2)
+    jwt (2.8.1)
+      base64
    language_server-protocol (3.17.0.3)
-    launchy (2.5.2)
+    launchy (3.0.0)
      addressable (~> 2.8)
-    letter_opener (1.8.1)
-      launchy (>= 2.2, < 3)
+      childprocess (~> 5.0)
+    letter_opener (1.10.0)
+      launchy (>= 2.2, < 4)
    letter_opener_web (2.0.0)
      actionmailer (>= 5.2)
      letter_opener (~> 1.7)
@@ -302,51 +306,49 @@ GEM
      net-imap
      net-pop
      net-smtp
-    marcel (1.0.2)
+    marcel (1.0.4)
    matrix (0.4.2)
-    method_source (1.0.0)
+    method_source (1.1.0)
    mini_magick (4.12.0)
    mini_mime (1.1.5)
-    mini_portile2 (2.8.5)
-    minitest (5.20.0)
+    mini_portile2 (2.8.7)
+    minitest (5.24.1)
    msgpack (1.7.2)
    multi_json (1.15.0)
-    multipart-post (2.3.0)
+    multipart-post (2.4.0)
    mutex_m (0.2.0)
-    mysql2 (0.5.5)
+    mysql2 (0.5.6)
    net-http-persistent (4.0.2)
      connection_pool (~> 2.2)
-    net-imap (0.4.9)
+    net-imap (0.4.14)
      date
      net-protocol
    net-pop (0.1.2)
-      net-protocol
    net-protocol (0.2.2)
      timeout
    net-smtp (0.4.0)
      net-protocol
-    nio4r (2.7.0)
-    nokogiri (1.15.5)
+    nio4r (2.7.1)
+    nokogiri (1.16.7)
      mini_portile2 (~> 2.8.2)
      racc (~> 1.4)
+    nokogiri (1.16.7-aarch64-linux)
+      racc (~> 1.4)
+    nokogiri (1.16.7-x86_64-linux)
+      racc (~> 1.4)
    oj (3.16.3)
      bigdecimal (>= 3.0)
    openssl (3.2.0)
    orm_adapter (0.5.0)
    os (1.1.4)
-    pagy (6.2.0)
-    parallel (1.24.0)
-    parser (3.2.2.4)
+    package_json (0.1.0)
+    pagy (8.1.2)
+    parallel (1.25.1)
+    parser (3.3.4.0)
      ast (~> 2.4.1)
      racc
-    pdf-reader (2.12.0)
-      Ascii85 (~> 1.0)
-      afm (~> 0.2.1)
-      hashery (~> 2.0)
-      ruby-rc4
-      ttfunk
-    pg (1.5.4)
-    premailer (1.21.0)
+    pg (1.5.6)
+    premailer (1.23.0)
      addressable
      css_parser (>= 1.12.0)
      htmlentities (>= 4.0.0)
@@ -363,34 +365,34 @@ GEM
      pry (>= 0.10.4)
    psych (5.1.2)
      stringio
-    public_suffix (5.0.4)
-    puma (6.4.0)
+    public_suffix (5.0.5)
+    puma (6.4.2)
      nio4r (~> 2.0)
-    racc (1.7.3)
-    rack (2.2.8)
+    racc (1.8.1)
+    rack (3.1.7)
    rack-proxy (0.7.7)
      rack
-    rack-session (1.0.2)
-      rack (< 3)
+    rack-session (2.0.0)
+      rack (>= 3.0.0)
    rack-test (2.1.0)
      rack (>= 1.3)
-    rackup (1.0.0)
-      rack (< 3)
-      webrick
-    rails (7.1.2)
-      actioncable (= 7.1.2)
-      actionmailbox (= 7.1.2)
-      actionmailer (= 7.1.2)
-      actionpack (= 7.1.2)
-      actiontext (= 7.1.2)
-      actionview (= 7.1.2)
-      activejob (= 7.1.2)
-      activemodel (= 7.1.2)
-      activerecord (= 7.1.2)
-      activestorage (= 7.1.2)
-      activesupport (= 7.1.2)
+    rackup (2.1.0)
+      rack (>= 3)
+      webrick (~> 1.8)
+    rails (7.1.3.4)
+      actioncable (= 7.1.3.4)
+      actionmailbox (= 7.1.3.4)
+      actionmailer (= 7.1.3.4)
+      actionpack (= 7.1.3.4)
+      actiontext (= 7.1.3.4)
+      actionview (= 7.1.3.4)
+      activejob (= 7.1.3.4)
+      activemodel (= 7.1.3.4)
+      activerecord (= 7.1.3.4)
+      activestorage (= 7.1.3.4)
+      activesupport (= 7.1.3.4)
      bundler (>= 1.15.0)
-      railties (= 7.1.2)
+      railties (= 7.1.3.4)
    rails-dom-testing (2.2.0)
      activesupport (>= 5.0.0)
      minitest
@@ -398,113 +400,108 @@ GEM
    rails-html-sanitizer (1.6.0)
      loofah (~> 2.21)
      nokogiri (~> 1.14)
-    rails-i18n (7.0.8)
+    rails-i18n (7.0.9)
      i18n (>= 0.7, < 2)
      railties (>= 6.0.0, < 8)
    rails_autolink (1.1.8)
      actionview (> 3.1)
      activesupport (> 3.1)
      railties (> 3.1)
-    railties (7.1.2)
-      actionpack (= 7.1.2)
-      activesupport (= 7.1.2)
+    railties (7.1.3.4)
+      actionpack (= 7.1.3.4)
+      activesupport (= 7.1.3.4)
      irb
      rackup (>= 1.0.0)
      rake (>= 12.2)
      thor (~> 1.0, >= 1.2.2)
      zeitwerk (~> 2.6)
    rainbow (3.1.1)
-    rake (13.1.0)
-    rdoc (6.6.2)
+    rake (13.2.1)
+    rdoc (6.6.3.1)
      psych (>= 4.0.0)
-    redis-client (0.19.1)
+    redis-client (0.22.2)
      connection_pool
-    regexp_parser (2.8.3)
-    reline (0.4.1)
+    regexp_parser (2.9.2)
+    reline (0.5.7)
      io-console (~> 0.5)
    representable (3.2.0)
      declarative (< 0.1.0)
      trailblazer-option (>= 0.1.1, < 0.2.0)
      uber (< 0.2.0)
-    request_store (1.5.1)
+    request_store (1.6.0)
      rack (>= 1.4)
    responders (3.1.1)
      actionpack (>= 5.2)
      railties (>= 5.2)
    retriable (3.1.2)
-    rexml (3.2.6)
+    rexml (3.3.6)
+      strscan
    rotp (6.3.0)
    rqrcode (2.2.0)
      chunky_png (~> 1.0)
      rqrcode_core (~> 1.0)
    rqrcode_core (1.2.0)
-    rspec-core (3.12.2)
-      rspec-support (~> 3.12.0)
-    rspec-expectations (3.12.3)
+    rspec-core (3.13.0)
+      rspec-support (~> 3.13.0)
+    rspec-expectations (3.13.0)
      diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.12.0)
-    rspec-mocks (3.12.6)
+      rspec-support (~> 3.13.0)
+    rspec-mocks (3.13.0)
      diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.12.0)
-    rspec-rails (6.1.0)
+      rspec-support (~> 3.13.0)
+    rspec-rails (6.1.2)
      actionpack (>= 6.1)
      activesupport (>= 6.1)
      railties (>= 6.1)
-      rspec-core (~> 3.12)
-      rspec-expectations (~> 3.12)
-      rspec-mocks (~> 3.12)
-      rspec-support (~> 3.12)
-    rspec-support (3.12.1)
-    rubocop (1.59.0)
+      rspec-core (~> 3.13)
+      rspec-expectations (~> 3.13)
+      rspec-mocks (~> 3.13)
+      rspec-support (~> 3.13)
+    rspec-support (3.13.1)
+    rubocop (1.65.0)
      json (~> 2.3)
      language_server-protocol (>= 3.17.0)
      parallel (~> 1.10)
-      parser (>= 3.2.2.4)
+      parser (>= 3.3.0.2)
      rainbow (>= 2.2.2, < 4.0)
-      regexp_parser (>= 1.8, < 3.0)
+      regexp_parser (>= 2.4, < 3.0)
      rexml (>= 3.2.5, < 4.0)
-      rubocop-ast (>= 1.30.0, < 2.0)
+      rubocop-ast (>= 1.31.1, < 2.0)
      ruby-progressbar (~> 1.7)
      unicode-display_width (>= 2.4.0, < 3.0)
-    rubocop-ast (1.30.0)
-      parser (>= 3.2.1.0)
-    rubocop-capybara (2.19.0)
-      rubocop (~> 1.41)
-    rubocop-factory_bot (2.24.0)
-      rubocop (~> 1.33)
-    rubocop-performance (1.20.1)
+    rubocop-ast (1.31.3)
+      parser (>= 3.3.1.0)
+    rubocop-performance (1.21.0)
      rubocop (>= 1.48.1, < 2.0)
-      rubocop-ast (>= 1.30.0, < 2.0)
-    rubocop-rails (2.23.1)
+      rubocop-ast (>= 1.31.1, < 2.0)
+    rubocop-rails (2.24.1)
      activesupport (>= 4.2.0)
      rack (>= 1.1)
      rubocop (>= 1.33.0, < 2.0)
-      rubocop-ast (>= 1.30.0, < 2.0)
-    rubocop-rspec (2.25.0)
-      rubocop (~> 1.40)
-      rubocop-capybara (~> 2.17)
-      rubocop-factory_bot (~> 2.22)
+      rubocop-ast (>= 1.31.1, < 2.0)
+    rubocop-rspec (3.0.3)
+      rubocop (~> 1.61)
    ruby-progressbar (1.13.0)
-    ruby-rc4 (0.1.5)
-    ruby-vips (2.2.0)
+    ruby-vips (2.2.1)
      ffi (~> 1.12)
    ruby2_keywords (0.0.5)
-    rubyXL (3.4.25)
+    rubyXL (3.4.27)
      nokogiri (>= 1.10.8)
      rubyzip (>= 1.3.0)
    rubyzip (2.3.2)
    semantic_range (3.0.0)
-    shakapacker (7.1.0)
+    shakapacker (8.0.0)
      activesupport (>= 5.2)
+      package_json
      rack-proxy (>= 0.6.1)
      railties (>= 5.2)
      semantic_range (>= 2.3.0)
-    sidekiq (7.2.0)
+    sidekiq (7.2.4)
      concurrent-ruby (< 2)
      connection_pool (>= 2.3.0)
      rack (>= 2.2.4)
-      redis-client (>= 0.14.0)
-    signet (0.18.0)
+      redis-client (>= 0.19.0)
+    signet (0.19.0)
      addressable (~> 2.8)
      faraday (>= 0.17.5, < 3.a)
      jwt (>= 1.5, < 3.0)
@@ -516,17 +513,16 @@ GEM
    simplecov-html (0.12.3)
    simplecov_json_formatter (0.1.4)
    smart_properties (1.17.0)
-    sqlite3 (1.7.0)
+    sqlite3 (1.7.3)
      mini_portile2 (~> 2.8.0)
-    sqlite3 (1.7.0-arm64-darwin)
    stringio (3.1.0)
    strip_attributes (1.13.0)
      activemodel (>= 3.0, < 8.0)
-    thor (1.3.0)
+    strscan (3.1.0)
+    thor (1.3.1)
    timeout (0.4.1)
    trailblazer-option (0.1.2)
-    ttfunk (1.7.0)
-    turbo-rails (1.5.0)
+    turbo-rails (2.0.5)
      actionpack (>= 6.0.0)
      activejob (>= 6.0.0)
      railties (>= 6.0.0)
@@ -536,7 +532,7 @@ GEM
      tzinfo
    tzinfo (2.0.6)
      concurrent-ruby (~> 1.0)
-    tzinfo-data (1.2023.4)
+    tzinfo-data (1.2024.1)
      tzinfo (>= 1.0.0)
    uber (0.1.0)
    unicode-display_width (2.5.0)
@@ -548,7 +544,7 @@ GEM
      activemodel (>= 6.0.0)
      bindex (>= 0.4.0)
      railties (>= 6.0.0)
-    webmock (3.19.1)
+    webmock (3.23.0)
      addressable (>= 2.8.0)
      crack (>= 0.3.2)
      hashdiff (>= 0.4.0, < 2.0.0)
@@ -558,22 +554,25 @@ GEM
    websocket-extensions (0.1.5)
    xpath (3.2.0)
      nokogiri (~> 1.8)
-    zeitwerk (2.6.12)
+    zeitwerk (2.6.14)

 PLATFORMS
-  arm64-darwin-22
+  aarch64-linux
  ruby
+  x86_64-linux

 DEPENDENCIES
  annotate
  arabic-letter-connector
  aws-sdk-s3
+  aws-sdk-secretsmanager
  azure-storage-blob
  better_html
  bootsnap
  bullet
  cancancan
  capybara
+  csv
  cuprite
  debug
  devise
@@ -592,9 +591,9 @@ DEPENDENCIES
  letter_opener_web
  lograge
  mysql2
+  net-smtp (= 0.4.0)
  oj
  pagy
-  pdf-reader
  pg
  premailer-rails
  pretender
@@ -625,7 +624,7 @@ DEPENDENCIES
  webmock

 RUBY VERSION
-   ruby 3.2.2p53
+   ruby 3.3.3p89

 BUNDLED WITH
   2.5.3
@@ -3,3 +3,12 @@
 If you come across any security concern or vulnarability, please report the information via email to security@docuseal.co instead of opening a GitHub issue. We will promptly respond and will collaborate with you to validate the issue, and resolve it ASAP.

 **We have a bug bounty program to reward security researchers.**
+
+Out of scope vulnerabilities:
+
+- CSRF
+- DNSSEC, CAA, CSP headers
+- DNS or email security related
+- Rate Limiting
+
+Note: We reserve the right to classify any reported vulnerability as out of scope for the bug bounty program.
@@ -8,8 +8,15 @@ class AccountConfigsController < ApplicationController
    AccountConfig::ALLOW_TYPED_SIGNATURE,
    AccountConfig::FORCE_MFA,
    AccountConfig::ALLOW_TO_RESUBMIT,
+    AccountConfig::FORM_PREFILL_SIGNATURE_KEY,
    AccountConfig::ESIGNING_PREFERENCE_KEY,
-    AccountConfig::FORM_WITH_CONFETTI_KEY
+    AccountConfig::FORM_WITH_CONFETTI_KEY,
+    AccountConfig::DOWNLOAD_LINKS_AUTH_KEY,
+    AccountConfig::FORCE_SSO_AUTH_KEY,
+    AccountConfig::FLATTEN_RESULT_PDF_KEY,
+    AccountConfig::WITH_SIGNATURE_ID,
+    AccountConfig::COMBINE_PDF_RESULT_KEY,
+    AccountConfig::REQUIRE_SIGNING_REASON_KEY
  ].freeze

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

  before_action :load_account
@@ -8,6 +8,7 @@ module Api
    skip_authorization_check

    before_action :set_cors_headers
+    before_action :set_noindex_headers

    def show
      blob_uuid, purp, exp = ApplicationRecord.signed_id_verifier.verified(params[:signed_uuid])
@@ -20,6 +21,8 @@ module Api

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

+      authorization_check!(blob) if exp.blank?
+
      if request.headers['Range'].present?
        send_blob_byte_range_data blob, request.headers['Range']
      else
@@ -31,5 +34,22 @@ module Api
        end
      end
    end
+
+    private
+
+    def authorization_check!(blob)
+      is_authorized =
+        blob.attachments.all? do |a|
+          a.name.in?(%w[logo preview_images]) ||
+            (current_user && a.record.account.id == current_user.account_id) ||
+            !a.record.account.account_configs.find_or_initialize_by(key: AccountConfig::DOWNLOAD_LINKS_AUTH_KEY).value
+        end
+
+      return if is_authorized
+
+      Rollbar.error('Blob aunauthorized') if defined?(Rollbar)
+
+      raise CanCan::AccessDenied
+    end
  end
 end
@@ -7,6 +7,9 @@ module Api
    skip_before_action :authenticate_user!
    skip_authorization_check

+    before_action :set_cors_headers
+    before_action :set_noindex_headers
+
    # rubocop:disable Metrics
    def show
      Rollbar.info('Blob legacy') if defined?(Rollbar)
@@ -39,31 +39,42 @@ module Api

    private

-    def paginate(relation)
-      result = relation.order(id: :desc)
+    def paginate(relation, field: :id)
+      result = relation.order(field => :desc)
                       .limit([params.fetch(:limit, DEFAULT_LIMIT).to_i, MAX_LIMIT].min)

-      result = result.where(id: ...params[:after].to_i) if params[:after].present?
-      result = result.where(id: (params[:before].to_i + 1)...) if params[:before].present?
+      if field == :id
+        result = result.where(id: ...params[:after].to_i) if params[:after].present?
+        result = result.where(id: (params[:before].to_i + 1)...) if params[:before].present?
+      else
+        result = result.where(field => ...params[:after]) if params[:after].present?
+        result = result.where(field => (params[:before] + 1)...) if params[:before].present?
+      end

      result
    end

    def authenticate_user!
-      @current_user ||=
-        if request.headers['X-Auth-Token'].present?
-          sha256 = Digest::SHA256.hexdigest(request.headers['X-Auth-Token'])
-
-          User.joins(:access_token).active.find_by(access_token: { sha256: })
-        end
-
      render json: { error: 'Not authenticated' }, status: :unauthorized unless current_user
    end

+    def current_user
+      super || @current_user ||=
+                 if request.headers['X-Auth-Token'].present?
+                   sha256 = Digest::SHA256.hexdigest(request.headers['X-Auth-Token'])
+
+                   User.joins(:access_token).active.find_by(access_token: { sha256: })
+                 end
+    end
+
    def current_account
      current_user&.account
    end

+    def set_noindex_headers
+      headers['X-Robots-Tag'] = 'noindex'
+    end
+
    def set_cors_headers
      headers['Access-Control-Allow-Origin'] = '*'
      headers['Access-Control-Allow-Methods'] = 'POST, GET, PUT, PATCH, DELETE, OPTIONS'
@@ -1,16 +1,37 @@
 # frozen_string_literal: true

 module Api
-  class AttachmentsController < ApiBaseController
-    skip_before_action :authenticate_user!
-    skip_authorization_check
+  class AttachmentsController < ActionController::API
+    include ActionController::Cookies
+    include ActiveStorage::SetCurrent
+
+    COOKIE_STORE_LIMIT = 10

    def create
      submitter = Submitter.find_by!(slug: params[:submitter_slug])

      attachment = Submitters.create_attachment!(submitter, params)

-      render json: attachment.as_json(only: %i[uuid], methods: %i[url filename content_type])
+      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])
+    end
+
+    def build_new_cookie_signatures_json(submitter, attachment)
+      values =
+        begin
+          JSON.parse(cookies.encrypted[:signature_uuids].presence || '{}')
+        rescue JSON::ParserError
+          {}
+        end
+
+      values[submitter.email] = attachment.uuid
+
+      values = values.to_a.last(COOKIE_STORE_LIMIT).to_h if values.size > COOKIE_STORE_LIMIT
+
+      values.to_json
    end
  end
 end
@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Api
+  class FormEventsController < ApiBaseController
+    load_and_authorize_resource :submitter, parent: false
+
+    def index
+      submitters = @submitters.where.not(completed_at: nil)
+
+      params[:after] = Time.zone.at(params[:after].to_i) if params[:after].present?
+      params[:before] = Time.zone.at(params[:before].to_i) if params[:before].present?
+
+      submitters = paginate(
+        submitters.preload(template: :folder, submission: [:submitters, { audit_trail_attachment: :blob,
+                                                                          combined_document_attachment: :blob }],
+                           documents_attachments: :blob, attachments_attachments: :blob),
+        field: :completed_at
+      )
+
+      render json: {
+        data: submitters.map do |s|
+                {
+                  event_type: 'form.completed',
+                  timestamp: s.completed_at,
+                  data: Submitters::SerializeForWebhook.call(s)
+                }
+              end,
+        pagination: {
+          count: submitters.size,
+          next: submitters.last&.completed_at&.to_i,
+          prev: submitters.first&.completed_at&.to_i
+        }
+      }
+    end
+  end
+end
@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Api
+  class SubmissionEventsController < ApiBaseController
+    load_and_authorize_resource :submission, parent: false
+
+    def index
+      submissions = build_completed_query(@submissions)
+
+      params[:after] = Time.zone.at(params[:after].to_i) if params[:after].present?
+      params[:before] = Time.zone.at(params[:before].to_i) if params[:before].present?
+
+      submissions = paginate(submissions.preload(
+                               :created_by_user, :submission_events,
+                               template: :folder,
+                               submitters: { documents_attachments: :blob, attachments_attachments: :blob },
+                               audit_trail_attachment: :blob
+                             ),
+                             field: :completed_at)
+
+      render json: {
+        data: submissions.map do |s|
+                {
+                  event_type: 'submission.completed',
+                  timestamp: s.completed_at,
+                  data: Submissions::SerializeForApi.call(s, s.submitters)
+                }
+              end,
+        pagination: {
+          count: submissions.size,
+          next: submissions.last&.completed_at&.to_i,
+          prev: submissions.first&.completed_at&.to_i
+        }
+      }
+    end
+
+    private
+
+    def build_completed_query(submissions)
+      submissions = submissions.where(
+        Submitter.where(completed_at: nil).where(
+          Submitter.arel_table[:submission_id].eq(Submission.arel_table[:id])
+        ).select(1).arel.exists.not
+      )
+
+      submissions.joins(:submitters)
+                 .group(:id)
+                 .select(Submission.arel_table[Arel.star],
+                         Submitter.arel_table[:completed_at].maximum.as('completed_at'))
+    end
+  end
+end
@@ -19,10 +19,11 @@ module Api

      submissions = paginate(submissions.preload(:created_by_user, :submitters,
                                                 template: :folder,
+                                                 combined_document_attachment: :blob,
                                                 audit_trail_attachment: :blob))

      render json: {
-        data: submissions.as_json(serialize_params),
+        data: submissions.as_json(Submissions::SerializeForApi::SERIALIZE_PARAMS),
        pagination: {
          count: submissions.size,
          next: submissions.last&.id,
@@ -44,33 +45,11 @@ module Api
        @submission.audit_trail_attachment = Submissions::GenerateAuditTrail.call(@submission)
      end

-      serialized_submitters = submitters.map { |submitter| Submitters::SerializeForApi.call(submitter) }
-
-      json = @submission.as_json(
-        serialize_params.deep_merge(
-          include: { submission_events: { only: %i[id submitter_id event_type event_timestamp] } }
-        )
-      )
-
-      if submitters.all?(&:completed_at?)
-        last_submitter = submitters.max_by(&:completed_at)
-
-        json[:documents] = serialized_submitters.find { |e| e['id'] == last_submitter.id }['documents']
-        json[:status] = 'completed'
-        json[:completed_at] = last_submitter.completed_at
-      else
-        json[:documents] = []
-        json[:status] = 'pending'
-        json[:completed_at] = nil
-      end
-
-      json[:submitters] = serialized_submitters
-
-      render json:
+      render json: Submissions::SerializeForApi.call(@submission, submitters, params)
    end

    def create
-      Params::SubmissionCreateValidator.call(params, dry_run: !Docuseal.multitenant?)
+      Params::SubmissionCreateValidator.call(params)

      return render json: { error: 'Template not found' }, status: :unprocessable_entity if @template.nil?

@@ -85,15 +64,19 @@ module Api

      submissions = create_submissions(@template, params)

+      submissions.each do |submission|
+        SendSubmissionCreatedWebhookRequestJob.perform_async({ 'submission_id' => submission.id })
+      end
+
      Submissions.send_signature_requests(submissions)

      submissions.each do |submission|
        if submission.submitters.all?(&:completed_at?) && submission.submitters.last
-          ProcessSubmitterCompletionJob.perform_later(submission.submitters.last)
+          ProcessSubmitterCompletionJob.perform_async({ 'submitter_id' => submission.submitters.last.id })
        end
      end

-      render json: submissions.flat_map(&:submitters)
+      render json: build_create_json(submissions)
    rescue Submitters::NormalizeValues::BaseError => e
      Rollbar.warning(e) if defined?(Rollbar)

@@ -101,15 +84,31 @@ module Api
    end

    def destroy
-      @submission.update!(archived_at: Time.current)
+      if params[:permanently] == 'true'
+        @submission.destroy!
+      else
+        @submission.update!(archived_at: Time.current)

-      SendSubmissionArchivedWebhookRequestJob.perform_later(@submission)
+        SendSubmissionArchivedWebhookRequestJob.perform_async('submission_id' => @submission.id)
+      end

-      render json: @submission.as_json(only: %i[id], methods: %i[archived_at])
+      render json: @submission.as_json(only: %i[id archived_at])
    end

    private

+    def build_create_json(submissions)
+      json = submissions.flat_map do |submission|
+        submission.submitters.map do |s|
+          Submitters::SerializeForApi.call(s, with_documents: false, with_urls: true, params:)
+        end
+      end
+
+      json = { submitters: json } if request.path.ends_with?('/init')
+
+      json
+    end
+
    def create_submissions(template, params)
      is_send_email = !params[:send_email].in?(['false', false])

@@ -129,7 +128,6 @@ module Api
          template:,
          user: current_user,
          source: :api,
-          mark_as_sent: is_send_email,
          submitters_order: params[:submitters_order] || params[:order] || 'preserved',
          submissions_attrs:,
          params:
@@ -147,33 +145,18 @@ module Api
      end
    end

-    def serialize_params
-      {
-        only: %i[id source submitters_order created_at updated_at archived_at],
-        methods: %i[audit_log_url],
-        include: {
-          submitters: { only: %i[id slug uuid name email phone
-                                 completed_at opened_at sent_at
-                                 created_at updated_at external_id metadata],
-                        methods: %i[status application_key] },
-          template: { only: %i[id name external_id created_at updated_at],
-                      methods: %i[folder_name] },
-          created_by_user: { only: %i[id email first_name last_name] }
-        }
-      }
-    end
-
    def submissions_params
      permitted_attrs = [
        :send_email, :send_sms, :bcc_completed, :completed_redirect_url, :reply_to, :go_to_last,
+        :expire_at,
        {
          message: %i[subject body],
          submitters: [[:send_email, :send_sms, :completed_redirect_url, :uuid, :name, :email, :role,
                        :completed, :phone, :application_key, :external_id, :reply_to, :go_to_last,
                        { metadata: {}, values: {}, readonly_fields: [], message: %i[subject body],
-                          fields: [:name, :uuid, :default_value, :title, :description,
+                          fields: [:name, :uuid, :default_value, :value, :title, :description,
                                   :readonly, :redacted, :validation_pattern, :invalid_message,
-                                   { default_value: [] }] }]]
+                                   { default_value: [], value: [], preferences: {} }] }]]
        }
      ]

@@ -13,7 +13,7 @@ module Api

      SubmissionEvents.create_with_tracking_data(submitter, 'view_form', request)

-      SendFormViewedWebhookRequestJob.perform_later(submitter)
+      SendFormViewedWebhookRequestJob.perform_async({ 'submitter_id' => submitter.id })

      render json: {}
    end
@@ -10,6 +10,11 @@ module Api
      submitters = submitters.where(external_id: params[:application_key]) if params[:application_key].present?
      submitters = submitters.where(external_id: params[:external_id]) if params[:external_id].present?
      submitters = submitters.where(submission_id: params[:submission_id]) if params[:submission_id].present?
+
+      if params[:template_id].present?
+        submitters = submitters.joins(:submission).where(submission: { template_id: params[:template_id] })
+      end
+
      submitters = maybe_filder_by_completed_at(submitters, params)

      submitters = paginate(
@@ -18,7 +23,9 @@ module Api
      )

      render json: {
-        data: submitters.map { |s| Submitters::SerializeForApi.call(s, with_template: true, with_events: true) },
+        data: submitters.map do |s|
+                Submitters::SerializeForApi.call(s, with_template: true, with_events: true, params:)
+              end,
        pagination: {
          count: submitters.size,
          next: submitters.last&.id,
@@ -30,7 +37,7 @@ module Api
    def show
      Submissions::EnsureResultGenerated.call(@submitter) if @submitter.completed_at?

-      render json: Submitters::SerializeForApi.call(@submitter, with_template: true, with_events: true)
+      render json: Submitters::SerializeForApi.call(@submitter, with_template: true, with_events: true, params:)
    end

    def update
@@ -61,12 +68,19 @@ module Api
      end

      if @submitter.completed_at?
-        ProcessSubmitterCompletionJob.perform_later(@submitter)
+        ProcessSubmitterCompletionJob.perform_async({ 'submitter_id' => @submitter.id })
      elsif normalized_params[:send_email] || normalized_params[:send_sms]
        Submitters.send_signature_requests([@submitter])
      end

-      render json: Submitters::SerializeForApi.call(@submitter, with_template: false, with_events: false)
+      render json: Submitters::SerializeForApi.call(@submitter, with_template: false,
+                                                                with_urls: true,
+                                                                with_events: false,
+                                                                params:)
+    rescue Submitters::NormalizeValues::BaseError => e
+      Rollbar.warning(e) if defined?(Rollbar)
+
+      render json: { error: e.message }, status: :unprocessable_entity
    end

    def submitter_params
@@ -76,8 +90,9 @@ module Api
        :send_email, :send_sms, :reply_to, :completed_redirect_url, :uuid, :name, :email, :role,
        :completed, :phone, :application_key, :external_id, :go_to_last,
        { metadata: {}, values: {}, readonly_fields: [], message: %i[subject body],
-          fields: [[:name, :uuid, :default_value, :readonly, :redacted, :validation_pattern, :invalid_message,
-                    { default_value: [] }]] }
+          fields: [[:name, :uuid, :default_value, :value,
+                    :readonly, :redacted, :validation_pattern, :invalid_message,
+                    { default_value: [], value: [], preferences: {} }]] }
      )
    end

@@ -96,20 +111,58 @@ module Api
    end

    def assign_submitter_attrs(submitter, attrs)
-      submitter.email = Submissions.normalize_email(attrs[:email]) if attrs.key?(:email)
-      submitter.phone = attrs[:phone].to_s.gsub(/[^0-9+]/, '') if attrs.key?(:phone)
-      submitter.values = submitter.values.merge(attrs[:values].to_unsafe_h) if attrs[:values].present?
-      submitter.completed_at = attrs[:completed] ? Time.current : submitter.completed_at
-      submitter.external_id = attrs[:application_key] if attrs.key?(:application_key)
-      submitter.external_id = attrs[:external_id] if attrs.key?(:external_id)
-      submitter.metadata = attrs[:metadata] if attrs.key?(:metadata)
+      values = attrs[:values]&.to_unsafe_h || {}

      assign_submission_fields(submitter.submission)
+
+      phone_field_uuid = submitter.submission.template_fields.find do |f|
+        values[f['uuid']].present? && f['type'] == 'phone'
+      end&.dig('uuid')
+
+      submitter.email = Submissions.normalize_email(attrs[:email]) if attrs.key?(:email)
+
+      if attrs.key?(:phone)
+        submitter.phone = attrs[:phone].to_s.gsub(/[^0-9+]/, '')
+      elsif values[phone_field_uuid].present?
+        submitter.phone = values[phone_field_uuid].to_s.gsub(/[^0-9+]/, '')
+      end
+
+      values = values.except(phone_field_uuid)
+
+      submitter.values = submitter.values.merge(values) if values.present?
+      submitter.metadata = attrs[:metadata] if attrs.key?(:metadata)
+
+      maybe_assign_completed_attributes(submitter, attrs)
+
+      assign_external_id(submitter, attrs)
      assign_preferences(submitter, attrs)

      submitter
    end

+    def maybe_assign_completed_attributes(submitter, attrs)
+      submitter.completed_at = attrs[:completed] ? Time.current : submitter.completed_at
+
+      if attrs[:completed]
+        submitter.values = Submitters::SubmitValues.merge_default_values(submitter)
+        submitter.values = Submitters::SubmitValues.merge_formula_values(submitter)
+        submitter.values = Submitters::SubmitValues.maybe_remove_condition_values(submitter)
+
+        submitter.values = submitter.values.transform_values do |v|
+          v == '{{date}}' ? Time.current.in_time_zone(submitter.account.timezone).to_date.to_s : v
+        end
+      end
+
+      submitter
+    end
+
+    def assign_external_id(submitter, attrs)
+      submitter.external_id = attrs[:application_key] if attrs.key?(:application_key)
+      submitter.external_id = attrs[:external_id] if attrs.key?(:external_id)
+
+      submitter
+    end
+
    def assign_submission_fields(submission)
      submission.template_fields ||= submission.template.fields
      submission.template_schema ||= submission.template.schema
@@ -7,6 +7,11 @@ module Api
    def create
      authorize!(:manage, @template)

+      ActiveRecord::Associations::Preloader.new(
+        records: [@template],
+        associations: [schema_documents: :preview_images_attachments]
+      ).call
+
      cloned_template = Templates::Clone.call(
        @template,
        author: current_user,
@@ -18,9 +23,11 @@ module Api
      cloned_template.source = :api
      cloned_template.save!

-      Templates::CloneAttachments.call(template: cloned_template, original_template: @template)
+      schema_documents = Templates::CloneAttachments.call(template: cloned_template, original_template: @template)

-      render json: Templates::SerializeForApi.call(cloned_template)
+      SendTemplateCreatedWebhookRequestJob.perform_async('template_id' => cloned_template.id)
+
+      render json: Templates::SerializeForApi.call(cloned_template, schema_documents)
    end
  end
 end
@@ -65,11 +65,13 @@ module Api

      @template.update!(template_params)

+      SendTemplateUpdatedWebhookRequestJob.perform_async('template_id' => @template.id)
+
      render json: @template.as_json(only: %i[id updated_at])
    end

    def destroy
-      if params[:permanently] == 'true' && !Docuseal.multitenant?
+      if params[:permanently] == 'true'
        @template.destroy!
      else
        @template.update!(archived_at: Time.current)
@@ -91,10 +93,26 @@ module Api
    end

    def template_params
+      permitted_params = [
+        :name,
+        :external_id,
+        {
+          submitters: [%i[name uuid]],
+          fields: [[:uuid, :submitter_uuid, :name, :type,
+                    :required, :readonly, :default_value,
+                    :title, :description,
+                    { preferences: {},
+                      conditions: [%i[field_uuid value action]],
+                      options: [%i[value uuid]],
+                      validation: %i[message pattern],
+                      areas: [%i[x y w h cell_w attachment_uuid option_uuid page]] }]]
+        }
+      ]
+
      if params.key?(:template)
-        params.require(:template).permit(:name, submitters: [%i[name uuid]])
+        params.require(:template).permit(permitted_params)
      else
-        params.permit(:name, submitters: [%i[name uuid]])
+        params.permit(permitted_params)
      end
    end
  end
@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Api
+  class ToolsController < ApiBaseController
+    skip_authorization_check
+
+    def merge
+      files = params[:files] || []
+
+      return render json: { error: 'Files are required' }, status: :unprocessable_entity if files.blank?
+      return render json: { error: 'At least 2 files are required' }, status: :unprocessable_entity if files.size < 2
+
+      render json: {
+        data: Base64.encode64(PdfUtils.merge(files.map { |base64| StringIO.new(Base64.decode64(base64)) }).string)
+      }
+    end
+
+    def verify
+      file = Base64.decode64(params[:file])
+      pdf = HexaPDF::Document.new(io: StringIO.new(file))
+
+      trusted_certs = Accounts.load_trusted_certs(current_account)
+
+      is_checksum_found = ActiveStorage::Attachment.joins(:blob)
+                                                   .where(name: 'documents', record_type: 'Submitter')
+                                                   .exists?(blob: { checksum: Digest::MD5.base64digest(file) })
+
+      render json: {
+        checksum_status: is_checksum_found ? 'verified' : 'not_found',
+        signatures: pdf.signatures.map do |sig|
+          {
+            verification_result: sig.verify(trusted_certs:).messages,
+            signer_name: sig.signer_name,
+            signing_reason: sig.signing_reason,
+            signing_time: sig.signing_time,
+            signature_type: sig.signature_type
+          }
+        end
+      }
+    end
+  end
+end
@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Api
+  class UsersController < ApiBaseController
+    authorize_resource :current_user
+
+    def show
+      render json: current_user.as_json(only: %i[id first_name last_name email])
+    end
+  end
+end
@@ -52,7 +52,8 @@ class ApplicationController < ActionController::Base
  private

  def with_browser_locale(&)
-    locale = request.env['HTTP_ACCEPT_LANGUAGE'].to_s[BROWSER_LOCALE_REGEXP].to_s
+    locale   = params[:lang].presence
+    locale ||= request.env['HTTP_ACCEPT_LANGUAGE'].to_s[BROWSER_LOCALE_REGEXP].to_s

    locale =
      if locale.starts_with?('en-') && locale != 'en-US'
@@ -9,6 +9,8 @@ class ConsoleRedirectController < ApplicationController
      params[:redir] = Docuseal.multitenant? ? "#{Docuseal::CONSOLE_URL}/plans" : "#{Docuseal::CONSOLE_URL}/on_premise"
    end

+    params[:redir] = "#{Docuseal::CONSOLE_URL}/manage" if request.path == '/manage'
+
    return redirect_to(new_user_session_path({ redir: params[:redir] }.compact)) if true_user.blank?

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

+  SAFE_ERROR_MESSAGE_CLASSES = [
+    ActionDispatch::Http::Parameters::ParseError,
+    JSON::ParserError
+  ].freeze
+
  def show
    if request.original_fullpath.in?(ENTERPRISE_PATHS) && error_status_code == 404
      return render json: { status: 404, message: ENTERPRISE_FEATURE_MESSAGE }, status: :not_found
@@ -24,7 +29,11 @@ class ErrorsController < ActionController::Base
      f.json do
        set_cors_headers

-        render json: { status: error_status_code }, status: error_status_code
+        exception = request.env['action_dispatch.exception']
+
+        error = exception.message if exception.class.in?(SAFE_ERROR_MESSAGE_CLASSES)
+
+        render json: { status: error_status_code, error: }.compact, status: error_status_code
      end

      f.html { render error_status_code.to_s, status: error_status_code }
@@ -57,8 +57,10 @@ class EsignSettingsController < ApplicationController
    save_new_cert!(@encrypted_config, @cert_record)

    redirect_to settings_esign_path, notice: 'Certificate has been successfully added!'
-  rescue OpenSSL::PKCS12::PKCS12Error
-    @cert_record.errors.add(:password, "is invalid. Make sure you're uploading a valid .p12 file")
+  rescue OpenSSL::PKCS12::PKCS12Error => e
+    Rollbar.error(e) if defined?(Rollbar)
+
+    @cert_record.errors.add(:password, e.message)

    render turbo_stream: turbo_stream.replace(:modal, template: 'esign_settings/new'), status: :unprocessable_entity
  end
@@ -18,6 +18,12 @@ class PersonalizationSettingsController < ApplicationController
  end

  def create
+    if @account_config.value.is_a?(Hash)
+      @account_config.value = @account_config.value.reject do |_, v|
+        v.blank? && v != false
+      end
+    end
+
    if @account_config.value != false && @account_config.value.blank?
      @account_config.destroy!
    else
@@ -3,10 +3,14 @@
 class SessionsController < Devise::SessionsController
  before_action :configure_permitted_parameters

+  around_action :with_browser_locale
+
  def create
    email = sign_in_params[:email].to_s.downcase

    if Docuseal.multitenant? && !User.exists?(email:)
+      Rollbar.warning('Sign in new user') if defined?(Rollbar)
+
      return redirect_to new_registration_path(sign_up: true, user: sign_in_params.slice(:email)),
                         notice: 'Create a new account'
    end
@@ -17,10 +17,7 @@ class StartFormController < ApplicationController
  def update
    return redirect_to start_form_path(@template.slug) if @template.archived_at?

-    @submitter = Submitter.where(submission: @template.submissions.where(archived_at: nil))
-                          .order(id: :desc)
-                          .then { |rel| params[:resubmit].present? ? rel.where(completed_at: nil) : rel }
-                          .find_or_initialize_by(**submitter_params.compact_blank)
+    @submitter = find_or_initialize_submitter(@template, submitter_params)

    if @submitter.completed_at?
      redirect_to start_form_completed_path(@template.slug, email: submitter_params[:email])
@@ -33,7 +30,13 @@ class StartFormController < ApplicationController

      assign_submission_attributes(@submitter, @template) if @submitter.new_record?

+      is_new_record = @submitter.new_record?
+
      if @submitter.save
+        if is_new_record
+          SendSubmissionCreatedWebhookRequestJob.perform_async({ 'submission_id' => @submitter.submission.id })
+        end
+
        redirect_to submit_form_path(@submitter.slug)
      else
        render :show
@@ -49,6 +52,15 @@ class StartFormController < ApplicationController

  private

+  def find_or_initialize_submitter(template, submitter_params)
+    Submitter.where(submission: template.submissions.where(expire_at: Time.current..)
+                                        .or(template.submissions.where(expire_at: nil)).where(archived_at: nil))
+             .order(id: :desc)
+             .where(declined_at: nil)
+             .then { |rel| params[:resubmit].present? ? rel.where(completed_at: nil) : rel }
+             .find_or_initialize_by(**submitter_params.compact_blank)
+  end
+
  def assign_submission_attributes(submitter, template)
    resubmit_submitter =
      if params[:resubmit].present?
@@ -75,6 +87,8 @@ class StartFormController < ApplicationController
                                            template_submitters: template.submitters,
                                            source: :link)

+    submitter.account_id = submitter.submission.account_id
+
    submitter
  end

@@ -19,6 +19,8 @@ class SubmissionsController < ApplicationController
  def create
    authorize!(:create, Submission)

+    save_template_message(@template, params) if params[:save_message] == '1'
+
    if params[:is_custom_message] != '1'
      params.delete(:subject)
      params.delete(:body)
@@ -37,26 +39,45 @@ class SubmissionsController < ApplicationController
                                           user: current_user,
                                           source: :invite,
                                           submitters_order: params[:preserve_order] == '1' ? 'preserved' : 'random',
-                                           mark_as_sent: params[:send_email] == '1',
                                           submissions_attrs: submissions_params[:submission].to_h.values,
                                           params: params.merge('send_completed_email' => true))
      end

+    submissions.each do |submission|
+      SendSubmissionCreatedWebhookRequestJob.perform_async({ 'submission_id' => submission.id })
+    end
+
    Submissions.send_signature_requests(submissions)

    redirect_to template_path(@template), notice: 'New recipients have been added'
  end

  def destroy
-    @submission.update!(archived_at: Time.current)
+    notice =
+      if params[:permanently].present?
+        @submission.destroy!

-    SendSubmissionArchivedWebhookRequestJob.perform_later(@submission)
+        'Submission has been removed'
+      else
+        @submission.update!(archived_at: Time.current)

-    redirect_back(fallback_location: template_path(@submission.template), notice: 'Submission has been archived')
+        SendSubmissionArchivedWebhookRequestJob.perform_async('submission_id' => @submission.id)
+
+        'Submission has been archived'
+      end
+
+    redirect_back(fallback_location: template_path(@submission.template), notice:)
  end

  private

+  def save_template_message(template, params)
+    template.preferences['request_email_subject'] = params[:subject] if params[:subject].present?
+    template.preferences['request_email_body'] = params[:body] if params[:body].present?
+
+    template.save!
+  end
+
  def submissions_params
    params.permit(submission: { submitters: [%i[uuid email phone name]] })
  end
@@ -16,13 +16,16 @@ class SubmissionsDebugController < ApplicationController
        render 'submit_form/show'
      end
      f.pdf do
-        if params[:audit]
-          Submissions::GenerateAuditTrail.call(@submitter.submission)
-        else
-          Submissions::GenerateResultAttachments.call(@submitter)
-        end
+        result =
+          if params[:audit]
+            Submissions::GenerateAuditTrail.call(@submitter.submission)
+          elsif params[:combined]
+            Submissions::GenerateCombinedAttachment.call(@submitter)
+          else
+            Submissions::GenerateResultAttachments.call(@submitter)
+          end

-        send_data ActiveStorage::Attachment.where(name: params[:audit] ? :audit_trail : :documents).last.download,
+        send_data Array.wrap(result).first.download,
                  filename: 'debug.pdf',
                  disposition: 'inline',
                  type: 'application/pdf'
@@ -33,7 +33,17 @@ class SubmissionsDownloadController < ApplicationController
      return head :not_found
    end

-    render json: build_urls(last_submitter)
+    if params[:combined] == 'true'
+      url = build_combined_url(submitter)
+
+      if url
+        render json: [url]
+      else
+        head :not_found
+      end
+    else
+      render json: build_urls(last_submitter)
+    end
  end

  private
@@ -44,7 +54,17 @@ class SubmissionsDownloadController < ApplicationController

  def build_urls(submitter)
    Submitters.select_attachments_for_download(submitter).map do |attachment|
-      ActiveStorage::Blob.proxy_url(attachment.blob, expires_at: FILES_TTL.minutes.from_now.to_i)
+      ActiveStorage::Blob.proxy_url(attachment.blob, expires_at: FILES_TTL.from_now.to_i)
    end
  end
+
+  def build_combined_url(submitter)
+    return if submitter.submission.submitters.exists?(completed_at: nil)
+    return if submitter.submission.submitters.order(:completed_at).last != submitter
+
+    attachment = submitter.submission.combined_document_attachment
+    attachment ||= Submissions::GenerateCombinedAttachment.call(submitter)
+
+    ActiveStorage::Blob.proxy_url(attachment.blob, expires_at: FILES_TTL.from_now.to_i)
+  end
 end
@@ -7,31 +7,39 @@ class SubmitFormController < ApplicationController
  skip_before_action :authenticate_user!
  skip_authorization_check

-  PRELOAD_ALL_PAGES_AMOUNT = 200
+  CONFIG_KEYS = [].freeze

  def show
    @submitter = Submitter.find_by!(slug: params[:slug])

    return redirect_to submit_form_completed_path(@submitter.slug) if @submitter.completed_at?
+    return render :archived if @submitter.submission.template.archived_at? || @submitter.submission.archived_at?
+    return render :expired if @submitter.submission.expired?
+    return render :declined if @submitter.declined_at?

-    ActiveRecord::Associations::Preloader.new(
-      records: [@submitter],
-      associations: [submission: [:template, { template_schema_documents: :blob }]]
-    ).call
-
-    total_pages =
-      @submitter.submission.template_schema_documents.sum { |e| e.metadata.dig('pdf', 'number_of_pages').to_i }
-
-    if total_pages < PRELOAD_ALL_PAGES_AMOUNT
-      ActiveRecord::Associations::Preloader.new(
-        records: @submitter.submission.template_schema_documents,
-        associations: [:blob, { preview_images_attachments: :blob }]
-      ).call
-    end
+    Submitters.preload_with_pages(@submitter)

    Submitters::MaybeUpdateDefaultValues.call(@submitter, current_user)

-    render(@submitter.submission.template.archived_at? || @submitter.submission.archived_at? ? :archived : :show)
+    @attachments_index = ActiveStorage::Attachment.where(record: @submitter.submission.submitters, name: :attachments)
+                                                  .preload(:blob).index_by(&:uuid)
+
+    @form_configs = Submitters::FormConfigs.call(@submitter, CONFIG_KEYS)
+
+    return unless @form_configs[:prefill_signature]
+
+    if (user_signature = UserConfigs.load_signature(current_user))
+      @signature_attachment = ActiveStorage::Attachment.find_or_create_by!(
+        blob_id: user_signature.blob_id,
+        name: 'attachments',
+        record: @submitter
+      )
+    end
+
+    @signature_attachment ||=
+      Submitters::MaybeAssignDefaultBrowserSignature.call(@submitter, params, cookies, @attachments_index.values)
+
+    @attachments_index[@signature_attachment.uuid] = @signature_attachment if @signature_attachment
  end

  def update
@@ -42,11 +50,15 @@ class SubmitFormController < ApplicationController
    end

    if submitter.template.archived_at? || submitter.submission.archived_at?
-      Rollbar.info("Archived template: #{submitter.template.id}") if defined?(Rollbar)
-
      return render json: { error: 'Form has been archived.' }, status: :unprocessable_entity
    end

+    if submitter.submission.expired?
+      return render json: { error: 'Form has been expired.' }, status: :unprocessable_entity
+    end
+
+    return render json: { error: 'Form has been declined.' }, status: :unprocessable_entity if submitter.declined_at?
+
    Submitters::SubmitValues.call(submitter, params, request)

    head :ok
@@ -55,7 +67,7 @@ class SubmitFormController < ApplicationController
  end

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

  def success; end
@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class SubmitFormDeclineController < ApplicationController
+  skip_before_action :authenticate_user!
+  skip_authorization_check
+
+  def create
+    submitter = Submitter.find_by!(slug: params[:submit_form_slug])
+
+    return redirect_to submit_form_path(submitter.slug) if submitter.declined_at? ||
+                                                           submitter.completed_at? ||
+                                                           submitter.submission.archived_at? ||
+                                                           submitter.submission.expired? ||
+                                                           submitter.submission.template.archived_at?
+
+    ApplicationRecord.transaction do
+      submitter.update!(declined_at: Time.current)
+
+      SubmissionEvents.create_with_tracking_data(submitter, 'decline_form', request, { reason: params[:reason] })
+    end
+
+    user = submitter.submission.created_by_user || submitter.template.author
+
+    SubmitterMailer.declined_email(submitter, user).deliver_later!
+    SendFormDeclinedWebhookRequestJob.perform_async('submitter_id' => submitter.id)
+
+    redirect_to submit_form_path(submitter.slug)
+  end
+end
@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+class SubmitFormDownloadController < ApplicationController
+  skip_before_action :authenticate_user!
+  skip_authorization_check
+
+  FILES_TTL = 5.minutes
+
+  def index
+    submitter = Submitter.find_by!(slug: params[:submit_form_slug])
+
+    return redirect_to submitter_download_index_path(submitter.slug) if submitter.completed_at?
+
+    return head :unprocessable_entity if submitter.declined_at? ||
+                                         submitter.submission.archived_at? ||
+                                         submitter.submission.expired? ||
+                                         submitter.submission.template.archived_at?
+
+    last_completed_submitter = submitter.submission.submitters
+                                        .where.not(id: submitter.id)
+                                        .where.not(completed_at: nil)
+                                        .max_by(&:completed_at)
+
+    attachments =
+      if last_completed_submitter
+        Submitters.select_attachments_for_download(last_completed_submitter)
+      else
+        submitter.submission.template.schema_documents.preload(:blob)
+      end
+
+    urls = attachments.map do |attachment|
+      ActiveStorage::Blob.proxy_url(attachment.blob, expires_at: FILES_TTL.from_now.to_i)
+    end
+
+    render json: urls
+  end
+end
@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class SubmitFormDrawSignatureController < ApplicationController
+  layout false
+
+  around_action :with_browser_locale, only: %i[show]
+  skip_before_action :authenticate_user!
+  skip_authorization_check
+
+  def show
+    @submitter = Submitter.find_by!(slug: params[:slug])
+
+    return redirect_to submit_form_completed_path(@submitter.slug) if @submitter.completed_at?
+
+    if @submitter.submission.template.archived_at? || @submitter.submission.archived_at?
+      return redirect_to submit_form_path(@submitter.slug)
+    end
+
+    render :show
+  end
+end
@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class SubmitFormValuesController < ApplicationController
+  skip_before_action :authenticate_user!
+  skip_authorization_check
+
+  def index
+    submitter = Submitter.find_by!(slug: params[:submit_form_slug])
+
+    return render json: {} if submitter.completed_at?
+    return render json: {} if submitter.submission.template.archived_at? || submitter.submission.archived_at?
+
+    value = submitter.values[params['field_uuid']]
+    attachment = submitter.attachments.where(created_at: params[:after]..).find_by(uuid: value) if value.present?
+
+    render json: {
+      value:,
+      attachment: attachment&.as_json(only: %i[uuid created_at], methods: %i[url filename content_type])
+    }, head: :ok
+  end
+end
@@ -25,7 +25,7 @@ class SubmittersAutocompleteController < ApplicationController

      term = "#{params[:q].downcase}%"

-      submitters.where(column.matches(term, false, true))
+      submitters.where(column.matches(term))
    else
      Submitters.search(submitters, params[:q])
    end
@@ -7,11 +7,13 @@ class SubmittersSendEmailController < ApplicationController
    if Docuseal.multitenant? && SubmissionEvent.exists?(submitter: @submitter,
                                                        event_type: 'send_email',
                                                        created_at: 24.hours.ago..Time.current)
+      Rollbar.warning("Already sent: #{@submitter.id}") if defined?(Rollbar)
+
      return redirect_back(fallback_location: submission_path(@submitter.submission),
                           alert: 'Email has been sent already.')
    end

-    SendSubmitterInvitationEmailJob.perform_later('submitter_id' => @submitter.id)
+    SendSubmitterInvitationEmailJob.perform_async('submitter_id' => @submitter.id)

    @submitter.sent_at ||= Time.current
    @submitter.save!
@@ -4,11 +4,13 @@ class TemplateDocumentsController < ApplicationController
  load_and_authorize_resource :template

  def create
-    return head :unprocessable_entity if params[:blobs].blank? && params[:files].blank?
+    if params[:blobs].blank? && params[:files].blank?
+      return render json: { error: 'File is missing' }, status: :unprocessable_entity
+    end

    old_fields_hash = @template.fields.hash

-    documents = Templates::CreateAttachments.call(@template, params)
+    documents = Templates::CreateAttachments.call(@template, params, extract_fields: true)

    schema = documents.map do |doc|
      { attachment_uuid: doc.uuid, name: doc.filename.base }
@@ -27,7 +27,7 @@ class TemplatesController < ApplicationController
  def edit
    ActiveRecord::Associations::Preloader.new(
      records: [@template],
-      associations: [schema_documents: { preview_images_attachments: :blob }]
+      associations: [schema_documents: [:blob, { preview_images_attachments: :blob }]]
    ).call

    @template_data =
@@ -43,6 +43,11 @@ class TemplatesController < ApplicationController

  def create
    if @base_template
+      ActiveRecord::Associations::Preloader.new(
+        records: [@base_template],
+        associations: [schema_documents: :preview_images_attachments]
+      ).call
+
      @template = Templates::Clone.call(@base_template, author: current_user,
                                                        name: params.dig(:template, :name),
                                                        folder_name: params[:folder_name])
@@ -53,7 +58,7 @@ class TemplatesController < ApplicationController

    if params[:account_id].present? && authorized_clone_account_id?(params[:account_id])
      @template.account_id = params[:account_id]
-      @template.folder = @template.account.default_template_folder
+      @template.folder = @template.account.default_template_folder if @template.account_id != current_account.id
    else
      @template.account = current_account
    end
@@ -61,6 +66,8 @@ class TemplatesController < ApplicationController
    if @template.save
      Templates::CloneAttachments.call(template: @template, original_template: @base_template) if @base_template

+      SendTemplateUpdatedWebhookRequestJob.perform_async('template_id' => @template.id)
+
      maybe_redirect_to_template(@template)
    else
      render turbo_stream: turbo_stream.replace(:modal, template: 'templates/new'), status: :unprocessable_entity
@@ -70,6 +77,8 @@ class TemplatesController < ApplicationController
  def update
    @template.update!(template_params)

+    SendTemplateUpdatedWebhookRequestJob.perform_async('template_id' => @template.id)
+
    head :ok
  end

@@ -78,8 +87,6 @@ class TemplatesController < ApplicationController
      if params[:permanently].present?
        @template.destroy!

-        Rollbar.info("Remove template: #{@template.id}") if defined?(Rollbar)
-
        'Template has been removed.'
      else
        @template.update!(archived_at: Time.current)
@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+class TemplatesDebugController < ApplicationController
+  load_and_authorize_resource :template
+
+  def show
+    attachment = @template.documents.first
+
+    pdf = HexaPDF::Document.new(io: StringIO.new(attachment.download))
+
+    fields = Templates::FindAcroFields.call(pdf, attachment)
+
+    attachment.metadata['pdf'] ||= {}
+    attachment.metadata['pdf']['fields'] = fields
+
+    @template.update!(fields: Templates::ProcessDocument.normalize_attachment_fields(@template, [attachment]))
+
+    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_uuid],
+          include: { preview_images: { methods: %i[url metadata filename] } }
+        )
+      ).to_json
+
+    render 'templates/edit', layout: 'plain'
+  end
+end
@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+class TemplatesFormPreviewController < ApplicationController
+  layout 'form'
+
+  load_and_authorize_resource :template
+
+  def show
+    @submitter = Submitter.new(uuid: params[:uuid] || @template.submitters.first['uuid'],
+                               account: current_account,
+                               submission: @template.submissions.new(template_submitters: @template.submitters,
+                                                                     account: current_account))
+
+    @submitter.submission.submitters = @template.submitters.map { |item| Submitter.new(uuid: item['uuid']) }
+
+    Submitters.preload_with_pages(@submitter)
+
+    @attachments_index = ActiveStorage::Attachment.where(record: @submitter.submission.submitters, name: :attachments)
+                                                  .preload(:blob).index_by(&:uuid)
+
+    @form_configs = Submitters::FormConfigs.call(@submitter)
+  end
+end
@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+class TemplatesPreferencesController < ApplicationController
+  load_and_authorize_resource :template
+
+  def show; end
+
+  def create
+    authorize!(:update, @template)
+
+    @template.preferences = @template.preferences.merge(template_params[:preferences])
+    @template.preferences = @template.preferences.reject { |_, v| v.is_a?(String) && v.blank? }
+    @template.save!
+
+    head :ok
+  end
+
+  private
+
+  def template_params
+    params.require(:template).permit(
+      preferences: %i[bcc_completed request_email_subject request_email_body
+                      documents_copy_email_subject documents_copy_email_body
+                      documents_copy_email_enabled documents_copy_email_attach_audit
+                      completed_notification_email_attach_documents
+                      completed_notification_email_subject completed_notification_email_body
+                      completed_notification_email_enabled completed_notification_email_attach_audit]
+    ).tap do |attrs|
+      attrs[:preferences] = attrs[:preferences].transform_values do |value|
+        if %w[true false].include?(value)
+          value == 'true'
+        else
+          value
+        end
+      end
+    end
+  end
+end
@@ -12,18 +12,27 @@ class TemplatesUploadsController < ApplicationController

    save_template!(@template, url_params)

-    documents = Templates::CreateAttachments.call(@template, url_params || params)
-
+    documents = Templates::CreateAttachments.call(@template, url_params || params, extract_fields: true)
    schema = documents.map { |doc| { attachment_uuid: doc.uuid, name: doc.filename.base } }

+    if @template.fields.blank?
+      @template.fields = Templates::ProcessDocument.normalize_attachment_fields(@template, documents)
+
+      schema.each { |item| item['pending_fields'] = true } if @template.fields.present?
+    end
+
    @template.update!(schema:)

+    SendTemplateCreatedWebhookRequestJob.perform_async('template_id' => @template.id)
+
    redirect_to edit_template_path(@template)
  rescue Templates::CreateAttachments::PdfEncrypted
    render turbo_stream: turbo_stream.append(params[:form_id], html: helpers.tag.prompt_password)
  rescue StandardError => e
    Rollbar.error(e) if defined?(Rollbar)

+    raise if Rails.env.local?
+
    redirect_to root_path, alert: 'Unable to upload file'
  end

@@ -49,7 +58,7 @@ class TemplatesUploadsController < ApplicationController
    file = ActionDispatch::Http::UploadedFile.new(
      tempfile:,
      filename: File.basename(
-        URI.decode_www_form_component(params[:filename].presence || params[:url])
+        URI.decode_www_form_component(params[:filename].presence || params[:url]), '.*'
      ),
      type: Marcel::MimeType.for(tempfile)
    )
@@ -1,9 +1,13 @@
 # frozen_string_literal: true

 class TimestampServerController < ApplicationController
+  HASH_ALGORITHM = 'SHA256'
+
  before_action :build_encrypted_config
  authorize_resource :encrypted_config

+  TimestampError = Class.new(StandardError)
+
  def create
    return head :not_found if Docuseal.multitenant?

@@ -14,25 +18,29 @@ class TimestampServerController < ApplicationController
    else
      redirect_back fallback_location: settings_notifications_path, alert: 'Unable to save'
    end
-  rescue HexaPDF::Error, SocketError, Submissions::TimestampHandler::TimestampError, OpenSSL::Timestamp::TimestampError
+  rescue SocketError, TimestampError, OpenSSL::Timestamp::TimestampError
    redirect_back fallback_location: settings_notifications_path, alert: 'Invalid Timeserver'
  end

  private

  def test_timeserver_url(url)
-    pdf = HexaPDF::Document.new
-    pdf.pages.add
+    req = OpenSSL::Timestamp::Request.new
+    req.algorithm = HASH_ALGORITHM
+    req.message_imprint = OpenSSL::Digest.digest(HASH_ALGORITHM, 'test')

-    pkcs = Accounts.load_signing_pkcs(current_account)
+    uri = Addressable::URI.parse(url)

-    pdf.sign(StringIO.new,
-             reason: 'Test',
-             certificate: pkcs.certificate,
-             key: pkcs.key,
-             signature_size: 10_000,
-             certificate_chain: pkcs.ca_certs || [],
-             timestamp_handler: Submissions::TimestampHandler.new(tsa_url: url))
+    conn = Faraday.new(uri.origin) do |c|
+      c.basic_auth(uri.user, uri.password) if uri.password.present?
+    end
+
+    response = conn.post(uri.path, req.to_der,
+                         'content-type' => 'application/timestamp-query')
+
+    raise TimestampError if response.status != 200 || response.body.blank?
+
+    response
  end

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

 class UsersController < ApplicationController
-  load_and_authorize_resource :user, only: %i[index edit new update destroy]
+  load_and_authorize_resource :user, only: %i[index edit update destroy]

-  before_action :build_user, only: :create
-  authorize_resource :user, only: :create
+  before_action :build_user, only: %i[new create]
+  authorize_resource :user, only: %i[new create]

  def index
-    @pagy, @users = pagy(@users.active.order(id: :desc))
+    @users =
+      if params[:status] == 'archived'
+        @users.archived
+      else
+        @users.active
+      end
+
+    @pagy, @users = pagy(@users.where(account: current_account).order(id: :desc))
  end

  def new; end
@@ -15,10 +22,20 @@ class UsersController < ApplicationController
  def edit; end

  def create
+    existing_user = User.accessible_by(current_ability).find_by(email: @user.email)
+
+    if existing_user
+      existing_user.archived_at = nil
+      existing_user.assign_attributes(user_params)
+      existing_user.account = current_account
+
+      @user = existing_user
+    end
+
    if @user.save
      UserMailer.invitation_email(@user).deliver_later!

-      redirect_to settings_users_path, notice: 'User has been invited'
+      redirect_back fallback_location: settings_users_path, notice: 'User has been invited'
    else
      render turbo_stream: turbo_stream.replace(:modal, template: 'users/new'), status: :unprocessable_entity
    end
@@ -27,11 +44,19 @@ class UsersController < ApplicationController
  def update
    return redirect_to settings_users_path, notice: 'Unable to update user.' if Docuseal.demo?

-    attrs = user_params.compact_blank
+    attrs = user_params.compact_blank.merge(user_params.slice(:archived_at))
    attrs.delete(:role) if !role_valid?(attrs[:role]) || current_user == @user

+    if params.dig(:user, :account_id).present?
+      account = Account.accessible_by(current_ability).find(params[:user][:account_id])
+
+      authorize!(:manage, account)
+
+      @user.account = account
+    end
+
    if @user.update(attrs)
-      redirect_to settings_users_path, notice: 'User has been updated'
+      redirect_back fallback_location: settings_users_path, notice: 'User has been updated'
    else
      render turbo_stream: turbo_stream.replace(:modal, template: 'users/edit'), status: :unprocessable_entity
    end
@@ -44,7 +69,7 @@ class UsersController < ApplicationController

    @user.update!(archived_at: Time.current)

-    redirect_to settings_users_path, notice: 'User has been removed'
+    redirect_back fallback_location: settings_users_path, notice: 'User has been removed'
  end

  private
@@ -65,6 +90,11 @@ class UsersController < ApplicationController
  end

  def user_params
-    params.require(:user).permit(:email, :first_name, :last_name, :password, :role)
+    if params.key?(:user)
+      params.require(:user).permit(:email, :first_name, :last_name, :password,
+                                   :role, :archived_at, :account_id)
+    else
+      {}
+    end
  end
 end
@@ -9,25 +9,7 @@ class VerifyPdfSignatureController < ApplicationController
        HexaPDF::Document.new(io: file.open)
      end

-    cert_data =
-      if Docuseal.multitenant?
-        value = EncryptedConfig.find_by(account: current_account, key: EncryptedConfig::ESIGN_CERTS_KEY)&.value || {}
-
-        Docuseal::CERTS.merge(value)
-      else
-        EncryptedConfig.find_by(key: EncryptedConfig::ESIGN_CERTS_KEY)&.value || {}
-      end
-
-    default_pkcs = GenerateCertificate.load_pkcs(cert_data)
-
-    custom_certs = cert_data.fetch('custom', []).map do |e|
-      OpenSSL::PKCS12.new(Base64.urlsafe_decode64(e['data']), e['password'].to_s)
-    end
-
-    trusted_certs = [default_pkcs.certificate,
-                     *default_pkcs.ca_certs,
-                     *custom_certs.map(&:certificate),
-                     *custom_certs.flat_map(&:ca_certs).compact]
+    trusted_certs = Accounts.load_trusted_certs(current_account)

    render turbo_stream: turbo_stream.replace('result', partial: 'result',
                                                        locals: { pdfs:, files: params[:files], trusted_certs: })
@@ -5,6 +5,10 @@ class WebhookPreferencesController < ApplicationController
    form.viewed
    form.started
    form.completed
+    form.declined
+    template.created
+    template.updated
+    submission.created
    submission.archived
  ].freeze

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

-    SendFormCompletedWebhookRequestJob.perform_later(submitter)
+    SendFormCompletedWebhookRequestJob.perform_async({ 'submitter_id' => submitter.id,
+                                                       'encrypted_config_id' => @encrypted_config.id })

    redirect_back(fallback_location: settings_webhooks_path, notice: 'Webhook request has been sent.')
  end
@@ -23,6 +23,9 @@ import SignatureForm from './elements/signature_form'
 import SubmitForm from './elements/submit_form'
 import PromptPassword from './elements/prompt_password'
 import EmailsTextarea from './elements/emails_textarea'
+import ToggleOnSubmit from './elements/toggle_on_submit'
+import PasswordInput from './elements/password_input'
+import SearchInput from './elements/search_input'

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

@@ -40,25 +43,6 @@ document.addEventListener('keyup', (e) => {
  }
 })

-window.customElements.define('toggle-visible', ToggleVisible)
-window.customElements.define('disable-hidden', DisableHidden)
-window.customElements.define('turbo-modal', TurboModal)
-window.customElements.define('file-dropzone', FileDropzone)
-window.customElements.define('menu-active', MenuActive)
-window.customElements.define('clipboard-copy', ClipboardCopy)
-window.customElements.define('dynamic-list', DynamicList)
-window.customElements.define('download-button', DownloadButton)
-window.customElements.define('set-origin-url', SetOriginUrl)
-window.customElements.define('set-timezone', SetTimezone)
-window.customElements.define('autoresize-textarea', AutoresizeTextarea)
-window.customElements.define('submitters-autocomplete', SubmittersAutocomplete)
-window.customElements.define('folder-autocomplete', FolderAutocomplete)
-window.customElements.define('signature-form', SignatureForm)
-window.customElements.define('submit-form', SubmitForm)
-window.customElements.define('prompt-password', PromptPassword)
-window.customElements.define('emails-textarea', EmailsTextarea)
-window.customElements.define('toggle-cookies', ToggleCookies)
-
 document.addEventListener('turbo:before-fetch-request', encodeMethodIntoRequestBody)
 document.addEventListener('turbo:submit-end', async (event) => {
  const resp = event.detail?.formSubmission?.result?.fetchResponse?.response
@@ -82,7 +66,31 @@ document.addEventListener('turbo:submit-end', async (event) => {
  URL.revokeObjectURL(url)
 })

-window.customElements.define('template-builder', class extends HTMLElement {
+const safeRegisterElement = (name, element, options = {}) => !window.customElements.get(name) && window.customElements.define(name, element, options)
+
+safeRegisterElement('toggle-visible', ToggleVisible)
+safeRegisterElement('disable-hidden', DisableHidden)
+safeRegisterElement('turbo-modal', TurboModal)
+safeRegisterElement('file-dropzone', FileDropzone)
+safeRegisterElement('menu-active', MenuActive)
+safeRegisterElement('clipboard-copy', ClipboardCopy)
+safeRegisterElement('dynamic-list', DynamicList)
+safeRegisterElement('download-button', DownloadButton)
+safeRegisterElement('set-origin-url', SetOriginUrl)
+safeRegisterElement('set-timezone', SetTimezone)
+safeRegisterElement('autoresize-textarea', AutoresizeTextarea)
+safeRegisterElement('submitters-autocomplete', SubmittersAutocomplete)
+safeRegisterElement('folder-autocomplete', FolderAutocomplete)
+safeRegisterElement('signature-form', SignatureForm)
+safeRegisterElement('submit-form', SubmitForm)
+safeRegisterElement('prompt-password', PromptPassword)
+safeRegisterElement('emails-textarea', EmailsTextarea)
+safeRegisterElement('toggle-cookies', ToggleCookies)
+safeRegisterElement('toggle-on-submit', ToggleOnSubmit)
+safeRegisterElement('password-input', PasswordInput)
+safeRegisterElement('search-input', SearchInput)
+
+safeRegisterElement('template-builder', class extends HTMLElement {
  connectedCallback () {
    this.appElem = document.createElement('div')

@@ -91,6 +99,7 @@ window.customElements.define('template-builder', class extends HTMLElement {
    this.app = createApp(TemplateBuilder, {
      template: reactive(JSON.parse(this.dataset.template)),
      backgroundColor: '#faf7f5',
+      locale: this.dataset.locale,
      withPhone: this.dataset.withPhone === 'true',
      withLogo: this.dataset.withLogo !== 'false',
      editable: this.dataset.editable !== 'false',
@@ -114,12 +123,13 @@ window.customElements.define('template-builder', class extends HTMLElement {
  }
 })

-window.customElements.define('import-list', class extends HTMLElement {
+safeRegisterElement('import-list', class extends HTMLElement {
  connectedCallback () {
    this.appElem = document.createElement('div')

    this.app = createApp(ImportList, {
      template: JSON.parse(this.dataset.template),
+      multitenant: this.dataset.multitenant === 'true',
      authenticityToken: document.querySelector('meta[name="csrf-token"]')?.content
    })

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

  resize () {
    if (this.textarea.clientHeight < this.textarea.scrollHeight) {
-      this.textarea.style.height = `${this.textarea.scrollHeight}px`
+      this.textarea.style.height = `${this.textarea.scrollHeight + 5}px`
    }
  }

@@ -17,13 +17,18 @@ export default targetable(class extends HTMLElement {

    this.toggleState()

-    fetch(this.dataset.src).then((response) => response.json()).then((urls) => {
-      const isSafariIos = /iPhone|iPad|iPod/i.test(navigator.userAgent)
+    fetch(this.dataset.src).then(async (response) => {
+      if (response.ok) {
+        const urls = await response.json()
+        const isSafariIos = /iPhone|iPad|iPod/i.test(navigator.userAgent)

-      if (isSafariIos && urls.length > 1) {
-        this.downloadSafariIos(urls)
+        if (isSafariIos && urls.length > 1) {
+          this.downloadSafariIos(urls)
+        } else {
+          this.downloadUrls(urls)
+        }
      } else {
-        this.downloadUrls(urls)
+        alert('Failed to download files')
      }
    })
  }
@@ -0,0 +1,35 @@
+import { target, targetable } from '@github/catalyst/lib/targetable'
+
+export default targetable(class extends HTMLElement {
+  static [target.static] = [
+    'visiblePasswordIcon',
+    'hiddenPasswordIcon',
+    'passwordInput',
+    'togglePasswordVisibility'
+  ]
+
+  connectedCallback () {
+    this.togglePasswordVisibility.addEventListener('click', this.handleTogglePasswordVisibility)
+    document.addEventListener('turbo:submit-start', this.setInitialPasswordType)
+  }
+
+  disconnectedCallback () {
+    this.togglePasswordVisibility.removeEventListener('click', this.handleTogglePasswordVisibility)
+    document.removeEventListener('turbo:submit-start', this.setInitialPasswordType)
+  }
+
+  handleTogglePasswordVisibility = () => {
+    this.passwordInput.type = this.passwordInput.type === 'password' ? 'text' : 'password'
+    this.toggleIcon()
+  }
+
+  setInitialPasswordType = () => {
+    this.passwordInput.type = 'password'
+    this.toggleIcon()
+  }
+
+  toggleIcon = () => {
+    this.visiblePasswordIcon.classList.toggle('hidden', this.passwordInput.type === 'password')
+    this.hiddenPasswordIcon.classList.toggle('hidden', this.passwordInput.type === 'text')
+  }
+})
@@ -0,0 +1,25 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.input.addEventListener('focus', () => {
+      if (this.title) {
+        this.title.classList.add('hidden', 'md:block')
+        this.input.classList.add('w-60')
+      }
+    })
+
+    this.input.addEventListener('blur', (e) => {
+      if (this.title && !e.target.value) {
+        this.title.classList.remove('hidden')
+        this.input.classList.remove('w-60')
+      }
+    })
+  }
+
+  get input () {
+    return this.querySelector('input')
+  }
+
+  get title () {
+    return document.querySelector(this.dataset.title)
+  }
+}
@@ -5,8 +5,12 @@ export default targetable(class extends HTMLElement {
  static [target.static] = ['canvas', 'input', 'clear', 'button']

  async connectedCallback () {
-    this.canvas.width = this.canvas.parentNode.parentNode.clientWidth
-    this.canvas.height = this.canvas.parentNode.parentNode.clientWidth / 3
+    const scale = 3
+
+    this.canvas.width = this.canvas.parentNode.clientWidth * scale
+    this.canvas.height = this.canvas.parentNode.clientHeight * scale
+
+    this.canvas.getContext('2d').scale(scale, scale)

    const { default: SignaturePad } = await import('signature_pad')

@@ -45,11 +45,7 @@ export default class extends HTMLElement {
      this.currentFetch.then(async (resp) => {
        const items = await resp.json()

-        if (q.length < 3) {
-          resolve(items.filter((e) => e[this.dataset.field].startsWith(q)))
-        } else {
-          resolve(items)
-        }
+        resolve(items)
      }).catch(() => {
        resolve([])
      }).finally(() => {
@@ -0,0 +1,35 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    document.addEventListener('turbo:submit-end', this.onSubmitEnd)
+
+    this.form.addEventListener('submit', this.onSubmit)
+  }
+
+  disconnectedCallback () {
+    document.removeEventListener('turbo:submit-end', this.onSubmitEnd)
+
+    this.form.removeEventListener('submit', this.onSubmit)
+  }
+
+  onSubmit = () => {
+    this.element.classList.add('invisible')
+  }
+
+  onSubmitEnd = (event) => {
+    if (event.target === this.form) {
+      const resp = event.detail?.formSubmission?.result?.fetchResponse?.response
+
+      if (resp?.status / 100 === 2) {
+        this.element.classList.remove('invisible')
+      }
+    }
+  }
+
+  get element () {
+    return document.getElementById(this.dataset.elementId)
+  }
+
+  get form () {
+    return this.closest('form')
+  }
+}
@@ -0,0 +1,21 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.button.disabled = false
+
+    this.form.addEventListener('submit', () => {
+      this.button.disabled = true
+    })
+  }
+
+  disconnectedCallback () {
+    this.button.disabled = false
+  }
+
+  get button () {
+    return this.querySelector('[type="submit"]')
+  }
+
+  get form () {
+    return this.querySelector('form') || this.closest('form')
+  }
+}
@@ -2,23 +2,36 @@ import { createApp, reactive } from 'vue'

 import Form from './submission_form/form'
 import DownloadButton from './elements/download_button'
+import ToggleSubmit from './elements/toggle_submit'

-window.customElements.define('download-button', DownloadButton)
-window.customElements.define('submission-form', class extends HTMLElement {
+const safeRegisterElement = (name, element, options = {}) => !window.customElements.get(name) && window.customElements.define(name, element, options)
+
+safeRegisterElement('download-button', DownloadButton)
+safeRegisterElement('toggle-submit', ToggleSubmit)
+safeRegisterElement('submission-form', class extends HTMLElement {
  connectedCallback () {
    this.appElem = document.createElement('div')

    this.app = createApp(Form, {
      submitter: JSON.parse(this.dataset.submitter),
      canSendEmail: this.dataset.canSendEmail === 'true',
+      previousSignatureValue: this.dataset.previousSignatureValue,
      goToLast: this.dataset.goToLast === 'true',
      isDemo: this.dataset.isDemo === 'true',
      attribution: this.dataset.attribution !== 'false',
+      scrollPadding: this.dataset.scrollPadding || '-80px',
+      dryRun: this.dataset.dryRun === 'true',
+      expand: ['true', 'false'].includes(this.dataset.expand) ? this.dataset.expand === 'true' : null,
+      withSignatureId: this.dataset.withSignatureId === 'true',
+      requireSigningReason: this.dataset.requireSigningReason === 'true',
      withConfetti: this.dataset.withConfetti !== 'false',
+      withDisclosure: this.dataset.withDisclosure === 'true',
      withTypedSignature: this.dataset.withTypedSignature !== 'false',
      authenticityToken: document.querySelector('meta[name="csrf-token"]')?.content,
+      rememberSignature: this.dataset.rememberSignature === 'true',
      values: reactive(JSON.parse(this.dataset.values)),
      completedButton: JSON.parse(this.dataset.completedButton || '{}'),
+      withQrButton: true,
      completedMessage: JSON.parse(this.dataset.completedMessage || '{}'),
      completedRedirectUrl: this.dataset.completedRedirectUrl,
      attachments: reactive(JSON.parse(this.dataset.attachments)),
@@ -0,0 +1,34 @@
+import Rollbar from 'rollbar/dist/rollbar.umd'
+
+const token = document.querySelector('meta[name="rollbar-token"]')?.getAttribute('content')
+
+if (token) {
+  window.Rollbar ||= new Rollbar({
+    accessToken: token,
+    captureUncaught: true,
+    captureUnhandledRejections: true,
+    captureIp: false,
+    autoInstrument: false,
+    ignoredMessages: [
+      /Failed to fetch/i,
+      /NetworkError/i,
+      /Load failed/i,
+      /Clipboard write is not allowed/i
+    ],
+    transform (payload) {
+      payload.body.telemetry = []
+
+      const string = JSON.stringify(payload)
+
+      return JSON.parse(string.replace(/(\/[des]\/)\w{6}/g, (_, m) => m))
+    },
+    payload: {
+      client: {
+        javascript: {
+          source_map_enabled: true
+        }
+      },
+      environment: 'production'
+    }
+  })
+}
@@ -1,12 +1,12 @@
 <template>
  <div
-    class="flex absolute lg:text-base -outline-offset-1"
+    class="field-area flex absolute lg:text-base -outline-offset-1"
    dir="auto"
    :style="computedStyle"
-    :class="{ 'text-[1.5vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars, 'cursor-default': !submittable, 'border border-red-100 bg-red-100 cursor-pointer': submittable, 'border border-red-100': !isActive && submittable, 'bg-opacity-80': !isActive && !isValueSet && submittable, 'outline-red-500 outline-dashed outline-2 z-10': isActive && submittable, 'bg-opacity-40': (isActive || isValueSet) && submittable }"
+    :class="{ 'text-[1.6vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars, 'cursor-default': !submittable, 'border border-red-100 bg-red-100 cursor-pointer': submittable, 'border border-red-100': !isActive && submittable, 'bg-opacity-80': !isActive && !isValueSet && submittable, 'field-area-active outline-red-500 outline-dashed outline-2 z-10': isActive && submittable, 'bg-opacity-40': (isActive || isValueSet) && submittable }"
  >
    <div
-      v-if="!isActive && !isValueSet && field.type !== 'checkbox' && submittable && !area.option_uuid"
+      v-if="(!withFieldPlaceholder || !field.name || field.type === 'cells') && !isActive && !isValueSet && field.type !== 'checkbox' && submittable && !area.option_uuid"
      class="absolute top-0 bottom-0 right-0 left-0 items-center justify-center h-full w-full"
    >
      <span
@@ -41,7 +41,8 @@
    <div
      v-if="isActive"
      ref="scrollToElem"
-      class="absolute -top-20"
+      class="absolute"
+      :style="{ top: scrollPadding }"
    />
    <img
      v-if="field.type === 'image' && image"
@@ -53,18 +54,44 @@
      class="object-contain mx-auto"
      :src="stamp.url"
    >
-    <img
+    <div
      v-else-if="field.type === 'signature' && signature"
-      class="object-contain mx-auto"
-      :src="signature.url"
+      class="flex flex-col justify-between h-full overflow-hidden"
    >
+      <div
+        class="flex-grow flex overflow-hidden"
+        style="min-height: 50%"
+      >
+        <img
+          class="object-contain mx-auto"
+          :src="signature.url"
+        >
+      </div>
+      <div
+        v-if="withSignatureId"
+        class="w-full mt-1 text-[1vw] lg:text-[0.55rem] lg:leading-[0.65rem]"
+      >
+        <div class="truncate uppercase">
+          ID: {{ signature.uuid }}
+        </div>
+        <div>
+          {{ t('reason') }}: {{ values[field.preferences?.reason_field_uuid] || t('digitally_signed_by') }} {{ submitter.name }}
+          <template v-if="submitter.email">
+            &lt;{{ submitter.email }}&gt;
+          </template>
+        </div>
+        <div>
+          {{ new Date(signature.created_at).toLocaleString(undefined, { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric', timeZoneName: 'short' }) }}
+        </div>
+      </div>
+    </div>
    <img
      v-else-if="field.type === 'initials' && initials"
      class="object-contain mx-auto"
      :src="initials.url"
    >
    <div
-      v-else-if="field.type === 'file' || field.type === 'payment'"
+      v-else-if="(field.type === 'file' || field.type === 'payment') && attachments.length"
      class="px-0.5 flex flex-col justify-center"
    >
      <a
@@ -74,7 +101,7 @@
        :href="attachment.url"
      >
        <IconPaperclip
-          class="inline w-[1.5vw] h-[1.5vw] lg:w-4 lg:h-4"
+          class="inline w-[1.6vw] h-[1.6vw] lg:w-4 lg:h-4"
        />
        {{ attachment.filename }}
      </a>
@@ -159,12 +186,20 @@
      class="flex items-center px-0.5 w-full"
      :class="alignClasses[field.preferences?.align]"
    >
-      <span v-if="Array.isArray(modelValue)">
+      <span
+        v-if="field && field.name && withFieldPlaceholder && !modelValue && modelValue !== 0"
+        class="whitespace-pre-wrap text-gray-400"
+        :class="{ 'w-full': field.preferences?.align }"
+      >{{ field.name }}</span>
+      <span v-else-if="Array.isArray(modelValue)">
        {{ modelValue.join(', ') }}
      </span>
      <span v-else-if="field.type === 'date'">
        {{ formattedDate }}
      </span>
+      <span v-else-if="field.type === 'number'">
+        {{ formatNumber(modelValue, field.preferences?.format) }}
+      </span>
      <span
        v-else
        class="whitespace-pre-wrap"
@@ -189,11 +224,30 @@ export default {
      type: Object,
      required: true
    },
+    submitter: {
+      type: Object,
+      required: true
+    },
+    withSignatureId: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    isValueSet: {
      type: Boolean,
      required: false,
      default: false
    },
+    scrollPadding: {
+      type: String,
+      required: false,
+      default: '-80px'
+    },
+    withFieldPlaceholder: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    submittable: {
      type: Boolean,
      required: false,
@@ -204,6 +258,11 @@ export default {
      required: false,
      default: ''
    },
+    values: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
    isActive: {
      type: Boolean,
      required: false,
@@ -337,19 +396,25 @@ export default {
    computedStyle () {
      const { x, y, w, h } = this.area

-      return {
+      const style = {
        top: y * 100 + '%',
        left: x * 100 + '%',
        width: w * 100 + '%',
        height: h * 100 + '%'
      }
+
+      if (this.field.preferences?.font_size) {
+        style.fontSize = this.field.preferences.font_size + 'pt'
+      }
+
+      return style
    }
  },
  watch: {
    modelValue () {
      this.$nextTick(() => {
        if (['date', 'text', 'number'].includes(this.field.type) && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > `${this.modelValue}`.length)) {
-          this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? `${this.modelValue}`.length : 0
+          this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? `${this.modelValue || (this.withFieldPlaceholder ? this.field.name : '')}`.length : 0
        }
      })
    }
@@ -357,7 +422,7 @@ export default {
  mounted () {
    this.$nextTick(() => {
      if (['date', 'text', 'number'].includes(this.field.type) && this.$refs.textContainer) {
-        this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? `${this.modelValue}`.length : 0
+        this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? `${this.modelValue || (this.withFieldPlaceholder ? this.field.name : '')}`.length : 0
      }
    })
  },
@@ -373,6 +438,17 @@ export default {
        }
      }
    },
+    formatNumber (number, format) {
+      if (format === 'comma') {
+        return new Intl.NumberFormat('en-US').format(number)
+      } else if (format === 'dot') {
+        return new Intl.NumberFormat('de-DE').format(number)
+      } else if (format === 'space') {
+        return new Intl.NumberFormat('fr-FR').format(number)
+      } else {
+        return number
+      }
+    },
    formatDate (date, format) {
      const monthFormats = {
        M: 'numeric',
@@ -388,6 +464,7 @@ export default {

      const yearFormats = {
        YYYY: 'numeric',
+        YYY: 'numeric',
        YY: '2-digit'
      }

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

        return true
@@ -116,7 +150,7 @@ export default {

      const targetTopRelativeToBox = targetRect.top - boxRect.top

-      scrollbox.scrollTop = targetTopRelativeToBox - container.offsetHeight + formContainer.offsetHeight + target.offsetHeight + padding
+      scrollbox.scrollTo({ top: targetTopRelativeToBox - container.offsetHeight + formContainer.offsetHeight + target.offsetHeight + padding, behavior: 'smooth' })
    },
    setAreaRef (el) {
      if (el) {
@@ -52,6 +52,7 @@
      :message="`${t('upload')} ${field.name || t('files')}${field.required ? '' : ` (${t('optional')})`}`"
      :submitter-slug="submitterSlug"
      :multiple="true"
+      :dry-run="dryRun"
      @upload="onUpload"
    />
  </div>
@@ -80,6 +81,11 @@ export default {
      type: String,
      required: true
    },
+    dryRun: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    attachmentsIndex: {
      type: Object,
      required: false,
@@ -181,6 +181,10 @@ export default {
        spread: 140
      })
    }
+
+    if (window.decline_button) {
+      window.decline_button.setAttribute('disabled', 'true')
+    }
  },
  methods: {
    sendCopyToEmail () {
@@ -197,13 +201,18 @@ export default {
    download () {
      this.isDownloading = true

-      fetch(this.baseUrl + `/submitters/${this.submitterSlug}/download`).then((response) => response.json()).then((urls) => {
-        const isSafariIos = /iPhone|iPad|iPod/i.test(navigator.userAgent)
+      fetch(this.baseUrl + `/submitters/${this.submitterSlug}/download`).then(async (response) => {
+        if (response.ok) {
+          const urls = await response.json()
+          const isSafariIos = /iPhone|iPad|iPod/i.test(navigator.userAgent)

-        if (isSafariIos && urls.length > 1) {
-          this.downloadSafariIos(urls)
+          if (isSafariIos && urls.length > 1) {
+            this.downloadSafariIos(urls)
+          } else {
+            this.downloadUrls(urls)
+          }
        } else {
-          this.downloadUrls(urls)
+          alert('Failed to download files')
        }
      })
    },
@@ -14,7 +14,9 @@
        />
        <template v-else>
          {{ field.name && showFieldNames ? field.name : t('date') }}
-          <template v-if="!field.required">({{ t('optional') }})</template>
+          <template v-if="!field.required">
+            ({{ t('optional') }})
+          </template>
        </template>
      </label>
      <button
@@ -41,6 +43,7 @@
        :required="field.required"
        type="date"
        :name="`values[${field.uuid}]`"
+        @keydown.enter="onEnter"
        @focus="$emit('focus')"
      >
    </div>
@@ -76,7 +79,7 @@ export default {
      default: ''
    }
  },
-  emits: ['update:model-value', 'focus'],
+  emits: ['update:model-value', 'focus', 'submit'],
  computed: {
    value: {
      set (value) {
@@ -88,6 +91,13 @@ export default {
    }
  },
  methods: {
+    onEnter (e) {
+      if (this.modelValue) {
+        e.preventDefault()
+
+        this.$emit('submit')
+      }
+    },
    setCurrentDate () {
      const inputEl = this.$refs.input

@@ -65,6 +65,11 @@ export default {
      type: String,
      required: true
    },
+    dryRun: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    accept: {
      type: String,
      required: false,
@@ -104,24 +109,70 @@ export default {
      this.isLoading = true

      return await Promise.all(
-        Array.from(files).map((file) => {
+        Array.from(files).map(async (file) => {
          const formData = new FormData()

-          formData.append('file', file)
-          formData.append('submitter_slug', this.submitterSlug)
-          formData.append('name', 'attachments')
+          if (this.dryRun) {
+            return new Promise((resolve) => {
+              const reader = new FileReader()

-          return fetch(this.baseUrl + '/api/attachments', {
-            method: 'POST',
-            body: formData
-          }).then(resp => resp.json()).then((data) => {
-            return data
-          })
+              reader.readAsDataURL(file)
+
+              reader.onloadend = () => {
+                resolve({
+                  url: reader.result,
+                  uuid: Math.random().toString(),
+                  filename: file.name
+                })
+              }
+            })
+          } else {
+            if (file.type === 'image/bmp') {
+              file = await this.convertBmpToPng(file)
+            }
+
+            formData.append('file', file)
+            formData.append('submitter_slug', this.submitterSlug)
+            formData.append('name', 'attachments')
+
+            return fetch(this.baseUrl + '/api/attachments', {
+              method: 'POST',
+              body: formData
+            }).then(resp => resp.json()).then((data) => {
+              return data
+            })
+          }
        })).then((result) => {
        this.$emit('upload', result)
      }).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)
+      })
    }
  }
 }
@@ -3,10 +3,15 @@
    ref="areas"
    :steps="stepFields"
    :values="values"
+    :with-field-placeholder="withFieldPlaceholder"
+    :submitter="submitter"
+    :scroll-el="scrollEl"
+    :with-signature-id="withSignatureId"
    :attachments-index="attachmentsIndex"
    :with-label="!isAnonymousChecboxes && showFieldNames"
    :current-step="currentStepFields"
-    @focus-step="[saveStep(), goToStep($event, false, true), currentField.type !== 'checkbox' ? isFormVisible = true : '']"
+    :scroll-padding="scrollPadding"
+    @focus-step="[saveStep(), currentField.type !== 'checkbox' ? isFormVisible = true : '', goToStep($event, false, true)]"
  />
  <FormulaFieldAreas
    v-if="formulaFields.length"
@@ -16,13 +21,17 @@
  <button
    v-if="!isFormVisible"
    id="expand_form_button"
-    class="btn btn-neutral flex text-white absolute rounded-none border-x-0 md:border md:rounded-full bottom-0 w-full md:mb-4 text-base"
+    class="btn btn-neutral flex text-white absolute bottom-0 w-full mb-3"
+    style="width: 96%; margin-left: 2%"
    @click.prevent="[isFormVisible = true, scrollIntoField(currentField)]"
  >
    <template v-if="['initials', 'signature'].includes(currentField.type)">
      <IconWritingSign stroke-width="1.5" />
      {{ t('sign_now') }}
    </template>
+    <template v-else-if="alwaysMinimize">
+      {{ t('next') }}
+    </template>
    <template v-else>
      {{ t('submit_form') }}
    </template>
@@ -97,6 +106,7 @@
            v-model="values[currentField.uuid]"
            :show-field-names="showFieldNames"
            :field="currentField"
+            @submit="submitStep"
            @focus="scrollIntoField(currentField)"
          />
          <div v-else-if="currentField.type === 'select'">
@@ -306,6 +316,7 @@
            :key="currentField.uuid"
            v-model="values[currentField.uuid]"
            :field="currentField"
+            :dry-run="dryRun"
            :attachments-index="attachmentsIndex"
            :submitter-slug="submitterSlug"
            :show-field-names="showFieldNames"
@@ -316,12 +327,20 @@
            ref="currentStep"
            :key="currentField.uuid"
            v-model="values[currentField.uuid]"
+            :reason="values[currentField.preferences?.reason_field_uuid]"
            :field="currentField"
-            :previous-value="previousSignatureValueFor(currentField)"
+            :previous-value="previousSignatureValueFor(currentField) || previousSignatureValue"
            :with-typed-signature="withTypedSignature"
+            :remember-signature="rememberSignature"
            :attachments-index="attachmentsIndex"
-            :submitter-slug="submitterSlug"
+            :require-signing-reason="requireSigningReason"
+            :button-text="buttonText"
+            :dry-run="dryRun"
+            :with-disclosure="withDisclosure"
+            :with-qr-button="withQrButton"
+            :submitter="submitter"
            :show-field-names="showFieldNames"
+            @update:reason="values[currentField.preferences?.reason_field_uuid] = $event"
            @attached="attachments.push($event)"
            @start="scrollIntoField(currentField)"
            @minimize="isFormVisible = false"
@@ -332,6 +351,7 @@
            :key="currentField.uuid"
            v-model="values[currentField.uuid]"
            :field="currentField"
+            :dry-run="dryRun"
            :previous-value="previousInitialsValue"
            :attachments-index="attachmentsIndex"
            :show-field-names="showFieldNames"
@@ -345,6 +365,7 @@
            v-else-if="currentField.type === 'file'"
            :key="currentField.uuid"
            v-model="values[currentField.uuid]"
+            :dry-run="dryRun"
            :field="currentField"
            :attachments-index="attachmentsIndex"
            :submitter-slug="submitterSlug"
@@ -356,7 +377,9 @@
            :key="currentField.uuid"
            v-model="values[currentField.uuid]"
            :field="currentField"
+            :locale="language?.toLowerCase() || browserLanguage"
            :show-field-names="showFieldNames"
+            :verified-value="phoneVerifiedValues[currentField.uuid]"
            :default-value="submitter.phone"
            :submitter-slug="submitterSlug"
            @focus="scrollIntoField(currentField)"
@@ -369,6 +392,7 @@
            v-model="values[currentField.uuid]"
            :field="currentField"
            :submitter-slug="submitterSlug"
+            :values="values"
            @attached="attachments.push($event)"
            @focus="scrollIntoField(currentField)"
            @submit="submitStep"
@@ -376,7 +400,7 @@
        </div>
        <div
          v-if="currentField.type !== 'payment' || submittedValues[currentField.uuid]"
-          class="mt-6 md:mt-8"
+          :class="currentField.type === 'signature' ? 'mt-2' : 'mt-6 md:mt-8'"
        >
          <button
            id="submit_form_button"
@@ -390,11 +414,8 @@
                v-if="isSubmitting"
                class="mr-1 animate-spin"
              />
-              <span v-if="stepFields.length === currentStep + 1">
-                {{ t('submit') }}
-              </span>
-              <span v-else>
-                {{ t('next') }}
+              <span>
+                {{ buttonText }}
              </span><span
                v-if="isSubmitting"
                class="w-6 flex justify-start mr-1"
@@ -416,7 +437,7 @@
        :completed-button="completedRedirectUrl ? {} : completedButton"
        :completed-message="completedRedirectUrl ? {} : completedMessage"
        :with-send-copy-button="withSendCopyButton && !completedRedirectUrl"
-        :with-download-button="withDownloadButton && !completedRedirectUrl"
+        :with-download-button="withDownloadButton && !completedRedirectUrl && !dryRun"
        :with-confetti="withConfetti"
        :can-send-email="canSendEmail && !!submitter.email"
        :submitter-slug="submitterSlug"
@@ -432,7 +453,7 @@
            href="#"
            class="inline border border-base-300 h-3 w-3 rounded-full mx-1 mt-1"
            :class="{ 'bg-base-300': index === currentStep, 'bg-base-content': (index < currentStep && stepFields[index].every((f) => !f.required || ![null, undefined, ''].includes(values[f.uuid]))) || isCompleted, 'bg-white': index > currentStep }"
-            @click.prevent="isCompleted ? '' : [saveStep(), goToStep(step, true)]"
+            @click.prevent="isCompleted ? '' : [saveStep(), goToStep(index, true)]"
          />
        </div>
      </div>
@@ -466,10 +487,14 @@ import i18n from './i18n'
 const isEmpty = (obj) => {
  if (obj == null) return true

-  if (Array.isArray(obj) || typeof obj === 'string') {
+  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
  }
@@ -517,6 +542,21 @@ export default {
      type: Object,
      required: true
    },
+    withSignatureId: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    scrollPadding: {
+      type: String,
+      required: false,
+      default: '-80px'
+    },
+    requireSigningReason: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    canSendEmail: {
      type: Boolean,
      required: false,
@@ -527,6 +567,16 @@ export default {
      required: false,
      default: () => []
    },
+    withFieldPlaceholder: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    scrollEl: {
+      type: Object,
+      required: false,
+      default: null
+    },
    onComplete: {
      type: Function,
      required: false,
@@ -539,6 +589,26 @@ export default {
      required: false,
      default: null
    },
+    rememberSignature: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    minimize: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    withDisclosure: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    reuseSignature: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
    withConfetti: {
      type: Boolean,
      required: false,
@@ -554,6 +624,11 @@ export default {
      required: false,
      default: true
    },
+    withQrButton: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    withTypedSignature: {
      type: Boolean,
      required: false,
@@ -579,6 +654,11 @@ export default {
      required: false,
      default: ''
    },
+    previousSignatureValue: {
+      type: String,
+      required: false,
+      default: ''
+    },
    allowToSkip: {
      type: Boolean,
      required: false,
@@ -594,6 +674,11 @@ export default {
      required: false,
      default: false
    },
+    dryRun: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    attribution: {
      type: Boolean,
      required: false,
@@ -651,14 +736,30 @@ export default {
      isFormVisible: this.expand !== false,
      showFillAllRequiredFields: false,
      currentStep: 0,
+      enableScrollIntoField: true,
+      phoneVerifiedValues: {},
+      orientation: screen?.orientation?.type,
      isSubmitting: false,
      submittedValues: {},
      recalculateButtonDisabledKey: ''
    }
  },
  computed: {
+    isMobile () {
+      return /android|iphone|ipad/i.test(navigator.userAgent)
+    },
+    buttonText () {
+      if (this.alwaysMinimize || this.stepFields.length === this.currentStep + 1) {
+        return this.t('submit')
+      } else {
+        return this.t('next')
+      }
+    },
+    alwaysMinimize () {
+      return this.minimize || (this.orientation?.includes('landscape') && this.isMobile && parseInt(window.innerHeight) < 550)
+    },
    currentStepFields () {
-      return this.stepFields[this.currentStep]
+      return this.stepFields[this.currentStep] || []
    },
    browserLanguage () {
      return (navigator.language || navigator.userLanguage || 'en').split('-')[0]
@@ -677,9 +778,13 @@ export default {
      }, {})
    },
    previousInitialsValue () {
-      const initialsField = [...this.fields].reverse().find((field) => field.type === 'initials' && !!this.values[field.uuid])
+      if (this.reuseSignature !== false) {
+        const initialsField = [...this.fields].reverse().find((field) => field.type === 'initials' && !!this.values[field.uuid])

-      return this.values[initialsField?.uuid]
+        return this.values[initialsField?.uuid]
+      } else {
+        return null
+      }
    },
    isAnonymousChecboxes () {
      return this.currentField.type === 'checkbox' && this.currentStepFields.every((e) => !e.name && !e.required) && this.currentStepFields.length > 4
@@ -713,7 +818,7 @@ export default {
      }, [])
    },
    formulaFields () {
-      return this.fields.filter((f) => f.preferences?.formula)
+      return this.fields.filter((f) => f.preferences?.formula && f.type !== 'payment')
    },
    attachmentsIndex () {
      return this.attachments.reduce((acc, a) => {
@@ -729,11 +834,21 @@ export default {
  watch: {
    expand (value) {
      this.isFormVisible = value
+    },
+    currentStepFields (value) {
+      if (isEmpty(value) && this.currentStep > 0) {
+        this.currentStep -= 1
+      }
    }
  },
+  beforeUnmount () {
+    screen?.orientation?.removeEventListener('change', this.onOrientationChange)
+  },
  mounted () {
    this.submittedValues = JSON.parse(JSON.stringify(this.values))

+    screen?.orientation.addEventListener('change', this.onOrientationChange)
+
    this.fields.forEach((field) => {
      if (field.default_value && !field.readonly) {
        this.values[field.uuid] ||= field.default_value
@@ -767,6 +882,10 @@ export default {
      this.isFormVisible = false
    }

+    if (this.alwaysMinimize) {
+      this.isFormVisible = false
+    }
+
    if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
      this.$nextTick(() => {
        const root = this.$root.$el.parentNode.getRootNode()
@@ -784,33 +903,42 @@ export default {
    this.$nextTick(() => {
      this.recalculateButtonDisabledKey = Math.random()

-      Promise.all([
-        this.maybeTrackEmailClick(),
-        this.maybeTrackSmsClick()
-      ]).finally(() => {
-        this.trackViewForm()
-      })
+      if (!this.dryRun) {
+        Promise.all([
+          this.maybeTrackEmailClick(),
+          this.maybeTrackSmsClick()
+        ]).finally(() => {
+          this.trackViewForm()
+        })
+      }
    })
  },
  methods: {
    t (key) {
      return this.i18n[key] || i18n[this.language?.toLowerCase()]?.[key] || i18n[this.browserLanguage]?.[key] || i18n.en[key] || key
    },
+    onOrientationChange (event) {
+      this.orientation = event.target.type
+    },
    checkFieldConditions (field) {
      if (field.conditions?.length) {
        return field.conditions.reduce((acc, c) => {
+          const field = this.fieldsUuidIndex[c.field_uuid]
+
+          if (['not_empty', 'checked', 'equal', 'contains'].includes(c.action) && field && !this.checkFieldConditions(field)) {
+            return false
+          }
+
          if (['empty', 'unchecked'].includes(c.action)) {
            return acc && isEmpty(this.values[c.field_uuid])
          } else if (['not_empty', 'checked'].includes(c.action)) {
            return acc && !isEmpty(this.values[c.field_uuid])
          } else if (['equal', 'contains'].includes(c.action)) {
-            const field = this.fieldsUuidIndex[c.field_uuid]
            const option = field.options.find((o) => o.uuid === c.value)
            const values = [this.values[c.field_uuid]].flat()

            return acc && values.includes(this.optionValue(option, field.options.indexOf(option)))
          } else if (['not_equal', 'does_not_contain'].includes(c.action)) {
-            const field = this.fieldsUuidIndex[c.field_uuid]
            const option = field.options.find((o) => o.uuid === c.value)
            const values = [this.values[c.field_uuid]].flat()

@@ -890,34 +1018,49 @@ export default {
      })
    },
    previousSignatureValueFor (field) {
-      const signatureField = [...this.fields].reverse().find((f) =>
-        f.type === 'signature' && field.preferences?.format === f.preferences?.format && !!this.values[f.uuid]
-      )
+      if (this.reuseSignature !== false) {
+        const signatureField = [...this.fields].reverse().find((f) =>
+          f.type === 'signature' && field.preferences?.format === f.preferences?.format && !!this.values[f.uuid]
+        )

-      return this.values[signatureField?.uuid]
+        return this.values[signatureField?.uuid]
+      } else {
+        return null
+      }
    },
-    goToStep (step, scrollToArea = false, clickUpload = false) {
-      this.currentStep = this.stepFields.indexOf(step)
+    goToStep (stepIndex, scrollToArea = false, clickUpload = false) {
+      this.currentStep = stepIndex
      this.showFillAllRequiredFields = false

      this.$nextTick(() => {
        this.recalculateButtonDisabledKey = Math.random()

-        if (scrollToArea) {
-          this.scrollIntoField(step[0])
+        if (!this.isCompleted) {
+          if (scrollToArea) {
+            this.scrollIntoField(this.currentField)
+          }

+          this.enableScrollIntoField = false
          this.$refs.form.querySelector('input[type="date"], input[type="number"], input[type="text"], select')?.focus()
-        }
+          this.enableScrollIntoField = true

-        if (clickUpload && !this.values[this.currentField.uuid] && ['file', 'image'].includes(this.currentField.type)) {
-          this.$refs.form.querySelector('input[type="file"]')?.click()
+          if (clickUpload && !this.values[this.currentField.uuid] && ['file', 'image'].includes(this.currentField.type)) {
+            this.$refs.form.querySelector('input[type="file"]')?.click()
+          }
        }
      })
    },
    saveStep (formData) {
      const currentFieldUuids = this.currentStepFields.map((f) => f.uuid)
+      const currentFieldType = this.currentField.type

-      if (this.isCompleted) {
+      if (this.dryRun) {
+        currentFieldUuids.forEach((fieldUuid) => {
+          this.submittedValues[fieldUuid] = this.values[fieldUuid]
+        })
+
+        return Promise.resolve({})
+      } else if (this.isCompleted) {
        return Promise.resolve({})
      } else {
        return fetch(this.baseUrl + this.submitPath, {
@@ -927,6 +1070,10 @@ export default {
          if (response.status === 200) {
            currentFieldUuids.forEach((fieldUuid) => {
              this.submittedValues[fieldUuid] = this.values[fieldUuid]
+
+              if (currentFieldType === 'phone') {
+                this.phoneVerifiedValues[fieldUuid] = this.values[fieldUuid]
+              }
            })
          }

@@ -935,7 +1082,9 @@ export default {
      }
    },
    scrollIntoField (field) {
-      return this.$refs.areas.scrollIntoField(field)
+      if (this.enableScrollIntoField) {
+        return this.$refs.areas.scrollIntoField(field)
+      }
    },
    scrollIntoArea (area) {
      return this.$refs.areas.scrollIntoArea(area)
@@ -965,11 +1114,21 @@ export default {
          formData.append('completed', 'true')
        }

-        await this.saveStep(formData).then(async (response) => {
+        let saveStepRequest
+
+        if (!isLastStep && this.phoneVerifiedValues[this.currentField.uuid] && this.phoneVerifiedValues[this.currentField.uuid] === this.values[this.currentField.uuid]) {
+          saveStepRequest = Promise.resolve({})
+        } else {
+          saveStepRequest = this.saveStep(formData)
+        }
+
+        await saveStepRequest.then(async (response) => {
          if (response.status === 422 || response.status === 500) {
            const data = await response.json()

-            alert(data.error || 'Value is invalid')
+            const i18nError = data.error ? this.t(data.error.replace(/\s+/g, '_').toLowerCase()) : ''
+
+            alert(i18nError !== data.error ? i18nError : (data.error || this.t('value_is_invalid')))

            return Promise.reject(new Error(data.error))
          }
@@ -981,7 +1140,11 @@ export default {
          const nextStep = (isLastStep && emptyRequiredField) || this.stepFields[this.currentStep + 1]

          if (nextStep) {
-            this.goToStep(nextStep, this.autoscrollFields)
+            if (this.alwaysMinimize) {
+              this.isFormVisible = false
+            }
+
+            this.goToStep(this.stepFields.indexOf(nextStep), this.autoscrollFields)

            if (emptyRequiredField === nextStep) {
              this.showFillAllRequiredFields = true
@@ -1,12 +1,32 @@
 const en = {
  text: 'Text',
+  by_clicking_you_agree_to_the: 'By clicking "{button}", you agree to the',
+  electronic_signature_disclosure: 'Electronic Signature Disclosure',
+  esignature_disclosure: 'eSignature Disclosure',
  signature: 'Signature',
  initials: 'Initials',
+  drawn_signature_on_a_touchscreen_device: 'Drawn signature on a touchscreen device',
+  approved: 'Approved',
+  reviewed: 'Reviewed',
+  other: 'Other',
+  authored_by_me: 'Authored by me',
+  approved_by: 'Approved by',
+  reviewed_by: 'Reviewed by',
+  authored_by: 'Authored by',
+  select_a_reason: 'Select a reason',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scan the QR code with the camera app to open the form on mobile and draw your signature',
  date: 'Date',
  number: 'Number',
+  value_is_invalid: 'Value is invalid',
+  verification_code_is_invalid: 'Verification code is invalid',
+  already_paid: 'Already paid',
  image: 'Image',
+  pay: 'Pay',
  take_photo: 'Take photo',
+  number_phone_is_invalid: '{number} phone is invalid',
  file: 'File',
+  digitally_signed_by: 'Digitally signed by',
+  reason: 'Reason',
  select: 'Select',
  checkbox: 'Checkbox',
  multiple: 'Multiple',
@@ -65,9 +85,28 @@ const en = {
 }

 const es = {
+  approved: 'Aprobado',
+  reviewed: 'Revisado',
+  other: 'Otro',
+  authored_by_me: 'Escrito por mí',
+  approved_by: 'Aprobado por',
+  reviewed_by: 'Revisado por',
+  authored_by: 'Escrito por',
+  select_a_reason: 'Selecciona una razón',
+  value_is_invalid: 'El valor no es válido',
+  verification_code_is_invalid: 'El código de verificación no es válido',
+  drawn_signature_on_a_touchscreen_device: 'Firma dibujada en un dispositivo con pantalla táctil',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Escanea el código QR con la aplicación de la cámara para abrir el formulario en el móvil y dibujar tu firma',
+  by_clicking_you_agree_to_the: 'Al hacer clic en "{button}", usted acepta el',
+  electronic_signature_disclosure: 'Divulgación de Firma Electrónica',
+  esignature_disclosure: 'Divulgación de eFirma',
+  already_paid: 'Ya pagado',
  minimize: 'Minimizar',
  text: 'Texto',
  signature: 'Firma',
+  pay: 'Pagar',
+  digitally_signed_by: 'Firmado digitalmente por',
+  reason: 'Razón',
  initials: 'Iniciales',
  date: 'Fecha',
  number: 'Número',
@@ -75,6 +114,7 @@ const es = {
  file: 'Archivo',
  select: 'Seleccionar',
  checkbox: 'Casilla',
+  number_phone_is_invalid: '{number} teléfono es inválido',
  multiple: 'Múltiple',
  radio: 'Radio',
  cells: 'Celdas',
@@ -130,13 +170,32 @@ const es = {
 }

 const it = {
+  approved: 'Approvato',
+  reviewed: 'Revisionato',
+  other: 'Altro',
+  authored_by_me: 'Creato da me',
+  approved_by: 'Approvato da',
+  reviewed_by: 'Revisionato da',
+  authored_by: 'Creato da',
+  select_a_reason: 'Seleziona una ragione',
+  value_is_invalid: 'Il valore non è valido',
+  verification_code_is_invalid: 'Il codice di verifica non è valido',
+  drawn_signature_on_a_touchscreen_device: 'Firma disegnata su un dispositivo con schermo tattile',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scansiona il codice QR con l\'app della fotocamera per aprire il modulo sul cellulare e disegnare la tua firma',
+  by_clicking_you_agree_to_the: 'Cliccando su "{button}", accetti il',
+  electronic_signature_disclosure: 'Divulgazione della Firma Elettronica',
+  esignature_disclosure: 'Divulgazione della eFirma',
  minimize: 'Minimizza',
+  already_paid: 'Pagato',
  text: 'Testo',
  signature: 'Firma',
+  digitally_signed_by: 'Firmato digitalmente da',
+  reason: 'Motivo',
  initials: 'Iniziali',
  date: 'Data',
  number: 'Numero',
  image: 'Immagine',
+  pay: 'Pagamento',
  file: 'File',
  select: 'Seleziona',
  checkbox: 'Casella di controllo',
@@ -145,6 +204,7 @@ const it = {
  cells: 'Celle',
  stamp: 'Timbro',
  payment: 'Pagamento',
+  number_phone_is_invalid: '{number} telefono non è valido',
  phone: 'Telefono',
  submit_form: 'Invia Modulo',
  sign_now: 'Firma ora',
@@ -195,13 +255,32 @@ const it = {
 }

 const de = {
+  approved: 'Genehmigt',
+  reviewed: 'Überprüft',
+  other: 'Andere',
+  authored_by_me: 'Von mir verfasst',
+  approved_by: 'Genehmigt von',
+  reviewed_by: 'Überprüft von',
+  authored_by: 'Verfasst von',
+  select_a_reason: 'Grund auswählen',
+  value_is_invalid: 'Wert ist ungültig',
+  verification_code_is_invalid: 'Bestätigungscode ist ungültig',
+  drawn_signature_on_a_touchscreen_device: 'Gezeichnete Unterschrift auf einem Touchscreen-Gerät',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scannen Sie den QR-Code mit der Kamera-App, um das Formular auf dem Handy zu öffnen und Ihre Unterschrift zu zeichnen',
+  by_clicking_you_agree_to_the: 'Durch Klicken auf "{button}" stimmen Sie zu, dass Sie die',
+  electronic_signature_disclosure: 'Elektronische Unterschriftenoffenlegung',
+  esignature_disclosure: 'eSignatur Offenlegung',
+  already_paid: 'Bereits bezahlt',
  minimize: 'Minimieren',
  text: 'Text',
  signature: 'Unterschrift',
+  digitally_signed_by: 'Digital unterschrieben von',
+  reason: 'Grund',
  initials: 'Initialen',
  date: 'Datum',
  number: 'Nummer',
  image: 'Bild',
+  pay: 'Bezahlen',
  file: 'Datei',
  select: 'Auswählen',
  checkbox: 'Checkbox',
@@ -210,6 +289,7 @@ const de = {
  cells: 'Zellen',
  stamp: 'Stempel',
  payment: 'Zahlung',
+  number_phone_is_invalid: '{number} Telefonnummer ist ungültig',
  phone: 'Telefon',
  submit_form: 'Formular absenden',
  sign_now: 'Jetzt unterschreiben',
@@ -260,10 +340,29 @@ const de = {
 }

 const fr = {
+  approved: 'Approuvé',
+  reviewed: 'Révisé',
+  other: 'Autre',
+  authored_by_me: 'Rédigé par moi',
+  approved_by: 'Approuvé par',
+  reviewed_by: 'Révisé par',
+  authored_by: 'Rédigé par',
+  select_a_reason: 'Sélectionnez une raison',
+  value_is_invalid: 'La valeur est invalide',
+  verification_code_is_invalid: 'Le code de vérification est invalide',
+  drawn_signature_on_a_touchscreen_device: 'Signature dessinée sur un appareil à écran tactile',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scannez le code QR avec l\'application de l\'appareil photo pour ouvrir le formulaire sur mobile et dessiner votre signature',
+  by_clicking_you_agree_to_the: 'En cliquant sur "{button}", vous acceptez la',
+  electronic_signature_disclosure: 'Divulgation de Signature Électronique',
+  esignature_disclosure: 'Divulgation de la eSignature',
  minimize: 'Réduire',
  text: 'Texte',
+  already_paid: 'Déjà payé',
  signature: 'Signature',
  initials: 'Initiales',
+  digitally_signed_by: 'Signé numériquement par',
+  reason: 'Raison',
+  pay: 'Payer',
  date: 'Date',
  number: 'Numéro',
  image: 'Image',
@@ -275,6 +374,7 @@ const fr = {
  cells: 'Cellules',
  stamp: 'Tampon',
  payment: 'Paiement',
+  number_phone_is_invalid: '{number} téléphone est invalide',
  phone: 'Téléphone',
  submit_form: 'Envoyer le Formulaire',
  sign_now: 'Signer maintenant',
@@ -325,14 +425,33 @@ const fr = {
 }

 const pl = {
+  approved: 'Zaakceptowany',
+  reviewed: 'Przejrzany',
+  other: 'Inny',
+  authored_by_me: 'Napisane przeze mnie',
+  approved_by: 'Zaakceptowany przez',
+  reviewed_by: 'Przejrzany przez',
+  authored_by: 'Napisane przez',
+  select_a_reason: 'Wybierz powód',
+  value_is_invalid: 'Wartość jest nieprawidłowa',
+  verification_code_is_invalid: 'Kod weryfikacyjny jest nieprawidłowy',
+  drawn_signature_on_a_touchscreen_device: 'Podpis odręczny na urządzeniu z ekranem dotykowym',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Zeskanuj kod QR za pomocą aplikacji aparatu, aby otworzyć formularz na telefonie i narysować swój podpis',
+  by_clicking_you_agree_to_the: 'Klikając na "{button}", zgadzasz się na',
+  electronic_signature_disclosure: 'Ujawnienie Elektronicznej Sygnatury',
+  esignature_disclosure: 'Ujawnienie ePodpisu',
  minimize: 'Zminimalizuj',
  text: 'Tekst',
+  already_paid: 'Już zapłacono',
+  digitally_signed_by: 'Podpisano cyfrowo przez',
+  reason: 'Powód',
  signature: 'Podpis',
  initials: 'Inicjały',
  date: 'Data',
  number: 'Numer',
  image: 'Obraz',
  file: 'Plik',
+  pay: 'Zapłać',
  select: 'Wybierz',
  checkbox: 'Pole wyboru',
  multiple: 'Wielokrotne',
@@ -340,6 +459,7 @@ const pl = {
  cells: 'Komórki',
  stamp: 'Pieczątka',
  payment: 'Płatność',
+  number_phone_is_invalid: '{number} telefon jest nieprawidłowy',
  phone: 'Telefon',
  submit_form: 'Wyślij Formularz',
  sign_now: 'Podpisz teraz',
@@ -390,13 +510,32 @@ const pl = {
 }

 const uk = {
+  approved: 'Затверджено',
+  reviewed: 'Переглянуто',
+  other: 'Інше',
+  authored_by_me: 'Авторство моє',
+  approved_by: 'Затверджено',
+  reviewed_by: 'Переглянуто',
+  authored_by: 'Автор',
+  select_a_reason: 'Виберіть причину',
+  value_is_invalid: 'Значення є неправильним',
+  verification_code_is_invalid: 'Код підтвердження є неправильним',
+  drawn_signature_on_a_touchscreen_device: 'Підпис на сенсорному пристрої',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Скануйте QR-код за допомогою програми камери, щоб відкрити форму на мобільному пристрої та намалювати свій підпис',
+  by_clicking_you_agree_to_the: 'Натиснувши на "{button}", ви погоджуєтеся з',
+  electronic_signature_disclosure: 'Розголошення Електронного Підпису',
+  esignature_disclosure: 'Розголошення еПідпису',
  minimize: 'Зменшити',
  text: 'Текст',
+  already_paid: 'Вже оплачено',
  signature: 'Підпис',
+  digitally_signed_by: 'Підписано в електронному вигляді',
+  reason: 'Причина',
  initials: 'Ініціали',
  date: 'Дата',
  number: 'Число',
  image: 'Зображення',
+  pay: 'Оплатити',
  file: 'Файл',
  select: 'Вибрати',
  checkbox: 'Прапорець',
@@ -405,6 +544,7 @@ const uk = {
  cells: 'Клітинки',
  stamp: 'Штамп',
  payment: 'Платіж',
+  number_phone_is_invalid: '{number} телефон недійсний',
  phone: 'Телефон',
  submit_form: 'Надіслати Форму',
  sign_now: 'Підписати зараз',
@@ -455,13 +595,32 @@ const uk = {
 }

 const cs = {
+  approved: 'Schváleno',
+  reviewed: 'Zkontrolováno',
+  other: 'Jiné',
+  authored_by_me: 'Autorem jsem já',
+  approved_by: 'Schváleno kým',
+  reviewed_by: 'Zkontrolováno kým',
+  authored_by: 'Autorem',
+  select_a_reason: 'Vyberte důvod',
+  value_is_invalid: 'Hodnota je neplatná',
+  verification_code_is_invalid: 'Ověřovací kód je neplatný',
+  drawn_signature_on_a_touchscreen_device: 'Namalovaný podpis na dotykovém zařízení',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Naskenujte QR kód pomocí aplikace fotoaparátu, abyste otevřeli formulář na mobilním zařízení a nakreslili svůj podpis',
+  by_clicking_you_agree_to_the: 'Kliknutím na "{button}" souhlasíte s',
+  electronic_signature_disclosure: 'Zveřejněním Elektronického Podpisu',
+  esignature_disclosure: 'Zveřejnění ePodpisu',
+  already_paid: 'Už zaplaceno',
  minimize: 'Minimalizovat',
  text: 'Text',
  signature: 'Podpis',
  initials: 'Iniciály',
  date: 'Datum',
  number: 'Číslo',
+  digitally_signed_by: 'Digitálně podepsáno',
+  reason: 'Důvod',
  image: 'Obrázek',
+  pay: 'Zaplatit',
  file: 'Soubor',
  select: 'Vybrat',
  checkbox: 'Zaškrtávací políčko',
@@ -471,6 +630,7 @@ const cs = {
  stamp: 'Razítko',
  payment: 'Platba',
  phone: 'Telefon',
+  number_phone_is_invalid: '{number} telefon je neplatný',
  submit_form: 'Odeslat formulář',
  sign_now: 'Podepsat nyní',
  type_here_: 'Zadejte zde',
@@ -520,13 +680,32 @@ const cs = {
 }

 const pt = {
+  approved: 'Aprovado',
+  reviewed: 'Revisado',
+  other: 'Outro',
+  authored_by_me: 'Autorizado por mim',
+  approved_by: 'Aprovado por',
+  reviewed_by: 'Revisado por',
+  authored_by: 'Autorizado por',
+  select_a_reason: 'Selecione um motivo',
+  value_is_invalid: 'Valor é inválido',
+  verification_code_is_invalid: 'Código de verificação é inválido',
+  drawn_signature_on_a_touchscreen_device: 'Assinatura desenhada em um dispositivo com tela sensível ao toque',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Escaneie o código QR com o aplicativo da câmera para abrir o formulário no celular e desenhar sua assinatura',
+  by_clicking_you_agree_to_the: 'Ao clicar em "{button}", você concorda com o',
+  electronic_signature_disclosure: 'Divulgação de Assinatura Eletrônica',
+  esignature_disclosure: 'Divulgação da eAssinatura',
+  already_paid: 'Já pago',
  minimize: 'Minimizar',
  text: 'Texto',
  signature: 'Assinatura',
  initials: 'Iniciais',
+  digitally_signed_by: 'Assinado digitalmente por',
+  reason: 'Razão',
  date: 'Data',
  number: 'Número',
  image: 'Imagem',
+  pay: 'Pagar',
  file: 'Arquivo',
  select: 'Selecionar',
  checkbox: 'Caixa',
@@ -535,6 +714,7 @@ const pt = {
  cells: 'Células',
  stamp: 'Carimbo',
  payment: 'Pagamento',
+  number_phone_is_invalid: '{number} telefone é inválido',
  phone: 'Telefone',
  submit_form: 'Enviar Formulário',
  sign_now: 'Assinar agora',
@@ -585,14 +765,33 @@ const pt = {
 }

 const he = {
+  approved: 'מאושר',
+  reviewed: 'נסקר',
+  other: 'אחר',
+  authored_by_me: 'נכתב על ידי',
+  approved_by: 'אושר על ידי',
+  reviewed_by: 'נסקר על ידי',
+  authored_by: 'נכתב על ידי',
+  select_a_reason: 'בחר סיבה',
+  value_is_invalid: 'ערך לא תקין',
+  verification_code_is_invalid: 'קוד האימות אינו תקין',
+  drawn_signature_on_a_touchscreen_device: 'חתימה שנוצרה במכשיר עם מסך מגע',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'סרוק את קוד ה-QR באמצעות אפליקציית המצלמה כדי לפתוח את הטופס במובייל ולצייר את החתימה שלך',
+  by_clicking_you_agree_to_the: 'על ידי לחיצה על "{button}", אתה מסכים ל',
+  electronic_signature_disclosure: 'חשיפת חתימה אלקטרונית',
+  esignature_disclosure: 'חשיפת ה-eחתימה',
  minimize: 'לקטן',
  text: 'טקסט',
+  already_paid: 'כבר שולם',
  signature: 'חתימה',
  initials: 'ראשי תיבות',
  date: 'תאריך',
+  digitally_signed_by: 'חתום דיגיטלית על ידי',
+  reason: 'סיבה',
  number: 'מספר',
  image: 'תמונה',
  file: 'קובץ',
+  pay: 'תשלום',
  select: 'בחר',
  checkbox: 'תיק בחירה',
  multiple: 'רב ערכים',
@@ -601,6 +800,7 @@ const he = {
  stamp: 'חותמת',
  payment: 'תשלום',
  phone: 'טלפון',
+  number_phone_is_invalid: '{number} טלפון אינו חוקי',
  submit_form: 'שלח טופס',
  sign_now: 'חתום כעת',
  type_here_: 'הקלד כאן',
@@ -651,9 +851,27 @@ const he = {
 }

 const nl = {
+  approved: 'Goedgekeurd',
+  reviewed: 'Beoordeeld',
+  other: 'Anders',
+  authored_by_me: 'Door mij geschreven',
+  approved_by: 'Goedgekeurd door',
+  reviewed_by: 'Beoordeeld door',
+  authored_by: 'Geschreven door',
+  select_a_reason: 'Selecteer een reden',
+  value_is_invalid: 'Waarde is ongeldig',
+  verification_code_is_invalid: 'Verificatiecode is ongeldig',
+  drawn_signature_on_a_touchscreen_device: 'Getekende handtekening op een apparaat met een touchscreen',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scan de QR-code met de camera-app om het formulier op mobiel te openen en uw handtekening te tekenen',
+  by_clicking_you_agree_to_the: 'Door op "{button}" te klikken, gaat u akkoord met de',
+  electronic_signature_disclosure: 'Openbaarmaking van Elektronische Handtekening',
+  esignature_disclosure: 'Openbaarmaking van eHandtekening',
  minimize: 'Minimaliseren',
  text: 'Tekst',
+  already_paid: 'Al betaald',
  signature: 'Handtekening',
+  digitally_signed_by: 'Digitaal ondertekend door',
+  reason: 'Reden',
  initials: 'Initialen',
  date: 'Datum',
  number: 'Nummer',
@@ -663,11 +881,13 @@ const nl = {
  select: 'Selecteer',
  checkbox: 'Aankruisvakje',
  multiple: 'Meerdere',
+  pay: 'Betaal',
  radio: 'Radio',
  cells: 'Cellen',
  stamp: 'Stempel',
  payment: 'Betaling',
  phone: 'Telefoon',
+  number_phone_is_invalid: '{number} telefoon is ongeldig',
  submit_form: 'Formulier verzenden',
  sign_now: 'Nu ondertekenen',
  type_here_: 'Typ hier...',
@@ -717,13 +937,31 @@ const nl = {
 }

 const ar = {
+  approved: 'موافق عليه',
+  reviewed: 'تمت مراجعته',
+  other: 'آخر',
+  authored_by_me: 'مؤلف بواسطتي',
+  approved_by: 'موافق عليه من قبل',
+  reviewed_by: 'مراجع من قبل',
+  authored_by: 'مؤلف من قبل',
+  select_a_reason: 'اختر سببًا',
+  value_is_invalid: 'القيمة غير صالحة',
+  verification_code_is_invalid: 'رمز التحقق غير صالح',
+  drawn_signature_on_a_touchscreen_device: 'توقيع مرسوم على جهاز بشاشة تعمل باللمس',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'امسح رمز الاستجابة السريعة باستخدام تطبيق الكاميرا لفتح النموذج على الهاتف المحمول ورسم توقيعك',
+  by_clicking_you_agree_to_the: 'بالنقر فوق "{button}"، أنت توافق على',
+  electronic_signature_disclosure: 'كشف التوقيع الإلكتروني',
+  esignature_disclosure: 'كشف التوقيع الإلكتروني',
  text: 'نص',
  signature: 'توقيع',
  initials: 'الاختصارات',
  date: 'تاريخ',
  number: 'رقم',
+  digitally_signed_by: 'تم التوقيع رقميًا بواسطة',
+  reason: 'السبب',
  image: 'صورة',
  take_photo: 'التقاط صورة',
+  pay: 'دفع',
  file: 'ملف',
  select: 'اختيار',
  checkbox: 'خانة اختيار',
@@ -734,6 +972,7 @@ const ar = {
  minimize: 'تصغير',
  payment: 'الدفع',
  phone: 'هاتف',
+  number_phone_is_invalid: '{number} هاتف غير صالح',
  submit_form: 'إرسال النموذج',
  sign_now: 'وقع الآن',
  type_here_: 'اكتب هنا',
@@ -783,11 +1022,28 @@ const ar = {
 }

 const ko = {
+  approved: '승인됨',
+  reviewed: '검토됨',
+  other: '기타',
+  authored_by_me: '내가 작성한',
+  approved_by: '승인자',
+  reviewed_by: '검토자',
+  authored_by: '작성자',
+  select_a_reason: '이유 선택',
+  drawn_signature_on_a_touchscreen_device: '터치스크린 장치에서 그린 서명',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: '카메라 앱으로 QR 코드를 스캔하여 모바일에서 양식을 열고 서명을 그리세요',
+  by_clicking_you_agree_to_the: '"{button}"를 클릭함으로써, 다음에 동의하게 됩니다',
+  electronic_signature_disclosure: '전자 서명 공개',
+  esignature_disclosure: '전자 서명 공개',
+  already_paid: '이미 지불됨',
  text: '텍스트',
  signature: '서명',
  initials: '이니셜',
  date: '날짜',
+  digitally_signed_by: '디지털 서명이 완료되었습니다',
+  reason: '이유',
  number: '숫자',
+  pay: '급여',
  image: '이미지',
  take_photo: '사진 찍기',
  file: '파일',
@@ -800,6 +1056,7 @@ const ko = {
  minimize: '최소화',
  payment: '결제',
  phone: '전화',
+  number_phone_is_invalid: '{number} 전화번호가 유효하지 않습니다',
  submit_form: '양식 제출',
  sign_now: '지금 서명',
  type_here_: '여기에 입력...',
@@ -37,6 +37,7 @@
    <FileDropzone
      :message="`${t('upload')} ${field.name || t('image')}${field.required ? '' : ` (${t('optional')})`}`"
      :submitter-slug="submitterSlug"
+      :dry-run="dryRun"
      :accept="'image/*'"
      @upload="onImageUpload"
    />
@@ -66,6 +67,11 @@ export default {
      required: false,
      default: true
    },
+    dryRun: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    submitterSlug: {
      type: String,
      required: true
@@ -50,6 +50,26 @@
            </span>
          </a>
        </span>
+        <span
+          class="tooltip"
+          :data-tip="t('click_to_upload')"
+        >
+          <label
+            class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap"
+          >
+            <IconUpload :width="16" />
+            <input
+              :key="uploadImageInputKey"
+              type="file"
+              hidden
+              accept="image/*"
+              @change="drawImage"
+            >
+            <span class="hidden sm:inline">
+              {{ t('upload') }}
+            </span>
+          </label>
+        </span>
        <a
          v-if="modelValue || computedPreviousValue"
          href="#"
@@ -97,7 +117,7 @@
    <img
      v-if="modelValue || computedPreviousValue"
      :src="attachmentsIndex[modelValue || computedPreviousValue].url"
-      class="mx-auto bg-white border border-base-300 rounded max-h-72"
+      class="mx-auto bg-white border border-base-300 rounded max-h-44"
    >
    <canvas
      v-show="!modelValue && !computedPreviousValue"
@@ -120,16 +140,18 @@

 <script>
 import { cropCanvasAndExportToPNG } from './crop_canvas'
-import { IconReload, IconTextSize, IconSignature, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
+import { IconReload, IconTextSize, IconUpload, IconSignature, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
 import SignaturePad from 'signature_pad'
 import AppearsOn from './appears_on'
 import MarkdownContent from './markdown_content'
+import SignatureStep from './signature_step'

 const scale = 3

 export default {
  name: 'InitialsStep',
  components: {
+    IconUpload,
    AppearsOn,
    IconReload,
    IconTextSize,
@@ -143,6 +165,11 @@ export default {
      type: Object,
      required: true
    },
+    dryRun: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    submitterSlug: {
      type: String,
      required: true
@@ -173,7 +200,8 @@ export default {
    return {
      isInitialsStarted: !!this.previousValue,
      isUsePreviousValue: true,
-      isDrawInitials: false
+      isDrawInitials: false,
+      uploadImageInputKey: Math.random().toString()
    }
  },
  computed: {
@@ -189,7 +217,7 @@ export default {
    this.$nextTick(() => {
      if (this.$refs.canvas) {
        this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth * scale
-        this.$refs.canvas.height = (this.$refs.canvas.parentNode.clientWidth / 3) * scale
+        this.$refs.canvas.height = (this.$refs.canvas.parentNode.clientWidth / 4.5) * scale

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

            this.$refs.canvas.getContext('2d').scale(scale, scale)

@@ -224,6 +252,15 @@ export default {
    this.intersectionObserver?.disconnect()
  },
  methods: {
+    drawOnCanvas: SignatureStep.methods.drawOnCanvas,
+    drawImage (event) {
+      this.remove()
+      this.isInitialsStarted = true
+
+      this.drawOnCanvas(event.target.files[0], this.$refs.canvas)
+
+      this.uploadImageInputKey = Math.random().toString()
+    },
    remove () {
      this.$emit('update:model-value', '')

@@ -246,13 +283,28 @@ export default {
      const context = canvas.getContext('2d')

      const fontFamily = 'Arial'
-      const fontSize = '44px'
+      const initialFontSize = 50
      const fontStyle = 'italic'
      const fontWeight = ''

-      context.font = fontStyle + ' ' + fontWeight + ' ' + fontSize + ' ' + fontFamily
-      context.textAlign = 'center'
+      const setFontSize = (size) => {
+        context.font = `${fontStyle} ${fontWeight} ${size}px ${fontFamily}`
+      }

+      const adjustFontSizeToFit = (text, maxWidth, initialSize) => {
+        let size = initialSize
+
+        setFontSize(size)
+
+        while (context.measureText(text).width > maxWidth && size > 1) {
+          size -= 1
+          setFontSize(size)
+        }
+      }
+
+      adjustFontSizeToFit(e.target.value, canvas.width / scale, initialFontSize)
+
+      context.textAlign = 'center'
      context.clearRect(0, 0, canvas.width / scale, canvas.height / scale)
      context.fillText(e.target.value, canvas.width / 2 / scale, canvas.height / 2 / scale + 11)
    },
@@ -282,21 +334,36 @@ export default {
        cropCanvasAndExportToPNG(this.$refs.canvas).then(async (blob) => {
          const file = new File([blob], 'initials.png', { type: 'image/png' })

-          const formData = new FormData()
+          if (this.dryRun) {
+            const reader = new FileReader()

-          formData.append('file', file)
-          formData.append('submitter_slug', this.submitterSlug)
-          formData.append('name', 'attachments')
+            reader.readAsDataURL(file)

-          return fetch(this.baseUrl + '/api/attachments', {
-            method: 'POST',
-            body: formData
-          }).then((resp) => resp.json()).then((attachment) => {
-            this.$emit('attached', attachment)
-            this.$emit('update:model-value', attachment.uuid)
+            reader.onloadend = () => {
+              const attachment = { url: reader.result, uuid: Math.random().toString() }

-            return resolve(attachment)
-          })
+              this.$emit('attached', attachment)
+              this.$emit('update:model-value', attachment.uuid)
+
+              resolve(attachment)
+            }
+          } else {
+            const formData = new FormData()
+
+            formData.append('file', file)
+            formData.append('submitter_slug', this.submitterSlug)
+            formData.append('name', 'attachments')
+
+            return fetch(this.baseUrl + '/api/attachments', {
+              method: 'POST',
+              body: formData
+            }).then((resp) => resp.json()).then((attachment) => {
+              this.$emit('attached', attachment)
+              this.$emit('update:model-value', attachment.uuid)
+
+              return resolve(attachment)
+            })
+          }
        })
      })
    }
@@ -51,7 +51,17 @@ export default {
  },
  computed: {
    items () {
-      return snarkdown(this.string.replace(/\n/g, '<br>')).split(htmlSplitRegexp)
+      const linkParts = this.string.split(/(https?:\/\/[^\s)]+)/g)
+
+      const text = linkParts.map((part, index) => {
+        if (part.match(/^https?:\/\//) && !linkParts[index - 1]?.match(/\(\s*$/) && !linkParts[index + 1]?.match(/^\s*\)/)) {
+          return `[${part}](${part})`
+        } else {
+          return part
+        }
+      }).join('')
+
+      return snarkdown(text.replace(/\n/g, '<br>')).split(htmlSplitRegexp)
    }
  },
  methods: {
@@ -10,7 +10,9 @@
     :string="field.title"
   />
    <template v-else>{{ field.name }}</template>
-    <template v-if="!field.required">({{ t('optional') }})</template>
+    <template v-if="!field.required">
+      ({{ t('optional') }})
+    </template>
  </label>
  <div
    v-else
@@ -3,8 +3,20 @@
    v-if="!modelValue && !sessionId"
    :for="field.uuid"
    class="label text-2xl mb-2"
-  >{{ field.name || defaultName }}
+  >
+    <MarkdownContent
+      v-if="field.title"
+      :string="field.title"
+    />
+    <template v-else>{{ field.name || defaultName }}</template>
  </label>
+  <div
+    v-if="field.description"
+    dir="auto"
+    class="mb-4 px-1"
+  >
+    <MarkdownContent :string="field.description" />
+  </div>
  <div>
    <input
      type="text"
@@ -17,7 +29,7 @@
      v-if="modelValue && !sessionId"
      class=" text-2xl mb-2"
    >
-      Already paid
+      {{ t('already_paid') }}
    </div>
    <div v-else>
      <button
@@ -39,7 +51,7 @@
        class="btn bg-[#7B73FF] text-white hover:bg-[#0A2540] text-lg w-full"
        :class="{ disabled: isCreatingCheckout }"
        :disabled="isCreatingCheckout"
-        @click.prevent="startCheckout"
+        @click.prevent="postCheckout"
      >
        <IconInnerShadowTop
          v-if="isCreatingCheckout"
@@ -60,11 +72,13 @@

 <script>
 import { IconBrandStripe, IconInnerShadowTop, IconLoader } from '@tabler/icons-vue'
+import MarkdownContent from './markdown_content'

 export default {
  name: 'PaymentStep',
  components: {
    IconBrandStripe,
+    MarkdownContent,
    IconInnerShadowTop,
    IconLoader
  },
@@ -79,6 +93,10 @@ export default {
      type: Object,
      required: true
    },
+    values: {
+      type: Object,
+      required: true
+    },
    submitterSlug: {
      type: String,
      required: true
@@ -87,7 +105,8 @@ export default {
  emits: ['focus', 'submit', 'update:model-value', 'attached'],
  data () {
    return {
-      isCreatingCheckout: false
+      isCreatingCheckout: false,
+      isMathLoaded: false
    }
  },
  computed: {
@@ -100,23 +119,75 @@ export default {
    defaultName () {
      const { price, currency } = this.field.preferences || {}

-      const formattedPrice = new Intl.NumberFormat([], {
+      const formatter = new Intl.NumberFormat([], {
        style: 'currency',
        currency
-      }).format(price)
+      })

-      return `Pay ${formattedPrice}`
+      if (this.field.preferences?.formula) {
+        if (this.isMathLoaded) {
+          return this.t('pay') + ' ' + formatter.format(this.calculateFormula())
+        } else {
+          return ''
+        }
+      } else {
+        return this.t('pay') + ' ' + formatter.format(price)
+      }
    }
  },
-  mounted () {
+  async mounted () {
    if (this.sessionId) {
      this.$emit('submit')
    }
+
+    if (!this.sessionId) {
+      this.postCheckout({ checkStatus: true })
+    }
+
+    if (this.field.preferences?.formula) {
+      const {
+        create,
+        evaluateDependencies,
+        addDependencies,
+        subtractDependencies,
+        divideDependencies,
+        multiplyDependencies,
+        powDependencies,
+        roundDependencies,
+        absDependencies,
+        sinDependencies,
+        tanDependencies,
+        cosDependencies
+      } = await import('mathjs')
+
+      this.math = create({
+        evaluateDependencies,
+        addDependencies,
+        subtractDependencies,
+        divideDependencies,
+        multiplyDependencies,
+        powDependencies,
+        roundDependencies,
+        absDependencies,
+        sinDependencies,
+        tanDependencies,
+        cosDependencies
+      })
+
+      this.isMathLoaded = true
+    }
  },
  methods: {
+    calculateFormula () {
+      const transformedFormula = this.field.preferences.formula.replace(/{{(.*?)}}/g, (match, uuid) => {
+        return this.values[uuid] || 0.0
+      })
+
+      return this.math.evaluate(transformedFormula.toLowerCase())
+    },
    async submit () {
      if (this.sessionId) {
-        return fetch((this.baseUrl || '/embed').replace('/embed', '/api/stripe_payments/' + this.sessionId), {
+        return fetch(this.baseUrl + '/api/stripe_payments/' + this.sessionId, {
          method: 'PUT',
          body: JSON.stringify({
            submitter_slug: this.submitterSlug
@@ -144,14 +215,16 @@ export default {
        return Promise.resolve({})
      }
    },
-    startCheckout () {
+    postCheckout ({ checkStatus } = {}) {
      this.isCreatingCheckout = true

-      fetch((this.baseUrl || '/embed').replace('/embed', '/api/stripe_payments'), {
+      fetch(this.baseUrl + '/api/stripe_payments', {
        method: 'POST',
        body: JSON.stringify({
          submitter_slug: this.submitterSlug,
-          field_uuid: this.field.uuid
+          field_uuid: this.field.uuid,
+          check_status: checkStatus,
+          referer: document.location.href
        }),
        headers: { 'Content-Type': 'application/json' }
      }).then(async (resp) => {
@@ -11,7 +11,9 @@
      />
      <template v-else>
        {{ showFieldNames && field.name ? field.name : t('verified_phone_number') }}
-        <template v-if="!field.required">({{ t('optional') }})</template>
+        <template v-if="!field.required">
+          ({{ t('optional') }})
+        </template>
      </template>
    </label>
    <div
@@ -108,10 +110,20 @@ export default {
      type: Object,
      required: true
    },
+    verifiedValue: {
+      type: String,
+      required: false,
+      default: ''
+    },
    submitterSlug: {
      type: String,
      required: true
    },
+    locale: {
+      type: String,
+      required: false,
+      default: 'en'
+    },
    showFieldNames: {
      type: Boolean,
      required: false,
@@ -158,24 +170,37 @@ export default {
        method: 'POST',
        body: JSON.stringify({
          submitter_slug: this.submitterSlug,
+          locale: this.locale,
          phone: this.$refs.phone.value
        }),
        headers: { 'Content-Type': 'application/json' }
+      }).then(async (resp) => {
+        if (resp.status === 422) {
+          const data = await resp.json()
+
+          alert(this.t('number_phone_is_invalid').replace('{number}', this.$refs.phone.value))
+
+          return Promise.reject(new Error(data.error))
+        }
      })
    },
    async submit () {
+      if (this.verifiedValue && this.verifiedValue === this.modelValue) {
+        return Promise.resolve({})
+      }
+
      if (!this.$refs.phone.value.toString().startsWith('+')) {
        alert(this.t('use_international_format'))

        return Promise.reject(new Error('phone invalid'))
      } else if (!this.isCodeSent) {
-        this.sendVerificationCode()
+        return this.sendVerificationCode().then(() => {
+          this.$emit('update:model-value', this.$refs.phone.value)

-        this.$emit('update:model-value', this.$refs.phone.value)
+          this.isCodeSent = true

-        this.isCodeSent = true
-
-        return Promise.reject(new Error('verify with code'))
+          return Promise.reject(new Error('verify with code'))
+        })
      } else {
        return Promise.resolve({})
      }
@@ -1,5 +1,8 @@
 <template>
-  <div dir="auto">
+  <div
+    dir="auto"
+    class="relative"
+  >
    <div
      class="flex justify-between items-center w-full"
      :class="{ 'mb-2': !field.description }"
@@ -25,7 +28,7 @@
            id="type_text_button"
            href="#"
            class="btn btn-outline btn-sm font-medium"
-            @click.prevent="toggleTextInput"
+            @click.prevent="[toggleTextInput(), hideQr()]"
          >
            <IconSignature :width="16" />
            <span class="hidden sm:inline">
@@ -42,7 +45,7 @@
            id="type_text_button"
            href="#"
            class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap"
-            @click.prevent="toggleTextInput"
+            @click.prevent="[toggleTextInput(), hideQr()]"
          >
            <IconTextSize :width="16" />
            <span class="hidden sm:inline">
@@ -51,7 +54,7 @@
          </a>
        </span>
        <span
-          v-if="field.preferences?.format !== 'typed'"
+          v-if="field.preferences?.format !== 'typed' && field.preferences?.format !== 'drawn'"
          class="tooltip"
          :data-tip="t('take_photo')"
        >
@@ -80,15 +83,23 @@
          <IconReload :width="16" />
          {{ t('redraw') }}
        </a>
-        <a
-          v-else
-          href="#"
-          class="btn btn-outline btn-sm font-medium"
-          @click.prevent="clear"
+        <span
+          v-if="withQrButton && !modelValue && !computedPreviousValue && field.preferences?.format !== 'typed'"
+          class=" tooltip"
+          :data-tip="t('drawn_signature_on_a_touchscreen_device')"
        >
-          <IconReload :width="16" />
-          {{ t('clear') }}
-        </a>
+          <a
+            href="#"
+            class="btn btn-sm btn-neutral font-medium hidden md:flex"
+            :class="{ 'btn-outline': !isShowQr, 'text-white': isShowQr }"
+            @click.prevent="isShowQr ? hideQr() : [isTextSignature = false, showQr()]"
+          >
+            <IconQrcode
+              :width="19"
+              :height="19"
+            />
+          </a>
+        </span>
        <a
          href="#"
          :title="t('minimize')"
@@ -118,14 +129,61 @@
    <img
      v-if="modelValue || computedPreviousValue"
      :src="attachmentsIndex[modelValue || computedPreviousValue].url"
-      class="mx-auto bg-white border border-base-300 rounded max-h-72"
+      class="mx-auto bg-white border border-base-300 rounded max-h-44"
    >
-    <canvas
-      v-show="!modelValue && !computedPreviousValue"
-      ref="canvas"
-      style="padding: 1px; 0"
-      class="bg-white border border-base-300 rounded-2xl w-full"
-    />
+    <div class="relative">
+      <div
+        v-if="!modelValue && !computedPreviousValue && !isShowQr && !isTextSignature && isSignatureStarted"
+        class="absolute top-0.5 right-0.5"
+      >
+        <a
+          href="#"
+          class="btn btn-ghost font-medium btn-xs md:btn-sm"
+          @click.prevent="[clear(), hideQr()]"
+        >
+          <IconReload :width="16" />
+          {{ t('clear') }}
+        </a>
+      </div>
+      <canvas
+        v-show="!modelValue && !computedPreviousValue"
+        ref="canvas"
+        style="padding: 1px; 0"
+        class="bg-white border border-base-300 rounded-2xl w-full"
+      />
+      <div
+        v-if="isShowQr"
+        class="top-0 bottom-0 right-0 left-0 absolute bg-white rounded-2xl m-0.5"
+      />
+      <div
+        v-if="isShowQr"
+        class="top-0 bottom-0 right-0 left-0 absolute bg-base-content/10 rounded-2xl"
+      >
+        <div
+          class="absolute top-1.5 right-1.5 tooltip"
+        >
+          <a
+            href="#"
+            class="btn btn-sm btn-circle btn-normal btn-outline"
+            @click.prevent="hideQr"
+          >
+            <IconX />
+          </a>
+        </div>
+        <div class="flex items-center justify-center w-full h-full p-4">
+          <div
+            class="bg-white p-4 rounded-xl h-full"
+          >
+            <canvas
+              ref="qrCanvas"
+              class="h-full"
+              width="132"
+              height="132"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
    <input
      v-if="isTextSignature"
      id="signature_text_input"
@@ -136,15 +194,86 @@
      type="text"
      @input="updateWrittenSignature"
    >
+    <select
+      v-if="requireSigningReason && !isOtherReason"
+      class="select base-input !text-2xl w-full mt-6 text-center"
+      required
+      :name="`values[${field.preferences.reason_field_uuid}]`"
+      @change="$event.target.value === 'other' ? [reason = '', isOtherReason = true] : $emit('update:reason', $event.target.value)"
+    >
+      <option
+        value=""
+        disabled
+        :selected="!reason"
+      >
+        {{ t('select_a_reason') }}
+      </option>
+      <option
+        v-for="(label, option) in defaultReasons"
+        :key="option"
+        :value="option"
+        :selected="reason === option"
+      >
+        {{ label }}
+      </option>
+      <option value="other">
+        {{ t('other') }}
+      </option>
+    </select>
+    <input
+      v-if="requireSigningReason && isOtherReason"
+      class="base-input !text-2xl w-full mt-6"
+      required
+      :name="`values[${field.preferences.reason_field_uuid}]`"
+      :placeholder="t('type_here_')"
+      :value="reason"
+      type="text"
+      @input="$emit('update:reason', $event.target.value)"
+    >
+    <input
+      v-if="requireSigningReason"
+      hidden
+      name="with_reason"
+      :value="field.preferences.reason_field_uuid"
+    >
+    <div
+      v-if="isShowQr"
+      dir="auto"
+      class="text-base-content/60 text-xs text-center w-full mt-1"
+    >
+      {{ t('scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature') }}
+    </div>
+    <div
+      v-else-if="withDisclosure"
+      dir="auto"
+      class="text-base-content/60 text-xs text-center w-full mt-1"
+    >
+      {{ t('by_clicking_you_agree_to_the').replace('{button}', buttonText.charAt(0).toUpperCase() + buttonText.slice(1)) }} <a
+        href="https://www.docuseal.co/esign-disclosure"
+        target="_blank"
+      >
+        <span class="inline md:hidden">
+          {{ t('esignature_disclosure') }}
+        </span>
+        <span class="hidden md:inline">
+          {{ t('electronic_signature_disclosure') }}
+        </span>
+      </a>
+    </div>
+    <div
+      v-else
+      class="mt-5 md:mt-7"
+    />
  </div>
 </template>

 <script>
-import { IconReload, IconCamera, IconSignature, IconTextSize, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
+import { IconReload, IconCamera, IconSignature, IconTextSize, IconArrowsDiagonalMinimize2, IconQrcode, IconX } from '@tabler/icons-vue'
 import { cropCanvasAndExportToPNG } from './crop_canvas'
 import SignaturePad from 'signature_pad'
 import AppearsOn from './appears_on'
 import MarkdownContent from './markdown_content'
+import { v4 } from 'uuid'

 let isFontLoaded = false

@@ -156,7 +285,9 @@ export default {
    AppearsOn,
    IconReload,
    IconCamera,
+    IconQrcode,
    MarkdownContent,
+    IconX,
    IconTextSize,
    IconSignature,
    IconArrowsDiagonalMinimize2
@@ -167,8 +298,13 @@ export default {
      type: Object,
      required: true
    },
-    submitterSlug: {
-      type: String,
+    requireSigningReason: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    submitter: {
+      type: Object,
      required: true
    },
    showFieldNames: {
@@ -176,11 +312,36 @@ export default {
      required: false,
      default: true
    },
+    dryRun: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    withDisclosure: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    withQrButton: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    buttonText: {
+      type: String,
+      required: false,
+      default: 'Submit'
+    },
    withTypedSignature: {
      type: Boolean,
      required: false,
      default: true
    },
+    rememberSignature: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    attachmentsIndex: {
      type: Object,
      required: false,
@@ -191,22 +352,39 @@ export default {
      required: false,
      default: ''
    },
+    reason: {
+      type: String,
+      required: false,
+      default: ''
+    },
    modelValue: {
      type: String,
      required: false,
      default: ''
    }
  },
-  emits: ['attached', 'update:model-value', 'start', 'minimize'],
+  emits: ['attached', 'update:model-value', 'start', 'minimize', 'update:reason'],
  data () {
    return {
      isSignatureStarted: !!this.previousValue,
+      isShowQr: false,
+      isOtherReason: false,
      isUsePreviousValue: true,
      isTextSignature: this.field.preferences?.format === 'typed',
      uploadImageInputKey: Math.random().toString()
    }
  },
  computed: {
+    submitterSlug () {
+      return this.submitter.slug
+    },
+    defaultReasons () {
+      return {
+        [this.t('approved_by')]: this.t('approved'),
+        [this.t('reviewed_by')]: this.t('reviewed'),
+        [this.t('authored_by')]: this.t('authored_by_me')
+      }
+    },
    computedPreviousValue () {
      if (this.isUsePreviousValue) {
        return this.previousValue
@@ -215,6 +393,13 @@ export default {
      }
    }
  },
+  created () {
+    if (this.requireSigningReason) {
+      this.field.preferences ||= {}
+      this.field.preferences.reason_field_uuid ||= v4()
+      this.isOtherReason = this.reason && !this.defaultReasons[this.reason]
+    }
+  },
  async mounted () {
    this.$nextTick(() => {
      if (this.$refs.canvas) {
@@ -228,7 +413,7 @@ export default {
    if (this.$refs.canvas) {
      this.pad = new SignaturePad(this.$refs.canvas)

-      this.pad.addEventListener('beginStroke', () => {
+      this.pad.addEventListener('endStroke', () => {
        this.isSignatureStarted = true

        this.$emit('start')
@@ -252,6 +437,7 @@ export default {
  },
  beforeUnmount () {
    this.intersectionObserver?.disconnect()
+    this.stopCheckSignature()
  },
  methods: {
    remove () {
@@ -273,6 +459,55 @@ export default {
        })
      }
    },
+    showQr () {
+      this.isShowQr = true
+
+      this.$nextTick(() => {
+        import('qr-creator').then(({ default: Qr }) => {
+          if (this.$refs.qrCanvas) {
+            Qr.render({
+              text: `${document.location.origin}/p/${this.submitterSlug}?f=${this.field.uuid.split('-')[0]}`,
+              radius: 0.0,
+              ecLevel: 'H',
+              background: null,
+              size: 132
+            }, this.$refs.qrCanvas)
+          }
+        })
+      })
+
+      this.startCheckSignature()
+    },
+    hideQr () {
+      this.isShowQr = false
+
+      this.stopCheckSignature()
+    },
+    startCheckSignature () {
+      const after = JSON.stringify(new Date())
+
+      this.checkSignatureInterval = setInterval(() => {
+        this.checkSignature({ after })
+      }, 2000)
+    },
+    stopCheckSignature () {
+      if (this.checkSignatureInterval) {
+        clearInterval(this.checkSignatureInterval)
+      }
+    },
+    checkSignature (params = {}) {
+      return fetch(this.baseUrl + '/s/' + this.submitterSlug + '/values?field_uuid=' + this.field.uuid + '&after=' + params.after, {
+        method: 'GET'
+      }).then(async (resp) => {
+        const { attachment } = await resp.json()
+
+        if (attachment?.uuid) {
+          this.$emit('attached', attachment)
+          this.$emit('update:model-value', attachment.uuid)
+          this.hideQr()
+        }
+      })
+    },
    clear () {
      this.pad.clear()

@@ -280,6 +515,7 @@ export default {

      if (this.$refs.textInput) {
        this.$refs.textInput.value = ''
+        this.$refs.textInput.focus()
      }
    },
    updateWrittenSignature (e) {
@@ -289,13 +525,28 @@ export default {
      const context = canvas.getContext('2d')

      const fontFamily = 'Dancing Script'
-      const fontSize = '38px'
+      const initialFontSize = 44
      const fontStyle = 'italic'
      const fontWeight = ''

-      context.font = fontStyle + ' ' + fontWeight + ' ' + fontSize + ' ' + fontFamily
-      context.textAlign = 'center'
+      const setFontSize = (size) => {
+        context.font = `${fontStyle} ${fontWeight} ${size}px ${fontFamily}`
+      }

+      const adjustFontSizeToFit = (text, maxWidth, initialSize) => {
+        let size = initialSize
+
+        setFontSize(size)
+
+        while (context.measureText(text).width > maxWidth && size > 1) {
+          size -= 1
+          setFontSize(size)
+        }
+      }
+
+      adjustFontSizeToFit(e.target.value, canvas.width / scale, initialFontSize)
+
+      context.textAlign = 'center'
      context.clearRect(0, 0, canvas.width / scale, canvas.height / scale)
      context.fillText(e.target.value, canvas.width / 2 / scale, canvas.height / 2 / scale + 11)
    },
@@ -318,8 +569,11 @@ export default {
      this.remove()
      this.isSignatureStarted = true

-      const file = event.target.files[0]
+      this.drawOnCanvas(event.target.files[0], this.$refs.canvas)

+      this.uploadImageInputKey = Math.random().toString()
+    },
+    drawOnCanvas (file, canvas) {
      if (file && file.type.match('image.*')) {
        const reader = new FileReader()

@@ -329,7 +583,6 @@ export default {
          img.src = event.target.result

          img.onload = () => {
-            const canvas = this.$refs.canvas
            const context = canvas.getContext('2d')

            const aspectRatio = img.width / img.height
@@ -364,8 +617,27 @@ export default {
        }

        reader.readAsDataURL(file)
+      }
+    },
+    maybeSetSignedUuid (signedUuid) {
+      try {
+        if (window.localStorage && signedUuid && this.rememberSignature) {
+          const values = window.localStorage.getItem('signed_signature_uuids')

-        this.uploadImageInputKey = Math.random().toString()
+          let data
+
+          if (values) {
+            data = JSON.parse(values)
+          } else {
+            data = {}
+          }
+
+          data[this.submitter.email] = signedUuid
+
+          window.localStorage.setItem('signed_signature_uuids', JSON.stringify(data))
+        }
+      } catch (e) {
+        console.error(e)
      }
    },
    async submit () {
@@ -381,23 +653,45 @@ export default {
        cropCanvasAndExportToPNG(this.$refs.canvas, { errorOnTooSmall: true }).then(async (blob) => {
          const file = new File([blob], 'signature.png', { type: 'image/png' })

-          const formData = new FormData()
+          if (this.dryRun) {
+            const reader = new FileReader()

-          formData.append('file', file)
-          formData.append('submitter_slug', this.submitterSlug)
-          formData.append('name', 'attachments')
+            reader.readAsDataURL(file)

-          return fetch(this.baseUrl + '/api/attachments', {
-            method: 'POST',
-            body: formData
-          }).then((resp) => resp.json()).then((attachment) => {
-            this.$emit('attached', attachment)
-            this.$emit('update:model-value', attachment.uuid)
+            reader.onloadend = () => {
+              const attachment = { url: reader.result, uuid: Math.random().toString() }

-            return resolve(attachment)
-          })
+              this.$emit('attached', attachment)
+              this.$emit('update:model-value', attachment.uuid)
+
+              resolve(attachment)
+            }
+          } else {
+            const formData = new FormData()
+
+            formData.append('file', file)
+            formData.append('submitter_slug', this.submitterSlug)
+            formData.append('name', 'attachments')
+            formData.append('remember_signature', this.rememberSignature)
+
+            return fetch(this.baseUrl + '/api/attachments', {
+              method: 'POST',
+              body: formData
+            }).then((resp) => resp.json()).then((attachment) => {
+              this.$emit('attached', attachment)
+              this.$emit('update:model-value', attachment.uuid)
+
+              this.maybeSetSignedUuid(attachment.signed_uuid)
+
+              return resolve(attachment)
+            })
+          }
        }).catch((error) => {
-          return reject(error)
+          if (error.message === 'Image too small' && this.field.required === false) {
+            return resolve({})
+          } else {
+            return reject(error)
+          }
        })
      })
    }
@@ -10,7 +10,9 @@
     :string="field.title"
   />
    <template v-else>{{ field.name }}</template>
-    <template v-if="!field.required">({{ t('optional') }})</template>
+    <template v-if="!field.required">
+      ({{ t('optional') }})
+    </template>
  </label>
  <div
    v-else
@@ -3,13 +3,13 @@
    class="absolute overflow-visible group"
    :style="positionStyle"
    @pointerdown.stop
-    @mousedown.stop="startDrag"
+    @mousedown="startMouseMove"
    @touchstart="startTouchDrag"
  >
    <div
      v-if="isSelected || isDraw"
      class="top-0 bottom-0 right-0 left-0 absolute border border-1.5 pointer-events-none"
-      :class="borderColors[submitterIndex]"
+      :class="field.type === 'heading' ? '' : borderColors[submitterIndex]"
    />
    <div
      v-if="field.type === 'cells' && (isSelected || isDraw)"
@@ -19,7 +19,7 @@
        v-for="(cellW, index) in cells"
        :key="index"
        class="absolute top-0 bottom-0 border-r"
-        :class="borderColors[submitterIndex]"
+        :class="field.type === 'heading' ? '' : borderColors[submitterIndex]"
        :style="{ left: (cellW / area.w * 100) + '%' }"
      >
        <span
@@ -31,14 +31,14 @@
      </div>
    </div>
    <div
-      v-if="field?.type"
-      class="absolute bg-white rounded-t border overflow-visible whitespace-nowrap group-hover:flex group-hover:z-10"
-      :class="{ 'flex z-10': isNameFocus || isSelected, invisible: !isNameFocus && !isSelected }"
+      v-if="field?.type && (isSelected || isNameFocus)"
+      class="absolute bg-white rounded-t border overflow-visible whitespace-nowrap flex z-10"
      style="top: -25px; height: 25px"
      @mousedown.stop
      @pointerdown.stop
    >
      <FieldSubmitter
+        v-if="field.type != 'heading'"
        v-model="field.submitter_uuid"
        class="border-r"
        :compact="true"
@@ -61,19 +61,21 @@
      <span
        v-if="field.type !== 'checkbox' || field.name"
        ref="name"
-        :contenteditable="editable && !defaultField"
+        :contenteditable="editable && !defaultField && field.type !== 'heading'"
        dir="auto"
        class="pr-1 cursor-text outline-none block"
        style="min-width: 2px"
+        @paste.prevent="onPaste"
        @keydown.enter.prevent="onNameEnter"
        @focus="onNameFocus"
        @blur="onNameBlur"
-      >{{ optionIndexText }} {{ field.name || defaultName }}</span>
+      >{{ optionIndexText }} {{ (defaultField ? (field.title || field.name) : field.name) || defaultName }}</span>
      <div
-        v-if="isNameFocus && !['checkbox', 'phone'].includes(field.type)"
+        v-if="isSettingsFocus || (isValueInput && field.type !== 'heading') || (isNameFocus && !['checkbox', 'phone'].includes(field.type))"
        class="flex items-center ml-1.5"
      >
        <input
+          v-if="!isValueInput"
          :id="`required-checkbox-${field.uuid}`"
          v-model="field.required"
          type="checkbox"
@@ -81,11 +83,69 @@
          @mousedown.prevent
        >
        <label
+          v-if="!isValueInput"
          :for="`required-checkbox-${field.uuid}`"
          class="label text-xs"
          @click.prevent="field.required = !field.required"
          @mousedown.prevent
        >{{ t('required') }}</label>
+        <input
+          v-if="isValueInput"
+          :id="`readonly-checkbox-${field.uuid}`"
+          type="checkbox"
+          class="checkbox checkbox-xs no-animation rounded"
+          :checked="!(field.readonly ?? true)"
+          @change="field.readonly = !(field.readonly ?? true)"
+          @mousedown.prevent
+        >
+        <label
+          v-if="isValueInput"
+          :for="`readonly-checkbox-${field.uuid}`"
+          class="label text-xs"
+          @click.prevent="field.readonly = !(field.readonly ?? true)"
+          @mousedown.prevent
+        >{{ t('editable') }}</label>
+        <span
+          v-if="field.type !== 'payment' && !isValueInput"
+          class="dropdown dropdown-end"
+          @mouseenter="renderDropdown = true"
+          @touchstart="renderDropdown = true"
+        >
+          <label
+            ref="settingsButton"
+            tabindex="0"
+            :title="t('settings')"
+            class="cursor-pointer flex items-center"
+            style="height: 25px"
+            @focus="isSettingsFocus = true"
+            @blur="maybeBlurSettings"
+          >
+            <IconDotsVertical class="w-5 h-5" />
+          </label>
+          <ul
+            v-if="renderDropdown"
+            ref="settingsDropdown"
+            tabindex="0"
+            class="dropdown-content menu menu-xs px-2 pb-2 pt-1 shadow rounded-box w-52 z-10 rounded-t-none"
+            :style="{ backgroundColor: 'white' }"
+            @dragstart.prevent.stop
+            @click="closeDropdown"
+            @focusout="maybeBlurSettings"
+          >
+            <FieldSettings
+              :field="field"
+              :default-field="defaultField"
+              :editable="editable"
+              :background-color="'white'"
+              :with-required="false"
+              :with-areas="false"
+              @click-formula="isShowFormulaModal = true"
+              @click-description="isShowDescriptionModal = true"
+              @click-condition="isShowConditionsModal = true"
+              @scroll-to="[selectedAreaRef.value = $event, $emit('scroll-to', $event)]"
+            />
+          </ul>
+        </span>
      </div>
      <button
        v-else-if="editable"
@@ -97,23 +157,25 @@
      </button>
    </div>
    <div
+      ref="touchValueTarget"
      class="flex items-center h-full w-full"
      dir="auto"
-      :class="[bgColors[submitterIndex], field?.default_value ? (alignClasses[field.preferences?.align] || '') : 'justify-center']"
+      :class="[isValueInput ? 'bg-opacity-50' : 'bg-opacity-80', field.type === 'heading' ? 'bg-gray-50' : bgColors[submitterIndex], isDefaultValuePresent || isValueInput || (withFieldPlaceholder && field.areas) ? (alignClasses[field.preferences?.align] || '') : 'justify-center']"
+      @click="focusValueInput"
    >
      <span
        v-if="field"
-        class="flex justify-center items-center space-x-1 h-full"
-        :class="{'w-full h-full': field.type == 'checkbox'}"
+        class="flex justify-center items-center space-x-1"
+        :class="{ 'w-full': ['cells', 'checkbox'].includes(field.type), 'h-full': !isValueInput }"
      >
        <div
-          v-if="field?.default_value"
-          :class="{ 'w-full h-full': field.type == 'checkbox', 'text-[1.5vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars }"
+          v-if="isDefaultValuePresent || isValueInput || (withFieldPlaceholder && field.areas && field.type !== 'checkbox')"
+          :class="{ 'w-full h-full': ['cells', 'checkbox'].includes(field.type), 'text-[1.6vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars }"
        >
          <div
            ref="textContainer"
            class="flex items-center px-0.5"
-            :class="{'w-full h-full': field.type == 'checkbox'}"
+            :class="{ 'w-full h-full': ['cells', 'checkbox'].includes(field.type) }"
          >
            <IconCheck
              v-if="field.type == 'checkbox'"
@@ -121,8 +183,37 @@
              :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
            />
            <span
-              v-else
+              v-else-if="field.type === 'number' && !isValueInput && (field.default_value || field.default_value == 0)"
              class="whitespace-pre-wrap"
+            >{{ formatNumber(field.default_value, field.preferences?.format) }}</span>
+            <span
+              v-else-if="field.default_value === '{{date}}'"
+            >
+              {{ t('signing_date') }}
+            </span>
+            <div
+              v-else-if="field.type === 'cells' && field.default_value"
+              class="w-full flex items-center"
+            >
+              <div
+                v-for="(char, index) in field.default_value"
+                :key="index"
+                class="text-center flex-none"
+                :style="{ width: (area.cell_w / area.w * 100) + '%' }"
+              >
+                {{ char }}
+              </div>
+            </div>
+            <span
+              v-else
+              ref="defaultValue"
+              :contenteditable="isValueInput"
+              class="whitespace-pre-wrap outline-none empty:before:content-[attr(placeholder)] before:text-gray-400"
+              :class="{ 'cursor-text': isValueInput }"
+              :placeholder="withFieldPlaceholder && !isValueInput ? field.name || defaultName : t('type_value')"
+              @blur="onDefaultValueBlur"
+              @paste.prevent="onPaste"
+              @keydown.enter="onDefaultValueEnter"
            >{{ field.default_value }}</span>
          </div>
        </div>
@@ -136,8 +227,12 @@
      </span>
    </div>
    <div
+      v-if="!isValueInput"
      ref="touchTarget"
-      class="absolute top-0 bottom-0 right-0 left-0 cursor-pointer"
+      class="absolute top-0 bottom-0 right-0 left-0"
+      :class="isDragged ? 'cursor-grab' : 'cursor-pointer'"
+      @dblclick="maybeToggleDefaultValue"
+      @click="maybeToggleCheckboxValue"
    />
    <span
      v-if="field?.type && editable"
@@ -145,6 +240,38 @@
      @mousedown.stop="startResize"
      @touchstart="startTouchResize"
    />
+    <Teleport
+      v-if="isShowFormulaModal"
+      :to="modalContainerEl"
+    >
+      <FormulaModal
+        :field="field"
+        :editable="editable && !defaultField"
+        :build-default-name="buildDefaultName"
+        @close="isShowFormulaModal = false"
+      />
+    </Teleport>
+    <Teleport
+      v-if="isShowConditionsModal"
+      :to="modalContainerEl"
+    >
+      <ConditionsModal
+        :field="field"
+        :build-default-name="buildDefaultName"
+        @close="isShowConditionsModal = false"
+      />
+    </Teleport>
+    <Teleport
+      v-if="isShowDescriptionModal"
+      :to="modalContainerEl"
+    >
+      <DescriptionModal
+        :field="field"
+        :editable="editable && !defaultField"
+        :build-default-name="buildDefaultName"
+        @close="isShowDescriptionModal = false"
+      />
+    </Teleport>
  </div>
 </template>

@@ -152,7 +279,11 @@
 import FieldSubmitter from './field_submitter'
 import FieldType from './field_type'
 import Field from './field'
-import { IconX, IconCheck } from '@tabler/icons-vue'
+import FieldSettings from './field_settings'
+import FormulaModal from './formula_modal'
+import ConditionsModal from './conditions_modal'
+import DescriptionModal from './description_modal'
+import { IconX, IconCheck, IconDotsVertical } from '@tabler/icons-vue'
 import { v4 } from 'uuid'

 export default {
@@ -160,6 +291,11 @@ export default {
  components: {
    FieldType,
    IconCheck,
+    FieldSettings,
+    FormulaModal,
+    IconDotsVertical,
+    DescriptionModal,
+    ConditionsModal,
    FieldSubmitter,
    IconX
  },
@@ -169,6 +305,11 @@ export default {
      type: Object,
      required: true
    },
+    inputMode: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    isDraw: {
      type: Boolean,
      required: false,
@@ -179,6 +320,11 @@ export default {
      required: false,
      default: null
    },
+    withFieldPlaceholder: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    defaultSubmitters: {
      type: Array,
      required: false,
@@ -195,11 +341,18 @@ export default {
      default: null
    }
  },
-  emits: ['start-resize', 'stop-resize', 'start-drag', 'stop-drag', 'remove'],
+  emits: ['start-resize', 'stop-resize', 'start-drag', 'stop-drag', 'remove', 'scroll-to'],
  data () {
    return {
+      isShowFormulaModal: false,
+      isShowConditionsModal: false,
+      isContenteditable: false,
+      isSettingsFocus: false,
+      isShowDescriptionModal: false,
      isResize: false,
      isDragged: false,
+      isMoved: false,
+      renderDropdown: false,
      isNameFocus: false,
      textOverflowChars: 0,
      dragFrom: { x: 0, y: 0 }
@@ -208,6 +361,19 @@ export default {
  computed: {
    fieldNames: FieldType.computed.fieldNames,
    fieldIcons: FieldType.computed.fieldIcons,
+    isDefaultValuePresent () {
+      if (this.field?.type === 'radio' && this.field?.areas?.length > 1) {
+        return false
+      } else {
+        return this.field?.default_value || this.field?.default_value === 0
+      }
+    },
+    isValueInput () {
+      return (this.field.type === 'heading' && this.isSelected) || this.isContenteditable || (this.inputMode && ['text', 'number', 'date'].includes(this.field.type))
+    },
+    modalContainerEl () {
+      return this.$el.getRootNode().querySelector('#docuseal_modal_container')
+    },
    defaultName () {
      return this.buildDefaultName(this.field, this.template.fields)
    },
@@ -270,26 +436,26 @@ export default {
    },
    bgColors () {
      return [
-        'bg-red-100/80',
-        'bg-sky-100/80',
-        'bg-emerald-100/80',
-        'bg-yellow-100/80',
-        'bg-purple-100/80',
-        'bg-pink-100/80',
-        'bg-cyan-100/80',
-        'bg-orange-100/80',
-        'bg-lime-100/80',
-        'bg-indigo-100/80',
-        'bg-red-100/80',
-        'bg-sky-100/80',
-        'bg-emerald-100/80',
-        'bg-yellow-100/80',
-        'bg-purple-100/80',
-        'bg-pink-100/80',
-        'bg-cyan-100/80',
-        'bg-orange-100/80',
-        'bg-lime-100/80',
-        'bg-indigo-100/80'
+        'bg-red-100',
+        'bg-sky-100',
+        'bg-emerald-100',
+        'bg-yellow-100',
+        'bg-purple-100',
+        'bg-pink-100',
+        'bg-cyan-100',
+        'bg-orange-100',
+        'bg-lime-100',
+        'bg-indigo-100',
+        'bg-red-100',
+        'bg-sky-100',
+        'bg-emerald-100',
+        'bg-yellow-100',
+        'bg-purple-100',
+        'bg-pink-100',
+        'bg-cyan-100',
+        'bg-orange-100',
+        'bg-lime-100',
+        'bg-indigo-100'
      ]
    },
    isSelected () {
@@ -324,6 +490,62 @@ export default {
  },
  methods: {
    buildDefaultName: Field.methods.buildDefaultName,
+    closeDropdown () {
+      document.activeElement.blur()
+    },
+    maybeToggleDefaultValue () {
+      if (['text', 'number'].includes(this.field.type)) {
+        this.isContenteditable = true
+
+        this.$nextTick(() => this.focusValueInput())
+      } else if (this.field.type === 'checkbox') {
+        this.field.readonly = !this.field.readonly
+        this.field.default_value === true ? delete this.field.default_value : this.field.default_value = true
+
+        this.save()
+      } else if (this.field.type === 'date') {
+        this.field.readonly = !this.field.readonly
+        this.field.default_value === '{{date}}' ? delete this.field.default_value : this.field.default_value = '{{date}}'
+
+        this.save()
+      }
+    },
+    maybeToggleCheckboxValue () {
+      if (this.inputMode && this.field.type === 'checkbox') {
+        this.field.readonly = !this.field.readonly
+        this.field.default_value === true ? delete this.field.default_value : this.field.default_value = true
+
+        this.save()
+      }
+    },
+    focusValueInput (e) {
+      if (this.$refs.defaultValue !== document.activeElement) {
+        this.$refs.defaultValue.focus()
+
+        if (this.$refs.defaultValue.innerText.length && this.$refs.defaultValue !== e?.target) {
+          window.getSelection().collapse(
+            this.$refs.defaultValue.firstChild,
+            this.$refs.defaultValue.innerText.length
+          )
+        }
+      }
+    },
+    formatNumber (number, format) {
+      if (format === 'comma') {
+        return new Intl.NumberFormat('en-US').format(number)
+      } else if (format === 'dot') {
+        return new Intl.NumberFormat('de-DE').format(number)
+      } else if (format === 'space') {
+        return new Intl.NumberFormat('fr-FR').format(number)
+      } else {
+        return number
+      }
+    },
+    maybeBlurSettings (e) {
+      if (!e.relatedTarget || !this.$refs.settingsDropdown.contains(e.relatedTarget)) {
+        this.isSettingsFocus = false
+      }
+    },
    onNameFocus (e) {
      this.selectedAreaRef.value = this.area

@@ -350,6 +572,17 @@ export default {

      this.save()
    },
+    onPaste (e) {
+      const text = (e.clipboardData || window.clipboardData).getData('text/plain')
+
+      const selection = this.$el.getRootNode().getSelection()
+
+      if (selection.rangeCount) {
+        selection.deleteFromDocument()
+        selection.getRangeAt(0).insertNode(document.createTextNode(text))
+        selection.collapseToEnd()
+      }
+    },
    onResizeCell (e) {
      if (e.target.id === 'mask') {
        const positionX = e.offsetX / (e.target.clientWidth - 1)
@@ -366,6 +599,10 @@ export default {
        delete this.field.options
      }

+      if (['heading'].includes(this.field.type)) {
+        this.field.readonly = true
+      }
+
      if (['select', 'multiple', 'radio'].includes(this.field.type)) {
        this.field.options ||= [{ value: '', uuid: v4() }]
      }
@@ -379,6 +616,10 @@ export default {
      })
    },
    onNameBlur (e) {
+      if (e.relatedTarget === this.$refs.settingsButton) {
+        this.isSettingsFocus = true
+      }
+
      const text = this.$refs.name.innerText.trim()

      this.isNameFocus = false
@@ -393,6 +634,42 @@ export default {

      this.save()
    },
+    onDefaultValueBlur (e) {
+      const text = this.$refs.defaultValue.innerText.trim()
+
+      this.isContenteditable = false
+
+      if (text) {
+        if (this.field.type === 'number') {
+          const number = parseFloat(text)
+
+          if (number || number === 0) {
+            this.field.default_value = parseFloat(text)
+          }
+        } else {
+          this.field.default_value = text
+        }
+
+        if (![true, false].includes(this.field.readonly)) {
+          this.field.readonly = true
+        }
+
+        this.$refs.defaultValue.innerText = text
+      } else {
+        delete this.field.readonly
+        delete this.field.default_value
+        this.$refs.defaultValue.innerText = ''
+      }
+
+      this.save()
+    },
+    onDefaultValueEnter (e) {
+      if (this.field.type !== 'heading') {
+        e.preventDefault()
+
+        this.$refs.defaultValue.blur()
+      }
+    },
    onNameEnter (e) {
      this.$refs.name.blur()
    },
@@ -410,28 +687,12 @@ export default {
        this.area.y = (e.offsetY - this.dragFrom.y) / e.target.clientHeight
      }
    },
-    startDrag (e) {
-      this.selectedAreaRef.value = this.area
-
-      if (!this.editable) {
-        return
-      }
-
-      const rect = e.target.getBoundingClientRect()
-
-      this.dragFrom = { x: e.clientX - rect.left, y: e.clientY - rect.top }
-
-      this.$el.getRootNode().addEventListener('mousemove', this.drag)
-      this.$el.getRootNode().addEventListener('mouseup', this.stopDrag)
-
-      this.$emit('start-drag')
-    },
    startTouchDrag (e) {
-      if (e.target !== this.$refs.touchTarget) {
+      if (e.target !== this.$refs.touchTarget && e.target !== this.$refs.touchValueTarget) {
        return
      }

-      this.$refs?.name?.blur()
+      document.activeElement?.blur()

      e.preventDefault()

@@ -449,11 +710,15 @@ export default {
      this.$emit('start-drag')
    },
    touchDrag (e) {
+      if (!this.editable) {
+        return
+      }
+
      const page = this.$parent.$refs.mask.previousSibling
      const rect = page.getBoundingClientRect()

-      this.area.x = (this.dragFrom.x + e.touches[0].clientX - rect.left) / rect.width
-      this.area.y = (this.dragFrom.y + e.touches[0].clientY - rect.top) / rect.height
+      this.area.x = Math.min(Math.max((this.dragFrom.x + e.touches[0].clientX - rect.left) / rect.width, 0), 1 - this.area.w)
+      this.area.y = Math.min(Math.max((this.dragFrom.y + e.touches[0].clientY - rect.top) / rect.height, 0), 1 - this.area.h)
    },
    stopTouchDrag () {
      this.$el.getRootNode().removeEventListener('touchmove', this.touchDrag)
@@ -467,6 +732,60 @@ export default {

      this.$emit('stop-drag')
    },
+    startMouseMove (e) {
+      if (e.target !== this.$refs.touchTarget && e.target !== this.$refs.touchValueTarget) {
+        return
+      }
+
+      if (document.activeElement !== this.$refs.defaultValue) {
+        document.activeElement?.blur()
+      }
+
+      e.preventDefault()
+
+      this.isDragged = true
+
+      const rect = e.target.getBoundingClientRect()
+
+      this.selectedAreaRef.value = this.area
+
+      if (this.field.type === 'heading') {
+        this.$nextTick(() => this.focusValueInput())
+      }
+
+      this.dragFrom = { x: rect.left - e.clientX, y: rect.top - e.clientY }
+
+      this.$el.getRootNode().addEventListener('mousemove', this.mouseMove)
+      this.$el.getRootNode().addEventListener('mouseup', this.stopMouseMove)
+
+      this.$emit('start-drag')
+    },
+    mouseMove (e) {
+      if (!this.editable) {
+        return
+      }
+
+      this.isMoved = true
+
+      const page = this.$parent.$refs.mask.previousSibling
+      const rect = page.getBoundingClientRect()
+
+      this.area.x = Math.min(Math.max((this.dragFrom.x + e.clientX - rect.left) / rect.width, 0), 1 - this.area.w)
+      this.area.y = Math.min(Math.max((this.dragFrom.y + e.clientY - rect.top) / rect.height, 0), 1 - this.area.h)
+    },
+    stopMouseMove (e) {
+      this.$el.getRootNode().removeEventListener('mousemove', this.mouseMove)
+      this.$el.getRootNode().removeEventListener('mouseup', this.stopMouseMove)
+
+      if (this.isMoved) {
+        this.save()
+      }
+
+      this.isDragged = false
+      this.isMoved = false
+
+      this.$emit('stop-drag')
+    },
    stopDrag () {
      this.$el.getRootNode().removeEventListener('mousemove', this.drag)
      this.$el.getRootNode().removeEventListener('mouseup', this.stopDrag)
@@ -3,6 +3,31 @@
    style="max-width: 1600px"
    class="mx-auto pl-3 md:pl-4 h-full"
  >
+    <div
+      v-if="pendingFieldAttachmentUuids.length"
+      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('uploaded_pdf_contains_form_fields_keep_or_remove_them') }}</span>
+        <div>
+          <button
+            class="btn btn-sm"
+            @click.prevent="removePendingFields"
+          >
+            {{ t('remove') }}
+          </button>
+          <button
+            class="btn btn-sm btn-neutral text-white"
+            @click.prevent="save"
+          >
+            {{ t('keep') }}
+          </button>
+        </div>
+      </div>
+    </div>
    <div
      v-if="$slots.buttons || withTitle"
      id="title_container"
@@ -37,7 +62,7 @@
            class="btn btn-primary btn-ghost text-base hidden md:flex"
            :target="template.submitters.length > 1 ? '' : '_blank'"
            :data-turbo-frame="template.submitters.length > 1 ? 'modal' : ''"
-            @click="maybeShowEmptyTemplateAlert"
+            @click="maybeShowErrorTemplateAlert"
          >
            <IconWritingSign
              width="22"
@@ -51,7 +76,7 @@
            :href="`/templates/${template.id}/submissions/new?with_link=true`"
            data-turbo-frame="modal"
            class="white-button md:!px-6"
-            @click="maybeShowEmptyTemplateAlert"
+            @click="maybeShowErrorTemplateAlert"
          >
            <IconUsersPlus
              width="20"
@@ -61,26 +86,55 @@
              {{ t('send') }}
            </span>
          </a>
-          <button
+          <span
            v-if="editable"
-            class="base-button"
-            :class="{ disabled: isSaving }"
-            v-bind="isSaving ? { disabled: true } : {}"
-            @click.prevent="onSaveClick"
+            class="flex"
          >
-            <IconInnerShadowTop
-              v-if="isSaving"
-              width="22"
-              class="animate-spin"
-            />
-            <IconDeviceFloppy
-              v-else
-              width="22"
-            />
-            <span class="hidden md:inline">
-              {{ t('save') }}
-            </span>
-          </button>
+            <button
+              class="base-button !rounded-r-none !pr-2"
+              :class="{ disabled: isSaving }"
+              v-bind="isSaving ? { disabled: true } : {}"
+              @click.prevent="onSaveClick"
+            >
+              <IconInnerShadowTop
+                v-if="isSaving"
+                width="22"
+                class="animate-spin"
+              />
+              <IconDeviceFloppy
+                v-else
+                width="22"
+              />
+              <span class="hidden md:inline">
+                {{ t('save') }}
+              </span>
+            </button>
+            <div class="dropdown dropdown-end">
+              <label
+                tabindex="0"
+                class="base-button !rounded-l-none !pl-1 !pr-2 !border-l-neutral-500"
+              >
+                <span class="text-sm align-text-top">
+                  <IconChevronDown class="w-5 h-5 flex-shrink-0" />
+                </span>
+              </label>
+              <ul
+                tabindex="0"
+                class="dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box text-right"
+              >
+                <li>
+                  <a
+                    :href="`/templates/${template.id}/form`"
+                    data-turbo="false"
+                    class="flex items-center justify-center space-x-2"
+                  >
+                    <IconEye class="w-6 h-6 flex-shrink-0" />
+                    <span class="whitespace-nowrap">Save and Preview</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </span>
          <a
            v-else
            :href="`/templates/${template.id}`"
@@ -123,7 +177,7 @@
          @change="save"
        />
        <div
-          class="sticky bottom-0 py-2"
+          class="sticky bottom-0 py-2 space-y-2"
          :style="{ backgroundColor }"
        >
          <Upload
@@ -132,6 +186,22 @@
            :template-id="template.id"
            @success="updateFromUpload"
          />
+          <button
+            v-if="sortedDocuments.length && editable && withAddPageButton"
+            id="add_blank_page_button"
+            class="btn btn-outline w-full"
+            @click.prevent="addBlankPage"
+          >
+            <IconInnerShadowTop
+              v-if="isLoadingBlankPage"
+              class="animate-spin w-5 h-5"
+            />
+            <IconPlus
+              v-else
+              class="w-5 h-5"
+            />
+            {{ t('add_blank_page') }}
+          </button>
        </div>
      </div>
      <div
@@ -142,12 +212,30 @@
          ref="documents"
          class="pr-3.5 pl-0.5"
        >
-          <Dropzone
-            v-if="!sortedDocuments.length && withUploadButton"
-            :template-id="template.id"
-            :accept-file-types="acceptFileTypes"
-            @success="updateFromUpload"
-          />
+          <template v-if="!sortedDocuments.length && (withUploadButton || withAddPageButton)">
+            <Dropzone
+              v-if="withUploadButton"
+              :template-id="template.id"
+              :accept-file-types="acceptFileTypes"
+              @success="updateFromUpload"
+            />
+            <button
+              v-if="withAddPageButton"
+              id="add_blank_page_button"
+              class="btn btn-outline w-full mt-4"
+              @click.prevent="addBlankPage"
+            >
+              <IconInnerShadowTop
+                v-if="isLoadingBlankPage"
+                class="animate-spin w-5 h-5"
+              />
+              <IconPlus
+                v-else
+                class="w-5 h-5"
+              />
+              {{ t('add_blank_page') }}
+            </button>
+          </template>
          <template v-else>
            <template
              v-for="document in sortedDocuments"
@@ -159,9 +247,11 @@
                :selected-submitter="selectedSubmitter"
                :document="document"
                :is-drag="!!dragField"
-                :default-fields="defaultFields"
+                :input-mode="inputMode"
+                :default-fields="[...defaultRequiredFields, ...defaultFields]"
                :allow-draw="!onlyDefinedFields"
                :default-submitters="defaultSubmitters"
+                :with-field-placeholder="withFieldPlaceholder"
                :draw-field="drawField"
                :draw-field-type="drawFieldType"
                :editable="editable"
@@ -188,7 +278,7 @@
            </template>
            <div
              v-if="sortedDocuments.length && isBreakpointLg && editable"
-              class="pb-4"
+              class="pb-4 space-y-2"
            >
              <Upload
                v-if="withUploadButton"
@@ -196,6 +286,22 @@
                :accept-file-types="acceptFileTypes"
                @success="updateFromUpload"
              />
+              <button
+                v-if="withAddPageButton"
+                id="add_blank_page_button"
+                class="btn btn-outline w-full mt-4"
+                @click.prevent="addBlankPage"
+              >
+                <IconInnerShadowTop
+                  v-if="isLoadingBlankPage"
+                  class="animate-spin w-5 h-5"
+                />
+                <IconPlus
+                  v-else
+                  class="w-5 h-5"
+                />
+                {{ t('add_blank_page') }}
+              </button>
            </div>
          </template>
        </div>
@@ -223,7 +329,7 @@
                {{ t('cancel') }}
              </button>
              <a
-                v-if="!drawField && !drawOption && !['stamp', 'signature', 'initials'].includes(drawField?.type || drawFieldType)"
+                v-if="!drawField && !drawOption && !['stamp', 'signature', 'initials', 'heading'].includes(drawField?.type || drawFieldType)"
                href="#"
                class="link block mt-3 text-sm"
                @click.prevent="[addField(drawFieldType), drawField = null, drawOption = null, withSelectedFieldType ? '' : drawFieldType = '', showDrawField = false]"
@@ -242,7 +348,8 @@
            :with-help="withHelp"
            :default-submitters="defaultSubmitters"
            :draw-field-type="drawFieldType"
-            :default-fields="defaultFields"
+            :default-fields="[...defaultRequiredFields, ...defaultFields]"
+            :default-required-fields="defaultRequiredFields"
            :field-types="fieldTypes"
            :with-sticky-submitters="withStickySubmitters"
            :only-defined-fields="onlyDefinedFields"
@@ -273,7 +380,8 @@
      <MobileFields
        v-if="sortedDocuments.length && !drawField && editable"
        :fields="template.fields"
-        :default-fields="defaultFields"
+        :default-fields="[...defaultRequiredFields, ...defaultFields]"
+        :default-required-fields="defaultRequiredFields"
        :field-types="fieldTypes"
        :selected-submitter="selectedSubmitter"
        @select="startFieldDraw($event)"
@@ -294,7 +402,7 @@ import Contenteditable from './contenteditable'
 import DocumentPreview from './preview'
 import DocumentControls from './controls'
 import MobileFields from './mobile_fields'
-import { IconUsersPlus, IconDeviceFloppy, IconWritingSign, IconInnerShadowTop } from '@tabler/icons-vue'
+import { IconPlus, IconUsersPlus, IconDeviceFloppy, IconChevronDown, IconEye, IconWritingSign, IconInnerShadowTop, IconInfoCircle } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 import { ref, computed } from 'vue'
 import { en as i18nEn } from './i18n'
@@ -305,7 +413,9 @@ export default {
    Upload,
    Document,
    Fields,
+    IconInfoCircle,
    MobileDrawField,
+    IconPlus,
    IconWritingSign,
    MobileFields,
    Logo,
@@ -315,6 +425,8 @@ export default {
    IconInnerShadowTop,
    Contenteditable,
    IconUsersPlus,
+    IconChevronDown,
+    IconEye,
    IconDeviceFloppy
  },
  provide () {
@@ -323,6 +435,7 @@ export default {
      save: this.save,
      t: this.t,
      currencies: this.currencies,
+      locale: this.locale,
      baseFetch: this.baseFetch,
      fieldTypes: this.fieldTypes,
      backgroundColor: this.backgroundColor,
@@ -346,21 +459,41 @@ export default {
      required: false,
      default: () => ({})
    },
+    withFieldPlaceholder: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    backgroundColor: {
      type: String,
      required: false,
      default: ''
    },
+    locale: {
+      type: String,
+      required: false,
+      default: ''
+    },
    editable: {
      type: Boolean,
      required: false,
      default: true
    },
+    inputMode: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    withHelp: {
      type: Boolean,
      required: false,
      default: true
    },
+    withAddPageButton: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    autosave: {
      type: Boolean,
      required: false,
@@ -371,6 +504,11 @@ export default {
      required: false,
      default: () => []
    },
+    defaultRequiredFields: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
    withSelectedFieldType: {
      type: Boolean,
      required: false,
@@ -425,6 +563,13 @@ export default {
        return () => {}
      }
    },
+    onChange: {
+      type: Function,
+      required: false,
+      default () {
+        return () => {}
+      }
+    },
    withStickySubmitters: {
      type: Boolean,
      required: false,
@@ -495,10 +640,13 @@ export default {
    return {
      documentRefs: [],
      isBreakpointLg: false,
+      isLoadingBlankPage: false,
      isSaving: false,
      selectedSubmitter: null,
      showDrawField: false,
+      pendingFieldAttachmentUuids: [],
      drawField: null,
+      copiedArea: null,
      drawFieldType: null,
      drawOption: null,
      dragField: null
@@ -507,6 +655,20 @@ export default {
  computed: {
    selectedAreaRef: () => ref(),
    fieldsDragFieldRef: () => ref(),
+    defaultDateFormat () {
+      const isUsBrowser = Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US')
+      const isUsTimezone = new Intl.DateTimeFormat('en-US', { timeZoneName: 'short' }).format(new Date()).match(/\s(?:CST|CDT|PST|PDT|EST|EDT)$/)
+
+      return this.localeDateFormats[this.locale] || ((isUsBrowser || isUsTimezone) ? 'MM/DD/YYYY' : 'DD/MM/YYYY')
+    },
+    localeDateFormats () {
+      return {
+        'de-DE': 'DD.MM.YYYY',
+        'fr-FR': 'DD/MM/YYYY',
+        'it-IT': 'DD/MM/YYYY',
+        'es-ES': 'DD/MM/YYYY'
+      }
+    },
    fieldAreasIndex () {
      const areas = {}

@@ -522,6 +684,11 @@ export default {

      return areas
    },
+    isAllRequiredFieldsAdded () {
+      return !this.defaultRequiredFields?.some((f) => {
+        return !this.template.fields?.some((field) => field.name === f.name)
+      })
+    },
    selectedField () {
      return this.template.fields.find((f) => f.areas?.includes(this.selectedAreaRef.value))
    },
@@ -574,6 +741,12 @@ export default {
        document.querySelector('form[action="/auth/stripe_connect"]')?.closest('.dropdown')?.querySelector('label')?.focus()
      }
    })
+
+    this.template.schema.forEach((item) => {
+      if (item.pending_fields) {
+        this.pendingFieldAttachmentUuids.push(item.attachment_uuid)
+      }
+    })
  },
  unmounted () {
    document.removeEventListener('keyup', this.onKeyUp)
@@ -588,6 +761,13 @@ export default {
    t (key) {
      return this.i18n[key] || i18nEn[key] || key
    },
+    removePendingFields () {
+      this.template.fields = this.template.fields.filter((f) => {
+        return this.template.schema.find((item) => item.attachment_uuid === f.attachment_uuid && item.pending_fields)
+      })
+
+      this.save()
+    },
    addField (type, area = null) {
      const field = {
        name: '',
@@ -608,7 +788,7 @@ export default {

      if (type === 'date') {
        field.preferences = {
-          format: Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') ? 'MM/DD/YYYY' : 'DD/MM/YYYY'
+          format: this.defaultDateFormat
        }
      }

@@ -641,7 +821,7 @@ export default {

        if (type === 'date') {
          field.preferences = {
-            format: Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') ? 'MM/DD/YYYY' : 'DD/MM/YYYY'
+            format: this.defaultDateFormat
          }
        }

@@ -728,8 +908,58 @@ export default {
        event.preventDefault()

        this.undo()
+      } else if ((event.ctrlKey || event.metaKey) && event.key === 'c' && document.activeElement === document.body) {
+        event.preventDefault()
+
+        this.copiedArea = this.selectedAreaRef?.value
+      } else if ((event.ctrlKey || event.metaKey) && event.key === 'v' && this.copiedArea && document.activeElement === document.body) {
+        event.preventDefault()
+
+        this.pasteField()
+      } else if (this.selectedAreaRef.value && ['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'].includes(event.key) && document.activeElement === document.body) {
+        event.preventDefault()
+
+        this.handleAreaArrows(event)
      }
    },
+    handleAreaArrows (event) {
+      if (!this.editable) {
+        return
+      }
+
+      const area = this.selectedAreaRef.value
+      const documentRef = this.documentRefs.find((e) => e.document.uuid === area.attachment_uuid)
+      const page = documentRef.pageRefs[area.page].$refs.image
+      const rect = page.getBoundingClientRect()
+      const diff = (event.shiftKey ? 5.0 : 1.0)
+
+      if (event.key === 'ArrowRight' && event.altKey) {
+        area.w = Math.min(Math.max(area.w + diff / rect.width, 0), 1 - area.x)
+      } else if (event.key === 'ArrowLeft' && event.altKey) {
+        area.w = Math.min(Math.max(area.w - diff / rect.width, 0), 1 - area.x)
+      } else if (event.key === 'ArrowUp' && event.altKey) {
+        area.h = Math.min(Math.max(area.h - diff / rect.height, 0), 1 - area.y)
+      } else if (event.key === 'ArrowDown' && event.altKey) {
+        area.h = Math.min(Math.max(area.h + diff / rect.height, 0), 1 - area.y)
+      } else if (event.key === 'ArrowRight') {
+        area.x = Math.min(Math.max(area.x + diff / rect.width, 0), 1 - area.w)
+      } else if (event.key === 'ArrowLeft') {
+        area.x = Math.min(Math.max(area.x - diff / rect.width, 0), 1 - area.w)
+      } else if (event.key === 'ArrowUp') {
+        area.y = Math.min(Math.max(area.y - diff / rect.height, 0), 1 - area.h)
+      } else if (event.key === 'ArrowDown') {
+        area.y = Math.min(Math.max(area.y + diff / rect.height, 0), 1 - area.h)
+      }
+
+      this.debouncedSave()
+    },
+    debouncedSave () {
+      clearTimeout(this._saveTimeout)
+
+      this._saveTimeout = setTimeout(() => {
+        this.save()
+      }, 700)
+    },
    removeArea (area) {
      const field = this.template.fields.find((f) => f.areas?.includes(area))

@@ -741,6 +971,39 @@ export default {

      this.save()
    },
+    pasteField () {
+      const field = this.template.fields.find((f) => f.areas?.includes(this.copiedArea))
+      const currentArea = this.selectedAreaRef?.value || this.copiedArea
+
+      if (field && currentArea) {
+        const area = {
+          ...JSON.parse(JSON.stringify(this.copiedArea)),
+          attachment_uuid: currentArea.attachment_uuid,
+          page: currentArea.page,
+          x: currentArea.x,
+          y: currentArea.y + currentArea.h * 1.3
+        }
+
+        if (['radio', 'multiple'].includes(field.type)) {
+          this.copiedArea.option_uuid ||= field.options[0].uuid
+          area.option_uuid = v4()
+
+          field.options.push({ uuid: area.option_uuid })
+
+          field.areas.push(area)
+        } else {
+          this.template.fields.push({
+            ...JSON.parse(JSON.stringify(field)),
+            uuid: v4(),
+            areas: [area]
+          })
+        }
+
+        this.selectedAreaRef.value = area
+
+        this.save()
+      }
+    },
    pushUndo () {
      const stringData = JSON.stringify(this.template)

@@ -838,7 +1101,7 @@ export default {
          type = this.fieldTypes[0]
        }

-        if (type === 'checkbox' && !this.drawFieldType) {
+        if (type === 'checkbox' && !this.drawFieldType && (this.template.fields[this.template.fields.length - 1]?.type === 'checkbox' || area.w)) {
          const previousField = [...this.template.fields].reverse().find((f) => f.type === type)
          const previousArea = previousField?.areas?.[previousField.areas.length - 1]

@@ -889,13 +1152,13 @@ export default {
          field.options = [{ value: '', uuid: v4() }]
        }

-        if (field.type === 'stamp') {
+        if (['stamp', 'heading'].includes(field.type)) {
          field.readonly = true
        }

        if (field.type === 'date') {
          field.preferences = {
-            format: Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') ? 'MM/DD/YYYY' : 'DD/MM/YYYY'
+            format: this.defaultDateFormat
          }
        }
      }
@@ -971,6 +1234,46 @@ export default {
      }

      this.save()
+
+      document.activeElement?.blur()
+
+      if (field.type === 'heading') {
+        this.$nextTick(() => {
+          const documentRef = this.documentRefs.find((e) => e.document.uuid === area.attachment_uuid)
+          const areaRef = documentRef.pageRefs[area.page].areaRefs.find((ref) => ref.area === this.selectedAreaRef.value)
+
+          areaRef.focusValueInput()
+        })
+      }
+    },
+    addBlankPage () {
+      this.isLoadingBlankPage = true
+
+      const canvas = document.createElement('canvas')
+
+      canvas.width = 816
+      canvas.height = 1056
+
+      const ctx = canvas.getContext('2d')
+
+      ctx.fillStyle = 'white'
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+      canvas.toBlob((blob) => {
+        const file = new File([blob], `Page ${this.template.schema.length + 1}.png`, { type: blob.type, lastModified: Date.now() })
+
+        const formData = new FormData()
+        formData.append('files[]', file)
+
+        this.baseFetch(`/templates/${this.template.id}/documents`, {
+          method: 'POST',
+          body: formData
+        }).then(async (resp) => {
+          this.updateFromUpload(await resp.json())
+        }).finally(() => {
+          this.isLoadingBlankPage = false
+        })
+      }, 'image/png')
    },
    updateFromUpload (data) {
      this.template.schema.push(...data.schema)
@@ -1003,6 +1306,18 @@ export default {
      }

      this.save()
+
+      data.documents.forEach((attachment) => {
+        if (attachment.metadata?.pdf?.fields?.length) {
+          this.pendingFieldAttachmentUuids.push(attachment.uuid)
+
+          attachment.metadata.pdf.fields.forEach((field) => {
+            field.submitter_uuid = this.selectedSubmitter.uuid
+
+            this.template.fields.push(field)
+          })
+        }
+      })
    },
    updateName (value) {
      this.template.name = value
@@ -1093,24 +1408,62 @@ export default {

      this.save()
    },
-    maybeShowEmptyTemplateAlert (e) {
+    maybeShowErrorTemplateAlert (e) {
+      if (!this.isAllRequiredFieldsAdded) {
+        e.preventDefault()
+
+        const fields = this.defaultRequiredFields?.filter((f) => {
+          return !this.template.fields?.some((field) => field.name === f.name)
+        })
+
+        if (fields?.length) {
+          return alert(this.t('add_all_required_fields_to_continue') + ': ' + fields.map((f) => f.name).join(', '))
+        }
+      }
+
      if (!this.template.fields.length) {
        e.preventDefault()

        alert('Please draw fields to prepare the document.')
+      } else {
+        const submitterWithoutFields =
+          this.template.submitters.find((submitter) => !this.template.fields.some((f) => f.submitter_uuid === submitter.uuid))
+
+        if (submitterWithoutFields) {
+          e.preventDefault()
+
+          alert(`Please add fields for the ${submitterWithoutFields.name}. Or, remove the ${submitterWithoutFields.name} if not needed.`)
+        }
      }
    },
    onSaveClick () {
-      if (this.template.fields.length) {
-        this.isSaving = true
-
-        this.save().then(() => {
-          window.Turbo.visit(`/templates/${this.template.id}`)
-        }).finally(() => {
-          this.isSaving = false
+      if (!this.isAllRequiredFieldsAdded) {
+        const fields = this.defaultRequiredFields?.filter((f) => {
+          return !this.template.fields?.some((field) => field.name === f.name)
        })
-      } else {
+
+        if (fields?.length) {
+          return alert(this.t('add_all_required_fields_to_continue') + ': ' + fields.map((f) => f.name).join(', '))
+        }
+      }
+
+      if (!this.template.fields.length) {
        alert('Please draw fields to prepare the document.')
+      } else {
+        const submitterWithoutFields =
+          this.template.submitters.find((submitter) => !this.template.fields.some((f) => f.submitter_uuid === submitter.uuid))
+
+        if (submitterWithoutFields) {
+          alert(`Please add fields for the ${submitterWithoutFields.name}. Or, remove the ${submitterWithoutFields.name} if not needed.`)
+        } else {
+          this.isSaving = true
+
+          this.save().then(() => {
+            window.Turbo.visit(`/templates/${this.template.id}`)
+          }).finally(() => {
+            this.isSaving = false
+          })
+        }
      }
    },
    scrollToArea (area) {
@@ -1131,6 +1484,12 @@ export default {
      })
    },
    save ({ force } = { force: false }) {
+      this.pendingFieldAttachmentUuids = []
+
+      if (this.onChange) {
+        this.onChange(this.template)
+      }
+
      if (!this.autosave && !force) {
        return Promise.resolve({})
      }
@@ -29,21 +29,38 @@
          >Available in Pro</a>
        </div>
        <form @submit.prevent="validateSaveAndClose">
-          <div class="my-4">
-            <div class="space-y-4">
+          <div class="my-4 space-y-5">
+            <div
+              v-for="(condition, cindex) in conditions"
+              :key="cindex"
+              class="space-y-4 relative"
+            >
+              <div
+                v-if="conditions.length > 1"
+                class="flex justify-between border-b mx-1 -mb-1 pb-1"
+              >
+                <span class="text-sm">
+                  {{ t('condition') }} {{ cindex + 1 }}
+                </span>
+                <a
+                  href="#"
+                  class="link text-sm"
+                  @click.prevent="conditions.splice(cindex, 1)"
+                > {{ t('remove') }}</a>
+              </div>
              <select
                class="select select-bordered select-sm w-full bg-white h-11 pl-4 text-base font-normal"
                required
                @change="[
-                  newCondition.field_uuid = $event.target.value,
-                  delete newCondition.value,
-                  (conditionActions.includes(newCondition.action) ? '' : newCondition.action = conditionActions[0])
+                  condition.field_uuid = $event.target.value,
+                  delete condition.value,
+                  (conditionActions(condition).includes(condition.action) ? '' : condition.action = conditionActions(condition)[0])
                ]"
              >
                <option
                  value=""
                  disabled
-                  :selected="!newCondition.field_uuid"
+                  :selected="!condition.field_uuid"
                >
                  {{ t('select_field_') }}
                </option>
@@ -51,19 +68,19 @@
                  v-for="f in fields"
                  :key="f.uuid"
                  :value="f.uuid"
-                  :selected="newCondition.field_uuid === f.uuid"
+                  :selected="condition.field_uuid === f.uuid"
                >
                  {{ f.name || buildDefaultName(f, template.fields) }}
                </option>
              </select>
              <select
-                v-model="newCondition.action"
+                v-model="condition.action"
                class="select select-bordered select-sm w-full h-11 pl-4 text-base font-normal"
-                :class="{ 'bg-white': newCondition.field_uuid, 'bg-base-300': !newCondition.field_uuid }"
-                :required="newCondition.field_uuid"
+                :class="{ 'bg-white': condition.field_uuid, 'bg-base-300': !condition.field_uuid }"
+                :required="condition.field_uuid"
              >
                <option
-                  v-for="action in conditionActions"
+                  v-for="action in conditionActions(condition)"
                  :key="action"
                  :value="action"
                >
@@ -71,10 +88,10 @@
                </option>
              </select>
              <select
-                v-if="conditionField?.options?.length"
+                v-if="conditionField(condition)?.options?.length"
                class="select select-bordered select-sm w-full bg-white h-11 pl-4 text-base font-normal"
                required
-                @change="newCondition.value = $event.target.value"
+                @change="condition.value = $event.target.value"
              >
                <option
                  value=""
@@ -84,16 +101,21 @@
                  {{ t('select_value_') }}
                </option>
                <option
-                  v-for="(option, index) in conditionField.options"
+                  v-for="(option, index) in conditionField(condition).options"
                  :key="option.uuid"
                  :value="option.uuid"
-                  :selected="newCondition.value === option.uuid"
+                  :selected="condition.value === option.uuid"
                >
                  {{ option.value || `${t('option')} ${index + 1}` }}
                </option>
              </select>
            </div>
          </div>
+          <a
+            href="#"
+            class="inline float-right link text-right mb-3 px-2"
+            @click.prevent="conditions.push({})"
+          > + {{ t('add_condition') }}</a>
          <button
            class="base-button w-full mt-2"
          >
@@ -106,7 +128,7 @@
        >
          <button
            class="link"
-            @click="[newCondition.field_uuid = null, delete field.conditions, validateSaveAndClose()]"
+            @click="[conditions = [], delete field.conditions, validateSaveAndClose()]"
          >
            {{ t('remove_condition') }}
          </button>
@@ -133,16 +155,10 @@ export default {
  emits: ['close'],
  data () {
    return {
-      newCondition: this.field.conditions?.[0] || {}
+      conditions: this.field.conditions?.[0] ? JSON.parse(JSON.stringify(this.field.conditions)) : [{}]
    }
  },
  computed: {
-    conditionField () {
-      return this.fields.find((f) => f.uuid === this.newCondition.field_uuid)
-    },
-    conditionActions () {
-      return this.fieldActions(this.conditionField)
-    },
    fields () {
      return this.template.fields.reduce((acc, f) => {
        if (f !== this.field && f.submitter_uuid === this.field.submitter_uuid) {
@@ -157,6 +173,12 @@ export default {
    this.field.conditions ||= []
  },
  methods: {
+    conditionField (condition) {
+      return this.fields.find((f) => f.uuid === condition.field_uuid)
+    },
+    conditionActions (condition) {
+      return this.fieldActions(this.conditionField(condition))
+    },
    fieldActions (field) {
      const actions = []

@@ -181,8 +203,8 @@ export default {
        return alert('Available only in Pro')
      }

-      if (this.newCondition.field_uuid) {
-        this.field.conditions = [this.newCondition]
+      if (this.conditions.find((f) => f.field_uuid)) {
+        this.field.conditions = this.conditions
      } else {
        delete this.field.conditions
      }
@@ -10,14 +10,12 @@
      style="min-width: 2px"
      :class="iconInline ? 'inline' : 'block'"
      class="peer outline-none focus:block"
+      @paste.prevent="onPaste"
      @keydown.enter.prevent="blurContenteditable"
      @focus="$emit('focus', $event)"
      @blur="onBlur"
    >
-      <template
-        v-for="(item, index) in (value || '').split(/(_)/)"
-        :key="index"
-      >{{ item }}<wbr></template>
+      {{ value }}
    </span>
    <span
      v-if="withRequired"
@@ -100,6 +98,17 @@ export default {
    }
  },
  methods: {
+    onPaste (e) {
+      const text = (e.clipboardData || window.clipboardData).getData('text/plain')
+
+      const selection = this.$el.getRootNode().getSelection()
+
+      if (selection.rangeCount) {
+        selection.deleteFromDocument()
+        selection.getRangeAt(0).insertNode(document.createTextNode(text))
+        selection.collapseToEnd()
+      }
+    },
    selectContent () {
      const el = this.$refs.contenteditable

@@ -34,6 +34,7 @@
                v-model="description"
                dir="auto"
                class="base-textarea !text-base w-full"
+                :readonly="!editable"
                @input="resizeTextarea"
              />
            </div>
@@ -49,6 +50,7 @@
                id="title_field"
                v-model="title"
                dir="auto"
+                :readonly="!editable"
                class="base-input !text-base w-full"
              >
            </div>
@@ -73,6 +75,11 @@ export default {
      type: Object,
      required: true
    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
    buildDefaultName: {
      type: Function,
      required: true
@@ -4,11 +4,13 @@
      v-for="(image, index) in sortedPreviewImages"
      :key="image.id"
      :ref="setPageRefs"
+      :input-mode="inputMode"
      :number="index"
      :editable="editable"
      :areas="areasIndex[index]"
      :allow-draw="allowDraw"
      :is-drag="isDrag"
+      :with-field-placeholder="withFieldPlaceholder"
      :default-fields="defaultFields"
      :default-submitters="defaultSubmitters"
      :draw-field="drawField"
@@ -17,6 +19,7 @@
      :image="image"
      @drop-field="$emit('drop-field', {...$event, attachment_uuid: document.uuid })"
      @remove-area="$emit('remove-area', $event)"
+      @scroll-to="scrollToArea"
      @draw="$emit('draw', {...$event, attachment_uuid: document.uuid })"
    />
  </div>
@@ -34,6 +37,11 @@ export default {
      type: Object,
      required: true
    },
+    inputMode: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    areasIndex: {
      type: Object,
      required: false,
@@ -44,6 +52,11 @@ export default {
      required: false,
      default: () => []
    },
+    withFieldPlaceholder: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    drawFieldType: {
      type: String,
      required: false,
@@ -125,7 +138,9 @@ export default {
  },
  methods: {
    scrollToArea (area) {
-      this.pageRefs[area.page].areaRefs.find((e) => e.area === area).$el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      this.$nextTick(() => {
+        this.pageRefs[area.page].areaRefs.find((e) => e.area === area).$el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      })
    },
    setPageRefs (el) {
      if (el) {
@@ -5,6 +5,7 @@
    @drop.prevent="onDropFiles"
  >
    <label
+      id="document_dropzone"
      class="w-full relative hover:bg-base-200/30 rounded-md border border-2 border-base-content/10 border-dashed"
      :for="inputId"
      :class="{ 'opacity-50': isLoading || isProcessing }"
@@ -14,15 +14,17 @@
        <div class="flex items-center p-1 space-x-1">
          <FieldType
            v-model="field.type"
-            :editable="editable && !defaultField"
+            :editable="editable && !defaultField && field.type != 'heading'"
            :button-width="20"
+            :menu-classes="'mt-1.5'"
+            :menu-style="{ backgroundColor: dropdownBgColor }"
            @update:model-value="[maybeUpdateOptions(), save()]"
            @click="scrollToFirstArea"
          />
          <Contenteditable
            ref="name"
-            :model-value="field.name || defaultName"
-            :editable="editable && !defaultField"
+            :model-value="(defaultField ? (field.title || field.name) : field.name) || defaultName"
+            :editable="editable && !defaultField && field.type != 'heading'"
            :icon-inline="true"
            :icon-width="18"
            :icon-stroke-width="1.6"
@@ -55,7 +57,7 @@
          class="flex items-center space-x-1"
        >
          <button
-            v-if="field && !field.areas.length"
+            v-if="field && !field.areas?.length"
            :title="t('draw')"
            class="relative cursor-pointer text-transparent group-hover:text-base-content"
            @click="$emit('set-draw', { field })"
@@ -90,9 +92,12 @@
          <PaymentSettings
            v-if="field.type === 'payment'"
            :field="field"
+            @click-condition="isShowConditionsModal = true"
+            @click-description="isShowDescriptionModal = true"
+            @click-formula="isShowFormulaModal = true"
          />
          <span
-            v-else
+            v-else-if="field.type !== 'heading'"
            class="dropdown dropdown-end"
            @mouseenter="renderDropdown = true"
            @touchstart="renderDropdown = true"
@@ -110,284 +115,24 @@
            <ul
              v-if="renderDropdown"
              tabindex="0"
-              class="mt-1.5 dropdown-content menu menu-xs p-2 shadow bg-base-100 rounded-box w-52 z-10"
+              class="mt-1.5 dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10"
+              :style="{ backgroundColor: dropdownBgColor }"
              draggable="true"
              @dragstart.prevent.stop
              @click="closeDropdown"
            >
-              <div
-                v-if="['number'].includes(field.type)"
-                class="py-1.5 px-1 relative"
-                @click.stop
-              >
-                <select
-                  class="select select-bordered select-xs w-full max-w-xs h-7 !outline-0 font-normal"
-                  @change="[field.preferences ||= {}, field.preferences.align = $event.target.value, save()]"
-                >
-                  <option
-                    v-for="value in ['left', 'right', 'center']"
-                    :key="value"
-                    :selected="field.preferences?.align ? value === field.preferences.align : value === 'left'"
-                    :value="value"
-                  >
-                    {{ t(value) }}
-                  </option>
-                </select>
-                <label
-                  :style="{ backgroundColor: backgroundColor }"
-                  class="absolute -top-1 left-2.5 px-1 h-4"
-                  style="font-size: 8px"
-                >
-                  {{ t('align') }}
-                </label>
-              </div>
-              <div
-                v-if="['text', 'number'].includes(field.type) && !defaultField"
-                class="py-1.5 px-1 relative"
-                @click.stop
-              >
-                <input
-                  v-model="field.default_value"
-                  :placeholder="t('default_value')"
-                  dir="auto"
-                  :type="field.type"
-                  class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
-                  @blur="save"
-                >
-                <label
-                  v-if="field.default_value"
-                  :style="{ backgroundColor: backgroundColor }"
-                  class="absolute -top-1 left-2.5 px-1 h-4"
-                  style="font-size: 8px"
-                >
-                  {{ t('default_value') }}
-                </label>
-              </div>
-              <div
-                v-if="field.type === 'date'"
-                class="py-1.5 px-1 relative"
-                @click.stop
-              >
-                <select
-                  v-model="field.preferences.format"
-                  :placeholder="t('format')"
-                  class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0"
-                  @change="save"
-                >
-                  <option
-                    v-for="format in dateFormats"
-                    :key="format"
-                    :value="format"
-                  >
-                    {{ formatDate(new Date(), format) }}
-                  </option>
-                </select>
-                <label
-                  :style="{ backgroundColor: backgroundColor }"
-                  class="absolute -top-1 left-2.5 px-1 h-4"
-                  style="font-size: 8px"
-                >
-                  {{ t('format') }}
-                </label>
-              </div>
-              <div
-                v-if="field.type === 'signature'"
-                class="py-1.5 px-1 relative"
-                @click.stop
-              >
-                <select
-                  :placeholder="t('format')"
-                  class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0"
-                  @change="[field.preferences.format = $event.target.value, save()]"
-                >
-                  <option
-                    value="any"
-                    :selected="!field.preferences?.format || field.preferences.format === 'any'"
-                  >
-                    {{ t('any') }}
-                  </option>
-                  <option
-                    value="drawn"
-                    :selected="field.preferences?.format === 'drawn'"
-                  >
-                    {{ t('drawn') }}
-                  </option>
-                  <option
-                    value="typed"
-                    :selected="field.preferences?.format === 'typed'"
-                  >
-                    {{ t('typed') }}
-                  </option>
-                </select>
-                <label
-                  :style="{ backgroundColor: backgroundColor }"
-                  class="absolute -top-1 left-2.5 px-1 h-4"
-                  style="font-size: 8px"
-                >
-                  {{ t('format') }}
-                </label>
-              </div>
-              <li
-                v-if="field.type != 'phone' && field.type != 'stamp'"
-                @click.stop
-              >
-                <label class="cursor-pointer py-1.5">
-                  <input
-                    v-model="field.required"
-                    type="checkbox"
-                    class="toggle toggle-xs"
-                    @update:model-value="save"
-                  >
-                  <span class="label-text">{{ t('required') }}</span>
-                </label>
-              </li>
-              <li
-                v-if="field.type == 'stamp'"
-                @click.stop
-              >
-                <label class="cursor-pointer py-1.5">
-                  <input
-                    :checked="field.preferences?.with_logo != false"
-                    type="checkbox"
-                    class="toggle toggle-xs"
-                    @change="[field.preferences ||= {}, field.preferences.with_logo = field.preferences.with_logo == false, save()]"
-                  >
-                  <span class="label-text">{{ t('with_logo') }}</span>
-                </label>
-              </li>
-              <li
-                v-if="field.type == 'checkbox'"
-                @click.stop
-              >
-                <label class="cursor-pointer py-1.5">
-                  <input
-                    v-model="field.default_value"
-                    type="checkbox"
-                    class="toggle toggle-xs"
-                    @update:model-value="[field.default_value = $event, field.readonly = $event, save()]"
-                  >
-                  <span class="label-text">{{ t('checked') }}</span>
-                </label>
-              </li>
-              <li
-                v-if="field.type == 'date'"
-                @click.stop
-              >
-                <label class="cursor-pointer py-1.5">
-                  <input
-                    v-model="field.readonly"
-                    type="checkbox"
-                    class="toggle toggle-xs"
-                    @update:model-value="[field.default_value = $event ? '{{date}}' : null, field.readonly = $event, save()]"
-                  >
-                  <span class="label-text">{{ t('set_signing_date') }}</span>
-                </label>
-              </li>
-              <li
-                v-if="['text', 'number'].includes(field.type) && !defaultField"
-                @click.stop
-              >
-                <label class="cursor-pointer py-1.5">
-                  <input
-                    v-model="field.readonly"
-                    type="checkbox"
-                    class="toggle toggle-xs"
-                    @update:model-value="save"
-                  >
-                  <span class="label-text">{{ t('read_only') }}</span>
-                </label>
-              </li>
-              <hr
-                v-if="field.type != 'stamp'"
-                class="pb-0.5 mt-0.5"
-              >
-              <li
-                v-if="field.type != 'stamp'"
-              >
-                <label
-                  class="label-text cursor-pointer text-center w-full flex items-center"
-                  @click="isShowDescriptionModal = !isShowDescriptionModal"
-                >
-                  <IconInfoCircle
-                    width="18"
-                  />
-                  <span class="text-sm">
-                    {{ t('description') }}
-                  </span>
-                </label>
-              </li>
-              <li
-                v-if="field.type != 'stamp'"
-              >
-                <label
-                  class="label-text cursor-pointer text-center w-full flex items-center"
-                  @click="isShowConditionsModal = !isShowConditionsModal"
-                >
-                  <IconRouteAltLeft
-                    width="18"
-                  />
-                  <span class="text-sm">
-                    {{ t('condition') }}
-                  </span>
-                </label>
-              </li>
-              <li v-if="field.type == 'number'">
-                <label
-                  class="label-text cursor-pointer text-center w-full flex items-center"
-                  @click="isShowFormulaModal = true"
-                >
-                  <IconMathFunction
-                    width="18"
-                  />
-                  <span class="text-sm">
-                    {{ t('formula') }}
-                  </span>
-                </label>
-              </li>
-              <hr class="pb-0.5 mt-0.5">
-              <li
-                v-for="(area, index) in sortedAreas"
-                :key="index"
-              >
-                <a
-                  href="#"
-                  class="text-sm py-1 px-2"
-                  @click.prevent="$emit('scroll-to', area)"
-                >
-                  <IconShape
-                    :width="20"
-                    :stroke-width="1.6"
-                  />
-                  {{ t('page') }}
-                  <template v-if="template.schema.length > 1">{{ template.schema.findIndex((item) => item.attachment_uuid === area.attachment_uuid) + 1 }}-</template>{{ area.page + 1 }}
-                </a>
-              </li>
-              <li v-if="!field.areas?.length || !['radio', 'multiple'].includes(field.type)">
-                <a
-                  href="#"
-                  class="text-sm py-1 px-2"
-                  @click.prevent="$emit('set-draw', { field })"
-                >
-                  <IconNewSection
-                    :width="20"
-                    :stroke-width="1.6"
-                  />
-                  {{ t('draw_new_area') }}
-                </a>
-              </li>
-              <li v-if="field.areas?.length === 1 && ['date', 'signature', 'initials', 'text', 'cells'].includes(field.type)">
-                <a
-                  href="#"
-                  class="text-sm py-1 px-2"
-                  @click.prevent="copyToAllPages(field)"
-                >
-                  <IconCopy
-                    :width="20"
-                    :stroke-width="1.6"
-                  />
-                  {{ t('copy_to_all_pages') }}
-                </a>
-              </li>
+              <FieldSettings
+                :field="field"
+                :default-field="defaultField"
+                :editable="editable"
+                :background-color="dropdownBgColor"
+                @click-formula="isShowFormulaModal = true"
+                @click-description="isShowDescriptionModal = true"
+                @click-condition="isShowConditionsModal = true"
+                @set-draw="$emit('set-draw', $event)"
+                @remove-area="removeArea"
+                @scroll-to="$emit('scroll-to', $event)"
+              />
            </ul>
          </span>
          <button
@@ -481,6 +226,7 @@
    >
      <FormulaModal
        :field="field"
+        :editable="editable && !defaultField"
        :build-default-name="buildDefaultName"
        @close="isShowFormulaModal = false"
      />
@@ -501,6 +247,7 @@
    >
      <DescriptionModal
        :field="field"
+        :editable="editable && !defaultField"
        :build-default-name="buildDefaultName"
        @close="isShowDescriptionModal = false"
      />
@@ -512,10 +259,11 @@
 import Contenteditable from './contenteditable'
 import FieldType from './field_type'
 import PaymentSettings from './payment_settings'
+import FieldSettings from './field_settings'
 import FormulaModal from './formula_modal'
 import ConditionsModal from './conditions_modal'
 import DescriptionModal from './description_modal'
-import { IconInfoCircle, IconRouteAltLeft, IconMathFunction, IconShape, IconNewSection, IconTrashX, IconCopy, IconSettings } from '@tabler/icons-vue'
+import { IconRouteAltLeft, IconMathFunction, IconNewSection, IconTrashX, IconSettings } from '@tabler/icons-vue'
 import { v4 } from 'uuid'

 export default {
@@ -523,20 +271,18 @@ export default {
  components: {
    Contenteditable,
    IconSettings,
-    IconShape,
+    FieldSettings,
    PaymentSettings,
    IconNewSection,
-    IconInfoCircle,
    FormulaModal,
    DescriptionModal,
    ConditionsModal,
    IconRouteAltLeft,
    IconTrashX,
    IconMathFunction,
-    IconCopy,
    FieldType
  },
-  inject: ['template', 'save', 'backgroundColor', 'selectedAreaRef', 't'],
+  inject: ['template', 'save', 'backgroundColor', 'selectedAreaRef', 't', 'locale'],
  props: {
    field: {
      type: Object,
@@ -566,6 +312,9 @@ export default {
  },
  computed: {
    fieldNames: FieldType.computed.fieldNames,
+    dropdownBgColor () {
+      return ['', null, 'transparent'].includes(this.backgroundColor) ? 'white' : this.backgroundColor
+    },
    schemaAttachmentsIndexes () {
      return (this.template.schema || []).reduce((acc, item, index) => {
        acc[item.attachment_uuid] = index
@@ -581,29 +330,6 @@ export default {
    modalContainerEl () {
      return this.$el.getRootNode().querySelector('#docuseal_modal_container')
    },
-    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'
-      ]
-
-      if (Intl.DateTimeFormat().resolvedOptions().timeZone?.includes('Seoul') || navigator.language?.startsWith('ko')) {
-        formats.push('YYYY년 MM월 DD일')
-      }
-
-      if (this.field.preferences?.format && !formats.includes(this.field.preferences.format)) {
-        formats.unshift(this.field.preferences.format)
-      }
-
-      return formats
-    },
    defaultName () {
      return this.buildDefaultName(this.field, this.template.fields)
    },
@@ -616,12 +342,17 @@ export default {

    if (this.field.type === 'date') {
      this.field.preferences.format ||=
-        (Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') ? 'MM/DD/YYYY' : 'DD/MM/YYYY')
+       ({ 'de-DE': 'DD.MM.YYYY' }[this.locale] || ((Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') || new Intl.DateTimeFormat('en-US', { timeZoneName: 'short' }).format(new Date()).match(/\s(?:CST|CDT|PST|PDT|EST|EDT)$/)) ? 'MM/DD/YYYY' : 'DD/MM/YYYY'))
    }
  },
  methods: {
+    removeArea (area) {
+      this.field.areas.splice(this.field.areas.indexOf(area), 1)
+
+      this.save()
+    },
    buildDefaultName (field, fields) {
-      if (field.type === 'payment' && field.preferences?.price) {
+      if (field.type === 'payment' && field.preferences?.price && !field.preferences?.formula) {
        const { price, currency } = field.preferences || {}

        const formattedPrice = new Intl.NumberFormat([], {
@@ -633,58 +364,13 @@ export default {
      } else {
        const typeIndex = fields.filter((f) => f.type === field.type).indexOf(field)

-        const suffix = { multiple: this.t('select'), radio: this.t('group') }[field.type] || this.t('field')
-
-        return `${this.fieldNames[field.type]} ${suffix} ${typeIndex + 1}`
-      }
-    },
-    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 parts = new Intl.DateTimeFormat([], {
-        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)
-    },
-    copyToAllPages (field) {
-      const areaString = JSON.stringify(field.areas[0])
-
-      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 })
-          }
+        if (this.field.type === 'heading') {
+          return `${this.fieldNames[field.type]} ${typeIndex + 1}`
+        } else {
+          const suffix = { multiple: this.t('select'), radio: this.t('group') }[field.type] || this.t('field')
+          return `${this.fieldNames[field.type]} ${suffix} ${typeIndex + 1}`
        }
-      })
-
-      this.$nextTick(() => {
-        this.$emit('scroll-to', this.field.areas[this.field.areas.length - 1])
-      })
-
-      this.save()
+      }
    },
    onNameFocus (e) {
      this.isNameFocus = true
@@ -741,6 +427,10 @@ export default {
        this.field.options ||= [{ value: '', uuid: v4() }]
      }

+      if (['heading'].includes(this.field.type)) {
+        this.field.readonly = true
+      }
+
      (this.field.areas || []).forEach((area) => {
        if (this.field.type === 'cells') {
          area.cell_w = area.w * 2 / Math.floor(area.w / area.h)
@@ -761,11 +451,6 @@ export default {

      this.isNameFocus = false

-      this.save()
-    },
-    removeArea (area) {
-      this.field.areas.splice(this.field.areas.indexOf(area), 1)
-
      this.save()
    }
  }
@@ -0,0 +1,587 @@
+<template>
+  <div
+    v-if="field.type === 'number'"
+    class="py-1.5 px-1 relative"
+    @click.stop
+  >
+    <select
+      :placeholder="t('format')"
+      class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0 bg-transparent"
+      @change="[field.preferences ||= {}, field.preferences.format = $event.target.value, save()]"
+    >
+      <option
+        v-for="format in numberFormats"
+        :key="format"
+        :value="format"
+        :selected="format === field.preferences?.format || (format === 'none' && !field.preferences?.format)"
+      >
+        {{ formatNumber(123456789.567, format) }}
+      </option>
+    </select>
+    <label
+      :style="{ backgroundColor }"
+      class="absolute -top-1 left-2.5 px-1 h-4"
+      style="font-size: 8px"
+    >
+      {{ t('format') }}
+    </label>
+  </div>
+  <div
+    v-if="['number'].includes(field.type)"
+    class="py-1.5 px-1 relative"
+    @click.stop
+  >
+    <select
+      class="select select-bordered select-xs w-full max-w-xs h-7 !outline-0 font-normal bg-transparent"
+      @change="[field.preferences ||= {}, field.preferences.align = $event.target.value, save()]"
+    >
+      <option
+        v-for="value in ['left', 'right', 'center']"
+        :key="value"
+        :selected="field.preferences?.align ? value === field.preferences.align : value === 'left'"
+        :value="value"
+      >
+        {{ t(value) }}
+      </option>
+    </select>
+    <label
+      :style="{ backgroundColor }"
+      class="absolute -top-1 left-2.5 px-1 h-4"
+      style="font-size: 8px"
+    >
+      {{ t('align') }}
+    </label>
+  </div>
+  <div
+    v-if="['select', 'radio'].includes(field.type) && !defaultField"
+    class="py-1.5 px-1 relative"
+    @click.stop
+  >
+    <select
+      :placeholder="t('default_value')"
+      dir="auto"
+      class="select select-bordered select-xs w-full max-w-xs h-7 !outline-0 font-normal bg-transparent"
+      @change="[field.default_value = $event.target.value, !field.default_value && delete field.default_value, save()]"
+    >
+      <option
+        value=""
+        :selected="!field.default_value"
+      >
+        {{ t('none') }}
+      </option>
+      <option
+        v-for="(option, index) in field.options || []"
+        :key="option.uuid"
+        :value="option.value || `${t('option')} ${index + 1}`"
+        :selected="field.default_value === (option.value || `${t('option')} ${index + 1}`)"
+      >
+        {{ option.value || `${t('option')} ${index + 1}` }}
+      </option>
+    </select>
+    <label
+      :style="{ backgroundColor }"
+      class="absolute -top-1 left-2.5 px-1 h-4"
+      style="font-size: 8px"
+    >
+      {{ t('default_value') }}
+    </label>
+  </div>
+  <div
+    v-if="['text', 'number'].includes(field.type) && !defaultField"
+    class="py-1.5 px-1 relative"
+    @click.stop
+  >
+    <input
+      v-model="field.default_value"
+      :placeholder="t('default_value')"
+      dir="auto"
+      :type="field.type"
+      class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0 bg-transparent"
+      @blur="save"
+    >
+    <label
+      v-if="field.default_value"
+      :style="{ backgroundColor }"
+      class="absolute -top-1 left-2.5 px-1 h-4"
+      style="font-size: 8px"
+    >
+      {{ t('default_value') }}
+    </label>
+  </div>
+  <div
+    v-if="['text', 'cells'].includes(field.type)"
+    class="py-1.5 px-1 relative"
+    @click.stop
+  >
+    <select
+      class="select select-bordered select-xs w-full max-w-xs h-7 !outline-0 font-normal bg-transparent"
+      @change="onChangeValidation"
+    >
+      <option
+        :selected="!field.validation"
+        value=""
+      >
+        {{ t('none') }}
+      </option>
+      <option
+        v-for="(key, value) in validations"
+        :key="key"
+        :selected="field.validation?.pattern ? value === field.validation.pattern : value === 'none'"
+        :value="value"
+      >
+        {{ t(key) }}
+      </option>
+      <option
+        :selected="field.validation && !validations[field.validation.pattern]"
+        :value="validations[field.validation?.pattern] || !field.validation?.pattern ? 'custom' : field.validation?.pattern"
+      >
+        {{ t('custom') }}
+      </option>
+    </select>
+    <label
+      :style="{ backgroundColor }"
+      class="absolute -top-1 left-2.5 px-1 h-4"
+      style="font-size: 8px"
+    >
+      {{ t('validation') }}
+    </label>
+  </div>
+  <div
+    v-if="['text', 'cells'].includes(field.type) && field.validation && !validations[field.validation.pattern]"
+    class="py-1.5 px-1 relative"
+    @click.stop
+  >
+    <input
+      ref="validationCustom"
+      v-model="field.validation.pattern"
+      :placeholder="t('regexp_validation')"
+      dir="auto"
+      class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0 bg-transparent"
+      @blur="save"
+    >
+    <label
+      v-if="field.validation.pattern"
+      :style="{ backgroundColor }"
+      class="absolute -top-1 left-2.5 px-1 h-4"
+      style="font-size: 8px"
+    >
+      {{ t('regexp_validation') }}
+    </label>
+  </div>
+  <div
+    v-if="field.type === 'date'"
+    class="py-1.5 px-1 relative"
+    @click.stop
+  >
+    <select
+      v-model="field.preferences.format"
+      :placeholder="t('format')"
+      class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0 bg-transparent"
+      @change="save"
+    >
+      <option
+        v-for="format in dateFormats"
+        :key="format"
+        :value="format"
+      >
+        {{ formatDate(new Date(), format) }}
+      </option>
+    </select>
+    <label
+      :style="{ backgroundColor }"
+      class="absolute -top-1 left-2.5 px-1 h-4"
+      style="font-size: 8px"
+    >
+      {{ t('format') }}
+    </label>
+  </div>
+  <div
+    v-if="field.type === 'signature'"
+    class="py-1.5 px-1 relative"
+    @click.stop
+  >
+    <select
+      :placeholder="t('format')"
+      class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0 bg-transparent"
+      @change="[field.preferences.format = $event.target.value, save()]"
+    >
+      <option
+        value="any"
+        :selected="!field.preferences?.format || field.preferences.format === 'any'"
+      >
+        {{ t('any') }}
+      </option>
+      <option
+        value="drawn"
+        :selected="field.preferences?.format === 'drawn'"
+      >
+        {{ t('drawn') }}
+      </option>
+      <option
+        value="typed"
+        :selected="field.preferences?.format === 'typed'"
+      >
+        {{ t('typed') }}
+      </option>
+    </select>
+    <label
+      :style="{ backgroundColor }"
+      class="absolute -top-1 left-2.5 px-1 h-4"
+      style="font-size: 8px"
+    >
+      {{ t('format') }}
+    </label>
+  </div>
+  <li
+    v-if="withRequired && field.type != 'phone' && field.type != 'stamp'"
+    @click.stop
+  >
+    <label class="cursor-pointer py-1.5">
+      <input
+        v-model="field.required"
+        type="checkbox"
+        :disabled="!editable || defaultField"
+        class="toggle toggle-xs"
+        @update:model-value="save"
+      >
+      <span class="label-text">{{ t('required') }}</span>
+    </label>
+  </li>
+  <li
+    v-if="field.type == 'stamp'"
+    @click.stop
+  >
+    <label class="cursor-pointer py-1.5">
+      <input
+        :checked="field.preferences?.with_logo != false"
+        type="checkbox"
+        class="toggle toggle-xs"
+        @change="[field.preferences ||= {}, field.preferences.with_logo = field.preferences.with_logo == false, save()]"
+      >
+      <span class="label-text">{{ t('with_logo') }}</span>
+    </label>
+  </li>
+  <li
+    v-if="field.type == 'checkbox'"
+    @click.stop
+  >
+    <label class="cursor-pointer py-1.5">
+      <input
+        v-model="field.default_value"
+        type="checkbox"
+        class="toggle toggle-xs"
+        @update:model-value="[field.default_value = $event, field.readonly = $event, save()]"
+      >
+      <span class="label-text">{{ t('checked') }}</span>
+    </label>
+  </li>
+  <li
+    v-if="field.type == 'date'"
+    @click.stop
+  >
+    <label class="cursor-pointer py-1.5">
+      <input
+        v-model="field.readonly"
+        type="checkbox"
+        class="toggle toggle-xs"
+        @update:model-value="[field.default_value = $event ? '{{date}}' : null, field.readonly = $event, save()]"
+      >
+      <span class="label-text">{{ t('set_signing_date') }}</span>
+    </label>
+  </li>
+  <li
+    v-if="['text', 'number'].includes(field.type) && !defaultField"
+    @click.stop
+  >
+    <label class="cursor-pointer py-1.5">
+      <input
+        v-model="field.readonly"
+        type="checkbox"
+        class="toggle toggle-xs"
+        @update:model-value="save"
+      >
+      <span class="label-text">{{ t('read_only') }}</span>
+    </label>
+  </li>
+  <hr
+    v-if="field.type != 'stamp'"
+    class="pb-0.5 mt-0.5"
+  >
+  <li
+    v-if="field.type != 'stamp'"
+  >
+    <label
+      class="label-text cursor-pointer text-center w-full flex items-center"
+      @click="$emit('click-description')"
+    >
+      <IconInfoCircle
+        width="18"
+      />
+      <span class="text-sm">
+        {{ t('description') }}
+      </span>
+    </label>
+  </li>
+  <li
+    v-if="field.type != 'stamp'"
+  >
+    <label
+      class="label-text cursor-pointer text-center w-full flex items-center"
+      @click="$emit('click-condition')"
+    >
+      <IconRouteAltLeft
+        width="18"
+      />
+      <span class="text-sm">
+        {{ t('condition') }}
+      </span>
+    </label>
+  </li>
+  <li v-if="field.type == 'number'">
+    <label
+      class="label-text cursor-pointer text-center w-full flex items-center"
+      @click="$emit('click-formula')"
+    >
+      <IconMathFunction
+        width="18"
+      />
+      <span class="text-sm">
+        {{ t('formula') }}
+      </span>
+    </label>
+  </li>
+  <hr class="pb-0.5 mt-0.5">
+  <template v-if="withAreas">
+    <li
+      v-for="(area, index) in sortedAreas"
+      :key="index"
+    >
+      <a
+        href="#"
+        class="text-sm py-1 px-2 group/1"
+        @click.prevent="$emit('scroll-to', area)"
+      >
+        <IconShape
+          :width="20"
+          :stroke-width="1.6"
+        />
+        {{ t('page') }}
+        <template v-if="template.schema.length > 1">{{ template.schema.findIndex((item) => item.attachment_uuid === area.attachment_uuid) + 1 }}-</template>{{ area.page + 1 }}
+        <IconX
+          :width="12"
+          class="group-hover/1:inline hidden"
+          @click.prevent.stop="[$emit('remove-area', area), $event.target.closest('.dropdown').querySelector('label').focus()]"
+        />
+      </a>
+    </li>
+    <li v-if="!field.areas?.length || !['radio', 'multiple'].includes(field.type)">
+      <a
+        href="#"
+        class="text-sm py-1 px-2"
+        @click.prevent="$emit('set-draw', { field })"
+      >
+        <IconNewSection
+          :width="20"
+          :stroke-width="1.6"
+        />
+        {{ t('draw_new_area') }}
+      </a>
+    </li>
+  </template>
+  <li v-if="field.areas?.length === 1 && ['date', 'signature', 'initials', 'text', 'cells'].includes(field.type)">
+    <a
+      href="#"
+      class="text-sm py-1 px-2"
+      @click.prevent="copyToAllPages(field)"
+    >
+      <IconCopy
+        :width="20"
+        :stroke-width="1.6"
+      />
+      {{ t('copy_to_all_pages') }}
+    </a>
+  </li>
+</template>
+
+<script>
+import { IconRouteAltLeft, IconShape, IconX, IconMathFunction, IconNewSection, IconInfoCircle, IconCopy } from '@tabler/icons-vue'
+
+export default {
+  name: 'FieldSettings',
+  components: {
+    IconShape,
+    IconInfoCircle,
+    IconMathFunction,
+    IconRouteAltLeft,
+    IconCopy,
+    IconNewSection,
+    IconX
+  },
+  inject: ['template', 'save', 't'],
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    backgroundColor: {
+      type: String,
+      required: false,
+      default: null
+    },
+    defaultField: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    withRequired: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    withAreas: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ['set-draw', 'scroll-to', 'click-formula', 'click-description', 'click-condition', 'remove-area'],
+  data () {
+    return {
+    }
+  },
+  computed: {
+    schemaAttachmentsIndexes () {
+      return (this.template.schema || []).reduce((acc, item, index) => {
+        acc[item.attachment_uuid] = index
+
+        return acc
+      }, {})
+    },
+    numberFormats () {
+      return [
+        'none',
+        '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'
+      ]
+
+      if (Intl.DateTimeFormat().resolvedOptions().timeZone?.includes('Seoul') || navigator.language?.startsWith('ko')) {
+        formats.push('YYYY년 MM월 DD일')
+      }
+
+      if (this.field.preferences?.format && !formats.includes(this.field.preferences.format)) {
+        formats.unshift(this.field.preferences.format)
+      }
+
+      return formats
+    },
+    validations () {
+      return {
+        '^[0-9]{3}-[0-9]{2}-[0-9]{4}$': 'ssn',
+        '^[0-9]{2}-[0-9]{7}$': 'ein',
+        '^[^@\\s]+@[^@\\s]+\\.[^@\\s]+$': 'email',
+        '^https?://.*': 'url',
+        '^[0-9]{5}(?:-[0-9]{4})?$': 'zip',
+        '^[0-9]+$': 'numbers_only',
+        '^[a-zA-Z]+$': 'letters_only'
+      }
+    },
+    sortedAreas () {
+      return (this.field.areas || []).sort((a, b) => {
+        return this.schemaAttachmentsIndexes[a.attachment_uuid] - this.schemaAttachmentsIndexes[b.attachment_uuid]
+      })
+    }
+  },
+  methods: {
+    onChangeValidation (event) {
+      if (event.target.value === 'custom') {
+        this.field.validation = { pattern: '' }
+
+        this.$nextTick(() => this.$refs.validationCustom.focus())
+      } else if (event.target.value) {
+        this.field.validation ||= {}
+        this.field.validation.pattern = event.target.value
+      } else {
+        delete this.field.validation
+      }
+
+      this.save()
+    },
+    copyToAllPages (field) {
+      const areaString = JSON.stringify(field.areas[0])
+
+      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 })
+          }
+        }
+      })
+
+      this.$emit('scroll-to', this.field.areas[this.field.areas.length - 1])
+
+      this.save()
+    },
+    formatNumber (number, format) {
+      if (format === 'comma') {
+        return new Intl.NumberFormat('en-US').format(number)
+      } else if (format === 'dot') {
+        return new Intl.NumberFormat('de-DE').format(number)
+      } else if (format === 'space') {
+        return new Intl.NumberFormat('fr-FR').format(number)
+      } else {
+        return number
+      }
+    },
+    formatDate (date, format) {
+      const monthFormats = {
+        M: 'numeric',
+        MM: '2-digit',
+        MMM: 'short',
+        MMMM: 'long'
+      }
+
+      const dayFormats = {
+        D: 'numeric',
+        DD: '2-digit'
+      }
+
+      const yearFormats = {
+        YYYY: 'numeric',
+        YY: '2-digit'
+      }
+
+      const parts = new Intl.DateTimeFormat([], {
+        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)
+    }
+  }
+}
+</script>
@@ -37,6 +37,7 @@
          tabindex="0"
          class="rounded-md min-w-max mb-2"
          :class="menuClasses"
+          :style="menuStyle"
          @click="closeDropdown"
        >
          <li
@@ -136,6 +137,7 @@
      v-if="(editable || !compact) && renderDropdown"
      tabindex="0"
      :class="menuClasses"
+      :style="menuStyle"
      @click="closeDropdown"
    >
      <li
@@ -253,10 +255,15 @@ export default {
      type: String,
      required: true
    },
+    menuStyle: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
    menuClasses: {
      type: String,
      required: false,
-      default: 'dropdown-content menu p-2 shadow bg-base-100 rounded-box w-full z-10'
+      default: 'dropdown-content menu p-2 shadow rounded-box w-full z-10'
    }
  },
  emits: ['update:model-value', 'remove', 'new-submitter', 'name-change'],
@@ -22,6 +22,7 @@
      v-if="editable && renderDropdown"
      tabindex="0"
      class="dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10 mb-3"
+      :style="menuStyle"
      :class="menuClasses"
      @click="closeDropdown"
    >
@@ -50,7 +51,7 @@
 </template>

 <script>
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1 } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1, IconHeading } from '@tabler/icons-vue'

 export default {
  name: 'FiledTypeDropdown',
@@ -65,6 +66,11 @@ export default {
      required: false,
      default: 'mt-1.5 bg-base-100'
    },
+    menuStyle: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
    buttonClasses: {
      type: String,
      required: false,
@@ -90,6 +96,7 @@ export default {
  computed: {
    fieldNames () {
      return {
+        heading: this.t('heading'),
        text: this.t('text'),
        signature: this.t('signature'),
        initials: this.t('initials'),
@@ -109,6 +116,7 @@ export default {
    },
    fieldIcons () {
      return {
+        heading: IconHeading,
        text: IconTextSize,
        signature: IconWritingSign,
        initials: IconLetterCaseUpper,
@@ -134,7 +142,7 @@ export default {
          return acc
        }, {})
      } else {
-        return this.fieldIcons
+        return Object.fromEntries(Object.entries(this.fieldIcons).filter(([key]) => key !== 'heading'))
      }
    }
  },
@@ -1,10 +1,11 @@
 <template>
-  <div :class="withStickySubmitters ? 'sticky top-0 z-10' : ''">
+  <div :class="withStickySubmitters ? 'sticky top-0 z-[1]' : ''">
    <FieldSubmitter
      :model-value="selectedSubmitter.uuid"
      class="roles-dropdown w-full rounded-lg"
-      :class="{ 'bg-base-100': withStickySubmitters }"
+      :style="withStickySubmitters ? { backgroundColor } : {}"
      :submitters="submitters"
+      :menu-style="{ backgroundColor: ['', null, 'transparent'].includes(backgroundColor) ? 'white' : backgroundColor }"
      :editable="editable && !defaultSubmitters.length"
      @new-submitter="save"
      @remove="removeSubmitter"
@@ -34,7 +35,7 @@
      @set-draw="$emit('set-draw', $event)"
    />
  </div>
-  <div v-if="submitterDefaultFields.length">
+  <div v-if="submitterDefaultFields.length && editable">
    <hr class="mb-2">
    <template v-if="isShowFieldSearch">
      <input
@@ -71,7 +72,7 @@
        :key="field.name"
      >
        <div
-          :style="{ backgroundColor: backgroundColor }"
+          :style="{ backgroundColor }"
          draggable="true"
          class="default-field border border-base-300 rounded rounded-tr-none relative group mb-2"
          @dragstart="onDragstart({ type: 'text', ...field })"
@@ -86,9 +87,16 @@
                :button-width="20"
              />
              <span class="block pl-0.5">
-                {{ field.name }}
+                {{ field.title || field.name }}
              </span>
            </div>
+            <span
+              v-if="defaultRequiredFields.includes(field)"
+              :data-tip="t('required')"
+              class="text-red-400 text-3xl pr-1.5 tooltip tooltip-left h-8"
+            >
+              *
+            </span>
          </div>
        </div>
      </template>
@@ -106,7 +114,7 @@
        v-if="(fieldTypes.length === 0 || fieldTypes.includes(type)) && (withPhone || type != 'phone') && (withPayment || type != 'payment')"
        draggable="true"
        class="field-type-button group flex items-center justify-center border border-dashed w-full rounded relative"
-        :style="{ backgroundColor: backgroundColor }"
+        :style="{ backgroundColor }"
        :class="drawFieldType === type ? 'border-base-content/40' : 'border-base-300 hover:border-base-content/20'"
        @dragstart="onDragstart({ type: type })"
        @dragend="$emit('drag-end')"
@@ -135,7 +143,7 @@
          href="https://www.docuseal.co/pricing"
          target="_blank"
          class="opacity-50 flex items-center justify-center border border-dashed border-base-300 w-full rounded relative"
-          :style="{ backgroundColor: backgroundColor }"
+          :style="{ backgroundColor }"
        >
          <div class="w-0 absolute left-0">
            <IconLock
@@ -210,6 +218,11 @@ export default {
      required: false,
      default: () => []
    },
+    defaultRequiredFields: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
    onlyDefinedFields: {
      type: Boolean,
      required: false,
@@ -264,7 +277,7 @@ export default {
          return acc
        }, {})
      } else {
-        return this.fieldIcons
+        return Object.fromEntries(Object.entries(this.fieldIcons).filter(([key]) => key !== 'heading'))
      }
    },
    submitterFields () {
@@ -49,6 +49,7 @@
              ref="textarea"
              v-model="formula"
              class="base-textarea !rounded-xl !text-base font-mono w-full !outline-0 !ring-0 !px-3"
+              :readonly="!editable"
              required="true"
              @input="resizeTextarea"
            />
@@ -134,6 +135,11 @@ export default {
      type: Object,
      required: true
    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
    buildDefaultName: {
      type: Function,
      required: true
@@ -198,7 +204,10 @@ export default {
        alert('Some fields are missing in the formula.')
      } else {
        this.field.preferences.formula = normalizedFormula
-        this.field.readonly = !!normalizedFormula
+
+        if (this.field.type !== 'payment') {
+          this.field.readonly = !!normalizedFormula
+        }

        this.save()

@@ -1,15 +1,24 @@
 const en = {
+  editable: 'Editable',
  search_field: 'Search field',
  field_not_found: 'Field not found',
  clear: 'Clear',
  align: 'Align',
+  add_all_required_fields_to_continue: 'Add all required fields to continue',
+  uploaded_pdf_contains_form_fields_keep_or_remove_them: 'Uploaded PDF contains form fields. Keep or remove them?',
+  keep: 'Keep',
  left: 'Left',
+  heading: 'Heading',
+  validation: 'Validation',
+  add_blank_page: 'Add blank page',
  right: 'Right',
  center: 'Center',
  description: 'Description',
  display_title: 'Display title',
  with_logo: 'With logo',
  unchecked: 'Unchecked',
+  price: 'Price',
+  type_value: 'Type value',
  equal: 'Equal',
  not_equal: 'Not equal',
  contains: 'Contains',
@@ -19,9 +28,11 @@ const en = {
  select_field_: 'Select field...',
  select_value_: 'Select value...',
  remove_condition: 'Remove condition',
+  add_condition: 'Add condition',
  are_you_sure: 'Are you sure?',
  sign_yourself: 'Sign Yourself',
  set_signing_date: 'Set signing date',
+  signing_date: 'Signing Date',
  send: 'Send',
  remove: 'Remove',
  edit: 'Edit',
@@ -96,7 +107,17 @@ const en = {
  draw_field: 'Draw {field} Field',
  replace: 'Replace',
  uploading_: 'Uploading...',
-  add_document: 'Add Document'
+  add_document: 'Add Document',
+  none: 'None',
+  ssn: 'SSN',
+  ein: 'EIN',
+  email: 'Email',
+  url: 'URL',
+  zip: 'ZIP',
+  custom: 'Custom',
+  numbers_only: 'Numbers only',
+  letters_only: 'Letters only',
+  regexp_validation: 'Regexp validation'
 }

 export { en }
@@ -146,14 +146,14 @@
        <input
          name="submissions_json"
          hidden
-          :value="JSON.stringify(submissionsData.slice(0, 1100))"
+          :value="multitenant ? JSON.stringify(submissionsData.slice(0, 1100)) : JSON.stringify(submissionsData)"
        >
      </div>
      <div
        class="px-3 border-y py-2 border-base-300 text-center w-full text-sm font-semibold"
      >
        Total entries: {{ submissionsData.length }}
-        <template v-if="submissionsData.length >= 1000">
+        <template v-if="multitenant && submissionsData.length >= 1000">
          / 1000
        </template>
      </div>
@@ -239,6 +239,11 @@ export default {
      type: Object,
      required: true
    },
+    multitenant: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    authenticityToken: {
      type: String,
      required: false,
@@ -267,9 +272,13 @@ export default {
          if (mapping.field_name && mapping.column_index != null) {
            submittersIndex[mapping.submitter_uuid] ||= { uuid: mapping.submitter_uuid, fields: [] }

-            if (['name', 'email', 'phone'].includes(mapping.field_name.toLowerCase())) {
+            if (['name', 'email', 'phone', 'external_id'].includes(mapping.field_name.toLowerCase())) {
              submittersIndex[mapping.submitter_uuid][mapping.field_name.toLowerCase()] = row[mapping.column_index]
-            } else {
+            }
+
+            const fieldType = this.fieldTypesIndex[mapping.submitter_uuid][mapping.field_name]
+
+            if (fieldType && fieldType !== 'phone') {
              submittersIndex[mapping.submitter_uuid].fields.push({
                name: mapping.field_name, default_value: row[mapping.column_index], readonly: true
              })
@@ -306,6 +315,17 @@ export default {
    submitters () {
      return this.template.submitters
    },
+    fieldTypesIndex () {
+      return this.template.fields.reduce((acc, field) => {
+        acc[field.submitter_uuid] ||= {}
+
+        if (field.name) {
+          acc[field.submitter_uuid][field.name] = field.type
+        }
+
+        return acc
+      }, {})
+    },
    columns () {
      return this.table[0]
    },
@@ -351,7 +371,13 @@ export default {
          this.defaultFields.every((f) => field.name?.toLowerCase() !== f.name?.toLowerCase())
      })

-      return [...this.defaultFields, ...templateFields]
+      const fields = [...this.defaultFields, ...templateFields]
+
+      if (this.spreadsheet && this.columns.includes('external_id')) {
+        fields.push({ name: 'external_id' })
+      }
+
+      return fields
    },
    buildDefaultMappings () {
      this.submitters.forEach((submitter) => {
@@ -24,6 +24,7 @@
      :submitters="submitters"
      :editable="editable"
      :mobile-view="true"
+      :menu-style="{ backgroundColor: ['', null, 'transparent'].includes(backgroundColor) ? 'white' : backgroundColor }"
      @new-submitter="save"
      @remove="removeSubmitter"
      @name-change="save"
@@ -43,7 +44,7 @@ export default {
    Field,
    FieldSubmitter
  },
-  inject: ['save', 't'],
+  inject: ['save', 't', 'backgroundColor'],
  props: {
    drawField: {
      type: Object,
@@ -38,14 +38,21 @@
                :stroke-width="1.6"
                :width="20"
              />
-              {{ field.name }}
+              {{ field.title || field.name }}
+              <span
+                v-if="defaultRequiredFields.includes(field)"
+                :data-tip="t('required')"
+                class="text-red-400 text-2xl tooltip tooltip-left h-6"
+              >
+                *
+              </span>
            </a>
          </li>
        </template>
      </template>
      <template v-else>
        <template
-          v-for="(icon, type) in fieldIcons"
+          v-for="(icon, type) in fieldIconsSorted"
          :key="type"
        >
          <li v-if="(fieldTypes.length === 0 || fieldTypes.includes(type)) && (withPhone || type != 'phone') && (withPayment || type != 'payment')">
@@ -99,6 +106,11 @@ export default {
      required: false,
      default: () => []
    },
+    defaultRequiredFields: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
    defaultFields: {
      type: Array,
      required: false,
@@ -21,15 +21,16 @@
        :key="i"
        :ref="setAreaRefs"
        :area="item.area"
+        :input-mode="inputMode"
        :field="item.field"
        :editable="editable"
+        :with-field-placeholder="withFieldPlaceholder"
        :default-field="defaultFields.find((f) => f.name === item.field.name)"
        :default-submitters="defaultSubmitters"
        @start-resize="resizeDirection = $event"
        @stop-resize="resizeDirection = null"
-        @start-drag="isMove = true"
-        @stop-drag="isMove = false"
        @remove="$emit('remove-area', item.area)"
+        @scroll-to="$emit('scroll-to', $event)"
      />
      <FieldArea
        v-if="newArea"
@@ -39,11 +40,11 @@
      />
    </div>
    <div
-      v-show="resizeDirection || isMove || isDrag || showMask || (drawField && isMobile) || fieldsDragFieldRef.value"
+      v-show="resizeDirection || isDrag || showMask || (drawField && isMobile) || fieldsDragFieldRef.value"
      id="mask"
      ref="mask"
      class="top-0 bottom-0 left-0 right-0 absolute"
-      :class="{ 'z-10': !isMobile, 'cursor-grab': isDrag || isMove, 'cursor-nwse-resize': drawField, [resizeDirectionClasses[resizeDirection]]: !!resizeDirectionClasses }"
+      :class="{ 'z-10': !isMobile, 'cursor-grab': isDrag, 'cursor-nwse-resize': drawField, [resizeDirectionClasses[resizeDirection]]: !!resizeDirectionClasses }"
      @pointermove="onPointermove"
      @pointerdown="onStartDraw"
      @dragover.prevent
@@ -72,11 +73,21 @@ export default {
      required: false,
      default: () => []
    },
+    inputMode: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    defaultFields: {
      type: Array,
      required: false,
      default: () => []
    },
+    withFieldPlaceholder: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    drawFieldType: {
      type: String,
      required: false,
@@ -116,12 +127,11 @@ export default {
      required: true
    }
  },
-  emits: ['draw', 'drop-field', 'remove-area'],
+  emits: ['draw', 'drop-field', 'remove-area', 'scroll-to'],
  data () {
    return {
      areaRefs: [],
      showMask: false,
-      isMove: false,
      resizeDirection: null,
      newArea: null
    }
@@ -219,7 +229,7 @@ export default {
          this.newArea.y = e.offsetY / this.$refs.mask.clientHeight
        }

-        if (this.drawField?.type === 'cells') {
+        if ((this.drawField?.type || this.drawFieldType) === 'cells') {
          this.newArea.cell_w = this.newArea.h * (this.$refs.mask.clientHeight / this.$refs.mask.clientWidth)
        }

@@ -1,7 +1,7 @@
 <template>
  <span
    class="dropdown dropdown-end"
-    :class="{ 'dropdown-open': (!field.preferences?.price || !isConnected) && !isLoading }"
+    :class="{ 'dropdown-open': ((!field.preferences?.price && !field.preferences?.formula) || !isConnected) && !isLoading }"
  >
    <label
      tabindex="0"
@@ -26,7 +26,7 @@
      >
        <select
          v-model="field.preferences.currency"
-          placeholder="Price"
+          :placeholder="t('price')"
          class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0"
          @change="save"
        >
@@ -51,14 +51,23 @@
        @click.stop
      >
        <input
+          v-if="field.preferences.formula"
+          type="number"
+          :placeholder="t('price')"
+          disabled="true"
+          class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
+          @blur="save"
+        >
+        <input
+          v-else
          v-model="field.preferences.price"
          type="number"
-          placeholder="Price"
+          :placeholder="t('price')"
          class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
          @blur="save"
        >
        <label
-          v-if="field.preferences.price"
+          v-if="field.preferences.price && !field.preferences.formula"
          :style="{ backgroundColor: backgroundColor }"
          class="absolute -top-1 left-2.5 px-1 h-4"
          style="font-size: 8px"
@@ -149,12 +158,52 @@
          data-turbo="false"
        >Learn more</a>
      </div>
+      <li class="mb-1">
+        <label
+          class="label-text cursor-pointer text-center w-full flex items-center"
+          @click="$emit('click-formula')"
+        >
+          <IconMathFunction
+            width="18"
+          />
+          <span class="text-sm">
+            {{ t('formula') }}
+          </span>
+        </label>
+      </li>
+      <hr>
+      <li>
+        <label
+          class="label-text cursor-pointer text-center w-full flex items-center"
+          @click="$emit('click-description')"
+        >
+          <IconInfoCircle
+            width="18"
+          />
+          <span class="text-sm">
+            {{ t('description') }}
+          </span>
+        </label>
+      </li>
+      <li class="mt-1">
+        <label
+          class="label-text cursor-pointer text-center w-full flex items-center"
+          @click="$emit('click-condition')"
+        >
+          <IconRouteAltLeft
+            width="18"
+          />
+          <span class="text-sm">
+            {{ t('condition') }}
+          </span>
+        </label>
+      </li>
    </ul>
  </span>
 </template>

 <script>
-import { IconSettings, IconCircleCheck, IconBrandStripe, IconInnerShadowTop } from '@tabler/icons-vue'
+import { IconMathFunction, IconSettings, IconCircleCheck, IconInfoCircle, IconBrandStripe, IconInnerShadowTop, IconRouteAltLeft } from '@tabler/icons-vue'
 import { ref } from 'vue'

 const isConnected = ref(false)
@@ -164,6 +213,9 @@ export default {
  components: {
    IconSettings,
    IconCircleCheck,
+    IconRouteAltLeft,
+    IconInfoCircle,
+    IconMathFunction,
    IconInnerShadowTop,
    IconBrandStripe
  },
@@ -174,6 +226,7 @@ export default {
      required: true
    }
  },
+  emits: ['click-condition', 'click-description', 'click-formula'],
  data () {
    return {
      isLoading: false
@@ -188,7 +241,7 @@ export default {
      return document.location.origin + '/auth/stripe_connect/callback'
    },
    defaultCurrencies () {
-      return ['USD', 'EUR', 'GBP']
+      return ['USD', 'EUR', 'GBP', 'CAD', 'AUD']
    },
    currenciesList () {
      return this.currencies.length ? this.currencies : this.defaultCurrencies
@@ -210,6 +263,10 @@ export default {
        return 'EUR'
      } else if (userTimezone.includes('London') || userTimezone.includes('Belfast')) {
        return 'GBP'
+      } else if (userTimezone.includes('Vancouver') || userTimezone.includes('Toronto') || userTimezone.includes('Halifax') || userTimezone.includes('Edmonton')) {
+        return 'CAD'
+      } else if (userTimezone.startsWith('Australia')) {
+        return 'AUD'
      } else {
        return 'USD'
      }
--- a/Show More
+++ b/Show More