jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' into feature/CSR-1144

Browse source
This commit is contained in:
CarlNation 2023-06-07 13:16:36 -04:00
commit d30a8316b2
7 changed files with 91 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/digital-components/text-block/text-block.spec.js
View file

@ -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, {

65
src/digital-components/text-block/text-block.vue
View file

@ -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>

4
src/helpers/cms-content-helper.js
View file

@ -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) {

21
src/layouts/address-vehicles/address-vehicles.vue
View file

@ -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>

23
src/layouts/schedule/schedule.vue
View file

@ -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";
@ -416,6 +410,7 @@ export default {
datePicker,
locationAlerts,
timeSlotModalQuestion,
textBlock,
},
};
</script>

8
src/ux-components/alert/alert.spec.js
View file

@ -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", () => {

18
src/ux-components/alert/alert.vue
View file

@ -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>