Merge branch 'develop' into feature/CSR-1144

src/digital-components/text-block/text-block.spec.js

@@ -1,7 +1,7 @@
 import { shallowMount } from "@vue/test-utils";
 import TextBlock from "./text-block";
 
-describe("modal.vue", () => {
+describe("text-block.vue", () => {
     it("Should display 'Text' when 'Text' is defined in the CMS", async () => {
         // Act
         const wrapper = shallowMount(TextBlock, {

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

@@ -1,11 +1,43 @@
 <template>
-    <div
+    <div class="text-block w-100" :class="[justifyText, typeStyle, fontWeight, marginTopClass]">
-        class="text-block w-100 mt-2"
+        <span v-for="copy in splitCopyOnCMSPlaceHolder(this.textBlockCopy)" :key="copy">
-        :class="[justifyText, typeStyle, fontWeight]"
+            <span v-if="doesCopyContainRouterLink(copy)">
-        v-html="this.TextBlockCopy"></div>
+                <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/helpers/cms-content-helper.js

@@ -1,6 +1,6 @@
 import { storeActions } from "@/constants/store-actions.js";
 import store from "@/store";
-import { dynamicStrings } from "../constants/dynamic-strings";
+import { dynamicStrings } from "@/constants/dynamic-strings";
 
 export function fetchCmsContentForPage(fmgPage) {
     return store.dispatch(storeActions.GET_PAGE_DATA, { pageName: fmgPage }).then((response) => {
@@ -284,7 +284,7 @@ function getIfStatementRegexExpression() {
 //////////////////////////////////////////
 
 export function doesCopyContainRouterLink(copy) {
-    return copy.includes(this.dynamicStrings.ROUTER_LINK);
+    return copy.includes(dynamicStrings.ROUTER_LINK);
 }
 
 export function doesCopyContainTextLink(copy) {

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">
+            <div class="alert-provide-vin" v-if="splitAlertProvideVinBodyForLink.length">
-                <span v-for="copy in splitAlertProvideVinBodyForLink" :key="copy">
+                <textBlock
-                    <span v-if="doesCopyContainRouterLink(copy)" class="text-body">
+                    :customText="AlertProvideVinBody"
-                        <router-link
+                    justifyText="left"
-                            :to="{
+                    class="mb-3"
-                                query: { fmgPage: `${getRouterLinkRouteFromCopy(copy)}` },
+                    marginTopSizeOverride="3" />
-                                name: 'root',
-                            }"
-                            >{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link
-                        >
-                    </span>
-                    <span v-else class="m-0 text-body" v-html="copy"></span>
-                </span>
             </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">
+            <template v-if="ChangeShopLink.length">
-                <span v-for="copy in ChangeShopLink" :key="copy">
+                <textBlock
-                    <span v-if="doesCopyContainRouterLink(copy)" class="text-body">
+                    cmsWidgetName="ChangeShopLink"
-                        <router-link
+                    justifyText="center"
-                            :to="{
+                    class="mb-3"
-                                query: { fmgPage: `${getRouterLinkRouteFromCopy(copy)}` },
+                    marginTopSizeOverride="1" />
-                                name: 'root',
+            </template>
-                            }"
-                            >{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link
-                        >
-                    </span>
-                    <span v-else class="m-0 text-body" v-html="copy"></span>
-                </span>
-            </div>
             <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";
@@ -416,6 +410,7 @@ export default {
         datePicker,
         locationAlerts,
         timeSlotModalQuestion,
+        textBlock,
     },
 };
 </script>

src/ux-components/alert/alert.spec.js

@@ -15,7 +15,6 @@ describe("alert.vue", () => {
                 },
             })
         );
-
         const wrapperDiv = wrapper.find("div");
 
         // Assert
@@ -49,7 +48,7 @@ describe("alert.vue", () => {
         expect(wrapper.vm.alertCopy).toBe("testCopy");
     });
 
-    it("Should container a <router-link> tag if the manualCopy contains a {routerLink: testName, testLink} placeholder", () => {
+    it("Should container a <textBlock> tag if the manualCopy contains a {routerLink: testName, testLink} placeholder", () => {
         // Arrange & Act
         const wrapper = shallowMount(
             alert,
@@ -58,11 +57,12 @@ describe("alert.vue", () => {
                     manualHeadline: "testHeader",
                     manualCopy: "testCopy with a {routerLink: testName, testLink} inside of it",
                 },
-                stubs: ["router-link"],
+                stubs: ["textBlock"],
             })
         );
+
         // Assert
-        expect(wrapper.find("router-link").exists()).toBe(true);
+        expect(wrapper.html()).toEqual(expect.stringContaining("text-block-stub"));
     });
 
     it("Should contain 'n+1' <p> tags if the body copy has 'n' <p> tags", () => {

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">
+                <template v-if="doesCopyContainRouterLink(paragraph)">
-                    <span v-if="doesCopyContainRouterLink(copy)">
+                    <textBlock :customText="paragraph" class="mb-1" marginTopSizeOverride="0" />
-                        <router-link
+                </template>
-                            :to="{
+                <template v-else v-for="copy in splitCopyOnCMSPlaceHolder(paragraph)" :key="copy">
-                                query: { [pageQueryString]: `${getRouterLinkRouteFromCopy(copy)}` },
+                    <span v-if="doesCopyContainTextLink(copy)">
-                                name: 'root',
-                            }"
-                            >{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link
-                        >
-                    </span>
-                    <span v-else-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>