Merge pull request #3202 from Safelite/nation/CASH-632

CASH-632 add endorsements copy to page

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

@@ -1,6 +1,10 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <funnelHeader
+            cmsWidgetName="FunnelHeaderWidget"
+            ref="funnelHeader"
+            :overrideImageSrc="clientLogoImageSrc" />
+        <div class="page-gradient"></div>
         <div class="container">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
@@ -81,7 +85,7 @@ import afterpayBreakout from "../payment-method/afterpay-breakout/afterpay-break
 import modal from "@/digital-components/modal/modal";
 import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal.vue";
 import textBlock from "@/digital-components/text-block/text-block.vue";
-
+import { debugLog } from "@/helpers/debug-log-helper";
 export default {
     name: "coverage-statement",
     mixins: [],
@@ -89,6 +93,7 @@ export default {
         return {
             isClaimAndCoverage: this.isClaimAndCoverageFromStore(),
             isRecalibrationOnOrder: this.isRecalibrationOnOrderFromStore(),
+            clientConfig: {},
         };
     },
     components: {
@@ -107,15 +112,26 @@ export default {
     async beforeRouteEnter(to, from, next) {
         const pageName = to.name;
         const cmsContentPromise = fetchCmsContentForPage(pageName);
+        const clientConfigPageName = `client_${store.getters.order.payment.parentAccountNumber}`;
+        const clientConfigPromise = fetchCmsContentForPage(clientConfigPageName);
         const promiseResultMap = [
             {
                 resultKey: "cmsContent",
                 promise: cmsContentPromise,
             },
+            {
+                resultKey: "clientConfig",
+                promise: clientConfigPromise,
+            },
         ];
         const resultMap = await settleAllPromises(promiseResultMap);
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
+            vm.clientConfig = resultMap.clientConfig;
+            debugLog(
+                `coverage-statement clientConfig::${clientConfigPageName}`,
+                JSON.stringify(vm.clientConfig)
+            );
         });
     },
 
@@ -162,6 +178,9 @@ export default {
         },
     },
     computed: {
+        clientLogoImageSrc() {
+            return this.clientConfig?.ClientLogoWidget?.Image || "";
+        },
         deductibleAmount() {
             return this.$store.getters.order.policy.currentDeductible;
         },

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

@@ -1,6 +1,10 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <funnelHeader
+            cmsWidgetName="FunnelHeaderWidget"
+            ref="funnelHeader"
+            :overrideImageSrc="clientLogoImageSrc" />
+        <div class="page-gradient"></div>
         <div class="container">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
@@ -61,12 +65,16 @@ 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: "duplicate-check",
     mixins: [],
     data() {
-        return {};
+        return {
+            clientConfig: {},
+        };
     },
     components: {
         Form,
@@ -78,6 +86,9 @@ export default {
     },
     // Ensure CMS content is fetched during route navigation without depending on `to`/`from`
     async beforeRouteEnter(to, from, next) {
+        const clientConfigPageName = `client_${store.getters.order.payment.parentAccountNumber}`;
+        const clientConfigPromise = fetchCmsContentForPage(clientConfigPageName);
+
         const pageName = to.name;
         const cmsContentPromise = fetchCmsContentForPage(pageName);
         const promiseResultMap = [
@@ -85,13 +96,25 @@ export default {
                 resultKey: "cmsContent",
                 promise: cmsContentPromise,
             },
+            {
+                resultKey: "clientConfig",
+                promise: clientConfigPromise,
+            },
         ];
         const resultMap = await settleAllPromises(promiseResultMap);
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
+            vm.clientConfig = resultMap.clientConfig;
+            debugLog(
+                `duplicate-check clientConfig::${clientConfigPageName}`,
+                JSON.stringify(vm.clientConfig)
+            );
         });
     },
     computed: {
+        clientLogoImageSrc() {
+            return this.clientConfig?.ClientLogoWidget?.Image || "";
+        },
         pageTitleText() {
             return this.getCmsContent("DupCheckPageTitleWidget", "Text");
         },

src/layouts/endorsements/endorsements.spec.js

@@ -55,13 +55,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: "duplicate-check", query: {}, params: {} },
+        route: { name: "endorsements", query: {}, params: {} },
         router: {
             navigate: jest.fn(),
             navigateWithSaving: jest.fn(),
             navigateWithoutSaving: jest.fn(),
         },
+        mixins: [mockMixin],
     });
 
     const wrapper = shallowMount(endorsements, mountOptions);

src/layouts/endorsements/endorsements.vue

@@ -1,13 +1,45 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <funnelHeader
+            cmsWidgetName="FunnelHeaderWidget"
+            ref="funnelHeader"
+            :overrideImageSrc="clientLogoImageSrc" />
+        <div class="page-gradient"></div>
         <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.
+                    <textBlock
-                    -->
+                        cmsWidgetName="EndorsementsPageAdditionalInfoWidget"
+                        typeStyle="h1"
+                        :customText="endorsementHeading"
+                        class="mb-5 text-left text-md-left page-title" />
+
+                    <textBlock
+                        cmsWidgetName="MoreDetailsWidget"
+                        typeStyle="body"
+                        :customText="moreDetailsText"
+                        class="mb-5 text-left text-md-left page-instructions" />
+
+                    <buttonQuestion
+                        :questionText="schoolEndorsementQuestionText"
+                        :answers="schoolEndorsementAnswers"
+                        class="mb-4"
+                        groupName="schoolEndorsementQuestion"
+                        buttonTypeString="listButton"
+                        isRequired
+                        v-model="schoolEndorsementSelectedValue" />
+
+                    <buttonQuestion
+                        :questionText="parkingLotEndorsementQuestionText"
+                        :answers="parkingLotEndorsementAnswers"
+                        class="mb-4"
+                        groupName="parkingLotEndorsementQuestion"
+                        buttonTypeString="listButton"
+                        isRequired
+                        v-model="parkingLotEndorsementSelectedValue" />
+
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
@@ -28,35 +60,78 @@ 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";
+import buttonQuestion from "@/digital-components/button-question/button-question";
+import textBlock from "@/digital-components/text-block/text-block";
 
 export default {
     name: "endorsements",
     mixins: [],
     data() {
-        return {};
+        return {
+            clientConfig: {},
+        };
     },
     components: {
         Form,
         funnelHeader,
         navbar,
         funnelSubHeader,
+        buttonQuestion,
+        textBlock,
     },
     // 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 clientConfigPageName = `client_${store.getters.order.payment.parentAccountNumber}`;
+        const clientConfigPromise = fetchCmsContentForPage(clientConfigPageName);
         const promiseResultMap = [
             {
                 resultKey: "cmsContent",
                 promise: cmsContentPromise,
             },
+            {
+                resultKey: "clientConfig",
+                promise: clientConfigPromise,
+            },
         ];
         const resultMap = await settleAllPromises(promiseResultMap);
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
+            vm.clientConfig = resultMap.clientConfig;
+            debugLog(
+                `endorsements clientConfig::${clientConfigPageName}`,
+                JSON.stringify(vm.clientConfig)
+            );
         });
     },
 
+    computed: {
+        clientLogoImageSrc() {
+            return this.clientConfig?.ClientLogoWidget?.Image || "";
+        },
+        endorsementHeading() {
+            return this.getCmsContent("EndorsementsPageAdditionalInfoWidget", "Text");
+        },
+        moreDetailsText() {
+            return this.getCmsContent("MoreDetailsWidget", "Text");
+        },
+        schoolEndorsementQuestionText() {
+            return this.getCmsContent("SchoolEndorsmentQuestionWidget", "QuestionText");
+        },
+        schoolEndorsementAnswers() {
+            return this.getCmsContent("SchoolEndorsmentQuestionWidget", "Answers");
+        },
+        parkingLotEndorsementQuestionText() {
+            return this.getCmsContent("ParkingLotQuestionWidget", "QuestionText");
+        },
+        parkingLotEndorsementAnswers() {
+            return this.getCmsContent("ParkingLotQuestionWidget", "Answers");
+        },
+    },
+
     methods: {
         backButtonAction() {
             this.$router.navigateWithoutSaving(
@@ -76,3 +151,18 @@ export default {
     },
 };
 </script>
+<style lang="scss">
+.page-title {
+    font-size: 20px !important;
+    line-height: 1.325;
+    font-weight: 300;
+    color: $black;
+}
+
+.page-instructions {
+    font-size: 16px !important;
+    font-weight: 400;
+    color: $gray-600;
+    line-height: 1.625;
+}
+</style>

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

@@ -1,6 +1,10 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <funnelHeader
+            cmsWidgetName="FunnelHeaderWidget"
+            ref="funnelHeader"
+            :overrideImageSrc="clientLogoImageSrc" />
+        <div class="page-gradient"></div>
         <div class="container">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
@@ -28,12 +32,16 @@ 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: "policy-driver",
     mixins: [],
     data() {
-        return {};
+        return {
+            clientConfig: {},
+        };
     },
     components: {
         Form,
@@ -45,18 +53,35 @@ export default {
     async beforeRouteEnter(to, from, next) {
         const pageName = to.name;
         const cmsContentPromise = fetchCmsContentForPage(pageName);
+        const clientConfigPageName = `client_${store.getters.order.payment.parentAccountNumber}`;
+        const clientConfigPromise = fetchCmsContentForPage(clientConfigPageName);
         const promiseResultMap = [
             {
                 resultKey: "cmsContent",
                 promise: cmsContentPromise,
             },
+            {
+                resultKey: "clientConfig",
+                promise: clientConfigPromise,
+            },
         ];
         const resultMap = await settleAllPromises(promiseResultMap);
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
+            vm.clientConfig = resultMap.clientConfig;
+            debugLog(
+                `policy-driver clientConfig::${clientConfigPageName}`,
+                JSON.stringify(vm.clientConfig)
+            );
         });
     },
 
+    computed: {
+        clientLogoImageSrc() {
+            return this.clientConfig?.ClientLogoWidget?.Image || "";
+        },
+    },
+
     methods: {
         backButtonAction() {
             this.$router.navigateWithoutSaving(

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

@@ -1,6 +1,10 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <funnelHeader
+            cmsWidgetName="FunnelHeaderWidget"
+            ref="funnelHeader"
+            :overrideImageSrc="clientLogoImageSrc" />
+        <div class="page-gradient"></div>
         <div class="container">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
@@ -28,12 +32,16 @@ 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: "policy-info-submitted",
     mixins: [],
     data() {
-        return {};
+        return {
+            clientConfig: {},
+        };
     },
     components: {
         Form,
@@ -45,18 +53,35 @@ export default {
     async beforeRouteEnter(to, from, next) {
         const pageName = to.name;
         const cmsContentPromise = fetchCmsContentForPage(pageName);
+        const clientConfigPageName = `client_${store.getters.order.payment.parentAccountNumber}`;
+        const clientConfigPromise = fetchCmsContentForPage(clientConfigPageName);
         const promiseResultMap = [
             {
                 resultKey: "cmsContent",
                 promise: cmsContentPromise,
             },
+            {
+                resultKey: "clientConfig",
+                promise: clientConfigPromise,
+            },
         ];
         const resultMap = await settleAllPromises(promiseResultMap);
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
+            vm.clientConfig = resultMap.clientConfig;
+            debugLog(
+                `policy-info-submitted clientConfig::${clientConfigPageName}`,
+                JSON.stringify(vm.clientConfig)
+            );
         });
     },
 
+    computed: {
+        clientLogoImageSrc() {
+            return this.clientConfig?.ClientLogoWidget?.Image || "";
+        },
+    },
+
     methods: {
         backButtonAction() {
             this.$router.navigateWithoutSaving(

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

@@ -4,6 +4,7 @@
             cmsWidgetName="FunnelHeaderWidget"
             ref="funnelHeader"
             :overrideImageSrc="clientLogoImageSrc" />
+        <div class="page-gradient"></div>
         <div class="container">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
@@ -424,7 +425,10 @@ export default {
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
             vm.clientConfig = resultMap.clientConfig;
-            debugLog(`clientConfig::${clientConfigPageName}`, JSON.stringify(vm.clientConfig));
+            debugLog(
+                `policy-infoclientConfig::${clientConfigPageName}`,
+                JSON.stringify(vm.clientConfig)
+            );
         });
     },
 

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

@@ -1,6 +1,10 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <funnelHeader
+            cmsWidgetName="FunnelHeaderWidget"
+            ref="funnelHeader"
+            :overrideImageSrc="clientLogoImageSrc" />
+        <div class="page-gradient"></div>
         <div class="container">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
@@ -43,6 +47,7 @@ import store from "@/store";
 import buttonMain from "@/ux-components/button-main/button-main";
 import textLink from "@/ux-components/text-link/text-link.vue";
 import { parentAccountNumbers } from "@/constants/insurance";
+import { debugLog } from "@/helpers/debug-log-helper";
 
 import { Form } from "vee-validate";
 
@@ -53,7 +58,9 @@ export default {
     name: "policy-vehicle",
     mixins: [],
     data() {
-        return {};
+        return {
+            clientConfig: {},
+        };
     },
     components: {
         Form,
@@ -67,19 +74,33 @@ export default {
     async beforeRouteEnter(to, from, next) {
         const pageName = to.name;
         const cmsContentPromise = fetchCmsContentForPage(pageName);
+        const clientConfigPageName = `client_${store.getters.order.payment.parentAccountNumber}`;
+        const clientConfigPromise = fetchCmsContentForPage(clientConfigPageName);
         const promiseResultMap = [
             {
                 resultKey: "cmsContent",
                 promise: cmsContentPromise,
             },
+            {
+                resultKey: "clientConfig",
+                promise: clientConfigPromise,
+            },
         ];
         const resultMap = await settleAllPromises(promiseResultMap);
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
+            vm.clientConfig = resultMap.clientConfig;
+            debugLog(
+                `policy-vehicle clientConfig::${clientConfigPageName}`,
+                JSON.stringify(vm.clientConfig)
+            );
         });
     },
 
     computed: {
+        clientLogoImageSrc() {
+            return this.clientConfig?.ClientLogoWidget?.Image || "";
+        },
         vehicleNotListedQuestionText() {
             return this.getCmsContent("VehicleNotListedWidget", "Text");
         },

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

@@ -1,6 +1,10 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <funnelHeader
+            cmsWidgetName="FunnelHeaderWidget"
+            ref="funnelHeader"
+            :overrideImageSrc="clientLogoImageSrc" />
+        <div class="page-gradient"></div>
         <div class="container">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
@@ -28,12 +32,15 @@ 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 {};
+        return {
+            clientConfig: {},
+        };
     },
     components: {
         Form,
@@ -45,18 +52,35 @@ export default {
     async beforeRouteEnter(to, from, next) {
         const pageName = to.name;
         const cmsContentPromise = fetchCmsContentForPage(pageName);
+        const clientConfigPageName = `client_${store.getters.order.payment.parentAccountNumber}`;
+        const clientConfigPromise = fetchCmsContentForPage(clientConfigPageName);
         const promiseResultMap = [
             {
                 resultKey: "cmsContent",
                 promise: cmsContentPromise,
             },
+            {
+                resultKey: "clientConfig",
+                promise: clientConfigPromise,
+            },
         ];
         const resultMap = await settleAllPromises(promiseResultMap);
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
+            vm.clientConfig = resultMap.clientConfig;
+            debugLog(
+                `recalibration-info clientConfig::${clientConfigPageName}`,
+                JSON.stringify(vm.clientConfig)
+            );
         });
     },
 
+    computed: {
+        clientLogoImageSrc() {
+            return this.clientConfig?.ClientLogoWidget?.Image || "";
+        },
+    },
+
     methods: {
         backButtonAction() {
             this.$router.navigateWithoutSaving(

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

@@ -1,6 +1,9 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <funnelHeader
+            cmsWidgetName="FunnelHeaderWidget"
+            ref="funnelHeader"
+            :overrideImageSrc="clientLogoImageSrc" />
         <div class="container">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
@@ -57,6 +60,12 @@ export default {
         });
     },
 
+    computed: {
+        clientLogoImageSrc() {
+            return this.clientConfig?.ClientLogoWidget?.Image || "";
+        },
+    },
+
     methods: {
         backButtonAction() {
             this.$router.navigateWithoutSaving(

src/styles/common-styles.scss

@@ -102,3 +102,8 @@ option,
 .btn {
     letter-spacing: 0.03rem;
 }
+
+.page-gradient {
+    height: 12px;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0));
+}