CSR-111 WIP

src/common-components/question-chain/question-chain.vue

@@ -1,5 +1,7 @@
 <template>
-    <div v-for="(q, i) in questions" :key="i">
+    <div>
+        Hallo<br/>{{questions}}
+        <div v-for="(q, i) in questions" :key="i">
         <transition appear name="fade" mode="out-in">
             <buttonQuestion
                 v-if="q.answerSelected || (q.questionSequence === currentQuestionNum)"
@@ -15,6 +17,7 @@
             />
         </transition>
     </div>
+        </div>
 </template>
 
 <script>
@@ -73,7 +76,7 @@ export default {
 
     if (!this.modelValue?.length > 0) {
       // set this.currentQuestionNum to first valid question
-      this.currentQuestionNum = this.questions[0].questionSequence;
+      this.currentQuestionNum = this.questions[0]?.questionSequence ?? 0;
       // scroll the next question into view
       this.$nextTick(() => {
           document.querySelector('.current-question').scrollIntoView({behavior: "smooth"});

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

@@ -1,38 +1,25 @@
 <template>
-    <Form
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-      @submit="onSubmit"
-      @invalid-submit="onInvalidSubmit"
-      ref="theForm"
-      v-slot="{ meta }"
-    >
         <div class="page-container-grouped-styles capability-questions">
-            <loadingModal ref="loadingModal"/>
+            <loadingModal ref="loadingModal" />
             <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
             <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
             <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
             <div class="fade-on-route-transition sub-container make-tall">
-                <alert
+                <alert ref="alertFewMoreQuestions" class="my-5" alertClass="alert-warning"
-                    ref="alertFewMoreQuestions"
+                    :manualHeadline="AlertFewMoreQuestionsHeader" :manualCopy="AlertFewMoreQuestionsCopy"
-                    class="my-5"
+                    v-bind:isDismissible="false" />
-                    alertClass="alert-warning"
+                <div v-for="(part, i) in capabilityQuestionsData" :key="i">
-                    :manualHeadline="AlertFewMoreQuestionsHeader"
+                {{ part.capabilityQuestions }}<br/><br/>
-                    :manualCopy="AlertFewMoreQuestionsCopy"
+                {{ showThisPartQuestionChain(part, i) }}
-                    v-bind:isDismissible="false"
+                    <questionChain ref="questionChain" :keyString="part.key"
-                />
+                        v-model="selectedAnswers[part.glassLocation + '-' + part.glassName]"
-                <questionChain
+                        :questionData="part.capabilityQuestions" :partIndex="i"
-                    ref="questionChain"
+                        v-if="showThisPartQuestionChain(part, i)" validationRules="questions-required" />
-                    v-model="selectedAnswer"    
+                </div>
-                    :questionData="capabilityQuestionsData"
+                <funnel-footer ref="funnelFooter" cmsWidgetName="FunnelFooterWidget"
-                    :partIndex="i"
+                    :isForwardActionDisabled="!meta.valid" @back-clicked="backButtonAction"
-                    validationRules="questions-required"
+                    @ForwardClicked="forwardButtonAction" />
-                />
-                <funnel-footer
-                    ref="funnelFooter"
-                    cmsWidgetName="FunnelFooterWidget"
-                    :isForwardActionDisabled="!meta.valid"
-                    @back-clicked="backButtonAction"
-                    @ForwardClicked="forwardButtonAction"
-                />
             </div>
         </div>
     </Form>
@@ -76,7 +63,7 @@ export default {
                 resultKey: "cmsContent",
                 promise: cmsContentPromise,
             },
-         ];
+        ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
 
@@ -88,19 +75,21 @@ export default {
     data() {
         return {
             selectedAnswer: [],
-            // TODO This shouldn't be an object with property `partQuestions`
+            // TODO This shouldn't be an object with property `capabilityQuestions`
-            capabilityQuestionsData: {
+            capabilityQuestionsData: store.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS).partsOrQuestions,
-                partQuestions: store.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS).capabilityQuestions
+            selectedAnswers: {},
-            }
+            currentQuestionChainIndex: 0,
+            newAnswersArray: [],
+            foundDuplicateQuestions: [],
         };
     },
     computed: {
         AlertFewMoreQuestionsHeader() {
-			return this.getCmsContent("AdditionalPartsQuestionsAlert", "HeadlineText");
+            return this.getCmsContent("AdditionalPartsQuestionsAlert", "HeadlineText");
-		},
+        },
         AlertFewMoreQuestionsCopy() {
-			return this.getCmsContent("AdditionalPartsQuestionsAlert", "BodyText");
+            return this.getCmsContent("AdditionalPartsQuestionsAlert", "BodyText");
-		},
+        },
         windshieldPart() {
             return this.pageData.partsOrQuestions.find(x => x.glassLocation === damageLocationsSelected.WINDSHIELD);
         },
@@ -111,27 +100,422 @@ export default {
             return this.$store.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS);
         }
     },
+    mounted() {
+        this.loadInitialCapabilityQuestionsData();
+    },
     methods: {
+        showThisPartQuestionChain(part, i) {
+            if (part.capabilityQuestions?.length < 1 || part.isSuppressedPart) { return false; } // return false if no capabilityQuestions or if suppressed
+            return this.currentQuestionChainIndex === i || part.answerData?.answerResult?.length > 0
+        },
         arePagePrerequisitesValid() {
-            const capabilityQuestionsPageData = store.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS);
+            return true;
-            return capabilityQuestionsPageData && Object.keys(capabilityQuestionsPageData).length > 0;
+
+            // TODO UNCOMMENT
+            // const capabilityQuestionsPageData = store.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS);
+            // return capabilityQuestionsPageData && Object.keys(capabilityQuestionsPageData).length > 0;
         },
         async forwardButtonAction() {
-            const selectedAnswerResult1 = this.selectedAnswer.answerResult;
+            const capabilityQuestionsAnswersArray = this.capabilityQuestionsData.map((item) => {
-            const selectedAnswerResult2 = this.pageData.capabilityQuestions[0].answers.find(x => x.answerResult1 === selectedAnswerResult1).answerResult2;
+                const selectedAnswerResult1 = item.answerData.answerResult;
+                const selectedAnswerResult2 = item.answerData.answerResult2;
 
-            this.dispatchStoreAction(storeActions.SAVE_CAPABILITY_QUESTION_ANSWERS, {
+                return {
-                glassName: this.windshieldPart.glassName,
+                    glassLocation: item.glassLocation,
-                glassLocation: this.windshieldPart.glassLocation,
+                    glassName: item.glassName,
-                result1: selectedAnswerResult1,
+                    result: item.answerData.answerResult,
-                result2: selectedAnswerResult2
+                    result1: selectedAnswerResult1,
+                    result2: selectedAnswerResult2,
+                    answeredQuestions: item.answerData.answeredQuestions,
+                    isSuppressedPart: item.isSuppressedPart,
+                };
             });
 
-            const partFromCapabilityQuestionAnswer = (await this.dispatchStoreAction(storeActions.GET_PART_FROM_CAPABILITY_QUESTION_ANSWER)).data;
+            // clear out answerData for future page loads; must occur prior to store save
-            let partsOrQuestions = this.pageData.partsOrQuestions;
+            this.capabilityQuestionsData.forEach((part) => {
-            partsOrQuestions.find(partOrQuestion => partOrQuestion.glassLocation === damageLocationsSelected.WINDSHIELD).parts = partFromCapabilityQuestionAnswer;
+                part.answerData = {};
+            });
+
+            // save to vuex store as order.damage.capabilityQuestionAnswers (array)
+            await this.dispatchStoreAction(this.storeActions.SAVE_CAPABILITY_QUESTION_ANSWERS, capabilityQuestionsAnswersArray, false);
+
+            // get parts from the capabilityQuestionAnswers
+            let partsOrQuestions = this.pageData.partsOrQuestions;
+            for (let answer of capabilityQuestionsAnswersArray) {
+                const correspondingPart = partsOrQuestions.find(partOrQuestion => partOrQuestion.glassLocation === answer.glassLocation);
+                const partFromCapabilityQuestionAnswer = (await this.dispatchStoreAction(storeActions.GET_PART_FROM_CAPABILITY_QUESTION_ANSWER, answer.glassLocation, false)).data;
+
+                partsOrQuestions.find(partOrQuestion => partOrQuestion.glassLocation === damageLocationsSelected.WINDSHIELD).parts = partFromCapabilityQuestionAnswer;
+            }
+
+            console.log(partsOrQuestions)
+
+
+
+
+            // const glassNameAndPartsForStore = partsLookup.data.glassNameAndParts;
+            // this.navigateForward(glassNameAndPartsForStore);
+
+
+            // const selectedAnswerResult1 = this.selectedAnswer.answerResult;
+            // const selectedAnswerResult2 = this.pageData.capabilityQuestions[0].answers.find(x => x.answerResult1 === selectedAnswerResult1).answerResult2;
+
+            // this.dispatchStoreAction(storeActions.SAVE_CAPABILITY_QUESTION_ANSWERS, {
+            //     glassName: this.windshieldPart.glassName,
+            //     glassLocation: this.windshieldPart.glassLocation,
+            //     result1: selectedAnswerResult1,
+            //     result2: selectedAnswerResult2
+            // });
+
+            // const partFromCapabilityQuestionAnswer = (await this.dispatchStoreAction(storeActions.GET_PART_FROM_CAPABILITY_QUESTION_ANSWER)).data;
+            // let partsOrQuestions = this.pageData.partsOrQuestions;
+            // partsOrQuestions.find(partOrQuestion => partOrQuestion.glassLocation === damageLocationsSelected.WINDSHIELD).parts = partFromCapabilityQuestionAnswer;
+
+            // this.navigateForward(partsOrQuestions);
+        },
+        handleAnswerUpdates(answer) {
+            // only runs when all questions in a question-chain have been answered
+            //      when selectedAnswers updates, user has completed this part's question chain and has a final answer
+            //      (does not get run for each invididual question's answer, only when 
+            //      all relevent questions for the current part have been answered)
+
+            /*
+            answer example format:
+            {
+                "answerResult": "DD11132",
+                "answeredQuestions": [
+                    {
+                        "questionText": "Is your Grand Cherokee the Laredo model?",
+                        "selectedAnswerText": "Yes",
+                        "questionNum": 1,
+                        "extra": {
+                            "Text": "Yes",
+                            "nextQuestionSequence": null,
+                            "answerResult": "DD11132",
+                            "questionSequence": 1,
+                            "questionType": "answer"
+                        }
+                    }
+                ],
+                "partIndex": 0
+            }
+            */
+
+            // collect a list of the answered questions' numbers, needed later below
+            const answeredQuestionIndexes = [];
+
+            // if user has answered a question differently than anything that was preloaded,
+            //     we need to clear out any preloaded answers
+            this.selectedAnswers = {};
+
+            // loop through every answered question on the currently answered glass part
+            answer.answeredQuestions?.forEach((aq) => {
+
+                // keep track of this question number
+                answeredQuestionIndexes.push(aq.questionNum);
+
+                const answeredQuestionText = aq.questionText.toUpperCase();
+                const answeredQuestionAnswer = aq.selectedAnswerText.toUpperCase();
+
+                // HANDLE DUPLICATE QUESTIONS
+
+                // loop through all glass parts data
+                this.capabilityQuestionsData.forEach((glassPart, gpIndex) => {
+
+                    // only look for duplicates forward... to parts that follow after the currently being answered part
+                    if (gpIndex > answer.partIndex) {
+
+                        let suppressUntil;
+                        // reset this glass part, in case user is changing their previous answers
+                        glassPart.answerData = null;
+                        glassPart.isSuppressedPart = null;
+
+                        // loop through this glass part's part questions, looking for a questionText match
+                        glassPart.capabilityQuestions.forEach((pq, pqIndex) => {
+
+                            // clear out any previously set answers
+                            pq.answerSelected = null;
+
+                            // clear or set suppressQuestion property for each question
+                            if (suppressUntil) {
+                                // if suppressUntil has been set, then suppress this question if before it
+                                if (pqIndex + 1 < suppressUntil) {
+                                    pq.suppressQuestion = true;
+                                } else {
+                                    pq.suppressQuestion = null;
+                                }
+                            } else {
+                                pq.suppressQuestion = null;
+                            }
+
+                            // if these match then we have a duplicate question
+                            if (pq.questionText.toUpperCase() === answeredQuestionText) {
+
+                                const thisAnsweredCapabilityQuestion = glassPart.capabilityQuestions[pqIndex];
+                                let matchedAnswer;
+                                let rejectedAnswers = []; // set as an array, in case we ever have questions with more than 2 answers...
+
+                                // which one of this capabilityQuestions' answers matches our answer?
+                                pq.answers.forEach((ans) => {
+                                    if (ans.answerText.toUpperCase() === answeredQuestionAnswer) {
+                                        matchedAnswer = ans;
+                                        ans.selected = true;
+                                    } else {
+                                        rejectedAnswers.push(ans);
+                                        ans.selected = null;
+                                    }
+                                });
+
+                                // Update the key to re-render this part's question-chain component
+                                this.capabilityQuestionsData[gpIndex].key = this.capabilityQuestionsData[gpIndex].glassLocation + this.capabilityQuestionsData[gpIndex].glassName + Date.now().toString();
+
+                                // handle suppressing downstream in this question chain
+
+                                if (matchedAnswer.nextQuestionSequence) {
+                                    // ensure that the question that the accepted answer has set to be next is NOT suppressed
+                                    glassPart.capabilityQuestions[matchedAnswer.nextQuestionSequence - 1].suppressQuestion = null;
+                                    // if the duplicate is the 1ST question, then set suppressUntil var to lowest nextQuestion number
+                                    if (pqIndex === 0) {
+                                        if (!suppressUntil) { suppressUntil = matchedAnswer.nextQuestionSequence }
+                                        if (matchedAnswer.nextQuestionSequence < suppressUntil) { suppressUntil = matchedAnswer.nextQuestionSequence }
+                                    }
+                                }
+
+                                // handle suppressing upstream in this question chain
+                                glassPart.capabilityQuestions.forEach((q) => {
+                                    q.answers.forEach((thisAns) => {
+                                        // restore any of the answers that formerly led to the duplicated question
+                                        if (thisAns.originalNextQuestionSequence === pq.questionSequence) {
+                                            // restore original nextQuestionSequence
+                                            thisAns.nextQuestionSequence = thisAns.originalNextQuestionSequence;
+                                            this.originalNextQuestionSequence = null;
+                                            // restore original answerResult
+                                            if (thisAns.originalAnswerResult) {
+                                                thisAns.answerResult = thisAns.originalAnswerResult;
+                                                thisAns.originalAnswerResult = null;
+                                            }
+                                        }
+                                        // search for any answers that lead to the duplicated question
+                                        if (thisAns.nextQuestionSequence === pq.questionSequence) {
+                                            // update either the nextQuestionSequence or the answerResult
+                                            if (matchedAnswer.nextQuestionSequence) {
+                                                thisAns.originalNextQuestionSequence = thisAns.nextQuestionSequence;
+                                                thisAns.nextQuestionSequence = matchedAnswer.nextQuestionSequence;
+                                            } else {
+                                                thisAns.originalNextQuestionSequence = thisAns.nextQuestionSequence;
+                                                thisAns.nextQuestionSequence = null;
+                                                thisAns.originalAnswerResult = thisAns.originalAnswerResult || thisAns.answerResult;
+                                                thisAns.answerResult = matchedAnswer.answerResult;
+                                            }
+                                        }
+                                    });
+                                });
+
+                                // suppress current question
+                                thisAnsweredCapabilityQuestion.suppressQuestion = true;
+
+                                const thisGlassPart = "glassPart" + gpIndex;
+                                if (this.foundDuplicateQuestions[thisGlassPart]) {
+                                    if (!this.foundDuplicateQuestions[thisGlassPart].includes(thisAnsweredCapabilityQuestion.questionSequence)) {
+                                        this.foundDuplicateQuestions[thisGlassPart].push(thisAnsweredCapabilityQuestion.questionSequence);
+                                    }
+                                } else {
+                                    this.foundDuplicateQuestions[thisGlassPart] = [thisAnsweredCapabilityQuestion.questionSequence];
+                                }
+
+                                // are there any questions left that are not suppressed?
+                                const remainingQuestions = glassPart.capabilityQuestions.filter((q) => {
+                                    return !q.suppressQuestion;
+                                });
+
+                                if (remainingQuestions.length < 1) {
+                                    // this is the final answer for this glass part
+
+                                    // mark this part as completely answered by adding answerData
+                                    const answeredQuestionObj = {
+                                        questionText: pq.questionText,
+                                        selectedAnswerText: matchedAnswer.answerText,
+                                        questionNum: pq.questionSequence,
+                                        suppressQuestion: pq.suppressQuestion,
+                                    };
+                                    // set the answerData as 'already answered'
+                                    glassPart.answerData = {
+                                        answerResult: matchedAnswer.nextQuestionSequence ? matchedAnswer.nextQuestionSequence : matchedAnswer.answerResult,
+                                        answeredQuestions: [answeredQuestionObj],
+                                    };
+
+                                    // suppress this glassPart because it has an answer
+                                    glassPart.isSuppressedPart = true;
+                                }
+
+                            }
+
+                        });
+
+                        // Update the key to re-render this part's question-chain component
+                        this.capabilityQuestionsData[gpIndex].key = this.capabilityQuestionsData[gpIndex].glassLocation + this.capabilityQuestionsData[gpIndex].glassName + Date.now().toString();
+
+                    }
+
+                });
+
+            });
+
+            // DETERMINE ANSWERED QUESTIONS LIST FOR THIS GLASS PART
+
+            // look through all (this part's) part questions for any duplicates that were suppressed; 
+            //      add them to the list of answered questions if found
+
+            // EX answeredQuestionIndexes: [1,5,11,13]
+
+            // EX this.foundDuplicateQuestions = {
+            //     "glassPart1": [1],
+            //     "glassPart2": [7, 10]
+            // };
+
+            const thisPartsDupes = this.foundDuplicateQuestions["glassPart" + answer.partIndex];
+            const completeAnsweredQuestions = answer.answeredQuestions ? [...answer.answeredQuestions] : [];
+            const glassPartAnswered = this.capabilityQuestionsData[answer.partIndex];
+
+            thisPartsDupes?.forEach((dupe) => {
+                // dupe is a single integer
+                const dupeQuestion = glassPartAnswered.capabilityQuestions[dupe - 1];
+                const dupeQuestionAnswer = dupeQuestion.answers.find((q) => q.selected === true);
+
+                glassPartAnswered.capabilityQuestions.forEach((q) => {
+                    let includeThisDupeInAnsweredQuestions = false;
+
+                    // did one of the answers of this question point to the duplicated question?
+                    q.answers.forEach((a) => {
+                        if ((dupe === a.originalNextQuestionSequence) &&
+                            (answeredQuestionIndexes.includes(q.questionSequence)) &&
+                            (a.answerText.toUpperCase() === dupeQuestionAnswer.answerText.toUpperCase())) {
+                            includeThisDupeInAnsweredQuestions = true;
+                        }
+                    });
+
+                    // is this q.questionSequence listed as the duplicated question's nextQuestionSequence?
+                    if ((q.questionSequence === dupeQuestionAnswer.nextQuestionSequence) && (answeredQuestionIndexes.includes(q.questionSequence))) {
+                        includeThisDupeInAnsweredQuestions = true;
+                    }
+
+                    if (includeThisDupeInAnsweredQuestions) {
+                        completeAnsweredQuestions.push({
+                            questionNum: dupeQuestion.questionSequence,
+                            questionText: dupeQuestion.questionText,
+                            selectedAnswerText: dupeQuestionAnswer.answerText,
+                            suppressQuestion: dupeQuestion.suppressQuestion,
+                        });
+                    }
+                });
+            });
+
+            // make sure there are no duplicated dupes in the list...
+            const foundInCompleteAnsweredQuestions = new Set();
+            let filteredCompleteAnsweredQuestions = completeAnsweredQuestions.filter(el => {
+                const duplicate = foundInCompleteAnsweredQuestions.has(el.questionText);
+                foundInCompleteAnsweredQuestions.add(el.questionText);
+                return !duplicate;
+            });
+            filteredCompleteAnsweredQuestions = filteredCompleteAnsweredQuestions.sort((a, b) => a.questionNum - b.questionNum);
+
+            const selectedAnswerResult1 = answer.answerResult;
+            const selectedAnswerResult2 = this.getCorrespondingAnswerResult2(selectedAnswerResult1);
+
+            // set final answer data for the current answered glass part
+            glassPartAnswered.answerData = {
+                answerResult: selectedAnswerResult1,
+                answerResult1: selectedAnswerResult1,
+                answerResult2: selectedAnswerResult2,
+                answeredQuestions: filteredCompleteAnsweredQuestions,
+            }
+
+            // this part has been fully answered, so advance to next part's question chain
+            for (let i = answer.partIndex + 1; i < this.capabilityQuestionsData.length; i++) {
+                // if this part has not yet been fully answered, then make it the current part
+                if (!this.capabilityQuestionsData[i].answerData?.answerSelected) {
+                    this.currentQuestionChainIndex = i;
+                    break;
+                }
+            }
+
+        },
+        // TODO I'm sure there's a better/simplier way to do this that I'm missing but my brain's fried
+        // Find the part that has some answer that has an answerResult matching the selected answerResult, then get the corresponding answerResult2
+        getCorrespondingAnswerResult2(answerResult1) {
+            return this.capabilityQuestionsData
+                .find(part => part.capabilityQuestions.some(question => question.answers.some(answer => answer.answerResult == answerResult1)))     // found part
+                .capabilityQuestions.find(question => question.answers.some(answer => answer.answerResult == answerResult1))    // found question
+                .answers.find(answer => answer.answerResult == answerResult1)
+                .answerResult2;
+        },
+        loadInitialCapabilityQuestionsData() {
+
+            // are there alreadyAnsweredQuestions?
+            const alreadyAnsweredQuestions = store.getters.damage.capabilityQuestionAnswers;
+
+            this.capabilityQuestionsData = this.pageData.partsOrQuestions.filter(x => x.capabilityQuestions).map((part, i) => {
+                part.key = part.glassLocation + "-" + part.glassName;
+                this.selectedAnswers[part.key] = [];
+                if (!alreadyAnsweredQuestions) {
+                    part.answerData = null;
+                }
+
+                alreadyAnsweredQuestions?.forEach((savedPart) => {
+
+                    if (!savedPart.glassLocation || !savedPart.glassName || !savedPart.answeredQuestions || !savedPart.result) {
+                        return;
+                    }
+                    if (part.glassLocation === savedPart.glassLocation && part.glassName === savedPart.glassName) {
+                        let answerString = "";
+
+                        // matches; loop through answeredQuestions for matches
+                        savedPart.answeredQuestions.forEach((aq) => {
+                            if (!aq.questionNum || !aq.selectedAnswerText) {
+                                return;
+                            }
+                            // determine which answer was previously chosen
+                            const theAns = part.capabilityQuestions[aq.questionNum - 1].answers.find((a) => {
+                                return a.answerText.toUpperCase() === aq.selectedAnswerText.toUpperCase();
+                            });
+                            if (theAns.nextQuestionSequence) {
+                                answerString = `${aq.questionNum}|nextQuestion|${theAns.nextQuestionSequence}|${theAns.answerText}`
+                            } else {
+                                answerString = `${aq.questionNum}|answer|${theAns.answerResult}|${theAns.answerText}`
+                            }
+
+                            // mark this partQuestion as answered (question-chain will read this)
+                            part.capabilityQuestions[aq.questionNum - 1].answerSelected = answerString;
+                            // mark this partQuestion as duplicate if it is (question-chain will read this)
+                            if (aq.suppressQuestion) {
+                                part.capabilityQuestions[aq.questionNum - 1].suppressQuestion = true;
+                            }
+                        });
+
+                        // advance the currentQuestionChainIndex
+                        this.currentQuestionChainIndex = i;
+
+                        // add answerData to current part
+                        part.answerData = {
+                            answerResult: savedPart.result,
+                            answerResult1: savedPart.result,
+                            answerResult2: this.getCorrespondingAnswerResult2(savedPart.result),
+                            answeredQuestions: savedPart.answeredQuestions
+                        }
+                    }
+
+                });
+
+                // Set up watch for each set of part questions, which gets updated when all questions for a part have been answered
+                this.$watch("selectedAnswers." + part.key, (newValue) => {
+                    if (newValue) {
+                        this.handleAnswerUpdates(newValue);
+                    }
+                }, { deep: true })
+
+                return part;
+            });
 
-            this.navigateForward(partsOrQuestions);
         },
     },
     components: {
@@ -148,12 +532,13 @@ export default {
 </script>
 
 <style lang="scss">
-  .capability-questions {
+.capability-questions {
-      .question-text {
+    .question-text {
         margin-bottom: .5rem;
+
         span {
             text-align: left;
         }
     }
-  }
+}
 </style>

src/mixins/vehicle-questions-mixin.js

@@ -68,42 +68,205 @@ export default {
         async navigateForward(partsOrQuestions, vm) {
             const self = vm ?? this;
             const currentPage = self.$route.query.fmgPage;
-            
+
             const hasPartQuestions = this.hasPartQuestions(partsOrQuestions)
             const hasGlassLocationWithMultipleParts = this.hasGlassLocationWithMultipleParts(partsOrQuestions);
             const hasChildPartQuestions = this.hasChildPartQuestions(partsOrQuestions);
-            const hasCapabilityQuestions = this.hasCapabilityQuestions(partsOrQuestions);
+
+            // TODO REMOVE
+            const hasCapabilityQuestions = true //this.hasCapabilityQuestions(partsOrQuestions);
 
             if (hasPartQuestions && this.currentPageComesBeforePage(currentPage, fmgPageValues.PART_QUESTIONS)) {
-                self.$router.navigateWithSaving(self.navigationScenarios.HAS_PART_QUESTIONS, self.$route, {}, {}, {partsOrQuestions: partsOrQuestions});
+                self.$router.navigateWithSaving(self.navigationScenarios.HAS_PART_QUESTIONS, self.$route, {}, {}, { partsOrQuestions: partsOrQuestions });
             }
             else if (hasGlassLocationWithMultipleParts && this.currentPageComesBeforePage(currentPage, fmgPageValues.VEHICLE_PARTS)) {
                 // if multiple parts on any glass
                 // go to vehicle-parts page and pass the partsData
-                self.$router.navigateWithSaving(self.navigationScenarios.HAS_MULTIPLE_PARTS_TO_CHOOSE,self.$route,{},{},{partsOrQuestions: partsOrQuestions});
+                self.$router.navigateWithSaving(self.navigationScenarios.HAS_MULTIPLE_PARTS_TO_CHOOSE, self.$route, {}, {}, { partsOrQuestions: partsOrQuestions });
             } else if (hasChildPartQuestions && this.currentPageComesBeforePage(currentPage, fmgPageValues.MOLDING_QUESTIONS)) {
                 // if any childpart questions
                 // go to molding-questions page and pass the partsData
-                self.$router.navigateWithSaving(self.navigationScenarios.HAS_MOLDING_QUESTIONS,self.$route,{},{},{partsOrQuestions: partsOrQuestions});
+                self.$router.navigateWithSaving(self.navigationScenarios.HAS_MOLDING_QUESTIONS, self.$route, {}, {}, { partsOrQuestions: partsOrQuestions });
             } else if (hasCapabilityQuestions && this.currentPageComesBeforePage(currentPage, fmgPageValues.CAPABILITY_QUESTIONS)) {
                 // if has capability questions
                 // go to capability-questions page and pass the partsData
-                const windshieldPart = partsOrQuestions.filter(x => x.glassLocation === damageLocationsSelected.WINDSHIELD)[0].parts[0];
-                let capabilityQuestions = (await baseMixin.methods.dispatchStoreAction(storeActions.GET_CAPABILITY_QUESTIONS, {
-                    carId: store.getters.vehicle.carId,
-                    partNumber: windshieldPart.partNumber
-                })).data;
 
-                capabilityQuestions.forEach(question => {
+                partsOrQuestions = [
-                    question.answers = question.answers.map(answer => {
+                    {
-                        return {
+                        "glassName": "Single",
-                            ...answer,
+                        "glassLocation": "Windshield",
-                            answerResult: answer.answerResult1
+                        "parts": [
+                            {
+                                "partNumber": "A",
+                                "description": "rain sensor, solar, 3rd visor band, soundproofing, high beam sensor",
+                                "color": "Green Tint, Blue Shade",
+                                "requiresRecalibration": true,
+                                "requiresCapabilityQuestions": true,
+                                "recalibrationType": null,
+                                "childParts": null,
+                                "childPartQuestions": []
+                            },
+                        ],
+                        "partQuestions": null
+                    },
+                    {
+                        "glassName": "Front",
+                        "glassLocation": "Driver",
+                        "parts": [
+                            {
+                                "partNumber": "B",
+                                "description": "rain sensor, solar, 3rd visor band, soundproofing, high beam sensor",
+                                "color": "Green Tint, Blue Shade",
+                                "requiresRecalibration": true,
+                                "requiresCapabilityQuestions": true,
+                                "recalibrationType": null,
+                                "childParts": null,
+                                "childPartQuestions": []
+                            },
+                        ],
+                        "partQuestions": null
+                    },
+                    {
+                        "glassName": "Rear",
+                        "glassLocation": "Driver",
+                        "parts": [
+
+                            {
+                                "partNumber": "C",
+                                "description": "rain sensor, solar, 3rd visor band, soundproofing, high beam sensor",
+                                "color": "Green Tint, Blue Shade",
+                                "requiresRecalibration": true,
+                                "requiresCapabilityQuestions": false,
+                                "recalibrationType": null,
+                                "childParts": null,
+                                "childPartQuestions": []
+                            },
+                        ],
+                        "partQuestions": null
+                    }
+                ]
+
+                partsOrQuestions = [
+                    {
+                      "glassName": "Single",
+                      "glassLocation": "Windshield",
+                      "parts": [
+                        {
+                          "partNumber": "A",
+                          "description": "rain sensor, solar, 3rd visor band, soundproofing, high beam sensor",
+                          "color": "Green Tint, Blue Shade",
+                          "requiresRecalibration": true,
+                          "requiresCapabilityQuestions": true,
+                          "recalibrationType": null,
+                          "childParts": null,
+                          "childPartQuestions": []
                         }
-                    })
+                      ],
-                });
+                      "partQuestions": null,
+                      "capabilityQuestions": [
+                        {
+                          "questionSequence": 1,
+                          "questionText": "Is this the first question?",
+                          "answers": [
+                            {
+                              "answerResult1": "DYNAMIC",
+                              "answerResult2": "1",
+                              "answerText": "Yes",
+                              "nextQuestionSequence": null,
+                              "answerResult": "DYNAMIC"
+                            },
+                            {
+                              "answerResult1": "Unknown",
+                              "answerResult2": "0",
+                              "answerText": "No",
+                              "nextQuestionSequence": null,
+                              "answerResult": "Unknown"
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "glassName": "Front",
+                      "glassLocation": "Driver",
+                      "parts": [
+                        {
+                          "partNumber": "B",
+                          "description": "rain sensor, solar, 3rd visor band, soundproofing, high beam sensor",
+                          "color": "Green Tint, Blue Shade",
+                          "requiresRecalibration": true,
+                          "requiresCapabilityQuestions": true,
+                          "recalibrationType": null,
+                          "childParts": null,
+                          "childPartQuestions": []
+                        }
+                      ],
+                      "partQuestions": null,
+                      "capabilityQuestions": [
+                        {
+                          "questionSequence": 1,
+                          "questionText": "Is this the second question?",
+                          "answers": [
+                            {
+                              "answerResult1": "Oh yeah",
+                              "answerResult2": "1",
+                              "answerText": "Yes",
+                              "nextQuestionSequence": null,
+                              "answerResult": "Oh yeah"
+                            },
+                            {
+                              "answerResult1": "Maybe",
+                              "answerResult2": "0",
+                              "answerText": "No",
+                              "nextQuestionSequence": null,
+                              "answerResult": "Maybe"
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "glassName": "Rear",
+                      "glassLocation": "Driver",
+                      "parts": [
+                        {
+                          "partNumber": "C",
+                          "description": "rain sensor, solar, 3rd visor band, soundproofing, high beam sensor",
+                          "color": "Green Tint, Blue Shade",
+                          "requiresRecalibration": true,
+                          "requiresCapabilityQuestions": false,
+                          "recalibrationType": null,
+                          "childParts": null,
+                          "childPartQuestions": []
+                        }
+                      ],
+                      "partQuestions": null
+                    }
+                  ]
+
+                for (let partOrQuestion of partsOrQuestions) {
+                    if (this.hasCapabilityQuestions([partOrQuestion])) {
+                        let capabilityQuestionsForGlassLocation = (await baseMixin.methods.dispatchStoreAction(storeActions.GET_CAPABILITY_QUESTIONS, {
+                            carId: "CR00064847", // store.getters.vehicle.carId,
+                            partNumber: "DW01929GBYN" // glassLocationWithCapabilityQuestion.parts[0].partNumber
+                        })).data;
+
+                        capabilityQuestionsForGlassLocation.forEach(question => {
+                            question.answers = question.answers.map(answer => {
+                                return {
+                                    ...answer,
+                                    answerResult: answer.answerResult1
+                                }
+                            })
+                        })
+
+                        partOrQuestion.capabilityQuestions = capabilityQuestionsForGlassLocation;
+                    }
+                }
+
                 
-                self.$router.navigateWithSaving(self.navigationScenarios.HAS_CAPABILITY_QUESTIONS, self.$route, {}, {}, { partsOrQuestions, capabilityQuestions });
+
+                self.$router.navigateWithSaving(self.navigationScenarios.HAS_CAPABILITY_QUESTIONS, self.$route, {}, {}, { partsOrQuestions });
             } else {
                 // if single parts only
                 const collectedGlassParts = this.reducedGlassPartsArray(partsOrQuestions);
@@ -112,7 +275,7 @@ export default {
 
                 self.$refs.loadingModal.showModal();
                 navigateToHeritageFunnel();
-               
+
                 // For quote pages MVP release
                 // self.$router.navigate(self.navigationScenarios.HAS_NO_MORE_QUESTIONS, self.$route);
             }

src/store/index.js

@@ -749,18 +749,19 @@ export const actions = {
     })
   },
 
-  getPartFromCapabilityQuestionAnswer(context, selectedAnswerResult1) {
+  getPartFromCapabilityQuestionAnswer(context, glassLocation) {
     const pageData = context.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS);
 
-    const part = pageData.partsOrQuestions.find(x => x.glassLocation === damageLocationsSelected.WINDSHIELD).parts[0];
+    const part = pageData.partsOrQuestions.find(x => x.glassLocation === glassLocation).parts[0];
     const capabilityQuestionAnswers = context.getters.damage.capabilityQuestionAnswers;
+    const capabilityQuestionAnswersForPart = capabilityQuestionAnswers.find(x => x.glassLocation === glassLocation);
       
     return globalMethods.callHttpClient({
       method: endpoints.ApplyCapabilityAnswerToPart.method,
       endpoint: endpoints.ApplyCapabilityAnswerToPart.url,
       payload: {
         part,
-        capabilityAnswerResults: capabilityQuestionAnswers
+        capabilityAnswerResults: capabilityQuestionAnswersForPart
       }
     })
   },