404 page to use EventBus

src/App.vue

@@ -1,23 +1,58 @@
 <template>
-<router-view></router-view>
+  <div class="container-fluid" style="max-width: 576px">
+    <div class="row">
+      <div class="col-sm-12">
+        <alert
+          v-if="displayGlobalAlert"
+          :alertClass="globalAlertMessage.type"
+          :alertHeadline="globalAlertMessage.messageCopy"
+          :alertCopy="globalAlertMessage.messageHeadline"
+          v-bind:isDismissible="globalAlertMessage.isDismissible"
+        />
+      </div>
+    </div>
+  </div>
+
+  <router-view></router-view>
 </template>
 
 <script>
 import alert from "@/ux-components/alert/alert";
+import { emitter } from "@/helpers/event-bus/event-bus";
+import { globalEvents } from "@/constants/events";
 
 export default {
-    data: function(){
-      return {
-        alertEvent: 'string to change'
+  data: function () {
+    return {
+      globalAlertMessage: {
+        isDismissible: false,
+        messageCopy: "",
+        messageHeadline: "",
+        type: "",
+      },
+      displayGlobalAlert: false,
+    };
+  },
+  mounted() {
+    // Global alert message event
+    emitter.on(globalEvents.GLOBAL_ALERT, (alert) => {
+      this.globalAlertMessage = alert.globalAlertMessage;
+      this.displayGlobalAlert = true;
+    });
+  },
+  watch: {
+    $route(to, from) {
+      // If our route changes, remove the alert
+      if (
+        this.displayGlobalAlert &&
+        from.query.fmgPage !== undefined
+      ) {
+        this.displayGlobalAlert = false;
       }
     },
-    components: {
-        alert
-    },
-    created() {
-        this.emitter.on('alert', (alertData) => {
-            console.log(alertData);
-        });
-    }
-}
+  },
+  components: {
+    alert,
+  },
+};
 </script>

src/constants/events.js

@@ -0,0 +1,12 @@
+const globalEvents = {
+    GLOBAL_ALERT: "GLOBAL_ALERT",
+}
+
+const globalEventTypes = {
+    Success: "alert-success",
+    Warning: "alert-warning",
+    Info: "alert-info",
+    Danger: "alert-danger",
+}
+
+export {globalEvents, globalEventTypes}

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

@@ -0,0 +1,3 @@
+import mitt from 'mitt';
+
+export const emitter = mitt();

src/main.js

@@ -4,11 +4,9 @@ import App from "./App.vue";
 import router from "./router";
 import store from "@/store";
 import baseMixin from "@/mixins/base-mixin.js";
-import mitt from 'mitt';
 import "../node_modules/bootstrap/dist/js/bootstrap.js";
 
 // Vue App Setup
-const emitter = mitt();
 const vueApp = createApp(App);
 
 vueApp.use(router);
@@ -16,6 +14,5 @@ vueApp.use(store);
 vueApp.use(LoadScript);
 vueApp.mixin(baseMixin);
 
-vueApp.config.globalProperties.emitter = emitter;
 
 vueApp.mount("#app");

src/mixins/base-mixin.js

@@ -1,8 +1,10 @@
 import store from "@/store";
 import { storeActions } from "@/constants/store-actions.js";
 import { storeMutations } from "@/constants/store-mutations.js";
-import { navigationScenarios } from "@/router/router-constants/navigation-scenarios"; 
+import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
 import { widgetNames } from "@/constants/widget-names.js";
+import { emitter } from "@/helpers/event-bus/event-bus";
+import { globalEvents } from "@/constants/events";
 
 export default {
   data() {
@@ -19,9 +21,16 @@ export default {
 
       return store.dispatch(type, payload);
     },
-  },
-  mounted(){
-    console.log(this.$route.params);
+    emitGlobalMessage(headline, copy, isDismissible, type) {
+      emitter.emit(globalEvents.GLOBAL_ALERT, {
+        globalAlertMessage: {
+          messageHeadline: headline,
+          messageCopy: copy,
+          isDismissible: isDismissible,
+          type: type
+        }
+      });
+    }
   },
   computed: {
     storeActions() {

src/router/index.js

@@ -4,15 +4,15 @@ import { storeActions } from "@/constants/store-actions";
 import { storeMutations } from "@/constants/store-mutations";
 import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
 import { routingTable } from "@/router/router-constants/routing-table.js";
+import { globalEventTypes } from "@/constants/events";
+import baseMixin from "@/mixins/base-mixin";
 import store from "@/store";
-import mitt from 'mitt'
 
 // 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: "/:pathMatch(.*)*",
@@ -33,8 +33,9 @@ const routes = [
     beforeEnter(to, from, next) {
       // If we have no query string, or we don't have the FmgPage query string.
       if (to.query.fmgPage === undefined) {
-        GoToLastPageFor404(next, store.getters.navigation.lastPage);
+        GoToFunnelStartOn404(next);
       } else {
+
         // If we already have our route, go to it.
         if (router.hasRoute(to.query.fmgPage)) {
           return next({
@@ -53,9 +54,6 @@ const routes = [
               component: routeData[0].component,
             });
 
-            // Assign last route information
-            store.commit(storeMutations.UPDATE_LAST_PAGE, from.query.fmgPage);
-
             // Assign current query string parameters, as well as our fmgPage one.
             next({
               name: routeData[0].name,
@@ -64,7 +62,7 @@ const routes = [
           })
           .catch((error) => {
             // If we can't find the route, go to the last known page.
-            GoToLastPageFor404(next, store.getters.navigation.lastPage);
+            GoToFunnelStartOn404(next);
 
             console.log("Cannot find route, navigating to last page:", error);
           });
@@ -158,13 +156,18 @@ function GetRouteInfoFromPageName(pageName) {
   });
 }
 
-// Go to our last known page the user was on for a 404.
-function GoToLastPageFor404(next, lastPageName) {
+// Go to our start page on a 404.
+function GoToFunnelStartOn404(next) {
 
+  // Emit a global message
+  baseMixin.methods.emitGlobalMessage('We\'re sorry, something went wrong.',
+    'You can get a quote by starting on this page.',
+    true,
+    globalEventTypes.Danger);
 
   next({
     path: '/',
-    query: { fmgPage: lastPageName },
+    query: { fmgPage: FUNNEL_START_PAGE },
   });
 }
 

src/store/index.js

@@ -54,9 +54,6 @@ export default createStore({
     },
     applicationUser: {
       experiments: null,
-      navigation: {
-        lastPage: 'vehicle-year' // our default value is the start page.
-      }
     },
   },
   // See IMPORTANT note at top of "state" declaration.
@@ -83,8 +80,7 @@ export default createStore({
     }
   },
   getters: {
-    vehicle: state => state.order.vehicle,
-    navigation: state => state.applicationUser.navigation
+    vehicle: state => state.order.vehicle
   },
   actions: {
     // Vehicle API Actions