Merge from docusealco/wip

docs: fix README typos

.github/workflows/ci.yml

@@ -12,7 +12,7 @@ jobs:
       - name: Install Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 4.0.1
+          ruby-version: 4.0.5
       - name: Cache gems
         uses: actions/cache@v4
         with:
@@ -37,7 +37,7 @@ jobs:
       - name: Install Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 4.0.1
+          ruby-version: 4.0.5
       - name: Cache gems
         uses: actions/cache@v4
         with:
@@ -89,7 +89,7 @@ jobs:
       - name: Install Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 4.0.1
+          ruby-version: 4.0.5
       - name: Cache gems
         uses: actions/cache@v4
         with:
@@ -104,7 +104,7 @@ jobs:
           bundle install --jobs 4 --retry 4
           yarn install
           sudo apt-get update
-          sudo apt-get install libvips
+          sudo apt-get install libvips liblept5
       - name: Run Brakeman
         run: bundle exec brakeman -q --exit-on-warn
 
@@ -132,7 +132,7 @@ jobs:
       - name: Install Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 4.0.1
+          ruby-version: 4.0.5
       - name: Set up Node
         uses: actions/setup-node@v1
         with:
@@ -162,8 +162,8 @@ jobs:
           bundle install --jobs 4 --retry 4
           yarn install
           sudo apt-get update
-          sudo apt-get install -y libvips
-          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"
+          sudo apt-get install -y libvips liblept5
+          wget -O pdfium-linux.tgz "https://github.com/bblanchon/pdfium-binaries/releases/latest/download/pdfium-linux-$(uname -m | sed 's/x86_64/x64/;s/aarch64/arm64/').tgz"
           sudo tar -xzf pdfium-linux.tgz --strip-components=1 -C /usr/lib lib/libpdfium.so
           rm -f pdfium-linux.tgz
       - name: Run

.rubocop.yml

@@ -28,7 +28,7 @@ Lint/MissingSuper:
   Enabled: false
 
 Metrics/ParameterLists:
-  Max: 10
+  Max: 12
 
 Metrics/MethodLength:
   Max: 30

Dockerfile

@@ -1,19 +1,23 @@
-FROM ruby:4.0.1-alpine AS download
+FROM ruby:4.0.5-alpine AS download
 
 WORKDIR /fonts
 
-RUN apk --no-cache add wget && \
+RUN apk --no-cache add wget unzip && \
     wget https://github.com/satbyy/go-noto-universal/releases/download/v7.0/GoNotoKurrent-Regular.ttf && \
     wget https://github.com/satbyy/go-noto-universal/releases/download/v7.0/GoNotoKurrent-Bold.ttf && \
     wget https://github.com/impallari/DancingScript/raw/master/fonts/DancingScript-Regular.otf && \
     wget https://raw.githubusercontent.com/impallari/DancingScript/master/OFL.txt && \
     wget https://raw.githubusercontent.com/notofonts/noto-fonts/refs/heads/main/LICENSE && \
     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/bblanchon/pdfium-binaries/releases/latest/download/pdfium-linux-musl-$(uname -m | sed 's/x86_64/x64/;s/aarch64/arm64/').tgz" && \
+    wget -O pdfium-linux.zip "https://github.com/docusealco/pdfium-binaries/releases/download/20260613/pdfium-musl-$(uname -m).zip" && \
+    case "$(uname -m)" in \
+      x86_64)  echo "2c953ff72ee2dda07e7fc577e25841cc3d6464468a7c5adfaea574efcbc3b90b  pdfium-linux.zip" ;; \
+      aarch64) echo "23bbe287d2753fdb05741c7660647eb0ef0d2e4da2ce0722bfa9d9d455bd64e2  pdfium-linux.zip" ;; \
+    esac | sha256sum -c - && \
     mkdir -p /pdfium-linux && \
-    tar -xzf pdfium-linux.tgz -C /pdfium-linux
+    unzip -q pdfium-linux.zip -d /pdfium-linux
 
-FROM ruby:4.0.1-alpine AS webpack
+FROM ruby:4.0.5-alpine AS webpack
 
 ENV RAILS_ENV=production
 ENV NODE_ENV=production
@@ -40,7 +44,7 @@ COPY ./app/views ./app/views
 
 RUN echo "gem 'shakapacker'" > Gemfile && ./bin/shakapacker
 
-FROM ruby:4.0.1-alpine AS app
+FROM ruby:4.0.5-alpine AS app
 
 ENV RAILS_ENV=production
 ENV BUNDLE_WITHOUT="development:test"
@@ -48,7 +52,8 @@ ENV OPENSSL_CONF=/etc/openssl_legacy.cnf
 
 WORKDIR /app
 
-RUN apk add --no-cache libpq vips redis vips-heif fontconfig onnxruntime
+RUN apk add --no-cache libpq vips redis onnxruntime leptonica && \
+    rm -f /usr/bin/onnx_test_runner /usr/bin/onnxruntime_test
 
 RUN addgroup -g 2000 docuseal && adduser -u 2000 -G docuseal -s /bin/sh -D -h /home/docuseal docuseal
 
@@ -81,7 +86,7 @@ COPY --chown=docuseal:docuseal .version ./public/version
 
 COPY --chown=docuseal:docuseal --from=download /fonts/GoNotoKurrent-Regular.ttf /fonts/GoNotoKurrent-Bold.ttf /fonts/DancingScript-Regular.otf /fonts/OFL.txt /fonts/LICENSE /fonts/
 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 /pdfium-linux/licenses/ /usr/lib/libpdfium-licenses/
 COPY --chown=docuseal:docuseal --from=download /model.onnx /app/tmp/model.onnx
 COPY --chown=docuseal:docuseal --from=webpack /app/public/packs ./public/packs
 
@@ -94,6 +99,7 @@ WORKDIR /data/docuseal
 ENV HOME=/home/docuseal
 ENV WORKDIR=/data/docuseal
 ENV VIPS_MAX_COORD=17000
+ENV VIPS_BLOCK_UNTRUSTED=1
 
 EXPOSE 3000
 CMD ["/app/bin/bundle", "exec", "puma", "-C", "/app/config/puma.rb", "--dir", "/app"]

Gemfile

@@ -2,7 +2,7 @@
 
 source 'https://rubygems.org'
 
-ruby '4.0.1'
+ruby '4.0.5'
 
 gem 'addressable'
 gem 'arabic-letter-connector', require: false
@@ -21,11 +21,9 @@ gem 'faraday'
 gem 'faraday-follow_redirects'
 gem 'google-cloud-storage', require: false
 gem 'hexapdf'
-gem 'image_processing'
 gem 'jwt', require: false
 gem 'lograge'
 gem 'numo-narray-alt', require: false
-gem 'oj'
 gem 'onnxruntime', require: false
 gem 'pagy'
 gem 'pg', require: false

Gemfile.lock

@@ -116,7 +116,7 @@ GEM
       erubi (~> 1.4)
       parser (>= 2.4)
       smart_properties
-    bigdecimal (4.1.0)
+    bigdecimal (4.1.2)
     bindex (0.8.1)
     bootsnap (1.23.0)
       msgpack (~> 1.2)
@@ -161,7 +161,7 @@ GEM
       irb (~> 1.10)
       reline (>= 0.3.8)
     declarative (0.0.20)
-    devise (5.0.3)
+    devise (5.0.4)
       bcrypt (~> 3.0)
       orm_adapter (~> 0.1)
       railties (>= 7.0)
@@ -179,7 +179,7 @@ GEM
     dotenv (3.2.0)
     drb (2.2.3)
     email_typo (0.2.3)
-    erb (6.0.2)
+    erb (6.0.4)
     erb_lint (0.9.0)
       activesupport
       better_html (>= 2.0.1)
@@ -195,7 +195,7 @@ GEM
       railties (>= 6.1.0)
     faker (3.6.1)
       i18n (>= 1.8.11, < 2)
-    faraday (2.14.1)
+    faraday (2.14.2)
       faraday-net_http (>= 2.0, < 3.5)
       json
       logger
@@ -257,25 +257,22 @@ GEM
       os (>= 0.9, < 2.0)
       signet (>= 0.16, < 2.a)
     hashdiff (1.2.1)
-    hexapdf (1.6.0)
+    hexapdf (1.7.0)
       cmdparse (~> 3.0, >= 3.0.3)
       geom2d (~> 0.4, >= 0.4.1)
       openssl (>= 2.2.1)
       strscan (>= 3.1.2)
     i18n (1.14.8)
       concurrent-ruby (~> 1.0)
-    image_processing (1.14.0)
-      mini_magick (>= 4.9.5, < 6)
-      ruby-vips (>= 2.0.17, < 3)
     io-console (0.8.2)
-    irb (1.17.0)
+    irb (1.18.0)
       pp (>= 0.6.0)
       prism (>= 1.3.0)
       rdoc (>= 4.0.0)
       reline (>= 0.4.2)
     jmespath (1.6.2)
-    json (2.19.3)
-    jwt (3.1.2)
+    json (2.19.8)
+    jwt (3.2.0)
       base64
     language_server-protocol (3.17.0.5)
     launchy (3.1.1)
@@ -308,17 +305,15 @@ GEM
     marcel (1.1.0)
     matrix (0.4.3)
     method_source (1.1.0)
-    mini_magick (5.3.1)
-      logger
     mini_mime (1.1.5)
-    minitest (6.0.3)
+    minitest (6.0.6)
       drb (~> 2.0)
       prism (~> 1.5)
     msgpack (1.8.0)
     multi_json (1.19.1)
     net-http (0.9.1)
       uri (>= 0.11.1)
-    net-imap (0.6.3)
+    net-imap (0.6.4.1)
       date
       net-protocol
     net-pop (0.1.2)
@@ -328,20 +323,17 @@ GEM
     net-smtp (0.5.1)
       net-protocol
     nio4r (2.7.5)
-    nokogiri (1.19.2-aarch64-linux-gnu)
+    nokogiri (1.19.3-aarch64-linux-gnu)
       racc (~> 1.4)
-    nokogiri (1.19.2-aarch64-linux-musl)
+    nokogiri (1.19.3-aarch64-linux-musl)
       racc (~> 1.4)
-    nokogiri (1.19.2-arm64-darwin)
+    nokogiri (1.19.3-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.19.2-x86_64-linux-gnu)
+    nokogiri (1.19.3-x86_64-linux-gnu)
       racc (~> 1.4)
-    nokogiri (1.19.2-x86_64-linux-musl)
+    nokogiri (1.19.3-x86_64-linux-musl)
       racc (~> 1.4)
     numo-narray-alt (0.10.3)
-    oj (3.16.16)
-      bigdecimal (>= 3.0)
-      ostruct (>= 0.2)
     onnxruntime (0.10.1-aarch64-linux)
       ffi
     onnxruntime (0.10.1-arm64-darwin)
@@ -351,7 +343,6 @@ GEM
     openssl (4.0.1)
     orm_adapter (0.5.0)
     os (1.1.4)
-    ostruct (0.6.3)
     package_json (0.2.0)
     pagy (43.4.4)
       json
@@ -382,7 +373,7 @@ GEM
       date
       stringio
     public_suffix (7.0.5)
-    puma (7.2.0)
+    puma (8.0.2)
       nio4r (~> 2.0)
     racc (1.8.1)
     rack (3.2.6)
@@ -429,12 +420,12 @@ GEM
       tsort (>= 0.2)
       zeitwerk (~> 2.6)
     rainbow (3.1.1)
-    rake (13.3.1)
+    rake (13.4.2)
     rdoc (7.2.0)
       erb
       psych (>= 4.0.0)
       tsort
-    redis-client (0.28.0)
+    redis-client (0.29.0)
       connection_pool
     regexp_parser (2.11.3)
     reline (0.6.3)
@@ -516,12 +507,12 @@ GEM
       rack-proxy (>= 0.6.1)
       railties (>= 5.2)
       semantic_range (>= 2.3.0)
-    sidekiq (8.1.2)
+    sidekiq (8.1.6)
       connection_pool (>= 3.0.0)
       json (>= 2.16.0)
       logger (>= 1.7.0)
       rack (>= 3.2.0)
-      redis-client (>= 0.26.0)
+      redis-client (>= 0.29.0)
     signet (0.21.0)
       addressable (~> 2.8)
       faraday (>= 0.17.5, < 3.a)
@@ -624,12 +615,10 @@ DEPENDENCIES
   foreman
   google-cloud-storage
   hexapdf
-  image_processing
   jwt
   letter_opener_web
   lograge
   numo-narray-alt
-  oj
   onnxruntime
   pagy
   pg
@@ -662,7 +651,7 @@ DEPENDENCIES
   webmock
 
 RUBY VERSION
-  ruby 4.0.1
+  ruby 4.0.5
 
 BUNDLED WITH
   4.0.3

README.md

@@ -50,7 +50,7 @@ DocuSeal is an open source platform that provides secure and efficient digital d
 - Company logo and white-label
 - User roles
 - Automated reminders
-- Invitation and identify verification via SMS
+- Invitation and identity verification via SMS
 - Conditional fields and formulas
 - Bulk send with CSV, XLSX spreadsheet import
 - SSO / SAML
@@ -74,7 +74,7 @@ DocuSeal is an open source platform that provides secure and efficient digital d
 docker run --name docuseal -p 3000:3000 -v.:/data docuseal/docuseal
 ```
 
-By default DocuSeal docker container uses an SQLite database to store data and configurations. Alternatively, it is possible use PostgreSQL or MySQL databases by specifying the `DATABASE_URL` env variable.
+By default DocuSeal docker container uses an SQLite database to store data and configurations. Alternatively, it is possible to use PostgreSQL or MySQL databases by specifying the `DATABASE_URL` env variable.
 
 #### Docker Compose
 

app/controllers/api/active_storage_blobs_proxy_controller.rb

@@ -9,7 +9,9 @@ module Api
 
     before_action :set_cors_headers
     before_action :set_noindex_headers
+    before_action :set_security_headers
 
+    # rubocop:disable Metrics
     def show
       blob_uuid, purp, exp = ApplicationRecord.signed_id_verifier.verified(params[:signed_uuid])
 
@@ -21,6 +23,12 @@ module Api
 
       blob = ActiveStorage::Blob.find_by!(uuid: blob_uuid)
 
+      if Submitters::DANGEROUS_EXTENSIONS.include?(blob.filename.extension.to_s.downcase)
+        Rollbar.error('Dangerous extension') if defined?(Rollbar)
+
+        return head :unprocessable_content
+      end
+
       attachment = blob.attachments.take
 
       @record = attachment.record
@@ -33,12 +41,19 @@ module Api
       else
         http_cache_forever public: true do
           response.headers['Accept-Ranges'] = 'bytes'
-          response.headers['Content-Length'] = blob.byte_size.to_s
 
-          send_blob_stream blob, disposition: params[:disposition]
+          if request.head?
+            response.headers['Content-Type'] = blob.content_type_for_serving
+            head :ok
+          else
+            send_blob_stream blob, disposition: params[:disposition]
+          end
+
+          response.headers['Content-Length'] = blob.byte_size.to_s
         end
       end
     end
+    # rubocop:enable Metrics
 
     private
 
@@ -57,8 +72,6 @@ module Api
         return if !require_ttl && !require_auth
       end
 
-      Rollbar.error('Blob unauthorized') if defined?(Rollbar)
-
       raise CanCan::AccessDenied
     end
   end

app/controllers/api/active_storage_blobs_proxy_legacy_controller.rb

@@ -9,6 +9,7 @@ module Api
 
     before_action :set_cors_headers
     before_action :set_noindex_headers
+    before_action :set_security_headers
 
     # rubocop:disable Metrics
     def show
@@ -18,6 +19,12 @@ module Api
 
       return head :not_found unless blob
 
+      if Submitters::DANGEROUS_EXTENSIONS.include?(blob.filename.extension.to_s.downcase)
+        Rollbar.error('Dangerous extension') if defined?(Rollbar)
+
+        return head :unprocessable_content
+      end
+
       is_permitted = blob.attachments.any? do |a|
         (current_user && a.record.account.id == current_user.account_id) ||
           a.record.account.account_configs.any? { |e| e.key == 'legacy_blob_proxy' } ||

app/controllers/api/api_base_controller.rb

@@ -102,6 +102,10 @@ module Api
       headers['X-Robots-Tag'] = 'noindex'
     end
 
+    def set_security_headers
+      response.headers['X-Content-Type-Options'] = 'nosniff'
+    end
+
     def set_cors_headers
       headers['Access-Control-Allow-Origin'] = '*'
       headers['Access-Control-Allow-Methods'] = 'POST, GET, PUT, PATCH, DELETE, OPTIONS'

app/controllers/api/attachments_controller.rb

@@ -8,35 +8,37 @@ module Api
     COOKIE_STORE_LIMIT = 10
 
     def create
-      submitter = Submitter.find_by!(slug: params[:submitter_slug])
-
-      unless can_upload?(submitter)
-        Rollbar.error("Can't upload: #{submitter.id}") if defined?(Rollbar)
+      @submitter = Submitter.find_by!(slug: params[:submitter_slug])
 
+      unless can_upload?(@submitter)
         return render json: { error: I18n.t('form_has_been_archived') }, status: :unprocessable_content
       end
 
+      file = params[:file]
+
       if params[:type].in?(%w[initials signature])
-        image = Vips::Image.new_from_file(params[:file].path)
+        image = ImageUtils.load_vips(file.read, content_type: file.content_type)
 
         if ImageUtils.blank?(image)
-          Rollbar.error("Empty signature: #{submitter.id}") if defined?(Rollbar)
+          Rollbar.error("Empty signature: #{@submitter.id}") if defined?(Rollbar)
 
           return render json: { error: "#{params[:type]} is empty" }, status: :unprocessable_content
         end
 
         if ImageUtils.error?(image)
-          Rollbar.error("Error signature: #{submitter.id}") if defined?(Rollbar)
+          Rollbar.error("Error signature: #{@submitter.id}") if defined?(Rollbar)
 
           return render json: { error: "#{params[:type]} error, try to sign on another device" },
                         status: :unprocessable_content
         end
+
+        metadata = { analyzed: true, identified: true, width: image.width, height: image.height }
       end
 
-      attachment = Submitters.create_attachment!(submitter, params)
+      attachment = Submitters.create_attachment!(@submitter, file, metadata:)
 
-      if params[:remember_signature] == 'true' && submitter.email.present?
-        cookies.encrypted[:signature_uuids] = build_new_cookie_signatures_json(submitter, attachment)
+      if params[:remember_signature] == 'true' && @submitter.email.present?
+        cookies.encrypted[:signature_uuids] = build_new_cookie_signatures_json(@submitter, attachment)
       end
 
       render json: attachment.as_json(only: %i[uuid created_at], methods: %i[url filename content_type])

app/controllers/api/submissions_controller.rb

@@ -54,6 +54,12 @@ module Api
 
       return render json: { error: 'Template not found' }, status: :unprocessable_content if @template.nil?
 
+      if @template.archived_at?
+        Rollbar.warning("Archived template submission: #{@template.id}") if defined?(Rollbar)
+
+        return render json: { error: 'Template has been archived' }, status: :unprocessable_content
+      end
+
       if @template.fields.blank?
         Rollbar.warning("Template does not contain fields: #{@template.id}") if defined?(Rollbar)
 

app/controllers/api/submitters_controller.rb

@@ -161,9 +161,7 @@ module Api
           submitter.values = Submitters::SubmitValues.maybe_remove_condition_values(submitter)
         end
 
-        submitter.values = submitter.values.transform_values do |v|
-          v == '{{date}}' ? Time.current.in_time_zone(submitter.account.timezone).to_date.to_s : v
-        end
+        submitter.values = Submitters::SubmitValues.replace_current_date_placeholders(submitter)
       end
 
       submitter
@@ -205,10 +203,15 @@ module Api
 
       submitter.preferences['send_sms'] = submitter_preferences['send_sms'] if submitter_preferences.key?('send_sms')
       submitter.preferences['reply_to'] = submitter_preferences['reply_to'] if submitter_preferences.key?('reply_to')
+
       if submitter_preferences.key?('require_phone_2fa')
         submitter.preferences['require_phone_2fa'] = submitter_preferences['require_phone_2fa']
       end
 
+      if submitter_preferences.key?('require_email_2fa')
+        submitter.preferences['require_email_2fa'] = submitter_preferences['require_email_2fa']
+      end
+
       if submitter_preferences.key?('go_to_last')
         submitter.preferences['go_to_last'] = submitter_preferences['go_to_last']
       end

app/controllers/api/templates_controller.rb

@@ -9,20 +9,7 @@ module Api
 
       templates = paginate(templates.preload(:author, folder: :parent_folder))
 
-      schema_documents =
-        ActiveStorage::Attachment.where(record_id: templates.map(&:id),
-                                        record_type: 'Template',
-                                        name: :documents,
-                                        uuid: templates.flat_map { |t| t.schema.pluck('attachment_uuid') })
-                                 .preload(:blob)
-
-      preview_image_attachments =
-        ActiveStorage::Attachment.joins(:blob)
-                                 .where(blob: { filename: ['0.png', '0.jpg'] })
-                                 .where(record_id: schema_documents.map(&:id),
-                                        record_type: 'ActiveStorage::Attachment',
-                                        name: :preview_images)
-                                 .preload(:blob)
+      schema_documents, dynamic_documents, preview_image_attachments = preload_relations(templates)
 
       expires_at = Accounts.link_expires_at(current_account)
 
@@ -30,6 +17,7 @@ module Api
         data: templates.map do |t|
           Templates::SerializeForApi.call(t,
                                           schema_documents: schema_documents.select { |e| e.record_id == t.id },
+                                          dynamic_documents:,
                                           preview_image_attachments:,
                                           expires_at:)
         end,
@@ -88,6 +76,41 @@ module Api
 
     private
 
+    def preload_relations(templates)
+      schema_documents =
+        ActiveStorage::Attachment.where(record_id: templates.map(&:id),
+                                        record_type: 'Template',
+                                        name: :documents,
+                                        uuid: templates.flat_map { |t| t.schema.pluck('attachment_uuid') })
+                                 .preload(:blob)
+
+      dynamic_document_uuids =
+        templates.flat_map { |t| t.schema.select { |item| item['dynamic'] }.pluck('attachment_uuid') }
+
+      dynamic_documents =
+        if dynamic_document_uuids.present?
+          DynamicDocument.where(template: templates.map(&:id))
+                         .where(uuid: dynamic_document_uuids)
+                         .preload(current_version: { document_attachment: :blob })
+                         .select(:id, :uuid, :template_id, :sha1, :created_at, :updated_at)
+        else
+          DynamicDocument.none
+        end
+
+      preview_attachment_ids =
+        schema_documents.map(&:id) + dynamic_documents.filter_map { |d| d.current_version&.document_attachment&.id }
+
+      preview_image_attachments =
+        ActiveStorage::Attachment.joins(:blob)
+                                 .where(blob: { filename: ['0.png', '0.jpg'] })
+                                 .where(record_id: preview_attachment_ids,
+                                        record_type: 'ActiveStorage::Attachment',
+                                        name: :preview_images)
+                                 .preload(:blob)
+
+      [schema_documents, dynamic_documents, preview_image_attachments]
+    end
+
     def filter_templates(templates, params)
       templates = Templates.search(current_user, templates, params[:q])
       templates = params[:archived].in?(['true', true]) ? templates.archived : templates.active

app/controllers/preview_document_page_controller.rb

@@ -41,7 +41,7 @@ class PreviewDocumentPageController < ActionController::API
   end
 
   def find_or_create_document_tempfile_path(attachment)
-    file_path = "#{Dir.tmpdir}/#{attachment.uuid}"
+    file_path = "#{Dir.tmpdir}/attachment-#{Digest::SHA1.hexdigest("#{attachment.id}-#{attachment.uuid}")}"
 
     File.open(file_path, File::RDWR | File::CREAT, 0o644) do |f|
       f.flock(File::LOCK_EX)

app/controllers/reveal_access_token_controller.rb

@@ -1,6 +1,14 @@
 # frozen_string_literal: true
 
 class RevealAccessTokenController < ApplicationController
+  rate_limit to: 4, within: 1.minute, only: %i[create], by: -> { current_user.id }, with: lambda {
+    Rollbar.error('Rate limit api key') if defined?(Rollbar)
+
+    render turbo_stream: turbo_stream.replace(:modal, template: 'reveal_access_token/show',
+                                                      locals: { error_message: I18n.t(:too_many_attempts) }),
+           status: :unprocessable_content
+  }
+
   def show
     authorize!(:manage, current_user.access_token)
   end

app/controllers/send_submission_email_controller.rb

@@ -14,7 +14,7 @@ class SendSubmissionEmailController < ApplicationController
       template = Template.find_by!(slug: params[:template_slug])
 
       @submitter =
-        Submitter.completed.where(submission: template.submissions).find_by!(email: params[:email].to_s.downcase)
+        Submitter.completed.where(submission: template.submissions).find_by(email: params[:email].to_s.downcase)
     elsif params[:submission_slug]
       submission = Submission.find_by(slug: params[:submission_slug])
 
@@ -27,9 +27,11 @@ class SendSubmissionEmailController < ApplicationController
       @submitter = Submitter.completed.find_by!(slug: params[:submitter_slug])
     end
 
-    RateLimit.call("send-email-#{@submitter.id}", limit: 2, ttl: 5.minutes)
+    if @submitter
+      RateLimit.call("send-email-#{@submitter.id}", limit: 2, ttl: 5.minutes)
 
-    SubmitterMailer.documents_copy_email(@submitter, sig: true).deliver_later! if can_send?(@submitter)
+      SubmitterMailer.documents_copy_email(@submitter, sig: true).deliver_later! if can_send?(@submitter)
+    end
 
     respond_to do |f|
       f.html { render :success }

app/controllers/start_form_controller.rb

@@ -101,11 +101,18 @@ class StartFormController < ApplicationController
   def load_resubmit_submitter
     @resubmit_submitter =
       if params[:resubmit].present? && !params[:resubmit].in?([true, 'true'])
-        Submitter.find_by(slug: params[:resubmit])
+        submitter = Submitter.find_by(slug: params[:resubmit])
+
+        submitter if submitter && can_resubmit?(submitter)
       end
   end
 
+  def can_resubmit?(submitter)
+    submitter.account.account_configs.find_or_initialize_by(key: AccountConfig::ALLOW_TO_RESUBMIT).value != false
+  end
+
   def authorize_start!
+    return redirect_to submit_form_path(@resubmit_submitter.slug) if @resubmit_submitter && @template.archived_at?
     return redirect_to start_form_path(@template.slug) if @template.archived_at?
 
     return if @resubmit_submitter

app/controllers/submissions_controller.rb

@@ -38,6 +38,8 @@ class SubmissionsController < ApplicationController
   end
 
   def create
+    return redirect_to template_path(@template), alert: I18n.t('template_has_been_archived') if @template.archived_at?
+
     save_template_message(@template, params) if params[:save_message] == '1'
 
     [params.delete(:subject), params.delete(:body)] if params[:is_custom_message] != '1'

app/controllers/submissions_resend_email_controller.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+class SubmissionsResendEmailController < ApplicationController
+  load_and_authorize_resource :submission
+
+  before_action do
+    authorize!(:manage, :resend_all)
+    authorize!(:update, @submission)
+  end
+
+  def create
+    submitters = @submission.submitters.reject(&:completed_at?).select { |s| s.email.present? && !s.declined_at? }
+
+    if Docuseal.multitenant?
+      recent_submitter_ids =
+        SubmissionEvent.where(submitter_id: submitters.map(&:id),
+                              event_type: 'send_email',
+                              created_at: 10.hours.ago..Time.current).pluck(:submitter_id).to_set
+
+      submitters = submitters.reject { |s| recent_submitter_ids.include?(s.id) }
+    end
+
+    submitters.each do |submitter|
+      SendSubmitterInvitationEmailJob.perform_async('submitter_id' => submitter.id)
+
+      submitter.sent_at ||= Time.current
+      submitter.save!
+    end
+
+    notice =
+      if submitters.empty?
+        I18n.t('email_has_been_sent_already')
+      else
+        I18n.t('emails_have_been_sent_to_n_recipients', count: submitters.size)
+      end
+
+    redirect_back(fallback_location: submission_path(@submission), notice:)
+  end
+end

app/controllers/submissions_unarchive_controller.rb

@@ -4,6 +4,8 @@ class SubmissionsUnarchiveController < ApplicationController
   load_and_authorize_resource :submission
 
   def create
+    authorize!(:update, @submission)
+
     @submission.update!(archived_at: nil)
 
     redirect_to submission_path(@submission), notice: I18n.t('submission_has_been_unarchived')

app/controllers/submit_form_controller.rb

@@ -79,6 +79,8 @@ class SubmitFormController < ApplicationController
 
     render json: { field_uuid: e.message }, status: :unprocessable_content
   rescue Submitters::SubmitValues::ValidationError => e
+    Rollbar.warning("Validation error #{@submitter.id}: #{e.message}") if defined?(Rollbar)
+
     render json: { error: e.message }, status: :unprocessable_content
   end
 

app/controllers/submit_form_invite_controller.rb

@@ -5,12 +5,12 @@ class SubmitFormInviteController < ApplicationController
   skip_authorization_check
 
   def create
-    submitter = Submitter.find_by!(slug: params[:submit_form_slug])
+    @submitter = Submitter.find_by!(slug: params[:submit_form_slug])
 
-    return head :unprocessable_content unless can_invite?(submitter)
+    return head :unprocessable_content unless can_invite?(@submitter)
 
-    invite_submitters = filter_invite_submitters(submitter, 'invite_by_uuid')
-    optional_invite_submitters = filter_invite_submitters(submitter, 'optional_invite_by_uuid')
+    invite_submitters = filter_invite_submitters(@submitter, 'invite_by_uuid')
+    optional_invite_submitters = filter_invite_submitters(@submitter, 'optional_invite_by_uuid')
 
     ApplicationRecord.transaction do
       (invite_submitters + optional_invite_submitters).each do |item|
@@ -21,18 +21,18 @@ class SubmitFormInviteController < ApplicationController
 
         email = Submissions.normalize_email(attrs[:email])
 
-        submitter.submission.submitters.create!(uuid: attrs[:uuid], email:, account_id: submitter.account_id)
+        @submitter.submission.submitters.create!(uuid: attrs[:uuid], email:, account_id: @submitter.account_id)
 
-        SubmissionEvents.create_with_tracking_data(submitter, 'invite_party', request, { uuid: submitter.uuid })
+        SubmissionEvents.create_with_tracking_data(@submitter, 'invite_party', request, { uuid: @submitter.uuid })
       end
 
-      submitter.submission.update!(submitters_order: :preserved)
+      @submitter.submission.update!(submitters_order: :preserved)
     end
 
-    submitter.submission.submitters.reload
+    @submitter.submission.submitters.reload
 
-    if invite_submitters.all? { |s| submitter.submission.submitters.any? { |e| e.uuid == s['uuid'] } }
-      Submitters::SubmitValues.call(submitter, ActionController::Parameters.new(completed: 'true'), request)
+    if invite_submitters.all? { |s| @submitter.submission.submitters.any? { |e| e.uuid == s['uuid'] } }
+      Submitters::SubmitValues.call(@submitter, ActionController::Parameters.new(completed: 'true'), request)
 
       head :ok
     else

app/controllers/submit_form_metadata_controller.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+class SubmitFormMetadataController < ApplicationController
+  skip_before_action :authenticate_user!
+  skip_authorization_check
+
+  def index
+    @submitter = Submitter.find_by!(slug: params[:submit_form_slug])
+
+    return head :not_found if @submitter.declined_at? ||
+                              @submitter.completed_at? ||
+                              @submitter.submission.archived_at? ||
+                              @submitter.submission.expired? ||
+                              @submitter.submission.template&.archived_at? ||
+                              @submitter.account.archived_at? ||
+                              !Submitters::AuthorizedForForm.call(@submitter, current_user, request)
+
+    submission = @submitter.submission
+    values = submission.submitters.reduce({}) { |acc, sub| acc.merge(sub.values) }
+    schema = Submissions.filtered_conditions_schema(submission, values:, include_submitter_uuid: @submitter.uuid)
+
+    documents = schema.filter_map do |item|
+      submission.schema_documents.find { |a| a.uuid == item['attachment_uuid'] }
+    end
+
+    ActiveRecord::Associations::Preloader.new(records: documents, associations: %i[blob record]).call
+
+    text_runs = documents.to_h do |document|
+      [
+        document.uuid,
+        DocumentMetadatas.find_or_create_for_document(document, account_id: document.record.account_id).text_runs
+      ]
+    end
+
+    render json: { text_runs: }
+  end
+end

app/controllers/submit_form_values_controller.rb

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

app/controllers/submitters_send_email_controller.rb

@@ -4,6 +4,8 @@ class SubmittersSendEmailController < ApplicationController
   load_and_authorize_resource :submitter
 
   def create
+    authorize!(:update, @submitter)
+
     if Docuseal.multitenant? && SubmissionEvent.exists?(submitter: @submitter,
                                                         event_type: 'send_email',
                                                         created_at: 10.hours.ago..Time.current)

app/controllers/template_documents_controller.rb

@@ -10,6 +10,8 @@ class TemplateDocumentsController < ApplicationController
   end
 
   def create
+    authorize!(:update, @template)
+
     if params[:blobs].blank? && params[:files].blank?
       return render json: { error: I18n.t('file_is_missing') }, status: :unprocessable_content
     end

app/controllers/template_documents_crop_controller.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+class TemplateDocumentsCropController < ApplicationController
+  load_and_authorize_resource :template
+  before_action :load_attachment
+
+  rescue_from Leptonica::LeptonicaError do
+    render json: { error: I18n.t(:unable_to_save) }, status: :unprocessable_content
+  end
+
+  def index
+    render json: { corners: Leptonica.detect_document_corners(@attachment.download) }
+  end
+
+  def create
+    authorize!(:update, @template)
+
+    document = Templates::CreateDocumentCrop.call(@template, @attachment, crop_params)
+
+    render json: {
+      document: document.as_json(
+        methods: %i[metadata signed_key],
+        include: {
+          preview_images: { methods: %i[url metadata filename] }
+        }
+      )
+    }
+  end
+
+  private
+
+  def load_attachment
+    @attachment = @template.documents_attachments.find_by!(uuid: params[:attachment_uuid])
+  end
+
+  def crop_params
+    params.permit(:scan, :rotate, :flip_h, :flip_v, corners: [%i[x y]])
+  end
+end

app/controllers/template_documents_modify_controller.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+class TemplateDocumentsModifyController < ApplicationController
+  load_and_authorize_resource :template
+
+  def create
+    authorize!(:update, @template)
+
+    documents_layout =
+      params.require(:documents).map do |item|
+        item.permit(:attachment_uuid,
+                    pages: [:attachment_uuid, :page, :rotate,
+                            { redact: [%i[x y w h]], replaced_page: %i[attachment_uuid page] }]).to_h
+      end
+
+    Templates::ModifyDocuments.call(@template, documents_layout)
+
+    render json: {
+      schema: @template.schema,
+      fields: @template.fields,
+      submitters: @template.submitters,
+      documents: @template.schema_documents.reload.preload(:blob, preview_images_attachments: :blob).as_json(
+        methods: %i[metadata signed_key],
+        include: {
+          preview_images: { methods: %i[url metadata filename] }
+        }
+      )
+    }
+  rescue Templates::ModifyDocuments::InvalidLayout
+    render json: { error: I18n.t(:unable_to_save) }, status: :unprocessable_content
+  end
+end

app/controllers/template_documents_page_objects_controller.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class TemplateDocumentsPageObjectsController < ApplicationController
+  load_and_authorize_resource :template
+
+  def index
+    attachment = @template.documents_attachments.find_by!(uuid: params[:attachment_uuid])
+
+    render json: Templates::ModifyDocuments.page_objects(attachment, params[:page].to_i)
+  end
+end

app/controllers/templates_clone_and_replace_controller.rb

@@ -13,6 +13,9 @@ class TemplatesCloneAndReplaceController < ApplicationController
 
     cloned_template = Templates::Clone.call(@template, author: current_user)
     cloned_template.name = File.basename(params[:files].first.original_filename, '.*')
+
+    authorize!(:create, cloned_template)
+
     cloned_template.save!
 
     documents = Templates::ReplaceAttachments.call(cloned_template, params, extract_fields: true)

app/controllers/templates_controller.rb

@@ -27,18 +27,7 @@ class TemplatesController < ApplicationController
   def new; end
 
   def edit
-    ActiveRecord::Associations::Preloader.new(
-      records: [@template],
-      associations: [{ schema_documents: [:blob, { preview_images_attachments: :blob }] }]
-    ).call
-
-    @template_data =
-      @template.as_json.merge(
-        documents: @template.schema_documents.as_json(
-          methods: %i[metadata signed_key],
-          include: { preview_images: { methods: %i[url metadata filename] } }
-        )
-      ).to_json
+    @template_data = Templates.serialize_for_builder(@template)
 
     render :edit, layout: 'plain'
   end

app/controllers/templates_detect_fields_controller.rb

@@ -16,7 +16,12 @@ class TemplatesDetectFieldsController < ApplicationController
     page_number = params[:page].presence&.to_i
 
     documents.each do |document|
-      io = StringIO.new(document.download)
+      io =
+        if document.image?
+          StringIO.new(document.preview_images.joins(:blob).find_by(blob: { filename: ['0.png', '0.jpg'] }).download)
+        else
+          StringIO.new(document.download)
+        end
 
       Templates::DetectFields.call(io, attachment: document, page_number:) do |(attachment_uuid, page, fields)|
         sse.write({ attachment_uuid:, page:, fields: })

app/controllers/templates_folders_controller.rb

@@ -6,6 +6,8 @@ class TemplatesFoldersController < ApplicationController
   def edit; end
 
   def update
+    authorize!(:update, @template)
+
     name = [params[:parent_name], params[:name]].compact_blank.join(' / ')
 
     @template.folder = TemplateFolders.find_or_create_by_name(current_user, name)

app/controllers/templates_preview_controller.rb

@@ -4,18 +4,7 @@ class TemplatesPreviewController < ApplicationController
   load_and_authorize_resource :template
 
   def show
-    ActiveRecord::Associations::Preloader.new(
-      records: [@template],
-      associations: [{ schema_documents: { preview_images_attachments: :blob } }]
-    ).call
-
-    @template_data =
-      @template.as_json.merge(
-        documents: @template.schema_documents.as_json(
-          methods: %i[metadata signed_key],
-          include: { preview_images: { methods: %i[url metadata filename] } }
-        )
-      ).to_json
+    @template_data = Templates.serialize_for_builder(@template)
 
     render :show, layout: 'plain'
   end

app/controllers/templates_restore_controller.rb

@@ -4,6 +4,8 @@ class TemplatesRestoreController < ApplicationController
   load_and_authorize_resource :template
 
   def create
+    authorize!(:update, @template)
+
     @template.update!(archived_at: nil)
 
     WebhookUrls.enqueue_events(@template, 'template.updated')

app/controllers/templates_share_link_qr_controller.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class TemplatesShareLinkQrController < ApplicationController
+  load_and_authorize_resource :template
+
+  def show
+    return render :disabled, layout: 'plain' unless @template.shared_link?
+
+    shared_link_url = start_form_url(slug: @template.slug, host: form_link_host)
+
+    @qr_svg_code = RQRCode::QRCode.new(shared_link_url, level: :m).as_svg(viewbox: true)
+
+    @page_size =
+      if TimeUtils.timezone_abbr(current_account.timezone, Time.current.beginning_of_year).in?(TimeUtils::US_TIMEZONES)
+        'Letter'
+      else
+        'A4'
+      end
+
+    render :show, layout: false
+  end
+end

app/controllers/templates_uploads_controller.rb

@@ -5,7 +5,9 @@ class TemplatesUploadsController < ApplicationController
 
   layout 'plain'
 
-  def show; end
+  def show
+    redirect_to root_path if params[:url].blank?
+  end
 
   def create
     url_params = create_file_params_from_url if params[:url].present?

app/controllers/templates_versions_controller.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+class TemplatesVersionsController < ApplicationController
+  load_and_authorize_resource :template
+
+  def index
+    versions = @template.template_versions.order(id: :desc).preload(:author)
+
+    render json: versions.as_json(TemplateVersions::SERIALIZE_PARAMS)
+  end
+
+  def show
+    version = @template.template_versions.find(params[:id])
+
+    render json: TemplateVersions.serialize(version)
+  end
+
+  def create
+    authorize!(:update, @template)
+
+    TemplateVersions.find_or_create_for(@template, author: current_user)
+
+    head :ok
+  end
+end

app/controllers/testing_accounts_controller.rb

@@ -3,7 +3,7 @@
 class TestingAccountsController < ApplicationController
   skip_authorization_check only: :destroy
 
-  def show
+  def create
     authorize!(:manage, current_account)
     authorize!(:manage, current_user)
 

app/controllers/user_initials_controller.rb

@@ -11,6 +11,12 @@ class UserInitialsController < ApplicationController
 
     return redirect_to settings_profile_index_path, notice: I18n.t('unable_to_save_initials') if file.blank?
 
+    extension = File.extname(file.original_filename).delete_prefix('.').downcase
+
+    if Submitters::DANGEROUS_EXTENSIONS.include?(extension)
+      raise Submitters::MaliciousFileExtension, "File type '.#{extension}' is not allowed."
+    end
+
     blob = ActiveStorage::Blob.create_and_upload!(io: file.open,
                                                   filename: file.original_filename,
                                                   content_type: file.content_type)

app/controllers/user_signatures_controller.rb

@@ -11,6 +11,12 @@ class UserSignaturesController < ApplicationController
 
     return redirect_to settings_profile_index_path, notice: I18n.t('unable_to_save_signature') if file.blank?
 
+    extension = File.extname(file.original_filename).delete_prefix('.').downcase
+
+    if Submitters::DANGEROUS_EXTENSIONS.include?(extension)
+      raise Submitters::MaliciousFileExtension, "File type '.#{extension}' is not allowed."
+    end
+
     blob = ActiveStorage::Blob.create_and_upload!(io: file.open,
                                                   filename: file.original_filename,
                                                   content_type: file.content_type)

app/controllers/webhook_hmac_controller.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class WebhookHmacController < ApplicationController
+  load_and_authorize_resource :webhook_url, parent: false
+
+  def show; end
+end

app/controllers/webhook_settings_controller.rb

@@ -32,9 +32,13 @@ class WebhookSettingsController < ApplicationController
   def new; end
 
   def create
-    @webhook_url.save!
+    if @webhook_url.url.present?
+      @webhook_url.save!
 
-    redirect_to settings_webhooks_path, notice: I18n.t('webhook_url_has_been_saved')
+      redirect_to settings_webhooks_path, notice: I18n.t('webhook_url_has_been_saved')
+    else
+      redirect_back fallback_location: settings_webhooks_path
+    end
   end
 
   def update

app/javascript/application.js

@@ -21,6 +21,7 @@ import SubmittersAutocomplete from './elements/submitter_autocomplete'
 import FolderAutocomplete from './elements/folder_autocomplete'
 import SignatureForm from './elements/signature_form'
 import SubmitForm from './elements/submit_form'
+import ConvertUpload from './elements/convert_upload'
 import PromptPassword from './elements/prompt_password'
 import EmailsTextarea from './elements/emails_textarea'
 import ToggleSubmit from './elements/toggle_submit'
@@ -47,13 +48,13 @@ 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 ConfirmUpload from './elements/confirm_upload'
 
 import * as TurboInstantClick from './lib/turbo_instant_click'
 
@@ -112,6 +113,7 @@ safeRegisterElement('submitters-autocomplete', SubmittersAutocomplete)
 safeRegisterElement('folder-autocomplete', FolderAutocomplete)
 safeRegisterElement('signature-form', SignatureForm)
 safeRegisterElement('submit-form', SubmitForm)
+safeRegisterElement('convert-upload', ConvertUpload)
 safeRegisterElement('prompt-password', PromptPassword)
 safeRegisterElement('emails-textarea', EmailsTextarea)
 safeRegisterElement('toggle-cookies', ToggleCookies)
@@ -139,13 +141,13 @@ 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('confirm-upload', ConfirmUpload)
 
 safeRegisterElement('template-builder', class extends HTMLElement {
   connectedCallback () {
@@ -169,6 +171,9 @@ safeRegisterElement('template-builder', class extends HTMLElement {
       withKba: ['true', 'false'].includes(this.dataset.withKba) ? this.dataset.withKba === 'true' : null,
       withLogo: this.dataset.withLogo !== 'false',
       withFieldsDetection: this.dataset.withFieldsDetection === 'true',
+      withDetectExistingFields: this.dataset.withDetectExistingFields === 'true',
+      withRevisions: true,
+      withRevisionsMenu: this.dataset.withRevisionsMenu === 'true',
       editable: this.dataset.editable !== 'false',
       authenticityToken: document.querySelector('meta[name="csrf-token"]')?.content,
       withCustomFields: true,
@@ -180,6 +185,7 @@ safeRegisterElement('template-builder', class extends HTMLElement {
       withConditions: this.dataset.withConditions === 'true',
       withDynamicDocuments: this.dataset.withDynamicDocuments === 'true',
       withGoogleDrive: this.dataset.withGoogleDrive === 'true',
+      pagePreviewFormat: this.dataset.pagePreviewFormat || '.jpg',
       withReplaceAndCloneUpload: true,
       withDownload: true,
       currencies: (this.dataset.currencies || '').split(',').filter(Boolean),
@@ -193,10 +199,35 @@ safeRegisterElement('template-builder', class extends HTMLElement {
   }
 
   onSubmit = (e) => {
-    if (e.detail.success && e.detail?.formSubmission?.formElement?.id === 'submitters_form') {
-      e.detail.fetchResponse.response.json().then((data) => {
-        this.component.template.submitters = data.submitters
-      })
+    if (e.detail.success) {
+      if (e.detail?.formSubmission?.formElement?.id === 'submitters_form') {
+        e.detail.fetchResponse.response.json().then((data) => {
+          this.component.template.submitters = data.submitters
+        })
+      }
+
+      if (e.detail?.formSubmission?.formElement?.action?.endsWith('/prefillable_fields')) {
+        e.detail.fetchResponse.response.text().then((data) => {
+          const doc = new DOMParser().parseFromString(data, 'text/html')
+          const fragment = doc.querySelector('turbo-stream template').content
+
+          const prefillableUuidsIndex = {}
+
+          fragment.querySelectorAll('[name="field_uuid"]').forEach((field) => {
+            prefillableUuidsIndex[field.value] = true
+          })
+
+          this.component.template.fields.forEach((field) => {
+            if (prefillableUuidsIndex[field.uuid]) {
+              field.prefillable = true
+              field.readonly = true
+            } else if (field.prefillable) {
+              delete field.prefillable
+              delete field.readonly
+            }
+          })
+        })
+      }
     }
   }
 

app/javascript/draw.js

@@ -11,6 +11,7 @@ window.customElements.define('draw-signature', class extends HTMLElement {
     this.resizeObserver = new ResizeObserver(() => {
       requestAnimationFrame(() => {
         if (!this.canvas) return
+        if (!this.canvas.parentNode?.clientWidth) return
 
         const { width, height } = this.canvas
 
@@ -89,7 +90,7 @@ window.customElements.define('draw-signature', class extends HTMLElement {
   }
 
   redrawCanvas (oldWidth, oldHeight) {
-    if (this.pad && !this.pad.isEmpty() && oldWidth > 0 && oldHeight > 0) {
+    if (this.pad && !this.pad.isEmpty() && oldWidth > 0 && oldHeight > 0 && this.canvas.width > 0 && this.canvas.height > 0) {
       const sx = this.canvas.width / oldWidth
       const sy = this.canvas.height / oldHeight
 

app/javascript/elements/confirm_upload.js

@@ -0,0 +1,27 @@
+import { target, targetable } from '@github/catalyst/lib/targetable'
+
+export default targetable(class extends HTMLElement {
+  static [target.static] = [
+    'prompt',
+    'processing',
+    'logo'
+  ]
+
+  connectedCallback () {
+    this.form.addEventListener('submit', this.onSubmit)
+  }
+
+  disconnectedCallback () {
+    this.form.removeEventListener('submit', this.onSubmit)
+  }
+
+  onSubmit = () => {
+    this.prompt.classList.add('hidden')
+    this.processing.classList.remove('hidden')
+    this.logo.classList.add('animate-bounce')
+  }
+
+  get form () {
+    return this.querySelector('form')
+  }
+})

app/javascript/elements/convert_upload.js

@@ -0,0 +1,73 @@
+export function convertImage (sourceFile, targetType, quality) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+
+    reader.onload = function (event) {
+      const img = new Image()
+
+      img.onload = function () {
+        const canvas = document.createElement('canvas')
+        const ctx = canvas.getContext('2d')
+
+        canvas.width = img.width
+        canvas.height = img.height
+        ctx.drawImage(img, 0, 0)
+        canvas.toBlob(function (blob) {
+          const ext = targetType === 'image/jpeg' ? '.jpg' : '.png'
+          const newFile = new File([blob], sourceFile.name.replace(/\.\w+$/, ext), { type: targetType })
+          resolve(newFile)
+        }, targetType, quality)
+      }
+
+      img.onerror = () => reject(new Error(`browser cannot decode ${sourceFile.type || sourceFile.name}`))
+
+      img.src = event.target.result
+    }
+    reader.onerror = reject
+    reader.readAsDataURL(sourceFile)
+  })
+}
+
+export async function convertImagesInInput (input) {
+  if (!input.files || input.files.length === 0) return
+
+  const dt = new DataTransfer()
+  let didConvert = false
+
+  for (const file of Array.from(input.files)) {
+    let converted = file
+
+    try {
+      if (['image/bmp', 'image/vnd.microsoft.icon', 'image/svg+xml', 'image/gif'].includes(file.type)) {
+        converted = await convertImage(file, 'image/png')
+        didConvert = true
+      } else if (['image/heic', 'image/heif', 'image/heic-sequence', 'image/heif-sequence', 'image/avif', 'image/avif-sequence', 'image/webp'].includes(file.type)) {
+        converted = await convertImage(file, 'image/jpeg', 0.9)
+        didConvert = true
+      }
+    } catch (e) {
+      alert(e.message)
+    }
+
+    dt.items.add(converted)
+  }
+
+  if (didConvert) {
+    input.files = dt.files
+  }
+}
+
+export default class extends HTMLElement {
+  connectedCallback () {
+    const input = this.querySelector('input[type="file"]')
+    const form = input.form
+
+    input.addEventListener('change', async () => {
+      await convertImagesInInput(input)
+
+      form.querySelector('[type="submit"]')?.setAttribute('disabled', true)
+
+      form.requestSubmit()
+    })
+  }
+}

app/javascript/elements/custom_validation.js

@@ -1,14 +0,0 @@
-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/dashboard_dropzone.js

@@ -1,4 +1,5 @@
 import { target, targets, targetable } from '@github/catalyst/lib/targetable'
+import { convertImagesInInput } from './convert_upload'
 
 const loadingIconHtml = `<svg xmlns="http://www.w3.org/2000/svg" class="animate-spin" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none" />
@@ -150,12 +151,16 @@ export default targetable(class extends HTMLElement {
     if (!this.isLoading) this.hideDraghover()
   }
 
-  uploadFiles (files, url) {
+  async uploadFiles (files, url) {
     this.isLoading = true
 
     this.form.action = url
 
-    this.form.querySelector('[type="file"]').files = files
+    const input = this.form.querySelector('[type="file"]')
+
+    input.files = files
+
+    await convertImagesInInput(input)
 
     this.form.querySelector('[type="submit"]').click()
   }

app/javascript/elements/download_button.js

@@ -5,6 +5,12 @@ export default targetable(class extends HTMLElement {
 
   connectedCallback () {
     this.addEventListener('click', () => this.downloadFiles())
+    this.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        this.downloadFiles()
+      }
+    })
   }
 
   toggleState () {

app/javascript/elements/file_dropzone.js

@@ -1,5 +1,6 @@
 import { actionable } from '@github/catalyst/lib/actionable'
 import { target, targetable } from '@github/catalyst/lib/targetable'
+import { convertImagesInInput } from './convert_upload'
 
 export default actionable(targetable(class extends HTMLElement {
   static [target.static] = [
@@ -38,17 +39,21 @@ export default actionable(targetable(class extends HTMLElement {
     this.classList.add('border-base-300', 'hover:bg-base-200/30')
   }
 
-  onDrop (e) {
+  async onDrop (e) {
     e.preventDefault()
 
     this.input.files = e.dataTransfer.files
 
-    this.uploadFiles(e.dataTransfer.files)
+    await convertImagesInInput(this.input)
+
+    this.uploadFiles(this.input.files)
   }
 
-  onSelectFiles (e) {
+  async onSelectFiles (e) {
     e.preventDefault()
 
+    await convertImagesInInput(this.input)
+
     this.uploadFiles(this.input.files)
   }
 

app/javascript/elements/modal_button.js

@@ -0,0 +1,18 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    const dialog = document.getElementById(this.dataset.target)
+
+    this.querySelector('button').addEventListener('click', () => {
+      if (dialog) {
+        dialog.inert = false
+        dialog.showModal()
+      }
+    })
+
+    if (dialog) {
+      dialog.addEventListener('close', () => {
+        dialog.inert = true
+      })
+    }
+  }
+}

app/javascript/elements/scroll_buttons.js

@@ -47,11 +47,13 @@ export default class extends HTMLElement {
 
     this.classList.remove('hidden', '-translate-y-10', 'opacity-0')
     this.classList.add('translate-y-0', 'opacity-100')
+    this.inert = false
   }
 
   hideButtons () {
     this.classList.remove('translate-y-0', 'opacity-100')
     this.classList.add('-translate-y-10', 'opacity-0')
+    this.inert = true
 
     setTimeout(() => {
       if (this.classList.contains('-translate-y-10')) {

app/javascript/elements/signature_form.js

@@ -14,6 +14,7 @@ export default targetable(class extends HTMLElement {
     this.resizeObserver = new ResizeObserver(() => {
       requestAnimationFrame(() => {
         if (!this.canvas) return
+        if (!this.canvas.parentNode?.clientWidth) return
 
         const { width, height } = this.canvas
 
@@ -80,7 +81,7 @@ export default targetable(class extends HTMLElement {
   }
 
   redrawCanvas (oldWidth, oldHeight) {
-    if (this.pad && !this.pad.isEmpty() && oldWidth > 0 && oldHeight > 0) {
+    if (this.pad && !this.pad.isEmpty() && oldWidth > 0 && oldHeight > 0 && this.canvas.width > 0 && this.canvas.height > 0) {
       const sx = this.canvas.width / oldWidth
       const sy = this.canvas.height / oldHeight
 

app/javascript/form.js

@@ -7,6 +7,7 @@ import FetchForm from './elements/fetch_form'
 import ScrollButtons from './elements/scroll_buttons'
 import PageContainer from './elements/page_container'
 import SubmitForm from './elements/submit_form'
+import ModalButton from './elements/modal_button'
 
 const safeRegisterElement = (name, element, options = {}) => !window.customElements.get(name) && window.customElements.define(name, element, options)
 
@@ -16,6 +17,7 @@ safeRegisterElement('fetch-form', FetchForm)
 safeRegisterElement('scroll-buttons', ScrollButtons)
 safeRegisterElement('page-container', PageContainer)
 safeRegisterElement('submit-form', SubmitForm)
+safeRegisterElement('modal-button', ModalButton)
 safeRegisterElement('submission-form', class extends HTMLElement {
   connectedCallback () {
     this.appElem = document.createElement('div')
@@ -50,7 +52,9 @@ safeRegisterElement('submission-form', class extends HTMLElement {
       completedMessage: JSON.parse(this.dataset.completedMessage || '{}'),
       completedRedirectUrl: this.dataset.completedRedirectUrl,
       attachments: reactive(JSON.parse(this.dataset.attachments)),
-      fields: JSON.parse(this.dataset.fields)
+      fields: JSON.parse(this.dataset.fields),
+      completeButtonContainer: document.getElementById('complete_button_container'),
+      completeButtonScrollContainer: document.getElementById('complete_button_container_scroll')
     })
 
     this.app.mount(this.appElem)

app/javascript/submission_form/accessibility_areas.vue

@@ -0,0 +1,434 @@
+<template>
+  <template
+    v-for="(pages, docUuid) in textRuns"
+    :key="docUuid"
+  >
+    <template
+      v-for="(_, pageIndex) in pages"
+      :key="pageIndex"
+    >
+      <template
+        v-for="(pageElem, i) in [findPageElement(docUuid, pageIndex)]"
+        :key="i"
+      >
+        <Teleport
+          v-if="pageElem"
+          :to="pageElem"
+        >
+          <template
+            v-for="(item, index) in sortedItemsForPage(docUuid, pageIndex)"
+            :key="index"
+          >
+            <template v-if="item.type === 'text_group'">
+              <span
+                class="absolute overflow-hidden text-transparent select-none pointer-events-none"
+                :style="{ left: item.x * 100 + '%', top: item.y * 100 + '%', width: item.w * 100 + '%', height: item.h * 100 + '%' }"
+              >{{ item.text }}</span>
+              <span
+                v-for="(run, runIndex) in item.items"
+                :key="runIndex"
+                aria-hidden="true"
+                class="absolute overflow-hidden text-transparent"
+                :style="{ left: run.x * 100 + '%', top: run.y * 100 + '%', width: run.w * 100 + '%', height: run.h * 100 + '%', fontSize: run.font_size ? (run.font_size / 10) + 'cqmin' : undefined, textAlign: 'justify', textAlignLast: 'justify', textJustify: 'inter-character' }"
+              >{{ run.text }}</span>
+            </template>
+            <FieldArea
+              v-else-if="item.type === 'field_area'"
+              :ref="setAreaRef"
+              v-model="values[item.field.uuid]"
+              :values="values"
+              :field="item.field"
+              :area="item.area"
+              :submittable="true"
+              :page-width="1400"
+              :page-height="(1400.0 / pageElem.offsetWidth) * pageElem.offsetHeight"
+              :field-index="item.fieldIndex"
+              :is-inline-size="isInlineSize"
+              :scroll-padding="scrollPadding"
+              :submitter="submitter"
+              :with-field-placeholder="withFieldPlaceholder"
+              :with-signature-id="withSignatureId"
+              :is-active="currentStep === item.step"
+              :with-label="withLabel && !withFieldPlaceholder && item.step.length < 2"
+              :is-value-set="item.step.some((f) => f.uuid in values)"
+              :attachments-index="attachmentsIndex"
+              @click="[$emit('focus-step', item.stepIndex), maybeScrollOnClick(item.field, item.area)]"
+            />
+            <FieldArea
+              v-else-if="item.type === 'readonly_field_area'"
+              :model-value="readonlyConditionalFieldValues[item.field.uuid]"
+              :values="readonlyConditionalFieldValues"
+              :field="item.field"
+              :area="item.area"
+              :submittable="false"
+              :page-width="1400"
+              :page-height="(1400.0 / pageElem.offsetWidth) * pageElem.offsetHeight"
+              :field-index="item.fieldIndex"
+              :is-inline-size="isInlineSize"
+              :submitter="submitter"
+              :attachments-index="attachmentsIndex"
+            />
+            <FieldArea
+              v-else-if="item.type === 'formula_area' && isMathLoaded"
+              :model-value="calculateFormula(item.field)"
+              :is-inline-size="isInlineSize"
+              :field="item.field"
+              :area="item.area"
+              :submittable="false"
+              :field-index="item.fieldIndex"
+            />
+          </template>
+        </Teleport>
+      </template>
+    </template>
+  </template>
+</template>
+
+<script>
+import FieldArea from './area'
+import FormulaAreas from './formula_areas'
+import FieldAreas from './areas'
+
+export default {
+  name: 'AccessibilityAreas',
+  components: {
+    FieldArea
+  },
+  inject: ['baseUrl', 't'],
+  props: {
+    submitterSlug: {
+      type: String,
+      required: true
+    },
+    filledFieldsIndex: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    steps: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    readonlyConditionalFields: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    readonlyConditionalFieldValues: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    formulaFields: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    values: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    readonlyValues: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    submitter: {
+      type: Object,
+      required: true
+    },
+    currentStep: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    withFieldPlaceholder: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    withSignatureId: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    withLabel: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    scrollPadding: {
+      type: String,
+      required: false,
+      default: '-80px'
+    },
+    scrollEl: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    attachmentsIndex: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    fetchOptions: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
+  },
+  emits: ['focus-step'],
+  data () {
+    return {
+      isMathLoaded: false,
+      math: null,
+      textRuns: {},
+      areaRefs: []
+    }
+  },
+  computed: {
+    fieldValuesIndex () {
+      return this.filledFieldsIndex || this.extractStaticValues()
+    },
+    isMobileContainer: FieldAreas.computed.isMobileContainer,
+    isInlineSize: FieldAreas.computed.isInlineSize,
+    fieldsUuidIndex () {
+      return this.formulaFields.reduce((acc, field) => {
+        acc[field.uuid] = field
+
+        return acc
+      }, {})
+    },
+    fieldAreasIndex () {
+      const index = Object.create(null)
+
+      this.steps.forEach((step, stepIndex) => {
+        step.forEach((field, fieldIndex) => {
+          (field.areas || []).forEach((area) => {
+            index[area.attachment_uuid] ||= Object.create(null)
+            index[area.attachment_uuid][area.page] ||= []
+            index[area.attachment_uuid][area.page].push({
+              type: 'field_area',
+              field,
+              area,
+              step,
+              stepIndex,
+              fieldIndex,
+              x: area.x,
+              y: area.y,
+              w: area.w,
+              h: area.h
+            })
+          })
+        })
+      })
+
+      return index
+    },
+    formulaAreasIndex () {
+      const index = Object.create(null)
+
+      this.formulaFields.forEach((field, fieldIndex) => {
+        (field.areas || []).forEach((area) => {
+          index[area.attachment_uuid] ||= Object.create(null)
+          index[area.attachment_uuid][area.page] ||= []
+          index[area.attachment_uuid][area.page].push({
+            type: 'formula_area',
+            field,
+            area,
+            fieldIndex,
+            x: area.x,
+            y: area.y,
+            w: area.w,
+            h: area.h
+          })
+        })
+      })
+
+      return index
+    },
+    readonlyFieldAreasIndex () {
+      const index = Object.create(null)
+
+      this.readonlyConditionalFields.forEach((field, fieldIndex) => {
+        (field.areas || []).forEach((area) => {
+          index[area.attachment_uuid] ||= Object.create(null)
+          index[area.attachment_uuid][area.page] ||= []
+          index[area.attachment_uuid][area.page].push({
+            type: 'readonly_field_area',
+            field,
+            area,
+            fieldIndex,
+            x: area.x,
+            y: area.y,
+            w: area.w,
+            h: area.h
+          })
+        })
+      })
+
+      return index
+    }
+  },
+  beforeUpdate () {
+    this.areaRefs = []
+  },
+  async mounted () {
+    const [metadataResult] = await Promise.all([
+      fetch(this.baseUrl + `/s/${this.submitterSlug}/metadata`, {
+        ...this.fetchOptions
+      }).then((r) => r.json()).catch(() => ({})),
+      this.loadMath()
+    ])
+
+    this.textRuns = metadataResult.text_runs || {}
+  },
+  methods: {
+    normalizeFormula: FormulaAreas.methods.normalizeFormula,
+    calculateFormula: FormulaAreas.methods.calculateFormula,
+    scrollInContainer: FieldAreas.methods.scrollInContainer,
+    scrollIntoArea: FieldAreas.methods.scrollIntoArea,
+    scrollIntoField: FieldAreas.methods.scrollIntoField,
+    maybeScrollOnClick: FieldAreas.methods.maybeScrollOnClick,
+    setAreaRef (el) {
+      if (el) {
+        this.areaRefs.push(el)
+      }
+    },
+    async loadMath () {
+      if (this.formulaFields.length && !this.isMathLoaded) {
+        const { Calculator } = await import('./calculator')
+
+        this.math = new Calculator()
+        this.isMathLoaded = true
+      }
+    },
+    extractStaticValues () {
+      const result = Object.create(null)
+      const root = this.$root.$el?.parentNode?.getRootNode() || document
+      const pageContainers = root.querySelectorAll('page-container')
+
+      pageContainers.forEach((container) => {
+        const overlay = container.querySelector('[id^="page-"]')
+
+        if (!overlay) return
+
+        const parts = overlay.id.split('-')
+        const pageIndex = parseInt(parts[parts.length - 1])
+        const docUuid = parts.slice(1, -1).join('-')
+
+        const fieldValues = overlay.querySelectorAll('field-value')
+
+        if (!fieldValues.length) return
+
+        result[docUuid] ||= Object.create(null)
+        result[docUuid][pageIndex] = []
+
+        fieldValues.forEach((el) => {
+          const style = el.style
+          const x = parseFloat(style.left) / 100
+          const y = parseFloat(style.top) / 100
+          const w = parseFloat(style.width) / 100
+          const h = parseFloat(style.height) / 100
+          const text = el.textContent.trim()
+
+          if (text) {
+            result[docUuid][pageIndex].push({ type: 'static_value', text, x, y, w, h })
+          }
+        })
+      })
+
+      return result
+    },
+    findPageElement (docUuid, pageIndex) {
+      return (this.$root.$el?.parentNode?.getRootNode() || document).getElementById(`page-${docUuid}-${pageIndex}`)
+    },
+    sortedItemsForPage (docUuid, pageIndex) {
+      const items = []
+
+      const pageTextRuns = this.textRuns[docUuid]?.[pageIndex] || []
+
+      pageTextRuns.forEach((run) => {
+        items.push({
+          type: 'text_run',
+          text: run.text,
+          x: run.x,
+          y: run.y,
+          w: run.w,
+          h: run.h,
+          font_size: run.font_size
+        })
+      })
+
+      const fieldAreas = this.fieldAreasIndex[docUuid]?.[pageIndex] || []
+      items.push(...fieldAreas)
+
+      const readonlyFieldAreas = this.readonlyFieldAreasIndex[docUuid]?.[pageIndex] || []
+      items.push(...readonlyFieldAreas)
+
+      const formulaAreas = this.formulaAreasIndex[docUuid]?.[pageIndex] || []
+      items.push(...formulaAreas)
+
+      const pageFieldValues = this.fieldValuesIndex[docUuid]?.[pageIndex] || []
+      items.push(...pageFieldValues)
+
+      items.sort((a, b) => {
+        const aCenterY = a.y + a.h / 2
+        const bCenterY = b.y + b.h / 2
+        const lineThreshold = Math.min(a.h, b.h) / 2
+
+        if (Math.abs(aCenterY - bCenterY) < lineThreshold) {
+          return a.x - b.x
+        }
+
+        return aCenterY - bCenterY
+      })
+
+      const grouped = []
+      let currentGroup = null
+
+      const closeGroup = () => {
+        if (!currentGroup) return
+
+        const groupItems = currentGroup.items
+        const minX = Math.min(...groupItems.map((i) => i.x))
+        const minY = Math.min(...groupItems.map((i) => i.y))
+        const maxEndX = Math.max(...groupItems.map((i) => i.x + i.w))
+        const maxEndY = Math.max(...groupItems.map((i) => i.y + i.h))
+
+        currentGroup.x = minX
+        currentGroup.y = minY
+        currentGroup.w = maxEndX - minX
+        currentGroup.h = maxEndY - minY
+        currentGroup.text = groupItems.map((i) => i.text).join(' ').replace(/\s+/g, ' ').trim()
+
+        grouped.push(currentGroup)
+        currentGroup = null
+      }
+
+      for (const item of items) {
+        const isTextLike = item.type === 'text_run' || item.type === 'static_value'
+
+        if (!isTextLike) {
+          closeGroup()
+          grouped.push(item)
+          continue
+        }
+
+        if (!currentGroup) {
+          currentGroup = { type: 'text_group', items: [] }
+        }
+
+        currentGroup.items.push(item)
+      }
+
+      closeGroup()
+
+      return grouped
+    }
+  }
+}
+</script>

app/javascript/submission_form/appears_on.vue

@@ -42,10 +42,25 @@ export default {
       const areas = {}
 
       this.field.areas?.forEach((area) => {
-        areas[area.attachment_uuid + area.page] ||= area
+        areas[area.attachment_uuid] ||= []
+        areas[area.attachment_uuid].push(area)
       })
 
-      return Object.values(areas).slice(0, 6)
+      const sortedAreas = Object.values(areas).reduce((acc, group) => {
+        const seen = {}
+        const sortedGroup = [...group].sort((a, b) => a.page - b.page)
+
+        sortedGroup.forEach((area) => {
+          if (!seen[area.page]) {
+            seen[area.page] = true
+            acc.push(area)
+          }
+        })
+
+        return acc
+      }, [])
+
+      return sortedAreas.slice(0, 6)
     }
   }
 }

app/javascript/submission_form/area.vue

@@ -1,9 +1,14 @@
 <template>
   <div
-    class="flex absolute lg:text-base -outline-offset-1 field-area"
+    class="flex absolute lg:text-base -outline-offset-1 focus-visible:outline-blue-500 focus-visible:outline-2 focus-visible:outline field-area"
     dir="auto"
     :style="[computedStyle, fontStyle]"
     :class="{ 'cursor-default': !submittable, 'border border-red-100 bg-red-100 cursor-pointer': submittable, 'border border-red-100': !isActive && submittable, 'bg-opacity-80': !isActive && !isValueSet && submittable, 'outline-red-500 outline-dashed outline-2 z-10 field-area-active': isActive && submittable, 'bg-opacity-40': (isActive || isValueSet) && submittable }"
+    :role="submittable && !isNativeInputField ? 'button' : undefined"
+    :tabindex="submittable && !isNativeInputField ? 0 : undefined"
+    :aria-label="submittable && !isNativeInputField ? fieldAreaLabel : undefined"
+    @keydown.enter.prevent="submittable && !isNativeInputField ? $el.click() : undefined"
+    @keydown.space.prevent="submittable && !isNativeInputField ? $el.click() : undefined"
   >
     <div
       v-if="(!withFieldPlaceholder || !field.name || field.type === 'cells') && !isActive && !isValueSet && field.type !== 'checkbox' && submittable && !area.option_uuid"
@@ -18,6 +23,7 @@
           width="100%"
           height="100%"
           class="max-h-10 text-base-content"
+          aria-hidden="true"
         />
       </span>
     </div>
@@ -129,6 +135,7 @@
         v-if="submittable"
         type="checkbox"
         :value="false"
+        :aria-label="field.name || fieldNames[field.type]"
         class="aspect-square base-checkbox"
         :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
         :checked="!!modelValue"
@@ -149,6 +156,8 @@
         v-if="submittable"
         type="radio"
         :value="false"
+        :name="`radio-area-${field.uuid}`"
+        :aria-label="optionValue(option)"
         class="aspect-square checked:checkbox checked:checkbox-xs"
         :class="{ 'base-radio': !modelValue || modelValue !== optionValue(option), '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
         :checked="!!modelValue && modelValue === optionValue(option)"
@@ -169,6 +178,7 @@
         v-if="submittable"
         type="checkbox"
         :value="false"
+        :aria-label="optionValue(option)"
         class="aspect-square base-checkbox"
         :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
         :checked="!!modelValue && modelValue.includes(optionValue(option))"
@@ -400,6 +410,16 @@ export default {
         kba: this.t('kba')
       }
     },
+    isNativeInputField () {
+      return ['checkbox', 'radio', 'multiple'].includes(this.field.type)
+    },
+    fieldAreaLabel () {
+      const name = this.field.name || this.fieldNames[this.field.type] || this.field.type
+      if (this.area.option_uuid && this.option) {
+        return `${name} - ${this.optionValue(this.option)}`
+      }
+      return name
+    },
     strikethroughWidth () {
       if (this.isInlineSize) {
         return '0.6cqmin'
@@ -507,7 +527,8 @@ export default {
         try {
           return this.formatDate(
             this.modelValue === '{{date}}' ? new Date() : new Date(this.modelValue),
-            this.field.preferences?.format || (this.locale.endsWith('-US') ? 'MM/DD/YYYY' : 'DD/MM/YYYY')
+            this.field.preferences?.format || (this.locale.endsWith('-US') ? 'MM/DD/YYYY' : 'DD/MM/YYYY'),
+            { withTimePlaceholders: this.modelValue === '{{date}}', utc: this.modelValue !== '{{date}}' }
           )
         } catch {
           return this.modelValue
@@ -622,40 +643,63 @@ export default {
         return new Intl.NumberFormat('de-DE').format(number)
       } else if (format === 'space') {
         return new Intl.NumberFormat('fr-FR').format(number)
+      } else if (format === 'percent') {
+        return `${number}%`
+      } else if (format === 'percent_space') {
+        return `${String(number).replace('.', ',')} %`
       } else {
         return number
       }
     },
-    formatDate (date, format) {
-      const monthFormats = {
-        M: 'numeric',
-        MM: '2-digit',
-        MMM: 'short',
-        MMMM: 'long'
-      }
+    formatDate (date, format, { withTimePlaceholders = false, utc = true } = {}) {
+      const monthFormats = { M: 'numeric', MM: '2-digit', MMM: 'short', MMMM: 'long' }
+      const dayFormats = { D: 'numeric', DD: '2-digit' }
+      const yearFormats = { YYYY: 'numeric', YYY: 'numeric', YY: '2-digit' }
+      const hourFormats = { H: 'numeric', HH: '2-digit', h: 'numeric', hh: '2-digit' }
+      const minuteFormats = { m: 'numeric', mm: '2-digit' }
+      const secondFormats = { s: 'numeric', ss: '2-digit' }
 
-      const dayFormats = {
-        D: 'numeric',
-        DD: '2-digit'
-      }
+      const hasTime = /[HhAasz]/.test(format)
 
-      const yearFormats = {
-        YYYY: 'numeric',
-        YYY: 'numeric',
-        YY: '2-digit'
-      }
-
-      const parts = new Intl.DateTimeFormat([], {
+      const opts = {
         day: dayFormats[format.match(/D+/)],
         month: monthFormats[format.match(/M+/)],
-        year: yearFormats[format.match(/Y+/)],
-        timeZone: 'UTC'
-      }).formatToParts(date)
+        year: yearFormats[format.match(/Y+/)]
+      }
 
-      return format
-        .replace(/D+/, parts.find((p) => p.type === 'day').value)
-        .replace(/M+/, parts.find((p) => p.type === 'month').value)
-        .replace(/Y+/, parts.find((p) => p.type === 'year').value)
+      if (format.match(/H+/)) { opts.hour = hourFormats[format.match(/H+/)[0]]; opts.hour12 = false }
+      if (format.match(/h+/)) { opts.hour = hourFormats[format.match(/h+/)[0]]; opts.hour12 = true }
+      if (/[Aa]/.test(format) && opts.hour12 === undefined) opts.hour12 = true
+      if (format.match(/m+/)) opts.minute = minuteFormats[format.match(/m+/)[0]]
+      if (format.match(/s+/)) opts.second = secondFormats[format.match(/s+/)[0]]
+      if (/z/.test(format)) opts.timeZoneName = 'short'
+      if (!hasTime && utc) opts.timeZone = 'UTC'
+
+      const partTypes = {
+        M: 'month',
+        D: 'day',
+        Y: 'year',
+        H: 'hour',
+        h: 'hour',
+        m: 'minute',
+        s: 'second',
+        z: 'timeZoneName',
+        A: 'dayPeriod',
+        a: 'dayPeriod'
+      }
+
+      const parts = new Intl.DateTimeFormat([], opts).formatToParts(date)
+
+      return format.replace(/MMMM|MMM|MM|M|DD|D|YYYY|YYY|YY|HH|hh|H|h|mm|m|ss|s|A|a|z/g, (token) => {
+        if (withTimePlaceholders && /^(HH|hh|H|h|mm|m|ss|s|A|a)$/.test(token)) return '--'
+
+        const value = parts.find((p) => p.type === partTypes[token[0]])?.value
+
+        if (token === 'A') return (value || '').toUpperCase()
+        if (token === 'a') return (value || '').toLowerCase()
+
+        return value
+      })
     },
     updateMultipleSelectValue (value) {
       if (this.modelValue?.includes(value)) {

app/javascript/submission_form/attachment_step.vue

@@ -1,7 +1,11 @@
 <template>
   <div>
-    <div v-if="value.length">
-      <div
+    <ul
+      v-if="value.length"
+      :aria-label="t('uploaded_files')"
+      class="list-none p-0 m-0"
+    >
+      <li
         v-for="(val, index) in value"
         :key="index"
         class="flex mb-2"
@@ -20,23 +24,27 @@
           <IconPaperclip
             :width="16"
             class="flex-none"
-            :heigh="16"
+            :height="16"
+            aria-hidden="true"
           />
           <span>
             {{ attachmentsIndex[val].filename }}
           </span>
         </a>
         <button
+          type="button"
           class="remove-attachment-button"
+          :aria-label="`${t('clear')} ${attachmentsIndex[val].filename}`"
           @click.prevent="removeAttachment(val)"
         >
           <IconTrashX
             :width="18"
-            :heigh="19"
+            :height="19"
+            aria-hidden="true"
           />
         </button>
-      </div>
-    </div>
+      </li>
+    </ul>
     <template v-else>
       <input
         value=""

app/javascript/submission_form/completed.vue

@@ -3,10 +3,13 @@
     id="form_completed"
     class="mx-auto max-w-md flex flex-col completed-form"
     dir="auto"
+    role="status"
+    tabindex="-1"
   >
     <div class="font-medium text-2xl flex items-center space-x-1.5 mx-auto">
       <IconCircleCheck
         class="inline text-green-600"
+        aria-hidden="true"
         :width="30"
         :height="30"
       />
@@ -42,8 +45,12 @@
         <IconInnerShadowTop
           v-if="isSendingCopy"
           class="animate-spin"
+          aria-hidden="true"
+        />
+        <IconMail
+          v-else
+          aria-hidden="true"
         />
-        <IconMail v-else />
         <span>
           {{ t('send_copy_via_email') }}
         </span>
@@ -57,8 +64,12 @@
         <IconInnerShadowTop
           v-if="isDownloading"
           class="animate-spin"
+          aria-hidden="true"
+        />
+        <IconDownload
+          v-else
+          aria-hidden="true"
         />
-        <IconDownload v-else />
         <span>
           {{ t('download') }}
         </span>
@@ -199,7 +210,7 @@ export default {
       })
     }
 
-    document.querySelectorAll('#decline_button').forEach((button) => {
+    document.querySelectorAll('#decline_button, #decline_button_mobile, #delegate_button, #delegate_button_mobile').forEach((button) => {
       button.setAttribute('disabled', 'true')
     })
   },

app/javascript/submission_form/date_step.vue

@@ -27,15 +27,20 @@
       </label>
       <button
         v-if="withToday"
+        type="button"
         class="btn btn-outline btn-sm !normal-case font-normal set-current-date-button"
         @click.prevent="[setCurrentDate(), $emit('focus')]"
       >
-        <IconCalendarCheck :width="16" />
+        <IconCalendarCheck
+          :width="16"
+          aria-hidden="true"
+        />
         {{ t('set_today') }}
       </button>
     </div>
     <div
       v-if="field.description"
+      :id="field.uuid + '-desc'"
       class="mb-3 px-1 field-description-text"
       dir="auto"
     >
@@ -51,12 +56,19 @@
         :max="validationMax"
         class="base-input !text-2xl text-center w-full"
         :required="field.required"
-        type="date"
-        :name="`values[${field.uuid}]`"
+        :aria-describedby="field.description ? field.uuid + '-desc' : undefined"
+        :type="inputType"
+        :name="formatType === 'datetime' ? undefined : `values[${field.uuid}]`"
         @keydown.enter="onEnter"
         @focus="$emit('focus')"
         @paste="onPaste"
       >
+      <input
+        v-if="formatType === 'datetime'"
+        type="hidden"
+        :name="`values[${field.uuid}]`"
+        :value="modelValue"
+      >
     </div>
   </div>
 </template>
@@ -92,14 +104,19 @@ export default {
   },
   emits: ['update:model-value', 'focus', 'submit'],
   computed: {
+    formatType () {
+      const format = this.field.preferences?.format || ''
+
+      if (/[HhAasz]/.test(format)) return 'datetime'
+      if (format && !/[Dd]/.test(format)) return 'month'
+
+      return 'date'
+    },
+    inputType () {
+      return { datetime: 'datetime-local', month: 'month', date: 'date' }[this.formatType]
+    },
     dateNowString () {
-      const today = new Date()
-
-      const yyyy = today.getFullYear()
-      const mm = String(today.getMonth() + 1).padStart(2, '0')
-      const dd = String(today.getDate()).padStart(2, '0')
-
-      return `${yyyy}-${mm}-${dd}`
+      return this.formatDateValue(new Date())
     },
     validationMin () {
       if (this.field.validation?.min) {
@@ -116,6 +133,8 @@ export default {
       }
     },
     withToday () {
+      if (this.formatType === 'datetime') return false
+
       const todayDate = new Date().setHours(0, 0, 0, 0)
 
       if (this.validationMin) {
@@ -132,9 +151,25 @@ export default {
     },
     value: {
       set (value) {
+        if (this.formatType === 'datetime' && value) {
+          const d = new Date(value)
+
+          if (!isNaN(d)) {
+            this.$emit('update:model-value', d.toISOString())
+
+            return
+          }
+        }
+
         this.$emit('update:model-value', value)
       },
       get () {
+        if (this.formatType === 'datetime') {
+          const d = new Date(this.modelValue)
+
+          return isNaN(d) ? '' : this.formatDateValue(d)
+        }
+
         return this.modelValue
       }
     }
@@ -158,20 +193,32 @@ export default {
 
       const parsedDate = new Date(pasteData)
 
-      if (!isNaN(parsedDate)) {
-        const inputEl = this.$refs.input
+      if (isNaN(parsedDate)) return
 
-        inputEl.valueAsDate = new Date(parsedDate.getTime() - parsedDate.getTimezoneOffset() * 60000)
-
-        inputEl.dispatchEvent(new Event('input', { bubbles: true }))
-      }
+      this.setInputValue(parsedDate)
     },
     setCurrentDate () {
+      this.setInputValue(new Date())
+    },
+    setInputValue (date) {
       const inputEl = this.$refs.input
 
-      inputEl.valueAsDate = new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000)
+      if (this.formatType === 'date') {
+        inputEl.valueAsDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000)
+      } else {
+        inputEl.value = this.formatDateValue(date)
+      }
 
       inputEl.dispatchEvent(new Event('input', { bubbles: true }))
+    },
+    formatDateValue (date) {
+      const pad = (n) => String(n).padStart(2, '0')
+      const ymd = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
+
+      if (this.formatType === 'month') return ymd.slice(0, 7)
+      if (this.formatType === 'datetime') return `${ymd}T${pad(date.getHours())}:${pad(date.getMinutes())}`
+
+      return ymd
     }
   }
 }

app/javascript/submission_form/dropzone.vue

@@ -39,8 +39,9 @@
         ref="input"
         :multiple="multiple"
         :accept="accept"
+        :aria-label="message"
         type="file"
-        class="hidden"
+        class="sr-only"
         @change="onSelectFiles"
       >
     </label>
@@ -50,6 +51,36 @@
 <script>
 import { IconCloudUpload, IconInnerShadowTop } from '@tabler/icons-vue'
 
+function convertImage (sourceFile, targetType, quality) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+
+    reader.onload = function (event) {
+      const img = new Image()
+
+      img.onload = function () {
+        const canvas = document.createElement('canvas')
+        const ctx = canvas.getContext('2d')
+
+        canvas.width = img.width
+        canvas.height = img.height
+        ctx.drawImage(img, 0, 0)
+        canvas.toBlob(function (blob) {
+          const ext = targetType === 'image/jpeg' ? '.jpg' : '.png'
+          const newFile = new File([blob], sourceFile.name.replace(/\.\w+$/, ext), { type: targetType })
+          resolve(newFile)
+        }, targetType, quality)
+      }
+
+      img.onerror = () => reject(new Error(`browser cannot decode ${sourceFile.type || sourceFile.name}`))
+
+      img.src = event.target.result
+    }
+    reader.onerror = reject
+    reader.readAsDataURL(sourceFile)
+  })
+}
+
 export default {
   name: 'FileDropzone',
   components: {
@@ -152,8 +183,14 @@ export default {
               }
             })
           } else {
-            if (file.type === 'image/bmp' || file.type === 'image/vnd.microsoft.icon') {
-              file = await this.convertBmpToPng(file)
+            try {
+              if (['image/bmp', 'image/vnd.microsoft.icon', 'image/svg+xml', 'image/gif'].includes(file.type)) {
+                file = await convertImage(file, 'image/png')
+              } else if (['image/heic', 'image/heif', 'image/heic-sequence', 'image/heif-sequence', 'image/avif', 'image/avif-sequence', 'image/webp'].includes(file.type)) {
+                file = await convertImage(file, 'image/jpeg', 0.9)
+              }
+            } catch (e) {
+              alert(e.message)
             }
 
             formData.append('file', file)
@@ -180,32 +217,6 @@ export default {
       }).finally(() => {
         this.isLoading = false
       })
-    },
-    convertBmpToPng (bmpFile) {
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader()
-
-        reader.onload = function (event) {
-          const img = new Image()
-
-          img.onload = function () {
-            const canvas = document.createElement('canvas')
-            const ctx = canvas.getContext('2d')
-
-            canvas.width = img.width
-            canvas.height = img.height
-            ctx.drawImage(img, 0, 0)
-            canvas.toBlob(function (blob) {
-              const newFile = new File([blob], bmpFile.name.replace(/\.\w+$/, '.png'), { type: 'image/png' })
-              resolve(newFile)
-            }, 'image/png')
-          }
-
-          img.src = event.target.result
-        }
-        reader.onerror = reject
-        reader.readAsDataURL(bmpFile)
-      })
     }
   }
 }

app/javascript/submission_form/form.vue

@@ -1,5 +1,52 @@
 <template>
+  <Teleport
+    v-if="withAccessibilityAreas === null && !isAccessibilityMode"
+    to="#sr_only_content"
+  >
+    <button
+      class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-[100] focus:px-4 focus:py-2 focus:bg-base-100 focus:text-base-content focus:rounded focus:shadow-lg"
+      @click="isAccessibilityMode = true"
+    >
+      {{ t('enter_screen_reader_mode') }}
+    </button>
+  </Teleport>
+  <Teleport
+    v-for="item in (withAccessibilityAreas === null ? schema : [])"
+    :key="item.attachment_uuid"
+    :to="`#document-${item.attachment_uuid} .sr_only_content`"
+  >
+    <button
+      v-if="!isAccessibilityMode"
+      class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-[100] focus:px-4 focus:py-2 focus:bg-base-100 focus:text-base-content focus:rounded focus:shadow-lg"
+      @click="isAccessibilityMode = true"
+    >
+      {{ t('enter_screen_reader_mode') }}
+    </button>
+  </Teleport>
+  <AccessibilityAreas
+    v-if="withAccessibilityAreas || isAccessibilityMode"
+    ref="areas"
+    :submitter-slug="submitterSlug"
+    :steps="stepFields"
+    :readonly-conditional-fields="readonlyConditionalFields"
+    :readonly-conditional-field-values="readonlyConditionalFieldValues"
+    :formula-fields="formulaFields"
+    :values="values"
+    :readonly-values="readonlyFieldValues"
+    :submitter="submitter"
+    :scroll-el="scrollEl"
+    :current-step="currentStepFields"
+    :with-field-placeholder="withFieldPlaceholder"
+    :with-signature-id="withSignatureId"
+    :with-label="withFieldLabels && !isAnonymousChecboxes && showFieldNames"
+    :scroll-padding="scrollPadding"
+    :attachments-index="attachmentsIndex"
+    :fetch-options="fetchOptions"
+    :filled-fields-index="filledFieldsIndex"
+    @focus-step="[saveStep(), currentField.type !== 'checkbox' ? isFormVisible = true : '', goToStep($event, false, true)]"
+  />
   <FieldAreas
+    v-if="!withAccessibilityAreas && !isAccessibilityMode"
     ref="areas"
     :steps="stepFields"
     :values="values"
@@ -14,6 +61,7 @@
     @focus-step="[saveStep(), currentField.type !== 'checkbox' ? isFormVisible = true : '', goToStep($event, false, true)]"
   />
   <FieldAreas
+    v-if="!withAccessibilityAreas && !isAccessibilityMode"
     :steps="readonlyConditionalFields.map((e) => [e])"
     :values="readonlyConditionalFieldValues"
     :submitter="submitter"
@@ -21,7 +69,7 @@
     :submittable="false"
   />
   <FormulaFieldAreas
-    v-if="formulaFields.length"
+    v-if="!withAccessibilityAreas && !isAccessibilityMode && formulaFields.length"
     :fields="formulaFields"
     :readonly-values="readonlyFieldValues"
     :values="values"
@@ -47,7 +95,7 @@
       v-else
       id="complete_form_button"
       class="btn btn-sm btn-neutral text-white px-4 w-full flex justify-center"
-      form="steps_form"
+      form="complete_form"
       type="submit"
       name="completed"
       value="true"
@@ -57,6 +105,7 @@
         <IconInnerShadowTop
           v-if="isSubmittingComplete"
           class="mr-1 animate-spin w-5 h-5"
+          aria-hidden="true"
         />
         <span>
           {{ t('complete') }}
@@ -64,6 +113,39 @@
       </span>
     </button>
   </Teleport>
+  <Teleport
+    v-for="ref in (showCompleteButton ? [completeButtonContainer, completeButtonScrollContainer].filter(Boolean) : [])"
+    :key="ref"
+    :to="ref"
+  >
+    <button
+      class="complete-button btn btn-sm btn-neutral text-white px-4"
+      form="complete_form"
+      type="submit"
+      name="completed"
+      value="true"
+      :disabled="isSubmittingComplete"
+    >
+      <span class="flex items-center">
+        <IconInnerShadowTop
+          v-if="isSubmittingComplete"
+          class="mr-1 animate-spin w-5 h-5"
+          aria-hidden="true"
+        />
+        <span>
+          {{ t('complete') }}
+        </span>
+      </span>
+    </button>
+  </Teleport>
+  <form
+    v-if="!isCompleted && !isInvite"
+    id="complete_form"
+    class="hidden"
+    :action="submitPath"
+    method="post"
+    @submit.prevent="submitStep"
+  />
   <button
     v-if="!isFormVisible"
     id="expand_form_button"
@@ -88,6 +170,7 @@
       class="absolute right-0 mr-4"
       :width="20"
       :height="20"
+      aria-hidden="true"
     />
   </button>
   <div
@@ -103,11 +186,13 @@
       class="absolute right-0 top-0 minimize-form-button"
       :class="currentField?.description?.length > 100 ? 'mr-1 mt-1 md:mr-2 md:mt-2': 'mr-2 mt-2 hidden md:block'"
       :title="t('minimize')"
+      :aria-label="t('minimize')"
       @click.prevent="minimizeForm"
     >
       <IconArrowsDiagonalMinimize2
         :width="20"
         :height="20"
+        aria-hidden="true"
       />
     </button>
     <div
@@ -193,6 +278,7 @@
             />
             <div
               v-if="currentField.description"
+              :id="currentField.uuid + '-desc'"
               dir="auto"
               class="mb-3 px-1 field-description-text"
             >
@@ -203,6 +289,7 @@
               :id="currentField.uuid"
               dir="auto"
               :required="currentField.required"
+              :aria-describedby="currentField.description ? currentField.uuid + '-desc' : undefined"
               class="select base-input !text-2xl w-full text-center font-normal"
               :class="{ 'text-gray-300': !values[currentField.uuid] }"
               :name="`values[${currentField.uuid}]`"
@@ -250,6 +337,7 @@
             </label>
             <div
               v-if="currentField.description"
+              :id="currentField.uuid + '-desc'"
               dir="auto"
               class="mb-3 px-1 field-description-text"
             >
@@ -309,6 +397,7 @@
           >
             <div
               v-if="currentField.description"
+              :id="currentField.uuid + '-desc'"
               dir="auto"
               class="mb-3 px-1 field-description-text"
             >
@@ -511,6 +600,7 @@
               <IconInnerShadowTop
                 v-if="isSubmitting"
                 class="mr-1 animate-spin"
+                aria-hidden="true"
               />
               <span>
                 {{ submitButtonText }}
@@ -522,6 +612,7 @@
           </button>
           <div
             v-if="showFillAllRequiredFields"
+            role="alert"
             class="text-center mt-1"
           >
             {{ t('please_fill_all_required_fields') }}
@@ -554,8 +645,10 @@
         :can-send-email="canSendEmail && !!submitter.email"
         :submitter-slug="submitterSlug"
       />
-      <div
+      <nav
         v-if="stepFields.length < 80"
+        :aria-label="t('form_progress')"
+        :aria-hidden="isCompleted"
         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">
@@ -563,16 +656,18 @@
             v-for="(step, index) in stepFields"
             :key="step[0].uuid"
           >
-            <a
+            <button
               v-if="!onlyRequiredFields || step.some((f) => f.required)"
-              href="#"
-              class="inline border border-base-300 h-3 w-3 rounded-full mx-1 mt-1"
+              type="button"
+              :aria-label="`${t('step')} ${index + 1}`"
+              :aria-current="index === currentStep ? 'step' : undefined"
+              class="inline border border-base-300 h-3 w-3 rounded-full mx-1 mt-1 p-0"
               :class="{ 'bg-base-300 steps-progress-current': index === currentStep, 'bg-base-content': (index < currentStep && stepFields[index].every((f) => !f.required || ![null, undefined, ''].includes(values[f.uuid]))) || isCompleted, 'bg-white': index > currentStep }"
-              @click.prevent="isCompleted ? '' : [saveStep(), goToStep(index, true)]"
+              @click="isCompleted ? '' : [saveStep(), goToStep(index, true)]"
             />
           </template>
         </div>
-      </div>
+      </nav>
       <div
         v-else
         class="mt-5"
@@ -584,6 +679,7 @@
 <script>
 import FieldAreas from './areas'
 import FormulaFieldAreas from './formula_areas'
+import AccessibilityAreas from './accessibility_areas'
 import ImageStep from './image_step'
 import SignatureStep from './signature_step'
 import InitialsStep from './initials_step'
@@ -642,6 +738,7 @@ export default {
   name: 'SubmissionForm',
   components: {
     FieldAreas,
+    AccessibilityAreas,
     ImageStep,
     SignatureStep,
     AppearsOn,
@@ -727,6 +824,16 @@ export default {
       required: false,
       default: null
     },
+    completeButtonContainer: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    completeButtonScrollContainer: {
+      type: Object,
+      required: false,
+      default: null
+    },
     schema: {
       type: Array,
       required: false,
@@ -824,6 +931,16 @@ export default {
       required: false,
       default: ''
     },
+    filledFieldsIndex: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    withAccessibilityAreas: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
     fields: {
       type: Array,
       required: false,
@@ -934,7 +1051,9 @@ export default {
       isSubmitting: false,
       isSubmittingComplete: false,
       submittedValues: {},
-      recalculateButtonDisabledKey: ''
+      isFormStarted: false,
+      recalculateButtonDisabledKey: '',
+      isAccessibilityMode: false
     }
   },
   computed: {
@@ -981,6 +1100,10 @@ export default {
         })
       })
     },
+    showCompleteButton () {
+      return this.completeButtonContainer && !this.isCompleted && !this.isInvite && this.isFormStarted &&
+        !this.stepFields.find((fields) => fields.some((f) => f.required && isEmpty(this.submittedValues[f.uuid])))
+    },
     submitButtonText () {
       if (this.alwaysMinimize) {
         return this.t('submit')
@@ -1458,7 +1581,7 @@ export default {
           }
 
           this.enableScrollIntoField = false
-          this.$refs.form.querySelector('input[type="date"], input[type="number"], input[type="text"], select')?.focus()
+          this.$refs.form.querySelector('input[type="date"], input[type="number"], input[type="text"], input[type="tel"], textarea, select')?.focus()
           this.enableScrollIntoField = true
 
           if (clickUpload && !this.values[this.currentField.uuid] && ['file', 'image'].includes(this.currentField.type)) {
@@ -1582,6 +1705,8 @@ export default {
             return Promise.reject(new Error(data.error))
           }
 
+          this.isFormStarted = true
+
           const nextStep = (isLastStep && emptyRequiredField) || (forceComplete ? null : this.findNextStep(submitStepIndex))
 
           if (nextStep) {
@@ -1618,6 +1743,7 @@ export default {
     },
     async performComplete (resp) {
       this.isCompleted = true
+      this.isFormVisible = true
 
       if (resp?.text) {
         const respData = await resp.text()
@@ -1629,6 +1755,15 @@ export default {
 
       if (this.completedRedirectUrl) {
         window.location.href = sanitizeUrl(this.completedRedirectUrl)
+      } else {
+        this.$nextTick(() => {
+          const root = this.$root.$el.parentNode.getRootNode()
+          const completedEl = root.getElementById('form_completed')
+
+          if (completedEl) {
+            completedEl.focus()
+          }
+        })
       }
     }
   }

app/javascript/submission_form/i18n.js

@@ -1,7 +1,19 @@
 const en = {
+  step: 'Step',
+  form_progress: 'Form progress',
+  close: 'Close',
+  uploaded_files: 'Uploaded files',
+  signature_drawing_area: 'Signature drawing area. Use mouse or touch to draw your signature.',
   kba: 'KBA',
   please_upload_an_image_file: 'Please upload an image file',
   must_be_characters_length: 'Must be {number} characters long',
+  must_be_valid_ssn: 'Must be a valid SSN (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Must be a valid EIN (XX-XXXXXXX)',
+  must_be_valid_email: 'Must be a valid email address',
+  must_be_valid_url: 'Must be a valid URL (starting with http:// or https://)',
+  must_be_valid_zip: 'Must be a valid ZIP code (XXXXX or XXXXX-XXXX)',
+  must_contain_numbers_only: 'Must contain numbers only',
+  must_contain_letters_only: 'Must contain letters only',
   complete_all_required_fields_to_proceed_with_identity_verification: 'Complete all required fields to proceed with identity verification.',
   verify_id: 'Verify ID',
   identity_verification: 'Identity verification',
@@ -98,13 +110,26 @@ const en = {
   files: 'Files',
   signature_is_too_small_or_simple_please_redraw: 'Signature is too small or simple. Please redraw.',
   browser_privacy_settings_block_canvas: 'Your browser privacy settings restrict use of the drawing canvas. Please use a different browser or device, or disable privacy settings that block canvas in order to sign.',
-  wait_countdown_seconds: 'Wait {countdown} seconds'
+  wait_countdown_seconds: 'Wait {countdown} seconds',
+  enter_screen_reader_mode: 'Enter screen reader mode'
 }
 
 const es = {
+  step: 'Paso',
+  form_progress: 'Progreso del formulario',
+  close: 'Cerrar',
+  uploaded_files: 'Archivos subidos',
+  signature_drawing_area: 'Área de dibujo de firma. Use el ratón o toque para dibujar su firma.',
   kba: 'KBA',
   please_upload_an_image_file: 'Por favor, sube un archivo de imagen',
   must_be_characters_length: 'Debe tener {number} caracteres de longitud',
+  must_be_valid_ssn: 'Debe ser un SSN válido (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Debe ser un EIN válido (XX-XXXXXXX)',
+  must_be_valid_email: 'Debe ser una dirección de correo electrónico válida',
+  must_be_valid_url: 'Debe ser una URL válida (que comience con http:// o https://)',
+  must_be_valid_zip: 'Debe ser un ZIP válido (XXXXX o XXXXX-XXXX)',
+  must_contain_numbers_only: 'Debe contener solo números',
+  must_contain_letters_only: 'Debe contener solo letras',
   complete_all_required_fields_to_proceed_with_identity_verification: 'Complete todos los campos requeridos para continuar con la verificación de identidad.',
   verify_id: 'Verificar ID',
   identity_verification: 'Verificación de identidad',
@@ -125,7 +150,7 @@ const es = {
   verification_code_is_invalid: 'El código de verificación no es válido',
   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',
+  by_clicking_you_agree_to_the: 'Al hacer clic en "{button}", usted acepta la',
   electronic_signature_disclosure: 'Divulgación de Firma Electrónica',
   esignature_disclosure: 'Divulgación de eFirma',
   already_paid: 'Ya pagado',
@@ -201,13 +226,26 @@ const es = {
   files: 'Archivos',
   signature_is_too_small_or_simple_please_redraw: 'La firma es demasiado pequeña o simple. Por favor, vuelve a dibujarla.',
   browser_privacy_settings_block_canvas: 'La configuración de privacidad de su navegador restringe el uso del lienzo de dibujo. Utilice un navegador o dispositivo diferente, o desactive la configuración de privacidad que bloquea el lienzo para firmar.',
-  wait_countdown_seconds: 'Espera {countdown} segundos'
+  wait_countdown_seconds: 'Espera {countdown} segundos',
+  enter_screen_reader_mode: 'Activar modo lector de pantalla'
 }
 
 const it = {
+  step: 'Passo',
+  form_progress: 'Progresso del modulo',
+  close: 'Chiudi',
+  uploaded_files: 'File caricati',
+  signature_drawing_area: 'Area di disegno della firma. Usa il mouse o il tocco per disegnare la tua firma.',
   kba: 'KBA',
   please_upload_an_image_file: 'Per favore carica un file immagine',
   must_be_characters_length: 'Deve essere lungo {number} caratteri',
+  must_be_valid_ssn: 'Deve essere un SSN valido (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Deve essere un EIN valido (XX-XXXXXXX)',
+  must_be_valid_email: 'Deve essere un indirizzo email valido',
+  must_be_valid_url: 'Deve essere un URL valido (che inizia con http:// o https://)',
+  must_be_valid_zip: 'Deve essere uno ZIP valido (XXXXX o XXXXX-XXXX)',
+  must_contain_numbers_only: 'Deve contenere solo numeri',
+  must_contain_letters_only: 'Deve contenere solo lettere',
   complete_all_required_fields_to_proceed_with_identity_verification: "Compila tutti i campi obbligatori per procedere con la verifica dell'identità.",
   verify_id: 'Verifica ID',
   identity_verification: "Verifica dell'identità",
@@ -228,7 +266,7 @@ const it = {
   verification_code_is_invalid: 'Il codice di verifica non è valido',
   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',
+  by_clicking_you_agree_to_the: 'Cliccando su "{button}", accetti la',
   electronic_signature_disclosure: 'Divulgazione della Firma Elettronica',
   esignature_disclosure: 'Divulgazione della eFirma',
   minimize: 'Minimizza',
@@ -241,7 +279,7 @@ const it = {
   date: 'Data',
   number: 'Numero',
   image: 'Immagine',
-  pay: 'Pagamento',
+  pay: 'Paga',
   file: 'File',
   select: 'Seleziona',
   checkbox: 'Checkbox',
@@ -304,13 +342,26 @@ const it = {
   files: 'File',
   signature_is_too_small_or_simple_please_redraw: 'La firma è troppo piccola o semplice. Ridisegnala, per favore.',
   browser_privacy_settings_block_canvas: 'Le impostazioni sulla privacy del browser limitano l\'uso dell\'area di disegno. Utilizza un browser o dispositivo diverso oppure disattiva le impostazioni sulla privacy che bloccano il canvas per firmare.',
-  wait_countdown_seconds: 'Attendi {countdown} secondi'
+  wait_countdown_seconds: 'Attendi {countdown} secondi',
+  enter_screen_reader_mode: 'Attiva modalità lettore di schermo'
 }
 
 const de = {
+  step: 'Schritt',
+  form_progress: 'Formularfortschritt',
+  close: 'Schließen',
+  uploaded_files: 'Hochgeladene Dateien',
+  signature_drawing_area: 'Unterschriftszeichenbereich. Verwenden Sie die Maus oder Berührung, um Ihre Unterschrift zu zeichnen.',
   kba: 'KBA',
   please_upload_an_image_file: 'Bitte laden Sie eine Bilddatei hoch',
   must_be_characters_length: 'Muss {number} Zeichen lang sein',
+  must_be_valid_ssn: 'Muss eine gültige SSN sein (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Muss eine gültige EIN sein (XX-XXXXXXX)',
+  must_be_valid_email: 'Muss eine gültige E-Mail-Adresse sein',
+  must_be_valid_url: 'Muss eine gültige URL sein (beginnend mit http:// oder https://)',
+  must_be_valid_zip: 'Muss eine gültige ZIP sein (XXXXX oder XXXXX-XXXX)',
+  must_contain_numbers_only: 'Darf nur Zahlen enthalten',
+  must_contain_letters_only: 'Darf nur Buchstaben enthalten',
   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ätsprüfung',
@@ -407,13 +458,26 @@ const de = {
   files: 'Dateien',
   signature_is_too_small_or_simple_please_redraw: 'Die Unterschrift ist zu klein oder zu einfach. Bitte neu zeichnen.',
   browser_privacy_settings_block_canvas: 'Die Datenschutzeinstellungen Ihres Browsers schränken die Nutzung der Zeichenfläche ein. Bitte verwenden Sie einen anderen Browser oder ein anderes Gerät oder deaktivieren Sie die Datenschutzeinstellungen, die Canvas blockieren, um zu unterschreiben.',
-  wait_countdown_seconds: 'Bitte {countdown} Sekunden warten'
+  wait_countdown_seconds: 'Bitte {countdown} Sekunden warten',
+  enter_screen_reader_mode: 'Screenreader-Modus aktivieren'
 }
 
 const fr = {
+  step: 'Étape',
+  form_progress: 'Progression du formulaire',
+  close: 'Fermer',
+  uploaded_files: 'Fichiers téléchargés',
+  signature_drawing_area: 'Zone de dessin de signature. Utilisez la souris ou le toucher pour dessiner votre signature.',
   kba: 'KBA',
   please_upload_an_image_file: 'Veuillez téléverser un fichier image',
   must_be_characters_length: 'Doit comporter {number} caractères',
+  must_be_valid_ssn: 'Doit être un SSN valide (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Doit être un EIN valide (XX-XXXXXXX)',
+  must_be_valid_email: 'Doit être une adresse e-mail valide',
+  must_be_valid_url: 'Doit être une URL valide (commençant par http:// ou https://)',
+  must_be_valid_zip: 'Doit être un ZIP valide (XXXXX ou XXXXX-XXXX)',
+  must_contain_numbers_only: 'Doit contenir uniquement des chiffres',
+  must_contain_letters_only: 'Doit contenir uniquement des lettres',
   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é",
@@ -510,13 +574,26 @@ const fr = {
   files: 'Fichiers',
   signature_is_too_small_or_simple_please_redraw: 'La signature est trop petite ou trop simple. Veuillez la redessiner.',
   browser_privacy_settings_block_canvas: 'Les paramètres de confidentialité de votre navigateur empêchent l\'utilisation du canevas de dessin. Veuillez utiliser un autre navigateur ou appareil, ou désactiver les paramètres de confidentialité qui bloquent le canevas pour signer.',
-  wait_countdown_seconds: 'Veuillez patienter {countdown} secondes'
+  wait_countdown_seconds: 'Veuillez patienter {countdown} secondes',
+  enter_screen_reader_mode: 'Activer le mode lecteur d\'écran'
 }
 
 const pl = {
+  step: 'Krok',
+  form_progress: 'Postęp formularza',
+  close: 'Zamknij',
+  uploaded_files: 'Przesłane pliki',
+  signature_drawing_area: 'Obszar rysowania podpisu. Użyj myszy lub dotyku, aby narysować swój podpis.',
   kba: 'KBA',
   please_upload_an_image_file: 'Proszę przesłać plik obrazu',
   must_be_characters_length: 'Musi mieć długość {number} znaków',
+  must_be_valid_ssn: 'Musi być prawidłowym numerem SSN (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Musi być prawidłowym numerem EIN (XX-XXXXXXX)',
+  must_be_valid_email: 'Musi być prawidłowym adresem e-mail',
+  must_be_valid_url: 'Musi być prawidłowym adresem URL (zaczynającym się od http:// lub https://)',
+  must_be_valid_zip: 'Musi być prawidłowym ZIP (XXXXX lub XXXXX-XXXX)',
+  must_contain_numbers_only: 'Może zawierać tylko cyfry',
+  must_contain_letters_only: 'Może zawierać tylko litery',
   complete_all_required_fields_to_proceed_with_identity_verification: 'Uzupełnij wszystkie wymagane pola, aby kontynuować weryfikację tożsamości.',
   verify_id: 'Zweryfikuj ID',
   identity_verification: 'Weryfikacja tożsamości',
@@ -539,7 +616,7 @@ const pl = {
   scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Zeskanuj kod QR za pomocą aplikacji aparatu, aby otworzyć formularz na telefonie i narysować swój podpis',
   by_clicking_you_agree_to_the: 'Klikając na "{button}", zgadzasz się na',
   electronic_signature_disclosure: 'Ujawnienie Elektronicznej Sygnatury',
-  esignature_disclosure: 'Ujawnienie ePodpisu',
+  esignature_disclosure: 'informację o e-podpisie',
   minimize: 'Zminimalizuj',
   text: 'Tekst',
   already_paid: 'Już zapłacono',
@@ -607,19 +684,32 @@ const pl = {
   toggle_multiline_text: 'Przełącz Tekst Wielolinijkowy',
   email_has_been_sent: 'E-mail został wysłany',
   processing: 'Przetwarzanie',
-  pay_with_stripe: 'Płatność za pomocą Stripe',
+  pay_with_stripe: 'Zapłać za pomocą Stripe',
   reupload: 'Ponowne przesłanie',
   upload: 'Przesyłanie',
   files: 'Pliki',
   signature_is_too_small_or_simple_please_redraw: 'Podpis jest zbyt mały lub zbyt prosty. Proszę narysować go ponownie.',
   browser_privacy_settings_block_canvas: 'Ustawienia prywatności przeglądarki blokują użycie obszaru rysowania. Użyj innej przeglądarki lub urządzenia albo wyłącz ustawienia prywatności blokujące canvas, aby podpisać.',
-  wait_countdown_seconds: 'Poczekaj {countdown} sekund'
+  wait_countdown_seconds: 'Poczekaj {countdown} sekund',
+  enter_screen_reader_mode: 'Włącz tryb czytnika ekranu'
 }
 
 const uk = {
+  step: 'Крок',
+  form_progress: 'Прогрес форми',
+  close: 'Закрити',
+  uploaded_files: 'Завантажені файли',
+  signature_drawing_area: 'Область малювання підпису. Використовуйте мишу або дотик, щоб намалювати свій підпис.',
   kba: 'KBA',
   please_upload_an_image_file: 'Будь ласка, завантажте файл зображення',
   must_be_characters_length: 'Має містити {number} символів',
+  must_be_valid_ssn: 'Має бути дійсним SSN (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Має бути дійсним EIN (XX-XXXXXXX)',
+  must_be_valid_email: 'Має бути дійсною адресою електронної пошти',
+  must_be_valid_url: 'Має бути дійсним URL (починаючи з http:// або https://)',
+  must_be_valid_zip: 'Має бути дійсним ZIP (XXXXX або XXXXX-XXXX)',
+  must_contain_numbers_only: 'Має містити лише цифри',
+  must_contain_letters_only: 'Має містити лише літери',
   complete_all_required_fields_to_proceed_with_identity_verification: "Заповніть всі обов'язкові поля, щоб продовжити перевірку особи.",
   verify_id: 'Підтвердження ідентичності',
   identity_verification: 'Ідентифікація особи',
@@ -637,12 +727,12 @@ const uk = {
   authored_by: 'Автор',
   select_a_reason: 'Виберіть причину',
   value_is_invalid: 'Значення є неправильним',
-  verification_code_is_invalid: 'Код підтвердження є неправильним',
+  verification_code_is_invalid: 'Невірний код підтвердження',
   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: 'Розголошення Електронного Підпису',
-  esignature_disclosure: 'Розголошення еПідпису',
+  electronic_signature_disclosure: 'інформацією про е-підпис',
+  esignature_disclosure: 'інформацією про е-підпис',
   minimize: 'Зменшити',
   text: 'Текст',
   already_paid: 'Вже оплачено',
@@ -710,24 +800,37 @@ const uk = {
   toggle_multiline_text: 'Перемкнути Багаторядковий Текст',
   email_has_been_sent: 'Електронний лист був відправлений',
   processing: 'Обробка',
-  pay_with_strip: 'Сплатити за допомогою Stripe',
+  pay_with_stripe: 'Сплатити за допомогою Stripe',
   reupload: 'Перезавантажити',
   upload: 'Завантажити',
   files: 'Файли',
   signature_is_too_small_or_simple_please_redraw: 'Підпис занадто маленький або надто простий. Будь ласка, перемалюйте.',
   browser_privacy_settings_block_canvas: 'Налаштування конфіденційності вашого браузера блокують використання полотна для малювання. Будь ласка, скористайтеся іншим браузером або пристроєм, або вимкніть налаштування конфіденційності, що блокують canvas, щоб підписати.',
-  wait_countdown_seconds: 'Зачекайте {countdown} секунд'
+  wait_countdown_seconds: 'Зачекайте {countdown} секунд',
+  enter_screen_reader_mode: 'Увімкнути режим читання з екрану'
 }
 
 const cs = {
+  step: 'Krok',
+  form_progress: 'Průběh formuláře',
+  close: 'Zavřít',
+  uploaded_files: 'Nahrané soubory',
+  signature_drawing_area: 'Oblast pro kreslení podpisu. Použijte myš nebo dotyk k nakreslení podpisu.',
   kba: 'KBA',
   please_upload_an_image_file: 'Nahrajte prosím obrázkový soubor',
   must_be_characters_length: 'Musí mít délku {number} znaků',
+  must_be_valid_ssn: 'Musí být platné SSN (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Musí být platné EIN (XX-XXXXXXX)',
+  must_be_valid_email: 'Musí být platná e-mailová adresa',
+  must_be_valid_url: 'Musí být platná URL (začínající http:// nebo https://)',
+  must_be_valid_zip: 'Musí být platný ZIP (XXXXX nebo XXXXX-XXXX)',
+  must_contain_numbers_only: 'Musí obsahovat pouze čísla',
+  must_contain_letters_only: 'Musí obsahovat pouze písmena',
   complete_all_required_fields_to_proceed_with_identity_verification: 'Vyplňte všechna povinná pole, abyste mohli pokračovat v ověření identity.',
   verify_id: 'Ověřit ID',
   identity_verification: 'Ověření identity',
   complete: 'Dokončit',
-  fill_all_required_fields_to_complete: 'Please complete all mandatory fields',
+  fill_all_required_fields_to_complete: 'Vyplňte povinná pole pro dokončení',
   sign_and_complete: 'Podepsat a dokončit',
   invite: 'Pozvat',
   email: 'E-mail',
@@ -735,8 +838,8 @@ const cs = {
   reviewed: 'Zkontrolováno',
   other: 'Jiné',
   authored_by_me: 'Autorem jsem já',
-  approved_by: 'Schváleno kým',
-  reviewed_by: 'Zkontrolováno kým',
+  approved_by: 'Schválil(a)',
+  reviewed_by: 'Zkontroloval(a)',
   authored_by: 'Autorem',
   select_a_reason: 'Vyberte důvod',
   value_is_invalid: 'Hodnota je neplatná',
@@ -745,7 +848,7 @@ const cs = {
   scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Naskenujte QR kód pomocí aplikace fotoaparátu, abyste otevřeli formulář na mobilním zařízení a nakreslili svůj podpis',
   by_clicking_you_agree_to_the: 'Kliknutím na "{button}" souhlasíte s',
   electronic_signature_disclosure: 'Zveřejněním Elektronického Podpisu',
-  esignature_disclosure: 'Zveřejnění ePodpisu',
+  esignature_disclosure: 'informací o e-podpisu',
   already_paid: 'Už zaplaceno',
   minimize: 'Minimalizovat',
   text: 'Text',
@@ -813,19 +916,32 @@ 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_stripe: 'Zaplacení přes Stripe',
+  pay_with_stripe: 'Zaplatit přes Stripe',
   reupload: 'Znovu nahrát',
   upload: 'Nahrát',
   files: 'Soubory',
   signature_is_too_small_or_simple_please_redraw: 'Podpis je příliš malý nebo jednoduchý. Nakreslete jej prosím znovu.',
   browser_privacy_settings_block_canvas: 'Nastavení soukromí vašeho prohlížeče omezuje použití kreslicího plátna. Použijte prosím jiný prohlížeč nebo zařízení, nebo vypněte nastavení soukromí blokující canvas pro podepsání.',
-  wait_countdown_seconds: 'Počkejte {countdown} sekund'
+  wait_countdown_seconds: 'Počkejte {countdown} sekund',
+  enter_screen_reader_mode: 'Zapnout režim čtečky obrazovky'
 }
 
 const pt = {
+  step: 'Passo',
+  form_progress: 'Progresso do formulário',
+  close: 'Fechar',
+  uploaded_files: 'Arquivos enviados',
+  signature_drawing_area: 'Área de desenho da assinatura. Use o mouse ou toque para desenhar sua assinatura.',
   kba: 'KBA',
   please_upload_an_image_file: 'Por favor, envie um arquivo de imagem',
   must_be_characters_length: 'Deve ter {number} caracteres',
+  must_be_valid_ssn: 'Deve ser um SSN válido (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Deve ser um EIN válido (XX-XXXXXXX)',
+  must_be_valid_email: 'Deve ser um endereço de e-mail válido',
+  must_be_valid_url: 'Deve ser uma URL válida (começando com http:// ou https://)',
+  must_be_valid_zip: 'Deve ser um ZIP válido (XXXXX ou XXXXX-XXXX)',
+  must_contain_numbers_only: 'Deve conter apenas números',
+  must_contain_letters_only: 'Deve conter apenas letras',
   complete_all_required_fields_to_proceed_with_identity_verification: 'Preencha todos os campos obrigatórios para prosseguir com a verificação de identidade.',
   verify_id: 'Verificar ID',
   identity_verification: 'Verificação de identidade',
@@ -837,18 +953,18 @@ const pt = {
   approved: 'Aprovado',
   reviewed: 'Revisado',
   other: 'Outro',
-  authored_by_me: 'Autorizado por mim',
+  authored_by_me: 'Escrito por mim',
   approved_by: 'Aprovado por',
   reviewed_by: 'Revisado por',
-  authored_by: 'Autorizado por',
+  authored_by: 'Escrito por',
   select_a_reason: 'Selecione um motivo',
   value_is_invalid: 'Valor é inválido',
   verification_code_is_invalid: 'Código de verificação é inválido',
   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',
+  by_clicking_you_agree_to_the: 'Ao clicar em "{button}", você concorda com a',
   electronic_signature_disclosure: 'Divulgação de Assinatura Eletrônica',
-  esignature_disclosure: 'Divulgação da eAssinatura',
+  esignature_disclosure: 'Informação sobre eAssinatura',
   already_paid: 'Já pago',
   minimize: 'Minimizar',
   text: 'Texto',
@@ -917,18 +1033,31 @@ const pt = {
   email_has_been_sent: 'Email enviado',
   processing: 'Processamento',
   pay_with_stripe: 'Pagar com Stripe',
-  reupload: 'Reenviar',
+  reupload: 'Recarregar',
   upload: 'Carregar',
   files: 'Arquivos',
   signature_is_too_small_or_simple_please_redraw: 'A assinatura é muito pequena ou simples. Por favor, redesenhe.',
   browser_privacy_settings_block_canvas: 'As configurações de privacidade do seu navegador restringem o uso da área de desenho. Use um navegador ou dispositivo diferente, ou desative as configurações de privacidade que bloqueiam o canvas para assinar.',
-  wait_countdown_seconds: 'Aguarde {countdown} segundos'
+  wait_countdown_seconds: 'Aguarde {countdown} segundos',
+  enter_screen_reader_mode: 'Ativar modo leitor de tela'
 }
 
 const he = {
+  step: 'שלב',
+  form_progress: 'התקדמות הטופס',
+  close: 'סגור',
+  uploaded_files: 'קבצים שהועלו',
+  signature_drawing_area: 'אזור ציור חתימה. השתמש בעכבר או במגע כדי לצייר את החתימה שלך.',
   kba: 'KBA',
   please_upload_an_image_file: 'אנא העלה קובץ תמונה',
   must_be_characters_length: 'חייב להיות באורך של {number} תווים',
+  must_be_valid_ssn: 'חייב להיות SSN חוקי (XXX-XX-XXXX)',
+  must_be_valid_ein: 'חייב להיות EIN חוקי (XX-XXXXXXX)',
+  must_be_valid_email: 'חייבת להיות כתובת אימייל חוקית',
+  must_be_valid_url: 'חייבת להיות כתובת URL חוקית (המתחילה ב-http:// או https://)',
+  must_be_valid_zip: 'חייב להיות ZIP חוקי (XXXXX או XXXXX-XXXX)',
+  must_contain_numbers_only: 'חייב להכיל מספרים בלבד',
+  must_contain_letters_only: 'חייב להכיל אותיות בלבד',
   complete_all_required_fields_to_proceed_with_identity_verification: 'מלא את כל השדות הנדרשים כדי להמשיך עם אימות זהות.',
   verify_id: 'אמת מזהה',
   identity_verification: 'אימות זהות',
@@ -951,8 +1080,8 @@ const he = {
   scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'סרוק את קוד ה-QR באמצעות אפליקציית המצלמה כדי לפתוח את הטופס במובייל ולצייר את החתימה שלך',
   by_clicking_you_agree_to_the: 'על ידי לחיצה על "{button}", אתה מסכים ל',
   electronic_signature_disclosure: 'חשיפת חתימה אלקטרונית',
-  esignature_disclosure: 'חשיפת ה-eחתימה',
-  minimize: 'לקטן',
+  esignature_disclosure: 'חשיפת חתימה אלקטרונית',
+  minimize: 'מזער',
   text: 'טקסט',
   already_paid: 'כבר שולם',
   signature: 'חתימה',
@@ -963,9 +1092,9 @@ const he = {
   number: 'מספר',
   image: 'תמונה',
   file: 'קובץ',
-  pay: 'תשלום',
+  pay: 'שלם',
   select: 'בחר',
-  checkbox: 'תיק בחירה',
+  checkbox: 'סימון',
   multiple: 'רב ערכים',
   radio: 'רדיו',
   cells: 'תאים',
@@ -992,9 +1121,9 @@ const he = {
   download: 'הורדה',
   clear: 'נקה',
   redraw: 'צייר מחדש',
-  draw_initials: 'צייר ציוני ראשי תיבות',
+  draw_initials: 'צייר ראשי תיבות',
   type_signature_here: 'הקלד חתימה כאן',
-  type_initial_here: 'הקלד ציוני ראשי תיבות כאן',
+  type_initial_here: 'הקלד ראשי תיבות כאן',
   form_has_been_completed: 'הטופס הושלם',
   document_has_been_signed: 'המסמך נחתם!',
   documents_have_been_signed: 'המסמכים נחתמו!',
@@ -1004,7 +1133,7 @@ const he = {
   open_source_documents_software: 'תוכנה פתוחה למסמכים',
   verified_phone_number: 'אימות מספר טלפון',
   use_international_format: 'השתמש בפורמט בינלאומי: +1xxx',
-  six_digits_code: 'קוד משתמש שש ספרות',
+  six_digits_code: 'קוד שש ספרות',
   change_phone_number: 'שינוי מספר טלפון',
   sending: 'שולח',
   resend_code: 'שלח מחדש קוד',
@@ -1013,7 +1142,7 @@ const he = {
   set_today: 'קבע היום',
   toggle_multiline_text: 'שנה בין טקסט במספר שורות לטקסט בשורה אחת',
   draw_signature: 'צייר חתימה',
-  type_initial: 'הקלד ציוני ראשי תיבות',
+  type_initial: 'הקלד ראשי תיבות',
   draw: 'צייר',
   type: 'הקלד',
   type_text: 'הקלד טקסט',
@@ -1025,15 +1154,28 @@ const he = {
   files: 'קבצים',
   signature_is_too_small_or_simple_please_redraw: 'החתימה קטנה או פשוטה מדי. אנא חתום מחדש.',
   browser_privacy_settings_block_canvas: 'הגדרות הפרטיות של הדפדפן שלך מגבילות את השימוש באזור הציור. אנא השתמש בדפדפן או מכשיר אחר, או בטל את הגדרות הפרטיות החוסמות canvas כדי לחתום.',
-  wait_countdown_seconds: 'המתן {countdown} שניות'
+  wait_countdown_seconds: 'המתן {countdown} שניות',
+  enter_screen_reader_mode: 'הפעל מצב קורא מסך'
 }
 
 const nl = {
+  step: 'Stap',
+  form_progress: 'Formuliervoortgang',
+  close: 'Sluiten',
+  uploaded_files: 'Geüploade bestanden',
+  signature_drawing_area: 'Handtekening tekengebied. Gebruik de muis of aanraking om uw handtekening te tekenen.',
   kba: 'KBA',
   please_upload_an_image_file: 'Upload alstublieft een afbeeldingsbestand',
   must_be_characters_length: 'Moet {number} tekens lang zijn',
+  must_be_valid_ssn: 'Moet een geldig SSN zijn (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Moet een geldig EIN zijn (XX-XXXXXXX)',
+  must_be_valid_email: 'Moet een geldig e-mailadres zijn',
+  must_be_valid_url: 'Moet een geldige URL zijn (beginnend met http:// of https://)',
+  must_be_valid_zip: 'Moet een geldige ZIP zijn (XXXXX of XXXXX-XXXX)',
+  must_contain_numbers_only: 'Mag alleen cijfers bevatten',
+  must_contain_letters_only: 'Mag alleen letters bevatten',
   complete_all_required_fields_to_proceed_with_identity_verification: 'Vul alle verplichte velden in om door te gaan met de identiteitsverificatie.',
-  verify_id: 'Verifiëren ID',
+  verify_id: 'ID verifiëren',
   identity_verification: 'Identiteitsverificatie',
   complete: 'Voltooien',
   fill_all_required_fields_to_complete: 'Vul alle verplichte velden in om te voltooien',
@@ -1081,7 +1223,7 @@ const nl = {
   continue: 'Doorgaan',
   sign_now: 'Nu ondertekenen',
   type_here_: 'Typ hier...',
-  optional: 'Optioneel',
+  optional: 'optioneel',
   option: 'Optie',
   appears_on: 'Verschijnt op',
   page: 'Pagina',
@@ -1105,11 +1247,11 @@ const nl = {
   powered_by: 'Aangedreven door',
   please_check_the_box_to_continue: 'Vink het vakje aan om door te gaan.',
   open_source_documents_software: 'Open source documenten software',
-  verified_phone_number: 'Geverifieerd telefoonnummer',
+  verified_phone_number: 'Telefoonnummer verifiëren',
   use_international_format: 'Gebruik internationaal formaat: +1xxx',
   six_digits_code: '6-cijferige code',
   change_phone_number: 'Wijzig telefoonnummer',
-  sending: 'Voltooien...',
+  sending: 'Verzenden...',
   resend_code: 'Code opnieuw verzenden',
   verification_code_has_been_resent: 'Verificatiecode is opnieuw verzonden via SMS',
   please_fill_all_required_fields: 'Vul alle verplichte velden in',
@@ -1128,13 +1270,26 @@ const nl = {
   files: 'Bestanden',
   signature_is_too_small_or_simple_please_redraw: 'De handtekening is te klein of te eenvoudig. Teken opnieuw.',
   browser_privacy_settings_block_canvas: 'De privacyinstellingen van uw browser beperken het gebruik van het tekenveld. Gebruik een andere browser of ander apparaat, of schakel de privacyinstellingen uit die canvas blokkeren om te ondertekenen.',
-  wait_countdown_seconds: 'Wacht {countdown} seconden'
+  wait_countdown_seconds: 'Wacht {countdown} seconden',
+  enter_screen_reader_mode: 'Schermlezer-modus inschakelen'
 }
 
 const ar = {
+  step: 'خطوة',
+  form_progress: 'تقدم النموذج',
+  close: 'إغلاق',
+  uploaded_files: 'الملفات المرفوعة',
+  signature_drawing_area: 'منطقة رسم التوقيع. استخدم الماوس أو اللمس لرسم توقيعك.',
   kba: 'KBA',
   please_upload_an_image_file: 'يرجى تحميل ملف صورة',
   must_be_characters_length: 'يجب أن يكون الطول {number} حرفًا',
+  must_be_valid_ssn: 'يجب أن يكون SSN صالحًا (XXX-XX-XXXX)',
+  must_be_valid_ein: 'يجب أن يكون EIN صالحًا (XX-XXXXXXX)',
+  must_be_valid_email: 'يجب أن يكون عنوان بريد إلكتروني صالحًا',
+  must_be_valid_url: 'يجب أن يكون عنوان URL صالحًا (يبدأ بـ http:// أو https://)',
+  must_be_valid_zip: 'يجب أن يكون ZIP صالحًا (XXXXX أو XXXXX-XXXX)',
+  must_contain_numbers_only: 'يجب أن يحتوي على أرقام فقط',
+  must_contain_letters_only: 'يجب أن يحتوي على أحرف فقط',
   complete_all_required_fields_to_proceed_with_identity_verification: 'أكمل جميع الحقول المطلوبة للمتابعة في التحقق من الهوية.',
   verify_id: 'تحقق من الهوية',
   identity_verification: 'التحقق من الهوية',
@@ -1161,7 +1316,7 @@ const ar = {
   esignature_disclosure: 'كشف التوقيع الإلكتروني',
   text: 'نص',
   signature: 'توقيع',
-  initials: 'الاختصارات',
+  initials: 'حروف أولى',
   date: 'تاريخ',
   number: 'رقم',
   digitally_signed_by: 'تم التوقيع رقميًا بواسطة',
@@ -1198,9 +1353,9 @@ const ar = {
   download: 'تحميل',
   clear: 'مسح',
   redraw: 'إعادة الرسم',
-  draw_initials: 'ارسم الاختصارات',
+  draw_initials: 'ارسم حروف أولى',
   type_signature_here: 'اكتب التوقيع هنا',
-  type_initial_here: 'اكتب الاختصارات هنا',
+  type_initial_here: 'اكتب حروف أولى هنا',
   form_has_been_completed: 'تم إكمال النموذج!',
   document_has_been_signed: 'تم توقيع الوثيقة!',
   documents_have_been_signed: 'تم توقيع الوثائق!',
@@ -1219,25 +1374,38 @@ const ar = {
   set_today: 'تعيين اليوم',
   toggle_multiline_text: 'تبديل النصوص متعددة الأسطر',
   draw_signature: 'ارسم التوقيع',
-  type_initial: 'اكتب الاختصارات',
+  type_initial: 'اكتب حروف أولى',
   draw: 'ارسم',
   type: 'اكتب',
   type_text: 'اكتب نصًا',
   email_has_been_sent: 'تم إرسال البريد الإلكتروني',
   processing: 'جارٍ المعالجة',
-  pay_with_strip: 'الدفع بواسطة Stripe',
+  pay_with_stripe: 'الدفع بواسطة Stripe',
   reupload: 'إعادة التحميل',
   upload: 'تحميل',
   files: 'الملفات',
   signature_is_too_small_or_simple_please_redraw: 'التوقيع صغير جدًا أو بسيط جدًا. يرجى إعادة رسمه.',
   browser_privacy_settings_block_canvas: 'إعدادات الخصوصية في متصفحك تمنع استخدام لوحة الرسم. يرجى استخدام متصفح أو جهاز مختلف، أو تعطيل إعدادات الخصوصية التي تحظر canvas للتوقيع.',
-  wait_countdown_seconds: 'انتظر {countdown} ثانية'
+  wait_countdown_seconds: 'انتظر {countdown} ثانية',
+  enter_screen_reader_mode: 'تفعيل وضع قارئ الشاشة'
 }
 
 const ko = {
+  step: '단계',
+  form_progress: '양식 진행',
+  close: '닫기',
+  uploaded_files: '업로드된 파일',
+  signature_drawing_area: '서명 그리기 영역. 마우스 또는 터치를 사용하여 서명을 그리세요.',
   kba: 'KBA',
   please_upload_an_image_file: '이미지 파일을 업로드해 주세요',
   must_be_characters_length: '{number}자여야 합니다',
+  must_be_valid_ssn: '유효한 SSN이어야 합니다 (XXX-XX-XXXX)',
+  must_be_valid_ein: '유효한 EIN이어야 합니다 (XX-XXXXXXX)',
+  must_be_valid_email: '유효한 이메일 주소여야 합니다',
+  must_be_valid_url: '유효한 URL이어야 합니다 (http:// 또는 https://로 시작)',
+  must_be_valid_zip: '유효한 ZIP이어야 합니다 (XXXXX 또는 XXXXX-XXXX)',
+  must_contain_numbers_only: '숫자만 포함해야 합니다',
+  must_contain_letters_only: '문자만 포함해야 합니다',
   complete_all_required_fields_to_proceed_with_identity_verification: '신원 확인을 진행하려면 모든 필수 필드를 작성하십시오.',
   verify_id: '아이디 확인',
   identity_verification: '신원 확인',
@@ -1266,10 +1434,10 @@ const ko = {
   signature: '서명',
   initials: '이니셜',
   date: '날짜',
-  digitally_signed_by: '디지털 서명이 완료되었습니다',
+  digitally_signed_by: '디지털 서명자:',
   reason: '이유',
   number: '숫자',
-  pay: '급여',
+  pay: '결제',
   image: '이미지',
   take_photo: '사진 찍기',
   file: '파일',
@@ -1334,13 +1502,26 @@ const ko = {
   files: '파일',
   signature_is_too_small_or_simple_please_redraw: '서명이 너무 작거나 단순합니다. 다시 그려주세요.',
   browser_privacy_settings_block_canvas: '브라우저 개인정보 보호 설정으로 인해 그리기 캔버스를 사용할 수 없습니다. 다른 브라우저나 기기를 사용하거나, 서명을 위해 캔버스를 차단하는 개인정보 보호 설정을 비활성화해 주세요.',
-  wait_countdown_seconds: '{countdown}초 기다리세요'
+  wait_countdown_seconds: '{countdown}초 기다리세요',
+  enter_screen_reader_mode: '스크린 리더 모드 활성화'
 }
 
 const ja = {
+  step: 'ステップ',
+  form_progress: 'フォームの進捗',
+  close: '閉じる',
+  uploaded_files: 'アップロードされたファイル',
+  signature_drawing_area: '署名描画エリア。マウスまたはタッチを使用して署名を描いてください。',
   kba: 'KBA',
   please_upload_an_image_file: '画像ファイルをアップロードしてください',
   must_be_characters_length: '{number}文字でなければなりません',
+  must_be_valid_ssn: '有効なSSNである必要があります (XXX-XX-XXXX)',
+  must_be_valid_ein: '有効なEINである必要があります (XX-XXXXXXX)',
+  must_be_valid_email: '有効なメールアドレスである必要があります',
+  must_be_valid_url: '有効なURLである必要があります (http://またはhttps://で始まる)',
+  must_be_valid_zip: '有効なZIPである必要があります (XXXXX または XXXXX-XXXX)',
+  must_contain_numbers_only: '数字のみを含む必要があります',
+  must_contain_letters_only: '文字のみを含む必要があります',
   complete_all_required_fields_to_proceed_with_identity_verification: '本人確認を進めるには、すべての必須項目を入力してください。',
   verify_id: '本人確認',
   identity_verification: '本人確認',
@@ -1437,7 +1618,8 @@ const ja = {
   files: 'ファイル',
   signature_is_too_small_or_simple_please_redraw: '署名が小さすぎるか単純すぎます。もう一度描いてください。',
   browser_privacy_settings_block_canvas: 'ブラウザのプライバシー設定により、描画キャンバスの使用が制限されています。別のブラウザまたはデバイスを使用するか、署名するためにキャンバスをブロックするプライバシー設定を無効にしてください。',
-  wait_countdown_seconds: '{countdown} 秒お待ちください'
+  wait_countdown_seconds: '{countdown} 秒お待ちください',
+  enter_screen_reader_mode: 'スクリーンリーダーモードを有効にする'
 }
 
 const i18n = { en, es, it, de, fr, pl, uk, cs, pt, he, nl, ar, ko, ja }

app/javascript/submission_form/image_step.vue

@@ -15,16 +15,21 @@
         </template>
       </label>
       <button
+        type="button"
         class="btn btn-outline btn-sm reupload-button"
         @click.prevent="remove"
       >
-        <IconReload :width="16" />
+        <IconReload
+          :width="16"
+          aria-hidden="true"
+        />
         {{ t('reupload') }}
       </button>
     </div>
     <div>
       <img
         :src="attachmentsIndex[modelValue].url"
+        :alt="field.name || t('image')"
         class="h-52 border border-base-300 rounded mx-auto uploaded-image-preview"
       >
     </div>

app/javascript/submission_form/initials_step.vue

@@ -22,43 +22,60 @@
           class="md:tooltip"
           :data-tip="t('type_initial')"
         >
-          <a
+          <button
             id="type_text_button"
-            href="#"
+            type="button"
+            :aria-label="t('type_initial')"
             class="btn btn-outline font-medium btn-sm type-text-button"
-            @click.prevent="toggleTextInput"
+            @click="toggleTextInput"
           >
-            <IconTextSize :width="16" />
+            <IconTextSize
+              :width="16"
+              aria-hidden="true"
+            />
             <span class="hidden sm:inline">
               {{ t('type') }}
             </span>
-          </a>
+          </button>
         </span>
         <span
           v-else
           class="md:tooltip ml-2"
           :data-tip="t('draw_initials')"
         >
-          <a
+          <button
             id="type_text_button"
-            href="#"
+            type="button"
+            :aria-label="t('draw_initials')"
             class="btn btn-outline font-medium btn-sm type-text-button"
-            @click.prevent="toggleTextInput"
+            @click="toggleTextInput"
           >
-            <IconSignature :width="16" />
+            <IconSignature
+              :width="16"
+              aria-hidden="true"
+            />
             <span class="hidden sm:inline">
               {{ t('draw') }}
             </span>
-          </a>
+          </button>
         </span>
         <span
           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">
-            <IconUpload :width="16" />
+          <button
+            type="button"
+            :aria-label="t('click_to_upload')"
+            class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap upload-image-button"
+            @click="$refs.uploadInput.click()"
+          >
+            <IconUpload
+              :width="16"
+              aria-hidden="true"
+            />
             <input
               :key="uploadImageInputKey"
+              ref="uploadInput"
               type="file"
               hidden
               accept="image/*"
@@ -67,37 +84,45 @@
             <span class="hidden sm:inline">
               {{ t('upload') }}
             </span>
-          </label>
+          </button>
         </span>
-        <a
+        <button
           v-if="modelValue || computedPreviousValue"
-          href="#"
+          type="button"
           class="btn font-medium btn-outline btn-sm clear-canvas-button"
-          @click.prevent="remove"
+          @click="remove"
         >
-          <IconReload :width="16" />
+          <IconReload
+            :width="16"
+            aria-hidden="true"
+          />
           {{ t('clear') }}
-        </a>
-        <a
+        </button>
+        <button
           v-else
-          href="#"
+          type="button"
           class="btn font-medium btn-outline btn-sm clear-canvas-button"
-          @click.prevent="clear"
+          @click="clear"
         >
-          <IconReload :width="16" />
+          <IconReload
+            :width="16"
+            aria-hidden="true"
+          />
           {{ t('clear') }}
-        </a>
-        <a
+        </button>
+        <button
+          type="button"
           :title="t('minimize')"
-          href="#"
+          :aria-label="t('minimize')"
           class="py-1.5 inline md:hidden"
-          @click.prevent="$emit('minimize')"
+          @click="$emit('minimize')"
         >
           <IconArrowsDiagonalMinimize2
             :width="20"
             :height="20"
+            aria-hidden="true"
           />
-        </a>
+        </button>
       </div>
     </div>
     <div

app/javascript/submission_form/kba_step.vue

@@ -42,6 +42,7 @@
       {{ error }}
     </div>
     <button
+      type="button"
       class="base-button w-full flex justify-center submit-form-button"
       @click="restartKba"
     >

app/javascript/submission_form/multi_select_step.vue

@@ -19,6 +19,7 @@
   </label>
   <div
     v-if="field.description"
+    :id="field.uuid + '-desc'"
     dir="auto"
     class="mb-3 px-1 field-description-text"
   >
@@ -59,6 +60,7 @@
             type="checkbox"
             :name="`values[${field.uuid}][]`"
             :value="optionValue(option, index)"
+            :aria-describedby="field.description ? field.uuid + '-desc' : undefined"
             class="base-checkbox !h-7 !w-7"
             :checked="(modelValue || []).includes(optionValue(option, index))"
             @change="onChange"

app/javascript/submission_form/number_step.vue

@@ -23,6 +23,7 @@
   />
   <div
     v-if="field.description"
+    :id="field.uuid + '-desc'"
     dir="auto"
     class="mb-3 px-1 field-description-text"
   >
@@ -44,6 +45,7 @@
       :max="field.validation?.max"
       class="base-input !text-2xl w-full"
       :required="field.required"
+      :aria-describedby="field.description ? field.uuid + '-desc' : undefined"
       :placeholder="`${t('type_here_')}${field.required ? '' : ` (${t('optional')})`}`"
       :name="`values[${field.uuid}]`"
       @focus="$emit('focus')"

app/javascript/submission_form/payment_step.vue

@@ -33,6 +33,7 @@
     <div v-else>
       <button
         v-if="sessionId"
+        type="button"
         disabled
         class="base-button w-full modal-save-button"
       >
@@ -47,6 +48,7 @@
       <button
         v-else
         :id="field.uuid"
+        type="button"
         class="btn bg-[#7B73FF] text-white hover:bg-[#0A2540] text-lg w-full"
         :class="{ disabled: isCreatingCheckout }"
         :disabled="isCreatingCheckout"

app/javascript/submission_form/phone_step.vue

@@ -16,6 +16,7 @@
     </label>
     <div
       v-if="field.description"
+      :id="field.uuid + '-desc'"
       dir="auto"
       class="mb-3 px-1 field-description-text"
     >
@@ -42,28 +43,28 @@
           @input="onInputCode"
         >
         <div class="flex justify-between mt-2 -mb-2 md:-mb-4">
-          <a
+          <button
             v-if="!defaultValue"
-            href="#"
+            type="button"
             class="link change-phone-number-link"
-            @click.prevent="isCodeSent = false"
+            @click="isCodeSent = false"
           >
             {{ t('change_phone_number') }}
-          </a>
+          </button>
           <span
             v-if="resendCodeCountdown > 0"
             class="link"
           >
             {{ t('wait_countdown_seconds').replace('{countdown}', resendCodeCountdown) }}
           </span>
-          <a
+          <button
             v-else
-            href="#"
+            type="button"
             class="link resend-code-link"
-            @click.prevent="resendCode"
+            @click="resendCode"
           >
             {{ isResendLoading ? t('sending') : t('resend_code') }}
-          </a>
+          </button>
         </div>
       </div>
       <div
@@ -107,6 +108,7 @@
           type="tel"
           inputmode="tel"
           :required="field.required"
+          :aria-describedby="field.description ? field.uuid + '-desc' : undefined"
           placeholder="234 567-8900"
           @input="onPhoneInput"
           @focus="$emit('focus')"

app/javascript/submission_form/signature_step.vue

@@ -25,17 +25,21 @@
           class="md:tooltip"
           :data-tip="t('draw_signature')"
         >
-          <a
+          <button
             id="type_text_button"
-            href="#"
+            type="button"
+            :aria-label="t('draw_signature')"
             class="btn btn-outline btn-sm font-medium type-text-button"
-            @click.prevent="[toggleTextInput(), hideQr()]"
+            @click="[toggleTextInput(), hideQr()]"
           >
-            <IconSignature :width="16" />
+            <IconSignature
+              :width="16"
+              aria-hidden="true"
+            />
             <span class="hidden sm:inline">
               {{ t('draw') }}
             </span>
-          </a>
+          </button>
         </span>
         <span
           v-else-if="withTypedSignature && format !== 'drawn_or_upload' && format !== 'typed_or_upload' && format !== 'typed' && format !== 'drawn' && format !== 'upload'"
@@ -43,17 +47,21 @@
           :class="{ 'hidden sm:inline': modelValue || computedPreviousValue }"
           :data-tip="t('type_text')"
         >
-          <a
+          <button
             id="type_text_button"
-            href="#"
+            type="button"
+            :aria-label="t('type_text')"
             class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap type-text-button"
-            @click.prevent="[toggleTextInput(), hideQr()]"
+            @click="[toggleTextInput(), hideQr()]"
           >
-            <IconTextSize :width="16" />
+            <IconTextSize
+              :width="16"
+              aria-hidden="true"
+            />
             <span class="hidden sm:inline">
               {{ t('type') }}
             </span>
-          </a>
+          </button>
         </span>
         <span
           v-if="format !== 'typed' && format !== 'drawn' && format !== 'upload' && format !== 'drawn_or_typed'"
@@ -61,10 +69,19 @@
           :class="{ 'hidden sm:inline': modelValue || computedPreviousValue }"
           :data-tip="t('take_photo')"
         >
-          <label class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap upload-image-button">
-            <IconCamera :width="16" />
+          <button
+            type="button"
+            :aria-label="t('take_photo')"
+            class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap upload-image-button"
+            @click="$refs.takePhotoInput.click()"
+          >
+            <IconCamera
+              :width="16"
+              aria-hidden="true"
+            />
             <input
               :key="uploadImageInputKey"
+              ref="takePhotoInput"
               type="file"
               hidden
               accept="image/*"
@@ -73,49 +90,57 @@
             <span class="hidden sm:inline">
               {{ t('upload') }}
             </span>
-          </label>
+          </button>
         </span>
-        <a
+        <button
           v-if="modelValue || computedPreviousValue"
-          href="#"
+          type="button"
           class="btn btn-outline btn-sm font-medium reupload-button"
-          @click.prevent="remove"
+          @click="remove"
         >
-          <IconReload :width="16" />
+          <IconReload
+            :width="16"
+            aria-hidden="true"
+          />
           {{ t(format === 'upload' ? 'reupload' : 'redraw') }}
-        </a>
+        </button>
         <span
           v-if="withQrButton && !modelValue && !computedPreviousValue && format !== 'typed_or_upload' && format !== 'typed' && format !== 'upload'"
           class="md:tooltip before:translate-x-[-90%]"
           :data-tip="t('sign_on_the_touchscreen')"
         >
-          <a
-            href="#"
+          <button
+            type="button"
+            :aria-label="t('sign_on_the_touchscreen')"
             class="btn btn-sm btn-neutral font-medium hidden md:flex"
             :class="{ 'btn-outline': !isShowQr, 'text-white': isShowQr }"
-            @click.prevent="isShowQr ? hideQr() : [isTextSignature = false, showQr()]"
+            @click="isShowQr ? hideQr() : [isTextSignature = false, showQr()]"
           >
             <IconQrcode
               :width="19"
               :height="19"
+              aria-hidden="true"
             />
-          </a>
+          </button>
         </span>
-        <a
-          href="#"
+        <button
+          type="button"
           :title="t('minimize')"
+          :aria-label="t('minimize')"
           class="py-1.5 inline md:hidden"
-          @click.prevent="$emit('minimize')"
+          @click="$emit('minimize')"
         >
           <IconArrowsDiagonalMinimize2
             :width="20"
             :height="20"
+            aria-hidden="true"
           />
-        </a>
+        </button>
       </div>
     </div>
     <div
       v-if="field.description"
+      :id="field.uuid + '-desc'"
       dir="auto"
       class="mb-3 px-1 field-description-text"
     >
@@ -136,6 +161,7 @@
     <img
       v-if="modelValue || computedPreviousValue"
       :src="attachmentsIndex[modelValue || computedPreviousValue].url"
+      :alt="field.name || t('signature')"
       class="mx-auto bg-white border border-base-300 rounded max-h-44"
     >
     <FileDropzone
@@ -154,14 +180,17 @@
         v-if="!modelValue && !computedPreviousValue && !isShowQr && !isTextSignature && isSignatureStarted"
         class="absolute top-0.5 right-0.5"
       >
-        <a
-          href="#"
+        <button
+          type="button"
           class="btn btn-ghost font-medium btn-xs md:btn-sm"
-          @click.prevent="[clear(), hideQr()]"
+          @click="[clear(), hideQr()]"
         >
-          <IconReload :width="16" />
+          <IconReload
+            :width="16"
+            aria-hidden="true"
+          />
           {{ t('clear') }}
-        </a>
+        </button>
       </div>
       <div
         v-if="isTextSignature"
@@ -170,6 +199,8 @@
       <canvas
         v-show="!modelValue && !computedPreviousValue"
         ref="canvas"
+        role="application"
+        :aria-label="t('signature_drawing_area')"
         style="padding: 1px; 0"
         class="bg-white border border-base-300 rounded-2xl w-full draw-canvas"
       />
@@ -182,13 +213,14 @@
         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">
-          <a
-            href="#"
+          <button
+            type="button"
             class="btn btn-sm btn-circle btn-normal btn-outline"
-            @click.prevent="hideQr"
+            :aria-label="t('close')"
+            @click="hideQr"
           >
-            <IconX />
-          </a>
+            <IconX aria-hidden="true" />
+          </button>
         </div>
         <div class="flex items-center justify-center w-full h-full p-4">
           <div
@@ -512,6 +544,7 @@ export default {
       this.resizeObserver = new ResizeObserver(() => {
         requestAnimationFrame(() => {
           if (!this.$refs.canvas) return
+          if (!this.$refs.canvas.parentNode?.clientWidth) return
 
           const { width, height } = this.$refs.canvas
 
@@ -554,7 +587,7 @@ export default {
     redrawCanvas (oldWidth, oldHeight) {
       const canvas = this.$refs.canvas
 
-      if (this.pad && !this.isTextSignature && !this.pad.isEmpty() && oldWidth > 0 && oldHeight > 0) {
+      if (this.pad && !this.isTextSignature && !this.pad.isEmpty() && oldWidth > 0 && oldHeight > 0 && canvas.width > 0 && canvas.height > 0) {
         const sx = canvas.width / oldWidth
         const sy = canvas.height / oldHeight
 

app/javascript/submission_form/text_step.vue

@@ -23,6 +23,7 @@
   />
   <div
     v-if="field.description"
+    :id="field.uuid + '-desc'"
     dir="auto"
     class="mb-3 px-1 field-description-text"
   >
@@ -40,11 +41,11 @@
       :class="{ '!pr-11 -mr-10': !field.validation?.pattern }"
       :required="field.required"
       :pattern="field.validation?.pattern"
+      :title="validationMessage"
+      :aria-describedby="field.description ? field.uuid + '-desc' : undefined"
       :placeholder="`${t('type_here_')}${field.required ? '' : ` (${t('optional')})`}`"
       type="text"
       :name="`values[${field.uuid}]`"
-      @invalid="validationMessage ? $event.target.setCustomValidity(validationMessage) : ''"
-      @input="validationMessage ? $event.target.setCustomValidity('') : ''"
       @focus="$emit('focus')"
     >
     <textarea
@@ -54,6 +55,7 @@
       v-model="text"
       dir="auto"
       class="base-textarea !text-2xl w-full"
+      :aria-describedby="field.description ? field.uuid + '-desc' : undefined"
       :placeholder="`${t('type_here_')}${field.required ? '' : ` (${t('optional')})`}`"
       :required="field.required"
       :name="`values[${field.uuid}]`"
@@ -65,13 +67,14 @@
       class="tooltip"
       :data-tip="t('toggle_multiline_text')"
     >
-      <a
-        href="#"
+      <button
+        type="button"
+        :aria-label="t('toggle_multiline_text')"
         class="btn btn-ghost btn-circle btn-sm toggle-multiline-text-button"
-        @click.prevent="toggleTextArea"
+        @click="toggleTextArea"
       >
-        <IconAlignBoxLeftTop />
-      </a>
+        <IconAlignBoxLeftTop aria-hidden="true" />
+      </button>
     </div>
   </div>
 </template>
@@ -134,6 +137,17 @@ export default {
         return null
       }
     },
+    patternMessageKeys () {
+      return {
+        '^[0-9]{3}-[0-9]{2}-[0-9]{4}$': 'must_be_valid_ssn',
+        '^[0-9]{2}-[0-9]{7}$': 'must_be_valid_ein',
+        '^[^@\\s]+@[^@\\s]+\\.[^@\\s]+$': 'must_be_valid_email',
+        '^https?://.*': 'must_be_valid_url',
+        '^[0-9]{5}(?:-[0-9]{4})?$': 'must_be_valid_zip',
+        '^[0-9]+$': 'must_contain_numbers_only',
+        '^[a-zA-Z]+$': 'must_contain_letters_only'
+      }
+    },
     validationMessage () {
       if (this.field.validation?.message) {
         return this.field.validation.message
@@ -145,6 +159,10 @@ export default {
             .join('-')
 
         return this.t('must_be_characters_length').replace('{number}', number)
+      } else if (this.field.validation?.pattern) {
+        const key = this.patternMessageKeys[this.field.validation.pattern]
+
+        return key ? this.t(key) : ''
       } else {
         return ''
       }

app/javascript/submission_form/verification_step.vue

@@ -30,6 +30,7 @@
       <IconInnerShadowTop
         width="40"
         class="animate-spin h-10"
+        aria-hidden="true"
       />
     </div>
     <div v-else-if="redirectUrl">

app/javascript/template_builder/area.vue

@@ -50,6 +50,7 @@
       @remove="$emit('remove')"
       @scroll-to="$emit('scroll-to', $event)"
       @add-custom-field="$emit('add-custom-field')"
+      @click-title="$emit('click-title')"
     />
     <div
       ref="touchValueTarget"
@@ -113,7 +114,7 @@
           <div
             ref="textContainer"
             class="flex items-center px-0.5"
-            :style="{ color: field.preferences?.color }"
+            :style="{ color: isConditionMatch ? field.preferences?.color : '#9ca3af' }"
             :class="{ 'w-full h-full': isWFullType }"
           >
             <IconCheck
@@ -131,13 +132,13 @@
               />
             </template>
             <span
-              v-else-if="field.type === 'number' && !isValueInput && (field.default_value || field.default_value == 0)"
+              v-else-if="field.type === 'number' && !isContenteditable && (displayValue || displayValue == 0)"
               class="whitespace-pre-wrap"
-            >{{ formatNumber(field.default_value, field.preferences?.format) }}</span>
+            >{{ formatNumber(displayValue, field.preferences?.format) }}</span>
             <span
               v-else-if="field.default_value === '{{date}}'"
             >
-              {{ t('signing_date') }}
+              {{ /[HhAasz]/.test(field.preferences?.format || '') ? t('signing_date_and_time') : t('signing_date') }}
             </span>
             <div
               v-else-if="field.type === 'cells' && field.default_value"
@@ -183,12 +184,12 @@
               :contenteditable="isValueInput"
               class="whitespace-pre-wrap outline-none empty:before:content-[attr(placeholder)] before:text-base-content/30"
               :class="{ 'cursor-text': isValueInput }"
-              :placeholder="withFieldPlaceholder && !isValueInput ? defaultField?.title || field.title || field.name || defaultName : (field.type === 'date' ? field.preferences?.format || t('type_value') : t('type_value'))"
+              :placeholder="withFieldPlaceholder && !isValueInput ? defaultField?.title || field.title || field.name || defaultName : (isConditionMatch ? (field.type === 'date' ? field.preferences?.format || t('type_value') : t('type_value')) : '')"
               @blur="onDefaultValueBlur"
               @focus="selectedAreasRef.value = [area]"
               @paste.prevent="onPaste"
               @keydown.enter="onDefaultValueEnter"
-            >{{ field.default_value }}</span>
+            >{{ displayValue }}</span>
           </div>
         </div>
         <component
@@ -196,7 +197,8 @@
           v-else-if="!isCheckboxInput"
           width="100%"
           height="100%"
-          class="max-h-10 opacity-50"
+          class="opacity-50"
+          :style="{ maxHeight: isInlineSize ? '4.4cqmin' : '40px' }"
         />
       </span>
     </div>
@@ -241,6 +243,16 @@ export default {
       required: false,
       default: false
     },
+    conditionalFieldIndex: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    formulaValuesIndex: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
     isDraw: {
       type: Boolean,
       required: false,
@@ -307,7 +319,7 @@ export default {
       default: false
     }
   },
-  emits: ['start-resize', 'stop-resize', 'start-drag', 'stop-drag', 'remove', 'scroll-to', 'add-custom-field'],
+  emits: ['start-resize', 'stop-resize', 'start-drag', 'stop-drag', 'remove', 'scroll-to', 'add-custom-field', 'click-title'],
   data () {
     return {
       isContenteditable: false,
@@ -323,11 +335,27 @@ export default {
     fieldNames: FieldType.computed.fieldNames,
     fieldLabels: FieldType.computed.fieldLabels,
     fieldIcons: FieldType.computed.fieldIcons,
+    isConditionMatch () {
+      return !this.inputMode || this.conditionalFieldIndex[this.field.uuid] !== false
+    },
+    displayValue () {
+      if (this.field.preferences?.formula && this.field.type !== 'payment') {
+        const computed = this.formulaValuesIndex[this.field.uuid]
+
+        if (computed != null) {
+          return computed
+        }
+      }
+
+      return this.field.default_value
+    },
     bgClasses () {
       if (this.field.type === 'heading') {
         return 'bg-gray-50'
       } else if (this.field.type === 'strikethrough') {
         return 'bg-transparent'
+      } else if (!this.isConditionMatch) {
+        return 'bg-gray-100'
       } else {
         return this.bgColors[this.submitterIndex % this.bgColors.length]
       }
@@ -337,6 +365,8 @@ export default {
         return ''
       } else if (this.field.type === 'strikethrough') {
         return 'border-dashed border-gray-300'
+      } else if (!this.isConditionMatch) {
+        return 'border-gray-300'
       } else {
         return this.borderColors[this.submitterIndex % this.borderColors.length]
       }
@@ -390,7 +420,7 @@ export default {
       return this.basePageWidth / 612.0
     },
     isDefaultValuePresent () {
-      return this.field?.default_value || this.field?.default_value === 0
+      return this.field?.default_value || this.field?.default_value === 0 || this.displayValue || this.displayValue === 0
     },
     isSelectInput () {
       return this.inputMode && (this.field.type === 'select' || (this.field.type === 'radio' && this.field.areas?.length < 2))
@@ -399,6 +429,8 @@ export default {
       return this.inputMode && (this.field.type === 'checkbox' || (['radio', 'multiple'].includes(this.field.type) && this.area.option_uuid))
     },
     isValueInput () {
+      if (this.inputMode && this.field.preferences?.formula) return false
+
       return (this.field.type === 'heading' && this.isHeadingSelected) || this.isContenteditable ||
         (this.inputMode && (['text', 'number'].includes(this.field.type) || (this.field.type === 'date' && this.field.default_value !== '{{date}}')))
     },
@@ -511,7 +543,7 @@ export default {
       return option?.value || `${this.t('option')} ${this.field.options.indexOf(option) + 1}`
     },
     maybeToggleDefaultValue () {
-      if (!this.editable || this.isCmdKeyRef.value) {
+      if (!this.editable || this.isCmdKeyRef.value || this.field.preferences?.formula) {
         return
       }
 
@@ -559,6 +591,10 @@ export default {
       }
     },
     focusValueInput (e) {
+      if (this.inputMode && this.field.type === 'number' && !this.isContenteditable && !this.field.preferences?.formula) {
+        this.isContenteditable = true
+      }
+
       this.$nextTick(() => {
         if (this.$refs.defaultValue && this.$refs.defaultValue !== document.activeElement) {
           this.$refs.defaultValue.focus()
@@ -585,6 +621,10 @@ export default {
         return new Intl.NumberFormat('de-DE').format(number)
       } else if (format === 'space') {
         return new Intl.NumberFormat('fr-FR').format(number)
+      } else if (format === 'percent') {
+        return `${number}%`
+      } else if (format === 'percent_space') {
+        return `${String(number).replace('.', ',')} %`
       } else {
         return number
       }
@@ -624,6 +664,12 @@ export default {
       }
     },
     onDefaultValueBlur (e) {
+      if (this.field.preferences?.formula) {
+        this.isContenteditable = false
+
+        return
+      }
+
       const text = this.$refs.defaultValue.innerText.trim()
 
       this.isContenteditable = false
@@ -675,14 +721,6 @@ export default {
         }
       }
     },
-    drag (e) {
-      if (e.target.id === 'mask' && this.editable) {
-        this.isDragged = true
-
-        this.area.x = (e.offsetX - this.dragFrom.x) / e.target.clientWidth
-        this.area.y = (e.offsetY - this.dragFrom.y) / e.target.clientHeight
-      }
-    },
     startTouchDrag (e) {
       if (e.target !== this.$refs.touchTarget && e.target !== this.$refs.touchValueTarget) {
         return
@@ -728,6 +766,8 @@ export default {
 
       this.maybeChangeAreaPage(this.area)
 
+      this.clampAreaBounds(this.area)
+
       if (this.isDragged) {
         this.save()
       }
@@ -795,6 +835,8 @@ export default {
 
       this.maybeChangeAreaPage(this.area)
 
+      this.clampAreaBounds(this.area)
+
       if (this.isMoved) {
         this.save()
       }
@@ -819,18 +861,6 @@ export default {
         area.y = area.y - 1 - (16.0 / this.$parent.$refs.mask.previousSibling.offsetHeight)
       }
     },
-    stopDrag () {
-      this.$el.getRootNode().removeEventListener('mousemove', this.drag)
-      this.$el.getRootNode().removeEventListener('mouseup', this.stopDrag)
-
-      if (this.isDragged) {
-        this.save()
-      }
-
-      this.isDragged = false
-
-      this.$emit('stop-drag')
-    },
     startResize () {
       if (!this.selectedAreasRef.value.includes(this.area)) {
         this.selectedAreasRef.value = [this.area]
@@ -845,6 +875,8 @@ export default {
       this.$el.getRootNode().removeEventListener('mousemove', this.resize)
       this.$el.getRootNode().removeEventListener('mouseup', this.stopResize)
 
+      this.clampAreaBounds(this.area)
+
       this.$emit('stop-resize')
 
       this.save()
@@ -883,9 +915,17 @@ export default {
       this.$el.getRootNode().removeEventListener('touchmove', this.touchResize)
       this.$el.getRootNode().removeEventListener('touchend', this.stopTouchResize)
 
+      this.clampAreaBounds(this.area)
+
       this.$emit('stop-resize')
 
       this.save()
+    },
+    clampAreaBounds (area) {
+      area.x = Math.min(Math.max(area.x, 0), 1)
+      area.y = Math.min(Math.max(area.y, 0), 1)
+      area.w = Math.min(Math.max(area.w, 0), 1)
+      area.h = Math.min(Math.max(area.h, 0), 1)
     }
   }
 }

app/javascript/template_builder/area_title.vue

@@ -3,7 +3,7 @@
     v-if="field?.type && (isSelected || isNameFocus) && !isInMultiSelection"
     class="absolute bg-white rounded-t border overflow-visible whitespace-nowrap flex z-10 field-area-controls"
     style="top: -25px; height: 25px"
-    @mousedown.stop
+    @mousedown.stop="$emit('click-title')"
     @pointerdown.stop
   >
     <FieldSubmitter
@@ -279,7 +279,7 @@ export default {
       default: false
     }
   },
-  emits: ['remove', 'scroll-to', 'add-custom-field', 'change'],
+  emits: ['remove', 'scroll-to', 'add-custom-field', 'change', 'click-title'],
   data () {
     return {
       isShowFormulaModal: false,

app/javascript/template_builder/builder.vue

@@ -51,6 +51,30 @@
         </div>
       </div>
     </div>
+    <div
+      v-if="beforeRevisionSnapshot"
+      class="top-1.5 sticky h-0 z-20 max-w-2xl mx-auto"
+    >
+      <div class="alert border-base-content/30 py-2 px-2.5">
+        <IconInfoCircle class="stroke-info shrink-0 w-6 h-6" />
+        <span>{{ t('viewing_revision_from').replace('{date}', formatRevisionTime(beforeRevisionSnapshot.revision.created_at)) }}</span>
+        <div>
+          <button
+            class="btn btn-sm"
+            @click.prevent="cancelRevision"
+          >
+            {{ t('cancel') }}
+          </button>
+          <button
+            v-if="editable"
+            class="btn btn-sm btn-neutral text-white"
+            @click.prevent="applyRevision"
+          >
+            {{ t('apply') }}
+          </button>
+        </div>
+      </div>
+    </div>
     <div
       v-if="$slots.buttons || withTitle"
       id="title_container"
@@ -213,6 +237,18 @@
                     <span class="whitespace-nowrap">{{ t('preferences') }}</span>
                   </a>
                 </li>
+                <li v-if="withRevisionsMenu">
+                  <button
+                    class="flex space-x-2"
+                    @click.prevent="openRevisionsModal"
+                    @mouseenter="preloadRevisions"
+                  >
+                    <span class="w-6 h-6 flex-shrink-0 flex items-center justify-center">
+                      <IconHistory class="w-5 h-5" />
+                    </span>
+                    <span class="whitespace-nowrap">{{ t('revisions') }}</span>
+                  </button>
+                </li>
                 <li v-if="withDownload">
                   <button
                     class="flex space-x-2"
@@ -273,6 +309,8 @@
           :data-document-uuid="item.attachment_uuid"
           :accept-file-types="acceptFileTypes"
           :with-replace-button="withUploadButton"
+          :with-google-drive="withGoogleDrive"
+          :authenticity-token="authenticityToken"
           :editable="editable"
           :dynamic-documents="dynamicDocuments"
           :with-dynamic-documents="withDynamicDocuments"
@@ -282,6 +320,7 @@
           @replace="onDocumentReplace"
           @up="moveDocument(item, -1)"
           @reorder="reorderFields"
+          @edit="editModalDocumentUuid = item.attachment_uuid"
           @down="moveDocument(item, 1)"
           @change="save"
         />
@@ -319,12 +358,18 @@
       </div>
       <div
         id="pages_container"
-        class="w-full overflow-x-hidden mt-0.5 pt-0.5"
-        :class="isMobile ? 'overflow-y-auto' : 'overflow-y-hidden md:overflow-y-auto'"
+        ref="pagesContainer"
+        class="w-full mt-0.5 pt-0.5"
+        :class="[
+          isMobile ? 'overflow-y-auto' : 'overflow-y-hidden md:overflow-y-auto',
+          zoomLevel > 1 ? 'overflow-x-auto' : 'overflow-x-hidden'
+        ]"
+        @wheel="onPagesWheel"
       >
         <div
           ref="documents"
           class="pr-3.5 pl-0.5"
+          :style="zoomLevel > 1 ? { width: `${zoomLevel * 100}%` } : null"
         >
           <template v-if="!sortedDocuments.length && (withUploadButton || withAddPageButton)">
             <Dropzone
@@ -381,6 +426,9 @@
                 :document="document"
                 :is-drag="!!dragField"
                 :input-mode="inputMode"
+                :conditional-field-index="conditionalFieldIndex"
+                :formula-values-index="formulaValuesIndex"
+                :page-preview-format="pagePreviewFormat"
                 :default-fields="[...defaultRequiredFields, ...defaultFields]"
                 :allow-draw="!onlyDefinedFields || drawField || drawCustomField"
                 :with-signature-id="withSignatureId"
@@ -412,6 +460,8 @@
                 :with-arrows="template.schema.length > 1"
                 :item="template.schema.find((item) => item.attachment_uuid === document.uuid)"
                 :with-replace-button="withUploadButton"
+                :with-google-drive="withGoogleDrive"
+                :authenticity-token="authenticityToken"
                 :accept-file-types="acceptFileTypes"
                 :document="document"
                 :template="template"
@@ -504,11 +554,14 @@
             :with-custom-fields="withCustomFields"
             :with-fields-search="withFieldsSearch"
             :default-fields="[...defaultRequiredFields, ...defaultFields]"
+            :with-custom-fields-tab="withCustomFieldsTab"
             :template="template"
             :default-required-fields="defaultRequiredFields"
+            :detect-custom-fields-index="detectCustomFieldsIndex"
             :field-types="fieldTypes"
             :with-sticky-submitters="withStickySubmitters"
             :with-fields-detection="withFieldsDetection"
+            :with-detect-existing-fields="withDetectExistingFields"
             :with-signature-id="withSignatureId"
             :with-prefillable="withPrefillable"
             :only-defined-fields="onlyDefinedFields"
@@ -591,10 +644,60 @@
         </div>
       </div>
     </Transition>
+    <Transition
+      enter-active-class="transition-all duration-200 ease-out"
+      enter-from-class="translate-y-4 opacity-0"
+      enter-to-class="translate-y-0 opacity-100"
+      leave-active-class="transition-all duration-200 ease-in"
+      leave-from-class="translate-y-0 opacity-100"
+      leave-to-class="translate-y-4 opacity-0"
+    >
+      <div
+        v-if="zoomLevel > 1"
+        class="sticky bottom-0 z-40 pointer-events-none"
+      >
+        <div class="absolute left-0 right-0 bottom-4 flex justify-center">
+          <div class="join shadow pointer-events-auto">
+            <span class="join-item bg-base-content text-white pl-2 pr-2.5 h-9 items-center text-sm font-medium cursor-default w-16 flex justify-end">
+              <span>
+                {{ Math.round(zoomLevel * 100) }}%
+              </span>
+            </span>
+            <button
+              type="button"
+              class="join-item bg-base-content text-white h-9 pl-2 pr-3 inline-flex items-center justify-center cursor-pointer hover:opacity-90 border-l border-white/20"
+              @click="zoomLevel = 1"
+            >
+              <IconX class="w-4 h-4 stroke-2" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
     <div
       id="docuseal_modal_container"
       class="modal-container"
-    />
+    >
+      <RevisionsModal
+        v-if="isRevisionsModalOpen"
+        :template="template"
+        :revisions="revisions"
+        :locale="locale"
+        @close="isRevisionsModalOpen = false"
+        @apply="onRevisionApply"
+      />
+      <DocumentsEditorModal
+        v-if="editModalDocumentUuid"
+        :template="template"
+        :authenticity-token="authenticityToken"
+        :accept-file-types="acceptFileTypes"
+        :base-url="baseUrl"
+        :page-preview-format="pagePreviewFormat"
+        :scroll-to-attachment-uuid="editModalDocumentUuid"
+        @saved="onDocumentsModified"
+        @close="editModalDocumentUuid = null"
+      />
+    </div>
   </div>
 </template>
 
@@ -612,11 +715,23 @@ 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, IconDownload } from '@tabler/icons-vue'
+import RevisionsModal from './revisions_modal'
+import DocumentsEditorModal from './documents_editor_modal'
+import { IconPlus, IconUsersPlus, IconDeviceFloppy, IconChevronDown, IconEye, IconWritingSign, IconInnerShadowTop, IconInfoCircle, IconAdjustments, IconDownload, IconHistory, IconX } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 import { ref, computed, toRaw, defineAsyncComponent } from 'vue'
 import * as i18n from './i18n'
 
+const isEmpty = (obj) => {
+  if (obj == null) return true
+  if (Array.isArray(obj)) return obj.length === 0
+  if (typeof obj === 'string') return obj.trim().length === 0
+  if (typeof obj === 'object') return Object.keys(obj).length === 0
+  if (obj === false) return true
+
+  return false
+}
+
 export default {
   name: 'TemplateBuilder',
   components: {
@@ -642,7 +757,11 @@ export default {
     IconDownload,
     IconAdjustments,
     IconEye,
-    IconDeviceFloppy
+    IconHistory,
+    IconDeviceFloppy,
+    IconX,
+    RevisionsModal,
+    DocumentsEditorModal
   },
   provide () {
     return {
@@ -654,6 +773,7 @@ export default {
       locale: this.locale,
       baseFetch: this.baseFetch,
       fieldTypes: this.fieldTypes,
+      dateFormats: this.dateFormats,
       backgroundColor: this.backgroundColor,
       withPhone: this.withPhone,
       withVerification: this.withVerification,
@@ -738,6 +858,11 @@ export default {
       required: false,
       default: false
     },
+    withDetectExistingFields: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     withCustomFields: {
       type: Boolean,
       required: false,
@@ -778,6 +903,11 @@ export default {
       required: false,
       default: () => []
     },
+    withCustomFieldsTab: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     withSelectedFieldType: {
       type: Boolean,
       required: false,
@@ -798,6 +928,11 @@ export default {
       required: false,
       default: () => []
     },
+    dateFormats: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     defaultSubmitters: {
       type: Array,
       required: false,
@@ -808,6 +943,11 @@ export default {
       required: false,
       default: () => []
     },
+    pagePreviewFormat: {
+      type: String,
+      required: false,
+      default: '.jpg'
+    },
     acceptFileTypes: {
       type: String,
       required: false,
@@ -943,6 +1083,16 @@ export default {
       type: Boolean,
       required: false,
       default: false
+    },
+    withRevisions: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    withRevisionsMenu: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data () {
@@ -953,6 +1103,7 @@ export default {
       isLoadingBlankPage: false,
       isSaving: false,
       isDetectingPageFields: false,
+      detectFieldsQueue: [],
       detectingAnalyzingProgress: null,
       detectingFieldsAddedCount: null,
       selectedSubmitter: null,
@@ -963,7 +1114,13 @@ export default {
       drawCustomField: null,
       drawOption: null,
       dragField: null,
-      isDragFile: false
+      isDragFile: false,
+      isMathLoaded: false,
+      isRevisionsModalOpen: false,
+      editModalDocumentUuid: null,
+      revisions: [],
+      beforeRevisionSnapshot: null,
+      zoomLevel: 1
     }
   },
   computed: {
@@ -973,6 +1130,13 @@ export default {
     fieldsDragFieldRef: () => ref(),
     customDragFieldRef: () => ref(),
     selectedAreasRef: () => ref([]),
+    attachmentUuidsIndex () {
+      return this.template.schema.reduce((acc, e, index) => {
+        acc[e.attachment_uuid] = index
+
+        return acc
+      }, {})
+    },
     language () {
       return this.locale.split('-')[0].toLowerCase()
     },
@@ -1003,6 +1167,8 @@ export default {
       return isMobileSafariIos || /android|iphone|ipad/i.test(navigator.userAgent)
     },
     defaultDateFormat () {
+      if (this.dateFormats.length) return this.dateFormats[0]
+
       const isUsBrowser = Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US')
       const isUsTimezone = new Intl.DateTimeFormat('en-US', { timeZoneName: 'short' }).format(new Date()).match(/\s(?:CST|CDT|PST|PDT|EST|EDT)$/)
 
@@ -1044,6 +1210,43 @@ export default {
 
       return map
     },
+    fieldsUuidIndex () {
+      return this.template.fields.reduce((acc, f) => {
+        acc[f.uuid] = f
+
+        return acc
+      }, {})
+    },
+    conditionalFieldIndex () {
+      if (!this.inputMode) return {}
+
+      const cache = {}
+
+      return this.template.fields.reduce((acc, f) => {
+        acc[f.uuid] = this.checkFieldConditions(f, cache)
+
+        return acc
+      }, {})
+    },
+    formulaValuesIndex () {
+      const formulaFields = this.template.fields.filter((f) => f.preferences?.formula && f.type !== 'payment' && this.hasFormulaDependencyValue(f))
+
+      if (!formulaFields.length) return {}
+
+      if (!this.isMathLoaded) {
+        this.loadCalculator()
+
+        return {}
+      }
+
+      return formulaFields.reduce((acc, f) => {
+        if (this.conditionalFieldIndex[f.uuid] !== false) {
+          acc[f.uuid] = this.calculateFormula(f)
+        }
+
+        return acc
+      }, {})
+    },
     isAllRequiredFieldsAdded () {
       return !this.defaultRequiredFields?.some((f) => {
         return !this.template.fields?.some((field) => field.name === f.name)
@@ -1052,6 +1255,39 @@ export default {
     selectedField () {
       return this.template.fields.find((f) => f.areas?.includes(this.lastSelectedArea))
     },
+    detectFieldsIndex () {
+      const submittersByUuid = {}
+
+      this.template.submitters.forEach((s) => {
+        submittersByUuid[s.uuid] = s
+      })
+
+      const index = {}
+
+      this.template.fields.forEach((f) => {
+        if (!f.name) return
+
+        const role = submittersByUuid[f.submitter_uuid]?.name
+        const key = [f.name, role].filter(Boolean).join(':').toLowerCase()
+
+        if (!index[key]) index[key] = f
+      })
+
+      return index
+    },
+    detectCustomFieldsIndex () {
+      const index = {}
+
+      ;[...this.customFields, ...this.defaultRequiredFields, ...this.defaultFields].forEach((c) => {
+        if (!c.name) return
+
+        const key = [c.name, c.role].filter(Boolean).join(':').toLowerCase()
+
+        if (!index[key]) index[key] = c
+      })
+
+      return index
+    },
     sortedDocuments () {
       return this.template.schema.map((item) => {
         return this.template.documents.find(doc => doc.uuid === item.attachment_uuid)
@@ -1097,6 +1333,16 @@ export default {
       }
     })
 
+    const deduplicateUuidsIndex = {}
+
+    this.template.submitters.forEach((submitter) => {
+      if (deduplicateUuidsIndex[submitter.uuid]) {
+        submitter.uuid = v4()
+      }
+
+      deduplicateUuidsIndex[submitter.uuid] = true
+    })
+
     this.selectedSubmitter = this.template.submitters[0]
   },
   mounted () {
@@ -1137,6 +1383,132 @@ export default {
   },
   methods: {
     toRaw,
+    applyCustomFieldAttributes: Fields.methods.applyCustomFieldAttributes,
+    buildExistingFields: Fields.methods.buildExistingFields,
+    async loadCalculator () {
+      if (this.math) return
+
+      const { Calculator } = await import('../submission_form/calculator')
+
+      this.math = new Calculator()
+      this.isMathLoaded = true
+    },
+    optionValue (option, index) {
+      if (option.value) {
+        return option.value
+      } else {
+        return `${this.t('option')} ${index + 1}`
+      }
+    },
+    checkFieldConditions (field, cache = {}) {
+      const cacheKey = field.uuid || field.attachment_uuid
+
+      if (cache[cacheKey] !== undefined) {
+        return cache[cacheKey]
+      }
+
+      if (field.conditions?.length) {
+        const result = field.conditions.reduce((acc, cond) => {
+          if (cond.operation === 'or') {
+            acc.push(acc.pop() || this.checkFieldCondition(cond, cache))
+          } else {
+            acc.push(this.checkFieldCondition(cond, cache))
+          }
+
+          return acc
+        }, [])
+
+        cache[cacheKey] = !result.includes(false)
+      } else {
+        cache[cacheKey] = true
+      }
+
+      return cache[cacheKey]
+    },
+    checkFieldCondition (condition, cache = {}) {
+      const field = this.fieldsUuidIndex[condition.field_uuid]
+
+      if (['not_empty', 'checked', 'equal', 'contains', 'greater_than', 'less_than'].includes(condition.action) && field && !this.checkFieldConditions(field, cache)) {
+        return false
+      }
+
+      const defaultValue = !field || isEmpty(field.default_value) ? null : field.default_value
+
+      if (['empty', 'unchecked'].includes(condition.action)) {
+        return isEmpty(defaultValue)
+      } else if (['not_empty', 'checked'].includes(condition.action)) {
+        return !isEmpty(defaultValue)
+      } else if (field?.type === 'number' && ['equal', 'not_equal', 'greater_than', 'less_than'].includes(condition.action)) {
+        const value = defaultValue
+
+        if (isEmpty(value) || isEmpty(condition.value)) return false
+
+        const actual = parseFloat(value)
+        const expected = parseFloat(condition.value)
+
+        if (Number.isNaN(actual) || Number.isNaN(expected)) return false
+
+        if (condition.action === 'equal') return Math.abs(actual - expected) < Number.EPSILON
+        if (condition.action === 'not_equal') return Math.abs(actual - expected) > Number.EPSILON
+        if (condition.action === 'greater_than') return actual > expected
+        if (condition.action === 'less_than') return actual < expected
+
+        return false
+      } else if (['equal', 'contains'].includes(condition.action) && field) {
+        if (field.options) {
+          const option = field.options.find((o) => o.uuid === condition.value)
+
+          if (option) {
+            const values = [defaultValue].flat()
+
+            return values.includes(this.optionValue(option, field.options.indexOf(option)))
+          } else {
+            return false
+          }
+        } else {
+          return [defaultValue].flat().includes(condition.value)
+        }
+      } else if (['not_equal', 'does_not_contain'].includes(condition.action) && field) {
+        if (field.options) {
+          const option = field.options.find((o) => o.uuid === condition.value)
+
+          if (option) {
+            const values = [defaultValue].flat()
+
+            return !values.includes(this.optionValue(option, field.options.indexOf(option)))
+          } else {
+            return false
+          }
+        } else {
+          return false
+        }
+      } else {
+        return true
+      }
+    },
+    normalizeFormula (formula, depth = 0) {
+      if (depth > 10) return formula
+
+      return formula.replace(/{{(.*?)}}/g, (match, uuid) => {
+        if (this.fieldsUuidIndex[uuid]?.preferences?.formula) {
+          return `(${this.normalizeFormula(this.fieldsUuidIndex[uuid].preferences.formula, depth + 1)})`
+        } else {
+          return match
+        }
+      })
+    },
+    calculateFormula (field) {
+      const transformedFormula = this.normalizeFormula(field.preferences.formula).replace(/{{(.*?)}}/g, (match, uuid) => {
+        return this.fieldsUuidIndex[uuid]?.default_value || 0.0
+      })
+
+      return this.math.evaluate(transformedFormula.toLowerCase())
+    },
+    hasFormulaDependencyValue (field) {
+      const normalized = this.normalizeFormula(field.preferences.formula)
+
+      return [...normalized.matchAll(/{{(.*?)}}/g)].some(([, uuid]) => !isEmpty(this.fieldsUuidIndex[uuid]?.default_value))
+    },
     addCustomField (field) {
       return this.$refs.fields.addCustomField(field)
     },
@@ -1321,7 +1693,7 @@ export default {
 
         ref.x = e.clientX - ref.offsetX
         ref.y = e.clientY - ref.offsetY
-      } else if (e.dataTransfer?.types?.includes('Files')) {
+      } else if (e.dataTransfer?.types?.includes('Files') && !this.editModalDocumentUuid) {
         this.isDragFile = true
       }
     },
@@ -1416,33 +1788,26 @@ export default {
         this.save()
       }
     },
+    compareAreas (a, b) {
+      const aAttIdx = this.attachmentUuidsIndex[a.attachment_uuid]
+      const bAttIdx = this.attachmentUuidsIndex[b.attachment_uuid]
+
+      if (aAttIdx !== bAttIdx) return aAttIdx - bAttIdx
+      if (a.page !== b.page) return a.page - b.page
+
+      const aY = a.y + a.h
+      const bY = b.y + b.h
+
+      if (Math.abs(aY - bY) < 0.01) return a.x - b.x
+      if (a.h < b.h ? a.y >= b.y && aY <= bY : b.y >= a.y && bY <= aY) return a.x - b.x
+
+      return aY - bY
+    },
     findFieldInsertIndex (field) {
       if (!field.areas?.length) return -1
 
       const area = field.areas[0]
 
-      const attachmentUuidsIndex = this.template.schema.reduce((acc, e, index) => {
-        acc[e.attachment_uuid] = index
-
-        return acc
-      }, {})
-
-      const compareAreas = (a, b) => {
-        const aAttIdx = attachmentUuidsIndex[a.attachment_uuid]
-        const bAttIdx = attachmentUuidsIndex[b.attachment_uuid]
-
-        if (aAttIdx !== bAttIdx) return aAttIdx - bAttIdx
-        if (a.page !== b.page) return a.page - b.page
-
-        const aY = a.y + a.h
-        const bY = b.y + b.h
-
-        if (Math.abs(aY - bY) < 0.01) return a.x - b.x
-        if (a.h < b.h ? a.y >= b.y && aY <= bY : b.y >= a.y && bY <= aY) return a.x - b.x
-
-        return aY - bY
-      }
-
       let closestBeforeIndex = -1
       let closestBeforeArea = null
       let closestAfterIndex = -1
@@ -1451,15 +1816,15 @@ export default {
       this.template.fields.forEach((f, index) => {
         if (f.submitter_uuid === field.submitter_uuid) {
           (f.areas || []).forEach((a) => {
-            const cmp = compareAreas(a, area)
+            const cmp = this.compareAreas(a, area)
 
             if (cmp < 0) {
-              if (!closestBeforeArea || (compareAreas(a, closestBeforeArea) > 0 && closestBeforeIndex < index)) {
+              if (!closestBeforeArea || (this.compareAreas(a, closestBeforeArea) > 0 && closestBeforeIndex < index)) {
                 closestBeforeIndex = index
                 closestBeforeArea = a
               }
             } else {
-              if (!closestAfterArea || (compareAreas(a, closestAfterArea) < 0 && closestAfterIndex > index)) {
+              if (!closestAfterArea || (this.compareAreas(a, closestAfterArea) < 0 && closestAfterIndex > index)) {
                 closestAfterIndex = index
                 closestAfterArea = a
               }
@@ -1482,9 +1847,111 @@ export default {
         this.template.fields.push(field)
       }
     },
+    insertArea (field, area) {
+      field.areas ||= []
+
+      const insertIndex = field.areas.findIndex((a) => this.compareAreas(a, area) > 0)
+
+      if (insertIndex === -1) {
+        field.areas.push(area)
+      } else {
+        field.areas.splice(insertIndex, 0, area)
+      }
+    },
+    insertDetectedField (field) {
+      if (!this.withDetectExistingFields || !field.name) {
+        this.insertField(field)
+
+        return
+      }
+
+      const role = this.template.submitters.find((s) => s.uuid === field.submitter_uuid)?.name
+      const nameKey = field.name.toLowerCase()
+      const indexKey = [field.name, role].filter(Boolean).join(':').toLowerCase()
+
+      const existingField = this.detectFieldsIndex[indexKey]
+
+      if (existingField) {
+        existingField.areas = existingField.areas || []
+        field.areas.forEach((area) => this.insertArea(existingField, area))
+      } else {
+        const customField = this.detectCustomFieldsIndex[indexKey] || this.detectCustomFieldsIndex[nameKey]
+
+        if (customField) this.applyCustomFieldAttributes(field, customField)
+
+        this.insertField(field)
+      }
+    },
     closeDropdown () {
       document.activeElement.blur()
     },
+    preloadRevisions () {
+      this.loadRevisionsPromise ||= this.baseFetch(`/templates/${this.template.id}/versions`)
+    },
+    openRevisionsModal () {
+      this.closeDropdown()
+
+      this.loadRevisionsPromise ||= this.baseFetch(`/templates/${this.template.id}/versions`)
+
+      this.loadRevisionsPromise.then(async (resp) => {
+        this.revisions = await resp.json()
+
+        this.isRevisionsModalOpen = true
+      }).finally(() => {
+        this.loadRevisionsPromise = null
+      })
+    },
+    onRevisionApply (revision) {
+      this.beforeRevisionSnapshot = {
+        template: JSON.parse(JSON.stringify(this.template)),
+        dynamicDocuments: JSON.parse(JSON.stringify(this.dynamicDocuments)),
+        revision
+      }
+
+      const { dynamic_documents: nextDynamicDocs = [], ...nextTemplate } = revision.data
+
+      Object.assign(this.template, nextTemplate)
+
+      this.dynamicDocuments.splice(0, this.dynamicDocuments.length, ...nextDynamicDocs)
+
+      this.$nextTick(() => this.reloadDynamicDocumentContent())
+
+      this.isRevisionsModalOpen = false
+    },
+    cancelRevision () {
+      Object.assign(this.template, this.beforeRevisionSnapshot.template)
+
+      this.dynamicDocuments.splice(0, this.dynamicDocuments.length, ...this.beforeRevisionSnapshot.dynamicDocuments)
+
+      this.beforeRevisionSnapshot = null
+
+      this.$nextTick(() => this.reloadDynamicDocumentContent())
+    },
+    applyRevision () {
+      this.beforeRevisionSnapshot = null
+
+      const dynamicDocumentRefs = this.documentRefs.filter((ref) => ref.isDynamic)
+
+      dynamicDocumentRefs.forEach((ref) => ref.update())
+
+      this.rebuildVariablesSchema({ disable: false })
+
+      return Promise.all([this.save({ force: true }), ...dynamicDocumentRefs.map((ref) => ref.saveBody())])
+    },
+    reloadDynamicDocumentContent () {
+      this.documentRefs.forEach((ref) => {
+        if (ref.isDynamic) ref.reloadContent()
+      })
+    },
+    formatRevisionTime (string) {
+      return new Date(string).toLocaleString(this.locale || undefined, {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit'
+      })
+    },
     t (key) {
       return this.i18n[key] || i18n[this.language]?.[key] || i18n.en[key] || key
     },
@@ -1608,6 +2075,30 @@ export default {
 
       this.isBreakpointLg = this.$el.getRootNode().querySelector('div[data-v-app]').offsetWidth < breakpointLg
     },
+    onPagesWheel (event) {
+      if (!event.ctrlKey && !event.metaKey) return
+
+      event.preventDefault()
+
+      const oldZoom = this.zoomLevel
+      const nextZoom = Math.max(1, Math.min(3, oldZoom - event.deltaY * 0.006))
+
+      if (nextZoom === oldZoom) return
+
+      const rect = this.$refs.pagesContainer.getBoundingClientRect()
+      const cursorX = event.clientX - rect.left
+      const cursorY = event.clientY - rect.top
+      const ratio = nextZoom / oldZoom
+      const nextScrollLeft = (this.$refs.pagesContainer.scrollLeft + cursorX) * ratio - cursorX
+      const nextScrollTop = (this.$refs.pagesContainer.scrollTop + cursorY) * ratio - cursorY
+
+      this.zoomLevel = nextZoom
+
+      this.$nextTick(() => {
+        this.$refs.pagesContainer.scrollLeft = nextScrollLeft
+        this.$refs.pagesContainer.scrollTop = nextScrollTop
+      })
+    },
     setDocumentRefs (el) {
       if (el) {
         this.documentRefs.push(el)
@@ -1645,6 +2136,10 @@ export default {
       }
     },
     onKeyDown (event) {
+      if (this.editModalDocumentUuid) {
+        return
+      }
+
       if (event.key === 'Tab' && document.activeElement === document.body) {
         event.stopImmediatePropagation()
         event.preventDefault()
@@ -1978,7 +2473,7 @@ export default {
 
         fieldUuidIndex[field.uuid] = newField
 
-        newField.areas.push(newArea)
+        this.insertArea(newField, newArea)
         newAreas.push(newArea)
 
         if (['radio', 'multiple'].includes(field.type) && field.options?.length) {
@@ -2091,17 +2586,7 @@ export default {
           area.y -= area.h / 2
         }
 
-        this.drawField.areas ||= []
-
-        const insertBeforeAreaIndex = this.drawField.areas.findIndex((a) => {
-          return a.attachment_uuid === area.attachment_uuid && a.page > area.page
-        })
-
-        if (insertBeforeAreaIndex !== -1) {
-          this.drawField.areas.splice(insertBeforeAreaIndex, 0, area)
-        } else {
-          this.drawField.areas.push(area)
-        }
+        this.insertArea(this.drawField, area)
 
         if (this.template.fields.indexOf(this.drawField) === -1) {
           this.insertField(this.drawField)
@@ -2112,6 +2597,11 @@ export default {
 
         this.selectedAreasRef.value = [area]
 
+        area.x = Math.min(Math.max(area.x, 0), 1)
+        area.y = Math.min(Math.max(area.y, 0), 1)
+        area.w = Math.min(Math.max(area.w, 0), 1)
+        area.h = Math.min(Math.max(area.h, 0), 1)
+
         this.save()
       } else {
         const documentRef = this.documentRefs.find((e) => e.document.uuid === area.attachment_uuid)
@@ -2242,9 +2732,7 @@ export default {
         delete field.height
       }
 
-      field.areas ||= []
-
-      field.areas.push(fieldArea)
+      this.insertArea(field, fieldArea)
 
       if (this.selectedAreasRef.value.length < 2) {
         this.selectedAreasRef.value = [fieldArea]
@@ -2314,7 +2802,7 @@ export default {
             }
           }
 
-          field.areas.push(fieldArea)
+          this.insertArea(field, fieldArea)
         })
       } else {
         const fieldArea = {
@@ -2670,6 +3158,22 @@ export default {
     onDocumentsReplaceAndTemplateClone (template) {
       window.Turbo.visit(`/templates/${template.id}/edit`)
     },
+    onDocumentsModified (data) {
+      this.template.schema = data.schema
+      this.template.fields = data.fields
+      this.template.submitters = data.submitters
+      this.template.documents = data.documents
+
+      this.selectedAreasRef.value = []
+
+      if (!this.template.submitters.find((s) => s.uuid === this.selectedSubmitter?.uuid)) {
+        this.selectedSubmitter = this.template.submitters[0]
+      }
+
+      this.editModalDocumentUuid = null
+
+      this.save()
+    },
     moveDocument (item, direction) {
       const currentIndex = this.template.schema.indexOf(item)
 
@@ -2743,7 +3247,11 @@ export default {
 
           const dynamicDocumentSaves = dynamicDocumentRefs.map((ref) => ref.saveBody())
 
-          Promise.all([this.save(), ...dynamicDocumentSaves]).then(() => {
+          Promise.all([this.save({ force: true }), ...dynamicDocumentSaves]).then(() => {
+            if (this.withRevisions) {
+              this.captureRevision()
+            }
+
             window.Turbo.visit(`/templates/${this.template.id}`)
           }).finally(() => {
             this.isSaving = false
@@ -2773,6 +3281,12 @@ export default {
       })
     },
     detectFieldsForPage ({ page, attachmentUuid }) {
+      if (this.isDetectingPageFields) {
+        this.detectFieldsQueue.push({ page, attachmentUuid })
+
+        return
+      }
+
       this.isDetectingPageFields = true
       this.detectingAnalyzingProgress = null
       this.detectingFieldsAddedCount = null
@@ -2811,7 +3325,11 @@ export default {
       this.baseFetch(`/templates/${this.template.id}/detect_fields`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ attachment_uuid: attachmentUuid, page })
+        body: JSON.stringify({
+          attachment_uuid: attachmentUuid,
+          page,
+          ...(this.withDetectExistingFields ? { fields: this.buildExistingFields() } : {})
+        })
       }).then(async (response) => {
         const reader = response.body.getReader()
         const decoder = new TextDecoder('utf-8')
@@ -2840,7 +3358,7 @@ export default {
                     if (!f.submitter_uuid) {
                       f.submitter_uuid = this.template.submitters[0].uuid
                     }
-                    this.insertField(f)
+                    this.insertDetectedField(f)
                   })
 
                   totalFieldsAdded += errorFields.length
@@ -2869,7 +3387,7 @@ export default {
 
                     const nonOverlappingFields = filterNonOverlappingFields(finalFields)
 
-                    nonOverlappingFields.forEach((f) => this.insertField(f))
+                    nonOverlappingFields.forEach((f) => this.insertDetectedField(f))
                     totalFieldsAdded += nonOverlappingFields.length
 
                     if (nonOverlappingFields.length) {
@@ -2907,7 +3425,7 @@ export default {
 
                     const nonOverlappingFields = filterNonOverlappingFields(finalFields)
 
-                    nonOverlappingFields.forEach((f) => this.insertField(f))
+                    nonOverlappingFields.forEach((f) => this.insertDetectedField(f))
                     totalFieldsAdded += nonOverlappingFields.length
 
                     if (nonOverlappingFields.length) {
@@ -2925,7 +3443,7 @@ export default {
 
                   const nonOverlappingFields = filterNonOverlappingFields(finalFields)
 
-                  nonOverlappingFields.forEach((f) => this.insertField(f))
+                  nonOverlappingFields.forEach((f) => this.insertDetectedField(f))
                   totalFieldsAdded += nonOverlappingFields.length
 
                   if (nonOverlappingFields.length) {
@@ -2958,11 +3476,19 @@ export default {
         setTimeout(() => {
           this.detectingFieldsAddedCount = null
         }, 1000)
+
+        if (this.detectFieldsQueue.length) {
+          this.detectFieldsForPage(this.detectFieldsQueue.shift())
+        }
       })
     },
-    save ({ force } = { force: false }) {
+    save ({ force = false } = {}) {
       this.pendingFieldAttachmentUuids = []
 
+      if (this.beforeRevisionSnapshot) {
+        this.beforeRevisionSnapshot = null
+      }
+
       if (this.onChange) {
         this.onChange(this.template)
       }
@@ -2997,6 +3523,12 @@ export default {
         }
       })
     },
+    captureRevision () {
+      return this.baseFetch(`/templates/${this.template.id}/versions`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' }
+      })
+    },
     onDynamicDocumentUpdate () {
       this.rebuildVariablesSchema()
 

app/javascript/template_builder/conditions_modal.vue

@@ -6,7 +6,7 @@
       class="absolute top-0 bottom-0 right-0 left-0"
       @click.prevent="$emit('close')"
     />
-    <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
+    <div class="modal-box pt-4 pb-6 px-6 mt-20 w-full max-w-xl">
       <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
         <span class="modal-title">
           {{ t('condition') }} - {{ (defaultField ? (defaultField.title || item.title || item.name) : item.name) || buildDefaultName(item) }}

app/javascript/template_builder/controls.vue

@@ -10,6 +10,9 @@
       v-if="withReplaceButton"
       :template-id="template.id"
       :accept-file-types="acceptFileTypes"
+      :authenticity-token="authenticityToken"
+      :with-google-drive="withGoogleDrive"
+      :google-drive-file-id="item.google_drive_file_id"
       @click.stop
       @success="$emit('replace', { replaceSchemaItem: item, ...$event })"
     />
@@ -73,6 +76,16 @@ export default {
       required: true,
       default: true
     },
+    withGoogleDrive: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    authenticityToken: {
+      type: String,
+      required: false,
+      default: ''
+    },
     withArrows: {
       type: Boolean,
       required: false,

app/javascript/template_builder/document.vue

@@ -5,6 +5,8 @@
       :key="image.id"
       :ref="setPageRefs"
       :input-mode="inputMode"
+      :conditional-field-index="conditionalFieldIndex"
+      :formula-values-index="formulaValuesIndex"
       :number="index"
       :editable="editable"
       :data-page="index"
@@ -64,6 +66,16 @@ export default {
       required: false,
       default: false
     },
+    conditionalFieldIndex: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    formulaValuesIndex: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
     areasIndex: {
       type: Object,
       required: false,
@@ -138,6 +150,11 @@ export default {
       required: false,
       default: false
     },
+    pagePreviewFormat: {
+      type: String,
+      required: false,
+      default: '.jpg'
+    },
     withFieldsDetection: {
       type: Boolean,
       required: false,
@@ -168,7 +185,7 @@ export default {
         return this.previewImagesIndex[i] || reactive({
           metadata: { ...lazyloadMetadata },
           id: Math.random().toString(),
-          url: this.basePreviewUrl + `/preview/${this.document.signed_key || this.document.signed_uuid || this.document.uuid}/${i}.jpg`
+          url: this.basePreviewUrl + `/preview/${this.document.signed_key || this.document.signed_uuid || this.document.uuid}/${i}${this.pagePreviewFormat}`
         })
       })
     },

app/javascript/template_builder/documents_editor_crop.vue

@@ -0,0 +1,328 @@
+<template>
+  <div class="flex flex-1 min-h-0">
+    <div
+      class="flex-1 min-h-0 flex items-center justify-center px-6 py-4"
+      style="container-type: size"
+    >
+      <div
+        ref="pageEl"
+        class="relative select-none"
+        :style="pageStyle"
+      >
+        <img
+          :src="imageUrl"
+          :width="metadata.width"
+          :height="metadata.height"
+          class="absolute border rounded pointer-events-none"
+          style="left: 50%; top: 50%; width: 100%; height: auto"
+          :style="imageStyle"
+        >
+        <svg
+          class="absolute inset-0 w-full h-full pointer-events-none"
+          viewBox="0 0 100 100"
+          preserveAspectRatio="none"
+        >
+          <path
+            :d="dimPath"
+            fill="black"
+            fill-opacity="0.4"
+            fill-rule="evenodd"
+          />
+          <polygon
+            :points="polygonPoints"
+            fill="none"
+            stroke="white"
+            stroke-width="0.4"
+            vector-effect="non-scaling-stroke"
+          />
+        </svg>
+        <div
+          v-for="(corner, cornerIndex) in displayCorners"
+          :key="cornerIndex"
+          class="absolute w-5 h-5 -ml-2.5 -mt-2.5 rounded-full bg-white border-2 border-neutral-600 cursor-move shadow"
+          :style="{ left: `${corner.x * 100}%`, top: `${corner.y * 100}%` }"
+          @mousedown.prevent="onCornerMousedown(cornerIndex)"
+        />
+      </div>
+    </div>
+    <div class="w-56 flex-none border-l px-4 py-4 space-y-2 flex flex-col">
+      <button
+        class="btn btn-sm w-full justify-start normal-case font-normal rounded disabled:bg-base-300"
+        :disabled="!!isProcessing"
+        @click.prevent="submit(true)"
+      >
+        <IconInnerShadowTop
+          v-if="isProcessing === 'scan'"
+          class="w-4 h-4 animate-spin"
+        />
+        <IconScan
+          v-else
+          class="w-4 h-4"
+        />
+        {{ t('crop_and_scan') }}
+      </button>
+      <button
+        class="btn btn-sm w-full justify-start normal-case font-normal rounded disabled:bg-base-300"
+        :disabled="!!isProcessing"
+        @click.prevent="submit(false)"
+      >
+        <IconInnerShadowTop
+          v-if="isProcessing === 'crop'"
+          class="w-4 h-4 animate-spin"
+        />
+        <IconCrop
+          v-else
+          width="22"
+          height="22"
+          style="margin-left: -3px"
+          :stroke-width="1.5"
+        />
+        <span :style="{ 'margin-left': isProcessing === 'crop' ? '0px' : '-3px' }">
+          {{ t('crop') }}
+        </span>
+      </button>
+      <button
+        class="btn btn-sm w-full justify-start normal-case font-normal rounded"
+        @click.prevent="$emit('cancel')"
+      >
+        <IconX class="w-4 h-4" />
+        {{ t('cancel') }}
+      </button>
+      <div class="border-t !mt-3 !mb-1" />
+      <button
+        class="btn btn-sm w-full justify-start normal-case font-normal rounded"
+        @click.prevent="rotateCw"
+      >
+        <IconRotateClockwise class="w-4 h-4" />
+        {{ t('rotate') }}
+      </button>
+      <button
+        class="btn btn-sm w-full justify-start normal-case font-normal rounded"
+        :class="{ 'btn-active': flipH }"
+        @click.prevent="toggleFlip('flipH')"
+      >
+        <IconFlipVertical class="w-4 h-4" />
+        {{ t('flip_horizontal') }}
+      </button>
+      <button
+        class="btn btn-sm w-full justify-start normal-case font-normal rounded"
+        :class="{ 'btn-active': flipV }"
+        @click.prevent="toggleFlip('flipV')"
+      >
+        <IconFlipHorizontal class="w-4 h-4" />
+        {{ t('flip_vertical') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { IconCrop, IconScan, IconInnerShadowTop, IconX, IconRotateClockwise, IconFlipHorizontal, IconFlipVertical } from '@tabler/icons-vue'
+
+export default {
+  name: 'DocumentsEditorCrop',
+  components: {
+    IconCrop,
+    IconScan,
+    IconInnerShadowTop,
+    IconX,
+    IconRotateClockwise,
+    IconFlipHorizontal,
+    IconFlipVertical
+  },
+  inject: ['t', 'baseFetch', 'isInlineSize'],
+  props: {
+    templateId: {
+      type: [Number, String],
+      required: true
+    },
+    page: {
+      type: Object,
+      required: true
+    },
+    imageUrl: {
+      type: String,
+      required: true
+    },
+    metadata: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['apply', 'cancel'],
+  data () {
+    return {
+      corners: [
+        { x: 0, y: 0 },
+        { x: 1, y: 0 },
+        { x: 1, y: 1 },
+        { x: 0, y: 1 }
+      ],
+      cornersTouched: false,
+      rotate: this.page.rotate || 0,
+      flipH: false,
+      flipV: false,
+      draggingIndex: null,
+      isProcessing: null
+    }
+  },
+  computed: {
+    displayWidth () {
+      return this.rotate % 180 ? this.metadata.height : this.metadata.width
+    },
+    displayHeight () {
+      return this.rotate % 180 ? this.metadata.width : this.metadata.height
+    },
+    pageStyle () {
+      const ratio = this.displayWidth / this.displayHeight
+
+      return {
+        aspectRatio: `${this.displayWidth} / ${this.displayHeight}`,
+        width: this.isInlineSize ? `min(100cqw, calc(100cqh * ${ratio}))` : `min(100%, calc(78vh * ${ratio}))`
+      }
+    },
+    imageStyle () {
+      const scale = this.rotate % 180 ? this.metadata.width / this.metadata.height : 1
+      const scaleX = (this.flipH ? -1 : 1) * scale
+      const scaleY = (this.flipV ? -1 : 1) * scale
+
+      return {
+        transform: `translate(-50%, -50%) rotate(${this.rotate}deg) scale(${scaleX}, ${scaleY})`
+      }
+    },
+    displayCorners () {
+      return this.corners.map((corner) => this.transformPoint(corner, this.rotate, this.flipH, this.flipV))
+    },
+    polygonPoints () {
+      return this.displayCorners.map((corner) => `${corner.x * 100},${corner.y * 100}`).join(' ')
+    },
+    dimPath () {
+      const quad = this.displayCorners.map((corner) => `${corner.x * 100} ${corner.y * 100}`)
+
+      return `M 0 0 H 100 V 100 H 0 Z M ${quad.join(' L ')} Z`
+    }
+  },
+  created () {
+    const query = new URLSearchParams({ attachment_uuid: this.page.sourceUuid })
+
+    this.baseFetch(`/templates/${this.templateId}/documents_crop?${query}`).then(async (resp) => {
+      if (resp.ok) {
+        const data = await resp.json()
+
+        if (data.corners?.length === 4 && !this.cornersTouched) {
+          this.corners = data.corners.map((corner) => ({ x: corner.x, y: corner.y }))
+        }
+      }
+    })
+  },
+  beforeUnmount () {
+    window.removeEventListener('mousemove', this.onMousemove)
+    window.removeEventListener('mouseup', this.onMouseup)
+  },
+  methods: {
+    transformPoint (point, rotate, flipH, flipV) {
+      let { x, y } = point
+
+      if (flipH) {
+        x = 1 - x
+      }
+
+      if (flipV) {
+        y = 1 - y
+      }
+
+      if (rotate === 90) {
+        return { x: 1 - y, y: x }
+      } else if (rotate === 180) {
+        return { x: 1 - x, y: 1 - y }
+      } else if (rotate === 270) {
+        return { x: y, y: 1 - x }
+      } else {
+        return { x, y }
+      }
+    },
+    inverseTransformPoint (point, rotate, flipH, flipV) {
+      let { x, y } = point
+
+      if (rotate === 90) {
+        [x, y] = [y, 1 - x]
+      } else if (rotate === 180) {
+        [x, y] = [1 - x, 1 - y]
+      } else if (rotate === 270) {
+        [x, y] = [1 - y, x]
+      }
+
+      if (flipH) {
+        x = 1 - x
+      }
+
+      if (flipV) {
+        y = 1 - y
+      }
+
+      return { x, y }
+    },
+    rotateCw () {
+      this.rotate = (this.rotate + 90) % 360
+    },
+    toggleFlip (key) {
+      this[key] = !this[key]
+    },
+    pagePoint (event) {
+      const rect = this.$refs.pageEl.getBoundingClientRect()
+
+      return {
+        x: Math.min(Math.max((event.clientX - rect.left) / rect.width, 0), 1),
+        y: Math.min(Math.max((event.clientY - rect.top) / rect.height, 0), 1)
+      }
+    },
+    onCornerMousedown (index) {
+      this.draggingIndex = index
+      this.cornersTouched = true
+
+      window.addEventListener('mousemove', this.onMousemove)
+      window.addEventListener('mouseup', this.onMouseup, { once: true })
+    },
+    onMousemove (event) {
+      if (this.draggingIndex === null) {
+        return
+      }
+
+      const point = this.inverseTransformPoint(this.pagePoint(event), this.rotate, this.flipH, this.flipV)
+
+      this.corners[this.draggingIndex] = point
+    },
+    onMouseup () {
+      window.removeEventListener('mousemove', this.onMousemove)
+
+      this.draggingIndex = null
+    },
+    submit (scan) {
+      this.isProcessing = scan ? 'scan' : 'crop'
+
+      this.baseFetch(`/templates/${this.templateId}/documents_crop`, {
+        method: 'POST',
+        body: JSON.stringify({
+          attachment_uuid: this.page.sourceUuid,
+          corners: this.corners,
+          rotate: this.rotate || undefined,
+          flip_h: this.flipH,
+          flip_v: this.flipV,
+          scan
+        }),
+        headers: { 'Content-Type': 'application/json' }
+      }).then(async (resp) => {
+        const data = await resp.json().catch(() => ({}))
+
+        if (resp.ok) {
+          this.$emit('apply', data.document)
+        } else if (data.error) {
+          alert(data.error)
+        }
+      }).finally(() => {
+        this.isProcessing = null
+      })
+    }
+  }
+}
+</script>

app/javascript/template_builder/documents_editor_page.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="relative">
+    <div
+      class="relative"
+      :style="boxStyle"
+    >
+      <img
+        :src="imageUrl"
+        :width="metadata.width"
+        :height="metadata.height"
+        class="rounded border pointer-events-none outline outline-1 -outline-offset-1 transition-[outline-color] duration-75"
+        :class="[
+          page.rotate % 180 ? 'absolute inset-0 m-auto w-full' : 'w-full',
+          selected ? 'outline-neutral-400' : 'outline-transparent'
+        ]"
+        :style="imageStyle"
+        :loading="lazy ? 'lazy' : 'eager'"
+      >
+      <div
+        v-if="areas.length || page.redact.length"
+        class="absolute pointer-events-none"
+        :style="overlayStyle"
+      >
+        <div
+          v-for="(item, areaIndex) in areas"
+          :key="areaIndex"
+          class="absolute border rounded-sm opacity-70"
+          :class="[areaBorderColor(item.submitterIndex), areaBgColor(item.submitterIndex)]"
+          :style="{
+            left: `${item.area.x * 100}%`,
+            top: `${item.area.y * 100}%`,
+            width: `${item.area.w * 100}%`,
+            height: `${item.area.h * 100}%`
+          }"
+        />
+        <div
+          v-for="(rect, rectIndex) in page.redact"
+          :key="`redact-${rectIndex}`"
+          class="absolute bg-black"
+          :style="{
+            left: `${rect.x * 100}%`,
+            top: `${rect.y * 100}%`,
+            width: `${rect.w * 100}%`,
+            height: `${rect.h * 100}%`
+          }"
+        />
+      </div>
+      <div
+        v-if="withActions"
+        class="absolute top-1 right-1 flex space-x-1 group-hover:opacity-100"
+        :class="selected ? 'opacity-100' : 'opacity-0'"
+      >
+        <span
+          v-if="extraAction"
+          class="tooltip tooltip-bottom"
+          :data-tip="t(extraAction)"
+        >
+          <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 transition-colors p-0"
+            style="width: 22px; height: 22px; min-height: 22px"
+            @click.stop.prevent="$emit(extraAction)"
+          >
+            <IconEraser
+              v-if="extraAction === 'redact'"
+              :width="14"
+              :height="14"
+              :stroke-width="1.6"
+            />
+            <IconCrop
+              v-else
+              :width="20"
+              :height="20"
+              :stroke-width="1.2"
+            />
+          </button>
+        </span>
+        <span
+          class="tooltip tooltip-bottom"
+          :data-tip="t('rotate')"
+        >
+          <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 transition-colors p-0"
+            style="width: 22px; height: 22px; min-height: 22px"
+            @click.stop.prevent="$emit('rotate')"
+          >
+            <IconRotateClockwise
+              :width="14"
+              :height="14"
+              :stroke-width="1.6"
+            />
+          </button>
+        </span>
+        <span
+          class="tooltip tooltip-bottom"
+          :data-tip="t('remove')"
+        >
+          <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 transition-colors p-0"
+            style="width: 22px; height: 22px; min-height: 22px"
+            @click.stop.prevent="$emit('remove')"
+          >
+            <IconX
+              :width="14"
+              :height="14"
+              :stroke-width="1.6"
+            />
+          </button>
+        </span>
+      </div>
+    </div>
+    <div
+      v-if="pageNumber"
+      class="text-center text-sm pt-1 pointer-events-none"
+    >
+      {{ t('page') }} {{ pageNumber }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { IconRotateClockwise, IconX, IconEraser, IconCrop } from '@tabler/icons-vue'
+import Area from './area.vue'
+
+export default {
+  name: 'DocumentsEditorPage',
+  components: {
+    IconRotateClockwise,
+    IconX,
+    IconEraser,
+    IconCrop
+  },
+  inject: ['t'],
+  props: {
+    page: {
+      type: Object,
+      required: true
+    },
+    imageUrl: {
+      type: String,
+      required: true
+    },
+    metadata: {
+      type: Object,
+      required: true
+    },
+    areas: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    selected: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    withActions: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    pageNumber: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    lazy: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    extraAction: {
+      type: String,
+      required: false,
+      default: null
+    }
+  },
+  emits: ['rotate', 'remove', 'redact', 'crop'],
+  computed: {
+    borderColors: Area.computed.borderColors,
+    bgColors: Area.computed.bgColors,
+    boxStyle () {
+      if (!this.page.rotate || !(this.page.rotate % 180)) {
+        return null
+      }
+
+      return { aspectRatio: `${this.metadata.height} / ${this.metadata.width}` }
+    },
+    imageStyle () {
+      if (!this.page.rotate) {
+        return null
+      }
+
+      let transform = `rotate(${this.page.rotate}deg)`
+
+      if (this.page.rotate % 180) {
+        transform += ` scale(${this.metadata.width / this.metadata.height})`
+      }
+
+      return { transform }
+    },
+    overlayStyle () {
+      if (!this.page.rotate || !(this.page.rotate % 180)) {
+        return { inset: '0', transform: this.page.rotate ? `rotate(${this.page.rotate}deg)` : undefined }
+      }
+
+      return {
+        left: '50%',
+        top: '50%',
+        width: '100%',
+        aspectRatio: `${this.metadata.width} / ${this.metadata.height}`,
+        transform: `translate(-50%, -50%) rotate(${this.page.rotate}deg) scale(${this.metadata.width / this.metadata.height})`
+      }
+    }
+  },
+  methods: {
+    areaBorderColor (submitterIndex) {
+      return this.borderColors[Math.max(submitterIndex, 0) % this.borderColors.length]
+    },
+    areaBgColor (submitterIndex) {
+      return this.bgColors[Math.max(submitterIndex, 0) % this.bgColors.length]
+    }
+  }
+}
+</script>

app/javascript/template_builder/documents_editor_redact.vue

@@ -0,0 +1,413 @@
+<template>
+  <div class="flex flex-1 min-h-0">
+    <div class="flex-1 overflow-y-auto px-6 py-4">
+      <div
+        ref="pageEl"
+        class="relative mx-auto select-none cursor-crosshair"
+        :style="pageStyle"
+        @mousedown.prevent="onMousedown"
+      >
+        <img
+          :src="imageUrl"
+          :width="metadata.width"
+          :height="metadata.height"
+          class="absolute border rounded pointer-events-none"
+          style="left: 50%; top: 50%; width: 100%; height: auto"
+          :style="imageStyle"
+        >
+        <div
+          class="absolute pointer-events-none"
+          :style="overlayStyle"
+        >
+          <div
+            v-for="(rect, rectIndex) in redactRects"
+            :key="`rect-${rectIndex}`"
+            class="absolute bg-black pointer-events-none"
+            :style="{
+              left: `${rect.x * 100}%`,
+              top: `${rect.y * 100}%`,
+              width: `${rect.w * 100}%`,
+              height: `${rect.h * 100}%`
+            }"
+          />
+        </div>
+        <div
+          v-if="marquee"
+          class="absolute border border-neutral-600 bg-neutral-600/10 pointer-events-none"
+          :style="marqueeStyle"
+        />
+        <div
+          v-if="!imagePage && textNodes && !textNodes.length && !imageNodes.length"
+          class="absolute inset-x-0 top-0 flex justify-center pt-4 pointer-events-none"
+        >
+          <span class="bg-base-100/90 border border-neutral-200 rounded-lg shadow px-4 py-2 text-sm">
+            {{ t('there_is_no_text_to_redact_on_this_page') }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="w-56 flex-none border-l px-4 py-4 space-y-2">
+      <button
+        class="btn btn-sm w-full justify-start normal-case font-normal rounded disabled:bg-base-300"
+        :disabled="!hasRedactions && !wasReset"
+        @click.prevent="apply"
+      >
+        <IconCheck class="w-4 h-4" />
+        {{ t('apply') }}
+      </button>
+      <div class="border-t !mt-3 !mb-1" />
+      <button
+        class="btn btn-sm w-full justify-start normal-case font-normal rounded disabled:bg-base-300"
+        :disabled="!hasRedactions"
+        @click.prevent="reset"
+      >
+        <IconRotate class="w-4 h-4" />
+        {{ t('reset') }}
+      </button>
+      <button
+        class="btn btn-sm w-full justify-start normal-case font-normal rounded"
+        @click.prevent="$emit('cancel')"
+      >
+        <IconX class="w-4 h-4" />
+        {{ t('cancel') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { IconCheck, IconRotate, IconX } from '@tabler/icons-vue'
+
+export default {
+  name: 'DocumentsEditorRedact',
+  components: {
+    IconCheck,
+    IconRotate,
+    IconX
+  },
+  inject: ['t', 'baseFetch'],
+  props: {
+    templateId: {
+      type: [Number, String],
+      required: true
+    },
+    page: {
+      type: Object,
+      required: true
+    },
+    imageUrl: {
+      type: String,
+      required: true
+    },
+    metadata: {
+      type: Object,
+      required: true
+    },
+    imagePage: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    pageObjectsCache: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
+  },
+  emits: ['apply', 'cancel'],
+  data () {
+    return {
+      textNodes: null,
+      imageNodes: [],
+      selectedNodes: {},
+      freeRects: [],
+      rects: [],
+      wasReset: false,
+      marquee: null
+    }
+  },
+  computed: {
+    rotate () {
+      return this.page.rotate || 0
+    },
+    displayWidth () {
+      return this.rotate % 180 ? this.metadata.height : this.metadata.width
+    },
+    displayHeight () {
+      return this.rotate % 180 ? this.metadata.width : this.metadata.height
+    },
+    pageStyle () {
+      return { aspectRatio: `${this.displayWidth} / ${this.displayHeight}` }
+    },
+    imageStyle () {
+      const scale = this.rotate % 180 ? this.metadata.width / this.metadata.height : 1
+
+      return {
+        transform: `translate(-50%, -50%) rotate(${this.rotate}deg) scale(${scale})`
+      }
+    },
+    overlayStyle () {
+      if (!this.rotate || !(this.rotate % 180)) {
+        return { inset: '0', transform: this.rotate ? `rotate(${this.rotate}deg)` : undefined }
+      }
+
+      return {
+        left: '50%',
+        top: '50%',
+        width: '100%',
+        aspectRatio: `${this.metadata.width} / ${this.metadata.height}`,
+        transform: `translate(-50%, -50%) rotate(${this.rotate}deg) scale(${this.metadata.width / this.metadata.height})`
+      }
+    },
+    hasRedactions () {
+      if (this.imagePage) {
+        return this.rects.length > 0
+      }
+
+      return Object.keys(this.selectedNodes).length > 0 || this.freeRects.length > 0
+    },
+    redactRects () {
+      if (this.imagePage) {
+        return this.rects
+      }
+
+      return this.textNodes ? [...this.buildRedactRects(), ...this.freeRects] : []
+    },
+    marqueeStyle () {
+      const left = Math.min(this.marquee.x1, this.marquee.x2)
+      const top = Math.min(this.marquee.y1, this.marquee.y2)
+
+      return {
+        left: `${left * 100}%`,
+        top: `${top * 100}%`,
+        width: `${Math.abs(this.marquee.x2 - this.marquee.x1) * 100}%`,
+        height: `${Math.abs(this.marquee.y2 - this.marquee.y1) * 100}%`
+      }
+    }
+  },
+  created () {
+    if (this.imagePage) {
+      this.rects = (this.page.redact || []).map((rect) => ({ ...rect }))
+
+      return
+    }
+
+    const cacheKey = `${this.page.sourceUuid}-${this.page.sourcePage}`
+
+    if (this.pageObjectsCache[cacheKey]) {
+      this.textNodes = this.pageObjectsCache[cacheKey].text_nodes
+      this.imageNodes = this.pageObjectsCache[cacheKey].image_nodes
+
+      this.preselectNodes()
+
+      return
+    }
+
+    const query = new URLSearchParams({ attachment_uuid: this.page.sourceUuid, page: this.page.sourcePage })
+
+    this.baseFetch(`/templates/${this.templateId}/documents_page_objects?${query}`).then(async (resp) => {
+      if (resp.ok) {
+        const data = await resp.json()
+
+        this.pageObjectsCache[cacheKey] = data
+        this.textNodes = data.text_nodes
+        this.imageNodes = data.image_nodes
+
+        this.preselectNodes()
+      } else {
+        this.$emit('cancel')
+      }
+    })
+  },
+  beforeUnmount () {
+    window.removeEventListener('mousemove', this.onMousemove)
+    window.removeEventListener('mouseup', this.onMouseup)
+  },
+  methods: {
+    inverseRotatePoint (point, rotate) {
+      let { x, y } = point
+
+      if (rotate === 90) {
+        [x, y] = [y, 1 - x]
+      } else if (rotate === 180) {
+        [x, y] = [1 - x, 1 - y]
+      } else if (rotate === 270) {
+        [x, y] = [1 - y, x]
+      }
+
+      return { x, y }
+    },
+    apply () {
+      this.$emit('apply', this.redactRects)
+    },
+    reset () {
+      this.wasReset = true
+
+      if (this.imagePage) {
+        this.rects = []
+      } else {
+        this.selectedNodes = {}
+        this.freeRects = []
+      }
+    },
+    boxesIntersect (a, b) {
+      return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y
+    },
+    preselectNodes () {
+      const nodeRects = []
+
+      ;(this.page.redact || []).forEach((rect) => {
+        if (this.imageNodes.some((node) => this.boxesIntersect(node, rect))) {
+          this.freeRects.push({ ...rect })
+        } else {
+          nodeRects.push(rect)
+        }
+      })
+
+      this.textNodes.forEach((node, index) => {
+        const centerX = node.x + (node.w / 2)
+        const centerY = node.y + (node.h / 2)
+
+        const isInside = nodeRects.some((rect) => {
+          return centerX >= rect.x && centerX <= rect.x + rect.w &&
+            centerY >= rect.y && centerY <= rect.y + rect.h
+        })
+
+        if (isInside) {
+          this.selectedNodes[index] = true
+        }
+      })
+    },
+    buildRedactRects () {
+      const nodes = this.textNodes.filter((_, index) => this.selectedNodes[index])
+
+      const sorted = nodes.slice().sort((a, b) => {
+        const diff = (a.y + (a.h / 2)) - (b.y + (b.h / 2))
+
+        return Math.abs(diff) < Math.min(a.h, b.h) / 2 ? a.x - b.x : diff
+      })
+
+      const rects = []
+
+      sorted.forEach((node) => {
+        const last = rects[rects.length - 1]
+
+        const sameLine = last &&
+          Math.abs((node.y + (node.h / 2)) - (last.y + (last.h / 2))) < Math.max(last.h, node.h) / 2
+
+        if (sameLine && node.x <= last.x + last.w + (node.h * 0.7)) {
+          const right = Math.max(last.x + last.w, node.x + node.w)
+          const bottom = Math.max(last.y + last.h, node.y + node.h)
+
+          last.x = Math.min(last.x, node.x)
+          last.y = Math.min(last.y, node.y)
+          last.w = right - last.x
+          last.h = bottom - last.y
+        } else {
+          rects.push({ x: node.x, y: node.y, w: node.w, h: node.h })
+        }
+      })
+
+      return rects
+    },
+    pagePoint (event) {
+      const rect = this.$refs.pageEl.getBoundingClientRect()
+
+      return {
+        x: Math.min(Math.max((event.clientX - rect.left) / rect.width, 0), 1),
+        y: Math.min(Math.max((event.clientY - rect.top) / rect.height, 0), 1)
+      }
+    },
+    onMousedown (event) {
+      if (event.button !== 0 || (!this.imagePage && !this.textNodes)) {
+        return
+      }
+
+      const point = this.pagePoint(event)
+
+      this.marquee = { x1: point.x, y1: point.y, x2: point.x, y2: point.y }
+
+      window.addEventListener('mousemove', this.onMousemove)
+      window.addEventListener('mouseup', this.onMouseup, { once: true })
+    },
+    onMousemove (event) {
+      const point = this.pagePoint(event)
+
+      this.marquee.x2 = point.x
+      this.marquee.y2 = point.y
+    },
+    onMouseup () {
+      window.removeEventListener('mousemove', this.onMousemove)
+
+      if (!this.marquee) {
+        return
+      }
+
+      const start = this.inverseRotatePoint({ x: this.marquee.x1, y: this.marquee.y1 }, this.rotate)
+      const finish = this.inverseRotatePoint({ x: this.marquee.x2, y: this.marquee.y2 }, this.rotate)
+
+      const left = Math.min(start.x, finish.x)
+      const right = Math.max(start.x, finish.x)
+      const top = Math.min(start.y, finish.y)
+      const bottom = Math.max(start.y, finish.y)
+
+      this.marquee = null
+
+      if (right - left < 0.005 && bottom - top < 0.005) {
+        if (this.imagePage) {
+          const index = this.rects.findIndex((rect) => {
+            return left >= rect.x && left <= rect.x + rect.w && top >= rect.y && top <= rect.y + rect.h
+          })
+
+          if (index !== -1) {
+            this.rects.splice(index, 1)
+          }
+        } else {
+          const rectIndex = this.freeRects.findIndex((rect) => {
+            return left >= rect.x && left <= rect.x + rect.w && top >= rect.y && top <= rect.y + rect.h
+          })
+
+          if (rectIndex !== -1) {
+            this.freeRects.splice(rectIndex, 1)
+          } else {
+            const index = this.textNodes.findIndex((node) => {
+              return left >= node.x && left <= node.x + node.w && top >= node.y && top <= node.y + node.h
+            })
+
+            if (index !== -1) {
+              if (this.selectedNodes[index]) {
+                delete this.selectedNodes[index]
+              } else {
+                this.selectedNodes[index] = true
+              }
+            }
+          }
+        }
+      } else if (this.imagePage) {
+        this.rects.push({ x: left, y: top, w: right - left, h: bottom - top })
+      } else {
+        const marqueeBox = { x: left, y: top, w: right - left, h: bottom - top }
+
+        this.textNodes.forEach((node, index) => {
+          if (node.x < right && node.x + node.w > left && node.y < bottom && node.y + node.h > top) {
+            this.selectedNodes[index] = true
+          }
+        })
+
+        this.imageNodes.forEach((node) => {
+          if (!this.boxesIntersect(node, marqueeBox)) {
+            return
+          }
+
+          const x = Math.max(node.x, marqueeBox.x)
+          const y = Math.max(node.y, marqueeBox.y)
+          const w = Math.min(node.x + node.w, marqueeBox.x + marqueeBox.w) - x
+          const h = Math.min(node.y + node.h, marqueeBox.y + marqueeBox.h) - y
+
+          this.freeRects.push({ x, y, w, h })
+        })
+      }
+    }
+  }
+}
+</script>

app/javascript/template_builder/dropzone.vue

@@ -62,7 +62,7 @@
           name="files[]"
           :accept="acceptFileTypes"
           multiple
-          @change="upload"
+          @change="upload()"
         >
       </form>
     </label>

app/javascript/template_builder/dynamic_document.vue

@@ -183,6 +183,9 @@ export default {
         this.sectionRefs.push(ref)
       }
     },
+    reloadContent () {
+      this.sectionRefs.forEach((ref) => ref.reloadContent())
+    },
     onBeforeUnload (event) {
       if (this.saveTimer) {
         event.preventDefault()

app/javascript/template_builder/dynamic_editor.js

@@ -25,6 +25,13 @@ tiptapStylesheet.replaceSync(
   -webkit-font-variant-ligatures: none;
   font-variant-ligatures: none;
   font-feature-settings: "liga" 0;
+  display: flex;
+  flex-flow: column nowrap;
+  min-height: inherit;
+}
+
+.ProseMirror > article {
+  margin-bottom: auto;
 }
 
 .ProseMirror [contenteditable="false"] {
@@ -87,6 +94,8 @@ img.ProseMirror-separator {
 }
 dynamic-variable {
   background-color: #fef3c7;
+  word-break: break-all;
+  overflow-wrap: anywhere;
 }`)
 
 function collectDomAttrs (dom) {
@@ -129,11 +138,12 @@ function collectSpanDomAttrs (dom) {
   return result
 }
 
-function createBlockNode (name, tag, content) {
+function createBlockNode (name, tag, content, extra = {}) {
   return Node.create({
     name,
     group: 'block',
     content: content || 'block+',
+    ...extra,
     addAttributes () {
       return {
         htmlAttrs: { default: {} }
@@ -187,7 +197,9 @@ const CustomHeading = Node.create({
 })
 
 const SectionNode = createBlockNode('section', 'section')
-const ArticleNode = createBlockNode('article', 'article')
+const ArticleNode = createBlockNode('article', 'article', null, { isolating: true })
+const HeaderNode = createBlockNode('header', 'header', null, { isolating: true })
+const FooterNode = createBlockNode('footer', 'footer', null, { isolating: true })
 const DivNode = createBlockNode('div', 'div')
 const BlockquoteNode = createBlockNode('blockquote', 'blockquote')
 const PreNode = createBlockNode('pre', 'pre')
@@ -738,14 +750,12 @@ export function buildEditor ({ dynamicAreaProps, attachmentsIndex, renderHtmlFor
       History,
       Gapcursor,
       Dropcursor,
-      CustomBold,
-      CustomItalic,
-      CustomUnderline,
-      CustomStrike,
       CustomParagraph,
       CustomHeading,
       SectionNode,
       ArticleNode,
+      HeaderNode,
+      FooterNode,
       DivNode,
       BlockquoteNode,
       PreNode,
@@ -764,6 +774,10 @@ export function buildEditor ({ dynamicAreaProps, attachmentsIndex, renderHtmlFor
       EmptySpanNode,
       LinkMark,
       SpanMark,
+      CustomBold,
+      CustomItalic,
+      CustomUnderline,
+      CustomStrike,
       SubscriptMark,
       SuperscriptMark,
       VariableHighlight,

app/javascript/template_builder/dynamic_section.vue

@@ -281,6 +281,9 @@ export default {
     }
   },
   methods: {
+    reloadContent () {
+      this.editor.commands.setContent(this.section.innerHTML, { emitUpdate: false })
+    },
     findAreaNodePos (areaUuid) {
       const el = this.editor.view.dom.querySelector(`[data-area-uuid="${areaUuid}"]`)
 

app/javascript/template_builder/dynamic_variable.vue

@@ -119,7 +119,7 @@
                 @change="[schema.format = $event.target.value, save()]"
               >
                 <option
-                  v-for="format in dateFormats"
+                  v-for="format in availableDateFormats"
                   :key="format"
                   :value="format"
                 >{{ formatDate(new Date(), format) }}</option>
@@ -248,7 +248,7 @@ export default {
     FieldType,
     IconSettings
   },
-  inject: ['t', 'save', 'backgroundColor'],
+  inject: ['t', 'save', 'backgroundColor', 'dateFormats', 'locale'],
   provide () {
     return {
       fieldTypes: ['text', 'number', 'date', 'checkbox', 'radio', 'select']
@@ -308,30 +308,36 @@ export default {
       return { text: 'string', number: 'number', date: 'date', checkbox: 'boolean', radio: 'string', select: 'string' }
     },
     numberFormats () {
-      return [
-        'none',
-        'usd',
-        'eur',
-        'gbp',
-        'comma',
-        'dot',
-        'space'
-      ]
-    },
-    dateFormats () {
-      const formats = [
-        'MM/DD/YYYY',
-        'DD/MM/YYYY',
-        'YYYY-MM-DD',
-        'DD-MM-YYYY',
-        'DD.MM.YYYY',
-        'MMM D, YYYY',
-        'MMMM D, YYYY',
-        'D MMM YYYY',
-        'D MMMM YYYY'
-      ]
+      const formats = ['none', 'usd', 'eur', 'gbp', 'comma', 'dot', 'space']
+      const spaceLocales = ['fr-FR', 'es-ES', 'pt-PT', 'de-DE', 'it-IT', 'nl-NL']
 
-      if (Intl.DateTimeFormat().resolvedOptions().timeZone?.includes('Seoul') || navigator.language?.startsWith('ko')) {
+      formats.push(spaceLocales.includes(this.locale) ? 'percent_space' : 'percent')
+
+      const selectedFormat = this.schema.format
+
+      if (selectedFormat && !formats.includes(selectedFormat)) {
+        formats.push(selectedFormat)
+      }
+
+      return formats
+    },
+    availableDateFormats () {
+      const formats = this.dateFormats.length
+        ? [...this.dateFormats]
+        : [
+            'MM/DD/YYYY',
+            'DD/MM/YYYY',
+            'YYYY-MM-DD',
+            'DD-MM-YYYY',
+            'DD.MM.YYYY',
+            'MMM D, YYYY',
+            'MMMM D, YYYY',
+            'MMMM YYYY',
+            'D MMM YYYY',
+            'D MMMM YYYY'
+          ]
+
+      if (!this.dateFormats.length && (Intl.DateTimeFormat().resolvedOptions().timeZone?.includes('Seoul') || navigator.language?.startsWith('ko'))) {
         formats.push('YYYY년 MM월 DD일')
       }
 
@@ -394,6 +400,10 @@ export default {
         return new Intl.NumberFormat('de-DE').format(number)
       } else if (format === 'space') {
         return new Intl.NumberFormat('fr-FR').format(number)
+      } else if (format === 'percent') {
+        return `${number}%`
+      } else if (format === 'percent_space') {
+        return `${String(number).replace('.', ',')} %`
       } else {
         return number
       }
@@ -401,18 +411,47 @@ export default {
     formatDate (date, format) {
       const monthFormats = { M: 'numeric', MM: '2-digit', MMM: 'short', MMMM: 'long' }
       const dayFormats = { D: 'numeric', DD: '2-digit' }
-      const yearFormats = { YYYY: 'numeric', YY: '2-digit' }
+      const yearFormats = { YYYY: 'numeric', YYY: 'numeric', YY: '2-digit' }
+      const hourFormats = { H: 'numeric', HH: '2-digit', h: 'numeric', hh: '2-digit' }
+      const minuteFormats = { m: 'numeric', mm: '2-digit' }
+      const secondFormats = { s: 'numeric', ss: '2-digit' }
 
-      const parts = new Intl.DateTimeFormat([], {
+      const opts = {
         day: dayFormats[format.match(/D+/)],
         month: monthFormats[format.match(/M+/)],
         year: yearFormats[format.match(/Y+/)]
-      }).formatToParts(date)
+      }
 
-      return format
-        .replace(/D+/, parts.find((p) => p.type === 'day').value)
-        .replace(/M+/, parts.find((p) => p.type === 'month').value)
-        .replace(/Y+/, parts.find((p) => p.type === 'year').value)
+      if (format.match(/H+/)) { opts.hour = hourFormats[format.match(/H+/)[0]]; opts.hour12 = false }
+      if (format.match(/h+/)) { opts.hour = hourFormats[format.match(/h+/)[0]]; opts.hour12 = true }
+      if (/[Aa]/.test(format) && opts.hour12 === undefined) opts.hour12 = true
+      if (format.match(/m+/)) opts.minute = minuteFormats[format.match(/m+/)[0]]
+      if (format.match(/s+/)) opts.second = secondFormats[format.match(/s+/)[0]]
+      if (/z/.test(format)) opts.timeZoneName = 'short'
+
+      const partTypes = {
+        M: 'month',
+        D: 'day',
+        Y: 'year',
+        H: 'hour',
+        h: 'hour',
+        m: 'minute',
+        s: 'second',
+        z: 'timeZoneName',
+        A: 'dayPeriod',
+        a: 'dayPeriod'
+      }
+
+      const parts = new Intl.DateTimeFormat([], opts).formatToParts(date)
+
+      return format.replace(/MMMM|MMM|MM|M|DD|D|YYYY|YYY|YY|HH|hh|H|h|mm|m|ss|s|A|a|z/g, (token) => {
+        const value = parts.find((p) => p.type === partTypes[token[0]])?.value
+
+        if (token === 'A') return (value || '').toUpperCase()
+        if (token === 'a') return (value || '').toLowerCase()
+
+        return value
+      })
     },
     closeDropdown () {
       this.$el.getRootNode().activeElement.blur()

app/javascript/template_builder/field.vue

@@ -345,7 +345,7 @@ export default {
     IconMathFunction,
     FieldType
   },
-  inject: ['template', 'backgroundColor', 'selectedAreasRef', 't', 'locale', 'getFieldTypeIndex'],
+  inject: ['template', 'backgroundColor', 'selectedAreasRef', 't', 'locale', 'getFieldTypeIndex', 'dateFormats'],
   props: {
     field: {
       type: Object,
@@ -428,7 +428,8 @@ export default {
 
     if (this.field.type === 'date') {
       this.field.preferences.format ||=
-       ({ 'de-DE': 'DD.MM.YYYY' }[this.locale] || ((Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') || new Intl.DateTimeFormat('en-US', { timeZoneName: 'short' }).format(new Date()).match(/\s(?:CST|CDT|PST|PDT|EST|EDT)$/)) ? 'MM/DD/YYYY' : 'DD/MM/YYYY'))
+        this.dateFormats[0] ||
+        ({ 'de-DE': 'DD.MM.YYYY' }[this.locale] || ((Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') || new Intl.DateTimeFormat('en-US', { timeZoneName: 'short' }).format(new Date()).match(/\s(?:CST|CDT|PST|PDT|EST|EDT)$/)) ? 'MM/DD/YYYY' : 'DD/MM/YYYY'))
     }
   },
   methods: {

app/javascript/template_builder/field_context_menu.vue

@@ -514,7 +514,7 @@ export default {
     ContextSubmenu,
     ContextModal
   },
-  inject: ['t', 'getFieldTypeIndex', 'template', 'withCustomFields', 'currencies'],
+  inject: ['t', 'getFieldTypeIndex', 'template', 'withCustomFields', 'currencies', 'dateFormats', 'locale'],
   props: {
     contextMenu: {
       type: Object,
@@ -580,7 +580,7 @@ export default {
     fieldNames: FieldType.computed.fieldNames,
     fieldLabels: FieldType.computed.fieldLabels,
     validationOptions: FieldSettings.computed.validations,
-    dateFormats: FieldSettings.computed.dateFormats,
+    availableDateFormats: FieldSettings.computed.availableDateFormats,
     numberFormats: FieldSettings.computed.numberFormats,
     prefillableFieldTypes: FieldSettings.computed.prefillableFieldTypes,
     verificationMethods: FieldSettings.computed.verificationMethods,
@@ -686,7 +686,7 @@ export default {
     },
     formatOptions () {
       switch (this.field.type) {
-        case 'date': return this.dateFormats.map(f => ({ value: f, label: this.formatDate(new Date(), f) }))
+        case 'date': return this.availableDateFormats.map(f => ({ value: f, label: this.formatDate(new Date(), f) }))
         case 'number': return this.numberFormats.map(f => ({ value: f, label: this.formatNumber(123456789.567, f) }))
         case 'signature': return this.signatureFormats.map(f => ({ value: f, label: this.t(f) }))
         default: return []

app/javascript/template_builder/field_settings.vue

@@ -290,7 +290,7 @@
       @change="$emit('save')"
     >
       <option
-        v-for="format in dateFormats"
+        v-for="format in availableDateFormats"
         :key="format"
         :value="format"
       >
@@ -610,7 +610,7 @@ export default {
     IconTypography,
     IconX
   },
-  inject: ['template', 't'],
+  inject: ['template', 't', 'dateFormats', 'locale'],
   props: {
     field: {
       type: Object,
@@ -691,30 +691,36 @@ export default {
       }
     },
     numberFormats () {
-      return [
-        'none',
-        'usd',
-        'eur',
-        'gbp',
-        'comma',
-        'dot',
-        'space'
-      ]
-    },
-    dateFormats () {
-      const formats = [
-        'MM/DD/YYYY',
-        'DD/MM/YYYY',
-        'YYYY-MM-DD',
-        'DD-MM-YYYY',
-        'DD.MM.YYYY',
-        'MMM D, YYYY',
-        'MMMM D, YYYY',
-        'D MMM YYYY',
-        'D MMMM YYYY'
-      ]
+      const formats = ['none', 'usd', 'eur', 'gbp', 'comma', 'dot', 'space']
+      const spaceLocales = ['fr-FR', 'es-ES', 'pt-PT', 'de-DE', 'it-IT', 'nl-NL']
 
-      if (Intl.DateTimeFormat().resolvedOptions().timeZone?.includes('Seoul') || navigator.language?.startsWith('ko')) {
+      formats.push(spaceLocales.includes(this.locale) ? 'percent_space' : 'percent')
+
+      const selectedFormat = this.field.preferences?.format
+
+      if (selectedFormat && !formats.includes(selectedFormat)) {
+        formats.push(selectedFormat)
+      }
+
+      return formats
+    },
+    availableDateFormats () {
+      const formats = this.dateFormats.length
+        ? [...this.dateFormats]
+        : [
+            'MM/DD/YYYY',
+            'DD/MM/YYYY',
+            'YYYY-MM-DD',
+            'DD-MM-YYYY',
+            'DD.MM.YYYY',
+            'MMM D, YYYY',
+            'MMMM D, YYYY',
+            'MMMM YYYY',
+            'D MMM YYYY',
+            'D MMMM YYYY'
+          ]
+
+      if (!this.dateFormats.length && (Intl.DateTimeFormat().resolvedOptions().timeZone?.includes('Seoul') || navigator.language?.startsWith('ko'))) {
         formats.push('YYYY년 MM월 DD일')
       }
 
@@ -783,17 +789,27 @@ export default {
     },
     copyToAllPages (field) {
       const areaString = JSON.stringify(field.areas[0])
+      const newAreas = []
+      const existingAreasIndex = field.areas.reduce((acc, area) => {
+        acc[`${area.attachment_uuid}-${area.page}`] = area
+
+        return acc
+      }, {})
+
+      this.template.schema.forEach((item) => {
+        const attachment = this.template.documents.find((d) => d.uuid === item.attachment_uuid)
 
-      this.template.documents.forEach((attachment) => {
         const numberOfPages = attachment.metadata?.pdf?.number_of_pages || attachment.preview_images.length
 
         for (let page = 0; page <= numberOfPages - 1; page++) {
-          if (!field.areas.find((area) => area.attachment_uuid === attachment.uuid && area.page === page)) {
-            field.areas.push({ ...JSON.parse(areaString), attachment_uuid: attachment.uuid, page })
-          }
+          const existing = existingAreasIndex[`${attachment.uuid}-${page}`]
+
+          newAreas.push(existing || { ...JSON.parse(areaString), attachment_uuid: attachment.uuid, page })
         }
       })
 
+      field.areas = newAreas
+
       this.$emit('scroll-to', this.field.areas[this.field.areas.length - 1])
 
       this.$emit('save')
@@ -811,6 +827,10 @@ export default {
         return new Intl.NumberFormat('de-DE').format(number)
       } else if (format === 'space') {
         return new Intl.NumberFormat('fr-FR').format(number)
+      } else if (format === 'percent') {
+        return `${number}%`
+      } else if (format === 'percent_space') {
+        return `${String(number).replace('.', ',')} %`
       } else {
         return number
       }
@@ -819,33 +839,49 @@ export default {
       return pattern?.match(/^\.{(?<min>\d+),(?<max>\d+)?}$/)?.groups || null
     },
     formatDate (date, format) {
-      const monthFormats = {
-        M: 'numeric',
-        MM: '2-digit',
-        MMM: 'short',
-        MMMM: 'long'
-      }
+      const monthFormats = { M: 'numeric', MM: '2-digit', MMM: 'short', MMMM: 'long' }
+      const dayFormats = { D: 'numeric', DD: '2-digit' }
+      const yearFormats = { YYYY: 'numeric', YYY: 'numeric', YY: '2-digit' }
+      const hourFormats = { H: 'numeric', HH: '2-digit', h: 'numeric', hh: '2-digit' }
+      const minuteFormats = { m: 'numeric', mm: '2-digit' }
+      const secondFormats = { s: 'numeric', ss: '2-digit' }
 
-      const dayFormats = {
-        D: 'numeric',
-        DD: '2-digit'
-      }
-
-      const yearFormats = {
-        YYYY: 'numeric',
-        YY: '2-digit'
-      }
-
-      const parts = new Intl.DateTimeFormat([], {
+      const opts = {
         day: dayFormats[format.match(/D+/)],
         month: monthFormats[format.match(/M+/)],
         year: yearFormats[format.match(/Y+/)]
-      }).formatToParts(date)
+      }
 
-      return format
-        .replace(/D+/, parts.find((p) => p.type === 'day').value)
-        .replace(/M+/, parts.find((p) => p.type === 'month').value)
-        .replace(/Y+/, parts.find((p) => p.type === 'year').value)
+      if (format.match(/H+/)) { opts.hour = hourFormats[format.match(/H+/)[0]]; opts.hour12 = false }
+      if (format.match(/h+/)) { opts.hour = hourFormats[format.match(/h+/)[0]]; opts.hour12 = true }
+      if (/[Aa]/.test(format) && opts.hour12 === undefined) opts.hour12 = true
+      if (format.match(/m+/)) opts.minute = minuteFormats[format.match(/m+/)[0]]
+      if (format.match(/s+/)) opts.second = secondFormats[format.match(/s+/)[0]]
+      if (/z/.test(format)) opts.timeZoneName = 'short'
+
+      const partTypes = {
+        M: 'month',
+        D: 'day',
+        Y: 'year',
+        H: 'hour',
+        h: 'hour',
+        m: 'minute',
+        s: 'second',
+        z: 'timeZoneName',
+        A: 'dayPeriod',
+        a: 'dayPeriod'
+      }
+
+      const parts = new Intl.DateTimeFormat([], opts).formatToParts(date)
+
+      return format.replace(/MMMM|MMM|MM|M|DD|D|YYYY|YYY|YY|HH|hh|H|h|mm|m|ss|s|A|a|z/g, (token) => {
+        const value = parts.find((p) => p.type === partTypes[token[0]])?.value
+
+        if (token === 'A') return (value || '').toUpperCase()
+        if (token === 'a') return (value || '').toLowerCase()
+
+        return value
+      })
     }
   }
 }

app/javascript/template_builder/field_submitter.vue

@@ -147,7 +147,7 @@
       >
         <a
           href="#"
-          class="flex px-2 group justify-between items-center"
+          class="flex px-2 text-sm group justify-between items-center"
           :class="{ 'active': submitter === selectedSubmitter, 'py-0.5': submitters.length > 8 }"
           @click.prevent="selectSubmitter(submitter)"
         >
@@ -198,7 +198,7 @@
       >
         <a
           href="#"
-          class="flex px-2"
+          class="flex px-2 text-sm"
           @click.prevent="addSubmitter"
         >
           <IconUserPlus

app/javascript/template_builder/fields.vue

@@ -65,13 +65,33 @@
       @set-draw="$emit('set-draw', $event)"
     />
   </div>
-  <div v-if="!isShowVariables && submitterDefaultFields.length && editable">
-    <hr class="mb-2">
+  <div
+    v-if="editable && withCustomFieldsTab"
+    class="tabs w-full mb-1.5 custom-fields-tabs"
+  >
+    <a
+      class="tab tab-bordered w-1/2 border-base-300 custom-fields-tab"
+      :class="{ 'tab-active': !showCustomTab }"
+      :style="{ '--tab-border': showCustomTab ? '0px' : '0.5px' }"
+      @click="setFieldsTab('default')"
+    >{{ t('default') }}</a>
+    <a
+      class="tab tab-bordered w-1/2 border-base-300 custom-fields-tab"
+      :class="{ 'tab-active': showCustomTab }"
+      :style="{ '--tab-border': showCustomTab ? '0.5px' : '0px' }"
+      @click="setFieldsTab('custom')"
+    >{{ t('custom') }}</a>
+  </div>
+  <div v-if="!isShowVariables && submitterDefaultFields.length && editable && (!withCustomFieldsTab || showCustomTab)">
+    <hr
+      v-if="!withCustomFieldsTab"
+      class="mb-1.5"
+    >
     <template v-if="isShowFieldSearch">
       <input
         v-model="defaultFieldsSearch"
         :placeholder="t('search_field')"
-        class="input input-ghost input-xs px-0 text-base mb-2 !outline-0 !rounded bg-transparent w-full"
+        class="input input-ghost input-xs px-0 text-base mb-1.5 !outline-0 !rounded bg-transparent w-full"
       >
       <hr class="mb-2">
     </template>
@@ -218,7 +238,7 @@
     </div>
   </div>
   <div
-    v-if="!isShowVariables && editable && !onlyDefinedFields && (!showCustomTab || (!customFields.length && !newCustomField))"
+    v-if="!isShowVariables && editable && !onlyDefinedFields && (!showCustomTab || (!customFields.length && !newCustomField)) && (!withCustomFieldsTab || !showCustomTab)"
     id="field-types-grid"
     class="grid grid-cols-3 gap-1 pb-2 fields-grid"
   >
@@ -363,7 +383,7 @@
     class="rounded py-2 px-4 w-full border border-dashed border-base-300"
   >
     <div class="text-center text-sm">
-      {{ t('start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document') }}
+      {{ t('start_a_quick_tour_to_learn_how_to_create_and_send_your_first_document') }}
     </div>
     <div class="flex justify-center">
       <label
@@ -418,6 +438,11 @@ export default {
       required: false,
       default: false
     },
+    withCustomFieldsTab: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     withFieldsSearch: {
       type: Boolean,
       required: false,
@@ -428,6 +453,11 @@ export default {
       required: false,
       default: false
     },
+    withDetectExistingFields: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     withSignatureId: {
       type: Boolean,
       required: false,
@@ -495,6 +525,11 @@ export default {
       type: Object,
       required: true
     },
+    detectCustomFieldsIndex: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
     showTourStartForm: {
       type: Boolean,
       required: false,
@@ -557,7 +592,8 @@ export default {
     },
     submitterDefaultFields () {
       return this.defaultFields.filter((f) => {
-        return !this.submitterFields.find((field) => field.name === f.name) && (!f.role || f.role === this.selectedSubmitter.name)
+        return (this.withCustomFieldsTab ? true : !this.submitterFields.find((field) => field.name === f.name)) &&
+          (!f.role || f.role === this.selectedSubmitter.name)
       })
     },
     filteredSubmitterDefaultFields () {
@@ -656,6 +692,78 @@ export default {
         this.customFields.splice(0, this.customFields.length, ...fields)
       })
     },
+    buildExistingFields () {
+      const existing = []
+      const seen = new Set()
+
+      const submittersByUuid = this.template.submitters.reduce((acc, s) => {
+        acc[s.uuid] = s
+
+        return acc
+      }, {})
+
+      const add = (field, role) => {
+        if (!field?.name) return
+
+        const key = field.name.toLowerCase() + ':' + (role || '').toLowerCase()
+
+        if (seen.has(key)) return
+
+        seen.add(key)
+
+        const item = { name: field.name, type: field.type || 'text' }
+
+        if (role) item.role = role
+
+        const optionValues = Array.isArray(field.options)
+          ? field.options.map((o) => (typeof o === 'string' ? o : o?.value)).filter(Boolean)
+          : []
+
+        if (optionValues.length) item.options = optionValues
+
+        existing.push(item)
+      }
+
+      this.template.fields.forEach((f) => add(f, submittersByUuid[f.submitter_uuid]?.name))
+      this.defaultRequiredFields.forEach((f) => add(f, f.role))
+      this.defaultFields.forEach((f) => add(f, f.role))
+      this.customFields.forEach((f) => add(f, f.role))
+
+      return existing
+    },
+    enrichDetectedField (field) {
+      if (!this.withDetectExistingFields || !field.name) return field
+
+      const role = this.template.submitters.find((s) => s.uuid === field.submitter_uuid)?.name
+      const nameKey = field.name.toLowerCase()
+      const indexKey = [field.name, role].filter(Boolean).join(':').toLowerCase()
+
+      const customField = this.detectCustomFieldsIndex[indexKey] || this.detectCustomFieldsIndex[nameKey]
+
+      if (customField) this.applyCustomFieldAttributes(field, customField)
+
+      return field
+    },
+    applyCustomFieldAttributes (field, customField) {
+      const skipKeys = new Set(['uuid', 'areas', 'submitter_uuid', 'conditions', 'prefillable', 'role'])
+
+      Object.entries(customField).forEach(([key, value]) => {
+        if (skipKeys.has(key)) return
+        if (value === null || value === undefined) return
+
+        if (key === 'options') {
+          if (Array.isArray(value) && !Array.isArray(field.options)) {
+            field.options = value.map((o) => (
+              typeof o === 'string' ? { value: o, uuid: v4() } : { ...o, uuid: v4() }
+            ))
+          }
+        } else if (value && typeof value === 'object' && !Array.isArray(value)) {
+          field[key] = JSON.parse(JSON.stringify(value))
+        } else {
+          field[key] = value
+        }
+      })
+    },
     detectFields () {
       const fields = []
 
@@ -665,7 +773,10 @@ export default {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json'
-        }
+        },
+        ...(this.withDetectExistingFields
+          ? { body: JSON.stringify({ fields: this.buildExistingFields() }) }
+          : {})
       }).then(async (response) => {
         const reader = response.body.getReader()
         const decoder = new TextDecoder('utf-8')
@@ -687,7 +798,7 @@ export default {
 
               if (data.error) {
                 if ((data.fields || fields).length) {
-                  this.template.fields = data.fields || fields
+                  this.template.fields = (data.fields || fields).map((f) => this.enrichDetectedField(f))
 
                   this.save()
                 } else {
@@ -705,7 +816,7 @@ export default {
                   this.$emit('select-submitter', this.template.submitters[0])
                 }
 
-                this.template.fields = data.fields || fields
+                this.template.fields = (data.fields || fields).map((f) => this.enrichDetectedField(f))
 
                 this.save()
 

app/javascript/template_builder/google_drive_picker_modal.vue

@@ -0,0 +1,165 @@
+<template>
+  <Teleport :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="$emit('close')"
+      />
+      <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
+        <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
+          <span class="modal-title">
+            Google Drive
+          </span>
+          <a
+            href="#"
+            class="text-xl modal-close-button"
+            @click.prevent="$emit('close')"
+          >&times;</a>
+        </div>
+        <div>
+          <form
+            v-if="showOauthButton"
+            method="post"
+            :action="oauthPath"
+            @submit="isConnectClicked = true"
+          >
+            <input
+              type="hidden"
+              name="authenticity_token"
+              :value="authenticityToken"
+              autocomplete="off"
+            >
+            <button
+              class="btn bg-white btn-outline w-full text-base font-medium mt-4"
+              data-turbo="false"
+              type="submit"
+              :disabled="isConnectClicked"
+            >
+              <span v-if="isConnectClicked">
+                <span class="flex items-center justify-center space-x-2">
+                  <IconInnerShadowTop class="animate-spin" />
+                  <span>{{ t('submitting') }}...</span>
+                </span>
+              </span>
+              <span v-else>
+                <span class="flex items-center justify-center space-x-2">
+                  <IconBrandGoogleDrive />
+                  <span>{{ t('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="loading">
+              <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>
+</template>
+
+<script>
+import { IconBrandGoogleDrive, IconInnerShadowTop } from '@tabler/icons-vue'
+
+export default {
+  name: 'GoogleDrivePickerModal',
+  components: {
+    IconBrandGoogleDrive,
+    IconInnerShadowTop
+  },
+  inject: ['t'],
+  props: {
+    templateId: {
+      type: [Number, String],
+      required: true
+    },
+    authenticityToken: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    reopenAfterAuth: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    modalContainerEl: {
+      type: [Object, String],
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ['close', 'picked', 'update:loading'],
+  data () {
+    return {
+      isConnectClicked: false,
+      showOauthButton: false
+    }
+  },
+  computed: {
+    oauthPath () {
+      const redir = this.reopenAfterAuth
+        ? `/templates/${this.templateId}/edit?google_drive_open=1`
+        : `/templates/${this.templateId}/edit`
+
+      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(' '),
+        oauth_data: new URLSearchParams({ redir }).toString()
+      }
+
+      return `/auth/google_oauth2?${new URLSearchParams(params).toString()}`
+    }
+  },
+  mounted () {
+    window.addEventListener('message', this.messageHandler)
+  },
+  beforeUnmount () {
+    window.removeEventListener('message', this.messageHandler)
+  },
+  methods: {
+    messageHandler (event) {
+      if (event.data.type === 'google-drive-files-picked') {
+        const files = event.data.files || []
+
+        if (!files.length) return
+
+        this.$emit('update:loading', true)
+        this.$emit('picked', files)
+      } else if (event.data.type === 'google-drive-picker-loaded') {
+        this.$emit('update:loading', false)
+      } else if (event.data.type === 'google-drive-picker-request-oauth') {
+        this.showOauthButton = true
+        this.$emit('update:loading', false)
+      }
+    }
+  }
+}
+</script>

app/javascript/template_builder/i18n.js

@@ -70,6 +70,7 @@ const en = {
   sign_yourself: 'Sign Yourself',
   set_signing_date: 'Set signing date',
   signing_date: 'Signing Date',
+  signing_date_and_time: 'Signing Date and Time',
   send: 'Send',
   remove: 'Remove',
   edit: 'Edit',
@@ -95,6 +96,23 @@ const en = {
   add_pdf_documents_or_images: 'Add PDF documents or images',
   add_documents_or_images: 'Add documents or images',
   add_a_new_document: 'Add a new document',
+  edit_documents: 'Edit documents',
+  move_forward: 'Move forward',
+  move_backward: 'Move backward',
+  remove_page: 'Remove page',
+  merge_with_previous: 'Merge with previous',
+  merge_with_next: 'Merge with next',
+  move_up: 'Move up',
+  move_down: 'Move down',
+  rotate: 'Rotate',
+  redact: 'Redact',
+  crop: 'Crop',
+  crop_and_scan: 'Crop & Scan',
+  flip_horizontal: 'Flip horizontal',
+  flip_vertical: 'Flip vertical',
+  there_is_no_text_to_redact_on_this_page: 'This page contains only images. Redact tool can be used only with text pages',
+  reset: 'Reset',
+  upload_to_document: 'Upload to "{document}"',
   replace_existing_document: 'Replace existing document',
   clone_and_replace_documents: 'Clone and replace documents',
   required: 'Required',
@@ -199,7 +217,7 @@ const en = {
   learn_more: 'Learn more',
   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 and send your first document',
+  start_a_quick_tour_to_learn_how_to_create_and_send_your_first_document: 'Start a quick tour to learn how to create and send your first document',
   start_tour: 'Start Tour',
   or_add_from: 'Or add from',
   sync: 'Sync',
@@ -214,7 +232,13 @@ const en = {
   align_bottom: 'Align Bottom',
   fields_selected: '{count} Fields Selected',
   field_added: '{count} Field Added',
-  fields_added: '{count} Fields Added'
+  fields_added: '{count} Fields Added',
+  revisions: 'Revisions',
+  apply: 'Apply',
+  no_revisions_yet: 'No revisions yet',
+  viewing_revision_from: 'Viewing revision from {date}',
+  connect_google_drive: 'Connect Google Drive',
+  submitting: 'Submitting'
 }
 
 const es = {
@@ -238,7 +262,7 @@ const es = {
   min: 'Mín',
   max: 'Máx',
   date_signed: 'Fecha actual',
-  fuente: 'Fuente',
+  font: 'Fuente',
   party: 'Parte',
   method: 'Método',
   reorder_fields: 'Reordenar campos',
@@ -271,6 +295,7 @@ const es = {
   with_logo: 'Con logotipo',
   description: 'Descripción',
   signing_date: 'Fecha de Firma',
+  signing_date_and_time: 'Fecha y Hora de Firma',
   display_title: 'Título de visualización',
   unchecked: 'No marcado',
   price: 'Precio',
@@ -296,7 +321,7 @@ const es = {
   set_signing_date: 'Establecer fecha de firma',
   are_you_sure_: '¿Estás seguro?',
   sign_yourself: 'Firma tú mismo',
-  checked: 'Seleccionado',
+  checked: 'Marcado',
   current_date: 'Fecha actual',
   send: 'Enviar',
   remove: 'Eliminar',
@@ -311,6 +336,23 @@ const es = {
   add_pdf_documents_or_images: 'Agregar documentos PDF o imágenes',
   add_documents_or_images: 'Agregar documentos o imágenes',
   add_a_new_document: 'Agregar un nuevo documento',
+  edit_documents: 'Editar documentos',
+  move_forward: 'Mover adelante',
+  move_backward: 'Mover atrás',
+  remove_page: 'Eliminar página',
+  merge_with_previous: 'Combinar con el anterior',
+  merge_with_next: 'Combinar con el siguiente',
+  move_up: 'Mover arriba',
+  move_down: 'Mover abajo',
+  rotate: 'Rotar',
+  redact: 'Censurar',
+  crop: 'Recortar',
+  crop_and_scan: 'Recortar y escanear',
+  flip_horizontal: 'Voltear horizontal',
+  flip_vertical: 'Voltear vertical',
+  there_is_no_text_to_redact_on_this_page: 'Esta página contiene solo imágenes. La herramienta de censura solo puede usarse con páginas de texto',
+  reset: 'Restablecer',
+  upload_to_document: 'Subir a "{document}"',
   replace_existing_document: 'Reemplazar documento existente',
   clone_and_replace_documents: 'Clonar y reemplazar documentos',
   required: 'Requerido',
@@ -334,16 +376,16 @@ const es = {
   eighth_party: 'Octava Parte',
   ninth_party: 'Novena Parte',
   tenth_party: 'Décima Parte',
-  eleventh_party: 'Undécimo Partido',
-  twelfth_party: 'Duodécimo Partido',
-  thirteenth_party: 'Decimotercer Partido',
-  fourteenth_party: 'Catorceavo Partido',
-  fifteenth_party: 'Quinceavo Partido',
-  sixteenth_party: 'Dieciséisavo Partido',
-  seventeenth_party: 'Diecisieteavo Partido',
-  eighteenth_party: 'Dieciochoavo Partido',
-  nineteenth_party: 'Decimonovena Fiesta',
-  twentieth_party: 'Vigésima Fiesta',
+  eleventh_party: 'Undécima Parte',
+  twelfth_party: 'Duodécima Parte',
+  thirteenth_party: 'Decimotercera Parte',
+  fourteenth_party: 'Decimocuarta Parte',
+  fifteenth_party: 'Decimoquinta Parte',
+  sixteenth_party: 'Decimosexta Parte',
+  seventeenth_party: 'Decimoséptima Parte',
+  eighteenth_party: 'Decimoctava Parte',
+  nineteenth_party: 'Decimonovena Parte',
+  twentieth_party: 'Vigésima Parte',
   draw: 'Dibujar',
   add: 'Agregar',
   text: 'Texto',
@@ -418,7 +460,7 @@ const es = {
   learn_more: 'Aprende más',
   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_a_quick_tour_to_learn_how_to_create_and_send_your_first_document: 'Inicia una guía rápida para aprender a crear y enviar tu primer documento.',
   start_tour: 'Iniciar guía',
   or_add_from: 'O agregar desde',
   sync: 'Sincronizar',
@@ -433,7 +475,13 @@ const es = {
   align_bottom: 'Alinear abajo',
   fields_selected: '{count} Campos Seleccionados',
   field_added: '{count} Campo Añadido',
-  fields_added: '{count} Campos Añadidos'
+  fields_added: '{count} Campos Añadidos',
+  revisions: 'Revisiones',
+  apply: 'Aplicar',
+  no_revisions_yet: 'Aún no hay revisiones',
+  viewing_revision_from: 'Viendo revisión del {date}',
+  connect_google_drive: 'Conectar Google Drive',
+  submitting: 'Enviando'
 }
 
 const it = {
@@ -456,15 +504,15 @@ const it = {
   length: 'Lunghezza',
   min: 'Min',
   max: 'Max',
-  date_signed: 'Data attuale',
+  date_signed: 'Data corrente',
   font: 'Carattere',
   party: 'Parte',
   method: 'Metodo',
   reorder_fields: 'Riordina i campi',
   verify_id: 'Verifica ID',
   obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more: 'Ottieni una firma elettronica qualificata (QeS) con il fornitore di fiducia. Clicca per saperne di più.',
-  ricorrente: 'Ricorrente',
-  una_volta: 'Una volta',
+  recurrent: 'Ricorrente',
+  one_off: 'Una tantum',
   editable: 'Modificabile',
   search_field: 'Campo di ricerca',
   field_not_found: 'Campo non trovato',
@@ -508,6 +556,7 @@ const it = {
   sign_yourself: 'Firma te stesso',
   set_signing_date: 'Imposta data di firma',
   signing_date: 'Data di firma',
+  signing_date_and_time: 'Data e ora di firma',
   send: 'Invia',
   remove: 'Rimuovi',
   edit: 'Modifica',
@@ -522,7 +571,7 @@ const it = {
   drawn: 'Disegnato',
   drawn_or_typed: 'Disegnato o Digitato',
   drawn_or_upload: 'Disegnato o Caricato',
-  upload: 'Caricare',
+  upload: 'Carica',
   formula: 'Formula',
   typed: 'Digitato',
   draw_field_on_the_document: 'Disegnare un campo sul documento',
@@ -533,6 +582,23 @@ const it = {
   add_pdf_documents_or_images: 'Aggiungi documenti PDF o immagini',
   add_documents_or_images: 'Aggiungi documenti o immagini',
   add_a_new_document: 'Aggiungi un nuovo documento',
+  edit_documents: 'Modifica documenti',
+  move_forward: 'Sposta avanti',
+  move_backward: 'Sposta indietro',
+  remove_page: 'Rimuovi pagina',
+  merge_with_previous: 'Unisci al precedente',
+  merge_with_next: 'Unisci al successivo',
+  move_up: 'Sposta su',
+  move_down: 'Sposta giù',
+  rotate: 'Ruota',
+  redact: 'Oscura',
+  crop: 'Ritaglia',
+  crop_and_scan: 'Ritaglia e scansiona',
+  flip_horizontal: 'Rifletti orizzontale',
+  flip_vertical: 'Rifletti verticale',
+  there_is_no_text_to_redact_on_this_page: 'Questa pagina contiene solo immagini. Lo strumento di oscuramento può essere usato solo con pagine di testo',
+  reset: 'Reimposta',
+  upload_to_document: 'Carica in "{document}"',
   replace_existing_document: 'Sostituisci documento esistente',
   clone_and_replace_documents: 'Clona e sostituisci documenti',
   required: 'Obbligatorio',
@@ -637,7 +703,7 @@ const it = {
   learn_more: 'Scopri di più',
   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_a_quick_tour_to_learn_how_to_create_and_send_your_first_document: 'Inizia un tour rapido per imparare a creare e inviare il tuo primo documento.',
   start_tour: 'Inizia il tour',
   or_add_from: 'O aggiungi da',
   sync: 'Sincronizza',
@@ -652,7 +718,13 @@ const it = {
   align_bottom: 'Allinea in basso',
   fields_selected: '{count} Campi Selezionati',
   field_added: '{count} Campo Aggiunto',
-  fields_added: '{count} Campi Aggiunti'
+  fields_added: '{count} Campi Aggiunti',
+  revisions: 'Revisioni',
+  apply: 'Applica',
+  no_revisions_yet: 'Nessuna revisione ancora',
+  viewing_revision_from: 'Visualizzazione revisione del {date}',
+  connect_google_drive: 'Connetti Google Drive',
+  submitting: 'Invio'
 }
 
 const pt = {
@@ -664,7 +736,7 @@ const pt = {
   analyzing_: 'Analisando...',
   download: 'Baixar',
   downloading_: 'Baixando...',
-  view: 'Visualizar',
+  view: 'Ver',
   payment_link: 'Link de pagamento',
   strikeout: 'Tachado',
   draw_strikethrough_the_document: 'Desenhe uma linha de tachado no documento',
@@ -676,13 +748,13 @@ const pt = {
   min: 'Mín',
   max: 'Máx',
   date_signed: 'Data atual',
-  fonte: 'Fonte',
+  font: 'Fonte',
   party: 'Parte',
   method: 'Método',
   reorder_fields: 'Reorganizar campos',
   verify_id: 'Verificar ID',
   obtain_qualified_electronic_signature_with_the_trusted_provider_click_to_learn_more: 'Obtenha a assinatura eletrônica qualificada (QeS) com o provedor confiável. Clique para saber mais.',
-  recurrent: 'Recurrente',
+  recurrent: 'Recorrente',
   one_off: 'Único',
   editable: 'Editável',
   search_field: 'Campo de busca',
@@ -710,6 +782,7 @@ const pt = {
   description: 'Descrição',
   display_title: 'Título de exibição',
   signing_date: 'Data da Assinatura',
+  signing_date_and_time: 'Data e Hora da Assinatura',
   unchecked: 'Não marcado',
   price: 'Preço',
   equal: 'Igual',
@@ -748,7 +821,24 @@ const pt = {
   processing_: 'Processando...',
   add_pdf_documents_or_images: 'Adicionar documentos PDF ou imagens',
   add_documents_or_images: 'Adicionar documentos ou imagens',
-  add_a_new_document: 'Ajouter un nouveau document',
+  add_a_new_document: 'Adicionar um novo documento',
+  edit_documents: 'Editar documentos',
+  move_forward: 'Mover para frente',
+  move_backward: 'Mover para trás',
+  remove_page: 'Remover página',
+  merge_with_previous: 'Mesclar com o anterior',
+  merge_with_next: 'Mesclar com o próximo',
+  move_up: 'Mover para cima',
+  move_down: 'Mover para baixo',
+  rotate: 'Girar',
+  redact: 'Censurar',
+  crop: 'Cortar',
+  crop_and_scan: 'Cortar e digitalizar',
+  flip_horizontal: 'Inverter horizontal',
+  flip_vertical: 'Inverter vertical',
+  there_is_no_text_to_redact_on_this_page: 'Esta página contém apenas imagens. A ferramenta de censura só pode ser usada com páginas de texto',
+  reset: 'Redefinir',
+  upload_to_document: 'Enviar para "{document}"',
   replace_existing_document: 'Substituir documento existente',
   clone_and_replace_documents: 'Clonar e substituir documentos',
   required: 'Obrigatório',
@@ -856,7 +946,7 @@ const pt = {
   learn_more: 'Saiba mais',
   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_a_quick_tour_to_learn_how_to_create_and_send_your_first_document: 'Comece um tour rápido para aprender a criar e enviar seu primeiro documento.',
   start_tour: 'Iniciar tour',
   or_add_from: 'Ou adicionar de',
   sync: 'Sincronizar',
@@ -871,7 +961,13 @@ const pt = {
   align_bottom: 'Alinhar à parte inferior',
   fields_selected: '{count} Campos Selecionados',
   field_added: '{count} Campo Adicionado',
-  fields_added: '{count} Campos Adicionados'
+  fields_added: '{count} Campos Adicionados',
+  revisions: 'Revisões',
+  apply: 'Aplicar',
+  no_revisions_yet: 'Nenhuma revisão ainda',
+  viewing_revision_from: 'Visualizando revisão de {date}',
+  connect_google_drive: 'Conectar Google Drive',
+  submitting: 'Enviando'
 }
 
 const fr = {
@@ -896,7 +992,7 @@ const fr = {
   max: 'Max',
   font: 'Police',
   party: 'Partie',
-  date_signed: 'Date de signature',
+  date_signed: 'Date du jour',
   method: 'Méthode',
   reorder_fields: 'Réorganiser les champs',
   verify_id: "Vérifier l'ID",
@@ -946,6 +1042,7 @@ const fr = {
   sign_yourself: 'Signer vous-même',
   set_signing_date: 'Définir la date de signature',
   signing_date: 'Date de signature',
+  signing_date_and_time: 'Date et heure de signature',
   send: 'Envoyer',
   remove: 'Supprimer',
   edit: 'Modifier',
@@ -971,6 +1068,23 @@ const fr = {
   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',
+  edit_documents: 'Modifier les documents',
+  move_forward: 'Déplacer en avant',
+  move_backward: 'Déplacer en arrière',
+  remove_page: 'Supprimer la page',
+  merge_with_previous: 'Fusionner avec le précédent',
+  merge_with_next: 'Fusionner avec le suivant',
+  move_up: 'Déplacer vers le haut',
+  move_down: 'Déplacer vers le bas',
+  rotate: 'Pivoter',
+  redact: 'Caviarder',
+  crop: 'Rogner',
+  crop_and_scan: 'Rogner et numériser',
+  flip_horizontal: 'Miroir horizontal',
+  flip_vertical: 'Miroir vertical',
+  there_is_no_text_to_redact_on_this_page: 'Cette page ne contient que des images. L\'outil de caviardage ne peut être utilisé qu\'avec des pages de texte',
+  reset: 'Réinitialiser',
+  upload_to_document: 'Téléverser dans "{document}"',
   replace_existing_document: 'Remplacer le document existant',
   clone_and_replace_documents: 'Cloner et remplacer des documents',
   required: 'Obligatoire',
@@ -1075,7 +1189,7 @@ const fr = {
   learn_more: 'En savoir plus',
   and: 'et',
   or: 'ou',
-  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_a_quick_tour_to_learn_how_to_create_and_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',
@@ -1090,7 +1204,13 @@ const fr = {
   align_bottom: 'Aligner en bas',
   fields_selected: '{count} Champs Sélectionnés',
   field_added: '{count} Champ Ajouté',
-  fields_added: '{count} Champs Ajoutés'
+  fields_added: '{count} Champs Ajoutés',
+  revisions: 'Révisions',
+  apply: 'Appliquer',
+  no_revisions_yet: 'Aucune révision pour le moment',
+  viewing_revision_from: 'Affichage de la révision du {date}',
+  connect_google_drive: 'Connecter Google Drive',
+  submitting: 'Soumission'
 }
 
 const de = {
@@ -1115,7 +1235,7 @@ const de = {
   max: 'Max.',
   font: 'Schriftart',
   party: 'Partei',
-  date_signed: 'Unterzeichnungsdatum',
+  date_signed: 'Aktuelles Datum',
   method: 'Methode',
   reorder_fields: 'Felder neu anordnen',
   verify_id: 'ID überprüfen',
@@ -1165,6 +1285,7 @@ const de = {
   sign_yourself: 'Selbst unterschreiben',
   set_signing_date: 'Unterzeichnungsdatum festlegen',
   signing_date: 'Unterzeichnungsdatum',
+  signing_date_and_time: 'Unterzeichnungsdatum und -uhrzeit',
   send: 'Senden',
   remove: 'Entfernen',
   edit: 'Bearbeiten',
@@ -1190,6 +1311,23 @@ const de = {
   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',
+  edit_documents: 'Dokumente bearbeiten',
+  move_forward: 'Nach vorne',
+  move_backward: 'Nach hinten',
+  remove_page: 'Seite entfernen',
+  merge_with_previous: 'Mit vorherigem zusammenführen',
+  merge_with_next: 'Mit nächstem zusammenführen',
+  move_up: 'Nach oben verschieben',
+  move_down: 'Nach unten verschieben',
+  rotate: 'Drehen',
+  redact: 'Schwärzen',
+  crop: 'Zuschneiden',
+  crop_and_scan: 'Zuschneiden & Scan',
+  flip_horizontal: 'Horizontal spiegeln',
+  flip_vertical: 'Vertikal spiegeln',
+  there_is_no_text_to_redact_on_this_page: 'Diese Seite enthält nur Bilder. Das Schwärzungswerkzeug kann nur mit Textseiten verwendet werden',
+  reset: 'Zurücksetzen',
+  upload_to_document: 'In "{document}" hochladen',
   replace_existing_document: 'Vorhandenes Dokument ersetzen',
   clone_and_replace_documents: 'Dokumente klonen und ersetzen',
   required: 'Erforderlich',
@@ -1294,7 +1432,7 @@ const de = {
   learn_more: 'Mehr erfahren',
   and: 'und',
   or: 'oder',
-  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_a_quick_tour_to_learn_how_to_create_and_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',
@@ -1309,7 +1447,13 @@ const de = {
   align_bottom: 'Unten ausrichten',
   fields_selected: '{count} Felder Ausgewählt',
   field_added: '{count} Feld Hinzugefügt',
-  fields_added: '{count} Felder Hinzugefügt'
+  fields_added: '{count} Felder Hinzugefügt',
+  revisions: 'Revisionen',
+  apply: 'Anwenden',
+  no_revisions_yet: 'Noch keine Revisionen',
+  viewing_revision_from: 'Ansicht der Revision vom {date}',
+  connect_google_drive: 'Google Drive verbinden',
+  submitting: 'Übermittlung'
 }
 
 const nl = {
@@ -1334,7 +1478,7 @@ const nl = {
   max: 'Max',
   font: 'Lettertype',
   party: 'Partij',
-  date_signed: 'Datum ondertekend',
+  date_signed: 'Huidige datum',
   method: 'Methode',
   reorder_fields: 'Velden herschikken',
   verify_id: 'ID verifiëren',
@@ -1384,6 +1528,7 @@ const nl = {
   sign_yourself: 'Zelf ondertekenen',
   set_signing_date: 'Ondertekeningsdatum instellen',
   signing_date: 'Ondertekeningsdatum',
+  signing_date_and_time: 'Ondertekeningsdatum en -tijd',
   send: 'Verzenden',
   remove: 'Verwijderen',
   edit: 'Bewerken',
@@ -1409,6 +1554,23 @@ const nl = {
   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',
+  edit_documents: 'Documenten bewerken',
+  move_forward: 'Naar voren',
+  move_backward: 'Naar achteren',
+  remove_page: 'Pagina verwijderen',
+  merge_with_previous: 'Samenvoegen met vorige',
+  merge_with_next: 'Samenvoegen met volgende',
+  move_up: 'Omhoog verplaatsen',
+  move_down: 'Omlaag verplaatsen',
+  rotate: 'Draaien',
+  redact: 'Redigeren',
+  crop: 'Bijsnijden',
+  crop_and_scan: 'Bijsnijden en scannen',
+  flip_horizontal: 'Horizontaal spiegelen',
+  flip_vertical: 'Verticaal spiegelen',
+  there_is_no_text_to_redact_on_this_page: 'Deze pagina bevat alleen afbeeldingen. De redactietool kan alleen worden gebruikt met tekstpagina\'s',
+  reset: 'Opnieuw instellen',
+  upload_to_document: 'Uploaden naar "{document}"',
   replace_existing_document: 'Bestaand document vervangen',
   clone_and_replace_documents: 'Documenten klonen en vervangen',
   required: 'Vereist',
@@ -1513,7 +1675,7 @@ const nl = {
   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_a_quick_tour_to_learn_how_to_create_and_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',
@@ -1528,7 +1690,13 @@ const nl = {
   align_bottom: 'Onder uitlijnen',
   fields_selected: '{count} Velden Geselecteerd',
   field_added: '{count} Veld Toegevoegd',
-  fields_added: '{count} Velden Toegevoegd'
+  fields_added: '{count} Velden Toegevoegd',
+  revisions: 'Revisies',
+  apply: 'Toepassen',
+  no_revisions_yet: 'Nog geen revisies',
+  viewing_revision_from: 'Revisie van {date} bekijken',
+  connect_google_drive: 'Verbind Google Drive',
+  submitting: 'Indienen'
 }
 
 export { en, es, it, pt, fr, de, nl }

app/javascript/template_builder/page.vue

@@ -11,7 +11,7 @@
       :src="image.url"
       :width="width"
       :height="height"
-      class="rounded"
+      class="w-full h-full rounded"
       @load="onImageLoad"
     >
     <div
@@ -37,6 +37,8 @@
         :ref="setAreaRefs"
         :area="item.area"
         :input-mode="inputMode"
+        :conditional-field-index="conditionalFieldIndex"
+        :formula-values-index="formulaValuesIndex"
         :page-width="width"
         :page-height="height"
         :field="item.field"
@@ -55,6 +57,7 @@
         @scroll-to="$emit('scroll-to', $event)"
         @add-custom-field="$emit('add-custom-field', $event)"
         @contextmenu="openAreaContextMenu($event, item.area, item.field)"
+        @click-title="closeContextMenu"
       />
       <FieldArea
         v-for="(area, index) in newAreas"
@@ -180,6 +183,16 @@ export default {
       required: false,
       default: false
     },
+    conditionalFieldIndex: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    formulaValuesIndex: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
     defaultFields: {
       type: Array,
       required: false,

app/javascript/template_builder/payment_settings.vue

@@ -143,8 +143,8 @@
         >
           <input
             type="hidden"
-            name="state"
-            :value="oauthState"
+            name="oauth_data"
+            :value="oauthData"
             autocomplete="off"
           >
           <input
@@ -334,7 +334,7 @@ export default {
     authenticityToken () {
       return document.querySelector('meta[name="csrf-token"]')?.content
     },
-    oauthState () {
+    oauthData () {
       const params = new URLSearchParams('')
 
       params.set('redir', document.location.href)

app/javascript/template_builder/preview.vue

@@ -36,7 +36,10 @@
               v-if="withReplaceButton"
               :template-id="template.id"
               :accept-file-types="acceptFileTypes"
-              class="opacity-0 group-hover:opacity-100"
+              :authenticity-token="authenticityToken"
+              :with-google-drive="withGoogleDrive"
+              :google-drive-file-id="item.google_drive_file_id"
+              class="opacity-0 group-hover:opacity-100 has-[label:focus]:opacity-100"
               @click.stop
               @success="$emit('replace', { replaceSchemaItem: item, ...$event })"
             />
@@ -69,6 +72,15 @@
                 style="min-width: 170px"
                 @click="closeDropdown"
               >
+                <li v-if="!item.dynamic">
+                  <button
+                    class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm whitespace-nowrap"
+                    @click.stop="$emit('edit', item); closeDropdown()"
+                  >
+                    <IconPencil class="w-4 h-4" />
+                    <span>{{ t('edit') }}</span>
+                  </button>
+                </li>
                 <li>
                   <button
                     class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between text-sm"
@@ -181,7 +193,7 @@
 <script>
 import Contenteditable from './contenteditable'
 import Upload from './upload'
-import { IconRouteAltLeft, IconSortDescending2, IconDotsVertical, IconTrashX, IconBolt, IconInnerShadowTop } from '@tabler/icons-vue'
+import { IconRouteAltLeft, IconSortDescending2, IconDotsVertical, IconTrashX, IconBolt, IconInnerShadowTop, IconPencil } from '@tabler/icons-vue'
 import ConditionsModal from './conditions_modal'
 import ReplaceButton from './replace'
 import GoogleDriveDocumentSettings from './google_drive_document_settings'
@@ -201,7 +213,8 @@ export default {
     IconSortDescending2,
     IconDotsVertical,
     IconTrashX,
-    IconBolt
+    IconBolt,
+    IconPencil
   },
   inject: ['t', 'getFieldTypeIndex', 'baseFetch'],
   props: {
@@ -232,6 +245,16 @@ export default {
       required: true,
       default: true
     },
+    withGoogleDrive: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    authenticityToken: {
+      type: String,
+      required: false,
+      default: ''
+    },
     dynamicDocuments: {
       type: Array,
       required: true
@@ -247,7 +270,7 @@ export default {
       default: true
     }
   },
-  emits: ['scroll-to', 'change', 'remove', 'up', 'down', 'replace', 'reorder'],
+  emits: ['scroll-to', 'change', 'remove', 'up', 'down', 'replace', 'reorder', 'edit'],
   data () {
     return {
       isShowConditionsModal: false,

app/javascript/template_builder/replace.vue

@@ -1,37 +1,106 @@
 <template>
-  <label
-    :for="inputId"
-    class="btn btn-neutral btn-xs text-white transition-none replace-document-button"
-    :class="{ 'opacity-100': isLoading }"
-  >
-    {{ message }}
+  <div class="inline-flex items-stretch replace-document-control">
+    <label
+      :for="inputId"
+      class="btn btn-neutral btn-xs transition-none replace-document-button"
+      :class="{ 'opacity-100': isLoading, 'pr-0': showGoogleDriveDropdown && !isLoading }"
+    >
+      <div class="flex items-center justify-between w-full h-full">
+        <span class="flex items-center space-x-2 w-full justify-center text-white">
+          {{ message }}
+        </span>
+        <span
+          v-if="showGoogleDriveDropdown && !isLoading"
+          class="dropdown dropdown-end inline h-full"
+          style="width: 30px"
+        >
+          <label
+            tabindex="0"
+            class="flex items-center h-full cursor-pointer text-white"
+          >
+            <IconChevronDown class="w-4 h-4 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.prevent="openGoogleDriveModal"
+              >
+                <IconBrandGoogleDrive class="w-4 h-4 flex-shrink-0" />
+                <span class="whitespace-nowrap text-sm normal-case font-medium">Google Drive</span>
+              </button>
+            </li>
+          </ul>
+        </span>
+      </div>
+    </label>
     <form
       ref="form"
       class="hidden"
     >
+      <input
+        v-if="googleDriveFile"
+        name="google_drive_file_ids[]"
+        :value="googleDriveFile.id"
+      >
       <input
         :id="inputId"
         ref="input"
         name="files[]"
         type="file"
         :accept="acceptFileTypes"
-        @change="upload"
+        @change="upload()"
       >
     </form>
-  </label>
+    <GoogleDrivePickerModal
+      v-if="showGoogleDriveModal"
+      v-model:loading="isLoadingGoogleDrive"
+      :template-id="templateId"
+      :authenticity-token="authenticityToken"
+      :modal-container-el="modalContainerEl"
+      @close="showGoogleDriveModal = false"
+      @picked="onGoogleDrivePicked"
+    />
+  </div>
 </template>
 
 <script>
 import Upload from './upload'
+import GoogleDrivePickerModal from './google_drive_picker_modal'
+import { IconChevronDown, IconBrandGoogleDrive } from '@tabler/icons-vue'
 
 export default {
   name: 'ReplaceDocument',
-  inject: ['baseFetch', 't'],
+  components: {
+    IconChevronDown,
+    IconBrandGoogleDrive,
+    GoogleDrivePickerModal
+  },
+  inject: ['baseFetch', 't', 'backgroundColor'],
   props: {
     templateId: {
       type: [Number, String],
       required: true
     },
+    authenticityToken: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    googleDriveFileId: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    withGoogleDrive: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     acceptFileTypes: {
       type: String,
       required: false,
@@ -41,16 +110,25 @@ export default {
   emits: ['success'],
   data () {
     return {
-      isLoading: false
+      isLoading: false,
+      isLoadingGoogleDrive: true,
+      googleDriveFile: null,
+      showGoogleDriveModal: false
     }
   },
   computed: {
     inputId () {
       return 'el' + Math.random().toString(32).split('.')[1]
     },
+    showGoogleDriveDropdown () {
+      return this.withGoogleDrive && !!this.googleDriveFileId
+    },
     uploadUrl () {
       return `/templates/${this.templateId}/documents`
     },
+    modalContainerEl () {
+      return this.$el.getRootNode().querySelector('#docuseal_modal_container')
+    },
     message () {
       if (this.isLoading) {
         return this.t('uploading_')
@@ -60,7 +138,27 @@ export default {
     }
   },
   methods: {
-    upload: Upload.methods.upload
+    upload: Upload.methods.upload,
+    openGoogleDriveModal () {
+      this.showGoogleDriveModal = true
+      this.isLoadingGoogleDrive = true
+      this.googleDriveFile = null
+      this.$el.getRootNode().activeElement?.blur()
+    },
+    onGoogleDrivePicked (files) {
+      this.googleDriveFile = files[0]
+
+      this.$nextTick(() => {
+        this.upload({ path: `/templates/${this.templateId}/google_drive_documents` }).then((resp) => {
+          if (resp.ok) {
+            this.showGoogleDriveModal = false
+          }
+        }).finally(() => {
+          this.isLoadingGoogleDrive = false
+          this.googleDriveFile = null
+        })
+      })
+    }
   }
 }
 </script>