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

Merge pull request #1035 from Safelite/feature/humphries/INSR-7770

Browse source 
INSR-7770: tpa-confirmation parity updates
This commit is contained in:
AHumphriesSL 2026-01-29 14:50:38 -05:00 committed by GitHub
commit 18661e3fd2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 74 additions and 228 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/constants/dynamic-strings.js
View file

@ -4,7 +4,8 @@ const dynamicStrings = Object.freeze({
ROUTER_LINK: 'routerLink:',
MODAL_LINK: 'modalLink',
TEXT_LINK: 'textLink',
EXTERNAL_LINK: 'externalLink'
EXTERNAL_LINK: 'externalLink',
PHONE_LINK: 'phoneLink'
});
export default dynamicStrings;

9
src/helpers/cms-content-helper.js
View file

@ -623,6 +623,15 @@ export function getRouterLinkHtmlStringFromCopy(copy) {
return `<a href='/?issPage=${getRouterLinkRouteFromCopy(copy)}' class='router-link'>${getRouterLinkDisplayTextFromCopy(copy)}</a>`;
}
/**
* Returns a phone link as an 'a' tag element
* @param copy
* @returns string
*/
export function getPhoneLinkHtmlStringFromPhoneNumber(phoneNumber) {
return `<a href='tel:${phoneNumber}' class='phone-link'>${phoneNumber}.</a>`;
}
// Copy returned from the CMS that has newlines will return blocks wrapped in
// <p ... >...</p>
// This function returns an array of each paragraph, works with or without html

4
src/helpers/order-helper.js
View file

@ -40,12 +40,12 @@ export async function submitWorkOrder({ submitType }) {
shouldAwaitSaveSessionQueue: true,
submitAfterSave: true
});
store.createSubmittedOrder(submitType);
await store.createSubmittedOrder(submitType);
}
export async function submitBailout() {
const store = useMainStore();
store.resetSubmittedOrder();
await store.saveSession({});
store.createSubmittedOrder(submitType.BAILOUT);
await store.createSubmittedOrder(submitType.BAILOUT);
}

146
src/layouts/tpa-confirmation/tpa-confirmation.spec.js
View file

@ -2,14 +2,12 @@
import tpaConfirmation from '@/layouts/tpa-confirmation/tpa-confirmation.vue';
// Supporting Files
import { getEnumName, getMountOptions } from '@/helpers/unit-test-helper.js';
import { getMountOptions } from '@/helpers/unit-test-helper.js';
import { getDefaultState, useMainStore } from '@/store/index.js';
import settleAllPromises from '@/helpers/layout-helper.js';
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import { mount } from '@vue/test-utils';
import { createTestingPinia } from '@pinia/testing';
import coverageStatuses from '@/constants/coverage-statuses';
import { deepClone } from '@/helpers/object-helper';
jest.mock('@/helpers/layout-helper.js', () => jest.fn());
@ -20,6 +18,7 @@ jest.mock('@/helpers/cms-content-helper', () => ({
splitCopyOnCMSPlaceHolder: jest.fn().mockImplementation(() => 'test'),
getRouterLinkRouteFromCopy: jest.fn(),
getRouterLinkDisplayTextFromCopy: jest.fn(),
getPhoneLinkHtmlStringFromPhoneNumber: jest.fn(),
doesCopyContainTextLink: jest.fn()
}));
@ -122,27 +121,6 @@ describe('TPAConfirmation.vue', () => {
// Assert
expect(bodyTwo.exists()).toBe(true);
});
test('Should render Order Details title', () => {
// Act
const orderDetailsTitle = wrapper.findComponent({ ref: 'tpaConfirmationOrderDetailsTitle' });
// Assert
expect(orderDetailsTitle.exists()).toBe(true);
});
test('Should render Order Details body', () => {
// Act
const orderDetailsBody = wrapper.findComponent({ ref: 'tpaConfirmationOrderDetailsBody' });
// Assert
expect(orderDetailsBody.exists()).toBe(true);
});
test('Should render Deductible Box', () => {
// Act
const deductibleBox = wrapper.findComponent({ ref: 'deductibleBox' });
// Assert
expect(deductibleBox.exists()).toBe(true);
});
test('If Advanced flow, should display Site Footer', () => {
// Arrange
const carrierReturnUrl = 'testURL';
@ -167,127 +145,7 @@ describe('TPAConfirmation.vue', () => {
expect(siteFooter.isVisible()).toBe(false);
});
});
describe('Computed properties', () => {
describe('Deductible Box value', () => {
test('Should return "Verifying coverage" when isVerified false', () => {
// Arrange
const initialStore = {
order: {
insuranceCoverage: {
coverageStatus: coverageStatuses.PENDING
}
}
};
const mockStoreActions = () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => defaultOrder);
};
const { wrapper } = getMountedComponent(initialStore, {}, mockStoreActions);
const expected = 'Verifying coverage';
// Assert
expect(wrapper.vm.deductibleBoxValue).toBe(expected);
});
test('Should return deductible value when isVerified true', () => {
// Arrange
const currentDeductible = '500';
const initialStore = {
order: {
insuranceCoverage: {
coverageStatus: coverageStatuses.VERIFIED
},
currentDeductible
}
};
const order = deepClone(defaultOrder);
order.isVerified = true;
const mockStoreActions = () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
};
const { wrapper } = getMountedComponent(initialStore, {}, mockStoreActions);
const notExpected = 'Verifying coverage';
// Assert
expect(wrapper.vm.deductibleBoxValue).not.toBe(notExpected);
});
});
});
describe('Methods', () => {
describe.only('getCustomValueFromString', () => {
describe.each([
[false, false, 0],
[false, false, 500],
[false, true, 0],
[true, true, 500]
])('with argument deductibleAboveZero', (expected, isVerified, deductible) => {
test(`returns ${expected} when coverageStatus is ${getEnumName(coverageStatuses, status)} and currentDeductible is ${deductible}`, () => {
// Arrange
const order = deepClone(defaultOrder);
order.isVerified = isVerified;
order.currentDeductible = deductible;
const mockStoreActions = () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
};
const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const argument = 'deductibleAboveZero';
// Act
const result = wrapper.vm.getCustomValueFromString(argument);
// Assert
expect(result).toBe(expected);
});
});
describe('with argument zeroDeductible', () => {
describe.each([
[false, false, 0],
[false, false, 500],
[true, true, 0],
[false, true, 500]
])('with argument zeroDeductible', (expected, isVerified, deductible) => {
test(`returns ${expected} when coverageStatus is ${getEnumName(coverageStatuses, status)} and currentDeductible is ${deductible}`, () => {
// Arrange
const order = deepClone(defaultOrder);
order.isVerified = isVerified;
order.currentDeductible = deductible;
const mockStoreActions = () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
};
const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const argument = 'zeroDeductible';
// Act
const result = wrapper.vm.getCustomValueFromString(argument);
// Assert
expect(result).toBe(expected);
});
});
});
describe('with argument verifyingCoverage', () => {
describe.each([
[true, false],
[false, true]
])('with argument zeroDeductible', (expected, isVerified) => {
test(`returns ${expected} when coverageStatus is ${getEnumName(coverageStatuses, status)}`, () => {
// Arrange
const order = deepClone(defaultOrder);
order.isVerified = isVerified;
order.currentDeductible = 123;
const mockStoreActions = () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
};
const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const argument = 'verifyingCoverage';
// Act
const result = wrapper.vm.getCustomValueFromString(argument);
// Assert
expect(result).toBe(expected);
});
});
});
});
describe('Navigation', () => {
const mockStoreActions = () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => defaultOrder);

125
src/layouts/tpa-confirmation/tpa-confirmation.vue
View file

@ -12,40 +12,21 @@
</div>
<div class="iss-heritage-container-width">
<div class="tpa-confirmation-container iss-heritage-content-container-width">
<div class="d-flex justify-content-center align-items-center text-color--black pb-2 fs-5">
<div class="header">
<img :src="tpaConfirmationImage" />
<span
class="ms-2"
v-html="tpaConfirmationHeaderText"></span>
<span v-html="tpaConfirmationHeaderText"></span>
</div>
<div class="text-center text-color--black mb-3 fw-bold">
<div class="subheader">
<span v-html="tpaConfirmationSubheaderText"></span>
</div>
<textBlock
ref="tpaConfirmationBodyOne"
class="tpa-body-one mt-0"
class="tpa-body-one"
:customText="tpaConfirmationBodyOne" />
<textBlock
ref="tpaConfirmationBodyTwo"
:customText="tpaConfirmationBodyTwo"
class="small mt-0" />
<div ref="confirmationOrderDetailsSection">
<textBlock
ref="tpaConfirmationOrderDetailsTitle"
:customText="orderDetailsTitle"
class="text-color--black fw-bold lh-base mt-5 mb-4"
:marginTopSizeOverride="4" />
<textBlock
id="tpaConfirmationOrderDetailsBody"
ref="tpaConfirmationOrderDetailsBody"
:customText="orderDetailsBody"
:marginTopSizeOverride="4"
class="mb-4 small" />
<deductibleBox
ref="deductibleBox"
class="px-3"
:value="deductibleBoxValue" />
</div>
class="tpa-body-one"
:customText="tpaConfirmationBodyTwo" />
<siteFooter
v-if="carrierUrl"
ref="siteFooter"
@ -64,11 +45,11 @@
import siteHeader from '@/iss-components/site-header/site-header.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import textBlock from '@/digital-components/text-block/text-block.vue';
import deductibleBox from '@/layouts/tpa-submit/deductible-box/deductible-box.vue';
// Supporting files
import {
fetchCmsContentForPage,
getPhoneLinkHtmlStringFromPhoneNumber,
processIfStatements
} from '@/helpers/cms-content-helper';
import settleAllPromises from '@/helpers/layout-helper';
@ -77,8 +58,7 @@ import BaseFormMixin from '@/mixins/base-form-mixin.js';
import { useMainStore } from '@/store';
import {
toTitleCase,
toDisplayPhoneNumber,
formatAmountInDollars
toDisplayPhoneNumber
} from '@/helpers/text-helper.js';
const VERIFYING_COVERAGE = 'Verifying coverage';
@ -89,7 +69,6 @@ export default {
siteHeader,
siteFooter,
textBlock,
deductibleBox,
// eslint-disable-next-line vue/no-reserved-component-names
Form
},
@ -132,26 +111,17 @@ export default {
return this.getCmsContent('TPAConfirmationContent', 'BodyText')
?.replaceAll(
'{custom:phoneNumber}',
this.preferredShopPhoneNumber
getPhoneLinkHtmlStringFromPhoneNumber(this.preferredShopPhoneNumber)
)
?.replaceAll('{custom:glassShop}', this.preferredShopName);
},
tpaConfirmationBodyTwo() {
return this.getCmsContent('TPAConfirmationContent', 'BodyText2');
},
orderDetailsTitle() {
return this.getCmsContent('OrderDetailsContent', 'HeaderText');
},
orderDetailsBody() {
const orderDetailsBodyText = this.getCmsContent(
'OrderDetailsContent',
'BodyText'
);
return this.processIfStatements(
orderDetailsBodyText,
'custom',
this.getCustomValueFromString
);
return this.getCmsContent('TPAConfirmationContent', 'BodyText2')
?.replaceAll(
'{custom:carrierPhone}',
getPhoneLinkHtmlStringFromPhoneNumber(this.carrierPhoneNumber)
)
?.replaceAll('{custom:carrierName}', this.carrierName);
},
deductibleBoxValue() {
return this.isVerified
@ -171,7 +141,7 @@ export default {
return this.submittedOrder.isVerified;
},
carrierName() {
return this.mainStore.issConfig.clientName;
return this.mainStore.issConfig.clientFullName;
},
carrierUrl() {
return this.mainStore.issConfig.successReturnURL;
@ -189,48 +159,43 @@ export default {
async forwardButtonAction() {
this.$router.navigateToExternalUrl(this.carrierUrl);
},
getCustomValueFromString(str) {
switch (str) {
case 'deductibleAboveZero':
return this.isVerified && this.currentDeductible !== 0;
case 'zeroDeductible':
return this.isVerified && this.currentDeductible === 0;
case 'verifyingCoverage':
return !this.isVerified;
case 'coverageVerified':
return this.isVerified;
default:
return null;
}
},
toDisplayPhoneNumber,
formatAmountInDollars,
processIfStatements
}
};
</script>
<style lang="scss" scoped>
.iss-heritage-container-width {
.tpa-confirmation-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
}
.tpa-confirmation-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
.text-color--black {
color: $black;
}
.tpa-body-one {
:deep(p) {
line-height: map-get($spacers, 5);
font-size: $h6-font-size;
strong {
color: $black;
.header {
margin-top: 1.25rem;
margin-bottom: .625rem;
font-size: 1.25rem;
color: $black;
img {
height: 2.25rem;
width: 2.25rem;
margin-right: .5rem;
}
}
.subheader {
margin-bottom: 1.25rem;
color: $black;
font-weight: $font-weight-bold;
}
:deep(p) {
margin-bottom: .625rem;
}
:deep(strong) {
color: $black;
font-weight: 600;
}
}
</style>

3
src/store/index.js
View file

@ -2881,10 +2881,11 @@ export const useMainStore = defineStore({
return JSON.parse(window.sessionStorage.getItem(webStorageConstants.SUBMITTED_ORDER));
},
createSubmittedOrder(submitType) {
async createSubmittedOrder(submitType) {
if (this.hasSubmittedOrder()) {
return;
}
await this.getCarrierAccountInfo();
const submittedOrder = this.order;
const { experiments } = this.applicationUser;
const { issConfig } = this;

12
src/styles/common-styles.scss
View file

@ -206,6 +206,18 @@ a.router-link {
text-decoration: none;
font-weight: $font-weight-bold;
&:hover,
&:focus {
color: #125b7e;
text-decoration: underline;
}
}
a.phone-link {
color: $heritage-blue-primary;
text-decoration: none;
font-weight: $font-weight-normal;
&:hover,
&:focus {
color: #125b7e;