Updated: files to use the translate function

hotwax · Oct 17, 2023 · 315ffe0 · 315ffe0
2 parents a3f2c89 + ec81fb4
commit 315ffe0
Show file tree

Hide file tree

Showing 44 changed files with 3,911 additions and 13,606 deletions.
diff --git a/.env.example b/.env.example
@@ -7,7 +7,7 @@ VUE_APP_PRDT_IDENT_TYPE_ID=SHOPIFY_PROD_SKU
 VUE_APP_ORD_IDENT_TYPE_ID=SHOPIFY_ORD_NAME
 VUE_APP_BASE_URL=
 VUE_APP_PERMISSION_ID=
-VUE_APP_LOCALES={"en": "English", "ja": "日本語", "es": "Español"}
+VUE_APP_LOCALES={"en-US": "English", "ja-JP": "日本語", "es-ES": "Español"}
 VUE_APP_ALIAS=
 VUE_APP_CURRENCY_FORMATS={"en": {"currency": {"style": "currency","currency": "USD"}}, "ja": {"currency": {"style": "currency", "currency": "JPY"}}, "es": {"currency": {"style": "currency","currency": "ESP"}}}
 VUE_APP_RF_CNFG_MPNG={ "allowDeliveryMethodUpdate": "CUST_DLVRMTHD_UPDATE", "allowDeliveryAddressUpdate": "CUST_DLVRADR_UPDATE", "allowPickupUpdate": "CUST_PCKUP_UPDATE", "allowCancel": "CUST_ALLOW_CNCL", "shippingMethod": "RF_SHIPPING_METHOD"}

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,15 +1,14 @@
 {
   "name": "bopis",
-  "version": "2.15.0",
+  "version": "2.17.2",
   "private": true,
   "description": "HotWax BOPIS app",
   "scripts": {
     "serve": "vue-cli-service serve",
     "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.5.0",
@@ -18,8 +17,8 @@
     "@casl/ability": "^6.0.0",
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/apps-theme": "^1.1.0",
-    "@hotwax/dxp-components": "^1.7.5",
-    "@hotwax/oms-api": "^1.10.0",
+    "@hotwax/dxp-components": "^1.9.1",
+    "@hotwax/oms-api": "^1.11.0",
     "@ionic/core": "6.7.5",
     "@ionic/vue": "6.7.5",
     "@ionic/vue-router": "6.7.5",
@@ -31,14 +30,12 @@
     "mitt": "^2.1.0",
     "register-service-worker": "^1.7.1",
     "vue": "^3.2.26",
-    "vue-i18n": "~9.1.6",
     "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/luxon": "^3.2.0",
     "@typescript-eslint/eslint-plugin": "~5.26.0",
@@ -60,7 +57,6 @@
     "eslint-plugin-vue": "^8.0.3",
     "jest": "^28.1.0",
     "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
@@ -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',
@@ -34,7 +35,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
           });
@@ -57,7 +58,6 @@ export default defineComponent({
   }, 
   computed: {
     ...mapGetters({
-      locale: 'user/getLocale',
       userToken: 'user/getUserToken',
       instanceUrl: 'user/getInstanceUrl'
     })
@@ -82,13 +82,12 @@ 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;
   },
   unmounted() {
     emitter.off('presentLoader', this.presentLoader);
@@ -100,7 +99,8 @@ export default defineComponent({
     const router = useRouter();
     return {
       router,
-      store
+      store,
+      translate
     }
   }
 });

diff --git a/src/adapter/index.ts b/src/adapter/index.ts
@@ -10,11 +10,14 @@ import {
   logout,
   resetConfig,
   removeClientRegistrationToken,
+  setUserLocale,
   storeClientRegistrationToken,
   subscribeTopic,
   unsubscribeTopic,
   updateInstanceUrl,
-  updateToken
+  updateToken,
+  getUserPreference, 
+  setUserPreference
 } from '@hotwax/oms-api'
 
 export {
@@ -29,9 +32,12 @@ export {
   logout,
   resetConfig,
   removeClientRegistrationToken,
+  setUserLocale,
   storeClientRegistrationToken,
   subscribeTopic,
   unsubscribeTopic,
   updateInstanceUrl,
-  updateToken
+  updateToken,
+  getUserPreference,
+  setUserPreference
 }
diff --git a/src/components/NotificationPreferenceModal.vue b/src/components/NotificationPreferenceModal.vue
@@ -6,13 +6,13 @@
           <ion-icon slot="icon-only" :icon="closeOutline" />
         </ion-button>
       </ion-buttons>
-      <ion-title>{{ $t("Notification Preference") }}</ion-title>
+      <ion-title>{{ translate("Notification Preference") }}</ion-title>
     </ion-toolbar>
   </ion-header>
 
   <ion-content>
     <div v-if="!notificationPrefs.length" class="ion-text-center">
-      <p>{{ $t("Notification preferences not found.")}}</p>
+      <p>{{ translate("Notification preferences not found.")}}</p>
     </div>
     <ion-list v-else>
       <ion-item :key="pref.enumId" v-for="pref in notificationPrefs">
@@ -49,7 +49,7 @@ import {
 import { defineComponent } from "vue";
 import { closeOutline, save } from "ionicons/icons";
 import { mapGetters, useStore } from "vuex";
-import { translate } from "@/i18n";
+import { translate } from '@hotwax/dxp-components'
 import { showToast } from "@/utils";
 import emitter from "@/event-bus"
 import { generateTopicName } from "@/utils/firebase";
@@ -84,7 +84,6 @@ export default defineComponent({
   },
   computed: {
     ...mapGetters({
-      userProfile: 'user/getUserProfile',
       currentFacility: 'user/getCurrentFacility',
       instanceUrl: 'user/getInstanceUrl',
       notificationPrefs: 'user/getNotificationPrefs'
@@ -141,17 +140,16 @@ export default defineComponent({
       }
     },
     async handleTopicSubscription() {
-      const ofbizInstanceName = this.userProfile.ofbizInstanceName
       const facilityId = (this.currentFacility as any).facilityId
       const subscribeRequests = [] as any
       this.notificationPrefToUpdate.subscribe.map(async (enumId: string) => {
-        const topicName = generateTopicName(ofbizInstanceName, facilityId, enumId)
+        const topicName = generateTopicName(facilityId, enumId)
         await subscribeRequests.push(subscribeTopic(topicName, process.env.VUE_APP_NOTIF_APP_ID))
       })
 
       const unsubscribeRequests = [] as any
       this.notificationPrefToUpdate.unsubscribe.map(async (enumId: string) => {
-        const topicName = generateTopicName(ofbizInstanceName, facilityId, enumId)
+        const topicName = generateTopicName(facilityId, enumId)
         await unsubscribeRequests.push(unsubscribeTopic(topicName, process.env.VUE_APP_NOTIF_APP_ID))
       })
 
@@ -164,16 +162,16 @@ export default defineComponent({
       )
     },
     async confirmSave() {
-      const message = this.$t("Are you sure you want to update the notification preferences?");
+      const message = this.translate("Are you sure you want to update the notification preferences?");
       const alert = await alertController.create({
-        header: this.$t("Update notification preferences"),
+        header: this.translate("Update notification preferences"),
         message,
         buttons: [
           {
-            text: this.$t("Cancel"),
+            text: this.translate("Cancel"),
           },
           {
-            text: this.$t("Confirm"),
+            text: this.translate("Confirm"),
             handler: async () => {
               await this.updateNotificationPref();
               modalController.dismiss({ dismissed: true });
@@ -189,6 +187,7 @@ export default defineComponent({
 
     return {
       closeOutline,
+      translate,
       save,
       store
     };

diff --git a/src/components/OrderItemRejHistoryModal.vue b/src/components/OrderItemRejHistoryModal.vue
@@ -6,7 +6,7 @@
           <ion-icon slot="icon-only" :icon="closeOutline" />
         </ion-button>
       </ion-buttons>
-      <ion-title>{{ $t("Order item rejection history") }}</ion-title>
+      <ion-title>{{ translate("Order item rejection history") }}</ion-title>
     </ion-toolbar>
   </ion-header>
   <ion-content>
@@ -18,8 +18,8 @@
         <ion-label>
           <h5>{{ getProduct(history.productId).brandName }}</h5>
           <h2>{{ getProduct(history.productId).productName }}</h2>
-          <p v-if="$filters.getFeature(getProduct(history.productId).featureHierarchy, '1/COLOR/')">{{ $t("Color") }}: {{ $filters.getFeature(getProduct(history.productId).featureHierarchy, '1/COLOR/') }}</p>
-          <p v-if="$filters.getFeature(getProduct(history.productId).featureHierarchy, '1/SIZE/')">{{ $t("Size") }}: {{ $filters.getFeature(getProduct(history.productId).featureHierarchy, '1/SIZE/') }}</p>
+          <p v-if="$filters.getFeature(getProduct(history.productId).featureHierarchy, '1/COLOR/')">{{ translate("Color") }}: {{ $filters.getFeature(getProduct(history.productId).featureHierarchy, '1/COLOR/') }}</p>
+          <p v-if="$filters.getFeature(getProduct(history.productId).featureHierarchy, '1/SIZE/')">{{ translate("Size") }}: {{ $filters.getFeature(getProduct(history.productId).featureHierarchy, '1/SIZE/') }}</p>
         </ion-label>
         <ion-label slot="end" class="ion-text-right">
           <h2>{{ getRejectReasonDescription(history?.changeReasonEnumId) }}</h2>
@@ -31,7 +31,7 @@
 
     <!-- Empty state -->
     <div v-if="!rejectionHistory.length && !isLoading" class="empty-state">
-      <p>{{ $t('No records found.') }}</p>
+      <p>{{ translate('No records found.') }}</p>
     </div>
   </ion-content>
 </template>
@@ -55,6 +55,7 @@ import { defineComponent } from 'vue';
 import { closeOutline } from 'ionicons/icons';
 import { mapGetters, useStore } from "vuex";
 import { DateTime } from 'luxon';
+import { translate } from '@hotwax/dxp-components';
 
 export default defineComponent({
   name: "OrderItemRejHistoryModal",
@@ -104,7 +105,8 @@ export default defineComponent({
 
     return {
       closeOutline,
-      store
+      store,
+      translate
     };
   },
 });

diff --git a/src/components/ProductListItem.vue b/src/components/ProductListItem.vue
@@ -8,13 +8,13 @@
       <h2>{{ getProduct(item.productId).productName }}</h2>
       <p class="ion-text-wrap">{{ getProduct(item.productId).internalName }}</p>
       <p class="overline">{{ $filters.getIdentificationId(getProduct(item.productId).goodIdentifications, goodIdentificationTypeId) }}</p>
-      <p v-if="$filters.getFeature(getProduct(item.productId).featureHierarchy, '1/COLOR/')">{{ $t("Color") }}: {{ $filters.getFeature(getProduct(item.productId).featureHierarchy, '1/COLOR/') }}</p>
-      <p v-if="$filters.getFeature(getProduct(item.productId).featureHierarchy, '1/SIZE/')">{{ $t("Size") }}: {{ $filters.getFeature(getProduct(item.productId).featureHierarchy, '1/SIZE/') }}</p>
+      <p v-if="$filters.getFeature(getProduct(item.productId).featureHierarchy, '1/COLOR/')">{{ translate("Color") }}: {{ $filters.getFeature(getProduct(item.productId).featureHierarchy, '1/COLOR/') }}</p>
+      <p v-if="$filters.getFeature(getProduct(item.productId).featureHierarchy, '1/SIZE/')">{{ translate("Size") }}: {{ $filters.getFeature(getProduct(item.productId).featureHierarchy, '1/SIZE/') }}</p>
     </ion-label>
     <!-- Only show stock if its not a ship to store order -->
     <div v-if="!isShipToStoreOrder">
       <ion-note v-if="getProductStock(item.productId).quantityOnHandTotal >= 0 " :color="updateColor(getProductStock(item.productId).quantityOnHandTotal)">
-        {{ getProductStock(item.productId).quantityOnHandTotal }} {{ $t('pieces in stock') }}
+        {{ getProductStock(item.productId).quantityOnHandTotal }} {{ translate('pieces in stock') }}
       </ion-note>
       <ion-spinner v-else-if="isFetchingStock" color="medium" name="crescent" />
       <ion-button v-else fill="clear" @click.stop="fetchProductStock(item.productId)">
@@ -28,7 +28,7 @@
 import { defineComponent } from "vue";
 import { IonButton, IonIcon, IonItem, IonLabel, IonNote, IonSpinner, IonThumbnail } from "@ionic/vue";
 import { mapGetters, useStore } from 'vuex';
-import { ShopifyImg } from '@hotwax/dxp-components'
+import { ShopifyImg, translate } from '@hotwax/dxp-components'
 import { cubeOutline } from 'ionicons/icons'
 
 export default defineComponent({
@@ -75,8 +75,9 @@ export default defineComponent({
   setup() {
     const store = useStore();
     return {
-      cubeOutline,  
-      store
+      cubeOutline,
+      store,
+      translate
     }
   }
 })

diff --git a/src/components/RejectOrderModal.vue b/src/components/RejectOrderModal.vue
@@ -6,19 +6,19 @@
           <ion-icon slot="icon-only" :icon="closeOutline" />
         </ion-button>
       </ion-buttons>
-      <ion-title>{{ $t("Reject Order") }}</ion-title>
+      <ion-title>{{ translate("Reject Order") }}</ion-title>
     </ion-toolbar>
   </ion-header>
   <ion-content>
     <ion-item lines="none">
-      <p>{{ $t('On rejecting this order, will be sent an email with alternate fulfilment options and this order will be removed from your dashboard.', { customerName: order?.customer?.name }) }}</p>
+      <p>{{ translate('On rejecting this order, will be sent an email with alternate fulfilment options and this order will be removed from your dashboard.', { customerName: order?.customer?.name }) }}</p>
     </ion-item>
     <ion-list>
-      <ion-list-header>{{ $t("Select reason") }}</ion-list-header>
+      <ion-list-header>{{ translate("Select reason") }}</ion-list-header>
       <ion-radio-group v-model="rejectReasonId">
         <ion-item v-for="reason in unfillableReasons" :key="reason.id">
           <ion-radio slot="start" :value="reason.id" />
-          <ion-label>{{ $t(reason.label) }}</ion-label>
+          <ion-label>{{ translate(reason.label) }}</ion-label>
         </ion-item>
       </ion-radio-group>
     </ion-list>
@@ -53,6 +53,7 @@ import {
 import { defineComponent } from 'vue';
 import { closeOutline, saveOutline } from 'ionicons/icons';
 import { mapGetters, useStore } from 'vuex'
+import { translate } from '@hotwax/dxp-components';
 
 export default defineComponent({
   name: "RejectOrderModal",
@@ -92,13 +93,13 @@ export default defineComponent({
     async confirmSave() {
       const alert = await alertController
         .create({
-          header: this.$t('Reject Order'),
-          message: this.$t(`This order will be removed from your dashboard. This action cannot be undone.`, { space: '<br /><br />' }),
+          header: this.translate('Reject Order'),
+          message: this.translate(`This order will be removed from your dashboard. This action cannot be undone.`, { space: '<br /><br />' }),
           buttons: [{
-            text: this.$t('Cancel'),
+            text: this.translate('Cancel'),
             role: 'cancel'
           }, {
-            text: this.$t('Reject'),
+            text: this.translate('Reject'),
             handler: () => {
               const part = { ...this.order.part, items: this.order.part.items.map((item: any) => ({ ...item, reason: this.rejectReasonId })) };
               this.store.dispatch('order/setUnfillableOrderOrItem', { orderId: this.order.orderId, part }).then((resp) => {
@@ -120,7 +121,8 @@ export default defineComponent({
     return {
       closeOutline,
       saveOutline,
-      store
+      store,
+      translate
     };
   }
 });