From c167f1887a280c942d440bea5749c79af94f0b4b Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Thu, 9 Jun 2022 16:51:59 -0400 Subject: [PATCH 01/14] CSR-480: clean up some faulty logic I discovered that was only clearing answers if multi-select --- .../button-question/button-question.spec.js | 3 ++- .../button-question/button-question.vue | 11 ++++------- .../list-button-horizontal/list-button-horizontal.vue | 2 +- src/ux-components/list-button/list-button.vue | 2 +- src/ux-components/list-card/list-card.vue | 2 +- 5 files changed, 9 insertions(+), 11 deletions(-) diff --git a/src/common-components/button-question/button-question.spec.js b/src/common-components/button-question/button-question.spec.js index b70304035..9cf75368e 100644 --- a/src/common-components/button-question/button-question.spec.js +++ b/src/common-components/button-question/button-question.spec.js @@ -112,7 +112,8 @@ describe("buttonQuestion.vue", () => { const wrapper = shallowMount(buttonQuestion, setupMocks({})); await wrapper.setProps({ answers: ["2022", "2021", "2020"], - isMultiSelect: false + isMultiSelect: false, + modelValue: [] }); const val = { checkValue: true, value: "2021", } wrapper.vm.handleCheckedChanged(val); diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 07efe470e..de00d3ce0 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -133,17 +133,14 @@ export default { return answer.Name ? answer.Name : answer; }, handleCheckedChanged(val) { - - if(this.isMultiSelect && this.selectedValues) { - // Add or remove item to array of data to emit - const newSelectedValues = this.selectedValues; - + if(this.selectingInitiatesLoad) { + this.selectedValues = [val.value]; + } else { if(Array.isArray(this.selectedValues)) { + const newSelectedValues = this.selectedValues; val.checkValue ? newSelectedValues.push(val.value) : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1); this.selectedValues = newSelectedValues; } - } else { - this.selectedValues = [val.value]; } }, }, diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue index eef4be443..0938bf62d 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue @@ -92,7 +92,7 @@ export default { : this.selectedValues[0]; } }, - unmounted() { // needed to clear this button's selectedValues if it is removed + unmounted() { // needed to clear this button's selectedValues if it is removed to keep validation in sync this.checkValue = false; this.handleCheckChange(); }, diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index f09384934..a15cbb38c 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -92,7 +92,7 @@ export default { : this.selectedValues[0]; } }, - unmounted() { // needed to clear this button's selectedValues if it is removed + unmounted() { // needed to clear this button's selectedValues if it is removed to keep validation in sync this.checkValue = false; this.handleCheckChange(); }, diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue index 264d7c299..ac88c9b8e 100644 --- a/src/ux-components/list-card/list-card.vue +++ b/src/ux-components/list-card/list-card.vue @@ -99,7 +99,7 @@ export default { : this.selectedValues[0]; } }, - unmounted() { // needed to clear this button's selectedValues if it is removed + unmounted() { // needed to clear this button's selectedValues if it is removed to keep validation in sync this.checkValue = false; this.handleCheckChange(); }, From f8df9b651294d01326e97f8fb0b051cf074492ef Mon Sep 17 00:00:00 2001 From: FrankRua Date: Fri, 10 Jun 2022 12:34:32 -0400 Subject: [PATCH 02/14] reset state on timeout --- src/router/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/router/index.js b/src/router/index.js index 74ee110de..2b2d09859 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -46,6 +46,7 @@ const routes = [ // If the saved session has timed out, clear the session, execute 404 logic. if (getFunnelCookie() !== null && !isSavedSessionStillActive()) { + await baseMixin.methods.dispatchStoreAction(storeActions.RESET_STATE); await GoToFunnelStartOn404(next); } From 4b9700716f5192fe95db90f09dfd9b3214a61e4c Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Mon, 13 Jun 2022 20:47:47 -0400 Subject: [PATCH 03/14] minor logic updates to shared list- buttons, new question-chain component --- jest.config.js | 1 + .../button-question/button-question.vue | 5 + .../question-chain/question-chain.vue | 130 ++++++++++++++++++ .../list-button-horizontal.vue | 10 +- src/ux-components/list-button/list-button.vue | 10 +- src/ux-components/list-card/list-card.vue | 10 +- 6 files changed, 160 insertions(+), 6 deletions(-) create mode 100644 src/common-components/question-chain/question-chain.vue diff --git a/jest.config.js b/jest.config.js index 0dd06d9be..3eb317d81 100644 --- a/jest.config.js +++ b/jest.config.js @@ -26,6 +26,7 @@ module.exports = { "!src/ux-components/alert\alert.vue", "!src/helpers/validation-rules.js", "!src/common-components/menu-modal/menu-modal.vue", + "!src/common-components/question-chain/question-chain", // END ], // ! means exclude from coverage. testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"], diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index de00d3ce0..7bf4d56c8 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -36,6 +36,7 @@ data-test="button" :validationRules="validationRules" :class="[suppressError ? 'alertError' : '']" + :clearOnUnmount="clearOnUnmount" /> @@ -84,6 +85,10 @@ export default { validationRules: String, suppressError: Boolean, useTextForValue: Boolean, + clearOnUnmount: { + type: Boolean, + default: true + } }, computed: { getFieldSetClasses() { diff --git a/src/common-components/question-chain/question-chain.vue b/src/common-components/question-chain/question-chain.vue new file mode 100644 index 000000000..fb61608d5 --- /dev/null +++ b/src/common-components/question-chain/question-chain.vue @@ -0,0 +1,130 @@ + + + \ No newline at end of file diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue index 0938bf62d..dfd322cb3 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue @@ -78,6 +78,10 @@ export default { validationRules: String, selectedValues: [Array, String], hasError: Boolean, + clearOnUnmount: { + type: Boolean, + default: true + } }, data() { return { @@ -93,8 +97,10 @@ export default { } }, unmounted() { // needed to clear this button's selectedValues if it is removed to keep validation in sync - this.checkValue = false; - this.handleCheckChange(); + if (this.clearOnUnmount) { + this.checkValue = false; + this.handleCheckChange(); + } }, methods: { displayLoader() { diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index a15cbb38c..861619093 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -78,6 +78,10 @@ export default { validationRules: String, selectedValues: [Array, String], hasError: Boolean, + clearOnUnmount: { + type: Boolean, + default: true + } }, data() { return { @@ -93,8 +97,10 @@ export default { } }, unmounted() { // needed to clear this button's selectedValues if it is removed to keep validation in sync - this.checkValue = false; - this.handleCheckChange(); + if (this.clearOnUnmount) { + this.checkValue = false; + this.handleCheckChange(); + } }, methods: { displayLoader() { diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue index ac88c9b8e..88aad0b6a 100644 --- a/src/ux-components/list-card/list-card.vue +++ b/src/ux-components/list-card/list-card.vue @@ -86,6 +86,10 @@ export default { selectedValues: [Array, String], modelValue: Object, hasError: Boolean, + clearOnUnmount: { + type: Boolean, + default: true + } }, data() { return { @@ -100,8 +104,10 @@ export default { } }, unmounted() { // needed to clear this button's selectedValues if it is removed to keep validation in sync - this.checkValue = false; - this.handleCheckChange(); + if (this.clearOnUnmount) { + this.checkValue = false; + this.handleCheckChange(); + } }, computed: { getLabelClasses() { From 6164be582b1f5e49aa9f9f81fff6d6f0cd1be8fd Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Mon, 13 Jun 2022 20:58:38 -0400 Subject: [PATCH 04/14] CSR-480: remove unused computeds, formatting --- .../question-chain/question-chain.vue | 83 +++++++++---------- 1 file changed, 37 insertions(+), 46 deletions(-) diff --git a/src/common-components/question-chain/question-chain.vue b/src/common-components/question-chain/question-chain.vue index fb61608d5..0be09fabf 100644 --- a/src/common-components/question-chain/question-chain.vue +++ b/src/common-components/question-chain/question-chain.vue @@ -55,15 +55,6 @@ export default { questions.unshift({}); return questions; }, - questionText() { - return this.questions[this.currentQuestion]?.questionText; - }, - questionAnswers() { - return this.questions[this.currentQuestion]?.answers; - }, - questionGroupname() { - return `${this.questionData.glassName}-${this.questionData.glassLocation}-${this.currentQuestion}`; - }, selectedValue: { get: function() { return this.modelValue; @@ -78,50 +69,50 @@ export default { } }, methods: { - getNewModelValue(returnedAnswer) { - if (!returnedAnswer || !Array.isArray(returnedAnswer)) { return false } - const lastAnswer = returnedAnswer[returnedAnswer.length - 1]; - const currentQuestion = this.questions[this.currentQuestion]; - console.log('currentQuestion: ', currentQuestion) - console.log('currentQuestion.answers: ', currentQuestion.answers) + getNewModelValue(returnedAnswer) { + if (!returnedAnswer || !Array.isArray(returnedAnswer)) { return false } + const lastAnswer = returnedAnswer[returnedAnswer.length - 1]; + const currentQuestion = this.questions[this.currentQuestion]; + console.log('currentQuestion: ', currentQuestion) + console.log('currentQuestion.answers: ', currentQuestion.answers) - if (lastAnswer.indexOf("answer-") === 0) { - // if it is an answerResult - const finalAnswer = lastAnswer.slice(7); + if (lastAnswer.indexOf("answer-") === 0) { + // if it is an answerResult + const finalAnswer = lastAnswer.slice(7); - const currentQuestionSelectedAnswer = currentQuestion.answers.find( - ({ answerResult }) => answerResult === finalAnswer - ); + const currentQuestionSelectedAnswer = currentQuestion.answers.find( + ({ answerResult }) => answerResult === finalAnswer + ); - // add current item to list of answered questions - this.answeredQuestions.push( - { - questionText: currentQuestion.questionText, - selectedAnswerText: currentQuestionSelectedAnswer.Text, - } - ); + // add current item to list of answered questions + this.answeredQuestions.push( + { + questionText: currentQuestion.questionText, + selectedAnswerText: currentQuestionSelectedAnswer.Text, + } + ); - return { - answerResult: finalAnswer, - answeredQuestions: this.answeredQuestions, - }; - } else { - const currentQuestionSelectedAnswer = currentQuestion.answers.find( - ({ nextQuestionSequence }) => nextQuestionSequence === parseInt(lastAnswer) - ); + return { + answerResult: finalAnswer, + answeredQuestions: this.answeredQuestions, + }; + } else { + const currentQuestionSelectedAnswer = currentQuestion.answers.find( + ({ nextQuestionSequence }) => nextQuestionSequence === parseInt(lastAnswer) + ); - // add current item to list of answered questions - this.answeredQuestions.push( - { - questionText: currentQuestion.questionText, - selectedAnswerText: currentQuestionSelectedAnswer.Text, - } - ); + // add current item to list of answered questions + this.answeredQuestions.push( + { + questionText: currentQuestion.questionText, + selectedAnswerText: currentQuestionSelectedAnswer.Text, + } + ); - this.currentQuestion = parseInt(lastAnswer); // update count to display next question - return false; - } + this.currentQuestion = parseInt(lastAnswer); // update count to display next question + return false; } + } }, components: { buttonQuestion, From 168a4fe5aa4ec3b3b614f2193ab0c8c823a26a62 Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Tue, 14 Jun 2022 09:27:23 -0400 Subject: [PATCH 05/14] CSR-480: remove unnecessary await/async --- src/common-components/question-chain/question-chain.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/common-components/question-chain/question-chain.vue b/src/common-components/question-chain/question-chain.vue index 0be09fabf..531cf7a8a 100644 --- a/src/common-components/question-chain/question-chain.vue +++ b/src/common-components/question-chain/question-chain.vue @@ -59,8 +59,8 @@ export default { get: function() { return this.modelValue; }, - set: async function(returnedAnswer) { - const isNewModelValueComplete = await this.getNewModelValue(returnedAnswer); + set: function(returnedAnswer) { + const isNewModelValueComplete = this.getNewModelValue(returnedAnswer); if (isNewModelValueComplete) { this.$emit("update:modelValue", isNewModelValueComplete); From 52e2290034fabdac0249744c10f81bc8a9a738ed Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Tue, 14 Jun 2022 09:29:14 -0400 Subject: [PATCH 06/14] CSR-480: remove console logs --- src/common-components/question-chain/question-chain.vue | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/common-components/question-chain/question-chain.vue b/src/common-components/question-chain/question-chain.vue index 531cf7a8a..d605d7fde 100644 --- a/src/common-components/question-chain/question-chain.vue +++ b/src/common-components/question-chain/question-chain.vue @@ -73,8 +73,6 @@ export default { if (!returnedAnswer || !Array.isArray(returnedAnswer)) { return false } const lastAnswer = returnedAnswer[returnedAnswer.length - 1]; const currentQuestion = this.questions[this.currentQuestion]; - console.log('currentQuestion: ', currentQuestion) - console.log('currentQuestion.answers: ', currentQuestion.answers) if (lastAnswer.indexOf("answer-") === 0) { // if it is an answerResult From e2c5fa96337e58cd4e62a9541c8e5eef6e37a291 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Wed, 15 Jun 2022 13:38:40 -0400 Subject: [PATCH 07/14] Fixed bug where we were not correctly checking the zip field when the vin was already populated --- src/layouts/vin-lookup/vin-lookup.vue | 47 +++++++++++++++++---------- 1 file changed, 29 insertions(+), 18 deletions(-) diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue index aaf2d016c..036277395 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -143,6 +143,7 @@ import { Form, defineRule } from "vee-validate"; import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper"; import { getFunnelCookie } from "@/helpers/heritage-integration/cookie-helper"; import vinPagesMixin from "@/mixins/vin-pages-mixin"; +import { StatusCodes } from 'http-status-codes'; // DEFINE VALIDATION RULES defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED)); @@ -203,6 +204,9 @@ export default { this.getCmsContent("FunnelFooterWidget", "ForwardButtonText") ); }, + initialVin() { + console.log("initial vin change"); + }, }, computed: { perfectMatchNewVinAlert() { @@ -260,7 +264,7 @@ export default { }, setupVinMask() { const lastSixChars = this.initialVin.substring(11, this.initialVin.length); - this.vinMask = `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`; + this.vinMask = `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`; }, arePagePrerequisitesValid() { return store.getters.vehicle.carId !== null; @@ -305,26 +309,9 @@ export default { } }, async forwardButtonAction() { - // If there is no change to the VIN entered then navigate forward without performing lookup. - if (this.vinPopulatedOnPageLoad && this.vin == this.initialVin) { - this.navigateForward(); - return; - } const zipValidation = this.validateZip(this.zip); - const vehicleLookup = this.lookupVehicle(this.vin); - const zipValidationResponse = await zipValidation; - const vehicleLookupResponse = await vehicleLookup.catch(() => { - this.vinNotFound = true; - this.$refs.funnelFooter.removeLoader(); - this.noServiceZip = false; - return false; - }); - - if (!vehicleLookupResponse) { - return; - } if (!zipValidationResponse.data.isServiceable) { this.customAlertData.zip = this.zip; @@ -334,6 +321,30 @@ export default { return; } + // If the vin has been touched and we've gotten this far it means they've entered vin or it's already been entered. + let vehicleLookupResponse; + if (this.vinTouched && this.vin != this.initialVin) { + console.log(this.vin); + + const vinToLookup = this.vinTouched ? this.vin : this.initialVin; + const vehicleLookup = this.lookupVehicle(vinToLookup); + vehicleLookupResponse = await vehicleLookup.catch((response) => { + if (response.status == StatusCodes.NOT_FOUND) { + this.vinNotFound = true; + this.$refs.funnelFooter.removeLoader(); + this.noServiceZip = false; + return false; + } + }); + + if (!vehicleLookupResponse) { + return; + } + } else { + this.navigateForward(); + return; + } + this.isCarIdDifferent = vehicleLookupResponse.data.carId !== store.getters.vehicle.carId; if (this.isCarIdDifferent && (vehicleLookupResponse.data.carId !== this.previouslyEnteredCarId)) { From 0ae55bf21af88ebbdb54586b8dd0cbb6ad0263ab Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Wed, 15 Jun 2022 14:28:54 -0400 Subject: [PATCH 08/14] Updated unit tests --- jest.config.js | 4 +-- src/layouts/vin-lookup/vin-lookup.spec.js | 40 +++++++++++++++++++++-- src/layouts/vin-lookup/vin-lookup.vue | 5 ++- 3 files changed, 42 insertions(+), 7 deletions(-) diff --git a/jest.config.js b/jest.config.js index a511fdc02..6662c43cf 100644 --- a/jest.config.js +++ b/jest.config.js @@ -6,14 +6,14 @@ module.exports = { transform: { "^.+\\.vue$": "vue-jest" }, moduleFileExtensions: ["js", "vue"], collectCoverageFrom: [ - "src/**/*.{js,vue}", + //"src/**/*.{js,vue}", "!src/main.js", "!src/constants/*.js", "!src/router/**/*.js", "!src/helpers/unit-test-helper.js", "!src/layouts/component-test/component-test.vue", "!src/layouts/form-test/form-test.vue", - "!src/layouts/vin-lookup/vin-lookup.vue", + "src/layouts/vin-lookup/vin-lookup.vue", "!src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue", "!src/layouts/vehicle-damage/windshield-options/windshield-options.vue", "!src/layouts/part-questions/**/*.vue", diff --git a/src/layouts/vin-lookup/vin-lookup.spec.js b/src/layouts/vin-lookup/vin-lookup.spec.js index 1c580f4a6..e782f345e 100644 --- a/src/layouts/vin-lookup/vin-lookup.spec.js +++ b/src/layouts/vin-lookup/vin-lookup.spec.js @@ -69,9 +69,38 @@ describe("vin-lookup.vue", () => { expect(wrapper.vm.navigateForward).toHaveBeenCalled(); }); + it("Should do a VIN lookup if the user has clicked on the VIN field and entered a new VIN or changed a previously matched VIN.", async () => { + // Arrange + const { wrapper } = setupMocks({}); + wrapper.vm.vinTouched = true; + wrapper.vm.vin = "foo"; + wrapper.vm.initialVin = "!foo"; + + wrapper.vm.navigateForward = jest.fn(); + const vehicleLookupApiResponse = { + data: { + carId: 'new carId' // does not match the store value + } + }; + const vinPromise = Promise.resolve(vehicleLookupApiResponse); + + wrapper.vm.lookupVehicle = jest.fn().mockImplementation(() => vinPromise); + + // Act + await wrapper.vm.forwardButtonAction(); + + //Assert + expect(wrapper.vm.lookupVehicle).toHaveBeenCalled(); + }); + it("Should not call navigateForward() if the store carId does not match the vin response carId and forward button is clicked", async () => { // Arrange const { wrapper } = setupMocks({}); + // New lookup + wrapper.vm.vinTouched = true; + wrapper.vm.vin = ""; + wrapper.vm.initialVin = "foo"; + const vehicleLookupApiResponse = { data: { carId: 'new carId' // does not match the store value @@ -138,14 +167,21 @@ describe("vin-lookup.vue", () => { it("Should not call navigateForward() when forward button is clicked but lookupVehicle errors out.", async () => { // Arrange const { wrapper } = setupMocks({}); + wrapper.vm.vinTouched = true; + wrapper.vm.vin = "foo"; + wrapper.vm.initialVin = "!foo"; + const vehicleLookupApiResponse = { - data: { + status: { carId: 'new carId' // does not match the store value } }; const vinPromise = Promise.reject(vehicleLookupApiResponse); - wrapper.vm.lookupVehicle = jest.fn().mockImplementation(() => vinPromise); + const response = { + status: 404 + }; + wrapper.vm.lookupVehicle = jest.fn().mockImplementation((response) => vinPromise); wrapper.vm.navigateForward = jest.fn(); wrapper.vm.previouslyEnteredCarId = 'new carId'; diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue index 851b5e012..699856b79 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -320,11 +320,10 @@ export default { return; } - // If the vin has been touched and we've gotten this far it means they've entered vin or it's already been entered. + // If the user has clicked on the VIN field, either they are doing a new VIN lookup or changing the VIN previously matched. + // Therefore we need to do a VIN Lookup let vehicleLookupResponse; if (this.vinTouched && this.vin != this.initialVin) { - console.log(this.vin); - const vinToLookup = this.vinTouched ? this.vin : this.initialVin; const vehicleLookup = this.lookupVehicle(vinToLookup); vehicleLookupResponse = await vehicleLookup.catch((response) => { From 3357772a11fb15241ee286cb4605899326a36e15 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Wed, 15 Jun 2022 14:34:14 -0400 Subject: [PATCH 09/14] Updated unit tests 2 --- jest.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/jest.config.js b/jest.config.js index 6662c43cf..a511fdc02 100644 --- a/jest.config.js +++ b/jest.config.js @@ -6,14 +6,14 @@ module.exports = { transform: { "^.+\\.vue$": "vue-jest" }, moduleFileExtensions: ["js", "vue"], collectCoverageFrom: [ - //"src/**/*.{js,vue}", + "src/**/*.{js,vue}", "!src/main.js", "!src/constants/*.js", "!src/router/**/*.js", "!src/helpers/unit-test-helper.js", "!src/layouts/component-test/component-test.vue", "!src/layouts/form-test/form-test.vue", - "src/layouts/vin-lookup/vin-lookup.vue", + "!src/layouts/vin-lookup/vin-lookup.vue", "!src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue", "!src/layouts/vehicle-damage/windshield-options/windshield-options.vue", "!src/layouts/part-questions/**/*.vue", From 8e091816295d07ec0fc16e0f3aaa782599390d5e Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Wed, 15 Jun 2022 15:10:58 -0400 Subject: [PATCH 10/14] Removed unused watch for initialVin --- src/layouts/vin-lookup/vin-lookup.vue | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue index 699856b79..29aeda5e4 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -203,9 +203,6 @@ export default { this.getCmsContent("FunnelFooterWidget", "ForwardButtonText") ); }, - initialVin() { - console.log("initial vin change"); - }, }, computed: { perfectMatchNewVinAlert() { From d6102ca1bc0e18662728b038577322a61f9d2343 Mon Sep 17 00:00:00 2001 From: Mark Harris Date: Wed, 15 Jun 2022 15:17:25 -0400 Subject: [PATCH 11/14] treat ancillary parts different than glass parts --- src/constants/store-mutations.js | 4 ++-- src/layouts/part-questions/part-questions.vue | 2 +- src/layouts/reveal/reveal.vue | 2 +- src/layouts/vehicle-parts/vehicle-parts.vue | 2 +- src/mixins/vin-pages-mixin.js | 2 +- src/mixins/vin-pages-mixin.spec.js | 2 +- src/store/index.js | 11 +++++------ src/store/store.spec.js | 10 +++++----- 8 files changed, 17 insertions(+), 18 deletions(-) diff --git a/src/constants/store-mutations.js b/src/constants/store-mutations.js index e8349ef40..1924b0063 100644 --- a/src/constants/store-mutations.js +++ b/src/constants/store-mutations.js @@ -14,7 +14,7 @@ const storeMutations = { UPDATE_IS_REPAIR: "updateIsRepair", UPDATE_NUMBER_OF_CHIPS: "updateNumberOfChips", UPDATE_GLASS_TO_REPLACE: "updateGlassToReplace", - UPDATE_PARTS: "updateParts", + UPDATE_GLASS_PARTS: "updateGlassParts", UPDATE_REGISTRATION_LICENSE_PLATE : "updateRegistrationLicensePlate", UPDATE_REGISTRATION_ADDRESS: "updateRegistrationAddress", UPDATE_REGISTRATION_CITY: "updateRegistrationCity", @@ -40,7 +40,7 @@ const storeMutations = { RESET_VEHICLE_STATE: "resetVehicleState", RESET_DAMAGE_STATE: "resetDamageState", RESET_REGISTRATION_STATE: "resetRegistrationState", - RESET_PARTS_STATE: "resetPartsState", + RESET_GLASS_PARTS_STATE: "resetGlassPartsState", RESET_STATE: "resetState", // OTHER MUTATIONS diff --git a/src/layouts/part-questions/part-questions.vue b/src/layouts/part-questions/part-questions.vue index 36a7d6465..af202feed 100644 --- a/src/layouts/part-questions/part-questions.vue +++ b/src/layouts/part-questions/part-questions.vue @@ -67,7 +67,7 @@ export default { }, resetDependentState() { // Set - store.commit(storeMutations.UPDATE_PARTS, null); + store.commit(storeMutations.UPDATE_GLASS_PARTS, null); // Invokes store.dispatch(storeActions.RESET_PARTS_AND_DEPS); diff --git a/src/layouts/reveal/reveal.vue b/src/layouts/reveal/reveal.vue index 200fec263..7ca9d903f 100644 --- a/src/layouts/reveal/reveal.vue +++ b/src/layouts/reveal/reveal.vue @@ -50,7 +50,7 @@ export default { }, resetDependentState() { // Set - store.commit(storeMutations.UPDATE_PARTS, null); + store.commit(storeMutations.UPDATE_GLASS_PARTS, null); // Invokes store.dispatch(storeActions.RESET_PARTS_AND_DEPS); diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue index d876f132f..24b0b5033 100644 --- a/src/layouts/vehicle-parts/vehicle-parts.vue +++ b/src/layouts/vehicle-parts/vehicle-parts.vue @@ -177,7 +177,7 @@ export default { } // Save parts to the store. - store.commit(storeMutations.UPDATE_PARTS, matchedParts); + store.commit(storeMutations.UPDATE_GLASS_PARTS, matchedParts); // Navigate to the next page. this.$router.navigateAfterSave( diff --git a/src/mixins/vin-pages-mixin.js b/src/mixins/vin-pages-mixin.js index 8f33fdf92..383bcf237 100644 --- a/src/mixins/vin-pages-mixin.js +++ b/src/mixins/vin-pages-mixin.js @@ -19,7 +19,7 @@ export default { this.$router.navigateAfterSave(this.navigationScenarios.SELECTED_VIN_WITH_MULTIPLE_PARTS, this.$route, {}, {}, result.data); } else { - store.commit(storeMutations.UPDATE_PARTS, result.data); + store.commit(storeMutations.UPDATE_GLASS_PARTS, result.data); this.$refs.loadingModal.showModal(); navigateAfterSaveToHeritageFunnel(this.$route); } diff --git a/src/mixins/vin-pages-mixin.spec.js b/src/mixins/vin-pages-mixin.spec.js index 747b62793..aef929d52 100644 --- a/src/mixins/vin-pages-mixin.spec.js +++ b/src/mixins/vin-pages-mixin.spec.js @@ -872,7 +872,7 @@ describe("vin-pages-mixin", () => { // Assert expect(store.commit).toHaveBeenCalledTimes(1); - expect(store.commit).toHaveBeenCalledWith(storeMutations.UPDATE_PARTS, { partsOrQuestions }) + expect(store.commit).toHaveBeenCalledWith(storeMutations.UPDATE_GLASS_PARTS, { partsOrQuestions }) expect(wrapper.vm.$refs.loadingModal.showModal).toHaveBeenCalledTimes(1); expect(navigateAfterSaveToHeritageFunnel).toHaveBeenCalledTimes(1); }); diff --git a/src/store/index.js b/src/store/index.js index c3e54d27b..5730adf53 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -111,7 +111,7 @@ export const mutations = { updateGlassToReplace(state, glassToReplace) { state.order.damage.glassToReplace = glassToReplace; }, - updateParts(state, partsData) { + updateGlassParts(state, partsData) { state.order.lineItems.glassParts = partsData; }, updatePageData(state, pageData) { @@ -212,9 +212,8 @@ export const mutations = { state.order.vehicle.registration.firstName = null; state.order.vehicle.registration.lastName = null; }, - resetPartsState(state) { + resetGlassPartsState(state) { state.order.lineItems.glassParts = null; - state.order.lineItems.otherParts = null; }, resetState(state) { Object.assign(state, getDefaultState()); @@ -400,14 +399,14 @@ export const actions = { }, resetDamageAndDependencies(context) { context.commit(storeMutations.RESET_DAMAGE_STATE); - context.commit(storeMutations.RESET_PARTS_STATE); + context.commit(storeMutations.RESET_GLASS_PARTS_STATE); }, resetRegistrationAndDependencies(context) { context.commit(storeMutations.RESET_REGISTRATION_STATE); - context.commit(storeMutations.RESET_PARTS_STATE) + context.commit(storeMutations.RESET_GLASS_PARTS_STATE) }, resetPartsAndDependencies(context) { - context.commit(storeMutations.RESET_PARTS_STATE); + context.commit(storeMutations.RESET_GLASS_PARTS_STATE); }, resetState(context) { context.commit(storeMutations.RESET_STATE); diff --git a/src/store/store.spec.js b/src/store/store.spec.js index bdb49ece7..c70629296 100644 --- a/src/store/store.spec.js +++ b/src/store/store.spec.js @@ -183,7 +183,7 @@ describe("Mutations", () => { const storeState = state; // Act - mutations.updateParts(storeState, { 'Windshield-Single': 'PARTNUM101'}); + mutations.updateGlassParts(storeState, { 'Windshield-Single': 'PARTNUM101'}); // Assert expect(storeState.order.lineItems.glassParts).toEqual({ 'Windshield-Single': 'PARTNUM101'}); @@ -446,7 +446,7 @@ describe("Actions", () => { await actions.resetDamageAndDependencies(context) expect(commit).toBeCalledWith(storeMutations.RESET_DAMAGE_STATE); - expect(commit).toBeCalledWith(storeMutations.RESET_PARTS_STATE); + expect(commit).toBeCalledWith(storeMutations.RESET_GLASS_PARTS_STATE); }); @@ -462,7 +462,7 @@ describe("Actions", () => { await actions.resetRegistrationAndDependencies(context) expect(commit).toBeCalledWith(storeMutations.RESET_REGISTRATION_STATE); - expect(commit).toBeCalledWith(storeMutations.RESET_PARTS_STATE); + expect(commit).toBeCalledWith(storeMutations.RESET_GLASS_PARTS_STATE); }); @@ -477,7 +477,7 @@ describe("Actions", () => { // Act await actions.resetPartsAndDependencies(context) - expect(commit).toBeCalledWith(storeMutations.RESET_PARTS_STATE); + expect(commit).toBeCalledWith(storeMutations.RESET_GLASS_PARTS_STATE); }); @@ -747,7 +747,7 @@ describe("Getters", () => { const storeState = state; // Act - mutations.updateParts(storeState, {"Rear-Stationary": 'PART101'}); + mutations.updateGlassParts(storeState, {"Rear-Stationary": 'PART101'}); // Assert expect(getters.lineItems(storeState).glassParts).toEqual({"Rear-Stationary": 'PART101'}); From 548f1124798ba7f722b8482a112b621251832d9c Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Thu, 16 Jun 2022 08:29:09 -0400 Subject: [PATCH 12/14] Fixed bug where the Perfect Match New Vin Alert wasn't appearing unless you clicked on masked Vin --- src/layouts/vin-lookup/vin-lookup.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue index 29aeda5e4..f7e7ab56e 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -206,7 +206,7 @@ export default { }, computed: { perfectMatchNewVinAlert() { - const isVinPerfectMatch = this.vinPopulatedOnPageLoad && this.vin === this.getVinFromStore(); + const isVinPerfectMatch = this.vinPopulatedOnPageLoad && this.initialVin === this.getVinFromStore(); this.updateIsCarIdDifferent(isVinPerfectMatch); return isVinPerfectMatch; }, From 5e58722d459926b00f80541504ff04e7fb348c16 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Thu, 16 Jun 2022 13:16:15 -0400 Subject: [PATCH 13/14] Ensured that both VIN Lookup and Zip Servicability alerts can be displayed at the same time --- src/layouts/vin-lookup/vin-lookup.vue | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue index f7e7ab56e..23cce0f67 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -203,6 +203,9 @@ export default { this.getCmsContent("FunnelFooterWidget", "ForwardButtonText") ); }, + zip() { + this.noServiceZip = false; + }, }, computed: { perfectMatchNewVinAlert() { @@ -309,33 +312,39 @@ export default { const zipValidation = this.validateZip(this.zip); const zipValidationResponse = await zipValidation; + // Check if Service Zip entered is servicable, if not display an alert if (!zipValidationResponse.data.isServiceable) { - this.customAlertData.zip = this.zip; - this.$refs.funnelFooter.removeLoader(); + this.customAlertData.zip = this.zip; this.noServiceZip = true; this.invalidZip = this.zip; - return; } - // If the user has clicked on the VIN field, either they are doing a new VIN lookup or changing the VIN previously matched. - // Therefore we need to do a VIN Lookup let vehicleLookupResponse; if (this.vinTouched && this.vin != this.initialVin) { + // If the user has clicked on the VIN field, either they are doing a new VIN lookup or changing the VIN previously matched. + // Therefore we need to do a VIN Lookup const vinToLookup = this.vinTouched ? this.vin : this.initialVin; const vehicleLookup = this.lookupVehicle(vinToLookup); vehicleLookupResponse = await vehicleLookup.catch((response) => { if (response.status == StatusCodes.NOT_FOUND) { this.vinNotFound = true; this.$refs.funnelFooter.removeLoader(); - this.noServiceZip = false; return false; } }); - if (!vehicleLookupResponse) { - return; - } + // if the ZIP is not serviceable or the Vin Lookup didn't return anything then don't complete the process and navigate forward. + if (!zipValidationResponse.data.isServiceable || !vehicleLookupResponse) { + this.$refs.funnelFooter.removeLoader(); + return; + } } else { + // if the ZIP is not serviceable then don't navigate forward. + if (!zipValidationResponse.data.isServiceable) { + this.$refs.funnelFooter.removeLoader(); + return; + } + this.navigateForward(); return; } From 597c67da93c133e0e51811b6211eebaced213b19 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Thu, 16 Jun 2022 14:29:58 -0400 Subject: [PATCH 14/14] Reestablished simultaneous calls to VIN Lookup and Zip Validation --- src/layouts/vin-lookup/vin-lookup.vue | 59 +++++++++++++++++---------- 1 file changed, 37 insertions(+), 22 deletions(-) diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue index 23cce0f67..392cde7f1 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -27,6 +27,7 @@ maxLength="17" :mask="vinMask" @focus="setVinTouched" + @maska="rawVinValue = $event.target.dataset.maskRawValue" /> @@ -188,6 +189,7 @@ export default { vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0, initialVin: this.getVinFromStore(), vinTouched: false, + rawVinValue: "", }; }, mounted() { @@ -209,7 +211,8 @@ export default { }, computed: { perfectMatchNewVinAlert() { - const isVinPerfectMatch = this.vinPopulatedOnPageLoad && this.initialVin === this.getVinFromStore(); + const vinToCheck = this.vinTouched ? this.rawVinValue : this.initialVin; + const isVinPerfectMatch = this.vinPopulatedOnPageLoad && vinToCheck === this.getVinFromStore(); this.updateIsCarIdDifferent(isVinPerfectMatch); return isVinPerfectMatch; }, @@ -308,23 +311,18 @@ export default { } }, async forwardButtonAction() { + let zipValidationResponse; + let vehicleLookupResponse; const zipValidation = this.validateZip(this.zip); - const zipValidationResponse = await zipValidation; - - // Check if Service Zip entered is servicable, if not display an alert - if (!zipValidationResponse.data.isServiceable) { - this.customAlertData.zip = this.zip; - this.noServiceZip = true; - this.invalidZip = this.zip; - } - let vehicleLookupResponse; - if (this.vinTouched && this.vin != this.initialVin) { + if (this.vinTouched && this.vin != this.initialVin) { // If the user has clicked on the VIN field, either they are doing a new VIN lookup or changing the VIN previously matched. - // Therefore we need to do a VIN Lookup + // Therefore we need to do a Vehicle Lookup const vinToLookup = this.vinTouched ? this.vin : this.initialVin; const vehicleLookup = this.lookupVehicle(vinToLookup); + + zipValidationResponse = await zipValidation; vehicleLookupResponse = await vehicleLookup.catch((response) => { if (response.status == StatusCodes.NOT_FOUND) { this.vinNotFound = true; @@ -333,19 +331,36 @@ export default { } }); - // if the ZIP is not serviceable or the Vin Lookup didn't return anything then don't complete the process and navigate forward. - if (!zipValidationResponse.data.isServiceable || !vehicleLookupResponse) { - this.$refs.funnelFooter.removeLoader(); - return; - } - } else { - // if the ZIP is not serviceable then don't navigate forward. + // Check if Service Zip entered is servicable, if not display an alert if (!zipValidationResponse.data.isServiceable) { - this.$refs.funnelFooter.removeLoader(); - return; + this.customAlertData.zip = this.zip; + this.noServiceZip = true; + this.invalidZip = this.zip; } + + if (!vehicleLookupResponse || !zipValidationResponse.data.isServiceable) { + this.$refs.funnelFooter.removeLoader(); + return; + } + } else { + const zipValidationResponse = await zipValidation; + + // Check if Service Zip entered is serviceable, if not display an alert + if (!zipValidationResponse.data.isServiceable) { + this.customAlertData.zip = this.zip; + this.noServiceZip = true; + this.invalidZip = this.zip; + this.$refs.funnelFooter.removeLoader(); - this.navigateForward(); + return; + + } else { + this.navigateForward(); + return; + } + } + + if (!vehicleLookupResponse) { return; }