error on too small signature

.eslintrc

@@ -8,8 +8,7 @@
   },
   "rules": {
     "vue/no-deprecated-html-element-is": 0,
-    "vue/no-mutating-props": 0,
+    "vue/no-mutating-props": 0
-    "vue/no-v-html": 0
   },
   "parserOptions": {
     "ecmaVersion": 2022,

app/controllers/account_configs_controller.rb

@@ -8,7 +8,8 @@ class AccountConfigsController < ApplicationController
     AccountConfig::ALLOW_TYPED_SIGNATURE,
     AccountConfig::FORCE_MFA,
     AccountConfig::ALLOW_TO_RESUBMIT,
-    AccountConfig::ESIGNING_PREFERENCE_KEY
+    AccountConfig::ESIGNING_PREFERENCE_KEY,
+    AccountConfig::FORM_WITH_CONFETTI_KEY
   ].freeze
 
   InvalidKey = Class.new(StandardError)

app/controllers/api/api_base_controller.rb

@@ -39,8 +39,8 @@ module Api
       result = relation.order(id: :desc)
                        .limit([params.fetch(:limit, DEFAULT_LIMIT).to_i, MAX_LIMIT].min)
 
-      result = result.where(relation.arel_table[:id].lt(params[:after])) if params[:after].present?
+      result = result.where(id: ...params[:after].to_i) if params[:after].present?
-      result = result.where(relation.arel_table[:id].gt(params[:before])) if params[:before].present?
+      result = result.where(id: (params[:before].to_i + 1)...) if params[:before].present?
 
       result
     end

app/controllers/api/submitters_controller.rb

@@ -10,6 +10,7 @@ module Api
       submitters = submitters.where(external_id: params[:application_key]) if params[:application_key].present?
       submitters = submitters.where(external_id: params[:external_id]) if params[:external_id].present?
       submitters = submitters.where(submission_id: params[:submission_id]) if params[:submission_id].present?
+      submitters = maybe_filder_by_completed_at(submitters, params)
 
       submitters = paginate(
         submitters.preload(:template, :submission, :submission_events,
@@ -81,6 +82,18 @@ module Api
 
     private
 
+    def maybe_filder_by_completed_at(submitters, params)
+      if params[:completed_after].present?
+        submitters = submitters.where(completed_at: Time.zone.parse(params[:completed_after])..)
+      end
+
+      if params[:completed_before].present?
+        submitters = submitters.where(completed_at: ..Time.zone.parse(params[:completed_before]))
+      end
+
+      submitters
+    end
+
     def assign_submitter_attrs(submitter, attrs)
       submitter.email = Submissions.normalize_email(attrs[:email]) if attrs.key?(:email)
       submitter.phone = attrs[:phone].to_s.gsub(/[^0-9+]/, '') if attrs.key?(:phone)

app/controllers/api/templates_controller.rb

@@ -87,7 +87,9 @@ module Api
         :name,
         { schema: [%i[attachment_uuid name]],
           submitters: [%i[name uuid]],
-          fields: [[:uuid, :submitter_uuid, :name, :type, :required, :readonly, :default_value,
+          fields: [[:uuid, :submitter_uuid, :name, :type,
+                    :required, :readonly, :default_value,
+                    :title, :description,
                     { preferences: {},
                       conditions: [%i[field_uuid value action]],
                       options: [%i[value uuid]],

app/controllers/errors_controller.rb

@@ -22,6 +22,8 @@ class ErrorsController < ActionController::Base
 
     respond_to do |f|
       f.json do
+        set_cors_headers
+
         render json: { status: error_status_code }, status: error_status_code
       end
 
@@ -31,6 +33,14 @@ class ErrorsController < ActionController::Base
 
   private
 
+  def set_cors_headers
+    headers['Access-Control-Allow-Origin'] = '*'
+    headers['Access-Control-Allow-Methods'] = 'POST, GET, PUT, PATCH, DELETE, OPTIONS'
+    headers['Access-Control-Allow-Headers'] = '*'
+    headers['Access-Control-Max-Age'] = '1728000'
+    headers['Access-Control-Allow-Credentials'] = true
+  end
+
   def error_status_code
     @error_status_code ||=
       ActionDispatch::ExceptionWrapper.new(request.env,

app/controllers/personalization_settings_controller.rb

@@ -17,7 +17,11 @@ class PersonalizationSettingsController < ApplicationController
   end
 
   def create
-    @account_config.save!
+    if @account_config.value != false && @account_config.value.blank?
+      @account_config.destroy!
+    else
+      @account_config.save!
+    end
 
     redirect_back(fallback_location: settings_personalization_path, notice: 'Settings have been saved.')
   end
@@ -40,6 +44,8 @@ class PersonalizationSettingsController < ApplicationController
   def account_config_params
     attrs = params.require(:account_config).permit!
 
+    return attrs if attrs[:value].is_a?(String)
+
     attrs[:value]&.transform_values! do |value|
       if value.in?(%w[true false])
         value == 'true'

app/javascript/submission_form/attachment_step.vue

@@ -41,6 +41,13 @@
         :name="`values[${field.uuid}][]`"
       >
     </template>
+    <div
+      v-if="field.description && !modelValue.length"
+      dir="auto"
+      class="mb-3 px-1"
+    >
+      <MarkdownContent :string="field.description" />
+    </div>
     <FileDropzone
       :message="`${t('upload')} ${field.name || t('files')}${field.required ? '' : ` (${t('optional')})`}`"
       :submitter-slug="submitterSlug"
@@ -53,12 +60,14 @@
 
 <script>
 import FileDropzone from './dropzone'
+import MarkdownContent from './markdown_content'
 import { IconPaperclip, IconTrashX } from '@tabler/icons-vue'
 
 export default {
   name: 'AttachmentStep',
   components: {
     FileDropzone,
+    MarkdownContent,
     IconPaperclip,
     IconTrashX
   },

app/javascript/submission_form/crop_canvas.js

@@ -1,4 +1,4 @@
-function cropCanvasAndExportToPNG (canvas) {
+function cropCanvasAndExportToPNG (canvas, { errorOnTooSmall } = { errorOnTooSmall: false }) {
   const ctx = canvas.getContext('2d')
 
   const width = canvas.width
@@ -33,6 +33,10 @@ function cropCanvasAndExportToPNG (canvas) {
   croppedCanvas.height = croppedHeight
   const croppedCtx = croppedCanvas.getContext('2d')
 
+  if (errorOnTooSmall && (croppedWidth < 20 || croppedHeight < 20)) {
+    return Promise.reject(new Error('Image too small'))
+  }
+
   croppedCtx.drawImage(canvas, leftmost, topmost, croppedWidth, croppedHeight, 0, 0, croppedWidth, croppedHeight)
 
   return new Promise((resolve, reject) => {

app/javascript/submission_form/date_step.vue

@@ -1,11 +1,21 @@
 <template>
   <div dir="auto">
-    <div class="flex justify-between items-center w-full mb-2">
+    <div
+      class="flex justify-between items-center w-full"
+      :class="{ 'mb-2': !field.description }"
+    >
       <label
         :for="field.uuid"
         class="label text-2xl"
-      >{{ field.name && showFieldNames ? field.name : t('date') }}
+      >
-        <template v-if="!field.required">({{ t('optional') }})</template>
+        <MarkdownContent
+          v-if="field.title"
+          :string="field.title"
+        />
+        <template v-else>
+          {{ field.name && showFieldNames ? field.name : t('date') }}
+          <template v-if="!field.required">({{ t('optional') }})</template>
+        </template>
       </label>
       <button
         class="btn btn-outline btn-sm !normal-case font-normal"
@@ -15,6 +25,13 @@
         {{ t('set_today') }}
       </button>
     </div>
+    <div
+      v-if="field.description"
+      class="mb-3 px-1"
+      dir="auto"
+    >
+      <MarkdownContent :string="field.description" />
+    </div>
     <AppearsOn :field="field" />
     <div class="text-center">
       <input
@@ -33,11 +50,13 @@
 <script>
 import { IconCalendarCheck } from '@tabler/icons-vue'
 import AppearsOn from './appears_on'
+import MarkdownContent from './markdown_content'
 
 export default {
   name: 'DateStep',
   components: {
     IconCalendarCheck,
+    MarkdownContent,
     AppearsOn
   },
   inject: ['t'],

app/javascript/submission_form/form.vue

@@ -101,17 +101,32 @@
           />
           <div v-else-if="currentField.type === 'select'">
             <label
-              v-if="showFieldNames && currentField.name"
+              v-if="showFieldNames && (currentField.name || currentField.title)"
               :for="currentField.uuid"
               dir="auto"
-              class="label text-2xl mb-2"
+              class="label text-2xl"
-            >{{ currentField.name }}
+              :class="{ 'mb-2': !currentField.description }"
-              <template v-if="!currentField.required">({{ t('optional') }})</template>
+            >
+              <MarkdownContent
+                v-if="currentField.title"
+                :string="currentField.title"
+              />
+              <template v-else>
+                {{ currentField.name }}
+                <template v-if="!currentField.required">({{ t('optional') }})</template>
+              </template>
             </label>
             <div
               v-else
               class="py-1"
             />
+            <div
+              v-if="currentField.description"
+              dir="auto"
+              class="mb-3 px-1"
+            >
+              <MarkdownContent :string="currentField.description" />
+            </div>
             <AppearsOn :field="currentField" />
             <select
               :id="currentField.uuid"
@@ -140,13 +155,28 @@
           </div>
           <div v-else-if="currentField.type === 'radio'">
             <label
-              v-if="showFieldNames && currentField.name"
+              v-if="showFieldNames && (currentField.name || currentField.title)"
               :for="currentField.uuid"
               dir="auto"
-              class="label text-2xl mb-2"
+              class="label text-2xl"
-            >{{ currentField.name }}
+              :class="{ 'mb-2': !currentField.description }"
-              <template v-if="!currentField.required">({{ t('optional') }})</template>
+            >
+              <MarkdownContent
+                v-if="currentField.title"
+                :string="currentField.title"
+              />
+              <template v-else>
+                {{ currentField.name }}
+                <template v-if="!currentField.required">({{ t('optional') }})</template>
+              </template>
             </label>
+            <div
+              v-if="currentField.description"
+              dir="auto"
+              class="mb-3 px-1"
+            >
+              <MarkdownContent :string="currentField.description" />
+            </div>
             <div class="flex w-full max-h-44 overflow-y-auto">
               <div
                 v-if="!showFieldNames || (currentField.options.every((e) => !e.value) && currentField.options.length > 4)"
@@ -197,66 +227,77 @@
           />
           <div
             v-else-if="currentField.type === 'checkbox'"
-            class="flex w-full max-h-44 overflow-y-auto"
           >
-            <input
-              type="hidden"
-              name="cast_boolean"
-              value="true"
-            >
             <div
-              class="space-y-3.5 mx-auto"
+              v-if="currentField.description"
+              dir="auto"
+              class="mb-3 px-1"
             >
-              <template v-if="isAnonymousChecboxes || !showFieldNames">
+              <MarkdownContent :string="currentField.description" />
-                <span class="text-xl">
+            </div>
-                  {{ t('complete_hightlighted_checkboxes_and_click') }} <span class="font-semibold">{{ stepFields.length === currentStep + 1 ? t('submit') : t('next') }}</span>.
+            <div
-                </span>
+              class="flex w-full max-h-44 overflow-y-auto"
-                <input
+            >
-                  v-for="field in currentStepFields"
+              <input
-                  :key="field.uuid"
+                type="hidden"
-                  type="hidden"
+                name="cast_boolean"
-                  :name="`values[${field.uuid}]`"
+                value="true"
-                  :value="!!values[field.uuid]"
+              >
-                >
+              <div
-              </template>
+                class="space-y-3.5 mx-auto"
-              <template v-else>
+              >
-                <div
+                <template v-if="isAnonymousChecboxes || !showFieldNames">
-                  v-for="(field, index) in currentStepFields"
+                  <span class="text-xl">
-                  :key="field.uuid"
+                    {{ t('complete_hightlighted_checkboxes_and_click') }} <span class="font-semibold">{{ stepFields.length === currentStep + 1 ? t('submit') : t('next') }}</span>.
-                >
+                  </span>
-                  <label
+                  <input
-                    :for="field.uuid"
+                    v-for="field in currentStepFields"
-                    class="flex items-center space-x-3"
+                    :key="field.uuid"
+                    type="hidden"
+                    :name="`values[${field.uuid}]`"
+                    :value="!!values[field.uuid]"
                   >
-                    <input
+                </template>
-                      type="hidden"
+                <template v-else>
-                      :name="`values[${field.uuid}]`"
+                  <div
-                      :value="!!values[field.uuid]"
+                    v-for="(field, index) in currentStepFields"
+                    :key="field.uuid"
+                  >
+                    <label
+                      :for="field.uuid"
+                      class="flex items-center space-x-3"
                     >
-                    <input
+                      <input
-                      :id="field.uuid"
+                        type="hidden"
-                      type="checkbox"
+                        :name="`values[${field.uuid}]`"
-                      class="base-checkbox !h-7 !w-7"
+                        :value="!!values[field.uuid]"
-                      :oninvalid="`this.setCustomValidity('${t('please_check_the_box_to_continue')}')`"
+                      >
-                      :onchange="`this.setCustomValidity(validity.valueMissing ? '${t('please_check_the_box_to_continue')}' : '');`"
+                      <input
-                      :required="field.required"
+                        :id="field.uuid"
-                      :checked="!!values[field.uuid]"
+                        type="checkbox"
-                      @click="[scrollIntoField(field), values[field.uuid] = !values[field.uuid]]"
+                        class="base-checkbox !h-7 !w-7"
-                    >
+                        :oninvalid="`this.setCustomValidity('${t('please_check_the_box_to_continue')}')`"
-                    <span
+                        :onchange="`this.setCustomValidity(validity.valueMissing ? '${t('please_check_the_box_to_continue')}' : '');`"
-                      v-if="field.title"
+                        :required="field.required"
-                      class="text-xl"
+                        :checked="!!values[field.uuid]"
-                      v-html="field.title"
+                        @click="[scrollIntoField(field), values[field.uuid] = !values[field.uuid]]"
-                    />
+                      >
-                    <span
+                      <span
-                      v-else
+                        v-if="field.title"
-                      class="text-xl"
+                        class="text-xl"
-                    >
+                      >
-                      {{ field.name || field.type + ' ' + (index + 1) }}
+                        <MarkdownContent :string="field.title" />
-                    </span>
+                      </span>
-                  </label>
+                      <span
-                </div>
+                        v-else
-              </template>
+                        class="text-xl"
+                      >
+                        {{ field.name || field.type + ' ' + (index + 1) }}
+                      </span>
+                    </label>
+                  </div>
+                </template>
+              </div>
             </div>
           </div>
           <ImageStep
@@ -418,6 +459,7 @@ import PaymentStep from './payment_step'
 import TextStep from './text_step'
 import NumberStep from './number_step'
 import DateStep from './date_step'
+import MarkdownContent from './markdown_content'
 import FormCompleted from './completed'
 import { IconInnerShadowTop, IconArrowsDiagonal, IconWritingSign, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
 import AppearsOn from './appears_on'
@@ -459,6 +501,7 @@ export default {
     NumberStep,
     FormulaFieldAreas,
     PhoneStep,
+    MarkdownContent,
     PaymentStep,
     IconArrowsDiagonalMinimize2,
     FormCompleted
@@ -654,7 +697,7 @@ export default {
         const prevStep = acc[acc.length - 1]
 
         if (this.checkFieldConditions(f)) {
-          if (f.type === 'checkbox' && Array.isArray(prevStep) && prevStep[0].type === 'checkbox') {
+          if (f.type === 'checkbox' && Array.isArray(prevStep) && prevStep[0].type === 'checkbox' && !f.description) {
             prevStep.push(f)
           } else {
             acc.push([f])
@@ -957,7 +1000,11 @@ export default {
           this.isSubmitting = false
         })
       }).catch(error => {
-        console.log(error)
+        if (error?.message === 'Image too small') {
+          alert('Signature is too small - please redraw.')
+        } else {
+          console.log(error)
+        }
       }).finally(() => {
         this.isSubmitting = false
       })

app/javascript/submission_form/image_step.vue

@@ -24,9 +24,17 @@
       :name="`values[${field.uuid}]`"
     >
   </div>
-  <div>
+  <div
+    v-if="!modelValue"
+  >
+    <div
+      v-if="field.description"
+      dir="auto"
+      class="mb-3 px-1"
+    >
+      <MarkdownContent :string="field.description" />
+    </div>
     <FileDropzone
-      v-if="!modelValue"
       :message="`${t('upload')} ${field.name || t('image')}${field.required ? '' : ` (${t('optional')})`}`"
       :submitter-slug="submitterSlug"
       :accept="'image/*'"
@@ -39,12 +47,14 @@
 <script>
 import FileDropzone from './dropzone'
 import { IconReload } from '@tabler/icons-vue'
+import MarkdownContent from './markdown_content'
 
 export default {
   name: 'ImageStep',
   components: {
     FileDropzone,
-    IconReload
+    IconReload,
+    MarkdownContent
   },
   inject: ['t'],
   props: {

app/javascript/submission_form/initials_step.vue

@@ -1,9 +1,20 @@
 <template>
   <div dir="auto">
-    <div class="flex justify-between items-center w-full mb-2">
+    <div
+      class="flex justify-between items-center w-full"
+      :class="{ 'mb-2': !field.description }"
+    >
       <label
         class="label text-2xl"
-      >{{ showFieldNames && field.name ? field.name : t('initials') }}</label>
+      >
+        <MarkdownContent
+          v-if="field.title"
+          :string="field.title"
+        />
+        <template v-else>
+          {{ showFieldNames && field.name ? field.name : t('initials') }}
+        </template>
+      </label>
       <div class="space-x-2 flex">
         <span
           v-if="isDrawInitials"
@@ -70,6 +81,13 @@
         </a>
       </div>
     </div>
+    <div
+      v-if="field.description"
+      dir="auto"
+      class="mb-3 px-1"
+    >
+      <MarkdownContent :string="field.description" />
+    </div>
     <AppearsOn :field="field" />
     <input
       :value="modelValue || computedPreviousValue"
@@ -105,6 +123,7 @@ import { cropCanvasAndExportToPNG } from './crop_canvas'
 import { IconReload, IconTextSize, IconSignature, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
 import SignaturePad from 'signature_pad'
 import AppearsOn from './appears_on'
+import MarkdownContent from './markdown_content'
 
 const scale = 3
 
@@ -115,6 +134,7 @@ export default {
     IconReload,
     IconTextSize,
     IconSignature,
+    MarkdownContent,
     IconArrowsDiagonalMinimize2
   },
   inject: ['baseUrl', 't'],

app/javascript/submission_form/markdown_content.vue

@@ -0,0 +1,70 @@
+<template>
+  <span>
+    <template
+      v-for="(item, index) in items"
+      :key="index"
+    >
+      <a
+        v-if="item.startsWith('<a') && item.endsWith('</a>')"
+        :href="extractAttr(item, 'href')"
+        rel="noopener noreferrer nofollow"
+        :class="extractAttr(item, 'class') || 'link'"
+        target="_blank"
+      >
+        {{ extractText(item) }}
+      </a>
+      <b
+        v-else-if="item.startsWith('<b>') || item.startsWith('<strong>')"
+      >
+        {{ extractText(item) }}
+      </b>
+      <i
+        v-else-if="item.startsWith('<i>') || item.startsWith('<em>')"
+      >
+        {{ extractText(item) }}
+      </i>
+      <br
+        v-else-if="item === '<br>' || item === '\n'"
+      >
+      <template
+        v-else
+      >
+        {{ item }}
+      </template>
+    </template>
+  </span>
+</template>
+
+<script>
+import snarkdown from 'snarkdown'
+
+const htmlSplitRegexp = /(<a.+?<\/a>|<i>.+?<\/i>|<b>.+?<\/b>|<em>.+?<\/em>|<strong>.+?<\/strong>|<br>)/
+
+export default {
+  name: 'MarkdownContent',
+  props: {
+    string: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  computed: {
+    items () {
+      return snarkdown(this.string.replace(/\n/g, '<br>')).split(htmlSplitRegexp)
+    }
+  },
+  methods: {
+    extractAttr (text, attr) {
+      if (text.includes(attr)) {
+        return text.split(attr).pop().split('"')[1]
+      }
+    },
+    extractText (text) {
+      if (text) {
+        return text.match(/>(.+?)</)?.[1]
+      }
+    }
+  }
+}
+</script>

app/javascript/submission_form/multi_select_step.vue

@@ -1,10 +1,23 @@
 <template>
   <label
-    v-if="showFieldNames && field.name"
+    v-if="showFieldNames && (field.name || field.title)"
     :for="field.uuid"
     dir="auto"
-    class="label text-2xl mb-2"
+    class="label text-2xl"
-  >{{ field.name }}</label>
+    :class="{ 'mb-2': !field.description }"
+  ><MarkdownContent
+     v-if="field.title"
+     :string="field.title"
+   />
+    <template v-else>{{ field.name }}</template>
+  </label>
+  <div
+    v-if="field.description"
+    dir="auto"
+    class="mb-3 px-1"
+  >
+    <MarkdownContent :string="field.description" />
+  </div>
   <div class="flex w-full max-h-44 overflow-y-auto">
     <input
       v-if="modelValue.length === 0"
@@ -53,8 +66,13 @@
 </template>
 
 <script>
+import MarkdownContent from './markdown_content'
+
 export default {
   name: 'MultiSelectStep',
+  components: {
+    MarkdownContent
+  },
   inject: ['t', 'scrollIntoField'],
   props: {
     field: {

app/javascript/submission_form/number_step.vue

@@ -1,11 +1,14 @@
 <template>
   <label
-    v-if="showFieldNames && field.name"
+    v-if="showFieldNames && (field.name || field.title)"
     :for="field.uuid"
     dir="auto"
     class="label text-2xl"
     :class="{ 'mb-2': !field.description }"
-  ><template v-if="field.title"><span v-html="field.title" /></template>
+  ><MarkdownContent
+     v-if="field.title"
+     :string="field.title"
+   />
     <template v-else>{{ field.name }}</template>
     <template v-if="!field.required">({{ t('optional') }})</template>
   </label>
@@ -15,9 +18,11 @@
   />
   <div
     v-if="field.description"
-    class="mb-3 px-1 text-lg"
+    dir="auto"
-    v-html="field.description"
+    class="mb-3 px-1"
-  />
+  >
+    <MarkdownContent :string="field.description" />
+  </div>
   <AppearsOn :field="field" />
   <div class="items-center flex">
     <input
@@ -41,11 +46,13 @@
 
 <script>
 import AppearsOn from './appears_on'
+import MarkdownContent from './markdown_content'
 
 export default {
   name: 'TextStep',
   components: {
-    AppearsOn
+    AppearsOn,
+    MarkdownContent
   },
   inject: ['t'],
   props: {

app/javascript/submission_form/phone_step.vue

@@ -2,10 +2,25 @@
   <div>
     <label
       :for="isCodeSent ? 'one_time_code' : field.uuid"
-      class="label text-2xl mb-2"
+      class="label text-2xl"
-    >{{ showFieldNames && field.name ? field.name : t('verified_phone_number') }}
+      :class="{ 'mb-2': !field.description }"
-      <template v-if="!field.required">({{ t('optional') }})</template>
+    >
+      <MarkdownContent
+        v-if="field.title"
+        :string="field.title"
+      />
+      <template v-else>
+        {{ showFieldNames && field.name ? field.name : t('verified_phone_number') }}
+        <template v-if="!field.required">({{ t('optional') }})</template>
+      </template>
     </label>
+    <div
+      v-if="field.description"
+      dir="auto"
+      class="mb-3 px-1"
+    >
+      <MarkdownContent :string="field.description" />
+    </div>
     <div>
       <input
         type="hidden"
@@ -68,6 +83,8 @@
 </template>
 
 <script>
+import MarkdownContent from './markdown_content'
+
 function throttle (func, delay) {
   let lastCallTime = 0
 
@@ -83,6 +100,9 @@ function throttle (func, delay) {
 
 export default {
   name: 'PhoneStep',
+  components: {
+    MarkdownContent
+  },
   inject: ['t', 'baseUrl'],
   props: {
     field: {

app/javascript/submission_form/signature_step.vue

@@ -1,9 +1,20 @@
 <template>
   <div dir="auto">
-    <div class="flex justify-between items-center w-full mb-2">
+    <div
+      class="flex justify-between items-center w-full"
+      :class="{ 'mb-2': !field.description }"
+    >
       <label
         class="label text-2xl"
-      >{{ showFieldNames && field.name ? field.name : t('signature') }}</label>
+      >
+        <MarkdownContent
+          v-if="field.title"
+          :string="field.title"
+        />
+        <template v-else>
+          {{ showFieldNames && field.name ? field.name : t('signature') }}
+        </template>
+      </label>
       <div class="space-x-2 flex">
         <span
           v-if="isTextSignature && field.preferences?.format !== 'typed'"
@@ -30,7 +41,7 @@
           <a
             id="type_text_button"
             href="#"
-            class="btn btn-outline btn-sm font-medium"
+            class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap"
             @click.prevent="toggleTextInput"
           >
             <IconTextSize :width="16" />
@@ -45,7 +56,7 @@
           :data-tip="t('take_photo')"
         >
           <label
-            class="btn btn-outline btn-sm font-medium"
+            class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap"
           >
             <IconCamera :width="16" />
             <input
@@ -91,6 +102,13 @@
         </a>
       </div>
     </div>
+    <div
+      v-if="field.description"
+      dir="auto"
+      class="mb-3 px-1"
+    >
+      <MarkdownContent :string="field.description" />
+    </div>
     <AppearsOn :field="field" />
     <input
       :value="modelValue || computedPreviousValue"
@@ -126,6 +144,7 @@ import { IconReload, IconCamera, IconSignature, IconTextSize, IconArrowsDiagonal
 import { cropCanvasAndExportToPNG } from './crop_canvas'
 import SignaturePad from 'signature_pad'
 import AppearsOn from './appears_on'
+import MarkdownContent from './markdown_content'
 
 let isFontLoaded = false
 
@@ -137,6 +156,7 @@ export default {
     AppearsOn,
     IconReload,
     IconCamera,
+    MarkdownContent,
     IconTextSize,
     IconSignature,
     IconArrowsDiagonalMinimize2
@@ -366,8 +386,8 @@ export default {
         return Promise.resolve({})
       }
 
-      return new Promise((resolve) => {
+      return new Promise((resolve, reject) => {
-        cropCanvasAndExportToPNG(this.$refs.canvas).then(async (blob) => {
+        cropCanvasAndExportToPNG(this.$refs.canvas, { errorOnTooSmall: true }).then(async (blob) => {
           const file = new File([blob], 'signature.png', { type: 'image/png' })
 
           if (this.isDirectUpload) {
@@ -409,6 +429,8 @@ export default {
               return resolve(attachment)
             })
           }
+        }).catch((error) => {
+          return reject(error)
         })
       })
     }

app/javascript/submission_form/text_step.vue

@@ -1,11 +1,14 @@
 <template>
   <label
-    v-if="showFieldNames && field.name"
+    v-if="showFieldNames && (field.name || field.title)"
     :for="field.uuid"
     dir="auto"
     class="label text-2xl"
     :class="{ 'mb-2': !field.description }"
-  ><template v-if="field.title"><span v-html="field.title" /></template>
+  ><MarkdownContent
+     v-if="field.title"
+     :string="field.title"
+   />
     <template v-else>{{ field.name }}</template>
     <template v-if="!field.required">({{ t('optional') }})</template>
   </label>
@@ -15,9 +18,11 @@
   />
   <div
     v-if="field.description"
-    class="mb-3 px-1 text-lg"
+    dir="auto"
-    v-html="field.description"
+    class="mb-3 px-1"
-  />
+  >
+    <MarkdownContent :string="field.description" />
+  </div>
   <AppearsOn :field="field" />
   <div class="items-center flex">
     <input
@@ -69,11 +74,13 @@
 <script>
 import { IconAlignBoxLeftTop } from '@tabler/icons-vue'
 import AppearsOn from './appears_on'
+import MarkdownContent from './markdown_content'
 
 export default {
   name: 'TextStep',
   components: {
     IconAlignBoxLeftTop,
+    MarkdownContent,
     AppearsOn
   },
   inject: ['t'],

app/javascript/template_builder/area.vue

@@ -343,7 +343,7 @@ export default {
     },
     onResizeCell (e) {
       if (e.target.id === 'mask') {
-        const positionX = e.layerX / (e.target.clientWidth - 1)
+        const positionX = e.offsetX / (e.target.clientWidth - 1)
 
         if (positionX > this.area.x) {
           this.area.cell_w = positionX - this.area.x
@@ -389,16 +389,16 @@ export default {
     },
     resize (e) {
       if (e.target.id === 'mask') {
-        this.area.w = e.layerX / e.target.clientWidth - this.area.x
+        this.area.w = e.offsetX / e.target.clientWidth - this.area.x
-        this.area.h = e.layerY / e.target.clientHeight - this.area.y
+        this.area.h = e.offsetY / e.target.clientHeight - this.area.y
       }
     },
     drag (e) {
       if (e.target.id === 'mask') {
         this.isDragged = true
 
-        this.area.x = (e.layerX - this.dragFrom.x) / e.target.clientWidth
+        this.area.x = (e.offsetX - this.dragFrom.x) / e.target.clientWidth
-        this.area.y = (e.layerY - this.dragFrom.y) / e.target.clientHeight
+        this.area.y = (e.offsetY - this.dragFrom.y) / e.target.clientHeight
       }
     },
     startDrag (e) {

app/javascript/template_builder/builder.vue

@@ -94,11 +94,13 @@
       </div>
     </div>
     <div
+      id="main_container"
       class="flex"
       :class="$slots.buttons || withTitle ? 'md:max-h-[calc(100%_-_60px)]' : 'md:max-h-[100%]'"
     >
       <div
         v-if="withDocumentsList"
+        id="documents_container"
         ref="previews"
         :style="{ 'display': isBreakpointLg ? 'none' : 'initial' }"
         class="overflow-y-auto overflow-x-hidden w-52 flex-none pr-3 mt-0.5 pt-0.5 hidden lg:block"
@@ -134,7 +136,10 @@
           />
         </div>
       </div>
-      <div class="w-full overflow-y-hidden md:overflow-y-auto overflow-x-hidden mt-0.5 pt-0.5">
+      <div
+        id="pages_container"
+        class="w-full overflow-y-hidden md:overflow-y-auto overflow-x-hidden mt-0.5 pt-0.5"
+      >
         <div
           ref="documents"
           class="pr-3.5 pl-0.5"
@@ -200,6 +205,7 @@
       </div>
       <div
         v-if="withFieldsList"
+        id="fields_list_container"
         class="relative w-80 flex-none mt-1 pr-4 pl-0.5 hidden md:block"
         :class="drawField ? 'overflow-hidden' : 'overflow-y-auto overflow-x-hidden'"
       >
@@ -523,7 +529,7 @@ export default {
       submitter.name = name
 
       if (existingSubmittersUuids.filter(Boolean).length) {
-        submitter.uuid = existingSubmittersUuids[index] || v4()
+        submitter.uuid = existingSubmittersUuids[index] || submitter.uuid || v4()
       } else {
         submitter.uuid ||= v4()
       }

app/javascript/template_builder/description_modal.vue

@@ -0,0 +1,107 @@
+<template>
+  <div
+    class="modal modal-open items-start !animate-none overflow-y-auto"
+  >
+    <div
+      class="absolute top-0 bottom-0 right-0 left-0"
+      @click.prevent="$emit('close')"
+    />
+    <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
+      <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
+        <span>
+          {{ field.name || buildDefaultName(field, template.fields) }}
+        </span>
+        <a
+          href="#"
+          class="text-xl"
+          @click.prevent="$emit('close')"
+        >&times;</a>
+      </div>
+      <div>
+        <form @submit.prevent="saveAndClose">
+          <div class="space-y-1 mb-1">
+            <div>
+              <label
+                dir="auto"
+                class="label text-sm"
+                for="description_field"
+              >
+                {{ t('description') }}
+              </label>
+              <textarea
+                id="description_field"
+                ref="textarea"
+                v-model="description"
+                dir="auto"
+                class="base-textarea !text-base w-full"
+                @input="resizeTextarea"
+              />
+            </div>
+            <div>
+              <label
+                dir="auto"
+                class="label text-sm"
+                for="title_field"
+              >
+                {{ t('display_title') }} ({{ t('optional') }})
+              </label>
+              <input
+                id="title_field"
+                v-model="title"
+                dir="auto"
+                class="base-input !text-base w-full"
+              >
+            </div>
+          </div>
+          <button
+            class="base-button w-full mt-4"
+          >
+            {{ t('save') }}
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DescriptionModal',
+  inject: ['t', 'save', 'template'],
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    buildDefaultName: {
+      type: Function,
+      required: true
+    }
+  },
+  emits: ['close'],
+  data () {
+    return {
+      description: this.field.description,
+      title: this.field.title
+    }
+  },
+  mounted () {
+    this.resizeTextarea()
+  },
+  methods: {
+    saveAndClose () {
+      this.field.description = this.description
+      this.field.title = this.title
+
+      this.save()
+      this.$emit('close')
+    },
+    resizeTextarea () {
+      const textarea = this.$refs.textarea
+
+      textarea.style.height = 'auto'
+      textarea.style.height = textarea.scrollHeight + 'px'
+    }
+  }
+}
+</script>

app/javascript/template_builder/field.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="group pb-2"
+    class="list-field group mb-2"
   >
     <div
       class="border border-base-300 rounded rounded-tr-none relative group"
@@ -258,6 +258,19 @@
                 </label>
               </li>
               <hr class="pb-0.5 mt-0.5">
+              <li>
+                <label
+                  class="label-text cursor-pointer text-center w-full flex items-center"
+                  @click="isShowDescriptionModal = !isShowDescriptionModal"
+                >
+                  <IconInfoCircle
+                    width="18"
+                  />
+                  <span class="text-sm">
+                    {{ t('description') }}
+                  </span>
+                </label>
+              </li>
               <li>
                 <label
                   class="label-text cursor-pointer text-center w-full flex items-center"
@@ -286,7 +299,7 @@
               </li>
               <hr class="pb-0.5 mt-0.5">
               <li
-                v-for="(area, index) in field.areas || []"
+                v-for="(area, index) in sortedAreas"
                 :key="index"
               >
                 <a
@@ -435,6 +448,16 @@
         @close="isShowConditionsModal = false"
       />
     </Teleport>
+    <Teleport
+      v-if="isShowDescriptionModal"
+      :to="modalContainerEl"
+    >
+      <DescriptionModal
+        :field="field"
+        :build-default-name="buildDefaultName"
+        @close="isShowDescriptionModal = false"
+      />
+    </Teleport>
   </div>
 </template>
 
@@ -444,7 +467,8 @@ import FieldType from './field_type'
 import PaymentSettings from './payment_settings'
 import FormulaModal from './formula_modal'
 import ConditionsModal from './conditions_modal'
-import { IconRouteAltLeft, IconMathFunction, IconShape, IconNewSection, IconTrashX, IconCopy, IconSettings } from '@tabler/icons-vue'
+import DescriptionModal from './description_modal'
+import { IconInfoCircle, IconRouteAltLeft, IconMathFunction, IconShape, IconNewSection, IconTrashX, IconCopy, IconSettings } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 
 export default {
@@ -455,7 +479,9 @@ export default {
     IconShape,
     PaymentSettings,
     IconNewSection,
+    IconInfoCircle,
     FormulaModal,
+    DescriptionModal,
     ConditionsModal,
     IconRouteAltLeft,
     IconTrashX,
@@ -487,11 +513,24 @@ export default {
       showPaymentModal: false,
       isShowFormulaModal: false,
       isShowConditionsModal: false,
+      isShowDescriptionModal: false,
       renderDropdown: false
     }
   },
   computed: {
     fieldNames: FieldType.computed.fieldNames,
+    schemaAttachmentsIndexes () {
+      return (this.template.schema || []).reduce((acc, item, index) => {
+        acc[item.attachment_uuid] = index
+
+        return acc
+      }, {})
+    },
+    sortedAreas () {
+      return (this.field.areas || []).sort((a, b) => {
+        return this.schemaAttachmentsIndexes[a.attachment_uuid] - this.schemaAttachmentsIndexes[b.attachment_uuid]
+      })
+    },
     modalContainerEl () {
       return this.$el.getRootNode().querySelector('#docuseal_modal_container')
     },
@@ -607,7 +646,7 @@ export default {
       }
     },
     scrollToFirstArea () {
-      return this.field.areas?.[0] && this.$emit('scroll-to', this.field.areas[0])
+      return this.sortedAreas[0] && this.$emit('scroll-to', this.sortedAreas[0])
     },
     closeDropdown () {
       document.activeElement.blur()

app/javascript/template_builder/fields.vue

@@ -2,7 +2,7 @@
   <div :class="withStickySubmitters ? 'sticky top-0 z-10' : ''">
     <FieldSubmitter
       :model-value="selectedSubmitter.uuid"
-      class="w-full rounded-lg"
+      class="roles-dropdown w-full rounded-lg"
       :class="{ 'bg-base-100': withStickySubmitters }"
       :submitters="submitters"
       :editable="editable && !defaultSubmitters.length"
@@ -14,7 +14,7 @@
   </div>
   <div
     ref="fields"
-    class="mb-1 mt-2"
+    class="fields mb-1 mt-2"
     @dragover.prevent="onFieldDragover"
     @drop="reorderFields"
   >
@@ -43,7 +43,7 @@
       <div
         :style="{ backgroundColor: backgroundColor }"
         draggable="true"
-        class="border border-base-300 rounded rounded-tr-none relative group mb-2"
+        class="default-field border border-base-300 rounded rounded-tr-none relative group mb-2"
         @dragstart="onDragstart({ type: 'text', ...field })"
         @dragend="$emit('drag-end')"
       >
@@ -74,7 +74,7 @@
       <button
         v-if="(fieldTypes.length === 0 || fieldTypes.includes(type)) && (withPhone || type != 'phone') && (withPayment || type != 'payment')"
         draggable="true"
-        class="group flex items-center justify-center border border-dashed border-base-300 hover:border-base-content/20 w-full rounded relative"
+        class="field-type-button group flex items-center justify-center border border-dashed border-base-300 hover:border-base-content/20 w-full rounded relative"
         :style="{ backgroundColor: backgroundColor }"
         @dragstart="onDragstart({ type: type })"
         @dragend="$emit('drag-end')"

app/javascript/template_builder/i18n.js

@@ -1,4 +1,6 @@
 const en = {
+  description: 'Description',
+  display_title: 'Display title',
   unchecked: 'Unchecked',
   equal: 'Equal',
   not_equal: 'Not equal',

app/javascript/template_builder/page.vue

@@ -162,8 +162,8 @@ export default {
     },
     onDrop (e) {
       this.$emit('drop-field', {
-        x: e.layerX,
+        x: e.offsetX,
-        y: e.layerY,
+        y: e.offsetY,
         maskW: this.$refs.mask.clientWidth,
         maskH: this.$refs.mask.clientHeight,
         page: this.number
@@ -186,10 +186,10 @@ export default {
 
       this.$nextTick(() => {
         this.newArea = {
-          initialX: e.layerX / this.$refs.mask.clientWidth,
+          initialX: e.offsetX / this.$refs.mask.clientWidth,
-          initialY: e.layerY / this.$refs.mask.clientHeight,
+          initialY: e.offsetY / this.$refs.mask.clientHeight,
-          x: e.layerX / this.$refs.mask.clientWidth,
+          x: e.offsetX / this.$refs.mask.clientWidth,
-          y: e.layerY / this.$refs.mask.clientHeight,
+          y: e.offsetY / this.$refs.mask.clientHeight,
           w: 0,
           h: 0
         }
@@ -197,19 +197,19 @@ export default {
     },
     onPointermove (e) {
       if (this.newArea) {
-        const dx = e.layerX / this.$refs.mask.clientWidth - this.newArea.initialX
+        const dx = e.offsetX / this.$refs.mask.clientWidth - this.newArea.initialX
-        const dy = e.layerY / this.$refs.mask.clientHeight - this.newArea.initialY
+        const dy = e.offsetY / this.$refs.mask.clientHeight - this.newArea.initialY
 
         if (dx > 0) {
           this.newArea.x = this.newArea.initialX
         } else {
-          this.newArea.x = e.layerX / this.$refs.mask.clientWidth
+          this.newArea.x = e.offsetX / this.$refs.mask.clientWidth
         }
 
         if (dy > 0) {
           this.newArea.y = this.newArea.initialY
         } else {
-          this.newArea.y = e.layerY / this.$refs.mask.clientHeight
+          this.newArea.y = e.offsetY / this.$refs.mask.clientHeight
         }
 
         if (this.drawField?.type === 'cells') {

app/views/personalization_settings/_form_customization_settings.html.erb

@@ -0,0 +1 @@
+<%= render 'form_toggle_options' %>

app/views/personalization_settings/_form_toggle_options.html.erb

@@ -0,0 +1,14 @@
+<% account_config = AccountConfig.where(account: current_account, key: AccountConfig::FORM_WITH_CONFETTI_KEY).first_or_initialize(value: true) %>
+<% if can?(:manage, account_config) %>
+  <div class="px-1 mt-2">
+    <%= form_for account_config, url: account_configs_path, method: :post do |f| %>
+      <%= f.hidden_field :key %>
+      <div class="flex items-center justify-between py-2.5">
+        <span>
+          Show confetti on successful completion
+        </span>
+        <%= f.check_box :value, { class: 'toggle', checked: account_config.value != false, onchange: 'this.form.requestSubmit()' }, '1', '0' %>
+      </div>
+    <% end %>
+  </div>
+<% end %>

app/views/personalization_settings/show.html.erb

@@ -9,8 +9,9 @@
     </div>
     <p class="text-4xl font-bold mb-4 mt-8">Company Logo</p>
     <%= render 'logo_form' %>
-    <p class="text-4xl font-bold mb-4 mt-8">Submitter Form</p>
+    <p class="text-4xl font-bold mb-4 mt-8">Submission Form</p>
     <%= render 'form_completed_button_form' %>
+    <%= render 'form_customization_settings' %>
   </div>
   <div class="w-0 md:w-52"></div>
 </div>

app/views/profile/index.html.erb

@@ -31,40 +31,42 @@
       </div>
     <% end %>
     <a href="<%= edit_user_signature_path %>" data-turbo-frame="modal" class="base-button w-full">Update Signature</a>
-    <p class="text-2xl font-bold mt-8 mb-4">Change Password</p>
+    <% if true_user == current_user && !current_account.testing? %>
-    <%= form_for current_user, url: update_password_settings_profile_index_path, method: :patch, html: { autocomplete: 'off', class: 'space-y-4' } do |f| %>
+      <p class="text-2xl font-bold mt-8 mb-4">Change Password</p>
-      <div class="form-control">
+      <%= form_for current_user, url: update_password_settings_profile_index_path, method: :patch, html: { autocomplete: 'off', class: 'space-y-4' } do |f| %>
-        <%= f.label :password, 'New password', class: 'label' %>
+        <div class="form-control">
-        <%= f.password_field :password, autocomplete: 'off', class: 'base-input' %>
+          <%= f.label :password, 'New password', class: 'label' %>
-      </div>
+          <%= f.password_field :password, autocomplete: 'off', class: 'base-input' %>
-      <div class="form-control">
+        </div>
-        <%= f.label :password_confirmation, 'Confirm new password', class: 'label' %>
+        <div class="form-control">
-        <%= f.password_field :password_confirmation, autocomplete: 'off', class: 'base-input' %>
+          <%= f.label :password_confirmation, 'Confirm new password', class: 'label' %>
-      </div>
+          <%= f.password_field :password_confirmation, autocomplete: 'off', class: 'base-input' %>
-      <div class="form-control pt-2">
+        </div>
-        <%= f.button button_title(title: 'Update', disabled_with: 'Updating'), class: 'base-button' %>
+        <div class="form-control pt-2">
+          <%= f.button button_title(title: 'Update', disabled_with: 'Updating'), class: 'base-button' %>
+        </div>
+      <% end %>
+      <p class="text-2xl font-bold mt-8 mb-4">Two-Factor Authentication</p>
+      <div class="space-y-4">
+        <% if current_user.otp_required_for_login %>
+          <p class="flex items-center space-x-1">
+            <%= svg_icon('circle_check', class: 'stroke-success inline flex-none w-5 h-5') %>
+            <span>
+              2FA has been configured.
+            </span>
+          </p>
+          <a href="<%= edit_mfa_setup_path %>" data-turbo-frame="modal" class="white-button w-full !px-8">🔓 Remove 2FA</a>
+        <% else %>
+          <p class="flex items-center space-x-1">
+            <%= svg_icon('info_circle', class: 'stroke-warning inline flex-none w-5 h-5') %>
+            <span>
+              2FA is not configured.
+            </span>
+          </p>
+          <a href="<%= new_mfa_setup_path %>" data-turbo-frame="modal" class="base-button w-full !px-8">🔒 Set up 2FA</a>
+        <% end %>
       </div>
     <% end %>
-    <p class="text-2xl font-bold mt-8 mb-4">Two-Factor Authentication</p>
-    <div class="space-y-4">
-      <% if current_user.otp_required_for_login %>
-        <p class="flex items-center space-x-1">
-          <%= svg_icon('circle_check', class: 'stroke-success inline flex-none w-5 h-5') %>
-          <span>
-            2FA has been configured.
-          </span>
-        </p>
-        <a href="<%= edit_mfa_setup_path %>" data-turbo-frame="modal" class="white-button w-full !px-8">🔓 Remove 2FA</a>
-      <% else %>
-        <p class="flex items-center space-x-1">
-          <%= svg_icon('info_circle', class: 'stroke-warning inline flex-none w-5 h-5') %>
-          <span>
-            2FA is not configured.
-          </span>
-        </p>
-        <a href="<%= new_mfa_setup_path %>" data-turbo-frame="modal" class="base-button w-full !px-8">🔒 Set up 2FA</a>
-      <% end %>
-    </div>
   </div>
   <div class="w-0 md:w-52"></div>
 </div>

app/views/shared/_settings_nav.html.erb

@@ -67,7 +67,7 @@
         </li>
       <% end %>
       <%= render 'shared/settings_nav_extra' %>
-      <% if !Docuseal.demo? && can?(:manage, EncryptedConfig) %>
+      <% if !Docuseal.demo? && can?(:manage, EncryptedConfig) && (current_user != true_user || !current_account.testing?) %>
         <li>
           <%= link_to Docuseal.multitenant? ? console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/plans") : "#{Docuseal::CLOUD_URL}/sign_up?#{{ redir: "#{Docuseal::CONSOLE_URL}/on_premise" }.to_query}", class: 'text-base hover:bg-base-300', data: { prefetch: false } do %>
             Plans
@@ -75,7 +75,7 @@
           <% end %>
         </li>
       <% end %>
-      <% if !Docuseal.demo? && can?(:manage, EncryptedConfig) %>
+      <% if !Docuseal.demo? && can?(:manage, EncryptedConfig) && (current_user != true_user || !current_account.testing?) %>
         <li>
           <%= link_to Docuseal.multitenant? ? console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/api") : "#{Docuseal::CONSOLE_URL}/on_premise", class: 'text-base hover:bg-base-300', data: { prefetch: false } do %>
             <% if Docuseal.multitenant? %> API <% else %> Console <% end %>

app/views/submitter_mailer/_custom_content.html.erb

@@ -0,0 +1 @@
+<%= auto_link(simple_format(h(local_assigns[:content]))) %>

app/views/submitter_mailer/completed_email.html.erb

@@ -1,5 +1,5 @@
 <% if @email_config %>
-  <%= auto_link(simple_format(h(ReplaceEmailVariables.call(@email_config.value['body'], submitter: @submitter)))) %>
+  <%= render 'custom_content', content: ReplaceEmailVariables.call(@email_config.value['body'], submitter: @submitter) %>
 <% else %>
   <p>Hi there,</p>
   <p>"<%= @submitter.submission.template.name %>" form has been completed by <%= @submitter.submission.submitters.order(:completed_at).map { |e| e.name || e.email || e.phone }.join(', ') %>.</p>

app/views/submitter_mailer/documents_copy_email.html.erb

@@ -1,5 +1,5 @@
 <% if @email_config %>
-  <%= auto_link(simple_format(h(ReplaceEmailVariables.call(@email_config.value['body'], submitter: @submitter, sig: @sig)))) %>
+  <%= render 'custom_content', content: ReplaceEmailVariables.call(@email_config.value['body'], submitter: @submitter, sig: @sig) %>
 <% else %>
   <p>Hi there,</p>
   <p>Please check the copy of your "<%= @submitter.submission.template.name %>" submission in the email attachments.</p>

app/views/submitter_mailer/invitation_email.html.erb

@@ -1,6 +1,6 @@
 <% if @email_config || @body.present? %>
   <% body = (@body.presence || @email_config.value['body']).to_s %>
-  <%= auto_link(simple_format(h(ReplaceEmailVariables.call(body, submitter: @submitter)))) %>
+  <%= render 'custom_content', content: ReplaceEmailVariables.call(body, submitter: @submitter) %>
   <% if !body.include?(ReplaceEmailVariables::SUBMITTER_LINK) && !body.include?(ReplaceEmailVariables::SUBMITTER_ID) && !body.include?(ReplaceEmailVariables::SUBMISSION_LINK) && !body.include?(ReplaceEmailVariables::TEMPLATE_ID) && !@submitter.submission.source.in?(%w[api embed]) %>
     <p><%= link_to nil, submit_form_url(slug: @submitter.slug, t: SubmissionEvents.build_tracking_param(@submitter, 'click_email')) %></p>
   <% end %>

config/initializers/active_storage.rb

@@ -69,7 +69,7 @@ Rails.configuration.to_prepare do
 
   LoadActiveStorageConfigs.call
 rescue StandardError => e
-  Rails.logger.error(e)
+  Rails.logger.error(e) unless Rails.env.production?
 
   nil
 end

lib/replace_email_variables.rb

@@ -5,6 +5,8 @@ module ReplaceEmailVariables
   TEMPLATE_ID = '{{template.id}}'
   SUBMITTER_LINK = '{{submitter.link}}'
   ACCOUNT_NAME = '{{account.name}}'
+  SENDER_NAME = '{{sender.name}}'
+  SENDER_EMAIL = '{{sender.email}}'
   SUBMITTER_EMAIL = '{{submitter.email}}'
   SUBMITTER_NAME = '{{submitter.name}}'
   SUBMITTER_ID = '{{submitter.id}}'
@@ -19,28 +21,24 @@ module ReplaceEmailVariables
 
   # rubocop:disable Metrics
   def call(text, submitter:, tracking_event_type: 'click_email', sig: nil)
-    submitter_link = build_submitter_link(submitter, tracking_event_type)
+    text = text.gsub(TEMPLATE_NAME) { submitter.template.name }
-
+    text = text.gsub(TEMPLATE_ID) { submitter.template.id }
-    submission_link = build_submission_link(submitter.submission) if submitter.submission
+    text = text.gsub(SUBMITTER_ID) { submitter.id }
-
+    text = text.gsub(SUBMITTER_SLUG) { submitter.slug }
-    text = text.gsub(TEMPLATE_NAME, submitter.template.name) if submitter.template
+    text = text.gsub(SUBMISSION_ID) { submitter.submission.id }
-    text = text.gsub(TEMPLATE_ID, submitter.template.id.to_s) if submitter.template
+    text = text.gsub(SUBMITTER_EMAIL) { submitter.email }
-    text = text.gsub(SUBMITTER_ID, submitter.id.to_s)
+    text = text.gsub(SUBMITTER_NAME) { submitter.name || submitter.email || submitter.phone }
-    text = text.gsub(SUBMITTER_SLUG, submitter.slug.to_s)
+    text = text.gsub(SUBMITTER_LINK) { build_submitter_link(submitter, tracking_event_type) }
-    text = text.gsub(SUBMISSION_ID, submitter.submission.id.to_s) if submitter.submission
+    text = text.gsub(SUBMISSION_LINK) do
-    text = text.gsub(SUBMITTER_EMAIL, submitter.email) if submitter.email
+      submitter.submission ? build_submission_link(submitter.submission) : ''
-    text = text.gsub(SUBMITTER_NAME, submitter.name || submitter.email || submitter.phone)
-    text = text.gsub(SUBMITTER_LINK, submitter_link)
-    text = text.gsub(SUBMISSION_LINK, submission_link) if submission_link
-    if text.include?(SUBMISSION_SUBMITTERS)
-      text = text.gsub(SUBMISSION_SUBMITTERS, build_submission_submitters(submitter.submission))
     end
-    text = text.gsub(DOCUMENTS_LINKS, build_documents_links_text(submitter, sig))
+    text = text.gsub(SUBMISSION_SUBMITTERS) { build_submission_submitters(submitter.submission) }
-    text = text.gsub(DOCUMENTS_LINK, build_documents_links_text(submitter, sig))
+    text = text.gsub(DOCUMENTS_LINKS) { build_documents_links_text(submitter, sig) }
+    text = text.gsub(DOCUMENTS_LINK) { build_documents_links_text(submitter, sig) }
+    text = text.gsub(ACCOUNT_NAME) { submitter.account.name }
+    text = text.gsub(SENDER_NAME) { submitter.submission.created_by_user&.full_name }
 
-    text = text.gsub(ACCOUNT_NAME, submitter.account.name) if submitter.account
+    text.gsub(SENDER_EMAIL) { submitter.submission.created_by_user&.email.to_s.sub(/\+\w+@/, '@') }
-
-    text
   end
   # rubocop:enable Metrics
 

lib/submissions/ensure_result_generated.rb

@@ -33,7 +33,10 @@ module Submissions
       sleep WAIT_FOR_RETRY
 
       retry
-    rescue StandardError
+    rescue StandardError => e
+      Rollbar.error(e) if defined?(Rollbar)
+      Rails.logger.error(e)
+
       submitter.document_generation_events.create!(event_name: :fail)
 
       raise

lib/submissions/generate_audit_trail.rb

@@ -90,7 +90,10 @@ module Submissions
       last_submitter = submission.submitters.where.not(completed_at: nil).order(:completed_at).last
 
       documents_data = Submitters.select_attachments_for_download(last_submitter).map do |document|
-        original_documents = submission.template.documents.select { |e| e.uuid == document.uuid }.presence
+        original_documents = submission.template.documents.select do |e|
+          e.uuid == (document.metadata['original_uuid'] || document.uuid)
+        end.presence
+
         original_documents ||= submission.template.documents.select do |e|
           e.image? && submission.template_schema.any? do |item|
             item['attachment_uuid'] == e.uuid

lib/submitters/form_configs.rb

@@ -2,20 +2,27 @@
 
 module Submitters
   module FormConfigs
+    DEFAULT_KEYS = [AccountConfig::FORM_COMPLETED_BUTTON_KEY,
+                    AccountConfig::FORM_WITH_CONFETTI_KEY,
+                    AccountConfig::ALLOW_TYPED_SIGNATURE].freeze
+
     module_function
 
-    def call(submitter)
+    def call(submitter, keys = [])
       configs = submitter.submission.template.account.account_configs
-                         .where(key: [AccountConfig::FORM_COMPLETED_BUTTON_KEY,
+                         .where(key: DEFAULT_KEYS + keys)
-                                      AccountConfig::FORM_WITH_CONFETTI_KEY,
-                                      AccountConfig::ALLOW_TYPED_SIGNATURE])
 
       completed_button = configs.find { |e| e.key == AccountConfig::FORM_COMPLETED_BUTTON_KEY }&.value || {}
-
       with_typed_signature = configs.find { |e| e.key == AccountConfig::ALLOW_TYPED_SIGNATURE }&.value != false
       with_confetti = configs.find { |e| e.key == AccountConfig::FORM_WITH_CONFETTI_KEY }&.value != false
 
-      { completed_button:, with_typed_signature:, with_confetti: }
+      attrs = { completed_button:, with_typed_signature:, with_confetti: }
+
+      keys.each do |key|
+        attrs[key.to_sym] = configs.find { |e| e.key == key.to_s }&.value
+      end
+
+      attrs
     end
   end
 end

lib/submitters/normalize_values.rb

@@ -9,6 +9,7 @@ module Submitters
     UnknownFieldName = Class.new(BaseError)
     InvalidDefaultValue = Class.new(BaseError)
     UnknownSubmitterName = Class.new(BaseError)
+    UnableToDownload = Class.new(BaseError)
 
     module_function
 
@@ -167,7 +168,12 @@ module Submitters
 
       return blob if blob
 
-      data = conn.get(Addressable::URI.parse(url).display_uri.to_s).body
+      uri = Addressable::URI.parse(url)
+      resp = conn.get(uri.display_uri.to_s)
+
+      raise UnableToDownload, "Error loading: #{uri.display_uri}" if resp.status >= 400
+
+      data = resp.body
 
       checksum = Digest::MD5.base64digest(data)
 

package.json

@@ -30,6 +30,7 @@
     "sass-loader": "^13.2.2",
     "shakapacker": "7.1.0",
     "signature_pad": "^4.1.5",
+    "snarkdown": "^2.0.0",
     "tailwindcss": "^3.3.2",
     "terser-webpack-plugin": "5.3.8",
     "uuid": "^9.0.0",

yarn.lock

@@ -4950,6 +4950,11 @@ sirv@^1.0.7:
     mrmime "^1.0.0"
     totalist "^1.0.0"
 
+snarkdown@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/snarkdown/-/snarkdown-2.0.0.tgz#b1feb4db91b9f94a8ebbd7a50f3e99aee18b1e03"
+  integrity sha512-MgL/7k/AZdXCTJiNgrO7chgDqaB9FGM/1Tvlcenenb7div6obaDATzs16JhFyHHBGodHT3B7RzRc5qk8pFhg3A==
+
 sockjs@^0.3.24:
   version "0.3.24"
   resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.24.tgz#c9bc8995f33a111bea0395ec30aa3206bdb5ccce"