accept field title and description

.eslintrc

@@ -8,7 +8,8 @@
   },
   "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/api/submissions_controller.rb

@@ -141,7 +141,8 @@ module Api
             submitters: [[:send_email, :send_sms, :uuid, :name, :email, :role,
                           :completed, :phone, :application_key,
                           { values: {}, readonly_fields: [], message: %i[subject body],
-                            fields: [%i[name default_value readonly validation_pattern invalid_message]] }]]
+                            fields: [%i[name default_value title description
+                                        readonly validation_pattern invalid_message]] }]]
           }]
         ]
       ).fetch(key, [])

app/javascript/submission_form/appears_on.vue

@@ -41,7 +41,7 @@ export default {
     uniqueAreas () {
       const areas = {}
 
-      this.field.areas.forEach((area) => {
+      this.field.areas?.forEach((area) => {
         areas[area.attachment_uuid + area.page] ||= area
       })
 

app/javascript/submission_form/form.vue

@@ -204,7 +204,15 @@
                       :checked="!!values[field.uuid]"
                       @click="[scrollIntoField(field), values[field.uuid] = !values[field.uuid]]"
                     >
-                    <span class="text-xl">
+                    <span
+                      v-if="field.title"
+                      class="text-xl"
+                      v-html="field.title"
+                    />
+                    <span
+                      v-else
+                      class="text-xl"
+                    >
                       {{ field.name || field.type + ' ' + (index + 1) }}
                     </span>
                   </label>
@@ -737,7 +745,7 @@ export default {
 
       stepPromise().then(async () => {
         const emptyRequiredField = this.stepFields.find((fields, index) => {
-          return index < this.currentStep && fields[0].required && (fields[0].type === 'phone' || !this.allowToSkip) && !this.submittedValues[fields[0].uuid]?.length
+          return index < this.currentStep && fields[0].required && (fields[0].type === 'phone' || !this.allowToSkip) && (this.submittedValues[fields[0].uuid] === true ? false : !this.submittedValues[fields[0].uuid]?.length)
         })
 
         const formData = new FormData(this.$refs.form)

app/javascript/submission_form/text_step.vue

@@ -3,14 +3,21 @@
     v-if="field.name"
     :for="field.uuid"
     dir="auto"
-    class="label text-2xl mb-2"
+    class="label text-2xl"
-  >{{ field.name }}
+    :class="{ 'mb-2': !field.description }"
+  ><template v-if="field.title"><span v-html="field.title" /></template>
+    <template v-else>{{ field.name }}</template>
     <template v-if="!field.required">({{ t('optional') }})</template>
   </label>
   <div
     v-else
     class="py-1"
   />
+  <div
+    v-if="field.description"
+    class="mb-3 px-1 text-lg"
+    v-html="field.description"
+  />
   <AppearsOn :field="field" />
   <div class="items-center flex">
     <input

lib/submissions/create_from_submitters.rb

@@ -98,19 +98,28 @@ module Submissions
 
         next if field_configs.blank?
 
-        f['readonly'] = field_configs['readonly'] if field_configs['readonly'].present?
+        assign_field_attrs(f, field_configs)
-        f['default_value'] = field_configs['default_value'] if field_configs['default_value'].present? &&
-                                                               !f['type'].in?(%w[signature image initials file])
-
-        next if field_configs['validation_pattern'].blank?
-
-        f['validation'] = {
-          'pattern' => field_configs['validation_pattern'],
-          'message' => field_configs['invalid_message']
-        }.compact_blank
       end
     end
 
+    def assign_field_attrs(field, attrs)
+      field['title'] = attrs['title'] if attrs['title'].present?
+      field['description'] = attrs['description'] if attrs['description'].present?
+      field['readonly'] = attrs['readonly'] if attrs.key?('readonly')
+      field['required'] = attrs['required'] if attrs.key?('required')
+      field['default_value'] = attrs['default_value'] if attrs['default_value'].present? &&
+                                                         !field['type'].in?(%w[signature image initials file])
+
+      return field if attrs['validation_pattern'].blank?
+
+      field['validation'] = {
+        'pattern' => attrs['validation_pattern'],
+        'message' => attrs['invalid_message']
+      }.compact_blank
+
+      field
+    end
+
     def find_submitter_uuid(template, attrs, index)
       attrs[:uuid].presence ||
         template.submitters.find { |e| e['name'] == attrs[:role] }&.dig('uuid') ||