Vin Masking when returning to Vin Lookup page after returning from heritage funnel

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)"
 		/>
 		<div v-show="errorMessage" class="row my-2 form-test-error">
 			<span class="d-inline-flex mt-0" role="alert">{{ errorMessage }}</span>

src/layouts/vin-lookup/vin-lookup.vue

@@ -25,6 +25,8 @@
               validationRules="vin-required|vin-format"
               :isDisabled="isVinFieldReadOnly"
               maxLength="17"
+              :mask="vinMask"
+              @focus="setVinTouched"
             />
           </div>
         </div>
@@ -183,10 +185,14 @@ export default {
       previouslyEnteredCarId: '',
       invalidZip: '',
       vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0,
+      initialVin: this.getVinFromStore(),
     };
   },
   mounted() {
     this.attachCustomEvents();
+    if (this.vinPopulatedOnPageLoad) {
+      this.setupVinMask(); 
+    }    
   },
   watch: {
     vin() {
@@ -194,13 +200,13 @@ export default {
       this.$refs.funnelFooter.updateButtonText(
         this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
       );
-    }
+    },
   },
   computed: {
     perfectMatchNewVinAlert() {
-        const isVinPerfectMatch = this.vinPopulatedOnPageLoad && this.vin === this.getVinFromStore();
+      const isVinPerfectMatch = this.vinPopulatedOnPageLoad && this.vin === this.getVinFromStore();
-        this.updateIsCarIdDifferent(isVinPerfectMatch);
+      this.updateIsCarIdDifferent(isVinPerfectMatch);
-        return isVinPerfectMatch;
+      return isVinPerfectMatch;
     },
     MatchedDifferentVehicleAlertHeader(){
       const text = this.getCmsContent("MatchedDifferentVehicle",
@@ -238,10 +244,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;
     },
@@ -285,8 +299,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;
@@ -294,6 +315,7 @@ export default {
         this.noServiceZip = false;
         return;
       });
+
       if (!zipValidationResponse.data.isServiceable) {
         this.customAlertData.zip = this.zip;
         this.$refs.funnelFooter.removeLoader();
@@ -301,6 +323,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)) {
@@ -314,11 +337,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.CLICKED_FORWARD, this.$route, {}, { displayVehicleChangeAlert: true }, {});
             return;
         } else {