From 586be19eb4d6e901d4b3e49528b546fef5d47d6e Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Mon, 6 Mar 2023 07:57:49 -0500
Subject: [PATCH] Relocated mobileLocationLinkPromptId to page level so that
 service-zip and mobile-location are the same

---
 .../mobile-location-modal-questions.vue       | 28 -------------
 .../service-location/service-location.vue     | 42 ++++++++++++++++---
 2 files changed, 36 insertions(+), 34 deletions(-)

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 ecd1345f0..7523e6c83 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
@@ -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"
@@ -90,9 +81,6 @@ export default {
         alertInvalidZipWidgetName: String,
     },
     computed: {
-        mobileLocationLinkPromptText() {
-            return this.getCmsContent(this.linkWidgetName, "HeaderText");
-        },
         mobileLocationLinkText() {
             if (
                 this.addressModel.streetAddress !== null &&
@@ -111,23 +99,9 @@ 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");
         },
-        mobileFee() {
-            if (!this.modelValue.mobileFeePart) {
-                return 0;
-            }
-            return (
-                this.modelValue.mobileFeePart.laborAmount +
-                this.modelValue.mobileFeePart.sellingPrice +
-                this.modelValue.mobileFeePart.kitPrice
-            );
-        },
         addressModel: {
             get: function () {
                 return this.modelValue.addressQuestions;
@@ -150,7 +124,6 @@ export default {
             // Reinitialize the Address Auto Complete
             this.$refs.addressQuestions.setupAddressLookup();
         },
-
         resetModel() {
             // Address
             this.internalModel.addressQuestions.streetAddress = "";
@@ -160,7 +133,6 @@ export default {
             // Is Vehicle Protected
             this.internalModel.isVehicleProtected = null;
         },
-
         async setMobileLocation() {
             // Validate the Zip Code
             const zipCodeData = await this.getZipCodeData(
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 1be600ed8..9397dd180 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/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() {
@@ -157,13 +186,13 @@ export default {
         },
         resetMobileFeePart(serviceZipCode) {
             getPricedMobileFeePart(serviceZipCode).then((pricedMobileFeePart) => {
-                this.mobileLocationQuestions.mobileFeePart = pricedMobileFeePart;
+                this.mobileFeePart = pricedMobileFeePart;
             });
         },
         resetMobileLocation(updatedServiceZipCode) {
             this.streetAddress = "";
-            this.apartmentNumberOrBusinessName = "",
-            this.city = "",
+            this.apartmentNumberOrBusinessName = "";
+            this.city = "";
             this.isVehicleProtected = null;
 
             this.$refs.mobileLocationModalQuestions.resetComponent();
@@ -185,6 +214,7 @@ export default {
         funnelSubHeader,
         Form,
         loadingModal,
+        textBlock,
     },
 };
 </script>