From d4d298b2680add089284edfbc31f6480e344f292 Mon Sep 17 00:00:00 2001
From: Minojhini Valaiyapathi <minojhini.valaiyapathi@safelite.com>
Date: Wed, 4 Feb 2026 11:11:42 -0500
Subject: [PATCH] CASH-611 - C&C 2.0 | front-end | policy-info page | create
 page

---
 src/constants/progress-bar-mapper.js        |  4 ++
 src/layouts/policy-info/policy-info.spec.js | 72 +++++++++++++++++++
 src/layouts/policy-info/policy-info.vue     | 77 +++++++++++++++++++++
 src/router/constants/routes.js              |  4 ++
 src/router/constants/routing-table.js       |  4 ++
 src/router/methods/routes.js                |  1 +
 6 files changed, 162 insertions(+)
 create mode 100644 src/layouts/policy-info/policy-info.spec.js
 create mode 100644 src/layouts/policy-info/policy-info.vue

diff --git a/src/constants/progress-bar-mapper.js b/src/constants/progress-bar-mapper.js
index a57774c21..b21c6c9c7 100644
--- a/src/constants/progress-bar-mapper.js
+++ b/src/constants/progress-bar-mapper.js
@@ -48,6 +48,10 @@ export const pageProgressMapper = {
         percent: 30,
         step: 1,
     },
+    "policy-info": {
+        percent: 55,
+        step: 2,
+    },
     quote: {
         percent: 60,
         step: 2,
diff --git a/src/layouts/policy-info/policy-info.spec.js b/src/layouts/policy-info/policy-info.spec.js
new file mode 100644
index 000000000..d79cd7cad
--- /dev/null
+++ b/src/layouts/policy-info/policy-info.spec.js
@@ -0,0 +1,72 @@
+import policyInfo from "@/layouts/policy-info/policy-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("policy-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-info", query: {}, params: {} },
+        router: {
+            navigate: jest.fn(),
+            navigateWithSaving: jest.fn(),
+            navigateWithoutSaving: jest.fn(),
+        },
+    });
+
+    const wrapper = shallowMount(policyInfo, mountOptions);
+
+    return { wrapper };
+}
diff --git a/src/layouts/policy-info/policy-info.vue b/src/layouts/policy-info/policy-info.vue
new file mode 100644
index 000000000..58354e5c7
--- /dev/null
+++ b/src/layouts/policy-info/policy-info.vue
@@ -0,0 +1,77 @@
+<template>
+  <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+    <div class="container-fluid">
+      <div class="row justify-content-center">
+        <div class="col-md-6">
+          <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        </div>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-md-6 col-xl-4">
+          <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",
+    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: {
+        async backButtonAction() {
+        // Stub, for navigating back via nav-bar.
+        },
+        async forwardButtonAction() {
+        // Stub, for navigating forward via nav-bar
+        },
+        arePagePrerequisitesValid() {
+                return true;
+            },
+        },
+};
+</script>
+
diff --git a/src/router/constants/routes.js b/src/router/constants/routes.js
index 5090df2b3..47c37bb55 100644
--- a/src/router/constants/routes.js
+++ b/src/router/constants/routes.js
@@ -51,6 +51,10 @@ export const routeData = {
         name: "quote",
         path: "/quote",
     },
+    POLICY_INFO: {
+        name: "policy-info",
+        path: "/policy-info",
+    },
     INSURANCE_COMPANY: {
         name: "insurance-company",
         path: "/insurance-company",
diff --git a/src/router/constants/routing-table.js b/src/router/constants/routing-table.js
index d5f8e442c..2d2f49a25 100644
--- a/src/router/constants/routing-table.js
+++ b/src/router/constants/routing-table.js
@@ -429,6 +429,10 @@ const routingTable = function () {
                 },
             ],
         },
+        {
+            pageName: routeData.POLICY_INFO.name,
+            maps: [],
+        },
         {
             pageName: routeData.INSURANCE_COMPANY.name,
             maps: [
diff --git a/src/router/methods/routes.js b/src/router/methods/routes.js
index ec6077270..521ba43a1 100644
--- a/src/router/methods/routes.js
+++ b/src/router/methods/routes.js
@@ -41,6 +41,7 @@ export const routes = [
     createRoute(routeData.CONFIRMATION),
     createRoute(routeData.RETURN_USER),
     createRoute(routeData.MOBILE_DETAILS),
+    createRoute(routeData.POLICY_INFO),
 
     // Virtual pages (resolve to a non-virtual page.)
     createVirtualRoute(routeData.LANDING, landingBeforeEnter),