temp chkin

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

@@ -130,7 +130,6 @@ export default {
         modalFooterText() {
             return this.getCmsContent(this.modalWidgetName, "FooterText");
         },
-
         addressModel: {
             get: function () {
                 return this.modelValue.addressQuestions;

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

@@ -13,10 +13,11 @@
                     modalWidgetName="ServiceZipModalWidget" />
                 <serviceTypeQuestion
                     v-model="selectedServiceType"
-                    ref="serviceType"
+                    ref="serviceTypeQuestion"
                     groupName="ServiceTypeQuestion"
-                    cmsWidgetName="ServiceTypeQuestionWidget"/>
-                <mobileLocationModalQuestions 
+                    cmsWidgetName="ServiceTypeQuestionWidget"
+                    validationRules="option-required" />
+                <mobileLocationModalQuestions
                     v-if="selectedServiceType === 'Mobile'"
                     v-model="mobileLocationQuestions"
                     ref="mobileLocationModalQuestions"
@@ -29,7 +30,6 @@
                     @back-clicked="backButtonAction"
                     @ForwardClicked="forwardButtonAction" />
             </div>
-
         </div>
     </Form>
 </template>
@@ -43,9 +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, defineRule } from "vee-validate";
-import { required, regex } from "@/helpers/validation-rules";
-import { errorMessages } from "@/constants/error-messages";
+import { Form } from "vee-validate";
 
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -66,7 +64,7 @@ export default {
             isZipServiceableMobile: null,
             isZipServiceableInShop: null,
             mobileFeePart: null,
-            selectedServiceType: null
+            selectedServiceType: null,
         };
     },
     async beforeRouteEnter(to, from, next) {
@@ -113,6 +111,8 @@ export default {
                 this.state = newValue.state;
                 this.zipCode = newValue.zipCode;
                 this.isServiceable = newValue.isServiceable;
+
+                console.log(this);
             },
         },
         mobileLocationQuestions: {
@@ -176,6 +176,10 @@ export default {
             });
         },
         resetMobileLocation(updatedServiceZipCode) {
+            if (!this.$refs.mobileLocationModalQuestions) {
+                return;
+            }
+
             this.streetAddress = "";
             this.apartmentNumberOrBusinessName = "";
             this.city = "";
@@ -210,5 +214,5 @@ export default {
     & > span {
         text-align: center;
     }
-}   
-</style>
+}
+</style>

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

@@ -17,6 +17,8 @@
 <script>
 import buttonQuestion from "@/digital-components/button-question/button-question";
 
+import { useForm, useIsFormTouched, useIsFormDirty, useIsFormValid } from "vee-validate";
+
 export default {
     name: "service-type-question",
     props: {
@@ -29,7 +31,14 @@ export default {
         isGlassServiceableMobile: Boolean,
         isGlassServiceableInShop: Boolean,
         isRecalibrationServiceableInShop: Boolean,
-        isRecalibrationServiceableMobile: Boolean
+        isRecalibrationServiceableMobile: Boolean,
+    },
+    setup() {
+        const form = useForm();
+
+        return {
+            form
+        };
     },
     computed: {
         questionText() {
@@ -58,4 +67,4 @@ export default {
     height: auto;
     width: 3.417rem;
 }
-</style>
+</style>