Add text link rendering to alert + hook into opening modal.

src/layouts/service-location/service-location.vue

@@ -30,6 +30,7 @@
                 class="my-4"
                 cmsWidgetName="AlertRecalNoMobileWidget"
                 v-if="displayRecalibrationWarning"
+                @text-link-clicked="openModalAction"
                 alertClass="alert-warning" />
             <alert
                 ref="alertInshopOnly"
@@ -233,7 +234,7 @@ export default {
         },
         displayRecalibrationWarning() {
             //TODO: Check lineItems for static or dual recalibration.
-            return false;
+            return true;
         },
         displayServiceableInshopOnly() {
             return (
@@ -311,6 +312,9 @@ export default {
         forwardButtonAction() {
             navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
         },
+        openModalAction(modalName) {
+            this.$refs[modalName].openModal();
+        },
     },
     components: {
         alert,

src/ux-components/alert/alert.vue

@@ -11,12 +11,11 @@
         <template v-for="paragraph in splitAlertCopyForParagraphTag" :key="paragraph">
             <p
                 class="m-0 text-body small"
-                v-if="!doesCopyContainRouterLink(paragraph)"
+                v-if="!doesCopyContainRouterLink(paragraph) && !doesCopyContainTextLink(paragraph)"
                 v-html="paragraph"></p>
             <p class="m-0 text-body small" v-else>
                 <template v-for="copy in splitCopyOnCMSPlaceHolder(paragraph)" :key="copy">
-                    <span v-if="!doesCopyContainRouterLink(copy)" v-html="copy"></span>
+                    <span v-if="doesCopyContainRouterLink(copy)">
-                    <span v-else>
                         <router-link
                             :to="{
                                 query: { [pageQueryString]: `${getRouterLinkRouteFromCopy(copy)}` },
@@ -25,6 +24,18 @@
                             >{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link
                         >
                     </span>
+                    <span v-else-if="doesCopyContainTextLink(copy)">
+                        <textLink
+                            linkType="text"
+                            :text="getRouterLinkDisplayTextFromCopy(copy)"
+                            href="#!"
+                            @click-event="
+                                $emit('textLinkClicked', getRouterLinkRouteFromCopy(copy))
+                            "
+                            :data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)"
+                            aria-label="Modal window" />
+                    </span>
+                    <span v-else v-html="copy"></span>
                 </template>
             </p>
         </template>
@@ -40,11 +51,13 @@
 <script>
 import {
     doesCopyContainRouterLink,
+    doesCopyContainTextLink,
     splitCopyOnCMSPlaceHolder,
     getRouterLinkRouteFromCopy,
     getRouterLinkDisplayTextFromCopy,
     splitCMSCopyOnParagraphTag,
 } from "@/helpers/cms-content-helper";
+import textLink from "@/ux-components/text-link/text-link";
 import { applicationConfig } from "@/constants/application-config";
 
 export default {
@@ -96,6 +109,7 @@ export default {
     methods: {
         doesCopyContainRouterLink,
         splitCopyOnCMSPlaceHolder,
+        doesCopyContainTextLink,
         getRouterLinkRouteFromCopy,
         getRouterLinkDisplayTextFromCopy,
         ensureAlertIsInViewPort() {
@@ -120,6 +134,9 @@ export default {
     mounted() {
         this.ensureAlertIsInViewPort();
     },
+    components: {
+        textLink,
+    },
 };
 </script>