fix: Show new message screen instead of input field (#4102)

app/javascript/widget/components/ChatFooter.vue

@@ -37,12 +37,13 @@ import CustomButton from 'shared/components/Button';
 import ChatInputWrap from 'widget/components/ChatInputWrap.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { sendEmailTranscript } from 'widget/api/conversation';
-
+import routerMixin from 'widget/mixins/routerMixin';
 export default {
   components: {
     ChatInputWrap,
     CustomButton,
   },
+  mixins: [routerMixin],
   props: {
     msg: {
       type: String,
@@ -53,7 +54,7 @@ export default {
     ...mapGetters({
       conversationAttributes: 'conversationAttributes/getConversationParams',
       widgetColor: 'appConfig/getWidgetColor',
-      getConversationSize: 'conversation/getConversationSize',
+      conversationSize: 'conversation/getConversationSize',
       currentUser: 'contacts/getCurrentUser',
       isWidgetStyleFlat: 'appConfig/isWidgetStyleFlat',
     }),
@@ -80,12 +81,11 @@ export default {
       'clearConversationAttributes',
     ]),
     async handleSendMessage(content) {
-      const conversationSize = this.getConversationSize;
       await this.sendMessage({
         content,
       });
       // Update conversation attributes on new conversation
-      if (conversationSize === 0) {
+      if (this.conversationSize === 0) {
         this.getAttributes();
       }
     },
@@ -95,7 +95,12 @@ export default {
     startNewConversation() {
       this.clearConversations();
       this.clearConversationAttributes();
-      window.bus.$emit(BUS_EVENTS.START_NEW_CONVERSATION);
+
+      // To create a new conversation, we are redirecting
+      // the user to pre-chat with contact fields disabled
+      // Pass disableContactFields params to the route
+      // This would disable the contact fields in the pre-chat form
+      this.replaceRoute('prechat-form', { disableContactFields: true });
     },
     async sendTranscript() {
       const { email } = this.currentUser;

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

@@ -10,7 +10,7 @@
       {{ headerMessage }}
     </div>
     <form-input
-      v-if="options.requireEmail"
+      v-if="areContactFieldsVisible"
       v-model="fullName"
       class="mt-5"
       :label="$t('PRE_CHAT_FORM.FIELDS.FULL_NAME.LABEL')"
@@ -21,7 +21,7 @@
       "
     />
     <form-input
-      v-if="options.requireEmail"
+      v-if="areContactFieldsVisible"
       v-model="emailAddress"
       class="mt-5"
       :label="$t('PRE_CHAT_FORM.FIELDS.EMAIL_ADDRESS.LABEL')"
@@ -77,6 +77,10 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    disableContactFields: {
+      type: Boolean,
+      default: false,
+    },
   },
   validations() {
     const identityValidations = {
@@ -99,7 +103,7 @@ export default {
     if (this.hasActiveCampaign) {
       return identityValidations;
     }
-    if (this.options.requireEmail) {
+    if (this.areContactFieldsVisible) {
       return {
         ...identityValidations,
         ...messageValidation,
@@ -135,6 +139,9 @@ export default {
       }
       return this.options.preChatMessage;
     },
+    areContactFieldsVisible() {
+      return this.options.requireEmail && !this.disableContactFields;
+    },
   },
   methods: {
     onSubmit() {