Implemented: appVersionInfo on settings page from dxp-components(#618)

package.json

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

src/locales/en.json

@@ -39,6 +39,7 @@
   "BOPIS corrections": "BOPIS corrections",
   "Brokering": "Brokering",
   "Brokering queue": "Brokering queue",
+  "Built: ": "Built: {builtDateTime}",
   "Bulk editor": "Bulk editor",
   "Bulk schedule": "Bulk schedule",
   "By default only open and unshipped orders will be imported.": "By default only open and unshipped orders will be imported.",
@@ -293,6 +294,7 @@
   "Upload Pending Process": "Upload Pending Process",
   "Use POs to manage catalog": "Use POs to manage catalog",
   "Username": "Username",
+  "Version: ": "Version: {appVersion}",
   "View catalog": "View catalog",
   "Webhook subscribed successfully": "Webhook subscribed successfully",
   "Webhook unsubscribed successfully": "Webhook unsubscribed successfully",

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)
   .use(IonicVue, {
@@ -56,7 +57,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/router/index.ts

@@ -18,7 +18,7 @@ import { hasPermission } from '@/authorization';
 import { showToast } from '@/utils'
 import { translate } from '@/i18n'
 import 'vue-router'
-import { Login } from '@hotwax/dxp-components';
+import { DxpLogin } from '@hotwax/dxp-components';
 import { useAuthStore } from '@hotwax/dxp-components'
 import { loader } from '@/user-utils';
 
@@ -166,7 +166,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/login',
     name: 'Login',
-    component: Login,
+    component: DxpLogin,
     beforeEnter: loginGuard
   },
   {

src/store/modules/user/UserState.ts

@@ -7,4 +7,5 @@ export default interface UserState {
     shopifyConfigs: any;
     currentShopifyConfig: any;
     productStoreCategories: any;
+    pwaState: any;
 }

src/store/modules/user/actions.ts

@@ -187,6 +187,9 @@ const actions: ActionTree<UserState, RootState> = {
     updateInstanceUrl(payload)
   },
 
+  updatePwaState({commit}, payload) {
+    commit(types.USER_PWA_STATE_UPDATED, payload);
+  },
 
   async getShopifyConfig({ commit }, productStoreId) {
     if (!productStoreId) {

src/store/modules/user/getters.ts

@@ -36,6 +36,9 @@ const getters: GetterTree <UserState, RootState> = {
     getProductStoreCategories(state) {
         return state.productStoreCategories;
     },
+    getPwaState (state) {
+        return state.pwaState;
+    },
     getCurrentEComStore(state) {
         return state.currentEComStore
     },

src/store/modules/user/index.ts

@@ -18,7 +18,11 @@ const userModule: Module<UserState, RootState> = {
         productStoreId: "",
         storeName: "None"
       },
-      productStoreCategories: {}
+      productStoreCategories: {},
+      pwaState: {
+        updateExists: false,
+        registration: null,
+      },
     },
     getters,
     actions,

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

@@ -7,4 +7,5 @@ export const USER_SHOPIFY_CONFIGS_UPDATED = SN_USER + '/SHOPIFY_CONFIGS_UPDATED'
 export const USER_CURRENT_SHOPIFY_CONFIG_UPDATED = SN_USER + '/SHOPIFY_CONFIG_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_PWA_STATE_UPDATED = SN_USER + '/PWA_STATE_UPDATED'
 export const USER_PRDCT_STR_CATGRS_UPDATED = SN_USER + '/PRDCT_STR_CATGRS_UPDATED'

src/store/modules/user/mutations.ts

@@ -33,6 +33,10 @@ const mutations: MutationTree <UserState> = {
     [types.USER_PRDCT_STR_CATGRS_UPDATED] (state, payload) {
         state.productStoreCategories = 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

@@ -78,14 +78,7 @@
         </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>
@@ -117,7 +110,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',
@@ -144,9 +136,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: {
@@ -157,9 +147,6 @@ export default defineComponent({
       currentShopifyConfig: 'user/getCurrentShopifyConfig',
     })
   },
-  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
@@ -189,9 +176,6 @@ export default defineComponent({
         }
       })
     },
-    getDateTime(time: any) {
-      return DateTime.fromMillis(time).toLocaleString(DateTime.DATETIME_MED);
-    },
     goToLaunchpad() {
       window.location.href = `${process.env.VUE_APP_LOGIN_URL}`
     }

tsconfig.json

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