push changes in case i lose them fixing repo

This commit is contained in:
Bill Richardson 2023-08-02 14:19:27 -04:00
parent bc5d9842d0
commit b18c151dd5
9 changed files with 393 additions and 118 deletions

View file

@ -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 };

View file

@ -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'
};

View file

@ -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
)
);
}
/**

View file

@ -1,35 +1,31 @@
<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: {
@ -55,7 +51,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 +68,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>

View file

@ -1,21 +1,57 @@
<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-if="isNoTpa"
cmsWidgetName="SiteSubHeaderNoTPAWidget"
class="sub-header-content"
justification="left" />
<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 +59,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 globalRules from '@/constants/global-rules';
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 +89,85 @@ export default {
{
resultKey: 'cmsContent',
promise: cmsContentPromise
}];
// use resultMap to populate layout content.
}
];
// use resultMap to populate layout content.
const resultMap = await settleAllPromises(promiseResultMap);
const cmsMoq = {
SiteHeaderWidget: {
Answers: [
{
ClientName: 'Generic',
AccountNumber: '0',
ImageId: '4912b7b6-e403-450e-a837-44b6e30539fa',
AnswerImageUrl:
'https://digitalisscms.dev.safelite.io/images/default-source/default-album/logos/generic.svg?sfvrsn=4f01888b_1',
AltText: 'Logo',
HexCode: '#FFFFFF'
},
{
ClientName: 'Liberty Mutual',
AccountNumber: '550036',
ImageId: '4503e012-aa30-4cf8-9210-3f2f6ba63436',
AnswerImageUrl:
'https://digitalisscms.dev.safelite.io/images/default-source/default-album/logos/liberty-mutual.svg?sfvrsn=49878147_4',
AltText: 'Liberty Mutual Logo',
HexCode: '#FFD100'
},
{
ClientName: 'Bear River',
AccountNumber: '569316',
ImageId: 'b64b261c-bcf4-4e35-9969-e9909b1b1160',
AnswerImageUrl:
'https://digitalisscms.dev.safelite.io/images/default-source/default-album/logos/bearriver_logo341d77a6d7b94441af0658338118994c.png?sfvrsn=bba433ab_0',
AltText: 'Bear River Logo',
HexCode: '#FFFFFF'
},
{
ClientName: 'CSE',
AccountNumber: '460196',
ImageId: 'ce1faddf-d9dd-410e-8564-bfb6893285de',
AnswerImageUrl:
'https://digitalisscms.dev.safelite.io/images/default-source/default-album/logos/cse_logob36dba292db8489398993dd21c0170d6.png?sfvrsn=a3d5f26c_0',
AltText: 'CSE Logo',
HexCode: '#FFFFFF'
}
]
},
SiteSubHeaderWidget: {
SubHeaderText: 'Request a callback',
SecondaryText: `Please provide your contact details and we'll get back to you soon.`
},
FirstNameQuestion: {
QuestionText: 'First name',
ButtonText: '',
Answers: []
},
LastNameQuestion: {
QuestionText: 'Last name',
ButtonText: '',
Answers: []
},
PhoneNumberQuestion: {
QuestionText: 'Phone number',
ButtonText: '',
Answers: []
},
EmailAddressQuestion: {
QuestionText: 'Email address',
ButtonText: '',
Answers: []
},
SiteFooterWidget: {
BackButtonText: 'Back',
ForwardButtonText: 'Send callback request',
FooterImageId: 'b7bb829f-14a3-41c5-91e5-1f4f5dfafc0d',
FooterImageURL: ''
}
};
console.log(resultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
@ -60,16 +177,82 @@ 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 false; // 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() {
console.log(this.mainStore);
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;
}
span {
font-size: 0.875rem;
&.new-paragraph {
display: block;
margin-top: 0.25rem;
line-height: 1.5rem;
}
}
}
}
div.textbox-question {
margin-top: 1rem;
}
div.footer-content-container {
margin: 1.5rem 0;
}
}
}
</style>

View file

@ -74,7 +74,7 @@
placeHolderText="Select an option" />
</div>
</div>
<div class="row mt-4 ">
<div class="row mt-4">
<div class="col">
<textboxQuestion
ref="phoneNumber"
@ -151,11 +151,11 @@
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 +192,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',
@ -224,6 +227,8 @@ export default {
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
console.log(resultMap);
console.log(resultMap.cmsContent);
vm.setCmsContent(resultMap.cmsContent);
});
},
@ -322,7 +327,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;

View file

@ -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,

View file

@ -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 };

View file

@ -593,5 +593,51 @@ const routingTable = () => [
}
];
export { routingTable };
{
issPageValue: issPageValues.TPA_SUBMIT,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationIssPageValue: issPageValues.TPA_SEARCH
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationIssPageValue: issPageValues.TPA_CONFIRMATION
}
]
},
{
issPageValue: issPageValues.ORDER_CONFIRMATION,
maps: [
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationIssPageValue: issPageValues.WELCOME_PAGE
}
]
},
{
issPageValue: issPageValues.TPA_SEARCH,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationIssPageValue: issPageValues.PROVIDER_PREFERENCE
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationIssPageValue: issPageValues.TPA_SUBMIT
}
]
},
{
issPageValue: issPageValues.BAILOUT_PAGE,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK_PREVIOUS,
destinationIssPageValue: issPageValues.BAILOUT_PAGE
}
]
}
];
};
export { routingTable };