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

package.json

@@ -17,7 +17,7 @@
     "@capacitor/ios": "^2.5.0",
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/apps-theme": "^1.2.6",
-    "@hotwax/dxp-components": "^1.12.0",
+    "@hotwax/dxp-components": "^1.12.1",
     "@hotwax/oms-api": "^1.10.0",
     "@ionic/core": "~7.6.0",
     "@ionic/vue": "~7.6.0",

src/locales/en.json

@@ -4,6 +4,7 @@
   "Are you sure you want to change the time zone to?": "Are you sure you want to change the time zone to {timeZoneId}?",
   "Back to Launchpad": "Back to Launchpad",
   "Bin ID": "Bin ID",
+  "Built: ": "Built: {builtDateTime}",
   "Camera permission denied.": "Camera permission denied.",
   "Cancel": "Cancel",
   "Change": "Change",
@@ -74,5 +75,6 @@
   "Update time zone": "Update time zone",
   "User is not associated with any facilities.": "User is not associated with any facilities.",
   "User is not associated with any product stores.": "User is not associated with any product stores.",
-  "Username": "Username"
+  "Username": "Username",
+  "Version: ": "Version: {appVersion}"
 }

src/locales/index.ts

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

src/main.ts

@@ -29,7 +29,8 @@ import i18n from './i18n'
 import store from './store'
 import { dxpComponents } from '@hotwax/dxp-components'
 import { login, logout, loader } from './user-utils';
-import { getConfig, getProductIdentificationPref, initialise, setProductIdentificationPref } from '@/adapter'
+import { getConfig, initialise, getProductIdentificationPref, setProductIdentificationPref } from '@/adapter'
+import localeMessages from './locales';
 
 const app = createApp(App)
   .use(IonicVue, {
@@ -47,7 +48,8 @@ const app = createApp(App)
     getConfig,
     getProductIdentificationPref,
     initialise,
-    setProductIdentificationPref
+    setProductIdentificationPref,
+    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

@@ -4,5 +4,6 @@ export default interface UserState {
     currentFacility: object;
     instanceUrl: string;
     picklistItemSortBy: string;
+    pwaState: any;
     currentEComStore: any;
 }

src/store/modules/user/actions.ts

@@ -173,6 +173,10 @@ const actions: ActionTree<UserState, RootState> = {
 
   updateSortBy({ commit }, payload) {
     commit(types.USER_SORTBY_UPDATED, payload)
+  },
+
+  updatePwaState({ commit }, payload) {
+    commit(types.USER_PWA_STATE_UPDATED, payload);
   }
 }
 export default actions;

src/store/modules/user/getters.ts

@@ -28,6 +28,9 @@ const getters: GetterTree <UserState, RootState> = {
     getPicklistItemSortBy (state) {
         return state.picklistItemSortBy;
     },
+    getPwaState(state) {
+        return state.pwaState;
+    },
     getBaseUrl(state) {
         let baseURL = process.env.VUE_APP_BASE_URL;
         if (!baseURL) baseURL = state.instanceUrl;

src/store/modules/user/index.ts

@@ -13,7 +13,11 @@ const userModule: Module<UserState, RootState> = {
       currentEComStore: {},
       currentFacility: {},
       instanceUrl: '',
-      picklistItemSortBy: 'productName'
+      picklistItemSortBy: 'productName',
+      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_CURRENT_FACILITY_UPDATED = SN_USER + '/CURRENT_FACILITY_UPDATED'
 export const USER_INSTANCE_URL_UPDATED = SN_USER + '/INSTANCE_URL_UPDATED' 
 export const USER_SORTBY_UPDATED = SN_USER + '/SORTBY_UPDATED'
-export const USER_CURRENT_ECOM_STORE_UPDATED = SN_USER + '/CURRENT_ECOM_STORE_UPDATED'
+export const USER_PWA_STATE_UPDATED = SN_USER + '/PWA_STATE_UPDATED'
+export const USER_CURRENT_ECOM_STORE_UPDATED = SN_USER + '/CURRENT_ECOM_STORE_UPDATED'

src/store/modules/user/mutations.ts

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

src/views/Settings.vue

@@ -52,13 +52,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>
         <DxpProductIdentifier />
 
@@ -103,7 +99,7 @@
 import { mapGetters, useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import Image from '@/components/Image.vue';
 import { DateTime } from 'luxon';
 import TimeZoneModal from '@/views/TimezoneModal.vue';
 
 export default defineComponent({
@@ -131,8 +127,6 @@
   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: "",
       sortOptions: JSON.parse(process.env.VUE_APP_PICKLISTS_SORT_OPTIONS)
     };
   },
@@ -144,9 +138,6 @@
       picklistItemSortBy: 'user/getPicklistItemSortBy'
     })
   },
-  mounted() {
-    this.appVersion = this.appInfo.branch ? (this.appInfo.branch + "-" + this.appInfo.revision) : this.appInfo.tag;
-  },
   methods: {
     async changeTimeZone() {
       const timeZoneModal = await modalController.create({
@@ -177,9 +168,6 @@
     goToLaunchpad() {
       window.location.href = `${process.env.VUE_APP_LOGIN_URL}`
     },
-    getDateTime(time: any) {
-      return DateTime.fromMillis(time).toLocaleString(DateTime.DATETIME_MED);
-    },
     updateSortBy(event: any) {
       this.store.dispatch('user/updateSortBy', event.detail.value)
     }

tsconfig.json

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