jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CASH-632 added cancel link button for insurance pages

Browse source 
CASH-632 added cancel link button for insurance pages
This commit is contained in:
Carl Nation 2026-06-02 14:26:20 -04:00
parent 81476b5d43
commit 2e41499caf
9 changed files with 249 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

160
src/fmg-components/insurance-nav-bar/insurance-nav-bar.vue Normal file
View file

@ -0,0 +1,160 @@
<template>
<div class="row"></div>
<div class="insurance-nav-bar nav-bar container-fluid g-5 my-5 px-0" id="infoBox">
<div class="row d-flex justify-content-between align-items-center vw-100">
<div v-if="!isCancelButtonHidden" class="col-auto cancel-col py-1 text-break">
<textLink
linkType="navigation"
text="Cancel verification"
useLoadingModal
@click-event="cancelClick"
href="javascript:void(0)"
data-bs-target="#footerModal"
data-bs-dismiss="modal" />
</div>
<div class="col d-flex justify-content-end align-items-center forward-group">
<div v-if="!isBackButtonHidden" class="link-col py-1 text-break">
<textLink
linkType="navigation"
:text="backLink"
useLoadingModal
@click-event="linkClick"
href="javascript:void(0)"
data-bs-target="#footerModal"
data-bs-dismiss="modal" />
</div>
<buttonMain
ref="buttonMain"
isPrimary
:buttonText="overrideButtonText || buttonText"
loaderColor="white"
:class="isForwardActionDisabled && 'form-test-invalid'"
:aria-disabled="isForwardActionDisabled"
:isDisabled="isForwardActionDisabled"
@click-event="buttonClick"
data-bs-target="#footerModal"
data-test-id="insurance-nav-bar-main-button"
data-bs-dismiss="modal"
v-if="!isSubmitHidden" />
</div>
</div>
</div>
</template>
<script>
import textLink from "@/ux-components/text-link/text-link";
import buttonMain from "@/ux-components/button-main/button-main";
import analyticsMixin from "@/mixins/analytics-mixin";
export default {
name: "insurance-nav-bar",
emits: ["CancelClicked", "BackClicked", "ForwardClicked"],
props: {
isForwardActionDisabled: Boolean,
isBackButtonHidden: { type: Boolean, default: false },
isCancelButtonHidden: { type: Boolean, default: false },
cmsWidgetName: String,
buttonSize: { type: Boolean, default: false },
isSubmitHidden: { type: Boolean, default: false },
overrideButtonText: String,
overrideBackButtonText: String,
},
components: {
textLink,
buttonMain,
},
data() {
return {
customButtontext: "",
};
},
unmounted() {
document.onkeydown = null;
},
computed: {
backLink() {
return (
this.overrideBackButtonText ||
this.getCmsContent(this.cmsWidgetName, "BackButtonText")
);
},
buttonText() {
return this.customButtontext
? this.customButtontext
: this.getCmsContent(this.cmsWidgetName, "ForwardButtonText");
},
},
methods: {
updateButtonText(newText) {
this.customButtontext = newText;
},
removeLoader() {
this.$refs.buttonMain.removeLoader();
document.onkeydown = function (e) {
return true;
};
},
buttonClick() {
//prevent keyboard input after button click
document.onkeydown = function (e) {
return false;
};
// check session expired and initSession to recreate cookies
if (analyticsMixin.methods.sessionExpired()) {
this.routeReturnUser();
} else {
this.$emit("ForwardClicked");
}
},
linkClick() {
// check session expired and initSession to recreate cookies
if (analyticsMixin.methods.sessionExpired()) {
this.routeReturnUser();
} else {
this.$emit("BackClicked");
}
},
cancelClick() {
// check session expired and initSession to recreate cookies
if (analyticsMixin.methods.sessionExpired()) {
this.routeReturnUser();
} else {
this.$emit("CancelClicked");
}
},
routeReturnUser() {
this.$router.sendToReturnUser();
},
},
};
</script>
<style lang="scss" scoped>
.nav-bar {
overflow: visible;
display: flex;
padding: 0;
position: relative;
z-index: 2;
a {
display: flex;
justify-content: center;
}
& > .container-fluid {
overflow-x: visible; // needed to fix hidden footer on some iphones
}
.forward-group {
gap: 1.5rem;
}
@media only screen and (min-width: 340px) {
.btn-primary {
width: auto;
}
a {
display: flex;
justify-content: flex-start;
}
}
}
</style>

13
src/layouts/duplicate-check/duplicate-check.vue
View file

@ -43,10 +43,11 @@
isRequired
v-model="startNewClaimSelectedValue" />
<navbar
<insuranceNavBar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
:isForwardActionDisabled="!meta.valid"
@cancel-clicked="cancelButtonAction"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
@ -57,7 +58,7 @@
<script>
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import insuranceNavBar from "@/fmg-components/insurance-nav-bar/insurance-nav-bar";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import textBlock from "@/digital-components/text-block/text-block";
import buttonQuestion from "@/digital-components/button-question/button-question";
@ -79,7 +80,7 @@ export default {
components: {
Form,
funnelHeader,
navbar,
insuranceNavBar,
funnelSubHeader,
textBlock,
buttonQuestion,
@ -141,6 +142,12 @@ export default {
},
methods: {
cancelButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_CANCEL_VERIFICATION,
this.pageName
);
},
backButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK,

13
src/layouts/endorsements/endorsements.vue
View file

@ -40,10 +40,11 @@
isRequired
v-model="parkingLotEndorsementSelectedValue" />
<navbar
<insuranceNavBar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
:isForwardActionDisabled="!meta.valid"
@cancel-clicked="cancelButtonAction"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
@ -54,7 +55,7 @@
<script>
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import insuranceNavBar from "@/fmg-components/insurance-nav-bar/insurance-nav-bar";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import { Form } from "vee-validate";
@ -76,7 +77,7 @@ export default {
components: {
Form,
funnelHeader,
navbar,
insuranceNavBar,
funnelSubHeader,
buttonQuestion,
textBlock,
@ -133,6 +134,12 @@ export default {
},
methods: {
cancelButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_CANCEL_VERIFICATION,
this.pageName
);
},
backButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK,

13
src/layouts/policy-driver/policy-driver.vue
View file

@ -12,10 +12,11 @@
<!--
... Page code goes here.
-->
<navbar
<insuranceNavBar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
:isForwardActionDisabled="!meta.valid"
@cancel-clicked="cancelButtonAction"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
@ -26,7 +27,7 @@
<script>
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import insuranceNavBar from "@/fmg-components/insurance-nav-bar/insurance-nav-bar";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import { Form } from "vee-validate";
@ -46,7 +47,7 @@ export default {
components: {
Form,
funnelHeader,
navbar,
insuranceNavBar,
funnelSubHeader,
},
// Ensure CMS content is fetched during route navigation without depending on `to`/`from`
@ -83,6 +84,12 @@ export default {
},
methods: {
cancelButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_CANCEL_VERIFICATION,
this.pageName
);
},
backButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK,

13
src/layouts/policy-info-submitted/policy-info-submitted.vue
View file

@ -12,10 +12,11 @@
<!--
... Page code goes here.
-->
<navbar
<insuranceNavBar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
:isForwardActionDisabled="!meta.valid"
@cancel-clicked="cancelButtonAction"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
@ -26,7 +27,7 @@
<script>
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import insuranceNavBar from "@/fmg-components/insurance-nav-bar/insurance-nav-bar";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import { Form } from "vee-validate";
@ -46,7 +47,7 @@ export default {
components: {
Form,
funnelHeader,
navbar,
insuranceNavBar,
funnelSubHeader,
},
// Ensure CMS content is fetched during route navigation without depending on `to`/`from`
@ -83,6 +84,12 @@ export default {
},
methods: {
cancelButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_CANCEL_VERIFICATION,
this.pageName
);
},
backButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK,

24
src/layouts/policy-info/policy-info.vue
View file

@ -191,15 +191,13 @@
v-model="morePolicyQuestions"
groupName="MorePolicyQuestionsQuestion" />
<div class="policy-info-navbar">
<navbar
<insuranceNavBar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
:isForwardActionDisabled="!meta.valid"
overrideBackButtonText="Cancel verification"
@back-clicked="backButtonAction"
isBackButtonHidden
@cancel-clicked="cancelButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
<span
v-if="displayDisclaimerText"
@ -213,7 +211,7 @@
<script>
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import insuranceNavBar from "@/fmg-components/insurance-nav-bar/insurance-nav-bar";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import textBlock from "@/digital-components/text-block/text-block";
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
@ -274,7 +272,7 @@ export default {
components: {
Form,
funnelHeader,
navbar,
insuranceNavBar,
funnelSubHeader,
textBlock,
textboxQuestion,
@ -481,9 +479,9 @@ export default {
getLossLocationFromStore() {
return store.getters.order.policy.lossLocation;
},
backButtonAction() {
cancelButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK,
this.navigationScenarios.CLICKED_CANCEL_VERIFICATION,
this.pageName
);
},
@ -530,14 +528,6 @@ export default {
</script>
<style lang="scss">
.policy-info-navbar {
.navigation-link {
font-family: inherit;
font-weight: 600;
text-decoration: none;
}
}
.cc-page-title {
font-size: 20px !important;
line-height: 1.325;

22
src/layouts/policy-vehicle/policy-vehicle.vue
View file

@ -17,18 +17,11 @@
class="mb-3"
@click-event="forwardButtonAction" />
<textLink
class="pt-3"
useLoadingModal
linkType="text"
href="javascript:void(0)"
:text="cancelVerificationCopy"
@click-event="cancelVerificationAction" />
<navbar
<insuranceNavBar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
:isForwardActionDisabled="!meta.valid"
@cancel-clicked="cancelButtonAction"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
@ -41,11 +34,10 @@
<script>
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import insuranceNavBar from "@/fmg-components/insurance-nav-bar/insurance-nav-bar";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import store from "@/store";
import buttonMain from "@/ux-components/button-main/button-main";
import textLink from "@/ux-components/text-link/text-link.vue";
import { parentAccountNumbers } from "@/constants/insurance";
import { debugLog } from "@/helpers/debug-log-helper";
@ -65,9 +57,8 @@ export default {
components: {
Form,
funnelHeader,
navbar,
insuranceNavBar,
funnelSubHeader,
textLink,
buttonMain,
},
// Ensure CMS content is fetched during route navigation without depending on `to`/`from`
@ -104,9 +95,6 @@ export default {
vehicleNotListedQuestionText() {
return this.getCmsContent("VehicleNotListedWidget", "Text");
},
cancelVerificationCopy() {
return this.getCmsContent("CancelVerificationWidget", "Text");
},
amFamDisclaimerWidget() {
return this.getCmsContent("AmFamDisclaimerWidget", "Text");
},
@ -122,7 +110,7 @@ export default {
parentAccountNumberFromStore() {
return store.getters.order?.payment?.parentAccountNumber;
},
cancelVerificationAction() {
cancelButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_CANCEL_VERIFICATION,
this.pageName

13
src/layouts/recalibration-info/recalibration-info.vue
View file

@ -12,10 +12,11 @@
<!--
... Page code goes here.
-->
<navbar
<insuranceNavBar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
:isForwardActionDisabled="!meta.valid"
@cancel-clicked="cancelButtonAction"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
@ -26,7 +27,7 @@
<script>
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import insuranceNavBar from "@/fmg-components/insurance-nav-bar/insurance-nav-bar";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import { Form } from "vee-validate";
@ -45,7 +46,7 @@ export default {
components: {
Form,
funnelHeader,
navbar,
insuranceNavBar,
funnelSubHeader,
},
// Ensure CMS content is fetched during route navigation without depending on `to`/`from`
@ -82,6 +83,12 @@ export default {
},
methods: {
cancelButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_CANCEL_VERIFICATION,
this.pageName
);
},
backButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK,

34
src/router/constants/routing-table.js
View file

@ -446,7 +446,7 @@ const routingTable = function () {
pageName: routeData.POLICY_INFO.name,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
scenario: navigationScenarios.CLICKED_CANCEL_VERIFICATION,
destinationPageData: routeData.INSURANCE_COMPANY,
},
{
@ -471,6 +471,10 @@ const routingTable = function () {
{
pageName: routeData.DUPLICATE_CHECK.name,
maps: [
{
scenario: navigationScenarios.CLICKED_CANCEL_VERIFICATION,
destinationPageData: routeData.INSURANCE_COMPANY,
},
{
scenario: navigationScenarios.CLICKED_BACK,
destinationPageData: routeData.POLICY_INFO,
@ -486,7 +490,7 @@ const routingTable = function () {
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationPageData: routeData.DUPLICATE_CHECK,
destinationPageData: routeData.POLICY_INFO,
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
@ -501,9 +505,13 @@ const routingTable = function () {
{
pageName: routeData.POLICY_DRIVER.name,
maps: [
{
scenario: navigationScenarios.CLICKED_CANCEL_VERIFICATION,
destinationPageData: routeData.POLICY_INFO,
},
{
scenario: navigationScenarios.CLICKED_BACK,
destinationPageData: routeData.POLICY_VEHICLE,
destinationPageData: routeData.POLICY_INFO,
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
@ -514,9 +522,13 @@ const routingTable = function () {
{
pageName: routeData.ENDORSEMENTS.name,
maps: [
{
scenario: navigationScenarios.CLICKED_CANCEL_VERIFICATION,
destinationPageData: routeData.POLICY_INFO,
},
{
scenario: navigationScenarios.CLICKED_BACK,
destinationPageData: routeData.POLICY_DRIVER,
destinationPageData: routeData.POLICY_INFO,
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
@ -527,9 +539,13 @@ const routingTable = function () {
{
pageName: routeData.POLICY_INFO_SUBMITTED.name,
maps: [
{
scenario: navigationScenarios.CLICKED_CANCEL_VERIFICATION,
destinationPageData: routeData.POLICY_INFO,
},
{
scenario: navigationScenarios.CLICKED_BACK,
destinationPageData: routeData.ENDORSEMENTS,
destinationPageData: routeData.POLICY_INFO,
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
@ -540,9 +556,13 @@ const routingTable = function () {
{
pageName: routeData.RECALIBRATION_INFO.name,
maps: [
{
scenario: navigationScenarios.CLICKED_CANCEL_VERIFICATION,
destinationPageData: routeData.POLICY_INFO,
},
{
scenario: navigationScenarios.CLICKED_BACK,
destinationPageData: routeData.POLICY_INFO_SUBMITTED,
destinationPageData: routeData.POLICY_INFO,
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
@ -559,7 +579,7 @@ const routingTable = function () {
},
{
scenario: navigationScenarios.CLICKED_BACK_RECALIBRATION_INFO,
destinationPageData: routeData.RECALIBRATION_INFO,
destinationPageData: routeData.POLICY_INFO,
},
{
scenario: navigationScenarios.CLICKED_BACK_NON_CLAIM_AND_COVERAGE,