fix file link generation

.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 fontforge -lang=py -c 'font1 = fontforge.open("LiberationSans-Regular.ttf"); font2 = fontforge.open("NotoSansArabic-Regular.ttf"); font1.mergeFonts(font2); font1.generate("LiberationSans-Regular.ttf")'
+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
 
 FROM ruby:3.2.2-alpine3.18 as webpack
 
@@ -55,7 +53,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.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)

README.md

@@ -33,17 +33,29 @@ 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)
-- [x] 11 field types available (Signature, Date, File, Checkbox etc.)
-- [x] Multiple submitters per document
-- [x] Automated emails via SMTP
-- [x] Files storage on disk or AWS S3, Google Storage, Azure Cloud
-- [x] Automatic PDF eSignature
-- [x] PDF signature verification
-- [x] Users management
-- [x] Mobile-optimized
-- [x] API and Webhooks for integrations
-- [x] Easy to deploy in minutes
+- PDF form fields builder (WYSIWYG)
+- 12 field types available (Signature, Date, File, Checkbox etc.)
+- Multiple submitters per document
+- Automated emails via SMTP
+- Files storage on disk or AWS S3, Google Storage, Azure Cloud
+- Automatic PDF eSignature
+- PDF signature verification
+- Users management
+- Mobile-optimized
+- 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 text 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 +89,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,6 +7,7 @@ class AccountConfigsController < ApplicationController
   ALLOWED_KEYS = [
     AccountConfig::ALLOW_TYPED_SIGNATURE,
     AccountConfig::FORCE_MFA,
+    AccountConfig::ALLOW_TO_RESUBMIT,
     AccountConfig::ESIGNING_PREFERENCE_KEY
   ].freeze
 

app/controllers/accounts_controller.rb

@@ -37,6 +37,18 @@ class AccountsController < ApplicationController
     render :show, status: :unprocessable_entity
   end
 
+  def destroy
+    authorize!(:manage, current_account)
+
+    true_user.update!(locked_at: Time.current)
+
+    render turbo_stream: turbo_stream.replace(
+      :account_delete_button,
+      html: helpers.tag.p('Your account removal request will be processed within 2 weeks. ' \
+                          'Please contact us if you want to keep your account.')
+    )
+  end
+
   private
 
   def load_account

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, = ApplicationRecord.signed_id_verifier.verified(params[:signed_uuid])
+
+      if blob_uuid.blank?
+        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,41 @@
+# 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])
+
+      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|
-        Submissions::EnsureResultGenerated.call(submitter) if submitter.completed_at?
-
-        Submitters::SerializeForApi.call(submitter)
+      submitters.each do |submitter|
+        if submitter.completed_at? && submitter.documents_attachments.blank?
+          submitter.documents_attachments = Submissions::EnsureResultGenerated.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] } }
@@ -63,12 +69,12 @@ module Api
     end
 
     def create
-      Params::SubmissionCreateValidator.call(params, dry_run: true)
+      Params::SubmissionCreateValidator.call(params, dry_run: !Docuseal.multitenant?)
 
       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
 
@@ -96,7 +110,8 @@ module Api
     def create_submissions(template, params)
       is_send_email = !params[:send_email].in?(['false', false])
 
-      if (emails = (params[:emails] || params[:email]).presence) && params[:submission].blank?
+      if (emails = (params[:emails] || params[:email]).presence) &&
+         (params[:submission].blank? && params[:submitters].blank?)
         Submissions.create_from_emails(template:,
                                        user: current_user,
                                        source: :api,
@@ -117,8 +132,13 @@ module Api
           params:
         )
 
-        Submissions::NormalizeParamUtils.save_default_value_attachments!(attachments,
-                                                                         submissions.flat_map(&:submitters))
+        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
@@ -131,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],
-                        methods: %i[status] },
+                                 created_at updated_at external_id metadata],
+                        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] }
         }
@@ -140,20 +160,27 @@ module Api
     end
 
     def submissions_params
-      key = params.key?(:submission) ? :submission : :submissions
+      permitted_attrs = [
+        :send_email, :send_sms, :bcc_completed, :completed_redirect_url,
+        {
+          message: %i[subject body],
+          submitters: [[:send_email, :send_sms, :completed_redirect_url, :uuid, :name, :email, :role,
+                        :completed, :phone, :application_key, :external_id,
+                        { metadata: {}, values: {}, readonly_fields: [], message: %i[subject body],
+                          fields: [%i[name default_value title description
+                                      readonly validation_pattern invalid_message]] }]]
+        }
+      ]
 
-      params.permit(
-        key => [
-          [:send_email, :send_sms, :bcc_completed, :completed_redirect_url, {
-            message: %i[subject body],
-            submitters: [[:send_email, :send_sms, :completed_redirect_url, :uuid, :name, :email, :role,
-                          :completed, :phone, :application_key,
-                          { values: {}, readonly_fields: [], message: %i[subject body],
-                            fields: [%i[name default_value title description
-                                        readonly validation_pattern invalid_message]] }]]
-          }]
-        ]
-      ).fetch(key, [])
+      if params.key?(:submitters)
+        params.permit(*permitted_attrs)
+      else
+        key = params.key?(:submission) ? :submission : :submissions
+
+        params.permit(
+          key => [permitted_attrs]
+        ).fetch(key, [])
+      end
     end
   end
 end

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_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(
@@ -44,7 +45,7 @@ module Api
 
       Submissions::CreateFromSubmitters.maybe_set_template_fields(@submitter.submission,
                                                                   [normalized_params],
-                                                                  submitter_uuid: @submitter.uuid)
+                                                                  default_submitter_uuid: @submitter.uuid)
 
       assign_submitter_attrs(@submitter, normalized_params)
 
@@ -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,
-        { values: {}, readonly_fields: [], message: %i[subject body],
+        :send_email, :send_sms, :uuid, :name, :email, :role,
+        :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,11 +7,13 @@ module Api
     def create
       authorize!(:manage, @template)
 
-      cloned_template = Templates::Clone.call(@template,
-                                              author: current_user,
-                                              name: params[:name],
-                                              application_key: params[:application_key],
-                                              folder_name: params[:folder_name])
+      cloned_template = Templates::Clone.call(
+        @template,
+        author: current_user,
+        name: params[:name],
+        external_id: params[:external_id].presence || params[:application_key],
+        folder_name: params[:folder_name]
+      )
 
       cloned_template.source = :api
       cloned_template.save!

app/controllers/api/templates_controller.rb

@@ -5,11 +5,7 @@ module Api
     load_and_authorize_resource :template
 
     def index
-      templates = Templates.search(@templates, params[:q])
-
-      templates = params[:archived] ? templates.archived : templates.active
-      templates = templates.where(application_key: params[:application_key]) if params[:application_key].present?
-      templates = templates.joins(:folder).where(folder: { name: params[:folder] }) if params[:folder].present?
+      templates = filter_templates(@templates, params)
 
       templates = paginate(templates.preload(:author, documents_attachments: :blob))
 
@@ -28,10 +24,16 @@ module Api
     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 +51,40 @@ module Api
 
     private
 
+    def filter_templates(templates, params)
+      templates = Templates.search(templates, params[:q])
+      templates = params[:archived] ? templates.archived : templates.active
+      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 serialize_params
       {
+        methods: %i[application_key],
         include: { author: { only: %i[id email first_name last_name] },
-                   documents: { only: %i[id uuid], methods: %i[url filename] } }
+                   documents: { only: %i[id uuid], methods: %i[url preview_image_url filename] } }
       }
     end
 
     def template_params
-      params.require(:template).permit(
+      permit_params = [
         :name,
-        schema: [%i[attachment_uuid name]],
-        submitters: [%i[name uuid]],
-        fields: [[:uuid, :submitter_uuid, :name, :type, :required, :readonly, :default_value,
-                  { preferences: {},
-                    options: [%i[value uuid]],
-                    areas: [%i[x y w h cell_w attachment_uuid option_uuid page]] }]]
-      )
+        { schema: [%i[attachment_uuid name]],
+          submitters: [%i[name uuid]],
+          fields: [[:uuid, :submitter_uuid, :name, :type, :required, :readonly, :default_value,
+                    { preferences: {},
+                      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,13 @@ 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?
+      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
 
     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/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, name: :preview_images) 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/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

@@ -75,6 +75,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,10 @@ class SubmissionsDownloadController < ApplicationController
   skip_before_action :authenticate_user!
   skip_authorization_check
 
+  TTL = 20.minutes
+
   def index
-    submitter = Submitter.find_by(slug: params[:submitter_slug])
+    submitter = Submitter.find_by!(slug: params[:submitter_slug])
 
     Submissions::EnsureResultGenerated.call(submitter)
 
@@ -13,9 +15,18 @@ class SubmissionsDownloadController < ApplicationController
 
     Submissions::EnsureResultGenerated.call(last_submitter)
 
+    return head :not_found unless last_submitter.completed_at?
+
+    if last_submitter.completed_at < TTL.ago &&
+       (current_user.nil? || !current_user.account.submitters.exists?(id: last_submitter.id))
+      Rollbar.info("TTL: #{last_submitter.id}") if defined?(Rollbar)
+
+      return head :not_found
+    end
+
     urls =
       Submitters.select_attachments_for_download(last_submitter).map do |attachment|
-        helpers.rails_blob_url(attachment)
+        ActiveStorage::Blob.proxy_url(attachment.blob)
       end
 
     render json: urls

app/controllers/submissions_preview_controller.rb

@@ -6,9 +6,21 @@ class SubmissionsPreviewController < ApplicationController
 
   PRELOAD_ALL_PAGES_AMOUNT = 200
 
+  TTL = 20.minutes
+
   def show
     @submission = Submission.find_by!(slug: params[:slug])
 
+    if !@submission.submitters.all?(&:completed_at?) && current_user.blank?
+      raise ActionController::RoutingError, 'Not Found'
+    end
+
+    unless submission_valid_ttl?(@submission)
+      Rollbar.info("TTL: #{@submission.id}") if defined?(Rollbar)
+
+      return redirect_to submissions_preview_completed_path(@submission.slug)
+    end
+
     ActiveRecord::Associations::Preloader.new(
       records: [@submission],
       associations: [:template, { template_schema_documents: :blob }]
@@ -26,4 +38,20 @@ class SubmissionsPreviewController < ApplicationController
 
     render 'submissions/show', layout: 'plain'
   end
+
+  def completed
+    @submission = Submission.find_by!(slug: params[:submissions_preview_slug])
+
+    render :completed, layout: 'plain'
+  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/javascript/application.js

@@ -88,7 +88,9 @@ 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',
+      currencies: (this.dataset.currencies || '').split(',').filter(Boolean),
       acceptFileTypes: this.dataset.acceptFileTypes,
       isDirectUpload: this.dataset.isDirectUpload === 'true'
     })

app/javascript/form.js

@@ -15,7 +15,7 @@ window.customElements.define('submission-form', class extends HTMLElement {
       goToLast: this.dataset.goToLast === 'true',
       isDemo: this.dataset.isDemo === 'true',
       attribution: this.dataset.attribution !== 'false',
-      withConfetti: true,
+      withConfetti: this.dataset.withConfetti !== 'false',
       withTypedSignature: this.dataset.withTypedSignature !== 'false',
       values: reactive(JSON.parse(this.dataset.values)),
       completedButton: JSON.parse(this.dataset.completedButton),

app/javascript/submission_form/area.vue

@@ -1,9 +1,9 @@
 <template>
   <div
-    class="flex absolute lg:text-base"
+    class="flex absolute lg:text-base -outline-offset-1"
     dir="auto"
     :style="computedStyle"
-    :class="{ 'text-[1.5vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars, 'cursor-default': !submittable, 'bg-red-100 border cursor-pointer ': submittable, 'border-red-100': !isActive && submittable, 'bg-opacity-80': !isActive && !isValueSet && submittable, 'border-red-500 border-dashed border-2 z-10': isActive && submittable, 'bg-opacity-40': (isActive || isValueSet) && submittable }"
+    :class="{ 'text-[1.5vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars, 'cursor-default': !submittable, 'border border-red-100 bg-red-100 cursor-pointer': submittable, 'border border-red-100': !isActive && submittable, 'bg-opacity-80': !isActive && !isValueSet && submittable, 'outline-red-500 outline-dashed outline-2 z-10': isActive && submittable, 'bg-opacity-40': (isActive || isValueSet) && submittable }"
   >
     <div
       v-if="!isActive && !isValueSet && field.type !== 'checkbox' && submittable && !area.option_uuid"
@@ -81,7 +81,8 @@
     </div>
     <div
       v-else-if="field.type === 'checkbox'"
-      class="w-full p-[0.2vw] flex items-center justify-center"
+      class="w-full p-[1px] flex items-center justify-center"
+      @click="$event.target.querySelector('input')?.click()"
     >
       <input
         v-if="submittable"
@@ -100,14 +101,15 @@
     </div>
     <div
       v-else-if="field.type === 'radio' && area.option_uuid"
-      class="w-full p-[0.2vw] flex items-center justify-center"
+      class="w-full p-[1px] flex items-center justify-center"
+      @click="$event.target.querySelector('input')?.click()"
     >
       <input
         v-if="submittable"
         type="radio"
         :value="false"
-        class="aspect-square base-radio"
-        :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
+        class="aspect-square checked:checkbox checked:checkbox-xs"
+        :class="{ 'base-radio': !modelValue || modelValue !== optionValue(option), '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
         :checked="!!modelValue && modelValue === optionValue(option)"
         @click="$emit('update:model-value', optionValue(option))"
       >
@@ -119,7 +121,8 @@
     </div>
     <div
       v-else-if="field.type === 'multiple' && area.option_uuid"
-      class="w-full p-[0.2vw] flex items-center justify-center"
+      class="w-full p-[1px] flex items-center justify-center"
+      @click="$event.target.querySelector('input')?.click()"
     >
       <input
         v-if="submittable"
@@ -233,20 +236,20 @@ export default {
   computed: {
     fieldNames () {
       return {
-        text: 'Text',
-        cells: 'Text',
-        signature: 'Signature',
-        date: 'Date',
-        image: 'Image',
-        stamp: 'Stamp',
-        initials: 'Initials',
-        file: 'File',
-        select: 'Select',
-        checkbox: 'Checkbox',
-        radio: 'Radio',
-        multiple: 'Multiple Select',
-        phone: 'Phone',
-        payment: 'Payment'
+        text: this.t('text'),
+        signature: this.t('signature'),
+        initials: this.t('initials'),
+        date: this.t('date'),
+        image: this.t('image'),
+        file: this.t('file'),
+        select: this.t('select'),
+        checkbox: this.t('checkbox'),
+        multiple: this.t('multiple'),
+        radio: this.t('radio'),
+        cells: this.t('cells'),
+        stamp: this.t('stamp'),
+        payment: this.t('payment'),
+        phone: this.t('phone')
       }
     },
     option () {
@@ -304,7 +307,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/attachment_step.vue

@@ -42,7 +42,7 @@
       >
     </template>
     <FileDropzone
-      :message="`Upload ${field.name || 'Attachments'}${field.required ? '' : ' (optional)'}`"
+      :message="`${t('upload')} ${field.name || t('files')}${field.required ? '' : ` (${t('optional')})`}`"
       :submitter-slug="submitterSlug"
       :is-direct-upload="isDirectUpload"
       :multiple="true"
@@ -62,6 +62,7 @@ export default {
     IconPaperclip,
     IconTrashX
   },
+  inject: ['t'],
   props: {
     field: {
       type: Object,

app/javascript/submission_form/date_step.vue

@@ -4,7 +4,7 @@
       <label
         :for="field.uuid"
         class="label text-2xl"
-      >{{ field.name || t('date') }}
+      >{{ field.name && showFieldNames ? field.name : t('date') }}
         <template v-if="!field.required">({{ t('optional') }})</template>
       </label>
       <button
@@ -46,6 +46,11 @@ export default {
       type: Object,
       required: true
     },
+    showFieldNames: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     modelValue: {
       type: String,
       required: false,

app/javascript/submission_form/form.vue

@@ -4,7 +4,7 @@
     :steps="stepFields"
     :values="values"
     :attachments-index="attachmentsIndex"
-    :with-label="!isAnonymousChecboxes"
+    :with-label="!isAnonymousChecboxes && showFieldNames"
     :current-step="currentStepFields"
     @focus-step="[saveStep(), goToStep($event, false, true), currentField.type !== 'checkbox' ? isFormVisible = true : '']"
   />
@@ -32,7 +32,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 +40,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
@@ -64,6 +67,7 @@
             <TextStep
               :key="currentField.uuid"
               v-model="values[currentField.uuid]"
+              :show-field-names="showFieldNames"
               :field="currentField"
               @focus="scrollIntoField(currentField)"
             />
@@ -72,12 +76,13 @@
             v-else-if="currentField.type === 'date'"
             :key="currentField.uuid"
             v-model="values[currentField.uuid]"
+            :show-field-names="showFieldNames"
             :field="currentField"
             @focus="scrollIntoField(currentField)"
           />
           <div v-else-if="currentField.type === 'select'">
             <label
-              v-if="currentField.name"
+              v-if="showFieldNames && currentField.name"
               :for="currentField.uuid"
               dir="auto"
               class="label text-2xl mb-2"
@@ -116,15 +121,28 @@
           </div>
           <div v-else-if="currentField.type === 'radio'">
             <label
-              v-if="currentField.name"
+              v-if="showFieldNames && currentField.name"
               :for="currentField.uuid"
               dir="auto"
               class="label text-2xl mb-2"
             >{{ currentField.name }}
               <template v-if="!currentField.required">({{ t('optional') }})</template>
             </label>
-            <div class="flex w-full">
-              <div class="space-y-3.5 mx-auto">
+            <div class="flex w-full max-h-44 overflow-y-auto">
+              <div
+                v-if="!showFieldNames || (currentField.options.every((e) => !e.value) && currentField.options.length > 4)"
+                class="text-xl px-1"
+              >
+                <span
+                  @click="scrollIntoField(currentField)"
+                >
+                  {{ t('complete_hightlighted_checkboxes_and_click') }} <span class="font-semibold">{{ stepFields.length === currentStep + 1 ? t('submit') : t('next') }}</span>.
+                </span>
+              </div>
+              <div
+                class="space-y-3.5 mx-auto"
+                :class="{ hidden: !showFieldNames || (currentField.options.every((e) => !e.value) && currentField.options.length > 4) }"
+              >
                 <div
                   v-for="(option, index) in currentField.options"
                   :key="option.uuid"
@@ -154,6 +172,8 @@
             v-else-if="currentField.type === 'multiple'"
             :key="currentField.uuid"
             v-model="values[currentField.uuid]"
+            :show-field-names="showFieldNames"
+            :is-last-step="stepFields.length === currentStep + 1"
             :field="currentField"
           />
           <div
@@ -168,7 +188,7 @@
             <div
               class="space-y-3.5 mx-auto"
             >
-              <template v-if="isAnonymousChecboxes">
+              <template v-if="isAnonymousChecboxes || !showFieldNames">
                 <span class="text-xl">
                   {{ t('complete_hightlighted_checkboxes_and_click') }} <span class="font-semibold">{{ stepFields.length === currentStep + 1 ? t('submit') : t('next') }}</span>.
                 </span>
@@ -228,6 +248,7 @@
             :is-direct-upload="isDirectUpload"
             :attachments-index="attachmentsIndex"
             :submitter-slug="submitterSlug"
+            :show-field-names="showFieldNames"
             @attached="[attachments.push($event), scrollIntoField(currentField)]"
           />
           <SignatureStep
@@ -236,11 +257,12 @@
             :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"
             :submitter-slug="submitterSlug"
+            :show-field-names="showFieldNames"
             @attached="attachments.push($event)"
             @start="scrollIntoField(currentField)"
             @minimize="isFormVisible = false"
@@ -254,6 +276,7 @@
             :previous-value="previousInitialsValue"
             :is-direct-upload="isDirectUpload"
             :attachments-index="attachmentsIndex"
+            :show-field-names="showFieldNames"
             :submitter-slug="submitterSlug"
             @attached="attachments.push($event)"
             @start="scrollIntoField(currentField)"
@@ -276,6 +299,7 @@
             :key="currentField.uuid"
             v-model="values[currentField.uuid]"
             :field="currentField"
+            :show-field-names="showFieldNames"
             :default-value="submitter.phone"
             :submitter-slug="submitterSlug"
             @focus="scrollIntoField(currentField)"
@@ -376,7 +400,7 @@ import DateStep from './date_step'
 import FormCompleted from './completed'
 import { IconInnerShadowTop, IconArrowsDiagonal, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
 import AppearsOn from './appears_on'
-import { t } from './i18n'
+import i18n from './i18n'
 
 export default {
   name: 'SubmissionForm',
@@ -401,6 +425,7 @@ export default {
     return {
       baseUrl: this.baseUrl,
       scrollIntoArea: this.scrollIntoArea,
+      scrollIntoField: this.scrollIntoField,
       t: this.t
     }
   },
@@ -431,6 +456,11 @@ export default {
       required: false,
       default: false
     },
+    showFieldNames: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     withTypedSignature: {
       type: Boolean,
       required: false,
@@ -481,11 +511,21 @@ export default {
       required: false,
       default: true
     },
+    language: {
+      type: String,
+      required: false,
+      default: ''
+    },
     values: {
       type: Object,
       required: false,
       default: () => ({})
     },
+    i18n: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
     withSendCopyButton: {
       type: Boolean,
       required: false,
@@ -522,6 +562,9 @@ export default {
     currentStepFields () {
       return this.stepFields[this.currentStep]
     },
+    browserLanguage () {
+      return (navigator.language || navigator.userLanguage || 'en').split('-')[0]
+    },
     queryParams () {
       return new URLSearchParams(window.location.search)
     },
@@ -531,11 +574,6 @@ export default {
     submitterSlug () {
       return this.submitter.slug
     },
-    previousSignatureValue () {
-      const signatureField = [...this.fields].reverse().find((field) => field.type === 'signature' && !!this.values[field.uuid])
-
-      return this.values[signatureField?.uuid]
-    },
     previousInitialsValue () {
       const initialsField = [...this.fields].reverse().find((field) => field.type === 'initials' && !!this.values[field.uuid])
 
@@ -586,7 +624,7 @@ export default {
 
     this.fields.forEach((field) => {
       if (field.default_value && !field.readonly) {
-        this.values[field.uuid] = field.default_value
+        this.values[field.uuid] ||= field.default_value
       }
     })
 
@@ -639,7 +677,9 @@ export default {
     })
   },
   methods: {
-    t,
+    t (key) {
+      return this.i18n[key] || i18n[this.language?.toLowerCase()]?.[key] || i18n[this.browserLanguage]?.[key] || i18n.en[key] || key
+    },
     maybeTrackEmailClick () {
       const { queryParams } = this
 
@@ -699,6 +739,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

app/javascript/submission_form/i18n.js

@@ -1,4 +1,20 @@
 const en = {
+  text: 'Text',
+  signature: 'Signature',
+  initials: 'Initials',
+  date: 'Date',
+  image: 'Image',
+  take_photo: 'Take photo',
+  file: 'File',
+  select: 'Select',
+  checkbox: 'Checkbox',
+  multiple: 'Multiple',
+  radio: 'Radio',
+  cells: 'Cells',
+  stamp: 'Stamp',
+  minimize: 'Minimize',
+  payment: 'Payment',
+  phone: 'Phone',
   submit_form: 'Submit Form',
   type_here_: 'Type here...',
   optional: 'optional',
@@ -13,8 +29,6 @@ const en = {
   or_drag_and_drop_files: 'or drag and drop files',
   send_copy_via_email: 'Send copy via email',
   download: 'Download',
-  signature: 'Signature',
-  initials: 'Initials',
   clear: 'Clear',
   redraw: 'Redraw',
   draw_initials: 'Draw initials',
@@ -40,13 +54,31 @@ const en = {
   draw: 'Draw',
   type: 'Type',
   type_text: 'Type text',
-  date: 'Date',
   email_has_been_sent: 'Email has been sent',
   processing: 'Processing',
-  pay_with_strip: 'Pay with Stripe'
+  pay_with_strip: 'Pay with Stripe',
+  reupload: 'Reupload',
+  upload: 'Upload',
+  files: 'Files'
 }
 
 const es = {
+  minimize: 'Minimizar',
+  text: 'Texto',
+  signature: 'Firma',
+  initials: 'Iniciales',
+  date: 'Fecha',
+  image: 'Imagen',
+  file: 'Archivo',
+  select: 'Seleccionar',
+  checkbox: 'Casilla',
+  multiple: 'Múltiple',
+  radio: 'Radio',
+  cells: 'Celdas',
+  stamp: 'Sello',
+  payment: 'Pago',
+  phone: 'Teléfono',
+  take_photo: 'Tomar foto',
   submit_form: 'Enviar Formulario',
   type_here_: 'Escribe aquí...',
   optional: 'opcional',
@@ -60,8 +92,6 @@ const es = {
   or_drag_and_drop_files: 'o arrastra y suelta archivos',
   send_copy_via_email: 'Enviar copia por correo electrónico',
   download: 'Descargar',
-  signature: 'Firma',
-  initials: 'Iniciales',
   clear: 'Borrar',
   redraw: 'Redibujar',
   draw_initials: 'Dibujar iniciales',
@@ -81,7 +111,6 @@ const es = {
   verification_code_has_been_resent: 'El código de verificación ha sido reenviado por SMS',
   please_fill_all_required_fields: 'Por favor, complete todos los campos obligatorios',
   set_today: 'Establecer Hoy',
-  date: 'Fecha',
   toggle_multiline_text: 'Alternar Texto Multilínea',
   draw_signature: 'Dibujar firma',
   type_initial: 'Escribir iniciales',
@@ -90,15 +119,34 @@ const es = {
   type_text: 'Escribir texto',
   email_has_been_sent: 'El correo electrónico ha sido enviado',
   processing: 'Procesando',
-  pay_with_strip: 'Pagar con Stripe'
+  pay_with_strip: 'Pagar con Stripe',
+  reupload: 'Volver a subir',
+  upload: 'Subir',
+  files: 'Archivos'
 }
 
 const it = {
+  minimize: 'Minimizza',
+  text: 'Testo',
+  signature: 'Firma',
+  initials: 'Iniziali',
+  date: 'Data',
+  image: 'Immagine',
+  file: 'File',
+  select: 'Seleziona',
+  checkbox: 'Casella di controllo',
+  multiple: 'Multiplo',
+  radio: 'Radio',
+  cells: 'Celle',
+  stamp: 'Timbro',
+  payment: 'Pagamento',
+  phone: 'Telefono',
   submit_form: 'Invia Modulo',
   type_here_: 'Digita qui...',
   optional: 'opzionale',
   appears_on: 'Compare su',
   page: 'Pagina',
+  take_photo: 'Scattare una foto',
   select_your_option: 'Seleziona la tua opzione',
   complete_hightlighted_checkboxes_and_click: 'Completa le caselle evidenziate e fai clic',
   submit: 'invia',
@@ -107,8 +155,6 @@ const it = {
   or_drag_and_drop_files: 'oppure trascina e rilascia i file',
   send_copy_via_email: 'Invia copia via email',
   download: 'Scarica',
-  signature: 'Firma',
-  initials: 'Iniziali',
   clear: 'Cancella',
   redraw: 'Ridisegna',
   draw_initials: 'Disegna iniziali',
@@ -128,7 +174,6 @@ const it = {
   verification_code_has_been_resent: 'Il codice di verifica è stato rinviato tramite SMS',
   please_fill_all_required_fields: 'Si prega di compilare tutti i campi obbligatori',
   set_today: 'Imposta Oggi',
-  date: 'Data',
   draw_signature: 'Disegna firma',
   type_initial: 'Inserisci iniziali',
   draw: 'Disegna',
@@ -137,15 +182,34 @@ const it = {
   toggle_multiline_text: 'Attiva Testo Multilinea',
   email_has_been_sent: "L'email è stata inviata",
   processing: 'Elaborazione',
-  pay_with_strip: 'Paga con Stripe'
+  pay_with_strip: 'Paga con Stripe',
+  reupload: 'Ricarica',
+  upload: 'Carica',
+  files: 'File'
 }
 
 const de = {
+  minimize: 'Minimieren',
+  text: 'Text',
+  signature: 'Unterschrift',
+  initials: 'Initialen',
+  date: 'Datum',
+  image: 'Bild',
+  file: 'Datei',
+  select: 'Auswählen',
+  checkbox: 'Checkbox',
+  multiple: 'Mehrere',
+  radio: 'Radio',
+  cells: 'Zellen',
+  stamp: 'Stempel',
+  payment: 'Zahlung',
+  phone: 'Telefon',
   submit_form: 'Formular absenden',
   type_here_: 'Hier eingeben...',
   optional: 'optional',
   appears_on: 'Erscheint auf',
   page: 'Seite',
+  take_photo: 'Foto aufnehmen',
   select_your_option: 'Wähle deine Option',
   complete_hightlighted_checkboxes_and_click: 'Markierte Kontrollkästchen ausfüllen und klicken',
   submit: 'absenden',
@@ -154,8 +218,6 @@ const de = {
   or_drag_and_drop_files: 'oder Dateien hierher ziehen und ablegen',
   send_copy_via_email: 'Kopie per E-Mail senden',
   download: 'Herunterladen',
-  signature: 'Unterschrift',
-  initials: 'Initialen',
   clear: 'Löschen',
   redraw: 'Neu zeichnen',
   draw_initials: 'Initialen zeichnen',
@@ -175,7 +237,6 @@ const de = {
   verification_code_has_been_resent: 'Die Verifizierungscode wurde erneut per SMS gesendet',
   please_fill_all_required_fields: 'Bitte füllen Sie alle erforderlichen Felder aus',
   set_today: 'Heute einstellen',
-  date: 'Datum',
   draw_signature: 'Unterschrift zeichnen',
   type_initial: 'Initialen eingeben',
   draw: 'Zeichnen',
@@ -184,15 +245,34 @@ const de = {
   toggle_multiline_text: 'Mehrzeiligen Text umschalten',
   email_has_been_sent: 'Die E-Mail wurde gesendet',
   processing: 'Verarbeitung',
-  pay_with_strip: 'Mit Stripe bezahlen'
+  pay_with_strip: 'Mit Stripe bezahlen',
+  reupload: 'Erneut hochladen',
+  upload: 'Hochladen',
+  files: 'Dateien'
 }
 
 const fr = {
+  minimize: 'Réduire',
+  text: 'Texte',
+  signature: 'Signature',
+  initials: 'Initiales',
+  date: 'Date',
+  image: 'Image',
+  file: 'Fichier',
+  select: 'Choisir',
+  checkbox: 'Coche',
+  multiple: 'Multiple',
+  radio: 'Radio',
+  cells: 'Cellules',
+  stamp: 'Tampon',
+  payment: 'Paiement',
+  phone: 'Téléphone',
   submit_form: 'Envoyer le Formulaire',
   type_here_: 'Tapez ici...',
   optional: 'facultatif',
   appears_on: 'Apparaît sur',
   page: 'Page',
+  take_photo: 'Prendre une photo',
   select_your_option: 'Sélectionnez votre option',
   complete_hightlighted_checkboxes_and_click: 'Complétez les cases à cocher en surbrillance et cliquez',
   submit: 'envoyer',
@@ -201,8 +281,6 @@ const fr = {
   or_drag_and_drop_files: 'ou faites glisser-déposer les fichiers',
   send_copy_via_email: 'Envoyer une copie par e-mail',
   download: 'Télécharger',
-  signature: 'Signature',
-  initials: 'Initiales',
   clear: 'Effacer',
   redraw: 'Redessiner',
   draw_initials: 'Dessiner les initiales',
@@ -222,7 +300,6 @@ const fr = {
   verification_code_has_been_resent: 'Le code de vérification a été renvoyé par SMS',
   please_fill_all_required_fields: 'Veuillez remplir tous les champs obligatoires',
   set_today: "Définir Aujourd'hui",
-  date: 'Date',
   draw_signature: 'Dessiner une signature',
   type_initial: 'Saisir les initiales',
   draw: 'Dessiner',
@@ -231,10 +308,28 @@ const fr = {
   toggle_multiline_text: 'Basculer le Texte Multiligne',
   email_has_been_sent: "L'email a été envoyé",
   processing: 'Traitement',
-  pay_with_strip: 'Paiement avec Stripe'
+  pay_with_strip: 'Paiement avec Stripe',
+  reupload: 'Recharger',
+  upload: 'Télécharger',
+  files: 'Fichiers'
 }
 
 const pl = {
+  minimize: 'Zminimalizuj',
+  text: 'Tekst',
+  signature: 'Podpis',
+  initials: 'Inicjały',
+  date: 'Data',
+  image: 'Obraz',
+  file: 'Plik',
+  select: 'Wybierz',
+  checkbox: 'Pole wyboru',
+  multiple: 'Wielokrotne',
+  radio: 'Radio',
+  cells: 'Komórki',
+  stamp: 'Pieczątka',
+  payment: 'Płatność',
+  phone: 'Telefon',
   submit_form: 'Wyślij Formularz',
   type_here_: 'Wpisz tutaj...',
   optional: 'opcjonalny',
@@ -244,12 +339,11 @@ const pl = {
   complete_hightlighted_checkboxes_and_click: 'Wypełnij zaznaczone pola wyboru i kliknij',
   submit: 'wyślij',
   next: 'dalej',
+  take_photo: 'Zrób zdjęcie',
   click_to_upload: 'Kliknij, aby przesłać',
   or_drag_and_drop_files: 'lub przeciągnij i upuść pliki',
   send_copy_via_email: 'Wyślij kopię drogą mailową',
   download: 'Pobierz',
-  signature: 'Podpis',
-  initials: 'Inicjały',
   clear: 'Wyczyść',
   redraw: 'Przerysuj',
   draw_initials: 'Narysuj inicjały',
@@ -269,7 +363,6 @@ const pl = {
   verification_code_has_been_resent: 'Kod weryfikacyjny został ponownie wysłany',
   please_fill_all_required_fields: 'Proszę wypełnić wszystkie wymagane pola',
   set_today: 'Ustaw Dziś',
-  date: 'Data',
   draw_signature: 'Rysuj podpis',
   type_initial: 'Wprowadź inicjały',
   draw: 'Rysuj',
@@ -278,15 +371,34 @@ const pl = {
   toggle_multiline_text: 'Przełącz Tekst Wielolinijkowy',
   email_has_been_sent: 'E-mail został wysłany',
   processing: 'Przetwarzanie',
-  pay_with_strip: 'Płatność za pomocą Stripe'
+  pay_with_strip: 'Płatność za pomocą Stripe',
+  reupload: 'Ponowne przesłanie',
+  upload: 'Przesyłanie',
+  files: 'Pliki'
 }
 
 const uk = {
+  minimize: 'Зменшити',
+  text: 'Текст',
+  signature: 'Підпис',
+  initials: 'Ініціали',
+  date: 'Дата',
+  image: 'Зображення',
+  file: 'Файл',
+  select: 'Вибрати',
+  checkbox: 'Прапорець',
+  multiple: 'Множинний',
+  radio: 'Радіо',
+  cells: 'Клітинки',
+  stamp: 'Штамп',
+  payment: 'Платіж',
+  phone: 'Телефон',
   submit_form: 'Надіслати Форму',
   type_here_: 'Введіть тут',
   optional: 'необов’язково',
   appears_on: "З'являється на",
   page: 'Сторінка',
+  take_photo: 'Зробити фото',
   select_your_option: 'Виберіть варіант',
   complete_hightlighted_checkboxes_and_click: 'Заповніть позначені прапорці та натисніть',
   submit: 'надіслати',
@@ -295,8 +407,6 @@ const uk = {
   or_drag_and_drop_files: 'або перетягніть файли сюди',
   send_copy_via_email: 'Надіслати копію електронною поштою',
   download: 'Завантажити',
-  signature: 'Підпис',
-  initials: 'Ініціали',
   clear: 'Очистити',
   redraw: 'Перемалювати',
   draw_initials: 'Намалювати ініціали',
@@ -316,7 +426,6 @@ const uk = {
   verification_code_has_been_resent: 'Код підтвердження був повторно надісланий',
   please_fill_all_required_fields: "Будь ласка, заповніть всі обов'язкові поля",
   set_today: 'Задати Сьогодні',
-  date: 'Дата',
   draw_signature: 'Намалюйте підпис',
   type_initial: 'Введіть ініціали',
   draw: 'Підпис',
@@ -325,16 +434,35 @@ const uk = {
   toggle_multiline_text: 'Перемкнути Багаторядковий Текст',
   email_has_been_sent: 'Електронний лист був відправлений',
   processing: 'Обробка',
-  pay_with_strip: 'Сплатити за допомогою Stripe'
+  pay_with_strip: 'Сплатити за допомогою Stripe',
+  reupload: 'Перезавантажити',
+  upload: 'Завантажити',
+  files: 'Файли'
 }
 
 const cs = {
+  minimize: 'Minimalizovat',
+  text: 'Text',
+  signature: 'Podpis',
+  initials: 'Iniciály',
+  date: 'Datum',
+  image: 'Obrázek',
+  file: 'Soubor',
+  select: 'Vybrat',
+  checkbox: 'Zaškrtávací políčko',
+  multiple: 'Více možností',
+  radio: 'Rádio',
+  cells: 'Buňky',
+  stamp: 'Razítko',
+  payment: 'Platba',
+  phone: 'Telefon',
   submit_form: 'Odeslat formulář',
   type_here_: 'Zadejte zde',
   optional: 'volitelné',
   appears_on: 'Zobrazuje se na',
   page: 'Stránka',
   select_your_option: 'Vyberte svou volbu',
+  take_photo: 'Fotit',
   complete_hightlighted_checkboxes_and_click: 'Označte zvýrazněné zaškrtávací políčka a klikněte na',
   submit: 'odeslat',
   next: 'další',
@@ -342,8 +470,6 @@ const cs = {
   or_drag_and_drop_files: 'nebo přetáhněte soubory sem',
   send_copy_via_email: 'Odeslat kopii e-mailem',
   download: 'Stáhnout',
-  signature: 'Podpis',
-  initials: 'Iniciály',
   clear: 'Smazat',
   redraw: 'Překreslit',
   draw_initials: 'Nakreslit iniciály',
@@ -363,7 +489,6 @@ const cs = {
   verification_code_has_been_resent: 'Ověřovací kód byl znovu odeslán',
   please_fill_all_required_fields: 'Prosím vyplňte všechny povinné položky',
   set_today: 'Nastavit Dnes',
-  date: 'Datum',
   draw_signature: 'Nakreslit podpis',
   type_initial: 'Zadat iniciály',
   draw: 'Kreslit',
@@ -372,15 +497,34 @@ const cs = {
   toggle_multiline_text: 'Přepnout Víceřádkový Text',
   email_has_been_sent: 'E-mail byl odeslán',
   processing: 'Zpracování',
-  pay_with_strip: 'Zaplacení přes Stripe'
+  pay_with_strip: 'Zaplacení přes Stripe',
+  reupload: 'Znovu nahrát',
+  upload: 'Nahrát',
+  files: 'Soubory'
 }
 
 const pt = {
+  minimize: 'Minimizar',
+  text: 'Texto',
+  signature: 'Assinatura',
+  initials: 'Iniciais',
+  date: 'Data',
+  image: 'Imagem',
+  file: 'Arquivo',
+  select: 'Selecionar',
+  checkbox: 'Caixa',
+  multiple: 'Múltiplo',
+  radio: 'Rádio',
+  cells: 'Células',
+  stamp: 'Carimbo',
+  payment: 'Pagamento',
+  phone: 'Telefone',
   submit_form: 'Enviar Formulário',
   type_here_: 'Digite aqui',
   optional: 'opcional',
   appears_on: 'Aparece em',
   page: 'Página',
+  take_photo: 'Tirar foto',
   select_your_option: 'Selecione sua opção',
   complete_hightlighted_checkboxes_and_click: 'Complete as caixas de seleção destacadas e clique',
   submit: 'enviar',
@@ -389,8 +533,6 @@ const pt = {
   or_drag_and_drop_files: 'ou arraste e solte arquivos',
   send_copy_via_email: 'Enviar cópia por e-mail',
   download: 'Baixar',
-  signature: 'Assinatura',
-  initials: 'Iniciais',
   clear: 'Limpar',
   redraw: 'Redesenhar',
   draw_initials: 'Desenhar iniciais',
@@ -410,7 +552,6 @@ const pt = {
   verification_code_has_been_resent: 'O código de verificação foi reenviado via SMS',
   please_fill_all_required_fields: 'Por favor, preencha todos os campos obrigatórios',
   set_today: 'Definir Hoje',
-  date: 'Data',
   draw_signature: 'Desenhar assinatura',
   type_initial: 'Inserir iniciais',
   draw: 'Desenhar',
@@ -419,16 +560,35 @@ const pt = {
   toggle_multiline_text: 'Alternar Texto Multilinha',
   email_has_been_sent: 'Email enviado',
   processing: 'Processamento',
-  pay_with_strip: 'Pagar com Stripe'
+  pay_with_strip: 'Pagar com Stripe',
+  reupload: 'Reenviar',
+  upload: 'Carregar',
+  files: 'Arquivos'
 }
 
 const he = {
+  minimize: 'לקטן',
+  text: 'טקסט',
+  signature: 'חתימה',
+  initials: 'ראשי תיקיות',
+  date: 'תאריך',
+  image: 'תמונה',
+  file: 'קובץ',
+  select: 'בחר',
+  checkbox: 'תיק בחירה',
+  multiple: 'רב ערכים',
+  radio: 'רדיו',
+  cells: 'תאים',
+  stamp: 'חותמת',
+  payment: 'תשלום',
+  phone: 'טלפון',
   submit_form: 'שלח טופס',
   type_here_: 'הקלד כאן',
   optional: 'אופציונלי',
   option: 'אפשרות',
   appears_on: 'מופיע ב',
   page: 'עמוד',
+  take_photo: 'צלם תמונה',
   select_your_option: 'בחר את האפשרות שלך',
   complete_hightlighted_checkboxes_and_click: 'השלם את תיבות הסימון המודגשות ולחץ',
   submit: 'שליחה',
@@ -437,8 +597,6 @@ const he = {
   or_drag_and_drop_files: 'או גרור ושחרר קבצים',
   send_copy_via_email: 'שלח עותק באמצעות אימייל',
   download: 'הורדה',
-  signature: 'חתימה',
-  initials: 'ציוני ראשי תיבות',
   clear: 'נקה',
   redraw: 'צייר מחדש',
   draw_initials: 'צייר ציוני ראשי תיבות',
@@ -464,17 +622,78 @@ const he = {
   draw: 'צייר',
   type: 'הקלד',
   type_text: 'הקלד טקסט',
-  date: 'תאריך',
   email_has_been_sent: 'האימייל נשלח',
   processing: 'מעבד',
-  pay_with_strip: 'שלם עם סטרייפ'
+  pay_with_strip: 'שלם עם סטרייפ',
+  reupload: 'העלה שוב',
+  upload: 'העלאה',
+  files: 'קבצים'
 }
 
-const i18n = { en, es, it, de, fr, pl, uk, cs, pt, he }
+const nl = {
+  minimize: 'Minimaliseren',
+  text: 'Tekst',
+  signature: 'Handtekening',
+  initials: 'Initialen',
+  date: 'Datum',
+  image: 'Afbeelding',
+  take_photo: 'Maak een foto',
+  file: 'Bestand',
+  select: 'Selecteer',
+  checkbox: 'Aankruisvakje',
+  multiple: 'Meerdere',
+  radio: 'Radio',
+  cells: 'Cellen',
+  stamp: 'Stempel',
+  payment: 'Betaling',
+  phone: 'Telefoon',
+  submit_form: 'Formulier verzenden',
+  type_here_: 'Typ hier...',
+  optional: 'Optioneel',
+  option: 'Optie',
+  appears_on: 'Verschijnt op',
+  page: 'Pagina',
+  select_your_option: 'Selecteer uw optie',
+  complete_hightlighted_checkboxes_and_click: 'Voltooi de gemarkeerde selectievakjes en klik',
+  submit: 'Voltooien',
+  next: 'Volgende',
+  click_to_upload: 'Klik om te uploaden',
+  or_drag_and_drop_files: 'of sleep en plaats bestanden',
+  send_copy_via_email: 'Stuur kopie per e-mail',
+  download: 'Downloaden',
+  clear: 'Wissen',
+  redraw: 'Opnieuw tekenen',
+  draw_initials: 'Initialen tekenen',
+  type_signature_here: 'Typ hier uw handtekening',
+  type_initial_here: 'Typ hier uw initialen',
+  form_has_been_completed: 'Formulier is voltooid!',
+  create_a_free_account: 'Maak een gratis account aan',
+  signed_with: 'Ondertekend met',
+  please_check_the_box_to_continue: 'Vink het vakje aan om door te gaan',
+  open_source_documents_software: 'Open source documenten software',
+  verified_phone_number: 'Geverifieerd telefoonnummer',
+  use_international_format: 'Gebruik internationaal formaat: +1xxx',
+  six_digits_code: '6-cijferige code',
+  change_phone_number: 'Wijzig telefoonnummer',
+  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: 'Vandaag',
+  toggle_multiline_text: 'Schakel meerregelige tekst in/uit',
+  draw_signature: 'Handtekening tekenen',
+  type_initial: 'Typ initialen',
+  draw: 'Tekenen',
+  type: 'Typen',
+  type_text: 'Typ tekst',
+  email_has_been_sent: 'E-mail is verzonden',
+  processing: 'Verwerken',
+  pay_with_strip: 'Betalen met Stripe',
+  reupload: 'Opnieuw uploaden',
+  upload: 'Uploaden',
+  files: 'Bestanden'
+}
 
-const browserLanguage = (navigator.language || navigator.userLanguage || 'en').split('-')[0]
-
-const t = (key) => i18n[browserLanguage]?.[key] || i18n.en[key] || key
+const i18n = { en, es, it, de, fr, pl, uk, cs, pt, he, nl }
 
 export default i18n
-export { t }

app/javascript/submission_form/image_step.vue

@@ -3,13 +3,13 @@
     <div class="flex justify-between items-center w-full mb-2">
       <label
         class="label text-2xl"
-      >{{ field.name || 'Image' }}</label>
+      >{{ showFieldNames && field.name ? field.name : t('image') }}</label>
       <button
         class="btn btn-outline btn-sm"
         @click.prevent="remove"
       >
         <IconReload :width="16" />
-        Reupload
+        {{ t('reupload') }}
       </button>
     </div>
     <div>
@@ -27,7 +27,7 @@
   <div>
     <FileDropzone
       v-if="!modelValue"
-      :message="`Upload ${field.name || 'Image'}${field.required ? '' : ' (optional)'}`"
+      :message="`${t('upload')} ${field.name || t('image')}${field.required ? '' : ` (${t('optional')})`}`"
       :submitter-slug="submitterSlug"
       :accept="'image/*'"
       :is-direct-upload="isDirectUpload"
@@ -46,6 +46,7 @@ export default {
     FileDropzone,
     IconReload
   },
+  inject: ['t'],
   props: {
     field: {
       type: Object,
@@ -56,6 +57,11 @@ export default {
       required: true,
       default: false
     },
+    showFieldNames: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     submitterSlug: {
       type: String,
       required: true

app/javascript/submission_form/initials_step.vue

@@ -3,12 +3,12 @@
     <div class="flex justify-between items-center w-full mb-2">
       <label
         class="label text-2xl"
-      >{{ field.name || t('initials') }}</label>
+      >{{ showFieldNames && field.name ? field.name : t('initials') }}</label>
       <div class="space-x-2 flex">
         <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: {
@@ -125,6 +127,11 @@ export default {
       type: String,
       required: true
     },
+    showFieldNames: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     isDirectUpload: {
       type: Boolean,
       required: true,
@@ -166,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.height = this.$refs.canvas.parentNode.clientWidth / 5
+        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.$refs.textInput?.focus()
@@ -185,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', '')
@@ -204,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')
@@ -217,8 +244,8 @@ export default {
       context.font = fontStyle + ' ' + fontWeight + ' ' + fontSize + ' ' + fontFamily
       context.textAlign = 'center'
 
-      context.clearRect(0, 0, canvas.width, canvas.height)
-      context.fillText(e.target.value, canvas.width / 2, canvas.height / 2 + 11)
+      context.clearRect(0, 0, canvas.width / scale, canvas.height / scale)
+      context.fillText(e.target.value, canvas.width / 2 / scale, canvas.height / 2 / scale + 11)
     },
     toggleTextInput () {
       this.remove()

app/javascript/submission_form/multi_select_step.vue

@@ -1,11 +1,11 @@
 <template>
   <label
-    v-if="field.name"
+    v-if="showFieldNames && field.name"
     :for="field.uuid"
     dir="auto"
     class="label text-2xl mb-2"
   >{{ field.name }}</label>
-  <div class="flex w-full">
+  <div class="flex w-full max-h-44 overflow-y-auto">
     <input
       v-if="modelValue.length === 0"
       type="text"
@@ -13,7 +13,18 @@
       :value="''"
       class="hidden"
     >
-    <div class="space-y-3.5 mx-auto">
+    <div
+      v-if="!showOptions"
+      class="text-xl px-1"
+    >
+      <span @click="scrollIntoField(field)">
+        {{ t('complete_hightlighted_checkboxes_and_click') }} <span class="font-semibold">{{ isLastStep ? t('submit') : t('next') }}</span>.
+      </span>
+    </div>
+    <div
+      class="space-y-3.5 mx-auto"
+      :class="{ hidden: !showOptions }"
+    >
       <div
         v-for="(option, index) in field.options"
         :key="option.uuid"
@@ -44,12 +55,22 @@
 <script>
 export default {
   name: 'MultiSelectStep',
-  inject: ['t'],
+  inject: ['t', 'scrollIntoField'],
   props: {
     field: {
       type: Object,
       required: true
     },
+    isLastStep: {
+      type: Boolean,
+      required: true,
+      default: false
+    },
+    showFieldNames: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     modelValue: {
       type: Array,
       required: false,
@@ -62,6 +83,11 @@ export default {
       inputRefs: []
     }
   },
+  computed: {
+    showOptions () {
+      return this.showFieldNames && (this.field.options.some((e) => e.value) || this.field.options.length < 5)
+    }
+  },
   beforeUpdate () {
     this.inputRefs = []
   },

app/javascript/submission_form/phone_step.vue

@@ -3,7 +3,7 @@
     <label
       :for="isCodeSent ? 'one_time_code' : field.uuid"
       class="label text-2xl mb-2"
-    >{{ field.name || t('verified_phone_number') }}
+    >{{ showFieldNames && field.name ? field.name : t('verified_phone_number') }}
       <template v-if="!field.required">({{ t('optional') }})</template>
     </label>
     <div>
@@ -93,6 +93,11 @@ export default {
       type: String,
       required: true
     },
+    showFieldNames: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     modelValue: {
       type: String,
       required: false,
@@ -140,7 +145,11 @@ export default {
       })
     },
     async submit () {
-      if (!this.isCodeSent) {
+      if (!this.$refs.phone.value.toString().startsWith('+')) {
+        alert(this.t('use_international_format'))
+
+        return Promise.reject(new Error('phone invalid'))
+      } else if (!this.isCodeSent) {
         this.sendVerificationCode()
 
         this.$emit('update:model-value', this.$refs.phone.value)

app/javascript/submission_form/signature_step.vue

@@ -3,10 +3,10 @@
     <div class="flex justify-between items-center w-full mb-2">
       <label
         class="label text-2xl"
-      >{{ field.name || t('signature') }}</label>
+      >{{ 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,14 +40,16 @@
           </a>
         </span>
         <span
+          v-if="field.preferences?.format !== 'typed'"
           class="tooltip"
-          data-tip="Take photo"
+          :data-tip="t('take_photo')"
         >
           <label
             class="btn btn-outline btn-sm font-medium"
           >
             <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: {
@@ -147,6 +151,11 @@ export default {
       type: String,
       required: true
     },
+    showFieldNames: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     isDirectUpload: {
       type: Boolean,
       required: true,
@@ -178,7 +187,8 @@ export default {
     return {
       isSignatureStarted: !!this.previousValue,
       isUsePreviousValue: true,
-      isTextSignature: false
+      isTextSignature: this.field.preferences?.format === 'typed',
+      uploadImageInputKey: Math.random().toString()
     }
   },
   computed: {
@@ -193,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.height = this.$refs.canvas.parentNode.clientWidth / 3
+        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)
       }
     })
 
@@ -210,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', '')
@@ -221,7 +251,7 @@ export default {
     },
     loadFont () {
       if (!isFontLoaded) {
-        const font = new FontFace('Dancing Script', `url(${this.baseUrl}/fonts/DancingScript.otf) format("opentype")`)
+        const font = new FontFace('Dancing Script', `url(${this.baseUrl}/fonts/DancingScript-Regular.otf) format("opentype")`)
 
         font.load().then((loadedFont) => {
           document.fonts.add(loadedFont)
@@ -242,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')
@@ -255,11 +285,12 @@ export default {
       context.font = fontStyle + ' ' + fontWeight + ' ' + fontSize + ' ' + fontFamily
       context.textAlign = 'center'
 
-      context.clearRect(0, 0, canvas.width, canvas.height)
-      context.fillText(e.target.value, canvas.width / 2, canvas.height / 2 + 11)
+      context.clearRect(0, 0, canvas.width / scale, canvas.height / scale)
+      context.fillText(e.target.value, canvas.width / 2 / scale, canvas.height / 2 / scale + 11)
     },
     toggleTextInput () {
       this.remove()
+      this.clear()
       this.isTextSignature = !this.isTextSignature
 
       if (this.isTextSignature) {
@@ -291,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 targetHeight = canvas.height
+            let targetWidth = canvasWidth
+            let targetHeight = canvasHeight
 
-            if (canvas.width / canvas.height > aspectRatio) {
-              targetWidth = canvas.height * aspectRatio
+            if (canvasWidth / canvasHeight > aspectRatio) {
+              targetWidth = canvasHeight * aspectRatio
             } else {
-              targetHeight = canvas.width / aspectRatio
+              targetHeight = canvasWidth / aspectRatio
             }
 
             if (targetHeight > targetWidth) {
@@ -307,17 +340,21 @@ export default {
               targetHeight = targetHeight * scale
             }
 
-            const x = (canvas.width - targetWidth) / 2
-            const y = (canvas.height - targetHeight) / 2
+            const x = (canvasWidth - targetWidth) / 2
+            const y = (canvasHeight - targetHeight) / 2
 
-            context.clearRect(0, 0, canvas.width, canvas.height)
-            context.drawImage(img, x, y, targetWidth, targetHeight)
+            setTimeout(() => {
+              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

@@ -1,6 +1,6 @@
 <template>
   <label
-    v-if="field.name"
+    v-if="showFieldNames && field.name"
     :for="field.uuid"
     dir="auto"
     class="label text-2xl"
@@ -26,7 +26,8 @@
       v-model="text"
       :maxlength="cellsMaxLegth"
       dir="auto"
-      class="base-input !text-2xl w-full !pr-11 -mr-10"
+      class="base-input !text-2xl w-full"
+      :class="{ '!pr-11 -mr-10': !field.validation?.pattern }"
       :required="field.required"
       :pattern="field.validation?.pattern"
       :oninvalid="field.validation?.message ? `this.setCustomValidity(${JSON.stringify(field.validation.message)})` : ''"
@@ -50,7 +51,7 @@
       @focus="$emit('focus')"
     />
     <div
-      v-if="!isTextArea && field.type !== 'cells'"
+      v-if="!isTextArea && field.type !== 'cells' && !field.validation?.pattern"
       class="tooltip"
       :data-tip="t('toggle_multiline_text')"
     >
@@ -81,6 +82,11 @@ export default {
       type: Object,
       required: true
     },
+    showFieldNames: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     modelValue: {
       type: String,
       required: false,
@@ -117,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) {
-      this.$nextTick(() => {
-        this.resizeTextarea()
-      })
+      if (this.isTextArea) {
+        this.$nextTick(() => {
+          this.resizeTextarea()
+        })
+      }
     }
   },
   methods: {

app/javascript/template_builder/area.vue

@@ -43,7 +43,8 @@
         class="border-r"
         :compact="true"
         :editable="editable && !defaultField"
-        :menu-classes="'dropdown-content bg-white menu menu-xs p-2 shadow rounded-box w-52 rounded-t-none -left-[1px]'"
+        :allow-add-new="!defaultSubmitters.length"
+        :menu-classes="'dropdown-content bg-white menu menu-xs p-2 shadow rounded-box w-52 rounded-t-none -left-[1px] mt-[1px]'"
         :submitters="template.submitters"
         @update:model-value="save"
         @click="selectedAreaRef.value = area"
@@ -89,7 +90,7 @@
       <button
         v-else-if="editable"
         class="pr-1"
-        title="Remove"
+        :title="t('remove')"
         @click.prevent="$emit('remove')"
       >
         <IconX width="14" />
@@ -97,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
@@ -140,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
   },
@@ -166,6 +179,11 @@ export default {
       required: false,
       default: null
     },
+    defaultSubmitters: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     editable: {
       type: Boolean,
       required: false,
@@ -219,6 +237,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',
@@ -233,6 +261,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',

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>
@@ -148,6 +159,7 @@
                 :is-drag="!!dragField"
                 :default-fields="defaultFields"
                 :allow-draw="!onlyDefinedFields"
+                :default-submitters="defaultSubmitters"
                 :draw-field="drawField"
                 :editable="editable"
                 :base-url="baseUrl"
@@ -185,25 +197,6 @@
             </div>
           </template>
         </div>
-        <MobileDrawField
-          v-if="drawField && isBreakpointLg"
-          :draw-field="drawField"
-          :fields="template.fields"
-          :submitters="template.submitters"
-          :selected-submitter="selectedSubmitter"
-          class="md:hidden"
-          :editable="editable"
-          @cancel="[drawField = null, drawOption = null]"
-          @change-submitter="[selectedSubmitter = $event, drawField.submitter_uuid = $event.uuid]"
-        />
-        <MobileFields
-          v-if="sortedDocuments.length && !drawField && editable"
-          :fields="template.fields"
-          :default-fields="defaultFields"
-          :field-types="fieldTypes"
-          :selected-submitter="selectedSubmitter"
-          @select="startFieldDraw($event)"
-        />
       </div>
       <div
         v-if="withFieldsList"
@@ -259,6 +252,27 @@
         </div>
       </div>
     </div>
+    <div class="sticky bottom-0">
+      <MobileDrawField
+        v-if="drawField && isBreakpointLg"
+        :draw-field="drawField"
+        :fields="template.fields"
+        :submitters="template.submitters"
+        :selected-submitter="selectedSubmitter"
+        class="md:hidden"
+        :editable="editable"
+        @cancel="[drawField = null, drawOption = null]"
+        @change-submitter="[selectedSubmitter = $event, drawField.submitter_uuid = $event.uuid]"
+      />
+      <MobileFields
+        v-if="sortedDocuments.length && !drawField && editable"
+        :fields="template.fields"
+        :default-fields="defaultFields"
+        :field-types="fieldTypes"
+        :selected-submitter="selectedSubmitter"
+        @select="startFieldDraw($event)"
+      />
+    </div>
   </div>
 </template>
 
@@ -301,6 +315,7 @@ export default {
       template: this.template,
       save: this.save,
       t: this.t,
+      currencies: this.currencies,
       baseFetch: this.baseFetch,
       fieldTypes: this.fieldTypes,
       backgroundColor: this.backgroundColor,
@@ -349,6 +364,11 @@ export default {
       required: false,
       default: () => []
     },
+    currencies: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     fieldTypes: {
       type: Array,
       required: false,

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

@@ -10,6 +10,7 @@
       :allow-draw="allowDraw"
       :is-drag="isDrag"
       :default-fields="defaultFields"
+      :default-submitters="defaultSubmitters"
       :draw-field="drawField"
       :selected-submitter="selectedSubmitter"
       :image="image"
@@ -42,6 +43,11 @@ export default {
       required: false,
       default: () => []
     },
+    defaultSubmitters: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     allowDraw: {
       type: Boolean,
       required: false,
@@ -96,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 })"
           >
@@ -77,7 +77,7 @@
           >
             <label
               tabindex="0"
-              title="Settings"
+              :title="t('settings')"
               class="cursor-pointer text-transparent group-hover:text-base-content"
             >
               <IconSettings
@@ -142,6 +142,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 +193,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
@@ -217,7 +282,7 @@
           </span>
           <button
             class="relative text-transparent group-hover:text-base-content pr-1"
-            title="Remove"
+            :title="t('remove')"
             @click="$emit('remove', field)"
           >
             <IconTrashX
@@ -256,7 +321,7 @@
               @blur="save"
             >
             <button
-              title="Draw"
+              :title="t('draw')"
               tabindex="-1"
               @click.prevent="$emit('set-draw', { field, option })"
             >

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"
@@ -125,7 +125,8 @@
         />
       </div>
       <span class="flex items-center transition-all duration-75 group-hover:border border-base-content/20 border-dashed w-6 h-6 flex justify-center items-center rounded">
-        <IconPlus
+        <component
+          :is="editable ? 'IconPlus' : 'IconChevronDown'"
           width="18"
           height="18"
         />
@@ -144,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">
@@ -162,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()] "
@@ -170,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()] "
@@ -188,7 +189,7 @@
           </div>
         </a>
       </li>
-      <li v-if="submitters.length < 10 && editable">
+      <li v-if="submitters.length < names.length && editable && allowAddNew">
         <a
           href="#"
           class="flex px-2"
@@ -208,7 +209,7 @@
 </template>
 
 <script>
-import { IconUserPlus, IconTrashX, IconPlus, IconChevronUp } from '@tabler/icons-vue'
+import { IconUserPlus, IconTrashX, IconPlus, IconChevronUp, IconChevronDown } from '@tabler/icons-vue'
 import Contenteditable from './contenteditable'
 import { v4 } from 'uuid'
 
@@ -216,6 +217,7 @@ export default {
   name: 'FieldSubmitter',
   components: {
     IconUserPlus,
+    IconChevronDown,
     Contenteditable,
     IconPlus,
     IconTrashX,
@@ -242,6 +244,11 @@ export default {
       required: false,
       default: false
     },
+    allowAddNew: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     modelValue: {
       type: String,
       required: true
@@ -261,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',
@@ -284,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')">
@@ -123,6 +123,17 @@ export default {
         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

@@ -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
@@ -213,6 +213,17 @@ export default {
   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)
     },

app/javascript/template_builder/i18n.js

@@ -1,9 +1,19 @@
 const en = {
   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',
+  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',
@@ -30,6 +40,17 @@ 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',

app/javascript/template_builder/mobile_draw_field.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="fixed text-center w-full bottom-0 pr-6 mb-4">
+  <div class="absolute text-center w-full bottom-0 pr-3 mb-4">
     <span class="w-full bg-base-200 px-4 py-2 rounded-md inline-flex space-x-2 mx-auto items-center justify-between mb-2 z-20 md:hidden">
       <div class="flex items-center space-x-2">
         <component

app/javascript/template_builder/mobile_fields.vue

@@ -1,6 +1,6 @@
 <template>
   <span
-    class="dropdown dropdown-top dropdown-end fixed bottom-4 right-4 z-10 md:hidden"
+    class="dropdown dropdown-top dropdown-end absolute bottom-4 right-4 z-10 md:hidden"
   >
     <label
       class="btn btn-neutral text-white btn-circle btn-lg group"

app/javascript/template_builder/page.vue

@@ -24,6 +24,7 @@
         :field="item.field"
         :editable="editable"
         :default-field="defaultFields.find((f) => f.name === item.field.name)"
+        :default-submitters="defaultSubmitters"
         @start-resize="resizeDirection = $event"
         @stop-resize="resizeDirection = null"
         @start-drag="isMove = true"
@@ -85,6 +86,11 @@ export default {
       type: Object,
       required: true
     },
+    defaultSubmitters: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     drawField: {
       type: Object,
       required: false,

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
@@ -31,7 +31,7 @@
           @change="save"
         >
           <option
-            v-for="currency in currencies"
+            v-for="currency in currenciesList"
             :key="currency"
             :value="currency"
           >
@@ -167,7 +167,7 @@ export default {
     IconInnerShadowTop,
     IconBrandStripe
   },
-  inject: ['backgroundColor', 'save'],
+  inject: ['backgroundColor', 'save', 'currencies', 't'],
   props: {
     field: {
       type: Object,
@@ -187,9 +187,12 @@ export default {
     redirectUri () {
       return document.location.origin + '/auth/stripe_connect/callback'
     },
-    currencies () {
+    defaultCurrencies () {
       return ['USD', 'EUR', 'GBP']
     },
+    currenciesList () {
+      return this.currencies.length ? this.currencies : this.defaultCurrencies
+    },
     authenticityToken () {
       return document.querySelector('meta[name="csrf-token"]')?.content
     },

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) &&
-       submission.preferences['send_email'] != false
-      SubmitterMailer.completed_email(submitter, user).deliver_later!
+    if submitter.account.users.exists?(id: user.id) && submission.preferences['send_email'] != false
+      if submitter.submission.submitters.map(&:email).exclude?(user.email) &&
+         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,22 @@ class SendFormCompletedWebhookRequestJob < ApplicationJob
 
     ActiveStorage::Current.url_options = Docuseal.default_url_options
 
-    Faraday.post(config.value,
-                 {
-                   event_type: 'form.completed',
-                   timestamp: Time.current,
-                   data: Submitters::SerializeForWebhook.call(submitter)
-                 }.to_json,
-                 'Content-Type' => 'application/json',
-                 'User-Agent' => USER_AGENT)
+    resp = Faraday.post(config.value,
+                        {
+                          event_type: 'form.completed',
+                          timestamp: Time.current,
+                          data: Submitters::SerializeForWebhook.call(submitter)
+                        }.to_json,
+                        'Content-Type' => 'application/json',
+                        'User-Agent' => USER_AGENT)
+
+    if 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,32 @@
 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,
-                 {
-                   event_type: 'form.started',
-                   timestamp: Time.current,
-                   data: Submitters::SerializeForWebhook.call(submitter)
-                 }.to_json,
-                 'Content-Type' => 'application/json',
-                 'User-Agent' => USER_AGENT)
+    resp = Faraday.post(config.value,
+                        {
+                          event_type: 'form.started',
+                          timestamp: Time.current,
+                          data: Submitters::SerializeForWebhook.call(submitter)
+                        }.to_json,
+                        'Content-Type' => 'application/json',
+                        'User-Agent' => USER_AGENT)
+
+    if 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,32 @@
 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,
-                 {
-                   event_type: 'form.viewed',
-                   timestamp: Time.current,
-                   data: Submitters::SerializeForWebhook.call(submitter)
-                 }.to_json,
-                 'Content-Type' => 'application/json',
-                 'User-Agent' => USER_AGENT)
+    resp = Faraday.post(config.value,
+                        {
+                          event_type: 'form.viewed',
+                          timestamp: Time.current,
+                          data: Submitters::SerializeForWebhook.call(submitter)
+                        }.to_json,
+                        'Content-Type' => 'application/json',
+                        'User-Agent' => USER_AGENT)
+
+    if 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/models/account.rb

@@ -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,8 +27,10 @@ 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'
   ESIGNING_PREFERENCE_KEY = 'esigning_preference'
 
   DEFAULT_VALUES = {

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

@@ -46,7 +46,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
-#  application_key :string
-#  completed_at    :datetime
-#  email           :string
-#  ip              :string
-#  name            :string
-#  opened_at       :datetime
-#  phone           :string
-#  preferences     :text             not null
-#  sent_at         :datetime
-#  slug            :string           not null
-#  ua              :string
-#  uuid            :string           not null
-#  values          :text             not null
-#  created_at      :datetime         not null
-#  updated_at      :datetime         not null
-#  submission_id   :bigint           not null
+#  id            :bigint           not null, primary key
+#  completed_at  :datetime
+#  email         :string
+#  ip            :string
+#  metadata      :text             not null
+#  name          :string
+#  opened_at     :datetime
+#  phone         :string
+#  preferences   :text             not null
+#  sent_at       :datetime
+#  slug          :string           not null
+#  ua            :string
+#  uuid          :string           not null
+#  values        :text             not null
+#  created_at    :datetime         not null
+#  updated_at    :datetime         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
-#  application_key :string
-#  archived_at     :datetime
-#  fields          :text             not null
-#  name            :string           not null
-#  schema          :text             not null
-#  slug            :string           not null
-#  source          :text             not null
-#  submitters      :text             not null
-#  created_at      :datetime         not null
-#  updated_at      :datetime         not null
-#  account_id      :bigint           not null
-#  author_id       :bigint           not null
-#  folder_id       :bigint           not null
+#  id          :bigint           not null, primary key
+#  archived_at :datetime
+#  fields      :text             not null
+#  name        :string           not null
+#  schema      :text             not null
+#  slug        :string           not null
+#  source      :text             not null
+#  submitters  :text             not null
+#  created_at  :datetime         not null
+#  updated_at  :datetime         not null
+#  account_id  :bigint           not null
+#  author_id   :bigint           not null
+#  external_id :string
+#  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,24 @@
             </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 %>
+      <div class="px-1 mt-8">
+        <h2 class="text-2xl font-bold mb-2">Danger Zone</h2>
+        <%= button_to button_title(title: 'Delete my account'), settings_account_path, class: 'btn btn-outline btn-error block', data: { turbo_confirm: 'Schedule account for deletion?' }, method: :delete, id: :account_delete_button %>
       </div>
     <% end %>
   </div>

app/views/api_settings/index.html.erb

@@ -35,20 +35,16 @@
        --header 'X-Auth-Token: <%= current_user.access_token.token %>' \
        --data-raw '{
          "template_id": <%= current_account.templates.last&.id || 1 %>,
-         "submission": [
+         "submitters": [
            {
-             "submitters": [
-               {
-                 "name": "John Doe",
-                 "role": "<%= current_account.templates.last ? current_account.templates.last.submitters.first['name'] : 'First Party' %>",
-                 "email": "<%= current_user.email.sub('@', '+test@') %>",
-                 "values": {
-                   "Form Text Field Name": "Default Value"
-                 }
-               },
-               { "role": "Second Submitter", "email": "<%= current_user.email.sub('@', '+test2@') %>" }
-             ]
-           }
+             "name": "John Doe",
+             "role": "<%= current_account.templates.last ? current_account.templates.last.submitters.first['name'] : 'First Party' %>",
+             "email": "<%= current_user.email.sub('@', '+test@') %>",
+             "values": {
+               "Form Text Field Name": "Default Value"
+             }
+           },
+           { "role": "Second Submitter", "email": "<%= current_user.email.sub('@', '+test2@') %>" }
          ]
        }'<% end.to_str %>
             <span class="top-0 right-0 absolute">

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

@@ -1,6 +1,14 @@
 <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>
+  <% if params[:redir].to_s.ends_with?('on_premise') %>
+    <h1 class="text-3xl font-bold text-center mt-8 mb-6">DocuSeal Console</h1>
+    <div class="alert my-4 text-sm">
+      Sign up in DocuSeal Console to upgrade.
+      On-premises app is completely standalone, Console is used only to manage your license.
+    </div>
+  <% else %>
+    <%= render 'devise/shared/select_server' if Docuseal.multitenant? %>
+    <h1 class="text-3xl font-bold text-center mt-8 mb-6">Create Free Account</h1>
+  <% end %>
   <%= 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] %>

app/views/esign_settings/show.html.erb

@@ -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') %>
-      <% if can?(:manage, account_config) %>
-        <div class="px-1 mt-8 max-w-xl">
-          <div class="flex justify-between items-end mb-4 mt-8">
-            <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 %>
+    <% account_config = AccountConfig.where(account: current_account, key: AccountConfig::ESIGNING_PREFERENCE_KEY).first_or_initialize(value: 'multiple') %>
+    <% if can?(:manage, account_config) %>
+      <div class="px-1 mt-8 max-w-xl">
+        <div class="flex justify-between items-end mb-4 mt-8">
+          <h2 class="text-3xl font-bold">Preferences</h2>
         </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}" %>">Learn More</a>
     </p>
   </div>
 </div>

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}" %>">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}" %>">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}" %>">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/storage_settings/_aws_form.html.erb

@@ -25,7 +25,7 @@
       <%= fff.label :endpoint, 'Endpoint (optional)', class: 'label' %>
       <%= fff.text_field :endpoint, value: configs['endpoint'], type: :url, class: 'base-input' %>
       <label class="label">
-        <span class="label-text-alt">For AWS S3 compantiable APIs like Minio.</span>
+        <span class="label-text-alt">For AWS S3 compatible APIs like Minio.</span>
       </label>
     </div>
   <% end %>

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="">
-    <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>
+  <%= render 'templates/embedding', template: %>
   <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/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) %>" class="white-button" target="_blank">
           <%= svg_icon('external_link', class: 'w-6 h-6') %>
           <span class="hidden md:inline">
             Audit Log
@@ -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: %>
@@ -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,30 @@
+<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 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/_submission_form.html.erb

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

app/views/submit_form/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">
-        <span class="flex items-center justify-center space-x-2" data-target="download-button.defaultButton">
-          <%= svg_icon('download', class: 'w-6 h-6') %>
-          <span><%= t('download_documents') %></span>
-        </span>
-        <span class="flex items-center justify-center space-x-2 hidden" data-target="download-button.loadingButton">
-          <%= svg_icon('loader', class: 'w-6 h-6 animate-spin') %>
-          <span><%= t('downloading') %></span>
-        </span>
-      </download-button>
+      <% if @submitter.completed_at > 15.minutes.ago || (current_user && current_user.account.submitters.exists?(id: @submitter.id)) %>
+        <download-button data-src="<%= submitter_download_index_path(@submitter.slug) %>" class="base-button w-full">
+          <span class="flex items-center justify-center space-x-2" data-target="download-button.defaultButton">
+            <%= svg_icon('download', class: 'w-6 h-6') %>
+            <span><%= t('download_documents') %></span>
+          </span>
+          <span class="flex items-center justify-center space-x-2 hidden" data-target="download-button.loadingButton">
+            <%= svg_icon('loader', class: 'w-6 h-6 animate-spin') %>
+            <span><%= t('downloading') %></span>
+          </span>
+        </download-button>
+      <% end %>
     </div>
-    <% if @submitter.submission.template.submitters.size == 1 %>
+    <% 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,13 @@
                 <% 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 %>
+                <%= 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/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>

app/views/templates/_submission.html.erb

@@ -1,12 +1,12 @@
 <% status_badges = { 'awaiting' => 'badge-info', 'sent' => 'badge-info', 'completed' => 'badge-success', 'opened' => 'badge-warning' } %>
-<a href="<%= submission_path(submission) %>" class="bg-base-200 w-full flex flex-col md:flex-row space-y-4 md:space-y-0 md:justify-between rounded-2xl px-6 py-5 md:items-center">
+<a href="<%= submission_path(submission) %>" class="bg-base-200 w-full flex flex-col md:flex-row space-y-4 md:space-y-0 md:justify-between rounded-2xl px-5 md:px-6 py-5 md:items-center">
   <% submitters = (submission.template_submitters || submission.template.submitters).filter_map { |item| submission.submitters.find { |e| e.uuid == item['uuid'] } } %>
   <% is_submission_completed = submitters.all?(&:completed_at?) && submitters.size.positive? %>
   <% if submitters.size == 1 %>
     <div>
       <% submitter = submitters.first %>
       <div class="flex items-center space-x-4">
-        <span class="flex items-center space-x-3">
+        <span class="flex flex-col md:flex-row md:items-center gap-3">
           <div class="tooltip flex" data-tip="<%= l(submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
             <span class="badge <%= status_badges[submitter.status] %> md:w-32 badge-lg bg-opacity-50 uppercase text-sm font-semibold">
               <%= submitter.status %>
@@ -20,14 +20,14 @@
     </div>
     <div class="flex space-x-2 items-center">
       <% if submitter.completed_at? %>
-        <form onsubmit="event.preventDefault()">
-          <button onclick="event.stopPropagation()">
-            <download-button data-src="<%= submitter_download_index_path(submitter.slug) %>" class="btn btn-sm btn-neutral text-white md:w-36">
-              <span class="flex items-center justify-center space-x-2" data-target="download-button.defaultButton">
+        <form onsubmit="event.preventDefault()" class="flex-1 md:flex-none">
+          <button onclick="event.stopPropagation()" class="w-full md:w-fit">
+            <download-button data-src="<%= submitter_download_index_path(submitter.slug) %>" class="btn btn-sm btn-neutral text-white w-full md:w-36">
+              <span class="flex items-center justify-center space-x-1 md:space-x-2" data-target="download-button.defaultButton">
                 <%= svg_icon('download', class: 'w-5 h-5 stroke-2') %>
                 <span class="inline">Download</span>
               </span>
-              <span class="flex items-center justify-center space-x-2 hidden" data-target="download-button.loadingButton">
+              <span class="flex items-center justify-center space-x-1 md:space-x-2 hidden" data-target="download-button.loadingButton">
                 <%= svg_icon('loader', class: 'w-5 h-5 animate-spin') %>
                 <span class="inline">Downloa...</span>
               </span>
@@ -36,26 +36,30 @@
         </form>
       <% else %>
         <% if current_user.email == submitter.email %>
-          <form data-turbo="false" method="get" action="<%= submit_form_url(slug: submitter.slug) %>">
-            <button onclick="event.stopPropagation()" class="btn btn-sm btn-neutral btn-outline bg-white md:w-36 flex">
-              <span class="flex items-center justify-center space-x-2">
+          <form data-turbo="false" method="get" action="<%= submit_form_url(slug: submitter.slug) %>" class="flex-1 md:flex-none">
+            <button onclick="event.stopPropagation()" class="btn btn-sm btn-neutral btn-outline bg-white w-full md:w-36 flex">
+              <span class="flex items-center justify-center space-x-1 md:space-x-2">
                 <%= svg_icon('writing_sign', class: 'w-4 h-4 stroke-2') %>
-                <span class="hidden md:inline">Sign now</span>
+                <span class="inline shrink-0">Sign now</span>
               </span>
             </button>
           </form>
         <% else %>
-          <%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug), class: 'btn btn-sm btn-neutral text-white md:w-36 flex', icon_class: 'w-6 h-6 text-white', copy_title: 'Copy Link', copy_title_md: 'Copy', copied_title_md: 'Copied' %>
+          <div class="flex-1 md:flex-none">
+            <%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug), class: 'btn btn-sm btn-neutral text-white md:w-36 flex', icon_class: 'w-6 h-6 text-white', copy_title: 'Copy Link', copy_title_md: 'Copy', copied_title_md: 'Copied' %>
+          </div>
         <% end %>
       <% end %>
-      <span class="btn btn-outline btn-sm w-20 md:w-24">View</span>
+      <div class="flex-1 md:flex-none">
+        <span class="btn btn-outline btn-sm w-full md:w-24">View</span>
+      </div>
       <% if !submission.archived_at? && can?(:destroy, submission) %>
-        <%= button_to button_title(title: nil, disabled_with: 'Remov', icon: svg_icon('trash', class: 'w-6 h-6')), submission_path(submission), class: 'btn btn-outline btn-sm', form: { class: 'flex' }, title: 'Delete', method: :delete, data: { turbo_confirm: 'Are you sure?' }, onclick: 'event.stopPropagation()' %>
+        <%= button_to button_title(title: nil, disabled_with: 'Remov', icon: svg_icon('trash', class: 'w-6 h-6')), submission_path(submission), class: 'btn btn-outline btn-sm w-full md:w-fit', form: { class: 'flex' }, title: 'Delete', method: :delete, data: { turbo_confirm: 'Are you sure?' }, onclick: 'event.stopPropagation()' %>
       <% end %>
     </div>
   <% else %>
     <div class="space-y-1 w-full md:mr-2">
-      <div class="flex items-center space-x-3">
+      <div class="flex flex-col md:flex-row md:items-center gap-3">
         <% if is_submission_completed %>
           <% latest_submitter = submitters.select(&:completed_at?).max_by(&:completed_at) %>
           <div class="tooltip flex" data-tip="<%= l(latest_submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
@@ -64,10 +68,10 @@
             </span>
           </div>
         <% end %>
-        <div class="w-full">
+        <div class="w-full <%= is_submission_completed ? 'space-y-1' : 'space-y-4' %> md:space-y-0">
           <% submitters.each_with_index do |submitter, index| %>
-            <div class="flex justify-between items-center space-x-3">
-              <span class="flex items-center space-x-3">
+            <div class="relative flex justify-between items-start md:items-center space-x-3">
+              <span class="flex flex-col md:flex-row md:items-center gap-2">
                 <% unless is_submission_completed %>
                   <div class="tooltip flex" data-tip="<%= l(submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
                     <span class="badge md:w-24 <%= status_badges[submitter.status] %> bg-opacity-50 uppercase text-xs font-semibold">
@@ -82,31 +86,31 @@
               <% if submitter.completed_at? && !is_submission_completed %>
                 <form onsubmit="event.preventDefault()">
                   <button onclick="event.stopPropagation()">
-                    <download-button data-src="<%= submitter_download_index_path(submitter.slug) %>" class="btn btn-xs btn-neutral text-white md:w-36">
-                      <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="absolute md:relative top-0 right-0 btn btn-xs btn-neutral text-white md:w-36">
+                      <span class="flex items-center justify-center space-x-1 md:space-x-2" data-target="download-button.defaultButton">
                         <%= svg_icon('download', class: 'w-4 h-4 stroke-2') %>
-                        <span class="hidden md:inline">Download</span>
+                        <span class="inline">Download</span>
                       </span>
-                      <span class="flex items-center justify-center space-x-2 hidden" data-target="download-button.loadingButton">
+                      <span class="flex items-center justify-center space-x-1 md:space-x-2 hidden" data-target="download-button.loadingButton">
                         <%= svg_icon('loader', class: 'w-4 h-4 animate-spin') %>
-                        <span class="hidden md:inline">Downloa...</span>
+                        <span class="inline">Downloa...</span>
                       </span>
                     </download-button>
                   </button>
                 </form>
               <% elsif !is_submission_completed %>
-                <div class="flex items-center space-x-3">
+                <div class="relative flex items-center space-x-3">
                   <% if current_user.email == submitter.email %>
                     <form data-turbo="false" method="get" action="<%= submit_form_url(slug: submitter.slug) %>">
-                      <button onclick="event.stopPropagation()" class="btn btn-xs btn-outline btn-neutral bg-white md:w-36">
-                        <span class="flex items-center justify-center space-x-2">
+                      <button onclick="event.stopPropagation()" class="absolute md:relative top-0 right-0 btn btn-xs btn-outline btn-neutral bg-white w-28 md:w-36">
+                        <span class="flex items-center justify-center space-x-1 md:space-x-2">
                           <%= svg_icon('writing_sign', class: 'w-4 h-4 stroke-2') %>
-                          <span class="hidden md:inline">Sign now</span>
+                          <span class="inline shrink-0">Sign now</span>
                         </span>
                       </button>
                     </form>
                   <% else %>
-                    <%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug), class: 'btn btn-xs text-xs btn-neutral text-white md:w-36 flex', icon_class: 'w-4 h-4 text-white', copy_title: 'Copy Link' %>
+                    <%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug), class: 'absolute md:relative top-0 right-0 btn btn-xs text-xs btn-neutral text-white w-28 md:w-36 flex', icon_class: 'w-4 h-4 text-white', copy_title: 'Copy Link', copy_title_md: 'Copy Link', copied_title_md: 'Copied' %>
                   <% end %>
                 </div>
               <% end %>
@@ -115,27 +119,31 @@
         </div>
       </div>
     </div>
-    <div class="flex space-x-2 items-center">
+    <div class="flex space-x-1 md:space-x-2 items-center">
       <% if is_submission_completed %>
         <% latest_submitter = submitters.select(&:completed_at?).max_by(&:completed_at) %>
-        <form onsubmit="event.preventDefault()">
-          <button onclick="event.stopPropagation()">
-            <download-button data-src="<%= submitter_download_index_path(latest_submitter.slug) %>" class="btn btn-sm btn-neutral text-white md:w-36">
-              <span class="flex items-center justify-center space-x-2" data-target="download-button.defaultButton">
-                <%= svg_icon('download', class: 'w-5 h-5 stroke-2') %>
-                <span class="inline">Download</span>
-              </span>
-              <span class="flex items-center justify-center space-x-2 hidden" data-target="download-button.loadingButton">
-                <%= svg_icon('loader', class: 'w-5 h-5 animate-spin') %>
-                <span class="inline">Downloa...</span>
-              </span>
-            </download-button>
-          </button>
-        </form>
+        <div class="flex-1 md:flex-none">
+          <form onsubmit="event.preventDefault()" class="w-full md:w-fit">
+            <button onclick="event.stopPropagation()">
+              <download-button data-src="<%= submitter_download_index_path(latest_submitter.slug) %>" class="btn btn-sm btn-neutral text-white md:w-36">
+                <span class="flex items-center justify-center space-x-1 md:space-x-2" data-target="download-button.defaultButton">
+                  <%= svg_icon('download', class: 'w-5 h-5 stroke-2') %>
+                  <span class="inline">Download</span>
+                </span>
+                <span class="flex items-center justify-center space-x-1 md:space-x-2 hidden" data-target="download-button.loadingButton">
+                  <%= svg_icon('loader', class: 'w-5 h-5 animate-spin') %>
+                  <span class="inline">Downloa...</span>
+                </span>
+              </download-button>
+            </button>
+          </form>
+        </div>
       <% end %>
-      <span class="btn btn-outline btn-sm w-20 md:w-24">View</span>
+      <div class="flex-1 md:flex-none">
+        <span class="btn btn-outline btn-sm w-full md:w-24">View</span>
+      </div>
       <% unless submission.archived_at? %>
-        <%= button_to button_title(title: nil, disabled_with: 'Remov', icon: svg_icon('trash', class: 'w-6 h-6')), submission_path(submission), class: 'btn btn-outline btn-sm', form: { class: 'flex' }, title: 'Delete', method: :delete, data: { turbo_confirm: 'Are you sure?' }, onclick: 'event.stopPropagation()' %>
+        <%= button_to button_title(title: nil, disabled_with: 'Remov', icon: svg_icon('trash', class: 'w-6 h-6')), submission_path(submission), class: 'btn btn-outline btn-sm w-full md:w-fit', form: { class: 'flex' }, title: 'Delete', method: :delete, data: { turbo_confirm: 'Are you sure?' }, onclick: 'event.stopPropagation()' %>
       <% end %>
     </div>
   <% end %>

app/views/templates/_template.html.erb

@@ -7,6 +7,9 @@
       <p class="flex items-center space-x-1 text-xs text-base-content/60">
         <%= svg_icon('user', class: 'w-4 h-4') %>
         <span><%= template.author.full_name.presence || template.author.email.to_s.sub(/\+\w+@/, '@') %></span>
+        <% if template.account_id != current_account.id %>
+          <span class="badge badge-neutral badge-outline badge-sm text-[10px] uppercase">shared</span>
+        <% end %>
       </p>
       <p class="flex text-xs text-base-content/60">
         <span class="flex items-center space-x-1 w-1/2">
@@ -24,7 +27,7 @@
   </a>
   <div class="absolute top-0 bottom-0 w-0 flex items-center hidden md:group-hover:flex" style="right: 37px">
     <div class="space-y-1">
-      <% if can?(:update, template) && !template.archived_at? %>
+      <% if can?(:update, template) && !template.archived_at? && template.account_id == current_account.id %>
         <span class="tooltip tooltip-left" data-tip="Move">
           <a href="<%= edit_template_folder_path(template.id) %>" data-turbo-frame="modal" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
             <%= svg_icon('folder_share', class: 'w-4 h-4') %>

app/views/templates/_title.html.erb

@@ -1,50 +1,86 @@
-<div class="flex flex-col items-start md:flex-row space-y-2 md:space-y-0 md:justify-between md:items-start mb-3">
-  <div>
-    <h1 class="text-4xl font-semibold mr-4" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">
-      <%= template.name %>
-      <% if template.archived_at? %>
-        <span class="badge badge-outline badge-lg align-middle">Archived</span>
-      <% end %>
-    </h1>
-    <div class="flex items-center">
-      <a href="<%= folder_path(@template.folder) %>" class="flex items-center space-x-1 mt-1 peer">
-        <%= svg_icon('folder', class: 'w-5 h-5 flex-shrink-0') %>
-        <span class="text-sm">
-          <%= @template.folder.name %>
-        </span>
-      </a>
-      <% if can?(:update, template) %>
-        <span class="pl-1 tooltip tooltip-right md:opacity-0 hover:opacity-100 peer-hover:opacity-100" data-tip="Move">
-          <a href="<%= edit_template_folder_path(template.id) %>" data-turbo-frame="modal">
-            <%= svg_icon('pencil_share', class: 'w-5 h-5') %>
-          </a>
-        </span>
+<div class="flex flex-col items-start md:flex-row space-y-2 md:space-y-0 md:space-x-2 md:justify-between md:items-start mb-6 md:mb-3">
+  <div class="relative flex items-start justify-between w-full space-x-0">
+    <div>
+      <h1 class="text-4xl font-semibold" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">
+        <%= template.name %>
+        <% if template.archived_at? %>
+          <span class="badge badge-outline badge-lg align-middle">Archived</span>
+        <% end %>
+      </h1>
+      <% if @template.account_id == current_account.id %>
+        <div class="flex items-center justify-between">
+          <div class="flex items-center">
+            <a href="<%= folder_path(@template.folder) %>" class="flex items-center space-x-1 mt-1 peer">
+              <%= svg_icon('folder', class: 'w-5 h-5 flex-shrink-0') %>
+              <span class="text-sm">
+                <%= @template.folder.name %>
+              </span>
+            </a>
+            <% if can?(:update, template) %>
+              <span class="pl-1 tooltip tooltip-right md:opacity-0 hover:opacity-100 peer-hover:opacity-100" data-tip="Move">
+                <a href="<%= edit_template_folder_path(template.id) %>" data-turbo-frame="modal">
+                  <%= svg_icon('pencil_share', class: 'w-5 h-5') %>
+                </a>
+              </span>
+            <% end %>
+          </div>
+        </div>
+      <% else %>
+        <div class="flex items-center justify-between">
+          <div class="flex items-center">
+            <div class="flex items-center space-x-1 mt-1 peer">
+              <span class="badge badge-neutral badge-outline badge-md text-xs text-white uppercase">shared</span>
+            </div>
+          </div>
+        </div>
       <% end %>
     </div>
-  </div>
-  <div class="flex md:justify-between space-x-2 flex-none pt-1">
     <% if !template.archived_at? %>
-      <%= render 'shared/clipboard_copy', text: start_form_url(slug: @template.slug), class: 'btn btn-sm btn-neutral text-white', icon_class: 'w-6 h-6 text-white', copy_title: 'Copy Link', copied_title: 'Copied', copy_title_md: 'Link', copied_title_md: 'Copied' %>
+      <div class="flex items-center space-x-2">
+        <% if can?(:update, template) && (Docuseal.multitenant? || current_account.testing? || current_account.id == 1) %>
+          <div class="tooltip" data-tip="API and Embedding">
+            <%= link_to template_code_modal_path(template), class: 'btn btn-ghost btn-sm flex-1 hidden md:flex', data: { turbo_frame: :modal } do %>
+              <span class="flex items-center justify-center space-x-2">
+                <%= svg_icon('code', class: 'w-6 h-6') %>
+              </span>
+            <% end %>
+          </div>
+        <% end %>
+        <%= render 'shared/clipboard_copy', text: start_form_url(slug: @template.slug), class: 'absolute md:relative bottom-0 right-0 btn btn-xs md:btn-sm whitespace-nowrap btn-neutral text-white mt-1 px-2', icon_class: 'w-4 h-4 md:w-6 md:h-6 text-white', copy_title: 'Link', copied_title: 'Copied', copy_title_md: 'Link', copied_title_md: 'Copied' %>
+      </div>
     <% end %>
+  </div>
+  <div class="flex space-x-2 w-full md:w-fit md:justify-between md:flex-none md:pt-1">
     <% if !template.archived_at? && can?(:destroy, template) %>
-      <%= button_to button_title(title: 'Archive', disabled_with: 'Archiving', title_class: 'hidden md:inline', icon: svg_icon('archive', class: 'w-6 h-6')), template_path(template), class: 'btn btn-outline btn-sm', method: :delete, data: { turbo_confirm: 'Are you sure?' } %>
+      <%= button_to button_title(title: 'Archive', disabled_with: 'Archiving', title_class: 'inline', icon: svg_icon('archive', class: 'w-6 h-6')), template_path(template), class: 'btn btn-outline btn-sm w-full', form_class: 'flex-1', method: :delete, data: { turbo_confirm: 'Are you sure?' } %>
     <% end %>
     <% if can?(:create, template) %>
-      <%= link_to new_template_path(base_template_id: template.id), class: 'btn btn-outline btn-sm', data: { turbo_frame: :modal } do %>
-        <%= svg_icon('copy', class: 'w-6 h-6') %>
-        <span class="hidden md:inline">Clone</span>
+      <%= link_to new_template_path(base_template_id: template.id), class: 'btn btn-outline btn-sm flex-1', data: { turbo_frame: :modal } do %>
+        <span class="flex items-center justify-center space-x-2">
+          <%= svg_icon('copy', class: 'w-6 h-6') %>
+          <span class="inline">Clone</span>
+        </span>
       <% end %>
     <% end %>
-    <% if !template.archived_at? && can?(:update, template) %>
-      <%= link_to edit_template_path(template), class: 'btn btn-outline btn-sm' do %>
-        <span class="flex items-center justify-center space-x-2">
-          <%= svg_icon('pencil', class: 'w-6 h-6') %>
-          <span>Edit</span>
-        </span>
+    <% if !template.archived_at? %>
+      <% if can?(:update, template) %>
+        <%= link_to edit_template_path(template), class: 'btn btn-outline btn-sm flex-1' do %>
+          <span class="flex items-center justify-center space-x-2">
+            <%= svg_icon('pencil', class: 'w-6 h-6') %>
+            <span>Edit</span>
+          </span>
+        <% end %>
+      <% elsif can?(:read, template) %>
+        <%= link_to template_preview_path(template), class: 'btn btn-outline btn-sm flex-1' do %>
+          <span class="flex items-center justify-center space-x-2">
+            <%= svg_icon('file_text', class: 'w-6 h-6') %>
+            <span>Preview</span>
+          </span>
+        <% end %>
       <% end %>
     <% end %>
     <% if template.archived_at? && can?(:create, template) %>
-      <%= button_to button_title(title: 'Restore', disabled_with: 'Restoring', icon: svg_icon('rotate', class: 'w-6 h-6')), template_restore_index_path(template), class: 'btn btn-outline btn-sm' %>
+      <%= button_to button_title(title: 'Restore', disabled_with: 'Restoring', icon: svg_icon('rotate', class: 'w-6 h-6')), template_restore_index_path(template), class: 'btn btn-outline btn-sm flex-1' %>
     <% end %>
   </div>
 </div>

app/views/templates/new.html.erb

@@ -12,11 +12,16 @@
       </a>
       <folder-autocomplete class="flex justify-between w-full">
         <input id="folder_name" placeholder="Folder Name" type="text" class="w-full outline-none border-transparent focus:border-transparent focus:ring-0 bg-base-100 px-1 peer" name="folder_name" value="<%= params[:folder_name].presence || @base_template&.folder&.name || TemplateFolder::DEFAULT_NAME %>" onblur="window.folder_name.value = window.folder_name.value || 'Default'" autocomplete="off">
-        <a href="#" onclick="[event.preventDefault(), window.folder_name.value = '', window.folder_name.focus()]" class="shrink-0	link peer-focus:hidden mr-1.5">
+        <a href="#" onclick="[event.preventDefault(), window.folder_name.value = '', window.folder_name.focus()]" class="shrink-0 link peer-focus:hidden mr-1.5">
           Change Folder
         </a>
       </folder-autocomplete>
     </div>
+    <% if @base_template && (can?(:manage, :tenants) || true_user != current_user) && true_user.account.account_linked_accounts.exists?(account_type: :linked) %>
+      <div class="form-control mb-4">
+        <%= select_tag :account_id, options_for_select([true_user.account, *true_user.account.linked_accounts.where.not(id: true_user.account.testing_accounts)].map { |e| [e.name, e.id] }, current_account.id), required: true, class: 'base-select' %>
+      </div>
+    <% end %>
     <div class="form-control">
       <%= f.button button_title(title: @base_template ? 'Submit' : 'Create', disabled_with: 'Creating'), class: 'base-button' %>
     </div>

app/views/templates/show.html.erb

@@ -1,22 +1,24 @@
 <%= render 'title', template: @template %>
 <% is_show_tabs = @pagy.pages > 1 || params[:status].present? %>
 <% if !@pagy.count.zero? || params[:q].present? %>
-  <div class="flex justify-between md:items-end flex-col md:flex-row <%= is_show_tabs ? 'mb-4' : 'mb-6' %>">
-    <p class="text-3xl font-bold">Submissions</p>
-    <div class="flex justify-end space-x-2 mt-3 md:mt-0">
-      <% if params[:q].present? || params[:status].present? || @pagy.pages > 1 %>
-        <%= render 'shared/search_input' %>
-      <% end %>
-      <%= link_to new_template_submissions_export_path(@template), class: 'btn btn-ghost text-base', data: { turbo_frame: 'modal' } do %>
-        <%= svg_icon('download', class: 'w-6 h-6 stroke-2') %>
-        <span>Export</span>
-      <% end %>
-      <% if !@template.archived_at? && can?(:create, Submission) %>
-        <%= link_to new_template_submission_path(@template), class: 'white-button !border', data: { turbo_frame: 'modal' } do %>
-          <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
-          <span>Add <span class="hidden md:inline">Recipients</span></span>
+  <div class="<%= is_show_tabs ? 'mb-4' : 'mb-6' %>">
+    <div class="flex justify-between items-center md:items-end">
+      <p class="text-3xl font-bold">Submissions</p>
+      <div class="flex justify-end space-x-2">
+        <% if params[:q].present? || params[:status].present? || @pagy.pages > 1 %>
+          <%= render 'shared/search_input' %>
         <% end %>
-      <% end %>
+        <%= link_to new_template_submissions_export_path(@template), class: 'hidden md:flex btn btn-ghost text-base', data: { turbo_frame: 'modal' } do %>
+          <%= svg_icon('download', class: 'w-6 h-6 stroke-2') %>
+          <span>Export</span>
+        <% end %>
+        <% if !@template.archived_at? && can?(:create, Submission) %>
+          <%= link_to new_template_submission_path(@template), class: 'white-button !border', data: { turbo_frame: 'modal' } do %>
+            <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
+            <span>Add <span class="hidden md:inline">Recipients</span></span>
+          <% end %>
+        <% end %>
+      </div>
     </div>
   </div>
 <% end %>

app/views/templates_code_modal/_placeholder.html.erb

@@ -0,0 +1,11 @@
+<div class="alert">
+  <%= svg_icon('info_circle', class: 'w-6 h-6') %>
+  <div>
+    <p class="font-bold">API and Embedding</p>
+    <p class="text-gray-700">
+      Unlock with DocuSeal Pro
+      <br>
+      <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}" %>">Learn More</a>
+    </p>
+  </div>
+</div>