Implemented: dxp-language switcher

package.json

@@ -18,7 +18,7 @@
     "@casl/ability": "^6.0.0",
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/apps-theme": "^1.1.0",
-    "@hotwax/dxp-components": "^1.3.4",
+    "@hotwax/dxp-components": "file:../dxp-components",
     "@hotwax/oms-api": "^1.10.0",
     "@ionic/core": "6.7.5",
     "@ionic/vue": "6.7.5",

src/main.ts

@@ -26,7 +26,7 @@ import '@ionic/vue/css/display.css';
 import './theme/variables.css';
 import "@hotwax/apps-theme";
 
-import i18n from './i18n'
+import i18n, { translate } from './i18n'
 import store from './store'
 import permissionPlugin from '@/authorization';
 import permissionRules from '@/authorization/Rules';
@@ -50,7 +50,8 @@ const app = createApp(App)
     login,
     logout,
     loader,
-    appLoginUrl: process.env.VUE_APP_LOGIN_URL as string
+    appLoginUrl: process.env.VUE_APP_LOGIN_URL as string,
+    translate
   });
 
 // Filters are removed in Vue 3 and global filter introduced https://v3.vuejs.org/guide/migration/filters.html#global-filters

src/views/Settings.vue

@@ -133,22 +133,7 @@
           </ion-item>
         </ion-card>
 
-        <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="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>
+        <LanguageSwitcher />
 
         <ion-card>
           <ion-card-header>
@@ -242,7 +227,6 @@ export default defineComponent({
       baseURL: process.env.VUE_APP_BASE_URL,
       appInfo: (process.env.VUE_APP_VERSION_INFO ? JSON.parse(process.env.VUE_APP_VERSION_INFO) : {}) as any,
       appVersion: "",
-      locales: process.env.VUE_APP_LOCALES ? JSON.parse(process.env.VUE_APP_LOCALES) : {"en": "English"},
       rerouteFulfillmentConfig: {
         // TODO Remove fromDate and directly store values making it loosely coupled with OMS
         allowDeliveryMethodUpdate: {},
@@ -263,8 +247,7 @@ export default defineComponent({
       instanceUrl: 'user/getInstanceUrl',
       configurePicker: "user/configurePicker",
       showShippingOrders: 'user/showShippingOrders',
-      showPackingSlip: 'user/showPackingSlip',
-      locale: 'user/getLocale'
+      showPackingSlip: 'user/showPackingSlip'
     })
   },
   mounted() {
@@ -319,9 +302,6 @@ export default defineComponent({
     getDateTime(time: any) {
       return DateTime.fromMillis(time).toLocaleString(DateTime.DATETIME_MED);
     },
-    setLocale(locale: string) {
-      this.store.dispatch('user/setLocale',locale)
-    },
     async getAvailableShipmentMethods () {
       this.availableShipmentMethods = [];
       try {

vue.config.js

@@ -1,5 +1,14 @@
 require("@hotwax/app-version-info")
+const path = require('path');
+
 module.exports = {
+  configureWebpack: {
+    resolve: {
+      alias: {
+        vue: path.resolve('./node_modules/vue')
+      }
+    }
+  },
   pluginOptions: {
     i18n: {
       locale: 'en',
@@ -12,5 +21,6 @@ module.exports = {
       enableInSFC: true
     }
   },
-  runtimeCompiler: true
+  runtimeCompiler: true,
+  transpileDependencies: ['@hotwax/dxp-components']
 }