fix checkbox add on missclick

.eslintrc

@@ -9,7 +9,7 @@
   "rules": {
     "vue/no-deprecated-html-element-is": 0,
     "vue/no-mutating-props": 0,
-    "vue/no-v-html": 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:
@@ -59,7 +59,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 16.13.1
+          node-version: 20.9.0
       - name: Cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
@@ -100,11 +100,11 @@ 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:
-          node-version: 16.13.1
+          node-version: 20.9.0
       - name: Install Chrome
         uses: browser-actions/setup-chrome@latest
       - name: Cache node_modules

.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

Dockerfile

@@ -1,12 +1,12 @@
-FROM ruby:3.2.2-alpine3.18 as fonts
+FROM ruby:3.3.1-alpine3.18 as fonts
 
 WORKDIR /fonts
 
-RUN apk --no-cache add fontforge wget ttf-liberation &&  cp /usr/share/fonts/liberation/LiberationSans-Regular.ttf /usr/share/fonts/liberation/LiberationSans-Bold.ttf . && wget https://cdn.jsdelivr.net/gh/notofonts/notofonts.github.io/fonts/NotoSansArabic/hinted/ttf/NotoSansArabic-Regular.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/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
 
-RUN fontforge -lang=py -c 'font1 = fontforge.open("LiberationSans-Regular.ttf"); font2 = fontforge.open("NotoSansArabic-Regular.ttf"); font1.mergeFonts(font2); font1.generate("LiberationSans-Regular.ttf")'
+RUN fontforge -lang=py -c 'font1 = fontforge.open("FreeSans.ttf"); font2 = fontforge.open("NotoSansSymbols2-Regular.ttf"); font1.mergeFonts(font2); font1.generate("FreeSans.ttf")'
 
-FROM ruby:3.2.2-alpine3.18 as webpack
+FROM ruby:3.3.1-alpine3.18 as webpack
 
 ENV RAILS_ENV=production
 ENV NODE_ENV=production
@@ -23,27 +23,28 @@ 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 ./tailwind.config.js ./tailwind.config.js ./
-COPY ./tailwind.form.config.js ./tailwind.form.config.js ./
-COPY ./tailwind.application.config.js ./tailwind.application.config.js ./
+COPY ./postcss.config.js ./postcss.config.js
+COPY ./tailwind.config.js ./tailwind.config.js
+COPY ./tailwind.form.config.js ./tailwind.form.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-alpine3.18 as app
 
 ENV RAILS_ENV=production
 ENV BUNDLE_WITHOUT="development:test"
+ENV LD_PRELOAD=/lib/libgcompat.so.0
 
 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 vips-heif gcompat ttf-freefont && mkdir /fonts && rm /usr/share/fonts/freefont/FreeSans.otf
 
 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,7 +56,8 @@ COPY ./public ./public
 COPY ./tmp ./tmp
 COPY LICENSE README.md Rakefile config.ru .version ./
 
-COPY --from=fonts /fonts/LiberationSans-Regular.ttf /fonts/LiberationSans-Bold.ttf /fonts/DancingScript-Regular.otf /fonts/OFL.txt /fonts
+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
@@ -65,4 +67,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
@@ -32,14 +33,13 @@ gem 'rack'
 gem 'rails'
 gem 'rails_autolink'
 gem 'rails-i18n'
-gem 'rollbar', require: ENV.key?('ROLLBAR_ACCESS_TOKEN')
 gem 'rotp'
 gem 'rqrcode'
 gem 'ruby-vips'
 gem 'rubyXL'
 gem 'shakapacker'
 gem 'sidekiq', require: ENV.key?('REDIS_URL')
-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

@@ -2,35 +2,35 @@ GEM
   remote: https://rubygems.org/
   specs:
     Ascii85 (1.1.0)
-    actioncable (7.1.2)
-      actionpack (= 7.1.2)
-      activesupport (= 7.1.2)
+    actioncable (7.1.3.2)
+      actionpack (= 7.1.3.2)
+      activesupport (= 7.1.3.2)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
       zeitwerk (~> 2.6)
-    actionmailbox (7.1.2)
-      actionpack (= 7.1.2)
-      activejob (= 7.1.2)
-      activerecord (= 7.1.2)
-      activestorage (= 7.1.2)
-      activesupport (= 7.1.2)
+    actionmailbox (7.1.3.2)
+      actionpack (= 7.1.3.2)
+      activejob (= 7.1.3.2)
+      activerecord (= 7.1.3.2)
+      activestorage (= 7.1.3.2)
+      activesupport (= 7.1.3.2)
       mail (>= 2.7.1)
       net-imap
       net-pop
       net-smtp
-    actionmailer (7.1.2)
-      actionpack (= 7.1.2)
-      actionview (= 7.1.2)
-      activejob (= 7.1.2)
-      activesupport (= 7.1.2)
+    actionmailer (7.1.3.2)
+      actionpack (= 7.1.3.2)
+      actionview (= 7.1.3.2)
+      activejob (= 7.1.3.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)
-      actionview (= 7.1.2)
-      activesupport (= 7.1.2)
+    actionpack (7.1.3.2)
+      actionview (= 7.1.3.2)
+      activesupport (= 7.1.3.2)
       nokogiri (>= 1.8.5)
       racc
       rack (>= 2.2.4)
@@ -38,35 +38,35 @@ GEM
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.2)
       rails-html-sanitizer (~> 1.6)
-    actiontext (7.1.2)
-      actionpack (= 7.1.2)
-      activerecord (= 7.1.2)
-      activestorage (= 7.1.2)
-      activesupport (= 7.1.2)
+    actiontext (7.1.3.2)
+      actionpack (= 7.1.3.2)
+      activerecord (= 7.1.3.2)
+      activestorage (= 7.1.3.2)
+      activesupport (= 7.1.3.2)
       globalid (>= 0.6.0)
       nokogiri (>= 1.8.5)
-    actionview (7.1.2)
-      activesupport (= 7.1.2)
+    actionview (7.1.3.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)
-      activesupport (= 7.1.2)
+    activejob (7.1.3.2)
+      activesupport (= 7.1.3.2)
       globalid (>= 0.3.6)
-    activemodel (7.1.2)
-      activesupport (= 7.1.2)
-    activerecord (7.1.2)
-      activemodel (= 7.1.2)
-      activesupport (= 7.1.2)
+    activemodel (7.1.3.2)
+      activesupport (= 7.1.3.2)
+    activerecord (7.1.3.2)
+      activemodel (= 7.1.3.2)
+      activesupport (= 7.1.3.2)
       timeout (>= 0.4.0)
-    activestorage (7.1.2)
-      actionpack (= 7.1.2)
-      activejob (= 7.1.2)
-      activerecord (= 7.1.2)
-      activesupport (= 7.1.2)
+    activestorage (7.1.3.2)
+      actionpack (= 7.1.3.2)
+      activejob (= 7.1.3.2)
+      activerecord (= 7.1.3.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)
@@ -85,17 +85,17 @@ GEM
     arabic-letter-connector (0.1.1)
     ast (2.4.2)
     aws-eventstream (1.3.0)
-    aws-partitions (1.874.0)
-    aws-sdk-core (3.190.1)
+    aws-partitions (1.913.0)
+    aws-sdk-core (3.191.6)
       aws-eventstream (~> 1, >= 1.3.0)
       aws-partitions (~> 1, >= 1.651.0)
       aws-sigv4 (~> 1.8)
       jmespath (~> 1, >= 1.6.1)
-    aws-sdk-kms (1.75.0)
-      aws-sdk-core (~> 3, >= 3.188.0)
+    aws-sdk-kms (1.79.0)
+      aws-sdk-core (~> 3, >= 3.191.0)
       aws-sigv4 (~> 1.1)
-    aws-sdk-s3 (1.142.0)
-      aws-sdk-core (~> 3, >= 3.189.0)
+    aws-sdk-s3 (1.146.1)
+      aws-sdk-core (~> 3, >= 3.191.0)
       aws-sdk-kms (~> 1)
       aws-sigv4 (~> 1.8)
     aws-sigv4 (1.8.0)
@@ -110,52 +110,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.7)
     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 +169,12 @@ GEM
       devise (~> 4.0)
       railties (~> 7.0)
       rotp (~> 6.0)
-    diff-lcs (1.5.0)
+    diff-lcs (1.5.1)
     digest-crc (0.6.5)
       rake (>= 12.0.0, < 14.0.0)
     docile (1.4.0)
-    dotenv (2.8.1)
-    drb (2.2.0)
-      ruby2_keywords
+    dotenv (3.1.0)
+    drb (2.2.1)
     email_typo (0.2.3)
     erb_lint (0.5.0)
       activesupport
@@ -182,12 +184,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 +227,34 @@ GEM
     geom2d (0.4.1)
     globalid (1.2.1)
       activesupport (>= 6.1)
-    google-apis-core (0.11.2)
+    google-apis-core (0.14.1)
       addressable (~> 2.5, >= 2.5.1)
-      googleauth (>= 0.16.2, < 2.a)
+      googleauth (~> 1.9)
       httpclient (>= 2.8.1, < 3.a)
       mini_mime (~> 1.0)
       representable (~> 3.0)
       retriable (>= 2.0, < 4.a)
       rexml
-      webrick
-    google-apis-iamcredentials_v1 (0.17.0)
-      google-apis-core (>= 0.11.0, < 2.a)
-    google-apis-storage_v1 (0.29.0)
-      google-apis-core (>= 0.11.0, < 2.a)
-    google-cloud-core (1.6.1)
+    google-apis-iamcredentials_v1 (0.20.0)
+      google-apis-core (>= 0.14.0, < 2.a)
+    google-apis-storage_v1 (0.37.0)
+      google-apis-core (>= 0.14.0, < 2.a)
+    google-cloud-core (1.7.0)
       google-cloud-env (>= 1.0, < 3.a)
       google-cloud-errors (~> 1.0)
-    google-cloud-env (2.1.0)
+    google-cloud-env (2.1.1)
       faraday (>= 1.0, < 3.a)
-    google-cloud-errors (1.3.1)
-    google-cloud-storage (1.45.0)
+    google-cloud-errors (1.4.0)
+    google-cloud-storage (1.49.0)
       addressable (~> 2.8)
       digest-crc (~> 0.4)
-      google-apis-iamcredentials_v1 (~> 0.1)
-      google-apis-storage_v1 (~> 0.29.0)
+      google-apis-core (~> 0.13)
+      google-apis-iamcredentials_v1 (~> 0.18)
+      google-apis-storage_v1 (~> 0.33)
       google-cloud-core (~> 1.6)
-      googleauth (>= 0.16.2, < 2.a)
+      googleauth (~> 1.9)
       mini_mime (~> 1.0)
-    googleauth (1.9.1)
+    googleauth (1.11.0)
       faraday (>= 1.0, < 3.a)
       google-cloud-env (~> 2.1)
       jwt (>= 1.4, < 3.0)
@@ -261,29 +263,31 @@ GEM
       signet (>= 0.16, < 2.a)
     hashdiff (1.1.0)
     hashery (2.1.2)
-    hexapdf (0.34.1)
+    hexapdf (0.40.0)
       cmdparse (~> 3.0, >= 3.0.3)
       geom2d (~> 0.4, >= 0.4.1)
       openssl (>= 2.2.1)
     htmlentities (4.3.4)
     httpclient (2.8.3)
-    i18n (1.14.1)
+    i18n (1.14.4)
       concurrent-ruby (~> 1.0)
     image_processing (1.12.2)
       mini_magick (>= 4.9.5, < 5)
       ruby-vips (>= 2.0.17, < 3)
-    io-console (0.7.1)
-    irb (1.11.0)
+    io-console (0.7.2)
+    irb (1.12.0)
       rdoc
-      reline (>= 0.3.8)
+      reline (>= 0.4.2)
     jmespath (1.6.2)
-    json (2.7.1)
-    jwt (2.7.1)
+    json (2.7.2)
+    jwt (2.8.1)
+      base64
     language_server-protocol (3.17.0.3)
-    launchy (2.5.2)
+    launchy (3.0.0)
       addressable (~> 2.8)
-    letter_opener (1.8.1)
-      launchy (>= 2.2, < 3)
+      childprocess (~> 5.0)
+    letter_opener (1.10.0)
+      launchy (>= 2.2, < 4)
     letter_opener_web (2.0.0)
       actionmailer (>= 5.2)
       letter_opener (~> 1.7)
@@ -302,21 +306,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)
-    minitest (5.20.0)
+    mini_portile2 (2.8.6)
+    minitest (5.22.3)
     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,18 +329,23 @@ GEM
       timeout
     net-smtp (0.4.0)
       net-protocol
-    nio4r (2.7.0)
-    nokogiri (1.15.5)
+    nio4r (2.7.1)
+    nokogiri (1.16.4)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
+    nokogiri (1.16.4-aarch64-linux)
+      racc (~> 1.4)
+    nokogiri (1.16.4-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)
@@ -345,8 +354,8 @@ GEM
       hashery (~> 2.0)
       ruby-rc4
       ttfunk
-    pg (1.5.4)
-    premailer (1.21.0)
+    pg (1.5.6)
+    premailer (1.23.0)
       addressable
       css_parser (>= 1.12.0)
       htmlentities (>= 4.0.0)
@@ -363,11 +372,11 @@ GEM
       pry (>= 0.10.4)
     psych (5.1.2)
       stringio
-    public_suffix (5.0.4)
-    puma (6.4.0)
+    public_suffix (5.0.5)
+    puma (6.4.2)
       nio4r (~> 2.0)
     racc (1.7.3)
-    rack (2.2.8)
+    rack (2.2.9)
     rack-proxy (0.7.7)
       rack
     rack-session (1.0.2)
@@ -377,20 +386,20 @@ GEM
     rackup (1.0.0)
       rack (< 3)
       webrick
-    rails (7.1.2)
-      actioncable (= 7.1.2)
-      actionmailbox (= 7.1.2)
-      actionmailer (= 7.1.2)
-      actionpack (= 7.1.2)
-      actiontext (= 7.1.2)
-      actionview (= 7.1.2)
-      activejob (= 7.1.2)
-      activemodel (= 7.1.2)
-      activerecord (= 7.1.2)
-      activestorage (= 7.1.2)
-      activesupport (= 7.1.2)
+    rails (7.1.3.2)
+      actioncable (= 7.1.3.2)
+      actionmailbox (= 7.1.3.2)
+      actionmailer (= 7.1.3.2)
+      actionpack (= 7.1.3.2)
+      actiontext (= 7.1.3.2)
+      actionview (= 7.1.3.2)
+      activejob (= 7.1.3.2)
+      activemodel (= 7.1.3.2)
+      activerecord (= 7.1.3.2)
+      activestorage (= 7.1.3.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,114 +407,117 @@ GEM
     rails-html-sanitizer (1.6.0)
       loofah (~> 2.21)
       nokogiri (~> 1.14)
-    rails-i18n (7.0.8)
+    rails-i18n (7.0.9)
       i18n (>= 0.7, < 2)
       railties (>= 6.0.0, < 8)
     rails_autolink (1.1.8)
       actionview (> 3.1)
       activesupport (> 3.1)
       railties (> 3.1)
-    railties (7.1.2)
-      actionpack (= 7.1.2)
-      activesupport (= 7.1.2)
+    railties (7.1.3.2)
+      actionpack (= 7.1.3.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)
-    rdoc (6.6.2)
+    rake (13.2.1)
+    rdoc (6.6.3.1)
       psych (>= 4.0.0)
-    redis-client (0.19.1)
+    redis-client (0.22.0)
       connection_pool
-    regexp_parser (2.8.3)
-    reline (0.4.1)
+    regexp_parser (2.9.0)
+    reline (0.5.1)
       io-console (~> 0.5)
     representable (3.2.0)
       declarative (< 0.1.0)
       trailblazer-option (>= 0.1.1, < 0.2.0)
       uber (< 0.2.0)
-    request_store (1.5.1)
+    request_store (1.6.0)
       rack (>= 1.4)
     responders (3.1.1)
       actionpack (>= 5.2)
       railties (>= 5.2)
     retriable (3.1.2)
     rexml (3.2.6)
-    rollbar (3.4.2)
     rotp (6.3.0)
     rqrcode (2.2.0)
       chunky_png (~> 1.0)
       rqrcode_core (~> 1.0)
     rqrcode_core (1.2.0)
-    rspec-core (3.12.2)
-      rspec-support (~> 3.12.0)
-    rspec-expectations (3.12.3)
+    rspec-core (3.13.0)
+      rspec-support (~> 3.13.0)
+    rspec-expectations (3.13.0)
       diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.12.0)
-    rspec-mocks (3.12.6)
+      rspec-support (~> 3.13.0)
+    rspec-mocks (3.13.0)
       diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.12.0)
-    rspec-rails (6.1.0)
+      rspec-support (~> 3.13.0)
+    rspec-rails (6.1.2)
       actionpack (>= 6.1)
       activesupport (>= 6.1)
       railties (>= 6.1)
-      rspec-core (~> 3.12)
-      rspec-expectations (~> 3.12)
-      rspec-mocks (~> 3.12)
-      rspec-support (~> 3.12)
-    rspec-support (3.12.1)
-    rubocop (1.59.0)
+      rspec-core (~> 3.13)
+      rspec-expectations (~> 3.13)
+      rspec-mocks (~> 3.13)
+      rspec-support (~> 3.13)
+    rspec-support (3.13.1)
+    rubocop (1.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)
-      parser (>= 3.2.1.0)
-    rubocop-capybara (2.19.0)
+    rubocop-ast (1.31.2)
+      parser (>= 3.3.0.4)
+    rubocop-capybara (2.20.0)
       rubocop (~> 1.41)
-    rubocop-factory_bot (2.24.0)
-      rubocop (~> 1.33)
-    rubocop-performance (1.20.1)
+    rubocop-factory_bot (2.25.1)
+      rubocop (~> 1.41)
+    rubocop-performance (1.21.0)
       rubocop (>= 1.48.1, < 2.0)
-      rubocop-ast (>= 1.30.0, < 2.0)
-    rubocop-rails (2.23.1)
+      rubocop-ast (>= 1.31.1, < 2.0)
+    rubocop-rails (2.24.1)
       activesupport (>= 4.2.0)
       rack (>= 1.1)
       rubocop (>= 1.33.0, < 2.0)
-      rubocop-ast (>= 1.30.0, < 2.0)
-    rubocop-rspec (2.25.0)
+      rubocop-ast (>= 1.31.1, < 2.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.0)
+    ruby-vips (2.2.1)
       ffi (~> 1.12)
     ruby2_keywords (0.0.5)
-    rubyXL (3.4.25)
+    rubyXL (3.4.27)
       nokogiri (>= 1.10.8)
       rubyzip (>= 1.3.0)
     rubyzip (2.3.2)
     semantic_range (3.0.0)
-    shakapacker (7.1.0)
+    shakapacker (7.2.3)
       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)
-    signet (0.18.0)
+      redis-client (>= 0.19.0)
+    signet (0.19.0)
       addressable (~> 2.8)
       faraday (>= 0.17.5, < 3.a)
       jwt (>= 1.5, < 3.0)
@@ -517,17 +529,17 @@ 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 (1.5.0)
+    ttfunk (1.8.0)
+      bigdecimal (~> 3.1)
+    turbo-rails (2.0.5)
       actionpack (>= 6.0.0)
       activejob (>= 6.0.0)
       railties (>= 6.0.0)
@@ -537,7 +549,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)
@@ -549,7 +561,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)
@@ -559,11 +571,12 @@ GEM
     websocket-extensions (0.1.5)
     xpath (3.2.0)
       nokogiri (~> 1.8)
-    zeitwerk (2.6.12)
+    zeitwerk (2.6.13)
 
 PLATFORMS
-  arm64-darwin-22
+  aarch64-linux
   ruby
+  x86_64-linux
 
 DEPENDENCIES
   annotate
@@ -575,6 +588,7 @@ DEPENDENCIES
   bullet
   cancancan
   capybara
+  csv
   cuprite
   debug
   devise
@@ -605,7 +619,6 @@ DEPENDENCIES
   rails
   rails-i18n
   rails_autolink
-  rollbar
   rotp
   rqrcode
   rspec-rails
@@ -627,7 +640,7 @@ DEPENDENCIES
   webmock
 
 RUBY VERSION
-   ruby 3.2.2p53
+   ruby 3.3.1p55
 
 BUNDLED WITH
    2.5.3

README.md

@@ -33,17 +33,32 @@ DocuSeal is an open source platform that provides secure and efficient digital d
 [![Demo](https://github.com/docusealco/docuseal/assets/5418788/d8703ea3-361a-423f-8bfe-eff1bd9dbe14)](https://demo.docuseal.co)
 
 ## Features
-- [x] PDF form fields builder (WYSIWYG)
-- [x] 11 field types available (Signature, Date, File, Checkbox etc.)
-- [x] Multiple submitters per document
-- [x] Automated emails via SMTP
-- [x] Files storage on disk or AWS S3, Google Storage, Azure Cloud
-- [x] Automatic PDF eSignature
-- [x] PDF signature verification
-- [x] Users management
-- [x] Mobile-optimized
-- [x] API and Webhooks for integrations
-- [x] Easy to deploy in minutes
+- PDF form fields builder (WYSIWYG)
+- 12 field types available (Signature, Date, File, Checkbox etc.)
+- Multiple submitters per document
+- Automated emails via SMTP
+- Files storage on disk or AWS S3, Google Storage, Azure Cloud
+- Automatic PDF eSignature
+- PDF signature verification
+- Users management
+- Mobile-optimized
+- Signing available in 13 languages
+- API and Webhooks for integrations
+- Easy to deploy in minutes
+
+## Pro Features
+- Company logo and white-label
+- 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), [Angular](https://github.com/docusealco/docuseal-angular) or [JavaScript](https://www.docuseal.co/docs/embedded))
+- Embedded document form builder ([React](https://github.com/docusealco/docuseal-react), [Vue](https://github.com/docusealco/docuseal-vue), [Angular](https://github.com/docusealco/docuseal-angular) or [JavaScript](https://www.docuseal.co/docs/embedded))
+- [Learn more](https://www.docuseal.co/pricing)
 
 ## Deploy
 
@@ -52,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
 
@@ -77,7 +89,7 @@ sudo HOST=your-domain-name.com docker compose up
 ```
 
 ## For Businesses
-### Integrate seamless document signing into your web or mobile apps with DocuSeal!
+### Integrate seamless document signing into your web or mobile apps with DocuSeal
 
 At DocuSeal we have expertise and technologies to make documents creation, filling, signing and processing seamlessly integrated with your product. We specialize in working with various industries, including **Banking, Healthcare, Transport, Real Estate, eCommerce, KYC, CRM, and other software products** that require bulk document signing. By leveraging DocuSeal, we can assist in reducing the overall cost of developing and processing electronic documents while ensuring security and compliance with local electronic document laws.
 
@@ -87,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

@@ -0,0 +1,14 @@
+# Reporting a Vulnerability
+
+If you come across any security concern or vulnarability, please report the information via email to security@docuseal.co instead of opening a GitHub issue. We will promptly respond and will collaborate with you to validate the issue, and resolve it ASAP.
+
+**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,9 +8,15 @@ class AccountConfigsController < ApplicationController
     AccountConfig::ALLOW_TYPED_SIGNATURE,
     AccountConfig::FORCE_MFA,
     AccountConfig::ALLOW_TO_RESUBMIT,
-    AccountConfig::ESIGNING_PREFERENCE_KEY
+    AccountConfig::ESIGNING_PREFERENCE_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)
+
   def create
     @account_config.update!(account_config_params)
 
@@ -20,7 +26,7 @@ class AccountConfigsController < ApplicationController
   private
 
   def load_account_config
-    return head :not_found unless ALLOWED_KEYS.include?(account_config_params[:key])
+    raise InvalidKey unless ALLOWED_KEYS.include?(account_config_params[:key])
 
     @account_config =
       AccountConfig.find_or_initialize_by(account: current_account, key: account_config_params[:key])

app/controllers/api/active_storage_blobs_proxy_controller.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module Api
+  class ActiveStorageBlobsProxyController < ApiBaseController
+    include ActiveStorage::Streaming
+
+    skip_before_action :authenticate_user!
+    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])
+
+      if blob_uuid.blank? || (purp.present? && purp != 'blob') || (exp && exp < Time.current.to_i)
+        Rollbar.error('Blob not found') if defined?(Rollbar)
+
+        return head :not_found
+      end
+
+      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
+        http_cache_forever public: true do
+          response.headers['Accept-Ranges'] = 'bytes'
+          response.headers['Content-Length'] = blob.byte_size.to_s
+
+          send_blob_stream blob, disposition: params[:disposition]
+        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

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Api
+  class ActiveStorageBlobsProxyLegacyController < ApiBaseController
+    include ActiveStorage::Streaming
+
+    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)
+
+      blob = ActiveStorage::Blob.find_signed(params[:signed_blob_id] || params[:signed_id])
+
+      return head :not_found unless blob
+
+      is_permitted = blob.attachments.any? do |a|
+        (current_user && a.record.account.id == current_user.account_id) ||
+          a.record.account.account_configs.any? { |e| e.key == 'legacy_blob_proxy' } ||
+          a.name == 'logo'
+      end
+
+      unless is_permitted
+        Rollbar.error("Blob account not found: #{blob.id}") if defined?(Rollbar)
+
+        return render json: { error: 'Not authenticated' }, status: :unauthorized
+      end
+
+      if request.headers['Range'].present?
+        send_blob_byte_range_data blob, request.headers['Range']
+      else
+        http_cache_forever public: true do
+          response.headers['Accept-Ranges'] = 'bytes'
+          response.headers['Content-Length'] = blob.byte_size.to_s
+
+          send_blob_stream blob, disposition: params[:disposition]
+        end
+      end
+    end
+    # rubocop:enable Metrics
+  end
+end

app/controllers/api/api_base_controller.rb

@@ -19,15 +19,19 @@ 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.error(e) if defined?(Rollbar)
-
         render json: { error: e.message }, status: :forbidden
       end
 
       rescue_from JSON::ParserError do |e|
-        Rollbar.error(e) if defined?(Rollbar)
+        Rollbar.warning(e) if defined?(Rollbar)
 
         render json: { error: "JSON parse error: #{e.message}" }, status: :unprocessable_entity
       end
@@ -39,25 +43,39 @@ module Api
       result = relation.order(id: :desc)
                        .limit([params.fetch(:limit, DEFAULT_LIMIT).to_i, MAX_LIMIT].min)
 
-      result = result.where(relation.arel_table[:id].lt(params[:after])) if params[:after].present?
-      result = result.where(relation.arel_table[:id].gt(params[:before])) if params[:before].present?
+      result = result.where(id: ...params[:after].to_i) if params[:after].present?
+      result = result.where(id: (params[:before].to_i + 1)...) if params[:before].present?
 
       result
     end
 
     def authenticate_user!
-      @current_user ||=
-        if request.headers['X-Auth-Token'].present?
-          sha256 = Digest::SHA256.hexdigest(request.headers['X-Auth-Token'])
-
-          User.joins(:access_token).active.find_by(access_token: { sha256: })
-        end
-
       render json: { error: 'Not authenticated' }, status: :unauthorized unless current_user
     end
 
+    def current_user
+      super || @current_user ||=
+                 if request.headers['X-Auth-Token'].present?
+                   sha256 = Digest::SHA256.hexdigest(request.headers['X-Auth-Token'])
+
+                   User.joins(:access_token).active.find_by(access_token: { sha256: })
+                 end
+    end
+
     def current_account
       current_user&.account
     end
+
+    def set_noindex_headers
+      headers['X-Robots-Tag'] = 'noindex'
+    end
+
+    def set_cors_headers
+      headers['Access-Control-Allow-Origin'] = '*'
+      headers['Access-Control-Allow-Methods'] = 'POST, GET, PUT, PATCH, DELETE, OPTIONS'
+      headers['Access-Control-Allow-Headers'] = '*'
+      headers['Access-Control-Max-Age'] = '1728000'
+      headers['Access-Control-Allow-Credentials'] = true
+    end
   end
 end

app/controllers/api/submissions_controller.rb

@@ -17,7 +17,8 @@ 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: {
@@ -69,12 +70,12 @@ module Api
     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?
 
       if @template.fields.blank?
-        Rollbar.error("Template does not contain fields: #{@template.id}") if defined?(Rollbar)
+        Rollbar.warning("Template does not contain fields: #{@template.id}") if defined?(Rollbar)
 
         return render json: { error: 'Template does not contain fields' }, status: :unprocessable_entity
       end
@@ -92,14 +93,24 @@ module Api
         end
       end
 
-      render json: submissions.flat_map(&:submitters)
-    rescue Submitters::NormalizeValues::UnknownFieldName, Submitters::NormalizeValues::UnknownSubmitterName => e
+      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)
+
       render json: { error: e.message }, status: :unprocessable_entity
     end
 
     def destroy
       @submission.update!(archived_at: Time.current)
 
+      SendSubmissionArchivedWebhookRequestJob.perform_later(@submission)
+
       render json: @submission.as_json(only: %i[id], methods: %i[archived_at])
     end
 
@@ -151,7 +162,8 @@ module Api
                                  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] },
+          template: { only: %i[id name external_id created_at updated_at],
+                      methods: %i[folder_name] },
           created_by_user: { only: %i[id email first_name last_name] }
         }
       }
@@ -159,14 +171,15 @@ module Api
 
     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
-                                      readonly validation_pattern invalid_message]] }]]
+                          fields: [:name, :uuid, :default_value, :value, :title, :description,
+                                   :readonly, :redacted, :validation_pattern, :invalid_message,
+                                   { default_value: [], value: [] }] }]]
         }
       ]
 

app/controllers/api/submitter_form_views_controller.rb

@@ -8,6 +8,9 @@ module Api
     def create
       submitter = Submitter.find_by!(slug: params[:submitter_slug])
 
+      submitter.opened_at = Time.current
+      submitter.save
+
       SubmissionEvents.create_with_tracking_data(submitter, 'view_form', request)
 
       SendFormViewedWebhookRequestJob.perform_later(submitter)

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.lower.matches(term))
-      else
-        Submitters.search(submitters, params[:q])
-      end
-    end
-  end
-end

app/controllers/api/submitters_controller.rb

@@ -11,6 +11,12 @@ module Api
       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(
         submitters.preload(:template, :submission, :submission_events,
                            documents_attachments: :blob, attachments_attachments: :blob)
@@ -65,37 +71,74 @@ module Api
         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,
-        :completed, :phone, :application_key, :external_id,
+        :send_email, :send_sms, :reply_to, :completed_redirect_url, :uuid, :name, :email, :role,
+        :completed, :phone, :application_key, :external_id, :go_to_last,
         { metadata: {}, values: {}, readonly_fields: [], message: %i[subject body],
-          fields: [%i[name default_value readonly validation_pattern invalid_message]] }
+          fields: [[:name, :uuid, :default_value, :value,
+                    :readonly, :redacted, :validation_pattern, :invalid_message,
+                    { default_value: [], value: [] }]] }
       )
     end
 
     private
 
+    def maybe_filder_by_completed_at(submitters, params)
+      if params[:completed_after].present?
+        submitters = submitters.where(completed_at: Time.zone.parse(params[:completed_after])..)
+      end
+
+      if params[:completed_before].present?
+        submitters = submitters.where(completed_at: ..Time.zone.parse(params[:completed_before]))
+      end
+
+      submitters
+    end
+
     def assign_submitter_attrs(submitter, attrs)
-      submitter.email = Submissions.normalize_email(attrs[:email]) if attrs.key?(:email)
-      submitter.phone = attrs[:phone].to_s.gsub(/[^0-9+]/, '') if attrs.key?(:phone)
-      submitter.values = submitter.values.merge(attrs[:values].to_unsafe_h) if attrs[:values].present?
-      submitter.completed_at = attrs[:completed] ? Time.current : submitter.completed_at
-      submitter.external_id = attrs[:application_key] if attrs.key?(:application_key)
-      submitter.external_id = attrs[:external_id] if attrs.key?(:external_id)
-      submitter.metadata = attrs[:metadata] if attrs.key?(:metadata)
+      values = attrs[:values]&.to_unsafe_h || {}
 
       assign_submission_fields(submitter.submission)
+
+      phone_field_uuid = submitter.submission.template_fields.find do |f|
+        values[f['uuid']].present? && f['type'] == 'phone'
+      end&.dig('uuid')
+
+      submitter.email = Submissions.normalize_email(attrs[:email]) if attrs.key?(:email)
+
+      if attrs.key?(:phone)
+        submitter.phone = attrs[:phone].to_s.gsub(/[^0-9+]/, '')
+      elsif values[phone_field_uuid].present?
+        submitter.phone = values[phone_field_uuid].to_s.gsub(/[^0-9+]/, '')
+      end
+
+      values = values.except(phone_field_uuid)
+
+      submitter.values = submitter.values.merge(values) if values.present?
+      submitter.completed_at = attrs[:completed] ? Time.current : submitter.completed_at
+      submitter.metadata = attrs[:metadata] if attrs.key?(:metadata)
+
+      assign_external_id(submitter, attrs)
       assign_preferences(submitter, attrs)
 
       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
@@ -111,6 +154,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,16 +20,7 @@ module Api
 
       Templates::CloneAttachments.call(template: cloned_template, original_template: @template)
 
-      render json: cloned_template.as_json(serialize_params)
-    end
-
-    private
-
-    def serialize_params
-      {
-        include: { author: { only: %i[id email first_name last_name] },
-                   documents: { only: %i[id uuid], methods: %i[url filename] } }
-      }
+      render json: Templates::SerializeForApi.call(cloned_template)
     end
   end
 end

app/controllers/api/templates_controller.rb

@@ -7,10 +7,31 @@ module Api
     def index
       templates = filter_templates(@templates, params)
 
-      templates = paginate(templates.preload(:author, documents_attachments: :blob))
+      templates = paginate(templates.preload(:author, :folder))
+
+      schema_documents =
+        ActiveStorage::Attachment.where(record_id: templates.map(&:id),
+                                        record_type: 'Template',
+                                        name: :documents,
+                                        uuid: templates.flat_map { |t| t.schema.pluck('attachment_uuid') })
+                                 .preload(:blob)
+
+      preview_image_attachments =
+        ActiveStorage::Attachment.joins(:blob)
+                                 .where(blob: { filename: '0.jpg' })
+                                 .where(record_id: schema_documents.map(&:id),
+                                        record_type: 'ActiveStorage::Attachment',
+                                        name: :preview_images)
+                                 .preload(:blob)
 
       render json: {
-        data: templates.as_json(serialize_params),
+        data: templates.map do |t|
+          Templates::SerializeForApi.call(
+            t,
+            schema_documents.select { |e| e.record_id == t.id },
+            preview_image_attachments
+          )
+        end,
         pagination: {
           count: templates.size,
           next: templates.last&.id,
@@ -20,7 +41,7 @@ module Api
     end
 
     def show
-      render json: @template.as_json(serialize_params)
+      render json: Templates::SerializeForApi.call(@template)
     end
 
     def update
@@ -28,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])
@@ -61,29 +90,26 @@ module Api
       templates
     end
 
-    def serialize_params
-      {
-        methods: %i[application_key],
-        include: { author: { only: %i[id email first_name last_name] },
-                   documents: { only: %i[id uuid], methods: %i[url preview_image_url filename] } }
-      }
-    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,
+          fields: [[:uuid, :submitter_uuid, :name, :type,
+                    :required, :readonly, :default_value,
+                    :title, :description,
                     { 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: [:metadata],
-          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,9 +22,15 @@ 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.error(e) if defined?(Rollbar)
+      Rollbar.warning(e) if defined?(Rollbar)
 
       redirect_to root_path, alert: e.message
     end

app/controllers/console_redirect_controller.rb

@@ -5,6 +5,10 @@ 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
+
     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,62 +7,18 @@ class DashboardController < ApplicationController
   before_action :maybe_render_landing
   before_action :maybe_redirect_mfa_setup
 
-  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
+  skip_authorization_check
 
   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
+    if cookies.permanent[:dashboard_view] == 'submissions'
+      SubmissionsDashboardController.dispatch(:index, request, response)
     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:)
+      TemplatesDashboardController.dispatch(:index, request, response)
     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?
-      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
-
-    Templates.search(rel, params[:q])
-  end
-
   def maybe_redirect_product_url
     return if !Docuseal.multitenant? || signed_in?
 

app/controllers/encrypted_user_configs_controller.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class EncryptedUserConfigsController < ApplicationController
+  load_and_authorize_resource :encrypted_user_config
+
+  def destroy
+    @encrypted_user_config.destroy!
+
+    redirect_back(fallback_location: root_path)
+  end
+end

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
@@ -22,7 +27,13 @@ class ErrorsController < ActionController::Base
 
     respond_to do |f|
       f.json do
-        render json: { status: error_status_code }, status: error_status_code
+        set_cors_headers
+
+        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 }
@@ -31,6 +42,14 @@ class ErrorsController < ActionController::Base
 
   private
 
+  def set_cors_headers
+    headers['Access-Control-Allow-Origin'] = '*'
+    headers['Access-Control-Allow-Methods'] = 'POST, GET, PUT, PATCH, DELETE, OPTIONS'
+    headers['Access-Control-Allow-Headers'] = '*'
+    headers['Access-Control-Max-Age'] = '1728000'
+    headers['Access-Control-Allow-Credentials'] = true
+  end
+
   def error_status_code
     @error_status_code ||=
       ActionDispatch::ExceptionWrapper.new(request.env,

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

@@ -1,26 +1,58 @@
 # frozen_string_literal: true
 
 class PersonalizationSettingsController < ApplicationController
+  ALLOWED_KEYS = [
+    AccountConfig::FORM_COMPLETED_BUTTON_KEY,
+    AccountConfig::SUBMITTER_INVITATION_EMAIL_KEY,
+    AccountConfig::SUBMITTER_DOCUMENTS_COPY_EMAIL_KEY,
+    AccountConfig::SUBMITTER_COMPLETED_EMAIL_KEY,
+    AccountConfig::FORM_COMPLETED_MESSAGE_KEY
+  ].freeze
+
+  InvalidKey = Class.new(StandardError)
+
+  before_action :load_and_authorize_account_config, only: :create
+
   def show
     authorize!(:read, AccountConfig)
   end
 
   def create
-    account_config =
-      current_account.account_configs.find_or_initialize_by(key: account_config_params[:key])
+    if @account_config.value.is_a?(Hash)
+      @account_config.value = @account_config.value.reject do |_, v|
+        v.blank? && v != false
+      end
+    end
 
-    authorize!(:create, account_config)
-
-    account_config.update!(account_config_params)
+    if @account_config.value != false && @account_config.value.blank?
+      @account_config.destroy!
+    else
+      @account_config.save!
+    end
 
     redirect_back(fallback_location: settings_personalization_path, notice: 'Settings have been saved.')
   end
 
   private
 
+  def load_and_authorize_account_config
+    @account_config =
+      current_account.account_configs.find_or_initialize_by(key: account_config_params[:key])
+
+    @account_config.assign_attributes(account_config_params)
+
+    authorize!(:create, @account_config)
+
+    raise InvalidKey unless ALLOWED_KEYS.include?(@account_config.key)
+
+    @account_config
+  end
+
   def account_config_params
     attrs = params.require(:account_config).permit!
 
+    return attrs if attrs[:value].is_a?(String)
+
     attrs[:value]&.transform_values! do |value|
       if value.in?(%w[true false])
         value == 'true'

app/controllers/preview_document_page_controller.rb

@@ -6,7 +6,9 @@ class PreviewDocumentPageController < ActionController::API
   FORMAT = Templates::ProcessDocument::FORMAT
 
   def show
-    attachment = ActiveStorage::Attachment.find_by(uuid: params[:attachment_uuid])
+    attachment_uuid = ApplicationRecord.signed_id_verifier.verified(params[:signed_uuid], purpose: :attachment)
+
+    attachment = ActiveStorage::Attachment.find_by(uuid: attachment_uuid) if attachment_uuid
 
     return head :not_found unless attachment
 
@@ -21,9 +23,10 @@ class PreviewDocumentPageController < ActionController::API
         find_or_create_document_tempfile_path(attachment)
       end
 
-    io = Templates::ProcessDocument.generate_pdf_preview_from_file(attachment, file_path, params[:id].to_i)
+    preview_image =
+      Templates::ProcessDocument.generate_pdf_preview_from_file(attachment, file_path, params[:id].to_i)
 
-    render plain: io.tap(&:rewind).read, content_type: 'image/jpeg'
+    redirect_to preview_image.url, allow_other_host: true
   end
 
   def find_or_create_document_tempfile_path(attachment)

app/controllers/registrations_controller.rb

@@ -1,62 +0,0 @@
-# frozen_string_literal: true
-
-class RegistrationsController < Devise::RegistrationsController
-  prepend_before_action :require_no_authentication, only: [:show]
-  prepend_before_action :maybe_redirect_if_signed_in, only: [:show]
-
-  def show; end
-
-  def create
-    super
-
-    Accounts.create_default_template(resource.account) if resource.account.persisted?
-  end
-
-  private
-
-  def after_sign_up_path_for(...)
-    if params[:redir].present?
-      return console_redirect_index_path(redir: params[:redir]) if params[:redir].starts_with?(Docuseal::CONSOLE_URL)
-
-      return params[:redir]
-    end
-
-    super
-  end
-
-  def maybe_redirect_if_signed_in
-    return unless signed_in?
-    return if params[:redir].blank?
-
-    redirect_to after_sign_up_path_for(current_user), allow_other_host: true
-  end
-
-  def set_flash_message(key, kind, options = {})
-    return if key == :alert && kind == 'already_authenticated'
-
-    super
-  end
-
-  def build_resource(_hash = {})
-    account = Account.new(account_params)
-    account.timezone = Accounts.normalize_timezone(account.timezone)
-
-    self.resource = account.users.new(user_params)
-
-    account.name ||= resource.full_name if params[:action] == 'create'
-  end
-
-  def user_params
-    return {} if params[:user].blank?
-
-    params.require(:user).permit(:first_name, :last_name, :email, :password).compact_blank.tap do |attrs|
-      attrs[:password] ||= SecureRandom.hex if params[:action] == 'create'
-    end
-  end
-
-  def account_params
-    return {} if params[:account].blank?
-
-    params.require(:account).permit(:name, :timezone).compact_blank
-  end
-end

app/controllers/send_submission_email_controller.rb

@@ -12,13 +12,18 @@ class SendSubmissionEmailController < ApplicationController
   def create
     @submitter =
       if params[:template_slug]
-        Submitter.joins(submission: :template).find_by!(email: params[:email],
+        Submitter.joins(submission: :template).find_by!(email: params[:email].to_s.downcase,
                                                         template: { slug: params[:template_slug] })
+      elsif params[:submission_slug]
+        Submitter.joins(:submission).find_by!(email: params[:email].to_s.downcase,
+                                              submission: { slug: params[:submission_slug] })
       else
         Submitter.find_by!(slug: params[:submitter_slug])
       end
 
-    SubmitterMailer.documents_copy_email(@submitter).deliver_later!
+    RateLimit.call("send-email-#{@submitter.id}", limit: 2, ttl: 5.minutes)
+
+    SubmitterMailer.documents_copy_email(@submitter, sig: true).deliver_later!
 
     respond_to do |f|
       f.html { redirect_to success_send_submission_email_index_path }

app/controllers/sessions_controller.rb

@@ -4,12 +4,16 @@ class SessionsController < Devise::SessionsController
   before_action :configure_permitted_parameters
 
   def create
-    if Docuseal.multitenant? && !User.exists?(email: sign_in_params[:email])
+    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
 
-    if User.exists?(email: sign_in_params[:email], otp_required_for_login: true) && sign_in_params[:otp_attempt].blank?
+    if User.exists?(email:, otp_required_for_login: true) && sign_in_params[:otp_attempt].blank?
       return render :otp, locals: { resource: User.new(sign_in_params) }, status: :unprocessable_entity
     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

@@ -15,6 +15,8 @@ class StartFormController < ApplicationController
   end
 
   def update
+    return redirect_to start_form_path(@template.slug) if @template.archived_at?
+
     @submitter = Submitter.where(submission: @template.submissions.where(archived_at: nil))
                           .order(id: :desc)
                           .then { |rel| params[:resubmit].present? ? rel.where(completed_at: nil) : rel }

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

@@ -6,23 +6,8 @@ class SubmissionsController < ApplicationController
 
   load_and_authorize_resource :submission, only: %i[show destroy]
 
-  PRELOAD_ALL_PAGES_AMOUNT = 200
-
   def show
-    ActiveRecord::Associations::Preloader.new(
-      records: [@submission],
-      associations: [:template, { template_schema_documents: :blob }]
-    ).call
-
-    total_pages =
-      @submission.template_schema_documents.sum { |e| e.metadata.dig('pdf', 'number_of_pages').to_i }
-
-    if total_pages < PRELOAD_ALL_PAGES_AMOUNT
-      ActiveRecord::Associations::Preloader.new(
-        records: @submission.template_schema_documents,
-        associations: [:blob, { preview_images_attachments: :blob }]
-      ).call
-    end
+    @submission = Submissions.preload_with_pages(@submission)
 
     render :show, layout: 'plain'
   end
@@ -34,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)
@@ -65,11 +52,20 @@ class SubmissionsController < ApplicationController
   def destroy
     @submission.update!(archived_at: Time.current)
 
+    SendSubmissionArchivedWebhookRequestJob.perform_later(@submission)
+
     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_download_controller.rb

@@ -4,8 +4,20 @@ class SubmissionsDownloadController < ApplicationController
   skip_before_action :authenticate_user!
   skip_authorization_check
 
+  TTL = 40.minutes
+  FILES_TTL = 5.minutes
+
   def index
-    submitter = Submitter.find_by(slug: params[:submitter_slug])
+    submitter = Submitter.find_signed(params[:sig], purpose: :download_completed) if params[:sig].present?
+
+    signature_valid =
+      if submitter&.slug == params[:submitter_slug]
+        true
+      else
+        submitter = nil
+      end
+
+    submitter ||= Submitter.find_by!(slug: params[:submitter_slug])
 
     Submissions::EnsureResultGenerated.call(submitter)
 
@@ -13,11 +25,26 @@ class SubmissionsDownloadController < ApplicationController
 
     Submissions::EnsureResultGenerated.call(last_submitter)
 
-    urls =
-      Submitters.select_attachments_for_download(last_submitter).map do |attachment|
-        helpers.rails_blob_url(attachment)
-      end
+    return head :not_found unless last_submitter.completed_at?
 
-    render json: urls
+    if last_submitter.completed_at < TTL.ago && !signature_valid && !current_user_submitter?(last_submitter)
+      Rollbar.info("TTL: #{last_submitter.id}") if defined?(Rollbar)
+
+      return head :not_found
+    end
+
+    render json: build_urls(last_submitter)
+  end
+
+  private
+
+  def current_user_submitter?(submitter)
+    current_user && current_user.account.submitters.exists?(id: submitter.id)
+  end
+
+  def build_urls(submitter)
+    Submitters.select_attachments_for_download(submitter).map do |attachment|
+      ActiveStorage::Blob.proxy_url(attachment.blob, expires_at: FILES_TTL.from_now.to_i)
+    end
   end
 end

app/controllers/submissions_preview_controller.rb

@@ -4,26 +4,48 @@ class SubmissionsPreviewController < ApplicationController
   skip_before_action :authenticate_user!
   skip_authorization_check
 
-  PRELOAD_ALL_PAGES_AMOUNT = 200
+  TTL = 40.minutes
 
   def show
-    @submission = Submission.find_by!(slug: params[:slug])
+    submitter = Submitter.find_signed(params[:sig], purpose: :download_completed) if params[:sig].present?
 
-    ActiveRecord::Associations::Preloader.new(
-      records: [@submission],
-      associations: [:template, { template_schema_documents: :blob }]
-    ).call
+    signature_valid =
+      if submitter && submitter.submission.slug == params[:slug]
+        @submission = submitter.submission
 
-    total_pages =
-      @submission.template_schema_documents.sum { |e| e.metadata.dig('pdf', 'number_of_pages').to_i }
+        true
+      end
 
-    if total_pages < PRELOAD_ALL_PAGES_AMOUNT
-      ActiveRecord::Associations::Preloader.new(
-        records: @submission.template_schema_documents,
-        associations: [:blob, { preview_images_attachments: :blob }]
-      ).call
+    @submission ||= Submission.find_by!(slug: params[:slug])
+
+    if !@submission.submitters.all?(&:completed_at?) && current_user.blank?
+      raise ActionController::RoutingError, 'Not Found'
     end
 
+    if !submission_valid_ttl?(@submission) && !signature_valid
+      Rollbar.info("TTL: #{@submission.id}") if defined?(Rollbar)
+
+      return redirect_to submissions_preview_completed_path(@submission.slug)
+    end
+
+    @submission = Submissions.preload_with_pages(@submission)
+
     render 'submissions/show', layout: 'plain'
   end
+
+  def completed
+    @submission = Submission.find_by!(slug: params[:submissions_preview_slug])
+
+    render :completed, layout: 'form'
+  end
+
+  private
+
+  def submission_valid_ttl?(submission)
+    return true if current_user && current_user.account.submissions.exists?(id: submission.id)
+
+    last_submitter = submission.submitters.select(&:completed_at?).max_by(&:completed_at)
+
+    last_submitter && last_submitter.completed_at > TTL.ago
+  end
 end

app/controllers/submit_form_controller.rb

@@ -31,8 +31,6 @@ class SubmitFormController < ApplicationController
 
     Submitters::MaybeUpdateDefaultValues.call(@submitter, current_user)
 
-    cookies[:submitter_sid] = @submitter.signed_id
-
     render(@submitter.submission.template.archived_at? || @submitter.submission.archived_at? ? :archived : :show)
   end
 
@@ -57,7 +55,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/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, false, true))
+    else
+      Submitters.search(submitters, params[:q])
+    end
+  end
+end

app/controllers/submitters_send_email_controller.rb

@@ -7,6 +7,8 @@ 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

app/controllers/template_documents_controller.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+class TemplateDocumentsController < ApplicationController
+  load_and_authorize_resource :template
+
+  def create
+    return head :unprocessable_entity if params[:blobs].blank? && params[:files].blank?
+
+    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
 
@@ -33,7 +33,7 @@ class TemplatesController < ApplicationController
     @template_data =
       @template.as_json.merge(
         documents: @template.schema_documents.as_json(
-          methods: [:metadata],
+          methods: %i[metadata signed_uuid],
           include: { preview_images: { methods: %i[url metadata filename] } }
         )
       ).to_json
@@ -51,17 +51,28 @@ class TemplatesController < ApplicationController
       @template.folder = TemplateFolders.find_or_create_by_name(current_user, params[:folder_name])
     end
 
-    @template.account = current_account
+    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
+    else
+      @template.account = current_account
+    end
 
     if @template.save
       Templates::CloneAttachments.call(template: @template, original_template: @base_template) if @base_template
 
-      redirect_to edit_template_path(@template)
+      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)
+
+    head :ok
+  end
+
   def destroy
     notice =
       if params[:permanently].present?
@@ -82,7 +93,31 @@ class TemplatesController < ApplicationController
   private
 
   def template_params
-    params.require(:template).permit(:name)
+    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
+
+  def maybe_redirect_to_template(template)
+    if template.account == current_account
+      redirect_to(edit_template_path(@template))
+    else
+      redirect_back(fallback_location: root_path, notice: 'Template has been clonned')
+    end
   end
 
   def load_base_template

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,22 @@
+# 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.save!
+
+    head :ok
+  end
+
+  private
+
+  def template_params
+    params.require(:template).permit(preferences: %i[bcc_completed request_email_subject request_email_body])
+  end
+end

app/controllers/templates_preview_controller.rb

@@ -12,7 +12,7 @@ class TemplatesPreviewController < ApplicationController
     @template_data =
       @template.as_json.merge(
         documents: @template.schema_documents.as_json(
-          methods: [:metadata],
+          methods: %i[metadata signed_uuid],
           include: { preview_images: { methods: %i[url metadata filename] } }
         )
       ).to_json

app/controllers/user_configs_controller.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+class UserConfigsController < ApplicationController
+  before_action :load_user_config
+  authorize_resource :user_config
+
+  ALLOWED_KEYS = [
+    UserConfig::RECEIVE_COMPLETED_EMAIL
+  ].freeze
+
+  InvalidKey = Class.new(StandardError)
+
+  def create
+    @user_config.update!(user_config_params)
+
+    head :ok
+  end
+
+  private
+
+  def load_user_config
+    raise InvalidKey unless ALLOWED_KEYS.include?(user_config_params[:key])
+
+    @user_config =
+      UserConfig.find_or_initialize_by(user: current_user, key: user_config_params[:key])
+  end
+
+  def user_config_params
+    params.required(:user_config).permit!.tap do |attrs|
+      attrs[:value] = attrs[:value] == '1' if attrs[:value].in?(%w[1 0])
+    end
+  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
-  authorize_resource :user, only: :create
+  before_action :build_user, only: %i[new create]
+  authorize_resource :user, only: %i[new create]
 
   def index
-    @pagy, @users = pagy(@users.active.order(id: :desc))
+    @users =
+      if params[:status] == 'archived'
+        @users.archived
+      else
+        @users.active
+      end
+
+    @pagy, @users = pagy(@users.where(account: current_account).order(id: :desc))
   end
 
   def new; end
@@ -15,10 +22,19 @@ 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)
+
+      @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 +43,11 @@ 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 @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 +60,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 +81,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?
-                  Docuseal::CERTS
-                else
-                  EncryptedConfig.find_by(key: EncryptedConfig::ESIGN_CERTS_KEY)&.value || {}
-                end
+    cert_data =
+      if Docuseal.multitenant?
+        value = EncryptedConfig.find_by(account: current_account, key: EncryptedConfig::ESIGN_CERTS_KEY)&.value || {}
+
+        Docuseal::CERTS.merge(value)
+      else
+        EncryptedConfig.find_by(key: EncryptedConfig::ESIGN_CERTS_KEY)&.value || {}
+      end
 
     default_pkcs = GenerateCertificate.load_pkcs(cert_data)
 
@@ -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,33 @@
+# frozen_string_literal: true
+
+class WebhookPreferencesController < ApplicationController
+  EVENTS = %w[
+    form.viewed
+    form.started
+    form.completed
+    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/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'
 
@@ -53,6 +57,9 @@ window.customElements.define('folder-autocomplete', FolderAutocomplete)
 window.customElements.define('signature-form', SignatureForm)
 window.customElements.define('submit-form', SubmitForm)
 window.customElements.define('prompt-password', PromptPassword)
+window.customElements.define('emails-textarea', EmailsTextarea)
+window.customElements.define('toggle-cookies', ToggleCookies)
+window.customElements.define('toggle-on-submit', ToggleOnSubmit)
 
 document.addEventListener('turbo:before-fetch-request', encodeMethodIntoRequestBody)
 document.addEventListener('turbo:submit-end', async (event) => {
@@ -89,10 +96,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,
-      isDirectUpload: this.dataset.isDirectUpload === 'true'
+      acceptFileTypes: this.dataset.acceptFileTypes
+    })
+
+    this.app.mount(this.appElem)
+
+    this.appendChild(this.appElem)
+  }
+
+  disconnectedCallback () {
+    this.app?.unmount()
+    this.appElem?.remove()
+  }
+})
+
+window.customElements.define('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

@@ -75,16 +75,21 @@ button[disabled] .enabled {
   @apply select base-input w-full font-normal;
 }
 
-.tooltip-bottom-start:before {
-  transform: translateX(-30%);
+.tooltip-bottom-end:before {
+  transform: translateX(-95%);
   top: var(--tooltip-offset);
   left: 100%;
   right: auto;
   bottom: auto;
 }
 
-.tooltip-bottom-start:after {
-  transform: translateX(-75%);
+.tooltip-pre:before {
+  white-space: pre;
+  text-align: left;
+}
+
+.tooltip-bottom-end:after {
+  transform: translateX(-25%);
   border-color: transparent transparent var(--tooltip-color) transparent;
   top: var(--tooltip-tail-offset);
   left: 50%;
@@ -125,3 +130,7 @@ button[disabled] .enabled {
   outline-offset: 3px;
   outline-color: hsl(var(--bc) / 0.2);
 }
+
+select:required:invalid {
+  color: gray !important;
+}

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

@@ -48,9 +48,9 @@ export default targetable(class extends HTMLElement {
     fileRequests.reduce(
       (prevPromise, request) => prevPromise.then(() => request()),
       Promise.resolve()
-    )
-
-    this.toggleState()
+    ).finally(() => {
+      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') {
-      const { DirectUpload } = await import('@rails/activestorage')
-
-      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()
-      }
+    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/submitter_autocomplete.js

@@ -7,6 +7,7 @@ export default class extends HTMLElement {
       preventSubmit: 1,
       minLength: 1,
       showOnFocus: true,
+      debounceWaitMs: 200,
       onSelect: this.onSelect,
       render: this.render,
       fetch: this.fetch
@@ -27,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 }))
       }
     })
   }
@@ -37,7 +40,9 @@ export default class extends HTMLElement {
     if (q) {
       const queryParams = new URLSearchParams({ q, field: this.dataset.field })
 
-      fetch('/api/submitters_autocomplete?' + queryParams).then(async (resp) => {
+      this.currentFetch ||= fetch('/submitters_autocomplete?' + queryParams)
+
+      this.currentFetch.then(async (resp) => {
         const items = await resp.json()
 
         if (q.length < 3) {
@@ -47,6 +52,8 @@ export default class extends HTMLElement {
         }
       }).catch(() => {
         resolve([])
+      }).finally(() => {
+        this.currentFetch = null
       })
     } else {
       resolve([])

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/form.js

@@ -11,14 +11,15 @@ window.customElements.define('submission-form', class extends HTMLElement {
     this.app = createApp(Form, {
       submitter: JSON.parse(this.dataset.submitter),
       canSendEmail: this.dataset.canSendEmail === 'true',
-      isDirectUpload: this.dataset.isDirectUpload === 'true',
       goToLast: this.dataset.goToLast === 'true',
       isDemo: this.dataset.isDemo === 'true',
       attribution: this.dataset.attribution !== 'false',
       withConfetti: this.dataset.withConfetti !== 'false',
       withTypedSignature: this.dataset.withTypedSignature !== 'false',
+      authenticityToken: document.querySelector('meta[name="csrf-token"]')?.content,
       values: reactive(JSON.parse(this.dataset.values)),
-      completedButton: JSON.parse(this.dataset.completedButton),
+      completedButton: JSON.parse(this.dataset.completedButton || '{}'),
+      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/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(', ') }}
@@ -167,13 +168,14 @@
       <span
         v-else
         class="whitespace-pre-wrap"
+        :class="{ 'w-full': field.preferences?.align }"
       >{{ modelValue }}</span>
     </div>
   </div>
 </template>
 
 <script>
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1 } from '@tabler/icons-vue'
 
 export default {
   name: 'FieldArea',
@@ -240,6 +242,7 @@ export default {
         signature: this.t('signature'),
         initials: this.t('initials'),
         date: this.t('date'),
+        number: this.t('number'),
         image: this.t('image'),
         file: this.t('file'),
         select: this.t('select'),
@@ -252,6 +255,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)
     },
@@ -260,6 +270,7 @@ export default {
         text: IconTextSize,
         signature: IconWritingSign,
         date: IconCalendarEvent,
+        number: IconSquareNumber1,
         image: IconPhoto,
         initials: IconLetterCaseUpper,
         file: IconPaperclip,
@@ -336,17 +347,19 @@ export default {
   },
   watch: {
     modelValue () {
-      if (this.field.type === 'text' && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > this.modelValue.length)) {
-        this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? this.modelValue.length : 0
-      }
+      this.$nextTick(() => {
+        if (['date', 'text', 'number'].includes(this.field.type) && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > `${this.modelValue}`.length)) {
+          this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? `${this.modelValue}`.length : 0
+        }
+      })
     }
   },
   mounted () {
-    if (this.field.type === 'text' && this.$refs.textContainer) {
-      this.$nextTick(() => {
-        this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? this.modelValue.length : 0
-      })
-    }
+    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
+      }
+    })
   },
   methods: {
     optionValue (option) {

app/javascript/submission_form/attachment_step.vue

@@ -41,10 +41,16 @@
         :name="`values[${field.uuid}][]`"
       >
     </template>
+    <div
+      v-if="field.description && !modelValue.length"
+      dir="auto"
+      class="mb-3 px-1"
+    >
+      <MarkdownContent :string="field.description" />
+    </div>
     <FileDropzone
       :message="`${t('upload')} ${field.name || t('files')}${field.required ? '' : ` (${t('optional')})`}`"
       :submitter-slug="submitterSlug"
-      :is-direct-upload="isDirectUpload"
       :multiple="true"
       @upload="onUpload"
     />
@@ -53,12 +59,14 @@
 
 <script>
 import FileDropzone from './dropzone'
+import MarkdownContent from './markdown_content'
 import { IconPaperclip, IconTrashX } from '@tabler/icons-vue'
 
 export default {
   name: 'AttachmentStep',
   components: {
     FileDropzone,
+    MarkdownContent,
     IconPaperclip,
     IconTrashX
   },
@@ -77,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 () {
@@ -211,9 +227,14 @@ export default {
       fileRequests.reduce(
         (prevPromise, request) => prevPromise.then(() => request()),
         Promise.resolve()
-      )
-
-      this.isDownloading = false
+      ).finally(() => {
+        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/crop_canvas.js

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

app/javascript/submission_form/date_step.vue

@@ -1,20 +1,37 @@
 <template>
   <div dir="auto">
-    <div class="flex justify-between items-center w-full mb-2">
+    <div
+      class="flex justify-between items-center w-full"
+      :class="{ 'mb-2': !field.description }"
+    >
       <label
         :for="field.uuid"
         class="label text-2xl"
-      >{{ field.name && showFieldNames ? field.name : t('date') }}
-        <template v-if="!field.required">({{ t('optional') }})</template>
+      >
+        <MarkdownContent
+          v-if="field.title"
+          :string="field.title"
+        />
+        <template v-else>
+          {{ field.name && showFieldNames ? field.name : t('date') }}
+          <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') }}
       </button>
     </div>
+    <div
+      v-if="field.description"
+      class="mb-3 px-1"
+      dir="auto"
+    >
+      <MarkdownContent :string="field.description" />
+    </div>
     <AppearsOn :field="field" />
     <div class="text-center">
       <input
@@ -33,11 +50,13 @@
 <script>
 import { IconCalendarCheck } from '@tabler/icons-vue'
 import AppearsOn from './appears_on'
+import MarkdownContent from './markdown_content'
 
 export default {
   name: 'DateStep',
   components: {
     IconCalendarCheck,
+    MarkdownContent,
     AppearsOn
   },
   inject: ['t'],

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) {
-        const { DirectUpload } = await import('@rails/activestorage')
+      return await Promise.all(
+        Array.from(files).map(async (file) => {
+          const formData = new FormData()
 
-        const blobs = await Promise.all(
-          Array.from(files).map(async (file) => {
-            const upload = new DirectUpload(
-              file,
-              '/direct_uploads',
-              this.$refs.input
-            )
+          if (file.type === 'image/bmp') {
+            file = await this.convertBmpToPng(file)
+          }
 
-            return new Promise((resolve, reject) => {
-              upload.create((error, blob) => {
-                if (error) {
-                  console.error(error)
+          formData.append('file', file)
+          formData.append('submitter_slug', this.submitterSlug)
+          formData.append('name', 'attachments')
 
-                  return reject(error)
-                } else {
-                  return resolve(blob)
-                }
-              })
-            }).catch((error) => {
-              console.error(error)
-            })
+          return fetch(this.baseUrl + '/api/attachments', {
+            method: 'POST',
+            body: formData
+          }).then(resp => resp.json()).then((data) => {
+            return data
           })
-        )
+        })).then((result) => {
+        this.$emit('upload', result)
+      }).finally(() => {
+        this.isLoading = false
+      })
+    },
+    convertBmpToPng (bmpFile) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
 
-        return await Promise.all(
-          blobs.map((blob) => {
-            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()
+        reader.onload = function (event) {
+          const img = new Image()
 
-            formData.append('file', file)
-            formData.append('submitter_slug', this.submitterSlug)
-            formData.append('name', 'attachments')
+          img.onload = function () {
+            const canvas = document.createElement('canvas')
+            const ctx = canvas.getContext('2d')
 
-            return fetch(this.baseUrl + '/api/attachments', {
-              method: 'POST',
-              body: formData
-            }).then(resp => resp.json()).then((data) => {
-              return data
-            })
-          })).then((result) => {
-          this.$emit('upload', result)
-        }).finally(() => {
-          this.isLoading = false
-        })
-      }
+            canvas.width = img.width
+            canvas.height = img.height
+            ctx.drawImage(img, 0, 0)
+            canvas.toBlob(function (blob) {
+              const newFile = new File([blob], bmpFile.name.replace(/\.\w+$/, '.png'), { type: 'image/png' })
+              resolve(newFile)
+            }, 'image/png')
+          }
+
+          img.src = event.target.result
+        }
+        reader.onerror = reject
+        reader.readAsDataURL(bmpFile)
+      })
     }
   }
 }

app/javascript/submission_form/form.vue

@@ -8,13 +8,28 @@
     :current-step="currentStepFields"
     @focus-step="[saveStep(), goToStep($event, false, true), currentField.type !== 'checkbox' ? isFormVisible = true : '']"
   />
+  <FormulaFieldAreas
+    v-if="formulaFields.length"
+    :fields="formulaFields"
+    :values="values"
+  />
   <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"
-    @click.prevent="isFormVisible = true"
+    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)]"
   >
-    {{ t('submit_form') }}
+    <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>
     <IconArrowsDiagonal
       class="absolute right-0 mr-4"
       :width="20"
@@ -32,7 +47,7 @@
       v-if="!isCompleted"
       id="minimize_form_button"
       class="absolute right-0 mr-2 mt-2 top-0 hidden md:block"
-      title="Minimize"
+      :title="t('minimize')"
       @click.prevent="isFormVisible = false"
     >
       <IconArrowsDiagonalMinimize2
@@ -40,13 +55,16 @@
         :height="20"
       />
     </button>
-    <div>
+    <div
+      :class="{ 'md:px-4': isBreakpointMd }"
+    >
       <form
         v-if="!isCompleted"
         ref="form"
         :action="submitPath"
         method="post"
-        :class="{ 'md:mx-16': isBreakpointMd }"
+        class="mx-auto"
+        :style="{ maxWidth: isBreakpointMd ? '582px' : '' }"
         @submit.prevent="submitStep"
       >
         <input
@@ -69,6 +87,14 @@
               @focus="scrollIntoField(currentField)"
             />
           </div>
+          <NumberStep
+            v-else-if="currentField.type === 'number'"
+            :key="currentField.uuid"
+            v-model="values[currentField.uuid]"
+            :show-field-names="showFieldNames"
+            :field="currentField"
+            @focus="scrollIntoField(currentField)"
+          />
           <DateStep
             v-else-if="currentField.type === 'date'"
             :key="currentField.uuid"
@@ -79,17 +105,32 @@
           />
           <div v-else-if="currentField.type === 'select'">
             <label
-              v-if="showFieldNames && currentField.name"
+              v-if="showFieldNames && (currentField.name || currentField.title)"
               :for="currentField.uuid"
               dir="auto"
-              class="label text-2xl mb-2"
-            >{{ currentField.name }}
-              <template v-if="!currentField.required">({{ t('optional') }})</template>
+              class="label text-2xl"
+              :class="{ 'mb-2': !currentField.description }"
+            >
+              <MarkdownContent
+                v-if="currentField.title"
+                :string="currentField.title"
+              />
+              <template v-else>
+                {{ currentField.name }}
+                <template v-if="!currentField.required">({{ t('optional') }})</template>
+              </template>
             </label>
             <div
               v-else
               class="py-1"
             />
+            <div
+              v-if="currentField.description"
+              dir="auto"
+              class="mb-3 px-1"
+            >
+              <MarkdownContent :string="currentField.description" />
+            </div>
             <AppearsOn :field="currentField" />
             <select
               :id="currentField.uuid"
@@ -118,13 +159,28 @@
           </div>
           <div v-else-if="currentField.type === 'radio'">
             <label
-              v-if="showFieldNames && currentField.name"
+              v-if="showFieldNames && (currentField.name || currentField.title)"
               :for="currentField.uuid"
               dir="auto"
-              class="label text-2xl mb-2"
-            >{{ currentField.name }}
-              <template v-if="!currentField.required">({{ t('optional') }})</template>
+              class="label text-2xl"
+              :class="{ 'mb-2': !currentField.description }"
+            >
+              <MarkdownContent
+                v-if="currentField.title"
+                :string="currentField.title"
+              />
+              <template v-else>
+                {{ currentField.name }}
+                <template v-if="!currentField.required">({{ t('optional') }})</template>
+              </template>
             </label>
+            <div
+              v-if="currentField.description"
+              dir="auto"
+              class="mb-3 px-1"
+            >
+              <MarkdownContent :string="currentField.description" />
+            </div>
             <div class="flex w-full max-h-44 overflow-y-auto">
               <div
                 v-if="!showFieldNames || (currentField.options.every((e) => !e.value) && currentField.options.length > 4)"
@@ -156,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}` }}
@@ -175,66 +232,77 @@
           />
           <div
             v-else-if="currentField.type === 'checkbox'"
-            class="flex w-full max-h-44 overflow-y-auto"
           >
-            <input
-              type="hidden"
-              name="cast_boolean"
-              value="true"
-            >
             <div
-              class="space-y-3.5 mx-auto"
+              v-if="currentField.description"
+              dir="auto"
+              class="mb-3 px-1"
             >
-              <template v-if="isAnonymousChecboxes || !showFieldNames">
-                <span class="text-xl">
-                  {{ t('complete_hightlighted_checkboxes_and_click') }} <span class="font-semibold">{{ stepFields.length === currentStep + 1 ? t('submit') : t('next') }}</span>.
-                </span>
-                <input
-                  v-for="field in currentStepFields"
-                  :key="field.uuid"
-                  type="hidden"
-                  :name="`values[${field.uuid}]`"
-                  :value="!!values[field.uuid]"
-                >
-              </template>
-              <template v-else>
-                <div
-                  v-for="(field, index) in currentStepFields"
-                  :key="field.uuid"
-                >
-                  <label
-                    :for="field.uuid"
-                    class="flex items-center space-x-3"
+              <MarkdownContent :string="currentField.description" />
+            </div>
+            <div
+              class="flex w-full max-h-44 overflow-y-auto"
+            >
+              <input
+                type="hidden"
+                name="cast_boolean"
+                value="true"
+              >
+              <div
+                class="space-y-3.5 mx-auto"
+              >
+                <template v-if="isAnonymousChecboxes || !showFieldNames">
+                  <span class="text-xl">
+                    {{ t('complete_hightlighted_checkboxes_and_click') }} <span class="font-semibold">{{ stepFields.length === currentStep + 1 ? t('submit') : t('next') }}</span>.
+                  </span>
+                  <input
+                    v-for="field in currentStepFields"
+                    :key="field.uuid"
+                    type="hidden"
+                    :name="`values[${field.uuid}]`"
+                    :value="!!values[field.uuid]"
                   >
-                    <input
-                      type="hidden"
-                      :name="`values[${field.uuid}]`"
-                      :value="!!values[field.uuid]"
+                </template>
+                <template v-else>
+                  <div
+                    v-for="(field, index) in currentStepFields"
+                    :key="field.uuid"
+                  >
+                    <label
+                      :for="field.uuid"
+                      class="flex items-center space-x-3"
                     >
-                    <input
-                      :id="field.uuid"
-                      type="checkbox"
-                      class="base-checkbox !h-7 !w-7"
-                      :oninvalid="`this.setCustomValidity('${t('please_check_the_box_to_continue')}')`"
-                      :onchange="`this.setCustomValidity(validity.valueMissing ? '${t('please_check_the_box_to_continue')}' : '');`"
-                      :required="field.required"
-                      :checked="!!values[field.uuid]"
-                      @click="[scrollIntoField(field), values[field.uuid] = !values[field.uuid]]"
-                    >
-                    <span
-                      v-if="field.title"
-                      class="text-xl"
-                      v-html="field.title"
-                    />
-                    <span
-                      v-else
-                      class="text-xl"
-                    >
-                      {{ field.name || field.type + ' ' + (index + 1) }}
-                    </span>
-                  </label>
-                </div>
-              </template>
+                      <input
+                        type="hidden"
+                        :name="`values[${field.uuid}]`"
+                        :value="!!values[field.uuid]"
+                      >
+                      <input
+                        :id="field.uuid"
+                        type="checkbox"
+                        class="base-checkbox !h-7 !w-7"
+                        :oninvalid="`this.setCustomValidity('${t('please_check_the_box_to_continue')}')`"
+                        :onchange="`this.setCustomValidity(validity.valueMissing ? '${t('please_check_the_box_to_continue')}' : '');`"
+                        :required="field.required"
+                        :checked="!!values[field.uuid]"
+                        @click="[scrollIntoField(field), values[field.uuid] = !values[field.uuid]]"
+                      >
+                      <span
+                        v-if="field.title"
+                        class="text-xl"
+                      >
+                        <MarkdownContent :string="field.title" />
+                      </span>
+                      <span
+                        v-else
+                        class="text-xl"
+                      >
+                        {{ field.name || field.type + ' ' + (index + 1) }}
+                      </span>
+                    </label>
+                  </div>
+                </template>
+              </div>
             </div>
           </div>
           <ImageStep
@@ -242,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"
@@ -254,8 +321,7 @@
             :key="currentField.uuid"
             v-model="values[currentField.uuid]"
             :field="currentField"
-            :previous-value="previousSignatureValue"
-            :is-direct-upload="isDirectUpload"
+            :previous-value="previousSignatureValueFor(currentField)"
             :with-typed-signature="withTypedSignature"
             :attachments-index="attachmentsIndex"
             :submitter-slug="submitterSlug"
@@ -271,7 +337,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"
@@ -284,7 +349,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"
@@ -296,7 +360,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)"
@@ -330,7 +396,7 @@
                 v-if="isSubmitting"
                 class="mr-1 animate-spin"
               />
-              <span v-if="stepFields.length === currentStep + 1">
+              <span v-if="alwaysMinimize || stepFields.length === currentStep + 1">
                 {{ t('submit') }}
               </span>
               <span v-else>
@@ -354,6 +420,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"
@@ -385,6 +452,7 @@
 
 <script>
 import FieldAreas from './areas'
+import FormulaFieldAreas from './formula_areas'
 import ImageStep from './image_step'
 import SignatureStep from './signature_step'
 import InitialsStep from './initials_step'
@@ -393,12 +461,36 @@ import MultiSelectStep from './multi_select_step'
 import PhoneStep from './phone_step'
 import PaymentStep from './payment_step'
 import TextStep from './text_step'
+import NumberStep from './number_step'
 import DateStep from './date_step'
+import MarkdownContent from './markdown_content'
 import FormCompleted from './completed'
-import { IconInnerShadowTop, IconArrowsDiagonal, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
+import { IconInnerShadowTop, IconArrowsDiagonal, IconWritingSign, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
 import AppearsOn from './appears_on'
 import i18n from './i18n'
 
+const isEmpty = (obj) => {
+  if (obj == null) return true
+
+  if (Array.isArray(obj)) {
+    return obj.length === 0
+  }
+
+  if (typeof obj === 'string') {
+    return obj.trim().length === 0
+  }
+
+  if (typeof obj === 'object') {
+    return Object.keys(obj).length === 0
+  }
+
+  if (obj === false) {
+    return true
+  }
+
+  return false
+}
+
 export default {
   name: 'SubmissionForm',
   components: {
@@ -406,6 +498,7 @@ export default {
     ImageStep,
     SignatureStep,
     AppearsOn,
+    IconWritingSign,
     AttachmentStep,
     InitialsStep,
     MultiSelectStep,
@@ -413,7 +506,10 @@ export default {
     DateStep,
     IconArrowsDiagonal,
     TextStep,
+    NumberStep,
+    FormulaFieldAreas,
     PhoneStep,
+    MarkdownContent,
     PaymentStep,
     IconArrowsDiagonalMinimize2,
     FormCompleted
@@ -448,11 +544,31 @@ export default {
         return () => {}
       }
     },
+    expand: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
+    minimize: {
+      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,
@@ -483,11 +599,6 @@ export default {
       required: false,
       default: ''
     },
-    isDirectUpload: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     allowToSkip: {
       type: Boolean,
       required: false,
@@ -518,6 +629,16 @@ export default {
       required: false,
       default: () => ({})
     },
+    authenticityToken: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    i18n: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
     withSendCopyButton: {
       type: Boolean,
       required: false,
@@ -537,20 +658,33 @@ export default {
       type: Object,
       required: false,
       default: () => ({})
+    },
+    completedMessage: {
+      type: Object,
+      required: false,
+      default: () => ({})
     }
   },
   data () {
     return {
       isCompleted: false,
-      isFormVisible: true,
+      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)
+    },
+    alwaysMinimize () {
+      return this.minimize || (this.orientation?.includes('landscape') && this.isMobile && parseInt(window.innerHeight) < 550)
+    },
     currentStepFields () {
       return this.stepFields[this.currentStep]
     },
@@ -560,24 +694,27 @@ export default {
     queryParams () {
       return new URLSearchParams(window.location.search)
     },
-    authenticityToken () {
-      return document.querySelector('meta[name="csrf-token"]')?.content
-    },
     submitterSlug () {
       return this.submitter.slug
     },
-    previousSignatureValue () {
-      const signatureField = [...this.fields].reverse().find((field) => field.type === 'signature' && !!this.values[field.uuid])
+    fieldsUuidIndex () {
+      return this.fields.reduce((acc, f) => {
+        acc[f.uuid] = f
 
-      return this.values[signatureField?.uuid]
+        return acc
+      }, {})
     },
     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) && this.currentStepFields.length > 4
+      return this.currentField.type === 'checkbox' && this.currentStepFields.every((e) => !e.name && !e.required) && this.currentStepFields.length > 4
     },
     isButtonDisabled () {
       if (this.recalculateButtonDisabledKey) {
@@ -596,15 +733,20 @@ export default {
       return this.fields.filter((f) => !f.readonly).reduce((acc, f) => {
         const prevStep = acc[acc.length - 1]
 
-        if (f.type === 'checkbox' && Array.isArray(prevStep) && prevStep[0].type === 'checkbox') {
-          prevStep.push(f)
-        } else {
-          acc.push([f])
+        if (this.checkFieldConditions(f)) {
+          if (f.type === 'checkbox' && Array.isArray(prevStep) && prevStep[0].type === 'checkbox' && !f.description) {
+            prevStep.push(f)
+          } else {
+            acc.push([f])
+          }
         }
 
         return acc
       }, [])
     },
+    formulaFields () {
+      return this.fields.filter((f) => f.preferences?.formula)
+    },
     attachmentsIndex () {
       return this.attachments.reduce((acc, a) => {
         acc[a.uuid] = a
@@ -616,9 +758,24 @@ export default {
       return `/s/${this.submitterSlug}`
     }
   },
+  watch: {
+    expand (value) {
+      this.isFormVisible = value
+    },
+    currentStepFields (value) {
+      if (!value) {
+        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
@@ -648,6 +805,14 @@ export default {
       this.currentStep = Math.min(...indexesList)
     }
 
+    if (document.body?.clientWidth >= 768 && this.expand !== true && ['signature', 'initials', 'file', 'image'].includes(this.currentField?.type)) {
+      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()
@@ -675,7 +840,44 @@ export default {
   },
   methods: {
     t (key) {
-      return i18n[this.language?.toLowerCase()]?.[key] || i18n[this.browserLanguage]?.[key] || i18n.en[key] || 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) => {
+          if (['empty', 'unchecked'].includes(c.action)) {
+            return acc && isEmpty(this.values[c.field_uuid])
+          } else if (['not_empty', 'checked'].includes(c.action)) {
+            return acc && !isEmpty(this.values[c.field_uuid])
+          } else if (['equal', 'contains'].includes(c.action)) {
+            const field = this.fieldsUuidIndex[c.field_uuid]
+            const option = field.options.find((o) => o.uuid === c.value)
+            const values = [this.values[c.field_uuid]].flat()
+
+            return acc && values.includes(this.optionValue(option, field.options.indexOf(option)))
+          } else if (['not_equal', 'does_not_contain'].includes(c.action)) {
+            const field = this.fieldsUuidIndex[c.field_uuid]
+            const option = field.options.find((o) => o.uuid === c.value)
+            const values = [this.values[c.field_uuid]].flat()
+
+            return acc && !values.includes(this.optionValue(option, field.options.indexOf(option)))
+          } else {
+            return acc
+          }
+        }, true)
+      } else {
+        return true
+      }
+    },
+    optionValue (option, index) {
+      if (option.value) {
+        return option.value
+      } else {
+        return `${this.t('option')} ${index + 1}`
+      }
     },
     maybeTrackEmailClick () {
       const { queryParams } = this
@@ -736,6 +938,17 @@ export default {
         })
       })
     },
+    previousSignatureValueFor (field) {
+      if (this.reuseSignature !== false) {
+        const signatureField = [...this.fields].reverse().find((f) =>
+          f.type === 'signature' && field.preferences?.format === f.preferences?.format && !!this.values[f.uuid]
+        )
+
+        return this.values[signatureField?.uuid]
+      } else {
+        return null
+      }
+    },
     goToStep (step, scrollToArea = false, clickUpload = false) {
       this.currentStep = this.stepFields.indexOf(step)
       this.showFillAllRequiredFields = false
@@ -745,9 +958,9 @@ export default {
 
         if (scrollToArea) {
           this.scrollIntoField(step[0])
-        }
 
-        this.$refs.form.querySelector('input[type="date"], 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)) {
           this.$refs.form.querySelector('input[type="file"]')?.click()
@@ -755,7 +968,8 @@ export default {
       })
     },
     saveStep (formData) {
-      const currentFieldUuid = this.currentField.uuid
+      const currentFieldUuids = this.currentStepFields.map((f) => f.uuid)
+      const currentFieldType = this.currentField.type
 
       if (this.isCompleted) {
         return Promise.resolve({})
@@ -765,7 +979,13 @@ export default {
           body: formData || new FormData(this.$refs.form)
         }).then((response) => {
           if (response.status === 200) {
-            this.submittedValues[currentFieldUuid] = this.values[currentFieldUuid]
+            currentFieldUuids.forEach((fieldUuid) => {
+              this.submittedValues[fieldUuid] = this.values[fieldUuid]
+
+              if (currentFieldType === 'phone') {
+                this.phoneVerifiedValues[fieldUuid] = this.values[fieldUuid]
+              }
+            })
           }
 
           return response
@@ -787,7 +1007,13 @@ export default {
 
       stepPromise().then(async () => {
         const emptyRequiredField = this.stepFields.find((fields, index) => {
-          return index < this.currentStep && fields[0].required && (fields[0].type === 'phone' || !this.allowToSkip) && (this.submittedValues[fields[0].uuid] === true ? false : !this.submittedValues[fields[0].uuid]?.length)
+          if (index >= this.currentStep) {
+            return false
+          }
+
+          return fields.some((f) => {
+            return f.required && (f.type === 'phone' || !this.allowToSkip) && isEmpty(this.submittedValues[f.uuid])
+          })
         })
 
         const formData = new FormData(this.$refs.form)
@@ -797,7 +1023,15 @@ export default {
           formData.append('completed', 'true')
         }
 
-        await this.saveStep(formData).then(async (response) => {
+        let saveStepRequest
+
+        if (!isLastStep && this.phoneVerifiedValues[this.currentField.uuid] && this.phoneVerifiedValues[this.currentField.uuid] === this.values[this.currentField.uuid]) {
+          saveStepRequest = Promise.resolve({})
+        } else {
+          saveStepRequest = this.saveStep(formData)
+        }
+
+        await saveStepRequest.then(async (response) => {
           if (response.status === 422 || response.status === 500) {
             const data = await response.json()
 
@@ -813,7 +1047,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
@@ -837,7 +1075,11 @@ export default {
           this.isSubmitting = false
         })
       }).catch(error => {
-        console.log(error)
+        if (error?.message === 'Image too small') {
+          alert('Signature is too small - please redraw.')
+        } else {
+          console.log(error)
+        }
       }).finally(() => {
         this.isSubmitting = false
       })

app/javascript/submission_form/formula_areas.vue

@@ -0,0 +1,97 @@
+<template>
+  <template
+    v-for="(field, fieldIndex) in fields"
+    :key="field.uuid"
+  >
+    <template
+      v-for="(area, areaIndex) in field.areas"
+      :key="areaIndex"
+    >
+      <Teleport
+        v-if="findPageElementForArea(area)"
+        :to="findPageElementForArea(area)"
+      >
+        <FieldArea
+          v-if="isMathLoaded"
+          :model-value="calculateFormula(field)"
+          :field="field"
+          :area="area"
+          :submittable="false"
+          :field-index="fieldIndex"
+        />
+      </Teleport>
+    </template>
+  </template>
+</template>
+
+<script>
+import FieldArea from './area'
+
+export default {
+  name: 'FormulaFieldAreas',
+  components: {
+    FieldArea
+  },
+  props: {
+    fields: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    values: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      isMathLoaded: false
+    }
+  },
+  async mounted () {
+    const {
+      create,
+      evaluateDependencies,
+      addDependencies,
+      subtractDependencies,
+      divideDependencies,
+      multiplyDependencies,
+      powDependencies,
+      roundDependencies,
+      absDependencies,
+      sinDependencies,
+      tanDependencies,
+      cosDependencies
+    } = await import('mathjs')
+
+    this.math = create({
+      evaluateDependencies,
+      addDependencies,
+      subtractDependencies,
+      divideDependencies,
+      multiplyDependencies,
+      powDependencies,
+      roundDependencies,
+      absDependencies,
+      sinDependencies,
+      tanDependencies,
+      cosDependencies
+    })
+
+    this.isMathLoaded = true
+  },
+  methods: {
+    findPageElementForArea (area) {
+      return (this.$root.$el?.parentNode?.getRootNode() || document).getElementById(`page-${area.attachment_uuid}-${area.page}`)
+    },
+    calculateFormula (field) {
+      const transformedFormula = field.preferences.formula.replace(/{{(.*?)}}/g, (match, uuid) => {
+        return this.values[uuid] || 0.0
+      })
+
+      return this.math.evaluate(transformedFormula.toLowerCase())
+    }
+  }
+}
+</script>

app/javascript/submission_form/i18n.js

@@ -3,6 +3,7 @@ const en = {
   signature: 'Signature',
   initials: 'Initials',
   date: 'Date',
+  number: 'Number',
   image: 'Image',
   take_photo: 'Take photo',
   file: 'File',
@@ -12,16 +13,18 @@ const en = {
   radio: 'Radio',
   cells: 'Cells',
   stamp: 'Stamp',
+  minimize: 'Minimize',
   payment: 'Payment',
   phone: 'Phone',
   submit_form: 'Submit Form',
+  sign_now: 'Sign Now',
   type_here_: 'Type here...',
   optional: 'optional',
   option: 'Option',
   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',
@@ -39,7 +42,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...',
@@ -62,10 +65,12 @@ const en = {
 }
 
 const es = {
+  minimize: 'Minimizar',
   text: 'Texto',
   signature: 'Firma',
   initials: 'Iniciales',
   date: 'Fecha',
+  number: 'Número',
   image: 'Imagen',
   file: 'Archivo',
   select: 'Seleccionar',
@@ -78,6 +83,7 @@ const es = {
   phone: 'Teléfono',
   take_photo: 'Tomar foto',
   submit_form: 'Enviar Formulario',
+  sign_now: 'Firmar ahora',
   type_here_: 'Escribe aquí...',
   optional: 'opcional',
   appears_on: 'Aparece en',
@@ -124,10 +130,12 @@ const es = {
 }
 
 const it = {
+  minimize: 'Minimizza',
   text: 'Testo',
   signature: 'Firma',
   initials: 'Iniziali',
   date: 'Data',
+  number: 'Numero',
   image: 'Immagine',
   file: 'File',
   select: 'Seleziona',
@@ -139,6 +147,7 @@ const it = {
   payment: 'Pagamento',
   phone: 'Telefono',
   submit_form: 'Invia Modulo',
+  sign_now: 'Firma ora',
   type_here_: 'Digita qui...',
   optional: 'opzionale',
   appears_on: 'Compare su',
@@ -186,10 +195,12 @@ const it = {
 }
 
 const de = {
+  minimize: 'Minimieren',
   text: 'Text',
   signature: 'Unterschrift',
   initials: 'Initialen',
   date: 'Datum',
+  number: 'Nummer',
   image: 'Bild',
   file: 'Datei',
   select: 'Auswählen',
@@ -201,6 +212,7 @@ const de = {
   payment: 'Zahlung',
   phone: 'Telefon',
   submit_form: 'Formular absenden',
+  sign_now: 'Jetzt unterschreiben',
   type_here_: 'Hier eingeben...',
   optional: 'optional',
   appears_on: 'Erscheint auf',
@@ -248,10 +260,12 @@ const de = {
 }
 
 const fr = {
+  minimize: 'Réduire',
   text: 'Texte',
   signature: 'Signature',
   initials: 'Initiales',
   date: 'Date',
+  number: 'Numéro',
   image: 'Image',
   file: 'Fichier',
   select: 'Choisir',
@@ -263,6 +277,7 @@ const fr = {
   payment: 'Paiement',
   phone: 'Téléphone',
   submit_form: 'Envoyer le Formulaire',
+  sign_now: 'Signer maintenant',
   type_here_: 'Tapez ici...',
   optional: 'facultatif',
   appears_on: 'Apparaît sur',
@@ -310,10 +325,12 @@ const fr = {
 }
 
 const pl = {
+  minimize: 'Zminimalizuj',
   text: 'Tekst',
   signature: 'Podpis',
   initials: 'Inicjały',
   date: 'Data',
+  number: 'Numer',
   image: 'Obraz',
   file: 'Plik',
   select: 'Wybierz',
@@ -325,6 +342,7 @@ const pl = {
   payment: 'Płatność',
   phone: 'Telefon',
   submit_form: 'Wyślij Formularz',
+  sign_now: 'Podpisz teraz',
   type_here_: 'Wpisz tutaj...',
   optional: 'opcjonalny',
   appears_on: 'Pojawia się na',
@@ -372,10 +390,12 @@ const pl = {
 }
 
 const uk = {
+  minimize: 'Зменшити',
   text: 'Текст',
   signature: 'Підпис',
   initials: 'Ініціали',
   date: 'Дата',
+  number: 'Число',
   image: 'Зображення',
   file: 'Файл',
   select: 'Вибрати',
@@ -387,6 +407,7 @@ const uk = {
   payment: 'Платіж',
   phone: 'Телефон',
   submit_form: 'Надіслати Форму',
+  sign_now: 'Підписати зараз',
   type_here_: 'Введіть тут',
   optional: 'необов’язково',
   appears_on: "З'являється на",
@@ -434,10 +455,12 @@ const uk = {
 }
 
 const cs = {
+  minimize: 'Minimalizovat',
   text: 'Text',
   signature: 'Podpis',
   initials: 'Iniciály',
   date: 'Datum',
+  number: 'Číslo',
   image: 'Obrázek',
   file: 'Soubor',
   select: 'Vybrat',
@@ -449,6 +472,7 @@ const cs = {
   payment: 'Platba',
   phone: 'Telefon',
   submit_form: 'Odeslat formulář',
+  sign_now: 'Podepsat nyní',
   type_here_: 'Zadejte zde',
   optional: 'volitelné',
   appears_on: 'Zobrazuje se na',
@@ -496,10 +520,12 @@ const cs = {
 }
 
 const pt = {
+  minimize: 'Minimizar',
   text: 'Texto',
   signature: 'Assinatura',
   initials: 'Iniciais',
   date: 'Data',
+  number: 'Número',
   image: 'Imagem',
   file: 'Arquivo',
   select: 'Selecionar',
@@ -511,6 +537,7 @@ const pt = {
   payment: 'Pagamento',
   phone: 'Telefone',
   submit_form: 'Enviar Formulário',
+  sign_now: 'Assinar agora',
   type_here_: 'Digite aqui',
   optional: 'opcional',
   appears_on: 'Aparece em',
@@ -558,10 +585,12 @@ const pt = {
 }
 
 const he = {
+  minimize: 'לקטן',
   text: 'טקסט',
   signature: 'חתימה',
-  initials: 'ראשי תיקיות',
+  initials: 'ראשי תיבות',
   date: 'תאריך',
+  number: 'מספר',
   image: 'תמונה',
   file: 'קובץ',
   select: 'בחר',
@@ -573,6 +602,7 @@ const he = {
   payment: 'תשלום',
   phone: 'טלפון',
   submit_form: 'שלח טופס',
+  sign_now: 'חתום כעת',
   type_here_: 'הקלד כאן',
   optional: 'אופציונלי',
   option: 'אפשרות',
@@ -621,10 +651,12 @@ const he = {
 }
 
 const nl = {
+  minimize: 'Minimaliseren',
   text: 'Tekst',
   signature: 'Handtekening',
   initials: 'Initialen',
   date: 'Datum',
+  number: 'Nummer',
   image: 'Afbeelding',
   take_photo: 'Maak een foto',
   file: 'Bestand',
@@ -637,6 +669,7 @@ const nl = {
   payment: 'Betaling',
   phone: 'Telefoon',
   submit_form: 'Formulier verzenden',
+  sign_now: 'Nu ondertekenen',
   type_here_: 'Typ hier...',
   optional: 'Optioneel',
   option: 'Optie',
@@ -683,6 +716,138 @@ const nl = {
   files: 'Bestanden'
 }
 
-const i18n = { en, es, it, de, fr, pl, uk, cs, pt, he, nl }
+const ar = {
+  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: 'تم إعادة إرسال رمز التحقق عبر الرسائل القصيرة',
+  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: 'الدفع بواسطة Stripe',
+  reupload: 'إعادة التحميل',
+  upload: 'تحميل',
+  files: 'الملفات'
+}
+
+const ko = {
+  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

@@ -24,13 +24,20 @@
       :name="`values[${field.uuid}]`"
     >
   </div>
-  <div>
+  <div
+    v-if="!modelValue"
+  >
+    <div
+      v-if="field.description"
+      dir="auto"
+      class="mb-3 px-1"
+    >
+      <MarkdownContent :string="field.description" />
+    </div>
     <FileDropzone
-      v-if="!modelValue"
       :message="`${t('upload')} ${field.name || t('image')}${field.required ? '' : ` (${t('optional')})`}`"
       :submitter-slug="submitterSlug"
       :accept="'image/*'"
-      :is-direct-upload="isDirectUpload"
       @upload="onImageUpload"
     />
   </div>
@@ -39,12 +46,14 @@
 <script>
 import FileDropzone from './dropzone'
 import { IconReload } from '@tabler/icons-vue'
+import MarkdownContent from './markdown_content'
 
 export default {
   name: 'ImageStep',
   components: {
     FileDropzone,
-    IconReload
+    IconReload,
+    MarkdownContent
   },
   inject: ['t'],
   props: {
@@ -52,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

@@ -1,14 +1,25 @@
 <template>
   <div dir="auto">
-    <div class="flex justify-between items-center w-full mb-2">
+    <div
+      class="flex justify-between items-center w-full"
+      :class="{ 'mb-2': !field.description }"
+    >
       <label
         class="label text-2xl"
-      >{{ showFieldNames && field.name ? field.name : t('initials') }}</label>
+      >
+        <MarkdownContent
+          v-if="field.title"
+          :string="field.title"
+        />
+        <template v-else>
+          {{ showFieldNames && field.name ? field.name : t('initials') }}
+        </template>
+      </label>
       <div class="space-x-2 flex">
         <span
           v-if="isDrawInitials"
           class="tooltip"
-          :data-tip="t('type_initials')"
+          :data-tip="t('type_initial')"
         >
           <a
             id="type_text_button"
@@ -58,7 +69,7 @@
           {{ t('clear') }}
         </a>
         <a
-          title="Minimize"
+          :title="t('minimize')"
           href="#"
           class="py-1.5 inline md:hidden"
           @click.prevent="$emit('minimize')"
@@ -70,6 +81,13 @@
         </a>
       </div>
     </div>
+    <div
+      v-if="field.description"
+      dir="auto"
+      class="mb-3 px-1"
+    >
+      <MarkdownContent :string="field.description" />
+    </div>
     <AppearsOn :field="field" />
     <input
       :value="modelValue || computedPreviousValue"
@@ -105,6 +123,7 @@ import { cropCanvasAndExportToPNG } from './crop_canvas'
 import { IconReload, IconTextSize, IconSignature, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
 import SignaturePad from 'signature_pad'
 import AppearsOn from './appears_on'
+import MarkdownContent from './markdown_content'
 
 const scale = 3
 
@@ -115,6 +134,7 @@ export default {
     IconReload,
     IconTextSize,
     IconSignature,
+    MarkdownContent,
     IconArrowsDiagonalMinimize2
   },
   inject: ['baseUrl', 't'],
@@ -132,11 +152,6 @@ export default {
       required: false,
       default: true
     },
-    isDirectUpload: {
-      type: Boolean,
-      required: true,
-      default: false
-    },
     attachmentsIndex: {
       type: Object,
       required: false,
@@ -178,14 +193,8 @@ export default {
 
         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)
 
@@ -231,7 +240,7 @@ export default {
       }
     },
     updateWrittenInitials (e) {
-      this.isInitialsStarted = true
+      this.isInitialsStarted = !!e.target.value
 
       const canvas = this.$refs.canvas
       const context = canvas.getContext('2d')
@@ -273,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 { DirectUpload } = await import('@rails/activestorage')
+          const formData = new FormData()
 
-            new DirectUpload(
-              file,
-              '/direct_uploads'
-            ).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)
+          formData.append('file', file)
+          formData.append('submitter_slug', this.submitterSlug)
+          formData.append('name', 'attachments')
 
-                return resolve(attachment)
-              })
-            })
-          } else {
-            const formData = new FormData()
+          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)
 
-            formData.append('file', file)
-            formData.append('submitter_slug', this.submitterSlug)
-            formData.append('name', 'attachments')
-
-            return fetch(this.baseUrl + '/api/attachments', {
-              method: 'POST',
-              body: formData
-            }).then((resp) => resp.json()).then((attachment) => {
-              this.$emit('attached', attachment)
-              this.$emit('update:model-value', attachment.uuid)
-
-              return resolve(attachment)
-            })
-          }
+            return resolve(attachment)
+          })
         })
       })
     }

app/javascript/submission_form/markdown_content.vue

@@ -0,0 +1,75 @@
+<template>
+  <span>
+    <template
+      v-for="(item, index) in items"
+      :key="index"
+    >
+      <a
+        v-if="item.startsWith('<a') && item.endsWith('</a>')"
+        :href="sanitizeHref(extractAttr(item, 'href'))"
+        rel="noopener noreferrer nofollow"
+        :class="extractAttr(item, 'class') || 'link'"
+        target="_blank"
+      >
+        {{ extractText(item) }}
+      </a>
+      <b
+        v-else-if="item.startsWith('<b>') || item.startsWith('<strong>')"
+      >
+        {{ extractText(item) }}
+      </b>
+      <i
+        v-else-if="item.startsWith('<i>') || item.startsWith('<em>')"
+      >
+        {{ extractText(item) }}
+      </i>
+      <br
+        v-else-if="item === '<br>' || item === '\n'"
+      >
+      <template
+        v-else
+      >
+        {{ item }}
+      </template>
+    </template>
+  </span>
+</template>
+
+<script>
+import snarkdown from 'snarkdown'
+
+const htmlSplitRegexp = /(<a.+?<\/a>|<i>.+?<\/i>|<b>.+?<\/b>|<em>.+?<\/em>|<strong>.+?<\/strong>|<br>)/
+
+export default {
+  name: 'MarkdownContent',
+  props: {
+    string: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  computed: {
+    items () {
+      return snarkdown(this.string.replace(/\n/g, '<br>')).split(htmlSplitRegexp)
+    }
+  },
+  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]
+      }
+    },
+    extractText (text) {
+      if (text) {
+        return text.match(/>(.+?)</)?.[1]
+      }
+    }
+  }
+}
+</script>

app/javascript/submission_form/multi_select_step.vue

@@ -1,10 +1,23 @@
 <template>
   <label
-    v-if="showFieldNames && field.name"
+    v-if="showFieldNames && (field.name || field.title)"
     :for="field.uuid"
     dir="auto"
-    class="label text-2xl mb-2"
-  >{{ field.name }}</label>
+    class="label text-2xl"
+    :class="{ 'mb-2': !field.description }"
+  ><MarkdownContent
+     v-if="field.title"
+     :string="field.title"
+   />
+    <template v-else>{{ field.name }}</template>
+  </label>
+  <div
+    v-if="field.description"
+    dir="auto"
+    class="mb-3 px-1"
+  >
+    <MarkdownContent :string="field.description" />
+  </div>
   <div class="flex w-full max-h-44 overflow-y-auto">
     <input
       v-if="modelValue.length === 0"
@@ -32,6 +45,7 @@
         <label
           :for="option.uuid"
           class="flex items-center space-x-3"
+          @click="scrollIntoField(field)"
         >
           <input
             :id="option.uuid"
@@ -53,8 +67,13 @@
 </template>
 
 <script>
+import MarkdownContent from './markdown_content'
+
 export default {
   name: 'MultiSelectStep',
+  components: {
+    MarkdownContent
+  },
   inject: ['t', 'scrollIntoField'],
   props: {
     field: {

app/javascript/submission_form/number_step.vue

@@ -0,0 +1,86 @@
+<template>
+  <label
+    v-if="showFieldNames && (field.name || field.title)"
+    :for="field.uuid"
+    dir="auto"
+    class="label text-2xl"
+    :class="{ 'mb-2': !field.description }"
+  ><MarkdownContent
+     v-if="field.title"
+     :string="field.title"
+   />
+    <template v-else>{{ field.name }}</template>
+    <template v-if="!field.required">({{ t('optional') }})</template>
+  </label>
+  <div
+    v-else
+    class="py-1"
+  />
+  <div
+    v-if="field.description"
+    dir="auto"
+    class="mb-3 px-1"
+  >
+    <MarkdownContent :string="field.description" />
+  </div>
+  <AppearsOn :field="field" />
+  <div class="items-center flex">
+    <input
+      type="hidden"
+      name="cast_number"
+      value="true"
+    >
+    <input
+      :id="field.uuid"
+      v-model="number"
+      type="number"
+      class="base-input !text-2xl w-full"
+      step="any"
+      :required="field.required"
+      :placeholder="`${t('type_here_')}${field.required ? '' : ` (${t('optional')})`}`"
+      :name="`values[${field.uuid}]`"
+      @focus="$emit('focus')"
+    >
+  </div>
+</template>
+
+<script>
+import AppearsOn from './appears_on'
+import MarkdownContent from './markdown_content'
+
+export default {
+  name: 'TextStep',
+  components: {
+    AppearsOn,
+    MarkdownContent
+  },
+  inject: ['t'],
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    showFieldNames: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    modelValue: {
+      type: [String, Number],
+      required: false,
+      default: ''
+    }
+  },
+  emits: ['update:model-value', 'focus'],
+  computed: {
+    number: {
+      set (value) {
+        this.$emit('update:model-value', value)
+      },
+      get () {
+        return this.modelValue
+      }
+    }
+  }
+}
+</script>

app/javascript/submission_form/phone_step.vue

@@ -2,10 +2,25 @@
   <div>
     <label
       :for="isCodeSent ? 'one_time_code' : field.uuid"
-      class="label text-2xl mb-2"
-    >{{ showFieldNames && field.name ? field.name : t('verified_phone_number') }}
-      <template v-if="!field.required">({{ t('optional') }})</template>
+      class="label text-2xl"
+      :class="{ 'mb-2': !field.description }"
+    >
+      <MarkdownContent
+        v-if="field.title"
+        :string="field.title"
+      />
+      <template v-else>
+        {{ showFieldNames && field.name ? field.name : t('verified_phone_number') }}
+        <template v-if="!field.required">({{ t('optional') }})</template>
+      </template>
     </label>
+    <div
+      v-if="field.description"
+      dir="auto"
+      class="mb-3 px-1"
+    >
+      <MarkdownContent :string="field.description" />
+    </div>
     <div>
       <input
         type="hidden"
@@ -53,14 +68,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>
@@ -68,6 +82,8 @@
 </template>
 
 <script>
+import MarkdownContent from './markdown_content'
+
 function throttle (func, delay) {
   let lastCallTime = 0
 
@@ -83,16 +99,29 @@ function throttle (func, delay) {
 
 export default {
   name: 'PhoneStep',
+  components: {
+    MarkdownContent
+  },
   inject: ['t', 'baseUrl'],
   props: {
     field: {
       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,
@@ -139,12 +168,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,12 +1,23 @@
 <template>
   <div dir="auto">
-    <div class="flex justify-between items-center w-full mb-2">
+    <div
+      class="flex justify-between items-center w-full"
+      :class="{ 'mb-2': !field.description }"
+    >
       <label
         class="label text-2xl"
-      >{{ showFieldNames && field.name ? field.name : t('signature') }}</label>
+      >
+        <MarkdownContent
+          v-if="field.title"
+          :string="field.title"
+        />
+        <template v-else>
+          {{ showFieldNames && field.name ? field.name : t('signature') }}
+        </template>
+      </label>
       <div class="space-x-2 flex">
         <span
-          v-if="isTextSignature"
+          v-if="isTextSignature && field.preferences?.format !== 'typed'"
           class="tooltip"
           :data-tip="t('draw_signature')"
         >
@@ -23,14 +34,14 @@
           </a>
         </span>
         <span
-          v-else-if="withTypedSignature"
+          v-else-if="withTypedSignature && field.preferences?.format !== 'typed' && field.preferences?.format !== 'drawn'"
           class="tooltip ml-2"
           :data-tip="t('type_text')"
         >
           <a
             id="type_text_button"
             href="#"
-            class="btn btn-outline btn-sm font-medium"
+            class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap"
             @click.prevent="toggleTextInput"
           >
             <IconTextSize :width="16" />
@@ -40,14 +51,16 @@
           </a>
         </span>
         <span
+          v-if="field.preferences?.format !== 'typed'"
           class="tooltip"
           :data-tip="t('take_photo')"
         >
           <label
-            class="btn btn-outline btn-sm font-medium"
+            class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap"
           >
             <IconCamera :width="16" />
             <input
+              :key="uploadImageInputKey"
               type="file"
               hidden
               accept="image/*"
@@ -78,7 +91,7 @@
         </a>
         <a
           href="#"
-          title="Minimize"
+          :title="t('minimize')"
           class="py-1.5 inline md:hidden"
           @click.prevent="$emit('minimize')"
         >
@@ -89,6 +102,13 @@
         </a>
       </div>
     </div>
+    <div
+      v-if="field.description"
+      dir="auto"
+      class="mb-3 px-1"
+    >
+      <MarkdownContent :string="field.description" />
+    </div>
     <AppearsOn :field="field" />
     <input
       :value="modelValue || computedPreviousValue"
@@ -111,7 +131,7 @@
       id="signature_text_input"
       ref="textInput"
       class="base-input !text-2xl w-full mt-6"
-      :required="field.required"
+      :required="field.required && !isSignatureStarted"
       :placeholder="`${t('type_signature_here')}...`"
       type="text"
       @input="updateWrittenSignature"
@@ -124,6 +144,7 @@ import { IconReload, IconCamera, IconSignature, IconTextSize, IconArrowsDiagonal
 import { cropCanvasAndExportToPNG } from './crop_canvas'
 import SignaturePad from 'signature_pad'
 import AppearsOn from './appears_on'
+import MarkdownContent from './markdown_content'
 
 let isFontLoaded = false
 
@@ -135,6 +156,7 @@ export default {
     AppearsOn,
     IconReload,
     IconCamera,
+    MarkdownContent,
     IconTextSize,
     IconSignature,
     IconArrowsDiagonalMinimize2
@@ -154,11 +176,6 @@ export default {
       required: false,
       default: true
     },
-    isDirectUpload: {
-      type: Boolean,
-      required: true,
-      default: false
-    },
     withTypedSignature: {
       type: Boolean,
       required: false,
@@ -185,7 +202,8 @@ export default {
     return {
       isSignatureStarted: !!this.previousValue,
       isUsePreviousValue: true,
-      isTextSignature: false
+      isTextSignature: this.field.preferences?.format === 'typed',
+      uploadImageInputKey: Math.random().toString()
     }
   },
   computed: {
@@ -207,10 +225,6 @@ export default {
       }
     })
 
-    if (this.isDirectUpload) {
-      import('@rails/activestorage')
-    }
-
     if (this.$refs.canvas) {
       this.pad = new SignaturePad(this.$refs.canvas)
 
@@ -269,7 +283,7 @@ export default {
       }
     },
     updateWrittenSignature (e) {
-      this.isSignatureStarted = true
+      this.isSignatureStarted = !!e.target.value
 
       const canvas = this.$refs.canvas
       const context = canvas.getContext('2d')
@@ -340,16 +354,18 @@ export default {
             const x = (canvasWidth - targetWidth) / 2
             const y = (canvasHeight - targetHeight) / 2
 
-            context.clearRect(0, 0, canvasWidth, canvasHeight)
-            context.drawImage(img, x, y, targetWidth, targetHeight)
+            setTimeout(() => {
+              context.clearRect(0, 0, canvasWidth, canvasHeight)
+              context.drawImage(img, x, y, targetWidth, targetHeight)
 
-            this.$emit('start')
+              this.$emit('start')
+            }, 50)
           }
         }
 
         reader.readAsDataURL(file)
 
-        event.target.value = null
+        this.uploadImageInputKey = Math.random().toString()
       }
     },
     async submit () {
@@ -361,49 +377,27 @@ export default {
         return Promise.resolve({})
       }
 
-      return new Promise((resolve) => {
-        cropCanvasAndExportToPNG(this.$refs.canvas).then(async (blob) => {
+      return new Promise((resolve, reject) => {
+        cropCanvasAndExportToPNG(this.$refs.canvas, { errorOnTooSmall: true }).then(async (blob) => {
           const file = new File([blob], 'signature.png', { type: 'image/png' })
 
-          if (this.isDirectUpload) {
-            const { DirectUpload } = await import('@rails/activestorage')
+          const formData = new FormData()
 
-            new DirectUpload(
-              file,
-              '/direct_uploads'
-            ).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)
+          formData.append('file', file)
+          formData.append('submitter_slug', this.submitterSlug)
+          formData.append('name', 'attachments')
 
-                return resolve(attachment)
-              })
-            })
-          } else {
-            const formData = new FormData()
+          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)
 
-            formData.append('file', file)
-            formData.append('submitter_slug', this.submitterSlug)
-            formData.append('name', 'attachments')
-
-            return fetch(this.baseUrl + '/api/attachments', {
-              method: 'POST',
-              body: formData
-            }).then((resp) => resp.json()).then((attachment) => {
-              this.$emit('attached', attachment)
-              this.$emit('update:model-value', attachment.uuid)
-
-              return resolve(attachment)
-            })
-          }
+            return resolve(attachment)
+          })
+        }).catch((error) => {
+          return reject(error)
         })
       })
     }

app/javascript/submission_form/text_step.vue

@@ -1,11 +1,14 @@
 <template>
   <label
-    v-if="showFieldNames && field.name"
+    v-if="showFieldNames && (field.name || field.title)"
     :for="field.uuid"
     dir="auto"
     class="label text-2xl"
     :class="{ 'mb-2': !field.description }"
-  ><template v-if="field.title"><span v-html="field.title" /></template>
+  ><MarkdownContent
+     v-if="field.title"
+     :string="field.title"
+   />
     <template v-else>{{ field.name }}</template>
     <template v-if="!field.required">({{ t('optional') }})</template>
   </label>
@@ -15,9 +18,11 @@
   />
   <div
     v-if="field.description"
-    class="mb-3 px-1 text-lg"
-    v-html="field.description"
-  />
+    dir="auto"
+    class="mb-3 px-1"
+  >
+    <MarkdownContent :string="field.description" />
+  </div>
   <AppearsOn :field="field" />
   <div class="items-center flex">
     <input
@@ -30,11 +35,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
@@ -69,11 +74,13 @@
 <script>
 import { IconAlignBoxLeftTop } from '@tabler/icons-vue'
 import AppearsOn from './appears_on'
+import MarkdownContent from './markdown_content'
 
 export default {
   name: 'TextStep',
   components: {
     IconAlignBoxLeftTop,
+    MarkdownContent,
     AppearsOn
   },
   inject: ['t'],

app/javascript/template_builder/area.vue

@@ -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"
@@ -68,9 +68,9 @@
         @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 || (isNameFocus && !['checkbox', 'phone'].includes(field.type))"
         class="flex items-center ml-1.5"
       >
         <input
@@ -86,11 +86,52 @@
           @click.prevent="field.required = !field.required"
           @mousedown.prevent
         >{{ t('required') }}</label>
+        <span
+          v-if="field.type !== 'payment'"
+          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"
         class="pr-1"
-        title="Remove"
+        :title="t('remove')"
         @click.prevent="$emit('remove')"
       >
         <IconX width="14" />
@@ -99,7 +140,7 @@
     <div
       class="flex items-center h-full w-full"
       dir="auto"
-      :class="[bgColors[submitterIndex], field?.default_value ? '' : 'justify-center']"
+      :class="[bgColors[submitterIndex], field?.default_value ? (alignClasses[field.preferences?.align] || '') : 'justify-center']"
     >
       <span
         v-if="field"
@@ -145,6 +186,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 +225,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 +237,11 @@ export default {
   components: {
     FieldType,
     IconCheck,
+    FieldSettings,
+    FormulaModal,
+    IconDotsVertical,
+    DescriptionModal,
+    ConditionsModal,
     FieldSubmitter,
     IconX
   },
@@ -195,20 +277,37 @@ 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,
+      isSettingsFocus: false,
+      isShowDescriptionModal: false,
       isResize: false,
       isDragged: false,
+      renderDropdown: false,
       isNameFocus: false,
       textOverflowChars: 0,
       dragFrom: { x: 0, y: 0 }
     }
   },
   computed: {
-    defaultName: Field.computed.defaultName,
     fieldNames: FieldType.computed.fieldNames,
     fieldIcons: FieldType.computed.fieldIcons,
+    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}.`
@@ -299,19 +398,30 @@ 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()
+    },
+    maybeBlurSettings (e) {
+      if (!e.relatedTarget || !this.$refs.settingsDropdown.contains(e.relatedTarget)) {
+        this.isSettingsFocus = false
+      }
+    },
     onNameFocus (e) {
       this.selectedAreaRef.value = this.area
 
@@ -340,7 +450,7 @@ export default {
     },
     onResizeCell (e) {
       if (e.target.id === 'mask') {
-        const positionX = e.layerX / (e.target.clientWidth - 1)
+        const positionX = e.offsetX / (e.target.clientWidth - 1)
 
         if (positionX > this.area.x) {
           this.area.cell_w = positionX - this.area.x
@@ -367,6 +477,10 @@ export default {
       })
     },
     onNameBlur (e) {
+      if (e.relatedTarget === this.$refs.settingsButton) {
+        this.isSettingsFocus = true
+      }
+
       const text = this.$refs.name.innerText.trim()
 
       this.isNameFocus = false
@@ -386,16 +500,16 @@ export default {
     },
     resize (e) {
       if (e.target.id === 'mask') {
-        this.area.w = e.layerX / e.target.clientWidth - this.area.x
-        this.area.h = e.layerY / e.target.clientHeight - this.area.y
+        this.area.w = e.offsetX / e.target.clientWidth - this.area.x
+        this.area.h = e.offsetY / e.target.clientHeight - this.area.y
       }
     },
     drag (e) {
       if (e.target.id === 'mask') {
         this.isDragged = true
 
-        this.area.x = (e.layerX - this.dragFrom.x) / e.target.clientWidth
-        this.area.y = (e.layerY - this.dragFrom.y) / e.target.clientHeight
+        this.area.x = (e.offsetX - this.dragFrom.x) / e.target.clientWidth
+        this.area.y = (e.offsetY - this.dragFrom.y) / e.target.clientHeight
       }
     },
     startDrag (e) {

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"
@@ -94,11 +94,13 @@
       </div>
     </div>
     <div
+      id="main_container"
       class="flex"
       :class="$slots.buttons || withTitle ? 'md:max-h-[calc(100%_-_60px)]' : 'md:max-h-[100%]'"
     >
       <div
         v-if="withDocumentsList"
+        id="documents_container"
         ref="previews"
         :style="{ 'display': isBreakpointLg ? 'none' : 'initial' }"
         class="overflow-y-auto overflow-x-hidden w-52 flex-none pr-3 mt-0.5 pt-0.5 hidden lg:block"
@@ -113,7 +115,6 @@
           :with-replace-button="withUploadButton"
           :editable="editable"
           :template="template"
-          :is-direct-upload="isDirectUpload"
           @scroll-to="scrollIntoDocument(item)"
           @remove="onDocumentRemove"
           @replace="onDocumentReplace"
@@ -129,12 +130,14 @@
             v-if="sortedDocuments.length && editable && withUploadButton"
             :accept-file-types="acceptFileTypes"
             :template-id="template.id"
-            :is-direct-upload="isDirectUpload"
             @success="updateFromUpload"
           />
         </div>
       </div>
-      <div class="w-full overflow-y-hidden md:overflow-y-auto overflow-x-hidden mt-0.5 pt-0.5">
+      <div
+        id="pages_container"
+        class="w-full overflow-y-hidden md:overflow-y-auto overflow-x-hidden mt-0.5 pt-0.5"
+      >
         <div
           ref="documents"
           class="pr-3.5 pl-0.5"
@@ -143,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>
@@ -157,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"
               />
@@ -172,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"
@@ -190,7 +193,6 @@
               <Upload
                 v-if="withUploadButton"
                 :template-id="template.id"
-                :is-direct-upload="isDirectUpload"
                 :accept-file-types="acceptFileTypes"
                 @success="updateFromUpload"
               />
@@ -200,17 +202,18 @@
       </div>
       <div
         v-if="withFieldsList"
+        id="fields_list_container"
         class="relative w-80 flex-none mt-1 pr-4 pl-0.5 hidden md:block"
         :class="drawField ? 'overflow-hidden' : 'overflow-y-auto overflow-x-hidden'"
       >
         <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
@@ -220,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>
@@ -238,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"
@@ -267,12 +274,14 @@
       <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)"
       />
     </div>
+    <div id="docuseal_modal_container" />
   </div>
 </template>
 
@@ -321,7 +330,12 @@ export default {
       backgroundColor: this.backgroundColor,
       withPhone: this.withPhone,
       withPayment: this.withPayment,
-      selectedAreaRef: computed(() => this.selectedAreaRef)
+      isPaymentConnected: this.isPaymentConnected,
+      withFormula: this.withFormula,
+      withConditions: this.withConditions,
+      defaultDrawFieldType: this.defaultDrawFieldType,
+      selectedAreaRef: computed(() => this.selectedAreaRef),
+      fieldsDragFieldRef: computed(() => this.fieldsDragFieldRef)
     }
   },
   props: {
@@ -329,11 +343,6 @@ export default {
       type: Object,
       required: true
     },
-    isDirectUpload: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     i18n: {
       type: Object,
       required: false,
@@ -364,6 +373,21 @@ export default {
       required: false,
       default: () => []
     },
+    defaultRequiredFields: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    withSelectedFieldType: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    defaultDrawFieldType: {
+      type: String,
+      required: false,
+      default: 'text'
+    },
     currencies: {
       type: Array,
       required: false,
@@ -408,6 +432,13 @@ export default {
         return () => {}
       }
     },
+    onChange: {
+      type: Function,
+      required: false,
+      default () {
+        return () => {}
+      }
+    },
     withStickySubmitters: {
       type: Boolean,
       required: false,
@@ -428,6 +459,11 @@ export default {
       required: false,
       default: true
     },
+    authenticityToken: {
+      type: String,
+      required: false,
+      default: ''
+    },
     withDocumentsList: {
       type: Boolean,
       required: false,
@@ -443,6 +479,21 @@ export default {
       required: false,
       default: false
     },
+    isPaymentConnected: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    withFormula: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    withConditions: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     onlyDefinedFields: {
       type: Boolean,
       required: false,
@@ -460,13 +511,16 @@ export default {
       isBreakpointLg: false,
       isSaving: false,
       selectedSubmitter: null,
+      showDrawField: false,
       drawField: null,
+      drawFieldType: null,
       drawOption: null,
       dragField: null
     }
   },
   computed: {
     selectedAreaRef: () => ref(),
+    fieldsDragFieldRef: () => ref(),
     fieldAreasIndex () {
       const areas = {}
 
@@ -482,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))
     },
@@ -492,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
     })
@@ -502,7 +567,7 @@ export default {
       submitter.name = name
 
       if (existingSubmittersUuids.filter(Boolean).length) {
-        submitter.uuid = existingSubmittersUuids[index] || v4()
+        submitter.uuid = existingSubmittersUuids[index] || submitter.uuid || v4()
       } else {
         submitter.uuid ||= v4()
       }
@@ -542,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)
 
@@ -622,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') {
@@ -680,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) {
@@ -702,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)
-            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)
-            }
+            this.setDefaultAreaSize(area, this.drawOption ? 'checkbox' : this.drawField?.type)
           }
 
           area.x -= area.w / 2
@@ -755,11 +849,15 @@ export default {
 
         let type = (pageMask.clientWidth * area.w) < 35 ? 'checkbox' : 'text'
 
-        if (this.fieldTypes.length !== 0 && !this.fieldTypes.includes(type)) {
+        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]
 
@@ -777,26 +875,27 @@ export default {
           }
         }
 
-        if (area.w) {
-          const field = {
-            name: '',
-            uuid: v4(),
-            required: type !== 'checkbox',
-            type,
-            submitter_uuid: this.selectedSubmitter.uuid,
-            areas: [area]
+        if (this.drawFieldType && (area.w === 0 || area.h === 0)) {
+          if (this.selectedField?.type === this.drawFieldType) {
+            area.w = this.selectedAreaRef.value.w
+            area.h = this.selectedAreaRef.value.h
+          } else {
+            this.setDefaultAreaSize(area, this.drawFieldType)
           }
 
-          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()
         }
       }
     },
     onDropfield (area) {
-      const field = {
+      const field = this.fieldsDragFieldRef.value || {
         name: '',
         uuid: v4(),
         submitter_uuid: this.selectedSubmitter.uuid,
@@ -804,17 +903,19 @@ export default {
         ...this.dragField
       }
 
-      if (['select', 'multiple', 'radio'].includes(field.type)) {
-        field.options = [{ value: '', uuid: v4() }]
-      }
+      if (!this.fieldsDragFieldRef.value) {
+        if (['select', 'multiple', 'radio'].includes(field.type)) {
+          field.options = [{ value: '', uuid: v4() }]
+        }
 
-      if (field.type === 'stamp') {
-        field.readonly = true
-      }
+        if (field.type === 'stamp') {
+          field.readonly = true
+        }
 
-      if (field.type === 'date') {
-        field.preferences = {
-          format: Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') ? 'MM/DD/YYYY' : 'DD/MM/YYYY'
+        if (field.type === 'date') {
+          field.preferences = {
+            format: Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') ? 'MM/DD/YYYY' : 'DD/MM/YYYY'
+          }
         }
       }
 
@@ -870,22 +971,46 @@ export default {
         fieldArea.cell_w = baseArea.cell_w || (baseArea.w / 5)
       }
 
-      field.areas = [fieldArea]
+      field.areas ||= []
+
+      const lastArea = field.areas[field.areas.length - 1]
+
+      if (lastArea) {
+        fieldArea.x -= lastArea.w / 2
+        fieldArea.w = lastArea.w
+        fieldArea.h = lastArea.h
+      }
+
+      field.areas.push(fieldArea)
 
       this.selectedAreaRef.value = fieldArea
 
-      this.template.fields.push(field)
+      if (this.template.fields.indexOf(field) === -1) {
+        this.template.fields.push(field)
+      }
 
       this.save()
     },
-    updateFromUpload ({ schema, documents }) {
-      this.template.schema.push(...schema)
-      this.template.documents.push(...documents)
+    updateFromUpload (data) {
+      this.template.schema.push(...data.schema)
+      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') {
@@ -908,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) {
@@ -950,7 +1112,13 @@ export default {
 
       this.save()
     },
-    maybeShowEmptyTemplateAlert (e) {
+    maybeShowErrorTemplateAlert (e) {
+      if (!this.isAllRequiredFieldsAdded) {
+        e.preventDefault()
+
+        return alert(this.t('add_all_required_fields_to_continue'))
+      }
+
       if (!this.template.fields.length) {
         e.preventDefault()
 
@@ -958,6 +1126,10 @@ export default {
       }
     },
     onSaveClick () {
+      if (!this.isAllRequiredFieldsAdded) {
+        return alert(this.t('add_all_required_fields_to_continue'))
+      }
+
       if (this.template.fields.length) {
         this.isSaving = true
 
@@ -980,10 +1152,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({})
       }
@@ -996,7 +1176,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

@@ -0,0 +1,195 @@
+<template>
+  <div
+    class="modal modal-open items-start !animate-none overflow-y-auto"
+  >
+    <div
+      class="absolute top-0 bottom-0 right-0 left-0"
+      @click.prevent="$emit('close')"
+    />
+    <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
+      <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
+        <span>
+          {{ t('condition') }} - {{ field.name || buildDefaultName(field, template.fields) }}
+        </span>
+        <a
+          href="#"
+          class="text-xl"
+          @click.prevent="$emit('close')"
+        >&times;</a>
+      </div>
+      <div>
+        <div
+          v-if="!withConditions"
+          class="bg-base-300 rounded-xl py-2 px-3 text-center"
+        >
+          <a
+            href="https://www.docuseal.co/pricing"
+            target="_blank"
+            class="link"
+          >Available in Pro</a>
+        </div>
+        <form @submit.prevent="validateSaveAndClose">
+          <div class="my-4">
+            <div class="space-y-4">
+              <select
+                class="select select-bordered select-sm w-full bg-white h-11 pl-4 text-base font-normal"
+                required
+                @change="[
+                  newCondition.field_uuid = $event.target.value,
+                  delete newCondition.value,
+                  (conditionActions.includes(newCondition.action) ? '' : newCondition.action = conditionActions[0])
+                ]"
+              >
+                <option
+                  value=""
+                  disabled
+                  :selected="!newCondition.field_uuid"
+                >
+                  {{ t('select_field_') }}
+                </option>
+                <option
+                  v-for="f in fields"
+                  :key="f.uuid"
+                  :value="f.uuid"
+                  :selected="newCondition.field_uuid === f.uuid"
+                >
+                  {{ f.name || buildDefaultName(f, template.fields) }}
+                </option>
+              </select>
+              <select
+                v-model="newCondition.action"
+                class="select select-bordered select-sm w-full h-11 pl-4 text-base font-normal"
+                :class="{ 'bg-white': newCondition.field_uuid, 'bg-base-300': !newCondition.field_uuid }"
+                :required="newCondition.field_uuid"
+              >
+                <option
+                  v-for="action in conditionActions"
+                  :key="action"
+                  :value="action"
+                >
+                  {{ t(action) }}
+                </option>
+              </select>
+              <select
+                v-if="conditionField?.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"
+              >
+                <option
+                  value=""
+                  disabled
+                  selected
+                >
+                  {{ t('select_value_') }}
+                </option>
+                <option
+                  v-for="(option, index) in conditionField.options"
+                  :key="option.uuid"
+                  :value="option.uuid"
+                  :selected="newCondition.value === option.uuid"
+                >
+                  {{ option.value || `${t('option')} ${index + 1}` }}
+                </option>
+              </select>
+            </div>
+          </div>
+          <button
+            class="base-button w-full mt-2"
+          >
+            {{ t('save') }}
+          </button>
+        </form>
+        <div
+          v-if="field.conditions?.[0]?.field_uuid"
+          class="text-center w-full mt-4"
+        >
+          <button
+            class="link"
+            @click="[newCondition.field_uuid = null, delete field.conditions, validateSaveAndClose()]"
+          >
+            {{ t('remove_condition') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ConditionModal',
+  inject: ['t', 'save', 'template', 'withConditions'],
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    buildDefaultName: {
+      type: Function,
+      required: true
+    }
+  },
+  emits: ['close'],
+  data () {
+    return {
+      newCondition: this.field.conditions?.[0] || {}
+    }
+  },
+  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) {
+          acc.push(f)
+        }
+
+        return acc
+      }, [])
+    }
+  },
+  created () {
+    this.field.conditions ||= []
+  },
+  methods: {
+    fieldActions (field) {
+      const actions = []
+
+      if (!field) {
+        return actions
+      }
+
+      if (field.type === 'checkbox') {
+        actions.push('checked', 'unchecked')
+      } else if (['radio', 'select'].includes(field.type)) {
+        actions.push('equal', 'not_equal')
+      } else if (['multiple'].includes(field.type)) {
+        actions.push('contains', 'does_not_contain')
+      } else {
+        actions.push('not_empty', 'empty')
+      }
+
+      return actions
+    },
+    validateSaveAndClose () {
+      if (!this.withConditions) {
+        return alert('Available only in Pro')
+      }
+
+      if (this.newCondition.field_uuid) {
+        this.field.conditions = [this.newCondition]
+      } else {
+        delete this.field.conditions
+      }
+
+      this.save()
+      this.$emit('close')
+    }
+  }
+}
+</script>

app/javascript/template_builder/contenteditable.vue

@@ -27,7 +27,7 @@
     <IconPencil
       class="cursor-pointer flex-none opacity-0 group-hover/contenteditable-container:opacity-100 group-hover/contenteditable:opacity-100 align-middle peer-focus:hidden"
       :style="iconInline ? {} : { right: -(1.1 * iconWidth) + 'px' }"
-      title="Edit"
+      :title="t('edit')"
       :class="{ invisible: !editable, 'ml-1': !withRequired, 'absolute': !iconInline, 'inline align-bottom': iconInline }"
       :width="iconWidth"
       :stroke-width="iconStrokeWidth"
@@ -44,6 +44,7 @@ export default {
   components: {
     IconPencil
   },
+  inject: ['t'],
   props: {
     modelValue: {
       type: String,

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: {
-      type: Boolean,
-      required: true,
-      default: false
+    acceptFileTypes: {
+      type: String,
+      required: 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

@@ -0,0 +1,114 @@
+<template>
+  <div
+    class="modal modal-open items-start !animate-none overflow-y-auto"
+  >
+    <div
+      class="absolute top-0 bottom-0 right-0 left-0"
+      @click.prevent="$emit('close')"
+    />
+    <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
+      <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
+        <span>
+          {{ field.name || buildDefaultName(field, template.fields) }}
+        </span>
+        <a
+          href="#"
+          class="text-xl"
+          @click.prevent="$emit('close')"
+        >&times;</a>
+      </div>
+      <div>
+        <form @submit.prevent="saveAndClose">
+          <div class="space-y-1 mb-1">
+            <div>
+              <label
+                dir="auto"
+                class="label text-sm"
+                for="description_field"
+              >
+                {{ t('description') }}
+              </label>
+              <textarea
+                id="description_field"
+                ref="textarea"
+                v-model="description"
+                dir="auto"
+                class="base-textarea !text-base w-full"
+                :readonly="!editable"
+                @input="resizeTextarea"
+              />
+            </div>
+            <div>
+              <label
+                dir="auto"
+                class="label text-sm"
+                for="title_field"
+              >
+                {{ t('display_title') }} ({{ t('optional') }})
+              </label>
+              <input
+                id="title_field"
+                v-model="title"
+                dir="auto"
+                :readonly="!editable"
+                class="base-input !text-base w-full"
+              >
+            </div>
+          </div>
+          <button
+            class="base-button w-full mt-4"
+          >
+            {{ t('save') }}
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DescriptionModal',
+  inject: ['t', 'save', 'template'],
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    buildDefaultName: {
+      type: Function,
+      required: true
+    }
+  },
+  emits: ['close'],
+  data () {
+    return {
+      description: this.field.description,
+      title: this.field.title
+    }
+  },
+  mounted () {
+    this.resizeTextarea()
+  },
+  methods: {
+    saveAndClose () {
+      this.field.description = this.description
+      this.field.title = this.title
+
+      this.save()
+      this.$emit('close')
+    },
+    resizeTextarea () {
+      const textarea = this.$refs.textarea
+
+      textarea.style.height = 'auto'
+      textarea.style.height = textarea.scrollHeight + 'px'
+    }
+  }
+}
+</script>

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,
@@ -102,7 +109,7 @@ export default {
         return this.previewImagesIndex[i] || {
           metadata: lazyloadMetadata,
           id: Math.random().toString(),
-          url: this.basePreviewUrl + `/preview/${this.document.uuid}/${i}.jpg`
+          url: this.basePreviewUrl + `/preview/${this.document.signed_uuid || this.document.uuid}/${i}.jpg`
         }
       })
     },
@@ -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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="group pb-2"
+    class="list-field group mb-2"
   >
     <div
       class="border border-base-300 rounded rounded-tr-none relative group"
@@ -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"
@@ -56,7 +58,7 @@
         >
           <button
             v-if="field && !field.areas.length"
-            title="Draw"
+            :title="t('draw')"
             class="relative cursor-pointer text-transparent group-hover:text-base-content"
             @click="$emit('set-draw', { field })"
           >
@@ -65,6 +67,28 @@
               :stroke-width="1.6"
             />
           </button>
+          <button
+            v-if="field.preferences?.formula"
+            class="relative cursor-pointer text-transparent group-hover:text-base-content"
+            :title="t('formula')"
+            @click="isShowFormulaModal = true"
+          >
+            <IconMathFunction
+              :width="18"
+              :stroke-width="1.6"
+            />
+          </button>
+          <button
+            v-if="field.conditions?.length"
+            class="relative cursor-pointer text-transparent group-hover:text-base-content"
+            :title="t('condition')"
+            @click="isShowConditionsModal = true"
+          >
+            <IconRouteAltLeft
+              :width="18"
+              :stroke-width="1.6"
+            />
+          </button>
           <PaymentSettings
             v-if="field.type === 'payment'"
             :field="field"
@@ -77,7 +101,7 @@
           >
             <label
               tabindex="0"
-              title="Settings"
+              :title="t('settings')"
               class="cursor-pointer text-transparent group-hover:text-base-content"
             >
               <IconSettings
@@ -88,164 +112,28 @@
             <ul
               v-if="renderDropdown"
               tabindex="0"
-              class="mt-1.5 dropdown-content menu menu-xs p-2 shadow bg-base-100 rounded-box w-52 z-10"
+              class="mt-1.5 dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10"
+              :style="{ backgroundColor: dropdownBgColor }"
               draggable="true"
               @dragstart.prevent.stop
               @click="closeDropdown"
             >
-              <div
-                v-if="field.type === 'text' && !defaultField"
-                class="py-1.5 px-1 relative"
-                @click.stop
-              >
-                <input
-                  v-model="field.default_value"
-                  type="text"
-                  :placeholder="t('default_value')"
-                  dir="auto"
-                  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>
-              <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
-                v-for="(area, index) in field.areas || []"
-                :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') }} {{ area.page + 1 }}
-                </a>
-              </li>
-              <li v-if="!field.areas?.length || !['radio', 'multiple'].includes(field.type)">
-                <a
-                  href="#"
-                  class="text-sm py-1 px-2"
-                  @click.prevent="$emit('set-draw', { field })"
-                >
-                  <IconNewSection
-                    :width="20"
-                    :stroke-width="1.6"
-                  />
-                  {{ t('draw_new_area') }}
-                </a>
-              </li>
-              <li v-if="field.areas?.length === 1 && ['date', 'signature', 'initials', 'text', 'cells'].includes(field.type)">
-                <a
-                  href="#"
-                  class="text-sm py-1 px-2"
-                  @click.prevent="copyToAllPages(field)"
-                >
-                  <IconCopy
-                    :width="20"
-                    :stroke-width="1.6"
-                  />
-                  {{ t('copy_to_all_pages') }}
-                </a>
-              </li>
+              <FieldSettings
+                :field="field"
+                :default-field="defaultField"
+                :editable="editable"
+                :background-color="dropdownBgColor"
+                @click-formula="isShowFormulaModal = true"
+                @click-description="isShowDescriptionModal = true"
+                @click-condition="isShowConditionsModal = true"
+                @set-draw="$emit('set-draw', $event)"
+                @scroll-to="$emit('scroll-to', $event)"
+              />
             </ul>
           </span>
           <button
             class="relative text-transparent group-hover:text-base-content pr-1"
-            title="Remove"
+            :title="t('remove')"
             @click="$emit('remove', field)"
           >
             <IconTrashX
@@ -271,7 +159,7 @@
             {{ index + 1 }}.
           </span>
           <div
-            v-if="['radio', 'multiple'].includes(field.type) && (index > 0 || field.areas.find((a) => a.option_uuid) || !field.areas.length) && !field.areas.find((a) => a.option_uuid === option.uuid)"
+            v-if="editable && ['radio', 'multiple'].includes(field.type) && (index > 0 || field.areas.find((a) => a.option_uuid) || !field.areas.length) && !field.areas.find((a) => a.option_uuid === option.uuid)"
             class="items-center flex w-full"
           >
             <input
@@ -284,7 +172,7 @@
               @blur="save"
             >
             <button
-              title="Draw"
+              :title="t('draw')"
               tabindex="-1"
               @click.prevent="$emit('set-draw', { field, option })"
             >
@@ -300,12 +188,14 @@
             class="w-full input input-primary input-xs text-sm bg-transparent"
             :placeholder="`${t('option')} ${index + 1}`"
             type="text"
+            :readonly="!editable"
             required
             dir="auto"
             @focus="maybeFocusOnOptionArea(option)"
             @blur="save"
           >
           <button
+            v-if="editable"
             class="text-sm w-3.5"
             tabindex="-1"
             @click="removeOption(option)"
@@ -313,8 +203,12 @@
             &times;
           </button>
         </div>
+        <div
+          v-if="field.options && !editable"
+          class="pb-1"
+        />
         <button
-          v-if="field.options"
+          v-else-if="field.options && editable"
           class="text-center text-sm w-full pb-1"
           @click="addOption"
         >
@@ -322,6 +216,38 @@
         </button>
       </div>
     </div>
+    <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>
 
@@ -329,7 +255,11 @@
 import Contenteditable from './contenteditable'
 import FieldType from './field_type'
 import PaymentSettings from './payment_settings'
-import { IconShape, IconNewSection, IconTrashX, IconCopy, IconSettings } 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 { IconRouteAltLeft, IconMathFunction, IconNewSection, IconTrashX, IconSettings } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 
 export default {
@@ -337,11 +267,15 @@ export default {
   components: {
     Contenteditable,
     IconSettings,
-    IconShape,
+    FieldSettings,
     PaymentSettings,
     IconNewSection,
+    FormulaModal,
+    DescriptionModal,
+    ConditionsModal,
+    IconRouteAltLeft,
     IconTrashX,
-    IconCopy,
+    IconMathFunction,
     FieldType
   },
   inject: ['template', 'save', 'backgroundColor', 'selectedAreaRef', 't'],
@@ -366,41 +300,34 @@ export default {
     return {
       isNameFocus: false,
       showPaymentModal: false,
+      isShowFormulaModal: false,
+      isShowConditionsModal: false,
+      isShowDescriptionModal: false,
       renderDropdown: false
     }
   },
   computed: {
     fieldNames: FieldType.computed.fieldNames,
-    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'
-      ]
+    dropdownBgColor () {
+      return ['', null, 'transparent'].includes(this.backgroundColor) ? 'white' : this.backgroundColor
+    },
+    schemaAttachmentsIndexes () {
+      return (this.template.schema || []).reduce((acc, item, index) => {
+        acc[item.attachment_uuid] = index
+
+        return acc
+      }, {})
+    },
+    sortedAreas () {
+      return (this.field.areas || []).sort((a, b) => {
+        return this.schemaAttachmentsIndexes[a.attachment_uuid] - this.schemaAttachmentsIndexes[b.attachment_uuid]
+      })
+    },
+    modalContainerEl () {
+      return this.$el.getRootNode().querySelector('#docuseal_modal_container')
     },
     defaultName () {
-      if (this.field.type === 'payment' && this.field.preferences?.price) {
-        const { price, currency } = this.field.preferences || {}
-
-        const formattedPrice = new Intl.NumberFormat([], {
-          style: 'currency',
-          currency
-        }).format(price)
-
-        return `${this.fieldNames[this.field.type]} ${formattedPrice}`
-      } else {
-        const typeIndex = this.template.fields.filter((f) => f.type === this.field.type).indexOf(this.field)
-
-        const suffix = { multiple: this.t('select'), radio: this.t('group') }[this.field.type] || this.t('field')
-
-        return `${this.fieldNames[this.field.type]} ${suffix} ${typeIndex + 1}`
-      }
+      return this.buildDefaultName(this.field, this.template.fields)
     },
     areas () {
       return this.field.areas || []
@@ -415,51 +342,23 @@ export default {
     }
   },
   methods: {
-    formatDate (date, format) {
-      const monthFormats = {
-        M: 'numeric',
-        MM: '2-digit',
-        MMM: 'short',
-        MMMM: 'long'
+    buildDefaultName (field, fields) {
+      if (field.type === 'payment' && field.preferences?.price) {
+        const { price, currency } = field.preferences || {}
+
+        const formattedPrice = new Intl.NumberFormat([], {
+          style: 'currency',
+          currency
+        }).format(price)
+
+        return `${this.fieldNames[field.type]} ${formattedPrice}`
+      } else {
+        const typeIndex = fields.filter((f) => f.type === field.type).indexOf(field)
+
+        const suffix = { multiple: this.t('select'), radio: this.t('group') }[field.type] || this.t('field')
+
+        return `${this.fieldNames[field.type]} ${suffix} ${typeIndex + 1}`
       }
-
-      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) => {
-        attachment.preview_images.forEach((page) => {
-          if (!field.areas.find((area) => area.attachment_uuid === attachment.uuid && area.page === parseInt(page.filename))) {
-            field.areas.push({ ...JSON.parse(areaString), attachment_uuid: attachment.uuid, page: parseInt(page.filename) })
-          }
-        })
-      })
-
-      this.$nextTick(() => {
-        this.$emit('scroll-to', this.field.areas[this.field.areas.length - 1])
-      })
-
-      this.save()
     },
     onNameFocus (e) {
       this.isNameFocus = true
@@ -478,7 +377,7 @@ export default {
       }
     },
     scrollToFirstArea () {
-      return this.field.areas?.[0] && this.$emit('scroll-to', this.field.areas[0])
+      return this.sortedAreas[0] && this.$emit('scroll-to', this.sortedAreas[0])
     },
     closeDropdown () {
       document.activeElement.blur()
@@ -496,7 +395,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()
     },
@@ -531,11 +435,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,416 @@
+<template>
+  <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="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
+      }, {})
+    },
+    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
+    },
+    sortedAreas () {
+      return (this.field.areas || []).sort((a, b) => {
+        return this.schemaAttachmentsIndexes[a.attachment_uuid] - this.schemaAttachmentsIndexes[b.attachment_uuid]
+      })
+    }
+  },
+  methods: {
+    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()
+    },
+    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
@@ -163,7 +165,7 @@
           >
             <div class="flex-col pr-1 hidden group-hover:flex -mt-1 h-0">
               <button
-                title="Up"
+                :title="t('up')"
                 class="relative w-2"
                 style="font-size: 10px; margin-bottom: -4px"
                 @click.prevent.stop="[move(submitter, -1), $refs.label.focus()] "
@@ -171,7 +173,7 @@
                 ▲
               </button>
               <button
-                title="Down"
+                :title="t('down')"
                 class="relative w-2"
                 style="font-size: 10px; margin-top: -4px"
                 @click.prevent.stop="[move(submitter, 1), $refs.label.focus()] "
@@ -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,11 +22,12 @@
       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"
     >
       <template
-        v-for="(icon, type) in fieldIcons"
+        v-for="(icon, type) in fieldIconsSorted"
         :key="type"
       >
         <li v-if="(fieldTypes.length === 0 || fieldTypes.includes(type)) && (withPhone || type != 'phone') && (withPayment || type != 'payment')">
@@ -50,7 +51,7 @@
 </template>
 
 <script>
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1 } from '@tabler/icons-vue'
 
 export default {
   name: 'FiledTypeDropdown',
@@ -65,6 +66,11 @@ export default {
       required: false,
       default: 'mt-1.5 bg-base-100'
     },
+    menuStyle: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
     buttonClasses: {
       type: String,
       required: false,
@@ -94,6 +100,7 @@ export default {
         signature: this.t('signature'),
         initials: this.t('initials'),
         date: this.t('date'),
+        number: this.t('number'),
         image: this.t('image'),
         file: this.t('file'),
         select: this.t('select'),
@@ -112,17 +119,29 @@ export default {
         signature: IconWritingSign,
         initials: IconLetterCaseUpper,
         date: IconCalendarEvent,
+        number: IconSquareNumber1,
         image: IconPhoto,
-        file: IconPaperclip,
         checkbox: IconCheckbox,
+        multiple: IconChecks,
+        file: IconPaperclip,
         radio: IconCircleDot,
         select: IconSelect,
-        multiple: IconChecks,
         cells: IconColumns3,
         stamp: IconRubberStamp,
         payment: IconCreditCard,
         phone: IconPhoneCheck
       }
+    },
+    fieldIconsSorted () {
+      if (this.fieldTypes.length) {
+        return this.fieldTypes.reduce((acc, type) => {
+          acc[type] = this.fieldIcons[type]
+
+          return acc
+        }, {})
+      } else {
+        return this.fieldIcons
+      }
     }
   },
   methods: {

app/javascript/template_builder/fields.vue

@@ -2,9 +2,10 @@
   <div :class="withStickySubmitters ? 'sticky top-0 z-10' : ''">
     <FieldSubmitter
       :model-value="selectedSubmitter.uuid"
-      class="w-full rounded-lg"
-      :class="{ 'bg-base-100': withStickySubmitters }"
+      class="roles-dropdown w-full rounded-lg"
+      :style="withStickySubmitters ? { backgroundColor } : {}"
       :submitters="submitters"
+      :menu-style="{ backgroundColor: ['', null, 'transparent'].includes(backgroundColor) ? 'white' : backgroundColor }"
       :editable="editable && !defaultSubmitters.length"
       @new-submitter="save"
       @remove="removeSubmitter"
@@ -14,7 +15,7 @@
   </div>
   <div
     ref="fields"
-    class="mb-1 mt-2"
+    class="fields mb-1 mt-2"
     @dragover.prevent="onFieldDragover"
     @drop="reorderFields"
   >
@@ -24,64 +25,106 @@
       :data-uuid="field.uuid"
       :field="field"
       :type-index="fields.filter((f) => f.type === field.type).indexOf(field)"
-      :editable="editable && (!dragField || dragField !== field)"
+      :editable="editable && (!fieldsDragFieldRef.value || fieldsDragFieldRef.value !== field)"
       :default-field="defaultFields.find((f) => f.name === field.name)"
       :draggable="editable"
-      @dragstart="dragField = field"
-      @dragend="dragField = null"
+      @dragstart="fieldsDragFieldRef.value = field"
+      @dragend="fieldsDragFieldRef.value = null"
       @remove="removeField"
       @scroll-to="$emit('scroll-to-area', $event)"
       @set-draw="$emit('set-draw', $event)"
     />
   </div>
-  <div v-if="submitterDefaultFields.length">
+  <div v-if="submitterDefaultFields.length && editable">
     <hr class="mb-2">
-    <template
-      v-for="field in submitterDefaultFields"
-      :key="field.name"
+    <template v-if="isShowFieldSearch">
+      <input
+        v-model="defaultFieldsSearch"
+        :placeholder="t('search_field')"
+        class="input input-ghost input-xs px-0 text-base mb-2 !outline-0 !rounded bg-transparent w-full"
+      >
+      <hr class="mb-2">
+    </template>
+    <div
+      class="overflow-auto relative"
+      :style="{
+        maxHeight: isShowFieldSearch ? '210px' : '',
+        minHeight: isShowFieldSearch ? '210px' : ''
+      }"
     >
       <div
-        :style="{ backgroundColor: backgroundColor }"
-        draggable="true"
-        class="border border-base-300 rounded rounded-tr-none relative group mb-2"
-        @dragstart="onDragstart({ type: 'text', ...field })"
-        @dragend="$emit('drag-end')"
+        v-if="!filteredSubmitterDefaultFields.length && defaultFieldsSearch"
+        class="top-0 bottom-0 text-center absolute flex items-center justify-center w-full flex-col"
       >
-        <div class="flex items-center justify-between relative cursor-grab">
-          <div class="flex items-center p-1 space-x-1">
-            <IconDrag />
-            <FieldType
-              :model-value="field.type || 'text'"
-              :editable="false"
-              :button-width="20"
-            />
-            <span class="block pl-0.5">
-              {{ field.name }}
+        <div>
+          {{ t('field_not_found') }}
+        </div>
+        <a
+          href="#"
+          class="link"
+          @click.prevent="defaultFieldsSearch = ''"
+        >
+          {{ t('clear') }}
+        </a>
+      </div>
+      <template
+        v-for="field in filteredSubmitterDefaultFields"
+        :key="field.name"
+      >
+        <div
+          :style="{ backgroundColor }"
+          draggable="true"
+          class="default-field border border-base-300 rounded rounded-tr-none relative group mb-2"
+          @dragstart="onDragstart({ type: 'text', ...field })"
+          @dragend="$emit('drag-end')"
+        >
+          <div class="flex items-center justify-between relative cursor-grab">
+            <div class="flex items-center p-1 space-x-1">
+              <IconDrag />
+              <FieldType
+                :model-value="field.type || 'text'"
+                :editable="false"
+                :button-width="20"
+              />
+              <span class="block pl-0.5">
+                {{ field.title || field.name }}
+              </span>
+            </div>
+            <span
+              v-if="defaultRequiredFields.includes(field)"
+              :data-tip="t('required')"
+              class="text-red-400 text-3xl pr-1.5 tooltip tooltip-left h-8"
+            >
+              *
             </span>
           </div>
         </div>
-      </div>
-    </template>
+      </template>
+    </div>
   </div>
   <div
     v-if="editable && !onlyDefinedFields"
     class="grid grid-cols-3 gap-1 pb-2"
   >
     <template
-      v-for="(icon, type) in fieldIcons"
+      v-for="(icon, type) in fieldIconsSorted"
       :key="type"
     >
       <button
         v-if="(fieldTypes.length === 0 || fieldTypes.includes(type)) && (withPhone || type != 'phone') && (withPayment || type != 'payment')"
         draggable="true"
-        class="group flex items-center justify-center border border-dashed border-base-300 hover:border-base-content/20 w-full rounded relative"
-        :style="{ backgroundColor: backgroundColor }"
+        class="field-type-button group flex items-center justify-center border border-dashed w-full rounded relative"
+        :style="{ backgroundColor }"
+        :class="drawFieldType === type ? 'border-base-content/40' : 'border-base-300 hover:border-base-content/20'"
         @dragstart="onDragstart({ type: type })"
         @dragend="$emit('drag-end')"
-        @click="addField(type)"
+        @click="['file', 'payment'].includes(type) ? $emit('add-field', type) : $emit('set-draw-type', type)"
       >
-        <div class="flex items-console group-hover:bg-base-200/50 transition-all cursor-grab h-full absolute left-0">
-          <IconDrag class=" my-auto" />
+        <div
+          class="flex items-console transition-all cursor-grab h-full absolute left-0"
+          :class="drawFieldType === type ? 'bg-base-200/50' : 'group-hover:bg-base-200/50'"
+        >
+          <IconDrag class="my-auto" />
         </div>
         <div class="flex items-center flex-col px-2 py-2">
           <component :is="icon" />
@@ -93,14 +136,14 @@
       <div
         v-else-if="type == 'phone' && (fieldTypes.length === 0 || fieldTypes.includes(type))"
         class="tooltip tooltip-bottom flex"
-        :class="{'tooltip-bottom-start': !withPayment, 'tooltip-bottom': withPayment }"
+        :class="{'tooltip-bottom-end': withPayment, 'tooltip-bottom': !withPayment }"
         data-tip="Unlock SMS-verified phone number field with paid plan. Use text field for phone numbers without verification."
       >
         <a
           href="https://www.docuseal.co/pricing"
           target="_blank"
           class="opacity-50 flex items-center justify-center border border-dashed border-base-300 w-full rounded relative"
-          :style="{ backgroundColor: backgroundColor }"
+          :style="{ backgroundColor }"
         >
           <div class="w-0 absolute left-0">
             <IconLock
@@ -139,10 +182,9 @@
 
 <script>
 import Field from './field'
-import { v4 } from 'uuid'
 import FieldType from './field_type'
 import FieldSubmitter from './field_submitter'
-import { IconLock } from '@tabler/icons-vue'
+import { IconLock, IconCirclePlus } from '@tabler/icons-vue'
 import IconDrag from './icon_drag'
 
 export default {
@@ -150,11 +192,12 @@ export default {
   components: {
     Field,
     FieldType,
+    IconCirclePlus,
     FieldSubmitter,
     IconDrag,
     IconLock
   },
-  inject: ['save', 'backgroundColor', 'withPhone', 'withPayment', 't'],
+  inject: ['save', 'backgroundColor', 'withPhone', 'withPayment', 't', 'fieldsDragFieldRef'],
   props: {
     fields: {
       type: Array,
@@ -175,11 +218,21 @@ export default {
       required: false,
       default: () => []
     },
+    defaultRequiredFields: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     onlyDefinedFields: {
       type: Boolean,
       required: false,
       default: true
     },
+    drawFieldType: {
+      type: String,
+      required: false,
+      default: ''
+    },
     defaultSubmitters: {
       type: Array,
       required: false,
@@ -204,15 +257,29 @@ export default {
       required: true
     }
   },
-  emits: ['set-draw', 'set-drag', 'drag-end', 'scroll-to-area', 'change-submitter'],
+  emits: ['add-field', 'set-draw', 'set-draw-type', 'set-drag', 'drag-end', 'scroll-to-area', 'change-submitter'],
   data () {
     return {
-      dragField: null
+      defaultFieldsSearch: ''
     }
   },
   computed: {
     fieldNames: FieldType.computed.fieldNames,
     fieldIcons: FieldType.computed.fieldIcons,
+    isShowFieldSearch () {
+      return this.submitterDefaultFields.length > 15
+    },
+    fieldIconsSorted () {
+      if (this.fieldTypes.length) {
+        return this.fieldTypes.reduce((acc, type) => {
+          acc[type] = this.fieldIcons[type]
+
+          return acc
+        }, {})
+      } else {
+        return this.fieldIcons
+      }
+    },
     submitterFields () {
       return this.fields.filter((f) => f.submitter_uuid === this.selectedSubmitter.uuid)
     },
@@ -220,6 +287,13 @@ export default {
       return this.defaultFields.filter((f) => {
         return !this.submitterFields.find((field) => field.name === f.name) && (!f.role || f.role === this.selectedSubmitter.name)
       })
+    },
+    filteredSubmitterDefaultFields () {
+      if (this.defaultFieldsSearch) {
+        return this.submitterDefaultFields.filter((f) => f.name.toLowerCase().includes(this.defaultFieldsSearch.toLowerCase()))
+      } else {
+        return this.submitterDefaultFields
+      }
     }
   },
   methods: {
@@ -228,7 +302,7 @@ export default {
     },
     onFieldDragover (e) {
       const targetField = e.target.closest('[data-uuid]')
-      const dragField = this.$refs.fields.querySelector(`[data-uuid="${this.dragField.uuid}"]`)
+      const dragField = this.$refs.fields.querySelector(`[data-uuid="${this.fieldsDragFieldRef.value.uuid}"]`)
 
       if (dragField && targetField && targetField !== dragField) {
         const fields = Array.from(this.$refs.fields.children)
@@ -272,37 +346,13 @@ export default {
     removeField (field) {
       this.fields.splice(this.fields.indexOf(field), 1)
 
-      this.save()
-    },
-    addField (type, area = null) {
-      const field = {
-        name: '',
-        uuid: v4(),
-        required: type !== 'checkbox',
-        areas: [],
-        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.fields.push(field)
-
-      if (!['payment', 'file'].includes(type)) {
-        this.$emit('set-draw', { field })
-      }
+      this.fields.forEach((f) => {
+        (f.conditions || []).forEach((c) => {
+          if (c.field_uuid === field.uuid) {
+            f.conditions.splice(f.conditions.indexOf(c), 1)
+          }
+        })
+      })
 
       this.save()
     }

app/javascript/template_builder/formula_modal.vue

@@ -0,0 +1,236 @@
+<template>
+  <div
+    class="modal modal-open items-start !animate-none overflow-y-auto"
+  >
+    <div
+      class="absolute top-0 bottom-0 right-0 left-0"
+      @click.prevent="$emit('close')"
+    />
+    <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
+      <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
+        <span>
+          {{ t('formula') }} - {{ field.name || buildDefaultName(field, template.fields) }}
+        </span>
+        <a
+          href="#"
+          class="text-xl"
+          @click.prevent="$emit('close')"
+        >&times;</a>
+      </div>
+      <div>
+        <div
+          v-if="!withFormula"
+          class="bg-base-300 rounded-xl py-2 px-3 text-center"
+        >
+          <a
+            href="https://www.docuseal.co/pricing"
+            target="_blank"
+            class="link"
+          >Available in Pro</a>
+        </div>
+        <div class="flex-inline mb-2 gap-2 space-y-1">
+          <button
+            v-for="f in fields"
+            :key="f.uuid"
+            class="mr-1 btn btn-neutral btn-outline border-base-content/20 btn-sm normal-case font-normal bg-white !rounded-xl"
+            @click.prevent="insertTextUnderCursor(`{{${f.name || buildDefaultName(f, template.fields)}}}`)"
+          >
+            <IconCodePlus
+              width="20"
+              height="20"
+              stroke-width="1.5"
+            />
+            {{ f.name || buildDefaultName(f, template.fields) }}
+          </button>
+        </div>
+        <div>
+          <div class="flex">
+            <textarea
+              ref="textarea"
+              v-model="formula"
+              class="base-textarea !rounded-xl !text-base font-mono w-full !outline-0 !ring-0 !px-3"
+              :readonly="!editable"
+              required="true"
+              @input="resizeTextarea"
+            />
+          </div>
+          <div class="mb-3 mt-1">
+            <div
+              target="blank"
+              class="text-sm mb-2 inline space-x-2"
+            >
+              <button
+                class="bg-base-200 px-2 rounded-xl"
+                @click="insertTextUnderCursor(' + ')"
+              >
+                +
+              </button>
+              <button
+                class="bg-base-200 px-2 rounded-xl"
+                @click="insertTextUnderCursor(' - ')"
+              >
+                -
+              </button>
+              <button
+                class="bg-base-200 px-2 rounded-xl"
+                @click="insertTextUnderCursor(' * ')"
+              >
+                *
+              </button>
+              <button
+                class="bg-base-200 px-2 rounded-xl"
+                @click="insertTextUnderCursor(' / ')"
+              >
+                /
+              </button>
+              <button
+                class="bg-base-200 px-2 rounded-xl"
+                @click="insertTextUnderCursor(' % ')"
+              >
+                %
+              </button>
+              <button
+                class="bg-base-200 px-2 rounded-xl"
+                @click="insertTextUnderCursor('^')"
+              >
+                ^
+              </button>
+              <button
+                class="bg-base-200 px-2 rounded-xl"
+                @click="insertTextUnderCursor('round()')"
+              >
+                round(n, d)
+              </button>
+              <button
+                class="bg-base-200 px-2 rounded-xl"
+                @click="insertTextUnderCursor('abs()')"
+              >
+                abs(n)
+              </button>
+            </div>
+          </div>
+        </div>
+        <button
+          class="base-button w-full"
+          @click.prevent="validateSaveAndClose"
+        >
+          {{ t('save') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { IconCodePlus } from '@tabler/icons-vue'
+
+export default {
+  name: 'FormulaModal',
+  components: {
+    IconCodePlus
+  },
+  inject: ['t', 'save', 'template', 'withFormula'],
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    buildDefaultName: {
+      type: Function,
+      required: true
+    }
+  },
+  emits: ['close'],
+  data () {
+    return {
+      formula: ''
+    }
+  },
+  computed: {
+    fields () {
+      return this.template.fields.reduce((acc, f) => {
+        if (f !== this.field && f.submitter_uuid === this.field.submitter_uuid && ['number'].includes(f.type) && !f.preferences?.formula) {
+          acc.push(f)
+        }
+
+        return acc
+      }, [])
+    }
+  },
+  created () {
+    this.field.preferences ||= {}
+  },
+  mounted () {
+    this.formula = this.humanizeFormula(this.field.preferences.formula || '')
+  },
+  methods: {
+    humanizeFormula (text) {
+      return text.replace(/{{(.*?)}}/g, (match, uuid) => {
+        const foundField = this.fields.find((f) => f.uuid === uuid)
+
+        if (foundField) {
+          return `{{${foundField.name || this.buildDefaultName(foundField, this.template.fields)}}}`
+        } else {
+          return '{{FIELD NOT FOUND}}'
+        }
+      })
+    },
+    normalizeFormula (text) {
+      return text.replace(/{{(.*?)}}/g, (match, name) => {
+        const foundField = this.fields.find((f) => {
+          return (f.name || this.buildDefaultName(f, this.template.fields)).trim() === name.trim()
+        })
+
+        if (foundField) {
+          return `{{${foundField.uuid}}}`
+        } else {
+          return '{{FIELD NOT FOUND}}'
+        }
+      })
+    },
+    validateSaveAndClose () {
+      if (!this.withFormula) {
+        return alert('Available only in Pro')
+      }
+
+      const normalizedFormula = this.normalizeFormula(this.formula)
+
+      if (normalizedFormula.includes('FIELD NOT FOUND')) {
+        alert('Some fields are missing in the formula.')
+      } else {
+        this.field.preferences.formula = normalizedFormula
+        this.field.readonly = !!normalizedFormula
+
+        this.save()
+
+        this.$emit('close')
+      }
+    },
+    insertTextUnderCursor (textToInsert) {
+      const textarea = this.$refs.textarea
+
+      const selectionEnd = textarea.selectionEnd
+      const cursorPos = selectionEnd
+
+      const newText = textarea.value.substring(0, cursorPos) + textToInsert + textarea.value.substring(cursorPos)
+
+      this.formula = newText
+
+      textarea.setSelectionRange(cursorPos + textToInsert.length, cursorPos + textToInsert.length)
+
+      textarea.focus()
+    },
+    resizeTextarea () {
+      const textarea = this.$refs.textarea
+
+      textarea.style.height = 'auto'
+      textarea.style.height = textarea.scrollHeight + 'px'
+    }
+  }
+}
+</script>

app/javascript/template_builder/i18n.js

@@ -1,11 +1,41 @@
 const en = {
+  search_field: 'Search field',
+  field_not_found: 'Field not found',
+  clear: 'Clear',
+  align: 'Align',
+  add_all_required_fields_to_continue: 'Add all required fields to continue',
+  left: 'Left',
+  right: 'Right',
+  center: 'Center',
+  description: 'Description',
+  display_title: 'Display title',
+  with_logo: 'With logo',
+  unchecked: 'Unchecked',
+  equal: 'Equal',
+  not_equal: 'Not equal',
+  contains: 'Contains',
+  does_not_contain: 'Does not contain',
+  not_empty: 'Not empty',
+  empty: 'Empty',
+  select_field_: 'Select field...',
+  select_value_: 'Select value...',
+  remove_condition: 'Remove condition',
   are_you_sure: 'Are you sure?',
   sign_yourself: 'Sign Yourself',
   set_signing_date: 'Set signing date',
   send: 'Send',
+  remove: 'Remove',
+  edit: 'Edit',
+  settings: 'Settings',
+  up: 'Up',
+  down: 'Down',
   checked: 'Checked',
   save: 'Save',
   cancel: 'Cancel',
+  any: 'Any',
+  drawn: 'Drawn',
+  formula: 'Formula',
+  typed: 'Typed',
   draw_field_on_the_document: 'Draw {field} field on the document',
   click_to_upload: 'Click to upload',
   or_drag_and_drop_files: 'or drag and drop files',
@@ -22,6 +52,7 @@ const en = {
   copy_to_all_pages: 'Copy to All Pages',
   add_option: 'Add option',
   option: 'Option',
+  condition: 'Condition',
   first_party: 'First Party',
   second_party: 'Second Party',
   third_party: 'Third Party',
@@ -42,9 +73,11 @@ const en = {
   eighteenth_party: 'Eighteenth Party',
   nineteenth_party: 'Nineteenth Party',
   twentieth_party: 'Twentieth Party',
+  draw: 'Draw',
   add: 'Add',
   or_add_field_without_drawing: 'Or add field without drawing',
   text: 'Text',
+  number: 'Number',
   signature: 'Signature',
   initials: 'Initials',
   date: 'Date',

app/javascript/template_builder/import_list.vue

@@ -0,0 +1,412 @@
+<template>
+  <div>
+    <div v-if="selectedSheetIndex === null && spreadsheet">
+      <form @submit.prevent="[selectedSheetIndex = $refs.selectWorksheet.value, buildDefaultMappings()]">
+        <label class="label">
+          Select Worksheet
+        </label>
+        <select
+          ref="selectWorksheet"
+          class="base-select"
+        >
+          <option
+            v-for="(sheet, index) in spreadsheet"
+            :key="index"
+            :value="index"
+          >
+            {{ sheet[0] || index }}
+          </option>
+        </select>
+        <button class="base-button mt-4 w-full">
+          Open
+        </button>
+      </form>
+    </div>
+    <div v-else-if="selectedSheetIndex !== null">
+      <div
+        v-for="submitter in submitters"
+        :key="submitter.uuid"
+        class="mb-4"
+      >
+        <div
+          v-if="submitters.length > 1"
+          class="px-3 border-y py-2 border-base-300 text-center w-full"
+        >
+          {{ submitter.name }}
+        </div>
+        <div class="flex">
+          <div class="relative w-full py-2 px-2 text-sm">
+            Recipient field
+          </div>
+          <div class="relative w-full py-2 pl-4 text-sm">
+            Spreadsheet column
+          </div>
+        </div>
+        <div
+          v-for="mapping in mappings.filter((m) => m.submitter_uuid === submitter.uuid)"
+          :key="mapping.uuid"
+          class="mb-2"
+        >
+          <div class="flex">
+            <select
+              class="base-select !select-sm !h-10"
+              required
+              @change="mapping.field_name = $event.target.value"
+            >
+              <option
+                disabled
+                value=""
+                :selected="!mapping.field_name"
+              >
+                Select Field
+              </option>
+              <option
+                v-for="(field, index) in selectFieldsForSubmitter(submitter)"
+                :key="index"
+                :value="field.name"
+                :selected="mapping.field_name === field.name"
+              >
+                {{ field.name }}
+              </option>
+            </select>
+            <div class="flex items-center px-1">
+              <IconArrowsHorizontal style="width: 19px; height: 19px" />
+            </div>
+            <div class="w-full relative">
+              <select
+                class="base-select !select-sm !h-10"
+                required
+                @change="mapping.column_index = parseInt($event.target.value)"
+              >
+                <option
+                  disabled
+                  value=""
+                  :selected="mapping.column_index == null"
+                >
+                  Select Column
+                </option>
+                <template
+                  v-for="(column, index) in columns"
+                  :key="index"
+                >
+                  <option
+                    v-if="column"
+                    :value="index"
+                    :selected="index === mapping.column_index"
+                  >
+                    {{ column }}
+                  </option>
+                </template>
+              </select>
+              <div
+                v-if="mapping.column_index != null"
+                class="absolute top-0 bottom-0 right-1 flex items-center"
+              >
+                <span
+                  class="tooltip tooltip-bottom-end pr-1 tooltip-pre"
+                  style="padding-top: 2px"
+                  :data-tip="[0, 1, 2].map((i) => rows[i]?.[mapping.column_index] ?? '---').join('\n')"
+                >
+                  <button
+                    class="btn btn-xs btn-circle bg-white border-0 border-gray-300"
+                    @click.prevent
+                  >
+                    <IconInfoCircle class="h-4 w-4" />
+                  </button>
+                </span>
+              </div>
+            </div>
+            <div class="flex items-center pl-1">
+              <span
+                class="tooltip tooltip-top"
+                data-tip="Remove"
+              >
+                <button
+                  :disabled="mappings.filter((m) => m.submitter_uuid === submitter.uuid).length < 2"
+                  class="btn btn-xs btn-circle"
+                  @click.prevent="mappings.splice(mappings.indexOf(mapping), 1)"
+                >
+                  <IconX class="h-3.5 w-3.5" />
+                </button>
+              </span>
+            </div>
+          </div>
+        </div>
+        <div>
+          <button
+            class="btn btn-sm btn-primary w-full !normal-case font-medium"
+            @click.prevent="addMapping(submitter)"
+          >
+            <IconPlus class="w-4 h-4" />
+            New Field Mapping
+          </button>
+        </div>
+      </div>
+      <div>
+        <input
+          name="submissions_json"
+          hidden
+          :value="JSON.stringify(submissionsData.slice(0, 1100))"
+        >
+      </div>
+      <div
+        class="px-3 border-y py-2 border-base-300 text-center w-full text-sm font-semibold"
+      >
+        Total entries: {{ submissionsData.length }}
+        <template v-if="submissionsData.length >= 1000">
+          / 1000
+        </template>
+      </div>
+    </div>
+    <div
+      v-else
+    >
+      <div
+        class="flex h-52 w-full"
+        @dragover.prevent
+        @drop.prevent="onDropFiles"
+      >
+        <label
+          class="w-full relative bg-base-200/20  hover:bg-base-200/30 rounded-md border border-2 border-base-content/10 border-dashed"
+          for="import_list_file"
+          :class="{ 'opacity-50': isLoading }"
+        >
+          <div class="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center">
+            <div class="flex flex-col items-center">
+              <IconInnerShadowTop
+                v-if="isLoading"
+                class="animate-spin"
+                :width="40"
+                :height="40"
+              />
+              <IconCloudUpload
+                v-else
+                :width="40"
+                :height="40"
+              />
+              <div
+                class="font-medium text-lg mb-1"
+              >
+                Upload CSV or XLSX Spreadsheet
+              </div>
+              <div class="text-sm">
+                <span class="font-medium">Click to Upload</span> or drag and drop files.
+              </div>
+            </div>
+          </div>
+          <form
+            ref="form"
+            class="hidden"
+          >
+            <input
+              id="import_list_file"
+              ref="input"
+              type="file"
+              name="file"
+              accept=".xlsx, .xls, .csv"
+              @change="onSelectFile"
+            >
+          </form>
+        </label>
+      </div>
+      <div class="text-center mt-2">
+        Or <a
+          :download="`${template.name}.csv`"
+          :href="`data:text/csv;base64,${csvBase64}`"
+          class="link font-medium"
+        >download</a> a spreadsheet to fill and import
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { IconCloudUpload, IconX, IconPlus, IconArrowsHorizontal, IconInfoCircle, IconInnerShadowTop } from '@tabler/icons-vue'
+import { v4 } from 'uuid'
+
+export default {
+  name: 'FileDropzone',
+  components: {
+    IconCloudUpload,
+    IconX,
+    IconArrowsHorizontal,
+    IconPlus,
+    IconInfoCircle,
+    IconInnerShadowTop
+  },
+  props: {
+    template: {
+      type: Object,
+      required: true
+    },
+    authenticityToken: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      isLoading: false,
+      spreadsheet: null,
+      selectedSheetIndex: null,
+      mappings: []
+    }
+  },
+  computed: {
+    table () {
+      return this.spreadsheet[this.selectedSheetIndex][1]
+    },
+    submissionsData () {
+      const submissions = []
+
+      this.rows.forEach((row) => {
+        const submittersIndex = {}
+
+        this.mappings.forEach((mapping) => {
+          if (mapping.field_name && mapping.column_index != null) {
+            submittersIndex[mapping.submitter_uuid] ||= { uuid: mapping.submitter_uuid, fields: [] }
+
+            if (['name', 'email', 'phone'].includes(mapping.field_name.toLowerCase())) {
+              submittersIndex[mapping.submitter_uuid][mapping.field_name.toLowerCase()] = row[mapping.column_index]
+            } else {
+              submittersIndex[mapping.submitter_uuid].fields.push({
+                name: mapping.field_name, default_value: row[mapping.column_index], readonly: true
+              })
+            }
+          }
+        })
+
+        if (Object.keys(submittersIndex).length !== 0) {
+          submissions.push({ submitters: Object.values(submittersIndex) })
+        }
+      })
+
+      return submissions
+    },
+    csvBase64 () {
+      const rows = []
+
+      this.submitters.forEach((submitter) => {
+        this.selectFieldsForSubmitter(submitter).forEach((field) => {
+          rows.push(this.submitters.length > 1 ? `${submitter.name} - ${field.name}` : field.name)
+        })
+      })
+
+      const csv = rows.map(item => {
+        if (/[",\n]/.test(item)) {
+          return `"${item.replace(/"/g, '""')}"`
+        } else {
+          return item
+        }
+      }).join(',')
+
+      return window.btoa(window.unescape(window.encodeURIComponent(csv + '\n' + rows.map(() => '').join(',') + '\n')))
+    },
+    submitters () {
+      return this.template.submitters
+    },
+    columns () {
+      return this.table[0]
+    },
+    form () {
+      return this.$el.closest('form')
+    },
+    fieldTypes () {
+      return ['text', 'cells', 'date', 'number', 'radio', 'select', 'checkbox']
+    },
+    defaultFields () {
+      return [
+        { name: 'Name' },
+        { name: 'Email' },
+        { name: 'Phone' }
+      ]
+    },
+    rows () {
+      return this.table.slice(1)
+    }
+  },
+  watch: {
+    selectedSheetIndex (value) {
+      if (value !== null) {
+        document.getElementById('list_form_buttons')?.classList?.remove('hidden')
+      }
+    }
+  },
+  methods: {
+    onDropFiles (e) {
+      this.uploadFile(e.dataTransfer.files[0])
+    },
+    onSelectFile (e) {
+      this.uploadFile(e.target.files[0])
+    },
+    addMapping (submitter) {
+      this.mappings.push({ uuid: v4(), field_name: '', column_index: null, submitter_uuid: submitter.uuid })
+    },
+    selectFieldsForSubmitter (submitter) {
+      const templateFields = this.template.fields.filter((field) => {
+        return field.submitter_uuid === submitter.uuid &&
+          field.name &&
+          this.fieldTypes.includes(field.type) &&
+          this.defaultFields.every((f) => field.name?.toLowerCase() !== f.name?.toLowerCase())
+      })
+
+      return [...this.defaultFields, ...templateFields]
+    },
+    buildDefaultMappings () {
+      this.submitters.forEach((submitter) => {
+        const fields = this.selectFieldsForSubmitter(submitter)
+
+        fields.forEach((field) => {
+          const columnIndex = this.columns.findIndex((column, index) => {
+            return column &&
+              column.toString().toLowerCase().includes(field.name?.toLowerCase()) &&
+              this.mappings.every((m) => m.column_index !== index)
+          })
+
+          if (columnIndex !== -1) {
+            this.mappings.push({ uuid: v4(), field_name: field.name, column_index: columnIndex, submitter_uuid: submitter.uuid })
+          }
+        })
+
+        if (!this.mappings.some((m) => m.field_name.toLowerCase() === 'name' && m.submitter_uuid === submitter.uuid)) {
+          this.mappings.unshift({ uuid: v4(), field_name: 'Name', submitter_uuid: submitter.uuid })
+        }
+
+        if (!this.mappings.some((m) => m.field_name.toLowerCase() === 'email' && m.submitter_uuid === submitter.uuid)) {
+          this.mappings.unshift({ uuid: v4(), field_name: 'Email', submitter_uuid: submitter.uuid })
+        }
+      })
+    },
+    uploadFile (file) {
+      this.isLoading = true
+
+      const formData = new FormData()
+
+      formData.append('file', file)
+
+      return fetch('/upload_spreadsheet', {
+        method: 'POST',
+        body: formData,
+        headers: {
+          'X-CSRF-Token': this.authenticityToken
+        }
+      }).then(resp => resp.json()).then((data) => {
+        if (data.error) {
+          return alert(data.error)
+        }
+
+        this.spreadsheet = data
+
+        if (data.length === 1) {
+          this.selectedSheetIndex = 0
+
+          this.buildDefaultMappings()
+        }
+      }).finally(() => {
+        this.isLoading = false
+      })
+    }
+  }
+}
+</script>

app/javascript/template_builder/mobile_draw_field.vue

@@ -24,6 +24,7 @@
       :submitters="submitters"
       :editable="editable"
       :mobile-view="true"
+      :menu-style="{ backgroundColor: ['', null, 'transparent'].includes(backgroundColor) ? 'white' : backgroundColor }"
       @new-submitter="save"
       @remove="removeSubmitter"
       @name-change="save"
@@ -43,7 +44,7 @@ export default {
     Field,
     FieldSubmitter
   },
-  inject: ['save', 't'],
+  inject: ['save', 't', 'backgroundColor'],
   props: {
     drawField: {
       type: Object,

app/javascript/template_builder/mobile_fields.vue

@@ -38,7 +38,14 @@
                 :stroke-width="1.6"
                 :width="20"
               />
-              {{ field.name }}
+              {{ field.title || field.name }}
+              <span
+                v-if="defaultRequiredFields.includes(field)"
+                :data-tip="t('required')"
+                class="text-red-400 text-2xl tooltip tooltip-left h-6"
+              >
+                *
+              </span>
             </a>
           </li>
         </template>
@@ -99,6 +106,11 @@ export default {
       required: false,
       default: () => []
     },
+    defaultRequiredFields: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     defaultFields: {
       type: Array,
       required: false,

app/javascript/template_builder/page.vue

@@ -30,6 +30,7 @@
         @start-drag="isMove = true"
         @stop-drag="isMove = false"
         @remove="$emit('remove-area', item.area)"
+        @scroll-to="$emit('scroll-to', $event)"
       />
       <FieldArea
         v-if="newArea"
@@ -39,7 +40,7 @@
       />
     </div>
     <div
-      v-show="resizeDirection || isMove || isDrag || showMask || (drawField && isMobile)"
+      v-show="resizeDirection || isMove || isDrag || showMask || (drawField && isMobile) || fieldsDragFieldRef.value"
       id="mask"
       ref="mask"
       class="top-0 bottom-0 left-0 right-0 absolute"
@@ -61,7 +62,7 @@ export default {
   components: {
     FieldArea
   },
-  inject: ['fieldTypes'],
+  inject: ['fieldTypes', 'defaultDrawFieldType', 'fieldsDragFieldRef'],
   props: {
     image: {
       type: Object,
@@ -77,6 +78,11 @@ export default {
       required: false,
       default: () => []
     },
+    drawFieldType: {
+      type: String,
+      required: false,
+      default: ''
+    },
     allowDraw: {
       type: Boolean,
       required: false,
@@ -111,7 +117,7 @@ export default {
       required: true
     }
   },
-  emits: ['draw', 'drop-field', 'remove-area'],
+  emits: ['draw', 'drop-field', 'remove-area', 'scroll-to'],
   data () {
     return {
       areaRefs: [],
@@ -123,7 +129,11 @@ export default {
   },
   computed: {
     defaultFieldType () {
-      if (this.fieldTypes.length !== 0 && !this.fieldTypes.includes('text')) {
+      if (this.drawFieldType) {
+        return this.drawFieldType
+      } else if (this.defaultDrawFieldType && this.defaultDrawFieldType !== 'text') {
+        return this.defaultDrawFieldType
+      } else if (this.fieldTypes.length !== 0 && !this.fieldTypes.includes('text')) {
         return this.fieldTypes[0]
       } else {
         return 'text'
@@ -160,8 +170,8 @@ export default {
     },
     onDrop (e) {
       this.$emit('drop-field', {
-        x: e.layerX,
-        y: e.layerY,
+        x: e.offsetX,
+        y: e.offsetY,
         maskW: this.$refs.mask.clientWidth,
         maskH: this.$refs.mask.clientHeight,
         page: this.number
@@ -184,10 +194,10 @@ export default {
 
       this.$nextTick(() => {
         this.newArea = {
-          initialX: e.layerX / this.$refs.mask.clientWidth,
-          initialY: e.layerY / this.$refs.mask.clientHeight,
-          x: e.layerX / this.$refs.mask.clientWidth,
-          y: e.layerY / this.$refs.mask.clientHeight,
+          initialX: e.offsetX / this.$refs.mask.clientWidth,
+          initialY: e.offsetY / this.$refs.mask.clientHeight,
+          x: e.offsetX / this.$refs.mask.clientWidth,
+          y: e.offsetY / this.$refs.mask.clientHeight,
           w: 0,
           h: 0
         }
@@ -195,22 +205,22 @@ export default {
     },
     onPointermove (e) {
       if (this.newArea) {
-        const dx = e.layerX / this.$refs.mask.clientWidth - this.newArea.initialX
-        const dy = e.layerY / this.$refs.mask.clientHeight - this.newArea.initialY
+        const dx = e.offsetX / this.$refs.mask.clientWidth - this.newArea.initialX
+        const dy = e.offsetY / this.$refs.mask.clientHeight - this.newArea.initialY
 
         if (dx > 0) {
           this.newArea.x = this.newArea.initialX
         } else {
-          this.newArea.x = e.layerX / this.$refs.mask.clientWidth
+          this.newArea.x = e.offsetX / this.$refs.mask.clientWidth
         }
 
         if (dy > 0) {
           this.newArea.y = this.newArea.initialY
         } else {
-          this.newArea.y = e.layerY / this.$refs.mask.clientHeight
+          this.newArea.y = e.offsetY / this.$refs.mask.clientHeight
         }
 
-        if (this.drawField?.type === 'cells') {
+        if ((this.drawField?.type || this.drawFieldType) === 'cells') {
           this.newArea.cell_w = this.newArea.h * (this.$refs.mask.clientHeight / this.$refs.mask.clientWidth)
         }