Merge branch 'develop' into feature/CSR-1073

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/fmg-components/funnel-header/menu-modal/menu-modal.vue

@@ -66,7 +66,7 @@
                     <textLink
                         linkType="navigation"
                         text="Notice at collection"
-                        href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html"
+                        href="https://www.safelite.com/ccpa-privacy-policy"
                         target="_blank" />
                 </div>
                 <div class="modal-footer d-flex justify-content-start">

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

@@ -50,7 +50,6 @@
                         v-model="addressModel.state"
                         ref="state"
                         :options="stateOptions"
-                        initialValue="FL"
                         validationRules="state-required" />
                 </div>
                 <div class="col">
@@ -406,6 +405,11 @@ export default {
                 }
             },
         },
+        modelValue: {
+            handler() {
+                this.setupAddressLookup();
+            },
+        },
     },
     components: {
         textboxQuestion,

src/layouts/service-location/helpers/service-location-helper/service-location-helper.js

@@ -1,13 +1,8 @@
 import { storeActions } from "@/constants/store-actions";
 import baseMixin from "@/mixins/base-mixin.js";
 
-export async function getPricedMobileFeePart(
+export async function getPricedMobileFeePart(serviceZipCode) {
-    serviceZipCode,
+    if (!serviceZipCode) {
-    serviceType,
-    parentAccountNumber,
-    billToAccountNumber
-) {
-    if (!serviceZipCode || !serviceType || !parentAccountNumber) {
         return Promise.resolve(null);
     }
 
@@ -16,11 +11,7 @@ export async function getPricedMobileFeePart(
     // Get the Mobile Fee Part
     const mobileFeePart = await baseMixin.methods.dispatchStoreAction(
         storeActions.GET_MOBILE_FEE_PART,
-        {
+        null,
-            serviceType: serviceType,
-            parentAccountNumber: parentAccountNumber,
-            billToAccountNumber: billToAccountNumber,
-        },
         false
     );
 

src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js

@@ -93,6 +93,32 @@ const mockMixin = {
     },
 };
 
+const mockGetPricedMobileFeePart = (mockServiceZipCode) => {
+    let mobileFeePart = {};
+
+    if (mockServiceZipCode === "43235") {
+        mobileFeePart = {
+            partNumber: "MOBILE FEE",
+            description: "MOBILE FEE",
+            partType: "FEE",
+            laborAmount: 49.99,
+            sellingPrice: 0,
+            kitPrice: 0,
+        };
+    }
+
+    return Promise.resolve(mobileFeePart);
+};
+
+jest.mock(
+    "@/layouts/service-location/helpers/service-location-helper/service-location-helper",
+    () => ({
+        getPricedMobileFeePart: jest.fn((mockServiceZipCode) => {
+            return mockGetPricedMobileFeePart(mockServiceZipCode);
+        }),
+    })
+);
+
 describe("mobile-location-modal-questions.vue", () => {
     it("Should copy the modelValue to the internalModel when the component is mounted", async () => {
         // Arrange

src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue

@@ -56,13 +56,15 @@ import modal from "@/digital-components/modal/modal";
 import alert from "@/ux-components/alert/alert";
 import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
 import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question";
+import store from "@/store";
 
 // Helpers
 import { deepClone } from "@/layouts/service-location/helpers/object-cloning-helper/object-cloning-helper";
+import { getPricedMobileFeePart } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
 
 export default {
     name: "mobile-location-modal-questions",
-    emits: ["update:modelValue", "updated-zip-code"], // The component emits an event
+    emits: ["update:modelValue", "set-mobile-fee-part"],
     data() {
         return {
             internalModel: deepClone(this.modelValue),
@@ -158,15 +160,13 @@ export default {
                 values: {
                     state: updatedServiceZipCodeInfo.state,
                     zipCode: updatedServiceZipCodeInfo.zipCode,
+                    isVehicleProtected: updatedServiceZipCodeInfo.isVehicleProtected,
                 },
             });
         },
         resetModalButtonStyle() {
             this.$refs[this.modalName].resetButtonStyle();
         },
-        onAddressUpdated(updatedServiceZipCodeInfo) {
-            this.resetComponent(updatedServiceZipCodeInfo);
-        },
         async setMobileLocation() {
             // Validate the Zip Code
             const zipCodeData = await this.getZipCodeData(
@@ -177,6 +177,14 @@ export default {
                 this.displayInvalidZipAlert = true;
                 this.resetModalButtonStyle();
             } else {
+                // retrieve mobile fee part
+                const serviceZipCode = this.internalModel.addressQuestions.zipCode;
+
+                const mobileFeePart = await getPricedMobileFeePart(serviceZipCode);
+
+                // emit it to parent
+                this.$emit("set-mobile-fee-part", mobileFeePart);
+
                 // Update the page level model
                 this.$emit("update:modelValue", this.internalModel);
                 this.closeModal();
@@ -189,8 +197,9 @@ export default {
                 this.internalModel = deepClone(newValue);
 
                 this.resetComponent({
-                    state: newValue.state,
+                    state: newValue.addressQuestions.state,
-                    zipCode: newValue.zipCode,
+                    zipCode: newValue.addressQuestions.zipCode,
+                    isVehicleProtected: newValue.isVehicleProtected,
                 });
             },
             deep: true,

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

@@ -8,6 +8,8 @@
                 <serviceZipModalQuestion
                     v-model="serviceZipCodeQuestion"
                     ref="serviceZipCodeQuestion"
+                    :mobileFeePart="mobileFeePart"
+                    @set-mobile-fee-part="setMobileFeePart"
                     linkWidgetName="ServiceZipLinkWidget"
                     modalWidgetName="ServiceZipModalWidget" />
                 <serviceTypeQuestion
@@ -16,17 +18,23 @@
                     groupName="ServiceTypeQuestion"
                     cmsWidgetName="ServiceTypeQuestionWidget"
                     validationRules="option-required" />
+                <alert
+                    class="my-4"
+                    cmsWidgetName="AlertMilitaryBaseZipWidget"
+                    v-if="zipContainsMilitaryBase"
+                    alertClass="alert-warning" />
                 <mobileLocationModalQuestions
                     v-if="selectedServiceType === 'Mobile'"
                     v-model="mobileLocationQuestions"
                     :mobileFeePart="mobileFeePart"
+                    @set-mobile-fee-part="setMobileFeePart"
                     ref="mobileLocationModalQuestions"
                     linkWidgetName="MobileLocationLinkWidget"
                     modalWidgetName="MobileLocationModalWidget" />
                 <funnel-footer
                     cmsWidgetName="FunnelFooterWidget"
                     ref="funnelFooter"
-                    :isForwardActionDisabled="!meta.valid"
+                    :isForwardActionDisabled="!meta.valid || shouldDisableForwardAction"
                     @back-clicked="backButtonAction"
                     @ForwardClicked="forwardButtonAction" />
             </div>
@@ -36,6 +44,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 serviceTypeQuestion from "@/layouts/service-location/service-type-question/service-type-question";
@@ -45,6 +54,9 @@ import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-heade
 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";
@@ -64,17 +76,17 @@ export default {
             isZipServiceableMobile: null,
             isZipServiceableInShop: null,
             mobileFeePart: null,
+            zipContainsMilitaryBase: false,
             selectedServiceType: null,
         };
     },
     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;
-        const billToAccountNumber = 0;
+        const billToAccountNumber = 1;
 
         const mobileFeePartPromise = getPricedMobileFeePart(
             serviceZipCode,
@@ -93,6 +105,10 @@ export default {
                 resultKey: "mobileFeePart",
                 promise: mobileFeePartPromise,
             },
+            {
+                resultKey: "zipCodeData",
+                promise: baseMixin.methods.getZipCodeData(serviceZipCode),
+            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -101,6 +117,8 @@ export default {
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
             vm.setData(resultMap.mobileFeePart);
+            vm.zipContainsMilitaryBase = resultMap.zipCodeData.containsMilitaryBase;
+            vm.zipCode = serviceZipCode;
         });
     },
     computed: {
@@ -113,7 +131,7 @@ export default {
             },
             set: function (newValue) {
                 if (newValue.zipCode !== this.zipCode) {
-                    this.resetMobileLocation(newValue);
+                    this.resetMobileLocation();
                 }
 
                 this.state = newValue.state;
@@ -143,6 +161,9 @@ export default {
                 this.isVehicleProtected = newValue.isVehicleProtected;
             },
         },
+        shouldDisableForwardAction() {
+            return this.zipContainsMilitaryBase;
+        },
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -170,28 +191,15 @@ export default {
         getServiceZipCodeFromStore() {
             return store.getters.order.serviceLocation.zipCode;
         },
-        resetMobileFeePart(serviceZipCode) {
+        setMobileFeePart(mobileFeePart) {
-            const serviceType = store.getters.damage.isRepair ? "Repair" : "Replace";
+            this.mobileFeePart = mobileFeePart;
-            const parentAccountNumber = store.getters.payment.parentAccountNumber;
-            const billToAccountNumber = 0;
-
-            getPricedMobileFeePart(
-                serviceZipCode,
-                serviceType,
-                parentAccountNumber,
-                billToAccountNumber
-            ).then((pricedMobileFeePart) => {
-                this.mobileFeePart = pricedMobileFeePart;
-            });
         },
-        resetMobileLocation(updatedServiceZipCodeInfo) {
+        resetMobileLocation() {
             this.streetAddress = "";
             this.apartmentNumberOrBusinessName = "";
             this.city = "";
 
             this.isVehicleProtected = null;
-
-            this.resetMobileFeePart(updatedServiceZipCodeInfo.zipCode);
         },
         backButtonAction() {
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
@@ -200,7 +208,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,
         serviceTypeQuestion,
         mobileLocationModalQuestions,

src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js

@@ -16,6 +16,32 @@ jest.mock("@/digital-components/modal/modal", () => ({
     },
 }));
 
+const mockGetPricedMobileFeePart = (mockServiceZipCode) => {
+    let mobileFeePart = {};
+
+    if (mockServiceZipCode === "43235") {
+        mobileFeePart = {
+            partNumber: "MOBILE FEE",
+            description: "MOBILE FEE",
+            partType: "FEE",
+            laborAmount: 49.99,
+            sellingPrice: 0,
+            kitPrice: 0,
+        };
+    }
+
+    return Promise.resolve(mobileFeePart);
+};
+
+jest.mock(
+    "@/layouts/service-location/helpers/service-location-helper/service-location-helper",
+    () => ({
+        getPricedMobileFeePart: jest.fn((mockServiceZipCode) => {
+            return mockGetPricedMobileFeePart(mockServiceZipCode);
+        }),
+    })
+);
+
 const linkWidgetName = "linkWidgetName";
 const modalWidgetName = "modalWidgetName";
 
@@ -126,6 +152,7 @@ describe("service-zip-modal-question.vue", () => {
             mixins: [mockMixin],
             props: {
                 modelValue: serviceZipCodeQuestion,
+                mobileFeePart: {},
                 linkWidgetName: linkWidgetName,
                 modalWidgetName: modalWidgetName,
             },
@@ -134,6 +161,7 @@ describe("service-zip-modal-question.vue", () => {
 
         // Act
         wrapper.vm.internalModel.zipCode = zip;
+
         await wrapper.vm.setZipCode();
 
         let expectedEmit = [[{ state: "OH", zipCode: "43235" }]];

src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue

@@ -38,9 +38,12 @@ import textLink from "@/ux-components/text-link/text-link";
 import serviceZipQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-question/service-zip-question";
 import modal from "@/digital-components/modal/modal";
 import alert from "@/ux-components/alert/alert";
+import store from "@/store";
+import { getPricedMobileFeePart } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
 
 export default {
     name: "service-zip-modal-question",
+    emits: ["update:modelValue", "set-mobile-fee-part"],
     data() {
         return {
             internalModel: this.copyModel(this.modelValue),
@@ -56,6 +59,10 @@ export default {
                 zipCode: "",
             }),
         },
+        mobileFeePart: {
+            type: Object,
+            default: () => ({}),
+        },
         linkWidgetName: String,
         modalWidgetName: String,
     },
@@ -136,17 +143,23 @@ export default {
             this.resetAlerts();
 
             const zipCodeData = await this.getZipCodeData(this.internalModel.zipCode);
-            this.resetModalButtonStyle();
 
             if (!zipCodeData.isValid) {
                 this.displayInvalidZipAlert = true;
                 this.focusOnZipInput();
+                this.resetModalButtonStyle();
             } else {
                 this.internalModel.state = zipCodeData.state;
 
+                // retrieve mobile fee part
+                const serviceZipCode = this.internalModel.zipCode;
+                const mobileFeePart = await getPricedMobileFeePart(serviceZipCode);
+
+                // emit it to parent
+                this.$emit("set-mobile-fee-part", mobileFeePart);
+
                 // Update the page level model
                 this.$emit("update:modelValue", this.internalModel);
-
                 this.closeModal();
             }
         },

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,

src/store/index.js

@@ -916,9 +916,13 @@ export const actions = {
     },
 
     getMobileFeePart(context) {
-        return globalMethods.callMockHttpClient({
+        const serviceType = context.getters.damage.isRepair ? "Repair" : "Replace";
+        const parentAccountNumber = context.getters.payment.parentAccountNumber;
+        const billToAccountNumber = 87291; // TODO: MAKE THIS REAL
+
+        return globalMethods.callHttpClient({
             method: endpoints.GetMobileFeePart.method,
-            endpoint: "https://run.mocky.io/v3/795de4cb-d014-48b4-9338-dab33261adce", //TODO: Remove Mocky Endpoint
+            endpoint: `${endpoints.GetMobileFeePart.url}/${serviceType}/${parentAccountNumber}/${billToAccountNumber}`,
         });
     },