Merge pull request #1004 from Safelite/feature/CSR-1088

Feature/csr 1088

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),
@@ -159,15 +161,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(
@@ -178,6 +178,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();
@@ -190,8 +198,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.vue

@@ -7,6 +7,8 @@
             <serviceZipModalQuestion
                 v-model="serviceZipCodeQuestion"
                 ref="serviceZipCodeQuestion"
+                :mobileFeePart="mobileFeePart"
+                @set-mobile-fee-part="setMobileFeePart"
                 linkWidgetName="ServiceZipLinkWidget"
                 modalWidgetName="ServiceZipModalWidget" />
             <alert
@@ -17,6 +19,7 @@
             <mobileLocationModalQuestions
                 v-model="mobileLocationQuestions"
                 :mobileFeePart="mobileFeePart"
+                @set-mobile-fee-part="setMobileFeePart"
                 ref="mobileLocationModalQuestions"
                 linkWidgetName="MobileLocationLinkWidget"
                 modalWidgetName="MobileLocationModalWidget" />
@@ -71,7 +74,7 @@ export default {
         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,
@@ -116,7 +119,7 @@ export default {
             },
             set: function (newValue) {
                 if (newValue.zipCode !== this.zipCode) {
-                    this.resetMobileLocation(newValue);
+                    this.resetMobileLocation();
                 }
 
                 this.state = newValue.state;
@@ -175,28 +178,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);

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/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}`,
         });
     },