add app tour

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

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)

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 })
+    })
+  }
+}

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
     }
 

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 () {

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]')

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 }

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
 

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' %>

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') %>

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 %>

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' %>

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') %>

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">

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>

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') %>

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>

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') %>

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>

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)) %>

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? %>

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

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",

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"