Merge branch 'main' of https://github.com/hotwax/dxp-components into …

…dxp-component/#140-centralizedoms

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hotwax/dxp-components",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "",
   "type": "module",
   "main": "lib/index.cjs",
@@ -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

@@ -14,7 +14,6 @@ import '@ionic/vue/css/text-transformation.css';
 import '@ionic/vue/css/flex-utils.css';
 import '@ionic/vue/css/display.css';
 
-import OmsInstanceNavigator from './OmsInstanceNavigator.vue';
-import ProductIdentifier from './ProductIdentifier.vue';
-
-export { OmsInstanceNavigator, ProductIdentifier };
+export { default as ProductIdentifier } from "./ProductIdentifier.vue";
+export { default as LanguageSwitcher } from './LanguageSwitcher.vue';
+export { default as OmsInstanceNavigator } from './OmsInstanceNavigator.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, OmsInstanceNavigator, 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 { OmsInstanceNavigator, 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('OmsInstanceNavigator', OmsInstanceNavigator)
     app.component('ProductIdentifier', ProductIdentifier)
@@ -50,12 +64,17 @@ 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 {
   appContext,
   goToOms,
+  i18n,
   initialiseFirebaseApp,
   Login,
   loginContext,
@@ -65,6 +84,8 @@ export {
   productIdentificationContext,
   ShopifyImg,
   shopifyImgContext,
-  useProductIdentificationStore,
+  translate,
   useAuthStore,
+  useProductIdentificationStore,
+  useUserStore
 }

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
+    }
+  }
+})