Merged with CSR-1012

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

@@ -1,10 +1,5 @@
 <template>
     <div class="text-center">
-        <label
-            for="mobileLocationLinkPromptId"
-            :aria-label="mobileLocationLinkPromptText"
-            class="form-label fw-bold w-100 ps-4 pe-4 pt-4"
-            v-html="mobileLocationLinkPromptText"></label>
         <div class="update-mobile-location-text-link">
             <textLink
                 ref="mobileLocationLink"
@@ -15,10 +10,6 @@
                 @click-event="openModal"
                 aria-label="Modal window" />
         </div>
-        <textBlock
-            :customText="mobileFeeText"
-            cmsWidgetName="MobileFeeDisclaimerWidget"
-            typeStyle="caption" />
     </div>
     <modal
         :ref="modalName"
@@ -89,9 +80,6 @@ export default {
         alertInvalidZipWidgetName: String,
     },
     computed: {
-        mobileLocationLinkPromptText() {
-            return this.getCmsContent(this.linkWidgetName, "HeaderText");
-        },
         mobileLocationLinkText() {
             if (
                 this.addressModel.streetAddress !== null &&
@@ -153,7 +141,6 @@ export default {
             // Reinitialize the Address Auto Complete
             this.$refs.addressQuestions.setupAddressLookup();
         },
-
         resetModel() {
             // Address
             this.internalModel.addressQuestions.streetAddress = "";
@@ -163,7 +150,6 @@ export default {
             // Is Vehicle Protected
             this.internalModel.isVehicleProtected = null;
         },
-
         async setMobileLocation() {
             // Validate the Zip Code
             const zipCodeData = await this.getZipCodeData(

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

@@ -10,11 +10,21 @@
                 ref="serviceZipCodeQuestion"
                 linkWidgetName="ServiceZipLinkWidget"
                 modalWidgetName="ServiceZipModalWidget" />
+            <div class="text-center">
+                <label
+                    for="mobileLocationLinkPromptId"
+                    :aria-label="mobileLocationLinkPromptText"
+                    class="form-label fw-bold w-100 ps-4 pe-4 pt-4"
+                    v-html="mobileLocationLinkPromptText"></label>
+            </div>
             <mobileLocationModalQuestions
                 v-model="mobileLocationQuestions"
                 ref="mobileLocationModalQuestions"
                 linkWidgetName="MobileLocationLinkWidget"
                 modalWidgetName="MobileLocationModalWidget" />
+            <div class="text-center">
+                <textBlock :customText="mobileFeeDisclaimerText" typeStyle="caption" />
+            </div>
             <funnel-footer
                 cmsWidgetName="FunnelFooterWidget"
                 ref="funnelFooter"
@@ -39,6 +49,7 @@ import { settleAllPromises } from "@/helpers/layout-helper";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 import { getPricedMobileFeePart } from "@/helpers/service-location-helper";
 import store from "@/store";
+import textBlock from "@/digital-components/text-block/text-block";
 
 export default {
     name: "service-location",
@@ -112,19 +123,37 @@ export default {
                         zipCode: this.zipCode,
                     },
                     isVehicleProtected: this.isVehicleProtected,
-                    mobileFeePart: this.mobileFeePart
+                    mobileFeePart: this.mobileFeePart,
                 };
             },
             set: function (newValue) {
                 this.streetAddress = newValue.addressQuestions.streetAddress;
-                this.apartmentNumberOrBusinessName = newValue.addressQuestions.apartmentNumberOrBusinessName,
+                this.apartmentNumberOrBusinessName =
+                    newValue.addressQuestions.apartmentNumberOrBusinessName;
                 this.city = newValue.addressQuestions.city;
                 this.state = newValue.addressQuestions.state;
                 this.zipCode = newValue.addressQuestions.zipCode;
-                this.isVehicleProtected = newValue.isVehicleProtected,
+                this.isVehicleProtected = newValue.isVehicleProtected;
                 this.mobileFeePart = newValue.mobileFeePart;
             },
         },
+        mobileLocationLinkPromptText() {
+            return this.getCmsContent("MobileLocationLinkWidget", "HeaderText");
+        },
+        mobileFeeDisclaimerText() {
+            const cmsContentText = this.getCmsContent("MobileFeeDisclaimerWidget", "Text");
+            return cmsContentText.replaceAll("{custom:mobileFee}", this.mobileFee);
+        },
+        mobileFee() {
+            if (!this.mobileFeePart) {
+                return 0;
+            }
+            return (
+                this.mobileFeePart.laborAmount +
+                this.mobileFeePart.sellingPrice +
+                this.mobileFeePart.kitPrice
+            );
+        },
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -156,13 +185,13 @@ export default {
         },
         resetMobileFeePart(serviceZipCode) {
             getPricedMobileFeePart(serviceZipCode).then((pricedMobileFeePart) => {
-                this.mobileLocationQuestions.mobileFeePart = pricedMobileFeePart;
+                this.mobileFeePart = pricedMobileFeePart;
             });
         },
         resetMobileLocation(updatedServiceZipCode) {
             this.streetAddress = "";
-            this.apartmentNumberOrBusinessName = "",
+            this.apartmentNumberOrBusinessName = "";
-            this.city = "",
+            this.city = "";
             this.isVehicleProtected = null;
 
             this.$refs.mobileLocationModalQuestions.resetComponent();
@@ -184,6 +213,7 @@ export default {
         funnelSubHeader,
         Form,
         loadingModal,
+        textBlock,
     },
 };
 </script>

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

@@ -60,13 +60,16 @@ export default {
         linkWidgetName: String,
         modalWidgetName: String,
     },
+    setup() {
+        const textboxQuestionWidgetName = "ServiceZipQuestionWidget";
+        const alertInvalidZipWidgetName = "AlertInvalidZipWidget";
+
+        return {
+            textboxQuestionWidgetName,
+            alertInvalidZipWidgetName,
+        };
+    },
     computed: {
-        textboxQuestionWidgetName() {
-            return "ServiceZipQuestionWidget";
-        },
-        alertInvalidZipWidgetName() {
-            return "AlertInvalidZipWidget";
-        },
         serviceZipLinkText() {
             if (this.modelValue.zipCode && this.modelValue.zipCode.length > 0) {
                 return this.modelValue.state + ", " + this.modelValue.zipCode;

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

@@ -5,6 +5,7 @@
         v-model="value"
         inputId="serviceZipCode"
         questionAlignment="center"
+        cornerStyle="rounded"
         mask="#####"
         :displayQuestionText="false"
         isRequired