Implemented: support to use i18n from dxp and removed app level confi…

…guration of i18n(hotwax#280)

.env.example

@@ -1,8 +1,8 @@
 VUE_APP_CACHE_MAX_AGE=3600
 VUE_APP_BASE_URL=VUE_APP_BASE_URL
 VUE_APP_RESOURCE_URL=VUE_APP_RESOURCE_URL
-VUE_APP_I18N_LOCALE=en
-VUE_APP_I18N_FALLBACK_LOCALE=en
+VUE_APP_I18N_LOCALE=en-US
+VUE_APP_I18N_FALLBACK_LOCALE=en-US
 VUE_APP_VIEW_SIZE=10
 VUE_APP_CUST_LOYALTY_OPTIONS={"LoyaltyCustomer":"Pass", "LoyaltyPlusOrder":"Pass +"}
 VUE_APP_POLL_TIME=10000

src/App.vue

@@ -15,7 +15,7 @@ import {
 } from "@ionic/vue";
 import Menu from '@/components/Menu.vue';
 import { defineComponent } from "vue";
-import { useI18n } from 'vue-i18n'
+// import { useI18n } from 'vue-i18n'
 import TaskQueue from './task-queue';
 import OfflineHelper from "./offline-helper"
 import emitter from "@/event-bus"
@@ -24,6 +24,7 @@ import { mapGetters, useStore } from 'vuex';
 import { Settings } from 'luxon'
 import { initialise, resetConfig } from '@/adapter'
 import { useRouter } from 'vue-router';
+import { translate } from "@hotwax/dxp-components";
 
 export default defineComponent({
   name: "App",
@@ -51,7 +52,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
           });
@@ -90,7 +91,7 @@ export default defineComponent({
   async mounted() {
     this.loader = await loadingController
       .create({
-        message: this.$t("Click the backdrop to dismiss."),
+        message: translate("Click the backdrop to dismiss."),
         translucent: true,
         backdropDismiss: true
       });
@@ -111,14 +112,14 @@ export default defineComponent({
     const store = useStore();
     TaskQueue.init();
     OfflineHelper.register();
-    const { t, locale } = useI18n();
+    // const { t, locale } = useI18n();
     const router = useRouter();
     return {
       router,
       TaskQueue,
       OfflineHelper,
-      t,
-      locale,
+      // t,
+      // locale,
       store
     };
   },

src/components/Menu.vue

@@ -2,7 +2,7 @@
     <ion-menu content-id="main-content" type="overlay" :disabled="!isUserAuthenticated">
         <ion-header>
           <ion-toolbar>
-            <ion-title>{{ $t("Preorder Management")}}</ion-title>
+            <ion-title>{{ translate("Preorder Management")}}</ion-title>
           </ion-toolbar>
         </ion-header>
 
@@ -40,7 +40,7 @@ import {
 } from "@ionic/vue";
 import { computed, defineComponent} from "vue"
 import { mapGetters } from "vuex";
-
+import { translate } from "@hotwax/dxp-components";
 import { albums ,shirt, pricetags, settings } from "ionicons/icons";
 import { useStore } from "@/store";
 import { useRouter } from "vue-router";
@@ -124,7 +124,8 @@ export default defineComponent({
       settings,
       selectedIndex,
       shirt,
-      store
+      store,
+      translate
     };
   }
 });

src/main.ts

@@ -3,7 +3,6 @@ import App from './App.vue'
 import router from './router';
 
 import { IonicVue } from '@ionic/vue';
-import i18n from './i18n'
 import store from './store'
 import { DateTime } from 'luxon';
 import { sortSizes } from "@/apparel-sorter"
@@ -33,14 +32,13 @@ import permissionPlugin from '@/authorization';
 import permissionRules from '@/authorization/Rules';
 import permissionActions from '@/authorization/Actions';
 import { getConfig, initialise } from '@/adapter'
-import localeMessages from './i18n/locales';
+import localeMessages from './locales';
 
 const app = createApp(App)
   .use(IonicVue, {
     mode: 'md'
   })
   .use(router)
-  .use(i18n)
   .use(store)
   .use(permissionPlugin, {
     rules: permissionRules,

src/router/index.ts

@@ -11,7 +11,7 @@ import { DxpLogin, useAuthStore } from '@hotwax/dxp-components';
 import { loader } from '@/user-utils';
 import { hasPermission } from '@/authorization';
 import { showToast } from '@/utils';
-import { translate } from '@/i18n';
+import { translate } from '@hotwax/dxp-components';
 
 // Defining types for the meta values
 declare module 'vue-router' {

src/store/modules/order/actions.ts

@@ -4,7 +4,7 @@ import RootState from '@/store/RootState'
 import OrderState from './OrderState'
 import * as types from './mutation-types'
 import { hasError, showToast } from '@/utils'
-import { translate } from '@/i18n'
+import { translate } from '@hotwax/dxp-components'
 import { DateTime } from 'luxon';
 import emitter from '@/event-bus'
 

src/store/modules/product/actions.ts

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

src/store/modules/user/actions.ts

@@ -4,7 +4,7 @@ import RootState from '@/store/RootState'
 import UserState from './UserState'
 import * as types from './mutation-types'
 import { hasError, showToast } from '@/utils'
-import { translate } from '@/i18n'
+import { translate } from '@hotwax/dxp-components'
 import { Settings } from 'luxon'
 import { updateInstanceUrl, updateToken, resetConfig, logout } from '@/adapter'
 import { useAuthStore } from '@hotwax/dxp-components';

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/views/background-job-modal.vue

@@ -6,29 +6,29 @@
           <ion-icon slot="icon-only" :icon="closeOutline" />
         </ion-button>
       </ion-buttons>
-      <ion-title>{{ $t("Background jobs") }}</ion-title>
+      <ion-title>{{ translate("Background jobs") }}</ion-title>
     </ion-toolbar>
   </ion-header>
 
   <ion-content class="ion-padding">
     <!-- Empty state -->
     <div class="empty-state" v-if="jobTotal === 0">
       <img src="../assets/images/JobsEmptyState.png" />
-      <p>{{ $t("There are no jobs running in the background right now.") }}</p>
+      <p>{{ translate("There are no jobs running in the background right now.") }}</p>
     </div>
 
     <!-- Active jobs -->
     <div v-else>
       <ion-list>
-        <ion-list-header>{{ $t("Active jobs") }}</ion-list-header>
+        <ion-list-header>{{ translate("Active jobs") }}</ion-list-header>
         <ion-item v-bind:key="log.jobId" v-for="log in logs">
           <ion-icon slot="start" :icon="cloudUpload" />
           <ion-label>{{ log.scriptTitle ? log.scriptTitle : log.description }}</ion-label>
           <ion-note slot="end"> {{ log.createdDate ? getDateTime(log.createdDate) : '-' }}</ion-note>
         </ion-item>
         <ion-item v-bind:key="job.jobId" v-for="job in jobs">
           <ion-icon slot="start" :icon="cloudUpload" />
-          <ion-label>{{ $t("Broker orders") }}</ion-label>
+          <ion-label>{{ translate("Broker orders") }}</ion-label>
           <ion-note slot="end"> {{ job.runTime ? getDateTime(job.runTime) : '-' }}</ion-note>
         </ion-item>
       </ion-list>
@@ -57,6 +57,7 @@ import { JobService } from '@/services/JobService'
 import { useStore } from "@/store";
 import { mapGetters } from "vuex";
 import { DateTime } from 'luxon';
+import { translate } from "@hotwax/dxp-components";
 
 export default defineComponent({
   name: "BackgroundJobModal",
@@ -104,7 +105,8 @@ export default defineComponent({
       cloudDownload,
       build,
       closeOutline,
-      store
+      store,
+      translate
     };
   },
 });