INSR-7776: Vehicle Selection page parity updates

- Update placeholder handling for vehicle questions
- Update error messages for vehicle selection
- Adjust error styles to match heritage
This commit is contained in:
Alex Humphries 2025-12-11 16:46:02 -05:00
parent 08c17d444f
commit 88875f730a
3 changed files with 16 additions and 9 deletions

View file

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

View file

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

View file

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