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

package.json

@@ -18,8 +18,8 @@
     "@capacitor/ios": "^2.5.0",
     "@casl/ability": "^6.0.0",
     "@hotwax/app-version-info": "^1.0.0",
-    "@hotwax/apps-theme": "^1.2.3",
-    "@hotwax/dxp-components": "1.11.0",
+    "@hotwax/apps-theme": "^1.2.6",
+    "@hotwax/dxp-components": "1.12.1",
     "@hotwax/oms-api": "^1.10.0",
     "@ionic/core": "6.7.5",
     "@ionic/vue": "6.7.5",

src/i18n/locales/en.json

@@ -21,6 +21,7 @@
     "back-order": "back-order",
     "Back-order": "Back-order",
     "Broker orders": "Broker orders",
+    "Built: ": "Built: {builtDateTime}",
     "eCom Store": "eCom Store",
     "Cancel": "Cancel",
     "Cancel item": "Cancel item",
@@ -236,6 +237,7 @@
     "Username": "Username",
     "variant": "variant",
     "variants": "variants",
+    "Version: ": "Version: {appVersion}",
     "When this product entered there was no sellable inventory and was available in": "When this product entered {categoryName} there was no sellable inventory and {poItemATP} was available in {poId}",
     "With Hold Pre-order Queue Physical Inventory disabled, the excess inventory is now available for sale online after deducting the queues": "With Hold Pre-order Queue Physical Inventory disabled, the excess inventory is now available for sale online after deducting the queues",
     "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/i18n/locales/index.ts

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

src/main.ts

@@ -34,6 +34,7 @@ import permissionPlugin from '@/authorization';
 import permissionRules from '@/authorization/Rules';
 import permissionActions from '@/authorization/Actions';
 import { getConfig, initialise } from '@/adapter'
+import localeMessages from './i18n/locales';
 
 const app = createApp(App)
   .use(IonicVue, {
@@ -53,7 +54,8 @@ const app = createApp(App)
     loader,
     appLoginUrl: process.env.VUE_APP_LOGIN_URL as string,
     getConfig: getConfig,
-    initialise: initialise
+    initialise: initialise,
+    localeMessages
   });
 
 // Filters are removed in Vue 3 and global filter introduced https://v3.vuejs.org/guide/migration/filters.html#global-filters

src/store/modules/user/UserState.ts

@@ -2,6 +2,7 @@ export default interface UserState {
     token: string;
     current: object | null;
     permissions: any;
+    pwaState: any;
     instanceUrl: string;
     currentEComStore: object;
 }

src/store/modules/user/actions.ts

@@ -168,5 +168,10 @@ const actions: ActionTree<UserState, RootState> = {
       commit(types.USER_INSTANCE_URL_UPDATED, payload)
       updateInstanceUrl(payload)
     },
+
+    updatePwaState({ commit }, payload) {
+      commit(types.USER_PWA_STATE_UPDATED, payload);
+    }
+
 }
 export default actions;

src/store/modules/user/getters.ts

@@ -27,6 +27,9 @@ const getters: GetterTree <UserState, RootState> = {
         if (!baseURL) baseURL = state.instanceUrl;
         return baseURL.startsWith('http') ? baseURL : `https://${baseURL}.hotwax.io/api/`;
     },
+    getPwaState(state) {
+        return state.pwaState;
+    },
     getCurrentEComStore(state) {
         return state.currentEComStore
     }

src/store/modules/user/index.ts

@@ -12,7 +12,11 @@ const userModule: Module<UserState, RootState> = {
       permissions: [],
       current: {},
       instanceUrl: '',
-      currentEComStore: {}
+      currentEComStore: {},
+      pwaState: {
+        updateExists: false,
+        registration: null,
+      }
     },
     getters,
     actions,

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

@@ -5,4 +5,5 @@ export const USER_INFO_UPDATED = SN_USER + '/INFO_UPDATED'
 export const USER_INSTANCE_URL_UPDATED = SN_USER + '/INSTANCE_URL_UPDATED' 
 export const USER_PERMISSIONS_UPDATED = SN_USER + '/PERMISSIONS_UPDATED'
 export const USER_CURRENT_ECOM_STORE_UPDATED = SN_USER + '/CURRENT_ECOM_STORE_UPDATED'
-export const USER_STORE_RSRV_INV_STATUS_UPDATED = SN_USER + '/STORE_RSRV_INV_STATUS_UPDATED'
+export const USER_STORE_RSRV_INV_STATUS_UPDATED = SN_USER + '/STORE_RSRV_INV_STATUS_UPDATED'
+export const USER_PWA_STATE_UPDATED = SN_USER + '/PWA_STATE_UPDATED'

src/store/modules/user/mutations.ts

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

src/views/catalog-product-details.vue

@@ -12,7 +12,7 @@
       <div class="header">
         <div class="product-image">
           <ion-skeleton-text v-if="!Object.keys(currentVariant).length" animated />
-          <ShopifyImg v-else :src="currentVariant.mainImageUrl" />
+          <DxpShopifyImg v-else :src="currentVariant.mainImageUrl" />
         </div>
 
         <div class="product-info" v-if="Object.keys(currentVariant).length">
@@ -397,7 +397,7 @@ import {
   shirtOutline
 } from "ionicons/icons";
 import { useStore } from "@/store";
-import { ShopifyImg } from "@hotwax/dxp-components";
+import { DxpShopifyImg } from "@hotwax/dxp-components";
 import { mapGetters } from "vuex";
 import { showToast, getFeature, hasError } from "@/utils";
 import { translate } from "@/i18n";
@@ -416,7 +416,7 @@ import { Actions, hasPermission } from '@/authorization'
 export default defineComponent({
   name: "catalog-product-details",
   components: {
-    ShopifyImg,
+    DxpShopifyImg,
     IonButtons,
     IonBackButton,
     IonCard,

src/views/catalog.vue

@@ -49,7 +49,7 @@
         <div class="list-item" v-for="product in products" :key="product.productId" @click="viewProduct(product)">
           <ion-item lines="none" class="tablet">
             <ion-thumbnail slot="start">
-              <ShopifyImg :src="product.mainImageUrl" size="small"/>
+              <DxpShopifyImg :src="product.mainImageUrl" size="small"/>
             </ion-thumbnail>
             <ion-label class="ion-text-wrap">
               <h5>{{ product.parentProductName }}</h5>
@@ -109,7 +109,7 @@ import {
 import { defineComponent } from 'vue';
 import { useRouter } from "vue-router";
 import { useStore } from "@/store";
-import { ShopifyImg } from '@hotwax/dxp-components';
+import { DxpShopifyImg } from '@hotwax/dxp-components';
 import { mapGetters } from 'vuex';
 import { DateTime } from 'luxon';
 import { JobService } from '@/services/JobService';
@@ -118,7 +118,7 @@ import { hasError } from '@/utils';
 export default defineComponent({
   name: 'Catalog',
   components: {
-    ShopifyImg,
+    DxpShopifyImg,
     IonButtons,
     IonChip,
     IonCard,

src/views/orders.vue

@@ -117,7 +117,7 @@
               <ion-item lines="none">
                 <ion-thumbnail slot="start">
                   <!-- TODO Create a separate component that handles default image -->
-                  <ShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"></ShopifyImg>
+                  <DxpShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"></DxpShopifyImg>
                 </ion-thumbnail>
                 <ion-label>
                   <h2>{{ item.parentProductName ? item.parentProductName :item.productName }}</h2>
@@ -222,7 +222,7 @@ import { useStore } from "@/store";
 import { mapGetters } from "vuex";
 import { showToast } from '@/utils'
 import { Plugins } from '@capacitor/core';
-import { ShopifyImg } from "@hotwax/dxp-components";
+import { DxpShopifyImg } from "@hotwax/dxp-components";
 import emitter from "@/event-bus";
 
 const { Clipboard } = Plugins;
@@ -255,7 +255,7 @@ export default defineComponent({
     IonToolbar,
     IonInfiniteScroll, 
     IonInfiniteScrollContent,
-    ShopifyImg
+    DxpShopifyImg
   },
   data() {
     return {