Redo of address-lookup invalid zip alert changes

src/layouts/address-lookup/address-lookup.vue

@@ -7,15 +7,43 @@
         <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />
         <div class="fade-on-route-transition sub-container make-tall">
             <customerQuestions ref="customerQuestions" v-model="customerQuestions" />
-
+            <alert ref="alertVinNotFound" 
-            <alert ref="alertVinNotFound" v-if="displayVinNotFoundAlert" class="mb-4" cmsWidgetName="AlertVinNotFoundWidget" alertClass="alert-danger" v-bind:isDismissible="false" />
+				v-if="displayVinNotFoundAlert" 
-
+				class="mb-4" 
-            <alert ref="alertMatchedDifferentVehicle" v-if="displayMatchedDifferentVehicleAlert" class="mb-4" :manualHeadline="AlertMatchedDifferentVehicleHeader" :manualCopy="AlertMatchedDifferentVehicleBody" alertClass="alert-warning" v-bind:isDismissible="false" />
+				cmsWidgetName="AlertVinNotFoundWidget" 
-            
+				alertClass="alert-danger" 
-            <alert ref="alertNonServiceableZip" v-if="displayNonServiceableZipAlert" class="mb-4" alertClass="alert-danger" :manualHeadline="AlertNonServiceableZipHeader" :manualCopy="AlertNonServiceableZipBody" v-bind:isDismissible="false" />
+				v-bind:isDismissible="false" 
-
+			/>
-            <alert ref="alertVinLookupsByHomeAddressNotAllowed" v-if="displayVinLookupByHomeAddressNotAllowedAlert" class="mb-4" cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget" alertClass="alert-danger" v-bind:isDismissible="false" />
+            <alert ref="alertMatchedDifferentVehicle" 
-
+				v-if="displayMatchedDifferentVehicleAlert" 
+				class="mb-4" 
+				:manualHeadline="AlertMatchedDifferentVehicleHeader" 
+				:manualCopy="AlertMatchedDifferentVehicleBody" 
+				alertClass="alert-warning" v-bind:isDismissible="false"
+			/>
+			<alert ref="alertInvalidZip" 
+				v-if="displayInvalidZipAlert" 
+				class="mb-4" 
+				alertClass="alert-danger" 
+				:manualHeadline="AlertInvalidZipHeader" 
+				:manualCopy="AlertInvalidZipBody" 
+				v-bind:isDismissible="false" 
+			/>
+            <alert ref="alertNonServiceableZip" 
+				v-if="displayNonServiceableZipAlert" 
+				class="mb-4" 
+				alertClass="alert-danger" 
+				:manualHeadline="AlertNonServiceableZipHeader" 
+				:manualCopy="AlertNonServiceableZipBody" 
+				v-bind:isDismissible="false" 
+			/>
+            <alert ref="alertVinLookupsByHomeAddressNotAllowed" 
+				v-if="displayVinLookupByHomeAddressNotAllowedAlert" 
+				class="mb-4" 
+				cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget" 
+				alertClass="alert-danger" 
+				v-bind:isDismissible="false" 
+			/>
             <transition name="fade" mode="out-in">
                 <div class="service-zip-field" v-if="showServiceZipField" aria-live="polite">
                     <div class="row mb-4">
@@ -171,39 +199,32 @@ export default {
                 {
                     resultKey: "serviceZipValidationResponse",
                     promise: this.serviceZipCode ?
-                        this.dispatchStoreAction(storeActions.VALIDATE_ZIP, {zip: this.serviceZipCode}) :
+                        this.dispatchStoreAction(storeActions.VALIDATE_ZIP, { zip: this.serviceZipCode }) :
-						this.dispatchStoreAction(storeActions.VALIDATE_ZIP, {zip: this.customerQuestions.addressQuestions.zipCode})
+						this.dispatchStoreAction(storeActions.VALIDATE_ZIP, { zip: this.customerQuestions.addressQuestions.zipCode })
                 }
             ];
 
             const resultMap = await settleAllPromises(promiseResultMap);
 
-            // Verify if the service zip code or registration zip code provided is serviceable
+            // If VIN Lookup by address is forbidden by State Restrictions then show an alert
             if (!resultMap.vinLookupResponse.isStatePermissible) {
                 // State Restrictions forbid lookup by address
                 this.displayVinLookupByHomeAddressNotAllowedAlert = true;
                 return this.$refs.funnelFooter.removeLoader();
             }
 
-            // If the neither the registration zip code or service zip code are not serviceable
+			// If a Service Zip is entered and it is an invalid zip code (ex. 11111) then show an alert
-            this.isZipServiceable = resultMap.serviceZipValidationResponse.isServiceable;
+			const isZipValid = resultMap.serviceZipValidationResponse.isValid;
-            if (!this.isZipServiceable) {
+			if (this.serviceZipCode && !isZipValid) {
-                this.displayNonServiceableZipAlert = true;
+				this.displayInvalidZipAlert = true;
-                this.showServiceZipField = true;
+				return this.$refs.funnelFooter.removeLoader();
-                return this.$refs.funnelFooter.removeLoader();
+			} 
-            }
+			this.displayInvalidZipAlert = false;			
-
-            // 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.customerQuestions.addressQuestions.zipCode;
-            }
 
             const carsFound = resultMap.vinLookupResponse.vinVehicles;
 
             // Handle cases for different amounts of VINS found for the address.
             if (carsFound.length == 1) {
-
 				// Single VIN found
                 const carFound = carsFound[0].vehicle;
 
@@ -222,19 +243,10 @@ export default {
                     return this.$refs.funnelFooter.removeLoader();
                 }
 
-                if (!this.isZipServiceable) {
-                    return;
-                }
-
                 // update data if the zip or service zip is serviceable
                 vehicleInfoToCommit = Object.assign(carFound, { vin: carsFound[0].vin });
+
             } else if (carsFound.length > 1) {
-
-				// Multiple VINS found
-                if (!this.isZipServiceable) {
-                    return;
-                }
-
                 // If multiple cars were found and one and only one of them matches the carId entered, save the vehicle info
 				// so we can go to the Heritage Funnel directly
                 const matchingCars = carsFound.filter(vin => vin.vehicle.carId === this.$store.getters.vehicle.carId);
@@ -242,11 +254,26 @@ export default {
                 if (matchingCars.length === 1) {
                     vehicleInfoToCommit = Object.assign(matchingCars[0].vehicle, {vin: matchingCars[0].vin});
                 }
-            } else {
 
+            } else {
 				// No VINS found.
                 this.displayVinNotFoundAlert = true;
                 return this.$refs.funnelFooter.removeLoader();
+
+            }
+
+			// If the neither the registration zip code or service zip code are not serviceable
+            this.isZipServiceable = resultMap.serviceZipValidationResponse.isServiceable;
+            if (!this.isZipServiceable) {
+                this.displayNonServiceableZipAlert = true;
+                this.showServiceZipField = true;
+                return this.$refs.funnelFooter.removeLoader();
+            }
+
+            // 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.customerQuestions.addressQuestions.zipCode;
             }
 
             // Save vehicle, customer, service and registration information

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

@@ -46,6 +46,7 @@
             />
           </div>
         </div>
+        <alert ref="alertInvalidZip" v-if="displayInvalidZipAlert" class="my-3" alertClass="alert-danger" :manualHeadline="AlertInvalidZipHeader" :manualCopy="AlertInvalidZipBody" v-bind:isDismissible="false" />
         <alert
           class="my-3"
           :manualHeadline="NoServiceZipHeader"
@@ -170,6 +171,7 @@ export default {
       customAlertData: {},
       isSelectedGlassAvailableForVehicle: true,
       zipToDisplay: this.getRegistrationZipFromStore(),
+      displayInvalidZipAlert: false,
     };
   },
   mounted() {
@@ -177,19 +179,24 @@ export default {
   },
   computed: {
     MatchedDifferentVehicleAlertHeader() {
-      return this.getCmsContent("MatchedDifferentVehicleAlertWidget","HeadlineText").replaceAll("{custom:damage}", getDamageString());
+      return this.getCmsContent("MatchedDifferentVehicleAlertWidget", "HeadlineText").replaceAll("{custom:damage}", getDamageString());
     },
     MatchedDifferentVehicleAlertBody() {
-      return this.getCmsContent("MatchedDifferentVehicleAlertWidget","BodyText")
+      return this.getCmsContent("MatchedDifferentVehicleAlertWidget", "BodyText")
         .replaceAll("{custom:damage}", getDamageString())
-        .replaceAll("{custom:plateLookupYear}",this.customAlertData?.vehicleInfo?.year)
+        .replaceAll("{custom:plateLookupYear}", this.customAlertData?.vehicleInfo?.year)
-        .replaceAll("{custom:plateLookupMake}",this.customAlertData?.vehicleInfo?.make)
+        .replaceAll("{custom:plateLookupMake}", this.customAlertData?.vehicleInfo?.make)
-        .replaceAll("{custom:plateLookupModel}",this.customAlertData?.vehicleInfo?.model);
+        .replaceAll("{custom:plateLookupModel}", this.customAlertData?.vehicleInfo?.model);
     },
+    AlertInvalidZipHeader() {
+      return this.getCmsContent("AlertInvalidZipWidget","HeadlineText");
+    },
+    AlertInvalidZipBody() {
+      return this.getCmsContent("AlertInvalidZipWidget", "BodyText");
+    },    
     NoServiceZipHeader() {
       return this.getCmsContent("NoServiceZipWidget","HeadlineText")
         .replaceAll("{custom:zip}", this.zipToDisplay);
-
     },
     NoServiceZipBody() {
       return this.getCmsContent("NoServiceZipWidget", "BodyText");
@@ -241,7 +248,15 @@ export default {
         
       const resultMap = await settleAllPromises(promiseResultMap);
 
-      //Handle service zip validations
+      // If a Service Zip is entered and it is an invalid zip code (ex. 11111) then show an alert
+      const isZipValid = resultMap.serviceZipValidationResponse.isValid;
+      if (this.serviceZip && !isZipValid) {
+        this.displayInvalidZipAlert = true;
+        return this.$refs.funnelFooter.removeLoader();
+      } 
+      this.displayInvalidZipAlert = false;      
+
+      // Handle service zip validations
       if (!resultMap.serviceZipValidationResponse.isServiceable) {
         this.isVinValid = true;
         this.isRegistrationZipServiceable = false;
@@ -254,7 +269,7 @@ export default {
         this.serviceZip = this.registrationZip;
       }
 
-      //Lookup vin
+      // Lookup vin
       const vinLookup = await this.dispatchStoreAction(storeActions.LOOKUP_VIN_BY_PLATE, {licensePlate: this.licensePlate, licenseState: resultMap.registrationZipValidationResponse.state}, false)
       .catch(() => {
         this.isVinValid = false;

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

@@ -313,7 +313,6 @@ export default {
             return this.$refs.funnelFooter.removeLoader();
         }
 
-
         // Check if the CarId is different from the lookup vs what is in state currently.
         this.isCarIdDifferent = resultMap.vehicleLookupResponse.carId !== this.$store.getters.vehicle.carId;