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

Merge pull request #1002 from Safelite/feature/INSR-7977

Browse source 
INSR-7977: Policy-vehicles UI updates
This commit is contained in:
katiekroell 2026-01-14 11:19:54 -05:00 committed by GitHub
commit 80ced3018a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 60 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/layouts/address-vehicles/address-vehicles.vue
View file

@ -186,7 +186,7 @@ export default {
VehiclesForQuestions() {
// Map API result data, to address-vehicles data structure
const mappedData = this.VehiclesFromApi.map((v) => {
const maskSymbol = 'X';
const maskSymbol = '*';
const vinStart = maskSymbol.repeat(v.vin.length - 6);
const vinEnd = v.vin.substring(v.vin.length - 6);
return {

16
src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue
View file

@ -1,13 +1,13 @@
<template>
<buttonQuestion
ref="policyVehiclesQuestion"
v-model="selectedVehicleVin"
groupName="policyVehiclesQuestionOption"
buttonTypeString="listButton"
isOverflowScrollable
:answers="answers"
isRequired
:validationRules="validationRules" />
ref="policyVehiclesQuestion"
v-model="selectedVehicleVin"
groupName="policyVehiclesQuestionOption"
buttonTypeString="listButton"
isOverflowScrollable
:answers="answers"
isRequired
:validationRules="validationRules" />
</template>
<script>
import buttonQuestion from '@/digital-components/button-question/button-question.vue';

16
src/layouts/policy-vehicles/policy-vehicles.vue
View file

@ -21,7 +21,7 @@
cmsWidgetName="PolicyVehiclesQuestion"
:vehicles="VehiclesForQuestions"
:validationRules="rules.optionRequired"
class="mb-2"/>
class="mb-2" />
<buttonMain
:variant="buttonVariants.primary"
buttonText="Add another vehicle"
@ -114,7 +114,7 @@ export default {
const vehicles = this.policyVehicles;
const mappedData =
vehicles?.map((v) => {
const maskSymbol = 'X';
const maskSymbol = '*';
const vinStart = maskSymbol.repeat(v.vin.length - 6);
const vinEnd = v.vin.substring(v.vin.length - 6);
return {
@ -122,7 +122,7 @@ export default {
vehicle: v,
Text: `${v.vehicleYear} ${v.vehicleMake} ${v.vehicleModel}`,
Name: v.vin,
SubText: `VIN ${vinStart}${vinEnd}`
SubText: `VIN: ${vinStart}${vinEnd}`
};
}) ?? [];
return mappedData;
@ -304,6 +304,10 @@ export default {
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
.subheader-secondary p {
text-align: left;
}
}
}
@ -319,4 +323,10 @@ export default {
}
}
}
.list-button-content {
span.small {
font-size: 1rem;
}
}
</style>

40
src/styles/common-validation-styles.scss
View file

@ -11,6 +11,7 @@ html {
border: 1px solid $red;
position: relative;
z-index: 4;
border-radius: 60px;
.button-content {
border: none;
@ -28,6 +29,7 @@ html {
&.list-card {
border: 1px solid $red;
border-radius: 0.5rem;
}
&.ui-radio {
@ -48,7 +50,23 @@ html {
// END HOVER
&.list-button,
&.list-button {
color: $red;
input[type="checkbox"]:focus+label,
input[type="radio"]:focus+label {
box-shadow: 0 0 0 2.5px $red;
}
input[type="checkbox"]:checked+label {
box-shadow: 0 0 0 1px $red;
}
&:hover {
border-radius: 60px;
}
}
&.list-card {
color: $red;
@ -141,6 +159,7 @@ html {
border: 1px solid $success;
position: relative;
z-index: 4;
border-radius: 60px;
.button-content {
border: none;
@ -158,6 +177,7 @@ html {
&.list-card {
border: 1px solid $success;
border-radius: 0.5rem;
}
&.ui-radio {
@ -178,7 +198,23 @@ html {
// END HOVER
&.list-button,
&.list-button {
color: $success;
input[type="checkbox"]:focus+label,
input[type="radio"]:focus+label {
box-shadow: 0 0 0 2.5px $success;
}
input[type="checkbox"]:checked+label {
box-shadow: 0 0 0 1px $success;
}
&:hover {
border-radius: 60px;
}
}
&.list-card {
color: $success;