126 lines
4.2 KiB
Vue
126 lines
4.2 KiB
Vue
<template>
|
|
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
|
|
<div class="return-user small-question-text">
|
|
<loadingModal ref="loadingModal" />
|
|
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
|
<div class="container page-container-grouped-styles">
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 col-md-10 col-lg-8 col-xl-7 return-user-spacing">
|
|
<funnelSubHeader
|
|
class="justify-content-center d-flex"
|
|
ref="funnelSubHeader"
|
|
cmsWidgetName="FunnelSubHeaderWidget" />
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6 col-xl-4">
|
|
<navbar
|
|
cmsWidgetName="FunnelFooterWidget"
|
|
ref="navbar"
|
|
buttonSize
|
|
:isBackButtonHidden="true"
|
|
@ForwardClicked="forwardButtonAction" />
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6 col-xl-4 start-over">
|
|
<a @click="startOver" alt="Start Over Button">
|
|
<img v-bind:src="startOverImage" />
|
|
{{ startOverText }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Form>
|
|
</template>
|
|
|
|
<script>
|
|
// Components
|
|
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
|
|
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
|
|
import navbar from "@/fmg-components/nav-bar/nav-bar";
|
|
// Supporting Files
|
|
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
|
import { settleAllPromises } from "@/helpers/layout-helper";
|
|
import { Form } from "vee-validate";
|
|
import { getFunnelCookie } from "@/helpers/heritage-integration/cookie-helper";
|
|
import { deleteFunnelCookie } from "@/helpers/heritage-integration/cookie-helper";
|
|
import { storeActions } from "@/constants/store-actions";
|
|
|
|
export default {
|
|
name: "return-user",
|
|
async beforeRouteEnter(to, from, next) {
|
|
// Call APIs
|
|
const cmsContentPromise = fetchCmsContentForPage(to.name);
|
|
// Settle promises and get results
|
|
const promiseResultMap = [
|
|
{
|
|
resultKey: "cmsContent",
|
|
promise: cmsContentPromise,
|
|
},
|
|
];
|
|
const resultMap = await settleAllPromises(promiseResultMap);
|
|
// Call the "next" function to complete the transition to this page.
|
|
next((vm) => {
|
|
vm.setCmsContent(resultMap.cmsContent);
|
|
vm.startOverText = resultMap.cmsContent.StartOverWidget.HeaderText;
|
|
vm.startOverImage = resultMap.cmsContent.StartOverWidget.Image;
|
|
});
|
|
},
|
|
data() {
|
|
return {
|
|
startOverText: "",
|
|
startOverImage: null,
|
|
};
|
|
},
|
|
methods: {
|
|
arePagePrerequisitesValid() {
|
|
return getFunnelCookie() !== null;
|
|
},
|
|
|
|
async forwardButtonAction() {
|
|
this.$router.navigateWithoutSaving(
|
|
this.navigationScenarios.CLICKED_FORWARD,
|
|
this.pageName
|
|
);
|
|
},
|
|
|
|
async startOver() {
|
|
this.pushEventToGA(this.pageName, this.GaActions.CLICKED, "Start over", true);
|
|
this.$router.navigateWithoutSaving(
|
|
this.navigationScenarios.CLICKED_RESTART,
|
|
this.pageName
|
|
);
|
|
},
|
|
},
|
|
components: {
|
|
Form,
|
|
funnelHeader,
|
|
funnelSubHeader,
|
|
navbar,
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.start-over {
|
|
text-align: center;
|
|
a {
|
|
font-weight: 600;
|
|
color: $black;
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
.return-user {
|
|
.return-user-spacing {
|
|
margin-top: 14rem;
|
|
}
|
|
}
|
|
:deep(.menu-modal-container) {
|
|
display: none;
|
|
}
|
|
:deep(.progress-bar-outer) {
|
|
opacity: 0;
|
|
}
|
|
</style>
|