Created event bus, created homepage endpoint

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

@@ -4,19 +4,21 @@
     v-if="imageSrc"
   >
     <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
-
-    <!-- <alert
+  <p> {{eventBusItem}} </p>
+    <alert
       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'
 
 export default {
   name: "funnel-header",
@@ -24,12 +26,12 @@ export default {
     return {
       imageSrc: "",
       displayGlobalAlert: false,
-      // globalAlertMessage: {
-      //   isDismissible: false,
-      //   messageCopy: "",
-      //   messageHeadline: "",
-      //   type: "",
-      // },
+      globalAlertMessage: {
+        isDismissible: false,
+        messageCopy: "",
+        messageHeadline: "",
+        type: "",
+      },
     };
   },
   methods: {
@@ -37,6 +39,11 @@ export default {
       this.imageSrc = cmsContent.LogoImage;
     },
   },
+  computed: {
+    eventBusItem(){
+      return eventBus.readAndPopEventFromBus(globalEvents.Categories.GLOBAL_ALERT, globalEvents.SubCategories.PAGE_NOT_FOUND);
+    }
+  },
   components: {
     alert,
   },
@@ -47,6 +54,7 @@ export default {
 .funnel-header {
   height: 56px;
 }
+
 .logo-image {
   max-width: 78px;
 }

src/constants/endpoints.js

@@ -3,6 +3,10 @@ const endpoints = {
     url: "/content/api/v1/content/RouteInfo",
     method: "POST",
   },
+  GetHomepageInfo: {
+    url: "/content/api/v1/content/HomepageInfo",
+    method: "GET",
+  },
   GetVehicleYears: {
     url: "/vehicle/api/v1/vehicle/years",
     method: "GET",

src/constants/events.js

@@ -1,5 +1,10 @@
 const globalEvents = {
-    GLOBAL_ALERT: "GLOBAL_ALERT",
+    Categories: {
+        GLOBAL_ALERT: "GLOBAL_ALERT",
+    },
+    SubCategories: {
+        PAGE_NOT_FOUND: "PAGE_NOT_FOUND",
+    }
 }
 
 const globalEventTypes = {

src/constants/store-actions.js

@@ -1,5 +1,6 @@
 const storeActions = {
   GET_ROUTE_INFO_ACTION: "getRouteInfo",
+  GET_HOMEPAGE_NAME: "getHomepageName",
   GET_PAGE_DATA: "getPageData",
   GET_VEHICLE_YEARS: "getVehicleYears",
   GET_VEHICLE_MAKES: "getVehicleMakes",

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

@@ -0,0 +1,40 @@
+import store from "@/store";
+
+export default {
+
+    // Adds event to the bus given its category, subcategory, and eventValue;
+    addEventToBus(category, subCategory, eventValue) {
+        store.state.applicationUser.eventBus.push({
+            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 matchedEvent = store.state.applicationUser.eventBus.find(({ category, subCategory }) => category === category && subCategory === subCategory);
+        const itemIndex = store.state.applicationUser.eventBus.indexOf(matchedEvent);
+
+        // If the item exists, remove it.
+        if (itemIndex > -1) {
+            store.state.applicationUser.eventBus.splice(itemIndex, 1);
+        }
+
+        return 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);
+        return matchedEvent.eventValue;
+    },
+
+    // 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/layouts/vehicle-year/vehicle-year.vue

@@ -20,6 +20,7 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
+import eventBus from "@/helpers/event-bus/event-bus";
 
 export default {
   name: "vehicle-year",
@@ -49,7 +50,7 @@ export default {
     ];
 
     let resultMap = await settleAllPromises(promiseResultMap);
-    
+
     // Call the "next" function to complete the transition to this page.
     next((vm) => {
       vm.$refs.funnelSubHeader.initializeComponent(
@@ -77,7 +78,6 @@ export default {
       );
     },
   },
-
   components: {
     yearQuestion,
     funnelHeader,

src/mixins/base-mixin.js

@@ -7,7 +7,6 @@ import { widgetNames } from "@/constants/widget-names.js";
 export default {
   data() {
     return {
-      routedToLastKnownPage: false,
     };
   },
   methods: {

src/router/index.js

@@ -3,13 +3,14 @@ import { createWebHistory, createRouter } from "vue-router";
 import { storeActions } from "@/constants/store-actions";
 import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
 import { routingTable } from "@/router/router-constants/routing-table.js";
+import { globalEvents, globalEventTypes } from "@/constants/events";
+import eventBus from "@/helpers/event-bus/event-bus";
 import store from "@/store";
 
 // Components
 import ComponentTest from "@/layouts/component-test/component-test.vue";
 import AddressPOC from "@/layouts/address-poc/address-poc.vue";
 
-const FUNNEL_START_PAGE = 'vehicle-year';
 const routes = [
   {
     path: "/component-test", // This is a temporary route for testing.
@@ -26,26 +27,35 @@ const routes = [
     async beforeEnter(to, from, next) {
       // If we have no query string, or we don't have the FmgPage query string.
       if (to.query.fmgPage === undefined) {
-        GoToFunnelStartOn404(next);
+        await GoToFunnelStartOn404(next);
       } else {
 
-        // If we already have our route, go to it.
-        if (router.hasRoute(to.query.fmgPage)) {
-          return next({ name: to.query.fmgPage, query: to.query });
+        try {
+          // If we already have our route, go to it.
+          if (router.hasRoute(to.query.fmgPage)) {
+            return next({ name: to.query.fmgPage, query: to.query });
+          }
+
+          // Get route info for the given url. Names will have a 1:1 relationship with names in the Cms.
+          const routeData = await GetRouteInfoFromPageName(to.query.fmgPage);
+
+          // Add our dynamic route.
+          router.addRoute({
+            path: routeData[0].path, // Always the same path, because we control it with query strings.
+            name: routeData[0].name,
+            component: routeData[0].component,
+          });
+
+          // Assign current query string parameters, as well as our fmgPage one.
+          next({ name: routeData[0].name, query: Object.assign(to.query, { fmgPage: routeData[0].name }) });
+
+        } catch (error) {
+          console.log(error);
+
+          // If we don't have a route, go to our 404 page.
+          await GoToFunnelStartOn404(next);
         }
 
-        // Get route info for the given url. Names will have a 1:1 relationship with names in the Cms.
-        const routeData = await GetRouteInfoFromPageName(to.query.fmgPage);
-
-        // Add our dynamic route.
-        router.addRoute({
-          path: routeData[0].path, // Always the same path, because we control it with query strings.
-          name: routeData[0].name,
-          component: routeData[0].component,
-        });
-
-        // Assign current query string parameters, as well as our fmgPage one.
-        next({ name: routeData[0].name, query: Object.assign(to.query, { fmgPage: routeData[0].name }) });
       }
     },
   },
@@ -129,10 +139,26 @@ async function GetRouteInfoFromPageName(pageName) {
 }
 
 // Go to our start page on a 404.
-function GoToFunnelStartOn404(next) {
+async function GoToFunnelStartOn404(next) {
+
+  const apiResponse = await store.dispatch(storeActions.GET_HOMEPAGE_NAME);
+  const homepageName = apiResponse.data.Result;
+
+  // Put item on the bus
+  eventBus.addEventToBus(
+    globalEvents.Categories.GLOBAL_ALERT,
+    globalEvents.SubCategories.PAGE_NOT_FOUND,
+    {
+      isDismissible: true,
+      messageCopy: 'You can get a quote by starting on this page.',
+      messageHeadline: 'We\'re sorry, something went wrong.',
+      type: globalEventTypes.Danger
+    }
+  );
+
   next({
     path: '/',
-    query: { fmgPage: FUNNEL_START_PAGE },
+    query: { fmgPage: homepageName },
   });
 }
 

src/store/index.js

@@ -54,6 +54,7 @@ export default createStore({
     },
     applicationUser: {
       experiments: null,
+      eventBus: []
     },
   },
   // See IMPORTANT note at top of "state" declaration.
@@ -80,7 +81,8 @@ export default createStore({
     }
   },
   getters: {
-    vehicle: state => state.order.vehicle
+    vehicle: state => state.order.vehicle,
+    eventBus: state => state.applicationUser.eventBus,
   },
   actions: {
     // Vehicle API Actions
@@ -156,6 +158,12 @@ export default createStore({
         },
       });
     },
+    getHomepageName(context) {
+      return globalMethods.callHttpClient({
+        method: endpoints.GetHomepageInfo.method,
+        endpoint: endpoints.GetHomepageInfo.url,
+    });
+  },
     getPageData(context, { pageName }) {
       return globalMethods.callHttpClient({
         method: endpoints.GetPageData.method,