Suggested changes from Mark regarding inputIDs for textboxQuestion and dropdownQuestion

src/digital-components/dropdown-question/dropdown-question.vue

@@ -86,6 +86,9 @@ export default {
             errors,
         };
     },
+    mounted() {
+        this.$emit("dropdownQuestionEvent.inputIdAssigned", this.inputId);
+    },
     computed: {
         questionText() {
             return this.getCmsContent(this.cmsWidgetName, "QuestionText");

src/digital-components/text-block/text-block.vue

@@ -9,6 +9,7 @@
 export default {
     name: "textBlock",
     props: {
+        customText: String, // used to allow the insert of token values into textblock
         justifyText: String, // left, right, center
         typeStyle: String, // h1-h6, body, small, label, caption (see Figma or Confluence documentation)
         fontWeight: String, // bold=500, default is 400
@@ -16,6 +17,9 @@ export default {
     },
     computed: {
         TextBlockCopy() {
+            if (this.customText) {
+                return this.customText;
+            }
             return this.getCmsContent(this.cmsWidgetName, "Text");
         },
     },

src/digital-components/textbox-question/textbox-question.vue

@@ -76,7 +76,9 @@ export default {
         includeSearchIcon: Boolean,
     },
     setup(props) {
-        const inputId = !props.customInputId ? `input-${crypto.randomUUID()}` : props.customInputId;
+        const inputId = !props.customInputId 
+            ? `input-${crypto.randomUUID()}` 
+            : props.customInputId;
 
         const propsClone = Object.assign({}, props);
         const modelValue = propsClone.modelValue;
@@ -126,6 +128,9 @@ export default {
             },
         },
     },
+    mounted() {
+        this.$emit("textboxQuestionEvent.inputIdAssigned", this.inputId);
+    },
     watch: {
         async value(newValue) {
             const result = await validate(newValue, this.validationRules); // do a test validation check, without triggering full validation

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

@@ -15,7 +15,10 @@
                 @click-event="openModal"
                 aria-label="Modal window" />
         </div>
-        <textBlock cmsWidgetName="MobileFeeDisclaimerWidget" typeStyle="caption" />
+        <textBlock
+            :customText="mobileFeeText"
+            cmsWidgetName="MobileFeeDisclaimerWidget"
+            typeStyle="caption" />
     </div>
     <modal
         :ref="modalName"
@@ -58,6 +61,7 @@ export default {
         return {
             internalModel: this.copyModel(this.modelValue),
             displayInvalidZipAlert: false,
+            mobileFee: this.getMobileFee(),
         };
     },
     props: {
@@ -85,15 +89,23 @@ export default {
         alertInvalidZipWidgetName: String,
     },
     computed: {
+        mobileFeeText() {
+            const cmsContentText = this.getCmsContent("MobileFeeDisclaimerWidget", "Text");
+            return cmsContentText.replaceAll("{custom:mobileFee}", this.mobileFee);
+        },
         mobileLocationLinkPromptText() {
             return this.getCmsContent(this.linkWidgetName, "HeaderText");
         },
         mobileLocationLinkText() {
             if (
-                this.addressModel.streetAddress != "" &&
-                this.addressModel.city != "" &&
-                this.addressModel.state != "" &&
-                this.addressModel.zipCode != ""
+                this.addressModel.streetAddress !== null &&
+                this.addressModel.streetAddress !== "" &&
+                this.addressModel.city !== null &&
+                this.addressModel.city !== "" &&
+                this.addressModel.state !== null &&
+                this.addressModel.state !== "" &&
+                this.addressModel.zipCode !== null &&
+                this.addressModel.zipCode !== ""
             ) {
                 return `${this.addressModel.streetAddress}\n${this.addressModel.city}, ${this.addressModel.state} ${this.addressModel.zipCode}`;
             }
@@ -131,6 +143,11 @@ export default {
             };
         },
 
+        getMobileFee() {
+            // TODO: Call new service endpoint to get the Mobile Fee price
+            return "34.99";
+        },
+
         openModal() {
             this.$refs[this.modalName].openModal();
         },
@@ -162,7 +179,7 @@ export default {
         },
 
         async setMobileLocation() {
-            // TODO: Any lookups or actions to be taken before assigning the Mobile Location
+            // Validate the Zip Code
             const zipCodeData = await this.getZipCodeData(
                 this.internalModel.addressQuestions.zipCode
             );

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

@@ -40,6 +40,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 store from "@/store";
 
 export default {
     name: "service-location",
@@ -48,17 +49,17 @@ export default {
             isZipServiceableMobile: null,
             isZipServiceableInShop: null,
             serviceZipCodeQuestion: {
-                state: "",
-                zipCode: "",
-                isServiceable: null,
+                state: this.getServiceStateFromStore(),
+                zipCode: this.getServiceZipCodeFromStore(),
+                isServiceable: this.getIsServiceableFromStore(),
             },
             mobileLocationQuestions: {
                 addressQuestions: {
-                    streetAddress: "",
+                    streetAddress: this.getRegistrationAddressFromStore(),
                     apartmentNumberOrBusinessName: "",
-                    city: "",
-                    state: "",
-                    zipCode: "",
+                    city: this.getRegistrationCityFromStore(),
+                    state: this.getRegistrationStateFromStore(),
+                    zipCode: this.getRegistrationZipFromStore(),
                 },
                 isVehicleProtected: null,
             },
@@ -84,10 +85,32 @@ export default {
             vm.setCmsContent(resultMap.cmsContent);
         });
     },
+
     methods: {
         arePagePrerequisitesValid() {
             return true;
         },
+        getRegistrationAddressFromStore() {
+            return this.$store.getters.vehicle.registration.address;
+        },
+        getRegistrationCityFromStore() {
+            return this.$store.getters.vehicle.registration.city;
+        },
+        getRegistrationStateFromStore() {
+            return this.$store.getters.vehicle.registration.state;
+        },
+        getRegistrationZipFromStore() {
+            return this.$store.getters.vehicle.registration.zipCode;
+        },
+        getServiceZipCodeFromStore() {
+            return this.$store.getters.order.serviceLocation.zipCode;
+        },
+        getServiceStateFromStore() {
+            return this.$store.getters.order.serviceLocation.state;
+        },
+        getIsServiceableFromStore() {
+            return this.$store.getters.order.serviceLocation.isServiceable;
+        },
         resetMobileLocation() {
             this.mobileLocationQuestions = {
                 addressQuestions: {

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

@@ -19,8 +19,9 @@
         @footer-button-event="setZipCode">
         <serviceZipQuestion
             ref="serviceZipQuestion"
-            :cmsWidgetName="textboxQuestionWidgetName"
-            v-model="internalModel.zipCode" />
+            v-model="internalModel.zipCode"
+            v-on="{ 'textboxQuestionEvent.inputIdAssigned': onInputIdAssigned }"
+            :cmsWidgetName="textboxQuestionWidgetName" />
         <alert
             ref="alertInvalidZip"
             v-if="displayInvalidZipAlert"
@@ -43,6 +44,7 @@ export default {
     data() {
         return {
             internalModel: this.copyModel(this.modelValue),
+            serviceZipCodeTextInputId: "",
             displayInvalidZipAlert: false,
         };
     },
@@ -88,8 +90,7 @@ export default {
         },
 
         focusOnZipInput() {
-            const inputId = this.$refs.serviceZipQuestion.$refs.zipInputTextQuestion.inputId;
-            const input = document.getElementById(inputId);
+            const input = document.getElementById(this.serviceZipCodeTextInputId);
             input.focus();
         },
 
@@ -109,6 +110,13 @@ export default {
             this.$refs[this.modalName].closeModal();
         },
 
+        onInputIdAssigned(inputId) {
+            this.serviceZipCodeTextInputId = inputId;
+
+            // bubble up the event to the parent
+            this.$emit("textboxQuestionEvent.inputIdAssigned", inputId);
+        },
+
         onModalOpened() {
             this.focusOnZipInput();
         },
@@ -126,7 +134,9 @@ export default {
                 this.internalModel.isServiceable = zipCodeData.isServiceable;
 
                 // Notify the page that the service zip has been updated to clear Mobile Location form
-                this.$emit("service-zip-updated");
+                if (this.internalModel.zipCode !== this.modelValue.zipCode) {
+                    this.$emit("service-zip-updated");
+                }
 
                 // Update the page level model
                 this.$emit("update:modelValue", this.internalModel);