From 69376c0faf61bc385d4bc164688c3412f91b556f Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete@docuseal.com>
Date: Mon, 31 Mar 2025 21:50:04 +0300
Subject: [PATCH 01/10] fix acro form fields

---
 lib/templates/find_acro_fields.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/templates/find_acro_fields.rb b/lib/templates/find_acro_fields.rb
index 97088390..b9fcc3d8 100644
--- a/lib/templates/find_acro_fields.rb
+++ b/lib/templates/find_acro_fields.rb
@@ -190,7 +190,7 @@ module Templates
         }
       elsif field.field_type == :Tx
         if field[:AA] && ((field[:AA][:F] && field[:AA][:F][:JS].include?('AFDate_')) ||
-            (field[:AA][:K] && field[:AA][:F][:JS].include?('AFDate_')))
+            (field[:AA][:K] && field[:AA][:K][:JS].include?('AFDate_')))
           if (format = field[:AA][:F][:JS][DATE_FORMAT_REGEXP])
             attrs[:preferences] ||= {}
             attrs[:preferences][:format] = format.upcase

From e5db61e3583d2d4b2115cca53aadb703891d97d0 Mon Sep 17 00:00:00 2001
From: Alex Turchyn <alex@docuseal.com>
Date: Mon, 31 Mar 2025 16:59:33 +0300
Subject: [PATCH 02/10] add API specs for completed submitter

---
 spec/requests/submissions_spec.rb | 17 ++++++++++++++++-
 spec/requests/submitters_spec.rb  | 21 +++++++++++++++++++--
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/spec/requests/submissions_spec.rb b/spec/requests/submissions_spec.rb
index 502f6520..020bd908 100644
--- a/spec/requests/submissions_spec.rb
+++ b/spec/requests/submissions_spec.rb
@@ -104,6 +104,21 @@ describe 'Submission API', type: :request do
       expect(response.parsed_body).to eq(JSON.parse(create_submission_body(submission).to_json))
     end
 
+    it 'creates a submission when the submitter is marked as completed' do
+      post '/api/submissions', headers: { 'x-auth-token': author.access_token.token }, params: {
+        template_id: templates[0].id,
+        submitters: [{ role: 'First Party', email: 'john.doe@example.com', completed: true }]
+      }.to_json
+
+      expect(response).to have_http_status(:ok)
+
+      submission = Submission.last
+      submitter = submission.submitters.first
+
+      expect(submitter.status).to eq('completed')
+      expect(submitter.completed_at).not_to be_nil
+    end
+
     it 'creates a submission when some submitter roles are not provided' do
       post '/api/submissions', headers: { 'x-auth-token': author.access_token.token }, params: {
         template_id: multiple_submitters_template.id,
@@ -395,7 +410,7 @@ describe 'Submission API', type: :request do
         preferences: { send_email: true, send_sms: false },
         role: submitter.template.submitters.find { |s| s['uuid'] == submitter.uuid }['name'],
         embed_src: "#{Docuseal::DEFAULT_APP_URL}/s/#{submitter.slug}",
-        values: []
+        values: Submitters::SerializeForWebhook.build_values_array(submitter)
       }
     end
   end
diff --git a/spec/requests/submitters_spec.rb b/spec/requests/submitters_spec.rb
index ffe35cd9..023de7ee 100644
--- a/spec/requests/submitters_spec.rb
+++ b/spec/requests/submitters_spec.rb
@@ -95,6 +95,23 @@ describe 'Submitter API', type: :request do
       expect(submitter.email).to eq('john.doe+updated@example.com')
       expect(response.parsed_body).to eq(JSON.parse(update_submitter_body(submitter).to_json))
     end
+
+    it 'marks a submitter as completed' do
+      submitter = create(:submission, :with_submitters, :with_events,
+                         template: templates[0],
+                         created_by_user: author).submitters.first
+
+      put "/api/submitters/#{submitter.id}", headers: { 'x-auth-token': author.access_token.token }, params: {
+        completed: true
+      }.to_json
+
+      expect(response).to have_http_status(:ok)
+
+      submitter.reload
+
+      expect(submitter.status).to eq('completed')
+      expect(submitter.completed_at).not_to be_nil
+    end
   end
 
   private
@@ -134,8 +151,8 @@ describe 'Submitter API', type: :request do
           data: event.data.slice(:reason)
         }
       end,
-      values: [],
-      documents: [],
+      values: Submitters::SerializeForWebhook.build_values_array(submitter),
+      documents: Submitters::SerializeForWebhook.build_documents_array(submitter),
       role: submitter.template.submitters.find { |s| s['uuid'] == submitter.uuid }['name']
     }
   end

From dd559e90f16c248e3deea20707689402903f0094 Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete@docuseal.com>
Date: Tue, 1 Apr 2025 10:12:54 +0300
Subject: [PATCH 03/10] add archived filter

---
 app/controllers/api/submissions_controller.rb | 4 ++++
 app/models/submission.rb                      | 1 +
 2 files changed, 5 insertions(+)

diff --git a/app/controllers/api/submissions_controller.rb b/app/controllers/api/submissions_controller.rb
index 51a8e43e..89d361ec 100644
--- a/app/controllers/api/submissions_controller.rb
+++ b/app/controllers/api/submissions_controller.rb
@@ -17,6 +17,10 @@ module Api
         submissions = submissions.joins(template: :folder).where(folder: { name: params[:template_folder] })
       end
 
+      if params.key?(:archived)
+        submissions = params[:archived].in?(['true', true]) ? submissions.archived : submissions.active
+      end
+
       submissions = Submissions::Filter.call(submissions, current_user, params)
 
       submissions = paginate(submissions.preload(:created_by_user, :submitters,
diff --git a/app/models/submission.rb b/app/models/submission.rb
index c0f1c92c..f42749b2 100644
--- a/app/models/submission.rb
+++ b/app/models/submission.rb
@@ -64,6 +64,7 @@ class Submission < ApplicationRecord
            through: :template, source: :documents_attachments
 
   scope :active, -> { where(archived_at: nil) }
+  scope :archived, -> { where.not(archived_at: nil) }
   scope :pending, -> { joins(:submitters).where(submitters: { completed_at: nil }).group(:id) }
   scope :completed, lambda {
     where.not(Submitter.where(Submitter.arel_table[:submission_id].eq(Submission.arel_table[:id])

From 2573d8cb1975a5cb10ec364c65c32218d887f68e Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete@docuseal.com>
Date: Tue, 1 Apr 2025 10:13:50 +0300
Subject: [PATCH 04/10] fix n+1

---
 lib/submissions/generate_export_files.rb | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/lib/submissions/generate_export_files.rb b/lib/submissions/generate_export_files.rb
index 506ee1ba..a42878d8 100644
--- a/lib/submissions/generate_export_files.rb
+++ b/lib/submissions/generate_export_files.rb
@@ -58,7 +58,8 @@ module Submissions
     end
 
     def build_table_rows(submissions)
-      submissions.map do |submission|
+      submissions.preload(submitters: [attachments_attachments: :blob, documents_attachments: :blob])
+                 .find_each.map do |submission|
         submission_data = []
         submitters_count = submission.submitters.size
 

From 7a4629bf79b77e975cf7619ac3d32c8f773b691b Mon Sep 17 00:00:00 2001
From: Alex Turchyn <alex@docuseal.com>
Date: Mon, 17 Feb 2025 19:47:46 +0200
Subject: [PATCH 05/10] improve drag'n'drop in the builder

---
 app/javascript/template_builder/builder.vue   | 126 ++++++++++++------
 app/javascript/template_builder/document.vue  |   6 +
 .../template_builder/drag_placeholder.vue     | 115 ++++++++++++++++
 app/javascript/template_builder/field.vue     |   9 +-
 app/javascript/template_builder/fields.vue    |  67 +++++++---
 app/javascript/template_builder/page.vue      |  30 ++++-
 6 files changed, 290 insertions(+), 63 deletions(-)
 create mode 100644 app/javascript/template_builder/drag_placeholder.vue

diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index 1cc9dbf1..cf3fe21a 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -1,9 +1,18 @@
 <template>
   <div
+    ref="dragContainer"
     style="max-width: 1600px"
     class="mx-auto pl-3 h-full"
     :class="isMobile ? 'pl-4' : 'md:pl-4'"
+    @dragover="onDragover"
   >
+    <DragPlaceholder
+      ref="dragPlaceholder"
+      :field="fieldsDragFieldRef.value || toRaw(dragField)"
+      :is-field="template.fields.includes(fieldsDragFieldRef.value)"
+      :is-default="defaultFields.includes(toRaw(dragField))"
+      :is-required="defaultRequiredFields.includes(toRaw(dragField))"
+    />
     <div
       v-if="pendingFieldAttachmentUuids.length && editable"
       class="top-1.5 sticky h-0 z-20 max-w-2xl mx-auto"
@@ -269,6 +278,7 @@
                 :allow-draw="!onlyDefinedFields || drawField"
                 :data-document-uuid="document.uuid"
                 :default-submitters="defaultSubmitters"
+                :drag-field-placeholder="fieldsDragFieldRef.value || dragField"
                 :with-field-placeholder="withFieldPlaceholder"
                 :draw-field="drawField"
                 :draw-field-type="drawFieldType"
@@ -378,8 +388,9 @@
             @set-draw="[drawField = $event.field, drawOption = $event.option]"
             @set-draw-type="[drawFieldType = $event, showDrawField = true]"
             @set-drag="dragField = $event"
+            @set-drag-placeholder="$refs.dragPlaceholder.dragPlaceholder = $event"
             @change-submitter="selectedSubmitter = $event"
-            @drag-end="dragField = null"
+            @drag-end="[dragField = null, $refs.dragPlaceholder.dragPlaceholder = null]"
             @scroll-to-area="scrollToArea"
           />
         </div>
@@ -418,6 +429,7 @@
 <script>
 import Upload from './upload'
 import Dropzone from './dropzone'
+import DragPlaceholder from './drag_placeholder'
 import Fields from './fields'
 import MobileDrawField from './mobile_draw_field'
 import Document from './document'
@@ -429,13 +441,14 @@ import MobileFields from './mobile_fields'
 import FieldSubmitter from './field_submitter'
 import { IconPlus, IconUsersPlus, IconDeviceFloppy, IconChevronDown, IconEye, IconWritingSign, IconInnerShadowTop, IconInfoCircle, IconAdjustments } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
-import { ref, computed } from 'vue'
+import { ref, computed, toRaw } from 'vue'
 import * as i18n from './i18n'
 
 export default {
   name: 'TemplateBuilder',
   components: {
     Upload,
+    DragPlaceholder,
     Document,
     Fields,
     IconInfoCircle,
@@ -460,6 +473,7 @@ export default {
       template: this.template,
       save: this.save,
       t: this.t,
+      assignDropAreaSize: this.assignDropAreaSize,
       currencies: this.currencies,
       locale: this.locale,
       baseFetch: this.baseFetch,
@@ -836,6 +850,17 @@ export default {
     this.documentRefs = []
   },
   methods: {
+    toRaw,
+    onDragover (e) {
+      if (this.$refs.dragPlaceholder?.dragPlaceholder) {
+        this.$refs.dragPlaceholder.isMask = e.target.id === 'mask'
+
+        const ref = this.$refs.dragPlaceholder.dragPlaceholder
+
+        ref.x = e.clientX - ref.offsetX
+        ref.y = e.clientY - ref.offsetY
+      }
+    },
     reorderFields (item) {
       const itemFields = []
       const fields = []
@@ -1319,6 +1344,10 @@ export default {
       }
     },
     onDropfield (area) {
+      if (this.$refs.dragPlaceholder) {
+        this.$refs.dragPlaceholder.dragPlaceholder = null
+      }
+
       if (!this.editable) {
         return
       }
@@ -1331,6 +1360,10 @@ export default {
         ...this.dragField
       }
 
+      if (!field.type) {
+        field.type = 'text'
+      }
+
       if (!this.fieldsDragFieldRef.value) {
         if (['select', 'multiple', 'radio'].includes(field.type)) {
           if (this.dragField?.options?.length) {
@@ -1357,31 +1390,69 @@ export default {
         attachment_uuid: area.attachment_uuid
       }
 
-      const previousField = [...this.template.fields].reverse().find((f) => f.type === field.type)
+      this.assignDropAreaSize(fieldArea, field, area)
+
+      if (field.width) {
+        delete field.width
+      }
+
+      if (field.height) {
+        delete field.height
+      }
+
+      field.areas ||= []
+
+      field.areas.push(fieldArea)
+
+      this.selectedAreaRef.value = fieldArea
+
+      if (this.template.fields.indexOf(field) === -1) {
+        this.template.fields.push(field)
+      }
+
+      this.save()
+
+      document.activeElement?.blur()
+
+      if (field.type === 'heading') {
+        this.$nextTick(() => {
+          const documentRef = this.documentRefs.find((e) => e.document.uuid === area.attachment_uuid)
+          const areaRef = documentRef.pageRefs[area.page].areaRefs.find((ref) => ref.area === this.selectedAreaRef.value)
+
+          areaRef.isHeadingSelected = true
+
+          areaRef.focusValueInput()
+        })
+      }
+    },
+    assignDropAreaSize (fieldArea, field, area) {
+      const fieldType = field.type || 'text'
+
+      const previousField = [...this.template.fields].reverse().find((f) => f.type === fieldType)
 
       let baseArea
 
-      if (this.selectedField?.type === field.type) {
+      if (this.selectedField?.type === fieldType) {
         baseArea = this.selectedAreaRef.value
       } else if (previousField?.areas?.length) {
         baseArea = previousField.areas[previousField.areas.length - 1]
       } else {
-        if (['checkbox'].includes(field.type)) {
+        if (['checkbox'].includes(fieldType)) {
           baseArea = {
             w: area.maskW / 30 / area.maskW,
             h: area.maskW / 30 / area.maskW * (area.maskW / area.maskH)
           }
-        } else if (field.type === 'image') {
+        } else if (fieldType === 'image') {
           baseArea = {
             w: area.maskW / 5 / area.maskW,
             h: (area.maskW / 5 / area.maskW) * (area.maskW / area.maskH)
           }
-        } else if (field.type === 'signature' || field.type === 'stamp' || field.type === 'verification') {
+        } else if (fieldType === 'signature' || fieldType === 'stamp' || fieldType === 'verification') {
           baseArea = {
             w: area.maskW / 5 / area.maskW,
             h: (area.maskW / 5 / area.maskW) * (area.maskW / area.maskH) / 2
           }
-        } else if (field.type === 'initials') {
+        } else if (fieldType === 'initials') {
           baseArea = {
             w: area.maskW / 10 / area.maskW,
             h: area.maskW / 35 / area.maskW
@@ -1398,50 +1469,25 @@ export default {
       fieldArea.h = baseArea.h
       fieldArea.y = fieldArea.y - baseArea.h / 2
 
-      if (field.type === 'cells') {
+      if (fieldType === 'cells') {
         fieldArea.cell_w = baseArea.cell_w || (baseArea.w / 5)
       }
 
-      field.areas ||= []
-
-      const lastArea = field.areas[field.areas.length - 1]
+      if (field.areas?.length) {
+        const lastArea = field.areas[field.areas.length - 1]
 
-      if (lastArea) {
-        fieldArea.w = lastArea.w
-        fieldArea.h = lastArea.h
+        if (lastArea) {
+          fieldArea.w = lastArea.w
+          fieldArea.h = lastArea.h
+        }
       }
 
       if (field.width) {
         fieldArea.w = field.width / area.maskW
-        delete field.width
       }
 
       if (field.height) {
         fieldArea.h = field.height / area.maskH
-        delete field.height
-      }
-
-      field.areas.push(fieldArea)
-
-      this.selectedAreaRef.value = fieldArea
-
-      if (this.template.fields.indexOf(field) === -1) {
-        this.template.fields.push(field)
-      }
-
-      this.save()
-
-      document.activeElement?.blur()
-
-      if (field.type === 'heading') {
-        this.$nextTick(() => {
-          const documentRef = this.documentRefs.find((e) => e.document.uuid === area.attachment_uuid)
-          const areaRef = documentRef.pageRefs[area.page].areaRefs.find((ref) => ref.area === this.selectedAreaRef.value)
-
-          areaRef.isHeadingSelected = true
-
-          areaRef.focusValueInput()
-        })
       }
     },
     addBlankPage () {
diff --git a/app/javascript/template_builder/document.vue b/app/javascript/template_builder/document.vue
index 88680e54..ea0b850e 100644
--- a/app/javascript/template_builder/document.vue
+++ b/app/javascript/template_builder/document.vue
@@ -13,6 +13,7 @@
       :is-drag="isDrag"
       :with-field-placeholder="withFieldPlaceholder"
       :default-fields="defaultFields"
+      :drag-field-placeholder="dragFieldPlaceholder"
       :default-submitters="defaultSubmitters"
       :draw-field="drawField"
       :draw-field-type="drawFieldType"
@@ -39,6 +40,11 @@ export default {
       type: Object,
       required: true
     },
+    dragFieldPlaceholder: {
+      type: Object,
+      required: false,
+      default: null
+    },
     inputMode: {
       type: Boolean,
       required: false,
diff --git a/app/javascript/template_builder/drag_placeholder.vue b/app/javascript/template_builder/drag_placeholder.vue
new file mode 100644
index 00000000..71a1236c
--- /dev/null
+++ b/app/javascript/template_builder/drag_placeholder.vue
@@ -0,0 +1,115 @@
+<template>
+  <Field
+    v-if="dragPlaceholder && isField && !isMask && field"
+    ref="dragPlaceholder"
+    :style="dragPlaceholderStyle"
+    :field="field"
+    :with-options="false"
+    class="fixed z-20 pointer-events-none"
+    :editable="false"
+  />
+  <div
+    v-else-if="dragPlaceholder && (isDefault || isRequired) && !isMask && field"
+    ref="dragPlaceholder"
+    :style="[dragPlaceholderStyle, { backgroundColor: backgroundColor }]"
+    class="fixed z-20 border border-base-300 rounded group default-field fields-list-item pointer-events-none"
+  >
+    <div class="flex items-center justify-between relative cursor-grab">
+      <div class="flex items-center p-1 space-x-1">
+        <IconDrag />
+        <component
+          :is="fieldIcons[field.type || 'text']"
+          :stroke-width="1.6"
+          :width="20"
+        />
+        <span class="block pl-0.5">
+          {{ field.title || field.name }}
+        </span>
+      </div>
+      <span
+        v-if="isRequired"
+        :data-tip="t('required')"
+        class="text-red-400 text-3xl pr-1.5 tooltip tooltip-left h-8"
+      >
+        *
+      </span>
+    </div>
+  </div>
+  <button
+    v-else-if="dragPlaceholder && !isMask && field"
+    ref="dragPlaceholder"
+    class="fixed field-type-button z-20 flex items-center justify-center border border-dashed w-full rounded border-base-content/20 opacity-90 pointer-events-none"
+    :style="[dragPlaceholderStyle, { backgroundColor }]"
+  >
+    <div
+      class="flex items-console cursor-grab h-full absolute left-0 bg-base-200/50"
+    >
+      <IconDrag class="my-auto" />
+    </div>
+    <div class="flex items-center flex-col px-2 py-2">
+      <component :is="fieldIcons[field.type || 'text']" />
+      <span class="text-xs mt-1">
+        {{ fieldNames[field.type || 'text'] }}
+      </span>
+    </div>
+  </button>
+</template>
+
+<script>
+import Field from './field'
+import IconDrag from './icon_drag'
+import FieldType from './field_type'
+
+export default {
+  name: 'DragPlaceholder',
+  components: {
+    Field,
+    IconDrag
+  },
+  inject: ['t', 'backgroundColor'],
+  props: {
+    field: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    isDefault: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isRequired: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isField: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data () {
+    return {
+      isMask: false,
+      dragPlaceholder: null
+    }
+  },
+  computed: {
+    dragPlaceholderStyle () {
+      if (this.dragPlaceholder) {
+        return {
+          left: this.dragPlaceholder.x + 'px',
+          top: this.dragPlaceholder.y + 'px',
+          width: this.dragPlaceholder.w + 'px',
+          height: this.dragPlaceholder.h + 'px'
+        }
+      } else {
+        return {}
+      }
+    },
+    fieldNames: FieldType.computed.fieldNames,
+    fieldIcons: FieldType.computed.fieldIcons
+  }
+}
+</script>
diff --git a/app/javascript/template_builder/field.vue b/app/javascript/template_builder/field.vue
index 79bf6acb..a190d6cb 100644
--- a/app/javascript/template_builder/field.vue
+++ b/app/javascript/template_builder/field.vue
@@ -3,7 +3,7 @@
     class="list-field group mb-2"
   >
     <div
-      class="border border-base-300 rounded rounded-tr-none relative group fields-list-item"
+      class="border border-base-300 rounded relative group fields-list-item"
       :style="{ backgroundColor: backgroundColor }"
     >
       <div class="flex items-center justify-between relative group/contenteditable-container">
@@ -149,7 +149,7 @@
         </div>
       </div>
       <div
-        v-if="field.options"
+        v-if="field.options && withOptions"
         ref="options"
         class="border-t border-base-300 mx-2 pt-2 space-y-1.5"
         draggable="true"
@@ -302,6 +302,11 @@ export default {
       type: Object,
       required: true
     },
+    withOptions: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     defaultField: {
       type: Object,
       required: false,
diff --git a/app/javascript/template_builder/fields.vue b/app/javascript/template_builder/fields.vue
index d9ad7b95..38405ab5 100644
--- a/app/javascript/template_builder/fields.vue
+++ b/app/javascript/template_builder/fields.vue
@@ -25,11 +25,11 @@
       :data-uuid="field.uuid"
       :field="field"
       :type-index="fields.filter((f) => f.type === field.type).indexOf(field)"
-      :editable="editable && (!fieldsDragFieldRef.value || fieldsDragFieldRef.value !== field)"
+      :editable="editable"
       :default-field="defaultFieldsIndex[field.name]"
       :draggable="editable"
-      @dragstart="fieldsDragFieldRef.value = field"
-      @dragend="fieldsDragFieldRef.value = null"
+      @dragstart="[fieldsDragFieldRef.value = field, removeDragOverlay($event), setDragPlaceholder($event)]"
+      @dragend="[fieldsDragFieldRef.value = null, $emit('set-drag-placeholder', null)]"
       @remove="removeField"
       @scroll-to="$emit('scroll-to-area', $event)"
       @set-draw="$emit('set-draw', $event)"
@@ -74,8 +74,8 @@
         <div
           :style="{ backgroundColor }"
           draggable="true"
-          class="border border-base-300 rounded rounded-tr-none relative group mb-2 default-field fields-list-item"
-          @dragstart="onDragstart({ type: 'text', ...field })"
+          class="border border-base-300 rounded relative group mb-2 default-field fields-list-item"
+          @dragstart="onDragstart($event, field)"
           @dragend="$emit('drag-end')"
         >
           <div class="flex items-center justify-between relative cursor-grab">
@@ -116,7 +116,7 @@
         class="field-type-button group flex items-center justify-center border border-dashed w-full rounded relative fields-grid-item"
         :style="{ backgroundColor }"
         :class="drawFieldType === type ? 'border-base-content/40' : 'border-base-300 hover:border-base-content/20'"
-        @dragstart="onDragstart({ type: type })"
+        @dragstart="onDragstart($event, { type: type })"
         @dragend="$emit('drag-end')"
         @click="['file', 'payment', 'verification'].includes(type) ? $emit('add-field', type) : $emit('set-draw-type', type)"
       >
@@ -292,7 +292,7 @@ export default {
       required: true
     }
   },
-  emits: ['add-field', 'set-draw', 'set-draw-type', 'set-drag', 'drag-end', 'scroll-to-area', 'change-submitter'],
+  emits: ['add-field', 'set-draw', 'set-draw-type', 'set-drag', 'drag-end', 'scroll-to-area', 'change-submitter', 'set-drag-placeholder'],
   data () {
     return {
       defaultFieldsSearch: ''
@@ -343,22 +343,53 @@ export default {
     }
   },
   methods: {
-    onDragstart (field) {
+    onDragstart (event, field) {
+      this.removeDragOverlay(event)
+
+      this.setDragPlaceholder(event)
+
       this.$emit('set-drag', field)
     },
+    setDragPlaceholder (event) {
+      this.$emit('set-drag-placeholder', {
+        offsetX: event.offsetX,
+        offsetY: event.offsetY,
+        x: event.clientX - event.offsetX,
+        y: event.clientY - event.offsetY,
+        w: event.currentTarget.clientWidth + 2,
+        h: event.currentTarget.clientHeight + 2
+      })
+    },
+    removeDragOverlay (event) {
+      const root = this.$el.getRootNode()
+      const hiddenEl = document.createElement('div')
+
+      hiddenEl.style.width = '1px'
+      hiddenEl.style.height = '1px'
+      hiddenEl.style.opacity = '0'
+      hiddenEl.style.position = 'fixed'
+
+      root.querySelector('#docuseal_modal_container').appendChild(hiddenEl)
+
+      event.dataTransfer.setDragImage(hiddenEl, 0, 0)
+
+      setTimeout(() => { hiddenEl.remove() }, 1000)
+    },
     onFieldDragover (e) {
-      const targetField = e.target.closest('[data-uuid]')
-      const dragField = this.$refs.fields.querySelector(`[data-uuid="${this.fieldsDragFieldRef.value.uuid}"]`)
+      if (this.fieldsDragFieldRef.value) {
+        const targetField = e.target.closest('[data-uuid]')
+        const dragField = this.$refs.fields.querySelector(`[data-uuid="${this.fieldsDragFieldRef.value.uuid}"]`)
 
-      if (dragField && targetField && targetField !== dragField) {
-        const fields = Array.from(this.$refs.fields.children)
-        const currentIndex = fields.indexOf(dragField)
-        const targetIndex = fields.indexOf(targetField)
+        if (dragField && targetField && targetField !== dragField) {
+          const fields = Array.from(this.$refs.fields.children)
+          const currentIndex = fields.indexOf(dragField)
+          const targetIndex = fields.indexOf(targetField)
 
-        if (currentIndex < targetIndex) {
-          targetField.after(dragField)
-        } else {
-          targetField.before(dragField)
+          if (currentIndex < targetIndex) {
+            targetField.after(dragField)
+          } else {
+            targetField.before(dragField)
+          }
         }
       }
     },
diff --git a/app/javascript/template_builder/page.vue b/app/javascript/template_builder/page.vue
index 4161fd0b..4ff6bebf 100644
--- a/app/javascript/template_builder/page.vue
+++ b/app/javascript/template_builder/page.vue
@@ -37,7 +37,7 @@
       <FieldArea
         v-if="newArea"
         :is-draw="true"
-        :field="{ submitter_uuid: selectedSubmitter.uuid, type: drawField?.type || defaultFieldType }"
+        :field="{ submitter_uuid: selectedSubmitter.uuid, type: drawField?.type || dragFieldPlaceholder?.type || defaultFieldType }"
         :area="newArea"
       />
     </div>
@@ -49,7 +49,9 @@
       :class="{ 'z-10': !isMobile, 'cursor-grab': isDrag, 'cursor-nwse-resize': drawField, [resizeDirectionClasses[resizeDirection]]: !!resizeDirectionClasses }"
       @pointermove="onPointermove"
       @pointerdown="onStartDraw"
-      @dragover.prevent
+      @dragover.prevent="onDragover"
+      @dragenter="onDragenter"
+      @dragleave="newArea = null"
       @drop="onDrop"
       @pointerup="onPointerup"
     />
@@ -64,12 +66,17 @@ export default {
   components: {
     FieldArea
   },
-  inject: ['fieldTypes', 'defaultDrawFieldType', 'fieldsDragFieldRef'],
+  inject: ['fieldTypes', 'defaultDrawFieldType', 'fieldsDragFieldRef', 'assignDropAreaSize'],
   props: {
     image: {
       type: Object,
       required: true
     },
+    dragFieldPlaceholder: {
+      type: Object,
+      required: false,
+      default: null
+    },
     areas: {
       type: Array,
       required: false,
@@ -192,7 +199,24 @@ export default {
         this.areaRefs.push(el)
       }
     },
+    onDragenter (e) {
+      this.newArea = {}
+
+      this.assignDropAreaSize(this.newArea, this.dragFieldPlaceholder, {
+        maskW: this.$refs.mask.clientWidth,
+        maskH: this.$refs.mask.clientHeight
+      })
+
+      this.newArea.x = (e.offsetX - 6) / this.$refs.mask.clientWidth
+      this.newArea.y = e.offsetY / this.$refs.mask.clientHeight - this.newArea.h / 2
+    },
+    onDragover (e) {
+      this.newArea.x = (e.offsetX - 6) / this.$refs.mask.clientWidth
+      this.newArea.y = e.offsetY / this.$refs.mask.clientHeight - this.newArea.h / 2
+    },
     onDrop (e) {
+      this.newArea = null
+
       this.$emit('drop-field', {
         x: e.offsetX,
         y: e.offsetY,

From b97854f2fe8d169cec05edc00f70b74a7386c20d Mon Sep 17 00:00:00 2001
From: Alex Turchyn <alex@docuseal.com>
Date: Wed, 2 Apr 2025 23:52:58 +0300
Subject: [PATCH 06/10] improve account deletion confirmation message

---
 app/views/accounts/show.html.erb |  2 +-
 config/locales/i18n.yml          | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/views/accounts/show.html.erb b/app/views/accounts/show.html.erb
index 7c6db5eb..6f1ba1d3 100644
--- a/app/views/accounts/show.html.erb
+++ b/app/views/accounts/show.html.erb
@@ -174,7 +174,7 @@
         <h2 class="text-2xl font-bold mb-2">
           <%= t('danger_zone') %>
         </h2>
-        <%= button_to button_title(title: t('delete_my_account')), settings_account_path, class: 'btn btn-outline btn-error block', data: { turbo_confirm: t('schedule_account_for_deletion_') }, method: :delete, id: :account_delete_button %>
+        <%= button_to button_title(title: t('delete_my_account')), settings_account_path, class: 'btn btn-outline btn-error block', data: { turbo_confirm: t('you_are_scheduling_your_account_for_deletion_after_deletion_your_data_will_be_permanently_removed_and_cannot_be_recovered_click_ok_if_you_would_like_to_continue') }, method: :delete, id: :account_delete_button %>
       </div>
     <% end %>
   </div>
diff --git a/config/locales/i18n.yml b/config/locales/i18n.yml
index 4b758b49..83ff1bb7 100644
--- a/config/locales/i18n.yml
+++ b/config/locales/i18n.yml
@@ -166,7 +166,7 @@ en: &en
   connect_salesforce: Connect Salesforce
   danger_zone: Danger Zone
   delete_my_account: Delete my account
-  schedule_account_for_deletion_: Schedule account for deletion?
+  you_are_scheduling_your_account_for_deletion_after_deletion_your_data_will_be_permanently_removed_and_cannot_be_recovered_click_ok_if_you_would_like_to_continue: "You are scheduling your account for deletion. After deletion, your data will be permanently removed and cannot be recovered.\n\nClick OK if you would like to continue."
   account_information_has_been_updated: Account information has been updated.
   should_be_a_valid_url: should be a valid URL
   your_account_removal_request_will_be_processed_within_2_months_please_contact_us_if_you_want_to_keep_your_account: Your account removal request will be processed within 2 months. Please contact us if you want to keep your account.
@@ -893,7 +893,7 @@ es: &es
   connect_salesforce: Conectar Salesforce
   danger_zone: Zona de peligro
   delete_my_account: Eliminar mi cuenta
-  schedule_account_for_deletion_: ¿Programar la eliminación de la cuenta?
+  you_are_scheduling_your_account_for_deletion_after_deletion_your_data_will_be_permanently_removed_and_cannot_be_recovered_click_ok_if_you_would_like_to_continue: "Estás programando la eliminación de tu cuenta. Después de la eliminación, tus datos se eliminarán permanentemente y no podrán recuperarse.\n\nHaz clic en OK si deseas continuar."
   account_information_has_been_updated: La información de la cuenta ha sido actualizada.
   should_be_a_valid_url: debe ser una URL válida
   your_account_removal_request_will_be_processed_within_2_months_please_contact_us_if_you_want_to_keep_your_account: Tu solicitud de eliminación de cuenta se procesará en un plazo de 2 meses. Por favor contáctanos si deseas mantener tu cuenta.
@@ -1619,7 +1619,7 @@ it: &it
   connect_salesforce: Connetti Salesforce
   danger_zone: Zona di pericolo
   delete_my_account: Elimina il mio account
-  schedule_account_for_deletion_: "Programmare l'eliminazione dell'account?"
+  you_are_scheduling_your_account_for_deletion_after_deletion_your_data_will_be_permanently_removed_and_cannot_be_recovered_click_ok_if_you_would_like_to_continue: "Stai programmando l'eliminazione del tuo account. Dopo l'eliminazione, i tuoi dati saranno rimossi in modo permanente e non potranno essere recuperati.\n\nFai clic su OK se desideri continuare."
   account_information_has_been_updated: "Le informazioni dell'account sono state aggiornate."
   should_be_a_valid_url: deve essere un URL valido
   your_account_removal_request_will_be_processed_within_2_months_please_contact_us_if_you_want_to_keep_your_account: "La tua richiesta di rimozione dell'account sarà elaborata entro 2 mesi. Contattaci se desideri mantenere il tuo account."
@@ -2347,7 +2347,7 @@ fr: &fr
   connect_salesforce: Connecter Salesforce
   danger_zone: Zone dangereuse
   delete_my_account: Supprimer mon compte
-  schedule_account_for_deletion_: Programmer la suppression du compte?
+  you_are_scheduling_your_account_for_deletion_after_deletion_your_data_will_be_permanently_removed_and_cannot_be_recovered_click_ok_if_you_would_like_to_continue: "Vous programmez la suppression de votre compte. Après suppression, vos données seront définitivement supprimées et ne pourront pas être récupérées.\n\nCliquez sur OK si vous souhaitez continuer."
   account_information_has_been_updated: Les informations du compte ont été mises à jour.
   should_be_a_valid_url: doit être une URL valide
   your_account_removal_request_will_be_processed_within_2_months_please_contact_us_if_you_want_to_keep_your_account: Votre demande de suppression du compte sera traitée dans un délai de 2 mois. Veuillez nous contacter si vous souhaitez conserver votre compte.
@@ -3074,7 +3074,7 @@ pt: &pt
   connect_salesforce: Conectar Salesforce
   danger_zone: Zona de perigo
   delete_my_account: Excluir minha conta
-  schedule_account_for_deletion_: Agendar exclusão da conta?
+  you_are_scheduling_your_account_for_deletion_after_deletion_your_data_will_be_permanently_removed_and_cannot_be_recovered_click_ok_if_you_would_like_to_continue: "Você está agendando a exclusão da sua conta. Após a exclusão, seus dados serão permanentemente removidos e não poderão ser recuperados.\n\nClique em OK se desejar continuar."
   account_information_has_been_updated: As informações da conta foram atualizadas.
   should_be_a_valid_url: deve ser um URL válido
   your_account_removal_request_will_be_processed_within_2_months_please_contact_us_if_you_want_to_keep_your_account: Seu pedido de remoção da conta será processado em até 2 meses. Entre em contato conosco se você quiser manter sua conta.
@@ -3801,7 +3801,7 @@ de: &de
   connect_salesforce: Salesforce verbinden
   danger_zone: Gefahrenzone
   delete_my_account: Mein Konto löschen
-  schedule_account_for_deletion_: Konto zur Löschung einplanen?
+  you_are_scheduling_your_account_for_deletion_after_deletion_your_data_will_be_permanently_removed_and_cannot_be_recovered_click_ok_if_you_would_like_to_continue: "Du planst die Löschung deines Kontos. Nach der Löschung werden deine Daten dauerhaft entfernt und können nicht wiederhergestellt werden.\n\nKlicke auf OK, wenn du fortfahren möchtest."
   account_information_has_been_updated: Die Kontoinformationen wurden aktualisiert.
   should_be_a_valid_url: sollte eine gültige URL sein
   your_account_removal_request_will_be_processed_within_2_months_please_contact_us_if_you_want_to_keep_your_account: Deine Anfrage zur Kontolöschung wird innerhalb von 2 Monaten bearbeitet. Bitte kontaktiere uns, wenn du dein Konto behalten möchtest.

From bff1651966fc468105820d48e98a101c630de473 Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete@docuseal.com>
Date: Thu, 3 Apr 2025 17:33:58 +0300
Subject: [PATCH 07/10] fix long font preview

---
 app/javascript/template_builder/font_modal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/template_builder/font_modal.vue b/app/javascript/template_builder/font_modal.vue
index 014c01f8..cbe38915 100644
--- a/app/javascript/template_builder/font_modal.vue
+++ b/app/javascript/template_builder/font_modal.vue
@@ -143,7 +143,7 @@
           >
             <span
               contenteditable="true"
-              class="outline-none"
+              class="outline-none whitespace-nowrap truncate"
             >
               {{ field.default_value || field.name || buildDefaultName(field, template.fields) }}
             </span>

From cfdc978a2a895f5140e40dc8e48f53adfe7754c3 Mon Sep 17 00:00:00 2001
From: Alex Turchyn <alex@docuseal.com>
Date: Fri, 21 Feb 2025 23:56:18 +0200
Subject: [PATCH 08/10] add app tour

---
 app/controllers/user_configs_controller.rb   |   4 +-
 app/javascript/application.js                |   5 +-
 app/javascript/elements/app_tour.js          | 338 +++++++++++++++++++
 app/javascript/elements/file_dropzone.js     |   2 +-
 app/javascript/template_builder/builder.vue  |   9 +
 app/javascript/template_builder/fields.vue   |  29 +-
 app/javascript/template_builder/i18n.js      |  24 +-
 app/models/user_config.rb                    |   1 +
 app/views/accounts/show.html.erb             |   1 +
 app/views/dashboard/_toggle_view.html.erb    |   2 +-
 app/views/shared/_app_tour.html.erb          |   6 +
 app/views/shared/_classes.html.erb           |   2 +-
 app/views/shared/_clipboard_copy.html.erb    |   2 +-
 app/views/shared/_navbar.html.erb            |   2 +-
 app/views/shared/_settings_nav.html.erb      |   4 +-
 app/views/templates/_submission.html.erb     |   4 +-
 app/views/templates/_title.html.erb          |   2 +-
 app/views/templates/_upload_button.html.erb  |   2 +-
 app/views/templates/edit.html.erb            |  10 +-
 app/views/templates/show.html.erb            |   9 +-
 app/views/templates_dashboard/index.html.erb |  25 +-
 config/locales/i18n.yml                      | 259 ++++++++++++++
 package.json                                 |   1 +
 yarn.lock                                    |   5 +
 24 files changed, 722 insertions(+), 26 deletions(-)
 create mode 100644 app/javascript/elements/app_tour.js
 create mode 100644 app/views/shared/_app_tour.html.erb

diff --git a/app/controllers/user_configs_controller.rb b/app/controllers/user_configs_controller.rb
index 09b7e6c5..097951b4 100644
--- a/app/controllers/user_configs_controller.rb
+++ b/app/controllers/user_configs_controller.rb
@@ -5,7 +5,8 @@ class UserConfigsController < ApplicationController
   authorize_resource :user_config
 
   ALLOWED_KEYS = [
-    UserConfig::RECEIVE_COMPLETED_EMAIL
+    UserConfig::RECEIVE_COMPLETED_EMAIL,
+    UserConfig::SHOW_APP_TOUR
   ].freeze
 
   InvalidKey = Class.new(StandardError)
@@ -28,6 +29,7 @@ class UserConfigsController < ApplicationController
   def user_config_params
     params.required(:user_config).permit(:key, :value, { value: {} }, { value: [] }).tap do |attrs|
       attrs[:value] = attrs[:value] == '1' if attrs[:value].in?(%w[1 0])
+      attrs[:value] = attrs[:value] == 'true' if attrs[:value].in?(%w[true false])
     end
   end
 end
diff --git a/app/javascript/application.js b/app/javascript/application.js
index 7ae6836f..78e542b0 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -32,6 +32,7 @@ import CheckboxGroup from './elements/checkbox_group'
 import MaskedInput from './elements/masked_input'
 import SetDateButton from './elements/set_date_button'
 import IndeterminateCheckbox from './elements/indeterminate_checkbox'
+import AppTour from './elements/app_tour'
 
 import * as TurboInstantClick from './lib/turbo_instant_click'
 
@@ -99,6 +100,7 @@ safeRegisterElement('checkbox-group', CheckboxGroup)
 safeRegisterElement('masked-input', MaskedInput)
 safeRegisterElement('set-date-button', SetDateButton)
 safeRegisterElement('indeterminate-checkbox', IndeterminateCheckbox)
+safeRegisterElement('app-tour', AppTour)
 
 safeRegisterElement('template-builder', class extends HTMLElement {
   connectedCallback () {
@@ -124,7 +126,8 @@ safeRegisterElement('template-builder', class extends HTMLElement {
       withSignYourselfButton: this.dataset.withSignYourselfButton !== 'false',
       withConditions: this.dataset.withConditions === 'true',
       currencies: (this.dataset.currencies || '').split(',').filter(Boolean),
-      acceptFileTypes: this.dataset.acceptFileTypes
+      acceptFileTypes: this.dataset.acceptFileTypes,
+      showTourStartForm: this.dataset.showTourStartForm === 'true'
     })
 
     this.component = this.app.mount(this.appElem)
diff --git a/app/javascript/elements/app_tour.js b/app/javascript/elements/app_tour.js
new file mode 100644
index 00000000..e98d4281
--- /dev/null
+++ b/app/javascript/elements/app_tour.js
@@ -0,0 +1,338 @@
+export default class extends HTMLElement {
+  async connectedCallback () {
+    this.tourType = this.dataset.type
+    this.nextPagePath = this.dataset.nextPagePath
+    this.I18n = JSON.parse(this.dataset.i18n || '{}')
+
+    if (this.dataset.showTour === 'true') this.start()
+  }
+
+  async start () {
+    if (window.innerWidth < 768) return
+
+    const [{ driver }] = await Promise.all([
+      import('driver.js'),
+      import('driver.js/dist/driver.css')
+    ])
+
+    this.driverObj = driver({
+      showProgress: true,
+      nextBtnText: this.I18n.next,
+      prevBtnText: this.I18n.previous,
+      doneBtnText: this.I18n.done,
+      onDestroyStarted: () => {
+        this.disableAppGuide().finally(() => { this.destroy() })
+      },
+      onHighlightStarted: (element) => {
+        if (element) {
+          const clickHandler = () => {
+            this.disableAppGuide().finally(() => { this.destroy() })
+            element.removeEventListener('click', clickHandler)
+          }
+
+          element.addEventListener('click', clickHandler)
+        }
+      }
+    })
+
+    if (this.tourType === 'dashboard') {
+      this.showDashboardTour()
+    } else if (this.tourType === 'builder') {
+      this.showTemplateBuilderTour()
+    } else if (this.tourType === 'account') {
+      this.showAccountTour()
+    } else if (this.tourType === 'template') {
+      this.showTemplateTour()
+    }
+  }
+
+  disconnectedCallback () {
+    if (this.driverObj) this.destroy()
+  }
+
+  destroy () {
+    if (this.builderTemplate) this.builderTemplate.fields.shift()
+    if (this.driverObj) this.driverObj.destroy()
+  }
+
+  showTemplateTour () {
+    const steps = [
+      {
+        element: '#share_link_clipboard',
+        popover: {
+          title: this.I18n.copy_and_share_link,
+          description: this.I18n.copy_and_share_link_description,
+          side: 'bottom',
+          align: 'end'
+        }
+      },
+      {
+        element: '#sign_yourself_button',
+        popover: {
+          title: this.I18n.sign_the_document,
+          description: this.I18n.sign_the_document_description,
+          side: 'top',
+          align: 'center'
+        }
+      },
+      {
+        element: '#send_to_recipients_button',
+        popover: {
+          title: this.I18n.send_for_signing,
+          description: this.I18n.add_recipients_description,
+          side: 'top',
+          align: 'center'
+        }
+      },
+      {
+        element: '#add_recipients_button',
+        popover: {
+          title: this.I18n.add_recipients,
+          description: this.I18n.add_recipients_description,
+          side: 'bottom',
+          align: 'end'
+        }
+      },
+      {
+        element: '#account_settings_button',
+        popover: {
+          title: this.I18n.settings,
+          description: this.I18n.settings_template_description,
+          side: 'right',
+          align: 'start',
+          showButtons: this.nextPagePath ? ['next', 'previous', 'close'] : ['previous', 'close'],
+          onNextClick: () => {
+            if (this.nextPagePath) {
+              window.Turbo.visit(this.nextPagePath)
+            }
+          }
+        }
+      }
+    ].filter((step) => document.querySelector(step.element))
+
+    this.driverObj.setSteps(steps)
+    this.driverObj.drive()
+  }
+
+  showDashboardTour () {
+    this.driverObj.setSteps([
+      {
+        element: '#templates_submissions_toggle',
+        popover: {
+          title: this.I18n.template_and_submissions,
+          description: this.I18n.template_and_submissions_description,
+          side: 'right',
+          align: 'start'
+        }
+      },
+      {
+        element: '#templates_upload_button',
+        popover: {
+          title: this.I18n.upload_a_pdf_file,
+          description: this.I18n.upload_a_pdf_file_description,
+          side: 'left',
+          align: 'start',
+          showButtons: this.nextPagePath ? ['next', 'previous', 'close'] : ['previous', 'close'],
+          onNextClick: () => {
+            if (this.nextPagePath) {
+              window.Turbo.visit(this.nextPagePath)
+            }
+          }
+        },
+        onHighlightStarted: () => {}
+      }
+    ])
+
+    this.driverObj.drive()
+  }
+
+  showAccountTour () {
+    this.driverObj.setSteps([
+      {
+        element: '#account_settings_menu',
+        popover: {
+          title: this.I18n.settings,
+          description: this.I18n.settings_account_description,
+          side: 'right',
+          align: 'start'
+        }
+      },
+      {
+        element: '#support_channels',
+        popover: {
+          title: this.I18n.support,
+          description: this.I18n.support_description,
+          side: 'left',
+          align: 'start'
+        }
+      }
+    ].filter((step) => document.querySelector(step.element)))
+
+    this.driverObj.drive()
+  }
+
+  showTemplateBuilderTour () {
+    const builderComponent = document.querySelector('template-builder')?.component
+
+    this.builderTemplate = builderComponent?.template
+
+    if (this.builderTemplate) {
+      this.builderTemplate.fields.unshift({
+        uuid: 'b387399b-88dc-4345-9d37-743e97a9b2b3',
+        submitter_uuid: this.builderTemplate.submitters[0].uuid,
+        name: 'First Name',
+        type: 'text'
+      })
+
+      builderComponent.$nextTick(() => {
+        this.driverObj.setSteps([
+          {
+            element: '.roles-dropdown',
+            popover: {
+              title: this.I18n.select_a_signer_party,
+              description: this.I18n.select_a_signer_party_description,
+              side: 'left',
+              align: 'start',
+              onPopoverRender: () => {
+                const rolesDropdown = document.querySelector('.roles-dropdown')
+
+                rolesDropdown.dispatchEvent(new Event('mouseenter', { bubbles: true, cancelable: true }))
+                rolesDropdown.classList.add('dropdown-open')
+              }
+            }
+          },
+          {
+            element: '.roles-dropdown .dropdown-content',
+            popover: {
+              title: this.I18n.available_parties,
+              description: this.I18n.available_parties_description,
+              side: 'left',
+              align: 'start',
+              onPopoverRender: () => {
+                document.querySelector('.roles-dropdown .dropdown-content').classList.remove('driver-active-element')
+              },
+              onNextClick: () => {
+                document.querySelector('.roles-dropdown').classList.remove('dropdown-open')
+                this.driverObj.moveNext()
+              }
+            }
+          },
+          {
+            element: '#field-types-grid',
+            popover: {
+              title: this.I18n.available_field_types,
+              description: this.I18n.available_field_types_description,
+              side: 'right',
+              align: 'start',
+              onPrevClick: () => {
+                document.querySelector('.roles-dropdown').classList.add('dropdown-open')
+                this.driverObj.movePrevious()
+              }
+            }
+          },
+          {
+            element: '#text_type_field_button',
+            popover: {
+              title: this.I18n.text_input_field,
+              description: this.I18n.text_input_field_description,
+              side: 'left',
+              align: 'start'
+            }
+          },
+          {
+            element: '#signature_type_field_button',
+            popover: {
+              title: this.I18n.signature_field,
+              description: this.I18n.signature_field_description,
+              side: 'left',
+              align: 'start'
+            }
+          },
+          {
+            element: '.fields',
+            popover: {
+              title: this.I18n.added_fields,
+              description: this.I18n.added_fields_description,
+              side: 'right',
+              align: 'start'
+            }
+          },
+          {
+            element: '.list-field label:has(svg.tabler-icon-settings)',
+            popover: {
+              title: this.I18n.open_field_settings,
+              description: this.I18n.open_field_settings_description,
+              side: 'bottom',
+              align: 'end',
+              onPopoverRender: () => {
+                const settingsDropdown = document.querySelector('.list-field div:first-child span:has(svg.tabler-icon-settings)')
+
+                document.querySelectorAll('.list-field div:first-child .text-transparent').forEach((e) => e.classList.remove('text-transparent'))
+                settingsDropdown.dispatchEvent(new Event('mouseenter', { bubbles: true, cancelable: true }))
+                settingsDropdown.classList.add('dropdown-open')
+              }
+            }
+          },
+          {
+            element: '.list-field div:first-child span:has(svg.tabler-icon-settings) .dropdown-content',
+            popover: {
+              title: this.I18n.field_settings,
+              description: this.I18n.field_settings_description,
+              side: 'left',
+              align: 'start',
+              onPopoverRender: () => {
+                document.querySelector('.list-field div:first-child span:has(svg.tabler-icon-settings) .dropdown-content').classList.remove('driver-active-element')
+              },
+              onNextClick: () => {
+                document.querySelector('.list-field div:first-child span:has(svg.tabler-icon-settings)').classList.remove('dropdown-open')
+                this.driverObj.moveNext()
+              }
+            }
+          },
+          {
+            element: '#send_button',
+            popover: {
+              title: this.I18n.send_document,
+              description: this.I18n.send_document_description,
+              side: 'bottom',
+              align: 'end',
+              onPrevClick: () => {
+                document.querySelector('.list-field div:first-child span:has(svg.tabler-icon-settings)').classList.add('dropdown-open')
+                this.driverObj.movePrevious()
+              }
+            }
+          },
+          {
+            element: '#sign_yourself_button',
+            popover: {
+              title: this.I18n.sign_yourself,
+              description: this.I18n.sign_yourself_description,
+              side: 'bottom',
+              align: 'end',
+              onNextClick: () => {
+                if (this.nextPagePath) {
+                  window.Turbo.visit(this.nextPagePath)
+                } else {
+                  this.destroy()
+                }
+              }
+            }
+          }
+        ])
+
+        this.driverObj.drive()
+      })
+    }
+  }
+
+  async disableAppGuide () {
+    return fetch('/user_configs', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
+      },
+      body: JSON.stringify({ key: 'show_app_tour', value: false })
+    })
+  }
+}
diff --git a/app/javascript/elements/file_dropzone.js b/app/javascript/elements/file_dropzone.js
index d8fbb116..76411a50 100644
--- a/app/javascript/elements/file_dropzone.js
+++ b/app/javascript/elements/file_dropzone.js
@@ -35,7 +35,7 @@ export default actionable(targetable(class extends HTMLElement {
   }
 
   toggleLoading = (e) => {
-    if (e && e.target && !e.target.contains(this)) {
+    if (e && e.target && (!e.target.contains(this) || !e.detail?.formSubmission?.formElement?.contains(this))) {
       return
     }
 
diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index cf3fe21a..a830dd02 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -69,6 +69,7 @@
         <template v-else>
           <a
             v-if="withSignYourselfButton"
+            id="sign_yourself_button"
             :href="template.submitters.length > 1 ? `/templates/${template.id}/submissions/new?selfsign=true` : `/d/${template.slug}`"
             class="btn btn-primary btn-ghost text-base hidden md:flex"
             :target="template.submitters.length > 1 ? '' : '_blank'"
@@ -85,6 +86,7 @@
           </a>
           <a
             v-if="withSendButton"
+            id="send_button"
             :href="`/templates/${template.id}/submissions/new?with_link=true`"
             data-turbo-frame="modal"
             class="white-button md:!px-6"
@@ -100,6 +102,7 @@
           </a>
           <span
             v-if="editable"
+            id="save_button_container"
             class="flex"
           >
             <button
@@ -384,6 +387,7 @@
             :with-sticky-submitters="withStickySubmitters"
             :only-defined-fields="onlyDefinedFields"
             :editable="editable"
+            :show-tour-start-form="showTourStartForm"
             @add-field="addField"
             @set-draw="[drawField = $event.field, drawOption = $event.option]"
             @set-draw-type="[drawFieldType = $event, showDrawField = true]"
@@ -700,6 +704,11 @@ export default {
       type: Object,
       required: false,
       default: () => ({ headers: {} })
+    },
+    showTourStartForm: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data () {
diff --git a/app/javascript/template_builder/fields.vue b/app/javascript/template_builder/fields.vue
index 38405ab5..e141f16e 100644
--- a/app/javascript/template_builder/fields.vue
+++ b/app/javascript/template_builder/fields.vue
@@ -104,6 +104,7 @@
   </div>
   <div
     v-if="editable && !onlyDefinedFields"
+    id="field-types-grid"
     class="grid grid-cols-3 gap-1 pb-2 fields-grid"
   >
     <template
@@ -112,6 +113,7 @@
     >
       <button
         v-if="(fieldTypes.length === 0 || fieldTypes.includes(type)) && (withPhone || type != 'phone') && (withPayment || type != 'payment') && (withVerification || type != 'verification')"
+        :id="`${type}_type_field_button`"
         draggable="true"
         class="field-type-button group flex items-center justify-center border border-dashed w-full rounded relative fields-grid-item"
         :style="{ backgroundColor }"
@@ -189,7 +191,7 @@
     </template>
   </div>
   <div
-    v-if="fields.length < 4 && editable && withHelp"
+    v-if="fields.length < 4 && editable && withHelp && !showTourStartForm"
     class="text-xs p-2 border border-base-200 rounded"
   >
     <ul class="list-disc list-outside ml-3">
@@ -204,6 +206,23 @@
       </li>
     </ul>
   </div>
+  <div
+    v-show="fields.length < 4 && editable && withHelp && showTourStartForm"
+    class="rounded py-2 px-4 w-full border border-dashed border-base-300"
+  >
+    <div class="text-center text-sm">
+      {{ t('start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document') }}
+    </div>
+    <div class="flex justify-center">
+      <label
+        for="start_tour_button"
+        class="btn btn-sm btn-warning w-40 mt-2"
+        @click="startTour"
+      >
+        {{ t('start_tour') }}
+      </label>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -290,6 +309,11 @@ export default {
     selectedSubmitter: {
       type: Object,
       required: true
+    },
+    showTourStartForm: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   emits: ['add-field', 'set-draw', 'set-draw-type', 'set-drag', 'drag-end', 'scroll-to-area', 'change-submitter', 'set-drag-placeholder'],
@@ -375,6 +399,9 @@ export default {
 
       setTimeout(() => { hiddenEl.remove() }, 1000)
     },
+    startTour () {
+      document.querySelector('app-tour').start()
+    },
     onFieldDragover (e) {
       if (this.fieldsDragFieldRef.value) {
         const targetField = e.target.closest('[data-uuid]')
diff --git a/app/javascript/template_builder/i18n.js b/app/javascript/template_builder/i18n.js
index d38c6385..1a8b7bea 100644
--- a/app/javascript/template_builder/i18n.js
+++ b/app/javascript/template_builder/i18n.js
@@ -158,7 +158,9 @@ const en = {
   some_fields_are_missing_in_the_formula: 'Some fields are missing in the formula.',
   learn_more: 'Learn more',
   and: 'and',
-  or: 'or'
+  or: 'or',
+  start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: 'Start a quick tour to learn how to create an send your first document',
+  start_tour: 'Start Tour'
 }
 
 const es = {
@@ -321,7 +323,9 @@ const es = {
   some_fields_are_missing_in_the_formula: 'Faltan algunos campos en la fórmula.',
   learn_more: 'Aprende más',
   and: 'y',
-  or: 'o'
+  or: 'o',
+  start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: 'Inicia una guía rápida para aprender a crear y enviar tu primer documento.',
+  start_tour: 'Iniciar guía'
 }
 
 const it = {
@@ -484,7 +488,9 @@ const it = {
   some_fields_are_missing_in_the_formula: 'Alcuni campi mancano nella formula.',
   learn_more: 'Scopri di più',
   and: 'e',
-  or: 'o'
+  or: 'o',
+  start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: 'Inizia un tour rapido per imparare a creare e inviare il tuo primo documento.',
+  start_tour: 'Inizia il tour'
 }
 
 const pt = {
@@ -647,7 +653,9 @@ const pt = {
   some_fields_are_missing_in_the_formula: 'Faltam alguns campos na fórmula.',
   learn_more: 'Saiba mais',
   and: 'e',
-  or: 'ou'
+  or: 'ou',
+  start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: 'Comece um tour rápido para aprender a criar e enviar seu primeiro documento.',
+  start_tour: 'Iniciar tour'
 }
 
 const fr = {
@@ -810,7 +818,9 @@ const fr = {
   some_fields_are_missing_in_the_formula: 'Certains champs manquent dans la formule.',
   learn_more: 'En savoir plus',
   and: 'et',
-  or: 'ou'
+  or: 'ou',
+  start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: 'Lancez une visite rapide pour apprendre à créer et envoyer votre premier document.',
+  start_tour: 'Démarrer'
 }
 
 const de = {
@@ -973,7 +983,9 @@ const de = {
   some_fields_are_missing_in_the_formula: 'Einige Felder fehlen in der Formel.',
   learn_more: 'Erfahren Sie mehr',
   and: 'und',
-  or: 'oder'
+  or: 'oder',
+  start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: 'Starte eine kurze Tour, um zu lernen, wie du dein erstes Dokument erstellst und versendest.',
+  start_tour: 'Starten'
 }
 
 export { en, es, it, pt, fr, de }
diff --git a/app/models/user_config.rb b/app/models/user_config.rb
index c79be174..87849013 100644
--- a/app/models/user_config.rb
+++ b/app/models/user_config.rb
@@ -25,6 +25,7 @@ class UserConfig < ApplicationRecord
   INITIALS_KEY = 'initials'
   RECEIVE_COMPLETED_EMAIL = 'receive_completed_email'
   RECEIVE_DECLINED_EMAIL = 'receive_declined_email'
+  SHOW_APP_TOUR = 'show_app_tour'
 
   belongs_to :user
 
diff --git a/app/views/accounts/show.html.erb b/app/views/accounts/show.html.erb
index 6f1ba1d3..2f8fa96e 100644
--- a/app/views/accounts/show.html.erb
+++ b/app/views/accounts/show.html.erb
@@ -180,3 +180,4 @@
   </div>
   <div class="w-0 md:w-52"></div>
 </div>
+<%= render 'shared/app_tour', type: 'account' %>
diff --git a/app/views/dashboard/_toggle_view.html.erb b/app/views/dashboard/_toggle_view.html.erb
index 93d8969a..63cdf0c8 100644
--- a/app/views/dashboard/_toggle_view.html.erb
+++ b/app/views/dashboard/_toggle_view.html.erb
@@ -1,4 +1,4 @@
-<form action="<%= root_path %>" method="get" class="bg-base-200 px-1.5 rounded-xl py-1 whitespace-nowrap">
+<form action="<%= root_path %>" method="get" id="templates_submissions_toggle" class="bg-base-200 px-1.5 rounded-xl py-1 whitespace-nowrap">
   <toggle-cookies data-value="templates" data-key="dashboard_view" class="sm:tooltip tooltip-top" data-tip="<%= t('templates') %>">
     <button class="<%= local_assigns[:selected] == 'submissions' ? 'btn !border !rounded-lg btn-square !p-0 !btn-sm !h-8 !w-9' : 'btn btn-neutral !rounded-lg btn-square !p-0 hover:text-neutral-300 !btn-sm !h-8 !w-9 disabled:btn-neutral' %>">
       <%= svg_icon('layout_grid', class: 'w-6 h-6 stroke-2') %>
diff --git a/app/views/shared/_app_tour.html.erb b/app/views/shared/_app_tour.html.erb
new file mode 100644
index 00000000..46b5d15d
--- /dev/null
+++ b/app/views/shared/_app_tour.html.erb
@@ -0,0 +1,6 @@
+<% if current_user.created_at > 2.weeks.ago || params[:tour] == 'true' %>
+  <% user_config = current_user.user_configs.find_or_initialize_by(key: UserConfig::SHOW_APP_TOUR) %>
+  <% if user_config.new_record? || user_config.value || params[:tour] == 'true' %>
+    <app-tour data-show-tour="<%= params[:tour] == 'true' || user_config.value %>" data-type="<%= local_assigns[:type] %>" data-next-page-path="<%= local_assigns[:next_page_path] %>" data-i18n="<%= t('app_tour').to_json %>"></app-tour>
+  <% end %>
+<% end %>
diff --git a/app/views/shared/_classes.html.erb b/app/views/shared/_classes.html.erb
index 1739aa6f..2c291713 100644
--- a/app/views/shared/_classes.html.erb
+++ b/app/views/shared/_classes.html.erb
@@ -1 +1 @@
-<% 'stats stat stat-figure stat-title stat-value text-accent w-fit hover:bg-white' %>
+<% 'stats stat stat-figure stat-title stat-value text-accent w-fit hover:bg-white dropdown-open' %>
diff --git a/app/views/shared/_clipboard_copy.html.erb b/app/views/shared/_clipboard_copy.html.erb
index 29c36a75..b3fe3720 100644
--- a/app/views/shared/_clipboard_copy.html.erb
+++ b/app/views/shared/_clipboard_copy.html.erb
@@ -1,5 +1,5 @@
 <clipboard-copy data-text="<%= text %>">
-  <label class="<%= local_assigns[:class] %>">
+  <label id="<%= local_assigns[:id] %>" class="<%= local_assigns[:class] %>">
     <input type="radio" class="peer hidden">
     <span class="peer-checked:hidden flex items-center space-x-2">
       <%= svg_icon(local_assigns[:icon] || 'link', class: local_assigns[:icon_class] || 'w-6 h-6 text-white') %>
diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb
index 0a65fd2e..794997ab 100644
--- a/app/views/shared/_navbar.html.erb
+++ b/app/views/shared/_navbar.html.erb
@@ -20,7 +20,7 @@
       <% else %>
         <div class="flex items-center justify-center space-x-4 mr-1">
           <%= render 'shared/navbar_buttons' %>
-          <%= link_to t('settings'), settings_profile_index_path, class: 'hidden md:inline-flex font-medium text-lg' %>
+          <%= link_to t('settings'), settings_profile_index_path, class: 'hidden md:inline-flex font-medium text-lg', id: 'account_settings_button' %>
         </div>
       <% end %>
       <div class="dropdown dropdown-end">
diff --git a/app/views/shared/_settings_nav.html.erb b/app/views/shared/_settings_nav.html.erb
index f052113c..aa468171 100644
--- a/app/views/shared/_settings_nav.html.erb
+++ b/app/views/shared/_settings_nav.html.erb
@@ -1,6 +1,6 @@
 <div class="block w-full md:w-52 flex-none">
   <menu-active>
-    <ul class="menu px-0">
+    <ul id="account_settings_menu" class="menu px-0">
       <li class="menu-title py-0 !bg-transparent mb-3 -mt-5"><a href="<%= '/' %>" class="!bg-transparent !text-neutral font-medium">&larr; <%= t('back') %></a></li>
       <li class="menu-title py-0 !bg-transparent">
         <span class="!bg-transparent"><%= t('settings') %></span>
@@ -105,7 +105,7 @@
     </ul>
   </menu-active>
   <% if Docuseal.multitenant? || cannot?(:manage, :tenants) %>
-    <div class="mx-4 border-t border-base-300 hidden md:block">
+    <div id="support_channels" class="mx-4 border-t border-base-300 hidden md:block">
       <div class="text-sm mt-3">
         <%= t('need_help_ask_a_question_') %>
       </div>
diff --git a/app/views/templates/_submission.html.erb b/app/views/templates/_submission.html.erb
index 7b3488b7..f7bc7a83 100644
--- a/app/views/templates/_submission.html.erb
+++ b/app/views/templates/_submission.html.erb
@@ -81,7 +81,7 @@
         <% elsif !submission.archived_at? && !template.archived_at? && !submission.expired? && !submitter.declined_at? %>
           <% if current_user.email == submitter.email %>
             <div class="flex-1 md:flex-none md:w-36 flex">
-              <a href="<%= submit_form_url(slug: submitter.slug) %>" data-turbo="false" target="_blank" class="btn btn-sm btn-neutral btn-outline bg-white w-full md:w-36 flex z-[1]">
+              <a href="<%= submit_form_url(slug: submitter.slug) %>" data-turbo="false" target="_blank" id="sign_yourself_button" class="btn btn-sm btn-neutral btn-outline bg-white w-full md:w-36 flex z-[1]">
                 <span class="flex items-center justify-center space-x-1 md:space-x-2">
                   <% if t('sign_now').length < 12 %>
                     <%= svg_icon('writing_sign', class: 'w-4 h-4 stroke-2') %>
@@ -167,7 +167,7 @@
                 <% elsif !template.archived_at? && !submission.archived_at? && !is_submission_completed && !submission.expired? && !submitter.declined_at? %>
                   <div class="relative flex items-center space-x-3">
                     <% if current_user.email == submitter.email %>
-                      <a href="<%= submit_form_url(slug: submitter.slug) %>" data-turbo="false" target="_blank" class="absolute md:relative top-0 right-0 btn btn-xs btn-outline btn-neutral bg-white w-28 md:w-36 z-[1]">
+                      <a href="<%= submit_form_url(slug: submitter.slug) %>" data-turbo="false" target="_blank" id="sign_yourself_button" class="absolute md:relative top-0 right-0 btn btn-xs btn-outline btn-neutral bg-white w-28 md:w-36 z-[1]">
                         <span class="flex items-center justify-center space-x-1 md:space-x-2">
                           <% if t('sign_now').length < 12 %>
                             <%= svg_icon('writing_sign', class: 'w-4 h-4 stroke-2') %>
diff --git a/app/views/templates/_title.html.erb b/app/views/templates/_title.html.erb
index 8a0628cb..c33a8298 100644
--- a/app/views/templates/_title.html.erb
+++ b/app/views/templates/_title.html.erb
@@ -49,7 +49,7 @@
             <% 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: t('link'), copied_title: t('copied'), copy_title_md: t('link'), copied_title_md: t('copied') %>
+        <%= render 'shared/clipboard_copy', text: start_form_url(slug: @template.slug), id: 'share_link_clipboard', 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: t('link'), copied_title: t('copied'), copy_title_md: t('link'), copied_title_md: t('copied') %>
       </div>
     <% end %>
   </div>
diff --git a/app/views/templates/_upload_button.html.erb b/app/views/templates/_upload_button.html.erb
index ac9e0650..b2281e50 100644
--- a/app/views/templates/_upload_button.html.erb
+++ b/app/views/templates/_upload_button.html.erb
@@ -1,5 +1,5 @@
 <%= form_for '', url: templates_upload_path, id: form_id = SecureRandom.uuid, method: :post, class: 'inline', html: { enctype: 'multipart/form-data' } do %>
-  <button type="submit" class="btn btn-ghost text-base" onclick="[event.preventDefault(), window.upload_template.click()]">
+  <button id="templates_upload_button" type="submit" class="btn btn-ghost text-base" onclick="[event.preventDefault(), window.upload_template.click()]">
     <span class="enabled">
       <span class="flex items-center justify-center space-x-2">
         <%= svg_icon('upload', class: 'w-6 h-6 stroke-2') %>
diff --git a/app/views/templates/edit.html.erb b/app/views/templates/edit.html.erb
index 5cd692ad..79a10118 100644
--- a/app/views/templates/edit.html.erb
+++ b/app/views/templates/edit.html.erb
@@ -1 +1,9 @@
-<template-builder class="grid" data-template="<%= @template_data %>" data-with-sign-yourself-button="<%= !@template.archived_at? %>" data-with-send-button="<%= !@template.archived_at? && can?(:create, @template.submissions.new(account: current_account)) %>" data-locale="<%= I18n.locale %>"></template-builder>
+<% if current_user.created_at > 2.weeks.ago || params[:tour] == 'true' %>
+  <% user_config = current_user.user_configs.find_or_initialize_by(key: UserConfig::SHOW_APP_TOUR) %>
+  <% @show_tour_start_form = user_config.new_record? && !params.key?(:tour) %>
+  <% if user_config.new_record? || user_config.value || params[:tour] == 'true' %>
+    <app-tour data-show-tour="<%= params[:tour] == 'true' || user_config.value %>" data-type="builder" data-next-page-path="<%= template_path(@template, params.permit(:tour)) %>" data-i18n="<%= t('app_tour').to_json %>"></app-tour>
+    <%= button_to nil, user_configs_path, method: :post, params: { user_config: { key: UserConfig::SHOW_APP_TOUR, value: true } }, class: 'hidden', id: 'start_tour_button' %>
+  <% end %>
+<% end %>
+<template-builder class="grid" data-template="<%= @template_data %>" data-with-sign-yourself-button="<%= !@template.archived_at? %>" data-with-send-button="<%= !@template.archived_at? && can?(:create, @template.submissions.new(account: current_account)) %>" data-locale="<%= I18n.locale %>" data-show-tour-start-form="<%= @show_tour_start_form %>"></template-builder>
diff --git a/app/views/templates/show.html.erb b/app/views/templates/show.html.erb
index 36ba1c42..c3085e4f 100644
--- a/app/views/templates/show.html.erb
+++ b/app/views/templates/show.html.erb
@@ -18,7 +18,7 @@
           <span><%= t('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 %>
+          <%= link_to new_template_submission_path(@template), id: 'add_recipients_button', class: 'white-button !border', data: { turbo_frame: 'modal' } do %>
             <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
             <%= t('add_recipients_html') %>
           <% end %>
@@ -80,18 +80,18 @@
             <p><%= t('send_an_invitation_to_fill_and_complete_the_form') %></p>
             <div class="space-y-2 flex flex-col">
               <% if can?(:create, Submission) %>
-                <%= link_to new_template_submission_path(@template, with_link: true), class: 'base-button mt-6', data: { turbo_frame: 'modal' } do %>
+                <%= link_to new_template_submission_path(@template, with_link: true), id: 'send_to_recipients_button', class: 'base-button mt-6', data: { turbo_frame: 'modal' } do %>
                   <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
                   <span class="mr-1"><%= t('send_to_recipients') %></span>
                 <% end %>
               <% end %>
               <% if @template.submitters.size == 1 %>
-                <%= link_to start_form_url(slug: @template.slug), class: 'white-button mt-6', target: '_blank', rel: 'noopener' do %>
+                <%= link_to start_form_url(slug: @template.slug), id: 'sign_yourself_button', class: 'white-button mt-6', target: '_blank', rel: 'noopener' do %>
                   <%= svg_icon('writing', class: 'w-6 h-6') %>
                   <span class="mr-1"><%= t('sign_it_yourself') %></span>
                 <% end %>
               <% else %>
-                <%= link_to new_template_submission_path(@template, selfsign: true), class: 'white-button mt-6', data: { turbo_frame: 'modal' } do %>
+                <%= link_to new_template_submission_path(@template, selfsign: true), id: 'sign_yourself_button', class: 'white-button mt-6', data: { turbo_frame: 'modal' } do %>
                   <%= svg_icon('writing', class: 'w-6 h-6') %>
                   <span class="mr-1"><%= t('sign_it_yourself') %></span>
                 <% end %>
@@ -117,3 +117,4 @@
     <%= view_archived_html %>
   </div>
 <% end %>
+<%= render 'shared/app_tour', type: 'template', next_page_path: settings_account_path(params.permit(:tour)) %>
diff --git a/app/views/templates_dashboard/index.html.erb b/app/views/templates_dashboard/index.html.erb
index 8f290c57..c6f42c94 100644
--- a/app/views/templates_dashboard/index.html.erb
+++ b/app/views/templates_dashboard/index.html.erb
@@ -1,4 +1,5 @@
 <% has_archived = current_account.templates.where.not(archived_at: nil).exists? %>
+<% show_dropzone = params[:q].blank? && @pagy.pages == 1 && ((@template_folders.size < 10 && @templates.size.zero?) || (@template_folders.size < 7 && @templates.size < 4) || (@template_folders.size < 4 && @templates.size < 7)) %>
 <% if Docuseal.demo? %><%= render 'shared/demo_alert' %><% end %>
 <div class="flex justify-between items-center w-full mb-4">
   <div class="flex items-center flex-grow min-w-0">
@@ -41,9 +42,31 @@
 <% if @templates.present? %>
   <div class="grid gap-4 md:grid-cols-3">
     <%= render partial: 'templates/template', collection: @templates %>
+    <% if show_dropzone && current_user.created_at > 2.weeks.ago || params[:tour] == 'true' %>
+      <% user_config = current_user.user_configs.find_or_initialize_by(key: UserConfig::SHOW_APP_TOUR) %>
+      <% if user_config.new_record? || user_config.value || params[:tour] == 'true' %>
+        <div class="hidden md:block">
+          <app-tour id="app_tour" data-show-tour="<%= params[:tour] == 'true' || user_config.value %>" data-type="dashboard" data-next-page-path="<%= @templates.first && can?(:edit, @templates.first) ? edit_template_path(@templates.first, params.permit(:tour)) : settings_account_path %>" data-i18n="<%= t('app_tour').to_json %>"></app-tour>
+          <% if user_config.new_record? && !params.key?(:tour) %>
+            <div class="h-36 rounded-2xl pt-3 px-7 w-full border border-dashed border-base-300">
+              <div class="text-xl text-center font-semibold text-base-content">
+                <%= t('welcome_to_docuseal') %>
+              </div>
+              <div class="my-2 text-center text-xs text-base-content/70">
+                <%= t('start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document') %>
+              </div>
+              <div class="flex gap-2 mt-3 w-full">
+                <%= button_to button_title(title: t('skip'), icon_disabled: svg_icon('loader', class: 'w-4 h-4 animate-spin')), user_configs_path, params: { user_config: { key: UserConfig::SHOW_APP_TOUR, value: false } }, class: 'btn btn-sm btn-outline w-full', form_class: 'flex-1', method: :post, form: { onsubmit: 'window.app_tour.parentNode.remove()' } %>
+                <%= button_to t('start_tour'), user_configs_path, params: { user_config: { key: UserConfig::SHOW_APP_TOUR, value: true } }, class: 'btn btn-sm btn-warning  w-full', form_class: 'flex-1', method: :post, form: { onsubmit: 'window.app_tour.start()' } %>
+              </div>
+            </div>
+          <% end %>
+        </div>
+      <% end %>
+    <% end %>
   </div>
 <% end %>
-<% if params[:q].blank? && @pagy.pages == 1 && ((@template_folders.size < 10 && @templates.size.zero?) || (@template_folders.size < 7 && @templates.size < 4) || (@template_folders.size < 4 && @templates.size < 7)) %>
+<% if show_dropzone %>
   <%= render 'templates/dropzone' %>
 <% end %>
 <% if @templates.present? || params[:q].blank? %>
diff --git a/config/locales/i18n.yml b/config/locales/i18n.yml
index 83ff1bb7..538480f5 100644
--- a/config/locales/i18n.yml
+++ b/config/locales/i18n.yml
@@ -701,6 +701,9 @@ en: &en
   pro_user_seats_used: Pro user seats used
   manage_plan: Manage plan
   this_submission_has_multiple_signers_which_prevents_the_use_of_a_sharing_link_html: This submission has multiple signers, which prevents the use of a sharing link as it's unclear which signer is responsible for specific fields. To resolve this, follow this <a href="https://www.docuseal.com/resources/pre-filling-recipients" class="link font-bold" rel="noopener noreferrer nofollow" target="_blank">guide</a> to define the default signer details.
+  welcome_to_docuseal: Welcome to DocuSeal
+  start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: Start a quick tour to learn how to create an send your first document
+  start_tour: Start Tour
   submission_sources:
     api: API
     bulk: Bulk Send
@@ -739,6 +742,46 @@ en: &en
     or: Or
     download: download
     a_sample_spreadsheet_to_fill_and_import: a sample spreadsheet to fill and import
+  app_tour:
+    start: Start
+    previous: Previous
+    next: Next
+    template_and_submissions: 'Templates and Submissions'
+    template_and_submissions_description: "You can select the view that best suits your workflow. Choose the 'Templates' view if you create reusable document templates, or the 'Submissions' view when you sign individual documents or review the status of each signing request."
+    upload_a_pdf_file: 'Upload a PDF file'
+    upload_a_pdf_file_description: 'Upload a document to use it for creating a signing form template.'
+    select_a_signer_party: 'Select a signer party'
+    select_a_signer_party_description: 'This dropdown allows you to select a signing party role or add a new party to the document when it needs to be signed by two or more parties.'
+    available_parties: 'Available parties'
+    available_parties_description: 'This list contains all available parties with their role names. Once selected, you can add and configure fields for the signer party.'
+    available_field_types: 'Available field types'
+    available_field_types_description: 'This section contains all available field types that can be added to the document for data input or signature collection.'
+    text_input_field: 'Text input field'
+    text_input_field_description: 'This field allows users to enter text-based information, such as names or emails.'
+    signature_field: 'Signature field'
+    signature_field_description: 'This field allows for collecting signatures from the signers.'
+    added_fields: 'Added fields'
+    added_fields_description: 'This list displays all fields added to the document. You can reorder, edit, or remove them.'
+    open_field_settings: 'Open field settings'
+    open_field_settings_description: 'On the right, next to the field name, there is a settings icon that opens the field settings.'
+    field_settings: 'Field settings'
+    field_settings_description: 'Each field can be customized through settings to meet your requirements, such as adjusting the font size, making it a required field, or adding a description.'
+    send_document: 'Send document for signing'
+    send_document_description: 'Before sending the document for signing, you can configure recipients, add their email addresses or phone numbers, and customize the email content.'
+    sign_yourself: 'Sign the document yourself'
+    sign_yourself_description: 'This button allows you to add your signature to the documents that require your signature.'
+    copy_and_share_link: 'Copy & share link'
+    copy_and_share_link_description: 'Copy this link to share the document. Anyone with the link can sign it after entering their email.'
+    sign_the_document: 'Sign the document'
+    sign_the_document_description: 'If you are one of the signers signer, this button allows you to sign the document yourself.'
+    send_for_signing: 'Send for signing'
+    add_recipients: 'Add recipients'
+    add_recipients_description: 'Add new recipients for the document to be signed. You can enter their email addresses or phone numbers.'
+    settings: 'Settings'
+    settings_account_description: 'With comprehensive account settings, you can customize the eSigning experience and invite more users.'
+    support: 'Support'
+    support_description: 'You can use our self-service AI assistant or email us at support@docuseal.com if you have any questions.'
+    settings_template_description: 'Use this button to access your account settings page.'
   doorkeeper:
     scopes:
       write: Update your data
@@ -1428,6 +1471,9 @@ es: &es
   pro_user_seats_used: Plazas de usuario Pro en uso
   manage_plan: Gestionar plan
   this_submission_has_multiple_signers_which_prevents_the_use_of_a_sharing_link_html: 'Este envío tiene múltiples firmantes, lo que impide el uso de un enlace para compartir, ya que no está claro qué firmante es responsable de los campos específicos. Para resolver esto, sigue esta <a href="https://www.docuseal.com/resources/pre-filling-recipients" class="link font-bold" rel="noopener noreferrer nofollow" target="_blank">guía</a> para definir los detalles predeterminados del firmante.'
+  welcome_to_docuseal: Bienvenido a DocuSeal
+  start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: Inicia una guía rápida para aprender a crear y enviar tu primer documento.
+  start_tour: Iniciar guía
   submission_sources:
     api: API
     bulk: Envío masivo
@@ -1466,6 +1512,46 @@ es: &es
     or: O
     download: descarga
     a_sample_spreadsheet_to_fill_and_import: una hoja de cálculo de ejemplo para completar e importar.
+  app_tour:
+    start: Comenzar
+    previous: Anterior
+    next: Siguiente
+    template_and_submissions: 'Plantillas y Envíos'
+    template_and_submissions_description: "Puedes seleccionar la vista que mejor se adapte a tu flujo de trabajo. Elige la vista de 'Plantillas' si creas plantillas reutilizables de documentos, o la vista de 'Envíos' cuando firmas documentos individuales o revisas el estado de cada solicitud de firma."
+    upload_a_pdf_file: 'Subir un archivo PDF'
+    upload_a_pdf_file_description: 'Sube un documento para usarlo como plantilla de formulario de firma.'
+    select_a_signer_party: 'Seleccionar parte firmante'
+    select_a_signer_party_description: 'Este menú desplegable te permite seleccionar un rol de firmante o agregar una nueva parte al documento cuando debe ser firmado por dos o más partes.'
+    available_parties: 'Partes disponibles'
+    available_parties_description: 'Esta lista contiene todas las partes disponibles con sus roles. Una vez seleccionada, puedes añadir y configurar campos para esa parte.'
+    available_field_types: 'Tipos de campo disponibles'
+    available_field_types_description: 'Esta sección contiene todos los tipos de campo que se pueden añadir al documento para entrada de datos o recolección de firmas.'
+    text_input_field: 'Campo de texto'
+    text_input_field_description: 'Este campo permite a los usuarios introducir información de texto, como nombres o correos electrónicos.'
+    signature_field: 'Campo de firma'
+    signature_field_description: 'Este campo permite recopilar firmas de los firmantes.'
+    added_fields: 'Campos añadidos'
+    added_fields_description: 'Esta lista muestra todos los campos añadidos al documento. Puedes reordenarlos, editarlos o eliminarlos.'
+    open_field_settings: 'Abrir configuración del campo'
+    open_field_settings_description: 'A la derecha del nombre del campo, hay un icono de ajustes que abre la configuración del campo.'
+    field_settings: 'Configuración del campo'
+    field_settings_description: 'Cada campo puede personalizarse según tus necesidades, como ajustar el tamaño de fuente, hacerlo obligatorio o añadir una descripción.'
+    send_document: 'Enviar documento para firmar'
+    send_document_description: 'Antes de enviar el documento para firmar, puedes configurar destinatarios, añadir correos electrónicos o teléfonos, y personalizar el contenido del correo.'
+    sign_yourself: 'Firma el documento tú mismo'
+    sign_yourself_description: 'Este botón te permite añadir tu firma a documentos que requieren tu firma.'
+    copy_and_share_link: 'Copiar y compartir enlace'
+    copy_and_share_link_description: 'Copia este enlace para compartir el documento. Cualquiera con el enlace puede firmarlo tras ingresar su correo electrónico.'
+    sign_the_document: 'Firmar el documento'
+    sign_the_document_description: 'Si eres uno de los firmantes, este botón te permite firmar el documento tú mismo.'
+    send_for_signing: 'Enviar para firma'
+    add_recipients: 'Agregar destinatarios'
+    add_recipients_description: 'Agrega nuevos destinatarios para que el documento sea firmado. Puedes ingresar sus correos electrónicos o números de teléfono.'
+    settings: 'Configuración'
+    settings_account_description: 'Con una configuración completa de la cuenta, puedes personalizar la experiencia de firma y añadir más usuarios.'
+    support: 'Soporte'
+    support_description: 'Puedes usar nuestro asistente de IA o escribirnos a support@docuseal.com si tienes preguntas.'
+    settings_template_description: 'Usa este botón para acceder a la configuración de tu cuenta.'
   doorkeeper:
     scopes:
       write: Actualizar tus datos
@@ -2154,6 +2240,9 @@ it: &it
   pro_user_seats_used: Posti utente Pro in uso
   manage_plan: Gestisci piano
   this_submission_has_multiple_signers_which_prevents_the_use_of_a_sharing_link_html: "Questa sottomissione ha più firmatari, il che impedisce l'uso di un link di condivisione poiché non è chiaro quale firmatario sia responsabile di specifici campi. Per risolvere questo problema, segui questa <a href=\"https://www.docuseal.com/resources/pre-filling-recipients\" class=\"link font-bold\" rel=\"noopener noreferrer nofollow\" target=\"_blank\">guida</a> per definire i dettagli predefiniti del firmatario."
+  welcome_to_docuseal: Benvenuto in DocuSeal
+  start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: Inizia un tour rapido per imparare a creare e inviare il tuo primo documento.
+  start_tour: Inizia il tour
   submission_sources:
     api: API
     bulk: Invio massivo
@@ -2192,6 +2281,46 @@ it: &it
     or: Oppure
     download: scarica
     a_sample_spreadsheet_to_fill_and_import: un foglio di calcolo di esempio da compilare e importare.
+  app_tour:
+    start: Inizia
+    previous: Precedente
+    next: Successivo
+    template_and_submissions: 'Modelli e Invii'
+    template_and_submissions_description: "Puoi selezionare la vista che meglio si adatta al tuo flusso di lavoro. Scegli la vista 'Modelli' se crei modelli riutilizzabili di documenti, oppure la vista 'Invii' quando firmi documenti singoli o controlli lo stato di ogni richiesta di firma."
+    upload_a_pdf_file: 'Carica un file PDF'
+    upload_a_pdf_file_description: 'Carica un documento da utilizzare per creare un modello di modulo di firma.'
+    select_a_signer_party: 'Seleziona una parte firmataria'
+    select_a_signer_party_description: 'Questo menu a discesa consente di selezionare un ruolo di firmatario o aggiungere una nuova parte al documento quando deve essere firmato da due o più parti.'
+    available_parties: 'Parti disponibili'
+    available_parties_description: 'Questo elenco contiene tutte le parti disponibili con i relativi ruoli. Una volta selezionata, puoi aggiungere e configurare i campi per la parte firmataria.'
+    available_field_types: 'Tipi di campo disponibili'
+    available_field_types_description: "Questa sezione contiene tutti i tipi di campo disponibili che possono essere aggiunti al documento per l'inserimento di dati o la raccolta delle firme."
+    text_input_field: 'Campo di testo'
+    text_input_field_description: 'Questo campo consente agli utenti di inserire informazioni testuali, come nomi o email.'
+    signature_field: 'Campo firma'
+    signature_field_description: 'Questo campo consente di raccogliere firme dai firmatari.'
+    added_fields: 'Campi aggiunti'
+    added_fields_description: 'Questo elenco mostra tutti i campi aggiunti al documento. Puoi riordinarli, modificarli o rimuoverli.'
+    open_field_settings: 'Apri le impostazioni del campo'
+    open_field_settings_description: "A destra del nome del campo c'è un'icona delle impostazioni che apre il menu di configurazione."
+    field_settings: 'Impostazioni del campo'
+    field_settings_description: 'Ogni campo può essere personalizzato tramite le impostazioni per soddisfare le tue esigenze, come modificare la dimensione del testo, renderlo obbligatorio o aggiungere una descrizione.'
+    send_document: 'Invia documento per la firma'
+    send_document_description: "Prima di inviare il documento per la firma, puoi configurare i destinatari, aggiungere email o numeri di telefono e personalizzare il contenuto dell'email."
+    sign_yourself: 'Firma il documento personalmente'
+    sign_yourself_description: 'Questo pulsante ti consente di aggiungere la tua firma ai documenti che richiedono la tua firma.'
+    copy_and_share_link: 'Copia e condividi il link'
+    copy_and_share_link_description: 'Copia questo link per condividere il documento. Chiunque abbia il link potrà firmarlo dopo aver inserito la propria email.'
+    sign_the_document: 'Firma il documento'
+    sign_the_document_description: 'Se sei uno dei firmatari, questo pulsante ti consente di firmare il documento personalmente.'
+    send_for_signing: 'Invia per la firma'
+    add_recipients: 'Aggiungi destinatari'
+    add_recipients_description: 'Aggiungi nuovi destinatari per la firma del documento. Puoi inserire il loro indirizzo email o numero di telefono.'
+    settings: 'Impostazioni'
+    settings_account_description: "Con impostazioni complete dell'account, puoi personalizzare l'esperienza di firma elettronica e invitare altri utenti."
+    support: 'Supporto'
+    support_description: 'Puoi usare il nostro assistente AI oppure scriverci a support@docuseal.com se hai domande.'
+    settings_template_description: "Usa questo pulsante per accedere alla pagina delle impostazioni dell'account."
   doorkeeper:
     scopes:
       write: Aggiorna i tuoi dati
@@ -2882,6 +3011,9 @@ fr: &fr
   pro_user_seats_used: Places utilisateur Pro en cours d'utilisation
   manage_plan: Gérer le plan
   this_submission_has_multiple_signers_which_prevents_the_use_of_a_sharing_link_html: 'Cette soumission comporte plusieurs signataires, ce qui empêche l’utilisation d’un lien de partage, car il n’est pas clair quel signataire est responsable de quels champs. Pour résoudre ce problème, suivez ce <a href="https://www.docuseal.com/resources/pre-filling-recipients" class="link font-bold" rel="noopener noreferrer nofollow" target="_blank">guide</a> pour définir les détails du signataire par défaut.'
+  welcome_to_docuseal: Bienvenue sur DocuSeal
+  start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: Lancez une visite rapide pour apprendre à créer et envoyer votre premier document.
+  start_tour: Démarrer
   submission_sources:
     api: API
     bulk: Envoi en masse
@@ -2920,6 +3052,46 @@ fr: &fr
     or: Un
     download: téléchargez
     a_sample_spreadsheet_to_fill_and_import: un modèle de feuille de calcul à remplir et importer.
+  app_tour:
+    start: Démarrer
+    previous: Précédent
+    next: Suivant
+    template_and_submissions: 'Modèles et Soumissions'
+    template_and_submissions_description: "Vous pouvez sélectionner la vue qui correspond le mieux à votre flux de travail. Choisissez la vue 'Modèles' si vous créez des modèles de documents réutilisables, ou la vue 'Soumissions' lorsque vous signez des documents individuels ou vérifiez l'état de chaque demande de signature."
+    upload_a_pdf_file: 'Téléverser un fichier PDF'
+    upload_a_pdf_file_description: "Téléversez un document pour l'utiliser comme modèle de formulaire de signature."
+    select_a_signer_party: 'Sélectionner une partie signataire'
+    select_a_signer_party_description: "Ce menu déroulant vous permet de sélectionner un rôle de signataire ou d'ajouter une nouvelle partie au document lorsqu'il doit être signé par deux parties ou plus."
+    available_parties: 'Parties disponibles'
+    available_parties_description: 'Cette liste contient toutes les parties disponibles avec leurs rôles. Une fois sélectionnée, vous pouvez ajouter et configurer les champs pour cette partie.'
+    available_field_types: 'Types de champs disponibles'
+    available_field_types_description: 'Cette section contient tous les types de champs pouvant être ajoutés au document pour la saisie de données ou la collecte de signatures.'
+    text_input_field: 'Champ de texte'
+    text_input_field_description: 'Ce champ permet aux utilisateurs de saisir des informations textuelles telles que des noms ou des adresses e-mail.'
+    signature_field: 'Champ de signature'
+    signature_field_description: 'Ce champ permet de collecter les signatures des signataires.'
+    added_fields: 'Champs ajoutés'
+    added_fields_description: 'Cette liste affiche tous les champs ajoutés au document. Vous pouvez les réorganiser, les modifier ou les supprimer.'
+    open_field_settings: 'Ouvrir les paramètres du champ'
+    open_field_settings_description: "À droite du nom du champ se trouve une icône permettant d'ouvrir les paramètres du champ."
+    field_settings: 'Paramètres du champ'
+    field_settings_description: "Chaque champ peut être personnalisé à l'aide des paramètres pour répondre à vos besoins, comme ajuster la taille de la police, le rendre obligatoire ou ajouter une description."
+    send_document: 'Envoyer le document pour signature'
+    send_document_description: "Avant d'envoyer le document pour signature, vous pouvez configurer les destinataires, ajouter leurs e-mails ou numéros de téléphone et personnaliser le contenu de l'e-mail."
+    sign_yourself: 'Signer le document vous-même'
+    sign_yourself_description: "Ce bouton vous permet d'ajouter votre propre signature aux documents qui en nécessitent une."
+    copy_and_share_link: 'Copier et partager le lien'
+    copy_and_share_link_description: 'Copiez ce lien pour partager le document. Toute personne disposant du lien pourra le signer après avoir saisi son e-mail.'
+    sign_the_document: 'Signer le document'
+    sign_the_document_description: 'Si vous êtes l’un des signataires, ce bouton vous permet de signer le document vous-même.'
+    send_for_signing: 'Envoyer pour signature'
+    add_recipients: 'Ajouter des destinataires'
+    add_recipients_description: 'Ajoutez de nouveaux destinataires pour que le document soit signé. Vous pouvez saisir leur adresse e-mail ou leur numéro de téléphone.'
+    settings: 'Paramètres'
+    settings_account_description: "Grâce à des paramètres de compte complets, vous pouvez personnaliser l'expérience de signature électronique et inviter d'autres utilisateurs."
+    support: 'Assistance'
+    support_description: 'Vous pouvez utiliser notre assistant IA ou nous écrire à support@docuseal.com si vous avez des questions.'
+    settings_template_description: 'Utilisez ce bouton pour accéder à la page des paramètres de votre compte.'
   doorkeeper:
     scopes:
       write: Mettre à jour vos données
@@ -3609,6 +3781,9 @@ pt: &pt
   pro_user_seats_used: Lugares de usuário Pro em uso
   manage_plan: Gerenciar plano
   this_submission_has_multiple_signers_which_prevents_the_use_of_a_sharing_link_html: 'Este envio tem vários signatários, o que impede o uso de um link de compartilhamento, pois não está claro qual signatário é responsável por quais campos. Para resolver isso, siga este <a href="https://www.docuseal.com/resources/pre-filling-recipients" class="link font-bold" rel="noopener noreferrer nofollow" target="_blank">guia</a> para definir os detalhes padrão do signatário.'
+  welcome_to_docuseal: Bem-vindo ao DocuSeal
+  start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: Comece um tour rápido para aprender a criar e enviar seu primeiro documento.
+  start_tour: Iniciar tour
   submission_sources:
     api: API
     bulk: Envio em massa
@@ -3647,6 +3822,47 @@ pt: &pt
     or: Ou
     download: baixe
     a_sample_spreadsheet_to_fill_and_import: uma planilha de exemplo para preencher e importar.
+  app_tour:
+    start: Iniciar
+    previous: Anterior
+    next: Próximo
+    template_and_submissions: 'Modelos e Envios'
+    template_and_submissions_description: "Você pode selecionar a visualização que melhor se adapta ao seu fluxo de trabalho. Escolha a visualização 'Modelos' se criar modelos de documentos reutilizáveis, ou 'Envios' ao assinar documentos individuais ou revisar o status de cada solicitação de assinatura."
+    upload_a_pdf_file: 'Enviar um arquivo PDF'
+    upload_a_pdf_file_description: 'Envie um documento para usá-lo como modelo de formulário de assinatura.'
+    select_a_signer_party: 'Selecionar parte assinante'
+    select_a_signer_party_description: 'Este menu suspenso permite selecionar um papel de assinante ou adicionar uma nova parte ao documento quando ele precisa ser assinado por duas ou mais partes.'
+    available_parties: 'Partes disponíveis'
+    available_parties_description: 'Esta lista contém todas as partes disponíveis com seus respectivos papéis. Após selecionar, você poderá adicionar e configurar os campos para essa parte.'
+    available_field_types: 'Tipos de campo disponíveis'
+    available_field_types_description: 'Esta seção contém todos os tipos de campos que podem ser adicionados ao documento para entrada de dados ou coleta de assinaturas.'
+    text_input_field: 'Campo de texto'
+    text_input_field_description: 'Este campo permite que os usuários insiram informações baseadas em texto, como nomes ou e-mails.'
+    signature_field: 'Campo de assinatura'
+    signature_field_description: 'Este campo permite coletar assinaturas dos signatários.'
+    added_fields: 'Campos adicionados'
+    added_fields_description: 'Esta lista exibe todos os campos adicionados ao documento. Você pode reordená-los, editá-los ou removê-los.'
+    open_field_settings: 'Abrir configurações do campo'
+    open_field_settings_description: 'À direita do nome do campo há um ícone de configurações que abre as configurações do campo.'
+    field_settings: 'Configurações do campo'
+    field_settings_description: 'Cada campo pode ser personalizado de acordo com suas necessidades, como ajustar o tamanho da fonte, torná-lo obrigatório ou adicionar uma descrição.'
+    send_document: 'Enviar documento para assinatura'
+    send_document_description: 'Antes de enviar o documento para assinatura, você pode configurar os destinatários, adicionar e-mails ou números de telefone e personalizar o conteúdo do e-mail.'
+    sign_yourself: 'Assinar o documento você mesmo'
+    sign_yourself_description: 'Este botão permite que você adicione sua própria assinatura aos documentos que exigem sua assinatura.'
+    copy_and_share_link: 'Copiar e compartilhar link'
+    copy_and_share_link_description: 'Copie este link para compartilhar o documento. Qualquer pessoa com o link pode assiná-lo após inserir seu e-mail.'
+    sign_the_document: 'Assinar o documento'
+    sign_the_document_description: 'Se você for um dos signatários, este botão permite que você assine o documento.'
+    send_for_signing: 'Enviar para assinatura'
+    add_recipients: 'Adicionar destinatários'
+    add_recipients_description: 'Adicione novos destinatários para que o documento seja assinado. Você pode inserir seus e-mails ou números de telefone.'
+    settings: 'Configurações'
+    settings_account_description: 'Com configurações completas de conta, você pode personalizar a experiência de assinatura eletrônica e convidar mais usuários.'
+    support: 'Suporte'
+    support_description: 'Você pode usar nosso assistente de IA ou nos escrever para support@docuseal.com se tiver dúvidas.'
+    settings: 'Configurações'
+    settings_template_description: 'Use este botão para acessar a página de configurações da sua conta.'
   doorkeeper:
     scopes:
       write: Atualizar seus dados
@@ -4336,6 +4552,9 @@ de: &de
   pro_user_seats_used: Verwendete Pro-Benutzerplätze
   manage_plan: Plan verwalten
   this_submission_has_multiple_signers_which_prevents_the_use_of_a_sharing_link_html: 'Diese Übermittlung hat mehrere Unterzeichner, was die Nutzung eines Freigabelinks verhindert, da unklar ist, welcher Unterzeichner für welche Felder verantwortlich ist. Um dies zu lösen, folgen Sie dieser <a href="https://www.docuseal.com/resources/pre-filling-recipients" class="link font-bold" rel="noopener noreferrer nofollow" target="_blank">Anleitung</a>, um die Standarddetails des Unterzeichners festzulegen.'
+  welcome_to_docuseal: Willkommen bei DocuSeal
+  start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: Starte eine kurze Tour, um zu lernen, wie du dein erstes Dokument erstellst und versendest.
+  start_tour: Starten
   submission_sources:
     api: API
     bulk: Massenversand
@@ -4374,6 +4593,46 @@ de: &de
     or: Oder
     download: laden
     a_sample_spreadsheet_to_fill_and_import: Sie eine Beispieltabelle herunter, um sie auszufüllen und zu importieren.
+  app_tour:
+    start: Start
+    previous: Zurück
+    next: Weiter
+    template_and_submissions: 'Vorlagen und Übermittlungen'
+    template_and_submissions_description: "Du kannst die Ansicht wählen, die am besten zu deinem Arbeitsablauf passt. Wähle die Ansicht 'Vorlagen', wenn du wiederverwendbare Dokumentenvorlagen erstellst, oder 'Übermittlungen', wenn du einzelne Dokumente unterschreibst oder den Status jeder Signaturanfrage überprüfen möchtest."
+    upload_a_pdf_file: 'PDF-Datei hochladen'
+    upload_a_pdf_file_description: 'Lade ein Dokument hoch, um es als Vorlage für ein Signaturformular zu verwenden.'
+    select_a_signer_party: 'Signaturpartei auswählen'
+    select_a_signer_party_description: 'Dieses Dropdown-Menü ermöglicht es dir, eine Signaturrolle auszuwählen oder eine neue Partei zum Dokument hinzuzufügen, wenn es von zwei oder mehr Parteien unterzeichnet werden muss.'
+    available_parties: 'Verfügbare Parteien'
+    available_parties_description: 'Diese Liste enthält alle verfügbaren Parteien mit ihren Rollennamen. Nach der Auswahl kannst du Felder für die Partei hinzufügen und konfigurieren.'
+    available_field_types: 'Verfügbare Feldtypen'
+    available_field_types_description: 'Dieser Bereich enthält alle verfügbaren Feldtypen, die dem Dokument für Dateneingabe oder Signaturerfassung hinzugefügt werden können.'
+    text_input_field: 'Textfeld'
+    text_input_field_description: 'Dieses Feld ermöglicht es Benutzern, textbasierte Informationen wie Namen oder E-Mails einzugeben.'
+    signature_field: 'Signaturfeld'
+    signature_field_description: 'Dieses Feld dient der Erfassung von Signaturen der Unterzeichner.'
+    added_fields: 'Hinzugefügte Felder'
+    added_fields_description: 'Diese Liste zeigt alle dem Dokument hinzugefügten Felder. Du kannst sie neu anordnen, bearbeiten oder entfernen.'
+    open_field_settings: 'Feld-Einstellungen öffnen'
+    open_field_settings_description: 'Rechts neben dem Feldnamen befindet sich ein Zahnradsymbol, um die Einstellungen des Feldes zu öffnen.'
+    field_settings: 'Feld-Einstellungen'
+    field_settings_description: 'Jedes Feld kann individuell angepasst werden, z. B. durch Schriftgröße, Pflichtfeld-Option oder Beschreibung.'
+    send_document: 'Dokument zum Unterschreiben senden'
+    send_document_description: 'Bevor du das Dokument zum Unterschreiben sendest, kannst du Empfänger hinzufügen, ihre E-Mail-Adressen oder Telefonnummern eingeben und den E-Mail-Inhalt anpassen.'
+    sign_yourself: 'Dokument selbst unterschreiben'
+    sign_yourself_description: 'Mit diesem Button kannst du deine eigene Unterschrift zu Dokumenten hinzufügen, die deine Signatur erfordern.'
+    copy_and_share_link: 'Link kopieren und teilen'
+    copy_and_share_link_description: 'Kopiere diesen Link, um das Dokument zu teilen. Jeder mit dem Link kann es unterschreiben, nachdem er seine E-Mail-Adresse eingegeben hat.'
+    sign_the_document: 'Dokument unterschreiben'
+    sign_the_document_description: 'Wenn du einer der Unterzeichner bist, kannst du das Dokument mit diesem Button selbst unterschreiben.'
+    send_for_signing: 'Zum Unterschreiben senden'
+    add_recipients: 'Empfänger hinzufügen'
+    add_recipients_description: 'Füge neue Empfänger hinzu, damit das Dokument unterschrieben werden kann. Du kannst deren E-Mail-Adressen oder Telefonnummern eingeben.'
+    settings: 'Einstellungen'
+    settings_account_description: 'Mit umfangreichen Kontoeinstellungen kannst du das Signiererlebnis anpassen und weitere Benutzer einladen.'
+    support: 'Support'
+    support_description: 'Du kannst unseren KI-Assistenten nutzen oder uns bei Fragen an support@docuseal.com schreiben.'
+    settings_template_description: 'Mit diesem Button gelangst du zu den Kontoeinstellungen.'
   doorkeeper:
     scopes:
       write: Aktualisiere deine Daten
diff --git a/package.json b/package.json
index 096cc9de..29d4e173 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "css-loader": "^6.7.3",
     "css-minimizer-webpack-plugin": "^5.0.0",
     "daisyui": "^3.9.4",
+    "driver.js": "^1.3.5",
     "mathjs": "^12.4.0",
     "mini-css-extract-plugin": "^2.7.5",
     "postcss": "^8.4.31",
diff --git a/yarn.lock b/yarn.lock
index 9ab83c8a..8051ab58 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2678,6 +2678,11 @@ domutils@^3.0.1:
     domelementtype "^2.3.0"
     domhandler "^5.0.3"
 
+driver.js@^1.3.5:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/driver.js/-/driver.js-1.3.5.tgz#70695fd2b3b15a3db409c8a37d9b3a563a7c176a"
+  integrity sha512-exkp49hXuujvTOZ3zYgySWRlEAa8/3nA8glYjtuZjmkTdsQITXivBsW1ytyhKQx3WkeYaovlnvVcLbtTaN86kA==
+
 duplexer@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"

From c133fef99d7971a6601c935913bb5bcddd8dee51 Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete@docuseal.com>
Date: Fri, 4 Apr 2025 16:53:35 +0300
Subject: [PATCH 09/10] ruby 3.4.2

---
 .github/workflows/ci.yml | 8 ++++----
 Dockerfile               | 6 +++---
 Gemfile                  | 2 +-
 Gemfile.lock             | 2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index ae1b667c..c4d56d7b 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -11,7 +11,7 @@ jobs:
       - name: Install Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3.4.1
+          ruby-version: 3.4.2
       - name: Cache gems
         uses: actions/cache@v4
         with:
@@ -35,7 +35,7 @@ jobs:
       - name: Install Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3.4.1
+          ruby-version: 3.4.2
       - name: Cache gems
         uses: actions/cache@v4
         with:
@@ -85,7 +85,7 @@ jobs:
       - name: Install Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3.4.1
+          ruby-version: 3.4.2
       - name: Cache gems
         uses: actions/cache@v4
         with:
@@ -127,7 +127,7 @@ jobs:
       - name: Install Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3.4.1
+          ruby-version: 3.4.2
       - name: Set up Node
         uses: actions/setup-node@v1
         with:
diff --git a/Dockerfile b/Dockerfile
index 23fa1ad7..99753c93 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,4 @@
-FROM ruby:3.4.1-alpine AS fonts
+FROM ruby:3.4.2-alpine AS fonts
 
 WORKDIR /fonts
 
@@ -6,7 +6,7 @@ RUN apk --no-cache add fontforge wget && wget https://github.com/satbyy/go-noto-
 
 RUN fontforge -lang=py -c 'font1 = fontforge.open("FreeSans.ttf"); font2 = fontforge.open("NotoSansSymbols2-Regular.ttf"); font1.mergeFonts(font2); font1.generate("FreeSans.ttf")'
 
-FROM ruby:3.4.1-alpine AS webpack
+FROM ruby:3.4.2-alpine AS webpack
 
 ENV RAILS_ENV=production
 ENV NODE_ENV=production
@@ -32,7 +32,7 @@ COPY ./app/views ./app/views
 
 RUN echo "gem 'shakapacker'" > Gemfile && ./bin/shakapacker
 
-FROM ruby:3.4.1-alpine AS app
+FROM ruby:3.4.2-alpine AS app
 
 ENV RAILS_ENV=production
 ENV BUNDLE_WITHOUT="development:test"
diff --git a/Gemfile b/Gemfile
index 6961ac80..7820977c 100644
--- a/Gemfile
+++ b/Gemfile
@@ -2,7 +2,7 @@
 
 source 'https://rubygems.org'
 
-ruby '3.4.1'
+ruby '3.4.2'
 
 gem 'arabic-letter-connector', require: 'arabic-letter-connector/logic'
 gem 'aws-sdk-s3', require: false
diff --git a/Gemfile.lock b/Gemfile.lock
index 43018559..88d95b09 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -652,7 +652,7 @@ DEPENDENCIES
   webmock
 
 RUBY VERSION
-   ruby 3.4.1p0
+   ruby 3.4.2p28
 
 BUNDLED WITH
    2.5.3

From 889fcad859c6425a8186515c365b473ec88ca2f4 Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete@docuseal.com>
Date: Sat, 5 Apr 2025 12:06:29 +0300
Subject: [PATCH 10/10] fix drop position

---
 app/javascript/template_builder/builder.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index a830dd02..c83c3873 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -1476,7 +1476,6 @@ export default {
 
       fieldArea.w = baseArea.w
       fieldArea.h = baseArea.h
-      fieldArea.y = fieldArea.y - baseArea.h / 2
 
       if (fieldType === 'cells') {
         fieldArea.cell_w = baseArea.cell_w || (baseArea.w / 5)
@@ -1498,6 +1497,8 @@ export default {
       if (field.height) {
         fieldArea.h = field.height / area.maskH
       }
+
+      fieldArea.y = fieldArea.y - fieldArea.h / 2
     },
     addBlankPage () {
       this.isLoadingBlankPage = true