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

Merge branch 'develop' into feature/digital/joshdass/ESLint

Browse source 
# Conflicts:
#	src/layouts/tpa-search/tpa-search.spec.js
#	src/layouts/tpa-search/tpa-search.vue
This commit is contained in:
Josh Dassinger 2026-02-13 09:08:05 -06:00
commit 65c5e0ec3c
20 changed files with 1408 additions and 2103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/assets/img/tints/GlassTint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.8 KiB

4
src/constants/endpoints.js
View file

@ -93,6 +93,10 @@ const endpoints = Object.freeze({
) => `${LOCATION_BASE_URL}/providers/${zipCode}/${damageType}/${radius}/${parentAccountNumber}/${safeliteOnly}/${carId}/${recalPartNumber != null ? `${recalPartNumber}/` : ''}${isBigTruck}`,
method: 'GET'
},
GetTpaAndSafeliteProviders: {
url: `${LOCATION_BASE_URL}/tpa-and-safelite-providers`,
method: 'GET'
},
GetCapabilityQuestions: {
url: `${PARTS_BASE_URL}/capability-questions`,
method: 'GET'

5
src/constants/error-messages.js
View file

@ -65,7 +65,10 @@ const errorMessages = Object.freeze({
DATE_REQUIRED: 'Please select a date',
TIME_REQUIRED: 'Please select an appointment time.',
PRIMARY_PHONE_REQUIRED: 'Primary phone number is required.',
BAILOUT_EMAIL_ADDRESS_REQUIRED: 'Email address is required.'
BAILOUT_EMAIL_ADDRESS_REQUIRED: 'Email address is required.',
TPA_SEARCH_ZIP_FORMAT: 'Please enter a valid Zip code.',
TPA_SEARCH_SHOP_FORMAT: 'Please enter a valid shop name.',
TPA_SEARCH_REQUIRED: 'Please enter a shop name or ZIP code.'
});
export default errorMessages;

3
src/constants/global-rules.js
View file

@ -28,7 +28,8 @@ const globalRules = Object.freeze({
ZIP_CODE_SEARCH_FORMAT: 'zip-code-search-format',
OPTION_REQUIRED: 'option-required',
PRIMARY_PHONE_REQUIRED: 'primary-phone-required',
BAILOUT_EMAIL_ADDRESS_REQUIRED: 'bailout-email-address-required'
BAILOUT_EMAIL_ADDRESS_REQUIRED: 'bailout-email-address-required',
TPA_SEARCH_FORMAT: 'tpa-search-format'
});
export default globalRules;

91
src/constants/tint-mapper.js
View file

@ -1,91 +0,0 @@
// TintMap with array keys by location, lowercase to avoid as much string mismatching as possible.
// Src assumes you have a @/assets/img/tints/, making the final value @/assets/img/tints/{Src} in the markup.
// See vehicle-parts for implementation example.
const tintMap = Object.freeze({
other: [
// Blue Shade
{ name: 'blue tint, blue shade', src: 'Glass-BlueShade-BlueTint.svg' },
{ name: 'brown tint, blue shade', src: 'Glass-BlueShade-BrownTint.svg' },
{ name: 'gray tint, blue shade', src: 'Glass-BlueShade-GrayTint.svg' },
{ name: 'green tint, blue shade', src: 'Glass-BlueShade-GreenTint.svg' },
{ name: 'clear, blue shade', src: 'Glass-BlueShade-NoTint.svg' },
// Brown Shade
{ name: 'brown tint, brown shade', src: 'Glass-BrownShade-BrownTint.svg' },
// Gray Shade
{ name: 'blue tint, gray shade', src: 'Glass-GrayShade-BlueTint.svg' },
{ name: 'brown tint, gray shade', src: 'Glass-GrayShade-BrownTint.svg' },
{ name: 'gray tint, gray shade', src: 'Glass-GrayShade-GrayTint.svg' },
{ name: 'green tint, gray shade', src: 'Glass-GrayShade-GreenTint.svg' },
// Green Shade
{ name: 'blue tint, green shade', src: 'Glass-GreenShade-BlueTint.svg' },
{ name: 'brown tint, green shade', src: 'Glass-GreenShade-BrownTint.svg' },
{ name: 'green tint, green shade', src: 'Glass-GreenShade-GreenTint.svg' },
// Tints Only
{ name: 'blue tint privacy', src: 'Glass-NoShade-BlueTint.svg' },
{ name: 'bronze tint', src: 'Glass-NoShade-BrownTint.svg' },
{ name: 'dark brown tint', src: 'Glass-NoShade-DarkBrownTint.svg' },
{ name: 'privacy, black frame', src: 'Glass-NoShade-Privacy.svg' },
{ name: 'gray tint', src: 'Glass-NoShade-GrayTint.svg' },
{ name: 'green tint', src: 'Glass-NoShade-GreenTint.svg' },
{ name: 'gray tint privacy', src: 'Glass-NoShade-GrayTint.svg' },
{ name: 'blue tint', src: 'Glass-NoShade-BlueTint.svg' },
{ name: 'green tint privacy', src: 'Glass-NoShade-GreenTint.svg' },
// No shade or tint
{ name: 'clear', src: 'Glass-NoShade-NoTint.svg' }
],
windshield: [
// Blue Shade
{ name: 'blue tint, blue shade', src: 'Windshield-BlueShade-BlueTint.svg' },
{ name: 'bronze tint, blue shade', src: 'Windshield-BlueShade-BrownTint.svg' },
{ name: 'gray tint, blue shade', src: 'Windshield-BlueShade-GrayTint.svg' },
{ name: 'green tint, blue shade', src: 'Windshield-BlueShade-GreenTint.svg' },
{ name: 'clear, blue shade', src: 'Windshield-BlueShade-NoTint.svg' },
// Brown Shade
{ name: 'bronze tint, bronze shade', src: 'Windshield-BrownShade-BrownTint.svg' },
// Gray Shade
{ name: 'blue tint, gray shade', src: 'Windshield-GrayShade-BlueTint.svg' },
{ name: 'brown tint, gray shade', src: 'Windshield-GrayShade-BrownTint.svg' },
{ name: 'gray tint, gray shade', src: 'Windshield-GrayShade-GrayTint.svg' },
{ name: 'green tint, gray shade', src: 'Windshield-GrayShade-GreenTint.svg' },
// Green Shade
{ name: 'blue tint, green shade', src: 'Windshield-GreenShade-BlueTint.svg' },
{ name: 'brown tint, green shade', src: 'Windshield-GreenShade-BrownTint.svg' },
{ name: 'green tint, green shade', src: 'Windshield-GreenShade-GreenTint.svg' },
// Tints Only
{ name: 'blue tint', src: 'Windshield-NoShade-BlueTint.svg' },
{ name: 'bronze tint', src: 'Windshield-NoShade-BrownTint.svg' },
{ name: 'dark brown tint', src: 'Windshield-NoShade-DarkBrownTint.svg' },
{ name: 'privacy, black frame', src: 'Windshield-NoShade-Privacy.svg' },
{ name: 'gray tint', src: 'Windshield-NoShade-GrayTint.svg' },
{ name: 'green tint', src: 'Windshield-NoShade-GreenTint.svg' },
{ name: 'gray tint privacy', src: 'Windshield-NoShade-GrayTint.svg' },
// No shade or tint
{ name: 'clear', src: 'Windshield-NoShade-NoTint.svg' }
]
});
// Gets the tint image source string given the glass location, and the tint description (like 'Green Tint')
// Use lowered strings here to try to avoid mismatch. Returns an empty string if array key doesn't exist.
// Returns undefined if no items are found.
const getTintImage = (glassLocation, colorString) => {
// Windshield glass has special images, all other glass uses the same though.
const glassLoc = (glassLocation.toLowerCase() !== 'windshield') ? 'other' : 'windshield';
if (tintMap[glassLoc] === undefined) {
return '';
}
return tintMap[glassLoc].find((item) => item.name.toLowerCase() === colorString.toLowerCase());
};
export default getTintImage;

25
src/digital-components/textbox-question/textbox-question.vue
View file

@ -309,22 +309,31 @@ input::-webkit-date-and-time-value {
.input-wrapper {
position: relative;
&.has-search-icon {
display:flex;
.form-control {
&:focus, &:focus-within {
border: 1px solid #0070d1;
}
max-height: 3rem;
}
input[type='text'] {
border-radius: $border-radius;
border-color: #0070d1;
box-shadow: rgba(0, 0, 0, 0.2) 0rem 0.0625rem .25rem 0rem;
border-right: none;
border-radius: 4.5rem 0 0 4.5rem;
height: 3rem;
&:focus, &:focus-within {
border-right:none;
}
}
button[type='submit'] {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
background-image: url($svg-search-icon);
background-repeat: no-repeat;
background-position: center;
border-radius: 0 $border-radius-lg $border-radius-lg 0;
border-radius: 0 4.5rem 4.5rem 0;
background-color: $blue-100;
width: 2.75rem;
height: 100%;
border: 1px solid $gray-500;
border: 1px solid #0070d1;
border-left: none;
display: flex;
}

24
src/helpers/global-rule-definer.js
View file

@ -125,6 +125,28 @@ function defineGlobalZipCodeRules() {
defineRule(globalRules.ZIP_CODE_SEARCH_FORMAT, regex(/^\d{5}$/, errorMessages.ZIP_FORMAT));
}
/**
* @summary Define global rules related to the zip code/shop name search on TPA Search page
*/
function defineGlobalTpaSearchRules() {
defineRule(globalRules.TPA_SEARCH_FORMAT, (value) => {
if (value.length === 0) {
return errorMessages.TPA_SEARCH_REQUIRED;
}
// Non Numeric
if (isNaN(value)) {
if (value.length < 3) {
return errorMessages.TPA_SEARCH_SHOP_FORMAT;
}
} else {
if (value.length != 5) {
return errorMessages.TPA_SEARCH_ZIP_FORMAT;
}
}
return true;
});
}
/**
* @function defineGlobalRules
* @summary Define all global rules
@ -138,6 +160,6 @@ export default function defineGlobalRules() {
defineGlobalPolicyNumberRules();
defineGlobalPolicyZipCodeRules();
defineGlobalZipCodeRules();
defineGlobalTpaSearchRules();
defineRule(globalRules.OPTION_REQUIRED, required(errorMessages.OPTION_REQUIRED));
}

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

@ -46,7 +46,7 @@ export function createUnorderedListFromStringOfParagraphs(stringOfParagraphs) {
*/
export function toTitleCase(text) {
let temp = text?.toLowerCase() ?? '';
return temp.replace(/(^|\s|-)\S/g, (letter) => letter.toUpperCase());
return temp.replace(/(^|\s|-|\/)\S/g, (letter) => letter.toUpperCase());
}
/**

10
src/iss-components/questions-page-layout/questions-page-layout.vue
View file

@ -6,7 +6,7 @@
<div class="iss-heritage-container-width">
<div class="questions-page-layout-container iss-heritage-content-container-width">
<siteSubHeader
class="mt-4"
class="mt-4 subheader"
cmsWidgetName="SiteSubHeaderWidget" />
<alert
v-if="alertFewMoreQuestionsHeader || alertFewMoreQuestionsCopy"
@ -129,6 +129,13 @@ export default {
padding-left: .9375rem;
padding-right: .9375rem;
}
.subheader {
:deep(strong) {
color: $black;
font-weight: 600;
text-transform: uppercase;
}
}
}
.questions-page {
@ -141,6 +148,7 @@ export default {
}
}
.need-help-link-container {
margin-top: 1.875rem;
margin-bottom: 2.25rem;
}
</style>

12
src/iss-components/site-footer/site-footer.vue
View file

@ -14,14 +14,13 @@
id="stacked"
class="col button-col d-flex px-0">
<buttonMain
v-if="!isForwardButtonHidden"
ref="buttonMain"
variant="navigation"
:buttonText="buttonText"
:class="
(disableForwardAction || isForwardActionDisabled) &&
'form-test-invalid'
"
:class="{
'form-test-invalid': (disableForwardAction || isForwardActionDisabled),
'hide-button': isForwardButtonHidden
}"
:aria-disabled="disableForwardAction || isForwardActionDisabled"
:isDisabled="disableForwardAction || isForwardActionDisabled"
data-test-id="site-footer-main-button"
@ -149,5 +148,8 @@ export default {
margin-top: 1.25rem;
}
}
.hide-button {
visibility: hidden;
}
}
</style>

119
src/iss-components/tpa-shop-list-button/tpa-shop-list-button.vue Normal file
View file

@ -0,0 +1,119 @@
<template>
<transition
name="fade"
mode="out-in">
<baseInputButton
v-bind="$props"
v-model="selectedValue"
buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 label-margin-bottom no-hover">
<div
:aria-label="buttonLabel"
class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
<div class="row-one">
<span
id="buttonLabelSpan"
class="m-0 button-label-copy"
:class="textPosition">{{ buttonLabel }}
</span>
<span
id="buttonLabelSubCopySpan"
class="m-0 caption ms-2"
:class="textPosition">{{ buttonLabelSubCopy }}
</span>
</div>
<div class="row-two">
<span
v-if="buttonBodyCopy"
id="buttonBodyCopy"
class="m-0 button-label-sub-copy"
v-html="buttonBodyCopy"></span>
</div>
<span
v-if="screenReaderOnlyText"
id="screenReaderOnlyTextSpan"
class="sr-only">
{{ screenReaderOnlyText }}
</span>
</div>
</baseInputButton>
</transition>
</template>
<script>
import baseInputButton from '@/digital-components/base-input-button/base-input-button.vue';
import inputButtonWrapperMixin from '@/mixins/input-button-wrapper-mixin';
import loader from '@/ux-components/loader/loader.vue';
export default {
name: 'tpa-shop-list-button',
components: {
baseInputButton,
loader
},
mixins: [inputButtonWrapperMixin],
};
</script>
<style lang="scss" scoped>
@import "@/styles/ux-variables-svg-strings.scss";
.list-button {
outline: none;
input[type="radio"],
input[type="checkbox"] {
position: static; //override bootstrap
&:checked + .list-button-content {
background: #e7f1f6;
border: 1px solid #0070d1;
}
}
}
.list-button-content {
color: $gray-600;
position: relative;
background: $white;
transition: all 150ms linear;
border-radius: $border-radius-lg;
border: 1px solid $gray-500;
width: 100%;
outline: none;
span {
&.small {
font-size: 0.75rem;
color: $gray-550;
}
}
}
.button-content {
row-gap: 0.25rem;
color: #4d4e53;
font-size: .9375rem;
font-weight: 400;
line-height: 1.625rem;
.row-one {
display: flex;
align-items: center;
line-height: 1.5rem;
.button-label-copy {
font-weight: 600;
line-height: 1.5rem;
text-transform: capitalize;
}
#buttonLabelSubCopySpan {
font-size: .75rem;
line-height: 1.5rem;
}
}
.row-two {
text-align: left;
}
}
div.col:not(:last-child) >.label-margin-bottom{
margin-bottom: 1rem;
}
</style>

214
src/layouts/tpa-search/__snapshots__/tpa-search.spec.js.snap
View file

@ -1,214 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`TPA search page returns the initial data 1`] = `
Object {
"additionalButtonData": Object {
"displayAvailabilityIndicators": false,
},
"dataLoaded": false,
"filter": "",
"mapZipCode": null,
"providers": Array [],
"reloadingProviders": false,
"rules": Object {
"filter": "option-required",
"provider": "option-required",
"zipCode": "zip-code-required|zip-code-search-format",
},
"selectedProviderNumber": "",
"shopListButton": Object {
"beforeMount": [Function],
"components": Object {
"baseInputButton": Object {
"computed": Object {
"buttonId": [Function],
"eventTypes": [Function],
"inputType": [Function],
"isChecked": [Function],
"isValueSelectedOnClick": [Function],
},
"data": [Function],
"emits": Array [
"update:modelValue",
],
"methods": Object {
"handleBlur": [Function],
"handleClick": [Function],
"handleEventAction": [Function],
"handleFocus": [Function],
"handleSelectionChange": [Function],
},
"mounted": [Function],
"name": "base-input-button",
"props": Object {
"buttonWrapperClasses": Array [
[Function],
[Function],
[Function],
],
"groupName": Object {
"required": true,
"type": [Function],
},
"inputClasses": Array [
[Function],
[Function],
[Function],
],
"isMultiSelect": [Function],
"isRequired": Object {
"default": true,
"type": [Function],
},
"lastValuePushedToGa": Array [
[Function],
[Function],
],
"modelValue": Object {
"required": true,
"validator": [Function],
},
"selectingInitiatesLoad": Object {
"default": false,
"type": [Function],
},
"setLastValuePushedToGa": [Function],
"suppressError": [Function],
"validationRules": Object {
"default": "",
"type": [Function],
},
"value": Object {
"required": true,
"type": Array [
[Function],
[Function],
],
},
"valueToLogType": [Function],
},
"render": [Function],
"setup": [Function],
},
"loader": Object {
"computed": Object {
"cssProps": [Function],
},
"methods": Object {
"captureClick": [Function],
},
"name": "loader",
"props": Object {
"allowPageInteraction": Object {
"default": false
"type": [Function],
},
"height": Object {
"default": 1,
"type": [Function],
},
"loaderColor": Object {
"type": [Function],
},
"loaderPosition": Object {
"type": [Function],
},
"width": Object {
"default": 1,
"type": [Function],
},
},
"render": [Function],
},
},
"computed": Object {
"availabilityRatingClass": [Function],
"badgeText": [Function],
"isLoaderDisplayed": [Function],
},
"data": [Function],
"mixins": Array [
Object {
"computed": Object {
"selectedValue": Object {
"get": [Function],
"set": [Function],
},
},
"model": Object {
"event": "change",
"prop": "modelValue",
},
"props": Object {
"additionalButtonData": [Function],
"additionalButtonStyling": [Function],
"altText": Object {
"default": "",
"type": [Function],
},
"buttonAuxiliaryCopy": [Function],
"buttonBodyCopy": [Function],
"buttonFooterCopy": [Function],
"buttonImage": [Function],
"buttonImageId": [Function],
"buttonLabel": Array [
[Function],
[Function],
],
"buttonLabelSubCopy": [Function],
"groupName": Object {
"required": true,
"type": [Function],
},
"isMultiSelect": [Function],
"isRequired": Object {
"default": true,
"type": [Function],
},
"isWide": [Function],
"lastValuePushedToGa": Array [
[Function],
[Function],
],
"modelValue": Object {
"required": true,
"validator": [Function],
},
"screenReaderOnlyText": [Function],
"selectingInitiatesLoad": Object {
"default": false,
"type": [Function],
},
"setLastValuePushedToGa": [Function],
"suppressError": [Function],
"textPosition": [Function],
"validationRules": Object {
"default": "",
"type": [Function],
},
"value": Object {
"required": true,
"type": Array [
[Function],
[Function],
],
},
"valueToLogType": [Function],
},
},
],
"name": "shop-list-button",
"render": [Function],
},
"widget": Object {
"filterByQuestion": "FilterByQuestion",
"noNetworkShopsAlert": "NoNetworkShopsAlertWidget",
"searchInstructions": "SearchInstructions",
"shopNotListedLink": "ShopNotListedLink",
"siteFooter": "SiteFooterWidget",
"siteHeader": "SiteHeaderWidget",
"tpaSearchQuestion": "TPASearchQuestion",
},
"zipCode": null,
}
`;

2224
src/layouts/tpa-search/tpa-search.spec.js
View file

File diff suppressed because it is too large Load diff

224
src/layouts/tpa-search/tpa-search.vue
View file

@ -15,26 +15,26 @@
<label
id="tpaSearchQuestionLabel"
for="tpaSearchQuestionField"
class="text-center fs-5 mt-5 mb-0 text-black w-100">
class="fs-5 mt-5 text-black w-100">
{{ tpaSearchQuestionLabel }}
</label>
<label
id="searchInstructions"
for="tpaSearchQuestionField"
class="text-center small darker-gray w-100 mb-4">
class="darker-gray w-100 mb-4">
{{ searchInstructionsText }}
</label>
<div class="mb-5">
<textboxQuestion
id="tpaSearchQuestionField"
v-model="zipCode"
v-model="tpaSearchValue"
inputId="tpaSearchQuestionFieldInput"
:cmsWidgetName="widget.tpaSearchQuestion"
:includeSearchIcon="true"
:displayQuestionText="false"
isRequired
:isDisabled="reloadingProviders"
:validationRules="rules.zipCode"
:validationRules="rules.tpaSearch"
@clickEvent="searchClick" />
</div>
</Form>
@ -52,10 +52,10 @@
@invalidSubmit="onInvalidSubmit">
<dropdownQuestion
id="searchRadiusFilter"
v-model="filter"
v-model="radiusFilter"
:cmsWidgetName="widget.filterByQuestion"
inputId="searchRadiusFilterInput"
:options="filterOptions"
:options="radiusFilterOptions"
disableAutoFill
:isDisabled="reloadingProviders"
:validationRules="rules.filter" />
@ -73,7 +73,7 @@
id="selectProviderQuestion"
v-model="selectedProviderNumber"
buttonTypeString="shopListButton"
:buttonTypeObject="shopListButton"
:buttonTypeObject="tpaShopListButton"
class="radioQuestion"
:answers="providerButtonData"
groupName="chooseShop"
@ -99,12 +99,23 @@
:text="shopNotListedModalLink"
@clickEvent="doNotSeeMyShopLinkClick" />
</div>
<hr>
<siteFooter
class="mt-6"
ref="siteFooter"
:cmsWidgetName="widget.siteFooter"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
@backClicked="navigateBack" />
<div class="need-help-link-container">
<textLink
id="needHelpLink"
v-if="needHelpLinkText"
linkType="navigation"
:text="needHelpLinkText"
href="#"
@clickEvent="needHelpLinkClick" />
</div>
</div>
</Form>
</div>
@ -123,7 +134,7 @@ import textLink from '@/ux-components/text-link/text-link.vue';
import alert from '@/ux-components/alert/alert.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import googleMap from '@/iss-components/google-map/google-map.vue';
import shopListButton from '@/iss-components/shop-list-button/shop-list-button.vue';
import tpaShopListButton from '@/iss-components/tpa-shop-list-button/tpa-shop-list-button.vue';
import loader from '@/ux-components/loader/loader.vue';
// Supporting files
@ -135,52 +146,9 @@ import widgetFields from '@/constants/cms-widget-fields.js';
import { shallowRef } from 'vue';
import { toTitleCase, toDisplayPhoneNumber } from '@/helpers/text-helper.js';
import bailoutMessage from '@/constants/bailoutMessage';
import settleAllPromises from '@/helpers/layout-helper';
import issPageValues from '@/router/router-constants/issPage-values';
const radiusFilterPairs = [
{ radius: 15, filter: '15 miles' },
{ radius: 25, filter: '25 miles' },
{ radius: 50, filter: '50 miles' },
{ radius: 100, filter: '100 miles' }
];
function convertRadiusFilterToInteger(filter) {
const pair = radiusFilterPairs.find((p) => p.filter === filter);
return pair?.radius ?? 0;
}
async function getInitialSearchData() {
const customerZipCode = useMainStore().order.customer.address.zipCode;
const serviceLocationZipCode = useMainStore().order.serviceLocation.zipCode;
const zipCode = serviceLocationZipCode ?? customerZipCode;
const { searchFilter } = useMainStore().order.serviceLocation;
let { providerNumber } = useMainStore().order.serviceLocation.provider;
let providers = [];
let radius = 0;
if (searchFilter) {
radius = convertRadiusFilterToInteger(searchFilter);
const result = await useMainStore().getTpaProviders(zipCode, radius);
providers = result?.data?.shopProviders ?? [];
return { zipCode, filter: searchFilter, providers, providerNumber };
}
providerNumber = null;
let pairIndex = 0;
let filter = '';
while (providers.length === 0 && pairIndex < radiusFilterPairs.length) {
const pair = radiusFilterPairs[pairIndex];
radius = pair.radius;
filter = pair.filter;
const result = await useMainStore().getTpaProviders(zipCode, radius);
providers = result?.data?.shopProviders ?? [];
pairIndex += 1;
}
return { zipCode, filter, providers, providerNumber };
}
export default {
name: 'tpa-search',
@ -198,23 +166,40 @@ export default {
},
mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) {
const { zipCode, filter, providers, providerNumber } =
await getInitialSearchData();
const cmsContent = await fetchCmsContentForPage(to.query.issPage);
const zipCode = useMainStore().order.customer.address.zipCode;
const pageData = useMainStore().pageData(to.query.issPage);
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
const providersPromise = useMainStore().getTpaAndSafeliteProviders(zipCode, pageData?.tpaSearchValue ?? '');
const promiseResultMap = [
{
resultKey: 'cmsContent',
promise: cmsContentPromise
},
{
resultKey: 'providers',
promise: providersPromise
}
];
const resultMap = await settleAllPromises(promiseResultMap);
next(async (vm) => {
vm.setCmsContent(cmsContent);
vm.setInitialSearchData(zipCode, filter, providers, providerNumber);
vm.setCmsContent(resultMap.cmsContent);
vm.mapZipCode = zipCode;
vm.providers = resultMap.providers;
if (pageData) {
vm.tpaSearchValue = pageData?.tpaSearchValue ?? vm.mapZipCode;
vm.radiusFilter = pageData?.radiusFilter ?? 25;
}
});
},
data() {
return {
dataLoaded: false,
zipCode: null,
pageData: null,
tpaSearchValue: null,
mapZipCode: null,
filter: '',
radiusFilter: null,
providers: [],
selectedProviderNumber: '',
selectedProviderNumber: useMainStore().order.serviceLocation.provider.providerNumber,
reloadingProviders: false,
additionalButtonData: {
displayAvailabilityIndicators: false
@ -226,28 +211,28 @@ export default {
filterByQuestion: 'FilterByQuestion',
noNetworkShopsAlert: 'NoNetworkShopsAlertWidget',
shopNotListedLink: 'ShopNotListedLink',
siteFooter: 'SiteFooterWidget'
siteFooter: 'SiteFooterWidget',
needHelpLink: 'NeedHelpLink'
},
rules: {
zipCode: `${globalRules.ZIP_CODE_REQUIRED}|${globalRules.ZIP_CODE_SEARCH_FORMAT}`,
tpaSearch: globalRules.TPA_SEARCH_FORMAT,
filter: globalRules.OPTION_REQUIRED, // TODO do we even need this?
provider: globalRules.OPTION_REQUIRED
},
shopListButton: shallowRef(shopListButton)
tpaShopListButton: shallowRef(tpaShopListButton)
};
},
computed: {
filterOptions() {
const filterByAnswers =
this.getCmsContent(
radiusFilterOptions() {
const radiusFilterOptions = this.getCmsContent(
this.widget.filterByQuestion,
widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
) ?? [];
const filterByAnswersObj = {};
[...filterByAnswers].forEach((answer) => {
filterByAnswersObj[answer.Name] = answer.Name;
});
return filterByAnswersObj;
const options = {};
for (const option of radiusFilterOptions) {
options[option.Name] = option.Text;
}
return options;
},
tpaSearchQuestionLabel() {
return this.getCmsContent(
@ -255,6 +240,9 @@ export default {
widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT
);
},
needHelpLinkText() {
return this.getCmsContent(this.widget.needHelpLink, widgetFields.TEXT_BLOCK_WIDGET.TEXT);
},
searchInstructionsText() {
return this.getCmsContent(
this.widget.searchInstructions,
@ -267,25 +255,25 @@ export default {
widgetFields.TEXT_BLOCK_WIDGET.TEXT
);
},
radiusInMiles() {
return convertRadiusFilterToInteger(this.filter);
},
noNetworkShopsAlertHeaderText() {
return this.getCmsContent(
this.widget.noNetworkShopsAlert,
widgetFields.ALERT_WIDGET.HEADLINE_TEXT
)?.replaceAll('{custom:radiusInMiles}', this.radiusInMiles);
)?.replaceAll('{custom:radiusInMiles}', this.radiusFilter + " miles");
},
radiusFilteredAndCappedProviders() {
return this.providers.filter((provider) => provider.distanceInMiles <= this.radiusFilter).slice(0, 5);
},
providerAddresses() {
return this.providers?.map((provider) => ({
title: provider.companyName,
return this.radiusFilteredAndCappedProviders?.map((provider) => ({
title: provider.companyName.toLowerCase(),
fullAddress: this.getFullProviderAddress(provider),
addressLines: [this.getProviderAddress(provider), this.getProviderCityZipState(provider)]
})) ?? [];
},
providerButtonData() {
return (
this.providers?.map((provider) =>
this.radiusFilteredAndCappedProviders?.map((provider) =>
this.getShopButtonDataFromProvider(provider)) ?? []
);
},
@ -296,14 +284,6 @@ export default {
}
},
watch: {
async filter() {
if (this.dataLoaded) {
await this.getProviderButtonData().then((providers) => {
this.providers = providers;
});
this.mapZipCode = this.zipCode;
}
},
providers(newProviders) {
if (this.dataLoaded) {
this.selectedProviderNumber =
@ -316,7 +296,6 @@ export default {
const provider = this.providers?.find((p) => p.providerNumber === newNumber);
if (provider && this.dataLoaded) {
useMainStore().updateServiceLocation({
searchFilter: this.filter,
zipCode: this.zipCode,
provider: {
providerNumber: provider?.providerNumber,
@ -340,13 +319,6 @@ export default {
}
},
methods: {
setInitialSearchData(zipCode, filter, providers, providerNumber) {
this.zipCode = zipCode;
this.mapZipCode = zipCode;
this.filter = filter;
this.providers = providers;
this.selectedProviderNumber = providerNumber;
},
getFullProviderAddress(provider) {
const addressLine1 = this.getProviderAddress(provider);
const addressLine2 = this.getProviderCityZipState(provider);
@ -377,16 +349,16 @@ export default {
}
return addressLine2;
},
async getProviderButtonData() {
async getProviderButtonData(shopName = "") {
this.reloadingProviders = true;
const getTpaProvidersResult = await useMainStore().getTpaProviders(
this.zipCode,
this.radiusInMiles
const getTpaProvidersResult = await useMainStore().getTpaAndSafeliteProviders(
this.mapZipCode,
shopName
);
this.reloadingProviders = false;
return getTpaProvidersResult?.data?.shopProviders ?? [];
return getTpaProvidersResult?.data ?? [];
},
doNotSeeMyShopLinkClick() {
needHelpLinkClick() {
this.mainStore.setBailout(bailoutMessage.RequestCallback());
this.$router.navigate(
this.navigationScenarios.CLICKED_NEED_HELP,
@ -394,8 +366,12 @@ export default {
);
},
async searchClick() {
this.providers = await this.getProviderButtonData();
this.mapZipCode = this.zipCode;
if (isNaN(this.tpaSearchValue)) {
this.providers = await this.getProviderButtonData(this.tpaSearchValue);
} else {
this.mapZipCode = this.tpaSearchValue;
this.providers = await this.getProviderButtonData();
}
},
forwardButtonAction() {
if (this.selectedProviderIsSafeliteShop) {
@ -405,16 +381,12 @@ export default {
? this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP
: this.navigationScenarios
.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP;
// Do not save the zip code as the tpa search value, prevents an outdated zipcode from being used
// as the default search value if customer goes back and changes zip earlier in the flow
const tpaSearchValueToSave = this.tpaSearchValue === this.mapZipCode ? '' : this.tpaSearchValue;
this.savePageDataToStore(issPageValues.TPA_SEARCH, {tpaSearchValue: tpaSearchValueToSave, radiusFilter: this.radiusFilter});
this.$router.navigate(scenario, this.$route);
},
getCustomValueFromString(str) {
switch (str) {
case 'radiusInMiles':
return this.radiusInMiles;
default:
return null;
}
},
getShopButtonDataFromProvider(provider) {
const cellNumber = toDisplayPhoneNumber(provider?.phoneNumber);
const distance =
@ -424,7 +396,7 @@ export default {
: null;
return {
buttonLabel: provider?.companyName ?? '',
buttonLabel: provider?.companyName.toLowerCase() ?? '',
buttonLabelSubCopy: distance === null ? '' : `${distance} mi`,
buttonBodyCopy: `${this.getFullProviderAddress(provider)}<br>${
cellNumber ?? ''
@ -440,4 +412,30 @@ export default {
.darker-gray {
color: map-get($colors, 'darker-gray');
}
#tpaSearchQuestionLabel {
margin-bottom: .625rem;
}
#map {
height: 27.1875rem;
}
#providerSelectionForm {
#alertNoNetworkProviders {
:deep(.alert) {
margin-bottom: 0px;
}
}
}
hr {
margin: 1.375rem 0;
}
.need-help-link-container {
margin-top:1.875rem;
margin-bottom: 2.1875rem;
}
</style>

73
src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js
View file

@ -41,13 +41,14 @@ function setupMocks({ glassNameProp, glassLocationProp, colorAnswersProp, modelV
};
const wrapper = shallowMount(glassPartQuestion, mountOptions);
// Mock store
const partsOrQuestions = pageData ?? { partsOrQuestions: [{ glassName: 'Stationary', glassLocation: 'Rear', parts: [] }] };
useMainStore().pageData = jest.fn();
useMainStore().pageData.mockReturnValue(partsOrQuestions);
document.querySelector = jest.fn().mockReturnValue({ clicked: false, click: jest.fn() });
const wrapper = shallowMount(glassPartQuestion, mountOptions);
return { wrapper };
}
@ -62,36 +63,23 @@ describe('glass-part-question.vue', () => {
window.console.log(wrapper.vm.featureListData['Green Tint'][0].Text);
// Assert
expect(Object.keys(wrapper.vm.featureListData).length).toBe(2);
expect(wrapper.vm.featureListData['Green Tint'][0].Text).toBe('heated glass, solar, 1 hole');
expect(wrapper.vm.featureListData['Green Tint'][0].Text).toBe('Heated glass, Solar, 1 Hole');
expect(wrapper.vm.featureListData['Green Tint'][0].Name).toBe('DB12209GTYN');
expect(wrapper.vm.featureListData['Gray Tint Privacy'][0].Text).toBe('heated glass, solar, 1 hole');
expect(wrapper.vm.featureListData['Gray Tint Privacy'][0].Text).toBe('Heated glass, Solar, 1 Hole');
expect(wrapper.vm.featureListData['Gray Tint Privacy'][0].Name).toBe('DB12209YPYN');
});
test('Tint mapper, should get tint image by glassLocation and tintColor', async () => {
test('Tint mapper, should get return css class based on tint color', async () => {
// Arrange
const { wrapper } = setupMocks(featureListData);
// Act
await wrapper.vm.$nextTick();
const tintSourceImage = wrapper.vm.getTintSourceImage('Rear', 'Green Tint');
const tintClass = wrapper.vm.convertTintToCSSClass('Green Tint');
// Assert
expect(tintSourceImage).toBe('Glass-NoShade-GreenTint.svg');
});
test('Tint mapper, should return empty string if no tint map found', async () => {
// Arrange
const { wrapper } = setupMocks(featureListData);
// Act
await wrapper.vm.$nextTick();
const tintSourceImage = wrapper.vm.getTintSourceImage('Rear', 'Crazy Rainbow Tint');
// Assert
expect(tintSourceImage).toBe('');
expect(tintClass).toBe('green-tint');
});
test('Should emit updateModelValue, and have correct attributes', async () => {
@ -122,7 +110,7 @@ describe('glass-part-question.vue', () => {
{ partNumber: 'DB12209GTYN', color: 'Green Tint' }
]);
expect(listCard.attributes('groupname')).toBe('Rear-Stationary');
expect(listCard.attributes('validationrules')).toBe('Rear-Stationary-tint-required');
expect(listCard.attributes('validationrules')).toBe('Rear-Stationary-part-required');
});
test('default is selected if only one option', async () => {
@ -136,58 +124,42 @@ describe('glass-part-question.vue', () => {
}
]
};
const updateSpy = jest.spyOn(glassPartQuestion.methods, 'updateSelectedPartNumber');
const { wrapper } = setupMocks(featureListData);
// Act
await wrapper.vm.$nextTick();
await wrapper.setData({ selectedTint: 'Green Tint' });
// take emitted value, pass down as modelValue
// yes, yes, it's not ideal
await wrapper.setProps({ modelValue: wrapper.emitted()['update:modelValue'][0][0] });
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.vm.selectedPartNumber).toBe('DB12209GTYN');
expect(updateSpy).toHaveBeenCalledWith('DB12209GTYN');
});
const partsForSelectedTintTestCases = [
const partsForLocationTestCases = [
[
'Rear',
'Stationary',
'Green Tint',
[
{ partNumber: 'Glass1', color: 'Green Tint' },
{ partNumber: 'Glass2', color: 'Blue Tint' },
{ partNumber: 'Glass3', color: 'Green Tint' },
{ partNumber: 'Glass4', color: 'Green Tint' },
{ partNumber: 'Glass6', color: 'Green Tint' }
{ partNumber: 'Glass5', color: 'Blue Tint' },
{ partNumber: 'Glass6', color: 'Green Tint' },
{ partNumber: 'Glass7', color: 'Red Tint' }
]
],
[
'Rear',
'Stationary',
'Blue Tint',
[
{ partNumber: 'Glass2', color: 'Blue Tint' },
{ partNumber: 'Glass5', color: 'Blue Tint' }
]
],
['Rear', 'Stationary', 'Red Tint', [{ partNumber: 'Glass7', color: 'Red Tint' }]],
[
'Windshield',
'Single',
'Green Tint',
[
{ partNumber: 'Windshield1', color: 'Green Tint' },
{ partNumber: 'Windshield2', color: 'Green Tint' }
]
],
['Windshield', 'Single', 'Blue Tint', []],
['Driver', 'Quarter', 'Green Tint', []]
['Driver', 'Quarter', []]
];
test.each(partsForSelectedTintTestCases)(
'partsForSelectedTint returns correct parts',
async (glassLocation, glassName, selectedTint, expectedResults) => {
test.each(partsForLocationTestCases)(
'partsForLocation returns correct parts',
async (glassLocation, glassName, expectedResults) => {
// Arrange
const pageData = { partsOrQuestions: [
{
@ -219,11 +191,8 @@ describe('glass-part-question.vue', () => {
pageData
});
// Act
await wrapper.setData({ selectedTint });
// Assert
expect(expectedResults).toEqual(wrapper.vm.partsForSelectedTint);
expect(wrapper.vm.partsForLocation).toEqual(expectedResults);
}
);
});

292
src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
View file

@ -1,44 +1,27 @@
<template>
<div class="row">
<p class="mb-0 color-question-text">
{{ colorQuestionText }}
</p>
<span class="glass-location-text">
{{ partType }}
</span>
</div>
<div class="nested-radio">
<div class="row my-2">
<div class="col">
<buttonQuestion
v-model="selectedTint"
:answers="tintSelectionOptions"
buttonTypeString="listCard"
:isWide="true"
altText=""
isRequired
:groupName="replaceAllSpaceWithDash(`${glassLocation}-${glassName}`)"
:validationRules="tintValidationRules">
<div
class="row my-2"
aria-live="polite">
<div class="col">
<buttonQuestion
id="glass-part-question"
v-model="selectedPartNumber"
buttonTypeString="radio"
class="radioQuestion"
:questionText="glassFeatureQuestion"
:answers="featureListData[selectedTint]"
textPosition="text-start"
:loaderEnabled="false"
isRequired
isSmallQuestionText
:groupName="replaceAllSpaceWithDash(`${glassLocation}-${glassName}-${selectedTint}`)"
:validationRules="partValidationRules" />
</div>
</div>
</buttonQuestion>
</div>
<template
v-for="(tint, index) in tintSelectionOptions"
:key="index">
<div class="tint-option">
<span>{{ `${partType} - ${tint}` }}</span>
<span :class="`tint-image ${convertTintToCSSClass(tint)}`"></span>
</div>
</div>
<buttonQuestion
id="glass-part-question"
v-model="selectedPartNumber"
buttonTypeString="list-button"
class="radioQuestion"
:answers="featureListData[tint]"
:loaderEnabled="false"
isRequired
:groupName="replaceAllSpaceWithDash(`${glassLocation}-${glassName}`)"
:validationRules="partValidationRules" />
</template>
</template>
<script>
@ -46,12 +29,10 @@
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
// Supporting files
import getTintImage from '@/constants/tint-mapper';
import getCustomTransformValue from '@/constants/dynamictext-mapper';
import { defineRule } from 'vee-validate';
import { required } from '@/helpers/validation-rules';
import errorMessages from '@/constants/error-messages';
import { useMainStore } from '@/store';
import { toTitleCase } from '@/helpers/text-helper';
export default {
name: 'glass-part-question',
@ -72,42 +53,21 @@ export default {
emits: ['update:modelValue'],
data() {
return {
glassColorQuestion: '',
glassFeatureQuestion: '',
selectedTint: ''
};
},
computed: {
tintValidationRules() {
const validationRuleName = `${this.glassLocation}-${this.glassName}-tint-required`;
defineRule(validationRuleName, required(errorMessages.OPTION_REQUIRED));
return validationRuleName;
},
partValidationRules() {
const validationRuleName = `${this.glassLocation}-${this.glassName}-part-required`;
defineRule(validationRuleName, required(errorMessages.OPTION_REQUIRED));
return validationRuleName;
},
colorQuestionText() {
return getCustomTransformValue(
this.glassColorQuestion,
`${this.glassLocation} ${this.glassName}`
);
},
tintSelectionOptions() {
const tintOptions = [];
Object.keys(this.featureListData).forEach((tintOption) => {
const buttonImage = this.getTintSourceImage(this.glassLocation, tintOption);
tintOptions.push({
value: tintOption,
buttonLabel: tintOption,
buttonImage: buttonImage ? require(`@/assets/img/tints/${buttonImage}`) : null
});
tintOptions.push(tintOption);
});
return tintOptions;
@ -115,21 +75,21 @@ export default {
selectedPartNumber: {
get() {
return this.modelValue?.partNumber;
return this.modelValue?.partNumber ?? '';
},
set(newValue) {
const part = this.partsForSelectedTint
.filter((partItem) => partItem.partNumber === newValue?.value)[0];
const part = this.partsForLocation
.filter((partItem) => partItem.partNumber === newValue)[0];
this.$emit('update:modelValue', part);
}
},
partsForSelectedTint() {
partsForLocation() {
const matchingGlass = this.PartDataFromApi.partsOrQuestions?.filter((dataForGlassLocationAndName) =>
dataForGlassLocationAndName.glassName === this.glassName
&& dataForGlassLocationAndName.glassLocation === this.glassLocation);
const matchingGlassParts = matchingGlass?.length === 1 ? matchingGlass[0].parts : [];
return matchingGlassParts.filter((part) => part.color === this.selectedTint) ?? [];
return matchingGlassParts;
},
// Creates a map of the feature list data in the correct Name/Value
@ -142,7 +102,7 @@ export default {
// Map the data to Name/Text object for ButtonQuestion
const mappedItem = item.FeatureAnswers.reduce((featureArr, it) => {
featureArr.Text = it.FeatureAnswerText; // Display to User
featureArr.Text = this.toTitleCaseWithExceptions(it.FeatureAnswerText); // Display to User
featureArr.Name = it.PartNumber; // Backing Value
return featureArr;
@ -158,72 +118,19 @@ export default {
PartDataFromApi() {
return this.mainStore.pageData(this.$route.query.issPage) ?? {};
}
},
watch: {
selectedTint() {
this.AutoSelectIfSinglePart();
},
partType() {
const type = this.partsForLocation?.[0]?.partType ?? '';
return toTitleCase(type);
}
},
mounted() {
this.LoadPreselectedValues();
this.AutoSelectIfSinglePart();
},
methods: {
// Initialize the component data
initializeComponent(cmsContent) {
this.glassColorQuestion = cmsContent.ColorQuestionWidget.QuestionText;
this.glassFeatureQuestion = cmsContent.FeatureQuestionWidget.QuestionText;
},
// Gets tint images based on the glass type, and tint name.
// Returns an empty string if the src or object is undefined.
getTintSourceImage(glassLocation, tintColor) {
const tintSourceObject = getTintImage(glassLocation, tintColor);
if (tintSourceObject === undefined || !tintSourceObject.src) {
return '';
}
return tintSourceObject.src;
},
AutoSelectIfSinglePart() {
if (this.partsForSelectedTint?.length > 0) {
// Check if only a single part is present for the tint and set the v-model if it is.
if (this.partsForSelectedTint?.length === 1) {
// select element with matching partNumber
this.updateSelectedPartNumber(this.partsForSelectedTint[0].partNumber);
} else {
this.selectedPartNumber = null;
}
}
},
// Loads the preselected values from the store.
LoadPreselectedValues() {
this.$nextTick(() => {
// Populate button-question model-value if parts data already exists in store
if (this.modelValue !== undefined) {
this.selectedTint = this.modelValue.color;
const { glassParts } = useMainStore().order.lineItems;
if (glassParts) {
for (const tintPart of this.partsForSelectedTint) {
for (const glassPart of glassParts) {
if (tintPart.partNumber === glassPart.partNumber) {
this.$nextTick(() => {
this.updateSelectedPartNumber(tintPart.partNumber);
});
return;
}
}
}
}
}
});
},
updateSelectedPartNumber(partNumber) {
this.selectedPartNumber = { value: partNumber };
this.selectedPartNumber = partNumber;
this.$nextTick(() => {
const radioInput = document.querySelector(`input[value=${this.selectedPartNumber}]`);
// Fire a click event on the input so the field is updated
@ -231,37 +138,128 @@ export default {
});
},
AutoSelectIfSinglePart() {
if (this.partsForLocation?.length > 0) {
// Check if only a single part is present for the tint and set the v-model if it is.
if (this.partsForLocation?.length === 1) {
// select element with matching partNumber
this.updateSelectedPartNumber(this.partsForLocation[0].partNumber);
}
}
},
replaceAllSpaceWithDash(str) {
return String(str).replaceAll(' ', '-');
},
convertTintToCSSClass(tint) {
return tint.toLowerCase().replaceAll(' ', '-').replaceAll(',', '');
},
toTitleCaseWithExceptions(text) {
const exceptions = ['side', 'glass', 'dimming'];
let temp = toTitleCase(text);
exceptions.forEach((exception) => {
const regEx = new RegExp(exception, 'ig');
temp = temp.replace(regEx, exception);
});
return temp;
}
}
};
</script>
<style lang="scss" scoped>
.nested-radio {
:deep(.ui-radio) {
flex-direction: column;
margin: 0.25rem 0;
}
p {
font-size: 0.875rem;
}
}
.color-question-text {
color: $black;
.glass-location-text {
font-weight: $font-weight-bold;
color: $black;
}
.tint-option {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 2rem;
margin-top: .5rem;
margin-bottom: .25rem;
font-weight: 600;
color: $black;
#glass-part-question {
span.fw-bold.w-100 {
margin-top: 0.5rem;
margin-bottom: 0;
@include media-breakpoint-up(md) {
justify-content: flex-start;
}
div.col.radio-button-container {
padding-bottom: 0;
}
.radioQuestion {
:deep(.list-button) {
margin-bottom: 1rem;
}
}
.tint-image {
width: 2rem;
height: 2rem;
margin-left: 1rem;
margin-top: -.25rem;
background-repeat: no-repeat;
background-image: url(~@/assets/img/tints/GlassTint.png);
}
.blue-tint-green-shade {
background-position: -53px -53px;
}
.blue-tint-blue-shade {
background-position: -160px -53px;
}
.gray-tint-gray-shade {
background-position: -267px -53px;
}
.blue-tint {
background-position: -373px -53px;
}
.gray-tint {
background-position: -480px -53px;
}
.green-tint-green-shade {
background-position: -53px -160px;
}
.green-tint-blue-shade {
background-position: -160px -160px;
}
.green-tint-gray-shade {
background-position: -267px -160px;
}
.green-tint {
background-position: -373px -160px;
}
.clear {
background-position: -480px -160px;
}
.bronze-tint-green-shade {
background-position: -53px -266px;
}
.bronze-tint-blue-shade {
background-position: -160px -266px;
}
.bronze-tint-gray-shade {
background-position: -267px -266px;
}
.bronze-tint-bronze-shade {
background-position: -373px -266px;
}
.bronze-tint {
background-position: -480px -266px;
}
.bronze-tint-privacy {
background-position: -587px -266px;
}
.clear-blue-shade {
background-position: -53px -373px;
}
.gray-tint-blue-shade {
background-position: -160px -373px;
}
.blue-tint-gray-shade {
background-position: -267px -373px;
}
.gray-tint-privacy {
background-position: -373px -373px;
}
.tinted {
background-position: -480px -373px;
}
</style>

93
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -11,34 +11,36 @@
<div class="vehicle-parts-container iss-heritage-content-container-width">
<siteSubHeader
ref="siteSubHeader"
class="mt-4"
class="mt-4 subheader"
cmsWidgetName="SiteSubHeaderWidget" />
<alert
id="vehicle-parts-alert"
class="mt-3 mb-3"
alertClass="alert-warning"
cmsWidgetName="AlertWidget"
:isDismissible="false" />
<div
v-for="(item, i) in PartsOrQuestions"
:key="i">
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
<hr v-if="i > 0" />
<glassPartQuestion
:ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
v-model="selectedGlassParts[item.glassLocation + '-' + item.glassName]"
:glassLocation="item.glassLocation"
:glassName="item.glassName"
:colorAnswers="item.colorAnswers"
:alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
<div class="body-container">
<div
v-for="(item, i) in PartsOrQuestions"
:key="i"
class="glass-question-container">
<glassPartQuestion
:ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
v-model="selectedGlassParts[item.glassLocation + '-' + item.glassName]"
:glassLocation="item.glassLocation"
:glassName="item.glassName"
:colorAnswers="item.colorAnswers"
:alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
</div>
</div>
<siteFooter
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="isForwardActionDisabled"
@backClicked="navigateBackByVehicleQuestions"
@ForwardClicked="forwardButtonAction" />
<div class="need-help-link-container">
<textLink
v-if="needHelpLinkText"
linkType="navigation"
:text="needHelpLinkText"
href="#"
@clickEvent="requestCallbackBailout" />
</div>
</div>
</div>
</div>
@ -51,7 +53,7 @@ import glassPartQuestion from '@/layouts/vehicle-parts/glass-part-question/glass
import siteHeader from '@/iss-components/site-header/site-header.vue';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import alert from '@/ux-components/alert/alert.vue';
import textLink from '@/ux-components/text-link/text-link.vue';
// Supporting Files
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
@ -61,6 +63,7 @@ import { Form } from 'vee-validate';
import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin';
import BaseFormMixin from '@/mixins/base-form-mixin.js';
import { useMainStore } from '@/store';
import widgetFields from '@/constants/cms-widget-fields';
export default {
name: 'vehicle-parts',
@ -70,7 +73,7 @@ export default {
siteHeader,
siteSubHeader,
siteFooter,
alert
textLink
},
mixins: [BaseFormMixin, vehicleQuestionsMixin],
async beforeRouteEnter(to, from, next) {
@ -87,17 +90,6 @@ export default {
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
// Glass Part Question dynamic component
Object.keys(vm.$refs)
.filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
.forEach((c) =>
vm.$refs[c][0].initializeComponent({
ColorQuestionWidget:
resultMap.cmsContent.ColorQuestionWidget,
FeatureQuestionWidget:
resultMap.cmsContent.FeatureQuestionWidget
}));
});
},
data() {
@ -154,6 +146,9 @@ export default {
RefPrefix() {
return 'partQuestion';
},
needHelpLinkText() {
return this.getCmsContent('NeedHelpLinkWidget', widgetFields.TEXT_BLOCK_WIDGET.TEXT);
}
},
mounted() {
@ -216,23 +211,47 @@ export default {
});
});
});
},
requestCallbackBailout() {
this.mainStore.setBailout(bailoutMessage.RequestCallback());
this.$router.navigate(navigationScenarios.CLICKED_NEED_HELP_WITH_BAILOUT, this.$route);
}
}
};
</script>
<style lang="scss" scoped>
.iss-heritage-container-width {
#app .iss-heritage-container-width {
.iss-heritage-content-container-width {
@include media-breakpoint-up(md) {
width: 58.33333333%;
}
}
.vehicle-parts-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
#vehicle-parts-alert {
.alert-heading {
margin-top: 0.25rem !important;
.subheader {
:deep(strong) {
text-transform: uppercase;
color: $black;
font-weight: 600;
}
}
.glass-question-container {
margin-bottom: 1.25rem;
}
.body-container {
margin-bottom: 1.875rem;
}
.need-help-link-container {
margin-bottom: 2.25rem;
}
}
}
</style>

4
src/router/router-constants/routing-table.js
View file

@ -248,6 +248,10 @@ const routingTable = () => [
{
scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
destinationIssPageValue: issPageValues.COVERAGE_STATEMENT
},
{
scenario: navigationScenarios.CLICKED_NEED_HELP_WITH_BAILOUT,
destinationIssPageValue: issPageValues.BAILOUT_PAGE
}
]
},

24
src/store/index.js
View file

@ -137,7 +137,7 @@ export const getDefaultState = () => ({
appointmentType: null,
isVehicleProtected: null,
IsSafeliteProvider: null,
searchFilter: null,
tpaSearchRadius: null,
provider: {
providerNumber: null,
address: {
@ -1033,8 +1033,24 @@ export const useMainStore = defineStore({
return this.getProviders(zipCode, radius, true)
},
getTpaProviders(zipCode, radius) {
return this.getProviders(zipCode, radius, false)
getTpaAndSafeliteProviders(zipCode, provderNameSearchString = "") {
const { parentAccountNumber } = this.order;
const carId = this.order.vehicle.carId;
const damageType = this.damage.isRepair ? 'Repair' : 'Install';
const parts = getLineItemsFlattened(this.order.lineItems.glassParts);
const partNumbers = parts.map((part) => part.partNumber).join(',');
let url = `${endpoints.GetTpaAndSafeliteProviders.url}/${zipCode}?accountNumber=${parentAccountNumber}&carId=${carId}&damageType=${damageType}&partNumbers=${partNumbers}`;
if (provderNameSearchString) {
url += `&providerNameSearchString=${provderNameSearchString}`;
}
return new Promise((resolve, reject) => {
globalMethods.callHttpClient({
method: endpoints.GetTpaAndSafeliteProviders.method,
endpoint: url
}).then((response) => resolve(response), (error) => reject(error));
});
},
getProviders(zipcode, radius, safeliteOnly) {
@ -1838,7 +1854,7 @@ export const useMainStore = defineStore({
phoneNumber: serviceLocationInfo.provider?.phoneNumber
};
}
this.order.serviceLocation.searchFilter = serviceLocationInfo.searchFilter;
this.order.serviceLocation.tpaSearchRadius = serviceLocationInfo.tpaSearchRadius;
},
resetState() {

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

@ -1966,53 +1966,65 @@ describe('Store', () => {
});
});
describe('getTpaProviders method', () => {
describe('getTpaAndSafeliteProviders method', () => {
describe('successful method call', () => {
it.each([[true, 'Repair'], [false, 'Replace']])(
'calls getProviders api endpoint',
it.each([[true, 'Repair'], [false, 'Install']])(
'calls getProviders api endpoint with damageType %s',
async (isRepair, damageType) => {
// Arrange
globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve({}));
const carId = getRandomString(10, 14);
const parentAccountNumber = getRandomString(6, 6);
const partNumber = getRandomString(6, 6);
store.order.parentAccountNumber = parentAccountNumber;
store.order.damage.isRepair = isRepair;
store.order.vehicle.carId = carId;
const zipCode = getRandomString(6, 6);
const radius = getRandomInt(5, 100);
const isBigTruck = false;
store.order.vehicle.isBigTruck = isBigTruck;
const expectedEndpoint = endpoints.GetProviders.url(
zipCode,
damageType,
radius,
parentAccountNumber,
'false',
carId,
null,
isBigTruck
);
store.order.lineItems.glassParts = [{ partNumber }];
const zipCode = getRandomString(5, 5);
const expectedEndpoint = `${endpoints.GetTpaAndSafeliteProviders.url}/${zipCode}?accountNumber=${parentAccountNumber}&carId=${carId}&damageType=${damageType}&partNumbers=${partNumber}`;
// Act
await store.getTpaProviders(zipCode, radius);
await store.getTpaAndSafeliteProviders(zipCode);
// Asserts
expect(globalMethods.callHttpClient).toHaveBeenCalledWith(expect.objectContaining({
method: endpoints.GetProviders.method,
method: endpoints.GetTpaAndSafeliteProviders.method,
endpoint: expectedEndpoint
}));
}
);
it('includes providerNameSearchString in endpoint when provided', async () => {
// Arrange
globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve({}));
const carId = getRandomString(10, 14);
const parentAccountNumber = getRandomString(6, 6);
const partNumber = getRandomString(6, 6);
store.order.parentAccountNumber = parentAccountNumber;
store.order.damage.isRepair = true;
store.order.vehicle.carId = carId;
store.order.lineItems.glassParts = [{ partNumber }];
const zipCode = getRandomString(5, 5);
const providerNameSearchString = 'Test Shop';
// Act
await store.getTpaAndSafeliteProviders(zipCode, providerNameSearchString);
// Asserts
expect(globalMethods.callHttpClient).toHaveBeenCalledWith(expect.objectContaining({
endpoint: expect.stringContaining(`&providerNameSearchString=${providerNameSearchString}`)
}));
});
it('Returns expected response object', async () => {
// Arrange
const response = { ReferralNumber: getRandomString(6, 6) };
globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve(response));
const zipCode = getRandomString(6, 6);
const radius = getRandomInt(5, 100);
const zipCode = getRandomString(5, 5);
// Act
const result = store.getTpaProviders(zipCode, radius);
const result = store.getTpaAndSafeliteProviders(zipCode);
// Asserts
await expect(result).resolves.toBe(response);
@ -2020,11 +2032,10 @@ describe('Store', () => {
it('null response by api => no exceptions thrown', async () => {
// Arrange
globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve(null));
const zipCode = getRandomString(6, 6);
const radius = getRandomInt(5, 100);
const zipCode = getRandomString(5, 5);
// Act
await store.getTpaProviders(zipCode, radius);
await store.getTpaAndSafeliteProviders(zipCode);
});
it('no providers returned by api => promise resolves to empty list', async () => {
// Arrange
@ -2034,11 +2045,10 @@ describe('Store', () => {
}
};
globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve(responseNoProviders));
const zipCode = getRandomString(6, 6);
const radius = getRandomInt(5, 100);
const zipCode = getRandomString(5, 5);
// Act
const result = await store.getTpaProviders(zipCode, radius);
const result = await store.getTpaAndSafeliteProviders(zipCode);
// Asserts
expect(result.data.shopProviders).toHaveLength(0);
@ -2060,7 +2070,7 @@ describe('Store', () => {
globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve(responseProviders));
// Act
const result = await store.getTpaProviders();
const result = await store.getTpaAndSafeliteProviders();
// Asserts
expect(result.data.shopProviders).toHaveLength(2);