Merge pull request #1060 from Safelite/defect/CSR-1329

Added 'useField' to the button-question component so the validation v…

src/digital-components/button-question/button-question.spec.js

@@ -1,6 +1,9 @@
 import { shallowMount, mount } from "@vue/test-utils";
 import buttonQuestion from "./button-question";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import crypto from "crypto";
+
+global.crypto = crypto;
 
 describe("buttonQuestion.vue", () => {
     it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => {

src/digital-components/button-question/button-question.vue

@@ -86,7 +86,7 @@ import listButton from "@/ux-components/list-button/list-button";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 import listCard from "@/ux-components/list-card/list-card";
 import radio from "@/ux-components/radio/radio";
-import { ErrorMessage } from "vee-validate";
+import { useField, ErrorMessage } from "vee-validate";
 
 export default {
     name: "buttonQuestion",
@@ -128,6 +128,34 @@ export default {
         valueToLogType: String,
         additionalButtonStyling: String,
         isSmallQuestionText: Boolean,
+        customButtonQuestionId: String,
+    },
+    setup(props) {
+        const buttonQuestionId = !props.customButtonQuestionId
+            ? `button-question-${crypto.randomUUID()}`
+            : props.customButtonQuestionId;
+
+        const propsClone = Object.assign({}, props);
+        const modelValue = propsClone.modelValue;
+
+        const fieldOptions = {
+            value: modelValue,
+            initialValue: modelValue,
+        };
+
+        const { errorMessage, handleBlur, handleChange, meta, validate, errors, resetField } =
+            useField(buttonQuestionId, props.validationRules, fieldOptions);
+
+        return {
+            buttonQuestionId,
+            errorMessage,
+            handleBlur,
+            handleChange,
+            validate,
+            meta,
+            errors,
+            resetField,
+        };
     },
     beforeMount() {
         if (this.buttonTypeObject) {
@@ -226,6 +254,11 @@ export default {
             this.$emit(`buttonEvent.${eventName}`, event.args);
         },
     },
+    watch: {
+        modelValue() {
+            this.resetField();
+        },
+    },
     components: {
         listButton,
         listButtonHorizontal,

src/digital-components/dropdown-question/dropdown-question.vue

@@ -3,15 +3,15 @@
         class="dropdown-question"
         :class="(errors && errors.length) || hasError ? 'has-error' : ''">
         <label
-            :for="inputId"
+            :for="dropdownId"
             :aria-label="questionText"
             class="form-label"
             v-html="questionText"></label>
         <select
             v-model="selectedOption"
             class="form-select"
-            :id="inputId"
+            :id="dropdownId"
-            :name="inputId"
+            :name="dropdownId"
             :aria-disabled="isDisabled"
             :disabled="isDisabled"
             :aria-required="isRequired"
@@ -46,11 +46,12 @@ export default {
         cmsWidgetName: String,
         hasError: Boolean,
         placeHolderText: String,
+        customDropdownId: String,
     },
     setup(props) {
-        const inputId = !props.customInputId
+        const dropdownId = !props.customInputId
             ? `dropdown-${crypto.randomUUID()}`
-            : props.customInputId;
+            : props.customDropdownId;
 
         const propsClone = Object.assign({}, props);
         const modelValue = propsClone.modelValue;
@@ -72,13 +73,13 @@ export default {
         };
 
         const { errorMessage, handleBlur, handleChange, meta, errors } = useField(
-            inputId,
+            dropdownId,
             props.validationRules,
             fieldOptions
         );
 
         return {
-            inputId,
+            dropdownId,
             errorMessage,
             handleBlur,
             handleChange,

src/layouts/service-location/appointment-type-question/appointment-type-question.vue

@@ -2,6 +2,7 @@
     <transition name="fade" mode="out-in">
         <div class="appointment-type-question" aria-live="polite">
             <buttonQuestion
+                customButtonQuestionId="appointmentTypeQuestion"
                 :questionText="questionText"
                 :answers="answersToDisplay"
                 :groupName="groupName"

src/layouts/service-location/service-location.vue

@@ -134,7 +134,7 @@ export default {
             isRecalibrationServiceableMobile: null,
             mobileFeePart: null,
             zipContainsMilitaryBase: false,
-            selectedAppointmentType: null,
+            selectedAppointmentType: "",
             providerNumber: null,
         };
     },
@@ -198,6 +198,8 @@ export default {
 
                 this.state = newValue.state;
                 this.zipCode = newValue.zipCode;
+
+                this.$nextTick();
             },
         },
         mobileLocationQuestions: {