123 lines
3.9 KiB
Vue
123 lines
3.9 KiB
Vue
<template>
|
|
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
|
|
<funnelHeader
|
|
cmsWidgetName="FunnelHeaderWidget"
|
|
ref="funnelHeader"
|
|
:overrideImageSrc="clientLogoImageSrc" />
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
|
|
<funnelSubHeader
|
|
cmsWidgetName="FunnelSubHeaderWidget"
|
|
class="siteSubHeader pb-4"
|
|
:alignLeft="true" />
|
|
|
|
<buttonMain
|
|
ref="buttonMain"
|
|
class="mb-3"
|
|
isPrimary
|
|
:buttonText="ContinueButtonCopy"
|
|
loaderColor="white"
|
|
:aria-disabled="false"
|
|
:isDisabled="false"
|
|
@click-event="forwardButtonAction" />
|
|
|
|
<span
|
|
v-if="displayDisclaimerText"
|
|
class="d-block mb-5 disclaimer-text"
|
|
v-html="disclaimerText"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Form>
|
|
</template>
|
|
|
|
<script>
|
|
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
|
|
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
|
|
import buttonMain from "@/ux-components/button-main/button-main";
|
|
import { Form } from "vee-validate";
|
|
|
|
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
|
import { settleAllPromises } from "@/helpers/layout-helper";
|
|
import store from "@/store";
|
|
import { debugLog } from "@/helpers/debug-log-helper";
|
|
|
|
export default {
|
|
name: "policy-info-submitted",
|
|
mixins: [],
|
|
data() {
|
|
return {
|
|
clientConfig: {},
|
|
};
|
|
},
|
|
components: {
|
|
Form,
|
|
buttonMain,
|
|
funnelHeader,
|
|
funnelSubHeader,
|
|
},
|
|
// Ensure CMS content is fetched during route navigation without depending on `to`/`from`
|
|
async beforeRouteEnter(to, from, next) {
|
|
const pageName = to.name;
|
|
const cmsContentPromise = fetchCmsContentForPage(pageName);
|
|
const clientConfigPageName = `client_${store.getters.order.payment.parentAccountNumber}`;
|
|
const clientConfigPromise = fetchCmsContentForPage(clientConfigPageName);
|
|
const promiseResultMap = [
|
|
{
|
|
resultKey: "cmsContent",
|
|
promise: cmsContentPromise,
|
|
},
|
|
{
|
|
resultKey: "clientConfig",
|
|
promise: clientConfigPromise,
|
|
},
|
|
];
|
|
const resultMap = await settleAllPromises(promiseResultMap);
|
|
next((vm) => {
|
|
vm.setCmsContent(resultMap.cmsContent);
|
|
vm.clientConfig = resultMap.clientConfig ?? {};
|
|
debugLog(
|
|
`policy-info-submitted clientConfig::${clientConfigPageName}`,
|
|
JSON.stringify(vm.clientConfig)
|
|
);
|
|
});
|
|
},
|
|
|
|
computed: {
|
|
clientLogoImageSrc() {
|
|
return this.clientConfig?.ClientLogoWidget?.Image || "";
|
|
},
|
|
ContinueButtonCopy() {
|
|
return this.getCmsContent("ContinueButtonWidget", "QuestionText");
|
|
},
|
|
disclaimerText() {
|
|
return this.clientConfig?.DisclaimerWidget?.Text;
|
|
},
|
|
displayDisclaimerText() {
|
|
return this.disclaimerText !== null && this.disclaimerText !== "";
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
forwardButtonAction() {
|
|
this.$router.navigateWithoutSaving(
|
|
this.navigationScenarios.CLICKED_FORWARD,
|
|
this.pageName
|
|
);
|
|
},
|
|
arePagePrerequisitesValid() {
|
|
return true;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.disclaimer-text {
|
|
font-size: 12px !important;
|
|
font-weight: 400;
|
|
color: $gray-600;
|
|
line-height: 1.625;
|
|
}
|
|
</style>
|