Merge pull request #1020 from Safelite/feature/humphries/INSR-7772
INSR-7772: tpa-submit parity updates
This commit is contained in:
AHumphriesSL
GitHub
commit
26cce0c1a4
15 changed files with 409 additions and 405 deletions
|
|
@ -71,6 +71,9 @@ export const pageProgressMapper = {
|
|||
'tpa-search': {
|
||||
percent: 85
|
||||
},
|
||||
'tpa-submit': {
|
||||
percent: 95
|
||||
},
|
||||
'tpa-confirmation': {
|
||||
percent: 100
|
||||
},
|
||||
|
|
|
|||
|
|
@ -34,11 +34,8 @@ export function createOrderedListFromStringOfParagraphs(stringOfParagraphs) {
|
|||
* @returns {string}
|
||||
*/
|
||||
export function toTitleCase(text) {
|
||||
const temp = text?.toLowerCase()?.split(' ') ?? [];
|
||||
for (let i = 0; i < temp.length; i++) {
|
||||
temp[i] = temp[i].charAt(0).toUpperCase() + temp[i].slice(1);
|
||||
}
|
||||
return temp.join(' ');
|
||||
let temp = text?.toLowerCase() ?? '';
|
||||
return temp.replace(/(^|\s|-)\S/g, (letter) => letter.toUpperCase());
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -2,24 +2,20 @@
|
|||
|
||||
exports[`tpa-submit returns the initial data 1`] = `
|
||||
Object {
|
||||
"companyName": "Frederick Jones",
|
||||
"customValueMap": Object {
|
||||
"glassShop": "Frederick Jones",
|
||||
"modalPositions": Object {
|
||||
"center": "center",
|
||||
"edge": "edge",
|
||||
},
|
||||
"sections": Array [],
|
||||
"widget": Object {
|
||||
"damageLocations": "DamageLocationsWidget",
|
||||
"alertIncomplete": "AlertIncompleteWidget",
|
||||
"alertRecalWarning": "AlertRecalWarningWidget",
|
||||
"contactDetails": "ContactDetailsSectionWidget",
|
||||
"editShopLinkText": "EditShopLinkTextWidget",
|
||||
"footer": "SiteFooterWidget",
|
||||
"orderDetails": "OrderDetailsContent",
|
||||
"serviceSummary": "ServiceSummaryContent",
|
||||
"siteHeader": "SiteHeaderWidget",
|
||||
"siteSubHeader": "SiteSubHeaderWidget",
|
||||
"subheader": Object {
|
||||
"contactInfo": "ContactDetailsSubTitle",
|
||||
"damage": "DamageSubTitle",
|
||||
"shop": "PreferredShopSubTitle",
|
||||
"vehicle": "VehicleSubTitle",
|
||||
},
|
||||
},
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -3,12 +3,18 @@
|
|||
exports[`contact-details-drawer snapshot matches returns the initial data 1`] = `
|
||||
Object {
|
||||
"emailAddress": "fred.tay@gmail.com",
|
||||
"extension": null,
|
||||
"firstName": "Frederick",
|
||||
"isModalOpened": false,
|
||||
"lastName": "Taylor",
|
||||
"modalPositions": Object {
|
||||
"center": "center",
|
||||
"edge": "edge",
|
||||
},
|
||||
"phoneNumber": "606-009-2943",
|
||||
"rules": Object {
|
||||
"emailAddress": "email-required|email-address-format",
|
||||
"extension": "extension-format",
|
||||
"firstName": "first-name-required",
|
||||
"lastName": "last-name-required",
|
||||
"phoneNumber": "phone-number-required|phone-number-format",
|
||||
|
|
@ -16,6 +22,7 @@ Object {
|
|||
"widget": Object {
|
||||
"drawerFooter": "ContactDetailsDrawerFooterWidget",
|
||||
"emailQuestion": "EmailQuestionWidget",
|
||||
"extensionQuestion": "ExtensionQuestionWidget",
|
||||
"firstNameQuestion": "FirstNameQuestionWidget",
|
||||
"lastNameQuestion": "LastNameQuestionWidget",
|
||||
"phoneNumberQuestion": "PhoneNumberQuestionWidget",
|
||||
|
|
|
|||
|
|
@ -65,15 +65,16 @@ describe('contact-details-drawer', () => {
|
|||
describe('method', () => {
|
||||
describe('saveContactDetails', () => {
|
||||
test.each([
|
||||
['Sarah', 'Jones', 's.jones@gmail.com', '724-996-0909'],
|
||||
[null, 'Jones', 's.jones@gmail.com', '724-996-0909'],
|
||||
['Sarah', null, 's.jones@gmail.com', '724-996-0909'],
|
||||
['Sarah', 'Jones', null, '724-996-0909'],
|
||||
['Sarah', 'Jones', 's.jones@gmail.com', null]
|
||||
['Sarah', 'Jones', 's.jones@gmail.com', '724-996-0909', '12345'],
|
||||
[null, 'Jones', 's.jones@gmail.com', '724-996-0909', '12345'],
|
||||
['Sarah', null, 's.jones@gmail.com', '724-996-0909', '12345'],
|
||||
['Sarah', 'Jones', null, '724-996-0909', '12345'],
|
||||
['Sarah', 'Jones', 's.jones@gmail.com', null, '12345'],
|
||||
['Sarah', 'Jones', 's.jones@gmail.com', '724-996-0909', null],
|
||||
|
||||
])(
|
||||
'when first name data "%p", last name "%p", email "%p", and phone number "%p", updateContactInfo called with expected',
|
||||
(firstName, lastName, emailAddress, phoneNumber) => {
|
||||
'when first name data "%p", last name "%p", email "%p", phone number "%p", and extension "%p", updateContactInfo called with expected',
|
||||
(firstName, lastName, emailAddress, phoneNumber, extension) => {
|
||||
// Arrange
|
||||
const mainInitialState = {
|
||||
order: {
|
||||
|
|
@ -81,12 +82,13 @@ describe('contact-details-drawer', () => {
|
|||
firstName: 'Frederick',
|
||||
lastName: 'Taylor',
|
||||
emailAddress: 'fred.tay@gmail.com',
|
||||
servicePhone: '606-009-2943'
|
||||
servicePhone: '606-009-2943',
|
||||
extension: '11111'
|
||||
}
|
||||
}
|
||||
};
|
||||
const initialData = {
|
||||
firstName, lastName, emailAddress, phoneNumber
|
||||
firstName, lastName, emailAddress, phoneNumber, extension
|
||||
};
|
||||
const { wrapper } = getMountedComponent(mainInitialState, initialData);
|
||||
|
||||
|
|
@ -98,7 +100,7 @@ describe('contact-details-drawer', () => {
|
|||
expect(useMainStore().updateContactInfo).toBeCalledTimes(1);
|
||||
expect(useMainStore().updateContactInfo).toBeCalledWith({ firstName, lastName, emailAddress });
|
||||
expect(useMainStore().updatePhoneNumbers).toBeCalledTimes(1);
|
||||
expect(useMainStore().updatePhoneNumbers).toBeCalledWith({ home: phoneNumber, service: phoneNumber });
|
||||
expect(useMainStore().updatePhoneNumbers).toBeCalledWith({ home: phoneNumber, service: phoneNumber, extension: extension });
|
||||
}
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<modal
|
||||
:ref="modalName"
|
||||
:modalPosition="modalPositions.center"
|
||||
:headerText="headerText"
|
||||
:footerButtonText="footerButtonText"
|
||||
:onModalClosedCallback="resetFormValues"
|
||||
|
|
@ -8,25 +9,27 @@
|
|||
@isModalOpened="setModalStatus"
|
||||
@footerButtonEvent="clickFooterButtonEvent">
|
||||
<template v-if="isModalOpened">
|
||||
<textboxQuestion
|
||||
ref="firstNameQuestion"
|
||||
v-model="firstName"
|
||||
inputId="firstName"
|
||||
:cmsWidgetName="widget.firstNameQuestion"
|
||||
isRequired
|
||||
:validationRules="rules.firstName" />
|
||||
<textboxQuestion
|
||||
ref="lastNameQuestion"
|
||||
v-model="lastName"
|
||||
class="mt-4"
|
||||
inputId="lastName"
|
||||
:cmsWidgetName="widget.lastNameQuestion"
|
||||
isRequired
|
||||
:validationRules="rules.lastName" />
|
||||
<div class="row">
|
||||
<textboxQuestion
|
||||
class="col"
|
||||
ref="firstNameQuestion"
|
||||
v-model="firstName"
|
||||
inputId="firstName"
|
||||
:cmsWidgetName="widget.firstNameQuestion"
|
||||
isRequired
|
||||
:validationRules="rules.firstName" />
|
||||
<textboxQuestion
|
||||
class="col"
|
||||
ref="lastNameQuestion"
|
||||
v-model="lastName"
|
||||
inputId="lastName"
|
||||
:cmsWidgetName="widget.lastNameQuestion"
|
||||
isRequired
|
||||
:validationRules="rules.lastName" />
|
||||
</div>
|
||||
<textboxQuestion
|
||||
ref="emailQuestion"
|
||||
v-model="emailAddress"
|
||||
class="mt-4"
|
||||
inputId="emailAddress"
|
||||
:cmsWidgetName="widget.emailQuestion"
|
||||
isRequired
|
||||
|
|
@ -34,13 +37,19 @@
|
|||
<textboxQuestion
|
||||
ref="phoneNumberQuestion"
|
||||
v-model="phoneNumber"
|
||||
class="mt-4"
|
||||
inputId="phoneNumber"
|
||||
:cmsWidgetName="widget.phoneNumberQuestion"
|
||||
isRequired
|
||||
:mask="phoneMask"
|
||||
disableAutoFill
|
||||
:validationRules="rules.phoneNumber" />
|
||||
<textboxQuestion
|
||||
ref="extensionQuestion"
|
||||
v-model="extension"
|
||||
inputId="extension"
|
||||
:cmsWidgetName="widget.extensionQuestion"
|
||||
disableAutoFill
|
||||
:validationRules="rules.extension" />
|
||||
</template>
|
||||
</modal>
|
||||
</template>
|
||||
|
|
@ -51,10 +60,11 @@ import modal from '@/digital-components/modal/modal.vue';
|
|||
import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
|
||||
|
||||
// Supporting Files
|
||||
import { useMainStore } from '@/store/index.js';
|
||||
import { useMainStore } from '@/store';
|
||||
import globalRules from '@/constants/global-rules.js';
|
||||
import MaskaFormattedMasks from '@/constants/maska-masks';
|
||||
import widgetFields from '@/constants/cms-widget-fields.js';
|
||||
import { modalPositions } from '@/constants/component-variants';
|
||||
|
||||
export default {
|
||||
name: 'contact-details-drawer',
|
||||
|
|
@ -67,27 +77,32 @@ export default {
|
|||
const { firstName,
|
||||
lastName,
|
||||
emailAddress,
|
||||
servicePhone } = useMainStore().contactInfo;
|
||||
servicePhone,
|
||||
extension } = useMainStore().contactInfo;
|
||||
return {
|
||||
isModalOpened: false,
|
||||
firstName,
|
||||
lastName,
|
||||
emailAddress,
|
||||
phoneNumber: servicePhone,
|
||||
extension: extension,
|
||||
widget: {
|
||||
title: 'ContactDetailsDrawerHeaderWidget',
|
||||
firstNameQuestion: 'FirstNameQuestionWidget',
|
||||
lastNameQuestion: 'LastNameQuestionWidget',
|
||||
emailQuestion: 'EmailQuestionWidget',
|
||||
phoneNumberQuestion: 'PhoneNumberQuestionWidget',
|
||||
extensionQuestion: 'ExtensionQuestionWidget',
|
||||
drawerFooter: 'ContactDetailsDrawerFooterWidget'
|
||||
},
|
||||
rules: {
|
||||
firstName: globalRules.FIRST_NAME_REQUIRED,
|
||||
lastName: globalRules.LAST_NAME_REQUIRED,
|
||||
emailAddress: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
|
||||
phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`
|
||||
}
|
||||
phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`,
|
||||
extension: `${globalRules.EXTENSION_FORMAT}`
|
||||
},
|
||||
modalPositions
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -121,10 +136,11 @@ export default {
|
|||
lastName: this.lastName,
|
||||
emailAddress: this.emailAddress
|
||||
};
|
||||
useMainStore().updateContactInfo(contactInfo);
|
||||
useMainStore().updatePhoneNumbers({
|
||||
this.mainStore.updateContactInfo(contactInfo);
|
||||
this.mainStore.updatePhoneNumbers({
|
||||
home: this.phoneNumber,
|
||||
service: this.phoneNumber
|
||||
service: this.phoneNumber,
|
||||
extension: this.extension
|
||||
});
|
||||
this.$emit('update-contact-details');
|
||||
},
|
||||
|
|
@ -132,11 +148,13 @@ export default {
|
|||
const { firstName,
|
||||
lastName,
|
||||
emailAddress,
|
||||
servicePhone } = useMainStore().contactInfo;
|
||||
servicePhone,
|
||||
extension } = this.mainStore.contactInfo;
|
||||
this.firstName = firstName;
|
||||
this.lastName = lastName;
|
||||
this.emailAddress = emailAddress;
|
||||
this.phoneNumber = servicePhone;
|
||||
this.extension = extension;
|
||||
},
|
||||
openModal() {
|
||||
this.modal.openModal();
|
||||
|
|
@ -155,5 +173,14 @@ export default {
|
|||
font-size: $h5-font-size;
|
||||
font-weight: $font-weight-normal !important;
|
||||
}
|
||||
.textbox-question {
|
||||
margin-bottom: 1.25rem;
|
||||
:deep(label:has(b)) {
|
||||
font-weight: $font-weight-normal;
|
||||
b {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ describe('deductible-box', () => {
|
|||
|
||||
it('renders the correct deductible label', () => {
|
||||
const labelElement = wrapper.find('#deductibleLabel');
|
||||
expect(labelElement.text()).toBe('Deductible');
|
||||
expect(labelElement.text()).toBe('Deductible:');
|
||||
});
|
||||
|
||||
it('has the correct id', () => {
|
||||
|
|
@ -26,12 +26,8 @@ describe('deductible-box', () => {
|
|||
});
|
||||
|
||||
it('has the correct classes', () => {
|
||||
expect(wrapper.classes().length).toBe(5);
|
||||
expect(wrapper.classes().length).toBe(1);
|
||||
expect(wrapper.classes()).toContain('deductible-box');
|
||||
expect(wrapper.classes()).toContain('d-flex');
|
||||
expect(wrapper.classes()).toContain('justify-content-between');
|
||||
expect(wrapper.classes()).toContain('align-items-center');
|
||||
expect(wrapper.classes()).toContain('py-2');
|
||||
});
|
||||
it.each([
|
||||
['', ''],
|
||||
|
|
|
|||
|
|
@ -1,17 +1,9 @@
|
|||
<template>
|
||||
<div
|
||||
id="deductibleBox"
|
||||
class="deductible-box d-flex justify-content-between align-items-center py-2">
|
||||
<p
|
||||
id="deductibleLabel"
|
||||
class="deductible-box__text">
|
||||
Deductible
|
||||
</p>
|
||||
<p
|
||||
id="deductibleValue"
|
||||
class="deductible-box__text">
|
||||
{{ value }}
|
||||
</p>
|
||||
class="deductible-box">
|
||||
<span id="deductibleLabel" class="deductible-label">Deductible:</span>
|
||||
<span id="deductibleValue" class="deductible-value">{{ value }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -28,12 +20,17 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.deductible-box {
|
||||
background-color: $green;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .25rem;
|
||||
}
|
||||
|
||||
.deductible-box__text {
|
||||
color: white;
|
||||
.deductible-label {
|
||||
color: $black;
|
||||
font-weight: 600;
|
||||
}
|
||||
.deductible-value {
|
||||
color: $green;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
font-size: 1.625rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -20,12 +20,12 @@ describe('ReviewBlock.vue', () => {
|
|||
});
|
||||
|
||||
it('renders the correct number of lines', () => {
|
||||
const lineElements = wrapper.findAll('.review-block__body--line');
|
||||
const lineElements = wrapper.findAll('.review-body p');
|
||||
expect(lineElements.length).toBe(lines.length);
|
||||
});
|
||||
|
||||
it('renders the correct line text', () => {
|
||||
const lineElements = wrapper.findAll('.review-block__body--line');
|
||||
const lineElements = wrapper.findAll('.review-body p');
|
||||
lines.forEach((line, index) => {
|
||||
expect(lineElements.at(index).text()).toBe(line);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,29 +1,28 @@
|
|||
<template>
|
||||
<div class="review-block">
|
||||
<div class="d-flex justify-content-between">
|
||||
<p class="review-block__header small-strong pb-1">
|
||||
{{ customHeaderText }}
|
||||
</p>
|
||||
<textLink
|
||||
linkType="textSmall"
|
||||
:text="editLinkText"
|
||||
useLoadingModal
|
||||
href="javascript:void(0)"
|
||||
class="link"
|
||||
@clickEvent="editClicked">
|
||||
<template
|
||||
v-if="editScreenReaderTextCmsWidgetName"
|
||||
#after-text>
|
||||
<span class="sr-only"> {{ screenReaderOnlyText }} </span>
|
||||
</template>
|
||||
</textLink>
|
||||
</div>
|
||||
<p
|
||||
v-for="line in lines"
|
||||
:key="line"
|
||||
class="small review-block__body--line"
|
||||
v-html="line">
|
||||
<p class="review-block__header">
|
||||
{{ customHeaderText }}
|
||||
</p>
|
||||
<div class="review-body">
|
||||
<p
|
||||
v-for="line in lines"
|
||||
:key="line"
|
||||
v-html="line">
|
||||
</p>
|
||||
</div>
|
||||
<textLink
|
||||
linkType="text"
|
||||
:text="editLinkText"
|
||||
useLoadingModal
|
||||
href="javascript:void(0)"
|
||||
class="link"
|
||||
@clickEvent="editClicked">
|
||||
<template
|
||||
v-if="editScreenReaderTextCmsWidgetName"
|
||||
#after-text>
|
||||
<span class="sr-only"> {{ screenReaderOnlyText }} </span>
|
||||
</template>
|
||||
</textLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -36,14 +35,13 @@ export default {
|
|||
props: {
|
||||
customHeaderText: String,
|
||||
editScreenReaderTextCmsWidgetName: String,
|
||||
lines: Array
|
||||
lines: Array,
|
||||
editLinkText: {
|
||||
type: String,
|
||||
default: 'Edit'
|
||||
},
|
||||
},
|
||||
emits: ['click-edit'],
|
||||
data() {
|
||||
return {
|
||||
editLinkText: 'Edit'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
editClicked() {
|
||||
this.$emit('click-edit');
|
||||
|
|
@ -59,12 +57,16 @@ export default {
|
|||
}
|
||||
.review-block__header {
|
||||
color: $black;
|
||||
font-weight: $font-weight-bold;
|
||||
margin-bottom: .625rem;
|
||||
}
|
||||
.review-block__body--line {
|
||||
color: $gray-600;
|
||||
|
||||
.review-body {
|
||||
margin-bottom: .625rem
|
||||
}
|
||||
|
||||
.link {
|
||||
text-underline-offset: 1px;
|
||||
font-weight: $font-weight-normal
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,15 @@ import coverageStatuses from '@/constants/coverage-statuses';
|
|||
jest.mock('@/helpers/cms-content-helper', () => ({
|
||||
fetchCmsContentForPage: jest.fn(),
|
||||
doesCopyContainRouterLink: jest.fn(),
|
||||
getStringWithCustomValues: jest.fn(),
|
||||
getStringWithCustomValues: jest.fn((str, customValueMap) => {
|
||||
let newString = str ?? '';
|
||||
if (customValueMap != null) {
|
||||
Object.keys(customValueMap).forEach((key) => {
|
||||
newString = newString.replaceAll(`{custom:${key}}`, customValueMap[key]);
|
||||
});
|
||||
}
|
||||
return newString;
|
||||
}),
|
||||
processIfStatements: jest.fn()
|
||||
}));
|
||||
|
||||
|
|
@ -129,11 +137,7 @@ describe('tpa-submit', () => {
|
|||
|
||||
// Assert
|
||||
expect(subHeader.exists()).toBeTruthy();
|
||||
expect(subHeader.props().justifyText).toBe('center');
|
||||
expect(subHeader.props().marginTopSizeOverride).toBe(4);
|
||||
expect(subHeader.classes()).toContain('text-color--black');
|
||||
expect(subHeader.classes()).toContain('fs-5');
|
||||
expect(subHeader.classes()).toContain('tpa-submit__title--line-height');
|
||||
expect(subHeader.classes()).toContain('tpa-submit-title');
|
||||
});
|
||||
test('sub header body one', () => {
|
||||
// Arrange
|
||||
|
|
@ -144,34 +148,6 @@ describe('tpa-submit', () => {
|
|||
|
||||
// Assert
|
||||
expect(subHeaderBodyOne.exists()).toBeTruthy();
|
||||
expect(subHeaderBodyOne.classes()).toContain('small');
|
||||
expect(subHeaderBodyOne.classes()).toContain('text-color--darker-gray');
|
||||
});
|
||||
test('sub header body two', () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(tpaSubmit, getMountOptions());
|
||||
|
||||
// Act
|
||||
const subHeaderBodyTwo = wrapper.findComponent({ ref: 'tpaSubmitSubHeaderBodyTwo' });
|
||||
|
||||
// Assert
|
||||
expect(subHeaderBodyTwo.exists()).toBeTruthy();
|
||||
expect(subHeaderBodyTwo.classes()).toContain('mb-4');
|
||||
expect(subHeaderBodyTwo.classes()).toContain('small');
|
||||
expect(subHeaderBodyTwo.classes()).toContain('text-color--darker-gray');
|
||||
});
|
||||
test('main button one', () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(tpaSubmit, getMountOptions());
|
||||
|
||||
// Act
|
||||
const mainButton = wrapper.findComponent({ ref: 'buttonMainOne' });
|
||||
|
||||
// Assert
|
||||
expect(mainButton.exists()).toBeTruthy();
|
||||
expect(mainButton.props().variant).toBe('success');
|
||||
expect(mainButton.classes()).toContain('w-100');
|
||||
expect(mainButton.classes()).toContain('mb-5');
|
||||
});
|
||||
test('service summary section', () => {
|
||||
// Arrange
|
||||
|
|
@ -183,21 +159,6 @@ describe('tpa-submit', () => {
|
|||
// Assert
|
||||
expect(serviceSummarySection.exists()).toBeTruthy();
|
||||
});
|
||||
test('service summary title', () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(tpaSubmit, getMountOptions());
|
||||
|
||||
// Act
|
||||
const serviceSummaryTitle = wrapper.findComponent({ ref: 'tpaSubmitServiceSummaryTitle' });
|
||||
|
||||
// Assert
|
||||
expect(serviceSummaryTitle.exists()).toBeTruthy();
|
||||
expect(serviceSummaryTitle.props().marginTopSizeOverride).toBe(4);
|
||||
expect(serviceSummaryTitle.classes()).toContain('fw-bold');
|
||||
expect(serviceSummaryTitle.classes()).toContain('fs-1');
|
||||
expect(serviceSummaryTitle.classes()).toContain('lh-lg');
|
||||
expect(serviceSummaryTitle.classes()).toContain('text-color--black');
|
||||
});
|
||||
describe('review blocks', () => {
|
||||
const title1 = 'Section 1';
|
||||
const title2 = 'Another Section';
|
||||
|
|
@ -253,24 +214,8 @@ describe('tpa-submit', () => {
|
|||
|
||||
// Assert
|
||||
expect(submitOrderDetailsTitle.exists()).toBeTruthy();
|
||||
expect(submitOrderDetailsTitle.props().marginTopSizeOverride).toBe(4);
|
||||
expect(submitOrderDetailsTitle.classes()).toContain('fw-bold');
|
||||
expect(submitOrderDetailsTitle.classes()).toContain('text-color--black');
|
||||
});
|
||||
test('submit order details body', () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(tpaSubmit, getMountOptions());
|
||||
|
||||
// Act
|
||||
const submitOrderDetailsTitle = wrapper.findComponent({ ref: 'tpaSubmitOrderDetailsBody' });
|
||||
|
||||
// Assert
|
||||
expect(submitOrderDetailsTitle.exists()).toBeTruthy();
|
||||
expect(submitOrderDetailsTitle.props().marginTopSizeOverride).toBe(4);
|
||||
expect(submitOrderDetailsTitle.classes()).toContain('mb-4');
|
||||
expect(submitOrderDetailsTitle.classes()).toContain('px-4');
|
||||
expect(submitOrderDetailsTitle.classes()).toContain('small');
|
||||
expect(submitOrderDetailsTitle.classes()).toContain('text-color--darker-gray');
|
||||
expect(submitOrderDetailsTitle.classes()).toContain('order-details-title');
|
||||
});
|
||||
test('deductible box', () => {
|
||||
// Arrange
|
||||
|
|
@ -306,7 +251,7 @@ describe('tpa-submit', () => {
|
|||
});
|
||||
});
|
||||
describe('before route enter', () => {
|
||||
test('produces 4 sections', async () => {
|
||||
test('produces 2 sections', async () => {
|
||||
// Arrange
|
||||
const { wrapper } = getMountedComponent();
|
||||
expect(wrapper.vm.sections.length).toBe(0);
|
||||
|
|
@ -320,65 +265,13 @@ describe('tpa-submit', () => {
|
|||
);
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.sections.length).toBe(4);
|
||||
});
|
||||
test.each([
|
||||
['2004', 'Honda', 'Civic', '2004 Honda Civic'],
|
||||
[null, 'Honda', 'Civic', 'Honda Civic'],
|
||||
['2004', '', 'Civic', '2004 Civic'],
|
||||
['2004', 'Honda', null, '2004 Honda'],
|
||||
['2004', null, undefined, '2004'],
|
||||
[null, null, null, '']
|
||||
])(
|
||||
'when store vehicle has year %p, make %p, and model %p, has line %p',
|
||||
async (year, make, model, line) => {
|
||||
// Arrange
|
||||
const initialStore = {
|
||||
order: {
|
||||
vehicle: { year, make, model }
|
||||
}
|
||||
};
|
||||
const { wrapper } = getMountedComponent(initialStore);
|
||||
const vehicleSectionIndex = 0;
|
||||
const expectedLines = [line];
|
||||
|
||||
// Act
|
||||
await tpaSubmit.beforeRouteEnter.call(
|
||||
wrapper.vm,
|
||||
{ query: { issPage: 'tpa-submit' } },
|
||||
undefined,
|
||||
(c) => c(wrapper.vm)
|
||||
);
|
||||
|
||||
// Assert
|
||||
const vehicleSection = wrapper.vm.sections[vehicleSectionIndex];
|
||||
expect(vehicleSection.lines).toStrictEqual(expectedLines);
|
||||
}
|
||||
);
|
||||
test('damage section lines equal result from getDamageDisplayContent', async () => {
|
||||
// Arrange
|
||||
const { wrapper } = getMountedComponent();
|
||||
const damageSectionIndex = 1;
|
||||
const expectedLines = ['hi', 'potato', 'vehicle 3'];
|
||||
getDamageDisplayContent.mockImplementationOnce(() => expectedLines);
|
||||
|
||||
// Act
|
||||
await tpaSubmit.beforeRouteEnter.call(
|
||||
wrapper.vm,
|
||||
{ query: { issPage: 'tpa-submit' } },
|
||||
undefined,
|
||||
(c) => c(wrapper.vm)
|
||||
);
|
||||
|
||||
// Assert
|
||||
const damageSection = wrapper.vm.sections[damageSectionIndex];
|
||||
expect(damageSection.lines).toEqual(expectedLines);
|
||||
expect(wrapper.vm.sections.length).toBe(2);
|
||||
});
|
||||
describe('preferred shop section', () => {
|
||||
test('has three lines', async () => {
|
||||
test('has two lines', async () => {
|
||||
// Arrange
|
||||
const { wrapper } = getMountedComponent();
|
||||
const preferredShopSectionIndex = 2;
|
||||
const preferredShopSectionIndex = 0;
|
||||
|
||||
// Act
|
||||
await tpaSubmit.beforeRouteEnter.call(
|
||||
|
|
@ -390,15 +283,15 @@ describe('tpa-submit', () => {
|
|||
|
||||
// Assert
|
||||
const preferredShopSection = wrapper.vm.sections[preferredShopSectionIndex];
|
||||
expect(preferredShopSection.lines.length).toBe(3);
|
||||
expect(preferredShopSection.lines.length).toBe(2);
|
||||
});
|
||||
test('first line is value returned from toTitleCase method', async () => {
|
||||
test('title is value returned from toTitleCase method', async () => {
|
||||
// Arrange
|
||||
const initialData = { companyName: 'some value' };
|
||||
const { wrapper } = getMountedComponent({}, initialData);
|
||||
const expectedName = 'some expected name';
|
||||
toTitleCase.mockImplementationOnce(() => expectedName);
|
||||
const preferredShopSectionIndex = 2;
|
||||
const preferredShopSectionIndex = 0;
|
||||
|
||||
// Act
|
||||
await tpaSubmit.beforeRouteEnter.call(
|
||||
|
|
@ -410,9 +303,9 @@ describe('tpa-submit', () => {
|
|||
|
||||
// Assert
|
||||
const preferredShopSection = wrapper.vm.sections[preferredShopSectionIndex];
|
||||
expect(preferredShopSection.lines[0]).toBe(expectedName);
|
||||
expect(preferredShopSection.title).toBe(expectedName);
|
||||
});
|
||||
test('second line is expected and formatAddress called', async () => {
|
||||
test('first line is expected and formatAddress called', async () => {
|
||||
// Arrange
|
||||
const address = {
|
||||
streetAddress: '123 South Ln',
|
||||
|
|
@ -430,7 +323,7 @@ describe('tpa-submit', () => {
|
|||
const { wrapper } = getMountedComponent(initialStore);
|
||||
const line = 'some returned line';
|
||||
formatAddress.mockImplementationOnce(() => line);
|
||||
const preferredShopSectionIndex = 2;
|
||||
const preferredShopSectionIndex = 0;
|
||||
|
||||
// Act
|
||||
await tpaSubmit.beforeRouteEnter.call(
|
||||
|
|
@ -442,7 +335,7 @@ describe('tpa-submit', () => {
|
|||
|
||||
// Assert
|
||||
const preferredShopSection = wrapper.vm.sections[preferredShopSectionIndex];
|
||||
expect(preferredShopSection.lines[1]).toBe(line);
|
||||
expect(preferredShopSection.lines[0]).toBe(line);
|
||||
expect(formatAddress).toHaveBeenCalledTimes(1);
|
||||
expect(formatAddress).toHaveBeenCalledWith(
|
||||
address.streetAddress,
|
||||
|
|
@ -452,7 +345,7 @@ describe('tpa-submit', () => {
|
|||
address.zipCode
|
||||
);
|
||||
});
|
||||
test('third line is expected and toDisplayPhoneNumber called', async () => {
|
||||
test('second line is expected and toDisplayPhoneNumber called', async () => {
|
||||
// Arrange
|
||||
const phoneNumber = '9998887777';
|
||||
const initialStore = {
|
||||
|
|
@ -465,7 +358,7 @@ describe('tpa-submit', () => {
|
|||
const { wrapper } = getMountedComponent(initialStore);
|
||||
const expectedLine = 'returned from to display phone num';
|
||||
toDisplayPhoneNumber.mockImplementationOnce(() => expectedLine);
|
||||
const preferredShopSectionIndex = 2;
|
||||
const preferredShopSectionIndex = 0;
|
||||
|
||||
// Act
|
||||
await tpaSubmit.beforeRouteEnter.call(
|
||||
|
|
@ -477,7 +370,7 @@ describe('tpa-submit', () => {
|
|||
|
||||
// Assert
|
||||
const preferredShopSection = wrapper.vm.sections[preferredShopSectionIndex];
|
||||
expect(preferredShopSection.lines[2]).toBe(expectedLine);
|
||||
expect(preferredShopSection.lines[1]).toBe(expectedLine);
|
||||
expect(toDisplayPhoneNumber).toHaveBeenCalledWith(phoneNumber);
|
||||
});
|
||||
});
|
||||
|
|
@ -487,8 +380,14 @@ describe('tpa-submit', () => {
|
|||
const lastName = 'Eddison';
|
||||
const emailAddress = 'myname@gmail.com';
|
||||
const servicePhone = '0001112222';
|
||||
const providerCompanyName = 'Some Provider LLC';
|
||||
const initialStore = {
|
||||
order: {
|
||||
serviceLocation: {
|
||||
provider: {
|
||||
companyName: providerCompanyName
|
||||
}
|
||||
},
|
||||
contactInfo: {
|
||||
firstName,
|
||||
lastName,
|
||||
|
|
@ -498,11 +397,11 @@ describe('tpa-submit', () => {
|
|||
}
|
||||
};
|
||||
const { wrapper } = getMountedComponent(initialStore);
|
||||
const expectedLine1 = 'Jones Eddison';
|
||||
const expectedLine2 = emailAddress;
|
||||
const expectedLine3 = 'some value returned';
|
||||
toDisplayPhoneNumber.mockImplementation((number) => (number === servicePhone ? expectedLine3 : ''));
|
||||
const contactInfoSectionIndex = 3;
|
||||
const expectedEmail = emailAddress;
|
||||
const expectedPhone = 'some value returned';
|
||||
toDisplayPhoneNumber.mockImplementation((number) => (number === servicePhone ? expectedPhone : ''));
|
||||
const contactInfoSectionIndex = 1;
|
||||
wrapper.vm.getCmsContent.mockImplementation(() => '{custom:contactPhone} or {custom:contactEmail}');
|
||||
|
||||
// Act
|
||||
await tpaSubmit.beforeRouteEnter.call(
|
||||
|
|
@ -511,12 +410,59 @@ describe('tpa-submit', () => {
|
|||
undefined,
|
||||
(c) => c(wrapper.vm)
|
||||
);
|
||||
wrapper.vm.setSections();
|
||||
|
||||
// Assert
|
||||
const contactInfoSection = wrapper.vm.sections[contactInfoSectionIndex];
|
||||
expect(contactInfoSection.lines[0]).toBe(expectedLine1);
|
||||
expect(contactInfoSection.lines[1]).toBe(expectedLine2);
|
||||
expect(contactInfoSection.lines[2]).toBe(expectedLine3);
|
||||
expect(contactInfoSection.lines[0]).toContain(expectedEmail);
|
||||
expect(contactInfoSection.lines[0]).toContain(expectedPhone);
|
||||
expect(toDisplayPhoneNumber).toHaveBeenCalledWith(servicePhone);
|
||||
});
|
||||
test('contact info section has expected content with extension', async () => {
|
||||
// Arrange
|
||||
const firstName = 'Jones';
|
||||
const lastName = 'Eddison';
|
||||
const emailAddress = 'myname@gmail.com';
|
||||
const servicePhone = '0001112222';
|
||||
const extension = '12345';
|
||||
const providerCompanyName = 'Some Provider LLC';
|
||||
const initialStore = {
|
||||
order: {
|
||||
serviceLocation: {
|
||||
provider: {
|
||||
companyName: providerCompanyName
|
||||
}
|
||||
},
|
||||
contactInfo: {
|
||||
firstName,
|
||||
lastName,
|
||||
emailAddress,
|
||||
servicePhone,
|
||||
extension
|
||||
}
|
||||
}
|
||||
};
|
||||
const { wrapper } = getMountedComponent(initialStore);
|
||||
const expectedEmail = emailAddress;
|
||||
const expectedPhone = 'some value returned';
|
||||
toDisplayPhoneNumber.mockImplementation((number) => (number === servicePhone ? expectedPhone : ''));
|
||||
const contactInfoSectionIndex = 1;
|
||||
wrapper.vm.getCmsContent.mockImplementation(() => '{custom:contactPhone} or {custom:contactEmail}');
|
||||
|
||||
// Act
|
||||
await tpaSubmit.beforeRouteEnter.call(
|
||||
wrapper.vm,
|
||||
{ query: { issPage: 'tpa-submit' } },
|
||||
undefined,
|
||||
(c) => c(wrapper.vm)
|
||||
);
|
||||
wrapper.vm.setSections();
|
||||
|
||||
// Assert
|
||||
const contactInfoSection = wrapper.vm.sections[contactInfoSectionIndex];
|
||||
expect(contactInfoSection.lines[0]).toContain(expectedEmail);
|
||||
expect(contactInfoSection.lines[0]).toContain(expectedPhone);
|
||||
expect(contactInfoSection.lines[0]).toContain(`Ext. ${extension}`);
|
||||
expect(toDisplayPhoneNumber).toHaveBeenCalledWith(servicePhone);
|
||||
});
|
||||
});
|
||||
|
|
@ -524,7 +470,6 @@ describe('tpa-submit', () => {
|
|||
test.each([
|
||||
['subHeaderTitle', 'SiteSubHeaderWidget', widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT, 'site sub header'],
|
||||
['subHeaderBodyOne', 'SiteSubHeaderWidget', widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT, 'sub header body one'],
|
||||
['serviceSummaryText', 'ServiceSummaryContent', widgetFields.TEXT_BLOCK_WIDGET.TEXT, 'service summary text'],
|
||||
['orderDetailsTitle', 'OrderDetailsContent', widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT, 'order details title'],
|
||||
['forwardButtonText', 'SiteFooterWidget', widgetFields.FOOTER_WIDGET.FORWARD_BUTTON_TEXT, 'forward button text']
|
||||
])('computed %p returns expected value', (computedName, widgetLabel, fieldLabel, expected) => {
|
||||
|
|
|
|||
|
|
@ -13,53 +13,52 @@
|
|||
</div>
|
||||
<div class="iss-heritage-container-width">
|
||||
<div class="tpa-submit-container iss-heritage-content-container-width">
|
||||
<!-- TODO fix styling -->
|
||||
<alert
|
||||
ref="alertIncomplete"
|
||||
alertClass="alert-warning"
|
||||
:cmsWidgetName="widget.alertIncomplete"
|
||||
/>
|
||||
<textBlock
|
||||
ref="subHeaderTitle"
|
||||
:customText="subHeaderTitle"
|
||||
justifyText="center"
|
||||
:marginTopSizeOverride="4"
|
||||
class="text-color--black fs-5 tpa-submit__title--line-height" />
|
||||
class="tpa-submit-title"/>
|
||||
<textBlock
|
||||
id="tpaSubmitSubHeaderBodyOne"
|
||||
ref="tpaSubmitSubHeaderBodyOne"
|
||||
:customText="subHeaderBodyOne"
|
||||
class="small text-color--darker-gray" />
|
||||
<textBlock
|
||||
id="tpaSubmitSubHeaderBodyTwo"
|
||||
ref="tpaSubmitSubHeaderBodyTwo"
|
||||
:customText="subHeaderBodyTwo"
|
||||
class="mb-4 small text-color--darker-gray" />
|
||||
<buttonMain
|
||||
ref="buttonMainOne"
|
||||
variant="success"
|
||||
:buttonText="forwardButtonText"
|
||||
class="w-100 mb-5"
|
||||
@clickEvent="forwardButtonAction" />
|
||||
<hr class="mb-0" />
|
||||
:customText="subHeaderBodyOne" />
|
||||
<alert
|
||||
v-if="recalibrationRequired"
|
||||
ref="alertRecalWarning"
|
||||
alertClass="alert-warning recal-alert"
|
||||
:isCollapsible="true"
|
||||
:cmsWidgetName="widget.alertRecalWarning"
|
||||
@textLinkClicked="openRecalModal" />
|
||||
<modal
|
||||
ref="recalModal"
|
||||
class="recal-modal"
|
||||
:modalPosition="modalPositions.center"
|
||||
: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>
|
||||
</modal>
|
||||
<hr />
|
||||
<div id="serviceSummarySection">
|
||||
<textBlock
|
||||
id="tpaSubmitServiceSummaryTitle"
|
||||
ref="tpaSubmitServiceSummaryTitle"
|
||||
:customText="serviceSummaryText"
|
||||
:marginTopSizeOverride="4"
|
||||
class="fw-bold fs-1 lh-lg text-color--black" />
|
||||
<div class="px-4 my-3">
|
||||
<div
|
||||
v-for="(section, index) in sections"
|
||||
:key="section.title">
|
||||
<hr
|
||||
v-if="index !== 0"
|
||||
class="my-3" />
|
||||
<reviewBlock
|
||||
:id="'review-block-' + index"
|
||||
:customHeaderText="section.title"
|
||||
:lines="section.lines"
|
||||
@clickEdit="() => section.onClickEdit()" />
|
||||
</div>
|
||||
<div
|
||||
v-for="(section, index) in sections"
|
||||
:key="section.title">
|
||||
<hr v-if="index !== 0" />
|
||||
<reviewBlock
|
||||
:id="'review-block-' + index"
|
||||
:customHeaderText="section.title"
|
||||
:lines="section.lines"
|
||||
:editLinkText="section.editLinkText"
|
||||
@clickEdit="() => section.onClickEdit()" />
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mb-0" />
|
||||
<hr />
|
||||
<div
|
||||
id="submitOrderDetailsSection"
|
||||
ref="submitOrderDetailsSection">
|
||||
|
|
@ -67,17 +66,10 @@
|
|||
id="tpaSubmitOrderDetailsTitle"
|
||||
ref="tpaSubmitOrderDetailsTitle"
|
||||
:customText="orderDetailsTitle"
|
||||
:marginTopSizeOverride="4"
|
||||
class="fw-bold text-color--black" />
|
||||
<textBlock
|
||||
id="tpaSubmitOrderDetailsBody"
|
||||
ref="tpaSubmitOrderDetailsBody"
|
||||
:customText="orderDetailsBody"
|
||||
:marginTopSizeOverride="4"
|
||||
class="mb-4 px-4 small text-color--darker-gray" />
|
||||
:marginTopSizeOverride="0"
|
||||
class="fw-bold order-details-title" />
|
||||
<deductibleBox
|
||||
ref="deductibleBox"
|
||||
class="px-3"
|
||||
:value="deductibleBoxValue" />
|
||||
</div>
|
||||
<siteFooter
|
||||
|
|
@ -104,6 +96,8 @@ import reviewBlock from '@/layouts/tpa-submit/review-block/review-block.vue';
|
|||
import deductibleBox from '@/layouts/tpa-submit/deductible-box/deductible-box.vue';
|
||||
import contactDetailsDrawer from '@/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue';
|
||||
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
|
||||
import alert from '@/ux-components/alert/alert.vue';
|
||||
import modal from '@/digital-components/modal/modal.vue';
|
||||
|
||||
// Supporting files
|
||||
import {
|
||||
|
|
@ -114,21 +108,16 @@ import {
|
|||
import { Form } from 'vee-validate';
|
||||
import BaseFormMixin from '@/mixins/base-form-mixin.js';
|
||||
import widgetFields from '@/constants/cms-widget-fields.js';
|
||||
import { useMainStore } from '@/store';
|
||||
import {
|
||||
toTitleCase,
|
||||
toDisplayPhoneNumber,
|
||||
formatAddress,
|
||||
formatAmountInDollars
|
||||
} from '@/helpers/text-helper.js';
|
||||
import {
|
||||
getDamageDisplayContent,
|
||||
getLocationAnswer
|
||||
} from '@/helpers/damage-review-content-generator.js';
|
||||
import damageLocationsSelected from '@/constants/damage-locations-selected.js';
|
||||
import { submitWorkOrder } from '@/helpers/order-helper.js';
|
||||
import bailoutMessage from '@/constants/bailoutMessage';
|
||||
import submitType from '@/constants/submit-type';
|
||||
import { modalPositions } from '@/constants/component-variants';
|
||||
|
||||
const VERIFYING_COVERAGE = 'Verifying coverage';
|
||||
|
||||
|
|
@ -143,7 +132,9 @@ export default {
|
|||
siteFooter,
|
||||
contactDetailsDrawer,
|
||||
// eslint-disable-next-line vue/no-reserved-component-names
|
||||
Form
|
||||
Form,
|
||||
alert,
|
||||
modal
|
||||
},
|
||||
mixins: [BaseFormMixin],
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
|
|
@ -154,27 +145,19 @@ export default {
|
|||
});
|
||||
},
|
||||
data() {
|
||||
const { companyName } = useMainStore().order.serviceLocation.provider;
|
||||
return {
|
||||
sections: [],
|
||||
widget: {
|
||||
siteHeader: 'SiteHeaderWidget',
|
||||
siteSubHeader: 'SiteSubHeaderWidget',
|
||||
serviceSummary: 'ServiceSummaryContent',
|
||||
subheader: {
|
||||
vehicle: 'VehicleSubTitle',
|
||||
damage: 'DamageSubTitle',
|
||||
shop: 'PreferredShopSubTitle',
|
||||
contactInfo: 'ContactDetailsSubTitle'
|
||||
},
|
||||
damageLocations: 'DamageLocationsWidget',
|
||||
orderDetails: 'OrderDetailsContent',
|
||||
footer: 'SiteFooterWidget'
|
||||
footer: 'SiteFooterWidget',
|
||||
alertIncomplete: 'AlertIncompleteWidget',
|
||||
alertRecalWarning: 'AlertRecalWarningWidget',
|
||||
editShopLinkText: 'EditShopLinkTextWidget',
|
||||
contactDetails: 'ContactDetailsSectionWidget'
|
||||
},
|
||||
companyName,
|
||||
customValueMap: {
|
||||
glassShop: companyName
|
||||
}
|
||||
modalPositions
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -197,12 +180,6 @@ export default {
|
|||
);
|
||||
return getStringWithCustomValues(cmsContent, this.customValueMap);
|
||||
},
|
||||
serviceSummaryText() {
|
||||
return this.getCmsContent(
|
||||
this.widget.serviceSummary,
|
||||
widgetFields.TEXT_BLOCK_WIDGET.TEXT
|
||||
);
|
||||
},
|
||||
orderDetailsTitle() {
|
||||
return this.getCmsContent(
|
||||
this.widget.orderDetails,
|
||||
|
|
@ -227,53 +204,21 @@ export default {
|
|||
);
|
||||
},
|
||||
isVerified() {
|
||||
return useMainStore().isVerified;
|
||||
return this.mainStore.isVerified;
|
||||
},
|
||||
currentDeductible() {
|
||||
return useMainStore().order.currentDeductible;
|
||||
return this.mainStore.order.currentDeductible;
|
||||
},
|
||||
deductibleBoxValue() {
|
||||
return this.isVerified
|
||||
? formatAmountInDollars(this.currentDeductible)
|
||||
: VERIFYING_COVERAGE;
|
||||
},
|
||||
getVehicleLines() {
|
||||
const { year, make, model } = useMainStore().order.vehicle;
|
||||
const line = [year, make, model]
|
||||
.filter((v) => v != null && v !== '')
|
||||
.join(' ');
|
||||
return [line];
|
||||
},
|
||||
locationAnswers() {
|
||||
return this.getInputQuestionWidgetAnswersNullSafe(this.widget.damageLocations);
|
||||
},
|
||||
driverSideDamageAnswers() {
|
||||
const answerContent = getLocationAnswer(
|
||||
damageLocationsSelected.DRIVER,
|
||||
this.locationAnswers
|
||||
);
|
||||
return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName);
|
||||
},
|
||||
passengerSideDamageAnswers() {
|
||||
const answerContent = getLocationAnswer(
|
||||
damageLocationsSelected.PASSENGER,
|
||||
this.locationAnswers
|
||||
);
|
||||
return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName);
|
||||
},
|
||||
getDamageLines() {
|
||||
const { glassToReplace, isRepair } = useMainStore().order.damage;
|
||||
return getDamageDisplayContent(
|
||||
this.locationAnswers,
|
||||
this.driverSideDamageAnswers,
|
||||
this.passengerSideDamageAnswers,
|
||||
glassToReplace,
|
||||
isRepair
|
||||
);
|
||||
getPreferredShopTitle() {
|
||||
return toTitleCase(this.mainStore.order.serviceLocation.provider.companyName ?? '');
|
||||
},
|
||||
getPreferredShopLines() {
|
||||
const { phoneNumber, address } =
|
||||
useMainStore().order.serviceLocation.provider;
|
||||
const { phoneNumber, address } = this.mainStore.order.serviceLocation.provider;
|
||||
const { streetAddress, city, state, zipCode } = address;
|
||||
const displayAddress = formatAddress(
|
||||
streetAddress,
|
||||
|
|
@ -284,58 +229,86 @@ export default {
|
|||
);
|
||||
const displayPhoneNumber = toDisplayPhoneNumber(phoneNumber);
|
||||
return [
|
||||
toTitleCase(this.companyName ?? ''),
|
||||
displayAddress,
|
||||
displayPhoneNumber
|
||||
];
|
||||
},
|
||||
getEditShopLinkText() {
|
||||
return this.getCmsContent(
|
||||
this.widget.editShopLinkText,
|
||||
widgetFields.TEXT_BLOCK_WIDGET.TEXT
|
||||
);
|
||||
},
|
||||
getContactInfoTitle() {
|
||||
const cmsContent = this.getCmsContent(
|
||||
this.widget.contactDetails,
|
||||
widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT
|
||||
);
|
||||
return getStringWithCustomValues(cmsContent, this.customValueMap);
|
||||
},
|
||||
getContactInfoLines() {
|
||||
const { firstName, lastName, emailAddress, servicePhone } =
|
||||
useMainStore().contactInfo;
|
||||
const cmsContent = this.getCmsContent(
|
||||
this.widget.contactDetails,
|
||||
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
|
||||
);
|
||||
return [
|
||||
`${firstName} ${lastName}`,
|
||||
emailAddress ?? '',
|
||||
toDisplayPhoneNumber(servicePhone)
|
||||
getStringWithCustomValues(cmsContent, this.customValueMap)
|
||||
];
|
||||
},
|
||||
getEditContactInfoLinkText() {
|
||||
return this.getCmsContent(
|
||||
this.widget.contactDetails,
|
||||
widgetFields.CONTENT_GROUP_WIDGET.FOOTER_TEXT
|
||||
);
|
||||
},
|
||||
recalModalContent() {
|
||||
const widgetName = 'RecalModal';
|
||||
return {
|
||||
headerText: this.getCmsContent(widgetName, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT),
|
||||
subHeaderText: this.getCmsContent(widgetName, widgetFields.CONTENT_GROUP_WIDGET.SUBHEADER_TEXT),
|
||||
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;
|
||||
},
|
||||
customValueMap() {
|
||||
let contactPhone = toDisplayPhoneNumber(this.mainStore.contactInfo.servicePhone);
|
||||
if (this.mainStore.contactInfo.extension) {
|
||||
contactPhone += ` Ext. ${this.mainStore.contactInfo.extension}`;
|
||||
}
|
||||
return {
|
||||
glassShop: this.getPreferredShopTitle,
|
||||
contactPhone: contactPhone,
|
||||
contactEmail: this.mainStore.contactInfo.emailAddress ?? ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setSections() {
|
||||
const vehicleScenario = useMainStore().isPolicyVehicle
|
||||
? this.navigationScenarios.EDIT_POLICY_VEHICLE
|
||||
: this.navigationScenarios.EDIT_VEHICLE;
|
||||
this.sections = [
|
||||
this.getSection(
|
||||
this.widget.subheader.vehicle,
|
||||
this.getVehicleLines,
|
||||
() => this.navigate(vehicleScenario)
|
||||
),
|
||||
// eslint-disable-next-line max-len
|
||||
this.getSection(
|
||||
this.widget.subheader.damage,
|
||||
this.getDamageLines,
|
||||
() => this.navigate(this.navigationScenarios.EDIT_DAMAGE)
|
||||
),
|
||||
this.getSection(
|
||||
this.widget.subheader.shop,
|
||||
this.getPreferredShopTitle,
|
||||
this.getPreferredShopLines,
|
||||
() => this.navigate(this.navigationScenarios.EDIT_PREFERRED_SHOP)
|
||||
this.getEditShopLinkText,
|
||||
() => this.navigate(this.navigationScenarios.EDIT_PREFERRED_SHOP),
|
||||
),
|
||||
// eslint-disable-next-line max-len
|
||||
this.getSection(
|
||||
this.widget.subheader.contactInfo,
|
||||
this.getContactInfoTitle,
|
||||
this.getContactInfoLines,
|
||||
this.getEditContactInfoLinkText,
|
||||
this.openContactDetailsModal
|
||||
)
|
||||
];
|
||||
},
|
||||
getSection(widgetName, lines, onClick) {
|
||||
getSection(title, lines, editLinkText, onClick) {
|
||||
return {
|
||||
title: this.getCmsContent(
|
||||
widgetName,
|
||||
widgetFields.TEXT_BLOCK_WIDGET.TEXT
|
||||
),
|
||||
title: title,
|
||||
lines,
|
||||
editLinkText,
|
||||
onClickEdit: onClick
|
||||
};
|
||||
},
|
||||
|
|
@ -344,7 +317,7 @@ export default {
|
|||
await submitWorkOrder({ submitType: submitType.TPA }).then(() => {
|
||||
this.navigate(this.navigationScenarios.CLICKED_FORWARD);
|
||||
}).catch((submitError) => {
|
||||
useMainStore().setBailout(bailoutMessage.saveSessionError(submitError.data));
|
||||
this.mainStore.setBailout(bailoutMessage.saveSessionError(submitError.data));
|
||||
this.navigate(
|
||||
this.navigationScenarios.SAVE_SESSION_FAILED,
|
||||
this.$route,
|
||||
|
|
@ -372,6 +345,12 @@ export default {
|
|||
},
|
||||
openContactDetailsModal() {
|
||||
this.$refs.contactDetailsDrawer.openModal();
|
||||
},
|
||||
openRecalModal() {
|
||||
this.$refs.recalModal.openModal();
|
||||
},
|
||||
closeRecalModal() {
|
||||
this.$refs.recalModal.closeModal();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -387,26 +366,69 @@ export default {
|
|||
}
|
||||
|
||||
.tpa-submit {
|
||||
#tpaSubmitOrderDetailsBody {
|
||||
p {
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
.tpa-submit__title--line-height {
|
||||
line-height: map-get($spacers, 6);
|
||||
.alert-warning {
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.text-color--darker-gray {
|
||||
color: $darker-gray;
|
||||
.tpa-submit-title {
|
||||
font-size: 1.25rem;
|
||||
color: $black;
|
||||
font-weight: 400;
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: .625rem;
|
||||
}
|
||||
|
||||
.text-color--black {
|
||||
.recal-alert {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
b {
|
||||
font-weight: $font-weight-bold;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
hr {
|
||||
opacity: 1;
|
||||
color: $gray-350;
|
||||
margin: 1.875rem 0rem;
|
||||
}
|
||||
|
||||
.fw-bold {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.order-details-title {
|
||||
margin-bottom: .625rem;
|
||||
}
|
||||
|
||||
.modal.recal-modal .modal-dialog {
|
||||
.modal-header {
|
||||
justify-content: start;
|
||||
margin: 0rem;
|
||||
padding: 1.25rem 1.25rem .625rem 1.25rem;
|
||||
.modal-title {
|
||||
font-weight: $font-weight-bolder;
|
||||
font-size: .875rem;
|
||||
line-height: 1.25rem;
|
||||
text-align: start;
|
||||
justify-content: start;
|
||||
}
|
||||
.btn-close {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.modal-body {
|
||||
padding: 0rem 1.25rem 1.25rem 1.25rem;
|
||||
b {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.recal-modal-subheader {
|
||||
font-weight: $font-weight-bold;
|
||||
color: $black;
|
||||
}
|
||||
.recal-modal-image {
|
||||
margin: 1.25rem 0rem
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -197,6 +197,7 @@ export const getDefaultState = () => ({
|
|||
homePhone: null,
|
||||
alternativePhone: null,
|
||||
servicePhone: null,
|
||||
extension: null,
|
||||
requestTextUpdates: false,
|
||||
notesForTechnician: ''
|
||||
},
|
||||
|
|
@ -354,6 +355,7 @@ export const useMainStore = defineStore({
|
|||
homePhone: s.order.contactInfo.homePhone,
|
||||
alternativePhone: s.order.contactInfo.alternativePhone,
|
||||
servicePhone: s.order.contactInfo.servicePhone,
|
||||
extension: s.order.contactInfo.extension,
|
||||
requestTextUpdates: s.order.contactInfo.requestTextUpdates ?? false,
|
||||
notesForTechnician: s.order.contactInfo.notesForTechnician
|
||||
}),
|
||||
|
|
@ -1455,7 +1457,7 @@ export const useMainStore = defineStore({
|
|||
emailAddress: contactInfo.emailAddress || customer.emailAddress,
|
||||
firstName: contactInfo.firstName || customer.firstName,
|
||||
lastName: contactInfo.lastName || customer.lastName,
|
||||
homePhone: contactInfo.homePhone,
|
||||
homePhone: contactInfo.extension && contactInfo.homePhone ? contactInfo.homePhone + contactInfo.extension : contactInfo.homePhone,
|
||||
servicePhone: contactInfo.servicePhone,
|
||||
alternativePhone: contactInfo.alternativePhone,
|
||||
isSmsOptIn: contactInfo.requestTextUpdates ?? false
|
||||
|
|
@ -1589,7 +1591,8 @@ export const useMainStore = defineStore({
|
|||
order.contactInfo.firstName = data?.customer?.firstName;
|
||||
order.contactInfo.lastName = data?.customer?.lastName;
|
||||
order.contactInfo.emailAddress = data?.customer?.emailAddress;
|
||||
order.contactInfo.homePhone = data?.customer?.homePhone;
|
||||
order.contactInfo.extension = data?.customer?.homePhone?.slice(10);
|
||||
order.contactInfo.homePhone = data?.customer?.homePhone?.slice(0, 10);
|
||||
order.contactInfo.servicePhone = data?.customer?.servicePhone;
|
||||
order.contactInfo.alternativePhone = data?.customer?.alternativePhone;
|
||||
order.contactInfo.requestTextUpdates = data?.customer?.isSmsOptIn;
|
||||
|
|
@ -1657,7 +1660,8 @@ export const useMainStore = defineStore({
|
|||
order.contactInfo.firstName = data?.customer?.firstName;
|
||||
order.contactInfo.lastName = data?.customer?.lastName;
|
||||
order.contactInfo.emailAddress = data?.customer?.emailAddress;
|
||||
order.contactInfo.homePhone = data?.customer?.homePhone;
|
||||
order.contactInfo.extension = data?.customer?.homePhone?.slice(10);
|
||||
order.contactInfo.homePhone = data?.customer?.homePhone?.slice(0, 10);
|
||||
order.contactInfo.servicePhone = data?.customer?.servicePhone;
|
||||
order.contactInfo.alternativePhone = data?.customer?.alternativePhone;
|
||||
order.contactInfo.requestTextUpdates = data?.customer?.isSmsOptIn;
|
||||
|
|
@ -2095,6 +2099,7 @@ export const useMainStore = defineStore({
|
|||
this.order.contactInfo.homePhone = null;
|
||||
this.order.contactInfo.alternativePhone = null;
|
||||
this.order.contactInfo.servicePhone = null;
|
||||
this.order.contactInfo.extension = null;
|
||||
this.order.contactInfo.requestTextUpdates = false;
|
||||
this.order.contactInfo.notesForTechnician = '';
|
||||
},
|
||||
|
|
@ -2576,6 +2581,7 @@ export const useMainStore = defineStore({
|
|||
contact.homePhone = phoneNumbers.home !== undefined ? phoneNumbers.home : contact.homePhone;
|
||||
contact.alternativePhone = phoneNumbers.alternative !== undefined ? phoneNumbers.alternative : contact.alternativePhone;
|
||||
contact.servicePhone = phoneNumbers.service !== undefined ? phoneNumbers.service : contact.servicePhone;
|
||||
contact.extension = phoneNumbers.extension !== undefined ? phoneNumbers.extension : contact.extension;
|
||||
},
|
||||
|
||||
GetExperimentsByUser(userId) {
|
||||
|
|
|
|||
|
|
@ -494,18 +494,21 @@ describe('Store', () => {
|
|||
const homePhone = getRandomInt(1000000000, 9999999999);
|
||||
const servicePhone = getRandomInt(1000000000, 9999999999);
|
||||
const altPhone = getRandomInt(1000000000, 9999999999);
|
||||
const extension = getRandomInt(10000, 99999);
|
||||
|
||||
// Act
|
||||
store.updatePhoneNumbers({
|
||||
home: homePhone,
|
||||
service: servicePhone,
|
||||
alternative: altPhone
|
||||
alternative: altPhone,
|
||||
extension: extension
|
||||
});
|
||||
|
||||
// Assert
|
||||
expect(store.contactInfo.homePhone).toEqual(homePhone);
|
||||
expect(store.contactInfo.servicePhone).toEqual(servicePhone);
|
||||
expect(store.contactInfo.alternativePhone).toEqual(altPhone);
|
||||
expect(store.contactInfo.extension).toEqual(extension);
|
||||
});
|
||||
it('All null values => contact info set in store to all nulls', () => {
|
||||
// Act
|
||||
|
|
|
|||
|
|
@ -226,6 +226,7 @@ export default {
|
|||
padding: 0rem .625rem;
|
||||
}
|
||||
.btn-collapse {
|
||||
display: flex;
|
||||
border: none;
|
||||
background: none;
|
||||
min-width: 1rem;
|
||||
|
|
@ -242,7 +243,7 @@ export default {
|
|||
}
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
border-color: transparent;
|
||||
.btn-close {
|
||||
|
|
|
|||
Loading…
Reference in a new issue