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

app/javascript/widget/mixins/configMixin.js

@@ -25,15 +25,21 @@ export default {
       return window.chatwootWebChannel.preChatFormEnabled;
     },
     preChatFormOptions() {
-      let requireEmail = false;
       let preChatMessage = '';
       const options = window.chatwootWebChannel.preChatFormOptions || {};
-      requireEmail = options.require_email;
       preChatMessage = options.pre_chat_message;
+      const { pre_chat_fields: preChatFields = [] } = options;
       return {
-        requireEmail,
         preChatMessage,
+        preChatFields,
       };
     },
+    shouldShowPreChatForm() {
+      const { preChatFields } = this.preChatFormOptions;
+      // Check if at least one enabled field in pre-chat fields
+      const hasEnabledFields =
+        preChatFields.filter(field => field.enabled).length > 0;
+      return this.preChatFormEnabled && hasEnabledFields;
+    },
   },
 };

app/javascript/widget/mixins/specs/configMixin.spec.js

@@ -1,12 +1,30 @@
 import { createWrapper } from '@vue/test-utils';
 import configMixin from '../configMixin';
 import Vue from 'vue';
-
+const preChatFields = [
+  {
+    label: 'Email Id',
+    name: 'emailAddress',
+    type: 'email',
+    field_type: 'standard',
+    required: false,
+    enabled: false,
+  },
+  {
+    label: 'Full name',
+    name: 'fullName',
+    type: 'text',
+    field_type: 'standard',
+    required: true,
+    enabled: true,
+  },
+];
 global.chatwootWebChannel = {
   avatarUrl: 'https://test.url',
   hasAConnectedAgentBot: 'AgentBot',
   enabledFeatures: ['emoji_picker', 'attachments', 'end_conversation'],
-  preChatFormOptions: { require_email: false, pre_chat_message: '' },
+  preChatFormOptions: { pre_chat_fields: preChatFields, pre_chat_message: '' },
+  preChatFormEnabled: true,
 };
 
 global.chatwootWidgetDefaults = {
@@ -29,18 +47,22 @@ describe('configMixin', () => {
     expect(wrapper.vm.hasAConnectedAgentBot).toBe(true);
     expect(wrapper.vm.useInboxAvatarForBot).toBe(true);
     expect(wrapper.vm.inboxAvatarUrl).toBe('https://test.url');
+
     expect(wrapper.vm.channelConfig).toEqual({
       avatarUrl: 'https://test.url',
       hasAConnectedAgentBot: 'AgentBot',
       enabledFeatures: ['emoji_picker', 'attachments', 'end_conversation'],
       preChatFormOptions: {
         pre_chat_message: '',
-        require_email: false,
+        pre_chat_fields: preChatFields,
       },
+      preChatFormEnabled: true,
     });
     expect(wrapper.vm.preChatFormOptions).toEqual({
-      requireEmail: false,
       preChatMessage: '',
+      preChatFields: preChatFields,
     });
+    expect(wrapper.vm.preChatFormEnabled).toEqual(true);
+    expect(wrapper.vm.shouldShowPreChatForm).toEqual(true);
   });
 });