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

package.json

@@ -18,8 +18,8 @@
     "@casl/ability": "^6.0.0",
     "@casl/vue": "^2.2.0",
     "@hotwax/app-version-info": "^1.0.0",
-    "@hotwax/apps-theme": "^1.1.0",
-    "@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/locales/en.json

@@ -5,6 +5,7 @@
   "Are you sure you want to change the time zone to?": "Are you sure you want to change the time zone to?",
   "Authenticating": "Authenticating",
   "Blank": "Blank",
+  "Built: ": "Built: {builtDateTime}",
   "Cancel": "Cancel",
   "CANCEL": "CANCEL",
   "Canceling this job will cancel this occurrence and all following occurrences. This job will have to be re-enabled manually to run it again.": "Canceling this job will cancel this occurrence and all following occurrences. This job will have to be re-enabled manually to run it again.",
@@ -162,6 +163,7 @@
   "Username": "Username",
   "virtual, ": "virtual, ",
   "variants": "variants",
+  "Version: ": "Version: {appVersion}",
   "You can also download the products, locations and safety stock you selected in a CSV to upload in other systems": "You can also download the products, locations and safety stock you selected in a CSV to upload in other systems",
   "You do not have permission to access this page": "You do not have permission to access this page",
   "You do not have permission to access the app.": "You do not have permission to access the app."

src/locales/index.ts

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

src/main.ts

@@ -35,6 +35,7 @@ import permissionActions from '@/authorization/Actions';
 import { dxpComponents } from '@hotwax/dxp-components'
 import { login, logout, loader } from './user-utils';
 import { getConfig, initialise } from '@/adapter'
+import localeMessages from './locales';
 
 
 const app = createApp(App)
@@ -58,7 +59,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/store/modules/user/UserState.ts

@@ -1,5 +1,6 @@
 export default interface UserState {
     permissions: any;
+    pwaState: any;
     token: string;
     current: object | null;
     instanceUrl: string;

src/store/modules/user/actions.ts

@@ -187,6 +187,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

@@ -30,5 +30,8 @@ const getters: GetterTree <UserState, RootState> = {
     getUserPermissions (state) {
         return state.permissions;
     },
+    getPwaState(state) {
+        return state.pwaState;
+    },
 }
 export default getters;

src/store/modules/user/index.ts

@@ -13,6 +13,10 @@ const userModule: Module<UserState, RootState> = {
       current: {},
       instanceUrl: '',
       currentEComStore: {},
+      pwaState: {
+        updateExists: false,
+        registration: null,
+      }
     },
     getters,
     actions,

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

@@ -4,4 +4,5 @@ export const USER_END_SESSION = SN_USER + '/END_SESSION'
 export const USER_INFO_UPDATED = SN_USER + '/INFO_UPDATED'
 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_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

@@ -24,5 +24,9 @@ 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/SelectProduct.vue

@@ -120,7 +120,7 @@
             <section class="section-grid">
               <div v-for="variant in product.variants" :key="variant">
                 <ion-card>
-                  <ShopifyImg :src="variant.mainImageUrl" />
+                  <DxpShopifyImg :src="variant.mainImageUrl" />
                   <ion-item lines="none">
                     <ion-label class="ion-text-wrap">
                       {{ variant.productName }}
@@ -163,7 +163,7 @@
 </template>
 
 <script lang="ts">
-import { ShopifyImg } from '@hotwax/dxp-components'; 
+import { DxpShopifyImg } from '@hotwax/dxp-components'; 
 import {
   alertController,
   IonBackButton,
@@ -234,7 +234,7 @@ export default defineComponent({
     IonSelectOption,
     IonTitle,
     IonToolbar,
-    ShopifyImg
+    DxpShopifyImg
   },
   computed: {
     ...mapGetters({

src/views/Settings.vue

@@ -35,7 +35,7 @@
         <h1>{{ $t('OMS') }}</h1>
       </div>
       <section>
-        <OmsInstanceNavigator />
+        <DxpOmsInstanceNavigator />
 
         <ion-card>
           <ion-card-header>
@@ -58,13 +58,9 @@
         </ion-card>
       </section>
       <hr />
-      <div class="section-header">
-        <h1>
-          {{ $t('App') }}
-          <p class="overline" >{{ "Version: " + appVersion }}</p>
-        </h1>
-        <p class="overline">{{ "Built: " + getDateTime(appInfo.builtTime) }}</p>
-      </div>
+
+      <DxpAppVersionInfo />
+
       <section>
         <ion-card>
           <ion-card-header>
@@ -93,7 +89,6 @@ import { mapGetters, useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import TimeZoneModal from '@/views/TimezoneModal.vue';
 import Image from '@/components/Image.vue'
-import { DateTime } from 'luxon';
 
 export default defineComponent({
   name: 'Settings',
@@ -120,9 +115,7 @@ export default defineComponent({
   },
   data() {
     return {
-      baseURL: process.env.VUE_APP_BASE_URL,
-      appInfo: (process.env.VUE_APP_VERSION_INFO ? JSON.parse(process.env.VUE_APP_VERSION_INFO) : {}) as any,
-      appVersion: ""
+      baseURL: process.env.VUE_APP_BASE_URL
     };
   },
   computed: {
@@ -131,9 +124,6 @@ export default defineComponent({
       currentEComStore: 'user/getCurrentEComStore'
     })
   },
-  mounted() {
-    this.appVersion = this.appInfo.branch ? (this.appInfo.branch + "-" + this.appInfo.revision) : this.appInfo.tag;
-  },
   methods: {
     setEComStore(event: any) {
       // If the value is same, no need to update
@@ -165,9 +155,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);
-    }
   },
   setup(){
     const store = useStore();