Implemented: centralized language switcher (#141)

src/components/LanguageSwitcher.vue

@@ -0,0 +1,32 @@
+<template>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>
+        {{ translate("Language") }}
+      </ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      {{ translate('Select your preferred language.') }}
+    </ion-card-content>
+    <ion-item lines="none">
+      <ion-label>{{ translate("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>
+  </ion-card>
+</template>
+
+<script setup lang="ts">
+import { IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/vue';
+import { computed } from "vue";
+import { appContext, translate } from "../index";
+declare var process: any;
+
+const appState = appContext.config.globalProperties.$store
+const locales = process.env.VUE_APP_LOCALES ? JSON.parse(process.env.VUE_APP_LOCALES) : { "en": "English" };
+const locale = computed(() => appState.getters['user/getLocale']);
+const setLocale = (locale: string) => {
+  appState.dispatch('user/setLocale', locale);
+}
+</script>

src/components/index.ts

@@ -14,5 +14,8 @@ import '@ionic/vue/css/text-transformation.css';
 import '@ionic/vue/css/flex-utils.css';
 import '@ionic/vue/css/display.css';
 
-export { default as ProductIdentifier } from "./ProductIdentifier.vue";
+import LanguageSwitcher from './LanguageSwitcher.vue';
+import ProductIdentifier from './ProductIdentifier.vue';
+
+export { LanguageSwitcher, ProductIdentifier };
 

src/index.ts

@@ -8,13 +8,14 @@ import { goToOms } from "./utils";
 import { initialiseFirebaseApp } from "./utils/firebase"
 
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
-import { ProductIdentifier } from "./components";
+import { LanguageSwitcher, ProductIdentifier } from "./components";
 
 // 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 translate: any;
 let loginContext = {} as any
 let shopifyImgContext = {} as any
 let appContext = {} as any
@@ -29,10 +30,13 @@ export let dxpComponents = {
     // registering pinia in the app
     app.use(pinia);
 
+    app.component('LanguageSwitcher', LanguageSwitcher)
     app.component('Login', Login)
     app.component('ShopifyImg', ShopifyImg)
     app.component('ProductIdentifier', ProductIdentifier)
 
+    translate = options.translate;
+
     loginContext.login = options.login
     loginContext.logout = options.logout
     loginContext.loader = options.loader
@@ -62,6 +66,7 @@ export {
   noitificationContext,
   ShopifyImg,
   shopifyImgContext,
+  translate,
   useProductIdentificationStore,
   useAuthStore,
   ProductIdentifier