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