Merge from docusealco/wip

This reverts commit c24ae1751e.

.github/workflows/ci.yml

@@ -7,13 +7,13 @@ jobs:
     name: Rubocop
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Install Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3.3.4
+          ruby-version: 3.4.1
       - name: Cache gems
-        uses: actions/cache@v1
+        uses: actions/cache@v4
         with:
           path: vendor/bundle
           key: ${{ runner.os }}-gem-${{ hashFiles('**/Gemfile.lock') }}
@@ -31,13 +31,13 @@ jobs:
     name: Erblint
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Install Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3.3.4
+          ruby-version: 3.4.1
       - name: Cache gems
-        uses: actions/cache@v1
+        uses: actions/cache@v4
         with:
           path: vendor/bundle
           key: ${{ runner.os }}-gem-${{ hashFiles('**/Gemfile.lock') }}
@@ -55,7 +55,7 @@ jobs:
     name: ESLint
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Install Node.js
         uses: actions/setup-node@v1
         with:
@@ -63,7 +63,7 @@ jobs:
       - name: Cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
-      - uses: actions/cache@v1
+      - uses: actions/cache@v4
         id: yarn-cache
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -96,11 +96,11 @@ jobs:
           --health-retries 5
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Install Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3.3.4
+          ruby-version: 3.4.1
       - name: Set up Node
         uses: actions/setup-node@v1
         with:
@@ -110,12 +110,12 @@ jobs:
         with:
           chrome-version: 125
       - name: Cache node_modules
-        uses: actions/cache@v1
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
       - name: Cache gems
-        uses: actions/cache@v1
+        uses: actions/cache@v4
         with:
           path: vendor/bundle
           key: ${{ runner.os }}-gem-${{ hashFiles('**/Gemfile.lock') }}

.github/workflows/docker.yml

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

.rubocop.yml

@@ -51,25 +51,25 @@ Metrics/AbcSize:
     - spec/**/*
 
 Metrics/ModuleLength:
-  Max: 500
+  Max: 1000
 
 Metrics/ClassLength:
-  Max: 500
+  Max: 1000
 
 RSpec/NestedGroups:
   Max: 6
 
 RSpec/MultipleExpectations:
-  Max: 20
+  Max: 25
 
 RSpec/ExampleLength:
-  Max: 40
+  Max: 50
 
 RSpec/MultipleMemoizedHelpers:
-  Max: 6
+  Max: 9
 
 Metrics/BlockNesting:
-  Max: 4
+  Max: 5
 
 Rails/I18nLocaleTexts:
   Enabled: false

Dockerfile

@@ -1,4 +1,4 @@
-FROM ruby:3.3.4-alpine as fonts
+FROM ruby:3.4.1-alpine as fonts
 
 WORKDIR /fonts
 
@@ -6,7 +6,7 @@ RUN apk --no-cache add fontforge wget && wget https://github.com/satbyy/go-noto-
 
 RUN fontforge -lang=py -c 'font1 = fontforge.open("FreeSans.ttf"); font2 = fontforge.open("NotoSansSymbols2-Regular.ttf"); font1.mergeFonts(font2); font1.generate("FreeSans.ttf")'
 
-FROM ruby:3.3.4-alpine as webpack
+FROM ruby:3.4.1-alpine as webpack
 
 ENV RAILS_ENV=production
 ENV NODE_ENV=production
@@ -32,7 +32,7 @@ COPY ./app/views ./app/views
 
 RUN echo "gem 'shakapacker'" > Gemfile && ./bin/shakapacker
 
-FROM ruby:3.3.4-alpine as app
+FROM ruby:3.4.1-alpine as app
 
 ENV RAILS_ENV=production
 ENV BUNDLE_WITHOUT="development:test"
@@ -41,7 +41,7 @@ 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 redis vips-heif gcompat ttf-freefont && mkdir /fonts && rm /usr/share/fonts/freefont/FreeSans.otf
+RUN echo '@edge https://dl-cdn.alpinelinux.org/alpine/edge/community' >> /etc/apk/repositories && apk add --no-cache sqlite-dev libpq-dev mariadb-dev vips-dev vips-poppler poppler-utils redis libheif@edge vips-heif gcompat ttf-freefont && mkdir /fonts && rm /usr/share/fonts/freefont/FreeSans.otf
 
 RUN echo $'.include = /etc/ssl/openssl.cnf\n\
 \n\
@@ -57,17 +57,18 @@ activate = 1' >> /app/openssl_legacy.cnf
 
 COPY ./Gemfile ./Gemfile.lock ./
 
-RUN apk add --no-cache build-base && bundle install && apk del build-base && rm -rf ~/.bundle /usr/local/bundle/cache && ruby -e "puts Dir['/usr/local/bundle/**/{spec,rdoc,resources/shared,resources/collation,resources/locales}']" | xargs rm -rf
+RUN apk add --no-cache build-base && bundle install && apk del --no-cache build-base && rm -rf ~/.bundle /usr/local/bundle/cache && ruby -e "puts Dir['/usr/local/bundle/**/{spec,rdoc,resources/shared,resources/collation,resources/locales}']" | xargs rm -rf
 
 COPY ./bin ./bin
 COPY ./app ./app
 COPY ./config ./config
-COPY ./db ./db
+COPY ./db/migrate ./db/migrate
 COPY ./log ./log
 COPY ./lib ./lib
 COPY ./public ./public
 COPY ./tmp ./tmp
 COPY LICENSE README.md Rakefile config.ru .version ./
+COPY .version ./public/version
 
 COPY --from=fonts /fonts/GoNotoKurrent-Regular.ttf /fonts/GoNotoKurrent-Bold.ttf /fonts/DancingScript-Regular.otf /fonts/OFL.txt /fonts
 COPY --from=fonts /fonts/FreeSans.ttf /usr/share/fonts/freefont

Gemfile

@@ -2,7 +2,7 @@
 
 source 'https://rubygems.org'
 
-ruby '3.3.4'
+ruby '3.4.1'
 
 gem 'arabic-letter-connector', require: 'arabic-letter-connector/logic'
 gem 'aws-sdk-s3', require: false
@@ -23,7 +23,6 @@ gem 'image_processing'
 gem 'jwt'
 gem 'lograge'
 gem 'mysql2', require: false
-gem 'net-smtp', '0.4.0'
 gem 'oj'
 gem 'pagy'
 gem 'pg', require: false
@@ -40,7 +39,7 @@ gem 'ruby-vips'
 gem 'rubyXL'
 gem 'shakapacker'
 gem 'sidekiq'
-gem 'sqlite3', require: false, force_ruby_platform: true
+gem 'sqlite3', require: false
 gem 'strip_attributes'
 gem 'turbo-rails'
 gem 'twitter_cldr', require: false

Gemfile.lock

@@ -1,105 +1,102 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (7.1.3.4)
-      actionpack (= 7.1.3.4)
-      activesupport (= 7.1.3.4)
+    actioncable (8.0.1)
+      actionpack (= 8.0.1)
+      activesupport (= 8.0.1)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
       zeitwerk (~> 2.6)
-    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.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
+    actionmailbox (8.0.1)
+      actionpack (= 8.0.1)
+      activejob (= 8.0.1)
+      activerecord (= 8.0.1)
+      activestorage (= 8.0.1)
+      activesupport (= 8.0.1)
+      mail (>= 2.8.0)
+    actionmailer (8.0.1)
+      actionpack (= 8.0.1)
+      actionview (= 8.0.1)
+      activejob (= 8.0.1)
+      activesupport (= 8.0.1)
+      mail (>= 2.8.0)
       rails-dom-testing (~> 2.2)
-    actionpack (7.1.3.4)
-      actionview (= 7.1.3.4)
-      activesupport (= 7.1.3.4)
+    actionpack (8.0.1)
+      actionview (= 8.0.1)
+      activesupport (= 8.0.1)
       nokogiri (>= 1.8.5)
-      racc
       rack (>= 2.2.4)
       rack-session (>= 1.0.1)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.2)
       rails-html-sanitizer (~> 1.6)
-    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)
+      useragent (~> 0.16)
+    actiontext (8.0.1)
+      actionpack (= 8.0.1)
+      activerecord (= 8.0.1)
+      activestorage (= 8.0.1)
+      activesupport (= 8.0.1)
       globalid (>= 0.6.0)
       nokogiri (>= 1.8.5)
-    actionview (7.1.3.4)
-      activesupport (= 7.1.3.4)
+    actionview (8.0.1)
+      activesupport (= 8.0.1)
       builder (~> 3.1)
       erubi (~> 1.11)
       rails-dom-testing (~> 2.2)
       rails-html-sanitizer (~> 1.6)
-    activejob (7.1.3.4)
-      activesupport (= 7.1.3.4)
+    activejob (8.0.1)
+      activesupport (= 8.0.1)
       globalid (>= 0.3.6)
-    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)
+    activemodel (8.0.1)
+      activesupport (= 8.0.1)
+    activerecord (8.0.1)
+      activemodel (= 8.0.1)
+      activesupport (= 8.0.1)
       timeout (>= 0.4.0)
-    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)
+    activestorage (8.0.1)
+      actionpack (= 8.0.1)
+      activejob (= 8.0.1)
+      activerecord (= 8.0.1)
+      activesupport (= 8.0.1)
       marcel (~> 1.0)
-    activesupport (7.1.3.4)
+    activesupport (8.0.1)
       base64
+      benchmark (>= 0.3)
       bigdecimal
-      concurrent-ruby (~> 1.0, >= 1.0.2)
+      concurrent-ruby (~> 1.0, >= 1.3.1)
       connection_pool (>= 2.2.5)
       drb
       i18n (>= 1.6, < 2)
+      logger (>= 1.4.2)
       minitest (>= 5.1)
-      mutex_m
-      tzinfo (~> 2.0)
-    addressable (2.8.6)
-      public_suffix (>= 2.0.2, < 6.0)
-    annotate (3.2.0)
-      activerecord (>= 3.2, < 8.0)
-      rake (>= 10.4, < 14.0)
+      securerandom (>= 0.3)
+      tzinfo (~> 2.0, >= 2.0.5)
+      uri (>= 0.13.1)
+    addressable (2.8.7)
+      public_suffix (>= 2.0.2, < 7.0)
+    annotate (2.6.5)
+      activerecord (>= 2.3.0)
+      rake (>= 0.8.7)
     arabic-letter-connector (0.1.1)
     ast (2.4.2)
     aws-eventstream (1.3.0)
-    aws-partitions (1.913.0)
-    aws-sdk-core (3.191.6)
+    aws-partitions (1.1027.0)
+    aws-sdk-core (3.214.0)
       aws-eventstream (~> 1, >= 1.3.0)
-      aws-partitions (~> 1, >= 1.651.0)
-      aws-sigv4 (~> 1.8)
+      aws-partitions (~> 1, >= 1.992.0)
+      aws-sigv4 (~> 1.9)
       jmespath (~> 1, >= 1.6.1)
-    aws-sdk-kms (1.79.0)
-      aws-sdk-core (~> 3, >= 3.191.0)
-      aws-sigv4 (~> 1.1)
-    aws-sdk-s3 (1.146.1)
-      aws-sdk-core (~> 3, >= 3.191.0)
+    aws-sdk-kms (1.96.0)
+      aws-sdk-core (~> 3, >= 3.210.0)
+      aws-sigv4 (~> 1.5)
+    aws-sdk-s3 (1.176.1)
+      aws-sdk-core (~> 3, >= 3.210.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-sigv4 (~> 1.5)
+    aws-sdk-secretsmanager (1.110.0)
+      aws-sdk-core (~> 3, >= 3.210.0)
+      aws-sigv4 (~> 1.5)
+    aws-sigv4 (1.10.1)
       aws-eventstream (~> 1, >= 1.0.2)
     azure-storage-blob (2.0.3)
       azure-storage-common (~> 2.0)
@@ -111,6 +108,7 @@ GEM
       nokogiri (~> 1, >= 1.10.8)
     base64 (0.2.0)
     bcrypt (3.1.20)
+    benchmark (0.4.0)
     better_html (2.1.1)
       actionview (>= 6.0)
       activesupport (>= 6.0)
@@ -120,14 +118,14 @@ GEM
       smart_properties
     bigdecimal (3.1.8)
     bindex (0.8.1)
-    bootsnap (1.18.3)
+    bootsnap (1.18.4)
       msgpack (~> 1.2)
     builder (3.3.0)
-    bullet (7.1.6)
+    bullet (8.0.0)
       activesupport (>= 3.0.0)
       uniform_notifier (~> 1.11)
     camertron-eprun (1.1.1)
-    cancancan (3.5.0)
+    cancancan (3.6.1)
     capybara (3.40.0)
       addressable
       matrix
@@ -137,7 +135,8 @@ GEM
       rack-test (>= 0.6.3)
       regexp_parser (>= 1.5, < 3.0)
       xpath (~> 3.2)
-    childprocess (5.0.0)
+    childprocess (5.1.0)
+      logger (~> 1.5)
     chunky_png (1.4.0)
     cldr-plurals-runtime-rb (1.1.0)
     cmdparse (3.0.7)
@@ -148,14 +147,14 @@ GEM
       bigdecimal
       rexml
     crass (1.0.6)
-    css_parser (1.17.1)
+    css_parser (1.21.0)
       addressable
-    csv (3.3.0)
-    cuprite (0.15)
+    csv (3.3.2)
+    cuprite (0.15.1)
       capybara (~> 3.0)
-      ferrum (~> 0.14.0)
-    date (3.3.4)
-    debug (1.9.2)
+      ferrum (~> 0.15.0)
+    date (3.4.1)
+    debug (1.10.0)
       irb (~> 1.10)
       reline (>= 0.3.8)
     declarative (0.0.20)
@@ -165,34 +164,34 @@ GEM
       railties (>= 4.1.0)
       responders
       warden (~> 1.2.3)
-    devise-two-factor (6.0.0)
-      activesupport (~> 7.0)
+    devise-two-factor (6.1.0)
+      activesupport (>= 7.0, < 8.1)
       devise (~> 4.0)
-      railties (~> 7.0)
+      railties (>= 7.0, < 8.1)
       rotp (~> 6.0)
     diff-lcs (1.5.1)
     digest-crc (0.6.5)
       rake (>= 12.0.0, < 14.0.0)
-    docile (1.4.0)
-    dotenv (3.1.0)
+    docile (1.4.1)
+    dotenv (3.1.7)
     drb (2.2.1)
     email_typo (0.2.3)
-    erb_lint (0.5.0)
+    erb_lint (0.7.0)
       activesupport
       better_html (>= 2.0.1)
       parser (>= 2.7.1.4)
       rainbow
-      rubocop
+      rubocop (>= 1)
       smart_properties
-    erubi (1.13.0)
-    factory_bot (6.4.6)
+    erubi (1.13.1)
+    factory_bot (6.5.0)
       activesupport (>= 5.0.0)
-    factory_bot_rails (6.4.3)
-      factory_bot (~> 6.4)
+    factory_bot_rails (6.4.4)
+      factory_bot (~> 6.5)
       railties (>= 5.0.0)
-    faker (3.3.1)
+    faker (3.5.1)
       i18n (>= 1.8.11, < 2)
-    faraday (1.10.3)
+    faraday (1.10.4)
       faraday-em_http (~> 1.0)
       faraday-em_synchrony (~> 1.0)
       faraday-excon (~> 1.1)
@@ -210,60 +209,67 @@ GEM
     faraday-follow_redirects (0.3.0)
       faraday (>= 1, < 3)
     faraday-httpclient (1.0.1)
-    faraday-multipart (1.0.4)
-      multipart-post (~> 2)
-    faraday-net_http (1.0.1)
+    faraday-multipart (1.1.0)
+      multipart-post (~> 2.0)
+    faraday-net_http (1.0.2)
     faraday-net_http_persistent (1.2.0)
     faraday-patron (1.0.0)
     faraday-rack (1.0.0)
     faraday-retry (1.0.3)
-    faraday_middleware (1.2.0)
+    faraday_middleware (1.2.1)
       faraday (~> 1.0)
-    ferrum (0.14)
+    ferrum (0.15)
       addressable (~> 2.5)
       concurrent-ruby (~> 1.1)
       webrick (~> 1.7)
-      websocket-driver (>= 0.6, < 0.8)
-    ffi (1.16.3)
+      websocket-driver (~> 0.7)
+    ffi (1.17.1)
+    ffi (1.17.1-aarch64-linux-gnu)
+    ffi (1.17.1-aarch64-linux-musl)
+    ffi (1.17.1-arm64-darwin)
+    ffi (1.17.1-x86_64-linux-gnu)
+    ffi (1.17.1-x86_64-linux-musl)
     geom2d (0.4.1)
     globalid (1.2.1)
       activesupport (>= 6.1)
-    google-apis-core (0.14.1)
+    google-apis-core (0.15.1)
       addressable (~> 2.5, >= 2.5.1)
       googleauth (~> 1.9)
-      httpclient (>= 2.8.1, < 3.a)
+      httpclient (>= 2.8.3, < 3.a)
       mini_mime (~> 1.0)
+      mutex_m
       representable (~> 3.0)
       retriable (>= 2.0, < 4.a)
-      rexml
-    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-apis-iamcredentials_v1 (0.22.0)
+      google-apis-core (>= 0.15.0, < 2.a)
+    google-apis-storage_v1 (0.49.0)
+      google-apis-core (>= 0.15.0, < 2.a)
+    google-cloud-core (1.7.1)
       google-cloud-env (>= 1.0, < 3.a)
       google-cloud-errors (~> 1.0)
-    google-cloud-env (2.1.1)
+    google-cloud-env (2.2.1)
       faraday (>= 1.0, < 3.a)
     google-cloud-errors (1.4.0)
-    google-cloud-storage (1.49.0)
+    google-cloud-storage (1.54.0)
       addressable (~> 2.8)
       digest-crc (~> 0.4)
       google-apis-core (~> 0.13)
       google-apis-iamcredentials_v1 (~> 0.18)
-      google-apis-storage_v1 (~> 0.33)
+      google-apis-storage_v1 (~> 0.38)
       google-cloud-core (~> 1.6)
       googleauth (~> 1.9)
       mini_mime (~> 1.0)
-    googleauth (1.11.0)
+    google-logging-utils (0.1.0)
+    googleauth (1.12.2)
       faraday (>= 1.0, < 3.a)
-      google-cloud-env (~> 2.1)
+      google-cloud-env (~> 2.2)
+      google-logging-utils (~> 0.1)
       jwt (>= 1.4, < 3.0)
       multi_json (~> 1.11)
       os (>= 0.9, < 2.0)
       signet (>= 0.16, < 2.a)
-    hashdiff (1.1.0)
-    hexapdf (0.42.0)
+    hashdiff (1.1.2)
+    hexapdf (1.0.3)
       cmdparse (~> 3.0, >= 3.0.3)
       geom2d (~> 0.4, >= 0.4.1)
       openssl (>= 2.2.1)
@@ -271,34 +277,35 @@ GEM
     httpclient (2.8.3)
     i18n (1.14.6)
       concurrent-ruby (~> 1.0)
-    image_processing (1.12.2)
+    image_processing (1.13.0)
       mini_magick (>= 4.9.5, < 5)
       ruby-vips (>= 2.0.17, < 3)
-    io-console (0.7.2)
-    irb (1.14.0)
+    io-console (0.8.0)
+    irb (1.14.3)
       rdoc (>= 4.0.0)
       reline (>= 0.4.2)
     jmespath (1.6.2)
-    json (2.7.2)
-    jwt (2.8.1)
+    json (2.9.1)
+    jwt (2.9.3)
       base64
     language_server-protocol (3.17.0.3)
-    launchy (3.0.0)
+    launchy (3.0.1)
       addressable (~> 2.8)
       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)
-      railties (>= 5.2)
+    letter_opener_web (3.0.0)
+      actionmailer (>= 6.1)
+      letter_opener (~> 1.9)
+      railties (>= 6.1)
       rexml
+    logger (1.6.4)
     lograge (0.14.0)
       actionpack (>= 4)
       activesupport (>= 4)
       railties (>= 4)
       request_store (~> 1.0)
-    loofah (2.22.0)
+    loofah (2.23.1)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
     mail (2.8.1)
@@ -309,49 +316,57 @@ GEM
     marcel (1.0.4)
     matrix (0.4.2)
     method_source (1.1.0)
-    mini_magick (4.12.0)
+    mini_magick (4.13.2)
     mini_mime (1.1.5)
-    mini_portile2 (2.8.7)
-    minitest (5.25.1)
-    msgpack (1.7.2)
+    mini_portile2 (2.8.8)
+    minitest (5.25.4)
+    msgpack (1.7.5)
     multi_json (1.15.0)
-    multipart-post (2.4.0)
-    mutex_m (0.2.0)
+    multipart-post (2.4.1)
+    mutex_m (0.3.0)
     mysql2 (0.5.6)
-    net-http-persistent (4.0.2)
+    net-http-persistent (4.0.5)
       connection_pool (~> 2.2)
-    net-imap (0.4.14)
+    net-imap (0.5.3)
       date
       net-protocol
     net-pop (0.1.2)
       net-protocol
     net-protocol (0.2.2)
       timeout
-    net-smtp (0.4.0)
+    net-smtp (0.5.0)
       net-protocol
-    nio4r (2.7.3)
-    nokogiri (1.16.7)
+    nio4r (2.7.4)
+    nokogiri (1.18.2)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.16.7-aarch64-linux)
+    nokogiri (1.18.2-aarch64-linux-gnu)
       racc (~> 1.4)
-    nokogiri (1.16.7-x86_64-linux)
+    nokogiri (1.18.2-aarch64-linux-musl)
       racc (~> 1.4)
-    oj (3.16.3)
+    nokogiri (1.18.2-arm64-darwin)
+      racc (~> 1.4)
+    nokogiri (1.18.2-x86_64-linux-gnu)
+      racc (~> 1.4)
+    nokogiri (1.18.2-x86_64-linux-musl)
+      racc (~> 1.4)
+    oj (3.16.8)
       bigdecimal (>= 3.0)
-    openssl (3.2.0)
+      ostruct (>= 0.2)
+    openssl (3.3.0)
     orm_adapter (0.5.0)
     os (1.1.4)
+    ostruct (0.6.1)
     package_json (0.1.0)
-    pagy (8.1.2)
-    parallel (1.25.1)
-    parser (3.3.4.0)
+    pagy (9.3.3)
+    parallel (1.26.3)
+    parser (3.3.6.0)
       ast (~> 2.4.1)
       racc
-    pg (1.5.6)
-    premailer (1.23.0)
+    pg (1.5.9)
+    premailer (1.27.0)
       addressable
-      css_parser (>= 1.12.0)
+      css_parser (>= 1.19.0)
       htmlentities (>= 4.0.0)
     premailer-rails (1.12.0)
       actionmailer (>= 3)
@@ -359,149 +374,149 @@ GEM
       premailer (~> 1.7, >= 1.7.9)
     pretender (0.5.0)
       actionpack (>= 6.1)
-    pry (0.14.2)
+    pry (0.15.0)
       coderay (~> 1.1)
       method_source (~> 1.0)
-    pry-rails (0.3.9)
-      pry (>= 0.10.4)
-    psych (5.1.2)
+    pry-rails (0.3.11)
+      pry (>= 0.13.0)
+    psych (5.2.2)
+      date
       stringio
-    public_suffix (5.0.5)
-    puma (6.4.3)
+    public_suffix (6.0.1)
+    puma (6.5.0)
       nio4r (~> 2.0)
     racc (1.8.1)
-    rack (3.1.7)
+    rack (3.1.8)
     rack-proxy (0.7.7)
       rack
     rack-session (2.0.0)
       rack (>= 3.0.0)
     rack-test (2.1.0)
       rack (>= 1.3)
-    rackup (2.1.0)
+    rackup (2.2.1)
       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)
+    rails (8.0.1)
+      actioncable (= 8.0.1)
+      actionmailbox (= 8.0.1)
+      actionmailer (= 8.0.1)
+      actionpack (= 8.0.1)
+      actiontext (= 8.0.1)
+      actionview (= 8.0.1)
+      activejob (= 8.0.1)
+      activemodel (= 8.0.1)
+      activerecord (= 8.0.1)
+      activestorage (= 8.0.1)
+      activesupport (= 8.0.1)
       bundler (>= 1.15.0)
-      railties (= 7.1.3.4)
+      railties (= 8.0.1)
     rails-dom-testing (2.2.0)
       activesupport (>= 5.0.0)
       minitest
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.6.0)
+    rails-html-sanitizer (1.6.2)
       loofah (~> 2.21)
-      nokogiri (~> 1.14)
-    rails-i18n (7.0.9)
+      nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
+    rails-i18n (8.0.1)
       i18n (>= 0.7, < 2)
-      railties (>= 6.0.0, < 8)
+      railties (>= 8.0.0, < 9)
     rails_autolink (1.1.8)
       actionview (> 3.1)
       activesupport (> 3.1)
       railties (> 3.1)
-    railties (7.1.3.4)
-      actionpack (= 7.1.3.4)
-      activesupport (= 7.1.3.4)
-      irb
+    railties (8.0.1)
+      actionpack (= 8.0.1)
+      activesupport (= 8.0.1)
+      irb (~> 1.13)
       rackup (>= 1.0.0)
       rake (>= 12.2)
       thor (~> 1.0, >= 1.2.2)
       zeitwerk (~> 2.6)
     rainbow (3.1.1)
     rake (13.2.1)
-    rdoc (6.7.0)
+    rdoc (6.10.0)
       psych (>= 4.0.0)
-    redis-client (0.22.2)
+    redis-client (0.23.0)
       connection_pool
-    regexp_parser (2.9.2)
-    reline (0.5.10)
+    regexp_parser (2.9.3)
+    reline (0.6.0)
       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.6.0)
+    request_store (1.7.0)
       rack (>= 1.4)
     responders (3.1.1)
       actionpack (>= 5.2)
       railties (>= 5.2)
     retriable (3.1.2)
-    rexml (3.3.6)
-      strscan
+    rexml (3.4.0)
     rotp (6.3.0)
     rqrcode (2.2.0)
       chunky_png (~> 1.0)
       rqrcode_core (~> 1.0)
     rqrcode_core (1.2.0)
-    rspec-core (3.13.0)
+    rspec-core (3.13.2)
       rspec-support (~> 3.13.0)
-    rspec-expectations (3.13.0)
+    rspec-expectations (3.13.3)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.13.0)
-    rspec-mocks (3.13.0)
+    rspec-mocks (3.13.2)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.13.0)
-    rspec-rails (6.1.2)
-      actionpack (>= 6.1)
-      activesupport (>= 6.1)
-      railties (>= 6.1)
+    rspec-rails (7.1.0)
+      actionpack (>= 7.0)
+      activesupport (>= 7.0)
+      railties (>= 7.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)
+    rspec-support (3.13.2)
+    rubocop (1.69.2)
       json (~> 2.3)
       language_server-protocol (>= 3.17.0)
       parallel (~> 1.10)
       parser (>= 3.3.0.2)
       rainbow (>= 2.2.2, < 4.0)
-      regexp_parser (>= 2.4, < 3.0)
-      rexml (>= 3.2.5, < 4.0)
-      rubocop-ast (>= 1.31.1, < 2.0)
+      regexp_parser (>= 2.9.3, < 3.0)
+      rubocop-ast (>= 1.36.2, < 2.0)
       ruby-progressbar (~> 1.7)
-      unicode-display_width (>= 2.4.0, < 3.0)
-    rubocop-ast (1.31.3)
+      unicode-display_width (>= 2.4.0, < 4.0)
+    rubocop-ast (1.37.0)
       parser (>= 3.3.1.0)
-    rubocop-performance (1.21.0)
+    rubocop-performance (1.23.0)
       rubocop (>= 1.48.1, < 2.0)
       rubocop-ast (>= 1.31.1, < 2.0)
-    rubocop-rails (2.24.1)
+    rubocop-rails (2.27.0)
       activesupport (>= 4.2.0)
       rack (>= 1.1)
-      rubocop (>= 1.33.0, < 2.0)
+      rubocop (>= 1.52.0, < 2.0)
       rubocop-ast (>= 1.31.1, < 2.0)
-    rubocop-rspec (3.0.3)
+    rubocop-rspec (3.3.0)
       rubocop (~> 1.61)
     ruby-progressbar (1.13.0)
-    ruby-vips (2.2.1)
+    ruby-vips (2.2.2)
       ffi (~> 1.12)
+      logger
     ruby2_keywords (0.0.5)
-    rubyXL (3.4.27)
+    rubyXL (3.4.33)
       nokogiri (>= 1.10.8)
       rubyzip (>= 1.3.0)
     rubyzip (2.3.2)
-    semantic_range (3.0.0)
-    shakapacker (8.0.0)
+    securerandom (0.4.1)
+    semantic_range (3.1.0)
+    shakapacker (8.0.2)
       activesupport (>= 5.2)
       package_json
       rack-proxy (>= 0.6.1)
       railties (>= 5.2)
       semantic_range (>= 2.3.0)
-    sidekiq (7.2.4)
-      concurrent-ruby (< 2)
+    sidekiq (7.3.7)
       connection_pool (>= 2.3.0)
+      logger
       rack (>= 2.2.4)
-      redis-client (>= 0.19.0)
+      redis-client (>= 0.22.2)
     signet (0.19.0)
       addressable (~> 2.8)
       faraday (>= 0.17.5, < 3.a)
@@ -511,33 +526,40 @@ GEM
       docile (~> 1.1)
       simplecov-html (~> 0.11)
       simplecov_json_formatter (~> 0.1)
-    simplecov-html (0.12.3)
+    simplecov-html (0.13.1)
     simplecov_json_formatter (0.1.4)
     smart_properties (1.17.0)
-    sqlite3 (1.7.3)
+    sqlite3 (2.5.0)
       mini_portile2 (~> 2.8.0)
-    stringio (3.1.1)
-    strip_attributes (1.13.0)
-      activemodel (>= 3.0, < 8.0)
-    strscan (3.1.0)
+    sqlite3 (2.5.0-aarch64-linux-gnu)
+    sqlite3 (2.5.0-aarch64-linux-musl)
+    sqlite3 (2.5.0-arm64-darwin)
+    sqlite3 (2.5.0-x86_64-linux-gnu)
+    sqlite3 (2.5.0-x86_64-linux-musl)
+    stringio (3.1.2)
+    strip_attributes (1.14.1)
+      activemodel (>= 3.0, < 9.0)
     thor (1.3.2)
-    timeout (0.4.1)
+    timeout (0.4.3)
     trailblazer-option (0.1.2)
-    turbo-rails (2.0.5)
+    turbo-rails (2.0.11)
       actionpack (>= 6.0.0)
-      activejob (>= 6.0.0)
       railties (>= 6.0.0)
-    twitter_cldr (6.12.0)
+    twitter_cldr (6.12.1)
       camertron-eprun
       cldr-plurals-runtime-rb (~> 1.1)
       tzinfo
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
-    tzinfo-data (1.2024.1)
+    tzinfo-data (1.2024.2)
       tzinfo (>= 1.0.0)
     uber (0.1.0)
-    unicode-display_width (2.5.0)
+    unicode-display_width (3.1.2)
+      unicode-emoji (~> 4.0, >= 4.0.4)
+    unicode-emoji (4.0.4)
     uniform_notifier (1.16.0)
+    uri (1.0.2)
+    useragent (0.16.11)
     warden (1.2.9)
       rack (>= 2.0.9)
     web-console (4.2.1)
@@ -545,22 +567,25 @@ GEM
       activemodel (>= 6.0.0)
       bindex (>= 0.4.0)
       railties (>= 6.0.0)
-    webmock (3.23.0)
+    webmock (3.24.0)
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webrick (1.8.1)
+    webrick (1.9.1)
     websocket-driver (0.7.6)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
     xpath (3.2.0)
       nokogiri (~> 1.8)
-    zeitwerk (2.6.18)
+    zeitwerk (2.7.1)
 
 PLATFORMS
   aarch64-linux
+  aarch64-linux-musl
+  arm64-darwin
   ruby
   x86_64-linux
+  x86_64-linux-musl
 
 DEPENDENCIES
   annotate
@@ -592,7 +617,6 @@ DEPENDENCIES
   letter_opener_web
   lograge
   mysql2
-  net-smtp (= 0.4.0)
   oj
   pagy
   pg
@@ -625,7 +649,7 @@ DEPENDENCIES
   webmock
 
 RUBY VERSION
-   ruby 3.3.4p94
+   ruby 3.4.1p0
 
 BUNDLED WITH
    2.5.3

README.md

@@ -1,6 +1,6 @@
 <h1 align="center" style="border-bottom: none">
   <div>
-    <a href="https://www.docuseal.co">
+    <a href="https://www.docuseal.com">
       <img  alt="DocuSeal" src="https://github.com/docusealco/docuseal/assets/5418788/c12cd051-81cd-4402-bc3a-92f2cfdc1b06" width="80" />
       <br>
     </a>
@@ -25,12 +25,12 @@
 DocuSeal is an open source platform that provides secure and efficient digital document signing and processing. Create PDF forms to have them filled and signed online on any device with an easy-to-use, mobile-optimized web tool.
 </p>
 <h2 align="center">
-  <a href="https://demo.docuseal.co">✨ Live Demo</a>
+  <a href="https://demo.docuseal.tech">✨ Live Demo</a>
   <span>|</span>
-  <a href="https://docuseal.co/sign_up">☁️ Try in Cloud</a>
+  <a href="https://docuseal.com/sign_up">☁️ Try in Cloud</a>
 </h2>
 
-[![Demo](https://github.com/docusealco/docuseal/assets/5418788/d8703ea3-361a-423f-8bfe-eff1bd9dbe14)](https://demo.docuseal.co)
+[![Demo](https://github.com/docusealco/docuseal/assets/5418788/d8703ea3-361a-423f-8bfe-eff1bd9dbe14)](https://demo.docuseal.tech)
 
 ## Features
 - PDF form fields builder (WYSIWYG)
@@ -42,7 +42,7 @@ DocuSeal is an open source platform that provides secure and efficient digital d
 - PDF signature verification
 - Users management
 - Mobile-optimized
-- Signing available in 13 languages
+- 6 UI languages with signing available in 13 languages
 - API and Webhooks for integrations
 - Easy to deploy in minutes
 
@@ -54,11 +54,11 @@ DocuSeal is an open source platform that provides secure and efficient digital d
 - Conditional fields and formulas
 - Bulk send with CSV, XLSX spreadsheet import
 - SSO / SAML
-- Template creation with HTML API ([Guide](https://www.docuseal.co/guides/create-pdf-document-fillable-form-with-html-api))
-- Template creation with PDF or DOCX and field tags API ([Guide](https://www.docuseal.co/guides/use-embedded-text-field-tags-in-the-pdf-to-create-a-fillable-form))
-- Embedded signing form ([React](https://github.com/docusealco/docuseal-react), [Vue](https://github.com/docusealco/docuseal-vue), [Angular](https://github.com/docusealco/docuseal-angular) or [JavaScript](https://www.docuseal.co/docs/embedded))
-- Embedded document form builder ([React](https://github.com/docusealco/docuseal-react), [Vue](https://github.com/docusealco/docuseal-vue), [Angular](https://github.com/docusealco/docuseal-angular) or [JavaScript](https://www.docuseal.co/docs/embedded))
-- [Learn more](https://www.docuseal.co/pricing)
+- Template creation with HTML API ([Guide](https://www.docuseal.com/guides/create-pdf-document-fillable-form-with-html-api))
+- Template creation with PDF or DOCX and field tags API ([Guide](https://www.docuseal.com/guides/use-embedded-text-field-tags-in-the-pdf-to-create-a-fillable-form))
+- Embedded signing form ([React](https://github.com/docusealco/docuseal-react), [Vue](https://github.com/docusealco/docuseal-vue), [Angular](https://github.com/docusealco/docuseal-angular) or [JavaScript](https://www.docuseal.com/docs/embedded))
+- Embedded document form builder ([React](https://github.com/docusealco/docuseal-react), [Vue](https://github.com/docusealco/docuseal-vue), [Angular](https://github.com/docusealco/docuseal-angular) or [JavaScript](https://www.docuseal.com/docs/embedded))
+- [Learn more](https://www.docuseal.com/pricing)
 
 ## Deploy
 
@@ -93,7 +93,7 @@ sudo HOST=your-domain-name.com docker compose up
 
 At DocuSeal we have expertise and technologies to make documents creation, filling, signing and processing seamlessly integrated with your product. We specialize in working with various industries, including **Banking, Healthcare, Transport, Real Estate, eCommerce, KYC, CRM, and other software products** that require bulk document signing. By leveraging DocuSeal, we can assist in reducing the overall cost of developing and processing electronic documents while ensuring security and compliance with local electronic document laws.
 
-[Book a Meeting](https://www.docuseal.co/contact)
+[Book a Meeting](https://www.docuseal.com/contact)
 
 ## License
 
@@ -102,6 +102,6 @@ Unless otherwise noted, all files © 2023 DocuSeal LLC.
 
 ## Tools
 
-- [Signature Maker](https://www.docuseal.co/online-signature)
-- [Sign Document Online](https://www.docuseal.co/sign-documents-online)
-- [Fill PDF Online](https://www.docuseal.co/fill-pdf)
+- [Signature Maker](https://www.docuseal.com/online-signature)
+- [Sign Document Online](https://www.docuseal.com/sign-documents-online)
+- [Fill PDF Online](https://www.docuseal.com/fill-pdf)

SECURITY.md

@@ -1,6 +1,6 @@
 # Reporting a Vulnerability
 
-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.
+If you come across any security concern or vulnarability, please report the information via email to security@docuseal.com 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.**
 

app/controllers/account_configs_controller.rb

@@ -8,6 +8,7 @@ class AccountConfigsController < ApplicationController
     AccountConfig::ALLOW_TYPED_SIGNATURE,
     AccountConfig::FORCE_MFA,
     AccountConfig::ALLOW_TO_RESUBMIT,
+    AccountConfig::ALLOW_TO_DECLINE_KEY,
     AccountConfig::FORM_PREFILL_SIGNATURE_KEY,
     AccountConfig::ESIGNING_PREFERENCE_KEY,
     AccountConfig::FORM_WITH_CONFETTI_KEY,
@@ -16,7 +17,8 @@ class AccountConfigsController < ApplicationController
     AccountConfig::FLATTEN_RESULT_PDF_KEY,
     AccountConfig::WITH_SIGNATURE_ID,
     AccountConfig::COMBINE_PDF_RESULT_KEY,
-    AccountConfig::REQUIRE_SIGNING_REASON_KEY
+    AccountConfig::REQUIRE_SIGNING_REASON_KEY,
+    AccountConfig::DOCUMENT_FILENAME_FORMAT_KEY
   ].freeze
 
   InvalidKey = Class.new(StandardError)

app/controllers/accounts_controller.rb

@@ -4,11 +4,11 @@ class AccountsController < ApplicationController
   LOCALE_OPTIONS = {
     'en-US' => 'English (United States)',
     'en-GB' => 'English (United Kingdom)',
-    'fr-FR' => 'French (France)',
-    'es-ES' => 'Spanish (Spain)',
-    'pt-PT' => 'Portuguese (Portugal)',
-    'de-DE' => 'German (Germany)',
-    'it-IT' => 'Italian (Italy)'
+    'fr-FR' => 'Français',
+    'es-ES' => 'Español',
+    'pt-PT' => 'Português',
+    'de-DE' => 'Deutsch',
+    'it-IT' => 'Italiano'
   }.freeze
 
   before_action :load_account
@@ -19,21 +19,25 @@ class AccountsController < ApplicationController
   def update
     current_account.update!(account_params)
 
-    @encrypted_config = EncryptedConfig.find_or_initialize_by(account: current_account,
-                                                              key: EncryptedConfig::APP_URL_KEY)
-    @encrypted_config.assign_attributes(app_url_params)
+    unless Docuseal.multitenant?
+      @encrypted_config = EncryptedConfig.find_or_initialize_by(account: current_account,
+                                                                key: EncryptedConfig::APP_URL_KEY)
+      @encrypted_config.assign_attributes(app_url_params)
 
-    unless URI.parse(@encrypted_config.value.to_s).class.in?([URI::HTTP, URI::HTTPS])
-      @encrypted_config.errors.add(:value, I18n.t('should_be_a_valid_url'))
+      unless URI.parse(@encrypted_config.value.to_s).class.in?([URI::HTTP, URI::HTTPS])
+        @encrypted_config.errors.add(:value, I18n.t('should_be_a_valid_url'))
 
-      return render :show, status: :unprocessable_entity
+        return render :show, status: :unprocessable_entity
+      end
+
+      @encrypted_config.save!
+
+      Docuseal.refresh_default_url_options!
     end
 
-    @encrypted_config.save!
-
-    Docuseal.refresh_default_url_options!
-
-    redirect_to settings_account_path, notice: I18n.t('account_information_has_been_updated')
+    with_locale do
+      redirect_to settings_account_path, notice: I18n.t('account_information_has_been_updated')
+    end
   rescue ActiveRecord::RecordInvalid
     render :show, status: :unprocessable_entity
   end
@@ -46,7 +50,7 @@ class AccountsController < ApplicationController
     # rubocop:disable Layout/LineLength
     render turbo_stream: turbo_stream.replace(
       :account_delete_button,
-      html: helpers.tag.p(I18n.t('your_account_removal_request_will_be_processed_within_2_weeks_please_contact_us_if_you_want_to_keep_your_account'))
+      html: helpers.tag.p(I18n.t('your_account_removal_request_will_be_processed_within_2_months_please_contact_us_if_you_want_to_keep_your_account'))
     )
     # rubocop:enable Layout/LineLength
   end

app/controllers/api/active_storage_blobs_proxy_controller.rb

@@ -38,12 +38,13 @@ module Api
     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
+      attachment = blob.attachments.take
+
+      is_authorized = attachment.name.in?(%w[logo preview_images]) ||
+                      (current_user && attachment.record.account.id == current_user.account_id) ||
+                      (current_user && !Docuseal.multitenant? && current_user.role == 'superadmin') ||
+                      !attachment.record.account.account_configs
+                                 .find_or_initialize_by(key: AccountConfig::DOWNLOAD_LINKS_AUTH_KEY).value
 
       return if is_authorized
 

app/controllers/api/api_base_controller.rb

@@ -25,9 +25,9 @@ module Api
       render json: { error: 'Too many requests' }, status: :too_many_requests
     end
 
-    if Rails.env.production?
+    unless Rails.env.development?
       rescue_from CanCan::AccessDenied do |e|
-        render json: { error: e.message }, status: :forbidden
+        render json: { error: access_denied_error_message(e) }, status: :forbidden
       end
 
       rescue_from JSON::ParserError do |e|
@@ -39,6 +39,33 @@ module Api
 
     private
 
+    def access_denied_error_message(error)
+      return 'Not authorized' if request.headers['X-Auth-Token'].blank?
+      return 'Not authorized' unless error.subject.is_a?(ActiveRecord::Base)
+      return 'Not authorized' unless error.subject.respond_to?(:account_id)
+
+      linked_account_record_exists =
+        if current_user.account.testing?
+          current_user.account.linked_account_accounts.where(account_type: 'testing')
+                      .exists?(account_id: error.subject.account_id)
+        else
+          current_user.account.testing_accounts.exists?(id: error.subject.account_id)
+        end
+
+      return 'Not authorized' unless linked_account_record_exists
+
+      object_name = error.subject.model_name.human
+      id = error.subject.id
+
+      if current_user.account.testing?
+        "#{object_name} #{id} not found using testing API key; Use production API key to " \
+          "access production #{object_name.downcase.pluralize}."
+      else
+        "#{object_name} #{id} not found using production API key; Use testing API key to " \
+          "access testing #{object_name.downcase.pluralize}."
+      end
+    end
+
     def paginate(relation, field: :id)
       result = relation.order(field => :desc)
                        .limit([params.fetch(:limit, DEFAULT_LIMIT).to_i, MAX_LIMIT].min)

app/controllers/api/submission_documents_controller.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Api
+  class SubmissionDocumentsController < ApiBaseController
+    load_and_authorize_resource :submission
+
+    def index
+      documents =
+        if @submission.submitters.all?(&:completed_at?)
+          last_submitter = @submission.submitters.max_by(&:completed_at)
+
+          if last_submitter.documents_attachments.blank?
+            last_submitter.documents_attachments = Submissions::EnsureResultGenerated.call(submitter)
+          end
+
+          last_submitter.documents_attachments
+        else
+          values_hash = Submissions::GeneratePreviewAttachments.build_values_hash(@submission)
+
+          if @submission.preview_documents.present? &&
+             @submission.preview_documents.all? { |s| s.metadata['values_hash'] == values_hash }
+            @submission.preview_documents
+          else
+            ApplicationRecord.no_touching do
+              @submission.preview_documents.each(&:destroy)
+            end
+
+            Submissions::GeneratePreviewAttachments.call(@submission, values_hash:)
+          end
+        end
+
+      ActiveRecord::Associations::Preloader.new(
+        records: documents,
+        associations: [:blob]
+      ).call
+
+      render json: {
+        id: @submission.id,
+        documents: documents.map do |attachment|
+          { name: attachment.filename.base, url: ActiveStorage::Blob.proxy_url(attachment.blob) }
+        end
+      }
+    end
+  end
+end

app/controllers/api/submissions_controller.rb

@@ -17,6 +17,8 @@ module Api
         submissions = submissions.joins(template: :folder).where(folder: { name: params[:template_folder] })
       end
 
+      submissions = Submissions::Filter.call(submissions, current_user, params)
+
       submissions = paginate(submissions.preload(:created_by_user, :submitters,
                                                  template: :folder,
                                                  combined_document_attachment: :blob,
@@ -67,32 +69,41 @@ module Api
 
       submissions = create_submissions(@template, params)
 
-      submissions.each do |submission|
-        SendSubmissionCreatedWebhookRequestJob.perform_async({ 'submission_id' => submission.id })
+      WebhookUrls.for_account_id(@template.account_id, 'submission.created').each do |webhook_url|
+        submissions.each do |submission|
+          SendSubmissionCreatedWebhookRequestJob.perform_async('submission_id' => submission.id,
+                                                               'webhook_url_id' => webhook_url.id)
+        end
       end
 
       Submissions.send_signature_requests(submissions)
 
       submissions.each do |submission|
-        if submission.submitters.all?(&:completed_at?) && submission.submitters.last
-          ProcessSubmitterCompletionJob.perform_async({ 'submitter_id' => submission.submitters.last.id })
+        submission.submitters.each do |submitter|
+          next unless submitter.completed_at?
+
+          ProcessSubmitterCompletionJob.perform_async('submitter_id' => submitter.id, 'send_invitation_email' => false)
         end
       end
 
       render json: build_create_json(submissions)
-    rescue Submitters::NormalizeValues::BaseError, DownloadUtils::UnableToDownload => e
+    rescue Submitters::NormalizeValues::BaseError, Submissions::CreateFromSubmitters::BaseError,
+           DownloadUtils::UnableToDownload => e
       Rollbar.warning(e) if defined?(Rollbar)
 
       render json: { error: e.message }, status: :unprocessable_entity
     end
 
     def destroy
-      if params[:permanently] == 'true'
+      if params[:permanently].in?(['true', true])
         @submission.destroy!
       else
         @submission.update!(archived_at: Time.current)
 
-        SendSubmissionArchivedWebhookRequestJob.perform_async('submission_id' => @submission.id)
+        WebhookUrls.for_account_id(@submission.account_id, 'submission.archived').each do |webhook_url|
+          SendSubmissionArchivedWebhookRequestJob.perform_async('submission_id' => @submission.id,
+                                                                'webhook_url_id' => webhook_url.id)
+        end
       end
 
       render json: @submission.as_json(only: %i[id archived_at])
@@ -107,7 +118,19 @@ module Api
         end
       end
 
-      json = { submitters: json } if request.path.ends_with?('/init')
+      if request.path.ends_with?('/init')
+        json =
+          if submissions.size == 1
+            {
+              id: submissions.first.id,
+              submitters: json,
+              expire_at: submissions.first.expire_at,
+              created_at: submissions.first.created_at
+            }
+          else
+            { submitters: json }
+          end
+      end
 
       json
     end
@@ -169,7 +192,7 @@ module Api
         key = params.key?(:submission) ? :submission : :submissions
 
         params.permit(
-          key => [permitted_attrs]
+          { key => [permitted_attrs] }, { key => permitted_attrs }
         ).fetch(key, [])
       end
     end

app/controllers/api/submitter_form_views_controller.rb

@@ -13,7 +13,10 @@ module Api
 
       SubmissionEvents.create_with_tracking_data(submitter, 'view_form', request)
 
-      SendFormViewedWebhookRequestJob.perform_async({ 'submitter_id' => submitter.id })
+      WebhookUrls.for_account_id(submitter.account_id, 'form.viewed').each do |webhook_url|
+        SendFormViewedWebhookRequestJob.perform_async('submitter_id' => submitter.id,
+                                                      'webhook_url_id' => webhook_url.id)
+      end
 
       render json: {}
     end

app/controllers/api/submitters_controller.rb

@@ -68,7 +68,7 @@ module Api
       end
 
       if @submitter.completed_at?
-        ProcessSubmitterCompletionJob.perform_async({ 'submitter_id' => @submitter.id })
+        ProcessSubmitterCompletionJob.perform_async('submitter_id' => @submitter.id)
       elsif normalized_params[:send_email] || normalized_params[:send_sms]
         Submitters.send_signature_requests([@submitter])
       end
@@ -120,6 +120,7 @@ module Api
       end&.dig('uuid')
 
       submitter.email = Submissions.normalize_email(attrs[:email]) if attrs.key?(:email)
+      submitter.name = attrs[:name] if attrs.key?(:name)
 
       if attrs.key?(:phone)
         submitter.phone = attrs[:phone].to_s.gsub(/[^0-9+]/, '')

app/controllers/api/templates_clone_controller.rb

@@ -23,9 +23,14 @@ module Api
       cloned_template.source = :api
       cloned_template.save!
 
-      schema_documents = Templates::CloneAttachments.call(template: cloned_template, original_template: @template)
+      schema_documents = Templates::CloneAttachments.call(template: cloned_template,
+                                                          original_template: @template,
+                                                          documents: params[:documents])
 
-      SendTemplateCreatedWebhookRequestJob.perform_async('template_id' => cloned_template.id)
+      WebhookUrls.for_account_id(cloned_template.account_id, 'template.created').each do |webhook_url|
+        SendTemplateCreatedWebhookRequestJob.perform_async('template_id' => cloned_template.id,
+                                                           'webhook_url_id' => webhook_url.id)
+      end
 
       render json: Templates::SerializeForApi.call(cloned_template, schema_documents)
     end

app/controllers/api/templates_controller.rb

@@ -65,13 +65,16 @@ module Api
 
       @template.update!(template_params)
 
-      SendTemplateUpdatedWebhookRequestJob.perform_async('template_id' => @template.id)
+      WebhookUrls.for_account_id(@template.account_id, 'template.updated').each do |webhook_url|
+        SendTemplateUpdatedWebhookRequestJob.perform_async('template_id' => @template.id,
+                                                           'webhook_url_id' => webhook_url.id)
+      end
 
       render json: @template.as_json(only: %i[id updated_at])
     end
 
     def destroy
-      if params[:permanently] == 'true'
+      if params[:permanently].in?(['true', true])
         @template.destroy!
       else
         @template.update!(archived_at: Time.current)
@@ -84,7 +87,7 @@ module Api
 
     def filter_templates(templates, params)
       templates = Templates.search(templates, params[:q])
-      templates = params[:archived] ? templates.archived : templates.active
+      templates = params[:archived].in?(['true', true]) ? templates.archived : templates.active
       templates = templates.where(external_id: params[:application_key]) if params[:application_key].present?
       templates = templates.where(external_id: params[:external_id]) if params[:external_id].present?
       templates = templates.joins(:folder).where(folder: { name: params[:folder] }) if params[:folder].present?
@@ -97,12 +100,12 @@ module Api
         :name,
         :external_id,
         {
-          submitters: [%i[name uuid is_requester invite_by_uuid linked_to_uuid email]],
+          submitters: [%i[name uuid is_requester invite_by_uuid optional_invite_by_uuid linked_to_uuid email]],
           fields: [[:uuid, :submitter_uuid, :name, :type,
                     :required, :readonly, :default_value,
                     :title, :description,
                     { preferences: {},
-                      conditions: [%i[field_uuid value action]],
+                      conditions: [%i[field_uuid value action operation]],
                       options: [%i[value uuid]],
                       validation: %i[message pattern],
                       areas: [%i[x y w h cell_w attachment_uuid option_uuid page]] }]]

app/controllers/api/tools_controller.rb

@@ -20,10 +20,7 @@ module Api
       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) })
+      is_checksum_found = CompletedDocument.exists?(sha256: Base64.urlsafe_encode64(Digest::SHA256.digest(file)))
 
       render json: {
         checksum_status: is_checksum_found ? 'verified' : 'not_found',

app/controllers/application_controller.rb

@@ -8,12 +8,14 @@ class ApplicationController < ActionController::Base
 
   check_authorization unless: :devise_controller?
 
+  around_action :with_locale
   before_action :sign_in_for_demo, if: -> { Docuseal.demo? }
   before_action :maybe_redirect_to_setup, unless: :signed_in?
   before_action :authenticate_user!, unless: :devise_controller?
 
   helper_method :button_title,
                 :current_account,
+                :form_link_host,
                 :svg_icon
 
   impersonates :user, with: ->(uuid) { User.find_by(uuid:) }
@@ -37,6 +39,10 @@ class ApplicationController < ActionController::Base
   end
 
   def default_url_options
+    if request.domain == 'docuseal.com'
+      return { host: 'docuseal.com', protocol: ENV['FORCE_SSL'].present? ? 'https' : 'http' }
+    end
+
     Docuseal.default_url_options
   end
 
@@ -51,7 +57,18 @@ class ApplicationController < ActionController::Base
 
   private
 
+  def with_locale(&)
+    return yield unless current_account
+
+    locale   = params[:lang].presence if Rails.env.development?
+    locale ||= current_account.locale
+
+    I18n.with_locale(locale, &)
+  end
+
   def with_browser_locale(&)
+    return yield if I18n.locale != :'en-US' && I18n.locale != :en
+
     locale   = params[:lang].presence
     locale ||= request.env['HTTP_ACCEPT_LANGUAGE'].to_s[BROWSER_LOCALE_REGEXP].to_s
 
@@ -88,4 +105,14 @@ class ApplicationController < ActionController::Base
   def svg_icon(icon_name, class: '')
     render_to_string(partial: "icons/#{icon_name}", locals: { class: })
   end
+
+  def form_link_host
+    Docuseal.default_url_options[:host]
+  end
+
+  def maybe_redirect_com
+    return if request.domain != 'docuseal.co'
+
+    redirect_to request.url.gsub('.co/', '.com/'), allow_other_host: true, status: :moved_permanently
+  end
 end

app/controllers/console_redirect_controller.rb

@@ -6,7 +6,7 @@ class ConsoleRedirectController < ApplicationController
 
   def index
     if request.path == '/upgrade'
-      params[:redir] = Docuseal.multitenant? ? "#{Docuseal::CONSOLE_URL}/plans" : "#{Docuseal::CONSOLE_URL}/on_premise"
+      params[:redir] = Docuseal.multitenant? ? "#{Docuseal::CONSOLE_URL}/plans" : "#{Docuseal::CONSOLE_URL}/on_premises"
     end
 
     params[:redir] = "#{Docuseal::CONSOLE_URL}/manage" if request.path == '/manage'

app/controllers/email_smtp_settings_controller.rb

@@ -9,7 +9,7 @@ class EmailSmtpSettingsController < ApplicationController
 
   def create
     if @encrypted_config.update(email_configs)
-      SettingsMailer.smtp_successful_setup(@encrypted_config.value['from_email']).deliver_now!
+      SettingsMailer.smtp_successful_setup(@encrypted_config.value['from_email'] || current_user.email).deliver_now!
 
       redirect_to settings_email_index_path, notice: I18n.t('changes_have_been_saved')
     else

app/controllers/embed_scripts_controller.rb

@@ -9,7 +9,7 @@ class EmbedScriptsController < ActionController::Metal
             <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;">
+              <a href="#{Docuseal::CONSOLE_URL}/on_premises" 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>

app/controllers/errors_controller.rb

@@ -2,7 +2,7 @@
 
 class ErrorsController < ActionController::Base
   ENTERPRISE_FEATURE_MESSAGE =
-    'This feature is available in Pro Edition: https://www.docuseal.co/pricing'
+    'This feature is available in Pro Edition: https://www.docuseal.com/pricing'
 
   ENTERPRISE_PATHS = [
     '/templates/html',

app/controllers/esign_settings_controller.rb

@@ -11,6 +11,8 @@ class EsignSettingsController < ApplicationController
     end
   end
 
+  prepend_before_action :maybe_redirect_com, only: %i[show]
+
   before_action :load_encrypted_config
   authorize_resource :encrypted_config, parent: false, only: %i[new create]
   authorize_resource :encrypted_config, only: %i[update destroy show]
@@ -21,9 +23,9 @@ class EsignSettingsController < ApplicationController
     default_pkcs = GenerateCertificate.load_pkcs(cert_data) if cert_data['cert'].present?
 
     custom_pkcs_list = (cert_data['custom'] || []).map do |e|
-      { 'pkcs' => OpenSSL::PKCS12.new(Base64.urlsafe_decode64(e['data']), e['password'].to_s),
-        'name' => e['name'],
-        'status' => e['status'] }
+      pkcs = e['data'].present? ? OpenSSL::PKCS12.new(Base64.urlsafe_decode64(e['data']), e['password'].to_s) : nil
+
+      { 'pkcs' => pkcs, 'name' => e['name'], 'status' => e['status'] }
     end
 
     @pkcs_list = [
@@ -56,7 +58,7 @@ class EsignSettingsController < ApplicationController
 
     save_new_cert!(@encrypted_config, @cert_record)
 
-    redirect_to settings_esign_path, notice: I18n.t('certificate_has_been_successfully_added_')
+    redirect_to settings_esign_path, notice: I18n.t('certificate_has_been_successfully_added')
   rescue OpenSSL::PKCS12::PKCS12Error => e
     Rollbar.error(e) if defined?(Rollbar)
 
@@ -66,10 +68,16 @@ class EsignSettingsController < ApplicationController
   end
 
   def update
-    @encrypted_config.value['custom'].each { |e| e['status'] = 'validate' }
+    @encrypted_config.value['custom'].to_a.each { |e| e['status'] = 'validate' }
 
-    custom_cert_data = @encrypted_config.value['custom'].find { |e| e['name'] == params[:name] }
-    custom_cert_data['status'] = 'default' if custom_cert_data
+    custom_cert_data = @encrypted_config.value['custom'].to_a.find { |e| e['name'] == params[:name] }
+
+    if custom_cert_data
+      custom_cert_data['status'] = 'default'
+    elsif params[:name] == Docuseal::AATL_CERT_NAME
+      @encrypted_config.value['custom'] ||= []
+      @encrypted_config.value['custom'] << { 'name' => params[:name], 'status' => 'default' }
+    end
 
     @encrypted_config.save!
 
@@ -81,7 +89,7 @@ class EsignSettingsController < ApplicationController
 
     @encrypted_config.save!
 
-    redirect_to settings_esign_path, notice: I18m.t('certificate_has_been_removed')
+    redirect_to settings_esign_path, notice: I18n.t('certificate_has_been_removed')
   end
 
   private

app/controllers/personalization_settings_controller.rb

@@ -6,7 +6,8 @@ class PersonalizationSettingsController < ApplicationController
     AccountConfig::SUBMITTER_INVITATION_EMAIL_KEY,
     AccountConfig::SUBMITTER_DOCUMENTS_COPY_EMAIL_KEY,
     AccountConfig::SUBMITTER_COMPLETED_EMAIL_KEY,
-    AccountConfig::FORM_COMPLETED_MESSAGE_KEY
+    AccountConfig::FORM_COMPLETED_MESSAGE_KEY,
+    *(Docuseal.multitenant? ? [] : [AccountConfig::POLICY_LINKS_KEY])
   ].freeze
 
   InvalidKey = Class.new(StandardError)

app/controllers/preview_document_page_controller.rb

@@ -12,7 +12,8 @@ class PreviewDocumentPageController < ActionController::API
 
     return head :not_found unless attachment
 
-    preview_image = attachment.preview_images.joins(:blob).find_by(blob: { filename: "#{params[:id]}#{FORMAT}" })
+    preview_image = attachment.preview_images.joins(:blob)
+                              .find_by(blob: { filename: ["#{params[:id]}.png", "#{params[:id]}.jpg"] })
 
     return redirect_to preview_image.url, allow_other_host: true if preview_image
 

app/controllers/pwa_controller.rb

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

app/controllers/setup_controller.rb

@@ -56,7 +56,7 @@ class SetupController < ApplicationController
   def account_params
     return {} unless params[:account]
 
-    params.require(:account).permit(:name, :timezone)
+    params.require(:account).permit(:name, :timezone, :locale)
   end
 
   def encrypted_config_params

app/controllers/start_form_controller.rb

@@ -7,6 +7,7 @@ class StartFormController < ApplicationController
   skip_authorization_check
 
   around_action :with_browser_locale, only: %i[show completed]
+  before_action :maybe_redirect_com, only: %i[show completed]
   before_action :load_template
 
   def show
@@ -37,7 +38,10 @@ class StartFormController < ApplicationController
 
       if @submitter.save
         if is_new_record
-          SendSubmissionCreatedWebhookRequestJob.perform_async({ 'submission_id' => @submitter.submission.id })
+          WebhookUrls.for_account_id(@submitter.account_id, 'submission.created').each do |webhook_url|
+            SendSubmissionCreatedWebhookRequestJob.perform_async('submission_id' => @submitter.submission_id,
+                                                                 'webhook_url_id' => webhook_url.id)
+          end
         end
 
         redirect_to submit_form_path(@submitter.slug)
@@ -60,6 +64,7 @@ class StartFormController < ApplicationController
                                         .or(template.submissions.where(expire_at: nil)).where(archived_at: nil))
              .order(id: :desc)
              .where(declined_at: nil)
+             .where(external_id: nil)
              .then { |rel| params[:resubmit].present? ? rel.where(completed_at: nil) : rel }
              .find_or_initialize_by(**submitter_params.compact_blank)
   end

app/controllers/submissions_archived_controller.rb

@@ -8,8 +8,18 @@ class SubmissionsArchivedController < ApplicationController
     @submissions = @submissions.where.not(archived_at: nil)
                                .or(@submissions.where.not(templates: { archived_at: nil }))
                                .preload(:created_by_user, template: :author)
-    @submissions = Submissions.search(@submissions, params[:q], search_template: true)
 
-    @pagy, @submissions = pagy(@submissions.preload(:submitters).order(id: :desc))
+    @submissions = @submissions.preload(:template_accesses) unless current_user.role.in?(%w[admin superadmin])
+
+    @submissions = Submissions.search(@submissions, params[:q], search_template: true)
+    @submissions = Submissions::Filter.call(@submissions, current_user, params)
+
+    @submissions = if params[:completed_at_from].present? || params[:completed_at_to].present?
+                     @submissions.order(Submitter.arel_table[:completed_at].maximum.desc)
+                   else
+                     @submissions.order(id: :desc)
+                   end
+
+    @pagy, @submissions = pagy(@submissions.preload(submitters: :start_form_submission_events))
   end
 end

app/controllers/submissions_controller.rb

@@ -6,9 +6,18 @@ class SubmissionsController < ApplicationController
 
   load_and_authorize_resource :submission, only: %i[show destroy]
 
+  prepend_before_action :maybe_redirect_com, only: %i[show]
+
   def show
     @submission = Submissions.preload_with_pages(@submission)
 
+    unless @submission.submitters.all?(&:completed_at?)
+      ActiveRecord::Associations::Preloader.new(
+        records: [@submission],
+        associations: [submitters: :start_form_submission_events]
+      ).call
+    end
+
     render :show, layout: 'plain'
   end
 
@@ -43,9 +52,7 @@ class SubmissionsController < ApplicationController
                                            params: params.merge('send_completed_email' => true))
       end
 
-    submissions.each do |submission|
-      SendSubmissionCreatedWebhookRequestJob.perform_async({ 'submission_id' => submission.id })
-    end
+    enqueue_submission_created_webhooks(@template, submissions)
 
     Submissions.send_signature_requests(submissions)
 
@@ -54,14 +61,17 @@ class SubmissionsController < ApplicationController
 
   def destroy
     notice =
-      if params[:permanently].present?
+      if params[:permanently].in?(['true', true])
         @submission.destroy!
 
         I18n.t('submission_has_been_removed')
       else
         @submission.update!(archived_at: Time.current)
 
-        SendSubmissionArchivedWebhookRequestJob.perform_async('submission_id' => @submission.id)
+        WebhookUrls.for_account_id(@submission.account_id, 'submission.archived').each do |webhook_url|
+          SendSubmissionArchivedWebhookRequestJob.perform_async('submission_id' => @submission.id,
+                                                                'webhook_url_id' => webhook_url.id)
+        end
 
         I18n.t('submission_has_been_archived')
       end
@@ -78,6 +88,15 @@ class SubmissionsController < ApplicationController
     template.save!
   end
 
+  def enqueue_submission_created_webhooks(template, submissions)
+    WebhookUrls.for_account_id(template.account_id, 'submission.created').each do |webhook_url|
+      submissions.each do |submission|
+        SendSubmissionCreatedWebhookRequestJob.perform_async('submission_id' => submission.id,
+                                                             'webhook_url_id' => webhook_url.id)
+      end
+    end
+  end
+
   def submissions_params
     params.permit(submission: { submitters: [%i[uuid email phone name]] })
   end

app/controllers/submissions_dashboard_controller.rb

@@ -10,11 +10,17 @@ class SubmissionsDashboardController < ApplicationController
                                .where(templates: { archived_at: nil })
                                .preload(:created_by_user, template: :author)
 
+    @submissions = @submissions.preload(:template_accesses) unless current_user.role.in?(%w[admin superadmin])
+
     @submissions = Submissions.search(@submissions, params[:q], search_template: true)
+    @submissions = Submissions::Filter.call(@submissions, current_user, params)
 
-    @submissions = @submissions.pending if params[:status] == 'pending'
-    @submissions = @submissions.completed if params[:status] == 'completed'
+    @submissions = if params[:completed_at_from].present? || params[:completed_at_to].present?
+                     @submissions.order(Submitter.arel_table[:completed_at].maximum.desc)
+                   else
+                     @submissions.order(id: :desc)
+                   end
 
-    @pagy, @submissions = pagy(@submissions.preload(:submitters).order(id: :desc))
+    @pagy, @submissions = pagy(@submissions.preload(submitters: :start_form_submission_events))
   end
 end

app/controllers/submissions_download_controller.rb

@@ -53,8 +53,15 @@ class SubmissionsDownloadController < ApplicationController
   end
 
   def build_urls(submitter)
+    filename_format = AccountConfig.find_or_initialize_by(account_id: submitter.account_id,
+                                                          key: AccountConfig::DOCUMENT_FILENAME_FORMAT_KEY)&.value
+
     Submitters.select_attachments_for_download(submitter).map do |attachment|
-      ActiveStorage::Blob.proxy_url(attachment.blob, expires_at: FILES_TTL.from_now.to_i)
+      ActiveStorage::Blob.proxy_url(
+        attachment.blob,
+        expires_at: FILES_TTL.from_now.to_i,
+        filename: Submitters.build_document_filename(submitter, attachment.blob, filename_format)
+      )
     end
   end
 
@@ -65,6 +72,13 @@ class SubmissionsDownloadController < ApplicationController
     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)
+    filename_format = AccountConfig.find_or_initialize_by(account_id: submitter.account_id,
+                                                          key: AccountConfig::DOCUMENT_FILENAME_FORMAT_KEY)&.value
+
+    ActiveStorage::Blob.proxy_url(
+      attachment.blob,
+      expires_at: FILES_TTL.from_now.to_i,
+      filename: Submitters.build_document_filename(submitter, attachment.blob, filename_format)
+    )
   end
 end

app/controllers/submissions_filters_controller.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+class SubmissionsFiltersController < ApplicationController
+  ALLOWED_NAMES = %w[
+    author
+    completed_at
+    status
+    created_at
+  ].freeze
+
+  skip_authorization_check
+
+  def show
+    return head :not_found unless ALLOWED_NAMES.include?(params[:name])
+
+    render params[:name]
+  end
+end

app/controllers/submissions_preview_controller.rb

@@ -4,6 +4,8 @@ class SubmissionsPreviewController < ApplicationController
   skip_before_action :authenticate_user!
   skip_authorization_check
 
+  prepend_before_action :maybe_redirect_com, only: %i[show completed]
+
   TTL = 40.minutes
 
   def show
@@ -18,7 +20,10 @@ class SubmissionsPreviewController < ApplicationController
 
     @submission ||= Submission.find_by!(slug: params[:slug])
 
-    if !@submission.submitters.all?(&:completed_at?) && current_user.blank?
+    raise ActionController::RoutingError if @submission.account.archived_at?
+
+    if !@submission.submitters.all?(&:completed_at?) && !signature_valid &&
+       (!current_user || !current_ability.can?(:read, @submission))
       raise ActionController::RoutingError, I18n.t('not_found')
     end
 

app/controllers/submissions_unarchive_controller.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class SubmissionsUnarchiveController < ApplicationController
+  load_and_authorize_resource :submission
+
+  def create
+    @submission.update!(archived_at: nil)
+
+    redirect_to submission_path(@submission), notice: I18n.t('submission_has_been_unarchived')
+  end
+end

app/controllers/submit_form_controller.rb

@@ -12,17 +12,22 @@ class SubmitFormController < ApplicationController
   def show
     @submitter = Submitter.find_by!(slug: params[:slug])
 
+    submission = @submitter.submission
+
     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 :archived if submission.template.archived_at? ||
+                               submission.archived_at? ||
+                               @submitter.account.archived_at?
+    return render :expired if submission.expired?
     return render :declined if @submitter.declined_at?
+    return render :awaiting if submission.template.preferences['submitters_order'] == 'preserved' &&
+                               !Submitters.current_submitter_order?(@submitter)
 
     Submitters.preload_with_pages(@submitter)
 
     Submitters::MaybeUpdateDefaultValues.call(@submitter, current_user)
 
-    @attachments_index = ActiveStorage::Attachment.where(record: @submitter.submission.submitters, name: :attachments)
-                                                  .preload(:blob).index_by(&:uuid)
+    @attachments_index = build_attachments_index(submission)
 
     @form_configs = Submitters::FormConfigs.call(@submitter, CONFIG_KEYS)
 
@@ -74,4 +79,11 @@ class SubmitFormController < ApplicationController
   end
 
   def success; end
+
+  private
+
+  def build_attachments_index(submission)
+    ActiveStorage::Attachment.where(record: submission.submitters, name: :attachments)
+                             .preload(:blob).index_by(&:uuid)
+  end
 end

app/controllers/submit_form_decline_controller.rb

@@ -21,8 +21,14 @@ class SubmitFormDeclineController < ApplicationController
 
     user = submitter.submission.created_by_user || submitter.template.author
 
-    SubmitterMailer.declined_email(submitter, user).deliver_later!
-    SendFormDeclinedWebhookRequestJob.perform_async('submitter_id' => submitter.id)
+    if user.user_configs.find_by(key: UserConfig::RECEIVE_DECLINED_EMAIL)&.value != false
+      SubmitterMailer.declined_email(submitter, user).deliver_later!
+    end
+
+    WebhookUrls.for_account_id(submitter.account_id, 'form.declined').each do |webhook_url|
+      SendFormDeclinedWebhookRequestJob.perform_async('submitter_id' => submitter.id,
+                                                      'webhook_url_id' => webhook_url.id)
+    end
 
     redirect_to submit_form_path(submitter.slug)
   end

app/controllers/submit_form_invite_controller.rb

@@ -9,13 +9,15 @@ class SubmitFormInviteController < ApplicationController
 
     return head :unprocessable_entity unless can_invite?(submitter)
 
-    invite_submitters = filter_invite_submitters(submitter)
+    invite_submitters = filter_invite_submitters(submitter, 'invite_by_uuid')
+    optional_invite_submitters = filter_invite_submitters(submitter, 'optional_invite_by_uuid')
 
     ApplicationRecord.transaction do
-      invite_submitters.each do |item|
+      (invite_submitters + optional_invite_submitters).each do |item|
         attrs = submitters_attributes.find { |e| e[:uuid] == item['uuid'] }
 
         next unless attrs
+        next if attrs[:email].blank?
 
         submitter.submission.submitters.create!(**attrs, account_id: submitter.account_id)
 
@@ -46,9 +48,9 @@ class SubmitFormInviteController < ApplicationController
       !submitter.submission.template.archived_at?
   end
 
-  def filter_invite_submitters(submitter)
+  def filter_invite_submitters(submitter, key = 'invite_by_uuid')
     (submitter.submission.template_submitters || submitter.submission.template.submitters).select do |s|
-      s['invite_by_uuid'] == submitter.uuid && submitter.submission.submitters.none? { |e| e.uuid == s['uuid'] }
+      s[key] == submitter.uuid && submitter.submission.submitters.none? { |e| e.uuid == s['uuid'] }
     end
   end
 

app/controllers/submitters_autocomplete_controller.rb

@@ -9,7 +9,8 @@ class SubmittersAutocompleteController < ApplicationController
   def index
     submitters = search_submitters(@submitters)
 
-    values = submitters.limit(LIMIT).group(SELECT_COLUMNS.join(', ')).pluck(SELECT_COLUMNS.join(', '))
+    arel_columns = SELECT_COLUMNS.map { |col| Submitter.arel_table[col] }
+    values = submitters.limit(LIMIT).group(arel_columns).pluck(arel_columns)
 
     attrs = values.map { |row| SELECT_COLUMNS.zip(row).to_h }
     attrs = attrs.uniq { |e| e[params[:field]] } if params[:field].present?

app/controllers/submitters_controller.rb

@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+class SubmittersController < ApplicationController
+  load_and_authorize_resource :submitter, only: %i[edit update]
+
+  def edit
+    @submitter_email_message =
+      if @submitter.preferences['email_message_uuid'].present?
+        @submitter.account.email_messages.find_by(uuid: @submitter.preferences['email_message_uuid'])
+      end
+  end
+
+  def update
+    submission = @submitter.submission
+
+    if @submitter.submission_events.exists?(event_type: 'start_form') || submission.archived_at? || submission.expired?
+      return redirect_back fallback_location: submission_path(submission), alert: I18n.t('submitter_cannot_be_updated')
+    end
+
+    if submitter_params.values.all?(&:blank?)
+      return redirect_back fallback_location: submission_path(submission),
+                           alert: I18n.t('at_least_one_field_must_be_filled')
+    end
+
+    if params[:is_custom_message] != '1'
+      params.delete(:subject)
+      params.delete(:body)
+    end
+
+    submitter_preferences = Submitters.normalize_preferences(@submitter.account, current_user, params)
+
+    if submitter_preferences.key?('email_message_uuid')
+      @submitter.preferences['email_message_uuid'] = submitter_preferences['email_message_uuid']
+    end
+
+    assign_submitter_attrs(@submitter, submitter_params)
+
+    if @submitter.save
+      maybe_resend_email_sms(@submitter, params)
+
+      redirect_back fallback_location: submission_path(submission), notice: I18n.t('changes_have_been_saved')
+    else
+      redirect_back fallback_location: submission_path(submission), alert: I18n.t('unable_to_save')
+    end
+  end
+
+  private
+
+  def maybe_resend_email_sms(submitter, params)
+    if params[:send_email] == '1' && submitter.email.present?
+      is_sent_recently = Docuseal.multitenant? &&
+                         EmailEvent.exists?(email: submitter.email,
+                                            tag: 'submitter_invitation',
+                                            emailable: submitter,
+                                            event_type: 'send',
+                                            created_at: 4.hours.ago..Time.current)
+
+      SendSubmitterInvitationEmailJob.perform_async('submitter_id' => submitter.id) unless is_sent_recently
+    end
+
+    return if submitter.phone.blank?
+    return unless params[:send_sms] == '1'
+
+    SendSubmitterInvitationSmsJob.perform_async('submitter_id' => submitter.id)
+  end
+
+  def assign_submitter_attrs(submitter, attrs)
+    submitter.phone = attrs[:phone].to_s.gsub(/[^0-9+]/, '') if attrs.key?(:phone)
+
+    submitter.email = Submissions.normalize_email(attrs[:email]) if attrs.key?(:email)
+
+    submitter.name = attrs[:name] if attrs.key?(:name)
+
+    submitter
+  end
+
+  def submitter_params
+    params.require(:submitter).permit(:email, :name, :phone).transform_values(&:strip)
+  end
+end

app/controllers/submitters_resubmit_controller.rb

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

app/controllers/submitters_send_email_controller.rb

@@ -6,7 +6,7 @@ class SubmittersSendEmailController < ApplicationController
   def create
     if Docuseal.multitenant? && SubmissionEvent.exists?(submitter: @submitter,
                                                         event_type: 'send_email',
-                                                        created_at: 24.hours.ago..Time.current)
+                                                        created_at: 10.hours.ago..Time.current)
       Rollbar.warning("Already sent: #{@submitter.id}") if defined?(Rollbar)
 
       return redirect_back(fallback_location: submission_path(@submitter.submission),

app/controllers/template_folders_controller.rb

@@ -4,10 +4,11 @@ class TemplateFoldersController < ApplicationController
   load_and_authorize_resource :template_folder
 
   def show
-    @templates = @template_folder.templates.active.preload(:author).order(id: :desc)
+    @templates = @template_folder.templates.active.accessible_by(current_ability)
+                                 .preload(:author, :template_accesses).order(id: :desc)
     @templates = Templates.search(@templates, params[:q])
 
-    @pagy, @templates = pagy(@templates, items: 12)
+    @pagy, @templates = pagy(@templates, limit: 12)
   end
 
   def edit; end

app/controllers/templates_archived_controller.rb

@@ -4,9 +4,9 @@ class TemplatesArchivedController < ApplicationController
   load_and_authorize_resource :template, parent: false
 
   def index
-    @templates = @templates.where.not(archived_at: nil).preload(:author, :folder).order(id: :desc)
+    @templates = @templates.where.not(archived_at: nil).preload(:author, :folder, :template_accesses).order(id: :desc)
     @templates = Templates.search(@templates, params[:q])
 
-    @pagy, @templates = pagy(@templates, items: 12)
+    @pagy, @templates = pagy(@templates, limit: 12)
   end
 end

app/controllers/templates_archived_submissions_controller.rb

@@ -7,8 +7,15 @@ class TemplatesArchivedSubmissionsController < ApplicationController
   def index
     @submissions = @submissions.where.not(archived_at: nil)
     @submissions = Submissions.search(@submissions, params[:q], search_values: true)
+    @submissions = Submissions::Filter.call(@submissions, current_user, params)
 
-    @pagy, @submissions = pagy(@submissions.preload(:submitters).order(id: :desc))
+    @submissions = if params[:completed_at_from].present? || params[:completed_at_to].present?
+                     @submissions.order(Submitter.arel_table[:completed_at].maximum.desc)
+                   else
+                     @submissions.order(id: :desc)
+                   end
+
+    @pagy, @submissions = pagy(@submissions.preload(submitters: :start_form_submission_events))
   rescue ActiveRecord::RecordNotFound
     redirect_to root_path
   end

app/controllers/templates_controller.rb

@@ -9,13 +9,21 @@ class TemplatesController < ApplicationController
     submissions = @template.submissions.accessible_by(current_ability)
     submissions = submissions.active if @template.archived_at.blank?
     submissions = Submissions.search(submissions, params[:q], search_values: true)
+    submissions = Submissions::Filter.call(submissions, current_user, params.except(:status))
 
     @base_submissions = submissions
 
-    submissions = submissions.pending if params[:status] == 'pending'
-    submissions = submissions.completed if params[:status] == 'completed'
+    submissions = Submissions::Filter.filter_by_status(submissions, params)
 
-    @pagy, @submissions = pagy(submissions.preload(:submitters).order(id: :desc))
+    submissions = if params[:completed_at_from].present? || params[:completed_at_to].present?
+                    submissions.order(Submitter.arel_table[:completed_at].maximum.desc)
+                  else
+                    submissions.order(id: :desc)
+                  end
+
+    submissions = submissions.preload(:template_accesses) unless current_user.role.in?(%w[admin superadmin])
+
+    @pagy, @submissions = pagy(submissions.preload(submitters: :start_form_submission_events))
   rescue ActiveRecord::RecordNotFound
     redirect_to root_path
   end
@@ -66,7 +74,7 @@ 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)
+      enqueue_template_created_webhooks(@template)
 
       maybe_redirect_to_template(@template)
     else
@@ -77,14 +85,14 @@ class TemplatesController < ApplicationController
   def update
     @template.update!(template_params)
 
-    SendTemplateUpdatedWebhookRequestJob.perform_async('template_id' => @template.id)
+    enqueue_template_updated_webhooks(@template)
 
     head :ok
   end
 
   def destroy
     notice =
-      if params[:permanently].present?
+      if params[:permanently].in?(['true', true])
         @template.destroy!
 
         I18n.t('template_has_been_removed')
@@ -102,13 +110,13 @@ class TemplatesController < ApplicationController
   def template_params
     params.require(:template).permit(
       :name,
-      { schema: [%i[attachment_uuid name]],
-        submitters: [%i[name uuid is_requester linked_to_uuid invite_by_uuid email]],
+      { schema: [[:attachment_uuid, :name, { conditions: [%i[field_uuid value action operation]] }]],
+        submitters: [%i[name uuid is_requester linked_to_uuid invite_by_uuid optional_invite_by_uuid email]],
         fields: [[:uuid, :submitter_uuid, :name, :type,
                   :required, :readonly, :default_value,
                   :title, :description,
                   { preferences: {},
-                    conditions: [%i[field_uuid value action]],
+                    conditions: [%i[field_uuid value action operation]],
                     options: [%i[value uuid]],
                     validation: %i[message pattern],
                     areas: [%i[x y w h cell_w attachment_uuid option_uuid page]] }]] }
@@ -116,7 +124,8 @@ class TemplatesController < ApplicationController
   end
 
   def authorized_clone_account_id?(account_id)
-    true_user.account_id.to_s == account_id.to_s || true_user.account.linked_accounts.exists?(id: account_id)
+    true_user.account_id.to_s == account_id.to_s ||
+      true_user.account.linked_accounts.accessible_by(current_ability).exists?(id: account_id)
   end
 
   def maybe_redirect_to_template(template)
@@ -127,6 +136,20 @@ class TemplatesController < ApplicationController
     end
   end
 
+  def enqueue_template_created_webhooks(template)
+    WebhookUrls.for_account_id(template.account_id, 'template.created').each do |webhook_url|
+      SendTemplateCreatedWebhookRequestJob.perform_async('template_id' => template.id,
+                                                         'webhook_url_id' => webhook_url.id)
+    end
+  end
+
+  def enqueue_template_updated_webhooks(template)
+    WebhookUrls.for_account_id(template.account_id, 'template.updated').each do |webhook_url|
+      SendTemplateUpdatedWebhookRequestJob.perform_async('template_id' => template.id,
+                                                         'webhook_url_id' => webhook_url.id)
+    end
+  end
+
   def load_base_template
     return if params[:base_template_id].blank?
 

app/controllers/templates_dashboard_controller.rb

@@ -9,7 +9,9 @@ class TemplatesDashboardController < ApplicationController
   FOLDERS_PER_PAGE = 18
 
   def index
-    @template_folders = filter_template_folders(@template_folders)
+    @template_folders = @template_folders.where(id: @templates.active.select(:folder_id)).order(id: :desc)
+
+    @template_folders = TemplateFolders.search(@template_folders, params[:q])
 
     @pagy, @template_folders = pagy(
       @template_folders,
@@ -23,29 +25,21 @@ class TemplatesDashboardController < ApplicationController
       @template_folders = @template_folders.reject { |e| e.name == TemplateFolder::DEFAULT_NAME }
       @templates = filter_templates(@templates)
 
-      items =
+      limit =
         if @template_folders.size < 4
           TEMPLATES_PER_PAGE
         else
           (@template_folders.size < 7 ? 9 : 6)
         end
 
-      @pagy, @templates = pagy(@templates, items:)
+      @pagy, @templates = pagy(@templates, limit:)
     end
   end
 
   private
 
-  def filter_template_folders(template_folders)
-    rel = template_folders.joins(:active_templates)
-                          .order(id: :desc)
-                          .distinct
-
-    TemplateFolders.search(rel, params[:q])
-  end
-
   def filter_templates(templates)
-    rel = templates.active.preload(:author).order(id: :desc)
+    rel = templates.active.preload(:author, :template_accesses).order(id: :desc)
 
     if params[:q].blank?
       if Docuseal.multitenant? && !current_account.testing?

app/controllers/templates_preferences_controller.rb

@@ -22,8 +22,10 @@ class TemplatesPreferencesController < ApplicationController
       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
+                      documents_copy_email_attach_documents documents_copy_email_reply_to
                       completed_notification_email_attach_documents
                       completed_redirect_url
+                      submitters_order
                       completed_notification_email_subject completed_notification_email_body
                       completed_notification_email_enabled completed_notification_email_attach_audit] +
                       [completed_message: %i[title body]]

app/controllers/templates_recipients_controller.rb

@@ -17,38 +17,47 @@ class TemplatesRecipientsController < ApplicationController
   private
 
   def submitters_params
-    params.require(:template).permit(
-      submitters: [%i[name uuid is_requester invite_by_uuid linked_to_uuid email option]]
-    ).fetch(:submitters, {}).values.filter_map do |s|
+    permit_params = { submitters: [%i[name uuid is_requester optional_invite_by_uuid
+                                      invite_by_uuid linked_to_uuid email option]] }
+
+    params.require(:template).permit(permit_params).fetch(:submitters, {}).values.filter_map do |s|
       next if s[:uuid].blank?
 
-      if s[:is_requester] == '1' && s[:invite_by_uuid].blank?
+      if s[:is_requester] == '1' && s[:invite_by_uuid].blank? && s[:optional_invite_by_uuid].blank?
         s[:is_requester] = true
       else
         s.delete(:is_requester)
       end
 
       s.delete(:invite_by_uuid) if s[:invite_by_uuid].blank?
+      s.delete(:optional_invite_by_uuid) if s[:optional_invite_by_uuid].blank?
 
-      option = s.delete(:option)
-
-      if option.present?
-        case option
-        when 'is_requester'
-          s[:is_requester] = true
-        when 'not_set'
-          s.delete(:is_requester)
-          s.delete(:email)
-          s.delete(:linked_to_uuid)
-          s.delete(:invite_by_uuid)
-        when /\Alinked_to_(.*)\z/
-          s[:linked_to_uuid] = ::Regexp.last_match(-1)
-        when /\Ainvite_by_(.*)\z/
-          s[:invite_by_uuid] = ::Regexp.last_match(-1)
-        end
-      end
-
-      s
+      normalize_option_value(s)
     end
   end
+
+  def normalize_option_value(attrs)
+    option = attrs.delete(:option)
+
+    if option.present?
+      case option
+      when 'is_requester'
+        attrs[:is_requester] = true
+      when 'not_set'
+        attrs.delete(:is_requester)
+        attrs.delete(:email)
+        attrs.delete(:linked_to_uuid)
+        attrs.delete(:invite_by_uuid)
+        attrs.delete(:optional_invite_by_uuid)
+      when /\Alinked_to_(.*)\z/
+        attrs[:linked_to_uuid] = ::Regexp.last_match(-1)
+      when /\Aoptional_invite_by_(.*)\z/
+        attrs[:optional_invite_by_uuid] = ::Regexp.last_match(-1)
+      when /\Ainvite_by_(.*)\z/
+        attrs[:invite_by_uuid] = ::Regexp.last_match(-1)
+      end
+    end
+
+    attrs
+  end
 end

app/controllers/templates_uploads_controller.rb

@@ -23,7 +23,7 @@ class TemplatesUploadsController < ApplicationController
 
     @template.update!(schema:)
 
-    SendTemplateCreatedWebhookRequestJob.perform_async('template_id' => @template.id)
+    enqueue_template_created_webhooks(@template)
 
     redirect_to edit_template_path(@template)
   rescue Templates::CreateAttachments::PdfEncrypted
@@ -55,14 +55,22 @@ class TemplatesUploadsController < ApplicationController
     tempfile.write(DownloadUtils.call(params[:url]).body)
     tempfile.rewind
 
+    filename = URI.decode_www_form_component(params[:filename]) if params[:filename].present?
+    filename ||= File.basename(URI.decode_www_form_component(params[:url]))
+
     file = ActionDispatch::Http::UploadedFile.new(
       tempfile:,
-      filename: File.basename(
-        URI.decode_www_form_component(params[:filename].presence || params[:url]), '.*'
-      ),
+      filename:,
       type: Marcel::MimeType.for(tempfile)
     )
 
     { files: [file] }
   end
+
+  def enqueue_template_created_webhooks(template)
+    WebhookUrls.for_account_id(template.account_id, 'template.created').each do |webhook_url|
+      SendTemplateCreatedWebhookRequestJob.perform_async('template_id' => template.id,
+                                                         'webhook_url_id' => webhook_url.id)
+    end
+  end
 end

app/controllers/testing_api_settings_controller.rb

@@ -4,9 +4,8 @@ class TestingApiSettingsController < ApplicationController
   def index
     authorize!(:manage, current_user.access_token)
 
-    @webhook_config =
-      current_account.encrypted_configs.find_or_initialize_by(key: EncryptedConfig::WEBHOOK_URL_KEY)
+    @webhook_url = current_account.webhook_urls.first_or_initialize
 
-    authorize!(:manage, @webhook_config)
+    authorize!(:manage, @webhook_url)
   end
 end

app/controllers/user_signatures_controller.rb

@@ -9,7 +9,7 @@ class UserSignaturesController < ApplicationController
   def update
     file = params[:file]
 
-    return redirect_to settings_profile_index_path, notice: I18n.t('Unable to save signature') if file.blank?
+    return redirect_to settings_profile_index_path, notice: I18n.t('unable_to_save_signature') if file.blank?
 
     blob = ActiveStorage::Blob.create_and_upload!(io: file.open,
                                                   filename: file.original_filename,
@@ -24,7 +24,7 @@ class UserSignaturesController < ApplicationController
     if @user_config.update(value: attachment.uuid)
       redirect_to settings_profile_index_path, notice: I18n.t('signature_has_been_saved')
     else
-      redirect_to settings_profile_index_path, notice: I18n.t('Unable to save signature')
+      redirect_to settings_profile_index_path, notice: I18n.t('unable_to_save_signature')
     end
   end
 

app/controllers/users_controller.rb

@@ -9,9 +9,11 @@ class UsersController < ApplicationController
   def index
     @users =
       if params[:status] == 'archived'
-        @users.archived
+        @users.archived.where.not(role: 'integration')
+      elsif params[:status] == 'integration'
+        @users.active.where(role: 'integration')
       else
-        @users.active
+        @users.active.where.not(role: 'integration')
       end
 
     @pagy, @users = pagy(@users.where(account: current_account).order(id: :desc))
@@ -22,16 +24,14 @@ class UsersController < ApplicationController
   def edit; end
 
   def create
-    existing_user = User.accessible_by(current_ability).find_by(email: @user.email)
+    if User.accessible_by(current_ability).exists?(email: @user.email)
+      @user.errors.add(:email, I18n.t('already_exists'))
 
-    if existing_user
-      existing_user.archived_at = nil
-      existing_user.assign_attributes(user_params)
-      existing_user.account = current_account
-
-      @user = existing_user
+      return render turbo_stream: turbo_stream.replace(:modal, template: 'users/new'), status: :unprocessable_entity
     end
 
+    @user.role = User::ADMIN_ROLE unless role_valid?(@user.role)
+
     if @user.save
       UserMailer.invitation_email(@user).deliver_later!
 
@@ -79,14 +79,7 @@ class UsersController < ApplicationController
   end
 
   def build_user
-    @user = current_account.users.find_by(email: user_params[:email])&.tap do |user|
-      user.assign_attributes(user_params)
-      user.archived_at = nil
-    end
-
-    @user ||= current_account.users.new(user_params)
-
-    @user
+    @user = current_account.users.new(user_params)
   end
 
   def user_params

app/controllers/webhook_preferences_controller.rb

@@ -1,37 +1,22 @@
 # frozen_string_literal: true
 
 class WebhookPreferencesController < ApplicationController
-  EVENTS = %w[
-    form.viewed
-    form.started
-    form.completed
-    form.declined
-    template.created
-    template.updated
-    submission.created
-    submission.archived
-  ].freeze
+  load_and_authorize_resource :webhook_url, parent: false
 
-  before_action :load_account_config
-  authorize_resource :account_config, parent: false
+  def update
+    webhook_preferences_params[:events].each do |event, val|
+      @webhook_url.events.delete(event) if val == '0'
+      @webhook_url.events.push(event) if val == '1' && @webhook_url.events.exclude?(event)
+    end
 
-  def create
-    @account_config.value[account_config_params[:event]] = account_config_params[:value] == '1'
-
-    @account_config.save!
+    @webhook_url.save!
 
     head :ok
   end
 
   private
 
-  def load_account_config
-    @account_config =
-      current_account.account_configs.find_or_initialize_by(key: AccountConfig::WEBHOOK_PREFERENCES_KEY)
-    @account_config.value ||= {}
-  end
-
-  def account_config_params
-    params.permit(:event, :value)
+  def webhook_preferences_params
+    params.require(:webhook_url).permit(events: {})
   end
 end

app/controllers/webhook_secret_controller.rb

@@ -1,29 +1,22 @@
 # frozen_string_literal: true
 
 class WebhookSecretController < ApplicationController
-  before_action :load_encrypted_config
-  authorize_resource :encrypted_config, parent: false
+  load_and_authorize_resource :webhook_url, parent: false
 
-  def index; end
+  def show; end
 
-  def create
-    @encrypted_config.assign_attributes(value: {
-      encrypted_config_params[:key] => encrypted_config_params[:value]
+  def update
+    @webhook_url.update!(secret: {
+      webhook_secret_params[:key] => webhook_secret_params[:value]
     }.compact_blank)
 
-    @encrypted_config.value.present? ? @encrypted_config.save! : @encrypted_config.delete
-
-    redirect_back(fallback_location: settings_webhooks_path, notice: I18n.t('webhook_secret_has_been_saved'))
+    redirect_back(fallback_location: settings_webhook_path(@webhook_url),
+                  notice: I18n.t('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, {})
+  def webhook_secret_params
+    params.require(:webhook_url).permit(secret: %i[key value]).fetch(:secret, {})
   end
 end

app/controllers/webhook_settings_controller.rb

@@ -1,36 +1,60 @@
 # frozen_string_literal: true
 
 class WebhookSettingsController < ApplicationController
-  before_action :load_encrypted_config
-  authorize_resource :encrypted_config, parent: false
+  load_and_authorize_resource :webhook_url, parent: false, only: %i[index show new create update destroy]
+  load_and_authorize_resource :webhook_url, only: %i[resend], id_param: :webhook_id
+
+  def index
+    @webhook_urls = @webhook_urls.order(id: :desc)
+    @webhook_url = @webhook_urls.first_or_initialize
+
+    render @webhook_urls.size > 1 ? 'index' : 'show'
+  end
 
   def show; end
 
+  def new; end
+
   def create
-    @encrypted_config.assign_attributes(encrypted_config_params)
+    @webhook_url.save!
 
-    @encrypted_config.value.present? ? @encrypted_config.save! : @encrypted_config.delete
-
-    redirect_back(fallback_location: settings_webhooks_path, notice: I18n.t('webhook_url_has_been_saved'))
+    redirect_to settings_webhooks_path, notice: I18n.t('webhook_url_has_been_saved')
   end
 
   def update
+    @webhook_url.update!(update_params)
+
+    redirect_back(fallback_location: settings_webhook_path(@webhook_url),
+                  notice: I18n.t('webhook_url_has_been_updated'))
+  end
+
+  def destroy
+    @webhook_url.destroy!
+
+    redirect_to settings_webhooks_path, notice: I18n.t('webhook_url_has_been_deleted')
+  end
+
+  def resend
     submitter = current_account.submitters.where.not(completed_at: nil).order(:id).last
 
-    SendFormCompletedWebhookRequestJob.perform_async({ 'submitter_id' => submitter.id,
-                                                       'encrypted_config_id' => @encrypted_config.id })
+    if submitter.blank? || @webhook_url.blank?
+      return redirect_back(fallback_location: settings_webhooks_path,
+                           alert: I18n.t('unable_to_resend_webhook_request'))
+    end
+
+    SendFormCompletedWebhookRequestJob.perform_async('submitter_id' => submitter.id,
+                                                     'webhook_url_id' => @webhook_url.id)
 
     redirect_back(fallback_location: settings_webhooks_path, notice: I18n.t('webhook_request_has_been_sent'))
   end
 
   private
 
-  def load_encrypted_config
-    @encrypted_config =
-      current_account.encrypted_configs.find_or_initialize_by(key: EncryptedConfig::WEBHOOK_URL_KEY)
+  def create_params
+    params.require(:webhook_url).permit(:url, events: []).reverse_merge(events: [])
   end
 
-  def encrypted_config_params
-    params.require(:encrypted_config).permit(:value)
+  def update_params
+    params.require(:webhook_url).permit(:url)
   end
 end

app/javascript/application.js

@@ -29,6 +29,9 @@ import SearchInput from './elements/search_input'
 import ToggleAttribute from './elements/toggle_attribute'
 import LinkedInput from './elements/linked_input'
 import CheckboxGroup from './elements/checkbox_group'
+import MaskedInput from './elements/masked_input'
+import SetDateButton from './elements/set_date_button'
+import IndeterminateCheckbox from './elements/indeterminate_checkbox'
 
 import * as TurboInstantClick from './lib/turbo_instant_click'
 
@@ -95,6 +98,9 @@ safeRegisterElement('search-input', SearchInput)
 safeRegisterElement('toggle-attribute', ToggleAttribute)
 safeRegisterElement('linked-input', LinkedInput)
 safeRegisterElement('checkbox-group', CheckboxGroup)
+safeRegisterElement('masked-input', MaskedInput)
+safeRegisterElement('set-date-button', SetDateButton)
+safeRegisterElement('indeterminate-checkbox', IndeterminateCheckbox)
 
 safeRegisterElement('template-builder', class extends HTMLElement {
   connectedCallback () {
@@ -109,6 +115,7 @@ safeRegisterElement('template-builder', class extends HTMLElement {
       backgroundColor: '#faf7f5',
       locale: this.dataset.locale,
       withPhone: this.dataset.withPhone === 'true',
+      withVerification: ['true', 'false'].includes(this.dataset.withVerification) ? this.dataset.withVerification === 'true' : null,
       withLogo: this.dataset.withLogo !== 'false',
       editable: this.dataset.editable !== 'false',
       authenticityToken: document.querySelector('meta[name="csrf-token"]')?.content,
@@ -150,7 +157,8 @@ safeRegisterElement('import-list', class extends HTMLElement {
     this.app = createApp(ImportList, {
       template: JSON.parse(this.dataset.template),
       multitenant: this.dataset.multitenant === 'true',
-      authenticityToken: document.querySelector('meta[name="csrf-token"]')?.content
+      authenticityToken: document.querySelector('meta[name="csrf-token"]')?.content,
+      i18n: JSON.parse(this.dataset.i18n || '{}')
     })
 
     this.app.mount(this.appElem)

app/javascript/application.scss

@@ -51,10 +51,6 @@ button[disabled] .enabled {
   @apply input input-bordered bg-white;
 }
 
-.base-input-slim {
-  @apply input input-bordered bg-white h-10;
-}
-
 .base-textarea {
   @apply textarea textarea-bordered bg-white rounded-3xl;
 }
@@ -101,6 +97,23 @@ button[disabled] .enabled {
   bottom: auto;
 }
 
+.tooltip-bottom-start:before {
+  transform: translateX(-31%);
+  top: var(--tooltip-offset);
+  left: 100%;
+  right: auto;
+  bottom: auto;
+}
+
+.tooltip-bottom-start:after {
+  transform: translateX(-25%);
+  border-color: transparent transparent var(--tooltip-color) transparent;
+  top: var(--tooltip-tail-offset);
+  left: 50%;
+  right: auto;
+  bottom: auto;
+}
+
 .autocomplete {
   background: white;
   z-index: 1000;
@@ -134,7 +147,3 @@ button[disabled] .enabled {
   outline-offset: 3px;
   outline-color: hsl(var(--bc) / 0.2);
 }
-
-select:required:invalid {
-  color: gray !important;
-}

app/javascript/draw.js

@@ -12,6 +12,10 @@ window.customElements.define('draw-signature', class extends HTMLElement {
 
     this.pad = new SignaturePad(this.canvas)
 
+    if (this.dataset.color) {
+      this.pad.penColor = this.dataset.color
+    }
+
     this.pad.addEventListener('endStroke', () => {
       this.updateSubmitButtonVisibility()
     })

app/javascript/elements/download_button.js

@@ -20,7 +20,8 @@ export default targetable(class extends HTMLElement {
     fetch(this.dataset.src).then(async (response) => {
       if (response.ok) {
         const urls = await response.json()
-        const isSafariIos = /iPhone|iPad|iPod/i.test(navigator.userAgent)
+        const isMobileSafariIos = 'ontouchstart' in window && navigator.maxTouchPoints > 0 && /AppleWebKit/i.test(navigator.userAgent)
+        const isSafariIos = isMobileSafariIos || /iPhone|iPad|iPod/i.test(navigator.userAgent)
 
         if (isSafariIos && urls.length > 1) {
           this.downloadSafariIos(urls)

app/javascript/elements/indeterminate_checkbox.js

@@ -0,0 +1,35 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    if (this.dataset.indeterminate === 'true') {
+      this.checkbox.indeterminate = true
+      this.checkbox.readOnly = true
+    }
+
+    this.checkbox.addEventListener('click', () => {
+      this.checkbox.setAttribute('name', this.dataset.name)
+
+      if (this.showIndeterminateEl) {
+        this.showIndeterminateEl.classList.add('hidden')
+      }
+
+      if (this.checkbox.readOnly) {
+        this.checkbox.checked = this.checkbox.readOnly = false
+      } else if (!this.checkbox.checked) {
+        if (this.showIndeterminateEl) {
+          this.showIndeterminateEl.classList.remove('hidden')
+        }
+
+        this.checkbox.setAttribute('name', this.dataset.indeterminateName)
+        this.checkbox.checked = this.checkbox.readOnly = this.checkbox.indeterminate = true
+      }
+    })
+  }
+
+  get checkbox () {
+    return this.querySelector('input[type="checkbox"]')
+  }
+
+  get showIndeterminateEl () {
+    return document.getElementById(this.dataset.showIndeterminateId)
+  }
+}

app/javascript/elements/masked_input.js

@@ -0,0 +1,18 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    const maskedToken = this.input.value
+
+    this.input.addEventListener('focus', () => {
+      this.input.value = this.dataset.token
+      this.input.select()
+    })
+
+    this.input.addEventListener('focusout', () => {
+      this.input.value = maskedToken
+    })
+  }
+
+  get input () {
+    return this.querySelector('input')
+  }
+}

app/javascript/elements/set_date_button.js

@@ -0,0 +1,20 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.button.addEventListener('click', () => {
+      this.fromInput.value = this.dataset.fromValue || ''
+      this.toInput.value = this.dataset.toValue || ''
+    })
+  }
+
+  get button () {
+    return this.querySelector('button')
+  }
+
+  get fromInput () {
+    return document.getElementById(this.dataset.fromId)
+  }
+
+  get toInput () {
+    return document.getElementById(this.dataset.toId)
+  }
+}

app/javascript/form.js

@@ -15,18 +15,22 @@ safeRegisterElement('submission-form', class extends HTMLElement {
     this.app = createApp(Form, {
       submitter: JSON.parse(this.dataset.submitter),
       inviteSubmitters: JSON.parse(this.dataset.inviteSubmitters),
+      optionalInviteSubmitters: JSON.parse(this.dataset.optionalInviteSubmitters),
+      schema: JSON.parse(this.dataset.schema),
       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',
+      language: this.dataset.language,
       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',
+      reuseSignature: this.dataset.reuseSignature !== 'false',
       withTypedSignature: this.dataset.withTypedSignature !== 'false',
       authenticityToken: document.querySelector('meta[name="csrf-token"]')?.content,
       rememberSignature: this.dataset.rememberSignature === 'true',

app/javascript/form.scss

@@ -31,10 +31,6 @@ button[disabled] .enabled {
   display: none;
 }
 
-select:required:invalid {
-  @apply text-gray-300;
-}
-
 .input-bordered {
   @apply border-base-content/20;
 }

app/javascript/submission_form/area.vue

@@ -39,7 +39,6 @@
       </template>
     </div>
     <div
-      v-if="isActive"
       ref="scrollToElem"
       class="absolute"
       :style="{ top: scrollPadding }"
@@ -75,7 +74,7 @@
           ID: {{ signature.uuid }}
         </div>
         <div>
-          {{ t('reason') }}: {{ values[field.preferences?.reason_field_uuid] || t('digitally_signed_by') }} {{ submitter.name }}
+          <span v-if="values[field.preferences?.reason_field_uuid]">{{ t('reason') }}: </span>{{ values[field.preferences?.reason_field_uuid] || t('digitally_signed_by') }} {{ submitter.name }}
           <template v-if="submitter.email">
             &lt;{{ submitter.email }}&gt;
           </template>
@@ -169,6 +168,7 @@
     <div
       v-else-if="field.type === 'cells'"
       class="w-full flex items-center"
+      :class="{ 'justify-end': field.preferences?.align === 'right' }"
     >
       <div
         v-for="(char, index) in modelValue"
@@ -191,13 +191,22 @@
         class="whitespace-pre-wrap text-gray-400"
         :class="{ 'w-full': field.preferences?.align }"
       >{{ field.name }}</span>
-      <span v-else-if="Array.isArray(modelValue)">
+      <span
+        v-else-if="Array.isArray(modelValue)"
+        :class="{ 'w-full': field.preferences?.align }"
+      >
         {{ modelValue.join(', ') }}
       </span>
-      <span v-else-if="field.type === 'date'">
+      <span
+        v-else-if="field.type === 'date'"
+        :class="{ 'w-full': field.preferences?.align }"
+      >
         {{ formattedDate }}
       </span>
-      <span v-else-if="field.type === 'number'">
+      <span
+        v-else-if="field.type === 'number'"
+        class="w-full"
+      >
         {{ formatNumber(modelValue, field.preferences?.format) }}
       </span>
       <span
@@ -210,7 +219,7 @@
 </template>
 
 <script>
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1 } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1, IconId } from '@tabler/icons-vue'
 
 export default {
   name: 'FieldArea',
@@ -312,7 +321,8 @@ export default {
         cells: this.t('cells'),
         stamp: this.t('stamp'),
         payment: this.t('payment'),
-        phone: this.t('phone')
+        phone: this.t('phone'),
+        verification: this.t('verify_id')
       }
     },
     alignClasses () {
@@ -341,7 +351,8 @@ export default {
         cells: IconColumns3,
         multiple: IconChecks,
         phone: IconPhoneCheck,
-        payment: IconCreditCard
+        payment: IconCreditCard,
+        verification: IconId
       }
     },
     image () {
@@ -405,7 +416,12 @@ export default {
       }
 
       if (this.field.preferences?.font_size) {
-        style.fontSize = this.field.preferences.font_size + 'pt'
+        style.fontSize = `clamp(4pt, 1.6vw, ${parseInt(this.field.preferences.font_size) * 1.23}pt)`
+        style.lineHeight = `clamp(6pt, 2.0vw, ${parseInt(this.field.preferences.font_size) * 1.23 + 3}pt)`
+      }
+
+      if (this.field.preferences?.color) {
+        style.color = this.field.preferences.color
       }
 
       return style
@@ -440,8 +456,18 @@ export default {
       }
     },
     formatNumber (number, format) {
+      if (!number && number !== 0) {
+        return ''
+      }
+
       if (format === 'comma') {
         return new Intl.NumberFormat('en-US').format(number)
+      } else if (format === 'usd') {
+        return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
+      } else if (format === 'gbp') {
+        return new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
+      } else if (format === 'eur') {
+        return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
       } else if (format === 'dot') {
         return new Intl.NumberFormat('de-DE').format(number)
       } else if (format === 'space') {

app/javascript/submission_form/areas.vue

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

app/javascript/submission_form/attachment_step.vue

@@ -49,7 +49,7 @@
       <MarkdownContent :string="field.description" />
     </div>
     <FileDropzone
-      :message="`${t('upload')} ${field.name || t('files')}${field.required ? '' : ` (${t('optional')})`}`"
+      :message="`${t('upload')} ${(field.title || field.name) || t('files')}${field.required ? '' : ` (${t('optional')})`}`"
       :submitter-slug="submitterSlug"
       :multiple="true"
       :dry-run="dryRun"

app/javascript/submission_form/completed.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    id="form_completed"
     class="mx-auto max-w-md flex flex-col"
     dir="auto"
   >
@@ -75,7 +76,7 @@
       </a>
       <a
         v-if="isDemo"
-        href="https://docuseal.co/sign_up"
+        href="https://docuseal.com/sign_up"
         class="white-button flex items-center space-x-1 w-full"
       >
         <IconLogin />
@@ -90,7 +91,7 @@
     >
       {{ t('powered_by') }}
       <a
-        href="https://www.docuseal.co/start"
+        href="https://www.docuseal.com/start"
         target="_blank"
         class="underline"
       >DocuSeal</a> - {{ t('open_source_documents_software') }}
@@ -214,7 +215,8 @@ export default {
       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)
+          const isMobileSafariIos = 'ontouchstart' in window && navigator.maxTouchPoints > 0 && /AppleWebKit/i.test(navigator.userAgent)
+          const isSafariIos = isMobileSafariIos || /iPhone|iPad|iPod/i.test(navigator.userAgent)
 
           if (isSafariIos && urls.length > 1) {
             this.downloadSafariIos(urls)
@@ -222,7 +224,7 @@ export default {
             this.downloadUrls(urls)
           }
         } else {
-          alert('Failed to download files')
+          alert(this.t('failed_to_download_files'))
         }
       })
     },

app/javascript/submission_form/date_step.vue

@@ -1,22 +1,28 @@
 <template>
   <div dir="auto">
     <div
-      class="flex justify-between items-center w-full"
+      class="flex justify-between items-end w-full mb-3.5 sm:mb-4"
       :class="{ 'mb-2': !field.description }"
     >
       <label
+        v-if="showFieldNames"
         :for="field.uuid"
-        class="label text-2xl"
+        class="label text-xl sm:text-2xl py-0"
       >
         <MarkdownContent
           v-if="field.title"
           :string="field.title"
         />
         <template v-else>
-          {{ field.name && showFieldNames ? field.name : t('date') }}
-          <template v-if="!field.required">
+          {{ field.name || t('date') }}
+        </template>
+        <template v-if="!field.required">
+          <span
+            class="ml-1"
+            :class="{ 'hidden sm:inline': (field.title || field.name || t('date') ).length > 10 }"
+          >
             ({{ t('optional') }})
-          </template>
+          </span>
         </template>
       </label>
       <button
@@ -37,6 +43,7 @@
     <AppearsOn :field="field" />
     <div class="text-center">
       <input
+        :id="field.uuid"
         ref="input"
         v-model="value"
         class="base-input !text-2xl text-center w-full"
@@ -45,6 +52,7 @@
         :name="`values[${field.uuid}]`"
         @keydown.enter="onEnter"
         @focus="$emit('focus')"
+        @paste="onPaste"
       >
     </div>
   </div>
@@ -98,6 +106,25 @@ export default {
         this.$emit('submit')
       }
     },
+    onPaste (e) {
+      e.preventDefault()
+
+      let pasteData = e.clipboardData.getData('text').trim()
+
+      if (pasteData.match(/^\d{2}\.\d{2}\.\d{4}$/)) {
+        pasteData = pasteData.split('.').reverse().join('-')
+      }
+
+      const parsedDate = new Date(pasteData)
+
+      if (!isNaN(parsedDate)) {
+        const inputEl = this.$refs.input
+
+        inputEl.valueAsDate = new Date(parsedDate.getTime() - parsedDate.getTimezoneOffset() * 60000)
+
+        inputEl.dispatchEvent(new Event('input', { bubbles: true }))
+      }
+    },
     setCurrentDate () {
       const inputEl = this.$refs.input
 

app/javascript/submission_form/dropzone.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    id="dropzone"
     class="flex h-32 w-full"
     @dragover.prevent
     @drop.prevent="onDropFiles"
@@ -127,7 +128,7 @@ export default {
               }
             })
           } else {
-            if (file.type === 'image/bmp') {
+            if (file.type === 'image/bmp' || file.type === 'image/vnd.microsoft.icon') {
               file = await this.convertBmpToPng(file)
             }
 

app/javascript/submission_form/form.vue

@@ -11,19 +11,59 @@
     :with-label="!isAnonymousChecboxes && showFieldNames"
     :current-step="currentStepFields"
     :scroll-padding="scrollPadding"
-    @focus-step="[saveStep(), currentField.type !== 'checkbox' ? isFormVisible = true : '', goToStep($event, false, true)]"
+    @focus-step="[saveStep(), goToStep($event, false, true), currentField.type !== 'checkbox' ? isFormVisible = true : '']"
   />
   <FieldAreas
     :steps="readonlyConditionalFields.map((e) => [e])"
-    :values="readonlyConditionalFields.reduce((acc, f) => { acc[f.uuid] = f.default_value; return acc }, {})"
+    :values="readonlyConditionalFieldValues"
     :submitter="submitter"
+    :attachments-index="attachmentsIndex"
     :submittable="false"
   />
   <FormulaFieldAreas
     v-if="formulaFields.length"
     :fields="formulaFields"
+    :readonly-values="readonlyConditionalFieldValues"
     :values="values"
   />
+  <Teleport
+    v-if="completeButtonToRef"
+    :to="completeButtonToRef"
+  >
+    <span
+      v-if="(emptyValueRequiredStep && ((stepFields.length - 1) !== currentStep || currentStepFields !== emptyValueRequiredStep)) || isCompleted"
+      class="tooltip-left"
+      :class="{ tooltip: !isCompleted }"
+      :data-tip="t('fill_all_required_fields_to_complete')"
+    >
+      <button
+        class="btn btn-sm btn-neutral text-white px-4 w-full flex justify-center btn-disabled pointer-events-auto"
+        @click="[isFormVisible = true, !isCompleted && goToStep(stepFields.indexOf(emptyValueRequiredStep), true, false)]"
+      >
+        {{ t('complete') }}
+      </button>
+    </span>
+    <button
+      v-else
+      id="complete_form_button"
+      class="btn btn-sm btn-neutral text-white px-4 w-full flex justify-center"
+      form="steps_form"
+      type="submit"
+      name="completed"
+      value="true"
+      :disabled="isSubmittingComplete"
+    >
+      <span class="flex items-center">
+        <IconInnerShadowTop
+          v-if="isSubmittingComplete"
+          class="mr-1 animate-spin w-5 h-5"
+        />
+        <span>
+          {{ t('complete') }}
+        </span>
+      </span>
+    </button>
+  </Teleport>
   <button
     v-if="!isFormVisible"
     id="expand_form_button"
@@ -74,6 +114,7 @@
     >
       <form
         v-if="!isCompleted && !isInvite"
+        id="steps_form"
         ref="form"
         :action="submitPath"
         method="post"
@@ -115,7 +156,7 @@
             v-model="values[currentField.uuid]"
             :show-field-names="showFieldNames"
             :field="currentField"
-            @submit="submitStep"
+            @submit="!isSubmitting && submitStep()"
             @focus="scrollIntoField(currentField)"
           />
           <div v-else-if="currentField.type === 'select'">
@@ -123,7 +164,7 @@
               v-if="showFieldNames && (currentField.name || currentField.title)"
               :for="currentField.uuid"
               dir="auto"
-              class="label text-2xl"
+              class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5"
               :class="{ 'mb-2': !currentField.description }"
             >
               <MarkdownContent
@@ -132,7 +173,11 @@
               />
               <template v-else>
                 {{ currentField.name }}
-                <template v-if="!currentField.required">({{ t('optional') }})</template>
+              </template>
+              <template v-if="!currentField.required">
+                <span :class="{ 'hidden sm:inline': (currentField.title || currentField.name).length > 20 }">
+                  ({{ t('optional') }})
+                </span>
               </template>
             </label>
             <div
@@ -152,6 +197,7 @@
               dir="auto"
               :required="currentField.required"
               class="select base-input !text-2xl w-full text-center font-normal"
+              :class="{ 'text-gray-300': !values[currentField.uuid] }"
               :name="`values[${currentField.uuid}]`"
               @change="values[currentField.uuid] = $event.target.value"
               @focus="scrollIntoField(currentField)"
@@ -159,6 +205,7 @@
               <option
                 value=""
                 :selected="!values[currentField.uuid]"
+                class="text-gray-300"
               >
                 {{ t('select_your_option') }}
               </option>
@@ -167,6 +214,7 @@
                 :key="option.uuid"
                 :selected="values[currentField.uuid] == option.value"
                 :value="option.value"
+                class="text-base-content"
               >
                 {{ option.value }}
               </option>
@@ -177,7 +225,7 @@
               v-if="showFieldNames && (currentField.name || currentField.title)"
               :for="currentField.uuid"
               dir="auto"
-              class="label text-2xl"
+              class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5"
               :class="{ 'mb-2': !currentField.description }"
             >
               <MarkdownContent
@@ -186,7 +234,11 @@
               />
               <template v-else>
                 {{ currentField.name }}
-                <template v-if="!currentField.required">({{ t('optional') }})</template>
+              </template>
+              <template v-if="!currentField.required">
+                <span :class="{ 'hidden sm:inline': (currentField.title || currentField.name).length > 20 }">
+                  ({{ t('optional') }})
+                </span>
               </template>
             </label>
             <div
@@ -392,7 +444,7 @@
             :default-value="submitter.phone"
             :submitter-slug="submitterSlug"
             @focus="scrollIntoField(currentField)"
-            @submit="submitStep"
+            @submit="!isSubmitting && submitStep()"
           />
           <PaymentStep
             v-else-if="currentField.type === 'payment'"
@@ -404,12 +456,25 @@
             :values="values"
             @attached="attachments.push($event)"
             @focus="scrollIntoField(currentField)"
-            @submit="submitStep"
+            @submit="!isSubmitting && submitStep()"
+          />
+          <VerificationStep
+            v-else-if="currentField.type === 'verification'"
+            ref="currentStep"
+            :key="currentField.uuid"
+            :locale="language?.toLowerCase() || browserLanguage"
+            :submitter="submitter"
+            :empty-value-required-step="emptyValueRequiredStep"
+            :field="currentField"
+            :submitter-slug="submitterSlug"
+            :values="values"
+            @focus="scrollIntoField(currentField)"
+            @submit="!isSubmitting && submitStep()"
           />
         </div>
         <div
-          v-if="currentField.type !== 'payment' || submittedValues[currentField.uuid]"
-          :class="currentField.type === 'signature' ? 'mt-2' : 'mt-6 md:mt-8'"
+          v-if="(currentField.type !== 'payment' && currentField.type !== 'verification') || submittedValues[currentField.uuid]"
+          :class="currentField.type === 'signature' ? 'mt-2' : 'mt-4 md:mt-6'"
         >
           <button
             id="submit_form_button"
@@ -442,6 +507,7 @@
       <InviteForm
         v-else-if="isInvite"
         :submitters="inviteSubmitters"
+        :optional-submitters="optionalInviteSubmitters"
         :submitter-slug="submitterSlug"
         :authenticity-token="authenticityToken"
         :url="baseUrl + submitPath + '/invite'"
@@ -464,9 +530,9 @@
       />
       <div
         v-if="stepFields.length < 80"
-        class="flex justify-center"
+        class="flex justify-center mt-3 sm:mt-4 mb-0 sm:mb-1"
       >
-        <div class="flex items-center mt-4 mb-1 flex-wrap">
+        <div class="flex items-center flex-wrap">
           <a
             v-for="(step, index) in stepFields"
             :key="step[0].uuid"
@@ -495,6 +561,7 @@ import AttachmentStep from './attachment_step'
 import MultiSelectStep from './multi_select_step'
 import PhoneStep from './phone_step'
 import PaymentStep from './payment_step'
+import VerificationStep from './verification_step'
 import TextStep from './text_step'
 import NumberStep from './number_step'
 import DateStep from './date_step'
@@ -537,6 +604,7 @@ export default {
     IconWritingSign,
     AttachmentStep,
     InitialsStep,
+    VerificationStep,
     InviteForm,
     MultiSelectStep,
     IconInnerShadowTop,
@@ -569,6 +637,11 @@ export default {
       required: false,
       default: () => []
     },
+    optionalInviteSubmitters: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     withSignatureId: {
       type: Boolean,
       required: false,
@@ -579,6 +652,11 @@ export default {
       required: false,
       default: '-80px'
     },
+    orderAsOnPage: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     requireSigningReason: {
       type: Boolean,
       required: false,
@@ -589,6 +667,16 @@ export default {
       required: false,
       default: false
     },
+    completeButtonToRef: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    schema: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     attachments: {
       type: Array,
       required: false,
@@ -769,13 +857,45 @@ export default {
       phoneVerifiedValues: {},
       orientation: screen?.orientation?.type,
       isSubmitting: false,
+      isSubmittingComplete: false,
       submittedValues: {},
       recalculateButtonDisabledKey: ''
     }
   },
   computed: {
     isMobile () {
-      return /android|iphone|ipad/i.test(navigator.userAgent)
+      const isMobileSafariIos = 'ontouchstart' in window && navigator.maxTouchPoints > 0 && /AppleWebKit/i.test(navigator.userAgent)
+
+      return isMobileSafariIos || /android|iphone|ipad/i.test(navigator.userAgent)
+    },
+    readonlyConditionalFieldValues () {
+      return this.readonlyConditionalFields.reduce((acc, f) => {
+        acc[f.uuid] = (this.values[f.uuid] || f.default_value)
+
+        return acc
+      }, {})
+    },
+    attachmentConditionsIndex () {
+      return this.schema.reduce((acc, item) => {
+        if (item.conditions?.length) {
+          if (item.conditions.every((c) => this.fieldsUuidIndex[c.field_uuid])) {
+            acc[item.attachment_uuid] = this.checkFieldConditions(item)
+          } else {
+            acc[item.attachment_uuid] = true
+          }
+        } else {
+          acc[item.attachment_uuid] = true
+        }
+
+        return acc
+      }, {})
+    },
+    emptyValueRequiredStep () {
+      return this.stepFields.find((fields, index) => {
+        return fields.some((f) => {
+          return f.required && isEmpty(this.values[f.uuid])
+        })
+      })
     },
     submitButtonText () {
       if (this.alwaysMinimize) {
@@ -850,13 +970,61 @@ export default {
       return this.currentStepFields[0]
     },
     readonlyConditionalFields () {
-      return this.fields.filter((f) => f.readonly && f.conditions?.length && this.checkFieldConditions(f))
+      return this.fields.filter((f) => f.readonly && f.conditions?.length && this.checkFieldConditions(f) && this.checkFieldDocumentsConditions(f))
     },
     stepFields () {
-      return this.fields.filter((f) => !f.readonly).reduce((acc, f) => {
+      const verificationFields = []
+
+      const sortedFields = this.fields.reduce((acc, f) => {
+        if (f.type === 'verification') {
+          verificationFields.push(f)
+        } else if (!f.readonly) {
+          acc.push(f)
+        }
+
+        return acc
+      }, [])
+
+      if (this.orderAsOnPage) {
+        const fieldAreasIndex = {}
+        const attachmentUuids = Object.keys(this.attachmentConditionsIndex)
+
+        const sortArea = (aArea, bArea) => {
+          if (aArea.attachment_uuid === bArea.attachment_uuid) {
+            if (aArea.page === bArea.page) {
+              if (Math.abs(aArea.y - bArea.y) < 0.01) {
+                if (aArea.x === bArea.x) {
+                  return 0
+                } else {
+                  return aArea.x - bArea.x
+                }
+              } else {
+                return aArea.y - bArea.y
+              }
+            } else {
+              return aArea.page - bArea.page
+            }
+          } else {
+            return attachmentUuids.indexOf(aArea.attachment_uuid) - attachmentUuids.indexOf(bArea.attachment_uuid)
+          }
+        }
+
+        sortedFields.sort((aField, bField) => {
+          const aArea = (fieldAreasIndex[aField.uuid] ||= [...(aField.areas || [])].sort(sortArea)[0])
+          const bArea = (fieldAreasIndex[bField.uuid] ||= [...(bField.areas || [])].sort(sortArea)[0])
+
+          return sortArea(aArea, bArea)
+        })
+      }
+
+      if (verificationFields.length) {
+        sortedFields.push(verificationFields.pop())
+      }
+
+      return sortedFields.reduce((acc, f) => {
         const prevStep = acc[acc.length - 1]
 
-        if (this.checkFieldConditions(f)) {
+        if (this.checkFieldConditions(f) && this.checkFieldDocumentsConditions(f)) {
           if (f.type === 'checkbox' && Array.isArray(prevStep) && prevStep[0].type === 'checkbox' && !f.description) {
             prevStep.push(f)
           } else {
@@ -889,6 +1057,23 @@ export default {
       if (isEmpty(value) && this.currentStep > 0) {
         this.currentStep -= 1
       }
+    },
+    attachmentConditionsIndex: {
+      deep: true,
+      immediate: true,
+      handler (value) {
+        this.$nextTick(() => {
+          const root = this.$root.$el.parentNode.getRootNode()
+
+          for (const key in value) {
+            const doc = root.querySelector(`[id="document-${key}"`)
+
+            if (doc) {
+              doc.classList.toggle('hidden', !value[key])
+            }
+          }
+        })
+      }
     }
   },
   beforeUnmount () {
@@ -897,7 +1082,7 @@ export default {
   mounted () {
     this.submittedValues = JSON.parse(JSON.stringify(this.values))
 
-    screen?.orientation.addEventListener('change', this.onOrientationChange)
+    screen?.orientation?.addEventListener('change', this.onOrientationChange)
 
     this.fields.forEach((field) => {
       if (field.default_value && !field.readonly) {
@@ -936,7 +1121,9 @@ export default {
       this.minimizeForm()
     }
 
-    if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
+    const isMobile = 'ontouchstart' in window && navigator.maxTouchPoints > 0 && /AppleWebKit|android/i.test(navigator.userAgent)
+
+    if (isMobile || /iPhone|iPad|iPod/i.test(navigator.userAgent)) {
       this.$nextTick(() => {
         const root = this.$root.$el.parentNode.getRootNode()
         const scrollbox = root.getElementById('scrollbox')
@@ -970,33 +1157,57 @@ export default {
     onOrientationChange (event) {
       this.orientation = event.target.type
     },
+    checkFieldDocumentsConditions (field) {
+      if (field.areas?.length) {
+        return field.areas.some((area) => {
+          return this.attachmentConditionsIndex[area.attachment_uuid]
+        })
+      } else {
+        return true
+      }
+    },
     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) && field) {
-            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) && field) {
-            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)))
+        const result = field.conditions.reduce((acc, cond) => {
+          if (cond.operation === 'or') {
+            acc.push(acc.pop() || this.checkFieldCondition(cond))
           } else {
-            return acc
+            acc.push(this.checkFieldCondition(cond))
           }
-        }, true)
+
+          return acc
+        }, [])
+
+        return !result.includes(false)
+      } else {
+        return true
+      }
+    },
+    checkFieldCondition (condition) {
+      const field = this.fieldsUuidIndex[condition.field_uuid]
+
+      if (['not_empty', 'checked', 'equal', 'contains'].includes(condition.action) && field && !this.checkFieldConditions(field)) {
+        return false
+      }
+
+      if (['empty', 'unchecked'].includes(condition.action)) {
+        return isEmpty(this.values[condition.field_uuid])
+      } else if (['not_empty', 'checked'].includes(condition.action)) {
+        return !isEmpty(this.values[condition.field_uuid])
+      } else if (['equal', 'contains'].includes(condition.action) && field) {
+        if (field.options) {
+          const option = field.options.find((o) => o.uuid === condition.value)
+          const values = [this.values[condition.field_uuid]].flat()
+
+          return values.includes(this.optionValue(option, field.options.indexOf(option)))
+        } else {
+          return [this.values[condition.field_uuid]].flat().includes(condition.value)
+        }
+      } else if (['not_equal', 'does_not_contain'].includes(condition.action) && field) {
+        const option = field.options.find((o) => o.uuid === condition.value)
+        const values = [this.values[condition.field_uuid]].flat()
+
+        return !values.includes(this.optionValue(option, field.options.indexOf(option)))
       } else {
         return true
       }
@@ -1104,6 +1315,10 @@ export default {
       const currentFieldUuids = this.currentStepFields.map((f) => f.uuid)
       const currentFieldType = this.currentField.type
 
+      if (!formData && !this.$refs.form.checkValidity()) {
+        return
+      }
+
       if (this.dryRun) {
         currentFieldUuids.forEach((fieldUuid) => {
           this.submittedValues[fieldUuid] = this.values[fieldUuid]
@@ -1139,16 +1354,24 @@ export default {
     scrollIntoArea (area) {
       return this.$refs.areas.scrollIntoArea(area)
     },
-    async submitStep () {
+    async submitStep (e) {
       this.isSubmitting = true
 
-      const stepPromise = ['signature', 'phone', 'initials', 'payment'].includes(this.currentField.type)
+      const forceComplete = e?.submitter?.getAttribute('name') === 'completed'
+
+      if (forceComplete) {
+        this.isSubmittingComplete = true
+      }
+
+      const submitStep = this.currentStep
+
+      const stepPromise = ['signature', 'phone', 'initials', 'payment', 'verification'].includes(this.currentField.type)
         ? this.$refs.currentStep.submit
         : () => Promise.resolve({})
 
       stepPromise().then(async () => {
         const emptyRequiredField = this.stepFields.find((fields, index) => {
-          if (index >= this.currentStep) {
+          if (forceComplete ? index === submitStep : index >= submitStep) {
             return false
           }
 
@@ -1158,9 +1381,9 @@ export default {
         })
 
         const formData = new FormData(this.$refs.form)
-        const isLastStep = this.currentStep === this.stepFields.length - 1
+        const isLastStep = (submitStep === this.stepFields.length - 1) || forceComplete
 
-        if (isLastStep && !emptyRequiredField && !this.inviteSubmitters.length) {
+        if (isLastStep && !emptyRequiredField && !this.inviteSubmitters.length && !this.optionalInviteSubmitters.length) {
           formData.append('completed', 'true')
         }
 
@@ -1176,18 +1399,18 @@ export default {
           if (response.status === 422 || response.status === 500) {
             const data = await response.json()
 
-            const i18nError = data.error ? this.t(data.error.replace(/\s+/g, '_').toLowerCase()) : ''
+            if (data.error) {
+              const i18nKey = data.error.replace(/\s+/g, '_').toLowerCase()
 
-            alert(i18nError !== data.error ? i18nError : (data.error || this.t('value_is_invalid')))
+              alert(this.t(i18nKey) !== i18nKey ? this.t(i18nKey) : data.error)
+            } else {
+              alert(this.t('value_is_invalid'))
+            }
 
             return Promise.reject(new Error(data.error))
           }
 
-          if (isLastStep) {
-            this.isSecondWalkthrough = true
-          }
-
-          const nextStep = (isLastStep && emptyRequiredField) || this.stepFields[this.currentStep + 1]
+          const nextStep = (isLastStep && emptyRequiredField) || (forceComplete ? null : this.stepFields[submitStep + 1])
 
           if (nextStep) {
             if (this.alwaysMinimize) {
@@ -1199,7 +1422,7 @@ export default {
             if (emptyRequiredField === nextStep) {
               this.showFillAllRequiredFields = true
             }
-          } else if (this.inviteSubmitters.length) {
+          } else if (this.inviteSubmitters.length || this.optionalInviteSubmitters.length) {
             this.isInvite = true
           } else {
             this.performComplete(response)
@@ -1208,15 +1431,17 @@ export default {
           console.error(error)
         }).finally(() => {
           this.isSubmitting = false
+          this.isSubmittingComplete = false
         })
       }).catch(error => {
         if (error?.message === 'Image too small') {
-          alert('Signature is too small - please redraw.')
+          alert(this.t('signature_is_too_small_please_redraw'))
         } else {
           console.log(error)
         }
       }).finally(() => {
         this.isSubmitting = false
+        this.isSubmittingComplete = false
       })
     },
     minimizeForm () {

app/javascript/submission_form/formula_areas.vue

@@ -38,6 +38,11 @@ export default {
       required: false,
       default: () => []
     },
+    readonlyValues: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
     values: {
       type: Object,
       required: false,
@@ -87,7 +92,7 @@ export default {
     },
     calculateFormula (field) {
       const transformedFormula = field.preferences.formula.replace(/{{(.*?)}}/g, (match, uuid) => {
-        return this.values[uuid] || 0.0
+        return this.readonlyValues[uuid] || this.values[uuid] || 0.0
       })
 
       return this.math.evaluate(transformedFormula.toLowerCase())

app/javascript/submission_form/i18n.js

@@ -1,5 +1,9 @@
 const en = {
+  complete_all_required_fields_to_proceed_with_identity_verification: 'Complete all required fields to proceed with identity verification.',
+  verify_id: 'Verify ID',
+  identity_verification: 'Identity verification',
   complete: 'Complete',
+  fill_all_required_fields_to_complete: 'Fill all required fields to complete',
   sign_and_complete: 'Sign and Complete',
   text: 'Text',
   by_clicking_you_agree_to_the: 'By clicking "{button}", you agree to the',
@@ -66,7 +70,7 @@ const en = {
   documents_have_been_signed: 'Documents have been signed!',
   create_a_free_account: 'Create a Free Account',
   powered_by: 'Powered by',
-  please_check_the_box_to_continue: 'Please check the box to continue',
+  please_check_the_box_to_continue: 'Please check the box to continue.',
   open_source_documents_software: 'open source documents software',
   verified_phone_number: 'Verify Phone Number',
   use_international_format: 'Use international format: +1xxx',
@@ -88,11 +92,17 @@ const en = {
   pay_with_strip: 'Pay with Stripe',
   reupload: 'Reupload',
   upload: 'Upload',
-  files: 'Files'
+  files: 'Files',
+  signature_is_too_small_please_redraw: 'Signature is too small. Please redraw.',
+  wait_countdown_seconds: 'Wait {countdown} seconds'
 }
 
 const es = {
+  complete_all_required_fields_to_proceed_with_identity_verification: 'Complete todos los campos requeridos para continuar con la verificación de identidad.',
+  verify_id: 'Verificar ID',
+  identity_verification: 'Verificación de identidad',
   complete: 'Completar',
+  fill_all_required_fields_to_complete: 'Complete todos los campos requeridos para finalizar',
   sign_and_complete: 'Firmar y Completar',
   invite: 'Invitar',
   email: 'Correo electrónico',
@@ -158,7 +168,7 @@ const es = {
   documents_have_been_signed: '¡Los documentos han sido firmados!',
   create_a_free_account: 'Crear una Cuenta Gratuita',
   powered_by: 'Desarrollado por',
-  please_check_the_box_to_continue: 'Por favor marque la casilla para continuar',
+  please_check_the_box_to_continue: 'Por favor marque la casilla para continuar.',
   open_source_documents_software: 'software de documentos de código abierto',
   verified_phone_number: 'Verificar número de teléfono',
   use_international_format: 'Usar formato internacional: +1xxx',
@@ -180,11 +190,17 @@ const es = {
   pay_with_strip: 'Pagar con Stripe',
   reupload: 'Volver a subir',
   upload: 'Subir',
-  files: 'Archivos'
+  files: 'Archivos',
+  signature_is_too_small_please_redraw: 'La firma es demasiado pequeña. Por favor, dibújala de nuevo.',
+  wait_countdown_seconds: 'Espera {countdown} segundos'
 }
 
 const it = {
+  complete_all_required_fields_to_proceed_with_identity_verification: "Compila tutti i campi obbligatori per procedere con la verifica dell'identità.",
+  verify_id: 'Verifica ID',
+  identity_verification: "Verifica dell'identità",
   complete: 'Completa',
+  fill_all_required_fields_to_complete: 'Compila tutti i campi obbligatori per completare',
   sign_and_complete: 'Firma e Completa',
   invite: 'Invita',
   email: 'Email',
@@ -216,7 +232,7 @@ const it = {
   pay: 'Pagamento',
   file: 'File',
   select: 'Seleziona',
-  checkbox: 'Casella di controllo',
+  checkbox: 'Checkbox',
   multiple: 'Multiplo',
   radio: 'Radio',
   cells: 'Celle',
@@ -250,7 +266,7 @@ const it = {
   documents_have_been_signed: 'I documenti sono stati firmati!',
   create_a_free_account: 'Crea un Account Gratuito',
   powered_by: 'Desarrollado por',
-  please_check_the_box_to_continue: 'Si prega di spuntare la casella per continuare',
+  please_check_the_box_to_continue: 'Si prega di spuntare la casella per continuare.',
   open_source_documents_software: 'software di documenti open source',
   verified_phone_number: 'Verifica numero di telefono',
   use_international_format: 'Usa formato internazionale: +1xxx',
@@ -272,11 +288,17 @@ const it = {
   pay_with_strip: 'Paga con Stripe',
   reupload: 'Ricarica',
   upload: 'Carica',
-  files: 'File'
+  files: 'File',
+  signature_is_too_small_please_redraw: 'La firma è troppo piccola. Ridisegnala per favore.',
+  wait_countdown_seconds: 'Attendi {countdown} secondi'
 }
 
 const de = {
+  complete_all_required_fields_to_proceed_with_identity_verification: 'Vervollständigen Sie alle erforderlichen Felder, um mit der Identitätsverifizierung fortzufahren.',
+  verify_id: 'ID überprüfen',
+  identity_verification: 'Identitätsüberprüfung',
   complete: 'Abschließen',
+  fill_all_required_fields_to_complete: 'Alle erforderlichen Felder ausfüllen, um abzuschließen',
   sign_and_complete: 'Signieren und Abschließen',
   invite: 'Einladen',
   email: 'E-Mail',
@@ -342,7 +364,7 @@ const de = {
   documents_have_been_signed: 'Dokumente wurden unterschrieben!',
   create_a_free_account: 'Kostenloses Konto erstellen',
   powered_by: 'Bereitgestellt von',
-  please_check_the_box_to_continue: 'Bitte setzen Sie das Häkchen, um fortzufahren',
+  please_check_the_box_to_continue: 'Bitte setzen Sie das Häkchen, um fortzufahren.',
   open_source_documents_software: 'Open-Source-Dokumentensoftware',
   verified_phone_number: 'Telefonnummer überprüfen',
   use_international_format: 'Internationales Format verwenden: +1xxx',
@@ -364,11 +386,17 @@ const de = {
   pay_with_strip: 'Mit Stripe bezahlen',
   reupload: 'Erneut hochladen',
   upload: 'Hochladen',
-  files: 'Dateien'
+  files: 'Dateien',
+  signature_is_too_small_please_redraw: 'Die Unterschrift ist zu klein. Bitte erneut zeichnen.',
+  wait_countdown_seconds: 'Warte {countdown} Sekunden'
 }
 
 const fr = {
+  complete_all_required_fields_to_proceed_with_identity_verification: "Veuillez remplir tous les champs obligatoires pour continuer la vérification de l'identité.",
+  verif_id: "Vérification de l'ID",
+  verif_identite: "Vérification de l'identité",
   complete: 'Terminer',
+  fill_all_required_fields_to_complete: 'Veuillez remplir tous les champs obligatoires pour compléter',
   sign_and_complete: 'Signer et Terminer',
   invite: 'Inviter',
   email: 'Courriel',
@@ -434,7 +462,7 @@ const fr = {
   documents_have_been_signed: 'Les documents ont été signés!',
   create_a_free_account: 'Créer un Compte Gratuit',
   powered_by: 'Propulsé par',
-  please_check_the_box_to_continue: 'Veuillez cocher la case pour continuer',
+  please_check_the_box_to_continue: 'Veuillez cocher la case pour continuer.',
   open_source_documents_software: 'logiciel de documents open source',
   verified_phone_number: 'Vérifier le numéro de téléphone',
   use_international_format: 'Utiliser le format international : +1xxx',
@@ -456,11 +484,17 @@ const fr = {
   pay_with_strip: 'Paiement avec Stripe',
   reupload: 'Recharger',
   upload: 'Télécharger',
-  files: 'Fichiers'
+  files: 'Fichiers',
+  signature_is_too_small_please_redraw: 'La signature est trop petite. Veuillez la redessiner.',
+  wait_countdown_seconds: 'Attendez {countdown} secondes'
 }
 
 const pl = {
+  complete_all_required_fields_to_proceed_with_identity_verification: 'Uzupełnij wszystkie wymagane pola, aby kontynuować weryfikację tożsamości.',
+  verify_id: 'Zweryfikuj ID',
+  identity_verification: 'Weryfikacja tożsamości',
   complete: 'Zakończ',
+  fill_all_required_fields_to_complete: 'Uzupełnij wszystkie wymagane pola, aby zakończyć',
   sign_and_complete: 'Podpisz i zakończ',
   invite: 'Zaproś',
   email: 'E-mail',
@@ -526,7 +560,7 @@ const pl = {
   documents_have_been_signed: 'Dokumenty zostały podpisane!',
   create_a_free_account: 'Utwórz darmowe konto',
   powered_by: 'Napędzany przez',
-  please_check_the_box_to_continue: 'Proszę zaznaczyć pole, aby kontynuować',
+  please_check_the_box_to_continue: 'Proszę zaznaczyć pole, aby kontynuować.',
   open_source_documents_software: 'oprogramowanie do dokumentów open source',
   verified_phone_number: 'Zweryfikuj numer telefonu',
   use_international_format: 'Użyj międzynarodowego formatu: +1xxx',
@@ -548,11 +582,16 @@ const pl = {
   pay_with_strip: 'Płatność za pomocą Stripe',
   reupload: 'Ponowne przesłanie',
   upload: 'Przesyłanie',
-  files: 'Pliki'
+  files: 'Pliki',
+  signature_is_too_small_please_redraw: 'Podpis jest zbyt mały. Proszę narysować go ponownie.'
 }
 
 const uk = {
+  complete_all_required_fields_to_proceed_with_identity_verification: "Заповніть всі обов'язкові поля, щоб продовжити перевірку особи.",
+  verify_id: 'Підтвердження ідентичності',
+  identity_verification: 'Ідентифікація особи',
   complete: 'Завершити',
+  fill_all_required_fields_to_complete: "Заповніть всі обов'язкові поля для завершення",
   sign_and_complete: 'Підписати і завершити',
   invite: 'Запросити',
   email: 'Електронна пошта',
@@ -618,7 +657,7 @@ const uk = {
   documents_have_been_signed: 'Документи були підписані!',
   create_a_free_account: 'Створити безкоштовний обліковий запис',
   powered_by: 'Працює на базі',
-  please_check_the_box_to_continue: 'Будь ласка, позначте прапорець, щоб продовжити',
+  please_check_the_box_to_continue: 'Будь ласка, позначте прапорець, щоб продовжити.',
   open_source_documents_software: 'відкритий програмний засіб для документів',
   verified_phone_number: 'Підтвердіть номер телефону',
   use_international_format: 'Використовуйте міжнародний формат: +1xxx',
@@ -640,11 +679,17 @@ const uk = {
   pay_with_strip: 'Сплатити за допомогою Stripe',
   reupload: 'Перезавантажити',
   upload: 'Завантажити',
-  files: 'Файли'
+  files: 'Файли',
+  signature_is_too_small_please_redraw: 'Підпис занадто малий. Будь ласка, перемалюйте його.',
+  wait_countdown_seconds: 'Зачекайте {countdown} секунд'
 }
 
 const cs = {
+  complete_all_required_fields_to_proceed_with_identity_verification: 'Vyplňte všechna povinná pole, abyste mohli pokračovat v ověření identity.',
+  verify_id: 'Ověřit ID',
+  identity_verification: 'Ověření identity',
   complete: 'Dokončit',
+  fill_all_required_fields_to_complete: 'Please complete all mandatory fields',
   sign_and_complete: 'Podepsat a dokončit',
   invite: 'Pozvat',
   email: 'E-mail',
@@ -710,7 +755,7 @@ const cs = {
   documents_have_been_signed: 'Dokumenty byly podepsány!',
   create_a_free_account: 'Vytvořit bezplatný účet',
   powered_by: 'Poháněno',
-  please_check_the_box_to_continue: 'Prosím, zaškrtněte políčko pro pokračování',
+  please_check_the_box_to_continue: 'Prosím, zaškrtněte políčko pro pokračování.',
   open_source_documents_software: 'open source software pro dokumenty',
   verified_phone_number: 'Ověřte telefonní číslo',
   use_international_format: 'Použijte mezinárodní formát: +1xxx',
@@ -732,11 +777,17 @@ const cs = {
   pay_with_strip: 'Zaplacení přes Stripe',
   reupload: 'Znovu nahrát',
   upload: 'Nahrát',
-  files: 'Soubory'
+  files: 'Soubory',
+  signature_is_too_small_please_redraw: 'Podpis je příliš malý. Prosím, překreslete ho.',
+  wait_countdown_seconds: 'Počkejte {countdown} sekund'
 }
 
 const pt = {
+  complete_all_required_fields_to_proceed_with_identity_verification: 'Preencha todos os campos obrigatórios para prosseguir com a verificação de identidade.',
+  verify_id: 'Verificar ID',
+  identity_verification: 'Verificação de identidade',
   complete: 'Completar',
+  fill_all_required_fields_to_complete: 'Preencher todos os campos obrigatórios para concluir',
   sign_and_complete: 'Assinar e Completar',
   invite: 'Convidar',
   email: 'E-mail',
@@ -802,7 +853,7 @@ const pt = {
   documents_have_been_signed: 'Os documentos foram assinados!',
   create_a_free_account: 'Criar uma Conta Gratuita',
   powered_by: 'Desenvolvido por',
-  please_check_the_box_to_continue: 'Por favor, marque a caixa para continuar',
+  please_check_the_box_to_continue: 'Por favor, marque a caixa para continuar.',
   open_source_documents_software: 'software de documentos de código aberto',
   verified_phone_number: 'Verificar Número de Telefone',
   use_international_format: 'Use formato internacional: +1xxx',
@@ -824,11 +875,17 @@ const pt = {
   pay_with_strip: 'Pagar com Stripe',
   reupload: 'Reenviar',
   upload: 'Carregar',
-  files: 'Arquivos'
+  files: 'Arquivos',
+  signature_is_too_small_please_redraw: 'A assinatura é muito pequena. Por favor, redesenhe-a.',
+  wait_countdown_seconds: 'Aguarde {countdown} segundos'
 }
 
 const he = {
+  complete_all_required_fields_to_proceed_with_identity_verification: 'מלא את כל השדות הנדרשים כדי להמשיך עם אימות זהות.',
+  verify_id: 'אמת מזהה',
+  identity_verification: 'אימות זהות',
   complete: 'השלם',
+  fill_all_required_fields_to_complete: 'נא למלא את כל השדות הנדרשים להשלמה',
   sign_and_complete: 'חתום והשלם',
   invite: 'הזמן',
   email: 'דוא"ל',
@@ -895,7 +952,7 @@ const he = {
   documents_have_been_signed: 'המסמכים נחתמו!',
   create_a_free_account: 'צור חשבון חינם',
   powered_by: 'מופעל על ידי',
-  please_check_the_box_to_continue: 'אנא סמן את התיבה כדי להמשיך',
+  please_check_the_box_to_continue: 'אנא סמן את התיבה כדי להמשיך.',
   open_source_documents_software: 'תוכנה פתוחה למסמכים',
   verified_phone_number: 'אימות מספר טלפון',
   use_international_format: 'השתמש בפורמט בינלאומי: +1xxx',
@@ -917,11 +974,17 @@ const he = {
   pay_with_strip: 'שלם עם סטרייפ',
   reupload: 'העלה שוב',
   upload: 'העלאה',
-  files: 'קבצים'
+  files: 'קבצים',
+  signature_is_too_small_please_redraw: 'החתימה קטנה מדי. אנא צייר מחדש.',
+  wait_countdown_seconds: 'המתן {countdown} שניות'
 }
 
 const nl = {
+  complete_all_required_fields_to_proceed_with_identity_verification: 'Vul alle verplichte velden in om door te gaan met de identiteitsverificatie.',
+  verify_id: 'Verifiëren ID',
+  identity_verification: 'Identiteitsverificatie',
   complete: 'Voltooien',
+  fill_all_required_fields_to_complete: 'Vul alle verplichte velden in om te voltooien',
   sign_and_complete: 'Ondertekenen en voltooien',
   invite: 'Uitnodigen',
   email: 'E-mail',
@@ -988,7 +1051,7 @@ const nl = {
   documents_have_been_signed: 'De documenten zijn ondertekend!',
   create_a_free_account: 'Maak een gratis account aan',
   powered_by: 'Aangedreven door',
-  please_check_the_box_to_continue: 'Vink het vakje aan om door te gaan',
+  please_check_the_box_to_continue: 'Vink het vakje aan om door te gaan.',
   open_source_documents_software: 'Open source documenten software',
   verified_phone_number: 'Geverifieerd telefoonnummer',
   use_international_format: 'Gebruik internationaal formaat: +1xxx',
@@ -1010,11 +1073,17 @@ const nl = {
   pay_with_strip: 'Betalen met Stripe',
   reupload: 'Opnieuw uploaden',
   upload: 'Uploaden',
-  files: 'Bestanden'
+  files: 'Bestanden',
+  signature_is_too_small_please_redraw: 'De handtekening is te klein. Teken deze opnieuw, alstublieft.',
+  wait_countdown_seconds: 'Wacht {countdown} seconden'
 }
 
 const ar = {
+  complete_all_required_fields_to_proceed_with_identity_verification: 'أكمل جميع الحقول المطلوبة للمتابعة في التحقق من الهوية.',
+  verify_id: 'تحقق من الهوية',
+  identity_verification: 'التحقق من الهوية',
   complete: 'اكتمال',
+  fill_all_required_fields_to_complete: 'يرجى ملء جميع الحقول المطلوبة لإكمال',
   sign_and_complete: 'التوقيع والاكتمال',
   invite: 'دعوة',
   email: 'البريد الإلكتروني',
@@ -1080,7 +1149,7 @@ const ar = {
   documents_have_been_signed: 'تم توقيع الوثائق!',
   create_a_free_account: 'إنشاء حساب مجاني',
   powered_by: 'مدعوم من',
-  please_check_the_box_to_continue: 'الرجاء التحقق من الخانة للمتابعة',
+  please_check_the_box_to_continue: 'الرجاء التحقق من الخانة للمتابعة.',
   open_source_documents_software: 'برنامج وثائق مفتوح المصدر',
   verified_phone_number: 'تحقق من رقم الهاتف',
   use_international_format: 'استخدم الشكل الدولي: +1xxx',
@@ -1102,11 +1171,17 @@ const ar = {
   pay_with_strip: 'الدفع بواسطة Stripe',
   reupload: 'إعادة التحميل',
   upload: 'تحميل',
-  files: 'الملفات'
+  files: 'الملفات',
+  signature_is_too_small_please_redraw: 'التوقيع صغير جدًا. يرجى إعادة الرسم.',
+  wait_countdown_seconds: 'انتظر {countdown} ثانية'
 }
 
 const ko = {
+  complete_all_required_fields_to_proceed_with_identity_verification: '신원 확인을 진행하려면 모든 필수 필드를 작성하십시오.',
+  verify_id: '아이디 확인',
+  identity_verification: '신원 확인',
   complete: '완료',
+  fill_all_required_fields_to_complete: '모든 필수 필드를 작성하여 완료하세요',
   sign_and_complete: '서명하고 완료하기',
   invite: '초대하기',
   email: '이메일',
@@ -1171,7 +1246,7 @@ const ko = {
   documents_have_been_signed: '문서가 서명되었습니다!',
   create_a_free_account: '무료 계정 생성',
   powered_by: '구동',
-  please_check_the_box_to_continue: '계속하려면 확인란을 선택하십시오',
+  please_check_the_box_to_continue: '계속하려면 확인란을 선택하십시오.',
   open_source_documents_software: '오픈 소스 문서 소프트웨어',
   verified_phone_number: '전화번호 확인됨',
   use_international_format: '국제 포맷 사용: +1xxx',
@@ -1193,7 +1268,9 @@ const ko = {
   pay_with_strip: '스트라이프로 결제',
   reupload: '다시 업로드',
   upload: '업로드',
-  files: '파일'
+  files: '파일',
+  signature_is_too_small_please_redraw: '서명이 너무 작습니다. 다시 그려주세요.',
+  wait_countdown_seconds: '{countdown}초 기다리세요'
 }
 
 const i18n = { en, es, it, de, fr, pl, uk, cs, pt, he, nl, ar, ko }

app/javascript/submission_form/image_step.vue

@@ -1,9 +1,19 @@
 <template>
   <div v-if="modelValue">
-    <div class="flex justify-between items-center w-full mb-2">
+    <div class="flex justify-between items-end w-full mb-3.5 md:mb-4">
       <label
-        class="label text-2xl"
-      >{{ showFieldNames && field.name ? field.name : t('image') }}</label>
+        v-if="showFieldNames"
+        :for="field.uuid"
+        class="label text-xl sm:text-2xl py-0"
+      >
+        <MarkdownContent
+          v-if="field.title"
+          :string="field.title"
+        />
+        <template v-else>
+          {{ field.name || t('image') }}
+        </template>
+      </label>
       <button
         class="btn btn-outline btn-sm"
         @click.prevent="remove"
@@ -35,7 +45,7 @@
       <MarkdownContent :string="field.description" />
     </div>
     <FileDropzone
-      :message="`${t('upload')} ${field.name || t('image')}${field.required ? '' : ` (${t('optional')})`}`"
+      :message="`${t('upload')} ${(field.title || field.name) || t('image')}${field.required ? '' : ` (${t('optional')})`}`"
       :submitter-slug="submitterSlug"
       :dry-run="dryRun"
       :accept="'image/*'"

app/javascript/submission_form/initials_step.vue

@@ -1,21 +1,22 @@
 <template>
   <div dir="auto">
     <div
-      class="flex justify-between items-center w-full"
+      class="flex justify-between items-end w-full mb-3.5 md:mb-4"
       :class="{ 'mb-2': !field.description }"
     >
       <label
-        class="label text-2xl"
+        v-if="showFieldNames"
+        class="label text-xl sm:text-2xl py-0"
       >
         <MarkdownContent
           v-if="field.title"
           :string="field.title"
         />
         <template v-else>
-          {{ showFieldNames && field.name ? field.name : t('initials') }}
+          {{ field.name || t('initials') }}
         </template>
       </label>
-      <div class="space-x-2 flex">
+      <div class="space-x-2 flex flex-none">
         <span
           v-if="isDrawInitials"
           class="tooltip"
@@ -226,6 +227,10 @@ export default {
     if (this.$refs.canvas) {
       this.pad = new SignaturePad(this.$refs.canvas)
 
+      if (this.field.preferences?.color) {
+        this.pad.penColor = this.field.preferences.color
+      }
+
       this.pad.addEventListener('beginStroke', () => {
         this.isInitialsStarted = true
 

app/javascript/submission_form/invite_form.vue

@@ -12,7 +12,7 @@
       :value="authenticityToken"
     >
     <div
-      v-for="(submitter, index) in submitters"
+      v-for="(submitter, index) in [...submitters, ...optionalSubmitters]"
       :key="submitter.uuid"
       :class="{ 'mt-4': index !== 0 }"
     >
@@ -26,7 +26,7 @@
         dir="auto"
         class="label text-2xl"
       >
-        {{ t('invite') }} {{ submitter.name }}
+        {{ t('invite') }} {{ submitter.name }} <template v-if="!submitters.includes(submitter)">({{ t('optional') }})</template>
       </label>
       <input
         :id="submitter.uuid"
@@ -34,13 +34,13 @@
         class="base-input !text-2xl w-full"
         :placeholder="t('email')"
         type="email"
-        required
+        :required="submitters.includes(submitter)"
         autofocus="true"
         name="submission[submitters][][email]"
       >
     </div>
     <div
-      class="mt-6 md:mt-8"
+      class="mt-4 md:mt-6"
     >
       <button
         type="submit"
@@ -53,7 +53,7 @@
             class="mr-1 animate-spin"
           />
           <span>
-            {{ t('submit') }}
+            {{ t('complete') }}
           </span><span
             v-if="isSubmitting"
             class="w-6 flex justify-start mr-1"
@@ -78,6 +78,11 @@ export default {
       type: Array,
       required: true
     },
+    optionalSubmitters: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     url: {
       type: String,
       required: true

app/javascript/submission_form/multi_select_step.vue

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

app/javascript/submission_form/number_step.vue

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

app/javascript/submission_form/payment_step.vue

@@ -1,8 +1,7 @@
 <template>
   <label
     v-if="!modelValue && !sessionId"
-    :for="field.uuid"
-    class="label text-2xl mb-2"
+    class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5"
   >
     <MarkdownContent
       v-if="field.title"

app/javascript/submission_form/phone_step.vue

@@ -1,8 +1,9 @@
 <template>
   <div>
     <label
+      v-if="showFieldNames"
       :for="isCodeSent ? 'one_time_code' : field.uuid"
-      class="label text-2xl"
+      class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5"
       :class="{ 'mb-2': !field.description }"
     >
       <MarkdownContent
@@ -10,10 +11,7 @@
         :string="field.title"
       />
       <template v-else>
-        {{ showFieldNames && field.name ? field.name : t('verified_phone_number') }}
-        <template v-if="!field.required">
-          ({{ t('optional') }})
-        </template>
+        {{ field.name || t('verified_phone_number') }}
       </template>
     </label>
     <div
@@ -52,7 +50,14 @@
           >
             {{ t('change_phone_number') }}
           </a>
+          <span
+            v-if="resendCodeCountdown > 0"
+            class="link"
+          >
+            {{ t('wait_countdown_seconds').replace('{countdown}', resendCodeCountdown) }}
+          </span>
           <a
+            v-else
             href="#"
             class="link"
             @click.prevent="resendCode"
@@ -61,30 +66,59 @@
           </a>
         </div>
       </div>
-      <input
+      <div
         v-show="!isCodeSent"
-        :id="field.uuid"
-        ref="phone"
-        :value="modelValue || defaultValue"
-        :readonly="!!defaultValue"
-        class="base-input !text-2xl w-full"
-        autocomplete="tel"
-        pattern="^\+[0-9\s\-]+$"
-        type="tel"
-        inputmode="tel"
-        :required="field.required"
-        placeholder="+1 234 567-8900"
-        :name="`values[${field.uuid}]`"
-        @invalid="$event.target.value ? $event.target.setCustomValidity(`${t('use_international_format')}...`) : ''"
-        @input="[$event.target.setCustomValidity(''), $emit('update:model-value', $event.target.value)]"
-        @focus="$emit('focus')"
+        class="flex w-full rounded-full outline-neutral-content outline-2 outline-offset-2 focus-within:outline"
       >
+        <div
+          id="country_code"
+          class="relative inline-block"
+        >
+          <div class="btn bg-base-200 border border-neutral-300 text-2xl whitespace-nowrap font-normal rounded-l-full">
+            {{ selectedCountry.flag }} +{{ selectedCountry.dial }}
+          </div>
+          <select
+            id="country_code_select"
+            class="absolute top-0 bottom-0 right-0 left-0 opacity-0 w-full h-full cursor-pointer"
+            :disabled="!!defaultValue"
+            @change="onCountrySelect(countries.find((country) => country.flag === $event.target.value))"
+          >
+            <option
+              v-for="(country, index) in countries"
+              :key="index"
+              :value="country.flag"
+            >
+              {{ country.flag }} {{ country.name }}
+            </option>
+          </select>
+        </div>
+        <input
+          :name="`values[${field.uuid}]`"
+          :value="fullInternationalPhoneValue"
+          hidden
+        >
+        <input
+          :id="field.uuid"
+          ref="phone"
+          :value="phoneValue"
+          :readonly="!!defaultValue"
+          class="base-input !text-2xl !rounded-l-none !border-l-0 !outline-none w-full"
+          autocomplete="tel"
+          type="tel"
+          inputmode="tel"
+          :required="field.required"
+          placeholder="234 567-8900"
+          @input="onPhoneInput"
+          @focus="$emit('focus')"
+        >
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import MarkdownContent from './markdown_content'
+import phoneData from './phone_data'
 
 function throttle (func, delay) {
   let lastCallTime = 0
@@ -144,26 +178,108 @@ export default {
   data () {
     return {
       isCodeSent: false,
-      isResendLoading: false
+      codeSentAt: null,
+      resendCodeCountdown: 0,
+      isResendLoading: false,
+      phoneValue: this.modelValue || this.defaultValue || '',
+      selectedCountry: {}
+    }
+  },
+  computed: {
+    countries () {
+      return phoneData.map(([iso, name, dial, flag, tz]) => {
+        return { iso, name, dial, flag, tz }
+      })
+    },
+    countriesDialIndex () {
+      return this.countries.reduce((acc, item) => {
+        acc[item.dial] ||= item
+
+        return acc
+      }, {})
+    },
+    dialCodesRegexp () {
+      const dialCodes = this.countries.map((country) => country.dial).sort((a, b) => b.length - a.length)
+
+      return new RegExp(`^\\+(${dialCodes.join('|')})`)
+    },
+    detectedPhoneValueDialCode () {
+      return (this.phoneValue || '').replace(/[^\d+]/g, '').match(this.dialCodesRegexp)?.[1]
+    },
+    fullInternationalPhoneValue () {
+      if (this.detectedPhoneValueDialCode) {
+        return this.phoneValue
+      } else if (this.phoneValue) {
+        return ['+', this.selectedCountry.dial, this.phoneValue].filter(Boolean).join('')
+      } else {
+        return ''
+      }
+    }
+  },
+  mounted () {
+    const browserTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
+
+    if (this.detectedPhoneValueDialCode) {
+      this.selectedCountry = this.countriesDialIndex[this.detectedPhoneValueDialCode]
+    } else if (browserTimeZone) {
+      const tz = browserTimeZone.split('/')[1]
+
+      this.selectedCountry = this.countries.find((country) => country.tz.includes(tz)) || this.countries[0]
+    }
+  },
+  beforeUnmount () {
+    if (this.interval) {
+      clearInterval(this.interval)
     }
   },
   methods: {
     emitSubmit: throttle(function (e) {
       this.$emit('submit')
     }, 1000),
+    onCountrySelect (country) {
+      if (this.selectedCountry.flag !== country.flag) {
+        this.phoneValue = this.phoneValue.replace(`+${this.selectedCountry.dial}`, `+${country.dial}`)
+      }
+
+      this.selectedCountry = country
+
+      this.$refs.phone.focus()
+    },
+    onPhoneInput (e) {
+      this.phoneValue = e.target.value
+
+      if (this.detectedPhoneValueDialCode) {
+        this.selectedCountry = this.countriesDialIndex[this.detectedPhoneValueDialCode]
+      }
+    },
     onInputCode (e) {
       if (e.target.value.length === 6) {
         this.emitSubmit()
       }
     },
     resendCode () {
-      this.isResendLoading = true
+      if (this.codeSentAt && Date.now() - this.codeSentAt < 15000) {
+        this.startResendCodeCountdown()
+      } else {
+        this.isResendLoading = true
 
-      this.sendVerificationCode().finally(() => {
-        alert(this.t('verification_code_has_been_resent'))
+        this.sendVerificationCode().then(() => {
+          alert(this.t('verification_code_has_been_resent'))
+        }).finally(() => {
+          this.isResendLoading = false
+        })
+      }
+    },
+    startResendCodeCountdown () {
+      this.resendCodeCountdown = 15 - parseInt((Date.now() - this.codeSentAt) / 1000)
 
-        this.isResendLoading = false
-      })
+      this.interval = setInterval(() => {
+        this.resendCodeCountdown--
+
+        if (this.resendCodeCountdown <= 0) {
+          clearInterval(this.interval)
+        }
+      }, 1000)
     },
     sendVerificationCode () {
       return fetch(this.baseUrl + '/api/send_phone_verification_code', {
@@ -171,16 +287,24 @@ export default {
         body: JSON.stringify({
           submitter_slug: this.submitterSlug,
           locale: this.locale,
-          phone: this.$refs.phone.value
+          phone: this.fullInternationalPhoneValue
         }),
         headers: { 'Content-Type': 'application/json' }
       }).then(async (resp) => {
-        if (resp.status === 422) {
+        if ([422, 429].includes(resp.status)) {
           const data = await resp.json()
 
-          alert(this.t('number_phone_is_invalid').replace('{number}', this.$refs.phone.value))
+          if (resp.status === 422) {
+            alert(data.error || this.t('number_phone_is_invalid').replace('{number}', this.fullInternationalPhoneValue))
+          } else if (resp.status === 429) {
+            alert(data.error)
+          }
 
           return Promise.reject(new Error(data.error))
+        } else if (resp.ok) {
+          this.codeSentAt = Date.now()
+
+          return resp
         }
       })
     },
@@ -189,13 +313,13 @@ export default {
         return Promise.resolve({})
       }
 
-      if (!this.$refs.phone.value.toString().startsWith('+')) {
+      if (!this.fullInternationalPhoneValue.toString().startsWith('+')) {
         alert(this.t('use_international_format'))
 
         return Promise.reject(new Error('phone invalid'))
       } else if (!this.isCodeSent) {
         return this.sendVerificationCode().then(() => {
-          this.$emit('update:model-value', this.$refs.phone.value)
+          this.$emit('update:model-value', this.fullInternationalPhoneValue)
 
           this.isCodeSent = true
 

app/javascript/submission_form/signature_step.vue

@@ -4,23 +4,24 @@
     class="relative"
   >
     <div
-      class="flex justify-between items-center w-full"
+      class="flex justify-between items-end w-full mb-3.5 md:mb-4"
       :class="{ 'mb-2': !field.description }"
     >
       <label
-        class="label text-2xl"
+        v-if="showFieldNames"
+        class="label text-xl sm:text-2xl py-0"
       >
         <MarkdownContent
           v-if="field.title"
           :string="field.title"
         />
         <template v-else>
-          {{ showFieldNames && field.name ? field.name : t('signature') }}
+          {{ field.name || t('signature') }}
         </template>
       </label>
-      <div class="space-x-2 flex">
+      <div class="space-x-2 flex flex-none">
         <span
-          v-if="isTextSignature && field.preferences?.format !== 'typed'"
+          v-if="isTextSignature && format !== 'typed' && format !== 'upload'"
           class="tooltip"
           :data-tip="t('draw_signature')"
         >
@@ -37,8 +38,9 @@
           </a>
         </span>
         <span
-          v-else-if="withTypedSignature && field.preferences?.format !== 'typed' && field.preferences?.format !== 'drawn'"
+          v-else-if="withTypedSignature && format !== 'typed' && format !== 'drawn' && format !== 'upload'"
           class="tooltip ml-2"
+          :class="{ 'hidden sm:inline': modelValue || computedPreviousValue }"
           :data-tip="t('type_text')"
         >
           <a
@@ -54,8 +56,9 @@
           </a>
         </span>
         <span
-          v-if="field.preferences?.format !== 'typed' && field.preferences?.format !== 'drawn'"
+          v-if="format !== 'typed' && format !== 'drawn' && format !== 'upload' && format !== 'drawn_or_typed'"
           class="tooltip"
+          :class="{ 'hidden sm:inline': modelValue || computedPreviousValue }"
           :data-tip="t('take_photo')"
         >
           <label
@@ -81,10 +84,10 @@
           @click.prevent="remove"
         >
           <IconReload :width="16" />
-          {{ t('redraw') }}
+          {{ t(format === 'upload' ? 'reupload' : 'redraw') }}
         </a>
         <span
-          v-if="withQrButton && !modelValue && !computedPreviousValue && field.preferences?.format !== 'typed'"
+          v-if="withQrButton && !modelValue && !computedPreviousValue && format !== 'typed' && format !== 'upload'"
           class=" tooltip"
           :data-tip="t('drawn_signature_on_a_touchscreen_device')"
         >
@@ -131,7 +134,18 @@
       :src="attachmentsIndex[modelValue || computedPreviousValue].url"
       class="mx-auto bg-white border border-base-300 rounded max-h-44"
     >
-    <div class="relative">
+    <FileDropzone
+      v-if="format === 'upload' && !modelValue"
+      :message="`${t('upload')} ${field.name || t('signature')}`"
+      :submitter-slug="submitterSlug"
+      :dry-run="dryRun"
+      :accept="'image/*'"
+      @upload="[$emit('attached', $event[0]), $emit('update:model-value', $event[0].uuid)]"
+    />
+    <div
+      v-else
+      class="relative"
+    >
       <div
         v-if="!modelValue && !computedPreviousValue && !isShowQr && !isTextSignature && isSignatureStarted"
         class="absolute top-0.5 right-0.5"
@@ -145,6 +159,10 @@
           {{ t('clear') }}
         </a>
       </div>
+      <div
+        v-if="isTextSignature"
+        class="absolute top-0 right-0 left-0 bottom-0"
+      />
       <canvas
         v-show="!modelValue && !computedPreviousValue"
         ref="canvas"
@@ -197,6 +215,7 @@
     <select
       v-if="requireSigningReason && !isOtherReason"
       class="select base-input !text-2xl w-full mt-6 text-center"
+      :class="{ 'text-gray-300': !reason }"
       required
       :name="`values[${field.preferences.reason_field_uuid}]`"
       @change="$event.target.value === 'other' ? [reason = '', isOtherReason = true] : $emit('update:reason', $event.target.value)"
@@ -205,6 +224,7 @@
         value=""
         disabled
         :selected="!reason"
+        class="text-gray-300"
       >
         {{ t('select_a_reason') }}
       </option>
@@ -213,10 +233,14 @@
         :key="option"
         :value="option"
         :selected="reason === option"
+        class="text-base-content"
       >
         {{ label }}
       </option>
-      <option value="other">
+      <option
+        value="other"
+        class="text-base-content"
+      >
         {{ t('other') }}
       </option>
     </select>
@@ -249,7 +273,7 @@
       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"
+        href="https://www.docuseal.com/esign-disclosure"
         target="_blank"
       >
         <span class="inline md:hidden">
@@ -272,6 +296,7 @@ import { IconReload, IconCamera, IconSignature, IconTextSize, IconArrowsDiagonal
 import { cropCanvasAndExportToPNG } from './crop_canvas'
 import SignaturePad from 'signature_pad'
 import AppearsOn from './appears_on'
+import FileDropzone from './dropzone'
 import MarkdownContent from './markdown_content'
 import { v4 } from 'uuid'
 
@@ -284,6 +309,7 @@ export default {
   components: {
     AppearsOn,
     IconReload,
+    FileDropzone,
     IconCamera,
     IconQrcode,
     MarkdownContent,
@@ -378,6 +404,9 @@ export default {
     submitterSlug () {
       return this.submitter.slug
     },
+    format () {
+      return this.field.preferences?.format
+    },
     defaultReasons () {
       return {
         [this.t('approved_by')]: this.t('approved'),
@@ -413,6 +442,10 @@ export default {
     if (this.$refs.canvas) {
       this.pad = new SignaturePad(this.$refs.canvas)
 
+      if (this.field.preferences?.color) {
+        this.pad.penColor = this.field.preferences.color
+      }
+
       this.pad.addEventListener('endStroke', () => {
         this.isSignatureStarted = true
 

app/javascript/submission_form/text_step.vue

@@ -3,15 +3,18 @@
     v-if="showFieldNames && (field.name || field.title)"
     :for="field.uuid"
     dir="auto"
-    class="label text-2xl"
+    class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5"
     :class="{ 'mb-2': !field.description }"
-  ><MarkdownContent
-     v-if="field.title"
-     :string="field.title"
-   />
+  >
+    <MarkdownContent
+      v-if="field.title"
+      :string="field.title"
+    />
     <template v-else>{{ field.name }}</template>
     <template v-if="!field.required">
-      ({{ t('optional') }})
+      <span :class="{ 'hidden sm:inline': (field.title || field.name).length > 20 }">
+        ({{ t('optional') }})
+      </span>
     </template>
   </label>
   <div
@@ -114,7 +117,9 @@ export default {
         const area = this.field.areas?.[0]
 
         if (area) {
-          return parseInt(area.w / area.cell_w) + 1
+          const num = area.w / area.cell_w
+
+          return (num % 1) > 0.2 ? parseInt(num) + 1 : parseInt(num)
         } else {
           return null
         }

app/javascript/submission_form/verification_step.vue

@@ -0,0 +1,195 @@
+<template>
+  <label
+    class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5"
+  >
+    <MarkdownContent
+      v-if="field.title"
+      :string="field.title"
+    />
+    <template v-else>{{ field.name || t('identity_verification') }}</template>
+  </label>
+  <div
+    v-if="field.description"
+    dir="auto"
+    class="mb-4 px-1"
+  >
+    <MarkdownContent :string="field.description" />
+  </div>
+  <div
+    v-if="emptyValueRequiredStep && emptyValueRequiredStep[0] !== field"
+    class="px-1"
+  >
+    {{ t('complete_all_required_fields_to_proceed_with_identity_verification') }}
+  </div>
+  <div v-else>
+    <div
+      v-if="isLoading"
+      class="w-full flex space-x-2 justify-center mb-2"
+    >
+      <IconInnerShadowTop
+        width="40"
+        class="animate-spin h-10"
+      />
+    </div>
+    <div v-else-if="redirectUrl">
+      <a
+        :href="redirectUrl"
+        target="_blank"
+        class="white-button w-full"
+      >
+        {{ t('verify_id') }}
+      </a>
+    </div>
+    <div
+      ref="widgetContainer"
+    />
+  </div>
+</template>
+
+<script>
+import MarkdownContent from './markdown_content'
+import { IconInnerShadowTop } from '@tabler/icons-vue'
+import phoneData from './phone_data'
+
+export default {
+  name: 'VerificationStep',
+  components: {
+    MarkdownContent,
+    IconInnerShadowTop
+  },
+  inject: ['baseUrl', 't'],
+  props: {
+    modelValue: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    submitter: {
+      type: Object,
+      required: true
+    },
+    field: {
+      type: Object,
+      required: true
+    },
+    emptyValueRequiredStep: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    values: {
+      type: Object,
+      required: true
+    },
+    locale: {
+      type: String,
+      required: false,
+      default: 'en'
+    },
+    submitterSlug: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['focus', 'submit', 'update:model-value', 'attached'],
+  data () {
+    return {
+      isCreatingCheckout: false,
+      isMathLoaded: false,
+      redirectUrl: '',
+      isLoading: false,
+      eidEasyData: {}
+    }
+  },
+  computed: {
+    countryCode () {
+      const browserTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
+      const browserTz = browserTimeZone.split('/')[1]
+      const country = phoneData.find(([a, b, c, e, tz]) => tz.includes(browserTz))
+
+      return country[0]
+    },
+    browserCountry () {
+      return (navigator.language || navigator.userLanguage || 'en').split('-')[1]
+    },
+    widgetSettings () {
+      return {
+        clientId: this.eidEasyData.client_id,
+        docId: this.eidEasyData.doc_id,
+        language: this.locale,
+        countryCode: this.countryCode,
+        enabledMethods: {
+          signature: this.eidEasyData.available_methods
+        },
+        selectedMethod: null,
+        enabledCountries: 'all',
+        onSuccess: (data) => {
+          this.$emit('submit')
+        },
+        onFail: (error) => {
+          console.error(error)
+        }
+      }
+    }
+  },
+  async mounted () {
+    this.isLoading = true
+
+    if (new URLSearchParams(window.location.search).get('submit') === 'true') {
+      this.$emit('submit')
+    } else {
+      Promise.all([
+        import('@eid-easy/eideasy-widget'),
+        this.start()
+      ]).finally(() => {
+        this.isLoading = false
+      })
+    }
+  },
+  methods: {
+    start () {
+      return fetch(this.baseUrl + `/api/identity_verification/${this.field.uuid}`, {
+        method: 'PUT',
+        body: JSON.stringify({
+          submitter_slug: this.submitterSlug
+        }),
+        headers: { 'Content-Type': 'application/json' }
+      }).then(async (resp) => {
+        this.eidEasyData = await resp.json()
+
+        if (this.eidEasyData.available_methods[0] === 'itsme-qes-signature' &&
+            this.eidEasyData.available_methods.length === 1) {
+          const redirectUrl = new URL('https://id.eideasy.com/sign_contract_external')
+
+          redirectUrl.searchParams.append('client_id', this.eidEasyData.client_id)
+          redirectUrl.searchParams.append('doc_id', this.eidEasyData.doc_id)
+          redirectUrl.searchParams.append('country', this.countryCode)
+          redirectUrl.searchParams.append('lang', this.locale)
+
+          this.redirectUrl = redirectUrl.toString()
+        } else {
+          const eidEasyWidget = document.createElement('eideasy-widget')
+
+          for (const key in this.widgetSettings) {
+            eidEasyWidget[key] = this.widgetSettings[key]
+          }
+
+          this.$refs.widgetContainer.innerHTML = ''
+          this.$refs.widgetContainer.appendChild(eidEasyWidget)
+        }
+      })
+    },
+    async submit () {
+      return fetch(this.baseUrl + '/api/identity_verification', {
+        method: 'POST',
+        body: JSON.stringify({
+          submitter_slug: this.submitterSlug
+        }),
+        headers: { 'Content-Type': 'application/json' }
+      }).then(async (resp) => {
+        return resp
+      })
+    }
+  }
+}
+</script>

app/javascript/template_builder/area.vue

@@ -2,6 +2,7 @@
   <div
     class="absolute overflow-visible group"
     :style="positionStyle"
+    :class="{ 'z-[1]': isMoved || isDragged }"
     @pointerdown.stop
     @mousedown="startMouseMove"
     @touchstart="startTouchDrag"
@@ -9,7 +10,7 @@
     <div
       v-if="isSelected || isDraw"
       class="top-0 bottom-0 right-0 left-0 absolute border border-1.5 pointer-events-none"
-      :class="field.type === 'heading' ? '' : borderColors[submitterIndex]"
+      :class="field.type === 'heading' ? '' : borderColors[submitterIndex % borderColors.length]"
     />
     <div
       v-if="field.type === 'cells' && (isSelected || isDraw)"
@@ -19,7 +20,7 @@
         v-for="(cellW, index) in cells"
         :key="index"
         class="absolute top-0 bottom-0 border-r"
-        :class="field.type === 'heading' ? '' : borderColors[submitterIndex]"
+        :class="field.type === 'heading' ? '' : borderColors[submitterIndex % borderColors.length]"
         :style="{ left: (cellW / area.w * 100) + '%' }"
       >
         <span
@@ -69,7 +70,7 @@
         @keydown.enter.prevent="onNameEnter"
         @focus="onNameFocus"
         @blur="onNameBlur"
-      >{{ optionIndexText }} {{ (defaultField ? (field.title || field.name) : field.name) || defaultName }}</span>
+      >{{ optionIndexText }} {{ (defaultField ? (defaultField.title || field.title || field.name) : field.name) || defaultName }}</span>
       <div
         v-if="isSettingsFocus || (isValueInput && field.type !== 'heading') || (isNameFocus && !['checkbox', 'phone'].includes(field.type))"
         class="flex items-center ml-1.5"
@@ -160,7 +161,7 @@
       ref="touchValueTarget"
       class="flex items-center h-full w-full"
       dir="auto"
-      :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']"
+      :class="[isValueInput ? 'bg-opacity-50' : 'bg-opacity-80', field.type === 'heading' ? 'bg-gray-50' : bgColors[submitterIndex % bgColors.length], isDefaultValuePresent || isValueInput || (withFieldPlaceholder && field.areas) ? (alignClasses[field.preferences?.align] || '') : 'justify-center']"
       @click="focusValueInput"
     >
       <span
@@ -175,6 +176,7 @@
           <div
             ref="textContainer"
             class="flex items-center px-0.5"
+            :style="{ color: field.preferences?.color }"
             :class="{ 'w-full h-full': ['cells', 'checkbox'].includes(field.type) }"
           >
             <IconCheck
@@ -210,7 +212,7 @@
               :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')"
+              :placeholder="withFieldPlaceholder && !isValueInput ? defaultField?.title || field.title || field.name || defaultName : t('type_value')"
               @blur="onDefaultValueBlur"
               @paste.prevent="onPaste"
               @keydown.enter="onDefaultValueEnter"
@@ -236,7 +238,7 @@
     />
     <span
       v-if="field?.type && editable"
-      class="h-4 w-4 md:h-2.5 md:w-2.5 -right-1 rounded-full -bottom-1 border-gray-400 bg-white shadow-md border absolute cursor-nwse-resize"
+      class="h-4 w-4 lg:h-2.5 lg:w-2.5 -right-1 rounded-full -bottom-1 border-gray-400 bg-white shadow-md border absolute cursor-nwse-resize"
       @mousedown.stop="startResize"
       @touchstart="startTouchResize"
     />
@@ -256,7 +258,7 @@
       :to="modalContainerEl"
     >
       <ConditionsModal
-        :field="field"
+        :item="field"
         :build-default-name="buildDefaultName"
         @close="isShowConditionsModal = false"
       />
@@ -315,6 +317,11 @@ export default {
       required: false,
       default: false
     },
+    maxPage: {
+      type: Number,
+      required: false,
+      default: null
+    },
     defaultField: {
       type: Object,
       required: false,
@@ -354,12 +361,14 @@ export default {
       isMoved: false,
       renderDropdown: false,
       isNameFocus: false,
+      isHeadingSelected: false,
       textOverflowChars: 0,
       dragFrom: { x: 0, y: 0 }
     }
   },
   computed: {
     fieldNames: FieldType.computed.fieldNames,
+    fieldLabels: FieldType.computed.fieldLabels,
     fieldIcons: FieldType.computed.fieldIcons,
     isDefaultValuePresent () {
       if (this.field?.type === 'radio' && this.field?.areas?.length > 1) {
@@ -369,7 +378,7 @@ export default {
       }
     },
     isValueInput () {
-      return (this.field.type === 'heading' && this.isSelected) || this.isContenteditable || (this.inputMode && ['text', 'number', 'date'].includes(this.field.type))
+      return (this.field.type === 'heading' && this.isHeadingSelected) || this.isContenteditable || (this.inputMode && ['text', 'number', 'date'].includes(this.field.type))
     },
     modalContainerEl () {
       return this.$el.getRootNode().querySelector('#docuseal_modal_container')
@@ -412,16 +421,6 @@ export default {
     },
     borderColors () {
       return [
-        'border-red-500/80',
-        'border-sky-500/80',
-        'border-emerald-500/80',
-        'border-yellow-300/80',
-        'border-purple-600/80',
-        'border-pink-500/80',
-        'border-cyan-500/80',
-        'border-orange-500/80',
-        'border-lime-500/80',
-        'border-indigo-500/80',
         'border-red-500/80',
         'border-sky-500/80',
         'border-emerald-500/80',
@@ -436,16 +435,6 @@ export default {
     },
     bgColors () {
       return [
-        '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',
@@ -491,13 +480,13 @@ export default {
   methods: {
     buildDefaultName: Field.methods.buildDefaultName,
     closeDropdown () {
-      document.activeElement.blur()
+      this.$el.getRootNode().activeElement.blur()
     },
     maybeToggleDefaultValue () {
       if (['text', 'number'].includes(this.field.type)) {
         this.isContenteditable = true
 
-        this.$nextTick(() => this.focusValueInput())
+        this.focusValueInput()
       } else if (this.field.type === 'checkbox') {
         this.field.readonly = !this.field.readonly
         this.field.default_value === true ? delete this.field.default_value : this.field.default_value = true
@@ -519,20 +508,28 @@ export default {
       }
     },
     focusValueInput (e) {
-      if (this.$refs.defaultValue !== document.activeElement) {
-        this.$refs.defaultValue.focus()
+      this.$nextTick(() => {
+        if (this.$refs.defaultValue && this.$refs.defaultValue !== document.activeElement) {
+          this.$refs.defaultValue.focus()
 
-        if (this.$refs.defaultValue.innerText.length && this.$refs.defaultValue !== e?.target) {
-          window.getSelection().collapse(
-            this.$refs.defaultValue.firstChild,
-            this.$refs.defaultValue.innerText.length
-          )
+          if (this.$refs.defaultValue.innerText.length && this.$refs.defaultValue !== e?.target) {
+            window.getSelection().collapse(
+              this.$refs.defaultValue.firstChild,
+              this.$refs.defaultValue.innerText.length
+            )
+          }
         }
-      }
+      })
     },
     formatNumber (number, format) {
       if (format === 'comma') {
         return new Intl.NumberFormat('en-US').format(number)
+      } else if (format === 'usd') {
+        return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
+      } else if (format === 'gbp') {
+        return new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
+      } else if (format === 'eur') {
+        return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
       } else if (format === 'dot') {
         return new Intl.NumberFormat('de-DE').format(number)
       } else if (format === 'space') {
@@ -638,6 +635,7 @@ export default {
       const text = this.$refs.defaultValue.innerText.trim()
 
       this.isContenteditable = false
+      this.isHeadingSelected = false
 
       if (text) {
         if (this.field.type === 'number') {
@@ -718,12 +716,18 @@ export default {
       const rect = page.getBoundingClientRect()
 
       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)
+      this.area.y = (this.dragFrom.y + e.touches[0].clientY - rect.top) / rect.height
+
+      if ((this.area.page === 0 && this.area.y < 0) || (this.area.page === this.maxPage && this.area.y > 1 - this.area.h)) {
+        this.area.y = Math.min(Math.max(this.area.y, 0), 1 - this.area.h)
+      }
     },
     stopTouchDrag () {
       this.$el.getRootNode().removeEventListener('touchmove', this.touchDrag)
       this.$el.getRootNode().removeEventListener('touchend', this.stopTouchDrag)
 
+      this.maybeChangeAreaPage(this.area)
+
       if (this.isDragged) {
         this.save()
       }
@@ -749,10 +753,6 @@ export default {
 
       this.selectedAreaRef.value = this.area
 
-      if (this.field.type === 'heading') {
-        this.$nextTick(() => this.focusValueInput())
-      }
-
       this.dragFrom = { x: rect.left - e.clientX, y: rect.top - e.clientY }
 
       this.$el.getRootNode().addEventListener('mousemove', this.mouseMove)
@@ -771,21 +771,42 @@ export default {
       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)
+      this.area.y = (this.dragFrom.y + e.clientY - rect.top) / rect.height
+
+      if ((this.area.page === 0 && this.area.y < 0) || (this.area.page === this.maxPage && this.area.y > 1 - this.area.h)) {
+        this.area.y = Math.min(Math.max(this.area.y, 0), 1 - this.area.h)
+      }
     },
     stopMouseMove (e) {
       this.$el.getRootNode().removeEventListener('mousemove', this.mouseMove)
       this.$el.getRootNode().removeEventListener('mouseup', this.stopMouseMove)
 
+      this.maybeChangeAreaPage(this.area)
+
       if (this.isMoved) {
         this.save()
       }
 
+      if (this.field.type === 'heading') {
+        this.isHeadingSelected = !this.isMoved
+
+        this.focusValueInput()
+      }
+
       this.isDragged = false
       this.isMoved = false
 
       this.$emit('stop-drag')
     },
+    maybeChangeAreaPage (area) {
+      if (area.y < -(area.h / 2)) {
+        area.page -= 1
+        area.y = 1 + area.y + (16.0 / this.$parent.$refs.mask.previousSibling.offsetHeight)
+      } else if (area.y > 1 - (area.h / 2)) {
+        area.page += 1
+        area.y = area.y - 1 - (16.0 / this.$parent.$refs.mask.previousSibling.offsetHeight)
+      }
+    },
     stopDrag () {
       this.$el.getRootNode().removeEventListener('mousemove', this.drag)
       this.$el.getRootNode().removeEventListener('mouseup', this.stopDrag)

app/javascript/template_builder/builder.vue

@@ -1,10 +1,11 @@
 <template>
   <div
     style="max-width: 1600px"
-    class="mx-auto pl-3 md:pl-4 h-full"
+    class="mx-auto pl-3 h-full"
+    :class="isMobile ? 'pl-4' : 'md:pl-4'"
   >
     <div
-      v-if="pendingFieldAttachmentUuids.length"
+      v-if="pendingFieldAttachmentUuids.length && editable"
       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">
@@ -163,7 +164,7 @@
     <div
       id="main_container"
       class="flex"
-      :class="$slots.buttons || withTitle ? 'md:max-h-[calc(100%_-_60px)]' : 'md:max-h-[100%]'"
+      :class="$slots.buttons || withTitle ? (isMobile ? 'max-h-[calc(100%_-_60px)]' : 'md:max-h-[calc(100%_-_60px)]') : (isMobile ? 'max-h-[100%]' : 'md:max-h-[100%]')"
     >
       <div
         v-if="withDocumentsList"
@@ -178,6 +179,7 @@
           :with-arrows="template.schema.length > 1"
           :item="item"
           :document="sortedDocuments[index]"
+          :data-document-uuid="item.attachment_uuid"
           :accept-file-types="acceptFileTypes"
           :with-replace-button="withUploadButton"
           :editable="editable"
@@ -186,6 +188,7 @@
           @remove="onDocumentRemove"
           @replace="onDocumentReplace"
           @up="moveDocument(item, -1)"
+          @reorder="reorderFields"
           @down="moveDocument(item, 1)"
           @change="save"
         />
@@ -219,7 +222,8 @@
       </div>
       <div
         id="pages_container"
-        class="w-full overflow-y-hidden md:overflow-y-auto overflow-x-hidden mt-0.5 pt-0.5"
+        class="w-full overflow-x-hidden mt-0.5 pt-0.5"
+        :class="isMobile ? 'overflow-y-auto' : 'overflow-y-hidden md:overflow-y-auto'"
       >
         <div
           ref="documents"
@@ -263,6 +267,7 @@
                 :input-mode="inputMode"
                 :default-fields="[...defaultRequiredFields, ...defaultFields]"
                 :allow-draw="!onlyDefinedFields"
+                :data-document-uuid="document.uuid"
                 :default-submitters="defaultSubmitters"
                 :with-field-placeholder="withFieldPlaceholder"
                 :draw-field="drawField"
@@ -320,7 +325,7 @@
         </div>
       </div>
       <div
-        v-if="withFieldsList"
+        v-if="withFieldsList && !isMobile"
         id="fields_list_container"
         class="relative w-80 flex-none mt-1 pr-4 pl-0.5 hidden md:block"
         :class="drawField ? 'overflow-hidden' : 'overflow-y-auto overflow-x-hidden'"
@@ -332,7 +337,7 @@
         >
           <div class="bg-base-200 rounded-lg p-5 text-center space-y-4">
             <p>
-              {{ t('draw_field_on_the_document').replace('{field}', drawField?.name || '') }}
+              {{ t('draw_field_on_the_document') }}
             </p>
             <div>
               <button
@@ -361,7 +366,9 @@
             :with-help="withHelp"
             :default-submitters="defaultSubmitters"
             :draw-field-type="drawFieldType"
+            :with-fields-search="withFieldsSearch"
             :default-fields="[...defaultRequiredFields, ...defaultFields]"
+            :template="template"
             :default-required-fields="defaultRequiredFields"
             :field-types="fieldTypes"
             :with-sticky-submitters="withStickySubmitters"
@@ -378,14 +385,14 @@
         </div>
       </div>
     </div>
-    <div class="sticky bottom-0">
+    <div class="sticky bottom-0 z-10">
       <MobileDrawField
-        v-if="drawField && isBreakpointLg"
+        v-if="drawField && (isBreakpointLg || isMobile)"
         :draw-field="drawField"
         :fields="template.fields"
         :submitters="template.submitters"
         :selected-submitter="selectedSubmitter"
-        class="md:hidden"
+        :class="{ 'md:hidden': !isMobile }"
         :editable="editable"
         @cancel="[drawField = null, drawOption = null]"
         @change-submitter="[selectedSubmitter = $event, drawField.submitter_uuid = $event.uuid]"
@@ -396,6 +403,7 @@
         :default-fields="[...defaultRequiredFields, ...defaultFields]"
         :default-required-fields="defaultRequiredFields"
         :field-types="fieldTypes"
+        :class="{ 'md:hidden': !isMobile }"
         :selected-submitter="selectedSubmitter"
         @select="startFieldDraw($event)"
       />
@@ -415,10 +423,11 @@ import Contenteditable from './contenteditable'
 import DocumentPreview from './preview'
 import DocumentControls from './controls'
 import MobileFields from './mobile_fields'
+import FieldSubmitter from './field_submitter'
 import { IconPlus, IconUsersPlus, IconDeviceFloppy, IconChevronDown, IconEye, IconWritingSign, IconInnerShadowTop, IconInfoCircle, IconAdjustments } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 import { ref, computed } from 'vue'
-import { en as i18nEn } from './i18n'
+import * as i18n from './i18n'
 
 export default {
   name: 'TemplateBuilder',
@@ -454,6 +463,7 @@ export default {
       fieldTypes: this.fieldTypes,
       backgroundColor: this.backgroundColor,
       withPhone: this.withPhone,
+      withVerification: this.withVerification,
       withPayment: this.withPayment,
       isPaymentConnected: this.isPaymentConnected,
       withFormula: this.withFormula,
@@ -558,6 +568,11 @@ export default {
       required: false,
       default: () => []
     },
+    defineSubmitters: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     acceptFileTypes: {
       type: String,
       required: false,
@@ -609,6 +624,11 @@ export default {
       required: false,
       default: true
     },
+    withFieldsSearch: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
     withFieldsList: {
       type: Boolean,
       required: false,
@@ -629,6 +649,11 @@ export default {
       required: false,
       default: false
     },
+    withVerification: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
     withPayment: {
       type: Boolean,
       required: false,
@@ -677,8 +702,17 @@ export default {
     }
   },
   computed: {
+    submitterDefaultNames: FieldSubmitter.computed.names,
     selectedAreaRef: () => ref(),
     fieldsDragFieldRef: () => ref(),
+    language () {
+      return this.locale.split('-')[0].toLowerCase()
+    },
+    isMobile () {
+      const isMobileSafariIos = 'ontouchstart' in window && navigator.maxTouchPoints > 0 && /AppleWebKit/i.test(navigator.userAgent)
+
+      return isMobileSafariIos || /android|iphone|ipad/i.test(navigator.userAgent)
+    },
     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)$/)
@@ -690,6 +724,7 @@ export default {
         'de-DE': 'DD.MM.YYYY',
         'fr-FR': 'DD/MM/YYYY',
         'it-IT': 'DD/MM/YYYY',
+        'en-GB': 'DD/MM/YYYY',
         'es-ES': 'DD/MM/YYYY'
       }
     },
@@ -745,6 +780,22 @@ export default {
       }
     })
 
+    const defineSubmittersUuids = this.defineSubmitters.map((name) => {
+      return this.template.submitters.find(e => e.name === name)?.uuid
+    })
+
+    this.defineSubmitters.forEach((name, index) => {
+      const submitter = (this.template.submitters[index] ||= {})
+
+      submitter.name = name || this.submitterDefaultNames[index]
+
+      if (defineSubmittersUuids.filter(Boolean).length || existingSubmittersUuids.filter(Boolean).length) {
+        submitter.uuid = defineSubmittersUuids[index] || existingSubmittersUuids[index] || submitter.uuid || v4()
+      } else {
+        submitter.uuid ||= v4()
+      }
+    })
+
     this.selectedSubmitter = this.template.submitters[0]
   },
   mounted () {
@@ -782,11 +833,94 @@ export default {
     this.documentRefs = []
   },
   methods: {
+    reorderFields (item) {
+      const itemFields = []
+      const fields = []
+      const fieldAreasIndex = {}
+
+      const attachmentUuids = this.template.schema.map((e) => e.attachment_uuid)
+
+      this.template.fields.forEach((f) => {
+        if (f.areas?.length) {
+          const firstArea = f.areas.reduce((min, a) => {
+            return attachmentUuids.indexOf(a.attachment_uuid) < attachmentUuids.indexOf(min.attachment_uuid) ? a : min
+          }, f.areas[0])
+
+          if (firstArea.attachment_uuid === item.attachment_uuid) {
+            itemFields.push(f)
+          } else {
+            fields.push(f)
+          }
+        } else {
+          fields.push(f)
+        }
+      })
+
+      const sortArea = (aArea, bArea) => {
+        if (aArea.attachment_uuid === bArea.attachment_uuid) {
+          if (aArea.page === bArea.page) {
+            if (Math.abs(aArea.y - bArea.y) < 0.01) {
+              if (aArea.x === bArea.x) {
+                return 0
+              } else {
+                return aArea.x - bArea.x
+              }
+            } else {
+              return aArea.y - bArea.y
+            }
+          } else {
+            return aArea.page - bArea.page
+          }
+        } else {
+          return attachmentUuids.indexOf(aArea.attachment_uuid) - attachmentUuids.indexOf(bArea.attachment_uuid)
+        }
+      }
+
+      itemFields.sort((aField, bField) => {
+        const aArea = (fieldAreasIndex[aField.uuid] ||= [...(aField.areas || [])].sort(sortArea)[0])
+        const bArea = (fieldAreasIndex[bField.uuid] ||= [...(bField.areas || [])].sort(sortArea)[0])
+
+        return sortArea(aArea, bArea)
+      })
+
+      const insertBeforeAttachmentUuids = attachmentUuids.slice(this.template.schema.indexOf(item) + 1)
+
+      let sortedFields = []
+
+      if (insertBeforeAttachmentUuids.length) {
+        const insertAfterField = fields.find((f) => {
+          if (f.areas?.length) {
+            return f.areas.find((a) => insertBeforeAttachmentUuids.includes(a.attachment_uuid))
+          } else {
+            return false
+          }
+        })
+
+        if (insertAfterField) {
+          fields.splice(fields.indexOf(insertAfterField), 0, ...itemFields)
+
+          sortedFields = fields
+        } else {
+          sortedFields = fields.concat(itemFields)
+        }
+      } else {
+        if (fields.length && itemFields.length && this.template.fields.indexOf(fields[0]) > this.template.fields.indexOf(itemFields[0])) {
+          sortedFields = itemFields.concat(fields)
+        } else {
+          sortedFields = fields.concat(itemFields)
+        }
+      }
+
+      if (this.template.fields.length === sortedFields.length) {
+        this.template.fields = sortedFields
+        this.save()
+      }
+    },
     closeDropdown () {
       document.activeElement.blur()
     },
     t (key) {
-      return this.i18n[key] || i18nEn[key] || key
+      return this.i18n[key] || i18n[this.language]?.[key] || i18n.en[key] || key
     },
     removePendingFields () {
       this.template.fields = this.template.fields.filter((f) => {
@@ -994,6 +1128,22 @@ export default {
 
       if (!field.areas.length) {
         this.template.fields.splice(this.template.fields.indexOf(field), 1)
+
+        this.template.fields.forEach((f) => {
+          (f.conditions || []).forEach((c) => {
+            if (c.field_uuid === field.uuid) {
+              f.conditions.splice(f.conditions.indexOf(c), 1)
+            }
+          })
+        })
+
+        this.template.schema.forEach((item) => {
+          (item.conditions || []).forEach((c) => {
+            if (c.field_uuid === field.uuid) {
+              item.conditions.splice(item.conditions.indexOf(c), 1)
+            }
+          })
+        })
       }
 
       this.save()
@@ -1052,7 +1202,7 @@ export default {
       } else if (type === 'image') {
         area.w = pageMask.clientWidth / 5 / pageMask.clientWidth
         area.h = (pageMask.clientWidth / 5 / pageMask.clientWidth) * (pageMask.clientWidth / pageMask.clientHeight)
-      } else if (type === 'signature' || type === 'stamp') {
+      } else if (type === 'signature' || type === 'stamp' || type === 'verification') {
         area.w = pageMask.clientWidth / 5 / pageMask.clientWidth
         area.h = (pageMask.clientWidth / 5 / pageMask.clientWidth) * (pageMask.clientWidth / pageMask.clientHeight) / 2
       } else if (type === 'initials') {
@@ -1176,7 +1326,11 @@ export default {
 
       if (!this.fieldsDragFieldRef.value) {
         if (['select', 'multiple', 'radio'].includes(field.type)) {
-          field.options = [{ value: '', uuid: v4() }]
+          if (this.dragField?.options?.length) {
+            field.options = this.dragField.options.map(option => ({ value: option, uuid: v4() }))
+          } else {
+            field.options = [{ value: '', uuid: v4() }]
+          }
         }
 
         if (['stamp', 'heading'].includes(field.type)) {
@@ -1216,7 +1370,7 @@ export default {
             w: area.maskW / 5 / area.maskW,
             h: (area.maskW / 5 / area.maskW) * (area.maskW / area.maskH)
           }
-        } else if (field.type === 'signature' || field.type === 'stamp') {
+        } else if (field.type === 'signature' || field.type === 'stamp' || field.type === 'verification') {
           baseArea = {
             w: area.maskW / 5 / area.maskW,
             h: (area.maskW / 5 / area.maskW) * (area.maskW / area.maskH) / 2
@@ -1252,6 +1406,16 @@ export default {
         fieldArea.h = lastArea.h
       }
 
+      if (field.width) {
+        fieldArea.w = field.width / area.maskW
+        delete field.width
+      }
+
+      if (field.height) {
+        fieldArea.h = field.height / area.maskH
+        delete field.height
+      }
+
       field.areas.push(fieldArea)
 
       this.selectedAreaRef.value = fieldArea
@@ -1269,6 +1433,8 @@ export default {
           const documentRef = this.documentRefs.find((e) => e.document.uuid === area.attachment_uuid)
           const areaRef = documentRef.pageRefs[area.page].areaRefs.find((ref) => ref.area === this.selectedAreaRef.value)
 
+          areaRef.isHeadingSelected = true
+
           areaRef.focusValueInput()
         })
       }
@@ -1319,7 +1485,9 @@ export default {
       }
 
       this.$nextTick(() => {
-        this.$refs.previews.scrollTop = this.$refs.previews.scrollHeight
+        if (this.$refs.previews) {
+          this.$refs.previews.scrollTop = this.$refs.previews.scrollHeight
+        }
 
         this.scrollIntoDocument(data.schema[0])
       })
@@ -1352,31 +1520,31 @@ export default {
       this.save()
     },
     onDocumentRemove (item) {
-      if (window.confirm(this.t('are_you_sure'))) {
+      if (window.confirm(this.t('are_you_sure_'))) {
         this.template.schema.splice(this.template.schema.indexOf(item), 1)
-      }
 
-      const removedFieldUuids = []
+        const removedFieldUuids = []
 
-      this.template.fields.forEach((field) => {
-        [...(field.areas || [])].forEach((area) => {
-          if (area.attachment_uuid === item.attachment_uuid) {
-            field.areas.splice(field.areas.indexOf(area), 1)
+        this.template.fields.forEach((field) => {
+          [...(field.areas || [])].forEach((area) => {
+            if (area.attachment_uuid === item.attachment_uuid) {
+              field.areas.splice(field.areas.indexOf(area), 1)
 
-            removedFieldUuids.push(field.uuid)
-          }
+              removedFieldUuids.push(field.uuid)
+            }
+          })
         })
-      })
 
-      this.template.fields =
-        this.template.fields.filter((f) => !removedFieldUuids.includes(f.uuid) || f.areas?.length)
+        this.template.fields =
+          this.template.fields.filter((f) => !removedFieldUuids.includes(f.uuid) || f.areas?.length)
 
-      this.save()
+        this.save()
+      }
     },
     onDocumentReplace (data) {
       const { replaceSchemaItem, schema, documents } = data
 
-      this.template.schema.splice(this.template.schema.indexOf(replaceSchemaItem), 1, schema[0])
+      this.template.schema.splice(this.template.schema.indexOf(replaceSchemaItem), 1, { ...replaceSchemaItem, ...schema[0] })
       this.template.documents.push(...documents)
 
       if (data.fields) {
@@ -1451,7 +1619,7 @@ export default {
       if (!this.template.fields.length) {
         e.preventDefault()
 
-        alert('Please draw fields to prepare the document.')
+        alert(this.t('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))
@@ -1459,7 +1627,7 @@ export default {
         if (submitterWithoutFields) {
           e.preventDefault()
 
-          alert(`Please add fields for the ${submitterWithoutFields.name}. Or, remove the ${submitterWithoutFields.name} if not needed.`)
+          alert(this.t('please_add_fields_for_the_submitter_name_or_remove_the_submitter_name_if_not_needed').replaceAll('{submitter_name}', submitterWithoutFields.name))
         }
       }
     },
@@ -1475,13 +1643,13 @@ export default {
       }
 
       if (!this.template.fields.length) {
-        alert('Please draw fields to prepare the document.')
+        alert(this.t('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.`)
+          alert(this.t('please_add_fields_for_the_submitter_name_or_remove_the_submitter_name_if_not_needed').replaceAll('{submitter_name}', submitterWithoutFields.name))
         } else {
           this.isSaving = true
 

app/javascript/template_builder/conditions_modal.vue

@@ -9,7 +9,7 @@
     <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
       <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
         <span>
-          {{ t('condition') }} - {{ field.name || buildDefaultName(field, template.fields) }}
+          {{ t('condition') }} - {{ item.name || buildDefaultName(item, template.fields) }}
         </span>
         <a
           href="#"
@@ -23,21 +23,32 @@
           class="bg-base-300 rounded-xl py-2 px-3 text-center"
         >
           <a
-            href="https://www.docuseal.co/pricing"
+            href="https://www.docuseal.com/pricing"
             target="_blank"
             class="link"
           >{{ t('available_in_pro') }}</a>
         </div>
         <form @submit.prevent="validateSaveAndClose">
-          <div class="my-4 space-y-5">
+          <div class="my-4">
             <div
               v-for="(condition, cindex) in conditions"
               :key="cindex"
               class="space-y-4 relative"
             >
+              <div
+                v-if="cindex > 0"
+                class="divider -mb-2 mx-1"
+              >
+                <button
+                  class="btn btn-xs btn-primary w-24"
+                  @click.prevent="condition.operation === 'or' ? delete condition.operation : condition.operation = 'or'"
+                >
+                  {{ condition.operation === 'or' ? t('or') : t('and') }}
+                </button>
+              </div>
               <div
                 v-if="conditions.length > 1"
-                class="flex justify-between border-b mx-1 -mb-1 pb-1"
+                class="flex justify-between mx-1"
               >
                 <span class="text-sm">
                   {{ t('condition') }} {{ cindex + 1 }}
@@ -50,6 +61,7 @@
               </div>
               <select
                 class="select select-bordered select-sm w-full bg-white h-11 pl-4 text-base font-normal"
+                :class="{ 'text-gray-300': !condition.field_uuid }"
                 required
                 @change="[
                   condition.field_uuid = $event.target.value,
@@ -68,6 +80,7 @@
                   v-for="f in fields"
                   :key="f.uuid"
                   :value="f.uuid"
+                  class="text-base-content"
                   :selected="condition.field_uuid === f.uuid"
                 >
                   {{ f.name || buildDefaultName(f, template.fields) }}
@@ -88,8 +101,9 @@
                 </option>
               </select>
               <select
-                v-if="conditionField(condition)?.options?.length"
+                v-if="['radio', 'select', 'multiple'].includes(conditionField(condition)?.type) && conditionField(condition)?.options"
                 class="select select-bordered select-sm w-full bg-white h-11 pl-4 text-base font-normal"
+                :class="{ 'text-gray-300': !condition.value }"
                 required
                 @change="condition.value = $event.target.value"
               >
@@ -105,6 +119,7 @@
                   :key="option.uuid"
                   :value="option.uuid"
                   :selected="condition.value === option.uuid"
+                  class="text-base-content"
                 >
                   {{ option.value || `${t('option')} ${index + 1}` }}
                 </option>
@@ -123,12 +138,12 @@
           </button>
         </form>
         <div
-          v-if="field.conditions?.[0]?.field_uuid"
+          v-if="item.conditions?.[0]?.field_uuid"
           class="text-center w-full mt-4"
         >
           <button
             class="link"
-            @click="[conditions = [], delete field.conditions, validateSaveAndClose()]"
+            @click="[conditions = [], delete item.conditions, validateSaveAndClose()]"
           >
             {{ t('remove_condition') }}
           </button>
@@ -143,7 +158,7 @@ export default {
   name: 'ConditionModal',
   inject: ['t', 'save', 'template', 'withConditions'],
   props: {
-    field: {
+    item: {
       type: Object,
       required: true
     },
@@ -155,22 +170,26 @@ export default {
   emits: ['close'],
   data () {
     return {
-      conditions: this.field.conditions?.[0] ? JSON.parse(JSON.stringify(this.field.conditions)) : [{}]
+      conditions: this.item.conditions?.[0] ? JSON.parse(JSON.stringify(this.item.conditions)) : [{}]
     }
   },
   computed: {
     fields () {
-      return this.template.fields.reduce((acc, f) => {
-        if (f !== this.field && f.submitter_uuid === this.field.submitter_uuid) {
-          acc.push(f)
-        }
+      if (this.item.submitter_uuid) {
+        return this.template.fields.reduce((acc, f) => {
+          if (f !== this.item) {
+            acc.push(f)
+          }
 
-        return acc
-      }, [])
+          return acc
+        }, [])
+      } else {
+        return this.template.fields
+      }
     }
   },
   created () {
-    this.field.conditions ||= []
+    this.item.conditions ||= []
   },
   methods: {
     conditionField (condition) {
@@ -200,13 +219,13 @@ export default {
     },
     validateSaveAndClose () {
       if (!this.withConditions) {
-        return alert('Available only in Pro')
+        return alert(this.t('available_only_in_pro'))
       }
 
       if (this.conditions.find((f) => f.field_uuid)) {
-        this.field.conditions = this.conditions
+        this.item.conditions = this.conditions
       } else {
-        delete this.field.conditions
+        delete this.item.conditions
       }
 
       this.save()

app/javascript/template_builder/document.vue

@@ -7,6 +7,7 @@
       :input-mode="inputMode"
       :number="index"
       :editable="editable"
+      :data-page="index"
       :areas="areasIndex[index]"
       :allow-draw="allowDraw"
       :is-drag="isDrag"
@@ -16,6 +17,7 @@
       :draw-field="drawField"
       :draw-field-type="drawFieldType"
       :selected-submitter="selectedSubmitter"
+      :total-pages="sortedPreviewImages.length"
       :image="image"
       @drop-field="$emit('drop-field', {...$event, attachment_uuid: document.uuid })"
       @remove-area="$emit('remove-area', $event)"

app/javascript/template_builder/dropzone.vue

@@ -105,7 +105,7 @@ export default {
 
         this.upload()
       } else {
-        alert('Only PDF and images are supported.')
+        alert(this.t('only_pdf_and_images_are_supported'))
       }
     }
   }

app/javascript/template_builder/field.vue

@@ -23,7 +23,7 @@
           />
           <Contenteditable
             ref="name"
-            :model-value="(defaultField ? (field.title || field.name) : field.name) || defaultName"
+            :model-value="(defaultField ? (defaultField.title || field.title || field.name) : field.name) || defaultName"
             :editable="editable && !defaultField && field.type != 'heading'"
             :icon-inline="true"
             :icon-width="18"
@@ -192,14 +192,14 @@
             class="w-full input input-primary input-xs text-sm bg-transparent"
             :placeholder="`${t('option')} ${index + 1}`"
             type="text"
-            :readonly="!editable"
+            :readonly="!editable || defaultField"
             required
             dir="auto"
             @focus="maybeFocusOnOptionArea(option)"
             @blur="save"
           >
           <button
-            v-if="editable"
+            v-if="editable && !defaultField"
             class="text-sm w-3.5"
             tabindex="-1"
             @click="removeOption(option)"
@@ -208,11 +208,11 @@
           </button>
         </div>
         <div
-          v-if="field.options && !editable"
+          v-if="field.options && (!editable || defaultField)"
           class="pb-1"
         />
         <button
-          v-else-if="field.options && editable"
+          v-else-if="field.options && editable && !defaultField"
           class="text-center text-sm w-full pb-1"
           @click="addOption"
         >
@@ -236,7 +236,7 @@
       :to="modalContainerEl"
     >
       <ConditionsModal
-        :field="field"
+        :item="field"
         :build-default-name="buildDefaultName"
         @close="isShowConditionsModal = false"
       />
@@ -312,6 +312,7 @@ export default {
   },
   computed: {
     fieldNames: FieldType.computed.fieldNames,
+    fieldLabels: FieldType.computed.fieldLabels,
     dropdownBgColor () {
       return ['', null, 'transparent'].includes(this.backgroundColor) ? 'white' : this.backgroundColor
     },
@@ -364,11 +365,10 @@ export default {
       } else {
         const typeIndex = fields.filter((f) => f.type === field.type).indexOf(field)
 
-        if (this.field.type === 'heading') {
+        if (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}`
+          return `${this.fieldLabels[field.type]} ${typeIndex + 1}`
         }
       }
     },
@@ -392,7 +392,7 @@ export default {
       return this.sortedAreas[0] && this.$emit('scroll-to', this.sortedAreas[0])
     },
     closeDropdown () {
-      document.activeElement.blur()
+      this.$el.getRootNode().activeElement.blur()
     },
     addOption () {
       this.field.options.push({ value: '', uuid: v4() })

app/javascript/template_builder/field_settings.vue

@@ -27,7 +27,34 @@
     </label>
   </div>
   <div
-    v-if="['number'].includes(field.type)"
+    v-if="field.type === 'verification'"
+    class="py-1.5 px-1 relative"
+    @click.stop
+  >
+    <select
+      :placeholder="t('method')"
+      class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0 bg-transparent"
+      @change="[field.preferences ||= {}, field.preferences.method = $event.target.value, save()]"
+    >
+      <option
+        v-for="method in ['QeS', 'AeS']"
+        :key="method"
+        :value="method.toLowerCase()"
+        :selected="method.toLowerCase() === field.preferences?.method || (method === 'QeS' && !field.preferences?.method)"
+      >
+        {{ method }}
+      </option>
+    </select>
+    <label
+      :style="{ backgroundColor }"
+      class="absolute -top-1 left-2.5 px-1 h-4"
+      style="font-size: 8px"
+    >
+      {{ t('method') }}
+    </label>
+  </div>
+  <div
+    v-if="['number', 'cells'].includes(field.type)"
     class="py-1.5 px-1 relative"
     @click.stop
   >
@@ -36,7 +63,7 @@
       @change="[field.preferences ||= {}, field.preferences.align = $event.target.value, save()]"
     >
       <option
-        v-for="value in ['left', 'right', 'center']"
+        v-for="value in ['left', 'right', field.type === 'cells' ? null : 'center'].filter(Boolean)"
         :key="value"
         :selected="field.preferences?.align ? value === field.preferences.align : value === 'left'"
         :value="value"
@@ -212,16 +239,12 @@
         {{ t('any') }}
       </option>
       <option
-        value="drawn"
-        :selected="field.preferences?.format === 'drawn'"
+        v-for="type in ['drawn', 'typed', 'drawn_or_typed', 'upload']"
+        :key="type"
+        :value="type"
+        :selected="field.preferences?.format === type"
       >
-        {{ t('drawn') }}
-      </option>
-      <option
-        value="typed"
-        :selected="field.preferences?.format === 'typed'"
-      >
-        {{ t('typed') }}
+        {{ t(type) }}
       </option>
     </select>
     <label
@@ -233,14 +256,14 @@
     </label>
   </div>
   <li
-    v-if="withRequired && field.type != 'phone' && field.type != 'stamp'"
+    v-if="withRequired && field.type !== 'phone' && field.type !== 'stamp' && field.type !== 'verification'"
     @click.stop
   >
     <label class="cursor-pointer py-1.5">
       <input
         v-model="field.required"
         type="checkbox"
-        :disabled="!editable || defaultField"
+        :disabled="!editable || (defaultField && [true, false].includes(defaultField.required))"
         class="toggle toggle-xs"
         @update:model-value="save"
       >
@@ -465,6 +488,9 @@ export default {
     numberFormats () {
       return [
         'none',
+        'usd',
+        'eur',
+        'gbp',
         'comma',
         'dot',
         'space'
@@ -545,6 +571,12 @@ export default {
     formatNumber (number, format) {
       if (format === 'comma') {
         return new Intl.NumberFormat('en-US').format(number)
+      } else if (format === 'usd') {
+        return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
+      } else if (format === 'gbp') {
+        return new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
+      } else if (format === 'eur') {
+        return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
       } else if (format === 'dot') {
         return new Intl.NumberFormat('de-DE').format(number)
       } else if (format === 'space') {

app/javascript/template_builder/field_submitter.vue

@@ -9,7 +9,7 @@
         <div class="flex items-center space-x-2">
           <span
             class="w-3 h-3 flex-shrink-0 rounded-full"
-            :class="colors[submitters.indexOf(selectedSubmitter)]"
+            :class="colors[submitters.indexOf(selectedSubmitter) % colors.length]"
           />
           <Contenteditable
             v-model="selectedSubmitter.name"
@@ -53,7 +53,7 @@
               <span class="py-1 flex items-center">
                 <span
                   class="rounded-full w-3 h-3 ml-1 mr-3"
-                  :class="colors[index]"
+                  :class="colors[index % colors.length]"
                 />
                 <span>
                   {{ submitter.name }}
@@ -79,7 +79,7 @@
                 :stroke-width="1.6"
               />
               <span class="py-1">
-                {{ t('add') }} {{ names[submitters.length] }}
+                {{ t('add') }} {{ names[lastPartyIndex] }}
               </span>
             </a>
           </li>
@@ -101,7 +101,7 @@
     >
       <button
         class="mx-1 w-3 h-3 rounded-full"
-        :class="colors[submitters.indexOf(selectedSubmitter)]"
+        :class="colors[submitters.indexOf(selectedSubmitter) % colors.length]"
       />
     </label>
     <label
@@ -113,7 +113,7 @@
       <div class="flex items-center space-x-2">
         <span
           class="w-3 h-3 rounded-full"
-          :class="colors[submitters.indexOf(selectedSubmitter)]"
+          :class="colors[submitters.indexOf(selectedSubmitter) % colors.length]"
         />
         <Contenteditable
           v-model="selectedSubmitter.name"
@@ -143,6 +143,7 @@
       <li
         v-for="(submitter, index) in submitters"
         :key="submitter.uuid"
+        class="w-full"
       >
         <a
           href="#"
@@ -153,7 +154,7 @@
           <span class="py-1 flex items-center">
             <span
               class="rounded-full w-3 h-3 ml-1 mr-3"
-              :class="colors[index]"
+              :class="colors[index % colors.length]"
             />
             <span>
               {{ submitter.name }}
@@ -191,7 +192,10 @@
           </div>
         </a>
       </li>
-      <li v-if="submitters.length < names.length && editable && allowAddNew">
+      <li
+        v-if="submitters.length < names.length && editable && allowAddNew"
+        class="w-full"
+      >
         <a
           href="#"
           class="flex px-2"
@@ -202,7 +206,7 @@
             :stroke-width="1.6"
           />
           <span class="py-1">
-            {{ t('add') }} {{ names[submitters.length] }}
+            {{ t('add') }} {{ names[lastPartyIndex] }}
           </span>
         </a>
       </li>
@@ -215,6 +219,14 @@ import { IconUserPlus, IconTrashX, IconPlus, IconChevronUp, IconChevronDown } fr
 import Contenteditable from './contenteditable'
 import { v4 } from 'uuid'
 
+function getOrdinalSuffix (num) {
+  if (num % 10 === 1 && num % 100 !== 11) return 'st'
+  if (num % 10 === 2 && num % 100 !== 12) return 'nd'
+  if (num % 10 === 3 && num % 100 !== 13) return 'rd'
+
+  return 'th'
+}
+
 export default {
   name: 'FieldSubmitter',
   components: {
@@ -275,16 +287,6 @@ export default {
   computed: {
     colors () {
       return [
-        'bg-red-500',
-        'bg-sky-500',
-        'bg-emerald-500',
-        'bg-yellow-300',
-        'bg-purple-600',
-        'bg-pink-500',
-        'bg-cyan-500',
-        'bg-orange-500',
-        'bg-lime-500',
-        'bg-indigo-500',
         'bg-red-500',
         'bg-sky-500',
         'bg-emerald-500',
@@ -298,6 +300,14 @@ export default {
       ]
     },
     names () {
+      const generatedNames = []
+
+      for (let i = 21; i < 101; i++) {
+        const suffix = getOrdinalSuffix(i)
+
+        generatedNames.push(`${i}${suffix} ${this.t('party')}`)
+      }
+
       return [
         this.t('first_party'),
         this.t('second_party'),
@@ -318,9 +328,19 @@ export default {
         this.t('seventeenth_party'),
         this.t('eighteenth_party'),
         this.t('nineteenth_party'),
-        this.t('twentieth_party')
+        this.t('twentieth_party'),
+        ...generatedNames
       ]
     },
+    lastPartyIndex () {
+      const index = Math.max(...this.submitters.map((s) => this.names.indexOf(s.name)))
+
+      if (index !== -1) {
+        return index + 1
+      } else {
+        return this.submitters.length
+      }
+    },
     selectedSubmitter () {
       return this.submitters.find((e) => e.uuid === this.modelValue)
     }
@@ -330,7 +350,7 @@ export default {
       this.$emit('update:model-value', submitter.uuid)
     },
     remove (submitter) {
-      if (window.confirm(this.t('are_you_sure'))) {
+      if (window.confirm(this.t('are_you_sure_'))) {
         this.$emit('remove', submitter)
       }
     },
@@ -353,7 +373,7 @@ export default {
     },
     addSubmitter () {
       const newSubmitter = {
-        name: this.names[this.submitters.length],
+        name: this.names[this.lastPartyIndex],
         uuid: v4()
       }
 
@@ -363,7 +383,7 @@ export default {
       this.$emit('new-submitter', newSubmitter)
     },
     closeDropdown () {
-      document.activeElement.blur()
+      this.$el.getRootNode().activeElement.blur()
     }
   }
 }

app/javascript/template_builder/field_type.vue

@@ -30,7 +30,7 @@
         v-for="(icon, type) in fieldIconsSorted"
         :key="type"
       >
-        <li v-if="(fieldTypes.length === 0 || fieldTypes.includes(type)) && (withPhone || type != 'phone') && (withPayment || type != 'payment')">
+        <li v-if="(fieldTypes.length === 0 || fieldTypes.includes(type)) && (withPhone || type != 'phone') && (withPayment || type != 'payment') && (withVerification || type != 'verification')">
           <a
             href="#"
             class="text-sm py-1 px-2"
@@ -51,11 +51,11 @@
 </template>
 
 <script>
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1, IconHeading } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1, IconHeading, IconId } from '@tabler/icons-vue'
 
 export default {
   name: 'FiledTypeDropdown',
-  inject: ['withPhone', 'withPayment', 't', 'fieldTypes'],
+  inject: ['withPhone', 'withPayment', 'withVerification', 't', 'fieldTypes'],
   props: {
     modelValue: {
       type: String,
@@ -111,7 +111,28 @@ export default {
         cells: this.t('cells'),
         stamp: this.t('stamp'),
         payment: this.t('payment'),
-        phone: this.t('phone')
+        phone: this.t('phone'),
+        verification: this.t('verify_id')
+      }
+    },
+    fieldLabels () {
+      return {
+        text: this.t('text_field'),
+        signature: this.t('signature_field'),
+        initials: this.t('initials_field'),
+        date: this.t('date_field'),
+        number: this.t('number_field'),
+        image: this.t('image_field'),
+        file: this.t('file_field'),
+        select: this.t('select_field'),
+        checkbox: this.t('checkbox_field'),
+        multiple: this.t('multiple_field'),
+        radio: this.t('radio_field'),
+        cells: this.t('cells_field'),
+        stamp: this.t('stamp_field'),
+        payment: this.t('payment_field'),
+        phone: this.t('phone_field'),
+        verification: this.t('verify_id')
       }
     },
     fieldIcons () {
@@ -131,7 +152,8 @@ export default {
         cells: IconColumns3,
         stamp: IconRubberStamp,
         payment: IconCreditCard,
-        phone: IconPhoneCheck
+        phone: IconPhoneCheck,
+        verification: IconId
       }
     },
     fieldIconsSorted () {
@@ -148,7 +170,7 @@ export default {
   },
   methods: {
     closeDropdown () {
-      document.activeElement.blur()
+      this.$el.getRootNode().activeElement.blur()
     }
   }
 }

app/javascript/template_builder/fields.vue

@@ -5,7 +5,7 @@
       class="roles-dropdown w-full rounded-lg"
       :style="withStickySubmitters ? { backgroundColor } : {}"
       :submitters="submitters"
-      :menu-style="{ backgroundColor: ['', null, 'transparent'].includes(backgroundColor) ? 'white' : backgroundColor }"
+      :menu-style="{ overflow: 'auto', display: 'flex', flexDirection: 'row', maxHeight: 'calc(100vh - 120px)', backgroundColor: ['', null, 'transparent'].includes(backgroundColor) ? 'white' : backgroundColor }"
       :editable="editable && !defaultSubmitters.length"
       @new-submitter="save"
       @remove="removeSubmitter"
@@ -26,7 +26,7 @@
       :field="field"
       :type-index="fields.filter((f) => f.type === field.type).indexOf(field)"
       :editable="editable && (!fieldsDragFieldRef.value || fieldsDragFieldRef.value !== field)"
-      :default-field="defaultFields.find((f) => f.name === field.name)"
+      :default-field="defaultFieldsIndex[field.name]"
       :draggable="editable"
       @dragstart="fieldsDragFieldRef.value = field"
       @dragend="fieldsDragFieldRef.value = null"
@@ -111,14 +111,14 @@
       :key="type"
     >
       <button
-        v-if="(fieldTypes.length === 0 || fieldTypes.includes(type)) && (withPhone || type != 'phone') && (withPayment || type != 'payment')"
+        v-if="(fieldTypes.length === 0 || fieldTypes.includes(type)) && (withPhone || type != 'phone') && (withPayment || type != 'payment') && (withVerification || type != 'verification')"
         draggable="true"
         class="field-type-button group flex items-center justify-center border border-dashed w-full rounded relative"
         :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')"
-        @click="['file', 'payment'].includes(type) ? $emit('add-field', type) : $emit('set-draw-type', type)"
+        @click="['file', 'payment', 'verification'].includes(type) ? $emit('add-field', type) : $emit('set-draw-type', type)"
       >
         <div
           class="flex items-console transition-all cursor-grab h-full absolute left-0"
@@ -137,10 +137,36 @@
         v-else-if="type == 'phone' && (fieldTypes.length === 0 || fieldTypes.includes(type))"
         class="tooltip tooltip-bottom flex"
         :class="{'tooltip-bottom-end': withPayment, 'tooltip-bottom': !withPayment }"
-        data-tip="Unlock SMS-verified phone number field with paid plan. Use text field for phone numbers without verification."
+        :data-tip="t('unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification')"
       >
         <a
-          href="https://www.docuseal.co/pricing"
+          href="https://www.docuseal.com/pricing"
+          target="_blank"
+          class="opacity-50 flex items-center justify-center border border-dashed border-base-300 w-full rounded relative"
+          :style="{ backgroundColor }"
+        >
+          <div class="w-0 absolute left-0">
+            <IconLock
+              width="18"
+              height="18"
+              stroke-width="1.5"
+            />
+          </div>
+          <div class="flex items-center flex-col px-2 py-2">
+            <component :is="icon" />
+            <span class="text-xs mt-1">
+              {{ fieldNames[type] }}
+            </span>
+          </div>
+        </a>
+      </div>
+      <div
+        v-else-if="withVerification === false && type == 'verification' && (fieldTypes.length === 0 || fieldTypes.includes(type))"
+        class="tooltip tooltip-bottom flex tooltip-bottom-start"
+        :data-tip="t('obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more')"
+      >
+        <a
+          href="https://www.docuseal.com/contact"
           target="_blank"
           class="opacity-50 flex items-center justify-center border border-dashed border-base-300 w-full rounded relative"
           :style="{ backgroundColor }"
@@ -168,13 +194,13 @@
   >
     <ul class="list-disc list-outside ml-3">
       <li>
-        Draw a text field on the page with a mouse
+        {{ t('draw_a_text_field_on_the_page_with_a_mouse') }}
       </li>
       <li>
-        Drag &amp; drop any other field type on the page
+        {{ t('drag_and_drop_any_other_field_type_on_the_page') }}
       </li>
       <li>
-        Click on the field type above to start drawing it
+        {{ t('click_on_the_field_type_above_to_start_drawing_it') }}
       </li>
     </ul>
   </div>
@@ -197,12 +223,21 @@ export default {
     IconDrag,
     IconLock
   },
-  inject: ['save', 'backgroundColor', 'withPhone', 'withPayment', 't', 'fieldsDragFieldRef'],
+  inject: ['save', 'backgroundColor', 'withPhone', 'withVerification', 'withPayment', 't', 'fieldsDragFieldRef'],
   props: {
     fields: {
       type: Array,
       required: true
     },
+    withFieldsSearch: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
+    template: {
+      type: Object,
+      required: true
+    },
     withHelp: {
       type: Boolean,
       required: false,
@@ -267,7 +302,18 @@ export default {
     fieldNames: FieldType.computed.fieldNames,
     fieldIcons: FieldType.computed.fieldIcons,
     isShowFieldSearch () {
-      return this.submitterDefaultFields.length > 15
+      if (this.withFieldsSearch === false) {
+        return false
+      } else {
+        return this.submitterDefaultFields.length > 15
+      }
+    },
+    defaultFieldsIndex () {
+      return this.defaultFields.reduce((acc, field) => {
+        acc[field.name] = field
+
+        return acc
+      }, {})
     },
     fieldIconsSorted () {
       if (this.fieldTypes.length) {
@@ -290,7 +336,7 @@ export default {
     },
     filteredSubmitterDefaultFields () {
       if (this.defaultFieldsSearch) {
-        return this.submitterDefaultFields.filter((f) => f.name.toLowerCase().includes(this.defaultFieldsSearch.toLowerCase()))
+        return this.submitterDefaultFields.filter((f) => (f.title || f.name).toLowerCase().includes(this.defaultFieldsSearch.toLowerCase()))
       } else {
         return this.submitterDefaultFields
       }
@@ -354,6 +400,14 @@ export default {
         })
       })
 
+      this.template.schema.forEach((item) => {
+        (item.conditions || []).forEach((c) => {
+          if (c.field_uuid === field.uuid) {
+            item.conditions.splice(item.conditions.indexOf(c), 1)
+          }
+        })
+      })
+
       this.save()
     }
   }

app/javascript/template_builder/formula_modal.vue

@@ -23,7 +23,7 @@
           class="bg-base-300 rounded-xl py-2 px-3 text-center"
         >
           <a
-            href="https://www.docuseal.co/pricing"
+            href="https://www.docuseal.com/pricing"
             target="_blank"
             class="link"
           >{{ t('available_in_pro') }}</a>
@@ -195,7 +195,7 @@ export default {
     },
     validateSaveAndClose () {
       if (!this.withFormula) {
-        return alert('Available only in Pro')
+        return alert(this.t('available_only_in_pro'))
       }
 
       const normalizedFormula = this.normalizeFormula(this.formula)

app/javascript/template_builder/i18n.js

@@ -1,5 +1,12 @@
 const en = {
+  party: 'Party',
+  method: 'Method',
+  reorder_fields: 'Reorder fields',
+  verify_id: 'Verify ID',
+  obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more: 'Obtain qualified electronic signature (QeS) with the trusted provider. Click to learn more.',
   editable: 'Editable',
+  recurrent: 'Recurrent',
+  one_off: 'One-off',
   search_field: 'Search field',
   field_not_found: 'Field not found',
   clear: 'Clear',
@@ -29,7 +36,7 @@ const en = {
   select_value_: 'Select value...',
   remove_condition: 'Remove condition',
   add_condition: 'Add condition',
-  are_you_sure: 'Are you sure?',
+  are_you_sure_: 'Are you sure?',
   sign_yourself: 'Sign Yourself',
   set_signing_date: 'Set signing date',
   signing_date: 'Signing Date',
@@ -44,9 +51,11 @@ const en = {
   cancel: 'Cancel',
   any: 'Any',
   drawn: 'Drawn',
+  drawn_or_typed: 'Drawn or Typed',
+  upload: 'Upload',
   formula: 'Formula',
   typed: 'Typed',
-  draw_field_on_the_document: 'Draw {field} field on the document',
+  draw_field_on_the_document: 'Draw a field on the document',
   click_to_upload: 'Click to upload',
   or_drag_and_drop_files: 'or drag and drop files',
   uploading: 'Uploading',
@@ -101,9 +110,30 @@ const en = {
   stamp: 'Stamp',
   payment: 'Payment',
   phone: 'Phone',
-  field: 'Field',
-  group: 'Group',
+  text_field: 'Text Field',
+  signature_field: 'Signature Field',
+  initials_field: 'Initials Field',
+  date_field: 'Date Field',
+  number_field: 'Number Field',
+  image_field: 'Image Field',
+  file_field: 'File Field',
+  select_field: 'Select Field',
+  checkbox_field: 'Checkbox Field',
+  multiple_field: 'Multiple Select Field',
+  radio_field: 'Radio Group Field',
+  cells_field: 'Cells Field',
+  stamp_field: 'Stamp Field',
+  payment_field: 'Payment Field',
+  phone_field: 'Phone Field',
   draw_a_text_field_on_the_page_with_a_mouse: 'Draw a text field on the page with a mouse',
+  drag_and_drop_any_other_field_type_on_the_page: 'Drag & drop any other field type on the page',
+  click_on_the_field_type_above_to_start_drawing_it: 'Click on the field type above to start drawing it',
+  please_draw_fields_to_prepare_the_document: 'Please draw fields to prepare the document.',
+  only_pdf_and_images_are_supported: 'Only PDF and images are supported.',
+  unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'Unlock SMS-verified phone number field with paid plan. Use text field for phone numbers without verification.',
+  available_only_in_pro: 'Available only in Pro',
+  failed_to_download_files: 'Failed to download files',
+  please_add_fields_for_the_submitter_name_or_remove_the_submitter_name_if_not_needed: 'Please add fields for the {submitter_name}. Or, remove the {submitter_name} if not needed.',
   draw_field: 'Draw {field} Field',
   replace: 'Replace',
   uploading_: 'Uploading...',
@@ -125,7 +155,819 @@ const en = {
   preferences: 'Preferences',
   available_in_pro: 'Available in Pro',
   some_fields_are_missing_in_the_formula: 'Some fields are missing in the formula.',
-  learn_more: 'Learn more'
+  learn_more: 'Learn more',
+  and: 'and',
+  or: 'or'
 }
 
-export { en }
+const es = {
+  party: 'Parte',
+  method: 'Método',
+  reorder_fields: 'Reordenar campos',
+  verify_id: 'Verificar ID',
+  obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more: 'Obtenga una firma electrónica cualificada (QeS) con el proveedor de confianza. Haga clic para obtener más información.',
+  recurrent: 'Recurrente',
+  one_off: 'Único',
+  editable: 'Editable',
+  search_field: 'Campo de búsqueda',
+  field_not_found: 'Campo no encontrado',
+  clear: 'Borrar',
+  type_value: 'Escriba valor',
+  align: 'Alinear',
+  add_all_required_fields_to_continue: 'Agregar todos los campos requeridos para continuar',
+  uploaded_pdf_contains_form_fields_keep_or_remove_them: 'El PDF cargado tiene campos. ¿Mantenerlos o eliminarlos?',
+  keep: 'Mantener',
+  left: 'Izquierda',
+  heading: 'Encabezado',
+  validation: 'Validación',
+  add_blank_page: 'Agregar página en blanco',
+  right: 'Derecha',
+  center: 'Centro',
+  with_logo: 'Con logotipo',
+  description: 'Descripción',
+  signing_date: 'Fecha de Firma',
+  display_title: 'Título de visualización',
+  unchecked: 'No marcado',
+  price: 'Precio',
+  equal: 'Igual',
+  not_equal: 'No es igual',
+  contains: 'Contiene',
+  does_not_contain: 'No contiene',
+  not_empty: 'No vacío',
+  empty: 'Vacío',
+  select_field_: 'Seleccionar campo...',
+  select_value_: 'Seleccionar valor...',
+  remove_condition: 'Eliminar condición',
+  add_condition: 'Agregar condición',
+  condition: 'Condición',
+  formula: 'Fórmula',
+  edit: 'Editar',
+  settings: 'Configuración',
+  up: 'Arriba',
+  down: 'Abajo',
+  set_signing_date: 'Establecer fecha de firma',
+  are_you_sure_: '¿Estás seguro?',
+  sign_yourself: 'Firma tú mismo',
+  checked: 'Seleccionado',
+  send: 'Enviar',
+  remove: 'Eliminar',
+  save: 'Guardar',
+  cancel: 'Cancelar',
+  or_add_field_without_drawing: 'O añadir campo sin dibujar',
+  draw_field_on_the_document: 'Dibujar un campo en el documento',
+  click_to_upload: 'Haz clic para cargar',
+  or_drag_and_drop_files: 'o arrastra y suelta archivos',
+  uploading: 'Subiendo',
+  processing_: 'Procesando...',
+  add_pdf_documents_or_images: 'Agregar documentos PDF o imágenes',
+  add_documents_or_images: 'Agregar documentos o imágenes',
+  required: 'Requerido',
+  default_value: 'Valor predeterminado',
+  format: 'Formato',
+  read_only: 'Solo lectura',
+  page: 'Página',
+  draw_new_area: 'Dibujar nueva área',
+  copy_to_all_pages: 'Copiar a todas las páginas',
+  add_option: 'Agregar opción',
+  option: 'Opción',
+  first_party: 'Primera Parte',
+  second_party: 'Segunda Parte',
+  third_party: 'Tercera Parte',
+  fourth_party: 'Cuarta Parte',
+  fifth_party: 'Quinta Parte',
+  sixth_party: 'Sexta Parte',
+  seventh_party: 'Séptima Parte',
+  eighth_party: 'Octava Parte',
+  ninth_party: 'Novena Parte',
+  tenth_party: 'Décima Parte',
+  eleventh_party: 'Undécimo Partido',
+  twelfth_party: 'Duodécimo Partido',
+  thirteenth_party: 'Decimotercer Partido',
+  fourteenth_party: 'Catorceavo Partido',
+  fifteenth_party: 'Quinceavo Partido',
+  sixteenth_party: 'Dieciséisavo Partido',
+  seventeenth_party: 'Diecisieteavo Partido',
+  eighteenth_party: 'Dieciochoavo Partido',
+  nineteenth_party: 'Decimonovena Fiesta',
+  twentieth_party: 'Vigésima Fiesta',
+  draw: 'Dibujar',
+  add: 'Agregar',
+  text: 'Texto',
+  signature: 'Firma',
+  initials: 'Iniciales',
+  date: 'Fecha',
+  number: 'Número',
+  image: 'Imagen',
+  file: 'Archivo',
+  select: 'Seleccionar',
+  checkbox: 'Casilla',
+  multiple: 'Múltiple',
+  radio: 'Radio',
+  cells: 'Celdas',
+  stamp: 'Sello',
+  payment: 'Pago',
+  phone: 'Teléfono',
+  text_field: 'Campo de Texto',
+  signature_field: 'Campo de Firma',
+  initials_field: 'Campo de Iniciales',
+  date_field: 'Campo de Fecha',
+  number_field: 'Campo de Número',
+  image_field: 'Campo de Imagen',
+  file_field: 'Campo de Archivo',
+  select_field: 'Campo de Selección',
+  checkbox_field: 'Campo de Casilla',
+  multiple_field: 'Campo Múltiple',
+  radio_field: 'Campo de Grupo Radio',
+  cells_field: 'Campo de Celdas',
+  stamp_field: 'Campo de Sello',
+  payment_field: 'Campo de Pago',
+  phone_field: 'Campo de Teléfono',
+  draw_a_text_field_on_the_page_with_a_mouse: 'Dibujar un campo de texto en la página con el mouse',
+  drag_and_drop_any_other_field_type_on_the_page: 'Arrastra y suelta cualquier otro tipo de campo en la página',
+  click_on_the_field_type_above_to_start_drawing_it: 'Haz clic en el tipo de campo de arriba para comenzar a dibujarlo',
+  please_draw_fields_to_prepare_the_document: 'Por favor, dibuja los campos para preparar el documento.',
+  only_pdf_and_images_are_supported: 'Solo se admiten PDF e imágenes.',
+  unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'Desbloquea el campo de número de teléfono verificado por SMS con un plan pago. Usa el campo de texto para números de teléfono sin verificación.',
+  available_only_in_pro: 'Disponible solo en Pro',
+  failed_to_download_files: 'Error al descargar los archivos',
+  please_add_fields_for_the_submitter_name_or_remove_the_submitter_name_if_not_needed: 'Por favor, añade campos para {submitter_name} o elimina {submitter_name} si no es necesario.',
+  draw_field: 'Dibujar campo {field}',
+  replace: 'Reemplazar',
+  uploading_: 'Subiendo...',
+  add_document: 'Subir',
+  any: 'Cualquier',
+  drawn: 'Dibujado',
+  drawn_or_typed: 'Dibujado o Escrito',
+  upload: 'Subir',
+  typed: 'Escrito',
+  none: 'Ninguno',
+  ssn: 'SSN',
+  ein: 'EIN',
+  email: 'Correo electrónico',
+  url: 'URL',
+  zip: 'ZIP',
+  custom: 'Personalizado',
+  numbers_only: 'Solo números',
+  letters_only: 'Solo letras',
+  regexp_validation: 'Validación de expresión regular',
+  enter_pdf_password: 'Ingrese la contraseña del PDF',
+  wrong_password: 'Contraseña incorrecta',
+  currency: 'Moneda',
+  save_and_preview: 'Guardar y previsualizar',
+  preferences: 'Preferencias',
+  available_in_pro: 'Disponible en Pro',
+  some_fields_are_missing_in_the_formula: 'Faltan algunos campos en la fórmula.',
+  learn_more: 'Aprende más',
+  and: 'y',
+  or: 'o'
+}
+
+const it = {
+  party: 'Parte',
+  method: 'Metodo',
+  reorder_fields: 'Riordina i campi',
+  verify_id: 'Verifica ID',
+  obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more: 'Ottieni una firma elettronica qualificata (QeS) con il fornitore di fiducia. Clicca per saperne di più.',
+  ricorrente: 'Ricorrente',
+  una_volta: 'Una volta',
+  editable: 'Modificabile',
+  search_field: 'Campo di ricerca',
+  field_not_found: 'Campo non trovato',
+  clear: 'Cancella',
+  align: 'Allinea',
+  add_all_required_fields_to_continue: 'Aggiungi tutti i campi obbligatori per continuare',
+  uploaded_pdf_contains_form_fields_keep_or_remove_them: 'Il PDF caricato contiene campi del modulo. Mantenerli o rimuoverli?',
+  keep: 'Mantieni',
+  left: 'Sinistra',
+  heading: 'Intestazione',
+  validation: 'Validazione',
+  add_blank_page: 'Aggiungi pagina vuota',
+  right: 'Destra',
+  center: 'Centro',
+  description: 'Descrizione',
+  display_title: 'Mostra titolo',
+  with_logo: 'Con logo',
+  unchecked: 'Non selezionato',
+  price: 'Prezzo',
+  type_value: 'Inserisci valore',
+  equal: 'Uguale',
+  not_equal: 'Non uguale',
+  contains: 'Contiene',
+  does_not_contain: 'Non contiene',
+  not_empty: 'Non vuoto',
+  empty: 'Vuoto',
+  select_field_: 'Seleziona campo...',
+  select_value_: 'Seleziona valore...',
+  remove_condition: 'Rimuovi condizione',
+  add_condition: 'Aggiungi condizione',
+  are_you_sure_: 'Sei sicuro?',
+  sign_yourself: 'Firma te stesso',
+  set_signing_date: 'Imposta data di firma',
+  signing_date: 'Data di firma',
+  send: 'Invia',
+  remove: 'Rimuovi',
+  edit: 'Modifica',
+  settings: 'Impostazioni',
+  up: 'Su',
+  down: 'Giù',
+  checked: 'Selezionato',
+  save: 'Salva',
+  cancel: 'Annulla',
+  any: 'Qualsiasi',
+  drawn: 'Disegnato',
+  drawn_or_typed: 'Disegnato o Digitato',
+  upload: 'Caricare',
+  formula: 'Formula',
+  typed: 'Digitato',
+  draw_field_on_the_document: 'Disegnare un campo sul documento',
+  click_to_upload: 'Clicca per caricare',
+  or_drag_and_drop_files: 'o trascina e rilascia i file',
+  uploading: 'Caricamento in corso',
+  processing_: 'Elaborazione...',
+  add_pdf_documents_or_images: 'Aggiungi documenti PDF o immagini',
+  add_documents_or_images: 'Aggiungi documenti o immagini',
+  required: 'Obbligatorio',
+  default_value: 'Valore predefinito',
+  format: 'Formato',
+  read_only: 'Sola lettura',
+  page: 'Pagina',
+  draw_new_area: 'Disegna nuova area',
+  copy_to_all_pages: 'Copia in tutte le pagine',
+  add_option: 'Aggiungi opzione',
+  option: 'Opzione',
+  condition: 'Condizione',
+  first_party: 'Prima parte',
+  second_party: 'Seconda parte',
+  third_party: 'Terza parte',
+  fourth_party: 'Quarta parte',
+  fifth_party: 'Quinta parte',
+  sixth_party: 'Sesta parte',
+  seventh_party: 'Settima parte',
+  eighth_party: 'Ottava parte',
+  ninth_party: 'Nona parte',
+  tenth_party: 'Decima parte',
+  eleventh_party: 'Undicesima parte',
+  twelfth_party: 'Dodicesima parte',
+  thirteenth_party: 'Tredicesima parte',
+  fourteenth_party: 'Quattordicesima parte',
+  fifteenth_party: 'Quindicesima parte',
+  sixteenth_party: 'Sedicesima parte',
+  seventeenth_party: 'Diciassettesima parte',
+  eighteenth_party: 'Diciottesima parte',
+  nineteenth_party: 'Diciannovesima parte',
+  twentieth_party: 'Ventesima parte',
+  draw: 'Disegna',
+  add: 'Aggiungi',
+  or_add_field_without_drawing: 'Oppure aggiungi campo senza disegno',
+  text: 'Testo',
+  number: 'Numero',
+  signature: 'Firma',
+  initials: 'Iniziali',
+  date: 'Data',
+  image: 'Immagine',
+  file: 'File',
+  select: 'Seleziona',
+  checkbox: 'Checkbox',
+  multiple: 'Multiplo',
+  radio: 'Radio',
+  cells: 'Celle',
+  stamp: 'Timbro',
+  payment: 'Pagamento',
+  phone: 'Telefono',
+  text_field: 'Campo di Testo',
+  signature_field: 'Campo di Firma',
+  initials_field: 'Campo di Iniziali',
+  date_field: 'Campo Data',
+  number_field: 'Campo Numero',
+  image_field: 'Campo Immagine',
+  file_field: 'Campo File',
+  select_field: 'Campo di Selezione',
+  checkbox_field: 'Campo di Checkbox',
+  multiple_field: 'Campo Selezione Multipla',
+  radio_field: 'Campo di Gruppo Radio',
+  cells_field: 'Campo Celle',
+  stamp_field: 'Campo Timbro',
+  payment_field: 'Campo Pagamento',
+  phone_field: 'Campo Telefono',
+  draw_a_text_field_on_the_page_with_a_mouse: 'Disegna un campo di testo sulla pagina con il mouse',
+  drag_and_drop_any_other_field_type_on_the_page: 'Trascina e rilascia qualsiasi altro tipo di campo sulla pagina',
+  click_on_the_field_type_above_to_start_drawing_it: 'Clicca sul tipo di campo sopra per iniziare a disegnarlo',
+  please_draw_fields_to_prepare_the_document: 'Per favore, disegna i campi per preparare il documento.',
+  only_pdf_and_images_are_supported: 'Sono supportati solo PDF e immagini.',
+  unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'Sblocca il campo numero di telefono verificato tramite SMS con un piano a pagamento. Usa il campo di testo per numeri di telefono senza verifica.',
+  available_only_in_pro: 'Disponibile solo in Pro',
+  failed_to_download_files: 'Impossibile scaricare i file',
+  please_add_fields_for_the_submitter_name_or_remove_the_submitter_name_if_not_needed: 'Aggiungi campi per {submitter_name} o rimuovi {submitter_name} se non necessario.',
+  draw_field: 'Disegna il campo {field}',
+  replace: 'Sostituisci',
+  uploading_: 'Caricamento in corso...',
+  add_document: 'Aggiungi',
+  none: 'Nessuno',
+  ssn: 'SSN',
+  ein: 'EIN',
+  email: 'Email',
+  url: 'URL',
+  zip: 'CAP',
+  custom: 'Personalizzato',
+  numbers_only: 'Solo numeri',
+  letters_only: 'Solo lettere',
+  regexp_validation: 'Validazione regexp',
+  enter_pdf_password: 'Inserisci password PDF',
+  wrong_password: 'Password errata',
+  currency: 'Valuta',
+  save_and_preview: 'Salva e Anteprima',
+  preferences: 'Preferenze',
+  available_in_pro: 'Disponibile in Pro',
+  some_fields_are_missing_in_the_formula: 'Alcuni campi mancano nella formula.',
+  learn_more: 'Scopri di più',
+  and: 'e',
+  or: 'o'
+}
+
+const pt = {
+  party: 'Parte',
+  method: 'Método',
+  reorder_fields: 'Reorganizar campos',
+  verify_id: 'Verificar ID',
+  obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more: 'Obtenha a assinatura eletrônica qualificada (QeS) com o provedor confiável. Clique para saber mais.',
+  recurrent: 'Recurrente',
+  one_off: 'Único',
+  editable: 'Editável',
+  search_field: 'Campo de busca',
+  field_not_found: 'Campo não encontrado',
+  clear: 'Limpar',
+  type_value: 'Digite valor',
+  add_all_required_fields_to_continue: 'Adicione todos os campos obrigatórios para continuar',
+  uploaded_pdf_contains_form_fields_keep_or_remove_them: 'O PDF carregado contém campos. Manter ou removê-los?',
+  keep: 'Manter',
+  align: 'Alinhar',
+  left: 'Esquerda',
+  heading: 'Cabeçalho',
+  validation: 'Validação',
+  add_blank_page: 'Adicionar página em branco',
+  right: 'Direita',
+  center: 'Centro',
+  with_logo: 'Com logotipo',
+  description: 'Descrição',
+  display_title: 'Título de exibição',
+  signing_date: 'Data da Assinatura',
+  unchecked: 'Não marcado',
+  price: 'Preço',
+  equal: 'Igual',
+  not_equal: 'Não é igual',
+  contains: 'Contém',
+  does_not_contain: 'Não contém',
+  not_empty: 'Não vazio',
+  empty: 'Vazio',
+  add_condition: 'Adicionar condição',
+  select_field_: 'Selecionar campo...',
+  select_value_: 'Selecionar valor...',
+  remove_condition: 'Remover condição',
+  condition: 'Condição',
+  formula: 'Fórmula',
+  edit: 'Editar',
+  settings: 'Configurações',
+  up: 'Para cima',
+  down: 'Para baixo',
+  set_signing_date: 'Definir data de assinatura',
+  are_you_sure_: 'Tem certeza?',
+  sign_yourself: 'Assine você mesmo',
+  checked: 'Marcado',
+  send: 'Enviar',
+  remove: 'Remover',
+  save: 'Salvar',
+  cancel: 'Cancelar',
+  or_add_field_without_drawing: 'Ou adicione campo sem desenhar',
+  draw_field_on_the_document: 'Desenhar um campo no documento',
+  click_to_upload: 'Clique para enviar',
+  or_drag_and_drop_files: 'ou arraste e solte arquivos',
+  uploading: 'Carregando',
+  processing_: 'Processando...',
+  add_pdf_documents_or_images: 'Adicionar documentos PDF ou imagens',
+  add_documents_or_images: 'Adicionar documentos ou imagens',
+  required: 'Obrigatório',
+  default_value: 'Valor padrão',
+  format: 'Formato',
+  read_only: 'Somente leitura',
+  page: 'Página',
+  draw_new_area: 'Desenhar nova área',
+  copy_to_all_pages: 'Copiar para todas as páginas',
+  add_option: 'Adicionar opção',
+  option: 'Opção',
+  first_party: 'Primeira Parte',
+  second_party: 'Segunda Parte',
+  third_party: 'Terceira Parte',
+  fourth_party: 'Quarta Parte',
+  fifth_party: 'Quinta Parte',
+  sixth_party: 'Sexta Parte',
+  seventh_party: 'Sétima Parte',
+  eighth_party: 'Oitava Parte',
+  ninth_party: 'Nona Parte',
+  tenth_party: 'Décima Parte',
+  eleventh_party: 'Décima Primeira Parte',
+  twelfth_party: 'Décima Segunda Parte',
+  thirteenth_party: 'Décima Terceira Parte',
+  fourteenth_party: 'Décima Quarta Parte',
+  fifteenth_party: 'Décima Quinta Parte',
+  sixteenth_party: 'Décima Sexta Parte',
+  seventeenth_party: 'Décima Sétima Parte',
+  eighteenth_party: 'Décima Oitava Parte',
+  nineteenth_party: 'Décima Nona Parte',
+  twentieth_party: 'Vigésima Parte',
+  draw: 'Desenhar',
+  add: 'Adicionar',
+  text: 'Texto',
+  signature: 'Assinatura',
+  initials: 'Rúbrica',
+  date: 'Data',
+  number: 'Número',
+  image: 'Imagem',
+  file: 'Arquivo',
+  select: 'Selecionar',
+  checkbox: 'Caixa',
+  multiple: 'Múltiplo',
+  radio: 'Rádio',
+  cells: 'Células',
+  stamp: 'Carimbo',
+  payment: 'Pagamento',
+  phone: 'Telefone',
+  text_field: 'Campo de Texto',
+  signature_field: 'Campo de Assinatura',
+  initials_field: 'Campo de Rúbrica',
+  date_field: 'Campo de Data',
+  number_field: 'Campo de Número',
+  image_field: 'Campo de Imagem',
+  file_field: 'Campo de Arquivo',
+  select_field: 'Campo de Seleção',
+  checkbox_field: 'Campo de Caixa',
+  multiple_field: 'Campo de Opção Múltipla',
+  radio_field: 'Campo de Grupo Rádio',
+  cells_field: 'Campo de Células',
+  stamp_field: 'Campo de Carimbo',
+  payment_field: 'Campo de Pagamento',
+  phone_field: 'Campo de Telefone',
+  draw_a_text_field_on_the_page_with_a_mouse: 'Desenhar um campo de texto na página com o mouse',
+  drag_and_drop_any_other_field_type_on_the_page: 'Arraste e solte qualquer outro tipo de campo na página',
+  click_on_the_field_type_above_to_start_drawing_it: 'Clique no tipo de campo acima para começar a desenhá-lo',
+  please_draw_fields_to_prepare_the_document: 'Por favor, desenhe os campos para preparar o documento.',
+  only_pdf_and_images_are_supported: 'Apenas PDFs e imagens são suportados.',
+  unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'Desbloqueie o campo de número de telefone verificado por SMS com um plano pago. Use o campo de texto para números de telefone sem verificação.',
+  available_only_in_pro: 'Disponível apenas no Pro',
+  failed_to_download_files: 'Falha ao baixar arquivos',
+  please_add_fields_for_the_submitter_name_or_remove_the_submitter_name_if_not_needed: 'Adicione campos para {submitter_name} ou remova {submitter_name} se não for necessário.',
+  draw_field: 'Desenhar campo {field}',
+  replace: 'Substituir',
+  uploading_: 'Carregando...',
+  add_document: 'Enviar',
+  any: 'Qualquer',
+  drawn: 'Desenhado',
+  drawn_or_typed: 'Desenhado ou Digitado',
+  upload: 'Carregar',
+  typed: 'Digitado',
+  none: 'Nenhum',
+  ssn: 'SSN',
+  ein: 'EIN',
+  email: 'Email',
+  url: 'URL',
+  zip: 'ZIP',
+  custom: 'Personalizado',
+  numbers_only: 'Somente números',
+  letters_only: 'Somente letras',
+  regexp_validation: 'Validação de expressão regular',
+  enter_pdf_password: 'Digite a senha do PDF',
+  wrong_password: 'Senha incorreta',
+  currency: 'Moeda',
+  save_and_preview: 'Salvar e Pré-visualizar',
+  preferences: 'Preferências',
+  available_in_pro: 'Disponível no Pro',
+  some_fields_are_missing_in_the_formula: 'Faltam alguns campos na fórmula.',
+  learn_more: 'Saiba mais',
+  and: 'e',
+  or: 'ou'
+}
+
+const fr = {
+  party: 'Partie',
+  method: 'Méthode',
+  reorder_fields: 'Réorganiser les champs',
+  verify_id: "Vérifier l'ID",
+  obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more: 'Obtenez une signature électronique qualifiée (QeS) avec le fournisseur de confiance. Cliquez pour en savoir plus.',
+  recurrent: 'Récurrent',
+  one_off: 'Ponctuel',
+  editable: 'Éditable',
+  search_field: 'Champ de recherche',
+  field_not_found: 'Champ non trouvé',
+  clear: 'Effacer',
+  type_value: 'Tapez la valeur',
+  add_all_required_fields_to_continue: 'Ajoutez tous les champs obligatoires pour continuer',
+  uploaded_pdf_contains_form_fields_keep_or_remove_them: 'Le PDF téléchargé contient des champs. Les conserver ou les supprimer?',
+  keep: 'Conserver',
+  align: 'Aligner',
+  left: 'Gauche',
+  heading: 'En-tête',
+  validation: 'Validation',
+  add_blank_page: 'Ajouter une page blanche',
+  right: 'Droite',
+  add_condition: 'Ajouter une condition',
+  center: 'Centre',
+  with_logo: 'Avec logo',
+  description: 'Description',
+  display_title: "Titre d'affichage",
+  unchecked: 'Non coché',
+  price: 'Prix',
+  equal: 'Égal',
+  not_equal: 'Non égal',
+  contains: 'Contient',
+  signing_date: 'Date de signature',
+  does_not_contain: 'Ne contient pas',
+  not_empty: 'Non vide',
+  empty: 'Vide',
+  select_field_: 'Sélectionner un champ...',
+  select_value_: 'Sélectionner une valeur...',
+  remove_condition: 'Supprimer la condition',
+  condition: 'Condition',
+  formula: 'Formule',
+  edit: 'Éditer',
+  settings: 'Paramètres',
+  up: 'Haut',
+  down: 'Bas',
+  set_signing_date: 'Définir la date de signature',
+  are_you_sure_: 'Êtes-vous sûr?',
+  sign_yourself: 'Signez-vous',
+  checked: 'Coché',
+  send: 'Envoyer',
+  remove: 'Supprimer',
+  save: 'Enregistrer',
+  cancel: 'Annuler',
+  draw_field_on_the_document: 'Dessiner un champ sur le document',
+  click_to_upload: 'Cliquez pour télécharger',
+  or_drag_and_drop_files: 'ou faites glisser-déposer des fichiers',
+  uploading: 'Téléchargement en cours',
+  processing_: 'Traitement en cours...',
+  add_pdf_documents_or_images: 'Ajoutez des documents PDF ou des images',
+  add_documents_or_images: 'Ajoutez des documents ou des images',
+  required: 'Requis',
+  default_value: 'Valeur par défaut',
+  format: 'Format',
+  read_only: 'Lecture seule',
+  page: 'Page',
+  draw_new_area: 'Dessiner une nouvelle zone',
+  copy_to_all_pages: 'Copier sur toutes les pages',
+  add_option: 'Ajouter une option',
+  option: 'Option',
+  first_party: 'Première partie',
+  second_party: 'Deuxième partie',
+  third_party: 'Troisième partie',
+  fourth_party: 'Quatrième partie',
+  fifth_party: 'Cinquième partie',
+  sixth_party: 'Sixième partie',
+  seventh_party: 'Septième partie',
+  eighth_party: 'Huitième partie',
+  ninth_party: 'Neuvième partie',
+  tenth_party: 'Dixième partie',
+  eleventh_party: 'Onzième Parti',
+  twelfth_party: 'Douzième Parti',
+  thirteenth_party: 'Treizième Parti',
+  fourteenth_party: 'Quatorzième Parti',
+  fifteenth_party: 'Quinzième Parti',
+  sixteenth_party: 'Seizième Parti',
+  seventeenth_party: 'Dix-septième Parti',
+  eighteenth_party: 'Dix-huitième Parti',
+  nineteenth_party: 'Dix-Neuvième Fête',
+  twentieth_party: 'Vingtième Fête',
+  draw: 'Dessiner',
+  add: 'Ajouter',
+  or_add_field_without_drawing: 'Ou ajoutez un champ sans dessiner',
+  text: 'Texte',
+  signature: 'Signature',
+  initials: 'Initiales',
+  date: 'Date',
+  number: 'Numéro',
+  image: 'Image',
+  file: 'Fichier',
+  select: 'Choisir',
+  checkbox: 'Coche',
+  multiple: 'Multiple',
+  radio: 'Radio',
+  cells: 'Cellules',
+  stamp: 'Tampon',
+  payment: 'Paiement',
+  phone: 'Téléphone',
+  text_field: 'Champ de Texte',
+  signature_field: 'Champ de Signature',
+  initials_field: "Champ d'Initiales",
+  date_field: 'Champ de Date',
+  number_field: 'Champ de Numéro',
+  image_field: "Champ d'Image",
+  file_field: 'Champ de Fichier',
+  select_field: 'Champ de Choix',
+  checkbox_field: 'Champ de Coche',
+  multiple_field: 'Champ de Choix Multiple',
+  radio_field: 'Champ de Groupe Radio',
+  cells_field: 'Champ de Cellules',
+  stamp_field: 'Champ de Tampon',
+  payment_field: 'Champ de Paiement',
+  phone_field: 'Champ de Téléphone',
+  draw_a_text_field_on_the_page_with_a_mouse: 'Dessinez un champ texte sur la page avec une souris',
+  drag_and_drop_any_other_field_type_on_the_page: 'Glissez et déposez tout autre type de champ sur la page',
+  click_on_the_field_type_above_to_start_drawing_it: 'Cliquez sur le type de champ ci-dessus pour commencer à le dessiner',
+  please_draw_fields_to_prepare_the_document: 'Veuillez dessiner les champs pour préparer le document.',
+  only_pdf_and_images_are_supported: 'Seuls les PDF et les images sont pris en charge.',
+  unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'Débloquez le champ de numéro de téléphone vérifié par SMS avec un plan payant. Utilisez un champ texte pour les numéros de téléphone sans vérification.',
+  available_only_in_pro: 'Disponible uniquement en Pro',
+  failed_to_download_files: 'Échec du téléchargement des fichiers',
+  please_add_fields_for_the_submitter_name_or_remove_the_submitter_name_if_not_needed: 'Veuillez ajouter des champs pour {submitter_name} ou retirer {submitter_name} si ce n\'est pas nécessaire.',
+  draw_field: 'Dessiner le champ {field}',
+  replace: 'Remplacer',
+  uploading_: 'Téléchargement en cours...',
+  add_document: 'Télécharger',
+  any: 'Tout',
+  drawn: 'Dessiné',
+  drawn_or_typed: 'Dessiné ou Tapé',
+  upload: 'Téléverser',
+  typed: 'Tapé',
+  none: 'Aucun',
+  ssn: 'SSN',
+  ein: 'EIN',
+  email: 'E-mail',
+  url: 'URL',
+  zip: 'ZIP',
+  custom: 'Personnalisé',
+  numbers_only: 'Chiffres uniquement',
+  letters_only: 'Lettres uniquement',
+  regexp_validation: 'Validation par expression régulière',
+  enter_pdf_password: 'Entrez le mot de passe PDF',
+  wrong_password: 'Mot de passe incorrect',
+  currency: 'Devise',
+  save_and_preview: 'Enregistrer et prévisualiser',
+  preferences: 'Préférences',
+  available_in_pro: 'Disponible en version Pro',
+  some_fields_are_missing_in_the_formula: 'Certains champs manquent dans la formule.',
+  learn_more: 'En savoir plus',
+  and: 'et',
+  or: 'ou'
+}
+
+const de = {
+  party: 'Partei',
+  method: 'Verfahren',
+  reorder_fields: 'Felder neu anordnen',
+  verify_id: 'ID überprüfen',
+  obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more: 'Erhalten Sie eine qualifizierte elektronische Signatur (QeS) beim vertrauenswürdigen Anbieter. Klicken Sie hier, um mehr zu erfahren.',
+  wiederkehrend: 'Wiederkehrend',
+  einmalig: 'Einmalig',
+  editable: 'Bearbeitbar',
+  search_field: 'Suchfeld',
+  field_not_found: 'Feld nicht gefunden',
+  clear: 'Löschen',
+  type_value: 'Wert eingeben',
+  add_all_required_fields_to_continue: 'Fügen Sie alle erforderlichen Felder hinzu, um fortzufahren',
+  uploaded_pdf_contains_form_fields_keep_or_remove_them: 'Das hochgeladene PDF enthält Formularfelder. Behalten oder entfernen?',
+  keep: 'Behalten',
+  align: 'Ausrichten',
+  left: 'Links',
+  heading: 'Überschrift',
+  validation: 'Validierung',
+  add_blank_page: 'Leere Seite hinzufügen',
+  right: 'Rechts',
+  add_condition: 'Bedingung hinzufügen',
+  center: 'Zentriert',
+  with_logo: 'Mit Logo',
+  description: 'Beschreibung',
+  display_title: 'Anzeigetitel',
+  unchecked: 'Nicht überprüft',
+  price: 'Preis',
+  equal: 'Gleich',
+  not_equal: 'Ungleich',
+  contains: 'Enthält',
+  does_not_contain: 'Enthält nicht',
+  not_empty: 'Nicht leer',
+  empty: 'Leer',
+  signing_date: 'Signaturdatum',
+  select_field_: 'Feld auswählen...',
+  select_value_: 'Wert auswählen...',
+  remove_condition: 'Bedingung entfernen',
+  condition: 'Bedingung',
+  formula: 'Formel',
+  edit: 'Bearbeiten',
+  settings: 'Einstellungen',
+  up: 'Nach oben',
+  down: 'Nach unten',
+  set_signing_date: 'Unterschriftdatum festlegen',
+  are_you_sure_: 'Bist du sicher?',
+  sign_yourself: 'Unterschreiben Sie selbst',
+  checked: 'Ausgewählt',
+  send: 'Senden',
+  remove: 'Entfernen',
+  save: 'Speichern',
+  cancel: 'Abbrechen',
+  draw_field_on_the_document: 'Ein Feld auf dem Dokument zeichnen',
+  click_to_upload: 'Klicken Sie zum Hochladen',
+  or_drag_and_drop_files: 'oder Dateien hierher ziehen',
+  uploading: 'Hochladen',
+  processing_: 'Verarbeitung...',
+  add_pdf_documents_or_images: 'PDF-Dokumente oder Bilder hinzufügen',
+  add_documents_or_images: 'Dokumente oder Bilder hinzufügen',
+  required: 'Erforderlich',
+  default_value: 'Standardwert',
+  format: 'Format',
+  read_only: 'Nur lesen',
+  page: 'Seite',
+  draw_new_area: 'Neuen Bereich zeichnen',
+  copy_to_all_pages: 'Auf alle Seiten kopieren',
+  add_option: 'Option hinzufügen',
+  option: 'Option',
+  first_party: 'Erste Partei',
+  second_party: 'Zweite Partei',
+  third_party: 'Dritte Partei',
+  fourth_party: 'Vierte Partei',
+  fifth_party: 'Fünfte Partei',
+  sixth_party: 'Sechste Partei',
+  seventh_party: 'Siebte Partei',
+  eighth_party: 'Achte Partei',
+  ninth_party: 'Neunte Partei',
+  tenth_party: 'Zehnte Partei',
+  eleventh_party: 'Elfte Partei',
+  twelfth_party: 'Zwölfte Partei',
+  thirteenth_party: 'Dreizehnte Partei',
+  fourteenth_party: 'Vierzehnte Partei',
+  fifteenth_party: 'Fünfzehnte Partei',
+  sixteenth_party: 'Sechzehnte Partei',
+  seventeenth_party: 'Siebzehnte Partei',
+  eighteenth_party: 'Achtzehnte Partei',
+  nineteenth_party: 'Neunzehnte Party',
+  twentieth_party: 'Zwanzigste Party',
+  draw: 'Zeichnen',
+  add: 'Hinzufügen',
+  or_add_field_without_drawing: 'Oder Feld ohne Zeichnung hinzufügen',
+  text: 'Text',
+  signature: 'Unterschrift',
+  initials: 'Initialen',
+  date: 'Datum',
+  number: 'Nummer',
+  image: 'Bild',
+  file: 'Datei',
+  select: 'Auswählen',
+  checkbox: 'Checkbox',
+  multiple: 'Mehrere',
+  radio: 'Radio',
+  cells: 'Zellen',
+  stamp: 'Stempel',
+  payment: 'Zahlung',
+  phone: 'Telefon',
+  text_field: 'Textfeld',
+  signature_field: 'Unterschriftsfeld',
+  initials_field: 'Initialenfeld',
+  date_field: 'Datumsfeld',
+  number_field: 'Zahlenfeld',
+  image_field: 'Bildfeld',
+  file_field: 'Dateifeld',
+  select_field: 'Auswahlfeld',
+  checkbox_field: 'Checkbox-Feld',
+  multiple_field: 'Mehrfach-Auswahlfeld',
+  radio_field: 'Radio-Gruppenfeld',
+  cells_field: 'Zellenfeld',
+  stamp_field: 'Stempelfeld',
+  payment_field: 'Zahlungsfeld',
+  phone_field: 'Telefonfeld',
+  draw_a_text_field_on_the_page_with_a_mouse: 'Textfeld auf der Seite mit der Maus zeichnen',
+  drag_and_drop_any_other_field_type_on_the_page: 'Ziehe und lasse einen anderen Feldtyp auf die Seite fallen',
+  click_on_the_field_type_above_to_start_drawing_it: 'Klicke auf den Feldtyp oben, um mit dem Zeichnen zu beginnen',
+  please_draw_fields_to_prepare_the_document: 'Bitte zeichne Felder, um das Dokument vorzubereiten.',
+  only_pdf_and_images_are_supported: 'Nur PDFs und Bilder werden unterstützt.',
+  unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'Schalte das SMS-verifizierte Telefonnummernfeld mit einem kostenpflichtigen Plan frei. Verwende das Textfeld für Telefonnummern ohne Verifizierung.',
+  available_only_in_pro: 'Nur in Pro verfügbar',
+  failed_to_download_files: 'Fehler beim Herunterladen der Dateien',
+  please_add_fields_for_the_submitter_name_or_remove_the_submitter_name_if_not_needed: 'Bitte füge Felder für {submitter_name} hinzu oder entferne {submitter_name}, falls nicht erforderlich.',
+  draw_field: 'Feld {field} zeichnen',
+  replace: 'Ersetzen',
+  uploading_: 'Hochladen...',
+  add_document: 'Hochladen',
+  any: 'Jede',
+  drawn: 'Gezeichnet',
+  drawn_or_typed: 'Gezeichnet oder getippt',
+  upload: 'Upload',
+  typed: 'Getippt',
+  none: 'Keine',
+  ssn: 'SSN',
+  ein: 'EIN',
+  email: 'E-Mail',
+  url: 'URL',
+  zip: 'ZIP',
+  custom: 'Benutzerdefiniert',
+  numbers_only: 'Nur Zahlen',
+  letters_only: 'Nur Buchstaben',
+  regexp_validation: 'Regulärer Ausdruck Überprüfung',
+  enter_pdf_password: 'Geben Sie das PDF-Passwort ein',
+  wrong_password: 'Falsches Passwort',
+  currency: 'Währung',
+  save_and_preview: 'Speichern und Vorschau',
+  preferences: 'Einstellungen',
+  available_in_pro: 'In Pro verfügbar',
+  some_fields_are_missing_in_the_formula: 'Einige Felder fehlen in der Formel.',
+  learn_more: 'Erfahren Sie mehr',
+  and: 'und',
+  or: 'oder'
+}
+
+export { en, es, it, pt, fr, de }

app/javascript/template_builder/import_list.vue

@@ -3,7 +3,7 @@
     <div v-if="selectedSheetIndex === null && spreadsheet">
       <form @submit.prevent="[selectedSheetIndex = $refs.selectWorksheet.value, buildDefaultMappings()]">
         <label class="label">
-          Select Worksheet
+          {{ t('select_worksheet') }}
         </label>
         <select
           ref="selectWorksheet"
@@ -18,7 +18,7 @@
           </option>
         </select>
         <button class="base-button mt-4 w-full">
-          Open
+          {{ t('open') }}
         </button>
       </form>
     </div>
@@ -36,10 +36,10 @@
         </div>
         <div class="flex">
           <div class="relative w-full py-2 px-2 text-sm">
-            Recipient field
+            {{ t('recipient_field') }}
           </div>
           <div class="relative w-full py-2 pl-4 text-sm">
-            Spreadsheet column
+            {{ t('spreadsheet_column') }}
           </div>
         </div>
         <div
@@ -50,6 +50,7 @@
           <div class="flex">
             <select
               class="base-select !select-sm !h-10"
+              :class="{ '!text-gray-300': !mapping.field_name }"
               required
               @change="mapping.field_name = $event.target.value"
             >
@@ -58,13 +59,14 @@
                 value=""
                 :selected="!mapping.field_name"
               >
-                Select Field
+                {{ t('select_field') }}
               </option>
               <option
                 v-for="(field, index) in selectFieldsForSubmitter(submitter)"
                 :key="index"
                 :value="field.name"
                 :selected="mapping.field_name === field.name"
+                class="text-base-content"
               >
                 {{ field.name }}
               </option>
@@ -75,6 +77,7 @@
             <div class="w-full relative">
               <select
                 class="base-select !select-sm !h-10"
+                :class="{ '!text-gray-300': !mapping.column_index && mapping.column_index != 0 }"
                 required
                 @change="mapping.column_index = parseInt($event.target.value)"
               >
@@ -83,7 +86,7 @@
                   value=""
                   :selected="mapping.column_index == null"
                 >
-                  Select Column
+                  {{ t('select_column') }}
                 </option>
                 <template
                   v-for="(column, index) in columns"
@@ -93,6 +96,7 @@
                     v-if="column"
                     :value="index"
                     :selected="index === mapping.column_index"
+                    class="text-base-content"
                   >
                     {{ column }}
                   </option>
@@ -118,8 +122,8 @@
             </div>
             <div class="flex items-center pl-1">
               <span
-                class="tooltip tooltip-top"
-                data-tip="<%= t('remove') %>"
+                class="tooltip tooltip-left"
+                :data-tip="t('remove')"
               >
                 <button
                   :disabled="mappings.filter((m) => m.submitter_uuid === submitter.uuid).length < 2"
@@ -138,7 +142,7 @@
             @click.prevent="addMapping(submitter)"
           >
             <IconPlus class="w-4 h-4" />
-            New Field Mapping
+            {{ t('new_field_mapping') }}
           </button>
         </div>
       </div>
@@ -152,7 +156,7 @@
       <div
         class="px-3 border-y py-2 border-base-300 text-center w-full text-sm font-semibold"
       >
-        Total entries: {{ submissionsData.length }}
+        {{ t('total_entries') }}: {{ submissionsData.length }}
         <template v-if="multitenant && submissionsData.length >= 1000">
           / 1000
         </template>
@@ -187,10 +191,10 @@
               <div
                 class="font-medium text-lg mb-1"
               >
-                Upload CSV or XLSX Spreadsheet
+                {{ t('upload_csv_or_xlsx_spreadsheet') }}
               </div>
               <div class="text-sm">
-                <span class="font-medium">Click to Upload</span> or drag and drop files.
+                <span class="font-medium">{{ t('click_to_upload') }}</span> {{ t('or_drag_and_drop_files') }}
               </div>
             </div>
           </div>
@@ -210,11 +214,11 @@
         </label>
       </div>
       <div class="text-center mt-2">
-        Or <a
+        {{ t('or') }} <a
           :download="`${template.name}.csv`"
           :href="`data:text/csv;base64,${csvBase64}`"
           class="link font-medium"
-        >download</a> a spreadsheet to fill and import
+        >{{ t('download') }}</a> {{ t('a_sample_spreadsheet_to_fill_and_import') }}
       </div>
     </div>
   </div>
@@ -248,6 +252,11 @@ export default {
       type: String,
       required: false,
       default: ''
+    },
+    i18n: {
+      type: Object,
+      required: false,
+      default: () => ({})
     }
   },
   data () {
@@ -270,13 +279,17 @@ export default {
 
         this.mappings.forEach((mapping) => {
           if (mapping.field_name && mapping.column_index != null) {
-            submittersIndex[mapping.submitter_uuid] ||= { uuid: mapping.submitter_uuid, fields: [] }
+            submittersIndex[mapping.submitter_uuid] ||= {
+              uuid: mapping.submitter_uuid,
+              role: this.submitters.find((s) => s.uuid === mapping.submitter_uuid).name,
+              fields: []
+            }
 
             if (['name', 'email', 'phone', 'external_id'].includes(mapping.field_name.toLowerCase())) {
               submittersIndex[mapping.submitter_uuid][mapping.field_name.toLowerCase()] = row[mapping.column_index]
             }
 
-            const fieldType = this.fieldTypesIndex[mapping.submitter_uuid][mapping.field_name]
+            const fieldType = this.fieldTypesIndex[mapping.submitter_uuid]?.[mapping.field_name]
 
             if (fieldType && fieldType !== 'phone') {
               submittersIndex[mapping.submitter_uuid].fields.push({
@@ -287,7 +300,7 @@ export default {
         })
 
         if (Object.keys(submittersIndex).length !== 0) {
-          submissions.push({ submitters: Object.values(submittersIndex) })
+          submissions.push({ submitters: this.submitters.map((s) => submittersIndex[s.uuid]).filter(Boolean) })
         }
       })
 
@@ -333,7 +346,7 @@ export default {
       return this.$el.closest('form')
     },
     fieldTypes () {
-      return ['text', 'cells', 'date', 'number', 'radio', 'select', 'checkbox']
+      return ['text', 'cells', 'date', 'number', 'radio', 'select', 'checkbox', 'image']
     },
     defaultFields () {
       return [
@@ -354,6 +367,9 @@ export default {
     }
   },
   methods: {
+    t (key) {
+      return this.i18n[key] || key
+    },
     onDropFiles (e) {
       this.uploadFile(e.dataTransfer.files[0])
     },