Implemented: app version component from dxp-components (#274)

package.json

@@ -16,7 +16,7 @@
     "@casl/ability": "^6.0.0",
     "@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/ClosePurchaseOrderModal.vue

@@ -20,7 +20,7 @@
     <ion-list>
       <ion-item :button="isPOItemStatusPending(item)" v-for="(item, index) in getPOItems()" :key="index" @click="item.isChecked = !item.isChecked">
         <ion-thumbnail slot="start">
-          <ShopifyImg size="small" :src="getProduct(item.productId).mainImageUrl" />
+          <DxpShopifyImg size="small" :src="getProduct(item.productId).mainImageUrl" />
         </ion-thumbnail>
         <ion-label>
           <h2>{{ productHelpers.getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) }}</h2>
@@ -66,7 +66,7 @@ import { defineComponent } from 'vue';
 import { mapGetters, useStore } from 'vuex'
 import { OrderService } from "@/services/OrderService";
 import { productHelpers } from '@/utils';
-import { ShopifyImg, translate } from '@hotwax/dxp-components';
+import { DxpShopifyImg, translate } from '@hotwax/dxp-components';
 import { useRouter } from 'vue-router';
 
 export default defineComponent({
@@ -87,7 +87,7 @@ export default defineComponent({
     IonTitle,
     IonThumbnail,
     IonToolbar,
-    ShopifyImg
+    DxpShopifyImg
   },
   computed: {
     ...mapGetters({

src/components/ImageModal.vue

@@ -11,7 +11,7 @@
   </ion-header>
 
   <ion-content class="ion-text-center">
-    <ShopifyImg :src="imageUrl" />
+    <DxpShopifyImg :src="imageUrl" />
 
   </ion-content>
 </template>
@@ -29,7 +29,7 @@ import {
 } from '@ionic/vue';
 import { defineComponent } from 'vue';
 import { closeOutline } from 'ionicons/icons';
-import { ShopifyImg } from '@hotwax/dxp-components';
+import { DxpShopifyImg } from '@hotwax/dxp-components';
 
 export default defineComponent({
   name: 'ImageModal',
@@ -41,7 +41,7 @@ export default defineComponent({
     IonIcon,
     IonTitle,
     IonToolbar,
-    ShopifyImg
+    DxpShopifyImg
   },
   props: ["imageUrl", "productName"],
   methods: {

src/locales/en.json

@@ -6,6 +6,7 @@
   "Authenticating": "Authenticating",
   "Are you sure you have received the purchase order for the selected items? Once closed, the shipments for the selected items wont be available for receiving later.": "Are you sure you have received the purchase order for the selected items? { space } Once closed, the shipments for the selected items won't be available for receiving later.",
   "Arrival date": "Arrival date",
+  "Built: ": "Built: {builtDateTime}",
   "Cancel": "Cancel",
   "Change": "Change",
   "Choosing a product identifier allows you to view products with your preferred identifiers.": "Choosing a product identifier allows you to view products with your preferred identifiers.",
@@ -123,6 +124,7 @@
   "To close the purchase order, select all.": "To close the purchase order, select all.",
   "Unable to update product identifier preference": "Unable to update product identifier preference",
   "Username": "Username",
+  "Version: ": "Version: {appVersion}",
   "You do not have permission to access this page": "You do not have permission to access this page",
   "ZeroQuantity": "ZeroQuantity"
 }

src/store/modules/user/UserState.ts

@@ -7,4 +7,5 @@ export default interface UserState {
     facilityLocationsByFacilityId: any;
     productIdentificationPref: any;
     permissions: any;
+    pwaState: any;
 }

src/store/modules/user/actions.ts

@@ -348,6 +348,10 @@ const actions: ActionTree<UserState, RootState> = {
     } catch(err) {
       console.error(err)
     }
+  },
+
+  updatePwaState({ commit }, payload) {
+    commit(types.USER_PWA_STATE_UPDATED, payload);
   }
 }
 

src/store/modules/user/getters.ts

@@ -38,6 +38,9 @@ const getters: GetterTree <UserState, RootState> = {
     },
     getProductIdentificationPref: (state) => {
         return state.productIdentificationPref;
+    },
+    getPwaState(state) {
+        return state.pwaState;
     }
 }
 export default getters;

src/store/modules/user/index.ts

@@ -18,6 +18,10 @@ const userModule: Module<UserState, RootState> = {
       productIdentificationPref: {
         primaryId: 'productId',
         secondaryId: ''
+      },
+      pwaState: {
+        updateExists: false,
+        registration: null,
       }
     },
     getters,

src/store/modules/user/mutation-types.ts

@@ -7,4 +7,5 @@ export const USER_INSTANCE_URL_UPDATED = SN_USER + '/INSTANCE_URL_UPDATED'
 export const USER_CURRENT_ECOM_STORE_UPDATED = SN_USER + '/CURRENT_ECOM_STORE_UPDATED'
 export const USER_FACILITY_LOCATIONS_BY_FACILITY_ID = SN_USER + '/FACILITY_LOCATIONS_BY_FACILITY_ID'
 export const USER_PREF_PRODUCT_IDENT_CHANGED = SN_USER + '/PREF_PRODUCT_IDENT_CHANGED'
-export const USER_PERMISSIONS_UPDATED = SN_USER + '/PERMISSIONS_UPDATED'
+export const USER_PERMISSIONS_UPDATED = SN_USER + '/PERMISSIONS_UPDATED'
+export const USER_PWA_STATE_UPDATED = SN_USER + '/PWA_STATE_UPDATED'

src/store/modules/user/mutations.ts

@@ -33,6 +33,10 @@ const mutations: MutationTree <UserState> = {
     },
     [types.USER_PERMISSIONS_UPDATED] (state, payload) {
         state.permissions = payload
+    },
+    [types.USER_PWA_STATE_UPDATED](state, payload) {
+        state.pwaState.registration = payload.registration;
+        state.pwaState.updateExists = payload.updateExists;
     }
 }
 export default mutations;

src/views/AddProductModal.vue

@@ -16,7 +16,7 @@
       <ion-list v-for="product in products" :key="product.productId">
         <ion-item lines="none">
           <ion-thumbnail slot="start">
-            <ShopifyImg :src="product.mainImageUrl" />
+            <DxpShopifyImg :src="product.mainImageUrl" />
           </ion-thumbnail>
           <ion-label>
             <!-- Honouring the identifications set by the user on the settings page -->
@@ -61,7 +61,7 @@ import { defineComponent } from 'vue';
 import { closeOutline, checkmarkCircle } from 'ionicons/icons';
 import { mapGetters } from 'vuex'
 import { useStore } from "@/store";
-import { ShopifyImg, translate } from '@hotwax/dxp-components';
+import { DxpShopifyImg, translate } from '@hotwax/dxp-components';
 import { showToast } from '@/utils'
 
 export default defineComponent({
@@ -81,7 +81,7 @@ export default defineComponent({
     IonThumbnail,
     IonTitle,
     IonToolbar,
-    ShopifyImg
+    DxpShopifyImg
   },
   data() {
     return {

src/views/AddProductToPOModal.vue

@@ -15,7 +15,7 @@
       <ion-list v-for="product in products" :key="product.productId">
         <ion-item lines="none">
           <ion-thumbnail slot="start">
-            <ShopifyImg :src="product.mainImageUrl" />
+            <DxpShopifyImg :src="product.mainImageUrl" />
           </ion-thumbnail>
           <ion-label>
             <!-- Honouring the identifications set by the user on the settings page -->
@@ -60,7 +60,7 @@ import { defineComponent } from 'vue';
 import { closeOutline, checkmarkCircle } from 'ionicons/icons';
 import { mapGetters } from 'vuex'
 import { useStore } from "@/store";
-import { ShopifyImg, translate } from '@hotwax/dxp-components';
+import { DxpShopifyImg, translate } from '@hotwax/dxp-components';
 import { showToast } from '@/utils'
 
 export default defineComponent({
@@ -80,7 +80,7 @@ export default defineComponent({
     IonThumbnail,
     IonTitle,
     IonToolbar,
-    ShopifyImg
+    DxpShopifyImg
   },
   data() {
     return {

src/views/PurchaseOrderDetail.vue

@@ -56,7 +56,7 @@
             <div class="product-info">
               <ion-item lines="none">
                 <ion-thumbnail slot="start" @click="openImage(getProduct(item.productId).mainImageUrl, getProduct(item.productId).productName)">
-                  <ShopifyImg size="small" :src="getProduct(item.productId).mainImageUrl" />
+                  <DxpShopifyImg size="small" :src="getProduct(item.productId).mainImageUrl" />
                 </ion-thumbnail>
                 <ion-label class="ion-text-wrap">
                   <h2>{{ productHelpers.getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) }}</h2>
@@ -119,7 +119,7 @@
             <div class="product-info">
               <ion-item lines="none">
                 <ion-thumbnail slot="start" @click="openImage(getProduct(item.productId).mainImageUrl, getProduct(item.productId).productName)">
-                  <ShopifyImg size="small" :src="getProduct(item.productId).mainImageUrl" />
+                  <DxpShopifyImg size="small" :src="getProduct(item.productId).mainImageUrl" />
                 </ion-thumbnail>
                 <ion-label class="ion-text-wrap">
                   <h2>{{ productHelpers.getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) }}</h2>
@@ -184,7 +184,7 @@ import {
 import { defineComponent } from 'vue';
 import { addOutline, cameraOutline, checkmarkDone, copyOutline, eyeOffOutline, eyeOutline, locationOutline, saveOutline, timeOutline } from 'ionicons/icons';
 import ReceivingHistoryModal from '@/views/ReceivingHistoryModal.vue'
-import { ShopifyImg, translate } from '@hotwax/dxp-components';
+import { DxpShopifyImg, translate } from '@hotwax/dxp-components';
 import { useStore, mapGetters } from 'vuex';
 import { useRouter } from 'vue-router';
 import Scanner from "@/components/Scanner.vue"
@@ -198,7 +198,7 @@ import { Actions, hasPermission } from '@/authorization'
 export default defineComponent({
   name: "PurchaseOrderDetails",
   components: {
-    ShopifyImg,
+    DxpShopifyImg,
     IonBackButton,
     IonBadge,
     IonButton,

src/views/ReceivingHistoryModal.vue

@@ -13,7 +13,7 @@
     <ion-list v-for="(item, index) in items" :key="index">
       <ion-item>
         <ion-thumbnail slot="start">
-          <ShopifyImg :src="getProduct(item.productId).mainImageUrl" />
+          <DxpShopifyImg :src="getProduct(item.productId).mainImageUrl" />
         </ion-thumbnail>
         <ion-label>
           {{ item.receiversFullName }}
@@ -52,14 +52,14 @@ import {
 } from '@ionic/vue';
 import { defineComponent } from 'vue';
 import { closeOutline } from 'ionicons/icons';
-import { ShopifyImg, translate } from '@hotwax/dxp-components';
+import { DxpShopifyImg, translate } from '@hotwax/dxp-components';
 import { mapGetters, useStore } from "vuex";
 import { DateTime } from 'luxon';
 
 export default defineComponent({
   name: "ReceivingHistoryModal",
   components: {
-    ShopifyImg,
+    DxpShopifyImg,
     IonButton,
     IonButtons,
     IonContent,