Merge pull request #2462 from Safelite/feature/CASH-353

Feature/cash 353

src/layouts/address-lookup/address-lookup.spec.js

@@ -182,6 +182,23 @@ describe("address-lookup.vue", () => {
             // Assert
             expect(wrapper.findComponent({ ref: "alertVinNotFound" }).isVisible()).toBe(true);
         });
+
+        test("should hide the AlertNoService when displayNoServiceAlert is false", async () => {
+            const { wrapper } = setupMocks({
+                isZipServiceable: true,
+                displayNoServiceAlert: false,
+                lookupVinbyAddressResponse: {
+                    isStatePermissible: true,
+                    vinVehicles: [], // Return no vehicles
+                },
+            });
+            // Ensure displayNoServiceAlert is false
+            await wrapper.setData({ displayNoServiceAlert: false });
+            await wrapper.vm.forwardButtonAction();
+            // Check if the AlertNoService component is not rendered
+            const alertNoService = wrapper.findComponent({ ref: "AlertNoService" });
+            expect(alertNoService.exists()).toBe(false);
+        });
     });
 
     describe("navigation", () => {
@@ -741,6 +758,17 @@ function setupMocks({
     wrapper.vm.setCmsContent = jest.fn();
     wrapper.vm.$refs.navbar.updateButtonText = jest.fn();
     wrapper.vm.$refs.navbar.removeLoader = jest.fn();
+    const closestShops = {
+        data: {
+            providers: [
+                { id: 1, name: "Shop 1" },
+                { id: 2, name: "Shop 2" },
+            ],
+        },
+    };
 
+    wrapper.vm.findClosestApplicableShops = jest.fn().mockImplementation(() => {
+        return new Promise((resolve) => resolve(closestShops));
+    });
     return { wrapper };
 }

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

@@ -81,13 +81,20 @@
                             </div>
                         </div>
                     </transition>
+                    <alert
+                        ref="AlertNoService"
+                        v-if="displayNoServiceAlert"
+                        class="my-4"
+                        cmsWidgetName="AlertNoServiceWidget"
+                        alertClass="alert-danger"
+                        v-bind:isDismissible="false" />
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
                         :isDisabled="!meta.valid"
                         @ForwardClicked="forwardButtonAction"
                         @back-clicked="backButtonAction"
-                        :isForwardActionDisabled="!meta.valid" />
+                        :isForwardActionDisabled="!meta.valid || displayNoServiceAlert" />
                 </div>
             </div>
         </div>
@@ -177,6 +184,7 @@ export default {
             displayInvalidZipAlert: false,
             showServiceZipField: this.getServiceZipFromStore(),
             isZipServiceable: false,
+            displayNoServiceAlert: false,
         };
     },
     methods: {
@@ -293,6 +301,17 @@ export default {
                 return this.$refs.navbar.removeLoader();
             }
             this.displayInvalidZipAlert = false;
+
+            if (this.serviceZipCode != null && this.isHeavyTruck) {
+                const closestShops = await this.findClosestApplicableShops(
+                    this.serviceZipCode,
+                    this.carId
+                );
+                this.displayNoServiceAlert = !closestShops?.data?.providers?.length;
+                if (this.displayNoServiceAlert) {
+                    return this.$refs.navbar.removeLoader();
+                }
+            }
             const carsFound = resultMap.vinLookupResponse.vinVehicles;
 
             // Handle cases for different amounts of VINS found for the address.
@@ -444,6 +463,7 @@ export default {
             this.displayNonServiceableZipAlert = false;
             this.displayMatchedDifferentVehicleAlert = false;
             this.displayVinLookupByHomeAddressNotAllowedAlert = false;
+            this.displayNoServiceAlert = false;
         },
     },
     mounted() {
@@ -495,6 +515,7 @@ export default {
             handler(newValue) {
                 // If they modify the service zip code, then hide the error message.
                 this.displayNonServiceableZipAlert = false;
+                this.displayNoServiceAlert = false;
             },
         },
         showServiceZipField: {

src/layouts/license-plate-lookup/license-plate-lookup.spec.js

@@ -620,6 +620,8 @@ function setupMocks({
     validateZipResponse = { zipCodeCtu: null, isServiceable: false, isValid: true, state: null },
     //Values to set in the state store
     carId = null,
+    isHeavyTruck = true,
+    displayNoServiceAlert = true,
     serviceLocationZipCode = null,
     registrationZipCode = null,
     licensePlate = null, //"TESTPLATE",
@@ -672,6 +674,8 @@ function setupMocks({
                         zipCode: registrationZipCode,
                     },
                     carId: carId,
+                    isBigTruck: isHeavyTruck,
+                    canSafeliteService: true,
                 },
                 order: {
                     customer: {
@@ -716,5 +720,17 @@ function setupMocks({
     wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
     wrapper.vm.$refs.navbar.updateButtonText = jest.fn();
     wrapper.vm.$refs.navbar.removeLoader = jest.fn();
+    const closestShops = {
+        data: {
+            providers: [
+                { id: 1, name: "Shop 1" },
+                { id: 2, name: "Shop 2" },
+            ],
+        },
+    };
+
+    wrapper.vm.findClosestApplicableShops = jest.fn().mockImplementation(() => {
+        return new Promise((resolve) => resolve(closestShops));
+    });
     return { wrapper, apiPromise };
 }

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

@@ -76,6 +76,7 @@
                         :manualCopy="AlertMatchedDifferentVehicleBody"
                         alertClass="alert-warning"
                         v-bind:isDismissible="false" />
+
                     <alert
                         ref="AlertNoService"
                         v-if="displayNoServiceAlert"
@@ -87,9 +88,9 @@
                     <navbar
                         ref="navbar"
                         cmsWidgetName="FunnelFooterWidget"
-                        :isForwardActionDisabled="!meta.valid"
+                        :isForwardActionDisabled="!meta.valid || displayNoServiceAlert"
                         @back-clicked="backButtonAction"
-                        @ForwardClicked="forwardButtonAction || displayNoServiceAlert" />
+                        @ForwardClicked="forwardButtonAction" />
                 </div>
             </div>
         </div>
@@ -177,6 +178,7 @@ export default {
             displayInvalidZipAlert: false,
             showServiceZipField: this.getServiceZipFromStore(),
             isZipServiceable: false,
+            displayNoServiceAlert: false,
         };
     },
     methods: {
@@ -279,6 +281,17 @@ export default {
                 this.displayInvalidZipAlert = true;
                 return this.$refs.navbar.removeLoader();
             }
+
+            if (this.isHeavyTruck) {
+                const closestShops = await this.findClosestApplicableShops(
+                    this.serviceZipCode,
+                    this.carId
+                );
+                this.displayNoServiceAlert = !closestShops?.data?.providers?.length;
+                if (this.displayNoServiceAlert) {
+                    return this.$refs.navbar.removeLoader();
+                }
+            }
             // Check if the CarId has changed.
             this.isCarIdDifferent =
                 vinLookup.data.vehicle.carId !== this.$store.getters.vehicle.carId;
@@ -393,6 +406,7 @@ export default {
             this.displayMatchedDifferentVehicleAlert = false;
             this.displayVinLookupByHomeAddressNotAllowedAlert = false;
             this.displayInvalidZipAlert = false;
+            this.displayNoServiceAlert = false;
         },
     },
     mounted() {
@@ -437,6 +451,7 @@ export default {
         serviceZipCode() {
             // If they modify the service zip code, then hide the error message.
             this.displayNonServiceableZipAlert = false;
+            this.displayNoServiceAlert = false;
             this.$refs.navbar.updateButtonText(
                 this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
             );

src/layouts/service-zip/service-zip.spec.js

@@ -415,6 +415,21 @@ describe("service-zip.vue", () => {
             expect(wrapper.vm.displayInvalidZipAlert).toBe(false);
             expect(wrapper.vm.displayNonServiceableZipAlert).toBe(false);
         });
+
+        test("should hide the AlertNoService when displayNoServiceAlert is false", async () => {
+            // Arrange
+            // no changes to store
+            applyMockStoreDataToGetters();
+
+            const wrapper = setupMocks({});
+            wrapper.vm.serviceZipCode = "12345";
+
+            wrapper.vm.displayNoServiceAlert = false;
+            await wrapper.vm.forwardButtonAction();
+
+            // Check if the AlertNoService component is rendered
+            expect(wrapper.vm.displayNoServiceAlert).toBe(false);
+        });
     });
 });
 
@@ -511,5 +526,15 @@ function setupMocks({ customMountOptions, customZipQuery, customZipDataResponse
     ];
 
     const wrapper = shallowMount(serviceZip, mountOptions);
+    wrapper.vm.findClosestApplicableShops = jest.fn().mockImplementation(() => {
+        return Promise.resolve({
+            data: {
+                providers: [
+                    { id: 1, name: "Shop 1" },
+                    { id: 2, name: "Shop 2" },
+                ],
+            },
+        });
+    });
     return wrapper;
 }

src/layouts/service-zip/service-zip.vue

@@ -46,11 +46,18 @@
                             v-model="customAlertData"
                             v-if="displayNonServiceableZipAlert"
                             alertClass="alert-danger" />
+                        <alert
+                            ref="AlertNoService"
+                            v-if="displayNoServiceAlert"
+                            class="my-4"
+                            cmsWidgetName="AlertNoServiceWidget"
+                            alertClass="alert-danger"
+                            v-bind:isDismissible="false" />
 
                         <navbar
                             cmsWidgetName="FunnelFooterWidget"
                             ref="navbar"
-                            :isForwardActionDisabled="!meta.valid"
+                            :isForwardActionDisabled="!meta.valid || displayNoServiceAlert"
                             @back-clicked="backButtonAction"
                             @ForwardClicked="forwardButtonAction" />
                     </div>
@@ -114,6 +121,7 @@ export default {
             isHeavyTruck: this.getIsVehicleHeavyTruckServiceableFromStore(),
             displayInvalidZipAlert: false,
             displayNonServiceableZipAlert: false,
+            displayNoServiceAlert: false, // Initialize the property
         };
     },
 
@@ -278,17 +286,6 @@ export default {
                     return this.$refs.navbar.removeLoader();
                 }
             }
-            if (this.isHeavyTruck) {
-                const closestShops = await this.findClosestApplicableShops(
-                    this.serviceZipCode,
-                    this.carId
-                );
-                this.displayNoServiceAlert = !closestShops?.data?.providers?.length;
-                if (this.displayNoServiceAlert) {
-                    return this.$refs.navbar.removeLoader();
-                }
-            }
-
             const payment = this.$store.getters.payment;
             const policy = this.$store.getters.policy;
 
@@ -346,7 +343,6 @@ export default {
         serviceZipCode() {
             this.displayNonServiceableZipAlert = false;
             this.displayNoServiceAlert = false;
-            this.displayNoServiceAlert = false;
         },
     },
     components: {

src/layouts/vin-lookup/vin-lookup.spec.js

@@ -258,6 +258,23 @@ describe("vin-lookup.vue", () => {
             // Assert
             expect(wrapper.findAllComponents({ name: "alert" }).length).toBe(1);
         });
+
+        test("should hide the AlertNoService when displayNoServiceAlert is false", async () => {
+            const { wrapper } = setupMocks({
+                isZipServiceable: true,
+                displayNoServiceAlert: false,
+                lookupVinbyAddressResponse: {
+                    isStatePermissible: true,
+                    vinVehicles: [], // Return no vehicles
+                },
+            });
+            // Ensure displayNoServiceAlert is false
+            await wrapper.setData({ displayNoServiceAlert: false });
+            await wrapper.vm.forwardButtonAction();
+            // Check if the AlertNoService component is not rendered
+            const alertNoService = wrapper.findComponent({ ref: "AlertNoService" });
+            expect(alertNoService.exists()).toBe(false);
+        });
     });
 
     describe("getVinFromImage", () => {

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

@@ -111,10 +111,18 @@
                         "
                         alertClass="alert-success" />
 
+                    <alert
+                        ref="AlertNoService"
+                        v-if="displayNoServiceAlert"
+                        class="my-4"
+                        cmsWidgetName="AlertNoServiceWidget"
+                        alertClass="alert-danger"
+                        v-bind:isDismissible="false" />
+
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
-                        :isForwardActionDisabled="!meta.valid"
+                        :isForwardActionDisabled="!meta.valid || displayNoServiceAlert"
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
                 </div>
@@ -209,6 +217,7 @@ export default {
             displayVinNotFoundAlert: false,
             displayMatchedDifferentVehicleAlert: false,
             displayVinScanFailedAlert: false,
+            displayNoServiceAlert: false,
         };
     },
     methods: {
@@ -247,6 +256,9 @@ export default {
                 );
             }
         },
+        getCarIdfromStore() {
+            return this.$store.getters.vehicle.carId;
+        },
         getIsVehicleHeavyTruckServiceableFromStore() {
             return store.getters.vehicle.isBigTruck && store.getters.vehicle.canSafeliteService;
         },
@@ -499,7 +511,6 @@ export default {
             this.displayVinNotFoundAlert = false;
             this.displayVinScanFailedAlert = false;
             this.displayNoServiceAlert = false;
-            this.displayNoServiceAlert = false;
         },
     },
     mounted() {
@@ -576,6 +587,7 @@ export default {
         },
         serviceZipCode() {
             this.displayNonServiceableZipAlert = false;
+            this.displayNoServiceAlert = false;
         },
     },
     components: {