jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-111 Get part from capability question, save, reset answers when part question answer result changes

Browse source
This commit is contained in:
Katie 2022-08-16 14:44:32 -04:00
parent 7584968143
commit d3f7ad68f2
9 changed files with 108 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/constants/endpoints.js
View file

@ -63,6 +63,10 @@ const endpoints = {
url: "/parts/api/v1/parts/capability-questions",
method: "GET"
},
ApplyCapabilityAnswerToPart: {
url: "/parts/api/v1/parts/apply-capability-answer-to-part",
method: "POST"
},
SaveOrder: {
url: "/order/api/v1/order/save",
method: "POST",

2
src/constants/store-actions.js
View file

@ -22,6 +22,7 @@ const storeActions = {
GET_PARTS_OR_QUESTIONS: "getPartsOrQuestions",
GET_PARTS: "getParts",
GET_CAPABILITY_QUESTIONS: "getCapabilityQuestions",
GET_PART_FROM_CAPABILITY_QUESTION_ANSWER: "getPartFromCapabilityQuestionAnswer",
SAVE_ORDER: "saveOrder",
LOAD_ORDER: "loadOrder",
UPDATE_STORE_WITH_SAVE_ORDER_RESPONSE: "updateStoreWithSaveOrderResponse",
@ -56,6 +57,7 @@ const storeActions = {
SAVE_REGISTRATION_ADDRESS_LOOKUP: "saveRegistrationAddressLookup",
SAVE_GLASS_PARTS: "saveGlassParts",
SAVE_PART_QUESTION_ANSWERS: "savePartQuestionAnswers",
SAVE_CAPABILITY_QUESTION_ANSWERS: "saveCapabilityQuestionAnswers"
};
export { storeActions };

1
src/constants/store-mutations.js
View file

@ -17,6 +17,7 @@ const storeMutations = {
UPDATE_NUMBER_OF_CHIPS: "updateNumberOfChips",
UPDATE_GLASS_TO_REPLACE: "updateGlassToReplace",
UPDATE_PART_QUESTION_ANSWERS: "updatePartQuestionAnswers",
UPDATE_CAPABILITY_QUESTION_ANSWERS: "updateCapabilityQuestionAnswers",
UPDATE_GLASS_PARTS: "updateGlassParts",
UPDATE_OTHER_PARTS: "updateOtherParts",

104
src/layouts/capability-questions/capability-questions.vue
View file

@ -6,13 +6,10 @@
v-slot="{ meta }"
>
<div class="page-container-grouped-styles capability-questions">
<loadingModal ref="loadingModal"/>
<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>
CQD: {{ capabilityQuestionsData }}
<alert
ref="alertFewMoreQuestions"
class="my-5"
@ -21,15 +18,13 @@
:manualCopy="AlertFewMoreQuestionsCopy"
v-bind:isDismissible="false"
/>
<!-- <div v-for="(question, i) in capabilityQuestionsData" :key="i"> -->
<questionChain
ref="questionChain"
v-model="selectedModel"
:questionData="capabilityQuestionsData"
:partIndex="i"
validationRules="questions-required"
/>
<!-- </div> -->
<questionChain
ref="questionChain"
v-model="selectedAnswer"
:questionData="capabilityQuestionsData"
:partIndex="i"
validationRules="questions-required"
/>
<funnel-footer
ref="funnelFooter"
cmsWidgetName="FunnelFooterWidget"
@ -63,6 +58,7 @@ 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";
import { damageLocationsSelected } from "@/constants/damage-locations-selected";
// DEFINE VALIDATION RULES
defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
@ -73,7 +69,6 @@ export default {
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
const getCapabilityQuestions = store.dispatch(storeActions.GET_CAPABILITY_QUESTIONS, store.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS));
// Settle promises and get results
const promiseResultMap = [
@ -81,10 +76,6 @@ export default {
resultKey: "cmsContent",
promise: cmsContentPromise,
},
{
resultKey: "capabilityQuestions",
promise: getCapabilityQuestions,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
@ -92,72 +83,57 @@ export default {
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
resultMap.capabilityQuestions.forEach(question => {
console.log(question.answers)
question.answers = question.answers.map(answer => {
return {
...answer,
answerResult: answer.answerResult1
}
})
// question.answers = question.answers
})
vm.capabilityQuestionsData = {
partQuestions: resultMap.capabilityQuestions
};
console.log("CQ: ", resultMap.capabilityQuestions)
});
},
data() {
return {
selectedModel: [],
capabilityQuestionsData: [],
currentPartNum: 0,
selectedAnswer: [],
// TODO This shouldn't be an object with property `partQuestions`
capabilityQuestionsData: {
partQuestions: store.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS).capabilityQuestions
}
};
},
computed: {
AlertFewMoreQuestionsHeader() {
return this.getCmsContent("AlertPartsQuestions", "HeadlineText");
return this.getCmsContent("AdditionalPartsQuestionsAlert", "HeadlineText");
},
AlertFewMoreQuestionsCopy() {
return this.getCmsContent("AlertPartsQuestions", "BodyText");
return this.getCmsContent("AdditionalPartsQuestionsAlert", "BodyText");
},
windshieldPart() {
return this.pageData.partsOrQuestions.find(x => x.glassLocation === damageLocationsSelected.WINDSHIELD);
},
windshieldPartInfo() {
return this.windshieldPart.parts[0];
},
pageData() {
return this.$store.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS);
}
},
methods: {
arePagePrerequisitesValid() {
const capabilityQuestionsPageData = store.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS);
return capabilityQuestionsPageData && Object.keys(capabilityQuestionsPageData).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
// if questions are answered:
console.log(this.windshieldPartInfo);
console.log(this.selectedAnswer)
const selectedAnswerResult1 = this.selectedAnswer.answerResult;
const selectedAnswerResult2 = this.pageData.capabilityQuestions[0].answers.find(x => x.answerResult1 === selectedAnswerResult1).answerResult2;
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD,
this.$route
);
},
},
watch: {
selectedModel(model) {
this.capabilityQuestionsData[model.partIndex].answerData = {
answerResult: model.answerResult,
answeredQuestions: model.answeredQuestions,
}
this.currentPartNum = model.partIndex + 1;
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);
},
},
components: {

29
src/mixins/vehicle-questions-mixin.js
View file

@ -3,6 +3,8 @@ import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigat
import { storeMutations } from "@/constants/store-mutations.js";
import { damageLocationsSelected } from "@/constants/damage-locations-selected";
import { navigationScenarios } from "../router/router-constants/navigation-scenarios";
import { storeActions } from "@/constants/store-actions";
import store from "@/store";
export default {
methods: {
@ -22,6 +24,7 @@ export default {
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
reducedGlassPartsArray(glassParts) {
@ -63,7 +66,7 @@ export default {
return this.comparePageIndices(currentPage, fmgPage) > 0;
},
// Can't use `this` because navigateForward is also called from vin-pages-mixin
navigateForward(partsOrQuestions, vm) {
async navigateForward(partsOrQuestions, vm) {
const self = vm ?? this;
const currentPage = self.$route.query.fmgPage;
@ -86,18 +89,30 @@ export default {
} else if (hasCapabilityQuestions && this.currentPageComesBeforePage(currentPage, fmgPageValues.CAPABILITY_QUESTIONS)) {
// if has capability questions
// go to capability-questions page and pass the partsData
self.$router.navigate(self.navigationScenarios.HAS_CAPABILITY_QUESTIONS, self.$route, {}, {}, {
carId: self.$store.getters.vehicle.carId,
partNumber: partsOrQuestions.filter(x => x.glassLocation === damageLocationsSelected.WINDSHIELD)[0].parts[0].partNumber
const windshieldPart = partsOrQuestions.filter(x => x.glassLocation === damageLocationsSelected.WINDSHIELD)[0].parts[0];
let capabilityQuestions = (await store.dispatch(storeActions.GET_CAPABILITY_QUESTIONS, {
carId: store.getters.vehicle.carId,
partNumber: windshieldPart.partNumber
})).data;
capabilityQuestions.forEach(question => {
question.answers = question.answers.map(answer => {
return {
...answer,
answerResult: answer.answerResult1
}
})
});
self.$router.navigate(self.navigationScenarios.HAS_CAPABILITY_QUESTIONS, self.$route, {}, {}, { partsOrQuestions, capabilityQuestions });
} else {
// if single parts only
const collectedGlassParts = this.reducedGlassPartsArray(partsOrQuestions);
// save to store lineItems.glassParts
self.$store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts);
// go to heritage quote page
self.$refs.loadingModal.showModal();
navigateToHeritageFunnel();
self.$router.navigate(self.navigationScenarios.ANSWERED_ALL_QUESTIONS, self.$route);
}
},
backButtonAction() {

1
src/mixins/vin-pages-mixin.js
View file

@ -4,7 +4,6 @@ import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigat
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
export default {
mixins: [vehicleQuestionsMixin],
methods: {
async navigateForwardWithSingleCarMatch() {
const result = await this.dispatchStoreAction(storeActions.GET_PARTS_OR_QUESTIONS);

1
src/router/router-constants/navigation-scenarios.js
View file

@ -24,6 +24,7 @@ const navigationScenarios = {
SELECTED_PROVIDE_VIN_DIFFERENT_WAY: "SELECTED_PROVIDE_VIN_DIFFERENT_WAY",
CLICKED_BACK_WITH_PART_QUESTION_ANSWERS: "CLICKED_BACK_WITH_PART_QUESTION_ANSWERS",
CLICKED_BACK_WITHOUT_PART_QUESTION_ANSWERS: "CLICKED_BACK_WITHOUT_PART_QUESTION_ANSWERS",
ANSWERED_ALL_QUESTIONS: "ANSWERED_ALL_QUESTIONS",
HAS_PART_QUESTIONS: "HAS_PART_QUESTIONS",
HAS_MULTIPLE_PARTS_TO_CHOOSE: "HAS_MULTIPLE_PARTS_TO_CHOOSE",
HAS_MOLDING_QUESTIONS: "HAS_MOLDING_QUESTIONS",

8
src/router/router-constants/routing-table.js
View file

@ -251,7 +251,7 @@ const routingTable = function(store) {
destinationFmgPageValue: fmgPageValues.CAPABILITY_QUESTIONS,
},
{
scenario: navigationScenarios.ANSWERED_QUESTIONS_WITH_SINGLE_PART,
scenario: navigationScenarios.ANSWERED_ALL_QUESTIONS,
destinationFmgPageValue: fmgPageValues.QUOTE,
},
]
@ -284,7 +284,7 @@ const routingTable = function(store) {
destinationFmgPageValue: fmgPageValues.CAPABILITY_QUESTIONS,
},
{
scenario: navigationScenarios.ANSWERED_QUESTIONS_WITH_SINGLE_PART,
scenario: navigationScenarios.ANSWERED_ALL_QUESTIONS,
destinationFmgPageValue: fmgPageValues.QUOTE,
},
],
@ -309,7 +309,7 @@ const routingTable = function(store) {
destinationFmgPageValue: fmgPageValues.CAPABILITY_QUESTIONS,
},
{
scenario: navigationScenarios.ANSWERED_QUESTIONS_WITH_SINGLE_PART,
scenario: navigationScenarios.ANSWERED_ALL_QUESTIONS,
destinationFmgPageValue: fmgPageValues.QUOTE,
}
]
@ -334,7 +334,7 @@ const routingTable = function(store) {
destinationFmgPageValue: fmgPageValues.MOLDING_QUESTIONS
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
scenario: navigationScenarios.ANSWERED_ALL_QUESTIONS,
destinationFmgPageValue: fmgPageValues.QUOTE
},
]

35
src/store/index.js
View file

@ -49,6 +49,7 @@ const getDefaultState = () => {
numberOfChips: null,
glassToReplace: null,
partQuestionAnswers: null,
capabilityQuestionAnswers: null
},
lineItems: {
glassParts: null
@ -126,6 +127,9 @@ export const mutations = {
updatePartQuestionAnswers(state, answersArray) {
state.order.damage.partQuestionAnswers = answersArray;
},
updateCapabilityQuestionAnswers(state, answersArray) {
state.order.damage.capabilityQuestionAnswers = answersArray;
},
updateGlassParts(state, partsData) {
state.order.lineItems.glassParts = partsData;
},
@ -277,6 +281,7 @@ export const mutations = {
resetGlassPartsState(state) {
state.order.lineItems.glassParts = null;
state.order.damage.partQuestionAnswers = null;
state.order.damage.capabilityQuestionAnswers = null;
state.applicationUser.pageData[fmgPageValues.PART_QUESTIONS] = null;
state.applicationUser.pageData[fmgPageValues.VEHICLE_PARTS] = null;
state.applicationUser.pageData[fmgPageValues.MOLDING_QUESTIONS] = null;
@ -729,6 +734,22 @@ export const actions = {
})
},
getPartFromCapabilityQuestionAnswer(context, selectedAnswerResult1) {
const pageData = context.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS);
const part = pageData.partsOrQuestions.find(x => x.glassLocation === damageLocationsSelected.WINDSHIELD).parts[0];
const capabilityQuestionAnswers = context.getters.damage.capabilityQuestionAnswers;
return globalMethods.callHttpClient({
method: endpoints.ApplyCapabilityAnswerToPart.method,
endpoint: endpoints.ApplyCapabilityAnswerToPart.url,
payload: {
part,
capabilityAnswerResults: capabilityQuestionAnswers
}
})
},
// Order API Actions
saveOrder(context) {
const vehicle = context.getters.vehicle;
@ -958,10 +979,22 @@ export const actions = {
}
},
savePartQuestionAnswers(context, partQuestionAnswersArray) {
// if part question answers have changed, reset subsequent question answers
const previousResultsArray = context.getters.damage.partQuestionAnswers;
const havePartQuestionAnswersChanged = previousResultsArray.length !== partQuestionAnswersArray.length ||
!previousResultsArray.every((x, i) => x.result === partQuestionAnswersArray[i].result);
if (havePartQuestionAnswersChanged) {
context.commit(storeMutations.UPDATE_CAPABILITY_QUESTION_ANSWERS, null);
}
//Save new values
context.commit(storeMutations.UPDATE_PART_QUESTION_ANSWERS, partQuestionAnswersArray);
},
saveCapabilityQuestionAnswers(context, capabilityQuestionAnswers) {
//Save new values
context.commit(storeMutations.UPDATE_CAPABILITY_QUESTION_ANSWERS, capabilityQuestionAnswers);
},
// Misc order actions
saveServiceLocation(context, serviceLocationInfo) {
context.commit(storeMutations.UPDATE_SERVICE_LOCATION, serviceLocationInfo);