Merge pull request #1003 from Safelite/feature/richardson/CSR-1064

Military Zip integration to service location component

src/fmg-components/funnel-footer/funnel-footer.vue

@@ -34,6 +34,7 @@ import buttonMain from "@/ux-components/button-main/button-main";
 
 export default {
     name: "funnelFooter",
+    emits: ["BackClicked", "ForwardClicked"], // <--- should remove oodles of warnings in dev tools
     props: {
         isForwardActionDisabled: Boolean,
         isBackButtonHidden: { type: Boolean, default: false },

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

@@ -41,6 +41,22 @@ jest.mock(
     })
 );
 
+jest.spyOn(baseMixin.methods, "getZipCodeData").mockImplementation((serviceZipCode) => {
+    return new Promise((resolve) => {
+        let mockContainsMilitaryBase = false;
+        if (serviceZipCode === 45433 || serviceZipCode === "45433") {
+            mockContainsMilitaryBase = true;
+        }
+        resolve({
+            containsMilitaryBase: mockContainsMilitaryBase,
+            isValid: true,
+            isServiceable: true,
+            state: "OH",
+            zipCodeCtu: "01820",
+        });
+    });
+});
+
 jest.mock("@/store", () => ({
     commit: jest.fn(),
     dispatch: jest.fn(),
@@ -291,6 +307,24 @@ describe("service-location.vue", () => {
             // Assert
             expect(wrapper.vm.mobileLocationQuestions).toStrictEqual(newMobileLocationQuestions);
         });
+
+        test("displays military zip message when zip is updated", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+            wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
+            expect(wrapper.vm.zipContainsMilitaryBase).toBe(false);
+
+            const newServiceZipCodeQuestion = {
+                zipCode: "45433",
+                state: "OH",
+            };
+
+            // Assert
+            wrapper.setData({ zipCode: newServiceZipCodeQuestion.zipCode });
+            wrapper.vm.$nextTick(() => {
+                expect(wrapper.vm.zipContainsMilitaryBase).toBe(true);
+            });
+        });
     });
 
     describe("updating mobile location", () => {

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

@@ -9,6 +9,11 @@
                 ref="serviceZipCodeQuestion"
                 linkWidgetName="ServiceZipLinkWidget"
                 modalWidgetName="ServiceZipModalWidget" />
+            <alert
+                class="my-4"
+                cmsWidgetName="AlertMilitaryBaseZipWidget"
+                v-if="zipContainsMilitaryBase"
+                alertClass="alert-warning" />
             <mobileLocationModalQuestions
                 v-model="mobileLocationQuestions"
                 :mobileFeePart="mobileFeePart"
@@ -18,7 +23,7 @@
             <funnel-footer
                 cmsWidgetName="FunnelFooterWidget"
                 ref="funnelFooter"
-                :isForwardActionDisabled="!meta.valid"
+                :isForwardActionDisabled="!meta.valid || shouldDisableForwardAction"
                 @back-clicked="backButtonAction"
                 @ForwardClicked="forwardButtonAction" />
         </div>
@@ -27,6 +32,7 @@
 
 <script>
 // Components
+import alert from "@/ux-components/alert/alert";
 import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
 import mobileLocationModalQuestions from "@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions";
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
@@ -34,6 +40,9 @@ import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import { Form } from "vee-validate";
+
+// Supporting files
+import baseMixin from "@/mixins/base-mixin.js";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
@@ -53,12 +62,12 @@ export default {
             isZipServiceableMobile: null,
             isZipServiceableInShop: null,
             mobileFeePart: null,
+            zipContainsMilitaryBase: false,
         };
     },
     async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
-
         const serviceZipCode = store.getters.order.serviceLocation.zipCode;
         const serviceType = store.getters.damage.isRepair ? "Repair" : "Replace";
         const parentAccountNumber = store.getters.payment.parentAccountNumber;
@@ -81,6 +90,10 @@ export default {
                 resultKey: "mobileFeePart",
                 promise: mobileFeePartPromise,
             },
+            {
+                resultKey: "zipCodeData",
+                promise: baseMixin.methods.getZipCodeData(serviceZipCode),
+            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -89,6 +102,8 @@ export default {
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
             vm.setData(resultMap.mobileFeePart);
+            vm.zipContainsMilitaryBase = resultMap.zipCodeData.containsMilitaryBase;
+            vm.zipCode = serviceZipCode;
         });
     },
     computed: {
@@ -131,6 +146,9 @@ export default {
                 this.isVehicleProtected = newValue.isVehicleProtected;
             },
         },
+        shouldDisableForwardAction() {
+            return this.zipContainsMilitaryBase;
+        },
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -187,7 +205,17 @@ export default {
             navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
         },
     },
+    watch: {
+        zipCode(current, previous) {
+            if (current !== previous) {
+                baseMixin.methods.getZipCodeData(current).then((r) => {
+                    this.zipContainsMilitaryBase = r.containsMilitaryBase;
+                });
+            }
+        },
+    },
     components: {
+        alert,
         serviceZipModalQuestion,
         mobileLocationModalQuestions,
         funnelHeader,

src/mixins/base-mixin.js

@@ -57,6 +57,7 @@ export default {
             );
 
             return {
+                containsMilitaryBase: serviceZipValidationResponse.data.containsMilitaryBase,
                 isValid: serviceZipValidationResponse.data.isValid,
                 isServiceable: serviceZipValidationResponse.data.isServiceable,
                 state: serviceZipValidationResponse.data.state,