From 66fa86d944b5eb8c99dbf4806176350ead2ba559 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Mon, 17 Apr 2023 13:41:10 -0400
Subject: [PATCH] open and close modal

---
 .../service-zip-modal-question.vue            | 60 +++++++++++++++++--
 1 file changed, 54 insertions(+), 6 deletions(-)

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 83620e50..f332f983 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
@@ -10,19 +10,28 @@
                 aria-label="Modal window" />
         </div>
     </div>
-    <contentGroupModal
+    <modal
+        :ref="modalName"
         cmsWidgetName="ServiceZipModalWidget"
-        ref="ServiceZipModalWidget"
-        modalId="ServiceZipModalWidget" />
+        :onModalOpenedCallback="onModalOpened"
+        :onModalClosedCallback="onModalClosed"
+        :footerButtonText="modalFooterText"
+        @footer-button-event="setZipCode"
+    />
 </template>
 
 <script>
-import contentGroupModal from "@/iss-components/content-group-modal/content-group-modal.vue";
+import modal from "@/digital-components/modal/modal.vue"
 import textLink from "@/ux-components/text-link/text-link";
 
 export default {
     name: "service-zip-modal-question",
     emits: ["update:modalValue"],
+    data() {
+        return {
+            internalModel: this.copyModel(this.modelValue),
+        };
+    },
     props: {
         modelValue: {
             type: Object,
@@ -39,11 +48,50 @@ export default {
                 return this.modelValue.serviceZipState + ", " + this.modelValue.serviceZip;
             }
         },
+        modalFooterText() {
+            return this.getCmsContent(this.modalWidgetName, "FooterText");
+        },
+        modalName() {
+            return this.modalWidgetName;
+        },
+    },
+    methods: {
+        copyModel(modelToCopy) {
+            return {
+                serviceZipState: modelToCopy.serviceZipState,
+                serviceZip: modelToCopy.serviceZip,
+            };
+        },
+        openModal() {
+            this.$refs[this.modalName].openModal();
+        },
+        closeModal() {
+            this.$refs[this.modalName].closeModal();
+        },
+        onModalOpened() {
+            this.internalModel.serviceZip = this.modelValue.serviceZip;
+            this.focusOnZipInput();
+        },
+        onModalClosed() {
+            this.internalModel.serviceZip = this.modelValue.serviceZip;
+            this.resetsOnZipInput();
+        },
+    },
+    watch: {
+        modelValue(newValue) {
+            this.internalModel = this.copyModel(newValue);
+        },
+        "internalModel.serviceZip": {
+            handler() {
+                this.resetsOnZipInput();
+            },
+        },
     },
     components: {
-        contentGroupModal,
-        textLink
+        textLink,
+        modal
     },
+    
 };
 </script>