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

src/locales/en.json

@@ -38,6 +38,7 @@
   "Blank": "Blank",
   "Brokering": "Brokering",
   "Brokering queue": "Brokering queue",
+  "Built: ": "Built: {builtDateTime}",
   "Browser TimeZone": "Browser TimeZone",
   "Browser time zone": "Browser time zone",
   "Bulk editor": "Bulk editor",
@@ -304,6 +305,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/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

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

@@ -76,14 +76,7 @@
         </ion-card>
       </section>
       <hr />
-
-      <div class="section-header">
-        <h1>
-          {{ translate('App') }}
-          <p class="overline" >{{ "Version: " + appVersion }}</p>
-        </h1>
-        <p class="overline">{{ "Built: " + getDateTime(appInfo.builtTime) }}</p>
-      </div>
+      <DxpAppVersionInfo />
 
       <section>
         <DxpTimeZoneSwitcher @timeZoneUpdated="timeZoneUpdated" />
@@ -99,7 +92,6 @@ import { codeWorkingOutline, ellipsisVertical, personCircleOutline, openOutline,
 import { mapGetters, useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import Image from '@/components/Image.vue'
-import { DateTime } from 'luxon';
 import { translate } from '@hotwax/dxp-components';
 
 export default defineComponent({
@@ -126,9 +118,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: {
@@ -139,9 +129,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
@@ -168,9 +155,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}`
     }