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() {

app/javascript/widget/mixins/routerMixin.js

@@ -1,8 +1,8 @@
 export default {
   methods: {
-    async replaceRoute(name) {
+    async replaceRoute(name, params = {}) {
       if (this.$route.name !== name) {
-        return this.$router.replace({ name });
+        return this.$router.replace({ name, params });
       }
       return undefined;
     },

app/javascript/widget/views/Home.vue

@@ -15,7 +15,6 @@
 import configMixin from '../mixins/configMixin';
 import TeamAvailability from 'widget/components/TeamAvailability';
 import { mapGetters } from 'vuex';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
 import routerMixin from 'widget/mixins/routerMixin';
 export default {
   name: 'Home',
@@ -34,10 +33,7 @@ export default {
     },
   },
   data() {
-    return {
+    return {};
-      isOnCollapsedView: false,
-      isOnNewConversation: false,
-    };
   },
   computed: {
     ...mapGetters({
@@ -46,12 +42,6 @@ export default {
       conversationSize: 'conversation/getConversationSize',
     }),
   },
-  mounted() {
-    bus.$on(BUS_EVENTS.START_NEW_CONVERSATION, () => {
-      this.isOnCollapsedView = true;
-      this.isOnNewConversation = true;
-    });
-  },
   methods: {
     startConversation() {
       if (this.preChatFormEnabled && !this.conversationSize) {

app/javascript/widget/views/PreChatForm.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="flex flex-1 overflow-auto">
-    <pre-chat-form :options="preChatFormOptions" @submit="onSubmit" />
+    <pre-chat-form
+      :options="preChatFormOptions"
+      :disable-contact-fields="disableContactFields"
+      @submit="onSubmit"
+    />
   </div>
 </template>
 <script>
@@ -18,6 +22,10 @@ export default {
     ...mapGetters({
       conversationSize: 'conversation/getConversationSize',
     }),
+    disableContactFields() {
+      const { disableContactFields = false } = this.$route.params || {};
+      return disableContactFields;
+    },
   },
   watch: {
     conversationSize(newSize, oldSize) {