Implemented language switcher (#30yqppq)

.env.example

@@ -6,4 +6,5 @@ VUE_APP_UNFILLABLE_REASONS=[{"id": "", "label": "No reason"}, {"id": "NOT_IN_STO
 VUE_APP_PRDT_IDENT_TYPE_ID=SHOPIFY_PROD_SKU
 VUE_APP_ORD_IDENT_TYPE_ID=SHOPIFY_ORD_NAME
 VUE_APP_BASE_URL=
+VUE_APP_LOCALES={"en": "English", "ja": "日本語"}
 VUE_APP_ALIAS=

src/App.vue

@@ -9,7 +9,7 @@ import { IonApp, IonRouterOutlet } from '@ionic/vue';
 import { defineComponent } from 'vue';
 import { loadingController } from '@ionic/vue';
 import emitter from "@/event-bus"
-
+import { mapGetters } from 'vuex';
 
 export default defineComponent({
   name: 'App',
@@ -42,6 +42,11 @@ export default defineComponent({
         this.loader = null as any;
       }
     }
+  }, 
+  computed: {
+    ...mapGetters({
+      locale: 'user/getLocale'
+    })
   },
   async mounted() {
     // creating the loader on mounted as loadingController is taking too much time to create initially
@@ -53,6 +58,7 @@ export default defineComponent({
       });
     emitter.on('presentLoader', this.presentLoader);
     emitter.on('dismissLoader', this.dismissLoader);
+    this.$i18n.locale = this.locale;
   },
   unmounted() {
     emitter.off('presentLoader', this.presentLoader);

src/locales/en.json

@@ -4,6 +4,7 @@
   "Catalog": "Catalog",
   "Cancel": "Cancel",
   "canceled from the order": "canceled from the order",
+  "Choose language": "Choose language",
   "City": "City",
   "Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
   "Color": "Color",

src/locales/ja.json

@@ -4,6 +4,7 @@
   "Catalog": "カタログ",
   "Cancel": "キャンセル",
   "canceled from the order": "オーダーからキャンセルされました",
+  "Choose language": "言語を選択",
   "City": "街",
   "Click the backdrop to dismiss.": "背景をクリックして閉じます。",
   "Color": "色",

src/store/modules/user/UserState.ts

@@ -4,4 +4,5 @@ export default interface UserState {
     currentFacility: object;
     instanceUrl: string;
     preference: any;
+    locale: string;
 }

src/store/modules/user/actions.ts

@@ -4,7 +4,7 @@ import RootState from '@/store/RootState'
 import UserState from './UserState'
 import * as types from './mutation-types'
 import { hasError, showToast } from '@/utils'
-import { translate } from '@/i18n'
+import i18n, { translate } from '@/i18n'
 import moment from 'moment';
 import emitter from '@/event-bus'
 import "moment-timezone";
@@ -110,6 +110,11 @@ const actions: ActionTree<UserState, RootState> = {
       'userPrefTypeId': 'BOPIS_PREFERENCE',
       'userPrefValue': JSON.stringify(state.preference)
     });
-  }
+  },
+
+  setLocale({ commit }, payload) {
+    i18n.global.locale = payload
+    commit(types.USER_LOCALE_UPDATED, payload)
+  },
 }
 export default actions;

src/store/modules/user/getters.ts

@@ -26,6 +26,9 @@ const getters: GetterTree <UserState, RootState> = {
     },
     showPackingSlip (state) {
         return state.preference.showPackingSlip;
+    },
+    getLocale (state) {
+        return state.locale;
     }
 }
 export default getters;

src/store/modules/user/index.ts

@@ -15,7 +15,8 @@ const userModule: Module<UserState, RootState> = {
       preference: {
         showShippingOrders: true,
         showPackingSlip: false
-      }
+      },
+      locale: 'en',
     },
     getters,
     actions,

src/store/modules/user/mutation-types.ts

@@ -4,4 +4,5 @@ export const USER_END_SESSION = SN_USER + '/END_SESSION'
 export const USER_INFO_UPDATED = SN_USER + '/INFO_UPDATED'
 export const USER_CURRENT_FACILITY_UPDATED = SN_USER + '/CURRENT_FACILITY_UPDATED'
 export const USER_INSTANCE_URL_UPDATED = SN_USER + '/INSTANCE_URL_UPDATED' 
-export const USER_PREFERENCE_UPDATED = SN_USER + '/PREFERENCE_UPDATED'
+export const USER_PREFERENCE_UPDATED = SN_USER + '/PREFERENCE_UPDATED'
+export const USER_LOCALE_UPDATED = SN_USER + '/LOCALE_UPDATED'

src/store/modules/user/mutations.ts

@@ -22,6 +22,9 @@ const mutations: MutationTree <UserState> = {
     },
     [types.USER_PREFERENCE_UPDATED] (state, payload) {
         state.preference = {...state.preference, ...payload};
+    },
+    [types.USER_LOCALE_UPDATED] (state, payload) {
+        state.locale = payload;
     }
 }
 export default mutations;

src/views/Settings.vue

@@ -34,6 +34,14 @@
           <ion-label>{{ $t("OMS") }}</ion-label>
           <p slot="end">{{ baseURL ? baseURL : instanceUrl }}</p>
         </ion-item>
+        <!-- Language Switch -->
+        <ion-item>
+          <ion-icon :icon="languageOutline" slot="start"/>
+          <ion-label>{{$t("Choose language")}}</ion-label>
+          <ion-select interface="popover" :value="locale" @ionChange="setLocale($event.detail.value)">
+            <ion-select-option v-for="locale in Object.keys(locales)" :key="locale" :value="locale" >{{ locales[locale] }}</ion-select-option>
+          </ion-select>
+        </ion-item>
         <!-- Profile of user logged in -->
         <ion-item>
           <ion-icon :icon="personCircleOutline" slot="start" />
@@ -48,7 +56,7 @@
 <script lang="ts">
 import { IonButton, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonPage, IonSelect, IonSelectOption, IonTitle, IonToggle , IonToolbar } from '@ionic/vue';
 import { defineComponent } from 'vue';
-import { ellipsisVertical, personCircleOutline, sendOutline , storefrontOutline, codeWorkingOutline } from 'ionicons/icons'
+import { ellipsisVertical, personCircleOutline, sendOutline , storefrontOutline, codeWorkingOutline, languageOutline } from 'ionicons/icons'
 import { mapGetters, useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 
@@ -71,7 +79,8 @@ export default defineComponent({
   },
   data(){
     return {
-      baseURL: process.env.VUE_APP_BASE_URL
+      baseURL: process.env.VUE_APP_BASE_URL,
+      locales: process.env.VUE_APP_LOCALES ? JSON.parse(process.env.VUE_APP_LOCALES) : {"en": "English"},
     }
   },
   computed: {
@@ -80,7 +89,8 @@ export default defineComponent({
       currentFacility: 'user/getCurrentFacility',
       instanceUrl: 'user/getInstanceUrl',
       showShippingOrders: 'user/showShippingOrders',
-      showPackingSlip: 'user/showPackingSlip'
+      showPackingSlip: 'user/showPackingSlip',
+      locale: 'user/getLocale'
     })
   },
   methods: {
@@ -100,6 +110,9 @@ export default defineComponent({
     },
     setShowPackingSlipPreference (ev: any){
       this.store.dispatch('user/setUserPreference', { showPackingSlip: ev.detail.checked })
+    },
+    setLocale(locale: string) {
+      this.store.dispatch('user/setLocale',locale)
     }
   },
   setup () {
@@ -113,7 +126,8 @@ export default defineComponent({
       sendOutline,
       store,
       storefrontOutline,
-      codeWorkingOutline
+      codeWorkingOutline,
+      languageOutline
     }
   }
 });