From 5f8108e4b8dd748df922137f993eb91c07487bdf Mon Sep 17 00:00:00 2001 From: FrankRua Date: Fri, 14 Jan 2022 16:22:35 -0500 Subject: [PATCH] Switched to using await, ditched emitter --- package.json | 1 - src/App.vue | 55 ------------ .../funnel-header/funnel-header.vue | 26 +++++- src/helpers/event-bus/event-bus.js | 3 - src/layouts/vehicle-damage/vehicle-damage.vue | 85 ++++++++++--------- src/layouts/vehicle-make/vehicle-make.vue | 53 +++++++----- src/layouts/vehicle-model/vehicle-model.vue | 43 ++++++---- src/layouts/vehicle-style/vehicle-style.vue | 48 +++++++---- src/layouts/vehicle-year/vehicle-year.vue | 44 ++++++---- src/router/index.js | 17 +--- 10 files changed, 191 insertions(+), 184 deletions(-) delete mode 100644 src/helpers/event-bus/event-bus.js diff --git a/package.json b/package.json index 2c0d50df3..6033a0009 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,6 @@ "core-js": "^3.6.5", "http-status-codes": "^2.1.4", "jest-junit": "^13.0.0", - "mitt": "^3.0.0", "vue": "^3.0.0", "vue-plugin-load-script": "^2.1.0", "vue-router": "^4.0.11", diff --git a/src/App.vue b/src/App.vue index ec7cecf46..a44ab87b7 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,58 +1,3 @@ - - diff --git a/src/common-components/funnel-header/funnel-header.vue b/src/common-components/funnel-header/funnel-header.vue index f2934cb37..a5313c91c 100644 --- a/src/common-components/funnel-header/funnel-header.vue +++ b/src/common-components/funnel-header/funnel-header.vue @@ -4,21 +4,41 @@ v-if="imageSrc" > Safelite logo + + diff --git a/src/helpers/event-bus/event-bus.js b/src/helpers/event-bus/event-bus.js deleted file mode 100644 index d92fdfd56..000000000 --- a/src/helpers/event-bus/event-bus.js +++ /dev/null @@ -1,3 +0,0 @@ -import mitt from 'mitt'; - -export const emitter = mitt(); \ No newline at end of file diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index abf24e998..edcfedaa3 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -1,12 +1,9 @@ diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue index e641c4c73..c9b5afe81 100644 --- a/src/layouts/vehicle-make/vehicle-make.vue +++ b/src/layouts/vehicle-make/vehicle-make.vue @@ -4,12 +4,12 @@
-
@@ -35,11 +35,11 @@ export default { }, computed: {}, - beforeRouteEnter(to, from, next) { - + async beforeRouteEnter(to, from, next) { // Call APIs const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage); - const makeQuestionInitialDataPromise = makeQuestion.methods.loadInitialData(); + const makeQuestionInitialDataPromise = + makeQuestion.methods.loadInitialData(); // Settle promises and get results const promiseResultMap = [ @@ -52,14 +52,24 @@ export default { promise: makeQuestionInitialDataPromise, }, ]; - settleAllPromises(promiseResultMap).then((resultMap) => { - // Call the "next" function to complete the transition to this page. - next((vm) => { - vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget); - vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget); - vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget); - vm.$refs.makeQuestion.initializeComponent(resultMap.cmsContent.VehicleMakeQuestion, resultMap.makeQuestionInitialData); - }); + + const resultMap = await settleAllPromises(promiseResultMap); + + // Call the "next" function to complete the transition to this page. + next((vm) => { + vm.$refs.funnelSubHeader.initializeComponent( + resultMap.cmsContent.FunnelSubHeaderWidget + ); + vm.$refs.funnelHeader.initializeComponent( + resultMap.cmsContent.FunnelHeaderWidget + ); + vm.$refs.vehicleBanner.initializeComponent( + resultMap.cmsContent.VehicleBannerWidget + ); + vm.$refs.makeQuestion.initializeComponent( + resultMap.cmsContent.VehicleMakeQuestion, + resultMap.makeQuestionInitialData + ); }); }, @@ -67,14 +77,17 @@ export default { backButtonAction() { // route to move backwards this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); - } + }, }, watch: { selectedMake(make) { this.$store.commit(this.storeMutations.UPDATE_MAKE, make); - this.$router.navigate(this.navigationScenarios.SELECTED_MAKE, this.$route); - } + this.$router.navigate( + this.navigationScenarios.SELECTED_MAKE, + this.$route + ); + }, }, components: { diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue index c682e9e24..92e979af4 100644 --- a/src/layouts/vehicle-model/vehicle-model.vue +++ b/src/layouts/vehicle-model/vehicle-model.vue @@ -4,7 +4,7 @@
- { - // Call the "next" function to complete the transition to this page. - next((vm) => { - vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget); - vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget); - vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget); - vm.$refs.modelQuestion.initializeComponent(resultMap.cmsContent.VehicleModelQuestion, resultMap.modelQuestionInitialData); - }); + + const resultMap = await settleAllPromises(promiseResultMap); + + // Call the "next" function to complete the transition to this page. + next((vm) => { + vm.$refs.funnelSubHeader.initializeComponent( + resultMap.cmsContent.FunnelSubHeaderWidget + ); + vm.$refs.funnelHeader.initializeComponent( + resultMap.cmsContent.FunnelHeaderWidget + ); + vm.$refs.vehicleBanner.initializeComponent( + resultMap.cmsContent.VehicleBannerWidget + ); + vm.$refs.modelQuestion.initializeComponent( + resultMap.cmsContent.VehicleModelQuestion, + resultMap.modelQuestionInitialData + ); }); }, @@ -67,14 +77,17 @@ export default { backButtonAction() { // route to move backwards this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); - } + }, }, watch: { selectedModel(model) { this.$store.commit(this.storeMutations.UPDATE_MODEL, model); - this.$router.navigate(this.navigationScenarios.SELECTED_MODEL, this.$route); - } + this.$router.navigate( + this.navigationScenarios.SELECTED_MODEL, + this.$route + ); + }, }, components: { diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue index ff9fb86d3..3ae0a593b 100644 --- a/src/layouts/vehicle-style/vehicle-style.vue +++ b/src/layouts/vehicle-style/vehicle-style.vue @@ -4,7 +4,7 @@
- { - // Call the "next" function to complete the transition to this page. - next((vm) => { - vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget); - vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget); - vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget); - vm.$refs.styleQuestion.initializeComponent(resultMap.cmsContent.VehicleStyleQuestion, resultMap.styleQuestionInitialData); - }); + + const resultMap = await settleAllPromises(promiseResultMap); + + // Call the "next" function to complete the transition to this page. + next((vm) => { + vm.$refs.funnelSubHeader.initializeComponent( + resultMap.cmsContent.FunnelSubHeaderWidget + ); + vm.$refs.funnelHeader.initializeComponent( + resultMap.cmsContent.FunnelHeaderWidget + ); + vm.$refs.vehicleBanner.initializeComponent( + resultMap.cmsContent.VehicleBannerWidget + ); + vm.$refs.styleQuestion.initializeComponent( + resultMap.cmsContent.VehicleStyleQuestion, + resultMap.styleQuestionInitialData + ); }); }, @@ -69,16 +79,24 @@ export default { this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); }, selectVehicle() { - this.dispatchNonBlockingStoreAction(this.storeActions.GET_VEHICLE, {year: this.$store.getters.vehicle.year, make: this.$store.getters.vehicle.make, model: this.$store.getters.vehicle.model, style: this.$store.getters.vehicle.style}); - } + this.dispatchNonBlockingStoreAction(this.storeActions.GET_VEHICLE, { + year: this.$store.getters.vehicle.year, + make: this.$store.getters.vehicle.make, + model: this.$store.getters.vehicle.model, + style: this.$store.getters.vehicle.style, + }); + }, }, watch: { selectedStyle(style) { this.$store.commit(this.storeMutations.UPDATE_STYLE, style); this.selectVehicle(); - this.$router.navigate(this.navigationScenarios.SELECTED_STYLE, this.$route); - } + this.$router.navigate( + this.navigationScenarios.SELECTED_STYLE, + this.$route + ); + }, }, components: { diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue index c5c85675e..bf19cb08d 100644 --- a/src/layouts/vehicle-year/vehicle-year.vue +++ b/src/layouts/vehicle-year/vehicle-year.vue @@ -4,10 +4,7 @@
- +
@@ -33,11 +30,11 @@ export default { }, computed: {}, - beforeRouteEnter(to, from, next) { - + async beforeRouteEnter(to, from, next) { // Call APIs const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage); - const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData(); + const yearQuestionInitialDataPromise = + yearQuestion.methods.loadInitialData(); // Settle promises and get results const promiseResultMap = [ @@ -50,22 +47,35 @@ export default { promise: yearQuestionInitialDataPromise, }, ]; - settleAllPromises(promiseResultMap).then((resultMap) => { - // Call the "next" function to complete the transition to this page. - next((vm) => { - vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget); - vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget); - vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget); - vm.$refs.yearQuestion.initializeComponent(resultMap.cmsContent.VehicleYearQuestion, resultMap.yearQuestionInitialData); - }); + + let resultMap = await settleAllPromises(promiseResultMap); + + // Call the "next" function to complete the transition to this page. + next((vm) => { + vm.$refs.funnelSubHeader.initializeComponent( + resultMap.cmsContent.FunnelSubHeaderWidget + ); + vm.$refs.funnelHeader.initializeComponent( + resultMap.cmsContent.FunnelHeaderWidget + ); + vm.$refs.vehicleBanner.initializeComponent( + resultMap.cmsContent.VehicleBannerWidget + ); + vm.$refs.yearQuestion.initializeComponent( + resultMap.cmsContent.VehicleYearQuestion, + resultMap.yearQuestionInitialData + ); }); }, watch: { selectedYear(year) { this.$store.commit(this.storeMutations.UPDATE_YEAR, year); - this.$router.navigate(this.navigationScenarios.SELECTED_YEAR, this.$route); - } + this.$router.navigate( + this.navigationScenarios.SELECTED_YEAR, + this.$route + ); + }, }, components: { diff --git a/src/router/index.js b/src/router/index.js index 0530fc50e..2ffec3359 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -38,10 +38,7 @@ const routes = [ // If we already have our route, go to it. if (router.hasRoute(to.query.fmgPage)) { - return next({ - name: to.query.fmgPage, - query: to.query, - }); + 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. @@ -55,10 +52,7 @@ const routes = [ }); // 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 }), - }); + next({name: routeData[0].name, query: Object.assign(to.query, { fmgPage: routeData[0].name })}); }) .catch((error) => { // If we can't find the route, go to the last known page. @@ -158,13 +152,6 @@ function GetRouteInfoFromPageName(pageName) { // 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: FUNNEL_START_PAGE },