CSR-111: set up prerequisite data and navigation for capability questions
This commit is contained in:
parent
4b22eab1a2
commit
b41eae1797
10 changed files with 335 additions and 175 deletions
162
src/layouts/capability-questions/capability-questions.vue
Normal file
162
src/layouts/capability-questions/capability-questions.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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...
|
||||
|
||||
this.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});
|
||||
if (hasCapabilityQuestions) {
|
||||
// if has capability questions
|
||||
// go to capability-questions page
|
||||
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
|
||||
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
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) {
|
||||
store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts);
|
||||
}
|
||||
this.navigateForward(hasMultipleParts, glassNameAndPartsForStore);
|
||||
},
|
||||
async navigateForward(hasMultipleParts, glassNameAndPartsForStore) {
|
||||
if (hasMultipleParts) {
|
||||
// NAVIGATE FORWARD
|
||||
if (hasGlassLocationWithMultipleParts) {
|
||||
// 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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
// check if there are childPartQuestions (for molding-questions)
|
||||
if (Array.isArray(currentPart.childPartQuestions) && currentPart.childPartQuestions.length > 0) {
|
||||
isMoldingQuestions = true
|
||||
}
|
||||
matchedParts.push({
|
||||
"glassLocation": value.glassLocation,
|
||||
"glassName": value.glassName,
|
||||
"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 {
|
||||
// Save parts to the store
|
||||
await this.dispatchStoreAction(
|
||||
storeActions.SAVE_GLASS_PARTS,
|
||||
this.matchedParts,
|
||||
false
|
||||
} else if (hasCapabilityQuestions) {
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.HAS_CAPABILITY_QUESTIONS,
|
||||
this.$route,
|
||||
{},
|
||||
{},
|
||||
{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() {
|
||||
|
|
|
|||
43
src/mixins/vehicle-questions-mixin.js
Normal file
43
src/mixins/vehicle-questions-mixin.js
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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 hasChildPartQuestions = partsOrQuestions.some(pq => {
|
||||
return pq.parts?.some(part => part.childPartQuestions?.length > 0);
|
||||
});
|
||||
|
||||
const hasPartsQuestions = this.hasPartQuestions(partsOrQuestions);
|
||||
const hasGlassLocationWithMultipleParts = this.hasGlassLocationWithMultipleParts(partsOrQuestions);
|
||||
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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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(store.commit).toHaveBeenCalledWith(storeMutations.UPDATE_GLASS_PARTS, { partsOrQuestions })
|
||||
expect(wrapper.vm.$store.commit).toHaveBeenCalledTimes(1);
|
||||
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 = {
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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,10 +223,18 @@ 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,
|
||||
|
|
|
|||
Loading…
Reference in a new issue