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

@@ -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

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"
             />
           </div>
         </div>
@@ -70,10 +68,10 @@
         />
         <alert
           class="my-4"
-          :manualHeadline="PerfectMatchNewVinAlertReadOnlyHeader"
+          :manualHeadline="PerfectMatchInsuranceVerifiedAlertHeader"
-          :manualCopy="PerfectMatchNewVinAlertReadOnlyBody"
+          :manualCopy="PerfectMatchInsuranceVerifiedAlertBody"
           v-model="customAlertData"
-          v-if="isVinFieldReadOnly" 
+          v-if="vinPopulatedOnPageLoad && isInsuranceVerified" 
           alertClass="alert-success"
         />
         <alert
@@ -101,10 +99,10 @@
         />
         <alert
           class="my-4"
-          :manualHeadline="PerfectMatchNewVinAlertHeader"
+          :manualHeadline="PerfectMatchInsuranceNotVerifiedAlertHeader"
-          :manualCopy="PerfectMatchNewVinAlertBody"
+          :manualCopy="PerfectMatchInsuranceNotVerifiedAlertBody"
           v-model="customAlertData"
-          v-if="perfectMatchNewVinAlert && !noServiceZip && !vinNotFound && meta.valid && !isVinFieldReadOnly"
+          v-if="vinPopulatedOnPageLoad && !isInsuranceVerified"
           alertClass="alert-success"
         />
         <funnelFooter
@@ -140,10 +138,8 @@ import { errorMessages } from "@/constants/error-messages";
 import { getDamageString, getIsWindshieldOnly, isGlassAvailableForCarId } from "@/helpers/damage-helper";
 import { required, regex } from "@/helpers/validation-rules";
 import { Form, defineRule } from "vee-validate";
-import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 import { getFunnelCookie } from "@/helpers/heritage-integration/cookie-helper";
 import vinPagesMixin from "@/mixins/vin-pages-mixin";
-import { StatusCodes } from 'http-status-codes';
 
 // DEFINE VALIDATION RULES
 defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
@@ -187,15 +183,14 @@ export default {
       previouslyEnteredCarId: '',
       invalidZip: '',
       vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0,
-      initialVin: this.getVinFromStore(),
+      isInsuranceVerified: false,
-      vinTouched: false,
-      rawVinValue: "",
     };
   },
   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() {
+    PerfectMatchInsuranceNotVerifiedAlertHeader() {
-      return this.getCmsContent("PerfectMatchNewVinAlert", "HeadlineText");
+      return this.getCmsContent("PerfectMatchInsuranceNotVerifiedAlert", "HeadlineText");
     },
-    PerfectMatchNewVinAlertBody() {
+    PerfectMatchInsuranceNotVerifiedAlertBody() {
-      return this.getCmsContent("PerfectMatchNewVinAlert", "BodyText").replaceAll("{custom:damage}",
+      return this.getCmsContent("PerfectMatchInsuranceNotVerifiedAlert", "BodyText").replaceAll("{custom:damage}",
       getDamageString())
     },
-    PerfectMatchNewVinAlertReadOnlyHeader () {
+    PerfectMatchInsuranceVerifiedAlertHeader () {
-      return this.getCmsContent("PerfectMatchNewVinAlertReadOnly", "HeadlineText");
+      return this.getCmsContent("PerfectMatchInsuranceVerifiedAlert", "HeadlineText");
     },
-    PerfectMatchNewVinAlertReadOnlyBody () {
+    PerfectMatchInsuranceVerifiedAlertBody () {
-      return this.getCmsContent("PerfectMatchNewVinAlertReadOnly", "BodyText").replaceAll("{custom:damage}",
+      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 this is a new VIN Lookup, do both a Vehicle Lookup and a Zip Validation
-        // If the user has clicked on the VIN field, either they are doing a new VIN lookup or changing the VIN previously matched.
+      if (!this.vinPopulatedOnPageLoad) {          
-        // Therefore we need to do a Vehicle Lookup        
+        // Perform Zip Validation      
-        const vinToLookup = this.vinTouched ? this.vin : this.initialVin;
-        const vehicleLookup = this.lookupVehicle(vinToLookup);
-        
         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
+        // Check if Service Zip entered is serviceable
-        if (!zipValidationResponse.data.isServiceable) {
+        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) {