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",
"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",

55
src/App.vue
View file

@ -1,58 +1,3 @@
<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>
</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"
>
<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>
</template>
<script>
import alert from "@/ux-components/alert/alert";
export default {
name: "funnel-header",
data() {
return {
imageSrc: '',
}
imageSrc: "",
displayGlobalAlert: false,
// globalAlertMessage: {
// isDismissible: false,
// messageCopy: "",
// messageHeadline: "",
// type: "",
// },
};
},
methods: {
initializeComponent(cmsContent) {
this.imageSrc = cmsContent.LogoImage;
}
},
},
components: {
alert,
},
};
</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>
<div class="container-fluid shadow rounded-3 p-0">
<funnelHeader ref="funnelHeader" />
<vehicleBanner ref="vehicleBanner" />
<funnelSubHeader
class="Header"
ref="funnelSubHeader"
/>
</div>
<div class="container-fluid shadow rounded-3 p-0">
<funnelHeader ref="funnelHeader" />
<vehicleBanner ref="vehicleBanner" />
<funnelSubHeader class="Header" ref="funnelSubHeader" />
</div>
</template>
<script>
@ -21,40 +18,48 @@ import store from "@/store";
import baseMixin from "@/mixins/base-mixin";
import { storeActions } from "@/constants/store-actions";
export default ({
name: "vehicle-damage",
beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
const damageOptions = baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.GET_DAMAGE_OPTIONS, {carId: store.getters.vehicle.carId});
export default {
name: "vehicle-damage",
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
const damageOptions = baseMixin.methods.dispatchNonBlockingStoreAction(
storeActions.GET_DAMAGE_OPTIONS,
{ carId: store.getters.vehicle.carId }
);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
{
resultKey: "damageOptions",
promise: damageOptions
},
];
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
{
resultKey: "damageOptions",
promise: damageOptions,
},
];
settleAllPromises(promiseResultMap).then((resultMap) => {
// 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
});
});
const resultMap = await settleAllPromises(promiseResultMap);
},
components: {
funnelHeader,
vehicleBanner,
funnelSubHeader,
// 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
});
},
})
components: {
funnelHeader,
vehicleBanner,
funnelSubHeader,
},
};
</script>

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

@ -4,12 +4,12 @@
<div class="select-car">
<div class="select-car-form rounded text-center">
<vehicleBanner ref="vehicleBanner" />
<funnelSubHeader
ref="funnelSubHeader"
:hasBackButton="true"
backButtonAccessibleText="Change Vehicle Year"
@click-event="backButtonAction"
class="Header"
<funnelSubHeader
ref="funnelSubHeader"
:hasBackButton="true"
backButtonAccessibleText="Change Vehicle Year"
@click-event="backButtonAction"
class="Header"
/>
<makeQuestion v-model="selectedMake" ref="makeQuestion" />
</div>
@ -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: {

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

@ -4,7 +4,7 @@
<div class="select-car">
<div class="select-car-form rounded text-center">
<vehicleBanner ref="vehicleBanner" />
<funnelSubHeader
<funnelSubHeader
ref="funnelSubHeader"
:hasBackButton="true"
backButtonAccessibleText="Change Vehicle Make"
@ -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 modelQuestionInitialDataPromise = modelQuestion.methods.loadInitialData();
const modelQuestionInitialDataPromise =
modelQuestion.methods.loadInitialData();
// Settle promises and get results
const promiseResultMap = [
@ -52,14 +52,24 @@ export default {
promise: modelQuestionInitialDataPromise,
},
];
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.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: {

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

@ -4,7 +4,7 @@
<div class="select-car">
<div class="select-car-form rounded text-center">
<vehicleBanner ref="vehicleBanner" />
<funnelSubHeader
<funnelSubHeader
ref="funnelSubHeader"
:hasBackButton="true"
backButtonAccessibleText="Change Vehicle Model"
@ -36,10 +36,10 @@ export default {
computed: {},
beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
const styleQuestionInitialDataPromise = styleQuestion.methods.loadInitialData();
const styleQuestionInitialDataPromise =
styleQuestion.methods.loadInitialData();
// Settle promises and get results
const promiseResultMap = [
@ -52,14 +52,24 @@ export default {
promise: styleQuestionInitialDataPromise,
},
];
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.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: {

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

@ -4,10 +4,7 @@
<div class="select-car">
<div class="select-car-form rounded text-center">
<vehicleBanner ref="vehicleBanner" />
<funnelSubHeader
class="Header"
ref="funnelSubHeader"
/>
<funnelSubHeader class="Header" ref="funnelSubHeader" />
<yearQuestion v-model="selectedYear" ref="yearQuestion" />
</div>
</div>
@ -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: {

17
src/router/index.js
View file

@ -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 },