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

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

app/javascript/dashboard/App.vue

@@ -8,7 +8,6 @@
 </template>
 
 <script>
-import Vue from 'vue';
 import { mapGetters } from 'vuex';
 import WootSnackbarBox from './components/SnackbarContainer';
 import { accountIdFromPathname } from './helper/URLHelper';
@@ -34,7 +33,7 @@ export default {
 
   methods: {
     setLocale(locale) {
-      Vue.config.lang = locale;
+      this.$root.$i18n.locale = locale;
     },
 
     async initializeAccount() {

app/javascript/dashboard/components/layout/specs/AvailabilityStatus.spec.js

@@ -8,7 +8,11 @@ import i18n from 'dashboard/i18n';
 const localVue = createLocalVue();
 localVue.use(Vuex);
 localVue.use(VueI18n);
-localVue.locale('en', i18n.en);
+
+const i18nConfig = new VueI18n({
+  locale: 'en',
+  messages: i18n,
+});
 
 describe('AvailabilityStatus', () => {
   const currentUser = { availability_status: 'online' };
@@ -40,6 +44,7 @@ describe('AvailabilityStatus', () => {
     availabilityStatus = mount(AvailabilityStatus, {
       store,
       localVue,
+      i18n: i18nConfig,
     });
   });
 

app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js

@@ -10,9 +10,14 @@ import MoreActions from '../MoreActions';
 const localVue = createLocalVue();
 localVue.use(Vuex);
 localVue.use(VueI18n);
-localVue.locale('en', i18n.en);
+
 localVue.component('woot-button', Button);
 
+const i18nConfig = new VueI18n({
+  locale: 'en',
+  messages: i18n,
+});
+
 describe('MoveActions', () => {
   let currentChat = { id: 8, muted: false };
   let state = null;
@@ -55,7 +60,7 @@ describe('MoveActions', () => {
       getters,
     });
 
-    moreActions = mount(MoreActions, { store, localVue });
+    moreActions = mount(MoreActions, { store, localVue, i18n: i18nConfig });
   });
 
   it('opens the menu when user clicks "more"', async () => {

app/javascript/dashboard/routes/dashboard/settings/account/Index.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="columns profile--settings ">
+  <div class="columns profile--settings">
     <form v-if="!uiFlags.isFetchingItem" @submit.prevent="updateAccount">
       <div class="small-12 row profile--settings--row">
-        <div class="columns small-3 ">
+        <div class="columns small-3">
           <h4 class="block-title">
             {{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.TITLE') }}
           </h4>
@@ -95,7 +95,6 @@
 </template>
 
 <script>
-import Vue from 'vue';
 import { required, minValue } from 'vuelidate/lib/validators';
 import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
@@ -170,7 +169,7 @@ export default {
           auto_resolve_duration,
         } = this.getAccount(this.accountId);
 
-        Vue.config.lang = locale;
+        this.$root.$i18n.locale = locale;
         this.name = name;
         this.locale = locale;
         this.id = id;
@@ -198,7 +197,7 @@ export default {
           support_email: this.supportEmail,
           auto_resolve_duration: this.autoResolveDuration,
         });
-        Vue.config.lang = this.locale;
+        this.$root.$i18n.locale = this.locale;
         this.showAlert(this.$t('GENERAL_SETTINGS.UPDATE.SUCCESS'));
       } catch (error) {
         this.showAlert(this.$t('GENERAL_SETTINGS.UPDATE.ERROR'));

app/javascript/packs/application.js

@@ -42,11 +42,11 @@ Vue.component('multiselect', Multiselect);
 Vue.component('woot-switch', WootSwitch);
 Vue.component('woot-wizard', WootWizard);
 
-Object.keys(i18n).forEach(lang => {
-  Vue.locale(lang, i18n[lang]);
+const i18nConfig = new VueI18n({
+  locale: 'en',
+  messages: i18n,
 });
 
-Vue.config.lang = 'en';
 sync(store, router);
 // load common helpers into js
 commonHelpers();
@@ -58,6 +58,7 @@ window.onload = () => {
   window.WOOT = new Vue({
     router,
     store,
+    i18n: i18nConfig,
     components: { App },
     template: '<App/>',
   }).$mount('#app');

app/javascript/packs/widget.js

@@ -9,9 +9,9 @@ import i18n from '../widget/i18n';
 Vue.use(VueI18n);
 Vue.use(Vuelidate);
 
-Vue.config.lang = 'en';
-Object.keys(i18n).forEach(lang => {
-  Vue.locale(lang, i18n[lang]);
+const i18nConfig = new VueI18n({
+  locale: 'en',
+  messages: i18n,
 });
 
 // Event Bus
@@ -22,6 +22,7 @@ Vue.config.productionTip = false;
 window.onload = () => {
   window.WOOT_WIDGET = new Vue({
     store,
+    i18n: i18nConfig,
     render: h => h(App),
   }).$mount('#app');
 

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',