From fe007b2b9945b3701136f5470ab07ecac39e60c3 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Mon, 27 Jun 2022 08:22:18 -0400 Subject: [PATCH] Updated vin-lookup so that vin field is always read only coming back from Heritage and also to clear out the vin field when reselecting lookup by vin on the estimate page --- src/layouts/estimate/estimate.vue | 8 +- src/layouts/vin-lookup/vin-lookup.vue | 132 +++++++++++--------------- 2 files changed, 60 insertions(+), 80 deletions(-) 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/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) {