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'));