From 5ab0d527b28a41744b730170187fc11fdfb1e141 Mon Sep 17 00:00:00 2001
From: Scott Kiener <scott.kiener@safelite.com>
Date: Thu, 12 May 2022 16:39:41 -0400
Subject: [PATCH] CSR-408 | Refactor alerts and alertcopy interaction

---
 src/ux-components/alert/alert.vue | 34 ++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue
index 8170a69a6..8d04d2972 100644
--- a/src/ux-components/alert/alert.vue
+++ b/src/ux-components/alert/alert.vue
@@ -5,15 +5,17 @@
     :class="[isDismissible ? 'alert-dismissible' : '', this.alertClass]"
   >
     <p class="m-0 fw-bold alert-heading">{{ alertHeadline }}</p>
-    <p v-if="splitAlertCopyForLink.length">
-      <template v-for="copy in splitAlertCopyForLink" :key="copy">
-        <span v-if="copy.includes('routerLink:')" class="m-0 text-body">
-          <router-link :to="{query: {fmgPage: `${copy.split(':')[1].split(',')[0]}`}, name: 'root'}">{{ copy.split(':')[1].split(',')[1] }}</router-link>
-        </span>
-        <span v-else class="m-0 text-body" v-html="copy"></span>
-      </template>
-    </p>
-    <p v-else class="m-0 text-body" v-html="alertCopy"></p>
+    <template v-for="paragraph in splitAlertCopyForParagraphTag" :key="paragraph">
+      <p class="m-0 text-body small" v-if="!paragraph.includes('routerLink:')" v-html="paragraph"></p>
+      <p class="m-0 text-body small" v-else>
+        <template v-for="copy in splitParagraphForRouterLink(paragraph)" :key="copy">
+          <span v-if="!copy.includes('routerLink:')" v-html="copy"></span>
+          <span v-else>
+            <router-link :to="{query: {fmgPage: `${copy.split(':')[1].split(',')[0]}`}, name: 'root'}">{{ copy.split(':')[1].split(',')[1] }}</router-link>
+          </span>
+        </template>
+      </p>
+    </template>
     <button
       type="button"
       class="btn-close p-2"
@@ -57,10 +59,18 @@ export default {
     },
     alertCopy(){
       return this.cmsWidgetName ? this.getCmsContent(this.cmsWidgetName, 'BodyText') : this.manualCopy;
+      //return "<p style='display:none'>This is just a long string. {routerLink:estimate,provide your VIN} This is just a long string.</p>How Did you Even manage this?<p>This is just a long string.This is just a long string.This is just a long string.This is just a long string.This is just a long string.This is just a long string.This is just a long string.</p>";
     },
-    splitAlertCopyForLink(){
-      // Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
-      return this.alertCopy.split(/{(.*?)}/g);
+    splitAlertCopyForParagraphTag(){
+      // splits the alertCopy on <p ... > (with or without attributes) and </p>
+      // filter removes empty strings that are a result of string.split with regex
+      return this.alertCopy.split(/(?:<p(?:.*?)>)|(?:<\/p>)/g).filter(paragraph => paragraph !== "");
+    },
+  },
+  methods: {
+    splitParagraphForRouterLink(paragraph){
+      // splits paragraph on { ... } such as {routerlink: ...}
+      return paragraph.split(/{(.*?)}/g);
     }
   },
 };