Implemented: use of dxp language switcher

package.json

@@ -18,8 +18,8 @@
     "@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/oms-api": "^1.7.0",
+    "@hotwax/dxp-components": "file:../dxp-components",
+    "@hotwax/oms-api": "^1.9.0",
     "@ionic/core": "6.7.5",
     "@ionic/vue": "6.7.5",
     "@ionic/vue-router": "6.7.5",

src/App.vue

@@ -12,6 +12,7 @@ import emitter from "@/event-bus"
 import { mapGetters, useStore } from 'vuex';
 import { initialise, resetConfig } from '@/adapter'
 import { useRouter } from 'vue-router';
+import { translate } from "@hotwax/dxp-components";
 
 export default defineComponent({
   name: 'App',
@@ -31,7 +32,7 @@ export default defineComponent({
       if (!this.loader) {
         this.loader = await loadingController
           .create({
-            message: this.$t("Click the backdrop to dismiss."),
+            message: translate("Click the backdrop to dismiss."),
             translucent: true,
             backdropDismiss: true
           });
@@ -78,13 +79,13 @@ export default defineComponent({
     // creating the loader on mounted as loadingController is taking too much time to create initially
     this.loader = await loadingController
       .create({
-        message: this.$t("Click the backdrop to dismiss."),
+        message: translate("Click the backdrop to dismiss."),
         translucent: true,
         backdropDismiss: true
       });
     emitter.on('presentLoader', this.presentLoader);
     emitter.on('dismissLoader', this.dismissLoader);
-    this.$i18n.locale = this.locale;
+    // this.$i18n.locale = this.locale;
   },
   unmounted() {
     emitter.off('presentLoader', this.presentLoader);

src/adapter/index.ts

@@ -1,8 +1,9 @@
-import { api, client, hasError, initialise, resetConfig, updateInstanceUrl, updateToken } from '@hotwax/oms-api'
+import { api, client, getConfig, hasError, initialise, resetConfig, updateInstanceUrl, updateToken } from '@hotwax/oms-api'
 
 export {
   api,
   client,
+  getConfig,
   initialise,
   hasError,
   resetConfig,

src/components/ShipToCustomerModal.vue

@@ -75,6 +75,7 @@ import {
   closeOutline,
   storefrontOutline,
 } from 'ionicons/icons';
+import { translate } from "@hotwax/dxp-components";
 
 export default defineComponent({
   name: 'ShipToCustomerModal',
@@ -99,9 +100,9 @@ export default defineComponent({
     async shipToCustomer() {
       const alert = await alertController
         .create({
-          header: this.$t('Ship to customer'),
-          message: this.$t('This order will be rejected from this store with the selected reason and shipped to the address that has been inputed.Please make sure the address you have entered is correct.', {space: '<br /><br />'}),
-          buttons: [this.$t('Cancel'), this.$t('Ship')],
+          header: translate('Ship to customer'),
+          message: translate('This order will be rejected from this store with the selected reason and shipped to the address that has been inputed.Please make sure the address you have entered is correct.', {space: '<br /><br />'}),
+          buttons: [translate('Cancel'), translate('Ship')],
         });
       return alert.present();
     },

src/locales/en.json

@@ -104,7 +104,7 @@
   "Select facility": "Select facility",
   "Select time zone": "Select time zone",
   "Select your preferred language.": "Select your preferred language.",
-  "Settings": "Settings",
+  "Settings": "Settings ---- ***",
   "Select a picker": "Select a picker",
   "Send": "Send",
   "Ship": "Ship",

src/locales/index.ts

@@ -0,0 +1,5 @@
+import en from './en.json';
+import es from './es.json';
+import ja from './ja.json';
+
+export default { en, es, ja };

src/main.ts

@@ -26,20 +26,20 @@ import '@ionic/vue/css/display.css';
 import './theme/variables.css';
 import "@hotwax/apps-theme";
 
-import i18n from './i18n'
 import store from './store'
 import permissionPlugin from '@/authorization';
 import permissionRules from '@/authorization/Rules';
 import permissionActions from '@/authorization/Actions';
 import { dxpComponents } from '@hotwax/dxp-components'
 import { login, logout, loader } from './user-utils';
+import localeMessages from './locales';
+import { getConfig, initialise } from './adapter';
 
 const app = createApp(App)
   .use(IonicVue, {
     mode: 'md'
   })
   .use(router)
-  .use(i18n)
   .use(store)
   .use(permissionPlugin, {
     rules: permissionRules,
@@ -50,7 +50,10 @@ 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,
+    localeMessages,
+    getConfig,
+    initialise
   });
 
 // Filters are removed in Vue 3 and global filter introduced https://v3.vuejs.org/guide/migration/filters.html#global-filters

src/router/index.ts

@@ -9,7 +9,7 @@ import Shopify from '@/views/Shopify.vue'
 
 import { hasPermission } from '@/authorization';
 import { showToast } from '@/utils'
-import { translate } from '@/i18n'
+import { translate } from '@hotwax/dxp-components'
 
 import 'vue-router'
 import { Login, useAuthStore } from '@hotwax/dxp-components';

src/store/modules/order/actions.ts

@@ -5,7 +5,7 @@ import OrderState from './OrderState'
 import * as types from './mutation-types'
 import { showToast } from "@/utils";
 import { hasError } from '@/adapter'
-import { translate } from "@/i18n";
+import { translate } from "@hotwax/dxp-components";
 import emitter from '@/event-bus'
 import store from "@/store";
 import { prepareOrderQuery } from "@/utils/solrHelper";

src/store/modules/product/actions.ts

@@ -5,7 +5,7 @@ import ProductState from './ProductState'
 import * as types from './mutation-types'
 import { showToast } from '@/utils'
 import { hasError } from '@/adapter'
-import { translate } from '@/i18n'
+import { translate } from '@hotwax/dxp-components'
 import emitter from '@/event-bus'
 
 

src/store/modules/user/actions.ts

@@ -4,7 +4,6 @@ import RootState from '@/store/RootState'
 import UserState from './UserState'
 import * as types from './mutation-types'
 import { showToast } from '@/utils'
-import i18n, { translate } from '@/i18n'
 import { Settings } from 'luxon';
 import { hasError, updateInstanceUrl, updateToken, resetConfig } from '@/adapter'
 import {
@@ -13,7 +12,7 @@ import {
   resetPermissions,
   setPermissions
 } from '@/authorization'
-import { useAuthStore } from '@hotwax/dxp-components'
+import { useAuthStore, i18n, translate } from '@hotwax/dxp-components'
 
 const actions: ActionTree<UserState, RootState> = {
 
@@ -150,7 +149,6 @@ const actions: ActionTree<UserState, RootState> = {
   },
 
   setLocale({ commit }, payload) {
-    i18n.global.locale = payload
     commit(types.USER_LOCALE_UPDATED, payload)
   },
 }

src/user-utils/index.ts

@@ -1,4 +1,4 @@
-import { translate } from '@/i18n'
+import { translate } from '@hotwax/dxp-components'
 import store from '@/store'
 import { loadingController } from '@ionic/vue'
 

src/utils/index.ts

@@ -1,6 +1,6 @@
 import { toastController } from '@ionic/vue';
 import { Plugins } from '@capacitor/core';
-import { translate } from '@/i18n'
+import { translate } from '@hotwax/dxp-components'
 import { DateTime } from "luxon";
 
 // TODO Use separate files for specific utilities

src/views/AssignPickerModal.vue

@@ -64,7 +64,7 @@ import { closeOutline } from "ionicons/icons";
 import { useStore } from "vuex";
 import { showToast } from "@/utils";
 import { hasError } from '@/adapter'
-import { translate } from "@/i18n";
+import { translate } from "@hotwax/dxp-components";
 import { PicklistService } from '@/services/PicklistService'
 
 export default defineComponent({

src/views/OrderDetail.vue

@@ -96,6 +96,7 @@ import { DateTime } from 'luxon';
 import ShipToCustomerModal from "@/components/ShipToCustomerModal.vue";
 import { Actions, hasPermission } from '@/authorization'
 import { OrderService } from "@/services/OrderService";
+import { translate } from "@hotwax/dxp-components";
 
 export default defineComponent({
   name: "OrderDetail",
@@ -147,13 +148,13 @@ export default defineComponent({
     async updateOrder (order) {
       const alert = await alertController
         .create({
-          header: this.$t('Update Order'),
-          message: this.$t(`This order will be removed from your dashboard. This action cannot be undone.`, { space: '<br /><br />' }),
+          header: translate('Update Order'),
+          message: translate(`This order will be removed from your dashboard. This action cannot be undone.`, { space: '<br /><br />' }),
           buttons: [{
-            text: this.$t('Cancel'),
+            text: translate('Cancel'),
             role: 'cancel'
           },{
-            text: this.$t('Reject Order'),
+            text: translate('Reject Order'),
             handler: () => {
               this.store.dispatch('order/setUnfillableOrderOrItem', { orderId: order.orderId, part: this.getCurrentOrderPart() }).then((resp) => {
                 if (resp) this.router.push('/tabs/orders')

src/views/Orders.vue

@@ -194,7 +194,7 @@ import { copyToClipboard, showToast } from '@/utils'
 import { DateTime } from 'luxon';
 import emitter from "@/event-bus"
 import { api, hasError } from '@/adapter';
-import { translate } from "@/i18n";
+import { translate } from "@hotwax/dxp-components";
 import AssignPickerModal from "./AssignPickerModal.vue";
 import { OrderService } from "@/services/OrderService";
 import { Actions, hasPermission } from '@/authorization'
@@ -350,15 +350,15 @@ export default defineComponent({
     async readyForPickup (order: any, part: any) {
       if(this.configurePicker) return this.assignPicker(order, part, this.currentFacility.facilityId);
       const pickup = part.shipmentMethodEnum?.shipmentMethodEnumId === 'STOREPICKUP';
-      const header = pickup ? this.$t('Ready for pickup') : this.$t('Ready to ship');
-      const message = pickup ? this.$t('An email notification will be sent to that their order is ready for pickup. This order will also be moved to the packed orders tab.', { customerName: order.customer.name, space: '<br/><br/>'}) : '';
+      const header = pickup ? translate('Ready for pickup') : translate('Ready to ship');
+      const message = pickup ? translate('An email notification will be sent to that their order is ready for pickup. This order will also be moved to the packed orders tab.', { customerName: order.customer.name, space: '<br/><br/>'}) : '';
 
       const alert = await alertController
         .create({
           header: header,
           message: message,
           buttons: [{
-            text: this.$t('Cancel'),
+            text: translate('Cancel'),
             role: 'cancel'
           },{
             text: header,
@@ -399,18 +399,18 @@ export default defineComponent({
       })
     },
     async sendReadyForPickupEmail(order: any) {
-      const header = this.$t('Resend ready for pickup email')
-      const message = this.$t('An email notification will be sent to that their order is ready for pickup.', { customerName: order.customer.name });
+      const header = translate('Resend ready for pickup email')
+      const message = translate('An email notification will be sent to that their order is ready for pickup.', { customerName: order.customer.name });
 
       const alert = await alertController
         .create({
           header: header,
           message: message,
           buttons: [{
-            text: this.$t('Cancel'),
+            text: translate('Cancel'),
             role: 'cancel'
           },{
-            text: this.$t('Send'),
+            text: translate('Send'),
             handler: async () => {
               try {
                 const resp = await OrderService.sendPickupScheduledNotification({ shipmentId: order.shipmentId });

src/views/ProductDetail.vue

@@ -93,7 +93,7 @@ import { getFeature, showToast } from "@/utils";
 import { hasError } from '@/adapter'
 import { sortSizes } from '@/apparel-sorter';
 import OtherStoresInventoryModal from "./OtherStoresInventoryModal.vue";
-import { translate } from "@/i18n";
+import { translate } from "@hotwax/dxp-components";
 
 export default defineComponent({
   name: "ProductDetail",

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>
@@ -211,7 +196,7 @@ import { DateTime } from 'luxon';
 import { UserService } from '@/services/UserService'
 import { showToast } from '@/utils';
 import { hasError } from '@/adapter'
-import { translate } from "@/i18n";
+import { translate } from "@hotwax/dxp-components";
 import { Actions, hasPermission } from '@/authorization'
 
 export default defineComponent({
@@ -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 {