Merge pull request #371 from Safelite/feature/digital/SSR-581
Feature/digital/ssr 581
This commit is contained in:
michaela-brydon-safelite
GitHub
commit
e5ceaf69f5
2 changed files with 349 additions and 365 deletions
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<Form
|
||||
ref="theForm"
|
||||
v-slot="{ meta }"
|
||||
@submit="onSubmit"
|
||||
@invalid-submit="onInvalidSubmit">
|
||||
ref="theForm"
|
||||
v-slot="{ meta }"
|
||||
@submit="onSubmit"
|
||||
@invalidSubmit="onInvalidSubmit">
|
||||
<div class="page-container-grouped-styles">
|
||||
<div class="fade-on-route-transition position-relative">
|
||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||
|
|
@ -13,16 +13,16 @@ v-slot="{ meta }"
|
|||
<div class="col">
|
||||
<div class="pb-1 mt-4">
|
||||
<h5
|
||||
v-html="coverageStatementSubHeader"
|
||||
class="text-center text-black">
|
||||
class="text-center text-black"
|
||||
v-html="coverageStatementSubHeader">
|
||||
</h5>
|
||||
<div
|
||||
v-html="explanatoryText"
|
||||
class="body-text text-center mt-4">
|
||||
class="body-text text-center mt-4"
|
||||
v-html="explanatoryText">
|
||||
</div>
|
||||
<div
|
||||
v-html="secondaryText"
|
||||
class="text-center mt-4 fw-bold text-black">
|
||||
class="text-center mt-4 fw-bold text-black"
|
||||
v-html="secondaryText">
|
||||
</div>
|
||||
<div
|
||||
v-if="verifiedDeductible"
|
||||
|
|
@ -36,38 +36,38 @@ v-slot="{ meta }"
|
|||
</div>
|
||||
<div
|
||||
v-if="verifiedITAC"
|
||||
class="d-flex justify-content-center mb-4">
|
||||
class="d-flex justify-content-center mb-4">
|
||||
{{ deductibleText }}
|
||||
<span class="text-success fw-bold">{{ formattedDeductible }}</span>
|
||||
</div>
|
||||
<alert
|
||||
ref="verifiedITACAlert"
|
||||
v-if="verifiedITAC"
|
||||
ref="verifiedITACAlert"
|
||||
class="mb-4"
|
||||
cmsWidgetName="VerifiedITACAlert"
|
||||
:manualHeadline="verifiedITACAlertHeader"
|
||||
:manualCopy="verifiedITACAlertBody"
|
||||
alertClass="alert-success"
|
||||
v-bind:isDismissible="false">
|
||||
:isDismissible="false">
|
||||
</alert>
|
||||
<div
|
||||
v-html="nextStepsHeader"
|
||||
class="fw-bold text-black mb-2">
|
||||
class="fw-bold text-black mb-2"
|
||||
v-html="nextStepsHeader">
|
||||
</div>
|
||||
<div
|
||||
v-html="nextStepsBody"
|
||||
class="body-text">
|
||||
class="body-text"
|
||||
v-html="nextStepsBody">
|
||||
</div>
|
||||
<buttonQuestion
|
||||
v-if="displayQuote"
|
||||
id="coverage-button-question"
|
||||
v-model="selectedProvider"
|
||||
cmsWidgetName="ServiceProviderQuestion"
|
||||
:questionText="questionText"
|
||||
:answers="answersFromCms"
|
||||
buttonTypeString="listButton"
|
||||
isRequired
|
||||
v-model="selectedProvider"
|
||||
validationRules="selection-required"
|
||||
id="coverage-button-question">
|
||||
:validationRules="rules.selectionRequired">
|
||||
</buttonQuestion>
|
||||
</div>
|
||||
<siteFooter
|
||||
|
|
@ -83,370 +83,347 @@ v-slot="{ meta }"
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<recalModal ref="RecalModal" cmsWidgetName="RecalModal" />
|
||||
<contentGroupModal ref="DeductibleModal" cmsWidgetName="DeductibleModal" class="deductible-modal"/>
|
||||
<recalModal
|
||||
ref="RecalModal"
|
||||
cmsWidgetName="RecalModal" />
|
||||
<contentGroupModal
|
||||
ref="DeductibleModal"
|
||||
cmsWidgetName="DeductibleModal"
|
||||
class="deductible-modal" />
|
||||
</Form>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
// Import Component
|
||||
import baseFormMixin from '@/mixins/base-form-mixin';
|
||||
import { Form, defineRule } from 'vee-validate';
|
||||
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
|
||||
import siteHeader from '@/iss-components/site-header/site-header.vue';
|
||||
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
|
||||
import textBlock from "@/digital-components/text-block/text-block";
|
||||
import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue';
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
import { Form } from 'vee-validate';
|
||||
import siteFooter from '@/iss-components/site-footer/site-footer';
|
||||
import siteHeader from '@/iss-components/site-header/site-header';
|
||||
import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal';
|
||||
import alert from '@/ux-components/alert/alert';
|
||||
import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal';
|
||||
import buttonQuestion from "@/digital-components/button-question/button-question";
|
||||
import buttonQuestion from '@/digital-components/button-question/button-question';
|
||||
|
||||
// Import Supporting Files
|
||||
import { fetchCmsContentForPage, setupModalLinks } from '@/helpers/cms-content-helper.js';
|
||||
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";
|
||||
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
|
||||
import { processIfStatements } from '@/helpers/cms-content-helper';
|
||||
import { required } from "@/helpers/validation-rules";
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
|
||||
// DEFINE VALIDATION RULES
|
||||
defineRule("selection-required", required(errorMessages.OPTION_REQUIRED));
|
||||
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';
|
||||
|
||||
const store = useMainStore();
|
||||
|
||||
export default {
|
||||
name: 'coverage-statement',
|
||||
mixins: [baseFormMixin, vehicleQuestionsMixin],
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
name: 'coverage-statement',
|
||||
components: {
|
||||
siteFooter,
|
||||
siteHeader,
|
||||
// eslint-disable-next-line vue/no-reserved-component-names
|
||||
Form,
|
||||
recalModal,
|
||||
alert,
|
||||
contentGroupModal,
|
||||
buttonQuestion
|
||||
},
|
||||
mixins: [baseFormMixin, vehicleQuestionsMixin],
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
|
||||
const supportingItemsPromise = await store.getSupportingItems();
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: 'cmsContent',
|
||||
promise: cmsContentPromise,
|
||||
const supportingItemsPromise = await store.getSupportingItems();
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: 'cmsContent',
|
||||
promise: cmsContentPromise
|
||||
},
|
||||
{
|
||||
resultKey: 'supportingItems',
|
||||
promise: supportingItemsPromise
|
||||
}
|
||||
];
|
||||
|
||||
if (useMainStore().policy.policyLookupSuccessful
|
||||
&& useMainStore().isClaimRegistrationRequired
|
||||
&& !useMainStore().policy.noCoverage) {
|
||||
const registerClaimResponse = await useMainStore().registerClaim();
|
||||
promiseResultMap.push({
|
||||
resultKey: 'registerClaim',
|
||||
promise: registerClaimResponse
|
||||
});
|
||||
}
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
const clonedGlassParts = store.order.lineItems.glassParts
|
||||
? JSON.parse(JSON.stringify(store.order.lineItems.glassParts))
|
||||
: [];
|
||||
const availableLineItems = [
|
||||
...resultMap.supportingItems,
|
||||
...clonedGlassParts
|
||||
];
|
||||
|
||||
const pricingResults = await store.getPriceOrderItems(availableLineItems);
|
||||
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.pricedGlassParts = clonedGlassParts;
|
||||
vm.supportingItems = resultMap.supportingItems;
|
||||
vm.availableLineItems = pricingResults;
|
||||
});
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isVerified: store.order.payment.insuranceCoverage.isVerified,
|
||||
supportingItems: [],
|
||||
pricedGlassParts: [],
|
||||
availableLineItems: [],
|
||||
selectedProvider: '',
|
||||
deductibleText: 'Your deductible is:',
|
||||
rules: {
|
||||
selectionRequired: globalRules.OPTION_REQUIRED
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
verifiedITACAlertHeader() {
|
||||
return this.getCmsContent('VerifiedITACAlert',
|
||||
'HeadlineText');
|
||||
},
|
||||
{
|
||||
resultKey: 'supportingItems',
|
||||
promise: supportingItemsPromise,
|
||||
verifiedITACAlertBody() {
|
||||
return this.getCmsContent('VerifiedITACAlert',
|
||||
'BodyText').replaceAll('{custom:costSavings}', this.costSavings);
|
||||
},
|
||||
];
|
||||
coverageStatementSubHeader() {
|
||||
const subheader = this.getSubheaderTextFromCms('SiteSubHeaderWidget');
|
||||
return subheader;
|
||||
},
|
||||
secondaryText() {
|
||||
const secondaryText = this.getSecondaryTextFromCms('SiteSubHeaderWidget');
|
||||
return secondaryText;
|
||||
},
|
||||
explanatoryText() {
|
||||
const explanatoryText = this.getExplantoryTextFromCms('ExplanatoryTextWidget');
|
||||
return explanatoryText;
|
||||
},
|
||||
nextStepsHeader() {
|
||||
const header = this.getHeaderTextFromCms('NextStepsWidget');
|
||||
return header;
|
||||
},
|
||||
nextStepsBody() {
|
||||
const body = this.getBodyTextFromCms('NextStepsWidget').replaceAll('{custom:damage}', this.damageText);
|
||||
return body;
|
||||
},
|
||||
continueWithSchedulingBodyText() {
|
||||
return this.getCmsContent('continueWithSchedulingCopy', 'BodyText');
|
||||
},
|
||||
unverifiedADASNextStepsBodyText() {
|
||||
return this.getCmsContent('UnverifiedADASNextStepsWidget', 'BodyText').replaceAll('{custom:damage}', this.damageText);
|
||||
},
|
||||
unverifiedNonADASNextStepsBodyText() {
|
||||
return this.getCmsContent('UnverifiedNonADASNextStepsWidget', 'BodyText').replaceAll('{custom:damage}', this.damageText);
|
||||
},
|
||||
unverifiedNonADASRepairBodyText() {
|
||||
return this.getCmsContent('UnverifiedNonADASRepairWidget', 'BodyText');
|
||||
},
|
||||
damageText() {
|
||||
const damageString = getDamageString();
|
||||
return damageString === 'match' ? '' : damageString;
|
||||
},
|
||||
vehicleDeductible() {
|
||||
if (this.coverageVerified) {
|
||||
if (store.order.damage.isRepair) {
|
||||
const repairDeductible = store.order.policy.deductible.repair;
|
||||
return repairDeductible;
|
||||
}
|
||||
|
||||
if (useMainStore().isClaimRegistrationRequired){
|
||||
const registerClaimResponse = await useMainStore().registerClaim();
|
||||
promiseResultMap.push({
|
||||
resultKey: 'registerClaim',
|
||||
promise: registerClaimResponse,
|
||||
});
|
||||
const replaceDeductible = store.order.policy.deductible.replace;
|
||||
return replaceDeductible;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
formattedDeductible() {
|
||||
return this.getDeductibleString(this.vehicleDeductible);
|
||||
},
|
||||
isDeductibleZero() {
|
||||
if (this.coverageVerified && this.verifiedDeductible) {
|
||||
return this.vehicleDeductible === 0;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
deductibleOverZero() {
|
||||
if (this.coverageVerified && this.verifiedDeductible) {
|
||||
return !this.isDeductibleZero;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
coverageVerified() {
|
||||
return this.isVerified;
|
||||
},
|
||||
coverageUnverified() {
|
||||
return !this.isVerified;
|
||||
},
|
||||
verifiedNoComp() {
|
||||
return this.coverageVerified ? store.order.policy.noCoverage : false;
|
||||
},
|
||||
verifiedITAC() {
|
||||
return this.coverageVerified
|
||||
&& !this.verifiedNoComp
|
||||
&& this.vehicleDeductible > this.totalServicePrice;
|
||||
},
|
||||
verifiedDeductible() {
|
||||
return this.coverageVerified
|
||||
&& !this.verifiedNoComp
|
||||
&& this.totalServicePrice > this.vehicleDeductible;
|
||||
},
|
||||
ADASReplace() {
|
||||
if (!store.order.damage.isRepair) {
|
||||
const parts = store.order.lineItems.glassParts;
|
||||
|
||||
if (parts != null && parts.filter((part) =>
|
||||
part.requiresRecalibration).length > 0) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
nonADASReplace() {
|
||||
return !this.ADASReplace;
|
||||
},
|
||||
nonADASRepair() {
|
||||
return store.order.damage.isRepair;
|
||||
},
|
||||
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.vehicleDeductible, this.totalServicePrice);
|
||||
const formattedSavings = parseFloat(savings).toFixed(2);
|
||||
return `$${formattedSavings}`;
|
||||
},
|
||||
questionText() {
|
||||
return this.getCmsContent('ServiceProviderQuestion', 'QuestionText');
|
||||
},
|
||||
answersFromCms() {
|
||||
return this.getCmsContent('ServiceProviderQuestion', 'Answers');
|
||||
},
|
||||
displayQuote() {
|
||||
return this.verifiedITAC || this.verifiedNoComp;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectedProvider() {
|
||||
if (this.selectedProvider === 'Safelite') {
|
||||
this.$refs.siteFooter.updateButtonText('Continue with Safelite');
|
||||
} else {
|
||||
this.$refs.siteFooter.updateButtonText('Continue');
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
setupModalLinks(this);
|
||||
},
|
||||
methods: {
|
||||
arePagePrerequisitesValid() {
|
||||
if (useMainStore().vehicle.vin) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
async forwardButtonAction() {
|
||||
return this.navigateForward();
|
||||
},
|
||||
async navigateForward() {
|
||||
if (this.coverageUnverified || this.verifiedDeductible) {
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD,
|
||||
this.$route);
|
||||
} else if (this.verifiedITAC || this.verifiedNoComp) {
|
||||
if (this.selectedProvider === 'Safelite') {
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE,
|
||||
this.$route);
|
||||
} else if (store.issConfig.enableTPAFlow) {
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_THIRD_PARTY,
|
||||
this.$route);
|
||||
} else {
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
|
||||
this.$route);
|
||||
}
|
||||
}
|
||||
},
|
||||
openModalAction(modalName) {
|
||||
this.$refs[modalName.args].openModal();
|
||||
},
|
||||
processIfStatements,
|
||||
getHeaderTextFromCms(cmsWidgetName) {
|
||||
const header = this.getCmsContent(cmsWidgetName, 'HeaderText');
|
||||
return this.processIfStatements(header, 'custom', this.getCustomValueFromString);
|
||||
},
|
||||
getSubheaderTextFromCms(cmsWidgetName) {
|
||||
const subHeader = this.getCmsContent(cmsWidgetName, 'SubHeaderText');
|
||||
return this.processIfStatements(subHeader, 'custom', this.getCustomValueFromString);
|
||||
},
|
||||
getBodyTextFromCms(cmsWidgetName) {
|
||||
const bodyText = this.getCmsContent(cmsWidgetName, 'BodyText');
|
||||
return this.processIfStatements(bodyText, 'custom', this.getCustomValueFromString);
|
||||
},
|
||||
getSecondaryTextFromCms(cmsWidgetName) {
|
||||
const secondaryText = this.getCmsContent(cmsWidgetName, 'SecondaryText');
|
||||
return this.processIfStatements(secondaryText, 'custom', this.getCustomValueFromString);
|
||||
},
|
||||
getExplantoryTextFromCms(cmsWidgetName) {
|
||||
const explanatoryText = this.getCmsContent(cmsWidgetName, 'BodyText');
|
||||
return this.processIfStatements(explanatoryText, 'custom', this.getCustomValueFromString);
|
||||
},
|
||||
getCustomValueFromString(str) {
|
||||
switch (str) {
|
||||
case 'coverageUnverified':
|
||||
return this.coverageUnverified;
|
||||
case 'verifiedDeductible':
|
||||
return this.verifiedDeductible;
|
||||
case 'verifiedITAC':
|
||||
return this.verifiedITAC;
|
||||
case 'verifiedNoComp':
|
||||
return this.verifiedNoComp;
|
||||
case 'ADASReplace':
|
||||
return this.ADASReplace;
|
||||
case 'nonADASReplace':
|
||||
return this.nonADASReplace;
|
||||
case 'nonADASRepair':
|
||||
return this.nonADASRepair;
|
||||
case 'deductibleOverZero':
|
||||
return this.deductibleOverZero;
|
||||
case 'isDeductibleZero':
|
||||
return this.isDeductibleZero;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
},
|
||||
getTotalLineItemPrice(lineItem) {
|
||||
return lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice;
|
||||
},
|
||||
getDeductibleString(deductible) {
|
||||
const formattedDeductibleFloat = parseFloat(deductible).toFixed(2);
|
||||
return `$${formattedDeductibleFloat}`;
|
||||
},
|
||||
getServicePriceString(price) {
|
||||
const formattedPriceFloat = parseFloat(price).toFixed(2);
|
||||
return `$${formattedPriceFloat}`;
|
||||
},
|
||||
getITACCostSavings(vehicleDeductible, totalServicePrice) {
|
||||
const savings = vehicleDeductible - totalServicePrice;
|
||||
return savings;
|
||||
}
|
||||
}
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
const clonedGlassParts = store.order.lineItems.glassParts
|
||||
? JSON.parse(JSON.stringify(store.order.lineItems.glassParts))
|
||||
: [];
|
||||
const availableLineItems = [
|
||||
...resultMap.supportingItems,
|
||||
...clonedGlassParts,
|
||||
];
|
||||
|
||||
const pricingResults = await store.getPriceOrderItems(availableLineItems);
|
||||
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.pricedGlassParts = clonedGlassParts;
|
||||
vm.supportingItems = resultMap.supportingItems;
|
||||
vm.availableLineItems = pricingResults;
|
||||
});
|
||||
},
|
||||
components: {
|
||||
siteFooter,
|
||||
siteHeader,
|
||||
siteSubHeader,
|
||||
Form,
|
||||
textBlock,
|
||||
recalModal,
|
||||
alert,
|
||||
contentGroupModal,
|
||||
buttonQuestion
|
||||
},
|
||||
mounted() {
|
||||
setupModalLinks(this);
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isVerified: store.order.payment.insuranceCoverage.isVerified,
|
||||
supportingItems: [],
|
||||
pricedGlassParts: [],
|
||||
availableLineItems: [],
|
||||
selectedProvider: "",
|
||||
deductibleText: "Your deductible is:",
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
verifiedITACAlertHeader() {
|
||||
return this.getCmsContent(
|
||||
"VerifiedITACAlert",
|
||||
"HeadlineText"
|
||||
)
|
||||
},
|
||||
verifiedITACAlertBody() {
|
||||
return this.getCmsContent(
|
||||
"VerifiedITACAlert",
|
||||
"BodyText"
|
||||
).replaceAll("{custom:costSavings}", this.costSavings);
|
||||
},
|
||||
coverageStatementSubHeader() {
|
||||
const subheader = this.getSubheaderTextFromCms("SiteSubHeaderWidget");
|
||||
return subheader;
|
||||
},
|
||||
secondaryText() {
|
||||
const secondaryText = this.getSecondaryTextFromCms("SiteSubHeaderWidget");
|
||||
return secondaryText;
|
||||
},
|
||||
explanatoryText() {
|
||||
const explanatoryText = this.getExplantoryTextFromCms("ExplanatoryTextWidget");
|
||||
return explanatoryText;
|
||||
},
|
||||
nextStepsHeader() {
|
||||
const header = this.getHeaderTextFromCms("NextStepsWidget");
|
||||
return header;
|
||||
},
|
||||
nextStepsBody() {
|
||||
let body = this.getBodyTextFromCms("NextStepsWidget").replaceAll("{custom:damage}", this.damageText);
|
||||
return body;
|
||||
},
|
||||
continueWithSchedulingBodyText() {
|
||||
return this.getCmsContent("continueWithSchedulingCopy", "BodyText");
|
||||
},
|
||||
unverifiedADASNextStepsBodyText() {
|
||||
return this.getCmsContent("UnverifiedADASNextStepsWidget", "BodyText").replaceAll("{custom:damage}", this.damageText);
|
||||
},
|
||||
unverifiedNonADASNextStepsBodyText() {
|
||||
return this.getCmsContent("UnverifiedNonADASNextStepsWidget", "BodyText").replaceAll("{custom:damage}", this.damageText);
|
||||
},
|
||||
unverifiedNonADASRepairBodyText() {
|
||||
return this.getCmsContent("UnverifiedNonADASRepairWidget", "BodyText");
|
||||
},
|
||||
damageText() {
|
||||
var damageString = getDamageString();
|
||||
return damageString == "match" ? "" : damageString;
|
||||
},
|
||||
vehicleDeductible() {
|
||||
if (this.coverageVerified) {
|
||||
if (store.order.damage.isRepair) {
|
||||
const repairDeductible = store.order.policy.deductible.repair
|
||||
return repairDeductible;
|
||||
}
|
||||
else {
|
||||
const replaceDeductible = store.order.policy.deductible.replace;
|
||||
return replaceDeductible;
|
||||
}
|
||||
}
|
||||
},
|
||||
formattedDeductible() {
|
||||
return this.getDeductibleString(this.vehicleDeductible);
|
||||
},
|
||||
isDeductibleZero() {
|
||||
if (this.coverageVerified && this.verifiedDeductible) {
|
||||
return this.vehicleDeductible === 0;
|
||||
}
|
||||
},
|
||||
deductibleOverZero() {
|
||||
if (this.coverageVerified && this.verifiedDeductible) {
|
||||
return !this.isDeductibleZero;
|
||||
}
|
||||
},
|
||||
coverageVerified() {
|
||||
return this.isVerified;
|
||||
},
|
||||
coverageUnverified() {
|
||||
return !this.isVerified;
|
||||
},
|
||||
verifiedNoComp() {
|
||||
if (this.coverageVerified) {
|
||||
return store.order.policy.noCoverage;
|
||||
}
|
||||
},
|
||||
verifiedITAC() {
|
||||
if (this.coverageVerified && !this.verifiedNoComp) {
|
||||
if (this.vehicleDeductible > this.totalServicePrice) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
verifiedDeductible() {
|
||||
if (this.coverageVerified && !this.verifiedNoComp) {
|
||||
if (this.totalServicePrice > this.vehicleDeductible) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
ADASReplace() {
|
||||
if (!store.order.damage.isRepair) {
|
||||
let parts = store.order.lineItems.glassParts;
|
||||
|
||||
if (parts != null && parts.filter(part => part.requiresRecalibration).length > 0) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
nonADASReplace() {
|
||||
if (!store.order.damage.isRepair) {
|
||||
return !this.ADASReplace;
|
||||
}
|
||||
},
|
||||
nonADASRepair() {
|
||||
if (store.order.damage.isRepair) {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
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.vehicleDeductible, this.totalServicePrice);
|
||||
const formattedSavings = parseFloat(savings).toFixed(2);
|
||||
return '$' + formattedSavings;
|
||||
},
|
||||
questionText() {
|
||||
return this.getCmsContent("ServiceProviderQuestion", "QuestionText");
|
||||
},
|
||||
answersFromCms() {
|
||||
return this.getCmsContent("ServiceProviderQuestion", "Answers");
|
||||
},
|
||||
displayQuote() {
|
||||
if (this.verifiedITAC || this.verifiedNoComp) {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
arePagePrerequisitesValid() {
|
||||
if (useMainStore().vehicle.vin) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
async forwardButtonAction() {
|
||||
return await this.navigateForward();
|
||||
|
||||
},
|
||||
async navigateForward() {
|
||||
if (this.coverageUnverified || this.verifiedDeductible) {
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_FORWARD,
|
||||
this.$route
|
||||
)
|
||||
}
|
||||
else if (this.verifiedITAC || this.verifiedNoComp) {
|
||||
if (this.selectedProvider === "Safelite") {
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE,
|
||||
this.$route
|
||||
)
|
||||
}
|
||||
else if (store.issConfig.enableTPAFlow){
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_FORWARD_WITH_THIRD_PARTY,
|
||||
this.$route
|
||||
)
|
||||
}
|
||||
else {
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
|
||||
this.$route
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
openModalAction(modalName) {
|
||||
this.$refs[modalName.args].openModal();
|
||||
},
|
||||
processIfStatements,
|
||||
getHeaderTextFromCms(cmsWidgetName) {
|
||||
const header = this.getCmsContent(cmsWidgetName, 'HeaderText');
|
||||
return this.processIfStatements(header, "custom", this.getCustomValueFromString);
|
||||
},
|
||||
getSubheaderTextFromCms(cmsWidgetName) {
|
||||
const subHeader = this.getCmsContent(cmsWidgetName, 'SubHeaderText');
|
||||
return this.processIfStatements(subHeader, "custom", this.getCustomValueFromString);
|
||||
},
|
||||
getBodyTextFromCms(cmsWidgetName) {
|
||||
const bodyText = this.getCmsContent(cmsWidgetName, "BodyText");
|
||||
return this.processIfStatements(bodyText, "custom", this.getCustomValueFromString);
|
||||
},
|
||||
getSecondaryTextFromCms(cmsWidgetName) {
|
||||
const secondaryText = this.getCmsContent(cmsWidgetName, "SecondaryText");
|
||||
return this.processIfStatements(secondaryText, "custom", this.getCustomValueFromString);
|
||||
},
|
||||
getExplantoryTextFromCms(cmsWidgetName) {
|
||||
const explanatoryText = this.getCmsContent(cmsWidgetName, "BodyText");
|
||||
return this.processIfStatements(explanatoryText, "custom", this.getCustomValueFromString);
|
||||
},
|
||||
getCustomValueFromString(str) {
|
||||
switch (str) {
|
||||
case 'coverageUnverified':
|
||||
return this.coverageUnverified;
|
||||
case 'verifiedDeductible':
|
||||
return this.verifiedDeductible;
|
||||
case 'verifiedITAC':
|
||||
return this.verifiedITAC;
|
||||
case 'verifiedNoComp':
|
||||
return this.verifiedNoComp;
|
||||
case 'ADASReplace':
|
||||
return this.ADASReplace;
|
||||
case 'nonADASReplace':
|
||||
return this.nonADASReplace;
|
||||
case 'nonADASRepair':
|
||||
return this.nonADASRepair;
|
||||
case 'deductibleOverZero':
|
||||
return this.deductibleOverZero
|
||||
case 'isDeductibleZero':
|
||||
return this.isDeductibleZero
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
},
|
||||
getTotalLineItemPrice(lineItem) {
|
||||
return lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice;
|
||||
},
|
||||
getDeductibleString(deductible) {
|
||||
const formattedDeductibleFloat = parseFloat(deductible).toFixed(2);
|
||||
return '$' + formattedDeductibleFloat;
|
||||
},
|
||||
getServicePriceString(price) {
|
||||
const formattedPriceFloat = parseFloat(price).toFixed(2);
|
||||
return '$' + formattedPriceFloat;
|
||||
},
|
||||
getITACCostSavings(vehicleDeductible, totalServicePrice) {
|
||||
const savings = vehicleDeductible - totalServicePrice;
|
||||
return savings;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectedProvider() {
|
||||
if (this.selectedProvider === "Safelite") {
|
||||
this.$refs.siteFooter.updateButtonText('Continue with Safelite');
|
||||
}
|
||||
else {
|
||||
this.$refs.siteFooter.updateButtonText('Continue');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -486,7 +463,7 @@ export default {
|
|||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
|
||||
.my-4 {
|
||||
margin-top: 8px !important;
|
||||
margin-bottom: 0px !important;
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@ const getDefaultState = () =>
|
|||
damageState: null,
|
||||
damageCity: null,
|
||||
isDamageGlassOnly: null,
|
||||
policyLookupSuccessful: null,
|
||||
noCoverage: null,
|
||||
deductible: {
|
||||
repair: null, // numerical value; how much customer owes on deductible in repair case
|
||||
|
|
@ -349,6 +350,7 @@ export const useMainStore = defineStore({
|
|||
getCoveragePolicyInfo({ accountNumber, policyNumber, dateOfLoss, zipCode }) {
|
||||
// TODO: replace place holder correlationId with the real thing
|
||||
const placeHolderCorrelationId = '00000000-0000-0000-0000-000000000000';
|
||||
const { policy } = this.order;
|
||||
try {
|
||||
const response = globalMethods.callHttpClient({
|
||||
method: endpoints.CoveragePolicyInfo.method,
|
||||
|
|
@ -360,9 +362,14 @@ export const useMainStore = defineStore({
|
|||
zipCode,
|
||||
correlationId: placeHolderCorrelationId
|
||||
}
|
||||
}).then((r) => {
|
||||
const responsePolicy = response.policies?.[0];
|
||||
policy.policyLookupSuccessful = !!responsePolicy;
|
||||
return r;
|
||||
});
|
||||
return response;
|
||||
} catch (responseError) {
|
||||
policy.policyLookupSuccessful = false;
|
||||
return {
|
||||
error: {
|
||||
status: responseError.status
|
||||
|
|
|
|||
Loading…
Reference in a new issue