created page data methods for Vuex / Router

src/constants/store-mutations.js

@@ -13,6 +13,7 @@ const storeMutations = {
   UPDATE_IS_REPAIR: "updateIsRepair",
   UPDATE_NUMBER_OF_CHIPS: "updateNumberOfChips",
   UPDATE_GLASS_TO_REPLACE: "updateGlassToReplace",
+  UPDATE_PARTS: "updateParts",
 
   // EVENT BUS MUTATIONS
   ADD_EVENT_TO_BUS: "addEventToBus",
@@ -23,6 +24,9 @@ const storeMutations = {
   RESET_DAMAGE_STATE: "resetDamageState",
   RESET_REGISTRATION_STATE: "resetRegistrationState",
   RESET_PARTS_STATE: "resetPartsState",
+
+  // OTHER MUTATIONS
+  UPDATE_PAGE_DATA: "updatePageData",
   
 };
 

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -145,7 +145,7 @@ export default {
       const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(this.storeActions.GET_PARTS_OR_QUESTIONS,
       { carId: this.$store.getters.vehicle.carId, glassArray: this.selectedGlassToReplace()}, false);
 
-      this.$router.navigateAfterSave(this.navigationScenarios.SELECTED_GLASS_MULTIPLE_PARTS, this.$route, {}, { [routerParameterKeys.VEHICLE_PARTS_DATA]: JSON.stringify(partsData.data)});
+      this.$router.navigateAfterSave(this.navigationScenarios.SELECTED_GLASS_MULTIPLE_PARTS, this.$route, {}, {}, partsData.data);
     },
 
     selectedGlassToReplace() {

src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue

@@ -44,7 +44,7 @@ import {
 } from "@/constants/dynamictext-mapper";
 
 export default {
-    name: "part-question",
+    name: "glass-part-question",
     inheritAttrs: false,
     data() {
         return {

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -17,15 +17,15 @@
             <hr v-if="i > 0" />
         </div>
 
-        <partQuestion :ref="`${refPrefix}-${item.glassLocation}`" v-model="glassParts[item.glassLocation + '-' + item.glassName]" :glassLocation="item.glassLocation" :glassName="item.glassName" :colorAnswers="item.colorAnswers" />
+        <glassPartQuestion :ref="`${refPrefix}-${item.glassLocation}`" v-model="glassParts[item.glassLocation + '-' + item.glassName]" :glassLocation="item.glassLocation" :glassName="item.glassName" :colorAnswers="item.colorAnswers" />
     </div>
-    <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
+    <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
 </div>
 </template>
 
 <script>
 // Components
-import partQuestion from "@/layouts/vehicle-parts/part-question/part-question";
+import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass-part-question";
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
@@ -39,10 +39,10 @@ import {
 import {
     settleAllPromises
 } from "@/helpers/layout-helper";
-import {
-    routerParameterKeys
-} from "@/router/router-constants/router-parameter-keys";
 import store from "@/store";
+import {
+    fmgPageValues
+} from "@/router/router-constants/fmgPage-values";
 
 export default {
     name: "vehicle-parts",
@@ -73,7 +73,7 @@ export default {
                 resultMap.cmsContent.FunnelFooterWidget
             );
 
-            // Part Question dynamic component
+            // Glass Part Question dynamic component
             Object.keys(vm.$refs)
                 .filter((r) => r.includes(vm.refPrefix) && vm.$refs[r][0] !== undefined)
                 .forEach((c) =>
@@ -100,7 +100,7 @@ export default {
         };
     },
     components: {
-        partQuestion,
+        glassPartQuestion,
         funnelHeader,
         vehicleBanner,
         funnelSubHeader,
@@ -109,7 +109,7 @@ export default {
     },
     computed: {
         Parts() {
-            const partsData = JSON.parse(this.$route.params[routerParameterKeys.VEHICLE_PARTS_DATA]);
+            const partsData = store.getters.pageData(this.$route.query.fmgPage);
 
             // Map API result data, to vehicle-parts data structure
             const mappedData = partsData.partsOrQuestions.map(g => {
@@ -133,13 +133,25 @@ export default {
         },
     },
     methods: {
-        arePagePrerequisitesValid(parameters) {
-            if (store.getters.damage.isRepair !== null && parameters[routerParameterKeys.VEHICLE_PARTS_DATA] !== undefined) {
+        arePagePrerequisitesValid() {
+            // Check if isRepair is populated and if the pageData we need is here (Parts data)
+            if (store.getters.damage.isRepair !== null && Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS)).length !== 0) {
                 return true;
             }
-            return false
 
+            return false
+        },
+        backButtonAction() {
+            this.$router.navigate(
+                this.navigationScenarios.CLICKED_BACK,
+                this.$route
+            );
+        },
+
+        forwardButtonAction() {
+            const pickedParts = '';
         }
+
     },
 };
 </script>

src/mixins/base-mixin.js

@@ -18,6 +18,9 @@ export default {
 
       return store.dispatch(type, payload);
     },
+    savePageDataToStore(page, data){
+      store.commit(storeMutations.UPDATE_PAGE_DATA, { page: page, data: data });
+    }
   },
   computed: {
     storeActions() {

src/router/index.js

@@ -1,6 +1,7 @@
 // Supporting files
 import { createWebHistory, createRouter } from "vue-router";
 import { storeActions } from "@/constants/store-actions";
+import baseMixin from "@/mixins/base-mixin";
 import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
 import { routingTable } from "@/router/router-constants/routing-table.js";
 import { globalEvents, globalEventTypes } from "@/constants/events";
@@ -55,7 +56,7 @@ const routes = [
               .getRoutes()
               .filter((x) => x.name === to.query.fmgPage)[0].components;
 
-            if (!arePagePrerequisitesValid(component, to.params)) {
+            if (!arePagePrerequisitesValid(component)) {
               await GoToFunnelStartOn404(next);
             }
 
@@ -80,7 +81,7 @@ const routes = [
             .filter((x) => x.name === routeData[0].name)[0]
             .components.default();
 
-          if (!arePagePrerequisitesValid(nextComponent, to.params)) {
+          if (!arePagePrerequisitesValid(nextComponent)) {
             await GoToFunnelStartOn404(next);
           }
 
@@ -108,18 +109,18 @@ const router = createRouter({
 
 //---------------------------------------------------------- Router Functions ----------------------------------------------------------
 
-router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}) => {
-  navigate(scenario, currentRoute, false, optionalQuery, optionalParams);
+router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) => {
+  navigate(scenario, currentRoute, false, optionalQuery, optionalParams, optionalPageData);
 }
 
-router.navigateAfterSave = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}) => {
-  navigate(scenario, currentRoute, true, optionalQuery, optionalParams);
+router.navigateAfterSave = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) => {
+  navigate(scenario, currentRoute, true, optionalQuery, optionalParams, optionalPageData);
 }
 
 // PRIVATE FUNCTIONS
 
 // Navigate to the next route, depending on the scenario.
-function navigate(scenario, currentRoute, invalidateOnSave, optionalQuery = {}, optionalParams = {}) {
+function navigate(scenario, currentRoute, invalidateOnSave, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) {
   if (!scenario) {
     console.error("No scenario provided. Please review the routing table.");
     return;
@@ -138,6 +139,9 @@ function navigate(scenario, currentRoute, invalidateOnSave, optionalQuery = {},
       resetDependentState(currentComponent);
     }
 
+    // Append page data to the store for the NEXT page, if any. It will be an empty object if none is provided.
+    baseMixin.methods.savePageDataToStore(matchingScenarioMap.destinationFmgPageValue, optionalPageData);
+
     router.push({
       name: "root",
       query: Object.assign(optionalQuery, {
@@ -217,8 +221,8 @@ async function GoToFunnelStartOn404(next) {
 }
 
 // Checks arePagePrerequisitesValid on the component passed in.
-function arePagePrerequisitesValid(component, parameters = {}) {
-  return component.default.methods.arePagePrerequisitesValid(parameters);
+function arePagePrerequisitesValid(component) {
+  return component.default.methods.arePagePrerequisitesValid();
 }
 
 // Reset dependant state on route change.

src/router/router-constants/router-parameter-keys.js

@@ -1,5 +1,3 @@
-const routerParameterKeys = {
-    VEHICLE_PARTS_DATA: "vehiclePartsData",
-  };
+const routerParameterKeys = {  };
   
   export { routerParameterKeys };

src/router/router-constants/routing-table.js

@@ -76,6 +76,19 @@ const routingTable = [
       },
     ],
   },
+  {
+    fmgPageValue: fmgPageValues.VEHICLE_PARTS,
+    maps: [
+      {
+        scenario: navigationScenarios.CLICKED_BACK,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+      },
+      {
+        scenario: navigationScenarios.SELECTED_PARTS,
+        destinationFmgPageValue: fmgPageValues.QUOTE,
+      },
+    ],
+  },
 ];
 
 export { routingTable };

src/store/index.js

@@ -27,12 +27,12 @@ export const state = {
     },
     lineItems:{
       glassParts: null,
-      childParts: null,
       otherParts: null
     }
   },
   applicationUser: {
     eventBus: [],
+    pageData: {}
   },
 }
 
@@ -75,7 +75,12 @@ export const mutations = {
   updateGlassToReplace(state, glassToReplace){
     state.order.damage.glassToReplace = glassToReplace;
   },
-  
+  updateParts(state, partsData){
+    state.order.lineItems.glassParts = partsData;
+  },
+  updatePageData(state, pageData){
+    state.applicationUser.pageData[pageData.page] = pageData.data;
+  },
 
   // EVENT BUS MUTATIONS
   addEventToBus(state, event) {
@@ -136,7 +141,10 @@ export const getters = {
   },
   eventBus: (state) => state.applicationUser.eventBus,
   damage: (state) => state.order.damage,
-  lineItems: (state) => state.order.lineItems
+  lineItems: (state) => state.order.lineItems,
+  pageData: (state) => (page) => {
+    return state.applicationUser.pageData[page];
+  }
 }
 
 // Export Actions