From c83604c64d779f25e6a8f4f65bf2a1a244097367 Mon Sep 17 00:00:00 2001
From: Jason Wheeler <jason.wheeler@safelite.com>
Date: Mon, 10 Apr 2023 16:46:50 -0400
Subject: [PATCH] figured out that I needed to run the processing of the
 modal-links on the next tick.

---
 src/helpers/cms-content-helper.js             |  4 +-
 .../coverage-statement/coverage-statement.vue | 49 ++++++++++++-------
 .../recal-modal/recal-modal.vue               |  8 +++
 src/layouts/z-test-page-jg/z-test-page-jg.vue | 29 +++++------
 src/styles/common-styles.scss                 |  6 +++
 5 files changed, 59 insertions(+), 37 deletions(-)

diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js
index 36bf7c70..0b4c29ee 100644
--- a/src/helpers/cms-content-helper.js
+++ b/src/helpers/cms-content-helper.js
@@ -173,8 +173,8 @@ function mapStringToModal(str) {
   
   let params = linkToReplace.substring((dynamicStrings.MODAL_LINK).length + 2, linkToReplace.length -1)
   let splitParams = params.split(",");
-  let bodyText = '<a href="#!" data-bs-toggle="modal" data-bs-target="#' + splitParams[0] + '" aria-label="Modal window">' + splitParams[1] +'</a>'
-  
+  //let bodyText = '<a href="#!" data-bs-toggle="modal" data-bs-target="#' + splitParams[0] + '" aria-label="Modal window">' + splitParams[1] +'</a>'
+  let bodyText = '<a modalTarget="' + splitParams[0] + '" class="modal-text" aria-label="Modal window">' + splitParams[1] + '</a>'
   return str.replace(linkToReplace, bodyText);
 }
 
diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 8fcbfb79..7a24a3ac 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -43,9 +43,8 @@
         />
       </div>
     </div>
-    <recalModal cmsWidgetName="RecalModal" />
+    <recalModal ref="RecalModal" cmsWidgetName="RecalModal" />
   </Form>
-
 </template>
 <script>
 
@@ -78,21 +77,21 @@ export default {
   },
   computed: {
     bodyText() {
-      if (useMainStore().order.damage.isRepair) {
-        return this.unverifiedNonADASRepairBodyText;
-      }
-      else {
-        let parts = useMainStore().order.lineItems.glassParts;
-
-        // if ADAS, display ADASNextSteps
-        if (parts.filter(part => part.requiresRecalibration).length > 0) {
-          return this.unverifiedADASNextStepsBodyText;
+        if (useMainStore().order.damage.isRepair) {
+          return this.unverifiedNonADASRepairBodyText;
         }
-        // if non-ADAS, display NonADASNextSteps
         else {
-          return this.unverifiedNonADASNextStepsBodyText;
+          let parts = useMainStore().order.lineItems.glassParts;
+
+          // if ADAS, display ADASNextSteps
+          if (parts.filter(part => part.requiresRecalibration).length > 0) {
+            return this.unverifiedADASNextStepsBodyText;
+          }
+          // if non-ADAS, display NonADASNextSteps
+          else {
+            return this.unverifiedNonADASNextStepsBodyText;
+          }
         }
-      }
     },
     continueWithSchedulingBodyText() {
       return this.getCmsContent("continueWithSchedulingCopy", "BodyText");
@@ -110,10 +109,23 @@ export default {
     var damageString = getDamageString();
     return damageString == "match" ? "" : damageString;
     },
-    openModal(name)
-    {
-      $refs[name].openModal();
-    },
+  },
+  mounted() { 
+    this.$nextTick(() => {
+        const elements = document.getElementsByClassName("modal-text")
+        console.log(elements); 
+        
+        for(let element of elements){
+          console.log(element); 
+          const target = element.getAttribute("modalTarget");
+          console.log("HERE!!!!" + target);
+          if(target)
+          {
+            console.log("HERE!!!!");
+            element.addEventListener("click", () => this.$refs[target].openModal() );
+          }
+        };
+      });
   },
   async beforeRouteEnter(to, from, next) {
     // Call APIs
@@ -178,4 +190,5 @@ p strong {
     color: #000000;
     font-weight: 500;
 }
+
 </style>
diff --git a/src/layouts/coverage-statement/recal-modal/recal-modal.vue b/src/layouts/coverage-statement/recal-modal/recal-modal.vue
index b1a2d403..a7285ab3 100644
--- a/src/layouts/coverage-statement/recal-modal/recal-modal.vue
+++ b/src/layouts/coverage-statement/recal-modal/recal-modal.vue
@@ -27,6 +27,14 @@ export default {
     props: {
         cmsWidgetName: String,
     },
+    methods: {
+        openModal() {
+            this.$refs[this.ModalName].openModal();
+        },
+        closeModal() {
+            this.$refs[this.ModalName].closeModal();
+        },
+    },
     computed: {
         ModalName() {
             return this.cmsWidgetName;
diff --git a/src/layouts/z-test-page-jg/z-test-page-jg.vue b/src/layouts/z-test-page-jg/z-test-page-jg.vue
index eae6b414..d0cc8723 100644
--- a/src/layouts/z-test-page-jg/z-test-page-jg.vue
+++ b/src/layouts/z-test-page-jg/z-test-page-jg.vue
@@ -14,7 +14,7 @@
                         here
                     </p>
                     
-                    <a id="test" href="#!" aria-label="Modal window">Wow!!</a>
+                    <a modalTarget="ModalName" class="modal-text" href="#!" aria-label="Modal window">Wow!!</a>
                     <siteFooter
                         cmsWidgetName="SiteFooterWidget"
                         :isForwardActionDisabled="!meta.valid"
@@ -60,24 +60,19 @@ export default {
             openModal(modalName) {
                 this.$refs[modalName].openModal();
             },
-            clickModalButton() {
-                alert("you clicked me!");
-            }
         },
-       /* mounted: (
-            () => {
-                const element = document.getElementById("test");
-                element.addEventListener("click", () => app.openModal("ModalName") )
-            }
-        ),
-        */
         mounted() { 
-            console.log(document.getElementById("test")) 
-            console.log(this.openModal);
-            const element = document.getElementById("test");
-            const modalname = "ModalName";
-            const openModal = this.openModal;
-            element.addEventListener("click", () => openModal(modalname) )
+            const elements = document.getElementsByClassName("modal-text")
+            const openModal = (modalName) => {
+                this.$refs[modalName].openModal();
+            };
+            Array.from(elements).forEach((element) => {
+                const target = element.getAttribute("modalTarget");
+                if(target)
+                {
+                    element.addEventListener("click", () => openModal(target) )
+                }
+            });
         },
         computed: {
             bodyText() {
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 94913982..050d7cf7 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -57,4 +57,10 @@ body {
       height: calc(100% - 72px);
     }
 
+    .modal-text {
+      display: inline;
+      color: $blue;
+      cursor: pointer;
+      text-decoration: underline;
+    }
   }