adjust submission title link

This reverts commit f7132445a1.

.github/workflows/ci.yml

@@ -138,4 +138,5 @@ jobs:
         run: |
           bundle exec rake db:create
           bundle exec rake db:migrate
+          bundle exec rake assets:precompile
           bundle exec rspec

.rubocop.yml

@@ -67,8 +67,14 @@ RSpec/MultipleMemoizedHelpers:
 Rails/I18nLocaleTexts:
   Enabled: false
 
+Rails/FindEach:
+  Enabled: false
+
 Rails/SkipsModelValidations:
   Enabled: false
 
 Rails/ApplicationController:
   Enabled: false
+
+Capybara/ClickLinkOrButtonStyle:
+  Enabled: false

Dockerfile

@@ -31,7 +31,7 @@ ENV BUNDLE_WITHOUT="development:test"
 
 WORKDIR /app
 
-RUN apk add --no-cache build-base sqlite-dev libpq-dev mariadb-dev vips-dev vips-poppler vips-heif libc6-compat ttf-freefont ttf-liberation && cp /usr/share/fonts/liberation/LiberationSans-Regular.ttf /usr/share/fonts/liberation/LiberationSans-Bold.ttf / && apk del ttf-liberation
+RUN apk add --no-cache build-base sqlite-dev libpq-dev mariadb-dev vips-dev vips-poppler poppler-utils vips-heif libc6-compat ttf-freefont ttf-liberation && mkdir /fonts && cp /usr/share/fonts/liberation/LiberationSans-Regular.ttf /usr/share/fonts/liberation/LiberationSans-Bold.ttf /fonts && apk del ttf-liberation && wget -O /fonts/DancingScript.otf "https://github.com/impallari/DancingScript/raw/master/fonts/DancingScript-Regular.otf" && wget -O /fonts/DancingScript-License.txt https://github.com/impallari/DancingScript/blob/master/OFL.txt
 
 COPY ./Gemfile ./Gemfile.lock ./
 
@@ -49,6 +49,7 @@ COPY LICENSE README.md Rakefile config.ru ./
 
 COPY --from=webpack /app/public/packs ./public/packs
 
+RUN ln -s /fonts /app/public/fonts
 RUN bundle exec bootsnap precompile --gemfile app/ lib/
 
 WORKDIR /data/docuseal

Gemfile

@@ -7,9 +7,13 @@ ruby '3.2.2'
 gem 'aws-sdk-s3', require: false
 gem 'azure-storage-blob', require: false
 gem 'bootsnap', require: false
+gem 'cancancan'
 gem 'devise'
+gem 'devise-two-factor'
 gem 'dotenv', require: false
+gem 'email_typo'
 gem 'faraday'
+gem 'faraday-follow_redirects'
 gem 'google-cloud-storage', require: false
 gem 'hexapdf'
 gem 'image_processing'
@@ -28,6 +32,8 @@ gem 'rails'
 gem 'rails_autolink'
 gem 'rails-i18n'
 gem 'rollbar', require: ENV.key?('ROLLBAR_ACCESS_TOKEN')
+gem 'rotp'
+gem 'rqrcode'
 gem 'ruby-vips'
 gem 'rubyXL'
 gem 'shakapacker'

Gemfile.lock

@@ -98,7 +98,6 @@ GEM
       faraday_middleware (~> 1.0, >= 1.0.0.rc1)
       net-http-persistent (~> 4.0)
       nokogiri (~> 1, >= 1.10.8)
-    base64 (0.1.1)
     bcrypt (3.1.19)
     better_html (2.0.2)
       actionview (>= 6.0)
@@ -114,6 +113,7 @@ GEM
     bullet (7.0.7)
       activesupport (>= 3.0.0)
       uniform_notifier (~> 1.11)
+    cancancan (3.5.0)
     capybara (3.39.2)
       addressable
       matrix
@@ -123,6 +123,7 @@ GEM
       rack-test (>= 0.6.3)
       regexp_parser (>= 1.5, < 3.0)
       xpath (~> 3.2)
+    chunky_png (1.4.0)
     cmdparse (3.0.7)
     coderay (1.1.3)
     concurrent-ruby (1.2.2)
@@ -146,11 +147,17 @@ GEM
       railties (>= 4.1.0)
       responders
       warden (~> 1.2.3)
+    devise-two-factor (5.0.0)
+      activesupport (~> 7.0)
+      devise (~> 4.0)
+      railties (~> 7.0)
+      rotp (~> 6.0)
     diff-lcs (1.5.0)
     digest-crc (0.6.5)
       rake (>= 12.0.0, < 14.0.0)
     docile (1.4.0)
     dotenv (2.8.1)
+    email_typo (0.2.3)
     erb_lint (0.4.0)
       activesupport
       better_html (>= 2.0.1)
@@ -181,6 +188,8 @@ GEM
     faraday-em_http (1.0.0)
     faraday-em_synchrony (1.0.0)
     faraday-excon (1.1.0)
+    faraday-follow_redirects (0.3.0)
+      faraday (>= 1, < 3)
     faraday-httpclient (1.0.1)
     faraday-multipart (1.0.4)
       multipart-post (~> 2)
@@ -237,7 +246,7 @@ GEM
     hashdiff (1.0.1)
     hashery (2.1.2)
     hashie (5.0.0)
-    hexapdf (0.33.0)
+    hexapdf (0.34.1)
       cmdparse (~> 3.0, >= 3.0.3)
       geom2d (~> 0.4, >= 0.4.1)
       openssl (>= 2.2.1)
@@ -284,7 +293,7 @@ GEM
     mini_magick (4.12.0)
     mini_mime (1.1.5)
     mini_portile2 (2.8.4)
-    minitest (5.19.0)
+    minitest (5.20.0)
     msgpack (1.7.2)
     multi_json (1.15.0)
     multi_xml (0.6.0)
@@ -330,12 +339,12 @@ GEM
     omniauth-rails_csrf_protection (1.0.1)
       actionpack (>= 4.2)
       omniauth (~> 2.0)
-    openssl (3.1.0)
+    openssl (3.2.0)
     orm_adapter (0.5.0)
     os (1.1.4)
     pagy (6.0.4)
     parallel (1.23.0)
-    parser (3.2.2.3)
+    parser (3.2.2.4)
       ast (~> 2.4.1)
       racc
     pdf-reader (2.11.0)
@@ -408,7 +417,7 @@ GEM
     rake (13.0.6)
     redis-client (0.16.0)
       connection_pool
-    regexp_parser (2.8.1)
+    regexp_parser (2.8.2)
     reline (0.3.8)
       io-console (~> 0.5)
     representable (3.2.0)
@@ -423,6 +432,11 @@ GEM
     retriable (3.1.2)
     rexml (3.2.6)
     rollbar (3.4.0)
+    rotp (6.3.0)
+    rqrcode (2.2.0)
+      chunky_png (~> 1.0)
+      rqrcode_core (~> 1.0)
+    rqrcode_core (1.2.0)
     rspec-core (3.12.2)
       rspec-support (~> 3.12.0)
     rspec-expectations (3.12.3)
@@ -440,33 +454,32 @@ GEM
       rspec-mocks (~> 3.12)
       rspec-support (~> 3.12)
     rspec-support (3.12.1)
-    rubocop (1.56.1)
+    rubocop (1.57.2)
-      base64 (~> 0.1.1)
       json (~> 2.3)
       language_server-protocol (>= 3.17.0)
       parallel (~> 1.10)
-      parser (>= 3.2.2.3)
+      parser (>= 3.2.2.4)
       rainbow (>= 2.2.2, < 4.0)
       regexp_parser (>= 1.8, < 3.0)
       rexml (>= 3.2.5, < 4.0)
       rubocop-ast (>= 1.28.1, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 2.4.0, < 3.0)
-    rubocop-ast (1.29.0)
+    rubocop-ast (1.30.0)
       parser (>= 3.2.1.0)
-    rubocop-capybara (2.18.0)
+    rubocop-capybara (2.19.0)
       rubocop (~> 1.41)
-    rubocop-factory_bot (2.23.1)
+    rubocop-factory_bot (2.24.0)
       rubocop (~> 1.33)
-    rubocop-performance (1.19.0)
+    rubocop-performance (1.19.1)
       rubocop (>= 1.7.0, < 2.0)
       rubocop-ast (>= 0.4.0)
-    rubocop-rails (2.20.2)
+    rubocop-rails (2.22.1)
       activesupport (>= 4.2.0)
       rack (>= 1.1)
       rubocop (>= 1.33.0, < 2.0)
-    rubocop-rspec (2.23.2)
+    rubocop-rspec (2.25.0)
-      rubocop (~> 1.33)
+      rubocop (~> 1.40)
       rubocop-capybara (~> 2.17)
       rubocop-factory_bot (~> 2.22)
     ruby-progressbar (1.13.0)
@@ -522,7 +535,7 @@ GEM
     tzinfo-data (1.2023.3)
       tzinfo (>= 1.0.0)
     uber (0.1.0)
-    unicode-display_width (2.4.2)
+    unicode-display_width (2.5.0)
     uniform_notifier (1.16.0)
     version_gem (1.1.3)
     warden (1.2.9)
@@ -555,15 +568,19 @@ DEPENDENCIES
   better_html
   bootsnap
   bullet
+  cancancan
   capybara
   cuprite
   debug
   devise
+  devise-two-factor
   dotenv
+  email_typo
   erb_lint
   factory_bot_rails
   faker
   faraday
+  faraday-follow_redirects
   google-cloud-storage
   hexapdf
   image_processing
@@ -584,6 +601,8 @@ DEPENDENCIES
   rails-i18n
   rails_autolink
   rollbar
+  rotp
+  rqrcode
   rspec-rails
   rubocop
   rubocop-performance

README.md

@@ -34,10 +34,10 @@ DocuSeal is an open source platform that provides secure and efficient digital d
 
 ## Features
 - [x] PDF form fields builder (WYSIWYG)
-- [x] 10 field types available (Signature, Date, File, Checkbox etc.)
+- [x] 11 field types available (Signature, Date, File, Checkbox etc.)
 - [x] Multiple submitters per document
 - [x] Automated emails via SMTP
-- [x] Files storage on AWS S3, Google Storage, or Azure
+- [x] Files storage on disk or AWS S3, Google Storage, Azure Cloud
 - [x] Automatic PDF eSignature
 - [x] PDF signature verification
 - [x] Users management
@@ -52,6 +52,8 @@ DocuSeal is an open source platform that provides secure and efficient digital d
 | [<img alt="Deploy on Heroku" src="https://www.herokucdn.com/deploy/button.svg" height="40">](https://heroku.com/deploy?template=https://github.com/docusealco/docuseal-heroku) | [<img alt="Deploy on Railway" src="https://railway.app/button.svg" height="40">](https://railway.app/template/IGoDnc?referralCode=ruU7JR)|
 |**DigitalOcean**|**Render**|
 | [<img alt="Deploy on DigitalOcean" src="https://www.deploytodo.com/do-btn-blue.svg" height="40">](https://cloud.digitalocean.com/apps/new?repo=https://github.com/docusealco/docuseal-digitalocean/tree/master&refcode=421d50f53990) | [<img alt="Deploy to Render" src="https://render.com/images/deploy-to-render-button.svg" height="40">](https://render.com/deploy?repo=https://github.com/docusealco/docuseal-render)
+|**Koyeb**|**Elestio**|
+| [<img alt="Deploy on Koyeb" src="https://www.koyeb.com/static/images/deploy/button.svg" height="40">](https://app.koyeb.com/deploy?name=docuseal&type=docker&image=docker.io/docuseal/docuseal&env[PORT]=8000&env[DATABASE_URL]=CHANGE_ME&env[SECRET_KEY_BASE]=CHANGE_ME&ports=8000;http;/) | [<img alt="Deploy on Elestio" src="https://pub-da36157c854648669813f3f76c526c2b.r2.dev/deploy-on-elestio-black.png">](https://dash.elest.io/deploy?soft=DocuSeal&id=339) |
 
 
 #### Docker
@@ -74,14 +76,14 @@ Run the app under a custom domain over https using docker compose (make sure you
 HOST=your-domain-name.com docker-compose up
 ```
 
-## For Companies
+## For Businesses
 ### Integrate seamless document signing into your web or mobile apps with DocuSeal!
 
 At DocuSeal we have expertise and technologies to make documents creation, filling, signing and processing seamlessly integrated with your product. We specialize in working with various industries, including **Banking, Healthcare, Transport, Real Estate, eCommerce, KYC, CRM, and other software products** that require bulk document signing. By leveraging DocuSeal, we can assist in reducing the overall cost of developing and processing electronic documents while ensuring security and compliance with local electronic document laws.
 
-[![Book an Integration Demo](https://cal.com/book-with-cal-dark.svg)](https://cal.com/docuseal)
+[Book a Meeting](https://calendly.com/kriti-docuseal/30min)
 
 ## License
 
 Distributed under the AGPLv3 License. See [LICENSE](https://github.com/docusealco/docuseal/blob/master/LICENSE) for more information.
-Unless otherwise noted, all files © 2023 Oleksandr Turchyn.
+Unless otherwise noted, all files © 2023 DocuSeal LLC.

app/controllers/accounts_controller.rb

@@ -4,11 +4,15 @@ class AccountsController < ApplicationController
   LOCALE_OPTIONS = {
     'en-US' => 'English (United States)',
     'en-GB' => 'English (United Kingdom)',
+    'fr-FR' => 'French (France)',
     'es-ES' => 'Spanish (Spain)',
     'pt-PT' => 'Portuguese (Portugal)',
     'de-DE' => 'German (Germany)'
   }.freeze
 
+  before_action :load_account
+  authorize_resource :account
+
   def show; end
 
   def update
@@ -35,6 +39,10 @@ class AccountsController < ApplicationController
 
   private
 
+  def load_account
+    @account = current_account
+  end
+
   def account_params
     params.require(:account).permit(:name, :timezone, :locale)
   end

app/controllers/api/api_base_controller.rb

@@ -3,11 +3,36 @@
 module Api
   class ApiBaseController < ActionController::API
     include ActiveStorage::SetCurrent
+    include Pagy::Backend
+
+    DEFAULT_LIMIT = 10
+    MAX_LIMIT = 100
+
+    wrap_parameters false
 
     before_action :authenticate_user!
+    check_authorization
+
+    if Rails.env.production?
+      rescue_from CanCan::AccessDenied do |e|
+        Rollbar.error(e) if defined?(Rollbar)
+
+        render json: { error: e.message }, status: :forbidden
+      end
+    end
 
     private
 
+    def paginate(relation)
+      result = relation.order(id: :desc)
+                       .limit([params.fetch(:limit, DEFAULT_LIMIT).to_i, MAX_LIMIT].min)
+
+      result = result.where('id < ?', params[:after]) if params[:after].present?
+      result = result.where('id > ?', params[:before]) if params[:before].present?
+
+      result
+    end
+
     def current_account
       current_user&.account
     end

app/controllers/api/attachments_controller.rb

@@ -3,6 +3,7 @@
 module Api
   class AttachmentsController < ApiBaseController
     skip_before_action :authenticate_user!
+    skip_authorization_check
 
     def create
       submitter = Submitter.find_by!(slug: params[:submitter_slug])

app/controllers/api/submissions_controller.rb

@@ -2,74 +2,174 @@
 
 module Api
   class SubmissionsController < ApiBaseController
-    UnknownFieldName = Class.new(StandardError)
+    load_and_authorize_resource :template, only: :create
-    UnknownSubmitterName = Class.new(StandardError)
+    load_and_authorize_resource :submission, only: %i[show index destroy]
 
-    def create
+    before_action only: :create do
-      template = current_account.templates.find(params[:template_id])
+      authorize!(:create, Submission)
+    end
 
-      submissions =
+    def index
-        if (emails = (params[:emails] || params[:email]).presence)
+      submissions = Submissions.search(@submissions, params[:q])
-          Submissions.create_from_emails(template:,
+      submissions = submissions.where(template_id: params[:template_id]) if params[:template_id].present?
-                                         user: current_user,
-                                         source: :api,
-                                         mark_as_sent: params[:send_email] != 'false',
-                                         emails:)
-        else
-          submissions_attrs = normalize_submissions_params!(submissions_params[:submission], template)
 
-          Submissions.create_from_submitters(
+      submissions = paginate(submissions.preload(:created_by_user, :template, :submitters,
-            template:,
+                                                 audit_trail_attachment: :blob))
-            user: current_user,
+
-            source: :api,
+      render json: {
-            mark_as_sent: params[:send_email] != 'false',
+        data: submissions.as_json(serialize_params),
-            submitters_order: params[:submitters_order] || 'preserved',
+        pagination: {
-            submissions_attrs:
+          count: submissions.size,
-          )
+          next: submissions.last&.id,
+          prev: submissions.first&.id
+        }
+      }
+    end
+
+    def show
+      serialized_subbmitters =
+        @submission.submitters.preload(documents_attachments: :blob, attachments_attachments: :blob).map do |submitter|
+          Submissions::EnsureResultGenerated.call(submitter) if submitter.completed_at?
+
+          Submitters::SerializeForApi.call(submitter)
         end
 
-      Submissions.send_signature_requests(submissions, send_email: params[:send_email] != 'false')
+      json = @submission.as_json(
+        serialize_params.deep_merge(
+          include: {
+            submission_events: {
+              only: %i[id submitter_id event_type event_timestamp]
+            }
+          }
+        )
+      )
+
+      json[:submitters] = serialized_subbmitters
+
+      render json:
+    end
+
+    def create
+      params[:send_email] = true unless params.key?(:send_email)
+      params[:send_sms] = false unless params.key?(:send_sms)
+
+      submissions = create_submissions(@template, params)
+
+      Submissions.send_signature_requests(submissions)
 
       render json: submissions.flat_map(&:submitters)
-    rescue UnknownFieldName, UnknownSubmitterName => e
+    rescue Submitters::NormalizeValues::UnknownFieldName, Submitters::NormalizeValues::UnknownSubmitterName => e
       render json: { error: e.message }, status: :unprocessable_entity
     end
 
+    def destroy
+      @submission.update!(deleted_at: Time.current)
+
+      render json: @submission.as_json(only: %i[id deleted_at])
+    end
+
     private
 
+    def create_submissions(template, params)
+      is_send_email = !params[:send_email].in?(['false', false])
+
+      if (emails = (params[:emails] || params[:email]).presence) && params[:submission].blank?
+        Submissions.create_from_emails(template:,
+                                       user: current_user,
+                                       source: :api,
+                                       mark_as_sent: is_send_email,
+                                       emails:,
+                                       params:)
+      else
+        submissions_attrs, attachments = normalize_submissions_params!(submissions_params, template)
+
+        submissions = Submissions.create_from_submitters(
+          template:,
+          user: current_user,
+          source: :api,
+          mark_as_sent: is_send_email,
+          submitters_order: params[:submitters_order] || params[:order] || 'preserved',
+          submissions_attrs:,
+          params:
+        )
+
+        save_default_value_attachments!(attachments, submissions.flat_map(&:submitters))
+
+        submissions
+      end
+    end
+
+    def serialize_params
+      {
+        only: %i[id source submitters_order created_at updated_at],
+        methods: %i[audit_log_url],
+        include: {
+          submitters: { only: %i[id slug uuid name email phone
+                                 completed_at opened_at sent_at
+                                 created_at updated_at],
+                        methods: %i[status] },
+          template: { only: %i[id name created_at updated_at] },
+          created_by_user: { only: %i[id email first_name last_name] }
+        }
+      }
+    end
+
     def submissions_params
-      params.permit(submission: [{ submitters: [[:uuid, :name, :email, :role, :phone, { values: {} }]] }])
+      key = params.key?(:submission) ? :submission : :submissions
+
+      params.permit(
+        key => [
+          [:send_email, :send_sms, {
+            message: %i[subject body],
+            submitters: [[:send_email, :send_sms, :uuid, :name, :email, :role,
+                          :completed, :phone, :application_key,
+                          { values: {}, readonly_fields: [], message: %i[subject body],
+                            fields: [%i[name default_value readonly validation_pattern invalid_message]] }]]
+          }]
+        ]
+      ).fetch(key, [])
     end
 
     def normalize_submissions_params!(submissions_params, template)
-      submissions_params.each do |submission|
+      attachments = []
-        submission[:submitters].each_with_index do |submitter, index|
-          next if submitter[:values].blank?
 
-          submitter[:values] =
+      Array.wrap(submissions_params).each do |submission|
-            normalize_submitter_values(template,
+        submission[:submitters].each_with_index do |submitter, index|
-                                       submitter[:values],
+          default_values = submitter[:values] || {}
-                                       submitter[:role] || template.submitters[index]['name'])
+
+          submitter[:fields]&.each { |f| default_values[f[:name]] = f[:default_value] if f[:default_value].present? }
+
+          next if default_values.blank?
+
+          values, new_attachments =
+            Submitters::NormalizeValues.call(template,
+                                             default_values,
+                                             submitter[:role] || template.submitters[index]['name'])
+
+          attachments.push(*new_attachments)
+
+          submitter[:values] = values
         end
       end
 
-      submissions_params
+      [submissions_params, attachments]
     end
 
-    def normalize_submitter_values(template, values, submitter_name)
+    def save_default_value_attachments!(attachments, submitters)
-      submitter =
+      return if attachments.blank?
-        template.submitters.find { |e| e['name'] == submitter_name } ||
-        raise(UnknownSubmitterName, "Unknown submitter: #{submitter_name}")
 
-      fields = template.fields.select { |e| e['submitter_uuid'] == submitter['uuid'] }
+      attachments_index = attachments.index_by(&:uuid)
 
-      fields_uuid_index = fields.index_by { |e| e['uuid'] }
+      submitters.each do |submitter|
-      fields_name_index = fields.index_by { |e| e['name'] }
+        submitter.values.to_a.each do |_, value|
+          attachment = attachments_index[value]
 
-      values.transform_keys do |key|
+          next unless attachment
-        next key if fields_uuid_index[key].present?
 
-        fields_name_index[key]&.dig('uuid') || raise(UnknownFieldName, "Unknown field: #{key}")
+          attachment.record = submitter
+
+          attachment.save!
+        end
       end
     end
   end

app/controllers/api/submitter_email_clicks_controller.rb

@@ -3,6 +3,7 @@
 module Api
   class SubmitterEmailClicksController < ApiBaseController
     skip_before_action :authenticate_user!
+    skip_authorization_check
 
     def create
       submitter = Submitter.find_by!(slug: params[:submitter_slug])

app/controllers/api/submitter_form_views_controller.rb

@@ -3,12 +3,15 @@
 module Api
   class SubmitterFormViewsController < ApiBaseController
     skip_before_action :authenticate_user!
+    skip_authorization_check
 
     def create
       submitter = Submitter.find_by!(slug: params[:submitter_slug])
 
       SubmissionEvents.create_with_tracking_data(submitter, 'view_form', request)
 
+      SendFormViewedWebhookRequestJob.perform_later(submitter)
+
       render json: {}
     end
   end

app/controllers/api/submitters_autocomplete_controller.rb

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

app/controllers/api/submitters_controller.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Api
+  class SubmittersController < ApiBaseController
+    load_and_authorize_resource :submitter
+
+    def index
+      submitters = Submitters.search(@submitters, params[:q])
+
+      submitters = submitters.where(application_key: params[:application_key]) if params[:application_key].present?
+      submitters = submitters.where(submission_id: params[:submission_id]) if params[:submission_id].present?
+
+      submitters = paginate(
+        submitters.preload(:template, :submission, :submission_events,
+                           documents_attachments: :blob, attachments_attachments: :blob)
+      )
+
+      render json: {
+        data: submitters.map { |s| Submitters::SerializeForApi.call(s, with_template: true, with_events: true) },
+        pagination: {
+          count: submitters.size,
+          next: submitters.last&.id,
+          prev: submitters.first&.id
+        }
+      }
+    end
+
+    def show
+      Submissions::EnsureResultGenerated.call(@submitter) if @submitter.completed_at?
+
+      render json: Submitters::SerializeForApi.call(@submitter, with_template: true, with_events: true)
+    end
+  end
+end

app/controllers/api/template_folders_autocomplete_controller.rb

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

app/controllers/api/templates_controller.rb

@@ -2,35 +2,63 @@
 
 module Api
   class TemplatesController < ApiBaseController
-    before_action :load_template, only: %i[show update]
+    load_and_authorize_resource :template
 
     def index
-      render json: current_account.templates
+      templates = Templates.search(@templates, params[:q])
+
+      templates = params[:archived] ? templates.archived : templates.active
+      templates = templates.where(application_key: params[:application_key]) if params[:application_key].present?
+
+      templates = paginate(templates.preload(:author, documents_attachments: :blob))
+
+      render json: {
+        data: templates.as_json(serialize_params),
+        pagination: {
+          count: templates.size,
+          next: templates.last&.id,
+          prev: templates.first&.id
+        }
+      }
     end
 
     def show
-      render json: @template.as_json(include: { author: { only: %i[id email first_name last_name] },
+      render json: @template.as_json(serialize_params)
-                                                documents: { only: %i[id uuid], methods: %i[url filename] } })
     end
 
     def update
+      if (folder_name = params.dig(:template, :folder_name))
+        @template.folder = TemplateFolders.find_or_create_by_name(current_user, folder_name)
+      end
+
       @template.update!(template_params)
 
-      render :ok
+      render json: @template.as_json(only: %i[id updated_at])
+    end
+
+    def destroy
+      @template.update!(deleted_at: Time.current)
+
+      render json: @template.as_json(only: %i[id deleted_at])
     end
 
     private
 
-    def template_params
+    def serialize_params
-      params.require(:template).permit(:name,
+      {
-                                       schema: [%i[attachment_uuid name]],
+        include: { author: { only: %i[id email first_name last_name] },
-                                       submitters: [%i[name uuid]],
+                   documents: { only: %i[id uuid], methods: %i[url filename] } }
-                                       fields: [[:uuid, :submitter_uuid, :name, :type, :required,
+      }
-                                                 { options: [], areas: [%i[x y w h cell_w attachment_uuid page]] }]])
     end
 
-    def load_template
+    def template_params
-      @template = current_account.templates.find(params[:id])
+      params.require(:template).permit(
+        :name,
+        schema: [%i[attachment_uuid name]],
+        submitters: [%i[name uuid]],
+        fields: [[:uuid, :submitter_uuid, :name, :type, :required, :readonly, :default_value,
+                  { options: [%i[value uuid]], areas: [%i[x y w h cell_w attachment_uuid option_uuid page]] }]]
+      )
     end
   end
 end

app/controllers/api/templates_documents_controller.rb

@@ -2,11 +2,11 @@
 
 module Api
   class TemplatesDocumentsController < ApiBaseController
+    load_and_authorize_resource :template
+
     def create
       return head :unprocessable_entity if params[:blobs].blank? && params[:files].blank?
 
-      @template = current_account.templates.find(params[:template_id])
-
       documents = Templates::CreateAttachments.call(@template, params)
 
       schema = documents.map do |doc|
@@ -16,6 +16,7 @@ module Api
       render json: {
         schema:,
         documents: documents.as_json(
+          methods: [:metadata],
           include: {
             preview_images: { methods: %i[url metadata filename] }
           }

app/controllers/api_settings_controller.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
 class ApiSettingsController < ApplicationController
-  def index; end
+  def index
+    authorize!(:read, current_user.access_token)
+  end
 end

app/controllers/application_controller.rb

@@ -4,6 +4,8 @@ class ApplicationController < ActionController::Base
   include ActiveStorage::SetCurrent
   include Pagy::Backend
 
+  check_authorization unless: :devise_controller?
+
   before_action :sign_in_for_demo, if: -> { Docuseal.demo? }
   before_action :maybe_redirect_to_setup, unless: :signed_in?
   before_action :authenticate_user!, unless: :devise_controller?
@@ -16,6 +18,14 @@ class ApplicationController < ActionController::Base
     redirect_to request.path
   end
 
+  if Rails.env.production?
+    rescue_from CanCan::AccessDenied do |e|
+      Rollbar.error(e) if defined?(Rollbar)
+
+      redirect_back(fallback_location: root_path, alert: e.message)
+    end
+  end
+
   def default_url_options
     Docuseal.default_url_options
   end
@@ -23,7 +33,7 @@ class ApplicationController < ActionController::Base
   private
 
   def sign_in_for_demo
-    sign_in(User.order('random()').take) unless signed_in?
+    sign_in(User.active.order('random()').take) unless signed_in?
   end
 
   def current_account

app/controllers/console_redirect_controller.rb

@@ -2,6 +2,7 @@
 
 class ConsoleRedirectController < ApplicationController
   skip_before_action :authenticate_user!
+  skip_authorization_check
 
   def index
     return redirect_to(new_user_session_path({ redir: params[:redir] }.compact)) if current_user.blank?

app/controllers/dashboard_controller.rb

@@ -3,12 +3,68 @@
 class DashboardController < ApplicationController
   skip_before_action :authenticate_user!, only: %i[index]
 
+  before_action :maybe_redirect_product_url
+  before_action :maybe_render_landing
+
+  load_and_authorize_resource :template_folder, parent: false
+  load_and_authorize_resource :template, parent: false
+
+  SHOW_TEMPLATES_FOLDERS_THRESHOLD = 9
+  TEMPLATES_PER_PAGE = 12
+  FOLDERS_PER_PAGE = 18
+
   def index
-    return redirect_to Docuseal::PRODUCT_URL, allow_other_host: true if Docuseal.multitenant? && !signed_in?
+    @template_folders = filter_template_folders(@template_folders)
-    return render 'pages/landing' unless signed_in?
 
-    templates = current_account.templates.active.preload(:author).order(id: :desc)
+    @pagy, @template_folders = pagy(
+      @template_folders,
+      items: FOLDERS_PER_PAGE,
+      page: @template_folders.count > SHOW_TEMPLATES_FOLDERS_THRESHOLD ? params[:page] : 1
+    )
 
-    @pagy, @templates = pagy(templates, items: 12)
+    if @pagy.count > SHOW_TEMPLATES_FOLDERS_THRESHOLD
+      @templates = @templates.none
+    else
+      @template_folders = @template_folders.reject { |e| e.name == TemplateFolder::DEFAULT_NAME }
+      @templates = filter_templates(@templates)
+
+      items =
+        if @template_folders.size < 4
+          TEMPLATES_PER_PAGE
+        else
+          (@template_folders.size < 7 ? 9 : 6)
+        end
+
+      @pagy, @templates = pagy(@templates, items:)
+    end
+  end
+
+  private
+
+  def filter_template_folders(template_folders)
+    rel = template_folders.joins(:active_templates)
+                          .order(id: :desc)
+                          .distinct
+
+    TemplateFolders.search(rel, params[:q])
+  end
+
+  def filter_templates(templates)
+    rel = templates.active.preload(:author).order(id: :desc)
+    rel = rel.where(folder_id: current_account.default_template_folder.id) if params[:q].blank?
+
+    Templates.search(rel, params[:q])
+  end
+
+  def maybe_redirect_product_url
+    return if !Docuseal.multitenant? || signed_in?
+
+    redirect_to Docuseal::PRODUCT_URL, allow_other_host: true
+  end
+
+  def maybe_render_landing
+    return if signed_in?
+
+    render 'pages/landing'
   end
 end

app/controllers/email_smtp_settings_controller.rb

@@ -1,7 +1,9 @@
 # frozen_string_literal: true
 
-class EmailSettingsController < ApplicationController
+class EmailSmtpSettingsController < ApplicationController
   before_action :load_encrypted_config
+  authorize_resource :encrypted_config, only: :index
+  authorize_resource :encrypted_config, parent: false, only: :create
 
   def index; end
 

app/controllers/enquiries_controller.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class EnquiriesController < ApplicationController
+  skip_before_action :authenticate_user!
+  skip_authorization_check
+
+  def create
+    if params[:talk_to_sales] == 'on'
+      Faraday.post(Docuseal::ENQUIRIES_URL,
+                   enquiry_params.merge(type: :talk_to_sales).to_json,
+                   'Content-Type' => 'application/json')
+    end
+
+    head :ok
+  end
+
+  private
+
+  def enquiry_params
+    params.require(:user).permit(:email)
+  end
+end

app/controllers/errors_controller.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+class ErrorsController < ActionController::Base
+  ENTERPRISE_FEATURE_MESSAGE =
+    'This feature is available in Enterprise Edition: https://www.docuseal.co/pricing'
+
+  ENTERPRISE_PATHS = [
+    '/templates/html',
+    '/api/templates/html',
+    '/templates/pdf',
+    '/api/templates/pdf'
+  ].freeze
+
+  def show
+    if request.original_fullpath.in?(ENTERPRISE_PATHS)
+      return render json: { status: 404, message: ENTERPRISE_FEATURE_MESSAGE }, status: :not_found
+    end
+
+    respond_to do |f|
+      f.json do
+        render json: { status: error_status_code }, status: error_status_code
+      end
+
+      f.html { render error_status_code.to_s, status: error_status_code }
+    end
+  end
+
+  private
+
+  def error_status_code
+    @error_status_code ||=
+      ActionDispatch::ExceptionWrapper.new(request.env,
+                                           request.env['action_dispatch.exception']).status_code
+  end
+end

app/controllers/esign_settings_controller.rb

@@ -11,9 +11,12 @@ class EsignSettingsController < ApplicationController
     end
   end
 
+  before_action :load_encrypted_config
+  authorize_resource :encrypted_config, parent: false, only: %i[new create]
+  authorize_resource :encrypted_config, only: %i[update destroy show]
+
   def show
-    cert_data = EncryptedConfig.find_by(account: current_account,
+    cert_data = @encrypted_config.value || {}
-                                        key: EncryptedConfig::ESIGN_CERTS_KEY)&.value || {}
 
     default_pkcs = GenerateCertificate.load_pkcs(cert_data) if cert_data['cert'].present?
 
@@ -42,10 +45,7 @@ class EsignSettingsController < ApplicationController
   def create
     @cert_record = CertFormRecord.new(**cert_params)
 
-    cert_configs = EncryptedConfig.find_or_initialize_by(account: current_account,
+    if (@encrypted_config.value && @encrypted_config.value['custom']&.any? { |e| e['name'] == @cert_record.name }) ||
-                                                         key: EncryptedConfig::ESIGN_CERTS_KEY)
-
-    if (cert_configs.value && cert_configs.value['custom']&.any? { |e| e['name'] == @cert_record.name }) ||
        @cert_record.name == DEFAULT_CERT_NAME
 
       @cert_record.errors.add(:name, 'already exists')
@@ -54,7 +54,7 @@ class EsignSettingsController < ApplicationController
                     status: :unprocessable_entity
     end
 
-    save_new_cert!(cert_configs, @cert_record)
+    save_new_cert!(@encrypted_config, @cert_record)
 
     redirect_to settings_esign_path, notice: 'Certificate has been successfully added!'
   rescue OpenSSL::PKCS12::PKCS12Error
@@ -64,29 +64,31 @@ class EsignSettingsController < ApplicationController
   end
 
   def update
-    cert_configs = EncryptedConfig.find_by(account: current_account, key: EncryptedConfig::ESIGN_CERTS_KEY)
+    @encrypted_config.value['custom'].each { |e| e['status'] = 'validate' }
 
-    cert_configs.value['custom'].each { |e| e['status'] = 'validate' }
+    custom_cert_data = @encrypted_config.value['custom'].find { |e| e['name'] == params[:name] }
-    custom_cert_data = cert_configs.value['custom'].find { |e| e['name'] == params[:name] }
     custom_cert_data['status'] = 'default' if custom_cert_data
 
-    cert_configs.save!
+    @encrypted_config.save!
 
     redirect_to settings_esign_path, notice: 'Default certificate has been selected'
   end
 
   def destroy
-    cert_configs = EncryptedConfig.find_by(account: current_account, key: EncryptedConfig::ESIGN_CERTS_KEY)
+    @encrypted_config.value['custom'].reject! { |e| e['name'] == params[:name] }
 
-    cert_configs.value['custom'].reject! { |e| e['name'] == params[:name] }
+    @encrypted_config.save!
-
-    cert_configs.save!
 
     redirect_to settings_esign_path, notice: 'Certificate has been removed'
   end
 
   private
 
+  def load_encrypted_config
+    @encrypted_config = EncryptedConfig.find_or_initialize_by(account: current_account,
+                                                              key: EncryptedConfig::ESIGN_CERTS_KEY)
+  end
+
   def save_new_cert!(cert_configs, cert_record)
     pkcs = OpenSSL::PKCS12.new(cert_record.file.read, cert_record.password)
 

app/controllers/mfa_setup_controller.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+class MfaSetupController < ApplicationController
+  before_action do
+    authorize!(:update, current_user)
+  end
+
+  def new
+    current_user.otp_secret ||= User.generate_otp_secret
+
+    current_user.save!
+
+    @provision_url = current_user.otp_provisioning_uri(current_user.email, issuer: Docuseal.product_name)
+  end
+
+  def edit; end
+
+  def create
+    if current_user.validate_and_consume_otp!(params[:otp_attempt])
+      current_user.otp_required_for_login = true
+      current_user.save!
+
+      redirect_to settings_profile_index_path, notice: '2FA has been configured'
+    else
+      @provision_url = current_user.otp_provisioning_uri(current_user.email, issuer: Docuseal.product_name)
+
+      @error_message = 'Code is invalid'
+
+      render turbo_stream: turbo_stream.replace(:modal, template: 'mfa_setup/new'), status: :unprocessable_entity
+    end
+  end
+
+  def destroy
+    if current_user.validate_and_consume_otp!(params[:otp_attempt])
+      current_user.update!(otp_required_for_login: false, otp_secret: nil)
+
+      redirect_to settings_profile_index_path, notice: '2FA has been removed'
+    else
+      @error_message = 'Code is invalid'
+
+      render turbo_stream: turbo_stream.replace(:modal, template: 'mfa_setup/edit'), status: :unprocessable_entity
+    end
+  end
+end

app/controllers/newsletters_controller.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class NewslettersController < ApplicationController
+  skip_authorization_check
+
   def show; end
 
   def update

app/controllers/notifications_settings_controller.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+class NotificationsSettingsController < ApplicationController
+  before_action :load_bcc_config, only: :index
+  before_action :load_reminder_config, only: :index
+  authorize_resource :bcc_config, only: :index
+  authorize_resource :reminder_config, only: :index
+
+  before_action :build_account_config, only: :create
+  authorize_resource :account_config, only: :create
+
+  def index; end
+
+  def create
+    if @account_config.value.present? ? @account_config.save : @account_config.delete
+      redirect_back fallback_location: settings_notifications_path, notice: 'Changes have been saved'
+    else
+      redirect_back fallback_location: settings_notifications_path, alert: 'Unable to save'
+    end
+  end
+
+  private
+
+  def build_account_config
+    @account_config =
+      AccountConfig.find_or_initialize_by(account: current_account, key: email_config_params[:key])
+
+    @account_config.assign_attributes(email_config_params)
+  end
+
+  def load_bcc_config
+    @bcc_config =
+      AccountConfig.find_or_initialize_by(account: current_account, key: AccountConfig::BCC_EMAILS)
+  end
+
+  def load_reminder_config
+    @reminder_config =
+      AccountConfig.find_or_initialize_by(account: current_account, key: AccountConfig::SUBMITTER_REMAILERS)
+  end
+
+  def email_config_params
+    params.require(:account_config).permit!.tap do |attrs|
+      attrs[:key] = nil unless attrs[:key].in?([AccountConfig::BCC_EMAILS, AccountConfig::SUBMITTER_REMAILERS])
+    end
+  end
+end

app/controllers/passwords_controller.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class PasswordsController < Devise::PasswordsController
+  class Current < ActiveSupport::CurrentAttributes
+    attribute :user
+  end
+
+  def update
+    super do |resource|
+      Current.user = resource
+    end
+  end
+end

app/controllers/personalization_settings_controller.rb

@@ -1,12 +1,16 @@
 # frozen_string_literal: true
 
 class PersonalizationSettingsController < ApplicationController
-  def show; end
+  def show
+    authorize!(:read, AccountConfig)
+  end
 
   def create
     account_config =
       current_account.account_configs.find_or_initialize_by(key: encrypted_config_params[:key])
 
+    authorize!(:create, account_config)
+
     account_config.update!(encrypted_config_params)
 
     redirect_back(fallback_location: settings_personalization_path, notice: 'Settings have been saved.')

app/controllers/preview_document_page_controller.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+class PreviewDocumentPageController < ActionController::API
+  include ActiveStorage::SetCurrent
+
+  FORMAT = Templates::ProcessDocument::FORMAT
+
+  def show
+    attachment = ActiveStorage::Attachment.find_by(uuid: params[:attachment_uuid])
+
+    return head :not_found unless attachment
+
+    preview_image = attachment.preview_images.joins(:blob).find_by(blob: { filename: "#{params[:id]}#{FORMAT}" })
+
+    return redirect_to preview_image.url, allow_other_host: true if preview_image
+
+    file_path =
+      if attachment.service.name == :disk
+        ActiveStorage::Blob.service.path_for(attachment.key)
+      else
+        find_or_create_document_tempfile_path(attachment)
+      end
+
+    io = Templates::ProcessDocument.generate_pdf_preview_from_file(attachment, file_path, params[:id].to_i)
+
+    render plain: io.tap(&:rewind).read, content_type: 'image/jpeg'
+  end
+
+  def find_or_create_document_tempfile_path(attachment)
+    file_path = "#{Dir.tmpdir}/#{attachment.uuid}"
+
+    File.open(file_path, File::RDWR | File::CREAT, 0o644) do |f|
+      f.flock(File::LOCK_EX)
+
+      # rubocop:disable Style/ZeroLengthPredicate
+      if f.size.zero?
+        f.binmode
+
+        f.write(attachment.download)
+      end
+      # rubocop:enable Style/ZeroLengthPredicate
+    end
+
+    file_path
+  end
+end

app/controllers/profile_controller.rb

@@ -1,6 +1,10 @@
 # frozen_string_literal: true
 
 class ProfileController < ApplicationController
+  before_action do
+    authorize!(:manage, current_user)
+  end
+
   def index; end
 
   def update_contact

app/controllers/registrations_controller.rb

@@ -31,10 +31,10 @@ class RegistrationsController < Devise::RegistrationsController
     redirect_to after_sign_up_path_for(current_user), allow_other_host: true
   end
 
-  def require_no_authentication
+  def set_flash_message(key, kind, options = {})
-    super
+    return if key == :alert && kind == 'already_authenticated'
 
-    flash.clear
+    super
   end
 
   def build_resource(_hash = {})
@@ -43,7 +43,7 @@ class RegistrationsController < Devise::RegistrationsController
 
     self.resource = account.users.new(user_params)
 
-    account.name ||= "#{resource.full_name}'s Company" if params[:action] == 'create'
+    account.name ||= resource.full_name if params[:action] == 'create'
   end
 
   def user_params

app/controllers/send_submission_email_controller.rb

@@ -5,6 +5,7 @@ class SendSubmissionEmailController < ApplicationController
 
   skip_before_action :authenticate_user!
   skip_before_action :verify_authenticity_token
+  skip_authorization_check
 
   def success; end
 

app/controllers/sessions_controller.rb

@@ -1,12 +1,18 @@
 # frozen_string_literal: true
 
 class SessionsController < Devise::SessionsController
+  before_action :configure_permitted_parameters
+
   def create
     if Docuseal.multitenant? && !User.exists?(email: sign_in_params[:email])
       return redirect_to new_registration_path(sign_up: true, user: sign_in_params.slice(:email)),
                          notice: 'Create a new account'
     end
 
+    if User.exists?(email: sign_in_params[:email], otp_required_for_login: true) && sign_in_params[:otp_attempt].blank?
+      return render :otp, locals: { resource: User.new(sign_in_params) }, status: :unprocessable_entity
+    end
+
     super
   end
 
@@ -22,9 +28,13 @@ class SessionsController < Devise::SessionsController
     super
   end
 
-  def require_no_authentication
+  def configure_permitted_parameters
-    super
+    devise_parameter_sanitizer.permit(:sign_in, keys: [:otp_attempt])
+  end
 
-    flash.clear
+  def set_flash_message(key, kind, options = {})
+    return if key == :alert && kind == 'already_authenticated'
+
+    super
   end
 end

app/controllers/setup_controller.rb

@@ -3,6 +3,7 @@
 class SetupController < ApplicationController
   skip_before_action :maybe_redirect_to_setup
   skip_before_action :authenticate_user!
+  skip_authorization_check
 
   before_action :redirect_to_root_if_signed, if: :signed_in?
   before_action :ensure_first_user_not_created!

app/controllers/sms_settings_controller.rb

@@ -1,5 +1,16 @@
 # frozen_string_literal: true
 
 class SmsSettingsController < ApplicationController
+  before_action :load_encrypted_config
+  authorize_resource :encrypted_config, only: :index
+  authorize_resource :encrypted_config, parent: false, except: :index
+
   def index; end
+
+  private
+
+  def load_encrypted_config
+    @encrypted_config =
+      EncryptedConfig.find_or_initialize_by(account: current_account, key: 'sms_configs')
+  end
 end

app/controllers/sso_settings_controller.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class SsoSettingsController < ApplicationController
+  before_action :load_encrypted_config
+  authorize_resource :encrypted_config, only: :index
+  authorize_resource :encrypted_config, parent: false, except: :index
+
+  def index; end
+
+  private
+
+  def load_encrypted_config
+    @encrypted_config =
+      EncryptedConfig.find_or_initialize_by(account: current_account, key: 'saml_configs')
+  end
+end

app/controllers/start_form_controller.rb

@@ -4,6 +4,7 @@ class StartFormController < ApplicationController
   layout 'form'
 
   skip_before_action :authenticate_user!
+  skip_authorization_check
 
   before_action :load_template
 
@@ -13,19 +14,22 @@ class StartFormController < ApplicationController
 
   def update
     @submitter = Submitter.where(submission: @template.submissions.where(deleted_at: nil))
-                          .find_or_initialize_by(email: submitter_params[:email])
+                          .then { |rel| params[:resubmit].present? ? rel.where(completed_at: nil) : rel }
+                          .find_or_initialize_by(**submitter_params.compact_blank)
 
     if @submitter.completed_at?
       redirect_to start_form_completed_path(@template.slug, email: submitter_params[:email])
     else
       @submitter.assign_attributes(
         uuid: @template.submitters.first['uuid'],
-        opened_at: Time.current,
         ip: request.remote_ip,
-        ua: request.user_agent
+        ua: request.user_agent,
+        preferences: { 'send_email' => true }
       )
 
-      @submitter.submission ||= Submission.new(template: @template, source: :link)
+      @submitter.submission ||= Submission.new(template: @template,
+                                               template_submitters: @template.submitters,
+                                               source: :link)
 
       if @submitter.save
         redirect_to submit_form_path(@submitter.slug)
@@ -44,7 +48,9 @@ class StartFormController < ApplicationController
   private
 
   def submitter_params
-    params.require(:submitter).permit(:email)
+    params.require(:submitter).permit(:email, :phone, :name).tap do |attrs|
+      attrs[:email] = Submissions.normalize_email(attrs[:email])
+    end
   end
 
   def load_template

app/controllers/storage_settings_controller.rb

@@ -2,6 +2,8 @@
 
 class StorageSettingsController < ApplicationController
   before_action :load_encrypted_config
+  authorize_resource :encrypted_config, only: :index
+  authorize_resource :encrypted_config, parent: false, only: :create
 
   def index; end
 

app/controllers/submissions_controller.rb

@@ -2,47 +2,70 @@
 
 class SubmissionsController < ApplicationController
   before_action :load_template, only: %i[new create]
+  authorize_resource :template, only: %i[new create]
+
+  load_and_authorize_resource :submission, only: %i[show destroy]
+
+  PRELOAD_ALL_PAGES_AMOUNT = 200
 
   def show
-    @submission =
+    ActiveRecord::Associations::Preloader.new(
-      Submission.joins(:template).where(template: { account_id: current_account.id })
+      records: [@submission],
-                .preload(:template, template_schema_documents: [:blob, { preview_images_attachments: :blob }])
+      associations: [:template, { template_schema_documents: :blob }]
-                .find(params[:id])
+    ).call
+
+    total_pages =
+      @submission.template_schema_documents.sum { |e| e.metadata.dig('pdf', 'number_of_pages').to_i }
+
+    if total_pages < PRELOAD_ALL_PAGES_AMOUNT
+      ActiveRecord::Associations::Preloader.new(
+        records: @submission.template_schema_documents,
+        associations: [:blob, { preview_images_attachments: :blob }]
+      ).call
+    end
 
     render :show, layout: 'plain'
   end
 
-  def new; end
+  def new
+    authorize!(:new, Submission)
+  end
 
   def create
+    authorize!(:create, Submission)
+
+    if params[:is_custom_message] != '1'
+      params.delete(:subject)
+      params.delete(:body)
+    end
+
     submissions =
       if params[:emails].present?
         Submissions.create_from_emails(template: @template,
                                        user: current_user,
                                        source: :invite,
                                        mark_as_sent: params[:send_email] == '1',
-                                       emails: params[:emails])
+                                       emails: params[:emails],
+                                       params:)
       else
         Submissions.create_from_submitters(template: @template,
                                            user: current_user,
                                            source: :invite,
                                            submitters_order: params[:preserve_order] == '1' ? 'preserved' : 'random',
                                            mark_as_sent: params[:send_email] == '1',
-                                           submissions_attrs: submissions_params[:submission].to_h.values)
+                                           submissions_attrs: submissions_params[:submission].to_h.values,
+                                           params:)
       end
 
-    Submissions.send_signature_requests(submissions, params)
+    Submissions.send_signature_requests(submissions)
 
     redirect_to template_path(@template), notice: 'New recipients have been added'
   end
 
   def destroy
-    submission = Submission.joins(:template).where(template: { account_id: current_account.id })
+    @submission.update!(deleted_at: Time.current)
-                           .find(params[:id])
 
-    submission.update!(deleted_at: Time.current)
+    redirect_back(fallback_location: template_path(@submission.template), notice: 'Submission has been archived')
-
-    redirect_back(fallback_location: template_path(submission.template), notice: 'Submission has been archived')
   end
 
   private

app/controllers/submissions_debug_controller.rb

@@ -4,6 +4,7 @@ class SubmissionsDebugController < ApplicationController
   layout 'plain'
 
   skip_before_action :authenticate_user!
+  skip_authorization_check
 
   def index
     @submitter = Submitter.preload({ attachments_attachments: :blob },

app/controllers/submissions_download_controller.rb

@@ -2,6 +2,7 @@
 
 class SubmissionsDownloadController < ApplicationController
   skip_before_action :authenticate_user!
+  skip_authorization_check
 
   def index
     submitter = Submitter.find_by(slug: params[:submitter_slug])

app/controllers/submissions_export_controller.rb

@@ -1,13 +1,14 @@
 # frozen_string_literal: true
 
 class SubmissionsExportController < ApplicationController
-  before_action :load_template
+  load_and_authorize_resource :template
+  load_and_authorize_resource :submission, through: :template, parent: false, only: :index
 
   def index
-    submissions = @template.submissions.active
+    submissions = @submissions.active
-                           .preload(submitters: { documents_attachments: :blob,
+                              .preload(submitters: { documents_attachments: :blob,
-                                                  attachments_attachments: :blob })
+                                                     attachments_attachments: :blob })
-                           .order(id: :asc)
+                              .order(id: :asc)
 
     if params[:format] == 'csv'
       send_data Submissions::GenerateExportFiles.call(submissions, format: params[:format]),
@@ -19,10 +20,4 @@ class SubmissionsExportController < ApplicationController
   end
 
   def new; end
-
-  private
-
-  def load_template
-    @template = current_account.templates.find(params[:template_id])
-  end
 end

app/controllers/submissions_preview_controller.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class SubmissionsPreviewController < ApplicationController
+  skip_before_action :authenticate_user!
+  skip_authorization_check
+
+  PRELOAD_ALL_PAGES_AMOUNT = 200
+
+  def show
+    @submission = Submission.find_by!(slug: params[:slug])
+
+    ActiveRecord::Associations::Preloader.new(
+      records: [@submission],
+      associations: [:template, { template_schema_documents: :blob }]
+    ).call
+
+    total_pages =
+      @submission.template_schema_documents.sum { |e| e.metadata.dig('pdf', 'number_of_pages').to_i }
+
+    if total_pages < PRELOAD_ALL_PAGES_AMOUNT
+      ActiveRecord::Associations::Preloader.new(
+        records: @submission.template_schema_documents,
+        associations: [:blob, { preview_images_attachments: :blob }]
+      ).call
+    end
+
+    render 'submissions/show', layout: 'plain'
+  end
+end

app/controllers/submit_form_controller.rb

@@ -4,17 +4,35 @@ class SubmitFormController < ApplicationController
   layout 'form'
 
   skip_before_action :authenticate_user!
+  skip_authorization_check
+
+  PRELOAD_ALL_PAGES_AMOUNT = 200
 
   def show
-    @submitter =
+    @submitter = Submitter.find_by!(slug: params[:slug])
-      Submitter.preload(submission: [
-                          :template, { template_schema_documents: [:blob, { preview_images_attachments: :blob }] }
-                        ])
-               .find_by!(slug: params[:slug])
 
     return redirect_to submit_form_completed_path(@submitter.slug) if @submitter.completed_at?
 
+    ActiveRecord::Associations::Preloader.new(
+      records: [@submitter],
+      associations: [submission: [:template, { template_schema_documents: :blob }]]
+    ).call
+
+    total_pages =
+      @submitter.submission.template_schema_documents.sum { |e| e.metadata.dig('pdf', 'number_of_pages').to_i }
+
+    if total_pages < PRELOAD_ALL_PAGES_AMOUNT
+      ActiveRecord::Associations::Preloader.new(
+        records: @submitter.submission.template_schema_documents,
+        associations: [:blob, { preview_images_attachments: :blob }]
+      ).call
+    end
+
+    Submitters::MaybeUpdateDefaultValues.call(@submitter, current_user)
+
     cookies[:submitter_sid] = @submitter.signed_id
+
+    render @submitter.submission.template.deleted_at? ? :archived : :show
   end
 
   def update

app/controllers/submitters_send_email_controller.rb

@@ -1,18 +1,23 @@
 # frozen_string_literal: true
 
 class SubmittersSendEmailController < ApplicationController
+  load_and_authorize_resource :submitter, id_param: :submitter_slug, find_by: :slug
+
   def create
-    submitter = Submitter.joins(:template)
+    if Docuseal.multitenant? && SubmissionEvent.exists?(submitter: @submitter,
-                         .where(template: { account_id: current_account.id })
+                                                        event_type: 'send_email',
-                         .find_by!(slug: params[:submitter_slug])
+                                                        created_at: 24.hours.ago..Time.current)
+      return redirect_back(fallback_location: submission_path(@submitter.submission),
+                           alert: 'Email has been sent already.')
+    end
 
-    SubmitterMailer.invitation_email(submitter).deliver_later!
+    SubmitterMailer.invitation_email(@submitter).deliver_later!
 
-    SubmissionEvent.create!(submitter:, event_type: 'send_email')
+    SubmissionEvent.create!(submitter: @submitter, event_type: 'send_email')
 
-    submitter.sent_at ||= Time.current
+    @submitter.sent_at ||= Time.current
-    submitter.save!
+    @submitter.save!
 
-    redirect_back(fallback_location: submission_path(submitter.submission), notice: 'Email has been sent')
+    redirect_back(fallback_location: submission_path(@submitter.submission), notice: 'Email has been sent')
   end
 end

app/controllers/template_folders_controller.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class TemplateFoldersController < ApplicationController
+  load_and_authorize_resource :template_folder
+
+  def show
+    @templates = @template_folder.templates.active.preload(:author).order(id: :desc)
+    @templates = Templates.search(@templates, params[:q])
+
+    @pagy, @templates = pagy(@templates, items: 12)
+  end
+
+  def edit; end
+
+  def update
+    if @template_folder != current_account.default_template_folder &&
+       @template_folder.update(template_folder_params)
+      redirect_to folder_path(@template_folder), notice: 'Folder name has been updated'
+    else
+      redirect_to folder_path(@template_folder), alert: 'Unable to rename folder'
+    end
+  end
+
+  private
+
+  def template_folder_params
+    params.require(:template_folder).permit(:name)
+  end
+end

app/controllers/templates_archived_controller.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class TemplatesArchivedController < ApplicationController
+  load_and_authorize_resource :template, parent: false
+
+  def index
+    @templates = @templates.where.not(deleted_at: nil).preload(:author, :folder).order(id: :desc)
+    @templates = Templates.search(@templates, params[:q])
+
+    @pagy, @templates = pagy(@templates, items: 12)
+  end
+end

app/controllers/templates_archived_submissions_controller.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class TemplatesArchivedSubmissionsController < ApplicationController
+  load_and_authorize_resource :template
+  load_and_authorize_resource :submission, through: :template, parent: false
+
+  def index
+    @submissions = @submissions.where.not(deleted_at: nil)
+    @submissions = Submissions.search(@submissions, params[:q])
+
+    @pagy, @submissions = pagy(@submissions.preload(:submitters).order(id: :desc))
+  rescue ActiveRecord::RecordNotFound
+    redirect_to root_path
+  end
+end

app/controllers/templates_controller.rb

@@ -1,31 +1,50 @@
 # frozen_string_literal: true
 
 class TemplatesController < ApplicationController
+  load_and_authorize_resource :template
+
   before_action :load_base_template, only: %i[new create]
 
   def show
-    @template = current_account.templates.active.find(params[:id])
+    submissions = @template.submissions
+    submissions = submissions.active if @template.deleted_at.blank?
+    submissions = Submissions.search(submissions, params[:q])
 
-    @pagy, @submissions = pagy(@template.submissions.active.preload(:submitters).order(id: :desc))
+    @base_submissions = submissions
+
+    submissions = submissions.pending if params[:status] == 'pending'
+    submissions = submissions.completed if params[:status] == 'completed'
+
+    @pagy, @submissions = pagy(submissions.preload(:submitters).order(id: :desc))
   rescue ActiveRecord::RecordNotFound
     redirect_to root_path
   end
 
   def new
-    @template = current_account.templates.new
     @template.name = "#{@base_template.name} (Clone)" if @base_template
   end
 
   def edit
-    @template = current_account.templates.preload(schema_documents: { preview_images_attachments: :blob })
+    ActiveRecord::Associations::Preloader.new(
-                               .find(params[:id])
+      records: [@template],
+      associations: [schema_documents: { preview_images_attachments: :blob }]
+    ).call
+
+    @template_data =
+      @template.as_json.merge(
+        documents: @template.schema_documents.as_json(
+          methods: [:metadata],
+          include: { preview_images: { methods: %i[url metadata filename] } }
+        )
+      ).to_json
 
     render :edit, layout: 'plain'
   end
 
   def create
-    @template = current_account.templates.new(template_params)
+    @template.account = current_account
     @template.author = current_user
+    @template.folder = TemplateFolders.find_or_create_by_name(current_user, params[:folder_name])
     @template.assign_attributes(@base_template.slice(:fields, :schema, :submitters)) if @base_template
 
     if @template.save
@@ -38,10 +57,18 @@ class TemplatesController < ApplicationController
   end
 
   def destroy
-    @template = current_account.templates.find(params[:id])
+    notice =
-    @template.update!(deleted_at: Time.current)
+      if !Docuseal.multitenant? && params[:permanently].present?
+        @template.destroy!
 
-    redirect_back(fallback_location: root_path, notice: 'Template has been archived.')
+        'Template has been removed.'
+      else
+        @template.update!(deleted_at: Time.current)
+
+        'Template has been archived.'
+      end
+
+    redirect_back(fallback_location: root_path, notice:)
   end
 
   private
@@ -53,8 +80,6 @@ class TemplatesController < ApplicationController
   def load_base_template
     return if params[:base_template_id].blank?
 
-    @base_template = current_account.templates
+    @base_template = current_account.templates.find_by(id: params[:base_template_id])
-                                    .preload(documents_attachments: :preview_images_attachments)
-                                    .find_by(id: params[:base_template_id])
   end
 end

app/controllers/templates_folders_controller.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+class TemplatesFoldersController < ApplicationController
+  load_and_authorize_resource :template
+
+  def edit; end
+
+  def update
+    @template.folder = TemplateFolders.find_or_create_by_name(current_user, params[:name])
+
+    if @template.save
+      redirect_back(fallback_location: template_path(@template), notice: 'Document template has been moved')
+    else
+      redirect_back(fallback_location: template_path(@template), notice: 'Unable to move template into folder')
+    end
+  end
+
+  private
+
+  def template_folder_params
+    params.require(:template_folder).permit(:name)
+  end
+end

app/controllers/templates_restore_controller.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class TemplatesRestoreController < ApplicationController
+  load_and_authorize_resource :template
+
+  def create
+    @template.update!(deleted_at: nil)
+
+    redirect_to template_path(@template), notice: 'Template has been unarchived'
+  end
+end

app/controllers/templates_uploads_controller.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+class TemplatesUploadsController < ApplicationController
+  load_and_authorize_resource :template, parent: false
+
+  layout 'plain'
+
+  def show; end
+
+  def create
+    url_params = create_file_params_from_url if params[:url].present?
+
+    @template.account = current_account
+    @template.author = current_user
+    @template.folder = TemplateFolders.find_or_create_by_name(current_user, params[:folder_name])
+    @template.name = File.basename((url_params || params)[:files].first.original_filename, '.*')
+
+    @template.save!
+
+    documents = Templates::CreateAttachments.call(@template, url_params || params)
+
+    schema = documents.map { |doc| { attachment_uuid: doc.uuid, name: doc.filename.base } }
+
+    @template.update!(schema:)
+
+    redirect_to edit_template_path(@template)
+  rescue StandardError => e
+    Rollbar.error(e) if defined?(Rollbar)
+
+    redirect_to root_path, alert: 'Unable to upload file'
+  end
+
+  private
+
+  def create_file_params_from_url
+    tempfile = Tempfile.new
+    tempfile.binmode
+    tempfile.write(conn.get(Addressable::URI.parse(params[:url]).display_uri.to_s).body)
+    tempfile.rewind
+
+    file = ActionDispatch::Http::UploadedFile.new(
+      tempfile:,
+      filename: File.basename(
+        URI.decode_www_form_component(params[:filename].presence || params[:url])
+      ),
+      type: Marcel::MimeType.for(tempfile)
+    )
+
+    { files: [file] }
+  end
+
+  def conn
+    Faraday.new do |faraday|
+      faraday.response :follow_redirects
+    end
+  end
+end

app/controllers/user_signatures_controller.rb

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

app/controllers/users_controller.rb

@@ -1,26 +1,20 @@
 # frozen_string_literal: true
 
 class UsersController < ApplicationController
-  before_action :load_user, only: %i[edit update destroy]
+  load_and_authorize_resource :user, only: %i[index edit new update destroy]
+
+  before_action :build_user, only: :create
+  authorize_resource :user, only: :create
 
   def index
-    @pagy, @users = pagy(current_account.users.active.order(id: :desc))
+    @pagy, @users = pagy(@users.active.order(id: :desc))
   end
 
-  def new
+  def new; end
-    @user = current_account.users.new
-  end
 
   def edit; end
 
   def create
-    @user = current_account.users.find_by(email: user_params[:email])&.tap do |user|
-      user.assign_attributes(user_params)
-      user.deleted_at = nil
-    end
-
-    @user ||= current_account.users.new(user_params)
-
     if @user.save
       UserMailer.invitation_email(@user).deliver_later!
 
@@ -33,7 +27,10 @@ class UsersController < ApplicationController
   def update
     return redirect_to settings_users_path, notice: 'Unable to update user.' if Docuseal.demo?
 
-    if @user.update(user_params.compact_blank)
+    attrs = user_params.compact_blank
+    attrs.delete(:role) if User::ROLES.exclude?(attrs[:role])
+
+    if @user.update(attrs.except(current_user == @user ? :role : nil))
       redirect_to settings_users_path, notice: 'User has been updated'
     else
       render turbo_stream: turbo_stream.replace(:modal, template: 'users/edit'), status: :unprocessable_entity
@@ -52,11 +49,18 @@ class UsersController < ApplicationController
 
   private
 
-  def load_user
+  def build_user
-    @user = current_account.users.find(params[:id])
+    @user = current_account.users.find_by(email: user_params[:email])&.tap do |user|
+      user.assign_attributes(user_params)
+      user.deleted_at = nil
+    end
+
+    @user ||= current_account.users.new(user_params)
+
+    @user
   end
 
   def user_params
-    params.require(:user).permit(:email, :first_name, :last_name, :password)
+    params.require(:user).permit(:email, :first_name, :last_name, :password, :role)
   end
 end

app/controllers/verify_pdf_signature_controller.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class VerifyPdfSignatureController < ApplicationController
+  skip_authorization_check
+
   def create
     pdfs =
       params[:files].map do |file|
@@ -10,7 +12,7 @@ class VerifyPdfSignatureController < ApplicationController
     cert_data = if Docuseal.multitenant?
                   Docuseal::CERTS
                 else
-                  EncryptedConfig.find_by(account: current_account, key: EncryptedConfig::ESIGN_CERTS_KEY)&.value || {}
+                  EncryptedConfig.find_by(key: EncryptedConfig::ESIGN_CERTS_KEY)&.value || {}
                 end
 
     default_pkcs = GenerateCertificate.load_pkcs(cert_data)

app/controllers/webhook_settings_controller.rb

@@ -1,15 +1,12 @@
 # frozen_string_literal: true
 
 class WebhookSettingsController < ApplicationController
-  def show
+  before_action :load_encrypted_config
-    @encrypted_config =
+  authorize_resource :encrypted_config, parent: false
-      current_account.encrypted_configs.find_or_initialize_by(key: EncryptedConfig::WEBHOOK_URL_KEY)
+
-  end
+  def show; end
 
   def create
-    @encrypted_config =
-      current_account.encrypted_configs.find_or_initialize_by(key: EncryptedConfig::WEBHOOK_URL_KEY)
-
     @encrypted_config.update!(encrypted_config_params)
 
     redirect_back(fallback_location: settings_webhooks_path, notice: 'Webhook URL has been saved.')
@@ -18,13 +15,18 @@ class WebhookSettingsController < ApplicationController
   def update
     submitter = current_account.submitters.where.not(completed_at: nil).order(:id).last
 
-    SendWebhookRequestJob.perform_later(submitter)
+    SendFormCompletedWebhookRequestJob.perform_later(submitter)
 
     redirect_back(fallback_location: settings_webhooks_path, notice: 'Webhook request has been sent.')
   end
 
   private
 
+  def load_encrypted_config
+    @encrypted_config =
+      current_account.encrypted_configs.find_or_initialize_by(key: EncryptedConfig::WEBHOOK_URL_KEY)
+  end
+
   def encrypted_config_params
     params.require(:encrypted_config).permit(:value)
   end

app/javascript/application.js

@@ -15,6 +15,10 @@ import DownloadButton from './elements/download_button'
 import SetOriginUrl from './elements/set_origin_url'
 import SetTimezone from './elements/set_timezone'
 import AutoresizeTextarea from './elements/autoresize_textarea'
+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 * as TurboInstantClick from './lib/turbo_instant_click'
 
@@ -43,6 +47,10 @@ window.customElements.define('download-button', DownloadButton)
 window.customElements.define('set-origin-url', SetOriginUrl)
 window.customElements.define('set-timezone', SetTimezone)
 window.customElements.define('autoresize-textarea', AutoresizeTextarea)
+window.customElements.define('submitters-autocomplete', SubmittersAutocomplete)
+window.customElements.define('folder-autocomplete', FolderAutocomplete)
+window.customElements.define('signature-form', SignatureForm)
+window.customElements.define('submit-form', SubmitForm)
 
 document.addEventListener('turbo:before-fetch-request', encodeMethodIntoRequestBody)
 document.addEventListener('turbo:submit-end', async (event) => {
@@ -70,12 +78,14 @@ document.addEventListener('turbo:submit-end', async (event) => {
 window.customElements.define('template-builder', class extends HTMLElement {
   connectedCallback () {
     this.appElem = document.createElement('div')
-    this.appElem.classList.add('max-h-screen')
+
+    this.appElem.classList.add('md:h-screen')
 
     this.app = createApp(TemplateBuilder, {
       template: reactive(JSON.parse(this.dataset.template)),
       backgroundColor: '#faf7f5',
       withPhone: this.dataset.withPhone === 'true',
+      withLogo: this.dataset.withLogo !== 'false',
       acceptFileTypes: this.dataset.acceptFileTypes,
       isDirectUpload: this.dataset.isDirectUpload === 'true'
     })

app/javascript/application.scss

@@ -74,3 +74,54 @@ button[disabled] .enabled {
 .base-select {
   @apply select base-input w-full font-normal;
 }
+
+.tooltip-bottom-end:before {
+  transform: translateX(-95%);
+  top: var(--tooltip-offset);
+  left: 100%;
+  right: auto;
+  bottom: auto;
+}
+
+.tooltip-bottom-end:after {
+  transform: translateX(-25%);
+  border-color: transparent transparent var(--tooltip-color) transparent;
+  top: var(--tooltip-tail-offset);
+  left: 50%;
+  right: auto;
+  bottom: auto;
+}
+
+.autocomplete {
+  background: white;
+  z-index: 1000;
+  font: 14px/22px "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  overflow: auto;
+  box-sizing: border-box;
+  @apply border border-base-300 mt-1 rounded-md;
+}
+
+.autocomplete * {
+  font: inherit;
+}
+
+.autocomplete > div {
+  @apply px-2 py-1 font-normal text-sm;
+}
+
+.autocomplete .group {
+  background: #eee;
+}
+
+.autocomplete > div:hover:not(.group),
+.autocomplete > div.selected {
+  @apply bg-base-300;
+  cursor: pointer;
+}
+
+.input-outlined {
+  outline-style: solid;
+  outline-width: 1px;
+  outline-offset: 3px;
+  outline-color: hsl(var(--bc) / 0.2);
+}

app/javascript/elements/file_dropzone.js

@@ -91,11 +91,13 @@ export default actionable(targetable(class extends HTMLElement {
           this.append(input)
         })
 
-        if (this.dataset.submitOnUpload) {
+        if (this.dataset.submitOnUpload === 'true') {
           this.closest('form').querySelector('button[type="submit"]').click()
         }
       }).finally(() => {
-        this.toggleLoading()
+        if (this.dataset.submitOnUpload !== 'true') {
+          this.toggleLoading()
+        }
       })
     } else {
       if (this.dataset.submitOnUpload) {

app/javascript/elements/folder_autocomplete.js

@@ -0,0 +1,43 @@
+import autocomplete from 'autocompleter'
+
+export default class extends HTMLElement {
+  connectedCallback () {
+    autocomplete({
+      input: this.input,
+      preventSubmit: this.dataset.submitOnSelect === 'true' ? 0 : 1,
+      minLength: 0,
+      showOnFocus: true,
+      onSelect: this.onSelect,
+      render: this.render,
+      fetch: this.fetch
+    })
+  }
+
+  onSelect = (item) => {
+    this.input.value = item.name
+  }
+
+  fetch = (text, resolve) => {
+    const queryParams = new URLSearchParams({ q: text })
+
+    fetch('/api/template_folders_autocomplete?' + queryParams).then(async (resp) => {
+      const items = await resp.json()
+
+      resolve(items)
+    }).catch(() => {
+      resolve([])
+    })
+  }
+
+  render = (item) => {
+    const div = document.createElement('div')
+
+    div.textContent = item.name
+
+    return div
+  }
+
+  get input () {
+    return this.querySelector('input')
+  }
+}

app/javascript/elements/set_timezone.js

@@ -1,7 +1,21 @@
 export default class extends HTMLElement {
   connectedCallback () {
     if (this.dataset.inputId) {
-      document.getElementById(this.dataset.inputId).value = Intl.DateTimeFormat().resolvedOptions().timeZone
+      const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
+
+      if (this.dataset.params === 'true') {
+        const params = new URLSearchParams(this.input.value)
+
+        params.set('timezone', timezone)
+
+        this.input.value = params.toString()
+      } else {
+        this.input.value = timezone
+      }
     }
   }
+
+  get input () {
+    return document.getElementById(this.dataset.inputId)
+  }
 }

app/javascript/elements/signature_form.js

@@ -0,0 +1,46 @@
+import { target, targetable } from '@github/catalyst/lib/targetable'
+import { cropCanvasAndExportToPNG } from '../submission_form/crop_canvas'
+
+export default targetable(class extends HTMLElement {
+  static [target.static] = ['canvas', 'input', 'clear', 'button']
+
+  async connectedCallback () {
+    this.canvas.width = this.canvas.parentNode.parentNode.clientWidth
+    this.canvas.height = this.canvas.parentNode.parentNode.clientWidth / 3
+
+    const { default: SignaturePad } = await import('signature_pad')
+
+    this.pad = new SignaturePad(this.canvas)
+
+    this.clear.addEventListener('click', (e) => {
+      e.preventDefault()
+
+      this.pad.clear()
+    })
+
+    this.button.addEventListener('click', (e) => {
+      e.preventDefault()
+
+      this.button.disabled = true
+
+      this.submit()
+    })
+  }
+
+  async submit () {
+    const blob = await cropCanvasAndExportToPNG(this.canvas)
+    const file = new File([blob], 'signature.png', { type: 'image/png' })
+
+    const dataTransfer = new DataTransfer()
+
+    dataTransfer.items.add(file)
+
+    this.input.files = dataTransfer.files
+
+    if (this.input.webkitEntries.length) {
+      this.input.dataset.file = `${dataTransfer.files[0].name}`
+    }
+
+    this.closest('form').requestSubmit()
+  }
+})

app/javascript/elements/submit_form.js

@@ -0,0 +1,5 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.querySelector('form').requestSubmit()
+  }
+}

app/javascript/elements/submitter_autocomplete.js

@@ -0,0 +1,67 @@
+import autocomplete from 'autocompleter'
+
+export default class extends HTMLElement {
+  connectedCallback () {
+    autocomplete({
+      input: this.input,
+      preventSubmit: 1,
+      minLength: 1,
+      showOnFocus: true,
+      onSelect: this.onSelect,
+      render: this.render,
+      fetch: this.fetch
+    })
+  }
+
+  onSelect = (item) => {
+    const fields = ['email', 'name', 'phone']
+    const submitterItemEl = this.closest('submitter-item')
+
+    fields.forEach((field) => {
+      const input = submitterItemEl.querySelector(`submitters-autocomplete[data-field="${field}"] input`)
+      const textarea = submitterItemEl.querySelector(`submitters-autocomplete[data-field="${field}"] textarea`)
+
+      if (input && item[field]) {
+        input.value = item[field]
+      }
+
+      if (textarea && item[field]) {
+        textarea.value = textarea.value.replace(/[^;,\s]+$/, item[field] + ' ')
+      }
+    })
+  }
+
+  fetch = (text, resolve) => {
+    const q = text.split(/[;,\s]+/).pop().trim()
+
+    if (q) {
+      const queryParams = new URLSearchParams({ q, field: this.dataset.field })
+
+      fetch('/api/submitters_autocomplete?' + queryParams).then(async (resp) => {
+        const items = await resp.json()
+
+        if (q.length < 3) {
+          resolve(items.filter((e) => e[this.dataset.field].startsWith(q)))
+        } else {
+          resolve(items)
+        }
+      }).catch(() => {
+        resolve([])
+      })
+    } else {
+      resolve([])
+    }
+  }
+
+  render = (item) => {
+    const div = document.createElement('div')
+
+    div.textContent = item[this.dataset.field]
+
+    return div
+  }
+
+  get input () {
+    return this.querySelector('input') || this.querySelector('textarea')
+  }
+}

app/javascript/form.js

@@ -13,10 +13,12 @@ window.customElements.define('submission-form', class extends HTMLElement {
       authenticityToken: this.dataset.authenticityToken,
       canSendEmail: this.dataset.canSendEmail === 'true',
       isDirectUpload: this.dataset.isDirectUpload === 'true',
+      goToLast: this.dataset.goToLast === 'true',
       isDemo: this.dataset.isDemo === 'true',
       attribution: this.dataset.attribution !== 'false',
       withConfetti: true,
       values: reactive(JSON.parse(this.dataset.values)),
+      completedButton: JSON.parse(this.dataset.completedButton),
       attachments: reactive(JSON.parse(this.dataset.attachments)),
       fields: JSON.parse(this.dataset.fields)
     })

app/javascript/form.scss

@@ -47,6 +47,10 @@ select:required:invalid {
   @apply border-base-content/20;
 }
 
+.base-textarea {
+  @apply textarea textarea-bordered bg-white rounded-3xl;
+}
+
 .btn {
   @apply no-animation;
 }

app/javascript/submission_form/area.vue

@@ -1,11 +1,11 @@
 <template>
   <div
-    class="flex absolute text-[1.5vw] lg:text-base"
+    class="flex absolute lg:text-base"
     :style="computedStyle"
-    :class="{ 'cursor-default': !submittable, 'bg-red-100 border cursor-pointer ': submittable, 'border-red-100': !isActive && submittable, 'bg-opacity-70': !isActive && !isValueSet && submittable, 'border-red-500 border-dashed z-10': isActive && submittable, 'bg-opacity-30': (isActive || isValueSet) && submittable }"
+    :class="{ 'text-[1.5vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars, 'cursor-default': !submittable, 'bg-red-100 border cursor-pointer ': submittable, 'border-red-100': !isActive && submittable, 'bg-opacity-70': !isActive && !isValueSet && submittable, 'border-red-500 border-dashed z-10': isActive && submittable, 'bg-opacity-30': (isActive || isValueSet) && submittable }"
   >
     <div
-      v-if="!isActive && !isValueSet && field.type !== 'checkbox' && submittable"
+      v-if="!isActive && !isValueSet && field.type !== 'checkbox' && submittable && !area.option_uuid"
       class="absolute top-0 bottom-0 right-0 left-0 items-center justify-center h-full w-full"
     >
       <span
@@ -21,7 +21,7 @@
       </span>
     </div>
     <div
-      v-if="isActive && withLabel"
+      v-if="isActive && withLabel && !area.option_uuid"
       class="absolute -top-7 rounded bg-base-content text-base-100 px-2 text-sm whitespace-nowrap"
     >
       {{ field.name || fieldNames[field.type] }}
@@ -47,6 +47,11 @@
       class="object-contain mx-auto"
       :src="signature.url"
     >
+    <img
+      v-else-if="field.type === 'initials' && initials"
+      class="object-contain mx-auto"
+      :src="initials.url"
+    >
     <div
       v-else-if="field.type === 'file'"
       class="px-0.5 flex flex-col justify-center"
@@ -82,6 +87,44 @@
         :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
       />
     </div>
+    <div
+      v-else-if="field.type === 'radio' && area.option_uuid"
+      class="w-full p-[0.2vw] flex items-center justify-center"
+    >
+      <input
+        v-if="submittable"
+        type="radio"
+        :value="false"
+        class="aspect-square base-radio"
+        :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
+        :checked="!!modelValue && modelValue === field.options.find((o) => o.uuid === area.option_uuid)?.value"
+        @click="$emit('update:model-value', field.options.find((o) => o.uuid === area.option_uuid)?.value)"
+      >
+      <IconCheck
+        v-else-if="!!modelValue && modelValue === field.options.find((o) => o.uuid === area.option_uuid)?.value"
+        class="aspect-square"
+        :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
+      />
+    </div>
+    <div
+      v-else-if="field.type === 'multiple' && area.option_uuid"
+      class="w-full p-[0.2vw] flex items-center justify-center"
+    >
+      <input
+        v-if="submittable"
+        type="checkbox"
+        :value="false"
+        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(field.options.find((o) => o.uuid === area.option_uuid)?.value)"
+        @change="updateMultipleSelectValue(field.options.find((o) => o.uuid === area.option_uuid)?.value)"
+      >
+      <IconCheck
+        v-else-if="!!modelValue && modelValue.includes(field.options.find((o) => o.uuid === area.option_uuid)?.value)"
+        class="aspect-square"
+        :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
+      />
+    </div>
     <div
       v-else-if="field.type === 'cells'"
       class="w-full flex items-center"
@@ -97,6 +140,7 @@
     </div>
     <div
       v-else
+      ref="textContainer"
       class="flex items-center px-0.5"
     >
       <span v-if="Array.isArray(modelValue)">
@@ -105,15 +149,16 @@
       <span v-else-if="field.type === 'date'">
         {{ formattedDate }}
       </span>
-      <span v-else>
+      <span
-        {{ modelValue }}
+        v-else
-      </span>
+        class="whitespace-pre-wrap"
+      >{{ modelValue }}</span>
     </div>
   </div>
 </template>
 
 <script>
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck, IconLetterCaseUpper } from '@tabler/icons-vue'
 
 export default {
   name: 'FieldArea',
@@ -167,6 +212,11 @@ export default {
     }
   },
   emits: ['update:model-value'],
+  data () {
+    return {
+      textOverflowChars: 0
+    }
+  },
   computed: {
     fieldNames () {
       return {
@@ -175,6 +225,7 @@ export default {
         signature: 'Signature',
         date: 'Date',
         image: 'Image',
+        initials: 'Initials',
         file: 'File',
         select: 'Select',
         checkbox: 'Checkbox',
@@ -189,6 +240,7 @@ export default {
         signature: IconWritingSign,
         date: IconCalendarEvent,
         image: IconPhoto,
+        initials: IconLetterCaseUpper,
         file: IconPaperclip,
         select: IconSelect,
         checkbox: IconCheckbox,
@@ -212,6 +264,13 @@ export default {
         return null
       }
     },
+    initials () {
+      if (this.field.type === 'initials') {
+        return this.attachmentsIndex[this.modelValue]
+      } else {
+        return null
+      }
+    },
     formattedDate () {
       if (this.field.type === 'date' && this.modelValue) {
         return new Intl.DateTimeFormat([], { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' }).format(new Date(this.modelValue))
@@ -236,6 +295,37 @@ export default {
         height: h * 100 + '%'
       }
     }
+  },
+  watch: {
+    modelValue () {
+      if (this.field.type === 'text' && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > this.modelValue.length)) {
+        this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? this.modelValue.length : 0
+      }
+    }
+  },
+  mounted () {
+    if (this.field.type === 'text' && this.$refs.textContainer) {
+      this.$nextTick(() => {
+        this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? this.modelValue.length : 0
+      })
+    }
+  },
+  methods: {
+    updateMultipleSelectValue (value) {
+      if (this.modelValue?.includes(value)) {
+        const newValue = [...this.modelValue]
+
+        newValue.splice(newValue.indexOf(value), 1)
+
+        this.$emit('update:model-value', newValue)
+      } else {
+        const newValue = this.modelValue ? [...this.modelValue] : []
+
+        newValue.push(value)
+
+        this.$emit('update:model-value', newValue)
+      }
+    }
   }
 }
 </script>

app/javascript/submission_form/attachment_step.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <div v-if="modelValue.length">
+    <div v-if="value.length">
       <div
-        v-for="(val, index) in modelValue"
+        v-for="(val, index) in value"
         :key="index"
         class="flex mb-2"
       >
@@ -26,10 +26,7 @@
             {{ attachmentsIndex[val].filename }}
           </span>
         </a>
-        <button
+        <button @click.prevent="removeAttachment(val)">
-          v-if="modelValue"
-          @click.prevent="removeAttachment(val)"
-        >
           <IconTrashX
             :width="18"
             :heigh="19"
@@ -91,18 +88,28 @@ export default {
     }
   },
   emits: ['attached', 'update:model-value'],
+  computed: {
+    value: {
+      set (value) {
+        this.$emit('update:model-value', this.modelValue || [])
+      },
+      get () {
+        return this.modelValue || []
+      }
+    }
+  },
   methods: {
     removeAttachment (uuid) {
-      this.modelValue.splice(this.modelValue.indexOf(uuid), 1)
+      this.value.splice(this.value.indexOf(uuid), 1)
 
-      this.$emit('update:model-value', this.modelValue)
+      this.$emit('update:model-value', this.value)
     },
     onUpload (attachments) {
       attachments.forEach((attachment) => {
         this.$emit('attached', attachment)
       })
 
-      this.$emit('update:model-value', [...this.modelValue, ...attachments.map(a => a.uuid)])
+      this.$emit('update:model-value', [...this.value, ...attachments.map(a => a.uuid)])
     }
   }
 }

app/javascript/submission_form/completed.vue

@@ -11,6 +11,15 @@
       </span>
     </p>
     <div class="space-y-3 mt-5">
+      <a
+        v-if="completedButton.url"
+        :href="completedButton.url"
+        class="white-button flex items-center w-full"
+      >
+        <span>
+          {{ completedButton.title || 'Back to Website' }}
+        </span>
+      </a>
       <button
         v-if="canSendEmail && !isDemo"
         class="white-button !h-auto flex items-center space-x-1 w-full"
@@ -27,6 +36,7 @@
         </span>
       </button>
       <button
+        v-if="!isWebView"
         class="base-button flex items-center space-x-1 w-full"
         :disabled="isDownloading"
         @click.prevent="download"
@@ -68,7 +78,7 @@
     >
       {{ t('signed_with') }}
       <a
-        href="https://www.docuseal.co"
+        href="https://www.docuseal.co/start"
         target="_blank"
         class="underline"
       >DocuSeal</a> - {{ t('open_source_documents_software') }}
@@ -114,6 +124,11 @@ export default {
       type: Boolean,
       required: false,
       default: false
+    },
+    completedButton: {
+      type: Object,
+      required: false,
+      default: () => ({})
     }
   },
   data () {
@@ -122,6 +137,11 @@ export default {
       isDownloading: false
     }
   },
+  computed: {
+    isWebView () {
+      return /webview|wv|ip((?!.*Safari)|(?=.*like Safari))/i.test(window.navigator.userAgent)
+    }
+  },
   async mounted () {
     if (this.withConfetti) {
       const { default: confetti } = await import('canvas-confetti')

app/javascript/submission_form/crop_canvas.js

@@ -0,0 +1,49 @@
+function cropCanvasAndExportToPNG (canvas) {
+  const ctx = canvas.getContext('2d')
+
+  const width = canvas.width
+  const height = canvas.height
+
+  let topmost = height
+  let bottommost = 0
+  let leftmost = width
+  let rightmost = 0
+
+  const imageData = ctx.getImageData(0, 0, width, height)
+  const pixels = imageData.data
+
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const pixelIndex = (y * width + x) * 4
+      const alpha = pixels[pixelIndex + 3]
+      if (alpha !== 0) {
+        topmost = Math.min(topmost, y)
+        bottommost = Math.max(bottommost, y)
+        leftmost = Math.min(leftmost, x)
+        rightmost = Math.max(rightmost, x)
+      }
+    }
+  }
+
+  const croppedWidth = rightmost - leftmost + 1
+  const croppedHeight = bottommost - topmost + 1
+
+  const croppedCanvas = document.createElement('canvas')
+  croppedCanvas.width = croppedWidth
+  croppedCanvas.height = croppedHeight
+  const croppedCtx = croppedCanvas.getContext('2d')
+
+  croppedCtx.drawImage(canvas, leftmost, topmost, croppedWidth, croppedHeight, 0, 0, croppedWidth, croppedHeight)
+
+  return new Promise((resolve, reject) => {
+    croppedCanvas.toBlob((blob) => {
+      if (blob) {
+        resolve(blob)
+      } else {
+        reject(new Error('Failed to create a PNG blob.'))
+      }
+    }, 'image/png')
+  })
+}
+
+export { cropCanvasAndExportToPNG }

app/javascript/submission_form/date_step.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <div class="flex justify-between items-center w-full mb-2">
+      <label
+        :for="field.uuid"
+        class="label text-2xl"
+      >{{ field.name || t('date') }}
+        <template v-if="!field.required">({{ t('optional') }})</template>
+      </label>
+      <button
+        class="btn btn-outline btn-sm !normal-case font-normal"
+        @click.prevent="setCurrentDate"
+      >
+        <IconCalendarCheck :width="16" />
+        {{ t('set_today') }}
+      </button>
+    </div>
+    <div class="text-center">
+      <input
+        ref="input"
+        v-model="value"
+        class="base-input !text-2xl text-center w-full"
+        :required="field.required"
+        type="date"
+        :name="`values[${field.uuid}]`"
+        @focus="$emit('focus')"
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import { IconCalendarCheck } from '@tabler/icons-vue'
+
+export default {
+  name: 'DateStep',
+  components: {
+    IconCalendarCheck
+  },
+  inject: ['t'],
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    modelValue: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  emits: ['update:model-value', 'focus'],
+  computed: {
+    value: {
+      set (value) {
+        this.$emit('update:model-value', value)
+      },
+      get () {
+        return this.modelValue
+      }
+    }
+  },
+  methods: {
+    setCurrentDate () {
+      const inputEl = this.$refs.input
+
+      inputEl.valueAsDate = new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000)
+
+      inputEl.dispatchEvent(new Event('input', { bubbles: true }))
+    }
+  }
+}
+</script>

app/javascript/submission_form/form.vue

@@ -58,54 +58,20 @@
         >
         <div class="md:mt-4">
           <div v-if="['cells', 'text'].includes(currentField.type)">
-            <label
+            <TextStep
-              v-if="currentField.name"
+              :key="currentField.uuid"
-              :for="currentField.uuid"
+              v-model="values[currentField.uuid]"
-              class="label text-2xl mb-2"
+              :field="currentField"
-            >{{ currentField.name }}
+              @focus="$refs.areas.scrollIntoField(currentField)"
-              <template v-if="!currentField.required">({{ t('optional') }})</template>
-            </label>
-            <div
-              v-else
-              class="py-1"
             />
-            <div>
-              <input
-                :id="currentField.uuid"
-                v-model="values[currentField.uuid]"
-                class="base-input !text-2xl w-full"
-                :required="currentField.required"
-                :placeholder="`${t('type_here')}...${currentField.required ? '' : ` (${t('optional')})`}`"
-                type="text"
-                :name="`values[${currentField.uuid}]`"
-                @focus="$refs.areas.scrollIntoField(currentField)"
-              >
-            </div>
-          </div>
-          <div v-else-if="currentField.type === 'date'">
-            <label
-              v-if="currentField.name"
-              :for="currentField.uuid"
-              class="label text-2xl mb-2"
-            >{{ currentField.name }}
-              <template v-if="!currentField.required">({{ t('optional') }})</template>
-            </label>
-            <div
-              v-else
-              class="py-1"
-            />
-            <div class="text-center">
-              <input
-                :id="currentField.uuid"
-                v-model="values[currentField.uuid]"
-                class="base-input !text-2xl text-center w-full"
-                :required="currentField.required"
-                type="date"
-                :name="`values[${currentField.uuid}]`"
-                @focus="$refs.areas.scrollIntoField(currentField)"
-              >
-            </div>
           </div>
+          <DateStep
+            v-else-if="currentField.type === 'date'"
+            :key="currentField.uuid"
+            v-model="values[currentField.uuid]"
+            :field="currentField"
+            @focus="$refs.areas.scrollIntoField(currentField)"
+          />
           <div v-else-if="currentField.type === 'select'">
             <label
               v-if="currentField.name"
@@ -133,12 +99,12 @@
                 {{ t('select_your_option') }}
               </option>
               <option
-                v-for="(option, index) in currentField.options"
+                v-for="option in currentField.options"
-                :key="index"
+                :key="option.uuid"
-                :selected="values[currentField.uuid] == option"
+                :selected="values[currentField.uuid] == option.value"
-                :value="option"
+                :value="option.value"
               >
-                {{ option }}
+                {{ option.value }}
               </option>
             </select>
           </div>
@@ -153,24 +119,24 @@
             <div class="flex w-full">
               <div class="space-y-3.5 mx-auto">
                 <div
-                  v-for="(option, index) in currentField.options"
+                  v-for="option in currentField.options"
-                  :key="index"
+                  :key="option.uuid"
                 >
                   <label
-                    :for="currentField.uuid + option"
+                    :for="option.uuid"
                     class="flex items-center space-x-3"
                   >
                     <input
-                      :id="currentField.uuid + option"
+                      :id="option.uuid"
                       v-model="values[currentField.uuid]"
                       type="radio"
                       class="base-radio !h-7 !w-7"
                       :name="`values[${currentField.uuid}]`"
-                      :value="option"
+                      :value="option.value"
                       :required="currentField.required"
                     >
                     <span class="text-xl">
-                      {{ option }}
+                      {{ option.value }}
                     </span>
                   </label>
                 </div>
@@ -179,6 +145,7 @@
           </div>
           <MultiSelectStep
             v-else-if="currentField.type === 'multiple'"
+            :key="currentField.uuid"
             v-model="values[currentField.uuid]"
             :field="currentField"
           />
@@ -224,6 +191,9 @@
                       :id="field.uuid"
                       type="checkbox"
                       class="base-checkbox !h-7 !w-7"
+                      :oninvalid="`this.setCustomValidity('${t('please_check_the_box_to_continue')}')`"
+                      :onchange="`this.setCustomValidity(validity.valueMissing ? '${t('please_check_the_box_to_continue')}' : '');`"
+                      :required="field.required"
                       :checked="!!values[field.uuid]"
                       @click="[$refs.areas.scrollIntoField(field), values[field.uuid] = !values[field.uuid]]"
                     >
@@ -237,6 +207,7 @@
           </div>
           <ImageStep
             v-else-if="currentField.type === 'image'"
+            :key="currentField.uuid"
             v-model="values[currentField.uuid]"
             :field="currentField"
             :is-direct-upload="isDirectUpload"
@@ -247,8 +218,10 @@
           <SignatureStep
             v-else-if="currentField.type === 'signature'"
             ref="currentStep"
+            :key="currentField.uuid"
             v-model="values[currentField.uuid]"
             :field="currentField"
+            :previous-value="previousSignatureValue"
             :is-direct-upload="isDirectUpload"
             :attachments-index="attachmentsIndex"
             :submitter-slug="submitterSlug"
@@ -256,8 +229,24 @@
             @start="$refs.areas.scrollIntoField(currentField)"
             @minimize="isFormVisible = false"
           />
+          <InitialsStep
+            v-else-if="currentField.type === 'initials'"
+            ref="currentStep"
+            :key="currentField.uuid"
+            v-model="values[currentField.uuid]"
+            :field="currentField"
+            :previous-value="previousInitialsValue"
+            :is-direct-upload="isDirectUpload"
+            :attachments-index="attachmentsIndex"
+            :submitter-slug="submitterSlug"
+            @attached="attachments.push($event)"
+            @start="$refs.areas.scrollIntoField(currentField)"
+            @focus="$refs.areas.scrollIntoField(currentField)"
+            @minimize="isFormVisible = false"
+          />
           <AttachmentStep
             v-else-if="currentField.type === 'file'"
+            :key="currentField.uuid"
             v-model="values[currentField.uuid]"
             :is-direct-upload="isDirectUpload"
             :field="currentField"
@@ -268,6 +257,7 @@
           <PhoneStep
             v-else-if="currentField.type === 'phone'"
             ref="currentStep"
+            :key="currentField.uuid"
             v-model="values[currentField.uuid]"
             :field="currentField"
             :default-value="submitter.phone"
@@ -278,6 +268,7 @@
         </div>
         <div class="mt-6 md:mt-8">
           <button
+            ref="submitButton"
             type="submit"
             class="base-button w-full flex justify-center"
             :disabled="isButtonDisabled"
@@ -298,12 +289,19 @@
               ><span>...</span></span>
             </span>
           </button>
+          <div
+            v-if="showFillAllRequiredFields"
+            class="text-center mt-1"
+          >
+            {{ t('please_fill_all_required_fields') }}
+          </div>
         </div>
       </form>
       <FormCompleted
         v-else
         :is-demo="isDemo"
         :attribution="attribution"
+        :completed-button="completedButton"
         :with-confetti="withConfetti"
         :can-send-email="canSendEmail && !!submitter.email"
         :submitter-slug="submitterSlug"
@@ -315,7 +313,7 @@
             :key="step[0].uuid"
             href="#"
             class="inline border border-base-300 h-3 w-3 rounded-full mx-1"
-            :class="{ 'bg-base-300': index === currentStep, 'bg-base-content': index < currentStep || isCompleted, 'bg-white': index > currentStep }"
+            :class="{ 'bg-base-300': index === currentStep, 'bg-base-content': (index < currentStep && stepFields[index].every((f) => !f.required || ![null, undefined, ''].includes(values[f.uuid]))) || isCompleted, 'bg-white': index > currentStep }"
             @click.prevent="isCompleted ? '' : [saveStep(), goToStep(step, true)]"
           />
         </div>
@@ -328,9 +326,12 @@
 import FieldAreas from './areas'
 import ImageStep from './image_step'
 import SignatureStep from './signature_step'
+import InitialsStep from './initials_step'
 import AttachmentStep from './attachment_step'
 import MultiSelectStep from './multi_select_step'
 import PhoneStep from './phone_step'
+import TextStep from './text_step'
+import DateStep from './date_step'
 import FormCompleted from './completed'
 import { IconInnerShadowTop, IconArrowsDiagonal, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
 import { t } from './i18n'
@@ -342,9 +343,12 @@ export default {
     ImageStep,
     SignatureStep,
     AttachmentStep,
+    InitialsStep,
     MultiSelectStep,
     IconInnerShadowTop,
+    DateStep,
     IconArrowsDiagonal,
+    TextStep,
     PhoneStep,
     IconArrowsDiagonalMinimize2,
     FormCompleted
@@ -370,6 +374,13 @@ export default {
       required: false,
       default: () => []
     },
+    onComplete: {
+      type: Function,
+      required: false,
+      default () {
+        return () => {}
+      }
+    },
     withConfetti: {
       type: Boolean,
       required: false,
@@ -400,6 +411,16 @@ export default {
       required: false,
       default: false
     },
+    allowToSkip: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    goToLast: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     isDemo: {
       type: Boolean,
       required: false,
@@ -414,14 +435,21 @@ export default {
       type: Object,
       required: false,
       default: () => ({})
+    },
+    completedButton: {
+      type: Object,
+      required: false,
+      default: () => ({})
     }
   },
   data () {
     return {
       isCompleted: false,
       isFormVisible: true,
+      showFillAllRequiredFields: false,
       currentStep: 0,
       isSubmitting: false,
+      submittedValues: {},
       recalculateButtonDisabledKey: ''
     }
   },
@@ -432,6 +460,16 @@ export default {
     submitterSlug () {
       return this.submitter.slug
     },
+    previousSignatureValue () {
+      const signatureField = [...this.fields].reverse().find((field) => field.type === 'signature' && !!this.values[field.uuid])
+
+      return this.values[signatureField?.uuid]
+    },
+    previousInitialsValue () {
+      const initialsField = [...this.fields].reverse().find((field) => field.type === 'initials' && !!this.values[field.uuid])
+
+      return this.values[initialsField?.uuid]
+    },
     isAnonymousChecboxes () {
       return this.currentField.type === 'checkbox' && this.currentStepFields.every((e) => !e.name) && this.currentStepFields.length > 4
     },
@@ -439,7 +477,8 @@ export default {
       if (this.recalculateButtonDisabledKey) {
         return this.isSubmitting ||
         (this.currentField.required && ['image', 'file'].includes(this.currentField.type) && !this.values[this.currentField.uuid]?.length) ||
-        (this.currentField.required && this.currentField.type === 'signature' && !this.values[this.currentField.uuid]?.length && this.$refs.currentStep && !this.$refs.currentStep.isSignatureStarted)
+        (this.currentField.required && this.currentField.type === 'signature' && !this.values[this.currentField.uuid]?.length && this.$refs.currentStep && !this.$refs.currentStep.isSignatureStarted) ||
+        (this.currentField.required && this.currentField.type === 'initials' && !this.values[this.currentField.uuid]?.length && this.$refs.currentStep && !this.$refs.currentStep.isInitialsStarted)
       } else {
         return false
       }
@@ -448,7 +487,7 @@ export default {
       return this.currentStepFields[0]
     },
     stepFields () {
-      return this.fields.reduce((acc, f) => {
+      return this.fields.filter((f) => !f.readonly).reduce((acc, f) => {
         const prevStep = acc[acc.length - 1]
 
         if (f.type === 'checkbox' && Array.isArray(prevStep) && prevStep[0].type === 'checkbox') {
@@ -472,10 +511,30 @@ export default {
     }
   },
   mounted () {
-    this.currentStep = Math.min(
+    this.submittedValues = JSON.parse(JSON.stringify(this.values))
-      this.stepFields.indexOf([...this.stepFields].reverse().find((fields) => fields.some((f) => !!this.values[f.uuid]))) + 1,
+
-      this.stepFields.length - 1
+    this.fields.forEach((field) => {
-    )
+      if (field.default_value && !field.readonly) {
+        this.values[field.uuid] = field.default_value
+      }
+    })
+
+    if (this.goToLast) {
+      const requiredEmptyStepIndex = this.stepFields.indexOf(this.stepFields.find((fields) => fields.some((f) => f.required && !this.submittedValues[f.uuid])))
+      const lastFilledStepIndex = this.stepFields.indexOf([...this.stepFields].reverse().find((fields) => fields.some((f) => !!this.submittedValues[f.uuid]))) + 1
+
+      const indexesList = [this.stepFields.length - 1]
+
+      if (requiredEmptyStepIndex !== -1) {
+        indexesList.push(requiredEmptyStepIndex)
+      }
+
+      if (lastFilledStepIndex !== -1) {
+        indexesList.push(lastFilledStepIndex)
+      }
+
+      this.currentStep = Math.min(...indexesList)
+    }
 
     if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
       this.$nextTick(() => {
@@ -494,7 +553,10 @@ export default {
     this.$nextTick(() => {
       this.recalculateButtonDisabledKey = Math.random()
 
-      this.maybeTrackEmailClick().finally(() => {
+      Promise.all([
+        this.maybeTrackEmailClick(),
+        this.maybeTrackSmsClick()
+      ]).finally(() => {
         this.trackViewForm()
       })
     })
@@ -525,6 +587,30 @@ export default {
         return Promise.resolve({})
       }
     },
+    maybeTrackSmsClick () {
+      const queryParams = new URLSearchParams(window.location.search)
+
+      if (queryParams.has('c')) {
+        const c = queryParams.get('c')
+
+        queryParams.delete('c')
+        const newUrl = [window.location.pathname, queryParams.toString()].filter(Boolean).join('?')
+        window.history.replaceState({}, document.title, newUrl)
+
+        return fetch(this.baseUrl + '/api/submitter_sms_clicks', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            c,
+            submitter_slug: this.submitterSlug
+          })
+        })
+      } else {
+        return Promise.resolve({})
+      }
+    },
     trackViewForm () {
       fetch(this.baseUrl + '/api/submitter_form_views', {
         method: 'POST',
@@ -538,6 +624,7 @@ export default {
     },
     goToStep (step, scrollToArea = false, clickUpload = false) {
       this.currentStep = this.stepFields.indexOf(step)
+      this.showFillAllRequiredFields = false
 
       this.$nextTick(() => {
         this.recalculateButtonDisabledKey = Math.random()
@@ -554,26 +641,39 @@ export default {
       })
     },
     saveStep (formData) {
+      const currentFieldUuid = this.currentField.uuid
+
       if (this.isCompleted) {
         return Promise.resolve({})
       } else {
         return fetch(this.baseUrl + this.submitPath, {
           method: 'POST',
           body: formData || new FormData(this.$refs.form)
+        }).then((response) => {
+          if (response.status === 200) {
+            this.submittedValues[currentFieldUuid] = this.values[currentFieldUuid]
+          }
+
+          return response
         })
       }
     },
     async submitStep () {
       this.isSubmitting = true
 
-      const stepPromise = ['signature', 'phone'].includes(this.currentField.type)
+      const stepPromise = ['signature', 'phone', 'initials'].includes(this.currentField.type)
         ? this.$refs.currentStep.submit
         : () => Promise.resolve({})
 
       stepPromise().then(async () => {
-        const formData = new FormData(this.$refs.form)
+        const emptyRequiredField = this.stepFields.find((fields, index) => {
+          return index < this.currentStep && fields[0].required && (fields[0].type === 'phone' || !this.allowToSkip) && !this.submittedValues[fields[0].uuid]
+        })
 
-        if (this.currentStep === this.stepFields.length - 1) {
+        const formData = new FormData(this.$refs.form)
+        const isLastStep = this.currentStep === this.stepFields.length - 1
+
+        if (isLastStep && !emptyRequiredField) {
           formData.append('completed', 'true')
         }
 
@@ -586,12 +686,26 @@ export default {
             return Promise.reject(new Error(data.error))
           }
 
-          const nextStep = this.stepFields[this.currentStep + 1]
+          if (isLastStep) {
+            this.isSecondWalkthrough = true
+          }
+
+          const nextStep = (isLastStep && emptyRequiredField) || this.stepFields[this.currentStep + 1]
 
           if (nextStep) {
-            this.goToStep(this.stepFields[this.currentStep + 1], true)
+            this.goToStep(nextStep, true)
+
+            if (emptyRequiredField === nextStep) {
+              this.showFillAllRequiredFields = true
+            }
           } else {
             this.isCompleted = true
+
+            const respData = await response.text()
+
+            if (respData) {
+              this.onComplete(JSON.parse(respData))
+            }
           }
         }).catch(error => {
           console.error('Error submitting form:', error)

app/javascript/submission_form/i18n.js

@@ -10,9 +10,17 @@ const en = {
   or_drag_and_drop_files: 'or drag and drop files',
   send_copy_via_email: 'Send copy via email',
   download: 'Download',
+  signature: 'Signature',
+  initials: 'Initials',
+  clear: 'Clear',
+  redraw: 'Redraw',
+  draw_initials: 'Draw initials',
+  type_signature_here: 'Type signature here',
+  type_initial_here: 'Type initials here',
   form_has_been_completed: 'Form has been completed!',
   create_a_free_account: 'Create a Free Account',
   signed_with: 'Signed with',
+  please_check_the_box_to_continue: 'Please check the box to continue',
   open_source_documents_software: 'open source documents software',
   verified_phone_number: 'Verify Phone Number',
   use_international_format: 'Use internatioanl format: +1xxx',
@@ -21,6 +29,15 @@ const en = {
   sending: 'Sending...',
   resend_code: 'Re-send code',
   verification_code_has_been_resent: 'Verification code has been re-sent via SMS',
+  please_fill_all_required_fields: 'Please fill all required fields',
+  set_today: 'Set Today',
+  toggle_multiline_text: 'Toggle Multiline Text',
+  draw_signature: 'Draw signature',
+  type_initial: 'Type initials',
+  draw: 'Draw',
+  type: 'Type',
+  type_text: 'Type text',
+  date: 'Date',
   email_has_been_sent: 'Email has been sent'
 }
 
@@ -36,9 +53,17 @@ const es = {
   or_drag_and_drop_files: 'o arrastra y suelta archivos',
   send_copy_via_email: 'Enviar copia por correo electrónico',
   download: 'Descargar',
+  signature: 'Firma',
+  initials: 'Iniciales',
+  clear: 'Borrar',
+  redraw: 'Redibujar',
+  draw_initials: 'Dibujar iniciales',
+  type_signature_here: 'Escribe la firma aquí',
+  type_initial_here: 'Escribe las iniciales aquí',
   form_has_been_completed: '¡El formulario ha sido completado!',
   create_a_free_account: 'Crear una Cuenta Gratuita',
   signed_with: 'Firmado con',
+  please_check_the_box_to_continue: 'Por favor marque la casilla para continuar',
   open_source_documents_software: 'software de documentos de código abierto',
   verified_phone_number: 'Verificar número de teléfono',
   use_international_format: 'Usar formato internacional: +1xxx',
@@ -47,6 +72,15 @@ const es = {
   sending: 'Enviando...',
   resend_code: 'Reenviar código',
   verification_code_has_been_resent: 'El código de verificación ha sido reenviado por SMS',
+  please_fill_all_required_fields: 'Por favor, complete todos los campos obligatorios',
+  set_today: 'Establecer Hoy',
+  date: 'Fecha',
+  toggle_multiline_text: 'Alternar Texto Multilínea',
+  draw_signature: 'Dibujar firma',
+  type_initial: 'Escribir iniciales',
+  draw: 'Dibujar',
+  type: 'Escribir',
+  type_text: 'Escribir texto',
   email_has_been_sent: 'El correo electrónico ha sido enviado'
 }
 
@@ -62,9 +96,17 @@ const it = {
   or_drag_and_drop_files: 'oppure trascina e rilascia i file',
   send_copy_via_email: 'Invia copia via email',
   download: 'Scarica',
+  signature: 'Firma',
+  initials: 'Iniziali',
+  clear: 'Cancella',
+  redraw: 'Ridisegna',
+  draw_initials: 'Disegna iniziali',
+  type_signature_here: 'Scrivi la firma qui',
+  type_initial_here: 'Scrivi le iniziali qui',
   form_has_been_completed: 'Il modulo è stato completato!',
   create_a_free_account: 'Crea un Account Gratuito',
   signed_with: 'Firmato con',
+  please_check_the_box_to_continue: 'Si prega di spuntare la casella per continuare',
   open_source_documents_software: 'software di documenti open source',
   verified_phone_number: 'Verifica numero di telefono',
   use_international_format: 'Usa formato internazionale: +1xxx',
@@ -73,6 +115,15 @@ const it = {
   sending: 'Invio in corso...',
   resend_code: 'Rinvia codice',
   verification_code_has_been_resent: 'Il codice di verifica è stato rinviato tramite SMS',
+  please_fill_all_required_fields: 'Si prega di compilare tutti i campi obbligatori',
+  set_today: 'Imposta Oggi',
+  date: 'Data',
+  draw_signature: 'Disegna firma',
+  type_initial: 'Inserisci iniziali',
+  draw: 'Disegna',
+  type: 'Inserisci',
+  type_text: 'Inserisci testo',
+  toggle_multiline_text: 'Attiva Testo Multilinea',
   email_has_been_sent: "L'email è stata inviata"
 }
 
@@ -88,9 +139,17 @@ const de = {
   or_drag_and_drop_files: 'oder Dateien hierher ziehen und ablegen',
   send_copy_via_email: 'Kopie per E-Mail senden',
   download: 'Herunterladen',
+  signature: 'Unterschrift',
+  initials: 'Initialen',
+  clear: 'Löschen',
+  redraw: 'Neu zeichnen',
+  draw_initials: 'Initialen zeichnen',
+  type_signature_here: 'Unterschrift hier eingeben',
+  type_initial_here: 'Initialen hier eingeben',
   form_has_been_completed: 'Formular wurde ausgefüllt!',
   create_a_free_account: 'Kostenloses Konto erstellen',
   signed_with: 'Unterschrieben mit',
+  please_check_the_box_to_continue: 'Bitte setzen Sie das Häkchen, um fortzufahren',
   open_source_documents_software: 'Open-Source-Dokumentensoftware',
   verified_phone_number: 'Telefonnummer überprüfen',
   use_international_format: 'Internationales Format verwenden: +1xxx',
@@ -99,6 +158,15 @@ const de = {
   sending: 'Senden...',
   resend_code: 'Code erneut senden',
   verification_code_has_been_resent: 'Die Verifizierungscode wurde erneut per SMS gesendet',
+  please_fill_all_required_fields: 'Bitte füllen Sie alle erforderlichen Felder aus',
+  set_today: 'Heute einstellen',
+  date: 'Datum',
+  draw_signature: 'Unterschrift zeichnen',
+  type_initial: 'Initialen eingeben',
+  draw: 'Zeichnen',
+  type: 'Eingeben',
+  type_text: 'Text eingeben',
+  toggle_multiline_text: 'Mehrzeiligen Text umschalten',
   email_has_been_sent: 'Die E-Mail wurde gesendet'
 }
 
@@ -114,9 +182,17 @@ const fr = {
   or_drag_and_drop_files: 'ou faites glisser-déposer les fichiers',
   send_copy_via_email: 'Envoyer une copie par e-mail',
   download: 'Télécharger',
+  signature: 'Signature',
+  initials: 'Initiales',
+  clear: 'Effacer',
+  redraw: 'Redessiner',
+  draw_initials: 'Dessiner les initiales',
+  type_signature_here: 'Tapez la signature ici',
+  type_initial_here: 'Tapez les initiales ici',
   form_has_been_completed: 'Le formulaire a été complété !',
   create_a_free_account: 'Créer un Compte Gratuit',
   signed_with: 'Signé avec',
+  please_check_the_box_to_continue: 'Veuillez cocher la case pour continuer',
   open_source_documents_software: 'logiciel de documents open source',
   verified_phone_number: 'Vérifier le numéro de téléphone',
   use_international_format: 'Utiliser le format international : +1xxx',
@@ -125,6 +201,15 @@ const fr = {
   sending: 'Envoi en cours...',
   resend_code: 'Renvoyer le code',
   verification_code_has_been_resent: 'Le code de vérification a été renvoyé par SMS',
+  please_fill_all_required_fields: 'Veuillez remplir tous les champs obligatoires',
+  set_today: "Définir Aujourd'hui",
+  date: 'Date',
+  draw_signature: 'Dessiner une signature',
+  type_initial: 'Saisir les initiales',
+  draw: 'Dessiner',
+  type: 'Saisir',
+  type_text: 'Saisir du texte',
+  toggle_multiline_text: 'Basculer le Texte Multiligne',
   email_has_been_sent: "L'email a été envoyé"
 }
 
@@ -140,9 +225,17 @@ const pl = {
   or_drag_and_drop_files: 'lub przeciągnij i upuść pliki',
   send_copy_via_email: 'Wyślij kopię drogą mailową',
   download: 'Pobierz',
+  signature: 'Podpis',
+  initials: 'Inicjały',
+  clear: 'Wyczyść',
+  redraw: 'Przerysuj',
+  draw_initials: 'Narysuj inicjały',
+  type_signature_here: 'Wpisz podpis tutaj',
+  type_initial_here: 'Wpisz inicjały tutaj',
   form_has_been_completed: 'Formularz został wypełniony!',
   create_a_free_account: 'Utwórz darmowe konto',
   signed_with: 'Podpisane za pomocą',
+  please_check_the_box_to_continue: 'Proszę zaznaczyć pole, aby kontynuować',
   open_source_documents_software: 'oprogramowanie do dokumentów open source',
   verified_phone_number: 'Zweryfikuj numer telefonu',
   use_international_format: 'Użyj międzynarodowego formatu: +1xxx',
@@ -151,6 +244,15 @@ const pl = {
   sending: 'Wysyłanie...',
   resend_code: 'Ponownie wyślij kod',
   verification_code_has_been_resent: 'Kod weryfikacyjny został ponownie wysłany',
+  please_fill_all_required_fields: 'Proszę wypełnić wszystkie wymagane pola',
+  set_today: 'Ustaw Dziś',
+  date: 'Data',
+  draw_signature: 'Rysuj podpis',
+  type_initial: 'Wprowadź inicjały',
+  draw: 'Rysuj',
+  type: 'Wprowadź',
+  type_text: 'Wprowadź tekst',
+  toggle_multiline_text: 'Przełącz Tekst Wielolinijkowy',
   email_has_been_sent: 'E-mail został wysłany'
 }
 
@@ -166,9 +268,17 @@ const uk = {
   or_drag_and_drop_files: 'або перетягніть файли сюди',
   send_copy_via_email: 'Надіслати копію електронною поштою',
   download: 'Завантажити',
+  signature: 'Підпис',
+  initials: 'Ініціали',
+  clear: 'Очистити',
+  redraw: 'Перемалювати',
+  draw_initials: 'Намалювати ініціали',
+  type_signature_here: 'Введіть підпис тут',
+  type_initial_here: 'Введіть ініціали тут',
   form_has_been_completed: 'Форму заповнено!',
   create_a_free_account: 'Створити безкоштовний обліковий запис',
   signed_with: 'Підписано за допомогою',
+  please_check_the_box_to_continue: 'Будь ласка, позначте прапорець, щоб продовжити',
   open_source_documents_software: 'відкритий програмний засіб для документів',
   verified_phone_number: 'Підтвердіть номер телефону',
   use_international_format: 'Використовуйте міжнародний формат: +1xxx',
@@ -177,6 +287,15 @@ const uk = {
   sending: 'Надсилаю...',
   resend_code: 'Повторно відправити код',
   verification_code_has_been_resent: 'Код підтвердження був повторно надісланий',
+  please_fill_all_required_fields: "Будь ласка, заповніть всі обов'язкові поля",
+  set_today: 'Задати Сьогодні',
+  date: 'Дата',
+  draw_signature: 'Намалюйте підпис',
+  type_initial: 'Введіть ініціали',
+  draw: 'Підпис',
+  type: 'Текст',
+  type_text: 'Введіть текст',
+  toggle_multiline_text: 'Перемкнути Багаторядковий Текст',
   email_has_been_sent: 'Електронний лист був відправлений'
 }
 
@@ -192,9 +311,17 @@ const cs = {
   or_drag_and_drop_files: 'nebo přetáhněte soubory sem',
   send_copy_via_email: 'Odeslat kopii e-mailem',
   download: 'Stáhnout',
+  signature: 'Podpis',
+  initials: 'Iniciály',
+  clear: 'Smazat',
+  redraw: 'Překreslit',
+  draw_initials: 'Nakreslit iniciály',
+  type_signature_here: 'Sem zadejte podpis',
+  type_initial_here: 'Sem zadejte iniciály',
   form_has_been_completed: 'Formulář byl dokončen!',
   create_a_free_account: 'Vytvořit bezplatný účet',
   signed_with: 'Podepsáno pomocí',
+  please_check_the_box_to_continue: 'Prosím, zaškrtněte políčko pro pokračování',
   open_source_documents_software: 'open source software pro dokumenty',
   verified_phone_number: 'Ověřte telefonní číslo',
   use_international_format: 'Použijte mezinárodní formát: +1xxx',
@@ -203,6 +330,15 @@ const cs = {
   sending: 'Odesílání...',
   resend_code: 'Znovu odeslat kód',
   verification_code_has_been_resent: 'Ověřovací kód byl znovu odeslán',
+  please_fill_all_required_fields: 'Prosím vyplňte všechny povinné položky',
+  set_today: 'Nastavit Dnes',
+  date: 'Datum',
+  draw_signature: 'Nakreslit podpis',
+  type_initial: 'Zadat iniciály',
+  draw: 'Kreslit',
+  type: 'Zadat',
+  type_text: 'Zadat text',
+  toggle_multiline_text: 'Přepnout Víceřádkový Text',
   email_has_been_sent: 'E-mail byl odeslán'
 }
 
@@ -218,9 +354,17 @@ const pt = {
   or_drag_and_drop_files: 'ou arraste e solte arquivos',
   send_copy_via_email: 'Enviar cópia por e-mail',
   download: 'Baixar',
+  signature: 'Assinatura',
+  initials: 'Iniciais',
+  clear: 'Limpar',
+  redraw: 'Redesenhar',
+  draw_initials: 'Desenhar iniciais',
+  type_signature_here: 'Digite a assinatura aqui',
+  type_initial_here: 'Digite as iniciais aqui',
   form_has_been_completed: 'O formulário foi concluído!',
   create_a_free_account: 'Criar uma Conta Gratuita',
   signed_with: 'Assinado com',
+  please_check_the_box_to_continue: 'Por favor, marque a caixa para continuar',
   open_source_documents_software: 'software de documentos de código aberto',
   verified_phone_number: 'Verificar Número de Telefone',
   use_international_format: 'Use formato internacional: +1xxx',
@@ -229,6 +373,15 @@ const pt = {
   sending: 'Enviando...',
   resend_code: 'Reenviar código',
   verification_code_has_been_resent: 'O código de verificação foi reenviado via SMS',
+  please_fill_all_required_fields: 'Por favor, preencha todos os campos obrigatórios',
+  set_today: 'Definir Hoje',
+  date: 'Data',
+  draw_signature: 'Desenhar assinatura',
+  type_initial: 'Inserir iniciais',
+  draw: 'Desenhar',
+  type: 'Inserir',
+  type_text: 'Inserir texto',
+  toggle_multiline_text: 'Alternar Texto Multilinha',
   email_has_been_sent: 'Email enviado'
 }
 

app/javascript/submission_form/initials_step.vue

@@ -0,0 +1,290 @@
+<template>
+  <div>
+    <div class="flex justify-between items-center w-full mb-2">
+      <label
+        class="label text-2xl"
+      >{{ field.name || t('initials') }}</label>
+      <div class="space-x-2 flex">
+        <span
+          v-if="isDrawInitials"
+          class="tooltip"
+          :data-tip="t('type_initials')"
+        >
+          <a
+            id="type_text_button"
+            href="#"
+            class="btn btn-outline font-medium btn-sm"
+            @click.prevent="toggleTextInput"
+          >
+            <IconTextSize :width="16" />
+            <span class="hidden sm:inline">
+              {{ t('type') }}
+            </span>
+          </a>
+        </span>
+        <span
+          v-else
+          class="tooltip"
+          :data-tip="t('draw_initials')"
+        >
+          <a
+            id="type_text_button"
+            href="#"
+            class="btn btn-outline font-medium btn-sm"
+            @click.prevent="toggleTextInput"
+          >
+            <IconSignature :width="16" />
+            <span class="hidden sm:inline">
+              {{ t('draw') }}
+            </span>
+          </a>
+        </span>
+        <a
+          v-if="modelValue || computedPreviousValue"
+          href="#"
+          class="btn font-medium btn-outline btn-sm"
+          @click.prevent="remove"
+        >
+          <IconReload :width="16" />
+          {{ t('clear') }}
+        </a>
+        <a
+          v-else
+          href="#"
+          class="btn font-medium btn-outline btn-sm"
+          @click.prevent="clear"
+        >
+          <IconReload :width="16" />
+          {{ t('clear') }}
+        </a>
+        <a
+          title="Minimize"
+          href="#"
+          class="py-1.5 inline md:hidden"
+          @click.prevent="$emit('minimize')"
+        >
+          <IconArrowsDiagonalMinimize2
+            :width="20"
+            :height="20"
+          />
+        </a>
+      </div>
+    </div>
+    <input
+      :value="modelValue || computedPreviousValue"
+      type="hidden"
+      :name="`values[${field.uuid}]`"
+    >
+    <img
+      v-if="modelValue || computedPreviousValue"
+      :src="attachmentsIndex[modelValue || computedPreviousValue].url"
+      class="mx-auto bg-white border border-base-300 rounded max-h-72"
+    >
+    <canvas
+      v-show="!modelValue && !computedPreviousValue"
+      ref="canvas"
+      class="bg-white border border-base-300 rounded-2xl"
+    />
+    <input
+      v-if="!isDrawInitials && !modelValue && !computedPreviousValue"
+      id="initials_text_input"
+      ref="textInput"
+      class="base-input !text-2xl w-full mt-6 text-center"
+      :required="field.required && !isInitialsStarted"
+      :placeholder="`${t('type_initial_here')}...`"
+      type="text"
+      @focus="$emit('focus')"
+      @input="updateWrittenInitials"
+    >
+  </div>
+</template>
+
+<script>
+import { cropCanvasAndExportToPNG } from './crop_canvas'
+import { IconReload, IconTextSize, IconSignature, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
+import SignaturePad from 'signature_pad'
+
+export default {
+  name: 'InitialsStep',
+  components: {
+    IconReload,
+    IconTextSize,
+    IconSignature,
+    IconArrowsDiagonalMinimize2
+  },
+  inject: ['baseUrl', 't'],
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    submitterSlug: {
+      type: String,
+      required: true
+    },
+    isDirectUpload: {
+      type: Boolean,
+      required: true,
+      default: false
+    },
+    attachmentsIndex: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    previousValue: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    modelValue: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  emits: ['attached', 'update:model-value', 'start', 'minimize', 'focus'],
+  data () {
+    return {
+      isInitialsStarted: !!this.previousValue,
+      isUsePreviousValue: true,
+      isDrawInitials: false
+    }
+  },
+  computed: {
+    computedPreviousValue () {
+      if (this.isUsePreviousValue) {
+        return this.previousValue
+      } else {
+        return null
+      }
+    }
+  },
+  async mounted () {
+    this.$nextTick(() => {
+      if (this.$refs.canvas) {
+        this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth
+        this.$refs.canvas.height = this.$refs.canvas.parentNode.clientWidth / 5
+      }
+
+      this.$refs.textInput?.focus()
+    })
+
+    if (this.isDirectUpload) {
+      import('@rails/activestorage')
+    }
+
+    if (this.$refs.canvas) {
+      this.pad = new SignaturePad(this.$refs.canvas)
+
+      this.pad.addEventListener('beginStroke', () => {
+        this.isInitialsStarted = true
+
+        this.$emit('start')
+      })
+    }
+  },
+  methods: {
+    remove () {
+      this.$emit('update:model-value', '')
+
+      this.isUsePreviousValue = false
+      this.isInitialsStarted = false
+    },
+    clear () {
+      this.pad.clear()
+
+      this.isInitialsStarted = false
+
+      if (this.$refs.textInput) {
+        this.$refs.textInput.value = ''
+      }
+    },
+    updateWrittenInitials (e) {
+      this.isInitialsStarted = true
+
+      const canvas = this.$refs.canvas
+      const context = canvas.getContext('2d')
+
+      const fontFamily = 'Arial'
+      const fontSize = '44px'
+      const fontStyle = 'italic'
+      const fontWeight = ''
+
+      context.font = fontStyle + ' ' + fontWeight + ' ' + fontSize + ' ' + fontFamily
+      context.textAlign = 'center'
+
+      context.clearRect(0, 0, canvas.width, canvas.height)
+      context.fillText(e.target.value, canvas.width / 2, canvas.height / 2 + 11)
+    },
+    toggleTextInput () {
+      this.remove()
+      this.clear()
+      this.isDrawInitials = !this.isDrawInitials
+
+      if (!this.isDrawInitials) {
+        this.$nextTick(() => {
+          this.$refs.textInput.focus()
+
+          this.$emit('start')
+        })
+      }
+    },
+    async submit () {
+      if (this.modelValue || this.computedPreviousValue) {
+        if (this.computedPreviousValue) {
+          this.$emit('update:model-value', this.computedPreviousValue)
+        }
+
+        return Promise.resolve({})
+      }
+
+      return new Promise((resolve) => {
+        cropCanvasAndExportToPNG(this.$refs.canvas).then(async (blob) => {
+          const file = new File([blob], 'initials.png', { type: 'image/png' })
+
+          if (this.isDirectUpload) {
+            const { DirectUpload } = await import('@rails/activestorage')
+
+            new DirectUpload(
+              file,
+              '/direct_uploads'
+            ).create((_error, data) => {
+              fetch(this.baseUrl + '/api/attachments', {
+                method: 'POST',
+                body: JSON.stringify({
+                  submitter_slug: this.submitterSlug,
+                  blob_signed_id: data.signed_id,
+                  name: 'attachments'
+                }),
+                headers: { 'Content-Type': 'application/json' }
+              }).then((resp) => resp.json()).then((attachment) => {
+                this.$emit('update:model-value', attachment.uuid)
+                this.$emit('attached', attachment)
+
+                return resolve(attachment)
+              })
+            })
+          } else {
+            const formData = new FormData()
+
+            formData.append('file', file)
+            formData.append('submitter_slug', this.submitterSlug)
+            formData.append('name', 'attachments')
+
+            return fetch(this.baseUrl + '/api/attachments', {
+              method: 'POST',
+              body: formData
+            }).then((resp) => resp.json()).then((attachment) => {
+              this.$emit('attached', attachment)
+              this.$emit('update:model-value', attachment.uuid)
+
+              return resolve(attachment)
+            })
+          }
+        })
+      })
+    }
+  }
+}
+</script>

app/javascript/submission_form/multi_select_step.vue

@@ -7,25 +7,25 @@
   <div class="flex w-full">
     <div class="space-y-3.5 mx-auto">
       <div
-        v-for="(option, index) in field.options"
+        v-for="option in field.options"
-        :key="index"
+        :key="option.uuid"
       >
         <label
-          :for="field.uuid + option"
+          :for="option.uuid"
           class="flex items-center space-x-3"
         >
           <input
-            :id="field.uuid + option"
+            :id="option.uuid"
             :ref="setInputRef"
             type="checkbox"
             :name="`values[${field.uuid}][]`"
-            :value="option"
+            :value="option.value"
             class="base-checkbox !h-7 !w-7"
-            :checked="modelValue.includes(option)"
+            :checked="(modelValue || []).includes(option.value)"
             @change="onChange"
           >
           <span class="text-xl">
-            {{ option }}
+            {{ option.value }}
           </span>
         </label>
       </div>

app/javascript/submission_form/phone_step.vue

@@ -28,6 +28,7 @@
         >
         <div class="flex justify-between mt-2 -mb-2 md:-mb-4">
           <a
+            v-if="!defaultValue"
             href="#"
             class="link"
             @click.prevent="isCodeSent = false"
@@ -48,6 +49,7 @@
         :id="field.uuid"
         ref="phone"
         :value="modelValue || defaultValue"
+        :readonly="!!defaultValue"
         class="base-input !text-2xl w-full"
         autocomplete="tel"
         pattern="^\+[0-9\s\-]+$"

app/javascript/submission_form/signature_step.vue

@@ -3,27 +3,48 @@
     <div class="flex justify-between items-center w-full mb-2">
       <label
         class="label text-2xl"
-      >{{ field.name || 'Signature' }}</label>
+      >{{ field.name || t('signature') }}</label>
       <div class="space-x-2 flex">
         <span
+          v-if="isTextSignature"
           class="tooltip"
-          data-tip="Type text"
+          :data-tip="t('draw_signature')"
         >
-          <button
+          <a
             id="type_text_button"
-            class="btn btn-sm btn-circle"
+            href="#"
-            :class="{ 'btn-neutral': isTextSignature, 'btn-outline': !isTextSignature }"
+            class="btn btn-outline btn-sm font-medium"
+            @click.prevent="toggleTextInput"
+          >
+            <IconSignature :width="16" />
+            <span class="hidden sm:inline">
+              {{ t('draw') }}
+            </span>
+          </a>
+        </span>
+        <span
+          v-else
+          class="tooltip"
+          :data-tip="t('type_text')"
+        >
+          <a
+            id="type_text_button"
+            href="#"
+            class="btn btn-outline btn-sm font-medium"
             @click.prevent="toggleTextInput"
           >
             <IconTextSize :width="16" />
-          </button>
+            <span class="hidden sm:inline">
+              {{ t('type') }}
+            </span>
+          </a>
         </span>
         <span
           class="tooltip"
           data-tip="Take photo"
         >
           <label
-            class="btn btn-outline btn-sm btn-circle"
+            class="btn btn-outline btn-sm font-medium"
           >
             <IconCamera :width="16" />
             <input
@@ -32,25 +53,31 @@
               accept="image/*"
               @change="drawImage"
             >
+            <span class="hidden sm:inline">
+              {{ t('upload') }}
+            </span>
           </label>
         </span>
-        <button
+        <a
-          v-if="modelValue"
+          v-if="modelValue || computedPreviousValue"
-          class="btn btn-outline btn-sm"
+          href="#"
+          class="btn btn-outline btn-sm font-medium"
           @click.prevent="remove"
         >
           <IconReload :width="16" />
-          Redraw
+          {{ t('redraw') }}
-        </button>
+        </a>
-        <button
+        <a
           v-else
-          class="btn btn-outline btn-sm"
+          href="#"
+          class="btn btn-outline btn-sm font-medium"
           @click.prevent="clear"
         >
           <IconReload :width="16" />
-          Clear
+          {{ t('clear') }}
-        </button>
+        </a>
-        <button
+        <a
+          href="#"
           title="Minimize"
           class="py-1.5 inline md:hidden"
           @click.prevent="$emit('minimize')"
@@ -59,23 +86,24 @@
             :width="20"
             :height="20"
           />
-        </button>
+        </a>
       </div>
     </div>
     <input
-      :value="modelValue"
+      :value="modelValue || computedPreviousValue"
       type="hidden"
       :name="`values[${field.uuid}]`"
     >
     <img
-      v-if="modelValue"
+      v-if="modelValue || computedPreviousValue"
-      :src="attachmentsIndex[modelValue].url"
+      :src="attachmentsIndex[modelValue || computedPreviousValue].url"
       class="mx-auto bg-white border border-base-300 rounded max-h-72"
     >
     <canvas
-      v-show="!modelValue"
+      v-show="!modelValue && !computedPreviousValue"
       ref="canvas"
-      class="bg-white border border-base-300 rounded"
+      style="padding: 1px; 0"
+      class="bg-white border border-base-300 rounded-2xl"
     />
     <input
       v-if="isTextSignature"
@@ -83,7 +111,7 @@
       ref="textInput"
       class="base-input !text-2xl w-full mt-6"
       :required="field.required"
-      :placeholder="`Type signature here...`"
+      :placeholder="`${t('type_signature_here')}...`"
       type="text"
       @input="updateWrittenSignature"
     >
@@ -91,7 +119,11 @@
 </template>
 
 <script>
-import { IconReload, IconCamera, IconTextSize, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
+import { IconReload, IconCamera, IconSignature, IconTextSize, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
+import { cropCanvasAndExportToPNG } from './crop_canvas'
+import SignaturePad from 'signature_pad'
+
+let isFontLoaded = false
 
 export default {
   name: 'SignatureStep',
@@ -99,9 +131,10 @@ export default {
     IconReload,
     IconCamera,
     IconTextSize,
+    IconSignature,
     IconArrowsDiagonalMinimize2
   },
-  inject: ['baseUrl'],
+  inject: ['baseUrl', 't'],
   props: {
     field: {
       type: Object,
@@ -121,6 +154,11 @@ export default {
       required: false,
       default: () => ({})
     },
+    previousValue: {
+      type: String,
+      required: false,
+      default: ''
+    },
     modelValue: {
       type: String,
       required: false,
@@ -130,33 +168,61 @@ export default {
   emits: ['attached', 'update:model-value', 'start', 'minimize'],
   data () {
     return {
-      isSignatureStarted: false,
+      isSignatureStarted: !!this.previousValue,
+      isUsePreviousValue: true,
       isTextSignature: false
     }
   },
+  computed: {
+    computedPreviousValue () {
+      if (this.isUsePreviousValue) {
+        return this.previousValue
+      } else {
+        return null
+      }
+    }
+  },
   async mounted () {
     this.$nextTick(() => {
-      this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth
+      if (this.$refs.canvas) {
-      this.$refs.canvas.height = this.$refs.canvas.parentNode.clientWidth / 3
+        this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth
+        this.$refs.canvas.height = this.$refs.canvas.parentNode.clientWidth / 3
+      }
     })
 
     if (this.isDirectUpload) {
       import('@rails/activestorage')
     }
 
-    const { default: SignaturePad } = await import('signature_pad')
+    if (this.$refs.canvas) {
+      this.pad = new SignaturePad(this.$refs.canvas)
 
-    this.pad = new SignaturePad(this.$refs.canvas)
+      this.pad.addEventListener('beginStroke', () => {
+        this.isSignatureStarted = true
 
-    this.pad.addEventListener('beginStroke', () => {
+        this.$emit('start')
-      this.isSignatureStarted = true
+      })
-
+    }
-      this.$emit('start')
-    })
   },
   methods: {
     remove () {
       this.$emit('update:model-value', '')
+
+      this.isUsePreviousValue = false
+      this.isSignatureStarted = false
+    },
+    loadFont () {
+      if (!isFontLoaded) {
+        const font = new FontFace('Dancing Script', `url(${this.baseUrl}/fonts/DancingScript.otf) format("opentype")`)
+
+        font.load().then((loadedFont) => {
+          document.fonts.add(loadedFont)
+
+          isFontLoaded = true
+        }).catch((error) => {
+          console.error('Font loading failed:', error)
+        })
+      }
     },
     clear () {
       this.pad.clear()
@@ -173,8 +239,8 @@ export default {
       const canvas = this.$refs.canvas
       const context = canvas.getContext('2d')
 
-      const fontFamily = 'Arial'
+      const fontFamily = 'Dancing Script'
-      const fontSize = '44px'
+      const fontSize = '38px'
       const fontStyle = 'italic'
       const fontWeight = ''
 
@@ -192,6 +258,8 @@ export default {
         this.$nextTick(() => {
           this.$refs.textInput.focus()
 
+          this.loadFont()
+
           this.$emit('start')
         })
       }
@@ -244,60 +312,17 @@ export default {
         reader.readAsDataURL(file)
       }
     },
-    cropCanvasAndExportToPNG (canvas) {
-      const ctx = canvas.getContext('2d')
-
-      const width = canvas.width
-      const height = canvas.height
-
-      let topmost = height
-      let bottommost = 0
-      let leftmost = width
-      let rightmost = 0
-
-      const imageData = ctx.getImageData(0, 0, width, height)
-      const pixels = imageData.data
-
-      for (let y = 0; y < height; y++) {
-        for (let x = 0; x < width; x++) {
-          const pixelIndex = (y * width + x) * 4
-          const alpha = pixels[pixelIndex + 3]
-          if (alpha !== 0) {
-            topmost = Math.min(topmost, y)
-            bottommost = Math.max(bottommost, y)
-            leftmost = Math.min(leftmost, x)
-            rightmost = Math.max(rightmost, x)
-          }
-        }
-      }
-
-      const croppedWidth = rightmost - leftmost + 1
-      const croppedHeight = bottommost - topmost + 1
-
-      const croppedCanvas = document.createElement('canvas')
-      croppedCanvas.width = croppedWidth
-      croppedCanvas.height = croppedHeight
-      const croppedCtx = croppedCanvas.getContext('2d')
-
-      croppedCtx.drawImage(canvas, leftmost, topmost, croppedWidth, croppedHeight, 0, 0, croppedWidth, croppedHeight)
-
-      return new Promise((resolve, reject) => {
-        croppedCanvas.toBlob((blob) => {
-          if (blob) {
-            resolve(blob)
-          } else {
-            reject(new Error('Failed to create a PNG blob.'))
-          }
-        }, 'image/png')
-      })
-    },
     async submit () {
-      if (this.modelValue) {
+      if (this.modelValue || this.computedPreviousValue) {
+        if (this.computedPreviousValue) {
+          this.$emit('update:model-value', this.computedPreviousValue)
+        }
+
         return Promise.resolve({})
       }
 
       return new Promise((resolve) => {
-        this.cropCanvasAndExportToPNG(this.$refs.canvas).then(async (blob) => {
+        cropCanvasAndExportToPNG(this.$refs.canvas).then(async (blob) => {
           const file = new File([blob], 'signature.png', { type: 'image/png' })
 
           if (this.isDirectUpload) {

app/javascript/submission_form/text_step.vue

@@ -0,0 +1,134 @@
+<template>
+  <label
+    v-if="field.name"
+    :for="field.uuid"
+    class="label text-2xl mb-2"
+  >{{ field.name }}
+    <template v-if="!field.required">({{ t('optional') }})</template>
+  </label>
+  <div
+    v-else
+    class="py-1"
+  />
+  <div class="items-center flex">
+    <input
+      v-if="!isTextArea"
+      :id="field.uuid"
+      v-model="text"
+      :maxlength="cellsMaxLegth"
+      class="base-input !text-2xl w-full !pr-11 -mr-10"
+      :required="field.required"
+      :pattern="field.validation?.pattern"
+      :oninvalid="field.validation?.message ? `this.setCustomValidity(${JSON.stringify(field.validation.message)})` : ''"
+      :oninput="field.validation?.message ? `this.setCustomValidity('')` : ''"
+      :placeholder="`${t('type_here')}...${field.required ? '' : ` (${t('optional')})`}`"
+      type="text"
+      :name="`values[${field.uuid}]`"
+      @focus="$emit('focus')"
+    >
+    <textarea
+      v-if="isTextArea"
+      :id="field.uuid"
+      ref="textarea"
+      v-model="text"
+      class="base-textarea !text-2xl w-full"
+      :placeholder="`${t('type_here')}...${field.required ? '' : ` (${t('optional')})`}`"
+      :required="field.required"
+      :name="`values[${field.uuid}]`"
+      @input="resizeTextarea"
+      @focus="$emit('focus')"
+    />
+    <div
+      v-if="!isTextArea && field.type !== 'cells'"
+      class="tooltip"
+      :data-tip="t('toggle_multiline_text')"
+    >
+      <a
+        href="#"
+        class="btn btn-ghost btn-circle btn-sm"
+        @click.prevent="toggleTextArea"
+      >
+        <IconAlignBoxLeftTop />
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+import { IconAlignBoxLeftTop } from '@tabler/icons-vue'
+
+export default {
+  name: 'TextStep',
+  components: {
+    IconAlignBoxLeftTop
+  },
+  inject: ['t'],
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    modelValue: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  emits: ['update:model-value', 'focus'],
+  data () {
+    return {
+      isTextArea: false
+    }
+  },
+  computed: {
+    cellsMaxLegth () {
+      if (this.field.type === 'cells') {
+        const area = this.field.areas?.[0]
+
+        if (area) {
+          return parseInt(area.w / area.cell_w) + 1
+        } else {
+          return null
+        }
+      } else {
+        return null
+      }
+    },
+    text: {
+      set (value) {
+        this.$emit('update:model-value', value)
+      },
+      get () {
+        return this.modelValue
+      }
+    }
+  },
+  mounted () {
+    this.isTextArea = this.modelValue?.includes('\n')
+
+    if (this.isTextArea) {
+      this.$nextTick(() => {
+        this.resizeTextarea()
+      })
+    }
+  },
+  methods: {
+    resizeTextarea () {
+      const textarea = this.$refs.textarea
+
+      textarea.style.height = 'auto'
+      textarea.style.height = textarea.scrollHeight + 'px'
+    },
+    toggleTextArea () {
+      this.isTextArea = true
+
+      this.$nextTick(() => {
+        this.$refs.textarea.focus()
+        this.$refs.textarea.setSelectionRange(this.$refs.textarea.value.length, this.$refs.textarea.value.length)
+
+        this.resizeTextarea()
+      })
+    }
+  }
+}
+</script>

app/javascript/template_builder/area.vue

@@ -4,6 +4,7 @@
     :style="positionStyle"
     @pointerdown.stop
     @mousedown.stop="startDrag"
+    @touchstart="startTouchDrag"
   >
     <div
       v-if="isSelected || isDraw"
@@ -22,7 +23,7 @@
         :style="{ left: (cellW / area.w * 100) + '%' }"
       >
         <span
-          v-if="index === 0"
+          v-if="index === 0 && editable"
           class="h-2.5 w-2.5 rounded-full -bottom-1 border-gray-400 bg-white shadow-md border absolute cursor-ew-resize z-10"
           style="left: -4px"
           @mousedown.stop="startResizeCell"
@@ -32,7 +33,7 @@
     <div
       v-if="field?.type"
       class="absolute bg-white rounded-t border overflow-visible whitespace-nowrap group-hover:flex group-hover:z-10"
-      :class="{ 'flex z-10': isNameFocus || isSelected, hidden: !isNameFocus && !isSelected }"
+      :class="{ 'flex z-10': isNameFocus || isSelected, invisible: !isNameFocus && !isSelected }"
       style="top: -25px; height: 25px"
       @mousedown.stop
       @pointerdown.stop
@@ -41,6 +42,7 @@
         v-model="field.submitter_uuid"
         class="border-r"
         :compact="true"
+        :editable="editable"
         :menu-classes="'dropdown-content bg-white menu menu-xs p-2 shadow rounded-box w-52 rounded-t-none -left-[1px]'"
         :submitters="template.submitters"
         @update:model-value="save"
@@ -49,6 +51,7 @@
       <FieldType
         v-model="field.type"
         :button-width="27"
+        :editable="editable"
         :button-classes="'px-1'"
         :menu-classes="'bg-white rounded-t-none'"
         @update:model-value="[maybeUpdateOptions(), save()]"
@@ -57,15 +60,15 @@
       <span
         v-if="field.type !== 'checkbox' || field.name"
         ref="name"
-        contenteditable
+        :contenteditable="editable"
         class="pr-1 cursor-text outline-none block"
         style="min-width: 2px"
         @keydown.enter.prevent="onNameEnter"
         @focus="onNameFocus"
         @blur="onNameBlur"
-      >{{ field.name || defaultName }}</span>
+      >{{ optionIndexText }} {{ field.name || defaultName }}</span>
       <div
-        v-if="isNameFocus && field.type !== 'checkbox'"
+        v-if="isNameFocus && !['checkbox', 'phone'].includes(field.type)"
         class="flex items-center ml-1.5"
       >
         <input
@@ -83,7 +86,7 @@
         >Required</label>
       </div>
       <button
-        v-else
+        v-else-if="editable"
         class="pr-1"
         title="Remove"
         @click.prevent="$emit('remove')"
@@ -92,28 +95,42 @@
       </button>
     </div>
     <div
-      class="opacity-50 flex items-center justify-center h-full w-full"
+      class="flex items-center h-full w-full"
-      :class="bgColors[submitterIndex]"
+      :class="[bgColors[submitterIndex], field?.default_value ? '' : 'justify-center']"
     >
       <span
         v-if="field"
         class="flex justify-center items-center space-x-1 h-full"
       >
+        <div
+          v-if="field?.default_value"
+          :class="{ 'text-[1.5vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars }"
+        >
+          <div
+            ref="textContainer"
+            class="flex items-center px-0.5"
+          >
+            <span class="whitespace-pre-wrap">{{ field.default_value }}</span>
+          </div>
+        </div>
         <component
           :is="fieldIcons[field.type]"
+          v-else
           width="100%"
           height="100%"
-          class="max-h-10"
+          class="max-h-10 opacity-50"
         />
       </span>
     </div>
     <div
+      ref="touchTarget"
       class="absolute top-0 bottom-0 right-0 left-0 cursor-pointer"
     />
     <span
-      v-if="field?.type"
+      v-if="field?.type && editable"
-      class="h-2.5 w-2.5 -right-1 rounded-full -bottom-1 border-gray-400 bg-white shadow-md border absolute cursor-nwse-resize"
+      class="h-4 w-4 md:h-2.5 md:w-2.5 -right-1 rounded-full -bottom-1 border-gray-400 bg-white shadow-md border absolute cursor-nwse-resize"
       @mousedown.stop="startResize"
+      @touchstart="startTouchResize"
     />
   </div>
 </template>
@@ -123,6 +140,7 @@ import FieldSubmitter from './field_submitter'
 import FieldType from './field_type'
 import Field from './field'
 import { IconX } from '@tabler/icons-vue'
+import { v4 } from 'uuid'
 
 export default {
   name: 'FieldArea',
@@ -142,6 +160,11 @@ export default {
       required: false,
       default: false
     },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     field: {
       type: Object,
       required: false,
@@ -154,6 +177,7 @@ export default {
       isResize: false,
       isDragged: false,
       isNameFocus: false,
+      textOverflowChars: 0,
       dragFrom: { x: 0, y: 0 }
     }
   },
@@ -161,6 +185,13 @@ export default {
     defaultName: Field.computed.defaultName,
     fieldNames: FieldType.computed.fieldNames,
     fieldIcons: FieldType.computed.fieldIcons,
+    optionIndexText () {
+      if (this.area.option_uuid && this.field.options) {
+        return `${this.field.options.findIndex((o) => o.uuid === this.area.option_uuid) + 1}.`
+      } else {
+        return ''
+      }
+    },
     cells () {
       const cells = []
 
@@ -182,20 +213,30 @@ export default {
     },
     borderColors () {
       return [
-        'border-red-500',
+        'border-red-500/50',
-        'border-sky-500',
+        'border-sky-500/50',
-        'border-emerald-500',
+        'border-emerald-500/50',
-        'border-yellow-300',
+        'border-yellow-300/50',
-        'border-purple-600'
+        'border-purple-600/50',
+        'border-pink-500/50',
+        'border-cyan-500/50',
+        'border-orange-500/50',
+        'border-lime-500/50',
+        'border-indigo-500/50'
       ]
     },
     bgColors () {
       return [
-        'bg-red-100',
+        'bg-red-100/50',
-        'bg-sky-100',
+        'bg-sky-100/50',
-        'bg-emerald-100',
+        'bg-emerald-100/50',
-        'bg-yellow-100',
+        'bg-yellow-100/50',
-        'bg-purple-100'
+        'bg-purple-100/50',
+        'bg-pink-100/50',
+        'bg-cyan-100/50',
+        'bg-orange-100/50',
+        'bg-lime-100/50',
+        'bg-indigo-100/50'
       ]
     },
     isSelected () {
@@ -212,6 +253,20 @@ export default {
       }
     }
   },
+  watch: {
+    'field.default_value' () {
+      if (this.field.type === 'text' && this.field.default_value && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > this.field.default_value.length)) {
+        this.textOverflowChars = this.$el.clientHeight < this.$refs.textContainer.clientHeight ? this.field.default_value.length : 0
+      }
+    }
+  },
+  mounted () {
+    if (this.field.type === 'text' && this.field.default_value && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > this.field.default_value)) {
+      this.$nextTick(() => {
+        this.textOverflowChars = this.$el.clientHeight < this.$refs.textContainer.clientHeight ? this.field.default_value.length : 0
+      })
+    }
+  },
   methods: {
     onNameFocus (e) {
       this.selectedAreaRef.value = this.area
@@ -249,12 +304,14 @@ export default {
       }
     },
     maybeUpdateOptions () {
+      delete this.field.default_value
+
       if (!['radio', 'multiple', 'select'].includes(this.field.type)) {
         delete this.field.options
       }
 
       if (['select', 'multiple', 'radio'].includes(this.field.type)) {
-        this.field.options ||= ['']
+        this.field.options ||= [{ value: '', uuid: v4() }]
       }
 
       (this.field.areas || []).forEach((area) => {
@@ -300,6 +357,10 @@ export default {
     startDrag (e) {
       this.selectedAreaRef.value = this.area
 
+      if (!this.editable) {
+        return
+      }
+
       const rect = e.target.getBoundingClientRect()
 
       this.dragFrom = { x: e.clientX - rect.left, y: e.clientY - rect.top }
@@ -309,6 +370,47 @@ export default {
 
       this.$emit('start-drag')
     },
+    startTouchDrag (e) {
+      if (e.target !== this.$refs.touchTarget) {
+        return
+      }
+
+      this.$refs?.name?.blur()
+
+      e.preventDefault()
+
+      this.isDragged = true
+
+      const rect = e.target.getBoundingClientRect()
+
+      this.selectedAreaRef.value = this.area
+
+      this.dragFrom = { x: rect.left - e.touches[0].clientX, y: rect.top - e.touches[0].clientY }
+
+      this.$el.getRootNode().addEventListener('touchmove', this.touchDrag)
+      this.$el.getRootNode().addEventListener('touchend', this.stopTouchDrag)
+
+      this.$emit('start-drag')
+    },
+    touchDrag (e) {
+      const page = this.$parent.$refs.mask.previousSibling
+      const rect = page.getBoundingClientRect()
+
+      this.area.x = (this.dragFrom.x + e.touches[0].clientX - rect.left) / rect.width
+      this.area.y = (this.dragFrom.y + e.touches[0].clientY - rect.top) / rect.height
+    },
+    stopTouchDrag () {
+      this.$el.getRootNode().removeEventListener('touchmove', this.touchDrag)
+      this.$el.getRootNode().removeEventListener('touchend', this.stopTouchDrag)
+
+      if (this.isDragged) {
+        this.save()
+      }
+
+      this.isDragged = false
+
+      this.$emit('stop-drag')
+    },
     stopDrag () {
       this.$el.getRootNode().removeEventListener('mousemove', this.drag)
       this.$el.getRootNode().removeEventListener('mouseup', this.stopDrag)
@@ -335,6 +437,33 @@ export default {
 
       this.$emit('stop-resize')
 
+      this.save()
+    },
+    startTouchResize (e) {
+      this.selectedAreaRef.value = this.area
+
+      this.$refs?.name?.blur()
+
+      e.preventDefault()
+
+      this.$el.getRootNode().addEventListener('touchmove', this.touchResize)
+      this.$el.getRootNode().addEventListener('touchend', this.stopTouchResize)
+
+      this.$emit('start-resize', 'nwse')
+    },
+    touchResize (e) {
+      const page = this.$parent.$refs.mask.previousSibling
+      const rect = page.getBoundingClientRect()
+
+      this.area.w = (e.touches[0].clientX - rect.left) / rect.width - this.area.x
+      this.area.h = (e.touches[0].clientY - rect.top) / rect.height - this.area.y
+    },
+    stopTouchResize () {
+      this.$el.getRootNode().removeEventListener('touchmove', this.touchResize)
+      this.$el.getRootNode().removeEventListener('touchend', this.stopTouchResize)
+
+      this.$emit('stop-resize')
+
       this.save()
     }
   }

app/javascript/template_builder/builder.vue

@@ -1,19 +1,24 @@
 <template>
   <div
     style="max-width: 1600px"
-    class="mx-auto pl-4 h-full"
+    class="mx-auto pl-3 md:pl-4 h-full"
   >
-    <div class="flex justify-between py-1.5 items-center pr-4">
+    <div
+      v-if="$slots.buttons || withTitle"
+      class="flex justify-between py-1.5 items-center pr-4 sticky top-0 z-10"
+      :style="{ backgroundColor }"
+    >
       <div class="flex space-x-3">
         <a
-          v-if="withLogoLink"
+          v-if="withLogo"
           href="/"
         >
           <Logo />
         </a>
-        <Logo v-else />
         <Contenteditable
+          v-if="withTitle"
           :model-value="template.name"
+          :editable="editable"
           class="text-3xl font-semibold focus:text-clip"
           :icon-stroke-width="2.3"
           @update:model-value="updateName"
@@ -28,7 +33,8 @@
           <a
             :href="`/templates/${template.id}/submissions/new`"
             data-turbo-frame="modal"
-            class="btn btn-primary"
+            class="btn btn-primary text-base"
+            @click="maybeShowEmptyTemplateAlert"
           >
             <IconUsersPlus
               width="20"
@@ -46,12 +52,12 @@
           >
             <IconInnerShadowTop
               v-if="isSaving"
-              width="20"
+              width="22"
               class="animate-spin"
             />
             <IconDeviceFloppy
               v-else
-              width="20"
+              width="22"
             />
             <span class="hidden md:inline">
               Save
@@ -62,7 +68,7 @@
     </div>
     <div
       class="flex"
-      style="max-height: calc(100% - 60px)"
+      :class="$slots.buttons || withTitle ? 'md:max-h-[calc(100%_-_60px)]' : 'md:max-h-[100%]'"
     >
       <div
         ref="previews"
@@ -76,6 +82,8 @@
           :item="item"
           :document="sortedDocuments[index]"
           :accept-file-types="acceptFileTypes"
+          :with-replace-button="withUploadButton"
+          :editable="editable"
           :template="template"
           :is-direct-upload="isDirectUpload"
           @scroll-to="scrollIntoDocument(item)"
@@ -87,10 +95,10 @@
         />
         <div
           class="sticky bottom-0 py-2"
-          :class="{ 'bg-base-100': withStickySubmitters }"
+          :style="withStickySubmitters ? { backgroundColor } : {}"
         >
           <Upload
-            v-if="sortedDocuments.length"
+            v-if="sortedDocuments.length && editable && withUploadButton"
             :accept-file-types="acceptFileTypes"
             :template-id="template.id"
             :is-direct-upload="isDirectUpload"
@@ -98,13 +106,13 @@
           />
         </div>
       </div>
-      <div class="w-full overflow-y-auto overflow-x-hidden mt-0.5 pt-0.5">
+      <div class="w-full overflow-y-hidden md:overflow-y-auto overflow-x-hidden mt-0.5 pt-0.5">
         <div
           ref="documents"
           class="pr-3.5 pl-0.5"
         >
           <Dropzone
-            v-if="!sortedDocuments.length"
+            v-if="!sortedDocuments.length && withUploadButton"
             :template-id="template.id"
             :accept-file-types="acceptFileTypes"
             :is-direct-upload="isDirectUpload"
@@ -120,16 +128,19 @@
                 :areas-index="fieldAreasIndex[document.uuid]"
                 :selected-submitter="selectedSubmitter"
                 :document="document"
-                :is-drag="!!dragFieldType"
+                :is-drag="!!dragField"
                 :draw-field="drawField"
+                :editable="editable"
+                :base-url="baseUrl"
                 @draw="onDraw"
                 @drop-field="onDropfield"
                 @remove-area="removeArea"
               />
               <DocumentControls
-                v-if="isBreakpointLg"
+                v-if="isBreakpointLg && editable"
                 :with-arrows="template.schema.length > 1"
                 :item="template.schema.find((item) => item.attachment_uuid === document.uuid)"
+                :with-replace-button="withUploadButton"
                 :document="document"
                 :template="template"
                 :is-direct-upload="isDirectUpload"
@@ -142,10 +153,11 @@
               />
             </template>
             <div
-              v-if="sortedDocuments.length && isBreakpointLg"
+              v-if="sortedDocuments.length && isBreakpointLg && editable"
               class="pb-4"
             >
               <Upload
+                v-if="withUploadButton"
                 :template-id="template.id"
                 :is-direct-upload="isDirectUpload"
                 @success="updateFromUpload"
@@ -153,17 +165,39 @@
             </div>
           </template>
         </div>
-        <div
+        <MobileDrawField
-          v-if="sortedDocuments.length"
+          v-if="drawField && isBreakpointLg"
-          class="sticky md:hidden"
+          :draw-field="drawField"
-          style="bottom: 100px"
+          :fields="template.fields"
+          :submitters="template.submitters"
+          :selected-submitter="selectedSubmitter"
+          class="md:hidden"
+          :editable="editable"
+          @cancel="[drawField = null, drawOption = null]"
+          @change-submitter="[selectedSubmitter = $event, drawField.submitter_uuid = $event.uuid]"
+        />
+        <FieldType
+          v-if="sortedDocuments.length && !drawField && editable"
+          class="dropdown-top dropdown-end fixed bottom-4 right-4 z-10 md:hidden"
+          :model-value="''"
+          @update:model-value="startFieldDraw($event)"
         >
-          <div class="px-4 py-3 rounded-2xl bg-base-200 flex items-center justify-between ml-4 mr-6">
+          <label
-            <span class="w-full text-center text-lg">
+            class="btn btn-neutral text-white btn-circle btn-lg group"
-              You need a larger screen to use builder tools.
+            tabindex="0"
-            </span>
+          >
-          </div>
+            <IconPlus
-        </div>
+              class="group-focus:hidden"
+              width="28"
+              height="28"
+            />
+            <IconX
+              class="hidden group-focus:inline"
+              width="28"
+              height="28"
+            />
+          </label>
+        </FieldType>
       </div>
       <div
         class="relative w-80 flex-none mt-1 pr-4 pl-0.5 hidden md:block"
@@ -171,7 +205,8 @@
       >
         <div
           v-if="drawField"
-          class="sticky inset-0 bg-base-100 h-full"
+          class="sticky inset-0 h-full"
+          :style="{ backgroundColor }"
         >
           <div class="bg-base-300 rounded-lg p-5 text-center space-y-4">
             <p>
@@ -180,7 +215,7 @@
             <p>
               <button
                 class="base-button"
-                @click="drawField = null"
+                @click="[drawField = null, drawOption = null]"
               >
                 Cancel
               </button>
@@ -193,11 +228,13 @@
             :fields="template.fields"
             :submitters="template.submitters"
             :selected-submitter="selectedSubmitter"
+            :default-fields="defaultFields"
             :with-sticky-submitters="withStickySubmitters"
-            @set-draw="drawField = $event"
+            :editable="editable"
-            @set-drag="dragFieldType = $event"
+            @set-draw="[drawField = $event.field, drawOption = $event.option]"
+            @set-drag="dragField = $event"
             @change-submitter="selectedSubmitter = $event"
-            @drag-end="dragFieldType = null"
+            @drag-end="dragField = null"
             @scroll-to-area="scrollToArea"
           />
         </div>
@@ -210,12 +247,14 @@
 import Upload from './upload'
 import Dropzone from './dropzone'
 import Fields from './fields'
+import MobileDrawField from './mobile_draw_field'
 import Document from './document'
 import Logo from './logo'
 import Contenteditable from './contenteditable'
 import DocumentPreview from './preview'
 import DocumentControls from './controls'
-import { IconUsersPlus, IconDeviceFloppy, IconInnerShadowTop } from '@tabler/icons-vue'
+import FieldType from './field_type'
+import { IconUsersPlus, IconDeviceFloppy, IconInnerShadowTop, IconPlus, IconX } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 import { ref, computed } from 'vue'
 
@@ -225,6 +264,10 @@ export default {
     Upload,
     Document,
     Fields,
+    MobileDrawField,
+    IconPlus,
+    FieldType,
+    IconX,
     Logo,
     Dropzone,
     DocumentPreview,
@@ -259,6 +302,21 @@ export default {
       required: false,
       default: ''
     },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    defaultFields: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    defaultSubmitters: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     acceptFileTypes: {
       type: String,
       required: false,
@@ -269,7 +327,7 @@ export default {
       required: false,
       default: ''
     },
-    withLogoLink: {
+    withLogo: {
       type: Boolean,
       required: false,
       default: true
@@ -279,6 +337,16 @@ export default {
       required: false,
       default: true
     },
+    withUploadButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    withTitle: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     withPhone: {
       type: Boolean,
       required: false,
@@ -297,10 +365,13 @@ export default {
       isSaving: false,
       selectedSubmitter: null,
       drawField: null,
-      dragFieldType: null
+      drawOption: null,
+      dragField: null
     }
   },
   computed: {
+    fieldIcons: FieldType.computed.fieldIcons,
+    fieldNames: FieldType.computed.fieldNames,
     selectedAreaRef: () => ref(),
     fieldAreasIndex () {
       const areas = {}
@@ -327,19 +398,31 @@ export default {
     }
   },
   created () {
+    this.defaultSubmitters.forEach((name, index) => {
+      const submitter = (this.template.submitters[index] ||= {})
+
+      submitter.name = name
+      submitter.uuid ||= v4()
+    })
+
     this.selectedSubmitter = this.template.submitters[0]
   },
   mounted () {
+    this.undoStack = [JSON.stringify(this.template)]
+    this.redoStack = []
+
     this.$nextTick(() => {
       this.onWindowResize()
     })
 
     document.addEventListener('keyup', this.onKeyUp)
+    window.addEventListener('keydown', this.onKeyDown)
 
     window.addEventListener('resize', this.onWindowResize)
   },
   unmounted () {
     document.removeEventListener('keyup', this.onKeyUp)
+    window.removeEventListener('keydown', this.onKeyDown)
 
     window.removeEventListener('resize', this.onWindowResize)
   },
@@ -347,10 +430,57 @@ export default {
     this.documentRefs = []
   },
   methods: {
+    startFieldDraw (type) {
+      const field = {
+        name: '',
+        uuid: v4(),
+        required: type !== 'checkbox',
+        areas: [],
+        submitter_uuid: this.selectedSubmitter.uuid,
+        type
+      }
+
+      if (['select', 'multiple', 'radio'].includes(type)) {
+        field.options = [{ value: '', uuid: v4() }]
+      }
+
+      this.drawField = field
+      this.drawOption = null
+    },
+    undo () {
+      if (this.undoStack.length > 1) {
+        this.undoStack.pop()
+        const stringData = this.undoStack[this.undoStack.length - 1]
+        const currentStringData = JSON.stringify(this.template)
+
+        if (stringData && stringData !== currentStringData) {
+          this.redoStack.push(currentStringData)
+
+          Object.assign(this.template, JSON.parse(stringData))
+
+          this.save()
+        }
+      }
+    },
+    redo () {
+      const stringData = this.redoStack.pop()
+      this.lastRedoData = stringData
+      const currentStringData = JSON.stringify(this.template)
+
+      if (stringData && stringData !== currentStringData) {
+        if (this.undoStack[this.undoStack.length - 1] !== currentStringData) {
+          this.undoStack.push(currentStringData)
+        }
+
+        Object.assign(this.template, JSON.parse(stringData))
+
+        this.save()
+      }
+    },
     onWindowResize (e) {
       const breakpointLg = 1024
 
-      this.isBreakpointLg = this.$el.getRootNode().querySelector('div').offsetWidth < breakpointLg
+      this.isBreakpointLg = this.$el.getRootNode().querySelector('div[data-v-app]').offsetWidth < breakpointLg
     },
     setDocumentRefs (el) {
       if (el) {
@@ -365,6 +495,7 @@ export default {
     onKeyUp (e) {
       if (e.code === 'Escape') {
         this.drawField = null
+        this.drawOption = null
         this.selectedAreaRef.value = null
       }
 
@@ -374,6 +505,19 @@ export default {
         this.selectedAreaRef.value = null
       }
     },
+    onKeyDown (event) {
+      if ((event.metaKey && event.shiftKey && event.key === 'z') || (event.ctrlKey && event.key === 'Z')) {
+        event.stopImmediatePropagation()
+        event.preventDefault()
+
+        this.redo()
+      } else if ((event.ctrlKey || event.metaKey) && event.key === 'z') {
+        event.stopImmediatePropagation()
+        event.preventDefault()
+
+        this.undo()
+      }
+    },
     removeArea (area) {
       const field = this.template.fields.find((f) => f.areas?.includes(area))
 
@@ -385,12 +529,42 @@ export default {
 
       this.save()
     },
+    pushUndo () {
+      const stringData = JSON.stringify(this.template)
+
+      if (this.undoStack[this.undoStack.length - 1] !== stringData) {
+        this.undoStack.push(stringData)
+
+        if (this.lastRedoData !== stringData) {
+          this.redoStack = []
+        }
+      }
+    },
     onDraw (area) {
       if (this.drawField) {
+        if (this.drawOption) {
+          const areaWithoutOption = this.drawField.areas?.find((a) => !a.option_uuid)
+
+          if (areaWithoutOption && !this.drawField.areas.find((a) => a.option_uuid === this.drawField.options[0].uuid)) {
+            areaWithoutOption.option_uuid = this.drawField.options[0].uuid
+          }
+
+          area.option_uuid = this.drawOption.uuid
+        }
+
         this.drawField.areas ||= []
         this.drawField.areas.push(area)
 
+        if (this.template.fields.indexOf(this.drawField) === -1) {
+          this.template.fields.push(this.drawField)
+        }
+
         this.drawField = null
+        this.drawOption = null
+
+        this.selectedAreaRef.value = area
+
+        this.save()
       } else {
         const documentRef = this.documentRefs.find((e) => e.document.uuid === area.attachment_uuid)
         const pageMask = documentRef.pageRefs[area.page].$refs.mask
@@ -401,45 +575,49 @@ export default {
           const previousField = [...this.template.fields].reverse().find((f) => f.type === type)
           const previousArea = previousField?.areas?.[previousField.areas.length - 1]
 
-          const areaW = previousArea?.w || (30 / pageMask.clientWidth)
+          if (previousArea || area.w) {
-          const areaH = previousArea?.h || (30 / pageMask.clientHeight)
+            const areaW = previousArea?.w || (30 / pageMask.clientWidth)
+            const areaH = previousArea?.h || (30 / pageMask.clientHeight)
 
-          if ((pageMask.clientWidth * area.w) < 5) {
+            if ((pageMask.clientWidth * area.w) < 5) {
-            area.x = area.x - (areaW / 2)
+              area.x = area.x - (areaW / 2)
-            area.y = area.y - (areaH / 2)
+              area.y = area.y - (areaH / 2)
+            }
+
+            area.w = areaW
+            area.h = areaH
+          }
+        }
+
+        if (area.w) {
+          const field = {
+            name: '',
+            uuid: v4(),
+            required: type !== 'checkbox',
+            type,
+            submitter_uuid: this.selectedSubmitter.uuid,
+            areas: [area]
           }
 
-          area.w = areaW
+          this.template.fields.push(field)
-          area.h = areaH
-        }
 
-        const field = {
+          this.selectedAreaRef.value = area
-          name: '',
-          uuid: v4(),
-          required: type !== 'checkbox',
-          type,
-          submitter_uuid: this.selectedSubmitter.uuid,
-          areas: [area]
-        }
 
-        this.template.fields.push(field)
+          this.save()
+        }
       }
-
-      this.selectedAreaRef.value = area
-
-      this.save()
     },
     onDropfield (area) {
       const field = {
         name: '',
-        type: this.dragFieldType,
         uuid: v4(),
         submitter_uuid: this.selectedSubmitter.uuid,
-        required: this.dragFieldType !== 'checkbox'
+        required: this.dragField.type !== 'checkbox',
+        ...this.dragField
       }
 
-      if (['select', 'multiple', 'radio'].includes(this.dragFieldType)) {
+      if (['select', 'multiple', 'radio'].includes(field.type)) {
-        field.options = ['']
+        field.options = [{ value: '', uuid: v4() }]
       }
 
       const fieldArea = {
@@ -453,26 +631,31 @@ export default {
 
       let baseArea
 
-      if (this.selectedField?.type === this.dragFieldType) {
+      if (this.selectedField?.type === field.type) {
         baseArea = this.selectedAreaRef.value
       } else if (previousField?.areas?.length) {
         baseArea = previousField.areas[previousField.areas.length - 1]
       } else {
-        if (['checkbox'].includes(this.dragFieldType)) {
+        if (['checkbox'].includes(field.type)) {
           baseArea = {
             w: area.maskW / 30 / area.maskW,
             h: area.maskW / 30 / area.maskW * (area.maskW / area.maskH)
           }
-        } else if (this.dragFieldType === 'image') {
+        } else if (field.type === 'image') {
           baseArea = {
             w: area.maskW / 5 / area.maskW,
             h: (area.maskW / 5 / area.maskW) * (area.maskW / area.maskH)
           }
-        } else if (this.dragFieldType === 'signature') {
+        } else if (field.type === 'signature') {
           baseArea = {
             w: area.maskW / 5 / area.maskW,
             h: (area.maskW / 5 / area.maskW) * (area.maskW / area.maskH) / 2
           }
+        } else if (field.type === 'initials') {
+          baseArea = {
+            w: area.maskW / 10 / area.maskW,
+            h: area.maskW / 35 / area.maskW
+          }
         } else {
           baseArea = {
             w: area.maskW / 5 / area.maskW,
@@ -485,7 +668,7 @@ export default {
       fieldArea.h = baseArea.h
       fieldArea.y = fieldArea.y - baseArea.h / 2
 
-      if (this.dragFieldType === 'cells') {
+      if (field.type === 'cells') {
         fieldArea.cell_w = baseArea.cell_w || (baseArea.w / 5)
       }
 
@@ -557,14 +740,25 @@ export default {
 
       this.save()
     },
-    onSaveClick () {
+    maybeShowEmptyTemplateAlert (e) {
-      this.isSaving = true
+      if (!this.template.fields.length) {
+        e.preventDefault()
 
-      this.save().then(() => {
+        alert('Please draw fields to prepare the document.')
-        window.Turbo.visit(`/templates/${this.template.id}`)
+      }
-      }).finally(() => {
+    },
-        this.isSaving = false
+    onSaveClick () {
-      })
+      if (this.template.fields.length) {
+        this.isSaving = true
+
+        this.save().then(() => {
+          window.Turbo.visit(`/templates/${this.template.id}`)
+        }).finally(() => {
+          this.isSaving = false
+        })
+      } else {
+        alert('Please draw fields to prepare the document.')
+      }
     },
     scrollToArea (area) {
       const documentRef = this.documentRefs.find((a) => a.document.uuid === area.attachment_uuid)
@@ -584,6 +778,8 @@ export default {
         this.$el.closest('template-builder').dataset.template = JSON.stringify(this.template)
       }
 
+      this.pushUndo()
+
       return this.baseFetch(`/api/templates/${this.template.id}`, {
         method: 'PUT',
         body: JSON.stringify({

app/javascript/template_builder/contenteditable.vue

@@ -5,7 +5,7 @@
   >
     <span
       ref="contenteditable"
-      contenteditable
+      :contenteditable="editable"
       style="min-width: 2px"
       :class="iconInline ? 'inline' : 'block'"
       class="peer outline-none focus:block"
@@ -24,13 +24,13 @@
       *
     </span>
     <IconPencil
-      class="cursor-pointer flex-none opacity-0 group-hover/contenteditable:opacity-100 align-middle peer-focus:hidden"
+      class="cursor-pointer flex-none opacity-0 group-hover/contenteditable-container:opacity-100 group-hover/contenteditable:opacity-100 align-middle peer-focus:hidden"
       :style="iconInline ? {} : { right: -(1.1 * iconWidth) + 'px' }"
       title="Edit"
-      :class="{ 'ml-1': !withRequired, 'absolute': !iconInline, 'inline align-bottom': iconInline }"
+      :class="{ invisible: !editable, 'ml-1': !withRequired, 'absolute': !iconInline, 'inline align-bottom': iconInline }"
       :width="iconWidth"
       :stroke-width="iconStrokeWidth"
-      @click="focusContenteditable"
+      @click="[focusContenteditable(), selectOnEditClick && selectContent()]"
     />
   </div>
 </template>
@@ -64,6 +64,16 @@ export default {
       required: false,
       default: false
     },
+    selectOnEditClick: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     iconStrokeWidth: {
       type: Number,
       required: false,
@@ -85,6 +95,19 @@ export default {
     }
   },
   methods: {
+    selectContent () {
+      const el = this.$refs.contenteditable
+
+      const range = document.createRange()
+
+      range.selectNodeContents(el)
+
+      const sel = window.getSelection()
+
+      sel.removeAllRanges()
+
+      sel.addRange(range)
+    },
     onBlur (e) {
       setTimeout(() => {
         this.value = this.$refs.contenteditable.innerText.trim() || this.modelValue

app/javascript/template_builder/controls.vue

@@ -7,6 +7,7 @@
       @update:model-value="onUpdateName"
     />
     <ReplaceButton
+      v-if="withReplaceButton"
       :is-direct-upload="isDirectUpload"
       :template-id="template.id"
       @click.stop
@@ -67,6 +68,11 @@ export default {
       required: true,
       default: false
     },
+    withReplaceButton: {
+      type: Boolean,
+      required: true,
+      default: true
+    },
     withArrows: {
       type: Boolean,
       required: false,

app/javascript/template_builder/document.vue

@@ -5,6 +5,7 @@
       :key="image.id"
       :ref="setPageRefs"
       :number="index"
+      :editable="editable"
       :areas="areasIndex[index]"
       :is-drag="isDrag"
       :draw-field="drawField"
@@ -38,11 +39,21 @@ export default {
       type: Object,
       required: true
     },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     drawField: {
       type: Object,
       required: false,
       default: null
     },
+    baseUrl: {
+      type: String,
+      required: false,
+      default: ''
+    },
     isDrag: {
       type: Boolean,
       required: false,
@@ -56,8 +67,33 @@ export default {
     }
   },
   computed: {
+    basePreviewUrl () {
+      if (this.baseUrl) {
+        return new URL(this.baseUrl).origin
+      } else {
+        return ''
+      }
+    },
+    numberOfPages () {
+      return this.document.metadata?.pdf?.number_of_pages || this.document.preview_images.length
+    },
     sortedPreviewImages () {
-      return [...this.document.preview_images].sort((a, b) => parseInt(a.filename) - parseInt(b.filename))
+      const lazyloadMetadata = this.document.preview_images[this.document.preview_images.length - 1].metadata
+
+      return [...Array(this.numberOfPages).keys()].map((i) => {
+        return this.previewImagesIndex[i] || {
+          metadata: lazyloadMetadata,
+          id: Math.random().toString(),
+          url: this.basePreviewUrl + `/preview/${this.document.uuid}/${i}.jpg`
+        }
+      })
+    },
+    previewImagesIndex () {
+      return this.document.preview_images.reduce((acc, e) => {
+        acc[parseInt(e.filename)] = e
+
+        return acc
+      }, {})
     }
   },
   beforeUpdate () {

app/javascript/template_builder/field.vue

@@ -4,8 +4,9 @@
   >
     <div
       class="border border-base-300 rounded rounded-tr-none relative group"
+      :style="{ backgroundColor: backgroundColor }"
     >
-      <div class="flex items-center justify-between relative">
+      <div class="flex items-center justify-between relative group/contenteditable-container">
         <div
           class="absolute top-0 bottom-0 right-0 left-0 cursor-pointer"
           @click="scrollToFirstArea"
@@ -13,6 +14,7 @@
         <div class="flex items-center p-1 space-x-1">
           <FieldType
             v-model="field.type"
+            :editable="editable"
             :button-width="20"
             @update:model-value="[maybeUpdateOptions(), save()]"
             @click="scrollToFirstArea"
@@ -20,6 +22,7 @@
           <Contenteditable
             ref="name"
             :model-value="field.name || defaultName"
+            :editable="editable"
             :icon-inline="true"
             :icon-width="18"
             :icon-stroke-width="1.6"
@@ -31,7 +34,7 @@
           v-if="isNameFocus"
           class="flex items-center relative"
         >
-          <template v-if="field.type !== 'checkbox'">
+          <template v-if="field.type != 'phone'">
             <input
               :id="`required-checkbox-${field.uuid}`"
               v-model="field.required"
@@ -48,19 +51,29 @@
           </template>
         </div>
         <div
-          v-else
+          v-else-if="editable"
           class="flex items-center space-x-1"
         >
+          <button
+            v-if="field && !field.areas.length"
+            title="Draw"
+            class="relative cursor-pointer text-transparent group-hover:text-base-content"
+            @click="$emit('set-draw', { field })"
+          >
+            <IconNewSection
+              :width="18"
+              :stroke-width="1.6"
+            />
+          </button>
           <span
-            v-if="field.areas?.length"
             class="dropdown dropdown-end"
           >
             <label
               tabindex="0"
-              title="Areas"
+              title="Settings"
               class="cursor-pointer text-transparent group-hover:text-base-content"
             >
-              <IconShape
+              <IconSettings
                 :width="18"
                 :stroke-width="1.6"
               />
@@ -68,8 +81,60 @@
             <ul
               tabindex="0"
               class="mt-1.5 dropdown-content menu menu-xs p-2 shadow bg-base-100 rounded-box w-52 z-10"
+              draggable="true"
+              @dragstart.prevent.stop
               @click="closeDropdown"
             >
+              <div
+                v-if="field.type === 'text'"
+                class="py-1.5 px-1 relative"
+                @click.stop
+              >
+                <input
+                  v-model="field.default_value"
+                  type="text"
+                  placeholder="Default value"
+                  class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
+                  @blur="save"
+                >
+                <label
+                  v-if="field.default_value"
+                  :style="{ backgroundColor: backgroundColor }"
+                  class="absolute -top-1 left-2.5 px-1 h-4"
+                  style="font-size: 8px"
+                >
+                  Default value
+                </label>
+              </div>
+              <li
+                v-if="field.type != 'phone'"
+                @click.stop
+              >
+                <label class="cursor-pointer py-1.5">
+                  <input
+                    v-model="field.required"
+                    type="checkbox"
+                    class="toggle toggle-xs"
+                    @update:model-value="save"
+                  >
+                  <span class="label-text">Required</span>
+                </label>
+              </li>
+              <li
+                v-if="field.type === 'text'"
+                @click.stop
+              >
+                <label class="cursor-pointer py-1.5">
+                  <input
+                    v-model="field.readonly"
+                    type="checkbox"
+                    class="toggle toggle-xs"
+                    @update:model-value="save"
+                  >
+                  <span class="label-text">Read-only</span>
+                </label>
+              </li>
+              <hr class="pb-0.5 mt-0.5">
               <li
                 v-for="(area, index) in field.areas || []"
                 :key="index"
@@ -86,11 +151,11 @@
                   Page {{ area.page + 1 }}
                 </a>
               </li>
-              <li>
+              <li v-if="!field.areas?.length || !['radio', 'multiple'].includes(field.type)">
                 <a
                   href="#"
                   class="text-sm py-1 px-2"
-                  @click.prevent="$emit('set-draw', field)"
+                  @click.prevent="$emit('set-draw', { field })"
                 >
                   <IconNewSection
                     :width="20"
@@ -99,21 +164,23 @@
                   Draw New Area
                 </a>
               </li>
+              <li v-if="field.areas?.length === 1 && ['date', 'signature', 'initials', 'text', 'cells'].includes(field.type)">
+                <a
+                  href="#"
+                  class="text-sm py-1 px-2"
+                  @click.prevent="copyToAllPages(field)"
+                >
+                  <IconCopy
+                    :width="20"
+                    :stroke-width="1.6"
+                  />
+                  Copy to All Pages
+                </a>
+              </li>
             </ul>
           </span>
           <button
-            v-else
+            class="relative text-transparent group-hover:text-base-content pr-1"
-            title="Areas"
-            class="relative cursor-pointer text-transparent group-hover:text-base-content"
-            @click="$emit('set-draw', field)"
-          >
-            <IconShape
-              :width="18"
-              :stroke-width="1.6"
-            />
-          </button>
-          <button
-            class="relative text-transparent group-hover:text-base-content"
             title="Remove"
             @click="$emit('remove', field)"
           >
@@ -122,48 +189,58 @@
               :stroke-width="1.6"
             />
           </button>
-          <div class="flex flex-col pr-1 text-transparent group-hover:text-base-content">
-            <button
-              title="Up"
-              class="relative"
-              style="font-size: 10px; margin-bottom: -2px"
-              @click="$emit('move-up')"
-            >
-              ▲
-            </button>
-            <button
-              title="Down"
-              class="relative"
-              style="font-size: 10px; margin-top: -2px"
-              @click="$emit('move-down')"
-            >
-              ▼
-            </button>
-          </div>
         </div>
       </div>
       <div
         v-if="field.options"
+        ref="options"
         class="border-t border-base-300 mx-2 pt-2 space-y-1.5"
+        draggable="true"
+        @dragstart.prevent.stop
       >
         <div
           v-for="(option, index) in field.options"
-          :key="index"
+          :key="option.uuid"
           class="flex space-x-1.5 items-center"
         >
           <span class="text-sm w-3.5">
             {{ index + 1 }}.
           </span>
+          <div
+            v-if="['radio', 'multiple'].includes(field.type) && (index > 0 || field.areas.find((a) => a.option_uuid) || !field.areas.length) && !field.areas.find((a) => a.option_uuid === option.uuid)"
+            class="items-center flex w-full"
+          >
+            <input
+              v-model="option.value"
+              class="w-full input input-primary input-xs text-sm bg-transparent !pr-7 -mr-6"
+              type="text"
+              required
+              @blur="save"
+            >
+            <button
+              title="Draw"
+              tabindex="-1"
+              @click.prevent="$emit('set-draw', { field, option })"
+            >
+              <IconNewSection
+                :width="18"
+                :stroke-width="1.6"
+              />
+            </button>
+          </div>
           <input
-            v-model="field.options[index]"
+            v-else
+            v-model="option.value"
             class="w-full input input-primary input-xs text-sm bg-transparent"
             type="text"
             required
+            @focus="maybeFocusOnOptionArea(option)"
             @blur="save"
           >
           <button
             class="text-sm w-3.5"
-            @click="[field.options.splice(index, 1), save()]"
+            tabindex="-1"
+            @click="removeOption(option)"
           >
             &times;
           </button>
@@ -171,7 +248,7 @@
         <button
           v-if="field.options"
           class="text-center text-sm w-full pb-1"
-          @click="[field.options.push(''), save()]"
+          @click="addOption"
         >
           + Add option
         </button>
@@ -183,25 +260,33 @@
 <script>
 import Contenteditable from './contenteditable'
 import FieldType from './field_type'
-import { IconShape, IconNewSection, IconTrashX } from '@tabler/icons-vue'
+import { IconShape, IconNewSection, IconTrashX, IconCopy, IconSettings } from '@tabler/icons-vue'
+import { v4 } from 'uuid'
 
 export default {
   name: 'TemplateField',
   components: {
     Contenteditable,
+    IconSettings,
     IconShape,
     IconNewSection,
     IconTrashX,
+    IconCopy,
     FieldType
   },
-  inject: ['template', 'save'],
+  inject: ['template', 'save', 'backgroundColor', 'selectedAreaRef'],
   props: {
     field: {
       type: Object,
       required: true
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
-  emits: ['set-draw', 'remove', 'move-up', 'move-down', 'scroll-to'],
+  emits: ['set-draw', 'remove', 'scroll-to'],
   data () {
     return {
       isNameFocus: false
@@ -221,6 +306,23 @@ export default {
     }
   },
   methods: {
+    copyToAllPages (field) {
+      const areaString = JSON.stringify(field.areas[0])
+
+      this.template.documents.forEach((attachment) => {
+        attachment.preview_images.forEach((page) => {
+          if (!field.areas.find((area) => area.attachment_uuid === attachment.uuid && area.page === parseInt(page.filename))) {
+            field.areas.push({ ...JSON.parse(areaString), page: parseInt(page.filename) })
+          }
+        })
+      })
+
+      this.$nextTick(() => {
+        this.$emit('scroll-to', this.field.areas[this.field.areas.length - 1])
+      })
+
+      this.save()
+    },
     onNameFocus (e) {
       this.isNameFocus = true
 
@@ -230,19 +332,45 @@ export default {
         }, 1)
       }
     },
+    maybeFocusOnOptionArea (option) {
+      const area = this.field.areas.find((a) => a.option_uuid === option.uuid)
+
+      if (area) {
+        this.selectedAreaRef.value = area
+      }
+    },
     scrollToFirstArea () {
       return this.field.areas?.[0] && this.$emit('scroll-to', this.field.areas[0])
     },
     closeDropdown () {
       document.activeElement.blur()
     },
+    addOption () {
+      this.field.options.push({ value: '', uuid: v4() })
+
+      this.$nextTick(() => {
+        const inputs = this.$refs.options.querySelectorAll('input')
+
+        inputs[inputs.length - 1]?.focus()
+      })
+
+      this.save()
+    },
+    removeOption (option) {
+      this.field.options.splice(this.field.options.indexOf(option), 1)
+      this.field.areas.splice(this.field.areas.findIndex((a) => a.option_uuid === option.uuid), 1)
+
+      this.save()
+    },
     maybeUpdateOptions () {
+      delete this.field.default_value
+
       if (!['radio', 'multiple', 'select'].includes(this.field.type)) {
         delete this.field.options
       }
 
       if (['radio', 'multiple', 'select'].includes(this.field.type)) {
-        this.field.options ||= ['']
+        this.field.options ||= [{ value: '', uuid: v4() }]
       }
 
       (this.field.areas || []).forEach((area) => {

app/javascript/template_builder/field_submitter.vue

@@ -1,5 +1,91 @@
 <template>
-  <div class="dropdown">
+  <div v-if="mobileView">
+    <div class="flex space-x-2 items-end">
+      <div class="group/contenteditable-container bg-base-100 rounded-md p-2 border border-base-300 w-full flex justify-between items-end">
+        <div class="flex items-center space-x-2">
+          <span
+            class="w-3 h-3 flex-shrink-0 rounded-full"
+            :class="colors[submitters.indexOf(selectedSubmitter)]"
+          />
+          <Contenteditable
+            v-model="selectedSubmitter.name"
+            class="cursor-text"
+            :icon-inline="true"
+            :editable="editable"
+            :select-on-edit-click="true"
+            :icon-width="18"
+            @update:model-value="$emit('name-change', selectedSubmitter)"
+          />
+        </div>
+      </div>
+      <div class="dropdown dropdown-top dropdown-end">
+        <label
+          tabindex="0"
+          class="bg-base-100 cursor-pointer rounded-md p-2 border border-base-300 w-full flex justify-center"
+        >
+          <IconChevronUp
+            width="24"
+            height="24"
+          />
+        </label>
+        <ul
+          v-if="editable"
+          tabindex="0"
+          class="rounded-md min-w-max mb-2"
+          :class="menuClasses"
+          @click="closeDropdown"
+        >
+          <li
+            v-for="(submitter, index) in submitters"
+            :key="submitter.uuid"
+          >
+            <a
+              href="#"
+              class="flex px-2 group justify-between items-center"
+              :class="{ 'active': submitter === selectedSubmitter }"
+              @click.prevent="selectSubmitter(submitter)"
+            >
+              <span class="py-1 flex items-center">
+                <span
+                  class="rounded-full w-3 h-3 ml-1 mr-3"
+                  :class="colors[index]"
+                />
+                <span>
+                  {{ submitter.name }}
+                </span>
+              </span>
+              <button
+                v-if="submitters.length > 1 && editable"
+                class="px-2"
+                @click.stop="remove(submitter)"
+              >
+                <IconTrashX :width="18" />
+              </button>
+            </a>
+          </li>
+          <li v-if="submitters.length < 10 && editable">
+            <a
+              href="#"
+              class="flex px-2"
+              @click.prevent="addSubmitter"
+            >
+              <IconUserPlus
+                :width="20"
+                :stroke-width="1.6"
+              />
+              <span class="py-1">
+                Add {{ names[submitters.length] }}
+              </span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <div
+    v-else
+    class="dropdown"
+  >
     <label
       v-if="compact"
       tabindex="0"
@@ -14,7 +100,7 @@
     <label
       v-else
       tabindex="0"
-      class="cursor-pointer rounded-md p-2 border border-base-300 w-full flex justify-between"
+      class="group cursor-pointer group/contenteditable-container rounded-md p-2 border border-base-300 hover:border-content w-full flex justify-between"
     >
       <div class="flex items-center space-x-2">
         <span
@@ -25,11 +111,13 @@
           v-model="selectedSubmitter.name"
           class="cursor-text"
           :icon-inline="true"
+          :editable="editable"
+          :select-on-edit-click="true"
           :icon-width="18"
           @update:model-value="$emit('name-change', selectedSubmitter)"
         />
       </div>
-      <span class="flex items-center">
+      <span class="flex items-center transition-all duration-75 group-hover:border border-base-content/20 border-dashed w-6 h-6 flex justify-center items-center rounded">
         <IconPlus
           width="18"
           height="18"
@@ -37,6 +125,7 @@
       </span>
     </label>
     <ul
+      v-if="editable || !compact"
       tabindex="0"
       :class="menuClasses"
       @click="closeDropdown"
@@ -61,7 +150,7 @@
             </span>
           </span>
           <button
-            v-if="!compact && submitters.length > 1"
+            v-if="!compact && submitters.length > 1 && editable"
             class="hidden group-hover:block px-2"
             @click.stop="remove(submitter)"
           >
@@ -69,7 +158,7 @@
           </button>
         </a>
       </li>
-      <li v-if="submitters.length < 5">
+      <li v-if="submitters.length < 10 && editable">
         <a
           href="#"
           class="flex px-2"
@@ -80,7 +169,7 @@
             :stroke-width="1.6"
           />
           <span class="py-1">
-            Add Submitter
+            Add {{ names[submitters.length] }}
           </span>
         </a>
       </li>
@@ -89,7 +178,7 @@
 </template>
 
 <script>
-import { IconUserPlus, IconTrashX, IconPlus } from '@tabler/icons-vue'
+import { IconUserPlus, IconTrashX, IconPlus, IconChevronUp } from '@tabler/icons-vue'
 import Contenteditable from './contenteditable'
 import { v4 } from 'uuid'
 
@@ -99,18 +188,29 @@ export default {
     IconUserPlus,
     Contenteditable,
     IconPlus,
-    IconTrashX
+    IconTrashX,
+    IconChevronUp
   },
   props: {
     submitters: {
       type: Array,
       required: true
     },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     compact: {
       type: Boolean,
       required: false,
       default: false
     },
+    mobileView: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     modelValue: {
       type: String,
       required: true
@@ -129,16 +229,26 @@ export default {
         'bg-sky-500',
         'bg-emerald-500',
         'bg-yellow-300',
-        'bg-purple-600'
+        'bg-purple-600',
+        'bg-pink-500',
+        'bg-cyan-500',
+        'bg-orange-500',
+        'bg-lime-500',
+        'bg-indigo-500'
       ]
     },
     names () {
       return [
-        'First Submitter',
+        'First Party',
-        'Second Submitter',
+        'Second Party',
-        'Third Submitter',
+        'Third Party',
-        'Fourth Submitter',
+        'Fourth Party',
-        'Fifth Submitter'
+        'Fifth Party',
+        'Sixth Party',
+        'Seventh Party',
+        'Eighth Party',
+        'Ninth Party',
+        'Tenth Party'
       ]
     },
     selectedSubmitter () {

app/javascript/template_builder/field_type.vue

@@ -1,20 +1,23 @@
 <template>
   <span class="dropdown">
-    <label
+    <slot>
-      tabindex="0"
+      <label
-      :title="fieldNames[modelValue]"
+        tabindex="0"
-      class="cursor-pointer"
+        :title="fieldNames[modelValue]"
-    >
+        class="cursor-pointer"
-      <component
+      >
-        :is="fieldIcons[modelValue]"
+        <component
-        :width="buttonWidth"
+          :is="fieldIcons[modelValue]"
-        :class="buttonClasses"
+          :width="buttonWidth"
-        :stroke-width="1.6"
+          :class="buttonClasses"
-      />
+          :stroke-width="1.6"
-    </label>
+        />
+      </label>
+    </slot>
     <ul
+      v-if="editable"
       tabindex="0"
-      class="dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10"
+      class="dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10 mb-3"
       :class="menuClasses"
       @click="closeDropdown"
     >
@@ -43,7 +46,7 @@
 </template>
 
 <script>
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconLetterCaseUpper } from '@tabler/icons-vue'
 
 export default {
   name: 'FiledTypeDropdown',
@@ -63,6 +66,11 @@ export default {
       required: false,
       default: ''
     },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     buttonWidth: {
       type: Number,
       required: false,
@@ -75,6 +83,7 @@ export default {
       return {
         text: 'Text',
         signature: 'Signature',
+        initials: 'Initials',
         date: 'Date',
         image: 'Image',
         file: 'File',
@@ -90,14 +99,15 @@ export default {
       return {
         text: IconTextSize,
         signature: IconWritingSign,
+        initials: IconLetterCaseUpper,
         date: IconCalendarEvent,
         image: IconPhoto,
         file: IconPaperclip,
         select: IconSelect,
         checkbox: IconCheckbox,
-        cells: IconColumns3,
-        multiple: IconChecks,
         radio: IconCircleDot,
+        multiple: IconChecks,
+        cells: IconColumns3,
         phone: IconPhoneCheck
       }
     }

app/javascript/template_builder/fields.vue

@@ -5,26 +5,66 @@
       class="w-full rounded-lg"
       :class="{ 'bg-base-100': withStickySubmitters }"
       :submitters="submitters"
+      :editable="editable"
       @new-submitter="save"
       @remove="removeSubmitter"
       @name-change="save"
       @update:model-value="$emit('change-submitter', submitters.find((s) => s.uuid === $event))"
     />
   </div>
-  <div class="mb-1 mt-2">
+  <div
+    class="mb-1 mt-2"
+    @dragover.prevent="onFieldDragover"
+    @drop="save"
+  >
     <Field
       v-for="field in submitterFields"
       :key="field.uuid"
+      :data-uuid="field.uuid"
       :field="field"
       :type-index="fields.filter((f) => f.type === field.type).indexOf(field)"
+      :editable="editable && !dragField"
+      :draggable="editable"
+      @dragstart="dragField = field"
+      @dragend="dragField = null"
       @remove="removeField"
-      @move-up="move(field, -1)"
-      @move-down="move(field, 1)"
       @scroll-to="$emit('scroll-to-area', $event)"
       @set-draw="$emit('set-draw', $event)"
     />
   </div>
-  <div class="grid grid-cols-3 gap-1 pb-2">
+  <div v-if="submitterDefaultFields.length">
+    <hr class="mb-2">
+    <template
+      v-for="field in submitterDefaultFields"
+      :key="field.name"
+    >
+      <div
+        :style="{ backgroundColor: backgroundColor }"
+        draggable="true"
+        class="border border-base-300 rounded rounded-tr-none relative group mb-2"
+        @dragstart="onDragstart({ type: 'text', ...field })"
+        @dragend="$emit('drag-end')"
+      >
+        <div class="flex items-center justify-between relative cursor-grab">
+          <div class="flex items-center p-1 space-x-1">
+            <IconDrag />
+            <FieldType
+              :model-value="field.type || 'text'"
+              :editable="false"
+              :button-width="20"
+            />
+            <span class="block pl-0.5">
+              {{ field.name }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+  <div
+    v-if="editable"
+    class="grid grid-cols-3 gap-1 pb-2"
+  >
     <template
       v-for="(icon, type) in fieldIcons"
       :key="type"
@@ -32,37 +72,14 @@
       <button
         v-if="withPhone || type != 'phone'"
         draggable="true"
-        class="flex items-center justify-center border border-dashed border-base-300 w-full rounded relative"
+        class="group flex items-center justify-center border border-dashed border-base-300 hover:border-base-content/20 w-full rounded relative"
         :style="{ backgroundColor: backgroundColor }"
-        @dragstart="onDragstart(type)"
+        @dragstart="onDragstart({ type: type })"
         @dragend="$emit('drag-end')"
         @click="addField(type)"
       >
-        <div class="w-0 absolute left-0">
+        <div class="flex items-console group-hover:bg-base-200/50 transition-all cursor-grab h-full absolute left-0">
-          <svg
+          <IconDrag class=" my-auto" />
-            xmlns="http://www.w3.org/2000/svg"
-            class="cursor-grab"
-            width="18"
-            height="18"
-            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"
-            />
-            <path d="M9 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
-            <path d="M9 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
-            <path d="M9 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
-            <path d="M15 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
-            <path d="M15 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
-            <path d="M15 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
-          </svg>
         </div>
         <div class="flex items-center flex-col px-2 py-2">
           <component :is="icon" />
@@ -73,7 +90,7 @@
       </button>
       <div
         v-else
-        class="tooltip flex"
+        class="tooltip tooltip-bottom-end flex"
         data-tip="Unlock SMS-verified phone number field with paid plan. Use text field for phone numbers without verification."
       >
         <a
@@ -100,16 +117,13 @@
     </template>
   </div>
   <div
-    v-if="fields.length < 4"
+    v-if="fields.length < 4 && editable"
     class="text-xs p-2 border border-base-200 rounded"
   >
     <ul class="list-disc list-outside ml-3">
       <li>
         Draw a text field on the page with a mouse
       </li>
-      <li>
-        Single click on the page to add a checkbox
-      </li>
       <li>
         Drag &amp; drop any other field type on the page
       </li>
@@ -126,12 +140,15 @@ import { v4 } from 'uuid'
 import FieldType from './field_type'
 import FieldSubmitter from './field_submitter'
 import { IconLock } from '@tabler/icons-vue'
+import IconDrag from './icon_drag'
 
 export default {
   name: 'TemplateFields',
   components: {
     Field,
+    FieldType,
     FieldSubmitter,
+    IconDrag,
     IconLock
   },
   inject: ['save', 'backgroundColor', 'withPhone'],
@@ -140,6 +157,16 @@ export default {
       type: Array,
       required: true
     },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    defaultFields: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     withStickySubmitters: {
       type: Boolean,
       required: false,
@@ -155,16 +182,44 @@ export default {
     }
   },
   emits: ['set-draw', 'set-drag', 'drag-end', 'scroll-to-area', 'change-submitter'],
+  data () {
+    return {
+      dragField: null
+    }
+  },
   computed: {
     fieldNames: FieldType.computed.fieldNames,
     fieldIcons: FieldType.computed.fieldIcons,
     submitterFields () {
       return this.fields.filter((f) => f.submitter_uuid === this.selectedSubmitter.uuid)
+    },
+    submitterDefaultFields () {
+      return this.defaultFields.filter((f) => {
+        return !this.submitterFields.find((field) => field.name === f.name) && (!f.role || f.role === this.selectedSubmitter.name)
+      })
     }
   },
   methods: {
-    onDragstart (fieldType) {
+    onDragstart (field) {
-      this.$emit('set-drag', fieldType)
+      this.$emit('set-drag', field)
+    },
+    onFieldDragover (e) {
+      const targetFieldUuid = e.target.closest('[data-uuid]')?.dataset?.uuid
+
+      if (this.dragField && targetFieldUuid && this.dragField.uuid !== targetFieldUuid) {
+        const field = this.fields.find((f) => f.uuid === targetFieldUuid)
+
+        const currentIndex = this.fields.indexOf(this.dragField)
+        const targetIndex = this.fields.indexOf(field)
+
+        if (currentIndex < targetIndex) {
+          this.fields.splice(targetIndex + 1, 0, this.dragField)
+          this.fields.splice(currentIndex, 1)
+        } else {
+          this.fields.splice(targetIndex, 0, this.dragField)
+          this.fields.splice(currentIndex + 1, 1)
+        }
+      }
     },
     removeSubmitter (submitter) {
       [...this.fields].forEach((field) => {
@@ -181,26 +236,6 @@ export default {
 
       this.save()
     },
-    move (field, direction) {
-      const currentIndex = this.submitterFields.indexOf(field)
-      const fieldsIndex = this.fields.indexOf(field)
-
-      this.fields.splice(fieldsIndex, 1)
-
-      if (currentIndex + direction > this.submitterFields.length) {
-        const firstIndex = this.fields.indexOf(this.submitterFields[0])
-
-        this.fields.splice(firstIndex, 0, field)
-      } else if (currentIndex + direction < 0) {
-        const lastIndex = this.fields.indexOf(this.submitterFields[this.submitterFields.length - 1])
-
-        this.fields.splice(lastIndex + 1, 0, field)
-      } else {
-        this.fields.splice(fieldsIndex + direction, 0, field)
-      }
-
-      this.save()
-    },
     removeField (field) {
       this.fields.splice(this.fields.indexOf(field), 1)
 
@@ -217,11 +252,15 @@ export default {
       }
 
       if (['select', 'multiple', 'radio'].includes(type)) {
-        field.options = ['']
+        field.options = [{ value: '', uuid: v4() }]
       }
 
       this.fields.push(field)
 
+      if (['signature', 'initials', 'cells'].includes(type)) {
+        this.$emit('set-draw', { field })
+      }
+
       this.save()
     }
   }

app/javascript/template_builder/icon_drag.vue

@@ -0,0 +1,31 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="18"
+    height="18"
+    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"
+    />
+    <path d="M9 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+    <path d="M9 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+    <path d="M9 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+    <path d="M15 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+    <path d="M15 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+    <path d="M15 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'DragIcon'
+}
+</script>

app/javascript/template_builder/mobile_draw_field.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="fixed text-center w-full bottom-0 pr-6 mb-4">
+    <span class="w-full bg-base-200 px-4 py-2 rounded-md inline-flex space-x-2 mx-auto items-center justify-between mb-2 z-20 md:hidden">
+      <div class="flex items-center space-x-2">
+        <component
+          :is="fieldIcons[drawField.type]"
+          :width="20"
+          :height="20"
+          class="inline"
+          :stroke-width="1.6"
+        />
+        <span> Draw {{ fieldNames[drawField.type] }} Field </span>
+      </div>
+      <a
+        href="#"
+        class="link block text-center"
+        @click.prevent="$emit('cancel')"
+      >
+        Cancel
+      </a>
+    </span>
+    <FieldSubmitter
+      :model-value="selectedSubmitter.uuid"
+      :submitters="submitters"
+      :editable="editable"
+      :mobile-view="true"
+      @new-submitter="save"
+      @remove="removeSubmitter"
+      @name-change="save"
+      @update:model-value="$emit('change-submitter', submitters.find((s) => s.uuid === $event))"
+    />
+  </div>
+</template>
+
+<script>
+import Field from './field'
+import FieldType from './field_type'
+import FieldSubmitter from './field_submitter'
+
+export default {
+  name: 'MobileDrawField',
+  components: {
+    Field,
+    FieldSubmitter
+  },
+  inject: ['save'],
+  props: {
+    drawField: {
+      type: Object,
+      required: true
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    submitters: {
+      type: Array,
+      required: true
+    },
+    fields: {
+      type: Array,
+      required: true
+    },
+    selectedSubmitter: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['change-submitter', 'cancel'],
+  computed: {
+    fieldNames: FieldType.computed.fieldNames,
+    fieldIcons: FieldType.computed.fieldIcons
+  },
+  methods: {
+    removeSubmitter (submitter) {
+      [...this.fields].forEach((field) => {
+        if (field.submitter_uuid === submitter.uuid) {
+          this.removeField(field)
+        }
+      })
+
+      this.submitters.splice(this.submitters.indexOf(submitter), 1)
+
+      if (this.selectedSubmitter === submitter) {
+        this.$emit('change-submitter', this.submitters[0])
+      }
+
+      this.save()
+    },
+    removeField (field) {
+      this.fields.splice(this.fields.indexOf(field), 1)
+
+      this.save()
+    }
+  }
+}
+</script>

app/javascript/template_builder/page.vue

@@ -1,12 +1,16 @@
 <template>
-  <div class="relative cursor-crosshair select-none">
+  <div
+    class="relative cursor-crosshair select-none"
+    :style="drawField ? 'touch-action: none' : ''"
+  >
     <img
       ref="image"
+      loading="lazy"
       :src="image.url"
       :width="width"
-      class="border rounded mb-4"
       :height="height"
-      loading="lazy"
+      class="border rounded mb-4"
+      @load="onImageLoad"
     >
     <div
       class="top-0 bottom-0 left-0 right-0 absolute"
@@ -18,6 +22,7 @@
         :ref="setAreaRefs"
         :area="item.area"
         :field="item.field"
+        :editable="editable"
         @start-resize="resizeDirection = $event"
         @stop-resize="resizeDirection = null"
         @start-drag="isMove = true"
@@ -32,12 +37,13 @@
       />
     </div>
     <div
-      v-show="resizeDirection || isMove || isDrag || showMask"
+      v-show="resizeDirection || isMove || isDrag || showMask || (drawField && isMobile)"
       id="mask"
       ref="mask"
-      class="top-0 bottom-0 left-0 right-0 absolute z-10"
+      class="top-0 bottom-0 left-0 right-0 absolute"
-      :class="{ 'cursor-grab': isDrag || isMove, 'cursor-nwse-resize': drawField, [resizeDirectionClasses[resizeDirection]]: !!resizeDirectionClasses }"
+      :class="{ 'z-10': !isMobile, 'cursor-grab': isDrag || isMove, 'cursor-nwse-resize': drawField, [resizeDirectionClasses[resizeDirection]]: !!resizeDirectionClasses }"
       @pointermove="onPointermove"
+      @pointerdown="onStartDraw"
       @dragover.prevent
       @drop="onDrop"
       @pointerup="onPointerup"
@@ -72,6 +78,11 @@ export default {
       required: false,
       default: null
     },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     isDrag: {
       type: Boolean,
       required: false,
@@ -93,6 +104,9 @@ export default {
     }
   },
   computed: {
+    isMobile () {
+      return /android|iphone|ipad/i.test(navigator.userAgent)
+    },
     resizeDirectionClasses () {
       return {
         nwse: 'cursor-nwse-resize',
@@ -110,6 +124,10 @@ export default {
     this.areaRefs = []
   },
   methods: {
+    onImageLoad (e) {
+      e.target.setAttribute('width', e.target.naturalWidth)
+      e.target.setAttribute('height', e.target.naturalHeight)
+    },
     setAreaRefs (el) {
       if (el) {
         this.areaRefs.push(el)
@@ -125,6 +143,14 @@ export default {
       })
     },
     onStartDraw (e) {
+      if (this.isMobile && !this.drawField) {
+        return
+      }
+
+      if (!this.editable) {
+        return
+      }
+
       this.showMask = true
 
       this.$nextTick(() => {

app/javascript/template_builder/preview.vue

@@ -12,10 +12,14 @@
         class="group flex justify-end cursor-pointer top-0 bottom-0 left-0 right-0 absolute p-1"
         @click="$emit('scroll-to', item)"
       >
-        <div class="flex justify-between w-full">
+        <div
+          v-if="editable"
+          class="flex justify-between w-full"
+        >
           <div style="width: 26px" />
           <div class="">
             <ReplaceButton
+              v-if="withReplaceButton"
               :is-direct-upload="isDirectUpload"
               :template-id="template.id"
               :accept-file-types="acceptFileTypes"
@@ -95,11 +99,21 @@ export default {
       type: Object,
       required: true
     },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     acceptFileTypes: {
       type: String,
       required: false,
       default: 'image/*, application/pdf'
     },
+    withReplaceButton: {
+      type: Boolean,
+      required: true,
+      default: true
+    },
     isDirectUpload: {
       type: Boolean,
       required: true,
@@ -114,7 +128,7 @@ export default {
   emits: ['scroll-to', 'change', 'remove', 'up', 'down', 'replace'],
   computed: {
     previewImage () {
-      return this.document.preview_images[0]
+      return [...this.document.preview_images].sort((a, b) => parseInt(a.filename) - parseInt(b.filename))[0]
     }
   },
   mounted () {

app/jobs/process_submitter_completion_job.rb

@@ -10,28 +10,29 @@ class ProcessSubmitterCompletionJob < ApplicationJob
 
     Submissions::EnsureResultGenerated.call(submitter)
 
-    if submitter.account.encrypted_configs.exists?(key: EncryptedConfig::WEBHOOK_URL_KEY)
+    if is_all_completed && submitter.completed_at == submitter.submission.submitters.maximum(:completed_at)
-      SendWebhookRequestJob.perform_later(submitter)
+      Submissions::GenerateAuditTrail.call(submitter.submission)
+
+      enqueue_completed_emails(submitter)
     end
 
-    return unless is_all_completed
+    return if Accounts.load_webhook_configs(submitter.account).blank?
-    return if submitter.completed_at != submitter.submission.submitters.maximum(:completed_at)
 
-    Submissions::GenerateAuditTrail.call(submitter.submission)
+    SendFormCompletedWebhookRequestJob.perform_later(submitter)
-
-    enqueue_emails(submitter)
   end
 
-  def enqueue_emails(submitter)
+  def enqueue_completed_emails(submitter)
     user = submitter.submission.created_by_user || submitter.template.author
 
     if submitter.template.account.users.exists?(id: user.id)
-      bcc = submitter.submission.template.account.account_configs.find_by(key: 'bcc_emails')&.value
+      bcc = submitter.submission.template.account.account_configs
+                     .find_by(key: AccountConfig::BCC_EMAILS)&.value
 
       SubmitterMailer.completed_email(submitter, user, bcc:).deliver_later!
     end
 
-    to = submitter.submission.submitters.sort_by(&:completed_at).select(&:email?).map(&:friendly_name).join(', ')
+    to = submitter.submission.submitters.reject { |e| e.preferences['send_email'] == false }
+                  .sort_by(&:completed_at).select(&:email?).map(&:friendly_name).join(', ')
 
     SubmitterMailer.documents_copy_email(submitter, to:).deliver_later! if to.present?
   end
@@ -48,6 +49,6 @@ class ProcessSubmitterCompletionJob < ApplicationJob
 
     next_submitter = submitter.submission.submitters.find { |s| s.uuid == next_submitter_item['uuid'] }
 
-    Submitters.send_signature_requests([next_submitter], send_email: true)
+    Submitters.send_signature_requests([next_submitter])
   end
 end

app/jobs/send_form_completed_webhook_request_job.rb

@@ -1,10 +1,10 @@
 # frozen_string_literal: true
 
-class SendWebhookRequestJob < ApplicationJob
+class SendFormCompletedWebhookRequestJob < ApplicationJob
   USER_AGENT = 'DocuSeal.co Webhook'
 
   def perform(submitter)
-    config = submitter.submission.account.encrypted_configs.find_by(key: EncryptedConfig::WEBHOOK_URL_KEY)
+    config = Accounts.load_webhook_configs(submitter.submission.account)
 
     return if config.blank? || config.value.blank?
 
@@ -14,8 +14,8 @@ class SendWebhookRequestJob < ApplicationJob
 
     Faraday.post(config.value,
                  {
-                   event_type: 'form.submitted',
+                   event_type: 'form.completed',
-                   timestamp: Time.current.iso8601,
+                   timestamp: Time.current,
                    data: Submitters::SerializeForWebhook.call(submitter)
                  }.to_json,
                  'Content-Type' => 'application/json',

app/jobs/send_form_started_webhook_request_job.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class SendFormStartedWebhookRequestJob < ApplicationJob
+  USER_AGENT = 'DocuSeal.co Webhook'
+
+  def perform(submitter)
+    config = Accounts.load_webhook_configs(submitter.submission.account)
+
+    return if config.blank? || config.value.blank?
+
+    ActiveStorage::Current.url_options = Docuseal.default_url_options
+
+    Faraday.post(config.value,
+                 {
+                   event_type: 'form.started',
+                   timestamp: Time.current,
+                   data: Submitters::SerializeForWebhook.call(submitter)
+                 }.to_json,
+                 'Content-Type' => 'application/json',
+                 'User-Agent' => USER_AGENT)
+  end
+end

app/jobs/send_form_viewed_webhook_request_job.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class SendFormViewedWebhookRequestJob < ApplicationJob
+  USER_AGENT = 'DocuSeal.co Webhook'
+
+  def perform(submitter)
+    config = Accounts.load_webhook_configs(submitter.submission.account)
+
+    return if config.blank? || config.value.blank?
+
+    ActiveStorage::Current.url_options = Docuseal.default_url_options
+
+    Faraday.post(config.value,
+                 {
+                   event_type: 'form.viewed',
+                   timestamp: Time.current,
+                   data: Submitters::SerializeForWebhook.call(submitter)
+                 }.to_json,
+                 'Content-Type' => 'application/json',
+                 'User-Agent' => USER_AGENT)
+  end
+end

app/jobs/send_submitter_invitation_email_job.rb

@@ -1,7 +1,9 @@
 # frozen_string_literal: true
 
 class SendSubmitterInvitationEmailJob < ApplicationJob
-  def perform(submitter)
+  def perform(params = {})
+    submitter = Submitter.find(params['submitter_id'])
+
     SubmitterMailer.invitation_email(submitter).deliver_now!
 
     SubmissionEvent.create!(submitter:, event_type: 'send_email')

app/mailers/submitter_mailer.rb

@@ -1,20 +1,28 @@
 # frozen_string_literal: true
 
 class SubmitterMailer < ApplicationMailer
-  DEFAULT_MESSAGE = %(You have been invited to submit the "%<name>s" form:)
+  MAX_ATTACHMENTS_SIZE = 10.megabytes
 
-  def invitation_email(submitter, message: '')
+  DEFAULT_INVITATION_SUBJECT = 'You are invited to submit a form'
+
+  def invitation_email(submitter)
     @current_account = submitter.submission.template.account
     @submitter = submitter
-    @message = message.presence || format(DEFAULT_MESSAGE, name: submitter.submission.template.name)
 
-    @email_config = @current_account.account_configs.find_by(key: AccountConfig::SUBMITTER_INVITATION_EMAIL_KEY)
+    if submitter.preferences['email_message_uuid']
+      @email_message = submitter.account.email_messages.find_by(uuid: submitter.preferences['email_message_uuid'])
+    end
+
+    @body = @email_message&.body.presence
+    @subject = @email_message&.subject.presence
+
+    @email_config = AccountConfigs.find_for_account(@current_account, AccountConfig::SUBMITTER_INVITATION_EMAIL_KEY)
 
     subject =
-      if @email_config
+      if @email_config || @subject
-        ReplaceEmailVariables.call(@email_config.value['subject'], submitter:)
+        ReplaceEmailVariables.call(@subject || @email_config.value['subject'], submitter:)
       else
-        'You have been invited to submit a form'
+        DEFAULT_INVITATION_SUBJECT
       end
 
     mail(to: @submitter.friendly_name,
@@ -31,7 +39,7 @@ class SubmitterMailer < ApplicationMailer
 
     Submissions::EnsureResultGenerated.call(submitter)
 
-    @email_config = @current_account.account_configs.find_by(key: AccountConfig::SUBMITTER_COMPLETED_EMAIL_KEY)
+    @email_config = AccountConfigs.find_for_account(@current_account, AccountConfig::SUBMITTER_COMPLETED_EMAIL_KEY)
 
     add_completed_email_attachments!(submitter)
 
@@ -58,13 +66,13 @@ class SubmitterMailer < ApplicationMailer
 
     @documents = add_completed_email_attachments!(submitter)
 
-    @email_config = @current_account.account_configs.find_by(key: AccountConfig::SUBMITTER_DOCUMENTS_COPY_EMAIL_KEY)
+    @email_config = AccountConfigs.find_for_account(@current_account, AccountConfig::SUBMITTER_DOCUMENTS_COPY_EMAIL_KEY)
 
     subject =
       if @email_config
         ReplaceEmailVariables.call(@email_config.value['subject'], submitter:)
       else
-        'Your copy of documents'
+        'Your document copy'
       end
 
     mail(from: from_address_for_submitter(submitter),
@@ -77,13 +85,24 @@ class SubmitterMailer < ApplicationMailer
   def add_completed_email_attachments!(submitter)
     documents = Submitters.select_attachments_for_download(submitter)
 
+    total_size = 0
+    audit_trail_data = nil
+
+    if submitter.submission.audit_trail.present?
+      audit_trail_data = submitter.submission.audit_trail.download
+
+      total_size = audit_trail_data.size
+    end
+
     documents.each do |attachment|
+      total_size += attachment.byte_size
+
+      break if total_size >= MAX_ATTACHMENTS_SIZE
+
       attachments[attachment.filename.to_s] = attachment.download
     end
 
-    if submitter.submission.audit_trail.present?
+    attachments[submitter.submission.audit_trail.filename.to_s] = audit_trail_data if audit_trail_data
-      attachments[submitter.submission.audit_trail.filename.to_s] = submitter.submission.audit_trail.download
-    end
 
     documents
   end

app/mailers/user_mailer.rb

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 
 class UserMailer < ApplicationMailer
-  def invitation_email(user)
+  def invitation_email(user, invited_by: nil)
-    @current_account = user.account
+    @current_account = invited_by&.account || user.account
     @user = user
     @token = @user.send(:set_reset_password_token)
 
     mail(to: @user.friendly_name,
-         subject: 'You have been invited to Docuseal')
+         subject: 'You are invited to DocuSeal')
   end
 end