From eb87accfb71dcb4151054e297d150903ceb9fa36 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Mon, 13 Feb 2023 15:06:18 -0500
Subject: [PATCH] Moved 'useForm' into modal component

---
 src/digital-components/modal/modal.spec.js                 | 4 ++++
 src/digital-components/modal/modal.vue                     | 4 +++-
 .../mobile-location-modal-questions.vue                    | 7 -------
 .../service-zip-modal-question.vue                         | 7 -------
 4 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/src/digital-components/modal/modal.spec.js b/src/digital-components/modal/modal.spec.js
index 5feaf0216..963167829 100644
--- a/src/digital-components/modal/modal.spec.js
+++ b/src/digital-components/modal/modal.spec.js
@@ -1,10 +1,14 @@
 import { shallowMount } from "@vue/test-utils";
 import Modal from "./modal";
+import crypto from "crypto";
+import { useForm } from "vee-validate";
 
 const modalId = "modal-one";
 const footerButtonText = "Sample footer text here.";
 const headerText = "Sample header text here.";
 
+global.crypto = crypto;
+
 describe("modal.vue", () => {
     it("Should display footer button text when footerButtonText is defined", async () => {
         const wrapper = shallowMount(Modal, {
diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index 1bf7c3fce..e0be2e9c0 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -43,7 +43,7 @@
 <script>
 import buttonMain from "@/ux-components/button-main/button-main";
 import { Modal } from "bootstrap";
-import { useIsFormTouched, useIsFormDirty, useIsFormValid } from "vee-validate";
+import { useForm, useIsFormTouched, useIsFormDirty, useIsFormValid } from "vee-validate";
 
 export default {
     name: "modal",
@@ -60,12 +60,14 @@ export default {
     setup() {
         const modalId = `modal-${crypto.randomUUID()}`;
 
+        const modalForm = useForm();
         const isTouched = useIsFormTouched();
         const isDirty = useIsFormDirty();
         const isValid = useIsFormValid();
 
         return {
             modalId,
+            modalForm,
             isTouched,
             isDirty,
             isValid,
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 d119cf7e8..78310096a 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
@@ -68,13 +68,6 @@ export default {
             },
         };
     },
-    setup() {
-        const modalForm = useForm();
-
-        return {
-            modalForm,
-        };
-    },
     props: {
         modelValue: {
             type: Object,
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 371754477..03c3f6759 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
@@ -71,13 +71,6 @@ export default {
         textboxQuestionWidgetName: String,
         alertInvalidZipWidgetName: String,
     },
-    setup() {
-        const modalForm = useForm();
-
-        return {
-            modalForm,
-        };
-    },
     computed: {
         serviceZipLinkText() {
             if (this.modelValue.zipCode && this.modelValue.zipCode.length > 0) {