Merge from docusealco/wip

This reverts commit c24ae1751e.

.annotaterb.yml

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

.github/workflows/ci.yml

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

.github/workflows/docker.yml

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

.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: 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"
@@ -62,12 +62,13 @@ RUN apk add --no-cache build-base && bundle install && apk del --no-cache build-
 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
@@ -46,7 +46,6 @@ gem 'twitter_cldr', require: false
 gem 'tzinfo-data'
 
 group :development, :test do
-  gem 'annotate'
   gem 'better_html'
   gem 'bullet'
   gem 'debug'
@@ -63,6 +62,9 @@ group :development, :test do
 end
 
 group :development do
+  gem 'annotaterb'
+  gem 'brakeman', require: false
+  gem 'foreman', require: false
   gem 'letter_opener_web'
   gem 'web-console'
 end

Gemfile.lock

@@ -1,67 +1,67 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (7.2.1.1)
+    actioncable (8.0.1)
-      actionpack (= 7.2.1.1)
+      actionpack (= 8.0.1)
-      activesupport (= 7.2.1.1)
+      activesupport (= 8.0.1)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
       zeitwerk (~> 2.6)
-    actionmailbox (7.2.1.1)
+    actionmailbox (8.0.1)
-      actionpack (= 7.2.1.1)
+      actionpack (= 8.0.1)
-      activejob (= 7.2.1.1)
+      activejob (= 8.0.1)
-      activerecord (= 7.2.1.1)
+      activerecord (= 8.0.1)
-      activestorage (= 7.2.1.1)
+      activestorage (= 8.0.1)
-      activesupport (= 7.2.1.1)
+      activesupport (= 8.0.1)
       mail (>= 2.8.0)
-    actionmailer (7.2.1.1)
+    actionmailer (8.0.1)
-      actionpack (= 7.2.1.1)
+      actionpack (= 8.0.1)
-      actionview (= 7.2.1.1)
+      actionview (= 8.0.1)
-      activejob (= 7.2.1.1)
+      activejob (= 8.0.1)
-      activesupport (= 7.2.1.1)
+      activesupport (= 8.0.1)
       mail (>= 2.8.0)
       rails-dom-testing (~> 2.2)
-    actionpack (7.2.1.1)
+    actionpack (8.0.1)
-      actionview (= 7.2.1.1)
+      actionview (= 8.0.1)
-      activesupport (= 7.2.1.1)
+      activesupport (= 8.0.1)
       nokogiri (>= 1.8.5)
-      racc
+      rack (>= 2.2.4)
-      rack (>= 2.2.4, < 3.2)
       rack-session (>= 1.0.1)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.2)
       rails-html-sanitizer (~> 1.6)
       useragent (~> 0.16)
-    actiontext (7.2.1.1)
+    actiontext (8.0.1)
-      actionpack (= 7.2.1.1)
+      actionpack (= 8.0.1)
-      activerecord (= 7.2.1.1)
+      activerecord (= 8.0.1)
-      activestorage (= 7.2.1.1)
+      activestorage (= 8.0.1)
-      activesupport (= 7.2.1.1)
+      activesupport (= 8.0.1)
       globalid (>= 0.6.0)
       nokogiri (>= 1.8.5)
-    actionview (7.2.1.1)
+    actionview (8.0.1)
-      activesupport (= 7.2.1.1)
+      activesupport (= 8.0.1)
       builder (~> 3.1)
       erubi (~> 1.11)
       rails-dom-testing (~> 2.2)
       rails-html-sanitizer (~> 1.6)
-    activejob (7.2.1.1)
+    activejob (8.0.1)
-      activesupport (= 7.2.1.1)
+      activesupport (= 8.0.1)
       globalid (>= 0.3.6)
-    activemodel (7.2.1.1)
+    activemodel (8.0.1)
-      activesupport (= 7.2.1.1)
+      activesupport (= 8.0.1)
-    activerecord (7.2.1.1)
+    activerecord (8.0.1)
-      activemodel (= 7.2.1.1)
+      activemodel (= 8.0.1)
-      activesupport (= 7.2.1.1)
+      activesupport (= 8.0.1)
       timeout (>= 0.4.0)
-    activestorage (7.2.1.1)
+    activestorage (8.0.1)
-      actionpack (= 7.2.1.1)
+      actionpack (= 8.0.1)
-      activejob (= 7.2.1.1)
+      activejob (= 8.0.1)
-      activerecord (= 7.2.1.1)
+      activerecord (= 8.0.1)
-      activesupport (= 7.2.1.1)
+      activesupport (= 8.0.1)
       marcel (~> 1.0)
-    activesupport (7.2.1.1)
+    activesupport (8.0.1)
       base64
+      benchmark (>= 0.3)
       bigdecimal
       concurrent-ruby (~> 1.0, >= 1.3.1)
       connection_pool (>= 2.2.5)
@@ -71,31 +71,30 @@ GEM
       minitest (>= 5.1)
       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 (3.2.0)
+    annotaterb (4.14.0)
-      activerecord (>= 3.2, < 8.0)
-      rake (>= 10.4, < 14.0)
     arabic-letter-connector (0.1.1)
     ast (2.4.2)
     aws-eventstream (1.3.0)
-    aws-partitions (1.985.0)
+    aws-partitions (1.1027.0)
-    aws-sdk-core (3.209.1)
+    aws-sdk-core (3.214.0)
       aws-eventstream (~> 1, >= 1.3.0)
-      aws-partitions (~> 1, >= 1.651.0)
+      aws-partitions (~> 1, >= 1.992.0)
       aws-sigv4 (~> 1.9)
       jmespath (~> 1, >= 1.6.1)
-    aws-sdk-kms (1.94.0)
+    aws-sdk-kms (1.96.0)
-      aws-sdk-core (~> 3, >= 3.207.0)
+      aws-sdk-core (~> 3, >= 3.210.0)
       aws-sigv4 (~> 1.5)
-    aws-sdk-s3 (1.167.0)
+    aws-sdk-s3 (1.176.1)
-      aws-sdk-core (~> 3, >= 3.207.0)
+      aws-sdk-core (~> 3, >= 3.210.0)
       aws-sdk-kms (~> 1)
       aws-sigv4 (~> 1.5)
-    aws-sdk-secretsmanager (1.108.0)
+    aws-sdk-secretsmanager (1.110.0)
-      aws-sdk-core (~> 3, >= 3.207.0)
+      aws-sdk-core (~> 3, >= 3.210.0)
       aws-sigv4 (~> 1.5)
-    aws-sigv4 (1.10.0)
+    aws-sigv4 (1.10.1)
       aws-eventstream (~> 1, >= 1.0.2)
     azure-storage-blob (2.0.3)
       azure-storage-common (~> 2.0)
@@ -107,6 +106,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)
@@ -118,8 +118,10 @@ GEM
     bindex (0.8.1)
     bootsnap (1.18.4)
       msgpack (~> 1.2)
+    brakeman (7.0.0)
+      racc
     builder (3.3.0)
-    bullet (7.2.0)
+    bullet (8.0.0)
       activesupport (>= 3.0.0)
       uniform_notifier (~> 1.11)
     camertron-eprun (1.1.1)
@@ -145,14 +147,14 @@ GEM
       bigdecimal
       rexml
     crass (1.0.6)
-    css_parser (1.19.0)
+    css_parser (1.21.0)
       addressable
-    csv (3.3.0)
+    csv (3.3.2)
     cuprite (0.15.1)
       capybara (~> 3.0)
       ferrum (~> 0.15.0)
-    date (3.3.4)
+    date (3.4.1)
-    debug (1.9.2)
+    debug (1.10.0)
       irb (~> 1.10)
       reline (>= 0.3.8)
     declarative (0.0.20)
@@ -162,32 +164,32 @@ GEM
       railties (>= 4.1.0)
       responders
       warden (~> 1.2.3)
-    devise-two-factor (6.0.0)
+    devise-two-factor (6.1.0)
-      activesupport (~> 7.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.1)
-    dotenv (3.1.4)
+    dotenv (3.1.7)
     drb (2.2.1)
     email_typo (0.2.3)
-    erb_lint (0.6.0)
+    erb_lint (0.7.0)
       activesupport
       better_html (>= 2.0.1)
       parser (>= 2.7.1.4)
       rainbow
       rubocop (>= 1)
       smart_properties
-    erubi (1.13.0)
+    erubi (1.13.1)
     factory_bot (6.5.0)
       activesupport (>= 5.0.0)
-    factory_bot_rails (6.4.3)
+    factory_bot_rails (6.4.4)
-      factory_bot (~> 6.4)
+      factory_bot (~> 6.5)
       railties (>= 5.0.0)
-    faker (3.4.2)
+    faker (3.5.1)
       i18n (>= 1.8.11, < 2)
     faraday (1.10.4)
       faraday-em_http (~> 1.0)
@@ -207,8 +209,8 @@ GEM
     faraday-follow_redirects (0.3.0)
       faraday (>= 1, < 3)
     faraday-httpclient (1.0.1)
-    faraday-multipart (1.0.4)
+    faraday-multipart (1.1.0)
-      multipart-post (~> 2)
+      multipart-post (~> 2.0)
     faraday-net_http (1.0.2)
     faraday-net_http_persistent (1.2.0)
     faraday-patron (1.0.0)
@@ -221,9 +223,13 @@ GEM
       concurrent-ruby (~> 1.1)
       webrick (~> 1.7)
       websocket-driver (~> 0.7)
-    ffi (1.17.0)
+    ffi (1.17.1)
-    ffi (1.17.0-aarch64-linux-gnu)
+    ffi (1.17.1-aarch64-linux-gnu)
-    ffi (1.17.0-x86_64-linux-gnu)
+    ffi (1.17.1-aarch64-linux-musl)
+    ffi (1.17.1-arm64-darwin)
+    ffi (1.17.1-x86_64-linux-gnu)
+    ffi (1.17.1-x86_64-linux-musl)
+    foreman (0.88.1)
     geom2d (0.4.1)
     globalid (1.2.1)
       activesupport (>= 6.1)
@@ -235,9 +241,9 @@ GEM
       mutex_m
       representable (~> 3.0)
       retriable (>= 2.0, < 4.a)
-    google-apis-iamcredentials_v1 (0.21.0)
+    google-apis-iamcredentials_v1 (0.22.0)
       google-apis-core (>= 0.15.0, < 2.a)
-    google-apis-storage_v1 (0.46.0)
+    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)
@@ -245,7 +251,7 @@ GEM
     google-cloud-env (2.2.1)
       faraday (>= 1.0, < 3.a)
     google-cloud-errors (1.4.0)
-    google-cloud-storage (1.52.0)
+    google-cloud-storage (1.54.0)
       addressable (~> 2.8)
       digest-crc (~> 0.4)
       google-apis-core (~> 0.13)
@@ -254,15 +260,17 @@ GEM
       google-cloud-core (~> 1.6)
       googleauth (~> 1.9)
       mini_mime (~> 1.0)
-    googleauth (1.11.1)
+    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.1)
+    hashdiff (1.1.2)
-    hexapdf (0.47.0)
+    hexapdf (1.0.3)
       cmdparse (~> 3.0, >= 3.0.3)
       geom2d (~> 0.4, >= 0.4.1)
       openssl (>= 2.2.1)
@@ -273,12 +281,12 @@ GEM
     image_processing (1.13.0)
       mini_magick (>= 4.9.5, < 5)
       ruby-vips (>= 2.0.17, < 3)
-    io-console (0.7.2)
+    io-console (0.8.0)
-    irb (1.14.1)
+    irb (1.14.3)
       rdoc (>= 4.0.0)
       reline (>= 0.4.2)
     jmespath (1.6.2)
-    json (2.7.2)
+    json (2.9.1)
     jwt (2.9.3)
       base64
     language_server-protocol (3.17.0.3)
@@ -292,13 +300,13 @@ GEM
       letter_opener (~> 1.9)
       railties (>= 6.1)
       rexml
-    logger (1.6.1)
+    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)
@@ -311,16 +319,16 @@ GEM
     method_source (1.1.0)
     mini_magick (4.13.2)
     mini_mime (1.1.5)
-    mini_portile2 (2.8.7)
+    mini_portile2 (2.8.8)
-    minitest (5.25.1)
+    minitest (5.25.4)
-    msgpack (1.7.3)
+    msgpack (1.7.5)
     multi_json (1.15.0)
     multipart-post (2.4.1)
-    mutex_m (0.2.0)
+    mutex_m (0.3.0)
     mysql2 (0.5.6)
-    net-http-persistent (4.0.4)
+    net-http-persistent (4.0.5)
       connection_pool (~> 2.2)
-    net-imap (0.4.17)
+    net-imap (0.5.6)
       date
       net-protocol
     net-pop (0.1.2)
@@ -329,28 +337,34 @@ GEM
       timeout
     net-smtp (0.5.0)
       net-protocol
-    nio4r (2.7.3)
+    nio4r (2.7.4)
-    nokogiri (1.16.7)
+    nokogiri (1.18.5)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.16.7-aarch64-linux)
+    nokogiri (1.18.5-aarch64-linux-gnu)
       racc (~> 1.4)
-    nokogiri (1.16.7-x86_64-linux)
+    nokogiri (1.18.5-aarch64-linux-musl)
       racc (~> 1.4)
-    oj (3.16.6)
+    nokogiri (1.18.5-arm64-darwin)
+      racc (~> 1.4)
+    nokogiri (1.18.5-x86_64-linux-gnu)
+      racc (~> 1.4)
+    nokogiri (1.18.5-x86_64-linux-musl)
+      racc (~> 1.4)
+    oj (3.16.8)
       bigdecimal (>= 3.0)
       ostruct (>= 0.2)
-    openssl (3.2.0)
+    openssl (3.3.0)
     orm_adapter (0.5.0)
     os (1.1.4)
-    ostruct (0.6.0)
+    ostruct (0.6.1)
     package_json (0.1.0)
-    pagy (9.1.0)
+    pagy (9.3.3)
     parallel (1.26.3)
-    parser (3.3.5.0)
+    parser (3.3.6.0)
       ast (~> 2.4.1)
       racc
-    pg (1.5.8)
+    pg (1.5.9)
     premailer (1.27.0)
       addressable
       css_parser (>= 1.19.0)
@@ -361,58 +375,58 @@ 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.11)
       pry (>= 0.13.0)
-    psych (5.1.2)
+    psych (5.2.2)
+      date
       stringio
     public_suffix (6.0.1)
-    puma (6.4.3)
+    puma (6.5.0)
       nio4r (~> 2.0)
     racc (1.8.1)
-    rack (3.1.8)
+    rack (3.1.12)
     rack-proxy (0.7.7)
       rack
     rack-session (2.0.0)
       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 (8.0.1)
-    rails (7.2.1.1)
+      actioncable (= 8.0.1)
-      actioncable (= 7.2.1.1)
+      actionmailbox (= 8.0.1)
-      actionmailbox (= 7.2.1.1)
+      actionmailer (= 8.0.1)
-      actionmailer (= 7.2.1.1)
+      actionpack (= 8.0.1)
-      actionpack (= 7.2.1.1)
+      actiontext (= 8.0.1)
-      actiontext (= 7.2.1.1)
+      actionview (= 8.0.1)
-      actionview (= 7.2.1.1)
+      activejob (= 8.0.1)
-      activejob (= 7.2.1.1)
+      activemodel (= 8.0.1)
-      activemodel (= 7.2.1.1)
+      activerecord (= 8.0.1)
-      activerecord (= 7.2.1.1)
+      activestorage (= 8.0.1)
-      activestorage (= 7.2.1.1)
+      activesupport (= 8.0.1)
-      activesupport (= 7.2.1.1)
       bundler (>= 1.15.0)
-      railties (= 7.2.1.1)
+      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)
+      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 (7.0.9)
+    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.2.1.1)
+    railties (8.0.1)
-      actionpack (= 7.2.1.1)
+      actionpack (= 8.0.1)
-      activesupport (= 7.2.1.1)
+      activesupport (= 8.0.1)
       irb (~> 1.13)
       rackup (>= 1.0.0)
       rake (>= 12.2)
@@ -420,12 +434,12 @@ GEM
       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)
+    regexp_parser (2.9.3)
-    reline (0.5.10)
+    reline (0.6.0)
       io-console (~> 0.5)
     representable (3.2.0)
       declarative (< 0.1.0)
@@ -437,13 +451,13 @@ GEM
       actionpack (>= 5.2)
       railties (>= 5.2)
     retriable (3.1.2)
-    rexml (3.3.8)
+    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.1)
+    rspec-core (3.13.2)
       rspec-support (~> 3.13.0)
     rspec-expectations (3.13.3)
       diff-lcs (>= 1.2.0, < 2.0)
@@ -451,7 +465,7 @@ GEM
     rspec-mocks (3.13.2)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.13.0)
-    rspec-rails (7.0.1)
+    rspec-rails (7.1.0)
       actionpack (>= 7.0)
       activesupport (>= 7.0)
       railties (>= 7.0)
@@ -459,48 +473,47 @@ GEM
       rspec-expectations (~> 3.13)
       rspec-mocks (~> 3.13)
       rspec-support (~> 3.13)
-    rspec-support (3.13.1)
+    rspec-support (3.13.2)
-    rubocop (1.66.1)
+    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)
+      regexp_parser (>= 2.9.3, < 3.0)
-      rubocop-ast (>= 1.32.2, < 2.0)
+      rubocop-ast (>= 1.36.2, < 2.0)
       ruby-progressbar (~> 1.7)
-      unicode-display_width (>= 2.4.0, < 3.0)
+      unicode-display_width (>= 2.4.0, < 4.0)
-    rubocop-ast (1.32.3)
+    rubocop-ast (1.37.0)
       parser (>= 3.3.1.0)
-    rubocop-performance (1.22.1)
+    rubocop-performance (1.23.0)
       rubocop (>= 1.48.1, < 2.0)
       rubocop-ast (>= 1.31.1, < 2.0)
-    rubocop-rails (2.26.2)
+    rubocop-rails (2.27.0)
       activesupport (>= 4.2.0)
       rack (>= 1.1)
       rubocop (>= 1.52.0, < 2.0)
       rubocop-ast (>= 1.31.1, < 2.0)
-    rubocop-rspec (3.1.0)
+    rubocop-rspec (3.3.0)
       rubocop (~> 1.61)
     ruby-progressbar (1.13.0)
     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)
-    securerandom (0.3.1)
+    securerandom (0.4.1)
-    semantic_range (3.0.0)
+    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.3.2)
+    sidekiq (7.3.7)
-      concurrent-ruby (< 2)
       connection_pool (>= 2.3.0)
       logger
       rack (>= 2.2.4)
@@ -517,17 +530,20 @@ GEM
     simplecov-html (0.13.1)
     simplecov_json_formatter (0.1.4)
     smart_properties (1.17.0)
-    sqlite3 (2.1.0)
+    sqlite3 (2.5.0)
       mini_portile2 (~> 2.8.0)
-    sqlite3 (2.1.0-aarch64-linux-gnu)
+    sqlite3 (2.5.0-aarch64-linux-gnu)
-    sqlite3 (2.1.0-x86_64-linux-gnu)
+    sqlite3 (2.5.0-aarch64-linux-musl)
-    stringio (3.1.1)
+    sqlite3 (2.5.0-arm64-darwin)
-    strip_attributes (1.13.0)
+    sqlite3 (2.5.0-x86_64-linux-gnu)
-      activemodel (>= 3.0, < 8.0)
+    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.10)
+    turbo-rails (2.0.11)
       actionpack (>= 6.0.0)
       railties (>= 6.0.0)
     twitter_cldr (6.12.1)
@@ -539,9 +555,12 @@ GEM
     tzinfo-data (1.2024.2)
       tzinfo (>= 1.0.0)
     uber (0.1.0)
-    unicode-display_width (2.6.0)
+    unicode-display_width (3.1.2)
+      unicode-emoji (~> 4.0, >= 4.0.4)
+    unicode-emoji (4.0.4)
     uniform_notifier (1.16.0)
-    useragent (0.16.10)
+    uri (1.0.3)
+    useragent (0.16.11)
     warden (1.2.9)
       rack (>= 2.0.9)
     web-console (4.2.1)
@@ -553,27 +572,31 @@ GEM
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webrick (1.8.2)
+    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.7.0)
+    zeitwerk (2.7.1)
 
 PLATFORMS
   aarch64-linux
+  aarch64-linux-musl
+  arm64-darwin
   ruby
   x86_64-linux
+  x86_64-linux-musl
 
 DEPENDENCIES
-  annotate
+  annotaterb
   arabic-letter-connector
   aws-sdk-s3
   aws-sdk-secretsmanager
   azure-storage-blob
   better_html
   bootsnap
+  brakeman
   bullet
   cancancan
   capybara
@@ -589,6 +612,7 @@ DEPENDENCIES
   faker
   faraday
   faraday-follow_redirects
+  foreman
   google-cloud-storage
   hexapdf
   image_processing
@@ -628,7 +652,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>
@@ -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 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.co/guides/use-embedded-text-field-tags-in-the-pdf-to-create-a-fillable-form))
+- 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.co/docs/embedded))
+- 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.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.com/docs/embedded))
-- [Learn more](https://www.docuseal.co/pricing)
+- [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)
+- [Signature Maker](https://www.docuseal.com/online-signature)
-- [Sign Document Online](https://www.docuseal.co/sign-documents-online)
+- [Sign Document Online](https://www.docuseal.com/sign-documents-online)
-- [Fill PDF Online](https://www.docuseal.co/fill-pdf)
+- [Fill PDF Online](https://www.docuseal.com/fill-pdf)

app/controllers/account_configs_controller.rb

@@ -15,9 +15,11 @@ class AccountConfigsController < ApplicationController
     AccountConfig::DOWNLOAD_LINKS_AUTH_KEY,
     AccountConfig::FORCE_SSO_AUTH_KEY,
     AccountConfig::FLATTEN_RESULT_PDF_KEY,
+    AccountConfig::ENFORCE_SIGNING_ORDER_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)
@@ -38,7 +40,7 @@ class AccountConfigsController < ApplicationController
   end
 
   def account_config_params
-    params.required(:account_config).permit!.tap do |attrs|
+    params.required(:account_config).permit(:key, :value, { value: {} }, { value: [] }).tap do |attrs|
       attrs[:value] = attrs[:value] == '1' if attrs[:value].in?(%w[1 0])
     end
   end

app/controllers/accounts_controller.rb

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

app/controllers/api/active_storage_blobs_proxy_controller.rb

@@ -42,6 +42,7 @@ module Api
 
       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
 

app/controllers/api/submission_documents_controller.rb

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

app/controllers/api/submissions_controller.rb

@@ -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,15 +69,20 @@ module Api
 
       submissions = create_submissions(@template, params)
 
-      submissions.each do |submission|
+      WebhookUrls.for_account_id(@template.account_id, 'submission.created').each do |webhook_url|
-        SendSubmissionCreatedWebhookRequestJob.perform_async({ 'submission_id' => submission.id })
+        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|
         submission.submitters.each do |submitter|
-          ProcessSubmitterCompletionJob.perform_async({ 'submitter_id' => submitter.id }) if submitter.completed_at?
+          next unless submitter.completed_at?
+
+          ProcessSubmitterCompletionJob.perform_async('submitter_id' => submitter.id, 'send_invitation_email' => false)
         end
       end
 
@@ -88,12 +95,15 @@ module Api
     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])
@@ -108,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
@@ -157,7 +179,7 @@ module Api
           message: %i[subject body],
           submitters: [[:send_email, :send_sms, :completed_redirect_url, :uuid, :name, :email, :role,
                         :completed, :phone, :application_key, :external_id, :reply_to, :go_to_last,
-                        { metadata: {}, values: {}, readonly_fields: [], message: %i[subject body],
+                        { metadata: {}, values: {}, roles: [], readonly_fields: [], message: %i[subject body],
                           fields: [:name, :uuid, :default_value, :value, :title, :description,
                                    :readonly, :validation_pattern, :invalid_message,
                                    { default_value: [], value: [], preferences: {} }] }]]
@@ -170,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
@@ -146,9 +146,15 @@ module Api
 
       if attrs[:completed]
         submitter.values = Submitters::SubmitValues.merge_default_values(submitter)
-        submitter.values = Submitters::SubmitValues.merge_formula_values(submitter)
         submitter.values = Submitters::SubmitValues.maybe_remove_condition_values(submitter)
 
+        formula_values = Submitters::SubmitValues.build_formula_values(submitter)
+
+        if formula_values.present?
+          submitter.values = submitter.values.merge(formula_values)
+          submitter.values = Submitters::SubmitValues.maybe_remove_condition_values(submitter)
+        end
+
         submitter.values = submitter.values.transform_values do |v|
           v == '{{date}}' ? Time.current.in_time_zone(submitter.account.timezone).to_date.to_s : v
         end

app/controllers/api/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

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

app/controllers/application_controller.rb

@@ -15,6 +15,7 @@ class ApplicationController < ActionController::Base
 
   helper_method :button_title,
                 :current_account,
+                :form_link_host,
                 :svg_icon
 
   impersonates :user, with: ->(uuid) { User.find_by(uuid:) }
@@ -29,7 +30,7 @@ class ApplicationController < ActionController::Base
     redirect_to request.referer, alert: 'Too many requests', status: :too_many_requests
   end
 
-  if Rails.env.production?
+  if Rails.env.production? || Rails.env.test?
     rescue_from CanCan::AccessDenied do |e|
       Rollbar.warning(e) if defined?(Rollbar)
 
@@ -104,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/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]

app/controllers/notifications_settings_controller.rb

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

app/controllers/personalization_settings_controller.rb

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

app/controllers/pwa_controller.rb

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

app/controllers/send_submission_email_controller.rb

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

app/controllers/start_form_controller.rb

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

app/controllers/submission_events_controller.rb

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

app/controllers/submissions_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,6 +6,8 @@ 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)
 
@@ -50,9 +52,7 @@ class SubmissionsController < ApplicationController
                                            params: params.merge('send_completed_email' => true))
       end
 
-    submissions.each do |submission|
+    enqueue_submission_created_webhooks(@template, submissions)
-      SendSubmissionCreatedWebhookRequestJob.perform_async({ 'submission_id' => submission.id })
-    end
 
     Submissions.send_signature_requests(submissions)
 
@@ -61,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
@@ -85,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 = if params[:completed_at_from].present? || params[:completed_at_to].present?
-    @submissions = @submissions.completed if params[:status] == 'completed'
+                     @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).order(id: :desc))
+    @pagy, @submissions = pagy(@submissions.preload(submitters: :start_form_submission_events))
   end
 end

app/controllers/submissions_download_controller.rb

@@ -23,9 +23,9 @@ class SubmissionsDownloadController < ApplicationController
 
     last_submitter = submitter.submission.submitters.where.not(completed_at: nil).order(:completed_at).last
 
-    Submissions::EnsureResultGenerated.call(last_submitter)
+    return head :not_found unless last_submitter
 
-    return head :not_found unless last_submitter.completed_at?
+    Submissions::EnsureResultGenerated.call(last_submitter)
 
     if last_submitter.completed_at < TTL.ago && !signature_valid && !current_user_submitter?(last_submitter)
       Rollbar.info("TTL: #{last_submitter.id}") if defined?(Rollbar)
@@ -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, I18n.t('not_found') if @submission.account.archived_at?
+
+    if !@submission.submitters.all?(&:completed_at?) && !signature_valid &&
+       (!current_user || !current_ability.can?(:read, @submission))
       raise ActionController::RoutingError, I18n.t('not_found')
     end
 
@@ -35,6 +40,7 @@ class SubmissionsPreviewController < ApplicationController
 
   def completed
     @submission = Submission.find_by!(slug: params[:submissions_preview_slug])
+    @template = @submission.template
 
     render :completed, layout: 'form'
   end

app/controllers/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

@@ -15,20 +15,23 @@ class SubmitFormController < ApplicationController
     submission = @submitter.submission
 
     return redirect_to submit_form_completed_path(@submitter.slug) if @submitter.completed_at?
-    return render :archived if submission.template.archived_at? || submission.archived_at?
+    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' &&
+
+    @form_configs = Submitters::FormConfigs.call(@submitter, CONFIG_KEYS)
+
+    return render :awaiting if (@form_configs[:enforce_signing_order] ||
+                                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: submission.submitters, name: :attachments)
+    @attachments_index = build_attachments_index(submission)
-                                                  .preload(:blob).index_by(&:uuid)
-
-    @form_configs = Submitters::FormConfigs.call(@submitter, CONFIG_KEYS)
 
     return unless @form_configs[:prefill_signature]
 
@@ -69,6 +72,10 @@ class SubmitFormController < ApplicationController
     Submitters::SubmitValues.call(submitter, params, request)
 
     head :ok
+  rescue Submitters::SubmitValues::RequiredFieldError => e
+    Rollbar.warning("Required field #{submitter.id}: #{e.message}") if defined?(Rollbar)
+
+    render json: { field_uuid: e.message }, status: :unprocessable_entity
   rescue Submitters::SubmitValues::ValidationError => e
     render json: { error: e.message }, status: :unprocessable_entity
   end
@@ -78,4 +85,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!
+    if user.user_configs.find_by(key: UserConfig::RECEIVE_DECLINED_EMAIL)&.value != false
-    SendFormDeclinedWebhookRequestJob.perform_async('submitter_id' => submitter.id)
+      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_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,7 +4,8 @@ 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, limit: 12)

app/controllers/templates_archived_controller.rb

@@ -4,7 +4,7 @@ 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, limit: 12)

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::Filter.filter_by_status(submissions, params)
-    submissions = submissions.completed if params[:status] == 'completed'
 
-    @pagy, @submissions = pagy(submissions.preload(submitters: :start_form_submission_events).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]],
+      { schema: [[:attachment_uuid, :name, { conditions: [%i[field_uuid value action operation]] }]],
-        submitters: [%i[name uuid is_requester linked_to_uuid invite_by_uuid email]],
+        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]] }]] }
@@ -128,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,
@@ -36,16 +38,8 @@ class TemplatesDashboardController < ApplicationController
 
   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_debug_controller.rb

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

app/controllers/templates_preferences_controller.rb

@@ -22,13 +22,16 @@ 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]]
+                      [completed_message: %i[title body],
+                       submitters: [%i[uuid request_email_subject request_email_body]]]
     ).tap do |attrs|
+      attrs[:preferences].delete(:submitters) if params[:request_email_per_submitter] != '1'
       attrs[:preferences] = attrs[:preferences].transform_values do |value|
         if %w[true false].include?(value)
           value == 'true'

app/controllers/templates_recipients_controller.rb

@@ -17,38 +17,47 @@ class TemplatesRecipientsController < ApplicationController
   private
 
   def submitters_params
-    params.require(:template).permit(
+    permit_params = { submitters: [%i[name uuid is_requester optional_invite_by_uuid
-      submitters: [%i[name uuid is_requester invite_by_uuid linked_to_uuid email option]]
+                                      invite_by_uuid linked_to_uuid email option]] }
-    ).fetch(:submitters, {}).values.filter_map do |s|
+
+    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)
+      normalize_option_value(s)
-
-      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
     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(
+      filename:,
-        URI.decode_www_form_component(params[:filename].presence || params[:url]), '.*'
-      ),
       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 =
+    @webhook_url = current_account.webhook_urls.first_or_initialize
-      current_account.encrypted_configs.find_or_initialize_by(key: EncryptedConfig::WEBHOOK_URL_KEY)
 
-    authorize!(:manage, @webhook_config)
+    authorize!(:manage, @webhook_url)
   end
 end

app/controllers/user_configs_controller.rb

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

app/controllers/users_controller.rb

@@ -24,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
+      return render turbo_stream: turbo_stream.replace(:modal, template: 'users/new'), status: :unprocessable_entity
-      existing_user.archived_at = nil
-      existing_user.assign_attributes(user_params)
-      existing_user.account = current_account
-
-      @user = existing_user
     end
 
+    @user.role = User::ADMIN_ROLE unless role_valid?(@user.role)
+
     if @user.save
       UserMailer.invitation_email(@user).deliver_later!
 
@@ -47,17 +45,16 @@ class UsersController < ApplicationController
     return redirect_to settings_users_path, notice: I18n.t('unable_to_update_user') if Docuseal.demo?
 
     attrs = user_params.compact_blank.merge(user_params.slice(:archived_at))
-    attrs.delete(:role) if !role_valid?(attrs[:role]) || current_user == @user
 
     if params.dig(:user, :account_id).present?
-      account = Account.accessible_by(current_ability).find(params[:user][:account_id])
+      account = Account.accessible_by(current_ability).find(params.dig(:user, :account_id))
 
       authorize!(:manage, account)
 
       @user.account = account
     end
 
-    if @user.update(attrs)
+    if @user.update(attrs.except(current_user == @user ? :role : nil))
       redirect_back fallback_location: settings_users_path, notice: I18n.t('user_has_been_updated')
     else
       render turbo_stream: turbo_stream.replace(:modal, template: 'users/edit'), status: :unprocessable_entity
@@ -81,20 +78,16 @@ class UsersController < ApplicationController
   end
 
   def build_user
-    @user = current_account.users.find_by(email: user_params[:email])&.tap do |user|
+    @user = current_account.users.new(user_params)
-      user.assign_attributes(user_params)
-      user.archived_at = nil
-    end
-
-    @user ||= current_account.users.new(user_params)
-
-    @user
   end
 
   def user_params
     if params.key?(:user)
-      params.require(:user).permit(:email, :first_name, :last_name, :password,
+      permitted_params = %i[email first_name last_name password archived_at]
-                                   :role, :archived_at, :account_id)
+
+      permitted_params << :role if role_valid?(params.dig(:user, :role))
+
+      params.require(:user).permit(permitted_params)
     else
       {}
     end

app/controllers/webhook_preferences_controller.rb

@@ -1,37 +1,22 @@
 # frozen_string_literal: true
 
 class WebhookPreferencesController < ApplicationController
-  EVENTS = %w[
+  load_and_authorize_resource :webhook_url, parent: false
-    form.viewed
-    form.started
-    form.completed
-    form.declined
-    template.created
-    template.updated
-    submission.created
-    submission.archived
-  ].freeze
 
-  before_action :load_account_config
+  def update
-  authorize_resource :account_config, parent: false
+    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
+    @webhook_url.save!
-    @account_config.value[account_config_params[:event]] = account_config_params[:value] == '1'
-
-    @account_config.save!
 
     head :ok
   end
 
   private
 
-  def load_account_config
+  def webhook_preferences_params
-    @account_config =
+    params.require(:webhook_url).permit(events: {})
-      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)
   end
 end

app/controllers/webhook_secret_controller.rb

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

app/controllers/webhook_settings_controller.rb

@@ -1,36 +1,60 @@
 # frozen_string_literal: true
 
 class WebhookSettingsController < ApplicationController
-  before_action :load_encrypted_config
+  load_and_authorize_resource :webhook_url, parent: false, only: %i[index show new create update destroy]
-  authorize_resource :encrypted_config, parent: false
+  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_to settings_webhooks_path, notice: I18n.t('webhook_url_has_been_saved')
-
-    redirect_back(fallback_location: 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,
+    if submitter.blank? || @webhook_url.blank?
-                                                       'encrypted_config_id' => @encrypted_config.id })
+      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
+  def create_params
-    @encrypted_config =
+    params.require(:webhook_url).permit(:url, events: []).reverse_merge(events: [])
-      current_account.encrypted_configs.find_or_initialize_by(key: EncryptedConfig::WEBHOOK_URL_KEY)
   end
 
-  def encrypted_config_params
+  def update_params
-    params.require(:encrypted_config).permit(:value)
+    params.require(:webhook_url).permit(:url)
   end
 end

app/javascript/application.js

@@ -30,11 +30,11 @@ 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'
 
-import './images/preview.png'
-
 TurboInstantClick.start()
 
 document.addEventListener('turbo:before-cache', () => {
@@ -97,6 +97,8 @@ 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 () {
@@ -111,6 +113,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,

app/javascript/application.scss

@@ -97,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;

app/javascript/draw.js

@@ -1,5 +1,6 @@
 import SignaturePad from 'signature_pad'
 import { cropCanvasAndExportToPNG } from './submission_form/crop_canvas'
+import { isValidSignatureCanvas } from './submission_form/validate_signature'
 
 window.customElements.define('draw-signature', class extends HTMLElement {
   connectedCallback () {
@@ -12,6 +13,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()
     })
@@ -39,6 +44,8 @@ window.customElements.define('draw-signature', class extends HTMLElement {
 
           return response
         })
+      }).catch(error => {
+        console.log(error)
       }).finally(() => {
         this.submitButton.disabled = false
       })
@@ -61,26 +68,26 @@ window.customElements.define('draw-signature', class extends HTMLElement {
   }
 
   async submitImage () {
-    return new Promise((resolve, reject) => {
+    if (!isValidSignatureCanvas(this.pad.toData())) {
-      cropCanvasAndExportToPNG(this.canvas, { errorOnTooSmall: true }).then(async (blob) => {
+      alert('Signature is too small or simple. Please redraw.')
-        const file = new File([blob], 'signature.png', { type: 'image/png' })
 
-        const formData = new FormData()
+      return Promise.reject(new Error('Image too small or simple'))
+    }
 
-        formData.append('file', file)
+    return cropCanvasAndExportToPNG(this.canvas).then(async (blob) => {
-        formData.append('submitter_slug', this.dataset.slug)
+      const file = new File([blob], 'signature.png', { type: 'image/png' })
-        formData.append('name', 'attachments')
-        formData.append('remember_signature', 'true')
 
-        return fetch('/api/attachments', {
+      const formData = new FormData()
-          method: 'POST',
+
-          body: formData
+      formData.append('file', file)
-        }).then((resp) => resp.json()).then((attachment) => {
+      formData.append('submitter_slug', this.dataset.slug)
-          return resolve(attachment)
+      formData.append('name', 'attachments')
-        })
+      formData.append('remember_signature', 'true')
-      }).catch((error) => {
+
-        return reject(error)
+      return fetch('/api/attachments', {
-      })
+        method: 'POST',
+        body: formData
+      }).then(resp => resp.json())
     })
   }
 

app/javascript/elements/autoresize_textarea.js

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

app/javascript/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/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,6 +15,8 @@ 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',

app/javascript/submission_form/area.vue

@@ -1,9 +1,9 @@
 <template>
   <div
-    class="field-area flex absolute lg:text-base -outline-offset-1"
+    class="flex absolute lg:text-base -outline-offset-1 field-area"
     dir="auto"
     :style="computedStyle"
-    :class="{ 'font-serif': field.preferences?.font === 'Times', 'text-[1.6vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars, 'cursor-default': !submittable, 'border border-red-100 bg-red-100 cursor-pointer': submittable, 'border border-red-100': !isActive && submittable, 'bg-opacity-80': !isActive && !isValueSet && submittable, 'field-area-active outline-red-500 outline-dashed outline-2 z-10': isActive && submittable, 'bg-opacity-40': (isActive || isValueSet) && submittable }"
+    :class="{ 'text-[1.6vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars, 'cursor-default': !submittable, 'border border-red-100 bg-red-100 cursor-pointer': submittable, 'border border-red-100': !isActive && submittable, 'bg-opacity-80': !isActive && !isValueSet && submittable, 'outline-red-500 outline-dashed outline-2 z-10 field-area-active': isActive && submittable, 'bg-opacity-40': (isActive || isValueSet) && submittable }"
   >
     <div
       v-if="(!withFieldPlaceholder || !field.name || field.type === 'cells') && !isActive && !isValueSet && field.type !== 'checkbox' && submittable && !area.option_uuid"
@@ -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', ...fontClasses }"
     >
       <div
         v-for="(char, index) in modelValue"
@@ -184,20 +184,29 @@
       ref="textContainer"
       dir="auto"
       class="flex items-center px-0.5 w-full"
-      :class="alignClasses[field.preferences?.align]"
+      :class="{ ...alignClasses, ...fontClasses }"
     >
       <span
         v-if="field && field.name && withFieldPlaceholder && !modelValue && modelValue !== 0"
         class="whitespace-pre-wrap text-gray-400"
         :class="{ 'w-full': field.preferences?.align }"
       >{{ field.name }}</span>
-      <span v-else-if="Array.isArray(modelValue)">
+      <span
+        v-else-if="Array.isArray(modelValue)"
+        :class="{ 'w-full': field.preferences?.align }"
+      >
         {{ modelValue.join(', ') }}
       </span>
-      <span v-else-if="field.type === 'date'">
+      <span
+        v-else-if="field.type === 'date'"
+        :class="{ 'w-full': field.preferences?.align }"
+      >
         {{ formattedDate }}
       </span>
-      <span 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,14 +321,31 @@ 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 () {
+      if (!this.field.preferences) {
+        return {}
+      }
+
       return {
-        center: 'text-center',
+        'text-center': this.field.preferences.align === 'center',
-        left: 'text-left',
+        'text-left': this.field.preferences.align === 'left',
-        right: 'text-right'
+        'text-right': this.field.preferences.align === 'right'
+      }
+    },
+    fontClasses () {
+      if (!this.field.preferences) {
+        return {}
+      }
+
+      return {
+        'font-mono': this.field.preferences.font === 'Courier',
+        'font-serif': this.field.preferences.font === 'Times',
+        'font-bold': ['bold_italic', 'bold'].includes(this.field.preferences.font_type),
+        italic: ['bold_italic', 'italic'].includes(this.field.preferences.font_type)
       }
     },
     option () {
@@ -341,7 +367,8 @@ export default {
         cells: IconColumns3,
         multiple: IconChecks,
         phone: IconPhoneCheck,
-        payment: IconCreditCard
+        payment: IconCreditCard,
+        verification: IconId
       }
     },
     image () {
@@ -405,8 +432,12 @@ export default {
       }
 
       if (this.field.preferences?.font_size) {
-        style.fontSize = `clamp(4pt, 1.6vw, ${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) + 3}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
@@ -441,8 +472,18 @@ export default {
       }
     },
     formatNumber (number, format) {
+      if (!number && number !== 0) {
+        return ''
+      }
+
       if (format === 'comma') {
         return new Intl.NumberFormat('en-US').format(number)
+      } else if (format === 'usd') {
+        return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
+      } else if (format === 'gbp') {
+        return new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
+      } else if (format === 'eur') {
+        return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
       } else if (format === 'dot') {
         return new Intl.NumberFormat('de-DE').format(number)
       } else if (format === 'space') {

app/javascript/submission_form/areas.vue

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

app/javascript/submission_form/attachment_step.vue

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

app/javascript/submission_form/completed.vue

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

app/javascript/submission_form/crop_canvas.js

@@ -1,4 +1,4 @@
-function cropCanvasAndExportToPNG (canvas, { errorOnTooSmall } = { errorOnTooSmall: false }) {
+function cropCanvasAndExportToPNG (canvas) {
   const ctx = canvas.getContext('2d')
 
   const width = canvas.width
@@ -33,10 +33,6 @@ function cropCanvasAndExportToPNG (canvas, { errorOnTooSmall } = { errorOnTooSma
   croppedCanvas.height = croppedHeight
   const croppedCtx = croppedCanvas.getContext('2d')
 
-  if (errorOnTooSmall && (croppedWidth < 20 || croppedHeight < 20)) {
-    return Promise.reject(new Error('Image too small'))
-  }
-
   croppedCtx.drawImage(canvas, leftmost, topmost, croppedWidth, croppedHeight, 0, 0, croppedWidth, croppedHeight)
 
   return new Promise((resolve, reject) => {

app/javascript/submission_form/date_step.vue

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

app/javascript/submission_form/dropzone.vue

@@ -1,12 +1,13 @@
 <template>
   <div
+    id="dropzone"
     class="flex h-32 w-full"
     @dragover.prevent
     @drop.prevent="onDropFiles"
   >
     <label
       :for="inputId"
-      class="w-full relative bg-base-300 hover:bg-base-200 rounded-md border border-base-content border-dashed"
+      class="w-full relative bg-base-300 hover:bg-base-200 rounded-md border border-base-content border-dashed file-dropzone"
       :class="{ 'opacity-50': isLoading }"
     >
       <div class="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center">
@@ -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,23 +11,63 @@
     :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"
-    class="btn btn-neutral flex text-white absolute bottom-0 w-full mb-3"
+    class="btn btn-neutral flex text-white absolute bottom-0 w-full mb-3 expand-form-button"
     style="width: 96%; margin-left: 2%"
     @click.prevent="[isFormVisible = true, scrollIntoField(currentField)]"
   >
@@ -53,14 +93,15 @@
   <div
     v-show="isFormVisible"
     id="form_container"
-    class="shadow-md bg-base-100 absolute bottom-0 w-full border-base-200 border p-4 rounded"
+    class="shadow-md bg-base-100 absolute bottom-0 w-full border-base-200 border p-4 rounded form-container"
     :class="{ 'md:bottom-4': isBreakpointMd }"
     :style="{ backgroundColor: backgroundColor }"
   >
     <button
       v-if="!isCompleted"
       id="minimize_form_button"
-      class="absolute right-0 mr-2 mt-2 top-0 hidden md:block"
+      class="absolute right-0 top-0 minimize-form-button"
+      :class="currentField?.description?.length > 100 ? 'mr-1 mt-1 md:mr-2 md:mt-2': 'mr-2 mt-2 hidden md:block'"
       :title="t('minimize')"
       @click.prevent="minimizeForm"
     >
@@ -74,10 +115,11 @@
     >
       <form
         v-if="!isCompleted && !isInvite"
+        id="steps_form"
         ref="form"
         :action="submitPath"
         method="post"
-        class="mx-auto"
+        class="mx-auto steps-form"
         :style="{ maxWidth: isBreakpointMd ? '582px' : '' }"
         @submit.prevent="submitStep"
       >
@@ -123,7 +165,7 @@
               v-if="showFieldNames && (currentField.name || currentField.title)"
               :for="currentField.uuid"
               dir="auto"
-              class="label text-2xl"
+              class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5 field-name-label"
               :class="{ 'mb-2': !currentField.description }"
             >
               <MarkdownContent
@@ -132,7 +174,11 @@
               />
               <template v-else>
                 {{ currentField.name }}
-                <template v-if="!currentField.required">({{ t('optional') }})</template>
+              </template>
+              <template v-if="!currentField.required">
+                <span :class="{ 'hidden sm:inline': (currentField.title || currentField.name).length > 20 }">
+                  ({{ t('optional') }})
+                </span>
               </template>
             </label>
             <div
@@ -142,7 +188,7 @@
             <div
               v-if="currentField.description"
               dir="auto"
-              class="mb-3 px-1"
+              class="mb-3 px-1 field-description-text"
             >
               <MarkdownContent :string="currentField.description" />
             </div>
@@ -180,7 +226,7 @@
               v-if="showFieldNames && (currentField.name || currentField.title)"
               :for="currentField.uuid"
               dir="auto"
-              class="label text-2xl"
+              class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5 field-name-label"
               :class="{ 'mb-2': !currentField.description }"
             >
               <MarkdownContent
@@ -189,13 +235,17 @@
               />
               <template v-else>
                 {{ currentField.name }}
-                <template v-if="!currentField.required">({{ t('optional') }})</template>
+              </template>
+              <template v-if="!currentField.required">
+                <span :class="{ 'hidden sm:inline': (currentField.title || currentField.name).length > 20 }">
+                  ({{ t('optional') }})
+                </span>
               </template>
             </label>
             <div
               v-if="currentField.description"
               dir="auto"
-              class="mb-3 px-1"
+              class="mb-3 px-1 field-description-text"
             >
               <MarkdownContent :string="currentField.description" />
             </div>
@@ -220,7 +270,7 @@
                 >
                   <label
                     :for="option.uuid"
-                    class="flex items-center space-x-3"
+                    class="flex items-center space-x-3 radio-label"
                   >
                     <input
                       :id="option.uuid"
@@ -254,7 +304,7 @@
             <div
               v-if="currentField.description"
               dir="auto"
-              class="mb-3 px-1"
+              class="mb-3 px-1 field-description-text"
             >
               <MarkdownContent :string="currentField.description" />
             </div>
@@ -288,7 +338,7 @@
                   >
                     <label
                       :for="field.uuid"
-                      class="flex items-center space-x-3"
+                      class="flex items-center space-x-3 checkbox-label"
                     >
                       <input
                         type="hidden"
@@ -409,16 +459,29 @@
             @focus="scrollIntoField(currentField)"
             @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]"
+          v-if="(currentField.type !== 'payment' && currentField.type !== 'verification') || submittedValues[currentField.uuid]"
-          :class="currentField.type === 'signature' ? 'mt-2' : 'mt-6 md:mt-8'"
+          :class="currentField.type === 'signature' ? 'mt-2' : 'mt-4 md:mt-6'"
         >
           <button
             id="submit_form_button"
             ref="submitButton"
             type="submit"
-            class="base-button w-full flex justify-center"
+            class="base-button w-full flex justify-center submit-form-button"
             :disabled="isButtonDisabled"
           >
             <span class="flex">
@@ -445,6 +508,7 @@
       <InviteForm
         v-else-if="isInvite"
         :submitters="inviteSubmitters"
+        :optional-submitters="optionalInviteSubmitters"
         :submitter-slug="submitterSlug"
         :authenticity-token="authenticityToken"
         :url="baseUrl + submitPath + '/invite'"
@@ -467,15 +531,15 @@
       />
       <div
         v-if="stepFields.length < 80"
-        class="flex justify-center"
+        class="flex justify-center mt-3 sm:mt-4 mb-0 sm:mb-1"
       >
-        <div class="flex items-center mt-4 mb-1 flex-wrap">
+        <div class="flex items-center flex-wrap steps-progress">
           <a
             v-for="(step, index) in stepFields"
             :key="step[0].uuid"
             href="#"
             class="inline border border-base-300 h-3 w-3 rounded-full mx-1 mt-1"
-            :class="{ 'bg-base-300': index === currentStep, 'bg-base-content': (index < currentStep && stepFields[index].every((f) => !f.required || ![null, undefined, ''].includes(values[f.uuid]))) || isCompleted, 'bg-white': index > currentStep }"
+            :class="{ 'bg-base-300 steps-progress-current': index === currentStep, 'bg-base-content': (index < currentStep && stepFields[index].every((f) => !f.required || ![null, undefined, ''].includes(values[f.uuid]))) || isCompleted, 'bg-white': index > currentStep }"
             @click.prevent="isCompleted ? '' : [saveStep(), goToStep(index, true)]"
           />
         </div>
@@ -498,6 +562,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'
@@ -540,6 +605,7 @@ export default {
     IconWritingSign,
     AttachmentStep,
     InitialsStep,
+    VerificationStep,
     InviteForm,
     MultiSelectStep,
     IconInnerShadowTop,
@@ -572,6 +638,11 @@ export default {
       required: false,
       default: () => []
     },
+    optionalInviteSubmitters: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     withSignatureId: {
       type: Boolean,
       required: false,
@@ -582,6 +653,11 @@ export default {
       required: false,
       default: '-80px'
     },
+    orderAsOnPage: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     requireSigningReason: {
       type: Boolean,
       required: false,
@@ -592,6 +668,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,
@@ -772,13 +858,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) {
@@ -853,13 +971,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 {
@@ -871,7 +1037,7 @@ export default {
       }, [])
     },
     formulaFields () {
-      return this.fields.filter((f) => f.preferences?.formula && f.type !== 'payment')
+      return this.fields.filter((f) => f.preferences?.formula && f.type !== 'payment' && this.checkFieldConditions(f) && this.checkFieldDocumentsConditions(f))
     },
     attachmentsIndex () {
       return this.attachments.reduce((acc, a) => {
@@ -892,6 +1058,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 () {
@@ -939,7 +1122,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')
@@ -973,33 +1158,59 @@ 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 result = field.conditions.reduce((acc, cond) => {
-          const field = this.fieldsUuidIndex[c.field_uuid]
+          if (cond.operation === 'or') {
-
+            acc.push(acc.pop() || this.checkFieldCondition(cond))
-          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)))
           } 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
+      }
+
+      const defaultValue = !field || isEmpty(field.default_value) ? null : field.default_value
+
+      if (['empty', 'unchecked'].includes(condition.action)) {
+        return isEmpty(this.values[condition.field_uuid] ?? defaultValue)
+      } else if (['not_empty', 'checked'].includes(condition.action)) {
+        return !isEmpty(this.values[condition.field_uuid] ?? defaultValue)
+      } else if (['equal', 'contains'].includes(condition.action) && field) {
+        if (field.options) {
+          const option = field.options.find((o) => o.uuid === condition.value)
+          const values = [this.values[condition.field_uuid] ?? defaultValue].flat()
+
+          return values.includes(this.optionValue(option, field.options.indexOf(option)))
+        } else {
+          return [this.values[condition.field_uuid] ?? defaultValue].flat().includes(condition.value)
+        }
+      } else if (['not_equal', 'does_not_contain'].includes(condition.action) && field) {
+        const option = field.options.find((o) => o.uuid === condition.value)
+        const values = [this.values[condition.field_uuid] ?? defaultValue].flat()
+
+        return !values.includes(this.optionValue(option, field.options.indexOf(option)))
       } else {
         return true
       }
@@ -1090,7 +1301,9 @@ export default {
 
         if (!this.isCompleted) {
           if (scrollToArea) {
-            this.scrollIntoField(this.currentField)
+            this.$nextTick(() => {
+              setTimeout(() => this.scrollIntoField(this.currentField), 1)
+            })
           }
 
           this.enableScrollIntoField = false
@@ -1107,7 +1320,7 @@ export default {
       const currentFieldUuids = this.currentStepFields.map((f) => f.uuid)
       const currentFieldType = this.currentField.type
 
-      if (!formData && !this.$refs.form.checkValidity()) {
+      if (!formData && !this.$refs.form.checkValidity() && currentFieldUuids.every((fieldUuid) => isEmpty(this.submittedValues[fieldUuid]) || !isEmpty(this.values[fieldUuid]))) {
         return
       }
 
@@ -1146,18 +1359,24 @@ export default {
     scrollIntoArea (area) {
       return this.$refs.areas.scrollIntoArea(area)
     },
-    async submitStep () {
+    async submitStep (e) {
       this.isSubmitting = true
 
+      const forceComplete = e?.submitter?.getAttribute('name') === 'completed'
+
+      if (forceComplete) {
+        this.isSubmittingComplete = true
+      }
+
       const submitStep = this.currentStep
 
-      const stepPromise = ['signature', 'phone', 'initials', 'payment'].includes(this.currentField.type)
+      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 >= submitStep) {
+          if (forceComplete ? index === submitStep : index >= submitStep) {
             return false
           }
 
@@ -1167,9 +1386,9 @@ export default {
         })
 
         const formData = new FormData(this.$refs.form)
-        const isLastStep = submitStep === 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')
         }
 
@@ -1185,14 +1404,32 @@ 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.field_uuid) {
+              const field = this.fieldsUuidIndex[data.field_uuid]
 
-            alert(i18nError !== data.error ? i18nError : (data.error || this.t('value_is_invalid')))
+              if (field) {
+                const step = this.stepFields.findIndex((fields) => fields.includes(field))
+
+                if (step !== -1) {
+                  this.goToStep(step, this.autoscrollFields)
+
+                  this.showFillAllRequiredFields = true
+                }
+              }
+
+              return Promise.reject(new Error('Required field: ' + data.field_uuid))
+            } else if (data.error) {
+              const i18nKey = data.error.replace(/\s+/g, '_').toLowerCase()
+
+              alert(this.t(i18nKey) !== i18nKey ? this.t(i18nKey) : data.error)
+            } else {
+              alert(this.t('value_is_invalid'))
+            }
 
             return Promise.reject(new Error(data.error))
           }
 
-          const nextStep = (isLastStep && emptyRequiredField) || this.stepFields[submitStep + 1]
+          const nextStep = (isLastStep && emptyRequiredField) || (forceComplete ? null : this.stepFields[submitStep + 1])
 
           if (nextStep) {
             if (this.alwaysMinimize) {
@@ -1204,7 +1441,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)
@@ -1213,15 +1450,13 @@ export default {
           console.error(error)
         }).finally(() => {
           this.isSubmitting = false
+          this.isSubmittingComplete = false
         })
       }).catch(error => {
-        if (error?.message === 'Image too small') {
+        console.log(error)
-          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_or_simple_please_redraw: 'Signature is too small or simple. 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_or_simple_please_redraw: 'La firma es demasiado pequeña o simple. Por favor, vuelve a dibujarla.',
+  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',
@@ -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_or_simple_please_redraw: 'La firma è troppo piccola o semplice. 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_or_simple_please_redraw: 'Die Unterschrift ist zu klein oder zu einfach. 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_or_simple_please_redraw: 'La signature est trop petite ou trop simple. 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_or_simple_please_redraw: 'Podpis jest zbyt mały lub zbyt prosty. 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_or_simple_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_or_simple_please_redraw: 'Podpis je příliš malý nebo jednoduchý. Nakreslete jej prosím znovu.',
+  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_or_simple_please_redraw: 'A assinatura é muito pequena ou simples. Por favor, redesenhe.',
+  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_or_simple_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_or_simple_please_redraw: 'De handtekening is te klein of te eenvoudig. Teken opnieuw.',
+  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_or_simple_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_or_simple_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,11 +1,21 @@
 <template>
   <div v-if="modelValue">
-    <div class="flex justify-between items-center w-full mb-2">
+    <div class="flex justify-between items-end w-full mb-3.5 md:mb-4">
       <label
-        class="label text-2xl"
+        v-if="showFieldNames"
-      >{{ showFieldNames && field.name ? field.name : t('image') }}</label>
+        :for="field.uuid"
+        class="label text-xl sm:text-2xl py-0 field-name-label"
+      >
+        <MarkdownContent
+          v-if="field.title"
+          :string="field.title"
+        />
+        <template v-else>
+          {{ field.name || t('image') }}
+        </template>
+      </label>
       <button
-        class="btn btn-outline btn-sm"
+        class="btn btn-outline btn-sm reupload-button"
         @click.prevent="remove"
       >
         <IconReload :width="16" />
@@ -15,7 +25,7 @@
     <div>
       <img
         :src="attachmentsIndex[modelValue].url"
-        class="h-52 border border-base-300 rounded mx-auto"
+        class="h-52 border border-base-300 rounded mx-auto uploaded-image-preview"
       >
     </div>
     <input
@@ -30,12 +40,12 @@
     <div
       v-if="field.description"
       dir="auto"
-      class="mb-3 px-1"
+      class="mb-3 px-1 field-description-text"
     >
       <MarkdownContent :string="field.description" />
     </div>
     <FileDropzone
-      :message="`${t('upload')} ${field.name || t('image')}${field.required ? '' : ` (${t('optional')})`}`"
+      :message="`${t('upload')} ${(field.title || field.name) || t('image')}${field.required ? '' : ` (${t('optional')})`}`"
       :submitter-slug="submitterSlug"
       :dry-run="dryRun"
       :accept="'image/*'"

app/javascript/submission_form/initials_step.vue

@@ -1,21 +1,22 @@
 <template>
   <div dir="auto">
     <div
-      class="flex justify-between items-center w-full"
+      class="flex justify-between items-end w-full mb-3.5 md:mb-4"
       :class="{ 'mb-2': !field.description }"
     >
       <label
-        class="label text-2xl"
+        v-if="showFieldNames"
+        class="label text-xl sm:text-2xl py-0 field-name-label"
       >
         <MarkdownContent
           v-if="field.title"
           :string="field.title"
         />
         <template v-else>
-          {{ showFieldNames && field.name ? field.name : t('initials') }}
+          {{ field.name || t('initials') }}
         </template>
       </label>
-      <div class="space-x-2 flex">
+      <div class="space-x-2 flex flex-none">
         <span
           v-if="isDrawInitials"
           class="tooltip"
@@ -24,7 +25,7 @@
           <a
             id="type_text_button"
             href="#"
-            class="btn btn-outline font-medium btn-sm"
+            class="btn btn-outline font-medium btn-sm type-text-button"
             @click.prevent="toggleTextInput"
           >
             <IconTextSize :width="16" />
@@ -41,7 +42,7 @@
           <a
             id="type_text_button"
             href="#"
-            class="btn btn-outline font-medium btn-sm"
+            class="btn btn-outline font-medium btn-sm type-text-button"
             @click.prevent="toggleTextInput"
           >
             <IconSignature :width="16" />
@@ -54,9 +55,7 @@
           class="tooltip"
           :data-tip="t('click_to_upload')"
         >
-          <label
+          <label class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap upload-image-button">
-            class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap"
-          >
             <IconUpload :width="16" />
             <input
               :key="uploadImageInputKey"
@@ -73,7 +72,7 @@
         <a
           v-if="modelValue || computedPreviousValue"
           href="#"
-          class="btn font-medium btn-outline btn-sm"
+          class="btn font-medium btn-outline btn-sm clear-canvas-button"
           @click.prevent="remove"
         >
           <IconReload :width="16" />
@@ -82,7 +81,7 @@
         <a
           v-else
           href="#"
-          class="btn font-medium btn-outline btn-sm"
+          class="btn font-medium btn-outline btn-sm clear-canvas-button"
           @click.prevent="clear"
         >
           <IconReload :width="16" />
@@ -104,7 +103,7 @@
     <div
       v-if="field.description"
       dir="auto"
-      class="mb-3 px-1"
+      class="mb-3 px-1 field-description-text"
     >
       <MarkdownContent :string="field.description" />
     </div>
@@ -119,11 +118,17 @@
       :src="attachmentsIndex[modelValue || computedPreviousValue].url"
       class="mx-auto bg-white border border-base-300 rounded max-h-44"
     >
-    <canvas
+    <div class="relative">
-      v-show="!modelValue && !computedPreviousValue"
+      <div
-      ref="canvas"
+        v-if="!isDrawInitials"
-      class="bg-white border border-base-300 rounded-2xl w-full"
+        class="absolute top-0 right-0 left-0 bottom-0"
-    />
+      />
+      <canvas
+        v-show="!modelValue && !computedPreviousValue"
+        ref="canvas"
+        class="bg-white border border-base-300 rounded-2xl w-full draw-canvas"
+      />
+    </div>
     <input
       v-if="!isDrawInitials && !modelValue && !computedPreviousValue"
       id="initials_text_input"
@@ -226,6 +231,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,18 +3,24 @@
     v-if="showFieldNames && (field.name || field.title)"
     :for="field.uuid"
     dir="auto"
-    class="label text-2xl"
+    class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5 field-name-label"
     :class="{ 'mb-2': !field.description }"
-  ><MarkdownContent
+  >
-     v-if="field.title"
+    <MarkdownContent
-     :string="field.title"
+      v-if="field.title"
-   />
+      :string="field.title"
+    />
     <template v-else>{{ field.name }}</template>
+    <template v-if="!field.required">
+      <span :class="{ 'hidden sm:inline': (field.title || field.name).length > 20 }">
+        ({{ t('optional') }})
+      </span>
+    </template>
   </label>
   <div
     v-if="field.description"
     dir="auto"
-    class="mb-3 px-1"
+    class="mb-3 px-1 field-description-text"
   >
     <MarkdownContent :string="field.description" />
   </div>
@@ -44,7 +50,7 @@
       >
         <label
           :for="option.uuid"
-          class="flex items-center space-x-3"
+          class="flex items-center space-x-3 checkbox-label"
           @click="scrollIntoField(field)"
         >
           <input

app/javascript/submission_form/number_step.vue

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

app/javascript/submission_form/payment_step.vue

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

app/javascript/submission_form/phone_step.vue

@@ -1,8 +1,9 @@
 <template>
   <div>
     <label
+      v-if="showFieldNames"
       :for="isCodeSent ? 'one_time_code' : field.uuid"
-      class="label text-2xl"
+      class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5 field-name-label"
       :class="{ 'mb-2': !field.description }"
     >
       <MarkdownContent
@@ -10,16 +11,13 @@
         :string="field.title"
       />
       <template v-else>
-        {{ showFieldNames && field.name ? field.name : t('verified_phone_number') }}
+        {{ field.name || t('verified_phone_number') }}
-        <template v-if="!field.required">
-          ({{ t('optional') }})
-        </template>
       </template>
     </label>
     <div
       v-if="field.description"
       dir="auto"
-      class="mb-3 px-1"
+      class="mb-3 px-1 field-description-text"
     >
       <MarkdownContent :string="field.description" />
     </div>
@@ -47,14 +45,21 @@
           <a
             v-if="!defaultValue"
             href="#"
-            class="link"
+            class="link change-phone-number-link"
             @click.prevent="isCodeSent = false"
           >
             {{ t('change_phone_number') }}
           </a>
-          <a
+          <span
-            href="#"
+            v-if="resendCodeCountdown > 0"
             class="link"
+          >
+            {{ t('wait_countdown_seconds').replace('{countdown}', resendCodeCountdown) }}
+          </span>
+          <a
+            v-else
+            href="#"
+            class="link resend-code-link"
             @click.prevent="resendCode"
           >
             {{ isResendLoading ? t('sending') : t('resend_code') }}
@@ -63,13 +68,17 @@
       </div>
       <div
         v-show="!isCodeSent"
-        class="flex w-full rounded-full outline-neutral-content outline-2 outline-offset-2 focus-within:outline"
+        class="flex w-full rounded-full outline-neutral-content outline-2 outline-offset-2 focus-within:outline phone-number-input-container"
       >
-        <div class="relative inline-block">
+        <div
-          <div class="btn bg-base-200 border border-neutral-300 text-2xl whitespace-nowrap font-normal rounded-l-full">
+          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 country-code-select-label">
             {{ 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))"
@@ -169,6 +178,8 @@ export default {
   data () {
     return {
       isCodeSent: false,
+      codeSentAt: null,
+      resendCodeCountdown: 0,
       isResendLoading: false,
       phoneValue: this.modelValue || this.defaultValue || '',
       selectedCountry: {}
@@ -176,8 +187,8 @@ export default {
   },
   computed: {
     countries () {
-      return phoneData.map(([name, dial, flag, tz]) => {
+      return phoneData.map(([iso, name, dial, flag, tz]) => {
-        return { name, dial, flag, tz }
+        return { iso, name, dial, flag, tz }
       })
     },
     countriesDialIndex () {
@@ -216,6 +227,11 @@ export default {
       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')
@@ -242,13 +258,28 @@ export default {
       }
     },
     resendCode () {
-      this.isResendLoading = true
+      if (this.codeSentAt && Date.now() - this.codeSentAt < 15000) {
+        this.startResendCodeCountdown()
+      } else {
+        this.isResendLoading = true
 
-      this.sendVerificationCode().finally(() => {
+        this.sendVerificationCode().then(() => {
-        alert(this.t('verification_code_has_been_resent'))
+          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', {
@@ -260,12 +291,20 @@ export default {
         }),
         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.fullInternationalPhoneValue))
+          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
         }
       })
     },

app/javascript/submission_form/signature_step.vue

@@ -4,30 +4,31 @@
     class="relative"
   >
     <div
-      class="flex justify-between items-center w-full"
+      class="flex justify-between items-end w-full mb-3.5 md:mb-4"
       :class="{ 'mb-2': !field.description }"
     >
       <label
-        class="label text-2xl"
+        v-if="showFieldNames"
+        class="label text-xl sm:text-2xl py-0 field-name-label"
       >
         <MarkdownContent
           v-if="field.title"
           :string="field.title"
         />
         <template v-else>
-          {{ showFieldNames && field.name ? field.name : t('signature') }}
+          {{ field.name || t('signature') }}
         </template>
       </label>
-      <div class="space-x-2 flex">
+      <div class="space-x-2 flex flex-none">
         <span
-          v-if="isTextSignature && field.preferences?.format !== 'typed'"
+          v-if="isTextSignature && format !== 'typed' && format !== 'upload'"
           class="tooltip"
           :data-tip="t('draw_signature')"
         >
           <a
             id="type_text_button"
             href="#"
-            class="btn btn-outline btn-sm font-medium"
+            class="btn btn-outline btn-sm font-medium type-text-button"
             @click.prevent="[toggleTextInput(), hideQr()]"
           >
             <IconSignature :width="16" />
@@ -37,14 +38,15 @@
           </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
             id="type_text_button"
             href="#"
-            class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap"
+            class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap type-text-button"
             @click.prevent="[toggleTextInput(), hideQr()]"
           >
             <IconTextSize :width="16" />
@@ -54,13 +56,12 @@
           </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
+          <label class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap upload-image-button">
-            class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap"
-          >
             <IconCamera :width="16" />
             <input
               :key="uploadImageInputKey"
@@ -77,14 +78,14 @@
         <a
           v-if="modelValue || computedPreviousValue"
           href="#"
-          class="btn btn-outline btn-sm font-medium"
+          class="btn btn-outline btn-sm font-medium reupload-button"
           @click.prevent="remove"
         >
           <IconReload :width="16" />
-          {{ 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')"
         >
@@ -116,7 +117,7 @@
     <div
       v-if="field.description"
       dir="auto"
-      class="mb-3 px-1"
+      class="mb-3 px-1 field-description-text"
     >
       <MarkdownContent :string="field.description" />
     </div>
@@ -131,7 +132,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,11 +157,15 @@
           {{ 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"
         style="padding: 1px; 0"
-        class="bg-white border border-base-300 rounded-2xl w-full"
+        class="bg-white border border-base-300 rounded-2xl w-full draw-canvas"
       />
       <div
         v-if="isShowQr"
@@ -255,7 +271,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">
@@ -276,8 +292,10 @@
 <script>
 import { IconReload, IconCamera, IconSignature, IconTextSize, IconArrowsDiagonalMinimize2, IconQrcode, IconX } from '@tabler/icons-vue'
 import { cropCanvasAndExportToPNG } from './crop_canvas'
+import { isValidSignatureCanvas } from './validate_signature'
 import SignaturePad from 'signature_pad'
 import AppearsOn from './appears_on'
+import FileDropzone from './dropzone'
 import MarkdownContent from './markdown_content'
 import { v4 } from 'uuid'
 
@@ -290,6 +308,7 @@ export default {
   components: {
     AppearsOn,
     IconReload,
+    FileDropzone,
     IconCamera,
     IconQrcode,
     MarkdownContent,
@@ -384,6 +403,9 @@ export default {
     submitterSlug () {
       return this.submitter.slug
     },
+    format () {
+      return this.field.preferences?.format
+    },
     defaultReasons () {
       return {
         [this.t('approved_by')]: this.t('approved'),
@@ -419,6 +441,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
 
@@ -573,6 +599,7 @@ export default {
     },
     drawImage (event) {
       this.remove()
+      this.clear()
       this.isSignatureStarted = true
 
       this.drawOnCanvas(event.target.files[0], this.$refs.canvas)
@@ -655,8 +682,14 @@ export default {
         return Promise.resolve({})
       }
 
-      return new Promise((resolve, reject) => {
+      if (this.isSignatureStarted && this.pad.toData().length > 0 && !isValidSignatureCanvas(this.pad.toData())) {
-        cropCanvasAndExportToPNG(this.$refs.canvas, { errorOnTooSmall: true }).then(async (blob) => {
+        alert(this.t('signature_is_too_small_or_simple_please_redraw'))
+
+        return Promise.reject(new Error('Image too small or simple'))
+      }
+
+      return new Promise((resolve) => {
+        cropCanvasAndExportToPNG(this.$refs.canvas).then(async (blob) => {
           const file = new File([blob], 'signature.png', { type: 'image/png' })
 
           if (this.dryRun) {
@@ -692,12 +725,6 @@ export default {
               return resolve(attachment)
             })
           }
-        }).catch((error) => {
-          if (error.message === 'Image too small' && this.field.required === false) {
-            return resolve({})
-          } else {
-            return reject(error)
-          }
         })
       })
     }

app/javascript/submission_form/text_step.vue

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

@@ -0,0 +1,38 @@
+function isValidSignatureCanvas (data) {
+  if (data.length === 0) return false
+
+  const strokes = data.filter(stroke => Array.isArray(stroke.points) && stroke.points.length > 2)
+
+  if (strokes.length === 0) return false
+
+  let skippedStraightLine = 0
+
+  const validStrokes = strokes.filter(stroke => {
+    const points = stroke.points
+    const first = points[0]
+    const last = points[points.length - 1]
+    const A = last.y - first.y
+    const B = first.x - last.x
+    const C = last.x * first.y - first.x * last.y
+    const lineLength = Math.sqrt(A * A + B * B)
+
+    const totalDeviation = points.reduce((sum, p) => {
+      const distanceToLine = Math.abs(A * p.x + B * p.y + C) / lineLength
+      return sum + distanceToLine
+    }, 0)
+
+    const avgDeviation = totalDeviation / points.length
+
+    if (avgDeviation < 3 && skippedStraightLine < 2) {
+      skippedStraightLine++
+
+      return false
+    }
+
+    return true
+  })
+
+  return validStrokes.length > 0
+}
+
+export { isValidSignatureCanvas }

app/javascript/submission_form/verification_step.vue

@@ -0,0 +1,193 @@
+<template>
+  <label class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5 field-name-label">
+    <MarkdownContent
+      v-if="field.title"
+      :string="field.title"
+    />
+    <template v-else>{{ field.name || t('identity_verification') }}</template>
+  </label>
+  <div
+    v-if="field.description"
+    dir="auto"
+    class="mb-4 px-1 field-description-text"
+  >
+    <MarkdownContent :string="field.description" />
+  </div>
+  <div
+    v-if="emptyValueRequiredStep && emptyValueRequiredStep[0] !== field"
+    class="px-1 field-description-text"
+  >
+    {{ 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

@@ -1,7 +1,8 @@
 <template>
   <div
-    class="absolute overflow-visible group"
+    class="absolute overflow-visible group field-area-container"
     :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
@@ -32,7 +33,7 @@
     </div>
     <div
       v-if="field?.type && (isSelected || isNameFocus)"
-      class="absolute bg-white rounded-t border overflow-visible whitespace-nowrap flex z-10"
+      class="absolute bg-white rounded-t border overflow-visible whitespace-nowrap flex z-10 field-area-controls"
       style="top: -25px; height: 25px"
       @mousedown.stop
       @pointerdown.stop
@@ -40,7 +41,7 @@
       <FieldSubmitter
         v-if="field.type != 'heading'"
         v-model="field.submitter_uuid"
-        class="border-r"
+        class="border-r roles-dropdown"
         :compact="true"
         :editable="editable && (!defaultField || defaultField.role !== submitter?.name)"
         :allow-add-new="!defaultSubmitters.length"
@@ -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"
@@ -107,7 +108,7 @@
         >{{ t('editable') }}</label>
         <span
           v-if="field.type !== 'payment' && !isValueInput"
-          class="dropdown dropdown-end"
+          class="dropdown dropdown-end field-area-settings-dropdown"
           @mouseenter="renderDropdown = true"
           @touchstart="renderDropdown = true"
         >
@@ -140,6 +141,7 @@
               :with-required="false"
               :with-areas="false"
               @click-formula="isShowFormulaModal = true"
+              @click-font="isShowFontModal = true"
               @click-description="isShowDescriptionModal = true"
               @click-condition="isShowConditionsModal = true"
               @scroll-to="[selectedAreaRef.value = $event, $emit('scroll-to', $event)]"
@@ -158,9 +160,9 @@
     </div>
     <div
       ref="touchValueTarget"
-      class="flex items-center h-full w-full"
+      class="flex items-center h-full w-full field-area"
       dir="auto"
-      :class="[isValueInput ? 'bg-opacity-50' : 'bg-opacity-80', field.type === 'heading' ? 'bg-gray-50' : bgColors[submitterIndex], isDefaultValuePresent || isValueInput || (withFieldPlaceholder && field.areas) ? (alignClasses[field.preferences?.align] || '') : 'justify-center']"
+      :class="[isValueInput ? 'bg-opacity-50' : 'bg-opacity-80', field.type === 'heading' ? 'bg-gray-50' : bgColors[submitterIndex % bgColors.length], isDefaultValuePresent || isValueInput || (withFieldPlaceholder && field.areas) ? fontClasses : 'justify-center']"
       @click="focusValueInput"
     >
       <span
@@ -175,6 +177,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 +213,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 +239,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"
     />
@@ -251,12 +254,23 @@
         @close="isShowFormulaModal = false"
       />
     </Teleport>
+    <Teleport
+      v-if="isShowFontModal"
+      :to="modalContainerEl"
+    >
+      <FontModal
+        :field="field"
+        :editable="editable && !defaultField"
+        :build-default-name="buildDefaultName"
+        @close="isShowFontModal = false"
+      />
+    </Teleport>
     <Teleport
       v-if="isShowConditionsModal"
       :to="modalContainerEl"
     >
       <ConditionsModal
-        :field="field"
+        :item="field"
         :build-default-name="buildDefaultName"
         @close="isShowConditionsModal = false"
       />
@@ -281,6 +295,7 @@ import FieldType from './field_type'
 import Field from './field'
 import FieldSettings from './field_settings'
 import FormulaModal from './formula_modal'
+import FontModal from './font_modal'
 import ConditionsModal from './conditions_modal'
 import DescriptionModal from './description_modal'
 import { IconX, IconCheck, IconDotsVertical } from '@tabler/icons-vue'
@@ -293,6 +308,7 @@ export default {
     IconCheck,
     FieldSettings,
     FormulaModal,
+    FontModal,
     IconDotsVertical,
     DescriptionModal,
     ConditionsModal,
@@ -315,6 +331,11 @@ export default {
       required: false,
       default: false
     },
+    maxPage: {
+      type: Number,
+      required: false,
+      default: null
+    },
     defaultField: {
       type: Object,
       required: false,
@@ -345,6 +366,7 @@ export default {
   data () {
     return {
       isShowFormulaModal: false,
+      isShowFontModal: false,
       isShowConditionsModal: false,
       isContenteditable: false,
       isSettingsFocus: false,
@@ -354,6 +376,7 @@ export default {
       isMoved: false,
       renderDropdown: false,
       isNameFocus: false,
+      isHeadingSelected: false,
       textOverflowChars: 0,
       dragFrom: { x: 0, y: 0 }
     }
@@ -370,7 +393,7 @@ export default {
       }
     },
     isValueInput () {
-      return (this.field.type === 'heading' && this.isSelected) || this.isContenteditable || (this.inputMode && ['text', 'number', 'date'].includes(this.field.type))
+      return (this.field.type === 'heading' && this.isHeadingSelected) || this.isContenteditable || (this.inputMode && ['text', 'number', 'date'].includes(this.field.type))
     },
     modalContainerEl () {
       return this.$el.getRootNode().querySelector('#docuseal_modal_container')
@@ -378,11 +401,19 @@ export default {
     defaultName () {
       return this.buildDefaultName(this.field, this.template.fields)
     },
-    alignClasses () {
+    fontClasses () {
+      if (!this.field.preferences) {
+        return {}
+      }
+
       return {
-        center: 'justify-center',
+        'justify-center': this.field.preferences.align === 'center',
-        left: 'justify-start',
+        'justify-start': this.field.preferences.align === 'left',
-        right: 'justify-end'
+        'justify-end': this.field.preferences.align === 'right',
+        'font-mono': this.field.preferences.font === 'Courier',
+        'font-serif': this.field.preferences.font === 'Times',
+        'font-bold': ['bold_italic', 'bold'].includes(this.field.preferences.font_type),
+        italic: ['bold_italic', 'italic'].includes(this.field.preferences.font_type)
       }
     },
     optionIndexText () {
@@ -413,16 +444,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',
@@ -437,16 +458,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',
@@ -492,13 +503,17 @@ export default {
   methods: {
     buildDefaultName: Field.methods.buildDefaultName,
     closeDropdown () {
-      document.activeElement.blur()
+      this.$el.getRootNode().activeElement.blur()
     },
     maybeToggleDefaultValue () {
+      if (!this.editable) {
+        return
+      }
+
       if (['text', 'number'].includes(this.field.type)) {
         this.isContenteditable = true
 
-        this.$nextTick(() => this.focusValueInput())
+        this.focusValueInput()
       } else if (this.field.type === 'checkbox') {
         this.field.readonly = !this.field.readonly
         this.field.default_value === true ? delete this.field.default_value : this.field.default_value = true
@@ -520,20 +535,28 @@ export default {
       }
     },
     focusValueInput (e) {
-      if (this.$refs.defaultValue !== document.activeElement) {
+      this.$nextTick(() => {
-        this.$refs.defaultValue.focus()
+        if (this.$refs.defaultValue && this.$refs.defaultValue !== document.activeElement) {
+          this.$refs.defaultValue.focus()
 
-        if (this.$refs.defaultValue.innerText.length && this.$refs.defaultValue !== e?.target) {
+          if (this.$refs.defaultValue.innerText.length && this.$refs.defaultValue !== e?.target) {
-          window.getSelection().collapse(
+            window.getSelection().collapse(
-            this.$refs.defaultValue.firstChild,
+              this.$refs.defaultValue.firstChild,
-            this.$refs.defaultValue.innerText.length
+              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') {
@@ -639,6 +662,7 @@ export default {
       const text = this.$refs.defaultValue.innerText.trim()
 
       this.isContenteditable = false
+      this.isHeadingSelected = false
 
       if (text) {
         if (this.field.type === 'number') {
@@ -719,12 +743,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()
       }
@@ -750,10 +780,6 @@ export default {
 
       this.selectedAreaRef.value = this.area
 
-      if (this.field.type === 'heading') {
-        this.$nextTick(() => this.focusValueInput())
-      }
-
       this.dragFrom = { x: rect.left - e.clientX, y: rect.top - e.clientY }
 
       this.$el.getRootNode().addEventListener('mousemove', this.mouseMove)
@@ -772,21 +798,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">
@@ -31,7 +32,7 @@
     <div
       v-if="$slots.buttons || withTitle"
       id="title_container"
-      class="flex justify-between py-1.5 items-center pr-4 top-0 z-10"
+      class="flex justify-between py-1.5 items-center pr-4 top-0 z-10 title-container"
       :class="{ sticky: withStickySubmitters || isBreakpointLg }"
       :style="{ backgroundColor }"
     >
@@ -46,7 +47,7 @@
           v-if="withTitle"
           :model-value="template.name"
           :editable="editable"
-          class="text-xl md:text-3xl font-semibold focus:text-clip"
+          class="text-xl md:text-3xl font-semibold focus:text-clip template-name"
           :icon-stroke-width="2.3"
           @update:model-value="updateName"
         />
@@ -162,8 +163,8 @@
     </div>
     <div
       id="main_container"
-      class="flex"
+      class="flex main-container"
-      :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"
         />
@@ -202,7 +205,7 @@
           <button
             v-if="sortedDocuments.length && editable && withAddPageButton"
             id="add_blank_page_button"
-            class="btn btn-outline w-full"
+            class="btn btn-outline w-full add-blank-page-button"
             @click.prevent="addBlankPage"
           >
             <IconInnerShadowTop
@@ -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"
@@ -235,7 +239,7 @@
             <button
               v-if="withAddPageButton"
               id="add_blank_page_button"
-              class="btn btn-outline w-full mt-4"
+              class="btn btn-outline w-full mt-4 add-blank-page-button"
               @click.prevent="addBlankPage"
             >
               <IconInnerShadowTop
@@ -262,7 +266,8 @@
                 :is-drag="!!dragField"
                 :input-mode="inputMode"
                 :default-fields="[...defaultRequiredFields, ...defaultFields]"
-                :allow-draw="!onlyDefinedFields"
+                :allow-draw="!onlyDefinedFields || drawField"
+                :data-document-uuid="document.uuid"
                 :default-submitters="defaultSubmitters"
                 :with-field-placeholder="withFieldPlaceholder"
                 :draw-field="drawField"
@@ -302,7 +307,7 @@
               <button
                 v-if="withAddPageButton"
                 id="add_blank_page_button"
-                class="btn btn-outline w-full mt-4"
+                class="btn btn-outline w-full mt-4 add-blank-page-button"
                 @click.prevent="addBlankPage"
               >
                 <IconInnerShadowTop
@@ -320,9 +325,9 @@
         </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="relative w-80 flex-none mt-1 pr-4 pl-0.5 hidden md:block fields-list-container"
         :class="drawField ? 'overflow-hidden' : 'overflow-y-auto overflow-x-hidden'"
       >
         <div
@@ -330,13 +335,13 @@
           class="sticky inset-0 h-full z-20"
           :style="{ backgroundColor }"
         >
-          <div class="bg-base-200 rounded-lg p-5 text-center space-y-4">
+          <div class="bg-base-200 rounded-lg p-5 text-center space-y-4 draw-field-container">
             <p>
               {{ t('draw_field_on_the_document') }}
             </p>
             <div>
               <button
-                class="base-button"
+                class="base-button cancel-draw-button"
                 @click="clearDrawField"
               >
                 {{ t('cancel') }}
@@ -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,11 +403,15 @@
         :default-fields="[...defaultRequiredFields, ...defaultFields]"
         :default-required-fields="defaultRequiredFields"
         :field-types="fieldTypes"
+        :class="{ 'md:hidden': !isMobile }"
         :selected-submitter="selectedSubmitter"
         @select="startFieldDraw($event)"
       />
     </div>
-    <div id="docuseal_modal_container" />
+    <div
+      id="docuseal_modal_container"
+      class="modal-container"
+    />
   </div>
 </template>
 
@@ -415,6 +426,7 @@ 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'
@@ -454,6 +466,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 +571,11 @@ export default {
       required: false,
       default: () => []
     },
+    defineSubmitters: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     acceptFileTypes: {
       type: String,
       required: false,
@@ -609,6 +627,11 @@ export default {
       required: false,
       default: true
     },
+    withFieldsSearch: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
     withFieldsList: {
       type: Boolean,
       required: false,
@@ -629,6 +652,11 @@ export default {
       required: false,
       default: false
     },
+    withVerification: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
     withPayment: {
       type: Boolean,
       required: false,
@@ -677,11 +705,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)$/)
@@ -749,6 +783,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 () {
@@ -786,6 +836,89 @@ 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()
     },
@@ -998,6 +1131,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()
@@ -1056,7 +1205,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') {
@@ -1170,6 +1319,10 @@ export default {
       }
     },
     onDropfield (area) {
+      if (!this.editable) {
+        return
+      }
+
       const field = this.fieldsDragFieldRef.value || {
         name: '',
         uuid: v4(),
@@ -1180,7 +1333,11 @@ export default {
 
       if (!this.fieldsDragFieldRef.value) {
         if (['select', 'multiple', 'radio'].includes(field.type)) {
-          field.options = [{ value: '', uuid: v4() }]
+          if (this.dragField?.options?.length) {
+            field.options = this.dragField.options.map(option => ({ value: option, uuid: v4() }))
+          } else {
+            field.options = [{ value: '', uuid: v4() }]
+          }
         }
 
         if (['stamp', 'heading'].includes(field.type)) {
@@ -1188,9 +1345,8 @@ export default {
         }
 
         if (field.type === 'date') {
-          field.preferences = {
+          field.preferences ||= {}
-            format: this.defaultDateFormat
+          field.preferences.format ||= this.defaultDateFormat
-          }
         }
       }
 
@@ -1220,7 +1376,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
@@ -1251,11 +1407,20 @@ export default {
       const lastArea = field.areas[field.areas.length - 1]
 
       if (lastArea) {
-        fieldArea.x -= lastArea.w / 2
         fieldArea.w = lastArea.w
         fieldArea.h = lastArea.h
       }
 
+      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
@@ -1273,6 +1438,8 @@ export default {
           const documentRef = this.documentRefs.find((e) => e.document.uuid === area.attachment_uuid)
           const areaRef = documentRef.pageRefs[area.page].areaRefs.find((ref) => ref.area === this.selectedAreaRef.value)
 
+          areaRef.isHeadingSelected = true
+
           areaRef.focusValueInput()
         })
       }
@@ -1323,7 +1490,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])
       })
@@ -1358,29 +1527,29 @@ export default {
     onDocumentRemove (item) {
       if (window.confirm(this.t('are_you_sure_'))) {
         this.template.schema.splice(this.template.schema.indexOf(item), 1)
-      }
 
-      const removedFieldUuids = []
+        const removedFieldUuids = []
 
-      this.template.fields.forEach((field) => {
+        this.template.fields.forEach((field) => {
-        [...(field.areas || [])].forEach((area) => {
+          [...(field.areas || [])].forEach((area) => {
-          if (area.attachment_uuid === item.attachment_uuid) {
+            if (area.attachment_uuid === item.attachment_uuid) {
-            field.areas.splice(field.areas.indexOf(area), 1)
+              field.areas.splice(field.areas.indexOf(area), 1)
 
-            removedFieldUuids.push(field.uuid)
+              removedFieldUuids.push(field.uuid)
-          }
+            }
+          })
         })
-      })
 
-      this.template.fields =
+        this.template.fields =
-        this.template.fields.filter((f) => !removedFieldUuids.includes(f.uuid) || f.areas?.length)
+          this.template.fields.filter((f) => !removedFieldUuids.includes(f.uuid) || f.areas?.length)
 
-      this.save()
+        this.save()
+      }
     },
     onDocumentReplace (data) {
       const { replaceSchemaItem, schema, documents } = data
 
-      this.template.schema.splice(this.template.schema.indexOf(replaceSchemaItem), 1, schema[0])
+      this.template.schema.splice(this.template.schema.indexOf(replaceSchemaItem), 1, { ...replaceSchemaItem, ...schema[0] })
       this.template.documents.push(...documents)
 
       if (data.fields) {

app/javascript/template_builder/conditions_modal.vue

@@ -8,12 +8,12 @@
     />
     <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
       <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
-        <span>
+        <span class="modal-title">
-          {{ t('condition') }} - {{ field.name || buildDefaultName(field, template.fields) }}
+          {{ t('condition') }} - {{ item.name || buildDefaultName(item, template.fields) }}
         </span>
         <a
           href="#"
-          class="text-xl"
+          class="text-xl modal-close-button"
           @click.prevent="$emit('close')"
         >&times;</a>
       </div>
@@ -23,25 +23,36 @@
           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="conditions.length > 1"
+                v-if="cindex > 0"
-                class="flex justify-between border-b mx-1 -mb-1 pb-1"
+                class="divider -mb-2 mx-1"
               >
-                <span class="text-sm">
+                <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 mx-1"
+              >
+                <label class="text-sm">
                   {{ t('condition') }} {{ cindex + 1 }}
-                </span>
+                </label>
                 <a
                   href="#"
                   class="link text-sm"
@@ -120,19 +131,17 @@
             class="inline float-right link text-right mb-3 px-2"
             @click.prevent="conditions.push({})"
           > + {{ t('add_condition') }}</a>
-          <button
+          <button class="base-button w-full mt-2 modal-save-button">
-            class="base-button w-full mt-2"
-          >
             {{ t('save') }}
           </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>
@@ -147,7 +156,7 @@ export default {
   name: 'ConditionModal',
   inject: ['t', 'save', 'template', 'withConditions'],
   props: {
-    field: {
+    item: {
       type: Object,
       required: true
     },
@@ -159,22 +168,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 (this.item.submitter_uuid) {
-        if (f !== this.field && f.submitter_uuid === this.field.submitter_uuid) {
+        return this.template.fields.reduce((acc, f) => {
-          acc.push(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) {
@@ -208,9 +221,9 @@ export default {
       }
 
       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/controls.vue

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

app/javascript/template_builder/description_modal.vue

@@ -8,12 +8,12 @@
     />
     <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
       <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
-        <span>
+        <span class="modal-title">
           {{ field.name || buildDefaultName(field, template.fields) }}
         </span>
         <a
           href="#"
-          class="text-xl"
+          class="text-xl modal-close-button"
           @click.prevent="$emit('close')"
         >&times;</a>
       </div>
@@ -55,9 +55,7 @@
               >
             </div>
           </div>
-          <button
+          <button class="base-button w-full mt-4 modal-save-button">
-            class="base-button w-full mt-4"
-          >
             {{ t('save') }}
           </button>
         </form>

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/field.vue

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

app/javascript/template_builder/field_settings.vue

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

app/javascript/template_builder/field_submitter.vue

@@ -5,11 +5,11 @@
     @touchstart="renderDropdown = true"
   >
     <div class="flex space-x-2 items-end">
-      <div class="group/contenteditable-container bg-base-100 rounded-md p-2 border border-base-300 w-full flex justify-between items-end">
+      <div class="group/contenteditable-container bg-base-100 rounded-md p-2 border border-base-300 w-full flex justify-between items-end roles-dropdown-label-mobile">
         <div class="flex items-center space-x-2">
           <span
             class="w-3 h-3 flex-shrink-0 rounded-full"
-            :class="colors[submitters.indexOf(selectedSubmitter)]"
+            :class="colors[submitters.indexOf(selectedSubmitter) % colors.length]"
           />
           <Contenteditable
             v-model="selectedSubmitter.name"
@@ -22,7 +22,7 @@
           />
         </div>
       </div>
-      <div class="dropdown dropdown-top dropdown-end">
+      <div class="dropdown dropdown-top dropdown-end roles-dropdown-mobile">
         <label
           tabindex="0"
           class="bg-base-100 cursor-pointer rounded-md p-2 border border-base-300 w-full flex justify-center"
@@ -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)
     }
@@ -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

@@ -1,6 +1,6 @@
 <template>
   <span
-    class="dropdown"
+    class="dropdown field-types-dropdown"
     @mouseenter="renderDropdown = true"
     @touchstart="renderDropdown = true"
   >
@@ -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,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')
       }
     },
     fieldLabels () {
@@ -130,7 +131,8 @@ export default {
         cells: this.t('cells_field'),
         stamp: this.t('stamp_field'),
         payment: this.t('payment_field'),
-        phone: this.t('phone_field')
+        phone: this.t('phone_field'),
+        verification: this.t('verify_id')
       }
     },
     fieldIcons () {
@@ -150,7 +152,8 @@ export default {
         cells: IconColumns3,
         stamp: IconRubberStamp,
         payment: IconCreditCard,
-        phone: IconPhoneCheck
+        phone: IconPhoneCheck,
+        verification: IconId
       }
     },
     fieldIconsSorted () {
@@ -167,7 +170,7 @@ export default {
   },
   methods: {
     closeDropdown () {
-      document.activeElement.blur()
+      this.$el.getRootNode().activeElement.blur()
     }
   }
 }

app/javascript/template_builder/fields.vue

@@ -2,10 +2,10 @@
   <div :class="withStickySubmitters ? 'sticky top-0 z-[1]' : ''">
     <FieldSubmitter
       :model-value="selectedSubmitter.uuid"
-      class="roles-dropdown w-full rounded-lg"
+      class="roles-dropdown w-full rounded-lg roles-dropdown"
       :style="withStickySubmitters ? { backgroundColor } : {}"
       :submitters="submitters"
-      :menu-style="{ backgroundColor: ['', null, 'transparent'].includes(backgroundColor) ? 'white' : backgroundColor }"
+      :menu-style="{ overflow: 'auto', display: 'flex', flexDirection: 'row', maxHeight: 'calc(100vh - 120px)', backgroundColor: ['', null, 'transparent'].includes(backgroundColor) ? 'white' : backgroundColor }"
       :editable="editable && !defaultSubmitters.length"
       @new-submitter="save"
       @remove="removeSubmitter"
@@ -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"
@@ -74,7 +74,7 @@
         <div
           :style="{ backgroundColor }"
           draggable="true"
-          class="default-field border border-base-300 rounded rounded-tr-none relative group mb-2"
+          class="border border-base-300 rounded rounded-tr-none relative group mb-2 default-field fields-list-item"
           @dragstart="onDragstart({ type: 'text', ...field })"
           @dragend="$emit('drag-end')"
         >
@@ -104,21 +104,21 @@
   </div>
   <div
     v-if="editable && !onlyDefinedFields"
-    class="grid grid-cols-3 gap-1 pb-2"
+    class="grid grid-cols-3 gap-1 pb-2 fields-grid"
   >
     <template
       v-for="(icon, type) in fieldIconsSorted"
       :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"
+        class="field-type-button group flex items-center justify-center border border-dashed w-full rounded relative fields-grid-item"
         :style="{ backgroundColor }"
         :class="drawFieldType === type ? 'border-base-content/40' : 'border-base-300 hover:border-base-content/20'"
         @dragstart="onDragstart({ type: type })"
         @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"
@@ -140,9 +140,35 @@
         :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"
+          class="opacity-50 flex items-center justify-center border border-dashed border-base-300 w-full rounded relative fields-grid-item"
+          :style="{ backgroundColor }"
+        >
+          <div class="w-0 absolute left-0">
+            <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 fields-grid-item"
           :style="{ backgroundColor }"
         >
           <div class="w-0 absolute left-0">
@@ -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()
     }
   }