feat: Custom fields in pre-chat form (#4189)

app/javascript/dashboard/components/ui/Switch.vue

@@ -17,8 +17,12 @@ export default {
     value: { type: Boolean, default: false },
   },
   methods: {
-    onClick() {
-      this.$emit('input', !this.value);
+    onClick(event) {
+      if (event.pointerId === -1) {
+        event.preventDefault();
+      } else {
+        this.$emit('input', !this.value);
+      }
     },
   },
 };

app/javascript/dashboard/helper/preChat.js

@@ -0,0 +1,100 @@
+import i18n from 'widget/i18n/index';
+const defaultTranslations = Object.fromEntries(
+  Object.entries(i18n).filter(([key]) => key.includes('en'))
+).en;
+
+export const standardFieldKeys = {
+  emailAddress: {
+    key: 'EMAIL_ADDRESS',
+    label: 'Email Id',
+    placeholder: 'Please enter your email address',
+  },
+  fullName: {
+    key: 'FULL_NAME',
+    label: 'Full Name',
+    placeholder: 'Please enter your full name',
+  },
+  phoneNumber: {
+    key: 'PHONE_NUMBER',
+    label: 'Phone Number',
+    placeholder: 'Please enter your phone number',
+  },
+};
+
+export const getLabel = ({ key, label }) => {
+  return defaultTranslations.PRE_CHAT_FORM.FIELDS[key]
+    ? defaultTranslations.PRE_CHAT_FORM.FIELDS[key].LABEL
+    : label;
+};
+export const getPlaceHolder = ({ key, placeholder }) => {
+  return defaultTranslations.PRE_CHAT_FORM.FIELDS[key]
+    ? defaultTranslations.PRE_CHAT_FORM.FIELDS[key].PLACEHOLDER
+    : placeholder;
+};
+
+export const getCustomFields = ({ standardFields, customAttributes }) => {
+  let customFields = [];
+  const { pre_chat_fields: preChatFields } = standardFields;
+  customAttributes.forEach(attribute => {
+    const itemExist = preChatFields.find(
+      item => item.name === attribute.attribute_key
+    );
+    if (!itemExist) {
+      customFields.push({
+        label: attribute.attribute_display_name,
+        placeholder: attribute.attribute_display_name,
+        name: attribute.attribute_key,
+        type: attribute.attribute_display_type,
+        values: attribute.attribute_values,
+        field_type: attribute.attribute_model,
+        required: false,
+        enabled: false,
+      });
+    }
+  });
+  return customFields;
+};
+
+export const getFormattedPreChatFields = ({ preChatFields }) => {
+  return preChatFields.map(item => {
+    return {
+      ...item,
+      label: getLabel({
+        key: standardFieldKeys[item.name]
+          ? standardFieldKeys[item.name].key
+          : item.name,
+        label: item.label ? item.label : item.name,
+      }),
+      placeholder: getPlaceHolder({
+        key: standardFieldKeys[item.name]
+          ? standardFieldKeys[item.name].key
+          : item.name,
+        placeholder: item.placeholder ? item.placeholder : item.name,
+      }),
+    };
+  });
+};
+
+export const getPreChatFields = ({
+  preChatFormOptions = {},
+  customAttributes = [],
+}) => {
+  const { pre_chat_message, pre_chat_fields } = preChatFormOptions;
+  let customFields = {};
+  let preChatFields = {};
+
+  const formattedPreChatFields = getFormattedPreChatFields({
+    preChatFields: pre_chat_fields,
+  });
+
+  customFields = getCustomFields({
+    standardFields: { pre_chat_fields: formattedPreChatFields },
+    customAttributes,
+  });
+  preChatFields = [...formattedPreChatFields, ...customFields];
+
+  return {
+    pre_chat_message,
+    pre_chat_fields: preChatFields,
+  };
+};

app/javascript/dashboard/helper/specs/inboxFixture.js

@@ -0,0 +1,47 @@
+export default {
+  customFields: {
+    pre_chat_message: 'Share your queries or comments here.',
+    pre_chat_fields: [
+      {
+        label: 'Email Address',
+        name: 'emailAddress',
+        type: 'email',
+        field_type: 'standard',
+        required: false,
+        enabled: false,
+
+        placeholder: 'Please enter your email address',
+      },
+      {
+        label: 'Full Name',
+        name: 'fullName',
+        type: 'text',
+        field_type: 'standard',
+        required: false,
+        enabled: false,
+        placeholder: 'Please enter your full name',
+      },
+      {
+        label: 'Phone Number',
+        name: 'phoneNumber',
+        type: 'text',
+        field_type: 'standard',
+        required: false,
+        enabled: false,
+        placeholder: 'Please enter your phone number',
+      },
+    ],
+  },
+  customAttributes: [
+    {
+      id: 101,
+      attribute_description: 'Order Identifier',
+      attribute_display_name: 'Order Id',
+      attribute_display_type: 'number',
+      attribute_key: 'order_id',
+      attribute_model: 'conversation_attribute',
+      attribute_values: Array(0),
+      created_at: '2021-11-29T10:20:04.563Z',
+    },
+  ],
+};

app/javascript/dashboard/helper/specs/preChat.spec.js

@@ -0,0 +1,76 @@
+import {
+  getPreChatFields,
+  getFormattedPreChatFields,
+  getCustomFields,
+} from '../preChat';
+import inboxFixture from './inboxFixture';
+
+const { customFields, customAttributes } = inboxFixture;
+describe('#Pre chat Helpers', () => {
+  describe('getPreChatFields', () => {
+    it('should return correct pre-chat fields form options passed', () => {
+      expect(getPreChatFields({ preChatFormOptions: customFields })).toEqual(
+        customFields
+      );
+    });
+  });
+  describe('getFormattedPreChatFields', () => {
+    it('should return correct custom fields', () => {
+      expect(
+        getFormattedPreChatFields({
+          preChatFields: customFields.pre_chat_fields,
+        })
+      ).toEqual([
+        {
+          label: 'Email Address',
+          name: 'emailAddress',
+          placeholder: 'Please enter your email address',
+          type: 'email',
+          field_type: 'standard',
+
+          required: false,
+          enabled: false,
+        },
+        {
+          label: 'Full Name',
+          name: 'fullName',
+          placeholder: 'Please enter your full name',
+          type: 'text',
+          field_type: 'standard',
+          required: false,
+          enabled: false,
+        },
+        {
+          label: 'Phone Number',
+          name: 'phoneNumber',
+          placeholder: 'Please enter your phone number',
+          type: 'text',
+          field_type: 'standard',
+          required: false,
+          enabled: false,
+        },
+      ]);
+    });
+  });
+  describe('getCustomFields', () => {
+    it('should return correct custom fields', () => {
+      expect(
+        getCustomFields({
+          standardFields: { pre_chat_fields: customFields.pre_chat_fields },
+          customAttributes,
+        })
+      ).toEqual([
+        {
+          enabled: false,
+          label: 'Order Id',
+          placeholder: 'Order Id',
+          name: 'order_id',
+          required: false,
+          field_type: 'conversation_attribute',
+          type: 'number',
+          values: [],
+        },
+      ]);
+    });
+  });
+});

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

@@ -187,7 +187,7 @@
           }
         }
       },
-			"WHATSAPP": {
+      "WHATSAPP": {
         "TITLE": "WhatsApp Channel",
         "DESC": "Start supporting your customers via WhatsApp.",
         "PROVIDERS": {
@@ -211,7 +211,6 @@
           "PLACEHOLDER": "API key",
           "APPLY_FOR_ACCESS": "Don't have any API key? Apply for access here",
           "ERROR": "Please enter a valid value."
-
         },
         "SUBMIT_BUTTON": "Create WhatsApp Channel",
         "API": {
@@ -433,6 +432,15 @@
     },
     "PRE_CHAT_FORM": {
       "DESCRIPTION": "Pre chat forms enable you to capture user information before they start conversation with you.",
+      "SET_FIELDS": "Pre chat form fields",
+      "SET_FIELDS_HEADER": {
+        "FIELDS": "Fields",
+        "LABEL": "Label",
+        "PLACE_HOLDER":"Placeholder",
+        "KEY": "Key",
+        "TYPE": "Type",
+        "REQUIRED": "Required"
+      },
       "ENABLE": {
         "LABEL": "Enable pre chat form",
         "OPTIONS": {
@@ -441,7 +449,7 @@
         }
       },
       "PRE_CHAT_MESSAGE": {
-        "LABEL": "Pre Chat Message",
+        "LABEL": "Pre chat message",
         "PLACEHOLDER": "This message would be visible to the users along with the form"
       },
       "REQUIRE_EMAIL": {
@@ -465,7 +473,7 @@
         "VALIDATION_ERROR": "Starting time should be before closing time.",
         "CHOOSE": "Choose"
       },
-      "ALL_DAY":"All-Day"
+      "ALL_DAY": "All-Day"
     },
     "IMAP": {
       "TITLE": "IMAP",

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

@@ -0,0 +1,91 @@
+<template>
+  <draggable v-model="preChatFields" tag="tbody">
+    <tr v-for="(item, index) in preChatFields" :key="index">
+      <td class="pre-chat-field"><fluent-icon icon="drag" /></td>
+      <td class="pre-chat-field">
+        <woot-switch
+          :value="item['enabled']"
+          @input="handlePreChatFieldOptions($event, 'enabled', item)"
+        />
+      </td>
+      <td class="pre-chat-field" :class="{ 'disabled-text': !item['enabled'] }">
+        {{ item.name }}
+      </td>
+      <td class="pre-chat-field" :class="{ 'disabled-text': !item['enabled'] }">
+        {{ item.type }}
+      </td>
+      <td class="pre-chat-field">
+        <input
+          v-model="item['required']"
+          type="checkbox"
+          :value="`${item.name}-required`"
+          :disabled="!item['enabled']"
+          @click="handlePreChatFieldOptions($event, 'required', item)"
+        />
+      </td>
+      <td class="pre-chat-field" :class="{ 'disabled-text': !item['enabled'] }">
+        <input
+          v-model.trim="item.label"
+          type="text"
+          :disabled="isFieldEditable(item)"
+        />
+      </td>
+      <td class="pre-chat-field" :class="{ 'disabled-text': !item['enabled'] }">
+        <input
+          v-model.trim="item.placeholder"
+          type="text"
+          :disabled="isFieldEditable(item)"
+        />
+      </td>
+    </tr>
+  </draggable>
+</template>
+
+<script>
+import draggable from 'vuedraggable';
+import { standardFieldKeys } from 'dashboard/helper/preChat';
+export default {
+  components: { draggable },
+  props: {
+    preChatFields: {
+      type: Array,
+      default: () => [],
+    },
+    handlePreChatFieldOptions: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  methods: {
+    isFieldEditable(item) {
+      return !!standardFieldKeys[item.name] || !item.enabled;
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.pre-chat-field {
+  padding: var(--space-normal) var(--space-small);
+
+  svg {
+    display: flex;
+    align-items: center;
+  }
+}
+.disabled-text {
+  color: var(--s-500);
+}
+
+table {
+  thead th {
+    text-transform: none;
+  }
+  input {
+    font-size: var(--font-size-small);
+    margin-bottom: 0;
+  }
+}
+checkbox {
+  margin: 0;
+}
+</style>

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

@@ -1,10 +1,10 @@
 <template>
   <div class="settings--content">
-    <div class="prechat--title">
+    <div class="pre-chat--title">
       {{ $t('INBOX_MGMT.PRE_CHAT_FORM.DESCRIPTION') }}
     </div>
-    <form class="medium-6" @submit.prevent="updateInbox">
-      <label class="medium-9 columns">
+    <form @submit.prevent="updateInbox">
+      <label class="medium-3 columns">
         {{ $t('INBOX_MGMT.PRE_CHAT_FORM.ENABLE.LABEL') }}
         <select v-model="preChatFormEnabled">
           <option :value="true">
@@ -15,28 +15,55 @@
           </option>
         </select>
       </label>
-
-      <label class="medium-9">
-        {{ $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.LABEL') }}
-        <textarea
-          v-model.trim="preChatMessage"
-          type="text"
-          :placeholder="
-            $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.PLACEHOLDER')
-          "
-        />
-      </label>
-      <div>
-        <input
-          v-model="preChatFieldOptions"
-          type="checkbox"
-          value="requireEmail"
-          @input="handlePreChatFieldOptions"
-        />
-        <label for="requireEmail">
-          {{ $t('INBOX_MGMT.PRE_CHAT_FORM.REQUIRE_EMAIL.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"
+            :placeholder="
+              $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.PLACEHOLDER')
+            "
+          />
+        </label>
+        <label class="medium-8 columns">
+          {{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS') }}
+          <table class="table table-striped w-full">
+            <thead class="thead-dark">
+              <tr>
+                <th scope="col"></th>
+                <th scope="col"></th>
+                <th scope="col">
+                  {{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.KEY') }}
+                </th>
+                <th scope="col">
+                  {{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.TYPE') }}
+                </th>
+                <th scope="col">
+                  {{
+                    $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.REQUIRED')
+                  }}
+                </th>
+                <th scope="col">
+                  {{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.LABEL') }}
+                </th>
+                <th scope="col">
+                  {{
+                    $t(
+                      'INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.PLACE_HOLDER'
+                    )
+                  }}
+                </th>
+              </tr>
+            </thead>
+            <pre-chat-fields
+              :pre-chat-fields="preChatFields"
+              :handle-pre-chat-field-options="handlePreChatFieldOptions"
+            />
+          </table>
         </label>
       </div>
+
       <woot-submit-button
         :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
         :loading="uiFlags.isUpdatingInbox"
@@ -47,8 +74,13 @@
 <script>
 import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
+import PreChatFields from './PreChatFields.vue';
+import { getPreChatFields, standardFieldKeys } from 'dashboard/helper/preChat';
 
 export default {
+  components: {
+    PreChatFields,
+  },
   mixins: [alertMixin],
   props: {
     inbox: {
@@ -60,11 +92,21 @@ export default {
     return {
       preChatFormEnabled: false,
       preChatMessage: '',
-      preChatFieldOptions: [],
+      preChatFields: [],
     };
   },
   computed: {
-    ...mapGetters({ uiFlags: 'inboxes/getUIFlags' }),
+    ...mapGetters({
+      uiFlags: 'inboxes/getUIFlags',
+      customAttributes: 'attributes/getAttributes',
+    }),
+    preChatFieldOptions() {
+      const { pre_chat_form_options: preChatFormOptions } = this.inbox;
+      return getPreChatFields({
+        preChatFormOptions,
+        customAttributes: this.customAttributes,
+      });
+    },
   },
   watch: {
     inbox() {
@@ -76,25 +118,26 @@ export default {
   },
   methods: {
     setDefaults() {
-      const {
-        pre_chat_form_enabled: preChatFormEnabled,
-        pre_chat_form_options: preChatFormOptions,
-      } = this.inbox;
+      const { pre_chat_form_enabled: preChatFormEnabled } = this.inbox;
       this.preChatFormEnabled = preChatFormEnabled;
-      const { pre_chat_message: preChatMessage, require_email: requireEmail } =
-        preChatFormOptions || {};
+      const {
+        pre_chat_message: preChatMessage,
+        pre_chat_fields: preChatFields,
+      } = this.preChatFieldOptions || {};
       this.preChatMessage = preChatMessage;
-      if (requireEmail) {
-        this.preChatFieldOptions = ['requireEmail'];
-      }
+      this.preChatFields = preChatFields;
     },
-    handlePreChatFieldOptions(event) {
-      if (this.preChatFieldOptions.includes(event.target.value)) {
-        this.preChatFieldOptions = [];
-      } else {
-        this.preChatFieldOptions = [event.target.value];
-      }
+    isFieldEditable(item) {
+      return !!standardFieldKeys[item.name] || !item.enabled;
     },
+    handlePreChatFieldOptions(event, type, item) {
+      this.preChatFields.forEach((field, index) => {
+        if (field.name === item.name) {
+          this.preChatFields[index][type] = !item[type];
+        }
+      });
+    },
+
     async updateInbox() {
       try {
         const payload = {
@@ -104,7 +147,7 @@ export default {
             pre_chat_form_enabled: this.preChatFormEnabled,
             pre_chat_form_options: {
               pre_chat_message: this.preChatMessage,
-              require_email: this.preChatFieldOptions.includes('requireEmail'),
+              pre_chat_fields: this.preChatFields,
             },
           },
         };
@@ -117,12 +160,11 @@ export default {
   },
 };
 </script>
-<style scoped>
+<style scoped lang="scss">
 .settings--content {
   font-size: var(--font-size-default);
 }
-
-.prechat--title {
+.pre-chat--title {
   margin: var(--space-medium) 0 var(--space-slab);
 }
 </style>

app/javascript/dashboard/store/modules/attributes.js

@@ -16,6 +16,9 @@ export const getters = {
   getUIFlags(_state) {
     return _state.uiFlags;
   },
+  getAttributes: _state => {
+    return _state.records;
+  },
   getAttributesByModel: _state => attributeModel => {
     return _state.records.filter(
       record => record.attribute_model === attributeModel

app/javascript/dashboard/store/modules/specs/attributes/getters.spec.js

@@ -2,6 +2,26 @@ import { getters } from '../../attributes';
 import attributesList from './fixtures';
 
 describe('#getters', () => {
+  it('getAttributes', () => {
+    const state = { records: attributesList };
+    expect(getters.getAttributes(state)).toEqual([
+      {
+        attribute_display_name: 'Language',
+        attribute_display_type: 1,
+        attribute_description: 'The conversation language',
+        attribute_key: 'language',
+        attribute_model: 0,
+      },
+      {
+        attribute_display_name: 'Language one',
+        attribute_display_type: 2,
+        attribute_description: 'The conversation language one',
+        attribute_key: 'language_one',
+        attribute_model: 1,
+      },
+    ]);
+  });
+
   it('getAttributesByModel', () => {
     const state = { records: attributesList };
     expect(getters.getAttributesByModel(state)(1)).toEqual([