CASH-2466 add insurance page shells

CASH-2466 add insurance page shells

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/progress-bar-mapper.js

@@ -56,6 +56,38 @@ export const pageProgressMapper = {
         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/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/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

@@ -65,7 +65,10 @@ export default {
             );
         },
         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/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/router/constants/routes.js

@@ -59,6 +59,38 @@ export const routeData = {
         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

@@ -436,6 +436,10 @@ const routingTable = function () {
                     scenario: navigationScenarios.CLICKED_BACK,
                     destinationPageData: routeData.INSURANCE_COMPANY,
                 },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD,
+                    destinationPageData: routeData.DUPLICATE_CHECK,
+                },
             ],
         },
         {
@@ -445,6 +449,114 @@ const routingTable = function () {
                     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,
+                },
             ],
         },
         {

src/router/methods/routes.js

@@ -43,6 +43,14 @@ export const routes = [
     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/store.spec.js

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