diff --git a/src/helpers/service-location-helper.js b/src/helpers/service-location-helper.js new file mode 100644 index 000000000..1f4a12f51 --- /dev/null +++ b/src/helpers/service-location-helper.js @@ -0,0 +1,30 @@ +import { storeActions } from "@/constants/store-actions"; +import baseMixin from "@/mixins/base-mixin.js"; + +export async function getMobileFee(serviceZipCode) { + if (!serviceZipCode) { + return 0; + } + + const zipCodeData = await baseMixin.methods.getZipCodeData(serviceZipCode); + + // Get the Mobile Fee Part + const mobileFeePart = await baseMixin.methods.dispatchStoreAction( + storeActions.GET_MOBILE_FEE_PART, + null, + false + ); + + // Get the Mobile Fee Part Price + const pricingResults = await baseMixin.methods.dispatchStoreAction( + storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA, + { + availableLineItems: [mobileFeePart.data], + serviceZipCode: serviceZipCode, + ctu: zipCodeData.zipCodeCtu, + }, + false + ); + + return Promise.resolve(baseMixin.methods.getTotalLineItemPrice(pricingResults[0])); +} 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 233e4046e..a15709f67 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 @@ -51,7 +51,6 @@ 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 textBlock from "@/digital-components/text-block/text-block"; -import { storeActions } from "@/constants/store-actions"; export default { name: "mobile-location-modal-questions", @@ -61,7 +60,6 @@ export default { internalModel: this.copyModel(this.modelValue), displayInvalidZipAlert: false, modalName: "MobileLocationModalWidget", - mobileFee: 0.0, }; }, props: { @@ -77,6 +75,7 @@ export default { }, isVehicleProtected: null, serviceZipCode: "", + mobileFee: 0, }), }, isZipServiceableMobile: Boolean, @@ -86,35 +85,6 @@ export default { alertNonServiceableZipWidgetName: String, alertInvalidZipWidgetName: String, }, - async mounted() { - this.mobileFee = await this.getMobileFee(); - - // this.getMobileFee().then((result) => { - // console.log(result); - // this.mobileFee = result; - // console.log(this.mobileFee); - // }); - - // if (this.serviceZipCode !== "") { - // console.log(`Calling this.getMobileFee() inside mounted()`); - // this.mobileFee = await this.getMobileFee(); - // console.log( - // `After calling this.getMobileFee() inside mounted(), result: ${this.mobileFee}` - // ); - // } - - // // this.getMobileFee().then((result) => { - // // console.log(`After calling this.getMobileFee() inside mounted()`); - // // console.log(`Result of this.getMobileFee() ${result}`); - // // //this.test = "this"; - // // //console.log(this.test); - // // this.mobileFee = result; - // // console.log( - // // `Value of this.mobile fee after calling this.getMobileFee(): ${this.mobileFee}` - // // ); - // // }); - // //console.log(`After calling this.getMobileFee() inside mounted() - NOT IN THE CALLBACK`); - }, computed: { mobileLocationLinkPromptText() { return this.getCmsContent(this.linkWidgetName, "HeaderText"); @@ -139,7 +109,10 @@ export default { }, mobileFeeText() { const cmsContentText = this.getCmsContent("MobileFeeDisclaimerWidget", "Text"); - return cmsContentText.replaceAll("{custom:mobileFee}", this.mobileFee); + if (this.modelValue.mobileFee === undefined) { + return cmsContentText.replaceAll("{custom:mobileFee}", 0); + } + return cmsContentText.replaceAll("{custom:mobileFee}", this.modelValue.mobileFee); }, modalFooterText() { return this.getCmsContent(this.modalWidgetName, "FooterText"); @@ -159,35 +132,6 @@ export default { this.internalModel.serviceZipCode = serviceZipCode; }, - async getMobileFee() { - if (!this.internalModel.serviceZipCode) { - return 0.0; - } - - const zipCodeData = await this.getZipCodeData(this.internalModel.serviceZipCode); - console.log(zipCodeData); - // Get the Mobile Fee Part - const mobileFeePart = await this.dispatchStoreAction( - storeActions.GET_MOBILE_FEE_PART, - null, - false - ); - console.log(mobileFeePart); - // Get the Mobile Fee Part Price - const pricingResults = await this.dispatchStoreAction( - storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA, - { - availableLineItems: [mobileFeePart.data], - serviceZipCode: this.internalModel.serviceZipCode, - ctu: zipCodeData.zipCodeCtu, - }, - false - ); - console.log(pricingResults); - - return this.getTotalLineItemPrice(pricingResults[0]); - }, - openModal() { this.$refs[this.modalName].openModal(); }, @@ -246,11 +190,6 @@ export default { modelValue(newValue) { this.internalModel = this.copyModel(newValue); }, - "modelValue.serviceZipCode": { - async handler(newValue) { - this.mobileFee = await this.getMobileFee(); - }, - }, }, components: { textLink, diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index 64e5dafdf..8059308f0 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -6,6 +6,7 @@ @@ -37,6 +38,7 @@ import { Form } from "vee-validate"; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { settleAllPromises } from "@/helpers/layout-helper"; import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper"; +import { getMobileFee } from "@/helpers/service-location-helper"; import store from "@/store"; export default { @@ -60,20 +62,27 @@ export default { }, isVehicleProtected: null, serviceZipCode: this.getServiceZipCodeFromStore(), + mobileFee: 0, }, }; }, - async beforeRouteEnter(to, from, next) { // Call APIs const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage); + const serviceZipCode = store.getters.order.serviceLocation.zipCode; + const mobileFeePromise = getMobileFee(serviceZipCode); + // Settle promises and get results const promiseResultMap = [ { resultKey: "cmsContent", promise: cmsContentPromise, }, + { + resultKey: "mobileFee", + promise: mobileFeePromise, + }, ]; const resultMap = await settleAllPromises(promiseResultMap); @@ -81,9 +90,9 @@ export default { // Call the "next" function to complete the transition to this page. next((vm) => { vm.setCmsContent(resultMap.cmsContent); + vm.setData(resultMap.mobileFee); }); }, - methods: { arePagePrerequisitesValid() { return true; @@ -93,6 +102,11 @@ export default { // store.getters.payment.isInsurance !== null // ); }, + setData(mobileFee) { + if (mobileFee) { + this.mobileLocationQuestions.mobileFee = mobileFee + } + }, getRegistrationAddressFromStore() { return this.$store.getters.vehicle.registration.address; }, @@ -114,6 +128,11 @@ export default { getIsServiceableFromStore() { return this.$store.getters.order.serviceLocation.isServiceable; }, + recalculateMobileFee(serviceZipCode) { + getMobileFee(serviceZipCode).then((mobileFee) => { + this.mobileLocationQuestions.mobileFee = mobileFee; + }); + }, resetMobileLocation(updatedServiceZipCode) { this.mobileLocationQuestions = { addressQuestions: { @@ -133,6 +152,8 @@ export default { this.serviceZipCodeQuestion.state = newValue.state; this.serviceZipCodeQuestion.zipCode = newValue.zipCode; this.serviceZipCodeQuestion.isServiceable = newValue.isServiceable; + + this.recalculateMobileFee(this.serviceZipCodeQuestion.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.vue b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue index 2748e8879..aabab3be3 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 @@ -139,6 +139,8 @@ export default { this.internalModel.state = zipCodeData.state; this.internalModel.isServiceable = zipCodeData.isServiceable; + this.$emit("updated-service-zip-code", this.internalModel.zipCode); + // Update the page level model this.$emit("update:modelValue", this.internalModel);