Merge pull request #980 from Safelite/feature/humphries/INSR-7776

INSR-7776: Vehicle Selection page parity updates

src/constants/error-messages.js

@@ -52,10 +52,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'
 });

src/layouts/vehicle-selection/vehicle-question/vehicle-question.vue

@@ -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: {

src/styles/common-error-styles.scss

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