diff --git a/src/App.vue b/src/App.vue
index fd17c1309..ec7cecf46 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,23 +1,58 @@
-
+
+
+
diff --git a/src/constants/events.js b/src/constants/events.js
new file mode 100644
index 000000000..58002c389
--- /dev/null
+++ b/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}
\ No newline at end of file
diff --git a/src/helpers/event-bus/event-bus.js b/src/helpers/event-bus/event-bus.js
new file mode 100644
index 000000000..d92fdfd56
--- /dev/null
+++ b/src/helpers/event-bus/event-bus.js
@@ -0,0 +1,3 @@
+import mitt from 'mitt';
+
+export const emitter = mitt();
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index b6d4c4ce3..322374cfd 100644
--- a/src/main.js
+++ b/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");
diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js
index fcf63c7e1..4d3363a84 100644
--- a/src/mixins/base-mixin.js
+++ b/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() {
diff --git a/src/router/index.js b/src/router/index.js
index 4ade682eb..0530fc50e 100644
--- a/src/router/index.js
+++ b/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 },
});
}
diff --git a/src/store/index.js b/src/store/index.js
index ff6faf05d..d7ba3f985 100644
--- a/src/store/index.js
+++ b/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