Mobile fee display and additional functional

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

@@ -4,7 +4,6 @@
             for="mobileLocationLinkPromptId"
             :aria-label="mobileLocationLinkPromptText"
             class="form-label fw-bold w-100 ps-4 pe-4 pt-4"
-            :class="[questionAlignment === 'center' ? 'text-center w-100 mb-5' : '']"
             v-html="mobileLocationLinkPromptText"></label>
         <div class="update-mobile-location-text-link">
             <textLink
@@ -63,6 +62,7 @@ export default {
         return {
             internalModel: this.copyModel(this.modelValue),
             displayInvalidZipAlert: false,
+            modalName: "MobileLocationModalWidget",
             mobileFee: "",          
         };
     },
@@ -78,26 +78,22 @@ export default {
                     zipCode: "",
                 },
                 isVehicleProtected: null,
+                serviceZipCode: ""               
             }),          
         },
         isZipServiceableMobile: Boolean,
         isZipServiceableInShop: Boolean,      
-        serviceZipCode: String,
         linkWidgetName: String,
         modalWidgetName: String,
-        mobileFeeDisclaimerWidgetName: String,
-        workspaceRequirementsWidgetName: String,
         alertNonServiceableZipWidgetName: String,
         alertInvalidZipWidgetName: String,
     },
-    async mounted() {
+    mounted() {
-        this.mobileFee = await this.getMobileFee();
+        this.getMobileFee().then((result) => {
+            this.mobileFee = result;
+        });       
     },
     computed: {
-        mobileFeeText() {
-            const cmsContentText = this.getCmsContent("MobileFeeDisclaimerWidget", "Text");
-            return cmsContentText.replaceAll("{custom:mobileFee}", this.mobileFee);
-        },
         mobileLocationLinkPromptText() {
             return this.getCmsContent(this.linkWidgetName, "HeaderText");
         },
@@ -119,12 +115,13 @@ export default {
         modalHeaderText() {
             return this.getCmsContent(this.modalWidgetName, "HeaderText");
         },
+        mobileFeeText() {
+            const cmsContentText = this.getCmsContent("MobileFeeDisclaimerWidget", "Text");
+            return cmsContentText.replaceAll("{custom:mobileFee}", this.mobileFee);
+        },
         modalFooterText() {
             return this.getCmsContent(this.modalWidgetName, "FooterText");
         },
-        modalName() {
-            return this.modalWidgetName;
-        },
         addressModel: {
             get: function () {
                 return this.modelValue.addressQuestions;
@@ -143,12 +140,25 @@ export default {
                     zipCode: modelToCopy.addressQuestions.zipCode,
                 },
                 isVehicleProtected: modelToCopy.isVehicleProtected,
-                isZipServiceableMobile: modelToCopy.isZipServiceableMobile,
+                serviceZipCode: modelToCopy.serviceZipCode
-                isZipServiceableInShop: modelToCopy.isZipServiceableInShop,
             };
         },
 
+        setServiceZipCode(serviceZipCode) {
+            this.internalModel.serviceZipCode = serviceZipCode;
+        },
+
+        getServiceZipCodeFromStore() {
+            return this.$store.getters.order.serviceLocation.zipCode;
+        },
+
         async getMobileFee() {
+            if (!this.internalModel.serviceZipCode) {
+                return "";
+            }
+            
+            const zipCodeData = await this.getZipCodeData(this.internalModel.serviceZipCode);
+            
             // Get the Mobile Fee Part
             const mobileFeePart = await baseMixin.methods.dispatchStoreAction(
                 storeActions.GET_MOBILE_FEE_PART,
@@ -159,7 +169,11 @@ export default {
             // Get the Mobile Fee Part Price
             const pricingResults = await baseMixin.methods.dispatchStoreAction(
                 storeActions.PRICE_ORDER_ITEMS,
-                [mobileFeePart.data],
+                { 
+                    availableLineItems: [mobileFeePart.data], 
+                    serviceZipCode: zipCodeData.zipCode,
+                    zipCodeCtu: zipCodeData.zipCodeCtu
+                }, 
                 false
             );
 
@@ -206,8 +220,16 @@ export default {
                 this.displayInvalidZipAlert = true;
             } else {
                 // Update the page level model
+                this.internalModel.serviceZipCode = this.internalModel.addressQuestions.zipCode; 
                 this.$emit("update:modelValue", this.internalModel);
                 
+                // Emit the update service zip code information to the parent to update the service zipcode details
+                this.$emit("updated-zip-code", {
+                    zipCode: this.internalModel.addressQuestions.zipCode,
+                    state: zipCodeData.state,
+                    isServiceable: zipCodeData.isServiceable
+                });
+
                 this.closeModal();
             }
         },
@@ -216,6 +238,11 @@ export default {
         modelValue(newValue) {
             this.internalModel = this.copyModel(newValue);
         },
+        "modelValue.serviceZipCode": {
+            async handler(newValue) {
+                this.mobileFee = await this.getMobileFee(newValue);
+            },               
+        },
     },
     components: {
         textLink,

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

@@ -6,18 +6,15 @@
             <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
             <serviceZipModalQuestion
                 v-model="serviceZipCodeQuestion"
-                @service-zip-updated="resetMobileLocation"
+                ref="serviceZipCodeQuestion"
                 linkWidgetName="ServiceZipLinkWidget"
-                modalWidgetName="ServiceZipModalWidget"
+                modalWidgetName="ServiceZipModalWidget" />
-                textboxQuestionWidgetName="ServiceZipQuestionWidget"
-                alertInvalidZipWidgetName="AlertInvalidZipWidget" />
             <mobileLocationModalQuestions
                 v-model="mobileLocationQuestions"
+                @updated-zip-code="resetServiceZipCode"
                 ref="mobileLocationModalQuestions"
                 linkWidgetName="MobileLocationLinkWidget"
-                modalWidgetName="MobileLocationModalWidget"
+                modalWidgetName="MobileLocationModalWidget" />
-                mobileFeeDisclaimerWidgetName="MobileFeeDisclaimerWidget"
-                workspaceRequirementsWidgetName="WorkspaceRequirementsWidget" />
             <funnel-footer
                 cmsWidgetName="FunnelFooterWidget"
                 ref="funnelFooter"
@@ -40,7 +37,6 @@ 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 store from "@/store";
 
 export default {
     name: "service-location",
@@ -62,6 +58,7 @@ export default {
                     zipCode: this.getRegistrationZipFromStore(),
                 },
                 isVehicleProtected: null,
+                serviceZipCode: this.getServiceZipCodeFromStore(),
             },
         };
     },
@@ -111,7 +108,7 @@ export default {
         getIsServiceableFromStore() {
             return this.$store.getters.order.serviceLocation.isServiceable;
         },
-        resetMobileLocation() {
+        resetMobileLocation(updatedServiceZipCode) {
             this.mobileLocationQuestions = {
                 addressQuestions: {
                     streetAddress: "",
@@ -121,10 +118,16 @@ export default {
                     zipCode: "",
                 },
                 isVehicleProtected: null,
+                serviceZipCode: updatedServiceZipCode,
             };
 
             this.$refs.mobileLocationModalQuestions.resetComponent();
         },
+        resetServiceZipCode(newValue) {
+            this.serviceZipCodeQuestion.state = newValue.state;
+            this.serviceZipCodeQuestion.zipCode = newValue.zipCode;
+            this.serviceZipCodeQuestion.isServiceable = newValue.isServiceable;
+        },
         backButtonAction() {
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
@@ -132,6 +135,15 @@ export default {
             navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
         },
     },
+    watch: {
+        serviceZipCodeQuestion: {
+            handler(newValue, oldValue) {
+                if (newValue !== oldValue) {
+                    this.resetMobileLocation(newValue.zipCode);
+                }
+            },
+        },
+    },
     components: {
         serviceZipModalQuestion,
         mobileLocationModalQuestions,

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

@@ -138,11 +138,6 @@ export default {
                 this.internalModel.state = zipCodeData.state;
                 this.internalModel.isServiceable = zipCodeData.isServiceable;
 
-                // Notify the page that the service zip has been updated to clear Mobile Location form
-                if (this.internalModel.zipCode !== this.modelValue.zipCode) {
-                    this.$emit("service-zip-updated");
-                }
-
                 // Update the page level model
                 this.$emit("update:modelValue", this.internalModel);
 
@@ -151,14 +146,14 @@ export default {
         },
     },
     watch: {
+        modelValue(newValue) {
+            this.internalModel = this.copyModel(newValue);
+        },
         "internalModel.zipCode": {
             handler() {
                 this.resetsOnZipInput();
             },
         },
-        modelValue(newValue) {
-            this.internalModel = this.copyModel(newValue);
-        },
     },
     components: {
         textLink,

src/store/index.js

@@ -1423,24 +1423,34 @@ export const actions = {
         context.commit(storeMutations.UPDATE_VAPS, vaps);
     },
     // Price order actions
-    async priceOrderItems(context, availableLineItems) {
+    async priceOrderItems(context, { availableLineItems, serviceZipCode, ctu }) {
+        const zipCodeToUse = serviceZipCode
+            ? serviceZipCode
+            : context.getters.order.serviceLocation.zipCode;
+        const ctuToUse = ctu ? ctu : context.getters.order.serviceLocation.zipCodeCtu;
+
         const availableLineItemsFormattedForRequest =
             getLineItemQueryStringForPricing(availableLineItems);
+
         const vehicle = context.getters.order.vehicle;
+
         let queryString =
             `ParentAccountNumber=${applicationConfig.CASH_ACCOUNT_NUMBER}` +
-            `&CTU=${context.getters.order.serviceLocation.zipCodeCtu}` +
+            `&CTU=${ctuToUse}` +
             `&CarId=${vehicle.carId}` +
             `&Make=${vehicle.make}` +
             `&Model=${vehicle.model}` +
             `&Year=${vehicle.year}` +
             `&EON=${context.getters.order.eon}` +
-            `&ZipCode=${context.getters.order.serviceLocation.zipCode}` +
+            `&ZipCode=${zipCodeToUse}` +
             `${availableLineItemsFormattedForRequest}`;
+
         const lineItemServerData = context.getters.order.lineItems.serverData;
+
         if (lineItemServerData) {
             queryString += `&ServerData=${encodeURIComponent(lineItemServerData)}`;
         }
+
         const response = await globalMethods.callHttpClient({
             method: endpoints.PriceOrderItems.method,
             endpoint: `${endpoints.PriceOrderItems.url}?${queryString}`,