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

WIP Resubmit pages with new formatting.

Browse source
This commit is contained in:
Bryan Mauger 2024-04-16 10:32:19 -04:00
parent bb1909a8c3
commit c725c0472a
20 changed files with 2441 additions and 2050 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

167
src/digital-components/button-question/button-question.vue
View file

@ -1,13 +1,18 @@
<!-- Documented in confluence https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Component -->
<template>
<div
:class="isOverflowScrollable
? 'button-question button-question-overflow'
: 'button-question'">
:class="
isOverflowScrollable
? 'button-question button-question-overflow'
: 'button-question'
">
<div
v-if="questionText && answers && answers.length > 0"
class="question-text d-flex"
:class="{'small-question-text': isSmallQuestionText,'small-question-label-text':isSmallQuestionLabelText}">
:class="{
'small-question-text': isSmallQuestionText,
'small-question-label-text': isSmallQuestionLabelText,
}">
<span class="fw-bold w-100">{{ questionText }}</span>
</div>
<div class="w-100 d-flex justify-content-center">
@ -22,9 +27,11 @@
:data-focus-target="formatString(groupName)"
tabindex="-1">
{{ questionText }}
{{ isMultiSelect && answers && answers.length > 1
? "Select one or more options below."
: "Select an option below." }}
{{
isMultiSelect && answers && answers.length > 1
? 'Select one or more options below.'
: 'Select an option below.'
}}
</legend>
<div :class="getComponentLoopWrapperClasses">
<div
@ -54,12 +61,12 @@
:setLastValuePushedToGa="setLastValuePushedToGa"
:suppressError="suppressError" />
<!-- For nested questions -->
<transition
name="fade"
mode="out-in">
<transition name="fade" mode="out-in">
<div
v-if="typeof selectedValues == 'string' &&
selectedValues == answer.value">
v-if="
typeof selectedValues == 'string' &&
selectedValues == answer.value
">
<slot></slot>
</div>
</transition>
@ -67,11 +74,8 @@
</div>
</fieldset>
</div>
<div
v-if="!suppressError"
class="row form-test-error mt-1">
<error-message
:name="formatString(groupName)"></error-message>
<div v-if="!suppressError" class="row form-test-error mt-1">
<error-message :name="formatString(groupName)"></error-message>
</div>
</div>
</template>
@ -92,16 +96,16 @@ export default {
listCard,
ErrorMessage,
radio,
providerPrefRadio
providerPrefRadio,
},
props: {
buttonTypeString: {
type: String,
default: 'listButton'
default: 'listButton',
},
buttonTypeObject: {
type: Object,
default: null
default: null,
},
isMultiSelect: Boolean,
groupName: String,
@ -109,16 +113,16 @@ export default {
answers: Array,
textPosition: {
type: String,
default: 'text-center'
default: 'text-center',
},
selectingInitiatesLoad: Boolean,
loaderColor: {
type: String,
default: 'blue'
default: 'blue',
},
loaderPosition: {
type: String,
default: 'right'
default: 'right',
},
isRequired: Boolean,
isOverflowScrollable: Boolean,
@ -133,7 +137,7 @@ export default {
additionalButtonData: Object,
additionalButtonStyling: String,
isSmallQuestionText: Boolean,
isSmallQuestionLabelText: Boolean
isSmallQuestionLabelText: Boolean,
},
emits: ['update:modelValue'],
setup(props) {
@ -142,11 +146,18 @@ export default {
const fieldOptions = {
value: modelValue,
initialValue: null
initialValue: null,
};
const { errorMessage, handleBlur, handleChange, meta, validate, errors, resetField } =
useField(props.groupName, props.validationRules, fieldOptions);
const {
errorMessage,
handleBlur,
handleChange,
meta,
validate,
errors,
resetField,
} = useField(props.groupName, props.validationRules, fieldOptions);
return {
errorMessage,
@ -155,12 +166,12 @@ export default {
validate,
meta,
errors,
resetField
resetField,
};
},
data() {
return {
lastValuePushedToGa: null
lastValuePushedToGa: null,
};
},
computed: {
@ -169,8 +180,8 @@ export default {
const baseClasses = this.isOverflowScrollable
? 'container-fluid overflow-scroll position-absolute px-5 pt-1 py-0'
: this.buttonTypeString === 'listCard'
? 'w-100'
: '';
? 'w-100'
: '';
const SmallQuestionTextClass = this.isSmallQuestionText
? `${baseClasses}small-question-text`
@ -191,7 +202,8 @@ export default {
classes = 'd-flex flex-row p-0';
break;
case 'listCard':
classes = 'row g-2 g-md-5 justify-content-center mb-1 flex-nowrap';
classes =
'row g-2 g-md-5 justify-content-center mb-1 flex-nowrap';
if (this.isWide) {
classes += ' flex-column';
}
@ -228,32 +240,48 @@ export default {
}
// Determine number of buttons and add class accordingly.
// This is to accommodate unique spacing per design specs.
if (this.buttonTypeString === 'listCard' && this.buttonsInfo.length > 2) {
if (
this.buttonTypeString === 'listCard' &&
this.buttonsInfo.length > 2
) {
classes += ' two-list-card-width';
}
if (this.buttonTypeString === 'listCard' && this.buttonsInfo.length === 1) {
if (
this.buttonTypeString === 'listCard' &&
this.buttonsInfo.length === 1
) {
classes += ' one-list-card-width';
}
return classes;
},
buttonsInfo() {
return (Array.isArray(this.answers) ? this.answers : [])?.map((answer) => ({
buttonLabel: answer.buttonLabel ?? answer.Text ?? answer,
altText: answer.altText ?? (answer.Name ? answer.Name : answer),
buttonLabelSubCopy: answer.buttonLabelSubCopy ?? answer.SubText,
buttonBodyCopy: answer.buttonBodyCopy ?? answer.buttonBodyCopy,
buttonAuxiliaryCopy: answer.buttonAuxiliaryCopy ?? answer.buttonAuxiliaryCopy,
buttonFooterCopy: answer.buttonFooterCopy ?? answer.buttonFooterCopy,
buttonImage: answer.buttonImage ?? answer.AnswerImageUrl,
buttonImageId: answer.buttonImageId ?? answer.ImageId,
groupName: this.formatString(this.groupName),
value:
answer.value
?? (this.useTextForValue && answer.Text ? answer.Text : answer.Name)
?? (typeof answer !== 'object' ? answer : null)
}));
return (Array.isArray(this.answers) ? this.answers : [])?.map(
(answer) => ({
buttonLabel: answer.buttonLabel ?? answer.Text ?? answer,
altText:
answer.altText ?? (answer.Name ? answer.Name : answer),
buttonLabelSubCopy:
answer.buttonLabelSubCopy ?? answer.SubText,
buttonBodyCopy:
answer.buttonBodyCopy ?? answer.buttonBodyCopy,
buttonAuxiliaryCopy:
answer.buttonAuxiliaryCopy ??
answer.buttonAuxiliaryCopy,
buttonFooterCopy:
answer.buttonFooterCopy ?? answer.buttonFooterCopy,
buttonImage: answer.buttonImage ?? answer.AnswerImageUrl,
buttonImageId: answer.buttonImageId ?? answer.ImageId,
groupName: this.formatString(this.groupName),
value:
answer.value ??
(this.useTextForValue && answer.Text
? answer.Text
: answer.Name) ??
(typeof answer !== 'object' ? answer : null),
})
);
},
selectedValues: {
get() {
@ -261,24 +289,25 @@ export default {
},
set(selectedAnswers) {
this.$emit('update:modelValue', selectedAnswers);
}
}
},
},
},
watch: {
modelValue(newValue) {
this.resetField({
value: newValue
value: newValue,
});
}
},
},
beforeMount() {
if (this.buttonTypeObject) {
this.$options.components[this.buttonTypeString] = this.buttonTypeObject;
this.$options.components[this.buttonTypeString] =
this.buttonTypeObject;
}
},
beforeUnmount() {
this.resetField({
value: ''
value: '',
});
},
methods: {
@ -287,8 +316,8 @@ export default {
},
setLastValuePushedToGa(lastValuePushedToGa) {
this.lastValuePushedToGa = lastValuePushedToGa;
}
}
},
},
};
</script>
@ -334,17 +363,17 @@ export default {
.small-question-label-text {
&.question-text {
span {
text-align: left;
margin: 0 0 0.25rem 0;
}
}
&.question-text {
margin: 0;
}
&fieldset {
.ui-radio {
margin: 0;
}
}
text-align: left;
margin: 0 0 0.25rem 0;
}
}
&.question-text {
margin: 0;
}
&fieldset {
.ui-radio {
margin: 0;
}
}
}
</style>

38
src/digital-components/modal/modal.vue
View file

@ -6,7 +6,10 @@
tabindex="-1"
aria-labelledby="ModalComponentLabel"
aria-hidden="true"
v-on="{ 'hidden.bs.modal': onModalClosed, 'shown.bs.modal': onModalOpened }">
v-on="{
'hidden.bs.modal': onModalClosed,
'shown.bs.modal': onModalOpened,
}">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header mb-2 mt-2">
@ -33,7 +36,10 @@
class="w-100"
loaderColor="white"
:buttonText="footerButtonText"
:class="(isButtonDisabled || isFooterButtonDisabled) && 'form-test-invalid'"
:class="
(isButtonDisabled || isFooterButtonDisabled) &&
'form-test-invalid'
"
@clickEvent="validateAndEmit" />
</div>
</div>
@ -50,23 +56,25 @@ export default {
// eslint-disable-next-line vue/multi-word-component-names
name: 'modal',
components: {
modalButtonMain
modalButtonMain,
},
props: {
modalId: String,
headerText: String,
footerButtonText: String,
onModalOpenedCallback: {
type: Function
type: Function,
},
onModalClosedCallback: {
type: Function
type: Function,
},
isButtonDisabled: Boolean
isButtonDisabled: Boolean,
},
emits: ['footer-button-event', 'isModalOpened'],
setup(props) {
const modalId = props.modalId ? props.modalId : `modal-${crypto.randomUUID()}`;
const modalId = props.modalId
? props.modalId
: `modal-${crypto.randomUUID()}`;
const { meta, validate, resetForm } = useForm();
@ -75,7 +83,7 @@ export default {
modalId,
meta,
validate,
resetForm
resetForm,
};
},
computed: {
@ -84,7 +92,7 @@ export default {
return !this.meta.valid;
}
return !this.meta.dirty || !this.meta.valid;
}
},
},
methods: {
async validateAndEmit() {
@ -106,16 +114,20 @@ export default {
this.onModalClosedCallback?.();
},
openModal() {
const modal = Modal.getOrCreateInstance(document.getElementById(this.modalId));
const modal = Modal.getOrCreateInstance(
document.getElementById(this.modalId)
);
modal?.show();
this.$emit('isModalOpened', true);
},
closeModal() {
const modal = Modal.getInstance(document.getElementById(this.modalId));
const modal = Modal.getInstance(
document.getElementById(this.modalId)
);
modal?.hide();
this.$emit('isModalOpened', false);
}
}
},
},
};
</script>

15
src/iss-components/site-footer/footer-image/footer-image.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="footerImage">
<img :src="footerImageURL" />
<img :src="footerImageURL" />
</div>
</template>
<script>
@ -11,15 +11,18 @@ export default {
data() {
return {
widget: {
footer: 'SiteFooterWidget'
}
footer: 'SiteFooterWidget',
},
};
},
computed: {
footerImageURL() {
return this.getCmsContent(this.widget.footer, widgetFields.FOOTER_WIDGET.FOOTER_IMAGE_URL);
}
}
return this.getCmsContent(
this.widget.footer,
widgetFields.FOOTER_WIDGET.FOOTER_IMAGE_URL
);
},
},
};
</script>

181
src/iss-components/site-footer/site-footer.vue
View file

@ -1,50 +1,46 @@
<template>
<div>
<footer
id="infoBox"
class="footer container-fluid g-5 my-5 px-0">
<div
class="row d-flex vw-100 mx-0"
:class="[
isStackedVertically
? 'flex-column align-items-stretch'
: 'flex-row-reverse align-items-center',
]">
<div
id="stacked"
class="col button-col d-flex px-0">
<buttonMain
v-if="!isForwardButtonHidden"
ref="buttonMain"
isPrimary
:buttonText="buttonText"
loaderColor="white"
:class="
(disableForwardAction || isForwardActionDisabled) &&
'form-test-invalid'
"
:aria-disabled="isForwardActionDisabled"
:isDisabled="isForwardActionDisabled"
data-bs-target="#footerModal"
data-bs-dismiss="modal"
data-test-id="site-footer-main-button"
@clickEvent="buttonClick" />
</div>
<div
v-if="!isBackButtonHidden"
class="col-auto link-col py-1 px-0 text-break">
<textLink
linkType="navigation"
:text="backLink"
href="javascript:void(0)"
data-bs-target="#footerModal"
data-bs-dismiss="modal"
data-test-id="site-footer-back-button"
@clickEvent="linkClick" />
</div>
</div>
</footer>
</div>
<div>
<footer id="infoBox" class="footer container-fluid g-5 my-5 px-0">
<div
class="row d-flex vw-100 mx-0"
:class="[
isStackedVertically
? 'flex-column align-items-stretch'
: 'flex-row-reverse align-items-center',
]">
<div id="stacked" class="col button-col d-flex px-0">
<buttonMain
v-if="!isForwardButtonHidden"
ref="buttonMain"
isPrimary
:buttonText="buttonText"
loaderColor="white"
:class="
(disableForwardAction || isForwardActionDisabled) &&
'form-test-invalid'
"
:aria-disabled="isForwardActionDisabled"
:isDisabled="isForwardActionDisabled"
data-bs-target="#footerModal"
data-bs-dismiss="modal"
data-test-id="site-footer-main-button"
@clickEvent="buttonClick" />
</div>
<div
v-if="!isBackButtonHidden"
class="col-auto link-col py-1 px-0 text-break">
<textLink
linkType="navigation"
:text="backLink"
href="javascript:void(0)"
data-bs-target="#footerModal"
data-bs-dismiss="modal"
data-test-id="site-footer-back-button"
@clickEvent="linkClick" />
</div>
</div>
</footer>
</div>
</template>
<script>
@ -56,21 +52,21 @@ export default {
name: 'site-footer',
components: {
textLink,
buttonMain
buttonMain,
},
props: {
isForwardActionDisabled: Boolean,
isBackButtonHidden: { type: Boolean, default: false },
isForwardButtonHidden: { type: Boolean, default: false },
cmsWidgetName: String,
isStackedVertically: { type: Boolean, default: false }
isStackedVertically: { type: Boolean, default: false },
},
emits: ['backClicked', 'forwardClicked'],
data() {
return {
paddingHeight: 0,
customButtontext: '',
disableForwardAction: false
disableForwardAction: false,
};
},
computed: {
@ -83,13 +79,16 @@ export default {
: this.getCmsContent(this.cmsWidgetName, 'ForwardButtonText');
},
footerImageURL() {
const output = this.getCmsContent(this.cmsWidgetName, 'FooterImageURL');
const output = this.getCmsContent(
this.cmsWidgetName,
'FooterImageURL'
);
return output;
},
includeFooterImage() {
const currentPageName = this.getPageNameByQueryString();
return currentPageName.toLowerCase() === issPageValues.WELCOME_PAGE;
}
},
},
mounted() {
this.paddingHeight = this.includeFooterImage
@ -129,67 +128,67 @@ export default {
},
enableForwardAction() {
this.disableForwardAction = false;
}
}
},
},
};
</script>
<style lang="scss" scoped>
.footer {
display: flex;
overflow: visible;
a {
display: flex;
justify-content: center;
}
.col,
.col-auto,
.col button {
width: 100%;
}
@media only screen and (min-width: 340px) {
overflow: visible;
a {
display: flex;
justify-content: center;
}
.col,
.col-auto,
.col button {
width: auto;
justify-content: flex-end;
width: 100%;
}
.btn-primary {
width: auto;
@media only screen and (min-width: 340px) {
.col,
.col-auto,
.col button {
width: auto;
justify-content: flex-end;
}
.btn-primary {
width: auto;
}
a {
display: flex;
justify-content: flex-start;
}
}
a {
display: flex;
justify-content: flex-start;
}
}
& > .container-fluid {
overflow-x: visible; // needed to fix hidden footer on some iphones
}
div.flex-column {
.btn-primary {
width: 100%;
justify-content: center;
& > .container-fluid {
overflow-x: visible; // needed to fix hidden footer on some iphones
}
div.link-col {
display: flex;
justify-content: center;
margin-top: 1.25rem;
div.flex-column {
.btn-primary {
width: 100%;
justify-content: center;
}
div.link-col {
display: flex;
justify-content: center;
margin-top: 1.25rem;
}
}
}
}
.footerImage {
text-align: center;
position: sticky;
text-align: center;
position: sticky;
}
@media only screen and (max-width: 340px) {
.footerImage {
bottom: 78px;
}
.footerImage {
bottom: 78px;
}
}
#siteFooterImage {
width: 100%;
width: 100%;
}
</style>

118
src/iss-components/site-header/menu-modal/menu-modal.vue
View file

@ -31,51 +31,49 @@
<div class="bar3"></div>
</button>
</div>
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header visually-hidden">
<h5
id="footerModalLabel"
class="modal-title">
Footer Navigation
</h5>
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header visually-hidden">
<h5 id="footerModalLabel" class="modal-title">
Footer Navigation
</h5>
</div>
<div class="modal-body d-flex flex-column">
<textLink
linkType="navigation"
text="Terms of service"
href="//www.safelite.com/terms-of-use"
target="_blank" />
<textLink
linkType="navigation"
text="Your privacy choices"
href="//www.safelite.com/privacy-center"
target="_blank">
<template #after-text>
<img
class="ccpa-icon"
data-id="ccpa-icon"
src="~@/assets/img/icons/ccpa-icon.svg"
alt="Your privacy choices" />
</template>
</textLink>
<textLink
linkType="navigation"
text="Warranty"
href="//www.safelite.com/national-lifetime-warranty"
target="_blank" />
<textLink
linkType="navigation"
text="Notice at collection"
href="https://www.safelite.com/ccpa-privacy-policy"
target="_blank" />
</div>
<div class="modal-footer d-flex justify-content-start">
&copy; {{ new Date().getFullYear() }} Safelite Group
</div>
</div>
<div class="modal-body d-flex flex-column">
<textLink
linkType="navigation"
text="Terms of service"
href="//www.safelite.com/terms-of-use"
target="_blank" />
<textLink
linkType="navigation"
text="Your privacy choices"
href="//www.safelite.com/privacy-center"
target="_blank">
<template #after-text>
<img
class="ccpa-icon"
data-id="ccpa-icon"
src="~@/assets/img/icons/ccpa-icon.svg"
alt="Your privacy choices" />
</template>
</textLink>
<textLink
linkType="navigation"
text="Warranty"
href="//www.safelite.com/national-lifetime-warranty"
target="_blank" />
<textLink
linkType="navigation"
text="Notice at collection"
href="https://www.safelite.com/ccpa-privacy-policy"
target="_blank" />
</div>
<div class="modal-footer d-flex justify-content-start">
&copy; {{ new Date().getFullYear() }} Safelite Group
</div>
</div>
</div>
</div>
</template>
<script>
@ -85,12 +83,12 @@ import { Modal } from 'bootstrap';
export default {
name: 'menu-modal',
components: {
textLink
textLink,
},
data() {
return {
isActive: false,
currentFooterAndHeaderHeight: 0
currentFooterAndHeaderHeight: 0,
};
},
methods: {
@ -98,20 +96,26 @@ export default {
if (this.isActive) {
// hide modal
this.isActive = false;
const modal = Modal.getInstance(document.getElementById('footerModal'));
const modal = Modal.getInstance(
document.getElementById('footerModal')
);
modal?.hide();
} else {
// show modal
this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 56;
this.currentFooterAndHeaderHeight =
this.getFooterInfoBoxHeight() + 56;
this.isActive = true;
const modal = Modal.getOrCreateInstance(document.getElementById('footerModal'));
const modal = Modal.getOrCreateInstance(
document.getElementById('footerModal')
);
modal?.show();
document.querySelector('.fade-on-route-transition').scrollTo({
top: 0, behavior: 'instant'
top: 0,
behavior: 'instant',
});
}
}
}
},
},
};
</script>
@ -126,14 +130,14 @@ export default {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
background-color: $white;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0;//Required to prevent 'squish' on iPhone
padding: 0; //Required to prevent 'squish' on iPhone
.bar1,
.bar2,
.bar3 {
@ -146,7 +150,9 @@ export default {
&.active .bar1 {
transform: rotate(-45deg) translate(-3px, 3px);
}
&.active .bar2 {opacity: 0;}
&.active .bar2 {
opacity: 0;
}
&.active .bar3 {
transform: rotate(45deg) translate(-3px, -3px);
}
@ -184,7 +190,7 @@ export default {
.menu-modal-container {
position: absolute;
padding: 1.47rem 1rem 1.47rem 1.47rem;
right: .5rem;
right: 0.5rem;
top: -4.5rem;
button {
border: none;
@ -195,8 +201,8 @@ export default {
box-shadow: none;
background-color: $white;
position: relative;
right: -.5rem;
top: .5rem;
right: -0.5rem;
top: 0.5rem;
display: flex;
flex-direction: column;
justify-content: center;

244
src/layouts/contact-details/contact-details.vue
View file

@ -1,104 +1,103 @@
<template>
<Form
ref="contact-details-form"
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader
ref="siteHeader"
:cmsWidgetName="widget.siteHeader" />
<Form
ref="contact-details-form"
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader
ref="siteHeader"
:cmsWidgetName="widget.siteHeader" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<siteSubHeader
id="sub-header"
ref="siteSubHeader"
class="mt-5"
:cmsWidgetName="widget.siteSubHeader" />
<textboxQuestion
ref="firstNameQuestion"
v-model="firstName"
class="mt-6"
inputId="firstName"
:cmsWidgetName="widget.firstNameQuestion"
isRequired
:validationRules="rules.firstName" />
<textboxQuestion
ref="lastNameQuestion"
v-model="lastName"
class="mt-5"
inputId="lastName"
:cmsWidgetName="widget.lastNameQuestion"
isRequired
:validationRules="rules.lastName" />
<textboxQuestion
ref="emailQuestion"
v-model="emailAddress"
class="mt-5"
inputId="emailAddress"
:cmsWidgetName="widget.emailQuestion"
isRequired
:validationRules="rules.emailAddress" />
<textboxQuestion
ref="phoneNumberQuestion"
v-model="phoneNumber"
class="mt-5"
inputId="phoneNumber"
:cmsWidgetName="widget.phoneNumberQuestion"
isRequired
:mask="phoneMask"
:validationRules="rules.phoneNumber" />
<checkbox
ref="requestTextUpdatesCheckbox"
v-model="requestTextUpdates"
:isChecked="requestTextUpdates"
class="mt-3"
checkboxName="requestTextUpdates"
buttonID="requestTextUpdates"
:checkboxLabel="requestTextUpdatesCheckboxText" />
<textareaQuestion
ref="notesQuestion"
v-model="notesForTechnician"
class="mt-5"
inputId="technicianNotes"
:isDisabled="false"
:isRequired="false"
:cmsWidgetName="widget.notesQuestion"
maxLength="250"
:inputRows="4" />
<p ref="disclaimerText" class="caption dark-gray mt-6">
{{ textUpdateDisclaimerText }} I also agree to
Safelite's
<textLink
ref="privacyPolicyLink"
class="normal-line-height"
linkType="text"
text="Privacy Policy"
href="//www.safelite.com/privacy-center" />
and
<textLink
ref="termsOfUseLink"
class="normal-line-height"
linkType="text"
text="Terms of Use"
href="//www.safelite.com/terms-of-use" />.
</p>
<siteFooter
ref="siteFooter"
class="my-5"
:cmsWidgetName="widget.siteFooter"
:isForwardActionDisabled="!meta.valid"
@forwardClicked="forwardButtonAction"
@backClicked="navigateBack" />
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<siteSubHeader
id="sub-header"
ref="siteSubHeader"
class="mt-5"
:cmsWidgetName="widget.siteSubHeader" />
<textboxQuestion
ref="firstNameQuestion"
v-model="firstName"
class="mt-6"
inputId="firstName"
:cmsWidgetName="widget.firstNameQuestion"
isRequired
:validationRules="rules.firstName" />
<textboxQuestion
ref="lastNameQuestion"
v-model="lastName"
class="mt-5"
inputId="lastName"
:cmsWidgetName="widget.lastNameQuestion"
isRequired
:validationRules="rules.lastName" />
<textboxQuestion
ref="emailQuestion"
v-model="emailAddress"
class="mt-5"
inputId="emailAddress"
:cmsWidgetName="widget.emailQuestion"
isRequired
:validationRules="rules.emailAddress" />
<textboxQuestion
ref="phoneNumberQuestion"
v-model="phoneNumber"
class="mt-5"
inputId="phoneNumber"
:cmsWidgetName="widget.phoneNumberQuestion"
isRequired
:mask="phoneMask"
:validationRules="rules.phoneNumber" />
<checkbox
ref="requestTextUpdatesCheckbox"
v-model="requestTextUpdates"
:isChecked="requestTextUpdates"
class="mt-3"
checkboxName="requestTextUpdates"
buttonID="requestTextUpdates"
:checkboxLabel="requestTextUpdatesCheckboxText" />
<textareaQuestion
ref="notesQuestion"
v-model="notesForTechnician"
class="mt-5"
inputId="technicianNotes"
:isDisabled="false"
:isRequired="false"
:cmsWidgetName="widget.notesQuestion"
maxLength="250"
:inputRows="4" />
<p
ref="disclaimerText"
class="caption dark-gray mt-6">
{{ textUpdateDisclaimerText }} I also agree to Safelite's
<textLink
ref="privacyPolicyLink"
class="normal-line-height"
linkType="text"
text="Privacy Policy"
href="//www.safelite.com/privacy-center" />
and
<textLink
ref="termsOfUseLink"
class="normal-line-height"
linkType="text"
text="Terms of Use"
href="//www.safelite.com/terms-of-use" />.
</p>
<siteFooter
ref="siteFooter"
class="my-5"
:cmsWidgetName="widget.siteFooter"
:isForwardActionDisabled="!meta.valid"
@forwardClicked="forwardButtonAction"
@backClicked="navigateBack" />
</div>
</div>
</div>
</Form>
</Form>
</template>
<script>
// Components
@ -129,7 +128,7 @@ export default {
siteFooter,
// eslint-disable-next-line vue/no-reserved-component-names
Form,
textLink
textLink,
},
mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) {
@ -146,7 +145,7 @@ export default {
emailAddress,
servicePhone,
requestTextUpdates,
notesForTechnician
notesForTechnician,
} = useMainStore().contactInfo;
return {
firstName,
@ -165,22 +164,25 @@ export default {
requestTextUpdates: 'TextContentWidget',
notesQuestion: 'NotesQuestionWidget',
disclaimer: 'TextUpdateDisclaimerWidget',
siteFooter: 'SiteFooterWidget'
siteFooter: 'SiteFooterWidget',
},
rules: {
firstName: globalRules.FIRST_NAME_REQUIRED,
lastName: globalRules.LAST_NAME_REQUIRED,
emailAddress: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`
}
phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`,
},
};
},
computed: {
/**
* @returns {string} Returns the CMS text associated with the "get text updates" checkbox.
*/
/**
* @returns {string} Returns the CMS text associated with the "get text updates" checkbox.
*/
requestTextUpdatesCheckboxText() {
return `${this.getCmsContent(this.widget.requestTextUpdates, 'Text')}*`;
return `${this.getCmsContent(
this.widget.requestTextUpdates,
'Text'
)}*`;
},
/**
* @returns {string} Returns the CMS text associated with the "get text updates" checkbox.
@ -190,7 +192,7 @@ export default {
},
phoneMask() {
return MaskaFormattedMasks.PHONE_NUMBER;
}
},
},
methods: {
/**
@ -202,37 +204,41 @@ export default {
lastName: this.lastName,
emailAddress: this.emailAddress,
requestTextUpdates: this.requestTextUpdates,
notesForTechnician: this.notesForTechnician
notesForTechnician: this.notesForTechnician,
};
useMainStore().updateContactInfo(contactInfo);
if (this.requestTextUpdates) {
useMainStore().updatePhoneNumbers({
service: this.phoneNumber,
alternative: this.phoneNumber
alternative: this.phoneNumber,
});
} else {
useMainStore().updatePhoneNumbers({
home: this.phoneNumber,
service: this.phoneNumber
service: this.phoneNumber,
});
}
const scenario = useMainStore().order.serviceLocation.IsSafeliteProvider === false
? this.navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP
: this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP;
const scenario =
useMainStore().order.serviceLocation.IsSafeliteProvider ===
false
? this.navigationScenarios
.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP
: this.navigationScenarios
.CLICKED_FORWARD_WITH_SAFELITE_SHOP;
this.$router.navigate(scenario, this.$route);
}
}
},
},
};
</script>
<style lang="scss" scoped>
.dark-gray {
color: $darker-gray;
color: $darker-gray;
}
.normal-line-height {
line-height: normal;
line-height: normal;
}
</style>

387
src/layouts/coverage-statement/coverage-statement.vue
View file

@ -1,99 +1,97 @@
<template>
<Form
ref="theForm"
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<loadingModal
ref="loadingModal"
:textSlides="loadingText" />
<siteHeader
ref="siteHeader"
cmsWidgetName="SiteHeaderWidget" />
<Form
ref="theForm"
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<loadingModal
ref="loadingModal"
:textSlides="loadingText" />
<siteHeader
ref="siteHeader"
cmsWidgetName="SiteHeaderWidget" />
</div>
</div>
<div class="row justify-content-center pt-5">
<div class="col-md-6 col-xl-4">
<h5
ref="siteSubHeader"
class="text-center text-black"
v-html="coverageStatementSubHeader"></h5>
<div
ref="explanatoryText"
class="body-text text-center mt-2"
v-html="explanatoryText"></div>
<div
ref="secondaryText"
class="text-center mt-4 mb-1 fw-bold text-black"
v-html="secondaryText"></div>
<div
v-if="verifiedDeductible"
class="d-flex justify-content-center cost">
{{ deductibleForDisplay }}
</div>
<div
v-if="isQuoteDisplayed"
class="d-flex justify-content-center cost mb-0">
{{ servicePriceForDisplay }}
</div>
<div
v-if="verifiedITAC"
class="d-flex justify-content-center mb-4 deductible-text">
{{ deductibleText }}&nbsp;
<span class="text-success fw-bold">{{
deductibleForDisplay
}}</span>
</div>
<alert
v-if="verifiedITAC"
ref="verifiedITACAlert"
class="mb-5"
cmsWidgetName="VerifiedITACAlert"
:manualHeadline="verifiedItacAlertHeader"
:manualCopy="verifiedItacAlertBody"
alertClass="alert-success"
:isDismissible="false">
</alert>
<div
class="fw-bold text-black mt-5 mb-2"
v-html="nextStepsHeader"></div>
<div class="body-text" v-html="nextStepsBody"></div>
<buttonQuestion
v-if="isQuoteDisplayed"
v-model="selectedProvider"
cmsWidgetName="ServiceProviderQuestion"
:questionText="serviceProviderQuestionText"
:answers="serviceProviderQuestionAnswers"
groupName="ServiceProviderQuestionOption"
buttonTypeString="listButton"
isRequired
:validationRules="rules.selectionRequired">
</buttonQuestion>
<text-block
v-if="isQuoteDisplayed"
cmsWidgetName="DisclaimerWidget"
typeStyle="caption" />
<siteFooter
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="navigateBackByVehicleQuestions"
@forwardClicked="navigateForward" />
</div>
</div>
</div>
</div>
<div class="row justify-content-center pt-5">
<div class="col-md-6 col-xl-4">
<h5
ref="siteSubHeader"
class="text-center text-black"
v-html="coverageStatementSubHeader"></h5>
<div
ref="explanatoryText"
class="body-text text-center mt-2"
v-html="explanatoryText"></div>
<div
ref="secondaryText"
class="text-center mt-4 mb-1 fw-bold text-black"
v-html="secondaryText"></div>
<div
v-if="verifiedDeductible"
class="d-flex justify-content-center cost">
{{ deductibleForDisplay }}
</div>
<div
v-if="isQuoteDisplayed"
class="d-flex justify-content-center cost mb-0">
{{ servicePriceForDisplay }}
</div>
<div
v-if="verifiedITAC"
class="d-flex justify-content-center mb-4 deductible-text">
{{ deductibleText }}&nbsp;
<span class="text-success fw-bold">{{ deductibleForDisplay }}</span>
</div>
<alert
v-if="verifiedITAC"
ref="verifiedITACAlert"
class="mb-5"
cmsWidgetName="VerifiedITACAlert"
:manualHeadline="verifiedItacAlertHeader"
:manualCopy="verifiedItacAlertBody"
alertClass="alert-success"
:isDismissible="false">
</alert>
<div
class="fw-bold text-black mt-5 mb-2"
v-html="nextStepsHeader"></div>
<div
class="body-text"
v-html="nextStepsBody"></div>
<buttonQuestion
v-if="isQuoteDisplayed"
v-model="selectedProvider"
cmsWidgetName="ServiceProviderQuestion"
:questionText="serviceProviderQuestionText"
:answers="serviceProviderQuestionAnswers"
groupName="ServiceProviderQuestionOption"
buttonTypeString="listButton"
isRequired
:validationRules="rules.selectionRequired">
</buttonQuestion>
<text-block
v-if="isQuoteDisplayed"
cmsWidgetName="DisclaimerWidget"
typeStyle="caption" />
<siteFooter
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="navigateBackByVehicleQuestions"
@forwardClicked="navigateForward" />
</div>
</div>
</div>
<recalModal
ref="RecalModal"
cmsWidgetName="RecalModal" />
<contentGroupModal
ref="DeductibleModal"
cmsWidgetName="DeductibleModal"
class="deductible-modal" />
</Form>
<recalModal ref="RecalModal" cmsWidgetName="RecalModal" />
<contentGroupModal
ref="DeductibleModal"
cmsWidgetName="DeductibleModal"
class="deductible-modal" />
</Form>
</template>
<script>
// Import Component
@ -111,7 +109,7 @@ import textBlock from '@/digital-components/text-block/text-block.vue';
import {
fetchCmsContentForPage,
setupModalLinks,
processIfStatements
processIfStatements,
} from '@/helpers/cms-content-helper.js';
import settleAllPromises from '@/helpers/layout-helper.js';
import { getDamageString } from '@/helpers/damage-helper.js';
@ -141,24 +139,25 @@ export default {
contentGroupModal,
buttonQuestion,
loadingModal,
textBlock
textBlock,
},
mixins: [baseFormMixin, vehicleQuestionsMixin],
async beforeRouteEnter(to, from, next) {
// Call APIs
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to?.query?.issPage);
const supportingItemsPromise = await useMainStore().getSupportingItems();
const supportingItemsPromise =
await useMainStore().getSupportingItems();
// Settle promises and get results
const promiseResultMap = [
{
resultKey: 'cmsContent',
promise: cmsContentPromise
promise: cmsContentPromise,
},
{
resultKey: 'supportingItems',
promise: supportingItemsPromise
}
promise: supportingItemsPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
@ -167,23 +166,29 @@ export default {
: [];
const availableLineItems = [
...(resultMap.supportingItems ?? []),
...(clonedGlassParts ?? [])
...(clonedGlassParts ?? []),
];
let hasBailedOut = false;
let pricingResults = [];
if (
useMainStore().policy.policyLookupSuccessful
&& useMainStore().vehicle.policyVehicleId >= 0
useMainStore().policy.policyLookupSuccessful &&
useMainStore().vehicle.policyVehicleId >= 0
) {
await useMainStore().getFinalDeductible();
pricingResults = await useMainStore()
.getPriceOrderItems(availableLineItems)
.catch((err) => {
useMainStore().setBailout(bailoutMessage.pricingResponseError(
availableLineItems.map((li) => li.partNumber),
{ code: err.code, message: err.message, data: err.data }
));
useMainStore().setBailout(
bailoutMessage.pricingResponseError(
availableLineItems.map((li) => li.partNumber),
{
code: err.code,
message: err.message,
data: err.data,
}
)
);
hasBailedOut = true;
next(`/?issPage=${issPageValues.BAILOUT_PAGE}`);
});
@ -218,10 +223,10 @@ export default {
loadingText: [
'Connecting to your insurance company',
'Nearly there',
'Finishing up'
'Finishing up',
],
rules: {
selectionRequired: globalRules.OPTION_REQUIRED
selectionRequired: globalRules.OPTION_REQUIRED,
},
supportingItems: null,
widget: {
@ -229,8 +234,8 @@ export default {
verifiedItacAlert: 'VerifiedITACAlert',
explanatoryText: 'ExplanatoryTextWidget',
nextStep: 'NextStepsWidget',
serviceProviderQuestion: 'ServiceProviderQuestion'
}
serviceProviderQuestion: 'ServiceProviderQuestion',
},
};
},
computed: {
@ -250,7 +255,10 @@ export default {
return this.getCmsContent(
this.widget.verifiedItacAlert,
widgetFields.ALERT_WIDGET.BODY_TEXT
)?.replaceAll('{custom:costSavings}', this.itacCostSavingsForDisplay);
)?.replaceAll(
'{custom:costSavings}',
this.itacCostSavingsForDisplay
);
},
secondaryText() {
return this.getTextFromCmsWithCustomIfStatements(
@ -294,33 +302,37 @@ export default {
},
verifiedITAC() {
return (
this.policyLookupSuccessful
&& !this.isNoComp
&& this.deductibleValue > this.totalServicePrice
this.policyLookupSuccessful &&
!this.isNoComp &&
this.deductibleValue > this.totalServicePrice
);
},
coveredAndServicePriceAboveOrEqualDeductible() {
return (
!this.verifiedNoComp && this.totalServicePrice >= this.deductibleValue
!this.verifiedNoComp &&
this.totalServicePrice >= this.deductibleValue
);
},
verifiedDeductible() {
return useMainStore().isClaimRegistrationRequired
? this.registerClaimSuccessful
&& this.coveredAndServicePriceAboveOrEqualDeductible
&& this.deductibleValue !== null
: this.policyLookupSuccessful
&& this.coveredAndServicePriceAboveOrEqualDeductible;
? this.registerClaimSuccessful &&
this.coveredAndServicePriceAboveOrEqualDeductible &&
this.deductibleValue !== null
: this.policyLookupSuccessful &&
this.coveredAndServicePriceAboveOrEqualDeductible;
},
unverified() {
return (
!this.verifiedDeductible && !this.verifiedITAC && !this.verifiedNoComp
!this.verifiedDeductible &&
!this.verifiedITAC &&
!this.verifiedNoComp
);
},
isADAS() {
const parts = useMainStore().order.lineItems.glassParts;
return (
parts !== null && !!parts.find((part) => part.requiresRecalibration)
parts !== null &&
!!parts.find((part) => part.requiresRecalibration)
);
},
totalServicePrice() {
@ -352,21 +364,22 @@ export default {
},
shouldRegisterClaim() {
return (
this.policyLookupSuccessful
&& useMainStore().vehicle.policyVehicleId != null
&& useMainStore().vehicle.policyVehicleId >= 0
&& useMainStore().isClaimRegistrationRequired
&& !useMainStore().isClaimAlreadyRegistered
&& (this.coveredAndServicePriceAboveOrEqualDeductible || this.verifiedITAC)
this.policyLookupSuccessful &&
useMainStore().vehicle.policyVehicleId != null &&
useMainStore().vehicle.policyVehicleId >= 0 &&
useMainStore().isClaimRegistrationRequired &&
!useMainStore().isClaimAlreadyRegistered &&
(this.coveredAndServicePriceAboveOrEqualDeductible ||
this.verifiedITAC)
);
}
},
},
watch: {
selectedProvider() {
const buttonText =
this.selectedProvider === SAFELITE_PROVIDER
? 'Continue with Safelite'
: 'Safelite';
this.selectedProvider === SAFELITE_PROVIDER
? 'Continue with Safelite'
: 'Safelite';
this.$refs.siteFooter.updateButtonText(buttonText);
},
nextStepsBody(newValue, oldValue) {
@ -374,7 +387,7 @@ export default {
setupModalLinks(this, 'RecalModal');
setupModalLinks(this, 'DeductibleModal');
}
}
},
},
mounted() {
setupModalLinks(this);
@ -386,9 +399,9 @@ export default {
async initializeComponent() {
useMainStore().updatePolicyITACFlag(this.verifiedITAC);
const coverageStatus =
this.verifiedITAC || this.verifiedNoComp
? coverageStatuses.VERIFIED
: coverageStatuses.PENDING;
this.verifiedITAC || this.verifiedNoComp
? coverageStatuses.VERIFIED
: coverageStatuses.PENDING;
useMainStore().updateCoverageStatus(coverageStatus);
if (this.shouldRegisterClaim) {
await useMainStore()
@ -402,17 +415,27 @@ export default {
useMainStore().updateSupportingItems(this.supportingItems);
this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD);
} else if (this.verifiedITAC || this.verifiedNoComp) {
useMainStore().updateIsSafeliteProvider(this.selectedProvider === SAFELITE_PROVIDER);
useMainStore().updateIsSafeliteProvider(
this.selectedProvider === SAFELITE_PROVIDER
);
if (this.selectedProvider === SAFELITE_PROVIDER) {
useMainStore().updateSupportingItems(this.supportingItems);
this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE);
this.navigateWithScenario(
navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE
);
} else {
useMainStore().setBailout(bailoutMessage.RequestCallback());
this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP);
this.navigateWithScenario(
navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP
);
}
} else {
useMainStore().setBailout(bailoutMessage.coverageStatementInvalidState());
this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_INVALID_STATE);
useMainStore().setBailout(
bailoutMessage.coverageStatementInvalidState()
);
this.navigateWithScenario(
navigationScenarios.CLICKED_FORWARD_WITH_INVALID_STATE
);
}
},
navigateWithScenario(scenario) {
@ -443,9 +466,13 @@ export default {
case 'nonADASRepair':
return this.isRepair;
case 'deductibleOverZero':
return this.verifiedDeductible && this.deductibleValue !== 0; // TODO what if deductible is negative?
return (
this.verifiedDeductible && this.deductibleValue !== 0
); // TODO what if deductible is negative?
case 'isDeductibleZero':
return this.verifiedDeductible && this.deductibleValue === 0;
return (
this.verifiedDeductible && this.deductibleValue === 0
);
default:
return null;
}
@ -455,59 +482,59 @@ export default {
},
setBaseServiceLineItems(lineItems) {
this.baseServiceLineItems = lineItems;
}
}
},
},
};
</script>
<style lang="scss" scoped>
.cost {
color: $green;
font-size: 2rem;
font-weight: $font-weight-light;
line-height: 2.75rem;
color: $green;
font-size: 2rem;
font-weight: $font-weight-light;
line-height: 2.75rem;
}
.deductible-text {
line-height: 1.5rem;
line-height: 1.5rem;
}
:deep p {
line-height: 1.5rem;
font-size: 0.875rem;
margin-bottom: 0.5rem;
strong {
color: $black;
}
line-height: 1.5rem;
font-size: 0.875rem;
margin-bottom: 0.5rem;
strong {
color: $black;
}
}
:deep .question-text {
margin-top: 1.5rem;
margin-bottom: 0.5rem;
font-size: 1rem;
line-height: 1.5rem;
& > span {
text-align: left;
}
margin-top: 1.5rem;
margin-bottom: 0.5rem;
font-size: 1rem;
line-height: 1.5rem;
& > span {
text-align: left;
}
}
:deep .deductible-modal {
p {
margin-bottom: 0 !important;
font-size: 1rem;
line-height: 1.625rem;
}
img.mb-4 {
margin: 0 !important;
}
h5 {
color: black;
}
p:last-child {
margin-top: 0.5rem;
}
p {
margin-bottom: 0 !important;
font-size: 1rem;
line-height: 1.625rem;
}
img.mb-4 {
margin: 0 !important;
}
h5 {
color: black;
}
p:last-child {
margin-top: 0.5rem;
}
}
.modal {
overflow: hidden;
overflow: hidden;
}
</style>

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

@ -1,46 +1,46 @@
<template>
<Form
ref="duplicate-check-form"
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader
ref="siteHeader"
:cmsWidgetName="widget.siteHeader" />
<Form
ref="duplicate-check-form"
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader
ref="siteHeader"
:cmsWidgetName="widget.siteHeader" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<siteSubHeader
id="sub-header"
ref="siteSubHeader"
class="mt-5 duplicate-check-subheader"
:cmsWidgetName="widget.siteSubHeader" />
<buttonQuestion
ref="buttonQuestion"
v-model="selectedAnswer"
class="duplicate-check-question"
:cmsWidgetName="widget.existingOrNewQuestion"
:questionText="questionText"
:answers="answers"
groupName="existingOrNewQuestionOption"
buttonTypeString="listButton"
isRequired
:validationRules="rules.selectionRequired" />
<siteFooter
ref="siteFooter"
class="my-5"
:cmsWidgetName="widget.siteFooter"
:isForwardActionDisabled="!meta.valid"
@forwardClicked="forwardButtonAction"
@backClicked="navigateBack" />
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<siteSubHeader
id="sub-header"
ref="siteSubHeader"
class="mt-5 duplicate-check-subheader"
:cmsWidgetName="widget.siteSubHeader" />
<buttonQuestion
ref="buttonQuestion"
v-model="selectedAnswer"
class="duplicate-check-question"
:cmsWidgetName="widget.existingOrNewQuestion"
:questionText="questionText"
:answers="answers"
groupName="existingOrNewQuestionOption"
buttonTypeString="listButton"
isRequired
:validationRules="rules.selectionRequired" />
<siteFooter
ref="siteFooter"
class="my-5"
:cmsWidgetName="widget.siteFooter"
:isForwardActionDisabled="!meta.valid"
@forwardClicked="forwardButtonAction"
@backClicked="navigateBack" />
</div>
</div>
</div>
</Form>
</Form>
</template>
<script>
@ -66,7 +66,7 @@ export default {
buttonQuestion,
siteFooter,
// eslint-disable-next-line vue/no-reserved-component-names
Form
Form,
},
mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) {
@ -83,11 +83,11 @@ export default {
siteHeader: 'SiteHeaderWidget',
siteSubHeader: 'SiteSubHeaderWidget',
existingOrNewQuestion: 'ExistingOrNewQuestion',
siteFooter: 'SiteFooterWidget'
siteFooter: 'SiteFooterWidget',
},
rules: {
selectionRequired: globalRules.OPTION_REQUIRED
}
selectionRequired: globalRules.OPTION_REQUIRED,
},
};
},
computed: {
@ -99,7 +99,10 @@ export default {
},
answersFromCms() {
return (
this.getCmsContent(this.widget.existingOrNewQuestion, 'Answers') ?? []
this.getCmsContent(
this.widget.existingOrNewQuestion,
'Answers'
) ?? []
);
},
getNewOrderSelectionName() {
@ -111,40 +114,40 @@ export default {
return (
orders?.map((o) => {
const vehicle =
!!o.vehicleYear && !!o.vehicleMake && !!o.vehicleModel
? `${o.vehicleYear} ${o.vehicleMake} ${o.vehicleModel}`
: null;
!!o.vehicleYear && !!o.vehicleMake && !!o.vehicleModel
? `${o.vehicleYear} ${o.vehicleMake} ${o.vehicleModel}`
: null;
const dateOfLoss =
o.responseDate == null
? ''
: new Date(o.responseDate).toLocaleDateString();
o.responseDate == null
? ''
: new Date(o.responseDate).toLocaleDateString();
const subtext =
vehicle && o.responseDate
? `${vehicle}, ${dateOfLoss}`
: (vehicle ?? '').concat(dateOfLoss);
vehicle && o.responseDate
? `${vehicle}, ${dateOfLoss}`
: (vehicle ?? '').concat(dateOfLoss);
return {
Text: duplicateOrderText,
Name: o.referralNumber,
SubText: toTitleCase(subtext),
value: o
value: o,
};
}) ?? []
);
},
answers() {
return [...this.duplicateOrders, ...this.answersFromCms];
}
},
},
methods: {
/**
* @summary Steps to perform when forward button clicked.
*/
/**
* @summary Steps to perform when forward button clicked.
*/
async forwardButtonAction() {
if (
this.selectedAnswer !== null
&& typeof this.selectedAnswer === 'object'
this.selectedAnswer !== null &&
typeof this.selectedAnswer === 'object'
) {
await useMainStore()
.loadSession(this.selectedAnswer)
@ -203,31 +206,31 @@ export default {
this.$route
);
}
}
}
},
},
};
</script>
<style lang="scss">
.duplicate-check-subheader {
.subheader-secondary {
margin-top: map-get($spacers, 2);
}
p {
span {
font-size: $h6-font-size;
.subheader-secondary {
margin-top: map-get($spacers, 2);
}
p {
span {
font-size: $h6-font-size;
}
}
}
}
.duplicate-check-question {
.question-text {
justify-content: left;
display: inline-flex !important;
margin-top: map-get($spacers, 4);
margin-bottom: map-get($spacers, 2);
}
.form-test-error {
margin-top: 0 !important;
}
.question-text {
justify-content: left;
display: inline-flex !important;
margin-top: map-get($spacers, 4);
margin-bottom: map-get($spacers, 2);
}
.form-test-error {
margin-top: 0 !important;
}
}
</style>

195
src/layouts/policy-vehicles/policy-vehicles.vue
View file

@ -1,40 +1,40 @@
<template>
<Form
ref="theForm"
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader
class="mb-2 header"
cmsWidgetName="SiteHeaderWidget" />
<Form
ref="theForm"
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader
class="mb-2 header"
cmsWidgetName="SiteHeaderWidget" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<div class="select-car-form rounded text-center">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="displayGeneric"
class="mt-2 mb-4" />
<policyVehiclesQuestion
v-model="selectedVehicleVin"
cmsWidgetName="PolicyVehiclesQuestion"
:vehicles="VehiclesForQuestions"
:validationRules="rules.optionRequired" />
<siteFooter
ref="siteFooter"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
@backClicked="backButtonAction" />
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<div class="select-car-form rounded text-center">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="displayGeneric"
class="mt-2 mb-4" />
<policyVehiclesQuestion
v-model="selectedVehicleVin"
cmsWidgetName="PolicyVehiclesQuestion"
:vehicles="VehiclesForQuestions"
:validationRules="rules.optionRequired" />
<siteFooter
ref="siteFooter"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
@backClicked="backButtonAction" />
</div>
</div>
</div>
</div>
</Form>
</Form>
</template>
<script>
// Components
@ -55,7 +55,7 @@ import {
deductibleForSelectedVehicle,
endorsementsForSelectedVehicle,
noCoverageForSelectedVehicle,
repairWaivedForSelectedVehicle
repairWaivedForSelectedVehicle,
} from '@/helpers/policy-vehicle-helper';
export default {
@ -66,11 +66,13 @@ export default {
vehicleBanner,
policyVehiclesQuestion,
// eslint-disable-next-line vue/no-reserved-component-names
Form
Form,
},
mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) {
const cmsContentPromise = await fetchCmsContentForPage(to.query.issPage);
const cmsContentPromise = await fetchCmsContentForPage(
to.query.issPage
);
next((vm) => {
vm.setCmsContent(cmsContentPromise);
});
@ -88,8 +90,8 @@ export default {
displayGeneric: true,
policyVinFound: true,
rules: {
optionRequired: globalRules.OPTION_REQUIRED
}
optionRequired: globalRules.OPTION_REQUIRED,
},
};
},
computed: {
@ -97,18 +99,18 @@ export default {
// Map API result data, to address-vehicles data structure
const vehicles = this.policyVehicles;
const mappedData =
vehicles?.map((v) => {
const maskSymbol = 'X';
const vinStart = maskSymbol.repeat(v.vin.length - 6);
const vinEnd = v.vin.substring(v.vin.length - 6);
return {
vin: v.vin,
vehicle: v,
Text: `${v.vehicleYear} ${v.vehicleMake} ${v.vehicleModel}`,
Name: v.vin,
SubText: `VIN ${vinStart}${vinEnd}`
};
}) ?? [];
vehicles?.map((v) => {
const maskSymbol = 'X';
const vinStart = maskSymbol.repeat(v.vin.length - 6);
const vinEnd = v.vin.substring(v.vin.length - 6);
return {
vin: v.vin,
vehicle: v,
Text: `${v.vehicleYear} ${v.vehicleMake} ${v.vehicleModel}`,
Name: v.vin,
SubText: `VIN ${vinStart}${vinEnd}`,
};
}) ?? [];
return mappedData;
},
noCoverageForSelectedVehicle() {
@ -124,9 +126,11 @@ export default {
return repairWaivedForSelectedVehicle(this.selectedPolicyVehicle);
},
selectedVehicle() {
const vehicle = this.mainStore.lookupVehicleByVin(this.selectedVehicleVin);
const vehicle = this.mainStore.lookupVehicleByVin(
this.selectedVehicleVin
);
return vehicle;
}
},
},
watch: {
async selectedVehicleVin(value) {
@ -150,10 +154,12 @@ export default {
// save selected vehicle to the store
this.mainStore.updateVehicle(vehicle.data);
this.displayGeneric = false;
this.selectedPolicyVehicle = this.policyVehicles.find((p) => p.vin === value);
this.selectedPolicyVehicle = this.policyVehicles.find(
(p) => p.vin === value
);
}
}
}
},
},
beforeMount() {
if (this.mainStore.order.vehicle.vin) {
@ -165,14 +171,22 @@ export default {
methods: {
backButtonAction() {
useMainStore().issConfig.disabledFields.policyNumber = true;
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
this.$router.navigate(
this.navigationScenarios.CLICKED_BACK,
this.$route
);
},
async forwardButtonAction() {
if (
this.selectedVehicleVin !== vehicleSelectionOptions.VEHICLE_NOT_LISTED
this.selectedVehicleVin !==
vehicleSelectionOptions.VEHICLE_NOT_LISTED
) {
const vehicleLookupResponse = await this.lookupVehicleByVin(this.selectedVehicleVin);
const vehicle = this.policyVehicles.find((pv) => pv.vin === this.selectedVehicleVin);
const vehicleLookupResponse = await this.lookupVehicleByVin(
this.selectedVehicleVin
);
const vehicle = this.policyVehicles.find(
(pv) => pv.vin === this.selectedVehicleVin
);
if (vehicleLookupResponse.error) {
if (vehicleLookupResponse.status === 404) {
@ -188,27 +202,32 @@ export default {
vin: vehicle.vin,
noCoverage: this.noCoverageForSelectedVehicle,
deductible: this.deductibleForSelectedVehicle,
repairWaived: this.repairWaivedForSelectedVehicle
repairWaived: this.repairWaivedForSelectedVehicle,
});
this.policyVinFound = false;
return this.navigateForward();
}
this.mainStore.setBailout(bailoutMessage.vehicleLookupError(
vehicle.vin,
vehicleLookupResponse.data
));
this.mainStore.setBailout(
bailoutMessage.vehicleLookupError(
vehicle.vin,
vehicleLookupResponse.data
)
);
return this.navigateForward();
}
this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, {
policyVehicleId: vehicle.id,
vin: this.selectedVehicleVin,
noCoverage: this.noCoverageForSelectedVehicle,
deductible: this.deductibleForSelectedVehicle,
repairWaived: this.repairWaivedForSelectedVehicle,
endorsements: this.endorsementsForSelectedVehicle
});
this.vehicleFromLookup = Object.assign(
vehicleLookupResponse.data,
{
policyVehicleId: vehicle.id,
vin: this.selectedVehicleVin,
noCoverage: this.noCoverageForSelectedVehicle,
deductible: this.deductibleForSelectedVehicle,
repairWaived: this.repairWaivedForSelectedVehicle,
endorsements: this.endorsementsForSelectedVehicle,
}
);
useMainStore().updateVehicle(this.vehicleFromLookup);
}
@ -223,7 +242,8 @@ export default {
{}
);
} else if (
this.selectedVehicleVin === vehicleSelectionOptions.VEHICLE_NOT_LISTED
this.selectedVehicleVin ===
vehicleSelectionOptions.VEHICLE_NOT_LISTED
) {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_NON_LISTED_VEHICLE,
@ -232,9 +252,13 @@ export default {
{}
);
} else if (
this.endorsementsForSelectedVehicle?.length > 0
&& (this.endorsementsForSelectedVehicle?.includes(endorsementOptions.PARKING_GUARD)
|| this.endorsementsForSelectedVehicle?.includes(endorsementOptions.EDUCATOR))
this.endorsementsForSelectedVehicle?.length > 0 &&
(this.endorsementsForSelectedVehicle?.includes(
endorsementOptions.PARKING_GUARD
) ||
this.endorsementsForSelectedVehicle?.includes(
endorsementOptions.EDUCATOR
))
) {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_ENDORSEMENTS,
@ -242,7 +266,8 @@ export default {
);
} else if (!this.policyVinFound) {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_CAR_ID_NOT_FOUND,
this.navigationScenarios
.CLICKED_FORWARD_WITH_CAR_ID_NOT_FOUND,
this.$route,
{},
{}
@ -263,21 +288,21 @@ export default {
return {
error: true,
status: responseError.status,
data: responseError.data
data: responseError.data,
};
}
}
}
},
},
};
</script>
<style lang="scss" scoped>
.header {
margin-bottom: 0rem !important;
margin-bottom: 0rem !important;
}
:deep(.form-test-error) {
text-align: left;
margin-top: 0rem !important;
line-height: 1.5rem;
text-align: left;
margin-top: 0rem !important;
line-height: 1.5rem;
}
</style>
<!-- †est comment -->

198
src/layouts/provider-preference/provider-preference.vue
View file

@ -1,68 +1,63 @@
<template>
<Form
ref="theForm"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader
class="mb-2 header"
cmsWidgetName="SiteHeaderWidget" />
<Form ref="theForm" @submit="onSubmit" @invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader
class="mb-2 header"
cmsWidgetName="SiteHeaderWidget" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<siteSubHeader
id="sub-header"
cmsWidgetName="SiteSubHeader"
class="mb-5 mt-4" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<buttonQuestion
ref="buttonQuestion"
v-model="selectedProvider"
questionText="Select an option:"
:answers="prefAnswers"
groupName="prefQuestions"
buttonTypeString="providerPrefRadio"
:validationRules="rules.optionRequired"
isRequired />
<siteFooter
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="isForwardActionDisabled"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div>
</div>
<recalModal ref="recalModal" cmsWidgetName="RecalModal" />
<steeringModal
ref="StateSteeringModal"
cmsWidgetName="StateSteeringModal" />
<shopPreferenceModal
ref="ShopPreferenceDrawer"
cmsWidgetName="ShopPreferenceDrawer"
:showSteeringLink="showSteeringLink"
@openSteering="openStateSteeringModal" />
<tpaRecalModal
ref="TPARecalModal"
cmsWidgetName="TPARecalModal"
:ackError="ackError"
@buttonClick="navigateWithTPAAck" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<siteSubHeader
id="sub-header"
cmsWidgetName="SiteSubHeader"
class="mb-5 mt-4" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<buttonQuestion
ref="buttonQuestion"
v-model="selectedProvider"
questionText="Select an option:"
:answers="prefAnswers"
groupName="prefQuestions"
buttonTypeString="providerPrefRadio"
:validationRules="rules.optionRequired"
isRequired />
<siteFooter
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="isForwardActionDisabled"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div>
</div>
<recalModal
ref="recalModal"
cmsWidgetName="RecalModal" />
<steeringModal
ref="StateSteeringModal"
cmsWidgetName="StateSteeringModal" />
<shopPreferenceModal
ref="ShopPreferenceDrawer"
cmsWidgetName="ShopPreferenceDrawer"
:showSteeringLink="showSteeringLink"
@openSteering="openStateSteeringModal" />
<tpaRecalModal
ref="TPARecalModal"
cmsWidgetName="TPARecalModal"
:ackError="ackError"
@buttonClick="navigateWithTPAAck" />
</div>
</Form>
</Form>
</template>
<script>
// Import Supporting Files
import {
fetchCmsContentForPage,
setupModalLinks
setupModalLinks,
} from '@/helpers/cms-content-helper';
import settleAllPromises from '@/helpers/layout-helper';
import errorMessages from '@/constants/error-messages';
@ -98,7 +93,7 @@ export default {
recalModal,
steeringModal,
shopPreferenceModal,
tpaRecalModal
tpaRecalModal,
},
mixins: [baseFormMixin],
async beforeRouteEnter(to, from, next) {
@ -107,8 +102,8 @@ export default {
const promiseResultMap = [
{
resultKey: 'cmsContent',
promise: cmsContentPromise
}
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
@ -126,8 +121,8 @@ export default {
showSteeringLink: false,
tpaAcknowledgement: false,
rules: {
optionRequired: globalRules.OPTION_REQUIRED
}
optionRequired: globalRules.OPTION_REQUIRED,
},
};
},
computed: {
@ -137,35 +132,44 @@ export default {
prefAnswers() {
const cmsAnswersContent = [
{
cmsWidgetName: options.SAFELITE
cmsWidgetName: options.SAFELITE,
},
{
cmsWidgetName: options.TPA
}
cmsWidgetName: options.TPA,
},
];
// if cms content has not yet loaded, skip
if (
!this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, 'HeaderText')
|| this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, 'HeaderText')
=== ''
!this.getCmsContent(
cmsAnswersContent[0].cmsWidgetName,
'HeaderText'
) ||
this.getCmsContent(
cmsAnswersContent[0].cmsWidgetName,
'HeaderText'
) === ''
) {
return {};
}
const modifiedAnswers = cmsAnswersContent.map((answer) => ({
value: answer.cmsWidgetName,
buttonLabel: this.getHeaderTextFromCms(answer.cmsWidgetName),
buttonLabelSubCopy: this.getSubheaderTextFromCms(answer.cmsWidgetName),
buttonBodyCopy: this.getBodyTextFromCms(answer.cmsWidgetName)
buttonLabelSubCopy: this.getSubheaderTextFromCms(
answer.cmsWidgetName
),
buttonBodyCopy: this.getBodyTextFromCms(answer.cmsWidgetName),
}));
return modifiedAnswers;
},
ackError() {
return errorMessages.ACKNOWLEDGEMENT_REQUIRED;
}
},
},
mounted() {
setupModalLinks(this);
const pageData = this.mainStore.pageData(issPageValues.PROVIDER_PREFERENCE);
const pageData = this.mainStore.pageData(
issPageValues.PROVIDER_PREFERENCE
);
this.selectedProvider = pageData?.selectedProvider
? pageData.selectedProvider
: null;
@ -196,9 +200,11 @@ export default {
navigateWithTPAAck() {
this.mainStore.saveProviderPreferenceData({
selectedProvider: this.selectedProvider,
tpaAcknowledgement: this.tpaAcknowledgement
tpaAcknowledgement: this.tpaAcknowledgement,
});
this.navigateForward(this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED);
this.navigateForward(
this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED
);
},
forwardButtonAction() {
if (this.selectedProvider) {
@ -206,7 +212,9 @@ export default {
switch (this.selectedProvider) {
case options.SAFELITE:
this.mainStore.updateIsSafeliteProvider(true);
scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE;
scenario =
this.navigationScenarios
.CLICKED_FORWARD_WITH_SAFELITE;
break;
case options.TPA:
this.mainStore.updateIsSafeliteProvider(false);
@ -217,11 +225,15 @@ export default {
return;
}
scenario =
this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED;
this.navigationScenarios
.CLICKED_FORWARD_WITH_TPA_ENABLED;
} else {
this.mainStore.setBailout(bailoutMessage.TPANotEnabled());
this.mainStore.setBailout(
bailoutMessage.TPANotEnabled()
);
scenario =
this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_DISABLED;
this.navigationScenarios
.CLICKED_FORWARD_WITH_TPA_DISABLED;
}
break;
default:
@ -229,34 +241,34 @@ export default {
this.navigateForward(scenario);
this.mainStore.saveProviderPreferenceData({
selectedProvider: this.selectedProvider,
tpaAcknowledgement: this.tpaAcknowledgement
tpaAcknowledgement: this.tpaAcknowledgement,
});
}
},
openStateSteeringModal() {
this.$refs.StateSteeringModal.openModal();
}
}
},
},
};
</script>
<style lang="scss" scoped>
#sub-header span {
color: $black;
color: $black;
}
.question-text {
margin-top: 0;
margin-bottom: 0.5rem;
& > span {
text-align: left;
}
margin-top: 0;
margin-bottom: 0.5rem;
& > span {
text-align: left;
}
}
:deep(.safeliteLogo) {
background-image: url(~@/assets/img/icons/safelite-logo.svg);
background-repeat: no-repeat;
background-size: 4.5rem;
margin: 0 0.25rem 0 0.25rem;
padding: 0 2.5rem 0 2.5rem;
background-image: url(~@/assets/img/icons/safelite-logo.svg);
background-repeat: no-repeat;
background-size: 4.5rem;
margin: 0 0.25rem 0 0.25rem;
padding: 0 2.5rem 0 2.5rem;
}
</style>

352
src/layouts/schedule-page/schedule-page.vue
View file

@ -1,77 +1,79 @@
<template>
<Form
ref="theForm"
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader
class="mb-2 header"
cmsWidgetName="SiteHeaderWidget" />
<Form
ref="theForm"
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader
class="mb-2 header"
cmsWidgetName="SiteHeaderWidget" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<siteSubHeader
cmsWidgetName="ScheduleSubHeaderWidget"
subTextClasses="text-center small sub-text"
class="mt-4" />
<template v-if="ChangeShopLink.length">
<textBlock
cmsWidgetName="ChangeShopLink"
justifyText="center"
class="mb-3 text-link-small"
:marginTopSizeOverride="1" />
</template>
<div class="main-content-container">
<locationAlerts
ref="locationAlerts"
cmsWidgetPrefix="LocationAlert-" />
<datePicker
ref="datePicker"
v-model="selectedDate"
customComponentId="dateQuestion"
selectableDatesSetting="custom"
class="text-link-small"
:customSelectableDatesCallback="
getAvailableDatesMethod
"
validationRules="date-required"
@dateClicked="openInshopTimeSlotsModal" />
<timeSlotModalQuestion
ref="timeSlotModalQuestion"
v-model="selectedTimeSlotInfo"
customComponentId="timeSlotModalQuestion"
cmsWidgetName="TimeSlotModalQuestion"
mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
mobileCmsWidgetName="MobileTimeSlotModal"
dropoffCmsWidgetName="DropOffTimeSlotModal"
sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
:selectedDate="selectedDate"
:appointmentType="appointmentType"
:premiumAppointmentFee="mobilePremiumAppointmentFee"
:timeSlotsForSelectedDate="timeSlotsForSelectedDate"
:estimatedServiceMinutesMinimum="
selectableDatesData.estimatedServiceMinutesMinimum
"
:estimatedServiceMinutesMaximum="
selectableDatesData.estimatedServiceMinutesMaximum
"
validationRules="time-slot-selection-required"
@timeSlotModalClosed="timeSlotModalClosed" />
<siteFooter
ref="navbar"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<siteSubHeader
cmsWidgetName="ScheduleSubHeaderWidget"
subTextClasses="text-center small sub-text"
class="mt-4" />
<template v-if="ChangeShopLink.length">
<textBlock
cmsWidgetName="ChangeShopLink"
justifyText="center"
class="mb-3 text-link-small"
:marginTopSizeOverride="1" />
</template>
<div class="main-content-container">
<locationAlerts
ref="locationAlerts"
cmsWidgetPrefix="LocationAlert-" />
<datePicker
ref="datePicker"
v-model="selectedDate"
customComponentId="dateQuestion"
selectableDatesSetting="custom"
class="text-link-small"
:customSelectableDatesCallback="getAvailableDatesMethod"
validationRules="date-required"
@dateClicked="openInshopTimeSlotsModal" />
<timeSlotModalQuestion
ref="timeSlotModalQuestion"
v-model="selectedTimeSlotInfo"
customComponentId="timeSlotModalQuestion"
cmsWidgetName="TimeSlotModalQuestion"
mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
mobileCmsWidgetName="MobileTimeSlotModal"
dropoffCmsWidgetName="DropOffTimeSlotModal"
sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
:selectedDate="selectedDate"
:appointmentType="appointmentType"
:premiumAppointmentFee="mobilePremiumAppointmentFee"
:timeSlotsForSelectedDate="timeSlotsForSelectedDate"
:estimatedServiceMinutesMinimum="
selectableDatesData.estimatedServiceMinutesMinimum
"
:estimatedServiceMinutesMaximum="
selectableDatesData.estimatedServiceMinutesMaximum
"
validationRules="time-slot-selection-required"
@timeSlotModalClosed="timeSlotModalClosed" />
<siteFooter
ref="navbar"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</div>
</Form>
</Form>
</template>
<script>
// Components
@ -88,16 +90,16 @@ import {
AppointmentTypeStrings,
GET_MOBILE_TIME_SLOTS,
GET_SHOP_TIME_SLOTS,
PREMIUM_FEE_PART_TYPE
PREMIUM_FEE_PART_TYPE,
} from '@/constants/schedule-constants.js';
import {
fetchCmsContentForPage,
splitCopyOnCMSPlaceHolder
splitCopyOnCMSPlaceHolder,
} from '@/helpers/cms-content-helper';
import {
calcDaysBetweenDates,
convertDateStringToDate,
sumDateString
sumDateString,
} from '@/helpers/date-helper';
import settleAllPromises from '@/helpers/layout-helper';
import { Form, defineRule } from 'vee-validate';
@ -141,7 +143,10 @@ const getAvailableDates = async (
if (i > 1) {
apiStartDate = sumDateString(apiEndDate, 1);
apiEndDate = sumDateString(apiStartDate, TIME_SLOTS_CALL_DAYS_LIMIT);
apiEndDate = sumDateString(
apiStartDate,
TIME_SLOTS_CALL_DAYS_LIMIT
);
if (i === apiCallsCount) {
apiEndDate = endDateString;
@ -151,15 +156,16 @@ const getAvailableDates = async (
}
if (
appointmentType === AppointmentTypeStrings.MOBILE
|| appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
appointmentType === AppointmentTypeStrings.MOBILE ||
appointmentType ===
AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
) {
storeActionConfig = {
storeAction: GET_MOBILE_TIME_SLOTS,
payload: {
startDate: apiStartDate,
endDate: apiEndDate
}
endDate: apiEndDate,
},
};
} else {
storeActionConfig = {
@ -168,15 +174,16 @@ const getAvailableDates = async (
startDate: apiStartDate,
endDate: apiEndDate,
shopAppointmentType: appointmentType,
providerNumber
}
providerNumber,
},
};
}
if (apiStartDate < apiEndDate) storeActionConfigs.push(storeActionConfig);
if (apiStartDate < apiEndDate)
storeActionConfigs.push(storeActionConfig);
}
const timeSlotsResponsesData = {
days: []
days: [],
};
function compareDayStrings(a, b) {
@ -186,35 +193,37 @@ const getAvailableDates = async (
}
const makeParallelCalls = async () => {
await Promise.all(storeActionConfigs.map(async (storeAction) => {
let timeSlotsResponse = null;
if (storeAction.storeAction === GET_SHOP_TIME_SLOTS) {
timeSlotsResponse = await useMainStore().getShopTimeSlots(
storeAction.payload.startDate,
storeAction.payload.endDate,
storeAction.payload.shopAppointmentType,
storeAction.payload.providerNumber
);
} else {
timeSlotsResponse = await useMainStore().getMobileTimeSlots(
storeAction.payload.startDate,
storeAction.payload.endDate
);
}
await Promise.all(
storeActionConfigs.map(async (storeAction) => {
let timeSlotsResponse = null;
if (storeAction.storeAction === GET_SHOP_TIME_SLOTS) {
timeSlotsResponse = await useMainStore().getShopTimeSlots(
storeAction.payload.startDate,
storeAction.payload.endDate,
storeAction.payload.shopAppointmentType,
storeAction.payload.providerNumber
);
} else {
timeSlotsResponse = await useMainStore().getMobileTimeSlots(
storeAction.payload.startDate,
storeAction.payload.endDate
);
}
timeSlotsResponsesData.estimatedServiceMinutesMinimum =
timeSlotsResponse.data.estimatedServiceMinutesMinimum;
timeSlotsResponsesData.estimatedServiceMinutesMaximum =
timeSlotsResponse.data.estimatedServiceMinutesMaximum;
timeSlotsResponsesData.days = [
...timeSlotsResponsesData.days,
...timeSlotsResponse.data.days
];
}));
timeSlotsResponsesData.estimatedServiceMinutesMinimum =
timeSlotsResponse.data.estimatedServiceMinutesMinimum;
timeSlotsResponsesData.estimatedServiceMinutesMaximum =
timeSlotsResponse.data.estimatedServiceMinutesMaximum;
timeSlotsResponsesData.days = [
...timeSlotsResponsesData.days,
...timeSlotsResponse.data.days,
];
})
);
};
return makeParallelCalls().then(() => {
// sort days chronologically
// sort days chronologically
timeSlotsResponsesData.days.sort(compareDayStrings);
return timeSlotsResponsesData;
});
@ -231,11 +240,11 @@ export default {
siteFooter,
textBlock,
// eslint-disable-next-line vue/no-reserved-component-names
Form
Form,
},
mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) {
// Call APIs
// Call APIs
let preSelectedDate = await useMainStore().order.schedule.date;
if (!preSelectedDate || preSelectedDate.startTime === null) {
preSelectedDate = null;
@ -244,18 +253,20 @@ export default {
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
const datePickerInitialDataPromise =
await datePicker.methods.loadInitialData({
selectableDatesSetting: 'custom',
initialViewRowsToShow: 5,
customSelectableDatesCallback: getAvailableDates,
preSelectedDate
});
await datePicker.methods.loadInitialData({
selectableDatesSetting: 'custom',
initialViewRowsToShow: 5,
customSelectableDatesCallback: getAvailableDates,
preSelectedDate,
});
const premiumFeePromise = useMainStore().getMobilePremiumFee();
const premiumFeeWithPricePromise = premiumFeePromise.then((result) => {
if (result.data) {
return useMainStore().priceOrderItemsAndSaveServerData(result.data);
return useMainStore().priceOrderItemsAndSaveServerData(
result.data
);
}
return result.data;
});
@ -269,27 +280,29 @@ export default {
const promiseResultMap = [
{
resultKey: 'cmsContent',
promise: cmsContentPromise
promise: cmsContentPromise,
},
{
resultKey: 'alertReasons',
promise: alertReasonsPromise
promise: alertReasonsPromise,
},
{
resultKey: 'datePickerInitialData',
promise: datePickerInitialDataPromise
promise: datePickerInitialDataPromise,
},
{
resultKey: 'premiumFeeWithPrice',
promise: premiumFeeWithPricePromise
}
promise: premiumFeeWithPricePromise,
},
];
// use resultMap to populate layout content.
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.$refs.datePicker.initializeComponent(resultMap.datePickerInitialData);
vm.$refs.datePicker.initializeComponent(
resultMap.datePickerInitialData
);
vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
vm.setData(
resultMap.datePickerInitialData.initialShopTimeSlotsResponse,
@ -307,7 +320,7 @@ export default {
selectedDate: this.getSelectedDate(),
selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
selectableDatesData: [],
mobilePremiumAppointmentFee: null
mobilePremiumAppointmentFee: null,
};
},
computed: {
@ -325,11 +338,13 @@ export default {
return null;
}
return this.selectableDatesData.days?.find((selectableDate) => selectableDate.date === this.selectedDate);
return this.selectableDatesData.days?.find(
(selectableDate) => selectableDate.date === this.selectedDate
);
},
supportingItems() {
return useMainStore().lineItems.supportingItems;
}
},
},
watch: {
selectedDate(newValue, oldValue) {
@ -342,33 +357,34 @@ export default {
startTime: null,
endTime: null,
jobMaxMinutes: null,
jobMinMinutes: null
jobMinMinutes: null,
},
isPremiumAppointment: null
isPremiumAppointment: null,
};
}
},
selectedTimeSlotInfo(newValue) {
this.updateFooterButtonText(newValue);
}
},
},
methods: {
splitCopyOnCMSPlaceHolder,
arePagePrerequisitesValid() {
const { serviceLocation } = useMainStore().order;
const serviceLocationPreReqs =
serviceLocation.zipCode
&& serviceLocation.zipCodeCtu
&& serviceLocation.appointmentType
&& (serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE
|| serviceLocation.appointmentType
=== AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
|| serviceLocation.provider.providerNumber);
serviceLocation.zipCode &&
serviceLocation.zipCodeCtu &&
serviceLocation.appointmentType &&
(serviceLocation.appointmentType ===
AppointmentTypeStrings.MOBILE ||
serviceLocation.appointmentType ===
AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP ||
serviceLocation.provider.providerNumber);
const supportingItems = this.supportingItems !== null;
const damageInfo =
useMainStore().order.damage.isRepair
|| (useMainStore().order.lineItems?.glassParts != null
&& useMainStore().order.lineItems.glassParts.length > 0);
useMainStore().order.damage.isRepair ||
(useMainStore().order.lineItems?.glassParts != null &&
useMainStore().order.lineItems.glassParts.length > 0);
return serviceLocationPreReqs && supportingItems && damageInfo;
},
@ -386,7 +402,8 @@ export default {
this.mainStore.order.serviceLocation.provider.providerNumber
);
// ADD API CALL RESULTS TO EXISTING DATE DATA
this.selectableDatesData.days = this.selectableDatesData.days.concat(newShopTimeSlots.days);
this.selectableDatesData.days =
this.selectableDatesData.days.concat(newShopTimeSlots.days);
return newShopTimeSlots;
},
getAvailableDates,
@ -401,13 +418,16 @@ export default {
},
getSelectedTimeSlotInfo() {
const isPremiumAppointment =
!!(
this.supportingItems?.filter((lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE) ?? []
).length > 0;
!!(
this.supportingItems?.filter(
(lineItem) =>
lineItem.partType === PREMIUM_FEE_PART_TYPE
) ?? []
).length > 0;
const selectedTimeSlotInfo = {
timeSlot: this.mainStore.order.schedule,
isPremiumAppointment
isPremiumAppointment,
};
return selectedTimeSlotInfo;
@ -423,12 +443,16 @@ export default {
if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) {
navbarButtonText = 'Continue';
} else {
navbarButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay(timeSlotInfo.timeSlot.date)}`;
navbarButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay(
timeSlotInfo.timeSlot.date
)}`;
if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(timeSlotInfo.timeSlot.startTime)}`;
navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
timeSlotInfo.timeSlot.startTime
)}`;
} else if (
this.appointmentType === AppointmentTypeStrings.MOBILE
&& !timeSlotInfo.isPremiumAppointment
this.appointmentType === AppointmentTypeStrings.MOBILE &&
!timeSlotInfo.isPremiumAppointment
) {
navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
timeSlotInfo.timeSlot.startTime,
@ -446,7 +470,7 @@ export default {
const dateObject = convertDateStringToDate(selectedDate);
return dateObject.toLocaleDateString('en-us', {
month: 'short',
day: 'numeric'
day: 'numeric',
});
},
getDisplayTextForMilitaryTime(
@ -474,8 +498,8 @@ export default {
this.navigationScenarios.CLICKED_FORWARD,
this.$route
);
}
}
},
},
};
</script>
@ -483,24 +507,24 @@ export default {
$page-side-padding: 1.5rem;
.page-container-grouped-styles {
overflow: auto;
overflow: auto;
.main-content-container {
padding: 0 1.5rem !important;
}
.main-content-container {
padding: 0 1.5rem !important;
}
}
:deep(.text-link-small) {
a,
.btn-link {
font-size: 0.875rem;
line-height: 1.5;
}
a,
.btn-link {
font-size: 0.875rem;
line-height: 1.5;
}
}
:deep(.subheader-primary) {
h5.dark-header {
margin-bottom: 0.25rem !important;
}
h5.dark-header {
margin-bottom: 0.25rem !important;
}
}
</style>

405
src/layouts/service-location/service-location.vue
View file

@ -1,114 +1,122 @@
<template>
<Form
ref="theForm"
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader
class="mb-2 header"
cmsWidgetName="SiteHeaderWidget" />
<Form
ref="theForm"
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader
class="mb-2 header"
cmsWidgetName="SiteHeaderWidget" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<siteSubHeader
id="sub-header"
cmsWidgetName="SiteSubHeader"
class="mb-5 mt-4" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6">
<serviceZipModalQuestion
ref="serviceZipCodeQuestion"
v-model="serviceZipCodeQuestion"
modalWidgetName="ServiceZipModalWidget"
:onZipUpdateCallback="reloadShopData"
@updatedServiceability="setServiceabilityDetails"
@updatedContainsMilitaryBase="
setContainsMilitaryBase
" />
<alert
v-if="displayMilitaryZipAlert"
ref="alertMilitaryBaseZip"
class="my-5"
cmsWidgetName="AlertMilitaryBaseZipWidget"
alertClass="alert-warning" />
<alert
v-if="displayServiceableMobileOnly"
ref="alertMobileOnly"
class="my-5"
cmsWidgetName="AlertMobileOnlyWidget"
alertClass="alert-warning" />
<alert
v-if="displayRecalibrationWarning"
ref="alertRecalNoMobile"
class="my-5"
cmsWidgetName="AlertRecalNoMobileWidget"
alertClass="alert-warning"
@text-link-clicked="openModalAction" />
<alert
v-if="displayServiceableInshopOnly"
ref="alertInshopOnly"
class="my-5"
cmsWidgetName="AlertInshopOnlyWidget"
alertClass="alert-warning" />
<alert
v-if="displayNoShopsAlert"
ref="alertNoShops"
class="my-5"
cmsWidgetName="AlertNoShopsWidget"
alertClass="alert-warning" />
<appointmentTypeQuestion
v-show="isAppointmentTypeDisplayed"
ref="appointmentTypeQuestion"
v-model="selectedAppointmentType"
:isServiceableMobile="isServiceableMobile"
:isServiceableInshop="isServiceableInshop"
:isDisplayed="isAppointmentTypeDisplayed"
groupName="appointmentTypeQuestion"
cmsWidgetName="AppointmentTypeQuestionWidget"
validationRules="option-required" />
<mobileLocationModalQuestions
v-if="isMobileLocationDisplayed"
ref="mobileLocationQuestions"
v-model="mobileLocationQuestions"
customComponentId="mobileLocationQuestions"
:mobileFeePart="mobileFeePart"
validationRules="mobile-location-required"
linkWidgetName="MobileLocationLinkWidget"
modalWidgetName="MobileLocationModalWidget"
:onZipUpdateCallback="reloadShopData"
@updated-mobile-fee-part="setMobileFeePart"
@updated-serviceability="setServiceabilityDetails"
@updated-contains-military-base="
setContainsMilitaryBase
" />
<shopQuestion
v-show="isShopQuestionDisplayed"
ref="shopQuestion"
v-model="selectedProvider"
:selectedAppointmentType="selectedAppointmentType"
:isDisplayed="isShopQuestionDisplayed"
cmsWidgetName="ShopQuestionWidget"
@updatedMobileProviderNumber="
setMobileProviderNumber
" />
<contentGroupModal
ref="RecalModal"
cmsWidgetName="RecalModal" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<siteFooter
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="
!meta.valid || displayNoShopsAlert
"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<siteSubHeader
id="sub-header"
cmsWidgetName="SiteSubHeader"
class="mb-5 mt-4" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6">
<serviceZipModalQuestion
ref="serviceZipCodeQuestion"
v-model="serviceZipCodeQuestion"
modalWidgetName="ServiceZipModalWidget"
:onZipUpdateCallback="reloadShopData"
@updatedServiceability="setServiceabilityDetails"
@updatedContainsMilitaryBase="setContainsMilitaryBase" />
<alert
v-if="displayMilitaryZipAlert"
ref="alertMilitaryBaseZip"
class="my-5"
cmsWidgetName="AlertMilitaryBaseZipWidget"
alertClass="alert-warning" />
<alert
v-if="displayServiceableMobileOnly"
ref="alertMobileOnly"
class="my-5"
cmsWidgetName="AlertMobileOnlyWidget"
alertClass="alert-warning" />
<alert
v-if="displayRecalibrationWarning"
ref="alertRecalNoMobile"
class="my-5"
cmsWidgetName="AlertRecalNoMobileWidget"
alertClass="alert-warning"
@text-link-clicked="openModalAction" />
<alert
v-if="displayServiceableInshopOnly"
ref="alertInshopOnly"
class="my-5"
cmsWidgetName="AlertInshopOnlyWidget"
alertClass="alert-warning" />
<alert
v-if="displayNoShopsAlert"
ref="alertNoShops"
class="my-5"
cmsWidgetName="AlertNoShopsWidget"
alertClass="alert-warning" />
<appointmentTypeQuestion
v-show="isAppointmentTypeDisplayed"
ref="appointmentTypeQuestion"
v-model="selectedAppointmentType"
:isServiceableMobile="isServiceableMobile"
:isServiceableInshop="isServiceableInshop"
:isDisplayed="isAppointmentTypeDisplayed"
groupName="appointmentTypeQuestion"
cmsWidgetName="AppointmentTypeQuestionWidget"
validationRules="option-required" />
<mobileLocationModalQuestions
v-if="isMobileLocationDisplayed"
ref="mobileLocationQuestions"
v-model="mobileLocationQuestions"
customComponentId="mobileLocationQuestions"
:mobileFeePart="mobileFeePart"
validationRules="mobile-location-required"
linkWidgetName="MobileLocationLinkWidget"
modalWidgetName="MobileLocationModalWidget"
:onZipUpdateCallback="reloadShopData"
@updated-mobile-fee-part="setMobileFeePart"
@updated-serviceability="setServiceabilityDetails"
@updated-contains-military-base="setContainsMilitaryBase" />
<shopQuestion
v-show="isShopQuestionDisplayed"
ref="shopQuestion"
v-model="selectedProvider"
:selectedAppointmentType="selectedAppointmentType"
:isDisplayed="isShopQuestionDisplayed"
cmsWidgetName="ShopQuestionWidget"
@updatedMobileProviderNumber="setMobileProviderNumber" />
<contentGroupModal
ref="RecalModal"
cmsWidgetName="RecalModal" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<siteFooter
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid || displayNoShopsAlert"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</Form>
</Form>
</template>
<script>
// Import Supporting Files
@ -121,7 +129,7 @@ import { useMainStore } from '@/store';
import {
getPricedMobileFeePart,
getServiceabilityDetails,
getZipCodeData
getZipCodeData,
} from '@/helpers/service-location-helper';
// Import Component
@ -140,11 +148,11 @@ import serviceZipModalQuestion from '@/layouts/service-location/service-zip-moda
// DEFINE VALIDATION RULES
defineRule('mobile-location-required', (value) => {
if (
value.addressQuestions.streetAddress === ''
|| value.addressQuestions.city === ''
|| value.addressQuestions.state === ''
|| value.addressQuestions.zipCode === ''
|| value.isVehicleProtected == null
value.addressQuestions.streetAddress === '' ||
value.addressQuestions.city === '' ||
value.addressQuestions.state === '' ||
value.addressQuestions.zipCode === '' ||
value.isVehicleProtected == null
) {
return errorMessages.MOBILE_LOCATION_REQUIRED;
}
@ -164,46 +172,46 @@ export default {
// eslint-disable-next-line vue/no-reserved-component-names
Form,
serviceZipModalQuestion,
shopQuestion
shopQuestion,
},
mixins: [baseFormMixin],
async beforeRouteEnter(to, from, next) {
// Call APIs
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
const serviceZipCode =
useMainStore().order.serviceLocation.zipCode
|| useMainStore().order.customer.address.zipCode;
useMainStore().order.serviceLocation.zipCode ||
useMainStore().order.customer.address.zipCode;
const zipCodeData = getZipCodeData(serviceZipCode);
const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);
const serviceabilityDetailsPromise =
getServiceabilityDetails(serviceZipCode);
getServiceabilityDetails(serviceZipCode);
const shopQuestionInitialDataPromise =
shopQuestion.methods.loadInitialData(serviceZipCode);
shopQuestion.methods.loadInitialData(serviceZipCode);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: 'cmsContent',
promise: cmsContentPromise
promise: cmsContentPromise,
},
{
resultKey: 'mobileFeePart',
promise: mobileFeePartPromise
promise: mobileFeePartPromise,
},
{
resultKey: 'serviceabilityDetails',
promise: serviceabilityDetailsPromise
promise: serviceabilityDetailsPromise,
},
{
resultKey: 'shopQuestionInitialData',
promise: shopQuestionInitialDataPromise
promise: shopQuestionInitialDataPromise,
},
{
resultKey: 'zipCodeData',
promise: zipCodeData
}
promise: zipCodeData,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
@ -215,7 +223,9 @@ export default {
resultMap.mobileFeePart,
resultMap.shopQuestionInitialData?.mobileProviderNumber
);
vm.$refs.shopQuestion.initializeComponent(resultMap.shopQuestionInitialData);
vm.$refs.shopQuestion.initializeComponent(
resultMap.shopQuestionInitialData
);
});
},
setup() {
@ -239,12 +249,15 @@ export default {
mobileFeePart: null,
mobileProviderNumber: null,
zipContainsMilitaryBase: false,
zipCodeCtu: null
zipCodeCtu: null,
};
},
computed: {
questionText() {
return this.getCmsContent('ServiceTypeQuestionWidget', 'QuestionText');
return this.getCmsContent(
'ServiceTypeQuestionWidget',
'QuestionText'
);
},
answersFromCms() {
return this.getCmsContent('ServiceTypeQuestionWidget', 'Answers');
@ -253,7 +266,7 @@ export default {
get() {
return {
state: this.state,
zipCode: this.zipCode
zipCode: this.zipCode,
};
},
set(newValue) {
@ -268,7 +281,7 @@ export default {
// eslint-disable-next-line vue/valid-next-tick
this.$nextTick();
}
},
},
mobileLocationQuestions: {
get() {
@ -278,9 +291,9 @@ export default {
streetAddress2: this.streetAddress2,
city: this.city,
state: this.state,
zipCode: this.zipCode
zipCode: this.zipCode,
},
isVehicleProtected: this.isVehicleProtected
isVehicleProtected: this.isVehicleProtected,
};
},
set(newValue) {
@ -294,21 +307,23 @@ export default {
if (newValue.zipCode !== this.zipCode) {
if (
!(
this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
|| this.selectedAppointmentType
=== AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
this.selectedAppointmentType ===
AppointmentTypeStrings.MOBILE ||
this.selectedAppointmentType ===
AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
)
) {
this.selectedAppointmentType = null;
}
this.selectedProvider = null;
}
}
},
},
isServiceableMobile() {
if (this.isRecalibrationServiceableMobile !== null) {
return (
this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile
this.isGlassServiceableMobile &&
this.isRecalibrationServiceableMobile
);
}
return this.isGlassServiceableMobile;
@ -316,7 +331,8 @@ export default {
isServiceableInshop() {
if (this.isRecalibrationServiceableInshop !== null) {
return (
this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop
this.isGlassServiceableInshop &&
this.isRecalibrationServiceableInshop
);
}
@ -324,8 +340,8 @@ export default {
},
isShopQuestionDisplayed() {
return (
this.selectedAppointmentType === 'Inshop'
|| this.selectedAppointmentType === 'Dropoff'
this.selectedAppointmentType === 'Inshop' ||
this.selectedAppointmentType === 'Dropoff'
);
},
isAppointmentTypeDisplayed() {
@ -333,17 +349,18 @@ export default {
},
isMobileLocationDisplayed() {
return (
this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
|| this.selectedAppointmentType
=== AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
this.selectedAppointmentType ===
AppointmentTypeStrings.MOBILE ||
this.selectedAppointmentType ===
AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
);
},
requiresInshopRecalibration() {
// Specifically check for isRecalibrationServiceableMobile === false, not null or true.
return (
this.isServiceableInshop
&& this.isGlassServiceableMobile
&& this.isRecalibrationServiceableMobile === false
this.isServiceableInshop &&
this.isGlassServiceableMobile &&
this.isRecalibrationServiceableMobile === false
);
},
displayMilitaryZipAlert() {
@ -357,20 +374,20 @@ export default {
},
displayServiceableInshopOnly() {
return (
!this.displayRecalibrationWarning
&& this.isServiceableInshop
&& !this.isServiceableMobile
!this.displayRecalibrationWarning &&
this.isServiceableInshop &&
!this.isServiceableMobile
);
},
displayServiceableMobileOnly() {
return this.isServiceableMobile && !this.isServiceableInshop;
}
},
},
methods: {
arePagePrerequisitesValid() {
return (
useMainStore().lineItems.supportingItems !== null
&& useMainStore().order.serviceLocation.zipCode !== null
useMainStore().lineItems.supportingItems !== null &&
useMainStore().order.serviceLocation.zipCode !== null
);
},
async reloadShopData(zipCode) {
@ -391,8 +408,8 @@ export default {
city: null,
state: null,
zipCode: null,
zipCodeCtu: null
}
zipCodeCtu: null,
},
};
}
@ -405,7 +422,7 @@ export default {
zipCodeCtu: this.zipCodeCtu,
appointmentType: this.selectedAppointmentType,
isVehicleProtected: this.isVehicleProtected,
provider
provider,
});
this.$router.navigate(
@ -428,14 +445,14 @@ export default {
},
getServiceStateFromStore() {
return (
useMainStore().order.serviceLocation.state
|| useMainStore().order.customer.address.state
useMainStore().order.serviceLocation.state ||
useMainStore().order.customer.address.state
);
},
getServiceZipCodeFromStore() {
return (
useMainStore().order.serviceLocation.zipCode
|| useMainStore().order.customer.address.zipCode
useMainStore().order.serviceLocation.zipCode ||
useMainStore().order.customer.address.zipCode
);
},
getIsVehicleProtectedFromStore() {
@ -490,15 +507,15 @@ export default {
},
setServiceabilityDetails(serviceabilityDetails) {
this.isGlassServiceableInshop =
serviceabilityDetails.isGlassServiceableInshop;
serviceabilityDetails.isGlassServiceableInshop;
this.isRecalibrationServiceableInshop =
serviceabilityDetails.isRecalibrationServiceableInshop;
serviceabilityDetails.isRecalibrationServiceableInshop;
this.isGlassServiceableMobile =
serviceabilityDetails.isGlassServiceableMobile;
serviceabilityDetails.isGlassServiceableMobile;
this.isRecalibrationServiceableMobile =
serviceabilityDetails.isRecalibrationServiceableMobile;
}
}
serviceabilityDetails.isRecalibrationServiceableMobile;
},
},
};
</script>
@ -506,47 +523,47 @@ export default {
$page-side-padding: 1.5rem;
.page-container-grouped-styles {
overflow: auto;
overflow: auto;
.main-content-container {
padding: 0 1.5rem !important;
}
.main-content-container {
padding: 0 1.5rem !important;
}
}
.question-text {
& > span {
line-height: 1.5rem;
}
& > span {
line-height: 1.5rem;
}
}
.list-card-content p {
&:first-of-type {
line-height: 1.5rem;
}
&:not(:nth-of-type(1)) {
line-height: 1.25rem;
}
&:first-of-type {
line-height: 1.5rem;
}
&:not(:nth-of-type(1)) {
line-height: 1.25rem;
}
}
.choose-option {
.button-question > div {
&:first-of-type {
margin-bottom: 0.95rem;
line-height: 1.5rem;
.button-question > div {
&:first-of-type {
margin-bottom: 0.95rem;
line-height: 1.5rem;
}
}
}
}
.button-question {
.row.form-test-error {
line-height: 1.5rem;
padding-left: 0rem !important;
}
.row.form-test-error {
line-height: 1.5rem;
padding-left: 0rem !important;
}
}
.service-location-button-question {
.question-text {
margin-top: 1.5rem;
.question-text {
margin-top: 1.5rem;
span {
text-align: center;
span {
text-align: center;
}
}
}
}
</style>

305
src/layouts/tpa-search/tpa-search.vue
View file

@ -1,120 +1,122 @@
<template>
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader
ref="siteHeader"
:cmsWidgetName="widget.siteHeader" />
</div>
</div>
</div>
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<Form
id="searchProvidersForm"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<label
id="tpaSearchQuestionLabel"
for="tpaSearchQuestionField"
class="text-center fs-5 mt-5 mb-0 text-black w-100">
{{ tpaSearchQuestionLabel }}
</label>
<label
id="searchInstructions"
for="tpaSearchQuestionField"
class="text-center small darker-gray w-100 mb-4">
{{ searchInstructionsText }}
</label>
<div class="mb-5">
<textboxQuestion
id="tpaSearchQuestionField"
v-model="zipCode"
inputId="tpaSearchQuestionFieldInput"
:cmsWidgetName="widget.tpaSearchQuestion"
:includeSearchIcon="true"
:displayQuestionText="false"
isRequired
:isDisabled="reloadingProviders"
:validationRules="rules.zipCode"
@clickEvent="searchClick" />
</div>
</Form>
</div>
</div>
</div>
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<googleMap
id="map"
class="mb-4"
:addresses="providerAddresses"
:zipCode="mapZipCode" />
<Form
id="providerSelectionForm"
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<dropdownQuestion
id="searchRadiusFilter"
v-model="filter"
:cmsWidgetName="widget.filterByQuestion"
inputId="searchRadiusFilterInput"
:options="filterOptions"
disableAutoFill
:isDisabled="reloadingProviders"
:validationRules="rules.filter" />
<loader
v-if="reloadingProviders"
id="providersLoader"
loaderPosition="center"
loaderColor="blue"
:width="2"
:height="2"
class="my-4" />
<div v-else>
<div class="my-4">
<buttonQuestion
id="selectProviderQuestion"
v-model="selectedProviderNumber"
buttonTypeString="shopListButton"
:buttonTypeObject="shopListButton"
class="radioQuestion"
:answers="providerButtonData"
groupName="chooseShop"
textPosition="text-start"
isRequired
:validationRules="rules.provider"
:additionalButtonData="additionalButtonData" />
<alert
v-if="providers?.length === 0 ?? true"
id="alertNoNetworkProviders"
:cmsWidgetName="widget.noNetworkShopsAlert"
alertClass="alert-warning"
:isDismissible="false"
:manualHeadline="noNetworkShopsAlertHeaderText" />
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader
ref="siteHeader"
:cmsWidgetName="widget.siteHeader" />
</div>
<div class="text-center">
<textLink
id="preferredShopNotListedLink"
linkType="navigation"
href="javascript:void(0)"
:text="shopNotListedModalLink"
@clickEvent="doNotSeeMyShopLinkClick" />
</div>
<siteFooter
ref="siteFooter"
:cmsWidgetName="widget.siteFooter"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
@backClicked="navigateBack" />
</div>
</Form>
</div>
</div>
</div>
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<Form
id="searchProvidersForm"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<label
id="tpaSearchQuestionLabel"
for="tpaSearchQuestionField"
class="text-center fs-5 mt-5 mb-0 text-black w-100">
{{ tpaSearchQuestionLabel }}
</label>
<label
id="searchInstructions"
for="tpaSearchQuestionField"
class="text-center small darker-gray w-100 mb-4">
{{ searchInstructionsText }}
</label>
<div class="mb-5">
<textboxQuestion
id="tpaSearchQuestionField"
v-model="zipCode"
inputId="tpaSearchQuestionFieldInput"
:cmsWidgetName="widget.tpaSearchQuestion"
:includeSearchIcon="true"
:displayQuestionText="false"
isRequired
:isDisabled="reloadingProviders"
:validationRules="rules.zipCode"
@clickEvent="searchClick" />
</div>
</Form>
</div>
</div>
</div>
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<googleMap
id="map"
class="mb-4"
:addresses="providerAddresses"
:zipCode="mapZipCode" />
<Form
id="providerSelectionForm"
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<dropdownQuestion
id="searchRadiusFilter"
v-model="filter"
:cmsWidgetName="widget.filterByQuestion"
inputId="searchRadiusFilterInput"
:options="filterOptions"
disableAutoFill
:isDisabled="reloadingProviders"
:validationRules="rules.filter" />
<loader
v-if="reloadingProviders"
id="providersLoader"
loaderPosition="center"
loaderColor="blue"
:width="2"
:height="2"
class="my-4" />
<div v-else>
<div class="my-4">
<buttonQuestion
id="selectProviderQuestion"
v-model="selectedProviderNumber"
buttonTypeString="shopListButton"
:buttonTypeObject="shopListButton"
class="radioQuestion"
:answers="providerButtonData"
groupName="chooseShop"
textPosition="text-start"
isRequired
:validationRules="rules.provider"
:additionalButtonData="additionalButtonData" />
<alert
v-if="providers?.length === 0 ?? true"
id="alertNoNetworkProviders"
:cmsWidgetName="widget.noNetworkShopsAlert"
alertClass="alert-warning"
:isDismissible="false"
:manualHeadline="
noNetworkShopsAlertHeaderText
" />
</div>
<div class="text-center">
<textLink
id="preferredShopNotListedLink"
linkType="navigation"
href="javascript:void(0)"
:text="shopNotListedModalLink"
@clickEvent="doNotSeeMyShopLinkClick" />
</div>
<siteFooter
ref="siteFooter"
:cmsWidgetName="widget.siteFooter"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
@backClicked="navigateBack" />
</div>
</Form>
</div>
</div>
</div>
</div>
</template>
<script>
// Components
@ -144,7 +146,7 @@ const radiusFilterPairs = [
{ radius: 15, filter: '15 miles' },
{ radius: 25, filter: '25 miles' },
{ radius: 50, filter: '50 miles' },
{ radius: 100, filter: '100 miles' }
{ radius: 100, filter: '100 miles' },
];
function convertRadiusFilterToInteger(filter) {
@ -200,12 +202,12 @@ export default {
googleMap,
siteFooter,
// eslint-disable-next-line vue/no-reserved-component-names
Form
Form,
},
mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) {
const { zipCode, filter, providers, providerNumber } =
await getInitialSearchData();
await getInitialSearchData();
const cmsContent = await fetchCmsContentForPage(to.query.issPage);
next(async (vm) => {
@ -223,7 +225,7 @@ export default {
selectedProviderNumber: '',
reloadingProviders: false,
additionalButtonData: {
displayAvailabilityIndicators: false
displayAvailabilityIndicators: false,
},
widget: {
siteHeader: 'SiteHeaderWidget',
@ -232,23 +234,23 @@ export default {
filterByQuestion: 'FilterByQuestion',
noNetworkShopsAlert: 'NoNetworkShopsAlertWidget',
shopNotListedLink: 'ShopNotListedLink',
siteFooter: 'SiteFooterWidget'
siteFooter: 'SiteFooterWidget',
},
rules: {
zipCode: `${globalRules.ZIP_CODE_REQUIRED}|${globalRules.ZIP_CODE_SEARCH_FORMAT}`,
filter: globalRules.OPTION_REQUIRED, // TODO do we even need this?
provider: globalRules.OPTION_REQUIRED
provider: globalRules.OPTION_REQUIRED,
},
shopListButton: shallowRef(shopListButton)
shopListButton: shallowRef(shopListButton),
};
},
computed: {
filterOptions() {
const filterByAnswers =
this.getCmsContent(
this.widget.filterByQuestion,
widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
) ?? [];
this.getCmsContent(
this.widget.filterByQuestion,
widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
) ?? [];
const filterByAnswersObj = {};
[...filterByAnswers].forEach((answer) => {
filterByAnswersObj[answer.Name] = answer.Name;
@ -284,21 +286,25 @@ export default {
},
providerAddresses() {
return (
this.providers?.map((provider) => this.getProviderAddress(provider))
?? []
this.providers?.map((provider) =>
this.getProviderAddress(provider)
) ?? []
);
},
providerButtonData() {
return (
this.providers?.map((provider) =>
this.getShopButtonDataFromProvider(provider)) ?? []
this.getShopButtonDataFromProvider(provider)
) ?? []
);
},
selectedProviderIsSafeliteShop() {
return (
this.providers?.find((p) => p.providerNumber === this.selectedProviderNumber)?.isSafeliteShop ?? false
this.providers?.find(
(p) => p.providerNumber === this.selectedProviderNumber
)?.isSafeliteShop ?? false
);
}
},
},
watch: {
async filter() {
@ -312,13 +318,15 @@ export default {
providers(newProviders) {
if (this.dataLoaded) {
this.selectedProviderNumber =
newProviders?.length === 1 ?? false
? newProviders[0]?.providerNumber ?? ''
: '';
newProviders?.length === 1 ?? false
? newProviders[0]?.providerNumber ?? ''
: '';
}
},
selectedProviderNumber(newNumber) {
const provider = this.providers?.find((p) => p.providerNumber === newNumber);
const provider = this.providers?.find(
(p) => p.providerNumber === newNumber
);
if (provider && this.dataLoaded) {
useMainStore().updateServiceLocation({
searchFilter: this.filter,
@ -330,14 +338,14 @@ export default {
city: provider.address?.city,
state: provider.address?.state,
zipCode: provider.address?.zipCode,
zipCodeCtu: provider.address?.zipCodeCtu
zipCodeCtu: provider.address?.zipCodeCtu,
},
companyName: provider?.companyName,
phoneNumber: provider?.phoneNumber
}
phoneNumber: provider?.phoneNumber,
},
});
}
}
},
},
beforeUpdate() {
if (!this.dataLoaded) {
@ -373,7 +381,7 @@ export default {
const addressLine1 = toTitleCase(provider?.address?.streetAddress);
const joinString =
addressLine1.length > 0 && addressLine2.length > 0 ? ', ' : '';
addressLine1.length > 0 && addressLine2.length > 0 ? ', ' : '';
return [addressLine1, addressLine2].join(joinString);
},
async getProviderButtonData() {
@ -402,7 +410,8 @@ export default {
}
const scenario = this.selectedProviderIsSafeliteShop
? this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP
: this.navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP;
: this.navigationScenarios
.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP;
this.$router.navigate(scenario, this.$route);
},
getCustomValueFromString(str) {
@ -416,10 +425,10 @@ export default {
getShopButtonDataFromProvider(provider) {
const cellNumber = toDisplayPhoneNumber(provider?.phoneNumber);
const distance =
provider?.distanceInMiles !== null
&& !Number.isNaN(parseFloat(provider?.distanceInMiles))
? +provider.distanceInMiles.toFixed(1)
: null;
provider?.distanceInMiles !== null &&
!Number.isNaN(parseFloat(provider?.distanceInMiles))
? +provider.distanceInMiles.toFixed(1)
: null;
return {
buttonLabel: provider?.companyName ?? '',
@ -427,15 +436,15 @@ export default {
buttonBodyCopy: `${this.getProviderAddress(provider)}<br>${
cellNumber ?? ''
}`,
value: provider?.providerNumber ?? ''
value: provider?.providerNumber ?? '',
};
}
}
},
},
};
</script>
<style lang="scss" scoped>
.darker-gray {
color: map-get($colors, 'darker-gray');
color: map-get($colors, 'darker-gray');
}
</style>

241
src/layouts/tpa-submit/tpa-submit.vue
View file

@ -15,7 +15,8 @@
ref="vehicleBanner"
:cmsWidgetName="widget.vehicleBanner"
:displayGenericVehicleImage="false"
class="mt-5" /> <!-- TODO fix styling -->
class="mt-5" />
<!-- TODO fix styling -->
<textBlock
ref="subHeaderTitle"
:customText="subHeaderTitle"
@ -51,9 +52,7 @@
<div
v-for="(section, index) in sections"
:key="section.title">
<hr
v-if="index !== 0"
class="my-3" />
<hr v-if="index !== 0" class="my-3" />
<reviewBlock
:id="'review-block-' + index"
:customHeaderText="section.title"
@ -109,13 +108,25 @@ import contactDetailsDrawer from '@/layouts/tpa-submit/contact-details-drawer/co
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
// Supporting files
import { fetchCmsContentForPage, processIfStatements, getStringWithCustomValues } from '@/helpers/cms-content-helper.js';
import {
fetchCmsContentForPage,
processIfStatements,
getStringWithCustomValues,
} from '@/helpers/cms-content-helper.js';
import { Form } from 'vee-validate';
import BaseFormMixin from '@/mixins/base-form-mixin.js';
import widgetFields from '@/constants/cms-widget-fields.js';
import { useMainStore } from '@/store';
import { toTitleCase, toDisplayPhoneNumber, formatAddress, formatAmountInDollars } from '@/helpers/text-helper.js';
import { getDamageDisplayContent, getLocationAnswer } from '@/helpers/damage-review-content-generator.js';
import {
toTitleCase,
toDisplayPhoneNumber,
formatAddress,
formatAmountInDollars,
} from '@/helpers/text-helper.js';
import {
getDamageDisplayContent,
getLocationAnswer,
} from '@/helpers/damage-review-content-generator.js';
import damageLocationsSelected from '@/constants/damage-locations-selected.js';
const VERIFYING_COVERAGE = 'Verifying coverage';
@ -132,7 +143,7 @@ export default {
siteFooter,
contactDetailsDrawer,
// eslint-disable-next-line vue/no-reserved-component-names
Form
Form,
},
mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) {
@ -155,41 +166,66 @@ export default {
vehicle: 'VehicleSubTitle',
damage: 'DamageSubTitle',
shop: 'PreferredShopSubTitle',
contactInfo: 'ContactDetailsSubTitle'
contactInfo: 'ContactDetailsSubTitle',
},
damageLocations: 'DamageLocationsWidget',
orderDetails: 'OrderDetailsContent',
footer: 'SiteFooterWidget'
footer: 'SiteFooterWidget',
},
companyName,
customValueMap: {
glassShop: companyName
}
glassShop: companyName,
},
};
},
computed: {
subHeaderTitle() {
return this.getCmsContent(this.widget.siteSubHeader, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
return this.getCmsContent(
this.widget.siteSubHeader,
widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT
);
},
subHeaderBodyOne() {
return this.getCmsContent(this.widget.siteSubHeader, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
return this.getCmsContent(
this.widget.siteSubHeader,
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
);
},
subHeaderBodyTwo() {
const cmsContent = this.getCmsContent(this.widget.siteSubHeader, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
const cmsContent = this.getCmsContent(
this.widget.siteSubHeader,
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2
);
return getStringWithCustomValues(cmsContent, this.customValueMap);
},
serviceSummaryText() {
return this.getCmsContent(this.widget.serviceSummary, widgetFields.TEXT_BLOCK_WIDGET.TEXT);
return this.getCmsContent(
this.widget.serviceSummary,
widgetFields.TEXT_BLOCK_WIDGET.TEXT
);
},
orderDetailsTitle() {
return this.getCmsContent(this.widget.orderDetails, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
return this.getCmsContent(
this.widget.orderDetails,
widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT
);
},
orderDetailsBody() {
const orderDetailsBodyText = this.getCmsContent(this.widget.orderDetails, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
return processIfStatements(orderDetailsBodyText, 'custom', this.getCustomValueFromString);
const orderDetailsBodyText = this.getCmsContent(
this.widget.orderDetails,
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
);
return processIfStatements(
orderDetailsBodyText,
'custom',
this.getCustomValueFromString
);
},
forwardButtonText() {
return this.getCmsContent(this.widget.footer, widgetFields.FOOTER_WIDGET.FORWARD_BUTTON_TEXT);
return this.getCmsContent(
this.widget.footer,
widgetFields.FOOTER_WIDGET.FORWARD_BUTTON_TEXT
);
},
isVerified() {
return useMainStore().order.payment.insuranceCoverage.isVerified;
@ -198,7 +234,9 @@ export default {
return useMainStore().order.currentDeductible;
},
deductibleBoxValue() {
return this.isVerified ? formatAmountInDollars(this.currentDeductible) : VERIFYING_COVERAGE;
return this.isVerified
? formatAmountInDollars(this.currentDeductible)
: VERIFYING_COVERAGE;
},
getVehicleLines() {
const { year, make, model } = useMainStore().order.vehicle;
@ -208,15 +246,27 @@ export default {
return [line];
},
locationAnswers() {
return this.getInputQuestionWidgetAnswersNullSafe(this.widget.damageLocations);
return this.getInputQuestionWidgetAnswersNullSafe(
this.widget.damageLocations
);
},
driverSideDamageAnswers() {
const answerContent = getLocationAnswer(damageLocationsSelected.DRIVER, this.locationAnswers);
return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName);
const answerContent = getLocationAnswer(
damageLocationsSelected.DRIVER,
this.locationAnswers
);
return this.getInputQuestionWidgetAnswersNullSafe(
answerContent?.SubWidgetName
);
},
passengerSideDamageAnswers() {
const answerContent = getLocationAnswer(damageLocationsSelected.PASSENGER, this.locationAnswers);
return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName);
const answerContent = getLocationAnswer(
damageLocationsSelected.PASSENGER,
this.locationAnswers
);
return this.getInputQuestionWidgetAnswersNullSafe(
answerContent?.SubWidgetName
);
},
getDamageLines() {
const { glassToReplace, isRepair } = useMainStore().order.damage;
@ -229,76 +279,108 @@ export default {
);
},
getPreferredShopLines() {
const { phoneNumber, address } = useMainStore().order.serviceLocation.provider;
const { phoneNumber, address } =
useMainStore().order.serviceLocation.provider;
const { streetAddress, city, state, zipCode } = address;
const displayAddress = formatAddress(streetAddress, null, city, state, zipCode);
const displayAddress = formatAddress(
streetAddress,
null,
city,
state,
zipCode
);
const displayPhoneNumber = toDisplayPhoneNumber(phoneNumber);
return [toTitleCase(this.companyName ?? ''), displayAddress, displayPhoneNumber];
return [
toTitleCase(this.companyName ?? ''),
displayAddress,
displayPhoneNumber,
];
},
getContactInfoLines() {
const { firstName, lastName, emailAddress, servicePhone } = useMainStore().contactInfo;
const { firstName, lastName, emailAddress, servicePhone } =
useMainStore().contactInfo;
return [
`${firstName} ${lastName}`,
emailAddress ?? '',
toDisplayPhoneNumber(servicePhone)
toDisplayPhoneNumber(servicePhone),
];
}
},
},
methods:
{
setSections() {
const vehicleScenario = useMainStore().isPolicyVehicle
? this.navigationScenarios.EDIT_POLICY_VEHICLE
: this.navigationScenarios.EDIT_VEHICLE;
this.sections = [
this.getSection(this.widget.subheader.vehicle, this.getVehicleLines, () => this.navigate(vehicleScenario)),
// eslint-disable-next-line max-len
this.getSection(this.widget.subheader.damage, this.getDamageLines, () => this.navigate(this.navigationScenarios.EDIT_DAMAGE)),
// eslint-disable-next-line max-len
this.getSection(this.widget.subheader.shop, this.getPreferredShopLines, () => this.navigate(this.navigationScenarios.EDIT_PREFERRED_SHOP)),
// eslint-disable-next-line max-len
this.getSection(this.widget.subheader.contactInfo, this.getContactInfoLines, this.openContactDetailsModal)
];
},
getSection(widgetName, lines, onClick) {
return {
title: this.getCmsContent(widgetName, widgetFields.TEXT_BLOCK_WIDGET.TEXT),
lines,
onClickEdit: onClick
};
},
forwardButtonAction() {
this.navigate(this.navigationScenarios.CLICKED_FORWARD);
},
navigate(scenario) {
this.$router.navigate(scenario, this.$route);
},
getCustomValueFromString(str) {
switch (str) {
case 'deductibleAboveZero':
return this.isVerified && this.currentDeductible !== 0;
case 'zeroDeductible':
return this.isVerified && this.currentDeductible === 0;
case 'verifyingCoverage':
return !this.isVerified;
default:
return null;
}
},
openContactDetailsModal() {
this.$refs.contactDetailsDrawer.openModal();
methods: {
setSections() {
const vehicleScenario = useMainStore().isPolicyVehicle
? this.navigationScenarios.EDIT_POLICY_VEHICLE
: this.navigationScenarios.EDIT_VEHICLE;
this.sections = [
this.getSection(
this.widget.subheader.vehicle,
this.getVehicleLines,
() => this.navigate(vehicleScenario)
),
// eslint-disable-next-line max-len
this.getSection(
this.widget.subheader.damage,
this.getDamageLines,
() => this.navigate(this.navigationScenarios.EDIT_DAMAGE)
),
// eslint-disable-next-line max-len
this.getSection(
this.widget.subheader.shop,
this.getPreferredShopLines,
() =>
this.navigate(
this.navigationScenarios.EDIT_PREFERRED_SHOP
)
),
// eslint-disable-next-line max-len
this.getSection(
this.widget.subheader.contactInfo,
this.getContactInfoLines,
this.openContactDetailsModal
),
];
},
getSection(widgetName, lines, onClick) {
return {
title: this.getCmsContent(
widgetName,
widgetFields.TEXT_BLOCK_WIDGET.TEXT
),
lines,
onClickEdit: onClick,
};
},
forwardButtonAction() {
this.navigate(this.navigationScenarios.CLICKED_FORWARD);
},
navigate(scenario) {
this.$router.navigate(scenario, this.$route);
},
getCustomValueFromString(str) {
switch (str) {
case 'deductibleAboveZero':
return this.isVerified && this.currentDeductible !== 0;
case 'zeroDeductible':
return this.isVerified && this.currentDeductible === 0;
case 'verifyingCoverage':
return !this.isVerified;
default:
return null;
}
}
},
openContactDetailsModal() {
this.$refs.contactDetailsDrawer.openModal();
},
},
};
</script>
<style lang="scss" scoped>
.tpa-submit__title--line-height {
line-height: map-get($spacers, 6);
}
.text-color--darker-gray {
color: $darker-gray
color: $darker-gray;
}
.text-color--black {
@ -307,7 +389,6 @@ export default {
hr {
opacity: 1;
color: $gray-350
color: $gray-350;
}
</style>

471
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -1,99 +1,101 @@
<template>
<Form
ref="theForm"
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition replace-options-question">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<Form
ref="theForm"
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div
class="container-fluid fade-on-route-transition replace-options-question">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<alert
v-if="shouldDisplayVehicleChangeAlert"
ref="vehicleChangeAlert"
class="mt-5 mb-0"
cmsWidgetName="VehicleChangeAlert"
alertClass="alert-warning"
:isDismissible="false" />
<vehicleBanner
class="mb-4"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6">
<damageLocationQuestion
ref="damageLocation"
v-model="selectedDamageLocations"
cmsWidgetName="DamageLocationQuestion"
groupName="DamageLocationQuestion" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<windshieldOptions
ref="windshieldOptions"
v-model="selectedWindshieldOptions"
:hasRepairReplaceConflict="hasRepairReplaceConflict"
:hasSplitSingleConflict="hasSplitSingleConflict"
:selectedDamageLocations="selectedDamageLocations"
class="mb-3" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<alert
v-if="hasRepairReplaceConflict"
class="my-5"
cmsWidgetName="HasReplacementConflict"
alertClass="alert-danger"
:isDismissible="false" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<sideDoorOptions
v-show="!hasRepairReplaceConflict"
ref="sideDoorOptions"
v-model="sideDoorOptionsData"
cmsWidgetName="SideDoorSideQuestion"
groupName="SideDoorSideQuestion"
:selectedDamageLocations="selectedDamageLocations"
class="mb-1" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<replaceOptionsQuestion
ref="backGlassOptions"
v-model="selectedRearReplaceOptions"
cmsWidgetName="RearReplaceOptionsQuestion"
:isAvailable="
isRearWindowDamageLocation &&
!hasRepairReplaceConflict
"
groupName="BackGlassReplaceOptionsQuestion"
validationRules="replace-options-required" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<site-footer
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<alert
v-if="shouldDisplayVehicleChangeAlert"
ref="vehicleChangeAlert"
class="mt-5 mb-0"
cmsWidgetName="VehicleChangeAlert"
alertClass="alert-warning"
:isDismissible="false" />
<vehicleBanner
class="mb-4"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6">
<damageLocationQuestion
ref="damageLocation"
v-model="selectedDamageLocations"
cmsWidgetName="DamageLocationQuestion"
groupName="DamageLocationQuestion" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<windshieldOptions
ref="windshieldOptions"
v-model="selectedWindshieldOptions"
:hasRepairReplaceConflict="hasRepairReplaceConflict"
:hasSplitSingleConflict="hasSplitSingleConflict"
:selectedDamageLocations="selectedDamageLocations"
class="mb-3" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<alert
v-if="hasRepairReplaceConflict"
class="my-5"
cmsWidgetName="HasReplacementConflict"
alertClass="alert-danger"
:isDismissible="false" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<sideDoorOptions
v-show="!hasRepairReplaceConflict"
ref="sideDoorOptions"
v-model="sideDoorOptionsData"
cmsWidgetName="SideDoorSideQuestion"
groupName="SideDoorSideQuestion"
:selectedDamageLocations="selectedDamageLocations"
class="mb-1" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<replaceOptionsQuestion
ref="backGlassOptions"
v-model="selectedRearReplaceOptions"
cmsWidgetName="RearReplaceOptionsQuestion"
:isAvailable="
isRearWindowDamageLocation && !hasRepairReplaceConflict
"
groupName="BackGlassReplaceOptionsQuestion"
validationRules="replace-options-required" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<site-footer
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</Form>
</Form>
</template>
<script>
@ -140,7 +142,7 @@ export default {
replaceOptionsQuestion,
// eslint-disable-next-line vue/no-reserved-component-names
Form,
alert
alert,
},
mixins: [BaseFormMixin, vehicleQuestionsMixin],
async beforeRouteEnter(to, from, next) {
@ -148,18 +150,20 @@ export default {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
const damageOptionsPromise = store.getDamageOptions(store.order.vehicle.carId);
const damageOptionsPromise = store.getDamageOptions(
store.order.vehicle.carId
);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: 'cmsContent',
promise: cmsContentPromise
promise: cmsContentPromise,
},
{
resultKey: 'damageOptions',
promise: damageOptionsPromise
}
promise: damageOptionsPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
@ -167,13 +171,23 @@ export default {
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.$refs.damageLocation.initializeComponent(resultMap.damageOptions);
vm.$refs.sideDoorOptions.initializeComponent(
resultMap.damageOptions.driverSideOptions.availableReplacementOptions,
resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
vm.$refs.damageLocation.initializeComponent(
resultMap.damageOptions
);
vm.$refs.sideDoorOptions.initializeComponent(
resultMap.damageOptions.driverSideOptions
.availableReplacementOptions,
resultMap.damageOptions.passengerSideOptions
.availableReplacementOptions
);
vm.$refs.windshieldOptions.initializeComponent(
resultMap.damageOptions.windshieldOptions
.availableReplacementOptions
);
vm.$refs.backGlassOptions.initializeComponent(
resultMap.damageOptions.backGlassOptions
.availableReplacementOptions
);
vm.$refs.windshieldOptions.initializeComponent(resultMap.damageOptions.windshieldOptions.availableReplacementOptions);
vm.$refs.backGlassOptions.initializeComponent(resultMap.damageOptions.backGlassOptions.availableReplacementOptions);
});
},
setup() {
@ -187,77 +201,100 @@ export default {
sideDoorOptionsData: {
selectedDoorSides: this.getDoorSidesFromStore(),
selectedDriverSideReplaceOptions:
this.getDriverSideReplaceOptionsFromStore(),
this.getDriverSideReplaceOptionsFromStore(),
selectedPassengerSideReplaceOptions:
this.getPassengerSideReplaceOptionsFromStore()
this.getPassengerSideReplaceOptionsFromStore(),
},
selectedWindshieldOptions: this.getWindshieldOptionsFromStore(),
selectedRearReplaceOptions: this.getRearReplaceOptionsFromStore()
selectedRearReplaceOptions: this.getRearReplaceOptionsFromStore(),
};
},
computed: {
isWindshieldDamageLocation() {
return this.selectedDamageLocations.some((selectedDamages) =>
selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD);
return this.selectedDamageLocations.some(
(selectedDamages) =>
selectedDamages.toUpperCase() ===
damageLocationsCms.WINDSHIELD
);
},
isSideDoorDamageLocation() {
return this.selectedDamageLocations.some((selectedDamages) =>
selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR);
return this.selectedDamageLocations.some(
(selectedDamages) =>
selectedDamages.toUpperCase() ===
damageLocationsCms.SIDEDOOR
);
},
isRearWindowDamageLocation() {
return this.selectedDamageLocations.some((selectedDamages) =>
selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW);
return this.selectedDamageLocations.some(
(selectedDamages) =>
selectedDamages.toUpperCase() ===
damageLocationsCms.REARWINDOW
);
},
isWindshieldRepair() {
return (
this.isWindshieldDamageLocation
&& this.selectedWindshieldOptions.selectedWindshieldDamageType
=== damageLocationsSelected.REPAIR
this.isWindshieldDamageLocation &&
this.selectedWindshieldOptions.selectedWindshieldDamageType ===
damageLocationsSelected.REPAIR
);
},
isDriverSideReplace() {
if (!this.isSideDoorDamageLocation) return false;
return this.sideDoorOptionsData.selectedDoorSides.some((selectedDriverSide) =>
selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE);
return this.sideDoorOptionsData.selectedDoorSides.some(
(selectedDriverSide) =>
selectedDriverSide.toUpperCase() ===
damageLocationsCms.DRIVERSIDE
);
},
isPassengerSideReplace() {
if (!this.isSideDoorDamageLocation) return false;
return this.sideDoorOptionsData.selectedDoorSides.some((selectedPassengerSide) =>
selectedPassengerSide.toUpperCase()
=== damageLocationsCms.PASSENGERSIDE);
return this.sideDoorOptionsData.selectedDoorSides.some(
(selectedPassengerSide) =>
selectedPassengerSide.toUpperCase() ===
damageLocationsCms.PASSENGERSIDE
);
},
hasRepairReplaceConflict() {
return (
this.isWindshieldDamageLocation
&& this.selectedDamageLocations.length > 1
&& this.isWindshieldRepair
this.isWindshieldDamageLocation &&
this.selectedDamageLocations.length > 1 &&
this.isWindshieldRepair
);
},
hasSplitSingleConflict() {
if (
!this.selectedDamageLocations?.includes('Windshield')
|| this.selectedWindshieldOptions.selectedWindshieldDamageType
=== damageLocationsSelected.REPAIR
|| !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
) return false;
!this.selectedDamageLocations?.includes('Windshield') ||
this.selectedWindshieldOptions.selectedWindshieldDamageType ===
damageLocationsSelected.REPAIR ||
!this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
)
return false;
return (
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some((selectedSingleWindshield) =>
selectedSingleWindshield.toUpperCase()
=== damageLocationsSelected.SINGLE.toUpperCase())
&& (this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some((selectedDriverWindshield) =>
selectedDriverWindshield.toUpperCase()
=== damageLocationsSelected.DRIVER.toUpperCase())
|| this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some((selectedPassengerWindshield) =>
selectedPassengerWindshield.toUpperCase()
=== damageLocationsSelected.PASSENGER.toUpperCase()))
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
(selectedSingleWindshield) =>
selectedSingleWindshield.toUpperCase() ===
damageLocationsSelected.SINGLE.toUpperCase()
) &&
(this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
(selectedDriverWindshield) =>
selectedDriverWindshield.toUpperCase() ===
damageLocationsSelected.DRIVER.toUpperCase()
) ||
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
(selectedPassengerWindshield) =>
selectedPassengerWindshield.toUpperCase() ===
damageLocationsSelected.PASSENGER.toUpperCase()
))
);
},
shouldDisplayVehicleChangeAlert() {
return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT];
}
return this.$route.params[
this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT
];
},
},
methods: {
arePagePrerequisitesValid() {
@ -270,21 +307,32 @@ export default {
const glassSelections = [];
if (
this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.WINDSHIELD)
|| this.mainStore.order.damage.isRepair
this.mainStore.order.damage.glassToReplace?.some(
(glass) =>
glass.glassLocation ===
damageLocationsSelected.WINDSHIELD
) ||
this.mainStore.order.damage.isRepair
) {
glassSelections.push(damageLocationsSelected.WINDSHIELD);
}
if (
this.mainStore.order.damage.glassToReplace?.some((glass) =>
glass.glassLocation === damageLocationsSelected.DRIVER
|| glass.glassLocation === damageLocationsSelected.PASSENGER)
this.mainStore.order.damage.glassToReplace?.some(
(glass) =>
glass.glassLocation ===
damageLocationsSelected.DRIVER ||
glass.glassLocation ===
damageLocationsSelected.PASSENGER
)
) {
glassSelections.push(damageLocationsSelected.SIDEDOOR);
}
if (
this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.REAR)
this.mainStore.order.damage.glassToReplace?.some(
(glass) =>
glass.glassLocation === damageLocationsSelected.REAR
)
) {
glassSelections.push(damageLocationsSelected.REARWINDOW);
}
@ -295,45 +343,62 @@ export default {
const windShieldOptions = {
selectedWindshieldDamageType: '',
selectedWindshieldChipCount: null,
selectedWindshieldReplaceOptions: []
selectedWindshieldReplaceOptions: [],
};
if (this.mainStore.order.damage.isRepair === undefined) return windshieldOptions;
if (this.mainStore.order.damage.isRepair === undefined)
return windshieldOptions;
if (this.mainStore.order.damage.isRepair) {
windShieldOptions.selectedWindshieldDamageType =
damageLocationsSelected.REPAIR;
damageLocationsSelected.REPAIR;
windShieldOptions.selectedWindshieldChipCount =
this.mainStore.order.damage.numberOfChips;
this.mainStore.order.damage.numberOfChips;
} else {
if (
this.mainStore.order.damage.glassToReplace?.some((glass) =>
glass.glassLocation === damageLocationsSelected.WINDSHIELD
&& glass.glassName === damageLocationsSelected.SINGLE)
this.mainStore.order.damage.glassToReplace?.some(
(glass) =>
glass.glassLocation ===
damageLocationsSelected.WINDSHIELD &&
glass.glassName === damageLocationsSelected.SINGLE
)
) {
windShieldOptions.selectedWindshieldDamageType =
damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.SINGLE);
damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push(
damageLocationsSelected.SINGLE
);
}
if (
this.mainStore.order.damage.glassToReplace?.some((glass) =>
glass.glassLocation === damageLocationsSelected.WINDSHIELD
&& glass.glassName === damageLocationsSelected.DRIVER)
this.mainStore.order.damage.glassToReplace?.some(
(glass) =>
glass.glassLocation ===
damageLocationsSelected.WINDSHIELD &&
glass.glassName === damageLocationsSelected.DRIVER
)
) {
windShieldOptions.selectedWindshieldDamageType =
damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.DRIVER);
damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push(
damageLocationsSelected.DRIVER
);
}
if (
this.mainStore.order.damage.glassToReplace?.some((glass) =>
glass.glassLocation === damageLocationsSelected.WINDSHIELD
&& glass.glassName === damageLocationsSelected.PASSENGER)
this.mainStore.order.damage.glassToReplace?.some(
(glass) =>
glass.glassLocation ===
damageLocationsSelected.WINDSHIELD &&
glass.glassName ===
damageLocationsSelected.PASSENGER
)
) {
windShieldOptions.selectedWindshieldDamageType =
damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.PASSENGER);
damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push(
damageLocationsSelected.PASSENGER
);
}
}
@ -342,13 +407,20 @@ export default {
getDoorSidesFromStore() {
const doorSides = [];
if (
this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.DRIVER)
this.mainStore.order.damage.glassToReplace?.some(
(glass) =>
glass.glassLocation === damageLocationsSelected.DRIVER
)
) {
doorSides.push(damageLocationsSelected.DRIVERSIDE);
}
if (
this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.PASSENGER)
this.mainStore.order.damage.glassToReplace?.some(
(glass) =>
glass.glassLocation ===
damageLocationsSelected.PASSENGER
)
) {
doorSides.push(damageLocationsSelected.PASSENGERSIDE);
}
@ -379,7 +451,10 @@ export default {
},
getRearReplaceOptionsFromStore() {
const rearReplaceOptions =
this.mainStore.order.damage.glassToReplace?.filter((glass) => glass.glassLocation === damageLocationsSelected.REAR)[0]?.glassName;
this.mainStore.order.damage.glassToReplace?.filter(
(glass) =>
glass.glassLocation === damageLocationsSelected.REAR
)[0]?.glassName;
return rearReplaceOptions;
},
@ -391,7 +466,8 @@ export default {
);
if (this.isWindshieldRepair) {
const supportingItems = await useMainStore().getSupportingItems();
const supportingItems =
await useMainStore().getSupportingItems();
useMainStore().updateSupportingItems(supportingItems.data);
}
@ -403,10 +479,13 @@ export default {
} else if (this.mainStore.order.vehicle.vin) {
// If vin already exists, navigate directly to vin-lookup
const partsOrQuestionsResponse = await this.getPartsOrQuestions();
const partsOrQuestionsResponse =
await this.getPartsOrQuestions();
if (partsOrQuestionsResponse.error) {
// To Do: Need requirement on what to do here
window.console.error('Error on retrieving PartsOrQuestions');
window.console.error(
'Error on retrieving PartsOrQuestions'
);
this.$refs.siteFooter.removeLoader();
return null;
}
@ -428,42 +507,48 @@ export default {
selectedGlassToReplace() {
const selectedGlassToReplace = [];
if (this.isWindshieldDamageLocation && !this.isWindshieldRepair) {
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach((wsItem) => {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.WINDSHIELD,
glassName: wsItem
});
});
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach(
(wsItem) => {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.WINDSHIELD,
glassName: wsItem,
});
}
);
}
if (this.isDriverSideReplace) {
this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach((driverItem) => {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.DRIVER,
glassName: driverItem
});
});
this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach(
(driverItem) => {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.DRIVER,
glassName: driverItem,
});
}
);
}
if (this.isPassengerSideReplace) {
this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach((passengerItem) => {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.PASSENGER,
glassName: passengerItem
});
});
this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach(
(passengerItem) => {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.PASSENGER,
glassName: passengerItem,
});
}
);
}
if (this.isRearWindowDamageLocation) {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.REAR,
glassName: this.selectedRearReplaceOptions
glassName: this.selectedRearReplaceOptions,
});
}
return selectedGlassToReplace;
}
}
},
},
};
</script>

82
src/layouts/vehicle-lookup/vehicle-lookup.vue
View file

@ -1,39 +1,37 @@
<template>
<Form
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<Form @submit="onSubmit" @invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<div class="select-car-form rounded">
<VehicleBanner
class="mt-2 mb-4"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<SiteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
class="mt-5 mb-2" />
<VinLookupMethods
ref="VinLookupMethods"
v-model="selectedVinLookupMethod"
cmsWidgetName="VINLookupMethod"
groupName="VinLookupMethods" />
<SiteFooter
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="isForwardActionDisabled"
class="mt-5"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<div class="select-car-form rounded">
<VehicleBanner
class="mt-2 mb-4"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<SiteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
class="mt-5 mb-2" />
<VinLookupMethods
ref="VinLookupMethods"
v-model="selectedVinLookupMethod"
cmsWidgetName="VINLookupMethod"
groupName="VinLookupMethods" />
<SiteFooter
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="isForwardActionDisabled"
class="mt-5"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</div>
</Form>
</Form>
</template>
<script>
// Import Supporting Files
@ -53,13 +51,13 @@ import VinLookupMethods from '@/layouts/vehicle-lookup/vin-lookup-methods/vin-lo
export default {
name: 'vehicle-lookup',
components: {
// eslint-disable-next-line vue/no-reserved-component-names
// eslint-disable-next-line vue/no-reserved-component-names
Form,
SiteFooter,
SiteHeader,
SiteSubHeader,
VehicleBanner,
VinLookupMethods
VinLookupMethods,
},
mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) {
@ -69,8 +67,8 @@ export default {
const promiseResultMap = [
{
resultKey: 'cmsContent',
promise: cmsContentPromise
}
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
@ -82,13 +80,13 @@ export default {
},
data() {
return {
selectedVinLookupMethod: null
selectedVinLookupMethod: null,
};
},
computed: {
isForwardActionDisabled() {
return this.selectedVinLookupMethod === null;
}
},
},
methods: {
arePagePrerequisiteValid() {
@ -118,7 +116,7 @@ export default {
break;
}
},
resetDependentState() {}
}
resetDependentState() {},
},
};
</script>

202
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -1,60 +1,59 @@
<template>
<Form
ref="theForm"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<Form ref="theForm" @submit="onSubmit" @invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner
ref="vehicleBanner"
class="mt-2 mb-4"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<siteSubHeader
ref="siteSubHeader"
cmsWidgetName="SiteSubHeaderWidget" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<alert
id="vehicle-parts-alert"
class="mt-3 mb-3"
alertClass="alert-warning"
cmsWidgetName="AlertWidget"
:isDismissible="false" />
<div v-for="(item, i) in PartsOrQuestions" :key="i">
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
<hr v-if="i > 0" />
<glassPartQuestion
:ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
v-model="
selectedGlassParts[
item.glassLocation + '-' + item.glassName
]
"
:glassLocation="item.glassLocation"
:glassName="item.glassName"
:colorAnswers="item.colorAnswers"
:alreadyPopulatedPartsData="
alreadyPopulatedPartsData
" />
</div>
<siteFooter
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="isForwardActionDisabled"
@backClicked="navigateBackByVehicleQuestions"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner
ref="vehicleBanner"
class="mt-2 mb-4"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<siteSubHeader
ref="siteSubHeader"
cmsWidgetName="SiteSubHeaderWidget" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<alert
id="vehicle-parts-alert"
class="mt-3 mb-3"
alertClass="alert-warning"
cmsWidgetName="AlertWidget"
:isDismissible="false" />
<div
v-for="(item, i) in PartsOrQuestions"
:key="i">
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
<hr v-if="i > 0" />
<glassPartQuestion
:ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
v-model="
selectedGlassParts[item.glassLocation + '-' + item.glassName]
"
:glassLocation="item.glassLocation"
:glassName="item.glassName"
:colorAnswers="item.colorAnswers"
:alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
</div>
<siteFooter
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="isForwardActionDisabled"
@backClicked="navigateBackByVehicleQuestions"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</Form>
</Form>
</template>
<script>
@ -78,25 +77,25 @@ import { useMainStore } from '@/store';
export default {
name: 'vehicle-parts',
components: {
// eslint-disable-next-line vue/no-reserved-component-names
// eslint-disable-next-line vue/no-reserved-component-names
Form,
glassPartQuestion,
siteHeader,
vehicleBanner,
siteSubHeader,
siteFooter,
alert
alert,
},
mixins: [BaseFormMixin, vehicleQuestionsMixin],
async beforeRouteEnter(to, from, next) {
// Call APIs
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: 'cmsContent',
promise: cmsContentPromise
}
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page.
@ -105,26 +104,32 @@ export default {
// Glass Part Question dynamic component
Object.keys(vm.$refs)
.filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
.filter(
(r) =>
r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined
)
.forEach((c) =>
vm.$refs[c][0].initializeComponent({
ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget
}));
ColorQuestionWidget:
resultMap.cmsContent.ColorQuestionWidget,
FeatureQuestionWidget:
resultMap.cmsContent.FeatureQuestionWidget,
})
);
});
},
data() {
return {
selectedGlassParts: {},
alertWidgetData: Object,
alreadyPopulatedPartsData: []
alreadyPopulatedPartsData: [],
};
},
computed: {
isForwardActionDisabled() {
return (
this.selectedGlassPartNumbers?.length
!== this.PartsFromApi.partsOrQuestions?.length
this.selectedGlassPartNumbers?.length !==
this.PartsFromApi.partsOrQuestions?.length
);
},
selectedGlassPartNumbers() {
@ -151,13 +156,15 @@ export default {
FeatureAnswers: [
{
FeatureAnswerText:
p.description === '' ? p.color : p.description,
PartNumber: p.partNumber
}
]
p.description === ''
? p.color
: p.description,
PartNumber: p.partNumber,
},
],
});
return arr;
}, [])
}, []),
}));
return mappedData;
@ -169,7 +176,7 @@ export default {
RefPrefix() {
return 'partQuestion';
}
},
},
mounted() {
this.LoadInitialPartsData();
@ -178,10 +185,11 @@ export default {
arePagePrerequisitesValid() {
// Check if isRepair is populated and if the pageData we need is here (Parts data)
return (
useMainStore().damage.isRepair != null
&& useMainStore().pageData(issPageValues.VEHICLE_PARTS)
&& Object.keys(useMainStore().pageData(issPageValues.VEHICLE_PARTS))
.length !== 0
useMainStore().damage.isRepair != null &&
useMainStore().pageData(issPageValues.VEHICLE_PARTS) &&
Object.keys(
useMainStore().pageData(issPageValues.VEHICLE_PARTS)
).length !== 0
);
},
async forwardButtonAction() {
@ -189,19 +197,25 @@ export default {
// Match them to the parts from the API.
// eslint-disable-next-line no-restricted-syntax
for (const [key, value] of Object.entries(this.PartsFromApi.partsOrQuestions)) {
for (const [key, value] of Object.entries(
this.PartsFromApi.partsOrQuestions
)) {
// eslint-disable-next-line no-restricted-syntax
for (const [partKey, partValue] of Object.entries(value.parts)) {
for (const [partKey, partValue] of Object.entries(
value.parts
)) {
const currentPart =
this.PartsFromApi.partsOrQuestions[key].parts[partKey];
this.PartsFromApi.partsOrQuestions[key].parts[partKey];
const isMatched = this.selectedGlassPartNumbers.some((p) => p === currentPart.partNumber);
const isMatched = this.selectedGlassPartNumbers.some(
(p) => p === currentPart.partNumber
);
if (isMatched) {
matchedParts.push({
glassLocation: value.glassLocation,
glassName: value.glassName,
parts: [currentPart]
parts: [currentPart],
});
}
}
@ -209,7 +223,9 @@ export default {
// If no parts could be matched, throw an error (isForwardActionDisabled is based off of matchedParts)
if (this.isForwardActionDisabled) {
this.$refs.siteFooter.removeLoader();
throw new Error('Could not match any parts to the selected parts');
throw new Error(
'Could not match any parts to the selected parts'
);
}
this.navigateForward(matchedParts, null);
@ -218,9 +234,9 @@ export default {
LoadInitialPartsData() {
const partsData = this.PartsFromApi;
this.alreadyPopulatedPartsData =
this.mainStore.lineItems.glassParts === null
? []
: this.mainStore.lineItems.glassParts;
this.mainStore.lineItems.glassParts === null
? []
: this.mainStore.lineItems.glassParts;
partsData.partsOrQuestions.map((g) => {
// If the part is already populated, use the value from the store and populate the v-model.
@ -228,19 +244,21 @@ export default {
const { partNumber } = this.alreadyPopulatedPartsData[key];
g.parts.forEach((p) => {
if (p.partNumber === partNumber) {
this.selectedGlassParts[`${g.glassLocation}-${g.glassName}`] = p;
this.selectedGlassParts[
`${g.glassLocation}-${g.glassName}`
] = p;
}
});
});
});
}
}
},
},
};
</script>
<style lang="scss" scoped>
#vehicle-parts-alert {
.alert-heading {
margin-top: 0.25rem !important;
}
.alert-heading {
margin-top: 0.25rem !important;
}
}
</style>

170
src/layouts/vehicle-selection/vehicle-selection.vue
View file

@ -1,75 +1,75 @@
<template>
<Form
ref="theForm"
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader
class="mb-2 header"
cmsWidgetName="SiteHeaderWidget" />
<Form
ref="theForm"
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader
class="mb-2 header"
cmsWidgetName="SiteHeaderWidget" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
class="siteSubHeader"
justification="center"
darkGraySubText />
<vehicleQuestion
ref="vehicleYearQuestion"
v-model="selectedYear"
class="mb-2 mt-4"
cmsWidgetName="VehicleYearQuestion"
:updateValues="updateYearValues"
validationRules="year-required"
inputId="yearQuestionField" />
<vehicleQuestion
ref="vehicleMakeQuestion"
v-model="selectedMake"
class="mb-2 mt-4"
cmsWidgetName="VehicleMakeQuestion"
:updateValues="updateMakeValues"
validationRules="make-required"
inputId="makeQuestionField" />
<vehicleQuestion
ref="vehicleModelQuestion"
v-model="selectedModel"
class="mb-2 mt-4"
cmsWidgetName="VehicleModelQuestion"
:updateValues="updateModelValues"
validationRules="model-required"
inputId="modelQuestionField" />
<vehicleQuestion
ref="vehicleStyleQuestion"
v-model="selectedStyle"
class="mb-2 mt-4"
cmsWidgetName="VehicleStyleQuestion"
:updateValues="updateStyleValues"
validationRules="style-required"
inputId="styleQuestionField" />
<vehicleBanner
ref="banner"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="displayGeneric"
class="mt-5 mb-3" />
<siteFooter
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
@backClicked="navigateBack" />
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
class="siteSubHeader"
justification="center"
darkGraySubText />
<vehicleQuestion
ref="vehicleYearQuestion"
v-model="selectedYear"
class="mb-2 mt-4"
cmsWidgetName="VehicleYearQuestion"
:updateValues="updateYearValues"
validationRules="year-required"
inputId="yearQuestionField" />
<vehicleQuestion
ref="vehicleMakeQuestion"
v-model="selectedMake"
class="mb-2 mt-4"
cmsWidgetName="VehicleMakeQuestion"
:updateValues="updateMakeValues"
validationRules="make-required"
inputId="makeQuestionField" />
<vehicleQuestion
ref="vehicleModelQuestion"
v-model="selectedModel"
class="mb-2 mt-4"
cmsWidgetName="VehicleModelQuestion"
:updateValues="updateModelValues"
validationRules="model-required"
inputId="modelQuestionField" />
<vehicleQuestion
ref="vehicleStyleQuestion"
v-model="selectedStyle"
class="mb-2 mt-4"
cmsWidgetName="VehicleStyleQuestion"
:updateValues="updateStyleValues"
validationRules="style-required"
inputId="styleQuestionField" />
<vehicleBanner
ref="banner"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="displayGeneric"
class="mt-5 mb-3" />
<siteFooter
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
@backClicked="navigateBack" />
</div>
</div>
</div>
</Form>
</Form>
</template>
<script>
@ -104,20 +104,20 @@ export default {
siteFooter,
// eslint-disable-next-line vue/no-reserved-component-names
Form,
vehicleQuestion
vehicleQuestion,
},
mixins: [baseFormMixin],
async beforeRouteEnter(to, from, next) {
// Call APIs
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: 'cmsContent',
promise: cmsContentPromise
}
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
@ -129,7 +129,7 @@ export default {
},
props: {
cmsWidgetName: String,
validationRules: String
validationRules: String,
},
data() {
const { year, make, model, style } = useMainStore().order.vehicle;
@ -137,13 +137,13 @@ export default {
selectedYear: year,
selectedMake: make,
selectedModel: model,
selectedStyle: style
selectedStyle: style,
};
},
computed: {
displayGeneric() {
return !this.selectedStyle;
}
},
},
watch: {
@ -171,7 +171,7 @@ export default {
selectedStyle(value) {
this.mainStore.updateVehicleStyle(value);
this.mainStore.setVehicle();
}
},
},
mounted() {
this.$refs.vehicleYearQuestion.getNewValues();
@ -220,22 +220,22 @@ export default {
},
async updateStyleValues() {
return this.mainStore.getVehicleStyles();
}
}
},
},
};
</script>
<style lang="scss" scoped>
.select-car-form {
margin-left: 0.75rem;
margin-right: 0.75rem;
margin-left: 0.75rem;
margin-right: 0.75rem;
}
.siteSubHeader {
margin-top: 1.5rem;
margin-top: 1.5rem;
}
.subheader-secondary {
margin-top: 0.5rem;
padding: 0px;
margin-top: 0.5rem;
padding: 0px;
}
</style>

162
src/layouts/vin-lookup/vin-lookup.vue
View file

@ -1,44 +1,44 @@
<template>
<Form
ref="theForm"
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<Form
ref="theForm"
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<div class="select-car-form rounded">
<vehicleBanner
class="mt-2 mb-4"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="!carIdIsValid" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<vinLookupAlerts
class="mt-5"
:activeAlertType="activeVehicleLookupAlertType" />
<vinQuestion
v-model="vin"
:mask="vinMask"
:isDisabled="vinPopulatedOnPageLoad"
textPosition="left" />
<vinLocationInformation />
<siteFooter
ref="siteFooter"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
class="mt-5"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<div class="select-car-form rounded">
<vehicleBanner
class="mt-2 mb-4"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="!carIdIsValid" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<vinLookupAlerts
class="mt-5"
:activeAlertType="activeVehicleLookupAlertType" />
<vinQuestion
v-model="vin"
:mask="vinMask"
:isDisabled="vinPopulatedOnPageLoad"
textPosition="left" />
<vinLocationInformation />
<siteFooter
ref="siteFooter"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
class="mt-5"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</div>
</Form>
</Form>
</template>
<script>
// Import Supporting Files
@ -75,12 +75,12 @@ export default {
vehicleBanner,
vinLocationInformation,
vinLookupAlerts,
vinQuestion
vinQuestion,
},
mixins: [baseFormMixin, vehicleQuestionsMixin],
provide() {
return {
vehicleFromLookup: computed(() => this.vehicleFromLookup)
vehicleFromLookup: computed(() => this.vehicleFromLookup),
};
},
async beforeRouteEnter(to, from, next) {
@ -90,8 +90,8 @@ export default {
const promiseResultMap = [
{
resultKey: 'cmsContent',
promise: cmsContentPromise
}
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
@ -109,23 +109,23 @@ export default {
const vin = this.getVinFromStore();
return {
activeVehicleLookupAlertType:
vin?.length > 0 && !this.hasValidCarId()
? vehicleLookupAlertTypes.NOT_FOUND
: null,
vin?.length > 0 && !this.hasValidCarId()
? vehicleLookupAlertTypes.NOT_FOUND
: null,
needToLookupVehicle: true,
vehicleFromLookup: null,
vinWithNonMatchingCarId: vin?.length > 0 && !this.hasValidCarId(),
vin,
forwardButtonCarStyle: '',
vinPopulatedOnPageLoad: vin?.length > 0 && this.hasValidCarId()
vinPopulatedOnPageLoad: vin?.length > 0 && this.hasValidCarId(),
};
},
computed: {
isCarIdDifferentFromTheStore() {
return (
this.vehicleFromLookup !== null
&& this.hasValidCarId()
&& this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
this.vehicleFromLookup !== null &&
this.hasValidCarId() &&
this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
);
},
isTwoIdenticalYMMVehicleFound() {
@ -141,7 +141,7 @@ export default {
if (this.vinPopulatedOnPageLoad) {
// TODO: Modify to remove side effects in computed
this.activeVehicleLookupAlertType =
vehicleLookupAlertTypes.PERFECT_MATCH;
vehicleLookupAlertTypes.PERFECT_MATCH;
this.needToLookupVehicle = false;
const lastSixChars = this.vin.substring(11, this.vin.length);
return `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`;
@ -150,15 +150,17 @@ export default {
},
carIdIsValid() {
return this.hasValidCarId();
}
},
},
watch: {
vin() {
this.resetActiveAlert();
this.$refs.siteFooter.enableForwardAction();
this.needToLookupVehicle = true;
this.$refs.siteFooter.updateButtonText(this.getCmsContent('SiteFooterWidget', 'ForwardButtonText'));
}
this.$refs.siteFooter.updateButtonText(
this.getCmsContent('SiteFooterWidget', 'ForwardButtonText')
);
},
},
methods: {
arePagePrerequisiteValid() {
@ -169,7 +171,8 @@ export default {
},
hasValidCarId() {
return (
this.mainStore.vehicle.carId && this.mainStore.vehicle.carId !== '0'
this.mainStore.vehicle.carId &&
this.mainStore.vehicle.carId !== '0'
);
},
// NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
@ -179,11 +182,16 @@ export default {
this.$refs.siteFooter.enableForwardAction();
if (this.needToLookupVehicle) {
const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin);
const vehicleLookupResponse = await this.lookupVehicleByVin(
this.vin
);
if (vehicleLookupResponse.error) {
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
this.mainStore.setBailout(bailoutMessage.vehicleNotFound(this.vin));
this.activeVehicleLookupAlertType =
vehicleLookupAlertTypes.NOT_FOUND;
this.mainStore.setBailout(
bailoutMessage.vehicleNotFound(this.vin)
);
this.resetVehicleFromLookup();
this.$refs.siteFooter.removeLoader();
// Temp solution to turn on 'disabled' style on the Continue button
@ -196,25 +204,30 @@ export default {
this.mainStore.resetBailout();
// Add vin bcs the response from the service doesn't contain vin
this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, {
vin: this.vin
});
this.vehicleFromLookup = Object.assign(
vehicleLookupResponse.data,
{
vin: this.vin,
}
);
}
if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
if (this.isTwoIdenticalYMMVehicleFound) {
this.activeVehicleLookupAlertType =
vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
this.forwardButtonCarStyle = this.vehicleFromLookup.style;
} else {
this.activeVehicleLookupAlertType =
vehicleLookupAlertTypes.NOT_MATCHED;
vehicleLookupAlertTypes.NOT_MATCHED;
}
const vehicleYearMakeModelStyle =
// eslint-disable-next-line max-len
`${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`;
this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModelStyle}`);
// eslint-disable-next-line max-len
`${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`;
this.$refs.siteFooter.updateButtonText(
`Continue with ${vehicleYearMakeModelStyle}`
);
this.$refs.siteFooter.removeLoader();
this.needToLookupVehicle = false;
@ -224,13 +237,16 @@ export default {
let isSelectedGlassAvailableForVehicle = true;
if (this.isCarIdDifferentFromTheStore) {
isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(this.vehicleFromLookup.carId);
isSelectedGlassAvailableForVehicle =
await isGlassAvailableForCarId(
this.vehicleFromLookup.carId
);
}
// navigate back to vehicle-damage
if (
this.isCarIdDifferentFromTheStore
&& !isSelectedGlassAvailableForVehicle
this.isCarIdDifferentFromTheStore &&
!isSelectedGlassAvailableForVehicle
) {
this.mainStore.updateVehicle(this.vehicleFromLookup);
this.mainStore.resetDamageState();
@ -280,8 +296,8 @@ export default {
} catch (responseError) {
return {
error: {
status: responseError.status
}
status: responseError.status,
},
};
}
},
@ -291,7 +307,7 @@ export default {
resetVehicleFromLookup() {
this.vehicleFromLookup = null;
},
resetDependentState() {}
}
resetDependentState() {},
},
};
</script>

395
src/layouts/welcome-page/welcome-page.vue
View file

@ -1,149 +1,147 @@
<template>
<Form
ref="theForm"
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
class="mt-4" />
<textboxQuestion
ref="policyNumber"
v-model="welcomePageModel.policyNumber"
inputId="policyNumberField"
cmsWidgetName="PolicyNumberQuestion"
isRequired
disableAutoFill
:isDisabled="isPolicyHolderDisabled"
:validationRules="rules.policyNumber"
class="mb-3" />
<textboxQuestion
ref="policyZip"
v-model="welcomePageModel.policyZipCode"
inputId="policyZipCode"
cmsWidgetName="PolicyZipQuestion"
isRequired
mask="#####"
:isDisabled="isPolicyZipDisabled"
:validationRules="rules.policyZip"
class="mb-3" />
<textboxQuestion
ref="dateOfLoss"
v-model="welcomePageModel.dateOfLoss"
type="date"
cmsWidgetName="DateOfLossQuestion"
inputId="dateOfLossField"
isRequired
:isDisabled="isDateOfLossDisabled"
disableAutoFill
:max="new Date().toJSON().slice(0, 10)"
:min="'1972-12-01'"
:validationRules="rules.lossDate"
class="mb-3" />
<textBlock
cmsWidgetName="DamageDateEstimateWidget"
typeStyle="small"
class="mb-3" />
<dropdownQuestion
id="welcomeDropdown"
ref="damageCause"
v-model="welcomePageModel.damageCause"
cmsWidgetName="DamageCauseQuestion"
inputId="damageCauseQuestionField"
:options="DamageCauseOptions"
disableAutoFill
:validationRules="rules.damageOption"
placeHolderText="Select an option"
class="mb-3" />
<textboxQuestion
ref="phoneNumber"
v-model="welcomePageModel.phoneNumber"
inputId="phoneNumberField"
cmsWidgetName="PhoneNumberQuestion"
:validationRules="rules.phoneNumber"
isRequired
:mask="phoneMask"
disableAutoFill
class="mb-3" />
<textboxQuestion
ref="email"
v-model="welcomePageModel.email"
inputId="emailField"
cmsWidgetName="EmailAddressQuestion"
:validationRules="rules.email"
isRequired
disableAutoFill
class="mb-3" />
<textboxQuestion
v-if="displayDamageCityQuestion"
ref="damageCity"
v-model="welcomePageModel.damageCity"
class="mb-3"
inputId="damageCityField"
cmsWidgetName="DamageCityQuestion"
isRequired
disableAutoFill
:validationRules="rules.lossCity" />
<dropdownQuestion
v-if="displayDamageStateQuestion"
id="welcomeDropdown"
ref="state"
v-model="welcomePageModel.damageState"
class="mb-3"
cmsWidgetName="DamageStateQuestion"
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
:options="getStates"
:validationRules="rules.lossState"
isRequired
disableAutoFill
placeHolderText="Select an option" />
<buttonQuestion
v-if="displayGlassOnlyQuestion"
ref="glassOnlyDamage"
v-model="welcomePageModel.isDamageGlassOnly"
class="px-0 mt-4"
cmsWidgetName="GlassOnlyQuestion"
inputId="isDamageGlassOnly"
:answers="DamageGlassOnlyOptions"
:questionText="DamageGlassOnlyQuestion"
groupName="glassOnlyDamageOption"
buttonTypeString="listButtonHorizontal"
:validationRules="rules.damageOption"
isRequired
isSmallQuestionLabelText
disableAutoFill />
<div
id="welcomeFooter"
class="row">
<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"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</div>
<!-- Footer image component must have parent (usually container-fluid)
<Form
ref="theForm"
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
class="mt-4" />
<textboxQuestion
ref="policyNumber"
v-model="welcomePageModel.policyNumber"
inputId="policyNumberField"
cmsWidgetName="PolicyNumberQuestion"
isRequired
disableAutoFill
:isDisabled="isPolicyHolderDisabled"
:validationRules="rules.policyNumber"
class="mb-3" />
<textboxQuestion
ref="policyZip"
v-model="welcomePageModel.policyZipCode"
inputId="policyZipCode"
cmsWidgetName="PolicyZipQuestion"
isRequired
mask="#####"
:isDisabled="isPolicyZipDisabled"
:validationRules="rules.policyZip"
class="mb-3" />
<textboxQuestion
ref="dateOfLoss"
v-model="welcomePageModel.dateOfLoss"
type="date"
cmsWidgetName="DateOfLossQuestion"
inputId="dateOfLossField"
isRequired
:isDisabled="isDateOfLossDisabled"
disableAutoFill
:max="new Date().toJSON().slice(0, 10)"
:min="'1972-12-01'"
:validationRules="rules.lossDate"
class="mb-3" />
<textBlock
cmsWidgetName="DamageDateEstimateWidget"
typeStyle="small"
class="mb-3" />
<dropdownQuestion
id="welcomeDropdown"
ref="damageCause"
v-model="welcomePageModel.damageCause"
cmsWidgetName="DamageCauseQuestion"
inputId="damageCauseQuestionField"
:options="DamageCauseOptions"
disableAutoFill
:validationRules="rules.damageOption"
placeHolderText="Select an option"
class="mb-3" />
<textboxQuestion
ref="phoneNumber"
v-model="welcomePageModel.phoneNumber"
inputId="phoneNumberField"
cmsWidgetName="PhoneNumberQuestion"
:validationRules="rules.phoneNumber"
isRequired
:mask="phoneMask"
disableAutoFill
class="mb-3" />
<textboxQuestion
ref="email"
v-model="welcomePageModel.email"
inputId="emailField"
cmsWidgetName="EmailAddressQuestion"
:validationRules="rules.email"
isRequired
disableAutoFill
class="mb-3" />
<textboxQuestion
v-if="displayDamageCityQuestion"
ref="damageCity"
v-model="welcomePageModel.damageCity"
class="mb-3"
inputId="damageCityField"
cmsWidgetName="DamageCityQuestion"
isRequired
disableAutoFill
:validationRules="rules.lossCity" />
<dropdownQuestion
v-if="displayDamageStateQuestion"
id="welcomeDropdown"
ref="state"
v-model="welcomePageModel.damageState"
class="mb-3"
cmsWidgetName="DamageStateQuestion"
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
:options="getStates"
:validationRules="rules.lossState"
isRequired
disableAutoFill
placeHolderText="Select an option" />
<buttonQuestion
v-if="displayGlassOnlyQuestion"
ref="glassOnlyDamage"
v-model="welcomePageModel.isDamageGlassOnly"
class="px-0 mt-4"
cmsWidgetName="GlassOnlyQuestion"
inputId="isDamageGlassOnly"
:answers="DamageGlassOnlyOptions"
:questionText="DamageGlassOnlyQuestion"
groupName="glassOnlyDamageOption"
buttonTypeString="listButtonHorizontal"
:validationRules="rules.damageOption"
isRequired
isSmallQuestionLabelText
disableAutoFill />
<div id="welcomeFooter" class="row">
<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"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</div>
<!-- Footer image component must have parent (usually container-fluid)
set to display: flex and height 100dvh or height 100% -->
<footerImage />
</div>
</Form>
<footerImage />
</div>
</Form>
</template>
<script>
@ -163,7 +161,7 @@ import footerImage from '@/iss-components/site-footer/footer-image/footer-image.
import {
fetchCmsContentForPage,
fetchGlobalCmsContent,
updateCmsSiteHeader
updateCmsSiteHeader,
} from '@/helpers/cms-content-helper';
import settleAllPromises from '@/helpers/layout-helper';
import { required } from '@/helpers/validation-rules';
@ -196,25 +194,25 @@ export default {
siteFooter,
textBlock,
// eslint-disable-next-line vue/no-reserved-component-names
Form
Form,
},
mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) {
// Call APIs
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
const cmsGlobalSiteHeaderContentPromise =
fetchGlobalCmsContent('iss-siteheader');
fetchGlobalCmsContent('iss-siteheader');
// Settle promises and get results
const promiseResultMap = [
{
resultKey: 'cmsContent',
promise: cmsContentPromise
promise: cmsContentPromise,
},
{
resultKey: 'globalSiteHeaderCmsContent',
promise: cmsGlobalSiteHeaderContentPromise
}
promise: cmsGlobalSiteHeaderContentPromise,
},
];
// use resultMap to populate layout content.
@ -246,8 +244,8 @@ export default {
lossState: `${globalRules.DATE_OF_LOSS_STATE_REQUIRED}`,
policyNumber: `${globalRules.POLICY_NUMBER_REQUIRED}|${globalRules.POLICY_NUMBER_FORMAT}`,
policyZip: `${globalRules.POLICY_ZIP_REQUIRED}|${globalRules.POLICY_ZIP_FORMAT}`,
phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`
}
phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`,
},
};
},
computed: {
@ -302,16 +300,18 @@ export default {
},
phoneMask() {
return MaskaFormattedMasks.PHONE_NUMBER;
}
},
},
methods: {
async forwardButtonAction() {
await this.mainStore.validateZip({ zip: this.welcomePageModel.policyZipCode })
await this.mainStore
.validateZip({ zip: this.welcomePageModel.policyZipCode })
.then(async (zipInfo) => {
if (zipInfo?.data?.isValid === true) {
this.mainStore.updatePolicyData(this.welcomePageModel);
this.mainStore.order.serviceLocation.zipCodeCtu = zipInfo.data.zipCodeCtu?.toString();
this.mainStore.order.serviceLocation.zipCodeCtu =
zipInfo.data.zipCodeCtu?.toString();
const billToInfo = await this.getBillToInfo(
this.mainStore.issConfig.parentAccountNumber,
@ -319,16 +319,31 @@ export default {
);
if (billToInfo !== null) {
this.mainStore.issConfig.billToAccountNumber = billToInfo.billToAccountNumber;
this.mainStore.issConfig.itacCashBillToNumber = billToInfo.itacCashBillToNumber;
this.mainStore.issConfig.itacFnrBillToNumber = billToInfo.itacFnrBillToNumber;
this.mainStore.issConfig.billToAccountNumber =
billToInfo.billToAccountNumber;
this.mainStore.issConfig.itacCashBillToNumber =
billToInfo.itacCashBillToNumber;
this.mainStore.issConfig.itacFnrBillToNumber =
billToInfo.itacFnrBillToNumber;
}
await this.mainStore.getDuplicateReferrals()
.then(() => {}, () => {})
await this.mainStore
.getDuplicateReferrals()
.then(
() => {},
() => {}
)
.finally(async () => {
if (this.isCoverageEnabled && !this.maxCoverageLookupAttemptsReached) {
await this.mainStore.getCoveragePolicyInfo()?.then(() => {}, () => {});
if (
this.isCoverageEnabled &&
!this.maxCoverageLookupAttemptsReached
) {
await this.mainStore
.getCoveragePolicyInfo()
?.then(
() => {},
() => {}
);
} else {
this.mainStore.order.policy.policyLookupSuccessful = false;
}
@ -347,24 +362,29 @@ export default {
providerNumber: providerNumber.toString(),
billToSelectionCriteria: {
typeOfClaim: 'GLASS ONLY',
lineOfBusiness: 'PERSONAL'
}
lineOfBusiness: 'PERSONAL',
},
};
const response = await globalMethods.callHttpClient({
method: endpoints.GetBillToInfo.method,
endpoint: endpoints.GetBillToInfo.url,
payload
payload,
});
return response.data;
} catch (err) {
console.error(`Error Status Code: ${err.data?.status}: ${err.data?.title}`);
console.error(
`Error Status Code: ${err.data?.status}: ${err.data?.title}`
);
return null;
}
},
navigateForward() {
if (this.mainStore.applicationUser.duplicateOrders?.length > 0 ?? false) {
if (
this.mainStore.applicationUser.duplicateOrders?.length > 0 ??
false
) {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_DUPLICATES,
this.$route,
@ -409,36 +429,37 @@ export default {
damageCause: this.mainStore.order.policy.damageCause,
damageState: this.mainStore.order.policy.damageState,
damageCity: this.mainStore.order.policy.damageCity,
isDamageGlassOnly: this.mainStore.order.policy.isDamageGlassOnly,
isDamageGlassOnly:
this.mainStore.order.policy.isDamageGlassOnly,
phoneNumber: this.mainStore.order.customer.phoneNumber,
email: this.mainStore.order.customer.emailAddress,
isPolicyNumberDisabled:
this.mainStore.order.policy.isPolicyNumberDisabled
this.mainStore.order.policy.isPolicyNumberDisabled,
};
}
}
},
},
};
</script>
<style lang="scss" scoped>
form {
height: 100dvh;
.container-fluid {
display: flex;
flex-direction: column;
height: 100%;
}
height: 100dvh;
.container-fluid {
display: flex;
flex-direction: column;
height: 100%;
}
}
@-moz-document url-prefix() {
// Temporary solution that prevents the Continue button from being hidden in Firefox
#welcomeFooter {
position: static !important;
}
// Fixes Firefox styling defect for placeholder text in dropdown fields
#welcomeDropdown {
.form-select {
padding: 0.75rem 1rem;
// Temporary solution that prevents the Continue button from being hidden in Firefox
#welcomeFooter {
position: static !important;
}
// Fixes Firefox styling defect for placeholder text in dropdown fields
#welcomeDropdown {
.form-select {
padding: 0.75rem 1rem;
}
}
}
}
</style>