validation updates.
This commit is contained in:
Bill Richardson
parent
7c946ab114
commit
51e612d50a
2 changed files with 67 additions and 12 deletions
|
|
@ -32,17 +32,21 @@ const errorMessages = Object.freeze({
|
|||
OPTION_REQUIRED: 'Please select an option',
|
||||
VEHICLE_REQUIRED: 'Please select a vehicle',
|
||||
POLICY_NUMBER_REQUIRED: 'Please enter your policy number',
|
||||
POLICY_NUMBER_FORMAT: 'Please enter an alpha-numeric string',
|
||||
PHONE_NUMBER_REQUIRED: 'Please enter phone number',
|
||||
PHONE_NUMBER_FORMAT: 'Please enter your phone number. The format must be ###-###-####',
|
||||
POLICY_ZIP_REQUIRED: 'Please enter your policy ZIP',
|
||||
POLICY_ZIP_FORMAT: 'Please enter a valid ZIP',
|
||||
LOSS_CAUSE_REQUIRED: 'Please enter loss cause',
|
||||
LOSS_CITY_REQUIRED: 'Please enter a city',
|
||||
LOSS_CITY_FORMAT: 'Please enter only alpha characters',
|
||||
LOSS_STATE_REQUIRED: 'Please select an option',
|
||||
LOSS_DATE_REQUIRED:
|
||||
'Please select a date. Format must be MM/DD/YYYY and the date must be not in the future',
|
||||
DAMAGE_DATE_REQUIREMENT:
|
||||
'Damage date must be within the past 10 years',
|
||||
DAMAGE_DATE_NO_FUTURE_DATE:
|
||||
'Damage date may not be in the future',
|
||||
DAMAGE_OPTION_REQUIRED: 'Please select an option',
|
||||
|
||||
POLICYHOLDER_FIRST_NAME_REQUIRED: 'Please enter the policyholder first name',
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@
|
|||
cmsWidgetName="PhoneNumberQuestion"
|
||||
:validationRules="rules.phoneNumber"
|
||||
isRequired
|
||||
mask="###-###-####"
|
||||
:mask="mask"
|
||||
disableAutoFill />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -153,7 +153,15 @@
|
|||
id="welcomeFooter"
|
||||
class="row position-sticky top-100">
|
||||
<div class="col">
|
||||
<alert
|
||||
v-if="displayInvalidZipAlert"
|
||||
ref="alertInvalidZip"
|
||||
class="my-4"
|
||||
cmsWidgetName="AlertInvalidZipWidget"
|
||||
alertClass="alert-danger"
|
||||
:isDismissible="false" />
|
||||
<siteFooter
|
||||
ref="siteFooter"
|
||||
class="mt-3"
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
|
|
@ -173,6 +181,7 @@ import { Form, defineRule } from 'vee-validate';
|
|||
import siteHeader from '@/iss-components/site-header/site-header.vue';
|
||||
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
|
||||
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
|
||||
import alert from '@/ux-components/alert/alert.vue';
|
||||
import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
|
||||
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
|
||||
import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
|
||||
|
|
@ -192,7 +201,15 @@ import routerParams from '@/router/router-constants/router-params';
|
|||
// define validation rules
|
||||
defineRule('loss-date-required', required(errorMessages.LOSS_DATE_REQUIRED));
|
||||
defineRule('policy-number-required', required(errorMessages.POLICY_NUMBER_REQUIRED));
|
||||
defineRule(
|
||||
'policy-number-format',
|
||||
regex(/^~?[a-zA-Z0-9]+$/, errorMessages.POLICY_NUMBER_FORMAT)
|
||||
);
|
||||
defineRule('loss-state-required', required(errorMessages.LOSS_STATE_REQUIRED));
|
||||
defineRule(
|
||||
'loss-city-format',
|
||||
regex(/^[a-zA-Z .]+$/, errorMessages.LOSS_CITY_FORMAT)
|
||||
);
|
||||
defineRule('loss-city-required', required(errorMessages.LOSS_CITY_REQUIRED));
|
||||
defineRule('damage-option-required', required(errorMessages.DAMAGE_OPTION_REQUIRED));
|
||||
defineRule('policy-zip-required', required(errorMessages.POLICY_ZIP_REQUIRED));
|
||||
|
|
@ -210,12 +227,23 @@ defineRule('loss-date-gt-10-years', (value) => {
|
|||
|
||||
return true;
|
||||
});
|
||||
defineRule('loss-date-lt-tomorrow', (value) => {
|
||||
const lossDate = new Date(Date.parse(`${value}T00:00:00`));
|
||||
const today = new Date();
|
||||
const tomorrow = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1, 0, 0, 0, 0);
|
||||
if (lossDate >= tomorrow) {
|
||||
return errorMessages.DAMAGE_DATE_NO_FUTURE_DATE;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
export default {
|
||||
name: 'welcome-page',
|
||||
components: {
|
||||
siteHeader,
|
||||
siteSubHeader,
|
||||
alert,
|
||||
buttonQuestion,
|
||||
textboxQuestion,
|
||||
dropdownQuestion,
|
||||
|
|
@ -260,15 +288,16 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
welcomePageModel: this.getWelcomePageModelFromStore(),
|
||||
displayInvalidZipAlert: false,
|
||||
duplicates: [],
|
||||
rules: {
|
||||
policyNumber: 'policy-number-required',
|
||||
policyNumber: 'policy-number-required|policy-number-format',
|
||||
policyZip: 'policy-zip-required|policy-zip-format',
|
||||
lossDate: 'loss-date-required|loss-date-gt-10-years',
|
||||
lossDate: 'loss-date-required|loss-date-gt-10-years|loss-date-lt-tomorrow',
|
||||
damageOption: 'damage-option-required',
|
||||
phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`,
|
||||
email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
|
||||
lossCity: 'loss-city-required',
|
||||
lossCity: 'loss-city-required|loss-city-format',
|
||||
lossState: 'loss-state-required'
|
||||
}
|
||||
};
|
||||
|
|
@ -319,20 +348,42 @@ export default {
|
|||
},
|
||||
maxCoverageLookupAttemptsReached() {
|
||||
return this.mainStore.applicationUser.coverageLookupAttempts >= 11;
|
||||
},
|
||||
mask() {
|
||||
return {
|
||||
mask: 'x##-###-####',
|
||||
tokens: {
|
||||
x: {
|
||||
pattern: /[2-9]/
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async forwardButtonAction() {
|
||||
this.mainStore.updatePolicyData(this.welcomePageModel);
|
||||
await this.mainStore.getDuplicateReferrals()
|
||||
.then(() => {}, () => {})
|
||||
.finally(async () => {
|
||||
if (this.isCoverageEnabled && !this.maxCoverageLookupAttemptsReached) {
|
||||
await this.mainStore.getCoveragePolicyInfo()?.then(() => {}, () => {});
|
||||
console.log('zip code...');
|
||||
console.log(this.welcomePageModel.policyZipCode);
|
||||
await this.mainStore.validateZip({ zip: this.welcomePageModel.policyZipCode })
|
||||
.then(async (zipInfo) => {
|
||||
if (zipInfo?.data?.isValid === true) {
|
||||
this.mainStore.updatePolicyData(this.welcomePageModel);
|
||||
await this.mainStore.getDuplicateReferrals()
|
||||
.then(() => {}, () => {})
|
||||
.finally(async () => {
|
||||
if (this.isCoverageEnabled && !this.maxCoverageLookupAttemptsReached) {
|
||||
await this.mainStore.getCoveragePolicyInfo()?.then(() => {}, () => {});
|
||||
} else {
|
||||
this.mainStore.order.policy.policyLookupSuccessful = false;
|
||||
}
|
||||
return this.navigateForward();
|
||||
});
|
||||
} else {
|
||||
this.mainStore.order.policy.policyLookupSuccessful = false;
|
||||
// set manual error message
|
||||
console.log('zip invalid...');
|
||||
this.displayInvalidZipAlert = true;
|
||||
return this.$refs.siteFooter.removeLoader();
|
||||
}
|
||||
this.navigateForward();
|
||||
});
|
||||
},
|
||||
navigateForward() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue