Merge pull request #3212 from Safelite/nation/CASH-940

Nation/cash 940

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/policy-driver/policy-driver.vue

@@ -8,10 +8,20 @@
         <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" />
+                    <funnelSubHeader
-                    <!--
+                        cmsWidgetName="FunnelSubHeaderWidget"
-                            ... Page code goes here.
+                        class="siteSubHeader mb-4"
-                    -->
+                        :alignLeft="true" />
+
+                    <buttonQuestion
+                        :questionText="driverSelectionText"
+                        :answers="driverSelectionAnswers"
+                        class="mb-4"
+                        groupName="driverQuestion"
+                        buttonTypeString="listButton"
+                        isRequired
+                        v-model="driverSelectionValue" />
+
                     <insuranceNavBar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
@@ -29,6 +39,7 @@
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import insuranceNavBar from "@/fmg-components/insurance-nav-bar/insurance-nav-bar";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import buttonQuestion from "@/digital-components/button-question/button-question";
 import { Form } from "vee-validate";
 
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -49,6 +60,7 @@ export default {
         funnelHeader,
         insuranceNavBar,
         funnelSubHeader,
+        buttonQuestion,
     },
     // Ensure CMS content is fetched during route navigation without depending on `to`/`from`
     async beforeRouteEnter(to, from, next) {
@@ -81,6 +93,12 @@ export default {
         clientLogoImageSrc() {
             return this.clientConfig?.ClientLogoWidget?.Image || "";
         },
+        driverSelectionText() {
+            return this.getCmsContent("DriverSelectionWidget", "QuestionText");
+        },
+        driverSelectionAnswers() {
+            return this.getCmsContent("DriverSelectionWidget", "Answers");
+        },
     },
 
     methods: {

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

@@ -26,11 +26,6 @@ describe("policy-info-submitted.vue", () => {
             expect(wrapper.findComponent({ name: "funnelSubHeader" }).exists()).toBe(true);
         });
 
-        test("renders navbar component", () => {
-            const { wrapper } = setupMocks();
-            expect(wrapper.findComponent({ name: "insuranceNavBar" }).exists()).toBe(true);
-        });
-
         test("renders Form component", () => {
             const { wrapper } = setupMocks();
             expect(wrapper.findComponent({ name: "Form" }).exists()).toBe(true);
@@ -55,13 +50,23 @@ 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-vehicle", query: {}, params: {} },
+        route: { name: "endorsements", query: {}, params: {} },
         router: {
             navigate: jest.fn(),
             navigateWithSaving: jest.fn(),
             navigateWithoutSaving: jest.fn(),
         },
+        mixins: [mockMixin],
     });
 
     const wrapper = shallowMount(policyInfoSubmitted, mountOptions);

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

@@ -1,5 +1,5 @@
 <template>
-    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
         <funnelHeader
             cmsWidgetName="FunnelHeaderWidget"
             ref="funnelHeader"
@@ -8,17 +8,25 @@
         <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" />
+                    <funnelSubHeader
-                    <!--
+                        cmsWidgetName="FunnelSubHeaderWidget"
-                            ... Page code goes here.
+                        class="siteSubHeader pb-4"
-                    -->
+                        :alignLeft="true" />
-                    <insuranceNavBar
+
-                        cmsWidgetName="FunnelFooterWidget"
+                    <buttonMain
-                        ref="navbar"
+                        ref="buttonMain"
-                        :isForwardActionDisabled="!meta.valid"
+                        class="mb-3"
-                        @cancel-clicked="cancelButtonAction"
+                        isPrimary
-                        @back-clicked="backButtonAction"
+                        :buttonText="ContinueButtonCopy"
-                        @ForwardClicked="forwardButtonAction" />
+                        loaderColor="white"
+                        :aria-disabled="false"
+                        :isDisabled="false"
+                        @click-event="forwardButtonAction" />
+
+                    <span
+                        v-if="displayDisclaimerText"
+                        class="d-block mb-5 disclaimer-text"
+                        v-html="disclaimerText"></span>
                 </div>
             </div>
         </div>
@@ -27,8 +35,9 @@
 
 <script>
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import insuranceNavBar from "@/fmg-components/insurance-nav-bar/insurance-nav-bar";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import { parentAccountNumbers } from "@/constants/insurance";
+import buttonMain from "@/ux-components/button-main/button-main";
 import { Form } from "vee-validate";
 
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -46,8 +55,8 @@ export default {
     },
     components: {
         Form,
+        buttonMain,
         funnelHeader,
-        insuranceNavBar,
         funnelSubHeader,
     },
     // Ensure CMS content is fetched during route navigation without depending on `to`/`from`
@@ -81,23 +90,23 @@ export default {
         clientLogoImageSrc() {
             return this.clientConfig?.ClientLogoWidget?.Image || "";
         },
+        ContinueButtonCopy() {
+            return this.getCmsContent("ContinueButtonWidget", "QuestionText");
+        },
+        disclaimerText() {
+            return this.clientConfig?.DisclaimerWidget?.Text;
+        },
+        displayDisclaimerText() {
+            return this.disclaimerText !== null && this.disclaimerText !== "";
+        },
+        parentAccountNumbers() {
+            return parentAccountNumbers;
+        },
     },
 
     methods: {
-        cancelButtonAction() {
+        forwardButtonAction() {
             this.$router.navigateWithoutSaving(
-                this.navigationScenarios.CLICKED_CANCEL_VERIFICATION,
-                this.pageName
-            );
-        },
-        backButtonAction() {
-            this.$router.navigateWithoutSaving(
-                this.navigationScenarios.CLICKED_BACK,
-                this.pageName
-            );
-        },
-        async forwardButtonAction() {
-            this.$router.navigateWithSaving(
                 this.navigationScenarios.CLICKED_FORWARD,
                 this.pageName
             );
@@ -108,3 +117,12 @@ export default {
     },
 };
 </script>
+
+<style lang="scss">
+.disclaimer-text {
+    font-size: 12px !important;
+    font-weight: 400;
+    color: $gray-600;
+    line-height: 1.625;
+}
+</style>

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

@@ -25,7 +25,10 @@
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
 
-                    <div v-if="showAmFamDisclaimer" v-html="amFamDisclaimerWidget"></div>
+                    <span
+                        v-if="displayDisclaimerText"
+                        class="d-block mb-5 disclaimer-text"
+                        v-html="disclaimerText"></span>
                 </div>
             </div>
         </div>
@@ -95,11 +98,11 @@ export default {
         vehicleNotListedQuestionText() {
             return this.getCmsContent("VehicleNotListedWidget", "Text");
         },
-        amFamDisclaimerWidget() {
+        disclaimerText() {
-            return this.getCmsContent("AmFamDisclaimerWidget", "Text");
+            return this.clientConfig?.DisclaimerWidget?.Text;
         },
-        showAmFamDisclaimer() {
+        displayDisclaimerText() {
-            return this.parentAccountNumberFromStore() === this.parentAccountNumbers.CONNECT;
+            return this.disclaimerText !== null && this.disclaimerText !== "";
         },
         parentAccountNumbers() {
             return parentAccountNumbers;
@@ -140,4 +143,11 @@ export default {
     background-color: $blue;
     color: $white;
 }
+
+.disclaimer-text {
+    font-size: 12px !important;
+    font-weight: 400;
+    color: $gray-600;
+    line-height: 1.625;
+}
 </style>

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" />
+                    <funnelSubHeader
-                    <!--
+                        cmsWidgetName="FunnelSubHeaderWidget"
-                            ... Page code goes here.
+                        class="siteSubHeader mb-4"
-                    -->
+                        :alignLeft="true" />
-                    <insuranceNavBar
+
+                    <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>