CASH-938 verify details page

CASH-938 verify details page

src/constants/insurance.js

@@ -89,4 +89,5 @@ export const NON_MANAGED_SHOW_CLAIM_NUMBER_PARENTS = [
 export const PARENT_ACCOUNT_NUMBERS = {
     STATE_FARM: "711310",
     USAA: "900040",
+    GEICO: "250034",
 };

src/fmg-components/funnel-sub-header/funnel-sub-header.vue

@@ -39,6 +39,14 @@ export default {
             default: "dark-header",
         },
         alignLeft: Boolean,
+        overrideHeaderText: {
+            type: String,
+            default: "",
+        },
+        overrideHeaderSubText: {
+            type: String,
+            default: "",
+        },
     },
     components: {
         buttonBack,
@@ -48,10 +56,13 @@ export default {
             return this.getCmsContent(this.cmsWidgetName, "HeaderSubText");
         },
         text() {
-            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
+            return this.overrideHeaderText || this.getCmsContent(this.cmsWidgetName, "HeaderText");
         },
         subText() {
-            return this.getCmsContent(this.cmsWidgetName, "HeaderSubText");
+            return (
+                this.overrideHeaderSubText ||
+                this.getCmsContent(this.cmsWidgetName, "HeaderSubText")
+            );
         },
         backButtonAccessibleText() {
             return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText");

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

@@ -8,19 +8,10 @@
         <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"
-                    <textBlock
+                        class="siteSubHeader"
-                        cmsWidgetName="DupCheckPageTitleWidget"
+                        :alignLeft="true" />
-                        typeStyle="h1"
-                        :customText="pageTitleText"
-                        class="mb-5 text-left text-md-left cc-page-title" />
-
-                    <textBlock
-                        cmsWidgetName="DupCheckPageInstructionsWidget"
-                        typeStyle="body"
-                        :customText="pageInstructionsText"
-                        class="mb-5 text-left text-md-left cc-page-instructions" />
 
                     <buttonQuestion
                         :questionText="existingClaimsQuestionText"
@@ -60,7 +51,6 @@
 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 textBlock from "@/digital-components/text-block/text-block";
 import buttonQuestion from "@/digital-components/button-question/button-question";
 import { Form } from "vee-validate";
 
@@ -82,7 +72,6 @@ export default {
         funnelHeader,
         insuranceNavBar,
         funnelSubHeader,
-        textBlock,
         buttonQuestion,
     },
     // Ensure CMS content is fetched during route navigation without depending on `to`/`from`
@@ -116,12 +105,6 @@ export default {
         clientLogoImageSrc() {
             return this.clientConfig?.ClientLogoWidget?.Image || "";
         },
-        pageTitleText() {
-            return this.getCmsContent("DupCheckPageTitleWidget", "Text");
-        },
-        pageInstructionsText() {
-            return this.getCmsContent("DupCheckPageInstructionsWidget", "Text");
-        },
         existingClaimsQuestionText() {
             return this.getCmsContent("ExistingClaimsListWidget", "QuestionText");
         },

src/layouts/endorsements/endorsements.vue

@@ -8,19 +8,10 @@
         <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"
-                    <textBlock
+                        class="siteSubHeader"
-                        cmsWidgetName="EndorsementsPageAdditionalInfoWidget"
+                        :alignLeft="true" />
-                        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"
@@ -64,7 +55,6 @@ 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",
@@ -80,7 +70,6 @@ export default {
         insuranceNavBar,
         funnelSubHeader,
         buttonQuestion,
-        textBlock,
     },
     // Ensure CMS content is fetched during route navigation without depending on `to`/`from`
     async beforeRouteEnter(to, from, next) {
@@ -113,12 +102,6 @@ export default {
         clientLogoImageSrc() {
             return this.clientConfig?.ClientLogoWidget?.Image || "";
         },
-        endorsementHeading() {
-            return this.getCmsContent("EndorsementsPageAdditionalInfoWidget", "Text");
-        },
-        moreDetailsText() {
-            return this.getCmsContent("MoreDetailsWidget", "Text");
-        },
         schoolEndorsementQuestionText() {
             return this.getCmsContent("SchoolEndorsmentQuestionWidget", "QuestionText");
         },

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

@@ -8,19 +8,12 @@
         <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"
-                    <textBlock
+                        class="siteSubHeader pb-4"
-                        cmsWidgetName="PageTitleWidget"
+                        :alignLeft="true"
-                        typeStyle="h1"
+                        :overrideHeaderText="subHeaderTextOverride"
-                        :customText="pageTitleText"
+                        :overrideHeaderSubText="subHeaderSubTextOverride" />
-                        class="mb-5 text-left text-md-left cc-page-title" />
-
-                    <textBlock
-                        cmsWidgetName="PageInstructionsWidget"
-                        typeStyle="body"
-                        :customText="pageInstructionsText"
-                        class="mb-5 text-left text-md-left" />
 
                     <textboxQuestion
                         isRequired
@@ -213,7 +206,6 @@
 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 textBlock from "@/digital-components/text-block/text-block";
 import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
 import datePickerPopup from "@/digital-components/date-picker-popup/date-picker-popup";
 import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
@@ -274,7 +266,6 @@ export default {
         funnelHeader,
         insuranceNavBar,
         funnelSubHeader,
-        textBlock,
         textboxQuestion,
         datePickerPopup,
         dropdownQuestion,
@@ -291,17 +282,11 @@ export default {
         clientLogoImageSrc() {
             return this.clientConfig?.ClientLogoWidget?.Image || "";
         },
-        pageTitleText() {
+        subHeaderTextOverride() {
-            return (
+            return this.clientConfig?.PageTitleOverrideWidget?.Text || "";
-                this.clientConfig?.PageTitleOverrideWidget?.Text ||
-                this.getCmsContent("PageTitleWidget", "Text")
-            );
         },
-        pageInstructionsText() {
+        subHeaderSubTextOverride() {
-            return (
+            return this.clientConfig?.PageInstructionsOverrideWidget?.Text || "";
-                this.clientConfig?.PageInstructionsOverrideWidget?.Text ||
-                this.getCmsContent("PageInstructionsWidget", "Text")
-            );
         },
         isUSAA() {
             return (

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

@@ -4,13 +4,63 @@
             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" />
+                    <funnelSubHeader
-                    <!--
+                        cmsWidgetName="FunnelSubHeaderWidget"
-                            ... Page code goes here.
+                        class="siteSubHeader pb-4"
-                    -->
+                        :alignLeft="true" />
+
+                    <textboxQuestion
+                        isRequired
+                        class="mb-4"
+                        cmsWidgetName="PolicyNumberWidget"
+                        v-model="policyNumber"
+                        inputId="policyNumber"
+                        validationRules="policy-number-required" />
+
+                    <datePickerPopup
+                        v-if="displayDateOfBirth"
+                        isRequired
+                        class="mb-4"
+                        cmsWidgetName="DateOfBirthWidget"
+                        v-model="dateOfBirth"
+                        customInputId="dateOfBirth"
+                        placeholderText="MM/DD/YYYY"
+                        validationRules="date-of-birth-required"
+                        format="MM/dd/yyyy"
+                        modelType="MM/dd/yyyy"
+                        :enableTimePicker="false"
+                        :textInputOnly="true"
+                        :maxDate="today"
+                        :preventMinMaxNavigation="true" />
+
+                    <textboxQuestion
+                        isRequired
+                        class="mb-4"
+                        cmsWidgetName="ZipWidget"
+                        v-model="policyZip"
+                        inputId="policyZip"
+                        maxLength="5"
+                        validationRules="zip-code-required|zip-code-format" />
+
+                    <datePickerPopup
+                        isRequired
+                        class="mb-4"
+                        cmsWidgetName="DateOfLossWidget"
+                        v-model="dateOfLoss"
+                        customInputId="dateOfLoss"
+                        placeholderText="MM/DD/YYYY"
+                        validationRules="date-of-loss-required"
+                        format="MM/dd/yyyy"
+                        modelType="MM/dd/yyyy"
+                        :enableTimePicker="false"
+                        :textInput="true"
+                        :maxDate="today"
+                        :preventMinMaxNavigation="true" />
+
                     <insuranceNavBar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
@@ -28,25 +78,51 @@
 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 { Form } from "vee-validate";
+import datePickerPopup from "@/digital-components/date-picker-popup/date-picker-popup";
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
+import { Form, defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+import { regex } from "@/helpers/validation-rules";
+import { PARENT_ACCOUNT_NUMBERS } from "@/constants/insurance";
 
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
+import { debugLog } from "@/helpers/debug-log-helper";
+import store from "@/store";
+
+// DEFINE VALIDATION RULES
+defineRule("policy-number-required", required(errorMessages.POLICY_NUMBER_REQUIRED));
+defineRule("zip-code-required", required(errorMessages.ZIP_REQUIRED));
+defineRule("zip-code-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT));
+defineRule("date-of-loss-required", required(errorMessages.DATE_OF_LOSS_REQUIRED));
+defineRule("date-of-birth-required", required(errorMessages.DATE_OF_BIRTH_REQUIRED));
 
 export default {
     name: "verify-details",
     mixins: [],
     data() {
-        return {};
+        return {
+            clientConfig: {},
+            policyNumber: this.getPolicyNumberFromStore(),
+            policyZip: this.getPolicyZipFromStore(),
+            dateOfLoss: this.getDateOfLossFromStore(),
+            dateOfBirth: this.getDateOfBirthFromStore(),
+        };
     },
     components: {
         Form,
         funnelHeader,
         insuranceNavBar,
         funnelSubHeader,
+        datePickerPopup,
+        textboxQuestion,
     },
     // 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 = [
@@ -54,10 +130,19 @@ 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(
+                `verify-details clientConfig::${clientConfigPageName}`,
+                JSON.stringify(vm.clientConfig)
+            );
         });
     },
 
@@ -65,9 +150,43 @@ export default {
         clientLogoImageSrc() {
             return this.clientConfig?.ClientLogoWidget?.Image || "";
         },
+        today() {
+            return new Date();
+        },
+        parsedClientConfig() {
+            const raw = this.clientConfig?.ConfigWidget?.Text;
+            if (!raw) return {};
+            try {
+                return JSON.parse(raw);
+            } catch (err) {
+                console.warn("Failed to parse clientConfig.ConfigWidget.Text", err);
+                return {};
+            }
+        },
+        isGeico() {
+            return (
+                store.getters.order?.payment?.parentAccountNumber?.toString() ===
+                PARENT_ACCOUNT_NUMBERS.GEICO
+            );
+        },
+        displayDateOfBirth() {
+            return this.parsedClientConfig.displayDateOfBirth && this.isGeico ? true : false;
+        },
     },
 
     methods: {
+        getPolicyNumberFromStore() {
+            return store.getters.order.policy.policyNumber;
+        },
+        getPolicyZipFromStore() {
+            return store.getters.order.policy.zipCode;
+        },
+        getDateOfLossFromStore() {
+            return store.getters.order.damage.dateOfLoss;
+        },
+        getDateOfBirthFromStore() {
+            return store.getters.order.policy.dateOfBirth;
+        },
         cancelButtonAction() {
             this.$router.navigateWithoutSaving(
                 this.navigationScenarios.CLICKED_CANCEL_VERIFICATION,
@@ -92,3 +211,18 @@ export default {
     },
 };
 </script>
+
+<style lang="scss">
+.cc-page-title {
+    font-size: 20px !important;
+    line-height: 1.325;
+    font-weight: 300;
+    color: $black;
+}
+.cc-page-instructions {
+    font-size: 16px !important;
+    font-weight: 400;
+    color: $gray-600;
+    line-height: 1.625;
+}
+</style>