update coverage-statement page to use modalLink
This commit is contained in:
parent
8b19f3045b
commit
aa48a73e2b
2 changed files with 23 additions and 85 deletions
|
|
@ -151,11 +151,11 @@ function mapStringToModal(str) {
|
|||
let linkToReplace = str.substring(startIndex, str.length);
|
||||
linkToReplace = linkToReplace.substring(0, linkToReplace.indexOf("}") + 1);
|
||||
|
||||
let params = linkToReplace.substring((dynamicStrings.MODAL_LINK).length + 1, linkToReplace.length -1)
|
||||
let params = linkToReplace.substring((dynamicStrings.MODAL_LINK).length + 2, linkToReplace.length -1)
|
||||
let splitParams = params.split(",");
|
||||
let BodyText = '<a href="#!" data-bs-toggle="modal" data-bs-target="#' + splitParams[0] + '" aria-label="Modal window">' + splitParams[1] +'</a>'
|
||||
let bodyText = '<a href="#!" data-bs-toggle="modal" data-bs-target="#' + splitParams[0] + '" aria-label="Modal window">' + splitParams[1] +'</a>'
|
||||
|
||||
return str.replace(linkToReplace, BodyText);
|
||||
return str.replace(linkToReplace, bodyText);
|
||||
}
|
||||
|
||||
// Function to convert a string, into a matching global state item.
|
||||
|
|
|
|||
|
|
@ -18,45 +18,12 @@
|
|||
<div
|
||||
v-html="continueWithSchedulingBodyText"
|
||||
class="mt-0"
|
||||
/>
|
||||
></div>
|
||||
<textBlock
|
||||
cmsWidgetName="whatHappensNextCopy"
|
||||
class="mt-4 mb-2 fw-bold"
|
||||
/>
|
||||
<div v-if="unverifiedADASNextSteps">
|
||||
<ol>
|
||||
<li v-for="listItem in this.arrayOfListItemsFromBodyText" :key="listItem">
|
||||
<!-- no textLink -->
|
||||
<span
|
||||
v-if="!doesCopyContainTextLink(listItem)"
|
||||
v-html="listItem"></span>
|
||||
<!-- with textLink-->
|
||||
<template
|
||||
v-else
|
||||
v-for="copy in splitCopyOnCMSPlaceHolder(listItem)"
|
||||
:key="copy">
|
||||
<span v-if="!doesCopyContainTextLink(copy)" v-html="copy"></span>
|
||||
<span v-else>
|
||||
<textLink
|
||||
linkType="text"
|
||||
:text="getRouterLinkDisplayTextFromCopy(copy)"
|
||||
href="#!"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#RecalModal"
|
||||
aria-label="Modal window" />
|
||||
</span>
|
||||
</template>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div
|
||||
v-if="unverifiedNonADASNextSteps"
|
||||
v-html="unverifiedNonADASNextStepsBodyText" >
|
||||
</div>
|
||||
<div
|
||||
v-if="unverifiedNonADASRepair"
|
||||
v-html="unverifiedNonADASRepairBodyText" >
|
||||
</div>
|
||||
<div v-html="bodyText"></div>
|
||||
<recalModal cmsWidgetName="RecalModal" />
|
||||
<siteFooter
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
|
|
@ -94,6 +61,7 @@ import {
|
|||
import { settleAllPromises } from '@/helpers/layout-helper';
|
||||
import { getDamageString } from '@/helpers/damage-helper.js';
|
||||
import { useMainStore } from "@/store";
|
||||
import { throwStatement, tSMethodSignature } from '@babel/types';
|
||||
|
||||
export default {
|
||||
name: 'coverage-statement',
|
||||
|
|
@ -109,24 +77,24 @@ export default {
|
|||
textLink,
|
||||
recalModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isRepair: useMainStore().order.damage.isRepair,
|
||||
unverifiedADASNextSteps: false,
|
||||
unverifiedNonADASNextSteps: false,
|
||||
unverifiedNonADASRepair: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// check if repair or replace, if repair, display NonADASRepair
|
||||
if (this.isRepair) {
|
||||
this.unverifiedNonADASRepair = true;
|
||||
}
|
||||
else {
|
||||
this.displayReplaceCoverageStatement();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
bodyText() {
|
||||
if (useMainStore().order.damage.isRepair) {
|
||||
return this.unverifiedNonADASRepairBodyText;
|
||||
}
|
||||
else {
|
||||
let parts = useMainStore().order.lineItems.glassParts;
|
||||
|
||||
// if ADAS, display ADASNextSteps
|
||||
if (parts.filter(part => part.requiresRecalibration).length > 0) {
|
||||
return this.unverifiedADASNextStepsBodyText;
|
||||
}
|
||||
// if non-ADAS, display NonADASNextSteps
|
||||
else {
|
||||
return this.unverifiedNonADASNextStepsBodyText;
|
||||
}
|
||||
}
|
||||
},
|
||||
continueWithSchedulingBodyText() {
|
||||
return this.getCmsContent('continueWithSchedulingCopy', 'BodyText');
|
||||
},
|
||||
|
|
@ -139,13 +107,6 @@ export default {
|
|||
unverifiedNonADASRepairBodyText() {
|
||||
return this.getCmsContent('UnverifiedNonADASRepairWidget', 'BodyText');
|
||||
},
|
||||
splitADASCoverageStatementCopy() {
|
||||
// Splits content when brackets are found in text so that text can be looped through and text-link can be injected when needed
|
||||
return this.splitCopyOnCMSPlaceHolder(this.unverifiedADASNextStepsBodyText);
|
||||
},
|
||||
arrayOfListItemsFromBodyText() {
|
||||
return this.getArrayOfListItemsFromRawCmsCopy(this.unverifiedADASNextStepsBodyText);
|
||||
},
|
||||
damageText() {
|
||||
var damageString = getDamageString();
|
||||
return damageString == "match" ? "" : damageString;
|
||||
|
|
@ -183,29 +144,6 @@ export default {
|
|||
*/
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
},
|
||||
displayReplaceCoverageStatement() {
|
||||
// get array of parts for vehicle
|
||||
let parts = useMainStore().order.lineItems.glassParts;
|
||||
|
||||
// if ADAS, display ADASNextSteps
|
||||
if (parts.filter(part => part.requiresRecalibration).length > 0) {
|
||||
this.unverifiedADASNextSteps = true;
|
||||
}
|
||||
// if non-ADAS, display NonADASNextSteps
|
||||
else {
|
||||
this.unverifiedNonADASNextSteps = true;
|
||||
}
|
||||
},
|
||||
stripOlTagFromCopy(copy) {
|
||||
const regex = /(?:<ol(?:.*?)>)|(?:<\/ol>)/g;
|
||||
return copy.replace(regex, "");
|
||||
},
|
||||
getArrayOfListItemsFromRawCmsCopy(copy) {
|
||||
const withoutOlTags = this.stripOlTagFromCopy(copy);
|
||||
return withoutOlTags
|
||||
.split(/(?:<li(?:.*?)>)|(?:<\/li>)/g)
|
||||
.filter((lineItem) => lineItem);
|
||||
},
|
||||
},
|
||||
async forwardButtonAction() {},
|
||||
resetDependentState() {},
|
||||
|
|
|
|||
Loading…
Reference in a new issue