Merge pull request #572 from Safelite/feature/digital/SSR-1135.4

Coverage Statement Component Facelift
This commit is contained in:
michaela-brydon-safelite 2024-03-08 11:48:48 -05:00 committed by GitHub
commit 44dae13dab
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 1198 additions and 804 deletions

View file

@ -0,0 +1,12 @@
function getPriceOfLineItem(lineItem) {
return (lineItem?.kitPrice ?? 0)
+ (lineItem?.laborAmount ?? 0)
+ (lineItem?.sellingPrice ?? 0);
}
export default function getPriceOfLineItems(lineItems) {
return lineItems.reduce(
(accumulator, lineItem) => accumulator + getPriceOfLineItem(lineItem),
0
);
}

View file

@ -0,0 +1,56 @@
import getPriceOfLineItems from "@/helpers/price-calculator.js";
describe('getPriceOfLineItems', () => {
test('Returns zero when no line items', () => {
// Arrange
const lineItems = [];
// Act
const result = getPriceOfLineItems(lineItems);
// Assert
expect(result).toBe(0);
});
test('Returns expected when one line item', () => {
// Arrange
const lineItems = [
{
kitPrice: 1,
laborAmount: 2,
sellingPrice: 3
}
];
const expected = 6;
// Act
const result = getPriceOfLineItems(lineItems);
// Assert
expect(result).toBe(expected);
});
test('Returns expected when multiple line items', () => {
// Arrange
const lineItems = [
{
kitPrice: 1,
laborAmount: 2,
sellingPrice: 3
},
{
kitPrice: 1
},
{
kitPrice: 10,
laborAmount: 100,
sellingPrice: 1000
}
];
const expected = 1117;
// Act
const result = getPriceOfLineItems(lineItems);
// Assert
expect(result).toBe(expected);
});
});

View file

@ -0,0 +1,29 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`coverageStatement.vue-working returns the initial data 1`] = `
Object {
"baseServiceLineItems": Array [],
"currencyFormatter": NumberFormat {},
"deductibleText": "Your deductible is",
"isNoComp": false,
"isRepair": true,
"loadingText": Array [
"Connecting to your insurance company",
"Nearly there",
"Finishing up",
],
"policyLookupSuccessful": true,
"rules": Object {
"selectionRequired": "option-required",
},
"selectedProvider": "",
"supportingItems": null,
"widget": Object {
"explanatoryText": "ExplanatoryTextWidget",
"nextStep": "NextStepsWidget",
"serviceProviderQuestion": "ServiceProviderQuestion",
"subheader": "SiteSubHeaderWidget",
"verifiedItacAlert": "VerifiedITACAlert",
},
}
`;

File diff suppressed because it is too large Load diff

View file

@ -35,26 +35,26 @@
<div
v-if="verifiedDeductible"
class="d-flex justify-content-center cost">
{{ formattedDeductible }}
{{ deductibleForDisplay }}
</div>
<div
v-if="displayQuote"
v-if="isQuoteDisplayed"
class="d-flex justify-content-center cost mb-0">
{{ formattedServicePrice }}
{{ servicePriceForDisplay }}
</div>
<div
v-if="verifiedITAC"
class="d-flex justify-content-center mb-4 deductible-text">
{{ deductibleText }}&nbsp;
<span class="text-success fw-bold">{{ formattedDeductible }}</span>
<span class="text-success fw-bold">{{ deductibleForDisplay }}</span>
</div>
<alert
v-if="verifiedITAC"
ref="verifiedITACAlert"
class="mb-5"
cmsWidgetName="VerifiedITACAlert"
:manualHeadline="verifiedITACAlertHeader"
:manualCopy="verifiedITACAlertBody"
:manualHeadline="verifiedItacAlertHeader"
:manualCopy="verifiedItacAlertBody"
alertClass="alert-success"
:isDismissible="false">
</alert>
@ -67,18 +67,18 @@
v-html="nextStepsBody">
</div>
<buttonQuestion
v-if="displayQuote"
v-if="isQuoteDisplayed"
v-model="selectedProvider"
cmsWidgetName="ServiceProviderQuestion"
:questionText="questionText"
:answers="answersFromCms"
:questionText="serviceProviderQuestionText"
:answers="serviceProviderQuestionAnswers"
groupName="ServiceProviderQuestionOption"
buttonTypeString="listButton"
isRequired
:validationRules="rules.selectionRequired">
</buttonQuestion>
<text-block
v-if="displayQuote"
v-if="isQuoteDisplayed"
cmsWidgetName="DisclaimerWidget"
typeStyle="caption" />
</div>
@ -88,7 +88,7 @@
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="navigateBackByVehicleQuestions"
@forwardClicked="forwardButtonAction" />
@forwardClicked="navigateForward" />
</div>
</div>
</div>
@ -126,10 +126,16 @@ 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 bailoutCode from '@/constants/bailoutCode';
import bailoutMessage from '@/constants/bailoutMessage';
import widgetFields from '@/constants/cms-widget-fields.js';
import getPriceOfLineItems from '@/helpers/price-calculator.js';
const SAFELITE_PROVIDER = 'Safelite';
function setBailout(currentRoute, message) {
useMainStore().setBailout(currentRoute, message);
}
export default {
name: 'coverage-statement',
@ -164,8 +170,8 @@ export default {
];
const resultMap = await settleAllPromises(promiseResultMap);
const clonedGlassParts = useMainStore().order.lineItems.glassParts
? JSON.parse(JSON.stringify(useMainStore().order.lineItems.glassParts))
const clonedGlassParts = useMainStore().lineItems.glassParts
? JSON.parse(JSON.stringify(useMainStore().lineItems.glassParts))
: [];
const availableLineItems = [
...(resultMap.supportingItems ?? []),
@ -174,11 +180,14 @@ export default {
let hasBailedOut = false;
let pricingResults = [];
if (useMainStore().order.policy.policyLookupSuccessful && useMainStore().order.vehicle.policyVehicleId >= 0) {
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 }));
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}`);
});
@ -190,22 +199,27 @@ export default {
vm.setCmsContent(resultMap.cmsContent);
vm.setSupportingItems(resultMap.supportingItems);
// eslint-disable-next-line no-param-reassign
vm.availableLineItems = pricingResults;
vm.setBaseServiceLineItems(pricingResults);
vm.$refs.loadingModal.showModal();
vm.initializeComponent(availableLineItems);
vm.initializeComponent();
if (!vm.unverified) {
useMainStore().disableKeyFields();
}
});
}
},
setup() {
const mainStore = useMainStore();
return { mainStore };
},
data() {
const { isRepair } = useMainStore().damage;
const { policyLookupSuccessful, noCoverage } = useMainStore().policy;
return {
availableLineItems: [],
currencyFormatter: new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
}),
isRepair,
policyLookupSuccessful,
isNoComp: noCoverage ?? false,
baseServiceLineItems: [],
selectedProvider: '',
deductibleText: 'Your deductible is',
// TODO update when design team gives appropriate text
@ -217,84 +231,90 @@ export default {
rules: {
selectionRequired: globalRules.OPTION_REQUIRED
},
supportingItems: null
supportingItems: null,
widget: {
subheader: 'SiteSubHeaderWidget',
verifiedItacAlert: 'VerifiedITACAlert',
explanatoryText: 'ExplanatoryTextWidget',
nextStep: 'NextStepsWidget',
serviceProviderQuestion: 'ServiceProviderQuestion'
}
};
},
computed: {
verifiedITACAlertHeader() {
return this.getCmsContent(
'VerifiedITACAlert',
'HeadlineText'
coverageStatementSubHeader() {
return this.getTextFromCmsWithCustomIfStatements(
this.widget.subheader,
widgetFields.SUB_HEADER_WIDGET.SUB_HEADER_TEXT
);
},
verifiedITACAlertBody() {
verifiedItacAlertHeader() {
return this.getCmsContent(
'VerifiedITACAlert',
'BodyText'
)?.replaceAll('{custom:costSavings}', this.costSavings);
this.widget.verifiedItacAlert,
widgetFields.ALERT_WIDGET.HEADLINE_TEXT
);
},
coverageStatementSubHeader() {
return this.getSubheaderTextFromCms('SiteSubHeaderWidget');
verifiedItacAlertBody() {
return this.getCmsContent(
this.widget.verifiedItacAlert,
widgetFields.ALERT_WIDGET.BODY_TEXT
)?.replaceAll('{custom:costSavings}', this.itacCostSavingsForDisplay);
},
secondaryText() {
return this.getSecondaryTextFromCms('SiteSubHeaderWidget');
return this.getTextFromCmsWithCustomIfStatements(
this.widget.subheader,
widgetFields.SUB_HEADER_WIDGET.SECONDARY_TEXT
);
},
explanatoryText() {
return this.getExplantoryTextFromCms('ExplanatoryTextWidget');
return this.getTextFromCmsWithCustomIfStatements(
this.widget.explanatoryText,
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
);
},
nextStepsHeader() {
return this.getHeaderTextFromCms('NextStepsWidget');
return this.getTextFromCmsWithCustomIfStatements(
this.widget.nextStep,
widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT
);
},
nextStepsBody() {
return this.getBodyTextFromCms('NextStepsWidget')?.replaceAll('{custom:damage}', this.damageText);
},
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');
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;
},
vehicleDeductible() {
const deductible = useMainStore().order.currentDeductible;
return deductible;
deductibleValue() {
return useMainStore().order.currentDeductible;
},
formattedDeductible() {
return this.getDeductibleString(this.vehicleDeductible);
},
isDeductibleZero() {
return this.vehicleDeductible === 0;
},
policyLookupSuccessful() {
return useMainStore().order.policy.policyLookupSuccessful;
deductibleForDisplay() {
return this.getFormattedAmount(this.deductibleValue);
},
registerClaimSuccessful() {
return useMainStore().payment.insuranceCoverage.isVerified;
},
verifiedNoComp() {
return this.policyLookupSuccessful ? useMainStore().order.policy.noCoverage : false;
return this.policyLookupSuccessful && this.isNoComp;
},
verifiedITAC() {
return this.policyLookupSuccessful
&& !this.verifiedNoComp
&& this.vehicleDeductible > this.totalServicePrice;
&& !this.isNoComp
&& this.deductibleValue > this.totalServicePrice;
},
coveredAndServicePriceAboveOrEqualDeductible() {
return !this.verifiedNoComp && this.totalServicePrice >= this.vehicleDeductible;
return !this.verifiedNoComp && this.totalServicePrice >= this.deductibleValue;
},
verifiedDeductible() {
return useMainStore().isClaimRegistrationRequired
? this.registerClaimSuccessful && this.coveredAndServicePriceAboveOrEqualDeductible && this.vehicleDeductible !== null
: this.policyLookupSuccessful && this.coveredAndServicePriceAboveOrEqualDeductible;
? this.registerClaimSuccessful
&& this.coveredAndServicePriceAboveOrEqualDeductible
&& this.deductibleValue !== null
: this.policyLookupSuccessful
&& this.coveredAndServicePriceAboveOrEqualDeductible;
},
unverified() {
return !this.verifiedDeductible && !this.verifiedITAC && !this.verifiedNoComp;
@ -303,41 +323,46 @@ export default {
const parts = useMainStore().order.lineItems.glassParts;
return parts !== null && !!parts.find((part) => part.requiresRecalibration);
},
isRepair() {
return useMainStore().order.damage.isRepair;
},
totalServicePrice() {
let total = 0;
this.availableLineItems.forEach((lineItem) => {
total += this.getTotalLineItemPrice(lineItem);
});
return total;
return getPriceOfLineItems(this.baseServiceLineItems);
},
formattedServicePrice() {
return this.getServicePriceString(this.totalServicePrice);
servicePriceForDisplay() {
return this.getFormattedAmount(this.totalServicePrice);
},
costSavings() {
const savings = this.getITACCostSavings(this.vehicleDeductible, this.totalServicePrice);
const formattedSavings = parseFloat(savings).toFixed(2);
return `$${formattedSavings}`;
itacCostSavings() {
return this.deductibleValue - this.totalServicePrice;
},
questionText() {
return this.getCmsContent('ServiceProviderQuestion', 'QuestionText');
itacCostSavingsForDisplay() {
return this.getFormattedAmount(this.itacCostSavings);
},
answersFromCms() {
return this.getCmsContent('ServiceProviderQuestion', 'Answers');
serviceProviderQuestionText() {
return this.getCmsContent(
this.widget.serviceProviderQuestion,
widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT
);
},
displayQuote() {
serviceProviderQuestionAnswers() {
return this.getCmsContent(
this.widget.serviceProviderQuestion,
widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
);
},
isQuoteDisplayed() {
return this.verifiedITAC || this.verifiedNoComp;
},
shouldRegisterClaim() {
return this.policyLookupSuccessful
&& useMainStore().vehicle.policyVehicleId != null
&& useMainStore().vehicle.policyVehicleId >= 0
&& useMainStore().isClaimRegistrationRequired
&& !useMainStore().isClaimAlreadyRegistered
&& (this.coveredAndServicePriceAboveOrEqualDeductible || this.verifiedITAC);
}
},
watch: {
selectedProvider() {
if (this.selectedProvider === 'Safelite') {
this.$refs.siteFooter.updateButtonText('Continue with Safelite');
} else {
this.$refs.siteFooter.updateButtonText('Continue');
}
const buttonText = this.selectedProvider === SAFELITE_PROVIDER ? 'Continue with Safelite' : 'Safelite';
this.$refs.siteFooter.updateButtonText(buttonText);
},
nextStepsBody(newValue, oldValue) {
if (newValue !== oldValue) {
@ -353,78 +378,43 @@ export default {
arePagePrerequisitesValid() {
return !!useMainStore().vehicle.carId;
},
getFormattedAmount(amount) {
return this.currencyFormatter.format(amount);
},
async initializeComponent() {
useMainStore().updatePolicyITACFlag(this.verifiedITAC);
if (this.policyLookupSuccessful
&& useMainStore().order.vehicle.policyVehicleId >= 0
&& useMainStore().isClaimRegistrationRequired
&& !useMainStore().isClaimAlreadyRegistered
&& (this.coveredAndServicePriceAboveOrEqualDeductible || this.verifiedITAC)) {
if (this.shouldRegisterClaim) {
await useMainStore().registerClaim()?.catch(() => {});
}
this.$refs.loadingModal.hideModal();
},
async forwardButtonAction() {
return this.navigateForward();
},
async navigateForward() {
if (this.unverified || this.verifiedDeductible) {
useMainStore().updateSupportingItems(this.supportingItems);
this.$router.navigate(
navigationScenarios.CLICKED_FORWARD,
this.$route,
{},
{ [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
);
this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD);
} else if (this.verifiedITAC || this.verifiedNoComp) {
useMainStore().updateIsSafeliteProvider(this.selectedProvider === 'Safelite');
if (this.selectedProvider === 'Safelite') {
useMainStore().updateIsSafeliteProvider(this.selectedProvider === SAFELITE_PROVIDER);
if (this.selectedProvider === SAFELITE_PROVIDER) {
useMainStore().updateSupportingItems(this.supportingItems);
this.$router.navigate(
navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE,
this.$route,
{},
{ [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
);
this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE);
} else {
this.mainStore.setBailout(this.$router.currentRoute, bailoutMessage.RequestCallback());
this.$router.navigate(
navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP,
this.$route,
{},
{ [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
);
this.setBailoutWithMessage(bailoutMessage.RequestCallback());
this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP);
}
} else {
this.mainStore.setBailout(this.$router.currentRoute, bailoutMessage.coverageStatementInvalidState());
this.$router.navigate(
navigationScenarios.CLICKED_FORWARD_WITH_INVALID_STATE,
this.$route,
{},
{ [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
);
this.setBailoutWithMessage(bailoutMessage.coverageStatementInvalidState());
this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_INVALID_STATE);
}
},
processIfStatements,
getHeaderTextFromCms(cmsWidgetName) {
const header = this.getCmsContent(cmsWidgetName, 'HeaderText');
return this.processIfStatements(header, 'custom', this.getCustomValueFromString);
setBailoutWithMessage(message) {
setBailout(this.$router.currentRoute, message);
},
getSubheaderTextFromCms(cmsWidgetName) {
const subHeader = this.getCmsContent(cmsWidgetName, 'SubHeaderText');
return this.processIfStatements(subHeader, 'custom', this.getCustomValueFromString);
navigateWithScenario(scenario) {
this.$router.navigate(scenario, this.$route);
},
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);
getTextFromCmsWithCustomIfStatements(widgetName, widgetField) {
const rawText = this.getCmsContent(widgetName, widgetField);
return processIfStatements(rawText, 'custom', this.getCustomValueFromString);
},
getCustomValueFromString(str) {
switch (str) {
@ -443,29 +433,18 @@ export default {
case 'nonADASRepair':
return this.isRepair;
case 'deductibleOverZero':
return this.verifiedDeductible && !this.isDeductibleZero; // TODO what if deductible is negative?
return this.verifiedDeductible && this.deductibleValue !== 0; // TODO what if deductible is negative?
case 'isDeductibleZero':
return this.verifiedDeductible && this.isDeductibleZero;
return this.verifiedDeductible && this.deductibleValue === 0;
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) {
return vehicleDeductible - totalServicePrice;
},
setSupportingItems(newSupportingItems) {
this.supportingItems = newSupportingItems;
},
setBaseServiceLineItems(lineItems) {
this.baseServiceLineItems = lineItems;
}
}
};
@ -475,7 +454,7 @@ export default {
.cost {
color: $green;
font-size: 2rem;
font-weight: 300;
font-weight: $font-weight-light;
line-height: 2.75rem;
}

View file

@ -11,7 +11,7 @@ import applicationConfig from '@/constants/application-config';
import issPageValues from '@/router/router-constants/issPage-values';
import damageLocationsSelected from '@/constants/damage-locations-selected';
import coverageStatuses from '@/constants/coverage-statuses';
import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from '@/constants/schedule-constants';
import { AppointmentTypeStrings } from '@/constants/schedule-constants';
import { deepClone } from '@/helpers/object-helper';
import { convertDateStringToDate, getDateDifferenceInDays, militaryToTwelveHourTime } from '@/helpers/date-helper';
import { paymentMethods } from '@/constants/payment-method-constants';