start of linking to recal modal

This commit is contained in:
Kroell 2023-02-27 15:40:40 -05:00
parent 1898949565
commit d720533b84
3 changed files with 51 additions and 14 deletions

View file

@ -1,7 +1,8 @@
const dynamicStrings = { const dynamicStrings = {
GLOBAL_STATE: "globalState", GLOBAL_STATE: "globalState",
CUSTOM: "custom", CUSTOM: "custom",
ROUTER_LINK: "routerLink:" ROUTER_LINK: "routerLink:",
TEXT_LINK: "textLink:"
}; };
export { dynamicStrings }; export { dynamicStrings };

View file

@ -181,10 +181,14 @@ function mapStringToState(str) {
return stringBuilder.trimStart(); return stringBuilder.trimStart();
} }
export function doesCopyContainRouterLink(copy) { export function doesCopyContainRouterLink(copy) {
return copy.includes(this.dynamicStrings.ROUTER_LINK); return copy.includes(this.dynamicStrings.ROUTER_LINK);
} }
export function doesCopyContainTextLink(copy) {
return copy.includes(this.dynamicStrings.TEXT_LINK);
}
export function splitCopyOnCMSPlaceHolder(copy) { export function splitCopyOnCMSPlaceHolder(copy) {
// splits copy on { ... } such as {routerlink: ...} // splits copy on { ... } such as {routerlink: ...}
return copy.split(/{(.*?)}/g); return copy.split(/{(.*?)}/g);

View file

@ -23,11 +23,24 @@
cmsWidgetName="whatHappensNextCopy" cmsWidgetName="whatHappensNextCopy"
class="mt-4 mb-2 fw-bold" class="mt-4 mb-2 fw-bold"
/> />
<textBlock <div v-if="unverifiedADASNextSteps">
cmsWidgetName="UnverifiedADASNextStepsWidget" <div v-for="copy in splitADASCoverageStatementCopy" :key="copy">
typeStyle="body" <span
v-if="unverifiedADASNextSteps" v-if="!doesCopyContainTextLink(copy)"
/> v-html="copy">
</span>
<span v-else>
<text-link
linkType="text"
:text="getRouterLinkDisplayTextFromCopy(copy)"
href="#!"
data-bs-toggle="modal"
data-bs-target="#RecalModal"
aria-label="Modal window"
/>
</span>
/>
</div>
<textBlock <textBlock
cmsWidgetName="UnverifiedNonADASNextStepsWidget" cmsWidgetName="UnverifiedNonADASNextStepsWidget"
typeStyle="body" typeStyle="body"
@ -38,8 +51,6 @@
typeStyle="body" typeStyle="body"
v-if="unverifiedNonADASRepair" v-if="unverifiedNonADASRepair"
/> />
<a href="#!" data-bs-toggle="modal" data-bs-target="#RecalModal" aria-label="Modal window">Recalibration</a>
<modal cmsWidgetName="RecalModal" />
<siteFooter <siteFooter
cmsWidgetName="SiteFooterWidget" cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid" :isForwardActionDisabled="!meta.valid"
@ -49,6 +60,7 @@
/> />
</div> </div>
</div> </div>
</div>
</Form> </Form>
</template> </template>
<script> <script>
@ -62,11 +74,19 @@ import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue'
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue'; import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import textBlock from "@/digital-components/text-block/text-block"; import textBlock from "@/digital-components/text-block/text-block";
import modal from "@/digital-components/modal/modal"; import modal from "@/digital-components/modal/modal";
import textLink from '@/ux-components/text-link/text-link.vue';
// Import Supporting Files // Import Supporting Files
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper'; import {
fetchCmsContentForPage,
doesCopyContainTextLink,
splitCopyOnCMSPlaceHolder,
getRouterLinkDisplayTextFromCopy,
getRouterLinkRouteFromCopy
} from '@/helpers/cms-content-helper';
import { settleAllPromises } from '@/helpers/layout-helper'; import { settleAllPromises } from '@/helpers/layout-helper';
import { useMainStore } from "@/store" import { useMainStore } from "@/store";
import { regex } from "@/helpers/validation-rules";
export default { export default {
name: 'coverage-statement', name: 'coverage-statement',
@ -79,6 +99,7 @@ export default {
vehicleBanner, vehicleBanner,
textBlock, textBlock,
modal, modal,
textLink,
}, },
data() { data() {
return { return {
@ -94,12 +115,19 @@ export default {
this.unverifiedNonADASRepair = true; this.unverifiedNonADASRepair = true;
} }
else { else {
this.coverageStatementToDisplay(); this.displayReplaceCoverageStatement();
} }
}, },
computed: { computed: {
continueWithSchedulingBodyText() { continueWithSchedulingBodyText() {
return this.getCmsContent('continueWithSchedulingCopy', 'BodyText'); return this.getCmsContent('continueWithSchedulingCopy', 'BodyText');
},
unverifiedADASNextStepsBodyText() {
return this.getCmsContent('UnverifiedADASNextStepsWidget', 'Text');
},
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);
} }
}, },
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -121,6 +149,10 @@ export default {
}); });
}, },
methods: { methods: {
doesCopyContainTextLink,
splitCopyOnCMSPlaceHolder,
getRouterLinkDisplayTextFromCopy,
getRouterLinkRouteFromCopy,
arePagePrerequisiteValid() { arePagePrerequisiteValid() {
return true; return true;
}, },
@ -130,7 +162,7 @@ export default {
*/ */
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
}, },
coverageStatementToDisplay() { displayReplaceCoverageStatement() {
// get array of parts for vehicle // get array of parts for vehicle
let parts = useMainStore().order.lineItems.glassParts; let parts = useMainStore().order.lineItems.glassParts;
@ -145,7 +177,7 @@ export default {
this.unverifiedNonADASNextSteps = true this.unverifiedNonADASNextSteps = true
} }
} }
} },
}, },
async forwardButtonAction() {}, async forwardButtonAction() {},
resetDependentState() {}, resetDependentState() {},