Implemented: appVersionInfo component from dxp-components on settings page. (#235)

package.json

@@ -16,7 +16,7 @@
     "@capacitor/core": "^2.4.7",
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/apps-theme": "^1.1.0",
-    "@hotwax/dxp-components": "^1.11.0",
+    "@hotwax/dxp-components": "^1.12.1",
     "@hotwax/oms-api": "^1.10.0",
     "@ionic/core": "6.7.5",
     "@ionic/vue": "6.7.5",

src/components/MissingSkuModal.vue

@@ -43,7 +43,7 @@
         <ion-list v-if="segmentSelected === 'completed'">
           <ion-item v-for="item in getCompletedItems()" :key="item.shopifyProductSKU">
             <ion-thumbnail slot="start">
-              <ShopifyImg :src="item.imageUrl" size="small" />
+              <DxpShopifyImg :src="item.imageUrl" size="small" />
             </ion-thumbnail>
             <ion-label>
               <p class="overline">{{ item.parentProductName }}</p>
@@ -92,7 +92,7 @@ import { closeOutline, saveOutline } from 'ionicons/icons';
 import { defineComponent } from "@vue/runtime-core";
 import { mapGetters, useStore } from "vuex";
 import { ref } from "vue";
-import { ShopifyImg } from "@hotwax/dxp-components";
+import { DxpShopifyImg } from "@hotwax/dxp-components";
 
 export default defineComponent({
   name: "MissingSkuModal",
@@ -117,7 +117,7 @@ export default defineComponent({
   IonTitle,
   IonThumbnail,
   IonToolbar,
-  ShopifyImg
+  DxpShopifyImg
   },
   data(){
     return {

src/components/PurchaseOrderDetail.vue

@@ -26,7 +26,7 @@
         <div class="list-item">
           <ion-item lines="none">
             <ion-thumbnail slot="start">
-              <ShopifyImg :src="item.imageUrl" size="small" />
+              <DxpShopifyImg :src="item.imageUrl" size="small" />
             </ion-thumbnail>
             <ion-label class="ion-text-wrap">
               <h3>{{ item.pseudoId }}</h3>
@@ -55,7 +55,7 @@
   </div>     
 </template>
 <script lang="ts"> 
-import { ShopifyImg } from "@hotwax/dxp-components";
+import { DxpShopifyImg } from "@hotwax/dxp-components";
 import {
   IonCheckbox,
   IonThumbnail,
@@ -82,7 +82,7 @@ export default defineComponent({
     IonIcon,
     IonItem,
     IonLabel,
-    ShopifyImg
+    DxpShopifyImg
   },
   props: {
     purchaseOrders: {

src/locales/en.json

@@ -12,6 +12,7 @@
   "Backorder": "Backorder",
   "Blank": "Blank",
   "Buffer days": "Buffer days",
+  "Built: ": "Built: {builtDateTime}",
   "Bulk adjustment": "Bulk adjustment",
   "Buffer quantity": "Buffer quantity",
   "cancel": "cancel",
@@ -168,6 +169,7 @@
   "Upload a file": "Upload a file",
   "Upload purchase order": "Upload purchase order",
   "Username": "Username",
+  "Version: ": "Version: {appVersion}",
   "View all date time formats supported by the HotWax Import app.": "View all date time formats supported by the HotWax Import app.",
   "View": "View",
   "Would you like to update your time zone to . Your profile is currently set to . This setting can always be changed from the settings menu.": "Would you like to update your time zone to {localTimeZone}. Your profile is currently set to {profileTimeZone}. This setting can always be changed from the settings menu."

src/locales/index.ts

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

src/main.ts

@@ -33,6 +33,7 @@ import logger from './logger';
 import { dxpComponents } from '@hotwax/dxp-components'
 import { login, logout, loader } from './user-utils';
 import { getConfig, initialise } from '@hotwax/oms-api';
+import localeMessages from './locales';
 
 const app = createApp(App)
   .use(IonicVue, {
@@ -51,7 +52,8 @@ const app = createApp(App)
     loader,
     appLoginUrl: process.env.VUE_APP_LOGIN_URL as string,
     getConfig,
-    initialise
+    initialise,
+    localeMessages
   });
 
 // Filters are removed in Vue 3 and global filter introduced https://v3.vuejs.org/guide/migration/filters.html#global-filters

src/views/InventoryReview.vue

@@ -58,7 +58,7 @@
           <div class="list-item">
             <ion-item lines="none">
               <ion-thumbnail slot="start">
-                <ShopifyImg :src="item.imageUrl" size="small" />
+                <DxpShopifyImg :src="item.imageUrl" size="small" />
               </ion-thumbnail>
               <ion-label class="ion-text-wrap">
                 <h3>{{ item.pseudoId }}</h3>
@@ -95,9 +95,9 @@
 </template>   
 <script lang="ts">
 import { UploadService } from "@/services/UploadService";
-import { ShopifyImg } from "@hotwax/dxp-components"; 
+import { DxpShopifyImg } from "@hotwax/dxp-components"; 
 import ProductPopover from '@/components/ProductPopover.vue'
 import BulkInventoryAdjustmentModal from '@/components/BulkInventoryAdjustmentModal.vue'
 import MissingFacilitiesModal from '@/components/MissingFacilitiesModal.vue'
 import { defineComponent } from 'vue';
 import { mapGetters, useStore } from "vuex";
@@ -110,7 +110,7 @@
 export default defineComponent({
   name: 'InventoryDetail',
   components: {
-    ShopifyImg,
+    DxpShopifyImg,
     IonCard,
     IonCardContent,
     IonPage,

src/views/Settings.vue

@@ -37,21 +37,12 @@
       </div>
 
       <section>
-        <OmsInstanceNavigator />
+        <DxpOmsInstanceNavigator />
       </section>
 
       <hr />
 
-      <div class="section-header">
-        <h1>
-          {{ $t('App') }}
-          <p class="overline" >{{ "Version: " + appVersion }}</p>
-        </h1>
-        <div class="ion-text-end">
-          <p class="overline">{{ "Built: " + getDateTime(appInfo.builtTime) }}</p>
-          <ion-button v-if="pwaState.updateExists" @click="refreshApp()" fill="outline" color="dark" size="small">{{ $t("Update") }}</ion-button>
-        </div>
-      </div>
+      <DxpAppVersionInfo />
 
       <section>
         <ion-card>
@@ -142,8 +133,6 @@ export default defineComponent({
       sampleDateTime: '',
       dateTimeFormat: '',
       defaultDateTimeFormat: process.env.VUE_APP_DATE_FORMAT ? process.env.VUE_APP_DATE_FORMAT : 'MM/dd/yyyy',
-      appInfo: (process.env.VUE_APP_VERSION_INFO ? JSON.parse(process.env.VUE_APP_VERSION_INFO) : {}) as any,
-      appVersion: ""
     };
   },
   computed: {
@@ -156,7 +145,6 @@ export default defineComponent({
   mounted(){
     this.dateTimeFormat = this.currentDateTimeFormat
     this.parseSampleDateTime();
-    this.appVersion = this.appInfo.branch ? (this.appInfo.branch + "-" + this.appInfo.revision) : this.appInfo.tag;
   },
   methods: {
     updateDateTimeFormat(){
@@ -184,14 +172,6 @@ export default defineComponent({
     },
     goToLaunchpad() {
       window.location.href = `${process.env.VUE_APP_LOGIN_URL}`
-    },
-    getDateTime(time: any) {
-      return DateTime.fromMillis(time).toLocaleString(DateTime.DATETIME_MED);
-    },
-    refreshApp() {
-      this.store.dispatch('user/updatePwaState', { registration: this.pwaState.registration, updateExists: false });
-      if (!this.pwaState.registration || !this.pwaState.registration.waiting) return
-      this.pwaState.registration.waiting.postMessage({ type: 'SKIP_WAITING' })
     }
   },
   setup(){

tsconfig.json

@@ -6,6 +6,7 @@
     "jsx": "preserve",
     "importHelpers": true,
     "moduleResolution": "node",
+    "resolveJsonModule": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,