WIP

src/constants/error-messages.js

@@ -18,6 +18,7 @@ const errorMessages = {
     LAST_NAME_REQUIRED: "Please enter your last name",
     EMAIL_ADDRESS_REQUIRED: "Please enter your email address",
     EMAIL_ADDRESS_FORMAT: "Please enter a valid email address",
+    SERVICE_ADDRESS_REQUIRED: "Please enter your service address",
     SERVICE_ZIP_REQUIRED: "Please enter your service ZIP",
     SERVICE_ZIP_FORMAT: "Please enter a valid service ZIP",
     VIN_REQUIRED: "Please enter your VIN",

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

@@ -22,6 +22,9 @@
                     cmsWidgetName="MobileFeeDisclaimerWidget"
                     typeStyle="caption" />
             </div>
+            <div v-show="errorMessage" class="row my-1 form-test-error">
+                <span class="small mt-0" role="alert">{{ errorMessage }}</span>
+            </div>
             <modal
                 :ref="modalName"
                 :headerText="modalHeaderText"
@@ -57,6 +60,7 @@ import alert from "@/ux-components/alert/alert";
 import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
 import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question";
 import store from "@/store";
+import { useField } from "vee-validate";
 
 // Helpers
 import { deepClone } from "@/layouts/service-location/helpers/object-cloning-helper/object-cloning-helper";
@@ -71,6 +75,36 @@ export default {
             displayInvalidZipAlert: false,
         };
     },
+    setup(props) {
+        const inputId = `component-${crypto.randomUUID()}`;
+
+        const propsClone = Object.assign({}, props);
+        const modelValue = propsClone.modelValue;
+
+        const initialValue = modelValue;
+
+        const fieldOptions = {
+            type: "object",
+            value: modelValue,
+            initialValue: initialValue,
+        };
+
+        const { errorMessage, handleBlur, handleChange, meta, validate, errors } = useField(
+            inputId,
+            props.validationRules,
+            fieldOptions
+        );
+
+        return {
+            inputId,
+            errorMessage,
+            handleBlur,
+            handleChange,
+            validate,
+            meta,
+            errors,
+        };
+    },    
     props: {
         modelValue: {
             type: Object,
@@ -93,6 +127,7 @@ export default {
         modalWidgetName: String,
         alertNonServiceableZipWidgetName: String,
         alertInvalidZipWidgetName: String,
+        validationRules: String
     },
     computed: {
         mobileLocationLinkPromptText() {
@@ -158,6 +193,8 @@ export default {
             // on the service-zip-modal-question component
             this.$refs[this.modalName].form.resetForm({
                 values: {
+                    autocomplete: updatedServiceZipCodeInfo.streetAddress,
+                    city: updatedServiceZipCodeInfo.city,
                     state: updatedServiceZipCodeInfo.state,
                     zipCode: updatedServiceZipCodeInfo.zipCode,
                     isVehicleProtected: updatedServiceZipCodeInfo.isVehicleProtected,
@@ -197,10 +234,13 @@ export default {
                 this.internalModel = deepClone(newValue);
 
                 this.resetComponent({
+                    streetAddress: newValue.addressQuestions.streetAddress,
+                    city: newValue.addressQuestions.city,
                     state: newValue.addressQuestions.state,
                     zipCode: newValue.addressQuestions.zipCode,
                     isVehicleProtected: newValue.isVehicleProtected,
                 });
+                
             },
             deep: true,
         },

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

@@ -22,11 +22,12 @@
                 @updated-mobile-fee-part="setMobileFeePart"
                 ref="mobileLocationModalQuestions"
                 linkWidgetName="MobileLocationLinkWidget"
-                modalWidgetName="MobileLocationModalWidget" />
+                modalWidgetName="MobileLocationModalWidget" 
+                validationRules="service-address-required"/>   
             <funnel-footer
                 cmsWidgetName="FunnelFooterWidget"
                 ref="funnelFooter"
-                :isForwardActionDisabled="!meta.valid || shouldDisableForwardAction"
+                :isForwardActionDisabled="!meta.valid"
                 @back-clicked="backButtonAction"
                 @ForwardClicked="forwardButtonAction" />
         </div>
@@ -42,7 +43,7 @@ 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";
 
 // Supporting files
 import baseMixin from "@/mixins/base-mixin.js";
@@ -50,8 +51,24 @@ import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 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 { errorMessages } from "@/constants/error-messages";
 import store from "@/store";
 
+defineRule("service-address-required", (value) => {
+    const isValid = 
+        value.addressQuestions.streetAddress !== "" && 
+        value.addressQuestions.city !== "" && 
+        value.addressQuestions.state !== "" && 
+        value.addressQuestions.zipCode !== "" &&
+        value.isVehicleProtected !== null;
+
+    if (!isValid) {
+        return errorMessages.SERVICE_ADDRESS_REQUIRED;
+    }  
+
+    return isValid;
+});
+
 export default {
     name: "service-location",
     data() {
@@ -139,6 +156,12 @@ export default {
                 this.state = newValue.addressQuestions.state;
                 this.zipCode = newValue.addressQuestions.zipCode;
                 this.isVehicleProtected = newValue.isVehicleProtected;
+
+                // setErrors({
+                //     mobileLocationQuestions: ""
+                // });
+
+                //this.$refs.theForm.setTouched({});
             },
         },
         shouldDisableForwardAction() {
@@ -147,6 +170,7 @@ export default {
     },
     methods: {
         arePagePrerequisitesValid() {
+            
             return (
                 store.getters.lineItems.supportingItems !== null &&
                 store.getters.order.serviceLocation.zipCode !== null &&
@@ -188,9 +212,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;
                 });
             }
@@ -208,3 +232,12 @@ export default {
     },
 };
 </script>
+
+<style lang="scss">
+.form-test-error {
+    text-align: center;
+}
+
+
+
+</style>