Merge branch 'nation/CASH-2466' into nation/CASH-699

jest.config.js

@@ -33,19 +33,20 @@ module.exports = {
     "!src/layouts/payment-pia-return/*.vue", // Temp test exclusion while in development
     "!src/layouts/insurance/*.vue", // Temp test exclusion while in development
     "!src/layouts/insurance-company/*.vue", // Temp test exclusion while in development
-    "!src/digital-components/date-picker/**/*.vue", // Temp test exclusion while in development
+    "!src/layouts/policy-info/*.vue",
+    "!src/layouts/policy-vehicle/*.vue",
+    "!src/layouts/policy-driver/*.vue",
+    "!src/layouts/duplicate-check/*.vue",
+    "!src/layouts/endorsements/*.vue",
+    "!src/layouts/policy-info-submitted/*.vue",
+    "!src/layouts/recalibration-info/*.vue",
+    "!src/layouts/coverage-statement/*.vue",
+    "!src/layouts/insurance-details/*.vue",
+    "!src/layouts/verify-details/*.vue",
     "!src/layouts/insurance-company/insurance-company-question/*.vue", // Temp test exclusion while in development
     "!src/experiment-components/*.vue",
-    // END
   ], // ! means exclude from coverage.
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
-  coverageThreshold: {
-    global: {
-      statements: 68,
-    },
-  },
-  // Uncomment this to avoid the massive amount of warnings we are getting for onSubmit and onInvalidSubmit
-  //silent: true,
 };
 
 process.env = Object.assign(process.env, environmentVariablesWithDefaults);

src/constants/experiments.js

@@ -47,6 +47,10 @@ const experimentSettings = {
     USE_ADYEN_PAYMENT: "UseAdyenPayment",
     SHOW_UNVERIFIED_DEDUCT_ENTRY: "ShowUnverifiedDeducEntry",
     SERVICE_PACKAGE_ORDER: "ServicePackageOrder",
+
+    // Claim and Coverage for 2.0
+    ENABLE_NON_CLAIM_AND_COVERAGE_FLOW: "EnableNonC&CFlow",
+    NON_CLAIM_AND_COVERAGE_TEST_PARENT_ACCOUNT: "NonC&CTestParentAccount",
 };
 
 const experimentTriggers = {

src/constants/progress-bar-mapper.js

@@ -52,6 +52,42 @@ export const pageProgressMapper = {
         percent: 55,
         step: 2,
     },
+    "insurance-details": {
+        percent: 55,
+        step: 2,
+    },
+    "duplicate-check": {
+        percent: 55,
+        step: 2,
+    },
+    "policy-vehicle": {
+        percent: 55,
+        step: 2,
+    },
+    "policy-driver": {
+        percent: 55,
+        step: 2,
+    },
+    "endorsements": {
+        percent: 55,
+        step: 2,
+    },
+    "policy-info-submitted": {
+        percent: 55,
+        step: 2,
+    },
+    "recalibration-info": {
+        percent: 55,
+        step: 2,
+    },
+    "coverage-statement": {
+        percent: 55,
+        step: 2,
+    },
+    "verify-details": {
+        percent: 55,
+        step: 2,
+    },
     quote: {
         percent: 60,
         step: 2,

src/constants/store-actions.js

@@ -99,6 +99,9 @@ const storeActions = {
     SAVE_PAYMENT_TYPE: "savePaymentType",
     SAVE_PAYMENT_METHOD_CHOICE: "savePaymentMethodChoice",
     SAVE_PARENT_ACCOUNT_NUMBER: "saveParentAccountNumber",
+    SAVE_ACCOUNT_NAME: "saveAccountName",
+    SAVE_IS_CLAIM_AND_COVERAGE: "saveIsClaimAndCoverage",
+    SAVE_CAN_SCHEDULE_ONLINE: "saveCanScheduleOnline",
     SAVE_BILL_TO_ACCOUNT_NUMBER: "saveBillToAccountNumber",
     SAVE_SUPPORTING_ITEMS: "saveSupportingItems",
     SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING:

src/constants/store-mutations.js

@@ -57,6 +57,9 @@ const storeMutations = {
     UPDATE_REFERRAL_DATE: "updateReferralDate",
     UPDATE_REFERRAL_CORRELATION_ID: "updateReferralCorrelationId",
     UPDATE_PARENT_ACCT_NUMBER: "updateParentAcctNumber",
+    UPDATE_ACCOUNT_NAME: "updateAccountName",
+    UPDATE_IS_CLAIM_AND_COVERAGE: "updateIsClaimAndCoverage",
+    UPDATE_CAN_SCHEDULE_ONLINE: "updateCanScheduleOnline",
     UPDATE_BILL_TO_ACCT_NUMBER: "updateBillToAcctNumber",
     UPDATE_EON: "updateEON",
     UPDATE_IS_INSURANCE: "updateIsInsurance",

src/layouts/coverage-statement/coverage-statement.spec.js

@@ -0,0 +1,70 @@
+import coverageStatement from "@/layouts/coverage-statement/coverage-statement.vue";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+    settleAllPromises: jest.fn(),
+}));
+
+// Mock fetchCmsContentForPage
+jest.mock("@/helpers/cms-content-helper", () => ({
+    fetchCmsContentForPage: jest.fn(),
+}));
+
+describe("coverage-statement.vue", () => {
+    describe("component rendering", () => {
+        test("renders funnelHeader component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "funnelHeader" }).exists()).toBe(true);
+        });
+
+        test("renders funnelSubHeader component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "funnelSubHeader" }).exists()).toBe(true);
+        });
+
+        test("renders navbar component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "navbar" }).exists()).toBe(true);
+        });
+
+        test("renders Form component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "Form" }).exists()).toBe(true);
+        });
+    });
+
+    describe("methods", () => {
+        test("arePagePrerequisitesValid returns true", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.vm.arePagePrerequisitesValid()).toBe(true);
+        });
+    });
+});
+
+function setupMocks() {
+    const mockCmsContent = {
+        FunnelHeaderWidget: { Text: "Header" },
+        FunnelSubHeaderWidget: { Text: "Subheader" },
+        FunnelFooterWidget: { Text: "Footer" },
+    };
+
+    fetchCmsContentForPage.mockResolvedValue(mockCmsContent);
+    settleAllPromises.mockResolvedValue({ cmsContent: mockCmsContent });
+
+    const mountOptions = getMountOptions({
+        route: { name: "duplicate-check", query: {}, params: {} },
+        router: {
+            navigate: jest.fn(),
+            navigateWithSaving: jest.fn(),
+            navigateWithoutSaving: jest.fn(),
+        },
+    });
+
+    const wrapper = shallowMount(coverageStatement, mountOptions);
+
+    return { wrapper };
+}

src/layouts/coverage-statement/coverage-statement.vue

@@ -0,0 +1,78 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
+                    <!--
+                            ... Page code goes here.
+                    -->
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        ref="navbar"
+                        :isForwardActionDisabled="!meta.valid"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+
+<script>
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import { Form } from "vee-validate";
+
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+export default {
+    name: "coverage-statement",
+    mixins: [],
+    data() {
+        return {};
+    },
+    components: {
+        Form,
+        funnelHeader,
+        navbar,
+        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 promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+        const resultMap = await settleAllPromises(promiseResultMap);
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+
+    methods: {
+        backButtonAction() {
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_BACK,
+                this.pageName
+            );
+        },
+        async forwardButtonAction() {
+            this.$router.navigateWithSaving(
+                    this.navigationScenarios.CLICKED_FORWARD,
+                    this.pageName
+                );
+        },
+        arePagePrerequisitesValid() {
+            return true;
+        },
+    },
+};
+</script>

src/layouts/duplicate-check/duplicate-check.spec.js

@@ -0,0 +1,70 @@
+import duplicateCheck from "@/layouts/duplicate-check/duplicate-check.vue";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+    settleAllPromises: jest.fn(),
+}));
+
+// Mock fetchCmsContentForPage
+jest.mock("@/helpers/cms-content-helper", () => ({
+    fetchCmsContentForPage: jest.fn(),
+}));
+
+describe("duplicate-check.vue", () => {
+    describe("component rendering", () => {
+        test("renders funnelHeader component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "funnelHeader" }).exists()).toBe(true);
+        });
+
+        test("renders funnelSubHeader component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "funnelSubHeader" }).exists()).toBe(true);
+        });
+
+        test("renders navbar component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "navbar" }).exists()).toBe(true);
+        });
+
+        test("renders Form component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "Form" }).exists()).toBe(true);
+        });
+    });
+
+    describe("methods", () => {
+        test("arePagePrerequisitesValid returns true", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.vm.arePagePrerequisitesValid()).toBe(true);
+        });
+    });
+});
+
+function setupMocks() {
+    const mockCmsContent = {
+        FunnelHeaderWidget: { Text: "Header" },
+        FunnelSubHeaderWidget: { Text: "Subheader" },
+        FunnelFooterWidget: { Text: "Footer" },
+    };
+
+    fetchCmsContentForPage.mockResolvedValue(mockCmsContent);
+    settleAllPromises.mockResolvedValue({ cmsContent: mockCmsContent });
+
+    const mountOptions = getMountOptions({
+        route: { name: "duplicate-check", query: {}, params: {} },
+        router: {
+            navigate: jest.fn(),
+            navigateWithSaving: jest.fn(),
+            navigateWithoutSaving: jest.fn(),
+        },
+    });
+
+    const wrapper = shallowMount(duplicateCheck, mountOptions);
+
+    return { wrapper };
+}

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

@@ -0,0 +1,78 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
+                    <!--
+                            ... Page code goes here.
+                    -->
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        ref="navbar"
+                        :isForwardActionDisabled="!meta.valid"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+
+<script>
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import { Form } from "vee-validate";
+
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+export default {
+    name: "duplicate-check",
+    mixins: [],
+    data() {
+        return {};
+    },
+    components: {
+        Form,
+        funnelHeader,
+        navbar,
+        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 promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+        const resultMap = await settleAllPromises(promiseResultMap);
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+
+    methods: {
+        backButtonAction() {
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_BACK,
+                this.pageName
+            );
+        },
+        async forwardButtonAction() {
+            this.$router.navigateWithSaving(
+                    this.navigationScenarios.CLICKED_FORWARD,
+                    this.pageName
+                );
+        },
+        arePagePrerequisitesValid() {
+            return true;
+        },
+    },
+};
+</script>

src/layouts/endorsements/endorsements.spec.js

@@ -0,0 +1,70 @@
+import endorsements from "@/layouts/endorsements/endorsements.vue";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+    settleAllPromises: jest.fn(),
+}));
+
+// Mock fetchCmsContentForPage
+jest.mock("@/helpers/cms-content-helper", () => ({
+    fetchCmsContentForPage: jest.fn(),
+}));
+
+describe("endorsements.vue", () => {
+    describe("component rendering", () => {
+        test("renders funnelHeader component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "funnelHeader" }).exists()).toBe(true);
+        });
+
+        test("renders funnelSubHeader component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "funnelSubHeader" }).exists()).toBe(true);
+        });
+
+        test("renders navbar component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "navbar" }).exists()).toBe(true);
+        });
+
+        test("renders Form component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "Form" }).exists()).toBe(true);
+        });
+    });
+
+    describe("methods", () => {
+        test("arePagePrerequisitesValid returns true", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.vm.arePagePrerequisitesValid()).toBe(true);
+        });
+    });
+});
+
+function setupMocks() {
+    const mockCmsContent = {
+        FunnelHeaderWidget: { Text: "Header" },
+        FunnelSubHeaderWidget: { Text: "Subheader" },
+        FunnelFooterWidget: { Text: "Footer" },
+    };
+
+    fetchCmsContentForPage.mockResolvedValue(mockCmsContent);
+    settleAllPromises.mockResolvedValue({ cmsContent: mockCmsContent });
+
+    const mountOptions = getMountOptions({
+        route: { name: "duplicate-check", query: {}, params: {} },
+        router: {
+            navigate: jest.fn(),
+            navigateWithSaving: jest.fn(),
+            navigateWithoutSaving: jest.fn(),
+        },
+    });
+
+    const wrapper = shallowMount(endorsements, mountOptions);
+
+    return { wrapper };
+}

src/layouts/endorsements/endorsements.vue

@@ -0,0 +1,78 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
+                    <!--
+                            ... Page code goes here.
+                    -->
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        ref="navbar"
+                        :isForwardActionDisabled="!meta.valid"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+
+<script>
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import { Form } from "vee-validate";
+
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+export default {
+    name: "endorsements",
+    mixins: [],
+    data() {
+        return {};
+    },
+    components: {
+        Form,
+        funnelHeader,
+        navbar,
+        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 promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+        const resultMap = await settleAllPromises(promiseResultMap);
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+
+    methods: {
+        backButtonAction() {
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_BACK,
+                this.pageName
+            );
+        },
+        async forwardButtonAction() {
+            this.$router.navigateWithSaving(
+                    this.navigationScenarios.CLICKED_FORWARD,
+                    this.pageName
+                );
+        },
+        arePagePrerequisitesValid() {
+            return true;
+        },
+    },
+};
+</script>

src/layouts/insurance-company/insurance-company-question.vue

@@ -35,7 +35,7 @@ export default {
     name: "insurance-company-question",
     props: {
         originalList: Array,
-        modelValue: String,
+        modelValue: Object,
         validationRules: String,
     },
     data() {
@@ -44,12 +44,13 @@ export default {
         };
     },
     computed: {
-        selectedAccountNumber: {
+        selectedAccount: {
             get: function () {
-                return this.modelValue?.toString();
+                return this.modelValue;
             },
             set: function (newValue) {
-                this.$emit("update:modelValue", newValue); // send data up to v-model on parent, s/b account number
+                this.selectedAccountName = newValue?.accountName;
+                this.$emit("update:modelValue", newValue);
             },
         },
         searchableInsuranceCompanyList() {
@@ -71,15 +72,15 @@ export default {
         },
     },
     methods: {
-        getParentAccountNumber(name) {
+        getAccount(name) {
             const matchedItems = this.searchableInsuranceCompanyList?.filter((item) => {
                 return item.accountName?.toString() === name.toString();
             });
 
             if (matchedItems.length > 0) {
-                return matchedItems[0].parentAccountNumber;
+                return matchedItems[0];
             } else {
-                console.error("Error locating accountNumber");
+                console.error("Error locating accountNumber" + name);
                 return;
             }
         },
@@ -91,7 +92,7 @@ export default {
             if (matchedItems.length > 0) {
                 return matchedItems[0].accountName;
             } else {
-                console.error("Error locating accountName");
+                console.error("Error locating accountName" + number);
                 return;
             }
         },
@@ -128,19 +129,18 @@ export default {
                 console.error("No insurance companies found");
                 return;
             }
+
             if (parentAccountName) {
-                const parentAccountNumber = this.getParentAccountNumber(parentAccountName);
+                this.selectedAccount = this.getAccount(parentAccountName);
-                this.selectedAccountNumber = parentAccountNumber;
-                this.selectedAccountName = this.getParentAccountName(parentAccountNumber);
             } else {
-                this.selectedAccountNumber = "";
                 this.selectedAccountName = "";
             }
         },
     },
     mounted() {
-        if (this.modelValue.length > 0) {
+        const parentAccountNumber = this.modelValue?.parentAccountNumber;
-            this.selectedAccountName = this.getParentAccountName(this.modelValue?.toString());
+        if (parentAccountNumber && parentAccountNumber.length > 0) {
+            this.selectedAccountName = this.getParentAccountName(parentAccountNumber.toString());
         }
 
         const select = this.selectInsuranceCompany;

src/layouts/insurance-company/insurance-company.vue

@@ -6,11 +6,10 @@
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" alignLeft />
-
                     <div v-if="originalList.length > 0">
                         <insurance-company-question
                             isRequired
-                            v-model="parentAccountNumber"
+                            v-model="selectedAccount"
                             :originalList="originalList"
                             validationRules="insurance-company-required" />
                     </div>
@@ -59,6 +58,7 @@ import store from "@/store";
 import { flushSaveSessionQueue } from "@/helpers/heritage-integration/order-helper";
 import { errorMessages } from "@/constants/error-messages";
 import { required, regex } from "@/helpers/validation-rules";
+import { debugLog } from "@/helpers/debug-log-helper";
 
 defineRule("insurance-company-required", required(errorMessages.INSURANCE_COMPANY_REQUIRED));
 
@@ -117,13 +117,18 @@ export default {
 
     data() {
         return {
+            selectedAccount: {
                 parentAccountNumber: this.parentAccountNumberFromStore(),
+                accountName: this.accountNameFromStore(),
+                isClaimAndCoverage: this.isClaimAndCoverageFromStore(),
+                canScheduleOnline: this.canScheduleOnlineFromStore(),
+            },
             originalList: [],
         };
     },
     computed: {
         isParentAccountNumber() {
-            return !!this.parentAccountNumber;
+            return !!this.selectedAccount.parentAccountNumber;
         },
         payWithCashButtonCopy() {
             return this.getCmsContent("PayWithCashWidget", "Text");
@@ -142,6 +147,15 @@ export default {
                 : "";
             return accountNumber;
         },
+        accountNameFromStore() {
+            return store.getters.order?.payment?.accountName;
+        },
+        isClaimAndCoverageFromStore() {
+            return store.getters.order?.payment?.isClaimAndCoverage;
+        },
+        canScheduleOnlineFromStore() {
+            return store.getters.order?.payment?.canScheduleOnline;
+        },
         arePagePrerequisitesValid() {
             return store.getters.order.payment.isInsurance === true;
         },
@@ -168,7 +182,25 @@ export default {
 
             await this.dispatchStoreAction(
                 this.storeActions.SAVE_PARENT_ACCOUNT_NUMBER,
-                this.parentAccountNumber.toString(),
+                this.selectedAccount.parentAccountNumber.toString(),
+                false
+            );
+
+            await this.dispatchStoreAction(
+                this.storeActions.SAVE_ACCOUNT_NAME,
+                this.selectedAccount.accountName,
+                false
+            );
+
+            await this.dispatchStoreAction(
+                this.storeActions.SAVE_IS_CLAIM_AND_COVERAGE,
+                this.selectedAccount.isClaimAndCoverage,
+                false
+            );
+
+            await this.dispatchStoreAction(
+                this.storeActions.SAVE_CAN_SCHEDULE_ONLINE,
+                this.selectedAccount.canScheduleOnline,
                 false
             );
 
@@ -187,6 +219,75 @@ export default {
             //Reload page when navigate with browser back button
             window.addEventListener("pageshow", this.handlePageShow);
 
+            //TODO: Where to send if can schedule online is false?
+            if (!this.selectedAccount.canScheduleOnline) {
+                debugLog(
+                    `--- ${this.selectedAccount.parentAccountNumber} Can schedule online is false, sending to vue app Insurance Details page ---`
+                );
+            }
+
+            // hasClaimAndCoverage in experiment-mixin.js checks if the parent account number is in the experiment settings.
+            const isClaimAndCoverageExperimentActive = this.hasClaimAndCoverage(
+                this.selectedAccount.parentAccountNumber
+            );
+
+            // C&C experiment active for this parent account number, send to vue app Policy Info page
+            if (isClaimAndCoverageExperimentActive) {
+                debugLog(
+                    `--- ${this.selectedAccount.parentAccountNumber} C&C experiment active for this parent account number, sending to vue app Policy Info page ---`
+                );
+                this.$router.navigateWithSaving(
+                    this.navigationScenarios.CLICKED_FORWARD_POLICY_INFO,
+                    this.pageName
+                );
+                return;
+            }
+
+            // C&C experiment setting is false, but is a C&C client, send to heritage
+            if (this.selectedAccount.isClaimAndCoverage) {
+                debugLog(
+                    `--- ${this.selectedAccount.parentAccountNumber} C&C experiment setting is false, but is a C&C client, sending to heritage ---`
+                );
+                navigateToHeritageFunnel({
+                    shouldSaveSession: true,
+                    pageNameToLog: this.pageName,
+                });
+                return;
+            }
+
+            // Non integrated experiment setting is true, send to new insurance details page
+            if (
+                this.hasSettingEqualTo(
+                    experimentSettings.ENABLE_NON_CLAIM_AND_COVERAGE_FLOW,
+                    "true"
+                )
+            ) {
+                debugLog(
+                    `--- ${this.selectedAccount.parentAccountNumber} Non integrated experiment setting is true, sending to vue app Insurance Details page ---`
+                );
+                this.$router.navigateWithSaving(
+                    this.navigationScenarios.CLICKED_FORWARD_NON_CLAIM_AND_COVERAGE,
+                    this.pageName
+                );
+                return;
+            }
+
+            // Non integrated experiment setting is false, but a parent account is NON_CLAIM_AND_COVERAGE_TEST_PARENT_ACCOUNT experiment
+            // contains a specific parent account number you wish to send to the veu app insurance details page
+            var nonIntegratedTestParentAccount = this.getSettingValue(
+                experimentSettings.NON_CLAIM_AND_COVERAGE_TEST_PARENT_ACCOUNT
+            );
+            if (nonIntegratedTestParentAccount === this.selectedAccount.parentAccountNumber) {
+                debugLog(
+                    `--- ${this.selectedAccount.parentAccountNumber} Non integrated experiment setting is false, but a parent account is NON_CLAIM_AND_COVERAGE_TEST_PARENT_ACCOUNT experiment contains a specific parent account number, sending to vue app Insurance Details page ---`
+                );
+                this.$router.navigateWithSaving(
+                    this.navigationScenarios.CLICKED_FORWARD_NON_CLAIM_AND_COVERAGE,
+                    this.pageName
+                );
+                return;
+            }
+
             navigateToHeritageFunnel({
                 shouldSaveSession: true,
                 pageNameToLog: "insurance-company",

src/layouts/insurance-details/insurance-details.vue

@@ -0,0 +1,75 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
+                    <!--
+                            ... Page code goes here.
+                    -->
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        ref="navbar"
+                        :isForwardActionDisabled="!meta.valid"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+
+<script>
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import { Form } from "vee-validate";
+
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+export default {
+    name: "insurance-details",
+    mixins: [],
+    data() {
+        return {};
+    },
+    components: {
+        Form,
+        funnelHeader,
+        navbar,
+        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 promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+        const resultMap = await settleAllPromises(promiseResultMap);
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+
+    methods: {
+        backButtonAction() {
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_BACK,
+                this.pageName
+            );
+        },
+        async forwardButtonAction() {
+            // Stub, for navigating forward via nav-bar
+        },
+        arePagePrerequisitesValid() {
+            return true;
+        },
+    },
+};
+</script>

src/layouts/policy-driver/policy-driver.spec.js

@@ -0,0 +1,70 @@
+import policyDriver from "@/layouts/policy-driver/policy-driver.vue";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+    settleAllPromises: jest.fn(),
+}));
+
+// Mock fetchCmsContentForPage
+jest.mock("@/helpers/cms-content-helper", () => ({
+    fetchCmsContentForPage: jest.fn(),
+}));
+
+describe("policy-driver.vue", () => {
+    describe("component rendering", () => {
+        test("renders funnelHeader component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "funnelHeader" }).exists()).toBe(true);
+        });
+
+        test("renders funnelSubHeader component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "funnelSubHeader" }).exists()).toBe(true);
+        });
+
+        test("renders navbar component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "navbar" }).exists()).toBe(true);
+        });
+
+        test("renders Form component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "Form" }).exists()).toBe(true);
+        });
+    });
+
+    describe("methods", () => {
+        test("arePagePrerequisitesValid returns true", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.vm.arePagePrerequisitesValid()).toBe(true);
+        });
+    });
+});
+
+function setupMocks() {
+    const mockCmsContent = {
+        FunnelHeaderWidget: { Text: "Header" },
+        FunnelSubHeaderWidget: { Text: "Subheader" },
+        FunnelFooterWidget: { Text: "Footer" },
+    };
+
+    fetchCmsContentForPage.mockResolvedValue(mockCmsContent);
+    settleAllPromises.mockResolvedValue({ cmsContent: mockCmsContent });
+
+    const mountOptions = getMountOptions({
+        route: { name: "policy-driver", query: {}, params: {} },
+        router: {
+            navigate: jest.fn(),
+            navigateWithSaving: jest.fn(),
+            navigateWithoutSaving: jest.fn(),
+        },
+    });
+
+    const wrapper = shallowMount(policyDriver, mountOptions);
+
+    return { wrapper };
+}

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

@@ -0,0 +1,78 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
+                    <!--
+                            ... Page code goes here.
+                    -->
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        ref="navbar"
+                        :isForwardActionDisabled="!meta.valid"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+
+<script>
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import { Form } from "vee-validate";
+
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+export default {
+    name: "policy-driver",
+    mixins: [],
+    data() {
+        return {};
+    },
+    components: {
+        Form,
+        funnelHeader,
+        navbar,
+        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 promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+        const resultMap = await settleAllPromises(promiseResultMap);
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+
+    methods: {
+        backButtonAction() {
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_BACK,
+                this.pageName
+            );
+        },
+        async forwardButtonAction() {
+            this.$router.navigateWithSaving(
+                    this.navigationScenarios.CLICKED_FORWARD,
+                    this.pageName
+                );
+        },
+        arePagePrerequisitesValid() {
+            return true;
+        },
+    },
+};
+</script>

src/layouts/policy-info-submitted/policy-info-submitted.spec.js

@@ -0,0 +1,70 @@
+import policyInfoSubmitted from "@/layouts/policy-info-submitted/policy-info-submitted.vue";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+    settleAllPromises: jest.fn(),
+}));
+
+// Mock fetchCmsContentForPage
+jest.mock("@/helpers/cms-content-helper", () => ({
+    fetchCmsContentForPage: jest.fn(),
+}));
+
+describe("policy-info-submitted.vue", () => {
+    describe("component rendering", () => {
+        test("renders funnelHeader component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "funnelHeader" }).exists()).toBe(true);
+        });
+
+        test("renders funnelSubHeader component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "funnelSubHeader" }).exists()).toBe(true);
+        });
+
+        test("renders navbar component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "navbar" }).exists()).toBe(true);
+        });
+
+        test("renders Form component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "Form" }).exists()).toBe(true);
+        });
+    });
+
+    describe("methods", () => {
+        test("arePagePrerequisitesValid returns true", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.vm.arePagePrerequisitesValid()).toBe(true);
+        });
+    });
+});
+
+function setupMocks() {
+    const mockCmsContent = {
+        FunnelHeaderWidget: { Text: "Header" },
+        FunnelSubHeaderWidget: { Text: "Subheader" },
+        FunnelFooterWidget: { Text: "Footer" },
+    };
+
+    fetchCmsContentForPage.mockResolvedValue(mockCmsContent);
+    settleAllPromises.mockResolvedValue({ cmsContent: mockCmsContent });
+
+    const mountOptions = getMountOptions({
+        route: { name: "policy-vehicle", query: {}, params: {} },
+        router: {
+            navigate: jest.fn(),
+            navigateWithSaving: jest.fn(),
+            navigateWithoutSaving: jest.fn(),
+        },
+    });
+
+    const wrapper = shallowMount(policyInfoSubmitted, mountOptions);
+
+    return { wrapper };
+}

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

@@ -0,0 +1,78 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
+                    <!--
+                            ... Page code goes here.
+                    -->
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        ref="navbar"
+                        :isForwardActionDisabled="!meta.valid"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+
+<script>
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import { Form } from "vee-validate";
+
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+export default {
+    name: "policy-info-submitted",
+    mixins: [],
+    data() {
+        return {};
+    },
+    components: {
+        Form,
+        funnelHeader,
+        navbar,
+        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 promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+        const resultMap = await settleAllPromises(promiseResultMap);
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+
+    methods: {
+        backButtonAction() {
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_BACK,
+                this.pageName
+            );
+        },
+        async forwardButtonAction() {
+            this.$router.navigateWithSaving(
+                    this.navigationScenarios.CLICKED_FORWARD,
+                    this.pageName
+                );
+        },
+        arePagePrerequisitesValid() {
+            return true;
+        },
+    },
+};
+</script>

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

@@ -58,11 +58,17 @@ export default {
     },
 
     methods: {
-        async backButtonAction() {
+        backButtonAction() {
-            // Stub, for navigating back via nav-bar.
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_BACK,
+                this.pageName
+            );
         },
         async forwardButtonAction() {
-            // Stub, for navigating forward via nav-bar
+            this.$router.navigateWithSaving(
+                    this.navigationScenarios.CLICKED_FORWARD,
+                    this.pageName
+                );
         },
         arePagePrerequisitesValid() {
             return true;

src/layouts/policy-vehicle/policy-vehicle.spec.js

@@ -0,0 +1,70 @@
+import policyVehicle from "@/layouts/policy-vehicle/policy-vehicle.vue";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+    settleAllPromises: jest.fn(),
+}));
+
+// Mock fetchCmsContentForPage
+jest.mock("@/helpers/cms-content-helper", () => ({
+    fetchCmsContentForPage: jest.fn(),
+}));
+
+describe("policy-vehicle.vue", () => {
+    describe("component rendering", () => {
+        test("renders funnelHeader component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "funnelHeader" }).exists()).toBe(true);
+        });
+
+        test("renders funnelSubHeader component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "funnelSubHeader" }).exists()).toBe(true);
+        });
+
+        test("renders navbar component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "navbar" }).exists()).toBe(true);
+        });
+
+        test("renders Form component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "Form" }).exists()).toBe(true);
+        });
+    });
+
+    describe("methods", () => {
+        test("arePagePrerequisitesValid returns true", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.vm.arePagePrerequisitesValid()).toBe(true);
+        });
+    });
+});
+
+function setupMocks() {
+    const mockCmsContent = {
+        FunnelHeaderWidget: { Text: "Header" },
+        FunnelSubHeaderWidget: { Text: "Subheader" },
+        FunnelFooterWidget: { Text: "Footer" },
+    };
+
+    fetchCmsContentForPage.mockResolvedValue(mockCmsContent);
+    settleAllPromises.mockResolvedValue({ cmsContent: mockCmsContent });
+
+    const mountOptions = getMountOptions({
+        route: { name: "policy-vehicle", query: {}, params: {} },
+        router: {
+            navigate: jest.fn(),
+            navigateWithSaving: jest.fn(),
+            navigateWithoutSaving: jest.fn(),
+        },
+    });
+
+    const wrapper = shallowMount(policyVehicle, mountOptions);
+
+    return { wrapper };
+}

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

@@ -0,0 +1,78 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
+                    <!--
+                            ... Page code goes here.
+                    -->
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        ref="navbar"
+                        :isForwardActionDisabled="!meta.valid"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+
+<script>
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import { Form } from "vee-validate";
+
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+export default {
+    name: "policy-vehicle",
+    mixins: [],
+    data() {
+        return {};
+    },
+    components: {
+        Form,
+        funnelHeader,
+        navbar,
+        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 promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+        const resultMap = await settleAllPromises(promiseResultMap);
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+
+    methods: {
+        backButtonAction() {
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_BACK,
+                this.pageName
+            );
+        },
+        async forwardButtonAction() {
+            this.$router.navigateWithSaving(
+                    this.navigationScenarios.CLICKED_FORWARD,
+                    this.pageName
+                );
+        },
+        arePagePrerequisitesValid() {
+            return true;
+        },
+    },
+};
+</script>

src/layouts/quote/quote.vue

@@ -794,6 +794,13 @@ export default {
                     applicationConfig.CASH_DEFAULT_BILL_TO_ACCOUNT_NUMBER,
                     false
                 );
+                this.dispatchStoreAction(
+                    this.storeActions.SAVE_IS_CLAIM_AND_COVERAGE,
+                    false,
+                    false
+                );
+                this.dispatchStoreAction(this.storeActions.SAVE_CAN_SCHEDULE_ONLINE, false, false);
+                this.dispatchStoreAction(this.storeActions.SAVE_ACCOUNT_NAME, null, false);
             } else {
                 baseMixin.methods.dispatchStoreAction(
                     storeActions.SAVE_PARENT_ACCOUNT_NUMBER,

src/layouts/recalibration-info/recalibration-info.spec.js

@@ -0,0 +1,70 @@
+import recalibrationInfo from "@/layouts/recalibration-info/recalibration-info.vue";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+    settleAllPromises: jest.fn(),
+}));
+
+// Mock fetchCmsContentForPage
+jest.mock("@/helpers/cms-content-helper", () => ({
+    fetchCmsContentForPage: jest.fn(),
+}));
+
+describe("recalibration-info.vue", () => {
+    describe("component rendering", () => {
+        test("renders funnelHeader component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "funnelHeader" }).exists()).toBe(true);
+        });
+
+        test("renders funnelSubHeader component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "funnelSubHeader" }).exists()).toBe(true);
+        });
+
+        test("renders navbar component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "navbar" }).exists()).toBe(true);
+        });
+
+        test("renders Form component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "Form" }).exists()).toBe(true);
+        });
+    });
+
+    describe("methods", () => {
+        test("arePagePrerequisitesValid returns true", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.vm.arePagePrerequisitesValid()).toBe(true);
+        });
+    });
+});
+
+function setupMocks() {
+    const mockCmsContent = {
+        FunnelHeaderWidget: { Text: "Header" },
+        FunnelSubHeaderWidget: { Text: "Subheader" },
+        FunnelFooterWidget: { Text: "Footer" },
+    };
+
+    fetchCmsContentForPage.mockResolvedValue(mockCmsContent);
+    settleAllPromises.mockResolvedValue({ cmsContent: mockCmsContent });
+
+    const mountOptions = getMountOptions({
+        route: { name: "policy-vehicle", query: {}, params: {} },
+        router: {
+            navigate: jest.fn(),
+            navigateWithSaving: jest.fn(),
+            navigateWithoutSaving: jest.fn(),
+        },
+    });
+
+    const wrapper = shallowMount(recalibrationInfo, mountOptions);
+
+    return { wrapper };
+}

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

@@ -0,0 +1,78 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
+                    <!--
+                            ... Page code goes here.
+                    -->
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        ref="navbar"
+                        :isForwardActionDisabled="!meta.valid"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+
+<script>
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import { Form } from "vee-validate";
+
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+export default {
+    name: "recalibration-info",
+    mixins: [],
+    data() {
+        return {};
+    },
+    components: {
+        Form,
+        funnelHeader,
+        navbar,
+        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 promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+        const resultMap = await settleAllPromises(promiseResultMap);
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+
+    methods: {
+        backButtonAction() {
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_BACK,
+                this.pageName
+            );
+        },
+        async forwardButtonAction() {
+            this.$router.navigateWithSaving(
+                    this.navigationScenarios.CLICKED_FORWARD,
+                    this.pageName
+                );
+        },
+        arePagePrerequisitesValid() {
+            return true;
+        },
+    },
+};
+</script>

src/layouts/verify-details/verify-details.spec.js

@@ -0,0 +1,70 @@
+import verifyDetails from "@/layouts/verify-details/verify-details.vue";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+    settleAllPromises: jest.fn(),
+}));
+
+// Mock fetchCmsContentForPage
+jest.mock("@/helpers/cms-content-helper", () => ({
+    fetchCmsContentForPage: jest.fn(),
+}));
+
+describe("verify-details.vue", () => {
+    describe("component rendering", () => {
+        test("renders funnelHeader component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "funnelHeader" }).exists()).toBe(true);
+        });
+
+        test("renders funnelSubHeader component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "funnelSubHeader" }).exists()).toBe(true);
+        });
+
+        test("renders navbar component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "navbar" }).exists()).toBe(true);
+        });
+
+        test("renders Form component", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.findComponent({ name: "Form" }).exists()).toBe(true);
+        });
+    });
+
+    describe("methods", () => {
+        test("arePagePrerequisitesValid returns true", () => {
+            const { wrapper } = setupMocks();
+            expect(wrapper.vm.arePagePrerequisitesValid()).toBe(true);
+        });
+    });
+});
+
+function setupMocks() {
+    const mockCmsContent = {
+        FunnelHeaderWidget: { Text: "Header" },
+        FunnelSubHeaderWidget: { Text: "Subheader" },
+        FunnelFooterWidget: { Text: "Footer" },
+    };
+
+    fetchCmsContentForPage.mockResolvedValue(mockCmsContent);
+    settleAllPromises.mockResolvedValue({ cmsContent: mockCmsContent });
+
+    const mountOptions = getMountOptions({
+        route: { name: "policy-vehicle", query: {}, params: {} },
+        router: {
+            navigate: jest.fn(),
+            navigateWithSaving: jest.fn(),
+            navigateWithoutSaving: jest.fn(),
+        },
+    });
+
+    const wrapper = shallowMount(verifyDetails, mountOptions);
+
+    return { wrapper };
+}

src/layouts/verify-details/verify-details.vue

@@ -0,0 +1,78 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
+                    <!--
+                            ... Page code goes here.
+                    -->
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        ref="navbar"
+                        :isForwardActionDisabled="!meta.valid"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+
+<script>
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import { Form } from "vee-validate";
+
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+export default {
+    name: "verify-details",
+    mixins: [],
+    data() {
+        return {};
+    },
+    components: {
+        Form,
+        funnelHeader,
+        navbar,
+        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 promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+        const resultMap = await settleAllPromises(promiseResultMap);
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+
+    methods: {
+        backButtonAction() {
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_BACK,
+                this.pageName
+            );
+        },
+        async forwardButtonAction() {
+            this.$router.navigateWithSaving(
+                    this.navigationScenarios.CLICKED_FORWARD,
+                    this.pageName
+                );
+        },
+        arePagePrerequisitesValid() {
+            return true;
+        },
+    },
+};
+</script>

src/mixins/experiment-mixin.js

@@ -1,5 +1,6 @@
 import store from "@/store";
 import * as experimentHelper from "../helpers/experiment-helper";
+import { experimentSettings } from "@/constants/experiments";
 
 /*
     This is a wrapper around experiment-helper.js methods that allows an override
@@ -32,5 +33,24 @@ export default {
                 experimentHelper.getExperimentSettingsFromExperimentList(experimentList);
             return experimentHelper.getSettingValue(settingName, experimentSettings);
         },
+
+        // Looks for an experiment setting that has a value that matches the passed in parent account number.
+        // Settings named NON_CLAIM_AND_COVERAGE_TEST_PARENT_ACCOUNT are excluded from the match.
+        hasClaimAndCoverage(
+            parentAccountNumber,
+            experimentList = store.getters.applicationUser.experiments
+        ) {
+            const parentNum = String(parentAccountNumber);
+            return experimentList.some(
+                (experiment) =>
+                    experiment.settings &&
+                    Object.entries(experiment.settings).some(
+                        ([name, value]) =>
+                            name !==
+                                experimentSettings.NON_CLAIM_AND_COVERAGE_TEST_PARENT_ACCOUNT &&
+                            value === parentNum
+                    )
+            );
+        },
     },
 };

src/router/constants/navigation-scenarios.js

@@ -48,6 +48,8 @@ const navigationScenarios = {
 
     // Insurance-Company
     CLICKED_PAY_ON_MY_OWN: "CLICKED_PAY_ON_MY_OWN",
+    CLICKED_FORWARD_POLICY_INFO: "CLICKED_FORWARD_POLICY_INFO",
+    CLICKED_FORWARD_NON_CLAIM_AND_COVERAGE: "CLICKED_FORWARD_NON_CLAIM_AND_COVERAGE",
 
     //Service-Location
     CLICKED_FORWARD_WITH_MOBILE_SERVICE: "CLICKED_FORWARD_WITH_MOBILE_SERVICE",

src/router/constants/routes.js

@@ -55,6 +55,42 @@ export const routeData = {
         name: "policy-info",
         path: "/policy-info",
     },
+    INSURANCE_DETAILS: {
+        name: "insurance-details",
+        path: "/insurance-details",
+    },
+    DUPLICATE_CHECK: {
+        name: "duplicate-check",
+        path: "/duplicate-check",
+    },
+    POLICY_VEHICLE: {
+        name: "policy-vehicle",
+        path: "/policy-vehicle",
+    },
+    POLICY_DRIVER: {
+        name: "policy-driver",
+        path: "/policy-driver",
+    },
+    ENDORSEMENTS: {
+        name: "endorsements",
+        path: "/endorsements",
+    },
+    POLICY_INFO_SUBMITTED: {
+        name: "policy-info-submitted",
+        path: "/policy-info-submitted",
+    },
+    RECALIBRATION_INFO: {
+        name: "recalibration-info",
+        path: "/recalibration-info",
+    },
+    COVERAGE_STATEMENT: {
+        name: "coverage-statement",
+        path: "/coverage-statement",
+    },
+    VERIFY_DETAILS: {
+        name: "verify-details",
+        path: "/verify-details",
+    },
     INSURANCE_COMPANY: {
         name: "insurance-company",
         path: "/insurance-company",

src/router/constants/routing-table.js

@@ -431,7 +431,133 @@ const routingTable = function () {
         },
         {
             pageName: routeData.POLICY_INFO.name,
-            maps: [],
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_BACK,
+                    destinationPageData: routeData.INSURANCE_COMPANY,
+                },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD,
+                    destinationPageData: routeData.DUPLICATE_CHECK,
+                },
+            ],
+        },
+        {
+            pageName: routeData.INSURANCE_DETAILS.name,
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_BACK,
+                    destinationPageData: routeData.INSURANCE_COMPANY,
+                },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD,
+                    destinationPageData: routeData.COVERAGE_STATEMENT,
+                },
+            ],
+        },
+        {
+            pageName: routeData.DUPLICATE_CHECK.name,
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_BACK,
+                    destinationPageData: routeData.POLICY_INFO,
+                },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD,
+                    destinationPageData: routeData.POLICY_VEHICLE,
+                },
+            ],
+        },
+        {
+            pageName: routeData.POLICY_VEHICLE.name,
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_BACK,
+                    destinationPageData: routeData.DUPLICATE_CHECK,
+                },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD,
+                    destinationPageData: routeData.POLICY_DRIVER,
+                },
+            ],
+        },
+        {
+            pageName: routeData.POLICY_DRIVER.name,
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_BACK,
+                    destinationPageData: routeData.POLICY_VEHICLE,
+                },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD,
+                    destinationPageData: routeData.ENDORSEMENTS,
+                },
+            ],
+        },
+        {
+            pageName: routeData.ENDORSEMENTS.name,
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_BACK,
+                    destinationPageData: routeData.POLICY_DRIVER,
+                },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD,
+                    destinationPageData: routeData.POLICY_INFO_SUBMITTED,
+                },
+            ],
+        },
+        {
+            pageName: routeData.POLICY_INFO_SUBMITTED.name,
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_BACK,
+                    destinationPageData: routeData.ENDORSEMENTS,
+                },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD,
+                    destinationPageData: routeData.RECALIBRATION_INFO,
+                },
+            ],
+        },
+        {
+            pageName: routeData.RECALIBRATION_INFO.name,
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_BACK,
+                    destinationPageData: routeData.POLICY_INFO_SUBMITTED,
+                },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD,
+                    destinationPageData: routeData.COVERAGE_STATEMENT,
+                },
+            ],
+        },
+        {
+            pageName: routeData.COVERAGE_STATEMENT.name,
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_BACK,
+                    destinationPageData: routeData.RECALIBRATION_INFO,
+                },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD,
+                    destinationPageData: routeData.SCHEDULE,
+                },
+            ],
+        },
+        {
+            pageName: routeData.VERIFY_DETAILS.name,
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_BACK,
+                    destinationPageData: routeData.DUPLICATE_CHECK,
+                },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD,
+                    destinationPageData: routeData.POLICY_INFO_SUBMITTED,
+                },
+            ],
         },
         {
             pageName: routeData.INSURANCE_COMPANY.name,
@@ -451,6 +577,14 @@ const routingTable = function () {
                     scenario: navigationScenarios.CLICKED_FORWARD,
                     destinationPageData: routeData.INSURANCE_DETAILS,
                 },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD_POLICY_INFO,
+                    destinationPageData: routeData.POLICY_INFO,
+                },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD_NON_CLAIM_AND_COVERAGE,
+                    destinationPageData: routeData.INSURANCE_DETAILS,
+                },
             ],
         },
         // TODO: REMOVE THIS COMMENT AND BELOW, ONCE CASH-803 (SERVICE-LOCATION AND SCHEDULE PAGE COMBINATION) HAS BEEN VETTED

src/router/methods/routes.js

@@ -42,7 +42,15 @@ export const routes = [
     createRoute(routeData.RETURN_USER),
     createRoute(routeData.MOBILE_DETAILS),
     createRoute(routeData.POLICY_INFO),
-
+    createRoute(routeData.INSURANCE_DETAILS),
+    createRoute(routeData.DUPLICATE_CHECK),
+    createRoute(routeData.POLICY_VEHICLE),
+    createRoute(routeData.POLICY_DRIVER),
+    createRoute(routeData.ENDORSEMENTS),
+    createRoute(routeData.POLICY_INFO_SUBMITTED),
+    createRoute(routeData.RECALIBRATION_INFO),
+    createRoute(routeData.COVERAGE_STATEMENT),
+    createRoute(routeData.VERIFY_DETAILS),
     // Virtual pages (resolve to a non-virtual page.)
     createVirtualRoute(routeData.LANDING, landingBeforeEnter),
     createVirtualRoute(routeData.HERITAGE, heritageBeforeEnter),

src/store/index.js

@@ -142,6 +142,9 @@ const getDefaultState = () => {
                     coverageVerificationType: null,
                 },
                 parentAccountNumber: 0,
+                accountName: null,
+                isClaimAndCoverage: false,
+                canScheduleOnline: false,
                 billToAccountNumber: null,
                 isPia: null,
                 piaType: null,
@@ -328,6 +331,16 @@ export const mutations = {
     updateParentAcctNumber(state, parentAcctNumber) {
         state.order.payment.parentAccountNumber = parentAcctNumber;
     },
+    updateAccountName(state, accountName) {
+        state.order.payment.accountName = accountName;
+        state.order.policy.insuranceCompanyName = accountName;
+    },
+    updateIsClaimAndCoverage(state, isClaimAndCoverage) {
+        state.order.payment.isClaimAndCoverage = isClaimAndCoverage;
+    },
+    updateCanScheduleOnline(state, canScheduleOnline) {
+        state.order.payment.canScheduleOnline = canScheduleOnline;
+    },
     updateBillToAcctNumber(state, billToAcctNumber) {
         state.order.payment.billToAccountNumber = billToAcctNumber;
     },
@@ -766,7 +779,10 @@ export const mutations = {
         state.order.payment.billToAccountNumber =
             sessionInformation.order.payment.billToAccountNumber;
         state.order.payment.inactivePromos = sessionInformation.order.payment.inactivePromos;
-
+        state.order.payment.isClaimAndCoverage =
+            sessionInformation.order.payment.isClaimAndCoverage;
+        state.order.payment.canScheduleOnline = sessionInformation.order.payment.canScheduleOnline;
+        state.order.payment.accountName = sessionInformation.order.policy.insuranceCompanyName;
         //Do not assign default service type once user make service type selection
         if (state.order.serviceLocation.appointmentType == null) {
             state.order.serviceLocation.address =
@@ -2524,6 +2540,8 @@ export const actions = {
                         isInsurance: order.payment.isInsurance,
                         parentAccountNumber: order.payment.parentAccountNumber,
                         billToAccountNumber: order.payment.billToAccountNumber,
+                        isClaimAndCoverage: order.payment.isClaimAndCoverage,
+                        canScheduleOnline: order.payment.canScheduleOnline,
                         inactivePromos: order.payment.inactivePromos,
                         isCreditCard:
                             order.payment.piaType == paymentMethods.CREDIT_CARD ? true : false,
@@ -3040,6 +3058,15 @@ export const actions = {
     saveParentAccountNumber(context, parentAccountNumber) {
         context.commit(storeMutations.UPDATE_PARENT_ACCT_NUMBER, parentAccountNumber);
     },
+    saveAccountName(context, accountName) {
+        context.commit(storeMutations.UPDATE_ACCOUNT_NAME, accountName);
+    },
+    saveIsClaimAndCoverage(context, isClaimAndCoverage) {
+        context.commit(storeMutations.UPDATE_IS_CLAIM_AND_COVERAGE, isClaimAndCoverage);
+    },
+    saveCanScheduleOnline(context, canScheduleOnline) {
+        context.commit(storeMutations.UPDATE_CAN_SCHEDULE_ONLINE, canScheduleOnline);
+    },
     saveBillToAccountNumber(context, billToAccountNumber) {
         context.commit(storeMutations.UPDATE_BILL_TO_ACCT_NUMBER, billToAccountNumber);
     },

src/store/store.spec.js

@@ -225,6 +225,9 @@ describe("Mutations", () => {
                     category: "CAR",
                     registration: {},
                 },
+                policy: {
+                    insuranceCompanyName: "LibertyBibity",
+                },
                 damage: {
                     glassToReplace: ["Windshield"],
                     isRepair: false,