CASH-2468 - add policy info fields
CASH-2468 - add policy info fields
This commit is contained in:
CarlNation
parent
c36efe0ae4
commit
cb7705271d
5 changed files with 357 additions and 9 deletions
|
|
@ -82,3 +82,7 @@ export function coverageTypeEnum(strCoverageType) {
|
|||
export const NON_MANAGED_SHOW_CLAIM_NUMBER_PARENTS = [
|
||||
{ name: "KentuckyFarmBureau", value: "223499" },
|
||||
];
|
||||
|
||||
export const PARENT_ACCOUNT_NUMBERS = {
|
||||
STATE_FARM: "711310",
|
||||
};
|
||||
|
|
@ -5,8 +5,17 @@
|
|||
</div>
|
||||
<div class="container d-flex">
|
||||
<div class="site-logo">
|
||||
<a href="https://safelite.com">
|
||||
<img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
|
||||
<a
|
||||
:href="overrideImageSrc ? null : 'https://safelite.com'"
|
||||
:class="{ 'pe-none': !!overrideImageSrc }"
|
||||
:tabindex="overrideImageSrc ? -1 : null"
|
||||
:aria-disabled="!!overrideImageSrc"
|
||||
@click="overrideImageSrc && $event.preventDefault()">
|
||||
<img
|
||||
class="logo-image img-fluid"
|
||||
:class="{ 'logo-image--override': !!overrideImageSrc }"
|
||||
:src="imageSrc"
|
||||
alt="Safelite logo" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="button-container webchat">
|
||||
|
|
@ -69,6 +78,10 @@ export default {
|
|||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
overrideImageSrc: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const { webchatGlobalNonpersistedState, launchWebchat } = webchatHelper();
|
||||
|
|
@ -76,7 +89,7 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
imageSrc() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "LogoImage");
|
||||
return this.overrideImageSrc || this.getCmsContent(this.cmsWidgetName, "LogoImage");
|
||||
},
|
||||
shouldShowWebchatButton() {
|
||||
return this.webchatGlobalNonpersistedState.showWebchatButton;
|
||||
|
|
@ -199,6 +212,13 @@ export default {
|
|||
@include media-breakpoint-up(md) {
|
||||
width: 165px;
|
||||
}
|
||||
|
||||
&--override {
|
||||
width: 200px;
|
||||
@include media-breakpoint-up(md) {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.webchat {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,76 @@
|
|||
<template>
|
||||
<div class="more-policy-questions">
|
||||
<buttonQuestion
|
||||
:questionText="questionText"
|
||||
isMultiSelect
|
||||
:answers="answersToDisplay"
|
||||
:groupName="groupName"
|
||||
buttonTypeString="checkbox"
|
||||
isRequired
|
||||
v-model="selectedValues" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import buttonQuestion from "@/digital-components/button-question/button-question";
|
||||
import store from "@/store";
|
||||
import { PARENT_ACCOUNT_NUMBERS } from "@/constants/insurance";
|
||||
|
||||
const STATE_FARM_ONLY_ANSWER_NAMES = new Set(["ThirdPartyVehicle", "Injuries"]);
|
||||
const HIDDEN_FOR_STATE_FARM_ANSWER_NAMES = new Set(["OtherResponsibleParty"]);
|
||||
|
||||
export default {
|
||||
name: "morePolicyQuestions",
|
||||
props: {
|
||||
modelValue: Array,
|
||||
groupName: String,
|
||||
cmsWidgetName: String,
|
||||
},
|
||||
computed: {
|
||||
questionText() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
|
||||
},
|
||||
answersFromCms() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "Answers");
|
||||
},
|
||||
isStateFarm() {
|
||||
return (
|
||||
store.getters.order?.payment?.parentAccountNumber?.toString() ===
|
||||
PARENT_ACCOUNT_NUMBERS.STATE_FARM
|
||||
);
|
||||
},
|
||||
answersToDisplay() {
|
||||
if (!Array.isArray(this.answersFromCms)) return [];
|
||||
return this.answersFromCms.filter((ans) => {
|
||||
if (STATE_FARM_ONLY_ANSWER_NAMES.has(ans?.Name)) {
|
||||
return this.isStateFarm;
|
||||
}
|
||||
if (HIDDEN_FOR_STATE_FARM_ANSWER_NAMES.has(ans?.Name)) {
|
||||
return !this.isStateFarm;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
},
|
||||
selectedValues: {
|
||||
get() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set(newValue) {
|
||||
this.$emit("update:modelValue", newValue);
|
||||
},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
buttonQuestion,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.more-policy-questions {
|
||||
.ui-checkbox {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,13 +1,117 @@
|
|||
<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">
|
||||
<funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
|
||||
<!--
|
||||
... Page code goes here.
|
||||
-->
|
||||
|
||||
<textBlock
|
||||
cmsWidgetName="PageTitleWidget"
|
||||
typeStyle="h1"
|
||||
:customText="pageTitleText"
|
||||
class="mb-5 text-left text-md-left cc-page-title" />
|
||||
|
||||
<textBlock
|
||||
cmsWidgetName="PageInstructionsWidget"
|
||||
typeStyle="body"
|
||||
class="mb-5 text-left text-md-left" />
|
||||
|
||||
<textboxQuestion
|
||||
isRequired
|
||||
class="mb-4"
|
||||
cmsWidgetName="PolicyNumberWidget"
|
||||
v-model="policyNumber"
|
||||
inputId="policyNumber"
|
||||
validationRules="policy-number-required" />
|
||||
|
||||
<textboxQuestion
|
||||
isRequired
|
||||
class="mb-4"
|
||||
cmsWidgetName="ZipWidget"
|
||||
v-model="policyZip"
|
||||
inputId="policyZip"
|
||||
maxLength="5"
|
||||
validationRules="zip-code-required|zip-code-format" />
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-8">
|
||||
<textboxQuestion
|
||||
isRequired
|
||||
class="mb-4"
|
||||
cmsWidgetName="PhoneWidget"
|
||||
v-model="phoneNumber"
|
||||
inputId="phoneNumber"
|
||||
validationRules="phone-number-required" />
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<textboxQuestion
|
||||
isRequired
|
||||
class="mb-4"
|
||||
cmsWidgetName="PhoneExtensionWidget"
|
||||
v-model="phoneExtension"
|
||||
inputId="phoneExtension" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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" />
|
||||
|
||||
<dropdownQuestion
|
||||
isRequired
|
||||
:questionText="damageTypesQuestionText"
|
||||
class="mb-4"
|
||||
v-model="damageCause"
|
||||
cmsWidgetName="DamageTypesWidget"
|
||||
customDropdownId="damageTypes"
|
||||
:options="damageTypesOptions"
|
||||
:valueAsKey="true"
|
||||
validationRules="damage-types-required"
|
||||
:labelBold="true" />
|
||||
|
||||
<dropdownQuestion
|
||||
class="mb-4"
|
||||
customDropdownId="policyState"
|
||||
cmsWidgetName="StateQuestionWidget"
|
||||
v-model="policyState"
|
||||
ref="policyState"
|
||||
:options="stateOptions"
|
||||
validationRules="state-required"
|
||||
autocomplete="address-level1"
|
||||
placeHolderText="Select State"
|
||||
:labelBold="true" />
|
||||
|
||||
<textboxQuestion
|
||||
isRequired
|
||||
class="mb-4"
|
||||
cmsWidgetName="CityWidget"
|
||||
v-model="city"
|
||||
inputId="city"
|
||||
validationRules="city-required" />
|
||||
|
||||
<hr class="mt-4 mb-0" />
|
||||
|
||||
<morePolicyQuestions
|
||||
ref="morePolicyQuestions"
|
||||
cmsWidgetName="MorePolicyQuestionsWidget"
|
||||
v-model="morePolicyQuestions"
|
||||
groupName="MorePolicyQuestionsQuestion" />
|
||||
|
||||
<navbar
|
||||
cmsWidgetName="FunnelFooterWidget"
|
||||
ref="navbar"
|
||||
|
|
@ -24,25 +128,90 @@
|
|||
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
|
||||
import navbar from "@/fmg-components/nav-bar/nav-bar";
|
||||
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
|
||||
import { Form } from "vee-validate";
|
||||
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";
|
||||
import morePolicyQuestions from "@/layouts/policy-info/more-policy-questions/more-policy-questions";
|
||||
import { stateOptions } from "@/constants/state-options";
|
||||
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 { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
import store from "@/store";
|
||||
|
||||
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("phone-number-required", required(errorMessages.PHONE_REQUIRED));
|
||||
defineRule("date-of-loss-required", required(errorMessages.DATE_OF_LOSS_REQUIRED));
|
||||
defineRule("damage-types-required", required(errorMessages.DAMAGE_TYPES_REQUIRED));
|
||||
defineRule("state-required", required(errorMessages.STATE_REQUIRED));
|
||||
defineRule("city-required", required(errorMessages.CITY_REQUIRED));
|
||||
|
||||
export default {
|
||||
name: "policy-info",
|
||||
mixins: [],
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
clientConfig: {},
|
||||
policyNumber: this.getPolicyNumberFromStore(),
|
||||
policyZip: this.getPolicyZipFromStore(),
|
||||
phoneNumber: this.getPhoneNumberFromStore(),
|
||||
phoneExtension: this.getPhoneExtensionFromStore(),
|
||||
dateOfLoss: this.getDateOfLossFromStore(),
|
||||
damageCause: this.getDamageCauseFromStore(),
|
||||
policyState: this.getPolicyStateFromStore(),
|
||||
city: this.getCityFromStore(),
|
||||
morePolicyQuestions: [],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Form,
|
||||
funnelHeader,
|
||||
navbar,
|
||||
funnelSubHeader,
|
||||
textBlock,
|
||||
textboxQuestion,
|
||||
datePickerPopup,
|
||||
dropdownQuestion,
|
||||
morePolicyQuestions,
|
||||
},
|
||||
computed: {
|
||||
stateOptions() {
|
||||
return stateOptions;
|
||||
},
|
||||
today() {
|
||||
return new Date();
|
||||
},
|
||||
clientLogoImageSrc() {
|
||||
return this.clientConfig?.ClientLogoWidget?.Image || "";
|
||||
},
|
||||
pageTitleText() {
|
||||
return this.clientConfig?.PageTitleOverrideWidget?.Text || this.getCmsContent("PageTitleWidget", "Text");
|
||||
},
|
||||
damageTypesQuestionText() {
|
||||
return this.getCmsContent("DamageTypesWidget", "QuestionText");
|
||||
},
|
||||
damageTypesOptions() {
|
||||
const options = {};
|
||||
|
||||
const answers = this.getCmsContent("DamageTypesWidget", "Answers");
|
||||
for (const answer of answers) {
|
||||
options[answer.Name] = answer.Text;
|
||||
}
|
||||
|
||||
return options;
|
||||
},
|
||||
},
|
||||
// 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 = [
|
||||
|
|
@ -50,14 +219,43 @@ 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;
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
getPolicyNumberFromStore() {
|
||||
return store.getters.order.policy.policyNumber;
|
||||
},
|
||||
getPolicyZipFromStore() {
|
||||
return store.getters.order.policy.zipCode;
|
||||
},
|
||||
getPhoneNumberFromStore() {
|
||||
return store.getters.order.policy.phoneNumber;
|
||||
},
|
||||
getPhoneExtensionFromStore() {
|
||||
return store.getters.order.policy.phoneExtension;
|
||||
},
|
||||
getDateOfLossFromStore() {
|
||||
return store.getters.order.damage.dateOfLoss;
|
||||
},
|
||||
getDamageCauseFromStore() {
|
||||
return store.getters.order.damage.damageCause;
|
||||
},
|
||||
getPolicyStateFromStore() {
|
||||
return store.getters.order.policy.state;
|
||||
},
|
||||
getCityFromStore() {
|
||||
return store.getters.order.policy.city;
|
||||
},
|
||||
backButtonAction() {
|
||||
this.$router.navigateWithoutSaving(
|
||||
this.navigationScenarios.CLICKED_BACK,
|
||||
|
|
@ -65,6 +263,29 @@ export default {
|
|||
);
|
||||
},
|
||||
async forwardButtonAction() {
|
||||
this.dispatchStoreAction(
|
||||
this.storeActions.SAVE_INSURANCE_DETAILS,
|
||||
{
|
||||
policyNumber: this.policyNumber,
|
||||
zipCode: this.policyZip,
|
||||
phoneNumber: this.phoneNumber,
|
||||
phoneExtension: this.phoneExtension,
|
||||
state: this.policyState,
|
||||
city: this.city,
|
||||
morePolicyQuestions: this.morePolicyQuestions,
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
this.dispatchStoreAction(
|
||||
this.storeActions.SAVE_DAMAGE_DETAILS,
|
||||
{
|
||||
dateOfLoss: this.dateOfLoss,
|
||||
damageCause: this.damageCause,
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
this.$router.navigateWithSaving(
|
||||
this.navigationScenarios.CLICKED_FORWARD,
|
||||
this.pageName
|
||||
|
|
@ -76,3 +297,19 @@ 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>
|
||||
|
|
@ -175,6 +175,8 @@ const getDefaultState = () => {
|
|||
additionalAuthFlag: null,
|
||||
isNoComp: false,
|
||||
insuranceCompanyName: null,
|
||||
phoneNumber: null,
|
||||
phoneExtension: null,
|
||||
streetAddress: null,
|
||||
apartment: null,
|
||||
city: null,
|
||||
|
|
@ -341,6 +343,12 @@ export const mutations = {
|
|||
state.order.payment.accountName = accountName;
|
||||
state.order.policy.insuranceCompanyName = accountName;
|
||||
},
|
||||
updatePhoneNumber(state, phoneNumber) {
|
||||
state.order.policy.phoneNumber = phoneNumber;
|
||||
},
|
||||
updatePhoneExtension(state, phoneExtension) {
|
||||
state.order.policy.phoneExtension = phoneExtension;
|
||||
},
|
||||
updateStreetAddress(state, streetAddress) {
|
||||
state.order.policy.streetAddress = streetAddress;
|
||||
},
|
||||
|
|
@ -548,6 +556,9 @@ export const mutations = {
|
|||
state.order.policy.state = insuranceDetails.state;
|
||||
state.order.policy.zipCode = insuranceDetails.zipCode;
|
||||
state.order.policy.claimNumber = insuranceDetails.claimNumber;
|
||||
state.order.policy.phoneNumber = insuranceDetails.phoneNumber;
|
||||
state.order.policy.phoneExtension = insuranceDetails.phoneExtension;
|
||||
state.order.policy.morePolicyQuestions = insuranceDetails.morePolicyQuestions;
|
||||
}
|
||||
},
|
||||
updateDamageDetails(state, damageDetails) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue