From f3f17490ee6d6acdcc1524e526d650c48e5a31ea Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Mon, 6 Feb 2023 13:46:02 -0500
Subject: [PATCH] Modal validates itself now by passing in the modalForm object

---
 src/digital-components/modal/modal.vue        | 24 ++++++++++++-----
 .../mobile-location-modal-questions.vue       | 26 ++++--------------
 .../vehicle-protected-question.vue            | 12 +--------
 .../service-zip-modal-question.vue            | 27 +++++++++----------
 4 files changed, 37 insertions(+), 52 deletions(-)

diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index 30c47e578..b90449ffb 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -10,7 +10,9 @@
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
                 <div class="modal-header mb-2 mt-2">
-                    <label v-if="headerText" class="modal-title d-flex justify-content-center pb-0 w-100">
+                    <label
+                        v-if="headerText"
+                        class="modal-title d-flex justify-content-center pb-0 w-100">
                         {{ headerText }}
                     </label>
                     <button
@@ -18,7 +20,7 @@
                         type="button"
                         class="btn-close"
                         data-bs-dismiss="modal"
-                        aria-label="Close"></button>                        
+                        aria-label="Close"></button>
                 </div>
                 <div class="modal-body ps-5 pe-5 pb-4 pt-0">
                     <slot></slot>
@@ -30,7 +32,7 @@
                         ref="buttonMain"
                         suppressLoader
                         :buttonText="footerButtonText"
-                        @click-event="$emit('footer-button-event')" />
+                        @click-event="validateAndEmit" />
                 </div>
             </div>
         </div>
@@ -47,11 +49,22 @@ export default {
         modalId: String,
         headerText: String,
         footerButtonText: String,
+        modalForm: {
+            type: Object,
+        },
         onModalOpenedCallback: {
             type: Function,
         },
     },
     methods: {
+        async validateAndEmit() {
+            const validationResult = await this.modalForm.validate();
+            if (validationResult.valid) {
+                this.$emit('footer-button-event');            
+            } 
+            
+            this.resetButtonStyle();
+        },
         resetButtonStyle() {
             this.$refs.buttonMain.resetButtonStyle();
         },
@@ -80,15 +93,14 @@ export default {
         color: $black;
     }
     .modal-header {
-        border-bottom: none;      
+        border-bottom: none;
         .btn-close {
             position: absolute;
             right: 1rem;
             top: 1rem;
             background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.6874 1.82179L9.50889 8L15.6874 14.1782C16.1042 14.595 16.1042 15.2707 15.6874 15.6875C15.4843 15.8907 15.2146 16 14.9328 16C14.6514 16 14.3818 15.8906 14.1787 15.6875L8.00017 9.50934L1.82171 15.6875C1.6182 15.8907 1.34876 16 1.06708 16C0.785733 16 0.516056 15.8906 0.312965 15.6875C-0.10429 15.2706 -0.10429 14.5952 0.312797 14.1784L6.03276 8.45867L6.49146 8L0.312945 1.82177C-0.10429 1.40483 -0.10429 0.729418 0.312797 0.31262C0.728936 -0.104145 1.40489 -0.104051 1.82185 0.31262L7.54152 6.03202L8.00017 6.49065L14.1786 0.312472C14.5955 -0.104107 15.2707 -0.104201 15.6874 0.312452C16.1042 0.729289 16.1042 1.40496 15.6874 1.82179Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
             opacity: 1;
-
-        };
+        }
 
         .modal-title {
             font-weight: 500;
diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
index dbce77065..fc898fdfb 100644
--- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
+++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
@@ -24,7 +24,8 @@
         :modalId="this.modalWidgetName"
         :onModalOpenedCallback="onModalOpened"
         :footerButtonText="modalFooterText"
-        @footer-button-event="saveMobileLocationData">
+        @footer-button-event="setMobileLocation"
+        :modalForm="modalForm">
         <addressQuestions
             ref="addressQuestions"
             v-model="mobileLocationQuestionModel.addressQuestions"
@@ -47,11 +48,7 @@ import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location
 import textBlock from "@/digital-components/text-block/text-block";
 
 // Supporting Files
-import { defineRule, useForm } from "vee-validate";
-import { required, regex } from "@/helpers/validation-rules";
-import { errorMessages } from "@/constants/error-messages";
-import { storeActions } from "@/constants/store-actions.js";
-import baseMixin from "@/mixins/base-mixin.js";
+import { useForm } from "vee-validate";
 
 // Define Validation Rules
 
@@ -119,29 +116,16 @@ export default {
         },
     },
     methods: {
-        loadInitialData() {
-            return baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_YEARS, {});
-        },
-        initializeComponent(initialData) {
-            this.answers = initialData;
-        },
         openModal() {
             this.$refs.mobileLocationModal.openModal();
         },
         closeModal() {
             this.$refs.mobileLocationModal.closeModal();
         },
-        async saveMobileLocationData() {
-            const componentValidation = await this.modalForm.validate();
-            if (componentValidation.valid) {
-                this.closeModal();
-            } else {
-                this.$refs.mobileLocationModal.resetButtonStyle();
-            }
+        async setMobileLocation() {
+            this.closeModal(); 
         },
     },
-
-    mounted() {},
     components: {
         textLink,
         modal,
diff --git a/src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue b/src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue
index 3f7636fd1..6b00df0d1 100644
--- a/src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue
+++ b/src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue
@@ -12,10 +12,8 @@
 
 <script>
 import buttonQuestion from "@/digital-components/button-question/button-question";
-// Supporting files
-import { storeActions } from "@/constants/store-actions.js";
-import baseMixin from "@/mixins/base-mixin.js";
 
+// Supporting files
 import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
@@ -47,14 +45,6 @@ export default {
             return this.getCmsContent(this.cmsWidgetName, "Answers");
         },
     },
-    methods: {
-        loadInitialData() {
-            return baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_YEARS, {});
-        },
-        initializeComponent(initialData) {
-            this.years = initialData;
-        },
-    },
 };
 </script>
 
diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
index 262d6e769..50090769a 100644
--- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
+++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
@@ -22,7 +22,8 @@
         :onModalOpenedCallback="onModalOpened"
         :footerButtonText="footerButtonText"
         :headerText="textboxQuestionPrompt"
-        @footer-button-event="setZip">
+        @footer-button-event="setZip"
+        :modalForm="modalForm">
         <textboxQuestion
             ref="zipInputTextQuestion"
             :cmsWidgetName="this.textboxQuestionWidgetName"
@@ -129,21 +130,19 @@ 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;
 
-                    this.$refs[this.modalName].closeModal();
-                }
-            } 
+            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: {