License Plate Lookup refactoring. Refactor mostly complete. There might be some slight differences remaining

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -17,7 +17,7 @@
         <div class="row my-2">
           <div class="col">
             <textboxQuestion
-              cmsWidgetName="LicensePlateNumber"
+              cmsWidgetName="LicensePlateNumberQuestionWidget"
               v-model="licensePlate"
               isRequired
               inputId="license_plate"
@@ -28,8 +28,8 @@
         <div class="row my-2">
           <div class="col">
             <textboxQuestion
-              cmsWidgetName="RegistrationZip"
+              cmsWidgetName="RegistrationZipQuestionWidget"
-              v-model="registrationZip"
+              v-model="registrationZipCode"
               inputId="zip"
               mask="#####"
               validationRules="zip-required|zip-format"
@@ -39,7 +39,7 @@
         <div class="row my-2">
           <div class="col">
             <textboxQuestion
-              cmsWidgetName="EmailAddress"
+              cmsWidgetName="EmailAddressQuestionWidget"
               v-model="email"
               inputId="email"
               validationRules="email-address-required|email-address-format"
@@ -65,17 +65,18 @@
           <div class="col">
             <textboxQuestion
               v-if="showServiceZipField"
-              cmsWidgetName="ServiceZip"
+              cmsWidgetName="ServiceZipQuestionWidget"
               v-model="serviceZipCode"
               inputId="serviceZipCode"
               validationRules="zip-required|zip-format"
+              mask="#####"
             />
           </div>
         </div>
         <alert
           v-if="displayVinNotFoundAlert"
           class="my-3"
-          cmsWidgetName="NoMatchAlertWidget"        
+          cmsWidgetName="AlertVinNotFoundWidget"        
           alertClass="alert-warning"
           v-bind:isDismissible="false" 
         />
@@ -155,7 +156,7 @@ export default {
   data() {
     return {
       licensePlate: this.getLicensePlateFromStore(),
-      registrationZip: this.getRegistrationZipFromStore(),
+      registrationZipCode: this.getRegistrationZipFromStore(),
       email: this.getEmailFromStore(),      
       serviceZipCode: this.getServiceZipFromStore(),
       displayNonServiceableZipAlert: false,
@@ -206,7 +207,7 @@ export default {
     async forwardButtonAction() {
       this.resetWarningsAndErrors();
 
-      const registrationZipValidationResponse = this.dispatchStoreAction(storeActions.VALIDATE_ZIP, {zip: this.registrationZip });
+      const registrationZipValidationResponse = this.dispatchStoreAction(storeActions.VALIDATE_ZIP, { zip: this.registrationZipCode });
       
       // Settle promises and get results
       const promiseResultMap = [
@@ -225,11 +226,15 @@ export default {
       // Lookup vin
       const vinLookup = await this.dispatchStoreAction(storeActions.LOOKUP_VIN_BY_PLATE, {licensePlate: this.licensePlate, licenseState: resultMap.registrationZipValidationResponse.state}, false)
         .catch(() => {
-          // No VINS found.
+          // No VIN found.
           this.displayVinNotFoundAlert = true;
           return this.$refs.funnelFooter.removeLoader();
 
         });
+      // If no VIN was found, stop processing after displaying alert
+      if (!vinLookup) {
+        return;
+      }
 
       // If a Service Zip is entered and it is an invalid zip code (ex. 11111) then show an alert
       const isZipValid = resultMap.serviceZipValidationResponse.isValid;
@@ -268,7 +273,7 @@ export default {
       // If the registration zip code is serviceable and nothing was entered for the service zip code
       // then set the service zip code to the registration zip code
       if (!this.serviceZipCode) {
-        this.serviceZipCode = this.registrationZip;
+        this.serviceZipCode = this.registrationZipCode;
       }
 
       // Save vin, vehicle, customer, service and registration information
@@ -278,7 +283,7 @@ export default {
         registrationInfo: {
           licensePlate: this.licensePlate,
           state: resultMap.registrationZipValidationResponse.state,
-          zipCode: this.registrationZip,
+          zipCode: this.registrationZipCode,
         }
       }, false);
 
@@ -320,10 +325,10 @@ export default {
       return this.getCmsContent("AlertNonServiceableZipWidget", "BodyText");
     },     
     AlertMatchedDifferentVehicleHeader() {
-      return this.getCmsContent("MatchedDifferentVehicleAlertWidget", "HeadlineText").replaceAll("{custom:damage}", getDamageString());
+      return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "HeadlineText").replaceAll("{custom:damage}", getDamageString());
     },
     AlertMatchedDifferentVehicleBody() {
-      return this.getCmsContent("MatchedDifferentVehicleAlertWidget", "BodyText")
+      return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
         .replaceAll("{custom:damage}", getDamageString())
         .replaceAll("{custom:plateLookupYear}", this.customAlertData?.vehicleInfo?.year)
         .replaceAll("{custom:plateLookupMake}", this.customAlertData?.vehicleInfo?.make)
@@ -336,12 +341,14 @@ export default {
         this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
       );
     },
-    registrationZip() {
+    registrationZipCode() {
       this.$refs.funnelFooter.updateButtonText(
         this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
       );
     },
     serviceZipCode() {
+      // If they modify the service zip code, then hide the error message.
+      this.displayNonServiceableZipAlert = false;
       this.$refs.funnelFooter.updateButtonText(
         this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
       );

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

@@ -316,6 +316,7 @@ export default {
       this.displayNonServiceableZipAlert = true;
 
       return this.$refs.funnelFooter.removeLoader();
+      
     },
     async navigateForward(){
       if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {