Military zip updates to front end

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.vue

@@ -4,6 +4,17 @@
             <loadingModal ref="loadingModal" />
             <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
             <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+            <div class="fade-on-route-transition sub-container make-tall">
+                <alert
+                    class="my-4"
+                    cmsWidgetName="AlertMilitaryBaseZipWidget"
+                    v-if="zipContainsMilitaryBase"
+                    alertClass="alert-warning" />
+                <div>shouldDisableForwardAction: {{ shouldDisableForwardAction }}</div>
+                <div>
+                    <button @click="toggleZip">Toggle Zip</button>
+                </div>
+            </div>
             <serviceZipModalQuestion
                 v-model="serviceZipCodeQuestion"
                 ref="serviceZipCodeQuestion"
@@ -18,7 +29,7 @@
             <funnel-footer
                 cmsWidgetName="FunnelFooterWidget"
                 ref="funnelFooter"
-                :isForwardActionDisabled="!meta.valid"
+                :isForwardActionDisabled="!meta.valid || shouldDisableForwardAction"
                 @back-clicked="backButtonAction"
                 @ForwardClicked="forwardButtonAction" />
         </div>
@@ -27,6 +38,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,12 +46,17 @@ 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";
 import { getPricedMobileFeePart } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
 import store from "@/store";
 
+import store from "@/store";
+
 export default {
     name: "service-location",
     data() {
@@ -54,10 +71,15 @@ export default {
             isZipServiceableInShop: null,
             mobileFeePart: null,
         };
+        return {
+            serviceLocationZip: 0,
+            zipContainsMilitaryBase: false,
+        };
     },
     async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+        const zip = store.getters.order.serviceLocation.zipCode;
 
         const serviceZipCode = store.getters.order.serviceLocation.zipCode;
         const serviceType = store.getters.damage.isRepair ? "Repair" : "Replace";
@@ -81,6 +103,10 @@ export default {
                 resultKey: "mobileFeePart",
                 promise: mobileFeePartPromise,
             },
+            {
+                resultKey: "zipCodeData",
+                promise: baseMixin.methods.getZipCodeData(zip),
+            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -89,6 +115,8 @@ export default {
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
             vm.setData(resultMap.mobileFeePart);
+            vm.zipContainsMilitaryBase = resultMap.zipCodeData.containsMilitaryBase;
+            vm.serviceLocationZip = zip;
         });
     },
     computed: {
@@ -132,6 +160,11 @@ export default {
             },
         },
     },
+    computed: {
+        shouldDisableForwardAction() {
+            return this.zipContainsMilitaryBase;
+        },
+    },
     methods: {
         arePagePrerequisitesValid() {
             return (
@@ -186,8 +219,25 @@ export default {
         forwardButtonAction() {
             navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
         },
+        toggleZip() {
+            if (this.serviceLocationZip == 43228) {
+                this.serviceLocationZip = 45433;
+            } else {
+                this.serviceLocationZip = 43228;
+            }
+        },
+    },
+    watch: {
+        serviceLocationZip(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,