Merge branch 'feature/CSR-335' into feature/CSR-297

src/constants/store-actions.js

@@ -14,10 +14,10 @@ const storeActions = {
   GET_PARTS_OR_QUESTIONS: "getPartsOrQuestions",
 
   // DEPENDENCY MUTATIONS
-  RESET_VEHICLE_AND_DEPS: "resetVehicleAndDependencies",
+  RESET_VEHICLE_STATE: "resetVehicleAndDependencies",
-  RESET_DAMAGE_AND_DEPS: "resetDamageAndDependencies",
+  RESET_DAMAGE_STATE: "resetDamageAndDependencies",
-  RESET_REGISTRATION_AND_DEPS: "resetRegistrationAndDependencies",
+  RESET_REGISTRATION_STATE: "resetRegistrationAndDependencies",
-  RESET_PARTS_AND_DEPS: "resetPartsAndDependencies",
+  RESET_PARTS_STATE: "resetPartsAndDependencies",
 };
 
 export { storeActions };

src/constants/store-mutations.js

@@ -13,16 +13,20 @@ 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",
   REMOVE_EVENT_FROM_BUS: "removeEventFromBus",
 
   // DEPENDENCY MUTATIONS
-  RESET_VEHICLE_AND_DEPS: "resetVehicleAndDependencies",
+  RESET_VEHICLE_STATE: "resetVehicleState",
-  RESET_DAMAGE_AND_DEPS: "resetDamageAndDependencies",
+  RESET_DAMAGE_STATE: "resetDamageState",
-  RESET_REGISTRATION_AND_DEPS: "resetRegistrationAndDependencies",
+  RESET_REGISTRATION_STATE: "resetRegistrationState",
-  RESET_PARTS_AND_DEPS: "resetPartsAndDependencies",
+  RESET_PARTS_STATE: "resetPartsState",
+
+  // OTHER MUTATIONS
+  UPDATE_PAGE_DATA: "updatePageData",
   
 };
 

src/constants/tint-mapper.js

@@ -3,62 +3,62 @@
 // Src assumes you have a @/assets/img/tints/, making the final value @/assets/img/tints/{Src} in the markup.
 // See vehicle-parts for implementation example. 
 const tintMap = {
-    rear: [
+    other: [
         // Blue Shade
-        { name: "blue shade, blue tint", src: "BackGlass-BlueShade-BlueTint.svg" },
+        { name: "blue tint, blue shade", src: "Glass-BlueShade-BlueTint.svg" },
-        { name: "blue shade, brown tint", src: "BackGlass-BlueShade-BrownTint.svg" },
+        { name: "brown tint, blue shade", src: "Glass-BlueShade-BrownTint.svg" },
-        { name: "blue shade, gray tint", src: "BackGlass-BlueShade-GrayTint.svg" },
+        { name: "gray tint, blue shade", src: "Glass-BlueShade-GrayTint.svg" },
-        { name: "blue shade, green tint", src: "BackGlass-BlueShade-GreenTint.svg" },
+        { name: "green tint, blue shade", src: "Glass-BlueShade-GreenTint.svg" },
-        { name: "blue shade", src: "BackGlass-BlueShade-NoTint.svg" },
+        { name: "blue shade", src: "Glass-BlueShade-NoTint.svg" },
 
         // Brown Shade
-        { name: "brown shade, brown tint", src: "BackGlass-BrownShade-BrownTint.svg" },
+        { name: "brown tint, brown shade", src: "Glass-BrownShade-BrownTint.svg" },
 
         // Gray Shade
-        { name: "gray shade, blue tint", src: "BackGlass-GrayShade-BlueTint.svg" },
+        { name: "blue tint, gray shade", src: "Glass-GrayShade-BlueTint.svg" },
-        { name: "gray shade, brown tint", src: "BackGlass-GrayShade-BrownTint.svg" },
+        { name: "brown tint, gray shade", src: "Glass-GrayShade-BrownTint.svg" },
-        { name: "gray shade, gray tint", src: "BackGlass-GrayShade-GrayTint.svg" },
+        { name: "gray tint, gray shade", src: "Glass-GrayShade-GrayTint.svg" },
-        { name: "gray shade, green tint", src: "BackGlass-GrayShade-GreenTint.svg" },
+        { name: "green tint, gray shade", src: "Glass-GrayShade-GreenTint.svg" },
 
         // Green Shade
-        { name: "green shade, blue tint", src: "BackGlass-GreenShade-BlueTint.svg" },
+        { name: "blue tint, green shade", src: "Glass-GreenShade-BlueTint.svg" },
-        { name: "green shade, brown tint", src: "BackGlass-GreenShade-BrownTint.svg" },
+        { name: "brown tint, green shade", src: "Glass-GreenShade-BrownTint.svg" },
-        { name: "green shade, green tint", src: "BackGlass-GreenShade-GreenTint.svg" },
+        { name: "green tint, green shade", src: "Glass-GreenShade-GreenTint.svg" },
 
         // Tints Only
-        { name: "blue tint", src: "BackGlass-NoShade-BlueTint.svg" },
+        { name: "blue tint", src: "Glass-NoShade-BlueTint.svg" },
-        { name: "brown tint", src: "BackGlass-NoShade-BrownTint.svg" },
+        { name: "brown tint", src: "Glass-NoShade-BrownTint.svg" },
-        { name: "dark brown tint", src: "BackGlass-NoShade-DarkBrownTint.svg" },
+        { name: "dark brown tint", src: "Glass-NoShade-DarkBrownTint.svg" },
-        { name: "dark gray tint", src: "BackGlass-NoShade-DarkGrayTint.svg" },
+        { name: "dark gray tint", src: "Glass-NoShade-DarkGrayTint.svg" },
-        { name: "gray tint", src: "BackGlass-NoShade-GrayTint.svg" },
+        { name: "gray tint", src: "Glass-NoShade-GrayTint.svg" },
-        { name: "green tint", src: "BackGlass-NoShade-GreenTint.svg" },
+        { name: "green tint", src: "Glass-NoShade-GreenTint.svg" },
-        { name: "gray tint privacy", src: "BackGlass-NoShade-Privacy.svg" },
+        { name: "gray tint privacy", src: "Glass-NoShade-Privacy.svg" },
 
         // No shade or tint
-        { name: "no shade, no tint", src: "BackGlass-NoShade-NoTint.svg" }, // ???
+        { name: "no shade, no tint", src: "Glass-NoShade-NoTint.svg" }, // ???
     ],
 
     windshield: [
         // Blue Shade
-        { name: "blue shade, blue tint", src: "Windshield-BlueShade-BlueTint.svg" },
+        { name: "blue tint, blue shade", src: "Windshield-BlueShade-BlueTint.svg" },
-        { name: "blue shade, brown tint", src: "Windshield-BlueShade-BrownTint.svg" },
+        { name: "brown tint, blue shade", src: "Windshield-BlueShade-BrownTint.svg" },
-        { name: "blue shade, gray tint", src: "Windshield-BlueShade-GrayTint.svg" },
+        { name: "gray tint, blue shade", src: "Windshield-BlueShade-GrayTint.svg" },
-        { name: "blue shade, green tint", src: "Windshield-BlueShade-GreenTint.svg" },
+        { name: "green tint, blue shade", src: "Windshield-BlueShade-GreenTint.svg" },
         { name: "blue shade", src: "Windshield-BlueShade-NoTint.svg" },
 
         // Brown Shade
-        { name: "brown shade, brown tint", src: "Windshield-BrownShade-BrownTint.svg" },
+        { name: "brown tint, brown shade", src: "Windshield-BrownShade-BrownTint.svg" },
 
         // Gray Shade
-        { name: "gray shade, blue tint", src: "Windshield-GrayShade-BlueTint.svg" },
+        { name: "blue tint, gray shade", src: "Windshield-GrayShade-BlueTint.svg" },
-        { name: "gray shade, brown tint", src: "Windshield-GrayShade-BrownTint.svg" },
+        { name: "brown tint, gray shade", src: "Windshield-GrayShade-BrownTint.svg" },
-        { name: "gray shade, gray tint", src: "Windshield-GrayShade-GrayTint.svg" },
+        { name: "gray tint, gray shade", src: "Windshield-GrayShade-GrayTint.svg" },
-        { name: "gray shade, green tint", src: "Windshield-GrayShade-GreenTint.svg" },
+        { name: "green tint, gray shade", src: "Windshield-GrayShade-GreenTint.svg" },
 
         // Green Shade
-        { name: "green shade, blue tint", src: "Windshield-GreenShade-BlueTint.svg" },
+        { name: "blue tint, green shade", src: "Windshield-GreenShade-BlueTint.svg" },
-        { name: "green shade, brown tint", src: "Windshield-GreenShade-BrownTint.svg" },
+        { name: "brown tint, green shade", src: "Windshield-GreenShade-BrownTint.svg" },
-        { name: "green shade, green tint", src: "Windshield-GreenShade-GreenTint.svg" },
+        { name: "green tint, green shade", src: "Windshield-GreenShade-GreenTint.svg" },
 
         // Tints Only
         { name: "blue tint", src: "Windshield-NoShade-BlueTint.svg" },
@@ -80,6 +80,11 @@ const tintMap = {
 // Returns undefined if no items are found.
 export function getTintImage(glassLocation, colorString) {
 
+    // Windshield glass has special images, all other glass uses the same though.
+    if(glassLocation.toLowerCase() !== 'windshield'){
+        glassLocation = 'other';
+    }
+
     if (tintMap[glassLocation.toLowerCase()] === undefined) {
         return '';
     }

src/layouts/form-test/form-test.vue

@@ -144,7 +144,7 @@ export default {
     },
     resetDependentState() {
       // Invokes
-      store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
+      store.dispatch(storeActions.RESET_PARTS_STATE);
     },
     onSubmit(values) {
       window.alert('Success! Submitted values: ' + JSON.stringify(values, null ,2))

src/layouts/vehicle-damage/vehicle-damage.spec.js

@@ -162,7 +162,7 @@ describe("vehicle-damage.vue", () => {
     wrapper.vm.resetDependentState();
 
     //Assert
-    expect(store.dispatch).toBeCalledWith(storeActions.RESET_PARTS_AND_DEPS)
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_PARTS_STATE)
 
   });
 });

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

@@ -121,7 +121,7 @@ export default {
     },
     resetDependentState() {
       // Invokes
-      store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
+      store.dispatch(storeActions.RESET_PARTS_STATE);
     },
     backButtonAction() {
       // route to move backwards
@@ -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]: partsData});
+      this.$router.navigateAfterSave(this.navigationScenarios.SELECTED_GLASS_MULTIPLE_PARTS, this.$route, {}, {}, partsData.data);
     },
 
     selectedGlassToReplace() {

src/layouts/vehicle-make/vehicle-make.spec.js

@@ -223,8 +223,8 @@ describe("vehicle-make.vue", () => {
     expect(store.commit).toBeCalledWith(storeMutations.UPDATE_CAR_ID, null)
     expect(store.commit).toBeCalledWith(storeMutations.UPDATE_VEHICLE_CATEGORY, null)
 
-    expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_AND_DEPS)
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_STATE)
-    expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_AND_DEPS)
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_STATE)
 
   });
 });

src/layouts/vehicle-make/vehicle-make.vue

@@ -94,8 +94,8 @@ export default {
       store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
 
       // Invokes
-      store.dispatch(storeActions.RESET_DAMAGE_AND_DEPS);
+      store.dispatch(storeActions.RESET_DAMAGE_STATE);
-      store.dispatch(storeActions.RESET_REGISTRATION_AND_DEPS);
+      store.dispatch(storeActions.RESET_REGISTRATION_STATE);
     },
   },
 

src/layouts/vehicle-model/vehicle-model.spec.js

@@ -208,8 +208,8 @@ describe("vehicle-model.vue", () => {
     expect(store.commit).toBeCalledWith(storeMutations.UPDATE_CAR_ID, null)
     expect(store.commit).toBeCalledWith(storeMutations.UPDATE_VEHICLE_CATEGORY, null)
 
-    expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_AND_DEPS)
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_STATE)
-    expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_AND_DEPS)
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_STATE)
 
   });
 });

src/layouts/vehicle-model/vehicle-model.vue

@@ -94,8 +94,8 @@ export default {
       store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
 
       // Invokes
-      store.dispatch(storeActions.RESET_DAMAGE_AND_DEPS);
+      store.dispatch(storeActions.RESET_DAMAGE_STATE);
-      store.dispatch(storeActions.RESET_REGISTRATION_AND_DEPS);
+      store.dispatch(storeActions.RESET_REGISTRATION_STATE);
     },
   },
 

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

@@ -1,7 +1,7 @@
 <template>
 <div class="container">
     <div class="row">
-        <p>{{ colorQuestionText }}</p>
+        <p class="mb-0">{{ colorQuestionText }}</p>
     </div>
 </div>
 
@@ -27,6 +27,7 @@
         </div>
     </transition>
 </div>
+
 </template>
 
 <script>
@@ -43,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

@@ -11,17 +11,21 @@
         </div>
     </div>
 
-    <div v-for="(item, i) in Parts" :key="i">
+    <div v-for="(item, i) in PartsForQuestions" :key="i">
-        <partQuestion :ref="`${refPrefix}-${item.glassLocation}`" v-model="glassParts[item.glassLocation + '-' + item.glassName]" :glassLocation="item.glassLocation" :glassName="item.glassName" :colorAnswers="item.colorAnswers" />
+        <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
-        <br />
+        <div class="container-fluid">
+            <hr v-if="i > 0" />
+        </div>
+
+        <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";
@@ -29,12 +33,11 @@ import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 import alert from "@/ux-components/alert/alert";
 
 // Supporting Files
-import {
+import {fetchCmsContentForPage} from "@/helpers/cms-content-helper";
-    fetchCmsContentForPage
+import {settleAllPromises} from "@/helpers/layout-helper";
-} from "@/helpers/cms-content-helper";
+import {fmgPageValues} from "@/router/router-constants/fmgPage-values";
-import {
+import {storeMutations} from "@/constants/store-mutations";
-    settleAllPromises
+import store from "@/store";
-} from "@/helpers/layout-helper";
 
 
 export default {
@@ -66,7 +69,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) =>
@@ -93,7 +96,7 @@ export default {
         };
     },
     components: {
-        partQuestion,
+        glassPartQuestion,
         funnelHeader,
         vehicleBanner,
         funnelSubHeader,
@@ -101,83 +104,86 @@ export default {
         alert,
     },
     computed: {
-        Parts() {
+        PartsForQuestions() {
-            return [{
+            const partsData = store.getters.pageData(this.$route.query.fmgPage);
-                    glassLocation: "Rear",
+
-                    glassName: "Stationary",
+            // Map API result data, to vehicle-parts data structure
-                    colorAnswers: [{
+            const mappedData = partsData.partsOrQuestions.map(g => {
-                            ColorAnswerText: "Green Tint",
+                return {
+                    glassName: g.glassName,
+                    glassLocation: g.glassLocation,
+                    colorAnswers: g.parts.reduce((arr, p) => {
+                        arr.push({
+                            ColorAnswerText: p.color,
                             FeatureAnswers: [{
-                                FeatureAnswerText: "Backglass - heated glass, solar, 1 hole",
+                                FeatureAnswerText: p.description === '' ? p.color : p.description,
-                                PartNumber: "test-backglass-green-tint-1-hole",
+                                PartNumber: p.partNumber
-                            }, ],
+                            }]
-                        },
+                        });
-                        {
+                        return arr;
-                            ColorAnswerText: "Green Tint",
+                    }, [])
-                            FeatureAnswers: [{
+                }
-                                FeatureAnswerText: "Backglass - heated glass, solar, 2 hole",
+            });
-                                PartNumber: "test-backglass-green-tint-2-hole",
+
-                            }, ],
+            return mappedData;
-                        },
-                        {
-                            ColorAnswerText: "Gray Tint Privacy",
-                            FeatureAnswers: [{
-                                FeatureAnswerText: "Backglass - heated glass, solar, 3 hole",
-                                PartNumber: "test-backglass-gray-tint-privacy-3-hole",
-                            }, ],
-                        },
-                        {
-                            ColorAnswerText: "Gray Tint Privacy",
-                            FeatureAnswers: [{
-                                FeatureAnswerText: "Backglass - heated glass, solar, 4 hole",
-                                PartNumber: "test-backglass-blue-tint-4-hole",
-                            }, ],
-                        },
-                    ],
-                },
-                {
-                    glassLocation: "Windshield",
-                    glassName: "Single",
-                    colorAnswers: [{
-                            ColorAnswerText: "Blue Tint",
-                            FeatureAnswers: [{
-                                FeatureAnswerText: "Windshield - heated glass, solar, 1 hole",
-                                PartNumber: "test-windshield-blue-tint-1-hole",
-                            }, ],
-                        },
-                        {
-                            ColorAnswerText: "Blue Tint",
-                            FeatureAnswers: [{
-                                FeatureAnswerText: "Windshield -heated glass, solar, 2 hole",
-                                PartNumber: "test-blue-tint-windshield-2-hole",
-                            }, ],
-                        },
-                        {
-                            ColorAnswerText: "Gray Tint Privacy",
-                            FeatureAnswers: [{
-                                FeatureAnswerText: "Windshield -heated glass, solar, 3 hole",
-                                PartNumber: "test-gray-tint-privacy-windshield-3-hole",
-                            }, ],
-                        },
-                        {
-                            ColorAnswerText: "Gray Tint Privacy",
-                            FeatureAnswers: [{
-                                FeatureAnswerText: "Windshield -heated glass, solar, 4 hole",
-                                PartNumber: "test-brown-tint-windshield-4-hole",
-                            }, ],
-                        },
-                    ],
-                },
-            ];
         },
+
+        PartsFromApi() {
+            return store.getters.pageData(fmgPageValues.VEHICLE_PARTS);
+        }
+
     },
     methods: {
-        arePagePrerequisitesValid(parameters) {
+        arePagePrerequisitesValid() {
-            // store.getters.damage.isRepair !== null;
+            // Check if isRepair is populated and if the pageData we need is here (Parts data)
-            // parameters.PartsByGlassName.length > 0;
+            if (store.getters.damage.isRepair !== null && Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS)).length !== 0) {
+                return true;
+            }
+
+            return false
+        },
+        backButtonAction() {
+            this.$router.navigate(
+                this.navigationScenarios.CLICKED_BACK,
+                this.$route
+            );
+        },
+
+        forwardButtonAction() {
+            const selectedGlassPartNumbers = [];
+            const matchedParts = [];
+
+            // Compile all selected parts from the page.
+            for (let [key, value] of Object.entries(this.glassParts)) {
+                for (let [glassKey, glassValue] of Object.entries(value)) {
+                    selectedGlassPartNumbers.push(glassValue[0]);
+                }
+            }
+
+            // Match them to the parts from the API.
+            for (let [key, value] of Object.entries(this.PartsFromApi.partsOrQuestions)) {
+                for (let [partKey, partValue] of Object.entries(value.parts)) {
+                    const currentPart = this.PartsFromApi.partsOrQuestions[key].parts[partKey];
+                    const isMatched = selectedGlassPartNumbers.some(p => p === currentPart.partNumber);
+
+                    if (isMatched) {
+                        matchedParts.push(currentPart);
+                    }
+                }
+            }
+
+            // If no parts could be matched, throw an error.
+            if(matchedParts.length === 0) {
+                throw new Error("Could not match any parts to the selected parts");
+            }
+
+            // Save parts to the store.
+            store.commit(storeMutations.UPDATE_PARTS, matchedParts);
+
+            // Navigate to the next page.
             
-            return true;
         }
+
     },
 };
 </script>

src/layouts/vehicle-style/vehicle-style.vue

@@ -99,8 +99,8 @@ export default {
     },
     resetDependentState() {
       // Invokes
-      store.dispatch(storeActions.RESET_DAMAGE_AND_DEPS);
+      store.dispatch(storeActions.RESET_DAMAGE_STATE);
-      store.dispatch(storeActions.RESET_REGISTRATION_AND_DEPS);
+      store.dispatch(storeActions.RESET_REGISTRATION_STATE);
     },
   },
 

src/layouts/vehicle-year/vehicle-year.spec.js

@@ -163,8 +163,8 @@ describe("vehicle-year.vue", () => {
     expect(store.commit).toBeCalledWith(storeMutations.UPDATE_CAR_ID, null)
     expect(store.commit).toBeCalledWith(storeMutations.UPDATE_VEHICLE_CATEGORY, null)
 
-    expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_AND_DEPS)
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_STATE)
-    expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_AND_DEPS)
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_STATE)
 
   });
 });

src/layouts/vehicle-year/vehicle-year.vue

@@ -95,8 +95,8 @@ export default {
       store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
 
       // Invokes
-      store.dispatch(storeActions.RESET_DAMAGE_AND_DEPS);
+      store.dispatch(storeActions.RESET_DAMAGE_STATE);
-      store.dispatch(storeActions.RESET_REGISTRATION_AND_DEPS);
+      store.dispatch(storeActions.RESET_REGISTRATION_STATE);
     }
   },
   components: {

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 = {}) => {
+router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) => {
-  navigate(scenario, currentRoute, false, optionalQuery, optionalParams);
+  navigate(scenario, currentRoute, false, optionalQuery, optionalParams, optionalPageData);
 }
 
-router.navigateAfterSave = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}) => {
+router.navigateAfterSave = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) => {
-  navigate(scenario, currentRoute, true, optionalQuery, optionalParams);
+  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 = {}) {
+function arePagePrerequisitesValid(component) {
-  return component.default.methods.arePagePrerequisitesValid(parameters);
+  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 = {
+const routerParameterKeys = {  };
-    VEHICLE_PARTS_DATA: "vehiclePartsData",
-  };
   
   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) {
@@ -96,7 +101,7 @@ export const mutations = {
   },
 
   // DEPENDENCY MUTATIONS
-  resetVehicleAndDependencies(state) {
+  resetVehicleState(state) {
     state.order.vehicle.year = null;
     state.order.vehicle.make = null;
     state.order.vehicle.model = null;
@@ -104,7 +109,7 @@ export const mutations = {
     state.order.vehicle.carId = null;
     state.order.vehicle.category = null;
   },
-  resetDamageAndDependencies(state) {
+  resetDamageState(state) {
     state.order.damage.isRepair = null;
     state.order.damage.numberOfChips = null;
     state.order.damage.windshieldGlassToReplace = null;
@@ -113,10 +118,10 @@ export const mutations = {
     state.order.damage.rearGlassToReplace = null;
 
   },
-  resetRegistrationAndDependencies(state) {
+  resetRegistrationState(state) {
 
   },
-  resetPartsAndDependencies(state) {
+  resetPartsState(state) {
     state.glassParts = null;
     state.childParts = null;
     state.otherParts = null;
@@ -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
@@ -212,20 +220,20 @@ export const actions = {
 
   // DEPENDENCY ACTIONS
   resetVehicleAndDependencies(context) {
-    context.commit(storeMutations.RESET_VEHICLE_AND_DEPS);
+    context.commit(storeMutations.RESET_VEHICLE_STATE);
-    context.commit(storeMutations.RESET_DAMAGE_AND_DEPS);
+    context.commit(storeMutations.RESET_DAMAGE_STATE);
-    context.commit(storeMutations.RESET_REGISTRATION_AND_DEPS);
+    context.commit(storeMutations.RESET_REGISTRATION_STATE);
   },
   resetDamageAndDependencies(context) {
-    context.commit(storeMutations.RESET_DAMAGE_AND_DEPS);
+    context.commit(storeMutations.RESET_DAMAGE_STATE);
-    context.commit(storeMutations.RESET_PARTS_AND_DEPS);
+    context.commit(storeMutations.RESET_PARTS_STATE);
   },
   resetRegistrationAndDependencies(context) {
-    context.commit(storeMutations.RESET_REGISTRATION_AND_DEPS);
+    context.commit(storeMutations.RESET_REGISTRATION_STATE);
-    context.commit(storeMutations.RESET_PARTS_AND_DEPS)
+    context.commit(storeMutations.RESET_PARTS_STATE)
   },
   resetPartsAndDependencies(context) {
-    context.commit(storeMutations.RESET_PARTS_AND_DEPS);
+    context.commit(storeMutations.RESET_PARTS_STATE);
   },
 
   // Content API Actions

src/store/store.spec.js

@@ -313,9 +313,9 @@ describe("Actions", () => {
     // Act
     await actions.resetVehicleAndDependencies(context)
 
-    expect(commit).toBeCalledWith(storeMutations.RESET_VEHICLE_AND_DEPS);
+    expect(commit).toBeCalledWith(storeMutations.RESET_VEHICLE_STATE);
-    expect(commit).toBeCalledWith(storeMutations.RESET_DAMAGE_AND_DEPS);
+    expect(commit).toBeCalledWith(storeMutations.RESET_DAMAGE_STATE);
-    expect(commit).toBeCalledWith(storeMutations.RESET_REGISTRATION_AND_DEPS);
+    expect(commit).toBeCalledWith(storeMutations.RESET_REGISTRATION_STATE);
 
   });
 
@@ -330,8 +330,8 @@ describe("Actions", () => {
     // Act
     await actions.resetDamageAndDependencies(context)
 
-    expect(commit).toBeCalledWith(storeMutations.RESET_DAMAGE_AND_DEPS);
+    expect(commit).toBeCalledWith(storeMutations.RESET_DAMAGE_STATE);
-    expect(commit).toBeCalledWith(storeMutations.RESET_PARTS_AND_DEPS);
+    expect(commit).toBeCalledWith(storeMutations.RESET_PARTS_STATE);
 
   });
 
@@ -346,8 +346,8 @@ describe("Actions", () => {
     // Act
     await actions.resetRegistrationAndDependencies(context)
 
-    expect(commit).toBeCalledWith(storeMutations.RESET_REGISTRATION_AND_DEPS);
+    expect(commit).toBeCalledWith(storeMutations.RESET_REGISTRATION_STATE);
-    expect(commit).toBeCalledWith(storeMutations.RESET_PARTS_AND_DEPS);
+    expect(commit).toBeCalledWith(storeMutations.RESET_PARTS_STATE);
 
   });
 
@@ -362,7 +362,7 @@ describe("Actions", () => {
     // Act
     await actions.resetPartsAndDependencies(context)
 
-    expect(commit).toBeCalledWith(storeMutations.RESET_PARTS_AND_DEPS);
+    expect(commit).toBeCalledWith(storeMutations.RESET_PARTS_STATE);
 
   });
 

src/ux-components/radio/radio.vue

@@ -10,7 +10,7 @@
     :aria-required="isRequired"
     :value="value"
     :v-model="checkValue"
-    @change="handleCheckChange()"
+    @change="handleCheckChanged()"
     />
     <label class="d-flex align-items-start form-check-label" :for="buttonID">
       <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>