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

src/main.ts

@@ -32,6 +32,7 @@ import store from './store'
 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)
@@ -52,7 +53,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/store/modules/user/UserState.ts

@@ -7,4 +7,5 @@ export default interface UserState {
     url: string;
     token: string;
   }
+  pwaState: any;
 }

src/store/modules/user/actions.ts

@@ -98,6 +98,10 @@ const actions: ActionTree<UserState, RootState> = {
       productStore = (state.current as any).stores.find((store: any) => store.productStoreId === payload.productStoreId);
     }
     commit(types.USER_CURRENT_ECOM_STORE_UPDATED, productStore);
+  },
+
+  updatePwaState({ commit }, payload) {
+    commit(types.USER_PWA_STATE_UPDATED, payload);
   }
 }
 

src/store/modules/user/getters.ts

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

src/store/modules/user/index.ts

@@ -15,6 +15,10 @@ const userModule: Module<UserState, RootState> = {
       omsRedirectionInfo: {
         url: "",
         token: ""
+      },
+      pwaState: {
+        updateExists: false,
+        registration: null,
       }
     },
     getters,

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

@@ -4,4 +4,5 @@ export const USER_END_SESSION = SN_USER + '/END_SESSION'
 export const USER_INFO_UPDATED = SN_USER + '/INFO_UPDATED'
 export const USER_INSTANCE_URL_UPDATED = SN_USER + '/INSTANCE_URL_UPDATED'
 export const USER_CURRENT_ECOM_STORE_UPDATED = SN_USER + '/CURRENT_ECOM_STORE_UPDATED'
-export const USER_OMS_REDIRECTION_INFO_UPDATED = SN_USER + '/OMS_REDIRECTION_INFO_UPDATED'
+export const USER_OMS_REDIRECTION_INFO_UPDATED = SN_USER + '/OMS_REDIRECTION_INFO_UPDATED'
+export const USER_PWA_STATE_UPDATED = SN_USER + '/PWA_STATE_UPDATED'

src/store/modules/user/mutations.ts

@@ -22,6 +22,10 @@ const mutations: MutationTree <UserState> = {
     },
     [types.USER_OMS_REDIRECTION_INFO_UPDATED](state, payload) {
         state.omsRedirectionInfo = payload;
-    }
+    },
+    [types.USER_PWA_STATE_UPDATED](state, payload) {
+        state.pwaState.registration = payload.registration;
+        state.pwaState.updateExists = payload.updateExists;
+    },
 }
 export default mutations;

src/views/Settings.vue

@@ -72,13 +72,7 @@
       </section>
       <hr />
 
-      <div class="section-header">
-        <h1>
-          {{ translate("App") }}
-          <p class="overline" >{{ translate("Version: ", { appVersion }) }}</p>
-        </h1>
-        <p class="overline">{{ translate("Built: ", { builtDateTime: getDateTime(appInfo.builtTime) }) }}</p>
-      </div>
+      <DxpAppVersionInfo />
 
       <section>
         <ion-card>
@@ -102,28 +96,21 @@
 
 <script setup lang="ts">
 import {  IonAvatar, IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonMenuButton, IonPage, IonSelect, IonSelectOption, IonTitle, IonToolbar, modalController } from '@ionic/vue';
-import { computed, onMounted, ref } from 'vue';
+import { computed } from 'vue';
 import { openOutline } from 'ionicons/icons'
 import { useStore } from 'vuex';
 import TimeZoneModal from '@/views/TimezoneModal.vue';
 import Image from '@/components/Image.vue'
-import { DateTime } from "luxon";
 import { translate } from '@/i18n';
 import { goToOms } from "@hotwax/dxp-components";
 
 const store = useStore()
-const appVersion = ref("")
-const appInfo = (process.env.VUE_APP_VERSION_INFO ? JSON.parse(process.env.VUE_APP_VERSION_INFO) : {}) as any
 
 const userProfile = computed(() => store.getters["user/getUserProfile"])
 const currentEComStore = computed(() => store.getters["user/getCurrentEComStore"])
 const oms = computed(() => store.getters["user/getInstanceUrl"])
 const omsRedirectionInfo = computed(() => store.getters["user/getOmsRedirectionInfo"])
 
-onMounted(() => {
-  appVersion.value = appInfo.branch ? (appInfo.branch + "-" + appInfo.revision) : appInfo.tag;
-})
-
 function setEComStore(event: CustomEvent) {
   if(userProfile.value?.stores) {
     store.dispatch("user/setEcomStore", {
@@ -147,10 +134,6 @@ function logout() {
   })
 }
 
-function getDateTime(time: any) {
-  return time ? DateTime.fromMillis(time).toLocaleString(DateTime.DATETIME_MED) : "";
-}
-
 function goToLaunchpad() {
   window.location.href = `${process.env.VUE_APP_LOGIN_URL}`
 }