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 {