CASH-2467 recal info page content

CASH-2467 recal info page content

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

@@ -55,6 +55,15 @@ function setupMocks() {
     fetchCmsContentForPage.mockResolvedValue(mockCmsContent);
     settleAllPromises.mockResolvedValue({ cmsContent: mockCmsContent });
 
+    const mockMixin = {
+        methods: {
+            getCmsContent: jest.fn((widgetName, fieldName) => {
+                return mockCmsContent?.[widgetName]?.[fieldName] ?? "";
+            }),
+            setCmsContent: jest.fn(),
+        },
+    };
+
     const mountOptions = getMountOptions({
         route: { name: "policy-driver", query: {}, params: {} },
         router: {
@@ -62,6 +71,7 @@ function setupMocks() {
             navigateWithSaving: jest.fn(),
             navigateWithoutSaving: jest.fn(),
         },
+        mixins: [mockMixin],
     });
 
     const wrapper = shallowMount(policyDriver, mountOptions);

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

@@ -28,7 +28,7 @@ describe("recalibration-info.vue", () => {
 
         test("renders navbar component", () => {
             const { wrapper } = setupMocks();
-            expect(wrapper.findComponent({ name: "insuranceNavBar" }).exists()).toBe(true);
+            expect(wrapper.findComponent({ name: "navbar" }).exists()).toBe(true);
         });
 
         test("renders Form component", () => {

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

@@ -8,15 +8,34 @@
         <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.
-                    -->
-                    <insuranceNavBar
+                    <funnelSubHeader
+                        cmsWidgetName="FunnelSubHeaderWidget"
+                        class="siteSubHeader mb-4"
+                        :alignLeft="true" />
+
+                    <img
+                        :src="recalibrationInfoDesktopImage"
+                        alt=""
+                        class="recal-image recal-image--desktop mb-4" />
+                    <img
+                        :src="recalibrationInfoMobileImage"
+                        alt=""
+                        class="recal-image recal-image--mobile mb-4" />
+
+                    <div class="adas-body-text mb-7" v-html="adasBodyText"></div>
+
+                    <hr class="mb-5" />
+
+                    <saveProgressModalQuestion
+                        modalWidgetName="SaveProgressModalWidget"
+                        modalName="SaveProgressModal"
+                        v-if="showSaveProgressModal"
+                        pageName="recalibration-info" />
+
+                    <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
                         :isForwardActionDisabled="!meta.valid"
-                        @cancel-clicked="cancelButtonAction"
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
                 </div>
@@ -27,27 +46,34 @@
 
 <script>
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import insuranceNavBar from "@/fmg-components/insurance-nav-bar/insurance-nav-bar";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
 import { Form } from "vee-validate";
 
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import store from "@/store";
 import { debugLog } from "@/helpers/debug-log-helper";
+
 export default {
     name: "recalibration-info",
     mixins: [],
     data() {
         return {
             clientConfig: {},
+            recalibrationInfoDesktopImage: "",
+            recalibrationInfoMobileImage: "",
+            adasBodyText: "",
+            showSaveProgressModal: null,
         };
     },
     components: {
         Form,
         funnelHeader,
-        insuranceNavBar,
+        navbar,
         funnelSubHeader,
+        saveProgressModalQuestion,
     },
     // Ensure CMS content is fetched during route navigation without depending on `to`/`from`
     async beforeRouteEnter(to, from, next) {
@@ -66,9 +92,15 @@ export default {
             },
         ];
         const resultMap = await settleAllPromises(promiseResultMap);
+        const emailFromStore = store.getters.order.customer.emailAddress;
+        const showSaveProgressModal = !(emailFromStore?.length > 0);
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
             vm.clientConfig = resultMap.clientConfig;
+            vm.showSaveProgressModal = showSaveProgressModal;
+            vm.recalibrationInfoDesktopImage = vm.getCmsContent("AdasInfoDesktopWidget", "Image");
+            vm.recalibrationInfoMobileImage = vm.getCmsContent("AdasInfoMobileWidget", "Image");
+            vm.adasBodyText = vm.getCmsContent("AdasInfoDesktopWidget", "BodyText");
             debugLog(
                 `recalibration-info clientConfig::${clientConfigPageName}`,
                 JSON.stringify(vm.clientConfig)
@@ -83,12 +115,6 @@ export default {
     },
 
     methods: {
-        cancelButtonAction() {
-            this.$router.navigateWithoutSaving(
-                this.navigationScenarios.CLICKED_CANCEL_VERIFICATION,
-                this.pageName
-            );
-        },
         backButtonAction() {
             this.$router.navigateWithoutSaving(
                 this.navigationScenarios.CLICKED_BACK,
@@ -107,3 +133,22 @@ export default {
     },
 };
 </script>
+
+<style lang="scss" scoped>
+// Both images are rendered; CSS swaps them at the md breakpoint so no JS
+// resize listeners are needed.
+.recal-image--desktop {
+    display: none;
+}
+.recal-image--mobile {
+    display: block;
+}
+@include media-breakpoint-up(md) {
+    .recal-image--desktop {
+        display: block;
+    }
+    .recal-image--mobile {
+        display: none;
+    }
+}
+</style>