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

src/locales/en.json

@@ -3,6 +3,7 @@
   "Are you sure you want to change the time zone to?": "Are you sure you want to change the time zone to {timeZoneId}?",
   "Authenticating": "Authenticating",
   "Back to Launchpad": "Back to Launchpad",
+  "Built: ": "Built: {builtDateTime}",
   "Camera permission denied.": "Camera permission denied.",
   "Cancel": "Cancel",
   "Change": "Change",
@@ -80,6 +81,7 @@
   "Variance": "Variance",
   "Variance reason": "Variance reason",
   "Variance updated successfully": "Variance updated successfully",
+  "Version: ": "Version: {appVersion}",
   "View": "View",
   "You do not have permission to access the app.": "You do not have permission to access the app.",
   "You do not have permission to access this page": "You do not have permission to access this page"

src/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 permissionActions from '@/authorization/Actions';
 import { dxpComponents } from '@hotwax/dxp-components'
 import { login, logout, loader } from './user-utils';
 import { getConfig, getProductIdentificationPref, initialise, setProductIdentificationPref } from '@/adapter';
+import localeMessages from './locales';
 
 const app = createApp(App)
   .use(IonicVue, {
@@ -55,6 +56,7 @@ const app = createApp(App)
     getConfig,
     getProductIdentificationPref,
     initialise,
+    localeMessages,
     setProductIdentificationPref
   });
 

src/store/modules/user/UserState.ts

@@ -3,6 +3,7 @@ export default interface UserState {
     current: any;
     currentFacility: object | null;
     permissions: any;
+    pwaState: any;
     instanceUrl: string;
     config: any;
     currentEComStore: any;

src/store/modules/user/actions.ts

@@ -196,5 +196,9 @@ const actions: ActionTree<UserState, RootState> = {
   updateViewQOHConfig({ commit }, config) {
     commit(types.USER_VIEW_QOH_CNFG_UPDATED, config)
   },
+
+  updatePwaState({ commit }, payload) {
+    commit(types.USER_PWA_STATE_UPDATED, payload);
+  }
 }
 export default actions;

src/store/modules/user/getters.ts

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

src/store/modules/user/index.ts

@@ -17,7 +17,11 @@ const userModule: Module<UserState, RootState> = {
         currentQOHViewConfig: {},
         viewQOH: false
       },
-      currentEComStore: {}
+      currentEComStore: {},
+      pwaState: {
+        updateExists: false,
+        registration: null,
+      }
     },
     getters,
     actions,

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

@@ -6,4 +6,5 @@ export const USER_CURRENT_FACILITY_UPDATED = SN_USER + '/CURRENT_FACILITY_UPDATE
 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_VIEW_QOH_CNFG_UPDATED = SN_USER + '/VIEW_QOH_CNFG_UPDATED'
+export const USER_VIEW_QOH_CNFG_UPDATED = SN_USER + '/VIEW_QOH_CNFG_UPDATED'
+export const USER_PWA_STATE_UPDATED = SN_USER + '/PWA_STATE_UPDATED'

src/store/modules/user/mutations.ts

@@ -32,6 +32,10 @@ const mutations: MutationTree <UserState> = {
     [types.USER_VIEW_QOH_CNFG_UPDATED] (state, payload) {
         state.config.viewQOH = payload.viewQOH;
         state.config.currentQOHViewConfig = payload.currentQOHViewConfig;
-    }
+    },
+    [types.USER_PWA_STATE_UPDATED](state, payload) {
+        state.pwaState.registration = payload.registration;
+        state.pwaState.updateExists = payload.updateExists;
+    },
 }
 export default mutations;

src/views/Settings.vue

@@ -53,13 +53,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,6 @@ import { codeWorkingOutline, ellipsisVertical, personCircleOutline, storefrontOu
 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';
 import { Actions, hasPermission } from '@/authorization'
 import { UserService } from '@/services/UserService'
@@ -136,15 +131,10 @@ 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: "",
       currentFacilityId: "",
       currentQOHViewConfig: {} as any
     };
   },
-  mounted() {
-    this.appVersion = this.appInfo.branch ? (this.appInfo.branch + "-" + this.appInfo.revision) : this.appInfo.tag;
-  },
   ionViewWillEnter() {
     this.currentFacilityId = this.currentFacility.facilityId;
     this.getViewQOHConfig();
@@ -270,9 +260,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(){

tsconfig.json

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