recal modal link

src/layouts/coverage-statement/coverage-statement.vue

@@ -23,23 +23,31 @@
             cmsWidgetName="whatHappensNextCopy"
             class="mt-4 mb-2 fw-bold"
         />
-        <div v-if="unverifiedADASNextSteps">
-          <div v-for="copy in splitADASCoverageStatementCopy" :key="copy">
-          <span 
-            v-if="!doesCopyContainTextLink(copy)" 
-            v-html="copy">
-          </span>
-          <span v-else>
-              <text-link
-                linkType="text"
-                :text="getRouterLinkDisplayTextFromCopy(copy)"
-                href="#!"
-                data-bs-toggle="modal"
-                data-bs-target="#RecalModal"
-                aria-label="Modal window"
-              />
-          </span>
-          />
+        <div> 
+          <ol>
+            <li v-for="listItem in this.arrayOfListItemsFromBodyText" :key="listItem">
+              <!-- no textLink -->
+              <span 
+                v-if="!doesCopyContainTextLink(listItem)"
+                v-html="listItem"></span>
+              <!-- with textLink-->
+              <template
+                v-else
+                v-for="copy in splitCopyOnCMSPlaceHolder(listItem)"
+                :key="copy">
+                <span v-if="!doesCopyContainTextLink(copy)" v-html="copy"></span>
+                <span v-else>
+                  <textLink
+                      linkType="text"
+                      :text="getRouterLinkDisplayTextFromCopy(copy)"
+                      href="#!"
+                      data-bs-toggle="modal"
+                      data-bs-target="#RecalModal"
+                      aria-label="Modal window" />
+                </span>
+              </template>
+            </li>
+          </ol>
         </div>
         <textBlock
             cmsWidgetName="UnverifiedNonADASNextStepsWidget"
@@ -51,6 +59,7 @@
             typeStyle="body"
             v-if="unverifiedNonADASRepair"
         />
+        <modal cmsWidgetName="RecalModal" />
         <siteFooter
           cmsWidgetName="SiteFooterWidget"
           :isForwardActionDisabled="!meta.valid"
@@ -60,7 +69,6 @@
         />
       </div>
     </div>
-    </div>
   </Form>
 </template>
 <script>
@@ -86,7 +94,6 @@ import {
 } from '@/helpers/cms-content-helper';
 import { settleAllPromises } from '@/helpers/layout-helper';
 import { useMainStore } from "@/store";
-import { regex } from "@/helpers/validation-rules";
 
 export default {
   name: 'coverage-statement',
@@ -128,6 +135,9 @@ export default {
     splitADASCoverageStatementCopy() {
       // Splits content when brackets are found in text so that text can be looped through and text-link can be injected when needed
       return this.splitCopyOnCMSPlaceHolder(this.unverifiedADASNextStepsBodyText);
+    },
+    arrayOfListItemsFromBodyText() {
+      return this.getArrayOfListItemsFromRawCmsCopy(this.unverifiedADASNextStepsBodyText);
     }
   },
   async beforeRouteEnter(to, from, next) {
@@ -178,6 +188,16 @@ export default {
         }
       }
     },
+    stripOlTagFromCopy(copy) {
+      const regex = /(?:<ol(?:.*?)>)|(?:<\/ol>)/g;
+      return copy.replace(regex, "");
+    },
+    getArrayOfListItemsFromRawCmsCopy(copy) {
+      const withoutOlTags = this.stripOlTagFromCopy(copy);
+      return withoutOlTags
+          .split(/(?:<li(?:.*?)>)|(?:<\/li>)/g)
+          .filter((lineItem) => lineItem);
+    },
   },
     async forwardButtonAction() {},
     resetDependentState() {},