Implemented: appVersionInfo component from dxp-components on settings page

package.json

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

src/locales/en.json

@@ -10,6 +10,7 @@
   "Arrived": "Arrived",
   "Authenticating": "Authenticating",
   "Assign Pickers": "Assign Pickers",
+  "Built: ": "Built: {builtDateTime}",
   "Catalog": "Catalog",
   "Cancel": "Cancel",
   "Cancel order before fulfillment": "Cancel order before fulfillment",
@@ -186,6 +187,7 @@
   "Worn Display": "Worn Display",
   "This order will be removed from your dashboard. This action cannot be undone.": "This order will be removed from your dashboard.{ space } This action cannot be undone.",
   "Update notification preferences": "Update notification preferences",
+  "Version: ": "Version: {appVersion}",
   "View shipping orders along with pickup orders.": "View shipping orders along with pickup orders.",
   "You do not have permission to access this page": "You do not have permission to access this page",
   "Zipcode": "Zipcode"

src/locales/es.json

@@ -10,6 +10,7 @@
   "Arrived": "Llegó",
   "Authenticating": "Authenticating",
   "Assign Pickers": "Asignar recolectores",
+  "Built: ": "Built: {builtDateTime}",
   "Catalog": "Catálogo",
   "Cancel": "Cancelar",
   "Cancel order before fulfillment": "Cancelar pedido antes del cumplimiento",
@@ -184,6 +185,7 @@
   "Worn Display": "Pantalla desgastada",
   "This order will be removed from your dashboard. This action cannot be undone.": "Este pedido será eliminado de tu panel de control.{ space } Esta acción no se puede deshacer.",
   "Update notification preferences": "Update notification preferences",
+  "Version: ": "Version: {appVersion}",
   "View shipping orders along with pickup orders.": "Ver órdenes de envío junto con órdenes de recogida.",
   "You do not have permission to access this page": "No tienes permiso para acceder a esta página",
   "Zipcode": "Código postal",

src/locales/ja.json

@@ -10,6 +10,7 @@
   "Arrived": "到着",
   "Authenticating": "Authenticating",
   "Assign Pickers": "受け取り人の割当",
+  "Built: ": "Built: {builtDateTime}",
   "Catalog": "カタログ",
   "Cancel": "キャンセル",
   "Cancel order before fulfillment": "注文のキャンセル",
@@ -183,6 +184,7 @@
   "Worn Display": "すり切れたディスプレイ",
   "This order will be removed from your dashboard. This action cannot be undone.": "この注文はダッシュボードから削除されます。{ space } この操作は元に戻せません。",
   "Update notification preferences": "Update notification preferences",
+  "Version: ": "Version: {appVersion}",
   "View shipping orders along with pickup orders.": "店舗受取の注文と一緒に配送注文を表示します",
   "You do not have permission to access this page": "このページにアクセスする権限がありません",
   "Zipcode": "郵便番号"

src/router/index.ts

@@ -13,7 +13,7 @@ import { showToast } from '@/utils'
 import { translate } from '@hotwax/dxp-components'
 
 import 'vue-router'
-import { Login, useAuthStore } from '@hotwax/dxp-components';
+import { DxpLogin, useAuthStore } from '@hotwax/dxp-components';
 import { loader } from '@/utils/user';
 
 // Defining types for the meta values
@@ -83,7 +83,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/login',
     name: 'Login',
-    component: Login,
+    component: DxpLogin,
     beforeEnter: loginGuard
   },
   {

src/store/modules/user/UserState.ts

@@ -6,7 +6,8 @@ export default interface UserState {
     preference: any;
     permissions: any;
     currentEComStore: any;
-    partialOrderRejectionConfig: any
+    partialOrderRejectionConfig: any;
+    pwaState: any;
     notifications: any;
     notificationPrefs: any;
     firebaseDeviceId: string;

src/store/modules/user/actions.ts

@@ -211,6 +211,10 @@ const actions: ActionTree<UserState, RootState> = {
     }
   },
 
+  updatePwaState({commit}, payload) {
+    commit(types.USER_PWA_STATE_UPDATED, payload);
+  },
+
   async getPartialOrderRejectionConfig ({ commit }) {
     let config = {};
     const params = {

src/store/modules/user/getters.ts

@@ -27,6 +27,9 @@ const getters: GetterTree <UserState, RootState> = {
         const baseUrl = process.env.VUE_APP_BASE_URL;
         return baseUrl ? baseUrl : state.instanceUrl;
     },
+    getPwaState (state) {
+        return state.pwaState;
+    },
     showShippingOrders (state) {
         return state.preference.showShippingOrders;
     },

src/store/modules/user/index.ts

@@ -17,6 +17,10 @@ const userModule: Module<UserState, RootState> = {
         showPackingSlip: false,
         configurePicker: false
       },
+      pwaState: {
+        updateExists: false,
+        registration: null,
+      },
       currentEComStore: {},
       partialOrderRejectionConfig: {},
       permissions: [],

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

@@ -8,6 +8,7 @@ export const USER_PREFERENCE_UPDATED = SN_USER + '/PREFERENCE_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_PARTIAL_ORDER_REJECTION_CONFIG_UPDATED = SN_USER + '/PARTIAL_ORDER_REJECTION_CONFIG_UPDATED'
+export const USER_PWA_STATE_UPDATED = SN_USER + '/PWA_STATE_UPDATED'
 export const USER_NOTIFICATIONS_UPDATED = SN_USER + '/NOTIFICATIONS_UPDATED'
 export const USER_NOTIFICATIONS_PREFERENCES_UPDATED = SN_USER + '/NOTIFICATIONS_PREFERENCES_UPDATED'
 export const USER_FIREBASE_DEVICEID_UPDATED = SN_USER + '/FIREBASE_DEVICEID_UPDATED'

src/store/modules/user/mutations.ts

@@ -33,6 +33,10 @@ const mutations: MutationTree <UserState> = {
     [types.USER_PARTIAL_ORDER_REJECTION_CONFIG_UPDATED] (state, payload) {
         state.partialOrderRejectionConfig = payload
     },
+    [types.USER_PWA_STATE_UPDATED] (state, payload) {
+        state.pwaState.registration = payload.registration;
+        state.pwaState.updateExists = payload.updateExists;
+    },
     [types.USER_NOTIFICATIONS_UPDATED] (state, payload) {
         state.notifications = payload
     },

src/views/Settings.vue

@@ -108,13 +108,7 @@
       </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>
         <ProductIdentifier />
@@ -239,7 +233,6 @@ import { mapGetters, useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import TimeZoneModal from './TimezoneModal.vue';
 import Image from '@/components/Image.vue';
-import { DateTime } from 'luxon';
 import { UserService } from '@/services/UserService'
 import { showToast } from '@/utils';
 import { hasError, removeClientRegistrationToken, subscribeTopic, unsubscribeTopic } from '@/adapter'
@@ -275,8 +268,6 @@ 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: "",
       rerouteFulfillmentConfig: {
         // TODO Remove fromDate and directly store values making it loosely coupled with OMS
         allowDeliveryMethodUpdate: {},
@@ -302,9 +293,6 @@ export default defineComponent({
       notificationPrefs: 'user/getNotificationPrefs'
     })
   },
-  mounted() {
-    this.appVersion = this.appInfo.branch ? (this.appInfo.branch + "-" + this.appInfo.revision) : this.appInfo.tag;
-  },
   async ionViewWillEnter() {
     // Only fetch configuration when environment mapping exists
     if (Object.keys(this.rerouteFulfillmentConfigMapping).length > 0) {
@@ -366,9 +354,6 @@ export default defineComponent({
     setConfigurePickerPreference (ev: any){
       this.store.dispatch('user/setUserPreference', { configurePicker: ev.detail.checked })
     },
-    getDateTime(time: any) {
-      return DateTime.fromMillis(time).toLocaleString(DateTime.DATETIME_MED);
-    },
     async getAvailableShipmentMethods () {
       this.availableShipmentMethods = [];
       try {