hide mobile field draw box

This reverts commit f7132445a1.

app/controllers/api/api_base_controller.rb

@@ -25,7 +25,7 @@ module Api
 
     def paginate(relation)
       result = relation.order(id: :desc)
-                       .limit([params[:limit] || DEFAULT_LIMIT, MAX_LIMIT].min)
+                       .limit([params.fetch(:limit, DEFAULT_LIMIT).to_i, MAX_LIMIT].min)
 
       result = result.where('id < ?', params[:after]) if params[:after].present?
       result = result.where('id > ?', params[:before]) if params[:before].present?

app/controllers/api/submissions_controller.rb

@@ -13,7 +13,8 @@ module Api
       submissions = Submissions.search(@submissions, params[:q])
       submissions = submissions.where(template_id: params[:template_id]) if params[:template_id].present?
 
-      submissions = paginate(submissions.preload(:created_by_user, :template, :submitters))
+      submissions = paginate(submissions.preload(:created_by_user, :template, :submitters,
+                                                 audit_trail_attachment: :blob))
 
       render json: {
         data: submissions.as_json(serialize_params),
@@ -93,6 +94,7 @@ module Api
     def serialize_params
       {
         only: %i[id source submitters_order created_at updated_at],
+        methods: %i[audit_log_url],
         include: {
           submitters: { only: %i[id slug uuid name email phone
                                  completed_at opened_at sent_at

app/controllers/api/templates_controller.rb

@@ -8,6 +8,7 @@ module Api
       templates = Templates.search(@templates, params[:q])
 
       templates = params[:archived] ? templates.archived : templates.active
+      templates = templates.where(application_key: params[:application_key]) if params[:application_key].present?
 
       templates = paginate(templates.preload(:author, documents_attachments: :blob))
 
@@ -51,11 +52,13 @@ module Api
     end
 
     def template_params
-      params.require(:template).permit(:name,
+      params.require(:template).permit(
-                                       schema: [%i[attachment_uuid name]],
+        :name,
-                                       submitters: [%i[name uuid]],
+        schema: [%i[attachment_uuid name]],
-                                       fields: [[:uuid, :submitter_uuid, :name, :type, :required,
+        submitters: [%i[name uuid]],
-                                                 { options: [], areas: [%i[x y w h cell_w attachment_uuid page]] }]])
+        fields: [[:uuid, :submitter_uuid, :name, :type, :required, :readonly, :default_value,
+                  { options: [], areas: [%i[x y w h cell_w attachment_uuid page]] }]]
+      )
     end
   end
 end

app/controllers/start_form_controller.rb

@@ -47,7 +47,7 @@ class StartFormController < ApplicationController
   private
 
   def submitter_params
-    params.require(:submitter).permit(:email, :phone).tap do |attrs|
+    params.require(:submitter).permit(:email, :phone, :name).tap do |attrs|
       attrs[:email] = Submissions.normalize_email(attrs[:email])
     end
   end

app/javascript/submission_form/form.vue

@@ -513,9 +513,15 @@ export default {
   mounted () {
     this.submittedValues = JSON.parse(JSON.stringify(this.values))
 
+    this.fields.forEach((field) => {
+      if (field.default_value && !field.readonly) {
+        this.values[field.uuid] = field.default_value
+      }
+    })
+
     if (this.goToLast) {
-      const requiredEmptyStepIndex = this.stepFields.indexOf(this.stepFields.find((fields) => fields.some((f) => f.required && !this.values[f.uuid])))
+      const requiredEmptyStepIndex = this.stepFields.indexOf(this.stepFields.find((fields) => fields.some((f) => f.required && !this.submittedValues[f.uuid])))
-      const lastFilledStepIndex = this.stepFields.indexOf([...this.stepFields].reverse().find((fields) => fields.some((f) => !!this.values[f.uuid]))) + 1
+      const lastFilledStepIndex = this.stepFields.indexOf([...this.stepFields].reverse().find((fields) => fields.some((f) => !!this.submittedValues[f.uuid]))) + 1
 
       const indexesList = [this.stepFields.length - 1]
 

app/javascript/template_builder/area.vue

@@ -23,7 +23,7 @@
         :style="{ left: (cellW / area.w * 100) + '%' }"
       >
         <span
-          v-if="index === 0"
+          v-if="index === 0 && editable"
           class="h-2.5 w-2.5 rounded-full -bottom-1 border-gray-400 bg-white shadow-md border absolute cursor-ew-resize z-10"
           style="left: -4px"
           @mousedown.stop="startResizeCell"
@@ -42,6 +42,7 @@
         v-model="field.submitter_uuid"
         class="border-r"
         :compact="true"
+        :editable="editable"
         :menu-classes="'dropdown-content bg-white menu menu-xs p-2 shadow rounded-box w-52 rounded-t-none -left-[1px]'"
         :submitters="template.submitters"
         @update:model-value="save"
@@ -50,6 +51,7 @@
       <FieldType
         v-model="field.type"
         :button-width="27"
+        :editable="editable"
         :button-classes="'px-1'"
         :menu-classes="'bg-white rounded-t-none'"
         @update:model-value="[maybeUpdateOptions(), save()]"
@@ -58,7 +60,7 @@
       <span
         v-if="field.type !== 'checkbox' || field.name"
         ref="name"
-        contenteditable
+        :contenteditable="editable"
         class="pr-1 cursor-text outline-none block"
         style="min-width: 2px"
         @keydown.enter.prevent="onNameEnter"
@@ -84,7 +86,7 @@
         >Required</label>
       </div>
       <button
-        v-else
+        v-else-if="editable"
         class="pr-1"
         title="Remove"
         @click.prevent="$emit('remove')"
@@ -93,18 +95,27 @@
       </button>
     </div>
     <div
-      class="opacity-50 flex items-center justify-center h-full w-full"
+      class="flex items-center h-full w-full"
-      :class="bgColors[submitterIndex]"
+      :class="[bgColors[submitterIndex], field?.default_value ? '' : 'justify-center']"
     >
       <span
         v-if="field"
         class="flex justify-center items-center space-x-1 h-full"
       >
+        <div
+          v-if="field?.default_value"
+          class="text-[1.5vw] lg:text-base"
+        >
+          <div class="flex items-center px-0.5">
+            <span class="whitespace-pre-wrap">{{ field.default_value }}</span>
+          </div>
+        </div>
         <component
           :is="fieldIcons[field.type]"
+          v-else
           width="100%"
           height="100%"
-          class="max-h-10"
+          class="max-h-10 opacity-50"
         />
       </span>
     </div>
@@ -113,7 +124,7 @@
       class="absolute top-0 bottom-0 right-0 left-0 cursor-pointer"
     />
     <span
-      v-if="field?.type"
+      v-if="field?.type && editable"
       class="h-4 w-4 md:h-2.5 md:w-2.5 -right-1 rounded-full -bottom-1 border-gray-400 bg-white shadow-md border absolute cursor-nwse-resize"
       @mousedown.stop="startResize"
       @touchstart="startTouchResize"
@@ -145,6 +156,11 @@ export default {
       required: false,
       default: false
     },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     field: {
       type: Object,
       required: false,
@@ -185,30 +201,30 @@ export default {
     },
     borderColors () {
       return [
-        'border-red-500',
+        'border-red-500/50',
-        'border-sky-500',
+        'border-sky-500/50',
-        'border-emerald-500',
+        'border-emerald-500/50',
-        'border-yellow-300',
+        'border-yellow-300/50',
-        'border-purple-600',
+        'border-purple-600/50',
-        'border-pink-500',
+        'border-pink-500/50',
-        'border-cyan-500',
+        'border-cyan-500/50',
-        'border-orange-500',
+        'border-orange-500/50',
-        'border-lime-500',
+        'border-lime-500/50',
-        'border-indigo-500'
+        'border-indigo-500/50'
       ]
     },
     bgColors () {
       return [
-        'bg-red-100',
+        'bg-red-100/50',
-        'bg-sky-100',
+        'bg-sky-100/50',
-        'bg-emerald-100',
+        'bg-emerald-100/50',
-        'bg-yellow-100',
+        'bg-yellow-100/50',
-        'bg-purple-100',
+        'bg-purple-100/50',
-        'bg-pink-100',
+        'bg-pink-100/50',
-        'bg-cyan-100',
+        'bg-cyan-100/50',
-        'bg-orange-100',
+        'bg-orange-100/50',
-        'bg-lime-100',
+        'bg-lime-100/50',
-        'bg-indigo-100'
+        'bg-indigo-100/50'
       ]
     },
     isSelected () {
@@ -262,6 +278,8 @@ export default {
       }
     },
     maybeUpdateOptions () {
+      delete this.field.default_value
+
       if (!['radio', 'multiple', 'select'].includes(this.field.type)) {
         delete this.field.options
       }
@@ -313,6 +331,10 @@ export default {
     startDrag (e) {
       this.selectedAreaRef.value = this.area
 
+      if (!this.editable) {
+        return
+      }
+
       const rect = e.target.getBoundingClientRect()
 
       this.dragFrom = { x: e.clientX - rect.left, y: e.clientY - rect.top }

app/javascript/template_builder/builder.vue

@@ -16,6 +16,7 @@
         </a>
         <Contenteditable
           :model-value="template.name"
+          :editable="editable"
           class="text-3xl font-semibold focus:text-clip"
           :icon-stroke-width="2.3"
           @update:model-value="updateName"
@@ -76,6 +77,7 @@
           :item="item"
           :document="sortedDocuments[index]"
           :accept-file-types="acceptFileTypes"
+          :editable="editable"
           :template="template"
           :is-direct-upload="isDirectUpload"
           @scroll-to="scrollIntoDocument(item)"
@@ -90,7 +92,7 @@
           :class="{ 'bg-base-100': withStickySubmitters }"
         >
           <Upload
-            v-if="sortedDocuments.length"
+            v-if="sortedDocuments.length && editable"
             :accept-file-types="acceptFileTypes"
             :template-id="template.id"
             :is-direct-upload="isDirectUpload"
@@ -122,12 +124,13 @@
                 :document="document"
                 :is-drag="!!dragFieldType"
                 :draw-field="drawField"
+                :editable="editable"
                 @draw="onDraw"
                 @drop-field="onDropfield"
                 @remove-area="removeArea"
               />
               <DocumentControls
-                v-if="isBreakpointLg"
+                v-if="isBreakpointLg && editable"
                 :with-arrows="template.schema.length > 1"
                 :item="template.schema.find((item) => item.attachment_uuid === document.uuid)"
                 :document="document"
@@ -142,7 +145,7 @@
               />
             </template>
             <div
-              v-if="sortedDocuments.length && isBreakpointLg"
+              v-if="sortedDocuments.length && isBreakpointLg && editable"
               class="pb-4"
             >
               <Upload
@@ -153,34 +156,19 @@
             </div>
           </template>
         </div>
-        <span
+        <MobileDrawField
-          v-if="drawField"
+          v-if="drawField && isBreakpointLg"
-          class="fixed text-center w-full left-1/2 bottom-0 transform -translate-x-1/2"
+          :draw-field="drawField"
-        >
+          :fields="template.fields"
-          <span
+          :submitters="template.submitters"
-            class="rounded bg-base-200 px-4 py-2 rounded-full inline-flex space-x-2 mx-auto items-center mb-4 z-20 md:hidden"
+          :selected-submitter="selectedSubmitter"
-          >
+          class="md:hidden"
-            <component
+          :editable="editable"
-              :is="fieldIcons[drawField.type]"
+          @cancel="drawField = null"
-              :width="20"
+          @change-submitter="[selectedSubmitter = $event, drawField.submitter_uuid = $event.uuid]"
-              :height="20"
+        />
-              class="inline"
-              :stroke-width="1.6"
-            />
-            <span>
-              Draw {{ fieldNames[drawField.type] }} Field
-            </span>
-            <a
-              href="#"
-              class="link block text-center"
-              @click.prevent="drawField = null"
-            >
-              Cancel
-            </a>
-          </span>
-        </span>
         <FieldType
-          v-if="sortedDocuments.length && !drawField"
+          v-if="sortedDocuments.length && !drawField && editable"
           class="dropdown-top dropdown-end fixed bottom-4 right-4 z-10 md:hidden"
           :model-value="''"
           @update:model-value="startFieldDraw($event)"
@@ -231,6 +219,7 @@
             :submitters="template.submitters"
             :selected-submitter="selectedSubmitter"
             :with-sticky-submitters="withStickySubmitters"
+            :editable="editable"
             @set-draw="drawField = $event"
             @set-drag="dragFieldType = $event"
             @change-submitter="selectedSubmitter = $event"
@@ -247,6 +236,7 @@
 import Upload from './upload'
 import Dropzone from './dropzone'
 import Fields from './fields'
+import MobileDrawField from './mobile_draw_field'
 import Document from './document'
 import Logo from './logo'
 import Contenteditable from './contenteditable'
@@ -263,6 +253,7 @@ export default {
     Upload,
     Document,
     Fields,
+    MobileDrawField,
     IconPlus,
     FieldType,
     IconX,
@@ -300,6 +291,11 @@ export default {
       required: false,
       default: ''
     },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     acceptFileTypes: {
       type: String,
       required: false,

app/javascript/template_builder/contenteditable.vue

@@ -5,7 +5,7 @@
   >
     <span
       ref="contenteditable"
-      contenteditable
+      :contenteditable="editable"
       style="min-width: 2px"
       :class="iconInline ? 'inline' : 'block'"
       class="peer outline-none focus:block"
@@ -24,6 +24,7 @@
       *
     </span>
     <IconPencil
+      v-if="editable"
       class="cursor-pointer flex-none opacity-0 group-hover/contenteditable-container:opacity-100 group-hover/contenteditable:opacity-100 align-middle peer-focus:hidden"
       :style="iconInline ? {} : { right: -(1.1 * iconWidth) + 'px' }"
       title="Edit"
@@ -69,6 +70,11 @@ export default {
       required: false,
       default: false
     },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     iconStrokeWidth: {
       type: Number,
       required: false,

app/javascript/template_builder/document.vue

@@ -5,6 +5,7 @@
       :key="image.id"
       :ref="setPageRefs"
       :number="index"
+      :editable="editable"
       :areas="areasIndex[index]"
       :is-drag="isDrag"
       :draw-field="drawField"
@@ -38,6 +39,11 @@ export default {
       type: Object,
       required: true
     },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     drawField: {
       type: Object,
       required: false,

app/javascript/template_builder/field.vue

@@ -4,6 +4,7 @@
   >
     <div
       class="border border-base-300 rounded rounded-tr-none relative group"
+      :style="{ backgroundColor: backgroundColor }"
     >
       <div class="flex items-center justify-between relative group/contenteditable-container">
         <div
@@ -13,6 +14,7 @@
         <div class="flex items-center p-1 space-x-1">
           <FieldType
             v-model="field.type"
+            :editable="editable"
             :button-width="20"
             @update:model-value="[maybeUpdateOptions(), save()]"
             @click="scrollToFirstArea"
@@ -20,6 +22,7 @@
           <Contenteditable
             ref="name"
             :model-value="field.name || defaultName"
+            :editable="editable"
             :icon-inline="true"
             :icon-width="18"
             :icon-stroke-width="1.6"
@@ -46,19 +49,29 @@
           >Required</label>
         </div>
         <div
-          v-else
+          v-else-if="editable"
           class="flex items-center space-x-1"
         >
+          <button
+            v-if="field && !field.areas.length"
+            title="Draw"
+            class="relative cursor-pointer text-transparent group-hover:text-base-content"
+            @click="$emit('set-draw', field)"
+          >
+            <IconNewSection
+              :width="18"
+              :stroke-width="1.6"
+            />
+          </button>
           <span
-            v-if="field.areas?.length"
             class="dropdown dropdown-end"
           >
             <label
               tabindex="0"
-              title="Areas"
+              title="Settings"
               class="cursor-pointer text-transparent group-hover:text-base-content"
             >
-              <IconShape
+              <IconSettings
                 :width="18"
                 :stroke-width="1.6"
               />
@@ -66,8 +79,57 @@
             <ul
               tabindex="0"
               class="mt-1.5 dropdown-content menu menu-xs p-2 shadow bg-base-100 rounded-box w-52 z-10"
+              draggable="true"
+              @dragstart.prevent.stop
               @click="closeDropdown"
             >
+              <div
+                v-if="field.type === 'text'"
+                class="py-1.5 px-1 relative"
+                @click.stop
+              >
+                <input
+                  v-model="field.default_value"
+                  type="text"
+                  placeholder="Default value"
+                  class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
+                  @blur="save"
+                >
+                <label
+                  v-if="field.default_value"
+                  :style="{ backgroundColor: backgroundColor }"
+                  class="absolute -top-1 left-2.5 px-1 h-4"
+                  style="font-size: 8px"
+                >
+                  Default value
+                </label>
+              </div>
+              <li @click.stop>
+                <label class="cursor-pointer py-1.5">
+                  <input
+                    v-model="field.required"
+                    type="checkbox"
+                    class="toggle toggle-xs"
+                    @update:model-value="save"
+                  >
+                  <span class="label-text">Required</span>
+                </label>
+              </li>
+              <li
+                v-if="field.type === 'text'"
+                @click.stop
+              >
+                <label class="cursor-pointer py-1.5">
+                  <input
+                    v-model="field.readonly"
+                    type="checkbox"
+                    class="toggle toggle-xs"
+                    @update:model-value="save"
+                  >
+                  <span class="label-text">Read-only</span>
+                </label>
+              </li>
+              <hr class="pb-0.5 mt-0.5">
               <li
                 v-for="(area, index) in field.areas || []"
                 :key="index"
@@ -113,18 +175,7 @@
             </ul>
           </span>
           <button
-            v-else
+            class="relative text-transparent group-hover:text-base-content pr-1"
-            title="Areas"
-            class="relative cursor-pointer text-transparent group-hover:text-base-content"
-            @click="$emit('set-draw', field)"
-          >
-            <IconShape
-              :width="18"
-              :stroke-width="1.6"
-            />
-          </button>
-          <button
-            class="relative text-transparent group-hover:text-base-content"
             title="Remove"
             @click="$emit('remove', field)"
           >
@@ -133,24 +184,6 @@
               :stroke-width="1.6"
             />
           </button>
-          <div class="flex flex-col pr-1 text-transparent group-hover:text-base-content">
-            <button
-              title="Up"
-              class="relative"
-              style="font-size: 10px; margin-bottom: -2px"
-              @click="$emit('move-up')"
-            >
-              ▲
-            </button>
-            <button
-              title="Down"
-              class="relative"
-              style="font-size: 10px; margin-top: -2px"
-              @click="$emit('move-down')"
-            >
-              ▼
-            </button>
-          </div>
         </div>
       </div>
       <div
@@ -194,26 +227,32 @@
 <script>
 import Contenteditable from './contenteditable'
 import FieldType from './field_type'
-import { IconShape, IconNewSection, IconTrashX, IconCopy } from '@tabler/icons-vue'
+import { IconShape, IconNewSection, IconTrashX, IconCopy, IconSettings } from '@tabler/icons-vue'
 
 export default {
   name: 'TemplateField',
   components: {
     Contenteditable,
+    IconSettings,
     IconShape,
     IconNewSection,
     IconTrashX,
     IconCopy,
     FieldType
   },
-  inject: ['template', 'save'],
+  inject: ['template', 'save', 'backgroundColor'],
   props: {
     field: {
       type: Object,
       required: true
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
-  emits: ['set-draw', 'remove', 'move-up', 'move-down', 'scroll-to'],
+  emits: ['set-draw', 'remove', 'scroll-to'],
   data () {
     return {
       isNameFocus: false
@@ -266,6 +305,8 @@ export default {
       document.activeElement.blur()
     },
     maybeUpdateOptions () {
+      delete this.field.default_value
+
       if (!['radio', 'multiple', 'select'].includes(this.field.type)) {
         delete this.field.options
       }

app/javascript/template_builder/field_submitter.vue

@@ -1,5 +1,91 @@
 <template>
-  <div class="dropdown">
+  <div v-if="mobileView">
+    <div class="flex space-x-2 items-end">
+      <div class="group/contenteditable-container bg-base-100 rounded-md p-2 border border-base-300 w-full flex justify-between items-end">
+        <div class="flex items-center space-x-2">
+          <span
+            class="w-3 h-3 flex-shrink-0 rounded-full"
+            :class="colors[submitters.indexOf(selectedSubmitter)]"
+          />
+          <Contenteditable
+            v-model="selectedSubmitter.name"
+            class="cursor-text"
+            :icon-inline="true"
+            :editable="editable"
+            :select-on-edit-click="true"
+            :icon-width="18"
+            @update:model-value="$emit('name-change', selectedSubmitter)"
+          />
+        </div>
+      </div>
+      <div class="dropdown dropdown-top dropdown-end">
+        <label
+          tabindex="0"
+          class="bg-base-100 cursor-pointer rounded-md p-2 border border-base-300 w-full flex justify-center"
+        >
+          <IconChevronUp
+            width="24"
+            height="24"
+          />
+        </label>
+        <ul
+          v-if="editable"
+          tabindex="0"
+          class="rounded-md min-w-max mb-2"
+          :class="menuClasses"
+          @click="closeDropdown"
+        >
+          <li
+            v-for="(submitter, index) in submitters"
+            :key="submitter.uuid"
+          >
+            <a
+              href="#"
+              class="flex px-2 group justify-between items-center"
+              :class="{ 'active': submitter === selectedSubmitter }"
+              @click.prevent="selectSubmitter(submitter)"
+            >
+              <span class="py-1 flex items-center">
+                <span
+                  class="rounded-full w-3 h-3 ml-1 mr-3"
+                  :class="colors[index]"
+                />
+                <span>
+                  {{ submitter.name }}
+                </span>
+              </span>
+              <button
+                v-if="submitters.length > 1 && editable"
+                class="px-2"
+                @click.stop="remove(submitter)"
+              >
+                <IconTrashX :width="18" />
+              </button>
+            </a>
+          </li>
+          <li v-if="submitters.length < 10 && editable">
+            <a
+              href="#"
+              class="flex px-2"
+              @click.prevent="addSubmitter"
+            >
+              <IconUserPlus
+                :width="20"
+                :stroke-width="1.6"
+              />
+              <span class="py-1">
+                Add Submitter
+              </span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <div
+    v-else
+    class="dropdown"
+  >
     <label
       v-if="compact"
       tabindex="0"
@@ -25,6 +111,7 @@
           v-model="selectedSubmitter.name"
           class="cursor-text"
           :icon-inline="true"
+          :editable="editable"
           :select-on-edit-click="true"
           :icon-width="18"
           @update:model-value="$emit('name-change', selectedSubmitter)"
@@ -38,6 +125,7 @@
       </span>
     </label>
     <ul
+      v-if="editable || !compact"
       tabindex="0"
       :class="menuClasses"
       @click="closeDropdown"
@@ -62,7 +150,7 @@
             </span>
           </span>
           <button
-            v-if="!compact && submitters.length > 1"
+            v-if="!compact && submitters.length > 1 && editable"
             class="hidden group-hover:block px-2"
             @click.stop="remove(submitter)"
           >
@@ -70,7 +158,7 @@
           </button>
         </a>
       </li>
-      <li v-if="submitters.length < 10">
+      <li v-if="submitters.length < 10 && editable">
         <a
           href="#"
           class="flex px-2"
@@ -90,7 +178,7 @@
 </template>
 
 <script>
-import { IconUserPlus, IconTrashX, IconPlus } from '@tabler/icons-vue'
+import { IconUserPlus, IconTrashX, IconPlus, IconChevronUp } from '@tabler/icons-vue'
 import Contenteditable from './contenteditable'
 import { v4 } from 'uuid'
 
@@ -100,18 +188,29 @@ export default {
     IconUserPlus,
     Contenteditable,
     IconPlus,
-    IconTrashX
+    IconTrashX,
+    IconChevronUp
   },
   props: {
     submitters: {
       type: Array,
       required: true
     },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     compact: {
       type: Boolean,
       required: false,
       default: false
     },
+    mobileView: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     modelValue: {
       type: String,
       required: true

app/javascript/template_builder/field_type.vue

@@ -15,6 +15,7 @@
       </label>
     </slot>
     <ul
+      v-if="editable"
       tabindex="0"
       class="dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10 mb-3"
       :class="menuClasses"
@@ -65,6 +66,11 @@ export default {
       required: false,
       default: ''
     },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     buttonWidth: {
       type: Number,
       required: false,

app/javascript/template_builder/fields.vue

@@ -5,26 +5,37 @@
       class="w-full rounded-lg"
       :class="{ 'bg-base-100': withStickySubmitters }"
       :submitters="submitters"
+      :editable="editable"
       @new-submitter="save"
       @remove="removeSubmitter"
       @name-change="save"
       @update:model-value="$emit('change-submitter', submitters.find((s) => s.uuid === $event))"
     />
   </div>
-  <div class="mb-1 mt-2">
+  <div
+    class="mb-1 mt-2"
+    @dragover.prevent="onFieldDragover"
+    @drop="save"
+  >
     <Field
       v-for="field in submitterFields"
       :key="field.uuid"
+      :data-uuid="field.uuid"
       :field="field"
       :type-index="fields.filter((f) => f.type === field.type).indexOf(field)"
+      :editable="editable && !dragField"
+      :draggable="editable"
+      @dragstart="dragField = field"
+      @dragend="dragField = null"
       @remove="removeField"
-      @move-up="move(field, -1)"
-      @move-down="move(field, 1)"
       @scroll-to="$emit('scroll-to-area', $event)"
       @set-draw="$emit('set-draw', $event)"
     />
   </div>
-  <div class="grid grid-cols-3 gap-1 pb-2">
+  <div
+    v-if="editable"
+    class="grid grid-cols-3 gap-1 pb-2"
+  >
     <template
       v-for="(icon, type) in fieldIcons"
       :key="type"
@@ -100,7 +111,7 @@
     </template>
   </div>
   <div
-    v-if="fields.length < 4"
+    v-if="fields.length < 4 && editable"
     class="text-xs p-2 border border-base-200 rounded"
   >
     <ul class="list-disc list-outside ml-3">
@@ -137,6 +148,11 @@ export default {
       type: Array,
       required: true
     },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     withStickySubmitters: {
       type: Boolean,
       required: false,
@@ -152,6 +168,11 @@ export default {
     }
   },
   emits: ['set-draw', 'set-drag', 'drag-end', 'scroll-to-area', 'change-submitter'],
+  data () {
+    return {
+      dragField: null
+    }
+  },
   computed: {
     fieldNames: FieldType.computed.fieldNames,
     fieldIcons: FieldType.computed.fieldIcons,
@@ -163,6 +184,24 @@ export default {
     onDragstart (fieldType) {
       this.$emit('set-drag', fieldType)
     },
+    onFieldDragover (e) {
+      const targetFieldUuid = e.target.closest('[data-uuid]')?.dataset?.uuid
+
+      if (this.dragField && targetFieldUuid && this.dragField.uuid !== targetFieldUuid) {
+        const field = this.fields.find((f) => f.uuid === targetFieldUuid)
+
+        const currentIndex = this.fields.indexOf(this.dragField)
+        const targetIndex = this.fields.indexOf(field)
+
+        if (currentIndex < targetIndex) {
+          this.fields.splice(targetIndex + 1, 0, this.dragField)
+          this.fields.splice(currentIndex, 1)
+        } else {
+          this.fields.splice(targetIndex, 0, this.dragField)
+          this.fields.splice(currentIndex + 1, 1)
+        }
+      }
+    },
     removeSubmitter (submitter) {
       [...this.fields].forEach((field) => {
         if (field.submitter_uuid === submitter.uuid) {
@@ -178,26 +217,6 @@ export default {
 
       this.save()
     },
-    move (field, direction) {
-      const currentIndex = this.submitterFields.indexOf(field)
-      const fieldsIndex = this.fields.indexOf(field)
-
-      this.fields.splice(fieldsIndex, 1)
-
-      if (currentIndex + direction > this.submitterFields.length) {
-        const firstIndex = this.fields.indexOf(this.submitterFields[0])
-
-        this.fields.splice(firstIndex, 0, field)
-      } else if (currentIndex + direction < 0) {
-        const lastIndex = this.fields.indexOf(this.submitterFields[this.submitterFields.length - 1])
-
-        this.fields.splice(lastIndex + 1, 0, field)
-      } else {
-        this.fields.splice(fieldsIndex + direction, 0, field)
-      }
-
-      this.save()
-    },
     removeField (field) {
       this.fields.splice(this.fields.indexOf(field), 1)
 

app/javascript/template_builder/mobile_draw_field.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="fixed text-center w-full bottom-0 pr-6 mb-4">
+    <span class="w-full bg-base-200 px-4 py-2 rounded-md inline-flex space-x-2 mx-auto items-center justify-between mb-2 z-20 md:hidden">
+      <div class="flex items-center space-x-2">
+        <component
+          :is="fieldIcons[drawField.type]"
+          :width="20"
+          :height="20"
+          class="inline"
+          :stroke-width="1.6"
+        />
+        <span> Draw {{ fieldNames[drawField.type] }} Field </span>
+      </div>
+      <a
+        href="#"
+        class="link block text-center"
+        @click.prevent="$emit('cancel')"
+      >
+        Cancel
+      </a>
+    </span>
+    <FieldSubmitter
+      :model-value="selectedSubmitter.uuid"
+      :submitters="submitters"
+      :editable="editable"
+      :mobile-view="true"
+      @new-submitter="save"
+      @remove="removeSubmitter"
+      @name-change="save"
+      @update:model-value="$emit('change-submitter', submitters.find((s) => s.uuid === $event))"
+    />
+  </div>
+</template>
+
+<script>
+import Field from './field'
+import FieldType from './field_type'
+import FieldSubmitter from './field_submitter'
+
+export default {
+  name: 'MobileDrawField',
+  components: {
+    Field,
+    FieldSubmitter
+  },
+  inject: ['save'],
+  props: {
+    drawField: {
+      type: Object,
+      required: true
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    submitters: {
+      type: Array,
+      required: true
+    },
+    fields: {
+      type: Array,
+      required: true
+    },
+    selectedSubmitter: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['change-submitter', 'cancel'],
+  computed: {
+    fieldNames: FieldType.computed.fieldNames,
+    fieldIcons: FieldType.computed.fieldIcons
+  },
+  methods: {
+    removeSubmitter (submitter) {
+      [...this.fields].forEach((field) => {
+        if (field.submitter_uuid === submitter.uuid) {
+          this.removeField(field)
+        }
+      })
+
+      this.submitters.splice(this.submitters.indexOf(submitter), 1)
+
+      if (this.selectedSubmitter === submitter) {
+        this.$emit('change-submitter', this.submitters[0])
+      }
+
+      this.save()
+    },
+    removeField (field) {
+      this.fields.splice(this.fields.indexOf(field), 1)
+
+      this.save()
+    }
+  }
+}
+</script>

app/javascript/template_builder/page.vue

@@ -22,6 +22,7 @@
         :ref="setAreaRefs"
         :area="item.area"
         :field="item.field"
+        :editable="editable"
         @start-resize="resizeDirection = $event"
         @stop-resize="resizeDirection = null"
         @start-drag="isMove = true"
@@ -77,6 +78,11 @@ export default {
       required: false,
       default: null
     },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     isDrag: {
       type: Boolean,
       required: false,
@@ -141,6 +147,10 @@ export default {
         return
       }
 
+      if (!this.editable) {
+        return
+      }
+
       this.showMask = true
 
       this.$nextTick(() => {

app/javascript/template_builder/preview.vue

@@ -12,7 +12,10 @@
         class="group flex justify-end cursor-pointer top-0 bottom-0 left-0 right-0 absolute p-1"
         @click="$emit('scroll-to', item)"
       >
-        <div class="flex justify-between w-full">
+        <div
+          v-if="editable"
+          class="flex justify-between w-full"
+        >
           <div style="width: 26px" />
           <div class="">
             <ReplaceButton
@@ -95,6 +98,11 @@ export default {
       type: Object,
       required: true
     },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     acceptFileTypes: {
       type: String,
       required: false,

app/jobs/process_submitter_completion_job.rb

@@ -10,19 +10,18 @@ class ProcessSubmitterCompletionJob < ApplicationJob
 
     Submissions::EnsureResultGenerated.call(submitter)
 
-    if submitter.account.encrypted_configs.exists?(key: EncryptedConfig::WEBHOOK_URL_KEY)
+    if is_all_completed && submitter.completed_at == submitter.submission.submitters.maximum(:completed_at)
-      SendFormCompletedWebhookRequestJob.perform_later(submitter)
+      Submissions::GenerateAuditTrail.call(submitter.submission)
+
+      enqueue_completed_emails(submitter)
     end
 
-    return unless is_all_completed
+    return if Accounts.load_webhook_configs(submitter.account).blank?
-    return if submitter.completed_at != submitter.submission.submitters.maximum(:completed_at)
 
-    Submissions::GenerateAuditTrail.call(submitter.submission)
+    SendFormCompletedWebhookRequestJob.perform_later(submitter)
-
-    enqueue_emails(submitter)
   end
 
-  def enqueue_emails(submitter)
+  def enqueue_completed_emails(submitter)
     user = submitter.submission.created_by_user || submitter.template.author
 
     if submitter.template.account.users.exists?(id: user.id)

app/models/access_token.rb

@@ -21,7 +21,7 @@
 #  fk_rails_...  (user_id => users.id)
 #
 class AccessToken < ApplicationRecord
-  TOKEN_LENGTH = 22
+  TOKEN_LENGTH = 43
 
   belongs_to :user
 

app/models/submission.rb

@@ -49,7 +49,7 @@ class Submission < ApplicationRecord
 
   scope :active, -> { where(deleted_at: nil) }
   scope :pending, -> { joins(:submitters).where(submitters: { completed_at: nil }).distinct }
-  scope :completed, -> { left_joins(:submitters).where.not(submitters: { completed_at: nil }).distinct }
+  scope :completed, -> { where.not(id: pending.select(:submission_id)) }
 
   enum :source, {
     invite: 'invite',
@@ -62,4 +62,9 @@ class Submission < ApplicationRecord
     random: 'random',
     preserved: 'preserved'
   }, scope: false, prefix: true
+
+  def audit_trail_url
+    audit_trail&.url
+  end
+  alias audit_log_url audit_trail_url
 end

app/models/template.rb

@@ -4,19 +4,20 @@
 #
 # Table name: templates
 #
-#  id         :bigint           not null, primary key
+#  id              :bigint           not null, primary key
-#  deleted_at :datetime
+#  application_key :string
-#  fields     :text             not null
+#  deleted_at      :datetime
-#  name       :string           not null
+#  fields          :text             not null
-#  schema     :text             not null
+#  name            :string           not null
-#  slug       :string           not null
+#  schema          :text             not null
-#  source     :text             not null
+#  slug            :string           not null
-#  submitters :text             not null
+#  source          :text             not null
-#  created_at :datetime         not null
+#  submitters      :text             not null
-#  updated_at :datetime         not null
+#  created_at      :datetime         not null
-#  account_id :bigint           not null
+#  updated_at      :datetime         not null
-#  author_id  :bigint           not null
+#  account_id      :bigint           not null
-#  folder_id  :bigint           not null
+#  author_id       :bigint           not null
+#  folder_id       :bigint           not null
 #
 # Indexes
 #

app/views/shared/_navbar.html.erb

@@ -3,7 +3,9 @@
     <a href="<%= root_path %>" class="text-2xl font-bold items-center flex space-x-2">
       <%= render 'shared/title' %>
     </a>
-    <%= render 'shared/github' %>
+    <span class="hidden sm:inline">
+      <%= render 'shared/github' %>
+    </span>
   </div>
   <% if signed_in? %>
     <div class="space-x-4 flex items-center">
@@ -16,13 +18,7 @@
         </span>
       <% else %>
         <div class="flex items-center justify-center space-x-4 mr-1">
-          <% if can?(:manage, EncryptedConfig) && !can?(:manage, :tenants) %>
+          <%= render 'shared/navbar_buttons' %>
-            <%= link_to Docuseal.multitenant? ? console_redirect_index_path : Docuseal::CONSOLE_URL, class: 'hidden md:inline-flex items-center font-medium text-lg', data: { prefetch: false } do %>
-              Console
-              <span class="badge badge-warning ml-1">New</span>
-            <% end %>
-            <span class="hidden md:inline-flex h-3 border-r border-base-content"></span>
-          <% end %>
           <%= link_to 'Settings', settings_profile_index_path, class: 'hidden md:inline-flex font-medium text-lg' %>
         </div>
       <% end %>
@@ -75,7 +71,8 @@
       <% if Docuseal.multitenant? && !request.path.in?([registration_path, new_registration_path]) %>
         <%= link_to registration_path, class: 'btn btn-neutral btn-sm btn-outline' do %>
           <span class="flex items-center justify-center space-x-1">
-            <span>Create free Account</span>
+            <span class="hidden sm:block">Create free Account</span>
+            <span class="md:hidden">Sign Up</span>
           </span>
         <% end %>
       <% end %>

app/views/shared/_navbar_buttons.html.erb

@@ -0,0 +1,4 @@
+<%= link_to Docuseal.multitenant? ? console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/plans") : "#{Docuseal::CONSOLE_URL}/on_premise", class: 'hidden md:inline-flex btn btn-warning btn-sm', data: { prefetch: false } do %>
+  Upgrade
+<% end %>
+<span class="hidden md:inline-flex h-3 border-r border-base-content"></span>

app/views/shared/_settings_nav.html.erb

@@ -1,7 +1,8 @@
 <div class="block w-full md:w-52 flex-none">
   <menu-active>
     <ul class="menu px-0">
-      <li class="menu-title py-0"><span>Settings</span></li>
+      <li class="menu-title py-0 !bg-transparent mb-3 -mt-5"><a href="<%= '/' %>" class="!bg-transparent !text-neutral font-medium">&larr; Back</a></li>
+      <li class="menu-title py-0 !bg-transparent"><span class="!bg-transparent">Settings</span></li>
       <li></li>
       <li>
         <%= link_to 'Profile', settings_profile_index_path, class: 'text-base hover:bg-base-300' %>
@@ -70,14 +71,14 @@
         <li>
           <%= link_to Docuseal.multitenant? ? console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/plans") : "#{Docuseal::CONSOLE_URL}/on_premise", class: 'text-base hover:bg-base-300', data: { prefetch: false } do %>
             Plans
+            <span class="badge badge-warning">New</span>
           <% end %>
         </li>
       <% end %>
       <% if !Docuseal.demo? && can?(:manage, EncryptedConfig) %>
         <li>
-          <%= link_to Docuseal.multitenant? ? console_redirect_index_path : Docuseal::CONSOLE_URL, class: 'text-base hover:bg-base-300', data: { prefetch: false } do %>
+          <%= link_to Docuseal.multitenant? ? console_redirect_index_path : "#{Docuseal::CONSOLE_URL}/on_premise", class: 'text-base hover:bg-base-300', data: { prefetch: false } do %>
             Console
-            <span class="badge badge-warning">New</span>
           <% end %>
         </li>
       <% end %>

app/views/start_form/show.html.erb

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

app/views/submit_form/completed.html.erb

@@ -39,7 +39,7 @@
     <% if @submitter.submission.template.submitters.size == 1 %>
       <div class="divider">OR</div>
       <div>
-        <%= button_to button_title(title: 'Resubmit', disabled_with: 'Resubmit', icon: svg_icon('reload', class: 'w-6 h-6')), start_form_path(@submitter.submission.template.slug), params: { submitter: { email: @submitter.email, phone: @submitter.phone }, resubmit: true }, method: :put, form: { onsubmit: 'event.submitter.disabled = true' }, class: 'white-button w-full' %>
+        <%= button_to button_title(title: 'Resubmit', disabled_with: 'Resubmit', icon: svg_icon('reload', class: 'w-6 h-6')), start_form_path(@submitter.submission.template.slug), params: { submitter: { email: @submitter.email, phone: @submitter.phone, name: @submitter.name }, resubmit: true }, method: :put, form: { onsubmit: 'event.submitter.disabled = true' }, class: 'white-button w-full' %>
       </div>
     <% end %>
   </div>

app/views/submit_form/show.html.erb

@@ -22,7 +22,7 @@
                 <%= render 'submissions/annotation', annot: %>
               <% end %>
               <% fields_index.dig(document.uuid, index)&.each do |(area, field)| %>
-                <% value = values[field['uuid']] %>
+                <% value = values[field['uuid']].presence || (field['readonly'] ? Submitters::SubmitValues.template_default_value_for_submitter(field['default_value'], @submitter.submission.submitters.find { |e| e.uuid == field['submitter_uuid'] }, with_time: false) : nil) %>
                 <% next if value.blank? %>
                 <% next if !field['readonly'] && field['submitter_uuid'] == @submitter.uuid %>
                 <%= render 'submissions/value', area:, field:, attachments_index:, value:, locale: @submitter.submission.template.account.locale %>

app/views/templates/new.html.erb

@@ -4,14 +4,14 @@
       <%= hidden_field_tag :base_template_id, @base_template.id %>
     <% end %>
     <div class="form-control mt-6">
-      <%= f.text_field :name, required: true, placeholder: 'Template Name', class: 'base-input' %>
+      <%= f.text_field :name, required: true, placeholder: 'Document Template Name', class: 'base-input' %>
     </div>
     <div class="mt-3 mb-4 flex items-center justify-between">
       <a href="#" onclick="[event.preventDefault(), window.folder_name.focus()]">
         <%= svg_icon('folder', class: 'w-6 h-6') %>
       </a>
       <folder-autocomplete class="flex justify-between w-full">
-        <input id="folder_name" type="text" class="w-64 outline-none border-transparent focus:border-transparent focus:ring-0 bg-base-100 px-1 peer" name="folder_name" value="<%= params[:folder_name].presence || @base_template&.folder&.name || TemplateFolder::DEFAULT_NAME %>" onblur="window.folder_name.value = window.folder_name.value || 'Default'" autocomplete="off">
+        <input id="folder_name" placeholder="Folder Name" type="text" class="w-64 outline-none border-transparent focus:border-transparent focus:ring-0 bg-base-100 px-1 peer" name="folder_name" value="<%= params[:folder_name].presence || @base_template&.folder&.name || TemplateFolder::DEFAULT_NAME %>" onblur="window.folder_name.value = window.folder_name.value || 'Default'" autocomplete="off">
         <a href="#" onclick="[event.preventDefault(), window.folder_name.value = '', window.folder_name.focus()]" class="link peer-focus:hidden mr-1.5">
           Change Folder
         </a>

db/migrate/20231017213639_add_application_key_to_submitters.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class AddApplicationIdToSubmitters < ActiveRecord::Migration[7.0]
+class AddApplicationKeyToSubmitters < ActiveRecord::Migration[7.0]
   def change
     add_column :submitters, :application_key, :string
   end

db/migrate/20231102171817_add_application_key_to_templates.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class AddApplicationKeyToTemplates < ActiveRecord::Migration[7.0]
+  def change
+    add_column :templates, :application_key, :string
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.0].define(version: 2023_10_17_213639) do
+ActiveRecord::Schema[7.0].define(version: 2023_11_02_171817) do
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
 
@@ -173,6 +173,7 @@ ActiveRecord::Schema[7.0].define(version: 2023_10_17_213639) do
     t.datetime "updated_at", null: false
     t.text "source", null: false
     t.bigint "folder_id", null: false
+    t.string "application_key"
     t.index ["account_id"], name: "index_templates_on_account_id"
     t.index ["author_id"], name: "index_templates_on_author_id"
     t.index ["folder_id"], name: "index_templates_on_folder_id"

lib/accounts.rb

@@ -47,9 +47,13 @@ module Accounts
   end
 
   def load_webhook_configs(account)
-    EncryptedConfig.find_by(key: EncryptedConfig::WEBHOOK_URL_KEY) unless Docuseal.multitenant?
+    configs = account.encrypted_configs.find_by(key: EncryptedConfig::WEBHOOK_URL_KEY)
 
-    account.encrypted_configs.find_by(key: EncryptedConfig::WEBHOOK_URL_KEY)
+    unless Docuseal.multitenant?
+      configs ||= Account.order(:id).first.encrypted_configs.find_by(key: EncryptedConfig::WEBHOOK_URL_KEY)
+    end
+
+    configs
   end
 
   def load_signing_pkcs(account)

lib/submissions/generate_audit_trail.rb

@@ -24,6 +24,7 @@ module Submissions
                     else
                       'Verified'
                     end
+    UNVERIFIED_TEXT = 'Unverified'
 
     module_function
 
@@ -151,10 +152,10 @@ module Submissions
             composer.document.layout.formatted_text_box(
               [
                 submitter.email && {
-                  text: "Email verification: #{click_email_event ? VERIFIED_TEXT : 'Unverififed'}\n"
+                  text: "Email verification: #{click_email_event ? VERIFIED_TEXT : UNVERIFIED_TEXT}\n"
                 },
                 submitter.phone && {
-                  text: "Phone verification: #{is_phone_verified ? VERIFIED_TEXT : 'Unverififed'}\n"
+                  text: "Phone verification: #{is_phone_verified ? VERIFIED_TEXT : UNVERIFIED_TEXT}\n"
                 },
                 completed_event.data['ip'] && { text: "IP: #{completed_event.data['ip']}\n" },
                 completed_event.data['sid'] && { text: "Session ID: #{completed_event.data['sid']}\n" },

lib/submitters/serialize_for_webhook.rb

@@ -20,6 +20,7 @@ module Submitters
                .except('uuid', 'values', 'slug')
                .merge('values' => values,
                       'documents' => documents,
+                      'audit_log_url' => submitter.submission.audit_log_url,
                       'role' => submitter_name)
     end
 

lib/submitters/submit_values.rb

@@ -4,6 +4,8 @@ module Submitters
   module SubmitValues
     ValidationError = Class.new(StandardError)
 
+    VARIABLE_REGEXP = /\{\{?(\w+)\}\}?/
+
     module_function
 
     def call(submitter, params, request)
@@ -36,6 +38,7 @@ module Submitters
         submitter.completed_at = Time.current
         submitter.ip = request.remote_ip
         submitter.ua = request.user_agent
+        submitter.values = merge_default_values(submitter)
       end
 
       ApplicationRecord.transaction do
@@ -69,6 +72,56 @@ module Submitters
       end
     end
 
+    def merge_default_values(submitter)
+      default_values = submitter.submission.template_fields.each_with_object({}) do |field, acc|
+        next if field['submitter_uuid'] != submitter.uuid
+
+        value = field['default_value']
+
+        next if value.blank?
+
+        acc[field['uuid']] = template_default_value_for_submitter(value, submitter, with_time: true)
+      end
+
+      default_values.compact_blank.merge(submitter.values)
+    end
+
+    def template_default_value_for_submitter(value, submitter, with_time: false)
+      return if value.blank?
+
+      role = submitter.submission.template_submitters.find { |e| e['uuid'] == submitter.uuid }['name']
+
+      replace_default_variables(value,
+                                submitter.attributes.merge('role' => role),
+                                submitter.submission.template,
+                                with_time:)
+    end
+
+    def replace_default_variables(value, attrs, template, with_time: false)
+      return if value.blank?
+
+      value.gsub(VARIABLE_REGEXP) do |e|
+        case key = ::Regexp.last_match(1)
+        when 'time'
+          if with_time
+            I18n.l(Time.current.in_time_zone(template.account.timezone), format: :long, locale: template.account.locale)
+          else
+            e
+          end
+        when 'date'
+          if with_time
+            I18n.l(Time.current.in_time_zone(template.account.timezone).to_date)
+          else
+            e
+          end
+        when 'role', 'email', 'phone', 'name'
+          attrs[key] || e
+        else
+          e
+        end
+      end
+    end
+
     def validate_value!(_value, _field, _params, _submitter, _request)
       true
     end