CSR-1421: refactor work to move router-link into textBlock instead of using it directly on page

src/digital-components/text-block/text-block.vue

@@ -1,11 +1,43 @@
 <template>
-    <div
-        class="text-block w-100 mt-2"
-        :class="[justifyText, typeStyle, fontWeight]"
-        v-html="this.TextBlockCopy"></div>
+    <div class="text-block w-100" :class="[justifyText, typeStyle, fontWeight, marginTopClass]">
+        <span v-for="copy in splitCopyOnCMSPlaceHolder(this.textBlockCopy)" :key="copy">
+            <span v-if="doesCopyContainRouterLink(copy)">
+                <router-link
+                    :to="{
+                        query: { [pageQueryString]: `${getRouterLinkRouteFromCopy(copy)}` },
+                        name: 'root',
+                    }"
+                    >{{ 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>
+        </span>
+    </div>
 </template>
 
 <script>
+// Components
+import textLink from "@/ux-components/text-link/text-link";
+
+// Supporting files
+import {
+    doesCopyContainRouterLink,
+    doesCopyContainTextLink,
+    splitCopyOnCMSPlaceHolder,
+    getRouterLinkRouteFromCopy,
+    getRouterLinkDisplayTextFromCopy,
+} from "@/helpers/cms-content-helper";
+import { applicationConfig } from "@/constants/application-config";
+
 export default {
     name: "textBlock",
     props: {
@@ -14,14 +46,37 @@ export default {
         typeStyle: String, // h1-h6, body, small, label, caption (see Figma or Confluence documentation)
         fontWeight: String, // bold=500, default is 400
         cmsWidgetName: String,
+        marginTopSizeOverride: Number, // override mt-2 with a bootstrap size from 0-5 or auto
+    },
+    methods: {
+        doesCopyContainRouterLink,
+        doesCopyContainTextLink,
+        splitCopyOnCMSPlaceHolder,
+        getRouterLinkRouteFromCopy,
+        getRouterLinkDisplayTextFromCopy,
     },
     computed: {
-        TextBlockCopy() {
+        pageQueryString() {
+            return applicationConfig.PAGE_QUERYSTRING;
+        },
+        textBlockCopy() {
             if (this.customText) {
                 return this.customText;
             }
             return this.getCmsContent(this.cmsWidgetName, "Text");
         },
+        marginTopClass() {
+            if (this.marginTopSizeOverride === "auto") {
+                return "mt-auto";
+            }
+            if (this.marginTopSizeOverride >= 0 && this.marginTopSizeOverride <= 5) {
+                return "mt-" + this.marginTopSizeOverride;
+            }
+            return "mt-2";
+        },
+    },
+    components: {
+        textLink,
     },
 };
 </script>

src/layouts/address-vehicles/address-vehicles.vue

@@ -20,19 +20,12 @@
                 validationRules="vehicle-required"
                 v-model="selectedVehicleVin"
                 :isCarIdDifferent="isCarIdDifferent" />
-            <div class="alert-provide-vin my-3" v-if="splitAlertProvideVinBodyForLink.length">
-                <span v-for="copy in splitAlertProvideVinBodyForLink" :key="copy">
-                    <span v-if="doesCopyContainRouterLink(copy)" class="text-body">
-                        <router-link
-                            :to="{
-                                query: { fmgPage: `${getRouterLinkRouteFromCopy(copy)}` },
-                                name: 'root',
-                            }"
-                            >{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link
-                        >
-                    </span>
-                    <span v-else class="m-0 text-body" v-html="copy"></span>
-                </span>
+            <div class="alert-provide-vin" v-if="splitAlertProvideVinBodyForLink.length">
+                <textBlock
+                    :customText="AlertProvideVinBody"
+                    justifyText="left"
+                    class="mb-3"
+                    marginTopSizeOverride="3" />
             </div>
             <funnelFooter
                 cmsWidgetName="FunnelFooterWidget"
@@ -52,6 +45,7 @@ import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import alert from "@/ux-components/alert/alert";
 import addressVehiclesQuestion from "@/layouts/address-vehicles/address-vehicles-question/address-vehicles-question";
+import textBlock from "@/digital-components/text-block/text-block";
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -237,6 +231,7 @@ export default {
         alert,
         funnelFooter,
         addressVehiclesQuestion,
+        textBlock,
     },
 };
 </script>

src/layouts/schedule/schedule.vue

@@ -4,20 +4,13 @@
             <loadingModal ref="loadingModal" />
             <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
             <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
-            <div class="text-center mt-1 mb-3" v-if="ChangeShopLink.length">
-                <span v-for="copy in ChangeShopLink" :key="copy">
-                    <span v-if="doesCopyContainRouterLink(copy)" class="text-body">
-                        <router-link
-                            :to="{
-                                query: { fmgPage: `${getRouterLinkRouteFromCopy(copy)}` },
-                                name: 'root',
-                            }"
-                            >{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link
-                        >
-                    </span>
-                    <span v-else class="m-0 text-body" v-html="copy"></span>
-                </span>
-            </div>
+            <template v-if="ChangeShopLink.length">
+                <textBlock
+                    cmsWidgetName="ChangeShopLink"
+                    justifyText="center"
+                    class="mb-3"
+                    marginTopSizeOverride="1" />
+            </template>
             <location-alerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
             <date-picker
                 selectableDatesSetting="custom"
@@ -60,6 +53,7 @@ import { Form, defineRule } from "vee-validate";
 import datePicker from "@/digital-components/date-picker/date-picker";
 import locationAlerts from "@/layouts/schedule/location-alerts/location-alerts";
 import timeSlotModalQuestion from "./time-slot-modal-question/time-slot-modal-question";
+import textBlock from "@/digital-components/text-block/text-block";
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -373,6 +367,7 @@ export default {
         datePicker,
         locationAlerts,
         timeSlotModalQuestion,
+        textBlock,
     },
 };
 </script>

src/ux-components/alert/alert.vue

@@ -14,17 +14,11 @@
                 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)">
-                        <router-link
-                            :to="{
-                                query: { [pageQueryString]: `${getRouterLinkRouteFromCopy(copy)}` },
-                                name: 'root',
-                            }"
-                            >{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link
-                        >
-                    </span>
-                    <span v-else-if="doesCopyContainTextLink(copy)">
+                <template v-if="doesCopyContainRouterLink(paragraph)">
+                    <textBlock :customText="paragraph" class="mb-1" marginTopSizeOverride="0" />
+                </template>
+                <template v-else v-for="copy in splitCopyOnCMSPlaceHolder(paragraph)" :key="copy">
+                    <span v-if="doesCopyContainTextLink(copy)">
                         <textLink
                             linkType="text"
                             :text="getRouterLinkDisplayTextFromCopy(copy)"
@@ -59,6 +53,7 @@ import {
 } from "@/helpers/cms-content-helper";
 import textLink from "@/ux-components/text-link/text-link";
 import { applicationConfig } from "@/constants/application-config";
+import textBlock from "@/digital-components/text-block/text-block";
 
 export default {
     name: "alert",
@@ -136,6 +131,7 @@ export default {
     },
     components: {
         textLink,
+        textBlock,
     },
 };
 </script>