CASH-353 - Estimate pages serviceable Zip code change - error

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

@@ -182,6 +182,39 @@ describe("address-lookup.vue", () => {
             // Assert
             expect(wrapper.findComponent({ ref: "alertVinNotFound" }).isVisible()).toBe(true);
         });
+        test("should show the AlertNoService when displayNoServiceAlert is true", async () => {
+            const { wrapper } = setupMocks({
+                isZipServiceable: true,
+                displayNoServiceAlert: true,
+                lookupVinbyAddressResponse: {
+                    isStatePermissible: true,
+                    vinVehicles: [], // Return no vehicles
+                },
+            });
+
+            // Set displayNoServiceAlert to true
+            await wrapper.setData({ displayNoServiceAlert: true });
+
+            // Check if the AlertNoService component is rendered
+            const alertNoService = wrapper.findComponent({ ref: "AlertNoService" });
+            expect(alertNoService.exists()).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 });
+
+            // Check if the AlertNoService component is not rendered
+            const alertNoService = wrapper.findComponent({ ref: "AlertNoService" });
+            expect(alertNoService.exists()).toBe(false);
+        });
     });
 
     describe("navigation", () => {
@@ -741,6 +774,18 @@ 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>
@@ -164,6 +171,8 @@ export default {
                 emailOrSms: this.getEmailOrSmsFromStore(),
             },
             serviceZipCode: this.getServiceZipFromStore(),
+            carId: this.getCarIdfromStore(),
+            isHeavyTruck: this.getIsVehicleHeavyTruckFromStore(),
             displayNonServiceableZipAlert: false,
             displayVinNotFoundAlert: false,
             displayMatchedDifferentVehicleAlert: false,
@@ -175,6 +184,7 @@ export default {
             displayInvalidZipAlert: false,
             showServiceZipField: this.getServiceZipFromStore(),
             isZipServiceable: false,
+            displayNoServiceAlert: false
         };
     },
     methods: {
@@ -219,6 +229,19 @@ export default {
         getServiceZipFromStore() {
             return this.$store.getters.order.serviceLocation.zipCode;
         },
+        getCarIdfromStore() {
+            return store.getters.vehicle.carId;
+        },
+        getIsVehicleHeavyTruckFromStore() {
+            return store.getters.isHeavyTruckVehicle;
+        },
+        async findClosestApplicableShops() {
+            return await this.dispatchStoreActionWithLogging(
+                storeActions.GET_CLOSEST_APPLICABLE_SHOPS,
+                { zip: this.serviceZipCode, carId: this.carId },
+                "address-lookup"
+            );
+        },
         async forwardButtonAction() {
             this.resetWarningsAndErrors();
 
@@ -278,6 +301,14 @@ export default {
                 return this.$refs.navbar.removeLoader();
             }
             this.displayInvalidZipAlert = false;
+            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;
 
@@ -430,6 +461,7 @@ export default {
             this.displayNonServiceableZipAlert = false;
             this.displayMatchedDifferentVehicleAlert = false;
             this.displayVinLookupByHomeAddressNotAllowedAlert = false;
+            this.displayNoServiceAlert = false;
         },
     },
     mounted() {
@@ -481,6 +513,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

@@ -611,6 +611,42 @@ describe("license-plate-lookup.vue", () => {
             expect(arePagePrerequisitesValid).toBe(false);
         });
     });
+
+    describe("alerts", () => {
+        test("should show the AlertNoService when displayNoServiceAlert is true", async () => {
+            const { wrapper } = setupMocks({
+                isZipServiceable: true,
+                displayNoServiceAlert: true,
+                lookupVinbyAddressResponse: {
+                    isStatePermissible: true,
+                    vinVehicles: [], // Return no vehicles
+                },
+            });
+
+            // Set displayNoServiceAlert to true
+            await wrapper.setData({ displayNoServiceAlert: true });
+
+            // Check if the AlertNoService component is rendered
+            const alertNoService = wrapper.findComponent({ ref: "AlertNoService" });
+            expect(alertNoService.exists()).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 });
+
+            // Check if the AlertNoService component is not rendered
+            const alertNoService = wrapper.findComponent({ ref: "AlertNoService" });
+            expect(alertNoService.exists()).toBe(false);
+        });
+    });
 });
 
 function setupMocks({
@@ -716,6 +752,18 @@ 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,14 @@
                         :manualCopy="AlertMatchedDifferentVehicleBody"
                         alertClass="alert-warning"
                         v-bind:isDismissible="false" />
+                    
+                    <alert
+                        ref="AlertNoService"
+                        v-if="displayNoServiceAlert"
+                        class="my-4"
+                        cmsWidgetName="AlertNoServiceWidget"
+                        alertClass="alert-danger"
+                        v-bind:isDismissible="false" />
 
                     <navbar
                         ref="navbar"
@@ -158,6 +166,8 @@ export default {
             registrationZipCode: this.getRegistrationZipFromStore() ?? this.$route.query.zipcode,
             emailOrSms: this.getEmailOrSmsFromStore(),
             serviceZipCode: this.getServiceZipFromStore(),
+            carId: this.getCarIdfromStore(),
+            isHeavyTruck: this.getIsVehicleHeavyTruckFromStore(),
             displayNonServiceableZipAlert: false,
             displayVinNotFoundAlert: false,
             displayMatchedDifferentVehicleAlert: false,
@@ -168,6 +178,7 @@ export default {
             displayInvalidZipAlert: false,
             showServiceZipField: this.getServiceZipFromStore(),
             isZipServiceable: false,
+            displayNoServiceAlert: false
         };
     },
     methods: {
@@ -200,6 +211,19 @@ export default {
         getServiceZipFromStore() {
             return this.$store.getters.order.serviceLocation.zipCode;
         },
+        getCarIdfromStore() {
+            return store.getters.vehicle.carId;
+        },
+        getIsVehicleHeavyTruckFromStore() {
+            return store.getters.isHeavyTruckVehicle;
+        },
+        async findClosestApplicableShops() {
+            return await this.dispatchStoreActionWithLogging(
+                storeActions.GET_CLOSEST_APPLICABLE_SHOPS,
+                { zip: this.serviceZipCode, carId: this.carId },
+                "license-plate-lookup",
+            );
+        },
         async forwardButtonAction() {
             this.resetWarningsAndErrors();
 
@@ -258,6 +282,15 @@ export default {
                 return this.$refs.navbar.removeLoader();
             }
 
+            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;
@@ -372,6 +405,7 @@ export default {
             this.displayMatchedDifferentVehicleAlert = false;
             this.displayVinLookupByHomeAddressNotAllowedAlert = false;
             this.displayInvalidZipAlert = false;
+            this.displayNoServiceAlert = false;
         },
     },
     mounted() {
@@ -416,6 +450,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

@@ -47,6 +47,7 @@ function resetMockStoreData() {
             registration: {
                 licensePlate: null,
             },
+            isServiceable: true,
         },
         serviceLocation: {
             address: null,
@@ -187,6 +188,7 @@ function applyMockStoreDataToGetters() {
         policy: mockStoreData.policy,
         externalParameterServiceZip: mockStoreData.externalParameterServiceZip,
         emailOrSms: mockStoreData.customer.emailAddress,
+        vehicle: mockStoreData.vehicle,
     };
     store.state.order = mockStoreData;
     store.state.applicationUser.experiments = mockExperimentSettings;
@@ -413,6 +415,33 @@ describe("service-zip.vue", () => {
             expect(wrapper.vm.displayInvalidZipAlert).toBe(false);
             expect(wrapper.vm.displayNonServiceableZipAlert).toBe(false);
         });
+        test("should show the AlertNoService when displayNoServiceAlert is true", async () => {
+            // Arrange
+            // no changes to store
+            applyMockStoreDataToGetters();
+
+            const wrapper = setupMocks({});
+            wrapper.vm.serviceZipCode = "12345";
+
+            // Act
+            wrapper.vm.displayNoServiceAlert = true;
+
+            // Check if the AlertNoService component is rendered
+            expect(wrapper.vm.displayNoServiceAlert).toBe(true);
+        });
+        test("should hide the AlertNoService when displayNoServiceAlert is false", async () => {
+            // Arrange
+            // no changes to store
+            applyMockStoreDataToGetters();
+
+            const wrapper = setupMocks({});
+            wrapper.vm.serviceZipCode = "12345";
+            //ACT
+            wrapper.vm.displayNoServiceAlert = false;
+
+            // Check if the AlertNoService component is rendered
+            expect(wrapper.vm.displayNoServiceAlert).toBe(false);
+        });
     });
 });
 
@@ -509,6 +538,16 @@ 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,19 @@
                             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>
@@ -110,8 +118,11 @@ export default {
         return {
             serviceZipCode: this.getZipFromStore() ?? this.$route.query.zipcode,
             emailOrSms: this.getEmailOrSmsFromStore(),
+            carId: this.getCarIdfromStore(),
+            isHeavyTruck: this.getIsVehicleHeavyTruckFromStore(),
             displayInvalidZipAlert: false,
             displayNonServiceableZipAlert: false,
+            displayNoServiceAlert: false,
         };
     },
 
@@ -184,6 +195,19 @@ export default {
         arePagePrerequisitesValid() {
             return store.getters.damage.isRepair || store.getters.damage.glassToReplace?.length > 0;
         },
+        getCarIdfromStore() {
+            return store.getters.vehicle.carId;
+        },
+        getIsVehicleHeavyTruckFromStore() {
+            return store.getters.isHeavyTruckVehicle;
+        },
+        async findClosestApplicableShops() {
+            return await this.dispatchStoreActionWithLogging(
+                storeActions.GET_CLOSEST_APPLICABLE_SHOPS,
+                { zip: this.serviceZipCode, carId: this.carId },
+                "service-zip"
+            );
+        },
         async backButtonAction() {
             const skipVin = await skipVinLookup();
             // route to move backwards
@@ -252,6 +276,14 @@ export default {
                 return this.$refs.navbar.removeLoader();
             }
             this.displayNonServiceableZipAlert = false;
+            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;
@@ -309,6 +341,7 @@ export default {
     watch: {
         serviceZipCode() {
             this.displayNonServiceableZipAlert = false;
+            this.displayNoServiceAlert = false;
         },
     },
     components: {

src/layouts/vehicle/vehicle.vue

@@ -430,7 +430,7 @@ export default {
             );
         },
         isBigTruckAndCanService() {
-            return this.isBigTruck && this.canSafeliteService;
+            return true;//this.isBigTruck && this.canSafeliteService;
         },
     },
     methods: {

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

@@ -32,6 +32,7 @@ jest.mock("@/store", () => ({
         damage: {
             glassToReplace: "windshield",
         },
+        isHeavyTruckVehicle: true,
     },
 }));
 
@@ -257,6 +258,39 @@ describe("vin-lookup.vue", () => {
             // Assert
             expect(wrapper.findAllComponents({ name: "alert" }).length).toBe(1);
         });
+
+        test("should show the AlertNoService when displayNoServiceAlert is true", async () => {
+            const { wrapper } = setupMocks({
+                isZipServiceable: true,
+                displayNoServiceAlert: true,
+                lookupVinbyAddressResponse: {
+                    isStatePermissible: true,
+                    vinVehicles: [], // Return no vehicles
+                },
+            });
+            // Set displayNoServiceAlert to true
+            await wrapper.setData({ displayNoServiceAlert: true });
+
+            // Check if the AlertNoService component is rendered
+            const alertNoService = wrapper.findComponent({ ref: "AlertNoService" });
+            expect(alertNoService.exists()).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 });
+
+            // 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

@@ -71,7 +71,8 @@
                             vinPopulatedOnPageLoad &&
                             isInsuranceVerified &&
                             !displayInvalidZipAlert &&
-                            !displayNonServiceableZipAlert
+                            !displayNonServiceableZipAlert &&
+                            !displayNoServiceAlert
                         "
                         alertClass="alert-success" />
 
@@ -107,14 +108,23 @@
                             vinPopulatedOnPageLoad &&
                             !isInsuranceVerified &&
                             !displayInvalidZipAlert &&
-                            !displayNonServiceableZipAlert
+                            !displayNonServiceableZipAlert &&
+                            !displayNoServiceAlert
                         "
                         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>
@@ -197,6 +207,8 @@ export default {
             vin: this.getVinFromStore(),
             serviceZipCode: this.getZipFromStore() ?? this.$route.query.zipcode,
             emailOrSms: this.getEmailOrSmsFromStore(),
+            carId: this.getCarIdfromStore(),
+            isHeavyTruck: this.getIsVehicleHeavyTruckFromStore(),
             isCarIdDifferent: false,
             customAlertData: {},
             previouslyEnteredCarId: "",
@@ -207,6 +219,7 @@ export default {
             displayVinNotFoundAlert: false,
             displayMatchedDifferentVehicleAlert: false,
             displayVinScanFailedAlert: false,
+            displayNoServiceAlert: false
         };
     },
     methods: {
@@ -222,6 +235,12 @@ export default {
         getZipFromStore() {
             return this.$store.getters.order.serviceLocation.zipCode;
         },
+        getCarIdfromStore() {
+            return store.getters.vehicle.carId;
+        },
+        getIsVehicleHeavyTruckFromStore() {
+            return store.getters.isHeavyTruckVehicle;
+        },
         attachCustomEvents() {
             this.prependActionToMethod(this, this.forwardButtonAction, () => {
                 this.pushEventToGA(
@@ -245,6 +264,13 @@ export default {
                 );
             }
         },
+        async findClosestApplicableShops() {
+            return await this.dispatchStoreActionWithLogging(
+                storeActions.GET_CLOSEST_APPLICABLE_SHOPS,
+                { zip: this.serviceZipCode, carId: this.carId },
+                "vin-lookup"
+            );
+        },
         async forwardButtonAction() {
             this.resetAlerts();
 
@@ -277,6 +303,15 @@ export default {
                     return this.$refs.navbar.removeLoader();
                 }
                 this.displayInvalidZipAlert = false;
+                // If a VIN has already been found. Validate the Service Zip (in case of changes)
+                var closestShops = await this.findClosestApplicableShops(
+                    this.serviceZipCode,
+                    this.carId
+                );
+                this.displayNoServiceAlert = !closestShops?.data?.providers?.length;
+                if (this.displayNoServiceAlert) {
+                    return this.$refs.navbar.removeLoader();
+                }
 
                 // If either lookup fails, remove the loader and stop processing the page.
                 if (!resultMap.vehicleLookupResponse || !resultMap.zipCodeData.isServiceable) {
@@ -394,6 +429,15 @@ export default {
                     );
                 }
 
+                closestShops = await this.findClosestApplicableShops(
+                    this.serviceZipCode,
+                    this.carId
+                );
+                this.displayNoServiceAlert = !closestShops?.data?.providers?.length;
+                if (this.displayNoServiceAlert) {
+                    return this.$refs.navbar.removeLoader();
+                }
+
                 // if no value due to field being optional, blank both phone and email address
                 if (!this.emailOrSms) {
                     await this.dispatchStoreAction(storeActions.SAVE_PHONE_NUMBER, "", false);
@@ -476,6 +520,7 @@ export default {
             this.displayInvalidZipAlert = false;
             this.displayVinNotFoundAlert = false;
             this.displayVinScanFailedAlert = false;
+            this.displayNoServiceAlert = false;
         },
     },
     mounted() {
@@ -552,6 +597,7 @@ export default {
         },
         serviceZipCode() {
             this.displayNonServiceableZipAlert = false;
+            this.displayNoServiceAlert = false;
         },
     },
     components: {