Merge pull request #173 from ymaheshwari1/dxp-components/#141

Implemented: support to use i18n through dxp, added language switcher, and defined a store for saving the selected locale(#141)

package.json

@@ -31,7 +31,8 @@
     "luxon": "^3.3.0",
     "pinia": "2.0.36",
     "pinia-plugin-persistedstate": "^3.1.0",
-    "vue": "^3.3.4"
+    "vue": "^3.3.4",
+    "vue-i18n": "^9.2.2"
   },
   "devDependencies": {
     "@babel/types": "^7.22.11",

src/components/LanguageSwitcher.vue

@@ -0,0 +1,33 @@
+<template>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>
+        {{ $t("Language") }}
+      </ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      {{ $t('Select your preferred language.') }}
+    </ion-card-content>
+    <ion-item lines="none">
+      <ion-label>{{ $t("Choose language") }}</ion-label>
+      <ion-select interface="popover" :value="currentLocale" @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>
+  </ion-card>
+</template>
+
+<script setup lang="ts">
+import { IonCard, IonCardContent, IonCardHeader, IonItem, IonLabel, IonSelect, IonSelectOption, IonCardTitle } from '@ionic/vue';
+import { computed } from "vue";
+import { useUserStore } from '../store/user'
+
+const userStore = useUserStore();
+
+const locales = computed(() => userStore.getLocaleOptions);
+const currentLocale = computed(() => userStore.getLocale);
+
+const setLocale = (locale: any) => {
+  userStore.setLocale(locale)
+}
+</script>

src/components/index.ts

@@ -15,4 +15,4 @@ import '@ionic/vue/css/flex-utils.css';
 import '@ionic/vue/css/display.css';
 
 export { default as ProductIdentifier } from "./ProductIdentifier.vue";
-
+export { default as LanguageSwitcher } from './LanguageSwitcher.vue';

src/index.ts

@@ -1,20 +1,24 @@
+declare var process: any;
+
 import { createPinia } from "pinia";
 import { useProductIdentificationStore } from "./store/productIdentification";
 import { useAuthStore } from "./store/auth";
-
+import { LanguageSwitcher, ProductIdentifier } from "./components";
 import Login from "./components/Login";
 import ShopifyImg from "./components/ShopifyImg";
 import { goToOms } from "./utils";
 import { initialiseFirebaseApp } from "./utils/firebase"
-
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
-import { ProductIdentifier } from "./components";
+import { createI18n } from 'vue-i18n'
+import { useUserStore } from "./store/user";
 
 // TODO: handle cases when the store from app or pinia store are not available
 // creating a pinia store for the plugin
 const pinia = createPinia();
 pinia.use(piniaPluginPersistedstate)
 
+let i18n: any
+let translate: any;
 let loginContext = {} as any
 let shopifyImgContext = {} as any
 let appContext = {} as any
@@ -26,9 +30,19 @@ export let dxpComponents = {
   install(app: any, options: any) {
     appContext = app
 
+    // Creating an instance of the i18n and translate function for translating text
+    i18n = createI18n({
+      legacy: false,
+      locale: process.env.VUE_APP_I18N_LOCALE || 'en',
+      fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
+      messages: options.localeMessages
+    })
+
     // registering pinia in the app
     app.use(pinia);
+    app.use(i18n);
 
+    app.component('LanguageSwitcher', LanguageSwitcher)
     app.component('Login', Login)
     app.component('ShopifyImg', ShopifyImg)
     app.component('ProductIdentifier', ProductIdentifier)
@@ -49,20 +63,27 @@ export let dxpComponents = {
 
     loginContext.getConfig = options.getConfig
     loginContext.initialise = options.initialise
+
+    // set a default locale in the state
+    useUserStore().setLocale(i18n.global.locale);
+    translate = i18n.global.t
   }
 }
 
 export {
+  Login,
+  ShopifyImg,
   appContext,
   goToOms,
-  initialiseFirebaseApp,
-  Login,
+  i18n,
   loginContext,
   productIdentificationContext,
-  noitificationContext,
-  ShopifyImg,
   shopifyImgContext,
-  useProductIdentificationStore,
+  translate,
   useAuthStore,
+  useProductIdentificationStore,
+  useUserStore,
+  initialiseFirebaseApp,
+  noitificationContext,
   ProductIdentifier
 }

src/store/user.ts

@@ -0,0 +1,24 @@
+import { defineStore } from "pinia";
+import { i18n } from "src";
+
+declare let process: any;
+
+export const useUserStore = defineStore('user', {
+  state: () => {
+    return {
+      locale: '',
+      localeOptions: process.env.VUE_APP_LOCALES ? JSON.parse(process.env.VUE_APP_LOCALES) : { "en": "English" }
+    }
+  },
+  getters: {
+    getLocale: (state) => state.locale,
+    getLocaleOptions: (state) => state.localeOptions
+  },
+  actions: {
+    setLocale(payload: string) {
+      // update locale in state and globally
+      i18n.global.locale = payload
+      this.locale = payload
+    }
+  }
+})