Merge branch 'develop' into chore-replace-router-mixin

This reverts commit a0153daca4.

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 routerMixin from './mixins/routerMixin';
+import useReplaceRoute from 'widget/composables/useReplaceRoute';
 import {
   getExtraSpaceToScroll,
   loadedEventConfig,
@@ -27,10 +27,11 @@ export default {
   components: {
     Spinner,
   },
-  mixins: [availabilityMixin, configMixin, routerMixin],
+  mixins: [availabilityMixin, configMixin],
   setup() {
     const { prefersDarkMode } = useDarkMode();
-    return { prefersDarkMode };
+    const replaceRoute = useReplaceRoute();
+    return { replaceRoute, prefersDarkMode };
   },
   data() {
     return {

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 routerMixin from 'widget/mixins/routerMixin';
+import useReplaceRoute from 'widget/composables/useReplaceRoute';
 import { IFrameHelper } from '../helpers/utils';
 import { CHATWOOT_ON_START_CONVERSATION } from '../constants/sdkEvents';
 
@@ -16,7 +16,10 @@ export default {
     CustomButton,
     FooterReplyTo,
   },
-  mixins: [routerMixin],
+  setup() {
+    const replaceRoute = useReplaceRoute();
+    return { replaceRoute };
+  },
   data() {
     return {
       inReplyTo: null,

app/javascript/widget/components/ChatHeader.vue

@@ -3,6 +3,8 @@ 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 useReplaceRoute from 'widget/composables/useReplaceRoute';
+import darkMixin from 'widget/mixins/darkModeMixin.js';
 import routerMixin from 'widget/mixins/routerMixin';
 import { useDarkMode } from 'widget/composables/useDarkMode';
 
@@ -12,7 +14,7 @@ export default {
     FluentIcon,
     HeaderActions,
   },
-  mixins: [nextAvailabilityTime, availabilityMixin, routerMixin],
+  mixins: [nextAvailabilityTime, availabilityMixin],
   props: {
     avatarUrl: {
       type: String,
@@ -36,8 +38,9 @@ export default {
     },
   },
   setup() {
+    const replaceRoute = useReplaceRoute();
     const { getThemeClass } = useDarkMode();
-    return { getThemeClass };
+    return { getThemeClass, replaceRoute };
   },
   computed: {
     isOnline() {

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

@@ -5,17 +5,20 @@ import { mapGetters } from 'vuex';
 import { getContrastingTextColor } from '@chatwoot/utils';
 import { isEmptyObject } from 'widget/helpers/utils';
 import { getRegexp } from 'shared/helpers/Validators';
+import useReplaceRoute from 'widget/composables/useReplaceRoute';
+import darkModeMixin from 'widget/mixins/darkModeMixin';
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import routerMixin from 'widget/mixins/routerMixin';
 import { useDarkMode } from 'widget/composables/useDarkMode';
 import configMixin from 'widget/mixins/configMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 
 export default {
   components: {
     CustomButton,
     Spinner,
   },
-  mixins: [routerMixin, configMixin],
+  mixins: [configMixin],
   props: {
     options: {
       type: Object,
@@ -24,8 +27,9 @@ export default {
   },
   setup() {
     const { formatMessage } = useMessageFormatter();
+    const replaceRoute = useReplaceRoute();
     const { getThemeClass } = useDarkMode();
-    return { formatMessage, getThemeClass };
+    return { formatMessage, getThemeClass, replaceRoute };
   },
   data() {
     return {

app/javascript/widget/composables/specs/useReplaceRoute.spec.js

@@ -0,0 +1,51 @@
+import { describe, it, expect, vi } from 'vitest';
+import { useReplaceRoute } from '../useReplaceRoute';
+
+vi.mock('dashboard/composables/route', () => ({
+  useRouter: vi.fn(),
+  useRoute: vi.fn(),
+}));
+
+import { useRouter, useRoute } from 'dashboard/composables/route';
+
+describe('useReplaceRoute', () => {
+  const mockReplace = vi.fn();
+  const mockRouter = { replace: mockReplace };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    useRouter.mockReturnValue(mockRouter);
+  });
+
+  it('should replace route when current route is different', () => {
+    useRoute.mockReturnValue({ name: 'currentRoute' });
+    const replaceRoute = useReplaceRoute();
+
+    replaceRoute('newRoute', { id: 1 });
+
+    expect(mockReplace).toHaveBeenCalledWith({
+      name: 'newRoute',
+      params: { id: 1 },
+    });
+  });
+
+  it('should not replace route when current route is the same', () => {
+    useRoute.mockReturnValue({ name: 'sameRoute' });
+    const replaceRoute = useReplaceRoute();
+
+    const result = replaceRoute('sameRoute');
+
+    expect(mockReplace).not.toHaveBeenCalled();
+    expect(result).toBeUndefined();
+  });
+
+  it('should return the result of router.replace when replacing route', () => {
+    useRoute.mockReturnValue({ name: 'currentRoute' });
+    mockReplace.mockReturnValue('replacementResult');
+    const replaceRoute = useReplaceRoute();
+
+    const result = replaceRoute('newRoute');
+
+    expect(result).toBe('replacementResult');
+  });
+});

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 {Function} A function that replaces the route when called.
+ */
+export const useReplaceRoute = () => {
+  const router = useRouter();
+  const route = useRoute();
+
+  return (name, params = {}) => {
+    if (route.name !== name) {
+      return router.replace({ name, params });
+    }
+    return undefined;
+  };
+};
+
+export default useReplaceRoute;

app/javascript/widget/mixins/routerMixin.js

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

app/javascript/widget/views/Home.vue

@@ -4,6 +4,8 @@ import ArticleHero from 'widget/components/ArticleHero.vue';
 import ArticleCardSkeletonLoader from 'widget/components/ArticleCardSkeletonLoader.vue';
 
 import { mapGetters } from 'vuex';
+import darkModeMixin from 'widget/mixins/darkModeMixin';
+import useReplaceRoute from 'widget/composables/useReplaceRoute';
 import { useDarkMode } from 'widget/composables/useDarkMode';
 import routerMixin from 'widget/mixins/routerMixin';
 import configMixin from 'widget/mixins/configMixin';
@@ -15,10 +17,11 @@ export default {
     TeamAvailability,
     ArticleCardSkeletonLoader,
   },
-  mixins: [configMixin, routerMixin],
+  mixins: [configMixin],
   setup() {
+    const replaceRoute = useReplaceRoute();
     const { prefersDarkMode } = useDarkMode();
-    return { prefersDarkMode };
+    return { prefersDarkMode, replaceRoute };
   },
   computed: {
     ...mapGetters({

app/javascript/widget/views/PreChatForm.vue

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