diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue index 673c1a263..efe08ebe4 100644 --- a/src/common-components/textbox-question/textbox-question.vue +++ b/src/common-components/textbox-question/textbox-question.vue @@ -20,6 +20,7 @@ @change="handleChange" @blur="handleChange" :maxlength="maxLength ? maxLength : '999'" + @focus="$emit('focus', $event.target.value)" />
{{ errorMessage }} diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue index 08e63ebf6..5e6f27799 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -25,6 +25,8 @@ validationRules="vin-required|vin-format" :isDisabled="isVinFieldReadOnly" maxLength="17" + :mask="vinMask" + @focus="setVinTouched" />
@@ -184,10 +186,14 @@ export default { previouslyEnteredCarId: '', invalidZip: '', vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0, + initialVin: this.getVinFromStore(), }; }, mounted() { this.attachCustomEvents(); + if (this.vinPopulatedOnPageLoad) { + this.setupVinMask(); + } }, watch: { vin() { @@ -195,13 +201,13 @@ export default { this.$refs.funnelFooter.updateButtonText( this.getCmsContent("FunnelFooterWidget", "ForwardButtonText") ); - } + }, }, computed: { perfectMatchNewVinAlert() { - const isVinPerfectMatch = this.vinPopulatedOnPageLoad && this.vin === this.getVinFromStore(); - this.updateIsCarIdDifferent(isVinPerfectMatch); - return isVinPerfectMatch; + const isVinPerfectMatch = this.vinPopulatedOnPageLoad && this.vin === this.getVinFromStore(); + this.updateIsCarIdDifferent(isVinPerfectMatch); + return isVinPerfectMatch; }, MatchedDifferentVehicleAlertHeader(){ const text = this.getCmsContent("MatchedDifferentVehicle", @@ -239,10 +245,18 @@ export default { getIsWindshieldOnly()) }, isVinFieldReadOnly(){ - return this.$store.getters.payment.insuranceCoverage.isVerified || getFunnelCookie().HasDelayedClaimRegistration; + return this.$store.getters.payment.insuranceCoverage.isVerified || getFunnelCookie().HasDelayedClaimRegistration; }, }, methods: { + setVinTouched() { + this.vinMask = "XXXXXXXXXXXXXXXXX"; + this.vin = this.initialVin; + }, + setupVinMask() { + const lastSixChars = this.initialVin.substring(11, this.initialVin.length); + this.vinMask = `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`; + }, arePagePrerequisitesValid() { return store.getters.vehicle.carId !== null; }, @@ -286,8 +300,15 @@ 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; @@ -295,9 +316,11 @@ export default { this.noServiceZip = false; return false; }); + if (!vehicleLookupResponse) { return; } + if (!zipValidationResponse.data.isServiceable) { this.customAlertData.zip = this.zip; this.$refs.funnelFooter.removeLoader(); @@ -305,6 +328,7 @@ export default { this.invalidZip = this.zip; return; } + this.isCarIdDifferent = vehicleLookupResponse.data.carId !== store.getters.vehicle.carId; if (this.isCarIdDifferent && (vehicleLookupResponse.data.carId !== this.previouslyEnteredCarId)) { @@ -318,11 +342,13 @@ export default { this.isCarIdDifferent = true; return; } + this.updateStore(vehicleLookupResponse.data, zipValidationResponse.data); this.navigateForward(); + }, navigateForward(){ - if(this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle){ + if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) { this.$router.navigateAfterSave(this.navigationScenarios.SELECTED_VIN_HAS_MISMATCHED_GLASS, this.$route, {}, { displayVehicleChangeAlert: true }, {}); return; } else {