diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue index 1769961b7..a119f1d81 100644 --- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue +++ b/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" />
@@ -406,6 +405,11 @@ export default { } }, }, + modelValue: { + handler() { + this.setupAddressLookup(); + }, + }, }, components: { textboxQuestion, diff --git a/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js b/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js index f9529ccec..ba81a973f 100644 --- a/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js +++ b/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( - serviceZipCode, - serviceType, - parentAccountNumber, - billToAccountNumber -) { - if (!serviceZipCode || !serviceType || !parentAccountNumber) { +export async function getPricedMobileFeePart(serviceZipCode) { + if (!serviceZipCode) { 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, - { - serviceType: serviceType, - parentAccountNumber: parentAccountNumber, - billToAccountNumber: billToAccountNumber, - }, + null, false ); diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js index ab0ba6573..fbea693b9 100644 --- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js +++ b/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 diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue index cdba0058f..b4da4ddfa 100644 --- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue +++ b/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, - zipCode: newValue.zipCode, + state: newValue.addressQuestions.state, + zipCode: newValue.addressQuestions.zipCode, + isVehicleProtected: newValue.isVehicleProtected, }); }, deep: true, diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index b93a8b3b9..e458b112b 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -7,6 +7,8 @@ @@ -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) { - const serviceType = store.getters.damage.isRepair ? "Repair" : "Replace"; - const parentAccountNumber = store.getters.payment.parentAccountNumber; - const billToAccountNumber = 0; - - getPricedMobileFeePart( - serviceZipCode, - serviceType, - parentAccountNumber, - billToAccountNumber - ).then((pricedMobileFeePart) => { - this.mobileFeePart = pricedMobileFeePart; - }); + setMobileFeePart(mobileFeePart) { + this.mobileFeePart = mobileFeePart; }, - 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); diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js index becbd9ebd..407e129cf 100644 --- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js +++ b/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" }]]; diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue index 4f4c98035..2c1e0e588 100644 --- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue +++ b/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(); } }, diff --git a/src/store/index.js b/src/store/index.js index 64acea595..9458b993d 100644 --- a/src/store/index.js +++ b/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}`, }); },