use alpine3.18

Dockerfile

@@ -24,7 +24,7 @@ COPY ./app/views ./app/views
 
 RUN echo "gem 'shakapacker'" > Gemfile && ./bin/shakapacker
 
-FROM ruby:3.2.2-alpine as app
+FROM ruby:3.2.2-alpine3.18 as app
 
 ENV RAILS_ENV=production
 ENV BUNDLE_WITHOUT="development:test"

Gemfile

@@ -21,8 +21,6 @@ gem 'jwt'
 gem 'lograge'
 gem 'mysql2', require: false
 gem 'oj'
-gem 'omniauth-google-oauth2'
-gem 'omniauth-rails_csrf_protection'
 gem 'pagy'
 gem 'pdf-reader'
 gem 'pg', require: false

Gemfile.lock

@@ -245,8 +245,7 @@ GEM
       signet (>= 0.16, < 2.a)
     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)
@@ -296,7 +295,6 @@ GEM
     minitest (5.20.0)
     msgpack (1.7.2)
     multi_json (1.15.0)
-    multi_xml (0.6.0)
     multipart-post (2.3.0)
     mysql2 (0.5.5)
     net-http-persistent (4.0.2)
@@ -316,30 +314,8 @@ GEM
       racc (~> 1.4)
     nokogiri (1.15.4-arm64-darwin)
       racc (~> 1.4)
-    oauth2 (2.0.9)
-      faraday (>= 0.17.3, < 3.0)
-      jwt (>= 1.0, < 3.0)
-      multi_xml (~> 0.5)
-      rack (>= 1.2, < 4)
-      snaky_hash (~> 2.0)
-      version_gem (~> 1.1)
     oj (3.16.0)
-    omniauth (2.1.1)
-      hashie (>= 3.4.6)
-      rack (>= 2.2.3)
-      rack-protection
-    omniauth-google-oauth2 (1.1.1)
-      jwt (>= 2.0)
-      oauth2 (~> 2.0.6)
-      omniauth (~> 2.0)
-      omniauth-oauth2 (~> 1.8.0)
-    omniauth-oauth2 (1.8.0)
-      oauth2 (>= 1.4, < 3)
-      omniauth (~> 2.0)
-    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)
@@ -372,8 +348,6 @@ GEM
       nio4r (~> 2.0)
     racc (1.7.1)
     rack (2.2.8)
-    rack-protection (3.1.0)
-      rack (~> 2.2, >= 2.2.4)
     rack-proxy (0.7.6)
       rack
     rack-test (2.1.0)
@@ -514,9 +488,6 @@ GEM
     simplecov-html (0.12.3)
     simplecov_json_formatter (0.1.4)
     smart_properties (1.17.0)
-    snaky_hash (2.0.1)
-      hashie
-      version_gem (~> 1.1, >= 1.1.1)
     sqlite3 (1.6.3)
       mini_portile2 (~> 2.8.0)
     sqlite3 (1.6.3-arm64-darwin)
@@ -537,7 +508,6 @@ GEM
     uber (0.1.0)
     unicode-display_width (2.5.0)
     uniform_notifier (1.16.0)
-    version_gem (1.1.3)
     warden (1.2.9)
       rack (>= 2.0.9)
     web-console (4.2.0)
@@ -589,8 +559,6 @@ DEPENDENCIES
   lograge
   mysql2
   oj
-  omniauth-google-oauth2
-  omniauth-rails_csrf_protection
   pagy
   pdf-reader
   pg

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
@@ -76,7 +76,7 @@ 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.

app/controllers/account_configs_controller.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+class AccountConfigsController < ApplicationController
+  before_action :load_account_config
+  authorize_resource :account_config
+
+  ALLOWED_KEYS = [
+    AccountConfig::ALLOW_TYPED_SIGNATURE,
+    AccountConfig::FORCE_MFA
+  ].freeze
+
+  def create
+    @account_config.update!(account_config_params)
+
+    head :ok
+  end
+
+  private
+
+  def load_account_config
+    return head :not_found unless ALLOWED_KEYS.include?(account_config_params[:key])
+
+    @account_config =
+      AccountConfig.find_or_initialize_by(account: current_account, key: account_config_params[:key])
+  end
+
+  def account_config_params
+    params.required(:account_config).permit!.tap do |attrs|
+      attrs[:value] = attrs[:value] == '1' if attrs[:value].in?(%w[1 0])
+    end
+  end
+end

app/controllers/api/submissions_controller.rb

@@ -3,7 +3,7 @@
 module Api
   class SubmissionsController < ApiBaseController
     load_and_authorize_resource :template, only: :create
-    load_and_authorize_resource :submission, only: %i[show index]
+    load_and_authorize_resource :submission, only: %i[show index destroy]
 
     before_action only: :create do
       authorize!(:create, Submission)
@@ -13,6 +13,10 @@ module Api
       submissions = Submissions.search(@submissions, params[:q])
       submissions = submissions.where(template_id: params[:template_id]) if params[:template_id].present?
 
+      if params[:template_folder].present?
+        submissions = submissions.joins(template: :folder).where(folder: { name: params[:template_folder] })
+      end
+
       submissions = paginate(submissions.preload(:created_by_user, :template, :submitters,
                                                  audit_trail_attachment: :blob))
 
@@ -50,35 +54,14 @@ module Api
     end
 
     def create
-      is_send_email = !params[:send_email].in?(['false', false])
+      params[:send_email] = true unless params.key?(:send_email)
+      params[:send_sms] = false unless params.key?(:send_sms)
 
-      submissions =
-        if (emails = (params[:emails] || params[:email]).presence) && params[:submission].blank?
-          Submissions.create_from_emails(template: @template,
-                                         user: current_user,
-                                         source: :api,
-                                         mark_as_sent: is_send_email,
-                                         emails:)
-        else
-          submissions_attrs, attachments = normalize_submissions_params!(submissions_params[:submission], @template)
+      submissions = create_submissions(@template, params)
 
-          Submissions.create_from_submitters(
-            template: @template,
-            user: current_user,
-            source: :api,
-            mark_as_sent: is_send_email,
-            submitters_order: params[:submitters_order] || 'preserved',
-            submissions_attrs:
-          )
-        end
+      Submissions.send_signature_requests(submissions)
 
-      Submissions.send_signature_requests(submissions, send_email: is_send_email)
-
-      submitters = submissions.flat_map(&:submitters)
-
-      save_default_value_attachments!(attachments, submitters)
-
-      render json: submitters
+      render json: submissions.flat_map(&:submitters)
     rescue Submitters::NormalizeValues::UnknownFieldName, Submitters::NormalizeValues::UnknownSubmitterName => e
       render json: { error: e.message }, status: :unprocessable_entity
     end
@@ -91,6 +74,37 @@ module Api
 
     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 =
+          Submissions::NormalizeParamUtils.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:
+        )
+
+        Submissions::NormalizeParamUtils.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],
@@ -107,54 +121,19 @@ module Api
     end
 
     def submissions_params
-      params.permit(submission: [{
-                      submitters: [[:uuid, :name, :email, :role, :completed, :phone, :application_key,
-                                    { values: {}, readonly_fields: [],
-                                      fields: [%i[name default_value readonly validation_pattern invalid_message]] }]]
-                    }])
-    end
+      key = params.key?(:submission) ? :submission : :submissions
 
-    def normalize_submissions_params!(submissions_params, template)
-      attachments = []
-
-      Array.wrap(submissions_params).each do |submission|
-        submission[:submitters].each_with_index do |submitter, index|
-          default_values = submitter[:values] || {}
-
-          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, attachments]
-    end
-
-    def save_default_value_attachments!(attachments, submitters)
-      return if attachments.blank?
-
-      attachments_index = attachments.index_by(&:uuid)
-
-      submitters.each do |submitter|
-        submitter.values.to_a.each do |_, value|
-          attachment = attachments_index[value]
-
-          next unless attachment
-
-          attachment.record = submitter
-
-          attachment.save!
-        end
-      end
+      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
   end
 end

app/controllers/api/submitters_controller.rb

@@ -30,5 +30,79 @@ module Api
 
       render json: Submitters::SerializeForApi.call(@submitter, with_template: true, with_events: true)
     end
+
+    def update
+      if @submitter.completed_at?
+        return render json: { error: 'Submitter has already completed the submission.' }, status: :unprocessable_entity
+      end
+
+      role = @submitter.submission.template_submitters.find { |e| e['uuid'] == @submitter.uuid }['name']
+
+      normalized_params, new_attachments =
+        Submissions::NormalizeParamUtils.normalize_submitter_params!(submitter_params.merge(role:), @submitter.template,
+                                                                     for_submitter: @submitter)
+
+      Submissions::CreateFromSubmitters.maybe_set_template_fields(@submitter.submission,
+                                                                  [normalized_params],
+                                                                  submitter_uuid: @submitter.uuid)
+
+      assign_submitter_attrs(@submitter, normalized_params)
+
+      ApplicationRecord.transaction do
+        Submissions::NormalizeParamUtils.save_default_value_attachments!(new_attachments, [@submitter])
+
+        @submitter.save!
+
+        @submitter.submission.save!
+      end
+
+      if @submitter.completed_at?
+        ProcessSubmitterCompletionJob.perform_later(@submitter)
+      elsif normalized_params[:send_email] || normalized_params[:send_sms]
+        Submitters.send_signature_requests([@submitter])
+      end
+
+      render json: Submitters::SerializeForApi.call(@submitter, with_template: false, with_events: false)
+    end
+
+    def submitter_params
+      submitter_params = params.key?(:submitter) ? params.require(:submitter) : params
+
+      submitter_params.permit(
+        :send_email, :send_sms, :uuid, :name, :email, :role, :completed, :phone, :application_key,
+        { values: {}, readonly_fields: [], message: %i[subject body],
+          fields: [%i[name default_value readonly validation_pattern invalid_message]] }
+      )
+    end
+
+    private
+
+    def assign_submitter_attrs(submitter, attrs)
+      submitter.email = Submissions.normalize_email(attrs[:email]) if attrs.key?(:email)
+      submitter.phone = attrs[:phone].to_s.gsub(/[^0-9+]/, '') if attrs.key?(:phone)
+      submitter.values = submitter.values.merge(attrs[:values].to_unsafe_h) if attrs[:values]
+      submitter.completed_at = attrs[:completed] ? Time.current : submitter.completed_at
+      submitter.application_key = attrs[:application_key] if attrs.key?(:application_key)
+
+      assign_preferences(submitter, attrs)
+
+      submitter
+    end
+
+    def assign_preferences(submitter, attrs)
+      submitter_preferences = Submitters.normalize_preferences(submitter.account, current_user, attrs)
+
+      if submitter_preferences.key?('send_email')
+        submitter.preferences['send_email'] = submitter_preferences['send_email']
+      end
+
+      submitter.preferences['send_sms'] = submitter_preferences['send_sms'] if submitter_preferences.key?('send_sms')
+
+      return unless submitter_preferences.key?('email_message_uuid')
+
+      submitter.preferences['email_message_uuid'] = submitter_preferences['email_message_uuid']
+
+      submitter
+    end
   end
 end

app/controllers/api/templates_clone_controller.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Api
+  class TemplatesCloneController < ApiBaseController
+    load_and_authorize_resource :template
+
+    def create
+      authorize!(:manage, @template)
+
+      template = current_account.templates.new(source: :api)
+
+      template.application_key = params[:application_key]
+      template.name = params[:name] || "#{@template.name} (Clone)"
+      template.account = @template.account
+      template.author = current_user
+      template.assign_attributes(@template.slice(:folder_id, :fields, :schema, :submitters))
+
+      if params[:folder_name].present?
+        template.folder = TemplateFolders.find_or_create_by_name(current_user, params[:folder_name])
+      end
+
+      template.save!
+
+      Templates::CloneAttachments.call(template:, original_template: @template)
+
+      render json: template.as_json(serialize_params)
+    end
+
+    private
+
+    def serialize_params
+      {
+        include: { author: { only: %i[id email first_name last_name] },
+                   documents: { only: %i[id uuid], methods: %i[url filename] } }
+      }
+    end
+  end
+end

app/controllers/api/templates_controller.rb

@@ -9,6 +9,7 @@ module Api
 
       templates = params[:archived] ? templates.archived : templates.active
       templates = templates.where(application_key: params[:application_key]) if params[:application_key].present?
+      templates = templates.joins(:folder).where(folder: { name: params[:folder] }) if params[:folder].present?
 
       templates = paginate(templates.preload(:author, documents_attachments: :blob))
 
@@ -57,7 +58,9 @@ module Api
         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]] }]]
+                  { preferences: {},
+                    options: [%i[value uuid]],
+                    areas: [%i[x y w h cell_w attachment_uuid option_uuid page]] }]]
       )
     end
   end

app/controllers/application_controller.rb

@@ -44,8 +44,9 @@ class ApplicationController < ActionController::Base
     redirect_to setup_index_path unless User.exists?
   end
 
-  def button_title(title: 'Submit', disabled_with: 'Submitting', icon: nil, icon_disabled: nil)
-    render_to_string(partial: 'shared/button_title', locals: { title:, disabled_with:, icon:, icon_disabled: })
+  def button_title(title: 'Submit', disabled_with: 'Submitting', title_class: '', icon: nil, icon_disabled: nil)
+    render_to_string(partial: 'shared/button_title',
+                     locals: { title:, disabled_with:, title_class:, icon:, icon_disabled: })
   end
 
   def svg_icon(icon_name, class: '')

app/controllers/dashboard_controller.rb

@@ -5,6 +5,7 @@ class DashboardController < ApplicationController
 
   before_action :maybe_redirect_product_url
   before_action :maybe_render_landing
+  before_action :maybe_redirect_mfa_setup
 
   load_and_authorize_resource :template_folder, parent: false
   load_and_authorize_resource :template, parent: false
@@ -62,6 +63,17 @@ class DashboardController < ApplicationController
     redirect_to Docuseal::PRODUCT_URL, allow_other_host: true
   end
 
+  def maybe_redirect_mfa_setup
+    return unless signed_in?
+    return if current_user.otp_required_for_login
+
+    return if !current_user.otp_required_for_login && !AccountConfig.exists?(value: true,
+                                                                             account_id: current_user.account_id,
+                                                                             key: AccountConfig::FORCE_MFA)
+
+    redirect_to mfa_setup_path, notice: 'Setup 2FA to continue'
+  end
+
   def maybe_render_landing
     return if signed_in?
 

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) && error_status_code == 404
+      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/mfa_setup_controller.rb

@@ -5,13 +5,11 @@ class MfaSetupController < ApplicationController
     authorize!(:update, current_user)
   end
 
-  def new
-    current_user.otp_secret ||= User.generate_otp_secret
+  before_action :set_provision_url, only: %i[show new]
 
-    current_user.save!
+  def show; end
 
-    @provision_url = current_user.otp_provisioning_uri(current_user.email, issuer: Docuseal.product_name)
-  end
+  def new; end
 
   def edit; end
 
@@ -26,7 +24,7 @@ class MfaSetupController < ApplicationController
 
       @error_message = 'Code is invalid'
 
-      render turbo_stream: turbo_stream.replace(:modal, template: 'mfa_setup/new'), status: :unprocessable_entity
+      render turbo_stream: turbo_stream.replace(:mfa_form, partial: 'mfa_setup/form'), status: :unprocessable_entity
     end
   end
 
@@ -41,4 +39,16 @@ class MfaSetupController < ApplicationController
       render turbo_stream: turbo_stream.replace(:modal, template: 'mfa_setup/edit'), status: :unprocessable_entity
     end
   end
+
+  private
+
+  def set_provision_url
+    return redirect_to root_path, alert: '2FA has been set up already' if current_user.otp_required_for_login
+
+    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
 end

app/controllers/notifications_settings_controller.rb

@@ -12,7 +12,7 @@ class NotificationsSettingsController < ApplicationController
   def index; end
 
   def create
-    if @account_config.save
+    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'

app/controllers/omniauth_callbacks_controller.rb

@@ -1,16 +0,0 @@
-# frozen_string_literal: true
-
-class OmniauthCallbacksController < Devise::OmniauthCallbacksController
-  def google_oauth2
-    @user = Users.from_omniauth(request.env['omniauth.auth'])
-
-    if @user.persisted?
-      flash[:notice] = I18n.t('devise.omniauth_callbacks.success', kind: 'Google')
-
-      sign_in_and_redirect @user, event: :authentication
-    else
-      redirect_to new_registration_path(oauth_callback: true, user: @user.slice(:email, :first_name, :last_name)),
-                  notice: 'Please complete registration with Google auth'
-    end
-  end
-end

app/controllers/start_form_controller.rb

@@ -14,21 +14,20 @@ class StartFormController < ApplicationController
 
   def update
     @submitter = Submitter.where(submission: @template.submissions.where(deleted_at: nil))
+                          .order(id: :desc)
                           .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'],
-        ip: request.remote_ip,
-        ua: request.user_agent
-      )
+      if @template.submitters.to_a.size > 1 && @submitter.new_record?
+        @error_message = 'Not found'
 
-      @submitter.submission ||= Submission.new(template: @template,
-                                               template_submitters: @template.submitters,
-                                               source: :link)
+        return render :show
+      end
+
+      assign_submission_attributes(@submitter, @template) if @submitter.new_record?
 
       if @submitter.save
         redirect_to submit_form_path(@submitter.slug)
@@ -46,6 +45,21 @@ class StartFormController < ApplicationController
 
   private
 
+  def assign_submission_attributes(submitter, template)
+    submitter.assign_attributes(
+      uuid: template.submitters.first['uuid'],
+      ip: request.remote_ip,
+      ua: request.user_agent,
+      preferences: { 'send_email' => true }
+    )
+
+    submitter.submission ||= Submission.new(template:,
+                                            template_submitters: template.submitters,
+                                            source: :link)
+
+    submitter
+  end
+
   def submitter_params
     params.require(:submitter).permit(:email, :phone, :name).tap do |attrs|
       attrs[:email] = Submissions.normalize_email(attrs[:email])

app/controllers/submissions_controller.rb

@@ -34,23 +34,30 @@ class SubmissionsController < ApplicationController
   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: params.merge('send_completed_email' => true))
       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: params.merge('send_completed_email' => true))
       end
 
-    Submissions.send_signature_requests(submissions, params)
+    Submissions.send_signature_requests(submissions)
 
     redirect_to template_path(@template), notice: 'New recipients have been added'
   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

@@ -38,6 +38,16 @@ class SubmitFormController < ApplicationController
   def update
     submitter = Submitter.find_by!(slug: params[:slug])
 
+    if submitter.completed_at?
+      return render json: { error: 'Form has been completed already.' }, status: :unprocessable_entity
+    end
+
+    if submitter.template.deleted_at? || submitter.submission.deleted_at?
+      Rollbar.info("Archived template: #{submitter.template.id}") if defined?(Rollbar)
+
+      return render json: { error: 'Form has been archived.' }, status: :unprocessable_entity
+    end
+
     Submitters::SubmitValues.call(submitter, params, request)
 
     head :ok

app/controllers/submitters_send_email_controller.rb

@@ -4,6 +4,13 @@ class SubmittersSendEmailController < ApplicationController
   load_and_authorize_resource :submitter, id_param: :submitter_slug, find_by: :slug
 
   def create
+    if Docuseal.multitenant? && SubmissionEvent.exists?(submitter: @submitter,
+                                                        event_type: 'send_email',
+                                                        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!
 
     SubmissionEvent.create!(submitter: @submitter, event_type: 'send_email')

app/controllers/templates_controller.rb

@@ -58,9 +58,11 @@ class TemplatesController < ApplicationController
 
   def destroy
     notice =
-      if !Docuseal.multitenant? && params[:permanently].present?
+      if params[:permanently].present?
         @template.destroy!
 
+        Rollbar.info("Remove template: #{@template.id}") if defined?(Rollbar)
+
         'Template has been removed.'
       else
         @template.update!(deleted_at: Time.current)

app/controllers/timestamp_server_controller.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+class TimestampServerController < ApplicationController
+  before_action :build_encrypted_config
+  authorize_resource :encrypted_config
+
+  def create
+    return head :not_found if Docuseal.multitenant?
+
+    test_timeserver_url(@encrypted_config.value) if @encrypted_config.value.present?
+
+    if @encrypted_config.value.present? ? @encrypted_config.save : @encrypted_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
+  rescue HexaPDF::Error, SocketError, Submissions::TimestampHandler::TimestampError, OpenSSL::Timestamp::TimestampError
+    redirect_back fallback_location: settings_notifications_path, alert: 'Invalid Timeserver'
+  end
+
+  private
+
+  def test_timeserver_url(url)
+    pdf = HexaPDF::Document.new
+    pdf.pages.add
+
+    pkcs = Accounts.load_signing_pkcs(current_account)
+
+    pdf.sign(StringIO.new,
+             reason: 'Test',
+             certificate: pkcs.certificate,
+             key: pkcs.key,
+             certificate_chain: pkcs.ca_certs || [],
+             timestamp_handler: Submissions::TimestampHandler.new(tsa_url: url))
+  end
+
+  def load_encrypted_config
+    @encrypted_config
+  end
+
+  def build_encrypted_config
+    @encrypted_config =
+      EncryptedConfig.find_or_initialize_by(account: current_account,
+                                            key: EncryptedConfig::TIMESTAMP_SERVER_URL_KEY)
+
+    @encrypted_config.assign_attributes(encrypted_config_params)
+  end
+
+  def encrypted_config_params
+    params.require(:encrypted_config).permit(:value)
+  end
+end

app/controllers/webhook_settings_controller.rb

@@ -7,7 +7,9 @@ class WebhookSettingsController < ApplicationController
   def show; end
 
   def create
-    @encrypted_config.update!(encrypted_config_params)
+    @encrypted_config.assign_attributes(encrypted_config_params)
+
+    @encrypted_config.value.present? ? @encrypted_config.save! : @encrypted_config.delete
 
     redirect_back(fallback_location: settings_webhooks_path, notice: 'Webhook URL has been saved.')
   end

app/javascript/application.js

@@ -79,11 +79,14 @@ window.customElements.define('template-builder', class extends HTMLElement {
   connectedCallback () {
     this.appElem = document.createElement('div')
 
+    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',
+      withPayment: this.dataset.withPayment !== 'false',
       acceptFileTypes: this.dataset.acceptFileTypes,
       isDirectUpload: this.dataset.isDirectUpload === 'true'
     })

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

@@ -10,13 +10,13 @@ window.customElements.define('submission-form', class extends HTMLElement {
 
     this.app = createApp(Form, {
       submitter: JSON.parse(this.dataset.submitter),
-      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,
+      withTypedSignature: this.dataset.withTypedSignature !== 'false',
       values: reactive(JSON.parse(this.dataset.values)),
       completedButton: JSON.parse(this.dataset.completedButton),
       attachments: reactive(JSON.parse(this.dataset.attachments)),

app/javascript/submission_form/area.vue

@@ -2,10 +2,10 @@
   <div
     class="flex absolute lg:text-base"
     :style="computedStyle"
-    :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 }"
+    :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-80': !isActive && !isValueSet && submittable, 'border-red-500 border-dashed z-10': isActive && submittable, 'bg-opacity-40': (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] }}
@@ -53,7 +53,7 @@
       :src="initials.url"
     >
     <div
-      v-else-if="field.type === 'file'"
+      v-else-if="field.type === 'file' || field.type === 'payment'"
       class="px-0.5 flex flex-col justify-center"
     >
       <a
@@ -87,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"
@@ -120,7 +158,7 @@
 </template>
 
 <script>
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck, IconLetterCaseUpper } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard } from '@tabler/icons-vue'
 
 export default {
   name: 'FieldArea',
@@ -193,7 +231,8 @@ export default {
         checkbox: 'Checkbox',
         radio: 'Radio',
         multiple: 'Multiple Select',
-        phone: 'Phone'
+        phone: 'Phone',
+        payment: 'Payment'
       }
     },
     fieldIcons () {
@@ -209,7 +248,8 @@ export default {
         radio: IconCircleDot,
         cells: IconColumns3,
         multiple: IconChecks,
-        phone: IconPhoneCheck
+        phone: IconPhoneCheck,
+        payment: IconCreditCard
       }
     },
     image () {
@@ -233,9 +273,15 @@ export default {
         return null
       }
     },
+    locale () {
+      return Intl.DateTimeFormat().resolvedOptions()?.locale
+    },
     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))
+        return this.formatDate(
+          new Date(this.modelValue),
+          this.field.preferences?.format || (this.locale.endsWith('-US') ? 'MM/DD/YYYY' : 'DD/MM/YYYY')
+        )
       } else {
         return ''
       }
@@ -243,6 +289,8 @@ export default {
     attachments () {
       if (this.field.type === 'file') {
         return (this.modelValue || []).map((uuid) => this.attachmentsIndex[uuid])
+      } else if (this.field.type === 'payment') {
+        return [this.attachmentsIndex[this.modelValue]].filter(Boolean)
       } else {
         return []
       }
@@ -271,6 +319,53 @@ export default {
         this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? this.modelValue.length : 0
       })
     }
+  },
+  methods: {
+    formatDate (date, format) {
+      const monthFormats = {
+        M: 'numeric',
+        MM: '2-digit',
+        MMM: 'short',
+        MMMM: 'long'
+      }
+
+      const dayFormats = {
+        D: 'numeric',
+        DD: '2-digit'
+      }
+
+      const yearFormats = {
+        YYYY: 'numeric',
+        YY: '2-digit'
+      }
+
+      const parts = new Intl.DateTimeFormat([], {
+        day: dayFormats[format.match(/D+/)],
+        month: monthFormats[format.match(/M+/)],
+        year: yearFormats[format.match(/Y+/)],
+        timeZone: 'UTC'
+      }).formatToParts(date)
+
+      return format
+        .replace(/D+/, parts.find((p) => p.type === 'day').value)
+        .replace(/M+/, parts.find((p) => p.type === 'month').value)
+        .replace(/Y+/, parts.find((p) => p.type === 'year').value)
+    },
+    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/areas.vue

@@ -12,6 +12,7 @@
         :key="areaIndex"
       >
         <Teleport
+          v-if="findPageElementForArea(area)"
           :to="findPageElementForArea(area)"
         >
           <FieldArea

app/javascript/submission_form/completed.vue

@@ -21,7 +21,7 @@
         </span>
       </a>
       <button
-        v-if="canSendEmail && !isDemo"
+        v-if="canSendEmail && !isDemo && withSendCopyButton"
         class="white-button !h-auto flex items-center space-x-1 w-full"
         :disabled="isSendingCopy"
         @click.prevent="sendCopyToEmail"
@@ -36,7 +36,7 @@
         </span>
       </button>
       <button
-        v-if="!isWebView"
+        v-if="!isWebView && withDownloadButton"
         class="base-button flex items-center space-x-1 w-full"
         :disabled="isDownloading"
         @click.prevent="download"
@@ -115,6 +115,16 @@ export default {
       required: false,
       default: true
     },
+    withDownloadButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    withSendCopyButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     withConfetti: {
       type: Boolean,
       required: false,

app/javascript/submission_form/form.vue

@@ -223,6 +223,7 @@
             :field="currentField"
             :previous-value="previousSignatureValue"
             :is-direct-upload="isDirectUpload"
+            :with-typed-signature="withTypedSignature"
             :attachments-index="attachmentsIndex"
             :submitter-slug="submitterSlug"
             @attached="attachments.push($event)"
@@ -265,8 +266,22 @@
             @focus="$refs.areas.scrollIntoField(currentField)"
             @submit="submitStep"
           />
+          <PaymentStep
+            v-else-if="currentField.type === 'payment'"
+            ref="currentStep"
+            :key="currentField.uuid"
+            v-model="values[currentField.uuid]"
+            :field="currentField"
+            :submitter-slug="submitterSlug"
+            @attached="attachments.push($event)"
+            @focus="$refs.areas.scrollIntoField(currentField)"
+            @submit="submitStep"
+          />
         </div>
-        <div class="mt-6 md:mt-8">
+        <div
+          v-if="currentField.type !== 'payment' || submittedValues[currentField.uuid]"
+          class="mt-6 md:mt-8"
+        >
           <button
             ref="submitButton"
             type="submit"
@@ -302,6 +317,8 @@
         :is-demo="isDemo"
         :attribution="attribution"
         :completed-button="completedButton"
+        :with-send-copy-button="withSendCopyButton"
+        :with-download-button="withDownloadButton"
         :with-confetti="withConfetti"
         :can-send-email="canSendEmail && !!submitter.email"
         :submitter-slug="submitterSlug"
@@ -330,6 +347,7 @@ import InitialsStep from './initials_step'
 import AttachmentStep from './attachment_step'
 import MultiSelectStep from './multi_select_step'
 import PhoneStep from './phone_step'
+import PaymentStep from './payment_step'
 import TextStep from './text_step'
 import DateStep from './date_step'
 import FormCompleted from './completed'
@@ -350,6 +368,7 @@ export default {
     IconArrowsDiagonal,
     TextStep,
     PhoneStep,
+    PaymentStep,
     IconArrowsDiagonalMinimize2,
     FormCompleted
   },
@@ -386,6 +405,11 @@ export default {
       required: false,
       default: false
     },
+    withTypedSignature: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     baseUrl: {
       type: String,
       required: false,
@@ -396,11 +420,6 @@ export default {
       required: false,
       default: () => []
     },
-    authenticityToken: {
-      type: String,
-      required: false,
-      default: ''
-    },
     backgroundColor: {
       type: String,
       required: false,
@@ -436,6 +455,16 @@ export default {
       required: false,
       default: () => ({})
     },
+    withSendCopyButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    withDownloadButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     completedButton: {
       type: Object,
       required: false,
@@ -457,6 +486,12 @@ export default {
     currentStepFields () {
       return this.stepFields[this.currentStep]
     },
+    queryParams () {
+      return new URLSearchParams(window.location.search)
+    },
+    authenticityToken () {
+      return document.querySelector('meta[name="csrf-token"]')?.content
+    },
     submitterSlug () {
       return this.submitter.slug
     },
@@ -519,7 +554,13 @@ export default {
       }
     })
 
-    if (this.goToLast) {
+    if (this.queryParams.get('field_uuid')) {
+      const stepIndex = this.stepFields.findIndex((fields) => {
+        return fields.some((f) => f.uuid === this.queryParams.get('field_uuid'))
+      })
+
+      this.currentStep = Math.max(stepIndex, 0)
+    } else 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
 
@@ -564,7 +605,7 @@ export default {
   methods: {
     t,
     maybeTrackEmailClick () {
-      const queryParams = new URLSearchParams(window.location.search)
+      const { queryParams } = this
 
       if (queryParams.has('t')) {
         const t = queryParams.get('t')
@@ -588,7 +629,7 @@ export default {
       }
     },
     maybeTrackSmsClick () {
-      const queryParams = new URLSearchParams(window.location.search)
+      const { queryParams } = this
 
       if (queryParams.has('c')) {
         const c = queryParams.get('c')
@@ -661,7 +702,7 @@ export default {
     async submitStep () {
       this.isSubmitting = true
 
-      const stepPromise = ['signature', 'phone', 'initials'].includes(this.currentField.type)
+      const stepPromise = ['signature', 'phone', 'initials', 'payment'].includes(this.currentField.type)
         ? this.$refs.currentStep.submit
         : () => Promise.resolve({})
 
@@ -678,7 +719,7 @@ export default {
         }
 
         await this.saveStep(formData).then(async (response) => {
-          if (response.status === 422) {
+          if (response.status === 422 || response.status === 500) {
             const data = await response.json()
 
             alert(data.error || 'Value is invalid')
@@ -708,7 +749,7 @@ export default {
             }
           }
         }).catch(error => {
-          console.error('Error submitting form:', error)
+          console.error(error)
         }).finally(() => {
           this.isSubmitting = false
         })

app/javascript/submission_form/i18n.js

@@ -32,8 +32,15 @@ const en = {
   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'
+  email_has_been_sent: 'Email has been sent',
+  processing: 'Processing',
+  pay_with_strip: 'Pay with Stripe'
 }
 
 const es = {
@@ -71,7 +78,14 @@ const es = {
   set_today: 'Establecer Hoy',
   date: 'Fecha',
   toggle_multiline_text: 'Alternar Texto Multilínea',
-  email_has_been_sent: 'El correo electrónico ha sido enviado'
+  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',
+  processing: 'Procesando',
+  pay_with_strip: 'Pagar con Stripe'
 }
 
 const it = {
@@ -108,8 +122,15 @@ const it = {
   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"
+  email_has_been_sent: "L'email è stata inviata",
+  processing: 'Elaborazione',
+  pay_with_strip: 'Paga con Stripe'
 }
 
 const de = {
@@ -146,8 +167,15 @@ const de = {
   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'
+  email_has_been_sent: 'Die E-Mail wurde gesendet',
+  processing: 'Verarbeitung',
+  pay_with_strip: 'Mit Stripe bezahlen'
 }
 
 const fr = {
@@ -184,8 +212,15 @@ const fr = {
   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é"
+  email_has_been_sent: "L'email a été envoyé",
+  processing: 'Traitement',
+  pay_with_strip: 'Paiement avec Stripe'
 }
 
 const pl = {
@@ -222,8 +257,15 @@ const pl = {
   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'
+  email_has_been_sent: 'E-mail został wysłany',
+  processing: 'Przetwarzanie',
+  pay_with_strip: 'Płatność za pomocą Stripe'
 }
 
 const uk = {
@@ -260,8 +302,15 @@ const uk = {
   please_fill_all_required_fields: "Будь ласка, заповніть всі обов'язкові поля",
   set_today: 'Задати Сьогодні',
   date: 'Дата',
+  draw_signature: 'Намалюйте підпис',
+  type_initial: 'Введіть ініціали',
+  draw: 'Підпис',
+  type: 'Текст',
+  type_text: 'Введіть текст',
   toggle_multiline_text: 'Перемкнути Багаторядковий Текст',
-  email_has_been_sent: 'Електронний лист був відправлений'
+  email_has_been_sent: 'Електронний лист був відправлений',
+  processing: 'Обробка',
+  pay_with_strip: 'Сплатити за допомогою Stripe'
 }
 
 const cs = {
@@ -298,8 +347,15 @@ const cs = {
   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'
+  email_has_been_sent: 'E-mail byl odeslán',
+  processing: 'Zpracování',
+  pay_with_strip: 'Zaplacení přes Stripe'
 }
 
 const pt = {
@@ -336,8 +392,15 @@ const pt = {
   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'
+  email_has_been_sent: 'Email enviado',
+  processing: 'Processamento',
+  pay_with_strip: 'Pagar com Stripe'
 }
 
 const i18n = { en, es, it, de, fr, pl, uk, cs, pt }

app/javascript/submission_form/initials_step.vue

@@ -6,23 +6,43 @@
       >{{ 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-sm btn-circle"
-            :class="{ 'btn-neutral': isDrawInitials, 'btn-outline': !isDrawInitials }"
+            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 btn-outline btn-sm"
+          class="btn font-medium btn-outline btn-sm"
           @click.prevent="remove"
         >
           <IconReload :width="16" />
@@ -31,7 +51,7 @@
         <a
           v-else
           href="#"
-          class="btn btn-outline btn-sm"
+          class="btn font-medium btn-outline btn-sm"
           @click.prevent="clear"
         >
           <IconReload :width="16" />
@@ -63,7 +83,7 @@
     <canvas
       v-show="!modelValue && !computedPreviousValue"
       ref="canvas"
-      class="bg-white border border-base-300 rounded"
+      class="bg-white border border-base-300 rounded-2xl"
     />
     <input
       v-if="!isDrawInitials && !modelValue && !computedPreviousValue"
@@ -81,13 +101,14 @@
 
 <script>
 import { cropCanvasAndExportToPNG } from './crop_canvas'
-import { IconReload, IconSignature, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
+import { IconReload, IconTextSize, IconSignature, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
 import SignaturePad from 'signature_pad'
 
 export default {
   name: 'InitialsStep',
   components: {
     IconReload,
+    IconTextSize,
     IconSignature,
     IconArrowsDiagonalMinimize2
   },

app/javascript/submission_form/payment_step.vue

@@ -0,0 +1,181 @@
+<template>
+  <label
+    v-if="!modelValue && !sessionId"
+    :for="field.uuid"
+    class="label text-2xl mb-2"
+  >{{ field.name || defaultName }}
+  </label>
+  <div>
+    <input
+      type="text"
+      :value="modelValue"
+      hidden
+      :name="`values[${field.uuid}]`"
+      class="hidden"
+    >
+    <div
+      v-if="modelValue && !sessionId"
+      class=" text-2xl mb-2"
+    >
+      Already paid
+    </div>
+    <div v-else>
+      <button
+        v-if="sessionId"
+        disabled
+        class="base-button w-full"
+      >
+        <IconLoader
+          width="22"
+          class="animate-spin"
+        />
+        <span>
+          {{ t('processing') }}...
+        </span>
+      </button>
+      <button
+        v-else
+        :id="field.uuid"
+        class="btn bg-[#7B73FF] text-white hover:bg-[#0A2540] text-lg w-full"
+        :class="{ disabled: isCreatingCheckout }"
+        :disabled="isCreatingCheckout"
+        @click.prevent="startCheckout"
+      >
+        <IconInnerShadowTop
+          v-if="isCreatingCheckout"
+          width="22"
+          class="animate-spin"
+        />
+        <IconBrandStripe
+          v-else
+          width="22"
+        />
+        <span>
+          {{ t('pay_with_strip') }}
+        </span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { IconBrandStripe, IconInnerShadowTop, IconLoader } from '@tabler/icons-vue'
+
+export default {
+  name: 'PaymentStep',
+  components: {
+    IconBrandStripe,
+    IconInnerShadowTop,
+    IconLoader
+  },
+  inject: ['baseUrl', 't'],
+  props: {
+    modelValue: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    field: {
+      type: Object,
+      required: true
+    },
+    submitterSlug: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['focus', 'submit', 'update:model-value', 'attached'],
+  data () {
+    return {
+      isCreatingCheckout: false
+    }
+  },
+  computed: {
+    queryParams () {
+      return new URLSearchParams(window.location.search)
+    },
+    sessionId () {
+      return this.queryParams.get('stripe_session_id')
+    },
+    defaultName () {
+      const { price, currency } = this.field.preferences || {}
+
+      const formattedPrice = new Intl.NumberFormat([], {
+        style: 'currency',
+        currency
+      }).format(price)
+
+      return `Pay ${formattedPrice}`
+    }
+  },
+  mounted () {
+    if (this.sessionId) {
+      this.$emit('submit')
+    }
+  },
+  methods: {
+    async submit () {
+      if (this.sessionId) {
+        return fetch((this.baseUrl || '/embed').replace('/embed', '/api/stripe_payments/' + this.sessionId), {
+          method: 'PUT',
+          body: JSON.stringify({
+            submitter_slug: this.submitterSlug
+          }),
+          headers: { 'Content-Type': 'application/json' }
+        }).then(async (resp) => {
+          if (resp.status === 422 || resp.status === 500) {
+            const data = await resp.json()
+
+            alert(data.error || 'Unexpected error')
+
+            return Promise.reject(new Error(data.error))
+          }
+
+          const attachment = await resp.json()
+
+          window.history.replaceState({}, document.title, window.location.pathname)
+
+          this.$emit('update:model-value', attachment.uuid)
+          this.$emit('attached', attachment)
+
+          return resp
+        })
+      } else {
+        return Promise.resolve({})
+      }
+    },
+    startCheckout () {
+      this.isCreatingCheckout = true
+
+      fetch((this.baseUrl || '/embed').replace('/embed', '/api/stripe_payments'), {
+        method: 'POST',
+        body: JSON.stringify({
+          submitter_slug: this.submitterSlug,
+          field_uuid: this.field.uuid
+        }),
+        headers: { 'Content-Type': 'application/json' }
+      }).then(async (resp) => {
+        if (resp.status === 422 || resp.status === 500) {
+          const data = await resp.json()
+
+          alert(data.message || 'Unexpected error')
+
+          return Promise.reject(new Error(data.message))
+        }
+
+        const { url } = await resp.json()
+
+        const link = document.createElement('a')
+
+        link.href = url
+
+        if (url) {
+          link.click()
+        }
+      }).finally(() => {
+        this.isCreatingCheckout = false
+      })
+    }
+  }
+}
+</script>

app/javascript/submission_form/signature_step.vue

@@ -6,17 +6,37 @@
       >{{ 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')"
         >
           <a
             id="type_text_button"
             href="#"
-            class="btn btn-sm btn-circle"
-            :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-if="withTypedSignature"
+          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" />
+            <span class="hidden sm:inline">
+              {{ t('type') }}
+            </span>
           </a>
         </span>
         <span
@@ -24,7 +44,7 @@
           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
@@ -33,12 +53,15 @@
               accept="image/*"
               @change="drawImage"
             >
+            <span class="hidden sm:inline">
+              {{ t('upload') }}
+            </span>
           </label>
         </span>
         <a
           v-if="modelValue || computedPreviousValue"
           href="#"
-          class="btn btn-outline btn-sm"
+          class="btn btn-outline btn-sm font-medium"
           @click.prevent="remove"
         >
           <IconReload :width="16" />
@@ -47,7 +70,7 @@
         <a
           v-else
           href="#"
-          class="btn btn-outline btn-sm"
+          class="btn btn-outline btn-sm font-medium"
           @click.prevent="clear"
         >
           <IconReload :width="16" />
@@ -79,7 +102,8 @@
     <canvas
       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"
@@ -95,7 +119,7 @@
 </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'
 
@@ -107,6 +131,7 @@ export default {
     IconReload,
     IconCamera,
     IconTextSize,
+    IconSignature,
     IconArrowsDiagonalMinimize2
   },
   inject: ['baseUrl', 't'],
@@ -124,6 +149,11 @@ export default {
       required: true,
       default: false
     },
+    withTypedSignature: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     attachmentsIndex: {
       type: Object,
       required: false,

app/javascript/submission_form/text_step.vue

@@ -86,7 +86,7 @@ export default {
         const area = this.field.areas?.[0]
 
         if (area) {
-          return parseInt(area.w / area.cell_w)
+          return parseInt(area.w / area.cell_w) + 1
         } else {
           return null
         }

app/javascript/template_builder/area.vue

@@ -42,7 +42,7 @@
         v-model="field.submitter_uuid"
         class="border-r"
         :compact="true"
-        :editable="editable"
+        :editable="editable && !defaultField"
         :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"
@@ -51,7 +51,7 @@
       <FieldType
         v-model="field.type"
         :button-width="27"
-        :editable="editable"
+        :editable="editable && !defaultField"
         :button-classes="'px-1'"
         :menu-classes="'bg-white rounded-t-none'"
         @update:model-value="[maybeUpdateOptions(), save()]"
@@ -60,13 +60,13 @@
       <span
         v-if="field.type !== 'checkbox' || field.name"
         ref="name"
-        :contenteditable="editable"
+        :contenteditable="editable && !defaultField"
         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 && !['checkbox', 'phone'].includes(field.type)"
         class="flex items-center ml-1.5"
@@ -160,6 +160,11 @@ export default {
       required: false,
       default: false
     },
+    defaultField: {
+      type: Object,
+      required: false,
+      default: null
+    },
     editable: {
       type: Boolean,
       required: false,
@@ -185,6 +190,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 = []
 
@@ -206,30 +218,30 @@ export default {
     },
     borderColors () {
       return [
-        'border-red-500/50',
-        'border-sky-500/50',
-        'border-emerald-500/50',
-        'border-yellow-300/50',
-        'border-purple-600/50',
-        'border-pink-500/50',
-        'border-cyan-500/50',
-        'border-orange-500/50',
-        'border-lime-500/50',
-        'border-indigo-500/50'
+        'border-red-500/80',
+        'border-sky-500/80',
+        'border-emerald-500/80',
+        'border-yellow-300/80',
+        'border-purple-600/80',
+        'border-pink-500/80',
+        'border-cyan-500/80',
+        'border-orange-500/80',
+        'border-lime-500/80',
+        'border-indigo-500/80'
       ]
     },
     bgColors () {
       return [
-        'bg-red-100/50',
-        'bg-sky-100/50',
-        'bg-emerald-100/50',
-        'bg-yellow-100/50',
-        'bg-purple-100/50',
-        'bg-pink-100/50',
-        'bg-cyan-100/50',
-        'bg-orange-100/50',
-        'bg-lime-100/50',
-        'bg-indigo-100/50'
+        'bg-red-100/80',
+        'bg-sky-100/80',
+        'bg-emerald-100/80',
+        'bg-yellow-100/80',
+        'bg-purple-100/80',
+        'bg-pink-100/80',
+        'bg-cyan-100/80',
+        'bg-orange-100/80',
+        'bg-lime-100/80',
+        'bg-indigo-100/80'
       ]
     },
     isSelected () {

app/javascript/template_builder/builder.vue

@@ -4,10 +4,11 @@
     class="mx-auto pl-3 md:pl-4 h-full"
   >
     <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">
+      <div class="flex items-center space-x-3">
         <a
           v-if="withLogo"
           href="/"
@@ -15,9 +16,10 @@
           <Logo />
         </a>
         <Contenteditable
+          v-if="withTitle"
           :model-value="template.name"
           :editable="editable"
-          class="text-3xl font-semibold focus:text-clip"
+          class="text-xl md:text-3xl font-semibold focus:text-clip"
           :icon-stroke-width="2.3"
           @update:model-value="updateName"
         />
@@ -28,10 +30,25 @@
           name="buttons"
         />
         <template v-else>
+          <a
+            :href="template.submitters.length > 1 ? `/templates/${template.id}/submissions/new?selfsign=true` : `/d/${template.slug}`"
+            class="btn btn-primary btn-ghost text-base hidden md:flex"
+            :target="template.submitters.length > 1 ? '' : '_blank'"
+            :data-turbo-frame="template.submitters.length > 1 ? 'modal' : ''"
+            @click="maybeShowEmptyTemplateAlert"
+          >
+            <IconWritingSign
+              width="20"
+              class="inline"
+            />
+            <span class="hidden md:inline">
+              Sign Yourself
+            </span>
+          </a>
           <a
             :href="`/templates/${template.id}/submissions/new`"
             data-turbo-frame="modal"
-            class="btn btn-primary text-base"
+            class="white-button md:!px-6"
             @click="maybeShowEmptyTemplateAlert"
           >
             <IconUsersPlus
@@ -39,7 +56,7 @@
               class="inline"
             />
             <span class="hidden md:inline">
-              Recipients
+              Send
             </span>
           </a>
           <button
@@ -64,7 +81,10 @@
         </template>
       </div>
     </div>
-    <div class="flex md:max-h-[calc(100vh-60px)]">
+    <div
+      class="flex"
+      :class="$slots.buttons || withTitle ? 'md:max-h-[calc(100%_-_60px)]' : 'md:max-h-[100%]'"
+    >
       <div
         ref="previews"
         :style="{ 'display': isBreakpointLg ? 'none' : 'initial' }"
@@ -90,7 +110,7 @@
         />
         <div
           class="sticky bottom-0 py-2"
-          :class="{ 'bg-base-100': withStickySubmitters }"
+          :style="withStickySubmitters ? { backgroundColor } : {}"
         >
           <Upload
             v-if="sortedDocuments.length && editable && withUploadButton"
@@ -124,6 +144,7 @@
                 :selected-submitter="selectedSubmitter"
                 :document="document"
                 :is-drag="!!dragField"
+                :default-fields="defaultFields"
                 :draw-field="drawField"
                 :editable="editable"
                 :base-url="baseUrl"
@@ -168,7 +189,7 @@
           :selected-submitter="selectedSubmitter"
           class="md:hidden"
           :editable="editable"
-          @cancel="drawField = null"
+          @cancel="[drawField = null, drawOption = null]"
           @change-submitter="[selectedSubmitter = $event, drawField.submitter_uuid = $event.uuid]"
         />
         <FieldType
@@ -200,7 +221,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>
@@ -209,7 +231,7 @@
             <p>
               <button
                 class="base-button"
-                @click="drawField = null"
+                @click="[drawField = null, drawOption = null]"
               >
                 Cancel
               </button>
@@ -222,10 +244,11 @@
             :fields="template.fields"
             :submitters="template.submitters"
             :selected-submitter="selectedSubmitter"
+            :default-submitters="defaultSubmitters"
             :default-fields="defaultFields"
             :with-sticky-submitters="withStickySubmitters"
             :editable="editable"
-            @set-draw="drawField = $event"
+            @set-draw="[drawField = $event.field, drawOption = $event.option]"
             @set-drag="dragField = $event"
             @change-submitter="selectedSubmitter = $event"
             @drag-end="dragField = null"
@@ -248,7 +271,7 @@ import Contenteditable from './contenteditable'
 import DocumentPreview from './preview'
 import DocumentControls from './controls'
 import FieldType from './field_type'
-import { IconUsersPlus, IconDeviceFloppy, IconInnerShadowTop, IconPlus, IconX } from '@tabler/icons-vue'
+import { IconUsersPlus, IconDeviceFloppy, IconWritingSign, IconInnerShadowTop, IconPlus, IconX } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 import { ref, computed } from 'vue'
 
@@ -262,6 +285,7 @@ export default {
     IconPlus,
     FieldType,
     IconX,
+    IconWritingSign,
     Logo,
     Dropzone,
     DocumentPreview,
@@ -278,6 +302,7 @@ export default {
       baseFetch: this.baseFetch,
       backgroundColor: this.backgroundColor,
       withPhone: this.withPhone,
+      withPayment: this.withPayment,
       selectedAreaRef: computed(() => this.selectedAreaRef)
     }
   },
@@ -326,6 +351,13 @@ export default {
       required: false,
       default: true
     },
+    onUpload: {
+      type: Function,
+      required: false,
+      default () {
+        return () => {}
+      }
+    },
     withStickySubmitters: {
       type: Boolean,
       required: false,
@@ -336,11 +368,21 @@ export default {
       required: false,
       default: true
     },
+    withTitle: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     withPhone: {
       type: Boolean,
       required: false,
       default: false
     },
+    withPayment: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     fetchOptions: {
       type: Object,
       required: false,
@@ -354,6 +396,7 @@ export default {
       isSaving: false,
       selectedSubmitter: null,
       drawField: null,
+      drawOption: null,
       dragField: null
     }
   },
@@ -407,6 +450,12 @@ export default {
     window.addEventListener('keydown', this.onKeyDown)
 
     window.addEventListener('resize', this.onWindowResize)
+
+    this.$nextTick(() => {
+      if (document.location.search?.includes('stripe_connect_success')) {
+        document.querySelector('form[action="/auth/stripe_connect"]')?.closest('.dropdown')?.querySelector('label')?.focus()
+      }
+    })
   },
   unmounted () {
     document.removeEventListener('keyup', this.onKeyUp)
@@ -432,7 +481,14 @@ export default {
         field.options = [{ value: '', uuid: v4() }]
       }
 
+      if (type === 'date') {
+        field.preferences = {
+          format: Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') ? 'MM/DD/YYYY' : 'DD/MM/YYYY'
+        }
+      }
+
       this.drawField = field
+      this.drawOption = null
     },
     undo () {
       if (this.undoStack.length > 1) {
@@ -482,10 +538,11 @@ export default {
     onKeyUp (e) {
       if (e.code === 'Escape') {
         this.drawField = null
+        this.drawOption = null
         this.selectedAreaRef.value = null
       }
 
-      if (['Backspace', 'Delete'].includes(e.key) && this.selectedAreaRef.value && document.activeElement === document.body) {
+      if (this.editable && ['Backspace', 'Delete'].includes(e.key) && this.selectedAreaRef.value && document.activeElement === document.body) {
         this.removeArea(this.selectedAreaRef.value)
 
         this.selectedAreaRef.value = null
@@ -528,6 +585,16 @@ export default {
     },
     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)
 
@@ -536,6 +603,7 @@ export default {
         }
 
         this.drawField = null
+        this.drawOption = null
 
         this.selectedAreaRef.value = area
 
@@ -595,6 +663,12 @@ export default {
         field.options = [{ value: '', uuid: v4() }]
       }
 
+      if (field.type === 'date') {
+        field.preferences = {
+          format: Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') ? 'MM/DD/YYYY' : 'DD/MM/YYYY'
+        }
+      }
+
       const fieldArea = {
         x: (area.x - 6) / area.maskW,
         y: area.y / area.maskH,
@@ -665,6 +739,10 @@ export default {
         this.scrollIntoDocument(schema[0])
       })
 
+      if (this.onUpload) {
+        this.onUpload(this.template)
+      }
+
       this.save()
     },
     updateName (value) {
@@ -698,6 +776,10 @@ export default {
         })
       })
 
+      if (this.onUpload) {
+        this.onUpload(this.template)
+      }
+
       this.save()
     },
     moveDocument (item, direction) {

app/javascript/template_builder/contenteditable.vue

@@ -24,11 +24,10 @@
       *
     </span>
     <IconPencil
-      v-if="editable"
       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(), selectOnEditClick && selectContent()]"

app/javascript/template_builder/document.vue

@@ -8,6 +8,7 @@
       :editable="editable"
       :areas="areasIndex[index]"
       :is-drag="isDrag"
+      :default-fields="defaultFields"
       :draw-field="drawField"
       :selected-submitter="selectedSubmitter"
       :image="image"
@@ -35,6 +36,11 @@ export default {
       required: false,
       default: () => ({})
     },
+    defaultFields: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     selectedSubmitter: {
       type: Object,
       required: true

app/javascript/template_builder/field.vue

@@ -14,7 +14,7 @@
         <div class="flex items-center p-1 space-x-1">
           <FieldType
             v-model="field.type"
-            :editable="editable"
+            :editable="editable && !defaultField"
             :button-width="20"
             @update:model-value="[maybeUpdateOptions(), save()]"
             @click="scrollToFirstArea"
@@ -22,7 +22,7 @@
           <Contenteditable
             ref="name"
             :model-value="field.name || defaultName"
-            :editable="editable"
+            :editable="editable && !defaultField"
             :icon-inline="true"
             :icon-width="18"
             :icon-stroke-width="1.6"
@@ -58,14 +58,19 @@
             v-if="field && !field.areas.length"
             title="Draw"
             class="relative cursor-pointer text-transparent group-hover:text-base-content"
-            @click="$emit('set-draw', field)"
+            @click="$emit('set-draw', { field })"
           >
             <IconNewSection
               :width="18"
               :stroke-width="1.6"
             />
           </button>
+          <PaymentSettings
+            v-if="field.type === 'payment'"
+            :field="field"
+          />
           <span
+            v-else-if="!defaultField"
             class="dropdown dropdown-end"
           >
             <label
@@ -106,6 +111,33 @@
                   Default value
                 </label>
               </div>
+              <div
+                v-if="field.type === 'date'"
+                class="py-1.5 px-1 relative"
+                @click.stop
+              >
+                <select
+                  v-model="field.preferences.format"
+                  placeholder="Format"
+                  class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0"
+                  @change="save"
+                >
+                  <option
+                    v-for="format in dateFormats"
+                    :key="format"
+                    :value="format"
+                  >
+                    {{ formatDate(new Date(), format) }}
+                  </option>
+                </select>
+                <label
+                  :style="{ backgroundColor: backgroundColor }"
+                  class="absolute -top-1 left-2.5 px-1 h-4"
+                  style="font-size: 8px"
+                >
+                  Format
+                </label>
+              </div>
               <li
                 v-if="field.type != 'phone'"
                 @click.stop
@@ -151,11 +183,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"
@@ -193,6 +225,7 @@
       </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
@@ -205,16 +238,41 @@
           <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-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>
@@ -234,6 +292,7 @@
 <script>
 import Contenteditable from './contenteditable'
 import FieldType from './field_type'
+import PaymentSettings from './payment_settings'
 import { IconShape, IconNewSection, IconTrashX, IconCopy, IconSettings } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 
@@ -243,17 +302,23 @@ export default {
     Contenteditable,
     IconSettings,
     IconShape,
+    PaymentSettings,
     IconNewSection,
     IconTrashX,
     IconCopy,
     FieldType
   },
-  inject: ['template', 'save', 'backgroundColor'],
+  inject: ['template', 'save', 'backgroundColor', 'selectedAreaRef'],
   props: {
     field: {
       type: Object,
       required: true
     },
+    defaultField: {
+      type: Object,
+      required: false,
+      default: null
+    },
     editable: {
       type: Boolean,
       required: false,
@@ -263,23 +328,85 @@ export default {
   emits: ['set-draw', 'remove', 'scroll-to'],
   data () {
     return {
-      isNameFocus: false
+      isNameFocus: false,
+      showPaymentModal: false
     }
   },
   computed: {
     fieldNames: FieldType.computed.fieldNames,
+    dateFormats () {
+      return [
+        'MM/DD/YYYY',
+        'DD/MM/YYYY',
+        'YYYY-MM-DD',
+        'DD-MM-YYYY',
+        'DD.MM.YYYY',
+        'MMM D, YYYY',
+        'MMMM D, YYYY',
+        'D MMM YYYY',
+        'D MMMM YYYY'
+      ]
+    },
     defaultName () {
-      const typeIndex = this.template.fields.filter((f) => f.type === this.field.type).indexOf(this.field)
+      if (this.field.type === 'payment' && this.field.preferences?.price) {
+        const { price, currency } = this.field.preferences || {}
 
-      const suffix = { multiple: 'Select', radio: 'Group' }[this.field.type] || 'Field'
+        const formattedPrice = new Intl.NumberFormat([], {
+          style: 'currency',
+          currency
+        }).format(price)
 
-      return `${this.fieldNames[this.field.type]} ${suffix} ${typeIndex + 1}`
+        return `${this.fieldNames[this.field.type]} ${formattedPrice}`
+      } else {
+        const typeIndex = this.template.fields.filter((f) => f.type === this.field.type).indexOf(this.field)
+
+        const suffix = { multiple: 'Select', radio: 'Group' }[this.field.type] || 'Field'
+
+        return `${this.fieldNames[this.field.type]} ${suffix} ${typeIndex + 1}`
+      }
     },
     areas () {
       return this.field.areas || []
     }
   },
+  created () {
+    this.field.preferences ||= {}
+
+    if (this.field.type === 'date') {
+      this.field.preferences.format ||=
+        (Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') ? 'MM/DD/YYYY' : 'DD/MM/YYYY')
+    }
+  },
   methods: {
+    formatDate (date, format) {
+      const monthFormats = {
+        M: 'numeric',
+        MM: '2-digit',
+        MMM: 'short',
+        MMMM: 'long'
+      }
+
+      const dayFormats = {
+        D: 'numeric',
+        DD: '2-digit'
+      }
+
+      const yearFormats = {
+        YYYY: 'numeric',
+        YY: '2-digit'
+      }
+
+      const parts = new Intl.DateTimeFormat([], {
+        day: dayFormats[format.match(/D+/)],
+        month: monthFormats[format.match(/M+/)],
+        year: yearFormats[format.match(/Y+/)]
+      }).formatToParts(date)
+
+      return format
+        .replace(/D+/, parts.find((p) => p.type === 'day').value)
+        .replace(/M+/, parts.find((p) => p.type === 'month').value)
+        .replace(/Y+/, parts.find((p) => p.type === 'year').value)
+    },
     copyToAllPages (field) {
       const areaString = JSON.stringify(field.areas[0])
 
@@ -306,6 +433,13 @@ 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])
     },
@@ -315,6 +449,18 @@ export default {
     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 () {

app/javascript/template_builder/field_submitter.vue

@@ -74,7 +74,7 @@
                 :stroke-width="1.6"
               />
               <span class="py-1">
-                Add Submitter
+                Add {{ names[submitters.length] }}
               </span>
             </a>
           </li>
@@ -100,7 +100,7 @@
     <label
       v-else
       tabindex="0"
-      class="cursor-pointer group/contenteditable-container 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
@@ -117,7 +117,7 @@
           @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"
@@ -169,7 +169,7 @@
             :stroke-width="1.6"
           />
           <span class="py-1">
-            Add Submitter
+            Add {{ names[submitters.length] }}
           </span>
         </a>
       </li>
@@ -239,16 +239,16 @@ export default {
     },
     names () {
       return [
-        'First Submitter',
-        'Second Submitter',
-        'Third Submitter',
-        'Fourth Submitter',
-        'Fifth Submitter',
-        'Sixth Submitter',
-        'Seventh Submitter',
-        'Eighth Submitter',
-        'Ninth Submitter',
-        'Tenth Submitter'
+        'First Party',
+        'Second Party',
+        'Third Party',
+        'Fourth Party',
+        'Fifth Party',
+        'Sixth Party',
+        'Seventh Party',
+        'Eighth Party',
+        'Ninth Party',
+        'Tenth Party'
       ]
     },
     selectedSubmitter () {

app/javascript/template_builder/field_type.vue

@@ -25,7 +25,7 @@
         v-for="(icon, type) in fieldIcons"
         :key="type"
       >
-        <li v-if="withPhone || type !== 'phone'">
+        <li v-if="withPhone || withPayment || !['phone', 'payment'].includes(type)">
           <a
             href="#"
             class="text-sm py-1 px-2"
@@ -46,11 +46,11 @@
 </template>
 
 <script>
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconLetterCaseUpper } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard } from '@tabler/icons-vue'
 
 export default {
   name: 'FiledTypeDropdown',
-  inject: ['withPhone'],
+  inject: ['withPhone', 'withPayment'],
   props: {
     modelValue: {
       type: String,
@@ -92,7 +92,8 @@ export default {
         multiple: 'Multiple',
         radio: 'Radio',
         cells: 'Cells',
-        phone: 'Phone'
+        phone: 'Phone',
+        payment: 'Payment'
       }
     },
     fieldIcons () {
@@ -108,7 +109,8 @@ export default {
         radio: IconCircleDot,
         multiple: IconChecks,
         cells: IconColumns3,
-        phone: IconPhoneCheck
+        phone: IconPhoneCheck,
+        payment: IconCreditCard
       }
     }
   },

app/javascript/template_builder/fields.vue

@@ -5,7 +5,7 @@
       class="w-full rounded-lg"
       :class="{ 'bg-base-100': withStickySubmitters }"
       :submitters="submitters"
-      :editable="editable"
+      :editable="editable && !defaultSubmitters.length"
       @new-submitter="save"
       @remove="removeSubmitter"
       @name-change="save"
@@ -24,6 +24,7 @@
       :field="field"
       :type-index="fields.filter((f) => f.type === field.type).indexOf(field)"
       :editable="editable && !dragField"
+      :default-field="defaultFields.find((f) => f.name === field.name)"
       :draggable="editable"
       @dragstart="dragField = field"
       @dragend="dragField = null"
@@ -70,16 +71,16 @@
       :key="type"
     >
       <button
-        v-if="withPhone || type != 'phone'"
+        v-if="(withPhone || type != 'phone') && (withPayment || type != 'payment')"
         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: type })"
         @dragend="$emit('drag-end')"
         @click="addField(type)"
       >
-        <div class="w-0 absolute left-0">
-          <IconDrag class="cursor-grab" />
+        <div class="flex items-console group-hover:bg-base-200/50 transition-all cursor-grab h-full absolute left-0">
+          <IconDrag class=" my-auto" />
         </div>
         <div class="flex items-center flex-col px-2 py-2">
           <component :is="icon" />
@@ -89,7 +90,7 @@
         </div>
       </button>
       <div
-        v-else
+        v-else-if="type == 'phone'"
         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."
       >
@@ -151,7 +152,7 @@ export default {
     IconDrag,
     IconLock
   },
-  inject: ['save', 'backgroundColor', 'withPhone'],
+  inject: ['save', 'backgroundColor', 'withPhone', 'withPayment'],
   props: {
     fields: {
       type: Array,
@@ -167,6 +168,11 @@ export default {
       required: false,
       default: () => []
     },
+    defaultSubmitters: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     withStickySubmitters: {
       type: Boolean,
       required: false,
@@ -195,7 +201,7 @@ export default {
     },
     submitterDefaultFields () {
       return this.defaultFields.filter((f) => {
-        return !this.fields.find((field) => field.name === f.name) && (!f.role || f.role === this.selectedSubmitter.name)
+        return !this.submitterFields.find((field) => field.name === f.name) && (!f.role || f.role === this.selectedSubmitter.name)
       })
     }
   },
@@ -255,8 +261,18 @@ export default {
         field.options = [{ value: '', uuid: v4() }]
       }
 
+      if (type === 'date') {
+        field.preferences = {
+          format: Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') ? 'MM/DD/YYYY' : 'DD/MM/YYYY'
+        }
+      }
+
       this.fields.push(field)
 
+      if (['signature', 'initials', 'cells'].includes(type)) {
+        this.$emit('set-draw', { field })
+      }
+
       this.save()
     }
   }

app/javascript/template_builder/page.vue

@@ -23,6 +23,7 @@
         :area="item.area"
         :field="item.field"
         :editable="editable"
+        :default-field="defaultFields.find((f) => f.name === item.field.name)"
         @start-resize="resizeDirection = $event"
         @stop-resize="resizeDirection = null"
         @start-drag="isMove = true"
@@ -69,6 +70,11 @@ export default {
       required: false,
       default: () => []
     },
+    defaultFields: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     selectedSubmitter: {
       type: Object,
       required: true

app/javascript/template_builder/payment_settings.vue

@@ -0,0 +1,237 @@
+<template>
+  <span
+    class="dropdown dropdown-end"
+    :class="{ 'dropdown-open': (!field.preferences?.price || !isConnected) && !isLoading }"
+  >
+    <label
+      tabindex="0"
+      title="Settings"
+      class="cursor-pointer text-transparent group-hover:text-base-content"
+    >
+      <IconSettings
+        :width="18"
+        :stroke-width="1.6"
+      />
+    </label>
+    <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
+        class="py-1.5 px-1 relative"
+        @click.stop
+      >
+        <select
+          v-model="field.preferences.currency"
+          placeholder="Price"
+          class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0"
+          @change="save"
+        >
+          <option
+            v-for="currency in currencies"
+            :key="currency"
+            :value="currency"
+          >
+            {{ currency }}
+          </option>
+        </select>
+        <label
+          :style="{ backgroundColor: backgroundColor }"
+          class="absolute -top-1 left-2.5 px-1 h-4"
+          style="font-size: 8px"
+        >
+          Currency
+        </label>
+      </div>
+      <div
+        class="py-1.5 px-1 relative"
+        @click.stop
+      >
+        <input
+          v-model="field.preferences.price"
+          type="number"
+          placeholder="Price"
+          class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
+          @blur="save"
+        >
+        <label
+          v-if="field.preferences.price"
+          :style="{ backgroundColor: backgroundColor }"
+          class="absolute -top-1 left-2.5 px-1 h-4"
+          style="font-size: 8px"
+        >
+          Price
+        </label>
+      </div>
+      <div
+        v-if="!isConnected || isOauthSuccess"
+        class="py-1.5 px-1 relative"
+        @click.stop
+      >
+        <div
+          v-if="isConnected && isOauthSuccess"
+          class="text-sm text-center"
+        >
+          <IconCircleCheck
+            class="inline text-green-600 w-4 h-4"
+          />
+          Stripe Connected
+        </div>
+        <form
+          v-if="!isConnected"
+          data-turbo="false"
+          action="/auth/stripe_connect"
+          accept-charset="UTF-8"
+          target="_blank"
+          method="post"
+        >
+          <input
+            type="hidden"
+            name="state"
+            :value="oauthState"
+            autocomplete="off"
+          >
+          <input
+            type="hidden"
+            name="redirect_uri"
+            :value="redirectUri"
+            autocomplete="off"
+          >
+          <input
+            type="hidden"
+            name="scope"
+            value="read_write"
+            autocomplete="off"
+          >
+          <input
+            type="hidden"
+            name="authenticity_token"
+            :value="authenticityToken"
+            autocomplete="off"
+          >
+          <button
+            type="submit"
+            :disabled="isLoading"
+            class="btn bg-[#7B73FF] hover:bg-[#0A2540] btn-sm text-white w-full"
+          >
+            <span
+              v-if="isLoading"
+              class="flex items-center space-x-1"
+            >
+              <IconInnerShadowTop
+                class="w-4 h-4 animate-spin inline"
+              />
+              <span>
+                Connect Stripe
+              </span>
+            </span>
+            <span
+              v-else
+              class="flex items-center space-x-1"
+            >
+              <IconBrandStripe
+                class="w-4 h-4 inline"
+              />
+              <span>
+                Connect Stripe
+              </span>
+            </span>
+          </button>
+        </form>
+      </div>
+    </ul>
+  </span>
+</template>
+
+<script>
+import { IconSettings, IconCircleCheck, IconBrandStripe, IconInnerShadowTop } from '@tabler/icons-vue'
+import { ref } from 'vue'
+
+const isConnected = ref(false)
+
+export default {
+  name: 'PaymentSettings',
+  components: {
+    IconSettings,
+    IconCircleCheck,
+    IconInnerShadowTop,
+    IconBrandStripe
+  },
+  inject: ['backgroundColor', 'save'],
+  props: {
+    field: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      isLoading: false
+    }
+  },
+  computed: {
+    isConnected: () => isConnected.value,
+    isOauthSuccess () {
+      return document.location.search?.includes('stripe_connect_success')
+    },
+    redirectUri () {
+      return document.location.origin + '/auth/stripe_connect/callback'
+    },
+    currencies () {
+      return ['USD', 'EUR', 'GBP']
+    },
+    authenticityToken () {
+      return document.querySelector('meta[name="csrf-token"]')?.content
+    },
+    oauthState () {
+      const params = new URLSearchParams('')
+
+      params.set('redir', document.location.href)
+
+      return params.toString()
+    },
+    defaultCurrency () {
+      const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone
+
+      if (userTimezone.startsWith('Europe')) {
+        return 'EUR'
+      } else if (userTimezone.includes('London') || userTimezone.includes('Belfast')) {
+        return 'GBP'
+      } else {
+        return 'USD'
+      }
+    }
+  },
+  created () {
+    this.field.preferences ||= {}
+  },
+  mounted () {
+    this.field.preferences.currency ||= this.defaultCurrency
+
+    if (!this.isConnected) {
+      this.checkStatus()
+    }
+  },
+  methods: {
+    checkStatus () {
+      this.isLoading = true
+
+      fetch('/api/stripe_connect').then(async (resp) => {
+        const { status } = await resp.json()
+
+        if (status === 'connected') {
+          isConnected.value = true
+        }
+      }).finally(() => {
+        this.isLoading = false
+      })
+    },
+    closeDropdown () {
+      document.activeElement.blur()
+    }
+  }
+}
+</script>

app/jobs/process_submitter_completion_job.rb

@@ -24,14 +24,16 @@ class ProcessSubmitterCompletionJob < ApplicationJob
   def enqueue_completed_emails(submitter)
     user = submitter.submission.created_by_user || submitter.template.author
 
-    if submitter.template.account.users.exists?(id: user.id)
+    if submitter.template.account.users.exists?(id: user.id) &&
+       submitter.submission.preferences['send_email'] != false
       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 +50,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_submitter_invitation_email_job.rb

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

app/mailers/submitter_mailer.rb

@@ -3,24 +3,34 @@
 class SubmitterMailer < ApplicationMailer
   MAX_ATTACHMENTS_SIZE = 10.megabytes
 
-  def invitation_email(submitter, body: nil, subject: nil)
+  DEFAULT_INVITATION_SUBJECT = 'You are invited to submit a form'
+
+  def invitation_email(submitter)
     @current_account = submitter.submission.template.account
     @submitter = submitter
-    @body = body.presence
 
-    @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 || subject.present?
-        ReplaceEmailVariables.call(subject.presence || @email_config.value['subject'], submitter:)
+      if @email_config || @subject
+        ReplaceEmailVariables.call(@subject || @email_config.value['subject'], submitter:)
       else
-        'You are invited to submit a form'
+        DEFAULT_INVITATION_SUBJECT
       end
 
-    mail(to: @submitter.friendly_name,
-         from: from_address_for_submitter(submitter),
-         subject:,
-         reply_to: (submitter.submission.created_by_user || submitter.template.author)&.friendly_name)
+    mail(
+      to: @submitter.friendly_name,
+      from: from_address_for_submitter(submitter),
+      subject:,
+      reply_to: (submitter.submission.created_by_user || submitter.template.author)&.friendly_name&.sub(/\+\w+@/, '@')
+    )
   end
 
   def completed_email(submitter, user, bcc: nil)
@@ -31,7 +41,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)
 
@@ -45,7 +55,7 @@ class SubmitterMailer < ApplicationMailer
       end
 
     mail(from: from_address_for_submitter(submitter),
-         to: user.friendly_name,
+         to: user.role == 'integration' ? user.friendly_name.sub(/\+\w+@/, '@') : user.friendly_name,
          bcc:,
          subject:)
   end
@@ -58,7 +68,7 @@ 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
@@ -86,7 +96,26 @@ class SubmitterMailer < ApplicationMailer
       total_size = audit_trail_data.size
     end
 
-    documents.each do |attachment|
+    total_size = add_attachments_with_size_limit(documents, total_size)
+
+    attachments[submitter.submission.audit_trail.filename.to_s] = audit_trail_data if audit_trail_data
+
+    file_fields = submitter.submission.template_fields.select { |e| e['type'].in?(%w[file payment]) }
+
+    if file_fields.pluck('submitter_uuid').uniq.size == 1
+      storage_attachments =
+        submitter.attachments.where(uuid: submitter.values.values_at(*file_fields.pluck('uuid')).flatten)
+
+      add_attachments_with_size_limit(storage_attachments, total_size)
+    end
+
+    documents
+  end
+
+  def add_attachments_with_size_limit(storage_attachments, current_size)
+    total_size = current_size
+
+    storage_attachments.each do |attachment|
       total_size += attachment.byte_size
 
       break if total_size >= MAX_ATTACHMENTS_SIZE
@@ -94,12 +123,15 @@ class SubmitterMailer < ApplicationMailer
       attachments[attachment.filename.to_s] = attachment.download
     end
 
-    attachments[submitter.submission.audit_trail.filename.to_s] = audit_trail_data if audit_trail_data
-
-    documents
+    total_size
   end
 
   def from_address_for_submitter(submitter)
-    submitter.submission.created_by_user&.friendly_name || submitter.submission.template.author.friendly_name
+    if submitter.submission.source.in?(%w[api embed]) &&
+       (from_email = AccountConfig.find_by(account: submitter.account, key: 'integration_from_email')&.value.presence)
+      from_email
+    else
+      (submitter.submission.created_by_user || submitter.submission.template.author).friendly_name
+    end
   end
 end

app/models/account.rb

@@ -15,6 +15,7 @@ class Account < ApplicationRecord
   has_many :users, dependent: :destroy
   has_many :encrypted_configs, dependent: :destroy
   has_many :account_configs, dependent: :destroy
+  has_many :email_messages, dependent: :destroy
   has_many :templates, dependent: :destroy
   has_many :template_folders, dependent: :destroy
   has_one :default_template_folder, -> { where(name: TemplateFolder::DEFAULT_NAME) },

app/models/account_config.rb

@@ -25,6 +25,8 @@ class AccountConfig < ApplicationRecord
   SUBMITTER_COMPLETED_EMAIL_KEY = 'submitter_completed_email'
   SUBMITTER_DOCUMENTS_COPY_EMAIL_KEY = 'submitter_documents_copy_email'
   BCC_EMAILS = 'bcc_emails'
+  FORCE_MFA = 'force_mfa'
+  ALLOW_TYPED_SIGNATURE = 'allow_typed_signature'
   SUBMITTER_REMAILERS = 'submitter_reminders'
   FORM_COMPLETED_BUTTON_KEY = 'form_completed_button'
 
@@ -49,7 +51,7 @@ class AccountConfig < ApplicationRecord
       'body' => "Hi there,\n\n" \
                 "Please check the copy of your \"{{template.name}}\" submission in the email attachments.\n" \
                 "Alternatively, you can download your copy using:\n\n" \
-                "{{documents.links}}\n\n" \
+                "{{documents.link}}\n\n" \
                 "Thanks,\n" \
                 '{{account.name}}'
     }

app/models/email_message.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+# == Schema Information
+#
+# Table name: email_messages
+#
+#  id         :bigint           not null, primary key
+#  body       :text             not null
+#  sha1       :string           not null
+#  subject    :text             not null
+#  uuid       :string           not null
+#  created_at :datetime         not null
+#  updated_at :datetime         not null
+#  account_id :bigint           not null
+#  author_id  :bigint           not null
+#
+# Indexes
+#
+#  index_email_messages_on_account_id  (account_id)
+#  index_email_messages_on_sha1        (sha1)
+#  index_email_messages_on_uuid        (uuid)
+#
+# Foreign Keys
+#
+#  fk_rails_...  (account_id => accounts.id)
+#  fk_rails_...  (author_id => users.id)
+#
+class EmailMessage < ApplicationRecord
+  belongs_to :author, class_name: 'User'
+  belongs_to :account
+
+  attribute :uuid, :string, default: -> { SecureRandom.uuid }
+
+  before_validation :set_sha1, on: :create
+
+  def set_sha1
+    self.sha1 = Digest::SHA1.hexdigest({ subject:, body: }.to_json)
+  end
+end

app/models/encrypted_config.rb

@@ -25,6 +25,7 @@ class EncryptedConfig < ApplicationRecord
     FILES_STORAGE_KEY = 'active_storage',
     EMAIL_SMTP_KEY = 'action_mailer_smtp',
     ESIGN_CERTS_KEY = 'esign_certs',
+    TIMESTAMP_SERVER_URL_KEY = 'timestamp_server_url',
     APP_URL_KEY = 'app_url',
     WEBHOOK_URL_KEY = 'webhook_url'
   ].freeze

app/models/submission.rb

@@ -6,6 +6,8 @@
 #
 #  id                  :bigint           not null, primary key
 #  deleted_at          :datetime
+#  preferences         :text             not null
+#  slug                :string           not null
 #  source              :text             not null
 #  submitters_order    :string           not null
 #  template_fields     :text
@@ -19,6 +21,7 @@
 # Indexes
 #
 #  index_submissions_on_created_by_user_id  (created_by_user_id)
+#  index_submissions_on_slug                (slug) UNIQUE
 #  index_submissions_on_template_id         (template_id)
 #
 # Foreign Keys
@@ -34,13 +37,18 @@ class Submission < ApplicationRecord
   has_many :submitters, dependent: :destroy
   has_many :submission_events, dependent: :destroy
 
+  attribute :preferences, :string, default: -> { {} }
+
   serialize :template_fields, JSON
   serialize :template_schema, JSON
   serialize :template_submitters, JSON
+  serialize :preferences, JSON
 
   attribute :source, :string, default: 'link'
   attribute :submitters_order, :string, default: 'random'
 
+  attribute :slug, :string, default: -> { SecureRandom.base58(14) }
+
   has_one_attached :audit_trail
 
   has_many :template_schema_documents,
@@ -64,7 +72,9 @@ class Submission < ApplicationRecord
   }, scope: false, prefix: true
 
   def audit_trail_url
-    audit_trail&.url
+    return if audit_trail.blank?
+
+    Rails.application.routes.url_helpers.rails_storage_proxy_url(audit_trail, **Docuseal.default_url_options)
   end
   alias audit_log_url audit_trail_url
 end

app/models/submission_event.rb

@@ -39,6 +39,7 @@ class SubmissionEvent < ApplicationRecord
     send_email: 'send_email',
     send_reminder_email: 'send_reminder_email',
     send_sms: 'send_sms',
+    send_2fa_sms: 'send_2fa_sms',
     open_email: 'open_email',
     click_email: 'click_email',
     click_sms: 'click_sms',

app/models/submitter.rb

@@ -12,6 +12,7 @@
 #  name            :string
 #  opened_at       :datetime
 #  phone           :string
+#  preferences     :text             not null
 #  sent_at         :datetime
 #  slug            :string           not null
 #  ua              :string
@@ -37,9 +38,11 @@ class Submitter < ApplicationRecord
   has_one :account, through: :template
 
   attribute :values, :string, default: -> { {} }
+  attribute :preferences, :string, default: -> { {} }
   attribute :slug, :string, default: -> { SecureRandom.base58(14) }
 
   serialize :values, JSON
+  serialize :preferences, JSON
 
   has_many_attached :documents
   has_many_attached :attachments
@@ -61,7 +64,7 @@ class Submitter < ApplicationRecord
 
   def friendly_name
     if name.present? && email.present? && email.exclude?(',')
-      "#{name} <#{email}>"
+      %("#{name.delete('"')}" <#{email}>)
     else
       email
     end

app/models/template.rb

@@ -33,7 +33,7 @@
 #  fk_rails_...  (folder_id => template_folders.id)
 #
 class Template < ApplicationRecord
-  DEFAULT_SUBMITTER_NAME = 'First Submitter'
+  DEFAULT_SUBMITTER_NAME = 'First Party'
 
   belongs_to :author, class_name: 'User'
   belongs_to :account

app/models/user.rb

@@ -52,11 +52,12 @@ class User < ApplicationRecord
   belongs_to :account
   has_one :access_token, dependent: :destroy
   has_many :templates, dependent: :destroy, foreign_key: :author_id, inverse_of: :author
+  has_many :template_folders, dependent: :destroy, foreign_key: :author_id, inverse_of: :author
   has_many :user_configs, dependent: :destroy
   has_many :encrypted_configs, dependent: :destroy, class_name: 'EncryptedUserConfig'
+  has_many :email_messages, dependent: :destroy, foreign_key: :author_id, inverse_of: :author
 
   devise :two_factor_authenticatable, :recoverable, :rememberable, :validatable, :trackable
-  devise :registerable, :omniauthable, omniauth_providers: [:google_oauth2] if Docuseal.multitenant?
 
   attribute :role, :string, default: ADMIN_ROLE
   attribute :uuid, :string, default: -> { SecureRandom.uuid }
@@ -94,7 +95,7 @@ class User < ApplicationRecord
 
   def friendly_name
     if full_name.present?
-      "#{full_name} <#{email}>"
+      %("#{full_name.delete('"')}" <#{email}>)
     else
       email
     end

app/views/accounts/show.html.erb

@@ -36,6 +36,35 @@
         </div>
       <% end %>
     <% end %>
+    <% if can?(:manage, AccountConfig) %>
+      <div class="px-1 mt-8">
+        <h2 class="text-2xl font-bold mb-2">Preferences</h2>
+        <% account_config = AccountConfig.find_or_initialize_by(account: current_account, key: AccountConfig::FORCE_MFA) %>
+        <% if can?(:manage, account_config) %>
+          <%= form_for account_config, url: account_configs_path, method: :post do |f| %>
+            <%= f.hidden_field :key %>
+            <div class="flex items-center justify-between py-2.5">
+              <span>
+                Force 2FA with Authenticator App
+              </span>
+              <%= f.check_box :value, class: 'toggle', checked: account_config.value, onchange: 'this.form.requestSubmit()' %>
+            </div>
+          <% end %>
+        <% end %>
+        <% account_config = AccountConfig.find_or_initialize_by(account: current_account, key: AccountConfig::ALLOW_TYPED_SIGNATURE) %>
+        <% if can?(:manage, account_config) %>
+          <%= form_for account_config, url: account_configs_path, method: :post do |f| %>
+            <%= f.hidden_field :key %>
+            <div class="flex items-center justify-between py-2.5">
+              <span>
+                Allow typed text signatures
+              </span>
+              <%= f.check_box :value, class: 'toggle', checked: account_config.value != false, onchange: 'this.form.requestSubmit()' %>
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
   </div>
   <div class="w-0 md:w-52"></div>
 </div>

app/views/api_settings/index.html.erb

@@ -34,7 +34,7 @@
              "submitters": [
                {
                  "name": "John Doe",
-                 "role": "<%= current_account.templates.last ? current_account.templates.last.submitters.first['name'] : 'First Submitter' %>",
+                 "role": "<%= current_account.templates.last ? current_account.templates.last.submitters.first['name'] : 'First Party' %>",
                  "email": "<%= current_user.email.sub('@', '+test@') %>",
                  "values": {
                    "Form Text Field Name": "Default Value"

app/views/dashboard/index.html.erb

@@ -8,7 +8,7 @@
       <% end %>
       <% if can?(:create, ::Template) %>
         <%= render 'templates/upload_button' %>
-        <%= link_to new_template_path, class: 'btn btn-primary text-base btn-md gap-2', data: { turbo_frame: :modal } do %>
+        <%= link_to new_template_path, class: 'white-button !border gap-2', data: { turbo_frame: :modal } do %>
           <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
           <span class="hidden md:block">Create</span>
         <% end %>

app/views/devise/registrations/show.html.erb

@@ -8,7 +8,7 @@
     <div class="space-y-2">
       <div class="form-control">
         <%= f.label :email, class: 'label' %>
-        <%= f.email_field :email, autofocus: true, autocomplete: 'email', class: 'base-input' %>
+        <%= f.email_field :email, autofocus: true, autocomplete: 'email', class: 'base-input', placeholder: 'Enter email to continue' %>
       </div>
     </div>
     <div class="form-control">
@@ -16,7 +16,18 @@
     </div>
   <% end %>
   <% if devise_mapping.omniauthable? %>
-    <%= button_to button_title(title: 'Sign up with Google', icon: svg_icon('brand_google', class: 'w-6 h-6')), omniauth_authorize_path(resource_name, :google_oauth2), class: 'white-button w-full mt-4', data: { turbo: false }, method: :post %>
+    <div class="space-y-4">
+      <%= form_for '', url: omniauth_authorize_path(resource_name, :google_oauth2), data: { turbo: false }, method: :post do |f| %>
+        <set-timezone data-input-id="state" data-params="true"></set-timezone>
+        <%= hidden_field_tag :state, { redir: params[:redir].to_s }.compact_blank.to_query %>
+        <%= f.button button_title(title: 'Sign up with Google', icon: svg_icon('brand_google', class: 'w-6 h-6')), class: 'white-button w-full mt-4' %>
+      <% end %>
+      <%= form_for '', url: omniauth_authorize_path(resource_name, :microsoft_office365), data: { turbo: false }, method: :post do |f| %>
+        <set-timezone data-input-id="state_microsoft" data-params="true"></set-timezone>
+        <%= hidden_field_tag :state, { redir: params[:redir].to_s }.compact_blank.to_query, id: 'state_microsoft' %>
+        <%= f.button button_title(title: 'Sign up with Microsoft', icon: svg_icon('brand_microsoft', class: 'w-6 h-6')), class: 'white-button w-full' %>
+      <% end %>
+    </div>
   <% end %>
   <%= render 'devise/shared/links' %>
 </div>

app/views/devise/sessions/new.html.erb

@@ -20,7 +20,19 @@
     </div>
   <% end %>
   <% if devise_mapping.omniauthable? %>
-    <%= button_to button_title(title: 'Sign in with Google', icon: svg_icon('brand_google', class: 'w-6 h-6')), omniauth_authorize_path(resource_name, :google_oauth2), class: 'white-button w-full mt-4', data: { turbo: false }, method: :post %>
+    <div class="space-y-4">
+      <%= form_for '', url: omniauth_authorize_path(resource_name, :google_oauth2), data: { turbo: false }, method: :post do |f| %>
+        <set-timezone data-input-id="state" data-params="true"></set-timezone>
+        <%= hidden_field_tag :state, { redir: params[:redir].to_s }.compact_blank.to_query %>
+        <%= f.button button_title(title: 'Sign in with Google', icon: svg_icon('brand_google', class: 'w-6 h-6')), class: 'white-button w-full mt-4' %>
+      <% end %>
+      <%= form_for '', url: omniauth_authorize_path(resource_name, :microsoft_office365), data: { turbo: false }, method: :post do |f| %>
+        <set-timezone data-input-id="state_microsoft" data-params="true"></set-timezone>
+        <%= hidden_field_tag :state, { redir: params[:redir].to_s }.compact_blank.to_query, id: 'state_microsoft' %>
+        <%= f.button button_title(title: 'Sign in with Microsoft', icon: svg_icon('brand_microsoft', class: 'w-6 h-6')), class: 'white-button w-full' %>
+      <% end %>
+    </div>
   <% end %>
+  <%= render 'extra_links' %>
   <%= render 'devise/shared/links' %>
 </div>

app/views/esign_settings/show.html.erb

@@ -97,5 +97,31 @@
         </tbody>
       </table>
     </div>
+    <% encrypted_config = EncryptedConfig.find_or_initialize_by(account: current_account, key: EncryptedConfig::TIMESTAMP_SERVER_URL_KEY) %>
+    <% if !Docuseal.multitenant? && can?(:manage, encrypted_config) %>
+      <div class="flex-grow max-w-xl">
+        <div class="flex justify-between items-end mb-4 mt-8">
+          <h2 class="text-3xl font-bold">Timestamp Server</h2>
+        </div>
+        <%= form_for encrypted_config, url: timestamp_server_index_path, method: :post, html: { autocomplete: 'off', class: 'space-y-4' } do |f| %>
+          <div class="form-control">
+            <%= f.label :value, class: 'label' do %>
+              <span class="flex items-center space-x-1">
+                <span>
+                  Timeserver URL
+                </span>
+                <span class="tooltip" data-tip="URL of the trusted timeserver to be used to generate timestamp signatures.">
+                  <%= svg_icon('info_circle', class: 'w-4 h-4') %>
+                </span>
+              </span>
+            <% end %>
+            <%= f.url_field :value, autocomplete: 'off', class: 'base-input', placeholder: 'URL (optional)' %>
+          </div>
+          <div class="form-control pt-2">
+            <%= f.button button_title(title: 'Save', disabled_with: 'Updating'), class: 'base-button' %>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
   </div>
 </div>

app/views/icons/_archive.html.erb

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="24" height="24" 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="M3 4m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /><path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" /><path d="M10 12l4 0" /></svg>

app/views/icons/_brand_microsoft.html.erb

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48">
+  <path fill="#ff5722" d="M6 6H22V22H6z" transform="rotate(-180 14 14)"></path><path fill="#4caf50" d="M26 6H42V22H26z" transform="rotate(-180 34 14)"></path><path fill="#ffc107" d="M26 26H42V42H26z" transform="rotate(-180 34 34)"></path><path fill="#03a9f4" d="M6 26H22V42H6z" transform="rotate(-180 14 34)"></path>
+</svg>

app/views/mfa_setup/_form.html.erb

@@ -0,0 +1,17 @@
+<%= form_for '', url: mfa_setup_path, data: { turbo_frame: :_top }, html: { id: 'mfa_form' } do |f| %>
+  <p class="text-center">
+    Use an authenticator mobile app like Google Authenticator or 1Password to scan the QR code below.
+  </p>
+  <div>
+    <%== RQRCode::QRCode.new(@provision_url).as_svg(viewbox: true, svg_attributes: { class: 'w-80 h-80 my-4 mx-auto' }) %>
+  </div>
+  <div class="form-control my-6 space-y-2">
+    <%= f.text_field :otp_attempt, required: true, placeholder: 'XXX-XXX', class: 'base-input text-center' %>
+    <span>
+      <%= @error_message %>
+    </span>
+  </div>
+  <div class="form-control mt-4">
+    <%= f.button button_title(title: 'Save'), class: 'base-button' %>
+  </div>
+<% end %>

app/views/mfa_setup/new.html.erb

@@ -1,19 +1,3 @@
 <%= render 'shared/turbo_modal', title: 'Setup 2FA' do %>
-  <%= form_for '', url: mfa_setup_path, data: { turbo_frame: :_top } do |f| %>
-    <p class="text-center">
-      Use an authenticator mobile app like Google Authenticator or 1Password to scan the QR code below.
-    </p>
-    <div>
-      <%== RQRCode::QRCode.new(@provision_url).as_svg(viewbox: true, svg_attributes: { class: 'w-80 h-80 my-4 mx-auto' }) %>
-    </div>
-    <div class="form-control my-6 space-y-2">
-      <%= f.text_field :otp_attempt, required: true, placeholder: 'XXX-XXX', class: 'base-input text-center' %>
-      <span>
-        <%= @error_message %>
-      </span>
-    </div>
-    <div class="form-control mt-4">
-      <%= f.button button_title(title: 'Save'), class: 'base-button' %>
-    </div>
-  <% end %>
+  <%= render 'mfa_setup/form' %>
 <% end %>

app/views/mfa_setup/show.html.erb

@@ -0,0 +1,4 @@
+<div class="max-w-lg mx-auto px-2">
+  <h1 class="text-4xl font-bold text-center mt-8">Setup 2FA</h1>
+  <%= render 'mfa_setup/form' %>
+</div>

app/views/notifications_settings/index.html.erb

@@ -5,7 +5,7 @@
     <%= render 'email_stats' %>
     <%= render 'bcc_form', config: @bcc_config %>
     <div class="flex justify-between items-end mb-4 mt-8">
-      <h2 class="text-3xl font-bold">Signature Email Reminders</h2>
+      <h2 class="text-3xl font-bold">Sign Request Email Reminders</h2>
     </div>
     <%= render 'reminder_banner' %>
     <%= render 'reminder_form', config: @reminder_config %>

app/views/scripts/_autosize_field.html.erb

@@ -0,0 +1,15 @@
+<script>
+  if (!window.customElements.get('autosize-field')) {
+    window.customElements.define('autosize-field', class extends HTMLElement {
+      connectedCallback() {
+        if (this.field.scrollHeight > this.field.clientHeight) {
+          this.field.classList.remove('text-[1.5vw]', 'lg:text-base');
+          this.field.classList.add('text-[1.0vw]', 'lg:text-[0.70rem]');
+        }
+      }
+      get field() {
+        return this.closest('field-value');
+      }
+    });
+  }
+</script>

app/views/shared/_button_title.html.erb

@@ -2,13 +2,13 @@
   <span class="flex items-center justify-center space-x-2">
     <%= icon %>
     <% if title %>
-      <span><%= title %></span>
+      <span class="<%= local_assigns[:title_class] %>"><%= title %></span>
     <% end %>
   </span>
 </span>
 <span class="disabled">
   <span class="flex items-center justify-center space-x-2">
     <%= local_assigns[:icon_disabled] || svg_icon('loader', class: 'w-5 h-5 animate-spin') %>
-    <span><%= disabled_with %>...</span>
+    <span class="<%= local_assigns[:title_class] %>"><%= disabled_with %>...</span>
   </span>
 </span>

app/views/start_form/completed.html.erb

@@ -24,9 +24,11 @@
         <%= button_to button_title(title: 'Send copy to Email', disabled_with: 'Sending', icon: svg_icon('mail_forward', class: 'w-6 h-6')), send_submission_email_index_path, params: { submitter_slug: @submitter.slug }, form: { onsubmit: 'event.submitter.disabled = true' }, class: 'base-button w-full' %>
       </div>
     <% end %>
-    <div>
-      <%= button_to button_title(title: 'Resubmit', disabled_with: 'Resubmit', icon: svg_icon('reload', class: 'w-6 h-6')), start_form_path(@template.slug), params: { submitter: { email: params[:email] }, resubmit: true }, method: :put, form: { onsubmit: 'event.submitter.disabled = true' }, class: 'white-button w-full' %>
-    </div>
+    <% if @template.submitters.to_a.size == 1 %>
+      <div>
+        <%= button_to button_title(title: 'Resubmit', disabled_with: 'Resubmit', icon: svg_icon('reload', class: 'w-6 h-6')), start_form_path(@template.slug), params: { submitter: { email: params[:email] }, resubmit: true }, method: :put, form: { onsubmit: 'event.submitter.disabled = true' }, class: 'white-button w-full' %>
+      </div>
+    <% end %>
   </div>
 </div>
 <%= render 'shared/attribution', link_path: '/start' %>

app/views/start_form/show.html.erb

@@ -27,7 +27,8 @@
       <%= form_for @submitter, url: start_form_path(@template.slug), data: { turbo_frame: :_top }, method: :put, html: { class: 'space-y-4', onsubmit: 'event.submitter.disabled = true' } do |f| %>
         <div class="form-control !mt-0">
           <%= f.label :email, class: 'label' %>
-          <%= f.email_field :email, value: current_user&.email || params[:email], required: true, class: 'base-input', placeholder: 'Provide your email to start' %>
+          <%= f.email_field :email, value: current_user&.email || params[:email] || @submitter.email, required: true, class: 'base-input', placeholder: 'Provide your email to start' %>
+          <%= @error_message %>
         </div>
         <div class="form-control">
           <%= f.button button_title(title: 'Start', disabled_with: 'Starting'), class: 'base-button' %>

app/views/submissions/_detailed_form.html.erb

@@ -9,7 +9,7 @@
             </a>
           </div>
           <div class="grid <%= 'md:grid-cols-2' if template.submitters.size > 1 %> gap-4">
-            <% template.submitters.each do |item| %>
+            <% template.submitters.each_with_index do |item, index| %>
               <submitter-item class="form-control">
                 <% if template.submitters.size > 1 %>
                   <label class="label pt-0 pb-1 text-xs">
@@ -18,11 +18,11 @@
                 <% end %>
                 <input type="hidden" name="submission[1][submitters][][uuid]" value="<%= item['uuid'] %>">
                 <submitters-autocomplete data-field="name">
-                  <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="input input-sm input-bordered w-full" placeholder="Name" required>
+                  <%= tag.input type: 'text', name: 'submission[1][submitters][][name]', autocomplete: 'off', class: 'input input-sm input-bordered w-full', placeholder: 'Name', required: index.zero?, value: params[:selfsign] && index.zero? ? current_user.full_name : '' %>
                 </submitters-autocomplete>
                 <div class="grid <%= 'md:grid-cols-2 gap-1' if template.submitters.size == 1 %>">
                   <submitters-autocomplete data-field="email">
-                    <input type="email" multiple name="submission[1][submitters][][email]" autocomplete="off" class="input input-sm input-bordered mt-1.5 w-full" placeholder="Email (optional)">
+                    <input type="email" multiple name="submission[1][submitters][][email]" autocomplete="off" class="input input-sm input-bordered mt-1.5 w-full" placeholder="Email (optional)" value="<%= params[:selfsign] && index.zero? ? current_user.email : '' %>">
                   </submitters-autocomplete>
                   <submitters-autocomplete data-field="phone">
                     <input type="tel" pattern="^\+[0-9\s\-]+$" oninvalid="this.value ? this.setCustomValidity('Use internatioanl format: +1xxx...') : ''" oninput="this.setCustomValidity('')" name="submission[1][submitters][][phone]" autocomplete="off" class="input input-sm input-bordered mt-1.5 w-full" placeholder="Phone (optional)">
@@ -34,10 +34,12 @@
         </div>
       </div>
     </div>
-    <a href="#" class="btn btn-primary btn-sm w-full flex items-center justify-center" data-action="click:dynamic-list#addItem">
-      <%= svg_icon('user_plus', class: 'w-4 h-4 stroke-2') %>
-      <span>Add New</span>
-    </a>
+    <% if params[:selfsign].blank? %>
+      <a href="#" class="btn btn-primary btn-sm w-full flex items-center justify-center" data-action="click:dynamic-list#addItem">
+        <%= svg_icon('user_plus', class: 'w-4 h-4 stroke-2') %>
+        <span>Add New</span>
+      </a>
+    <% end %>
   </dynamic-list>
   <div>
     <%= render('submitters_order', f:, template:) if Accounts.can_send_emails?(current_account) %>

app/views/submissions/_email_form.html.erb

@@ -18,14 +18,14 @@
               </a>
             </div>
             <div class="grid md:grid-cols-2 gap-4">
-              <% template.submitters.each do |item| %>
+              <% template.submitters.each_with_index do |item, index| %>
                 <submitter-item class="form-control">
                   <label class="label pt-0 pb-1 text-xs">
                     <span class="label-text"> <%= item['name'] %></span>
                   </label>
                   <input type="hidden" name="submission[1][submitters][][uuid]" value="<%= item['uuid'] %>">
                   <submitters-autocomplete data-field="email">
-                    <input type="email" multiple name="submission[1][submitters][][email]" autocomplete="off" class="input input-sm input-bordered w-full" placeholder="Email" required>
+                    <%= tag.input type: 'email', multiple: true, name: 'submission[1][submitters][][email]', autocomplete: 'off', class: 'input input-sm input-bordered w-full', placeholder: 'Email', required: index.zero?, value: params[:selfsign] && index.zero? ? current_user.email : '' %>
                   </submitters-autocomplete>
                 </submitter-item>
               <% end %>
@@ -33,10 +33,12 @@
           </div>
         </div>
       </div>
-      <a href="#" class="btn btn-primary btn-sm w-full flex items-center justify-center" data-action="click:dynamic-list#addItem">
-        <%= svg_icon('user_plus', class: 'w-4 h-4 stroke-2') %>
-        <span>Add New</span>
-      </a>
+      <% if params[:selfsign].blank? %>
+        <a href="#" class="btn btn-primary btn-sm w-full flex items-center justify-center" data-action="click:dynamic-list#addItem">
+          <%= svg_icon('user_plus', class: 'w-4 h-4 stroke-2') %>
+          <span>Add New</span>
+        </a>
+      <% end %>
     </dynamic-list>
   <% end %>
   <div>

app/views/submissions/_logo.html.erb

@@ -0,0 +1 @@
+<%= render 'shared/logo', width: 40, height: 40 %>

app/views/submissions/_phone_form.html.erb

@@ -9,7 +9,7 @@
             </a>
           </div>
           <div class="grid <%= template.submitters.size > 1 ? 'md:grid-cols-2 gap-4' : 'gap-1' %>">
-            <% template.submitters.each do |item| %>
+            <% template.submitters.each_with_index do |item, index| %>
               <submitter-item class="grid <%= template.submitters.size > 1 ? 'gap-4' : 'md:grid-cols-2 gap-1' %>">
                 <div class="form-control">
                   <% if template.submitters.size > 1 %>
@@ -19,18 +19,18 @@
                   <% end %>
                   <input type="hidden" name="submission[1][submitters][][uuid]" value="<%= item['uuid'] %>">
                   <submitters-autocomplete data-field="phone">
-                    <input type="tel" pattern="^\+[0-9\s\-]+$" oninvalid="this.value ? this.setCustomValidity('Use internatioanl format: +1xxx...') : ''" oninput="this.setCustomValidity('')" name="submission[1][submitters][][phone]" autocomplete="off" class="input input-sm input-bordered w-full" placeholder="Phone" required>
+                    <%= tag.input type: 'tel', pattern: '^\+[0-9\s\-]+$', oninvalid: "this.value ? this.setCustomValidity('Use internatioanl format: +1xxx...') : ''", oninput: "this.setCustomValidity('')", name: 'submission[1][submitters][][phone]', autocomplete: 'off', class: 'input input-sm input-bordered w-full', placeholder: 'Phone', required: index.zero? %>
                   </submitters-autocomplete>
                   <% if template.submitters.size > 1 %>
                     <submitters-autocomplete data-field="name">
-                      <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="input input-sm input-bordered mt-1.5 w-full" placeholder="Name (optional)">
+                      <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="input input-sm input-bordered mt-1.5 w-full" placeholder="Name (optional)" value="<%= params[:selfsign] && index.zero? ? current_user.full_name : '' %>">
                     </submitters-autocomplete>
                   <% end %>
                 </div>
                 <% if template.submitters.size == 1 %>
                   <div class="form-control flex">
                     <submitters-autocomplete data-field="name">
-                      <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="input input-sm input-bordered w-full" placeholder="Name (optional)">
+                      <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="input input-sm input-bordered w-full" placeholder="Name (optional)" value="<%= params[:selfsign] && index.zero? ? current_user.full_name : '' %>">
                     </submitters-autocomplete>
                   </div>
                 <% end %>
@@ -40,10 +40,12 @@
         </div>
       </div>
     </div>
-    <a href="#" class="btn btn-primary btn-sm w-full flex items-center justify-center" data-action="click:dynamic-list#addItem">
-      <%= svg_icon('user_plus', class: 'w-4 h-4 stroke-2') %>
-      <span>Add New</span>
-    </a>
+    <% if params[:selfsign].blank? %>
+      <a href="#" class="btn btn-primary btn-sm w-full flex items-center justify-center" data-action="click:dynamic-list#addItem">
+        <%= svg_icon('user_plus', class: 'w-4 h-4 stroke-2') %>
+        <span>Add New</span>
+      </a>
+    <% end %>
   </dynamic-list>
   <div>
     <%= render('submitters_order', f:, template:) if Accounts.can_send_emails?(current_account) %>

app/views/submissions/_submitters_order.html.erb

@@ -2,8 +2,8 @@
   <div class="form-control">
     <%= f.label :preserve_order, for: uuid = SecureRandom.uuid, class: 'flex items-center cursor-pointer' do %>
       <%= f.check_box :preserve_order, id: uuid, class: 'base-checkbox', checked: template.submissions.last&.submitters_order.in?(['preserved', nil]) %>
-      <span class="label">Preserve submitters order</span>
-      <span class="tooltip" data-tip="When checked, notifications will be sent to the second submitter once the form is completed by the previous submitter. Uncheck this option to send notifications to all submitters simultaneously right away.">
+      <span class="label">Preserve order</span>
+      <span class="tooltip" data-tip="When checked, notifications will be sent to the second party once the form is completed by the previous party. Uncheck this option to send notifications to all parties simultaneously right away.">
         <%= svg_icon('info_circle', class: 'w-4 h-4') %>
       </span>
     <% end %>

app/views/submissions/_value.html.erb

@@ -1,7 +1,8 @@
-<div class="flex absolute <%= field['readonly'] ? 'text-[1.5vw] lg:text-xs' : 'text-[1.5vw] lg:text-base' %>" style="width: <%= area['w'] * 100 %>%; height: <%= area['h'] * 100 %>%; left: <%= area['x'] * 100 %>%; top: <%= area['y'] * 100 %>%">
+<field-value class="flex absolute text-[1.5vw] lg:text-base" style="width: <%= area['w'] * 100 %>%; height: <%= area['h'] * 100 %>%; left: <%= area['x'] * 100 %>%; top: <%= area['y'] * 100 %>%">
   <% if field['type'].in?(['signature', 'image', 'initials']) %>
     <img class="object-contain mx-auto" src="<%= attachments_index[value].url %>" loading="lazy">
-  <% elsif field['type'] == 'file' %>
+  <% elsif field['type'].in?(['file', 'payment']) %>
+    <autosize-field></autosize-field>
     <div class="px-0.5 flex flex-col justify-center">
       <% Array.wrap(value).each do |val| %>
         <a target="_blank" href="<%= attachments_index[val].url %>">
@@ -11,9 +12,16 @@
       <% end %>
     </div>
   <% elsif field['type'] == 'checkbox' %>
-    <div class="w-full p-[0.2vw] flex items-center justify-center">
+    <div class="w-full flex items-center justify-center">
       <%= svg_icon('check', class: "aspect-square #{area['w'] > area['h'] ? '!w-auto !h-full' : '!w-full !h-auto'}") %>
     </div>
+  <% elsif field['type'].in?(%w[multiple radio]) && area['option_uuid'] %>
+    <% option = field['options']&.find { |o| o['uuid'] == area['option_uuid'] } %>
+    <% if option && Array.wrap(value).include?(option['value']) %>
+      <div class="w-full flex items-center justify-center">
+        <%= svg_icon('check', class: "aspect-square #{area['w'] > area['h'] ? '!w-auto !h-full' : '!w-full !h-auto'}") %>
+      </div>
+    <% end %>
   <% elsif field['type'] == 'cells' %>
     <% cell_width = area['cell_w'] / area['w'] * 100 %>
     <div class="w-full flex items-center">
@@ -24,10 +32,12 @@
       <% end %>
     </div>
   <% elsif field['type'] == 'date' %>
+    <autosize-field></autosize-field>
     <div class="flex items-center px-0.5">
-      <%= l(Date.parse(value), format: :long, locale: local_assigns[:locale]) %>
+      <%= TimeUtils.format_date_string(value, field.dig('preferences', 'format'), local_assigns[:locale]) %>
     </div>
   <% else %>
+    <autosize-field></autosize-field>
     <div class="flex items-center px-0.5 whitespace-pre-wrap"><%= Array.wrap(value).join(', ') %></div>
   <% end %>
-</div>
+</field-value>

app/views/submissions/new.html.erb

@@ -1,4 +1,4 @@
-<%= render 'shared/turbo_modal', title: 'Add New Recipients' do %>
+<%= render 'shared/turbo_modal', title: params[:selfsign] ? 'Add Recipients' : 'Add New Recipients' do %>
   <% options = [['via Email', 'email'], ['via Phone', 'phone'], ['Detailed', 'detailed']] %>
   <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>" class="relative text-center mt-4 block">
     <div class="join">

app/views/submissions/show.html.erb

@@ -1,25 +1,27 @@
 <div style="max-width: 1600px" class="mx-auto pl-4">
   <div class="flex justify-between py-1.5 items-center pr-4 sticky top-0 md:relative z-10 bg-base-100">
-    <a href="<%= template_path(@submission.template) %>" class="flex space-x-3 py-1">
-      <span><%= render 'shared/logo', width: 40, height: 40 %></span>
-      <span class="text-3xl font-semibold focus:text-clip"><%= @submission.template.name %></span>
+    <a href="<%= signed_in? && @submission.template.account_id == current_account&.id ? template_path(@submission.template) : '/' %>" class="flex items-center space-x-3 py-1">
+      <span><%= render 'submissions/logo' %></span>
+      <span class="text-xl md:text-3xl font-semibold focus:text-clip" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;"><%= @submission.template.name %></span>
     </a>
     <div class="space-x-3 flex items-center">
       <% if @submission.audit_trail.present? %>
         <a href="<%= rails_blob_path(@submission.audit_trail) %>" class="white-button" target="_blank">
           <%= svg_icon('external_link', class: 'w-6 h-6') %>
-          Audit Log
+          <span class="hidden md:inline">
+            Audit Log
+          </span>
         </a>
       <% end %>
       <% if last_submitter = @submission.submitters.to_a.select(&:completed_at?).max_by(&:completed_at) %>
         <download-button data-src="<%= submitter_download_index_path(last_submitter.slug) %>" class="base-button">
           <span class="flex items-center justify-center space-x-2" data-target="download-button.defaultButton">
             <%= svg_icon('download', class: 'w-6 h-6') %>
-            <span>Download</span>
+            <span class="hidden md:inline">Download</span>
           </span>
           <span class="flex items-center justify-center space-x-2 hidden" data-target="download-button.loadingButton">
             <%= svg_icon('loader', class: 'w-6 h-6 animate-spin') %>
-            <span>Downloading</span>
+            <span class="hidden md:inline">Downloading</span>
           </span>
         </download-button>
       <% elsif @submission.submitters.to_a.size == 1 %>
@@ -53,7 +55,7 @@
           <% (document.metadata.dig('pdf', 'number_of_pages') || (document.preview_images.loaded? ? preview_images_index.size : document.preview_images.size)).times do |index| %>
             <% page = preview_images_index[index] || page_blob_struct.new(metadata: lazyload_metadata, url: preview_document_page_path(document.uuid, "#{index}.jpg")) %>
             <div id="<%= "page-#{document.uuid}-#{index}" %>" class="relative">
-              <img loading="lazy" src="<%= page.url %>" width="<%= page.metadata['width'] %>" class="shadow-md mb-4" height="<%= page.metadata['height'] %>">
+              <img loading="lazy" src="<%= page.url %>" width="<%= page.metadata['width'] %>" class="border rounded mb-4" height="<%= page.metadata['height'] %>">
               <div class="top-0 bottom-0 left-0 right-0 absolute">
                 <% document_annots_index[index]&.each do |annot| %>
                   <%= render 'submissions/annotation', annot: %>
@@ -61,7 +63,7 @@
                 <% fields_index.dig(document.uuid, index)&.each do |(area, field)| %>
                   <% value = values[field['uuid']] %>
                   <% next if value.blank? %>
-                  <%= render 'submissions/value', area:, field:, attachments_index:, value:, locale: current_account.locale %>
+                  <%= render 'submissions/value', area:, field:, attachments_index:, value:, locale: @submission.template.account.locale %>
                 <% end %>
               </div>
             </div>
@@ -109,18 +111,18 @@
             <div class="flex items-center space-x-1 mt-1">
               <%= svg_icon('writing', class: 'w-5 h-5') %>
               <span>
-                <%= submitter&.completed_at? ? l(submitter.completed_at.in_time_zone(current_account.timezone), format: :long, locale: current_account.locale) : 'Not completed yet' %>
+                <%= submitter&.completed_at? ? l(submitter.completed_at.in_time_zone(@submission.template.account.timezone), format: :long, locale: @submission.template.account.locale) : 'Not completed yet' %>
               </span>
             </div>
-            <% if submitter && submitter.email && !submitter.completed_at && can?(:update, submitter) %>
+            <% if signed_in? && submitter && submitter.email && !submitter.completed_at && can?(:update, submitter) %>
               <div class="mt-2 mb-1">
                 <%= button_to button_title(title: submitter.sent_at? ? 'Re-send Email' : 'Send Email', disabled_with: 'Sending'), submitter_send_email_index_path(submitter_slug: submitter.slug), class: 'btn btn-sm btn-primary w-full' %>
               </div>
             <% end %>
-            <% if submitter && submitter.phone && !submitter.completed_at && can?(:update, submitter) %>
+            <% if signed_in? && submitter && submitter.phone && !submitter.completed_at && can?(:update, submitter) %>
               <%= render 'send_sms_button', submitter: %>
             <% end %>
-            <% if submitter && !submitter.completed_at? && can?(:create, submitter) %>
+            <% if signed_in? && submitter && !submitter.completed_at? && can?(:create, submitter) %>
               <div class="mt-2 mb-1">
                 <a class="btn btn-sm btn-primary w-full" target="_blank" href="<%= submit_form_path(slug: submitter.slug) %>">
                   Submit Form
@@ -146,7 +148,7 @@
                   </div>
                 <% elsif field['type'] == 'image' %>
                   <img class="object-contain mx-auto max-h-28" height="<%= attachments_index[value].metadata['height'] %>" width="<%= attachments_index[value].metadata['width'] %>" src="<%= attachments_index[value].url %>" loading="lazy">
-                <% elsif field['type'] == 'file' %>
+                <% elsif field['type'] == 'file' || field['type'] == 'payment' %>
                   <div class="flex flex-col justify-center">
                     <% Array.wrap(value).each do |val| %>
                       <a target="_blank" class="flex items-center space-x-1" href="<%= attachments_index[val].url %>">
@@ -160,7 +162,7 @@
                 <% elsif field['type'] == 'checkbox' %>
                   <%= svg_icon('check', class: 'w-6 h-6') %>
                 <% elsif field['type'] == 'date' %>
-                  <%= l(Date.parse(value), locale: current_account.locale, format: :long) %>
+                  <%= TimeUtils.format_date_string(value, field.dig('preferences', 'format'), @submission.template.account.locale) %>
                 <% else %>
                   <%= Array.wrap(value).join(', ') %>
                 <% end %>
@@ -172,3 +174,4 @@
     </div>
   </div>
 </div>
+<%= render 'scripts/autosize_field' %>

app/views/submit_form/_banner.html.erb

@@ -1 +1,3 @@
-<%= render 'docuseal_logo' %>
+<div class="flex mt-4">
+  <%= render 'docuseal_logo' %>
+</div>

app/views/submit_form/_submission_form.html.erb

@@ -1,4 +1,4 @@
 <% data_attachments = attachments_index.values.select { |e| e.record_id == submitter.id }.to_json(only: %i[uuid], methods: %i[url filename content_type]) %>
 <% data_fields = (submitter.submission.template_fields || submitter.submission.template.fields).select { |f| f['submitter_uuid'] == submitter.uuid }.to_json %>
-<% completed_button_params = submitter.submission.template.account.account_configs.find_by(key: AccountConfig::FORM_COMPLETED_BUTTON_KEY)&.value || {} %>
-<submission-form data-is-demo="<%= Docuseal.demo? %>" data-completed-button="<%= completed_button_params.to_json %>" data-go-to-last="<%= submitter.opened_at? %>" data-is-direct-upload="<%= Docuseal.active_storage_public? %>" data-submitter="<%= submitter.to_json(only: %i[uuid slug name phone email]) %>" data-can-send-email="<%= Accounts.can_send_emails?(Struct.new(:id).new(@submitter.submission.template.account_id)) %>" data-attachments="<%= data_attachments %>" data-fields="<%= data_fields %>" data-authenticity-token="<%= form_authenticity_token %>" data-values="<%= submitter.values.to_json %>"></submission-form>
+<% configs = Submitters::FormConfigs.call(submitter) %>
+<submission-form data-is-demo="<%= Docuseal.demo? %>" data-completed-button="<%= configs[:completed_button].to_json %>" data-go-to-last="<%= submitter.opened_at? %>" data-is-direct-upload="<%= Docuseal.active_storage_public? %>" data-submitter="<%= submitter.to_json(only: %i[uuid slug name phone email]) %>" data-can-send-email="<%= Accounts.can_send_emails?(Struct.new(:id).new(@submitter.submission.template.account_id)) %>" data-attachments="<%= data_attachments %>" data-fields="<%= data_fields %>" data-values="<%= submitter.values.to_json %>" data-with-typed-signature="<%= configs[:with_typed_signature] %>"></submission-form>

app/views/submit_form/show.html.erb

@@ -5,9 +5,8 @@
 <div style="max-height: -webkit-fill-available;">
   <div id="scrollbox">
     <div class="mx-auto block pb-72" style="max-width: 1000px">
-      <div class="mt-4 flex">
-        <%= render 'banner' %>
-      </div>
+      <%# flex block w-full sticky top-0 z-50 space-x-2 items-center bg-yellow-100 p-2 border-y border-yellow-200 %>
+      <%= render 'banner' %>
       <% (@submitter.submission.template_schema || @submitter.submission.template.schema).each do |item| %>
         <% document = @submitter.submission.template_schema_documents.find { |a| a.uuid == item['attachment_uuid'] } %>
         <% document_annots_index = document.metadata.dig('pdf', 'annotations')&.group_by { |e| e['page'] } || {} %>
@@ -42,3 +41,4 @@
     </div>
   </div>
 </div>
+<%= render 'scripts/autosize_field' %>

app/views/submitter_mailer/documents_copy_email.html.erb

@@ -3,14 +3,10 @@
 <% else %>
   <p>Hi there,</p>
   <p>Please check the copy of your "<%= @submitter.submission.template.name %>" submission in the email attachments.</p>
-  <p>Alternatively, you can download your copy using:</p>
-  <% @documents.each do |document| %>
-    <ul>
-      <li>
-        <%= link_to document.filename.to_s, rails_blob_url(document) %>
-      </li>
-    </ul>
-  <% end %>
+  <p>Alternatively, you can review and download your copy using:</p>
+  <p>
+    <%= link_to @submitter.template.name, submissions_preview_url(@submitter.submission.slug) %>
+  </p>
   <p>
     Thanks,<br><%= @current_account.name %>
   </p>

app/views/submitter_mailer/invitation_email.html.erb

@@ -1,6 +1,7 @@
 <% if @email_config || @body.present? %>
-  <%= auto_link(simple_format(h(ReplaceEmailVariables.call(@body.presence || @email_config.value['body'], submitter: @submitter)))) %>
-  <% if !(@body.presence || @email_config.value['body']).include?(ReplaceEmailVariables::SUBMITTER_LINK) %>
+  <% body = (@body.presence || @email_config.value['body']).to_s %>
+  <%= auto_link(simple_format(h(ReplaceEmailVariables.call(body, submitter: @submitter)))) %>
+  <% if !body.include?(ReplaceEmailVariables::SUBMITTER_LINK) && !body.include?(ReplaceEmailVariables::SUBMITTER_ID) && !body.include?(ReplaceEmailVariables::SUBMISSION_LINK) && !body.include?(ReplaceEmailVariables::TEMPLATE_ID) %>
     <p><%= link_to nil, submit_form_url(slug: @submitter.slug, t: SubmissionEvents.build_tracking_param(@submitter, 'click_email')) %></p>
   <% end %>
 <% else %>

app/views/templates/_submission.html.erb

@@ -35,7 +35,18 @@
           </button>
         </form>
       <% else %>
-        <%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug), class: 'btn btn-sm btn-neutral text-white md:w-36 flex', icon_class: 'w-6 h-6 text-white', copy_title: 'Copy Link', copy_title_md: 'Copy', copied_title_md: 'Copied' %>
+        <% if current_user.email == submitter.email %>
+          <form data-turbo="false" method="get" action="<%= submit_form_url(slug: submitter.slug) %>">
+            <button onclick="event.stopPropagation()" class="btn btn-sm btn-neutral btn-outline bg-white md:w-36 flex">
+              <span class="flex items-center justify-center space-x-2">
+                <%= svg_icon('writing_sign', class: 'w-4 h-4 stroke-2') %>
+                <span class="hidden md:inline">Sign now</span>
+              </span>
+            </button>
+          </form>
+        <% else %>
+          <%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug), class: 'btn btn-sm btn-neutral text-white md:w-36 flex', icon_class: 'w-6 h-6 text-white', copy_title: 'Copy Link', copy_title_md: 'Copy', copied_title_md: 'Copied' %>
+        <% end %>
       <% end %>
       <span class="btn btn-outline btn-sm w-20 md:w-24">View</span>
       <% if !submission.deleted_at? && can?(:destroy, submission) %>
@@ -85,7 +96,18 @@
                 </form>
               <% elsif !is_submission_completed %>
                 <div class="flex items-center space-x-3">
-                  <%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug), class: 'btn btn-xs text-xs btn-neutral text-white md:w-36 flex', icon_class: 'w-4 h-4 text-white', copy_title: 'Copy Link' %>
+                  <% if current_user.email == submitter.email %>
+                    <form data-turbo="false" method="get" action="<%= submit_form_url(slug: submitter.slug) %>">
+                      <button onclick="event.stopPropagation()" class="btn btn-xs btn-outline btn-neutral bg-white md:w-36">
+                        <span class="flex items-center justify-center space-x-2">
+                          <%= svg_icon('writing_sign', class: 'w-4 h-4 stroke-2') %>
+                          <span class="hidden md:inline">Sign now</span>
+                        </span>
+                      </button>
+                    </form>
+                  <% else %>
+                    <%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug), class: 'btn btn-xs text-xs btn-neutral text-white md:w-36 flex', icon_class: 'w-4 h-4 text-white', copy_title: 'Copy Link' %>
+                  <% end %>
                 </div>
               <% end %>
             </div>

app/views/templates/_template.html.erb

@@ -6,7 +6,7 @@
     <div class="pb-6 pt-1 space-y-1">
       <p class="flex items-center space-x-1 text-xs text-base-content/60">
         <%= svg_icon('user', class: 'w-4 h-4') %>
-        <span><%= template.author.full_name.presence || template.author.email %></span>
+        <span><%= template.author.full_name.presence || template.author.email.to_s.sub(/\+\w+@/, '@') %></span>
       </p>
       <p class="flex text-xs text-base-content/60">
         <span class="flex items-center space-x-1 w-1/2">
@@ -52,10 +52,10 @@
           </a>
         </span>
       <% end %>
-      <% if (!template.deleted_at? || !Docuseal.multitenant?) && can?(:destroy, template) %>
-        <span class="tooltip tooltip-left" data-tip="<%= template.deleted_at? ? 'Remove' : 'Archive' %>">
-          <%= button_to template_path(template), data: { turbo_confirm: 'Are you sure?' }, params: { permanently: template.deleted_at? }.compact_blank, method: :delete, class: 'btn btn-xs hover:btn-outline bg-base-200 btn-circle', aria_label: 'Restore' do %>
-            <%= svg_icon('trash', class: 'w-4 h-4 enabled') %>
+      <% if can?(:destroy, template) %>
+        <span class="tooltip tooltip-left" data-tip="<%= template.deleted_at? ? 'Delete' : 'Archive' %>">
+          <%= button_to template_path(template), data: { turbo_confirm: template.deleted_at? ? 'Template deletion is irreversible and will permanently remove all associated signed documents with it. Are you sure?' : 'Are you sure?' }, params: { permanently: template.deleted_at? }.compact_blank, method: :delete, class: 'btn btn-xs hover:btn-outline bg-base-200 btn-circle', aria_label: 'Restore' do %>
+            <%= svg_icon(template.deleted_at? ? 'trash' : 'archive', class: 'w-4 h-4 enabled') %>
             <%= svg_icon('loader', class: 'w-4 h-4 animate-spin disabled') %>
           <% end %>
         </span>

app/views/templates/_title.html.erb

@@ -14,7 +14,7 @@
         </span>
       </a>
       <% if can?(:update, template) %>
-        <span class="pl-1 tooltip tooltip-right opacity-0 hover:opacity-100 peer-hover:opacity-100" data-tip="Move">
+        <span class="pl-1 tooltip tooltip-right md:opacity-0 hover:opacity-100 peer-hover:opacity-100" data-tip="Move">
           <a href="<%= edit_template_folder_path(template.id) %>" data-turbo-frame="modal">
             <%= svg_icon('pencil_share', class: 'w-5 h-5') %>
           </a>
@@ -23,13 +23,16 @@
     </div>
   </div>
   <div class="flex md:justify-between space-x-2 flex-none pt-1">
+    <% if !template.deleted_at? %>
+      <%= render 'shared/clipboard_copy', text: start_form_url(slug: @template.slug), class: 'btn btn-sm btn-neutral text-white', icon_class: 'w-6 h-6 text-white', copy_title: 'Copy Link', copied_title: 'Copied', copy_title_md: 'Link', copied_title_md: 'Copied' %>
+    <% end %>
     <% if !template.deleted_at? && can?(:destroy, template) %>
-      <%= button_to button_title(title: 'Remove', disabled_with: 'Removing', icon: svg_icon('trash', class: 'w-6 h-6')), template_path(template), class: 'btn btn-outline btn-sm', method: :delete, data: { turbo_confirm: 'Are you sure?' } %>
+      <%= button_to button_title(title: 'Archive', disabled_with: 'Archiving', title_class: 'hidden md:inline', icon: svg_icon('archive', class: 'w-6 h-6')), template_path(template), class: 'btn btn-outline btn-sm', method: :delete, data: { turbo_confirm: 'Are you sure?' } %>
     <% end %>
     <% if can?(:create, template) %>
       <%= link_to new_template_path(base_template_id: template.id), class: 'btn btn-outline btn-sm', data: { turbo_frame: :modal } do %>
         <%= svg_icon('copy', class: 'w-6 h-6') %>
-        <span>Clone</span>
+        <span class="hidden md:inline">Clone</span>
       <% end %>
     <% end %>
     <% if !template.deleted_at? && can?(:update, template) %>

app/views/templates/new.html.erb

@@ -4,7 +4,7 @@
       <%= hidden_field_tag :base_template_id, @base_template.id %>
     <% end %>
     <div class="form-control mt-6">
-      <%= f.text_field :name, required: true, placeholder: 'Document Template Name', class: 'base-input' %>
+      <%= f.text_field :name, required: true, placeholder: 'Document Name', class: 'base-input' %>
     </div>
     <div class="mt-3 mb-4 flex items-center justify-between">
       <a href="#" onclick="[event.preventDefault(), window.folder_name.focus()]">

app/views/templates/show.html.erb

@@ -1,23 +1,18 @@
 <%= render 'title', template: @template %>
 <% is_show_tabs = @pagy.pages > 1 || params[:status].present? %>
-<% if !@pagy.count.zero? || @template.submitters.to_a.size == 1 || params[:q].present? %>
+<% if !@pagy.count.zero? || params[:q].present? %>
   <div class="flex justify-between md:items-end flex-col md:flex-row <%= is_show_tabs ? 'mb-4' : 'mb-6' %>">
     <p class="text-3xl font-bold">Submissions</p>
-    <div class="flex md:space-x-2 mt-3 md:mt-0">
+    <div class="flex justify-end space-x-2 mt-3 md:mt-0">
       <% if params[:q].present? || params[:status].present? || @pagy.pages > 1 %>
         <%= render 'shared/search_input' %>
       <% end %>
-      <%= link_to new_template_submissions_export_path(@template), class: 'order-3 md:order-1 btn btn-ghost text-base', data: { turbo_frame: 'modal' } do %>
+      <%= link_to new_template_submissions_export_path(@template), class: 'btn btn-ghost text-base', data: { turbo_frame: 'modal' } do %>
         <%= svg_icon('download', class: 'w-6 h-6 stroke-2') %>
         <span>Export</span>
       <% end %>
-      <% if @template.submitters.to_a.size == 1 && !@template.deleted_at? %>
-        <span class="order-1">
-          <%= render 'shared/clipboard_copy', text: start_form_url(slug: @template.slug), class: 'base-button', icon_class: 'w-6 h-6 text-white', copy_title: 'Copy Share Link', copied_title: 'Copied to Clipboard', copy_title_md: 'Copy', copied_title_md: 'Copied' %>
-        </span>
-      <% end %>
       <% if !@template.deleted_at? && can?(:create, Submission) %>
-        <%= link_to new_template_submission_path(@template), class: 'order-1 btn btn-primary text-base', data: { turbo_frame: 'modal' } do %>
+        <%= link_to new_template_submission_path(@template), class: 'white-button !border', data: { turbo_frame: 'modal' } do %>
           <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
           <span>Add <span class="hidden md:inline">Recipients</span></span>
         <% end %>
@@ -85,12 +80,19 @@
             <% if can?(:create, Submission) %>
               <%= link_to new_template_submission_path(@template), class: 'base-button mt-6', data: { turbo_frame: 'modal' } do %>
                 <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
-                <span class="mr-1">Add Recipients</span>
+                <span class="mr-1">Send to Recipients</span>
               <% end %>
             <% end %>
-            <%= link_to start_form_url(slug: @template.slug), class: 'white-button mt-6', target: '_blank', rel: 'noopener' do %>
-              <%= svg_icon('writing', class: 'w-6 h-6') %>
-              <span class="mr-1">Sign it Yourself</span>
+            <% if @template.submitters.size == 1 %>
+              <%= link_to start_form_url(slug: @template.slug), class: 'white-button mt-6', target: '_blank', rel: 'noopener' do %>
+                <%= svg_icon('writing', class: 'w-6 h-6') %>
+                <span class="mr-1">Sign it Yourself</span>
+              <% end %>
+            <% else %>
+              <%= link_to new_template_submission_path(@template, selfsign: true), class: 'white-button mt-6', data: { turbo_frame: 'modal' } do %>
+                <%= svg_icon('writing', class: 'w-6 h-6') %>
+                <span class="mr-1">Sign it Yourself</span>
+              <% end %>
             <% end %>
           <% end %>
         </div>

app/views/users/index.html.erb

@@ -3,12 +3,14 @@
   <div class="md:flex-grow">
     <div class="flex justify-between mb-4">
       <h1 class="text-4xl font-bold">Team</h1>
-      <% if can?(:create, User.new(account: current_account)) %>
-        <%= link_to new_user_path, class: 'btn btn-primary btn-md gap-2', data: { turbo_frame: 'modal' } do %>
-          <%= svg_icon('plus', class: 'w-6 h-6') %>
-          <span>New User</span>
+      <div class="flex items-center space-x-4">
+        <% if can?(:create, User.new(account: current_account)) %>
+          <%= link_to new_user_path, class: 'btn btn-primary btn-md gap-2', data: { turbo_frame: 'modal' } do %>
+            <%= svg_icon('plus', class: 'w-6 h-6') %>
+            <span>New User</span>
+          <% end %>
         <% end %>
-      <% end %>
+      </div>
     </div>
     <div class="overflow-x-auto">
       <table class="table w-full table-lg rounded-b-none overflow-hidden">

app/views/webhook_settings/show.html.erb

@@ -7,7 +7,7 @@
         <%= form_for @encrypted_config, url: settings_webhooks_path, method: :post, html: { autocomplete: 'off' } do |f| %>
           <%= f.label :value, 'Webhook URL', class: 'text-sm font-semibold' %>
           <div class="flex flex-row flex-wrap space-y-2 md:space-y-0 md:flex-nowrap md:space-x-4 mt-2">
-            <%= f.text_field :value, required: true, class: 'input font-mono input-bordered w-full', placeholder: 'https://example.com/hook' %>
+            <%= f.url_field :value, class: 'input font-mono input-bordered w-full', placeholder: 'https://example.com/hook' %>
             <%= f.button button_title(title: 'Save', disabled_with: 'Saving'), class: 'base-button w-full md:w-32' %>
           </div>
         <% end %>

config/application.rb

@@ -25,6 +25,8 @@ module DocuSeal
     config.i18n.available_locales = %i[en en-US en-GB es-ES fr-FR pt-PT de-DE]
     config.i18n.fallbacks = [:en]
 
+    config.exceptions_app = ->(env) { ErrorsController.action(:show).call(env) }
+
     config.action_view.frozen_string_literal = true
 
     config.middleware.insert_before ActionDispatch::Static, Rack::Deflater

config/boot.rb

@@ -24,5 +24,19 @@ if ENV['RAILS_ENV'] == 'production' && ENV['SECRET_KEY_BASE'].to_s.empty?
   ENV['DATABASE_URL'] = ENV['DATABASE_URL'].to_s.empty? ? database_url : ENV.fetch('DATABASE_URL', nil)
 end
 
+if ENV['DATABASE_URL'].to_s.split('@').last.to_s.split('/').first.to_s.include?('_')
+  require 'addressable'
+
+  url = Addressable::URI.parse(ENV.fetch('DATABASE_URL', ''))
+
+  ENV['DATABASE_HOST'] = url.host
+  ENV['DATABASE_PORT'] = (url.port || 5432).to_s
+  ENV['DATABASE_USER'] = url.user
+  ENV['DATABASE_PASSWORD'] = url.password
+  ENV['DATABASE_NAME'] = url.path.to_s.delete_prefix('/')
+
+  ENV.delete('DATABASE_URL')
+end
+
 require 'bundler/setup' # Set up gems listed in the Gemfile.
 require 'bootsnap/setup' # Speed up boot time by caching expensive operations.

config/database.yml

@@ -12,7 +12,14 @@ test:
   database: docuseal_test
 
 production:
-<% if ENV['DATABASE_URL'].to_s.empty? %>
+<% if !ENV['DATABASE_HOST'].to_s.empty? %>
+  <<: *default
+  host: <%= ENV['DATABASE_HOST'] %>
+  port: <%= ENV['DATABASE_PORT'] %>
+  username: <%= ENV['DATABASE_USER'] %>
+  password: <%= ENV['DATABASE_PASSWORD'] %>
+  database: <%= ENV['DATABASE_NAME'] %>
+<% elsif ENV['DATABASE_URL'].to_s.empty? %>
   adapter: sqlite3
   database: <%= ENV['WORKDIR'] || '.' %>/db.sqlite3
 <% elsif ENV['DATABASE_URL'].match?(/\Apostgres/) %>