Merge branch 'develop' into feature/SSR-703
This commit is contained in:
Katie Kroell
commit
4e9b71e045
20 changed files with 1559 additions and 76 deletions
|
|
@ -265,7 +265,7 @@ input[type='date']::-webkit-calendar-picker-indicator {
|
|||
}
|
||||
span {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
font-size: 0.875rem;
|
||||
color: #4d5151;
|
||||
}
|
||||
.form-test-error span {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,23 @@
|
|||
import dynamicStrings from '@/constants/dynamic-strings';
|
||||
import { useMainStore } from '@/store';
|
||||
|
||||
/**
|
||||
* @function getStringWithCustomValues
|
||||
* @summary Returns str with all custom values replaced in accordance with the provided customValueMap
|
||||
* @param {string} str
|
||||
* @param {Dictionary} customValueMap
|
||||
* @returns {string}
|
||||
*/
|
||||
export function getStringWithCustomValues(str, customValueMap) {
|
||||
let newString = str ?? '';
|
||||
if (customValueMap != null) {
|
||||
Object.keys(customValueMap).forEach((key) => {
|
||||
newString = newString.replaceAll(`{custom:${key}}`, customValueMap[key]);
|
||||
});
|
||||
}
|
||||
return newString;
|
||||
}
|
||||
|
||||
// This function will process the widget item and replace any global state variables with their values.
|
||||
// This is a recursive function, it will call itself until it runs out of items to iterate on given the object.
|
||||
/**
|
||||
|
|
|
|||
18
src/helpers/cms-content-helper.spec.js
Normal file
18
src/helpers/cms-content-helper.spec.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import { getStringWithCustomValues } from '@/helpers/cms-content-helper.js';
|
||||
|
||||
describe('getStringWithCustomValues', () => {
|
||||
test.each([
|
||||
['Hello, {custom:name}!', { name: 'John' }, 'Hello, John!'],
|
||||
['{custom:greeting}, {custom:name}!', { greeting: 'Hi', name: 'John' }, 'Hi, John!'],
|
||||
['{custom:greeting}, {custom:name}!', { greeting: 'Hi' }, 'Hi, {custom:name}!'],
|
||||
['Hello, {custom:name}!', {}, 'Hello, {custom:name}!'],
|
||||
['Hello, world!', { name: 'John' }, 'Hello, world!'],
|
||||
['', { name: 'John' }, ''],
|
||||
['Hello, {custom:name}!', null, 'Hello, {custom:name}!'],
|
||||
['Hello, {custom:name}!', undefined, 'Hello, {custom:name}!'],
|
||||
[null, { name: 'John' }, ''],
|
||||
[undefined, { name: 'John' }, '']
|
||||
])('getStringWithCustomValues(%s, %o) should return %s', (str, customValueMap, expected) => {
|
||||
expect(getStringWithCustomValues(str, customValueMap)).toBe(expected);
|
||||
});
|
||||
});
|
||||
|
|
@ -44,3 +44,56 @@ export function toDisplayPhoneNumber(phoneNumber) {
|
|||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* @function formatAddress
|
||||
* @summary given address fields, returns a string representation of said address
|
||||
* @param {string} addressLine1
|
||||
* @param {string} addressLine2
|
||||
* @param {string} city
|
||||
* @param {string} state
|
||||
* @param {string} zipCode
|
||||
* @returns {string}
|
||||
*/
|
||||
export function formatAddress(addressLine1, addressLine2, city, state, zipCode) {
|
||||
let address = '';
|
||||
|
||||
if (addressLine1) {
|
||||
address += addressLine1;
|
||||
}
|
||||
|
||||
if (addressLine2) {
|
||||
address += address ? `, ${addressLine2}` : addressLine2;
|
||||
}
|
||||
|
||||
if (city) {
|
||||
address += address ? `, ${city}` : city;
|
||||
}
|
||||
address = toTitleCase(address);
|
||||
|
||||
if (state) {
|
||||
address += address ? `, ${state}` : state;
|
||||
}
|
||||
|
||||
if (zipCode) {
|
||||
address += address ? ` ${zipCode}` : zipCode;
|
||||
}
|
||||
|
||||
return address;
|
||||
}
|
||||
|
||||
/**
|
||||
* @function formatAmountInDollars
|
||||
* @param {string, number} amount
|
||||
* @returns {string}
|
||||
*/
|
||||
export function formatAmountInDollars(amount) {
|
||||
const numericAmount = typeof amount === 'string' ? parseFloat(amount) : amount;
|
||||
|
||||
if (Number.isNaN(numericAmount) || amount === null || amount === undefined) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const roundedAmount = numericAmount.toFixed(2);
|
||||
return `$${roundedAmount}`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { toTitleCase, toDisplayPhoneNumber } from '@/helpers/text-helper.js';
|
||||
import { toTitleCase, toDisplayPhoneNumber, formatAddress, formatAmountInDollars } from '@/helpers/text-helper.js';
|
||||
|
||||
describe('text-helper', () => {
|
||||
test.each([
|
||||
|
|
@ -39,4 +39,33 @@ describe('text-helper', () => {
|
|||
expect(result).toEqual(expected);
|
||||
}
|
||||
);
|
||||
test.each([
|
||||
[null, null, null, null, null, ''],
|
||||
['123 Main St', null, null, null, null, '123 Main St'],
|
||||
['123 main st', 'Apt 4B', null, null, null, '123 Main St, Apt 4b'],
|
||||
['123 Main St', 'apt 4B', 'Anytown', null, null, '123 Main St, Apt 4b, Anytown'],
|
||||
['123 Main St', 'Apt 4B', 'Anytown', 'ny', null, '123 Main St, Apt 4b, Anytown, ny'],
|
||||
['123 Main St', 'Apt 4B', 'AnYtoWn', 'NY', '12345', '123 Main St, Apt 4b, Anytown, NY 12345']
|
||||
])('formatAddress(%s, %s, %s, %s, %s) should return %s', (addressLine1, addressLine2, city, state, zipCode, expected) => {
|
||||
expect(formatAddress(addressLine1, addressLine2, city, state, zipCode)).toBe(expected);
|
||||
});
|
||||
test.each([
|
||||
[1234.5678, '$1234.57'],
|
||||
['1234.5678', '$1234.57'],
|
||||
[1234.56, '$1234.56'],
|
||||
['1234.56', '$1234.56'],
|
||||
[1234.5, '$1234.50'],
|
||||
['1234.5', '$1234.50'],
|
||||
[1234, '$1234.00'],
|
||||
['1234', '$1234.00'],
|
||||
[0, '$0.00'],
|
||||
['0', '$0.00'],
|
||||
[NaN, ''],
|
||||
['NaN', ''],
|
||||
[null, ''],
|
||||
['', ''],
|
||||
['abc', '']
|
||||
])('formatAmountInDollars(%s) should return %s', (amount, expected) => {
|
||||
expect(formatAmountInDollars(amount)).toBe(expected);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
|
|||
import textBlock from '@/digital-components/text-block/text-block.vue';
|
||||
|
||||
// Import Supporting Files
|
||||
import { fetchCmsContentForPage, setupModalLinks, setupModalLink, processIfStatements } from '@/helpers/cms-content-helper.js';
|
||||
import { fetchCmsContentForPage, setupModalLinks, processIfStatements } from '@/helpers/cms-content-helper.js';
|
||||
import settleAllPromises from '@/helpers/layout-helper.js';
|
||||
import { getDamageString } from '@/helpers/damage-helper.js';
|
||||
import { useMainStore } from '@/store/index.js';
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ describe('TPA search page', () => {
|
|||
expect(searchQuestionLabel.classes()).toContain('mb-0');
|
||||
expect(searchQuestionLabel.classes()).toContain('text-black');
|
||||
expect(searchQuestionLabel.classes()).toContain('w-100');
|
||||
expect(searchQuestionLabel.classes()).toContain('search-question');
|
||||
expect(searchQuestionLabel.classes()).toContain('fs-5');
|
||||
});
|
||||
test('search instructions', () => {
|
||||
// Arrange
|
||||
|
|
@ -277,7 +277,8 @@ describe('TPA search page', () => {
|
|||
// Assert
|
||||
expect(preferredShopNotListedLink.exists()).toBeTruthy();
|
||||
expect(preferredShopNotListedLink.props().linkType).toBe('navigation');
|
||||
expect(preferredShopNotListedLink.props().href).toBe('#!');
|
||||
// eslint-disable-next-line no-script-url
|
||||
expect(preferredShopNotListedLink.props().href).toBe('javascript:void(0)');
|
||||
});
|
||||
test('site footer', () => {
|
||||
// Arrange
|
||||
|
|
@ -843,6 +844,108 @@ describe('TPA search page', () => {
|
|||
expect(wrapper.vm.selectedProviderNumber).toBe('');
|
||||
});
|
||||
});
|
||||
describe('selectedProviderNumber', () => {
|
||||
describe('does not call updateServiceLocation when', () => {
|
||||
test('providers list is null ', () => {
|
||||
// Arrange
|
||||
const { wrapper } = getMountedComponent({}, {
|
||||
providers: null
|
||||
});
|
||||
const newProviderNumber = 11235;
|
||||
|
||||
// Act
|
||||
wrapper.vm.$options.watch.selectedProviderNumber.call(wrapper.vm, newProviderNumber);
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.mainStore.updateServiceLocation).not.toHaveBeenCalled();
|
||||
});
|
||||
test('providers list is empty ', () => {
|
||||
// Arrange
|
||||
const { wrapper } = getMountedComponent({}, {
|
||||
providers: []
|
||||
});
|
||||
const newProviderNumber = 11235;
|
||||
|
||||
// Act
|
||||
wrapper.vm.$options.watch.selectedProviderNumber.call(wrapper.vm, newProviderNumber);
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.mainStore.updateServiceLocation).not.toHaveBeenCalled();
|
||||
});
|
||||
test('providers list does not contain match for provider number ', () => {
|
||||
// Arrange
|
||||
const { wrapper } = getMountedComponent({}, {
|
||||
providers: [{
|
||||
providerNumber: 8374,
|
||||
address: {
|
||||
streetAddress: '143 Average Lane',
|
||||
city: 'Cambridge',
|
||||
state: 'OH',
|
||||
zipCode: '72983',
|
||||
zipCodeCtu: '0390'
|
||||
},
|
||||
companyName: "Sally's Auto",
|
||||
phoneNumber: '1234567890'
|
||||
}]
|
||||
});
|
||||
const newProviderNumber = 11235;
|
||||
|
||||
// Act
|
||||
wrapper.vm.$options.watch.selectedProviderNumber.call(wrapper.vm, newProviderNumber);
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.mainStore.updateServiceLocation).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
test('Calls updateServiceLocation when matching provider found.', () => {
|
||||
// Arrange
|
||||
const newProviderNumber = 11235;
|
||||
const streetAddress = '143 Average Lane';
|
||||
const city = 'Berlin';
|
||||
const state = 'MA';
|
||||
const zipCode = '12345';
|
||||
const zipCodeCtu = '0004';
|
||||
const companyName = "Sally's Auto";
|
||||
const phoneNumber = '3298479879';
|
||||
const provider = {
|
||||
providerNumber: newProviderNumber,
|
||||
address: {
|
||||
streetAddress,
|
||||
city,
|
||||
state,
|
||||
zipCode,
|
||||
zipCodeCtu
|
||||
},
|
||||
companyName,
|
||||
phoneNumber
|
||||
};
|
||||
const { wrapper } = getMountedComponent({}, {
|
||||
providers: [
|
||||
provider,
|
||||
{ providerNumber: 328949832 }
|
||||
]
|
||||
});
|
||||
|
||||
// Act
|
||||
wrapper.vm.$options.watch.selectedProviderNumber.call(wrapper.vm, newProviderNumber);
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.mainStore.updateServiceLocation).toHaveBeenCalledWith({
|
||||
provider: {
|
||||
providerNumber: newProviderNumber,
|
||||
address: {
|
||||
streetAddress,
|
||||
city,
|
||||
state,
|
||||
zipCode,
|
||||
zipCodeCtu
|
||||
},
|
||||
companyName,
|
||||
phoneNumber
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
describe('method', () => {
|
||||
test.each([
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<label
|
||||
id="tpaSearchQuestionLabel"
|
||||
for="tpaSearchQuestionField"
|
||||
class="text-center mt-5 mb-0 text-black w-100 search-question">
|
||||
class="text-center fs-5 mt-5 mb-0 text-black w-100">
|
||||
{{ tpaSearchQuestionLabel }}
|
||||
</label>
|
||||
<label
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
id="map"
|
||||
class="mb-4"
|
||||
:addresses="providerAddresses"
|
||||
:zipCode="mapZipCode"></googleMap>
|
||||
:zipCode="mapZipCode" />
|
||||
<Form
|
||||
id="providerSelectionForm"
|
||||
v-slot="{ meta }"
|
||||
|
|
@ -89,12 +89,11 @@
|
|||
:isDismissible="false"
|
||||
:manualHeadline="noNetworkShopsAlertHeaderText" />
|
||||
</div>
|
||||
<div
|
||||
class="text-center">
|
||||
<div class="text-center">
|
||||
<textLink
|
||||
id="preferredShopNotListedLink"
|
||||
linkType="navigation"
|
||||
href="#!"
|
||||
href="javascript:void(0)"
|
||||
:text="shopNotListedModalLink"
|
||||
@clickEvent="doNotSeeMyShopLinkClick" />
|
||||
</div>
|
||||
|
|
@ -281,6 +280,25 @@ export default {
|
|||
this.selectedProviderNumber = newProviders?.length === 1 ?? false
|
||||
? newProviders[0]?.providerNumber ?? ''
|
||||
: '';
|
||||
},
|
||||
selectedProviderNumber(newNumber) {
|
||||
const provider = this.providers?.find((p) => p.providerNumber === newNumber);
|
||||
if (provider) {
|
||||
useMainStore().updateServiceLocation({
|
||||
provider: {
|
||||
providerNumber: provider?.providerNumber,
|
||||
address: {
|
||||
streetAddress: provider.address?.streetAddress,
|
||||
city: provider.address?.city,
|
||||
state: provider.address?.state,
|
||||
zipCode: provider.address?.zipCode,
|
||||
zipCodeCtu: provider.address?.zipCodeCtu
|
||||
},
|
||||
companyName: provider?.companyName,
|
||||
phoneNumber: provider?.phoneNumber
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeUpdate() {
|
||||
|
|
@ -373,10 +391,6 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-question {
|
||||
font-size: $h5-font-size;
|
||||
}
|
||||
|
||||
.darker-gray {
|
||||
color: map-get($colors, "darker-gray");
|
||||
}
|
||||
|
|
|
|||
25
src/layouts/tpa-submit/__snapshots__/tpa-submit.spec.js.snap
Normal file
25
src/layouts/tpa-submit/__snapshots__/tpa-submit.spec.js.snap
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`tpa-submit returns the initial data 1`] = `
|
||||
Object {
|
||||
"companyName": "Frederick Jones",
|
||||
"customValueMap": Object {
|
||||
"glassShop": "Frederick Jones",
|
||||
},
|
||||
"sections": Array [],
|
||||
"widget": Object {
|
||||
"footer": "SiteFooterWidget",
|
||||
"orderDetails": "OrderDetailsContent",
|
||||
"serviceSummary": "ServiceSummaryContent",
|
||||
"siteHeader": "SiteHeaderWidget",
|
||||
"siteSubHeader": "SiteSubHeaderWidget",
|
||||
"subheader": Object {
|
||||
"contactInfo": "ContactDetailsSubTitle",
|
||||
"damage": "DamageSubTitle",
|
||||
"shop": "PreferredShopSubTitle",
|
||||
"vehicle": "VehicleSubTitle",
|
||||
},
|
||||
"vehicleBanner": "VehicleBannerWidget",
|
||||
},
|
||||
}
|
||||
`;
|
||||
70
src/layouts/tpa-submit/deductible-box/deductible-box.spec.js
Normal file
70
src/layouts/tpa-submit/deductible-box/deductible-box.spec.js
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
import { shallowMount } from '@vue/test-utils';
|
||||
import deductibleBox from '@/layouts/tpa-submit/deductible-box/deductible-box.vue';
|
||||
|
||||
describe('deductible-box', () => {
|
||||
let wrapper;
|
||||
const defaultValue = '1820';
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallowMount(deductibleBox, {
|
||||
propsData: { value: defaultValue }
|
||||
});
|
||||
});
|
||||
|
||||
it('renders the correct deductible value', () => {
|
||||
const valueElement = wrapper.find('#deductibleValue');
|
||||
expect(valueElement.text()).toBe(defaultValue);
|
||||
});
|
||||
|
||||
it('renders the correct deductible label', () => {
|
||||
const labelElement = wrapper.find('#deductibleLabel');
|
||||
expect(labelElement.text()).toBe('Deductible');
|
||||
});
|
||||
|
||||
it('has the correct id', () => {
|
||||
expect(wrapper.attributes().id).toBe('deductibleBox');
|
||||
});
|
||||
|
||||
it('has the correct classes', () => {
|
||||
expect(wrapper.classes().length).toBe(6);
|
||||
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');
|
||||
expect(wrapper.classes()).toContain('px-5');
|
||||
});
|
||||
it.each([
|
||||
['', ''],
|
||||
[null, ''],
|
||||
[undefined, '']
|
||||
])('renders correctly with value "%p"', (value, expected) => {
|
||||
wrapper = shallowMount(deductibleBox, {
|
||||
propsData: { value }
|
||||
});
|
||||
const valueElement = wrapper.find('#deductibleValue');
|
||||
expect(valueElement.text()).toBe(expected);
|
||||
});
|
||||
|
||||
it('renders correctly with a very long value', () => {
|
||||
const longValue = '1'.repeat(1000);
|
||||
wrapper = shallowMount(deductibleBox, {
|
||||
propsData: {
|
||||
value: longValue
|
||||
}
|
||||
});
|
||||
const valueElement = wrapper.find('#deductibleValue');
|
||||
expect(valueElement.text()).toBe(longValue);
|
||||
});
|
||||
|
||||
it('renders correctly with special characters', () => {
|
||||
const specialValue = '!@#$%^&*()';
|
||||
wrapper = shallowMount(deductibleBox, {
|
||||
propsData: {
|
||||
value: specialValue
|
||||
}
|
||||
});
|
||||
const valueElement = wrapper.find('#deductibleValue');
|
||||
expect(valueElement.text()).toBe(specialValue);
|
||||
});
|
||||
});
|
||||
39
src/layouts/tpa-submit/deductible-box/deductible-box.vue
Normal file
39
src/layouts/tpa-submit/deductible-box/deductible-box.vue
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<div
|
||||
id="deductibleBox"
|
||||
class="deductible-box d-flex justify-content-between align-items-center py-2 px-5">
|
||||
<p
|
||||
id="deductibleLabel"
|
||||
class="deductible-box__text">
|
||||
Deductible
|
||||
</p>
|
||||
<p
|
||||
id="deductibleValue"
|
||||
class="deductible-box__text">
|
||||
{{ value }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'deductible-box',
|
||||
props: {
|
||||
value: String
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.deductible-box {
|
||||
background-color: $green;
|
||||
}
|
||||
|
||||
.deductible-box__text {
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
56
src/layouts/tpa-submit/review-block/review-block.spec.js
Normal file
56
src/layouts/tpa-submit/review-block/review-block.spec.js
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
import { shallowMount } from '@vue/test-utils';
|
||||
import ReviewBlock from '@/layouts/tpa-submit/review-block/review-block.vue';
|
||||
|
||||
describe('ReviewBlock.vue', () => {
|
||||
let wrapper;
|
||||
const lines = ['Line 1', 'Line 2', 'Line 3'];
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallowMount(ReviewBlock, {
|
||||
propsData: {
|
||||
customHeaderText: 'Test Header',
|
||||
lines
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('renders the correct header text', () => {
|
||||
const headerElement = wrapper.find('.review-block__header');
|
||||
expect(headerElement.text()).toBe('Test Header');
|
||||
});
|
||||
|
||||
it('renders the correct number of lines', () => {
|
||||
const lineElements = wrapper.findAll('.review-block__body--line');
|
||||
expect(lineElements.length).toBe(lines.length);
|
||||
});
|
||||
|
||||
it('renders the correct line text', () => {
|
||||
const lineElements = wrapper.findAll('.review-block__body--line');
|
||||
lines.forEach((line, index) => {
|
||||
expect(lineElements.at(index).text()).toBe(line);
|
||||
});
|
||||
});
|
||||
|
||||
it('updates the header text when prop changes', async () => {
|
||||
await wrapper.setProps({ customHeaderText: 'New Header' });
|
||||
const headerElement = wrapper.find('.review-block__header');
|
||||
expect(headerElement.text()).toBe('New Header');
|
||||
});
|
||||
|
||||
it('emits an event when the edit link is clicked', async () => {
|
||||
const linkElement = wrapper.findComponent({ name: 'textLink' });
|
||||
await linkElement.vm.$emit('clickEvent');
|
||||
expect(wrapper.emitted('click-edit')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('renders correctly with no lines', () => {
|
||||
wrapper = shallowMount(ReviewBlock, {
|
||||
propsData: {
|
||||
customHeaderText: 'Test Header',
|
||||
lines: []
|
||||
}
|
||||
});
|
||||
const lineElements = wrapper.findAll('.review-block__body--line');
|
||||
expect(lineElements.length).toBe(0);
|
||||
});
|
||||
});
|
||||
70
src/layouts/tpa-submit/review-block/review-block.vue
Normal file
70
src/layouts/tpa-submit/review-block/review-block.vue
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<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">
|
||||
{{ line }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import textLink from '@/ux-components/text-link/text-link.vue';
|
||||
|
||||
export default {
|
||||
name: 'review-block',
|
||||
components: { textLink },
|
||||
props: {
|
||||
customHeaderText: String,
|
||||
editScreenReaderTextCmsWidgetName: String,
|
||||
lines: Array
|
||||
},
|
||||
emits: ['click-edit'],
|
||||
data() {
|
||||
return {
|
||||
editLinkText: 'Edit'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
editClicked() {
|
||||
this.$emit('click-edit');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.review-block {
|
||||
:deep(p) {
|
||||
margin: 0;
|
||||
}
|
||||
.review-block__header {
|
||||
color: $black;
|
||||
}
|
||||
.review-block__body--line {
|
||||
color: $gray-600;
|
||||
}
|
||||
.link {
|
||||
text-underline-offset: 1px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
766
src/layouts/tpa-submit/tpa-submit.spec.js
Normal file
766
src/layouts/tpa-submit/tpa-submit.spec.js
Normal file
|
|
@ -0,0 +1,766 @@
|
|||
// Components
|
||||
import { shallowMount } from '@vue/test-utils';
|
||||
import { createTestingPinia } from '@pinia/testing';
|
||||
import tpaSubmit from '@/layouts/tpa-submit/tpa-submit.vue';
|
||||
|
||||
// Supporting Files
|
||||
import { getMountOptions } from '@/helpers/unit-test-helper.js';
|
||||
import { useMainStore } from '@/store';
|
||||
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
|
||||
import settleAllPromises from '@/helpers/layout-helper.js';
|
||||
import widgetFields from '@/constants/cms-widget-fields.js';
|
||||
|
||||
// Mock fetchCmsContentForPage
|
||||
jest.mock('@/helpers/cms-content-helper', () => ({
|
||||
fetchCmsContentForPage: jest.fn(),
|
||||
doesCopyContainRouterLink: jest.fn(),
|
||||
getStringWithCustomValues: jest.fn(),
|
||||
processIfStatements: jest.fn()
|
||||
}));
|
||||
|
||||
jest.mock('@/helpers/text-helper.js', () => ({
|
||||
formatAddress: jest.fn(),
|
||||
toDisplayPhoneNumber: jest.fn(),
|
||||
formatAmountInDollars: jest.fn(),
|
||||
toTitleCase: jest.fn()
|
||||
}));
|
||||
|
||||
// Mock our module for promises.
|
||||
jest.mock('@/helpers/layout-helper.js', () => jest.fn());
|
||||
|
||||
function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRunAfterInitializingStore = () => {}) {
|
||||
const mountOptions = getMountOptions({
|
||||
router: {
|
||||
navigate: jest.fn()
|
||||
}
|
||||
});
|
||||
|
||||
const testingPinia = createTestingPinia({
|
||||
initialState: {
|
||||
main: mainInitialState
|
||||
}
|
||||
});
|
||||
useMainStore(testingPinia);
|
||||
methodToRunAfterInitializingStore();
|
||||
|
||||
mountOptions.global.plugins = [testingPinia];
|
||||
mountOptions.data = () => (initialData);
|
||||
|
||||
const apiResponses = { cmsContent: {} };
|
||||
|
||||
settleAllPromises.mockImplementation(() => apiResponses);
|
||||
fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
|
||||
|
||||
const wrapper = shallowMount(tpaSubmit, mountOptions);
|
||||
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {});
|
||||
wrapper.vm.setCmsContent = jest.fn();
|
||||
return { wrapper };
|
||||
}
|
||||
|
||||
describe('tpa-submit', () => {
|
||||
test('returns the initial data', () => {
|
||||
// Arrange
|
||||
const companyName = 'Frederick Jones';
|
||||
const mainInitialState = {
|
||||
order: {
|
||||
serviceLocation: {
|
||||
provider: { companyName }
|
||||
}
|
||||
}
|
||||
};
|
||||
const { wrapper } = getMountedComponent(mainInitialState);
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.$data).toMatchSnapshot();
|
||||
});
|
||||
describe('should render', () => {
|
||||
test('tpa submit form', () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(tpaSubmit, getMountOptions());
|
||||
|
||||
// Act
|
||||
const form = wrapper.findComponent({ ref: 'tpaSubmitFormRef' });
|
||||
|
||||
// Assert
|
||||
expect(form.exists()).toBeTruthy();
|
||||
expect(form.classes()).toContain('tpa-submit');
|
||||
});
|
||||
test('site header', () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(tpaSubmit, getMountOptions());
|
||||
const expectedWidgetName = 'SiteHeaderWidget';
|
||||
|
||||
// Act
|
||||
const siteHeader = wrapper.findComponent({ ref: 'siteHeader' });
|
||||
|
||||
// Assert
|
||||
expect(siteHeader.exists()).toBeTruthy();
|
||||
expect(siteHeader.props().cmsWidgetName).toBe(expectedWidgetName);
|
||||
});
|
||||
test('vehicle banner', () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(tpaSubmit, getMountOptions());
|
||||
const expectedWidgetName = 'VehicleBannerWidget';
|
||||
|
||||
// Act
|
||||
const vehicleBanner = wrapper.findComponent({ ref: 'vehicleBanner' });
|
||||
|
||||
// Assert
|
||||
expect(vehicleBanner.exists()).toBeTruthy();
|
||||
expect(vehicleBanner.props().cmsWidgetName).toBe(expectedWidgetName);
|
||||
expect(vehicleBanner.props().displayGenericVehicleImage).toBe(false);
|
||||
expect(vehicleBanner.classes()).toContain('mt-5');
|
||||
});
|
||||
test('sub header', () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(tpaSubmit, getMountOptions());
|
||||
|
||||
// Act
|
||||
const subHeader = wrapper.findComponent({ ref: 'subHeaderTitle' });
|
||||
|
||||
// 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');
|
||||
});
|
||||
test('sub header body one', () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(tpaSubmit, getMountOptions());
|
||||
|
||||
// Act
|
||||
const subHeaderBodyOne = wrapper.findComponent({ ref: 'tpaSubmitSubHeaderBodyOne' });
|
||||
|
||||
// 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().isPrimary).toBe(true);
|
||||
expect(mainButton.props().loaderColor).toBe('white');
|
||||
expect(mainButton.classes()).toContain('w-100');
|
||||
expect(mainButton.classes()).toContain('mb-5');
|
||||
});
|
||||
test('service summary section', () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(tpaSubmit, getMountOptions());
|
||||
|
||||
// Act
|
||||
const serviceSummarySection = wrapper.find('#serviceSummarySection');
|
||||
|
||||
// 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';
|
||||
const lines1 = ['apple', 'banana', 'cherry'];
|
||||
const lines2 = ['soccer', 'golf'];
|
||||
const sections = [
|
||||
{
|
||||
title: title1,
|
||||
lines: lines1,
|
||||
onClickEdit: () => {}
|
||||
},
|
||||
{
|
||||
title: title2,
|
||||
lines: lines2,
|
||||
onClickEdit: () => {}
|
||||
}
|
||||
];
|
||||
const initialData = { sections };
|
||||
const { wrapper } = getMountedComponent({}, initialData);
|
||||
test.each([
|
||||
[0, true, title1, lines1],
|
||||
[1, true, title2, lines2],
|
||||
[2, false, null, null],
|
||||
[-1, false, null, null]
|
||||
])('section %p exists value is %p with header text %p and lines %p', (index, exists, headerText, lines) => {
|
||||
// Act
|
||||
const reviewBlocks = wrapper.findComponent(`#review-block-${index}`);
|
||||
|
||||
// Assert
|
||||
expect(reviewBlocks.exists()).toBe(exists);
|
||||
if (exists) {
|
||||
expect(reviewBlocks.props().customHeaderText).toBe(headerText);
|
||||
expect(reviewBlocks.props().lines).toStrictEqual(lines);
|
||||
}
|
||||
});
|
||||
});
|
||||
test('submit order details section', () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(tpaSubmit, getMountOptions());
|
||||
|
||||
// Act
|
||||
const submitOrderDetailsSection = wrapper.find({ ref: 'submitOrderDetailsSection' });
|
||||
|
||||
// Assert
|
||||
expect(submitOrderDetailsSection.exists()).toBeTruthy();
|
||||
});
|
||||
test('submit order details title', () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(tpaSubmit, getMountOptions());
|
||||
|
||||
// Act
|
||||
const submitOrderDetailsTitle = wrapper.findComponent({ ref: 'tpaSubmitOrderDetailsTitle' });
|
||||
|
||||
// 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');
|
||||
});
|
||||
test('deductible box', () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(tpaSubmit, getMountOptions());
|
||||
|
||||
// Act
|
||||
const deductibleBox = wrapper.findComponent({ ref: 'deductibleBox' });
|
||||
|
||||
// Assert
|
||||
expect(deductibleBox.exists()).toBeTruthy();
|
||||
});
|
||||
test('site footer', () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(tpaSubmit, getMountOptions());
|
||||
|
||||
// Act
|
||||
const siteFooter = wrapper.findComponent({ ref: 'siteFooter' });
|
||||
|
||||
// Assert
|
||||
expect(siteFooter.exists()).toBeTruthy();
|
||||
expect(siteFooter.props().cmsWidgetName).toBe('SiteFooterWidget');
|
||||
expect(siteFooter.classes()).toContain('mt-5');
|
||||
});
|
||||
});
|
||||
describe('before route enter', () => {
|
||||
test('produces 4 sections', async () => {
|
||||
// Arrange
|
||||
const { wrapper } = getMountedComponent();
|
||||
expect(wrapper.vm.sections.length).toBe(0);
|
||||
|
||||
// Act
|
||||
await tpaSubmit.beforeRouteEnter.call(
|
||||
wrapper.vm,
|
||||
{ query: { issPage: 'tpa-submit' } },
|
||||
undefined,
|
||||
(c) => c(wrapper.vm)
|
||||
);
|
||||
|
||||
// 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.each([
|
||||
['Apple sauce', 'Apple sauce'],
|
||||
['', ''],
|
||||
['', undefined],
|
||||
['', null]
|
||||
])(
|
||||
'damage line is %p when store damage is %p',
|
||||
async (damageLine, storeDamage) => {
|
||||
// Arrange
|
||||
const initialStore = {
|
||||
order: {
|
||||
policy: { damageCause: storeDamage }
|
||||
}
|
||||
};
|
||||
const { wrapper } = getMountedComponent(initialStore);
|
||||
const damageSectionIndex = 1;
|
||||
const expectedLines = [damageLine];
|
||||
|
||||
// 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).toStrictEqual(expectedLines);
|
||||
}
|
||||
);
|
||||
describe('preferred shop section', () => {
|
||||
test('has three lines', async () => {
|
||||
// Arrange
|
||||
const { wrapper } = getMountedComponent();
|
||||
const preferredShopSectionIndex = 2;
|
||||
|
||||
// Act
|
||||
await tpaSubmit.beforeRouteEnter.call(
|
||||
wrapper.vm,
|
||||
{ query: { issPage: 'tpa-submit' } },
|
||||
undefined,
|
||||
(c) => c(wrapper.vm)
|
||||
);
|
||||
|
||||
// Assert
|
||||
const preferredShopSection = wrapper.vm.sections[preferredShopSectionIndex];
|
||||
expect(preferredShopSection.lines.length).toBe(3);
|
||||
});
|
||||
test.each([
|
||||
['some value', 'some value'],
|
||||
['', ''],
|
||||
['', null],
|
||||
['', undefined]
|
||||
])('first line is %p when company name is %p', async (line, companyName) => {
|
||||
// Arrange
|
||||
const initialData = { companyName };
|
||||
const { wrapper } = getMountedComponent({}, initialData);
|
||||
const preferredShopSectionIndex = 2;
|
||||
|
||||
// Act
|
||||
await tpaSubmit.beforeRouteEnter.call(
|
||||
wrapper.vm,
|
||||
{ query: { issPage: 'tpa-submit' } },
|
||||
undefined,
|
||||
(c) => c(wrapper.vm)
|
||||
);
|
||||
|
||||
// Assert
|
||||
const preferredShopSection = wrapper.vm.sections[preferredShopSectionIndex];
|
||||
expect(preferredShopSection.lines[0]).toBe(line);
|
||||
});
|
||||
test('second line is expected and formatAddress called', async () => {
|
||||
// Arrange
|
||||
const address = {
|
||||
streetAddress: '123 South Ln',
|
||||
city: 'Oneida',
|
||||
state: 'FL',
|
||||
zipCode: '78226'
|
||||
};
|
||||
const initialStore = {
|
||||
order: {
|
||||
serviceLocation: {
|
||||
provider: { address }
|
||||
}
|
||||
}
|
||||
};
|
||||
const { wrapper } = getMountedComponent(initialStore);
|
||||
const line = 'some returned line';
|
||||
wrapper.vm.formatAddress = jest.fn().mockImplementationOnce(() => line);
|
||||
const preferredShopSectionIndex = 2;
|
||||
|
||||
// Act
|
||||
await tpaSubmit.beforeRouteEnter.call(
|
||||
wrapper.vm,
|
||||
{ query: { issPage: 'tpa-submit' } },
|
||||
undefined,
|
||||
(c) => c(wrapper.vm)
|
||||
);
|
||||
|
||||
// Assert
|
||||
const preferredShopSection = wrapper.vm.sections[preferredShopSectionIndex];
|
||||
expect(preferredShopSection.lines[1]).toBe(line);
|
||||
expect(wrapper.vm.formatAddress).toHaveBeenCalledTimes(1);
|
||||
expect(wrapper.vm.formatAddress).toHaveBeenCalledWith(
|
||||
address.streetAddress,
|
||||
null,
|
||||
address.city,
|
||||
address.state,
|
||||
address.zipCode
|
||||
);
|
||||
});
|
||||
test('third line is expected and toDisplayPhoneNumber called', async () => {
|
||||
// Arrange
|
||||
const phoneNumber = '9998887777';
|
||||
const initialStore = {
|
||||
order: {
|
||||
serviceLocation: {
|
||||
provider: { phoneNumber }
|
||||
}
|
||||
}
|
||||
};
|
||||
const { wrapper } = getMountedComponent(initialStore);
|
||||
const expectedLine = 'returned from to display phone num';
|
||||
wrapper.vm.toDisplayPhoneNumber = jest.fn().mockImplementationOnce(() => expectedLine);
|
||||
const preferredShopSectionIndex = 2;
|
||||
|
||||
// Act
|
||||
await tpaSubmit.beforeRouteEnter.call(
|
||||
wrapper.vm,
|
||||
{ query: { issPage: 'tpa-submit' } },
|
||||
undefined,
|
||||
(c) => c(wrapper.vm)
|
||||
);
|
||||
|
||||
// Assert
|
||||
const preferredShopSection = wrapper.vm.sections[preferredShopSectionIndex];
|
||||
expect(preferredShopSection.lines[2]).toBe(expectedLine);
|
||||
expect(wrapper.vm.toDisplayPhoneNumber).toHaveBeenCalledWith(phoneNumber);
|
||||
});
|
||||
});
|
||||
test('contact info section has expected content', async () => {
|
||||
// Arrange
|
||||
const firstName = 'Jones';
|
||||
const lastName = 'Eddison';
|
||||
const emailAddress = 'myname@gmail.com';
|
||||
const phoneNumber = '0001112222';
|
||||
const initialStore = {
|
||||
order: {
|
||||
contactInfo: {
|
||||
firstName,
|
||||
lastName,
|
||||
emailAddress,
|
||||
phoneNumber
|
||||
}
|
||||
}
|
||||
};
|
||||
const { wrapper } = getMountedComponent(initialStore);
|
||||
const expectedLine1 = 'Jones Eddison';
|
||||
const expectedLine2 = emailAddress;
|
||||
const expectedLine3 = 'some value returned';
|
||||
wrapper.vm.toDisplayPhoneNumber = jest.fn().mockImplementation((number) => (number === phoneNumber ? expectedLine3 : ''));
|
||||
const contactInfoSectionIndex = 3;
|
||||
|
||||
// Act
|
||||
await tpaSubmit.beforeRouteEnter.call(
|
||||
wrapper.vm,
|
||||
{ query: { issPage: 'tpa-submit' } },
|
||||
undefined,
|
||||
(c) => c(wrapper.vm)
|
||||
);
|
||||
|
||||
// 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(wrapper.vm.toDisplayPhoneNumber).toHaveBeenCalledWith(phoneNumber);
|
||||
});
|
||||
});
|
||||
describe('computed', () => {
|
||||
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) => {
|
||||
// Arrange
|
||||
const mountOptions = getMountOptions();
|
||||
mountOptions.mixins = [{
|
||||
methods: {
|
||||
getCmsContent: jest.fn().mockImplementation((widget, field) =>
|
||||
(widget === widgetLabel && field === fieldLabel ? expected : ''))
|
||||
}
|
||||
}];
|
||||
const wrapper = shallowMount(tpaSubmit, mountOptions);
|
||||
|
||||
// Act
|
||||
const result = wrapper.vm[computedName];
|
||||
|
||||
// Assert
|
||||
expect(result).toEqual(expected);
|
||||
});
|
||||
test.each([
|
||||
[true, true],
|
||||
[false, false]
|
||||
])('isVerified returns %p when store value %p', (expected, storeValue) => {
|
||||
// Arrange
|
||||
const initialStore = {
|
||||
order: {
|
||||
payment: {
|
||||
insuranceCoverage: { isVerified: storeValue }
|
||||
}
|
||||
}
|
||||
};
|
||||
const { wrapper } = getMountedComponent(initialStore);
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.isVerified).toBe(expected);
|
||||
});
|
||||
test.each([
|
||||
[5, 5],
|
||||
[-1, -1],
|
||||
[0, 0],
|
||||
[null, null],
|
||||
[undefined, undefined]
|
||||
])('currentDeductible returns %p when store value %p', (expected, storeValue) => {
|
||||
// Arrange
|
||||
const initialStore = {
|
||||
order: {
|
||||
currentDeductible: storeValue
|
||||
}
|
||||
};
|
||||
const { wrapper } = getMountedComponent(initialStore);
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.currentDeductible).toBe(expected);
|
||||
});
|
||||
describe('deductible box value', () => {
|
||||
test('returns "Verifying coverage" when isVerified false', () => {
|
||||
// Arrange
|
||||
const initialStore = {
|
||||
order: {
|
||||
payment: {
|
||||
insuranceCoverage: { isVerified: false }
|
||||
}
|
||||
}
|
||||
};
|
||||
const { wrapper } = getMountedComponent(initialStore);
|
||||
const expected = 'Verifying coverage';
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.deductibleBoxValue).toBe(expected);
|
||||
});
|
||||
test('returns in dollars response when isVerified true', () => {
|
||||
// Arrange
|
||||
const currentDeductible = '123094';
|
||||
const initialStore = {
|
||||
order: {
|
||||
payment: {
|
||||
insuranceCoverage: { isVerified: true }
|
||||
},
|
||||
currentDeductible
|
||||
}
|
||||
};
|
||||
const { wrapper } = getMountedComponent(initialStore);
|
||||
const notExpected = 'Verifying coverage';
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.deductibleBoxValue).not.toBe(notExpected);
|
||||
});
|
||||
});
|
||||
});
|
||||
describe('methods', () => {
|
||||
describe('getCustomValueFromString', () => {
|
||||
describe('with argument deductibleAboveZero', () => {
|
||||
test.each([
|
||||
[false],
|
||||
[true]
|
||||
])(
|
||||
'returns false when isVerified %p and currentDeductible is zero',
|
||||
(isVerified) => {
|
||||
// Arrange
|
||||
const initialStore = {
|
||||
order: {
|
||||
payment: {
|
||||
insuranceCoverage: { isVerified }
|
||||
},
|
||||
currentDeductible: 0
|
||||
}
|
||||
};
|
||||
const { wrapper } = getMountedComponent(initialStore);
|
||||
const argument = 'deductibleAboveZero';
|
||||
|
||||
// Act
|
||||
const result = wrapper.vm.getCustomValueFromString(argument);
|
||||
|
||||
// Assert
|
||||
expect(result).toBe(false);
|
||||
}
|
||||
);
|
||||
test.each([
|
||||
[true, true],
|
||||
[false, false]
|
||||
])(
|
||||
'returns %p when isVerified %p and currentDeductible is not zero',
|
||||
(expected, isVerified) => {
|
||||
// Arrange
|
||||
const initialStore = {
|
||||
order: {
|
||||
payment: {
|
||||
insuranceCoverage: { isVerified }
|
||||
},
|
||||
currentDeductible: 10
|
||||
}
|
||||
};
|
||||
const { wrapper } = getMountedComponent(initialStore);
|
||||
const argument = 'deductibleAboveZero';
|
||||
|
||||
// Act
|
||||
const result = wrapper.vm.getCustomValueFromString(argument);
|
||||
|
||||
// Assert
|
||||
expect(result).toBe(expected);
|
||||
}
|
||||
);
|
||||
});
|
||||
describe('with argument zeroDeductible', () => {
|
||||
test.each([
|
||||
[true, true],
|
||||
[false, false]
|
||||
])(
|
||||
'returns %p when isVerified is %p currentDeductible is zero',
|
||||
(expected, isVerified) => {
|
||||
// Arrange
|
||||
const initialStore = {
|
||||
order: {
|
||||
payment: {
|
||||
insuranceCoverage: { isVerified }
|
||||
},
|
||||
currentDeductible: 0
|
||||
}
|
||||
};
|
||||
const { wrapper } = getMountedComponent(initialStore);
|
||||
const argument = 'zeroDeductible';
|
||||
|
||||
// Act
|
||||
const result = wrapper.vm.getCustomValueFromString(argument);
|
||||
|
||||
// Assert
|
||||
expect(result).toBe(expected);
|
||||
}
|
||||
);
|
||||
test.each([
|
||||
[false],
|
||||
[true]
|
||||
])(
|
||||
'returns false when isVerified is %p currentDeductible is not zero',
|
||||
(isVerified) => {
|
||||
// Arrange
|
||||
const initialStore = {
|
||||
order: {
|
||||
payment: {
|
||||
insuranceCoverage: { isVerified }
|
||||
},
|
||||
currentDeductible: 76
|
||||
}
|
||||
};
|
||||
const { wrapper } = getMountedComponent(initialStore);
|
||||
const argument = 'zeroDeductible';
|
||||
|
||||
// Act
|
||||
const result = wrapper.vm.getCustomValueFromString(argument);
|
||||
|
||||
// Assert
|
||||
expect(result).toBe(false);
|
||||
}
|
||||
);
|
||||
});
|
||||
test.each([
|
||||
[true, false],
|
||||
[false, true]
|
||||
])(
|
||||
'with argument verifyingCoverage returns %p when isVerified %p',
|
||||
(expected, isVerified) => {
|
||||
// Arrange
|
||||
const initialStore = {
|
||||
order: {
|
||||
payment: {
|
||||
insuranceCoverage: { isVerified }
|
||||
},
|
||||
currentDeductible: 26
|
||||
}
|
||||
};
|
||||
const { wrapper } = getMountedComponent(initialStore);
|
||||
const argument = 'verifyingCoverage';
|
||||
|
||||
// Act
|
||||
const result = wrapper.vm.getCustomValueFromString(argument);
|
||||
|
||||
// Assert
|
||||
expect(result).toBe(expected);
|
||||
}
|
||||
);
|
||||
test('with unknown argument returns null', () => {
|
||||
// Arrange
|
||||
const initialStore = {
|
||||
order: {
|
||||
payment: {
|
||||
insuranceCoverage: { isVerified: true }
|
||||
},
|
||||
currentDeductible: 26
|
||||
}
|
||||
};
|
||||
const { wrapper } = getMountedComponent(initialStore);
|
||||
const argument = 'some random string';
|
||||
|
||||
// Act
|
||||
const result = wrapper.vm.getCustomValueFromString(argument);
|
||||
|
||||
// Assert
|
||||
expect(result).toBe(null);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -1,20 +1,92 @@
|
|||
<template>
|
||||
<Form
|
||||
ref="theForm"
|
||||
ref="tpaSubmitFormRef"
|
||||
v-slot="{ meta }"
|
||||
class="tpa-submit"
|
||||
@submit="onSubmit"
|
||||
@invalidSubmit="onInvalidSubmit">
|
||||
<div class="page-container-grouped-styles">
|
||||
<div class="fade-on-route-transition position-relative">
|
||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||
<div class="container-fluid pb-2 submit">
|
||||
<p>Placeholder for TPA-Submit</p>
|
||||
<siteHeader
|
||||
ref="siteHeader"
|
||||
:cmsWidgetName="widget.siteHeader" />
|
||||
<div class="px-5">
|
||||
<vehicleBanner
|
||||
ref="vehicleBanner"
|
||||
:cmsWidgetName="widget.vehicleBanner"
|
||||
:displayGenericVehicleImage="false"
|
||||
class="mt-5" /> <!-- TODO fix styling -->
|
||||
<textBlock
|
||||
ref="subHeaderTitle"
|
||||
:customText="subHeaderTitle"
|
||||
justifyText="center"
|
||||
:marginTopSizeOverride="4"
|
||||
class="text-color--black fs-5 tpa-submit__title--line-height" />
|
||||
<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"
|
||||
isPrimary
|
||||
:buttonText="forwardButtonText"
|
||||
loaderColor="white"
|
||||
class="w-100 mb-5"
|
||||
@clickEvent="forwardButtonAction" />
|
||||
<hr class="mb-0" />
|
||||
<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>
|
||||
</div>
|
||||
<hr class="mb-0" />
|
||||
<div
|
||||
id="submitOrderDetailsSection"
|
||||
ref="submitOrderDetailsSection">
|
||||
<textBlock
|
||||
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" />
|
||||
<deductibleBox ref="deductibleBox" :value="deductibleBoxValue" />
|
||||
</div>
|
||||
<siteFooter
|
||||
ref="siteFooter"
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@ForwardClicked="forwardButtonAction"
|
||||
@backClicked="navigateBack" />
|
||||
ref="siteFooter"
|
||||
class="mt-5"
|
||||
:cmsWidgetName="widget.footer"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@backClicked="navigateBack"
|
||||
@forwardClicked="forwardButtonAction" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -23,67 +95,192 @@
|
|||
<script>
|
||||
// Components
|
||||
import siteHeader from '@/iss-components/site-header/site-header.vue';
|
||||
import buttonMain from '@/ux-components/button-main/button-main.vue';
|
||||
import textBlock from '@/digital-components/text-block/text-block.vue';
|
||||
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
|
||||
import reviewBlock from '@/layouts/tpa-submit/review-block/review-block.vue';
|
||||
import deductibleBox from '@/layouts/tpa-submit/deductible-box/deductible-box.vue';
|
||||
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
|
||||
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
|
||||
import settleAllPromises from '@/helpers/layout-helper';
|
||||
import { fetchCmsContentForPage, processIfStatements, getStringWithCustomValues } from '@/helpers/cms-content-helper.js';
|
||||
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';
|
||||
|
||||
const VERIFYING_COVERAGE = 'Verifying coverage';
|
||||
|
||||
export default {
|
||||
name: 'tpa-submit',
|
||||
components: {
|
||||
siteHeader,
|
||||
vehicleBanner,
|
||||
textBlock,
|
||||
buttonMain,
|
||||
reviewBlock,
|
||||
deductibleBox,
|
||||
siteFooter,
|
||||
// eslint-disable-next-line vue/no-reserved-component-names
|
||||
Form
|
||||
},
|
||||
mixins: [BaseFormMixin],
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: 'cmsContent',
|
||||
promise: cmsContentPromise
|
||||
}];
|
||||
|
||||
// use resultMap to populate layout content.
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
const cmsContent = await fetchCmsContentForPage(to.query.issPage);
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.setCmsContent(cmsContent);
|
||||
vm.setSections();
|
||||
});
|
||||
},
|
||||
setup() {
|
||||
const mainStore = useMainStore();
|
||||
return { mainStore };
|
||||
},
|
||||
data() {
|
||||
|
||||
const { companyName } = useMainStore().order.serviceLocation.provider;
|
||||
return {
|
||||
sections: [],
|
||||
widget: {
|
||||
siteHeader: 'SiteHeaderWidget',
|
||||
siteSubHeader: 'SiteSubHeaderWidget',
|
||||
serviceSummary: 'ServiceSummaryContent',
|
||||
vehicleBanner: 'VehicleBannerWidget',
|
||||
subheader: {
|
||||
vehicle: 'VehicleSubTitle',
|
||||
damage: 'DamageSubTitle',
|
||||
shop: 'PreferredShopSubTitle',
|
||||
contactInfo: 'ContactDetailsSubTitle'
|
||||
},
|
||||
orderDetails: 'OrderDetailsContent',
|
||||
footer: 'SiteFooterWidget'
|
||||
},
|
||||
companyName,
|
||||
customValueMap: {
|
||||
glassShop: companyName
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
subHeaderTitle() {
|
||||
return this.getCmsContent(this.widget.siteSubHeader, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
|
||||
},
|
||||
subHeaderBodyOne() {
|
||||
return this.getCmsContent(this.widget.siteSubHeader, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
|
||||
},
|
||||
subHeaderBodyTwo() {
|
||||
const cmsContent = this.getCmsContent(this.widget.siteSubHeader, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
|
||||
return this.getStringWithCustomValues(cmsContent, this.customValueMap);
|
||||
},
|
||||
serviceSummaryText() {
|
||||
return this.getCmsContent(this.widget.serviceSummary, widgetFields.TEXT_BLOCK_WIDGET.TEXT);
|
||||
},
|
||||
orderDetailsTitle() {
|
||||
return this.getCmsContent(this.widget.orderDetails, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
|
||||
},
|
||||
orderDetailsBody() {
|
||||
const orderDetailsBodyText = this.getCmsContent(this.widget.orderDetails, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
|
||||
return this.processIfStatements(orderDetailsBodyText, 'custom', this.getCustomValueFromString);
|
||||
},
|
||||
forwardButtonText() {
|
||||
return this.getCmsContent(this.widget.footer, widgetFields.FOOTER_WIDGET.FORWARD_BUTTON_TEXT);
|
||||
},
|
||||
isVerified() {
|
||||
return useMainStore().order.payment.insuranceCoverage.isVerified;
|
||||
},
|
||||
currentDeductible() {
|
||||
return useMainStore().order.currentDeductible;
|
||||
},
|
||||
deductibleBoxValue() {
|
||||
return this.isVerified ? this.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];
|
||||
},
|
||||
getDamageLines() {
|
||||
return [useMainStore().order.policy.damageCause ?? ''];
|
||||
},
|
||||
getPreferredShopLines() {
|
||||
const { phoneNumber, address } = useMainStore().order.serviceLocation.provider;
|
||||
const { streetAddress, city, state, zipCode } = address;
|
||||
const displayAddress = this.formatAddress(streetAddress, null, city, state, zipCode);
|
||||
const displayPhoneNumber = this.toDisplayPhoneNumber(phoneNumber);
|
||||
return [this.companyName ?? '', displayAddress, displayPhoneNumber];
|
||||
},
|
||||
getContactInfoLines() {
|
||||
const { firstName, lastName, emailAddress, phoneNumber } = useMainStore().order.contactInfo;
|
||||
return [
|
||||
`${firstName} ${lastName}`,
|
||||
emailAddress ?? '',
|
||||
this.toDisplayPhoneNumber(phoneNumber)
|
||||
];
|
||||
}
|
||||
},
|
||||
methods:
|
||||
{
|
||||
forwardButtonAction() {
|
||||
return this.navigateForward();
|
||||
setSections() {
|
||||
this.sections = [
|
||||
this.getSection(this.widget.subheader.vehicle, this.getVehicleLines, this.navigationScenarios.EDIT_VEHICLE),
|
||||
this.getSection(this.widget.subheader.damage, this.getDamageLines, this.navigationScenarios.EDIT_DAMAGE),
|
||||
this.getSection(this.widget.subheader.shop, this.getPreferredShopLines, this.navigationScenarios.EDIT_PREFERRED_SHOP),
|
||||
// eslint-disable-next-line max-len
|
||||
this.getSection(this.widget.subheader.contactInfo, this.getContactInfoLines, this.navigationScenarios.EDIT_CONTACT_DETAILS)
|
||||
];
|
||||
},
|
||||
navigateForward() {
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_FORWARD,
|
||||
this.$route
|
||||
);
|
||||
}
|
||||
getSection(widgetName, lines, scenario) {
|
||||
return {
|
||||
title: this.getCmsContent(widgetName, widgetFields.TEXT_BLOCK_WIDGET.TEXT),
|
||||
lines,
|
||||
onClickEdit: this.getNavigateByScenarioMethod(scenario)
|
||||
};
|
||||
},
|
||||
forwardButtonAction() {
|
||||
this.navigate(this.navigationScenarios.CLICKED_FORWARD);
|
||||
},
|
||||
getNavigateByScenarioMethod(scenario) {
|
||||
return () => this.navigate(scenario);
|
||||
},
|
||||
navigate(scenario) {
|
||||
this.$router.navigate(scenario, this.$route);
|
||||
},
|
||||
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;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
},
|
||||
processIfStatements,
|
||||
getStringWithCustomValues,
|
||||
toDisplayPhoneNumber,
|
||||
toTitleCase,
|
||||
formatAddress,
|
||||
formatAmountInDollars
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.submit {
|
||||
|
||||
margin-bottom:0.75rem;
|
||||
.tpa-submit__title--line-height {
|
||||
line-height: map-get($spacers, 6);
|
||||
}
|
||||
|
||||
.text-color--darker-gray {
|
||||
color: $darker-gray
|
||||
}
|
||||
|
||||
.text-color--black {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
hr {
|
||||
opacity: 1;
|
||||
color: $gray-350
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -68,6 +68,12 @@ const navigationScenarios = Object.freeze({
|
|||
CLICKED_FORWARD_WITH_SAFELITE_SHOP: 'CLICKED_FORWARD_WITH_SAFELITE_SHOP',
|
||||
CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP: 'CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP',
|
||||
|
||||
// TPA Submit
|
||||
EDIT_VEHICLE: 'EDIT_VEHICLE',
|
||||
EDIT_DAMAGE: 'EDIT_DAMAGE',
|
||||
EDIT_PREFERRED_SHOP: 'EDIT_PREFERRED_SHOP',
|
||||
EDIT_CONTACT_DETAILS: 'EDIT_CONTACT_DETAILS',
|
||||
|
||||
// Provider Preference
|
||||
CLICKED_FORWARD_WITH_SAFELITE: 'CLICKED_FORWARD_WITH_SAFELITE',
|
||||
CLICKED_FORWARD_WITH_TPA_ENABLED: 'CLICKED_FORWARD_WITH_TPA_ENABLED',
|
||||
|
|
|
|||
|
|
@ -661,6 +661,22 @@ const routingTable = () => [
|
|||
{
|
||||
issPageValue: issPageValues.TPA_SUBMIT,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.EDIT_VEHICLE,
|
||||
destinationIssPageValue: issPageValues.VEHICLE_SELECTION
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.EDIT_DAMAGE,
|
||||
destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.EDIT_PREFERRED_SHOP,
|
||||
destinationIssPageValue: issPageValues.PROVIDER_PREFERENCE
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.EDIT_CONTACT_DETAILS,
|
||||
destinationIssPageValue: issPageValues.CONTACT_DETAILS
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationIssPageValue: issPageValues.TPA_SEARCH
|
||||
|
|
|
|||
|
|
@ -130,7 +130,9 @@ const getDefaultState = () => ({
|
|||
state: null,
|
||||
zipCode: null,
|
||||
zipCodeCtu: null
|
||||
}
|
||||
},
|
||||
companyName: null,
|
||||
phoneNumber: null
|
||||
}
|
||||
},
|
||||
lineItems: {
|
||||
|
|
@ -942,7 +944,7 @@ export const useMainStore = defineStore({
|
|||
}
|
||||
const ctuToUse = this.order.serviceLocation.zipCodeCtu;
|
||||
const availableLineItemsFormattedForRequest = getLineItemQueryStringForPricing(availableLineItems);
|
||||
const deductibleToUse = this.order.currentDeductible;
|
||||
const deductibleToUse = this.order.currentDeductible ?? 0;
|
||||
|
||||
let queryString =
|
||||
`ParentAccountNumber=${this.order.accountNumber}`
|
||||
|
|
@ -1366,7 +1368,9 @@ export const useMainStore = defineStore({
|
|||
state: serviceLocationInfo.provider?.address?.state,
|
||||
zipCode: serviceLocationInfo.provider?.address?.zipCode,
|
||||
zipCodeCtu: serviceLocationInfo.provider?.address?.zipCodeCtu
|
||||
}
|
||||
},
|
||||
companyName: serviceLocationInfo.provider?.companyName,
|
||||
phoneNumber: serviceLocationInfo.provider?.phoneNumber
|
||||
};
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -51,6 +51,12 @@ h6,
|
|||
font-weight: 400;
|
||||
}
|
||||
|
||||
.small-strong {
|
||||
font-size: .875rem;
|
||||
line-height: 1.7;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
label,
|
||||
.label {
|
||||
font-size: 1rem;
|
||||
|
|
@ -63,16 +69,4 @@ caption,
|
|||
font-size: .75rem;
|
||||
line-height: 1.7;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
// Font size
|
||||
.fs-5 {
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.fs-6 {
|
||||
font-size: 1rem !important;
|
||||
line-height: 1.4;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
@ -52,6 +52,7 @@ $yellow-900: #331a00;
|
|||
$gray-100: #f5f5f5; // Used in theme
|
||||
$gray-200: #e3e4e4; // Used in theme
|
||||
$gray-300: #d2d4d4;
|
||||
$gray-350: #b3b4b5; // Used for hr
|
||||
$gray: #b0b3b3; // Default Gray
|
||||
$gray-500: #8e9292; // Used in theme
|
||||
$gray-550: #727676; // Used in theme
|
||||
|
|
@ -123,9 +124,18 @@ $font-family-base: $font-family-sans-serif;
|
|||
$font-family-code: $font-family-monospace;
|
||||
$font-size-base: 1rem; // Assumes the browser default, typically `16px`
|
||||
|
||||
//Headings
|
||||
$h1-font-size: $font-size-base * 3;
|
||||
$h2-font-size: $font-size-base * 2.625;
|
||||
$h3-font-size: $font-size-base * 2;
|
||||
$h4-font-size: $font-size-base * 1.625;
|
||||
$h5-font-size: $font-size-base * 1.25;
|
||||
$h6-font-size: $font-size-base * 0.875;
|
||||
|
||||
//Custom Font size (extra small)
|
||||
$font-size-xsm: $font-size-base * 0.75;
|
||||
$font-sizes: (
|
||||
5: $h5-font-size,
|
||||
7: $font-size-xsm,
|
||||
);
|
||||
|
||||
|
|
@ -136,13 +146,6 @@ $font-weight-normal: 400;
|
|||
$font-weight-bold: 500;
|
||||
$font-weight-bolder: bolder;
|
||||
|
||||
//Headings
|
||||
$h1-font-size: $font-size-base * 3;
|
||||
$h2-font-size: $font-size-base * 2.625;
|
||||
$h3-font-size: $font-size-base * 2;
|
||||
$h4-font-size: $font-size-base * 1.625;
|
||||
$h5-font-size: $font-size-base * 1.25;
|
||||
$h6-font-size: $font-size-base * 0.875;
|
||||
|
||||
//Border Radius
|
||||
// Helper classes are rounded, rounded-1, rounded-2, rounded-3
|
||||
|
|
@ -173,6 +176,9 @@ $spacers: (
|
|||
8: $spacer * 3,
|
||||
);
|
||||
|
||||
//Line Height
|
||||
|
||||
|
||||
//Grid breakpoints
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
|
|
|
|||
Loading…
Reference in a new issue