Moved calculation of mobile fee to the page level

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]));
+}

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,

src/layouts/service-location/service-location.vue

@@ -6,6 +6,7 @@
             <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
             <serviceZipModalQuestion
                 v-model="serviceZipCodeQuestion"
+                @updated-service-zip-code="recalculateMobileFee"
                 ref="serviceZipCodeQuestion"
                 linkWidgetName="ServiceZipLinkWidget"
                 modalWidgetName="ServiceZipModalWidget" />
@@ -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);

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);