jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Switched to using await, ditched emitter

Browse source
This commit is contained in:
FrankRua 2022-01-14 16:22:35 -05:00
parent a7002f47d5
commit 5f8108e4b8
10 changed files with 191 additions and 184 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -16,7 +16,6 @@
"core-js": "^3.6.5", "core-js": "^3.6.5",
"http-status-codes": "^2.1.4", "http-status-codes": "^2.1.4",
"jest-junit": "^13.0.0", "jest-junit": "^13.0.0",
"mitt": "^3.0.0",
"vue": "^3.0.0", "vue": "^3.0.0",
"vue-plugin-load-script": "^2.1.0", "vue-plugin-load-script": "^2.1.0",
"vue-router": "^4.0.11", "vue-router": "^4.0.11",

55
src/App.vue
View file

@ -1,58 +1,3 @@
<template> <template>
<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> <router-view></router-view>
</template> </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 {
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,
},
};
</script>

26
src/common-components/funnel-header/funnel-header.vue
View file

@ -4,21 +4,41 @@
v-if="imageSrc" v-if="imageSrc"
> >
<img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" /> <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
<!-- <alert
v-if="displayGlobalAlert"
:alertClass="globalAlertMessage.type"
:alertHeadline="globalAlertMessage.messageCopy"
:alertCopy="globalAlertMessage.messageHeadline"
v-bind:isDismissible="globalAlertMessage.isDismissible"
/> -->
</div> </div>
</template> </template>
<script> <script>
import alert from "@/ux-components/alert/alert";
export default { export default {
name: "funnel-header", name: "funnel-header",
data() { data() {
return { return {
imageSrc: '', imageSrc: "",
} displayGlobalAlert: false,
// globalAlertMessage: {
// isDismissible: false,
// messageCopy: "",
// messageHeadline: "",
// type: "",
// },
};
}, },
methods: { methods: {
initializeComponent(cmsContent) { initializeComponent(cmsContent) {
this.imageSrc = cmsContent.LogoImage; this.imageSrc = cmsContent.LogoImage;
} },
},
components: {
alert,
}, },
}; };
</script> </script>

3
src/helpers/event-bus/event-bus.js
View file

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

85
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -1,12 +1,9 @@
<template> <template>
<div class="container-fluid shadow rounded-3 p-0"> <div class="container-fluid shadow rounded-3 p-0">
<funnelHeader ref="funnelHeader" /> <funnelHeader ref="funnelHeader" />
<vehicleBanner ref="vehicleBanner" /> <vehicleBanner ref="vehicleBanner" />
<funnelSubHeader <funnelSubHeader class="Header" ref="funnelSubHeader" />
class="Header" </div>
ref="funnelSubHeader"
/>
</div>
</template> </template>
<script> <script>
@ -21,40 +18,48 @@ import store from "@/store";
import baseMixin from "@/mixins/base-mixin"; import baseMixin from "@/mixins/base-mixin";
import { storeActions } from "@/constants/store-actions"; import { storeActions } from "@/constants/store-actions";
export default ({ export default {
name: "vehicle-damage", name: "vehicle-damage",
beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
// Call APIs // Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage); const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
const damageOptions = baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.GET_DAMAGE_OPTIONS, {carId: store.getters.vehicle.carId}); const damageOptions = baseMixin.methods.dispatchNonBlockingStoreAction(
storeActions.GET_DAMAGE_OPTIONS,
{ carId: store.getters.vehicle.carId }
);
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: "cmsContent", resultKey: "cmsContent",
promise: cmsContentPromise, promise: cmsContentPromise,
}, },
{ {
resultKey: "damageOptions", resultKey: "damageOptions",
promise: damageOptions promise: damageOptions,
}, },
]; ];
settleAllPromises(promiseResultMap).then((resultMap) => { const resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget);
vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget);
vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget);
// use resultMap.damageOptions for damage options
});
});
}, // Call the "next" function to complete the transition to this page.
components: { next((vm) => {
funnelHeader, vm.$refs.funnelHeader.initializeComponent(
vehicleBanner, resultMap.cmsContent.FunnelHeaderWidget
funnelSubHeader, );
vm.$refs.vehicleBanner.initializeComponent(
resultMap.cmsContent.VehicleBannerWidget
);
vm.$refs.funnelSubHeader.initializeComponent(
resultMap.cmsContent.FunnelSubHeaderWidget
);
// use resultMap.damageOptions for damage options
});
}, },
}) components: {
funnelHeader,
vehicleBanner,
funnelSubHeader,
},
};
</script> </script>

53
src/layouts/vehicle-make/vehicle-make.vue
View file

@ -4,12 +4,12 @@
<div class="select-car"> <div class="select-car">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
<vehicleBanner ref="vehicleBanner" /> <vehicleBanner ref="vehicleBanner" />
<funnelSubHeader <funnelSubHeader
ref="funnelSubHeader" ref="funnelSubHeader"
:hasBackButton="true" :hasBackButton="true"
backButtonAccessibleText="Change Vehicle Year" backButtonAccessibleText="Change Vehicle Year"
@click-event="backButtonAction" @click-event="backButtonAction"
class="Header" class="Header"
/> />
<makeQuestion v-model="selectedMake" ref="makeQuestion" /> <makeQuestion v-model="selectedMake" ref="makeQuestion" />
</div> </div>
@ -35,11 +35,11 @@ export default {
}, },
computed: {}, computed: {},
beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
// Call APIs // Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage); const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
const makeQuestionInitialDataPromise = makeQuestion.methods.loadInitialData(); const makeQuestionInitialDataPromise =
makeQuestion.methods.loadInitialData();
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
@ -52,14 +52,24 @@ export default {
promise: makeQuestionInitialDataPromise, promise: makeQuestionInitialDataPromise,
}, },
]; ];
settleAllPromises(promiseResultMap).then((resultMap) => {
// Call the "next" function to complete the transition to this page. const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget); // Call the "next" function to complete the transition to this page.
vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget); next((vm) => {
vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget); vm.$refs.funnelSubHeader.initializeComponent(
vm.$refs.makeQuestion.initializeComponent(resultMap.cmsContent.VehicleMakeQuestion, resultMap.makeQuestionInitialData); 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() { backButtonAction() {
// route to move backwards // route to move backwards
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
} },
}, },
watch: { watch: {
selectedMake(make) { selectedMake(make) {
this.$store.commit(this.storeMutations.UPDATE_MAKE, 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: { components: {

43
src/layouts/vehicle-model/vehicle-model.vue
View file

@ -4,7 +4,7 @@
<div class="select-car"> <div class="select-car">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
<vehicleBanner ref="vehicleBanner" /> <vehicleBanner ref="vehicleBanner" />
<funnelSubHeader <funnelSubHeader
ref="funnelSubHeader" ref="funnelSubHeader"
:hasBackButton="true" :hasBackButton="true"
backButtonAccessibleText="Change Vehicle Make" backButtonAccessibleText="Change Vehicle Make"
@ -35,11 +35,11 @@ export default {
}, },
computed: {}, computed: {},
beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
// Call APIs // Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage); const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
const modelQuestionInitialDataPromise = modelQuestion.methods.loadInitialData(); const modelQuestionInitialDataPromise =
modelQuestion.methods.loadInitialData();
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
@ -52,14 +52,24 @@ export default {
promise: modelQuestionInitialDataPromise, promise: modelQuestionInitialDataPromise,
}, },
]; ];
settleAllPromises(promiseResultMap).then((resultMap) => {
// Call the "next" function to complete the transition to this page. const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget); // Call the "next" function to complete the transition to this page.
vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget); next((vm) => {
vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget); vm.$refs.funnelSubHeader.initializeComponent(
vm.$refs.modelQuestion.initializeComponent(resultMap.cmsContent.VehicleModelQuestion, resultMap.modelQuestionInitialData); 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() { backButtonAction() {
// route to move backwards // route to move backwards
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
} },
}, },
watch: { watch: {
selectedModel(model) { selectedModel(model) {
this.$store.commit(this.storeMutations.UPDATE_MODEL, 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: { components: {

48
src/layouts/vehicle-style/vehicle-style.vue
View file

@ -4,7 +4,7 @@
<div class="select-car"> <div class="select-car">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
<vehicleBanner ref="vehicleBanner" /> <vehicleBanner ref="vehicleBanner" />
<funnelSubHeader <funnelSubHeader
ref="funnelSubHeader" ref="funnelSubHeader"
:hasBackButton="true" :hasBackButton="true"
backButtonAccessibleText="Change Vehicle Model" backButtonAccessibleText="Change Vehicle Model"
@ -36,10 +36,10 @@ export default {
computed: {}, computed: {},
beforeRouteEnter(to, from, next) { beforeRouteEnter(to, from, next) {
// Call APIs // Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage); const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
const styleQuestionInitialDataPromise = styleQuestion.methods.loadInitialData(); const styleQuestionInitialDataPromise =
styleQuestion.methods.loadInitialData();
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
@ -52,14 +52,24 @@ export default {
promise: styleQuestionInitialDataPromise, promise: styleQuestionInitialDataPromise,
}, },
]; ];
settleAllPromises(promiseResultMap).then((resultMap) => {
// Call the "next" function to complete the transition to this page. const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget); // Call the "next" function to complete the transition to this page.
vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget); next((vm) => {
vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget); vm.$refs.funnelSubHeader.initializeComponent(
vm.$refs.styleQuestion.initializeComponent(resultMap.cmsContent.VehicleStyleQuestion, resultMap.styleQuestionInitialData); 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); this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
}, },
selectVehicle() { 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: { watch: {
selectedStyle(style) { selectedStyle(style) {
this.$store.commit(this.storeMutations.UPDATE_STYLE, style); this.$store.commit(this.storeMutations.UPDATE_STYLE, style);
this.selectVehicle(); this.selectVehicle();
this.$router.navigate(this.navigationScenarios.SELECTED_STYLE, this.$route); this.$router.navigate(
} this.navigationScenarios.SELECTED_STYLE,
this.$route
);
},
}, },
components: { components: {

44
src/layouts/vehicle-year/vehicle-year.vue
View file

@ -4,10 +4,7 @@
<div class="select-car"> <div class="select-car">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
<vehicleBanner ref="vehicleBanner" /> <vehicleBanner ref="vehicleBanner" />
<funnelSubHeader <funnelSubHeader class="Header" ref="funnelSubHeader" />
class="Header"
ref="funnelSubHeader"
/>
<yearQuestion v-model="selectedYear" ref="yearQuestion" /> <yearQuestion v-model="selectedYear" ref="yearQuestion" />
</div> </div>
</div> </div>
@ -33,11 +30,11 @@ export default {
}, },
computed: {}, computed: {},
beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
// Call APIs // Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage); const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData(); const yearQuestionInitialDataPromise =
yearQuestion.methods.loadInitialData();
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
@ -50,22 +47,35 @@ export default {
promise: yearQuestionInitialDataPromise, promise: yearQuestionInitialDataPromise,
}, },
]; ];
settleAllPromises(promiseResultMap).then((resultMap) => {
// Call the "next" function to complete the transition to this page. let resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget); // Call the "next" function to complete the transition to this page.
vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget); next((vm) => {
vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget); vm.$refs.funnelSubHeader.initializeComponent(
vm.$refs.yearQuestion.initializeComponent(resultMap.cmsContent.VehicleYearQuestion, resultMap.yearQuestionInitialData); 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: { watch: {
selectedYear(year) { selectedYear(year) {
this.$store.commit(this.storeMutations.UPDATE_YEAR, 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: { components: {

17
src/router/index.js
View file

@ -38,10 +38,7 @@ const routes = [
// If we already have our route, go to it. // If we already have our route, go to it.
if (router.hasRoute(to.query.fmgPage)) { if (router.hasRoute(to.query.fmgPage)) {
return next({ return next({name: to.query.fmgPage,query: to.query});
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. // 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. // Assign current query string parameters, as well as our fmgPage one.
next({ next({name: routeData[0].name, query: Object.assign(to.query, { fmgPage: routeData[0].name })});
name: routeData[0].name,
query: Object.assign(to.query, { fmgPage: routeData[0].name }),
});
}) })
.catch((error) => { .catch((error) => {
// If we can't find the route, go to the last known page. // 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. // Go to our start page on a 404.
function GoToFunnelStartOn404(next) { 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({ next({
path: '/', path: '/',
query: { fmgPage: FUNNEL_START_PAGE }, query: { fmgPage: FUNNEL_START_PAGE },