Implemented: language switcher through DXP

svohra1206 · Oct 12, 2023 · 2857a41 · 2857a41
1 parent ac57abd
commit 2857a41
Show file tree

Hide file tree

Showing 39 changed files with 2,962 additions and 3,935 deletions.
diff --git a/.env.example b/.env.example
@@ -1,5 +1,5 @@
-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_CACHE_MAX_AGE=3600
 VUE_APP_VIEW_SIZE=10
 VUE_APP_BASE_URL=
@@ -8,6 +8,6 @@ VUE_APP_ALIAS={}
 VUE_APP_MAPPING_TYPES={"IMPORD": "IMP_ORD_MAPPING_PREF","EXPORD": "EXP_PKD_ORD_MAPPING_PREF"}
 VUE_APP_MAPPING_IMPORD={"orderId": { "label": "Order ID", "value": "" }, "facilityId": { "label": "Facility ID", "value": "" },"trackingCode": { "label": "Tracking Code", "value": "" }}
 VUE_APP_MAPPING_EXPORD={"shipment-id": { "label": "Shipment ID", "value": "" }, "order-id": { "label": "Order ID", "value": "" },"to-name": { "label": "To Name", "value": "" },"address1": { "label": "Address 1", "value": "" },"address2": { "label": "Address 2", "value": "" },"city": { "label": "City", "value": "" },"state": { "label": "State", "value": "" },"zip-code": { "label": "Zip Code", "value": "" },"country-code": { "label": "Country Code", "value": "" },"full-to-address": { "label": "Full Address", "value": "" },"phone-number": { "label": "Phone Number", "value": "" },"email-address": { "label": "Email", "value": "" },"weight": { "label": "Weight", "value": "" },"quantity": { "label": "Quantity", "value": "" },"product-name": { "label": "Product Name", "value": "" },"product-sku": { "label": "Product Sku", "value": "" },"shipping-method": { "label": "Shipping Method", "value": "" },"facility-name": { "label": "Facility Name", "value": "" },"facility-address1": { "label": "Facility Address 1", "value": "" },"facility-address2": { "label": "Facility Address 2", "value": "" },"facility-city": { "label": "Facility City", "value": "" },"facility-state": { "label": "Facility State", "value": "" },"facility-zip-code": { "label": "Facility Zip Code", "value": "" },"facility-phone": { "label": "Facility Phone", "value": "" },"facility-full-address": { "label": "Facility Full Address", "value": "" }}
-VUE_APP_LOCALES={"en": "English", "es": "Español"}
+VUE_APP_LOCALES={"en-US": "English", "es-ES": "Español"}
 VUE_APP_DEFAULT_LOG_LEVEL="error"
 VUE_APP_LOGIN_URL="http://launchpad.hotwax.io/login"
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,16 +8,15 @@
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
     "test:e2e": "vue-cli-service test:e2e",
-    "lint": "vue-cli-service lint",
-    "i18n:report": "vue-cli-service i18n:report --src \"./src/**/*.?(js|vue)\" --locales \"./src/locales/**/*.json\""
+    "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "@capacitor/android": "^2.4.7",
     "@capacitor/core": "^2.4.7",
     "@casl/ability": "^6.0.0",
     "@hotwax/app-version-info": "^1.0.0",
-    "@hotwax/dxp-components": "^1.7.5",
-    "@hotwax/oms-api": "^1.10.0",
+    "@hotwax/dxp-components": "^1.9.0",
+    "@hotwax/oms-api": "^1.11.0",
     "@ionic/core": "6.7.5",
     "@ionic/vue": "6.7.5",
     "@ionic/vue-router": "6.7.5",
@@ -30,15 +29,13 @@
     "mitt": "^2.1.0",
     "register-service-worker": "^1.7.1",
     "vue": "3.2.26",
-    "vue-i18n": "~9.1.6",
     "vue-logger-plugin": "^2.2.3",
     "vue-router": "^4.0.12",
     "vuex": "^4.0.1",
     "vuex-persistedstate": "^4.0.0-beta.3"
   },
   "devDependencies": {
     "@capacitor/cli": "^2.4.7",
-    "@intlify/vue-i18n-loader": "^2.1.0",
     "@types/jest": "^27.5.0",
     "@types/papaparse": "5.3.1",
     "@typescript-eslint/eslint-plugin": "~5.26.0",
@@ -61,7 +58,6 @@
     "jest": "^28.1.0",
     "papaparse": "5.3.1",
     "ts-jest": "^28.0.8",
-    "typescript": "~4.7.4",
-    "vue-cli-plugin-i18n": "^1.0.1"
+    "typescript": "~4.7.4"
   }
 }
diff --git a/src/App.vue b/src/App.vue
@@ -17,6 +17,7 @@ import { mapGetters, useStore } from 'vuex';
 import { initialise, resetConfig } from '@/adapter'
 import { useRouter } from 'vue-router';
 import { Settings } from 'luxon'
+import { translate } from '@hotwax/dxp-components';
 
 export default defineComponent({
   name: 'App',
@@ -36,8 +37,7 @@ export default defineComponent({
     ...mapGetters({
       userToken: 'user/getUserToken',
       instanceUrl: 'user/getInstanceUrl',
-      userProfile: 'user/getUserProfile',
-      locale: 'user/getLocale'
+      userProfile: 'user/getUserProfile'
     })
   },
   methods: {
@@ -48,7 +48,7 @@ export default defineComponent({
       if (!this.loader) {
         this.loader = await loadingController
           .create({
-            message: options.message ? this.$t(options.message) : this.$t("Click the backdrop to dismiss."),
+            message: options.message ? translate(options.message) : translate("Click the backdrop to dismiss."),
             translucent: true,
             backdropDismiss: options.backdropDismiss
           });
@@ -110,7 +110,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
       });
@@ -123,7 +123,6 @@ export default defineComponent({
     if (this.userProfile && this.userProfile.userTimeZone) {
       Settings.defaultZone = this.userProfile.userTimeZone;
     }
-    this.$i18n.locale = this.locale;
   },
   unmounted() {
     emitter.off('presentLoader', this.presentLoader);
@@ -136,7 +135,8 @@ export default defineComponent({
     const router = useRouter();
     return {
       router,
-      store
+      store,
+      translate
     }
   }
 });

diff --git a/src/adapter/index.ts b/src/adapter/index.ts
@@ -1,14 +1,15 @@
-import { api, client, getConfig, hasError, initialise, logout, resetConfig, updateInstanceUrl, updateToken, getUserFacilities } from '@hotwax/oms-api'
+import { api, client, getConfig, getUserFacilities, hasError, initialise, logout, resetConfig, setUserLocale, updateInstanceUrl, updateToken } from '@hotwax/oms-api'
 
 export {
   api,
   client,
   getConfig,
+  getUserFacilities,
   hasError,
   initialise,
   logout,
   resetConfig,
+  setUserLocale,
   updateInstanceUrl,
-  updateToken,
-  getUserFacilities
+  updateToken
 }
diff --git a/src/components/CreateMappingModal.vue b/src/components/CreateMappingModal.vue
@@ -6,22 +6,22 @@
           <ion-icon :icon="close" />
         </ion-button>
       </ion-buttons>
-      <ion-title>{{ $t("CSV Mapping") }}</ion-title>
+      <ion-title>{{ translate("CSV Mapping") }}</ion-title>
     </ion-toolbar>
   </ion-header>
 
   <ion-item>
-    <ion-label>{{ $t("Mapping name") }}</ion-label>
-    <ion-input :placeholder="$t('Field mapping name')" v-model="mappingName" />
+    <ion-label>{{ translate("Mapping name") }}</ion-label>
+    <ion-input :placeholder="translate('Field mapping name')" v-model="mappingName" />
   </ion-item>
 
   <ion-content class="ion-padding">
     <div>
       <ion-list>
         <ion-item :key="field" v-for="(fieldValues, field) in fieldMapping">
-          <ion-label>{{ $t(fieldValues.label) }}</ion-label>
+          <ion-label>{{ translate(fieldValues.label) }}</ion-label>
           <ion-input v-if="mappingType === 'EXPORD'" slot="end" v-model="fieldValues.value"></ion-input>
-          <ion-select v-else interface="popover" :placeholder = "$t('Select')" v-model="fieldValues.value">
+          <ion-select v-else interface="popover" :placeholder = "translate('Select')" v-model="fieldValues.value">
             <ion-select-option :key="index" v-for="(prop, index) in fileColumns">{{ prop }}</ion-select-option>
           </ion-select>
         </ion-item>
@@ -58,7 +58,7 @@ import { defineComponent } from "vue";
 import { close, save, saveOutline } from "ionicons/icons";
 import { useStore, mapGetters } from "vuex";
 import { showToast } from '@/utils';
-import { translate } from "@/i18n";
+import { translate } from '@hotwax/dxp-components'
 
 export default defineComponent({
   name: "CreateMappingModal",
@@ -143,7 +143,8 @@ export default defineComponent({
       close,
       save,
       saveOutline,
-      store
+      store,
+      translate
     };
   }
 });

diff --git a/src/components/CustomFieldModal.vue b/src/components/CustomFieldModal.vue
@@ -6,19 +6,19 @@
           <ion-icon slot="icon-only" :icon="closeOutline" />
         </ion-button>
       </ion-buttons>
-      <ion-title>{{ $t("Add custom field") }}</ion-title>
+      <ion-title>{{ translate("Add custom field") }}</ion-title>
     </ion-toolbar>
   </ion-header>
 
   <ion-content>
     <ion-list>
       <ion-item lines="full">
-        <ion-label position="fixed">{{ $t("Key") }}</ion-label>
-        <ion-input :placeholder="$t('Enter key')" name="key" v-model="key" id="key" type="text" required />
+        <ion-label position="fixed">{{ translate("Key") }}</ion-label>
+        <ion-input :placeholder="translate('Enter key')" name="key" v-model="key" id="key" type="text" required />
       </ion-item>
       <ion-item>
-        <ion-label position="fixed">{{ $t("Value") }}</ion-label>
-        <ion-input :placeholder="$t('Enter value')" name="value" v-model="value" id="value" type="text" required />
+        <ion-label position="fixed">{{ translate("Value") }}</ion-label>
+        <ion-input :placeholder="translate('Enter value')" name="value" v-model="value" id="value" type="text" required />
       </ion-item>
     </ion-list>
 
@@ -51,7 +51,7 @@ import { defineComponent } from "vue";
 import { checkmarkDoneOutline, closeOutline } from "ionicons/icons";
 import { useStore } from "vuex";
 import { showToast } from "@/utils"
-import { translate } from "@/i18n";
+import { translate } from '@hotwax/dxp-components'
 
 export default defineComponent({
   name: "CustomFieldModal",
@@ -98,7 +98,8 @@ export default defineComponent({
     return {
       checkmarkDoneOutline,
       closeOutline,
-      store
+      store,
+      translate
     };
   },
 });

diff --git a/src/components/EditPickersModal.vue b/src/components/EditPickersModal.vue
@@ -6,7 +6,7 @@
           <ion-icon slot="icon-only" :icon="close" />
         </ion-button>
       </ion-buttons>
-      <ion-title>{{ $t("Edit pickers") }}</ion-title>
+      <ion-title>{{ translate("Edit pickers") }}</ion-title>
     </ion-toolbar>
   </ion-header>
 
@@ -20,7 +20,7 @@
     </ion-row>
 
     <ion-list>
-      <ion-list-header>{{ $t("Staff") }}</ion-list-header>
+      <ion-list-header>{{ translate("Staff") }}</ion-list-header>
       <div class="ion-padding" v-if="!pickers.length">
         {{ 'No picker found' }}
       </div>
@@ -70,7 +70,7 @@ import { useStore } from "vuex";
 import { hasError, showToast } from '@/utils';
 import logger from "@/logger"
 import { UtilService } from "@/services/UtilService";
-import { translate } from "@/i18n";
+import { translate } from '@hotwax/dxp-components'
 
 export default defineComponent({
   name: "EditPickersModal",
@@ -179,16 +179,16 @@ export default defineComponent({
       }
     },
     async confirmSave() {
-      const message = this.$t("Replace current pickers with new selection?");
+      const message = translate("Replace current pickers with new selection?");
       const alert = await alertController.create({
-        header: this.$t("Replace pickers"),
+        header: translate("Replace pickers"),
         message,
         buttons: [
           {
-            text: this.$t("Cancel"),
+            text: translate("Cancel"),
           },
           {
-            text: this.$t("Replace"),
+            text: translate("Replace"),
             handler: () => {
               this.resetPicker().then(() => {
                 this.closeModal()
@@ -267,7 +267,8 @@ export default defineComponent({
       close,
       saveOutline,
       closeCircle,
-      store
+      store,
+      translate
     };
   }
 });

diff --git a/src/components/MappingConfiguration.vue b/src/components/MappingConfiguration.vue
@@ -1,7 +1,7 @@
 <template>
   <section>
     <ion-item>
-      <ion-label>{{ $t("Mapping name") }}</ion-label>
+      <ion-label>{{ translate("Mapping name") }}</ion-label>
       <ion-input v-model="currentMapping.name" />
     </ion-item>
 
@@ -16,23 +16,23 @@
       <div>
         <ion-button size="small" @click="updateMapping()">
           <ion-icon slot="start" :icon="saveOutline"/>
-          {{ $t("Save Changes") }}
+          {{ translate("Save Changes") }}
         </ion-button>
         <ion-button size="small" fill="outline" color="danger" @click="deleteMapping()">
           <ion-icon slot="start" :icon="trashOutline" />
-          {{ $t("Delete mapping") }}
+          {{ translate("Delete mapping") }}
         </ion-button>
       </div>
     </div>
 
     <div class="ion-padding-top actions mobile-only">
       <ion-button expand="block" @click="updateMapping()">
         <ion-icon slot="start" :icon="saveOutline"/>
-        {{ $t("Save Changes") }}
+        {{ translate("Save Changes") }}
       </ion-button>
       <ion-button fill="outline" color="danger" expand="block" @click="deleteMapping()">
         <ion-icon slot="start" :icon="trashOutline" />
-        {{ $t("Delete mapping") }}
+        {{ translate("Delete mapping") }}
       </ion-button>
     </div>
   </section>
@@ -52,7 +52,7 @@ import { defineComponent } from "vue";
 import { close, save, saveOutline, trashOutline } from "ionicons/icons";
 import { useStore, mapGetters } from "vuex";
 import { showToast } from "@/utils";
-import { translate } from "@/i18n";
+import { translate } from '@hotwax/dxp-components'
 
 export default defineComponent({
   name: "MappingConfiguration",
@@ -80,16 +80,16 @@ export default defineComponent({
   },
   methods: {
     async deleteMapping() {
-      const message = this.$t("Are you sure you want to delete this CSV mapping? This action cannot be undone.");
+      const message = translate("Are you sure you want to delete this CSV mapping? This action cannot be undone.");
       const alert = await alertController.create({
-        header: this.$t("Delete mapping"),
+        header: translate("Delete mapping"),
         message,
         buttons: [
           {
-            text: this.$t("Cancel"),
+            text: translate("Cancel"),
           },
           {
-            text: this.$t("Delete"),
+            text: translate("Delete"),
             handler: () => {
               this.store.dispatch("user/deleteFieldMapping", this.currentMapping)}
           }
@@ -109,16 +109,16 @@ export default defineComponent({
         showToast(translate("Map all fields"));
         return;
       }
-      const message = this.$t("Are you sure you want to update this CSV mapping? This action cannot be undone.");
+      const message = translate("Are you sure you want to update this CSV mapping? This action cannot be undone.");
       const alert = await alertController.create({
-        header: this.$t("Update mapping"),
+        header: translate("Update mapping"),
         message,
         buttons: [
           {
-            text: this.$t("Cancel"),
+            text: translate("Cancel"),
           },
           {
-            text: this.$t("Update"),
+            text: translate("Update"),
             handler: () => {
               this.store.dispatch('user/updateFieldMapping', this.currentMapping)
             }
@@ -135,7 +135,8 @@ export default defineComponent({
       save,
       saveOutline,
       trashOutline,
-      store
+      store,
+      translate
     };
   }
 });