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

Merge branch 'develop' into feature/INSR-7778

Browse source
This commit is contained in:
SujathaAnishetty 2025-12-15 14:47:09 -05:00
commit 33b1ac796e
16 changed files with 206 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/assets/img/heritage-loader-blue.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 33 KiB

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

@ -53,10 +53,10 @@ const errorMessages = Object.freeze({
POLICYHOLDER_LAST_NAME_REQUIRED: 'Please enter the policyholder last name',
ACKNOWLEDGEMENT_REQUIRED: 'You must agree to the terms to continue',
YEAR_REQUIRED: 'Please select your vehicle year',
MAKE_REQUIRED: 'Please select your vehicle make',
MODEL_REQUIRED: 'Please select your vehicle model',
STYLE_REQUIRED: 'Please select your vehicle style',
YEAR_REQUIRED: 'Vehicle year is required.',
MAKE_REQUIRED: 'Vehicle make is required.',
MODEL_REQUIRED: 'Vehicle model is required.',
STYLE_REQUIRED: 'Vehicle style is required.',
MOBILE_LOCATION_REQUIRED: 'Please enter your service address',
DATE_REQUIRED: 'Please select a date'
});

183
src/iss-components/loading-modal/loading-modal.vue
View file

@ -2,20 +2,24 @@
<div
v-if="showModalContent"
class="container-fluid modal-loader">
<div class="row g-2 h-100 d-flex align-items-center">
<div class="container-fluid overflow-hidden">
<div class="row h-100">
<div class="col text-center tagbg mb-4">
<div
class="spinner-border text-danger"
role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="modal-loader-background"></div>
<div class="modal-loader-content">
<div class="modal-loader-content-container">
<div class="modal-loader-spinner-container">
<div class="modal-loader-text">
Processing...
</div>
<div
class="modal-loader-spinner"
role="status">
<img
src="~@/assets/img/heritage-loader-blue.gif"
alt="Loading spinner" />
</div>
</div>
<div
v-if="showTextCarouselContent"
class="row">
class="row modal-loader-text-container">
<div class="col">
<div class="text-container slide">
<p
@ -94,71 +98,116 @@ export default {
@import "@/styles/ux-variables-svg-strings.scss";
.modal-loader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1057;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
outline: 0;
background: $gray-100;
.modal-loader-background,
.modal-loader-content {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
outline: 0;
}
.tagbg {
background-image: url($svg-loading-modal-image);
background-repeat: no-repeat;
background-position: center center;
background-size: 96px;
.modal-loader-background {
z-index: 1057;
background: #000;
opacity: 0.5;
}
.modal-loader-content {
z-index: 1058;
display: flex;
justify-content: center;
justify-content: flex-start;
align-items: center;
}
.spinner-border {
width: 6.5rem;
height: 6.5rem;
border: 0.45em solid currentColor;
border-right-color: transparent;
}
.text-container {
display: flex;
width: 350px;
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
position: relative;
&:after {
content: "";
background: rgb(245, 245, 245);
background: linear-gradient(
270deg,
rgba(245, 245, 245, 1) 0%,
rgba(245, 245, 245, 0) 5%,
rgba(245, 245, 245, 0) 95%,
rgba(245, 245, 245, 1) 100%
);
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
flex-direction: column;
@include media-breakpoint-up(xs) {
padding-top: 5rem;
}
&.slide p {
animation: slide-in 20s ease-in-out 1s forwards 1;
@include media-breakpoint-up(md) {
padding-top: 7rem;
}
p {
margin: 0 175px;
transform: translateX(180px);
.modal-loader-content-container {
min-width: 15rem; // 240px
min-height: 15rem; // 240px
font-weight: 600;
padding: 1rem 0;
display: flex;
align-items: flex-start;
justify-content: center;
background-color: #fff;
background-clip: padding-box;
outline: 0;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 0.375rem;
box-shadow: 0 .375rem 11rem rgba(0, 0, 0, .5);
.modal-loader-spinner-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #1574a1;
font-weight: 600;
.modal-loader-spinner {
margin-top: 0.75rem;
}
}
}
.tagbg {
background-image: url($svg-loading-modal-image);
background-repeat: no-repeat;
background-position: center center;
background-size: 96px;
display: flex;
justify-content: center;
align-items: center;
}
.text-container {
display: flex;
width: 350px;
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
position: relative;
&:after {
content: "";
background: rgb(245, 245, 245);
background: linear-gradient(
270deg,
rgba(245, 245, 245, 1) 0%,
rgba(245, 245, 245, 0) 5%,
rgba(245, 245, 245, 0) 95%,
rgba(245, 245, 245, 1) 100%
);
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
&.slide p {
animation: slide-in 20s ease-in-out 1s forwards 1;
}
p {
margin: 0 175px;
transform: translateX(180px);
}
}
}
}
</style>

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

@ -49,6 +49,7 @@
<script>
import textLink from '@/ux-components/text-link/text-link.vue';
import buttonMain from '@/ux-components/button-main/button-main.vue';
import showIssLoadingModal from '@/helpers/loading-modal-helper';
export default {
name: 'site-footer',
@ -97,6 +98,10 @@ export default {
buttonClick() {
// prevent keyboard input after button click
document.onkeydown = () => false;
if ((!this.disableForwardAction && !this.isForwardActionDisabled)) {
showIssLoadingModal(true);
}
this.$emit('forwardClicked');
},
linkClick() {

7
src/iss-components/site-header/progress-bar/progress-bar.vue
View file

@ -44,7 +44,7 @@ export default {
.progress-bar-header {
padding-right: 0.3125rem;
color: $progress-bar-color;
color: $progress-bar-success-color;
font-weight: 600;
font-size: 0.875rem;
line-height: 0.9375rem;
@ -63,9 +63,10 @@ export default {
margin-left: 0;
border-radius: $border-radius-pill;
overflow: visible;
background-color: $progress-bar-background-color;
.progress-bar {
background-color: $progress-bar-color;
background-color: $progress-bar-success-color;
border-radius: $border-radius-pill 0 0 $border-radius-pill;
overflow: visible;
@ -78,7 +79,7 @@ export default {
margin-top: -1px;
border: 0.125rem solid #ffffff;
border-radius: 50%;
background-color: $progress-bar-color;
background-color: $progress-bar-success-color;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
}

52
src/iss-components/site-sub-header/site-sub-header.vue
View file

@ -3,7 +3,7 @@
<div
class="subheader-primary d-flex overflow-hidden">
<h5
:class="[justifySubheaderSubText, headerColor]"
:class="[justifySubheader, headerColor]"
class="fw-normal mb-0 subheader-primary">
<span>
{{ content }}
@ -15,13 +15,13 @@
</h5>
</div>
<div
v-if="hasSubText"
:class="[justifySubheader, subHeaderClasses, subHeaderMarginClasses]"
class="subheader-secondary d-flex align-items-center overflow-hidden">
v-if="hasSecondaryText"
:class="[justifySubheaderSecondaryText, subHeaderClasses, subHeaderMarginClasses]"
class="subheader-secondary d-flex align-items-start overflow-hidden">
<p
class="dark-header"
:class="[alternateFormatting, subTextClasses]">
<span v-html="subText"> </span>
:class="[alternateFormatting, secondaryTextClasses]">
<span v-html="secondaryText"> </span>
</p>
</div>
</div>
@ -49,7 +49,7 @@ export default {
hasBackButton: Boolean,
issContainingPage: String,
justification: String,
justificationSubText: String,
justificationSecondaryText: String,
stripRteStyle: Boolean,
subContentProperty: String,
subHeaderClasses: String,
@ -57,7 +57,7 @@ export default {
type: String,
default: 'mt-1'
},
subTextClasses: String
secondaryTextClasses: String
},
emits: ['click-event'],
computed: {
@ -67,33 +67,33 @@ export default {
this.contentProperty ?? 'SubHeaderText'
);
},
subText() {
let subTextFromCms = this.getCmsContent(
secondaryText() {
let secondaryTextFromCms = this.getCmsContent(
this.cmsWidgetName,
this.subContentProperty ?? 'SecondaryText'
);
if (this.stripRteStyle) {
subTextFromCms = stripRteStyle(subTextFromCms);
secondaryTextFromCms = stripRteStyle(secondaryTextFromCms);
}
let subText = '';
if (this.doesCopyContainRouterLink(subTextFromCms)) {
splitCopyOnCMSPlaceHolder(subTextFromCms).forEach((sc) => {
let secondaryText = '';
if (this.doesCopyContainRouterLink(secondaryTextFromCms)) {
splitCopyOnCMSPlaceHolder(secondaryTextFromCms).forEach((sc) => {
if (this.doesCopyContainRouterLink(sc)) {
subText += getRouterLinkHtmlStringFromCopy(sc);
secondaryText += getRouterLinkHtmlStringFromCopy(sc);
} else {
subText += sc;
secondaryText += sc;
}
});
} else {
subText = subTextFromCms;
secondaryText = secondaryTextFromCms;
}
return subText ?? '';
return secondaryText ?? '';
},
hasSubText() {
return this.subText.length > 0;
hasSecondaryText() {
return this.secondaryText.length > 0;
},
backButtonAccessibleText() {
return this.getCmsContent(
@ -102,15 +102,15 @@ export default {
);
},
headerColor() {
return this.subText ? 'dark-header' : 'light-header';
return this.secondaryText ? 'dark-header' : 'light-header';
},
justifySubheader() {
return this.justification?.toLowerCase() === 'left'
? 'justify-content-left'
: 'justify-content-center';
return this.justification?.toLowerCase() === 'center'
? 'justify-content-center'
: 'justify-content-left';
},
justifySubheaderSubText() {
return this.justificationSubText?.toLowerCase() === 'center'
justifySubheaderSecondaryText() {
return this.justificationSecondaryText?.toLowerCase() === 'center'
? 'justify-content-center'
: 'justify-content-left';
},

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

@ -15,7 +15,7 @@
<siteSubHeader
class="mb-5 mt-4 px-3"
cmsWidgetName="SiteSubHeaderWidget"
subTextClasses="text-center"
secondaryTextClasses="text-center"
subHeaderClasses="mt-4" />
<div class="main-content-container">
<hr class="my-0" />

2
src/layouts/schedule-page/schedule-page.vue
View file

@ -14,7 +14,7 @@
<div class="schedule-page-container iss-heritage-content-container-width">
<siteSubHeader
cmsWidgetName="ScheduleSubHeaderWidget"
subTextClasses="text-center small sub-text"
secondaryTextClasses="text-center small sub-text"
class="mt-4" />
<template v-if="ChangeShopLink.length">
<textBlock

14
src/layouts/service-location/service-location.vue
View file

@ -53,6 +53,12 @@
class="my-5"
cmsWidgetName="AlertNoShopsWidget"
alertClass="alert-warning" />
<alert
v-if="displayBigTruckNoShops"
ref="alertBigTruckNoShops"
class="my-5"
cmsWidgetName="AlertBigTruckNoShopsWidget"
alertClass="alert-warning" />
<div class="appointment-type">
<appointmentTypeQuestion
v-show="isAppointmentTypeDisplayed"
@ -361,7 +367,10 @@ export default {
return this.zipContainsMilitaryBase && this.isServiceableMobile;
},
displayNoShopsAlert() {
return !this.isServiceableInshop && !this.isServiceableMobile;
return !this.isBigTruck && !this.isServiceableInshop && !this.isServiceableMobile;
},
displayBigTruckNoShops() {
return this.isBigTruck && !this.isServiceableInshop && !this.isServiceableMobile;
},
displayRecalibrationWarning() {
return this.requiresInshopRecalibration;
@ -381,6 +390,9 @@ export default {
return isNoComp || isITAC
? this.navigationScenarios.CLICKED_BACK_CANNOT_REACH_TPA_FLOW
: this.navigationScenarios.CLICKED_BACK_CAN_REACH_TPA_FLOW;
},
isBigTruck() {
return this.mainStore.order.vehicle.isBigTruck;
}
},
methods: {

11
src/layouts/service-packages/service-packages.vue
View file

@ -112,16 +112,19 @@ export default {
const { feeItems } = store.order.lineItems;
let availableLineItems = [];
const availableLineItems = [];
if ( resultMap?.rainDefense?.length > 0 )
if (resultMap?.rainDefense?.length > 0) {
availableLineItems.push(resultMap.rainDefense);
}
if ( resultMap?.wipers?.length > 0 )
if (resultMap?.wipers?.length > 0) {
availableLineItems.push(...resultMap.wipers);
}
if ( feeItems?.length > 0 )
if (feeItems?.length > 0) {
availableLineItems.push(...feeItems);
}
let hasBailedOut = false;
await store.getCombinedQuote(availableLineItems)

14
src/layouts/vehicle-selection/vehicle-question/vehicle-question.vue
View file

@ -3,8 +3,9 @@
v-model="selectedValue"
:options="values"
disableAutoFill
placeHolderText="Select an option"
:isDisabled="!values.length" />
:placeHolderText="isDisabled ? '' : placeHolderText"
:cmsWidgetName="cmsWidgetName"
:isDisabled="isDisabled" />
</template>
<script>
@ -18,7 +19,8 @@ export default {
},
props: {
modelValue: String,
updateValues: Function
updateValues: Function,
cmsWidgetName: String
},
emits: ['update:modelValue'],
data() {
@ -37,6 +39,12 @@ export default {
const newValue = newIndex != null && newIndex > -1 ? this.values[newIndex] : null;
this.$emit('update:modelValue', newValue);
}
},
isDisabled() {
return this.values.length === 0;
},
placeHolderText() {
return this.getCmsContent(this.cmsWidgetName, 'ButtonText');
}
},
methods: {

14
src/store/index.js
View file

@ -1032,7 +1032,7 @@ export const useMainStore = defineStore({
},
getTpaProviders(zipCode, radius) {
const { carId } = this.order.vehicle;
const { carId, isBigTruck } = this.order.vehicle;
const damageType = this.damage.isRepair ? 'Repair' : 'Replace';
const { parentAccountNumber } = this.order;
const partsWithRecal = getTopLevelGlassPartsWithRecal(this.order.lineItems.glassParts);
@ -1043,6 +1043,7 @@ export const useMainStore = defineStore({
if (windshieldPartWithRecal) {
url += `/${windshieldPartWithRecal.partNumber}`;
}
url += `/${isBigTruck}`;
return new Promise((resolve, reject) => {
globalMethods.callHttpClient({
@ -1242,16 +1243,9 @@ export const useMainStore = defineStore({
if (availableLineItems && availableLineItems.length > 0) {
const { vehicle, serviceLocation, policy, eon, referralNumber, referralDate, referralSequenceNumber, lineItems } = this.order;
const availableLineItemsFiltered = availableLineItems.filter((lineItem) => {
if ( lineItem.partNumber )
return true;
else
return false;
});
const availableLineItemsFiltered = availableLineItems.filter((lineItem) => !!(lineItem.partNumber));
const lineItemsWithOnlyPartNumbers = availableLineItemsFiltered.map((lineItem) => {
return {partNumber: lineItem.partNumber};
});
const lineItemsWithOnlyPartNumbers = availableLineItemsFiltered.map((lineItem) => ({ partNumber: lineItem.partNumber }));
const payload = {
ParentAccountNumber: this.order.parentAccountNumber,

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

@ -1930,6 +1930,8 @@ describe('Store', () => {
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,
@ -1937,7 +1939,8 @@ describe('Store', () => {
radius,
parentAccountNumber,
'false',
carId
carId,
isBigTruck
].join('/');
// Act

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

@ -9,7 +9,8 @@
$accent-color: #09748b;
$link: #09748b;
$svg-fill-color: '%2309748b'; // Color of calendar icon. Place HEX code *after* %23
$progress-bar-color: #181643;
$progress-bar-success-color: #1a1446;
$progress-bar-background-color: #ffffff;
svg,
.modal-text {
@ -29,15 +30,17 @@
.progress-bar-container {
.progress-bar-header {
color: $progress-bar-color;
color: $progress-bar-success-color;
}
.progress {
background-color: $progress-bar-background-color;
.progress-bar {
background-color: $progress-bar-color;
background-color: $progress-bar-success-color;
.progress-bar-middle {
background-color: $progress-bar-color;
background-color: $progress-bar-success-color;
}
}
}

3
src/styles/common-error-styles.scss
View file

@ -197,8 +197,7 @@ html {
.form-test-error {
color: $red;
font-size: 0.875rem;
font-weight: 500;
font-size: 1rem;
}
.form-test-invalid {

3
src/styles/ux-variables.scss
View file

@ -156,7 +156,8 @@ $border-radius-lg: 0.5rem; //Used for buttons. Can be used for other things, of
$border-radius-pill: 50rem;
//Progress Bar Styling
$progress-bar-color: $green;
$progress-bar-success-color: $green;
$progress-bar-background-color: #cacbcc;
//Spacing
// 8 spacers available instead of the usual 5