From f9bd44791232e1d919387daefc0928e680b067bb Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Fri, 11 Dec 2020 22:38:36 -0800
Subject: [PATCH] chore: Upgrade vue-i18n to 8.x (#1383)

Co-authored-by: Pranav Raj S <pranav@thoughtwoot.com>
---
 .../api/v1/widget/base_controller.rb          |  1 -
 app/javascript/dashboard/App.vue              |  3 +--
 .../layout/specs/AvailabilityStatus.spec.js   |  7 ++++++-
 .../conversation/specs/MoreActions.spec.js    |  9 +++++++--
 .../dashboard/settings/account/Index.vue      |  9 ++++-----
 app/javascript/packs/application.js           |  7 ++++---
 app/javascript/packs/widget.js                |  7 ++++---
 app/javascript/widget/App.vue                 |  3 +--
 .../widget/api/specs/endPoints.spec.js        | 19 ++++++++++++++++---
 .../widget/components/HeaderActions.vue       |  3 +--
 .../helpers/specs/urlParamsHelper.spec.js     | 17 +++++++++++------
 .../widget/helpers/urlParamsHelper.js         |  4 +---
 .../specs/conversation/actions.spec.js        | 14 ++++++++++++++
 package.json                                  |  2 +-
 yarn.lock                                     |  8 ++++----
 15 files changed, 75 insertions(+), 38 deletions(-)

diff --git a/app/controllers/api/v1/widget/base_controller.rb b/app/controllers/api/v1/widget/base_controller.rb
index c3da5ff6d..0227bd0ba 100644
--- a/app/controllers/api/v1/widget/base_controller.rb
+++ b/app/controllers/api/v1/widget/base_controller.rb
@@ -3,7 +3,6 @@ class Api::V1::Widget::BaseController < ApplicationController
 
   before_action :set_web_widget
   before_action :set_contact
-  around_action :switch_locale_using_account_locale
 
   private
 
diff --git a/app/javascript/dashboard/App.vue b/app/javascript/dashboard/App.vue
index e37d5864e..2d196af04 100644
--- a/app/javascript/dashboard/App.vue
+++ b/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() {
diff --git a/app/javascript/dashboard/components/layout/specs/AvailabilityStatus.spec.js b/app/javascript/dashboard/components/layout/specs/AvailabilityStatus.spec.js
index ede05392c..9f631dd09 100644
--- a/app/javascript/dashboard/components/layout/specs/AvailabilityStatus.spec.js
+++ b/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,
     });
   });
 
diff --git a/app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js b/app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js
index cb2e279c9..699d7c9ef 100644
--- a/app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js
+++ b/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 () => {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
index d683bddc7..66d34bd67 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
+++ b/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'));
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 377e62583..70a4b34c8 100644
--- a/app/javascript/packs/application.js
+++ b/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');
diff --git a/app/javascript/packs/widget.js b/app/javascript/packs/widget.js
index 2bfdd7c52..e4aa8cfd1 100644
--- a/app/javascript/packs/widget.js
+++ b/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');
 
diff --git a/app/javascript/widget/App.vue b/app/javascript/widget/App.vue
index e5911b136..395f25662 100755
--- a/app/javascript/widget/App.vue
+++ b/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) {
diff --git a/app/javascript/widget/api/specs/endPoints.spec.js b/app/javascript/widget/api/specs/endPoints.spec.js
index 396df2c71..5dc59e1e3 100644
--- a/app/javascript/widget/api/specs/endPoints.spec.js
+++ b/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();
   });
 });
diff --git a/app/javascript/widget/components/HeaderActions.vue b/app/javascript/widget/components/HeaderActions.vue
index d84309075..67695f9c0 100644
--- a/app/javascript/widget/components/HeaderActions.vue
+++ b/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(
diff --git a/app/javascript/widget/helpers/specs/urlParamsHelper.spec.js b/app/javascript/widget/helpers/specs/urlParamsHelper.spec.js
index 4e217b1b2..826c35e99 100644
--- a/app/javascript/widget/helpers/specs/urlParamsHelper.spec.js
+++ b/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();
   });
 });
 
diff --git a/app/javascript/widget/helpers/urlParamsHelper.js b/app/javascript/widget/helpers/urlParamsHelper.js
index e44a6ca6b..ad7f896d1 100644
--- a/app/javascript/widget/helpers/urlParamsHelper.js
+++ b/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 {
diff --git a/app/javascript/widget/store/modules/specs/conversation/actions.spec.js b/app/javascript/widget/store/modules/specs/conversation/actions.spec.js
index fa413f086..5a5c1e16a 100644
--- a/app/javascript/widget/store/modules/specs/conversation/actions.spec.js
+++ b/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',
diff --git a/package.json b/package.json
index e0c9a1008..c586a0421 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "vue-chartjs": "^3.4.2",
     "vue-clickaway": "~2.1.0",
     "vue-color": "^2.7.1",
-    "vue-i18n": "~5.0.3",
+    "vue-i18n": "^8.22.1",
     "vue-loader": "^15.7.0",
     "vue-multiselect": "~2.1.6",
     "vue-router": "~2.2.0",
diff --git a/yarn.lock b/yarn.lock
index c13b18fab..1df00f0c6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11049,10 +11049,10 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
-vue-i18n@~5.0.3:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-5.0.3.tgz#b6d96cc832604237e6139de471e0d4c820aedbed"
-  integrity sha1-ttlsyDJgQjfmE53kceDUyCCu2+0=
+vue-i18n@^8.22.1:
+  version "8.22.1"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.22.1.tgz#b9dd098a17e1f5adb91bdf9611f0385310da7cb1"
+  integrity sha512-JNgiEJ5a8YPfk5y2lKyfOAGLmkpAVfhaUi+T4wGpSppRYZ3XSyawSDDketY5KV2CsAiBLAGEIO6jO+0l2hQubg==
 
 vue-jest@^3.0.5:
   version "3.0.5"