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

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: [],
+        },
+      ]);
+    });
+  });
+});