From 0560ac3124034d47494e89ee0e73e8d4ca09fec5 Mon Sep 17 00:00:00 2001
From: Jason Wheeler <jason.wheeler@safelite.com>
Date: Tue, 11 Apr 2023 12:00:08 -0400
Subject: [PATCH] Everything is working now

---
 src/digital-components/modal/modal_old.vue    | 144 ------------------
 src/helpers/cms-content-helper.js             |  24 ++-
 .../coverage-statement/coverage-statement.vue |  18 +--
 .../recal-modal/recal-modal.vue               |   3 +-
 4 files changed, 25 insertions(+), 164 deletions(-)
 delete mode 100644 src/digital-components/modal/modal_old.vue

diff --git a/src/digital-components/modal/modal_old.vue b/src/digital-components/modal/modal_old.vue
deleted file mode 100644
index 8d961830..00000000
--- a/src/digital-components/modal/modal_old.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<template>
-    <!-- Modal -->
-    <div
-        class="modal fade modal-component"
-        v-on="{ 'hidden.bs.modal': resetButtonStyle }"
-        :id="cmsWidgetName"
-        tabindex="-1"
-        aria-labelledby="ModalComponentLabel"
-        aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button
-                        type="button"
-                        class="btn-close"
-                        data-bs-dismiss="modal"
-                        aria-label="Close"></button>
-                </div>
-                <div class="modal-body ps-4 pe-4 pt-5 pb-4">
-                    <img :src="ModalImage" class="mw-100 d-flex mx-auto mb-4" alt="" />
-                    <h5 class="mb-4" v-html="ModalHeadline"></h5>
-                    <p class="fw-bold mb-2 subheader-text" v-html="ModalSubheadertext"></p>
-                    <p class="mb-0" v-html="ModalBodyText"></p>
-                    <p
-                        class="my-4 caption modal-sub-body"
-                        v-if="ModalSubBodyText"
-                        v-html="ModalSubBodyText"></p>
-                </div>
-                <div class="modal-footer px-5 py-4">
-                    <buttonMain
-                        isPrimary
-                        class="w-100"
-                        ref="buttonMain"
-                        suppressLoader
-                        :buttonText="ModalCloseButtonText"
-                        @click-event="buttonClick"
-                        data-bs-dismiss="modal" />
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import buttonMain from "@/ux-components/button-main/button-main";
-
-export default {
-    name: "modal",
-    props: {
-        cmsWidgetName: String,
-    },
-    computed: {
-        ModalHeadline() {
-            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
-        },
-        ModalSubheadertext() {
-            return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
-        },
-        ModalBodyText() {
-            return this.getCmsContent(this.cmsWidgetName, "BodyText");
-        },
-        ModalSubBodyText() {
-            return this.getCmsContent(this.cmsWidgetName, "BodyText2");
-        },
-        ModalImage() {
-            return this.getCmsContent(this.cmsWidgetName, "Image");
-        },
-        ModalCloseButtonText() {
-            return this.getCmsContent(this.cmsWidgetName, "FooterText");
-        },
-    },
-    methods: {
-        resetButtonStyle() {
-            this.$refs.buttonMain.resetButtonStyle();
-        },
-    },
-    components: {
-        buttonMain,
-    },
-};
-</script>
-
-<style lang="scss">
-.modal {
-    top: auto;
-    bottom: 0;
-    h5,
-    strong,
-    .subheader-text {
-        color: $black;
-    }
-    .modal-header {
-        border-bottom: none;
-        .btn-close {
-            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-component {
-        .modal-dialog {
-            max-width: 576px;
-            margin: 0 auto;
-            .modal-content {
-                margin: 0 auto;
-                box-shadow: 0px 16px 48px -16px rgba(0, 0, 0, 0.25);
-                border-radius: 1.5rem 1.5rem 0 0;
-                .modal-body {
-                    .modal-sub-body {
-                        color: $gray-600;
-                    }
-                    ul {
-                        margin-bottom: 0;
-                    }
-                    p {
-                        &:last-child {
-                            margin-bottom: 0;
-                        }
-                    }
-                }
-            }
-            &.modal-dialog-centered {
-                align-items: flex-end;
-                min-height: 100%;
-            }
-        }
-        .modal-footer {
-            border-top: none;
-            background-color: $gray-100;
-            box-shadow: 0px -1px 0px rgba(179, 180, 181, 0.3);
-            button {
-                margin: 0;
-            }
-        }
-    }
-}
-body {
-    .modal-backdrop {
-        height: 100%;
-        &.show {
-            opacity: 0.4;
-        }
-    }
-}
-</style>
\ No newline at end of file
diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js
index 0b4c29ee..656b2b5f 100644
--- a/src/helpers/cms-content-helper.js
+++ b/src/helpers/cms-content-helper.js
@@ -173,9 +173,14 @@ 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 modalTarget="' + splitParams[0] + '" class="modal-text" aria-label="Modal window">' + splitParams[1] + '</a>'
-  return str.replace(linkToReplace, bodyText);
+  let returnVal = str.replace(linkToReplace, bodyText)
+
+  if (returnVal.includes(dynamicStrings.MODAL_LINK)) {
+    returnVal = mapStringToModal(returnVal);
+  }
+  return returnVal;
 }
 
   // Function to convert a string, into a matching global state item.
@@ -214,7 +219,20 @@ function mapStringToState(str) {
     }
   
     return stringBuilder.trimStart();
-  }
+}
+
+export function setupModalLinks(context) {
+  context.$nextTick(() => {
+    const elements = document.getElementsByClassName("modal-text")
+    for(let element of elements){
+      const target = element.getAttribute("modalTarget");
+      if(target)
+      {
+        element.addEventListener("click", () => context.$refs[target].openModal() );
+      }
+    };
+  });
+}
 
 export function doesCopyContainRouterLink(copy) {
     return copy.includes(this.dynamicStrings.ROUTER_LINK);
diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 7a24a3ac..2bc1d946 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -58,7 +58,7 @@ import textBlock from "@/digital-components/text-block/text-block";
 import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue';
 
 // Import Supporting Files
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import { fetchCmsContentForPage, setupModalLinks } from '@/helpers/cms-content-helper';
 import { settleAllPromises } from '@/helpers/layout-helper';
 import { getDamageString } from '@/helpers/damage-helper.js';
 import { useMainStore } from "@/store";
@@ -111,21 +111,7 @@ export default {
     },
   },
   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() );
-          }
-        };
-      });
+    setupModalLinks(this);
   },
   async beforeRouteEnter(to, from, next) {
     // Call APIs
diff --git a/src/layouts/coverage-statement/recal-modal/recal-modal.vue b/src/layouts/coverage-statement/recal-modal/recal-modal.vue
index a7285ab3..0a360174 100644
--- a/src/layouts/coverage-statement/recal-modal/recal-modal.vue
+++ b/src/layouts/coverage-statement/recal-modal/recal-modal.vue
@@ -3,7 +3,8 @@
         :ref="ModalName"
         :modalId="ModalName"
         :footerButtonText="ModalCloseButtonText" 
-    >
+        @footer-button-event="closeModal"
+       >
         <div class="recal-modal-body ps-4 pe-4 pt-0 pb-5">
             <h5 class="mb-4 text-center" v-html="ModalHeadline"></h5>
             <img :src="ModalImage" class="mw-100 d-flex mx-auto mb-4" alt="" />