Event bus integration

src/common-components/funnel-header/funnel-header.vue

@@ -1,23 +1,17 @@
 <template>
-  <div
+<div class="funnel-header d-flex justify-content-center align-items-center" v-if="imageSrc">
-    class="funnel-header d-flex justify-content-center align-items-center"
-    v-if="imageSrc"
-  >
     <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
-    <alert
+    <alert v-if="displayGlobalAlert" :alertClass="globalAlertMessage.type" :alertHeadline="globalAlertMessage.messageCopy" :alertCopy="globalAlertMessage.messageHeadline" v-bind:isDismissible="globalAlertMessage.isDismissible" />
-      v-if="displayGlobalAlert"
-      :alertClass="globalAlertMessage.type"
-      :alertHeadline="globalAlertMessage.messageCopy"
-      :alertCopy="globalAlertMessage.messageHeadline"
-      v-bind:isDismissible="globalAlertMessage.isDismissible"
-    />
 </div>
 </template>
 
 <script>
 import alert from "@/ux-components/alert/alert";
 import eventBus from "@/helpers/event-bus/event-bus";
-import {globalEvents, globalEventTypes} from '@/constants/events'
+import {
+    globalEvents,
+    globalEventTypes
+} from "@/constants/events";
 
 export default {
     name: "funnel-header",
@@ -41,6 +35,21 @@ export default {
     components: {
         alert,
     },
+    mounted() {
+
+        // Check if alert event is on the bus
+        const alertEvent = eventBus.readAndPopEventFromBus(
+            globalEvents.Categories.GLOBAL_ALERT,
+            globalEvents.SubCategories.PAGE_NOT_FOUND
+        );
+
+        // If alert event is on the bus, then display the alert
+        if (alertEvent !== undefined) {
+            this.displayGlobalAlert = true;
+            this.globalAlertMessage = alertEvent;
+        }
+
+    },
 };
 </script>
 

src/constants/store-actions.js

@@ -11,6 +11,9 @@ const storeActions = {
   GET_EVOX_IMAGE: "getEvoxImage",
   LOOKUP_VEHICLE_BY_YMMS: "lookupVehicleByYmms",
   LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin",
+  // EVENT BUS
+  ADD_EVENT_TO_BUS: "addEventToBus",
+  REMOVE_EVENT_FROM_BUS: "removeEventFromBus",
 };
 
 export { storeActions };

src/helpers/event-bus/event-bus.js

@@ -1,42 +1,25 @@
 import store from "@/store";
+import { storeActions } from "@/constants/store-actions.js";
 
 export default {
-
     // Adds event to the bus given its category, subcategory, and eventValue;
     addEventToBus(category, subCategory, eventValue) {
-        store.state.applicationUser.eventBus.push({
+        store.commit(storeActions.ADD_EVENT_TO_BUS, { category: category, subCategory: subCategory, eventValue: eventValue });
-            category: category,
-            subCategory: subCategory,
-            eventValue: eventValue,
-        });
     },
 
     // Finds event on the bus, removes the item, and returns its value to the caller.
     readAndPopEventFromBus(category, subCategory) {
-        // Match our item and find the index
+        const event = store.getters.eventBusItem(category, subCategory);
-        const matchedEvent = store.state.applicationUser.eventBus.find(({ category, subCategory }) => category === category && subCategory === subCategory);
 
-        const itemIndex = store.state.applicationUser.eventBus.indexOf(matchedEvent);
+        store.commit(storeActions.REMOVE_EVENT_FROM_BUS, { category: category, subCategory: subCategory });
 
-        // If the item exists, remove it.
+        return event;
-        if (itemIndex > -1) {
-            store.state.applicationUser.eventBus.splice(itemIndex, 1);
-        }
-
-        return matchedEvent === undefined ? undefined : matchedEvent.eventValue;
     },
 
     // Finds the event on the bus and returns its value to the caller, does not remove it.
     readEventFromBus(category, subCategory) {
-        const matchedEvent = store.state.applicationUser.eventBus.find(({ category, subCategory }) => category === category && subCategory === subCategory);
+        const event = store.getters.eventBusItem(category, subCategory);
 
-        return matchedEvent === undefined ? undefined : matchedEvent.eventValue;
+        return event;
     },
-
-    // Checks if an item is on the bus or not, useful when you don't care about the value.
-    isItemOnBus(category, subCategory) {
-        const matchedEvent = store.state.applicationUser.eventBus.find(({ category, subCategory }) => category === category && subCategory === subCategory);
-
-        return matchedEvent !== undefined;
-    }
 }

src/store/index.js

@@ -76,13 +76,27 @@ export default createStore({
       state.order.vehicle.carId = data.carId;
       state.order.vehicle.category = data.category;
     },
-    updateLastPage(state, page) {
+    addEventToBus(state, event) {
-      state.applicationUser.navigation.lastPage = page;
+      state.applicationUser.eventBus.push(event);
+    },
+    removeEventFromBus(state, eventData) {
+      const matchedEvent = state.applicationUser.eventBus.find(({ category, subCategory }) => category === eventData.category && subCategory === eventData.subCategory);
+      const itemIndex = state.applicationUser.eventBus.indexOf(matchedEvent);
+
+      // If the item exists, remove it.
+      if (itemIndex > -1) {
+          state.applicationUser.eventBus.splice(itemIndex, 1);
+      }
     }
   },
   getters: {
     vehicle: state => state.order.vehicle,
-    eventBus: state => state.applicationUser.eventBus,
+    eventBusItem: (state) => (eventCategory, eventSubCategory) => {
+      const matchedEvent = state.applicationUser.eventBus.find(({ category, subCategory }) => category === eventCategory && subCategory === eventSubCategory);
+
+      return matchedEvent !== undefined ? matchedEvent.eventValue : undefined;
+    },
+    eventBus: state => state.applicationUser.eventBus
   },
   actions: {
     // Vehicle API Actions