CSR-111: set up prerequisite data and navigation for capability questions

src/layouts/capability-questions/capability-questions.vue

@@ -0,0 +1,162 @@
+<template>
+    <Form
+      @submit="onSubmit"
+      @invalid-submit="onInvalidSubmit"
+      ref="theForm"
+      v-slot="{ meta }"
+    >
+        <div class="page-container-grouped-styles capability-questions">
+            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+            <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
+            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+            <div class="fade-on-route-transition sub-container make-tall">
+                <h1>CAPABILITY QUESTIONS TEMPORARY PLACEHOLDER</h1>
+                <alert
+                    ref="alertFewMoreQuestions"
+                    class="my-5"
+                    alertClass="alert-warning"
+                    :manualHeadline="AlertFewMoreQuestionsHeader"
+                    :manualCopy="AlertFewMoreQuestionsCopy"
+                    v-bind:isDismissible="false"
+                />
+                <div v-for="(part, i) in capabilityQuestionsData" :key="i">
+                    <questionChain
+                        ref="questionChain"
+                        v-model="selectedModel"
+                        :questionData="part"
+                        :partIndex="i"
+                        v-if="showThisPartQuestionChain(part, i)"
+                        validationRules="questions-required"
+                    />
+                </div>
+                <funnel-footer
+                    ref="funnelFooter"
+                    cmsWidgetName="FunnelFooterWidget"
+                    :isForwardActionDisabled="!meta.valid"
+                    @back-clicked="backButtonAction"
+                    @ForwardClicked="forwardButtonAction"
+                />
+            </div>
+        </div>
+    </Form>
+</template>
+
+<script>
+// Components
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import alert from "@/ux-components/alert/alert";
+import questionChain from "@/common-components/question-chain/question-chain";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+
+// Supporting Files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import store from "@/store";
+import { storeActions } from "@/constants/store-actions";
+import { storeMutations } from "@/constants/store-mutations";
+import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
+import { Form, defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+
+// DEFINE VALIDATION RULES
+defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
+
+export default {
+    name: "capability-questions",
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+         ];
+
+        const resultMap = await settleAllPromises(promiseResultMap);
+
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    data() {
+        return {
+            selectedModel: [],
+            partsQuestionsData: this.$store.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS).partsOrQuestions.filter((p) => {
+                if (Array.isArray(p.partQuestions) && p.partQuestions.length > 0) {
+                    return {
+                        glassName: p.glassName,
+                        glassLocation: p.glassLocation,
+                        partQuestions: p.partQuestions,
+                    };
+                }
+            }),
+            currentPartNum: 0,
+        };
+    },
+    computed: {
+        AlertFewMoreQuestionsHeader() {
+			return this.getCmsContent("AlertPartsQuestions", "HeadlineText");
+		},
+        AlertFewMoreQuestionsCopy() {
+			return this.getCmsContent("AlertPartsQuestions", "BodyText");
+		},
+    },
+    methods: {
+        arePagePrerequisitesValid() {
+            return true; // TODO - DO TRUE TEST OF PAGEDATA
+            // return Object.keys(store.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS)).length > 0;
+        },
+        showThisPartQuestionChain(part, i) {
+            if (part.partQuestions?.length < 1) { return false; } // return false if only one partQuestion
+            if (this.currentPartNum === i || part.answerData?.answerResult.length > 0) { return true; }
+            return false;
+        },
+        backButtonAction() {
+            // route to move backwards
+            this.$router.navigate(
+                this.navigationScenarios.CLICKED_BACK,
+                this.$route
+            );
+        },
+        async forwardButtonAction() {
+            // TODO: TO COME
+        },
+    },
+    watch: {
+        selectedModel(model) {
+            this.capabilityQuestionsData[model.partIndex].answerData = {
+                answerResult: model.answerResult,
+                answeredQuestions: model.answeredQuestions,
+            }
+            this.currentPartNum = model.partIndex + 1;
+        },
+    },
+    components: {
+        funnelHeader,
+        vehicleBanner,
+        alert,
+        questionChain,
+        funnelSubHeader,
+        funnelFooter,
+        Form,
+    },
+};
+</script>
+
+<style lang="scss">
+  .capability-questions {
+      .question-text {
+        margin-bottom: .5rem;
+        span {
+            text-align: left;
+        }
+    }
+  }
+</style>

src/layouts/molding-questions/molding-questions.vue

@@ -60,6 +60,7 @@ import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
 import { Form, defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
 
 // DEFINE VALIDATION RULES
 defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
@@ -108,9 +109,10 @@ export default {
 			return this.getCmsContent("AlertPartsQuestions", "BodyText");
 		},
     },
+    mixins: [vehicleQuestionsMixin],
     methods: {
         arePagePrerequisitesValid() {
-            return true;
+            return true;  // TODO - DO TRUE TEST OF PAGEDATA
             // return Object.keys(store.getters.pageData(fmgPageValues.MOLDING_QUESTIONS)).length > 0;
         },
         showThisPartQuestionChain(part, i) {
@@ -146,111 +148,20 @@ export default {
 
             const glassNameAndPartsForStore = partsLookup.data.glassNameAndPartsForStore;
 
-            console.log("glassNameAndPartsForStore: ", glassNameAndPartsForStore);
+            const hasCapabilityQuestions = this.hasCapabilityQuestions(glassNameAndPartsForStore);
 
-            // HARD CODE RESPONSE FOR NOW...
+            if (hasCapabilityQuestions) {
-
+                // if has capability questions
-            this.glassNameAndPartsForStore = [
+                // go to capability-questions page
-                {
+                this.$router.navigate(this.navigationScenarios.HAS_CAPABILITY_QUESTIONS,this.$route,{},{},{partsOrQuestions: glassNameAndPartsForStore});
-                    "glassName": "Single",
-                    "glassLocation": "Windshield",
-                    "parts": [
-                        {
-                            "partNumber": "FW03861GTYN",
-                            "description": "rain sensor, heated glass, auto dimming mirror, solar, 3rd visor band, condensation sensor",
-                            "color": "Green Tint",
-                            "requiresRecalibration": false,
-                            "requiresCapabilityQuestions": false,
-                            "recalibrationType": null,
-                            "childParts": null,
-                            "childPartQuestions": [
-                                {
-                                "questionSequence": 1,
-                                "questionText": "Does the rubber seal around your windshield have a chrome strip running through it?",
-                                "answers": [
-                                    {
-                                    "answerResult": "WKT D1106 C",
-                                    "answerText": "Yes",
-                                    "nextQuestionSequence": null
-                                    },
-                                    {
-                                    "answerResult": "WKT D1106 B",
-                                    "answerText": "No",
-                                    "nextQuestionSequence": null
-                                    }
-                                ]
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    "glassName": "Stationary",
-                    "glassLocation": "Rear",
-                    "parts": [
-                        {
-                            "partNumber": "FB25992GTNN",
-                            "description": "heated glass, solar",
-                            "color": "Green Tint",
-                            "requiresRecalibration": false,
-                            "requiresCapabilityQuestions": false,
-                            "recalibrationType": null,
-                            "childParts": null,
-                            "childPartQuestions": []
-                        }
-                    ]
-                }
-            ];
-
-
-
-
-
-
-            // test response data for multiple parts
-            const hasMultipleParts = glassNameAndPartsForStore.some((glass) => glass.parts?.length > 1);
-
-            // loop through all glass items
-            const collectedGlassParts = [];
-            glassNameAndPartsForStore.forEach((glass) => {
-                if (Array.isArray(glass.parts) && glass.parts.length === 1) {
-                    const singlePart = glass.parts[0];
-                    collectedGlassParts.push({
-                        "partNumber": singlePart.partNumber,
-                        "description": singlePart.description,
-                        "color": singlePart.color,
-                        "requiresRecalibration": singlePart.requiresRecalibration,
-                        "childParts": singlePart.childParts,
-                        "price": singlePart.price,
-                    });
-                    // check for and collect any molding questions
-                    if (Array.isArray(singlePart.childPartQuestions) && singlePart.childPartQuestions.length > 0) {
-                        this.moldingQuestionsForStore.push({
-                            "glassName": glass.glassName,
-                            "glassLocation": glass.glassLocation,
-                            "childPartQuestions": singlePart.childPartQuestions,
-                        });
-                    }
-                }
-            });
-            if (!hasMultipleParts) {
-                this.$store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts);
-            }
-            this.navigateForward(hasMultipleParts, glassNameAndPartsForStore);
-        },
-        navigateForward(hasMultipleParts, glassNameAndPartsForStore) {
-            if (hasMultipleParts) {
-                // if multiple parts on any glass
-                // go to vehicle-parts page and pass the partsData
-                this.$router.navigate(this.navigationScenarios.ANSWERED_QUESTIONS_WITH_MULTIPLE_PARTS,this.$route,{},{},{partsOrQuestions: glassNameAndPartsForStore});
             } else {
                 // if single parts only
+                const collectedGlassParts = this.reduceGlassPartsArray(glassNameAndPartsForStore);
+                // save to store lineItems.glassParts
+                this.$store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts);
                 // go to quote page
                 this.$router.navigate(this.navigationScenarios.ANSWERED_QUESTIONS_WITH_SINGLE_PART,this.$route);
             }
-
-        // TODO - ADD CHECK FOR CAPABILITY QUESTIONS TO SEE IF NAVIGATE TO CAPABILITY-QUESTIONS
-
         },
     },
     watch: {

src/layouts/part-questions/part-questions.vue

@@ -60,6 +60,7 @@ import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
 import { Form, defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
 
 // DEFINE VALIDATION RULES
 defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
@@ -108,6 +109,7 @@ export default {
 			return this.getCmsContent("AlertPartsQuestions", "BodyText");
 		},
     },
+    mixins: [vehicleQuestionsMixin],
     methods: {
         showThisPartQuestionChain(part, i) {
             if (part.partQuestions?.length < 1) { return false; } // return false if only one partQuestion
@@ -137,59 +139,36 @@ export default {
             // call API parts method
             const partsLookup = await this.dispatchStoreAction(storeActions.GET_PARTS)
                 .catch(() => {
-                    this.$refs.funnelFooter.removeLoader();
+                    return this.$refs.funnelFooter.removeLoader();
                 });
 
-            if (!partsLookup) { return }
+            const glassNameAndPartsForStore = partsLookup.data.glassNameAndParts;
 
-            const glassNameAndPartsForStore = partsLookup.data.glassNameAndPartsForStore;
+            const hasGlassLocationWithMultipleParts = this.hasGlassLocationWithMultipleParts(glassNameAndPartsForStore);
+            const hasChildPartQuestions = this.hasChildPartQuestions(glassNameAndPartsForStore);
+            const hasCapabilityQuestions = this.hasCapabilityQuestions(glassNameAndPartsForStore);
 
-            // test response data for multiple parts
+            // NAVIGATE FORWARD
-            const hasMultipleParts = glassNameAndPartsForStore.some((glass) => glass.parts?.length > 1);
+            if (hasGlassLocationWithMultipleParts) {
-
-            // loop through all glass items
-            const collectedGlassParts = [];
-            glassNameAndPartsForStore.forEach((glass) => {
-                if (Array.isArray(glass.parts) && glass.parts.length === 1) {
-                    const singlePart = glass.parts[0];
-                    collectedGlassParts.push({
-                        "partNumber": singlePart.partNumber,
-                        "description": singlePart.description,
-                        "color": singlePart.color,
-                        "requiresRecalibration": singlePart.requiresRecalibration,
-                        "childParts": singlePart.childParts,
-                        "price": singlePart.price,
-                    });
-                    // check for and collect any molding questions
-                    if (Array.isArray(singlePart.childPartQuestions) && singlePart.childPartQuestions.length > 0) {
-                        this.moldingQuestionsForStore.push({
-                            "glassName": glass.glassName,
-                            "glassLocation": glass.glassLocation,
-                            "childPartQuestions": singlePart.childPartQuestions,
-                        });
-                    }
-                }
-            });
-            if (!hasMultipleParts) {
-                store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts);
-            }
-            this.navigateForward(hasMultipleParts, glassNameAndPartsForStore);
-        },
-        async navigateForward(hasMultipleParts, glassNameAndPartsForStore) {
-            if (hasMultipleParts) {
                 // if multiple parts on any glass
                 // go to vehicle-parts page and pass the partsData
                 this.$router.navigate(this.navigationScenarios.ANSWERED_QUESTIONS_WITH_MULTIPLE_PARTS,this.$route,{},{},{partsOrQuestions: glassNameAndPartsForStore});
+            } else if (hasChildPartQuestions) {
+                // if any childpart questions
+                // go to molding-questions page and pass the partsData
+                this.$router.navigate(this.navigationScenarios.HAS_MOLDING_QUESTIONS,this.$route,{},{},{partsOrQuestions: glassNameAndPartsForStore});
+            } else if (hasCapabilityQuestions) {
+                // if has capability questions
+                // go to capability-questions page and pass the partsData
+                this.$router.navigate(this.navigationScenarios.HAS_CAPABILITY_QUESTIONS,this.$route,{},{},{partsOrQuestions: glassNameAndPartsForStore});
             } else {
                 // if single parts only
+                const collectedGlassParts = this.reduceGlassPartsArray(glassNameAndPartsForStore);
+                // save to store lineItems.glassParts
+                this.$store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts);
                 // go to quote page
                 this.$router.navigate(this.navigationScenarios.ANSWERED_QUESTIONS_WITH_SINGLE_PART,this.$route);
             }
-
-        // TODO - ADD CHECK FOR CAPABILITY QUESTIONS TO SEE IF NAVIGATE TO CAPABILITY-QUESTIONS
-
-
-
         },
         arePagePrerequisitesValid() {
             return Object.keys(store.getters.pageData(fmgPageValues.PART_QUESTIONS)).length > 0;

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

@@ -60,9 +60,10 @@ import alert from "@/ux-components/alert/alert";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
-import store from "@/store";
 import { Form } from "vee-validate";
-import { storeActions } from "@/constants/store-actions";
+import store from "@/store";
+import { storeMutations } from "@/constants/store-mutations.js";
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
 
 export default {
     name: "vehicle-parts",
@@ -95,7 +96,6 @@ export default {
     data() {
         return {
             glassParts: {},
-            matchedParts: [],
             alertWidgetData: Object,
             alreadyPopulatedPartsData: {},
         };
@@ -141,13 +141,14 @@ export default {
         },
 
         PartsFromApi() {
-            return store.getters.pageData(fmgPageValues.VEHICLE_PARTS);
+            return this.$store.getters.pageData(fmgPageValues.VEHICLE_PARTS);
         },
 
         RefPrefix() {
             return "partQuestion";
         },
     },
+    mixins: [vehicleQuestionsMixin],
     methods: {
         arePagePrerequisitesValid() {
             // Check if isRepair is populated and if the pageData we need is here (Parts data)
@@ -160,7 +161,7 @@ export default {
             this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
         async forwardButtonAction() {
-            let isMoldingQuestions = false;
+            const matchedParts = [];
 
             // Match them to the parts from the API.
             for (let [key, value] of Object.entries(
@@ -175,47 +176,54 @@ export default {
                     );
 
                     if (isMatched) {
-                        this.matchedParts.push(currentPart);
+                        matchedParts.push({
-                        // check if there are childPartQuestions (for molding-questions)
+                            "glassLocation": value.glassLocation,
-                        if (Array.isArray(currentPart.childPartQuestions) && currentPart.childPartQuestions.length > 0) { 
+                            "glassName": value.glassName,
-                            isMoldingQuestions = true
+                            "parts": [currentPart]
-                        }
+                        });
                     }
                 }
             }
 
-            // If no parts could be matched, throw an error (isForwardActionDisabled is based off of this.matchedParts)
+            const hasChildPartQuestions = this.hasChildPartQuestions(matchedParts);
+            const hasCapabilityQuestions = this.hasCapabilityQuestions(matchedParts);
+
+            // If no parts could be matched, throw an error (isForwardActionDisabled is based off of matchedParts)
             if (this.isForwardActionDisabled) {
                 this.$refs.funnelFooter.removeLoader();
                 throw new Error("Could not match any parts to the selected parts");
             }
 
             // Navigate to the next page
-            if (isMoldingQuestions) {
+            if (hasChildPartQuestions) {
                 this.$router.navigate(
                     this.navigationScenarios.HAS_MOLDING_QUESTIONS,
                     this.$route,
                     {},
                     {},
-                    this.moldingQuestionsForStore
+                    {partsOrQuestions: matchedParts}
                 );
-            }
+            } else if (hasCapabilityQuestions) {
-            else {
+                this.$router.navigate(
-                // Save parts to the store
+                    this.navigationScenarios.HAS_CAPABILITY_QUESTIONS,
-                await this.dispatchStoreAction(
+                    this.$route,
-                    storeActions.SAVE_GLASS_PARTS,
+                    {},
-                    this.matchedParts,
+                    {},
-                    false
+                    {partsOrQuestions: matchedParts}
                 );
+
+            } else {
+                // if single parts only
+                const collectedGlassParts = this.reduceGlassPartsArray(matchedParts);
+                // save to store lineItems.glassParts
+                this.$store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts);
+
                 // Navigate to the quote page
                 this.$router.navigate(
                     this.navigationScenarios.SELECTED_PARTS,
                     this.$route
                 );
             }
-
-            // TODO - ADD CHECK FOR CAPABILITY QUESTIONS TO SEE IF NAVIGATE TO CAPABILITY-QUESTIONS
-
         },
 
         LoadInitialPartsData() {

src/mixins/vehicle-questions-mixin.js

@@ -0,0 +1,43 @@
+export default {
+
+    methods: {
+        hasPartQuestions(partsOrQuestions) {
+            return partsOrQuestions.some(pq => pq.partQuestions?.length > 0);
+        },
+        hasGlassLocationWithMultipleParts(partsOrQuestions) {
+            return partsOrQuestions.some(pq => pq.parts?.length > 1);
+        },
+        hasChildPartQuestions(partsOrQuestions) {
+            return partsOrQuestions.some(pq => {
+                return pq.parts?.some(part => part.childPartQuestions?.length > 0);
+            });
+        },
+        hasCapabilityQuestions(partsOrQuestions) {
+            return partsOrQuestions.some(pq => {
+                return pq.parts?.some(part => part.requiresCapabilityQuestions === true);
+            });
+        },
+        // method to only include keys listed for lineItems.glassParts in 
+        // https://safelite.atlassian.net/wiki/spaces/DC/pages/17137665/Catalog+Front-End+State#glassParts
+        reduceGlassPartsArray(glassParts) {
+            const reducedGlassParts = [];
+            glassParts.forEach((glass) => {
+                if (Array.isArray(glass.parts) && glass.parts.length === 1) {
+                    const singlePart = glass.parts[0];
+                    reducedGlassParts.push({
+                        "partNumber": singlePart.partNumber,
+                        "description": singlePart.description,
+                        "color": singlePart.color,
+                        "requiresRecalibration": singlePart.requiresRecalibration,
+                        "requiresCapabilityQuestions": singlePart.requiresCapabilityQuestions,
+                        "recalibrationType": singlePart.recalibrationType,
+                        "childParts": singlePart.childParts,
+                        "price": singlePart.price,
+                    });
+                }
+            });
+            return reducedGlassParts;
+        }
+    }
+
+}

src/mixins/vin-pages-mixin.js

@@ -1,18 +1,20 @@
-import store from "@/store";
 import { storeActions } from "@/constants/store-actions.js";
 import { storeMutations } from "@/constants/store-mutations.js";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
 
 export default {
+    mixins: [vehicleQuestionsMixin],
     methods: {
         async navigateForwardWithSingleCarMatch() {
             const result = await this.dispatchStoreAction(storeActions.GET_PARTS_OR_QUESTIONS);
+
             const partsOrQuestions = result.data.partsOrQuestions;
-            const hasPartsQuestions = partsOrQuestions.some(pq => pq.partQuestions?.length > 0);
+
-            const hasGlassLocationWithMultipleParts = partsOrQuestions.some(pq => pq.parts?.length > 1);
+            const hasPartsQuestions = this.hasPartQuestions(partsOrQuestions);
-            const hasChildPartQuestions = partsOrQuestions.some(pq => {
+            const hasGlassLocationWithMultipleParts = this.hasGlassLocationWithMultipleParts(partsOrQuestions);
-                return pq.parts?.some(part => part.childPartQuestions?.length > 0);
+            const hasChildPartQuestions = this.hasChildPartQuestions(partsOrQuestions);
-            });
+            const hasCapabilityQuestions = this.hasCapabilityQuestions(partsOrQuestions);
 
             // TODO - ADD CHECK FOR CAPABILITY QUESTIONS TO SEE IF NAVIGATE TO CAPABILITY-QUESTIONS
 
@@ -25,8 +27,17 @@ export default {
             else if (hasChildPartQuestions) {
                 this.$router.navigate(this.navigationScenarios.SELECTED_VIN_WITH_MOLDING_QUESTIONS, this.$route, {}, {}, result.data);
             }
+            else if (hasCapabilityQuestions) {
+                this.$router.navigate(this.navigationScenarios.SELECTED_VIN_WITH_CAPABILITY_QUESTIONS, this.$route, {}, {}, result.data);
+            }
             else {
-                store.commit(storeMutations.UPDATE_GLASS_PARTS, result.data);
+                // if single parts only
+                const collectedGlassParts = this.reduceGlassPartsArray(result.data.partsOrQuestions);
+                // save to store lineItems.glassParts
+                this.$store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts);
+
+                // go to quote page
+                this.$router.navigate(this.navigationScenarios.ANSWERED_QUESTIONS_WITH_SINGLE_PART,this.$route);
                 this.$refs.loadingModal.showModal();
                 navigateToHeritageFunnel();
             }

src/mixins/vin-pages-mixin.spec.js

@@ -864,14 +864,17 @@ describe("vin-pages-mixin", () => {
                     partsOrQuestions: partsOrQuestions
                 });
 
-                store.commit = jest.fn();
+                wrapper.vm.$store.commit = jest.fn();
+
+                const collectedGlassParts = wrapper.vm.reduceGlassPartsArray(partsOrQuestions);
 
                 // Act
                 await wrapper.vm.navigateForwardWithSingleCarMatch();
                 
+
                 // Assert
-                expect(store.commit).toHaveBeenCalledTimes(1);
+                expect(wrapper.vm.$store.commit).toHaveBeenCalledTimes(1);
-                expect(store.commit).toHaveBeenCalledWith(storeMutations.UPDATE_GLASS_PARTS, { partsOrQuestions })
+                expect(wrapper.vm.$store.commit).toHaveBeenCalledWith(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts)
                 expect(wrapper.vm.$refs.loadingModal.showModal).toHaveBeenCalledTimes(1);
                 expect(navigateToHeritageFunnel).toHaveBeenCalledTimes(1);
             });
@@ -895,6 +898,9 @@ function setupMocks({ partsOrQuestions = [] }) {
         router: {
             navigate: jest.fn()
         },
+        store: {
+            commit: jest.fn()
+        }
     });
 
     const mockVinComponent = {

src/router/router-constants/fmgPage-values.js

@@ -9,6 +9,7 @@ const fmgPageValues = {
   VEHICLE_PARTS: "vehicle-parts",
   PART_QUESTIONS: "part-questions",
   MOLDING_QUESTIONS: "molding-questions",
+  CAPABILITY_QUESTIONS: "capability-questions",
   LICENSE_PLATE_LOOKUP: "license-plate-lookup",
   REVEAL: "reveal",
   ESTIMATE: "estimate",

src/router/router-constants/navigation-scenarios.js

@@ -11,6 +11,7 @@ const navigationScenarios = {
   SELECTED_VIN_WITH_PART_QUESTIONS: "SELECTED_VIN_WITH_PART_QUESTIONS",
   SELECTED_VIN_WITH_MULTIPLE_PARTS: "SELECTED_VIN_WITH_MULTIPLE_PARTS",
   SELECTED_VIN_WITH_MOLDING_QUESTIONS: "SELECTED_VIN_WITH_MOLDING_QUESTIONS",
+  SELECTED_VIN_WITH_CAPABILITY_QUESTIONS: "SELECTED_VIN_WITH_CAPABILITY_QUESTIONS",
   CONTINUING_WITH_SINGLE_PART: "CONTINUING_WITH_SINGLE_PART",
   CONTINUING_WITH_MULTIPLE_VEHICLES: "CONTINUING_WITH_MULTIPLE_VEHICLES",
   SELECTED_VIN_HAS_MISMATCHED_GLASS: "SELECTED_VIN_HAS_MISMATCHED_GLASS",
@@ -21,6 +22,7 @@ const navigationScenarios = {
   ANSWERED_QUESTIONS_WITH_SINGLE_PART: "ANSWERED_QUESTIONS_WITH_SINGLE_PART",
   ANSWERED_QUESTIONS_WITH_MULTIPLE_PARTS: "ANSWERED_QUESTIONS_WITH_MULTIPLE_PARTS",
   HAS_MOLDING_QUESTIONS: "HAS_MOLDING_QUESTIONS",
+  HAS_CAPABILITY_QUESTIONS: "HAS_CAPABILITY_QUESTIONS",
   SELECTED_PROVIDE_VIN_DIFFERENT_WAY: "SELECTED_PROVIDE_VIN_DIFFERENT_WAY"
 };
 

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

@@ -135,6 +135,10 @@ const routingTable = function(store) {
         {
           scenario: navigationScenarios.SELECTED_VIN_WITH_MOLDING_QUESTIONS,
           destinationFmgPageValue: fmgPageValues.MOLDING_QUESTIONS
+        },
+        {
+          scenario: navigationScenarios.SELECTED_VIN_WITH_CAPABILITY_QUESTIONS,
+          destinationFmgPageValue: fmgPageValues.CAPABILITY_QUESTIONS
         }
       ],
     },
@@ -160,6 +164,10 @@ const routingTable = function(store) {
         {
           scenario: navigationScenarios.SELECTED_VIN_WITH_MOLDING_QUESTIONS,
           destinationFmgPageValue: fmgPageValues.MOLDING_QUESTIONS
+        },
+        {
+          scenario: navigationScenarios.SELECTED_VIN_WITH_CAPABILITY_QUESTIONS,
+          destinationFmgPageValue: fmgPageValues.CAPABILITY_QUESTIONS
         }
       ],
     },
@@ -189,6 +197,10 @@ const routingTable = function(store) {
         {
           scenario: navigationScenarios.SELECTED_VIN_WITH_MOLDING_QUESTIONS,
           destinationFmgPageValue: fmgPageValues.MOLDING_QUESTIONS
+        },
+        {
+          scenario: navigationScenarios.SELECTED_VIN_WITH_CAPABILITY_QUESTIONS,
+          destinationFmgPageValue: fmgPageValues.CAPABILITY_QUESTIONS
         }
       ],
     },
@@ -211,6 +223,14 @@ const routingTable = function(store) {
           scenario: navigationScenarios.SELECTED_VIN_WITH_MULTIPLE_PARTS,
           destinationFmgPageValue: fmgPageValues.VEHICLE_PARTS
         },
+        {
+          scenario: navigationScenarios.SELECTED_VIN_WITH_MOLDING_QUESTIONS,
+          destinationFmgPageValue: fmgPageValues.MOLDING_QUESTIONS
+        },
+        {
+          scenario: navigationScenarios.SELECTED_VIN_WITH_CAPABILITY_QUESTIONS,
+          destinationFmgPageValue: fmgPageValues.CAPABILITY_QUESTIONS
+        },
         {
           scenario: navigationScenarios.SELECTED_PROVIDE_VIN_DIFFERENT_WAY,
           destinationFmgPageValue: fmgPageValues.ESTIMATE
@@ -253,6 +273,10 @@ const routingTable = function(store) {
           scenario: navigationScenarios.HAS_MOLDING_QUESTIONS,
           destinationFmgPageValue: fmgPageValues.MOLDING_QUESTIONS,
         },
+        {
+          scenario: navigationScenarios.HAS_CAPABILITY_QUESTIONS,
+          destinationFmgPageValue: fmgPageValues.CAPABILITY_QUESTIONS,
+        },
         {
           scenario: navigationScenarios.ANSWERED_QUESTIONS_WITH_SINGLE_PART,
           destinationFmgPageValue: fmgPageValues.QUOTE,
@@ -261,6 +285,19 @@ const routingTable = function(store) {
     },
     {
       fmgPageValue: fmgPageValues.MOLDING_QUESTIONS,
+      maps: [
+        {
+          scenario: navigationScenarios.CLICKED_BACK,
+          destinationFmgPageValue: fmgPageValues.VEHICLE_PARTS
+        },
+        {
+          scenario: navigationScenarios.HAS_CAPABILITY_QUESTIONS,
+          destinationFmgPageValue: fmgPageValues.CAPABILITY_QUESTIONS,
+        },
+      ]
+    },
+    {
+      fmgPageValue: fmgPageValues.CAPABILITY_QUESTIONS,
       maps: [
         {
           scenario: navigationScenarios.CLICKED_BACK,