Implemented: Added the support for using facility selector from dxp-c…

…omponent

package.json

@@ -17,8 +17,8 @@
     "@casl/ability": "^6.0.0",
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/apps-theme": "^1.2.6",
-    "@hotwax/dxp-components": "^1.15.2",
-    "@hotwax/oms-api": "^1.14.0",
+    "@hotwax/dxp-components": "file:../dxp-components",
+    "@hotwax/oms-api": "file:../oms-api",
     "@ionic/core": "^7.6.0",
     "@ionic/vue": "^7.6.0",
     "@ionic/vue-router": "^7.6.0",

src/components/InventoryDetailsPopover.vue

@@ -54,7 +54,6 @@ export default defineComponent({
       product: "product/getCurrent",
       getProductStock: 'stock/getProductStock',
       getInventoryInformation: 'stock/getInventoryInformation',
-      currentFacility: 'user/getCurrentFacility',
     })   
   },
   async beforeMount () {

src/components/NotificationPreferenceModal.vue

@@ -44,10 +44,10 @@ import {
   modalController,
   alertController,
 } from "@ionic/vue";
-import { defineComponent } from "vue";
+import { computed, defineComponent } from "vue";
 import { closeOutline, save } from "ionicons/icons";
 import { mapGetters, useStore } from "vuex";
-import { translate } from '@hotwax/dxp-components'
+import { translate, useUserStore } from '@hotwax/dxp-components'
 import { showToast } from "@/utils";
 import emitter from "@/event-bus"
 import { generateTopicName } from "@/utils/firebase";
@@ -82,7 +82,6 @@ export default defineComponent({
   },
   computed: {
     ...mapGetters({
-      currentFacility: 'user/getCurrentFacility',
       instanceUrl: 'user/getInstanceUrl',
       notificationPrefs: 'user/getNotificationPrefs'
     }),
@@ -138,7 +137,7 @@ export default defineComponent({
       }
     },
     async handleTopicSubscription() {
-      const facilityId = (this.currentFacility as any).facilityId
+      const facilityId = this.currentFacility.value?.facilityId
       const subscribeRequests = [] as any
       this.notificationPrefToUpdate.subscribe.map(async (enumId: string) => {
         const topicName = generateTopicName(facilityId, enumId)
@@ -182,9 +181,12 @@ export default defineComponent({
   },
   setup() {
     const store = useStore();
+    const userStore = useUserStore()
+    let currentFacility: any = computed(() => userStore.getCurrentFacility) 
 
     return {
       closeOutline,
+      currentFacility,
       translate,
       save,
       store

src/components/ProductListItem.vue

@@ -55,7 +55,6 @@ export default defineComponent({
       getProduct: 'product/getProduct',
       product: "product/getCurrent",
       getProductStock: 'stock/getProductStock',
-      currentFacility: 'user/getCurrentFacility',
     })
   },
   methods: {

src/main.ts

@@ -36,7 +36,7 @@ import { dxpComponents } from '@hotwax/dxp-components'
 import localeMessages from './locales';
 import { login, logout, loader } from '@/utils/user';
 import { addNotification, storeClientRegistrationToken } from '@/utils/firebase';
-import { getConfig, getProductIdentificationPref, initialise, setProductIdentificationPref, setUserLocale, getAvailableTimeZones, setUserTimeZone } from '@/adapter';
+import { getConfig, getProductIdentificationPref, getUserFacilities, getUserPreference, initialise, setProductIdentificationPref, setUserLocale, getAvailableTimeZones, setUserTimeZone, setUserPreference } from '@/adapter';
 import logger from './logger';
 
 const app = createApp(App)
@@ -70,7 +70,10 @@ const app = createApp(App)
     setUserLocale,
     storeClientRegistrationToken,
     getAvailableTimeZones,
-    setUserTimeZone
+    setUserTimeZone,
+    getUserFacilities,
+    setUserPreference,
+    getUserPreference
   });
 
 // Filters are removed in Vue 3 and global filter introduced https://v3.vuejs.org/guide/migration/filters.html#global-filters

src/store/modules/order/actions.ts

@@ -5,13 +5,18 @@ import OrderState from './OrderState'
 import * as types from './mutation-types'
 import { showToast } from "@/utils";
 import { hasError } from '@/adapter'
-import { translate } from "@hotwax/dxp-components";
+import { translate, useUserStore } from "@hotwax/dxp-components";
 import emitter from '@/event-bus'
 import store from "@/store";
 import { prepareOrderQuery } from "@/utils/solrHelper";
 import { getOrderCategory } from "@/utils/order";
 import logger from "@/logger";
 
+const getCurrentFacilityId = () => {
+  const currentFacility: any = useUserStore().getCurrentFacility;
+  return currentFacility?.facilityId
+}
+
 const actions: ActionTree<OrderState , RootState> ={
 
   async getOrderDetails({ dispatch, commit }, payload ) {
@@ -678,7 +683,7 @@ const actions: ActionTree<OrderState , RootState> ={
       inputFields: {
         statusId: "SHIPMENT_SHIPPED",
         shipmentMethodTypeId: "SHIP_TO_STORE",
-        orderFacilityId: this.state.user.currentFacility.facilityId
+        orderFacilityId: getCurrentFacilityId()
       },
       viewSize: payload.viewSize ? payload.viewSize : process.env.VUE_APP_VIEW_SIZE,
       viewIndex: payload.viewIndex ? payload.viewIndex : 0,
@@ -764,7 +769,7 @@ const actions: ActionTree<OrderState , RootState> ={
       inputFields: {
         statusId: "PICKUP_SCHEDULED",
         shipmentMethodTypeId: "SHIP_TO_STORE",
-        orderFacilityId: this.state.user.currentFacility.facilityId
+        orderFacilityId: getCurrentFacilityId()
       },
       viewSize: payload.viewSize ? payload.viewSize : process.env.VUE_APP_VIEW_SIZE,
       viewIndex: payload.viewIndex ? payload.viewIndex : 0,
@@ -850,7 +855,7 @@ const actions: ActionTree<OrderState , RootState> ={
       inputFields: {
         statusId: "SHIPMENT_DELIVERED",
         shipmentMethodTypeId: "SHIP_TO_STORE",
-        orderFacilityId: this.state.user.currentFacility.facilityId
+        orderFacilityId: getCurrentFacilityId()
       },
       viewSize: payload.viewSize ? payload.viewSize : process.env.VUE_APP_VIEW_SIZE,
       viewIndex: payload.viewIndex ? payload.viewIndex : 0,

src/store/modules/stock/actions.ts

@@ -5,22 +5,28 @@ import StockState from './StockState'
 import * as types from './mutation-types'
 import { hasError } from '@/adapter'
 import { showToast } from '@/utils'
-import { translate } from "@hotwax/dxp-components";
+import { translate, useUserStore } from "@hotwax/dxp-components";
 import logger from '@/logger'
 import { prepareOrderQuery } from "@/utils/solrHelper";
 import { UtilService } from '@/services/UtilService';
 
+const getCurrentFacilityId = () => {
+  const currentFacility: any = useUserStore().getCurrentFacility;
+  return currentFacility?.facilityId
+}
+
 const actions: ActionTree<StockState, RootState> = {
   async fetchStock({ commit }, { productId }) {
+    const facilityId = getCurrentFacilityId()
     try {
       const payload = {
         productId: productId,
-        facilityId: this.state.user.currentFacility.facilityId
+        facilityId: facilityId
       }
 
       const resp: any = await StockService.getInventoryAvailableByFacility(payload);
       if (!hasError(resp)) {
-        commit(types.STOCK_ADD_PRODUCT, { productId: payload.productId, facilityId: this.state.user.currentFacility.facilityId, stock: resp.data })
+        commit(types.STOCK_ADD_PRODUCT, { productId: payload.productId, facilityId: facilityId, stock: resp.data })
       } else {
         throw resp.data;
       }
@@ -31,7 +37,7 @@ const actions: ActionTree<StockState, RootState> = {
   },
 
   async fetchInventoryCount({ commit, state }, { productId }) {
-    const facilityId = this.state.user.currentFacility.facilityId;
+    const facilityId = getCurrentFacilityId();
     if (state.inventoryInformation[productId] && state.inventoryInformation[productId][facilityId]) {
       return; 
     }
@@ -60,7 +66,7 @@ const actions: ActionTree<StockState, RootState> = {
   },
 
   async fetchReservedQuantity({ commit, state }, { productId }) {
-    const facilityId = this.state.user.currentFacility.facilityId;
+    const facilityId = getCurrentFacilityId();
     if (state.inventoryInformation[productId] && state.inventoryInformation[productId][facilityId]?.reservedQuantity) {
       return;
     }

src/store/modules/stock/getters.ts

@@ -1,15 +1,20 @@
 import { GetterTree } from 'vuex'
+import { useUserStore } from "@hotwax/dxp-components";
 import StockState from './StockState'
 import RootState from '../../RootState'
-import store from '@/store'
+
+const getCurrentFacilityId = () => {
+  const currentFacility: any = useUserStore().getCurrentFacility;
+  return currentFacility?.facilityId
+}
 
 const getters: GetterTree <StockState, RootState> = {
   getProductStock: (state, RootState) => (productId: any) => {
-    const facilityId = store.state.user?.currentFacility?.facilityId
+    const facilityId = getCurrentFacilityId()
     return state.products[productId] ? state.products[productId][facilityId] ? state.products[productId][facilityId] : {} : {}
   },
   getInventoryInformation: (state) => (productId: any) => {
-    const facilityId = store.state.user?.currentFacility?.facilityId
+    const facilityId = getCurrentFacilityId()
     return state.inventoryInformation[productId] ? state.inventoryInformation[productId][facilityId] ? state.inventoryInformation[productId][facilityId] : {} : {};
   }
 }

src/store/modules/user/UserState.ts

@@ -1,7 +1,6 @@
 export default interface UserState {
     token: string;
     current: any;
-    currentFacility: object;
     instanceUrl: string;
     preference: any;
     permissions: any;

src/store/modules/user/actions.ts

@@ -9,7 +9,6 @@ import {
   getUserPreference,
   getNotificationEnumIds,
   getNotificationUserPrefTypeIds,
-  getUserFacilities,
   hasError,
   logout,
   resetConfig,
@@ -71,8 +70,9 @@ const actions: ActionTree<UserState, RootState> = {
 
       //fetching user facilities
       const isAdminUser = appPermissions.some((appPermission: any) => appPermission?.action === "APP_STOREFULFILLMENT_ADMIN" );
-      const baseURL = store.getters['user/getBaseUrl'];
-      const facilities = await getUserFacilities(token, baseURL, userProfile?.partyId, "PICKUP", isAdminUser);
+      const facilities = await useUserStore().getUserFacilities(userProfile?.partyId, "PICKUP", isAdminUser)
+      await useUserStore().getPreferredFacility('SELECTED_FACILITY')
+
       userProfile.facilities = facilities;
 
       // removing duplicate records as a single user can be associated with a facility by multiple roles.
@@ -82,7 +82,7 @@ const actions: ActionTree<UserState, RootState> = {
         return uniqueFacilities
       }, []);
       // TODO Use a separate API for getting facilities, this should handle user like admin accessing the app
-      const currentFacility = userProfile.facilities.length > 0 ? userProfile.facilities[0] : {};
+      const currentFacility: any = useUserStore().getCurrentFacility
       const currentEComStore = await UserService.getCurrentEComStore(token, currentFacility?.facilityId);
       const userPreference = await getUserPreference(token, getters['getBaseUrl'], 'BOPIS_PREFERENCE')
 
@@ -96,7 +96,6 @@ const actions: ActionTree<UserState, RootState> = {
 
       // TODO user single mutation
       commit(types.USER_INFO_UPDATED, userProfile);
-      commit(types.USER_CURRENT_FACILITY_UPDATED, currentFacility);
       commit(types.USER_CURRENT_ECOM_STORE_UPDATED, currentEComStore)
       commit(types.USER_PREFERENCE_UPDATED, userPreference)
       commit(types.USER_PERMISSIONS_UPDATED, appPermissions);
@@ -175,20 +174,14 @@ const actions: ActionTree<UserState, RootState> = {
   },
 
   /**
-   * update current facility information
+   * run after updating current facility
    */
-  async setFacility ({ commit, dispatch, state }, payload) {
-    let facility = payload.facility;
-    if(!facility && state.current?.facilities) {
-      facility = state.current.facilities.find((facility: any) => facility.facilityId === payload.facilityId);
-    }
+  async setFacilityUpdates ({ commit, dispatch, state }, selectedFacilityId) {
     // clearing the orders state whenever changing the facility
     dispatch("order/clearOrders", null, {root: true})
     dispatch("product/clearProducts", null, {root: true})
-    commit(types.USER_CURRENT_FACILITY_UPDATED, facility);
-    const eComStore = await UserService.getCurrentEComStore(undefined, facility?.facilityId);
+    const eComStore = await UserService.getCurrentEComStore(state.token, selectedFacilityId);
     commit(types.USER_CURRENT_ECOM_STORE_UPDATED, eComStore)
-
     await useProductIdentificationStore().getIdentificationPref(eComStore?.productStoreId)
   },
   /**
@@ -301,7 +294,8 @@ const actions: ActionTree<UserState, RootState> = {
 
   async fetchNotificationPreferences({ commit, state }) {
     let resp = {} as any
-    const facilityId = (state.currentFacility as any).facilityId
+    const currentFacility: any = useUserStore().getCurrentFacility
+    const facilityId = currentFacility?.facilityId
     let notificationPreferences = [], enumerationResp = [], userPrefIds = [] as any
     try {
       resp = await getNotificationEnumIds(process.env.VUE_APP_NOTIF_ENUM_TYPE_ID)

src/store/modules/user/getters.ts

@@ -20,9 +20,6 @@ const getters: GetterTree <UserState, RootState> = {
     getUserProfile (state) {
         return state.current
     },
-    getCurrentFacility (state){
-        return state.currentFacility
-    },
     getInstanceUrl (state) {
         const baseUrl = process.env.VUE_APP_BASE_URL;
         return baseUrl ? baseUrl : state.instanceUrl;

src/store/modules/user/index.ts

@@ -10,7 +10,6 @@ const userModule: Module<UserState, RootState> = {
     state: {
       token: '',
       current: {},
-      currentFacility: {},
       instanceUrl: '',
       preference: {
         showShippingOrders: false,

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

@@ -2,7 +2,6 @@ export const SN_USER = 'user'
 export const USER_TOKEN_CHANGED = SN_USER + '/TOKEN_CHANGED'
 export const USER_END_SESSION = SN_USER + '/END_SESSION'
 export const USER_INFO_UPDATED = SN_USER + '/INFO_UPDATED'
-export const USER_CURRENT_FACILITY_UPDATED = SN_USER + '/CURRENT_FACILITY_UPDATED'
 export const USER_INSTANCE_URL_UPDATED = SN_USER + '/INSTANCE_URL_UPDATED' 
 export const USER_PREFERENCE_UPDATED = SN_USER + '/PREFERENCE_UPDATED'
 export const USER_CURRENT_ECOM_STORE_UPDATED = SN_USER + '/CURRENT_ECOM_STORE_UPDATED'

src/store/modules/user/mutations.ts

@@ -9,7 +9,6 @@ const mutations: MutationTree <UserState> = {
     [types.USER_END_SESSION] (state) {
       state.token = ''
       state.current = {}
-      state.currentFacility = {}
       state.permissions = []
       state.preference= {
         showShippingOrders: false,
@@ -21,9 +20,6 @@ const mutations: MutationTree <UserState> = {
     [types.USER_INFO_UPDATED] (state, payload) {
         state.current = payload
     },
-    [types.USER_CURRENT_FACILITY_UPDATED] (state, payload) {
-        state.currentFacility = payload;
-    },
     [types.USER_INSTANCE_URL_UPDATED] (state, payload) {
         state.instanceUrl = payload;
     },

src/views/OrderDetail.vue

@@ -257,7 +257,7 @@ import { DateTime } from "luxon";
 import { api, hasError } from '@/adapter';
 import { OrderService } from "@/services/OrderService";
 import RejectOrderModal from "@/components/RejectOrderModal.vue";
-import { getProductIdentificationValue, translate, useProductIdentificationStore } from "@hotwax/dxp-components";
+import { getProductIdentificationValue, translate, useProductIdentificationStore, useUserStore } from "@hotwax/dxp-components";
 import EditPickerModal from "@/components/EditPickerModal.vue";
 import emitter from '@/event-bus'
 import logger from "@/logger";
@@ -312,7 +312,6 @@ export default defineComponent({
   computed: {
     ...mapGetters({
       order: "order/getCurrent",
-      currentFacility: 'user/getCurrentFacility',
       configurePicker: "user/configurePicker",
       partialOrderRejectionConfig: 'user/getPartialOrderRejectionConfig',
       getPaymentMethodDesc: 'util/getPaymentMethodDesc',
@@ -373,7 +372,7 @@ export default defineComponent({
     },
     async getOrderDetail(orderId: any, orderPartSeqId: any, orderType: any) {
       const payload = {
-        facilityId: this.currentFacility.facilityId,
+        facilityId: this.currentFacility.value?.facilityId,
         orderId,
         orderPartSeqId
       }
@@ -388,7 +387,7 @@ export default defineComponent({
       return rejectOrderModal.present();
     },
     async readyForPickup(order: any, part: any) {
-      if (this.configurePicker) return this.assignPicker(order, part, this.currentFacility.facilityId);
+      if (this.configurePicker) return this.assignPicker(order, part, this.currentFacility.value?.facilityId);
       const pickup = part?.shipmentMethodEnum?.shipmentMethodEnumId === 'STOREPICKUP';
       const header = pickup ? translate('Ready for pickup') : translate('Ready to ship');
       const message = pickup ? translate('An email notification will be sent to that their order is ready for pickup. This order will also be moved to the packed orders tab.', { customerName: order.customer.name, space: '<br/><br/>' }) : '';
@@ -403,7 +402,7 @@ export default defineComponent({
           }, {
             text: header,
             handler: async () => {
-              await this.store.dispatch('order/packShipGroupItems', { order: order, part: part, facilityId: this.currentFacility.facilityId })
+              await this.store.dispatch('order/packShipGroupItems', { order: order, part: part, facilityId: this.currentFacility.value?.facilityId })
             }
           }]
         });
@@ -515,8 +514,10 @@ export default defineComponent({
   setup() {
     const store = useStore();
     const router = useRouter();
+    const userStore = useUserStore()
     const productIdentificationStore = useProductIdentificationStore();
     let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
+    let currentFacility: any = computed(() => userStore.getCurrentFacility) 
 
     return {
       Actions,
@@ -531,6 +532,7 @@ export default defineComponent({
       checkmarkCircleOutline,
       checkmarkOutline,
       cubeOutline,
+      currentFacility,
       getProductIdentificationValue,
       giftOutline,
       getFeature,