Merge pull request #271 from Safelite/feature/digital/SSR-353

Feature/digital/ssr 353

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

@@ -1,6 +1,34 @@
 import { shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import serviceLocation from "@/layouts/service-location/service-location.vue";
+import { getServiceabilityDetails, getZipCodeData } from "@/helpers/service-location-helper";
+
+// Define Mocks
+jest.mock("@/helpers/cms-content-helper", () => ({
+    fetchCmsContentForPage: jest.fn(() => {
+        return Promise.resolve("content");
+    }),
+}));
+
+const mockGetServiceabilityDetails = (mockServiceZipCode) => {
+    const serviceabilityDetails = {
+        isGlassServiceableInshop: true,
+        isRecalibrationServiceableInshop: true,
+        isGlassServiceableMobile: true,
+        isRecalibrationServiceableMobile: true,
+    };
+
+    return Promise.resolve(serviceabilityDetails);
+};
+
+jest.mock(
+    "@/helpers/service-location-helper",
+    () => ({
+        getServiceabilityDetails: jest.fn((mockServiceZipCode) => {
+            return mockGetServiceabilityDetails(mockServiceZipCode);
+        }),
+    })
+);
 
 const mockMixin = {
     methods: {
@@ -26,6 +54,14 @@ const mockMixin = {
                 });
             }
 
+            if (zip === "45433") {
+                return Promise.resolve({
+                    containsMilitaryBase: true,
+                    isValid: true,
+                    state: "OH",
+                });
+            }
+
             return Promise.resolve({
                 containsMilitaryBase: false,
                 isValid: false,
@@ -98,6 +134,34 @@ describe("updating service zip", () => {
         // Assert
         expect(wrapper.vm.selectedAppointmentType).toStrictEqual(null);
     });
+
+    test("displays military zip message when zip is updated", () => {
+        // Arrange
+        const { wrapper } = setupMocks({});
+
+        const mobileLocationQuestionsComponent = wrapper.findComponent({
+            ref: "mobileLocationQuestions",
+        });
+        mobileLocationQuestionsComponent.resetComponent = jest.fn();
+
+        const serviceZipCodeComponent = wrapper.findComponent({
+            ref: "serviceZipCodeQuestion",
+        });
+        serviceZipCodeComponent.resetMobileFeePart = jest.fn();
+
+        expect(wrapper.vm.zipContainsMilitaryBase).toBe(false);
+
+        const newServiceZipCodeQuestion = {
+            zipCode: "45433",
+            state: "OH",
+        };
+
+        // Act
+        serviceZipCodeComponent.vm.$emit("updated-contains-military-base", true);
+
+        // Assert
+        expect(wrapper.vm.zipContainsMilitaryBase).toBe(true);
+    });
 });
 
 function setupMocks() 

src/layouts/service-location/service-location.vue

@@ -12,7 +12,15 @@
                                     <serviceZipModalQuestion
                                         v-model="serviceZipCodeQuestion"
                                         ref="serviceZipCodeQuestion"
+                                        @updated-serviceability="setServiceabilityDetails"
+                                        @updated-contains-military-base="setContainsMilitaryBase"
                                         modalWidgetName="ServiceZipModalWidget" />
+                                    <alert
+                                        ref="alertMilitaryBaseZip"
+                                        class="my-5"
+                                        cmsWidgetName="AlertMilitaryBaseZipWidget"
+                                        v-if="displayMilitaryZipAlert"
+                                        alertClass="alert-warning" />
                                     <buttonQuestion
                                         cmsWidgetName="ServiceTypeQuestionWidget"
                                         :questionText="questionText"
@@ -58,6 +66,7 @@ import { useMainStore } from "@/store";
 import { getServiceabilityDetails, getZipCodeData } from "@/helpers/service-location-helper";
 
 // Import Component
+import alert from "@/ux-components/alert/alert";
 import baseFormMixin from "@/mixins/base-form-mixin";
 import baseMixin from "@/mixins/base-mixin";
 import { Form, defineRule } from "vee-validate";
@@ -100,6 +109,10 @@ export default {
         
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
+            vm.setData(
+                resultMap.zipCodeData,
+                resultMap.serviceabilityDetails,
+            )
         });
     },
     setup() {
@@ -111,7 +124,10 @@ export default {
             zipCode: this.mainStore.order.customer.address.zipCode,
             state: this.mainStore.order.customer.address.state,
             isServiceZipServiceable: null,
+            isGlassServiceableMobile: null,
+            isRecalibrationServiceableMobile: null,
             selectedAppointmentType: "",
+            zipContainsMilitaryBase: false,
         };
     },
     computed: {
@@ -138,6 +154,16 @@ export default {
 
                 this.$nextTick();
             },
+        },
+        isServiceableMobile() {
+            if (this.isRecalibrationServiceableMobile !== null) {
+                return this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile;
+            } else {
+                return this.isGlassServiceableMobile;
+            }
+        },
+        displayMilitaryZipAlert() {
+            return this.zipContainsMilitaryBase && this.isServiceableMobile;
         }        
     },
     methods: {
@@ -154,7 +180,30 @@ export default {
             //validate and save data here
             this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route);
         },
-        resetDependentState() {},
+        resetDependentState() {
+
+        },
+        setData(zipCodeData, serviceabilityDetails) {
+            if (zipCodeData) {
+                this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
+            }
+            if (serviceabilityDetails) {
+                this.setServiceabilityDetails(serviceabilityDetails);
+            }
+        },
+        setContainsMilitaryBase(val) {
+            if (this.zipContainsMilitaryBase !== val) {
+                this.zipContainsMilitaryBase = val;
+            }
+        },
+        setServiceabilityDetails(serviceabilityDetails) {
+            this.isGlassServiceableInshop = serviceabilityDetails.isGlassServiceableInshop;
+            this.isRecalibrationServiceableInshop =
+                serviceabilityDetails.isRecalibrationServiceableInshop;
+            this.isGlassServiceableMobile = serviceabilityDetails.isGlassServiceableMobile;
+            this.isRecalibrationServiceableMobile =
+                serviceabilityDetails.isRecalibrationServiceableMobile;
+        },
     },
     components: {
         siteFooter,
@@ -163,6 +212,7 @@ export default {
         buttonQuestion,
         Form,
         serviceZipModalQuestion,
+        alert
     },
 };
 </script>