feat: Add the option for consent form (#6511)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

.vscode/settings.json

@@ -1 +1,6 @@
-{}
+{
+    "cSpell.words": [
+        "chatwoot",
+        "dompurify"
+    ]
+}

app/javascript/dashboard/i18n/locale/en/inboxMgmt.json

@@ -476,7 +476,8 @@
       "WHATSAPP_SECTION_TITLE": "API Key",
       "WHATSAPP_SECTION_UPDATE_TITLE": "Update API Key",
       "WHATSAPP_SECTION_UPDATE_PLACEHOLDER": "Enter the new API Key here",
-      "WHATSAPP_SECTION_UPDATE_BUTTON": "Update"
+      "WHATSAPP_SECTION_UPDATE_BUTTON": "Update",
+      "UPDATE_PRE_CHAT_FORM_SETTINGS": "Update Pre Chat Form Settings"
     },
     "AUTO_ASSIGNMENT": {
       "MAX_ASSIGNMENT_LIMIT": "Auto assignment limit",

app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue

@@ -16,17 +16,19 @@
         </select>
       </label>
       <div v-if="preChatFormEnabled">
-        <label class="medium-3 columns">
-          {{ $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.LABEL') }}
-          <textarea
-            v-model.trim="preChatMessage"
-            type="text"
+        <label class="columns medium-8  large-8">
+          <label>
+            {{ $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.LABEL') }}
+          </label>
+          <woot-message-editor
+            v-model="preChatMessage"
+            class="message-editor"
             :placeholder="
               $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.PLACEHOLDER')
             "
           />
         </label>
-        <div class="medium-8 columns">
+        <div class="columns medium-8  large-8 pre-chat-fields">
           <label>{{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS') }}</label>
           <table class="table table-striped w-full">
             <thead class="thead-dark">
@@ -65,7 +67,10 @@
         </div>
       </div>
       <woot-submit-button
-        :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+        class="submit-button"
+        :button-text="
+          $t('INBOX_MGMT.SETTINGS_POPUP.UPDATE_PRE_CHAT_FORM_SETTINGS')
+        "
         :loading="uiFlags.isUpdating"
       />
     </form>
@@ -76,10 +81,11 @@ import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
 import PreChatFields from './PreChatFields.vue';
 import { getPreChatFields, standardFieldKeys } from 'dashboard/helper/preChat';
-
+import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
 export default {
   components: {
     PreChatFields,
+    WootMessageEditor,
   },
   mixins: [alertMixin],
   props: {
@@ -171,4 +177,11 @@ export default {
 .pre-chat--title {
   margin: var(--space-medium) 0 var(--space-slab);
 }
+
+.submit-button {
+  margin-top: var(--space-normal);
+}
+.pre-chat-fields {
+  margin-top: var(--space-normal);
+}
 </style>

app/javascript/widget/components/PreChat/Form.vue

@@ -6,11 +6,10 @@
   >
     <div
       v-if="shouldShowHeaderMessage"
-      class="mb-4 text-sm leading-5"
+      v-dompurify-html="formatMessage(headerMessage, false)"
+      class="mb-4 text-sm leading-5 pre-chat-header-message"
       :class="$dm('text-black-800', 'dark:text-slate-50')"
-    >
-      {{ headerMessage }}
-    </div>
+    />
     <FormulateInput
       v-for="item in enabledPreChatFields"
       :key="item.name"
@@ -25,7 +24,7 @@
       :validation-messages="{
         isPhoneE164OrEmpty: $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.VALID_ERROR'),
         email: $t('PRE_CHAT_FORM.FIELDS.EMAIL_ADDRESS.VALID_ERROR'),
-        required: getRequiredErrorMessage(item),
+        required: $t('PRE_CHAT_FORM.REQUIRED'),
       }"
     />
     <FormulateInput
@@ -60,7 +59,7 @@ import CustomButton from 'shared/components/Button';
 import Spinner from 'shared/components/Spinner';
 import { mapGetters } from 'vuex';
 import { getContrastingTextColor } from '@chatwoot/utils';
-
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import { isEmptyObject } from 'widget/helpers/utils';
 import routerMixin from 'widget/mixins/routerMixin';
 import darkModeMixin from 'widget/mixins/darkModeMixin';
@@ -69,7 +68,7 @@ export default {
     CustomButton,
     Spinner,
   },
-  mixins: [routerMixin, darkModeMixin],
+  mixins: [routerMixin, darkModeMixin, messageFormatterMixin],
   props: {
     options: {
       type: Object,
@@ -224,10 +223,6 @@ export default {
       }
       return this.formValues[name] || null;
     },
-
-    getRequiredErrorMessage({ label }) {
-      return `${label} ${this.$t('PRE_CHAT_FORM.IS_REQUIRED')}`;
-    },
     getValidation({ type, name }) {
       if (!this.isContactFieldRequired(name)) {
         return '';
@@ -290,6 +285,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+@import '~widget/assets/scss/variables.scss';
 ::v-deep {
   .wrapper[data-type='checkbox'] {
     .formulate-input-wrapper {
@@ -318,5 +314,11 @@ export default {
       }
     }
   }
+  .pre-chat-header-message {
+    .link {
+      color: $color-woot;
+      text-decoration: underline;
+    }
+  }
 }
 </style>

app/javascript/widget/i18n/locale/en.json

@@ -65,7 +65,8 @@
       }
     },
     "CAMPAIGN_HEADER": "Please provide your name and email before starting the conversation",
-    "IS_REQUIRED": "is required"
+    "IS_REQUIRED": "is required",
+    "REQUIRED": "Required"
   },
   "FILE_SIZE_LIMIT": "File exceeds the {MAXIMUM_FILE_UPLOAD_SIZE} attachment limit",
   "CHAT_FORM": {