Merge from docusealco/wip

.github/workflows/docker.yml

@@ -1,27 +1,14 @@
 name: Build Docker Images
 
 on:
-  workflow_dispatch:
-    inputs:
-      version:
-        description: Version
-        type: string
-        required: true
-      image:
-        description: QEMU image
-        type: string
-        required: false
-        default: tonistiigi/binfmt:latest
-      os:
-        description: OS
-        type: string
-        required: false
-        default: ubuntu-24.04-arm
+  push:
+    tags:
+      - "*.*.*"
 
 jobs:
   build:
-    runs-on: ${{ inputs.os }}
-    timeout-minutes: 20
+    runs-on: ubuntu-24.04-arm
+    timeout-minutes: 30
 
     steps:
     - name: Checkout code
@@ -34,18 +21,16 @@ jobs:
       uses: docker/metadata-action@v4
       with:
         images: docuseal/docuseal
-        tags: latest,${{ inputs.version }}
+        tags: type=semver,pattern={{version}}
 
     - name: Set up QEMU
       uses: docker/setup-qemu-action@v3
-      with:
-        image: ${{ inputs.image }}
 
     - name: Set up Docker Buildx
       uses: docker/setup-buildx-action@v3
 
     - name: Create .version file
-      run: echo ${{ inputs.version }} > .version
+      run: echo ${{ github.ref_name }} > .version
 
     - name: Login to Docker Hub
       uses: docker/login-action@v3

.gitignore

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

.rubocop.yml

@@ -42,6 +42,15 @@ Metrics/CyclomaticComplexity:
 Metrics/PerceivedComplexity:
   Max: 15
 
+Style/MultipleComparison:
+  Enabled: false
+
+Style/NumericPredicate:
+  Enabled: false
+
+Naming/PredicateMethod:
+  Enabled: false
+
 Layout/LineLength:
   AllowedPatterns: ['\A\s*#']
 
@@ -68,6 +77,9 @@ RSpec/ExampleLength:
 RSpec/MultipleMemoizedHelpers:
   Max: 15
 
+RSpec/AnyInstance:
+  Enabled: false
+
 Metrics/BlockNesting:
   Max: 5
 

Dockerfile

@@ -9,6 +9,7 @@ RUN apk --no-cache add fontforge wget && \
     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 && \
+    wget -O /model.onnx "https://github.com/docusealco/fields-detection/releases/download/2.0.0/model_704_int8.onnx" && \
     wget -O pdfium-linux.tgz "https://github.com/docusealco/pdfium-binaries/releases/latest/download/pdfium-linux-$(uname -m | sed 's/x86_64/x64/;s/aarch64/arm64/').tgz" && \
     mkdir -p /pdfium-linux && \
     tar -xzf pdfium-linux.tgz -C /pdfium-linux
@@ -50,7 +51,7 @@ ENV OPENSSL_CONF=/app/openssl_legacy.cnf
 
 WORKDIR /app
 
-RUN echo '@edge https://dl-cdn.alpinelinux.org/alpine/edge/community' >> /etc/apk/repositories && apk add --no-cache sqlite-dev libpq-dev mariadb-dev vips-dev@edge yaml-dev redis libheif@edge vips-heif@edge gcompat ttf-freefont && mkdir /fonts && rm /usr/share/fonts/freefont/FreeSans.otf
+RUN apk add --no-cache sqlite-dev libpq-dev mariadb-dev vips-dev yaml-dev redis libheif vips-heif gcompat ttf-freefont && mkdir /fonts && rm /usr/share/fonts/freefont/FreeSans.otf
 
 RUN echo $'.include = /etc/ssl/openssl.cnf\n\
 \n\
@@ -66,7 +67,9 @@ activate = 1' >> /app/openssl_legacy.cnf
 
 COPY ./Gemfile ./Gemfile.lock ./
 
-RUN apk add --no-cache build-base && bundle install && apk del --no-cache build-base && rm -rf ~/.bundle /usr/local/bundle/cache && ruby -e "puts Dir['/usr/local/bundle/**/{spec,rdoc,resources/shared,resources/collation,resources/locales}']" | xargs rm -rf
+RUN apk add --no-cache build-base && bundle install && apk del --no-cache build-base && rm -rf ~/.bundle /usr/local/bundle/cache && ruby -e "puts Dir['/usr/local/bundle/**/{spec,rdoc,resources/shared,resources/collation,resources/locales}']" | xargs rm -rf && ln -sf /usr/lib/libonnxruntime.so.1 $(ruby -e "print Dir[Gem::Specification.find_by_name('onnxruntime').gem_dir + '/vendor/*.so'].first")
+
+RUN echo 'https://dl-cdn.alpinelinux.org/alpine/edge/main' >> /etc/apk/repositories && echo 'https://dl-cdn.alpinelinux.org/alpine/edge/community' >> /etc/apk/repositories && apk add --no-cache onnxruntime
 
 COPY ./bin ./bin
 COPY ./app ./app
@@ -83,10 +86,11 @@ COPY --from=download /fonts/GoNotoKurrent-Regular.ttf /fonts/GoNotoKurrent-Bold.
 COPY --from=download /fonts/FreeSans.ttf /usr/share/fonts/freefont
 COPY --from=download /pdfium-linux/lib/libpdfium.so /usr/lib/libpdfium.so
 COPY --from=download /pdfium-linux/licenses/pdfium.txt /usr/lib/libpdfium-LICENSE.txt
+COPY --from=download /model.onnx /app/tmp/model.onnx
 COPY --from=webpack /app/public/packs ./public/packs
 
 RUN ln -s /fonts /app/public/fonts
-RUN bundle exec bootsnap precompile --gemfile app/ lib/
+RUN bundle exec bootsnap precompile -j 1 --gemfile app/ lib/
 
 WORKDIR /data/docuseal
 ENV WORKDIR=/data/docuseal

Gemfile

@@ -24,7 +24,9 @@ gem 'image_processing'
 gem 'jwt'
 gem 'lograge'
 gem 'mysql2', require: false
+gem 'numo-narray'
 gem 'oj'
+gem 'onnxruntime'
 gem 'pagy'
 gem 'pg', require: false
 gem 'premailer-rails'

Gemfile.lock

@@ -76,25 +76,28 @@ GEM
       public_suffix (>= 2.0.2, < 7.0)
     annotaterb (4.14.0)
     arabic-letter-connector (0.1.1)
-    ast (2.4.2)
-    aws-eventstream (1.3.0)
-    aws-partitions (1.1027.0)
-    aws-sdk-core (3.214.0)
+    ast (2.4.3)
+    aws-eventstream (1.4.0)
+    aws-partitions (1.1197.0)
+    aws-sdk-core (3.240.0)
       aws-eventstream (~> 1, >= 1.3.0)
       aws-partitions (~> 1, >= 1.992.0)
       aws-sigv4 (~> 1.9)
+      base64
+      bigdecimal
       jmespath (~> 1, >= 1.6.1)
-    aws-sdk-kms (1.96.0)
-      aws-sdk-core (~> 3, >= 3.210.0)
+      logger
+    aws-sdk-kms (1.118.0)
+      aws-sdk-core (~> 3, >= 3.239.1)
       aws-sigv4 (~> 1.5)
-    aws-sdk-s3 (1.176.1)
-      aws-sdk-core (~> 3, >= 3.210.0)
+    aws-sdk-s3 (1.208.0)
+      aws-sdk-core (~> 3, >= 3.234.0)
       aws-sdk-kms (~> 1)
       aws-sigv4 (~> 1.5)
     aws-sdk-secretsmanager (1.110.0)
       aws-sdk-core (~> 3, >= 3.210.0)
       aws-sigv4 (~> 1.5)
-    aws-sigv4 (1.10.1)
+    aws-sigv4 (1.12.1)
       aws-eventstream (~> 1, >= 1.0.2)
     azure-storage-blob (2.0.3)
       azure-storage-common (~> 2.0)
@@ -291,10 +294,10 @@ GEM
       rdoc (>= 4.0.0)
       reline (>= 0.4.2)
     jmespath (1.6.2)
-    json (2.13.2)
+    json (2.15.0)
     jwt (2.9.3)
       base64
-    language_server-protocol (3.17.0.3)
+    language_server-protocol (3.17.0.5)
     launchy (3.0.1)
       addressable (~> 2.8)
       childprocess (~> 5.0)
@@ -305,6 +308,7 @@ GEM
       letter_opener (~> 1.9)
       railties (>= 6.1)
       rexml
+    lint_roller (1.1.0)
     logger (1.7.0)
     lograge (0.14.0)
       actionpack (>= 4)
@@ -356,17 +360,26 @@ GEM
       racc (~> 1.4)
     nokogiri (1.18.9-x86_64-linux-musl)
       racc (~> 1.4)
+    numo-narray (0.9.2.1)
     oj (3.16.11)
       bigdecimal (>= 3.0)
       ostruct (>= 0.2)
+    onnxruntime (0.10.1)
+      ffi
+    onnxruntime (0.10.1-aarch64-linux)
+      ffi
+    onnxruntime (0.10.1-arm64-darwin)
+      ffi
+    onnxruntime (0.10.1-x86_64-linux)
+      ffi
     openssl (3.3.0)
     orm_adapter (0.5.0)
     os (1.1.4)
     ostruct (0.6.3)
     package_json (0.1.0)
     pagy (9.3.3)
-    parallel (1.26.3)
-    parser (3.3.6.0)
+    parallel (1.27.0)
+    parser (3.3.9.0)
       ast (~> 2.4.1)
       racc
     pg (1.5.9)
@@ -383,6 +396,7 @@ GEM
     pretender (0.5.0)
       actionpack (>= 6.1)
     prettyprint (0.2.0)
+    prism (1.5.1)
     pry (0.15.0)
       coderay (~> 1.1)
       method_source (~> 1.0)
@@ -395,7 +409,7 @@ GEM
     puma (6.5.0)
       nio4r (~> 2.0)
     racc (1.8.1)
-    rack (3.2.0)
+    rack (3.2.3)
     rack-proxy (0.7.7)
       rack
     rack-session (2.1.1)
@@ -448,7 +462,7 @@ GEM
       psych (>= 4.0.0)
     redis-client (0.23.0)
       connection_pool
-    regexp_parser (2.9.3)
+    regexp_parser (2.11.3)
     reline (0.6.2)
       io-console (~> 0.5)
     representable (3.2.0)
@@ -461,7 +475,7 @@ GEM
       actionpack (>= 5.2)
       railties (>= 5.2)
     retriable (3.1.2)
-    rexml (3.4.0)
+    rexml (3.4.4)
     rotp (6.3.0)
     rouge (4.5.2)
     rqrcode (2.2.0)
@@ -485,18 +499,20 @@ GEM
       rspec-mocks (~> 3.13)
       rspec-support (~> 3.13)
     rspec-support (3.13.2)
-    rubocop (1.69.2)
+    rubocop (1.81.1)
       json (~> 2.3)
-      language_server-protocol (>= 3.17.0)
+      language_server-protocol (~> 3.17.0.2)
+      lint_roller (~> 1.1.0)
       parallel (~> 1.10)
       parser (>= 3.3.0.2)
       rainbow (>= 2.2.2, < 4.0)
       regexp_parser (>= 2.9.3, < 3.0)
-      rubocop-ast (>= 1.36.2, < 2.0)
+      rubocop-ast (>= 1.47.1, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 2.4.0, < 4.0)
-    rubocop-ast (1.37.0)
-      parser (>= 3.3.1.0)
+    rubocop-ast (1.47.1)
+      parser (>= 3.3.7.2)
+      prism (~> 1.4)
     rubocop-performance (1.23.0)
       rubocop (>= 1.48.1, < 2.0)
       rubocop-ast (>= 1.31.1, < 2.0)
@@ -567,11 +583,11 @@ GEM
     tzinfo-data (1.2024.2)
       tzinfo (>= 1.0.0)
     uber (0.1.0)
-    unicode-display_width (3.1.2)
-      unicode-emoji (~> 4.0, >= 4.0.4)
-    unicode-emoji (4.0.4)
+    unicode-display_width (3.2.0)
+      unicode-emoji (~> 4.1)
+    unicode-emoji (4.1.0)
     uniform_notifier (1.16.0)
-    uri (1.0.3)
+    uri (1.1.1)
     useragent (0.16.11)
     warden (1.2.9)
       rack (>= 2.0.9)
@@ -634,7 +650,9 @@ DEPENDENCIES
   letter_opener_web
   lograge
   mysql2
+  numo-narray
   oj
+  onnxruntime
   pagy
   pg
   premailer-rails

README.md

@@ -42,7 +42,7 @@ DocuSeal is an open source platform that provides secure and efficient digital d
 - PDF signature verification
 - Users management
 - Mobile-optimized
-- 6 UI languages with signing available in 14 languages
+- 7 UI languages with signing available in 14 languages
 - API and Webhooks for integrations
 - Easy to deploy in minutes
 

app/controllers/account_configs_controller.rb

@@ -19,6 +19,7 @@ class AccountConfigsController < ApplicationController
     AccountConfig::FORCE_SSO_AUTH_KEY,
     AccountConfig::FLATTEN_RESULT_PDF_KEY,
     AccountConfig::ENFORCE_SIGNING_ORDER_KEY,
+    AccountConfig::WITH_FILE_LINKS_KEY,
     AccountConfig::WITH_SIGNATURE_ID,
     AccountConfig::COMBINE_PDF_RESULT_KEY,
     AccountConfig::REQUIRE_SIGNING_REASON_KEY,

app/controllers/accounts_controller.rb

@@ -8,7 +8,8 @@ class AccountsController < ApplicationController
     'es-ES' => 'Español',
     'pt-PT' => 'Português',
     'de-DE' => 'Deutsch',
-    'it-IT' => 'Italiano'
+    'it-IT' => 'Italiano',
+    'nl-NL' => 'Nederlands'
   }.freeze
 
   before_action :load_account
@@ -45,7 +46,9 @@ class AccountsController < ApplicationController
   def destroy
     authorize!(:manage, current_account)
 
+    true_user.skip_reconfirmation!
     true_user.update!(locked_at: Time.current, email: true_user.email.sub('@', '+removed@'))
+    true_user.account.update!(archived_at: Time.current)
 
     # rubocop:disable Layout/LineLength
     render turbo_stream: turbo_stream.replace(

app/controllers/api/active_storage_blobs_proxy_controller.rb

@@ -45,18 +45,19 @@ module Api
     def authorization_check!(attachment, record, exp)
       return if attachment.name == 'logo'
       return if exp.to_i >= Time.current.to_i
-
       return if current_user && current_ability.can?(:read, record)
 
-      configs = record.account.account_configs.where(key: [AccountConfig::DOWNLOAD_LINKS_AUTH_KEY,
-                                                           AccountConfig::DOWNLOAD_LINKS_EXPIRE_KEY])
+      if exp.blank?
+        configs = record.account.account_configs.where(key: [AccountConfig::DOWNLOAD_LINKS_AUTH_KEY,
+                                                             AccountConfig::DOWNLOAD_LINKS_EXPIRE_KEY])
 
-      require_auth = configs.any? { |c| c.key == AccountConfig::DOWNLOAD_LINKS_AUTH_KEY && c.value }
-      require_ttl = configs.none? { |c| c.key == AccountConfig::DOWNLOAD_LINKS_EXPIRE_KEY && c.value == false }
+        require_auth = configs.any? { |c| c.key == AccountConfig::DOWNLOAD_LINKS_AUTH_KEY && c.value }
+        require_ttl = configs.none? { |c| c.key == AccountConfig::DOWNLOAD_LINKS_EXPIRE_KEY && c.value == false }
 
-      return if !require_ttl && !require_auth
+        return if !require_ttl && !require_auth
+      end
 
-      Rollbar.error('Blob aunauthorized') if defined?(Rollbar)
+      Rollbar.error('Blob unauthorized') if defined?(Rollbar)
 
       raise CanCan::AccessDenied
     end

app/controllers/api/attachments_controller.rb

@@ -34,6 +34,10 @@ module Api
       end
 
       render json: attachment.as_json(only: %i[uuid created_at], methods: %i[url filename content_type])
+    rescue Submitters::MaliciousFileExtension => e
+      Rollbar.error(e) if defined?(Rollbar)
+
+      render json: { error: e.message }, status: :unprocessable_content
     end
 
     def build_new_cookie_signatures_json(submitter, attachment)

app/controllers/api/submissions_controller.rb

@@ -43,7 +43,7 @@ module Api
       end
 
       if @submission.audit_trail_attachment.blank? && submitters.all?(&:completed_at?)
-        @submission.audit_trail_attachment = Submissions::GenerateAuditTrail.call(@submission)
+        @submission.audit_trail_attachment = Submissions::EnsureAuditGenerated.call(@submission)
       end
 
       render json: Submissions::SerializeForApi.call(@submission, submitters, params)
@@ -147,7 +147,7 @@ module Api
       is_send_email = !params[:send_email].in?(['false', false])
 
       if (emails = (params[:emails] || params[:email]).presence) &&
-         (params[:submission].blank? && params[:submitters].blank?)
+         params[:submission].blank? && params[:submitters].blank?
         Submissions.create_from_emails(template:,
                                        user: current_user,
                                        source: :api,
@@ -182,12 +182,13 @@ module Api
     def submissions_params
       permitted_attrs = [
         :send_email, :send_sms, :bcc_completed, :completed_redirect_url, :reply_to, :go_to_last,
-        :require_phone_2fa, :expire_at, :name,
+        :require_phone_2fa, :require_email_2fa, :expire_at, :name,
         {
+          variables: {},
           message: %i[subject body],
           submitters: [[:send_email, :send_sms, :completed_redirect_url, :uuid, :name, :email, :role,
                         :completed, :phone, :application_key, :external_id, :reply_to, :go_to_last,
-                        :require_phone_2fa, :order,
+                        :require_phone_2fa, :require_email_2fa, :order, :invite_by,
                         { metadata: {}, values: {}, roles: [], readonly_fields: [], message: %i[subject body],
                           fields: [:name, :uuid, :default_value, :value, :title, :description,
                                    :readonly, :required, :validation_pattern, :invalid_message,

app/controllers/api/submitters_controller.rb

@@ -84,7 +84,7 @@ module Api
 
       submitter_params.permit(
         :send_email, :send_sms, :reply_to, :completed_redirect_url, :uuid, :name, :email, :role,
-        :completed, :phone, :application_key, :external_id, :go_to_last, :require_phone_2fa,
+        :completed, :phone, :application_key, :external_id, :go_to_last, :require_phone_2fa, :require_email_2fa,
         { metadata: {}, values: {}, readonly_fields: [], message: %i[subject body],
           fields: [[:name, :uuid, :default_value, :value, :required,
                     :readonly, :validation_pattern, :invalid_message,

app/controllers/application_controller.rb

@@ -13,6 +13,8 @@ class ApplicationController < ActionController::Base
   before_action :maybe_redirect_to_setup, unless: :signed_in?
   before_action :authenticate_user!, unless: :devise_controller?
 
+  before_action :set_csp, if: -> { request.get? && !request.headers['HTTP_X_TURBO'] }
+
   helper_method :button_title,
                 :current_account,
                 :form_link_host,
@@ -123,4 +125,21 @@ class ApplicationController < ActionController::Base
 
     redirect_to request.url.gsub('.co/', '.com/'), allow_other_host: true, status: :moved_permanently
   end
+
+  def set_csp
+    request.content_security_policy = current_content_security_policy.tap do |policy|
+      policy.default_src :self
+      policy.script_src :self
+      policy.style_src :self, :unsafe_inline
+      policy.img_src :self, :https, :http, :blob, :data
+      policy.font_src :self, :https, :http, :blob, :data
+      policy.manifest_src :self
+      policy.media_src :self
+      policy.frame_src :self
+      policy.worker_src :self, :blob
+      policy.connect_src :self
+
+      policy.directives['connect-src'] << 'ws:' if Rails.env.development?
+    end
+  end
 end

app/controllers/console_redirect_controller.rb

@@ -17,8 +17,10 @@ class ConsoleRedirectController < ApplicationController
                                scope: :console,
                                exp: 1.minute.from_now.to_i)
 
-    path = Addressable::URI.parse(params[:redir]).path if params[:redir].to_s.starts_with?(Docuseal::CONSOLE_URL)
+    redir_uri = Addressable::URI.parse(params[:redir])
+    path = redir_uri.path if params[:redir].to_s.starts_with?(Docuseal::CONSOLE_URL)
 
-    redirect_to("#{Docuseal::CONSOLE_URL}#{path}?#{{ auth: }.to_query}", allow_other_host: true)
+    redirect_to "#{Docuseal::CONSOLE_URL}#{path}?#{{ **redir_uri&.query_values, 'auth' => auth }.to_query}",
+                allow_other_host: true
   end
 end

app/controllers/invitations_controller.rb

@@ -1,4 +1,11 @@
 # frozen_string_literal: true
 
 class InvitationsController < Devise::PasswordsController
+  def update
+    super do |resource|
+      resource.confirmed_at ||= Time.current if resource.errors.empty?
+
+      PasswordsController::Current.user = resource
+    end
+  end
 end

app/controllers/passwords_controller.rb

@@ -1,6 +1,12 @@
 # frozen_string_literal: true
 
 class PasswordsController < Devise::PasswordsController
+  # rubocop:disable Rails/LexicallyScopedActionFilter
+  skip_before_action :require_no_authentication, only: %i[edit update]
+  # rubocop:enable Rails/LexicallyScopedActionFilter
+
+  around_action :with_browser_locale
+
   class Current < ActiveSupport::CurrentAttributes
     attribute :user
   end
@@ -16,4 +22,10 @@ class PasswordsController < Devise::PasswordsController
       Current.user = resource
     end
   end
+
+  private
+
+  def after_resetting_password_path_for(_)
+    new_session_path(resource_name)
+  end
 end

app/controllers/personalization_settings_controller.rb

@@ -4,6 +4,7 @@ class PersonalizationSettingsController < ApplicationController
   ALLOWED_KEYS = [
     AccountConfig::FORM_COMPLETED_BUTTON_KEY,
     AccountConfig::SUBMITTER_INVITATION_EMAIL_KEY,
+    AccountConfig::SUBMITTER_INVITATION_REMINDER_EMAIL_KEY,
     AccountConfig::SUBMITTER_DOCUMENTS_COPY_EMAIL_KEY,
     AccountConfig::SUBMITTER_COMPLETED_EMAIL_KEY,
     AccountConfig::FORM_COMPLETED_MESSAGE_KEY,

app/controllers/profile_controller.rb

@@ -9,14 +9,21 @@ class ProfileController < ApplicationController
 
   def update_contact
     if current_user.update(contact_params)
-      redirect_to settings_profile_index_path, notice: I18n.t('contact_information_has_been_update')
+      if current_user.try(:pending_reconfirmation?) && current_user.previous_changes.key?(:unconfirmed_email)
+        SendConfirmationInstructionsJob.perform_async('user_id' => current_user.id)
+
+        redirect_to settings_profile_index_path,
+                    notice: I18n.t('a_confirmation_email_has_been_sent_to_the_new_email_address')
+      else
+        redirect_to settings_profile_index_path, notice: I18n.t('contact_information_has_been_update')
+      end
     else
       render :index, status: :unprocessable_content
     end
   end
 
   def update_password
-    if current_user.update(password_params)
+    if current_user.update_with_password(password_params)
       bypass_sign_in(current_user)
       redirect_to settings_profile_index_path, notice: I18n.t('password_has_been_changed')
     else
@@ -31,6 +38,6 @@ class ProfileController < ApplicationController
   end
 
   def password_params
-    params.require(:user).permit(:password, :password_confirmation)
+    params.require(:user).permit(:password, :password_confirmation, :current_password)
   end
 end

app/controllers/reveal_access_token_controller.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class RevealAccessTokenController < ApplicationController
+  def show
+    authorize!(:manage, current_user.access_token)
+  end
+
+  def create
+    authorize!(:manage, current_user.access_token)
+
+    if current_user.valid_password?(params[:password])
+      render turbo_stream: turbo_stream.replace(:access_token_container,
+                                                partial: 'reveal_access_token/access_token',
+                                                locals: { token: current_user.access_token.token })
+    else
+      render turbo_stream: turbo_stream.replace(:modal, template: 'reveal_access_token/show',
+                                                        locals: { error_message: I18n.t('wrong_password') }),
+             status: :unprocessable_content
+    end
+  end
+end

app/controllers/send_submission_email_controller.rb

@@ -29,7 +29,7 @@ class SendSubmissionEmailController < ApplicationController
 
     RateLimit.call("send-email-#{@submitter.id}", limit: 2, ttl: 5.minutes)
 
-    SubmitterMailer.documents_copy_email(@submitter, sig: true).deliver_later! unless already_sent?(@submitter)
+    SubmitterMailer.documents_copy_email(@submitter, sig: true).deliver_later! if can_send?(@submitter)
 
     respond_to do |f|
       f.html { render :success }
@@ -39,8 +39,11 @@ class SendSubmissionEmailController < ApplicationController
 
   private
 
-  def already_sent?(submitter)
-    EmailEvent.exists?(tag: :submitter_documents_copy, email: submitter.email, emailable: submitter,
-                       event_type: :send, created_at: SEND_DURATION.ago..Time.current)
+  def can_send?(submitter)
+    return false if submitter.account.archived_at?
+    return false if EmailEvent.exists?(tag: :submitter_documents_copy, email: submitter.email, emailable: submitter,
+                                       event_type: :send, created_at: SEND_DURATION.ago..Time.current)
+
+    true
   end
 end

app/controllers/start_form_controller.rb

@@ -16,7 +16,9 @@ class StartFormController < ApplicationController
   COOKIES_DEFAULTS = { httponly: true, secure: Rails.env.production? }.freeze
 
   def show
-    raise ActionController::RoutingError, I18n.t('not_found') if @template.preferences['require_phone_2fa']
+    if @template.preferences['require_phone_2fa'] || @template.preferences['require_email_2fa']
+      raise ActionController::RoutingError, I18n.t('not_found')
+    end
 
     if @template.shared_link?
       @submitter = @template.submissions.new(account_id: @template.account_id)
@@ -81,7 +83,7 @@ class StartFormController < ApplicationController
 
     @submitter = Submitter.where(submission: @template.submissions)
                           .where.not(completed_at: nil)
-                          .find_by!(required_params)
+                          .find_by!(required_params.except('name'))
   end
 
   private

app/controllers/submission_events_controller.rb

@@ -10,6 +10,7 @@ class SubmissionEventsController < ApplicationController
     'api_complete_form' => 'check',
     'send_reminder_email' => 'mail_forward',
     'send_2fa_sms' => '2fa',
+    'send_2fa_email' => '2fa',
     'send_sms' => 'send',
     'phone_verified' => 'phone_check',
     'email_verified' => 'email_check',

app/controllers/submissions_controller.rb

@@ -12,6 +12,14 @@ class SubmissionsController < ApplicationController
     authorize!(:create, Submission)
   end
 
+  FIELD_ICONS = {
+    'text' => 'text_size', 'signature' => 'writing_sign', 'date' => 'calendar_event',
+    'number' => 'square_number_1', 'image' => 'photo', 'initials' => 'letter_case_upper',
+    'file' => 'paperclip', 'select' => 'select', 'checkbox' => 'checkbox', 'radio' => 'circle_dot',
+    'stamp' => 'rubber_stamp', 'cells' => 'columns_3', 'multiple' => 'checks', 'phone' => 'phone_check',
+    'payment' => 'credit_card', 'verification' => 'id', 'kba' => 'user_scan'
+  }.freeze
+
   def show
     @submission = Submissions.preload_with_pages(@submission)
 
@@ -45,14 +53,15 @@ class SubmissionsController < ApplicationController
       else
         submissions_attrs = submissions_params[:submission].to_h.values
 
-        submissions_attrs, =
-          Submissions::NormalizeParamUtils.normalize_submissions_params!(submissions_attrs, @template)
+        submissions_attrs, _, new_fields =
+          Submissions::NormalizeParamUtils.normalize_submissions_params!(submissions_attrs, @template, add_fields: true)
 
         Submissions.create_from_submitters(template: @template,
                                            user: current_user,
                                            source: :invite,
                                            submitters_order: params[:preserve_order] == '1' ? 'preserved' : 'random',
                                            submissions_attrs:,
+                                           new_fields:,
                                            params: params.merge('send_completed_email' => true))
       end
 

app/controllers/submissions_download_controller.rb

@@ -70,7 +70,7 @@ class SubmissionsDownloadController < ApplicationController
     return if submitter.submission.submitters.order(:completed_at).last != submitter
 
     attachment = submitter.submission.combined_document_attachment
-    attachment ||= Submissions::GenerateCombinedAttachment.call(submitter)
+    attachment ||= Submissions::EnsureCombinedGenerated.call(submitter)
 
     filename_format = AccountConfig.find_or_initialize_by(account_id: submitter.account_id,
                                                           key: AccountConfig::DOCUMENT_FILENAME_FORMAT_KEY)&.value

app/controllers/submissions_export_controller.rb

@@ -10,6 +10,9 @@ class SubmissionsExportController < ApplicationController
                                                      attachments_attachments: :blob })
                               .order(id: :asc)
 
+    submissions = Submissions.search(current_user, submissions, params[:q], search_values: true)
+    submissions = Submissions::Filter.call(submissions, current_user, params)
+
     expires_at = Accounts.link_expires_at(current_account)
 
     if params[:format] == 'csv'

app/controllers/submissions_filters_controller.rb

@@ -3,6 +3,7 @@
 class SubmissionsFiltersController < ApplicationController
   ALLOWED_NAMES = %w[
     author
+    folder
     completed_at
     status
     created_at

app/controllers/submissions_preview_controller.rb

@@ -41,6 +41,9 @@ class SubmissionsPreviewController < ApplicationController
 
   def completed
     @submission = Submission.find_by!(slug: params[:submissions_preview_slug])
+
+    raise ActionController::RoutingError, I18n.t('not_found') if @submission.account.archived_at?
+
     @template = @submission.template
 
     render :completed, layout: 'form'
@@ -50,8 +53,11 @@ class SubmissionsPreviewController < ApplicationController
 
   def use_signature?(submission)
     return false if current_user && can?(:read, submission)
-    return true if submission.submitters.any? { |e| e.preferences['require_phone_2fa'] }
+    return true if submission.submitters.any? do |e|
+      e.preferences['require_phone_2fa'] || e.preferences['require_email_2fa']
+    end
     return true if submission.template&.preferences&.dig('require_phone_2fa')
+    return true if submission.template&.preferences&.dig('require_email_2fa')
 
     !submission_valid_ttl?(submission)
   end

app/controllers/submit_form_controller.rb

@@ -17,6 +17,7 @@ class SubmitFormController < ApplicationController
     submission = @submitter.submission
 
     return redirect_to submit_form_completed_path(@submitter.slug) if @submitter.completed_at?
+    return render :email_2fa if require_email_2fa?(@submitter)
 
     @form_configs = Submitters::FormConfigs.call(@submitter, CONFIG_KEYS)
 
@@ -47,6 +48,11 @@ class SubmitFormController < ApplicationController
   end
 
   def update
+    if require_email_2fa?(@submitter)
+      return render json: { error: I18n.t('verification_required_refresh_the_page_and_pass_2fa') },
+                    status: :unprocessable_content
+    end
+
     if @submitter.completed_at?
       return render json: { error: I18n.t('form_has_been_completed_already') }, status: :unprocessable_content
     end
@@ -75,7 +81,11 @@ class SubmitFormController < ApplicationController
     render json: { error: e.message }, status: :unprocessable_content
   end
 
-  def completed; end
+  def completed
+    raise ActionController::RoutingError, I18n.t('not_found') if @submitter.account.archived_at?
+
+    redirect_to submit_form_path(params[:submit_form_slug]) if require_email_2fa?(@submitter)
+  end
 
   def success; end
 
@@ -107,4 +117,12 @@ class SubmitFormController < ApplicationController
     ActiveStorage::Attachment.where(record: submission.submitters, name: :attachments)
                              .preload(:blob).index_by(&:uuid)
   end
+
+  def require_email_2fa?(submitter)
+    return false if submitter.submission.template&.preferences&.dig('require_email_2fa') != true &&
+                    submitter.preferences['require_email_2fa'] != true
+    return false if cookies.encrypted[:email_2fa_slug] == submitter.slug
+
+    true
+  end
 end

app/controllers/submit_form_email_2fas_controller.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+class SubmitFormEmail2fasController < ApplicationController
+  around_action :with_browser_locale
+
+  skip_before_action :authenticate_user!
+  skip_authorization_check
+
+  before_action :load_submitter
+
+  COOKIES_TTL = 12.hours
+  COOKIES_DEFAULTS = { httponly: true, secure: Rails.env.production? }.freeze
+
+  def create
+    RateLimit.call("verify-2fa-code-#{@submitter.id}", limit: 2, ttl: 45.seconds, enabled: true)
+
+    value = [@submitter.email.downcase.strip, @submitter.slug].join(':')
+
+    if EmailVerificationCodes.verify(params[:one_time_code].to_s.gsub(/\D/, ''), value)
+      SubmissionEvents.create_with_tracking_data(@submitter, 'email_verified', request, { email: @submitter.email })
+
+      cookies.encrypted[:email_2fa_slug] =
+        { value: @submitter.slug, expires: COOKIES_TTL.from_now, **COOKIES_DEFAULTS }
+
+      redirect_to submit_form_path(@submitter.slug)
+    else
+      redirect_to submit_form_path(@submitter.slug, status: :error), alert: I18n.t(:invalid_code)
+    end
+  rescue RateLimit::LimitApproached
+    redirect_to submit_form_path(@submitter.slug, status: :error), alert: I18n.t(:too_many_attempts)
+  end
+
+  def update
+    if @submitter.submission_events.where(event_type: 'send_2fa_email').exists?(created_at: 15.seconds.ago..)
+      return redirect_to submit_form_path(@submitter.slug, status: :error), alert: I18n.t(:rate_limit_exceeded)
+    end
+
+    RateLimit.call("send-email-code-#{@submitter.id}", limit: 2, ttl: 45.seconds, enabled: true)
+
+    SendSubmitterVerificationEmailJob.perform_async('submitter_id' => @submitter.id, 'locale' => I18n.locale.to_s)
+
+    redir_params = params[:resend] ? { alert: I18n.t(:code_has_been_resent) } : {}
+
+    redirect_to submit_form_path(@submitter.slug, status: :sent), **redir_params
+  rescue RateLimit::LimitApproached
+    redirect_to submit_form_path(@submitter.slug, status: :error), alert: I18n.t(:too_many_attempts)
+  end
+
+  def load_submitter
+    @submitter = Submitter.find_by!(slug: params[:submitter_slug])
+  end
+end

app/controllers/template_documents_controller.rb

@@ -3,6 +3,12 @@
 class TemplateDocumentsController < ApplicationController
   load_and_authorize_resource :template
 
+  FILES_TTL = 5.minutes
+
+  def index
+    render json: @template.schema_documents.map { |d| ActiveStorage::Blob.proxy_url(d.blob, expires_at: FILES_TTL.from_now.to_i) }
+  end
+
   def create
     if params[:blobs].blank? && params[:files].blank?
       return render json: { error: I18n.t('file_is_missing') }, status: :unprocessable_content

app/controllers/templates_controller.rb

@@ -118,7 +118,8 @@ class TemplatesController < ApplicationController
   def template_params
     params.require(:template).permit(
       :name,
-      { schema: [[:attachment_uuid, :name, { conditions: [%i[field_uuid value action operation]] }]],
+      { schema: [[:attachment_uuid, :google_drive_file_id, :name,
+                  { conditions: [%i[field_uuid value action operation]] }]],
         submitters: [%i[name uuid is_requester linked_to_uuid invite_by_uuid optional_invite_by_uuid email order]],
         fields: [[:uuid, :submitter_uuid, :name, :type,
                   :required, :readonly, :default_value,

app/controllers/templates_debug_controller.rb

@@ -6,12 +6,18 @@ class TemplatesDebugController < ApplicationController
   DEBUG_FILE = ''
 
   def show
-    attachment = @template.documents.first
+    schema_uuids = @template.schema.index_by { |e| e['attachment_uuid'] }
+    attachment = @template.documents.find { |a| schema_uuids[a.uuid] }
 
     data = attachment.download
-    pdf = HexaPDF::Document.new(io: StringIO.new(data))
 
-    fields = Templates::FindAcroFields.call(pdf, attachment, data)
+    unless attachment.image?
+      pdf = HexaPDF::Document.new(io: StringIO.new(data))
+
+      fields = Templates::FindAcroFields.call(pdf, attachment, data)
+    end
+
+    fields, = Templates::DetectFields.call(StringIO.new(data), attachment:) if fields.blank?
 
     attachment.metadata['pdf'] ||= {}
     attachment.metadata['pdf']['fields'] = fields

app/controllers/templates_detect_fields_controller.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+class TemplatesDetectFieldsController < ApplicationController
+  include ActionController::Live
+
+  load_and_authorize_resource :template
+
+  def create
+    response.headers['Content-Type'] = 'text/event-stream'
+
+    sse = SSE.new(response.stream)
+
+    documents = @template.schema_documents.preload(:blob)
+
+    documents.each do |document|
+      io = StringIO.new(document.download)
+
+      Templates::DetectFields.call(io, attachment: document) do |(attachment_uuid, page, fields)|
+        sse.write({ attachment_uuid:, page:, fields: })
+      end
+    end
+
+    sse.write({ completed: true })
+  ensure
+    response.stream.close
+  end
+end

app/controllers/templates_preferences_controller.rb

@@ -3,6 +3,15 @@
 class TemplatesPreferencesController < ApplicationController
   load_and_authorize_resource :template
 
+  RESETTABLE_PREFERENCE_KEYS = {
+    AccountConfig::SUBMITTER_INVITATION_EMAIL_KEY => %w[request_email_subject request_email_body submitters],
+    AccountConfig::SUBMITTER_INVITATION_REMINDER_EMAIL_KEY => %w[invitation_reminder_email_subject
+                                                                 invitation_reminder_email_body],
+    AccountConfig::SUBMITTER_DOCUMENTS_COPY_EMAIL_KEY => %w[documents_copy_email_subject documents_copy_email_body],
+    AccountConfig::SUBMITTER_COMPLETED_EMAIL_KEY => %w[completed_notification_email_subject
+                                                       completed_notification_email_body]
+  }.freeze
+
   def show; end
 
   def create
@@ -15,19 +24,38 @@ class TemplatesPreferencesController < ApplicationController
     head :ok
   end
 
+  def destroy
+    authorize!(:update, @template)
+
+    config_key = params[:config_key]
+    preferences_to_delete = RESETTABLE_PREFERENCE_KEYS[config_key]
+
+    return head :ok if preferences_to_delete.blank?
+
+    preferences_to_delete.each do |key|
+      @template.preferences.delete(key)
+    end
+
+    @template.save!
+
+    render turbo_stream: turbo_stream.replace("#{config_key}_form",
+                                              partial: "templates_preferences/#{config_key}_form"),
+           status: :ok
+  end
+
   private
 
   def template_params
     params.require(:template).permit(
       preferences: %i[bcc_completed request_email_subject request_email_body
+                      invitation_reminder_email_subject invitation_reminder_email_body
                       documents_copy_email_subject documents_copy_email_body
                       documents_copy_email_enabled documents_copy_email_attach_audit
                       documents_copy_email_attach_documents documents_copy_email_reply_to
                       completed_notification_email_attach_documents
                       completed_redirect_url validate_unique_submitters
-                      require_all_submitters submitters_order require_phone_2fa
-                      default_expire_at_duration shared_link_2fa
-                      default_expire_at request_email_enabled
+                      require_all_submitters submitters_order require_phone_2fa require_email_2fa
+                      default_expire_at_duration shared_link_2fa default_expire_at request_email_enabled
                       completed_notification_email_subject completed_notification_email_body
                       completed_notification_email_enabled completed_notification_email_attach_audit] +
                       [completed_message: %i[title body],

app/controllers/users_controller.rb

@@ -24,12 +24,22 @@ class UsersController < ApplicationController
   def edit; end
 
   def create
-    if User.accessible_by(current_ability).exists?(email: @user.email)
-      @user.errors.add(:email, I18n.t('already_exists'))
+    existing_user = User.accessible_by(current_ability).find_by(email: @user.email)
 
-      return render turbo_stream: turbo_stream.replace(:modal, template: 'users/new'), status: :unprocessable_content
+    if existing_user
+      if existing_user.archived_at? &&
+         current_ability.can?(:manage, existing_user) && current_ability.can?(:manage, @user.account)
+        existing_user.assign_attributes(@user.slice(:first_name, :last_name, :role, :account_id))
+        existing_user.archived_at = nil
+        @user = existing_user
+      else
+        @user.errors.add(:email, I18n.t('already_exists'))
+
+        return render turbo_stream: turbo_stream.replace(:modal, template: 'users/new'), status: :unprocessable_content
+      end
     end
 
+    @user.password = SecureRandom.hex if @user.password.blank?
     @user.role = User::ADMIN_ROLE unless role_valid?(@user.role)
 
     if @user.save
@@ -44,7 +54,8 @@ class UsersController < ApplicationController
   def update
     return redirect_to settings_users_path, notice: I18n.t('unable_to_update_user') if Docuseal.demo?
 
-    attrs = user_params.compact_blank.merge(user_params.slice(:archived_at))
+    attrs = user_params.compact_blank
+    attrs = attrs.merge(user_params.slice(:archived_at)) if current_ability.can?(:create, @user)
 
     if params.dig(:user, :account_id).present?
       account = Account.accessible_by(current_ability).find(params.dig(:user, :account_id))
@@ -54,8 +65,15 @@ class UsersController < ApplicationController
       @user.account = account
     end
 
-    if @user.update(attrs.except(current_user == @user ? :role : nil))
-      redirect_back fallback_location: settings_users_path, notice: I18n.t('user_has_been_updated')
+    if @user.update(attrs.except(*(current_user == @user ? %i[password otp_required_for_login role] : %i[password])))
+      if @user.try(:pending_reconfirmation?) && @user.previous_changes.key?(:unconfirmed_email)
+        SendConfirmationInstructionsJob.perform_async('user_id' => @user.id)
+
+        redirect_back fallback_location: settings_users_path,
+                      notice: I18n.t('a_confirmation_email_has_been_sent_to_the_new_email_address')
+      else
+        redirect_back fallback_location: settings_users_path, notice: I18n.t('user_has_been_updated')
+      end
     else
       render turbo_stream: turbo_stream.replace(:modal, template: 'users/edit'), status: :unprocessable_content
     end
@@ -83,7 +101,7 @@ class UsersController < ApplicationController
 
   def user_params
     if params.key?(:user)
-      permitted_params = %i[email first_name last_name password archived_at]
+      permitted_params = %i[email first_name last_name password archived_at otp_required_for_login]
 
       permitted_params << :role if role_valid?(params.dig(:user, :role))
 

app/controllers/users_send_reset_password_controller.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+class UsersSendResetPasswordController < ApplicationController
+  load_and_authorize_resource :user
+
+  LIMIT_DURATION = 10.minutes
+
+  def update
+    authorize!(:manage, @user)
+
+    if @user.reset_password_sent_at && @user.reset_password_sent_at > LIMIT_DURATION.ago
+      redirect_back fallback_location: settings_users_path, notice: I18n.t('email_has_been_sent_already')
+    else
+      @user.send_reset_password_instructions
+
+      redirect_back fallback_location: settings_users_path,
+                    notice: I18n.t('an_email_with_password_reset_instructions_has_been_sent')
+    end
+  end
+end

app/javascript/application.js

@@ -23,6 +23,7 @@ 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 ToggleSubmit from './elements/toggle_submit'
 import ToggleOnSubmit from './elements/toggle_on_submit'
 import CheckOnClick from './elements/check_on_click'
 import PasswordInput from './elements/password_input'
@@ -34,11 +35,24 @@ import MaskedInput from './elements/masked_input'
 import SetDateButton from './elements/set_date_button'
 import IndeterminateCheckbox from './elements/indeterminate_checkbox'
 import AppTour from './elements/app_tour'
+import AppTourStart from './elements/app_tour_start'
 import DashboardDropzone from './elements/dashboard_dropzone'
 import RequiredCheckboxGroup from './elements/required_checkbox_group'
 import PageContainer from './elements/page_container'
 import EmailEditor from './elements/email_editor'
 import MountOnClick from './elements/mount_on_click'
+import RemoveOnEvent from './elements/remove_on_event'
+import ScrollTo from './elements/scroll_to'
+import SetValue from './elements/set_value'
+import ReviewForm from './elements/review_form'
+import ShowOnValue from './elements/show_on_value'
+import CustomValidation from './elements/custom_validation'
+import ToggleClasses from './elements/toggle_classes'
+import AutosizeField from './elements/autosize_field'
+import GoogleDriveFilePicker from './elements/google_drive_file_picker'
+import OpenModal from './elements/open_modal'
+import BarChart from './elements/bar_chart'
+import FieldCondition from './elements/field_condition'
 
 import * as TurboInstantClick from './lib/turbo_instant_click'
 
@@ -55,6 +69,9 @@ document.addEventListener('keyup', (e) => {
 })
 
 document.addEventListener('turbo:before-fetch-request', encodeMethodIntoRequestBody)
+document.addEventListener('turbo:before-fetch-request', (event) => {
+  event.detail.fetchOptions.headers['X-Turbo'] = 'true'
+})
 document.addEventListener('turbo:submit-end', async (event) => {
   const resp = event.detail?.formSubmission?.result?.fetchResponse?.response
 
@@ -97,6 +114,7 @@ safeRegisterElement('submit-form', SubmitForm)
 safeRegisterElement('prompt-password', PromptPassword)
 safeRegisterElement('emails-textarea', EmailsTextarea)
 safeRegisterElement('toggle-cookies', ToggleCookies)
+safeRegisterElement('toggle-submit', ToggleSubmit)
 safeRegisterElement('toggle-on-submit', ToggleOnSubmit)
 safeRegisterElement('password-input', PasswordInput)
 safeRegisterElement('search-input', SearchInput)
@@ -107,12 +125,25 @@ safeRegisterElement('masked-input', MaskedInput)
 safeRegisterElement('set-date-button', SetDateButton)
 safeRegisterElement('indeterminate-checkbox', IndeterminateCheckbox)
 safeRegisterElement('app-tour', AppTour)
+safeRegisterElement('app-tour-start', AppTourStart)
 safeRegisterElement('dashboard-dropzone', DashboardDropzone)
 safeRegisterElement('check-on-click', CheckOnClick)
 safeRegisterElement('required-checkbox-group', RequiredCheckboxGroup)
 safeRegisterElement('page-container', PageContainer)
 safeRegisterElement('email-editor', EmailEditor)
 safeRegisterElement('mount-on-click', MountOnClick)
+safeRegisterElement('remove-on-event', RemoveOnEvent)
+safeRegisterElement('scroll-to', ScrollTo)
+safeRegisterElement('set-value', SetValue)
+safeRegisterElement('review-form', ReviewForm)
+safeRegisterElement('show-on-value', ShowOnValue)
+safeRegisterElement('custom-validation', CustomValidation)
+safeRegisterElement('toggle-classes', ToggleClasses)
+safeRegisterElement('autosize-field', AutosizeField)
+safeRegisterElement('google-drive-file-picker', GoogleDriveFilePicker)
+safeRegisterElement('open-modal', OpenModal)
+safeRegisterElement('bar-chart', BarChart)
+safeRegisterElement('field-condition', FieldCondition)
 
 safeRegisterElement('template-builder', class extends HTMLElement {
   connectedCallback () {
@@ -128,7 +159,9 @@ safeRegisterElement('template-builder', class extends HTMLElement {
       locale: this.dataset.locale,
       withPhone: this.dataset.withPhone === 'true',
       withVerification: ['true', 'false'].includes(this.dataset.withVerification) ? this.dataset.withVerification === 'true' : null,
+      withKba: ['true', 'false'].includes(this.dataset.withKba) ? this.dataset.withKba === 'true' : null,
       withLogo: this.dataset.withLogo !== 'false',
+      withFieldsDetection: this.dataset.withFieldsDetection === 'true',
       editable: this.dataset.editable !== 'false',
       authenticityToken: document.querySelector('meta[name="csrf-token"]')?.content,
       withPayment: this.dataset.withPayment === 'true',
@@ -137,7 +170,9 @@ safeRegisterElement('template-builder', class extends HTMLElement {
       withSendButton: this.dataset.withSendButton !== 'false',
       withSignYourselfButton: this.dataset.withSignYourselfButton !== 'false',
       withConditions: this.dataset.withConditions === 'true',
+      withGoogleDrive: this.dataset.withGoogleDrive === 'true',
       withReplaceAndCloneUpload: true,
+      withDownload: true,
       currencies: (this.dataset.currencies || '').split(',').filter(Boolean),
       acceptFileTypes: this.dataset.acceptFileTypes,
       showTourStartForm: this.dataset.showTourStartForm === 'true'

app/javascript/application.scss

@@ -19,7 +19,7 @@ button .disabled {
   display: none;
 }
 
-button[disabled] .disabled {
+button[disabled] .disabled, button.btn-disabled .disabled {
   display: initial;
 }
 
@@ -27,7 +27,7 @@ button .enabled {
   display: initial;
 }
 
-button[disabled] .enabled {
+button[disabled] .enabled, button.btn-disabled .enabled {
   display: none;
 }
 

app/javascript/elements/app_tour_start.js

@@ -0,0 +1,7 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.querySelector('form').addEventListener('submit', () => {
+      window.app_tour.start()
+    })
+  }
+}

app/javascript/elements/autosize_field.js

@@ -0,0 +1,21 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    const originalFontValue = this.field.style.fontSize
+
+    if (this.field.scrollHeight > this.field.clientHeight) {
+      this.field.style.fontSize = `calc(${originalFontValue} / 1.5)`
+      this.field.style.lineHeight = `calc(${this.field.style.fontSize} * 1.3)`
+
+      if (this.field.scrollHeight > this.field.clientHeight) {
+        this.field.style.fontSize = `calc(${originalFontValue} / 2.0)`
+        this.field.style.lineHeight = `calc(${this.field.style.fontSize} * 1.3)`
+      }
+    }
+
+    this.field.classList.remove('hidden')
+  }
+
+  get field () {
+    return this.closest('field-value')
+  }
+}

app/javascript/elements/bar_chart.js

@@ -0,0 +1,50 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.chartLabels = JSON.parse(this.dataset.labels || '[]')
+    this.chartDatasets = JSON.parse(this.dataset.datasets || '[]')
+
+    this.initChart()
+  }
+
+  disconnectedCallback () {
+    if (this.chartInstance) {
+      this.chartInstance.destroy()
+      this.chartInstance = null
+    }
+  }
+
+  async initChart () {
+    const { default: Chart } = await import(/* webpackChunkName: "chartjs" */ 'chart.js/auto')
+
+    const canvas = this.querySelector('canvas')
+
+    const ctx = canvas.getContext('2d')
+
+    this.chartInstance = new Chart(ctx, {
+      type: 'bar',
+      data: {
+        labels: this.chartLabels,
+        datasets: this.chartDatasets
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: true,
+        animation: false,
+        scales: {
+          y: {
+            beginAtZero: true,
+            grace: '20%',
+            ticks: {
+              precision: 0
+            }
+          }
+        },
+        plugins: {
+          legend: {
+            display: false
+          }
+        }
+      }
+    })
+  }
+}

app/javascript/elements/custom_validation.js

@@ -0,0 +1,14 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    const input = this.querySelector('input')
+    const invalidMessage = this.dataset.invalidMessage || ''
+
+    input.addEventListener('invalid', () => {
+      input.setCustomValidity(input.value ? invalidMessage : '')
+    })
+
+    input.addEventListener('input', () => {
+      input.setCustomValidity('')
+    })
+  }
+}

app/javascript/elements/field_condition.js

@@ -0,0 +1,151 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.targetId = this.dataset.targetId
+    this.fieldId = this.dataset.fieldId
+    this.action = (this.dataset.action || '').trim()
+    this.expectedValue = this.dataset.value
+
+    this.targetEl = document.getElementById(this.targetId)
+    this.sourceEl = document.getElementById(this.fieldId)
+
+    this.bindListeners()
+
+    this.evaluateAndApply()
+  }
+
+  disconnectedCallback () {
+    this.unbindListeners()
+  }
+
+  bindListeners () {
+    this.eventsFor(this.sourceEl).forEach((ev) => {
+      this.sourceEl.addEventListener(ev, this.evaluateAndApply)
+    })
+  }
+
+  unbindListeners () {
+    this.eventsFor(this.sourceEl).forEach((ev) => {
+      this.sourceEl.removeEventListener(ev, this.evaluateAndApply)
+    })
+  }
+
+  eventsFor (el) {
+    if (!el) return []
+
+    const tag = el.tagName.toLowerCase()
+
+    if (tag === 'textarea') return ['input']
+    if (tag === 'input') return ['input', 'change']
+
+    return ['change']
+  }
+
+  evaluateAndApply = () => {
+    const fieldConditions = document.querySelectorAll(`field-condition[data-target-id="${this.targetId}"]`)
+
+    const result = [...fieldConditions].reduce((acc, cond) => {
+      if (cond.dataset.operation === 'or') {
+        acc.push(acc.pop() || cond.checkCondition())
+      } else {
+        acc.push(cond.checkCondition())
+      }
+
+      return acc
+    }, [])
+
+    this.apply(!result.includes(false))
+  }
+
+  checkCondition () {
+    const action = this.action
+    const actual = this.getSourceValue()
+    const expected = this.expectedValue
+
+    if (action === 'empty' || action === 'unchecked') return this.isEmpty(actual)
+    if (action === 'not_empty' || action === 'checked') return !this.isEmpty(actual)
+
+    if (action === 'equal') {
+      const list = Array.isArray(actual) ? actual : [actual]
+      return list.filter((v) => v !== null && v !== undefined).map(String).includes(String(expected))
+    }
+
+    if (action === 'contains') return this.contains(actual, expected)
+
+    if (action === 'not_equal') {
+      const list = Array.isArray(actual) ? actual : [actual]
+      return !list.filter((v) => v !== null && v !== undefined).map(String).includes(String(expected))
+    }
+
+    if (action === 'does_not_contain') return !this.contains(actual, expected)
+
+    return true
+  }
+
+  getSourceValue () {
+    const el = this.sourceEl
+
+    if (!el) return
+
+    const tag = el.tagName.toLowerCase()
+    const type = (el.getAttribute('type') || '').toLowerCase()
+
+    if (tag === 'select') return el.value
+    if (tag === 'textarea') return el.value
+    if (tag === 'input' && type === 'checkbox') return el.checked ? (el.value || '1') : null
+    if (tag === 'input') return el.value
+
+    return el.value ?? null
+  }
+
+  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
+  }
+
+  contains (actual, expected) {
+    if (expected === null || expected === undefined) return false
+
+    const exp = String(expected)
+
+    if (Array.isArray(actual)) return actual.filter((v) => v !== null && v !== undefined).map(String).includes(exp)
+
+    if (typeof actual === 'string') return actual.includes(exp)
+
+    return actual !== null && actual !== undefined && String(actual) === exp
+  }
+
+  apply (passed) {
+    const controls = this.targetEl.matches('input, select, textarea, button')
+      ? [this.targetEl]
+      : Array.from(this.targetEl.querySelectorAll('input, select, textarea, button'))
+
+    if (passed) {
+      this.targetEl.style.display = ''
+      this.targetEl.labels.forEach((label) => { label.style.display = '' })
+
+      controls.forEach((c) => (c.disabled = false))
+    } else {
+      this.targetEl.style.display = 'none'
+      this.targetEl.labels.forEach((label) => { label.style.display = 'none' })
+
+      controls.forEach((c) => (c.disabled = true))
+    }
+  }
+}

app/javascript/elements/google_drive_file_picker.js

@@ -0,0 +1,55 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    const iframeTemplate = this.querySelector('template')
+
+    this.observer = new IntersectionObserver((entries) => {
+      if (entries.some(e => e.isIntersecting)) {
+        iframeTemplate.parentElement.prepend(iframeTemplate.content)
+
+        this.observer.disconnect()
+      }
+    })
+
+    this.observer.observe(this)
+
+    window.addEventListener('message', this.messageHandler)
+  }
+
+  messageHandler = (event) => {
+    if (event.data.type === 'google-drive-files-picked') {
+      this.form.querySelectorAll('input[name="google_drive_file_ids[]"]').forEach(el => el.remove())
+
+      const files = event.data.files || []
+
+      files.forEach((file) => {
+        const input = document.createElement('input')
+        input.type = 'hidden'
+        input.name = 'google_drive_file_ids[]'
+        input.value = file.id
+        this.form.appendChild(input)
+      })
+
+      this.form.querySelector('button[type="submit"]').click()
+      this.loader.classList.remove('hidden')
+    } else if (event.data.type === 'google-drive-picker-loaded') {
+      this.loader.classList.add('hidden')
+      this.form.classList.remove('hidden')
+    } else if (event.data.type === 'google-drive-picker-request-oauth') {
+      document.getElementById(this.dataset.oauthButtonId).classList.remove('hidden')
+      this.classList.add('hidden')
+    }
+  }
+
+  disconnectedCallback () {
+    this.observer?.unobserve(this)
+    window.removeEventListener('message', this.messageHandler)
+  }
+
+  get form () {
+    return this.querySelector('form')
+  }
+
+  get loader () {
+    return document.getElementById('google_drive_loader')
+  }
+}

app/javascript/elements/open_modal.js

@@ -0,0 +1,16 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    const src = this.getAttribute('src')
+    const link = document.createElement('a')
+
+    link.href = src
+    link.setAttribute('data-turbo-frame', 'modal')
+    link.style.display = 'none'
+
+    this.appendChild(link)
+
+    link.click()
+
+    window.history.replaceState({}, document.title, window.location.pathname)
+  }
+}

app/javascript/elements/remove_on_event.js

@@ -0,0 +1,15 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    const eventType = this.dataset.on || 'click'
+    const selector = document.getElementById(this.dataset.selectorId) || this
+    const eventElement = eventType === 'submit' ? this.querySelector('form') : this
+
+    eventElement.addEventListener(eventType, (event) => {
+      if (eventType === 'click') {
+        event.preventDefault()
+      }
+
+      selector.remove()
+    })
+  }
+}

app/javascript/elements/review_form.js

@@ -0,0 +1,19 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.querySelectorAll('input[type="radio"]').forEach(radio => {
+      radio.addEventListener('change', (event) => {
+        const rating = parseInt(event.target.value)
+
+        if (rating === 10) {
+          window.review_comment.value = ''
+          window.review_comment.classList.add('hidden')
+          window.review_submit.classList.add('hidden')
+          event.target.form.submit()
+        } else {
+          window.review_comment.classList.remove('hidden')
+          window.review_submit.classList.remove('hidden')
+        }
+      })
+    })
+  }
+}

app/javascript/elements/scroll_to.js

@@ -0,0 +1,10 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.selector = document.getElementById(this.dataset.selectorId)
+
+    this.addEventListener('click', () => {
+      this.selector.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      history.replaceState(null, null, `#${this.dataset.selectorId}`)
+    })
+  }
+}

app/javascript/elements/search_input.js

@@ -13,6 +13,14 @@ export default class extends HTMLElement {
         this.input.classList.remove('w-60')
       }
     })
+
+    this.button.addEventListener('click', (event) => {
+      if (!this.input.value && document.activeElement !== this.input) {
+        event.preventDefault()
+
+        this.input.focus()
+      }
+    })
   }
 
   get input () {
@@ -22,4 +30,8 @@ export default class extends HTMLElement {
   get title () {
     return document.querySelector(this.dataset.title)
   }
+
+  get button () {
+    return this.querySelector('button')
+  }
 }

app/javascript/elements/set_value.js

@@ -0,0 +1,11 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    const input = this.dataset.inputId ? document.getElementById(this.dataset.inputId) : this.querySelector('input')
+
+    this.firstElementChild.addEventListener(this.dataset.on || 'click', () => {
+      if (this.dataset.emptyOnly !== 'true' || !input.value) {
+        input.value = this.dataset.value
+      }
+    })
+  }
+}

app/javascript/elements/show_on_value.js

@@ -0,0 +1,17 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.addEventListener('change', (event) => {
+      const targetValue = this.dataset.value
+      const selectorId = this.dataset.selectorId
+      const targetElement = document.getElementById(selectorId)
+
+      if (event.target.value === targetValue) {
+        targetElement.classList.remove('hidden')
+      } else {
+        targetElement.classList.add('hidden')
+        targetElement.value = ''
+        event.target.form.requestSubmit()
+      }
+    })
+  }
+}

app/javascript/elements/submit_form.js

@@ -1,11 +1,27 @@
 export default class extends HTMLElement {
   connectedCallback () {
+    const form = this.querySelector('form') || (this.querySelector('input, button, select') || this.lastElementChild).form
+
     if (this.dataset.interval) {
       this.interval = setInterval(() => {
-        this.querySelector('form').requestSubmit()
+        form.requestSubmit()
       }, parseInt(this.dataset.interval))
+    } else if (this.dataset.on) {
+      this.lastElementChild.addEventListener(this.dataset.on, (event) => {
+        if (this.dataset.disable === 'true') {
+          form.querySelector('[type="submit"]')?.setAttribute('disabled', true)
+        }
+
+        if (this.dataset.submitIfValue === 'true') {
+          if (event.target.value) {
+            form.requestSubmit()
+          }
+        } else {
+          form.requestSubmit()
+        }
+      })
     } else {
-      this.querySelector('form').requestSubmit()
+      form.requestSubmit()
     }
   }
 

app/javascript/elements/toggle_classes.js

@@ -0,0 +1,11 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    const button = this.querySelector('a, button')
+
+    button.addEventListener('click', () => {
+      this.dataset.classes.split(' ').forEach((cls) => {
+        button.classList.toggle(cls)
+      })
+    })
+  }
+}

app/javascript/elements/toggle_visible.js

@@ -4,9 +4,15 @@ export default actionable(class extends HTMLElement {
   trigger (event) {
     const elementIds = JSON.parse(this.dataset.elementIds)
 
-    elementIds.forEach((elementId) => {
-      document.getElementById(elementId).classList.toggle('hidden', (event.target.dataset.toggleId || event.target.value) !== elementId)
-    })
+    if (event.target.type === 'checkbox') {
+      elementIds.forEach((elementId) => {
+        document.getElementById(elementId)?.classList.toggle('hidden')
+      })
+    } else {
+      elementIds.forEach((elementId) => {
+        document.getElementById(elementId).classList.toggle('hidden', (event.target.dataset.toggleId || event.target.value) !== elementId)
+      })
+    }
 
     if (this.dataset.focusId) {
       document.getElementById(this.dataset.focusId)?.focus()

app/javascript/form.js

@@ -6,6 +6,7 @@ import ToggleSubmit from './elements/toggle_submit'
 import FetchForm from './elements/fetch_form'
 import ScrollButtons from './elements/scroll_buttons'
 import PageContainer from './elements/page_container'
+import SubmitForm from './elements/submit_form'
 
 const safeRegisterElement = (name, element, options = {}) => !window.customElements.get(name) && window.customElements.define(name, element, options)
 
@@ -14,6 +15,7 @@ safeRegisterElement('toggle-submit', ToggleSubmit)
 safeRegisterElement('fetch-form', FetchForm)
 safeRegisterElement('scroll-buttons', ScrollButtons)
 safeRegisterElement('page-container', PageContainer)
+safeRegisterElement('submit-form', SubmitForm)
 safeRegisterElement('submission-form', class extends HTMLElement {
   connectedCallback () {
     this.appElem = document.createElement('div')
@@ -35,6 +37,7 @@ safeRegisterElement('submission-form', class extends HTMLElement {
       withSignatureId: this.dataset.withSignatureId === 'true',
       requireSigningReason: this.dataset.requireSigningReason === 'true',
       withConfetti: this.dataset.withConfetti !== 'false',
+      withFieldLabels: this.dataset.withFieldLabels !== 'false',
       withDisclosure: this.dataset.withDisclosure === 'true',
       reuseSignature: this.dataset.reuseSignature !== 'false',
       withTypedSignature: this.dataset.withTypedSignature !== 'false',

app/javascript/form.scss

@@ -19,7 +19,7 @@ button .disabled {
   display: none;
 }
 
-button[disabled] .disabled {
+button[disabled] .disabled, button.btn-disabled .disabled {
   display: initial;
 }
 
@@ -27,7 +27,7 @@ button .enabled {
   display: initial;
 }
 
-button[disabled] .enabled {
+button[disabled] .enabled, button.btn-disabled .enabled {
   display: none;
 }
 

app/javascript/lib/turbo_instant_click.js

@@ -56,7 +56,7 @@ function mouseoverListener (event) {
 
   const requestOptions = {
     credentials: 'same-origin',
-    headers: { Accept: 'text/html, application/xhtml+xml', 'VND.PREFETCH': 'true' },
+    headers: { Accept: 'text/html, application/xhtml+xml', 'VND.PREFETCH': 'true', 'X-Turbo': 'true' },
     method: 'GET',
     redirect: 'follow'
   }

app/javascript/submission_form/area.vue

@@ -60,6 +60,11 @@
       class="object-contain mx-auto"
       :src="stamp.url"
     >
+    <img
+      v-else-if="field.type === 'kba' && kba"
+      class="object-contain mx-auto"
+      :src="kba.url"
+    >
     <div
       v-else-if="field.type === 'signature' && signature"
       class="flex justify-between h-full gap-1 overflow-hidden w-full"
@@ -219,6 +224,48 @@
       >
         {{ formatNumber(modelValue, field.preferences?.format) }}
       </span>
+      <span
+        v-else-if="field.type === 'strikethrough'"
+        class="w-full h-full flex items-center justify-center"
+      >
+        <svg
+          v-if="(((1000.0 / pageWidth) * pageHeight) * area.h) < 40.0"
+          xmlns="http://www.w3.org/2000/svg"
+          width="100%"
+          height="100%"
+        >
+          <line
+            x1="0"
+            y1="50%"
+            x2="100%"
+            y2="50%"
+            :stroke="field.preferences?.color || 'red'"
+            :stroke-width="strikethroughWidth"
+          />
+        </svg>
+        <svg
+          v-else
+          xmlns="http://www.w3.org/2000/svg"
+          :style="{ overflow: 'visible', width: `calc(100% - ${strikethroughWidth})`, height: `calc(100% - ${strikethroughWidth})` }"
+        >
+          <line
+            x1="0"
+            y1="0"
+            x2="100%"
+            y2="100%"
+            :stroke="field.preferences?.color || 'red'"
+            :stroke-width="strikethroughWidth"
+          />
+          <line
+            x1="100%"
+            y1="0"
+            x2="0"
+            y2="100%"
+            :stroke="field.preferences?.color || 'red'"
+            :stroke-width="strikethroughWidth"
+          />
+        </svg>
+      </span>
       <span
         v-else
         class="whitespace-pre-wrap"
@@ -230,7 +277,7 @@
 
 <script>
 import MarkdownContent from './markdown_content'
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1, IconId } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1, IconId, IconUserScan } from '@tabler/icons-vue'
 
 export default {
   name: 'FieldArea',
@@ -260,6 +307,16 @@ export default {
       required: false,
       default: false
     },
+    pageWidth: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    pageHeight: {
+      type: Number,
+      required: false,
+      default: 0
+    },
     isValueSet: {
       type: Boolean,
       required: false,
@@ -339,7 +396,15 @@ export default {
         stamp: this.t('stamp'),
         payment: this.t('payment'),
         phone: this.t('phone'),
-        verification: this.t('verify_id')
+        verification: this.t('verify_id'),
+        kba: this.t('kba')
+      }
+    },
+    strikethroughWidth () {
+      if (this.isInlineSize) {
+        return '0.6cqmin'
+      } else {
+        return 'clamp(0px, 0.5vw, 6px)'
       }
     },
     isShowSignatureId () {
@@ -395,7 +460,8 @@ export default {
         multiple: IconChecks,
         phone: IconPhoneCheck,
         payment: IconCreditCard,
-        verification: IconId
+        verification: IconId,
+        kba: IconUserScan,
       }
     },
     image () {
@@ -412,6 +478,13 @@ export default {
         return null
       }
     },
+    kba () {
+      if (this.field.type === 'kba') {
+        return this.attachmentsIndex[this.modelValue]
+      } else {
+        return null
+      }
+    },
     signature () {
       if (this.field.type === 'signature') {
         return this.attachmentsIndex[this.modelValue]
@@ -494,10 +567,14 @@ export default {
         style.color = this.field.preferences.color
       }
 
+      if (this.field.preferences?.background) {
+        style.background = this.field.preferences.background
+      }
+
       return style
     },
     isNarrow () {
-      return this.area.h > 0 && (this.area.w / this.area.h) > 6
+      return this.area.h > 0 && ((this.area.w * this.pageWidth) / (this.area.h * this.pageHeight)) > 4.5
     }
   },
   watch: {

app/javascript/submission_form/areas.vue

@@ -11,30 +11,37 @@
         v-for="(area, areaIndex) in field.areas"
         :key="areaIndex"
       >
-        <Teleport
-          v-if="findPageElementForArea(area)"
-          :to="findPageElementForArea(area)"
+        <template
+          v-for="(pageElem, index) in [findPageElementForArea(area)]"
+          :key="index"
         >
-          <FieldArea
-            :ref="setAreaRef"
-            v-model="values[field.uuid]"
-            :values="values"
-            :field="field"
-            :area="area"
-            :submittable="submittable"
-            :field-index="fieldIndex"
-            :is-inline-size="isInlineSize"
-            :scroll-padding="scrollPadding"
-            :submitter="submitter"
-            :with-field-placeholder="withFieldPlaceholder"
-            :with-signature-id="withSignatureId"
-            :is-active="currentStep === step"
-            :with-label="withLabel && !withFieldPlaceholder && step.length < 2"
-            :is-value-set="step.some((f) => f.uuid in values)"
-            :attachments-index="attachmentsIndex"
-            @click="[$emit('focus-step', stepIndex), maybeScrollOnClick(field, area)]"
-          />
-        </Teleport>
+          <Teleport
+            v-if="pageElem"
+            :to="pageElem"
+          >
+            <FieldArea
+              :ref="setAreaRef"
+              v-model="values[field.uuid]"
+              :values="values"
+              :field="field"
+              :area="area"
+              :submittable="submittable"
+              :page-width="1400"
+              :page-height="(1400.0 / pageElem.offsetWidth) * pageElem.offsetHeight"
+              :field-index="fieldIndex"
+              :is-inline-size="isInlineSize"
+              :scroll-padding="scrollPadding"
+              :submitter="submitter"
+              :with-field-placeholder="withFieldPlaceholder"
+              :with-signature-id="withSignatureId"
+              :is-active="currentStep === step"
+              :with-label="withLabel && !withFieldPlaceholder && step.length < 2"
+              :is-value-set="step.some((f) => f.uuid in values)"
+              :attachments-index="attachmentsIndex"
+              @click="[$emit('focus-step', stepIndex), maybeScrollOnClick(field, area)]"
+            />
+          </Teleport>
+        </template>
       </template>
     </template>
   </template>

app/javascript/submission_form/dropzone.vue

@@ -163,12 +163,20 @@ export default {
             return fetch(this.baseUrl + '/api/attachments', {
               method: 'POST',
               body: formData
-            }).then(resp => resp.json()).then((data) => {
-              return data
+            }).then(async (resp) => {
+              const data = await resp.json()
+
+              if (resp.status === 422) {
+                alert(data.error)
+              } else {
+                return data
+              }
             })
           }
         })).then((result) => {
-        this.$emit('upload', result)
+        if (result && result[0]) {
+          this.$emit('upload', result)
+        }
       }).finally(() => {
         this.isLoading = false
       })

app/javascript/submission_form/form.vue

@@ -8,7 +8,7 @@
     :scroll-el="scrollEl"
     :with-signature-id="withSignatureId"
     :attachments-index="attachmentsIndex"
-    :with-label="!isAnonymousChecboxes && showFieldNames"
+    :with-label="withFieldLabels && !isAnonymousChecboxes && showFieldNames"
     :current-step="currentStepFields"
     :scroll-padding="scrollPadding"
     @focus-step="[saveStep(), currentField.type !== 'checkbox' ? isFormVisible = true : '', goToStep($event, false, true)]"
@@ -23,7 +23,7 @@
   <FormulaFieldAreas
     v-if="formulaFields.length"
     :fields="formulaFields"
-    :readonly-values="readonlyConditionalFieldValues"
+    :readonly-values="readonlyFieldValues"
     :values="values"
   />
   <Teleport
@@ -133,6 +133,12 @@
           name="_method"
           type="hidden"
         >
+        <input
+          v-if="validate === false"
+          value="false"
+          name="validate"
+          type="hidden"
+        >
         <div class="md:mt-4">
           <div v-if="['cells', 'text'].includes(currentField.type)">
             <TextStep
@@ -349,8 +355,6 @@
                         :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]]"
@@ -454,11 +458,24 @@
             v-model="values[currentField.uuid]"
             :field="currentField"
             :submitter-slug="submitterSlug"
+            :fields="formulaFields"
             :values="values"
+            :readonly-values="readonlyFieldValues"
             @attached="attachments.push($event)"
             @focus="scrollIntoField(currentField)"
             @submit="!isSubmitting && submitStep()"
           />
+          <KbaStep
+            v-else-if="currentField.type === 'kba'"
+            ref="currentStep"
+            :key="currentField.uuid"
+            :submitter="submitter"
+            :empty-value-required-step="emptyValueRequiredStep"
+            :field="currentField"
+            :submitter-slug="submitterSlug"
+            :values="values"
+            @submit="!isSubmitting && submitStep()"
+          />
           <VerificationStep
             v-else-if="currentField.type === 'verification'"
             ref="currentStep"
@@ -474,7 +491,7 @@
           />
         </div>
         <div
-          v-if="(currentField.type !== 'payment' && currentField.type !== 'verification') || submittedValues[currentField.uuid]"
+          v-if="(currentField.type !== 'payment' && currentField.type !== 'verification' && currentField.type !== 'kba') || submittedValues[currentField.uuid]"
           :class="currentField.type === 'signature' ? 'mt-2' : 'mt-4 md:mt-6'"
         >
           <button
@@ -531,7 +548,7 @@
       />
       <div
         v-if="stepFields.length < 80"
-        class="flex justify-center mt-3 sm:mt-4 mb-0 sm:mb-1"
+        class="flex justify-center mt-3 sm:mt-4 mb-0 sm:mb-1 select-none"
       >
         <div class="flex items-center flex-wrap steps-progress">
           <a
@@ -563,6 +580,7 @@ import MultiSelectStep from './multi_select_step'
 import PhoneStep from './phone_step'
 import PaymentStep from './payment_step'
 import VerificationStep from './verification_step'
+import KbaStep from './kba_step'
 import TextStep from './text_step'
 import NumberStep from './number_step'
 import DateStep from './date_step'
@@ -607,6 +625,7 @@ export default {
     AttachmentStep,
     InitialsStep,
     VerificationStep,
+    KbaStep,
     InviteForm,
     MultiSelectStep,
     IconInnerShadowTop,
@@ -716,6 +735,11 @@ export default {
       required: false,
       default: false
     },
+    validate: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     withDisclosure: {
       type: Boolean,
       required: false,
@@ -726,6 +750,11 @@ export default {
       required: false,
       default: true
     },
+    withFieldLabels: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     withConfetti: {
       type: Boolean,
       required: false,
@@ -872,7 +901,14 @@ export default {
     },
     readonlyConditionalFieldValues () {
       return this.readonlyConditionalFields.reduce((acc, f) => {
-        acc[f.uuid] = (this.values[f.uuid] || f.default_value)
+        acc[f.uuid] = isEmpty(this.values[f.uuid]) ? f.default_value : this.values[f.uuid]
+
+        return acc
+      }, {})
+    },
+    readonlyFieldValues () {
+      return this.readonlyFields.reduce((acc, f) => {
+        acc[f.uuid] = isEmpty(this.values[f.uuid]) ? f.default_value : this.values[f.uuid]
 
         return acc
       }, {})
@@ -972,13 +1008,16 @@ export default {
       return this.currentStepFields[0]
     },
     readonlyConditionalFields () {
-      return this.fields.filter((f) => f.readonly && f.conditions?.length && this.checkFieldConditions(f) && this.checkFieldDocumentsConditions(f))
+      return this.readonlyFields.filter((f) => f.conditions?.length)
+    },
+    readonlyFields () {
+      return this.fields.filter((f) => f.readonly && this.checkFieldConditions(f) && this.checkFieldDocumentsConditions(f))
     },
     stepFields () {
       const verificationFields = []
 
       const sortedFields = this.fields.reduce((acc, f) => {
-        if (f.type === 'verification') {
+        if (f.type === 'verification' || f.type === 'kba') {
           verificationFields.push(f)
         } else if (!f.readonly) {
           acc.push(f)
@@ -1015,7 +1054,11 @@ export default {
           const aArea = (fieldAreasIndex[aField.uuid] ||= [...(aField.areas || [])].sort(sortArea)[0])
           const bArea = (fieldAreasIndex[bField.uuid] ||= [...(bField.areas || [])].sort(sortArea)[0])
 
-          return sortArea(aArea, bArea)
+          if (aArea && bArea) {
+            return sortArea(aArea, bArea)
+          } else {
+            return 0
+          }
         })
       }
 
@@ -1371,7 +1414,7 @@ export default {
 
       const submitStep = this.currentStep
 
-      const stepPromise = ['signature', 'phone', 'initials', 'payment', 'verification'].includes(this.currentField.type)
+      const stepPromise = ['signature', 'phone', 'initials', 'payment', 'verification', 'kba'].includes(this.currentField.type)
         ? this.$refs.currentStep.submit
         : () => Promise.resolve({})
 

app/javascript/submission_form/i18n.js

@@ -1,4 +1,5 @@
 const en = {
+  kba: 'KBA',
   please_upload_an_image_file: 'Please upload an image file',
   must_be_characters_length: 'Must be {number} characters length',
   complete_all_required_fields_to_proceed_with_identity_verification: 'Complete all required fields to proceed with identity verification.',
@@ -13,7 +14,7 @@ const en = {
   esignature_disclosure: 'eSignature Disclosure',
   signature: 'Signature',
   initials: 'Initials',
-  drawn_signature_on_a_touchscreen_device: 'Drawn signature on a touchscreen device',
+  sign_on_the_touchscreen: 'Sign on the touchscreen',
   approved: 'Approved',
   reviewed: 'Reviewed',
   other: 'Other',
@@ -91,7 +92,7 @@ const en = {
   type_text: 'Type text',
   email_has_been_sent: 'Email has been sent',
   processing: 'Processing',
-  pay_with_strip: 'Pay with Stripe',
+  pay_with_stripe: 'Pay with Stripe',
   reupload: 'Reupload',
   upload: 'Upload',
   files: 'Files',
@@ -100,6 +101,7 @@ const en = {
 }
 
 const es = {
+  kba: 'KBA',
   please_upload_an_image_file: 'Por favor, sube un archivo de imagen',
   must_be_characters_length: 'Debe tener {number} caracteres de longitud',
   complete_all_required_fields_to_proceed_with_identity_verification: 'Complete todos los campos requeridos para continuar con la verificación de identidad.',
@@ -120,7 +122,7 @@ const es = {
   select_a_reason: 'Selecciona una razón',
   value_is_invalid: 'El valor no es válido',
   verification_code_is_invalid: 'El código de verificación no es válido',
-  drawn_signature_on_a_touchscreen_device: 'Firma dibujada en un dispositivo con pantalla táctil',
+  sign_on_the_touchscreen: 'Firmar en pantalla táctil',
   scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Escanea el código QR con la aplicación de la cámara para abrir el formulario en el móvil y dibujar tu firma',
   by_clicking_you_agree_to_the: 'Al hacer clic en "{button}", usted acepta el',
   electronic_signature_disclosure: 'Divulgación de Firma Electrónica',
@@ -192,7 +194,7 @@ const es = {
   type_text: 'Escribir texto',
   email_has_been_sent: 'El correo electrónico ha sido enviado',
   processing: 'Procesando',
-  pay_with_strip: 'Pagar con Stripe',
+  pay_with_stripe: 'Pagar con Stripe',
   reupload: 'Volver a subir',
   upload: 'Subir',
   files: 'Archivos',
@@ -201,6 +203,7 @@ const es = {
 }
 
 const it = {
+  kba: 'KBA',
   please_upload_an_image_file: 'Per favore carica un file immagine',
   must_be_characters_length: 'Deve essere lungo {number} caratteri',
   complete_all_required_fields_to_proceed_with_identity_verification: "Compila tutti i campi obbligatori per procedere con la verifica dell'identità.",
@@ -221,8 +224,8 @@ const it = {
   select_a_reason: 'Seleziona una ragione',
   value_is_invalid: 'Il valore non è valido',
   verification_code_is_invalid: 'Il codice di verifica non è valido',
-  drawn_signature_on_a_touchscreen_device: 'Firma disegnata su un dispositivo con schermo tattile',
-  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scansiona il codice QR con l\'app della fotocamera per aprire il modulo sul cellulare e disegnare la tua firma',
+  sign_on_the_touchscreen: 'Firma su schermo tattile',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: "Scansiona il codice QR con l'app della fotocamera per aprire il modulo sul cellulare e disegnare la tua firma",
   by_clicking_you_agree_to_the: 'Cliccando su "{button}", accetti il',
   electronic_signature_disclosure: 'Divulgazione della Firma Elettronica',
   esignature_disclosure: 'Divulgazione della eFirma',
@@ -293,7 +296,7 @@ const it = {
   toggle_multiline_text: 'Attiva Testo Multilinea',
   email_has_been_sent: "L'email è stata inviata",
   processing: 'Elaborazione',
-  pay_with_strip: 'Paga con Stripe',
+  pay_with_stripe: 'Paga con Stripe',
   reupload: 'Ricarica',
   upload: 'Carica',
   files: 'File',
@@ -302,66 +305,67 @@ const it = {
 }
 
 const de = {
+  kba: 'KBA',
   please_upload_an_image_file: 'Bitte laden Sie eine Bilddatei hoch',
   must_be_characters_length: 'Muss {number} Zeichen lang sein',
-  complete_all_required_fields_to_proceed_with_identity_verification: 'Vervollständigen Sie alle erforderlichen Felder, um mit der Identitätsverifizierung fortzufahren.',
+  complete_all_required_fields_to_proceed_with_identity_verification: 'Füllen Sie alle Pflichtfelder aus, um mit der Identitätsprüfung fortzufahren.',
   verify_id: 'ID überprüfen',
-  identity_verification: 'Identitätsüberprüfung',
+  identity_verification: 'Identitätsprüfung',
   complete: 'Abschließen',
-  fill_all_required_fields_to_complete: 'Alle erforderlichen Felder ausfüllen, um abzuschließen',
-  sign_and_complete: 'Signieren und Abschließen',
+  fill_all_required_fields_to_complete: 'Füllen Sie alle Pflichtfelder aus, um abzuschließen',
+  sign_and_complete: 'Unterzeichnen und abschließen',
+  text: 'Text',
+  by_clicking_you_agree_to_the: 'Durch Klicken auf "{button}" stimmen Sie dem',
+  electronic_signature_disclosure: 'Hinweis zur E-Signatur',
+  esignature_disclosure: 'Hinweis zur eSignatur',
+  signature: 'Unterschrift',
+  initials: 'Initialen',
+  sign_on_the_touchscreen: 'Auf Touchscreen signieren',
+  approved: 'Genehmigt',
+  reviewed: 'Geprüft',
+  other: 'Sonstiges',
+  authored_by_me: 'Von mir erstellt',
   invite: 'Einladen',
   email: 'E-Mail',
-  approved: 'Genehmigt',
-  reviewed: 'Überprüft',
-  other: 'Andere',
-  authored_by_me: 'Von mir verfasst',
   approved_by: 'Genehmigt von',
-  reviewed_by: 'Überprüft von',
-  authored_by: 'Verfasst von',
+  reviewed_by: 'Geprüft von',
+  authored_by: 'Erstellt von',
   select_a_reason: 'Grund auswählen',
-  value_is_invalid: 'Wert ist ungültig',
-  verification_code_is_invalid: 'Bestätigungscode ist ungültig',
-  drawn_signature_on_a_touchscreen_device: 'Gezeichnete Unterschrift auf einem Touchscreen-Gerät',
-  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scannen Sie den QR-Code mit der Kamera-App, um das Formular auf dem Handy zu öffnen und Ihre Unterschrift zu zeichnen',
-  by_clicking_you_agree_to_the: 'Durch Klicken auf "{button}" stimmen Sie zu, dass Sie die',
-  electronic_signature_disclosure: 'Elektronische Unterschriftenoffenlegung',
-  esignature_disclosure: 'eSignatur Offenlegung',
-  already_paid: 'Bereits bezahlt',
-  minimize: 'Minimieren',
-  text: 'Text',
-  signature: 'Unterschrift',
-  digitally_signed_by: 'Digital unterschrieben von',
-  reason: 'Grund',
-  initials: 'Initialen',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scannen Sie den QR-Code mit der Kamera-App, um das Formular auf dem Mobilgerät zu öffnen und Ihre Unterschrift zu zeichnen',
   date: 'Datum',
-  number: 'Nummer',
+  number: 'Zahl',
+  value_is_invalid: 'Wert ist ungültig',
+  verification_code_is_invalid: 'Verifizierungscode ist ungültig',
+  already_paid: 'Bereits bezahlt',
   image: 'Bild',
   pay: 'Bezahlen',
+  take_photo: 'Foto aufnehmen',
+  number_phone_is_invalid: 'Telefonnummer ({number}) ist ungültig',
   file: 'Datei',
-  select: 'Auswählen',
+  digitally_signed_by: 'Elektronisch signiert von',
+  reason: 'Grund',
+  select: 'Auswahl',
   checkbox: 'Checkbox',
-  multiple: 'Mehrere',
+  multiple: 'Mehrfach',
   radio: 'Radio',
   cells: 'Zellen',
   stamp: 'Stempel',
+  minimize: 'Minimieren',
   payment: 'Zahlung',
-  number_phone_is_invalid: '{number} Telefonnummer ist ungültig',
   phone: 'Telefon',
   start_now: 'Jetzt starten',
-  continue: 'Fortsetzen',
-  sign_now: 'Jetzt unterschreiben',
+  continue: 'Weiter',
+  sign_now: 'Jetzt unterzeichnen',
   type_here_: 'Hier eingeben...',
   optional: 'optional',
   option: 'Option',
   appears_on: 'Erscheint auf',
   page: 'Seite',
-  take_photo: 'Foto aufnehmen',
-  select_your_option: 'Wähle deine Option',
-  complete_hightlighted_checkboxes_and_click: 'Markierte Kontrollkästchen ausfüllen und klicken',
-  submit: 'absenden',
-  next: 'weiter',
-  click_to_upload: 'Klicken zum Hochladen',
+  select_your_option: 'Option auswählen',
+  complete_hightlighted_checkboxes_and_click: 'Füllen Sie die markierten Kontrollkästchen aus und klicken Sie auf',
+  submit: 'Einreichen',
+  next: 'Weiter',
+  click_to_upload: 'Zum Hochladen klicken',
   or_drag_and_drop_files: 'oder Dateien hierher ziehen und ablegen',
   send_copy_via_email: 'Kopie per E-Mail senden',
   download: 'Herunterladen',
@@ -370,140 +374,142 @@ const de = {
   draw_initials: 'Initialen zeichnen',
   type_signature_here: 'Unterschrift hier eingeben',
   type_initial_here: 'Initialen hier eingeben',
-  form_has_been_completed: 'Formular wurde ausgefüllt!',
-  document_has_been_signed: 'Dokument wurde unterschrieben!',
-  documents_have_been_signed: 'Dokumente wurden unterschrieben!',
+  form_has_been_completed: 'Formular wurde abgeschlossen!',
+  document_has_been_signed: 'Dokument wurde unterzeichnet!',
+  documents_have_been_signed: 'Dokumente wurden unterzeichnet!',
   create_a_free_account: 'Kostenloses Konto erstellen',
   powered_by: 'Bereitgestellt von',
-  please_check_the_box_to_continue: 'Bitte setzen Sie das Häkchen, um fortzufahren.',
+  please_check_the_box_to_continue: 'Bitte aktivieren Sie das Kontrollkästchen, um fortzufahren.',
   open_source_documents_software: 'Open-Source-Dokumentensoftware',
-  verified_phone_number: 'Telefonnummer überprüfen',
+  verified_phone_number: 'Telefonnummer verifizieren',
   use_international_format: 'Internationales Format verwenden: +1xxx',
   six_digits_code: '6-stelliger Code',
   change_phone_number: 'Telefonnummer ändern',
   sending: 'Senden...',
   resend_code: 'Code erneut senden',
-  verification_code_has_been_resent: 'Die Verifizierungscode wurde erneut per SMS gesendet',
-  please_fill_all_required_fields: 'Bitte füllen Sie alle erforderlichen Felder aus',
-  set_today: 'Heute einstellen',
+  verification_code_has_been_resent: 'Der Verifizierungscode wurde per SMS erneut gesendet',
+  please_fill_all_required_fields: 'Bitte füllen Sie alle Pflichtfelder aus',
+  set_today: 'Heute',
+  toggle_multiline_text: 'Mehrzeiligen Text umschalten',
   draw_signature: 'Unterschrift zeichnen',
   type_initial: 'Initialen eingeben',
   draw: 'Zeichnen',
   type: 'Eingeben',
   type_text: 'Text eingeben',
-  toggle_multiline_text: 'Mehrzeiligen Text umschalten',
-  email_has_been_sent: 'Die E-Mail wurde gesendet',
+  email_has_been_sent: 'E-Mail wurde gesendet',
   processing: 'Verarbeitung',
-  pay_with_strip: 'Mit Stripe bezahlen',
+  pay_with_stripe: 'Mit Stripe bezahlen',
   reupload: 'Erneut hochladen',
   upload: 'Hochladen',
   files: 'Dateien',
-  signature_is_too_small_or_simple_please_redraw: 'Die Unterschrift ist zu klein oder zu einfach. Bitte erneut zeichnen.',
-  wait_countdown_seconds: 'Warte {countdown} Sekunden'
+  signature_is_too_small_or_simple_please_redraw: 'Die Unterschrift ist zu klein oder zu einfach. Bitte neu zeichnen.',
+  wait_countdown_seconds: 'Bitte {countdown} Sekunden warten'
 }
 
 const fr = {
-  please_upload_an_image_file: 'Veuillez télécharger un fichier image',
-  must_be_characters_length: 'Doit contenir {number} caractères',
-  complete_all_required_fields_to_proceed_with_identity_verification: "Veuillez remplir tous les champs obligatoires pour continuer la vérification de l'identité.",
-  verify_id: "Vérification de l'ID",
-  identity_verification: "Vérification de l'identité",
+  kba: 'KBA',
+  please_upload_an_image_file: 'Veuillez téléverser un fichier image',
+  must_be_characters_length: 'Doit comporter {number} caractères',
+  complete_all_required_fields_to_proceed_with_identity_verification: "Veuillez remplir tous les champs obligatoires pour poursuivre la vérification d'identité.",
+  verify_id: "Vérifier l'ID",
+  identity_verification: "Vérification d'identité",
   complete: 'Terminer',
-  fill_all_required_fields_to_complete: 'Veuillez remplir tous les champs obligatoires pour compléter',
-  sign_and_complete: 'Signer et Terminer',
-  invite: 'Inviter',
-  email: 'Courriel',
+  fill_all_required_fields_to_complete: 'Remplissez tous les champs obligatoires pour terminer',
+  sign_and_complete: 'Signer et terminer',
+  text: 'Texte',
+  by_clicking_you_agree_to_the: 'En cliquant sur "{button}", vous acceptez la',
+  electronic_signature_disclosure: 'Déclaration relative à la signature électronique',
+  esignature_disclosure: 'Déclaration eSignature',
+  signature: 'Signature',
+  initials: 'Initiales',
+  sign_on_the_touchscreen: 'Signer sur écran tactile',
   approved: 'Approuvé',
   reviewed: 'Révisé',
   other: 'Autre',
   authored_by_me: 'Rédigé par moi',
+  invite: 'Inviter',
+  email: 'E-mail',
   approved_by: 'Approuvé par',
   reviewed_by: 'Révisé par',
   authored_by: 'Rédigé par',
   select_a_reason: 'Sélectionnez une raison',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scannez le QR avec l’appareil photo pour ouvrir le formulaire et signer sur mobile',
+  date: 'Date',
+  number: 'Nombre',
   value_is_invalid: 'La valeur est invalide',
   verification_code_is_invalid: 'Le code de vérification est invalide',
-  drawn_signature_on_a_touchscreen_device: 'Signature dessinée sur un appareil à écran tactile',
-  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scannez le code QR avec l\'application de l\'appareil photo pour ouvrir le formulaire sur mobile et dessiner votre signature',
-  by_clicking_you_agree_to_the: 'En cliquant sur "{button}", vous acceptez la',
-  electronic_signature_disclosure: 'Divulgation de Signature Électronique',
-  esignature_disclosure: 'Divulgation de la eSignature',
-  minimize: 'Réduire',
-  text: 'Texte',
   already_paid: 'Déjà payé',
-  signature: 'Signature',
-  initials: 'Initiales',
-  digitally_signed_by: 'Signé numériquement par',
-  reason: 'Raison',
-  pay: 'Payer',
-  date: 'Date',
-  number: 'Numéro',
   image: 'Image',
+  pay: 'Payer',
+  take_photo: 'Prendre une photo',
+  number_phone_is_invalid: "Le numéro de téléphone {number} n'est pas valide",
   file: 'Fichier',
-  select: 'Choisir',
+  digitally_signed_by: 'Signé électroniquement par',
+  reason: 'Motif',
+  select: 'Sélectionner',
   checkbox: 'Coche',
   multiple: 'Multiple',
   radio: 'Radio',
   cells: 'Cellules',
   stamp: 'Tampon',
+  minimize: 'Réduire',
   payment: 'Paiement',
-  number_phone_is_invalid: '{number} téléphone est invalide',
   phone: 'Téléphone',
   start_now: 'Commencer maintenant',
   continue: 'Continuer',
   sign_now: 'Signer maintenant',
-  type_here_: 'Tapez ici...',
+  type_here_: 'Saisissez ici...',
   optional: 'facultatif',
   option: 'Option',
   appears_on: 'Apparaît sur',
   page: 'Page',
-  take_photo: 'Prendre une photo',
   select_your_option: 'Sélectionnez votre option',
-  complete_hightlighted_checkboxes_and_click: 'Complétez les cases à cocher en surbrillance et cliquez',
-  submit: 'envoyer',
+  complete_hightlighted_checkboxes_and_click: 'Cochez les cases mises en évidence puis cliquez',
+  submit: 'soumettre',
   next: 'suivant',
-  click_to_upload: 'Cliquez pour télécharger',
-  or_drag_and_drop_files: 'ou faites glisser-déposer les fichiers',
+  click_to_upload: 'Cliquez pour téléverser',
+  or_drag_and_drop_files: 'ou faites glisser et déposez des fichiers',
   send_copy_via_email: 'Envoyer une copie par e-mail',
   download: 'Télécharger',
   clear: 'Effacer',
   redraw: 'Redessiner',
   draw_initials: 'Dessiner les initiales',
-  type_signature_here: 'Tapez la signature ici',
-  type_initial_here: 'Tapez les initiales ici',
-  form_has_been_completed: 'Le formulaire a été complété !',
-  document_has_been_signed: 'Le document a été signé!',
-  documents_have_been_signed: 'Les documents ont été signés!',
-  create_a_free_account: 'Créer un Compte Gratuit',
+  type_signature_here: 'Saisissez la signature ici',
+  type_initial_here: 'Saisissez les initiales ici',
+  form_has_been_completed: 'Le formulaire a été rempli !',
+  document_has_been_signed: 'Le document a été signé !',
+  documents_have_been_signed: 'Les documents ont été signés !',
+  create_a_free_account: 'Créer un compte gratuit',
   powered_by: 'Propulsé par',
   please_check_the_box_to_continue: 'Veuillez cocher la case pour continuer.',
   open_source_documents_software: 'logiciel de documents open source',
   verified_phone_number: 'Vérifier le numéro de téléphone',
-  use_international_format: 'Utiliser le format international : +1xxx',
+  use_international_format: 'Utilisez le format international : +1xxx',
   six_digits_code: 'Code à 6 chiffres',
-  change_phone_number: 'Changer le numéro de téléphone',
-  sending: 'Envoi en cours...',
+  change_phone_number: 'Changer de numéro de téléphone',
+  sending: 'Envoi...',
   resend_code: 'Renvoyer le code',
   verification_code_has_been_resent: 'Le code de vérification a été renvoyé par SMS',
   please_fill_all_required_fields: 'Veuillez remplir tous les champs obligatoires',
-  set_today: "Définir Aujourd'hui",
-  draw_signature: 'Dessiner une signature',
+  set_today: "Définir à aujourd'hui",
+  toggle_multiline_text: 'Basculer le texte multiligne',
+  draw_signature: 'Dessiner la signature',
   type_initial: 'Saisir les initiales',
   draw: 'Dessiner',
   type: 'Saisir',
   type_text: 'Saisir du texte',
-  toggle_multiline_text: 'Basculer le Texte Multiligne',
-  email_has_been_sent: "L'email a été envoyé",
-  processing: 'Traitement',
-  pay_with_strip: 'Paiement avec Stripe',
-  reupload: 'Recharger',
-  upload: 'Télécharger',
+  email_has_been_sent: "L'e-mail a été envoyé",
+  processing: 'Traitement en cours',
+  pay_with_stripe: 'Payer avec Stripe',
+  reupload: 'Retéléverser',
+  upload: 'Téléverser',
   files: 'Fichiers',
   signature_is_too_small_or_simple_please_redraw: 'La signature est trop petite ou trop simple. Veuillez la redessiner.',
-  wait_countdown_seconds: 'Attendez {countdown} secondes'
+  wait_countdown_seconds: 'Veuillez patienter {countdown} secondes'
 }
 
 const pl = {
+  kba: 'KBA',
   please_upload_an_image_file: 'Proszę przesłać plik obrazu',
   must_be_characters_length: 'Musi mieć długość {number} znaków',
   complete_all_required_fields_to_proceed_with_identity_verification: 'Uzupełnij wszystkie wymagane pola, aby kontynuować weryfikację tożsamości.',
@@ -524,7 +530,7 @@ const pl = {
   select_a_reason: 'Wybierz powód',
   value_is_invalid: 'Wartość jest nieprawidłowa',
   verification_code_is_invalid: 'Kod weryfikacyjny jest nieprawidłowy',
-  drawn_signature_on_a_touchscreen_device: 'Podpis odręczny na urządzeniu z ekranem dotykowym',
+  sign_on_the_touchscreen: 'Podpisz na ekranie dotykowym',
   scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Zeskanuj kod QR za pomocą aplikacji aparatu, aby otworzyć formularz na telefonie i narysować swój podpis',
   by_clicking_you_agree_to_the: 'Klikając na "{button}", zgadzasz się na',
   electronic_signature_disclosure: 'Ujawnienie Elektronicznej Sygnatury',
@@ -596,7 +602,7 @@ const pl = {
   toggle_multiline_text: 'Przełącz Tekst Wielolinijkowy',
   email_has_been_sent: 'E-mail został wysłany',
   processing: 'Przetwarzanie',
-  pay_with_strip: 'Płatność za pomocą Stripe',
+  pay_with_stripe: 'Płatność za pomocą Stripe',
   reupload: 'Ponowne przesłanie',
   upload: 'Przesyłanie',
   files: 'Pliki',
@@ -605,6 +611,7 @@ const pl = {
 }
 
 const uk = {
+  kba: 'KBA',
   please_upload_an_image_file: 'Будь ласка, завантажте файл зображення',
   must_be_characters_length: 'Має містити {number} символів',
   complete_all_required_fields_to_proceed_with_identity_verification: "Заповніть всі обов'язкові поля, щоб продовжити перевірку особи.",
@@ -625,7 +632,7 @@ const uk = {
   select_a_reason: 'Виберіть причину',
   value_is_invalid: 'Значення є неправильним',
   verification_code_is_invalid: 'Код підтвердження є неправильним',
-  drawn_signature_on_a_touchscreen_device: 'Підпис на сенсорному пристрої',
+  sign_on_the_touchscreen: 'Підписати на сенсорному екрані',
   scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Скануйте QR-код за допомогою програми камери, щоб відкрити форму на мобільному пристрої та намалювати свій підпис',
   by_clicking_you_agree_to_the: 'Натиснувши на "{button}", ви погоджуєтеся з',
   electronic_signature_disclosure: 'Розголошення Електронного Підпису',
@@ -706,6 +713,7 @@ const uk = {
 }
 
 const cs = {
+  kba: 'KBA',
   please_upload_an_image_file: 'Nahrajte prosím obrázkový soubor',
   must_be_characters_length: 'Musí mít délku {number} znaků',
   complete_all_required_fields_to_proceed_with_identity_verification: 'Vyplňte všechna povinná pole, abyste mohli pokračovat v ověření identity.',
@@ -726,7 +734,7 @@ const cs = {
   select_a_reason: 'Vyberte důvod',
   value_is_invalid: 'Hodnota je neplatná',
   verification_code_is_invalid: 'Ověřovací kód je neplatný',
-  drawn_signature_on_a_touchscreen_device: 'Namalovaný podpis na dotykovém zařízení',
+  sign_on_the_touchscreen: 'Podepsat na dotykové obrazovce',
   scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Naskenujte QR kód pomocí aplikace fotoaparátu, abyste otevřeli formulář na mobilním zařízení a nakreslili svůj podpis',
   by_clicking_you_agree_to_the: 'Kliknutím na "{button}" souhlasíte s',
   electronic_signature_disclosure: 'Zveřejněním Elektronického Podpisu',
@@ -798,7 +806,7 @@ const cs = {
   toggle_multiline_text: 'Přepnout Víceřádkový Text',
   email_has_been_sent: 'E-mail byl odeslán',
   processing: 'Zpracování',
-  pay_with_strip: 'Zaplacení přes Stripe',
+  pay_with_stripe: 'Zaplacení přes Stripe',
   reupload: 'Znovu nahrát',
   upload: 'Nahrát',
   files: 'Soubory',
@@ -807,6 +815,7 @@ const cs = {
 }
 
 const pt = {
+  kba: 'KBA',
   please_upload_an_image_file: 'Por favor, envie um arquivo de imagem',
   must_be_characters_length: 'Deve ter {number} caracteres',
   complete_all_required_fields_to_proceed_with_identity_verification: 'Preencha todos os campos obrigatórios para prosseguir com a verificação de identidade.',
@@ -827,7 +836,7 @@ const pt = {
   select_a_reason: 'Selecione um motivo',
   value_is_invalid: 'Valor é inválido',
   verification_code_is_invalid: 'Código de verificação é inválido',
-  drawn_signature_on_a_touchscreen_device: 'Assinatura desenhada em um dispositivo com tela sensível ao toque',
+  sign_on_the_touchscreen: 'Assinar na tela sensível',
   scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Escaneie o código QR com o aplicativo da câmera para abrir o formulário no celular e desenhar sua assinatura',
   by_clicking_you_agree_to_the: 'Ao clicar em "{button}", você concorda com o',
   electronic_signature_disclosure: 'Divulgação de Assinatura Eletrônica',
@@ -899,7 +908,7 @@ const pt = {
   toggle_multiline_text: 'Alternar Texto Multilinha',
   email_has_been_sent: 'Email enviado',
   processing: 'Processamento',
-  pay_with_strip: 'Pagar com Stripe',
+  pay_with_stripe: 'Pagar com Stripe',
   reupload: 'Reenviar',
   upload: 'Carregar',
   files: 'Arquivos',
@@ -908,6 +917,7 @@ const pt = {
 }
 
 const he = {
+  kba: 'KBA',
   please_upload_an_image_file: 'אנא העלה קובץ תמונה',
   must_be_characters_length: 'חייב להיות באורך של {number} תווים',
   complete_all_required_fields_to_proceed_with_identity_verification: 'מלא את כל השדות הנדרשים כדי להמשיך עם אימות זהות.',
@@ -928,7 +938,7 @@ const he = {
   select_a_reason: 'בחר סיבה',
   value_is_invalid: 'ערך לא תקין',
   verification_code_is_invalid: 'קוד האימות אינו תקין',
-  drawn_signature_on_a_touchscreen_device: 'חתימה שנוצרה במכשיר עם מסך מגע',
+  sign_on_the_touchscreen: 'חתום על מסך המגע',
   scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'סרוק את קוד ה-QR באמצעות אפליקציית המצלמה כדי לפתוח את הטופס במובייל ולצייר את החתימה שלך',
   by_clicking_you_agree_to_the: 'על ידי לחיצה על "{button}", אתה מסכים ל',
   electronic_signature_disclosure: 'חשיפת חתימה אלקטרונית',
@@ -1000,7 +1010,7 @@ const he = {
   type_text: 'הקלד טקסט',
   email_has_been_sent: 'האימייל נשלח',
   processing: 'מעבד',
-  pay_with_strip: 'שלם עם סטרייפ',
+  pay_with_stripe: 'שלם עם סטרייפ',
   reupload: 'העלה שוב',
   upload: 'העלאה',
   files: 'קבצים',
@@ -1009,6 +1019,7 @@ const he = {
 }
 
 const nl = {
+  kba: 'KBA',
   please_upload_an_image_file: 'Upload alstublieft een afbeeldingsbestand',
   must_be_characters_length: 'Moet {number} tekens lang zijn',
   complete_all_required_fields_to_proceed_with_identity_verification: 'Vul alle verplichte velden in om door te gaan met de identiteitsverificatie.',
@@ -1029,7 +1040,7 @@ const nl = {
   select_a_reason: 'Selecteer een reden',
   value_is_invalid: 'Waarde is ongeldig',
   verification_code_is_invalid: 'Verificatiecode is ongeldig',
-  drawn_signature_on_a_touchscreen_device: 'Getekende handtekening op een apparaat met een touchscreen',
+  sign_on_the_touchscreen: 'Onderteken op touchscreen',
   scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scan de QR-code met de camera-app om het formulier op mobiel te openen en uw handtekening te tekenen',
   by_clicking_you_agree_to_the: 'Door op "{button}" te klikken, gaat u akkoord met de',
   electronic_signature_disclosure: 'Openbaarmaking van Elektronische Handtekening',
@@ -1101,7 +1112,7 @@ const nl = {
   type_text: 'Typ tekst',
   email_has_been_sent: 'E-mail is verzonden',
   processing: 'Verwerken',
-  pay_with_strip: 'Betalen met Stripe',
+  pay_with_stripe: 'Betalen met Stripe',
   reupload: 'Opnieuw uploaden',
   upload: 'Uploaden',
   files: 'Bestanden',
@@ -1110,6 +1121,7 @@ const nl = {
 }
 
 const ar = {
+  kba: 'KBA',
   please_upload_an_image_file: 'يرجى تحميل ملف صورة',
   must_be_characters_length: 'يجب أن يكون الطول {number} حرفًا',
   complete_all_required_fields_to_proceed_with_identity_verification: 'أكمل جميع الحقول المطلوبة للمتابعة في التحقق من الهوية.',
@@ -1131,7 +1143,7 @@ const ar = {
   value_is_invalid: 'القيمة غير صالحة',
   verification_code_is_invalid: 'رمز التحقق غير صالح',
   already_paid: 'تم الدفع بالفعل',
-  drawn_signature_on_a_touchscreen_device: 'توقيع مرسوم على جهاز بشاشة تعمل باللمس',
+  sign_on_the_touchscreen: 'وقع على شاشة اللمس',
   scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'امسح رمز الاستجابة السريعة باستخدام تطبيق الكاميرا لفتح النموذج على الهاتف المحمول ورسم توقيعك',
   by_clicking_you_agree_to_the: 'بالنقر فوق "{button}"، أنت توافق على',
   electronic_signature_disclosure: 'كشف التوقيع الإلكتروني',
@@ -1211,6 +1223,7 @@ const ar = {
 }
 
 const ko = {
+  kba: 'KBA',
   please_upload_an_image_file: '이미지 파일을 업로드해 주세요',
   must_be_characters_length: '{number}자여야 합니다',
   complete_all_required_fields_to_proceed_with_identity_verification: '신원 확인을 진행하려면 모든 필수 필드를 작성하십시오.',
@@ -1229,7 +1242,7 @@ const ko = {
   reviewed_by: '검토자',
   authored_by: '작성자',
   select_a_reason: '이유 선택',
-  drawn_signature_on_a_touchscreen_device: '터치스크린 장치에서 그린 서명',
+  sign_on_the_touchscreen: '터치스크린에서 서명',
   scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: '카메라 앱으로 QR 코드를 스캔하여 모바일에서 양식을 열고 서명을 그리세요',
   by_clicking_you_agree_to_the: '"{button}"를 클릭함으로써, 다음에 동의하게 됩니다',
   electronic_signature_disclosure: '전자 서명 공개',
@@ -1303,7 +1316,7 @@ const ko = {
   type_text: '텍스트 입력',
   email_has_been_sent: '이메일이 전송되었습니다',
   processing: '처리 중',
-  pay_with_strip: '스트라이프로 결제',
+  pay_with_stripe: '스트라이프로 결제',
   reupload: '다시 업로드',
   upload: '업로드',
   files: '파일',
@@ -1312,6 +1325,7 @@ const ko = {
 }
 
 const ja = {
+  kba: 'KBA',
   please_upload_an_image_file: '画像ファイルをアップロードしてください',
   must_be_characters_length: '{number}文字でなければなりません',
   complete_all_required_fields_to_proceed_with_identity_verification: '本人確認を進めるには、すべての必須項目を入力してください。',
@@ -1326,7 +1340,7 @@ const ja = {
   esignature_disclosure: '電子署名開示',
   signature: '署名',
   initials: 'イニシャル',
-  drawn_signature_on_a_touchscreen_device: 'タッチスクリーンデバイスで描かれた署名',
+  sign_on_the_touchscreen: 'タッチスクリーンで署名',
   approved: '承認済み',
   reviewed: '確認済み',
   other: 'その他',
@@ -1404,7 +1418,7 @@ const ja = {
   type_text: 'テキストを入力',
   email_has_been_sent: 'メールが送信されました',
   processing: '処理中',
-  pay_with_strip: 'Stripeで支払う',
+  pay_with_stripe: 'Stripeで支払う',
   reupload: '再アップロード',
   upload: 'アップロード',
   files: 'ファイル',

app/javascript/submission_form/initials_step.vue

@@ -19,7 +19,7 @@
       <div class="space-x-2 flex flex-none">
         <span
           v-if="isDrawInitials"
-          class="tooltip"
+          class="md:tooltip"
           :data-tip="t('type_initial')"
         >
           <a
@@ -36,7 +36,7 @@
         </span>
         <span
           v-else
-          class="tooltip ml-2"
+          class="md:tooltip ml-2"
           :data-tip="t('draw_initials')"
         >
           <a
@@ -52,7 +52,7 @@
           </a>
         </span>
         <span
-          class="tooltip"
+          class="md:tooltip"
           :data-tip="t('click_to_upload')"
         >
           <label class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap upload-image-button">
@@ -123,6 +123,11 @@
         v-if="!isDrawInitials"
         class="absolute top-0 right-0 left-0 bottom-0"
       />
+      <label
+        v-if="!isDrawInitials && !modelValue && !computedPreviousValue"
+        for="initials_text_input"
+        class="absolute top-0 right-0 left-0 bottom-0"
+      />
       <canvas
         v-show="!modelValue && !computedPreviousValue"
         ref="canvas"

app/javascript/submission_form/kba_step.vue

@@ -0,0 +1,512 @@
+<template>
+  <label
+    v-if="!error"
+    class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5 field-name-label"
+  >
+    <MarkdownContent
+      v-if="field.title"
+      :string="field.title"
+    />
+    <template v-else>{{ field.name || 'Knowledge Based Authentication' }}</template>
+    <span
+      v-if="questions"
+      class="float-right text-base font-normal text-neutral-500 mt-1 whitespace-nowrap"
+    >
+      Question {{ currentQuestionIndex + 1 }} / {{ questions.length }}
+    </span>
+  </label>
+  <div
+    v-if="field.description"
+    dir="auto"
+    class="mb-4 px-1 field-description-text"
+  >
+    <MarkdownContent :string="field.description" />
+  </div>
+  <div
+    v-if="isRequiredFieldEmpty"
+    class="px-1 field-description-text"
+  >
+    {{ t('complete_all_required_fields_to_proceed_with_identity_verification') }}
+  </div>
+  <div
+    v-if="error"
+    class="mb-4 text-center"
+  >
+    <div class="text-xl mb-4">
+      {{ error }}
+    </div>
+    <button
+      class="base-button w-full flex justify-center submit-form-button"
+      @click="restartKba"
+    >
+      {{ questions ? 'Restart KBA' : 'Retry' }}
+    </button>
+  </div>
+  <div
+    v-if="isLoading"
+    class="w-full flex space-x-2 justify-center mb-2"
+  >
+    <IconInnerShadowTop
+      width="40"
+      class="animate-spin h-10"
+    />
+  </div>
+  <div v-else-if="questions && !error">
+    <form @submit.prevent="nextQuestion">
+      <div class="mb-6 px-1">
+        <p class="font-semibold mb-4 text-lg">{{ currentQuestion.prompt }}</p>
+        <div class="space-y-3.5 mx-auto">
+          <div
+            v-for="(answer, index) in currentQuestion.answers"
+            :key="`${currentQuestion.id}_${index}`"
+          >
+            <label
+              :for="`${currentQuestion.id}_${index}`"
+              class="flex items-center space-x-3 radio-label"
+            >
+              <input
+                :id="`${currentQuestion.id}_${index}`"
+                v-model="answers[currentQuestion.id]"
+                type="radio"
+                :name="currentQuestion.id"
+                :value="answer.text"
+                class="base-radio !h-7 !w-7"
+                required
+              >
+              <span class="text-xl">{{ answer.text }}</span>
+            </label>
+          </div>
+        </div>
+      </div>
+      <div class="mt-6">
+        <button
+          type="submit"
+          class="base-button w-full flex justify-center submit-form-button"
+          :disabled="isSubmitting || !answers[currentQuestion.id]"
+        >
+          <span class="flex">
+            <IconInnerShadowTop
+              v-if="isSubmitting"
+              class="mr-1 animate-spin"
+            />
+            <span>
+              {{ isLastQuestion ? (isSubmitting ? t('submitting_') : t('complete')) : t('next') }}
+            </span><span
+              v-if="isSubmitting"
+              class="w-6 flex justify-start mr-1"
+            ><span>...</span></span>
+          </span>
+        </button>
+      </div>
+    </form>
+  </div>
+  <div v-else-if="!error && !isRequiredFieldEmpty">
+    <form @submit.prevent="startKba">
+      <div class="grid grid-cols-6 gap-x-2 md:gap-x-4 md:gap-y-2 mb-4">
+        <div class="col-span-3">
+          <label
+            for="kba_fn"
+            class="label text-sm md:text-base"
+          >First Name</label>
+          <input
+            id="kba_fn"
+            v-model="form.fn"
+            type="text"
+            class="input input-bordered !h-10 w-full bg-white"
+            required
+          >
+        </div>
+        <div class="col-span-3">
+          <label
+            for="kba_ln"
+            class="label text-sm md:text-base"
+          >Last Name</label>
+          <input
+            id="kba_ln"
+            v-model="form.ln"
+            type="text"
+            class="input input-bordered !h-10 w-full bg-white"
+            required
+          >
+        </div>
+        <div class="col-span-6">
+          <label
+            for="kba_addr"
+            class="label text-sm md:text-base"
+          >Address</label>
+          <input
+            id="kba_addr"
+            v-model="form.addr"
+            type="text"
+            class="input input-bordered !h-10 w-full bg-white"
+            required
+          >
+        </div>
+        <div class="col-span-2">
+          <label
+            for="kba_city"
+            class="label text-sm md:text-base"
+          >City</label>
+          <input
+            id="kba_city"
+            v-model="form.city"
+            type="text"
+            class="input input-bordered !h-10 w-full bg-white"
+            required
+          >
+        </div>
+        <div class="col-span-2">
+          <label
+            for="kba_state"
+            class="label text-sm md:text-base"
+          >State</label>
+          <select
+            id="kba_state"
+            v-model="form.state"
+            class="select select-bordered !h-10 min-h-[2.5rem] w-full bg-white font-normal !text-base"
+            required
+          >
+            <option
+              value=""
+              disabled
+            >
+              Select State
+            </option>
+            <option
+              v-for="state in states"
+              :key="state.code"
+              :value="state.code"
+            >
+              {{ state.name }}
+            </option>
+          </select>
+        </div>
+        <div class="col-span-2">
+          <label
+            for="kba_zip"
+            class="label text-sm md:text-base"
+          >Zip</label>
+          <input
+            id="kba_zip"
+            v-model="form.zip"
+            type="text"
+            class="input input-bordered !h-10 w-full bg-white"
+            required
+          >
+        </div>
+        <div class="col-span-3">
+          <label
+            for="kba_phone"
+            class="label text-sm md:text-base"
+          >Phone</label>
+          <input
+            id="kba_phone"
+            v-model="form.phone"
+            type="text"
+            class="input input-bordered !h-10 w-full bg-white"
+            required
+          >
+        </div>
+        <div class="col-span-3">
+          <label
+            for="kba_email"
+            class="label text-sm md:text-base"
+          >Email</label>
+          <input
+            id="kba_email"
+            v-model="form.email"
+            type="email"
+            class="input input-bordered !h-10 w-full bg-white"
+            required
+          >
+        </div>
+        <div class="col-span-3">
+          <label
+            for="kba_dob"
+            class="label text-sm md:text-base"
+          >DOB</label>
+          <input
+            id="kba_dob"
+            v-model="form.dob"
+            type="date"
+            class="input input-bordered !h-10 md:w-full bg-white"
+            required
+          >
+        </div>
+        <div class="col-span-3">
+          <label
+            for="kba_ssn"
+            class="label text-sm md:text-base"
+          >SSN</label>
+          <input
+            id="kba_ssn"
+            v-model="form.ssn"
+            type="text"
+            class="input input-bordered !h-10 w-full bg-white"
+            required
+          >
+        </div>
+      </div>
+      <div class="mt-6">
+        <button
+          type="submit"
+          class="base-button w-full flex justify-center submit-form-button"
+          :disabled="isLoading"
+        >
+          <span class="flex">
+            <IconInnerShadowTop
+              v-if="isLoading"
+              class="mr-1 animate-spin"
+            />
+            <span>
+              {{ isLoading ? 'Loading...' : 'Start Verification' }}
+            </span><span
+              v-if="isLoading"
+              class="w-6 flex justify-start mr-1"
+            ><span>...</span></span>
+          </span>
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+import MarkdownContent from './markdown_content'
+import { IconInnerShadowTop } from '@tabler/icons-vue'
+
+export default {
+  name: 'KbaStep',
+  components: {
+    MarkdownContent,
+    IconInnerShadowTop
+  },
+  inject: ['baseUrl', 't'],
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    submitter: {
+      type: Object,
+      required: true
+    },
+    submitterSlug: {
+      type: String,
+      required: true
+    },
+    emptyValueRequiredStep: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    values: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['submit'],
+  data () {
+    return {
+      isLoading: false,
+      isSubmitting: false,
+      questions: null,
+      currentQuestionIndex: 0,
+      token: null,
+      reference: null,
+      answers: {},
+      error: null,
+      form: {
+        fn: '',
+        ln: '',
+        addr: '',
+        city: '',
+        state: '',
+        zip: '',
+        dob: '',
+        ssn: '',
+        phone: '',
+        email: ''
+      }
+    }
+  },
+  computed: {
+    currentQuestion () {
+      return this.questions ? this.questions[this.currentQuestionIndex] : null
+    },
+    isRequiredFieldEmpty () {
+      return this.emptyValueRequiredStep && this.emptyValueRequiredStep[0] !== this.field
+    },
+    states () {
+      return [
+        { code: 'AL', name: 'Alabama' },
+        { code: 'AK', name: 'Alaska' },
+        { code: 'AZ', name: 'Arizona' },
+        { code: 'AR', name: 'Arkansas' },
+        { code: 'CA', name: 'California' },
+        { code: 'CO', name: 'Colorado' },
+        { code: 'CT', name: 'Connecticut' },
+        { code: 'DE', name: 'Delaware' },
+        { code: 'DC', name: 'District of Columbia' },
+        { code: 'FL', name: 'Florida' },
+        { code: 'GA', name: 'Georgia' },
+        { code: 'HI', name: 'Hawaii' },
+        { code: 'ID', name: 'Idaho' },
+        { code: 'IL', name: 'Illinois' },
+        { code: 'IN', name: 'Indiana' },
+        { code: 'IA', name: 'Iowa' },
+        { code: 'KS', name: 'Kansas' },
+        { code: 'KY', name: 'Kentucky' },
+        { code: 'LA', name: 'Louisiana' },
+        { code: 'ME', name: 'Maine' },
+        { code: 'MD', name: 'Maryland' },
+        { code: 'MA', name: 'Massachusetts' },
+        { code: 'MI', name: 'Michigan' },
+        { code: 'MN', name: 'Minnesota' },
+        { code: 'MS', name: 'Mississippi' },
+        { code: 'MO', name: 'Missouri' },
+        { code: 'MT', name: 'Montana' },
+        { code: 'NE', name: 'Nebraska' },
+        { code: 'NV', name: 'Nevada' },
+        { code: 'NH', name: 'New Hampshire' },
+        { code: 'NJ', name: 'New Jersey' },
+        { code: 'NM', name: 'New Mexico' },
+        { code: 'NY', name: 'New York' },
+        { code: 'NC', name: 'North Carolina' },
+        { code: 'ND', name: 'North Dakota' },
+        { code: 'OH', name: 'Ohio' },
+        { code: 'OK', name: 'Oklahoma' },
+        { code: 'OR', name: 'Oregon' },
+        { code: 'PA', name: 'Pennsylvania' },
+        { code: 'RI', name: 'Rhode Island' },
+        { code: 'SC', name: 'South Carolina' },
+        { code: 'SD', name: 'South Dakota' },
+        { code: 'TN', name: 'Tennessee' },
+        { code: 'TX', name: 'Texas' },
+        { code: 'UT', name: 'Utah' },
+        { code: 'VT', name: 'Vermont' },
+        { code: 'VA', name: 'Virginia' },
+        { code: 'WA', name: 'Washington' },
+        { code: 'WV', name: 'West Virginia' },
+        { code: 'WI', name: 'Wisconsin' },
+        { code: 'WY', name: 'Wyoming' }
+      ]
+    },
+    isLastQuestion () {
+      return this.questions && this.currentQuestionIndex === this.questions.length - 1
+    }
+  },
+  methods: {
+    nextQuestion () {
+      if (this.isLastQuestion) {
+        this.$emit('submit')
+      } else {
+        this.currentQuestionIndex++
+      }
+    },
+    restartKba () {
+      this.questions = null
+      this.token = null
+      this.reference = null
+      this.answers = {}
+      this.currentQuestionIndex = 0
+      this.error = null
+    },
+    async startKba () {
+      this.isLoading = true
+      this.error = null
+
+      try {
+        const payload = { ...this.form, submitter_slug: this.submitterSlug }
+
+        if (payload.dob) {
+          payload.dob = payload.dob.replace(/-/g, '')
+        }
+
+        if (payload.ssn) {
+          payload.ssn = payload.ssn.replace(/\D/g, '')
+        }
+
+        if (payload.phone) {
+          payload.phone = payload.phone.replace(/^\+1/, '')
+        }
+
+        const resp = await fetch(this.baseUrl + '/api/kba', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload)
+        })
+
+        if (!resp.ok) throw new Error('Failed to start KBA')
+
+        const data = await resp.json()
+
+        if (data.result && data.result.action === 'FAIL') {
+          if (data.result.detail === 'NO MATCH') {
+            throw new Error('Unfortunately, we were unable to start Knowledge Based Authentication with the details provided. Please review and confirm that all your personal details are correct.')
+          }
+
+          throw new Error(data.result.detail || 'KBA Start Failed')
+        }
+
+        if (data.output && data.output.questions && data.output.questions.questions) {
+          this.questions = data.output.questions.questions
+          this.token = data.continuations.questions.template.token
+          this.reference = data.meta.reference
+
+          this.questions.forEach(q => {
+            this.answers[q.id] = null
+          })
+        } else {
+          throw new Error('Invalid KBA response')
+        }
+      } catch (e) {
+        this.error = e.message
+      } finally {
+        this.isLoading = false
+      }
+    },
+    async submit () {
+      this.isSubmitting = true
+      this.error = null
+
+      const formattedAnswers = Object.keys(this.answers).reduce((acc, key) => {
+        acc[key] = [this.answers[key]]
+
+        return acc
+      }, {})
+
+      try {
+        const resp = await fetch(this.baseUrl + `/api/kba/${this.field.uuid}`, {
+          method: 'PUT',
+          body: JSON.stringify({
+            token: this.token,
+            answers: formattedAnswers,
+            reference: this.reference,
+            submitter_slug: this.submitterSlug
+          }),
+          headers: { 'Content-Type': 'application/json' }
+        })
+
+        const data = await resp.json()
+
+        if (data.result?.action !== 'PASS') {
+          this.error = 'Knowledge Based Authentication Failed - make sure you provide correct answers for the Knowledge Based authentication.'
+
+          throw new Error('Knowledge Based Authentication Failed')
+        }
+
+        if (!resp.ok) {
+          this.error = 'Failed to submit answers'
+
+          throw new Error('Failed to submit answers')
+        }
+
+        return resp
+      } finally {
+        this.isSubmitting = false
+      }
+    }
+  }
+}
+</script>

app/javascript/submission_form/payment_step.vue

@@ -62,7 +62,7 @@
           width="22"
         />
         <span>
-          {{ t('pay_with_strip') }}
+          {{ t('pay_with_stripe') }}
         </span>
       </button>
     </div>
@@ -92,10 +92,20 @@ export default {
       type: Object,
       required: true
     },
+    readonlyValues: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
     values: {
       type: Object,
       required: true
     },
+    fields: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     submitterSlug: {
       type: String,
       required: true
@@ -109,6 +119,13 @@ export default {
     }
   },
   computed: {
+    fieldsUuidIndex () {
+      return this.fields.reduce((acc, field) => {
+        acc[field.uuid] = field
+
+        return acc
+      }, {})
+    },
     queryParams () {
       return new URLSearchParams(window.location.search)
     },
@@ -116,6 +133,10 @@ export default {
       return this.queryParams.get('stripe_session_id')
     },
     defaultName () {
+      if (this.field.preferences?.price_id || this.field.preferences?.payment_link_id) {
+        return ''
+      }
+
       const { price, currency } = this.field.preferences || {}
 
       const formatter = new Intl.NumberFormat([], {
@@ -178,12 +199,23 @@ export default {
   },
   methods: {
     calculateFormula () {
-      const transformedFormula = this.field.preferences.formula.replace(/{{(.*?)}}/g, (match, uuid) => {
-        return this.values[uuid] || 0.0
+      const transformedFormula = this.normalizeFormula(this.field.preferences.formula).replace(/{{(.*?)}}/g, (match, uuid) => {
+        return this.readonlyValues[uuid] || this.values[uuid] || 0.0
       })
 
       return this.math.evaluate(transformedFormula.toLowerCase())
     },
+    normalizeFormula (formula, depth = 0) {
+      if (depth > 10) return formula
+
+      return formula.replace(/{{(.*?)}}/g, (match, uuid) => {
+        if (this.fieldsUuidIndex[uuid]) {
+          return `(${this.normalizeFormula(this.fieldsUuidIndex[uuid].preferences.formula, depth + 1)})`
+        } else {
+          return match
+        }
+      })
+    },
     async submit () {
       if (this.sessionId) {
         return fetch(this.baseUrl + '/api/stripe_payments/' + this.sessionId, {

app/javascript/submission_form/phone_step.vue

@@ -100,7 +100,7 @@
         <input
           :id="field.uuid"
           ref="phone"
-          :value="phoneValue"
+          :value="defaultValue && detectedPhoneValueDialCode ? phoneValue.split('+' + detectedPhoneValueDialCode).slice(-1).join('') : phoneValue"
           :readonly="!!defaultValue"
           class="base-input !text-2xl !rounded-l-none !border-l-0 !outline-none w-full"
           autocomplete="tel"

app/javascript/submission_form/signature_step.vue

@@ -22,7 +22,7 @@
       <div class="space-x-2 flex flex-none">
         <span
           v-if="isTextSignature && format !== 'typed_or_upload' && format !== 'typed' && format !== 'upload'"
-          class="tooltip"
+          class="md:tooltip"
           :data-tip="t('draw_signature')"
         >
           <a
@@ -39,7 +39,7 @@
         </span>
         <span
           v-else-if="withTypedSignature && format !== 'drawn_or_upload' && format !== 'typed_or_upload' && format !== 'typed' && format !== 'drawn' && format !== 'upload'"
-          class="tooltip ml-2"
+          class="md:tooltip ml-2"
           :class="{ 'hidden sm:inline': modelValue || computedPreviousValue }"
           :data-tip="t('type_text')"
         >
@@ -57,7 +57,7 @@
         </span>
         <span
           v-if="format !== 'typed' && format !== 'drawn' && format !== 'upload' && format !== 'drawn_or_typed'"
-          class="tooltip"
+          class="md:tooltip"
           :class="{ 'hidden sm:inline': modelValue || computedPreviousValue }"
           :data-tip="t('take_photo')"
         >
@@ -86,8 +86,8 @@
         </a>
         <span
           v-if="withQrButton && !modelValue && !computedPreviousValue && format !== 'typed_or_upload' && format !== 'typed' && format !== 'upload'"
-          class="tooltip before:translate-x-[-90%]"
-          :data-tip="t('drawn_signature_on_a_touchscreen_device')"
+          class="md:tooltip before:translate-x-[-90%]"
+          :data-tip="t('sign_on_the_touchscreen')"
         >
           <a
             href="#"
@@ -142,7 +142,7 @@
     />
     <div
       v-else
-      class="relative"
+      class="relative select-none"
     >
       <div
         v-if="!modelValue && !computedPreviousValue && !isShowQr && !isTextSignature && isSignatureStarted"
@@ -176,7 +176,7 @@
         class="top-0 bottom-0 right-0 left-0 absolute bg-base-content/10 rounded-2xl"
       >
         <div
-          class="absolute top-1.5 right-1.5 tooltip"
+          class="absolute top-1.5 right-1.5 md:tooltip"
         >
           <a
             href="#"
@@ -211,7 +211,7 @@
       @input="updateWrittenSignature"
     >
     <select
-      v-if="requireSigningReason && !isOtherReason"
+      v-if="withSigningReason && !isOtherReason"
       class="select base-input !text-2xl w-full mt-6 text-center"
       :class="{ 'text-gray-300': !reason }"
       required
@@ -226,24 +226,37 @@
       >
         {{ t('select_a_reason') }}
       </option>
-      <option
-        v-for="(label, option) in defaultReasons"
-        :key="option"
-        :value="option"
-        :selected="reason === option"
-        class="text-base-content"
-      >
-        {{ label }}
-      </option>
-      <option
-        value="other"
-        class="text-base-content"
-      >
-        {{ t('other') }}
-      </option>
+      <template v-if="field.preferences?.reasons">
+        <option
+          v-for="option in field.preferences.reasons"
+          :key="option"
+          :value="option"
+          :selected="reason === option"
+          class="text-base-content"
+        >
+          {{ option }}
+        </option>
+      </template>
+      <template v-else>
+        <option
+          v-for="(label, option) in defaultReasons"
+          :key="option"
+          :value="option"
+          :selected="reason === option"
+          class="text-base-content"
+        >
+          {{ label }}
+        </option>
+        <option
+          value="other"
+          class="text-base-content"
+        >
+          {{ t('other') }}
+        </option>
+      </template>
     </select>
     <input
-      v-if="requireSigningReason && isOtherReason"
+      v-if="withSigningReason && isOtherReason"
       class="base-input !text-2xl w-full mt-6"
       required
       :name="`values[${field.preferences.reason_field_uuid}]`"
@@ -253,7 +266,7 @@
       @input="$emit('update:reason', $event.target.value)"
     >
     <input
-      v-if="requireSigningReason"
+      v-if="withSigningReason"
       hidden
       name="with_reason"
       :value="field.preferences.reason_field_uuid"
@@ -268,7 +281,7 @@
     <div
       v-else-if="withDisclosure"
       dir="auto"
-      class="text-base-content/60 text-xs text-center w-full mt-1"
+      class="text-base-content/60 text-xs text-center w-full mt-1 select-none"
     >
       {{ t('by_clicking_you_agree_to_the').replace('{button}', buttonText.charAt(0).toUpperCase() + buttonText.slice(1)) }} <a
         href="https://www.docuseal.com/esign-disclosure"
@@ -406,6 +419,9 @@ export default {
     format () {
       return this.field.preferences?.format
     },
+    withSigningReason () {
+      return this.requireSigningReason || this.field.preferences?.reasons?.length
+    },
     defaultReasons () {
       return {
         [this.t('approved_by')]: this.t('approved'),
@@ -424,10 +440,11 @@ export default {
   created () {
     this.isSignatureStarted = !!this.computedPreviousValue
 
-    if (this.requireSigningReason) {
+    if (this.withSigningReason) {
       this.field.preferences ||= {}
       this.field.preferences.reason_field_uuid ||= v4()
-      this.isOtherReason = this.reason && !this.defaultReasons[this.reason]
+      this.isOtherReason = this.reason && !this.defaultReasons[this.reason] &&
+        (!this.field.preferences?.reasons?.length || !this.field.preferences.reasons.includes(this.reason))
     }
   },
   async mounted () {

app/javascript/submission_form/verification_step.vue

@@ -14,7 +14,7 @@
     <MarkdownContent :string="field.description" />
   </div>
   <div
-    v-if="emptyValueRequiredStep && emptyValueRequiredStep[0] !== field"
+    v-if="isRequiredFieldEmpty"
     class="px-1 field-description-text"
   >
     {{ t('complete_all_required_fields_to_proceed_with_identity_verification') }}
@@ -100,6 +100,9 @@ export default {
     }
   },
   computed: {
+    isRequiredFieldEmpty () {
+      return this.emptyValueRequiredStep && this.emptyValueRequiredStep[0] !== this.field
+    },
     countryCode () {
       const browserTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
       const browserTz = browserTimeZone.split('/')[1]
@@ -131,17 +134,19 @@ export default {
     }
   },
   async mounted () {
-    this.isLoading = true
+    if (!this.isRequiredFieldEmpty) {
+      this.isLoading = true
 
-    if (new URLSearchParams(window.location.search).get('submit') === 'true') {
-      this.$emit('submit')
-    } else {
-      Promise.all([
-        import('@eid-easy/eideasy-widget'),
-        this.start()
-      ]).finally(() => {
-        this.isLoading = false
-      })
+      if (new URLSearchParams(window.location.search).get('submit') === 'true') {
+        this.$emit('submit')
+      } else {
+        Promise.all([
+          import('@eid-easy/eideasy-widget'),
+          this.start()
+        ]).finally(() => {
+          this.isLoading = false
+        })
+      }
     }
   },
   methods: {
@@ -156,6 +161,10 @@ export default {
       }).then(async (resp) => {
         this.eidEasyData = await resp.json()
 
+        if (this.eidEasyData.check_completed) {
+          this.$emit('submit')
+        }
+
         if (this.eidEasyData.available_methods[0] === 'itsme-qes-signature' &&
             this.eidEasyData.available_methods.length === 1) {
           const redirectUrl = new URL('https://id.eideasy.com/sign_contract_external')
@@ -166,7 +175,7 @@ export default {
           redirectUrl.searchParams.append('lang', this.locale)
 
           this.redirectUrl = redirectUrl.toString()
-        } else {
+        } else if (this.$refs.widgetContainer) {
           const eidEasyWidget = document.createElement('eideasy-widget')
 
           for (const key in this.widgetSettings) {
@@ -179,15 +188,23 @@ export default {
       })
     },
     async submit () {
-      return fetch(this.baseUrl + '/api/identity_verification', {
+      const resp = await fetch(this.baseUrl + '/api/identity_verification', {
         method: 'POST',
         body: JSON.stringify({
           submitter_slug: this.submitterSlug
         }),
         headers: { 'Content-Type': 'application/json' }
-      }).then(async (resp) => {
-        return resp
       })
+
+      if (resp.status === 404) {
+        throw new Error('Verification not completed yet')
+      }
+
+      if (resp.ok) {
+        return resp
+      } else {
+        throw new Error('Verification failed')
+      }
     }
   }
 }

app/javascript/template_builder/area.vue

@@ -10,7 +10,7 @@
     <div
       v-if="isSelected || isDraw"
       class="top-0 bottom-0 right-0 left-0 absolute border border-1.5 pointer-events-none"
-      :class="field.type === 'heading' ? '' : borderColors[submitterIndex % borderColors.length]"
+      :class="activeBorderClasses"
     />
     <div
       v-if="field.type === 'cells' && (isSelected || isDraw)"
@@ -39,7 +39,7 @@
       @pointerdown.stop
     >
       <FieldSubmitter
-        v-if="field.type != 'heading'"
+        v-if="field.type != 'heading' && field.type != 'strikethrough'"
         v-model="field.submitter_uuid"
         class="border-r roles-dropdown"
         :compact="true"
@@ -164,16 +164,58 @@
       ref="touchValueTarget"
       class="flex h-full w-full field-area"
       dir="auto"
-      :class="[isValueInput ? 'cursor-text' : '', isValueInput || isCheckboxInput || isSelectInput ? 'bg-opacity-50' : 'bg-opacity-80', field.type === 'heading' ? 'bg-gray-50' : bgColors[submitterIndex % bgColors.length], isDefaultValuePresent || isValueInput || (withFieldPlaceholder && field.areas) ? fontClasses : 'justify-center items-center']"
+      :class="[isValueInput ? 'cursor-text' : '', isValueInput || isCheckboxInput || isSelectInput ? 'bg-opacity-50' : 'bg-opacity-80', bgClasses, isDefaultValuePresent || isValueInput || (withFieldPlaceholder && field.areas) ? fontClasses : 'justify-center items-center']"
       @click="focusValueInput"
     >
       <span
         v-if="field"
         class="flex justify-center items-center space-x-1"
-        :class="{ 'w-full': isWFullType, 'h-full': !isValueInput && !isDefaultValuePresent }"
+        :class="{ 'w-full': isWFullType, 'h-full': !isValueInput && (!isDefaultValuePresent || field.type === 'strikethrough') }"
       >
         <div
-          v-if="isDefaultValuePresent || isValueInput || isSelectInput || (withFieldPlaceholder && field.areas && field.type !== 'checkbox')"
+          v-if="field.type === 'strikethrough'"
+          class="w-full h-full flex items-center justify-center"
+        >
+          <svg
+            v-if="(((basePageWidth / pageWidth) * pageHeight) * area.h) < 41.6"
+            xmlns="http://www.w3.org/2000/svg"
+            width="100%"
+            height="100%"
+          >
+            <line
+              x1="0"
+              y1="50%"
+              x2="100%"
+              y2="50%"
+              :stroke="field.preferences?.color || 'red'"
+              :stroke-width="strikethroughWidth"
+            />
+          </svg>
+          <svg
+            v-else
+            xmlns="http://www.w3.org/2000/svg"
+            :style="{ overflow: 'visible', width: `calc(100% - ${strikethroughWidth})`, height: `calc(100% - ${strikethroughWidth})` }"
+          >
+            <line
+              x1="0"
+              y1="0"
+              x2="100%"
+              y2="100%"
+              :stroke="field.preferences?.color || 'red'"
+              :stroke-width="strikethroughWidth"
+            />
+            <line
+              x1="100%"
+              y1="0"
+              x2="0"
+              y2="100%"
+              :stroke="field.preferences?.color || 'red'"
+              :stroke-width="strikethroughWidth"
+            />
+          </svg>
+        </div>
+        <div
+          v-else-if="isDefaultValuePresent || isValueInput || isSelectInput || (withFieldPlaceholder && field.areas && field.type !== 'checkbox')"
           :class="{ 'w-full h-full': isWFullType }"
           :style="fontStyle"
         >
@@ -397,6 +439,16 @@ export default {
       required: false,
       default: false
     },
+    pageWidth: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    pageHeight: {
+      type: Number,
+      required: false,
+      default: 0
+    },
     defaultSubmitters: {
       type: Array,
       required: false,
@@ -436,8 +488,33 @@ export default {
     fieldNames: FieldType.computed.fieldNames,
     fieldLabels: FieldType.computed.fieldLabels,
     fieldIcons: FieldType.computed.fieldIcons,
+    bgClasses () {
+      if (this.field.type === 'heading') {
+        return 'bg-gray-50'
+      } else if (this.field.type === 'strikethrough') {
+        return 'bg-transparent'
+      } else {
+        return this.bgColors[this.submitterIndex % this.bgColors.length]
+      }
+    },
+    activeBorderClasses () {
+      if (this.field.type === 'heading') {
+        return ''
+      } else if (this.field.type === 'strikethrough') {
+        return 'border-dashed border-gray-300'
+      } else {
+        return this.borderColors[this.submitterIndex % this.borderColors.length]
+      }
+    },
     isWFullType () {
-      return ['cells', 'checkbox', 'radio', 'multiple', 'select'].includes(this.field.type)
+      return ['cells', 'checkbox', 'radio', 'multiple', 'select', 'strikethrough'].includes(this.field.type)
+    },
+    strikethroughWidth () {
+      if (this.isInlineSize) {
+        return '0.6cqmin'
+      } else {
+        return 'clamp(0px, 0.5vw, 6px)'
+      }
     },
     fontStyle () {
       let fontSize = ''
@@ -471,8 +548,11 @@ export default {
     lineHeight () {
       return 1.3
     },
+    basePageWidth () {
+      return 1040.0
+    },
     fontScale () {
-      return 1040 / 612.0
+      return this.basePageWidth / 612.0
     },
     isDefaultValuePresent () {
       return this.field?.default_value || this.field?.default_value === 0
@@ -742,10 +822,15 @@ export default {
         delete this.field.options
       }
 
-      if (['heading'].includes(this.field.type)) {
+      if (this.field.type === 'heading') {
         this.field.readonly = true
       }
 
+      if (this.field.type === 'strikethrough') {
+        this.field.readonly = true
+        this.field.default_value = true
+      }
+
       if (['select', 'multiple', 'radio'].includes(this.field.type)) {
         this.field.options ||= [{ value: '', uuid: v4() }]
       }

app/javascript/template_builder/builder.vue

@@ -175,7 +175,10 @@
                 {{ t('save') }}
               </span>
             </button>
-            <div class="dropdown dropdown-end">
+            <div
+              class="dropdown dropdown-end"
+              :class="{ 'dropdown-open': isDownloading }"
+            >
               <label
                 tabindex="0"
                 class="base-button !rounded-l-none !pl-1 !pr-2 !border-l-neutral-500"
@@ -209,6 +212,30 @@
                     <span class="whitespace-nowrap">{{ t('preferences') }}</span>
                   </a>
                 </li>
+                <li v-if="withDownload">
+                  <button
+                    class="flex space-x-2"
+                    :disabled="isDownloading"
+                    @click.stop.prevent="download"
+                  >
+                    <IconInnerShadowTop
+                      v-if="isDownloading"
+                      class="animate-spin w-6 h-6 flex-shrink-0"
+                    />
+                    <IconDownload
+                      v-else
+                      class="w-6 h-6 flex-shrink-0"
+                    />
+                    <span
+                      v-if="isDownloading"
+                      class="whitespace-nowrap"
+                    >{{ t('downloading_') }}</span>
+                    <span
+                      v-else
+                      class="whitespace-nowrap"
+                    >{{ t('download') }}</span>
+                  </button>
+                </li>
               </ul>
             </div>
           </span>
@@ -260,8 +287,12 @@
           :style="{ backgroundColor }"
         >
           <Upload
-            v-if="sortedDocuments.length && editable && withUploadButton"
+            v-if="editable && withUploadButton"
+            v-show="sortedDocuments.length"
+            ref="upload"
             :accept-file-types="acceptFileTypes"
+            :authenticity-token="authenticityToken"
+            :with-google-drive="withGoogleDrive"
             :template-id="template.id"
             @success="updateFromUpload"
           />
@@ -297,6 +328,8 @@
               v-if="withUploadButton"
               :template-id="template.id"
               :accept-file-types="acceptFileTypes"
+              :with-google-drive="withGoogleDrive"
+              @click-google-drive="$refs.upload.openGoogleDriveModal()"
               @success="updateFromUpload"
             />
             <button
@@ -368,6 +401,8 @@
                 v-if="withUploadButton"
                 :template-id="template.id"
                 :accept-file-types="acceptFileTypes"
+                :authenticity-token="authenticityToken"
+                :with-google-drive="withGoogleDrive"
                 @success="updateFromUpload"
               />
               <button
@@ -402,7 +437,10 @@
           :style="{ backgroundColor }"
         >
           <div class="bg-base-200 rounded-lg p-5 text-center space-y-4 draw-field-container">
-            <p>
+            <p v-if="(drawField?.type || drawFieldType) === 'strikethrough'">
+              {{ t('draw_strikethrough_the_document') }}
+            </p>
+            <p v-else>
               {{ t('draw_field_on_the_document') }}
             </p>
             <div>
@@ -413,7 +451,7 @@
                 {{ t('cancel') }}
               </button>
               <a
-                v-if="!drawField && !drawOption && !['stamp', 'signature', 'initials', 'heading'].includes(drawField?.type || drawFieldType)"
+                v-if="!drawField && !drawOption && !['stamp', 'signature', 'initials', 'heading', 'strikethrough'].includes(drawField?.type || drawFieldType)"
                 href="#"
                 class="link block mt-3 text-sm"
                 @click.prevent="[addField(drawFieldType), drawField = null, drawOption = null, withSelectedFieldType ? '' : drawFieldType = '', showDrawField = false]"
@@ -438,6 +476,7 @@
             :default-required-fields="defaultRequiredFields"
             :field-types="fieldTypes"
             :with-sticky-submitters="withStickySubmitters"
+            :with-fields-detection="withFieldsDetection"
             :with-signature-id="withSignatureId"
             :with-prefillable="withPrefillable"
             :only-defined-fields="onlyDefinedFields"
@@ -445,6 +484,7 @@
             :show-tour-start-form="showTourStartForm"
             @add-field="addField"
             @set-draw="[drawField = $event.field, drawOption = $event.option]"
+            @select-submitter="selectedSubmitter = $event"
             @set-draw-type="[drawFieldType = $event, showDrawField = true]"
             @set-drag="dragField = $event"
             @set-drag-placeholder="$refs.dragPlaceholder.dragPlaceholder = $event"
@@ -499,7 +539,7 @@ import DocumentPreview from './preview'
 import DocumentControls from './controls'
 import MobileFields from './mobile_fields'
 import FieldSubmitter from './field_submitter'
-import { IconPlus, IconUsersPlus, IconDeviceFloppy, IconChevronDown, IconEye, IconWritingSign, IconInnerShadowTop, IconInfoCircle, IconAdjustments } from '@tabler/icons-vue'
+import { IconPlus, IconUsersPlus, IconDeviceFloppy, IconChevronDown, IconEye, IconWritingSign, IconInnerShadowTop, IconInfoCircle, IconAdjustments, IconDownload } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 import { ref, computed, toRaw } from 'vue'
 import * as i18n from './i18n'
@@ -525,6 +565,7 @@ export default {
     Contenteditable,
     IconUsersPlus,
     IconChevronDown,
+    IconDownload,
     IconAdjustments,
     IconEye,
     IconDeviceFloppy
@@ -542,6 +583,7 @@ export default {
       backgroundColor: this.backgroundColor,
       withPhone: this.withPhone,
       withVerification: this.withVerification,
+      withKba: this.withKba,
       withPayment: this.withPayment,
       isPaymentConnected: this.isPaymentConnected,
       withFormula: this.withFormula,
@@ -572,6 +614,11 @@ export default {
       required: false,
       default: null
     },
+    withDownload: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     backgroundColor: {
       type: String,
       required: false,
@@ -607,6 +654,11 @@ export default {
       required: false,
       default: true
     },
+    withFieldsDetection: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     withAddPageButton: {
       type: Boolean,
       required: false,
@@ -743,6 +795,11 @@ export default {
       required: false,
       default: null
     },
+    withKba: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
     withPayment: {
       type: Boolean,
       required: false,
@@ -763,6 +820,11 @@ export default {
       required: false,
       default: false
     },
+    withGoogleDrive: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     onlyDefinedFields: {
       type: Boolean,
       required: false,
@@ -783,6 +845,7 @@ export default {
     return {
       documentRefs: [],
       isBreakpointLg: false,
+      isDownloading: false,
       isLoadingBlankPage: false,
       isSaving: false,
       selectedSubmitter: null,
@@ -941,6 +1004,75 @@ export default {
   },
   methods: {
     toRaw,
+    download () {
+      this.isDownloading = true
+
+      this.baseFetch(`/templates/${this.template.id}/documents`).then(async (response) => {
+        if (response.ok) {
+          const urls = await response.json()
+          const isMobileSafariIos = 'ontouchstart' in window && navigator.maxTouchPoints > 0 && /AppleWebKit/i.test(navigator.userAgent)
+          const isSafariIos = isMobileSafariIos || /iPhone|iPad|iPod/i.test(navigator.userAgent)
+
+          if (isSafariIos && urls.length > 1) {
+            this.downloadSafariIos(urls)
+          } else {
+            this.downloadUrls(urls)
+          }
+        } else {
+          alert(this.t('failed_to_download_files'))
+        }
+      })
+    },
+    downloadUrls (urls) {
+      const fileRequests = urls.map((url) => {
+        return () => {
+          return fetch(url).then(async (resp) => {
+            const blobUrl = URL.createObjectURL(await resp.blob())
+            const link = document.createElement('a')
+
+            link.href = blobUrl
+            link.setAttribute('download', decodeURI(url.split('/').pop()))
+
+            link.click()
+
+            URL.revokeObjectURL(blobUrl)
+          })
+        }
+      })
+
+      fileRequests.reduce(
+        (prevPromise, request) => prevPromise.then(() => request()),
+        Promise.resolve()
+      ).finally(() => {
+        this.isDownloading = false
+      })
+    },
+    downloadSafariIos (urls) {
+      const fileRequests = urls.map((url) => {
+        return fetch(url).then(async (resp) => {
+          const blob = await resp.blob()
+          const blobUrl = URL.createObjectURL(blob.slice(0, blob.size, 'application/octet-stream'))
+          const link = document.createElement('a')
+
+          link.href = blobUrl
+          link.setAttribute('download', decodeURI(url.split('/').pop()))
+
+          return link
+        })
+      })
+
+      Promise.all(fileRequests).then((links) => {
+        links.forEach((link, index) => {
+          setTimeout(() => {
+            link.click()
+
+            URL.revokeObjectURL(link.href)
+          }, index * 50)
+        })
+      }).finally(() => {
+        this.isDownloading = false
+      })
+    },
     onDragover (e) {
       if (this.$refs.dragPlaceholder?.dragPlaceholder) {
         this.$refs.dragPlaceholder.isMask = e.target.id === 'mask'
@@ -1084,6 +1216,11 @@ export default {
         }
       }
 
+      if (field.type === 'strikethrough') {
+        field.readonly = true
+        field.default_value = true
+      }
+
       if (type === 'signature' && [true, false].includes(this.withSignatureId)) {
         field.preferences ||= {}
         field.preferences.with_signature_id = this.withSignatureId
@@ -1351,12 +1488,15 @@ export default {
       } else if (type === 'image') {
         area.w = pageMask.clientWidth / 5 / pageMask.clientWidth
         area.h = (pageMask.clientWidth / 5 / pageMask.clientWidth) * (pageMask.clientWidth / pageMask.clientHeight)
-      } else if (type === 'signature' || type === 'stamp' || type === 'verification') {
+      } else if (type === 'signature' || type === 'stamp' || type === 'verification' || type === 'kba') {
         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 if (type === 'strikethrough') {
+        area.w = pageMask.clientWidth / 5 / pageMask.clientWidth
+        area.h = (pageMask.clientWidth / 70 / pageMask.clientWidth)
       } else {
         area.w = pageMask.clientWidth / 5 / pageMask.clientWidth
         area.h = (pageMask.clientWidth / 35 / pageMask.clientWidth)
@@ -1500,8 +1640,12 @@ export default {
           field.default_value = '{{date}}'
         }
 
-        if (['stamp', 'heading'].includes(field.type)) {
+        if (['stamp', 'heading', 'strikethrough'].includes(field.type)) {
           field.readonly = true
+
+          if (field.type === 'strikethrough') {
+            field.default_value = true
+          }
         }
 
         if (field.type === 'date') {
@@ -1579,7 +1723,7 @@ export default {
             w: area.maskW / 5 / area.maskW,
             h: (area.maskW / 5 / area.maskW) * (area.maskW / area.maskH)
           }
-        } else if (fieldType === 'signature' || fieldType === 'stamp' || fieldType === 'verification') {
+        } else if (fieldType === 'signature' || fieldType === 'stamp' || fieldType === 'verification' || fieldType === 'kba') {
           baseArea = {
             w: area.maskW / 5 / area.maskW,
             h: (area.maskW / 5 / area.maskW) * (area.maskW / area.maskH) / 2
@@ -1589,6 +1733,11 @@ export default {
             w: area.maskW / 10 / area.maskW,
             h: area.maskW / 35 / area.maskW
           }
+        } else if (fieldType === 'strikethrough') {
+          baseArea = {
+            w: area.maskW / 5 / area.maskW,
+            h: area.maskW / 70 / area.maskW
+          }
         } else {
           baseArea = {
             w: area.maskW / 5 / area.maskW,
@@ -1737,8 +1886,9 @@ export default {
     },
     onDocumentReplace (data) {
       const { replaceSchemaItem, schema, documents } = data
+      const { google_drive_file_id, ...cleanedReplaceSchemaItem } = replaceSchemaItem
 
-      this.template.schema.splice(this.template.schema.indexOf(replaceSchemaItem), 1, { ...replaceSchemaItem, ...schema[0] })
+      this.template.schema.splice(this.template.schema.indexOf(replaceSchemaItem), 1, { ...cleanedReplaceSchemaItem, ...schema[0] })
       this.template.documents.push(...documents)
 
       if (data.fields) {

app/javascript/template_builder/conditions_modal.vue

@@ -177,10 +177,13 @@ export default {
     }
   },
   computed: {
+    excludeTypes () {
+      return ['heading', 'strikethrough']
+    },
     fields () {
       if (this.item.submitter_uuid) {
         return this.template.fields.reduce((acc, f) => {
-          if (f !== this.item && (!f.conditions?.length || !f.conditions.find((c) => c.field_uuid === this.item.uuid))) {
+          if (f !== this.item && !this.excludeTypes.includes(f.type) && (!f.conditions?.length || !f.conditions.find((c) => c.field_uuid === this.item.uuid))) {
             acc.push(f)
           }
 

app/javascript/template_builder/contenteditable.vue

@@ -8,8 +8,8 @@
       dir="auto"
       :contenteditable="editable"
       style="min-width: 2px"
-      :class="iconInline ? 'inline' : 'block'"
-      class="peer outline-none focus:block"
+      :class="[iconInline ? 'inline' : 'block', hideIcon ? 'focus:block' : '']"
+      class="peer outline-none"
       @paste.prevent="onPaste"
       @keydown.enter.prevent="blurContenteditable"
       @focus="$emit('focus', $event)"
@@ -18,22 +18,19 @@
       {{ value }}
     </span>
     <span
-      v-if="withRequired"
-      title="Required"
-      class="text-red-500 peer-focus:hidden"
-      @click="focusContenteditable"
+      class="relative inline"
+      :class="{ 'peer-focus:hidden': hideIcon, 'peer-focus:invisible': !hideIcon }"
     >
-      *
+      <IconPencil
+        class="cursor-pointer flex-none opacity-0 group-hover/contenteditable-container:opacity-100 group-hover/contenteditable:opacity-100 align-middle pl-1"
+        :style="iconInline ? {} : { right: -(1.1 * iconWidth) + 'px' }"
+        :title="t('edit')"
+        :class="{ invisible: !editable, 'absolute top-1/2 -translate-y-1/2': !iconInline || floatIcon, 'inline align-bottom': iconInline, 'left-0': floatIcon }"
+        :width="iconWidth + 4"
+        :stroke-width="iconStrokeWidth"
+        @click="[focusContenteditable(), selectOnEditClick && selectContent()]"
+      />
     </span>
-    <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="t('edit')"
-      :class="{ invisible: !editable, 'ml-1': !withRequired, 'absolute': !iconInline, 'inline align-bottom': iconInline }"
-      :width="iconWidth"
-      :stroke-width="iconStrokeWidth"
-      @click="[focusContenteditable(), selectOnEditClick && selectContent()]"
-    />
   </div>
 </template>
 
@@ -62,7 +59,12 @@ export default {
       required: false,
       default: 30
     },
-    withRequired: {
+    hideIcon: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    floatIcon: {
       type: Boolean,
       required: false,
       default: false

app/javascript/template_builder/dropzone.vue

@@ -12,8 +12,8 @@
       :for="inputId"
       :class="{ 'opacity-50': isLoading, 'hover:bg-base-200/50': withHoverClass && !isDragEntering, 'bg-base-200/50 border-base-content/30': isDragEntering }"
     >
-      <div class="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center pointer-events-none">
-        <div class="flex flex-col items-center">
+      <div class="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center">
+        <div class="flex flex-col items-center pointer-events-none">
           <IconInnerShadowTop
             v-if="isLoading"
             class="animate-spin"
@@ -40,6 +40,15 @@
           >
             <span class="font-medium">{{ t('click_to_upload') }}</span> {{ t('or_drag_and_drop_files') }}
           </div>
+          <button
+            v-if="withGoogleDrive"
+            class="flex items-center text-sm mt-2 pointer-events-auto"
+            @click.stop.prevent="$emit('click-google-drive')"
+          >
+            <span>{{ t('or_add_from') }}</span>
+            <IconBrandGoogleDrive class="w-4 h-4 inline-block ml-1" />
+            <span class="ml-1 font-medium hover:underline">Google Drive</span>
+          </button>
         </div>
       </div>
       <form
@@ -62,7 +71,7 @@
 
 <script>
 import Upload from './upload'
-import { IconCloudUpload, IconFilePlus, IconFileSymlink, IconFiles, IconInnerShadowTop } from '@tabler/icons-vue'
+import { IconCloudUpload, IconFilePlus, IconFileSymlink, IconFiles, IconInnerShadowTop, IconBrandGoogleDrive } from '@tabler/icons-vue'
 
 export default {
   name: 'FileDropzone',
@@ -71,7 +80,8 @@ export default {
     IconCloudUpload,
     IconInnerShadowTop,
     IconFileSymlink,
-    IconFiles
+    IconFiles,
+    IconBrandGoogleDrive
   },
   inject: ['baseFetch', 't'],
   props: {
@@ -99,6 +109,11 @@ export default {
       required: false,
       default: true
     },
+    withGoogleDrive: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     title: {
       type: String,
       required: false,
@@ -110,7 +125,7 @@ export default {
       default: 'image/*, application/pdf, application/zip'
     }
   },
-  emits: ['success', 'error', 'loading'],
+  emits: ['success', 'error', 'loading', 'click-google-drive'],
   data () {
     return {
       isLoading: false,

app/javascript/template_builder/field.vue

@@ -14,7 +14,7 @@
         <div class="flex items-center p-1 space-x-1">
           <FieldType
             v-model="field.type"
-            :editable="editable && !defaultField && field.type != 'heading'"
+            :editable="editable && !defaultField"
             :button-width="20"
             :menu-classes="'mt-1.5'"
             :menu-style="{ backgroundColor: dropdownBgColor }"
@@ -97,7 +97,7 @@
             @click-formula="isShowFormulaModal = true"
           />
           <span
-            v-else-if="field.type !== 'heading'"
+            v-else
             class="dropdown dropdown-end field-settings-dropdown"
             @mouseenter="renderDropdown = true"
             @touchstart="renderDropdown = true"
@@ -154,15 +154,22 @@
         v-if="field.options && withOptions && (isExpandOptions || field.options.length < 5)"
         ref="options"
         class="border-t border-base-300 mx-2 pt-2 space-y-1.5"
-        draggable="true"
-        @dragstart.prevent.stop
+        @dragover="onOptionDragover"
+        @drop="reorderOptions"
       >
         <div
           v-for="(option, index) in field.options"
           :key="option.uuid"
           class="flex space-x-1.5 items-center"
+          :data-option-uuid="option.uuid"
         >
-          <span class="text-sm w-3.5">
+          <span
+            class="text-sm w-3.5 cursor-grab select-none"
+            :draggable="editable && !defaultField"
+            @dragstart.stop="onOptionDragstart($event, option)"
+            @dragend.stop="optionDragRef = null"
+            @dragover.prevent.stop="onOptionDragover"
+          >
             {{ index + 1 }}.
           </span>
           <div
@@ -176,6 +183,7 @@
               dir="auto"
               required
               :placeholder="`${t('option')} ${index + 1}`"
+              @keydown.enter="option.value ? addOptionAt(index + 1) : null"
               @blur="save"
             >
             <button
@@ -198,6 +206,7 @@
             :readonly="!editable || defaultField"
             required
             dir="auto"
+            @keydown.enter="option.value ? addOptionAt(index + 1) : null"
             @focus="maybeFocusOnOptionArea(option)"
             @blur="save"
           >
@@ -217,7 +226,7 @@
         <button
           v-else-if="field.options && editable && !defaultField"
           class="field-add-option text-center text-sm w-full pb-1"
-          @click="addOption"
+          @click="addOptionAt(field.options.length)"
         >
           + {{ t('add_option') }}
         </button>
@@ -363,7 +372,8 @@ export default {
       isShowFontModal: false,
       isShowConditionsModal: false,
       isShowDescriptionModal: false,
-      renderDropdown: false
+      renderDropdown: false,
+      optionDragRef: null
     }
   },
   computed: {
@@ -421,7 +431,7 @@ export default {
       } else {
         const typeIndex = fields.filter((f) => f.type === field.type).indexOf(field)
 
-        if (field.type === 'heading') {
+        if (field.type === 'heading' || field.type === 'strikethrough') {
           return `${this.fieldNames[field.type]} ${typeIndex + 1}`
         } else {
           return `${this.fieldLabels[field.type]} ${typeIndex + 1}`
@@ -450,15 +460,17 @@ export default {
     closeDropdown () {
       this.$el.getRootNode().activeElement.blur()
     },
-    addOption () {
+    addOptionAt (index) {
       this.isExpandOptions = true
 
-      this.field.options.push({ value: '', uuid: v4() })
+      const insertAt = index ?? this.field.options.length
+
+      this.field.options.splice(insertAt, 0, { value: '', uuid: v4() })
 
       this.$nextTick(() => {
         const inputs = this.$refs.options.querySelectorAll('input')
 
-        inputs[inputs.length - 1]?.focus()
+        inputs[insertAt]?.focus()
       })
 
       this.save()
@@ -485,10 +497,15 @@ export default {
         this.field.options ||= [{ value: '', uuid: v4() }]
       }
 
-      if (['heading'].includes(this.field.type)) {
+      if (this.field.type === 'heading') {
         this.field.readonly = true
       }
 
+      if (this.field.type === 'strikethrough') {
+        this.field.readonly = true
+        this.field.default_value = true
+      }
+
       (this.field.areas || []).forEach((area) => {
         if (this.field.type === 'cells') {
           area.cell_w = area.w * 2 / Math.floor(area.w / area.h)
@@ -510,6 +527,70 @@ export default {
       this.isNameFocus = false
 
       this.save()
+    },
+    onOptionDragstart (event, option) {
+      this.optionDragRef = option
+
+      const root = this.$el.getRootNode()
+      const hiddenEl = document.createElement('div')
+
+      hiddenEl.style.width = '1px'
+      hiddenEl.style.height = '1px'
+      hiddenEl.style.opacity = '0'
+      hiddenEl.style.position = 'fixed'
+
+      root.querySelector('#docuseal_modal_container')?.appendChild(hiddenEl)
+      event.dataTransfer?.setDragImage(hiddenEl, 0, 0)
+
+      setTimeout(() => { hiddenEl.remove() }, 1000)
+
+      event.dataTransfer.effectAllowed = 'move'
+    },
+    onOptionDragover (e) {
+      if (!this.optionDragRef) return
+
+      e.preventDefault()
+      e.stopPropagation()
+
+      const targetRow = e.target.closest('[data-option-uuid]')
+
+      if (!targetRow) return
+
+      const dragRow = this.$refs.options?.querySelector(`[data-option-uuid="${this.optionDragRef.uuid}"]`)
+
+      if (!dragRow) return
+      if (targetRow === dragRow) return
+
+      const rows = Array.from(this.$refs.options.querySelectorAll('[data-option-uuid]'))
+
+      const currentIndex = rows.indexOf(dragRow)
+      const targetIndex = rows.indexOf(targetRow)
+
+      if (currentIndex < targetIndex) {
+        targetRow.after(dragRow)
+      } else {
+        targetRow.before(dragRow)
+      }
+    },
+    reorderOptions (e) {
+      if (!this.optionDragRef) return
+
+      e.preventDefault()
+      e.stopPropagation()
+
+      const rows = Array.from(this.$refs.options.querySelectorAll('[data-option-uuid]'))
+
+      const newOrder = rows
+        .map((el) => this.field.options.find((opt) => opt.uuid === el.dataset.optionUuid))
+        .filter(Boolean)
+
+      if (newOrder.length === this.field.options.length) {
+        this.field.options.splice(0, this.field.options.length, ...newOrder)
+
+        this.save()
+      }
+
+      this.optionDragRef = null
     }
   }
 }

app/javascript/template_builder/field_settings.vue

@@ -380,7 +380,7 @@
     </label>
   </li>
   <li
-    v-if="withRequired && field.type !== 'phone' && field.type !== 'stamp' && field.type !== 'verification'"
+    v-if="withRequired && field.type !== 'phone' && field.type !== 'stamp' && field.type !== 'verification' && field.type !== 'strikethrough' && field.type !== 'heading'"
     @click.stop
   >
     <label class="cursor-pointer py-1.5">
@@ -470,7 +470,7 @@
     v-if="field.type != 'stamp'"
     class="pb-0.5 mt-0.5"
   >
-  <li v-if="['text', 'number', 'date', 'select'].includes(field.type)">
+  <li v-if="['text', 'number', 'date', 'select', 'heading'].includes(field.type)">
     <label
       class="label-text cursor-pointer text-center w-full flex items-center"
       @click="$emit('click-font')"
@@ -484,7 +484,7 @@
     </label>
   </li>
   <li
-    v-if="field.type != 'stamp'"
+    v-if="field.type != 'stamp' && field.type != 'heading' && field.type != 'strikethrough'"
   >
     <label
       class="label-text cursor-pointer text-center w-full flex items-center"
@@ -499,7 +499,7 @@
     </label>
   </li>
   <li
-    v-if="field.type != 'stamp'"
+    v-if="field.type != 'stamp' && field.type != 'heading'"
   >
     <label
       class="label-text cursor-pointer text-center w-full flex items-center"

app/javascript/template_builder/field_submitter.vue

@@ -52,7 +52,7 @@
             >
               <span class="py-1 flex items-center">
                 <span
-                  class="rounded-full w-3 h-3 ml-1 mr-3"
+                  class="rounded-full w-3 h-3 ml-1 mr-3 flex-shrink-0"
                   :class="colors[index % colors.length]"
                 />
                 <span>
@@ -100,7 +100,7 @@
       class="cursor-pointer text-base-100 flex h-full items-center justify-center"
     >
       <button
-        class="mx-1 w-3 h-3 rounded-full"
+        class="mx-1 w-3 h-3 rounded-full flex-shrink-0"
         :class="colors[submitters.indexOf(selectedSubmitter) % colors.length]"
       />
     </label>
@@ -108,11 +108,11 @@
       v-else
       ref="label"
       tabindex="0"
-      class="group cursor-pointer group/contenteditable-container rounded-md p-2 border border-base-300 hover:border-content w-full flex justify-between"
+      class="group cursor-pointer group/contenteditable-container rounded-md p-2 border border-base-300 hover:border-content w-full flex justify-between items-center"
     >
       <div class="flex items-center space-x-2">
         <span
-          class="w-3 h-3 rounded-full"
+          class="w-3 h-3 rounded-full flex-shrink-0"
           :class="colors[submitters.indexOf(selectedSubmitter) % colors.length]"
         />
         <Contenteditable
@@ -125,7 +125,7 @@
           @update:model-value="$emit('name-change', selectedSubmitter)"
         />
       </div>
-      <span class="flex items-center transition-all duration-75 group-hover:border border-base-content/20 border-dashed w-6 h-6 flex justify-center items-center rounded">
+      <span class="flex items-center transition-all duration-75 group-hover:border border-base-content/20 border-dashed w-6 h-6 justify-center rounded flex-shrink-0">
         <component
           :is="editable ? 'IconPlus' : 'IconChevronDown'"
           width="18"
@@ -153,7 +153,7 @@
         >
           <span class="py-1 flex items-center">
             <span
-              class="rounded-full w-3 h-3 ml-1 mr-3"
+              class="rounded-full w-3 h-3 ml-1 mr-3 flex-shrink-0"
               :class="colors[index % colors.length]"
             />
             <span>
@@ -164,7 +164,7 @@
             v-if="!compact && submitters.length > 1 && editable"
             class="flex"
           >
-            <div class="flex-col pr-1 hidden group-hover:flex -mt-1 h-0">
+            <div class="flex-col pr-1 flex invisible group-hover:visible -mt-1 h-0">
               <button
                 :title="t('up')"
                 class="relative w-2"
@@ -184,7 +184,7 @@
             </div>
             <button
               v-if="!compact && submitters.length > 1 && editable"
-              class="hidden group-hover:block px-2"
+              class="invisible group-hover:visible px-2"
               @click.prevent.stop="remove(submitter)"
             >
               <IconTrashX :width="18" />

app/javascript/template_builder/field_type.vue

@@ -30,7 +30,7 @@
         v-for="(icon, type) in fieldIconsSorted"
         :key="type"
       >
-        <li v-if="fieldTypes.includes(type) || ((withPhone || type != 'phone') && (withPayment || type != 'payment') && (withVerification || type != 'verification'))">
+        <li v-if="fieldTypes.includes(type) || ((withPhone || type != 'phone') && (withPayment || type != 'payment') && (withVerification || type != 'verification') && (withKba || type != 'kba'))">
           <a
             href="#"
             class="text-sm py-1 px-2"
@@ -51,11 +51,11 @@
 </template>
 
 <script>
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1, IconHeading, IconId, IconCalendarCheck } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1, IconHeading, IconId, IconCalendarCheck, IconStrikethrough, IconUserScan } from '@tabler/icons-vue'
 
 export default {
   name: 'FiledTypeDropdown',
-  inject: ['withPhone', 'withPayment', 'withVerification', 't', 'fieldTypes'],
+  inject: ['withPhone', 'withPayment', 'withVerification', 'withKba', 't', 'fieldTypes'],
   props: {
     modelValue: {
       type: String,
@@ -97,6 +97,7 @@ export default {
     fieldNames () {
       return {
         heading: this.t('heading'),
+        strikethrough: this.t('strikeout'),
         text: this.t('text'),
         signature: this.t('signature'),
         initials: this.t('initials'),
@@ -113,7 +114,8 @@ export default {
         stamp: this.t('stamp'),
         payment: this.t('payment'),
         phone: this.t('phone'),
-        verification: this.t('verify_id')
+        verification: this.t('verify_id'),
+        kba: this.t('kba')
       }
     },
     fieldLabels () {
@@ -133,12 +135,14 @@ export default {
         stamp: this.t('stamp_field'),
         payment: this.t('payment_field'),
         phone: this.t('phone_field'),
-        verification: this.t('verify_id')
+        verification: this.t('verify_id'),
+        kba: this.t('kba')
       }
     },
     fieldIcons () {
       return {
         heading: IconHeading,
+        strikethrough: IconStrikethrough,
         text: IconTextSize,
         signature: IconWritingSign,
         initials: IconLetterCaseUpper,
@@ -155,9 +159,13 @@ export default {
         stamp: IconRubberStamp,
         payment: IconCreditCard,
         phone: IconPhoneCheck,
-        verification: IconId
+        verification: IconId,
+        kba: IconUserScan,
       }
     },
+    skipTypes () {
+      return ['heading', 'datenow', 'strikethrough']
+    },
     fieldIconsSorted () {
       if (this.fieldTypes.length) {
         return this.fieldTypes.reduce((acc, type) => {
@@ -166,7 +174,7 @@ export default {
           return acc
         }, {})
       } else {
-        return Object.fromEntries(Object.entries(this.fieldIcons).filter(([key]) => key !== 'heading' && key !== 'datenow'))
+        return Object.fromEntries(Object.entries(this.fieldIcons).filter(([key]) => !this.skipTypes.includes(key)))
       }
     }
   },

app/javascript/template_builder/fields.vue

@@ -17,7 +17,7 @@
     ref="fields"
     class="fields mb-1 mt-2"
     @dragover.prevent="onFieldDragover"
-    @drop="reorderFields"
+    @drop="fieldsDragFieldRef.value ? reorderFields() : null"
   >
     <Field
       v-for="field in submitterFields"
@@ -114,7 +114,7 @@
       :key="type"
     >
       <button
-        v-if="fieldTypes.includes(type) || ((withPhone || type != 'phone') && (withPayment || type != 'payment') && (withVerification || type != 'verification'))"
+        v-if="fieldTypes.includes(type) || ((withPhone || type != 'phone') && (withPayment || type != 'payment') && (withVerification || type != 'verification') && (withKba || type != 'kba'))"
         :id="`${type}_type_field_button`"
         draggable="true"
         class="field-type-button group flex items-center justify-center border border-dashed w-full rounded relative fields-grid-item"
@@ -122,7 +122,7 @@
         :class="drawFieldType === type ? 'border-base-content/40' : 'border-base-300 hover:border-base-content/20'"
         @dragstart="onDragstart($event, { type: type })"
         @dragend="$emit('drag-end')"
-        @click="['file', 'payment', 'verification'].includes(type) ? $emit('add-field', type) : $emit('set-draw-type', type)"
+        @click="['file', 'payment', 'verification', 'kba'].includes(type) ? $emit('add-field', type) : $emit('set-draw-type', type)"
       >
         <div
           class="flex items-console transition-all cursor-grab h-full absolute left-0"
@@ -208,6 +208,43 @@
       </li>
     </ul>
   </div>
+  <div
+    v-if="withFieldsDetection && editable && fields.length < 2"
+    class="my-2"
+  >
+    <button
+      class="btn w-full"
+      :class="{ 'bg-base-300': fieldPagesLoaded !== null }"
+      @click="fieldPagesLoaded !== null ? null : detectFields()"
+    >
+      <template v-if="fieldPagesLoaded !== null">
+        <IconInnerShadowTop
+          width="22"
+          class="animate-spin"
+        />
+        <span
+          v-if="analyzingProgress"
+          class="hidden md:inline"
+        >
+          {{ Math.round(analyzingProgress * 100) }}% {{ t('analyzing_') }}
+        </span>
+        <span
+          v-else
+          class="hidden md:inline"
+        >
+          {{ fieldPagesLoaded }} / {{ numberOfPages }} {{ t('processing_') }}
+        </span>
+      </template>
+      <template v-else>
+        <IconSparkles width="22" />
+        <span
+          class="hidden md:inline"
+        >
+          {{ t('autodetect_fields') }}
+        </span>
+      </template>
+    </button>
+  </div>
   <div
     v-show="fields.length < 4 && editable && withHelp && showTourStartForm"
     class="rounded py-2 px-4 w-full border border-dashed border-base-300"
@@ -231,7 +268,7 @@
 import Field from './field'
 import FieldType from './field_type'
 import FieldSubmitter from './field_submitter'
-import { IconLock, IconCirclePlus } from '@tabler/icons-vue'
+import { IconLock, IconCirclePlus, IconInnerShadowTop, IconSparkles } from '@tabler/icons-vue'
 import IconDrag from './icon_drag'
 
 export default {
@@ -240,11 +277,13 @@ export default {
     Field,
     FieldType,
     IconCirclePlus,
+    IconSparkles,
+    IconInnerShadowTop,
     FieldSubmitter,
     IconDrag,
     IconLock
   },
-  inject: ['save', 'backgroundColor', 'withPhone', 'withVerification', 'withPayment', 't', 'fieldsDragFieldRef'],
+  inject: ['save', 'backgroundColor', 'withPhone', 'withVerification', 'withKba', 'withPayment', 't', 'fieldsDragFieldRef', 'baseFetch'],
   props: {
     fields: {
       type: Array,
@@ -255,6 +294,11 @@ export default {
       required: false,
       default: null
     },
+    withFieldsDetection: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     withSignatureId: {
       type: Boolean,
       required: false,
@@ -328,15 +372,22 @@ export default {
       default: false
     }
   },
-  emits: ['add-field', 'set-draw', 'set-draw-type', 'set-drag', 'drag-end', 'scroll-to-area', 'change-submitter', 'set-drag-placeholder'],
+  emits: ['add-field', 'set-draw', 'set-draw-type', 'set-drag', 'drag-end', 'scroll-to-area', 'change-submitter', 'set-drag-placeholder', 'select-submitter'],
   data () {
     return {
+      fieldPagesLoaded: null,
+      analyzingProgress: 0,
       defaultFieldsSearch: ''
     }
   },
   computed: {
     fieldNames: FieldType.computed.fieldNames,
     fieldIcons: FieldType.computed.fieldIcons,
+    numberOfPages () {
+      return this.template.documents.reduce((acc, doc) => {
+        return acc + doc.metadata?.pdf?.number_of_pages || doc.preview_images.length
+      }, 0)
+    },
     isShowFieldSearch () {
       if (this.withFieldsSearch === false) {
         return false
@@ -351,6 +402,9 @@ export default {
         return acc
       }, {})
     },
+    skipTypes () {
+      return ['heading', 'datenow', 'strikethrough']
+    },
     fieldIconsSorted () {
       if (this.fieldTypes.length) {
         return this.fieldTypes.reduce((acc, type) => {
@@ -359,7 +413,7 @@ export default {
           return acc
         }, {})
       } else {
-        return Object.fromEntries(Object.entries(this.fieldIcons).filter(([key]) => key !== 'heading' && key !== 'datenow'))
+        return Object.fromEntries(Object.entries(this.fieldIcons).filter(([key]) => !this.skipTypes.includes(key)))
       }
     },
     submitterFields () {
@@ -386,6 +440,84 @@ export default {
 
       this.$emit('set-drag', field)
     },
+    detectFields () {
+      const fields = []
+
+      this.fieldPagesLoaded = 0
+
+      this.baseFetch(`/templates/${this.template.id}/detect_fields`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      }).then(async (response) => {
+        const reader = response.body.getReader()
+        const decoder = new TextDecoder('utf-8')
+        let buffer = ''
+
+        while (true) {
+          const { value, done } = await reader.read()
+
+          buffer += decoder.decode(value, { stream: true })
+
+          const lines = buffer.split('\n\n')
+
+          buffer = lines.pop()
+
+          for (const line of lines) {
+            if (line.startsWith('data: ')) {
+              const jsonStr = line.replace(/^data: /, '')
+              const data = JSON.parse(jsonStr)
+
+              if (data.error) {
+                if ((data.fields || fields).length) {
+                  this.template.fields = data.fields || fields
+
+                  this.save()
+                } else {
+                  alert(data.error)
+                }
+
+                break
+              } else if (data.analyzing) {
+                this.analyzingProgress = data.progress
+              } else if (data.completed) {
+                this.fieldPagesLoaded = null
+
+                if (data.submitters) {
+                  this.template.submitters = data.submitters
+                  this.$emit('select-submitter', this.template.submitters[0])
+                }
+
+                this.template.fields = data.fields || fields
+
+                this.save()
+
+                break
+              } else if (data.fields) {
+                data.fields.forEach((f) => {
+                  if (!f.submitter_uuid) {
+                    f.submitter_uuid = this.template.submitters[0].uuid
+                  }
+                })
+
+                this.fieldPagesLoaded += 1
+
+                fields.push(...data.fields)
+              }
+            }
+          }
+
+          if (done) break
+        }
+      }).catch(error => {
+        console.error('Error in streaming message: ', error)
+      }).finally(() => {
+        this.fieldPagesLoaded = null
+        this.analyzingProgress = null
+        this.isFieldsLoading = false
+      })
+    },
     setDragPlaceholder (event) {
       this.$emit('set-drag-placeholder', {
         offsetX: event.offsetX,
@@ -447,7 +579,7 @@ export default {
     removeSubmitter (submitter) {
       [...this.fields].forEach((field) => {
         if (field.submitter_uuid === submitter.uuid) {
-          this.removeField(field)
+          this.removeField(field, false)
         }
       })
 
@@ -459,7 +591,7 @@ export default {
 
       this.save()
     },
-    removeField (field) {
+    removeField (field, save = true) {
       this.fields.splice(this.fields.indexOf(field), 1)
 
       this.fields.forEach((f) => {
@@ -478,7 +610,9 @@ export default {
         })
       })
 
-      this.save()
+      if (save) {
+        this.save()
+      }
     }
   }
 }

app/javascript/template_builder/google_drive_document_settings.vue

@@ -0,0 +1,105 @@
+<template>
+  <div
+    class="dropdown"
+    :class="{ 'dropdown-open': isLoading }"
+  >
+    <label tabindex="0">
+      <IconBrandGoogleDrive
+        width="19"
+        class="inline-block mr-1 cursor-pointer"
+      />
+    </label>
+    <ul
+      tabindex="0"
+      :style="{ backgroundColor }"
+      class="dropdown-content z-[1] shadow menu rounded-box"
+    >
+      <li>
+        <a
+          :href="`https://drive.google.com/file/d/${googleDriveFileId}/view?usp=sharing`"
+          data-turbo="false"
+          target="_blank"
+          class="flex items-center"
+        >
+          <IconExternalLink class="w-4 h-4 flex-shrink-0" />
+          <span>{{ t('view') }}</span>
+        </a>
+      </li>
+      <li>
+        <button
+          :form="`sync_form_${inputId}`"
+          type="submit"
+          :disabled="isLoading"
+        >
+          <IconRefresh
+            class="w-4 h-4 flex-shrink-0"
+            :class="{ 'animate-spin': isLoading }"
+          />
+          <span>{{ message }}</span>
+        </button>
+      </li>
+    </ul>
+    <form
+      :id="`sync_form_${inputId}`"
+      ref="form"
+      class="hidden"
+      @submit.prevent="upload({ path: uploadUrl })"
+    >
+      <input
+        :id="inputId"
+        ref="input"
+        :value="googleDriveFileId"
+        name="google_drive_file_ids[]"
+      >
+    </form>
+  </div>
+</template>
+
+<script>
+import Upload from './upload'
+import { IconRefresh, IconBrandGoogleDrive, IconExternalLink } from '@tabler/icons-vue'
+
+export default {
+  name: 'GoogleDriveDocumentSettings',
+  components: {
+    IconRefresh,
+    IconBrandGoogleDrive,
+    IconExternalLink
+  },
+  inject: ['baseFetch', 't', 'backgroundColor'],
+  props: {
+    templateId: {
+      type: [Number, String],
+      required: true
+    },
+    googleDriveFileId: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['success'],
+  data () {
+    return {
+      isLoading: false
+    }
+  },
+  computed: {
+    inputId () {
+      return 'el' + Math.random().toString(32).split('.')[1]
+    },
+    uploadUrl () {
+      return `/templates/${this.templateId}/google_drive_documents`
+    },
+    message () {
+      if (this.isLoading) {
+        return this.t('syncing')
+      } else {
+        return this.t('sync')
+      }
+    }
+  },
+  methods: {
+    upload: Upload.methods.upload
+  }
+}
+</script>

app/javascript/template_builder/i18n.js

@@ -1,4 +1,14 @@
 const en = {
+  kba: 'KBA',
+  analyzing_: 'Analyzing...',
+  download: 'Download',
+  downloading_: 'Downloading...',
+  view: 'View',
+  autodetect_fields: 'Autodetect fields',
+  payment_link: 'Payment link',
+  strikeout: 'Strikeout',
+  draw_strikethrough_the_document: 'Draw strikethrough the document',
+  quantity: 'Quantity',
   prefillable: 'Prefillable',
   signature_id: 'Signature ID',
   error_message: 'Error message',
@@ -172,10 +182,23 @@ const en = {
   and: 'and',
   or: 'or',
   start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: 'Start a quick tour to learn how to create an send your first document',
-  start_tour: 'Start Tour'
+  start_tour: 'Start Tour',
+  or_add_from: 'Or add from',
+  sync: 'Sync',
+  syncing: 'Syncing...'
 }
 
 const es = {
+  kba: 'KBA',
+  autodetect_fields: 'Autodetectar campos',
+  analyzing_: 'Analizando...',
+  download: 'Descargar',
+  downloading_: 'Descargando...',
+  view: 'Vista',
+  payment_link: 'Enlace de pago',
+  strikeout: 'Tachar',
+  draw_strikethrough_the_document: 'Dibujar una línea de tachado en el documento',
+  quantity: 'Cantidad',
   prefillable: 'Rellenable',
   signature_id: 'ID de Firma',
   error_message: 'Mensaje de error',
@@ -349,10 +372,23 @@ const es = {
   and: 'y',
   or: 'o',
   start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: 'Inicia una guía rápida para aprender a crear y enviar tu primer documento.',
-  start_tour: 'Iniciar guía'
+  start_tour: 'Iniciar guía',
+  or_add_from: 'O agregar desde',
+  sync: 'Sincronizar',
+  syncing: 'Sincronizando...'
 }
 
 const it = {
+  kba: 'KBA',
+  autodetect_fields: 'Rileva campi',
+  analyzing_: 'Analisi...',
+  download: 'Scarica',
+  downloading_: 'Download in corso...',
+  view: 'Vista',
+  payment_link: 'Link di pagamento',
+  strikeout: 'Barrato',
+  draw_strikethrough_the_document: 'Disegna una linea barrata sul documento',
+  quantity: 'Quantità',
   prefillable: 'Precompilabile',
   signature_id: 'ID firma',
   error_message: 'Messaggio di errore',
@@ -526,10 +562,23 @@ const it = {
   and: 'e',
   or: 'o',
   start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: 'Inizia un tour rapido per imparare a creare e inviare il tuo primo documento.',
-  start_tour: 'Inizia il tour'
+  start_tour: 'Inizia il tour',
+  or_add_from: 'O aggiungi da',
+  sync: 'Sincronizza',
+  syncing: 'Sincronizzazione...'
 }
 
 const pt = {
+  kba: 'KBA',
+  autodetect_fields: 'Detectar campos',
+  analyzing_: 'Analisando...',
+  download: 'Baixar',
+  downloading_: 'Baixando...',
+  view: 'Visualizar',
+  payment_link: 'Link de pagamento',
+  strikeout: 'Tachado',
+  draw_strikethrough_the_document: 'Desenhe uma linha de tachado no documento',
+  quantity: 'Quantidade',
   prefillable: 'Pré-preenchível',
   signature_id: 'ID da Assinatura',
   error_message: 'Mensagem de erro',
@@ -703,90 +752,109 @@ const pt = {
   and: 'e',
   or: 'ou',
   start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: 'Comece um tour rápido para aprender a criar e enviar seu primeiro documento.',
-  start_tour: 'Iniciar tour'
+  start_tour: 'Iniciar tour',
+  or_add_from: 'Ou adicionar de',
+  sync: 'Sincronizar',
+  syncing: 'Sincronizando...'
 }
 
 const fr = {
-  prefillable: 'Pré-remplissable',
-  signature_id: 'ID de signature',
-  error_message: 'Message d\'erreur',
+  kba: 'KBA',
+  autodetect_fields: 'Détecter les champs',
+  analyzing_: 'Analyse...',
+  download: 'Télécharger',
+  downloading_: 'Téléchargement...',
+  view: 'Voir',
+  payment_link: 'Lien de paiement',
+  strikeout: 'Rature',
+  draw_strikethrough_the_document: 'Tracer une rature sur le document',
+  quantity: 'Quantité',
+  prefillable: 'Préremplissable',
+  signature_id: 'Identifiant de signature',
+  error_message: "Message d'erreur",
   length: 'Longueur',
   min: 'Min',
   max: 'Max',
-  date_signed: 'Date actuelle',
   font: 'Police',
   party: 'Partie',
+  date_signed: 'Date de signature',
   method: 'Méthode',
   reorder_fields: 'Réorganiser les champs',
   verify_id: "Vérifier l'ID",
-  obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more: 'Obtenez une signature électronique qualifiée (QeS) avec le fournisseur de confiance. Cliquez pour en savoir plus.',
+  obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more: 'Obtenez une signature électronique qualifiée (QeS) auprès du fournisseur de confiance. Cliquez pour en savoir plus.',
+  editable: 'Modifiable',
   recurrent: 'Récurrent',
   one_off: 'Ponctuel',
-  editable: 'Éditable',
   search_field: 'Champ de recherche',
-  field_not_found: 'Champ non trouvé',
+  field_not_found: 'Champ introuvable',
   clear: 'Effacer',
-  type_value: 'Tapez la valeur',
-  add_all_required_fields_to_continue: 'Ajoutez tous les champs obligatoires pour continuer',
-  uploaded_pdf_contains_form_fields_keep_or_remove_them: 'Le PDF téléchargé contient des champs. Les conserver ou les supprimer?',
-  keep: 'Conserver',
   align: 'Aligner',
+  add_all_required_fields_to_continue: 'Ajoutez tous les champs obligatoires pour continuer',
+  uploaded_pdf_contains_form_fields_keep_or_remove_them: 'Le PDF téléversé contient des champs de formulaire. Les conserver ou les supprimer ?',
+  keep: 'Conserver',
   left: 'Gauche',
-  heading: 'En-tête',
+  heading: 'Titre',
   validation: 'Validation',
   add_blank_page: 'Ajouter une page blanche',
   right: 'Droite',
-  add_condition: 'Ajouter une condition',
   center: 'Centre',
-  with_logo: 'Avec logo',
   description: 'Description',
-  display_title: "Titre d'affichage",
-  unchecked: 'Non coché',
+  display_title: 'Afficher le titre',
+  with_logo: 'Avec logo',
+  unchecked: 'Décoché',
   price: 'Prix',
+  type_value: 'Saisir une valeur',
   equal: 'Égal',
-  not_equal: 'Non égal',
+  not_equal: 'Différent',
   contains: 'Contient',
-  signing_date: 'Date de signature',
   does_not_contain: 'Ne contient pas',
   not_empty: 'Non vide',
   empty: 'Vide',
   select_field_: 'Sélectionner un champ...',
   select_value_: 'Sélectionner une valeur...',
   remove_condition: 'Supprimer la condition',
-  condition: 'Condition',
-  formula: 'Formule',
-  edit: 'Éditer',
+  add_condition: 'Ajouter une condition',
+  are_you_sure_: 'Êtes-vous sûr ?',
+  sign_yourself: 'Signer vous-même',
+  set_signing_date: 'Définir la date de signature',
+  signing_date: 'Date de signature',
+  send: 'Envoyer',
+  remove: 'Supprimer',
+  edit: 'Modifier',
   settings: 'Paramètres',
   up: 'Haut',
   down: 'Bas',
-  set_signing_date: 'Définir la date de signature',
-  are_you_sure_: 'Êtes-vous sûr?',
-  sign_yourself: 'Signez-vous',
   checked: 'Coché',
-  send: 'Envoyer',
-  remove: 'Supprimer',
   save: 'Enregistrer',
   cancel: 'Annuler',
-  draw_field_on_the_document: 'Dessiner un champ sur le document',
-  click_to_upload: 'Cliquez pour télécharger',
+  any: "N'importe lequel",
+  drawn: 'Dessiné',
+  drawn_or_typed: 'Dessiné ou tapé',
+  drawn_or_upload: 'Dessiné ou téléversé',
+  upload: 'Téléverser',
+  formula: 'Formule',
+  typed: 'Tapé',
+  draw_field_on_the_document: 'Dessinez un champ sur le document',
+  click_to_upload: 'Cliquez pour téléverser',
   or_drag_and_drop_files: 'ou faites glisser-déposer des fichiers',
-  uploading: 'Téléchargement en cours',
-  processing_: 'Traitement en cours...',
-  add_pdf_documents_or_images: 'Ajoutez des documents PDF ou des images',
-  add_documents_or_images: 'Ajoutez des documents ou des images',
-  add_a_new_document: 'Adicionar um novo documento',
+  uploading: 'Téléversement en cours',
+  processing_: 'Traitement...',
+  add_pdf_documents_or_images: 'Ajouter des documents PDF ou des images',
+  add_documents_or_images: 'Ajouter des documents ou des images',
+  add_a_new_document: 'Ajouter un nouveau document',
   replace_existing_document: 'Remplacer le document existant',
-  clone_and_replace_documents: 'Cloner et remplacer les documents',
-  required: 'Requis',
+  clone_and_replace_documents: 'Cloner et remplacer des documents',
+  required: 'Obligatoire',
   default_value: 'Valeur par défaut',
   format: 'Format',
   read_only: 'Lecture seule',
   page: 'Page',
-  draw_new_area: 'Dessiner une nouvelle zone',
+  draw_new_area: 'Dessiner une zone',
   copy_to_all_pages: 'Copier sur toutes les pages',
   add_option: 'Ajouter une option',
   option: 'Option',
   options: 'Options',
+  condition: 'Condition',
   first_party: 'Première partie',
   second_party: 'Deuxième partie',
   third_party: 'Troisième partie',
@@ -797,27 +865,27 @@ const fr = {
   eighth_party: 'Huitième partie',
   ninth_party: 'Neuvième partie',
   tenth_party: 'Dixième partie',
-  eleventh_party: 'Onzième Parti',
-  twelfth_party: 'Douzième Parti',
-  thirteenth_party: 'Treizième Parti',
-  fourteenth_party: 'Quatorzième Parti',
-  fifteenth_party: 'Quinzième Parti',
-  sixteenth_party: 'Seizième Parti',
-  seventeenth_party: 'Dix-septième Parti',
-  eighteenth_party: 'Dix-huitième Parti',
-  nineteenth_party: 'Dix-Neuvième Fête',
-  twentieth_party: 'Vingtième Fête',
+  eleventh_party: 'Onzième partie',
+  twelfth_party: 'Douzième partie',
+  thirteenth_party: 'Treizième partie',
+  fourteenth_party: 'Quatorzième partie',
+  fifteenth_party: 'Quinzième partie',
+  sixteenth_party: 'Seizième partie',
+  seventeenth_party: 'Dix-septième partie',
+  eighteenth_party: 'Dix-huitième partie',
+  nineteenth_party: 'Dix-neuvième partie',
+  twentieth_party: 'Vingtième partie',
   draw: 'Dessiner',
   add: 'Ajouter',
-  or_add_field_without_drawing: 'Ou ajoutez un champ sans dessiner',
+  or_add_field_without_drawing: 'Ou ajouter un champ sans le dessiner',
   text: 'Texte',
+  number: 'Nombre',
   signature: 'Signature',
   initials: 'Initiales',
   date: 'Date',
-  number: 'Numéro',
   image: 'Image',
   file: 'Fichier',
-  select: 'Choisir',
+  select: 'Sélection',
   checkbox: 'Coche',
   multiple: 'Multiple',
   radio: 'Radio',
@@ -825,40 +893,34 @@ const fr = {
   stamp: 'Tampon',
   payment: 'Paiement',
   phone: 'Téléphone',
-  text_field: 'Champ de Texte',
-  signature_field: 'Champ de Signature',
-  initials_field: "Champ d'Initiales",
-  date_field: 'Champ de Date',
-  number_field: 'Champ de Numéro',
-  image_field: "Champ d'Image",
-  file_field: 'Champ de Fichier',
-  select_field: 'Champ de Choix',
-  checkbox_field: 'Champ de Coche',
-  multiple_field: 'Champ de Choix Multiple',
-  radio_field: 'Champ de Groupe Radio',
-  cells_field: 'Champ de Cellules',
-  stamp_field: 'Champ de Tampon',
-  payment_field: 'Champ de Paiement',
-  phone_field: 'Champ de Téléphone',
-  draw_a_text_field_on_the_page_with_a_mouse: 'Dessinez un champ texte sur la page avec une souris',
-  drag_and_drop_any_other_field_type_on_the_page: 'Glissez et déposez tout autre type de champ sur la page',
+  text_field: 'Champ de texte',
+  signature_field: 'Champ de signature',
+  initials_field: "Champ d'initiales",
+  date_field: 'Champ de date',
+  number_field: 'Champ de numéro',
+  image_field: "Champ d'image",
+  file_field: 'Champ de fichier',
+  select_field: 'Champ de choix',
+  checkbox_field: 'Champ de coche',
+  multiple_field: 'Champ de choix multiple',
+  radio_field: 'Champ de groupe radio',
+  cells_field: 'Champ de cellules',
+  stamp_field: 'Champ de tampon',
+  payment_field: 'Champ de paiement',
+  phone_field: 'Champ de téléphone',
+  draw_a_text_field_on_the_page_with_a_mouse: 'Dessinez un champ de texte sur la page avec la souris',
+  drag_and_drop_any_other_field_type_on_the_page: 'Glissez-déposez tout autre type de champ sur la page',
   click_on_the_field_type_above_to_start_drawing_it: 'Cliquez sur le type de champ ci-dessus pour commencer à le dessiner',
-  please_draw_fields_to_prepare_the_document: 'Veuillez dessiner les champs pour préparer le document.',
+  please_draw_fields_to_prepare_the_document: 'Veuillez dessiner des champs pour préparer le document.',
   only_pdf_and_images_are_supported: 'Seuls les PDF et les images sont pris en charge.',
-  unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'Débloquez le champ de numéro de téléphone vérifié par SMS avec un plan payant. Utilisez un champ texte pour les numéros de téléphone sans vérification.',
-  available_only_in_pro: 'Disponible uniquement en Pro',
-  failed_to_download_files: 'Échec du téléchargement des fichiers',
-  please_add_fields_for_the_submitter_name_or_remove_the_submitter_name_if_not_needed: 'Veuillez ajouter des champs pour {submitter_name} ou retirer {submitter_name} si ce n\'est pas nécessaire.',
+  unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'Débloquez le champ de numéro de téléphone vérifié par SMS avec un forfait payant. Utilisez un champ texte pour les numéros sans vérification.',
+  available_only_in_pro: 'Disponible uniquement dans la version Pro',
+  failed_to_download_files: 'Impossible de télécharger les fichiers',
+  please_add_fields_for_the_submitter_name_or_remove_the_submitter_name_if_not_needed: "Veuillez ajouter des champs pour {submitter_name}. Ou supprimez {submitter_name} si ce n'est pas nécessaire.",
   draw_field: 'Dessiner le champ {field}',
   replace: 'Remplacer',
-  uploading_: 'Téléchargement en cours...',
-  add_document: 'Télécharger',
-  any: 'Tout',
-  drawn: 'Dessiné',
-  drawn_or_typed: 'Dessiné ou Tapé',
-  drawn_or_upload: 'Dessiné ou Téléchargé',
-  upload: 'Téléverser',
-  typed: 'Tapé',
+  uploading_: 'Téléversement...',
+  add_document: 'Téléverser',
   none: 'Aucun',
   ssn: 'SSN',
   ein: 'EIN',
@@ -869,86 +931,104 @@ const fr = {
   numbers_only: 'Chiffres uniquement',
   letters_only: 'Lettres uniquement',
   regexp_validation: 'Validation par expression régulière',
-  enter_pdf_password: 'Entrez le mot de passe PDF',
+  enter_pdf_password: 'Saisir le mot de passe du PDF',
   wrong_password: 'Mot de passe incorrect',
   currency: 'Devise',
   save_and_preview: 'Enregistrer et prévisualiser',
   preferences: 'Préférences',
-  available_in_pro: 'Disponible en version Pro',
+  available_in_pro: 'Disponible dans la version Pro',
   some_fields_are_missing_in_the_formula: 'Certains champs manquent dans la formule.',
   learn_more: 'En savoir plus',
   and: 'et',
   or: 'ou',
-  start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: 'Lancez une visite rapide pour apprendre à créer et envoyer votre premier document.',
-  start_tour: 'Démarrer'
+  start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: 'Commencez une visite rapide pour apprendre à créer et à envoyer votre premier document',
+  start_tour: 'Démarrer',
+  or_add_from: 'Ou ajouter depuis',
+  sync: 'Synchroniser',
+  syncing: 'Synchronisation...'
 }
 
 const de = {
+  kba: 'KBA',
+  autodetect_fields: 'Felder erkennen',
+  analyzing_: 'Analysiere...',
+  download: 'Download',
+  downloading_: 'Download...',
+  view: 'Anzeigen',
+  payment_link: 'Zahlungslink',
+  strikeout: 'Durchstreichen',
+  draw_strikethrough_the_document: 'Durchstreichung im Dokument zeichnen',
+  quantity: 'Menge',
   prefillable: 'Vorausfüllbar',
   signature_id: 'Signatur-ID',
   error_message: 'Fehlermeldung',
   length: 'Länge',
-  min: 'Min',
-  max: 'Max',
-  date_now: 'Akt. Datum',
+  min: 'Min.',
+  max: 'Max.',
   font: 'Schriftart',
   party: 'Partei',
-  method: 'Verfahren',
+  date_signed: 'Unterzeichnungsdatum',
+  method: 'Methode',
   reorder_fields: 'Felder neu anordnen',
   verify_id: 'ID überprüfen',
-  obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more: 'Erhalten Sie eine qualifizierte elektronische Signatur (QeS) beim vertrauenswürdigen Anbieter. Klicken Sie hier, um mehr zu erfahren.',
-  wiederkehrend: 'Wiederkehrend',
-  einmalig: 'Einmalig',
+  obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more: 'Qualifizierte elektronische Signatur (QES) beim vertrauenswürdigen Anbieter einholen. Klicken Sie, um mehr zu erfahren.',
   editable: 'Bearbeitbar',
+  recurrent: 'Wiederkehrend',
+  one_off: 'Einmalig',
   search_field: 'Suchfeld',
   field_not_found: 'Feld nicht gefunden',
-  clear: 'Löschen',
-  type_value: 'Wert eingeben',
-  add_all_required_fields_to_continue: 'Fügen Sie alle erforderlichen Felder hinzu, um fortzufahren',
-  uploaded_pdf_contains_form_fields_keep_or_remove_them: 'Das hochgeladene PDF enthält Formularfelder. Behalten oder entfernen?',
-  keep: 'Behalten',
+  clear: 'Leeren',
   align: 'Ausrichten',
+  add_all_required_fields_to_continue: 'Fügen Sie alle erforderlichen Felder hinzu, um fortzufahren',
+  uploaded_pdf_contains_form_fields_keep_or_remove_them: 'Das hochgeladene PDF enthält Formularfelder. Beibehalten oder entfernen?',
+  keep: 'Beibehalten',
   left: 'Links',
   heading: 'Überschrift',
   validation: 'Validierung',
   add_blank_page: 'Leere Seite hinzufügen',
   right: 'Rechts',
-  add_condition: 'Bedingung hinzufügen',
   center: 'Zentriert',
-  with_logo: 'Mit Logo',
   description: 'Beschreibung',
   display_title: 'Anzeigetitel',
-  unchecked: 'Nicht überprüft',
+  with_logo: 'Mit Logo',
+  unchecked: 'Nicht markiert',
   price: 'Preis',
+  type_value: 'Wert eingeben',
   equal: 'Gleich',
   not_equal: 'Ungleich',
   contains: 'Enthält',
   does_not_contain: 'Enthält nicht',
   not_empty: 'Nicht leer',
   empty: 'Leer',
-  signing_date: 'Signaturdatum',
   select_field_: 'Feld auswählen...',
   select_value_: 'Wert auswählen...',
   remove_condition: 'Bedingung entfernen',
-  condition: 'Bedingung',
-  formula: 'Formel',
+  add_condition: 'Bedingung hinzufügen',
+  are_you_sure_: 'Sind Sie sicher?',
+  sign_yourself: 'Selbst unterschreiben',
+  set_signing_date: 'Unterzeichnungsdatum festlegen',
+  signing_date: 'Unterzeichnungsdatum',
+  send: 'Senden',
+  remove: 'Entfernen',
   edit: 'Bearbeiten',
   settings: 'Einstellungen',
   up: 'Nach oben',
   down: 'Nach unten',
-  set_signing_date: 'Unterschriftdatum festlegen',
-  are_you_sure_: 'Bist du sicher?',
-  sign_yourself: 'Unterschreiben Sie selbst',
-  checked: 'Ausgewählt',
-  send: 'Senden',
-  remove: 'Entfernen',
+  checked: 'Markiert',
   save: 'Speichern',
   cancel: 'Abbrechen',
-  draw_field_on_the_document: 'Ein Feld auf dem Dokument zeichnen',
-  click_to_upload: 'Klicken Sie zum Hochladen',
-  or_drag_and_drop_files: 'oder Dateien hierher ziehen',
-  uploading: 'Hochladen',
-  processing_: 'Verarbeitung...',
+  any: 'Beliebig',
+  drawn: 'Gezeichnet',
+  drawn_or_typed: 'Gezeichnet oder getippt',
+  drawn_or_upload: 'Gezeichnet oder hochgeladen',
+  upload: 'Hochladen',
+  formula: 'Formel',
+  typed: 'Getippt',
+  draw_field_on_the_document: 'Ein Feld im Dokument zeichnen',
+  click_to_upload: 'Zum Hochladen klicken',
+  or_drag_and_drop_files: 'oder Dateien per Drag & Drop ablegen',
+  uploading: 'Hochladen...',
+  processing_: 'Verarbeiten...',
   add_pdf_documents_or_images: 'PDF-Dokumente oder Bilder hinzufügen',
   add_documents_or_images: 'Dokumente oder Bilder hinzufügen',
   add_a_new_document: 'Neues Dokument hinzufügen',
@@ -959,11 +1039,12 @@ const de = {
   format: 'Format',
   read_only: 'Nur lesen',
   page: 'Seite',
-  draw_new_area: 'Neuen Bereich zeichnen',
+  draw_new_area: 'Bereich zeichnen',
   copy_to_all_pages: 'Auf alle Seiten kopieren',
   add_option: 'Option hinzufügen',
   option: 'Option',
-  options: 'Options',
+  options: 'Optionen',
+  condition: 'Bedingung',
   first_party: 'Erste Partei',
   second_party: 'Zweite Partei',
   third_party: 'Dritte Partei',
@@ -982,21 +1063,21 @@ const de = {
   sixteenth_party: 'Sechzehnte Partei',
   seventeenth_party: 'Siebzehnte Partei',
   eighteenth_party: 'Achtzehnte Partei',
-  nineteenth_party: 'Neunzehnte Party',
-  twentieth_party: 'Zwanzigste Party',
+  nineteenth_party: 'Neunzehnte Partei',
+  twentieth_party: 'Zwanzigste Partei',
   draw: 'Zeichnen',
   add: 'Hinzufügen',
-  or_add_field_without_drawing: 'Oder Feld ohne Zeichnung hinzufügen',
+  or_add_field_without_drawing: 'Oder Feld ohne Zeichnen hinzufügen',
   text: 'Text',
+  number: 'Zahl',
   signature: 'Unterschrift',
   initials: 'Initialen',
   date: 'Datum',
-  number: 'Nummer',
   image: 'Bild',
   file: 'Datei',
-  select: 'Auswählen',
+  select: 'Auswahl',
   checkbox: 'Checkbox',
-  multiple: 'Mehrere',
+  multiple: 'Mehrfach',
   radio: 'Radio',
   cells: 'Zellen',
   stamp: 'Stempel',
@@ -1010,32 +1091,26 @@ const de = {
   image_field: 'Bildfeld',
   file_field: 'Dateifeld',
   select_field: 'Auswahlfeld',
-  checkbox_field: 'Checkbox-Feld',
-  multiple_field: 'Mehrfach-Auswahlfeld',
-  radio_field: 'Radio-Gruppenfeld',
+  checkbox_field: 'Checkboxfeld',
+  multiple_field: 'Mehrfachauswahlfeld',
+  radio_field: 'Radiogruppe',
   cells_field: 'Zellenfeld',
   stamp_field: 'Stempelfeld',
   payment_field: 'Zahlungsfeld',
   phone_field: 'Telefonfeld',
-  draw_a_text_field_on_the_page_with_a_mouse: 'Textfeld auf der Seite mit der Maus zeichnen',
-  drag_and_drop_any_other_field_type_on_the_page: 'Ziehe und lasse einen anderen Feldtyp auf die Seite fallen',
-  click_on_the_field_type_above_to_start_drawing_it: 'Klicke auf den Feldtyp oben, um mit dem Zeichnen zu beginnen',
-  please_draw_fields_to_prepare_the_document: 'Bitte zeichne Felder, um das Dokument vorzubereiten.',
-  only_pdf_and_images_are_supported: 'Nur PDFs und Bilder werden unterstützt.',
-  unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'Schalte das SMS-verifizierte Telefonnummernfeld mit einem kostenpflichtigen Plan frei. Verwende das Textfeld für Telefonnummern ohne Verifizierung.',
+  draw_a_text_field_on_the_page_with_a_mouse: 'Ein Textfeld mit der Maus auf der Seite zeichnen',
+  drag_and_drop_any_other_field_type_on_the_page: 'Jeden anderen Feldtyp auf die Seite ziehen und ablegen',
+  click_on_the_field_type_above_to_start_drawing_it: 'Klicken Sie oben auf den Feldtyp, um mit dem Zeichnen zu beginnen',
+  please_draw_fields_to_prepare_the_document: 'Bitte zeichnen Sie Felder, um das Dokument vorzubereiten.',
+  only_pdf_and_images_are_supported: 'Nur PDF und Bilder werden unterstützt.',
+  unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'SMS-verifiziertes Telefonnummernfeld mit kostenpflichtigem Plan freischalten. Verwenden Sie für Telefonnummern ohne Verifizierung das Textfeld.',
   available_only_in_pro: 'Nur in Pro verfügbar',
-  failed_to_download_files: 'Fehler beim Herunterladen der Dateien',
-  please_add_fields_for_the_submitter_name_or_remove_the_submitter_name_if_not_needed: 'Bitte füge Felder für {submitter_name} hinzu oder entferne {submitter_name}, falls nicht erforderlich.',
-  draw_field: 'Feld {field} zeichnen',
+  failed_to_download_files: 'Dateien konnten nicht heruntergeladen werden',
+  please_add_fields_for_the_submitter_name_or_remove_the_submitter_name_if_not_needed: 'Bitte fügen Sie Felder für {submitter_name} hinzu oder entfernen Sie {submitter_name}, falls nicht benötigt.',
+  draw_field: '{field}-Feld zeichnen',
   replace: 'Ersetzen',
   uploading_: 'Hochladen...',
   add_document: 'Hochladen',
-  any: 'Jede',
-  drawn: 'Gezeichnet',
-  drawn_or_typed: 'Gezeichnet oder getippt',
-  drawn_or_upload: 'Gezeichnet oder hochgeladen',
-  upload: 'Upload',
-  typed: 'Getippt',
   none: 'Keine',
   ssn: 'SSN',
   ein: 'EIN',
@@ -1045,19 +1120,212 @@ const de = {
   custom: 'Benutzerdefiniert',
   numbers_only: 'Nur Zahlen',
   letters_only: 'Nur Buchstaben',
-  regexp_validation: 'Regulärer Ausdruck Überprüfung',
-  enter_pdf_password: 'Geben Sie das PDF-Passwort ein',
+  regexp_validation: 'RegExp-Validierung',
+  enter_pdf_password: 'PDF-Passwort eingeben',
   wrong_password: 'Falsches Passwort',
   currency: 'Währung',
   save_and_preview: 'Speichern und Vorschau',
-  preferences: 'Einstellungen',
+  preferences: 'Voreinstellungen',
   available_in_pro: 'In Pro verfügbar',
   some_fields_are_missing_in_the_formula: 'Einige Felder fehlen in der Formel.',
-  learn_more: 'Erfahren Sie mehr',
+  learn_more: 'Mehr erfahren',
   and: 'und',
   or: 'oder',
-  start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: 'Starte eine kurze Tour, um zu lernen, wie du dein erstes Dokument erstellst und versendest.',
-  start_tour: 'Starten'
+  start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: 'Starten Sie eine Kurztour, um zu lernen, wie Sie Ihr erstes Dokument erstellen und versenden.',
+  start_tour: 'Tour starten',
+  or_add_from: 'Oder hinzufügen aus',
+  sync: 'Synchronisieren',
+  syncing: 'Synchronisiere...'
 }
 
-export { en, es, it, pt, fr, de }
+const nl = {
+  kba: 'KBA',
+  autodetect_fields: 'Velden detecteren',
+  analyzing_: 'Analyseren...',
+  download: 'Downloaden',
+  downloading_: 'Downloaden...',
+  view: 'Bekijken',
+  payment_link: 'Betaallink',
+  strikeout: 'Doorhalen',
+  draw_strikethrough_the_document: 'Teken doorhaling in het document',
+  quantity: 'Aantal',
+  prefillable: 'Voorinvulbaar',
+  signature_id: 'Handtekening-ID',
+  error_message: 'Foutmelding',
+  length: 'Lengte',
+  min: 'Min',
+  max: 'Max',
+  font: 'Lettertype',
+  party: 'Partij',
+  date_signed: 'Datum ondertekend',
+  method: 'Methode',
+  reorder_fields: 'Velden herschikken',
+  verify_id: 'ID verifiëren',
+  obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more: 'Verkrijg een gekwalificeerde elektronische handtekening (QeS) via de vertrouwde provider. Klik voor meer informatie.',
+  editable: 'Bewerkbaar',
+  recurrent: 'Terugkerend',
+  one_off: 'Eenmalig',
+  search_field: 'Zoekveld',
+  field_not_found: 'Veld niet gevonden',
+  clear: 'Wissen',
+  align: 'Uitlijnen',
+  add_all_required_fields_to_continue: 'Voeg alle vereiste velden toe om door te gaan',
+  uploaded_pdf_contains_form_fields_keep_or_remove_them: 'Geüploade PDF bevat formuliervelden. Behouden of verwijderen?',
+  keep: 'Behouden',
+  left: 'Links',
+  heading: 'Koptekst',
+  validation: 'Validatie',
+  add_blank_page: 'Lege pagina toevoegen',
+  right: 'Rechts',
+  center: 'Centreren',
+  description: 'Beschrijving',
+  display_title: 'Titel weergeven',
+  with_logo: 'Met logo',
+  unchecked: 'Niet aangevinkt',
+  price: 'Prijs',
+  type_value: 'Typ waarde',
+  equal: 'Gelijk aan',
+  not_equal: 'Niet gelijk aan',
+  contains: 'Bevat',
+  does_not_contain: 'Bevat niet',
+  not_empty: 'Niet leeg',
+  empty: 'Leeg',
+  select_field_: 'Veld selecteren...',
+  select_value_: 'Waarde selecteren...',
+  remove_condition: 'Voorwaarde verwijderen',
+  add_condition: 'Voorwaarde toevoegen',
+  are_you_sure_: 'Weet u het zeker?',
+  sign_yourself: 'Zelf ondertekenen',
+  set_signing_date: 'Ondertekeningsdatum instellen',
+  signing_date: 'Ondertekeningsdatum',
+  send: 'Verzenden',
+  remove: 'Verwijderen',
+  edit: 'Bewerken',
+  settings: 'Instellingen',
+  up: 'Omhoog',
+  down: 'Omlaag',
+  checked: 'Aangevinkt',
+  save: 'Opslaan',
+  cancel: 'Annuleren',
+  any: 'Elke',
+  drawn: 'Getekend',
+  drawn_or_typed: 'Getekend of getypt',
+  drawn_or_upload: 'Getekend of uploaden',
+  upload: 'Uploaden',
+  formula: 'Formule',
+  typed: 'Getypt',
+  draw_field_on_the_document: 'Teken een veld op het document',
+  click_to_upload: 'Klik om te uploaden',
+  or_drag_and_drop_files: 'of sleep bestanden hierheen',
+  uploading: 'Uploaden',
+  processing_: 'Bezig met verwerken...',
+  add_pdf_documents_or_images: 'PDF-documenten of afbeeldingen toevoegen',
+  add_documents_or_images: 'Documenten of afbeeldingen toevoegen',
+  add_a_new_document: 'Nieuw document toevoegen',
+  replace_existing_document: 'Bestaand document vervangen',
+  clone_and_replace_documents: 'Documenten klonen en vervangen',
+  required: 'Vereist',
+  default_value: 'Standaardwaarde',
+  format: 'Formaat',
+  read_only: 'Alleen-lezen',
+  page: 'Pagina',
+  draw_new_area: 'Nieuw gebied tekenen',
+  copy_to_all_pages: 'Kopieer naar alle pag.',
+  add_option: 'Optie toevoegen',
+  option: 'Optie',
+  options: 'Opties',
+  condition: 'Voorwaarde',
+  first_party: 'Eerste partij',
+  second_party: 'Tweede partij',
+  third_party: 'Derde partij',
+  fourth_party: 'Vierde partij',
+  fifth_party: 'Vijfde partij',
+  sixth_party: 'Zesde partij',
+  seventh_party: 'Zevende partij',
+  eighth_party: 'Achtste partij',
+  ninth_party: 'Negende partij',
+  tenth_party: 'Tiende partij',
+  eleventh_party: 'Elfde partij',
+  twelfth_party: 'Twaalfde partij',
+  thirteenth_party: 'Dertiende partij',
+  fourteenth_party: 'Veertiende partij',
+  fifteenth_party: 'Vijftiende partij',
+  sixteenth_party: 'Zestiende partij',
+  seventeenth_party: 'Zeventiende partij',
+  eighteenth_party: 'Achttiende partij',
+  nineteenth_party: 'Negentiende partij',
+  twentieth_party: 'Twintigste partij',
+  draw: 'Tekenen',
+  add: 'Toevoegen',
+  or_add_field_without_drawing: 'Of voeg een veld toe zonder te tekenen',
+  text: 'Tekst',
+  number: 'Getal',
+  signature: 'Signatuur',
+  initials: 'Initialen',
+  date: 'Datum',
+  image: 'Afbeelding',
+  file: 'Bestand',
+  select: 'Selecteren',
+  checkbox: 'Checkbox',
+  multiple: 'Meerdere',
+  radio: 'Radio',
+  cells: 'Cellen',
+  stamp: 'Stempel',
+  payment: 'Betaling',
+  phone: 'Telefoon',
+  text_field: 'Tekstveld',
+  signature_field: 'Signatuurveld',
+  initials_field: 'Initialenveld',
+  date_field: 'Datumveld',
+  number_field: 'Getalveld',
+  image_field: 'Afbeeldingsveld',
+  file_field: 'Bestandsveld',
+  select_field: 'Selectieveld',
+  checkbox_field: 'Aankruisvakje',
+  multiple_field: 'Meerkeuzeveld',
+  radio_field: 'Radiogroepveld',
+  cells_field: 'Cellenveld',
+  stamp_field: 'Stempelveld',
+  payment_field: 'Betalingsveld',
+  phone_field: 'Telefoonveld',
+  draw_a_text_field_on_the_page_with_a_mouse: 'Teken met de muis een tekstveld op de pagina',
+  drag_and_drop_any_other_field_type_on_the_page: 'Sleep elk ander veldtype naar de pagina',
+  click_on_the_field_type_above_to_start_drawing_it: 'Klik op het bovenstaande veldtype om te beginnen met tekenen',
+  please_draw_fields_to_prepare_the_document: 'Teken velden om het document voor te bereiden.',
+  only_pdf_and_images_are_supported: 'Alleen PDF en afbeeldingen worden ondersteund.',
+  unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'Ontgrendel het SMS-geverifieerde veld voor telefoonnummer met een betaald abonnement. Gebruik het tekstveld voor telefoonnummers zonder verificatie.',
+  available_only_in_pro: 'Alleen beschikbaar in Pro',
+  failed_to_download_files: 'Bestanden downloaden mislukt',
+  please_add_fields_for_the_submitter_name_or_remove_the_submitter_name_if_not_needed: 'Voeg velden toe voor de {submitter_name}. Of verwijder de {submitter_name} als deze niet nodig is.',
+  draw_field: 'Teken het veld {field}',
+  replace: 'Vervangen',
+  uploading_: 'Bezig met uploaden...',
+  add_document: 'Doc. toevoegen',
+  none: 'Geen',
+  ssn: 'SSN',
+  ein: 'EIN',
+  email: 'E-mail',
+  url: 'URL',
+  zip: 'Postcode',
+  custom: 'Aangepast',
+  numbers_only: 'Alleen cijfers',
+  letters_only: 'Alleen letters',
+  regexp_validation: 'Regex validatie',
+  enter_pdf_password: 'Voer PDF-wachtwoord in',
+  wrong_password: 'Onjuist wachtwoord',
+  currency: 'Valuta',
+  save_and_preview: 'Opslaan & bekijken',
+  preferences: 'Voorkeuren',
+  available_in_pro: 'Beschikbaar in Pro',
+  some_fields_are_missing_in_the_formula: 'Sommige velden ontbreken in de formule.',
+  learn_more: 'Meer informatie',
+  and: 'en',
+  or: 'of',
+  start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: 'Start een korte rondleiding om te leren hoe u uw eerste document maakt en verzendt',
+  start_tour: 'Rondleiding starten',
+  or_add_from: 'Of toevoegen van',
+  sync: 'Synchroniseren',
+  syncing: 'Synchroniseren...'
+}
+
+export { en, es, it, pt, fr, de, nl }

app/javascript/template_builder/mobile_draw_field.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute text-center w-full bottom-0 pr-3 mb-4">
+  <div class="absolute w-full bottom-0 pr-3 mb-4">
     <span class="w-full bg-base-200 px-4 py-2 rounded-md inline-flex space-x-2 mx-auto items-center justify-between mb-2 z-20 draw-field-container-mobile">
       <div class="flex items-center space-x-2">
         <component
@@ -77,7 +77,7 @@ export default {
     removeSubmitter (submitter) {
       [...this.fields].forEach((field) => {
         if (field.submitter_uuid === submitter.uuid) {
-          this.removeField(field)
+          this.removeField(field, false)
         }
       })
 
@@ -89,10 +89,12 @@ export default {
 
       this.save()
     },
-    removeField (field) {
+    removeField (field, save = true) {
       this.fields.splice(this.fields.indexOf(field), 1)
 
-      this.save()
+      if (save) {
+        this.save()
+      }
     }
   }
 }

app/javascript/template_builder/mobile_fields.vue

@@ -49,12 +49,17 @@
           </li>
         </template>
       </template>
-      <template v-else>
+      <div
+        v-if="fieldTypes.length && submitterDefaultFields.length"
+        class="bg-base-300"
+        style="height: 1px; margin-top: 1px; margin-bottom: 1px"
+      />
+      <template v-if="fieldTypes.length || !submitterDefaultFields.length">
         <template
           v-for="(icon, type) in fieldIconsSorted"
           :key="type"
         >
-          <li v-if="fieldTypes.includes(type) || ((withPhone || type != 'phone') && (withPayment || type != 'payment') && (withVerification || type != 'verification'))">
+          <li v-if="fieldTypes.includes(type) || ((withPhone || type != 'phone') && (withPayment || type != 'payment') && (withVerification || type != 'verification') && (withKba || type != 'kba'))">
             <a
               href="#"
               class="text-sm py-1 px-2"
@@ -84,7 +89,7 @@ export default {
     IconPlus,
     IconX
   },
-  inject: ['withPhone', 'withPayment', 'withVerification', 'backgroundColor', 't'],
+  inject: ['withPhone', 'withPayment', 'withVerification', 'withKba', 'backgroundColor', 't'],
   props: {
     modelValue: {
       type: String,

app/javascript/template_builder/page.vue

@@ -24,6 +24,8 @@
         :ref="setAreaRefs"
         :area="item.area"
         :input-mode="inputMode"
+        :page-width="width"
+        :page-height="height"
         :field="item.field"
         :editable="editable"
         :with-field-placeholder="withFieldPlaceholder"
@@ -40,6 +42,8 @@
       <FieldArea
         v-if="newArea"
         :is-draw="true"
+        :page-width="width"
+        :page-height="height"
         :field="{ submitter_uuid: selectedSubmitter.uuid, type: drawField?.type || dragFieldPlaceholder?.type || defaultFieldType }"
         :area="newArea"
       />

app/javascript/template_builder/payment_settings.vue

@@ -1,7 +1,7 @@
 <template>
   <span
     class="dropdown dropdown-end field-settings-dropdown"
-    :class="{ 'dropdown-open': ((!field.preferences?.price && !field.preferences?.formula) || !isConnected) && !isLoading }"
+    :class="{ 'dropdown-open': ((!field.preferences?.price && !field.preferences?.formula && !field.preferences?.price_id && !field.preferences?.payment_link_id) || !isConnected) && !isLoading }"
   >
     <label
       tabindex="0"
@@ -21,7 +21,7 @@
       @click="closeDropdown"
     >
       <div
-        v-if="!('price_id' in field.preferences)"
+        v-if="!('price_id' in field.preferences) && !('payment_link_id' in field.preferences)"
         class="py-1.5 px-1 relative"
         @click.stop
       >
@@ -52,10 +52,9 @@
         @click.stop
       >
         <input
-          v-if="field.preferences.formula"
-          type="number"
-          :placeholder="t('price')"
-          disabled="true"
+          v-if="'payment_link_id' in field.preferences"
+          v-model="field.preferences.payment_link_id"
+          placeholder="plink_XXXXX"
           class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
           @blur="save"
         >
@@ -66,6 +65,14 @@
           class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
           @blur="save"
         >
+        <input
+          v-else-if="field.preferences.formula"
+          type="number"
+          :placeholder="t('price')"
+          disabled="true"
+          class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
+          @blur="save"
+        >
         <input
           v-else
           v-model="field.preferences.price"
@@ -75,29 +82,41 @@
           @blur="save"
         >
         <label
-          v-if="field.preferences.price && !field.preferences.formula"
+          v-if="(field.preferences.price || field.preferences.price_id || field.preferences.payment_link_id) && (!field.preferences.formula || ('price_id' in field.preferences) || ('payment_link_id' in field.preferences))"
           :style="{ backgroundColor: backgroundColor }"
           class="absolute -top-1 left-2.5 px-1 h-4"
           style="font-size: 8px"
         >
-          {{ t('price') }}
+          {{ 'payment_link_id' in field.preferences ? t('payment_link') : t('price') }}
         </label>
         <div class="flex items-center justify-center">
           <a
             href="#"
             class="hover:underline"
             style="font-size: 11px"
-            :class="{'underline': !('price_id' in field.preferences)}"
-            @click="delete field.preferences.price_id"
+            :class="{'underline': !('payment_link_id' in field.preferences)}"
+            @click="[delete field.preferences.price_id, delete field.preferences.payment_link_id]"
           >{{ t('one_off') }}</a>
           <span class="h-2.5 border-l border-base-content mx-1" />
+          <template
+            v-if="field.preferences.price_id"
+          >
+            <a
+              href="#"
+              class="hover:underline"
+              style="font-size: 11px"
+              :class="{'underline': ('price_id' in field.preferences)}"
+              @click="field.preferences.payment_link_id ??= ''"
+            >{{ t('recurrent') }}</a>
+            <span class="h-2.5 border-l border-base-content mx-1" />
+          </template>
           <a
             href="#"
             class="hover:underline"
             style="font-size: 11px"
-            :class="{'underline': ('price_id' in field.preferences)}"
-            @click="field.preferences.price_id ??= ''"
-          >{{ t('recurrent') }}</a>
+            :class="{'underline': ('payment_link_id' in field.preferences)}"
+            @click="[delete field.preferences.price_id, field.preferences.payment_link_id ??= '']"
+          >{{ t('payment_link') }}</a>
         </div>
       </div>
       <div
@@ -184,7 +203,6 @@
         >{{ t('learn_more') }}</a>
       </div>
       <li
-        v-if="!('price_id' in field.preferences)"
         class="mb-1"
       >
         <label
@@ -195,7 +213,7 @@
             width="18"
           />
           <span class="text-sm">
-            {{ t('formula') }}
+            {{ 'payment_link_id' in field.preferences ? t('quantity') : t('formula') }}
           </span>
         </label>
       </li>

app/javascript/template_builder/preview.vue

@@ -9,7 +9,7 @@
         loading="lazy"
       >
       <div
-        class="group flex justify-end cursor-pointer top-0 bottom-0 left-0 right-0 absolute p-1 hover:bg-black/10 transition-colors"
+        class="group flex justify-end cursor-pointer top-0 bottom-0 left-0 right-0 absolute p-1 hover:bg-black/10 transition-colors rounded"
         @click="$emit('scroll-to', item)"
       >
         <div
@@ -23,7 +23,7 @@
           >
             <div>
               <button
-                class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors p-0 document-control-button"
+                class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors p-0 document-control-button"
                 @click.stop="isShowConditionsModal = true"
               >
                 <IconRouteAltLeft
@@ -48,7 +48,7 @@
           >
             <div>
               <button
-                class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
+                class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
                 style="width: 24px; height: 24px"
                 @click.stop="$emit('remove', item)"
               >
@@ -63,7 +63,7 @@
                 class="tooltip tooltip-left before:text-xs"
               >
                 <button
-                  class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors p-0 document-control-button"
+                  class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors p-0 document-control-button"
                   @click.stop="$emit('reorder', item)"
                 >
                   <IconSortDescending2
@@ -75,14 +75,14 @@
               </span>
               <template v-if="withArrows">
                 <button
-                  class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
+                  class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
                   style="width: 24px; height: 24px"
                   @click.stop="$emit('up', item)"
                 >
                   &uarr;
                 </button>
                 <button
-                  class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
+                  class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
                   style="width: 24px; height: 24px"
                   @click.stop="$emit('down', item)"
                 >
@@ -94,12 +94,20 @@
         </div>
       </div>
     </div>
-    <div class="flex pb-2 pt-1.5 document-preview-name">
+    <div class="flex items-center gap-1 pb-2 pt-1.5 document-preview-name">
+      <GoogleDriveDocumentSettings
+        v-if="item.google_drive_file_id"
+        :template-id="template.id"
+        :google-drive-file-id="item.google_drive_file_id"
+        @success="$emit('replace', { replaceSchemaItem: item, ...$event })"
+      />
       <Contenteditable
         :model-value="item.name"
         :icon-width="16"
+        :icon-inline="true"
+        :float-icon="!item.google_drive_file_id"
+        :hide-icon="!item.google_drive_file_id"
         :editable="editable"
-        style="max-width: 95%"
         class="mx-auto"
         @update:model-value="onUpdateName"
       />
@@ -123,6 +131,7 @@ import Upload from './upload'
 import { IconRouteAltLeft, IconSortDescending2 } from '@tabler/icons-vue'
 import ConditionsModal from './conditions_modal'
 import ReplaceButton from './replace'
+import GoogleDriveDocumentSettings from './google_drive_document_settings'
 import Field from './field'
 import FieldType from './field_type'
 
@@ -133,6 +142,7 @@ export default {
     IconRouteAltLeft,
     ConditionsModal,
     ReplaceButton,
+    GoogleDriveDocumentSettings,
     IconSortDescending2
   },
   inject: ['t'],

app/javascript/template_builder/upload.vue

@@ -3,29 +3,155 @@
     <label
       id="add_document_button"
       :for="inputId"
-      class="btn btn-outline w-full add-document-button"
+      class="btn btn-outline w-full add-document-button px-0"
       :class="{ 'btn-disabled': isLoading }"
     >
-      <IconInnerShadowTop
-        v-if="isLoading"
-        width="20"
-        class="animate-spin"
-      />
-      <IconUpload
-        v-else
-        width="20"
-      />
-      <span v-if="isLoading">
-        {{ t('uploading_') }}
-      </span>
-      <span v-else>
-        {{ t('add_document') }}
-      </span>
+      <div
+        class="flex items-center justify-between w-full h-full"
+      >
+        <span
+          class="flex items-center space-x-2 w-full justify-center"
+          :class="{ 'pl-3': withGoogleDrive }"
+        >
+          <IconInnerShadowTop
+            v-if="isLoading"
+            width="20"
+            class="animate-spin"
+          />
+          <IconUpload
+            v-else
+            width="20"
+          />
+          <span v-if="isLoading">
+            {{ t('uploading_') }}
+          </span>
+          <span
+            v-else
+            class="mr-1 whitespace-nowrap truncate"
+          >
+            {{ t('add_document') }}
+          </span>
+        </span>
+        <span
+          v-if="withGoogleDrive"
+          class="dropdown dropdown-end dropdown-top inline h-full"
+          style="width: 33px"
+        >
+          <label
+            tabindex="0"
+            class="flex items-center h-full cursor-pointer"
+          >
+            <IconChevronDown class="w-5 h-5 flex-shrink-0" />
+          </label>
+          <ul
+            tabindex="0"
+            :style="{ backgroundColor }"
+            class="dropdown-content p-2 mt-2 shadow menu text-base mb-1 rounded-box text-right !text-base-content"
+          >
+            <li>
+              <button
+                type="button"
+                @click="openGoogleDriveModal"
+              >
+                <IconBrandGoogleDrive class="w-5 h-5 flex-shrink-0" />
+                <span class="whitespace-nowrap text-sm normal-case font-medium">Google Drive</span>
+              </button>
+            </li>
+          </ul>
+        </span>
+      </div>
     </label>
+    <Teleport
+      v-if="showGoogleDriveModal"
+      :to="modalContainerEl"
+    >
+      <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="showGoogleDriveModal = false"
+        />
+        <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 class="modal-title">
+              Google Drive
+            </span>
+            <a
+              href="#"
+              class="text-xl modal-close-button"
+              @click.prevent="showGoogleDriveModal = false"
+            >&times;</a>
+          </div>
+          <div>
+            <form
+              v-if="showGoogleDriveOauthButton"
+              method="post"
+              :action="googleDriveOauthPath"
+              @submit="isConnectGoogleDriveClicked = true"
+            >
+              <input
+                type="hidden"
+                name="authenticity_token"
+                :value="authenticityToken"
+                autocomplete="off"
+              >
+              <button
+                id="gdrive_oauth_button"
+                class="btn bg-white btn-outline w-full text-base font-medium mt-4"
+                data-turbo="false"
+                type="submit"
+                :disabled="isConnectGoogleDriveClicked"
+              >
+                <span v-if="isConnectGoogleDriveClicked">
+                  <span class="flex items-center justify-center space-x-2">
+                    <IconInnerShadowTop class="animate-spin" />
+                    <span class="">Submitting...</span>
+                  </span>
+                </span>
+                <span
+                  v-else
+                >
+                  <span class="flex items-center justify-center space-x-2">
+                    <IconBrandGoogleDrive />
+                    <span>Connect Google Drive</span>
+                  </span>
+                </span>
+              </button>
+            </form>
+            <div
+              v-else
+              class="relative"
+            >
+              <iframe
+                class="border border-base-300 rounded-lg"
+                style="width: 100%; height: 440px; background: white;"
+                src="/template_google_drive"
+              />
+              <div v-if="isLoadingGoogleDrive">
+                <div
+                  class="bg-white absolute top-0 bottom-0 left-0 right-0 opacity-80 rounded-lg"
+                  style="margin: 1px"
+                />
+                <div class="absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center">
+                  <IconInnerShadowTop class="animate-spin" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Teleport>
     <form
       ref="form"
       class="hidden"
     >
+      <input
+        v-for="file in googleDriveFiles"
+        :key="file.id"
+        name="google_drive_file_ids[]"
+        :value="file.id"
+      >
       <input
         :id="inputId"
         ref="input"
@@ -40,20 +166,32 @@
 </template>
 
 <script>
-import { IconUpload, IconInnerShadowTop } from '@tabler/icons-vue'
+import { IconUpload, IconInnerShadowTop, IconChevronDown, IconBrandGoogleDrive } from '@tabler/icons-vue'
 
 export default {
   name: 'DocumentsUpload',
   components: {
     IconUpload,
-    IconInnerShadowTop
+    IconInnerShadowTop,
+    IconChevronDown,
+    IconBrandGoogleDrive
   },
-  inject: ['baseFetch', 't'],
+  inject: ['baseFetch', 't', 'backgroundColor'],
   props: {
     templateId: {
       type: [Number, String],
       required: true
     },
+    authenticityToken: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    withGoogleDrive: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     acceptFileTypes: {
       type: String,
       required: false,
@@ -63,22 +201,88 @@ export default {
   emits: ['success', 'error'],
   data () {
     return {
-      isLoading: false
+      isLoading: false,
+      isConnectGoogleDriveClicked: false,
+      isLoadingGoogleDrive: false,
+      googleDriveFiles: [],
+      showGoogleDriveModal: false,
+      showGoogleDriveOauthButton: false
     }
   },
   computed: {
     inputId () {
       return 'el' + Math.random().toString(32).split('.')[1]
     },
+    queryParams () {
+      return new URLSearchParams(window.location.search)
+    },
     uploadUrl () {
       return `/templates/${this.templateId}/documents`
+    },
+    googleDriveOauthPath () {
+      const params = {
+        access_type: 'offline',
+        include_granted_scopes: 'true',
+        prompt: 'consent',
+        scope: [
+          'https://www.googleapis.com/auth/userinfo.email',
+          'https://www.googleapis.com/auth/drive.file'
+        ].join(' '),
+        state: new URLSearchParams({
+          redir: `/templates/${this.templateId}/edit?google_drive_open=1`
+        }).toString()
+      }
+
+      const query = new URLSearchParams(params).toString()
+
+      return `/auth/google_oauth2?${query}`
+    },
+    modalContainerEl () {
+      return this.$el.getRootNode().querySelector('#docuseal_modal_container')
     }
   },
+  mounted () {
+    window.addEventListener('message', this.messageHandler)
+
+    if (this.queryParams.get('google_drive_open') === '1') {
+      this.openGoogleDriveModal()
+
+      window.history.replaceState({}, document.title, window.location.pathname)
+    }
+  },
+  beforeUnmount () {
+    window.removeEventListener('message', this.messageHandler)
+  },
   methods: {
-    async upload () {
+    openGoogleDriveModal () {
+      this.showGoogleDriveModal = true
+      this.isLoadingGoogleDrive = true
+    },
+    messageHandler (event) {
+      if (event.data.type === 'google-drive-files-picked') {
+        this.googleDriveFiles = event.data.files || []
+
+        this.$nextTick(() => {
+          this.isLoadingGoogleDrive = true
+
+          this.upload({ path: `/templates/${this.templateId}/google_drive_documents` }).then((resp) => {
+            if (resp.ok) {
+              this.showGoogleDriveModal = false
+            }
+          }).finally(() => {
+            this.isLoadingGoogleDrive = false
+          })
+        })
+      } else if (event.data.type === 'google-drive-picker-loaded') {
+        this.isLoadingGoogleDrive = false
+      } else if (event.data.type === 'google-drive-picker-request-oauth') {
+        this.showGoogleDriveOauthButton = true
+      }
+    },
+    async upload ({ path } = {}) {
       this.isLoading = true
 
-      this.baseFetch(this.uploadUrl, {
+      return this.baseFetch(path || this.uploadUrl, {
         method: 'POST',
         headers: { Accept: 'application/json' },
         body: new FormData(this.$refs.form)
@@ -111,6 +315,10 @@ export default {
                   this.isLoading = false
                 }
               })
+            } else if (data.status === 'google_drive_file_missing') {
+              alert(data.error)
+              this.$emit('error', data.error)
+              this.isLoading = false
             } else {
               this.$emit('error', data.error)
               this.isLoading = false
@@ -122,6 +330,8 @@ export default {
             this.isLoading = false
           })
         }
+
+        return resp
       }).catch(() => {
         this.isLoading = false
       })

app/jobs/generate_preview_images_job.rb

@@ -11,7 +11,7 @@ class GeneratePreviewImagesJob
     max_page = [attachment.metadata['pdf']['number_of_pages'].to_i - 1,
                 Templates::ProcessDocument::MAX_NUMBER_OF_PAGES_PROCESSED].min
 
-    Templates::ProcessDocument.generate_document_preview_images(attachment, attachment.download, (1..max_page),
+    Templates::ProcessDocument.generate_document_preview_images(attachment, attachment.download, 1..max_page,
                                                                 concurrency: 1)
   end
 end

app/jobs/process_submission_expired_job.rb

@@ -4,7 +4,9 @@ class ProcessSubmissionExpiredJob
   include Sidekiq::Job
 
   def perform(params = {})
-    submission = Submission.find(params['submission_id'])
+    submission = Submission.find_by(id: params['submission_id'])
+
+    return unless submission
 
     return if submission.archived_at?
     return if submission.template&.archived_at?

app/jobs/process_submitter_completion_job.rb

@@ -14,10 +14,10 @@ class ProcessSubmitterCompletionJob
 
     if is_all_completed && submitter.completed_at == submitter.submission.submitters.maximum(:completed_at)
       if submitter.submission.account.account_configs.exists?(key: AccountConfig::COMBINE_PDF_RESULT_KEY, value: true)
-        Submissions::GenerateCombinedAttachment.call(submitter)
+        Submissions::EnsureCombinedGenerated.call(submitter)
       end
 
-      Submissions::GenerateAuditTrail.call(submitter.submission)
+      Submissions::EnsureAuditGenerated.call(submitter.submission)
 
       enqueue_completed_emails(submitter)
     end
@@ -38,12 +38,27 @@ class ProcessSubmitterCompletionJob
 
     submission = submitter.submission
 
+    complete_verification_events, sms_events =
+      submitter.submission_events.where(event_type: %i[send_sms send_2fa_sms complete_verification complete_kba])
+               .partition { |e| e.event_type == 'complete_verification' || e.event_type == 'complete_kba' }
+
+    complete_verification_event = complete_verification_events.first
+
+    verification_method =
+      if complete_verification_event&.event_type == 'complete_kba'
+        'kba'
+      elsif complete_verification_event
+        complete_verification_event.data['method']
+      end
+
     completed_submitter.assign_attributes(
       submission_id: submitter.submission_id,
       account_id: submission.account_id,
+      is_first: !CompletedSubmitter.exists?(submission: submitter.submission_id, is_first: true),
       template_id: submission.template_id,
       source: submission.source,
-      sms_count: submitter.submission_events.where(event_type: %w[send_sms send_2fa_sms]).count,
+      sms_count: sms_events.sum { |e| e.data['segments'] || 1 },
+      verification_method:,
       completed_at: submitter.completed_at
     )
 
@@ -86,18 +101,26 @@ class ProcessSubmitterCompletionJob
 
   def enqueue_completed_emails(submitter)
     submission = submitter.submission
+    template = submitter.template
 
-    user = submission.created_by_user || submitter.template.author
+    user = submission.created_by_user || template.author
 
     if submitter.account.users.exists?(id: user.id) && submission.preferences['send_email'] != false &&
-       submitter.template&.preferences&.dig('completed_notification_email_enabled') != false
-      if submission.submitters.map(&:email).exclude?(user.email) &&
-         user.user_configs.find_by(key: UserConfig::RECEIVE_COMPLETED_EMAIL)&.value != false &&
-         user.role != 'integration'
-        SubmitterMailer.completed_email(submitter, user).deliver_later!
-      end
+       (!template || template.preferences['completed_notification_email_enabled'] != false)
+      user_submitter = submission.submitters.find { |s| s.email == user.email }
+
+      is_sent_to_user =
+        if user.role != 'integration' &&
+           (!user_submitter || user_submitter.preferences['send_email'] == false) &&
+           user.user_configs.find_by(key: UserConfig::RECEIVE_COMPLETED_EMAIL)&.value != false
+          SubmitterMailer.completed_email(submitter, user).deliver_later!
+
+          true
+        end
 
       build_bcc_addresses(submission).each do |to|
+        next if is_sent_to_user && to == user.email
+
         SubmitterMailer.completed_email(submitter, user, to:).deliver_later!
       end
     end

app/jobs/send_confirmation_instructions_job.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class SendConfirmationInstructionsJob
+  include Sidekiq::Job
+
+  def perform(params = {})
+    user = User.find(params['user_id'])
+
+    user.send_confirmation_instructions
+  end
+end

app/jobs/send_form_completed_webhook_request_job.rb

@@ -8,8 +8,13 @@ class SendFormCompletedWebhookRequestJob
   MAX_ATTEMPTS = 12
 
   def perform(params = {})
-    submitter = Submitter.find(params['submitter_id'])
-    webhook_url = WebhookUrl.find(params['webhook_url_id'])
+    submitter = Submitter.find_by(id: params['submitter_id'])
+
+    return unless submitter
+
+    webhook_url = WebhookUrl.find_by(id: params['webhook_url_id'])
+
+    return unless webhook_url
 
     attempt = params['attempt'].to_i
 

app/jobs/send_form_declined_webhook_request_job.rb

@@ -8,8 +8,13 @@ class SendFormDeclinedWebhookRequestJob
   MAX_ATTEMPTS = 10
 
   def perform(params = {})
-    submitter = Submitter.find(params['submitter_id'])
-    webhook_url = WebhookUrl.find(params['webhook_url_id'])
+    submitter = Submitter.find_by(id: params['submitter_id'])
+
+    return unless submitter
+
+    webhook_url = WebhookUrl.find_by(id: params['webhook_url_id'])
+
+    return unless webhook_url
 
     attempt = params['attempt'].to_i
 

app/jobs/send_form_started_webhook_request_job.rb

@@ -8,8 +8,13 @@ class SendFormStartedWebhookRequestJob
   MAX_ATTEMPTS = 10
 
   def perform(params = {})
-    submitter = Submitter.find(params['submitter_id'])
-    webhook_url = WebhookUrl.find(params['webhook_url_id'])
+    submitter = Submitter.find_by(id: params['submitter_id'])
+
+    return unless submitter
+
+    webhook_url = WebhookUrl.find_by(id: params['webhook_url_id'])
+
+    return unless webhook_url
 
     attempt = params['attempt'].to_i
 

app/jobs/send_form_viewed_webhook_request_job.rb

@@ -8,8 +8,13 @@ class SendFormViewedWebhookRequestJob
   MAX_ATTEMPTS = 10
 
   def perform(params = {})
-    submitter = Submitter.find(params['submitter_id'])
-    webhook_url = WebhookUrl.find(params['webhook_url_id'])
+    submitter = Submitter.find_by(id: params['submitter_id'])
+
+    return unless submitter
+
+    webhook_url = WebhookUrl.find_by(id: params['webhook_url_id'])
+
+    return unless webhook_url
 
     attempt = params['attempt'].to_i
 

app/jobs/send_submission_archived_webhook_request_job.rb

@@ -8,8 +8,13 @@ class SendSubmissionArchivedWebhookRequestJob
   MAX_ATTEMPTS = 10
 
   def perform(params = {})
-    submission = Submission.find(params['submission_id'])
-    webhook_url = WebhookUrl.find(params['webhook_url_id'])
+    submission = Submission.find_by(id: params['submission_id'])
+
+    return unless submission
+
+    webhook_url = WebhookUrl.find_by(id: params['webhook_url_id'])
+
+    return unless webhook_url
 
     attempt = params['attempt'].to_i
 

app/jobs/send_submission_completed_webhook_request_job.rb

@@ -8,8 +8,13 @@ class SendSubmissionCompletedWebhookRequestJob
   MAX_ATTEMPTS = 10
 
   def perform(params = {})
-    submission = Submission.find(params['submission_id'])
-    webhook_url = WebhookUrl.find(params['webhook_url_id'])
+    submission = Submission.find_by(id: params['submission_id'])
+
+    return unless submission
+
+    webhook_url = WebhookUrl.find_by(id: params['webhook_url_id'])
+
+    return unless webhook_url
 
     attempt = params['attempt'].to_i
 

app/jobs/send_submission_created_webhook_request_job.rb

@@ -8,8 +8,13 @@ class SendSubmissionCreatedWebhookRequestJob
   MAX_ATTEMPTS = 10
 
   def perform(params = {})
-    submission = Submission.find(params['submission_id'])
-    webhook_url = WebhookUrl.find(params['webhook_url_id'])
+    submission = Submission.find_by(id: params['submission_id'])
+
+    return unless submission
+
+    webhook_url = WebhookUrl.find_by(id: params['webhook_url_id'])
+
+    return unless webhook_url
 
     attempt = params['attempt'].to_i
 

app/jobs/send_submission_expired_webhook_request_job.rb

@@ -8,8 +8,13 @@ class SendSubmissionExpiredWebhookRequestJob
   MAX_ATTEMPTS = 10
 
   def perform(params = {})
-    submission = Submission.find(params['submission_id'])
-    webhook_url = WebhookUrl.find(params['webhook_url_id'])
+    submission = Submission.find_by(id: params['submission_id'])
+
+    return unless submission
+
+    webhook_url = WebhookUrl.find_by(id: params['webhook_url_id'])
+
+    return unless webhook_url
 
     attempt = params['attempt'].to_i
 

app/jobs/send_submitter_invitation_email_job.rb

@@ -7,6 +7,8 @@ class SendSubmitterInvitationEmailJob
     submitter = Submitter.find(params['submitter_id'])
 
     return if submitter.completed_at?
+    return if submitter.submission.archived_at?
+    return if submitter.template&.archived_at?
     return if submitter.submission.source == 'invite' && !Accounts.can_send_emails?(submitter.account, on_events: true)
 
     unless Accounts.can_send_invitation_emails?(submitter.account)