CSR-762 Move validation logic to button-wrapper

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

@@ -14,7 +14,6 @@
       <span class="fw-bold w-100">{{ questionText }}</span>
     </div>
 
-    selectedValues: {{ selectedValues }}
     <div class="w-100 d-flex justify-content-center">
       <fieldset
         class="w-100"
@@ -46,11 +45,14 @@
               :is="buttonType"
               :buttonLabel="answer.buttonLabel"
               :buttonLabelSubCopy="answer.buttonLabelSubCopy"
+              :buttonImage="answer.buttonImage"
+              :buttonImageId="answer.buttonImageId"
               :isMultiSelect="isMultiSelect"
               :groupName="groupName"
               :value="answer.value"
               :modelValue="modelValue"
               selectingInitiatesLoad
+              :isWide="isWide"
               @change="(e) => handleAnswerChange(e)"
             />
             
@@ -169,6 +171,9 @@ export default {
           break;
         case "listCard":
           classes = "row g-2 justify-content-center";
+          if (this.isWide) {
+            classes += " flex-column";
+          }
           break;
         case "radio":
           classes = "ui-radio d-flex";
@@ -203,7 +208,8 @@ export default {
     //   },
     // },
     buttonsInfo() {
-      return this.answers.map(answer => ({
+      // TODO KO temporary. It should always just be an array
+      return (Array.isArray(this.answers) ? this.answers : [])?.map(answer => ({
         buttonLabel: answer.Text ?? answer,
         altText: answer.Name ? answer.Name : answer,
         buttonLabelSubCopy: answer.SubText,

src/common-components/button-wrapper/button-wrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <label :class="classes" :for="buttonId">
+  <label :class="[ buttonWrapperClasses, { 'has-error': errors.length > 0 || hasError }]" :for="buttonId">
     <!-- classes: {{classes}}<br/>
     value: {{value}} <br/>
     modelValue: {{modelValue}} <br/>
@@ -8,6 +8,7 @@
       :type="inputType"
       :id="buttonId"
       :name="groupName"
+      :class="inputClasses"
       :aria-required="isRequired"
       :value="value"
       :checked="isChecked"
@@ -19,17 +20,142 @@
 </template>
 
 <script>
-import buttonMixin from "@/mixins/button-mixin";
+import { queryStrings } from "@/constants/query-strings";
+import { useField } from "vee-validate";
+import { toRef } from "vue";
+
 export default {
   name: "button-wrapper",
-  mixins: [buttonMixin],
+  emits: ["change"],
+  model: {
+    prop: "modelValue",
+    event: "change",
+  },
+  props: {
+    value: {
+      type: [String, Number],
+      required: true,
+    },
+    modelValue: {
+      type: [Array, String, Number],
+      required: true,
+    },
+    isMultiSelect: Boolean,
+    isWide: Boolean,
+    buttonImage: String,
+    buttonImageId: String,
+    buttonLabel: {
+      type: String,
+      required: true,
+    },
+    isRequired: {
+      type: Boolean,
+      required: true,
+    },
+    buttonLabelSubCopy: {
+      type: String,
+      required: true,
+    },
+    groupName: {
+      type: String,
+      required: true,
+    },
+    validationRules: String,
+    buttonWrapperClasses: [String, Array, Object],
+    inputClasses: [String, Array, Object],
+    valueToLogType: String,
+  },
+  methods: {
+    handleSelectionChange(event) {
+      // console.log(event);
+      // console.log(this.value);
+      // console.log(this.modelValue);
+      let isChecked = event.target.checked;
+      // console.log("BM value: ", this.value);
+      let valueToEmit;
+      if (this.isMultiSelect && this.modelValue instanceof Array) {
+        let newValue = [...this.modelValue];
+        if (isChecked && !this.modelValue.includes(this.value)) {
+          newValue.push(this.value);
+        } else {
+          newValue.splice(newValue.indexOf(this.value), 1);
+        }
+
+        valueToEmit = newValue;
+      } else {
+        valueToEmit = this.value;
+      }
+
+      // console.log("ButtonWrapper is emitting: ", valueToEmit);
+      this.$emit("change", valueToEmit);
+
+      this.pushClickEventToGA();
+    },
+    pushClickEventToGA() {
+      this.pushEventToGA(
+        this.$route.query[queryStrings.FMG_PAGE],
+        this.GaActions.CLICKED,
+        this.value.toString(),
+        true,
+        this.valueToLogType
+      );
+    },
+  },
+  computed: {
+    isChecked() {
+      if (this.isMultiSelect && this.modelValue instanceof Array) {
+        this.modelValue.includes(this.value);
+      }
+      return this.modelValue === this.value;
+    },
+    inputType() {
+      return this.isMultiSelect ? "checkbox" : "radio";
+    },
+    buttonId() {
+      return `${this.groupName} ${JSON.stringify(this.value)}`;
+    },
+  },
+  setup(props) {
+    const inputType = props.isMultiSelect ? "checkbox" : "radio";
+
+    const fieldOptions = {
+      // type: inputType,
+      // checkedValue: props.value,
+      // potentialInitialValue: props.selectedValues,
+    };
+
+    // Set initialValue for validation setup if pre-selected
+    // NOTE: props.selectedValues could be an array of strings, or an array of integers...
+    // if (
+    //   props.selectedValues &&
+    //   (props.selectedValues.includes(props.value) ||
+    //     props.selectedValues.includes(parseInt(props.value)))
+    // ) {
+    //   fieldOptions["initialValue"] = fieldOptions.potentialInitialValue;
+    // }
+
+    const { handleChange, errors, value } = useField(
+      toRef(props, "groupName"),
+      toRef(props, "validationRules"),
+      fieldOptions
+    );
+
+    const validateValue = value;
+
+    return {
+      handleChange,
+      errors,
+      validateValue,
+      fieldOptions, // only need to expose this for unit test purposes
+    };
+  },
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 input {
   opacity: 0;
-  height: 0;
+  height: 0.1px; // NOTE: cannot be zero or Safari can't put focus on it
   width: 0;
 }
 </style>

src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue

@@ -7,7 +7,7 @@
             :groupName="groupName"
             buttonType="listCard"
             isRequired
-            v-model="selectedValues"
+            v-model="selectedDamageLocations"
             validationRules="damage-location-required"
         />
     </div>
@@ -27,7 +27,8 @@ export default ({
     name: "damageLocationQuestion",
     data(){
         return {
-            damageOptions: Object,
+            damageOptions: {},
+            selectedDamageLocations: []
         }
     },
     props: {               
@@ -47,14 +48,6 @@ export default ({
         answersFromCms(){
             return this.getCmsContent(this.cmsWidgetName, 'Answers');
         },
-        selectedValues: {
-            get: function() {
-                return this.modelValue;
-            },
-            set: function(newValue) {
-                this.$emit("update:modelValue", newValue);
-            }
-        },
         damageOptionsMap(){
             return {
                 Windshield: true,
@@ -80,5 +73,11 @@ export default ({
     components: {
         buttonQuestion,
     },
+    watch: {
+        selectedDamageLocations(selectedDamageLocations) {
+            console.log("DLQ: ", selectedDamageLocations)
+            this.$emit("update:modelValue", selectedDamageLocations)
+        }
+    }
 })
 </script>

src/mixins/button-mixin.js

@@ -1,78 +1,5 @@
+import { queryStrings } from "@/constants/query-strings";
+
 export default {
-  emits: ["change"],
-  model: {
-    prop: "modelValue",
-    event: "change",
-  },
-  props: {
-    value: {
-      type: [String, Number],
-      required: true,
-    },
-    modelValue: {
-      type: [Array, String, Number],
-      required: true,
-    },
-    isMultiSelect: Boolean,
-    isWide: Boolean,
-    buttonImage: String,
-    buttonImageId: String,
-    buttonLabel: {
-      type: String,
-      required: true,
-    },
-    isRequired: {
-      type: Boolean,
-      required: true,
-    },
-    buttonLabelSubCopy: {
-      type: String,
-      required: true,
-    },
-    groupName: {
-      type: String,
-      required: true,
-    },
-    validationRules: String,
-    classes: [String, Array, Object],
-  },
-  methods: {
-    handleSelectionChange(event) {
-      console.log(event);
-      console.log(this.value);
-      console.log(this.modelValue);
-      let isChecked = event.target.checked;
-      console.log("BM value: ", this.value);
-      let valueToEmit;
-      if (this.isMultiSelect && this.modelValue instanceof Array) {
-        let newValue = [...this.modelValue];
-        if (isChecked && !this.modelValue.includes(this.value)) {
-          newValue.push(this.value);
-        } else {
-          newValue.splice(newValue.indexOf(this.value), 1);
-        }
   
-        valueToEmit = newValue;
-      } else {
-        valueToEmit = this.value;
-      }
-
-      console.log("ButtonWrapper is emitting: ", valueToEmit);
-      this.$emit("change", valueToEmit);
-    },
-  },
-  computed: {
-    isChecked() {
-      if (this.isMultiSelect && this.modelValue instanceof Array) {
-        this.modelValue.includes(this.value);
-      }
-      return this.modelValue === this.value;
-    },
-    inputType() {
-      return this.isMultiSelect ? "checkbox" : "radio";
-    },
-    buttonId() {
-      return `${this.groupName} ${JSON.stringify(this.value)}`;
-    },
-  },
 };

src/ux-components/list-button/list-button.vue

@@ -34,10 +34,7 @@
     :modelValue="modelValue"
     :value="value"
     :groupName="groupName"
-    :classes="[
+    buttonWrapperClasses="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
-      'list-group list-button rounded-3 d-flex flex-column w-100 mb-2',
-      { 'has-error': errors.length > 0 || hasError },
-    ]"
     @change="handleAnswerChange"
   >
     <div
@@ -65,8 +62,8 @@
 </template>
 
 <script>
-import { useField } from "vee-validate";
+// import { useField } from "vee-validate";
-import { toRef } from "vue";
+// import { toRef } from "vue";
 import loader from "@/ux-components/loader/loader";
 import { queryStrings } from "@/constants/query-strings";
 import buttonMixin from "@/mixins/button-mixin";
@@ -87,10 +84,11 @@ export default {
     loaderColor: String,
     loaderPosition: {
       type: String,
-      default: "right"
+      default: "right",
     },
     hasError: Boolean,
     valueToLogType: String,
+    validationRules: String,
   },
   data() {
     return {
@@ -125,7 +123,7 @@ export default {
       if (this.selectingInitiatesLoad) {
         this.displayLoader();
       }
-      console.log("lbTest event: ", e)
+      console.log("lbTest event: ", e);
       this.$emit("change", e);
     },
     // handleInputChange() {
@@ -170,40 +168,40 @@ export default {
     loader,
     buttonWrapper,
   },
-  setup(props) {
+  // setup(props) {
-    const inputType = props.isMultiSelect ? "checkbox" : "radio";
+  //   const inputType = props.isMultiSelect ? "checkbox" : "radio";
 
-    const fieldOptions = {
+  //   const fieldOptions = {
-      type: inputType,
+  //     type: inputType,
-      checkedValue: props.value,
+  //     checkedValue: props.value,
-      potentialInitialValue: props.selectedValues,
+  //     potentialInitialValue: props.selectedValues,
-    };
+  //   };
 
-    // Set initialValue for validation setup if pre-selected
+  //   // Set initialValue for validation setup if pre-selected
-    // NOTE: props.selectedValues could be an array of strings, or an array of integers...
+  //   // NOTE: props.selectedValues could be an array of strings, or an array of integers...
-    if (
+  //   if (
-      props.selectedValues &&
+  //     props.selectedValues &&
-      (props.selectedValues.includes(props.value) ||
+  //     (props.selectedValues.includes(props.value) ||
-        props.selectedValues.includes(parseInt(props.value)))
+  //       props.selectedValues.includes(parseInt(props.value)))
-    ) {
+  //   ) {
-      fieldOptions["initialValue"] = fieldOptions.potentialInitialValue;
+  //     fieldOptions["initialValue"] = fieldOptions.potentialInitialValue;
-    }
+  //   }
 
-    const { handleChange, errors, value } = useField(
+  //   const { handleChange, errors, value } = useField(
-      toRef(props, "groupName"),
+  //     toRef(props, "groupName"),
-      toRef(props, "validationRules"),
+  //     toRef(props, "validationRules"),
-      fieldOptions
+  //     fieldOptions
-    );
+  //   );
 
-    const validateValue = value;
+  //   const validateValue = value;
 
-    return {
+  //   return {
-      handleChange,
+  //     handleChange,
-      errors,
+  //     errors,
-      validateValue,
+  //     validateValue,
-      fieldOptions, // only need to expose this for unit test purposes
+  //     fieldOptions, // only need to expose this for unit test purposes
-    };
+  //   };
-  },
+  // },
 };
 </script>
 
@@ -214,8 +212,8 @@ export default {
     input[type="radio"],
     input[type="checkbox"] {
       position: static; //override bootstrap
-      height: 0;
+      // height: 0;
-      opacity: 0;
+      // opacity: 0;
 
       &:focus-visible + .list-button-content {
         box-shadow: 0 0 0 2.5px $blue;

src/ux-components/list-card/list-card.vue

@@ -1,73 +1,84 @@
 <template>
-  <div :class="{'h-100': !isWide}">
+  <buttonWrapper
+    :buttonWrapperClasses="[
+      'list-card w-100 rounded-3 d-flex align-items-center h-100',
+      { 'horizontal': isWide, 'has-error': errors.length > 0 || hasError }
+    ]"
+    :isMultiSelect="isMultiSelect"
+    :modelValue="modelValue"
+    :value="value"
+    :groupName="groupName"
+    @change="handleAnswerChange"
+  >
+
+    <!-- <div :class="{ 'h-100': !isWide }">
+      <div
+        class="list-card w-100 rounded-3 d-flex align-items-center"
+        :class="[
+          'h-100',
+          isWide ? 'horizontal' : '',
+          errors.length > 0 || hasError ? 'has-error' : '',
+        ]"
+        @keyup.space="triggerButton"
+        @keyup.up="handleKeyupArrow"
+        @keyup.down="handleKeyupArrow"
+        @keyup.left="handleKeyupArrow"
+        @keyup.right="handleKeyupArrow"
+      > -->
+    <!-- <input
+          :type="isMultiSelect ? 'checkbox' : 'radio'"
+          :id="buttonID"
+          :name="groupName"
+          :value="value"
+          :aria-required="isRequired"
+          v-model="checkValue"
+          :checked="checkValue"
+          @change="handleInputChange"
+        /> -->
+
     <div
-      class="list-card w-100 rounded-3 d-flex align-items-center"
+      class="d-flex w-100 align-items-center px-2 h-100 list-card-content"
-      :class="[
+      :class="getLabelClasses"
-        'h-100',
-        isWide ? 'horizontal' : '',
-        (errors.length > 0 || hasError) ? 'has-error' : '',
-      ]"
-      @keyup.space="triggerButton"
-      @keyup.up="handleKeyupArrow"
-      @keyup.down="handleKeyupArrow"
-      @keyup.left="handleKeyupArrow"
-      @keyup.right="handleKeyupArrow"
     >
-      <input
+      <img
-        :type="isMultiSelect ? 'checkbox' : 'radio'"
+        :id="buttonImageId"
-        :id="buttonID"
+        :class="!isWide ? 'order-1' : 'ms-auto order-3'"
-        :name="groupName"
+        :src="buttonImage"
-        :value="value"
+        :alt="altText"
-        :aria-required="isRequired"
-        v-model="checkValue"
-        :checked="checkValue"
-        @change="handleInputChange"
       />
-      <label
+      <p
-        tabindex="-1"
+        v-if="!isWide"
-        :for="buttonID"
+        class="small order-3"
-        :aria-label="buttonLabel"
+        :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'"
-        class="d-flex w-100 align-items-center px-2 h-100"
-        :class="getLabelClasses"
-        @mouseup="triggerButton"
       >
-        <img
+        {{ buttonLabel }}
-          :id="buttonImageId"
+      </p>
-          :class="!isWide ? 'order-1' : 'ms-auto order-3'"
+      <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4 sub-copy">
-          :src="buttonImage"
+        {{ buttonLabelSubCopy }}
-          :alt="altText"
+      </p>
-        />
+      <div v-if="isWide" class="order-2">
-        <p
+        <p class="m-0 small">{{ buttonLabel }}</p>
-          v-if="!isWide"
+        <p v-if="buttonLabelSubCopy" class="m-0 fs-7 sub-copy">
-          class="small order-3"
-          :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'"
-        >
-          {{ buttonLabel }}
-        </p>
-        <p
-          v-if="buttonLabelSubCopy && !isWide"
-          class="fs-7 m-0 order-4 sub-copy"
-        >
           {{ buttonLabelSubCopy }}
         </p>
-        <div v-if="isWide" class="order-2">
+      </div>
-          <p class="m-0 small">{{ buttonLabel }}</p>
-          <p v-if="buttonLabelSubCopy" class="m-0 fs-7 sub-copy">
-            {{ buttonLabelSubCopy }}
-          </p>
-        </div>
-      </label>
     </div>
-  </div>
+    <!-- </div>
+    </div> -->
+  </buttonWrapper>
 </template>
 
 <script>
 import { useField } from "vee-validate";
 import { toRef } from "vue";
 import { queryStrings } from "@/constants/query-strings";
+import buttonWrapper from "@/common-components/button-wrapper/button-wrapper";
 
 export default {
   name: "listCard",
+  components: {
+    buttonWrapper
+  },
   props: {
     isMultiSelect: Boolean, //Defines use as checkbox
     isWide: Boolean,
@@ -93,18 +104,19 @@ export default {
   data() {
     return {
       checkValue: null,
-    }
+    };
   },
   mounted() {
     if (Array.isArray(this.validateValue)) {
       this.checkValue = this.isValueSelectedByArray(this.selectedValues);
-      const isSelectedByValidator = this.isValueSelectedByArray(this.validateValue);
+      const isSelectedByValidator = this.isValueSelectedByArray(
+        this.validateValue
+      );
 
       if (this.checkValue != isSelectedByValidator) {
         this.handleChange(this.value);
       }
-    }
+    } else {
-    else {
       this.checkValue = this.selectedValues == this.value;
     }
   },
@@ -123,12 +135,10 @@ export default {
   },
   methods: {
     isValueSelectedByArray(arr) {
-      return this.isMultiSelect
+      return this.isMultiSelect ? arr.includes(this.value) : arr[0];
-        ? arr.includes(this.value)
-        : arr[0];
     },
     handleInputChange() {
-      if(!this.selectingInitiatesLoad) {
+      if (!this.selectingInitiatesLoad) {
         this.handleCheckChange();
       }
     },
@@ -137,17 +147,23 @@ export default {
         return; // Prevent arrow keys from doing anything if element is a checkbox
       }
 
-      if(!this.selectingInitiatesLoad) {
+      if (!this.selectingInitiatesLoad) {
         this.handleCheckChange();
       }
     },
     triggerButton() {
-      if(this.selectingInitiatesLoad) {
+      if (this.selectingInitiatesLoad) {
         this.displayLoader();
         this.handleCheckChange();
       }
 
-      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
+      this.pushEventToGA(
+        this.$route.query[queryStrings.FMG_PAGE],
+        this.GaActions.CLICKED,
+        this.value.toString(),
+        true,
+        this.valueToLogType
+      );
     },
     handleCheckChange() {
       const emitEvent = {
@@ -159,6 +175,9 @@ export default {
       this.handleChange(this.value);
       this.$emit("isCheckedChanged", emitEvent);
     },
+    handleAnswerChange(e) {
+      this.$emit("change", e);
+    },
   },
   watch: {
     // Changing this will impact pre-selection data loads on vehicle-parts.
@@ -166,8 +185,7 @@ export default {
     selectedValues(newVal) {
       if (typeof newVal === "string") {
         this.checkValue = newVal == this.value;
-      }
+      } else if (newVal !== undefined) {
-      else if (newVal !== undefined) {
         this.checkValue = newVal.value;
       }
     },
@@ -183,15 +201,19 @@ export default {
 
     // Set initialValue for validation setup if pre-selected
     // NOTE: props.selectedValues could be an array of strings, or an array of integers...
-    if (props.selectedValues && (props.selectedValues.includes(props.value) || props.selectedValues.includes(parseInt(props.value)))) {
+    if (
-      fieldOptions['initialValue'] = fieldOptions.potentialInitialValue;
+      props.selectedValues &&
+      (props.selectedValues.includes(props.value) ||
+        props.selectedValues.includes(parseInt(props.value)))
+    ) {
+      fieldOptions["initialValue"] = fieldOptions.potentialInitialValue;
     }
 
-    const {
+    const { handleChange, errors, value } = useField(
-        handleChange,
+      toRef(props, "groupName"),
-        errors,
+      toRef(props, "validationRules"),
-        value
+      fieldOptions
-    } = useField(toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions); 
+    );
 
     // First land on the blank, unselected page, no handleChange
     // Land on page with initial values, handleChange
@@ -232,12 +254,12 @@ export default {
 
   input[type="checkbox"],
   input[type="radio"] {
-    opacity: 0;
+    // opacity: 0;
-    width: 0;
+    // width: 0;
-    height: 0.1px; // NOTE: cannot be zero or safari can't put focus on it
+    // height: 0.1px; // NOTE: cannot be zero or safari can't put focus on it
     position: absolute;
 
-    + label {
+    + .list-card-content {
       outline: none;
       display: block;
       position: relative;
@@ -256,23 +278,23 @@ export default {
       }
     }
 
-    &:checked + label {
+    &:checked + .list-card-content {
       background: $blue-100;
       box-shadow: 0 0 0 1px $blue;
       border-radius: 0.5rem;
     }
-    &:focus-visible + label {
+    &:focus-visible + .list-card-content {
       box-shadow: 0 0 0 2.5px $blue;
       border-radius: 0.5rem;
     }
-    &:focus + label {
+    &:focus + .list-card-content {
       box-shadow: 0 0 0 2.5px $blue;
       border-radius: 0.5rem;
     }
-    &:checked:focus + label {
+    &:checked:focus + .list-card-content {
       box-shadow: 0 0 0 2.5px $blue;
     }
-    &:checked + label {
+    &:checked + .list-card-content {
       p {
         color: $black;
         font-weight: 500;
@@ -284,7 +306,7 @@ export default {
       }
     }
 
-    + label::before {
+    + .list-card-content::before {
       content: "";
       position: absolute;
       display: flex;
@@ -300,19 +322,19 @@ export default {
       color: $gray-600;
     }
 
-    + label.checkboxTop::before {
+    + .list-card-content.checkboxTop::before {
       margin: -1.25rem 0.5rem 0 0 !important;
     }
 
-    + label.checkboxTop::after {
+    + .list-card-content.checkboxTop::after {
       margin: -1.5rem 0.5rem 0 0 !important;
     }
 
-    &:checked + label::before {
+    &:checked + .list-card-content::before {
       background: $blue;
     }
 
-    &:checked + label::after {
+    &:checked + .list-card-content::after {
       content: "";
       position: absolute;
       margin: 3.2rem 0 0 0;
@@ -326,17 +348,17 @@ export default {
   }
 
   input[type="radio"] {
-    + label::before {
+    + .list-card-content::before {
       content: "";
       display: none;
     }
 
-    + label::after {
+    + .list-card-content::after {
       content: "";
       display: none;
     }
 
-    + label {
+    + .list-card-content {
       img {
         margin-bottom: 0;
       }
@@ -351,20 +373,20 @@ export default {
 
     input[type="checkbox"],
     input[type="radio"] {
-      + label::before {
+      + .list-card-content::before {
         content: "";
         position: relative;
         margin: 0 0.5rem 0 0;
         order: 1;
       }
 
-      &:checked + label::after {
+      &:checked + .list-card-content::after {
         content: "";
         margin: -0.15rem 0 0 0;
         left: 1.175rem;
       }
 
-      &:checked + label {
+      &:checked + .list-card-content {
         p {
           color: $black;
           font-weight: 500;
@@ -376,7 +398,7 @@ export default {
         }
       }
 
-      + label {
+      + .list-card-content {
         outline: none;
         min-height: 48px;
         color: $gray-600;