diff --git a/jest.config.js b/jest.config.js index 7831629c1..f808293eb 100644 --- a/jest.config.js +++ b/jest.config.js @@ -11,13 +11,9 @@ module.exports = { "!src/constants/*.js", "!src/router/**/*.js", "!src/helpers/unit-test-helper.js", - "!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", - "!src/layouts/reveal/**/*.vue", - // TODO REMOVE THESE AFTER WRITING UNIT TESTS - "!src/ux-components/alert/alert.vue", - "!src/helpers/validation-rules.js", + "!src/layouts/reveal/**/*.vue" // END ], // ! means exclude from coverage. testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"], diff --git a/src/common-components/textbox-question/textbox-question.spec.js b/src/common-components/textbox-question/textbox-question.spec.js index 48f9a3a8e..b830b9783 100644 --- a/src/common-components/textbox-question/textbox-question.spec.js +++ b/src/common-components/textbox-question/textbox-question.spec.js @@ -15,7 +15,7 @@ const maska = jest.fn(); describe("textboxQuestion.vue", () => { it("Should render a text input", async () => { - // Arrange + // Arrange const wrapper = shallowMount(textboxQuestion, { global: { directives: { @@ -53,35 +53,7 @@ describe("textboxQuestion.vue", () => { expect(label.text()).toContain(questionText); }); - - it("Should render the 'questionText' data value with '⁠' after the first character of each word in the label text when disableAutoFill is true.", async () => { - // Arrange - const wrapper = shallowMount(textboxQuestion, { - global: { - directives: { - maska: maska, - } - }, - propsData: { - disableAutoFill: true, - }, - mixins: [mockMixin] - }); - // Mock CMS content ... - // Trust me, the below instance of the string "Q⁠uestion Text" actually has the ⁠ in it. You just can't see it - // Don't believe me? Copy and paste it into Google. Then inspect the search field element in Dev Tools, - // you will see "Q⁠uestion T⁠ext" - const expectedQuestionText = "Q⁠uestion T⁠ext"; - - // Act - const label = wrapper.find("label"); - - // Assert - expect(label.text()).toContain(expectedQuestionText); - - }); - it("Should return input id as the id of the input field", async () => { // Arrange const wrapper = shallowMount(textboxQuestion, { @@ -103,7 +75,7 @@ describe("textboxQuestion.vue", () => { expect(input.attributes().id).toEqual("input ID"); }); - + it("Should render the 'questionText' data value as the aria-label attribute.", async () => { // Arrange @@ -193,6 +165,6 @@ describe("textboxQuestion.vue", () => { // Assert expect(wrapper.vm.handleChange).toHaveBeenCalled; - }); + }); }); diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue index 19163110e..822548cc9 100644 --- a/src/common-components/textbox-question/textbox-question.vue +++ b/src/common-components/textbox-question/textbox-question.vue @@ -1,7 +1,6 @@ @@ -122,14 +122,14 @@ export default { firstName: this.getRegistrationFirstNameFromStore(), lastName: this.getRegistrationLastNameFromStore(), emailAddress: this.getEmailFromStore(), - }, + }, serviceZipCode: this.getServiceZipFromStore(), displayNonServiceableZipAlert: false, displayVinNotFoundAlert: false, displayMatchedDifferentVehicleAlert: false, displayVinLookupByHomeAddressNotAllowedAlert: false, previouslyEnteredCarId: "", - isSelectedGlassAvailableForVehicle: false, + isSelectedGlassAvailableForVehicle: false, customAlertData: {}, showServiceZipField: this.getServiceZipFromStore(), isZipServicable: false, @@ -150,7 +150,7 @@ export default { this.$route ); }, - attachCustomEvents() { + attachCustomEvents() { this.prependActionToMethod(this, this.forwardButtonAction, () => { this.pushEventToGA( this.$route.query[this.queryStrings.FMG_PAGE], @@ -177,7 +177,7 @@ export default { }, getRegistrationLastNameFromStore() { return store.getters.vehicle.registration.lastName; - }, + }, getEmailFromStore() { return store.getters.order.customer.emailAddress; }, @@ -189,9 +189,9 @@ export default { // Lookup VIN(s) with the provided address const vinLookupPromise = this.lookupVin( - this.customerQuestions.lastName, - this.customerQuestions.addressQuestions.streetAddress, - this.customerQuestions.addressQuestions.zipCode, + this.customerQuestions.lastName, + this.customerQuestions.addressQuestions.streetAddress, + this.customerQuestions.addressQuestions.zipCode, this.customerQuestions.addressQuestions.state ); @@ -200,8 +200,8 @@ export default { const vinLookupResponse = await vinLookupPromise; const serviceZipValidationResponse = await serviceZipValidationPromise; - - if (!vinLookupResponse.data.isStatePermissible) { + + if (!vinLookupResponse.data.isStatePermissible) { // State Restrictions forbid lookup by address this.displayVinLookupByHomeAddressNotAllowedAlert = true; this.$refs.funnelFooter.removeLoader(); @@ -210,29 +210,29 @@ export default { // if the neither the registration zip code or service zip code are not serviceable this.isZipServicable = serviceZipValidationResponse.data.isServiceable; - if (!this.isZipServicable) { + if (!this.isZipServicable) { this.displayNonServiceableZipAlert = true; this.showServiceZipField = true; - this.$refs.funnelFooter.removeLoader(); + this.$refs.funnelFooter.removeLoader(); } else if (!this.serviceZipCode) { // if the registration zip code is servicable and nothing was entered for the service zip code // then set the service zip code to the registration zip code this.serviceZipCode = this.customerQuestions.addressQuestions.zipCode; - } + } const carEntered = store.getters.vehicle; const carsFound = vinLookupResponse.data.vinVehicles; if (carsFound.length == 0) { - // No VINs found + // No VINs found this.displayVinNotFoundAlert = true; this.$refs.funnelFooter.removeLoader(); - return; - } else if (carsFound.length == 1) { + return; + } else if (carsFound.length == 1) { const carFound = carsFound[0].vehicle; this.isCarIdDifferent = carFound.carId !== carEntered.carId; - if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) { + if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) { // Display Alert this.previouslyEnteredCarId = carFound.carId; this.customAlertData.vehicleInfo = carFound; @@ -241,12 +241,12 @@ export default { this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(carFound.carId); // Update button "Continue with..." - this.$refs.funnelFooter.updateButtonText(`Continue with ${carFound.year} ${carFound.make} ${carFound.model}`); + this.$refs.funnelFooter.updateButtonText(`Continue with ${carFound.year} ${carFound.make} ${carFound.model}`); this.$refs.funnelFooter.removeLoader(); - + return; - } - + } + if (!this.isZipServicable) { return; } @@ -254,21 +254,21 @@ export default { // update data if the zip or service zip is servicable this.updateVehicleInfo(carsFound[0].vin, carFound); this.updateCustomerInfo(serviceZipValidationResponse.data.state); - + } else if (carsFound.length > 1) { if (!this.isZipServicable) { return; } // if multiple cars were found - let matchingCars = carsFound.filter(car => car.vehicle.carId === carEntered.carId); + let matchingCars = carsFound.filter(car => car.vehicle.carId === carEntered.carId); if (matchingCars.length === 1) { // and one and only one of them matches the carId entered, save the vehicle info // so we can go to the Heritage Funnel directly const matchingCar = matchingCars[0]; this.updateVehicleInfo(matchingCar.vin, matchingCar.vehicle); } - + // update data if the zip or service zip is servicable this.updateCustomerInfo(serviceZipValidationResponse.data.state); } @@ -277,13 +277,13 @@ export default { }, resetWarningsAndErrors() { this.displayVinNotFoundAlert = false; - this.displayNonServiceableZipAlert = false; + this.displayNonServiceableZipAlert = false; this.displayMatchedDifferentVehicleAlert = false; this.displayVinLookupByHomeAddressNotAllowedAlert = false; }, navigateForward(carEntered, carsFound) { this.updateServiceLocationIfNecessary(); - + if (carsFound.length == 1) { // if a different vehicle is found than the one entered and the selected glass // is not available for that vehicle @@ -297,37 +297,37 @@ export default { }, {} ); } else { - // otherwise + // otherwise this.navigateForwardWithSingleCarMatch(); - } + } } else if (carsFound.length > 1) { // if multiple cars were found - let matchingCars = carsFound.filter(car => car.vehicle.carId === carEntered.carId); + let matchingCars = carsFound.filter(car => car.vehicle.carId === carEntered.carId); if (matchingCars.length === 1) { // and one and only of them matches the car id entered - const matchingCar = matchingCars[0]; + const matchingCar = matchingCars[0]; this.updateVehicleInfo(matchingCar.vin, matchingCar.vehicle); this.navigateForwardWithSingleCarMatch(); } else { // if there are no matches or there are multiple matches, navigate to "address-vehicles" page this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_VEHICLES, this.$route, {}, {}, carsFound); } - } + } }, validateZip(zip) { return this.dispatchStoreAction( - storeActions.VALIDATE_ZIP, + storeActions.VALIDATE_ZIP, { zip }); }, lookupVin(lastName, streetAddress, zip, state) { return this.dispatchStoreAction( storeActions.LOOKUP_VIN_BY_ADDRESS, - { - licenseLastName: lastName, - licenseStreetAddress: streetAddress, - licenseZip: zip, - licenseState: state + { + licenseLastName: lastName, + licenseStreetAddress: streetAddress, + licenseZip: zip, + licenseState: state }, false ); }, @@ -342,7 +342,7 @@ export default { store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, vehicleInfo.imageUrl); store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, vehicleInfo.imageVifNumber); store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, vehicleInfo.imageColor); - }, + }, updateCustomerInfo(serviceState) { store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, this.customerQuestions.addressQuestions.streetAddress); store.commit(storeMutations.UPDATE_REGISTRATION_CITY, this.customerQuestions.addressQuestions.city); @@ -350,10 +350,10 @@ export default { store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, this.customerQuestions.addressQuestions.zipCode); store.commit(storeMutations.UPDATE_REGISTRATION_FIRST_NAME, this.customerQuestions.firstName); store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, this.customerQuestions.lastName); - store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, this.serviceZipCode); - store.commit(storeMutations.UPDATE_SERVICE_LOCATION_STATE, serviceState); + store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, this.serviceZipCode); + store.commit(storeMutations.UPDATE_SERVICE_LOCATION_STATE, serviceState); store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.customerQuestions.emailAddress); - }, + }, updateServiceLocationIfNecessary() { const serviceLocation = store.getters.order.serviceLocation; @@ -373,7 +373,7 @@ export default { }, AlertNonServiceableZipBody() { return this.getCmsContent("AlertNonServiceableZipWidget", "BodyText"); - }, + }, AlertMatchedDifferentVehicleHeader() { const text = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "HeadlineText").replaceAll("{custom:glassText}", getDamageString()); return text; @@ -386,13 +386,13 @@ export default { const content = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText") .replaceAll("{custom:glassText}", getDamageString()) .replaceAll("{custom:vinYmmFound}", vinYmmFound) - .replaceAll("{custom:vinYmmExpected}", vinYmmExpected); + .replaceAll("{custom:vinYmmExpected}", vinYmmExpected); return content; - }, + }, }, watch: { - customerQuestions: { + customerQuestions: { handler(newValue) { // if they modify one of the lookup fields (address, city, state, zipCode, or lastName), then modify the button text back to “Get my personalized quote” this.$refs.funnelFooter.updateButtonText(this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")); @@ -412,8 +412,8 @@ export default { // if the Service Zip Code field is ever hidden, clear out it's value if (!newValue) { this.serviceZipCode = null; - } - }, + } + }, } }, components: { diff --git a/src/layouts/estimate/estimate.vue b/src/layouts/estimate/estimate.vue index fe62d7647..0efea0a07 100644 --- a/src/layouts/estimate/estimate.vue +++ b/src/layouts/estimate/estimate.vue @@ -52,6 +52,7 @@ import { required } from "@/helpers/validation-rules"; import { errorMessages } from "@/constants/error-messages"; import { Form, defineRule } from "vee-validate"; import store from "@/store"; +import { storeMutations } from "@/constants/store-mutations"; import { vinLookupMethodSelections } from "@/constants/vin-lookup-method-selections.js"; // Define Validation Rules defineRule("option-required", required(errorMessages.OPTION_REQUIRED)); @@ -94,21 +95,22 @@ export default { ); }, forwardButtonAction() { - if (this.selectedValues[0]===vinLookupMethodSelections.MANUALVIN) { + if (this.selectedValues[0] === vinLookupMethodSelections.MANUALVIN) { + store.commit(storeMutations.UPDATE_VEHICLE_VIN, null); this.$router.navigate( this.navigationScenarios.SELECTED_MANUAL_VIN, this.$route ); return; } - if (this.selectedValues[0]===vinLookupMethodSelections.LICENSEPLATE) { + if (this.selectedValues[0] === vinLookupMethodSelections.LICENSEPLATE) { this.$router.navigate( this.navigationScenarios.SELECTED_LICENSE_PLATE, this.$route ); return; } - if (this.selectedValues[0]===vinLookupMethodSelections.HOMEADDRESS) { + if (this.selectedValues[0] === vinLookupMethodSelections.HOMEADDRESS) { this.$router.navigate( this.navigationScenarios.SELECTED_HOME_ADDRESS, this.$route diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue index 5e2253af7..b4ae47d42 100644 --- a/src/layouts/license-plate-lookup/license-plate-lookup.vue +++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue @@ -267,8 +267,7 @@ export default { `Continue with ${vinLookup.data.vehicle.year} ${vinLookup.data.vehicle.make} ${vinLookup.data.vehicle.model}` ); this.isVinValid = true; - this.isSelectedGlassAvailableForVehicle = - await isGlassAvailableForCarId(vinLookup.data.vehicle.carId); + this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vinLookup.data.vehicle.carId); this.$refs.funnelFooter.removeLoader(); return; } diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js index 46fa7763e..fd2d9964a 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.spec.js +++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js @@ -145,8 +145,8 @@ describe("vehicle-damage.vue", () => { wrapper.vm.selectedRearReplaceOptions = ["Stationary"]; - const expectedGlassToReplace = [{ location: "Windshield", name: "Single" }, { location: "Driver", name: "Back" }, - { location: "Passenger", name: "Quarter" }, { location: "Rear", name: "Stationary" }]; + const expectedGlassToReplace = [{ glassLocation: "Windshield", glassName: "Single" }, { glassLocation: "Driver", glassName: "Back" }, + { glassLocation: "Passenger", glassName: "Quarter" }, { glassLocation: "Rear", glassName: "Stationary" }]; //Act vehicleDamage.beforeRouteEnter.call( @@ -237,7 +237,7 @@ describe("vehicle-damage.vue", () => { selectedWindshieldDamageType: ["Replace"] }; - const expectedGlassToReplace = [{ location: "Windshield", name: "Single" },]; + const expectedGlassToReplace = [{ glassLocation: "Windshield", glassName: "Single" },]; //Act vehicleDamage.beforeRouteEnter.call( diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index 266e2ba1a..77b28d3be 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -314,25 +314,25 @@ export default { const selectedGlassToReplace = []; if (this.isWindshieldDamageLocation && !this.isWindshieldRepair){ this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach(wsItem => { - selectedGlassToReplace.push({ location: damageLocationsSelected.WINDSHIELD, name: wsItem}); + selectedGlassToReplace.push({ glassLocation: damageLocationsSelected.WINDSHIELD, glassName: wsItem}); }) } if (this.isDriverSideReplace){ this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach(driverItem => { - selectedGlassToReplace.push({ location: damageLocationsSelected.DRIVER, name: driverItem}); + selectedGlassToReplace.push({ glassLocation: damageLocationsSelected.DRIVER, glassName: driverItem}); }) } if (this.isPassengerSideReplace){ this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach(passengerItem => { - selectedGlassToReplace.push({ location: damageLocationsSelected.PASSENGER, name: passengerItem}); + selectedGlassToReplace.push({ glassLocation: damageLocationsSelected.PASSENGER, glassName: passengerItem}); }) } if (this.isRearWindowDamageLocation) { this.selectedRearReplaceOptions.forEach(rearItem => { - selectedGlassToReplace.push({ location: damageLocationsSelected.REAR, name: rearItem}); + selectedGlassToReplace.push({ glassLocation: damageLocationsSelected.REAR, glassName: rearItem}); }) } diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue index b52200dd4..b3ca243f0 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -23,11 +23,9 @@ isRequired disableAutoFill validationRules="vin-required|vin-format" - :isDisabled="isVinFieldReadOnly" + :isDisabled="vinPopulatedOnPageLoad" maxLength="17" :mask="vinMask" - @focus="setVinTouched" - @maska="rawVinValue = $event.target.dataset.maskRawValue" /> @@ -70,10 +68,10 @@ /> 0, - initialVin: this.getVinFromStore(), - vinTouched: false, - rawVinValue: "", + isInsuranceVerified: false, }; }, mounted() { this.attachCustomEvents(); if (this.vinPopulatedOnPageLoad) { - this.setupVinMask(); + this.setupVinMask(); + this.isInsuranceVerified = store.getters.payment.insuranceCoverage.isVerified || getFunnelCookie().HasDelayedClaimRegistration; } }, watch: { @@ -210,12 +205,6 @@ export default { }, }, computed: { - perfectMatchNewVinAlert() { - const vinToCheck = this.vinTouched ? this.rawVinValue : this.initialVin; - const isVinPerfectMatch = this.vinPopulatedOnPageLoad && vinToCheck === this.getVinFromStore(); - this.updateIsCarIdDifferent(isVinPerfectMatch); - return isVinPerfectMatch; - }, MatchedDifferentVehicleAlertHeader(){ const text = this.getCmsContent("MatchedDifferentVehicle", "HeadlineText").replaceAll("{custom:damage}", getDamageString()); @@ -231,41 +220,29 @@ export default { }, NoServiceZipHeader(){ const text = this.getCmsContent("NoServiceZipWidget", "HeadlineText").replaceAll("{custom:serviceZip}", this.invalidZip); - return text; }, NoServiceZipBody(){ return this.getCmsContent("NoServiceZipWidget", "BodyText"); }, - PerfectMatchNewVinAlertHeader() { - return this.getCmsContent("PerfectMatchNewVinAlert", "HeadlineText"); + PerfectMatchInsuranceNotVerifiedAlertHeader() { + return this.getCmsContent("PerfectMatchInsuranceNotVerifiedAlert", "HeadlineText"); }, - PerfectMatchNewVinAlertBody() { - return this.getCmsContent("PerfectMatchNewVinAlert", "BodyText").replaceAll("{custom:damage}", + PerfectMatchInsuranceNotVerifiedAlertBody() { + return this.getCmsContent("PerfectMatchInsuranceNotVerifiedAlert", "BodyText").replaceAll("{custom:damage}", getDamageString()) }, - PerfectMatchNewVinAlertReadOnlyHeader () { - return this.getCmsContent("PerfectMatchNewVinAlertReadOnly", "HeadlineText"); + PerfectMatchInsuranceVerifiedAlertHeader () { + return this.getCmsContent("PerfectMatchInsuranceVerifiedAlert", "HeadlineText"); }, - PerfectMatchNewVinAlertReadOnlyBody () { - return this.getCmsContent("PerfectMatchNewVinAlertReadOnly", "BodyText").replaceAll("{custom:damage}", + PerfectMatchInsuranceVerifiedAlertBody () { + return this.getCmsContent("PerfectMatchInsuranceVerifiedAlert", "BodyText").replaceAll("{custom:damage}", getIsWindshieldOnly()) }, - isVinFieldReadOnly(){ - return this.$store.getters.payment.insuranceCoverage.isVerified || getFunnelCookie().HasDelayedClaimRegistration; - }, }, methods: { - setVinTouched() { - if (!this.vinTouched) { - this.vinMask = "XXXXXXXXXXXXXXXXX"; - this.vin = this.initialVin; - } - - this.vinTouched = true; - }, setupVinMask() { - const lastSixChars = this.initialVin.substring(11, this.initialVin.length); + const lastSixChars = this.vin.substring(11, this.vin.length); this.vinMask = `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`; }, arePagePrerequisitesValid() { @@ -315,17 +292,16 @@ export default { let vehicleLookupResponse; const zipValidation = this.validateZip(this.zip); - - 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 Vehicle Lookup - const vinToLookup = this.vinTouched ? this.vin : this.initialVin; - const vehicleLookup = this.lookupVehicle(vinToLookup); - + + // If this is a new VIN Lookup, do both a Vehicle Lookup and a Zip Validation + if (!this.vinPopulatedOnPageLoad) { + // Perform Zip Validation zipValidationResponse = await zipValidation; + + // Perform Vehicle Lookup + const vehicleLookup = this.lookupVehicle(this.vin); vehicleLookupResponse = await vehicleLookup.catch(() => { this.vinNotFound = true; - this.$refs.funnelFooter.removeLoader(); return false; }); @@ -335,44 +311,46 @@ export default { } if (!vehicleLookupResponse || !zipValidationResponse.data.isServiceable) { + // If either lookup fails, remove the loader and stop processing the page. this.$refs.funnelFooter.removeLoader(); return; } + + this.isCarIdDifferent = vehicleLookupResponse.data.carId !== store.getters.vehicle.carId; + + if (this.isCarIdDifferent && (vehicleLookupResponse.data.carId !== this.previouslyEnteredCarId)) { + this.previouslyEnteredCarId = vehicleLookupResponse.data.carId; + this.noServiceZip = false; + this.customAlertData.vehicleInfo = vehicleLookupResponse.data; + this.$refs.funnelFooter.updateButtonText(`Continue with ${vehicleLookupResponse.data.year} ${vehicleLookupResponse.data.make} ${vehicleLookupResponse.data.model}`); + this.isVinValid = true; + this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vehicleLookupResponse.data.carId); + this.$refs.funnelFooter.removeLoader(); + this.isCarIdDifferent = true; + return; + } + + this.updateStore(vehicleLookupResponse.data, zipValidationResponse.data); + this.navigateForward(); + } else { + // If a VIN has already been found. Validate the Service Zip (in case of changes) const zipValidationResponse = await zipValidation; - // Check if Service Zip entered is serviceable, if not display an alert - if (!zipValidationResponse.data.isServiceable) { + // Check if Service Zip entered is serviceable + if (zipValidationResponse.data.isServiceable) { + // If the Service Zip entered is serviceable then save the Zip Info and Email Address and navigate forward + store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, this.zip); + store.commit(storeMutations.UPDATE_SERVICE_LOCATION_STATE, zipValidationResponse.data.state); + store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.email); + this.navigateForward(); + } else { + // If the Service Zip is NOT serviceable then show an alert this.setupUiForNonServiceableZip(this.zip); this.$refs.funnelFooter.removeLoader(); - return; - } else { - this.navigateForward(); - return; } } - if (!vehicleLookupResponse) { - return; - } - - this.isCarIdDifferent = vehicleLookupResponse.data.carId !== store.getters.vehicle.carId; - - if (this.isCarIdDifferent && (vehicleLookupResponse.data.carId !== this.previouslyEnteredCarId)) { - this.previouslyEnteredCarId = vehicleLookupResponse.data.carId; - this.noServiceZip = false; - this.customAlertData.vehicleInfo = vehicleLookupResponse.data; - this.$refs.funnelFooter.updateButtonText(`Continue with ${vehicleLookupResponse.data.year} ${vehicleLookupResponse.data.make} ${vehicleLookupResponse.data.model}`); - this.isVinValid = true; - this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vehicleLookupResponse.data.carId); - this.$refs.funnelFooter.removeLoader(); - this.isCarIdDifferent = true; - return; - } - - this.updateStore(vehicleLookupResponse.data, zipValidationResponse.data); - this.navigateForward(); - }, navigateForward(){ if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {