start of linking to recal modal

src/constants/dynamic-strings.js

@@ -1,7 +1,8 @@
 const dynamicStrings = {
     GLOBAL_STATE: "globalState",
     CUSTOM: "custom",
-    ROUTER_LINK: "routerLink:"
+    ROUTER_LINK: "routerLink:",
+    TEXT_LINK: "textLink:"
   };
   
   export { dynamicStrings };

src/helpers/cms-content-helper.js

@@ -181,10 +181,14 @@ function mapStringToState(str) {
     return stringBuilder.trimStart();
   }
 
-  export function doesCopyContainRouterLink(copy) {
+export function doesCopyContainRouterLink(copy) {
     return copy.includes(this.dynamicStrings.ROUTER_LINK);
 }
 
+export function doesCopyContainTextLink(copy) {
+  return copy.includes(this.dynamicStrings.TEXT_LINK);
+}
+
 export function splitCopyOnCMSPlaceHolder(copy) {
     // splits copy on { ... } such as {routerlink: ...}
     return copy.split(/{(.*?)}/g);

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

@@ -23,11 +23,24 @@
             cmsWidgetName="whatHappensNextCopy"
             class="mt-4 mb-2 fw-bold"
         />
-        <textBlock
-            cmsWidgetName="UnverifiedADASNextStepsWidget"
-            typeStyle="body"
-            v-if="unverifiedADASNextSteps"
-        />
+        <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>
         <textBlock
             cmsWidgetName="UnverifiedNonADASNextStepsWidget"
             typeStyle="body"
@@ -38,8 +51,6 @@
             typeStyle="body"
             v-if="unverifiedNonADASRepair"
         />
-        <a href="#!" data-bs-toggle="modal" data-bs-target="#RecalModal" aria-label="Modal window">Recalibration</a>
-        <modal cmsWidgetName="RecalModal" />
         <siteFooter
           cmsWidgetName="SiteFooterWidget"
           :isForwardActionDisabled="!meta.valid"
@@ -49,6 +60,7 @@
         />
       </div>
     </div>
+    </div>
   </Form>
 </template>
 <script>
@@ -62,11 +74,19 @@ import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue'
 import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 import textBlock from "@/digital-components/text-block/text-block";
 import modal from "@/digital-components/modal/modal";
+import textLink from '@/ux-components/text-link/text-link.vue';
 
 // Import Supporting Files
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import { 
+  fetchCmsContentForPage,
+  doesCopyContainTextLink,
+  splitCopyOnCMSPlaceHolder,
+  getRouterLinkDisplayTextFromCopy,
+  getRouterLinkRouteFromCopy
+} from '@/helpers/cms-content-helper';
 import { settleAllPromises } from '@/helpers/layout-helper';
-import { useMainStore } from "@/store"
+import { useMainStore } from "@/store";
+import { regex } from "@/helpers/validation-rules";
 
 export default {
   name: 'coverage-statement',
@@ -79,6 +99,7 @@ export default {
     vehicleBanner,
     textBlock,
     modal,
+    textLink,
   },
   data() {
     return {
@@ -94,12 +115,19 @@ export default {
       this.unverifiedNonADASRepair = true;
     }
     else {
-      this.coverageStatementToDisplay();
+      this.displayReplaceCoverageStatement();
     }
   },
   computed: {
     continueWithSchedulingBodyText() {
       return this.getCmsContent('continueWithSchedulingCopy', 'BodyText');
+    },
+    unverifiedADASNextStepsBodyText() {
+      return this.getCmsContent('UnverifiedADASNextStepsWidget', 'Text');
+    },
+    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);
     }
   },
   async beforeRouteEnter(to, from, next) {
@@ -121,6 +149,10 @@ export default {
     });
   },
   methods: {
+    doesCopyContainTextLink,
+    splitCopyOnCMSPlaceHolder,
+    getRouterLinkDisplayTextFromCopy,
+    getRouterLinkRouteFromCopy,
     arePagePrerequisiteValid() {
       return true;
     },
@@ -130,7 +162,7 @@ export default {
        */
       this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
     },
-    coverageStatementToDisplay() {
+    displayReplaceCoverageStatement() {
       // get array of parts for vehicle
       let parts = useMainStore().order.lineItems.glassParts;
   
@@ -145,7 +177,7 @@ export default {
           this.unverifiedNonADASNextSteps = true
         }
       }
-    }
+    },
   },
     async forwardButtonAction() {},
     resetDependentState() {},