Merge remote-tracking branch 'origin/feature/CSR-1088' into feature/CSR-1012

src/digital-components/modal/modal.vue

@@ -51,23 +51,17 @@ export default {
             type: Function,
         },
     },
-    data() {
-        return {
-            modal: null,
-        };
-    },
-    mounted() {
-        this.modal = new Modal(document.getElementById(this.modalId));
-    },
     methods: {
         resetButtonStyle() {
             this.$refs.buttonMain.resetButtonStyle();
         },
         openModal() {
-            this.modal.show();
+            const modal = Modal.getOrCreateInstance(document.getElementById(this.modalId));
+            modal.show();
         },
         closeModal() {
-            this.modal.hide();
+            const modal = Modal.getInstance(document.getElementById(this.modalId));
+            modal.hide();
         },
     },
     components: {

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

@@ -1,6 +1,7 @@
 <template>
     <div class="textbox-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''">
-        <label v-if="displayQuestionText"
+        <label
+            v-if="displayQuestionText"
             :for="inputId"
             :aria-label="questionText"
             class="form-label"
@@ -55,7 +56,7 @@ export default {
         },
         displayQuestionText: {
             type: Boolean,
-            default: true
+            default: true,
         },
         modelValue: String,
         inputId: String,

src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue

@@ -83,7 +83,6 @@
             alertClass="alert-warning"
             v-bind:isDismissible="false" />
     </div>
-
 </template>
 
 <script>
@@ -432,7 +431,6 @@ export default {
 </script>
 
 <style lang="scss">
-
 .address-questions {
     margin-top: 0.5rem;
 }
@@ -445,5 +443,4 @@ export default {
         left: 0 !important;
     }
 }
-
 </style>

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

@@ -32,7 +32,7 @@
         <vehicleProtectedQuestion
             ref="vehicleProtectedQuestion"
             v-model="mobileLocationQuestionModel.isVehicleProtected"
-            cmsWidgetName="VehicleProtectedQuestionWidget"  />
+            cmsWidgetName="VehicleProtectedQuestionWidget" />
         <textBlock cmsWidgetName="WorkspaceRequirementsWidget" typeStyle="caption" />
     </modal>
 </template>
@@ -55,7 +55,6 @@ import baseMixin from "@/mixins/base-mixin.js";
 
 // Define Validation Rules
 
-
 export default {
     name: "mobile-location-modal-questions",
     emits: ["update:modelValue"], // The component emits an event
@@ -69,7 +68,7 @@ export default {
 
         return {
             modalForm,
-        }
+        };
     },
     props: {
         modelValue: {
@@ -139,7 +138,6 @@ export default {
             } else {
                 this.$refs.mobileLocationModal.resetButtonStyle();
             }
-                   
         },
     },
 
@@ -169,5 +167,4 @@ export default {
 .address-questions {
     margin-top: 0em;
 }
-
 </style>

src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue

@@ -10,8 +10,6 @@
         isRequired />
 </template>
 
-
-
 <script>
 import buttonQuestion from "@/digital-components/button-question/button-question";
 // Supporting files

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

@@ -36,8 +36,6 @@ import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-heade
 import { Form } from "vee-validate";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
-import { validator } from "vee-validate"
-import { provide } from 'vue';
 
 export default {
     name: "service-location",

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

@@ -85,6 +85,13 @@ export default {
         alertNonServiceableZipWidgetName: String,
         alertInvalidZipWidgetName: String,
     },
+    setup() {
+        const modalForm = useForm();
+
+        return {
+            modalForm,
+        };
+    },
     methods: {
         openZipCodeModal() {
             this.$refs[this.modalName].openModal();
@@ -122,25 +129,21 @@ export default {
 
         async setZip() {
             this.resetAlerts();
+            const componentValidation = await this.modalForm.validate();
+            if (componentValidation.valid) {
+                const zipCodeData = await this.getZipCodeData(this.serviceZipCodeInput);
+                if (!zipCodeData.isValid) {
+                    this.displayInvalidZipAlert = true;
+                } else if (!zipCodeData.isServiceable) {
+                    this.displayNonServiceableZipAlert = true;
+                } else {
+                    this.serviceZip = this.serviceZipCodeInput;
+                    this.serviceZipState = zipCodeData.state;
 
-            const zipLength = 5;
+                    this.$refs[this.modalName].closeModal();
-            if (!this.serviceZipCodeInput || this.serviceZipCodeInput.length < zipLength) {
+                }
-                // prevent reading 1111 as 01111
-                return;
             } 
 
-            const zipCodeData = await this.getZipCodeData(this.serviceZipCodeInput);
-
-            if (!zipCodeData.isValid) {
-                this.displayInvalidZipAlert = true;
-            } else if (!zipCodeData.isServiceable) {
-                this.displayNonServiceableZipAlert = true;
-            } else {
-                this.serviceZip = this.serviceZipCodeInput;
-                this.serviceZipState = zipCodeData.state;
-
-                this.$refs[this.modalName].closeModal();
-            }
         },
     },
     computed: {
@@ -203,5 +206,4 @@ export default {
     vertical-align: middle;
     margin-right: 0.5em;
 }
-
 </style>