fix: Change the route change logic based on bus events, after creating a new conversation in the widget. (#8328)

app/javascript/widget/constants/widgetBusEvents.js

@@ -1,3 +1,4 @@
 export const ON_AGENT_MESSAGE_RECEIVED = 'ON_AGENT_MESSAGE_RECEIVED';
 export const ON_UNREAD_MESSAGE_CLICK = 'ON_UNREAD_MESSAGE_CLICK';
 export const ON_CAMPAIGN_MESSAGE_CLICK = 'ON_CAMPAIGN_MESSAGE_CLICK';
+export const ON_CONVERSATION_CREATED = 'ON_CONVERSATION_CREATED';

app/javascript/widget/store/modules/conversation/actions.js

@@ -10,6 +10,7 @@ import {
   deleteCustomAttribute,
 } from 'widget/api/conversation';
 
+import { ON_CONVERSATION_CREATED } from 'widget/constants/widgetBusEvents';
 import { createTemporaryMessage, getNonDeletedMessages } from './helpers';
 
 export const actions = {
@@ -21,6 +22,8 @@ export const actions = {
       const [message = {}] = messages;
       commit('pushMessageToConversation', message);
       dispatch('conversationAttributes/getAttributes', {}, { root: true });
+      // Emit event to notify that conversation is created and show the chat screen
+      bus.$emit(ON_CONVERSATION_CREATED);
     } catch (error) {
       // Ignore error
     } finally {

app/javascript/widget/views/PreChatForm.vue

@@ -4,28 +4,22 @@
   </div>
 </template>
 <script>
-import { mapGetters } from 'vuex';
 import PreChatForm from '../components/PreChat/Form.vue';
 import configMixin from '../mixins/configMixin';
 import routerMixin from '../mixins/routerMixin';
 import { isEmptyObject } from 'widget/helpers/utils';
+import { ON_CONVERSATION_CREATED } from '../constants/widgetBusEvents';
 
 export default {
   components: {
     PreChatForm,
   },
   mixins: [configMixin, routerMixin],
-  computed: {
+  mounted() {
-    ...mapGetters({
+    bus.$on(ON_CONVERSATION_CREATED, () => {
-      conversationSize: 'conversation/getConversationSize',
+      // Redirect to messages page after conversation is created
-    }),
-  },
-  watch: {
-    conversationSize(newSize, oldSize) {
-      if (!oldSize && newSize > oldSize) {
       this.replaceRoute('messages');
-      }
+    });
-    },
   },
   methods: {
     onSubmit({