CSR-1012 | modal open and close functions

src/digital-components/modal/modal.vue

@@ -2,7 +2,7 @@
     <!-- Modal -->
     <div
         class="modal fade modal-component"
-        v-on="{ 'hidden.bs.modal': resetButtonStyle, 'shown.bs.modal': onShownCallback }"
+        v-on="{ 'hidden.bs.modal': resetButtonStyle, 'shown.bs.modal': onModalOpenedCallback }"
         :id="cmsWidgetName"
         tabindex="-1"
         aria-labelledby="ModalComponentLabel"
@@ -44,12 +44,13 @@
 
 <script>
 import buttonMain from "@/ux-components/button-main/button-main";
+import { Modal } from "bootstrap";
 
 export default {
     name: "modal",
     props: {
         cmsWidgetName: String,
-        onShownCallback: {
+        onModalOpenedCallback: {
             type: Function,
         },
 
@@ -59,6 +60,14 @@ export default {
             // if undefined, footer button closes modal
         },
     },
+    data() {
+        return {
+            myModal: null,
+        };
+    },
+    mounted() {
+        this.myModal = new Modal(document.getElementById(this.cmsWidgetName));
+    },
     computed: {
         ModalHeadline() {
             return this.getCmsContent(this.cmsWidgetName, "HeaderText");
@@ -86,8 +95,11 @@ export default {
         resetButtonStyle() {
             this.$refs.buttonMain.resetButtonStyle();
         },
+        openModal() {
+            this.myModal.show();
+        },
         closeModal() {
-            this.$refs.modalXButton.click();
+            this.myModal.hide();
         },
         async footerButtonClick() {
             if (this.footerButtonCallback) {

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

@@ -1,25 +1,25 @@
 <template>
     <div class="text-center">
         <label
-            :for="serviceZipCodeInput"
+            :for="displayModalLink"
             :aria-label="questionText"
             class="form-label fw-bold w-100 ps-4 pe-4 pt-4"
             :class="[questionAlignment === 'center' ? 'text-center w-100 mb-5' : '']"
             v-html="questionText"></label>
         <div class="update-zip-text-link">
             <textLink
+                id="displayModalLink"
                 linkType="text"
                 :text="this.serviceZipDisplayText"
                 href="#!"
-                data-bs-toggle="modal"
-                :data-bs-target="getModalId"
+                @click-event="openZipCodeModal"
                 aria-label="Modal window" />
         </div>
     </div>
     <modal
         ref="zipCodeInputModal"
         :cmsWidgetName="this.modalWidgetName"
-        :onShownCallback="onModalOpen"
+        :onModalOpenedCallback="onModalOpen"
         :footerButtonCallback="setZip">
         <div class="ps-4 pe-4 pb-4">
             <textboxQuestion
@@ -62,7 +62,6 @@ import textboxQuestion from "@/digital-components/textbox-question/textbox-quest
 import { defineRule } from "vee-validate";
 import { required, regex } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
-import { isNoUnitNumericStyleProp } from "@vue/shared";
 
 // Define Validation Rules
 defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
@@ -87,6 +86,9 @@ export default {
         alertInvalidZipWidgetName: String,
     },
     methods: {
+        openZipCodeModal() {
+            this.$refs.zipCodeInputModal.openModal();
+        },
         getZipFromStore() {
             return this.$store.getters.order.serviceLocation.zipCode;
         },
@@ -145,9 +147,6 @@ export default {
         },
     },
     computed: {
-        getModalId() {
-            return "#" + this.modalWidgetName;
-        },
         questionText() {
             return this.getCmsContent(this.cmsWidgetName, "HeaderText");
         },