Implemented: Added the support for using facility selector from dxp-component(#dxp/228)

package.json

@@ -16,8 +16,8 @@
     "@casl/ability": "^6.0.0",
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/apps-theme": "^1.2.6",
-    "@hotwax/dxp-components": "^1.13.0",
-    "@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/adapter/index.ts

@@ -1,12 +1,13 @@
-import { api, client, getConfig, getUserFacilities, hasError, initialise, logout, resetConfig, updateInstanceUrl, updateToken, setUserTimeZone,
-  getAvailableTimeZones, getProductIdentificationPref, setProductIdentificationPref} from '@hotwax/oms-api'
+import { api, client, getConfig, getUserFacilities, getUserPreference, hasError, initialise, logout, resetConfig, updateInstanceUrl, updateToken, setUserTimeZone,
+  getAvailableTimeZones, getProductIdentificationPref, setProductIdentificationPref, setUserPreference} from '@hotwax/oms-api'
 
 export {
   api,
   client,
   getConfig,
   getUserFacilities,
   getProductIdentificationPref,
+  getUserPreference,
   hasError,
   initialise,
   logout,
@@ -15,5 +16,6 @@ export {
   updateToken,
   setUserTimeZone,
   setProductIdentificationPref,
+  setUserPreference,
   getAvailableTimeZones
 }

src/components/Menu.vue

@@ -36,6 +36,7 @@ import { computed, defineComponent } from "vue";
 import { mapGetters } from "vuex";
 import { calendar, download, gitPullRequestOutline, settings } from "ionicons/icons";
 import { useStore } from "@/store";
+import { useUserStore } from "@hotwax/dxp-components"
 import { useRouter } from "vue-router";
 
 export default defineComponent({
@@ -55,12 +56,14 @@ export default defineComponent({
   computed: {
     ...mapGetters({
       isUserAuthenticated: 'user/isUserAuthenticated',
-      currentFacility: 'user/getCurrentFacility',
     })
   },
   setup() {
     const store = useStore();
     const router = useRouter();
+    const userStore = useUserStore()
+    let currentFacility: any = computed(() => userStore.getCurrentFacility) 
+
     const appPages = [
       {
         title: "Shipments",
@@ -97,6 +100,7 @@ export default defineComponent({
     })
 
     return {
+      currentFacility,
       selectedIndex,
       appPages,
       download,

src/locales/en.json

@@ -35,6 +35,7 @@
   "facility location": "facility location",
   "Facility locations were not found corresponding to destination facility of return shipment. Please add facility locations to avoid receive return shipment failure.": "Facility locations were not found corresponding to destination facility of return shipment. Please add facility locations to avoid receive return shipment failure.",
   "Failed to update barcode identification preference.": "Failed to update barcode identification preference.",
+  "Fetching facilities": "Fetching facilities",
   "Fetching time zones": "Fetching time zones",
   "Force scan": "Force scan",
   "Force scan preference updated successfully.": "Force scan preference updated successfully.",
@@ -55,6 +56,7 @@
   "Logging out": "Logging out",
   "Logout": "Logout",
   "Make sure you have entered all the inventory you received. You cannot edit this information after proceeding.": "Make sure you have entered all the inventory you received. { space } You cannot edit this information after proceeding.",
+  "No facilities found": "No facilities found",
   "No more shipments found": "No more shipments found",
   "None": "None",
   "No results found": "No results found",
@@ -106,6 +108,7 @@
   "secondary identifier": "secondary identifier",
   "Secondary identifier": "Secondary identifier",
   "Search": "Search",
+  "Search facilities": "Search facilities",
   "Search purchase orders": "Search purchase orders",
   "Search returns": "Search returns",
   "Search time zones": "Search time zones",
@@ -115,6 +118,7 @@
   "Select": "Select",
   "Select all": "Select all",
   "Select facility": "Select facility",
+  "Select Facility": "Select Facility",
   "Selected TimeZone": "Selected TimeZone",
   "Select a different time zone": "Select a different time zone",
   "Select time zone": "Select time zone",

src/main.ts

@@ -32,7 +32,7 @@ import permissionRules from '@/authorization/Rules';
 import permissionActions from '@/authorization/Actions';
 import { dxpComponents } from '@hotwax/dxp-components'
 import { login, logout, loader } from './user-utils';
-import { getConfig, initialise, setUserTimeZone, getAvailableTimeZones, getProductIdentificationPref, setProductIdentificationPref } from '@/adapter'
+import { getConfig, initialise, setUserTimeZone, getAvailableTimeZones, getProductIdentificationPref, getUserFacilities, getUserPreference, setProductIdentificationPref, setUserPreference } from '@/adapter'
 import localeMessages from './locales';
 
 const app = createApp(App)
@@ -58,7 +58,10 @@ const app = createApp(App)
     localeMessages,
     setUserTimeZone,
     setProductIdentificationPref,
-    getAvailableTimeZones
+    getAvailableTimeZones,
+    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

@@ -4,10 +4,14 @@ import RootState from '@/store/RootState'
 import OrderState from './OrderState'
 import * as types from './mutation-types'
 import { hasError, showToast } from '@/utils'
-import { getProductIdentificationValue, translate } from '@hotwax/dxp-components'
+import { getProductIdentificationValue, translate, useUserStore } from '@hotwax/dxp-components'
 import emitter from "@/event-bus";
 import store from "@/store";
 
+const getCurrentFacilityId = () => {
+  const currentFacility: any = useUserStore().getCurrentFacility;
+  return currentFacility?.facilityId
+}
 
 const actions: ActionTree<OrderState, RootState> = {
 
@@ -73,6 +77,7 @@ const actions: ActionTree<OrderState, RootState> = {
 
     const current = state.current as any
     const orders = state.purchaseOrders.list as any
+    const currentFacilityId = getCurrentFacilityId();
 
     if (current.length && current[0]?.orderId === orderId) { return current }
 
@@ -96,7 +101,7 @@ const actions: ActionTree<OrderState, RootState> = {
           },
           "query": "docType:ORDER",
           "filter": [
-            `orderTypeId: PURCHASE_ORDER AND orderId: ${orderId} AND orderStatusId: (ORDER_APPROVED OR ORDER_CREATED) AND facilityId: ${this.state.user.currentFacility.facilityId}`
+            `orderTypeId: PURCHASE_ORDER AND orderId: ${orderId} AND orderStatusId: (ORDER_APPROVED OR ORDER_CREATED) AND facilityId: ${currentFacilityId}`
           ]
         }
       }
@@ -125,7 +130,7 @@ const actions: ActionTree<OrderState, RootState> = {
     try {
       const params = {
         orderId: payload.orderId,
-        facilityId: this.state.user.currentFacility.facilityId
+        facilityId: getCurrentFacilityId()
       }
 
       resp = await OrderService.createPurchaseShipment(params)
@@ -176,7 +181,8 @@ const actions: ActionTree<OrderState, RootState> = {
         "fieldList": ["datetimeReceived", "productId", "quantityAccepted", "quantityRejected", "receivedByUserLoginId", "shipmentId", 'locationSeqId'],
         "orderBy": 'datetimeReceived DESC'
       }
-      const facilityLocations = await this.dispatch('user/getFacilityLocations', this.state.user.currentFacility.facilityId);
+      const currentFacilityId = getCurrentFacilityId()
+      const facilityLocations = await this.dispatch('user/getFacilityLocations', currentFacilityId);
       const locationSeqId = facilityLocations.length > 0 ? facilityLocations[0].locationSeqId : "";
       resp = await OrderService.fetchPOHistory(params)
       if (resp.status === 200 && !hasError(resp) && resp.data?.count > 0) {

src/store/modules/shipment/actions.ts

@@ -4,10 +4,15 @@ import RootState from '@/store/RootState'
 import ShipmentState from './ShipmentState'
 import * as types from './mutation-types'
 import { hasError, showToast } from '@/utils'
-import { getProductIdentificationValue, translate } from '@hotwax/dxp-components'
+import { getProductIdentificationValue, translate, useUserStore } from '@hotwax/dxp-components'
 import emitter from '@/event-bus'
 import store from "@/store";
 
+const getCurrentFacilityId = () => {
+  const currentFacility: any = useUserStore().getCurrentFacility;
+  return currentFacility?.facilityId
+}
+
 const actions: ActionTree<ShipmentState, RootState> = {
   async findShipment ({ commit, state }, payload) {
     if (payload.viewIndex === 0) emitter.emit("presentLoader");
@@ -69,8 +74,8 @@ const actions: ActionTree<ShipmentState, RootState> = {
         const shipmentAttributes = await ShipmentService.fetchShipmentAttributes([shipmentDetail.shipmentId])
         shipmentDetail.externalOrderId = shipmentAttributes?.[shipmentDetail.shipmentId]?.['EXTERNAL_ORDER_ID']
         shipmentDetail.externalOrderName = shipmentAttributes?.[shipmentDetail.shipmentId]?.['EXTERNAL_ORDER_NAME']
-
-        const facilityLocations = await this.dispatch('user/getFacilityLocations', this.state.user.currentFacility.facilityId);
+        const currentFacilityId = getCurrentFacilityId();
+        const facilityLocations = await this.dispatch('user/getFacilityLocations', currentFacilityId);
         if(facilityLocations.length){
           const locationSeqId = facilityLocations[0].locationSeqId
           resp.data.items.map((item: any) => {
@@ -102,14 +107,15 @@ const actions: ActionTree<ShipmentState, RootState> = {
     }
   },
   receiveShipmentItem ({ commit }, payload) {
+    const currentFacilityId = getCurrentFacilityId();
     return Promise.all(payload.items.map(async (item: any) => {
       if(!item.locationSeqId) {
         return Promise.reject("Missing locationSeqId on item")
       }
 
       const params = {
         shipmentId: payload.shipmentId,
-        facilityId: this.state.user.currentFacility.facilityId,
+        facilityId: currentFacilityId,
         shipmentItemSeqId: item.itemSeqId,
         productId: item.productId,
         quantityAccepted: item.quantityAccepted,

src/store/modules/user/UserState.ts

@@ -1,7 +1,6 @@
 export default interface UserState {
     token: string;
     current: any;
-    currentFacility: object | null;
     currentEComStore: object;
     instanceUrl: string;
     facilityLocationsByFacilityId: any;

src/store/modules/user/actions.ts

@@ -5,16 +5,15 @@ import UserState from './UserState'
 import * as types from './mutation-types'
 import { hasError, showToast } from '@/utils'
 import { Settings } from 'luxon';
-import { getUserFacilities, logout, updateInstanceUrl, updateToken, resetConfig } from '@/adapter'
+import { logout, updateInstanceUrl, updateToken, resetConfig } from '@/adapter'
 import {
   getServerPermissionsFromRules,
   prepareAppPermissions,
   resetPermissions,
   setPermissions
 } from '@/authorization'
-import { translate, useAuthStore, useProductIdentificationStore } from '@hotwax/dxp-components'
+import { translate, useAuthStore, useProductIdentificationStore, useUserStore } from '@hotwax/dxp-components'
 import emitter from '@/event-bus'
-import store from '@/store'
 
 const actions: ActionTree<UserState, RootState> = {
 
@@ -57,8 +56,8 @@ const actions: ActionTree<UserState, RootState> = {
 
       //fetching user facilities
       const isAdminUser = appPermissions.some((appPermission: any) => appPermission?.action === "APP_RECVG_ADMIN");
-      const baseURL = store.getters['user/getBaseUrl'];
-      const facilities = await getUserFacilities(token, baseURL, userProfile?.partyId, "", isAdminUser);
+      const facilities = await useUserStore().getUserFacilities(userProfile?.partyId, "", isAdminUser)
+      await useUserStore().getFacilityPreference('SELECTED_FACILITY')
 
       if (!facilities.length) throw 'Unable to login. User is not assocaited with any facility'
 
@@ -71,9 +70,8 @@ const actions: ActionTree<UserState, RootState> = {
         return uniqueFacilities
       }, []);
 
-      const currentFacility = userProfile.facilities[0];
-      const currentEComStore = await UserService.getEComStores(token, currentFacility.facilityId);
-
+      const currentFacility: any = useUserStore().getCurrentFacility
+      const currentEComStore = await UserService.getEComStores(token, currentFacility?.facilityId);
       const productStoreId = currentEComStore?.productStoreId;
 
       await useProductIdentificationStore().getIdentificationPref(productStoreId)
@@ -87,7 +85,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_PERMISSIONS_UPDATED, appPermissions);
       commit(types.USER_TOKEN_CHANGED, { newToken: token })
@@ -173,12 +170,10 @@ const actions: ActionTree<UserState, RootState> = {
   /**
    * update current facility information
    */
-  async setFacility ({ commit, dispatch }, payload) {
-    const eComStore = await UserService.getEComStores(undefined, payload.facility.facilityId);
-
+  async setFacilityUpdates ({ commit, dispatch, state }, payload) {
+    const eComStore = await UserService.getEComStores(state.token, payload);
     commit(types.USER_CURRENT_ECOM_STORE_UPDATED, eComStore);
-    commit(types.USER_CURRENT_FACILITY_UPDATED, payload.facility);
-    await dispatch('getFacilityLocations', payload.facility.facilityId)
+    await dispatch('getFacilityLocations', payload)
   },
 
   /**

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: {},
       currentEComStore: {},
       permissions: [],
       instanceUrl: '',

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_CURRENT_ECOM_STORE_UPDATED = SN_USER + '/CURRENT_ECOM_STORE_UPDATED'
 export const USER_FACILITY_LOCATIONS_BY_FACILITY_ID = SN_USER + '/FACILITY_LOCATIONS_BY_FACILITY_ID'

src/store/modules/user/mutations.ts

@@ -9,16 +9,12 @@ const mutations: MutationTree <UserState> = {
     [types.USER_END_SESSION] (state) {
       state.token = ''
       state.current = {}
-      state.currentFacility = {},
       state.facilityLocationsByFacilityId = {},
       state.permissions = []
     },
     [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/AddProductModal.vue

@@ -69,7 +69,7 @@ import { defineComponent, computed } from 'vue';
 import { closeOutline, checkmarkCircle } from 'ionicons/icons';
 import { mapGetters } from 'vuex'
 import { useStore } from "@/store";
-import { DxpShopifyImg, translate, getProductIdentificationValue, useProductIdentificationStore } from '@hotwax/dxp-components';
+import { DxpShopifyImg, translate, getProductIdentificationValue, useProductIdentificationStore, useUserStore } from '@hotwax/dxp-components';
 import { showToast } from '@/utils'
 
 export default defineComponent({
@@ -104,7 +104,6 @@ export default defineComponent({
       getProduct: 'product/getProduct',
       isScrollable: 'product/isScrollable',
       isProductAvailableInShipment: 'product/isProductAvailableInShipment',
-      currentFacility: 'user/getCurrentFacility',
       facilityLocationsByFacilityId: 'user/getFacilityLocationsByFacilityId'
     })
   },
@@ -168,10 +167,13 @@ export default defineComponent({
   },
   setup() {
     const store = useStore();
+    const userStore = useUserStore()
     const productIdentificationStore = useProductIdentificationStore();
     let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
+    let currentFacility: any = computed(() => userStore.getCurrentFacility) 
 
     return {
+      currentFacility,
       closeOutline,
       checkmarkCircle,
       store,

src/views/AddProductToPOModal.vue

@@ -60,7 +60,7 @@ import { defineComponent, computed } from 'vue';
 import { closeOutline, checkmarkCircle } from 'ionicons/icons';
 import { mapGetters } from 'vuex'
 import { useStore } from "@/store";
-import { DxpShopifyImg, translate, getProductIdentificationValue, useProductIdentificationStore } from '@hotwax/dxp-components';
+import { DxpShopifyImg, translate, getProductIdentificationValue, useProductIdentificationStore, useUserStore } from '@hotwax/dxp-components';
 import { showToast } from '@/utils'
 
 export default defineComponent({
@@ -95,7 +95,6 @@ export default defineComponent({
       getProduct: 'product/getProduct',
       isScrollable: 'product/isScrollable',
       isProductAvailableInOrder: 'order/isProductAvailableInOrder',
-      currentFacility: 'user/getCurrentFacility',
       facilityLocationsByFacilityId: 'user/getFacilityLocationsByFacilityId'
     })
   },
@@ -159,9 +158,13 @@ export default defineComponent({
   },
   setup() {
     const store = useStore();
+    const userStore = useUserStore()
     const productIdentificationStore = useProductIdentificationStore();
     let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref);
+    let currentFacility: any = computed(() => userStore.getCurrentFacility) 
+
     return {
+      currentFacility,
       closeOutline,
       checkmarkCircle,
       store,