chore: Upgrade vue-i18n to 8.x (#1383)

Co-authored-by: Pranav Raj S <pranav@thoughtwoot.com>

app/javascript/widget/App.vue

@@ -16,7 +16,6 @@
 </template>
 
 <script>
-import Vue from 'vue';
 import { mapGetters, mapActions } from 'vuex';
 import { setHeader } from 'widget/helpers/axios';
 import { IFrameHelper } from 'widget/helpers/utils';
@@ -91,7 +90,7 @@ export default {
     setLocale(locale) {
       const { enabledLanguages } = window.chatwootWebChannel;
       if (enabledLanguages.some(lang => lang.iso_639_1_code === locale)) {
-        Vue.config.lang = locale;
+        this.$root.$i18n.locale = locale;
       }
     },
     setPosition(position) {

app/javascript/widget/api/specs/endPoints.spec.js

@@ -1,14 +1,26 @@
 import endPoints from '../endPoints';
 
-jest.mock('vue', () => ({ config: { lang: 'ar' } }));
-
 describe('#sendMessage', () => {
   it('returns correct payload', () => {
     const spy = jest.spyOn(global, 'Date').mockImplementation(() => ({
       toString: () => 'mock date',
     }));
+    const windowSpy = jest.spyOn(window, 'window', 'get');
+    windowSpy.mockImplementation(() => ({
+      WOOT_WIDGET: {
+        $root: {
+          $i18n: {
+            locale: 'ar',
+          },
+        },
+      },
+      location: {
+        search: '?param=1',
+      },
+    }));
+
     expect(endPoints.sendMessage('hello')).toEqual({
-      url: `/api/v1/widget/messages?locale=ar`,
+      url: `/api/v1/widget/messages?param=1&locale=ar`,
       params: {
         message: {
           content: 'hello',
@@ -17,6 +29,7 @@ describe('#sendMessage', () => {
         },
       },
     });
+    windowSpy.mockRestore();
     spy.mockRestore();
   });
 });

app/javascript/widget/components/HeaderActions.vue

@@ -15,7 +15,6 @@
 <script>
 import { IFrameHelper } from 'widget/helpers/utils';
 import { buildPopoutURL } from '../helpers/urlParamsHelper';
-import Vue from 'vue';
 
 export default {
   name: 'HeaderActions',
@@ -42,7 +41,7 @@ export default {
       const popoutWindowURL = buildPopoutURL({
         origin,
         websiteToken,
-        locale: Vue.config.lang,
+        locale: this.$root.$i18n.locale,
         conversationCookie: authToken,
       });
       const popoutWindow = window.open(

app/javascript/widget/helpers/specs/urlParamsHelper.spec.js

@@ -4,18 +4,23 @@ import {
   buildPopoutURL,
 } from '../urlParamsHelper';
 
-jest.mock('vue', () => ({
-  config: {
-    lang: 'el',
-  },
-}));
-
 describe('#buildSearchParamsWithLocale', () => {
   it('returns correct search params', () => {
+    let windowSpy = jest.spyOn(window, 'window', 'get');
+    windowSpy.mockImplementation(() => ({
+      WOOT_WIDGET: {
+        $root: {
+          $i18n: {
+            locale: 'el',
+          },
+        },
+      },
+    }));
     expect(buildSearchParamsWithLocale('?test=1234')).toEqual(
       '?test=1234&locale=el'
     );
     expect(buildSearchParamsWithLocale('')).toEqual('?locale=el');
+    windowSpy.mockRestore();
   });
 });
 

app/javascript/widget/helpers/urlParamsHelper.js

@@ -1,7 +1,5 @@
-import Vue from 'vue';
-
 export const buildSearchParamsWithLocale = search => {
-  const locale = Vue.config.lang;
+  const locale = window.WOOT_WIDGET.$root.$i18n.locale;
   if (search) {
     search = `${search}&locale=${locale}`;
   } else {

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

@@ -49,8 +49,22 @@ describe('#actions', () => {
       const mockDate = new Date(1466424490000);
       getUuid.mockImplementationOnce(() => '1111');
       const spy = jest.spyOn(global, 'Date').mockImplementation(() => mockDate);
+      const windowSpy = jest.spyOn(window, 'window', 'get');
+      windowSpy.mockImplementation(() => ({
+        WOOT_WIDGET: {
+          $root: {
+            $i18n: {
+              locale: 'ar',
+            },
+          },
+        },
+        location: {
+          search: '?param=1',
+        },
+      }));
       actions.sendMessage({ commit }, { content: 'hello' });
       spy.mockRestore();
+      windowSpy.mockRestore();
       expect(commit).toBeCalledWith('pushMessageToConversation', {
         id: '1111',
         content: 'hello',