From 43f194c288f87f87c7a6c4a02dd37e8bc08cec2f Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Mon, 16 Dec 2024 15:38:23 +0530
Subject: [PATCH] Implemented: support to disable functionality when test
 feature is enabled, and implemented functionality for the test route
 feature(#254)

---
 src/store/modules/product/getters.ts |   1 -
 src/views/BrokeringQuery.vue         | 109 +++++---
 src/views/BrokeringRouteTest.vue     | 372 +++++++++++++++++++++++++++
 3 files changed, 450 insertions(+), 32 deletions(-)
 create mode 100644 src/views/BrokeringRouteTest.vue

diff --git a/src/store/modules/product/getters.ts b/src/store/modules/product/getters.ts
index e8c49b6..58a07dc 100644
--- a/src/store/modules/product/getters.ts
+++ b/src/store/modules/product/getters.ts
@@ -7,7 +7,6 @@ const getters: GetterTree<ProductState, RootState> = {
     return state.products
   },
   getProductById: (state) => (id: string) => {
-    console.log('id', id)
     return state.products[id] || {}
   },
   getProductStock: (state) => (productId: string, facilityId: string) => {
diff --git a/src/views/BrokeringQuery.vue b/src/views/BrokeringQuery.vue
index ea1df9f..56a50ff 100644
--- a/src/views/BrokeringQuery.vue
+++ b/src/views/BrokeringQuery.vue
@@ -13,7 +13,7 @@
         <section id="order-filters" class="menu ion-padding-top">
           <ion-item lines="none">
             <ion-label>
-              <h1 v-show="!isRouteNameUpdating">{{ currentRouting.routingName }}</h1>
+              <h1 v-show="!isRouteNameUpdating || isRoutingTestEnabled">{{ currentRouting.routingName }}</h1>
               <!-- Added class as we can't change the background of ion-input with css property, and we need to change the background to show the user that now this value is editable -->
               <ion-input ref="routeNameRef" :class="isRouteNameUpdating ? 'name' : ''" v-show="isRouteNameUpdating" aria-label="route name" v-model="routeName"></ion-input>
             </ion-label>
@@ -21,19 +21,19 @@
               {{ getRouteIndex() }}
             </ion-chip>
           </ion-item>
-          <ion-button class="ion-margin-start" color="medium" fill="outline" size="small" @click="isRouteNameUpdating ? updateRouteName() : editRouteName()">
+          <ion-button v-if="!isRoutingTestEnabled" class="ion-margin-start" color="medium" fill="outline" size="small" @click="isRouteNameUpdating ? updateRouteName() : editRouteName()">
             <ion-icon slot="start" :icon="isRouteNameUpdating ? saveOutline : pencilOutline" />
             {{ isRouteNameUpdating ? translate("Save") : translate("Rename") }}
           </ion-button>
-          <ion-button class="ion-margin-start" color="medium" fill="outline" size="small">
+          <ion-button class="ion-margin-start" color="medium" fill="outline" size="small" @click="enableRoutingTest()">
             <ion-icon slot="start" :icon="speedometerOutline" />
-            {{ translate("Test") }}
+            {{ translate(isRoutingTestEnabled ? "Exit Test Mode" : "Test") }}
           </ion-button>
           <!-- <ion-button color="medium" fill="outline" size="small">
             <ion-icon slot="start" :icon="copyOutline" />
             {{ translate("Clone") }}
           </ion-button> -->
-          <ion-item>
+          <ion-item :disabled="isRoutingTestEnabled">
             <ion-icon slot="start" :icon="pulseOutline" />
             <ion-select :label="translate('Status')" interface="popover" :interface-options="{ subHeader: translate('Status') }" :value="routingStatus" @ionChange="updateOrderRouting($event.detail.value)">
               <ion-select-option value="ROUTING_ACTIVE">{{ translate("Active") }}</ion-select-option>
@@ -51,24 +51,28 @@
           <ion-item-group>
             <ion-item-divider color="light">
               <ion-label>{{ translate("Filters") }}</ion-label>
-              <ion-button v-if="orderRoutingFilterOptions && Object.keys(orderRoutingFilterOptions).length" slot="end" fill="clear" @click="addOrderRouteFilterOptions('ORD_FILTER_PRM_TYPE', 'ENTCT_FILTER', 'Filters')">
+              <ion-button :disabled="isRoutingTestEnabled" v-if="orderRoutingFilterOptions && Object.keys(orderRoutingFilterOptions).length" slot="end" fill="clear" @click="addOrderRouteFilterOptions('ORD_FILTER_PRM_TYPE', 'ENTCT_FILTER', 'Filters')">
                 <ion-icon slot="icon-only" :icon="optionsOutline"/>
               </ion-button>
             </ion-item-divider>
             <p class="empty-state" v-if="!orderRoutingFilterOptions || !Object.keys(orderRoutingFilterOptions).length">
               {{ translate("All orders in all parkings will be attempted if no filter is applied.") }}
-              <ion-button fill="clear" @click="addOrderRouteFilterOptions('ORD_FILTER_PRM_TYPE', 'ENTCT_FILTER', 'Filters')">
+              <ion-button :disabled="isRoutingTestEnabled" fill="clear" @click="addOrderRouteFilterOptions('ORD_FILTER_PRM_TYPE', 'ENTCT_FILTER', 'Filters')">
                 {{ translate("Add filters") }}
                 <ion-icon slot="end" :icon="optionsOutline"/>
               </ion-button>
             </p>
             <!-- Using hardcoded options for filters, as in filters we have multiple ways of value selection for filters like select, chip -->
-            <ion-item v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'QUEUE')">
-              <ion-select multiple :placeholder="translate('queue')" :label="translate('Queue')" interface="popover" :selected-text="getSelectedValue(orderRoutingFilterOptions, ruleEnums, 'QUEUE')" :value="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'QUEUE').fieldValue?.split(',')" @ionChange="updateOrderFilterValue($event, 'QUEUE', true)">
+            <ion-item :disabled="isRoutingTestEnabled" v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'QUEUE')">
+              <ion-select multiple :placeholder="translate('queue')" interface="popover" :selected-text="getSelectedValue(orderRoutingFilterOptions, ruleEnums, 'QUEUE')" :value="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'QUEUE').fieldValue?.split(',')" @ionChange="updateOrderFilterValue($event, 'QUEUE', true)">
+                <div slot="label">
+                  <ion-icon v-show="isFilterUnmatched('facilityId')" color="danger" :icon="closeCircleOutline"/>
+                  {{ translate("Queue") }}
+                </div>
                 <ion-select-option v-for="(facility, facilityId) in facilities" :key="facilityId" :value="facilityId">{{ facility.facilityName || facilityId }}</ion-select-option>
               </ion-select>
             </ion-item>
-            <ion-item v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'QUEUE_EXCLUDED')">
+            <ion-item :disabled="isRoutingTestEnabled" v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'QUEUE_EXCLUDED')">
               <ion-select multiple :placeholder="translate('queue')" interface="popover" :selected-text="getSelectedValue(orderRoutingFilterOptions, ruleEnums, 'QUEUE_EXCLUDED')" :value="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'QUEUE_EXCLUDED').fieldValue?.split(',')" @ionChange="updateOrderFilterValue($event, 'QUEUE_EXCLUDED', true)">
                 <div slot="label">
                   <ion-label>{{ translate("Queue") }}</ion-label>
@@ -77,12 +81,12 @@
                 <ion-select-option v-for="(facility, facilityId) in facilities" :key="facilityId" :value="facilityId">{{ facility.facilityName || facilityId }}</ion-select-option>
               </ion-select>
             </ion-item>
-            <ion-item v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'SHIPPING_METHOD')">
+            <ion-item :disabled="isRoutingTestEnabled" v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'SHIPPING_METHOD')">
               <ion-select multiple :placeholder="translate('shipping method')" interface="popover" :label="translate('Shipping method')" :selected-text="getSelectedValue(orderRoutingFilterOptions, ruleEnums, 'SHIPPING_METHOD')" :value="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'SHIPPING_METHOD').fieldValue?.split(',')" @ionChange="updateOrderFilterValue($event, 'SHIPPING_METHOD', true)">
                 <ion-select-option v-for="(shippingMethod, shippingMethodId) in shippingMethods" :key="shippingMethodId" :value="shippingMethodId">{{ shippingMethod.description || shippingMethodId }}</ion-select-option>
               </ion-select>
             </ion-item>
-            <ion-item v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'SHIPPING_METHOD_EXCLUDED')">
+            <ion-item :disabled="isRoutingTestEnabled" v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'SHIPPING_METHOD_EXCLUDED')">
               <ion-select multiple :placeholder="translate('shipping method')" interface="popover" :selected-text="getSelectedValue(orderRoutingFilterOptions, ruleEnums, 'SHIPPING_METHOD_EXCLUDED')" :value="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'SHIPPING_METHOD_EXCLUDED').fieldValue?.split(',')" @ionChange="updateOrderFilterValue($event, 'SHIPPING_METHOD_EXCLUDED', true)">
                 <div slot="label">
                   <ion-label>{{ translate('Shipping method') }}</ion-label>
@@ -91,14 +95,14 @@
                 <ion-select-option v-for="(shippingMethod, shippingMethodId) in shippingMethods" :key="shippingMethodId" :value="shippingMethodId">{{ shippingMethod.description || shippingMethodId }}</ion-select-option>
               </ion-select>
             </ion-item>
-            <ion-item v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'PRIORITY')">
+            <ion-item :disabled="isRoutingTestEnabled" v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'PRIORITY')">
               <ion-select :placeholder="translate('priority')" interface="popover" :label="translate('Order priority')" :value="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'PRIORITY').fieldValue" @ionChange="updateOrderFilterValue($event, 'PRIORITY')">
                 <ion-select-option value="HIGH">{{ translate("High") }}</ion-select-option>
                 <ion-select-option value="MEDIUM">{{ translate("Medium") }}</ion-select-option>
                 <ion-select-option value="Low">{{ translate("Low") }}</ion-select-option>
               </ion-select>
             </ion-item>
-            <ion-item v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'PRIORITY_EXCLUDED')">
+            <ion-item :disabled="isRoutingTestEnabled" v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'PRIORITY_EXCLUDED')">
               <ion-select :placeholder="translate('priority')" interface="popover" :value="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'PRIORITY_EXCLUDED').fieldValue" @ionChange="updateOrderFilterValue($event, 'PRIORITY_EXCLUDED')">
                 <div slot="label">
                   <ion-label>{{ translate('Order priority') }}</ion-label>
@@ -109,24 +113,24 @@
                 <ion-select-option value="Low">{{ translate("Low") }}</ion-select-option>
               </ion-select>
             </ion-item>
-            <ion-item v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'PROMISE_DATE')">
+            <ion-item :disabled="isRoutingTestEnabled" v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'PROMISE_DATE')">
               <ion-label>{{ translate("Promise date") }}</ion-label>
               <ion-chip outline @click="selectPromiseFilterValue($event)">
                 {{ getPromiseDateValue() }}
               </ion-chip>
             </ion-item>
-            <ion-item v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'PROMISE_DATE_EXCLUDED')">
+            <ion-item :disabled="isRoutingTestEnabled" v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'PROMISE_DATE_EXCLUDED')">
               <ion-label>{{ translate("Promise date") }}</ion-label>
-              <ion-chip outline @click="selectPromiseFilterValue($event, excluded)">
+              <ion-chip outline @click="selectPromiseFilterValue($event, 'excluded')">
                 {{ getPromiseDateValue() }}
               </ion-chip>
             </ion-item>
-            <ion-item v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'SALES_CHANNEL')">
+            <ion-item :disabled="isRoutingTestEnabled" v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'SALES_CHANNEL')">
               <ion-select multiple :placeholder="translate('sales channel')" :label="translate('Sales Channel')" interface="popover" :selected-text="getSelectedValue(orderRoutingFilterOptions, ruleEnums, 'SALES_CHANNEL')" :value="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'SALES_CHANNEL').fieldValue?.split(',')" @ionChange="updateOrderFilterValue($event, 'SALES_CHANNEL', true)">
                 <ion-select-option v-for="(enumInfo, enumId) in enums['ORDER_SALES_CHANNEL']" :key="enumId" :value="enumId">{{ enumInfo.description || enumInfo.enumId }}</ion-select-option>
               </ion-select>
             </ion-item>
-            <ion-item v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'SALES_CHANNEL_EXCLUDED')">
+            <ion-item :disabled="isRoutingTestEnabled" v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'SALES_CHANNEL_EXCLUDED')">
               <ion-select multiple :placeholder="translate('sales channel')" interface="popover" :selected-text="getSelectedValue(orderRoutingFilterOptions, ruleEnums, 'SALES_CHANNEL_EXCLUDED')" :value="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'SALES_CHANNEL_EXCLUDED').fieldValue?.split(',')" @ionChange="updateOrderFilterValue($event, 'SALES_CHANNEL_EXCLUDED', true)">
                 <div slot="label">
                   <ion-label>{{ translate('Sales Channel') }}</ion-label>
@@ -135,12 +139,12 @@
                 <ion-select-option v-for="(enumInfo, enumId) in enums['ORDER_SALES_CHANNEL']" :key="enumId" :value="enumId">{{ enumInfo.description || enumInfo.enumId }}</ion-select-option>
               </ion-select>
             </ion-item>
-            <ion-item v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'ORIGIN_FACILITY_GROUP')">
+            <ion-item :disabled="isRoutingTestEnabled" v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'ORIGIN_FACILITY_GROUP')">
               <ion-select multiple :placeholder="translate('facility group')" :label="translate('Origin Facility Group')" interface="popover" :selected-text="getSelectedValue(orderRoutingFilterOptions, ruleEnums, 'ORIGIN_FACILITY_GROUP')" :value="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'ORIGIN_FACILITY_GROUP').fieldValue?.split(',')" @ionChange="updateOrderFilterValue($event, 'ORIGIN_FACILITY_GROUP', true)">
                 <ion-select-option v-for="(facilityGroup, facilityGroupId) in facilityGroups" :key="facilityGroupId" :value="facilityGroupId">{{ facilityGroup.facilityGroupName || facilityGroupId }}</ion-select-option>
               </ion-select>
             </ion-item>
-            <ion-item v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'ORIGIN_FACILITY_GROUP_EXCLUDED')">
+            <ion-item :disabled="isRoutingTestEnabled" v-if="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'ORIGIN_FACILITY_GROUP_EXCLUDED')">
               <ion-select multiple :placeholder="translate('facility group')" interface="popover" :selected-text="getSelectedValue(orderRoutingFilterOptions, ruleEnums, 'ORIGIN_FACILITY_GROUP_EXCLUDED')" :value="getFilterValue(orderRoutingFilterOptions, ruleEnums, 'ORIGIN_FACILITY_GROUP_EXCLUDED').fieldValue?.split(',')" @ionChange="updateOrderFilterValue($event, 'ORIGIN_FACILITY_GROUP_EXCLUDED', true)">
                 <div slot="label">
                   <ion-label>{{ translate('Origin Facility Group') }}</ion-label>
@@ -153,20 +157,20 @@
           <ion-item-group>
             <ion-item-divider color="light">
               <ion-label>{{ translate("Sort") }}</ion-label>
-              <ion-button v-if="orderRoutingSortOptions && Object.keys(orderRoutingSortOptions).length" slot="end" fill="clear" @click="addOrderRouteFilterOptions('ORD_SORT_PARAM_TYPE', 'ENTCT_SORT_BY', 'Sort')">
+              <ion-button :disabled="isRoutingTestEnabled" v-if="orderRoutingSortOptions && Object.keys(orderRoutingSortOptions).length" slot="end" fill="clear" @click="addOrderRouteFilterOptions('ORD_SORT_PARAM_TYPE', 'ENTCT_SORT_BY', 'Sort')">
                 <ion-icon slot="icon-only" :icon="optionsOutline"/>
               </ion-button>
             </ion-item-divider>
             <!-- Added check for undefined as well as empty object, as on initial load there might be a case in which route sorting options are not available thus it will be undefined but when updating the values from the modal this will always return an object -->
             <p class="empty-state" v-if="!orderRoutingSortOptions || !Object.keys(orderRoutingSortOptions).length">
               {{ translate("Orders will be brokered based on order date if no sorting is specified.") }}
-              <ion-button fill="clear" @click="addOrderRouteFilterOptions('ORD_SORT_PARAM_TYPE', 'ENTCT_SORT_BY', 'Sort')">
+              <ion-button :disabled="isRoutingTestEnabled" fill="clear" @click="addOrderRouteFilterOptions('ORD_SORT_PARAM_TYPE', 'ENTCT_SORT_BY', 'Sort')">
                 {{ translate("Add sorting") }}
                 <ion-icon slot="end" :icon="optionsOutline"/>
               </ion-button>
             </p>
-            <ion-reorder-group @ionItemReorder="doRouteSortReorder($event)" :disabled="false">
-              <ion-item v-for="(sort, code) in orderRoutingSortOptions" :key="code">
+            <ion-reorder-group @ionItemReorder="doRouteSortReorder($event)" :disabled="isRoutingTestEnabled">
+              <ion-item :disabled="isRoutingTestEnabled" v-for="(sort, code) in orderRoutingSortOptions" :key="code">
                 <ion-label>{{ getLabel("ORD_SORT_PARAM_TYPE", code) || code }}</ion-label>
                 <ion-reorder />
               </ion-item>
@@ -176,8 +180,8 @@
         <section v-if="inventoryRules.length" id="inventory-rules">
           <section id="inventory-sequence" class="menu">
             <ion-list>
-              <ion-reorder-group @ionItemReorder="doReorder($event)" :disabled="false">
-                <ion-item lines="full" v-for="rule in rulesForReorder" :key="rule.routingRuleId && rulesForReorder.length" :color="rule.routingRuleId === selectedRoutingRule?.routingRuleId ? 'light' : ''" @click="fetchRuleInformation(rule.routingRuleId)" button>
+              <ion-reorder-group @ionItemReorder="doReorder($event)" :disabled="isRoutingTestEnabled">
+                <ion-item class="rule-item" lines="full" v-for="rule in rulesForReorder" :key="rule.routingRuleId && rulesForReorder.length" :color="rule.routingRuleId === selectedRoutingRule?.routingRuleId ? 'light' : ''" @click="!isRoutingTestEnabled && fetchRuleInformation(rule.routingRuleId)" button :class="{ 'selected-rule': selectedRuleId === rule.routingRuleId }">
                   <ion-label>
                     <h2>{{ rule.ruleName }}</h2>
                     <ion-note :color="rule.statusId === 'RULE_ACTIVE' ? 'success' : rule.statusId === 'RULE_ARCHIVED' ? 'warning' : ''">{{ rule.statusId === "RULE_ACTIVE" ? translate("Active") : rule.statusId === "RULE_ARCHIVED" ? translate("Archived") : translate("Draft") }}</ion-note>
@@ -191,11 +195,12 @@
                 <ion-badge color="medium">{{ getArchivedOrderRules().length }}{{ translate(getArchivedOrderRules().length > 1 ? "rules" : "rule") }}</ion-badge>
               </ion-item>
             </ion-list>
-            <ion-button fill="outline" @click="addInventoryRule">
+            <ion-button v-if="!isRoutingTestEnabled" fill="outline" @click="addInventoryRule">
               {{ translate("Add inventory rule") }}
               <ion-icon :icon="addCircleOutline" slot="end"/>
             </ion-button>
           </section>
+          <template v-if="!isRoutingTestEnabled">
           <div v-if="selectedRoutingRule?.routingRuleId">
             <ion-card class="rule-info">
               <ion-item lines="none">
@@ -387,6 +392,8 @@
             </section>
           </div>
           <div class="empty-state" v-else>{{ translate("Please select a rule or refresh") }}</div>
+          </template>
+          <BrokeringRouteTest v-if="isRoutingTestEnabled" :orderRoutingId="orderRoutingId" :routingGroupId="currentRoutingGroup.routingGroupId" :orderRoutingFilterOptions="orderRoutingFilterOptions" isRoutingTestEnabled/>
         </section>
         <section v-else class="empty-state">
           <img src="../assets/images/InventoryRuleEmptyState.png" />
@@ -397,7 +404,7 @@
         </section>
       </main>
 
-      <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+      <ion-fab vertical="bottom" horizontal="end" slot="fixed" v-if="!isRoutingTestEnabled">
         <ion-fab-button :disabled="!hasUnsavedChanges" @click="save">
           <ion-icon :icon="saveOutline" />
         </ion-fab-button>
@@ -408,7 +415,7 @@
 
 <script setup lang="ts">
 import { IonBackButton, IonBadge, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonChip, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonInput, IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList, IonNote, IonPage, IonReorder, IonReorderGroup, IonSelect, IonSelectOption, IonTitle, IonToggle, IonToolbar, alertController, modalController, onIonViewWillEnter, popoverController } from "@ionic/vue";
-import { addCircleOutline, closeCircleOutline, copyOutline, filterOutline, golfOutline, optionsOutline, pencilOutline, playForwardOutline, pulseOutline, saveOutline, speedometerOutline, swapVerticalOutline, timeOutline } from "ionicons/icons"
+import { addCircleOutline, closeCircleOutline, filterOutline, golfOutline, optionsOutline, pencilOutline, playForwardOutline, pulseOutline, saveOutline, speedometerOutline, swapVerticalOutline, timeOutline } from "ionicons/icons"
 import { onBeforeRouteLeave, useRouter } from "vue-router";
 import { computed, defineProps, nextTick, ref } from "vue";
 import store from "@/store";
@@ -424,6 +431,7 @@ import { translate } from "@/i18n";
 import RoutingHistoryModal from "@/components/RoutingHistoryModal.vue"
 import { OrderRoutingService } from "@/services/RoutingService";
 import ArchivedRuleModal from "@/components/ArchivedRuleModal.vue";
+import BrokeringRouteTest from "./BrokeringRouteTest.vue";
 
 const router = useRouter();
 const props = defineProps({
@@ -440,13 +448,15 @@ const conditionFilterEnums = JSON.parse(process.env?.VUE_APP_RULE_FILTER_ENUMS a
 const currentRoutingGroup: any = computed(() => store.getters["orderRouting/getCurrentRoutingGroup"])
 const currentRouting = computed(() => store.getters["orderRouting/getCurrentOrderRouting"])
 const routingRules = computed(() => store.getters["orderRouting/getRulesInformation"])
-const facilities = computed(() => store.getters["util/getFacilities"])
+const facilities = computed(() => store.getters["util/getVirtualFacilities"])
 const enums = computed(() => store.getters["util/getEnums"])
 const shippingMethods = computed(() => store.getters["util/getShippingMethods"])
 const facilityGroups = computed(() => store.getters["util/getFacilityGroups"])
 const routingHistory = computed(() => store.getters["orderRouting/getRoutingHistory"])
 const currentRuleId = computed(() => store.getters["orderRouting/getCurrentRuleId"])
 
+const isFilterUnmatched = computed(() => (id: string) => isRoutingTestEnabled.value && unmatchedFilters.value.includes(id))
+
 let ruleActionType = ref("")
 let selectedRoutingRule = ref({}) as any
 let inventoryRules = ref([]) as any
@@ -462,6 +472,9 @@ let routingStatus = ref("")
 let routeName = ref("")
 let isRouteNameUpdating = ref(false)
 let rulesForReorder = ref([]) as any
+let isRoutingTestEnabled = ref(false)
+let selectedRuleId = ref("")
+let unmatchedFilters = ref([]) as any
 
 const routeNameRef = ref()
 const operatorRef = ref()
@@ -469,6 +482,8 @@ const measurementRef = ref()
 const ruleNameRef = ref()
 
 onIonViewWillEnter(async () => {
+  emitter.on("selectedRule", updateSelectedRule)
+
   emitter.emit("presentLoader", { message: "Fetching filters and inventory rules", backdropDismiss: false })
   await Promise.all([store.dispatch("orderRouting/fetchCurrentOrderRouting", props.orderRoutingId), store.dispatch("util/fetchFacilities"), store.dispatch("util/fetchOmsEnums", { enumTypeId: "ORDER_SALES_CHANNEL" }), store.dispatch("util/fetchShippingMethods"), store.dispatch("util/fetchFacilityGroups")])
   store.dispatch("orderRouting/fetchRoutingHistory", router.currentRoute.value.params.routingGroupId)
@@ -545,6 +560,28 @@ async function chipClickEvent(ref: any) {
   ref.$el.click();
 }
 
+function updateSelectedRule(ruleId: any) {
+  selectedRuleId.value = ruleId
+}
+
+function updateUnmatchedFilters(filters: any) {
+  unmatchedFilters.value = filters
+}
+
+function enableRoutingTest() {
+  isRoutingTestEnabled.value = !isRoutingTestEnabled.value
+
+  if(isRoutingTestEnabled.value) {
+    emitter.on("selectedRule", updateSelectedRule)
+    emitter.on("updateUnmatchedFilters", updateUnmatchedFilters)
+  } else {
+    updateSelectedRule("")
+    updateUnmatchedFilters([])
+    emitter.off("selectedRule", updateSelectedRule)
+    emitter.off("updateUnmatchedFilters", updateUnmatchedFilters)
+  }
+}
+
 function getRouteIndex() {
   // Filtering archived routes as the index and total count needs to calculated by excluding the archived routes
   const activeAndDraftRoute = currentRoutingGroup.value["routings"]?.filter((routing: any) => routing.statusId !== "ROUTING_ARCHIVED")
@@ -1573,4 +1610,14 @@ ion-chip > ion-select {
   text-align: center;
   margin: 0;
 }
+
+.selected-rule {
+  box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.14), 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.20);
+  scale: 1.03;
+  margin-block: var(--spacer-sm);
+}
+
+.rule-item {
+  transition: .5s all ease;
+}
 </style>
diff --git a/src/views/BrokeringRouteTest.vue b/src/views/BrokeringRouteTest.vue
new file mode 100644
index 0000000..4f0f667
--- /dev/null
+++ b/src/views/BrokeringRouteTest.vue
@@ -0,0 +1,372 @@
+<template>
+  <div class="ion-margin">
+    <ion-searchbar v-if="!currentOrder.orderId" v-model="queryString" @keyup.enter="queryString = $event.target.value; searchOrders()"/>
+    <ion-list v-if="!currentOrder.orderId">
+      <ion-item v-for="order in orders" :key="order.groupId">
+        <ion-label>
+          {{ order.orderId }}
+          <p>{{ order.orderName }}</p>
+          <p>{{ order.orderStatusDesc }}</p>
+        </ion-label>
+        <ion-button slot="end" fill="outline" @click="updateCurrentOrder(order)">{{ translate("Test Order") }}</ion-button>
+      </ion-item>
+    </ion-list>
+
+    <template v-else>
+      <div class="order-test-header">
+        <ion-item lines="none">
+          <ion-label slot="start">
+            <h1>{{ currentOrder.orderName }}</h1>
+            <p>{{ currentOrder.orderId }}</p>
+          </ion-label>
+        </ion-item>
+        <ion-item lines="none" button @click="updateCurrentOrder()">
+          <ion-label>{{ translate("Try another order") }}</ion-label>
+          <ion-icon :icon="searchOutline"/>
+        </ion-item>
+      </div>
+
+      <ion-row>
+        <ion-chip v-for="(shipGroup, shipGroupSeqId, index) in currentOrder.groups" :key="shipGroupSeqId" @click="updateCurrentShipGroupId(shipGroupSeqId, shipGroup)" :outline="currentShipGroupId.value !== shipGroupSeqId">
+          {{ index + 1 }}: {{ shipGroup[0].facilityName || shipGroup[0].facilityId }}
+        </ion-chip>
+      </ion-row>
+
+      <div class="ship-groups">
+        <div class="order-group">
+          <!-- TODO: Add support to reset order, currently the button is always disabled, will be eneabled once implemented -->
+          <ion-button class="ion-margin-horizontal" v-if="isOrderBrokered" :disabled="true && hasUnmatchedFilters">
+            <ion-icon :icon="arrowUndoOutline" />
+            {{ translate("Reset order") }}
+          </ion-button>
+          <ion-card class="order-items" v-if="currentShipGroup[0]?.shipGroupSeqId">
+            <ion-item-divider color="light">
+              <ion-label>{{ currentShipGroup[0].facilityName || currentShipGroup[0].facilityId }}</ion-label>
+            </ion-item-divider>
+            <ion-item v-if="isOrderBrokered && brokeringDecisionReason">
+              <ion-label>
+                {{ brokeringDecisionReason }}
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>
+                {{ currentShipGroup[0].shipmentMethodTypeId }}
+                <p>{{ carriers[currentShipGroup[0].carrierPartyId]?.name || currentShipGroup[0].carrierPartyId }}</p>
+              </ion-label>
+              <ion-note slot="end">{{ carriers[currentShipGroup[0].carrierPartyId]?.deliveryDays?.[currentShipGroup[0].shipmentMethodTypeId] || "-" }}{{ " days" }}</ion-note>
+            </ion-item>
+            <ion-item v-for="item in currentShipGroup" :key="item.orderItemSeqId">
+              <ion-thumbnail slot="start">
+                <Image :src="getProduct(item.productId).mainImageUrl"/>
+              </ion-thumbnail>
+              <ion-label>
+                {{ getProduct(item.productId).productName }}
+                <p v-if="isOrderBrokered">{{ getProductStock(item.productId, item.facilityId).availableToPromiseTotal || "-" }}{{ " | " }}{{ getProductStock(item.productId, item.facilityId).quantityOnHandTotal || "-" }}</p>
+              </ion-label>
+              <ion-badge slot="end">{{ item.orderItemStatusDesc }}</ion-badge>
+            </ion-item>
+          </ion-card>
+          <ion-button v-if="!isOrderBrokered && currentShipGroup[0]?.shipGroupSeqId && !errorMessage" @click="brokerOrder()">
+            <ion-icon slot="start" :icon="compassOutline" />
+            {{ translate("Broker Order") }}
+          </ion-button>
+        </div>
+      </div>
+    </template>
+    <p v-if="errorMessage" class="ion-text-center">{{ errorMessage }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { IonBadge, IonButton, IonCard, IonChip, IonIcon, IonItem, IonItemDivider, IonLabel, IonList, IonNote, IonRow, IonSearchbar, IonThumbnail } from "@ionic/vue";
+import { arrowUndoOutline, compassOutline, searchOutline } from "ionicons/icons"
+import { computed, defineProps, ref } from "vue";
+import store from "@/store";
+import { hasError, showToast } from "@/utils";
+import logger from "@/logger";
+import { translate } from "@/i18n";
+import { OrderRoutingService } from "@/services/RoutingService";
+import Image from "@/components/Image.vue"
+import emitter from "@/event-bus";
+
+const props = defineProps({
+  orderRoutingId: {
+    type: String,
+    required: true
+  },
+  routingGroupId: {
+    type: String,
+    required: true
+  },
+  isRoutingTestEnabled: {
+    type: Boolean,
+    required: true,
+    default: false
+  },
+  orderRoutingFilterOptions: {
+    required: true
+  }
+})
+
+let queryString = ref("")
+let orders = ref([]) as any
+let currentOrder = ref({}) as any
+let currentShipGroupId = ref("") as any
+let orderCarrierPartyIds = ref([]) as any
+let errorMessage = ref("")
+let brokeringDecisionReason = ref("")
+let isOrderBrokered = ref(false)
+let hasUnmatchedFilters = ref(false)
+
+const currentEComStore = computed(() => store.getters["user/getCurrentEComStore"])
+const currentShipGroup = computed(() => currentShipGroupId.value ? currentOrder.value.groups[currentShipGroupId.value] : [])
+const carriers = computed(() => store.getters["util/getCarriers"])
+const facilities = computed(() => store.getters["util/getPhysicalFacilities"])
+const getProduct = computed(() => (id: string) => store.getters["product/getProductById"](id)) as any
+const getProductStock = computed(() => (productId: string, facilityId: string) => store.getters["product/getProductStock"](productId, facilityId)) as any
+
+async function searchOrders() {
+  orders.value = []
+  errorMessage.value = ""
+  if(!queryString.value.trim()) {
+    showToast(translate("Enter valid order attribute for searching"))
+    return;
+  }
+
+  const payload = {
+    "json": {
+      "params": {
+        "rows": "10",
+        "group": true,
+        "group.field": "orderId",
+        "group.limit": 1000,
+        "group.ngroups": true,
+        "q.op": "AND",
+        "start": 0
+      },
+      "query":"(*:*)",
+      "filter": `docType: ORDER AND orderId: ${queryString.value} AND -orderStatusId: (ORDER_REJECTED OR ORDER_CANCELLED)`
+    }
+  }
+
+  try {
+    const resp = await OrderRoutingService.findOrder(payload) as any;
+
+    if(!hasError(resp) && resp.data.grouped?.orderId?.groups.length) {
+      const productIds: Array<string> = [];
+      orders.value = resp.data.grouped?.orderId?.groups.map((group: any) => {
+        const groups = group.doclist.docs.reduce((shipGroups: any, item: any) => {
+          productIds.push(item.productId)
+          orderCarrierPartyIds.value.push(item.carrierPartyId)
+          shipGroups[item.shipGroupSeqId] ? shipGroups[item.shipGroupSeqId].push(item) : shipGroups[item.shipGroupSeqId] = [item]
+          return shipGroups
+        }, {})
+
+        return {
+          orderId: group.doclist.docs[0].orderId,
+          orderName: group.doclist.docs[0].orderName,
+          orderStatusDesc: group.doclist.docs[0].orderStatusDesc,
+          groups
+        }
+      })
+
+      store.dispatch("util/fetchCarrierInformation", [...new Set(orderCarrierPartyIds.value)])
+
+      if(productIds.length) {
+        store.dispatch("product/fetchProducts", productIds)
+      }
+    } else {
+      throw resp
+    }
+  } catch(error) {
+    logger.error(error)
+    errorMessage.value = "Unable to find order"
+  }
+}
+
+function updateCurrentOrder(order?: any) {
+  if(!order?.orderId) {
+    queryString.value = ""
+    orders.value = []
+    currentOrder.value = {}
+    currentShipGroupId.value = ""
+    isOrderBrokered.value = false
+    hasUnmatchedFilters.value = false
+    emitter.emit("selectedRule", "")
+    emitter.emit("updateUnmatchedFilters", []);
+    return;
+  }
+
+  currentOrder.value = order
+}
+
+function updateCurrentShipGroupId(shipGroupId: any, shipGroup: any) {
+  if(!shipGroupId) {
+    emitter.emit("selectedRule", "")
+    emitter.emit("updateUnmatchedFilters", []);
+    currentShipGroupId.value = ""
+    return;
+  }
+
+  // If the same ship group seq id is clicked again
+  if(currentShipGroupId.value === shipGroupId) {
+    return;
+  }
+
+  currentShipGroupId.value = shipGroupId
+
+  const shipGroupFacilityId = shipGroup[0].facilityId
+  isOrderBrokered.value = facilities.value[shipGroupFacilityId]
+  hasUnmatchedFilters.value = false
+
+  // If order is already brokered then fetch the brokering info for order
+  if(isOrderBrokered.value) {
+    getOrderBrokeringInfo()
+  } else {
+    checkOrderBrokeringPossibility();
+  }
+}
+
+function checkOrderBrokeringPossibility() {
+  // Defined excluded filters as we are not directly getting information for these params in order, thus for now excluded these when checking for brokering possibility
+  // TODO: add support to honor the below excluded filters
+  const excludedFilters = ["priority", "promiseDaysCutoff", "originFacilityGroupId", "productCategoryId"]
+  const filters = [] as any
+  const shipGroup = currentShipGroup.value[0]
+  if(props.orderRoutingFilterOptions && Object.keys(props.orderRoutingFilterOptions)) {
+
+    Object.entries(props.orderRoutingFilterOptions).map(([key, value]: any) => {
+      if(excludedFilters.includes(key)) {
+        return;
+      }
+
+      switch(value.operator) {
+        case "in":
+          !value.fieldValue.split(",").includes(shipGroup[key]) && filters.push(key)
+          break;
+        case "not-in":
+          value.fieldValue.split(",").includes(shipGroup[key]) && filters.push(key)
+          break;
+        case "equals":
+          shipGroup[key] !== value.fieldValue && filters.push(key)
+          break;
+        case "not-equals":
+          shipGroup[key] === value.fieldValue && filters.push(key)
+          break;
+        default:
+          filters.push(key)
+      }
+    })
+
+    if(filters.length) {
+      hasUnmatchedFilters.value = true
+      emitter.emit("updateUnmatchedFilters", filters);
+      errorMessage.value = "This order will not be brokered in this routing because of the selected order filters."
+    }
+  }
+}
+
+async function brokerOrder() {
+  try {
+    let resp = await OrderRoutingService.brokerOrder({
+      routingGroupId: props.routingGroupId,
+      orderRoutingId: props.orderRoutingId,
+      orderId: currentOrder.value.orderId,
+      shipGroupSeqId: currentShipGroupId.value,
+      productStoreId: currentEComStore.value.productStoreId
+    })
+
+    // TODO: handle error cases, currently success and error are in the same messages property hence having issue in differentiating between the two
+    if(!hasError(resp) && resp.data.messages) {
+      getOrderBrokeringInfo();
+    } else {
+      throw resp.data;
+    }
+  } catch(err) {
+    errorMessage.value = "This order will not be brokered in this routing because of the selected order filters."
+    logger.error(err)
+  }
+}
+
+async function getOrderBrokeringInfo() {
+  const payload = {
+    inputFields: {
+      orderId: currentOrder.value.orderId,
+    },
+    orderBy: "changeDatetime DESC",
+    entityName: "OrderFacilityChange"
+  }
+
+  try {
+    let resp = await OrderRoutingService.getOrderFacilityChangeInfo(payload)
+
+    if(!hasError(resp) && resp.data.docs?.length) {
+      const orderBrokeringInfo = resp.data.docs[0]
+
+      // TODO: need to update the logic once the broker api returns correct data
+      // If the order is brokered by the user then update the order shipGroup info
+      if(!isOrderBrokered.value) {
+        isOrderBrokered.value = true
+
+        // Not using solr query to fetch the updated information as solr doc updation is async and thus might take some time to update
+        // Adding a new ship group to the order
+        currentOrder.value.groups[orderBrokeringInfo.shipGroupSeqId] = currentOrder.value.groups[currentShipGroupId.value].map((item: any) => ({
+          ...item,
+          facilityId: orderBrokeringInfo.facilityId,
+          facilityName: facilities.value[orderBrokeringInfo.facilityId]?.facilityName,
+          shipGroupSeqId: orderBrokeringInfo.shipGroupSeqId
+        }))
+
+        // Removing the previous ship group from the order
+        delete currentOrder.value.groups[currentShipGroupId.value]
+
+        // Updating the value of current ship group with the new ship group
+        currentShipGroupId.value = orderBrokeringInfo.shipGroupSeqId
+      }
+
+      // If the order is brokered using the selected order routing, then highlight the rule that brokered the order
+      // TODO: what if the rule brokered the order but after that the rule is updated, this might create confusion
+      if(orderBrokeringInfo.routingGroupId === props.routingGroupId && orderBrokeringInfo.orderRoutingId === props.orderRoutingId) {
+        emitter.emit("selectedRule", orderBrokeringInfo.routingRuleId)
+      }
+      store.dispatch("product/fetchStock", currentOrder.value.groups[currentShipGroupId.value])
+      brokeringDecisionReason.value = orderBrokeringInfo.comments
+    } else {
+      throw resp.data
+    }
+  } catch(err) {
+    logger.error(err)
+    errorMessage.value = "Unable to fetch brokering information for this order."
+  }
+}
+</script>
+
+<style scoped>
+
+.order-test-header {
+  display: flex;
+  width: 100%;
+}
+
+.order-test-header > ion-item {
+  flex: 1;
+}
+
+.empty-state {
+  text-align: center;
+  margin: 0;
+}
+
+.order-items {
+  width: 100%;
+}
+
+.ship-groups {
+  display: grid;
+  grid-template-columns: minmax(343px, 25%) 1fr;
+}
+
+.order-group {
+  justify-items: center;
+}
+</style>