-
@@ -25,6 +25,7 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
+import store from "@/store";
export default {
name: "vehicle-make",
data() {
@@ -53,7 +54,6 @@ export default {
];
const resultMap = await settleAllPromises(promiseResultMap);
-
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.$refs.funnelSubHeader.initializeComponent(
@@ -77,6 +77,10 @@ export default {
// route to move backwards
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
+ arePagePrerequisitesValid() {
+ console.log(store.getters.vehicle);
+ return store.getters.vehicle.year !== null;
+ },
},
watch: {
diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue
index b06486c74..b27b98d40 100644
--- a/src/layouts/vehicle-model/vehicle-model.vue
+++ b/src/layouts/vehicle-model/vehicle-model.vue
@@ -25,6 +25,8 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
+import store from "@/store";
+
export default {
name: "vehicle-model",
data() {
@@ -77,6 +79,9 @@ export default {
// route to move backwards
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
+ arePagePrerequisitesValid() {
+ return store.getters.vehicle.make !== null;
+ },
},
watch: {
diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue
index 3c0023db1..7193c9e39 100644
--- a/src/layouts/vehicle-style/vehicle-style.vue
+++ b/src/layouts/vehicle-style/vehicle-style.vue
@@ -25,6 +25,8 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
+import store from "@/store";
+
export default {
name: "vehicle-style",
data() {
@@ -78,17 +80,31 @@ export default {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
setVehicle() {
- return this.dispatchNonBlockingStoreAction(this.storeActions.SET_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});
- }
+ return this.dispatchNonBlockingStoreAction(
+ this.storeActions.SET_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,
+ }
+ );
+ },
+ arePagePrerequisitesValid() {
+ return store.getters.vehicle.model !== null;
+ },
},
watch: {
selectedStyle(style) {
this.$store.commit(this.storeMutations.UPDATE_STYLE, style);
this.setVehicle().then(() => {
- 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 dbf488ea2..ddef0d5a8 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -4,9 +4,7 @@
@@ -80,6 +78,11 @@ export default {
);
},
},
+ methods: {
+ arePagePrerequisitesValid() {
+ return true;
+ },
+ },
components: {
yearQuestion,
funnelHeader,
diff --git a/src/router/index.js b/src/router/index.js
index 2a80032f6..7482a3d50 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -44,6 +44,13 @@ const routes = [
try {
// If we already have our route, go to it.
if (router.hasRoute(to.query.fmgPage)) {
+ // Since our route is already in scope, we can grab the component from it and call the arePagePrerequisitesValid function.
+ let arePagePrerequisitesValid = router.getRoutes().filter(x => x.name === to.query.fmgPage)[0].components.default.methods.arePagePrerequisitesValid();
+
+ if (!arePagePrerequisitesValid) {
+ await GoToFunnelStartOn404(next);
+ }
+
return next({ name: to.query.fmgPage, query: to.query });
}
@@ -57,9 +64,17 @@ const routes = [
component: routeData[0].component,
});
+ // Call the next components arePagePrerequisitesValid method before load.
+ // If it returns false, use the 404 logic.
+ let nextComponent = await router.getRoutes().filter(x => x.name === routeData[0].name)[0].components.default();
+
+ if (!nextComponent.default.methods.arePagePrerequisitesValid()) {
+ await GoToFunnelStartOn404(next);
+ }
+
// 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 }) });
-
+
} catch (error) {
console.log(error);
@@ -79,6 +94,7 @@ const router = createRouter({
//---------------------------------------------------------- Router Functions ----------------------------------------------------------
+
// Navigate to the next route, depending on the scenario.
router.navigate = (
scenario,