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

package.json

@@ -16,7 +16,7 @@
     "@casl/ability": "^6.0.0",
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/apps-theme": "^1.2.6",
-    "@hotwax/dxp-components": "^1.15.5",
+    "@hotwax/dxp-components": "^1.16.0",
     "@hotwax/oms-api": "^1.16.0",
     "@ionic/core": "^7.6.0",
     "@ionic/vue": "^7.6.0",

src/adapter/index.ts

@@ -1,5 +1,5 @@
-import { api, client, getConfig, fetchGoodIdentificationTypes, getUserFacilities, hasError, initialise, logout, resetConfig, updateInstanceUrl, updateToken, setUserTimeZone,
-  getAvailableTimeZones, getProductIdentificationPref, setProductIdentificationPref} from '@hotwax/oms-api'
+import { api, client, getConfig, fetchGoodIdentificationTypes, getUserFacilities, getUserPreference, hasError, initialise, logout, resetConfig, updateInstanceUrl, updateToken, setUserTimeZone,
+  getAvailableTimeZones, getProductIdentificationPref, setProductIdentificationPref, setUserPreference} from '@hotwax/oms-api'
 
 export {
   api,
@@ -8,6 +8,7 @@ export {
   getConfig,
   getUserFacilities,
   getProductIdentificationPref,
+  getUserPreference,
   hasError,
   initialise,
   logout,
@@ -16,5 +17,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.",
@@ -56,6 +57,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",
@@ -111,6 +113,7 @@
   "Searched item is not present within the shipment:": "Searched item is not present within the shipment: {itemName}",
   "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",
@@ -120,6 +123,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 { fetchGoodIdentificationTypes, getConfig, initialise, setUserTimeZone, getAvailableTimeZones, getProductIdentificationPref, setProductIdentificationPref } from '@/adapter'
+import { fetchGoodIdentificationTypes, getConfig, initialise, setUserTimeZone, getAvailableTimeZones, getProductIdentificationPref, getUserFacilities, getUserPreference, setProductIdentificationPref, setUserPreference } from '@/adapter'
 import localeMessages from './locales';
 
 const app = createApp(App)
@@ -61,7 +61,10 @@ const app = createApp(App)
     setProductIdentificationPref,
     getAvailableTimeZones,
     hasPermission,
-    fetchGoodIdentificationTypes
+    fetchGoodIdentificationTypes,
+    getUserPreference,
+    getUserFacilities,
+    setUserPreference
   });
 
 // 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

@@ -3,8 +3,8 @@
 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 { hasError, showToast, getCurrentFacilityId } from '@/utils'
+import { getProductIdentificationValue, translate, useUserStore } from '@hotwax/dxp-components'
 import emitter from "@/event-bus";
 import store from "@/store";
 
@@ -68,8 +68,9 @@
     }
     commit(types.ORDER_CURRENT_PRODUCT_ADDED, product)
   },
   async getOrderDetail({ commit, state }, { orderId }) {
     let resp;
+    const currentFacilityId = getCurrentFacilityId();
 
     try {
       const payload = {
@@ -82,7 +83,7 @@
           },
           "query": "docType:ORDER",
           "filter": [
-            `orderTypeId: PURCHASE_ORDER AND orderId: ${orderId} AND orderStatusId: (ORDER_APPROVED OR ORDER_CREATED OR ORDER_COMPLETED) AND facilityId: ${this.state.user.currentFacility.facilityId}`
+            `orderTypeId: PURCHASE_ORDER AND orderId: ${orderId} AND orderStatusId: (ORDER_APPROVED OR ORDER_CREATED OR ORDER_COMPLETED) AND facilityId: ${currentFacilityId}`
           ]
         }
       }
@@ -106,12 +107,12 @@
     }
     return resp;
   },
   async createPurchaseShipment({ commit }, payload) {
     let resp;
     try {
       const params = {
         orderId: payload.orderId,
-        facilityId: this.state.user.currentFacility.facilityId
+        facilityId: getCurrentFacilityId()
       }
 
       resp = await OrderService.createPurchaseShipment(params)
@@ -150,7 +151,7 @@
     return resp;
   },
 
   async createAndReceiveIncomingShipment({ commit }, payload) {
     let resp;
     try {
       payload.items.map((item: any, index: number) => {
@@ -208,7 +209,8 @@
         "orderBy": 'datetimeReceived DESC',
         "viewSize": "250"
       }
-      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

@@ -3,13 +3,13 @@
 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 { hasError, showToast, getCurrentFacilityId } from '@/utils'
+import { getProductIdentificationValue, translate, useUserStore } from '@hotwax/dxp-components'
 import emitter from '@/event-bus'
 import store from "@/store";
 import { DateTime } from 'luxon';
 import { UploadService } from "@/services/UploadService";
 import { toHandlerKey } from "vue";
 
 const actions: ActionTree<ShipmentState, RootState> = {
   async findShipment ({ commit, state }, payload) {
@@ -72,8 +72,8 @@
         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) => {
@@ -105,7 +105,8 @@
       return Promise.reject(new Error(err))
     }
   },
   async receiveShipmentItem ({ commit }, payload) {
+    const currentFacilityId = getCurrentFacilityId();
     let areAllSuccess = true;
 
     for (const item of payload.items) {
@@ -118,7 +119,7 @@
 
         const params = {
           shipmentId: payload.shipmentId,
-          facilityId: this.state.user.currentFacility.facilityId,
+          facilityId: currentFacilityId,
           shipmentItemSeqId: item.itemSeqId,
           productId: item.productId,
           quantityAccepted: item.quantityAccepted,
@@ -141,7 +142,7 @@
 
     return areAllSuccess;
   },
   async receiveShipmentJson ({ dispatch }, payload) {
     emitter.emit("presentLoader");
     const fileName = `ReceiveShipment_${payload.shipmentId}_${DateTime.now().toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS)}.json`;
     const params = {

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,14 +5,14 @@
 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'
 
@@ -57,8 +57,8 @@
 
       //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 +71,8 @@
         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 +86,6 @@
 
       // 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 })
@@ -159,7 +157,7 @@
   /**
    *  update current eComStore information
   */
   async setEComStore({ commit, dispatch }, payload) {
     commit(types.USER_CURRENT_ECOM_STORE_UPDATED, payload.eComStore);
     await UserService.setUserPreference({
       'userPrefTypeId': 'SELECTED_BRAND',
@@ -173,13 +171,12 @@
   /**
    * update current facility information
    */
-  async setFacility ({ commit, dispatch }, payload) {
+  async setFacility ({ commit, dispatch }, facilityId) {
     const token = store.getters['user/getUserToken'];
-    const eComStore = await UserService.getEComStores(token, payload.facility.facilityId);
+    const eComStore = await UserService.getEComStores(token, facilityId);
 
     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', facilityId)
     eComStore?.productStoreId ? this.dispatch('util/getForceScanSetting', eComStore.productStoreId) : this.dispatch('util/updateForceScanStatus', false)
     eComStore?.productStoreId ? this.dispatch('util/getBarcodeIdentificationPref', eComStore.productStoreId) : this.dispatch('util/updateBarcodeIdentificationPref', "internalName")
   },

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/utils/index.ts

@@ -1,5 +1,5 @@
 import { toastController } from '@ionic/vue';
-import { translate } from '@hotwax/dxp-components'
+import { translate, useUserStore } from '@hotwax/dxp-components'
 import { Plugins } from '@capacitor/core';
 import { DateTime } from "luxon";
 
@@ -52,4 +52,9 @@ const handleDateTimeInput = (dateTimeValue: any) => {
   return DateTime.fromISO(dateTime).toMillis()
 }
 
-export { handleDateTimeInput, showToast, hasError, copyToClipboard }
+const getCurrentFacilityId = () => {
+  const currentFacility: any = useUserStore().getCurrentFacility;
+  return currentFacility?.facilityId
+}
+
+export { handleDateTimeInput, getCurrentFacilityId, showToast, hasError, copyToClipboard }

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,