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,8 @@ 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 />
 

tsconfig.json

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