SMTP auto option

.github/workflows/ci.yml

@@ -59,7 +59,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 16.13.1
+          node-version: 20.9.0
       - name: Cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
@@ -104,7 +104,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v1
         with:
-          node-version: 16.13.1
+          node-version: 20.9.0
       - name: Install Chrome
         uses: browser-actions/setup-chrome@latest
       - name: Cache node_modules

.rubocop.yml

@@ -30,7 +30,7 @@ Metrics/ParameterLists:
   Max: 10
 
 Metrics/MethodLength:
-  Max: 25
+  Max: 30
   Exclude:
     - 'db/migrate/**'
 
@@ -44,7 +44,7 @@ Layout/LineLength:
   AllowedPatterns: ['\A\s*#']
 
 Metrics/AbcSize:
-  Max: 35
+  Max: 40
 
 Metrics/ModuleLength:
   Max: 500

Dockerfile

@@ -2,9 +2,7 @@ FROM ruby:3.2.2-alpine3.18 as fonts
 
 WORKDIR /fonts
 
-RUN apk --no-cache add fontforge wget ttf-liberation &&  cp /usr/share/fonts/liberation/LiberationSans-Regular.ttf /usr/share/fonts/liberation/LiberationSans-Bold.ttf . && wget https://cdn.jsdelivr.net/gh/notofonts/notofonts.github.io/fonts/NotoSansArabic/hinted/ttf/NotoSansArabic-Regular.ttf && wget https://github.com/impallari/DancingScript/raw/master/fonts/DancingScript-Regular.otf && wget https://github.com/impallari/DancingScript/raw/master/OFL.txt
+RUN apk --no-cache add wget && wget https://github.com/satbyy/go-noto-universal/releases/download/v7.0/GoNotoKurrent-Regular.ttf && wget https://github.com/satbyy/go-noto-universal/releases/download/v7.0/GoNotoKurrent-Bold.ttf && wget https://github.com/impallari/DancingScript/raw/master/fonts/DancingScript-Regular.otf && wget https://github.com/impallari/DancingScript/raw/master/OFL.txt
-
-RUN fontforge -lang=py -c 'font1 = fontforge.open("LiberationSans-Regular.ttf"); font2 = fontforge.open("NotoSansArabic-Regular.ttf"); font1.mergeFonts(font2); font1.generate("LiberationSans-Regular.ttf")'
 
 FROM ruby:3.2.2-alpine3.18 as webpack
 
@@ -36,6 +34,7 @@ FROM ruby:3.2.2-alpine3.18 as app
 
 ENV RAILS_ENV=production
 ENV BUNDLE_WITHOUT="development:test"
+ENV PIDFILE=/dev/null
 
 WORKDIR /app
 
@@ -55,7 +54,7 @@ COPY ./public ./public
 COPY ./tmp ./tmp
 COPY LICENSE README.md Rakefile config.ru .version ./
 
-COPY --from=fonts /fonts/LiberationSans-Regular.ttf /fonts/LiberationSans-Bold.ttf /fonts/DancingScript-Regular.otf /fonts/OFL.txt /fonts
+COPY --from=fonts /fonts/GoNotoKurrent-Regular.ttf /fonts/GoNotoKurrent-Bold.ttf /fonts/DancingScript-Regular.otf /fonts/OFL.txt /fonts
 COPY --from=webpack /app/public/packs ./public/packs
 
 RUN ln -s /fonts /app/public/fonts

Gemfile

@@ -32,7 +32,6 @@ gem 'rack'
 gem 'rails'
 gem 'rails_autolink'
 gem 'rails-i18n'
-gem 'rollbar', require: ENV.key?('ROLLBAR_ACCESS_TOKEN')
 gem 'rotp'
 gem 'rqrcode'
 gem 'ruby-vips'

Gemfile.lock

@@ -261,7 +261,7 @@ GEM
       signet (>= 0.16, < 2.a)
     hashdiff (1.1.0)
     hashery (2.1.2)
-    hexapdf (0.34.1)
+    hexapdf (0.37.1)
       cmdparse (~> 3.0, >= 3.0.3)
       geom2d (~> 0.4, >= 0.4.1)
       openssl (>= 2.2.1)
@@ -433,7 +433,6 @@ GEM
       railties (>= 5.2)
     retriable (3.1.2)
     rexml (3.2.6)
-    rollbar (3.4.2)
     rotp (6.3.0)
     rqrcode (2.2.0)
       chunky_png (~> 1.0)
@@ -605,7 +604,6 @@ DEPENDENCIES
   rails
   rails-i18n
   rails_autolink
-  rollbar
   rotp
   rqrcode
   rspec-rails

README.md

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

SECURITY.md

@@ -0,0 +1,5 @@
+# Reporting a Vulnerability
+
+If you come across any security concern or vulnarability, please report the information via email to security@docuseal.co instead of opening a GitHub issue. We will promptly respond and will collaborate with you to validate the issue, and resolve it ASAP.
+
+**We have a bug bounty program to reward security researchers.**

app/controllers/account_configs_controller.rb

@@ -7,9 +7,12 @@ class AccountConfigsController < ApplicationController
   ALLOWED_KEYS = [
     AccountConfig::ALLOW_TYPED_SIGNATURE,
     AccountConfig::FORCE_MFA,
+    AccountConfig::ALLOW_TO_RESUBMIT,
     AccountConfig::ESIGNING_PREFERENCE_KEY
   ].freeze
 
+  InvalidKey = Class.new(StandardError)
+
   def create
     @account_config.update!(account_config_params)
 
@@ -19,7 +22,7 @@ class AccountConfigsController < ApplicationController
   private
 
   def load_account_config
-    return head :not_found unless ALLOWED_KEYS.include?(account_config_params[:key])
+    raise InvalidKey unless ALLOWED_KEYS.include?(account_config_params[:key])
 
     @account_config =
       AccountConfig.find_or_initialize_by(account: current_account, key: account_config_params[:key])

app/controllers/api/active_storage_blobs_proxy_controller.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Api
+  class ActiveStorageBlobsProxyController < ApiBaseController
+    include ActiveStorage::Streaming
+
+    skip_before_action :authenticate_user!
+    skip_authorization_check
+
+    before_action :set_cors_headers
+
+    def show
+      blob_uuid, purp, exp = ApplicationRecord.signed_id_verifier.verified(params[:signed_uuid])
+
+      if blob_uuid.blank? || (purp.present? && purp != 'blob') || (exp && exp < Time.current.to_i)
+        Rollbar.error('Blob not found') if defined?(Rollbar)
+
+        return head :not_found
+      end
+
+      blob = ActiveStorage::Blob.find_by!(uuid: blob_uuid)
+
+      if request.headers['Range'].present?
+        send_blob_byte_range_data blob, request.headers['Range']
+      else
+        http_cache_forever public: true do
+          response.headers['Accept-Ranges'] = 'bytes'
+          response.headers['Content-Length'] = blob.byte_size.to_s
+
+          send_blob_stream blob, disposition: params[:disposition]
+        end
+      end
+    end
+  end
+end

app/controllers/api/active_storage_blobs_proxy_legacy_controller.rb

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

app/controllers/api/api_base_controller.rb

@@ -21,13 +21,13 @@ module Api
 
     if Rails.env.production?
       rescue_from CanCan::AccessDenied do |e|
-        Rollbar.error(e) if defined?(Rollbar)
+        Rollbar.warning(e) if defined?(Rollbar)
 
         render json: { error: e.message }, status: :forbidden
       end
 
       rescue_from JSON::ParserError do |e|
-        Rollbar.error(e) if defined?(Rollbar)
+        Rollbar.warning(e) if defined?(Rollbar)
 
         render json: { error: "JSON parse error: #{e.message}" }, status: :unprocessable_entity
       end
@@ -59,5 +59,13 @@ module Api
     def current_account
       current_user&.account
     end
+
+    def set_cors_headers
+      headers['Access-Control-Allow-Origin'] = '*'
+      headers['Access-Control-Allow-Methods'] = 'POST, GET, PUT, PATCH, DELETE, OPTIONS'
+      headers['Access-Control-Allow-Headers'] = '*'
+      headers['Access-Control-Max-Age'] = '1728000'
+      headers['Access-Control-Allow-Credentials'] = true
+    end
   end
 end

app/controllers/api/submissions_controller.rb

@@ -33,12 +33,18 @@ module Api
     def show
       submitters = @submission.submitters.preload(documents_attachments: :blob, attachments_attachments: :blob)
 
-      serialized_submitters = submitters.map do |submitter|
+      submitters.each do |submitter|
-        Submissions::EnsureResultGenerated.call(submitter) if submitter.completed_at?
+        if submitter.completed_at? && submitter.documents_attachments.blank?
-
+          submitter.documents_attachments = Submissions::EnsureResultGenerated.call(submitter)
-        Submitters::SerializeForApi.call(submitter)
+        end
       end
 
+      if @submission.audit_trail_attachment.blank? && submitters.all?(&:completed_at?)
+        @submission.audit_trail_attachment = Submissions::GenerateAuditTrail.call(@submission)
+      end
+
+      serialized_submitters = submitters.map { |submitter| Submitters::SerializeForApi.call(submitter) }
+
       json = @submission.as_json(
         serialize_params.deep_merge(
           include: { submission_events: { only: %i[id submitter_id event_type event_timestamp] } }
@@ -68,7 +74,7 @@ module Api
       return render json: { error: 'Template not found' }, status: :unprocessable_entity if @template.nil?
 
       if @template.fields.blank?
-        Rollbar.error("Template does not contain fields: #{@template.id}") if defined?(Rollbar)
+        Rollbar.warning("Template does not contain fields: #{@template.id}") if defined?(Rollbar)
 
         return render json: { error: 'Template does not contain fields' }, status: :unprocessable_entity
       end
@@ -80,8 +86,16 @@ module Api
 
       Submissions.send_signature_requests(submissions)
 
+      submissions.each do |submission|
+        if submission.submitters.all?(&:completed_at?) && submission.submitters.last
+          ProcessSubmitterCompletionJob.perform_later(submission.submitters.last)
+        end
+      end
+
       render json: submissions.flat_map(&:submitters)
-    rescue Submitters::NormalizeValues::UnknownFieldName, Submitters::NormalizeValues::UnknownSubmitterName => e
+    rescue Submitters::NormalizeValues::BaseError => e
+      Rollbar.warning(e) if defined?(Rollbar)
+
       render json: { error: e.message }, status: :unprocessable_entity
     end
 
@@ -118,8 +132,13 @@ module Api
           params:
         )
 
-        Submissions::NormalizeParamUtils.save_default_value_attachments!(attachments,
+        submitters = submissions.flat_map(&:submitters)
-                                                                         submissions.flat_map(&:submitters))
+
+        Submissions::NormalizeParamUtils.save_default_value_attachments!(attachments, submitters)
+
+        submitters.each do |submitter|
+          SubmissionEvents.create_with_tracking_data(submitter, 'api_complete_form', request) if submitter.completed_at?
+        end
 
         submissions
       end
@@ -132,8 +151,8 @@ module Api
         include: {
           submitters: { only: %i[id slug uuid name email phone
                                  completed_at opened_at sent_at
-                                 created_at updated_at],
+                                 created_at updated_at external_id metadata],
-                        methods: %i[status] },
+                        methods: %i[status application_key] },
           template: { only: %i[id name created_at updated_at] },
           created_by_user: { only: %i[id email first_name last_name] }
         }
@@ -146,8 +165,8 @@ module Api
         {
           message: %i[subject body],
           submitters: [[:send_email, :send_sms, :completed_redirect_url, :uuid, :name, :email, :role,
-                        :completed, :phone, :application_key,
+                        :completed, :phone, :application_key, :external_id,
-                        { values: {}, readonly_fields: [], message: %i[subject body],
+                        { metadata: {}, values: {}, readonly_fields: [], message: %i[subject body],
                           fields: [%i[name default_value title description
                                       readonly validation_pattern invalid_message]] }]]
         }

app/controllers/api/submitter_form_views_controller.rb

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

app/controllers/api/submitters_autocomplete_controller.rb

@@ -24,9 +24,9 @@ module Api
       if SELECT_COLUMNS.include?(params[:field])
         column = Submitter.arel_table[params[:field].to_sym]
 
-        term = "%#{params[:q].downcase}%"
+        term = "#{params[:q].downcase}%"
 
-        submitters.where(column.lower.matches(term))
+        submitters.where(column.matches(term, false, true))
       else
         Submitters.search(submitters, params[:q])
       end

app/controllers/api/submitters_controller.rb

@@ -7,7 +7,8 @@ module Api
     def index
       submitters = Submitters.search(@submitters, params[:q])
 
-      submitters = submitters.where(application_key: params[:application_key]) if params[:application_key].present?
+      submitters = submitters.where(external_id: params[:application_key]) if params[:application_key].present?
+      submitters = submitters.where(external_id: params[:external_id]) if params[:external_id].present?
       submitters = submitters.where(submission_id: params[:submission_id]) if params[:submission_id].present?
 
       submitters = paginate(
@@ -54,6 +55,8 @@ module Api
         @submitter.save!
 
         @submitter.submission.save!
+
+        SubmissionEvents.create_with_tracking_data(@submitter, 'api_complete_form', request) if @submitter.completed_at?
       end
 
       if @submitter.completed_at?
@@ -69,8 +72,9 @@ module Api
       submitter_params = params.key?(:submitter) ? params.require(:submitter) : params
 
       submitter_params.permit(
-        :send_email, :send_sms, :uuid, :name, :email, :role, :completed, :phone, :application_key,
+        :send_email, :send_sms, :uuid, :name, :email, :role,
-        { values: {}, readonly_fields: [], message: %i[subject body],
+        :completed, :phone, :application_key, :external_id,
+        { metadata: {}, values: {}, readonly_fields: [], message: %i[subject body],
           fields: [%i[name default_value readonly validation_pattern invalid_message]] }
       )
     end
@@ -82,7 +86,9 @@ module Api
       submitter.phone = attrs[:phone].to_s.gsub(/[^0-9+]/, '') if attrs.key?(:phone)
       submitter.values = submitter.values.merge(attrs[:values].to_unsafe_h) if attrs[:values].present?
       submitter.completed_at = attrs[:completed] ? Time.current : submitter.completed_at
-      submitter.application_key = attrs[:application_key] if attrs.key?(:application_key)
+      submitter.external_id = attrs[:application_key] if attrs.key?(:application_key)
+      submitter.external_id = attrs[:external_id] if attrs.key?(:external_id)
+      submitter.metadata = attrs[:metadata] if attrs.key?(:metadata)
 
       assign_submission_fields(submitter.submission)
       assign_preferences(submitter, attrs)

app/controllers/api/templates_clone_controller.rb

@@ -7,27 +7,20 @@ module Api
     def create
       authorize!(:manage, @template)
 
-      cloned_template = Templates::Clone.call(@template,
+      cloned_template = Templates::Clone.call(
-                                              author: current_user,
+        @template,
-                                              name: params[:name],
+        author: current_user,
-                                              application_key: params[:application_key],
+        name: params[:name],
-                                              folder_name: params[:folder_name])
+        external_id: params[:external_id].presence || params[:application_key],
+        folder_name: params[:folder_name]
+      )
 
       cloned_template.source = :api
       cloned_template.save!
 
       Templates::CloneAttachments.call(template: cloned_template, original_template: @template)
 
-      render json: cloned_template.as_json(serialize_params)
+      render json: Templates::SerializeForApi.call(cloned_template)
-    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

@@ -5,16 +5,33 @@ module Api
     load_and_authorize_resource :template
 
     def index
-      templates = Templates.search(@templates, params[:q])
+      templates = filter_templates(@templates, params)
 
-      templates = params[:archived] ? templates.archived : templates.active
+      templates = paginate(templates.preload(:author, :folder))
-      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))
+      schema_documents =
+        ActiveStorage::Attachment.where(record_id: templates.map(&:id),
+                                        record_type: 'Template',
+                                        name: :documents,
+                                        uuid: templates.flat_map { |t| t.schema.pluck('attachment_uuid') })
+                                 .preload(:blob)
+
+      preview_image_attachments =
+        ActiveStorage::Attachment.joins(:blob)
+                                 .where(blob: { filename: '0.jpg' })
+                                 .where(record_id: schema_documents.map(&:id),
+                                        record_type: 'ActiveStorage::Attachment',
+                                        name: :preview_images)
+                                 .preload(:blob)
 
       render json: {
-        data: templates.as_json(serialize_params),
+        data: templates.map do |t|
+          Templates::SerializeForApi.call(
+            t,
+            schema_documents.select { |e| e.record_id == t.id },
+            preview_image_attachments
+          )
+        end,
         pagination: {
           count: templates.size,
           next: templates.last&.id,
@@ -24,14 +41,20 @@ module Api
     end
 
     def show
-      render json: @template.as_json(serialize_params)
+      render json: Templates::SerializeForApi.call(@template)
     end
 
     def update
-      if (folder_name = params.dig(:template, :folder_name))
+      if (folder_name = params[:folder_name] || params.dig(:template, :folder_name))
         @template.folder = TemplateFolders.find_or_create_by_name(current_user, folder_name)
       end
 
+      archived = params.key?(:archived) ? params[:archived] : params.dig(:template, :archived)
+
+      if archived.in?([true, false])
+        @template.archived_at = archived == true ? Time.current : nil
+      end
+
       @template.update!(template_params)
 
       render json: @template.as_json(only: %i[id updated_at])
@@ -49,23 +72,33 @@ module Api
 
     private
 
-    def serialize_params
+    def filter_templates(templates, params)
-      {
+      templates = Templates.search(templates, params[:q])
-        include: { author: { only: %i[id email first_name last_name] },
+      templates = params[:archived] ? templates.archived : templates.active
-                   documents: { only: %i[id uuid], methods: %i[url filename] } }
+      templates = templates.where(external_id: params[:application_key]) if params[:application_key].present?
-      }
+      templates = templates.where(external_id: params[:external_id]) if params[:external_id].present?
+      templates = templates.joins(:folder).where(folder: { name: params[:folder] }) if params[:folder].present?
+
+      templates
     end
 
     def template_params
-      params.require(:template).permit(
+      permit_params = [
         :name,
-        schema: [%i[attachment_uuid name]],
+        { schema: [%i[attachment_uuid name]],
-        submitters: [%i[name uuid]],
+          submitters: [%i[name uuid]],
-        fields: [[:uuid, :submitter_uuid, :name, :type, :required, :readonly, :default_value,
+          fields: [[:uuid, :submitter_uuid, :name, :type, :required, :readonly, :default_value,
-                  { preferences: {},
+                    { preferences: {},
-                    options: [%i[value uuid]],
+                      conditions: [%i[field_uuid value action]],
-                    areas: [%i[x y w h cell_w attachment_uuid option_uuid page]] }]]
+                      options: [%i[value uuid]],
-      )
+                      areas: [%i[x y w h cell_w attachment_uuid option_uuid page]] }]] }
+      ]
+
+      if params.key?(:template)
+        params.require(:template).permit(*permit_params)
+      else
+        params.permit(*permit_params)
+      end
     end
   end
 end

app/controllers/api/templates_documents_controller.rb

@@ -16,7 +16,7 @@ module Api
       render json: {
         schema:,
         documents: documents.as_json(
-          methods: [:metadata],
+          methods: %i[metadata signed_uuid],
           include: {
             preview_images: { methods: %i[url metadata filename] }
           }

app/controllers/application_controller.rb

@@ -24,7 +24,7 @@ class ApplicationController < ActionController::Base
 
   if Rails.env.production?
     rescue_from CanCan::AccessDenied do |e|
-      Rollbar.error(e) if defined?(Rollbar)
+      Rollbar.warning(e) if defined?(Rollbar)
 
       redirect_to root_path, alert: e.message
     end

app/controllers/dashboard_controller.rb

@@ -52,7 +52,17 @@ class DashboardController < ApplicationController
 
   def filter_templates(templates)
     rel = templates.active.preload(:author).order(id: :desc)
-    rel = rel.where(folder_id: current_account.default_template_folder.id) if params[:q].blank?
+
+    if params[:q].blank?
+      if Docuseal.multitenant? && !current_account.testing?
+        rel = rel.where(folder_id: current_account.default_template_folder.id)
+      else
+        shared_template_ids =
+          TemplateSharing.where(account_id: [current_account.id, TemplateSharing::ALL_ID]).select(:template_id)
+
+        rel = rel.where(folder_id: current_account.default_template_folder.id).or(rel.where(id: shared_template_ids))
+      end
+    end
 
     Templates.search(rel, params[:q])
   end

app/controllers/encrypted_user_configs_controller.rb

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

app/controllers/personalization_settings_controller.rb

@@ -1,23 +1,42 @@
 # frozen_string_literal: true
 
 class PersonalizationSettingsController < ApplicationController
+  ALLOWED_KEYS = [
+    AccountConfig::FORM_COMPLETED_BUTTON_KEY,
+    AccountConfig::SUBMITTER_INVITATION_EMAIL_KEY,
+    AccountConfig::SUBMITTER_DOCUMENTS_COPY_EMAIL_KEY,
+    AccountConfig::SUBMITTER_COMPLETED_EMAIL_KEY
+  ].freeze
+
+  InvalidKey = Class.new(StandardError)
+
+  before_action :load_and_authorize_account_config, only: :create
+
   def show
     authorize!(:read, AccountConfig)
   end
 
   def create
-    account_config =
+    @account_config.save!
-      current_account.account_configs.find_or_initialize_by(key: account_config_params[:key])
-
-    authorize!(:create, account_config)
-
-    account_config.update!(account_config_params)
 
     redirect_back(fallback_location: settings_personalization_path, notice: 'Settings have been saved.')
   end
 
   private
 
+  def load_and_authorize_account_config
+    @account_config =
+      current_account.account_configs.find_or_initialize_by(key: account_config_params[:key])
+
+    @account_config.assign_attributes(account_config_params)
+
+    authorize!(:create, @account_config)
+
+    raise InvalidKey unless ALLOWED_KEYS.include?(@account_config.key)
+
+    @account_config
+  end
+
   def account_config_params
     attrs = params.require(:account_config).permit!
 

app/controllers/preview_document_page_controller.rb

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

app/controllers/registrations_controller.rb

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

app/controllers/send_submission_email_controller.rb

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

app/controllers/sessions_controller.rb

@@ -4,12 +4,14 @@ class SessionsController < Devise::SessionsController
   before_action :configure_permitted_parameters
 
   def create
-    if Docuseal.multitenant? && !User.exists?(email: sign_in_params[:email])
+    email = sign_in_params[:email].to_s.downcase
+
+    if Docuseal.multitenant? && !User.exists?(email:)
       return redirect_to new_registration_path(sign_up: true, user: sign_in_params.slice(:email)),
                          notice: 'Create a new account'
     end
 
-    if User.exists?(email: sign_in_params[:email], otp_required_for_login: true) && sign_in_params[:otp_attempt].blank?
+    if User.exists?(email:, otp_required_for_login: true) && sign_in_params[:otp_attempt].blank?
       return render :otp, locals: { resource: User.new(sign_in_params) }, status: :unprocessable_entity
     end
 

app/controllers/start_form_controller.rb

@@ -10,10 +10,13 @@ class StartFormController < ApplicationController
   before_action :load_template
 
   def show
-    @submitter = @template.submissions.new.submitters.new(uuid: @template.submitters.first['uuid'])
+    @submitter = @template.submissions.new(account_id: @template.account_id)
+                          .submitters.new(uuid: @template.submitters.first['uuid'])
   end
 
   def update
+    return redirect_to start_form_path(@template.slug) if @template.archived_at?
+
     @submitter = Submitter.where(submission: @template.submissions.where(archived_at: nil))
                           .order(id: :desc)
                           .then { |rel| params[:resubmit].present? ? rel.where(completed_at: nil) : rel }
@@ -57,7 +60,8 @@ class StartFormController < ApplicationController
       ip: request.remote_ip,
       ua: request.user_agent,
       values: resubmit_submitter&.preferences&.fetch('default_values', nil) || {},
-      preferences: resubmit_submitter&.preferences.presence || { 'send_email' => true }
+      preferences: resubmit_submitter&.preferences.presence || { 'send_email' => true },
+      metadata: resubmit_submitter&.metadata.presence || {}
     )
 
     if submitter.values.present?
@@ -67,6 +71,7 @@ class StartFormController < ApplicationController
     end
 
     submitter.submission ||= Submission.new(template:,
+                                            account_id: template.account_id,
                                             template_submitters: template.submitters,
                                             source: :link)
 

app/controllers/submissions_controller.rb

@@ -6,23 +6,8 @@ class SubmissionsController < ApplicationController
 
   load_and_authorize_resource :submission, only: %i[show destroy]
 
-  PRELOAD_ALL_PAGES_AMOUNT = 200
-
   def show
-    ActiveRecord::Associations::Preloader.new(
+    @submission = Submissions.preload_with_pages(@submission)
-      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 :show, layout: 'plain'
   end
@@ -75,6 +60,6 @@ class SubmissionsController < ApplicationController
   end
 
   def load_template
-    @template = current_account.templates.find(params[:template_id])
+    @template = Template.accessible_by(current_ability).find(params[:template_id])
   end
 end

app/controllers/submissions_download_controller.rb

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

app/controllers/submissions_preview_controller.rb

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

app/controllers/template_sharings_testing_controller.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class TemplateSharingsTestingController < ApplicationController
+  load_and_authorize_resource :template, parent: true
+
+  before_action do
+    authorize!(:manage, TemplateSharing.new(template: @template))
+  end
+
+  def create
+    testing_account = Accounts.find_or_create_testing_user(true_user.account).account
+
+    if params[:value] == '1'
+      TemplateSharing.create!(ability: :manage, account: testing_account, template: @template)
+    else
+      TemplateSharing.find_by(template: @template, account: testing_account)&.destroy!
+    end
+
+    head :ok
+  end
+end

app/controllers/templates_code_modal_controller.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class TemplatesCodeModalController < ApplicationController
+  load_and_authorize_resource :template
+
+  def show; end
+end

app/controllers/templates_controller.rb

@@ -6,7 +6,7 @@ class TemplatesController < ApplicationController
   before_action :load_base_template, only: %i[new create]
 
   def show
-    submissions = @template.submissions
+    submissions = @template.submissions.accessible_by(current_ability)
     submissions = submissions.active if @template.archived_at.blank?
     submissions = Submissions.search(submissions, params[:q])
 
@@ -33,7 +33,7 @@ class TemplatesController < ApplicationController
     @template_data =
       @template.as_json.merge(
         documents: @template.schema_documents.as_json(
-          methods: [:metadata],
+          methods: %i[metadata signed_uuid],
           include: { preview_images: { methods: %i[url metadata filename] } }
         )
       ).to_json
@@ -47,15 +47,21 @@ class TemplatesController < ApplicationController
                                                         name: params.dig(:template, :name),
                                                         folder_name: params[:folder_name])
     else
-      @template.account = current_account
       @template.author = current_user
       @template.folder = TemplateFolders.find_or_create_by_name(current_user, params[:folder_name])
     end
 
+    if params[:account_id].present? && authorized_clone_account_id?(params[:account_id])
+      @template.account_id = params[:account_id]
+      @template.folder = @template.account.default_template_folder
+    else
+      @template.account = current_account
+    end
+
     if @template.save
       Templates::CloneAttachments.call(template: @template, original_template: @base_template) if @base_template
 
-      redirect_to edit_template_path(@template)
+      maybe_redirect_to_template(@template)
     else
       render turbo_stream: turbo_stream.replace(:modal, template: 'templates/new'), status: :unprocessable_entity
     end
@@ -80,6 +86,18 @@ class TemplatesController < ApplicationController
 
   private
 
+  def authorized_clone_account_id?(account_id)
+    true_user.account_id.to_s == account_id.to_s || true_user.account.linked_accounts.exists?(id: account_id)
+  end
+
+  def maybe_redirect_to_template(template)
+    if template.account == current_account
+      redirect_to(edit_template_path(@template))
+    else
+      redirect_back(fallback_location: root_path, notice: 'Template has been clonned')
+    end
+  end
+
   def template_params
     params.require(:template).permit(:name)
   end
@@ -87,6 +105,6 @@ class TemplatesController < ApplicationController
   def load_base_template
     return if params[:base_template_id].blank?
 
-    @base_template = current_account.templates.find_by(id: params[:base_template_id])
+    @base_template = Template.accessible_by(current_ability).find_by(id: params[:base_template_id])
   end
 end

app/controllers/templates_preview_controller.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class TemplatesPreviewController < ApplicationController
+  load_and_authorize_resource :template
+
+  def show
+    ActiveRecord::Associations::Preloader.new(
+      records: [@template],
+      associations: [schema_documents: { preview_images_attachments: :blob }]
+    ).call
+
+    @template_data =
+      @template.as_json.merge(
+        documents: @template.schema_documents.as_json(
+          methods: %i[metadata signed_uuid],
+          include: { preview_images: { methods: %i[url metadata filename] } }
+        )
+      ).to_json
+
+    render :show, layout: 'plain'
+  end
+end

app/controllers/testing_accounts_controller.rb

@@ -7,7 +7,7 @@ class TestingAccountsController < ApplicationController
     authorize!(:manage, current_account)
     authorize!(:manage, current_user)
 
-    impersonate_user(Accounts.find_or_create_testing_user(current_account))
+    impersonate_user(Accounts.find_or_create_testing_user(true_user.account))
 
     redirect_back(fallback_location: root_path)
   end

app/controllers/user_configs_controller.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+class UserConfigsController < ApplicationController
+  before_action :load_user_config
+  authorize_resource :user_config
+
+  ALLOWED_KEYS = [
+    UserConfig::RECEIVE_COMPLETED_EMAIL
+  ].freeze
+
+  InvalidKey = Class.new(StandardError)
+
+  def create
+    @user_config.update!(user_config_params)
+
+    head :ok
+  end
+
+  private
+
+  def load_user_config
+    raise InvalidKey unless ALLOWED_KEYS.include?(user_config_params[:key])
+
+    @user_config =
+      UserConfig.find_or_initialize_by(user: current_user, key: user_config_params[:key])
+  end
+
+  def user_config_params
+    params.required(:user_config).permit!.tap do |attrs|
+      attrs[:value] = attrs[:value] == '1' if attrs[:value].in?(%w[1 0])
+    end
+  end
+end

app/javascript/application.js

@@ -88,7 +88,10 @@ window.customElements.define('template-builder', class extends HTMLElement {
       backgroundColor: '#faf7f5',
       withPhone: this.dataset.withPhone === 'true',
       withLogo: this.dataset.withLogo !== 'false',
+      editable: this.dataset.editable !== 'false',
       withPayment: this.dataset.withPayment === 'true',
+      withFormula: this.dataset.withFormula === 'true',
+      withConditions: this.dataset.withConditions === 'true',
       currencies: (this.dataset.currencies || '').split(',').filter(Boolean),
       acceptFileTypes: this.dataset.acceptFileTypes,
       isDirectUpload: this.dataset.isDirectUpload === 'true'

app/javascript/application.scss

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

app/javascript/elements/submitter_autocomplete.js

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

app/javascript/submission_form/area.vue

@@ -173,7 +173,7 @@
 </template>
 
 <script>
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1 } from '@tabler/icons-vue'
 
 export default {
   name: 'FieldArea',
@@ -240,6 +240,7 @@ export default {
         signature: this.t('signature'),
         initials: this.t('initials'),
         date: this.t('date'),
+        number: this.t('number'),
         image: this.t('image'),
         file: this.t('file'),
         select: this.t('select'),
@@ -260,6 +261,7 @@ export default {
         text: IconTextSize,
         signature: IconWritingSign,
         date: IconCalendarEvent,
+        number: IconSquareNumber1,
         image: IconPhoto,
         initials: IconLetterCaseUpper,
         file: IconPaperclip,
@@ -307,7 +309,7 @@ export default {
     formattedDate () {
       if (this.field.type === 'date' && this.modelValue) {
         return this.formatDate(
-          new Date(this.modelValue),
+          this.modelValue === '{{date}}' ? new Date() : new Date(this.modelValue),
           this.field.preferences?.format || (this.locale.endsWith('-US') ? 'MM/DD/YYYY' : 'DD/MM/YYYY')
         )
       } else {

app/javascript/submission_form/form.vue

@@ -8,13 +8,24 @@
     :current-step="currentStepFields"
     @focus-step="[saveStep(), goToStep($event, false, true), currentField.type !== 'checkbox' ? isFormVisible = true : '']"
   />
+  <FormulaFieldAreas
+    v-if="formulaFields.length"
+    :fields="formulaFields"
+    :values="values"
+  />
   <button
     v-if="!isFormVisible"
     id="expand_form_button"
     class="btn btn-neutral flex text-white absolute rounded-none border-x-0 md:border md:rounded-full bottom-0 w-full md:mb-4 text-base"
-    @click.prevent="isFormVisible = true"
+    @click.prevent="[isFormVisible = true, scrollIntoField(currentField)]"
   >
-    {{ t('submit_form') }}
+    <template v-if="['initials', 'signature'].includes(currentField.type)">
+      <IconWritingSign stroke-width="1.5" />
+      {{ t('sign_now') }}
+    </template>
+    <template v-else>
+      {{ t('submit_form') }}
+    </template>
     <IconArrowsDiagonal
       class="absolute right-0 mr-4"
       :width="20"
@@ -32,7 +43,7 @@
       v-if="!isCompleted"
       id="minimize_form_button"
       class="absolute right-0 mr-2 mt-2 top-0 hidden md:block"
-      title="Minimize"
+      :title="t('minimize')"
       @click.prevent="isFormVisible = false"
     >
       <IconArrowsDiagonalMinimize2
@@ -40,13 +51,16 @@
         :height="20"
       />
     </button>
-    <div>
+    <div
+      :class="{ 'md:px-4': isBreakpointMd }"
+    >
       <form
         v-if="!isCompleted"
         ref="form"
         :action="submitPath"
         method="post"
-        :class="{ 'md:mx-16': isBreakpointMd }"
+        class="mx-auto"
+        :style="{ maxWidth: isBreakpointMd ? '582px' : '' }"
         @submit.prevent="submitStep"
       >
         <input
@@ -69,6 +83,14 @@
               @focus="scrollIntoField(currentField)"
             />
           </div>
+          <NumberStep
+            v-else-if="currentField.type === 'number'"
+            :key="currentField.uuid"
+            v-model="values[currentField.uuid]"
+            :show-field-names="showFieldNames"
+            :field="currentField"
+            @focus="scrollIntoField(currentField)"
+          />
           <DateStep
             v-else-if="currentField.type === 'date'"
             :key="currentField.uuid"
@@ -254,7 +276,7 @@
             :key="currentField.uuid"
             v-model="values[currentField.uuid]"
             :field="currentField"
-            :previous-value="previousSignatureValue"
+            :previous-value="previousSignatureValueFor(currentField)"
             :is-direct-upload="isDirectUpload"
             :with-typed-signature="withTypedSignature"
             :attachments-index="attachmentsIndex"
@@ -385,6 +407,7 @@
 
 <script>
 import FieldAreas from './areas'
+import FormulaFieldAreas from './formula_areas'
 import ImageStep from './image_step'
 import SignatureStep from './signature_step'
 import InitialsStep from './initials_step'
@@ -393,12 +416,31 @@ import MultiSelectStep from './multi_select_step'
 import PhoneStep from './phone_step'
 import PaymentStep from './payment_step'
 import TextStep from './text_step'
+import NumberStep from './number_step'
 import DateStep from './date_step'
 import FormCompleted from './completed'
-import { IconInnerShadowTop, IconArrowsDiagonal, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
+import { IconInnerShadowTop, IconArrowsDiagonal, IconWritingSign, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
 import AppearsOn from './appears_on'
 import i18n from './i18n'
 
+const isEmpty = (obj) => {
+  if (obj == null) return true
+
+  if (Array.isArray(obj) || typeof obj === 'string') {
+    return obj.length === 0
+  }
+
+  if (typeof obj === 'object') {
+    return Object.keys(obj).length === 0
+  }
+
+  if (obj === false) {
+    return true
+  }
+
+  return false
+}
+
 export default {
   name: 'SubmissionForm',
   components: {
@@ -406,6 +448,7 @@ export default {
     ImageStep,
     SignatureStep,
     AppearsOn,
+    IconWritingSign,
     AttachmentStep,
     InitialsStep,
     MultiSelectStep,
@@ -413,6 +456,8 @@ export default {
     DateStep,
     IconArrowsDiagonal,
     TextStep,
+    NumberStep,
+    FormulaFieldAreas,
     PhoneStep,
     PaymentStep,
     IconArrowsDiagonalMinimize2,
@@ -448,6 +493,11 @@ export default {
         return () => {}
       }
     },
+    expand: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
     withConfetti: {
       type: Boolean,
       required: false,
@@ -518,6 +568,11 @@ export default {
       required: false,
       default: () => ({})
     },
+    i18n: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
     withSendCopyButton: {
       type: Boolean,
       required: false,
@@ -542,7 +597,7 @@ export default {
   data () {
     return {
       isCompleted: false,
-      isFormVisible: true,
+      isFormVisible: this.expand !== false,
       showFillAllRequiredFields: false,
       currentStep: 0,
       isSubmitting: false,
@@ -566,10 +621,12 @@ export default {
     submitterSlug () {
       return this.submitter.slug
     },
-    previousSignatureValue () {
+    fieldsUuidIndex () {
-      const signatureField = [...this.fields].reverse().find((field) => field.type === 'signature' && !!this.values[field.uuid])
+      return this.fields.reduce((acc, f) => {
+        acc[f.uuid] = f
 
-      return this.values[signatureField?.uuid]
+        return acc
+      }, {})
     },
     previousInitialsValue () {
       const initialsField = [...this.fields].reverse().find((field) => field.type === 'initials' && !!this.values[field.uuid])
@@ -577,7 +634,7 @@ export default {
       return this.values[initialsField?.uuid]
     },
     isAnonymousChecboxes () {
-      return this.currentField.type === 'checkbox' && this.currentStepFields.every((e) => !e.name) && this.currentStepFields.length > 4
+      return this.currentField.type === 'checkbox' && this.currentStepFields.every((e) => !e.name && !e.required) && this.currentStepFields.length > 4
     },
     isButtonDisabled () {
       if (this.recalculateButtonDisabledKey) {
@@ -596,15 +653,20 @@ export default {
       return this.fields.filter((f) => !f.readonly).reduce((acc, f) => {
         const prevStep = acc[acc.length - 1]
 
-        if (f.type === 'checkbox' && Array.isArray(prevStep) && prevStep[0].type === 'checkbox') {
+        if (this.checkFieldConditions(f)) {
-          prevStep.push(f)
+          if (f.type === 'checkbox' && Array.isArray(prevStep) && prevStep[0].type === 'checkbox') {
-        } else {
+            prevStep.push(f)
-          acc.push([f])
+          } else {
+            acc.push([f])
+          }
         }
 
         return acc
       }, [])
     },
+    formulaFields () {
+      return this.fields.filter((f) => f.preferences?.formula)
+    },
     attachmentsIndex () {
       return this.attachments.reduce((acc, a) => {
         acc[a.uuid] = a
@@ -616,12 +678,17 @@ export default {
       return `/s/${this.submitterSlug}`
     }
   },
+  watch: {
+    expand (value) {
+      this.isFormVisible = value
+    }
+  },
   mounted () {
     this.submittedValues = JSON.parse(JSON.stringify(this.values))
 
     this.fields.forEach((field) => {
       if (field.default_value && !field.readonly) {
-        this.values[field.uuid] = field.default_value
+        this.values[field.uuid] ||= field.default_value
       }
     })
 
@@ -648,6 +715,10 @@ export default {
       this.currentStep = Math.min(...indexesList)
     }
 
+    if (document.body?.clientWidth >= 768 && this.expand !== true && ['signature', 'initials', 'file', 'image'].includes(this.currentField?.type)) {
+      this.isFormVisible = false
+    }
+
     if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
       this.$nextTick(() => {
         const root = this.$root.$el.parentNode.getRootNode()
@@ -675,7 +746,41 @@ export default {
   },
   methods: {
     t (key) {
-      return i18n[this.language?.toLowerCase()]?.[key] || i18n[this.browserLanguage]?.[key] || i18n.en[key] || key
+      return this.i18n[key] || i18n[this.language?.toLowerCase()]?.[key] || i18n[this.browserLanguage]?.[key] || i18n.en[key] || key
+    },
+    checkFieldConditions (field) {
+      if (field.conditions?.length) {
+        return field.conditions.reduce((acc, c) => {
+          if (['empty', 'unchecked'].includes(c.action)) {
+            return acc && isEmpty(this.values[c.field_uuid])
+          } else if (['not_empty', 'checked'].includes(c.action)) {
+            return acc && !isEmpty(this.values[c.field_uuid])
+          } else if (['equal', 'contains'].includes(c.action)) {
+            const field = this.fieldsUuidIndex[c.field_uuid]
+            const option = field.options.find((o) => o.uuid === c.value)
+            const values = [this.values[c.field_uuid]].flat()
+
+            return acc && values.includes(this.optionValue(option, field.options.indexOf(option)))
+          } else if (['not_equal', 'does_not_contain'].includes(c.action)) {
+            const field = this.fieldsUuidIndex[c.field_uuid]
+            const option = field.options.find((o) => o.uuid === c.value)
+            const values = [this.values[c.field_uuid]].flat()
+
+            return acc && !values.includes(this.optionValue(option, field.options.indexOf(option)))
+          } else {
+            return acc
+          }
+        }, true)
+      } else {
+        return true
+      }
+    },
+    optionValue (option, index) {
+      if (option.value) {
+        return option.value
+      } else {
+        return `${this.t('option')} ${index + 1}`
+      }
     },
     maybeTrackEmailClick () {
       const { queryParams } = this
@@ -736,6 +841,13 @@ export default {
         })
       })
     },
+    previousSignatureValueFor (field) {
+      const signatureField = [...this.fields].reverse().find((f) =>
+        f.type === 'signature' && field.preferences?.format === f.preferences?.format && !!this.values[f.uuid]
+      )
+
+      return this.values[signatureField?.uuid]
+    },
     goToStep (step, scrollToArea = false, clickUpload = false) {
       this.currentStep = this.stepFields.indexOf(step)
       this.showFillAllRequiredFields = false
@@ -747,7 +859,7 @@ export default {
           this.scrollIntoField(step[0])
         }
 
-        this.$refs.form.querySelector('input[type="date"], input[type="text"], select')?.focus()
+        this.$refs.form.querySelector('input[type="date"], input[type="number"], input[type="text"], select')?.focus()
 
         if (clickUpload && !this.values[this.currentField.uuid] && ['file', 'image'].includes(this.currentField.type)) {
           this.$refs.form.querySelector('input[type="file"]')?.click()
@@ -755,7 +867,7 @@ export default {
       })
     },
     saveStep (formData) {
-      const currentFieldUuid = this.currentField.uuid
+      const currentFieldUuids = this.currentStepFields.map((f) => f.uuid)
 
       if (this.isCompleted) {
         return Promise.resolve({})
@@ -765,7 +877,9 @@ export default {
           body: formData || new FormData(this.$refs.form)
         }).then((response) => {
           if (response.status === 200) {
-            this.submittedValues[currentFieldUuid] = this.values[currentFieldUuid]
+            currentFieldUuids.forEach((fieldUuid) => {
+              this.submittedValues[fieldUuid] = this.values[fieldUuid]
+            })
           }
 
           return response
@@ -787,7 +901,13 @@ export default {
 
       stepPromise().then(async () => {
         const emptyRequiredField = this.stepFields.find((fields, index) => {
-          return index < this.currentStep && fields[0].required && (fields[0].type === 'phone' || !this.allowToSkip) && (this.submittedValues[fields[0].uuid] === true ? false : !this.submittedValues[fields[0].uuid]?.length)
+          if (index >= this.currentStep) {
+            return false
+          }
+
+          return fields.some((f) => {
+            return f.required && (f.type === 'phone' || !this.allowToSkip) && isEmpty(this.submittedValues[f.uuid])
+          })
         })
 
         const formData = new FormData(this.$refs.form)

app/javascript/submission_form/formula_areas.vue

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

app/javascript/submission_form/i18n.js

@@ -3,6 +3,7 @@ const en = {
   signature: 'Signature',
   initials: 'Initials',
   date: 'Date',
+  number: 'Number',
   image: 'Image',
   take_photo: 'Take photo',
   file: 'File',
@@ -12,9 +13,11 @@ const en = {
   radio: 'Radio',
   cells: 'Cells',
   stamp: 'Stamp',
+  minimize: 'Minimize',
   payment: 'Payment',
   phone: 'Phone',
   submit_form: 'Submit Form',
+  sign_now: 'Sign Now',
   type_here_: 'Type here...',
   optional: 'optional',
   option: 'Option',
@@ -62,10 +65,12 @@ const en = {
 }
 
 const es = {
+  minimize: 'Minimizar',
   text: 'Texto',
   signature: 'Firma',
   initials: 'Iniciales',
   date: 'Fecha',
+  number: 'Número',
   image: 'Imagen',
   file: 'Archivo',
   select: 'Seleccionar',
@@ -78,6 +83,7 @@ const es = {
   phone: 'Teléfono',
   take_photo: 'Tomar foto',
   submit_form: 'Enviar Formulario',
+  sign_now: 'Firmar ahora',
   type_here_: 'Escribe aquí...',
   optional: 'opcional',
   appears_on: 'Aparece en',
@@ -124,10 +130,12 @@ const es = {
 }
 
 const it = {
+  minimize: 'Minimizza',
   text: 'Testo',
   signature: 'Firma',
   initials: 'Iniziali',
   date: 'Data',
+  number: 'Numero',
   image: 'Immagine',
   file: 'File',
   select: 'Seleziona',
@@ -139,6 +147,7 @@ const it = {
   payment: 'Pagamento',
   phone: 'Telefono',
   submit_form: 'Invia Modulo',
+  sign_now: 'Firma ora',
   type_here_: 'Digita qui...',
   optional: 'opzionale',
   appears_on: 'Compare su',
@@ -186,10 +195,12 @@ const it = {
 }
 
 const de = {
+  minimize: 'Minimieren',
   text: 'Text',
   signature: 'Unterschrift',
   initials: 'Initialen',
   date: 'Datum',
+  number: 'Nummer',
   image: 'Bild',
   file: 'Datei',
   select: 'Auswählen',
@@ -201,6 +212,7 @@ const de = {
   payment: 'Zahlung',
   phone: 'Telefon',
   submit_form: 'Formular absenden',
+  sign_now: 'Jetzt unterschreiben',
   type_here_: 'Hier eingeben...',
   optional: 'optional',
   appears_on: 'Erscheint auf',
@@ -248,10 +260,12 @@ const de = {
 }
 
 const fr = {
+  minimize: 'Réduire',
   text: 'Texte',
   signature: 'Signature',
   initials: 'Initiales',
   date: 'Date',
+  number: 'Numéro',
   image: 'Image',
   file: 'Fichier',
   select: 'Choisir',
@@ -263,6 +277,7 @@ const fr = {
   payment: 'Paiement',
   phone: 'Téléphone',
   submit_form: 'Envoyer le Formulaire',
+  sign_now: 'Signer maintenant',
   type_here_: 'Tapez ici...',
   optional: 'facultatif',
   appears_on: 'Apparaît sur',
@@ -310,10 +325,12 @@ const fr = {
 }
 
 const pl = {
+  minimize: 'Zminimalizuj',
   text: 'Tekst',
   signature: 'Podpis',
   initials: 'Inicjały',
   date: 'Data',
+  number: 'Numer',
   image: 'Obraz',
   file: 'Plik',
   select: 'Wybierz',
@@ -325,6 +342,7 @@ const pl = {
   payment: 'Płatność',
   phone: 'Telefon',
   submit_form: 'Wyślij Formularz',
+  sign_now: 'Podpisz teraz',
   type_here_: 'Wpisz tutaj...',
   optional: 'opcjonalny',
   appears_on: 'Pojawia się na',
@@ -372,10 +390,12 @@ const pl = {
 }
 
 const uk = {
+  minimize: 'Зменшити',
   text: 'Текст',
   signature: 'Підпис',
   initials: 'Ініціали',
   date: 'Дата',
+  number: 'Число',
   image: 'Зображення',
   file: 'Файл',
   select: 'Вибрати',
@@ -387,6 +407,7 @@ const uk = {
   payment: 'Платіж',
   phone: 'Телефон',
   submit_form: 'Надіслати Форму',
+  sign_now: 'Підписати зараз',
   type_here_: 'Введіть тут',
   optional: 'необов’язково',
   appears_on: "З'являється на",
@@ -434,10 +455,12 @@ const uk = {
 }
 
 const cs = {
+  minimize: 'Minimalizovat',
   text: 'Text',
   signature: 'Podpis',
   initials: 'Iniciály',
   date: 'Datum',
+  number: 'Číslo',
   image: 'Obrázek',
   file: 'Soubor',
   select: 'Vybrat',
@@ -449,6 +472,7 @@ const cs = {
   payment: 'Platba',
   phone: 'Telefon',
   submit_form: 'Odeslat formulář',
+  sign_now: 'Podepsat nyní',
   type_here_: 'Zadejte zde',
   optional: 'volitelné',
   appears_on: 'Zobrazuje se na',
@@ -496,10 +520,12 @@ const cs = {
 }
 
 const pt = {
+  minimize: 'Minimizar',
   text: 'Texto',
   signature: 'Assinatura',
   initials: 'Iniciais',
   date: 'Data',
+  number: 'Número',
   image: 'Imagem',
   file: 'Arquivo',
   select: 'Selecionar',
@@ -511,6 +537,7 @@ const pt = {
   payment: 'Pagamento',
   phone: 'Telefone',
   submit_form: 'Enviar Formulário',
+  sign_now: 'Assinar agora',
   type_here_: 'Digite aqui',
   optional: 'opcional',
   appears_on: 'Aparece em',
@@ -558,10 +585,12 @@ const pt = {
 }
 
 const he = {
+  minimize: 'לקטן',
   text: 'טקסט',
   signature: 'חתימה',
-  initials: 'ראשי תיקיות',
+  initials: 'ראשי תיבות',
   date: 'תאריך',
+  number: 'מספר',
   image: 'תמונה',
   file: 'קובץ',
   select: 'בחר',
@@ -573,6 +602,7 @@ const he = {
   payment: 'תשלום',
   phone: 'טלפון',
   submit_form: 'שלח טופס',
+  sign_now: 'חתום כעת',
   type_here_: 'הקלד כאן',
   optional: 'אופציונלי',
   option: 'אפשרות',
@@ -621,10 +651,12 @@ const he = {
 }
 
 const nl = {
+  minimize: 'Minimaliseren',
   text: 'Tekst',
   signature: 'Handtekening',
   initials: 'Initialen',
   date: 'Datum',
+  number: 'Nummer',
   image: 'Afbeelding',
   take_photo: 'Maak een foto',
   file: 'Bestand',
@@ -637,6 +669,7 @@ const nl = {
   payment: 'Betaling',
   phone: 'Telefoon',
   submit_form: 'Formulier verzenden',
+  sign_now: 'Nu ondertekenen',
   type_here_: 'Typ hier...',
   optional: 'Optioneel',
   option: 'Optie',
@@ -644,7 +677,7 @@ const nl = {
   page: 'Pagina',
   select_your_option: 'Selecteer uw optie',
   complete_hightlighted_checkboxes_and_click: 'Voltooi de gemarkeerde selectievakjes en klik',
-  submit: 'Verzenden',
+  submit: 'Voltooien',
   next: 'Volgende',
   click_to_upload: 'Klik om te uploaden',
   or_drag_and_drop_files: 'of sleep en plaats bestanden',
@@ -664,11 +697,11 @@ const nl = {
   use_international_format: 'Gebruik internationaal formaat: +1xxx',
   six_digits_code: '6-cijferige code',
   change_phone_number: 'Wijzig telefoonnummer',
-  sending: 'Verzenden...',
+  sending: 'Voltooien...',
   resend_code: 'Code opnieuw verzenden',
   verification_code_has_been_resent: 'Verificatiecode is opnieuw verzonden via SMS',
   please_fill_all_required_fields: 'Vul alle verplichte velden in',
-  set_today: 'Stel vandaag in',
+  set_today: 'Vandaag',
   toggle_multiline_text: 'Schakel meerregelige tekst in/uit',
   draw_signature: 'Handtekening tekenen',
   type_initial: 'Typ initialen',
@@ -683,6 +716,72 @@ const nl = {
   files: 'Bestanden'
 }
 
-const i18n = { en, es, it, de, fr, pl, uk, cs, pt, he, nl }
+const ar = {
+  text: 'نص',
+  signature: 'توقيع',
+  initials: 'الاختصارات',
+  date: 'تاريخ',
+  number: 'رقم',
+  image: 'صورة',
+  take_photo: 'التقاط صورة',
+  file: 'ملف',
+  select: 'اختيار',
+  checkbox: 'خانة اختيار',
+  multiple: 'متعدد',
+  radio: 'راديو',
+  cells: 'خلايا',
+  stamp: 'ختم',
+  minimize: 'تصغير',
+  payment: 'الدفع',
+  phone: 'هاتف',
+  submit_form: 'إرسال النموذج',
+  sign_now: 'وقع الآن',
+  type_here_: 'اكتب هنا',
+  optional: 'اختياري',
+  option: 'خيار',
+  appears_on: 'يظهر على',
+  page: 'صفحة',
+  select_your_option: 'اختر خيارك',
+  complete_hightlighted_checkboxes_and_click: 'أكمل الخانات المميزة وانقر',
+  submit: 'إرسال',
+  next: 'التالي',
+  click_to_upload: 'انقر للتحميل',
+  or_drag_and_drop_files: 'أو اسحب وأسقط الملفات',
+  send_copy_via_email: 'إرسال نسخة عبر البريد الإلكتروني',
+  download: 'تحميل',
+  clear: 'مسح',
+  redraw: 'إعادة الرسم',
+  draw_initials: 'ارسم الاختصارات',
+  type_signature_here: 'اكتب التوقيع هنا',
+  type_initial_here: 'اكتب الاختصارات هنا',
+  form_has_been_completed: 'تم إكمال النموذج!',
+  create_a_free_account: 'إنشاء حساب مجاني',
+  signed_with: 'تم التوقيع بواسطة',
+  please_check_the_box_to_continue: 'الرجاء التحقق من الخانة للمتابعة',
+  open_source_documents_software: 'برنامج وثائق مفتوح المصدر',
+  verified_phone_number: 'تحقق من رقم الهاتف',
+  use_international_format: 'استخدم الشكل الدولي: +1xxx',
+  six_digits_code: 'رمز مكون من 6 أرقام',
+  change_phone_number: 'تغيير رقم الهاتف',
+  sending: 'جارٍ الإرسال',
+  resend_code: 'إعادة إرسال الرمز',
+  verification_code_has_been_resent: 'تم إعادة إرسال رمز التحقق عبر الرسائل القصيرة',
+  please_fill_all_required_fields: 'الرجاء ملء جميع الحقول المطلوبة',
+  set_today: 'تعيين اليوم',
+  toggle_multiline_text: 'تبديل النصوص متعددة الأسطر',
+  draw_signature: 'ارسم التوقيع',
+  type_initial: 'اكتب الاختصارات',
+  draw: 'ارسم',
+  type: 'اكتب',
+  type_text: 'اكتب نصًا',
+  email_has_been_sent: 'تم إرسال البريد الإلكتروني',
+  processing: 'جارٍ المعالجة',
+  pay_with_strip: 'الدفع بواسطة Stripe',
+  reupload: 'إعادة التحميل',
+  upload: 'تحميل',
+  files: 'الملفات'
+}
+
+const i18n = { en, es, it, de, fr, pl, uk, cs, pt, he, nl, ar }
 
 export default i18n

app/javascript/submission_form/initials_step.vue

@@ -8,7 +8,7 @@
         <span
           v-if="isDrawInitials"
           class="tooltip"
-          :data-tip="t('type_initials')"
+          :data-tip="t('type_initial')"
         >
           <a
             id="type_text_button"
@@ -58,7 +58,7 @@
           {{ t('clear') }}
         </a>
         <a
-          title="Minimize"
+          :title="t('minimize')"
           href="#"
           class="py-1.5 inline md:hidden"
           @click.prevent="$emit('minimize')"
@@ -84,7 +84,7 @@
     <canvas
       v-show="!modelValue && !computedPreviousValue"
       ref="canvas"
-      class="bg-white border border-base-300 rounded-2xl"
+      class="bg-white border border-base-300 rounded-2xl w-full"
     />
     <input
       v-if="!isDrawInitials && !modelValue && !computedPreviousValue"
@@ -106,6 +106,8 @@ import { IconReload, IconTextSize, IconSignature, IconArrowsDiagonalMinimize2 }
 import SignaturePad from 'signature_pad'
 import AppearsOn from './appears_on'
 
+const scale = 3
+
 export default {
   name: 'InitialsStep',
   components: {
@@ -171,8 +173,10 @@ export default {
   async mounted () {
     this.$nextTick(() => {
       if (this.$refs.canvas) {
-        this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth
+        this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth * scale
-        this.$refs.canvas.height = this.$refs.canvas.parentNode.clientWidth / 5
+        this.$refs.canvas.height = (this.$refs.canvas.parentNode.clientWidth / 3) * scale
+
+        this.$refs.canvas.getContext('2d').scale(scale, scale)
       }
 
       this.$refs.textInput?.focus()
@@ -190,8 +194,26 @@ export default {
 
         this.$emit('start')
       })
+
+      this.intersectionObserver = new IntersectionObserver((entries, observer) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth * scale
+            this.$refs.canvas.height = (this.$refs.canvas.parentNode.clientWidth / 3) * scale
+
+            this.$refs.canvas.getContext('2d').scale(scale, scale)
+
+            this.intersectionObserver?.disconnect()
+          }
+        })
+      })
+
+      this.intersectionObserver.observe(this.$refs.canvas)
     }
   },
+  beforeUnmount () {
+    this.intersectionObserver?.disconnect()
+  },
   methods: {
     remove () {
       this.$emit('update:model-value', '')
@@ -209,7 +231,7 @@ export default {
       }
     },
     updateWrittenInitials (e) {
-      this.isInitialsStarted = true
+      this.isInitialsStarted = !!e.target.value
 
       const canvas = this.$refs.canvas
       const context = canvas.getContext('2d')
@@ -222,8 +244,8 @@ export default {
       context.font = fontStyle + ' ' + fontWeight + ' ' + fontSize + ' ' + fontFamily
       context.textAlign = 'center'
 
-      context.clearRect(0, 0, canvas.width, canvas.height)
+      context.clearRect(0, 0, canvas.width / scale, canvas.height / scale)
-      context.fillText(e.target.value, canvas.width / 2, canvas.height / 2 + 11)
+      context.fillText(e.target.value, canvas.width / 2 / scale, canvas.height / 2 / scale + 11)
     },
     toggleTextInput () {
       this.remove()

app/javascript/submission_form/number_step.vue

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

app/javascript/submission_form/signature_step.vue

@@ -6,7 +6,7 @@
       >{{ showFieldNames && field.name ? field.name : t('signature') }}</label>
       <div class="space-x-2 flex">
         <span
-          v-if="isTextSignature"
+          v-if="isTextSignature && field.preferences?.format !== 'typed'"
           class="tooltip"
           :data-tip="t('draw_signature')"
         >
@@ -23,7 +23,7 @@
           </a>
         </span>
         <span
-          v-else-if="withTypedSignature"
+          v-else-if="withTypedSignature && field.preferences?.format !== 'typed' && field.preferences?.format !== 'drawn'"
           class="tooltip ml-2"
           :data-tip="t('type_text')"
         >
@@ -40,6 +40,7 @@
           </a>
         </span>
         <span
+          v-if="field.preferences?.format !== 'typed'"
           class="tooltip"
           :data-tip="t('take_photo')"
         >
@@ -48,6 +49,7 @@
           >
             <IconCamera :width="16" />
             <input
+              :key="uploadImageInputKey"
               type="file"
               hidden
               accept="image/*"
@@ -78,7 +80,7 @@
         </a>
         <a
           href="#"
-          title="Minimize"
+          :title="t('minimize')"
           class="py-1.5 inline md:hidden"
           @click.prevent="$emit('minimize')"
         >
@@ -104,14 +106,14 @@
       v-show="!modelValue && !computedPreviousValue"
       ref="canvas"
       style="padding: 1px; 0"
-      class="bg-white border border-base-300 rounded-2xl"
+      class="bg-white border border-base-300 rounded-2xl w-full"
     />
     <input
       v-if="isTextSignature"
       id="signature_text_input"
       ref="textInput"
       class="base-input !text-2xl w-full mt-6"
-      :required="field.required"
+      :required="field.required && !isSignatureStarted"
       :placeholder="`${t('type_signature_here')}...`"
       type="text"
       @input="updateWrittenSignature"
@@ -127,6 +129,8 @@ import AppearsOn from './appears_on'
 
 let isFontLoaded = false
 
+const scale = 3
+
 export default {
   name: 'SignatureStep',
   components: {
@@ -183,7 +187,8 @@ export default {
     return {
       isSignatureStarted: !!this.previousValue,
       isUsePreviousValue: true,
-      isTextSignature: false
+      isTextSignature: this.field.preferences?.format === 'typed',
+      uploadImageInputKey: Math.random().toString()
     }
   },
   computed: {
@@ -198,8 +203,10 @@ export default {
   async mounted () {
     this.$nextTick(() => {
       if (this.$refs.canvas) {
-        this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth
+        this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth * scale
-        this.$refs.canvas.height = this.$refs.canvas.parentNode.clientWidth / 3
+        this.$refs.canvas.height = this.$refs.canvas.parentNode.clientWidth * scale / 3
+
+        this.$refs.canvas.getContext('2d').scale(scale, scale)
       }
     })
 
@@ -215,8 +222,26 @@ export default {
 
         this.$emit('start')
       })
+
+      this.intersectionObserver = new IntersectionObserver((entries, observer) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth * scale
+            this.$refs.canvas.height = this.$refs.canvas.parentNode.clientWidth * scale / 3
+
+            this.$refs.canvas.getContext('2d').scale(scale, scale)
+
+            this.intersectionObserver?.disconnect()
+          }
+        })
+      })
+
+      this.intersectionObserver.observe(this.$refs.canvas)
     }
   },
+  beforeUnmount () {
+    this.intersectionObserver?.disconnect()
+  },
   methods: {
     remove () {
       this.$emit('update:model-value', '')
@@ -247,7 +272,7 @@ export default {
       }
     },
     updateWrittenSignature (e) {
-      this.isSignatureStarted = true
+      this.isSignatureStarted = !!e.target.value
 
       const canvas = this.$refs.canvas
       const context = canvas.getContext('2d')
@@ -260,8 +285,8 @@ export default {
       context.font = fontStyle + ' ' + fontWeight + ' ' + fontSize + ' ' + fontFamily
       context.textAlign = 'center'
 
-      context.clearRect(0, 0, canvas.width, canvas.height)
+      context.clearRect(0, 0, canvas.width / scale, canvas.height / scale)
-      context.fillText(e.target.value, canvas.width / 2, canvas.height / 2 + 11)
+      context.fillText(e.target.value, canvas.width / 2 / scale, canvas.height / 2 / scale + 11)
     },
     toggleTextInput () {
       this.remove()
@@ -297,14 +322,16 @@ export default {
             const context = canvas.getContext('2d')
 
             const aspectRatio = img.width / img.height
+            const canvasWidth = canvas.width / scale
+            const canvasHeight = canvas.height / scale
 
-            let targetWidth = canvas.width
+            let targetWidth = canvasWidth
-            let targetHeight = canvas.height
+            let targetHeight = canvasHeight
 
-            if (canvas.width / canvas.height > aspectRatio) {
+            if (canvasWidth / canvasHeight > aspectRatio) {
-              targetWidth = canvas.height * aspectRatio
+              targetWidth = canvasHeight * aspectRatio
             } else {
-              targetHeight = canvas.width / aspectRatio
+              targetHeight = canvasWidth / aspectRatio
             }
 
             if (targetHeight > targetWidth) {
@@ -313,17 +340,21 @@ export default {
               targetHeight = targetHeight * scale
             }
 
-            const x = (canvas.width - targetWidth) / 2
+            const x = (canvasWidth - targetWidth) / 2
-            const y = (canvas.height - targetHeight) / 2
+            const y = (canvasHeight - targetHeight) / 2
 
-            context.clearRect(0, 0, canvas.width, canvas.height)
+            setTimeout(() => {
-            context.drawImage(img, x, y, targetWidth, targetHeight)
+              context.clearRect(0, 0, canvasWidth, canvasHeight)
+              context.drawImage(img, x, y, targetWidth, targetHeight)
 
-            this.$emit('start')
+              this.$emit('start')
+            }, 50)
           }
         }
 
         reader.readAsDataURL(file)
+
+        this.uploadImageInputKey = Math.random().toString()
       }
     },
     async submit () {

app/javascript/submission_form/text_step.vue

@@ -123,12 +123,14 @@ export default {
     }
   },
   mounted () {
-    this.isTextArea = this.modelValue?.includes('\n')
+    if (this.modelValue) {
+      this.isTextArea = this.modelValue.toString().includes('\n')
 
-    if (this.isTextArea) {
+      if (this.isTextArea) {
-      this.$nextTick(() => {
+        this.$nextTick(() => {
-        this.resizeTextarea()
+          this.resizeTextarea()
-      })
+        })
+      }
     }
   },
   methods: {

app/javascript/template_builder/area.vue

@@ -90,7 +90,7 @@
       <button
         v-else-if="editable"
         class="pr-1"
-        title="Remove"
+        :title="t('remove')"
         @click.prevent="$emit('remove')"
       >
         <IconX width="14" />
@@ -98,21 +98,32 @@
     </div>
     <div
       class="flex items-center h-full w-full"
+      dir="auto"
       :class="[bgColors[submitterIndex], field?.default_value ? '' : 'justify-center']"
     >
       <span
         v-if="field"
         class="flex justify-center items-center space-x-1 h-full"
+        :class="{'w-full h-full': field.type == 'checkbox'}"
       >
         <div
           v-if="field?.default_value"
-          :class="{ 'text-[1.5vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars }"
+          :class="{ 'w-full h-full': field.type == 'checkbox', 'text-[1.5vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars }"
         >
           <div
             ref="textContainer"
             class="flex items-center px-0.5"
+            :class="{'w-full h-full': field.type == 'checkbox'}"
           >
-            <span class="whitespace-pre-wrap">{{ field.default_value }}</span>
+            <IconCheck
+              v-if="field.type == 'checkbox'"
+              class="aspect-square mx-auto"
+              :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
+            />
+            <span
+              v-else
+              class="whitespace-pre-wrap"
+            >{{ field.default_value }}</span>
           </div>
         </div>
         <component
@@ -141,13 +152,14 @@
 import FieldSubmitter from './field_submitter'
 import FieldType from './field_type'
 import Field from './field'
-import { IconX } from '@tabler/icons-vue'
+import { IconX, IconCheck } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 
 export default {
   name: 'FieldArea',
   components: {
     FieldType,
+    IconCheck,
     FieldSubmitter,
     IconX
   },
@@ -194,9 +206,11 @@ export default {
     }
   },
   computed: {
-    defaultName: Field.computed.defaultName,
     fieldNames: FieldType.computed.fieldNames,
     fieldIcons: FieldType.computed.fieldIcons,
+    defaultName () {
+      return this.buildDefaultName(this.field, this.template.fields)
+    },
     optionIndexText () {
       if (this.area.option_uuid && this.field.options) {
         return `${this.field.options.findIndex((o) => o.uuid === this.area.option_uuid) + 1}.`
@@ -225,6 +239,16 @@ export default {
     },
     borderColors () {
       return [
+        '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',
         'border-red-500/80',
         'border-sky-500/80',
         'border-emerald-500/80',
@@ -239,6 +263,16 @@ export default {
     },
     bgColors () {
       return [
+        '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',
         'bg-red-100/80',
         'bg-sky-100/80',
         'bg-emerald-100/80',
@@ -280,6 +314,7 @@ export default {
     }
   },
   methods: {
+    buildDefaultName: Field.methods.buildDefaultName,
     onNameFocus (e) {
       this.selectedAreaRef.value = this.area
 

app/javascript/template_builder/builder.vue

@@ -5,6 +5,7 @@
   >
     <div
       v-if="$slots.buttons || withTitle"
+      id="title_container"
       class="flex justify-between py-1.5 items-center pr-4 top-0 z-10"
       :class="{ sticky: withStickySubmitters || isBreakpointLg }"
       :style="{ backgroundColor }"
@@ -61,6 +62,7 @@
             </span>
           </a>
           <button
+            v-if="editable"
             class="base-button"
             :class="{ disabled: isSaving }"
             v-bind="isSaving ? { disabled: true } : {}"
@@ -79,6 +81,15 @@
               {{ t('save') }}
             </span>
           </button>
+          <a
+            v-else
+            :href="`/templates/${template.id}`"
+            class="base-button"
+          >
+            <span class="hidden md:inline">
+              {{ t('back') }}
+            </span>
+          </a>
         </template>
       </div>
     </div>
@@ -262,6 +273,7 @@
         @select="startFieldDraw($event)"
       />
     </div>
+    <div id="docuseal_modal_container" />
   </div>
 </template>
 
@@ -310,7 +322,11 @@ export default {
       backgroundColor: this.backgroundColor,
       withPhone: this.withPhone,
       withPayment: this.withPayment,
-      selectedAreaRef: computed(() => this.selectedAreaRef)
+      withFormula: this.withFormula,
+      withConditions: this.withConditions,
+      defaultDrawFieldType: this.defaultDrawFieldType,
+      selectedAreaRef: computed(() => this.selectedAreaRef),
+      fieldsDragFieldRef: computed(() => this.fieldsDragFieldRef)
     }
   },
   props: {
@@ -353,6 +369,11 @@ export default {
       required: false,
       default: () => []
     },
+    defaultDrawFieldType: {
+      type: String,
+      required: false,
+      default: 'text'
+    },
     currencies: {
       type: Array,
       required: false,
@@ -432,6 +453,16 @@ export default {
       required: false,
       default: false
     },
+    withFormula: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    withConditions: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     onlyDefinedFields: {
       type: Boolean,
       required: false,
@@ -456,6 +487,7 @@ export default {
   },
   computed: {
     selectedAreaRef: () => ref(),
+    fieldsDragFieldRef: () => ref(),
     fieldAreasIndex () {
       const areas = {}
 
@@ -744,7 +776,9 @@ export default {
 
         let type = (pageMask.clientWidth * area.w) < 35 ? 'checkbox' : 'text'
 
-        if (this.fieldTypes.length !== 0 && !this.fieldTypes.includes(type)) {
+        if (this.defaultDrawFieldType && this.defaultDrawFieldType !== 'text') {
+          type = this.defaultDrawFieldType
+        } else if (this.fieldTypes.length !== 0 && !this.fieldTypes.includes(type)) {
           type = this.fieldTypes[0]
         }
 
@@ -785,7 +819,7 @@ export default {
       }
     },
     onDropfield (area) {
-      const field = {
+      const field = this.fieldsDragFieldRef.value || {
         name: '',
         uuid: v4(),
         submitter_uuid: this.selectedSubmitter.uuid,
@@ -793,17 +827,19 @@ export default {
         ...this.dragField
       }
 
-      if (['select', 'multiple', 'radio'].includes(field.type)) {
+      if (!this.fieldsDragFieldRef.value) {
-        field.options = [{ value: '', uuid: v4() }]
+        if (['select', 'multiple', 'radio'].includes(field.type)) {
-      }
+          field.options = [{ value: '', uuid: v4() }]
+        }
 
-      if (field.type === 'stamp') {
+        if (field.type === 'stamp') {
-        field.readonly = true
+          field.readonly = true
-      }
+        }
 
-      if (field.type === 'date') {
+        if (field.type === 'date') {
-        field.preferences = {
+          field.preferences = {
-          format: Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') ? 'MM/DD/YYYY' : 'DD/MM/YYYY'
+            format: Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') ? 'MM/DD/YYYY' : 'DD/MM/YYYY'
+          }
         }
       }
 
@@ -859,11 +895,23 @@ export default {
         fieldArea.cell_w = baseArea.cell_w || (baseArea.w / 5)
       }
 
-      field.areas = [fieldArea]
+      field.areas ||= []
+
+      const lastArea = field.areas[field.areas.length - 1]
+
+      if (lastArea) {
+        fieldArea.x -= lastArea.w / 2
+        fieldArea.w = lastArea.w
+        fieldArea.h = lastArea.h
+      }
+
+      field.areas.push(fieldArea)
 
       this.selectedAreaRef.value = fieldArea
 
-      this.template.fields.push(field)
+      if (this.template.fields.indexOf(field) === -1) {
+        this.template.fields.push(field)
+      }
 
       this.save()
     },

app/javascript/template_builder/conditions_modal.vue

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

app/javascript/template_builder/contenteditable.vue

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

app/javascript/template_builder/document.vue

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

app/javascript/template_builder/field.vue

@@ -56,7 +56,7 @@
         >
           <button
             v-if="field && !field.areas.length"
-            title="Draw"
+            :title="t('draw')"
             class="relative cursor-pointer text-transparent group-hover:text-base-content"
             @click="$emit('set-draw', { field })"
           >
@@ -65,6 +65,28 @@
               :stroke-width="1.6"
             />
           </button>
+          <button
+            v-if="field.preferences?.formula"
+            class="relative cursor-pointer text-transparent group-hover:text-base-content"
+            :title="t('formula')"
+            @click="isShowFormulaModal = true"
+          >
+            <IconMathFunction
+              :width="18"
+              :stroke-width="1.6"
+            />
+          </button>
+          <button
+            v-if="field.conditions?.length"
+            class="relative cursor-pointer text-transparent group-hover:text-base-content"
+            :title="t('condition')"
+            @click="isShowConditionsModal = true"
+          >
+            <IconRouteAltLeft
+              :width="18"
+              :stroke-width="1.6"
+            />
+          </button>
           <PaymentSettings
             v-if="field.type === 'payment'"
             :field="field"
@@ -77,7 +99,7 @@
           >
             <label
               tabindex="0"
-              title="Settings"
+              :title="t('settings')"
               class="cursor-pointer text-transparent group-hover:text-base-content"
             >
               <IconSettings
@@ -142,6 +164,43 @@
                   {{ t('format') }}
                 </label>
               </div>
+              <div
+                v-if="field.type === 'signature'"
+                class="py-1.5 px-1 relative"
+                @click.stop
+              >
+                <select
+                  :placeholder="t('format')"
+                  class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0"
+                  @change="[field.preferences.format = $event.target.value, save()]"
+                >
+                  <option
+                    value="any"
+                    :selected="!field.preferences?.format || field.preferences.format === 'any'"
+                  >
+                    {{ t('any') }}
+                  </option>
+                  <option
+                    value="drawn"
+                    :selected="field.preferences?.format === 'drawn'"
+                  >
+                    {{ t('drawn') }}
+                  </option>
+                  <option
+                    value="typed"
+                    :selected="field.preferences?.format === 'typed'"
+                  >
+                    {{ t('typed') }}
+                  </option>
+                </select>
+                <label
+                  :style="{ backgroundColor: backgroundColor }"
+                  class="absolute -top-1 left-2.5 px-1 h-4"
+                  style="font-size: 8px"
+                >
+                  {{ t('format') }}
+                </label>
+              </div>
               <li
                 v-if="field.type != 'phone'"
                 @click.stop
@@ -156,6 +215,34 @@
                   <span class="label-text">{{ t('required') }}</span>
                 </label>
               </li>
+              <li
+                v-if="field.type == 'checkbox'"
+                @click.stop
+              >
+                <label class="cursor-pointer py-1.5">
+                  <input
+                    v-model="field.default_value"
+                    type="checkbox"
+                    class="toggle toggle-xs"
+                    @update:model-value="[field.default_value = $event, field.readonly = $event, save()]"
+                  >
+                  <span class="label-text">{{ t('checked') }}</span>
+                </label>
+              </li>
+              <li
+                v-if="field.type == 'date'"
+                @click.stop
+              >
+                <label class="cursor-pointer py-1.5">
+                  <input
+                    v-model="field.readonly"
+                    type="checkbox"
+                    class="toggle toggle-xs"
+                    @update:model-value="[field.default_value = $event ? '{{date}}' : null, field.readonly = $event, save()]"
+                  >
+                  <span class="label-text">{{ t('set_signing_date') }}</span>
+                </label>
+              </li>
               <li
                 v-if="field.type === 'text' && !defaultField"
                 @click.stop
@@ -171,6 +258,33 @@
                 </label>
               </li>
               <hr class="pb-0.5 mt-0.5">
+              <li>
+                <label
+                  class="label-text cursor-pointer text-center w-full flex items-center"
+                  @click="isShowConditionsModal = !isShowConditionsModal"
+                >
+                  <IconRouteAltLeft
+                    width="18"
+                  />
+                  <span class="text-sm">
+                    {{ t('condition') }}
+                  </span>
+                </label>
+              </li>
+              <li v-if="field.type == 'number'">
+                <label
+                  class="label-text cursor-pointer text-center w-full flex items-center"
+                  @click="isShowFormulaModal = true"
+                >
+                  <IconMathFunction
+                    width="18"
+                  />
+                  <span class="text-sm">
+                    {{ t('formula') }}
+                  </span>
+                </label>
+              </li>
+              <hr class="pb-0.5 mt-0.5">
               <li
                 v-for="(area, index) in field.areas || []"
                 :key="index"
@@ -184,7 +298,8 @@
                     :width="20"
                     :stroke-width="1.6"
                   />
-                  {{ t('page') }} {{ area.page + 1 }}
+                  {{ t('page') }}
+                  <template v-if="template.schema.length > 1">{{ template.schema.findIndex((item) => item.attachment_uuid === area.attachment_uuid) + 1 }}-</template>{{ area.page + 1 }}
                 </a>
               </li>
               <li v-if="!field.areas?.length || !['radio', 'multiple'].includes(field.type)">
@@ -217,7 +332,7 @@
           </span>
           <button
             class="relative text-transparent group-hover:text-base-content pr-1"
-            title="Remove"
+            :title="t('remove')"
             @click="$emit('remove', field)"
           >
             <IconTrashX
@@ -243,7 +358,7 @@
             {{ index + 1 }}.
           </span>
           <div
-            v-if="['radio', 'multiple'].includes(field.type) && (index > 0 || field.areas.find((a) => a.option_uuid) || !field.areas.length) && !field.areas.find((a) => a.option_uuid === option.uuid)"
+            v-if="editable && ['radio', 'multiple'].includes(field.type) && (index > 0 || field.areas.find((a) => a.option_uuid) || !field.areas.length) && !field.areas.find((a) => a.option_uuid === option.uuid)"
             class="items-center flex w-full"
           >
             <input
@@ -256,7 +371,7 @@
               @blur="save"
             >
             <button
-              title="Draw"
+              :title="t('draw')"
               tabindex="-1"
               @click.prevent="$emit('set-draw', { field, option })"
             >
@@ -272,12 +387,14 @@
             class="w-full input input-primary input-xs text-sm bg-transparent"
             :placeholder="`${t('option')} ${index + 1}`"
             type="text"
+            :readonly="!editable"
             required
             dir="auto"
             @focus="maybeFocusOnOptionArea(option)"
             @blur="save"
           >
           <button
+            v-if="editable"
             class="text-sm w-3.5"
             tabindex="-1"
             @click="removeOption(option)"
@@ -285,8 +402,12 @@
             &times;
           </button>
         </div>
+        <div
+          v-if="field.options && !editable"
+          class="pb-1"
+        />
         <button
-          v-if="field.options"
+          v-else-if="field.options && editable"
           class="text-center text-sm w-full pb-1"
           @click="addOption"
         >
@@ -294,6 +415,26 @@
         </button>
       </div>
     </div>
+    <Teleport
+      v-if="isShowFormulaModal"
+      :to="modalContainerEl"
+    >
+      <FormulaModal
+        :field="field"
+        :build-default-name="buildDefaultName"
+        @close="isShowFormulaModal = false"
+      />
+    </Teleport>
+    <Teleport
+      v-if="isShowConditionsModal"
+      :to="modalContainerEl"
+    >
+      <ConditionsModal
+        :field="field"
+        :build-default-name="buildDefaultName"
+        @close="isShowConditionsModal = false"
+      />
+    </Teleport>
   </div>
 </template>
 
@@ -301,7 +442,9 @@
 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 FormulaModal from './formula_modal'
+import ConditionsModal from './conditions_modal'
+import { IconRouteAltLeft, IconMathFunction, IconShape, IconNewSection, IconTrashX, IconCopy, IconSettings } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 
 export default {
@@ -312,7 +455,11 @@ export default {
     IconShape,
     PaymentSettings,
     IconNewSection,
+    FormulaModal,
+    ConditionsModal,
+    IconRouteAltLeft,
     IconTrashX,
+    IconMathFunction,
     IconCopy,
     FieldType
   },
@@ -338,11 +485,16 @@ export default {
     return {
       isNameFocus: false,
       showPaymentModal: false,
+      isShowFormulaModal: false,
+      isShowConditionsModal: false,
       renderDropdown: false
     }
   },
   computed: {
     fieldNames: FieldType.computed.fieldNames,
+    modalContainerEl () {
+      return this.$el.getRootNode().querySelector('#docuseal_modal_container')
+    },
     dateFormats () {
       return [
         'MM/DD/YYYY',
@@ -357,22 +509,7 @@ export default {
       ]
     },
     defaultName () {
-      if (this.field.type === 'payment' && this.field.preferences?.price) {
+      return this.buildDefaultName(this.field, this.template.fields)
-        const { price, currency } = this.field.preferences || {}
-
-        const formattedPrice = new Intl.NumberFormat([], {
-          style: 'currency',
-          currency
-        }).format(price)
-
-        return `${this.fieldNames[this.field.type]} ${formattedPrice}`
-      } else {
-        const typeIndex = this.template.fields.filter((f) => f.type === this.field.type).indexOf(this.field)
-
-        const suffix = { multiple: this.t('select'), radio: this.t('group') }[this.field.type] || this.t('field')
-
-        return `${this.fieldNames[this.field.type]} ${suffix} ${typeIndex + 1}`
-      }
     },
     areas () {
       return this.field.areas || []
@@ -387,6 +524,24 @@ export default {
     }
   },
   methods: {
+    buildDefaultName (field, fields) {
+      if (field.type === 'payment' && field.preferences?.price) {
+        const { price, currency } = field.preferences || {}
+
+        const formattedPrice = new Intl.NumberFormat([], {
+          style: 'currency',
+          currency
+        }).format(price)
+
+        return `${this.fieldNames[field.type]} ${formattedPrice}`
+      } else {
+        const typeIndex = fields.filter((f) => f.type === field.type).indexOf(field)
+
+        const suffix = { multiple: this.t('select'), radio: this.t('group') }[field.type] || this.t('field')
+
+        return `${this.fieldNames[field.type]} ${suffix} ${typeIndex + 1}`
+      }
+    },
     formatDate (date, format) {
       const monthFormats = {
         M: 'numeric',
@@ -420,11 +575,13 @@ export default {
       const areaString = JSON.stringify(field.areas[0])
 
       this.template.documents.forEach((attachment) => {
-        attachment.preview_images.forEach((page) => {
+        const numberOfPages = attachment.metadata?.pdf?.number_of_pages || attachment.preview_images.length
-          if (!field.areas.find((area) => area.attachment_uuid === attachment.uuid && area.page === parseInt(page.filename))) {
+
-            field.areas.push({ ...JSON.parse(areaString), attachment_uuid: attachment.uuid, page: parseInt(page.filename) })
+        for (let page = 0; page <= numberOfPages - 1; page++) {
+          if (!field.areas.find((area) => area.attachment_uuid === attachment.uuid && area.page === page)) {
+            field.areas.push({ ...JSON.parse(areaString), attachment_uuid: attachment.uuid, page })
           }
-        })
+        }
       })
 
       this.$nextTick(() => {

app/javascript/template_builder/field_submitter.vue

@@ -67,7 +67,7 @@
               </button>
             </a>
           </li>
-          <li v-if="submitters.length < 10 && editable">
+          <li v-if="submitters.length < names.length && editable">
             <a
               href="#"
               class="flex px-2"
@@ -145,7 +145,7 @@
         <a
           href="#"
           class="flex px-2 group justify-between items-center"
-          :class="{ 'active': submitter === selectedSubmitter }"
+          :class="{ 'active': submitter === selectedSubmitter, 'py-0.5': submitters.length > 8 }"
           @click.prevent="selectSubmitter(submitter)"
         >
           <span class="py-1 flex items-center">
@@ -163,7 +163,7 @@
           >
             <div class="flex-col pr-1 hidden group-hover:flex -mt-1 h-0">
               <button
-                title="Up"
+                :title="t('up')"
                 class="relative w-2"
                 style="font-size: 10px; margin-bottom: -4px"
                 @click.prevent.stop="[move(submitter, -1), $refs.label.focus()] "
@@ -171,7 +171,7 @@
                 ▲
               </button>
               <button
-                title="Down"
+                :title="t('down')"
                 class="relative w-2"
                 style="font-size: 10px; margin-top: -4px"
                 @click.prevent.stop="[move(submitter, 1), $refs.label.focus()] "
@@ -189,7 +189,7 @@
           </div>
         </a>
       </li>
-      <li v-if="submitters.length < 10 && editable && allowAddNew">
+      <li v-if="submitters.length < names.length && editable && allowAddNew">
         <a
           href="#"
           class="flex px-2"
@@ -268,6 +268,16 @@ export default {
   computed: {
     colors () {
       return [
+        'bg-red-500',
+        'bg-sky-500',
+        'bg-emerald-500',
+        'bg-yellow-300',
+        'bg-purple-600',
+        'bg-pink-500',
+        'bg-cyan-500',
+        'bg-orange-500',
+        'bg-lime-500',
+        'bg-indigo-500',
         'bg-red-500',
         'bg-sky-500',
         'bg-emerald-500',
@@ -291,7 +301,17 @@ export default {
         this.t('seventh_party'),
         this.t('eighth_party'),
         this.t('ninth_party'),
-        this.t('tenth_party')
+        this.t('tenth_party'),
+        this.t('eleventh_party'),
+        this.t('twelfth_party'),
+        this.t('thirteenth_party'),
+        this.t('fourteenth_party'),
+        this.t('fifteenth_party'),
+        this.t('sixteenth_party'),
+        this.t('seventeenth_party'),
+        this.t('eighteenth_party'),
+        this.t('nineteenth_party'),
+        this.t('twentieth_party')
       ]
     },
     selectedSubmitter () {

app/javascript/template_builder/field_type.vue

@@ -26,7 +26,7 @@
       @click="closeDropdown"
     >
       <template
-        v-for="(icon, type) in fieldIcons"
+        v-for="(icon, type) in fieldIconsSorted"
         :key="type"
       >
         <li v-if="(fieldTypes.length === 0 || fieldTypes.includes(type)) && (withPhone || type != 'phone') && (withPayment || type != 'payment')">
@@ -50,7 +50,7 @@
 </template>
 
 <script>
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1 } from '@tabler/icons-vue'
 
 export default {
   name: 'FiledTypeDropdown',
@@ -94,6 +94,7 @@ export default {
         signature: this.t('signature'),
         initials: this.t('initials'),
         date: this.t('date'),
+        number: this.t('number'),
         image: this.t('image'),
         file: this.t('file'),
         select: this.t('select'),
@@ -112,17 +113,29 @@ export default {
         signature: IconWritingSign,
         initials: IconLetterCaseUpper,
         date: IconCalendarEvent,
+        number: IconSquareNumber1,
         image: IconPhoto,
-        file: IconPaperclip,
         checkbox: IconCheckbox,
+        multiple: IconChecks,
+        file: IconPaperclip,
         radio: IconCircleDot,
         select: IconSelect,
-        multiple: IconChecks,
         cells: IconColumns3,
         stamp: IconRubberStamp,
         payment: IconCreditCard,
         phone: IconPhoneCheck
       }
+    },
+    fieldIconsSorted () {
+      if (this.fieldTypes.length) {
+        return this.fieldTypes.reduce((acc, type) => {
+          acc[type] = this.fieldIcons[type]
+
+          return acc
+        }, {})
+      } else {
+        return this.fieldIcons
+      }
     }
   },
   methods: {

app/javascript/template_builder/fields.vue

@@ -24,11 +24,11 @@
       :data-uuid="field.uuid"
       :field="field"
       :type-index="fields.filter((f) => f.type === field.type).indexOf(field)"
-      :editable="editable && (!dragField || dragField !== field)"
+      :editable="editable && (!fieldsDragFieldRef.value || fieldsDragFieldRef.value !== field)"
       :default-field="defaultFields.find((f) => f.name === field.name)"
       :draggable="editable"
-      @dragstart="dragField = field"
+      @dragstart="fieldsDragFieldRef.value = field"
-      @dragend="dragField = null"
+      @dragend="fieldsDragFieldRef.value = null"
       @remove="removeField"
       @scroll-to="$emit('scroll-to-area', $event)"
       @set-draw="$emit('set-draw', $event)"
@@ -68,7 +68,7 @@
     class="grid grid-cols-3 gap-1 pb-2"
   >
     <template
-      v-for="(icon, type) in fieldIcons"
+      v-for="(icon, type) in fieldIconsSorted"
       :key="type"
     >
       <button
@@ -93,7 +93,7 @@
       <div
         v-else-if="type == 'phone' && (fieldTypes.length === 0 || fieldTypes.includes(type))"
         class="tooltip tooltip-bottom flex"
-        :class="{'tooltip-bottom-start': !withPayment, 'tooltip-bottom': withPayment }"
+        :class="{'tooltip-bottom-end': withPayment, 'tooltip-bottom': !withPayment }"
         data-tip="Unlock SMS-verified phone number field with paid plan. Use text field for phone numbers without verification."
       >
         <a
@@ -154,7 +154,7 @@ export default {
     IconDrag,
     IconLock
   },
-  inject: ['save', 'backgroundColor', 'withPhone', 'withPayment', 't'],
+  inject: ['save', 'backgroundColor', 'withPhone', 'withPayment', 't', 'fieldsDragFieldRef'],
   props: {
     fields: {
       type: Array,
@@ -205,14 +205,20 @@ export default {
     }
   },
   emits: ['set-draw', 'set-drag', 'drag-end', 'scroll-to-area', 'change-submitter'],
-  data () {
-    return {
-      dragField: null
-    }
-  },
   computed: {
     fieldNames: FieldType.computed.fieldNames,
     fieldIcons: FieldType.computed.fieldIcons,
+    fieldIconsSorted () {
+      if (this.fieldTypes.length) {
+        return this.fieldTypes.reduce((acc, type) => {
+          acc[type] = this.fieldIcons[type]
+
+          return acc
+        }, {})
+      } else {
+        return this.fieldIcons
+      }
+    },
     submitterFields () {
       return this.fields.filter((f) => f.submitter_uuid === this.selectedSubmitter.uuid)
     },
@@ -228,7 +234,7 @@ export default {
     },
     onFieldDragover (e) {
       const targetField = e.target.closest('[data-uuid]')
-      const dragField = this.$refs.fields.querySelector(`[data-uuid="${this.dragField.uuid}"]`)
+      const dragField = this.$refs.fields.querySelector(`[data-uuid="${this.fieldsDragFieldRef.value.uuid}"]`)
 
       if (dragField && targetField && targetField !== dragField) {
         const fields = Array.from(this.$refs.fields.children)
@@ -272,6 +278,14 @@ export default {
     removeField (field) {
       this.fields.splice(this.fields.indexOf(field), 1)
 
+      this.fields.forEach((f) => {
+        (f.conditions || []).forEach((c) => {
+          if (c.field_uuid === field.uuid) {
+            f.conditions.splice(f.conditions.indexOf(c), 1)
+          }
+        })
+      })
+
       this.save()
     },
     addField (type, area = null) {

app/javascript/template_builder/formula_modal.vue

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

app/javascript/template_builder/i18n.js

@@ -1,9 +1,30 @@
 const en = {
+  unchecked: 'Unchecked',
+  equal: 'Equal',
+  not_equal: 'Not equal',
+  contains: 'Contains',
+  does_not_contain: 'Does not contain',
+  not_empty: 'Not empty',
+  empty: 'Empty',
+  select_field_: 'Select field...',
+  select_value_: 'Select value...',
+  remove_condition: 'Remove condition',
   are_you_sure: 'Are you sure?',
   sign_yourself: 'Sign Yourself',
+  set_signing_date: 'Set signing date',
   send: 'Send',
+  remove: 'Remove',
+  edit: 'Edit',
+  settings: 'Settings',
+  up: 'Up',
+  down: 'Down',
+  checked: 'Checked',
   save: 'Save',
   cancel: 'Cancel',
+  any: 'Any',
+  drawn: 'Drawn',
+  formula: 'Formula',
+  typed: 'Typed',
   draw_field_on_the_document: 'Draw {field} field on the document',
   click_to_upload: 'Click to upload',
   or_drag_and_drop_files: 'or drag and drop files',
@@ -20,6 +41,7 @@ const en = {
   copy_to_all_pages: 'Copy to All Pages',
   add_option: 'Add option',
   option: 'Option',
+  condition: 'Condition',
   first_party: 'First Party',
   second_party: 'Second Party',
   third_party: 'Third Party',
@@ -30,9 +52,21 @@ const en = {
   eighth_party: 'Eighth Party',
   ninth_party: 'Ninth Party',
   tenth_party: 'Tenth Party',
+  eleventh_party: 'Eleventh Party',
+  twelfth_party: 'Twelfth Party',
+  thirteenth_party: 'Thirteenth Party',
+  fourteenth_party: 'Fourteenth Party',
+  fifteenth_party: 'Fifteenth Party',
+  sixteenth_party: 'Sixteenth Party',
+  seventeenth_party: 'Seventeenth Party',
+  eighteenth_party: 'Eighteenth Party',
+  nineteenth_party: 'Nineteenth Party',
+  twentieth_party: 'Twentieth Party',
+  draw: 'Draw',
   add: 'Add',
   or_add_field_without_drawing: 'Or add field without drawing',
   text: 'Text',
+  number: 'Number',
   signature: 'Signature',
   initials: 'Initials',
   date: 'Date',

app/javascript/template_builder/page.vue

@@ -39,7 +39,7 @@
       />
     </div>
     <div
-      v-show="resizeDirection || isMove || isDrag || showMask || (drawField && isMobile)"
+      v-show="resizeDirection || isMove || isDrag || showMask || (drawField && isMobile) || fieldsDragFieldRef.value"
       id="mask"
       ref="mask"
       class="top-0 bottom-0 left-0 right-0 absolute"
@@ -61,7 +61,7 @@ export default {
   components: {
     FieldArea
   },
-  inject: ['fieldTypes'],
+  inject: ['fieldTypes', 'defaultDrawFieldType', 'fieldsDragFieldRef'],
   props: {
     image: {
       type: Object,
@@ -123,7 +123,9 @@ export default {
   },
   computed: {
     defaultFieldType () {
-      if (this.fieldTypes.length !== 0 && !this.fieldTypes.includes('text')) {
+      if (this.defaultDrawFieldType && this.defaultDrawFieldType !== 'text') {
+        return this.defaultDrawFieldType
+      } else if (this.fieldTypes.length !== 0 && !this.fieldTypes.includes('text')) {
         return this.fieldTypes[0]
       } else {
         return 'text'

app/javascript/template_builder/payment_settings.vue

@@ -5,7 +5,7 @@
   >
     <label
       tabindex="0"
-      title="Settings"
+      :title="t('settings')"
       class="cursor-pointer text-transparent group-hover:text-base-content"
     >
       <IconSettings
@@ -167,7 +167,7 @@ export default {
     IconInnerShadowTop,
     IconBrandStripe
   },
-  inject: ['backgroundColor', 'save', 'currencies'],
+  inject: ['backgroundColor', 'save', 'currencies', 't'],
   props: {
     field: {
       type: Object,

app/jobs/process_submitter_completion_job.rb

@@ -26,12 +26,14 @@ class ProcessSubmitterCompletionJob < ApplicationJob
 
     user = submission.created_by_user || submitter.template.author
 
-    if submitter.template.account.users.exists?(id: user.id) &&
+    if submitter.account.users.exists?(id: user.id) && submission.preferences['send_email'] != false
-       submission.preferences['send_email'] != false
+      if submitter.submission.submitters.map(&:email).exclude?(user.email) &&
-      SubmitterMailer.completed_email(submitter, user).deliver_later!
+         user.user_configs.find_by(key: UserConfig::RECEIVE_COMPLETED_EMAIL)&.value != false
+        SubmitterMailer.completed_email(submitter, user).deliver_later!
+      end
 
       bcc = submission.preferences['bcc_completed'].presence ||
-            submission.template.account.account_configs
+            submission.account.account_configs
                       .find_by(key: AccountConfig::BCC_EMAILS)&.value.presence
 
       bcc.to_s.scan(User::EMAIL_REGEXP).each do |to|

app/jobs/send_form_completed_webhook_request_job.rb

@@ -3,7 +3,10 @@
 class SendFormCompletedWebhookRequestJob < ApplicationJob
   USER_AGENT = 'DocuSeal.co Webhook'
 
-  def perform(submitter)
+  MAX_ATTEMPTS = 10
+
+  def perform(submitter, params = {})
+    attempt = params[:attempt].to_i
     config = Accounts.load_webhook_configs(submitter.submission.account)
 
     return if config.blank? || config.value.blank?
@@ -12,13 +15,26 @@ class SendFormCompletedWebhookRequestJob < ApplicationJob
 
     ActiveStorage::Current.url_options = Docuseal.default_url_options
 
-    Faraday.post(config.value,
+    resp = begin
-                 {
+      Faraday.post(config.value,
-                   event_type: 'form.completed',
+                   {
-                   timestamp: Time.current,
+                     event_type: 'form.completed',
-                   data: Submitters::SerializeForWebhook.call(submitter)
+                     timestamp: Time.current,
-                 }.to_json,
+                     data: Submitters::SerializeForWebhook.call(submitter)
-                 'Content-Type' => 'application/json',
+                   }.to_json,
-                 'User-Agent' => USER_AGENT)
+                   'Content-Type' => 'application/json',
+                   'User-Agent' => USER_AGENT)
+    rescue Faraday::Error
+      nil
+    end
+
+    if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
+       (!Docuseal.multitenant? || submitter.account.account_configs.exists?(key: :plan))
+      SendFormCompletedWebhookRequestJob.set(wait: (2**attempt).minutes)
+                                        .perform_later(submitter, {
+                                                         attempt: attempt + 1,
+                                                         last_status: resp&.status.to_i
+                                                       })
+    end
   end
 end

app/jobs/send_form_started_webhook_request_job.rb

@@ -3,20 +3,36 @@
 class SendFormStartedWebhookRequestJob < ApplicationJob
   USER_AGENT = 'DocuSeal.co Webhook'
 
-  def perform(submitter)
+  MAX_ATTEMPTS = 10
+
+  def perform(submitter, params = {})
+    attempt = params[:attempt].to_i
     config = Accounts.load_webhook_configs(submitter.submission.account)
 
     return if config.blank? || config.value.blank?
 
     ActiveStorage::Current.url_options = Docuseal.default_url_options
 
-    Faraday.post(config.value,
+    resp = begin
-                 {
+      Faraday.post(config.value,
-                   event_type: 'form.started',
+                   {
-                   timestamp: Time.current,
+                     event_type: 'form.started',
-                   data: Submitters::SerializeForWebhook.call(submitter)
+                     timestamp: Time.current,
-                 }.to_json,
+                     data: Submitters::SerializeForWebhook.call(submitter)
-                 'Content-Type' => 'application/json',
+                   }.to_json,
-                 'User-Agent' => USER_AGENT)
+                   'Content-Type' => 'application/json',
+                   'User-Agent' => USER_AGENT)
+    rescue Faraday::Error
+      nil
+    end
+
+    if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
+       (!Docuseal.multitenant? || submitter.account.account_configs.exists?(key: :plan))
+      SendFormStartedWebhookRequestJob.set(wait: (2**attempt).minutes)
+                                      .perform_later(submitter, {
+                                                       attempt: attempt + 1,
+                                                       last_status: resp&.status.to_i
+                                                     })
+    end
   end
 end

app/jobs/send_form_viewed_webhook_request_job.rb

@@ -3,20 +3,36 @@
 class SendFormViewedWebhookRequestJob < ApplicationJob
   USER_AGENT = 'DocuSeal.co Webhook'
 
-  def perform(submitter)
+  MAX_ATTEMPTS = 10
+
+  def perform(submitter, params = {})
+    attempt = params[:attempt].to_i
     config = Accounts.load_webhook_configs(submitter.submission.account)
 
     return if config.blank? || config.value.blank?
 
     ActiveStorage::Current.url_options = Docuseal.default_url_options
 
-    Faraday.post(config.value,
+    resp = begin
-                 {
+      Faraday.post(config.value,
-                   event_type: 'form.viewed',
+                   {
-                   timestamp: Time.current,
+                     event_type: 'form.viewed',
-                   data: Submitters::SerializeForWebhook.call(submitter)
+                     timestamp: Time.current,
-                 }.to_json,
+                     data: Submitters::SerializeForWebhook.call(submitter)
-                 'Content-Type' => 'application/json',
+                   }.to_json,
-                 'User-Agent' => USER_AGENT)
+                   'Content-Type' => 'application/json',
+                   'User-Agent' => USER_AGENT)
+    rescue Faraday::Error
+      nil
+    end
+
+    if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
+       (!Docuseal.multitenant? || submitter.account.account_configs.exists?(key: :plan))
+      SendFormViewedWebhookRequestJob.set(wait: (2**attempt).minutes)
+                                     .perform_later(submitter, {
+                                                      attempt: attempt + 1,
+                                                      last_status: resp&.status.to_i
+                                                    })
+    end
   end
 end

app/mailers/submitter_mailer.rb

@@ -2,6 +2,7 @@
 
 class SubmitterMailer < ApplicationMailer
   MAX_ATTACHMENTS_SIZE = 10.megabytes
+  SIGN_TTL = 1.hour + 20.minutes
 
   DEFAULT_INVITATION_SUBJECT = 'You are invited to submit a form'
 
@@ -61,9 +62,10 @@ class SubmitterMailer < ApplicationMailer
          subject:)
   end
 
-  def documents_copy_email(submitter, to: nil)
+  def documents_copy_email(submitter, to: nil, sig: false)
     @current_account = submitter.submission.template.account
     @submitter = submitter
+    @sig = submitter.signed_id(expires_in: SIGN_TTL, purpose: :download_completed) if sig
 
     Submissions::EnsureResultGenerated.call(@submitter)
 

app/models/account.rb

@@ -20,7 +20,7 @@ class Account < ApplicationRecord
   has_many :template_folders, dependent: :destroy
   has_one :default_template_folder, -> { where(name: TemplateFolder::DEFAULT_NAME) },
           class_name: 'TemplateFolder', dependent: :destroy, inverse_of: :account
-  has_many :submissions, through: :templates
+  has_many :submissions, dependent: :destroy
   has_many :submitters, through: :submissions
   has_many :account_linked_accounts, dependent: :destroy
   has_many :account_testing_accounts, -> { testing }, dependent: :destroy,
@@ -30,6 +30,10 @@ class Account < ApplicationRecord
                                    foreign_key: :linked_account_id,
                                    class_name: 'AccountLinkedAccount',
                                    inverse_of: :linked_account
+  has_many :linked_account_accounts, dependent: :destroy,
+                                     foreign_key: :linked_account_id,
+                                     class_name: 'AccountLinkedAccount',
+                                     inverse_of: :linked_account
   has_many :linked_accounts, through: :account_linked_accounts
   has_many :testing_accounts, through: :account_testing_accounts, source: :linked_account
   has_many :active_users, -> { active }, dependent: :destroy,

app/models/account_config.rb

@@ -27,6 +27,7 @@ class AccountConfig < ApplicationRecord
   BCC_EMAILS = 'bcc_emails'
   FORCE_MFA = 'force_mfa'
   ALLOW_TYPED_SIGNATURE = 'allow_typed_signature'
+  ALLOW_TO_RESUBMIT = 'allow_to_resubmit'
   SUBMITTER_REMAILERS = 'submitter_reminders'
   FORM_COMPLETED_BUTTON_KEY = 'form_completed_button'
   FORM_WITH_CONFETTI_KEY = 'form_with_confetti'

app/models/submission.rb

@@ -15,11 +15,13 @@
 #  template_submitters :text
 #  created_at          :datetime         not null
 #  updated_at          :datetime         not null
+#  account_id          :bigint           not null
 #  created_by_user_id  :bigint
 #  template_id         :bigint           not null
 #
 # Indexes
 #
+#  index_submissions_on_account_id          (account_id)
 #  index_submissions_on_created_by_user_id  (created_by_user_id)
 #  index_submissions_on_slug                (slug) UNIQUE
 #  index_submissions_on_template_id         (template_id)
@@ -31,7 +33,7 @@
 #
 class Submission < ApplicationRecord
   belongs_to :template
-  has_one :account, through: :template
+  belongs_to :account
   belongs_to :created_by_user, class_name: 'User', optional: true
 
   has_many :submitters, dependent: :destroy
@@ -74,7 +76,7 @@ class Submission < ApplicationRecord
   def audit_trail_url
     return if audit_trail.blank?
 
-    Rails.application.routes.url_helpers.rails_storage_proxy_url(audit_trail, **Docuseal.default_url_options)
+    ActiveStorage::Blob.proxy_url(audit_trail.blob)
   end
   alias audit_log_url audit_trail_url
 end

app/models/submission_event.rb

@@ -15,6 +15,7 @@
 #
 # Indexes
 #
+#  index_submission_events_on_created_at     (created_at)
 #  index_submission_events_on_submission_id  (submission_id)
 #  index_submission_events_on_submitter_id   (submitter_id)
 #
@@ -46,7 +47,8 @@ class SubmissionEvent < ApplicationRecord
     phone_verified: 'phone_verified',
     start_form: 'start_form',
     view_form: 'view_form',
-    complete_form: 'complete_form'
+    complete_form: 'complete_form',
+    api_complete_form: 'api_complete_form'
   }, scope: false
 
   private

app/models/submitter.rb

@@ -4,23 +4,24 @@
 #
 # Table name: submitters
 #
-#  id              :bigint           not null, primary key
+#  id            :bigint           not null, primary key
-#  application_key :string
+#  completed_at  :datetime
-#  completed_at    :datetime
+#  email         :string
-#  email           :string
+#  ip            :string
-#  ip              :string
+#  metadata      :text             not null
-#  name            :string
+#  name          :string
-#  opened_at       :datetime
+#  opened_at     :datetime
-#  phone           :string
+#  phone         :string
-#  preferences     :text             not null
+#  preferences   :text             not null
-#  sent_at         :datetime
+#  sent_at       :datetime
-#  slug            :string           not null
+#  slug          :string           not null
-#  ua              :string
+#  ua            :string
-#  uuid            :string           not null
+#  uuid          :string           not null
-#  values          :text             not null
+#  values        :text             not null
-#  created_at      :datetime         not null
+#  created_at    :datetime         not null
-#  updated_at      :datetime         not null
+#  updated_at    :datetime         not null
-#  submission_id   :bigint           not null
+#  external_id   :string
+#  submission_id :bigint           not null
 #
 # Indexes
 #
@@ -35,14 +36,16 @@
 class Submitter < ApplicationRecord
   belongs_to :submission
   has_one :template, through: :submission
-  has_one :account, through: :template
+  has_one :account, through: :submission
 
   attribute :values, :string, default: -> { {} }
   attribute :preferences, :string, default: -> { {} }
+  attribute :metadata, :string, default: -> { {} }
   attribute :slug, :string, default: -> { SecureRandom.base58(14) }
 
   serialize :values, coder: JSON
   serialize :preferences, coder: JSON
+  serialize :metadata, coder: JSON
 
   has_many_attached :documents
   has_many_attached :attachments
@@ -62,6 +65,10 @@ class Submitter < ApplicationRecord
     end
   end
 
+  def application_key
+    external_id
+  end
+
   def friendly_name
     if name.present? && email.present? && email.exclude?(',')
       %("#{name.delete('"')}" <#{email}>)

app/models/template.rb

@@ -4,20 +4,20 @@
 #
 # Table name: templates
 #
-#  id              :bigint           not null, primary key
+#  id          :bigint           not null, primary key
-#  application_key :string
+#  archived_at :datetime
-#  archived_at     :datetime
+#  fields      :text             not null
-#  fields          :text             not null
+#  name        :string           not null
-#  name            :string           not null
+#  schema      :text             not null
-#  schema          :text             not null
+#  slug        :string           not null
-#  slug            :string           not null
+#  source      :text             not null
-#  source          :text             not null
+#  submitters  :text             not null
-#  submitters      :text             not null
+#  created_at  :datetime         not null
-#  created_at      :datetime         not null
+#  updated_at  :datetime         not null
-#  updated_at      :datetime         not null
+#  account_id  :bigint           not null
-#  account_id      :bigint           not null
+#  author_id   :bigint           not null
-#  author_id       :bigint           not null
+#  external_id :string
-#  folder_id       :bigint           not null
+#  folder_id   :bigint           not null
 #
 # Indexes
 #
@@ -57,10 +57,15 @@ class Template < ApplicationRecord
            class_name: 'ActiveStorage::Attachment', dependent: :destroy, as: :record, inverse_of: :record
 
   has_many :submissions, dependent: :destroy
+  has_many :template_sharings, dependent: :destroy
 
   scope :active, -> { where(archived_at: nil) }
   scope :archived, -> { where.not(archived_at: nil) }
 
+  def application_key
+    external_id
+  end
+
   private
 
   def maybe_set_default_folder

app/models/template_sharing.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+# == Schema Information
+#
+# Table name: template_sharings
+#
+#  id          :bigint           not null, primary key
+#  ability     :string           not null
+#  created_at  :datetime         not null
+#  updated_at  :datetime         not null
+#  account_id  :bigint           not null
+#  template_id :bigint           not null
+#
+# Indexes
+#
+#  index_template_sharings_on_account_id_and_template_id  (account_id,template_id) UNIQUE
+#  index_template_sharings_on_template_id                 (template_id)
+#
+# Foreign Keys
+#
+#  fk_rails_...  (template_id => templates.id)
+#
+class TemplateSharing < ApplicationRecord
+  ALL_ID = -1
+
+  belongs_to :template
+  belongs_to :account, optional: true
+end

app/models/user_config.rb

@@ -22,6 +22,7 @@
 #
 class UserConfig < ApplicationRecord
   SIGNATURE_KEY = 'signature'
+  RECEIVE_COMPLETED_EMAIL = 'receive_completed_email'
 
   belongs_to :user
 

app/views/accounts/show.html.erb

@@ -63,6 +63,18 @@
             </div>
           <% end %>
         <% end %>
+        <% account_config = AccountConfig.find_or_initialize_by(account: current_account, key: AccountConfig::ALLOW_TO_RESUBMIT) %>
+        <% 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 to resubmit completed forms
+              </span>
+              <%= f.check_box :value, class: 'toggle', checked: account_config.value != false, onchange: 'this.form.requestSubmit()' %>
+            </div>
+          <% end %>
+        <% end %>
       </div>
     <% end %>
     <% if can?(:manage, current_account) && Docuseal.multitenant? && true_user == current_user %>

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

@@ -1,47 +0,0 @@
-<div class="max-w-lg mx-auto px-2">
-  <h1 class="text-3xl font-bold text-center mt-8">Profile Details</h1>
-  <%= form_for('', as: resource_name, html: { class: 'space-y-6' }, data: { turbo: params[:redir].blank? }, url: new_registration_path) do |f| %>
-    <% if params[:redir].present? %>
-      <%= hidden_field_tag :redir, params[:redir] %>
-    <% end %>
-    <div class="space-y-2">
-      <%= render 'devise/shared/error_messages', resource: %>
-      <%= f.fields_for resource do |ff| %>
-        <div class="grid gap-2 md:grid-cols-2 md:gap-4">
-          <div class="form-control">
-            <%= ff.label :first_name, class: 'label' %>
-            <%= ff.text_field :first_name, required: true, class: 'base-input' %>
-          </div>
-          <div class="form-control">
-            <%= ff.label :last_name, class: 'label' %>
-            <%= ff.text_field :last_name, required: true, class: 'base-input' %>
-          </div>
-        </div>
-      <% end %>
-      <%= f.fields_for resource do |ff| %>
-        <div class="form-control <%= 'hidden' if (params[:oauth_callback] || params[:sign_up]) && resource.email? %>">
-          <%= ff.label :email, class: 'label' %>
-          <%= ff.email_field :email, value: EmailTypo.call(resource.email), required: true, class: 'base-input' %>
-        </div>
-      <% end %>
-      <%= f.fields_for resource.account do |ff| %>
-        <set-timezone data-input-id="_account_timezone"></set-timezone>
-        <%= ff.hidden_field :timezone %>
-        <div class="form-control">
-          <%= ff.label :name, 'Company name (optional)', class: 'label' %>
-          <%= ff.text_field :name, class: 'base-input' %>
-        </div>
-      <% end %>
-      <%= f.fields_for resource do |ff| %>
-        <div class="form-control <%= 'hidden' if params[:oauth_callback] %>">
-          <%= ff.label :password, class: 'label' %>
-          <%= ff.password_field :password, required: !params[:oauth_callback], class: 'base-input' %>
-        </div>
-      <% end %>
-    </div>
-    <div class="form-control">
-      <%= f.button button_title(title: 'Sign up', disabled_with: 'Signing up'), class: 'base-button' %>
-    </div>
-  <% end %>
-  <%= render 'devise/shared/links' %>
-</div>

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

@@ -1,37 +0,0 @@
-<div class="max-w-lg mx-auto px-2">
-  <%= render 'devise/shared/select_server' if Docuseal.multitenant? %>
-  <h1 class="text-3xl font-bold text-center mt-8 mb-6">Create Free Account</h1>
-  <%= form_for(User.new, html: { class: 'space-y-6' }, url: new_registration_path, data: { turbo: params[:redir].blank? }, method: :get) do |f| %>
-    <% if params[:redir].present? %>
-      <%= hidden_field_tag :redir, params[:redir] %>
-    <% end %>
-    <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', placeholder: 'Enter email to continue' %>
-      </div>
-    </div>
-    <div class="form-control">
-      <%= f.button button_title(title: 'Sign up', disabled_with: 'Sign up'), name: 'sign_up', value: true, class: 'base-button' %>
-    </div>
-  <% end %>
-  <% if devise_mapping.omniauthable? %>
-    <div class="space-y-4">
-      <% if User.omniauth_providers.include?(:google_oauth2) %>
-        <%= 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 %>
-      <% end %>
-      <% if User.omniauth_providers.include?(:microsoft_office365) %>
-        <%= 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 %>
-      <% end %>
-    </div>
-  <% end %>
-  <%= render 'devise/shared/links' %>
-</div>

app/views/email_smtp_settings/index.html.erb

@@ -38,7 +38,7 @@
         <div class="form-control">
           <%= ff.label :security_label, 'SMTP Security', class: 'label' %>
           <div class="flex items-center space-x-6">
-            <% [%w[None none], %w[SSL ssl], %w[TLS tls]].each do |(label, val)| %>
+            <% [%w[Auto none], %w[SSL ssl], %w[TLS tls]].each do |(label, val)| %>
               <%= ff.label :security, value: val, for: "#{val}_radio", class: 'label' do %>
                 <%= ff.radio_button :security, val, checked: (value['security'].blank? && val == 'none') || value['security'] == val, id: "#{val}_radio", class: 'base-radio mr-2' %>
                 <%= label %>

app/views/esign_settings/show.html.erb

@@ -110,7 +110,7 @@
                 <span>
                   Timeserver URL
                 </span>
-                <span class="tooltip" data-tip="URL of the trusted timeserver to be used to generate timestamp signatures.">
+                <span class="tooltip" data-tip="URL of the trusted RFC 3161 timeserver to be used to generate timestamp signatures.">
                   <%= svg_icon('info_circle', class: 'w-4 h-4') %>
                 </span>
               </span>
@@ -123,26 +123,24 @@
         <% end %>
       </div>
     <% end %>
-    <% if !Docuseal.multitenant? %>
+    <% account_config = AccountConfig.where(account: current_account, key: AccountConfig::ESIGNING_PREFERENCE_KEY).first_or_initialize(value: 'multiple') %>
-      <% account_config = AccountConfig.where(account: current_account, key: AccountConfig::ESIGNING_PREFERENCE_KEY).first_or_initialize(value: 'multiple') %>
+    <% if can?(:manage, account_config) %>
-      <% if can?(:manage, account_config) %>
+      <div class="px-1 mt-8 max-w-xl">
-        <div class="px-1 mt-8 max-w-xl">
+        <div class="flex justify-between items-end mb-4 mt-8">
-          <div class="flex justify-between items-end mb-4 mt-8">
+          <h2 class="text-3xl font-bold">Preferences</h2>
-            <h2 class="text-3xl font-bold">Preferences</h2>
-          </div>
-          <% 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>
-                  Apply multiple PDF digital signatures in the document per each signer
-                </span>
-                <%= f.check_box :value, { class: 'toggle', checked: account_config.value == 'multiple', onchange: 'this.form.requestSubmit()' }, 'multiple', 'single' %>
-              </div>
-            <% end %>
-          <% end %>
         </div>
-      <% end %>
+        <% 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>
+                Apply multiple PDF digital signatures in the document per each signer
+              </span>
+              <%= f.check_box :value, { class: 'toggle', checked: account_config.value == 'multiple', onchange: 'this.form.requestSubmit()' }, 'multiple', 'single' %>
+            </div>
+          <% end %>
+        <% end %>
+      </div>
     <% end %>
   </div>
 </div>

app/views/icons/_code.html.erb

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <path d="M7 8l-4 4l4 4" />
+  <path d="M17 8l4 4l-4 4" />
+  <path d="M14 4l-4 16" />
+</svg>

app/views/notifications_settings/_reminder_placeholder.html.erb

@@ -5,7 +5,7 @@
     <p>
       Send automatic email reminders to your recipients.
       <br>
-      <a class="link font-medium" target="_blank" href="<%= "#{Docuseal::CONSOLE_URL}/#{Docuseal.multitenant? ? 'plans' : 'on_premise'}" %>">Learn More</a>
+      <a class="link font-medium" target="_blank" href="<%= Docuseal.multitenant? ? console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/plans") : "#{Docuseal::CLOUD_URL}/sign_up?#{{ redir: "#{Docuseal::CONSOLE_URL}/on_premise" }.to_query}" %>" data-turbo="false">Learn More</a>
     </p>
   </div>
 </div>

app/views/notifications_settings/index.html.erb

@@ -2,6 +2,20 @@
   <%= render 'shared/settings_nav' %>
   <div class="flex-grow max-w-xl mx-auto">
     <h1 class="text-4xl font-bold mb-4">Email Notifications</h1>
+    <div class="mt-2 mb-1">
+      <% user_config = UserConfig.find_or_initialize_by(user: current_user, key: UserConfig::RECEIVE_COMPLETED_EMAIL) %>
+      <% if can?(:manage, user_config) %>
+        <%= form_for user_config, url: user_configs_path, method: :post do |f| %>
+          <%= f.hidden_field :key %>
+          <div class="flex items-center justify-between">
+            <span>
+              Receive notification emails on completed submission
+            </span>
+            <%= f.check_box :value, class: 'toggle', checked: user_config.value != false, onchange: 'this.form.requestSubmit()' %>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
     <%= render 'email_stats' %>
     <%= render 'bcc_form', config: @bcc_config %>
     <div class="flex justify-between items-end mb-4 mt-8">

app/views/personalization_settings/_logo_placeholder.html.erb

@@ -5,7 +5,7 @@
     <p>
       Display your company name and logo when signing documents.
       <br>
-      <a class="link font-medium" target="_blank" href="<%= "#{Docuseal::CONSOLE_URL}/#{Docuseal.multitenant? ? 'plans' : 'on_premise'}" %>">Learn More</a>
+      <a class="link font-medium" target="_blank" href="<%= Docuseal.multitenant? ? console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/plans") : "#{Docuseal::CLOUD_URL}/sign_up?#{{ redir: "#{Docuseal::CONSOLE_URL}/on_premise" }.to_query}" %>" data-turbo="false">Learn More</a>
     </p>
   </div>
 </div>

app/views/shared/_navbar_buttons.html.erb

@@ -1,4 +1,4 @@
-<%= link_to Docuseal.multitenant? ? console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/plans") : "#{Docuseal::CONSOLE_URL}/on_premise", class: 'hidden md:inline-flex btn btn-warning btn-sm', data: { prefetch: false } do %>
+<%= link_to Docuseal.multitenant? ? console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/plans") : "#{Docuseal::CLOUD_URL}/sign_up?#{{ redir: "#{Docuseal::CONSOLE_URL}/on_premise" }.to_query}", class: 'hidden md:inline-flex btn btn-warning btn-sm', data: { prefetch: false } do %>
   Upgrade
 <% end %>
 <% if signed_in? && current_user != true_user %>

app/views/shared/_settings_nav.html.erb

@@ -69,7 +69,7 @@
       <%= render 'shared/settings_nav_extra' %>
       <% if !Docuseal.demo? && can?(:manage, EncryptedConfig) %>
         <li>
-          <%= link_to Docuseal.multitenant? ? console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/plans") : "#{Docuseal::CONSOLE_URL}/on_premise", class: 'text-base hover:bg-base-300', data: { prefetch: false } do %>
+          <%= link_to Docuseal.multitenant? ? console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/plans") : "#{Docuseal::CLOUD_URL}/sign_up?#{{ redir: "#{Docuseal::CONSOLE_URL}/on_premise" }.to_query}", class: 'text-base hover:bg-base-300', data: { prefetch: false } do %>
             Plans
             <span class="badge badge-warning">New</span>
           <% end %>

app/views/sms_settings/_placeholder.html.erb

@@ -5,7 +5,7 @@
     <p class="text-gray-700">
       Unlock with DocuSeal Pro
       <br>
-      <a class="link font-medium" target="_blank" href="<%= "#{Docuseal::CONSOLE_URL}/#{Docuseal.multitenant? ? 'plans' : 'on_premise'}" %>">Learn More</a>
+      <a class="link font-medium" target="_blank" href="<%= Docuseal.multitenant? ? console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/plans") : "#{Docuseal::CLOUD_URL}/sign_up?#{{ redir: "#{Docuseal::CONSOLE_URL}/on_premise" }.to_query}" %>" data-turbo="false">Learn More</a>
     </p>
   </div>
 </div>

app/views/sso_settings/_placeholder.html.erb

@@ -5,7 +5,7 @@
     <p class="text-gray-700">
       Unlock with DocuSeal Pro
       <br>
-      <a class="link font-medium" target="_blank" href="<%= "#{Docuseal::CONSOLE_URL}/#{Docuseal.multitenant? ? 'plans' : 'on_premise'}" %>">Learn More</a>
+      <a class="link font-medium" target="_blank" href="<%= Docuseal.multitenant? ? console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/plans") : "#{Docuseal::CLOUD_URL}/sign_up?#{{ redir: "#{Docuseal::CONSOLE_URL}/on_premise" }.to_query}" %>" data-turbo="false">Learn More</a>
     </p>
   </div>
 </div>

app/views/start_form/_banner.html.erb

@@ -1 +1 @@
-<%= render 'docuseal_logo' %>
+<%= render 'start_form/docuseal_logo' %>

app/views/start_form/completed.html.erb

@@ -19,16 +19,16 @@
     <div dir="auto" class="text-center text-2xl font-semibold">
       <%= t('form_has_been_submitted_already') %>
     </div>
-    <% if Accounts.can_send_emails?(@submitter.submission.template.account) %>
+    <% if Accounts.can_send_emails?(@submitter.account) %>
       <div>
         <%= button_to button_title(title: t('send_copy_to_email'), disabled_with: t('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 %>
-    <% if @template.submitters.to_a.size == 1 %>
+    <% if @template.submitters.to_a.size == 1 && %w[api embed].exclude?(@submitter.submission.source) && @submitter.account.account_configs.find_or_initialize_by(key: AccountConfig::ALLOW_TO_RESUBMIT).value != false %>
       <div>
         <%= button_to button_title(title: t('resubmit'), disabled_with: t('resubmit'), icon: svg_icon('reload', class: 'w-6 h-6')), start_form_path(@template.slug), params: { submitter: { email: params[:email] }, resubmit: @submitter.slug }, method: :put, form: { onsubmit: 'event.submitter.disabled = true' }, class: 'white-button w-full' %>
       </div>
     <% end %>
   </div>
 </div>
-<%= render 'shared/attribution', link_path: '/start' %>
+<%= render 'shared/attribution', link_path: '/start', account: @submitter.account %>

app/views/start_form/show.html.erb

@@ -37,4 +37,4 @@
     <% end %>
   </div>
 </div>
-<%= render 'shared/attribution', link_path: '/start' %>
+<%= render 'shared/attribution', link_path: '/start', account: @template.account %>

app/views/submissions/_link_form.html.erb

@@ -6,181 +6,7 @@
     </div>
   </div>
   <div class="divider uppercase  normal-case mt-5 mb-6 text-neutral-700">Or embed on your website</div>
-  <toggle-visible data-element-ids="[&quot;js_1&quot;,&quot;react_1&quot;,&quot;vue_1&quot;]" class="block relative" data-catalyst="">
+  <%= render 'templates/embedding', template: %>
-    <ul class="items-center w-full text-sm font-medium text-gray-900 my-4 space-y-2 sm:space-y-0 sm:flex sm:space-x-2">
-      <li class="w-full h-10 text-sm font-medium flex items-center relative group py-3.5">
-        <input type="radio" name="option_1" id="js_radio_1" value="js_1" data-action="change:toggle-visible#trigger" class="relative peer z-10 hidden" checked="checked">
-        <label for="js_radio_1" class="absolute border-neutral-focus space-x-2 border rounded-xl left-0 right-0 top-0 bottom-0 flex items-center justify-center group-hover:bg-neutral group-hover:text-white peer-checked:btn-neutral">
-          <span><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48">
-              <path fill="#ffd600" d="M6,42V6h36v36H6z"></path><path fill="#000001" d="M29.538 32.947c.692 1.124 1.444 2.201 3.037 2.201 1.338 0 2.04-.665 2.04-1.585 0-1.101-.726-1.492-2.198-2.133l-.807-.344c-2.329-.988-3.878-2.226-3.878-4.841 0-2.41 1.845-4.244 4.728-4.244 2.053 0 3.528.711 4.592 2.573l-2.514 1.607c-.553-.988-1.151-1.377-2.078-1.377-.946 0-1.545.597-1.545 1.377 0 .964.6 1.354 1.985 1.951l.807.344C36.452 29.645 38 30.839 38 33.523 38 36.415 35.716 38 32.65 38c-2.999 0-4.702-1.505-5.65-3.368L29.538 32.947zM17.952 33.029c.506.906 1.275 1.603 2.381 1.603 1.058 0 1.667-.418 1.667-2.043V22h3.333v11.101c0 3.367-1.953 4.899-4.805 4.899-2.577 0-4.437-1.746-5.195-3.368L17.952 33.029z"></path>
-            </svg>
-          </span>
-          <span>JavaScript</span>
-        </label>
-      </li>
-      <li class="w-full h-10 text-sm font-medium flex items-center relative group py-3.5">
-        <input type="radio" name="option_1" id="react_radio_1" value="react_1" data-action="change:toggle-visible#trigger" class="relative peer z-10 hidden">
-        <label for="react_radio_1" class="absolute border-neutral-focus space-x-2 border rounded-xl left-0 right-0 top-0 bottom-0 flex items-center justify-center group-hover:bg-neutral group-hover:text-white peer-checked:btn-neutral">
-          <span><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="-11.5 -10.23174 23 20.46348">
-              <circle cx="0" cy="0" r="2.05" fill="#61dafb"></circle>
-              <g stroke="#61dafb" stroke-width="1" fill="none">
-                <ellipse rx="11" ry="4.2"></ellipse>
-                <ellipse rx="11" ry="4.2" transform="rotate(60)"></ellipse>
-                <ellipse rx="11" ry="4.2" transform="rotate(120)"></ellipse>
-              </g>
-            </svg>
-          </span>
-          <span>React</span>
-        </label>
-      </li>
-      <li class="w-full h-10 text-sm font-medium flex items-center relative group py-3.5">
-        <input type="radio" name="option_1" id="vue_radio_1" value="vue_1" data-action="change:toggle-visible#trigger" class="relative peer z-10 hidden">
-        <label for="vue_radio_1" class="absolute border-neutral-focus space-x-2 border rounded-xl left-0 right-0 top-0 bottom-0 flex items-center justify-center group-hover:bg-neutral group-hover:text-white peer-checked:btn-neutral">
-          <span><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" version="1.1" viewBox="0 0 261.76 226.69"><g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883"></path></g><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e"></path></g></g></svg>
-          </span>
-          <span>Vue</span>
-        </label>
-      </li>
-    </ul>
-  </toggle-visible>
-<div id="js_1" class="block my-4">
-    <div class="mockup-code overflow-hidden pb-0 mt-4">
-      <span class="top-0 right-0 absolute flex">
-        <%= link_to 'Learn More', console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/embedding/form"), target: '_blank', data: { turbo: false }, class: 'btn btn-ghost text-gray-100 flex', rel: 'noopener' %>
-        <clipboard-copy data-text="<script src=&quot;<%= Docuseal::CDN_URL %>/js/form.js&quot;></script>
-
-<docuseal-form data-src=&quot;<%= start_form_url(slug: template.slug) %>&quot;></docuseal-form>
-">
-  <label class="btn btn-ghost text-gray-100">
-    <input type="radio" class="peer hidden">
-    <span class="peer-checked:hidden flex items-center space-x-2">
-      <%= svg_icon('copy', class: 'w-6 h-6 text-white') %>
-      <span class="hidden md:inline">
-        Copy
-      </span>
-    </span>
-    <span class="hidden peer-checked:flex items-center space-x-2">
-      <%= svg_icon('clipboard_copy', class: 'w-6 h-6 text-white') %>
-      <span class="hidden md:inline">
-        Copied
-      </span>
-    </span>
-  </label>
-</clipboard-copy>
-
-      </span>
-      <pre class="before:!m-0 pl-6 pb-4 overflow-auto"><code class="overflow-hidden w-full"><span style="color: #f4bf75">&lt;script </span><span style="color: #6a9fb5">src=</span><span style="color: #90a959">"<%= Docuseal::CDN_URL %>/js/form.js"</span><span style="color: #f4bf75">&gt;&lt;/script&gt;</span>
-
-<span style="color: #f4bf75">&lt;docuseal-form</span> <span style="color: #6a9fb5">data-src=</span><span style="color: #90a959">"<%= start_form_url(slug: template.slug) %>"</span><span style="color: #f4bf75">&gt;</span><span style="color: #f4bf75">&lt;/docuseal-form&gt;</span>
-</code></pre>
-    </div>
-
-  </div>
-<div id="react_1" class="block my-4 hidden">
-    <div class="mockup-code overflow-hidden pb-0 mt-4">
-      <span class="top-0 right-0 absolute flex">
-        <%= link_to 'Learn More', console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/embedding/form"), target: '_blank', data: { turbo: false }, class: 'btn btn-ghost text-gray-100 flex', rel: 'noopener' %>
-        <clipboard-copy data-text="import React from &quot;react&quot;
-import { DocusealForm } from '@docuseal/react'
-
-export function App() {
-  return (
-    <DocusealForm
-      src=&quot;<%= start_form_url(slug: template.slug) %>&quot;
-    />
-  );
-}
-">
-  <label class="btn btn-ghost text-white">
-    <input type="radio" class="peer hidden">
-    <span class="peer-checked:hidden flex items-center space-x-2">
-      <%= svg_icon('copy', class: 'w-6 h-6 text-white') %>
-      <span class="hidden md:inline">
-        Copy
-      </span>
-    </span>
-    <span class="hidden peer-checked:flex items-center space-x-2">
-      <%= svg_icon('clipboard_copy', class: 'w-6 h-6 text-white') %>
-      <span class="hidden md:inline">
-        Copied
-      </span>
-    </span>
-  </label>
-</clipboard-copy>
-
-      </span>
-      <pre class="before:!m-0 pl-6 pb-4 overflow-auto"><code class="overflow-hidden w-full"><span style="color: #aa759f">import</span> <span style="color: #d0d0d0;background-color: #151515">React</span> <span style="color: #aa759f">from</span> <span style="color: #90a959">"</span><span style="color: #90a959">react</span><span style="color: #90a959">"</span>
-<span style="color: #aa759f">import</span> <span style="color: #d0d0d0">{</span> <span style="color: #d0d0d0;background-color: #151515">DocusealForm</span> <span style="color: #d0d0d0">}</span> <span style="color: #aa759f">from</span> <span style="color: #90a959">'</span><span style="color: #90a959">@docuseal/react</span><span style="color: #90a959">'</span>
-
-<span style="color: #aa759f">export</span> <span style="color: #d28445">function</span> <span style="color: #d0d0d0;background-color: #151515">App</span><span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">{</span>
-  <span style="color: #aa759f">return </span><span style="color: #d0d0d0">(</span>
-    <span style="color: #d0d0d0">&lt;</span><span style="color: #f4bf75">DocusealForm</span>
-      <span style="color: #6a9fb5">src</span><span style="color: #d0d0d0">=</span><span style="color: #90a959">"<%= start_form_url(slug: template.slug) %>"</span>
-    <span style="color: #d0d0d0">/&gt;</span>
-  <span style="color: #d0d0d0">);</span>
-<span style="color: #d0d0d0">}</span>
-</code></pre>
-    </div>
-
-  </div>
-<div id="vue_1" class="block my-4 hidden">
-    <div class="mockup-code overflow-hidden pb-0 mt-4">
-      <span class="top-0 right-0 absolute flex">
-        <%= link_to 'Learn More', console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/embedding/form"), target: '_blank', data: { turbo: false }, class: 'btn btn-ghost text-gray-100 flex', rel: 'noopener' %>
-        <clipboard-copy data-text="<template>
-  <DocusealForm
-    :src=&quot;'<%= start_form_url(slug: template.slug) %>'&quot;
-  />
-</template>
-
-<script>
-import { DocusealForm } from '@docuseal/vue'
-
-export default {
-  name: 'App',
-  components: {
-    DocusealForm
-  }
-}
-</script>
-">
-  <label class="btn btn-ghost text-white">
-    <input type="radio" class="peer hidden">
-    <span class="peer-checked:hidden flex items-center space-x-2">
-      <%= svg_icon('copy', class: 'w-6 h-6 text-white') %>
-      <span class="hidden md:inline">
-        Copy
-      </span>
-    </span>
-    <span class="hidden peer-checked:flex items-center space-x-2">
-      <%= svg_icon('clipboard_copy', class: 'w-6 h-6 text-white') %>
-      <span class="hidden md:inline">
-        Copied
-      </span>
-    </span>
-  </label>
-</clipboard-copy>
-
-      </span>
-      <pre class="before:!m-0 pl-6 pb-4 overflow-auto"><code class="overflow-hidden w-full"><span style="color: #f4bf75">&lt;template&gt;</span>
-  <span style="color: #f4bf75">&lt;DocusealForm</span>
-    <span style="color: #6a9fb5">:src=</span><span style="color: #90a959">"'<%= start_form_url(slug: template.slug) %>'"</span>
-  <span style="color: #f4bf75">/&gt;</span>
-<span style="color: #f4bf75">&lt;/template&gt;</span>
-
-<span style="color: #f4bf75">&lt;</span><span style="color: #f4bf75">script</span><span style="color: #f4bf75">&gt;</span>
-<span style="color: #aa759f">import</span> <span style="color: #d0d0d0">{</span> <span style="color: #d0d0d0;background-color: #151515">DocusealForm</span> <span style="color: #d0d0d0">}</span> <span style="color: #aa759f">from</span> <span style="color: #90a959">'</span><span style="color: #90a959">@docuseal/vue</span><span style="color: #90a959">'</span>
-
-<span style="color: #aa759f">export</span> <span style="color: #aa759f">default</span> <span style="color: #d0d0d0">{</span>
-  <span style="color: #6a9fb5">name</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">'</span><span style="color: #90a959">App</span><span style="color: #90a959">'</span><span style="color: #d0d0d0">,</span>
-  <span style="color: #6a9fb5">components</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0">{</span>
-    <span style="color: #d0d0d0;background-color: #151515">DocusealForm</span>
-  <span style="color: #d0d0d0">}</span>
-<span style="color: #d0d0d0">}</span>
-<span style="color: #f4bf75">&lt;/</span><span style="color: #f4bf75">script</span><span style="color: #f4bf75">&gt;</span>
-</code></pre>
-    </div>
-  </div>
   <div class="mt-4">
     <a href="#" class="link text-center block" data-action="click:turbo-modal#close">Close</a>
   </div>

app/views/submissions/_send_sms_button.html.erb

@@ -1,5 +1,5 @@
 <div class="mt-2 mb-1">
   <div class="tooltip w-full" data-tip="Unlock with Enterpise">
-    <%= link_to submitter.sent_at? ? 'Re-send SMS' : 'Send SMS', "#{Docuseal::CONSOLE_URL}/#{Docuseal.multitenant? ? 'plans' : 'on_premise'}", class: 'btn btn-sm btn-primary text-gray-400 w-full' %>
+    <%= link_to submitter.sent_at? ? 'Re-send SMS' : 'Send SMS', Docuseal.multitenant? ? console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/plans") : "#{Docuseal::CLOUD_URL}/sign_up?#{{ redir: "#{Docuseal::CONSOLE_URL}/on_premise" }.to_query}", class: 'btn btn-sm btn-primary text-gray-400 w-full' %>
   </div>
 </div>

app/views/submissions/_value.html.erb

@@ -31,7 +31,7 @@
         <% end %>
       <% end %>
     </div>
-  <% elsif field['type'] == 'date' %>
+  <% elsif field['type'] == 'date' && value != '{{date}}' %>
     <autosize-field></autosize-field>
     <div class="flex items-center px-0.5">
       <%= TimeUtils.format_date_string(value, field.dig('preferences', 'format'), local_assigns[:locale]) %>

app/views/submissions/show.html.erb

@@ -6,7 +6,7 @@
     </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">
+        <a href="<%= ActiveStorage::Blob.proxy_url(@submission.audit_trail.blob, expires_at: 4.hours.from_now) %>" class="white-button" target="_blank">
           <%= svg_icon('external_link', class: 'w-6 h-6') %>
           <span class="hidden md:inline">
             Audit Log
@@ -14,7 +14,7 @@
         </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">
+        <download-button data-src="<%= submitter_download_index_path(last_submitter.slug, { sig: params[:sig] }.compact) %>" 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 class="hidden md:inline">Download</span>
@@ -34,7 +34,7 @@
       <% (@submission.template_schema || @submission.template.schema).each do |item| %>
         <% document = @submission.template_schema_documents.find { |a| item['attachment_uuid'] == a.uuid } %>
         <a href="#<%= "page-#{document.uuid}-0" %>" onclick="[event.preventDefault(), window[event.target.closest('a').href.split('#')[1]].scrollIntoView({ behavior: 'smooth', block: 'start' })]" class="block cursor-pointer">
-          <img src="<%= document.preview_images.first.url %>" width="<%= document.preview_images.first.metadata['width'] %>" height="<%= document.preview_images.first.metadata['height'] %>" class="rounded border" loading="lazy">
+          <img src="<%= Docuseal::URL_CACHE.fetch([document.id, document.uuid, 0].join(':'), expires_in: 10.minutes) { document.preview_images.first.url } %>" width="<%= document.preview_images.first.metadata['width'] %>" height="<%= document.preview_images.first.metadata['height'] %>" class="rounded border" loading="lazy">
           <div class="pb-2 pt-1.5 text-center" dir="auto">
             <%= item['name'].presence || document.filename.base %>
           </div>
@@ -53,9 +53,9 @@
           <% preview_images_index = document.preview_images.loaded? ? document.preview_images.index_by { |e| e.filename.base.to_i } : {} %>
           <% lazyload_metadata = document.preview_images.first.metadata %>
           <% (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")) %>
+            <% page = preview_images_index[index] || page_blob_struct.new(metadata: lazyload_metadata, url: preview_document_page_path(document.signed_uuid, "#{index}.jpg")) %>
             <div id="<%= "page-#{document.uuid}-#{index}" %>" class="relative">
-              <img loading="lazy" src="<%= page.url %>" width="<%= page.metadata['width'] %>" class="border rounded mb-4" height="<%= page.metadata['height'] %>">
+              <img loading="lazy" src="<%= Docuseal::URL_CACHE.fetch([document.id, document.uuid, index].join(':'), expires_in: 10.minutes) { 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: %>
@@ -121,7 +121,7 @@
               </div>
             <% end %>
             <% if signed_in? && submitter && submitter.phone && !submitter.completed_at && can?(:update, submitter) %>
-              <%= render 'send_sms_button', submitter: %>
+              <%= render 'submissions/send_sms_button', submitter: %>
             <% end %>
             <% if signed_in? && submitter && !submitter.completed_at? && can?(:create, submitter) %>
               <div class="mt-2 mb-1">
@@ -144,10 +144,10 @@
               <div dir="auto">
                 <% if field['type'].in?(%w[signature initials]) %>
                   <div class="w-full bg-base-300 py-1">
-                    <img class="object-contain mx-auto" height="<%= attachments_index[value].metadata['height'] %>" width="<%= attachments_index[value].metadata['width'] %>" src="<%= attachments_index[value].url %>" loading="lazy">
+                    <img class="object-contain mx-auto" style="max-height: <%= field['type'] == 'signature' ? 100 : 50 %>px" height="<%= attachments_index[value].metadata['height'] %>" width="<%= attachments_index[value].metadata['width'] %>" src="<%= attachments_index[value].url %>" loading="lazy">
                   </div>
                 <% elsif field['type'].in?(['image', 'stamp']) %>
-                  <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">
+                  <img class="object-contain mx-auto max-h-28" style="max-height: 200px" height="<%= attachments_index[value].metadata['height'] %>" width="<%= attachments_index[value].metadata['width'] %>" src="<%= attachments_index[value].url %>" loading="lazy">
                 <% elsif field['type'] == 'file' || field['type'] == 'payment' %>
                   <div class="flex flex-col justify-center">
                     <% Array.wrap(value).each do |val| %>

app/views/submissions_preview/completed.html.erb

@@ -0,0 +1,45 @@
+<div class="max-w-md mx-auto px-2 mt-12 mb-4">
+  <div class="space-y-6 mx-auto">
+    <div class="space-y-6">
+      <% if Docuseal.multitenant? %>
+        <div class="flex items-center justify-center">
+          <%= render 'start_form/docuseal_logo' %>
+        </div>
+      <% end %>
+      <div class="flex items-center bg-base-200 rounded-xl p-4 mb-4">
+        <div class="flex items-center">
+          <div class="mr-3">
+            <%= svg_icon('writing_sign', class: 'w-10 h-10') %>
+          </div>
+          <div>
+            <p dir="auto" class="text-lg font-bold mb-1"><%= @submission.template.name %></p>
+            <% if submitter = @submission.submitters.map(&:completed_at).max %>
+              <p dir="auto" class="text-sm"><%= t('signed_on_time', time: l(submitter.to_date, format: :long)) %></p>
+            <% end %>
+          </div>
+        </div>
+      </div>
+    </div>
+    <% if Accounts.can_send_emails?(@submission.account) %>
+      <%= form_for '', url: send_submission_email_index_path, method: :post, html: { class: 'space-y-4', onsubmit: 'event.submitter.disabled = true' } do |f| %>
+        <div dir="auto" class="form-control !mt-0">
+          <%= f.hidden_field :submission_slug, value: @submission.slug %>
+          <%= f.label :email, t('email'), class: 'label' %>
+          <%= f.email_field :email, value: current_user&.email || params[:email], required: true, class: 'base-input', placeholder: t('send_copy_to_email') %>
+        </div>
+        <div dir="auto" class="form-control">
+          <%= f.button button_title(title: t('send_copy_to_email'), disabled_with: t('starting')), class: 'base-button' %>
+        </div>
+      <% end %>
+      <% if Docuseal.multitenant? %>
+        <div class="divider uppercase"><%= t('or') %></div>
+      <% end %>
+    <% end %>
+    <% if Docuseal.multitenant? %>
+      <div>
+        <%= link_to 'Create free account', registration_path, class: 'white-button w-full' %>
+      </div>
+    <% end %>
+  </div>
+</div>
+<%= render 'shared/attribution', link_path: '/start', account: @submission.account %>

app/views/submit_form/archived.html.erb

@@ -11,11 +11,11 @@
           </div>
           <div dir="auto">
             <p class="text-lg font-bold mb-1"><%= @submitter.submission.template.name %></p>
-            <p class="text-sm"><%= t('form_has_been_deleted_by_html', name: @submitter.submission.template.account.name) %></p>
+            <p class="text-sm"><%= t('form_has_been_deleted_by_html', name: @submitter.account.name) %></p>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
-<%= render 'shared/attribution', link_path: '/start' %>
+<%= render 'shared/attribution', link_path: '/start', account: @submitter.account %>

app/views/submit_form/completed.html.erb

@@ -17,7 +17,7 @@
       </div>
     </div>
     <div>
-      <% if Accounts.can_send_emails?(@submitter.submission.template.account) && @submitter.email.present? %>
+      <% if Accounts.can_send_emails?(@submitter.account) && @submitter.email.present? %>
         <%= button_to button_title(title: t('send_copy_to_email'), disabled_with: t('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: 'white-button w-full' %>
         <% if @submitter.submission.template.submitters.size != 1 %>
           <div class="divider uppercase"><%= t('or') %></div>
@@ -25,18 +25,20 @@
           <div class="py-2"></div>
         <% end %>
       <% end %>
-      <download-button data-src="<%= submitter_download_index_path(@submitter.slug) %>" class="base-button w-full">
+      <% if @submitter.completed_at > 30.minutes.ago || (current_user && current_user.account.submitters.exists?(id: @submitter.id)) %>
-        <span class="flex items-center justify-center space-x-2" data-target="download-button.defaultButton">
+        <download-button data-src="<%= submitter_download_index_path(@submitter.slug) %>" class="base-button w-full">
-          <%= svg_icon('download', class: 'w-6 h-6') %>
+          <span class="flex items-center justify-center space-x-2" data-target="download-button.defaultButton">
-          <span><%= t('download_documents') %></span>
+            <%= svg_icon('download', class: 'w-6 h-6') %>
-        </span>
+            <span><%= t('download_documents') %></span>
-        <span class="flex items-center justify-center space-x-2 hidden" data-target="download-button.loadingButton">
+          </span>
-          <%= svg_icon('loader', class: 'w-6 h-6 animate-spin') %>
+          <span class="flex items-center justify-center space-x-2 hidden" data-target="download-button.loadingButton">
-          <span><%= t('downloading') %></span>
+            <%= svg_icon('loader', class: 'w-6 h-6 animate-spin') %>
-        </span>
+            <span><%= t('downloading') %></span>
-      </download-button>
+          </span>
+        </download-button>
+      <% end %>
     </div>
-    <% if @submitter.submission.template.submitters.size == 1 && %w[api embed].exclude?(@submitter.submission.source) %>
+    <% if @submitter.submission.template.submitters.size == 1 && %w[api embed].exclude?(@submitter.submission.source) && @submitter.account.account_configs.find_or_initialize_by(key: AccountConfig::ALLOW_TO_RESUBMIT).value != false && !@submitter.template.archived_at? %>
       <div class="divider uppercase"><%= t('or') %></div>
       <div>
         <%= button_to button_title(title: t('resubmit'), disabled_with: t('resubmit'), icon: svg_icon('reload', class: 'w-6 h-6')), start_form_path(@submitter.submission.template.slug), params: { submitter: { email: @submitter.email, phone: @submitter.phone, name: @submitter.name }, resubmit: @submitter.slug }, method: :put, form: { onsubmit: 'event.submitter.disabled = true' }, class: 'white-button w-full' %>
@@ -44,4 +46,4 @@
     <% end %>
   </div>
 </div>
-<%= render 'shared/attribution', link_path: '/start' %>
+<%= render 'shared/attribution', link_path: '/start', account: @submitter.account %>

app/views/submit_form/show.html.erb

@@ -13,7 +13,7 @@
         <% preview_images_index = document.preview_images.loaded? ? document.preview_images.index_by { |e| e.filename.base.to_i } : {} %>
         <% lazyload_metadata = document.preview_images.last.metadata %>
         <% (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")) %>
+          <% page = preview_images_index[index] || page_blob_struct.new(metadata: lazyload_metadata, url: preview_document_page_path(document.signed_uuid, "#{index}.jpg")) %>
           <div class="relative my-4 shadow-md">
             <img loading="lazy" src="<%= page.url %>" width="<%= page.metadata['width'] %>" height="<%= page.metadata['height'] %>">
             <div id="page-<%= [document.uuid, index].join('-') %>" class="top-0 bottom-0 left-0 right-0 absolute">
@@ -24,13 +24,14 @@
                 <% value = values[field['uuid']].presence || (field['readonly'] ? Submitters::SubmitValues.template_default_value_for_submitter(field['default_value'], @submitter.submission.submitters.find { |e| e.uuid == field['submitter_uuid'] }, with_time: false) : nil) %>
                 <% next if value.blank? %>
                 <% next if !field['readonly'] && field['submitter_uuid'] == @submitter.uuid %>
-                <%= render 'submissions/value', area:, field:, attachments_index:, value:, locale: @submitter.submission.template.account.locale %>
+                <% next if field.dig('preferences', 'formula') && field['submitter_uuid'] == @submitter.uuid %>
+                <%= render 'submissions/value', area:, field:, attachments_index:, value:, locale: @submitter.account.locale %>
               <% end %>
             </div>
           </div>
         <% end %>
       <% end %>
-      <%= render 'shared/attribution', link_path: '/start' %>
+      <%= render 'shared/attribution', link_path: '/start', account: @submitter.account %>
     </div>
   </div>
 </div>

app/views/submitter_mailer/documents_copy_email.html.erb

@@ -1,11 +1,11 @@
 <% if @email_config %>
-  <%= auto_link(simple_format(h(ReplaceEmailVariables.call(@email_config.value['body'], submitter: @submitter)))) %>
+  <%= auto_link(simple_format(h(ReplaceEmailVariables.call(@email_config.value['body'], submitter: @submitter, sig: @sig)))) %>
 <% 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 review and download your copy using:</p>
   <p>
-    <%= link_to @submitter.template.name, submissions_preview_url(@submitter.submission.slug) %>
+    <%= link_to @submitter.template.name, submissions_preview_url(@submitter.submission.slug, { sig: @sig }.compact) %>
   </p>
   <p>
     Thanks,<br><%= @current_account.name %>

app/views/submitter_mailer/invitation_email.html.erb

@@ -1,7 +1,7 @@
 <% if @email_config || @body.present? %>
   <% 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) %>
+  <% if !body.include?(ReplaceEmailVariables::SUBMITTER_LINK) && !body.include?(ReplaceEmailVariables::SUBMITTER_ID) && !body.include?(ReplaceEmailVariables::SUBMISSION_LINK) && !body.include?(ReplaceEmailVariables::TEMPLATE_ID) && !@submitter.submission.source.in?(%w[api embed]) %>
     <p><%= link_to nil, submit_form_url(slug: @submitter.slug, t: SubmissionEvents.build_tracking_param(@submitter, 'click_email')) %></p>
   <% end %>
 <% else %>

app/views/templates/_embedding.html.erb

@@ -0,0 +1,175 @@
+<toggle-visible data-element-ids="[&quot;js_1&quot;,&quot;react_1&quot;,&quot;vue_1&quot;]" class="block relative" data-catalyst="">
+  <ul class="items-center w-full text-sm font-medium text-gray-900 my-4 space-y-2 sm:space-y-0 sm:flex sm:space-x-2">
+    <li class="w-full h-10 text-sm font-medium flex items-center relative group py-3.5">
+      <input type="radio" name="option_1" id="js_radio_1" value="js_1" data-action="change:toggle-visible#trigger" class="relative peer z-10 hidden" checked="checked">
+      <label for="js_radio_1" class="absolute border-neutral-focus space-x-2 border rounded-xl left-0 right-0 top-0 bottom-0 flex items-center justify-center group-hover:bg-neutral group-hover:text-white peer-checked:btn-neutral">
+        <span><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48">
+            <path fill="#ffd600" d="M6,42V6h36v36H6z"></path><path fill="#000001" d="M29.538 32.947c.692 1.124 1.444 2.201 3.037 2.201 1.338 0 2.04-.665 2.04-1.585 0-1.101-.726-1.492-2.198-2.133l-.807-.344c-2.329-.988-3.878-2.226-3.878-4.841 0-2.41 1.845-4.244 4.728-4.244 2.053 0 3.528.711 4.592 2.573l-2.514 1.607c-.553-.988-1.151-1.377-2.078-1.377-.946 0-1.545.597-1.545 1.377 0 .964.6 1.354 1.985 1.951l.807.344C36.452 29.645 38 30.839 38 33.523 38 36.415 35.716 38 32.65 38c-2.999 0-4.702-1.505-5.65-3.368L29.538 32.947zM17.952 33.029c.506.906 1.275 1.603 2.381 1.603 1.058 0 1.667-.418 1.667-2.043V22h3.333v11.101c0 3.367-1.953 4.899-4.805 4.899-2.577 0-4.437-1.746-5.195-3.368L17.952 33.029z"></path>
+          </svg>
+        </span>
+        <span>JavaScript</span>
+      </label>
+    </li>
+    <li class="w-full h-10 text-sm font-medium flex items-center relative group py-3.5">
+      <input type="radio" name="option_1" id="react_radio_1" value="react_1" data-action="change:toggle-visible#trigger" class="relative peer z-10 hidden">
+      <label for="react_radio_1" class="absolute border-neutral-focus space-x-2 border rounded-xl left-0 right-0 top-0 bottom-0 flex items-center justify-center group-hover:bg-neutral group-hover:text-white peer-checked:btn-neutral">
+        <span><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="-11.5 -10.23174 23 20.46348">
+            <circle cx="0" cy="0" r="2.05" fill="#61dafb"></circle>
+            <g stroke="#61dafb" stroke-width="1" fill="none">
+              <ellipse rx="11" ry="4.2"></ellipse>
+              <ellipse rx="11" ry="4.2" transform="rotate(60)"></ellipse>
+              <ellipse rx="11" ry="4.2" transform="rotate(120)"></ellipse>
+            </g>
+          </svg>
+        </span>
+        <span>React</span>
+      </label>
+    </li>
+    <li class="w-full h-10 text-sm font-medium flex items-center relative group py-3.5">
+      <input type="radio" name="option_1" id="vue_radio_1" value="vue_1" data-action="change:toggle-visible#trigger" class="relative peer z-10 hidden">
+      <label for="vue_radio_1" class="absolute border-neutral-focus space-x-2 border rounded-xl left-0 right-0 top-0 bottom-0 flex items-center justify-center group-hover:bg-neutral group-hover:text-white peer-checked:btn-neutral">
+        <span><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" version="1.1" viewBox="0 0 261.76 226.69"><g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883"></path></g><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e"></path></g></g></svg>
+        </span>
+        <span>Vue</span>
+      </label>
+    </li>
+  </ul>
+</toggle-visible>
+<div id="js_1" class="block my-4">
+    <div class="mockup-code overflow-hidden pb-0 mt-4">
+      <span class="top-0 right-0 absolute flex">
+        <%= link_to 'Learn More', console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/embedding/form"), target: '_blank', data: { turbo: false }, class: 'btn btn-ghost text-gray-100 flex', rel: 'noopener' %>
+        <clipboard-copy data-text="<script src=&quot;<%= Docuseal::CDN_URL %>/js/form.js&quot;></script>
+
+<docuseal-form data-src=&quot;<%= start_form_url(slug: template.slug) %>&quot;></docuseal-form>
+">
+  <label class="btn btn-ghost text-gray-100">
+    <input type="radio" class="peer hidden">
+    <span class="peer-checked:hidden flex items-center space-x-2">
+      <%= svg_icon('copy', class: 'w-6 h-6 text-white') %>
+      <span class="hidden md:inline">
+        Copy
+      </span>
+    </span>
+    <span class="hidden peer-checked:flex items-center space-x-2">
+      <%= svg_icon('clipboard_copy', class: 'w-6 h-6 text-white') %>
+      <span class="hidden md:inline">
+        Copied
+      </span>
+    </span>
+  </label>
+</clipboard-copy>
+
+      </span>
+      <pre class="before:!m-0 pl-6 pb-4 overflow-auto"><code class="overflow-hidden w-full"><span style="color: #f4bf75">&lt;script </span><span style="color: #6a9fb5">src=</span><span style="color: #90a959">"<%= Docuseal::CDN_URL %>/js/form.js"</span><span style="color: #f4bf75">&gt;&lt;/script&gt;</span>
+
+<span style="color: #f4bf75">&lt;docuseal-form</span> <span style="color: #6a9fb5">data-src=</span><span style="color: #90a959">"<%= start_form_url(slug: template.slug) %>"</span><span style="color: #f4bf75">&gt;</span><span style="color: #f4bf75">&lt;/docuseal-form&gt;</span>
+</code></pre>
+    </div>
+
+  </div>
+<div id="react_1" class="block my-4 hidden">
+    <div class="mockup-code overflow-hidden pb-0 mt-4">
+      <span class="top-0 right-0 absolute flex">
+        <%= link_to 'Learn More', console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/embedding/form"), target: '_blank', data: { turbo: false }, class: 'btn btn-ghost text-gray-100 flex', rel: 'noopener' %>
+        <clipboard-copy data-text="import React from &quot;react&quot;
+import { DocusealForm } from '@docuseal/react'
+
+export function App() {
+  return (
+    <DocusealForm
+      src=&quot;<%= start_form_url(slug: template.slug) %>&quot;
+    />
+  );
+}
+">
+  <label class="btn btn-ghost text-white">
+    <input type="radio" class="peer hidden">
+    <span class="peer-checked:hidden flex items-center space-x-2">
+      <%= svg_icon('copy', class: 'w-6 h-6 text-white') %>
+      <span class="hidden md:inline">
+        Copy
+      </span>
+    </span>
+    <span class="hidden peer-checked:flex items-center space-x-2">
+      <%= svg_icon('clipboard_copy', class: 'w-6 h-6 text-white') %>
+      <span class="hidden md:inline">
+        Copied
+      </span>
+    </span>
+  </label>
+</clipboard-copy>
+
+      </span>
+      <pre class="before:!m-0 pl-6 pb-4 overflow-auto"><code class="overflow-hidden w-full"><span style="color: #aa759f">import</span> <span style="color: #d0d0d0;background-color: #151515">React</span> <span style="color: #aa759f">from</span> <span style="color: #90a959">"</span><span style="color: #90a959">react</span><span style="color: #90a959">"</span>
+<span style="color: #aa759f">import</span> <span style="color: #d0d0d0">{</span> <span style="color: #d0d0d0;background-color: #151515">DocusealForm</span> <span style="color: #d0d0d0">}</span> <span style="color: #aa759f">from</span> <span style="color: #90a959">'</span><span style="color: #90a959">@docuseal/react</span><span style="color: #90a959">'</span>
+
+<span style="color: #aa759f">export</span> <span style="color: #d28445">function</span> <span style="color: #d0d0d0;background-color: #151515">App</span><span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">{</span>
+  <span style="color: #aa759f">return </span><span style="color: #d0d0d0">(</span>
+    <span style="color: #d0d0d0">&lt;</span><span style="color: #f4bf75">DocusealForm</span>
+      <span style="color: #6a9fb5">src</span><span style="color: #d0d0d0">=</span><span style="color: #90a959">"<%= start_form_url(slug: template.slug) %>"</span>
+    <span style="color: #d0d0d0">/&gt;</span>
+  <span style="color: #d0d0d0">);</span>
+<span style="color: #d0d0d0">}</span>
+</code></pre>
+    </div>
+
+  </div>
+<div id="vue_1" class="block my-4 hidden">
+    <div class="mockup-code overflow-hidden pb-0 mt-4">
+      <span class="top-0 right-0 absolute flex">
+        <%= link_to 'Learn More', console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/embedding/form"), target: '_blank', data: { turbo: false }, class: 'btn btn-ghost text-gray-100 flex', rel: 'noopener' %>
+        <clipboard-copy data-text="<template>
+  <DocusealForm
+    :src=&quot;'<%= start_form_url(slug: template.slug) %>'&quot;
+  />
+</template>
+
+<script>
+import { DocusealForm } from '@docuseal/vue'
+
+export default {
+  name: 'App',
+  components: {
+    DocusealForm
+  }
+}
+</script>
+">
+  <label class="btn btn-ghost text-white">
+    <input type="radio" class="peer hidden">
+    <span class="peer-checked:hidden flex items-center space-x-2">
+      <%= svg_icon('copy', class: 'w-6 h-6 text-white') %>
+      <span class="hidden md:inline">
+        Copy
+      </span>
+    </span>
+    <span class="hidden peer-checked:flex items-center space-x-2">
+      <%= svg_icon('clipboard_copy', class: 'w-6 h-6 text-white') %>
+      <span class="hidden md:inline">
+        Copied
+      </span>
+    </span>
+  </label>
+</clipboard-copy>
+
+      </span>
+      <pre class="before:!m-0 pl-6 pb-4 overflow-auto"><code class="overflow-hidden w-full"><span style="color: #f4bf75">&lt;template&gt;</span>
+  <span style="color: #f4bf75">&lt;DocusealForm</span>
+    <span style="color: #6a9fb5">:src=</span><span style="color: #90a959">"'<%= start_form_url(slug: template.slug) %>'"</span>
+  <span style="color: #f4bf75">/&gt;</span>
+<span style="color: #f4bf75">&lt;/template&gt;</span>
+
+<span style="color: #f4bf75">&lt;</span><span style="color: #f4bf75">script</span><span style="color: #f4bf75">&gt;</span>
+<span style="color: #aa759f">import</span> <span style="color: #d0d0d0">{</span> <span style="color: #d0d0d0;background-color: #151515">DocusealForm</span> <span style="color: #d0d0d0">}</span> <span style="color: #aa759f">from</span> <span style="color: #90a959">'</span><span style="color: #90a959">@docuseal/vue</span><span style="color: #90a959">'</span>
+
+<span style="color: #aa759f">export</span> <span style="color: #aa759f">default</span> <span style="color: #d0d0d0">{</span>
+  <span style="color: #6a9fb5">name</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">'</span><span style="color: #90a959">App</span><span style="color: #90a959">'</span><span style="color: #d0d0d0">,</span>
+  <span style="color: #6a9fb5">components</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0">{</span>
+    <span style="color: #d0d0d0;background-color: #151515">DocusealForm</span>
+  <span style="color: #d0d0d0">}</span>
+<span style="color: #d0d0d0">}</span>
+<span style="color: #f4bf75">&lt;/</span><span style="color: #f4bf75">script</span><span style="color: #f4bf75">&gt;</span>
+</code></pre>
+  </div>
+</div>