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

Merge branch 'develop' into feature/CSR-702

Browse source
This commit is contained in:
Katie 2022-07-28 11:17:02 -04:00
commit 03c6ffe30e
13 changed files with 660 additions and 277 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
jest.config.js
View file

@ -13,6 +13,7 @@ module.exports = {
"!src/helpers/unit-test-helper.js", "!src/helpers/unit-test-helper.js",
"!src/layouts/vehicle-damage/windshield-options/windshield-options.vue", "!src/layouts/vehicle-damage/windshield-options/windshield-options.vue",
"!src/layouts/molding-questions/**/*.vue", "!src/layouts/molding-questions/**/*.vue",
"!src/layouts/capability-questions/**/*.vue",
"!src/layouts/part-questions/**/*.vue", "!src/layouts/part-questions/**/*.vue",
"!src/layouts/reveal/**/*.vue", "!src/layouts/reveal/**/*.vue",
"!src/ux-components/text-link/**/*.vue", "!src/ux-components/text-link/**/*.vue",

165
src/layouts/capability-questions/capability-questions.vue Normal file
View file

@ -0,0 +1,165 @@
<template>
<Form
@submit="onSubmit"
@invalid-submit="onInvalidSubmit"
ref="theForm"
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>
<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";
import loadingModal from '@/common-components/loading-modal/loading-modal.vue';
// 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,
loadingModal,
Form,
},
};
</script>
<style lang="scss">
.capability-questions {
.question-text {
margin-bottom: .5rem;
span {
text-align: left;
}
}
}
</style>

120
src/layouts/molding-questions/molding-questions.vue
View file

@ -6,6 +6,7 @@
v-slot="{ meta }" v-slot="{ meta }"
> >
<div class="page-container-grouped-styles molding-questions"> <div class="page-container-grouped-styles molding-questions">
<loadingModal ref="loadingModal"/>
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
@ -49,6 +50,7 @@ import alert from "@/ux-components/alert/alert";
import questionChain from "@/common-components/question-chain/question-chain"; import questionChain from "@/common-components/question-chain/question-chain";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header"; import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import funnelFooter from "@/common-components/funnel-footer/funnel-footer"; import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import loadingModal from '@/common-components/loading-modal/loading-modal.vue';
// Supporting Files // Supporting Files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@ -60,12 +62,15 @@ import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
import { Form, defineRule } from "vee-validate"; import { Form, defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules"; import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages"; import { errorMessages } from "@/constants/error-messages";
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
// DEFINE VALIDATION RULES // DEFINE VALIDATION RULES
defineRule("questions-required", required(errorMessages.OPTION_REQUIRED)); defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
export default { export default {
name: "molding-questions", name: "molding-questions",
mixins: [vehicleQuestionsMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
// Call APIs // Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage); const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
@ -110,7 +115,7 @@ export default {
}, },
methods: { methods: {
arePagePrerequisitesValid() { arePagePrerequisitesValid() {
return true; return true; // TODO - DO TRUE TEST OF PAGEDATA
// return Object.keys(store.getters.pageData(fmgPageValues.MOLDING_QUESTIONS)).length > 0; // return Object.keys(store.getters.pageData(fmgPageValues.MOLDING_QUESTIONS)).length > 0;
}, },
showThisPartQuestionChain(part, i) { showThisPartQuestionChain(part, i) {
@ -146,111 +151,21 @@ export default {
const glassNameAndPartsForStore = partsLookup.data.glassNameAndPartsForStore; const glassNameAndPartsForStore = partsLookup.data.glassNameAndPartsForStore;
console.log("glassNameAndPartsForStore: ", glassNameAndPartsForStore); const hasCapabilityQuestions = this.hasCapabilityQuestions(glassNameAndPartsForStore);
// HARD CODE RESPONSE FOR NOW... if (hasCapabilityQuestions) {
// if has capability questions
this.glassNameAndPartsForStore = [ // go to capability-questions page
{ this.$router.navigate(this.navigationScenarios.HAS_CAPABILITY_QUESTIONS,this.$route,{},{},{partsOrQuestions: glassNameAndPartsForStore});
"glassName": "Single",
"glassLocation": "Windshield",
"parts": [
{
"partNumber": "FW03861GTYN",
"description": "rain sensor, heated glass, auto dimming mirror, solar, 3rd visor band, condensation sensor",
"color": "Green Tint",
"requiresRecalibration": false,
"requiresCapabilityQuestions": false,
"recalibrationType": null,
"childParts": null,
"childPartQuestions": [
{
"questionSequence": 1,
"questionText": "Does the rubber seal around your windshield have a chrome strip running through it?",
"answers": [
{
"answerResult": "WKT D1106 C",
"answerText": "Yes",
"nextQuestionSequence": null
},
{
"answerResult": "WKT D1106 B",
"answerText": "No",
"nextQuestionSequence": null
}
]
}
]
}
]
},
{
"glassName": "Stationary",
"glassLocation": "Rear",
"parts": [
{
"partNumber": "FB25992GTNN",
"description": "heated glass, solar",
"color": "Green Tint",
"requiresRecalibration": false,
"requiresCapabilityQuestions": false,
"recalibrationType": null,
"childParts": null,
"childPartQuestions": []
}
]
}
];
// test response data for multiple parts
const hasMultipleParts = glassNameAndPartsForStore.some((glass) => glass.parts?.length > 1);
// loop through all glass items
const collectedGlassParts = [];
glassNameAndPartsForStore.forEach((glass) => {
if (Array.isArray(glass.parts) && glass.parts.length === 1) {
const singlePart = glass.parts[0];
collectedGlassParts.push({
"partNumber": singlePart.partNumber,
"description": singlePart.description,
"color": singlePart.color,
"requiresRecalibration": singlePart.requiresRecalibration,
"childParts": singlePart.childParts,
"price": singlePart.price,
});
// check for and collect any molding questions
if (Array.isArray(singlePart.childPartQuestions) && singlePart.childPartQuestions.length > 0) {
this.moldingQuestionsForStore.push({
"glassName": glass.glassName,
"glassLocation": glass.glassLocation,
"childPartQuestions": singlePart.childPartQuestions,
});
}
}
});
if (!hasMultipleParts) {
this.$store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts);
}
this.navigateForward(hasMultipleParts, glassNameAndPartsForStore);
},
navigateForward(hasMultipleParts, glassNameAndPartsForStore) {
if (hasMultipleParts) {
// if multiple parts on any glass
// go to vehicle-parts page and pass the partsData
this.$router.navigate(this.navigationScenarios.ANSWERED_QUESTIONS_WITH_MULTIPLE_PARTS,this.$route,{},{},{partsOrQuestions: glassNameAndPartsForStore});
} else { } else {
// if single parts only // if single parts only
// go to quote page const collectedGlassParts = this.reducedGlassPartsArray(glassNameAndPartsForStore);
this.$router.navigate(this.navigationScenarios.ANSWERED_QUESTIONS_WITH_SINGLE_PART,this.$route); // save to store lineItems.glassParts
this.$store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts);
// go to heritage quote page
this.$refs.loadingModal.showModal();
navigateToHeritageFunnel();
} }
// TODO - ADD CHECK FOR CAPABILITY QUESTIONS TO SEE IF NAVIGATE TO CAPABILITY-QUESTIONS
}, },
}, },
watch: { watch: {
@ -269,6 +184,7 @@ export default {
questionChain, questionChain,
funnelSubHeader, funnelSubHeader,
funnelFooter, funnelFooter,
loadingModal,
Form, Form,
}, },
}; };

68
src/layouts/part-questions/part-questions.vue
View file

@ -6,6 +6,7 @@
v-slot="{ meta }" v-slot="{ meta }"
> >
<div class="page-container-grouped-styles part-questions"> <div class="page-container-grouped-styles part-questions">
<loadingModal ref="loadingModal"/>
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
@ -49,6 +50,7 @@ import alert from "@/ux-components/alert/alert";
import questionChain from "@/common-components/question-chain/question-chain"; import questionChain from "@/common-components/question-chain/question-chain";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header"; import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import funnelFooter from "@/common-components/funnel-footer/funnel-footer"; import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import loadingModal from '@/common-components/loading-modal/loading-modal.vue';
// Supporting Files // Supporting Files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@ -60,6 +62,8 @@ import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
import { Form, defineRule } from "vee-validate"; import { Form, defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules"; import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages"; import { errorMessages } from "@/constants/error-messages";
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
// DEFINE VALIDATION RULES // DEFINE VALIDATION RULES
defineRule("questions-required", required(errorMessages.OPTION_REQUIRED)); defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
@ -108,6 +112,7 @@ export default {
return this.getCmsContent("AlertPartsQuestions", "BodyText"); return this.getCmsContent("AlertPartsQuestions", "BodyText");
}, },
}, },
mixins: [vehicleQuestionsMixin],
methods: { methods: {
showThisPartQuestionChain(part, i) { showThisPartQuestionChain(part, i) {
if (part.partQuestions?.length < 1) { return false; } // return false if only one partQuestion if (part.partQuestions?.length < 1) { return false; } // return false if only one partQuestion
@ -137,59 +142,37 @@ export default {
// call API parts method // call API parts method
const partsLookup = await this.dispatchStoreAction(storeActions.GET_PARTS) const partsLookup = await this.dispatchStoreAction(storeActions.GET_PARTS)
.catch(() => { .catch(() => {
this.$refs.funnelFooter.removeLoader(); return this.$refs.funnelFooter.removeLoader();
}); });
if (!partsLookup) { return }
const glassNameAndPartsForStore = partsLookup.data.glassNameAndParts; const glassNameAndPartsForStore = partsLookup.data.glassNameAndParts;
// test response data for multiple parts const hasGlassLocationWithMultipleParts = this.hasGlassLocationWithMultipleParts(glassNameAndPartsForStore);
const hasMultipleParts = glassNameAndPartsForStore.some((glass) => glass.parts?.length > 1); const hasChildPartQuestions = this.hasChildPartQuestions(glassNameAndPartsForStore);
const hasCapabilityQuestions = this.hasCapabilityQuestions(glassNameAndPartsForStore);
// loop through all glass items // NAVIGATE FORWARD
const collectedGlassParts = []; if (hasGlassLocationWithMultipleParts) {
glassNameAndPartsForStore.forEach((glass) => {
if (Array.isArray(glass.parts) && glass.parts.length === 1) {
const singlePart = glass.parts[0];
collectedGlassParts.push({
"partNumber": singlePart.partNumber,
"description": singlePart.description,
"color": singlePart.color,
"requiresRecalibration": singlePart.requiresRecalibration,
"childParts": singlePart.childParts,
"price": singlePart.price,
});
// check for and collect any molding questions
if (Array.isArray(singlePart.childPartQuestions) && singlePart.childPartQuestions.length > 0) {
this.moldingQuestionsForStore.push({
"glassName": glass.glassName,
"glassLocation": glass.glassLocation,
"childPartQuestions": singlePart.childPartQuestions,
});
}
}
});
if (!hasMultipleParts) {
store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts);
}
this.navigateForward(hasMultipleParts, glassNameAndPartsForStore);
},
async navigateForward(hasMultipleParts, glassNameAndPartsForStore) {
if (hasMultipleParts) {
// if multiple parts on any glass // if multiple parts on any glass
// go to vehicle-parts page and pass the partsData // go to vehicle-parts page and pass the partsData
this.$router.navigate(this.navigationScenarios.ANSWERED_QUESTIONS_WITH_MULTIPLE_PARTS,this.$route,{},{},{partsOrQuestions: glassNameAndPartsForStore}); 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 { } else {
// if single parts only // if single parts only
// go to quote page const collectedGlassParts = this.reducedGlassPartsArray(glassNameAndPartsForStore);
this.$router.navigate(this.navigationScenarios.ANSWERED_QUESTIONS_WITH_SINGLE_PART,this.$route); // save to store lineItems.glassParts
this.$store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts);
// go to heritage quote page
this.$refs.loadingModal.showModal();
navigateToHeritageFunnel();
} }
// TODO - ADD CHECK FOR CAPABILITY QUESTIONS TO SEE IF NAVIGATE TO CAPABILITY-QUESTIONS
}, },
arePagePrerequisitesValid() { arePagePrerequisitesValid() {
return Object.keys(store.getters.pageData(fmgPageValues.PART_QUESTIONS)).length > 0; return Object.keys(store.getters.pageData(fmgPageValues.PART_QUESTIONS)).length > 0;
@ -211,6 +194,7 @@ export default {
questionChain, questionChain,
funnelSubHeader, funnelSubHeader,
funnelFooter, funnelFooter,
loadingModal,
Form, Form,
}, },
}; };

150
src/layouts/vehicle-parts/vehicle-parts.spec.js
View file

@ -10,6 +10,7 @@ import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { nextTick } from "vue"; import { nextTick } from "vue";
import baseMixin from "@/mixins/base-mixin.js"; import baseMixin from "@/mixins/base-mixin.js";
import store from "@/store"; import store from "@/store";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
// Mock our module for promises. // Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({ jest.mock("@/helpers/layout-helper.js", () => ({
@ -21,6 +22,10 @@ jest.mock("@/helpers/cms-content-helper", () => ({
fetchCmsContentForPage: jest.fn(), fetchCmsContentForPage: jest.fn(),
})); }));
jest.mock("@/helpers/heritage-integration/navigation-helper", () => ({
navigateToHeritageFunnel: jest.fn()
}));
// Mock store // Mock store
jest.mock("@/store", () => { return {}; }, { virtual: true }); jest.mock("@/store", () => { return {}; }, { virtual: true });
@ -211,17 +216,107 @@ describe("vehicle-parts.vue", () => {
}); });
test("ForwardButtonAction triggers a router.navigate change and saves selected parts to store", async () => { test("ForwardButtonAction triggers a router.navigate change if there are child part questions", async () => {
//Arrange //Arrange
store.getters.pageData.mockReturnValueOnce(basePartResponse); store.getters.pageData.mockReturnValueOnce({
store.getters.lineItems = { glassParts: {} } partsOrQuestions: [
store.commit = jest.fn(); {
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
}
]
}
]
}
],
partQuestions: null
}
]
});
const { wrapper } = setupMocks({
mountOptionsMockData: {
router: {
navigate: jest.fn()
},
route: {
query: {
fmgPage: 'vehicle-parts',
}
},
store: {
getters: store.getters,
commit: store.commit
},
}
});
wrapper.setData({ glassParts: { "Rear-Stationary": { partNumber: 'FW03861GTYN' } } });
//Act
vehicleParts.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle-parts" } },
undefined,
(c) => c(wrapper.vm)
);
await wrapper.vm.forwardButtonAction();
//Assert
expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
});
test("ForwardButtonAction triggers a router.navigate change if there are capability questions", async () => {
//Arrange
store.getters.pageData.mockReturnValueOnce({
partsOrQuestions: [
{
glassName: "Single",
glassLocation: "Windshield",
parts: [
{
partNumber: "DB12209GTYN",
description: "heated glass, solar, 1 hole",
color: "Green Tint",
requiresRecalibration: false,
requiresCapabilityQuestions: true,
childParts: null
}
],
partQuestions: null
}
]
});
const { wrapper } = setupMocks({ const { wrapper } = setupMocks({
mountOptionsMockData: { mountOptionsMockData: {
router: { router: {
navigate: jest.fn(),
navigate: jest.fn() navigate: jest.fn()
}, },
route: { route: {
@ -251,6 +346,50 @@ describe("vehicle-parts.vue", () => {
//Assert //Assert
expect(wrapper.vm.$router.navigate).toHaveBeenCalled(); expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
}); });
test("ForwardButtonAction saves selected parts to store if no molding or capability questions", async () => {
//Arrange
store.getters.pageData.mockReturnValueOnce(basePartResponse);
store.getters.lineItems = { glassParts: {} }
const { wrapper } = setupMocks({
mountOptionsMockData: {
router: {
navigate: jest.fn()
},
route: {
query: {
fmgPage: 'vehicle-parts',
}
},
store: {
getters: store.getters,
commit: store.commit
},
navigateToHeritageFunnel: jest.fn()
}
});
wrapper.vm.$store.commit = jest.fn();
wrapper.vm.$refs.loadingModal.showModal = jest.fn();
wrapper.setData({ glassParts: { "Rear-Stationary": { partNumber: 'DB12209GTYN' } } });
//Act
vehicleParts.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle-parts" } },
undefined,
(c) => c(wrapper.vm)
);
await wrapper.vm.forwardButtonAction();
//Assert
expect(wrapper.vm.$store.commit).toHaveBeenCalled();
expect(navigateToHeritageFunnel).toHaveBeenCalled();
});
}); });
function setupMocks({ pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {} }) { function setupMocks({ pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {} }) {
@ -288,6 +427,7 @@ function setupMocks({ pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {}
wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent; wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn(); wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
wrapper.vm.$refs.loadingModal.showModal = jest.fn();
return { wrapper, apiPromise }; return { wrapper, apiPromise };
} }

162
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -1,6 +1,7 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
<div class="page-container-grouped-styles vehicle-parts"> <div class="page-container-grouped-styles vehicle-parts">
<loadingModal ref="loadingModal"/>
<funnelHeader ref="funnelHeader" cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader ref="funnelHeader" cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner <vehicleBanner
ref="vehicleBanner" ref="vehicleBanner"
@ -49,21 +50,23 @@
</template> </template>
<script> <script>
// Components // Components
import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass-part-question"; import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass-part-question";
import funnelHeader from "@/common-components/funnel-header/funnel-header"; import funnelHeader from "@/common-components/funnel-header/funnel-header";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner"; import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header"; import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import funnelFooter from "@/common-components/funnel-footer/funnel-footer"; import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import alert from "@/ux-components/alert/alert"; import alert from "@/ux-components/alert/alert";
// Supporting Files import loadingModal from '@/common-components/loading-modal/loading-modal.vue';
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; // Supporting Files
import { settleAllPromises } from "@/helpers/layout-helper"; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { fmgPageValues } from "@/router/router-constants/fmgPage-values"; import { settleAllPromises } from "@/helpers/layout-helper";
import store from "@/store"; import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
import { Form } from "vee-validate"; import { Form } from "vee-validate";
import { storeActions } from "@/constants/store-actions"; import store from "@/store";
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin"; import { storeMutations } from "@/constants/store-mutations.js";
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
export default { export default {
name: "vehicle-parts", name: "vehicle-parts",
@ -97,7 +100,6 @@ export default {
data() { data() {
return { return {
glassParts: {}, glassParts: {},
matchedParts: [],
alertWidgetData: Object, alertWidgetData: Object,
alreadyPopulatedPartsData: {}, alreadyPopulatedPartsData: {},
}; };
@ -143,7 +145,7 @@ export default {
}, },
PartsFromApi() { PartsFromApi() {
return store.getters.pageData(fmgPageValues.VEHICLE_PARTS); return this.$store.getters.pageData(fmgPageValues.VEHICLE_PARTS);
}, },
RefPrefix() { RefPrefix() {
@ -151,80 +153,85 @@ export default {
}, },
}, },
methods: { methods: {
arePagePrerequisitesValid() { arePagePrerequisitesValid() {
// Check if isRepair is populated and if the pageData we need is here (Parts data) // Check if isRepair is populated and if the pageData we need is here (Parts data)
return store.getters.damage.isRepair != null && return store.getters.damage.isRepair != null &&
Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS)).length !== 0; Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS)).length !== 0;
}, },
backButtonAction() { backButtonAction() {
const hasPartQuestions = this.hasPartQuestions(this.$store.getters.pageData(fmgPageValues.PART_QUESTIONS).partsOrQuestions); const hasPartQuestions = this.hasPartQuestions(this.$store.getters.pageData(fmgPageValues.PART_QUESTIONS).partsOrQuestions);
const backNavigationScenario = hasPartQuestions ? this.navigationScenarios.CLICKED_BACK_WITH_PART_QUESTION_ANSWERS : this.navigationScenarios.CLICKED_BACK_WITHOUT_PART_QUESTION_ANSWERS; const backNavigationScenario = hasPartQuestions ? this.navigationScenarios.CLICKED_BACK_WITH_PART_QUESTION_ANSWERS : this.navigationScenarios.CLICKED_BACK_WITHOUT_PART_QUESTION_ANSWERS;
this.$router.navigate( this.$router.navigate(
backNavigationScenario, backNavigationScenario,
this.$route this.$route
); );
}, },
async forwardButtonAction() { async forwardButtonAction() {
let isMoldingQuestions = false; const matchedParts = [];
// Match them to the parts from the API. // Match them to the parts from the API.
for (let [key, value] of Object.entries( for (let [key, value] of Object.entries(
this.PartsFromApi.partsOrQuestions this.PartsFromApi.partsOrQuestions
)) { )) {
for (let [partKey, partValue] of Object.entries(value.parts)) { for (let [partKey, partValue] of Object.entries(value.parts)) {
const currentPart = this.PartsFromApi.partsOrQuestions[key].parts[partKey]; const currentPart = this.PartsFromApi.partsOrQuestions[key].parts[partKey];
const isMatched = this.selectedGlassPartNumbers.some( const isMatched = this.selectedGlassPartNumbers.some(
(p) => p === currentPart.partNumber (p) => p === currentPart.partNumber
); );
if (isMatched) { if (isMatched) {
this.matchedParts.push(currentPart); matchedParts.push({
// check if there are childPartQuestions (for molding-questions) "glassLocation": value.glassLocation,
if (Array.isArray(currentPart.childPartQuestions) && currentPart.childPartQuestions.length > 0) { "glassName": value.glassName,
isMoldingQuestions = true "parts": [currentPart]
});
} }
} }
} }
}
// If no parts could be matched, throw an error (isForwardActionDisabled is based off of this.matchedParts) const hasChildPartQuestions = this.hasChildPartQuestions(matchedParts);
if (this.isForwardActionDisabled) { const hasCapabilityQuestions = this.hasCapabilityQuestions(matchedParts);
this.$refs.funnelFooter.removeLoader();
throw new Error("Could not match any parts to the selected parts");
}
// Navigate to the next page // If no parts could be matched, throw an error (isForwardActionDisabled is based off of matchedParts)
if (isMoldingQuestions) { if (this.isForwardActionDisabled) {
this.$router.navigate( this.$refs.funnelFooter.removeLoader();
this.navigationScenarios.HAS_MOLDING_QUESTIONS, throw new Error("Could not match any parts to the selected parts");
this.$route, }
{},
{},
this.moldingQuestionsForStore
);
}
else {
// Save parts to the store
await this.dispatchStoreAction(
storeActions.SAVE_GLASS_PARTS,
this.matchedParts,
false
);
// 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 // Navigate to the next page
if (hasChildPartQuestions) {
this.$router.navigate(
this.navigationScenarios.HAS_MOLDING_QUESTIONS,
this.$route,
{},
{},
{partsOrQuestions: matchedParts}
);
} else if (hasCapabilityQuestions) {
this.$router.navigate(
this.navigationScenarios.HAS_CAPABILITY_QUESTIONS,
this.$route,
{},
{},
{partsOrQuestions: matchedParts}
);
} else {
// if single parts only
const collectedGlassParts = this.reducedGlassPartsArray(matchedParts);
// save to store lineItems.glassParts
this.$store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts);
// go to heritage quote page
this.$refs.loadingModal.showModal();
navigateToHeritageFunnel();
}
}, },
LoadInitialPartsData() { LoadInitialPartsData() {
const partsData = this.PartsFromApi; const partsData = this.PartsFromApi;
const alreadyPopulatedPartsData = const alreadyPopulatedPartsData =
this.$store.getters.lineItems.glassParts === null this.$store.getters.lineItems.glassParts === null
@ -257,6 +264,7 @@ export default {
funnelSubHeader, funnelSubHeader,
funnelFooter, funnelFooter,
alert, alert,
loadingModal,
}, },
}; };
</script> </script>

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

@ -1,4 +1,5 @@
export default { export default {
methods: { methods: {
hasPartQuestions(partsOrQuestions) { hasPartQuestions(partsOrQuestions) {
return partsOrQuestions.some(pq => pq.partQuestions?.length > 0); return partsOrQuestions.some(pq => pq.partQuestions?.length > 0);
@ -10,6 +11,33 @@ export default {
return partsOrQuestions.some(pq => { return partsOrQuestions.some(pq => {
return pq.parts?.some(part => part.childPartQuestions?.length > 0); 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
reducedGlassPartsArray(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;
} }
} }
} }

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

@ -1,4 +1,3 @@
import store from "@/store";
import { storeActions } from "@/constants/store-actions.js"; import { storeActions } from "@/constants/store-actions.js";
import { storeMutations } from "@/constants/store-mutations.js"; import { storeMutations } from "@/constants/store-mutations.js";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper"; import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
@ -9,12 +8,13 @@ export default {
methods: { methods: {
async navigateForwardWithSingleCarMatch() { async navigateForwardWithSingleCarMatch() {
const result = await this.dispatchStoreAction(storeActions.GET_PARTS_OR_QUESTIONS); const result = await this.dispatchStoreAction(storeActions.GET_PARTS_OR_QUESTIONS);
const partsOrQuestions = result.data.partsOrQuestions; const partsOrQuestions = result.data.partsOrQuestions;
const hasPartsQuestions = this.hasPartQuestions(partsOrQuestions); const hasPartsQuestions = this.hasPartQuestions(partsOrQuestions);
const hasGlassLocationWithMultipleParts = this.hasGlassLocationWithMultipleParts(partsOrQuestions); const hasGlassLocationWithMultipleParts = this.hasGlassLocationWithMultipleParts(partsOrQuestions);
const hasChildPartQuestions = this.hasChildPartQuestions(partsOrQuestions); const hasChildPartQuestions = this.hasChildPartQuestions(partsOrQuestions);
const hasCapabilityQuestions = this.hasCapabilityQuestions(partsOrQuestions);
// TODO - ADD CHECK FOR CAPABILITY QUESTIONS TO SEE IF NAVIGATE TO CAPABILITY-QUESTIONS
if (hasPartsQuestions) { if (hasPartsQuestions) {
this.$router.navigate(this.navigationScenarios.SELECTED_VIN_WITH_PART_QUESTIONS, this.$route, {}, {}, result.data); this.$router.navigate(this.navigationScenarios.SELECTED_VIN_WITH_PART_QUESTIONS, this.$route, {}, {}, result.data);
@ -25,8 +25,16 @@ export default {
else if (hasChildPartQuestions) { else if (hasChildPartQuestions) {
this.$router.navigate(this.navigationScenarios.SELECTED_VIN_WITH_MOLDING_QUESTIONS, this.$route, {}, {}, result.data); 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 { else {
store.commit(storeMutations.UPDATE_GLASS_PARTS, result.data); // if single parts only
const collectedGlassParts = this.reducedGlassPartsArray(result.data.partsOrQuestions);
// save to store lineItems.glassParts
this.$store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts);
// go to heritage quote page
this.$refs.loadingModal.showModal(); this.$refs.loadingModal.showModal();
navigateToHeritageFunnel(); navigateToHeritageFunnel();
} }

180
src/mixins/vin-pages-mixin.spec.js
View file

@ -94,7 +94,7 @@ describe("vin-pages-mixin", () => {
"description": "driver side, front", "description": "driver side, front",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
} }
], ],
@ -109,7 +109,7 @@ describe("vin-pages-mixin", () => {
"description": "driver side, 1 hole", "description": "driver side, 1 hole",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
} }
], ],
@ -147,7 +147,7 @@ describe("vin-pages-mixin", () => {
"description": "heated glass, stationary", "description": "heated glass, stationary",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
} }
], ],
@ -202,7 +202,7 @@ describe("vin-pages-mixin", () => {
"description": "driver side, front", "description": "driver side, front",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
} }
], ],
@ -217,7 +217,7 @@ describe("vin-pages-mixin", () => {
"description": "driver side, 1 hole", "description": "driver side, 1 hole",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
} }
], ],
@ -232,7 +232,7 @@ describe("vin-pages-mixin", () => {
"description": "driver side, body side, 1 hole", "description": "driver side, body side, 1 hole",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
} }
], ],
@ -247,7 +247,7 @@ describe("vin-pages-mixin", () => {
"description": "heated glass, stationary", "description": "heated glass, stationary",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
} }
], ],
@ -302,7 +302,7 @@ describe("vin-pages-mixin", () => {
"description": "driver side, front", "description": "driver side, front",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
} }
], ],
@ -317,7 +317,7 @@ describe("vin-pages-mixin", () => {
"description": "driver side, 1 hole", "description": "driver side, 1 hole",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
}, },
{ {
@ -325,7 +325,7 @@ describe("vin-pages-mixin", () => {
"description": "driver side, 1 hole", "description": "driver side, 1 hole",
"color": "Gray Tint Privacy", "color": "Gray Tint Privacy",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
} }
], ],
@ -340,7 +340,7 @@ describe("vin-pages-mixin", () => {
"description": "driver side, body side, 1 hole", "description": "driver side, body side, 1 hole",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
}, },
{ {
@ -348,7 +348,7 @@ describe("vin-pages-mixin", () => {
"description": "driver side, body side, 1 hole", "description": "driver side, body side, 1 hole",
"color": "Gray Tint Privacy", "color": "Gray Tint Privacy",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
} }
], ],
@ -363,7 +363,7 @@ describe("vin-pages-mixin", () => {
"description": "heated glass, stationary", "description": "heated glass, stationary",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
}, },
{ {
@ -371,7 +371,7 @@ describe("vin-pages-mixin", () => {
"description": "heated glass, stationary", "description": "heated glass, stationary",
"color": "Gray Tint Privacy", "color": "Gray Tint Privacy",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
}, },
{ {
@ -379,7 +379,7 @@ describe("vin-pages-mixin", () => {
"description": "stationary", "description": "stationary",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
}, },
{ {
@ -387,7 +387,7 @@ describe("vin-pages-mixin", () => {
"description": "heated glass, movable, 8 hole", "description": "heated glass, movable, 8 hole",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
}, },
{ {
@ -395,7 +395,7 @@ describe("vin-pages-mixin", () => {
"description": "heated glass, movable, 8 hole", "description": "heated glass, movable, 8 hole",
"color": "Gray Tint Privacy", "color": "Gray Tint Privacy",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
} }
], ],
@ -429,7 +429,7 @@ describe("vin-pages-mixin", () => {
"description": "heated glass, solar, antenna", "description": "heated glass, solar, antenna",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
}, },
{ {
@ -437,7 +437,7 @@ describe("vin-pages-mixin", () => {
"description": "heated glass, solar, antenna, w/diversity antenna", "description": "heated glass, solar, antenna, w/diversity antenna",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
} }
], ],
@ -469,7 +469,7 @@ describe("vin-pages-mixin", () => {
"description": "solar, 3rd visor band", "description": "solar, 3rd visor band",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": [ "childParts": [
{ {
"partNumber": "MWF03647", "partNumber": "MWF03647",
@ -490,7 +490,7 @@ describe("vin-pages-mixin", () => {
"description": "solar, driver side, rear, ex models and above", "description": "solar, driver side, rear, ex models and above",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
} }
], ],
@ -505,7 +505,7 @@ describe("vin-pages-mixin", () => {
"description": "solar, driver side, front, ex models and above", "description": "solar, driver side, front, ex models and above",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
} }
], ],
@ -520,7 +520,7 @@ describe("vin-pages-mixin", () => {
"description": "solar, driver side, rear", "description": "solar, driver side, rear",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
} }
], ],
@ -535,7 +535,7 @@ describe("vin-pages-mixin", () => {
"description": "heated glass, solar, antenna", "description": "heated glass, solar, antenna",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
}, },
{ {
@ -543,7 +543,7 @@ describe("vin-pages-mixin", () => {
"description": "heated glass, solar, antenna, w/diversity antenna", "description": "heated glass, solar, antenna, w/diversity antenna",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
} }
], ],
@ -575,7 +575,7 @@ describe("vin-pages-mixin", () => {
"description": "solar", "description": "solar",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
} }
], ],
@ -590,7 +590,7 @@ describe("vin-pages-mixin", () => {
"description": "solar, driver side, rear", "description": "solar, driver side, rear",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
}, },
{ {
@ -598,7 +598,7 @@ describe("vin-pages-mixin", () => {
"description": "solar, driver side, rear", "description": "solar, driver side, rear",
"color": "Gray Tint Privacy", "color": "Gray Tint Privacy",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
} }
], ],
@ -613,7 +613,7 @@ describe("vin-pages-mixin", () => {
"description": "solar, driver side, front", "description": "solar, driver side, front",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
}, },
{ {
@ -621,7 +621,7 @@ describe("vin-pages-mixin", () => {
"description": "solar, driver side, front, laminated, soundproofing", "description": "solar, driver side, front, laminated, soundproofing",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
} }
], ],
@ -636,7 +636,7 @@ describe("vin-pages-mixin", () => {
"description": "solar, driver side, encap", "description": "solar, driver side, encap",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
}, },
{ {
@ -644,7 +644,7 @@ describe("vin-pages-mixin", () => {
"description": "solar, driver side, encap", "description": "solar, driver side, encap",
"color": "Gray Tint Privacy", "color": "Gray Tint Privacy",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
}, },
{ {
@ -652,7 +652,7 @@ describe("vin-pages-mixin", () => {
"description": "solar, antenna, driver side, encap", "description": "solar, antenna, driver side, encap",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
}, },
{ {
@ -660,7 +660,7 @@ describe("vin-pages-mixin", () => {
"description": "solar, antenna, driver side, encap", "description": "solar, antenna, driver side, encap",
"color": "Gray Tint Privacy", "color": "Gray Tint Privacy",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
}, },
{ {
@ -668,7 +668,7 @@ describe("vin-pages-mixin", () => {
"description": "solar, driver side, encap, chrome molding", "description": "solar, driver side, encap, chrome molding",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
}, },
{ {
@ -676,7 +676,7 @@ describe("vin-pages-mixin", () => {
"description": "solar, driver side, encap, chrome molding", "description": "solar, driver side, encap, chrome molding",
"color": "Gray Tint Privacy", "color": "Gray Tint Privacy",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
}, },
{ {
@ -684,7 +684,7 @@ describe("vin-pages-mixin", () => {
"description": "solar, antenna, driver side, encap, chrome molding", "description": "solar, antenna, driver side, encap, chrome molding",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
}, },
{ {
@ -692,7 +692,7 @@ describe("vin-pages-mixin", () => {
"description": "solar, antenna, driver side, encap, chrome molding", "description": "solar, antenna, driver side, encap, chrome molding",
"color": "Gray Tint Privacy", "color": "Gray Tint Privacy",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
} }
], ],
@ -707,7 +707,7 @@ describe("vin-pages-mixin", () => {
"description": "heated glass, solar, 1 hole", "description": "heated glass, solar, 1 hole",
"color": "Green Tint", "color": "Green Tint",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
}, },
{ {
@ -715,7 +715,7 @@ describe("vin-pages-mixin", () => {
"description": "heated glass, solar, 1 hole", "description": "heated glass, solar, 1 hole",
"color": "Gray Tint Privacy", "color": "Gray Tint Privacy",
"requiresRecalibration": false, "requiresRecalibration": false,
"requiresCapabilityQuestions": false, "requiresCapabilityQuestions": true,
"childParts": null "childParts": null
} }
], ],
@ -736,6 +736,94 @@ describe("vin-pages-mixin", () => {
}); });
}); });
describe("should go to molding-questions", () => {
test("single glass location has child part questions => go to molding-questions", async () => {
// Arrange
const partsOrQuestions = [
{
"glassName": "Stationary",
"glassLocation": "Rear",
"parts": [
{
"partNumber": "FB25724GTYN",
"description": "heated glass, solar, antenna",
"color": "Green Tint",
"requiresRecalibration": false,
"requiresCapabilityQuestions": true,
"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
}
]
}
]
}
],
"partQuestions": null
}
];
const { wrapper } = setupMocks({
partsOrQuestions: partsOrQuestions
});
// Act
await wrapper.vm.navigateForwardWithSingleCarMatch();
// Assert
expect(wrapper.vm.$router.navigate).toHaveBeenCalledTimes(1);
expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(navigationScenarios.SELECTED_VIN_WITH_MOLDING_QUESTIONS, wrapper.vm.$route, {}, {}, { partsOrQuestions });
});
});
describe("should go to capability-questions", () => {
test("single glass location has no child part questions but requiresCapabilityQuestions is true => go to capability-questions", async () => {
// Arrange
const partsOrQuestions = [
{
"glassName": "Stationary",
"glassLocation": "Rear",
"parts": [
{
"partNumber": "FB25724GTYN",
"description": "heated glass, solar, antenna",
"color": "Green Tint",
"requiresRecalibration": false,
"requiresCapabilityQuestions": true,
"childParts": null,
"childPartQuestions": null
}
],
"partQuestions": null
}
];
const { wrapper } = setupMocks({
partsOrQuestions: partsOrQuestions
});
// Act
await wrapper.vm.navigateForwardWithSingleCarMatch();
// Assert
expect(wrapper.vm.$router.navigate).toHaveBeenCalledTimes(1);
expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(navigationScenarios.SELECTED_VIN_WITH_CAPABILITY_QUESTIONS, wrapper.vm.$route, {}, {}, { partsOrQuestions });
});
});
describe("should go to heritage funnel", () => { describe("should go to heritage funnel", () => {
test("single glass location selected, has no part questions and has one part => go to heritage funnel", async () => { test("single glass location selected, has no part questions and has one part => go to heritage funnel", async () => {
// Arrange // Arrange
@ -864,14 +952,17 @@ describe("vin-pages-mixin", () => {
partsOrQuestions: partsOrQuestions partsOrQuestions: partsOrQuestions
}); });
store.commit = jest.fn(); wrapper.vm.$store.commit = jest.fn();
const collectedGlassParts = wrapper.vm.reducedGlassPartsArray(partsOrQuestions);
// Act // Act
await wrapper.vm.navigateForwardWithSingleCarMatch(); await wrapper.vm.navigateForwardWithSingleCarMatch();
// Assert // Assert
expect(store.commit).toHaveBeenCalledTimes(1); expect(wrapper.vm.$store.commit).toHaveBeenCalledTimes(1);
expect(store.commit).toHaveBeenCalledWith(storeMutations.UPDATE_GLASS_PARTS, { partsOrQuestions }) expect(wrapper.vm.$store.commit).toHaveBeenCalledWith(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts)
expect(wrapper.vm.$refs.loadingModal.showModal).toHaveBeenCalledTimes(1); expect(wrapper.vm.$refs.loadingModal.showModal).toHaveBeenCalledTimes(1);
expect(navigateToHeritageFunnel).toHaveBeenCalledTimes(1); expect(navigateToHeritageFunnel).toHaveBeenCalledTimes(1);
}); });
@ -895,6 +986,9 @@ function setupMocks({ partsOrQuestions = [] }) {
router: { router: {
navigate: jest.fn() navigate: jest.fn()
}, },
store: {
commit: jest.fn()
}
}); });
const mockVinComponent = { const mockVinComponent = {

1
src/router/router-constants/fmgPage-values.js
View file

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

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

@ -11,6 +11,7 @@ const navigationScenarios = {
SELECTED_VIN_WITH_PART_QUESTIONS: "SELECTED_VIN_WITH_PART_QUESTIONS", SELECTED_VIN_WITH_PART_QUESTIONS: "SELECTED_VIN_WITH_PART_QUESTIONS",
SELECTED_VIN_WITH_MULTIPLE_PARTS: "SELECTED_VIN_WITH_MULTIPLE_PARTS", SELECTED_VIN_WITH_MULTIPLE_PARTS: "SELECTED_VIN_WITH_MULTIPLE_PARTS",
SELECTED_VIN_WITH_MOLDING_QUESTIONS: "SELECTED_VIN_WITH_MOLDING_QUESTIONS", 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_SINGLE_PART: "CONTINUING_WITH_SINGLE_PART",
CONTINUING_WITH_MULTIPLE_VEHICLES: "CONTINUING_WITH_MULTIPLE_VEHICLES", CONTINUING_WITH_MULTIPLE_VEHICLES: "CONTINUING_WITH_MULTIPLE_VEHICLES",
SELECTED_VIN_HAS_MISMATCHED_GLASS: "SELECTED_VIN_HAS_MISMATCHED_GLASS", SELECTED_VIN_HAS_MISMATCHED_GLASS: "SELECTED_VIN_HAS_MISMATCHED_GLASS",
@ -24,6 +25,7 @@ const navigationScenarios = {
CLICKED_BACK_WITH_PART_QUESTION_ANSWERS: "CLICKED_BACK_WITH_PART_QUESTION_ANSWERS", CLICKED_BACK_WITH_PART_QUESTION_ANSWERS: "CLICKED_BACK_WITH_PART_QUESTION_ANSWERS",
CLICKED_BACK_WITHOUT_PART_QUESTION_ANSWERS: "CLICKED_BACK_WITHOUT_PART_QUESTION_ANSWERS", CLICKED_BACK_WITHOUT_PART_QUESTION_ANSWERS: "CLICKED_BACK_WITHOUT_PART_QUESTION_ANSWERS",
HAS_MOLDING_QUESTIONS: "HAS_MOLDING_QUESTIONS", HAS_MOLDING_QUESTIONS: "HAS_MOLDING_QUESTIONS",
HAS_CAPABILITY_QUESTIONS: "HAS_CAPABILITY_QUESTIONS",
}; };
export { navigationScenarios }; export { navigationScenarios };

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

@ -139,6 +139,10 @@ const routingTable = function(store) {
{ {
scenario: navigationScenarios.SELECTED_VIN_WITH_MOLDING_QUESTIONS, scenario: navigationScenarios.SELECTED_VIN_WITH_MOLDING_QUESTIONS,
destinationFmgPageValue: fmgPageValues.MOLDING_QUESTIONS destinationFmgPageValue: fmgPageValues.MOLDING_QUESTIONS
},
{
scenario: navigationScenarios.SELECTED_VIN_WITH_CAPABILITY_QUESTIONS,
destinationFmgPageValue: fmgPageValues.CAPABILITY_QUESTIONS
} }
], ],
}, },
@ -164,6 +168,10 @@ const routingTable = function(store) {
{ {
scenario: navigationScenarios.SELECTED_VIN_WITH_MOLDING_QUESTIONS, scenario: navigationScenarios.SELECTED_VIN_WITH_MOLDING_QUESTIONS,
destinationFmgPageValue: fmgPageValues.MOLDING_QUESTIONS destinationFmgPageValue: fmgPageValues.MOLDING_QUESTIONS
},
{
scenario: navigationScenarios.SELECTED_VIN_WITH_CAPABILITY_QUESTIONS,
destinationFmgPageValue: fmgPageValues.CAPABILITY_QUESTIONS
} }
], ],
}, },
@ -193,6 +201,10 @@ const routingTable = function(store) {
{ {
scenario: navigationScenarios.SELECTED_VIN_WITH_MOLDING_QUESTIONS, scenario: navigationScenarios.SELECTED_VIN_WITH_MOLDING_QUESTIONS,
destinationFmgPageValue: fmgPageValues.MOLDING_QUESTIONS destinationFmgPageValue: fmgPageValues.MOLDING_QUESTIONS
},
{
scenario: navigationScenarios.SELECTED_VIN_WITH_CAPABILITY_QUESTIONS,
destinationFmgPageValue: fmgPageValues.CAPABILITY_QUESTIONS
} }
], ],
}, },
@ -215,6 +227,14 @@ const routingTable = function(store) {
scenario: navigationScenarios.SELECTED_VIN_WITH_MULTIPLE_PARTS, scenario: navigationScenarios.SELECTED_VIN_WITH_MULTIPLE_PARTS,
destinationFmgPageValue: fmgPageValues.VEHICLE_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, scenario: navigationScenarios.SELECTED_PROVIDE_VIN_DIFFERENT_WAY,
destinationFmgPageValue: fmgPageValues.ESTIMATE destinationFmgPageValue: fmgPageValues.ESTIMATE
@ -257,6 +277,10 @@ const routingTable = function(store) {
scenario: navigationScenarios.HAS_MOLDING_QUESTIONS, scenario: navigationScenarios.HAS_MOLDING_QUESTIONS,
destinationFmgPageValue: fmgPageValues.MOLDING_QUESTIONS, destinationFmgPageValue: fmgPageValues.MOLDING_QUESTIONS,
}, },
{
scenario: navigationScenarios.HAS_CAPABILITY_QUESTIONS,
destinationFmgPageValue: fmgPageValues.CAPABILITY_QUESTIONS,
},
{ {
scenario: navigationScenarios.ANSWERED_QUESTIONS_WITH_SINGLE_PART, scenario: navigationScenarios.ANSWERED_QUESTIONS_WITH_SINGLE_PART,
destinationFmgPageValue: fmgPageValues.QUOTE, destinationFmgPageValue: fmgPageValues.QUOTE,
@ -265,6 +289,19 @@ const routingTable = function(store) {
}, },
{ {
fmgPageValue: fmgPageValues.MOLDING_QUESTIONS, 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: [ maps: [
{ {
scenario: navigationScenarios.CLICKED_BACK, scenario: navigationScenarios.CLICKED_BACK,

3
src/store/index.js
View file

@ -48,8 +48,7 @@ const getDefaultState = () => {
partQuestionAnswers: null, partQuestionAnswers: null,
}, },
lineItems: { lineItems: {
glassParts: null, glassParts: null
otherParts: null
}, },
payment: { payment: {
isInsurance: null, isInsurance: null,