CASH-632 added cancel link button for insurance pages

CASH-632 added cancel link button for insurance pages

src/fmg-components/insurance-nav-bar/insurance-nav-bar.vue

@@ -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>

src/layouts/duplicate-check/duplicate-check.vue

@@ -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,

src/layouts/endorsements/endorsements.vue

@@ -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,

src/layouts/policy-driver/policy-driver.vue

@@ -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,

src/layouts/policy-info-submitted/policy-info-submitted.vue

@@ -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,

src/layouts/policy-info/policy-info.vue

@@ -191,15 +191,13 @@
                         v-model="morePolicyQuestions"
                         groupName="MorePolicyQuestionsQuestion" />
 
-                    <div class="policy-info-navbar">
+                        <insuranceNavBar
-                        <navbar
                             cmsWidgetName="FunnelFooterWidget"
                             ref="navbar"
                             :isForwardActionDisabled="!meta.valid"
-                            overrideBackButtonText="Cancel verification"
+                            isBackButtonHidden
-                            @back-clicked="backButtonAction"
+                            @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;

src/layouts/policy-vehicle/policy-vehicle.vue

@@ -17,18 +17,11 @@
                         class="mb-3"
                         @click-event="forwardButtonAction" />
 
-                    <textLink
+                    <insuranceNavBar
-                        class="pt-3"
-                        useLoadingModal
-                        linkType="text"
-                        href="javascript:void(0)"
-                        :text="cancelVerificationCopy"
-                        @click-event="cancelVerificationAction" />
-
-                    <navbar
                         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

src/layouts/recalibration-info/recalibration-info.vue

@@ -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,

src/router/constants/routing-table.js

@@ -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,