use sidekiq

.eslintrc

@@ -8,7 +8,8 @@
   },
   "rules": {
     "vue/no-deprecated-html-element-is": 0,
-    "vue/no-mutating-props": 0
+    "vue/no-mutating-props": 0,
+    "vue/one-component-per-file": 0
   },
   "parserOptions": {
     "ecmaVersion": 2022,

.github/workflows/ci.yml

@@ -11,7 +11,7 @@ jobs:
       - name: Install Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3.2.2
+          ruby-version: 3.3.1
       - name: Cache gems
         uses: actions/cache@v1
         with:
@@ -35,7 +35,7 @@ jobs:
       - name: Install Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3.2.2
+          ruby-version: 3.3.1
       - name: Cache gems
         uses: actions/cache@v1
         with:
@@ -100,7 +100,7 @@ jobs:
       - name: Install Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3.2.2
+          ruby-version: 3.3.1
       - name: Set up Node
         uses: actions/setup-node@v1
         with:

.gitignore

@@ -36,3 +36,4 @@ yarn-debug.log*
 /attachments
 /docuseal
 /ee
+dump.rdb

.rubocop.yml

@@ -10,7 +10,7 @@ AllCops:
     - node_modules/**/*
     - bin/*
     - vendor/**/*
-  TargetRubyVersion: '3.2'
+  TargetRubyVersion: '3.3'
 
 Metrics/BlockLength:
   Exclude:
@@ -44,7 +44,7 @@ Layout/LineLength:
   AllowedPatterns: ['\A\s*#']
 
 Metrics/AbcSize:
-  Max: 40
+  Max: 45
 
 Metrics/ModuleLength:
   Max: 500
@@ -76,5 +76,8 @@ Rails/SkipsModelValidations:
 Rails/ApplicationController:
   Enabled: false
 
+Rails/Output:
+  Enabled: false
+
 Capybara/ClickLinkOrButtonStyle:
   Enabled: false

Dockerfile

@@ -1,10 +1,12 @@
-FROM ruby:3.2.2-alpine3.18 as fonts
+FROM ruby:3.3.1-alpine as fonts
 
 WORKDIR /fonts
 
-RUN apk --no-cache add wget && wget https://github.com/satbyy/go-noto-universal/releases/download/v7.0/GoNotoKurrent-Regular.ttf && wget https://github.com/satbyy/go-noto-universal/releases/download/v7.0/GoNotoKurrent-Bold.ttf && wget https://github.com/impallari/DancingScript/raw/master/fonts/DancingScript-Regular.otf && wget https://github.com/impallari/DancingScript/raw/master/OFL.txt
+RUN apk --no-cache add fontforge wget && wget https://github.com/satbyy/go-noto-universal/releases/download/v7.0/GoNotoKurrent-Regular.ttf && wget https://github.com/satbyy/go-noto-universal/releases/download/v7.0/GoNotoKurrent-Bold.ttf && wget https://github.com/impallari/DancingScript/raw/master/fonts/v2031/DancingScript-Regular.otf && wget https://cdn.jsdelivr.net/gh/notofonts/notofonts.github.io/fonts/NotoSansSymbols2/hinted/ttf/NotoSansSymbols2-Regular.ttf && wget https://github.com/Maxattax97/gnu-freefont/raw/master/ttf/FreeSans.ttf && wget https://github.com/impallari/DancingScript/raw/master/OFL.txt
 
-FROM ruby:3.2.2-alpine3.18 as webpack
+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.1-alpine as webpack
 
 ENV RAILS_ENV=production
 ENV NODE_ENV=production
@@ -21,28 +23,41 @@ RUN yarn install --network-timeout 1000000
 COPY ./bin/shakapacker ./bin/shakapacker
 COPY ./config/webpack ./config/webpack
 COPY ./config/shakapacker.yml ./config/shakapacker.yml
-COPY ./postcss.config.js ./postcss.config.js ./
+COPY ./postcss.config.js ./postcss.config.js
-COPY ./tailwind.config.js ./tailwind.config.js ./
+COPY ./tailwind.config.js ./tailwind.config.js
-COPY ./tailwind.form.config.js ./tailwind.form.config.js ./
+COPY ./tailwind.form.config.js ./tailwind.form.config.js
-COPY ./tailwind.application.config.js ./tailwind.application.config.js ./
+COPY ./tailwind.application.config.js ./tailwind.application.config.js
 COPY ./app/javascript ./app/javascript
 COPY ./app/views ./app/views
 
 RUN echo "gem 'shakapacker'" > Gemfile && ./bin/shakapacker
 
-FROM ruby:3.2.2-alpine3.18 as app
+FROM ruby:3.3.1-alpine as app
 
 ENV RAILS_ENV=production
 ENV BUNDLE_WITHOUT="development:test"
-ENV PIDFILE=/dev/null
+ENV LD_PRELOAD=/lib/libgcompat.so.0
+ENV OPENSSL_CONF=/app/openssl_legacy.cnf
 
 WORKDIR /app
 
-RUN apk add --no-cache build-base sqlite-dev libpq-dev mariadb-dev vips-dev vips-poppler poppler-utils vips-heif libc6-compat ttf-freefont && mkdir /fonts
+RUN apk add --no-cache sqlite-dev libpq-dev mariadb-dev vips-dev vips-poppler poppler-utils redis vips-heif gcompat ttf-freefont && mkdir /fonts && rm /usr/share/fonts/freefont/FreeSans.otf
+
+RUN echo $'.include = /etc/ssl/openssl.cnf\n\
+\n\
+[provider_sect]\n\
+default = default_sect\n\
+legacy = legacy_sect\n\
+\n\
+[default_sect]\n\
+activate = 1\n\
+\n\
+[legacy_sect]\n\
+activate = 1' >> /app/openssl_legacy.cnf
 
 COPY ./Gemfile ./Gemfile.lock ./
 
-RUN bundle update --bundler && bundle install && rm -rf ~/.bundle /usr/local/bundle/cache && ruby -e "puts Dir['/usr/local/bundle/**/{spec,rdoc,resources/shared,resources/collation,resources/locales}']" | xargs rm -rf
+RUN apk add --no-cache build-base && bundle install && apk del build-base && rm -rf ~/.bundle /usr/local/bundle/cache && ruby -e "puts Dir['/usr/local/bundle/**/{spec,rdoc,resources/shared,resources/collation,resources/locales}']" | xargs rm -rf
 
 COPY ./bin ./bin
 COPY ./app ./app
@@ -55,6 +70,7 @@ COPY ./tmp ./tmp
 COPY LICENSE README.md Rakefile config.ru .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
 COPY --from=webpack /app/public/packs ./public/packs
 
 RUN ln -s /fonts /app/public/fonts
@@ -64,4 +80,4 @@ WORKDIR /data/docuseal
 ENV WORKDIR=/data/docuseal
 
 EXPOSE 3000
-CMD ["/app/bin/rails", "server"]
+CMD ["/app/bin/bundle", "exec", "puma", "-C", "/app/config/puma.rb", "--dir", "/app"]

Gemfile

@@ -2,13 +2,14 @@
 
 source 'https://rubygems.org'
 
-ruby '3.2.2'
+ruby '3.3.1'
 
 gem 'arabic-letter-connector', require: 'arabic-letter-connector/logic'
 gem 'aws-sdk-s3', require: false
 gem 'azure-storage-blob', require: false
 gem 'bootsnap', require: false
 gem 'cancancan'
+gem 'csv'
 gem 'devise'
 gem 'devise-two-factor'
 gem 'dotenv', require: false
@@ -23,11 +24,10 @@ gem 'lograge'
 gem 'mysql2', require: false
 gem 'oj'
 gem 'pagy'
-gem 'pdf-reader'
 gem 'pg', require: false
 gem 'premailer-rails'
 gem 'pretender'
-gem 'puma'
+gem 'puma', require: false
 gem 'rack'
 gem 'rails'
 gem 'rails_autolink'
@@ -37,8 +37,8 @@ gem 'rqrcode'
 gem 'ruby-vips'
 gem 'rubyXL'
 gem 'shakapacker'
-gem 'sidekiq', require: ENV.key?('REDIS_URL')
+gem 'sidekiq'
-gem 'sqlite3', require: false
+gem 'sqlite3', require: false, force_ruby_platform: true
 gem 'strip_attributes'
 gem 'turbo-rails'
 gem 'twitter_cldr', require: false

Gemfile.lock

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

README.md

@@ -42,7 +42,7 @@ DocuSeal is an open source platform that provides secure and efficient digital d
 - PDF signature verification
 - Users management
 - Mobile-optimized
-- Signing available in 12 Languages
+- Signing available in 13 languages
 - API and Webhooks for integrations
 - Easy to deploy in minutes
 
@@ -51,11 +51,13 @@ DocuSeal is an open source platform that provides secure and efficient digital d
 - User roles
 - Automated reminders
 - Invitation and identify verification via SMS
+- Conditional fields and formulas
+- Bulk send with CSV, XLSX spreadsheet import
 - SSO / SAML
 - Template creation with HTML API ([Guide](https://www.docuseal.co/guides/create-pdf-document-fillable-form-with-html-api))
 - Template creation with PDF or DOCX and field tags API ([Guide](https://www.docuseal.co/guides/use-embedded-text-field-tags-in-the-pdf-to-create-a-fillable-form))
-- Embedded signing form ([React](https://github.com/docusealco/docuseal-react), [Vue](https://github.com/docusealco/docuseal-vue) 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.co/docs/embedded))
-- Embedded document form builder ([React](https://github.com/docusealco/docuseal-react), [Vue](https://github.com/docusealco/docuseal-vue) or [JavaScript](https://www.docuseal.co/docs/embedded))
+- Embedded document form builder ([React](https://github.com/docusealco/docuseal-react), [Vue](https://github.com/docusealco/docuseal-vue), [Angular](https://github.com/docusealco/docuseal-angular) or [JavaScript](https://www.docuseal.co/docs/embedded))
 - [Learn more](https://www.docuseal.co/pricing)
 
 ## Deploy
@@ -65,9 +67,6 @@ DocuSeal is an open source platform that provides secure and efficient digital d
 | [<img alt="Deploy on Heroku" src="https://www.herokucdn.com/deploy/button.svg" height="40">](https://heroku.com/deploy?template=https://github.com/docusealco/docuseal-heroku) | [<img alt="Deploy on Railway" src="https://railway.app/button.svg" height="40">](https://railway.app/template/IGoDnc?referralCode=ruU7JR)|
 |**DigitalOcean**|**Render**|
 | [<img alt="Deploy on DigitalOcean" src="https://www.deploytodo.com/do-btn-blue.svg" height="40">](https://cloud.digitalocean.com/apps/new?repo=https://github.com/docusealco/docuseal-digitalocean/tree/master&refcode=421d50f53990) | [<img alt="Deploy to Render" src="https://render.com/images/deploy-to-render-button.svg" height="40">](https://render.com/deploy?repo=https://github.com/docusealco/docuseal-render)
-|**Koyeb**|**Elestio**|
-| [<img alt="Deploy on Koyeb" src="https://www.koyeb.com/static/images/deploy/button.svg" height="40">](https://app.koyeb.com/deploy?name=docuseal&type=docker&image=docker.io/docuseal/docuseal&env[PORT]=8000&env[DATABASE_URL]=CHANGE_ME&env[SECRET_KEY_BASE]=CHANGE_ME&ports=8000;http;/) | [<img alt="Deploy on Elestio" src="https://pub-da36157c854648669813f3f76c526c2b.r2.dev/deploy-on-elestio-black.png">](https://dash.elest.io/deploy?soft=DocuSeal&id=339) |
-
 
 #### Docker
 
@@ -100,3 +99,9 @@ At DocuSeal we have expertise and technologies to make documents creation, filli
 
 Distributed under the AGPLv3 License. See [LICENSE](https://github.com/docusealco/docuseal/blob/master/LICENSE) for more information.
 Unless otherwise noted, all files © 2023 DocuSeal LLC.
+
+## Tools
+
+- [Signature Maker](https://www.docuseal.co/online-signature)
+- [Sign Document Online](https://www.docuseal.co/sign-documents-online)
+- [Fill PDF Online](https://www.docuseal.co/fill-pdf)

SECURITY.md

@@ -3,3 +3,12 @@
 If you come across any security concern or vulnarability, please report the information via email to security@docuseal.co instead of opening a GitHub issue. We will promptly respond and will collaborate with you to validate the issue, and resolve it ASAP.
 
 **We have a bug bounty program to reward security researchers.**
+
+Out of scope vulnerabilities:
+
+- CSRF
+- DNSSEC, CAA, CSP headers
+- DNS or email security related
+- Rate Limiting
+
+Note: We reserve the right to classify any reported vulnerability as out of scope for the bug bounty program.

app/controllers/account_configs_controller.rb

@@ -8,8 +8,12 @@ class AccountConfigsController < ApplicationController
     AccountConfig::ALLOW_TYPED_SIGNATURE,
     AccountConfig::FORCE_MFA,
     AccountConfig::ALLOW_TO_RESUBMIT,
+    AccountConfig::FORM_PREFILL_SIGNATURE_KEY,
     AccountConfig::ESIGNING_PREFERENCE_KEY,
-    AccountConfig::FORM_WITH_CONFETTI_KEY
+    AccountConfig::FORM_WITH_CONFETTI_KEY,
+    AccountConfig::DOWNLOAD_LINKS_AUTH_KEY,
+    AccountConfig::FORCE_SSO_AUTH_KEY,
+    AccountConfig::FLATTEN_RESULT_PDF_KEY
   ].freeze
 
   InvalidKey = Class.new(StandardError)

app/controllers/api/active_storage_blobs_proxy_controller.rb

@@ -8,6 +8,7 @@ module Api
     skip_authorization_check
 
     before_action :set_cors_headers
+    before_action :set_noindex_headers
 
     def show
       blob_uuid, purp, exp = ApplicationRecord.signed_id_verifier.verified(params[:signed_uuid])
@@ -20,6 +21,8 @@ module Api
 
       blob = ActiveStorage::Blob.find_by!(uuid: blob_uuid)
 
+      authorization_check!(blob) if exp.blank?
+
       if request.headers['Range'].present?
         send_blob_byte_range_data blob, request.headers['Range']
       else
@@ -31,5 +34,22 @@ module Api
         end
       end
     end
+
+    private
+
+    def authorization_check!(blob)
+      is_authorized =
+        blob.attachments.all? do |a|
+          a.name.in?(%w[logo preview_images]) ||
+            (current_user && a.record.account.id == current_user.account_id) ||
+            !a.record.account.account_configs.find_or_initialize_by(key: AccountConfig::DOWNLOAD_LINKS_AUTH_KEY).value
+        end
+
+      return if is_authorized
+
+      Rollbar.error('Blob aunauthorized') if defined?(Rollbar)
+
+      raise CanCan::AccessDenied
+    end
   end
 end

app/controllers/api/active_storage_blobs_proxy_legacy_controller.rb

@@ -7,6 +7,9 @@ module Api
     skip_before_action :authenticate_user!
     skip_authorization_check
 
+    before_action :set_cors_headers
+    before_action :set_noindex_headers
+
     # rubocop:disable Metrics
     def show
       Rollbar.info('Blob legacy') if defined?(Rollbar)

app/controllers/api/api_base_controller.rb

@@ -19,10 +19,14 @@ module Api
       render json: { error: e.message }, status: :unprocessable_entity
     end
 
+    rescue_from RateLimit::LimitApproached do |e|
+      Rollbar.error(e) if defined?(Rollbar)
+
+      render json: { error: 'Too many requests' }, status: :too_many_requests
+    end
+
     if Rails.env.production?
       rescue_from CanCan::AccessDenied do |e|
-        Rollbar.warning(e) if defined?(Rollbar)
-
         render json: { error: e.message }, status: :forbidden
       end
 
@@ -46,20 +50,26 @@ module Api
     end
 
     def authenticate_user!
-      @current_user ||=
-        if request.headers['X-Auth-Token'].present?
-          sha256 = Digest::SHA256.hexdigest(request.headers['X-Auth-Token'])
-
-          User.joins(:access_token).active.find_by(access_token: { sha256: })
-        end
-
       render json: { error: 'Not authenticated' }, status: :unauthorized unless current_user
     end
 
+    def current_user
+      super || @current_user ||=
+                 if request.headers['X-Auth-Token'].present?
+                   sha256 = Digest::SHA256.hexdigest(request.headers['X-Auth-Token'])
+
+                   User.joins(:access_token).active.find_by(access_token: { sha256: })
+                 end
+    end
+
     def current_account
       current_user&.account
     end
 
+    def set_noindex_headers
+      headers['X-Robots-Tag'] = 'noindex'
+    end
+
     def set_cors_headers
       headers['Access-Control-Allow-Origin'] = '*'
       headers['Access-Control-Allow-Methods'] = 'POST, GET, PUT, PATCH, DELETE, OPTIONS'

app/controllers/api/attachments_controller.rb

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

app/controllers/api/submissions_controller.rb

@@ -17,11 +17,12 @@ module Api
         submissions = submissions.joins(template: :folder).where(folder: { name: params[:template_folder] })
       end
 
-      submissions = paginate(submissions.preload(:created_by_user, :template, :submitters,
+      submissions = paginate(submissions.preload(:created_by_user, :submitters,
+                                                 template: :folder,
                                                  audit_trail_attachment: :blob))
 
       render json: {
-        data: submissions.as_json(serialize_params),
+        data: submissions.as_json(Submissions::SerializeForApi::SERIALIZE_PARAMS),
         pagination: {
           count: submissions.size,
           next: submissions.last&.id,
@@ -43,33 +44,11 @@ module Api
         @submission.audit_trail_attachment = Submissions::GenerateAuditTrail.call(@submission)
       end
 
-      serialized_submitters = submitters.map { |submitter| Submitters::SerializeForApi.call(submitter) }
+      render json: Submissions::SerializeForApi.call(@submission, submitters)
-
-      json = @submission.as_json(
-        serialize_params.deep_merge(
-          include: { submission_events: { only: %i[id submitter_id event_type event_timestamp] } }
-        )
-      )
-
-      if submitters.all?(&:completed_at?)
-        last_submitter = submitters.max_by(&:completed_at)
-
-        json[:documents] = serialized_submitters.find { |e| e['id'] == last_submitter.id }['documents']
-        json[:status] = 'completed'
-        json[:completed_at] = last_submitter.completed_at
-      else
-        json[:documents] = []
-        json[:status] = 'pending'
-        json[:completed_at] = nil
-      end
-
-      json[:submitters] = serialized_submitters
-
-      render json:
     end
 
     def create
-      Params::SubmissionCreateValidator.call(params, dry_run: !Docuseal.multitenant?)
+      Params::SubmissionCreateValidator.call(params)
 
       return render json: { error: 'Template not found' }, status: :unprocessable_entity if @template.nil?
 
@@ -84,15 +63,25 @@ module Api
 
       submissions = create_submissions(@template, params)
 
+      submissions.each do |submission|
+        SendSubmissionCreatedWebhookRequestJob.perform_async({ 'submission_id' => submission.id })
+      end
+
       Submissions.send_signature_requests(submissions)
 
       submissions.each do |submission|
         if submission.submitters.all?(&:completed_at?) && submission.submitters.last
-          ProcessSubmitterCompletionJob.perform_later(submission.submitters.last)
+          ProcessSubmitterCompletionJob.perform_async({ 'submitter_id' => submission.submitters.last.id })
         end
       end
 
-      render json: submissions.flat_map(&:submitters)
+      json = submissions.flat_map do |submission|
+        submission.submitters.map do |s|
+          Submitters::SerializeForApi.call(s, with_documents: false, with_urls: true)
+        end
+      end
+
+      render json:
     rescue Submitters::NormalizeValues::BaseError => e
       Rollbar.warning(e) if defined?(Rollbar)
 
@@ -100,9 +89,15 @@ module Api
     end
 
     def destroy
-      @submission.update!(archived_at: Time.current)
+      if params[:permanently] == 'true'
+        @submission.destroy!
+      else
+        @submission.update!(archived_at: Time.current)
 
-      render json: @submission.as_json(only: %i[id], methods: %i[archived_at])
+        SendSubmissionArchivedWebhookRequestJob.perform_async('submission_id' => @submission.id)
+      end
+
+      render json: @submission.as_json(only: %i[id archived_at])
     end
 
     private
@@ -144,31 +139,17 @@ module Api
       end
     end
 
-    def serialize_params
-      {
-        only: %i[id source submitters_order created_at updated_at archived_at],
-        methods: %i[audit_log_url],
-        include: {
-          submitters: { only: %i[id slug uuid name email phone
-                                 completed_at opened_at sent_at
-                                 created_at updated_at external_id metadata],
-                        methods: %i[status application_key] },
-          template: { only: %i[id name created_at updated_at] },
-          created_by_user: { only: %i[id email first_name last_name] }
-        }
-      }
-    end
-
     def submissions_params
       permitted_attrs = [
-        :send_email, :send_sms, :bcc_completed, :completed_redirect_url,
+        :send_email, :send_sms, :bcc_completed, :completed_redirect_url, :reply_to, :go_to_last,
         {
           message: %i[subject body],
           submitters: [[:send_email, :send_sms, :completed_redirect_url, :uuid, :name, :email, :role,
-                        :completed, :phone, :application_key, :external_id,
+                        :completed, :phone, :application_key, :external_id, :reply_to, :go_to_last,
                         { metadata: {}, values: {}, readonly_fields: [], message: %i[subject body],
-                          fields: [%i[name default_value title description
+                          fields: [:name, :uuid, :default_value, :value, :title, :description,
-                                      readonly validation_pattern invalid_message]] }]]
+                                   :readonly, :redacted, :validation_pattern, :invalid_message,
+                                   { default_value: [], value: [], preferences: {} }] }]]
         }
       ]
 

app/controllers/api/submitter_form_views_controller.rb

@@ -13,7 +13,7 @@ module Api
 
       SubmissionEvents.create_with_tracking_data(submitter, 'view_form', request)
 
-      SendFormViewedWebhookRequestJob.perform_later(submitter)
+      SendFormViewedWebhookRequestJob.perform_async({ 'submitter_id' => submitter.id })
 
       render json: {}
     end

app/controllers/api/submitters_autocomplete_controller.rb

@@ -1,35 +0,0 @@
-# frozen_string_literal: true
-
-module Api
-  class SubmittersAutocompleteController < ApiBaseController
-    load_and_authorize_resource :submitter, parent: false
-
-    SELECT_COLUMNS = %w[email phone name].freeze
-    LIMIT = 100
-
-    def index
-      submitters = search_submitters(@submitters)
-
-      values = submitters.limit(LIMIT).group(SELECT_COLUMNS.join(', ')).pluck(SELECT_COLUMNS.join(', '))
-
-      attrs = values.map { |row| SELECT_COLUMNS.zip(row).to_h }
-      attrs = attrs.uniq { |e| e[params[:field]] } if params[:field].present?
-
-      render json: attrs
-    end
-
-    private
-
-    def search_submitters(submitters)
-      if SELECT_COLUMNS.include?(params[:field])
-        column = Submitter.arel_table[params[:field].to_sym]
-
-        term = "#{params[:q].downcase}%"
-
-        submitters.where(column.matches(term, false, true))
-      else
-        Submitters.search(submitters, params[:q])
-      end
-    end
-  end
-end

app/controllers/api/submitters_controller.rb

@@ -10,6 +10,11 @@ module Api
       submitters = submitters.where(external_id: params[:application_key]) if params[:application_key].present?
       submitters = submitters.where(external_id: params[:external_id]) if params[:external_id].present?
       submitters = submitters.where(submission_id: params[:submission_id]) if params[:submission_id].present?
+
+      if params[:template_id].present?
+        submitters = submitters.joins(:submission).where(submission: { template_id: params[:template_id] })
+      end
+
       submitters = maybe_filder_by_completed_at(submitters, params)
 
       submitters = paginate(
@@ -61,22 +66,26 @@ module Api
       end
 
       if @submitter.completed_at?
-        ProcessSubmitterCompletionJob.perform_later(@submitter)
+        ProcessSubmitterCompletionJob.perform_async({ 'submitter_id' => @submitter.id })
       elsif normalized_params[:send_email] || normalized_params[:send_sms]
         Submitters.send_signature_requests([@submitter])
       end
 
-      render json: Submitters::SerializeForApi.call(@submitter, with_template: false, with_events: false)
+      render json: Submitters::SerializeForApi.call(@submitter, with_template: false,
+                                                                with_urls: true,
+                                                                with_events: false)
     end
 
     def submitter_params
       submitter_params = params.key?(:submitter) ? params.require(:submitter) : params
 
       submitter_params.permit(
-        :send_email, :send_sms, :uuid, :name, :email, :role,
+        :send_email, :send_sms, :reply_to, :completed_redirect_url, :uuid, :name, :email, :role,
-        :completed, :phone, :application_key, :external_id,
+        :completed, :phone, :application_key, :external_id, :go_to_last,
         { metadata: {}, values: {}, readonly_fields: [], message: %i[subject body],
-          fields: [%i[name default_value readonly validation_pattern invalid_message]] }
+          fields: [[:name, :uuid, :default_value, :value,
+                    :readonly, :redacted, :validation_pattern, :invalid_message,
+                    { default_value: [], value: [], preferences: {} }]] }
       )
     end
 
@@ -95,20 +104,58 @@ module Api
     end
 
     def assign_submitter_attrs(submitter, attrs)
-      submitter.email = Submissions.normalize_email(attrs[:email]) if attrs.key?(:email)
+      values = attrs[:values]&.to_unsafe_h || {}
-      submitter.phone = attrs[:phone].to_s.gsub(/[^0-9+]/, '') if attrs.key?(:phone)
-      submitter.values = submitter.values.merge(attrs[:values].to_unsafe_h) if attrs[:values].present?
-      submitter.completed_at = attrs[:completed] ? Time.current : submitter.completed_at
-      submitter.external_id = attrs[:application_key] if attrs.key?(:application_key)
-      submitter.external_id = attrs[:external_id] if attrs.key?(:external_id)
-      submitter.metadata = attrs[:metadata] if attrs.key?(:metadata)
 
       assign_submission_fields(submitter.submission)
+
+      phone_field_uuid = submitter.submission.template_fields.find do |f|
+        values[f['uuid']].present? && f['type'] == 'phone'
+      end&.dig('uuid')
+
+      submitter.email = Submissions.normalize_email(attrs[:email]) if attrs.key?(:email)
+
+      if attrs.key?(:phone)
+        submitter.phone = attrs[:phone].to_s.gsub(/[^0-9+]/, '')
+      elsif values[phone_field_uuid].present?
+        submitter.phone = values[phone_field_uuid].to_s.gsub(/[^0-9+]/, '')
+      end
+
+      values = values.except(phone_field_uuid)
+
+      submitter.values = submitter.values.merge(values) if values.present?
+      submitter.metadata = attrs[:metadata] if attrs.key?(:metadata)
+
+      maybe_assign_completed_attributes(submitter, attrs)
+
+      assign_external_id(submitter, attrs)
       assign_preferences(submitter, attrs)
 
       submitter
     end
 
+    def maybe_assign_completed_attributes(submitter, attrs)
+      submitter.completed_at = attrs[:completed] ? Time.current : submitter.completed_at
+
+      if attrs[:completed]
+        submitter.values = Submitters::SubmitValues.merge_default_values(submitter)
+        submitter.values = Submitters::SubmitValues.merge_formula_values(submitter)
+        submitter.values = Submitters::SubmitValues.maybe_remove_condition_values(submitter)
+
+        submitter.values = submitter.values.transform_values do |v|
+          v == '{{date}}' ? Time.current.in_time_zone(submitter.account.timezone).to_date.to_s : v
+        end
+      end
+
+      submitter
+    end
+
+    def assign_external_id(submitter, attrs)
+      submitter.external_id = attrs[:application_key] if attrs.key?(:application_key)
+      submitter.external_id = attrs[:external_id] if attrs.key?(:external_id)
+
+      submitter
+    end
+
     def assign_submission_fields(submission)
       submission.template_fields ||= submission.template.fields
       submission.template_schema ||= submission.template.schema
@@ -124,6 +171,14 @@ module Api
       end
 
       submitter.preferences['send_sms'] = submitter_preferences['send_sms'] if submitter_preferences.key?('send_sms')
+      submitter.preferences['reply_to'] = submitter_preferences['reply_to'] if submitter_preferences.key?('reply_to')
+      if submitter_preferences.key?('go_to_last')
+        submitter.preferences['go_to_last'] = submitter_preferences['go_to_last']
+      end
+
+      if submitter_preferences.key?('completed_redirect_url')
+        submitter.preferences['completed_redirect_url'] = submitter_preferences['completed_redirect_url']
+      end
 
       return unless submitter_preferences.key?('email_message_uuid')
 

app/controllers/api/template_folders_autocomplete_controller.rb

@@ -1,16 +0,0 @@
-# frozen_string_literal: true
-
-module Api
-  class TemplateFoldersAutocompleteController < ApiBaseController
-    load_and_authorize_resource :template_folder, parent: false
-
-    LIMIT = 100
-
-    def index
-      template_folders = @template_folders.joins(:templates).where(templates: { archived_at: nil }).distinct
-      template_folders = TemplateFolders.search(template_folders, params[:q]).limit(LIMIT)
-
-      render json: template_folders.as_json(only: %i[name archived_at])
-    end
-  end
-end

app/controllers/api/templates_clone_controller.rb

@@ -20,6 +20,8 @@ module Api
 
       Templates::CloneAttachments.call(template: cloned_template, original_template: @template)
 
+      SendTemplateCreatedWebhookRequestJob.perform_async('template_id' => cloned_template.id)
+
       render json: Templates::SerializeForApi.call(cloned_template)
     end
   end

app/controllers/api/templates_controller.rb

@@ -49,6 +49,14 @@ module Api
         @template.folder = TemplateFolders.find_or_create_by_name(current_user, folder_name)
       end
 
+      Array.wrap(params[:roles].presence || params.dig(:template, :roles).presence).each_with_index do |role, index|
+        if (item = @template.submitters[index])
+          item['name'] = role
+        else
+          @template.submitters << { 'name' => role, 'uuid' => SecureRandom.uuid }
+        end
+      end
+
       archived = params.key?(:archived) ? params[:archived] : params.dig(:template, :archived)
 
       if archived.in?([true, false])
@@ -57,11 +65,13 @@ module Api
 
       @template.update!(template_params)
 
+      SendTemplateUpdatedWebhookRequestJob.perform_async('template_id' => @template.id)
+
       render json: @template.as_json(only: %i[id updated_at])
     end
 
     def destroy
-      if params[:permanently] == 'true' && !Docuseal.multitenant?
+      if params[:permanently] == 'true'
         @template.destroy!
       else
         @template.update!(archived_at: Time.current)
@@ -83,9 +93,9 @@ module Api
     end
 
     def template_params
-      permit_params = [
+      permitted_params = [
         :name,
-        { schema: [%i[attachment_uuid name]],
+        {
           submitters: [%i[name uuid]],
           fields: [[:uuid, :submitter_uuid, :name, :type,
                     :required, :readonly, :default_value,
@@ -93,13 +103,15 @@ module Api
                     { preferences: {},
                       conditions: [%i[field_uuid value action]],
                       options: [%i[value uuid]],
-                      areas: [%i[x y w h cell_w attachment_uuid option_uuid page]] }]] }
+                      validation: %i[message pattern],
+                      areas: [%i[x y w h cell_w attachment_uuid option_uuid page]] }]]
+        }
       ]
 
       if params.key?(:template)
-        params.require(:template).permit(*permit_params)
+        params.require(:template).permit(permitted_params)
       else
-        params.permit(*permit_params)
+        params.permit(permitted_params)
       end
     end
   end

app/controllers/api/templates_documents_controller.rb

@@ -1,29 +0,0 @@
-# frozen_string_literal: true
-
-module Api
-  class TemplatesDocumentsController < ApiBaseController
-    load_and_authorize_resource :template
-
-    def create
-      return head :unprocessable_entity if params[:blobs].blank? && params[:files].blank?
-
-      documents = Templates::CreateAttachments.call(@template, params)
-
-      schema = documents.map do |doc|
-        { attachment_uuid: doc.uuid, name: doc.filename.base }
-      end
-
-      render json: {
-        schema:,
-        documents: documents.as_json(
-          methods: %i[metadata signed_uuid],
-          include: {
-            preview_images: { methods: %i[url metadata filename] }
-          }
-        )
-      }
-    rescue Templates::CreateAttachments::PdfEncrypted
-      render json: { error: 'PDF encrypted' }, status: :unprocessable_entity
-    end
-  end
-end

app/controllers/application_controller.rb

@@ -22,6 +22,12 @@ class ApplicationController < ActionController::Base
     redirect_to request.path
   end
 
+  rescue_from RateLimit::LimitApproached do |e|
+    Rollbar.error(e) if defined?(Rollbar)
+
+    redirect_to request.referer, alert: 'Too many requests', status: :too_many_requests
+  end
+
   if Rails.env.production?
     rescue_from CanCan::AccessDenied do |e|
       Rollbar.warning(e) if defined?(Rollbar)
@@ -46,7 +52,8 @@ class ApplicationController < ActionController::Base
   private
 
   def with_browser_locale(&)
-    locale = request.env['HTTP_ACCEPT_LANGUAGE'].to_s[BROWSER_LOCALE_REGEXP].to_s
+    locale   = params[:lang].presence
+    locale ||= request.env['HTTP_ACCEPT_LANGUAGE'].to_s[BROWSER_LOCALE_REGEXP].to_s
 
     locale =
       if locale.starts_with?('en-') && locale != 'en-US'

app/controllers/console_redirect_controller.rb

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

app/controllers/dashboard_controller.rb

@@ -7,66 +7,18 @@ class DashboardController < ApplicationController
   before_action :maybe_render_landing
   before_action :maybe_redirect_mfa_setup
 
-  load_and_authorize_resource :template_folder, parent: false
+  skip_authorization_check
-  load_and_authorize_resource :template, parent: false
-
-  SHOW_TEMPLATES_FOLDERS_THRESHOLD = 9
-  TEMPLATES_PER_PAGE = 12
-  FOLDERS_PER_PAGE = 18
 
   def index
-    @template_folders = filter_template_folders(@template_folders)
+    if cookies.permanent[:dashboard_view] == 'submissions'
-
+      SubmissionsDashboardController.dispatch(:index, request, response)
-    @pagy, @template_folders = pagy(
-      @template_folders,
-      items: FOLDERS_PER_PAGE,
-      page: @template_folders.count > SHOW_TEMPLATES_FOLDERS_THRESHOLD ? params[:page] : 1
-    )
-
-    if @pagy.count > SHOW_TEMPLATES_FOLDERS_THRESHOLD
-      @templates = @templates.none
     else
-      @template_folders = @template_folders.reject { |e| e.name == TemplateFolder::DEFAULT_NAME }
+      TemplatesDashboardController.dispatch(:index, request, response)
-      @templates = filter_templates(@templates)
-
-      items =
-        if @template_folders.size < 4
-          TEMPLATES_PER_PAGE
-        else
-          (@template_folders.size < 7 ? 9 : 6)
-        end
-
-      @pagy, @templates = pagy(@templates, items:)
     end
   end
 
   private
 
-  def filter_template_folders(template_folders)
-    rel = template_folders.joins(:active_templates)
-                          .order(id: :desc)
-                          .distinct
-
-    TemplateFolders.search(rel, params[:q])
-  end
-
-  def filter_templates(templates)
-    rel = templates.active.preload(:author).order(id: :desc)
-
-    if params[:q].blank?
-      if Docuseal.multitenant? && !current_account.testing?
-        rel = rel.where(folder_id: current_account.default_template_folder.id)
-      else
-        shared_template_ids =
-          TemplateSharing.where(account_id: [current_account.id, TemplateSharing::ALL_ID]).select(:template_id)
-
-        rel = rel.where(folder_id: current_account.default_template_folder.id).or(rel.where(id: shared_template_ids))
-      end
-    end
-
-    Templates.search(rel, params[:q])
-  end
-
   def maybe_redirect_product_url
     return if !Docuseal.multitenant? || signed_in?
 

app/controllers/errors_controller.rb

@@ -15,6 +15,11 @@ class ErrorsController < ActionController::Base
     '/api/templates/docx'
   ].freeze
 
+  SAFE_ERROR_MESSAGE_CLASSES = [
+    ActionDispatch::Http::Parameters::ParseError,
+    JSON::ParserError
+  ].freeze
+
   def show
     if request.original_fullpath.in?(ENTERPRISE_PATHS) && error_status_code == 404
       return render json: { status: 404, message: ENTERPRISE_FEATURE_MESSAGE }, status: :not_found
@@ -24,7 +29,11 @@ class ErrorsController < ActionController::Base
       f.json do
         set_cors_headers
 
-        render json: { status: error_status_code }, status: error_status_code
+        exception = request.env['action_dispatch.exception']
+
+        error = exception.message if exception.class.in?(SAFE_ERROR_MESSAGE_CLASSES)
+
+        render json: { status: error_status_code, error: }.compact, status: error_status_code
       end
 
       f.html { render error_status_code.to_s, status: error_status_code }

app/controllers/esign_settings_controller.rb

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

app/controllers/notifications_settings_controller.rb

@@ -35,12 +35,12 @@ class NotificationsSettingsController < ApplicationController
 
   def load_reminder_config
     @reminder_config =
-      AccountConfig.find_or_initialize_by(account: current_account, key: AccountConfig::SUBMITTER_REMAILERS)
+      AccountConfig.find_or_initialize_by(account: current_account, key: AccountConfig::SUBMITTER_REMINDERS)
   end
 
   def email_config_params
     params.require(:account_config).permit!.tap do |attrs|
-      attrs[:key] = nil unless attrs[:key].in?([AccountConfig::BCC_EMAILS, AccountConfig::SUBMITTER_REMAILERS])
+      attrs[:key] = nil unless attrs[:key].in?([AccountConfig::BCC_EMAILS, AccountConfig::SUBMITTER_REMINDERS])
     end
   end
 end

app/controllers/passwords_controller.rb

@@ -5,6 +5,12 @@ class PasswordsController < Devise::PasswordsController
     attribute :user
   end
 
+  def create
+    super do |resource|
+      resource.errors.clear unless Docuseal.multitenant?
+    end
+  end
+
   def update
     super do |resource|
       Current.user = resource

app/controllers/personalization_settings_controller.rb

@@ -5,7 +5,8 @@ class PersonalizationSettingsController < ApplicationController
     AccountConfig::FORM_COMPLETED_BUTTON_KEY,
     AccountConfig::SUBMITTER_INVITATION_EMAIL_KEY,
     AccountConfig::SUBMITTER_DOCUMENTS_COPY_EMAIL_KEY,
-    AccountConfig::SUBMITTER_COMPLETED_EMAIL_KEY
+    AccountConfig::SUBMITTER_COMPLETED_EMAIL_KEY,
+    AccountConfig::FORM_COMPLETED_MESSAGE_KEY
   ].freeze
 
   InvalidKey = Class.new(StandardError)
@@ -17,6 +18,12 @@ class PersonalizationSettingsController < ApplicationController
   end
 
   def create
+    if @account_config.value.is_a?(Hash)
+      @account_config.value = @account_config.value.reject do |_, v|
+        v.blank? && v != false
+      end
+    end
+
     if @account_config.value != false && @account_config.value.blank?
       @account_config.destroy!
     else

app/controllers/send_submission_email_controller.rb

@@ -21,6 +21,8 @@ class SendSubmissionEmailController < ApplicationController
         Submitter.find_by!(slug: params[:submitter_slug])
       end
 
+    RateLimit.call("send-email-#{@submitter.id}", limit: 2, ttl: 5.minutes)
+
     SubmitterMailer.documents_copy_email(@submitter, sig: true).deliver_later!
 
     respond_to do |f|

app/controllers/sessions_controller.rb

@@ -3,10 +3,14 @@
 class SessionsController < Devise::SessionsController
   before_action :configure_permitted_parameters
 
+  around_action :with_browser_locale
+
   def create
     email = sign_in_params[:email].to_s.downcase
 
     if Docuseal.multitenant? && !User.exists?(email:)
+      Rollbar.warning('Sign in new user') if defined?(Rollbar)
+
       return redirect_to new_registration_path(sign_up: true, user: sign_in_params.slice(:email)),
                          notice: 'Create a new account'
     end

app/controllers/sso_settings_controller.rb

@@ -3,7 +3,6 @@
 class SsoSettingsController < ApplicationController
   before_action :load_encrypted_config
   authorize_resource :encrypted_config, only: :index
-  authorize_resource :encrypted_config, parent: false, except: :index
 
   def index; end
 

app/controllers/start_form_controller.rb

@@ -33,7 +33,13 @@ class StartFormController < ApplicationController
 
       assign_submission_attributes(@submitter, @template) if @submitter.new_record?
 
+      is_new_record = @submitter.new_record?
+
       if @submitter.save
+        if is_new_record
+          SendSubmissionCreatedWebhookRequestJob.perform_async({ 'submission_id' => @submitter.submission.id })
+        end
+
         redirect_to submit_form_path(@submitter.slug)
       else
         render :show

app/controllers/submissions_archived_controller.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class SubmissionsArchivedController < ApplicationController
+  load_and_authorize_resource :submission, parent: false
+
+  def index
+    @submissions = @submissions.joins(:template)
+    @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))
+  end
+end

app/controllers/submissions_controller.rb

@@ -19,6 +19,8 @@ class SubmissionsController < ApplicationController
   def create
     authorize!(:create, Submission)
 
+    save_template_message(@template, params) if params[:save_message] == '1'
+
     if params[:is_custom_message] != '1'
       params.delete(:subject)
       params.delete(:body)
@@ -42,6 +44,10 @@ class SubmissionsController < ApplicationController
                                            params: params.merge('send_completed_email' => true))
       end
 
+    submissions.each do |submission|
+      SendSubmissionCreatedWebhookRequestJob.perform_async({ 'submission_id' => submission.id })
+    end
+
     Submissions.send_signature_requests(submissions)
 
     redirect_to template_path(@template), notice: 'New recipients have been added'
@@ -50,11 +56,20 @@ class SubmissionsController < ApplicationController
   def destroy
     @submission.update!(archived_at: Time.current)
 
+    SendSubmissionArchivedWebhookRequestJob.perform_async('submission_id' => @submission.id)
+
     redirect_back(fallback_location: template_path(@submission.template), notice: 'Submission has been archived')
   end
 
   private
 
+  def save_template_message(template, params)
+    template.preferences['request_email_subject'] = params[:subject] if params[:subject].present?
+    template.preferences['request_email_body'] = params[:body] if params[:body].present?
+
+    template.save!
+  end
+
   def submissions_params
     params.permit(submission: { submitters: [%i[uuid email phone name]] })
   end

app/controllers/submissions_dashboard_controller.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+class SubmissionsDashboardController < ApplicationController
+  load_and_authorize_resource :submission, parent: false
+
+  def index
+    @submissions = @submissions.joins(:template)
+
+    @submissions = @submissions.where(archived_at: nil)
+                               .where(templates: { archived_at: nil })
+                               .preload(:created_by_user, template: :author)
+
+    @submissions = Submissions.search(@submissions, params[:q], search_template: true)
+
+    @submissions = @submissions.pending if params[:status] == 'pending'
+    @submissions = @submissions.completed if params[:status] == 'completed'
+
+    @pagy, @submissions = pagy(@submissions.preload(:submitters).order(id: :desc))
+  end
+end

app/controllers/submissions_debug_controller.rb

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

app/controllers/submissions_download_controller.rb

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

app/controllers/submit_form_controller.rb

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

app/controllers/submit_form_draw_signature_controller.rb

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

app/controllers/submit_form_values_controller.rb

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

app/controllers/submitters_autocomplete_controller.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+class SubmittersAutocompleteController < ApplicationController
+  load_and_authorize_resource :submitter, parent: false
+
+  SELECT_COLUMNS = %w[email phone name].freeze
+  LIMIT = 100
+
+  def index
+    submitters = search_submitters(@submitters)
+
+    values = submitters.limit(LIMIT).group(SELECT_COLUMNS.join(', ')).pluck(SELECT_COLUMNS.join(', '))
+
+    attrs = values.map { |row| SELECT_COLUMNS.zip(row).to_h }
+    attrs = attrs.uniq { |e| e[params[:field]] } if params[:field].present?
+
+    render json: attrs
+  end
+
+  private
+
+  def search_submitters(submitters)
+    if SELECT_COLUMNS.include?(params[:field])
+      column = Submitter.arel_table[params[:field].to_sym]
+
+      term = "#{params[:q].downcase}%"
+
+      submitters.where(column.matches(term))
+    else
+      Submitters.search(submitters, params[:q])
+    end
+  end
+end

app/controllers/submitters_send_email_controller.rb

@@ -7,11 +7,13 @@ class SubmittersSendEmailController < ApplicationController
     if Docuseal.multitenant? && SubmissionEvent.exists?(submitter: @submitter,
                                                         event_type: 'send_email',
                                                         created_at: 24.hours.ago..Time.current)
+      Rollbar.warning("Already sent: #{@submitter.id}") if defined?(Rollbar)
+
       return redirect_back(fallback_location: submission_path(@submitter.submission),
                            alert: 'Email has been sent already.')
     end
 
-    SendSubmitterInvitationEmailJob.perform_later('submitter_id' => @submitter.id)
+    SendSubmitterInvitationEmailJob.perform_async('submitter_id' => @submitter.id)
 
     @submitter.sent_at ||= Time.current
     @submitter.save!

app/controllers/template_documents_controller.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+class TemplateDocumentsController < ApplicationController
+  load_and_authorize_resource :template
+
+  def create
+    if params[:blobs].blank? && params[:files].blank?
+      return render json: { error: 'File is missing' }, status: :unprocessable_entity
+    end
+
+    old_fields_hash = @template.fields.hash
+
+    documents = Templates::CreateAttachments.call(@template, params)
+
+    schema = documents.map do |doc|
+      { attachment_uuid: doc.uuid, name: doc.filename.base }
+    end
+
+    render json: {
+      schema:,
+      fields: old_fields_hash == @template.fields.hash ? nil : @template.fields,
+      submitters: old_fields_hash == @template.fields.hash ? nil : @template.submitters,
+      documents: documents.as_json(
+        methods: %i[metadata signed_uuid],
+        include: {
+          preview_images: { methods: %i[url metadata filename] }
+        }
+      )
+    }
+  rescue Templates::CreateAttachments::PdfEncrypted
+    render json: { error: 'PDF encrypted' }, status: :unprocessable_entity
+  end
+end

app/controllers/template_folders_autocomplete_controller.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class TemplateFoldersAutocompleteController < ApplicationController
+  load_and_authorize_resource :template_folder, parent: false
+
+  LIMIT = 100
+
+  def index
+    template_folders = @template_folders.joins(:templates).where(templates: { archived_at: nil }).distinct
+    template_folders = TemplateFolders.search(template_folders, params[:q]).limit(LIMIT)
+
+    render json: template_folders.as_json(only: %i[name archived_at])
+  end
+end

app/controllers/templates_archived_submissions_controller.rb

@@ -6,7 +6,7 @@ class TemplatesArchivedSubmissionsController < ApplicationController
 
   def index
     @submissions = @submissions.where.not(archived_at: nil)
-    @submissions = Submissions.search(@submissions, params[:q])
+    @submissions = Submissions.search(@submissions, params[:q], search_values: true)
 
     @pagy, @submissions = pagy(@submissions.preload(:submitters).order(id: :desc))
   rescue ActiveRecord::RecordNotFound

app/controllers/templates_controller.rb

@@ -8,7 +8,7 @@ class TemplatesController < ApplicationController
   def show
     submissions = @template.submissions.accessible_by(current_ability)
     submissions = submissions.active if @template.archived_at.blank?
-    submissions = Submissions.search(submissions, params[:q])
+    submissions = Submissions.search(submissions, params[:q], search_values: true)
 
     @base_submissions = submissions
 
@@ -53,7 +53,7 @@ class TemplatesController < ApplicationController
 
     if params[:account_id].present? && authorized_clone_account_id?(params[:account_id])
       @template.account_id = params[:account_id]
-      @template.folder = @template.account.default_template_folder
+      @template.folder = @template.account.default_template_folder if @template.account_id != current_account.id
     else
       @template.account = current_account
     end
@@ -61,12 +61,22 @@ class TemplatesController < ApplicationController
     if @template.save
       Templates::CloneAttachments.call(template: @template, original_template: @base_template) if @base_template
 
+      SendTemplateUpdatedWebhookRequestJob.perform_async('template_id' => @template.id)
+
       maybe_redirect_to_template(@template)
     else
       render turbo_stream: turbo_stream.replace(:modal, template: 'templates/new'), status: :unprocessable_entity
     end
   end
 
+  def update
+    @template.update!(template_params)
+
+    SendTemplateUpdatedWebhookRequestJob.perform_async('template_id' => @template.id)
+
+    head :ok
+  end
+
   def destroy
     notice =
       if params[:permanently].present?
@@ -86,6 +96,22 @@ class TemplatesController < ApplicationController
 
   private
 
+  def template_params
+    params.require(:template).permit(
+      :name,
+      { schema: [%i[attachment_uuid name]],
+        submitters: [%i[name uuid]],
+        fields: [[:uuid, :submitter_uuid, :name, :type,
+                  :required, :readonly, :default_value,
+                  :title, :description,
+                  { preferences: {},
+                    conditions: [%i[field_uuid value action]],
+                    options: [%i[value uuid]],
+                    validation: %i[message pattern],
+                    areas: [%i[x y w h cell_w attachment_uuid option_uuid page]] }]] }
+    )
+  end
+
   def authorized_clone_account_id?(account_id)
     true_user.account_id.to_s == account_id.to_s || true_user.account.linked_accounts.exists?(id: account_id)
   end
@@ -98,10 +124,6 @@ class TemplatesController < ApplicationController
     end
   end
 
-  def template_params
-    params.require(:template).permit(:name)
-  end
-
   def load_base_template
     return if params[:base_template_id].blank?
 

app/controllers/templates_dashboard_controller.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+class TemplatesDashboardController < ApplicationController
+  load_and_authorize_resource :template_folder, parent: false
+  load_and_authorize_resource :template, parent: false
+
+  SHOW_TEMPLATES_FOLDERS_THRESHOLD = 9
+  TEMPLATES_PER_PAGE = 12
+  FOLDERS_PER_PAGE = 18
+
+  def index
+    @template_folders = filter_template_folders(@template_folders)
+
+    @pagy, @template_folders = pagy(
+      @template_folders,
+      items: FOLDERS_PER_PAGE,
+      page: @template_folders.count > SHOW_TEMPLATES_FOLDERS_THRESHOLD ? params[:page] : 1
+    )
+
+    if @pagy.count > SHOW_TEMPLATES_FOLDERS_THRESHOLD
+      @templates = @templates.none
+    else
+      @template_folders = @template_folders.reject { |e| e.name == TemplateFolder::DEFAULT_NAME }
+      @templates = filter_templates(@templates)
+
+      items =
+        if @template_folders.size < 4
+          TEMPLATES_PER_PAGE
+        else
+          (@template_folders.size < 7 ? 9 : 6)
+        end
+
+      @pagy, @templates = pagy(@templates, items:)
+    end
+  end
+
+  private
+
+  def filter_template_folders(template_folders)
+    rel = template_folders.joins(:active_templates)
+                          .order(id: :desc)
+                          .distinct
+
+    TemplateFolders.search(rel, params[:q])
+  end
+
+  def filter_templates(templates)
+    rel = templates.active.preload(:author).order(id: :desc)
+
+    if params[:q].blank?
+      if Docuseal.multitenant? && !current_account.testing?
+        rel = rel.where(folder_id: current_account.default_template_folder.id)
+      else
+        shared_template_ids =
+          TemplateSharing.where(account_id: [current_account.id, TemplateSharing::ALL_ID]).select(:template_id)
+
+        rel = rel.where(folder_id: current_account.default_template_folder.id).or(rel.where(id: shared_template_ids))
+      end
+    end
+
+    Templates.search(rel, params[:q])
+  end
+end

app/controllers/templates_preferences_controller.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+class TemplatesPreferencesController < ApplicationController
+  load_and_authorize_resource :template
+
+  def show; end
+
+  def create
+    authorize!(:update, @template)
+
+    @template.preferences = @template.preferences.merge(template_params[:preferences])
+    @template.preferences = @template.preferences.reject { |_, v| v.is_a?(String) && v.blank? }
+    @template.save!
+
+    head :ok
+  end
+
+  private
+
+  def template_params
+    params.require(:template).permit(
+      preferences: %i[bcc_completed request_email_subject request_email_body
+                      documents_copy_email_subject documents_copy_email_body
+                      documents_copy_email_enabled documents_copy_email_attach_audit
+                      completed_notification_email_subject completed_notification_email_body
+                      completed_notification_email_enabled completed_notification_email_attach_audit]
+    ).tap do |attrs|
+      attrs[:preferences] = attrs[:preferences].transform_values do |value|
+        if %w[true false].include?(value)
+          value == 'true'
+        else
+          value
+        end
+      end
+    end
+  end
+end

app/controllers/templates_uploads_controller.rb

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

app/controllers/timestamp_server_controller.rb

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

app/controllers/user_initials_controller.rb

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

app/controllers/users_controller.rb

@@ -1,13 +1,20 @@
 # frozen_string_literal: true
 
 class UsersController < ApplicationController
-  load_and_authorize_resource :user, only: %i[index edit new update destroy]
+  load_and_authorize_resource :user, only: %i[index edit update destroy]
 
-  before_action :build_user, only: :create
+  before_action :build_user, only: %i[new create]
-  authorize_resource :user, only: :create
+  authorize_resource :user, only: %i[new create]
 
   def index
-    @pagy, @users = pagy(@users.active.order(id: :desc))
+    @users =
+      if params[:status] == 'archived'
+        @users.archived
+      else
+        @users.active
+      end
+
+    @pagy, @users = pagy(@users.where(account: current_account).order(id: :desc))
   end
 
   def new; end
@@ -15,10 +22,20 @@ class UsersController < ApplicationController
   def edit; end
 
   def create
+    existing_user = User.accessible_by(current_ability).find_by(email: @user.email)
+
+    if existing_user
+      existing_user.archived_at = nil
+      existing_user.assign_attributes(user_params)
+      existing_user.account = current_account
+
+      @user = existing_user
+    end
+
     if @user.save
       UserMailer.invitation_email(@user).deliver_later!
 
-      redirect_to settings_users_path, notice: 'User has been invited'
+      redirect_back fallback_location: settings_users_path, notice: 'User has been invited'
     else
       render turbo_stream: turbo_stream.replace(:modal, template: 'users/new'), status: :unprocessable_entity
     end
@@ -27,11 +44,19 @@ class UsersController < ApplicationController
   def update
     return redirect_to settings_users_path, notice: 'Unable to update user.' if Docuseal.demo?
 
-    attrs = user_params.compact_blank
+    attrs = user_params.compact_blank.merge(user_params.slice(:archived_at))
     attrs.delete(:role) if !role_valid?(attrs[:role]) || current_user == @user
 
+    if params.dig(:user, :account_id).present?
+      account = Account.accessible_by(current_ability).find(params[:user][:account_id])
+
+      authorize!(:manage, account)
+
+      @user.account = account
+    end
+
     if @user.update(attrs)
-      redirect_to settings_users_path, notice: 'User has been updated'
+      redirect_back fallback_location: settings_users_path, notice: 'User has been updated'
     else
       render turbo_stream: turbo_stream.replace(:modal, template: 'users/edit'), status: :unprocessable_entity
     end
@@ -44,7 +69,7 @@ class UsersController < ApplicationController
 
     @user.update!(archived_at: Time.current)
 
-    redirect_to settings_users_path, notice: 'User has been removed'
+    redirect_back fallback_location: settings_users_path, notice: 'User has been removed'
   end
 
   private
@@ -65,6 +90,11 @@ class UsersController < ApplicationController
   end
 
   def user_params
-    params.require(:user).permit(:email, :first_name, :last_name, :password, :role)
+    if params.key?(:user)
+      params.require(:user).permit(:email, :first_name, :last_name, :password,
+                                   :role, :archived_at, :account_id)
+    else
+      {}
+    end
   end
 end

app/controllers/verify_pdf_signature_controller.rb

@@ -9,11 +9,14 @@ class VerifyPdfSignatureController < ApplicationController
         HexaPDF::Document.new(io: file.open)
       end
 
-    cert_data = if Docuseal.multitenant?
+    cert_data =
-                  Docuseal::CERTS
+      if Docuseal.multitenant?
-                else
+        value = EncryptedConfig.find_by(account: current_account, key: EncryptedConfig::ESIGN_CERTS_KEY)&.value || {}
-                  EncryptedConfig.find_by(key: EncryptedConfig::ESIGN_CERTS_KEY)&.value || {}
+
-                end
+        Docuseal::CERTS.merge(value)
+      else
+        EncryptedConfig.find_by(key: EncryptedConfig::ESIGN_CERTS_KEY)&.value || {}
+      end
 
     default_pkcs = GenerateCertificate.load_pkcs(cert_data)
 
@@ -24,7 +27,8 @@ class VerifyPdfSignatureController < ApplicationController
     trusted_certs = [default_pkcs.certificate,
                      *default_pkcs.ca_certs,
                      *custom_certs.map(&:certificate),
-                     *custom_certs.flat_map(&:ca_certs).compact]
+                     *custom_certs.flat_map(&:ca_certs).compact,
+                     *Docuseal.trusted_certs]
 
     render turbo_stream: turbo_stream.replace('result', partial: 'result',
                                                         locals: { pdfs:, files: params[:files], trusted_certs: })

app/controllers/webhook_preferences_controller.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+class WebhookPreferencesController < ApplicationController
+  EVENTS = %w[
+    form.viewed
+    form.started
+    form.completed
+    template.created
+    template.updated
+    submission.created
+    submission.archived
+  ].freeze
+
+  before_action :load_account_config
+  authorize_resource :account_config, parent: false
+
+  def create
+    @account_config.value[account_config_params[:event]] = account_config_params[:value] == '1'
+
+    @account_config.save!
+
+    head :ok
+  end
+
+  private
+
+  def load_account_config
+    @account_config =
+      current_account.account_configs.find_or_initialize_by(key: AccountConfig::WEBHOOK_PREFERENCES_KEY)
+    @account_config.value ||= {}
+  end
+
+  def account_config_params
+    params.permit(:event, :value)
+  end
+end

app/controllers/webhook_settings_controller.rb

@@ -17,7 +17,7 @@ class WebhookSettingsController < ApplicationController
   def update
     submitter = current_account.submitters.where.not(completed_at: nil).order(:id).last
 
-    SendFormCompletedWebhookRequestJob.perform_later(submitter)
+    SendFormCompletedWebhookRequestJob.perform_async({ 'submitter_id' => submitter.id })
 
     redirect_back(fallback_location: settings_webhooks_path, notice: 'Webhook request has been sent.')
   end

app/javascript/application.js

@@ -3,8 +3,10 @@ import { encodeMethodIntoRequestBody } from '@hotwired/turbo-rails/app/javascrip
 
 import { createApp, reactive } from 'vue'
 import TemplateBuilder from './template_builder/builder'
+import ImportList from './template_builder/import_list'
 
 import ToggleVisible from './elements/toggle_visible'
+import ToggleCookies from './elements/toggle_cookies'
 import DisableHidden from './elements/disable_hidden'
 import TurboModal from './elements/turbo_modal'
 import FileDropzone from './elements/file_dropzone'
@@ -20,6 +22,8 @@ import FolderAutocomplete from './elements/folder_autocomplete'
 import SignatureForm from './elements/signature_form'
 import SubmitForm from './elements/submit_form'
 import PromptPassword from './elements/prompt_password'
+import EmailsTextarea from './elements/emails_textarea'
+import ToggleOnSubmit from './elements/toggle_on_submit'
 
 import * as TurboInstantClick from './lib/turbo_instant_click'
 
@@ -37,23 +41,6 @@ document.addEventListener('keyup', (e) => {
   }
 })
 
-window.customElements.define('toggle-visible', ToggleVisible)
-window.customElements.define('disable-hidden', DisableHidden)
-window.customElements.define('turbo-modal', TurboModal)
-window.customElements.define('file-dropzone', FileDropzone)
-window.customElements.define('menu-active', MenuActive)
-window.customElements.define('clipboard-copy', ClipboardCopy)
-window.customElements.define('dynamic-list', DynamicList)
-window.customElements.define('download-button', DownloadButton)
-window.customElements.define('set-origin-url', SetOriginUrl)
-window.customElements.define('set-timezone', SetTimezone)
-window.customElements.define('autoresize-textarea', AutoresizeTextarea)
-window.customElements.define('submitters-autocomplete', SubmittersAutocomplete)
-window.customElements.define('folder-autocomplete', FolderAutocomplete)
-window.customElements.define('signature-form', SignatureForm)
-window.customElements.define('submit-form', SubmitForm)
-window.customElements.define('prompt-password', PromptPassword)
-
 document.addEventListener('turbo:before-fetch-request', encodeMethodIntoRequestBody)
 document.addEventListener('turbo:submit-end', async (event) => {
   const resp = event.detail?.formSubmission?.result?.fetchResponse?.response
@@ -77,7 +64,29 @@ document.addEventListener('turbo:submit-end', async (event) => {
   URL.revokeObjectURL(url)
 })
 
-window.customElements.define('template-builder', class extends HTMLElement {
+const safeRegisterElement = (name, element, options = {}) => !window.customElements.get(name) && window.customElements.define(name, element, options)
+
+safeRegisterElement('toggle-visible', ToggleVisible)
+safeRegisterElement('disable-hidden', DisableHidden)
+safeRegisterElement('turbo-modal', TurboModal)
+safeRegisterElement('file-dropzone', FileDropzone)
+safeRegisterElement('menu-active', MenuActive)
+safeRegisterElement('clipboard-copy', ClipboardCopy)
+safeRegisterElement('dynamic-list', DynamicList)
+safeRegisterElement('download-button', DownloadButton)
+safeRegisterElement('set-origin-url', SetOriginUrl)
+safeRegisterElement('set-timezone', SetTimezone)
+safeRegisterElement('autoresize-textarea', AutoresizeTextarea)
+safeRegisterElement('submitters-autocomplete', SubmittersAutocomplete)
+safeRegisterElement('folder-autocomplete', FolderAutocomplete)
+safeRegisterElement('signature-form', SignatureForm)
+safeRegisterElement('submit-form', SubmitForm)
+safeRegisterElement('prompt-password', PromptPassword)
+safeRegisterElement('emails-textarea', EmailsTextarea)
+safeRegisterElement('toggle-cookies', ToggleCookies)
+safeRegisterElement('toggle-on-submit', ToggleOnSubmit)
+
+safeRegisterElement('template-builder', class extends HTMLElement {
   connectedCallback () {
     this.appElem = document.createElement('div')
 
@@ -89,12 +98,33 @@ window.customElements.define('template-builder', class extends HTMLElement {
       withPhone: this.dataset.withPhone === 'true',
       withLogo: this.dataset.withLogo !== 'false',
       editable: this.dataset.editable !== 'false',
+      authenticityToken: document.querySelector('meta[name="csrf-token"]')?.content,
       withPayment: this.dataset.withPayment === 'true',
+      isPaymentConnected: this.dataset.isPaymentConnected === 'true',
       withFormula: this.dataset.withFormula === 'true',
       withConditions: this.dataset.withConditions === 'true',
       currencies: (this.dataset.currencies || '').split(',').filter(Boolean),
-      acceptFileTypes: this.dataset.acceptFileTypes,
+      acceptFileTypes: this.dataset.acceptFileTypes
-      isDirectUpload: this.dataset.isDirectUpload === 'true'
+    })
+
+    this.app.mount(this.appElem)
+
+    this.appendChild(this.appElem)
+  }
+
+  disconnectedCallback () {
+    this.app?.unmount()
+    this.appElem?.remove()
+  }
+})
+
+safeRegisterElement('import-list', class extends HTMLElement {
+  connectedCallback () {
+    this.appElem = document.createElement('div')
+
+    this.app = createApp(ImportList, {
+      template: JSON.parse(this.dataset.template),
+      authenticityToken: document.querySelector('meta[name="csrf-token"]')?.content
     })
 
     this.app.mount(this.appElem)

app/javascript/application.scss

@@ -83,6 +83,11 @@ button[disabled] .enabled {
   bottom: auto;
 }
 
+.tooltip-pre:before {
+  white-space: pre;
+  text-align: left;
+}
+
 .tooltip-bottom-end:after {
   transform: translateX(-25%);
   border-color: transparent transparent var(--tooltip-color) transparent;

app/javascript/draw.js

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

app/javascript/elements/autoresize_textarea.js

@@ -7,7 +7,7 @@ export default class extends HTMLElement {
 
   resize () {
     if (this.textarea.clientHeight < this.textarea.scrollHeight) {
-      this.textarea.style.height = `${this.textarea.scrollHeight}px`
+      this.textarea.style.height = `${this.textarea.scrollHeight + 5}px`
     }
   }
 

app/javascript/elements/download_button.js

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

app/javascript/elements/emails_textarea.js

@@ -0,0 +1,56 @@
+const emailRegexp = /([^@;,<>\s]+@[^@;,<>\s]+)/g
+
+export default class extends HTMLElement {
+  connectedCallback () {
+    if (this.dataset.limit) {
+      this.textarea.addEventListener('input', () => {
+        const emails = this.textarea.value.match(emailRegexp) || []
+
+        this.updateCounter(emails.length)
+      })
+    }
+  }
+
+  updateCounter (count) {
+    let counter = document.getElementById('emails_counter')
+    let bulkMessage = document.getElementById('bulk_message')
+
+    if (count < 2) {
+      counter?.remove()
+
+      return
+    }
+
+    if ((count + 10) > this.dataset.limit) {
+      if (!counter) {
+        counter = document.createElement('span')
+
+        counter.id = 'emails_counter'
+        counter.classList.add('text-xs', 'right-0', 'absolute')
+        counter.style.bottom = '-15px'
+
+        this.textarea.parentNode.append(counter)
+      }
+
+      counter.innerText = `${count} / ${this.dataset.limit}`
+    }
+
+    if (this.dataset.bulkEnabled !== 'true') {
+      if (!bulkMessage) {
+        bulkMessage = document.createElement('span')
+
+        bulkMessage.id = 'bulk_message'
+        bulkMessage.classList.add('text-xs', 'left-0', 'absolute')
+        bulkMessage.style.bottom = '-15px'
+
+        this.textarea.parentNode.append(bulkMessage)
+      }
+
+      bulkMessage.innerHTML = '<a class="link" data-turbo="false" href="/upgrade">Upgrade</a> to bulk send multiple recipients'
+    }
+  }
+
+  get textarea () {
+    return this.querySelector('textarea')
+  }
+}

app/javascript/elements/file_dropzone.js

@@ -9,10 +9,6 @@ export default actionable(targetable(class extends HTMLElement {
   ]
 
   connectedCallback () {
-    if (this.dataset.isDirectUpload === 'true') {
-      import('@rails/activestorage')
-    }
-
     this.addEventListener('drop', this.onDrop)
 
     this.addEventListener('dragover', (e) => e.preventDefault())
@@ -48,61 +44,11 @@ export default actionable(targetable(class extends HTMLElement {
     this.classList.toggle('opacity-50')
   }
 
-  async uploadFiles (files) {
+  uploadFiles () {
     this.toggleLoading()
 
-    if (this.dataset.isDirectUpload === 'true') {
+    if (this.dataset.submitOnUpload) {
-      const { DirectUpload } = await import('@rails/activestorage')
+      this.closest('form').querySelector('button[type="submit"]').click()
-
-      await Promise.all(
-        Array.from(files).map(async (file) => {
-          const upload = new DirectUpload(
-            file,
-            '/direct_uploads',
-            this.input
-          )
-
-          return new Promise((resolve, reject) => {
-            upload.create((error, blob) => {
-              if (error) {
-                console.error(error)
-
-                return reject(error)
-              } else {
-                return resolve(blob)
-              }
-            })
-          }).catch((error) => {
-            console.error(error)
-          })
-        })
-      ).then((blobs) => {
-        if (this.dataset.submitOnUpload) {
-          this.querySelectorAll('[name="blob_signed_ids[]"]').forEach((e) => e.remove())
-        }
-
-        blobs.forEach((blob) => {
-          const input = document.createElement('input')
-
-          input.type = 'hidden'
-          input.name = 'blob_signed_ids[]'
-          input.value = blob.signed_id
-
-          this.append(input)
-        })
-
-        if (this.dataset.submitOnUpload === 'true') {
-          this.closest('form').querySelector('button[type="submit"]').click()
-        }
-      }).finally(() => {
-        if (this.dataset.submitOnUpload !== 'true') {
-          this.toggleLoading()
-        }
-      })
-    } else {
-      if (this.dataset.submitOnUpload) {
-        this.closest('form').querySelector('button[type="submit"]').click()
-      }
     }
   }
 }))

app/javascript/elements/folder_autocomplete.js

@@ -20,7 +20,7 @@ export default class extends HTMLElement {
   fetch = (text, resolve) => {
     const queryParams = new URLSearchParams({ q: text })
 
-    fetch('/api/template_folders_autocomplete?' + queryParams).then(async (resp) => {
+    fetch('/template_folders_autocomplete?' + queryParams).then(async (resp) => {
       const items = await resp.json()
 
       resolve(items)

app/javascript/elements/signature_form.js

@@ -5,8 +5,12 @@ export default targetable(class extends HTMLElement {
   static [target.static] = ['canvas', 'input', 'clear', 'button']
 
   async connectedCallback () {
-    this.canvas.width = this.canvas.parentNode.parentNode.clientWidth
+    const scale = 3
-    this.canvas.height = this.canvas.parentNode.parentNode.clientWidth / 3
+
+    this.canvas.width = this.canvas.parentNode.clientWidth * scale
+    this.canvas.height = this.canvas.parentNode.clientHeight * scale
+
+    this.canvas.getContext('2d').scale(scale, scale)
 
     const { default: SignaturePad } = await import('signature_pad')
 

app/javascript/elements/submitter_autocomplete.js

@@ -28,6 +28,8 @@ export default class extends HTMLElement {
 
       if (textarea && item[field]) {
         textarea.value = textarea.value.replace(/[^;,\s]+$/, item[field] + ' ')
+
+        textarea.dispatchEvent(new Event('input', { bubbles: true }))
       }
     })
   }
@@ -38,16 +40,12 @@ export default class extends HTMLElement {
     if (q) {
       const queryParams = new URLSearchParams({ q, field: this.dataset.field })
 
-      this.currentFetch ||= fetch('/api/submitters_autocomplete?' + queryParams)
+      this.currentFetch ||= fetch('/submitters_autocomplete?' + queryParams)
 
       this.currentFetch.then(async (resp) => {
         const items = await resp.json()
 
-        if (q.length < 3) {
+        resolve(items)
-          resolve(items.filter((e) => e[this.dataset.field].startsWith(q)))
-        } else {
-          resolve(items)
-        }
       }).catch(() => {
         resolve([])
       }).finally(() => {

app/javascript/elements/toggle_cookies.js

@@ -0,0 +1,17 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.button.addEventListener('click', () => {
+      const expirationDate = new Date()
+
+      expirationDate.setFullYear(expirationDate.getFullYear() + 10)
+
+      const expires = expirationDate.toUTCString()
+
+      document.cookie = this.dataset.key + '=' + this.dataset.value + '; expires=' + expires + '; path=/'
+    })
+  }
+
+  get button () {
+    return this.querySelector('button')
+  }
+}

app/javascript/elements/toggle_on_submit.js

@@ -0,0 +1,35 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    document.addEventListener('turbo:submit-end', this.onSubmitEnd)
+
+    this.form.addEventListener('submit', this.onSubmit)
+  }
+
+  disconnectedCallback () {
+    document.removeEventListener('turbo:submit-end', this.onSubmitEnd)
+
+    this.form.removeEventListener('submit', this.onSubmit)
+  }
+
+  onSubmit = () => {
+    this.element.classList.add('invisible')
+  }
+
+  onSubmitEnd = (event) => {
+    if (event.target === this.form) {
+      const resp = event.detail?.formSubmission?.result?.fetchResponse?.response
+
+      if (resp?.status / 100 === 2) {
+        this.element.classList.remove('invisible')
+      }
+    }
+  }
+
+  get element () {
+    return document.getElementById(this.dataset.elementId)
+  }
+
+  get form () {
+    return this.closest('form')
+  }
+}

app/javascript/elements/toggle_submit.js

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

app/javascript/form.js

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

app/javascript/rollbar.js

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

app/javascript/submission_form/area.vue

@@ -1,9 +1,9 @@
 <template>
   <div
-    class="flex absolute lg:text-base -outline-offset-1"
+    class="field-area flex absolute lg:text-base -outline-offset-1"
     dir="auto"
     :style="computedStyle"
-    :class="{ 'text-[1.5vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars, 'cursor-default': !submittable, 'border border-red-100 bg-red-100 cursor-pointer': submittable, 'border border-red-100': !isActive && submittable, 'bg-opacity-80': !isActive && !isValueSet && submittable, 'outline-red-500 outline-dashed outline-2 z-10': isActive && submittable, 'bg-opacity-40': (isActive || isValueSet) && submittable }"
+    :class="{ 'text-[1.5vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars, 'cursor-default': !submittable, 'border border-red-100 bg-red-100 cursor-pointer': submittable, 'border border-red-100': !isActive && submittable, 'bg-opacity-80': !isActive && !isValueSet && submittable, 'field-area-active outline-red-500 outline-dashed outline-2 z-10': isActive && submittable, 'bg-opacity-40': (isActive || isValueSet) && submittable }"
   >
     <div
       v-if="!isActive && !isValueSet && field.type !== 'checkbox' && submittable && !area.option_uuid"
@@ -157,6 +157,7 @@
       ref="textContainer"
       dir="auto"
       class="flex items-center px-0.5 w-full"
+      :class="alignClasses[field.preferences?.align]"
     >
       <span v-if="Array.isArray(modelValue)">
         {{ modelValue.join(', ') }}
@@ -164,9 +165,13 @@
       <span v-else-if="field.type === 'date'">
         {{ formattedDate }}
       </span>
+      <span v-else-if="field.type === 'number'">
+        {{ formatNumber(modelValue, field.preferences?.format) }}
+      </span>
       <span
         v-else
         class="whitespace-pre-wrap"
+        :class="{ 'w-full': field.preferences?.align }"
       >{{ modelValue }}</span>
     </div>
   </div>
@@ -253,6 +258,13 @@ export default {
         phone: this.t('phone')
       }
     },
+    alignClasses () {
+      return {
+        center: 'text-center',
+        left: 'text-left',
+        right: 'text-right'
+      }
+    },
     option () {
       return this.field.options.find((o) => o.uuid === this.area.option_uuid)
     },
@@ -328,27 +340,35 @@ export default {
     computedStyle () {
       const { x, y, w, h } = this.area
 
-      return {
+      const style = {
         top: y * 100 + '%',
         left: x * 100 + '%',
         width: w * 100 + '%',
         height: h * 100 + '%'
       }
+
+      if (this.field.preferences?.font_size) {
+        style.fontSize = this.field.preferences.font_size + 'pt'
+      }
+
+      return style
     }
   },
   watch: {
     modelValue () {
-      if (this.field.type === 'text' && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > this.modelValue.length)) {
+      this.$nextTick(() => {
-        this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? this.modelValue.length : 0
+        if (['date', 'text', 'number'].includes(this.field.type) && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > `${this.modelValue}`.length)) {
-      }
+          this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? `${this.modelValue}`.length : 0
+        }
+      })
     }
   },
   mounted () {
-    if (this.field.type === 'text' && this.$refs.textContainer) {
+    this.$nextTick(() => {
-      this.$nextTick(() => {
+      if (['date', 'text', 'number'].includes(this.field.type) && this.$refs.textContainer) {
-        this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? this.modelValue.length : 0
+        this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? `${this.modelValue}`.length : 0
-      })
+      }
-    }
+    })
   },
   methods: {
     optionValue (option) {
@@ -362,6 +382,17 @@ export default {
         }
       }
     },
+    formatNumber (number, format) {
+      if (format === 'comma') {
+        return new Intl.NumberFormat('en-US').format(number)
+      } else if (format === 'dot') {
+        return new Intl.NumberFormat('de-DE').format(number)
+      } else if (format === 'space') {
+        return new Intl.NumberFormat('fr-FR').format(number)
+      } else {
+        return number
+      }
+    },
     formatDate (date, format) {
       const monthFormats = {
         M: 'numeric',
@@ -377,6 +408,7 @@ export default {
 
       const yearFormats = {
         YYYY: 'numeric',
+        YYY: 'numeric',
         YY: '2-digit'
       }
 

app/javascript/submission_form/attachment_step.vue

@@ -51,7 +51,6 @@
     <FileDropzone
       :message="`${t('upload')} ${field.name || t('files')}${field.required ? '' : ` (${t('optional')})`}`"
       :submitter-slug="submitterSlug"
-      :is-direct-upload="isDirectUpload"
       :multiple="true"
       @upload="onUpload"
     />
@@ -86,11 +85,6 @@ export default {
       required: false,
       default: () => ({})
     },
-    isDirectUpload: {
-      type: Boolean,
-      required: true,
-      default: false
-    },
     modelValue: {
       type: Array,
       required: false,

app/javascript/submission_form/completed.vue

@@ -3,20 +3,29 @@
     class="mx-auto max-w-md flex flex-col"
     dir="auto"
   >
-    <p class="font-medium text-2xl flex items-center space-x-1.5 mx-auto">
+    <div class="font-medium text-2xl flex items-center space-x-1.5 mx-auto">
       <IconCircleCheck
         class="inline text-green-600"
         :width="30"
         :height="30"
       />
       <span>
-        {{ t('form_has_been_completed') }}
+        {{ completedMessage.title || t('form_has_been_completed') }}
       </span>
-    </p>
+    </div>
+    <div
+      v-if="completedMessage.body"
+      class="mt-2"
+    >
+      <MarkdownContent
+        :string="completedMessage.body"
+      />
+    </div>
     <div class="space-y-3 mt-5">
       <a
         v-if="completedButton.url"
-        :href="completedButton.url"
+        :href="sanitizeHref(completedButton.url)"
+        rel="noopener noreferrer nofollow"
         class="white-button flex items-center w-full"
       >
         <span>
@@ -91,10 +100,12 @@
 
 <script>
 import { IconCircleCheck, IconBrandGithub, IconMail, IconDownload, IconInnerShadowTop, IconLogin } from '@tabler/icons-vue'
+import MarkdownContent from './markdown_content'
 
 export default {
   name: 'FormCompleted',
   components: {
+    MarkdownContent,
     IconCircleCheck,
     IconInnerShadowTop,
     IconBrandGithub,
@@ -142,6 +153,11 @@ export default {
       type: Object,
       required: false,
       default: () => ({})
+    },
+    completedMessage: {
+      type: Object,
+      required: false,
+      default: () => ({})
     }
   },
   data () {
@@ -181,13 +197,18 @@ export default {
     download () {
       this.isDownloading = true
 
-      fetch(this.baseUrl + `/submitters/${this.submitterSlug}/download`).then((response) => response.json()).then((urls) => {
+      fetch(this.baseUrl + `/submitters/${this.submitterSlug}/download`).then(async (response) => {
-        const isSafariIos = /iPhone|iPad|iPod/i.test(navigator.userAgent)
+        if (response.ok) {
+          const urls = await response.json()
+          const isSafariIos = /iPhone|iPad|iPod/i.test(navigator.userAgent)
 
-        if (isSafariIos && urls.length > 1) {
+          if (isSafariIos && urls.length > 1) {
-          this.downloadSafariIos(urls)
+            this.downloadSafariIos(urls)
+          } else {
+            this.downloadUrls(urls)
+          }
         } else {
-          this.downloadUrls(urls)
+          alert('Failed to download files')
         }
       })
     },
@@ -211,9 +232,14 @@ export default {
       fileRequests.reduce(
         (prevPromise, request) => prevPromise.then(() => request()),
         Promise.resolve()
-      )
+      ).finally(() => {
-
+        this.isDownloading = false
-      this.isDownloading = false
+      })
+    },
+    sanitizeHref (href) {
+      if (href && href.trim().match(/^((?:https?:\/\/)|\/)/)) {
+        return href.replace(/javascript:/g, '')
+      }
     },
     downloadSafariIos (urls) {
       const fileRequests = urls.map((url) => {

app/javascript/submission_form/date_step.vue

@@ -14,12 +14,14 @@
         />
         <template v-else>
           {{ field.name && showFieldNames ? field.name : t('date') }}
-          <template v-if="!field.required">({{ t('optional') }})</template>
+          <template v-if="!field.required">
+            ({{ t('optional') }})
+          </template>
         </template>
       </label>
       <button
         class="btn btn-outline btn-sm !normal-case font-normal"
-        @click.prevent="setCurrentDate"
+        @click.prevent="[setCurrentDate(), $emit('focus')]"
       >
         <IconCalendarCheck :width="16" />
         {{ t('set_today') }}

app/javascript/submission_form/dropzone.vue

@@ -70,11 +70,6 @@ export default {
       required: false,
       default: '*/*'
     },
-    isDirectUpload: {
-      type: Boolean,
-      required: true,
-      default: false
-    },
     multiple: {
       type: Boolean,
       required: false,
@@ -92,11 +87,6 @@ export default {
       return 'el' + Math.random().toString(32).split('.')[1]
     }
   },
-  mounted () {
-    if (this.isDirectUpload) {
-      import('@rails/activestorage')
-    }
-  },
   methods: {
     onDropFiles (e) {
       this.uploadFiles(e.dataTransfer.files)
@@ -113,72 +103,55 @@ export default {
     async uploadFiles (files) {
       this.isLoading = true
 
-      if (this.isDirectUpload) {
+      return await Promise.all(
-        const { DirectUpload } = await import('@rails/activestorage')
+        Array.from(files).map(async (file) => {
+          const formData = new FormData()
 
-        const blobs = await Promise.all(
+          if (file.type === 'image/bmp') {
-          Array.from(files).map(async (file) => {
+            file = await this.convertBmpToPng(file)
-            const upload = new DirectUpload(
+          }
-              file,
-              '/direct_uploads',
-              this.$refs.input
-            )
 
-            return new Promise((resolve, reject) => {
+          formData.append('file', file)
-              upload.create((error, blob) => {
+          formData.append('submitter_slug', this.submitterSlug)
-                if (error) {
+          formData.append('name', 'attachments')
-                  console.error(error)
 
-                  return reject(error)
+          return fetch(this.baseUrl + '/api/attachments', {
-                } else {
+            method: 'POST',
-                  return resolve(blob)
+            body: formData
-                }
+          }).then(resp => resp.json()).then((data) => {
-              })
+            return data
-            }).catch((error) => {
-              console.error(error)
-            })
           })
-        )
+        })).then((result) => {
+        this.$emit('upload', result)
+      }).finally(() => {
+        this.isLoading = false
+      })
+    },
+    convertBmpToPng (bmpFile) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
 
-        return await Promise.all(
+        reader.onload = function (event) {
-          blobs.map((blob) => {
+          const img = new Image()
-            return fetch(this.baseUrl + '/api/attachments', {
-              method: 'POST',
-              body: JSON.stringify({
-                name: 'attachments',
-                blob_signed_id: blob.signed_id,
-                submitter_slug: this.submitterSlug
-              }),
-              headers: { 'Content-Type': 'application/json' }
-            }).then(resp => resp.json()).then((data) => {
-              return data
-            })
-          })).then((result) => {
-          this.$emit('upload', result)
-        }).finally(() => {
-          this.isLoading = false
-        })
-      } else {
-        return await Promise.all(
-          Array.from(files).map((file) => {
-            const formData = new FormData()
 
-            formData.append('file', file)
+          img.onload = function () {
-            formData.append('submitter_slug', this.submitterSlug)
+            const canvas = document.createElement('canvas')
-            formData.append('name', 'attachments')
+            const ctx = canvas.getContext('2d')
 
-            return fetch(this.baseUrl + '/api/attachments', {
+            canvas.width = img.width
-              method: 'POST',
+            canvas.height = img.height
-              body: formData
+            ctx.drawImage(img, 0, 0)
-            }).then(resp => resp.json()).then((data) => {
+            canvas.toBlob(function (blob) {
-              return data
+              const newFile = new File([blob], bmpFile.name.replace(/\.\w+$/, '.png'), { type: 'image/png' })
-            })
+              resolve(newFile)
-          })).then((result) => {
+            }, 'image/png')
-          this.$emit('upload', result)
+          }
-        }).finally(() => {
+
-          this.isLoading = false
+          img.src = event.target.result
-        })
+        }
-      }
+        reader.onerror = reject
+        reader.readAsDataURL(bmpFile)
+      })
     }
   }
 }

app/javascript/submission_form/form.vue

@@ -16,13 +16,17 @@
   <button
     v-if="!isFormVisible"
     id="expand_form_button"
-    class="btn btn-neutral flex text-white absolute rounded-none border-x-0 md:border md:rounded-full bottom-0 w-full md:mb-4 text-base"
+    class="btn btn-neutral flex text-white absolute bottom-0 w-full mb-3"
+    style="width: 96%; margin-left: 2%"
     @click.prevent="[isFormVisible = true, scrollIntoField(currentField)]"
   >
     <template v-if="['initials', 'signature'].includes(currentField.type)">
       <IconWritingSign stroke-width="1.5" />
       {{ t('sign_now') }}
     </template>
+    <template v-else-if="alwaysMinimize">
+      {{ t('next') }}
+    </template>
     <template v-else>
       {{ t('submit_form') }}
     </template>
@@ -208,6 +212,7 @@
                       :name="`values[${currentField.uuid}]`"
                       :value="option.value || `${t('option')} ${index + 1}`"
                       :required="currentField.required"
+                      @click="scrollIntoField(currentField)"
                     >
                     <span class="text-xl">
                       {{ option.value || `${t('option')} ${index + 1}` }}
@@ -305,7 +310,6 @@
             :key="currentField.uuid"
             v-model="values[currentField.uuid]"
             :field="currentField"
-            :is-direct-upload="isDirectUpload"
             :attachments-index="attachmentsIndex"
             :submitter-slug="submitterSlug"
             :show-field-names="showFieldNames"
@@ -317,11 +321,14 @@
             :key="currentField.uuid"
             v-model="values[currentField.uuid]"
             :field="currentField"
-            :previous-value="previousSignatureValueFor(currentField)"
+            :previous-value="previousSignatureValueFor(currentField) || previousSignatureValue"
-            :is-direct-upload="isDirectUpload"
             :with-typed-signature="withTypedSignature"
+            :remember-signature="rememberSignature"
             :attachments-index="attachmentsIndex"
-            :submitter-slug="submitterSlug"
+            :button-text="buttonText"
+            :with-disclosure="withDisclosure"
+            :with-qr-button="withQrButton"
+            :submitter="submitter"
             :show-field-names="showFieldNames"
             @attached="attachments.push($event)"
             @start="scrollIntoField(currentField)"
@@ -334,7 +341,6 @@
             v-model="values[currentField.uuid]"
             :field="currentField"
             :previous-value="previousInitialsValue"
-            :is-direct-upload="isDirectUpload"
             :attachments-index="attachmentsIndex"
             :show-field-names="showFieldNames"
             :submitter-slug="submitterSlug"
@@ -347,7 +353,6 @@
             v-else-if="currentField.type === 'file'"
             :key="currentField.uuid"
             v-model="values[currentField.uuid]"
-            :is-direct-upload="isDirectUpload"
             :field="currentField"
             :attachments-index="attachmentsIndex"
             :submitter-slug="submitterSlug"
@@ -359,7 +364,9 @@
             :key="currentField.uuid"
             v-model="values[currentField.uuid]"
             :field="currentField"
+            :locale="language?.toLowerCase() || browserLanguage"
             :show-field-names="showFieldNames"
+            :verified-value="phoneVerifiedValues[currentField.uuid]"
             :default-value="submitter.phone"
             :submitter-slug="submitterSlug"
             @focus="scrollIntoField(currentField)"
@@ -379,7 +386,7 @@
         </div>
         <div
           v-if="currentField.type !== 'payment' || submittedValues[currentField.uuid]"
-          class="mt-6 md:mt-8"
+          :class="currentField.type === 'signature' ? 'mt-2' : 'mt-6 md:mt-8'"
         >
           <button
             id="submit_form_button"
@@ -393,11 +400,8 @@
                 v-if="isSubmitting"
                 class="mr-1 animate-spin"
               />
-              <span v-if="stepFields.length === currentStep + 1">
+              <span>
-                {{ t('submit') }}
+                {{ buttonText }}
-              </span>
-              <span v-else>
-                {{ t('next') }}
               </span><span
                 v-if="isSubmitting"
                 class="w-6 flex justify-start mr-1"
@@ -417,6 +421,7 @@
         :is-demo="isDemo"
         :attribution="attribution"
         :completed-button="completedRedirectUrl ? {} : completedButton"
+        :completed-message="completedRedirectUrl ? {} : completedMessage"
         :with-send-copy-button="withSendCopyButton && !completedRedirectUrl"
         :with-download-button="withDownloadButton && !completedRedirectUrl"
         :with-confetti="withConfetti"
@@ -468,10 +473,14 @@ import i18n from './i18n'
 const isEmpty = (obj) => {
   if (obj == null) return true
 
-  if (Array.isArray(obj) || typeof obj === 'string') {
+  if (Array.isArray(obj)) {
     return obj.length === 0
   }
 
+  if (typeof obj === 'string') {
+    return obj.trim().length === 0
+  }
+
   if (typeof obj === 'object') {
     return Object.keys(obj).length === 0
   }
@@ -541,16 +550,46 @@ export default {
       required: false,
       default: null
     },
+    rememberSignature: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    minimize: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    withDisclosure: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    reuseSignature: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     withConfetti: {
       type: Boolean,
       required: false,
       default: false
     },
+    autoscrollFields: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     showFieldNames: {
       type: Boolean,
       required: false,
       default: true
     },
+    withQrButton: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     withTypedSignature: {
       type: Boolean,
       required: false,
@@ -576,10 +615,10 @@ export default {
       required: false,
       default: ''
     },
-    isDirectUpload: {
+    previousSignatureValue: {
-      type: Boolean,
+      type: String,
       required: false,
-      default: false
+      default: ''
     },
     allowToSkip: {
       type: Boolean,
@@ -596,6 +635,11 @@ export default {
       required: false,
       default: false
     },
+    dryRun: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     attribution: {
       type: Boolean,
       required: false,
@@ -611,6 +655,11 @@ export default {
       required: false,
       default: () => ({})
     },
+    authenticityToken: {
+      type: String,
+      required: false,
+      default: ''
+    },
     i18n: {
       type: Object,
       required: false,
@@ -635,6 +684,11 @@ export default {
       type: Object,
       required: false,
       default: () => ({})
+    },
+    completedMessage: {
+      type: Object,
+      required: false,
+      default: () => ({})
     }
   },
   data () {
@@ -643,14 +697,29 @@ export default {
       isFormVisible: this.expand !== false,
       showFillAllRequiredFields: false,
       currentStep: 0,
+      phoneVerifiedValues: {},
+      orientation: screen?.orientation?.type,
       isSubmitting: false,
       submittedValues: {},
       recalculateButtonDisabledKey: ''
     }
   },
   computed: {
+    isMobile () {
+      return /android|iphone|ipad/i.test(navigator.userAgent)
+    },
+    buttonText () {
+      if (this.alwaysMinimize || this.stepFields.length === this.currentStep + 1) {
+        return this.t('submit')
+      } else {
+        return this.t('next')
+      }
+    },
+    alwaysMinimize () {
+      return this.minimize || (this.orientation?.includes('landscape') && this.isMobile && parseInt(window.innerHeight) < 550)
+    },
     currentStepFields () {
-      return this.stepFields[this.currentStep]
+      return this.stepFields[this.currentStep] || []
     },
     browserLanguage () {
       return (navigator.language || navigator.userLanguage || 'en').split('-')[0]
@@ -658,9 +727,6 @@ export default {
     queryParams () {
       return new URLSearchParams(window.location.search)
     },
-    authenticityToken () {
-      return document.querySelector('meta[name="csrf-token"]')?.content
-    },
     submitterSlug () {
       return this.submitter.slug
     },
@@ -672,9 +738,13 @@ export default {
       }, {})
     },
     previousInitialsValue () {
-      const initialsField = [...this.fields].reverse().find((field) => field.type === 'initials' && !!this.values[field.uuid])
+      if (this.reuseSignature !== false) {
+        const initialsField = [...this.fields].reverse().find((field) => field.type === 'initials' && !!this.values[field.uuid])
 
-      return this.values[initialsField?.uuid]
+        return this.values[initialsField?.uuid]
+      } else {
+        return null
+      }
     },
     isAnonymousChecboxes () {
       return this.currentField.type === 'checkbox' && this.currentStepFields.every((e) => !e.name && !e.required) && this.currentStepFields.length > 4
@@ -724,11 +794,21 @@ export default {
   watch: {
     expand (value) {
       this.isFormVisible = value
+    },
+    currentStepFields (value) {
+      if (isEmpty(value) && this.currentStep > 0) {
+        this.currentStep -= 1
+      }
     }
   },
+  beforeUnmount () {
+    screen?.orientation?.removeEventListener('change', this.onOrientationChange)
+  },
   mounted () {
     this.submittedValues = JSON.parse(JSON.stringify(this.values))
 
+    screen?.orientation.addEventListener('change', this.onOrientationChange)
+
     this.fields.forEach((field) => {
       if (field.default_value && !field.readonly) {
         this.values[field.uuid] ||= field.default_value
@@ -762,6 +842,10 @@ export default {
       this.isFormVisible = false
     }
 
+    if (this.alwaysMinimize) {
+      this.isFormVisible = false
+    }
+
     if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
       this.$nextTick(() => {
         const root = this.$root.$el.parentNode.getRootNode()
@@ -791,6 +875,9 @@ export default {
     t (key) {
       return this.i18n[key] || i18n[this.language?.toLowerCase()]?.[key] || i18n[this.browserLanguage]?.[key] || i18n.en[key] || key
     },
+    onOrientationChange (event) {
+      this.orientation = event.target.type
+    },
     checkFieldConditions (field) {
       if (field.conditions?.length) {
         return field.conditions.reduce((acc, c) => {
@@ -885,11 +972,15 @@ export default {
       })
     },
     previousSignatureValueFor (field) {
-      const signatureField = [...this.fields].reverse().find((f) =>
+      if (this.reuseSignature !== false) {
-        f.type === 'signature' && field.preferences?.format === f.preferences?.format && !!this.values[f.uuid]
+        const signatureField = [...this.fields].reverse().find((f) =>
-      )
+          f.type === 'signature' && field.preferences?.format === f.preferences?.format && !!this.values[f.uuid]
+        )
 
-      return this.values[signatureField?.uuid]
+        return this.values[signatureField?.uuid]
+      } else {
+        return null
+      }
     },
     goToStep (step, scrollToArea = false, clickUpload = false) {
       this.currentStep = this.stepFields.indexOf(step)
@@ -898,19 +989,22 @@ export default {
       this.$nextTick(() => {
         this.recalculateButtonDisabledKey = Math.random()
 
-        if (scrollToArea) {
+        if (!this.isCompleted) {
-          this.scrollIntoField(step[0])
+          if (scrollToArea) {
-        }
+            this.scrollIntoField(step[0])
 
-        this.$refs.form.querySelector('input[type="date"], input[type="number"], input[type="text"], select')?.focus()
+            this.$refs.form.querySelector('input[type="date"], input[type="number"], input[type="text"], select')?.focus()
+          }
 
-        if (clickUpload && !this.values[this.currentField.uuid] && ['file', 'image'].includes(this.currentField.type)) {
+          if (clickUpload && !this.values[this.currentField.uuid] && ['file', 'image'].includes(this.currentField.type)) {
-          this.$refs.form.querySelector('input[type="file"]')?.click()
+            this.$refs.form.querySelector('input[type="file"]')?.click()
+          }
         }
       })
     },
     saveStep (formData) {
       const currentFieldUuids = this.currentStepFields.map((f) => f.uuid)
+      const currentFieldType = this.currentField.type
 
       if (this.isCompleted) {
         return Promise.resolve({})
@@ -922,6 +1016,10 @@ export default {
           if (response.status === 200) {
             currentFieldUuids.forEach((fieldUuid) => {
               this.submittedValues[fieldUuid] = this.values[fieldUuid]
+
+              if (currentFieldType === 'phone') {
+                this.phoneVerifiedValues[fieldUuid] = this.values[fieldUuid]
+              }
             })
           }
 
@@ -956,11 +1054,19 @@ export default {
         const formData = new FormData(this.$refs.form)
         const isLastStep = this.currentStep === this.stepFields.length - 1
 
-        if (isLastStep && !emptyRequiredField) {
+        if (isLastStep && !emptyRequiredField && !this.dryRun) {
           formData.append('completed', 'true')
         }
 
-        await this.saveStep(formData).then(async (response) => {
+        let saveStepRequest
+
+        if (!isLastStep && this.phoneVerifiedValues[this.currentField.uuid] && this.phoneVerifiedValues[this.currentField.uuid] === this.values[this.currentField.uuid]) {
+          saveStepRequest = Promise.resolve({})
+        } else {
+          saveStepRequest = this.saveStep(formData)
+        }
+
+        await saveStepRequest.then(async (response) => {
           if (response.status === 422 || response.status === 500) {
             const data = await response.json()
 
@@ -976,7 +1082,11 @@ export default {
           const nextStep = (isLastStep && emptyRequiredField) || this.stepFields[this.currentStep + 1]
 
           if (nextStep) {
-            this.goToStep(nextStep, true)
+            if (this.alwaysMinimize) {
+              this.isFormVisible = false
+            }
+
+            this.goToStep(nextStep, this.autoscrollFields)
 
             if (emptyRequiredField === nextStep) {
               this.showFillAllRequiredFields = true

app/javascript/submission_form/i18n.js

@@ -1,7 +1,12 @@
 const en = {
   text: 'Text',
+  by_clicking_you_agree_to_the: 'By clicking "{button}", you agree to the',
+  electronic_signature_disclosure: 'Electronic Signature Disclosure',
+  esignature_disclosure: 'eSignature Disclosure',
   signature: 'Signature',
   initials: 'Initials',
+  drawn_signature_on_a_touchscreen_device: 'Drawn signature on a touchscreen device',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scan the QR code with the camera app to open the form on mobile and draw your signature',
   date: 'Date',
   number: 'Number',
   image: 'Image',
@@ -24,7 +29,7 @@ const en = {
   appears_on: 'Appears on',
   page: 'Page',
   select_your_option: 'Select your option',
-  complete_hightlighted_checkboxes_and_click: 'Complete hightlighted checkboxes and click',
+  complete_hightlighted_checkboxes_and_click: 'Complete highlighted checkboxes and click',
   submit: 'submit',
   next: 'next',
   click_to_upload: 'Click to upload',
@@ -42,7 +47,7 @@ const en = {
   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 internatioanl format: +1xxx',
+  use_international_format: 'Use international format: +1xxx',
   six_digits_code: '6-digit code',
   change_phone_number: 'Change phone number',
   sending: 'Sending...',
@@ -65,6 +70,11 @@ const en = {
 }
 
 const es = {
+  drawn_signature_on_a_touchscreen_device: 'Firma dibujada en un dispositivo con pantalla táctil',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Escanea el código QR con la aplicación de la cámara para abrir el formulario en el móvil y dibujar tu firma',
+  by_clicking_you_agree_to_the: 'Al hacer clic en "{button}", usted acepta el',
+  electronic_signature_disclosure: 'Divulgación de Firma Electrónica',
+  esignature_disclosure: 'Divulgación de eFirma',
   minimize: 'Minimizar',
   text: 'Texto',
   signature: 'Firma',
@@ -130,6 +140,11 @@ const es = {
 }
 
 const it = {
+  drawn_signature_on_a_touchscreen_device: 'Firma disegnata su un dispositivo con schermo tattile',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scansiona il codice QR con l\'app della fotocamera per aprire il modulo sul cellulare e disegnare la tua firma',
+  by_clicking_you_agree_to_the: 'Cliccando su "{button}", accetti il',
+  electronic_signature_disclosure: 'Divulgazione della Firma Elettronica',
+  esignature_disclosure: 'Divulgazione della eFirma',
   minimize: 'Minimizza',
   text: 'Testo',
   signature: 'Firma',
@@ -195,6 +210,11 @@ const it = {
 }
 
 const de = {
+  drawn_signature_on_a_touchscreen_device: 'Gezeichnete Unterschrift auf einem Touchscreen-Gerät',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scannen Sie den QR-Code mit der Kamera-App, um das Formular auf dem Handy zu öffnen und Ihre Unterschrift zu zeichnen',
+  by_clicking_you_agree_to_the: 'Durch Klicken auf "{button}" stimmen Sie zu, dass Sie die',
+  electronic_signature_disclosure: 'Elektronische Unterschriftenoffenlegung',
+  esignature_disclosure: 'eSignatur Offenlegung',
   minimize: 'Minimieren',
   text: 'Text',
   signature: 'Unterschrift',
@@ -260,6 +280,11 @@ const de = {
 }
 
 const fr = {
+  drawn_signature_on_a_touchscreen_device: 'Signature dessinée sur un appareil à écran tactile',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scannez le code QR avec l\'application de l\'appareil photo pour ouvrir le formulaire sur mobile et dessiner votre signature',
+  by_clicking_you_agree_to_the: 'En cliquant sur "{button}", vous acceptez la',
+  electronic_signature_disclosure: 'Divulgation de Signature Électronique',
+  esignature_disclosure: 'Divulgation de la eSignature',
   minimize: 'Réduire',
   text: 'Texte',
   signature: 'Signature',
@@ -325,6 +350,11 @@ const fr = {
 }
 
 const pl = {
+  drawn_signature_on_a_touchscreen_device: 'Podpis odręczny na urządzeniu z ekranem dotykowym',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Zeskanuj kod QR za pomocą aplikacji aparatu, aby otworzyć formularz na telefonie i narysować swój podpis',
+  by_clicking_you_agree_to_the: 'Klikając na "{button}", zgadzasz się na',
+  electronic_signature_disclosure: 'Ujawnienie Elektronicznej Sygnatury',
+  esignature_disclosure: 'Ujawnienie ePodpisu',
   minimize: 'Zminimalizuj',
   text: 'Tekst',
   signature: 'Podpis',
@@ -390,6 +420,11 @@ const pl = {
 }
 
 const uk = {
+  drawn_signature_on_a_touchscreen_device: 'Підпис на сенсорному пристрої',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Скануйте QR-код за допомогою програми камери, щоб відкрити форму на мобільному пристрої та намалювати свій підпис',
+  by_clicking_you_agree_to_the: 'Натиснувши на "{button}", ви погоджуєтеся з',
+  electronic_signature_disclosure: 'Розголошення Електронного Підпису',
+  esignature_disclosure: 'Розголошення еПідпису',
   minimize: 'Зменшити',
   text: 'Текст',
   signature: 'Підпис',
@@ -455,6 +490,11 @@ const uk = {
 }
 
 const cs = {
+  drawn_signature_on_a_touchscreen_device: 'Namalovaný podpis na dotykovém zařízení',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Naskenujte QR kód pomocí aplikace fotoaparátu, abyste otevřeli formulář na mobilním zařízení a nakreslili svůj podpis',
+  by_clicking_you_agree_to_the: 'Kliknutím na "{button}" souhlasíte s',
+  electronic_signature_disclosure: 'Zveřejněním Elektronického Podpisu',
+  esignature_disclosure: 'Zveřejnění ePodpisu',
   minimize: 'Minimalizovat',
   text: 'Text',
   signature: 'Podpis',
@@ -520,6 +560,11 @@ const cs = {
 }
 
 const pt = {
+  drawn_signature_on_a_touchscreen_device: 'Assinatura desenhada em um dispositivo com tela sensível ao toque',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Escaneie o código QR com o aplicativo da câmera para abrir o formulário no celular e desenhar sua assinatura',
+  by_clicking_you_agree_to_the: 'Ao clicar em "{button}", você concorda com o',
+  electronic_signature_disclosure: 'Divulgação de Assinatura Eletrônica',
+  esignature_disclosure: 'Divulgação da eAssinatura',
   minimize: 'Minimizar',
   text: 'Texto',
   signature: 'Assinatura',
@@ -585,6 +630,11 @@ const pt = {
 }
 
 const he = {
+  drawn_signature_on_a_touchscreen_device: 'חתימה שנוצרה במכשיר עם מסך מגע',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'סרוק את קוד ה-QR באמצעות אפליקציית המצלמה כדי לפתוח את הטופס במובייל ולצייר את החתימה שלך',
+  by_clicking_you_agree_to_the: 'על ידי לחיצה על "{button}", אתה מסכים ל',
+  electronic_signature_disclosure: 'חשיפת חתימה אלקטרונית',
+  esignature_disclosure: 'חשיפת ה-eחתימה',
   minimize: 'לקטן',
   text: 'טקסט',
   signature: 'חתימה',
@@ -651,6 +701,11 @@ const he = {
 }
 
 const nl = {
+  drawn_signature_on_a_touchscreen_device: 'Getekende handtekening op een apparaat met een touchscreen',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scan de QR-code met de camera-app om het formulier op mobiel te openen en uw handtekening te tekenen',
+  by_clicking_you_agree_to_the: 'Door op "{button}" te klikken, gaat u akkoord met de',
+  electronic_signature_disclosure: 'Openbaarmaking van Elektronische Handtekening',
+  esignature_disclosure: 'Openbaarmaking van eHandtekening',
   minimize: 'Minimaliseren',
   text: 'Tekst',
   signature: 'Handtekening',
@@ -717,6 +772,11 @@ const nl = {
 }
 
 const ar = {
+  drawn_signature_on_a_touchscreen_device: 'توقيع مرسوم على جهاز بشاشة تعمل باللمس',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'امسح رمز الاستجابة السريعة باستخدام تطبيق الكاميرا لفتح النموذج على الهاتف المحمول ورسم توقيعك',
+  by_clicking_you_agree_to_the: 'بالنقر فوق "{button}"، أنت توافق على',
+  electronic_signature_disclosure: 'كشف التوقيع الإلكتروني',
+  esignature_disclosure: 'كشف التوقيع الإلكتروني',
   text: 'نص',
   signature: 'توقيع',
   initials: 'الاختصارات',
@@ -782,6 +842,77 @@ const ar = {
   files: 'الملفات'
 }
 
-const i18n = { en, es, it, de, fr, pl, uk, cs, pt, he, nl, ar }
+const ko = {
+  drawn_signature_on_a_touchscreen_device: '터치스크린 장치에서 그린 서명',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: '카메라 앱으로 QR 코드를 스캔하여 모바일에서 양식을 열고 서명을 그리세요',
+  by_clicking_you_agree_to_the: '"{button}"를 클릭함으로써, 다음에 동의하게 됩니다',
+  electronic_signature_disclosure: '전자 서명 공개',
+  esignature_disclosure: '전자 서명 공개',
+  text: '텍스트',
+  signature: '서명',
+  initials: '이니셜',
+  date: '날짜',
+  number: '숫자',
+  image: '이미지',
+  take_photo: '사진 찍기',
+  file: '파일',
+  select: '선택',
+  checkbox: '체크박스',
+  multiple: '다중',
+  radio: '라디오',
+  cells: '셀',
+  stamp: '스탬프',
+  minimize: '최소화',
+  payment: '결제',
+  phone: '전화',
+  submit_form: '양식 제출',
+  sign_now: '지금 서명',
+  type_here_: '여기에 입력...',
+  optional: '선택 사항',
+  option: '옵션',
+  appears_on: '다음에 나타납니다',
+  page: '페이지',
+  select_your_option: '옵션 선택',
+  complete_hightlighted_checkboxes_and_click: '강조된 체크박스를 완료하고 클릭',
+  submit: '제출',
+  next: '다음',
+  click_to_upload: '업로드하려면 클릭',
+  or_drag_and_drop_files: '또는 파일을 드래그하여 놓으십시오',
+  send_copy_via_email: '이메일로 사본 보내기',
+  download: '다운로드',
+  clear: '지우기',
+  redraw: '다시 그리기',
+  draw_initials: '이니셜 그리기',
+  type_signature_here: '여기에 서명 입력',
+  type_initial_here: '여기에 이니셜 입력',
+  form_has_been_completed: '양식이 완료되었습니다!',
+  create_a_free_account: '무료 계정 생성',
+  signed_with: '다음으로 서명:',
+  please_check_the_box_to_continue: '계속하려면 확인란을 선택하십시오',
+  open_source_documents_software: '오픈 소스 문서 소프트웨어',
+  verified_phone_number: '전화번호 확인됨',
+  use_international_format: '국제 포맷 사용: +1xxx',
+  six_digits_code: '6자리 코드',
+  change_phone_number: '전화번호 변경',
+  sending: '전송 중...',
+  resend_code: '코드 다시 보내기',
+  verification_code_has_been_resent: '인증 코드가 SMS로 다시 전송되었습니다',
+  please_fill_all_required_fields: '필수 필드를 모두 입력하십시오',
+  set_today: '오늘 날짜로 설정',
+  toggle_multiline_text: '다중 텍스트 전환',
+  draw_signature: '서명 그리기',
+  type_initial: '이니셜 입력',
+  draw: '그리기',
+  type: '입력',
+  type_text: '텍스트 입력',
+  email_has_been_sent: '이메일이 전송되었습니다',
+  processing: '처리 중',
+  pay_with_strip: '스트라이프로 결제',
+  reupload: '다시 업로드',
+  upload: '업로드',
+  files: '파일'
+}
+
+const i18n = { en, es, it, de, fr, pl, uk, cs, pt, he, nl, ar, ko }
 
 export default i18n

app/javascript/submission_form/image_step.vue

@@ -38,7 +38,6 @@
       :message="`${t('upload')} ${field.name || t('image')}${field.required ? '' : ` (${t('optional')})`}`"
       :submitter-slug="submitterSlug"
       :accept="'image/*'"
-      :is-direct-upload="isDirectUpload"
       @upload="onImageUpload"
     />
   </div>
@@ -62,11 +61,6 @@ export default {
       type: Object,
       required: true
     },
-    isDirectUpload: {
-      type: Boolean,
-      required: true,
-      default: false
-    },
     showFieldNames: {
       type: Boolean,
       required: false,

app/javascript/submission_form/initials_step.vue

@@ -152,11 +152,6 @@ export default {
       required: false,
       default: true
     },
-    isDirectUpload: {
-      type: Boolean,
-      required: true,
-      default: false
-    },
     attachmentsIndex: {
       type: Object,
       required: false,
@@ -194,18 +189,12 @@ export default {
     this.$nextTick(() => {
       if (this.$refs.canvas) {
         this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth * scale
-        this.$refs.canvas.height = (this.$refs.canvas.parentNode.clientWidth / 3) * scale
+        this.$refs.canvas.height = (this.$refs.canvas.parentNode.clientWidth / 4.5) * scale
 
         this.$refs.canvas.getContext('2d').scale(scale, scale)
       }
-
-      this.$refs.textInput?.focus()
     })
 
-    if (this.isDirectUpload) {
-      import('@rails/activestorage')
-    }
-
     if (this.$refs.canvas) {
       this.pad = new SignaturePad(this.$refs.canvas)
 
@@ -219,7 +208,7 @@ export default {
         entries.forEach(entry => {
           if (entry.isIntersecting) {
             this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth * scale
-            this.$refs.canvas.height = (this.$refs.canvas.parentNode.clientWidth / 3) * scale
+            this.$refs.canvas.height = (this.$refs.canvas.parentNode.clientWidth / 4.5) * scale
 
             this.$refs.canvas.getContext('2d').scale(scale, scale)
 
@@ -293,45 +282,21 @@ export default {
         cropCanvasAndExportToPNG(this.$refs.canvas).then(async (blob) => {
           const file = new File([blob], 'initials.png', { type: 'image/png' })
 
-          if (this.isDirectUpload) {
+          const formData = new FormData()
-            const { DirectUpload } = await import('@rails/activestorage')
 
-            new DirectUpload(
+          formData.append('file', file)
-              file,
+          formData.append('submitter_slug', this.submitterSlug)
-              '/direct_uploads'
+          formData.append('name', 'attachments')
-            ).create((_error, data) => {
-              fetch(this.baseUrl + '/api/attachments', {
-                method: 'POST',
-                body: JSON.stringify({
-                  submitter_slug: this.submitterSlug,
-                  blob_signed_id: data.signed_id,
-                  name: 'attachments'
-                }),
-                headers: { 'Content-Type': 'application/json' }
-              }).then((resp) => resp.json()).then((attachment) => {
-                this.$emit('update:model-value', attachment.uuid)
-                this.$emit('attached', attachment)
 
-                return resolve(attachment)
+          return fetch(this.baseUrl + '/api/attachments', {
-              })
+            method: 'POST',
-            })
+            body: formData
-          } else {
+          }).then((resp) => resp.json()).then((attachment) => {
-            const formData = new FormData()
+            this.$emit('attached', attachment)
+            this.$emit('update:model-value', attachment.uuid)
 
-            formData.append('file', file)
+            return resolve(attachment)
-            formData.append('submitter_slug', this.submitterSlug)
+          })
-            formData.append('name', 'attachments')
-
-            return fetch(this.baseUrl + '/api/attachments', {
-              method: 'POST',
-              body: formData
-            }).then((resp) => resp.json()).then((attachment) => {
-              this.$emit('attached', attachment)
-              this.$emit('update:model-value', attachment.uuid)
-
-              return resolve(attachment)
-            })
-          }
         })
       })
     }

app/javascript/submission_form/markdown_content.vue

@@ -6,7 +6,7 @@
     >
       <a
         v-if="item.startsWith('<a') && item.endsWith('</a>')"
-        :href="extractAttr(item, 'href')"
+        :href="sanitizeHref(extractAttr(item, 'href'))"
         rel="noopener noreferrer nofollow"
         :class="extractAttr(item, 'class') || 'link'"
         target="_blank"
@@ -55,6 +55,11 @@ export default {
     }
   },
   methods: {
+    sanitizeHref (href) {
+      if (href && href.trim().match(/^((?:https?:\/\/)|\/)/)) {
+        return href.replace(/javascript:/g, '')
+      }
+    },
     extractAttr (text, attr) {
       if (text.includes(attr)) {
         return text.split(attr).pop().split('"')[1]

app/javascript/submission_form/multi_select_step.vue

@@ -45,6 +45,7 @@
         <label
           :for="option.uuid"
           class="flex items-center space-x-3"
+          @click="scrollIntoField(field)"
         >
           <input
             :id="option.uuid"

app/javascript/submission_form/number_step.vue

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

app/javascript/submission_form/payment_step.vue

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

app/javascript/submission_form/phone_step.vue

@@ -11,7 +11,9 @@
       />
       <template v-else>
         {{ showFieldNames && field.name ? field.name : t('verified_phone_number') }}
-        <template v-if="!field.required">({{ t('optional') }})</template>
+        <template v-if="!field.required">
+          ({{ t('optional') }})
+        </template>
       </template>
     </label>
     <div
@@ -68,14 +70,13 @@
         class="base-input !text-2xl w-full"
         autocomplete="tel"
         pattern="^\+[0-9\s\-]+$"
-        :oninvalid="`this.value ? this.setCustomValidity('${t('use_international_format')}...') : ''`"
-        oninput="this.setCustomValidity('')"
         type="tel"
         inputmode="tel"
         :required="field.required"
         placeholder="+1 234 567-8900"
         :name="`values[${field.uuid}]`"
-        @input="$emit('update:model-value', $event.target.value)"
+        @invalid="$event.target.value ? $event.target.setCustomValidity(`${t('use_international_format')}...`) : ''"
+        @input="[$event.target.setCustomValidity(''), $emit('update:model-value', $event.target.value)]"
         @focus="$emit('focus')"
       >
     </div>
@@ -109,10 +110,20 @@ export default {
       type: Object,
       required: true
     },
+    verifiedValue: {
+      type: String,
+      required: false,
+      default: ''
+    },
     submitterSlug: {
       type: String,
       required: true
     },
+    locale: {
+      type: String,
+      required: false,
+      default: 'en'
+    },
     showFieldNames: {
       type: Boolean,
       required: false,
@@ -159,12 +170,17 @@ export default {
         method: 'POST',
         body: JSON.stringify({
           submitter_slug: this.submitterSlug,
+          locale: this.locale,
           phone: this.$refs.phone.value
         }),
         headers: { 'Content-Type': 'application/json' }
       })
     },
     async submit () {
+      if (this.verifiedValue && this.verifiedValue === this.modelValue) {
+        return Promise.resolve({})
+      }
+
       if (!this.$refs.phone.value.toString().startsWith('+')) {
         alert(this.t('use_international_format'))
 

app/javascript/submission_form/signature_step.vue

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

app/javascript/submission_form/text_step.vue

@@ -10,7 +10,9 @@
      :string="field.title"
    />
     <template v-else>{{ field.name }}</template>
-    <template v-if="!field.required">({{ t('optional') }})</template>
+    <template v-if="!field.required">
+      ({{ t('optional') }})
+    </template>
   </label>
   <div
     v-else
@@ -35,11 +37,11 @@
       :class="{ '!pr-11 -mr-10': !field.validation?.pattern }"
       :required="field.required"
       :pattern="field.validation?.pattern"
-      :oninvalid="field.validation?.message ? `this.setCustomValidity(${JSON.stringify(field.validation.message)})` : ''"
-      :oninput="field.validation?.message ? `this.setCustomValidity('')` : ''"
       :placeholder="`${t('type_here_')}${field.required ? '' : ` (${t('optional')})`}`"
       type="text"
       :name="`values[${field.uuid}]`"
+      @invalid="field.validation?.message ? $event.target.setCustomValidity(field.validation.message) : ''"
+      @input="field.validation?.message ? $event.target.setCustomValidity('') : ''"
       @focus="$emit('focus')"
     >
     <textarea

app/javascript/template_builder/area.vue

@@ -3,7 +3,7 @@
     class="absolute overflow-visible group"
     :style="positionStyle"
     @pointerdown.stop
-    @mousedown.stop="startDrag"
+    @mousedown="startMouseMove"
     @touchstart="startTouchDrag"
   >
     <div
@@ -42,7 +42,7 @@
         v-model="field.submitter_uuid"
         class="border-r"
         :compact="true"
-        :editable="editable && !defaultField"
+        :editable="editable && (!defaultField || defaultField.role !== submitter?.name)"
         :allow-add-new="!defaultSubmitters.length"
         :menu-classes="'dropdown-content bg-white menu menu-xs p-2 shadow rounded-box w-52 rounded-t-none -left-[1px] mt-[1px]'"
         :submitters="template.submitters"
@@ -65,15 +65,17 @@
         dir="auto"
         class="pr-1 cursor-text outline-none block"
         style="min-width: 2px"
+        @paste.prevent="onPaste"
         @keydown.enter.prevent="onNameEnter"
         @focus="onNameFocus"
         @blur="onNameBlur"
-      >{{ optionIndexText }} {{ field.name || defaultName }}</span>
+      >{{ optionIndexText }} {{ (defaultField ? (field.title || field.name) : field.name) || defaultName }}</span>
       <div
-        v-if="isNameFocus && !['checkbox', 'phone'].includes(field.type)"
+        v-if="isSettingsFocus || isContenteditable || (isNameFocus && !['checkbox', 'phone'].includes(field.type))"
         class="flex items-center ml-1.5"
       >
         <input
+          v-if="!isContenteditable"
           :id="`required-checkbox-${field.uuid}`"
           v-model="field.required"
           type="checkbox"
@@ -81,11 +83,69 @@
           @mousedown.prevent
         >
         <label
+          v-if="!isContenteditable"
           :for="`required-checkbox-${field.uuid}`"
           class="label text-xs"
           @click.prevent="field.required = !field.required"
           @mousedown.prevent
         >{{ t('required') }}</label>
+        <input
+          v-if="isContenteditable"
+          :id="`readonly-checkbox-${field.uuid}`"
+          type="checkbox"
+          class="checkbox checkbox-xs no-animation rounded"
+          :checked="!(field.readonly ?? true)"
+          @change="field.readonly = !(field.readonly ?? true)"
+          @mousedown.prevent
+        >
+        <label
+          v-if="isContenteditable"
+          :for="`readonly-checkbox-${field.uuid}`"
+          class="label text-xs"
+          @click.prevent="field.readonly = !(field.readonly ?? true)"
+          @mousedown.prevent
+        >{{ t('editable') }}</label>
+        <span
+          v-if="field.type !== 'payment' && !isContenteditable"
+          class="dropdown dropdown-end"
+          @mouseenter="renderDropdown = true"
+          @touchstart="renderDropdown = true"
+        >
+          <label
+            ref="settingsButton"
+            tabindex="0"
+            :title="t('settings')"
+            class="cursor-pointer flex items-center"
+            style="height: 25px"
+            @focus="isSettingsFocus = true"
+            @blur="maybeBlurSettings"
+          >
+            <IconDotsVertical class="w-5 h-5" />
+          </label>
+          <ul
+            v-if="renderDropdown"
+            ref="settingsDropdown"
+            tabindex="0"
+            class="dropdown-content menu menu-xs px-2 pb-2 pt-1 shadow rounded-box w-52 z-10 rounded-t-none"
+            :style="{ backgroundColor: 'white' }"
+            @dragstart.prevent.stop
+            @click="closeDropdown"
+            @focusout="maybeBlurSettings"
+          >
+            <FieldSettings
+              :field="field"
+              :default-field="defaultField"
+              :editable="editable"
+              :background-color="'white'"
+              :with-required="false"
+              :with-areas="false"
+              @click-formula="isShowFormulaModal = true"
+              @click-description="isShowDescriptionModal = true"
+              @click-condition="isShowConditionsModal = true"
+              @scroll-to="[selectedAreaRef.value = $event, $emit('scroll-to', $event)]"
+            />
+          </ul>
+        </span>
       </div>
       <button
         v-else-if="editable"
@@ -99,7 +159,7 @@
     <div
       class="flex items-center h-full w-full"
       dir="auto"
-      :class="[bgColors[submitterIndex], field?.default_value ? '' : 'justify-center']"
+      :class="[isContenteditable ? 'bg-opacity-50' : 'bg-opacity-80', bgColors[submitterIndex], isDefaultValuePresent || isContenteditable ? (alignClasses[field.preferences?.align] || '') : 'justify-center']"
     >
       <span
         v-if="field"
@@ -107,7 +167,7 @@
         :class="{'w-full h-full': field.type == 'checkbox'}"
       >
         <div
-          v-if="field?.default_value"
+          v-if="isDefaultValuePresent || isContenteditable"
           :class="{ 'w-full h-full': field.type == 'checkbox', 'text-[1.5vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars }"
         >
           <div
@@ -121,8 +181,19 @@
               :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
             />
             <span
-              v-else
+              v-else-if="field.type === 'number' && !isContenteditable"
               class="whitespace-pre-wrap"
+            >{{ formatNumber(field.default_value, field.preferences?.format) }}</span>
+            <span
+              v-else
+              ref="defaultValue"
+              :contenteditable="isContenteditable"
+              class="whitespace-pre-wrap outline-none empty:before:content-[attr(placeholder)] before:text-gray-400"
+              :class="{ 'cursor-text': isContenteditable }"
+              :placeholder="t('type_value')"
+              @blur="onDefaultValueBlur"
+              @paste.prevent="onPaste"
+              @keydown.enter.prevent="onDefaultValueEnter"
             >{{ field.default_value }}</span>
           </div>
         </div>
@@ -136,8 +207,11 @@
       </span>
     </div>
     <div
+      v-if="!isContenteditable"
       ref="touchTarget"
-      class="absolute top-0 bottom-0 right-0 left-0 cursor-pointer"
+      class="absolute top-0 bottom-0 right-0 left-0"
+      :class="isDragged ? 'cursor-grab' : 'cursor-pointer'"
+      @dblclick="maybeFocusDefaultValue"
     />
     <span
       v-if="field?.type && editable"
@@ -145,6 +219,38 @@
       @mousedown.stop="startResize"
       @touchstart="startTouchResize"
     />
+    <Teleport
+      v-if="isShowFormulaModal"
+      :to="modalContainerEl"
+    >
+      <FormulaModal
+        :field="field"
+        :editable="editable && !defaultField"
+        :build-default-name="buildDefaultName"
+        @close="isShowFormulaModal = false"
+      />
+    </Teleport>
+    <Teleport
+      v-if="isShowConditionsModal"
+      :to="modalContainerEl"
+    >
+      <ConditionsModal
+        :field="field"
+        :build-default-name="buildDefaultName"
+        @close="isShowConditionsModal = false"
+      />
+    </Teleport>
+    <Teleport
+      v-if="isShowDescriptionModal"
+      :to="modalContainerEl"
+    >
+      <DescriptionModal
+        :field="field"
+        :editable="editable && !defaultField"
+        :build-default-name="buildDefaultName"
+        @close="isShowDescriptionModal = false"
+      />
+    </Teleport>
   </div>
 </template>
 
@@ -152,7 +258,11 @@
 import FieldSubmitter from './field_submitter'
 import FieldType from './field_type'
 import Field from './field'
-import { IconX, IconCheck } from '@tabler/icons-vue'
+import FieldSettings from './field_settings'
+import FormulaModal from './formula_modal'
+import ConditionsModal from './conditions_modal'
+import DescriptionModal from './description_modal'
+import { IconX, IconCheck, IconDotsVertical } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 
 export default {
@@ -160,6 +270,11 @@ export default {
   components: {
     FieldType,
     IconCheck,
+    FieldSettings,
+    FormulaModal,
+    IconDotsVertical,
+    DescriptionModal,
+    ConditionsModal,
     FieldSubmitter,
     IconX
   },
@@ -195,11 +310,17 @@ export default {
       default: null
     }
   },
-  emits: ['start-resize', 'stop-resize', 'start-drag', 'stop-drag', 'remove'],
+  emits: ['start-resize', 'stop-resize', 'start-drag', 'stop-drag', 'remove', 'scroll-to'],
   data () {
     return {
+      isShowFormulaModal: false,
+      isShowConditionsModal: false,
+      isContenteditable: false,
+      isSettingsFocus: false,
+      isShowDescriptionModal: false,
       isResize: false,
       isDragged: false,
+      renderDropdown: false,
       isNameFocus: false,
       textOverflowChars: 0,
       dragFrom: { x: 0, y: 0 }
@@ -208,9 +329,22 @@ export default {
   computed: {
     fieldNames: FieldType.computed.fieldNames,
     fieldIcons: FieldType.computed.fieldIcons,
+    isDefaultValuePresent () {
+      return this.field?.default_value || this.field?.default_value === 0
+    },
+    modalContainerEl () {
+      return this.$el.getRootNode().querySelector('#docuseal_modal_container')
+    },
     defaultName () {
       return this.buildDefaultName(this.field, this.template.fields)
     },
+    alignClasses () {
+      return {
+        center: 'justify-center',
+        left: 'justify-start',
+        right: 'justify-end'
+      }
+    },
     optionIndexText () {
       if (this.area.option_uuid && this.field.options) {
         return `${this.field.options.findIndex((o) => o.uuid === this.area.option_uuid) + 1}.`
@@ -263,26 +397,26 @@ export default {
     },
     bgColors () {
       return [
-        'bg-red-100/80',
+        'bg-red-100',
-        'bg-sky-100/80',
+        'bg-sky-100',
-        'bg-emerald-100/80',
+        'bg-emerald-100',
-        'bg-yellow-100/80',
+        'bg-yellow-100',
-        'bg-purple-100/80',
+        'bg-purple-100',
-        'bg-pink-100/80',
+        'bg-pink-100',
-        'bg-cyan-100/80',
+        'bg-cyan-100',
-        'bg-orange-100/80',
+        'bg-orange-100',
-        'bg-lime-100/80',
+        'bg-lime-100',
-        'bg-indigo-100/80',
+        'bg-indigo-100',
-        'bg-red-100/80',
+        'bg-red-100',
-        'bg-sky-100/80',
+        'bg-sky-100',
-        'bg-emerald-100/80',
+        'bg-emerald-100',
-        'bg-yellow-100/80',
+        'bg-yellow-100',
-        'bg-purple-100/80',
+        'bg-purple-100',
-        'bg-pink-100/80',
+        'bg-pink-100',
-        'bg-cyan-100/80',
+        'bg-cyan-100',
-        'bg-orange-100/80',
+        'bg-orange-100',
-        'bg-lime-100/80',
+        'bg-lime-100',
-        'bg-indigo-100/80'
+        'bg-indigo-100'
       ]
     },
     isSelected () {
@@ -301,20 +435,57 @@ export default {
   },
   watch: {
     'field.default_value' () {
-      if (this.field.type === 'text' && this.field.default_value && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > this.field.default_value.length)) {
-        this.textOverflowChars = this.$el.clientHeight < this.$refs.textContainer.clientHeight ? this.field.default_value.length : 0
-      }
-    }
-  },
-  mounted () {
-    if (this.field.type === 'text' && this.field.default_value && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > this.field.default_value)) {
       this.$nextTick(() => {
-        this.textOverflowChars = this.$el.clientHeight < this.$refs.textContainer.clientHeight ? this.field.default_value.length : 0
+        if (['date', 'text', 'number'].includes(this.field.type) && this.field.default_value && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > `${this.field.default_value}`.length)) {
+          this.textOverflowChars = this.$el.clientHeight < this.$refs.textContainer.clientHeight ? `${this.field.default_value}`.length : 0
+        }
       })
     }
   },
+  mounted () {
+    this.$nextTick(() => {
+      if (['date', 'text', 'number'].includes(this.field.type) && this.field.default_value && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > `${this.field.default_value}`.length)) {
+        this.textOverflowChars = this.$el.clientHeight < this.$refs.textContainer.clientHeight ? `${this.field.default_value}`.length : 0
+      }
+    })
+  },
   methods: {
     buildDefaultName: Field.methods.buildDefaultName,
+    closeDropdown () {
+      document.activeElement.blur()
+    },
+    maybeFocusDefaultValue () {
+      if (['text', 'number'].includes(this.field.type)) {
+        this.isContenteditable = true
+
+        this.$nextTick(() => {
+          this.$refs.defaultValue.focus()
+
+          if (this.$refs.defaultValue.innerText.length) {
+            window.getSelection().collapse(
+              this.$refs.defaultValue.firstChild,
+              this.$refs.defaultValue.innerText.length
+            )
+          }
+        })
+      }
+    },
+    formatNumber (number, format) {
+      if (format === 'comma') {
+        return new Intl.NumberFormat('en-US').format(number)
+      } else if (format === 'dot') {
+        return new Intl.NumberFormat('de-DE').format(number)
+      } else if (format === 'space') {
+        return new Intl.NumberFormat('fr-FR').format(number)
+      } else {
+        return number
+      }
+    },
+    maybeBlurSettings (e) {
+      if (!e.relatedTarget || !this.$refs.settingsDropdown.contains(e.relatedTarget)) {
+        this.isSettingsFocus = false
+      }
+    },
     onNameFocus (e) {
       this.selectedAreaRef.value = this.area
 
@@ -341,6 +512,9 @@ export default {
 
       this.save()
     },
+    onPaste (e) {
+      e.target.innerText = (e.clipboardData || window.clipboardData).getData('text/plain')
+    },
     onResizeCell (e) {
       if (e.target.id === 'mask') {
         const positionX = e.offsetX / (e.target.clientWidth - 1)
@@ -370,6 +544,10 @@ export default {
       })
     },
     onNameBlur (e) {
+      if (e.relatedTarget === this.$refs.settingsButton) {
+        this.isSettingsFocus = true
+      }
+
       const text = this.$refs.name.innerText.trim()
 
       this.isNameFocus = false
@@ -384,6 +562,38 @@ export default {
 
       this.save()
     },
+    onDefaultValueBlur (e) {
+      const text = this.$refs.defaultValue.innerText.trim()
+
+      this.isContenteditable = false
+
+      if (text) {
+        if (this.field.type === 'number') {
+          const number = parseFloat(text)
+
+          if (number || number === 0) {
+            this.field.default_value = parseFloat(text)
+          }
+        } else {
+          this.field.default_value = text
+        }
+
+        if (![true, false].includes(this.field.readonly)) {
+          this.field.readonly = true
+        }
+
+        this.$refs.defaultValue.innerText = text
+      } else {
+        delete this.field.readonly
+        delete this.field.default_value
+        this.$refs.defaultValue.innerText = ''
+      }
+
+      this.save()
+    },
+    onDefaultValueEnter (e) {
+      this.$refs.defaultValue.blur()
+    },
     onNameEnter (e) {
       this.$refs.name.blur()
     },
@@ -422,7 +632,7 @@ export default {
         return
       }
 
-      this.$refs?.name?.blur()
+      document.activeElement?.blur()
 
       e.preventDefault()
 
@@ -443,8 +653,8 @@ export default {
       const page = this.$parent.$refs.mask.previousSibling
       const rect = page.getBoundingClientRect()
 
-      this.area.x = (this.dragFrom.x + e.touches[0].clientX - rect.left) / rect.width
+      this.area.x = Math.min(Math.max((this.dragFrom.x + e.touches[0].clientX - rect.left) / rect.width, 0), 1 - this.area.w)
-      this.area.y = (this.dragFrom.y + e.touches[0].clientY - rect.top) / rect.height
+      this.area.y = Math.min(Math.max((this.dragFrom.y + e.touches[0].clientY - rect.top) / rect.height, 0), 1 - this.area.h)
     },
     stopTouchDrag () {
       this.$el.getRootNode().removeEventListener('touchmove', this.touchDrag)
@@ -458,6 +668,47 @@ export default {
 
       this.$emit('stop-drag')
     },
+    startMouseMove (e) {
+      if (e.target !== this.$refs.touchTarget) {
+        return
+      }
+
+      document.activeElement?.blur()
+
+      e.preventDefault()
+
+      this.isDragged = true
+
+      const rect = e.target.getBoundingClientRect()
+
+      this.selectedAreaRef.value = this.area
+
+      this.dragFrom = { x: rect.left - e.clientX, y: rect.top - e.clientY }
+
+      this.$el.getRootNode().addEventListener('mousemove', this.mouseMove)
+      this.$el.getRootNode().addEventListener('mouseup', this.stopMouseMove)
+
+      this.$emit('start-drag')
+    },
+    mouseMove (e) {
+      const page = this.$parent.$refs.mask.previousSibling
+      const rect = page.getBoundingClientRect()
+
+      this.area.x = Math.min(Math.max((this.dragFrom.x + e.clientX - rect.left) / rect.width, 0), 1 - this.area.w)
+      this.area.y = Math.min(Math.max((this.dragFrom.y + e.clientY - rect.top) / rect.height, 0), 1 - this.area.h)
+    },
+    stopMouseMove (e) {
+      this.$el.getRootNode().removeEventListener('mousemove', this.mouseMove)
+      this.$el.getRootNode().removeEventListener('mouseup', this.stopMouseMove)
+
+      if (this.isDragged) {
+        this.save()
+      }
+
+      this.isDragged = false
+
+      this.$emit('stop-drag')
+    },
     stopDrag () {
       this.$el.getRootNode().removeEventListener('mousemove', this.drag)
       this.$el.getRootNode().removeEventListener('mouseup', this.stopDrag)

app/javascript/template_builder/builder.vue

@@ -26,7 +26,7 @@
           @update:model-value="updateName"
         />
       </div>
-      <div class="space-x-3 flex items-center">
+      <div class="space-x-3 flex items-center flex-shrink-0">
         <slot
           v-if="$slots.buttons"
           name="buttons"
@@ -37,10 +37,10 @@
             class="btn btn-primary btn-ghost text-base hidden md:flex"
             :target="template.submitters.length > 1 ? '' : '_blank'"
             :data-turbo-frame="template.submitters.length > 1 ? 'modal' : ''"
-            @click="maybeShowEmptyTemplateAlert"
+            @click="maybeShowErrorTemplateAlert"
           >
             <IconWritingSign
-              width="20"
+              width="22"
               class="inline"
             />
             <span class="hidden md:inline">
@@ -51,7 +51,7 @@
             :href="`/templates/${template.id}/submissions/new?with_link=true`"
             data-turbo-frame="modal"
             class="white-button md:!px-6"
-            @click="maybeShowEmptyTemplateAlert"
+            @click="maybeShowErrorTemplateAlert"
           >
             <IconUsersPlus
               width="20"
@@ -115,7 +115,6 @@
           :with-replace-button="withUploadButton"
           :editable="editable"
           :template="template"
-          :is-direct-upload="isDirectUpload"
           @scroll-to="scrollIntoDocument(item)"
           @remove="onDocumentRemove"
           @replace="onDocumentReplace"
@@ -131,7 +130,6 @@
             v-if="sortedDocuments.length && editable && withUploadButton"
             :accept-file-types="acceptFileTypes"
             :template-id="template.id"
-            :is-direct-upload="isDirectUpload"
             @success="updateFromUpload"
           />
         </div>
@@ -148,7 +146,6 @@
             v-if="!sortedDocuments.length && withUploadButton"
             :template-id="template.id"
             :accept-file-types="acceptFileTypes"
-            :is-direct-upload="isDirectUpload"
             @success="updateFromUpload"
           />
           <template v-else>
@@ -162,13 +159,14 @@
                 :selected-submitter="selectedSubmitter"
                 :document="document"
                 :is-drag="!!dragField"
-                :default-fields="defaultFields"
+                :default-fields="[...defaultRequiredFields, ...defaultFields]"
                 :allow-draw="!onlyDefinedFields"
                 :default-submitters="defaultSubmitters"
                 :draw-field="drawField"
+                :draw-field-type="drawFieldType"
                 :editable="editable"
                 :base-url="baseUrl"
-                @draw="onDraw"
+                @draw="[onDraw($event), withSelectedFieldType ? '' : drawFieldType = '', showDrawField = false]"
                 @drop-field="onDropfield"
                 @remove-area="removeArea"
               />
@@ -177,9 +175,9 @@
                 :with-arrows="template.schema.length > 1"
                 :item="template.schema.find((item) => item.attachment_uuid === document.uuid)"
                 :with-replace-button="withUploadButton"
+                :accept-file-types="acceptFileTypes"
                 :document="document"
                 :template="template"
-                :is-direct-upload="isDirectUpload"
                 class="pb-2 mb-2 border-b border-base-300 border-dashed"
                 @remove="onDocumentRemove"
                 @replace="onDocumentReplace"
@@ -195,7 +193,6 @@
               <Upload
                 v-if="withUploadButton"
                 :template-id="template.id"
-                :is-direct-upload="isDirectUpload"
                 :accept-file-types="acceptFileTypes"
                 @success="updateFromUpload"
               />
@@ -210,13 +207,13 @@
         :class="drawField ? 'overflow-hidden' : 'overflow-y-auto overflow-x-hidden'"
       >
         <div
-          v-if="drawField"
+          v-if="showDrawField || drawField"
           class="sticky inset-0 h-full z-20"
           :style="{ backgroundColor }"
         >
-          <div class="bg-base-300 rounded-lg p-5 text-center space-y-4">
+          <div class="bg-base-200 rounded-lg p-5 text-center space-y-4">
             <p>
-              {{ t('draw_field_on_the_document').replace('{field}', drawField.name) }}
+              {{ t('draw_field_on_the_document').replace('{field}', drawField?.name || '') }}
             </p>
             <div>
               <button
@@ -226,10 +223,10 @@
                 {{ t('cancel') }}
               </button>
               <a
-                v-if="!drawOption && !drawField.areas.length && !['stamp', 'signature', 'initials'].includes(drawField.type)"
+                v-if="!drawField && !drawOption && !['stamp', 'signature', 'initials'].includes(drawField?.type || drawFieldType)"
                 href="#"
                 class="link block mt-3 text-sm"
-                @click.prevent="[drawField = null, drawOption = null]"
+                @click.prevent="[addField(drawFieldType), drawField = null, drawOption = null, withSelectedFieldType ? '' : drawFieldType = '', showDrawField = false]"
               >
                 {{ t('or_add_field_without_drawing') }}
               </a>
@@ -244,12 +241,16 @@
             :selected-submitter="selectedSubmitter"
             :with-help="withHelp"
             :default-submitters="defaultSubmitters"
-            :default-fields="defaultFields"
+            :draw-field-type="drawFieldType"
+            :default-fields="[...defaultRequiredFields, ...defaultFields]"
+            :default-required-fields="defaultRequiredFields"
             :field-types="fieldTypes"
             :with-sticky-submitters="withStickySubmitters"
             :only-defined-fields="onlyDefinedFields"
             :editable="editable"
+            @add-field="addField"
             @set-draw="[drawField = $event.field, drawOption = $event.option]"
+            @set-draw-type="[drawFieldType = $event, showDrawField = true]"
             @set-drag="dragField = $event"
             @change-submitter="selectedSubmitter = $event"
             @drag-end="dragField = null"
@@ -273,7 +274,8 @@
       <MobileFields
         v-if="sortedDocuments.length && !drawField && editable"
         :fields="template.fields"
-        :default-fields="defaultFields"
+        :default-fields="[...defaultRequiredFields, ...defaultFields]"
+        :default-required-fields="defaultRequiredFields"
         :field-types="fieldTypes"
         :selected-submitter="selectedSubmitter"
         @select="startFieldDraw($event)"
@@ -328,6 +330,7 @@ export default {
       backgroundColor: this.backgroundColor,
       withPhone: this.withPhone,
       withPayment: this.withPayment,
+      isPaymentConnected: this.isPaymentConnected,
       withFormula: this.withFormula,
       withConditions: this.withConditions,
       defaultDrawFieldType: this.defaultDrawFieldType,
@@ -340,11 +343,6 @@ export default {
       type: Object,
       required: true
     },
-    isDirectUpload: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     i18n: {
       type: Object,
       required: false,
@@ -375,6 +373,16 @@ export default {
       required: false,
       default: () => []
     },
+    defaultRequiredFields: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    withSelectedFieldType: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     defaultDrawFieldType: {
       type: String,
       required: false,
@@ -424,6 +432,13 @@ export default {
         return () => {}
       }
     },
+    onChange: {
+      type: Function,
+      required: false,
+      default () {
+        return () => {}
+      }
+    },
     withStickySubmitters: {
       type: Boolean,
       required: false,
@@ -444,6 +459,11 @@ export default {
       required: false,
       default: true
     },
+    authenticityToken: {
+      type: String,
+      required: false,
+      default: ''
+    },
     withDocumentsList: {
       type: Boolean,
       required: false,
@@ -459,6 +479,11 @@ export default {
       required: false,
       default: false
     },
+    isPaymentConnected: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     withFormula: {
       type: Boolean,
       required: false,
@@ -486,7 +511,9 @@ export default {
       isBreakpointLg: false,
       isSaving: false,
       selectedSubmitter: null,
+      showDrawField: false,
       drawField: null,
+      drawFieldType: null,
       drawOption: null,
       dragField: null
     }
@@ -509,6 +536,11 @@ export default {
 
       return areas
     },
+    isAllRequiredFieldsAdded () {
+      return !this.defaultRequiredFields?.some((f) => {
+        return !this.template.fields?.some((field) => field.name === f.name)
+      })
+    },
     selectedField () {
       return this.template.fields.find((f) => f.areas?.includes(this.selectedAreaRef.value))
     },
@@ -519,6 +551,12 @@ export default {
     }
   },
   created () {
+    if (!this.template.fields?.length && this.template.submitters?.length === 1) {
+      if (this.template.submitters[0]?.name === 'First Party') {
+        this.template.submitters[0].name = this.t('first_party')
+      }
+    }
+
     const existingSubmittersUuids = this.defaultSubmitters.map((name) => {
       return this.template.submitters.find(e => e.name === name)?.uuid
     })
@@ -569,6 +607,34 @@ export default {
     t (key) {
       return this.i18n[key] || i18nEn[key] || key
     },
+    addField (type, area = null) {
+      const field = {
+        name: '',
+        uuid: v4(),
+        required: type !== 'checkbox',
+        areas: area ? [area] : [],
+        submitter_uuid: this.selectedSubmitter.uuid,
+        type
+      }
+
+      if (['select', 'multiple', 'radio'].includes(type)) {
+        field.options = [{ value: '', uuid: v4() }]
+      }
+
+      if (type === 'stamp') {
+        field.readonly = true
+      }
+
+      if (type === 'date') {
+        field.preferences = {
+          format: Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') ? 'MM/DD/YYYY' : 'DD/MM/YYYY'
+        }
+      }
+
+      this.template.fields.push(field)
+
+      this.save()
+    },
     startFieldDraw ({ name, type }) {
       const existingField = this.template.fields?.find((f) => f.submitter_uuid === this.selectedSubmitter.uuid && name && name === f.name)
 
@@ -649,15 +715,13 @@ export default {
       ref.$el.scrollIntoView({ behavior: 'smooth', block: 'start' })
     },
     clearDrawField () {
-      if (this.drawField && !this.drawOption && this.drawField.areas.length === 0) {
-        const fieldIndex = this.template.fields.indexOf(this.drawField)
-
-        if (fieldIndex !== -1) {
-          this.template.fields.splice(fieldIndex, 1)
-        }
-      }
       this.drawField = null
       this.drawOption = null
+      this.showDrawField = false
+
+      if (!this.withSelectedFieldType) {
+        this.drawFieldType = ''
+      }
     },
     onKeyUp (e) {
       if (e.code === 'Escape') {
@@ -707,6 +771,27 @@ export default {
         }
       }
     },
+    setDefaultAreaSize (area, type) {
+      const documentRef = this.documentRefs.find((e) => e.document.uuid === area.attachment_uuid)
+      const pageMask = documentRef.pageRefs[area.page].$refs.mask
+
+      if (type === 'checkbox') {
+        area.w = pageMask.clientWidth / 30 / pageMask.clientWidth
+        area.h = (pageMask.clientWidth / 30 / pageMask.clientWidth) * (pageMask.clientWidth / pageMask.clientHeight)
+      } 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') {
+        area.w = pageMask.clientWidth / 5 / pageMask.clientWidth
+        area.h = (pageMask.clientWidth / 5 / pageMask.clientWidth) * (pageMask.clientWidth / pageMask.clientHeight) / 2
+      } else if (type === 'initials') {
+        area.w = pageMask.clientWidth / 10 / pageMask.clientWidth
+        area.h = (pageMask.clientWidth / 35 / pageMask.clientWidth)
+      } else {
+        area.w = pageMask.clientWidth / 5 / pageMask.clientWidth
+        area.h = (pageMask.clientWidth / 35 / pageMask.clientWidth)
+      }
+    },
     onDraw (area) {
       if (this.drawField) {
         if (this.drawOption) {
@@ -729,25 +814,7 @@ export default {
             area.w = previousArea.w
             area.h = previousArea.h
           } else {
-            const documentRef = this.documentRefs.find((e) => e.document.uuid === area.attachment_uuid)
+            this.setDefaultAreaSize(area, this.drawOption ? 'checkbox' : this.drawField?.type)
-            const pageMask = documentRef.pageRefs[area.page].$refs.mask
-
-            if (this.drawField.type === 'checkbox' || this.drawOption) {
-              area.w = pageMask.clientWidth / 30 / pageMask.clientWidth
-              area.h = (pageMask.clientWidth / 30 / pageMask.clientWidth) * (pageMask.clientWidth / pageMask.clientHeight)
-            } else if (this.drawField.type === 'image') {
-              area.w = pageMask.clientWidth / 5 / pageMask.clientWidth
-              area.h = (pageMask.clientWidth / 5 / pageMask.clientWidth) * (pageMask.clientWidth / pageMask.clientHeight)
-            } else if (this.drawField.type === 'signature' || this.drawField.type === 'stamp') {
-              area.w = pageMask.clientWidth / 5 / pageMask.clientWidth
-              area.h = (pageMask.clientWidth / 5 / pageMask.clientWidth) * (pageMask.clientWidth / pageMask.clientHeight) / 2
-            } else if (this.drawField.type === 'initials') {
-              area.w = pageMask.clientWidth / 10 / pageMask.clientWidth
-              area.h = (pageMask.clientWidth / 35 / pageMask.clientWidth)
-            } else {
-              area.w = pageMask.clientWidth / 5 / pageMask.clientWidth
-              area.h = (pageMask.clientWidth / 35 / pageMask.clientWidth)
-            }
           }
 
           area.x -= area.w / 2
@@ -782,13 +849,15 @@ export default {
 
         let type = (pageMask.clientWidth * area.w) < 35 ? 'checkbox' : 'text'
 
-        if (this.defaultDrawFieldType && this.defaultDrawFieldType !== 'text') {
+        if (this.drawFieldType) {
+          type = this.drawFieldType
+        } else if (this.defaultDrawFieldType && this.defaultDrawFieldType !== 'text') {
           type = this.defaultDrawFieldType
         } else if (this.fieldTypes.length !== 0 && !this.fieldTypes.includes(type)) {
           type = this.fieldTypes[0]
         }
 
-        if (type === 'checkbox') {
+        if (type === 'checkbox' && !this.drawFieldType && (this.template.fields[this.template.fields.length - 1]?.type === 'checkbox' || area.w)) {
           const previousField = [...this.template.fields].reverse().find((f) => f.type === type)
           const previousArea = previousField?.areas?.[previousField.areas.length - 1]
 
@@ -806,21 +875,22 @@ export default {
           }
         }
 
-        if (area.w) {
+        if (this.drawFieldType && (area.w === 0 || area.h === 0)) {
-          const field = {
+          if (this.selectedField?.type === this.drawFieldType) {
-            name: '',
+            area.w = this.selectedAreaRef.value.w
-            uuid: v4(),
+            area.h = this.selectedAreaRef.value.h
-            required: type !== 'checkbox',
+          } else {
-            type,
+            this.setDefaultAreaSize(area, this.drawFieldType)
-            submitter_uuid: this.selectedSubmitter.uuid,
-            areas: [area]
           }
 
-          this.template.fields.push(field)
+          area.x -= area.w / 2
+          area.y -= area.h / 2
+        }
+
+        if (area.w) {
+          this.addField(type, area)
 
           this.selectedAreaRef.value = area
-
-          this.save()
         }
       }
     },
@@ -921,14 +991,26 @@ export default {
 
       this.save()
     },
-    updateFromUpload ({ schema, documents }) {
+    updateFromUpload (data) {
-      this.template.schema.push(...schema)
+      this.template.schema.push(...data.schema)
-      this.template.documents.push(...documents)
+      this.template.documents.push(...data.documents)
+
+      if (data.fields) {
+        this.template.fields = data.fields
+      }
+
+      if (data.submitters) {
+        this.template.submitters = data.submitters
+
+        if (!this.template.submitters.find((s) => s.uuid === this.selectedSubmitter?.uuid)) {
+          this.selectedSubmitter = this.template.submitters[0]
+        }
+      }
 
       this.$nextTick(() => {
         this.$refs.previews.scrollTop = this.$refs.previews.scrollHeight
 
-        this.scrollIntoDocument(schema[0])
+        this.scrollIntoDocument(data.schema[0])
       })
 
       if (this.template.name === 'New Document') {
@@ -951,19 +1033,56 @@ export default {
         this.template.schema.splice(this.template.schema.indexOf(item), 1)
       }
 
+      const removedFieldUuids = []
+
       this.template.fields.forEach((field) => {
         [...(field.areas || [])].forEach((area) => {
           if (area.attachment_uuid === item.attachment_uuid) {
             field.areas.splice(field.areas.indexOf(area), 1)
+
+            removedFieldUuids.push(field.uuid)
           }
         })
       })
 
+      this.template.fields =
+        this.template.fields.filter((f) => !removedFieldUuids.includes(f.uuid) || f.areas?.length)
+
       this.save()
     },
-    onDocumentReplace ({ replaceSchemaItem, schema, documents }) {
+    onDocumentReplace (data) {
+      const { replaceSchemaItem, schema, documents } = data
+
       this.template.schema.splice(this.template.schema.indexOf(replaceSchemaItem), 1, schema[0])
       this.template.documents.push(...documents)
+
+      if (data.fields) {
+        this.template.fields = data.fields
+
+        const removedFieldUuids = []
+
+        this.template.fields.forEach((field) => {
+          [...(field.areas || [])].forEach((area) => {
+            if (area.attachment_uuid === replaceSchemaItem.attachment_uuid) {
+              field.areas.splice(field.areas.indexOf(area), 1)
+
+              removedFieldUuids.push(field.uuid)
+            }
+          })
+        })
+
+        this.template.fields =
+          this.template.fields.filter((f) => !removedFieldUuids.includes(f.uuid) || f.areas?.length)
+      }
+
+      if (data.submitters) {
+        this.template.submitters = data.submitters
+
+        if (!this.template.submitters.find((s) => s.uuid === this.selectedSubmitter?.uuid)) {
+          this.selectedSubmitter = this.template.submitters[0]
+        }
+      }
+
       this.template.fields.forEach((field) => {
         (field.areas || []).forEach((area) => {
           if (area.attachment_uuid === replaceSchemaItem.attachment_uuid) {
@@ -993,24 +1112,62 @@ export default {
 
       this.save()
     },
-    maybeShowEmptyTemplateAlert (e) {
+    maybeShowErrorTemplateAlert (e) {
+      if (!this.isAllRequiredFieldsAdded) {
+        e.preventDefault()
+
+        const fields = this.defaultRequiredFields?.filter((f) => {
+          return !this.template.fields?.some((field) => field.name === f.name)
+        })
+
+        if (fields?.length) {
+          return alert(this.t('add_all_required_fields_to_continue') + ': ' + fields.map((f) => f.name).join(', '))
+        }
+      }
+
       if (!this.template.fields.length) {
         e.preventDefault()
 
         alert('Please draw fields to prepare the document.')
+      } else {
+        const submitterWithoutFields =
+          this.template.submitters.find((submitter) => !this.template.fields.some((f) => f.submitter_uuid === submitter.uuid))
+
+        if (submitterWithoutFields) {
+          e.preventDefault()
+
+          alert(`Please add fields for the ${submitterWithoutFields.name}. Or, remove the ${submitterWithoutFields.name} if not needed.`)
+        }
       }
     },
     onSaveClick () {
-      if (this.template.fields.length) {
+      if (!this.isAllRequiredFieldsAdded) {
-        this.isSaving = true
+        const fields = this.defaultRequiredFields?.filter((f) => {
-
+          return !this.template.fields?.some((field) => field.name === f.name)
-        this.save().then(() => {
-          window.Turbo.visit(`/templates/${this.template.id}`)
-        }).finally(() => {
-          this.isSaving = false
         })
-      } else {
+
+        if (fields?.length) {
+          return alert(this.t('add_all_required_fields_to_continue') + ': ' + fields.map((f) => f.name).join(', '))
+        }
+      }
+
+      if (!this.template.fields.length) {
         alert('Please draw fields to prepare the document.')
+      } else {
+        const submitterWithoutFields =
+          this.template.submitters.find((submitter) => !this.template.fields.some((f) => f.submitter_uuid === submitter.uuid))
+
+        if (submitterWithoutFields) {
+          alert(`Please add fields for the ${submitterWithoutFields.name}. Or, remove the ${submitterWithoutFields.name} if not needed.`)
+        } else {
+          this.isSaving = true
+
+          this.save().then(() => {
+            window.Turbo.visit(`/templates/${this.template.id}`)
+          }).finally(() => {
+            this.isSaving = false
+          })
+        }
       }
     },
     scrollToArea (area) {
@@ -1023,10 +1180,18 @@ export default {
     baseFetch (path, options = {}) {
       return fetch(this.baseUrl + path, {
         ...options,
-        headers: { ...this.fetchOptions.headers, ...options.headers }
+        headers: {
+          'X-CSRF-Token': this.authenticityToken,
+          ...this.fetchOptions.headers,
+          ...options.headers
+        }
       })
     },
     save ({ force } = { force: false }) {
+      if (this.onChange) {
+        this.onChange(this.template)
+      }
+
       if (!this.autosave && !force) {
         return Promise.resolve({})
       }
@@ -1039,7 +1204,7 @@ export default {
 
       this.pushUndo()
 
-      return this.baseFetch(`/api/templates/${this.template.id}`, {
+      return this.baseFetch(`/templates/${this.template.id}`, {
         method: 'PUT',
         body: JSON.stringify({
           template: {

app/javascript/template_builder/conditions_modal.vue

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

app/javascript/template_builder/contenteditable.vue

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

app/javascript/template_builder/controls.vue

@@ -8,8 +8,8 @@
     />
     <ReplaceButton
       v-if="withReplaceButton"
-      :is-direct-upload="isDirectUpload"
       :template-id="template.id"
+      :accept-file-types="acceptFileTypes"
       @click.stop
       @success="$emit('replace', { replaceSchemaItem: item, ...$event })"
     />
@@ -63,10 +63,10 @@ export default {
       type: Object,
       required: true
     },
-    isDirectUpload: {
+    acceptFileTypes: {
-      type: Boolean,
+      type: String,
-      required: true,
+      required: false,
-      default: false
+      default: 'image/*, application/pdf'
     },
     withReplaceButton: {
       type: Boolean,
@@ -80,11 +80,6 @@ export default {
     }
   },
   emits: ['change', 'remove', 'up', 'down', 'replace'],
-  mounted () {
-    if (this.isDirectUpload) {
-      import('@rails/activestorage')
-    }
-  },
   methods: {
     upload: Upload.methods.upload,
     onUpdateName (value) {

app/javascript/template_builder/description_modal.vue

@@ -34,6 +34,7 @@
                 v-model="description"
                 dir="auto"
                 class="base-textarea !text-base w-full"
+                :readonly="!editable"
                 @input="resizeTextarea"
               />
             </div>
@@ -49,6 +50,7 @@
                 id="title_field"
                 v-model="title"
                 dir="auto"
+                :readonly="!editable"
                 class="base-input !text-base w-full"
               >
             </div>
@@ -73,6 +75,11 @@ export default {
       type: Object,
       required: true
     },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     buildDefaultName: {
       type: Function,
       required: true

app/javascript/template_builder/document.vue

@@ -12,10 +12,12 @@
       :default-fields="defaultFields"
       :default-submitters="defaultSubmitters"
       :draw-field="drawField"
+      :draw-field-type="drawFieldType"
       :selected-submitter="selectedSubmitter"
       :image="image"
       @drop-field="$emit('drop-field', {...$event, attachment_uuid: document.uuid })"
       @remove-area="$emit('remove-area', $event)"
+      @scroll-to="scrollToArea"
       @draw="$emit('draw', {...$event, attachment_uuid: document.uuid })"
     />
   </div>
@@ -43,6 +45,11 @@ export default {
       required: false,
       default: () => []
     },
+    drawFieldType: {
+      type: String,
+      required: false,
+      default: ''
+    },
     defaultSubmitters: {
       type: Array,
       required: false,
@@ -119,7 +126,9 @@ export default {
   },
   methods: {
     scrollToArea (area) {
-      this.pageRefs[area.page].areaRefs.find((e) => e.area === area).$el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      this.$nextTick(() => {
+        this.pageRefs[area.page].areaRefs.find((e) => e.area === area).$el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      })
     },
     setPageRefs (el) {
       if (el) {

app/javascript/template_builder/dropzone.vue

@@ -5,7 +5,7 @@
     @drop.prevent="onDropFiles"
   >
     <label
-      class="w-full relative bg-base-200 hover:bg-base-200/70 rounded-md border border-base-content border-dashed"
+      class="w-full relative hover:bg-base-200/30 rounded-md border border-2 border-base-content/10 border-dashed"
       :for="inputId"
       :class="{ 'opacity-50': isLoading || isProcessing }"
     >
@@ -71,11 +71,6 @@ export default {
       type: String,
       required: false,
       default: 'image/*, application/pdf'
-    },
-    isDirectUpload: {
-      type: Boolean,
-      required: true,
-      default: false
     }
   },
   emits: ['success'],
@@ -101,11 +96,6 @@ export default {
       }
     }
   },
-  mounted () {
-    if (this.isDirectUpload) {
-      import('@rails/activestorage')
-    }
-  },
   methods: {
     upload: Upload.methods.upload,
     onDropFiles (e) {

app/javascript/template_builder/field.vue

@@ -16,12 +16,14 @@
             v-model="field.type"
             :editable="editable && !defaultField"
             :button-width="20"
+            :menu-classes="'mt-1.5'"
+            :menu-style="{ backgroundColor: dropdownBgColor }"
             @update:model-value="[maybeUpdateOptions(), save()]"
             @click="scrollToFirstArea"
           />
           <Contenteditable
             ref="name"
-            :model-value="field.name || defaultName"
+            :model-value="(defaultField ? (field.title || field.name) : field.name) || defaultName"
             :editable="editable && !defaultField"
             :icon-inline="true"
             :icon-width="18"
@@ -55,7 +57,7 @@
           class="flex items-center space-x-1"
         >
           <button
-            v-if="field && !field.areas.length"
+            v-if="field && !field.areas?.length"
             :title="t('draw')"
             class="relative cursor-pointer text-transparent group-hover:text-base-content"
             @click="$emit('set-draw', { field })"
@@ -90,6 +92,7 @@
           <PaymentSettings
             v-if="field.type === 'payment'"
             :field="field"
+            @click-condition="isShowConditionsModal = true"
           />
           <span
             v-else
@@ -110,237 +113,23 @@
             <ul
               v-if="renderDropdown"
               tabindex="0"
-              class="mt-1.5 dropdown-content menu menu-xs p-2 shadow bg-base-100 rounded-box w-52 z-10"
+              class="mt-1.5 dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10"
+              :style="{ backgroundColor: dropdownBgColor }"
               draggable="true"
               @dragstart.prevent.stop
               @click="closeDropdown"
             >
-              <div
+              <FieldSettings
-                v-if="field.type === 'text' && !defaultField"
+                :field="field"
-                class="py-1.5 px-1 relative"
+                :default-field="defaultField"
-                @click.stop
+                :editable="editable"
-              >
+                :background-color="dropdownBgColor"
-                <input
+                @click-formula="isShowFormulaModal = true"
-                  v-model="field.default_value"
+                @click-description="isShowDescriptionModal = true"
-                  type="text"
+                @click-condition="isShowConditionsModal = true"
-                  :placeholder="t('default_value')"
+                @set-draw="$emit('set-draw', $event)"
-                  dir="auto"
+                @scroll-to="$emit('scroll-to', $event)"
-                  class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
+              />
-                  @blur="save"
-                >
-                <label
-                  v-if="field.default_value"
-                  :style="{ backgroundColor: backgroundColor }"
-                  class="absolute -top-1 left-2.5 px-1 h-4"
-                  style="font-size: 8px"
-                >
-                  {{ t('default_value') }}
-                </label>
-              </div>
-              <div
-                v-if="field.type === 'date'"
-                class="py-1.5 px-1 relative"
-                @click.stop
-              >
-                <select
-                  v-model="field.preferences.format"
-                  :placeholder="t('format')"
-                  class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0"
-                  @change="save"
-                >
-                  <option
-                    v-for="format in dateFormats"
-                    :key="format"
-                    :value="format"
-                  >
-                    {{ formatDate(new Date(), format) }}
-                  </option>
-                </select>
-                <label
-                  :style="{ backgroundColor: backgroundColor }"
-                  class="absolute -top-1 left-2.5 px-1 h-4"
-                  style="font-size: 8px"
-                >
-                  {{ t('format') }}
-                </label>
-              </div>
-              <div
-                v-if="field.type === 'signature'"
-                class="py-1.5 px-1 relative"
-                @click.stop
-              >
-                <select
-                  :placeholder="t('format')"
-                  class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0"
-                  @change="[field.preferences.format = $event.target.value, save()]"
-                >
-                  <option
-                    value="any"
-                    :selected="!field.preferences?.format || field.preferences.format === 'any'"
-                  >
-                    {{ t('any') }}
-                  </option>
-                  <option
-                    value="drawn"
-                    :selected="field.preferences?.format === 'drawn'"
-                  >
-                    {{ t('drawn') }}
-                  </option>
-                  <option
-                    value="typed"
-                    :selected="field.preferences?.format === 'typed'"
-                  >
-                    {{ t('typed') }}
-                  </option>
-                </select>
-                <label
-                  :style="{ backgroundColor: backgroundColor }"
-                  class="absolute -top-1 left-2.5 px-1 h-4"
-                  style="font-size: 8px"
-                >
-                  {{ t('format') }}
-                </label>
-              </div>
-              <li
-                v-if="field.type != 'phone'"
-                @click.stop
-              >
-                <label class="cursor-pointer py-1.5">
-                  <input
-                    v-model="field.required"
-                    type="checkbox"
-                    class="toggle toggle-xs"
-                    @update:model-value="save"
-                  >
-                  <span class="label-text">{{ t('required') }}</span>
-                </label>
-              </li>
-              <li
-                v-if="field.type == 'checkbox'"
-                @click.stop
-              >
-                <label class="cursor-pointer py-1.5">
-                  <input
-                    v-model="field.default_value"
-                    type="checkbox"
-                    class="toggle toggle-xs"
-                    @update:model-value="[field.default_value = $event, field.readonly = $event, save()]"
-                  >
-                  <span class="label-text">{{ t('checked') }}</span>
-                </label>
-              </li>
-              <li
-                v-if="field.type == 'date'"
-                @click.stop
-              >
-                <label class="cursor-pointer py-1.5">
-                  <input
-                    v-model="field.readonly"
-                    type="checkbox"
-                    class="toggle toggle-xs"
-                    @update:model-value="[field.default_value = $event ? '{{date}}' : null, field.readonly = $event, save()]"
-                  >
-                  <span class="label-text">{{ t('set_signing_date') }}</span>
-                </label>
-              </li>
-              <li
-                v-if="field.type === 'text' && !defaultField"
-                @click.stop
-              >
-                <label class="cursor-pointer py-1.5">
-                  <input
-                    v-model="field.readonly"
-                    type="checkbox"
-                    class="toggle toggle-xs"
-                    @update:model-value="save"
-                  >
-                  <span class="label-text">{{ t('read_only') }}</span>
-                </label>
-              </li>
-              <hr class="pb-0.5 mt-0.5">
-              <li>
-                <label
-                  class="label-text cursor-pointer text-center w-full flex items-center"
-                  @click="isShowDescriptionModal = !isShowDescriptionModal"
-                >
-                  <IconInfoCircle
-                    width="18"
-                  />
-                  <span class="text-sm">
-                    {{ t('description') }}
-                  </span>
-                </label>
-              </li>
-              <li>
-                <label
-                  class="label-text cursor-pointer text-center w-full flex items-center"
-                  @click="isShowConditionsModal = !isShowConditionsModal"
-                >
-                  <IconRouteAltLeft
-                    width="18"
-                  />
-                  <span class="text-sm">
-                    {{ t('condition') }}
-                  </span>
-                </label>
-              </li>
-              <li v-if="field.type == 'number'">
-                <label
-                  class="label-text cursor-pointer text-center w-full flex items-center"
-                  @click="isShowFormulaModal = true"
-                >
-                  <IconMathFunction
-                    width="18"
-                  />
-                  <span class="text-sm">
-                    {{ t('formula') }}
-                  </span>
-                </label>
-              </li>
-              <hr class="pb-0.5 mt-0.5">
-              <li
-                v-for="(area, index) in sortedAreas"
-                :key="index"
-              >
-                <a
-                  href="#"
-                  class="text-sm py-1 px-2"
-                  @click.prevent="$emit('scroll-to', area)"
-                >
-                  <IconShape
-                    :width="20"
-                    :stroke-width="1.6"
-                  />
-                  {{ t('page') }}
-                  <template v-if="template.schema.length > 1">{{ template.schema.findIndex((item) => item.attachment_uuid === area.attachment_uuid) + 1 }}-</template>{{ area.page + 1 }}
-                </a>
-              </li>
-              <li v-if="!field.areas?.length || !['radio', 'multiple'].includes(field.type)">
-                <a
-                  href="#"
-                  class="text-sm py-1 px-2"
-                  @click.prevent="$emit('set-draw', { field })"
-                >
-                  <IconNewSection
-                    :width="20"
-                    :stroke-width="1.6"
-                  />
-                  {{ t('draw_new_area') }}
-                </a>
-              </li>
-              <li v-if="field.areas?.length === 1 && ['date', 'signature', 'initials', 'text', 'cells'].includes(field.type)">
-                <a
-                  href="#"
-                  class="text-sm py-1 px-2"
-                  @click.prevent="copyToAllPages(field)"
-                >
-                  <IconCopy
-                    :width="20"
-                    :stroke-width="1.6"
-                  />
-                  {{ t('copy_to_all_pages') }}
-                </a>
-              </li>
             </ul>
           </span>
           <button
@@ -434,6 +223,7 @@
     >
       <FormulaModal
         :field="field"
+        :editable="editable && !defaultField"
         :build-default-name="buildDefaultName"
         @close="isShowFormulaModal = false"
       />
@@ -454,6 +244,7 @@
     >
       <DescriptionModal
         :field="field"
+        :editable="editable && !defaultField"
         :build-default-name="buildDefaultName"
         @close="isShowDescriptionModal = false"
       />
@@ -465,10 +256,11 @@
 import Contenteditable from './contenteditable'
 import FieldType from './field_type'
 import PaymentSettings from './payment_settings'
+import FieldSettings from './field_settings'
 import FormulaModal from './formula_modal'
 import ConditionsModal from './conditions_modal'
 import DescriptionModal from './description_modal'
-import { IconInfoCircle, IconRouteAltLeft, IconMathFunction, IconShape, IconNewSection, IconTrashX, IconCopy, IconSettings } from '@tabler/icons-vue'
+import { IconRouteAltLeft, IconMathFunction, IconNewSection, IconTrashX, IconSettings } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 
 export default {
@@ -476,17 +268,15 @@ export default {
   components: {
     Contenteditable,
     IconSettings,
-    IconShape,
+    FieldSettings,
     PaymentSettings,
     IconNewSection,
-    IconInfoCircle,
     FormulaModal,
     DescriptionModal,
     ConditionsModal,
     IconRouteAltLeft,
     IconTrashX,
     IconMathFunction,
-    IconCopy,
     FieldType
   },
   inject: ['template', 'save', 'backgroundColor', 'selectedAreaRef', 't'],
@@ -519,6 +309,9 @@ export default {
   },
   computed: {
     fieldNames: FieldType.computed.fieldNames,
+    dropdownBgColor () {
+      return ['', null, 'transparent'].includes(this.backgroundColor) ? 'white' : this.backgroundColor
+    },
     schemaAttachmentsIndexes () {
       return (this.template.schema || []).reduce((acc, item, index) => {
         acc[item.attachment_uuid] = index
@@ -534,19 +327,6 @@ export default {
     modalContainerEl () {
       return this.$el.getRootNode().querySelector('#docuseal_modal_container')
     },
-    dateFormats () {
-      return [
-        'MM/DD/YYYY',
-        'DD/MM/YYYY',
-        'YYYY-MM-DD',
-        'DD-MM-YYYY',
-        'DD.MM.YYYY',
-        'MMM D, YYYY',
-        'MMMM D, YYYY',
-        'D MMM YYYY',
-        'D MMMM YYYY'
-      ]
-    },
     defaultName () {
       return this.buildDefaultName(this.field, this.template.fields)
     },
@@ -581,54 +361,6 @@ export default {
         return `${this.fieldNames[field.type]} ${suffix} ${typeIndex + 1}`
       }
     },
-    formatDate (date, format) {
-      const monthFormats = {
-        M: 'numeric',
-        MM: '2-digit',
-        MMM: 'short',
-        MMMM: 'long'
-      }
-
-      const dayFormats = {
-        D: 'numeric',
-        DD: '2-digit'
-      }
-
-      const yearFormats = {
-        YYYY: 'numeric',
-        YY: '2-digit'
-      }
-
-      const parts = new Intl.DateTimeFormat([], {
-        day: dayFormats[format.match(/D+/)],
-        month: monthFormats[format.match(/M+/)],
-        year: yearFormats[format.match(/Y+/)]
-      }).formatToParts(date)
-
-      return format
-        .replace(/D+/, parts.find((p) => p.type === 'day').value)
-        .replace(/M+/, parts.find((p) => p.type === 'month').value)
-        .replace(/Y+/, parts.find((p) => p.type === 'year').value)
-    },
-    copyToAllPages (field) {
-      const areaString = JSON.stringify(field.areas[0])
-
-      this.template.documents.forEach((attachment) => {
-        const numberOfPages = attachment.metadata?.pdf?.number_of_pages || attachment.preview_images.length
-
-        for (let page = 0; page <= numberOfPages - 1; page++) {
-          if (!field.areas.find((area) => area.attachment_uuid === attachment.uuid && area.page === page)) {
-            field.areas.push({ ...JSON.parse(areaString), attachment_uuid: attachment.uuid, page })
-          }
-        }
-      })
-
-      this.$nextTick(() => {
-        this.$emit('scroll-to', this.field.areas[this.field.areas.length - 1])
-      })
-
-      this.save()
-    },
     onNameFocus (e) {
       this.isNameFocus = true
 
@@ -664,7 +396,12 @@ export default {
     },
     removeOption (option) {
       this.field.options.splice(this.field.options.indexOf(option), 1)
-      this.field.areas.splice(this.field.areas.findIndex((a) => a.option_uuid === option.uuid), 1)
+
+      const optionIndex = this.field.areas.findIndex((a) => a.option_uuid === option.uuid)
+
+      if (optionIndex !== -1) {
+        this.field.areas.splice(this.field.areas.findIndex((a) => a.option_uuid === option.uuid), 1)
+      }
 
       this.save()
     },
@@ -699,11 +436,6 @@ export default {
 
       this.isNameFocus = false
 
-      this.save()
-    },
-    removeArea (area) {
-      this.field.areas.splice(this.field.areas.indexOf(area), 1)
-
       this.save()
     }
   }

app/javascript/template_builder/field_settings.vue

@@ -0,0 +1,547 @@
+<template>
+  <div
+    v-if="field.type === 'number'"
+    class="py-1.5 px-1 relative"
+    @click.stop
+  >
+    <select
+      :placeholder="t('format')"
+      class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0 bg-transparent"
+      @change="[field.preferences ||= {}, field.preferences.format = $event.target.value, save()]"
+    >
+      <option
+        v-for="format in numberFormats"
+        :key="format"
+        :value="format"
+        :selected="format === field.preferences?.format || (format === 'none' && !field.preferences?.format)"
+      >
+        {{ formatNumber(123456789.567, format) }}
+      </option>
+    </select>
+    <label
+      :style="{ backgroundColor }"
+      class="absolute -top-1 left-2.5 px-1 h-4"
+      style="font-size: 8px"
+    >
+      {{ t('format') }}
+    </label>
+  </div>
+  <div
+    v-if="['number'].includes(field.type)"
+    class="py-1.5 px-1 relative"
+    @click.stop
+  >
+    <select
+      class="select select-bordered select-xs w-full max-w-xs h-7 !outline-0 font-normal bg-transparent"
+      @change="[field.preferences ||= {}, field.preferences.align = $event.target.value, save()]"
+    >
+      <option
+        v-for="value in ['left', 'right', 'center']"
+        :key="value"
+        :selected="field.preferences?.align ? value === field.preferences.align : value === 'left'"
+        :value="value"
+      >
+        {{ t(value) }}
+      </option>
+    </select>
+    <label
+      :style="{ backgroundColor }"
+      class="absolute -top-1 left-2.5 px-1 h-4"
+      style="font-size: 8px"
+    >
+      {{ t('align') }}
+    </label>
+  </div>
+  <div
+    v-if="['text', 'number'].includes(field.type) && !defaultField"
+    class="py-1.5 px-1 relative"
+    @click.stop
+  >
+    <input
+      v-model="field.default_value"
+      :placeholder="t('default_value')"
+      dir="auto"
+      :type="field.type"
+      class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0 bg-transparent"
+      @blur="save"
+    >
+    <label
+      v-if="field.default_value"
+      :style="{ backgroundColor }"
+      class="absolute -top-1 left-2.5 px-1 h-4"
+      style="font-size: 8px"
+    >
+      {{ t('default_value') }}
+    </label>
+  </div>
+  <div
+    v-if="['text', 'cells'].includes(field.type)"
+    class="py-1.5 px-1 relative"
+    @click.stop
+  >
+    <select
+      class="select select-bordered select-xs w-full max-w-xs h-7 !outline-0 font-normal bg-transparent"
+      @change="onChangeValidation"
+    >
+      <option
+        :selected="!field.validation"
+        value=""
+      >
+        {{ t('none') }}
+      </option>
+      <option
+        v-for="(key, value) in validations"
+        :key="key"
+        :selected="field.validation?.pattern ? value === field.validation.pattern : value === 'none'"
+        :value="value"
+      >
+        {{ t(key) }}
+      </option>
+      <option
+        :selected="field.validation && !validations[field.validation.pattern]"
+        :value="validations[field.validation?.pattern] || !field.validation?.pattern ? 'custom' : field.validation?.pattern"
+      >
+        {{ t('custom') }}
+      </option>
+    </select>
+    <label
+      :style="{ backgroundColor }"
+      class="absolute -top-1 left-2.5 px-1 h-4"
+      style="font-size: 8px"
+    >
+      {{ t('validation') }}
+    </label>
+  </div>
+  <div
+    v-if="['text', 'cells'].includes(field.type) && field.validation && !validations[field.validation.pattern]"
+    class="py-1.5 px-1 relative"
+    @click.stop
+  >
+    <input
+      ref="validationCustom"
+      v-model="field.validation.pattern"
+      :placeholder="t('regexp_validation')"
+      dir="auto"
+      class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0 bg-transparent"
+      @blur="save"
+    >
+    <label
+      v-if="field.validation.pattern"
+      :style="{ backgroundColor }"
+      class="absolute -top-1 left-2.5 px-1 h-4"
+      style="font-size: 8px"
+    >
+      {{ t('regexp_validation') }}
+    </label>
+  </div>
+  <div
+    v-if="field.type === 'date'"
+    class="py-1.5 px-1 relative"
+    @click.stop
+  >
+    <select
+      v-model="field.preferences.format"
+      :placeholder="t('format')"
+      class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0 bg-transparent"
+      @change="save"
+    >
+      <option
+        v-for="format in dateFormats"
+        :key="format"
+        :value="format"
+      >
+        {{ formatDate(new Date(), format) }}
+      </option>
+    </select>
+    <label
+      :style="{ backgroundColor }"
+      class="absolute -top-1 left-2.5 px-1 h-4"
+      style="font-size: 8px"
+    >
+      {{ t('format') }}
+    </label>
+  </div>
+  <div
+    v-if="field.type === 'signature'"
+    class="py-1.5 px-1 relative"
+    @click.stop
+  >
+    <select
+      :placeholder="t('format')"
+      class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0 bg-transparent"
+      @change="[field.preferences.format = $event.target.value, save()]"
+    >
+      <option
+        value="any"
+        :selected="!field.preferences?.format || field.preferences.format === 'any'"
+      >
+        {{ t('any') }}
+      </option>
+      <option
+        value="drawn"
+        :selected="field.preferences?.format === 'drawn'"
+      >
+        {{ t('drawn') }}
+      </option>
+      <option
+        value="typed"
+        :selected="field.preferences?.format === 'typed'"
+      >
+        {{ t('typed') }}
+      </option>
+    </select>
+    <label
+      :style="{ backgroundColor }"
+      class="absolute -top-1 left-2.5 px-1 h-4"
+      style="font-size: 8px"
+    >
+      {{ t('format') }}
+    </label>
+  </div>
+  <li
+    v-if="withRequired && field.type != 'phone' && field.type != 'stamp'"
+    @click.stop
+  >
+    <label class="cursor-pointer py-1.5">
+      <input
+        v-model="field.required"
+        type="checkbox"
+        :disabled="!editable || defaultField"
+        class="toggle toggle-xs"
+        @update:model-value="save"
+      >
+      <span class="label-text">{{ t('required') }}</span>
+    </label>
+  </li>
+  <li
+    v-if="field.type == 'stamp'"
+    @click.stop
+  >
+    <label class="cursor-pointer py-1.5">
+      <input
+        :checked="field.preferences?.with_logo != false"
+        type="checkbox"
+        class="toggle toggle-xs"
+        @change="[field.preferences ||= {}, field.preferences.with_logo = field.preferences.with_logo == false, save()]"
+      >
+      <span class="label-text">{{ t('with_logo') }}</span>
+    </label>
+  </li>
+  <li
+    v-if="field.type == 'checkbox'"
+    @click.stop
+  >
+    <label class="cursor-pointer py-1.5">
+      <input
+        v-model="field.default_value"
+        type="checkbox"
+        class="toggle toggle-xs"
+        @update:model-value="[field.default_value = $event, field.readonly = $event, save()]"
+      >
+      <span class="label-text">{{ t('checked') }}</span>
+    </label>
+  </li>
+  <li
+    v-if="field.type == 'date'"
+    @click.stop
+  >
+    <label class="cursor-pointer py-1.5">
+      <input
+        v-model="field.readonly"
+        type="checkbox"
+        class="toggle toggle-xs"
+        @update:model-value="[field.default_value = $event ? '{{date}}' : null, field.readonly = $event, save()]"
+      >
+      <span class="label-text">{{ t('set_signing_date') }}</span>
+    </label>
+  </li>
+  <li
+    v-if="['text', 'number'].includes(field.type) && !defaultField"
+    @click.stop
+  >
+    <label class="cursor-pointer py-1.5">
+      <input
+        v-model="field.readonly"
+        type="checkbox"
+        class="toggle toggle-xs"
+        @update:model-value="save"
+      >
+      <span class="label-text">{{ t('read_only') }}</span>
+    </label>
+  </li>
+  <hr
+    v-if="field.type != 'stamp'"
+    class="pb-0.5 mt-0.5"
+  >
+  <li
+    v-if="field.type != 'stamp'"
+  >
+    <label
+      class="label-text cursor-pointer text-center w-full flex items-center"
+      @click="$emit('click-description')"
+    >
+      <IconInfoCircle
+        width="18"
+      />
+      <span class="text-sm">
+        {{ t('description') }}
+      </span>
+    </label>
+  </li>
+  <li
+    v-if="field.type != 'stamp'"
+  >
+    <label
+      class="label-text cursor-pointer text-center w-full flex items-center"
+      @click="$emit('click-condition')"
+    >
+      <IconRouteAltLeft
+        width="18"
+      />
+      <span class="text-sm">
+        {{ t('condition') }}
+      </span>
+    </label>
+  </li>
+  <li v-if="field.type == 'number'">
+    <label
+      class="label-text cursor-pointer text-center w-full flex items-center"
+      @click="$emit('click-formula')"
+    >
+      <IconMathFunction
+        width="18"
+      />
+      <span class="text-sm">
+        {{ t('formula') }}
+      </span>
+    </label>
+  </li>
+  <hr class="pb-0.5 mt-0.5">
+  <template v-if="withAreas">
+    <li
+      v-for="(area, index) in sortedAreas"
+      :key="index"
+    >
+      <a
+        href="#"
+        class="text-sm py-1 px-2"
+        @click.prevent="$emit('scroll-to', area)"
+      >
+        <IconShape
+          :width="20"
+          :stroke-width="1.6"
+        />
+        {{ t('page') }}
+        <template v-if="template.schema.length > 1">{{ template.schema.findIndex((item) => item.attachment_uuid === area.attachment_uuid) + 1 }}-</template>{{ area.page + 1 }}
+      </a>
+    </li>
+    <li v-if="!field.areas?.length || !['radio', 'multiple'].includes(field.type)">
+      <a
+        href="#"
+        class="text-sm py-1 px-2"
+        @click.prevent="$emit('set-draw', { field })"
+      >
+        <IconNewSection
+          :width="20"
+          :stroke-width="1.6"
+        />
+        {{ t('draw_new_area') }}
+      </a>
+    </li>
+  </template>
+  <li v-if="field.areas?.length === 1 && ['date', 'signature', 'initials', 'text', 'cells'].includes(field.type)">
+    <a
+      href="#"
+      class="text-sm py-1 px-2"
+      @click.prevent="copyToAllPages(field)"
+    >
+      <IconCopy
+        :width="20"
+        :stroke-width="1.6"
+      />
+      {{ t('copy_to_all_pages') }}
+    </a>
+  </li>
+</template>
+
+<script>
+import { IconRouteAltLeft, IconShape, IconMathFunction, IconNewSection, IconInfoCircle, IconCopy } from '@tabler/icons-vue'
+
+export default {
+  name: 'FieldSettings',
+  components: {
+    IconShape,
+    IconInfoCircle,
+    IconMathFunction,
+    IconRouteAltLeft,
+    IconCopy,
+    IconNewSection
+  },
+  inject: ['template', 'save', 't'],
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    backgroundColor: {
+      type: String,
+      required: false,
+      default: null
+    },
+    defaultField: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    withRequired: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    withAreas: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ['set-draw', 'scroll-to', 'click-formula', 'click-description', 'click-condition'],
+  data () {
+    return {
+    }
+  },
+  computed: {
+    schemaAttachmentsIndexes () {
+      return (this.template.schema || []).reduce((acc, item, index) => {
+        acc[item.attachment_uuid] = index
+
+        return acc
+      }, {})
+    },
+    numberFormats () {
+      return [
+        'none',
+        'comma',
+        'dot',
+        'space'
+      ]
+    },
+    dateFormats () {
+      const formats = [
+        'MM/DD/YYYY',
+        'DD/MM/YYYY',
+        'YYYY-MM-DD',
+        'DD-MM-YYYY',
+        'DD.MM.YYYY',
+        'MMM D, YYYY',
+        'MMMM D, YYYY',
+        'D MMM YYYY',
+        'D MMMM YYYY'
+      ]
+
+      if (Intl.DateTimeFormat().resolvedOptions().timeZone?.includes('Seoul') || navigator.language?.startsWith('ko')) {
+        formats.push('YYYY년 MM월 DD일')
+      }
+
+      if (this.field.preferences?.format && !formats.includes(this.field.preferences.format)) {
+        formats.unshift(this.field.preferences.format)
+      }
+
+      return formats
+    },
+    validations () {
+      return {
+        '^[0-9]{3}-[0-9]{2}-[0-9]{4}$': 'ssn',
+        '^[0-9]{2}-[0-9]{7}$': 'ein',
+        '^[^@\\s]+@[^@\\s]+\\.[^@\\s]+$': 'email',
+        '^https?://.*': 'url',
+        '^[0-9]{5}(?:-[0-9]{4})?$': 'zip',
+        '^[0-9]+$': 'numbers_only',
+        '^[a-zA-Z]+$': 'letters_only'
+      }
+    },
+    sortedAreas () {
+      return (this.field.areas || []).sort((a, b) => {
+        return this.schemaAttachmentsIndexes[a.attachment_uuid] - this.schemaAttachmentsIndexes[b.attachment_uuid]
+      })
+    }
+  },
+  methods: {
+    onChangeValidation (event) {
+      if (event.target.value === 'custom') {
+        this.field.validation = { pattern: '' }
+
+        this.$nextTick(() => this.$refs.validationCustom.focus())
+      } else if (event.target.value) {
+        this.field.validation ||= {}
+        this.field.validation.pattern = event.target.value
+      } else {
+        delete this.field.validation
+      }
+
+      this.save()
+    },
+    copyToAllPages (field) {
+      const areaString = JSON.stringify(field.areas[0])
+
+      this.template.documents.forEach((attachment) => {
+        const numberOfPages = attachment.metadata?.pdf?.number_of_pages || attachment.preview_images.length
+
+        for (let page = 0; page <= numberOfPages - 1; page++) {
+          if (!field.areas.find((area) => area.attachment_uuid === attachment.uuid && area.page === page)) {
+            field.areas.push({ ...JSON.parse(areaString), attachment_uuid: attachment.uuid, page })
+          }
+        }
+      })
+
+      this.$emit('scroll-to', this.field.areas[this.field.areas.length - 1])
+
+      this.save()
+    },
+    formatNumber (number, format) {
+      if (format === 'comma') {
+        return new Intl.NumberFormat('en-US').format(number)
+      } else if (format === 'dot') {
+        return new Intl.NumberFormat('de-DE').format(number)
+      } else if (format === 'space') {
+        return new Intl.NumberFormat('fr-FR').format(number)
+      } else {
+        return number
+      }
+    },
+    formatDate (date, format) {
+      const monthFormats = {
+        M: 'numeric',
+        MM: '2-digit',
+        MMM: 'short',
+        MMMM: 'long'
+      }
+
+      const dayFormats = {
+        D: 'numeric',
+        DD: '2-digit'
+      }
+
+      const yearFormats = {
+        YYYY: 'numeric',
+        YY: '2-digit'
+      }
+
+      const parts = new Intl.DateTimeFormat([], {
+        day: dayFormats[format.match(/D+/)],
+        month: monthFormats[format.match(/M+/)],
+        year: yearFormats[format.match(/Y+/)]
+      }).formatToParts(date)
+
+      return format
+        .replace(/D+/, parts.find((p) => p.type === 'day').value)
+        .replace(/M+/, parts.find((p) => p.type === 'month').value)
+        .replace(/Y+/, parts.find((p) => p.type === 'year').value)
+    }
+  }
+}
+</script>

app/javascript/template_builder/field_submitter.vue

@@ -37,6 +37,7 @@
           tabindex="0"
           class="rounded-md min-w-max mb-2"
           :class="menuClasses"
+          :style="menuStyle"
           @click="closeDropdown"
         >
           <li
@@ -95,7 +96,7 @@
     <label
       v-if="compact"
       tabindex="0"
-      :title="selectedSubmitter.name"
+      :title="selectedSubmitter?.name"
       class="cursor-pointer text-base-100 flex h-full items-center justify-center"
     >
       <button
@@ -136,6 +137,7 @@
       v-if="(editable || !compact) && renderDropdown"
       tabindex="0"
       :class="menuClasses"
+      :style="menuStyle"
       @click="closeDropdown"
     >
       <li
@@ -253,10 +255,15 @@ export default {
       type: String,
       required: true
     },
+    menuStyle: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
     menuClasses: {
       type: String,
       required: false,
-      default: 'dropdown-content menu p-2 shadow bg-base-100 rounded-box w-full z-10'
+      default: 'dropdown-content menu p-2 shadow rounded-box w-full z-10'
     }
   },
   emits: ['update:model-value', 'remove', 'new-submitter', 'name-change'],

app/javascript/template_builder/field_type.vue

@@ -22,6 +22,7 @@
       v-if="editable && renderDropdown"
       tabindex="0"
       class="dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10 mb-3"
+      :style="menuStyle"
       :class="menuClasses"
       @click="closeDropdown"
     >
@@ -65,6 +66,11 @@ export default {
       required: false,
       default: 'mt-1.5 bg-base-100'
     },
+    menuStyle: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
     buttonClasses: {
       type: String,
       required: false,