Merge pull request #392 from Safelite/feature/richardson/SSR-524
Bailout Page front end
This commit is contained in:
brich1212safe
GitHub
commit
dfbbd714b1
9 changed files with 953 additions and 785 deletions
|
|
@ -21,18 +21,21 @@ const errorMessages = {
|
|||
SERVICE_ZIP_REQUIRED: 'Please enter your service ZIP',
|
||||
SERVICE_ZIP_FORMAT: 'Please enter a valid service ZIP',
|
||||
VIN_REQUIRED: 'Please enter your VIN',
|
||||
VIN_FORMAT: 'Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q',
|
||||
VIN_FORMAT:
|
||||
'Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q',
|
||||
OPTION_REQUIRED: 'Please select an option',
|
||||
VEHICLE_REQUIRED: 'Please select a vehicle',
|
||||
POLICY_NUMBER_REQUIRED: 'Please enter your policy number',
|
||||
PHONE_NUMBER_REQUIRED: 'Please enter phone number',
|
||||
PHONE_NUMBER_FORMAT: 'Please enter your phone number. The format must be ###-###-####',
|
||||
PHONE_NUMBER_FORMAT_SHORT: 'Please enter a valid phone number',
|
||||
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_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',
|
||||
LOSS_DATE_REQUIRED:
|
||||
'Please select a date. Format must be MM/DD/YYYY and the date must be not in the future',
|
||||
DAMAGE_OPTION_REQUIRED: 'Please select an option',
|
||||
|
||||
POLICYHOLDER_FIRST_NAME_REQUIRED: 'Please enter the policyholder first name',
|
||||
|
|
@ -43,7 +46,6 @@ const errorMessages = {
|
|||
MAKE_REQUIRED: 'Please select your vehicle make',
|
||||
MODEL_REQUIRED: 'Please select your vehicle model',
|
||||
STYLE_REQUIRED: 'Please select your vehicle style'
|
||||
|
||||
};
|
||||
|
||||
export { errorMessages };
|
||||
export { errorMessages };
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
/**
|
||||
* @file global-rules.js
|
||||
* @author MB
|
||||
* @copyright Safelite
|
||||
*/
|
||||
* @file global-rules.js
|
||||
* @author MB
|
||||
* @copyright Safelite
|
||||
*/
|
||||
|
||||
/**
|
||||
* @summary Contains all the globally defined rules.
|
||||
|
|
@ -12,10 +12,11 @@ const globalRules = {
|
|||
POLICYHOLDER_LAST_NAME_REQUIRED: 'policyholder-last-name-required',
|
||||
FIRST_NAME_REQUIRED: 'first-name-required',
|
||||
LAST_NAME_REQUIRED: 'last-name-required',
|
||||
PHONE_NUMBER_REQUIRED: 'phone-number-required',
|
||||
EMAIL_ADDRESS_REQUIRED: 'email-required',
|
||||
EMAIL_ADDRESS_FORMAT: 'email-address-format',
|
||||
PHONE_NUMBER_REQUIRED: 'phone-number-required',
|
||||
PHONE_NUMBER_FORMAT: 'phone-number-format',
|
||||
PHONE_NUMBER_FORMAT_SHORT: 'phone-number-format-short',
|
||||
OPTION_REQUIRED: 'option-required'
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -9,10 +9,14 @@ import { required, regex } from '@/helpers/validation-rules';
|
|||
function defineGlobalNameRules() {
|
||||
defineRule(globalRules.FIRST_NAME_REQUIRED, required(errorMessages.FIRST_NAME_REQUIRED));
|
||||
defineRule(globalRules.LAST_NAME_REQUIRED, required(errorMessages.LAST_NAME_REQUIRED));
|
||||
defineRule(globalRules.POLICYHOLDER_FIRST_NAME_REQUIRED,
|
||||
required(errorMessages.POLICYHOLDER_FIRST_NAME_REQUIRED));
|
||||
defineRule(globalRules.POLICYHOLDER_LAST_NAME_REQUIRED,
|
||||
required(errorMessages.POLICYHOLDER_LAST_NAME_REQUIRED));
|
||||
defineRule(
|
||||
globalRules.POLICYHOLDER_FIRST_NAME_REQUIRED,
|
||||
required(errorMessages.POLICYHOLDER_FIRST_NAME_REQUIRED)
|
||||
);
|
||||
defineRule(
|
||||
globalRules.POLICYHOLDER_LAST_NAME_REQUIRED,
|
||||
required(errorMessages.POLICYHOLDER_LAST_NAME_REQUIRED)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -20,9 +24,13 @@ function defineGlobalNameRules() {
|
|||
*/
|
||||
function defineGlobalEmailRules() {
|
||||
defineRule(globalRules.EMAIL_ADDRESS_REQUIRED, required(errorMessages.EMAIL_ADDRESS_REQUIRED));
|
||||
defineRule(globalRules.EMAIL_ADDRESS_FORMAT,
|
||||
regex(/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/,
|
||||
errorMessages.EMAIL_ADDRESS_FORMAT));
|
||||
defineRule(
|
||||
globalRules.EMAIL_ADDRESS_FORMAT,
|
||||
regex(
|
||||
/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/,
|
||||
errorMessages.EMAIL_ADDRESS_FORMAT
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -30,9 +38,20 @@ function defineGlobalEmailRules() {
|
|||
*/
|
||||
function defineGlobalPhoneNumberRules() {
|
||||
defineRule(globalRules.PHONE_NUMBER_REQUIRED, required(errorMessages.PHONE_NUMBER_REQUIRED));
|
||||
defineRule(globalRules.PHONE_NUMBER_FORMAT,
|
||||
regex(/^(\([0-9]{3}\)|[0-9]{3}) *[-.]? *[0-9]{3} *[-.]? *[0-9]{4}$/,
|
||||
errorMessages.PHONE_NUMBER_FORMAT));
|
||||
defineRule(
|
||||
globalRules.PHONE_NUMBER_FORMAT,
|
||||
regex(
|
||||
/^(\([0-9]{3}\)|[0-9]{3}) *[-.]? *[0-9]{3} *[-.]? *[0-9]{4}$/,
|
||||
errorMessages.PHONE_NUMBER_FORMAT
|
||||
)
|
||||
);
|
||||
defineRule(
|
||||
globalRules.PHONE_NUMBER_FORMAT_SHORT,
|
||||
regex(
|
||||
/^(\([0-9]{3}\)|[0-9]{3}) *[-.]? *[0-9]{3} *[-.]? *[0-9]{4}$/,
|
||||
errorMessages.PHONE_NUMBER_FORMAT_SHORT
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,51 +1,59 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
|
||||
<h5
|
||||
class="text-center fw-normal mb-0 subheader-primary"
|
||||
:class="headerColor">
|
||||
<span>
|
||||
{{ content }}
|
||||
</span>
|
||||
<buttonBack
|
||||
v-if="hasBackButton"
|
||||
:backButtonAccessibleText="backButtonAccessibleText"
|
||||
@click-event="clickEvent" />
|
||||
</h5>
|
||||
</div>
|
||||
<div
|
||||
class="subheader-secondary d-flex align-items-center container-fluid overflow-hidden"
|
||||
:class="justifySubheader">
|
||||
<p
|
||||
class="fw-normal mb-0"
|
||||
:class="alternateFormatting">
|
||||
<span v-html="subText">
|
||||
<div
|
||||
class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
|
||||
<h5 class="text-center fw-normal mb-0 subheader-primary" :class="headerColor">
|
||||
<span>
|
||||
{{ content }}
|
||||
</span>
|
||||
<buttonBack
|
||||
v-if="hasBackButton"
|
||||
:backButtonAccessibleText="backButtonAccessibleText"
|
||||
@click-event="clickEvent" />
|
||||
</h5>
|
||||
</div>
|
||||
<div
|
||||
class="subheader-secondary d-flex align-items-center container-fluid overflow-hidden"
|
||||
:class="justifySubheader">
|
||||
<p class="fw-normal mb-0" :class="alternateFormatting">
|
||||
<span v-html="subText"> </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import buttonBack from '@/iss-components/site-sub-header/button-back/button-back';
|
||||
|
||||
export default ({
|
||||
export default {
|
||||
name: 'site-sub-header',
|
||||
components: { buttonBack },
|
||||
props: {
|
||||
cmsWidgetName: String,
|
||||
contentProperty: String,
|
||||
darkGraySubText: Boolean,
|
||||
hasBackButton: Boolean,
|
||||
justification: String,
|
||||
issContainingPage: String,
|
||||
darkGraySubText: Boolean
|
||||
justification: String,
|
||||
stripRteStyle: Boolean,
|
||||
subContentProperty: String
|
||||
},
|
||||
emits: ['click-event'],
|
||||
computed: {
|
||||
content() {
|
||||
return this.getCmsContent(this.cmsWidgetName, 'SubHeaderText');
|
||||
return this.getCmsContent(this.cmsWidgetName, this.contentProperty ?? 'SubHeaderText');
|
||||
},
|
||||
subText() {
|
||||
const subText = this.getCmsContent(this.cmsWidgetName, 'SecondaryText');
|
||||
let subText = this.getCmsContent(
|
||||
this.cmsWidgetName,
|
||||
this.subContentProperty ?? 'SecondaryText'
|
||||
);
|
||||
|
||||
if (this.stripRteStyle) {
|
||||
const regexExp = /[\s*]style="(.*?)"/g;
|
||||
subText = subText.replace(regexExp, '');
|
||||
}
|
||||
|
||||
return subText ?? '';
|
||||
},
|
||||
backButtonAccessibleText() {
|
||||
|
|
@ -55,7 +63,7 @@ export default ({
|
|||
return this.subText ? 'dark-header' : 'light-header';
|
||||
},
|
||||
justifySubheader() {
|
||||
return (this.justification?.toLowerCase() === 'left')
|
||||
return this.justification?.toLowerCase() === 'left'
|
||||
? 'justify-content-left'
|
||||
: 'justify-content-center';
|
||||
},
|
||||
|
|
@ -72,53 +80,52 @@ export default ({
|
|||
this.$emit('click-event');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dark-header {
|
||||
color: $black;
|
||||
}
|
||||
.dark-header {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.light-header {
|
||||
color: $gray-550;
|
||||
}
|
||||
.light-header {
|
||||
color: $gray-550;
|
||||
}
|
||||
|
||||
h5 {
|
||||
line-height: 32px;
|
||||
h5 {
|
||||
line-height: 32px;
|
||||
|
||||
button {
|
||||
button {
|
||||
color: inherit;
|
||||
}
|
||||
span{
|
||||
}
|
||||
span {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
p.light-gray {
|
||||
color: $gray-550;
|
||||
}
|
||||
}
|
||||
p.light-gray {
|
||||
color: $gray-550;
|
||||
}
|
||||
|
||||
p.dark-gray {
|
||||
color: $darker-gray;
|
||||
}
|
||||
p.dark-gray {
|
||||
color: $darker-gray;
|
||||
}
|
||||
|
||||
p.service-packages-subtext {
|
||||
font-weight: 500 !important;
|
||||
line-height: 24px;
|
||||
}
|
||||
p.service-packages-subtext {
|
||||
font-weight: 500 !important;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.subheader-secondary {
|
||||
&.justify-content-center{
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.justify-content-left{
|
||||
p {
|
||||
text-align: left;
|
||||
}
|
||||
.subheader-secondary {
|
||||
&.justify-content-center {
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.justify-content-left {
|
||||
p {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,60 @@
|
|||
<template>
|
||||
<Form
|
||||
ref="theForm"
|
||||
v-slot="{ meta }"
|
||||
@submit="onSubmit"
|
||||
@invalid-submit="onInvalidSubmit">
|
||||
<Form ref="theForm" v-slot="{ meta }" @submit="onSubmit" @invalid-submit="onInvalidSubmit">
|
||||
<div class="page-container-grouped-styles">
|
||||
<div class="fade-on-route-transition position-relative">
|
||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||
<div class="container-fluid pb-2">
|
||||
<p>Placeholder for bailout page</p>
|
||||
<siteFooter
|
||||
ref="siteFooter"
|
||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||
<div class="main-content-container">
|
||||
<siteSubHeader
|
||||
v-if="!isNoTpa"
|
||||
cmsWidgetName="SiteSubHeaderWidget"
|
||||
class="sub-header-content"
|
||||
justification="left" />
|
||||
<siteSubHeader
|
||||
v-else
|
||||
cmsWidgetName="ContentGroupNoTPAWidget"
|
||||
class="sub-header-content"
|
||||
contentProperty="HeaderText"
|
||||
justification="left"
|
||||
:stripRteStyle="true"
|
||||
subContentProperty="BodyText" />
|
||||
<textboxQuestion
|
||||
inputId="firstNameField"
|
||||
cmsWidgetName="FirstNameQuestion"
|
||||
v-model="bailoutPageModel.firstName"
|
||||
isRequired
|
||||
ref="firstName"
|
||||
disableAutoFill
|
||||
:validationRules="rules.firstName" />
|
||||
<textboxQuestion
|
||||
inputId="lastNameField"
|
||||
cmsWidgetName="LastNameQuestion"
|
||||
v-model="bailoutPageModel.lastName"
|
||||
isRequired
|
||||
ref="lastName"
|
||||
disableAutoFill
|
||||
:validationRules="rules.lastName" />
|
||||
<textboxQuestion
|
||||
inputId="phoneNumberField"
|
||||
cmsWidgetName="PhoneNumberQuestion"
|
||||
v-model="bailoutPageModel.phoneNumber"
|
||||
isRequired
|
||||
ref="phoneNumber"
|
||||
mask="###-###-####"
|
||||
disableAutoFill
|
||||
:validationRules="rules.phoneNumber" />
|
||||
<textboxQuestion
|
||||
inputId="emailAddressField"
|
||||
cmsWidgetName="EmailAddressQuestion"
|
||||
v-model="bailoutPageModel.email"
|
||||
isRequired
|
||||
ref="emailAddress"
|
||||
disableAutoFill
|
||||
:validationRules="rules.email" />
|
||||
<siteFooter
|
||||
class="footer-content-container"
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@ForwardClicked="forwardButtonAction"
|
||||
@back-clicked="backButtonAction" />
|
||||
</div>
|
||||
@back-clicked="backButtonAction"
|
||||
@ForwardClicked="forwardButtonAction" />
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
|
|
@ -23,19 +62,24 @@
|
|||
<script>
|
||||
// Components
|
||||
import siteHeader from '@/iss-components/site-header/site-header';
|
||||
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
|
||||
import siteFooter from '@/iss-components/site-footer/site-footer';
|
||||
import textboxQuestion from '@/digital-components/textbox-question/textbox-question';
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
|
||||
import { settleAllPromises } from '@/helpers/layout-helper';
|
||||
import { Form } from 'vee-validate';
|
||||
import BaseFormMixin from '@/mixins/base-form-mixin.js';
|
||||
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
|
||||
import { Form } from 'vee-validate';
|
||||
import globalRules from '@/constants/global-rules';
|
||||
import { settleAllPromises } from '@/helpers/layout-helper';
|
||||
import { useMainStore } from '@/store';
|
||||
|
||||
export default {
|
||||
name: 'bailout-page',
|
||||
components: {
|
||||
siteHeader,
|
||||
siteSubHeader,
|
||||
siteFooter,
|
||||
textboxQuestion,
|
||||
// eslint-disable-next-line vue/no-reserved-component-names
|
||||
Form
|
||||
},
|
||||
|
|
@ -48,9 +92,11 @@ export default {
|
|||
{
|
||||
resultKey: 'cmsContent',
|
||||
promise: cmsContentPromise
|
||||
}];
|
||||
// use resultMap to populate layout content.
|
||||
}
|
||||
];
|
||||
// use resultMap to populate layout content.
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
});
|
||||
|
|
@ -60,16 +106,79 @@ export default {
|
|||
return { mainStore };
|
||||
},
|
||||
data() {
|
||||
},
|
||||
methods:
|
||||
{
|
||||
backButtonAction() {
|
||||
},
|
||||
forwardButtonAction() {
|
||||
return this.navigateForward();
|
||||
},
|
||||
navigateForward() {
|
||||
return {
|
||||
bailoutPageModel: this.getBailoutPageModelFromStore(),
|
||||
rules: {
|
||||
firstName: globalRules.FIRST_NAME_REQUIRED,
|
||||
lastName: globalRules.LAST_NAME_REQUIRED,
|
||||
phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT_SHORT}`,
|
||||
email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isNoTpa() {
|
||||
return true; // not sure what in the data flags this.
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
backButtonAction() {
|
||||
// route to move backwards
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK_PREVIOUS, this.$route);
|
||||
},
|
||||
forwardButtonAction() {
|
||||
return this.navigateForward();
|
||||
},
|
||||
navigateForward() {},
|
||||
getBailoutPageModelFromStore() {
|
||||
return {
|
||||
firstName: this.mainStore.order.customer.firstName,
|
||||
lastName: this.mainStore.order.customer.lastName,
|
||||
phoneNumber: this.mainStore.order.customer.phoneNumber,
|
||||
email: this.mainStore.order.customer.emailAddress
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$page-side-padding: 1.5rem;
|
||||
|
||||
.page-container-grouped-styles {
|
||||
> div.main-content-container {
|
||||
overflow: auto;
|
||||
padding: 0 $page-side-padding !important;
|
||||
|
||||
> div.sub-header-content {
|
||||
margin-top: 1rem;
|
||||
padding: 0;
|
||||
|
||||
div.subheader-secondary {
|
||||
margin-top: 0.5rem;
|
||||
padding: 0;
|
||||
|
||||
p {
|
||||
line-height: 1.5rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.textbox-question {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
div.footer-content-container {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,55 +1,47 @@
|
|||
<template>
|
||||
<Form
|
||||
ref="theForm"
|
||||
v-slot="{ meta }"
|
||||
@submit="onSubmit"
|
||||
@invalid-submit="onInvalidSubmit">
|
||||
<Form ref="theForm" v-slot="{ meta }" @submit="onSubmit" @invalid-submit="onInvalidSubmit">
|
||||
<div class="page-container-grouped-styles welcome">
|
||||
<div class="fade-on-route-transition position-relative">
|
||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||
<siteSubHeader
|
||||
cmsWidgetName="SiteSubHeaderWidget"
|
||||
class="mt-4" />
|
||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-4" />
|
||||
<div class="container-fluid px-5">
|
||||
<div class="row mt-5">
|
||||
<div class="col">
|
||||
<textboxQuestion
|
||||
ref="policyNumber"
|
||||
v-model="welcomePageModel.policyNumber"
|
||||
inputId="policyNumberField"
|
||||
cmsWidgetName="PolicyNumberQuestion"
|
||||
isRequired
|
||||
disableAutoFill
|
||||
:isDisabled="isPolicyHolderEnabled"
|
||||
:validationRules="rules.policyNumber" />
|
||||
ref="policyNumber"
|
||||
v-model="welcomePageModel.policyNumber"
|
||||
inputId="policyNumberField"
|
||||
cmsWidgetName="PolicyNumberQuestion"
|
||||
isRequired
|
||||
disableAutoFill
|
||||
:isDisabled="isPolicyHolderEnabled"
|
||||
:validationRules="rules.policyNumber" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="isCoverageEnabled"
|
||||
class="row mt-4">
|
||||
<div v-if="isCoverageEnabled" class="row mt-4">
|
||||
<div class="col">
|
||||
<textboxQuestion
|
||||
ref="policyZip"
|
||||
v-model="welcomePageModel.policyZipCode"
|
||||
inputId="policyZipCode"
|
||||
cmsWidgetName="PolicyZipQuestion"
|
||||
isRequired
|
||||
:validationRules="rules.policyZip" />
|
||||
ref="policyZip"
|
||||
v-model="welcomePageModel.policyZipCode"
|
||||
inputId="policyZipCode"
|
||||
cmsWidgetName="PolicyZipQuestion"
|
||||
isRequired
|
||||
:validationRules="rules.policyZip" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col">
|
||||
<textboxQuestion
|
||||
ref="dateOfLoss"
|
||||
v-model="welcomePageModel.dateOfLoss"
|
||||
type="date"
|
||||
cmsWidgetName="DateOfLossQuestion"
|
||||
inputId="dateOfLossField"
|
||||
isRequired
|
||||
disableAutoFill
|
||||
:max="new Date().toJSON().slice(0,10)"
|
||||
:min="'1972-12-01'"
|
||||
:validationRules="rules.lossDate" />
|
||||
ref="dateOfLoss"
|
||||
v-model="welcomePageModel.dateOfLoss"
|
||||
type="date"
|
||||
cmsWidgetName="DateOfLossQuestion"
|
||||
inputId="dateOfLossField"
|
||||
isRequired
|
||||
disableAutoFill
|
||||
:max="new Date().toJSON().slice(0, 10)"
|
||||
:min="'1972-12-01'"
|
||||
:validationRules="rules.lossDate" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row px-4">
|
||||
|
|
@ -63,99 +55,97 @@
|
|||
<div class="row mt-4">
|
||||
<div class="col">
|
||||
<dropdownQuestion
|
||||
id="welcomeDropdown"
|
||||
ref="damageCause"
|
||||
v-model="welcomePageModel.damageCause"
|
||||
cmsWidgetName="DamageCauseQuestion"
|
||||
inputId="damageCauseQuestionField"
|
||||
:options="DamageCauseOptions"
|
||||
disableAutoFill
|
||||
:validationRules="rules.damageOption"
|
||||
placeHolderText="Select an option" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4 ">
|
||||
<div class="col">
|
||||
<textboxQuestion
|
||||
ref="phoneNumber"
|
||||
v-model="welcomePageModel.phoneNumber"
|
||||
inputId="phoneNumberField"
|
||||
cmsWidgetName="PhoneNumberQuestion"
|
||||
:validationRules="rules.phoneNumber"
|
||||
isRequired
|
||||
mask="###-###-####"
|
||||
disableAutoFill />
|
||||
id="welcomeDropdown"
|
||||
ref="damageCause"
|
||||
v-model="welcomePageModel.damageCause"
|
||||
cmsWidgetName="DamageCauseQuestion"
|
||||
inputId="damageCauseQuestionField"
|
||||
:options="DamageCauseOptions"
|
||||
disableAutoFill
|
||||
:validationRules="rules.damageOption"
|
||||
placeHolderText="Select an option" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col">
|
||||
<textboxQuestion
|
||||
ref="email"
|
||||
v-model="welcomePageModel.email"
|
||||
inputId="emailField"
|
||||
cmsWidgetName="EmailAddressQuestion"
|
||||
:validationRules="rules.email"
|
||||
isRequired
|
||||
disableAutoFill />
|
||||
ref="phoneNumber"
|
||||
v-model="welcomePageModel.phoneNumber"
|
||||
inputId="phoneNumberField"
|
||||
cmsWidgetName="PhoneNumberQuestion"
|
||||
:validationRules="rules.phoneNumber"
|
||||
isRequired
|
||||
mask="###-###-####"
|
||||
disableAutoFill />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col">
|
||||
<textboxQuestion
|
||||
ref="email"
|
||||
v-model="welcomePageModel.email"
|
||||
inputId="emailField"
|
||||
cmsWidgetName="EmailAddressQuestion"
|
||||
:validationRules="rules.email"
|
||||
isRequired
|
||||
disableAutoFill />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<textboxQuestion
|
||||
v-if="displayDamageCityQuestion"
|
||||
ref="damageCity"
|
||||
v-model="welcomePageModel.damageCity"
|
||||
class="mt-4"
|
||||
inputId="damageCityField"
|
||||
cmsWidgetName="DamageCityQuestion"
|
||||
isRequired
|
||||
disableAutoFill
|
||||
:validationRules="rules.lossCity" />
|
||||
v-if="displayDamageCityQuestion"
|
||||
ref="damageCity"
|
||||
v-model="welcomePageModel.damageCity"
|
||||
class="mt-4"
|
||||
inputId="damageCityField"
|
||||
cmsWidgetName="DamageCityQuestion"
|
||||
isRequired
|
||||
disableAutoFill
|
||||
:validationRules="rules.lossCity" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<dropdownQuestion
|
||||
v-if="displayDamageStateQuestion"
|
||||
id="welcomeDropdown"
|
||||
ref="state"
|
||||
v-model="welcomePageModel.damageState"
|
||||
class="mt-4"
|
||||
cmsWidgetName="DamageStateQuestion"
|
||||
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
|
||||
:options="getStates"
|
||||
:validationRules="rules.lossState"
|
||||
isRequired
|
||||
disableAutoFill
|
||||
placeHolderText="Select an option" />
|
||||
v-if="displayDamageStateQuestion"
|
||||
id="welcomeDropdown"
|
||||
ref="state"
|
||||
v-model="welcomePageModel.damageState"
|
||||
class="mt-4"
|
||||
cmsWidgetName="DamageStateQuestion"
|
||||
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
|
||||
:options="getStates"
|
||||
:validationRules="rules.lossState"
|
||||
isRequired
|
||||
disableAutoFill
|
||||
placeHolderText="Select an option" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<buttonQuestion
|
||||
v-if="displayGlassOnlyQuestion"
|
||||
ref="glassOnlyDamage"
|
||||
v-model="welcomePageModel.isDamageGlassOnly"
|
||||
class="px-0 mt-4"
|
||||
cmsWidgetName="GlassOnlyQuestion"
|
||||
inputId="isDamageGlassOnly"
|
||||
:answers="DamageGlassOnlyOptions"
|
||||
:questionText="DamageGlassOnlyQuestion"
|
||||
buttonTypeString="listButtonHorizontal"
|
||||
:validationRules="rules.damageOption"
|
||||
isRequired
|
||||
isSmallQuestionLabelText
|
||||
disableAutoFill />
|
||||
v-if="displayGlassOnlyQuestion"
|
||||
ref="glassOnlyDamage"
|
||||
v-model="welcomePageModel.isDamageGlassOnly"
|
||||
class="px-0 mt-4"
|
||||
cmsWidgetName="GlassOnlyQuestion"
|
||||
inputId="isDamageGlassOnly"
|
||||
:answers="DamageGlassOnlyOptions"
|
||||
:questionText="DamageGlassOnlyQuestion"
|
||||
buttonTypeString="listButtonHorizontal"
|
||||
:validationRules="rules.damageOption"
|
||||
isRequired
|
||||
isSmallQuestionLabelText
|
||||
disableAutoFill />
|
||||
</div>
|
||||
<div
|
||||
id="welcomeFooter"
|
||||
class="row position-sticky top-100">
|
||||
<div id="welcomeFooter" class="row position-sticky top-100">
|
||||
<div class="col">
|
||||
<siteFooter
|
||||
class="mt-3"
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@back-clicked="backButtonAction"
|
||||
@ForwardClicked="forwardButtonAction" />
|
||||
class="mt-3"
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@back-clicked="backButtonAction"
|
||||
@ForwardClicked="forwardButtonAction" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -192,7 +182,10 @@ defineRule('loss-state-required', required(errorMessages.LOSS_STATE_REQUIRED));
|
|||
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));
|
||||
defineRule('policy-zip-format', regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.POLICY_ZIP_FORMAT));
|
||||
defineRule(
|
||||
'policy-zip-format',
|
||||
regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.POLICY_ZIP_FORMAT)
|
||||
);
|
||||
|
||||
export default {
|
||||
name: 'welcome-page',
|
||||
|
|
@ -289,8 +282,7 @@ export default {
|
|||
return this.mainStore.issConfig.isCoverageEnabled;
|
||||
}
|
||||
},
|
||||
methods:
|
||||
{
|
||||
methods: {
|
||||
async forwardButtonAction() {
|
||||
this.mainStore.updatePolicyData(this.welcomePageModel);
|
||||
|
||||
|
|
@ -322,7 +314,8 @@ export default {
|
|||
const policy = policyInfo.policies?.[0];
|
||||
if (policy) {
|
||||
// populate policy holder details from policy lookup
|
||||
this.mainStore.order.customer.address.streetAddress = policy.insureds?.[0]?.address;
|
||||
this.mainStore.order.customer.address.streetAddress =
|
||||
policy.insureds?.[0]?.address;
|
||||
this.mainStore.order.customer.address.city = policy.insureds?.[0]?.city;
|
||||
this.mainStore.order.customer.address.state = policy.insureds?.[0]?.state;
|
||||
this.mainStore.order.customer.address.zipCode = policy.insureds?.[0]?.zipCode;
|
||||
|
|
@ -341,21 +334,27 @@ export default {
|
|||
if (policy) {
|
||||
if (this.vehiclesFound) {
|
||||
// if policy lookup is successful and vehicles are found, navigate to policy-vehicles page
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES,
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES,
|
||||
this.$route,
|
||||
{},
|
||||
{},
|
||||
this.vehiclesFound);
|
||||
this.vehiclesFound
|
||||
);
|
||||
} else {
|
||||
// if policy lookup is successful, but no vehicles are associated with the policy
|
||||
// navigate to vehicle-selection page (manual entry)
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES,
|
||||
this.$route);
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES,
|
||||
this.$route
|
||||
);
|
||||
}
|
||||
} else {
|
||||
// if policy lookup is unsuccessful, navigate to policy-holder-details page
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
|
||||
this.$route);
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
|
||||
this.$route
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import { experimentTriggers } from '@/constants/experiments';
|
|||
import { applicationConfig } from '@/constants/application-config';
|
||||
|
||||
import analyticsMixin from '@/mixins/analytics-mixin';
|
||||
import { navigationScenarios } from './router-constants/navigation-scenarios';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
|
|
@ -22,7 +23,9 @@ const routes = [
|
|||
name: 'root',
|
||||
async beforeEnter(to, from, next) {
|
||||
try {
|
||||
to.query.issPage = !to.query.issPage ? issPageValues.WELCOME_PAGE : to.query.issPage;
|
||||
to.query.issPage = !to.query.issPage
|
||||
? issPageValues.WELCOME_PAGE
|
||||
: to.query.issPage;
|
||||
|
||||
// Do not run these for the main entry page - as it is not part of the user flow.
|
||||
if (to.query.issPage !== issPageValues.ENTRY_PAG) {
|
||||
|
|
@ -67,18 +70,20 @@ const routes = [
|
|||
}
|
||||
return null;
|
||||
}
|
||||
}];
|
||||
}
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory('/'),
|
||||
routes,
|
||||
scrollBehavior(to, from, savedPosition) {
|
||||
// always scroll to top
|
||||
// always scroll to top
|
||||
return { top: 0 };
|
||||
}
|
||||
});
|
||||
|
||||
router.afterEach((to, from) => { /*eslint-disable-line*/
|
||||
router.afterEach((to, from) => {
|
||||
/*eslint-disable-line*/
|
||||
|
||||
const store = useMainStore();
|
||||
// Update lastPageVisited in the store
|
||||
|
|
@ -130,12 +135,25 @@ router.overrideNavigation = (scenario,
|
|||
next();
|
||||
};
|
||||
|
||||
router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) => {
|
||||
router.navigate = (
|
||||
scenario,
|
||||
currentRoute,
|
||||
optionalQuery = {},
|
||||
optionalParams = {},
|
||||
optionalPageData = {}
|
||||
) => {
|
||||
navigate(scenario, currentRoute, optionalQuery, optionalParams, optionalPageData);
|
||||
};
|
||||
|
||||
// Navigate to the next route, depending on the scenario.
|
||||
function navigate (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) { /*eslint-disable-line*/
|
||||
function navigate(
|
||||
scenario,
|
||||
currentRoute,
|
||||
optionalQuery = {},
|
||||
optionalParams = {},
|
||||
optionalPageData = {}
|
||||
) {
|
||||
/*eslint-disable-line*/
|
||||
if (!scenario) {
|
||||
console.error('No scenario provided. Please review the routing table.');
|
||||
return;
|
||||
|
|
@ -149,7 +167,11 @@ function navigate (scenario, currentRoute, optionalQuery = {}, optionalParams =
|
|||
return;
|
||||
}
|
||||
|
||||
if (matchingScenarioMap.destinationIssPageValue) {
|
||||
if (scenario === navigationScenarios.CLICKED_BACK_PREVIOUS) {
|
||||
// Update page to the prevous page in the router.
|
||||
// If we need to worry about typing this in from outside of the app, we'll need to pre check history.length or if there is a previous page stored in state.
|
||||
router.go(-1);
|
||||
} else if (matchingScenarioMap.destinationIssPageValue) {
|
||||
// Update page data to the store for next page if provided. Otherwise, keep existing page data or set to empty object
|
||||
const existingPageDataForPage = useMainStore().pageData(matchingScenarioMap.destinationIssPageValue);
|
||||
baseMixin.methods.savePageDataToStore(matchingScenarioMap.destinationIssPageValue,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
const navigationScenarios = {
|
||||
// General
|
||||
CLICKED_BACK: 'CLICKED_BACK',
|
||||
CLICKED_BACK_PREVIOUS: 'CLICKED_BACK_PREVIOUS',
|
||||
CLICKED_FORWARD: 'CLICKED_FORWARD',
|
||||
|
||||
// Entry
|
||||
|
|
@ -65,4 +66,4 @@ const navigationScenarios = {
|
|||
CLICKED_FORWARD_WITH_BAILOUT: 'CLICKED_FORWARD_WITH_BAILOUT'
|
||||
};
|
||||
|
||||
export { navigationScenarios };
|
||||
export { navigationScenarios };
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue