525 lines
21 KiB
Vue
525 lines
21 KiB
Vue
<template>
|
|
<Form
|
|
ref="theForm"
|
|
v-slot="{ meta }"
|
|
@submit="onSubmit"
|
|
@invalidSubmit="onInvalidSubmit">
|
|
<div class="page-container-grouped-styles">
|
|
<div class="fade-on-route-transition position-relative">
|
|
<loadingModal
|
|
ref="loadingModal"
|
|
:textSlides="loadingText" />
|
|
<siteHeader
|
|
ref="siteHeader"
|
|
cmsWidgetName="SiteHeaderWidget" />
|
|
<div class="select-car">
|
|
<div class="container-fluid pb-2">
|
|
<div class="row px-3">
|
|
<div class="col">
|
|
<div class="pb-1 mt-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">
|
|
{{ formattedDeductible }}
|
|
</div>
|
|
<div
|
|
v-if="isQuoteDisplayed"
|
|
class="d-flex justify-content-center cost mb-0">
|
|
{{ formattedServicePrice }}
|
|
</div>
|
|
<div
|
|
v-if="verifiedITAC"
|
|
class="d-flex justify-content-center mb-4 deductible-text">
|
|
{{ deductibleText }}
|
|
<span class="text-success fw-bold">{{ formattedDeductible }}</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" />
|
|
</div>
|
|
<siteFooter
|
|
ref="siteFooter"
|
|
class="mt-5"
|
|
cmsWidgetName="SiteFooterWidget"
|
|
:isForwardActionDisabled="!meta.valid"
|
|
@backClicked="navigateBackByVehicleQuestions"
|
|
@forwardClicked="navigateForward" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<recalModal
|
|
ref="RecalModal"
|
|
cmsWidgetName="RecalModal" />
|
|
<contentGroupModal
|
|
ref="DeductibleModal"
|
|
cmsWidgetName="DeductibleModal"
|
|
class="deductible-modal" />
|
|
</Form>
|
|
</template>
|
|
<script>
|
|
|
|
// Import Component
|
|
import { Form } from 'vee-validate';
|
|
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
|
|
import siteHeader from '@/iss-components/site-header/site-header.vue';
|
|
import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue';
|
|
import alert from '@/ux-components/alert/alert.vue';
|
|
import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
|
|
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
|
|
import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
|
|
import textBlock from '@/digital-components/text-block/text-block.vue';
|
|
|
|
// Import Supporting Files
|
|
import { fetchCmsContentForPage, setupModalLinks, processIfStatements } from '@/helpers/cms-content-helper.js';
|
|
import settleAllPromises from '@/helpers/layout-helper.js';
|
|
import { getDamageString } from '@/helpers/damage-helper.js';
|
|
import { useMainStore } from '@/store/index.js';
|
|
import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin.js';
|
|
import globalRules from '@/constants/global-rules.js';
|
|
import baseFormMixin from '@/mixins/base-form-mixin.js';
|
|
import navigationScenarios from '@/router/router-constants/navigation-scenarios.js';
|
|
import routerParams from '@/router/router-constants/router-params';
|
|
import issPageValues from '@/router/router-constants/issPage-values';
|
|
import bailoutMessage from '@/constants/bailoutMessage';
|
|
import widgetFields from '@/constants/cms-widget-fields.js';
|
|
|
|
const SAFELITE_PROVIDER = 'Safelite';
|
|
|
|
export default {
|
|
name: 'coverage-statement',
|
|
components: {
|
|
siteFooter,
|
|
siteHeader,
|
|
// eslint-disable-next-line vue/no-reserved-component-names
|
|
Form,
|
|
recalModal,
|
|
alert,
|
|
contentGroupModal,
|
|
buttonQuestion,
|
|
loadingModal,
|
|
textBlock
|
|
},
|
|
mixins: [baseFormMixin, vehicleQuestionsMixin],
|
|
async beforeRouteEnter(to, from, next) {
|
|
// Call APIs
|
|
const cmsContentPromise = fetchCmsContentForPage(to?.query?.issPage);
|
|
const supportingItemsPromise = await useMainStore().getSupportingItems();
|
|
|
|
// Settle promises and get results
|
|
const promiseResultMap = [
|
|
{
|
|
resultKey: 'cmsContent',
|
|
promise: cmsContentPromise
|
|
},
|
|
{
|
|
resultKey: 'supportingItems',
|
|
promise: supportingItemsPromise
|
|
}
|
|
];
|
|
|
|
const resultMap = await settleAllPromises(promiseResultMap);
|
|
const clonedGlassParts = useMainStore().lineItems.glassParts
|
|
? JSON.parse(JSON.stringify(useMainStore().lineItems.glassParts))
|
|
: [];
|
|
const availableLineItems = [
|
|
...(resultMap.supportingItems ?? []),
|
|
...(clonedGlassParts ?? [])
|
|
];
|
|
|
|
let hasBailedOut = false;
|
|
let pricingResults = [];
|
|
if (useMainStore().policy.policyLookupSuccessful && useMainStore().vehicle.policyVehicleId >= 0) {
|
|
await useMainStore().getFinalDeductible();
|
|
pricingResults = await useMainStore().getPriceOrderItems(availableLineItems)
|
|
.catch((err) => {
|
|
useMainStore()
|
|
.setBailout(
|
|
to,
|
|
bailoutMessage.pricingResponseError(
|
|
availableLineItems.map((li) => li.partNumber),
|
|
{ code: err.code, message: err.message, data: err.data }
|
|
)
|
|
);
|
|
hasBailedOut = true;
|
|
next(`/?issPage=${issPageValues.BAILOUT_PAGE}`);
|
|
});
|
|
}
|
|
|
|
if (!hasBailedOut) {
|
|
// Call the "next" function to complete the transition to this page.
|
|
next((vm) => {
|
|
vm.setCmsContent(resultMap.cmsContent);
|
|
vm.setSupportingItems(resultMap.supportingItems);
|
|
// eslint-disable-next-line no-param-reassign
|
|
vm.setAvailableLineItems(pricingResults);
|
|
vm.$refs.loadingModal.showModal();
|
|
vm.initializeComponent();
|
|
if (!vm.unverified) {
|
|
useMainStore().disableKeyFields();
|
|
}
|
|
});
|
|
}
|
|
},
|
|
data() {
|
|
const { isRepair } = useMainStore().damage;
|
|
const { policyLookupSuccessful, noCoverage } = useMainStore().policy;
|
|
const { currentDeductible } = useMainStore().order.currentDeductible;
|
|
return {
|
|
isRepair,
|
|
policyLookupSuccessful,
|
|
deductibleValue: currentDeductible,
|
|
isNoComp: noCoverage ?? false,
|
|
availableLineItems: [],
|
|
selectedProvider: '',
|
|
deductibleText: 'Your deductible is',
|
|
// TODO update when design team gives appropriate text
|
|
loadingText: [
|
|
'Connecting to your insurance company',
|
|
'Nearly there',
|
|
'Finishing up'
|
|
],
|
|
rules: {
|
|
selectionRequired: globalRules.OPTION_REQUIRED
|
|
},
|
|
supportingItems: null,
|
|
widget: {
|
|
subheader: 'SiteSubHeaderWidget',
|
|
verifiedItacAlert: 'VerifiedITACAlert',
|
|
explanatoryText: 'ExplanatoryTextWidget',
|
|
nextStep: 'NextStepsWidget',
|
|
serviceProviderQuestion: 'ServiceProviderQuestion'
|
|
}
|
|
};
|
|
},
|
|
computed: {
|
|
coverageStatementSubHeader() {
|
|
return this.getTextFromCmsWithCustomIfStatements(
|
|
this.widget.subheader,
|
|
widgetFields.SUB_HEADER_WIDGET.SUB_HEADER_TEXT
|
|
);
|
|
},
|
|
verifiedItacAlertHeader() {
|
|
return this.getCmsContent(
|
|
this.widget.verifiedItacAlert,
|
|
widgetFields.ALERT_WIDGET.HEADLINE_TEXT
|
|
);
|
|
},
|
|
verifiedItacAlertBody() {
|
|
return this.getCmsContent(
|
|
this.widget.verifiedItacAlert,
|
|
widgetFields.ALERT_WIDGET.BODY_TEXT
|
|
)?.replaceAll('{custom:costSavings}', this.costSavings);
|
|
},
|
|
secondaryText() {
|
|
return this.getTextFromCmsWithCustomIfStatements(
|
|
this.widget.subheader,
|
|
widgetFields.CONTENT_GROUP_WIDGET.SECONDARY_TEXT
|
|
);
|
|
},
|
|
explanatoryText() {
|
|
return this.getTextFromCmsWithCustomIfStatements(
|
|
this.widget.explanatoryText,
|
|
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
|
|
);
|
|
},
|
|
nextStepsHeader() {
|
|
return this.getTextFromCmsWithCustomIfStatements(
|
|
this.widget.nextStep,
|
|
widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT
|
|
);
|
|
},
|
|
nextStepsBody() {
|
|
return this.getTextFromCmsWithCustomIfStatements(
|
|
this.widget.nextStep,
|
|
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
|
|
)?.replaceAll('{custom:damage}', this.damageText);
|
|
},
|
|
damageText() {
|
|
const damageString = getDamageString();
|
|
return damageString === 'match' ? '' : damageString;
|
|
},
|
|
formattedDeductible() {
|
|
return this.getDeductibleString(this.deductibleValue);
|
|
},
|
|
registerClaimSuccessful() {
|
|
return useMainStore().payment.insuranceCoverage.isVerified;
|
|
},
|
|
verifiedNoComp() {
|
|
return this.policyLookupSuccessful && this.isNoComp;
|
|
},
|
|
verifiedITAC() {
|
|
return this.policyLookupSuccessful
|
|
&& !this.isNoComp
|
|
&& this.deductibleValue > this.totalServicePrice;
|
|
},
|
|
// TODO maybe tweak
|
|
coveredAndServicePriceAboveOrEqualDeductible() {
|
|
return !this.verifiedNoComp && this.totalServicePrice >= this.deductibleValue;
|
|
},
|
|
verifiedDeductible() {
|
|
return useMainStore().isClaimRegistrationRequired
|
|
? this.registerClaimSuccessful && this.coveredAndServicePriceAboveOrEqualDeductible && this.deductibleValue !== null
|
|
: this.policyLookupSuccessful && this.coveredAndServicePriceAboveOrEqualDeductible;
|
|
},
|
|
unverified() {
|
|
return !this.verifiedDeductible && !this.verifiedITAC && !this.verifiedNoComp;
|
|
},
|
|
isADAS() {
|
|
const parts = useMainStore().order.lineItems.glassParts;
|
|
return parts !== null && !!parts.find((part) => part.requiresRecalibration);
|
|
},
|
|
// TODO replace with better method
|
|
totalServicePrice() {
|
|
let total = 0;
|
|
this.availableLineItems.forEach((lineItem) => {
|
|
total += this.getTotalLineItemPrice(lineItem);
|
|
});
|
|
return total;
|
|
},
|
|
formattedServicePrice() {
|
|
return this.getServicePriceString(this.totalServicePrice);
|
|
},
|
|
costSavings() {
|
|
const savings = this.getITACCostSavings(this.deductibleValue, this.totalServicePrice);
|
|
const formattedSavings = parseFloat(savings).toFixed(2);
|
|
return `$${formattedSavings}`;
|
|
},
|
|
serviceProviderQuestionText() {
|
|
return this.getCmsContent(
|
|
this.widget.serviceProviderQuestion,
|
|
widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT
|
|
);
|
|
},
|
|
serviceProviderQuestionAnswers() {
|
|
return this.getCmsContent(
|
|
this.widget.serviceProviderQuestion,
|
|
widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
|
|
);
|
|
},
|
|
isQuoteDisplayed() {
|
|
return this.verifiedITAC || this.verifiedNoComp;
|
|
}
|
|
},
|
|
watch: {
|
|
selectedProvider() {
|
|
const buttonText = this.selectedProvider === SAFELITE_PROVIDER ? 'Continue with Safelite' : 'Safelite';
|
|
this.$refs.siteFooter.updateButtonText(buttonText);
|
|
},
|
|
nextStepsBody(newValue, oldValue) {
|
|
if (newValue !== oldValue) {
|
|
setupModalLinks(this, 'RecalModal');
|
|
setupModalLinks(this, 'DeductibleModal');
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
setupModalLinks(this);
|
|
},
|
|
methods: {
|
|
arePagePrerequisitesValid() {
|
|
return !!useMainStore().vehicle.carId;
|
|
},
|
|
async initializeComponent() {
|
|
useMainStore().updatePolicyITACFlag(this.verifiedITAC);
|
|
if (this.policyLookupSuccessful
|
|
&& useMainStore().order.vehicle.policyVehicleId >= 0
|
|
&& useMainStore().isClaimRegistrationRequired
|
|
&& !useMainStore().isClaimAlreadyRegistered
|
|
&& (this.coveredAndServicePriceAboveOrEqualDeductible || this.verifiedITAC)) {
|
|
await useMainStore().registerClaim()?.catch(() => {});
|
|
}
|
|
this.$refs.loadingModal.hideModal();
|
|
},
|
|
async navigateForward() {
|
|
if (this.unverified || this.verifiedDeductible) {
|
|
useMainStore().saveSupportingItems(this.supportingItems);
|
|
this.$router.navigate(
|
|
navigationScenarios.CLICKED_FORWARD,
|
|
this.$route,
|
|
{},
|
|
{ [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
|
|
);
|
|
} else if (this.verifiedITAC || this.verifiedNoComp) {
|
|
useMainStore().updateIsSafeliteProvider(this.selectedProvider === SAFELITE_PROVIDER);
|
|
if (this.selectedProvider === SAFELITE_PROVIDER) {
|
|
useMainStore().saveSupportingItems(this.supportingItems);
|
|
this.$router.navigate(
|
|
navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE,
|
|
this.$route,
|
|
{},
|
|
{ [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
|
|
);
|
|
} else {
|
|
useMainStore().setBailout(this.$router.currentRoute, bailoutMessage.RequestCallback());
|
|
this.$router.navigate(
|
|
navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP,
|
|
this.$route,
|
|
{},
|
|
{ [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
|
|
);
|
|
}
|
|
} else {
|
|
useMainStore().setBailout(this.$router.currentRoute, bailoutMessage.coverageStatementInvalidState());
|
|
this.$router.navigate(
|
|
navigationScenarios.CLICKED_FORWARD_WITH_INVALID_STATE,
|
|
this.$route,
|
|
{},
|
|
{ [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
|
|
);
|
|
}
|
|
},
|
|
getTextFromCmsWithCustomIfStatements(widgetName, widgetField) {
|
|
const rawText = this.getCmsContent(widgetName, widgetField);
|
|
return processIfStatements(rawText, 'custom', this.getCustomValueFromString);
|
|
},
|
|
getCustomValueFromString(str) {
|
|
switch (str) {
|
|
case 'coverageUnverified':
|
|
return this.unverified;
|
|
case 'verifiedDeductible':
|
|
return this.verifiedDeductible;
|
|
case 'verifiedITAC':
|
|
return this.verifiedITAC;
|
|
case 'verifiedNoComp':
|
|
return this.verifiedNoComp;
|
|
case 'ADASReplace':
|
|
return !this.isRepair && this.isADAS;
|
|
case 'nonADASReplace':
|
|
return !this.isRepair && !this.isADAS;
|
|
case 'nonADASRepair':
|
|
return this.isRepair;
|
|
case 'deductibleOverZero':
|
|
return this.verifiedDeductible && this.deductibleValue !== 0; // TODO what if deductible is negative?
|
|
case 'isDeductibleZero':
|
|
return this.verifiedDeductible && this.deductibleValue === 0;
|
|
default:
|
|
return null;
|
|
}
|
|
},
|
|
// TODO move to common location
|
|
getTotalLineItemPrice(lineItem) {
|
|
return lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice;
|
|
},
|
|
// TODO use price formatter
|
|
getDeductibleString(deductible) {
|
|
const formattedDeductibleFloat = parseFloat(deductible).toFixed(2);
|
|
return `$${formattedDeductibleFloat}`;
|
|
},
|
|
// TODO use price formatter
|
|
getServicePriceString(price) {
|
|
const formattedPriceFloat = parseFloat(price).toFixed(2);
|
|
return `$${formattedPriceFloat}`;
|
|
},
|
|
getITACCostSavings(vehicleDeductible, totalServicePrice) {
|
|
return vehicleDeductible - totalServicePrice;
|
|
},
|
|
setSupportingItems(newSupportingItems) {
|
|
this.supportingItems = newSupportingItems;
|
|
},
|
|
setAvailableLineItems(newAvailableLineItems) {
|
|
this.availableLineItems = newAvailableLineItems;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.cost {
|
|
color: $green;
|
|
font-size: 2rem;
|
|
font-weight: 300;
|
|
line-height: 2.75rem;
|
|
}
|
|
|
|
.deductible-text {
|
|
line-height: 1.5rem;
|
|
}
|
|
|
|
:deep p {
|
|
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;
|
|
}
|
|
}
|
|
|
|
: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;
|
|
}
|
|
}
|
|
.modal {
|
|
overflow: hidden;
|
|
}
|
|
|
|
</style>
|