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

Merge pull request #1014 from Safelite/feature/kiener/INSR-7753

Browse source 
INSR-7753: Coverage Statement page
This commit is contained in:
katiekroell 2026-02-03 10:24:43 -05:00 committed by GitHub
commit 6d5b4b906e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
15 changed files with 440 additions and 291 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/constants/bailoutMessage.js
View file

@ -66,9 +66,9 @@ const bailoutMessage = Object.freeze({
message: 'User selected to continue a referral where a TPA shop was previously selected.'
}),
vehicleYMMSLookupError: (year, make, model, style, error) => {
const baseMessage = "An error occurred looking up vehicle";
const baseMessage = 'An error occurred looking up vehicle';
const errorMessage = `Error: ${getItemData(error)}`;
const getMessage = (year, make, model, style) => {
if (!year) return `${baseMessage} years. ${errorMessage}`;
if (!make) return `${baseMessage} makes for Year: ${year}. ${errorMessage}`;
@ -76,12 +76,12 @@ const bailoutMessage = Object.freeze({
if (!style) return `${baseMessage} styles for Year: ${year}, Make: ${make}, Model: ${model}. ${errorMessage}`;
return `${baseMessage} with Year: ${year}, Make: ${make}, Model: ${model}, Style: ${style}. ${errorMessage}`;
};
return {
code: bailoutCode.VehicleYMMSLookupError,
message: getMessage(year, make, model, style)
};
},
}
});
export default bailoutMessage;

2
src/helpers/cart-helper.js
View file

@ -76,7 +76,7 @@ export function getMobileFeeLineItem(order) {
* @returns {number|undefined|null} current deductible
*/
export function getDeductible(order) {
return order.currentDeductible;
return order.damage.isRepair ? order.currentDeductible.repair : order.currentDeductible.replace;
}
/**

51
src/helpers/cart-helper.spec.js
View file

@ -239,8 +239,13 @@ describe('cart-helper', () => {
describe('getDeductible', () => {
test('Returns deductible on the order', () => {
// Arrange
const deductible = 100;
const deductible = {
replace: 100
};
const order = {
damage: {
isRepair: false
},
currentDeductible: deductible
};
@ -249,7 +254,7 @@ describe('cart-helper', () => {
// Assert
expect(result).not.toBeNull();
expect(result).toBe(deductible);
expect(result).toBe(deductible.replace);
});
});
@ -349,7 +354,12 @@ describe('cart-helper', () => {
coverageStatus: coverageStatuses.VERIFIED,
coverageType: type
},
currentDeductible: 100,
damage: {
isRepair: false
},
currentDeductible: {
replace: 100
},
lineItems: nullLineItems
};
@ -373,7 +383,12 @@ describe('cart-helper', () => {
coverageStatus: coverageStatuses.VERIFIED,
coverageType: type
},
currentDeductible: 100,
damage: {
isRepair: false
},
currentDeductible: {
replace: 100
},
lineItems: emptyLineItems
};
@ -397,7 +412,12 @@ describe('cart-helper', () => {
coverageStatus: coverageStatuses.VERIFIED,
coverageType: type
},
currentDeductible: 100,
damage: {
isRepair: false
},
currentDeductible: {
replace: 100
},
lineItems: defaultLineItems
};
@ -495,7 +515,12 @@ describe('cart-helper', () => {
coverageStatus: coverageStatuses.VERIFIED,
coverageType: type
},
currentDeductible: 100,
damage: {
isRepair: false
},
currentDeductible: {
replace: 100
},
lineItems: nullLineItems
};
@ -520,7 +545,12 @@ describe('cart-helper', () => {
coverageStatus: coverageStatuses.VERIFIED,
coverageType: type
},
currentDeductible: 100,
damage: {
isRepair: false
},
currentDeductible: {
replace: 100
},
lineItems: emptyLineItems
};
@ -545,7 +575,12 @@ describe('cart-helper', () => {
coverageStatus: coverageStatuses.VERIFIED,
coverageType: type
},
currentDeductible: 100,
damage: {
isRepair: false
},
currentDeductible: {
replace: 100
},
lineItems: defaultLineItems
};

11
src/helpers/text-helper.js
View file

@ -27,6 +27,17 @@ export function createOrderedListFromStringOfParagraphs(stringOfParagraphs) {
return `<ol>${stringOfParagraphs.replaceAll('<p></p>', '').replaceAll('<p>', '<li>').replaceAll('</p>', '</li>')}</ol>`;
}
/**
* @function createUnorderedListFromStringOfParagraphs
* @summary
* Returns string with <p> tags changed to <li> and wrapped in an <ul>
* @param {string} stringOfParagraphs single string with 1 to N <p> tags
* @returns {string} converted string wrapped in an <ul>
*/
export function createUnorderedListFromStringOfParagraphs(stringOfParagraphs) {
return `<ul>${stringOfParagraphs.replaceAll('<p></p>', '').replaceAll('<p>', '<li>').replaceAll('</p>', '</li>')}</ul>`;
}
/**
* @function toTitleCase
* @summary Returns title cased string version of 'text'

10
src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap
View file

@ -2,23 +2,13 @@
exports[`coverageStatement.vue returns the initial data 1`] = `
Object {
"CANCEL_CLAIM_REF_NAME": "CancelClaimModal",
"DEDUCTIBLE_MODAL_REF_NAME": "DeductibleModal",
"RECAL_MODAL_REF_NAME": "RecalModal",
"SITE_FOOTER_REF_NAME": "siteFooter",
"baseServiceLineItems": Array [],
"deductibleText": "Your deductible is",
"rules": Object {
"selectionRequired": "option-required",
},
"selectedProvider": "",
"widget": Object {
"disclaimerText": "DisclaimerWidget",
"explanatoryText": "ExplanatoryTextWidget",
"nextStep": "NextStepsWidget",
"serviceProviderQuestion": "ServiceProviderQuestion",
"subheader": "SiteSubHeaderWidget",
"verifiedItacAlert": "VerifiedITACAlert",
},
}
`;

43
src/layouts/coverage-statement/coverage-statement.spec.js
View file

@ -29,6 +29,7 @@ jest.mock('@/helpers/cms-content-helper', () => ({
jest.mock('@/helpers/text-helper', () => ({
createOrderedListFromStringOfParagraphs: jest.fn(),
createUnorderedListFromStringOfParagraphs: jest.fn(),
formatAmountInDollars: jest.fn()
}));
@ -98,9 +99,6 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu
fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
const wrapper = shallowMount(coverageStatement, mountOptions);
wrapper.vm.$refs[CANCEL_CLAIM_REF_NAME].openModal = jest.fn();
wrapper.vm.$refs.siteFooter.disableForwardButton = jest.fn();
wrapper.vm.$refs.siteFooter.enableForwardAction = jest.fn();
return { wrapper };
}
@ -165,16 +163,6 @@ describe('coverageStatement.vue', () => {
// Assert
expect(secondaryText.exists()).toBe(true);
});
test('Should render site footer', () => {
// Arrange
const { wrapper } = getMountedComponent({});
// Act
const footer = wrapper.findComponent({ ref: 'siteFooter' });
// Assert
expect(footer.exists()).toBe(true);
});
});
describe('Computed', () => {
describe.each([
@ -373,7 +361,7 @@ describe('coverageStatement.vue', () => {
[false, coverageStatuses.PENDING, coverageType.NO_COMP],
[false, coverageStatuses.PENDING, coverageType.Deductible],
[true, coverageStatuses.VERIFIED, coverageType.NO_COMP],
[true, coverageStatuses.VERIFIED, coverageType.ITAC],
[false, coverageStatuses.VERIFIED, coverageType.ITAC],
[false, coverageStatuses.VERIFIED, coverageType.Deductible],
[false, coverageStatuses.NO_COVERAGE, coverageType.NO_COMP],
[false, coverageStatuses.NO_COVERAGE, coverageType.ITAC],
@ -512,7 +500,10 @@ describe('coverageStatement.vue', () => {
coverageStatus: coverageStatuses.PENDING,
coverageType: coverageType.NONE
},
currentDeductible: null
currentDeductible: {
repair: null,
replace: null
}
}
};
const { wrapper } = getMountedComponent(mainInitialState);
@ -539,7 +530,9 @@ describe('coverageStatement.vue', () => {
coverageStatus: coverageStatuses.VERIFIED,
coverageType: coverageType.Deductible
},
currentDeductible: deductible
currentDeductible: {
replace: deductible
}
}
};
const { wrapper } = getMountedComponent(mainInitialState);
@ -566,7 +559,9 @@ describe('coverageStatement.vue', () => {
coverageStatus: coverageStatuses.VERIFIED,
coverageType: coverageType.ITAC
},
currentDeductible: deductible
currentDeductible: {
replace: deductible
}
}
};
const { wrapper } = getMountedComponent(mainInitialState);
@ -584,7 +579,7 @@ describe('coverageStatement.vue', () => {
undefined
);
});
test('If Verified ITAC, selected other shop, navigate forward w/ CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP', () => {
test('If Verified ITAC, selected Cancel, navigate forward w/ CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP', () => {
// Arrange
const deductible = servicePrice + 1;
const mainInitialState = {
@ -596,7 +591,9 @@ describe('coverageStatement.vue', () => {
coverageStatus: coverageStatuses.VERIFIED,
coverageType: coverageType.ITAC
},
currentDeductible: deductible
currentDeductible: {
replace: deductible
}
}
};
const { wrapper } = getMountedComponent(mainInitialState);
@ -605,7 +602,7 @@ describe('coverageStatement.vue', () => {
});
// Act
wrapper.vm.navigateForward();
wrapper.vm.cancelClaim();
// Assert
expect(wrapper.vm.$router.navigate)
@ -667,7 +664,7 @@ describe('coverageStatement.vue', () => {
});
// Act
wrapper.vm.navigateForward();
wrapper.vm.cancelClaim();
// Assert
expect(wrapper.vm.$router.navigate)
@ -776,7 +773,9 @@ describe('coverageStatement.vue', () => {
vehicle: {
policyVehicleId: 1
},
currentDeductible: deductible
currentDeductible: {
replace: deductible
}
},
issConfig: {
isClaimRegistrationRequired: true

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

@ -15,72 +15,87 @@
<div class="coverage-statement-container iss-heritage-content-container-width">
<h5
ref="siteSubHeader"
class="sub-header text-black mt-4"
class="sub-header text-black"
v-html="coverageStatementSubHeader"></h5>
<div
ref="explanatoryText"
class="body-text mt-2"
class="body-text"
v-html="explanatoryText"></div>
<div
ref="explanatoryText2"
class="body-text mt-3"
v-html="explanatoryText2"></div>
<div
ref="secondaryText"
class="mt-4 mb-1 fw-bold text-black"
v-html="secondaryText"></div>
<div
v-if="isDeductibleVisible"
class="d-flex justify-content-center cost">
v-if="isITACQuoteVisible"
class="itac-price-container">
<div class="itac-deductible-value-container">
<div class="itac-deductible-value-text">
Your deductible:
</div>
<div class="itac-deductible-value">
{{ formatAmountInDollars(deductibleValue) }}
</div>
</div>
<div class="separator"></div>
<div class="itac-cost-container">
<div class="itac-cost-text">
Safelite price*:
</div>
<div class="cost">
{{ formatAmountInDollars(totalServicePrice) }}
</div>
</div>
</div>
<div
v-if="showDeductibleOnly"
class="d-flex cost cost-underline">
{{ formatAmountInDollars(deductibleValue) }}
</div>
<div
v-if="isQuoteDisplayed"
class="d-flex justify-content-center cost mb-0">
{{ formatAmountInDollars(totalServicePrice) }}
</div>
<div
v-if="isITACQuoteVisible"
class="d-flex justify-content-center mb-4 deductible-text">
{{ deductibleText }}&nbsp;
<span class="text-success fw-bold">{{
formatAmountInDollars(deductibleValue)
}}</span>
</div>
<alert
v-if="isITACQuoteVisible"
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"
class="fw-bold text-black mt-5"
v-html="nextStepsHeader"></div>
<div
class="body-text"
v-html="nextStepsBody"></div>
<buttonQuestion
<div
v-if="isNoCompQuoteVisible"
class="no-comp-price-text">
Safelite price*:
</div>
<div
v-if="isQuoteDisplayed"
v-model="selectedProvider"
cmsWidgetName="ServiceProviderQuestion"
:questionText="serviceProviderQuestionText"
:answers="serviceProviderQuestionAnswers"
groupName="ServiceProviderQuestionOption"
buttonTypeString="listButton"
isRequired
:validationRules="rules.selectionRequired">
</buttonQuestion>
<siteFooter
:ref="SITE_FOOTER_REF_NAME"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="navigateBackByVehicleQuestions"
@forwardClicked="navigateForward" />
class="d-flex justify-content-center cost mb-0 cost-underline">
{{ formatAmountInDollars(totalServicePrice) }}
</div>
<buttonMain
ref="buttonMain"
class="full-width-button mt-5 mb-5"
variant="navigation"
:buttonText="buttonText"
@clickEvent="navigateForward" />
<textLink
v-if="isNoCompQuoteVisible || isITACQuoteVisible"
class="underlined-text cancel-link mt-5"
linkType="text"
text="No, I want to cancel"
href="#"
@clickEvent="cancelClaim" />
<textBlock
v-if="isQuoteDisplayed"
v-if="isDisclaimerVisible"
class="mt-5 mb-5"
:customText="disclaimerText"
typeStyle="caption" />
<div :class="getVariant + ' mb-5'">
<textLink
linkType="navigation"
text="Back"
href="#"
@clickEvent="navigateBackByVehicleQuestions" />
</div>
</div>
</div>
</div>
@ -88,28 +103,17 @@
:ref="RECAL_MODAL_REF_NAME"
cssModalHeadlineClass="text-center"
cmsWidgetName="RecalModal" />
<contentGroupModal
:ref="DEDUCTIBLE_MODAL_REF_NAME"
cmsWidgetName="DeductibleModal"
class="deductible-modal" />
<cancelClaimModal
:ref="CANCEL_CLAIM_REF_NAME"
@cancelClaimConfirmation="cancelClaim"
@returnToClaim="continueClaim" />
</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 alert from '@/ux-components/alert/alert.vue';
import cancelClaimModal from '@/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue';
import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
import textBlock from '@/digital-components/text-block/text-block.vue';
import textLink from '@/ux-components/text-link/text-link.vue';
import buttonMain from '@/ux-components/button-main/button-main.vue';
// Import Supporting Files
import {
fetchCmsContentForPage,
@ -121,35 +125,28 @@ 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 bailoutMessage from '@/constants/bailoutMessage';
import widgetFields from '@/constants/cms-widget-fields.js';
import { formatAmountInDollars, createOrderedListFromStringOfParagraphs } from '@/helpers/text-helper.js';
import { formatAmountInDollars, createUnorderedListFromStringOfParagraphs, createOrderedListFromStringOfParagraphs } from '@/helpers/text-helper.js';
import showIssLoadingModal from '@/helpers/loading-modal-helper';
import { getPriceOfLineItems } from '@/helpers/price-calculator';
import coverageStatuses from '@/constants/coverage-statuses';
import coverageType from '@/constants/coverage-type';
const CANCEL_CLAIM_REF_NAME = 'CancelClaimModal';
const SAFELITE_PROVIDER = 'Safelite';
const RECAL_MODAL_REF_NAME = 'RecalModal';
const DEDUCTIBLE_MODAL_REF_NAME = 'DeductibleModal';
const SITE_FOOTER_REF_NAME = 'siteFooter';
export default {
name: 'coverage-statement',
components: {
siteFooter,
siteHeader,
// eslint-disable-next-line vue/no-reserved-component-names
Form,
alert,
cancelClaimModal,
contentGroupModal,
buttonQuestion,
textBlock
buttonMain,
textBlock,
textLink
},
mixins: [baseFormMixin, vehicleQuestionsMixin],
async beforeRouteEnter(to, from, next) {
@ -204,24 +201,13 @@ export default {
data() {
return {
baseServiceLineItems: [],
selectedProvider: '',
deductibleText: 'Your deductible is',
// TODO update when design team gives appropriate text
rules: {
selectionRequired: globalRules.OPTION_REQUIRED
},
widget: {
disclaimerText: 'DisclaimerWidget',
subheader: 'SiteSubHeaderWidget',
verifiedItacAlert: 'VerifiedITACAlert',
explanatoryText: 'ExplanatoryTextWidget',
nextStep: 'NextStepsWidget',
serviceProviderQuestion: 'ServiceProviderQuestion'
nextStep: 'NextStepsWidget'
},
CANCEL_CLAIM_REF_NAME,
RECAL_MODAL_REF_NAME,
DEDUCTIBLE_MODAL_REF_NAME,
SITE_FOOTER_REF_NAME
RECAL_MODAL_REF_NAME
};
},
computed: {
@ -231,27 +217,15 @@ export default {
widgetFields.SUB_HEADER_WIDGET.SUB_HEADER_TEXT
);
},
verifiedItacAlertHeader() {
return this.getCmsContent(
this.widget.verifiedItacAlert,
widgetFields.ALERT_WIDGET.HEADLINE_TEXT
);
},
verifiedItacAlertBody() {
secondaryText() {
const itacCostSavings =
this.deductibleValue - this.totalServicePrice;
return this.getCmsContent(
this.widget.verifiedItacAlert,
widgetFields.ALERT_WIDGET.BODY_TEXT
)?.replaceAll(
'{custom:costSavings}',
formatAmountInDollars(itacCostSavings)
);
},
secondaryText() {
return this.getTextFromCmsWithCustomIfStatements(
this.widget.subheader,
widgetFields.SUB_HEADER_WIDGET.SECONDARY_TEXT
)?.replaceAll(
'{custom:costSavings}',
formatAmountInDollars(itacCostSavings)
);
},
disclaimerText() {
@ -266,6 +240,12 @@ export default {
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
);
},
explanatoryText2() {
return this.getTextFromCmsWithCustomIfStatements(
this.widget.explanatoryText,
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2
)?.replaceAll('{custom:currentReplaceDeductible}', formatAmountInDollars(this.mainStore.order.currentDeductible.replace));
},
nextStepsHeader() {
return this.getTextFromCmsWithCustomIfStatements(
this.widget.nextStep,
@ -278,6 +258,9 @@ export default {
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
)?.replaceAll('{custom:damage}', this.damageText);
if (this.isITACQuoteVisible || this.isNoCompQuoteVisible) {
return createUnorderedListFromStringOfParagraphs(cmsText);
}
return createOrderedListFromStringOfParagraphs(cmsText);
},
damageText() {
@ -285,7 +268,7 @@ export default {
return damageString === 'match' ? '' : damageString;
},
deductibleValue() {
return useMainStore().order.currentDeductible;
return this.mainStore.currentDeductible;
},
isNoCompQuoteVisible() {
return this.mainStore.isVerified && this.mainStore.isNoComp;
@ -309,21 +292,15 @@ export default {
totalServicePrice() {
return getPriceOfLineItems(this.baseServiceLineItems);
},
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.isNoCompQuoteVisible;
},
isDisclaimerVisible() {
return this.isITACQuoteVisible || this.isNoCompQuoteVisible;
},
showDeductibleOnly() {
return this.isDeductibleVisible && !this.isRepairZeroDeductible;
},
shouldRegisterClaim() {
const {
vehicle,
@ -342,29 +319,24 @@ export default {
},
isRepair() {
return this.mainStore.order.damage.isRepair;
},
isRepairZeroDeductible() {
return this.isRepair && this.isDeductibleVisible && this.deductibleValue <= 0;
},
buttonText() {
return (this.isITACQuoteVisible || this.isNoCompQuoteVisible) ? 'Continue scheduling' : 'Continue';
},
getVariant() {
if (this.isITACQuoteVisible || this.isNoCompQuoteVisible) {
return 'text-center';
}
return 'text-left';
}
},
watch: {
selectedProvider() {
if (this.selectedProvider) {
if (this.selectedProvider !== SAFELITE_PROVIDER) {
this.$refs[this.CANCEL_CLAIM_REF_NAME].openModal();
this.selectedProvider = '';
this.$refs.siteFooter.disableForwardButton();
} else {
this.$refs.siteFooter.enableForwardAction();
}
}
},
nextStepsBody(newValue, oldValue) {
if (newValue !== oldValue) {
setupModalLink(this, RECAL_MODAL_REF_NAME);
setupModalLink(this, DEDUCTIBLE_MODAL_REF_NAME);
}
},
verifiedItacAlertBody(newValue, oldValue) {
if (newValue !== oldValue) {
setupModalLink(this, DEDUCTIBLE_MODAL_REF_NAME);
}
}
},
@ -421,15 +393,10 @@ export default {
if (this.isUnverifiedVisible || this.isDeductibleVisible) {
this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD);
} else if (this.isITACQuoteVisible || this.isNoCompQuoteVisible) {
useMainStore().updateIsSafeliteProvider(this.selectedProvider === SAFELITE_PROVIDER);
if (this.selectedProvider === SAFELITE_PROVIDER) {
this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE);
} else {
useMainStore().setBailout(bailoutMessage.RequestCallback());
this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP);
}
this.mainStore.updateIsSafeliteProvider(true);
this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE);
} else {
useMainStore().setBailout(bailoutMessage.coverageStatementInvalidState());
this.mainStore.setBailout(bailoutMessage.coverageStatementInvalidState());
this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_INVALID_STATE);
}
},
@ -449,28 +416,24 @@ export default {
switch (str) {
case 'coverageUnverified':
return this.isUnverifiedVisible;
case 'verifiedDeductible':
return this.isDeductibleVisible;
case 'verifiedITAC':
return this.isITACQuoteVisible;
case 'verifiedNoComp':
return this.isNoCompQuoteVisible;
case 'ADASReplace':
return !isRepair && this.isADAS;
return !isRepair && this.isADAS && !this.isNoCompQuoteVisible && !this.isITACQuoteVisible;
case 'nonADASReplace':
return !isRepair && !this.isADAS;
case 'nonADASRepair':
return isRepair;
case 'deductibleOverZero':
return (
this.isDeductibleVisible && this.deductibleValue > 0
);
case 'isDeductibleZero':
return (
this.isDeductibleVisible && this.deductibleValue <= 0
);
case 'verifiedRepair':
return !isRepair && !this.isADAS && !this.isNoCompQuoteVisible && !this.isITACQuoteVisible;
case 'verifiedRepairDeductible':
return isRepair && this.isDeductibleVisible;
case 'verifiedRepairZeroDeductible':
return isRepair && this.isDeductibleVisible && this.deductibleValue <= 0;
case 'verifiedRepairZeroDeductibleReplaceDeductibleOverZero':
return isRepair && this.isDeductibleVisible && this.deductibleValue <= 0 && this.mainStore.order.currentDeductible.replace > 0;
case 'verifiedRepairDeductibleOverZero':
return isRepair && this.isDeductibleVisible && this.deductibleValue > 0;
case 'verifiedReplaceDeductible':
return !isRepair && this.isDeductibleVisible;
case 'verifiedReplaceZeroDeductible':
return !isRepair && this.isDeductibleVisible && this.deductibleValue <= 0;
case 'verifiedReplaceDeductibleOverZero':
@ -484,13 +447,9 @@ export default {
},
formatAmountInDollars,
cancelClaim() {
useMainStore().updateIsSafeliteProvider(false);
useMainStore().setBailout(bailoutMessage.RequestCallback());
this.mainStore.updateIsSafeliteProvider(false);
this.mainStore.setBailout(bailoutMessage.RequestCallback());
this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP);
},
continueClaim() {
useMainStore().updateIsSafeliteProvider(true);
this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE);
}
}
};
@ -501,46 +460,82 @@ export default {
.coverage-statement-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
padding-left: .75rem;
padding-right: .75rem;
}
}
.coverage-statement {
.cost {
color: $green;
font-size: 2rem;
font-weight: $font-weight-light;
line-height: 2.75rem;
font-size: 1.675rem;
font-weight: $font-weight-bold;
line-height: 2.5rem;
width: fit-content;
}
.deductible-text {
line-height: 1.5rem;
.cost-underline {
border-bottom: 4px solid #0c7e47;
}
.sub-header {
line-height: 2rem;
line-height: 1.5rem;
margin-top: 20px;
margin-bottom: 20px;
}
.full-width-button {
width: 100%;
}
.underlined-text {
text-decoration: underline;
}
.cancel-link {
display: block;
margin: 24px auto 0 auto;
}
.back-link {
display: inline-block;
align-items: center;
}
:deep(.body-text > ol > ul) {
list-style-position: outside;
list-style-type: disc;
padding-left: 0;
}
:deep(ol) {
padding-left: 1.25rem;
}
:deep(li) {
margin-top: 1px;
padding-left: 5px;
}
:deep(ul) {
padding: 0;
padding-left: 1.125rem;
padding-right: 1.125rem;
line-height: 1.5rem;
font-size: .875rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
line-height: 1.25rem;
li {
margin-bottom: .5rem;
margin-top: .5rem;
padding-left: 5px;
}
}
:deep(p) {
line-height: 1.5rem;
font-size: 0.875rem;
margin-bottom: 0.5rem;
strong {
color: $black;
}
}
:deep(.body-text) {
font-size: 0.875rem;
line-height: 1.5rem;
color: $darker-gray;
strong {
color: $black;
font-weight: 500;
}
margin-top: 6px;
a {
text-decoration: none;
}
}
:deep(.question-text) {
margin-top: 1.5rem;
@ -560,20 +555,45 @@ export default {
}
}
}
}
.itac-price-container {
display: flex;
justify-content: space-around;
border: solid 1px #cacbcc;
border-radius: 5px;
align-items: center;
font-weight: $font-weight-bold;
color: $black;
padding: 10px;
margin-top: 20px;
:deep(.deductible-modal) {
p {
margin-bottom: 0 !important;
.itac-deductible-value-container {
display: flex;
flex-direction: column;
align-items: center;
}
.itac-cost-container {
display: flex;
flex-direction: column;
align-items: center;
}
.itac-deductible-value {
font-size: 1.675rem;
font-weight: $font-weight-normal;
line-height: 2.5rem;
}
.separator {
width: 1px;
height: 60px;
background-color: #cacbcc;
}
}
img.mb-4 {
margin: 0 !important;
.no-comp-price-text {
font-weight: 500;
color: $black;
}
h5 {
color: black;
}
p:last-child {
margin-top: 0.5rem;
:deep(.line-two) {
margin-top: 20px;
display: block;
}
}

17
src/layouts/order-confirmation/order-confirmation.spec.js
View file

@ -84,6 +84,13 @@ const initialStore = {
lastName: 'Test',
servicePhone: '111-111-1111',
emailAddress: 'test@email.com'
},
damage: {
isRepair: false
},
currentDeductible: {
replace: 100,
repair: 0
}
}
};
@ -123,14 +130,20 @@ const sessionStorage = {
vaps: []
},
policy: {},
damage: {},
damage: {
isRepair: false
},
vehicle: {
year: 2000,
make: 'Honda',
model: 'Civic'
},
customer: {},
customerPortalLoginToken: 'token'
customerPortalLoginToken: 'token',
currentDeductible: {
replace: 100,
repair: 0
}
};
function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRun = () => {}, mixin = mockMixin) {

6
src/layouts/payment-method/payment-method.spec.js
View file

@ -232,7 +232,9 @@ describe('payment-method.vue', () => {
coverageStatus: coverageStatuses.VERIFIED,
coverageType: coverageType.Deductible
},
currentDeductible: 123
currentDeductible: {
replace: 123
}
},
issConfig: {
isClaimRegistrationRequired: true,
@ -286,7 +288,7 @@ describe('payment-method.vue', () => {
test('returns true when coverageStatus is verified and deductibleTotal = 0', () => {
// Arrange
store.order.insuranceCoverage.coverageStatus = coverageStatuses.VERIFIED;
store.order.currentDeductible = 0;
store.order.currentDeductible.replace = 0;
const wrapper = setupMocks({}, store, mixin);
// Act

2
src/layouts/payment-method/payment-method.vue
View file

@ -153,7 +153,7 @@ export default {
isPayInAdvanceDisabled() {
const piaExperience = this.getSettingValue(experimentSettings.ISS_DISPLAY_PAY_IN_ADVANCE);
const isEnabled = piaExperience === 'true';
const isDeductibleTotalEqualToZero = useMainStore().order.currentDeductible === 0;
const isDeductibleTotalEqualToZero = useMainStore().currentDeductible === 0;
return !isEnabled || useMainStore().isUnverified || (useMainStore().isDeductible && isDeductibleTotalEqualToZero);
},

18
src/layouts/tpa-submit/tpa-submit.spec.js
View file

@ -386,7 +386,7 @@ describe('tpa-submit', () => {
serviceLocation: {
provider: {
companyName: providerCompanyName
}
}
},
contactInfo: {
firstName,
@ -431,7 +431,7 @@ describe('tpa-submit', () => {
serviceLocation: {
provider: {
companyName: providerCompanyName
}
}
},
contactInfo: {
firstName,
@ -520,7 +520,9 @@ describe('tpa-submit', () => {
// Arrange
const initialStore = {
order: {
currentDeductible: storeValue
currentDeductible: {
replace: storeValue
}
}
};
const { wrapper } = getMountedComponent(initialStore);
@ -568,7 +570,10 @@ describe('tpa-submit', () => {
insuranceCoverage: {
coverageStatus: status
},
currentDeductible: deductible
currentDeductible: {
replace: deductible,
repair: deductible
}
}
};
const { wrapper } = getMountedComponent(initialStore);
@ -596,7 +601,10 @@ describe('tpa-submit', () => {
insuranceCoverage: {
coverageStatus: status
},
currentDeductible: deductible
currentDeductible: {
replace: deductible,
repair: deductible
}
}
};
const { wrapper } = getMountedComponent(initialStore);

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

@ -16,12 +16,11 @@
<alert
ref="alertIncomplete"
alertClass="alert-warning"
:cmsWidgetName="widget.alertIncomplete"
/>
:cmsWidgetName="widget.alertIncomplete" />
<textBlock
ref="subHeaderTitle"
:customText="subHeaderTitle"
class="tpa-submit-title"/>
class="tpa-submit-title" />
<textBlock
id="tpaSubmitSubHeaderBodyOne"
ref="tpaSubmitSubHeaderBodyOne"
@ -40,9 +39,15 @@
:headerText="recalModalContent.headerText"
:footerButtonText="recalModalContent.footerButtonText"
@footerButtonEvent="closeRecalModal">
<div class="recal-modal-subheader">{{ recalModalContent.subHeaderText }}</div>
<img class="recal-modal-image" :src="recalModalContent.image" />
<div class="recal-modal-body" v-html="recalModalContent.bodyText"></div>
<div class="recal-modal-subheader">
{{ recalModalContent.subHeaderText }}
</div>
<img
class="recal-modal-image"
:src="recalModalContent.image" />
<div
class="recal-modal-body"
v-html="recalModalContent.bodyText"></div>
</modal>
<hr />
<div id="serviceSummarySection">
@ -155,7 +160,7 @@ export default {
alertIncomplete: 'AlertIncompleteWidget',
alertRecalWarning: 'AlertRecalWarningWidget',
editShopLinkText: 'EditShopLinkTextWidget',
contactDetails: 'ContactDetailsSectionWidget'
contactDetails: 'ContactDetailsSectionWidget'
},
modalPositions
};
@ -207,7 +212,7 @@ export default {
return this.mainStore.isVerified;
},
currentDeductible() {
return this.mainStore.order.currentDeductible;
return this.mainStore.currentDeductible;
},
deductibleBoxValue() {
return this.isVerified
@ -269,7 +274,7 @@ export default {
bodyText: this.getCmsContent(widgetName, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT),
footerButtonText: this.getCmsContent(widgetName, widgetFields.CONTENT_GROUP_WIDGET.FOOTER_TEXT),
image: this.getCmsContent(widgetName, widgetFields.CONTENT_GROUP_WIDGET.IMAGE)
}
};
},
recalibrationRequired() {
return this.mainStore.hasRecalibrationPart;
@ -281,9 +286,9 @@ export default {
}
return {
glassShop: this.getPreferredShopTitle,
contactPhone: contactPhone,
contactPhone,
contactEmail: this.mainStore.contactInfo.emailAddress ?? ''
}
};
}
},
methods: {
@ -293,7 +298,7 @@ export default {
this.getPreferredShopTitle,
this.getPreferredShopLines,
this.getEditShopLinkText,
() => this.navigate(this.navigationScenarios.EDIT_PREFERRED_SHOP),
() => this.navigate(this.navigationScenarios.EDIT_PREFERRED_SHOP)
),
// eslint-disable-next-line max-len
this.getSection(
@ -306,7 +311,7 @@ export default {
},
getSection(title, lines, editLinkText, onClick) {
return {
title: title,
title,
lines,
editLinkText,
onClickEdit: onClick

51
src/store/index.js
View file

@ -220,8 +220,16 @@ export const getDefaultState = () => ({
settledTenderAmount: null,
lockToken: null,
customerPortalLoginToken: null,
originalDeductible: null,
currentDeductible: null,
originalDeductible: {
repair: null,
replace: null
},
currentDeductible: {
repair: null,
replace: null
},
totalTaxAmount: null,
waiverReasons: null,
carrierPhoneNumber: null,
loadedFromCookie: false,
loadedFromDupeCheck: null,
@ -439,7 +447,9 @@ export const useMainStore = defineStore({
experimentSettings: (state) => state.applicationUser.experiments
.filter((x) => !!x.isActive)
.map((x) => x.settings)
.reduce((r, c) => Object.assign(r, c), {}) ?? {}
.reduce((r, c) => Object.assign(r, c), {}) ?? {},
originalDeductible: (state) => (state.order.damage.isRepair ? state.order.originalDeductible.repair : state.order.originalDeductible.replace),
currentDeductible: (state) => (state.order.damage.isRepair ? state.order.currentDeductible.repair : state.order.currentDeductible.replace)
},
actions:
{
@ -653,7 +663,7 @@ export const useMainStore = defineStore({
safelitePolicy: {
policies: []
},
actualDeductible: this.order.currentDeductible?.toString() ?? ''
actualDeductible: this.currentDeductible.toString() ?? ''
},
lossInfo: {
dateOfLoss: this.order.policy.dateOfLoss,
@ -716,8 +726,8 @@ export const useMainStore = defineStore({
manualGlassNames: manualGlassNamesArray,
policyState: this.order.customer.address.state,
status: this.order.policy.status,
originalDeductible: this.order.originalDeductible,
currentDeductible: this.order.currentDeductible,
originalDeductible: this.originalDeductible,
currentDeductible: this.currentDeductible,
noCoverage: false,
isRepair: this.order.damage.isRepair,
policyNumber: this.order.policy.policyNumber,
@ -731,7 +741,7 @@ export const useMainStore = defineStore({
}
}).then((r) => {
this.order.policy.policyData = r.data.policyData;
this.updateDeductible(r.data.deductible);
this.updateDeductible(r.data);
return resolve(r);
}).catch((error) => reject(error));
});
@ -1198,7 +1208,7 @@ export const useMainStore = defineStore({
Model: vehicle.model
},
Insurance: {
Deductible: this.order.currentDeductible ?? 0,
Deductible: this.currentDeductible ?? 0,
PolicyNumber: policy.policyNumber,
CoverageStatus: insuranceCoverage.coverageStatus,
CoverageType: insuranceCoverage.coverageType
@ -1448,8 +1458,8 @@ export const useMainStore = defineStore({
},
policyNumber: policy.policyNumber,
policyZipCode: policy.policyZipCode,
originalDeductible: this.order.originalDeductible,
currentDeductible: this.order.currentDeductible,
originalDeductible: this.originalDeductible,
currentDeductible: this.currentDeductible,
OemEndorsement: this.hasOemEndorsement,
noCoverage: this.isNoComp,
isItac: this.isITAC
@ -2031,9 +2041,10 @@ export const useMainStore = defineStore({
this.order.policy.deductible.repair = coverage?.repairWaived ?? false ? 0 : coverage.deductible;
this.order.policy.endorsements = coverage?.endorsements;
// TODO logic should be more complicated later on
this.order.originalDeductible = coverage.deductible;
this.order.currentDeductible = coverage.deductible;
this.order.originalDeductible.replace = this.order.policy.deductible.replace;
this.order.currentDeductible.replace = this.order.policy.deductible.replace;
this.order.originalDeductible.repair = this.order.policy.deductible.repair;
this.order.currentDeductible.repair = this.order.policy.deductible.repair;
},
resetOrder() {
@ -2046,8 +2057,10 @@ export const useMainStore = defineStore({
this.order.settledTenderAmount = null;
this.order.lockToken = null;
this.order.eon = null;
this.order.originalDeductible = null;
this.order.currentDeductible = null;
this.order.originalDeductible.repair = null;
this.order.originalDeductible.replace = null;
this.order.currentDeductible.repair = null;
this.order.currentDeductible.replace = null;
this.order.loadedFromDupeCheck = null;
this.order.loadedSessionClearedPreviousData = null;
this.order.availableVaps = null;
@ -2317,8 +2330,12 @@ export const useMainStore = defineStore({
updateIsSafeliteProvider(isSafelite) {
this.order.serviceLocation.IsSafeliteProvider = isSafelite;
},
updateDeductible(finalDeductible) {
this.order.currentDeductible = finalDeductible;
updateDeductible(deductibleInfo) {
if (this.order.damage.isRepair) {
this.order.currentDeductible.repair = deductibleInfo.deductible;
} else {
this.order.currentDeductible.replace = deductibleInfo.deductible;
}
},
savePartQuestionAnswers(partQuestionAnswersArray) {
// if part question answers have changed, reset subsequent question answers

86
src/store/store.spec.js
View file

@ -12,7 +12,6 @@ import coverageStatuses from '@/constants/coverage-statuses.js';
import { paymentMethods } from '@/constants/payment-method-constants';
import endpoints from '@/constants/endpoints';
import { AppointmentTypeStrings } from '@/constants/schedule-constants';
import bailoutCode from '@/constants/bailoutCode';
import coverageType from '@/constants/coverage-type';
import { getEnumName } from '@/helpers/unit-test-helper';
@ -227,6 +226,10 @@ describe('Store', () => {
test(`CoverageType is set to expected ${getEnumName(coverageType, expected)} when vehicle noCoverage is ${noCoverage} and enableNoCompQuote is ${enableNoCompQuote}`, () => {
// Arrange
store.issConfig.enableNoCompQuote = enableNoCompQuote;
store.order.currentDeductible = {
replace: 500,
repair: 0
};
const vehicleCoverage = {
noCoverage
};
@ -407,6 +410,10 @@ describe('Store', () => {
}
};
store.order.insuranceCoverage.coverageType = coverageType.NO_COMP;
store.order.currentDeductible = {
replace: 500,
repair: 0
};
globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve(response));
@ -434,6 +441,10 @@ describe('Store', () => {
}
};
store.order.insuranceCoverage.coverageType = coverageType.Deductible;
store.order.currentDeductible = {
replace: 500,
repair: 0
};
globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve(response));
@ -453,6 +464,10 @@ describe('Store', () => {
const error = 'register claim error';
globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.reject(error));
store.order.insuranceCoverage.coverageStatus = coverageStatuses.PENDING;
store.order.currentDeductible = {
replace: 500,
repair: 0
};
// Act
await store.registerClaim().catch((e) => {
@ -501,7 +516,7 @@ describe('Store', () => {
home: homePhone,
service: servicePhone,
alternative: altPhone,
extension: extension
extension
});
// Assert
@ -670,10 +685,22 @@ describe('Store', () => {
const policyZipCode = getRandomString(6, 6);
const status = getRandomEnum(coverageStatuses);
const type = getRandomEnum(coverageType);
const originalDeductible = getRandomString(6, 6);
const currentDeductible = getRandomString(6, 6);
store.order.originalDeductible = originalDeductible;
store.order.currentDeductible = currentDeductible;
const originalDeductible = {
replace: 500,
repair: 0
};
const currentDeductible = {
replace: 500,
repair: 0
};
store.order.originalDeductible = {
replace: originalDeductible.replace,
repair: originalDeductible.repair
};
store.order.currentDeductible = {
replace: currentDeductible.replace,
repair: currentDeductible.repair
};
store.order.customer.firstName = customerFirstName;
store.order.customer.lastName = customerLastName;
store.order.customer.emailAddress = customerEmail;
@ -684,6 +711,7 @@ describe('Store', () => {
store.order.policy.policyZipCode = policyZipCode;
store.order.insuranceCoverage.coverageStatus = status;
store.order.insuranceCoverage.coverageType = type;
store.order.damage.isRepair = false;
globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve({}));
// Act
@ -702,8 +730,8 @@ describe('Store', () => {
}),
policyNumber,
policyZipCode,
originalDeductible,
currentDeductible
originalDeductible: originalDeductible.replace,
currentDeductible: currentDeductible.replace
}),
insuranceCoverage: expect.objectContaining({
coverageStatus: status,
@ -1717,8 +1745,8 @@ describe('Store', () => {
const manualGlassNames = [location];
const policyState = getRandomString(2, 2);
const status = getRandomString(6, 8);
const currentDeductible = getRandomInt(0, 5000);
const originalDeductible = getRandomInt(0, 5000);
const currentDeductible = 500;
const originalDeductible = 500;
const isRepair = getRandomBoolean();
const policyNumber = getRandomString(10, 20);
const insuredFirstName = getRandomString(10, 20);
@ -1730,8 +1758,14 @@ describe('Store', () => {
store.order.referralCorrelationId = referralCorrelationId;
store.order.parentAccountNumber = parentAccountNumber;
store.order.currentDeductible = currentDeductible;
store.order.originalDeductible = originalDeductible;
store.order.currentDeductible = {
replace: currentDeductible,
repair: currentDeductible
};
store.order.originalDeductible = {
replace: originalDeductible,
repair: originalDeductible
};
store.order.policy.status = status;
store.order.customer.address.state = policyState;
store.order.damage.isRepair = isRepair;
@ -1827,8 +1861,14 @@ describe('Store', () => {
store.order.referralCorrelationId = referralCorrelationId;
store.order.parentAccountNumber = parentAccountNumber;
store.order.currentDeductible = currentDeductible;
store.order.originalDeductible = originalDeductible;
store.order.currentDeductible = {
replace: currentDeductible,
repair: currentDeductible
};
store.order.originalDeductible = {
replace: originalDeductible,
repair: originalDeductible
};
store.order.policy.status = status;
store.order.customer.address.state = policyState;
store.order.policy.endorsementQuestionAnswers = endorsementAnswers;
@ -1898,23 +1938,29 @@ describe('Store', () => {
describe('updateDeductible method', () => {
it('final deductible is saved as currentDeductible in store', () => {
// Arrange
const finalDeductible = getRandomInt(0, 5000);
store.order.damage.isRepair = false;
const deductibleInfo = {
deductible: 500
};
// Act
store.updateDeductible(finalDeductible);
store.updateDeductible(deductibleInfo);
// Assert
expect(store.order.currentDeductible).toEqual(finalDeductible);
expect(store.order.currentDeductible.replace).toEqual(deductibleInfo.deductible);
});
it('null final deductible => currentDeductible in store set to null', () => {
// Arrange
const finalDeductible = null;
store.order.damage.isRepair = false;
const deductibleInfo = {
deductible: null
};
// Act
store.updateDeductible(finalDeductible);
store.updateDeductible(deductibleInfo);
// Assert
expect(store.order.currentDeductible).toEqual(finalDeductible);
expect(store.order.currentDeductible.replace).toEqual(deductibleInfo.deductible);
});
});

7
src/styles/client-customizations.scss
View file

@ -6,15 +6,18 @@
//Define colors for namespaced classes
$header-background: #ffd100;
$accent-fill: #e6f1f3; // Calendar background
$accent-color: #09748b;
$link: #09748b;
$accent-color: #0070d1;
$link: #0070d1;
$svg-fill-color: '%2309748b'; // Color of calendar icon. Place HEX code *after* %23
$progress-bar-success-color: #1a1446;
$progress-bar-background-color: #ffffff;
a,
svg,
.modal-text {
fill: $accent-color;
color: $accent-color;
font-weight: 500;
}
.container-fluid {