Technical review changes

src/constants/error-messages.js

@@ -25,6 +25,7 @@ const errorMessages = {
         "Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q",
     OPTION_REQUIRED: "Please select an option",
     VEHICLE_REQUIRED: "Please select a vehicle",
+    MOBILE_LOCATION_REQUIRED: "Please enter your service address",
 };
 
 export { errorMessages };

src/digital-components/modal/modal.vue

@@ -60,14 +60,17 @@ export default {
     setup() {
         const modalId = `modal-${crypto.randomUUID()}`;
 
-        const form = useForm();
+        const { meta, validate, resetForm } = useForm();
+
         const isFormTouched = useIsFormTouched();
         const isFormDirty = useIsFormDirty();
         const isFormValid = useIsFormValid();
 
         return {
             modalId,
-            form,
+            meta,
+            validate,
+            resetForm,
             isFormTouched,
             isFormDirty,
             isFormValid,
@@ -75,7 +78,7 @@ export default {
     },
     methods: {
         async validateAndEmit() {
-            const validationResult = await this.form.validate();
+            const validationResult = await this.validate();
             if (validationResult.valid) {
                 this.$emit("footer-button-event");
             } else {
@@ -103,10 +106,10 @@ export default {
     },
     computed: {
         isFooterButtonDisabled() {
-            if (!this.isFormTouched) {
+            if (!this.meta.touched) {
-                return !this.isFormValid;
+                return !this.meta.valid;
             }
-            return !this.isFormDirty || !this.isFormValid;
+            return !this.meta.dirty || !this.meta.valid;
         },
     },
     components: {

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

@@ -1,11 +1,19 @@
 <template>
-    <div class="textbox-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''">
+    <div
+        class="textbox-question"
+        :class="[
+            (errors && errors.length) || hasError ? 'has-error' : '',
+            hideInput ? 'hide-input' : '',
+        ]">
         <label
             v-if="displayQuestionText"
             :for="inputId"
             :aria-label="questionText"
             class="form-label"
-            :class="[questionAlignment === 'center' ? 'text-center w-100 mb-5' : '']"
+            :class="[
+                questionAlignment === 'center' ? 'text-center w-100 mb-5' : '',
+                hideInput ? 'hide-input' : '',
+            ]"
             v-html="questionText"></label>
         <div class="input-wrapper" :class="[includeSearchIcon ? 'has-search-icon' : '']">
             <input
@@ -25,6 +33,7 @@
                     hasIcon ? 'has-icon' : '',
                     iconRight ? 'icon-right' : '',
                     cornerStyle === 'rounded' ? 'rounded-pill' : '',
+                    hideInput ? 'hide-input' : '',
                 ]"
                 :validationRules="validationRules"
                 @change="handleChange"
@@ -34,7 +43,12 @@
             <button v-if="includeSearchIcon" type="submit" aria-label="Search button" />
         </div>
         <div v-show="errorMessage" class="row my-1 form-test-error">
-            <span class="d-inline-flex small mt-0" role="alert">{{ errorMessage }}</span>
+            <span
+                class="d-inline-flex small mt-0"
+                role="alert"
+                :class="[centerErrorMessage ? 'center-error-message' : '']"
+                >{{ errorMessage }}</span
+            >
         </div>
     </div>
 </template>
@@ -74,6 +88,8 @@ export default {
         questionAlignment: String, // Left or center. Left is default.
         cornerStyle: String, // Rounded or square. Square is default.
         includeSearchIcon: Boolean,
+        hideInput: Boolean,
+        centerErrorMessage: Boolean,
     },
     setup(props) {
         const inputId = !props.customInputId ? `input-${crypto.randomUUID()}` : props.customInputId;
@@ -142,6 +158,12 @@ export default {
 
 <style lang="scss">
 .textbox-question {
+    .hide-input {
+        display: none;
+    }
+    .center-error-message {
+        justify-content: center !important;
+    }
     label {
         color: $black;
         font-weight: 500;

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

@@ -26,6 +26,8 @@
                 :ref="modalName"
                 :headerText="modalHeaderText"
                 :footerButtonText="modalFooterText"
+                :onModalOpenedCallback="onModalOpened"
+                :onModalClosedCallback="onModalClosed"
                 @footer-button-event="setMobileLocation">
                 <addressQuestions
                     ref="addressQuestions"
@@ -152,11 +154,20 @@ export default {
         closeModal() {
             this.$refs[this.modalName].closeModal();
         },
+
+        onModalOpened() {
+            this.internalModel = deepClone(this.modelValue);
+        },
+
+        onModalClosed() {
+            this.internalModel = deepClone(this.modelValue);
+        },
+
         resetComponent(updatedServiceZipCodeInfo) {
             // Reset the validation form, setting the initial values
             // for the state and zipCode to those that were entered
             // on the service-zip-modal-question component
-            this.$refs[this.modalName].form.resetForm({
+            this.$refs[this.modalName].resetForm({
                 values: {
                     autocomplete: updatedServiceZipCodeInfo.streetAddress,
                     city: updatedServiceZipCodeInfo.city,

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

@@ -23,10 +23,16 @@
                 ref="mobileLocationModalQuestions"
                 linkWidgetName="MobileLocationLinkWidget"
                 modalWidgetName="MobileLocationModalWidget" />
+            <textboxQuestion
+                ref="mobileLocationQuestionsError"
+                v-model="mobileLocationValidationField"
+                validationRules="mobile-location-required"
+                hideInput
+                centerErrorMessage />
             <funnel-footer
                 cmsWidgetName="FunnelFooterWidget"
                 ref="funnelFooter"
-                :isForwardActionDisabled="!meta.valid || shouldDisableForwardAction"
+                :isForwardActionDisabled="!meta.valid"
                 @back-clicked="backButtonAction"
                 @ForwardClicked="forwardButtonAction" />
         </div>
@@ -42,7 +48,8 @@ import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
-import { Form } from "vee-validate";
+import { Form, defineRule } from "vee-validate";
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
 
 // Supporting files
 import baseMixin from "@/mixins/base-mixin.js";
@@ -51,6 +58,10 @@ import { settleAllPromises } from "@/helpers/layout-helper";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 import { getPricedMobileFeePart } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
 import store from "@/store";
+import { errorMessages } from "@/constants/error-messages";
+import { required } from "@/helpers/validation-rules";
+
+defineRule("mobile-location-required", required(errorMessages.MOBILE_LOCATION_REQUIRED));
 
 export default {
     name: "service-location",
@@ -66,6 +77,7 @@ export default {
             isZipServiceableInShop: null,
             mobileFeePart: null,
             zipContainsMilitaryBase: false,
+            mobileLocationValidationField: null,
         };
     },
     async beforeRouteEnter(to, from, next) {
@@ -139,6 +151,8 @@ export default {
                 this.state = newValue.addressQuestions.state;
                 this.zipCode = newValue.addressQuestions.zipCode;
                 this.isVehicleProtected = newValue.isVehicleProtected;
+
+                this.mobileLocationValidationField = "isValid";
             },
         },
         shouldDisableForwardAction() {
@@ -180,6 +194,12 @@ export default {
 
             this.isVehicleProtected = null;
         },
+        setServiceZipCodeModalMeta(meta) {
+            this.serviceZipCodeMeta = meta;
+        },
+        setMobileLocationModalMeta(meta) {
+            this.mobileLocationMeta = meta;
+        },
         backButtonAction() {
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
@@ -188,9 +208,9 @@ export default {
         },
     },
     watch: {
-        zipCode(current, previous) {
+        zipCode(newValue, oldValue) {
-            if (current !== previous) {
+            if (newValue !== oldValue) {
-                baseMixin.methods.getZipCodeData(current).then((r) => {
+                baseMixin.methods.getZipCodeData(newValue).then((r) => {
                     this.zipContainsMilitaryBase = r.containsMilitaryBase;
                 });
             }
@@ -205,6 +225,7 @@ export default {
         funnelSubHeader,
         Form,
         loadingModal,
+        textboxQuestion,
     },
 };
 </script>

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

@@ -38,7 +38,7 @@ import textLink from "@/ux-components/text-link/text-link";
 import serviceZipQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-question/service-zip-question";
 import modal from "@/digital-components/modal/modal";
 import alert from "@/ux-components/alert/alert";
-import store from "@/store";
+
 import { getPricedMobileFeePart } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
 
 export default {