Improved: used warehouse type icon for warehouse facilities on find page, replaced div tags with template tags in case of v-ifs and increased view size to 20

.env.example

@@ -1,7 +1,7 @@
 VUE_APP_I18N_LOCALE=en-US
 VUE_APP_I18N_FALLBACK_LOCALE=en-US
 VUE_APP_CACHE_MAX_AGE=3600
-VUE_APP_VIEW_SIZE=10
+VUE_APP_VIEW_SIZE=20
 VUE_APP_BASE_URL=
 VUE_APP_PERMISSION_ID=
 VUE_APP_LOCALES={"en-US": "English"}

src/components/AddStaffMemberModal.vue

@@ -19,20 +19,20 @@
       </ion-chip>
     </ion-row>
 
-    <ion-list>
+    <div class="ion-padding" v-if="!parties.length">
+      {{ translate("No party found") }}
+    </div>
+    <ion-list v-else>
       <ion-list-header>{{ translate("Staff") }}</ion-list-header>
-      <div class="ion-padding" v-if="!parties.length">{{ translate("No party found") }}</div>
-      <div v-else>
-        <ion-item v-for="(party, index) in parties" :key="index">
-          <ion-label>
-            {{ party.fullName }}
-            <p>{{ party.partyId }}</p>
-          </ion-label>
-          <ion-select interface="popover" :placeholder="translate('Select')" :value="getPartyRoleTypeId(party.partyId)" @ion-change="updateSelectedParties($event, party.partyId)" required>
-            <ion-select-option v-for="(description, roleTypeId) in partyRoles" :key='roleTypeId' :value="roleTypeId">{{ description }}</ion-select-option>
-          </ion-select>
-        </ion-item>
-      </div>
+      <ion-item v-for="(party, index) in parties" :key="index">
+        <ion-label>
+          {{ party.fullName }}
+          <p>{{ party.partyId }}</p>
+        </ion-label>
+        <ion-select interface="popover" :placeholder="translate('Select')" :value="getPartyRoleTypeId(party.partyId)" @ion-change="updateSelectedParties($event, party.partyId)" required>
+          <ion-select-option v-for="(description, roleTypeId) in partyRoles" :key='roleTypeId' :value="roleTypeId">{{ description }}</ion-select-option>
+        </ion-select>
+      </ion-item>
     </ion-list>
   </ion-content>
 
@@ -100,7 +100,7 @@ export default defineComponent({
   props: ['facilityId', 'selectedParties'],
   data() {
     return {
-      parties: [],
+      parties: [] as any,
       queryString: '',
       selectedPartyValues: JSON.parse(JSON.stringify(this.selectedParties))
     }

src/store/modules/facility/actions.ts

@@ -264,6 +264,7 @@ const actions: ActionTree<FacilityState, RootState> = {
   },
 
   async fetchFacilityLocations({ commit }, payload) {
+    let facilityLocations = []
     try {
       const params = {
         inputFields: {
@@ -277,13 +278,14 @@ const actions: ActionTree<FacilityState, RootState> = {
       const resp = await FacilityService.fetchFacilityLocations(params)
 
       if(!hasError(resp) && resp.data.count > 0) {
-        commit(types.FACILITY_LOCATIONS_UPDATED, resp.data.docs)
+        facilityLocations = resp.data.docs
       } else {
         throw resp.data
       }
     } catch(err) {
       logger.error('Failed to find the facility locations', err)
     }
+    commit(types.FACILITY_LOCATIONS_UPDATED, facilityLocations)
   },
 
   async fetchFacilityCalendar({commit}, payload) {

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

@@ -2,7 +2,6 @@ export const SN_FACILITY = 'facility'
 export const FACILITY_LIST_UPDATED = SN_FACILITY + '/LIST_UPDATED'
 export const FACILITY_QUERY_UPDATED = SN_FACILITY + '/QUERY_UPDATED'
 export const FACILITY_CURRENT_UPDATED = SN_FACILITY + '/CURRENT_UPDATED'
-export const FACILITY_CURRENT_LOCATION_UPDATED = SN_FACILITY + '/CURRENT_LOCATION_UPDATED'
 export const FACILITY_LOCATIONS_UPDATED = SN_FACILITY + '/LOCATIONS_UPDATED'
 export const FACILITY_POSTAL_ADDRESS_UPDATED = SN_FACILITY + '/POSTAL_ADDRESS_UPDATED'
 export const FACILITY_MAPPINGS_UPDATED = SN_FACILITY + '/MAPPINGS_UPDATED'

src/store/modules/facility/mutations.ts

@@ -16,9 +16,6 @@ const mutations: MutationTree <FacilityState> = {
   [types.FACILITY_CURRENT_UPDATED](state, payload) {
     state.current = payload
   },
-  [types.FACILITY_CURRENT_LOCATION_UPDATED](state, payload) {
-    state.current.locations = payload
-  },
   [types.FACILITY_POSTAL_ADDRESS_UPDATED](state, payload) {
     state.current.postalAddress = payload
   },

src/views/AddFacilityConfig.vue

@@ -18,7 +18,7 @@
               {{ translate("Add") }}
             </ion-button>
           </ion-card-header>
-          <div v-if="selectedProductStores.length">
+          <template v-if="selectedProductStores.length">
             <ion-list>
               <ion-item v-for="store in selectedProductStores" :key="store.productStoreId">
                 <ion-label>
@@ -49,7 +49,7 @@
                 </ion-popover>
               </ion-item>
             </ion-list>
-          </div>
+          </template>
           <div v-else class="empty-state">
             <p>{{ translate("No product stores added.") }}</p>
           </div>

src/views/FacilityDetails.vue

@@ -23,7 +23,7 @@
                   {{ translate("Address") }}
                 </ion-card-title>
               </ion-card-header>
-              <div v-if="postalAddress?.address1">
+              <template v-if="postalAddress?.address1">
                 <ion-item lines="full">
                   <ion-label>
                     <h3>{{ postalAddress.address1 }}</h3>
@@ -33,7 +33,7 @@
                   </ion-label>
                 </ion-item>
                 <ion-button fill="clear" @click="openAddressModal">{{ translate("Edit") }}</ion-button>
-              </div>
+              </template>
               <ion-button v-else expand="block" fill="outline" @click="openAddressModal">
                 {{ translate("Add") }}
                 <ion-icon slot="end" :icon="addCircleOutline" />
@@ -46,7 +46,7 @@
                   {{ translate("Latitude & Longitude") }}
                 </ion-card-title>
               </ion-card-header>
-              <div v-if="postalAddress?.latitude">
+              <template v-if="postalAddress?.latitude">
                 <ion-card-content>
                   {{ translate("These values are used to help customers lookup how close they are to your stores when they are finding nearby stores.") }}
                 </ion-card-content>
@@ -59,7 +59,7 @@
                   <p>{{ postalAddress.longitude }}</p>
                 </ion-item>
                 <ion-button fill="clear" :disabled="!postalAddress.address1" @click="openGeoPointModal">{{ translate("Edit") }}</ion-button>
-              </div>
+              </template>
               <ion-button v-else expand="block" fill="outline" :disabled="!postalAddress.address1" @click="openGeoPointModal">
                 {{ translate("Add") }}
                 <ion-icon slot="end" :icon="addCircleOutline" />
@@ -784,7 +784,7 @@
     },
     async revokePrimaryStatusFromStore() {
       try {
         const resp = await FacilityService.updateFacilityToGroup({
           "facilityId": this.facilityId,
           "facilityGroupId": this.primaryMember.facilityGroupId,
           "fromDate": this.primaryMember.fromDate,

src/views/FindFacilities.vue

@@ -46,7 +46,7 @@
         <main v-if="facilities?.length">
           <div class="list-item" v-for="(facility, index) in facilities" :key="index" @click="viewFacilityDetails(facility.facilityId)">
             <ion-item lines="none">
-              <ion-icon slot="start" :icon="storefrontOutline" />
+              <ion-icon slot="start" :icon="facilityTypes[facility.facilityTypeId].parentTypeId === 'DISTRIBUTION_CENTER' ? businessOutline : storefrontOutline" />
               <ion-label>
                 <p class="overline">{{ facility.facilityTypeId ? facilityTypes[facility.facilityTypeId] ? facilityTypes[facility.facilityTypeId].description : facilityTypes.facilityTypeId : '' }}</p>
                 {{ facility.facilityName }}
@@ -252,12 +252,12 @@ export default defineComponent({
 
         if (!hasError(resp)) {
           // updating the facilities state instead of refetching
-          const updatedFacilities = JSON.parse(JSON.stringify(this.facilities)).map((fac: any) => {
-            if (facility.facilityId === fac.facilityId) {
-              fac.maximumOrderLimit = maximumOrderLimit === "" ? null : maximumOrderLimit
-              fac.orderLimitType = fac.maximumOrderLimit === null ? 'unlimited' : (fac.maximumOrderLimit === 0 ? 'no-capacity' : 'custom')
+          const updatedFacilities = JSON.parse(JSON.stringify(this.facilities)).map((facilityData: any) => {
+            if (facility.facilityId === facilityData.facilityId) {
+              facilityData.maximumOrderLimit = maximumOrderLimit === "" ? null : maximumOrderLimit
+              facilityData.orderLimitType = facilityData.maximumOrderLimit === null ? 'unlimited' : (facilityData.maximumOrderLimit === 0 ? 'no-capacity' : 'custom')
             }
-            return fac
+            return facilityData
           })
           this.store.dispatch('facility/updateFacilities', updatedFacilities)
           showToast(translate('Fulfillment capacity updated successfully for ', { facilityName: facility.facilityName }))
@@ -289,11 +289,11 @@ export default defineComponent({
 
         if (!hasError(resp)) {
           // updating the facilities state instead of refetching
-          const updatedFacilities = JSON.parse(JSON.stringify(this.facilities)).map((fac: any) => {
-            if (facility.facilityId === fac.facilityId) {
-              fac.sellOnline = !facility.sellOnline
+          const updatedFacilities = JSON.parse(JSON.stringify(this.facilities)).map((facilityData: any) => {
+            if (facility.facilityId === facilityData.facilityId) {
+              facilityData.sellOnline = !facility.sellOnline
             }
-            return fac
+            return facilityData
           })
           this.store.dispatch('facility/updateFacilities', updatedFacilities)
           showToast(translate('Fulfillment setting updated successfully'))