refactor: expose replaceRoute directly

app/javascript/widget/App.vue

@@ -8,7 +8,7 @@ import availabilityMixin from 'widget/mixins/availability';
 import { getLocale } from './helpers/urlParamsHelper';
 import { isEmptyObject } from 'widget/helpers/utils';
 import Spinner from 'shared/components/Spinner.vue';
-import { useRouterHelper } from 'widget/composables/useRouterHelper';
+import { useReplaceRoute } from 'widget/composables/useReplaceRoute';
 import {
   getExtraSpaceToScroll,
   loadedEventConfig,
@@ -28,10 +28,6 @@ export default {
     Spinner,
   },
   mixins: [availabilityMixin, configMixin, darkModeMixin],
-  setup() {
-    const { replaceRoute } = useRouterHelper();
-    return { replaceRoute };
-  },
   data() {
     return {
       isMobile: false,
@@ -145,15 +141,15 @@ export default {
         this.setUnreadView();
       });
       emitter.on(ON_UNREAD_MESSAGE_CLICK, () => {
-        this.replaceRoute('messages').then(() => this.unsetUnreadView());
+        useReplaceRoute('messages').then(() => this.unsetUnreadView());
       });
     },
     registerCampaignEvents() {
       emitter.on(ON_CAMPAIGN_MESSAGE_CLICK, () => {
         if (this.shouldShowPreChatForm) {
-          this.replaceRoute('prechat-form');
+          useReplaceRoute('prechat-form');
         } else {
-          this.replaceRoute('messages');
+          useReplaceRoute('messages');
           emitter.emit('execute-campaign', {
             campaignId: this.activeCampaign.id,
           });
@@ -164,7 +160,7 @@ export default {
         const { customAttributes, campaignId } = campaignDetails;
         const { websiteToken } = window.chatwootWebChannel;
         this.executeCampaign({ campaignId, websiteToken, customAttributes });
-        this.replaceRoute('messages');
+        useReplaceRoute('messages');
       });
       emitter.on('snooze-campaigns', () => {
         const expireBy = addHours(new Date(), 1);
@@ -180,7 +176,7 @@ export default {
         !messageCount &&
         !shouldSnoozeCampaign;
       if (this.isIFrame && isCampaignReadyToExecute) {
-        this.replaceRoute('campaigns').then(() => {
+        useReplaceRoute('campaigns').then(() => {
           this.setIframeHeight(true);
           IFrameHelper.sendMessage({ event: 'setUnreadMode' });
         });
@@ -195,7 +191,7 @@ export default {
         unreadMessageCount > 0 &&
         !this.isWidgetOpen
       ) {
-        this.replaceRoute('unread-messages').then(() => {
+        useReplaceRoute('unread-messages').then(() => {
           this.setIframeHeight(true);
           IFrameHelper.sendMessage({ event: 'setUnreadMode' });
         });
@@ -302,12 +298,12 @@ export default {
             ['unread-messages', 'campaigns'].includes(this.$route.name);
 
           if (shouldShowMessageView) {
-            this.replaceRoute('messages');
+            useReplaceRoute('messages');
           }
           if (shouldShowHomeView) {
             this.$store.dispatch('conversation/setUserLastSeen');
             this.unsetUnreadView();
-            this.replaceRoute('home');
+            useReplaceRoute('home');
           }
           if (!message.isOpen) {
             this.resetCampaign();

app/javascript/widget/components/ChatFooter.vue

@@ -6,7 +6,7 @@ import FooterReplyTo from 'widget/components/FooterReplyTo.vue';
 import ChatInputWrap from 'widget/components/ChatInputWrap.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { sendEmailTranscript } from 'widget/api/conversation';
-import { useRouterHelper } from 'widget/composables/useRouterHelper';
+import { useReplaceRoute } from 'widget/composables/useReplaceRoute';
 import { IFrameHelper } from '../helpers/utils';
 import { CHATWOOT_ON_START_CONVERSATION } from '../constants/sdkEvents';
 
@@ -16,10 +16,6 @@ export default {
     CustomButton,
     FooterReplyTo,
   },
-  setup() {
-    const { replaceRoute } = useRouterHelper();
-    return { replaceRoute };
-  },
   data() {
     return {
       inReplyTo: null,
@@ -88,7 +84,7 @@ export default {
     startNewConversation() {
       this.clearConversations();
       this.clearConversationAttributes();
-      this.replaceRoute('prechat-form');
+      useReplaceRoute('prechat-form');
       IFrameHelper.sendMessage({
         event: 'onEvent',
         eventIdentifier: CHATWOOT_ON_START_CONVERSATION,

app/javascript/widget/components/ChatHeader.vue

@@ -3,7 +3,7 @@ import availabilityMixin from 'widget/mixins/availability';
 import nextAvailabilityTime from 'widget/mixins/nextAvailabilityTime';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import HeaderActions from './HeaderActions.vue';
-import { useRouterHelper } from 'widget/composables/useRouterHelper';
+import { useReplaceRoute } from 'widget/composables/useReplaceRoute';
 import darkMixin from 'widget/mixins/darkModeMixin.js';
 
 export default {
@@ -35,10 +35,6 @@ export default {
       default: () => {},
     },
   },
-  setup() {
-    const { replaceRoute } = useRouterHelper();
-    return { replaceRoute };
-  },
   computed: {
     isOnline() {
       const { workingHoursEnabled } = this.channelConfig;
@@ -52,7 +48,7 @@ export default {
   },
   methods: {
     onBackButtonClick() {
-      this.replaceRoute('home');
+      useReplaceRoute('home');
     },
   },
 };

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

@@ -6,7 +6,6 @@ import { getContrastingTextColor } from '@chatwoot/utils';
 import { isEmptyObject } from 'widget/helpers/utils';
 import { getRegexp } from 'shared/helpers/Validators';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
-import { useRouterHelper } from 'widget/composables/useRouterHelper';
 import darkModeMixin from 'widget/mixins/darkModeMixin';
 import configMixin from 'widget/mixins/configMixin';
 
@@ -22,10 +21,6 @@ export default {
       default: () => {},
     },
   },
-  setup() {
-    const { replaceRoute } = useRouterHelper();
-    return { replaceRoute };
-  },
   data() {
     return {
       locale: this.$root.$i18n.locale,

app/javascript/widget/composables/useReplaceRoute.js

@@ -0,0 +1,21 @@
+import { useRouter, useRoute } from 'dashboard/composables/route';
+
+/**
+ * Composable for replacing the current route with a new one if it's different.
+ * @param {string} name - The name of the route to replace with.
+ * @param {Object} params - The params to pass to the new route.
+ * @returns {Promise|undefined} A promise that resolves when the navigation is complete, or undefined if no navigation occurs.
+ */
+export const useReplaceRoute = async (name, params = {}) => {
+  const router = useRouter();
+  const route = useRoute();
+
+  return new Promise((resolve, reject) => {
+    if (route.name !== name) {
+      router.replace({ name, params }).then(resolve).catch(reject);
+    }
+    resolve(undefined);
+  });
+};
+
+export default useReplaceRoute;

app/javascript/widget/composables/useRouterHelper.js

@@ -1,26 +0,0 @@
-import { useRouter, useRoute } from 'dashboard/composables/route';
-
-/**
- * Composable for handling router-related operations.
- * @returns {Object} An object containing methods for router manipulation.
- */
-export function useRouterHelper() {
-  const router = useRouter();
-  const route = useRoute();
-  /**
-   * Replaces the current route with a new one if it's different.
-   * @param {string} name - The name of the route to replace with.
-   * @param {Object} params - The params to pass to the new route.
-   * @returns {Promise|undefined} A promise that resolves when the navigation is complete, or undefined if no navigation occurs.
-   */
-  const replaceRoute = async (name, params = {}) => {
-    if (route.name !== name) {
-      return router.replace({ name, params });
-    }
-    return undefined;
-  };
-
-  return {
-    replaceRoute,
-  };
-}

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

@@ -1,13 +1,13 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { useRouterHelper } from '../../composables/useRouterHelper';
+import { useReplaceRoute } from '../../composables/useReplaceRoute';
 
 const mockRouter = {
   currentRoute: { name: 'initialRoute' },
   replace: vi.fn(),
 };
 
-vi.mock('../../composables/useRouterHelper', () => ({
-  useRouterHelper: () => ({
+vi.mock('../../composables/useReplaceRoute', () => ({
+  useReplaceRoute: () => ({
     replaceRoute: async (name, params = {}) => {
       if (mockRouter.currentRoute.name !== name) {
         return mockRouter.replace({ name, params });
@@ -17,13 +17,13 @@ vi.mock('../../composables/useRouterHelper', () => ({
   }),
 }));
 
-describe('useRouterHelper', () => {
+describe('useReplaceRoute', () => {
   let routerHelper;
 
   beforeEach(() => {
     vi.resetAllMocks();
     mockRouter.currentRoute = { name: 'initialRoute' };
-    routerHelper = useRouterHelper();
+    routerHelper = useReplaceRoute();
   });
 
   describe('replaceRoute', () => {

app/javascript/widget/views/Home.vue

@@ -5,7 +5,7 @@ import ArticleCardSkeletonLoader from 'widget/components/ArticleCardSkeletonLoad
 
 import { mapGetters } from 'vuex';
 import darkModeMixin from 'widget/mixins/darkModeMixin';
-import { useRouterHelper } from 'widget/composables/useRouterHelper';
+import { useReplaceRoute } from 'widget/composables/useReplaceRoute';
 import configMixin from 'widget/mixins/configMixin';
 
 export default {
@@ -16,10 +16,6 @@ export default {
     ArticleCardSkeletonLoader,
   },
   mixins: [configMixin, darkModeMixin],
-  setup() {
-    const { replaceRoute } = useRouterHelper();
-    return { replaceRoute };
-  },
   computed: {
     ...mapGetters({
       availableAgents: 'agent/availableAgents',
@@ -67,9 +63,9 @@ export default {
   methods: {
     startConversation() {
       if (this.preChatFormEnabled && !this.conversationSize) {
-        return this.replaceRoute('prechat-form');
+        return useReplaceRoute('prechat-form');
       }
-      return this.replaceRoute('messages');
+      return useReplaceRoute('messages');
     },
     openArticleInArticleViewer(link) {
       let linkToOpen = `${link}?show_plain_layout=true`;

app/javascript/widget/views/PreChatForm.vue

@@ -1,7 +1,7 @@
 <script>
 import PreChatForm from '../components/PreChat/Form.vue';
 import configMixin from '../mixins/configMixin';
-import { useRouterHelper } from 'widget/composables/useRouterHelper';
+import { useReplaceRoute } from 'widget/composables/useReplaceRoute';
 import { isEmptyObject } from 'widget/helpers/utils';
 import { ON_CONVERSATION_CREATED } from '../constants/widgetBusEvents';
 
@@ -10,14 +10,10 @@ export default {
     PreChatForm,
   },
   mixins: [configMixin],
-  setup() {
-    const { replaceRoute } = useRouterHelper();
-    return { replaceRoute };
-  },
   mounted() {
     this.$emitter.on(ON_CONVERSATION_CREATED, () => {
       // Redirect to messages page after conversation is created
-      this.replaceRoute('messages');
+      useReplaceRoute('messages');
     });
   },
   methods: {