86 lines
2.3 KiB
Vue
86 lines
2.3 KiB
Vue
<template>
|
|
<div>
|
|
<div>
|
|
<strong>
|
|
{{ headerText }}
|
|
</strong>
|
|
</div>
|
|
<div>
|
|
<ol>
|
|
<li v-for="block in instructionBlocks" :key="block">
|
|
<span v-for="token in block" :key="token">
|
|
<span v-if="doesCopyContainTextLink(token)" class="link">
|
|
<textLink
|
|
linkType="text"
|
|
:text="getRouterLinkDisplayTextFromCopy(token)"
|
|
href="#!"
|
|
@click-event="
|
|
$emit('textLinkClicked', getRouterLinkRouteFromCopy(token))
|
|
"
|
|
:data-bs-target="'#' + getRouterLinkRouteFromCopy(token)" />
|
|
</span>
|
|
<span v-else v-html="token" class="copy"></span>
|
|
</span>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import textLink from "@/ux-components/text-link/text-link";
|
|
|
|
import {
|
|
doesCopyContainTextLink,
|
|
splitCopyOnCMSPlaceHolder,
|
|
getRouterLinkRouteFromCopy,
|
|
getRouterLinkDisplayTextFromCopy,
|
|
getExternalLink,
|
|
} from "@/helpers/cms-content-helper";
|
|
|
|
export default {
|
|
name: "customer-instructions",
|
|
data() {
|
|
return {};
|
|
},
|
|
props: {
|
|
cmsWidgetName: String,
|
|
},
|
|
methods: {
|
|
doesCopyContainTextLink,
|
|
splitCopyOnCMSPlaceHolder,
|
|
getRouterLinkRouteFromCopy,
|
|
getRouterLinkDisplayTextFromCopy,
|
|
getExternalLink,
|
|
},
|
|
computed: {
|
|
headerText() {
|
|
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
|
|
},
|
|
instructionBlocks() {
|
|
const answers = this.getCmsContent(this.cmsWidgetName, "Answers");
|
|
|
|
if (!answers) {
|
|
return [];
|
|
}
|
|
|
|
const instructionBlocksRaw = answers.map((ans) => ans.Text);
|
|
|
|
const instructionBlocksAsTokens = instructionBlocksRaw.map((raw) =>
|
|
splitCopyOnCMSPlaceHolder(raw)
|
|
);
|
|
|
|
return instructionBlocksAsTokens;
|
|
},
|
|
},
|
|
components: {
|
|
textLink,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(li) {
|
|
margin-top: 0.5em;
|
|
}
|
|
</style>
|