Merge pull request #579 from Safelite/feature/CSR-659

Feature/csr 659

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.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() {
@@ -316,16 +293,15 @@ export default {
 
       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) {