CSR-762 Fix estimate page, start on question-chain

This commit is contained in:
Katie 2022-09-21 15:29:01 -04:00
parent 04f4a9369b
commit b14ca820ac
6 changed files with 54 additions and 17 deletions

View file

@ -261,9 +261,10 @@ export default {
// this.$emit("isCheckedChanged", val);
// },
handleAnswerChange(eventValue) {
// console.log({
// bqEvent: eventValue
// })
console.log({
bqEvent: eventValue
})
this.$emit("change", eventValue);
this.$emit("update:modelValue", eventValue);
},
},

View file

@ -102,7 +102,7 @@ export default {
// const isSingleAnswerPreselected = this.modelValue?.length === 1 && this.isChecked;
if (this.isChecked) {
console.log("HI THERE");
// console.log("HI THERE");
this.handleChange(this.modelValue);
}
},
@ -241,7 +241,7 @@ export default {
this.valueToEmit = newValue;
} else {
console.log("not multi");
// console.log("not multi");
this.valueToEmit = this.value;
}
@ -253,7 +253,7 @@ export default {
// }
},
handleClick(e) {
console.log("handleClick");
// console.log("handleClick");
this.handleSelectionChange(e);
// console.log("HC");
// console.log({
@ -335,8 +335,7 @@ export default {
};
</script>
<!-- TODO KO Scope this? -->
<style lang="scss">
<style lang="scss" scoped>
input {
opacity: 0;
height: 0.1px; // NOTE: cannot be zero or Safari can't put focus on it

View file

@ -1,7 +1,9 @@
<template>
<div v-for="(q, i) in questions" :key="i">
q.answerSelected: {{q.answerSelected}}<br/>
currentQuestionNum: {{currentQuestionNum}}
<transition appear name="fade" mode="out-in">
<buttonQuestion
<!-- <buttonQuestion
v-if="q.answerSelected || (q.questionSequence === currentQuestionNum)"
class="radioQuestion"
:class="(q.questionSequence === currentQuestionNum) && 'current-question'"
@ -9,7 +11,18 @@
:answers="q.answers"
:groupName="`question-${glassIndex}-${q.questionSequence}`"
v-model="q.answerSelected"
@isCheckedChanged="handleAnswer"
isRequired
:validationRules="validationRules"
/> -->
<buttonQuestion
v-if="q.answerSelected || (q.questionSequence === currentQuestionNum)"
class="radioQuestion"
:class="(q.questionSequence === currentQuestionNum) && 'current-question'"
:questionText="q.questionText"
:answers="q.answers"
:groupName="`question-${glassIndex}-${q.questionSequence}`"
:modelValue="q.answerSelected"
@update:modelValue="handleAnswer(q, $event)"
isRequired
:validationRules="validationRules"
/>
@ -67,6 +80,10 @@ export default {
}
});
console.log({
modelValue: this.modelValue,
questions: this.questions
})
if (!this.modelValue?.length > 0 && this.questions.length > 0) {
// set this.currentQuestionNum to first valid question
this.currentQuestionNum = this.questions[0].questionSequence;
@ -77,7 +94,12 @@ export default {
}
},
methods: {
handleAnswer(returnedAnswer) {
handleAnswer(question, returnedAnswer) {
console.log({
returnedAnswer: returnedAnswer
})
question.answerSelected = returnedAnswer;
/*
returnedAnswer example format:
{
@ -86,13 +108,19 @@ export default {
"buttonId": "Driver-Front-1-1|answer|DD11132|Yes"
}
*/
const isQuestionChainComplete = this.getQuestionChainAnswerIfComplete(returnedAnswer.value);
const isQuestionChainComplete = this.getQuestionChainAnswerIfComplete(returnedAnswer);
console.log({
isQuestionChainComplete: isQuestionChainComplete
})
if (isQuestionChainComplete) {
this.$emit("update:modelValue", isQuestionChainComplete);
}
},
getQuestionChainAnswerIfComplete(returnedAnswer) { // this method will return either a final answer or Boolean false
console.log("getQuestionChainAnswerIfComplete: ", {
returnedAnswer: returnedAnswer
})
if (!returnedAnswer) { return false }
// Example returnedAnswers:
@ -127,6 +155,10 @@ export default {
}
});
console.log({
questionType: questionType,
returnedAnswerArray: returnedAnswerArray
})
// return false if there's a nextQuestion... or return an object with final answers (truthy)
if (questionType === "nextQuestion") {

View file

@ -27,7 +27,7 @@
validationRules="option-required"
/>
</div>
<div v-if="isRepair">
<div v-else>
<alert
class="my-4"
cmsWidgetName="AlertQuoteReady"
@ -87,7 +87,6 @@
cmsWidgetName="FunnelFooterWidget"
ref="funnelFooter"
:isForwardActionDisabled="!meta.valid"
@isDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction"
/>
@ -131,7 +130,7 @@ export default {
name: "estimate",
data() {
return {
selectedVinLookupMethod: "",
selectedVinLookupMethod: null,
serviceZipCode: this.getZipFromStore(),
emailAddress: this.getEmailFromStore(),
displayInvalidZipAlert: false,

View file

@ -122,10 +122,11 @@ export default {
},
async forwardButtonAction() {
const questionAnswersArray = this.partsQuestionsData.map((glass) => {
console.log(glass)
return {
glassLocation: glass.glassLocation,
glassName: glass.glassName,
result: glass.answerData.answerResult,
result: glass.answerData.result,
answeredQuestions: glass.answerData.answeredQuestions,
isSuppressedPart: glass.isSuppressedPart,
};
@ -193,7 +194,7 @@ export default {
// only look for duplicates forward... to parts that follow after the currently being answered part
if (gpIndex > answer.glassIndex) {
console.log("RESETTING ANSWERDATA")
let suppressUntil;
// reset this glass part, in case user is changing their previous answers
glass.answerData = null;
@ -297,6 +298,7 @@ export default {
return !q.suppressQuestion;
});
console.log("REMAINING QUESTIONS", remainingQuestions)
if (remainingQuestions.length < 1) {
// this is the final answer for this glass part
@ -313,6 +315,8 @@ export default {
answeredQuestions: [answeredQuestionObj],
};
console.log(glass.answerData)
// suppress this glass because it has an answer
glass.isSuppressedPart = true;
}
@ -416,6 +420,7 @@ export default {
this.selectedAnswers[glass.key] = [];
if (!alreadyAnsweredQuestions) {
console.log("NULLING ANSWERDATA")
glass.answerData = null;
}

View file

@ -34,6 +34,7 @@
:value="value"
:groupName="groupName"
buttonWrapperClasses="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
:validationRules="validationRules"
@change="handleAnswerChange"
>
<div