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-09 16:59:47 -05:00
commit a1f1ac0c20
17 changed files with 269 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
playwright-tests/tests/mockResponses/0001a_Advanced_Replace_Deductible_Client/parts/api/v1/parts/rain-defense.json → playwright-tests/tests/mockResponses/0001a_Advanced_Replace_Deductible_Client/parts/api/v1/parts/rain-repel.json
View file

0
playwright-tests/tests/mockResponses/0002a_Advanced_Replace_Deductible_Client/parts/api/v1/parts/rain-defense.json → playwright-tests/tests/mockResponses/0002a_Advanced_Replace_Deductible_Client/parts/api/v1/parts/rain-repel.json
View file

2
playwright-tests/tests/mockResponses/mockResponsesConfig.json
View file

@ -19,7 +19,7 @@
"location/api/v1/location/providers/75023/Replace/100/550036/true/CR00056707/DW01571GTNNOEM": "0002a_Advanced_Replace_Deductible_Client/location/api/v1/location/providers/75023/Replace/100/550036/true/CR00056707/DW01571GTNNOEM.json",
"schedule/api/v1/schedule/shop-time-slots": "0002a_Advanced_Replace_Deductible_Client/schedule/api/v1/schedule/shop-time-slots.json",
"location/api/v1/location/alert-reasons/01813": "0002a_Advanced_Replace_Deductible_Client/location/api/v1/location/alert-reasons/01813.json",
"parts/api/v1/parts/rain-defense": "0002a_Advanced_Replace_Deductible_Client/parts/api/v1/parts/rain-defense.json",
"parts/api/v1/parts/rain-repel": "0002a_Advanced_Replace_Deductible_Client/parts/api/v1/parts/rain-repel.json",
"price/api/v1/price/combined-quote": "0002a_Advanced_Replace_Deductible_Client/price/api/v1/price/combined-quote.json"
}
}

BIN
src/assets/img/icons/select-error.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/assets/img/icons/select.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

2
src/constants/endpoints.js
View file

@ -97,7 +97,7 @@ const endpoints = Object.freeze({
method: 'GET'
},
GetRainDefense: {
url: `${PARTS_BASE_URL}/rain-defense`,
url: `${PARTS_BASE_URL}/rain-repel`,
method: 'GET'
},
GetRecalParts: {

82
src/constants/progress-bar-mapper.js Normal file
View file

@ -0,0 +1,82 @@
export const pageProgressMapper = {
'duplicate-check': {
percent: 10
},
'policy-holder-details': {
percent: 15
},
'policy-vehicles': {
percent: 15
},
'policy-endorsements': {
percent: 15
},
'vehicle-selection': {
percent: 20
},
'vehicle-damage': {
percent: 30
},
'part-questions': {
percent: 35
},
'molding-questions': {
percent: 40
},
'vehicle-parts': {
percent: 40
},
'capability-questions': {
percent: 40
},
'vehicle-lookup': {
percent: 45
},
'vin-lookup': {
percent: 50
},
'license-plate-lookup': {
percent: 50
},
'address-lookup': {
percent: 50
},
'address-vehicles': {
percent: 50
},
'coverage-statement': {
percent: 55
},
'provider-preference': {
percent: 60
},
'service-location': {
percent: 65
},
'schedule-page': {
percent: 70
},
'contact-details': {
percent: 80
},
'service-packages': {
percent: 85
},
'payment-method': {
percent: 90
},
'payment-page': {
percent: 95
},
'tpa-search': {
percent: 85
},
'tpa-confirmation': {
percent: 100
},
'order-confirmation': {
percent: 100
}
};
export const getProgressBarPercentage = (page) => pageProgressMapper[page]?.percent || 0;

18
src/digital-components/dropdown-question/dropdown-question.vue
View file

@ -132,29 +132,23 @@ export default {
margin-bottom: 0.25rem;
}
.form-select {
border: 1px solid $gray-500;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
border: $border-input;
background-image: url(~@/assets/img/icons/select.png);
background-size: 0.625rem 1rem;
color: $gray-600;
border-radius: 0.5rem;
border-radius: $border-radius;
min-height: 3rem;
letter-spacing: inherit;
box-shadow: $box-shadow-input;
&:focus,
&:focus-visible {
box-shadow: 0 0 0 2.5px $blue;
border: $border-input-focus;
}
&:disabled,
&.disabled {
background-color: $gray-100;
color: $gray-500;
filter: grayscale(100%);
&:hover {
box-shadow: 0 0 0 4px transparent;
border: 1px solid $gray-500;
}
}
&:hover {
border: 1px solid $gray-500;
box-shadow: 0 0 0 4px $blue-300;
}
}
}

15
src/digital-components/textarea-question/textarea-question.vue
View file

@ -153,27 +153,20 @@ export default {
.form-control {
max-height: 30rem;
border: 1px solid $gray-500;
border-radius: 0.5rem;
border: $border-input;
border-radius: $border-radius;
padding: 12px 16px;
letter-spacing: inherit;
box-shadow: $box-shadow-input;
&::placeholder {
color: $gray-500;
}
&:focus {
box-shadow: 0 0 0 2.5px $blue;
border: $border-input-focus;
}
&:disabled,
&.disabled {
background-color: $gray-100;
&:hover {
box-shadow: 0 0 0 4px transparent;
border: 1px solid $gray-500;
}
}
&:hover {
border: 1px solid $gray-500;
box-shadow: 0 0 0 4px $blue-300;
}
}
}

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

@ -275,7 +275,7 @@ input::-webkit-date-and-time-value {
position: relative;
&.has-search-icon {
input[type='text'] {
border-radius: $border-radius-lg;
border-radius: $border-radius;
}
button[type='submit'] {
position: absolute;
@ -329,29 +329,22 @@ input::-webkit-date-and-time-value {
margin-bottom: 0.25rem;
}
.form-control {
border: 1px solid $gray-500;
border-radius: 0.5rem;
border: $border-input;
border-radius: $border-radius;
min-height: 3rem;
max-height: 3rem;
padding: 0.75rem 1rem;
letter-spacing: inherit;
box-shadow: $box-shadow-input;
&::placeholder {
color: $gray-500;
}
&:focus {
box-shadow: 0 0 0 2.5px $blue;
&:focus, &:focus-within {
border: $border-input-focus;
}
&:disabled,
&.disabled {
background-color: $gray-100;
&:hover {
box-shadow: 0 0 0 4px transparent;
border: 1px solid $gray-500;
}
}
&:hover {
border: 1px solid $gray-500;
box-shadow: 0 0 0 4px $blue-300;
}
}
p {

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

@ -0,0 +1,87 @@
<template>
<div
v-if="progress > 0"
class="progress-bar-container">
<div class="progress-bar-header">
<span aria-hidden="true">{{ progress }}%</span>
</div>
<div class="progress">
<div
class="progress-bar progress-bar-success"
role="progressbar"
:aria-valuetext="`Scheduling progress ${progress}%`"
aria-valuemin="0"
aria-valuemax="100"
:style="{ width: progress + '%' }">
<div class="progress-bar-middle"></div>
</div>
</div>
</div>
</template>
<script>
import { getProgressBarPercentage } from '@/constants/progress-bar-mapper';
import { useMainStore } from '@/store';
export default {
name: 'progress-bar',
data() {
return {
progress: this.getProgress()
};
},
methods: {
getProgress() {
const pageName = useMainStore().applicationUser.lastPageVisited;
return getProgressBarPercentage(pageName);
}
}
};
</script>
<style lang="scss">
.progress-bar-container {
display: flex;
.progress-bar-header {
padding-right: 0.3125rem;
color: $progress-bar-color;
font-weight: 600;
font-size: 0.875rem;
line-height: 0.9375rem;
text-align: right;
}
.progress {
@include media-breakpoint-up(xs) {
min-width: 5.9375rem;
}
@include media-breakpoint-up(md) {
min-width: 17.1875rem;
}
margin-left: 0;
border-radius: $border-radius-pill;
overflow: visible;
.progress-bar {
background-color: $progress-bar-color;
border-radius: $border-radius-pill 0 0 $border-radius-pill;
overflow: visible;
.progress-bar-middle {
width: 1.0625rem;
height: 1.0625rem;
position: relative;
margin-right: -8.5px;
margin-left: auto;
margin-top: -1px;
border: 0.125rem solid #ffffff;
border-radius: 50%;
background-color: $progress-bar-color;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
}
}
}
</style>

29
src/iss-components/site-header/site-header.vue
View file

@ -3,11 +3,16 @@
class="site-header-container"
:style="logoBackgroundStyle">
<div class="site-header iss-heritage-container-width">
<img
id="siteHeaderImage"
class="img-fluid"
:src="imageSrc"
:alt="altText" />
<div class="header-logo-container">
<img
id="siteHeaderImage"
class="img-fluid"
:src="imageSrc"
:alt="altText" />
</div>
<div class="header-progress-bar-container">
<progressBar />
</div>
</div>
<alert
v-if="displayGlobalAlert"
@ -25,11 +30,12 @@ import alert from '@/ux-components/alert/alert.vue';
import { useMainStore } from '@/store';
import eventBus from '@/helpers/event-bus/event-bus';
import { globalEvents } from '@/constants/events';
import progressBar from '@/iss-components/site-header/progress-bar/progress-bar.vue';
export default {
name: 'site-header',
components: {
alert
alert, progressBar
},
props: {
cmsWidgetName: String
@ -139,9 +145,20 @@ export default {
}
.site-header {
display: flex;
@include media-breakpoint-down(md) {
margin: 0 -.75rem;
}
.header-logo-container {
flex: 1 1 auto;
}
.header-progress-bar-container {
flex: 0 1 auto;
display: flex;
align-items: center;
justify-content: flex-end;
}
}
}

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

@ -112,11 +112,16 @@ export default {
const { feeItems } = store.order.lineItems;
const availableLineItems = [
resultMap.rainDefense,
...resultMap.wipers,
...feeItems
];
let availableLineItems = [];
if ( resultMap?.rainDefense?.length > 0 )
availableLineItems.push(resultMap.rainDefense);
if ( resultMap?.wipers?.length > 0 )
availableLineItems.push(...resultMap.wipers);
if ( feeItems?.length > 0 )
availableLineItems.push(...feeItems);
let hasBailedOut = false;
await store.getCombinedQuote(availableLineItems)
@ -195,7 +200,6 @@ export default {
}
};
</script>
<style lang="scss" scoped>
.iss-heritage-container-width {
.service-packages-container {

13
src/store/index.js
View file

@ -1242,6 +1242,17 @@ 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 lineItemsWithOnlyPartNumbers = availableLineItemsFiltered.map((lineItem) => {
return {partNumber: lineItem.partNumber};
});
const payload = {
ParentAccountNumber: this.order.parentAccountNumber,
BillToAccountNumber: this.billToAccountNumber,
@ -1259,7 +1270,7 @@ export const useMainStore = defineStore({
ServiceZipCode: serviceLocation.zipCode,
IsReplacement: !this.isRepair,
ServerData: lineItems.serverData,
LineItems: getLineItemsFlattened(availableLineItems),
LineItems: lineItemsWithOnlyPartNumbers,
FeatureToggles: getFeatureTogglesPayloadObject(this.experimentSettings)
};

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

@ -11,6 +11,7 @@
$button-color: #a9e3e9;
$button-text-color: #181643;
$svg-fill-color: '%2309748b'; // Color of calendar icon. Place HEX code *after* %23
$progress-bar-color: #181643;
//Variables
--iss-loader-color: #{$button-text-color};
@ -76,6 +77,22 @@
}
}
}
.progress-bar-container {
.progress-bar-header {
color: $progress-bar-color;
}
.progress {
.progress-bar {
background-color: $progress-bar-color;
.progress-bar-middle {
background-color: $progress-bar-color;
}
}
}
}
}
// End Liberty Mutual, SafeCo

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

@ -1,3 +1,5 @@
@import "@/styles/ux-variables-svg-strings.scss";
html {
.has-error {
@ -111,27 +113,20 @@ html {
input,
input.form-control,
select,
select.form-select {
border: 1px solid $red;
&:focus {
border: 1px solid transparent;
box-shadow: 0 0 0 2.5px $red;
}
&:hover {
box-shadow: 0px 0px 0px 4px $red-200;
border-radius: 0.5rem;
border: 1px solid $red;
}
select.form-select,
input:focus,
input.form-control:focus,
input.form-control:focus-within,
select:focus,
select.form-select:focus {
border-color: $red;
}
select,
select.form-select {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%23d4281c'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 16px 12px;
select.form-select,
select:focus,
select.form-select:focus {
background-image: url(~@/assets/img/icons/select-error.png);
}
}
}

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

@ -155,6 +155,9 @@ $border-radius-sm: 0.2rem;
$border-radius-lg: 0.5rem; //Used for buttons. Can be used for other things, of course.
$border-radius-pill: 50rem;
//Progress Bar Styling
$progress-bar-color: $green;
//Spacing
// 8 spacers available instead of the usual 5
$spacer: 1rem;
@ -193,6 +196,7 @@ $box-shadow: 0 0.5rem 1rem rgba($black, 0.15);
$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075);
$box-shadow-lg: 0 1rem 3rem rgba($black, 0.25); //Safelite default
$box-shadow-inset: inset 0 1px 2px rgba($black, 0.075);
$box-shadow-input: rgba($black, 0.2) 0rem 0.0625rem 0.3125rem 0rem;
//Alerts
$alert-bg-scale: -90%;
@ -209,3 +213,6 @@ $enable-important-utilities: false;
// Letter Spacing
$letter-spacing-primary: 0.03em;
// Borders
$border-input: 1px solid rgba(179, 180, 181);
$border-input-focus: 2.5px solid $blue;