jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CASH-938 verify details page

Browse source 
CASH-938 verify details page
This commit is contained in:
Carl Nation 2026-06-05 15:22:24 -04:00
parent f1e6d125fc
commit ced43b7c19
6 changed files with 172 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/constants/insurance.js
View file

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

15
src/fmg-components/funnel-sub-header/funnel-sub-header.vue
View file

@ -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");

25
src/layouts/duplicate-check/duplicate-check.vue
View file

@ -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" />
<textBlock
cmsWidgetName="DupCheckPageTitleWidget"
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" />
<funnelSubHeader
cmsWidgetName="FunnelSubHeaderWidget"
class="siteSubHeader"
:alignLeft="true" />
<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");
},

25
src/layouts/endorsements/endorsements.vue
View file

@ -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" />
<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" />
<funnelSubHeader
cmsWidgetName="FunnelSubHeaderWidget"
class="siteSubHeader"
:alignLeft="true" />
<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");
},

35
src/layouts/policy-info/policy-info.vue
View file

@ -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" />
<textBlock
cmsWidgetName="PageTitleWidget"
typeStyle="h1"
:customText="pageTitleText"
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" />
<funnelSubHeader
cmsWidgetName="FunnelSubHeaderWidget"
class="siteSubHeader pb-4"
:alignLeft="true"
:overrideHeaderText="subHeaderTextOverride"
:overrideHeaderSubText="subHeaderSubTextOverride" />
<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() {
return (
this.clientConfig?.PageTitleOverrideWidget?.Text ||
this.getCmsContent("PageTitleWidget", "Text")
);
subHeaderTextOverride() {
return this.clientConfig?.PageTitleOverrideWidget?.Text || "";
},
pageInstructionsText() {
return (
this.clientConfig?.PageInstructionsOverrideWidget?.Text ||
this.getCmsContent("PageInstructionsWidget", "Text")
);
subHeaderSubTextOverride() {
return this.clientConfig?.PageInstructionsOverrideWidget?.Text || "";
},
isUSAA() {
return (

146
src/layouts/verify-details/verify-details.vue
View file

@ -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" />
<!--
... Page code goes here.
-->
<funnelSubHeader
cmsWidgetName="FunnelSubHeaderWidget"
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>