Use 'next' function for skipping styles page

This commit is contained in:
FrankRua 2022-08-08 10:07:37 -04:00
parent ae6c242f2d
commit 7d391266e7

View file

@ -1,9 +1,12 @@
<template> <template>
<div class="page-container-grouped-styles" v-show="showStylePage"> <div class="page-container-grouped-styles">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<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 cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage /> <vehicleBanner
cmsWidgetName="VehicleBannerWidget"
displayGenericVehicleImage
/>
<funnelSubHeader <funnelSubHeader
cmsWidgetName="FunnelSubHeaderWidget" cmsWidgetName="FunnelSubHeaderWidget"
:hasBackButton="true" :hasBackButton="true"
@ -11,7 +14,11 @@
@click-event="backButtonAction" @click-event="backButtonAction"
/> />
<div class="fade-on-route-transition"> <div class="fade-on-route-transition">
<styleQuestion v-model="selectedStyle" ref="styleQuestion" cmsWidgetName="VehicleStyleQuestion" /> <styleQuestion
v-model="selectedStyle"
ref="styleQuestion"
cmsWidgetName="VehicleStyleQuestion"
/>
</div> </div>
</div> </div>
</div> </div>
@ -36,8 +43,7 @@ export default {
name: "vehicle-style", name: "vehicle-style",
data() { data() {
return { return {
selectedStyle: null, selectedStyle: null
showStylePage: false,
}; };
}, },
@ -62,27 +68,33 @@ export default {
]; ];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
const visitedVehicleDamage = JSON.stringify(store.getters.applicationUser.pageData).indexOf(fmgPageValues.VEHICLE_DAMAGE) < 0 ? false : true;
// Call the "next" function to complete the transition to this page. // Call the "next" function to complete the transition to this page.
next((vm) => {
//skip this style page if only 1 vehicle style returned and they have yet to visit vehicle damage
var visitedVehicleDamage = JSON.stringify(store.getters.applicationUser.pageData).indexOf(fmgPageValues.VEHICLE_DAMAGE) < 0 ? false : true;
if (resultMap.styleQuestionInitialData.lenghth > 1 || visitedVehicleDamage) { // If we have exactly one style
vm.showStylePage = true; if(resultMap.styleQuestionInitialData.length === 1 || !visitedVehicleDamage) {
vm.setCmsContent(resultMap.cmsContent); store.commit(storeMutations.UPDATE_STYLE, resultMap.styleQuestionInitialData[0]);
vm.$refs.styleQuestion.initializeComponent(
resultMap.styleQuestionInitialData await store.dispatch(storeActions.SET_VEHICLE,
); {
} year: store.getters.vehicle.year,
else{ make: store.getters.vehicle.make,
store.commit(storeMutations.UPDATE_STYLE, resultMap.styleQuestionInitialData[0]); model: store.getters.vehicle.model,
vm.setVehicle().then(() => { style: store.getters.vehicle.style,
vm.$router.navigateAfterSave(vm.navigationScenarios.SELECTED_STYLE,vm.$route);
return;
}); });
}
}); // ...GetNavigationMap(navigationScenarios.SELECTED_STYLE, to);
//...
next({name: 'root', query: Object.assign(to.query, { fmgPage: '....destinationFmgPageValue' })});
} else{
next( (vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.$refs.styleQuestion.initializeComponent(resultMap.styleQuestionInitialData)
});
}
}, },
methods: { methods: {