CSR-756 Fix validation issue on vehicle-damage page

src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue

@@ -1,6 +1,6 @@
 <template>
     <transition name="fade" mode="out-in">
-        <div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''" aria-live="polite">
+        <div v-if="shouldDisplayReplaceOptionsQuestion" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''" aria-live="polite">
             <buttonQuestion
                 isWide
                 :questionText="questionText"
@@ -80,11 +80,19 @@ export default ({
                 return ans;
             });
         },
+        shouldDisplayReplaceOptionsQuestion() {
+            return this.isAvailable && this.answersToDisplay.length > 0
+        }
     },
     watch: {
         isAvailable(val) {
             // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
             val && this.updateSelectedValues();
+        },
+        shouldDisplayReplaceOptionsQuestion(shouldDisplayReplaceOptionsQuestion) {
+            if (!shouldDisplayReplaceOptionsQuestion) {
+                this.selectedValues = [];
+            }
         }
     },
     components: {

src/layouts/vehicle-damage/side-door-options/side-door-options.vue

@@ -46,6 +46,7 @@ import store from "@/store";
 import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
+import { damageLocationsSelected } from "@/constants/damage-locations-selected";
 
 // DEFINE VALIDATION RULES
 defineRule("damage-side-required", required(errorMessages.DAMAGE_SIDE_REQUIRED));
@@ -128,10 +129,10 @@ export default ({
             });
         },
         isDriverSideReplaceOptionsQuestionAvailable(){
-            return (Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes("DriverSide") && (Array.isArray(this.selectedDamageLocations) && this.selectedDamageLocations.includes("SideDoor")));
+            return (Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes(damageLocationsSelected.DRIVERSIDE) && (Array.isArray(this.selectedDamageLocations) && this.selectedDamageLocations.includes(damageLocationsSelected.SIDEDOOR)));
         },
         isPassengerSideReplaceOptionsQuestionAvailable(){
-            return (Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes("PassengerSide") && (Array.isArray(this.selectedDamageLocations) && this.selectedDamageLocations.includes("SideDoor")));
+            return (Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes(damageLocationsSelected.PASSENGERSIDE) && (Array.isArray(this.selectedDamageLocations) && this.selectedDamageLocations.includes(damageLocationsSelected.SIDEDOOR)));
         },
     },
     components: {

src/router/index.js

@@ -224,6 +224,8 @@ function navigateToUrl(url, optionalQuery = {}) {
   for (const queryKey in optionalQuery) {
     externalUrl.searchParams.append(queryKey, optionalQuery[queryKey]);
   }
+
+  externalUrl.searchParams.append("experiments", "ConceptFunnel=ConceptFunnel_V1=ConceptFunnel_TEST=true");
   
   window.location.assign(externalUrl);
 }

src/ux-components/list-card/list-card.spec.js

@@ -14,7 +14,6 @@ describe("list-card.vue", () => {
         groupID: "checkbox-demo-1",
         groupName: "Checkbox 1",
         buttonImage: "windshield-damage.svg",
-        modelValue: ["List Card Checkbox"],
       },
     });
 
@@ -33,7 +32,6 @@ describe("list-card.vue", () => {
         groupID: "radio-demo-1",
         groupName: "radio 1",
         buttonImage: "windshield-damage.svg",
-        modelValue: ["List Card Checkbox"],
       },
     });
 
@@ -53,7 +51,6 @@ describe("list-card.vue", () => {
         groupName: "radio 1",
         buttonImage: "windshield-damage.svg",
         buttonLabelSubCopy: "Test",
-        modelValue: ["List Card Checkbox"],
       },
     });
 
@@ -73,7 +70,6 @@ describe("list-card.vue", () => {
         groupName: "radio 1",
         buttonImage: "windshield-damage.svg",
         buttonLabelSubCopy: "Test",
-        modelValue: ["List Card Checkbox"],
       },
     });
 
@@ -93,7 +89,6 @@ describe("list-card.vue", () => {
         groupName: "radio 1",
         buttonImage: "windshield-damage.svg",
         buttonLabelSubCopy: "Test",
-        modelValue: ["List Card Checkbox"],
       },
     });
 
@@ -113,7 +108,6 @@ describe("list-card.vue", () => {
         groupName: "radio 1",
         buttonImage: "windshield-damage.svg",
         isRequired: true,
-        modelValue: ["List Card Checkbox"],
       },
     });
 
@@ -135,7 +129,6 @@ describe("list-card.vue", () => {
         isRequired: true,
         isWide: true,
         buttonLabelSubCopy: "",
-        modelValue: ["List Card Checkbox"],
       },
     });
 
@@ -157,7 +150,6 @@ describe("list-card.vue", () => {
         isRequired: true,
         isWide: true,
         buttonLabelSubCopy: "Button Subcopy",
-        modelValue: ["List Card Checkbox"],
       },
     });
 
@@ -178,7 +170,6 @@ describe("list-card.vue", () => {
         buttonImage: "windshield-damage.svg",
         isRequired: true,
         isWide: false,
-        modelValue: ["List Card Checkbox"],
       },
     });
 
@@ -199,13 +190,13 @@ describe("list-card.vue", () => {
         buttonImage: "windshield-damage.svg",
         isRequired: true,
         isWide: false,
-        modelValue: ["List Card Checkbox"],
+        buttonID: 'list-card-id',
-        buttonID: 'list-card-id'
+        selectedValues: "List Card Checkbox"
       },
     });
     wrapper.vm.handleCheckChange();
     // Assert
-    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: "List Card Checkbox", buttonId: 'list-card-id'}]);
+    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: true, buttonId: 'list-card-id'}]);
   });
 
   it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
@@ -220,12 +211,11 @@ describe("list-card.vue", () => {
         buttonImage: "windshield-damage.svg",
         isRequired: true,
         isWide: false,
-        modelValue: ["List Card Checkbox"],
+        selectedValues: "Car-Front"
-        selectedValues: ["Car-Front"]
       },
     });
     // Assert
-    expect(wrapper.componentVM.checkValue).toEqual("Car-Front");
+    expect(wrapper.componentVM.checkValue).toEqual(false);
   });
 
   it("Should set an initial value for validation if selectedValues include the value", async () => {
@@ -234,7 +224,6 @@ describe("list-card.vue", () => {
       propsData: {
         value: "Windshield",
         groupName: "radio 1",
-        modelValue: ["Windshield"],
         selectedValues: ["Windshield"],
       },
     });

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

@@ -63,7 +63,7 @@
 
 <script>
 import { useField } from "vee-validate";
-import { toRef } from "vue";
+import { toRef, computed } from "vue";
 import { queryStrings } from "@/constants/query-strings";
 
 export default {
@@ -87,7 +87,7 @@ export default {
     colLength: String,
     validationRules: String,
     selectedValues: [Array, String],
-    modelValue: Object,
+    // modelValue: Object,
     hasError: Boolean,
   },
   data() {
@@ -95,19 +95,18 @@ export default {
       checkValue: null,
     }
   },
-  created() {
+  mounted() {
-    if (Array.isArray(this.selectedValues)) {
+    if (Array.isArray(this.validateValue)) {
-      this.checkValue = this.isMultiSelect
+      this.checkValue = this.isValueSelectedByArray(this.selectedValues);
-        ? this.selectedValues.includes(this.value)
+
-        : this.selectedValues[0];
+      const isSelectedByValidator = this.isValueSelectedByArray(this.validateValue);
-    }
+      
-    else if (Array.isArray(this.modelValue)) {
+      if (this.checkValue != isSelectedByValidator) {
-      this.checkValue = this.isMultiSelect
+        this.handleChange(this.value);
-        ? this.modelValue.includes(this.value)
+      }
-        : this.modelValue[0];
     }
     else {
-      this.checkValue = this.selectedValues == this.value || this.modelValue == this.value;
+      this.checkValue = this.selectedValues == this.value;
     }
   },
   computed: {
@@ -124,10 +123,15 @@ export default {
     },
   },
   methods: {
+    isValueSelectedByArray(arr) {
+      return this.isMultiSelect
+        ? arr.includes(this.value)
+        : arr[0];
+    },
     handleInputChange() {
-        if(!this.selectingInitiatesLoad) {
+      if(!this.selectingInitiatesLoad) {
-          this.handleCheckChange();
+        this.handleCheckChange();
-        }
+      }
     },
     handleKeyupArrow() {
       if (this.isMultiSelect) {
@@ -155,20 +159,14 @@ export default {
       
       this.handleChange(this.value);
       this.$emit("isCheckedChanged", emitEvent);
-      this.$emit("update:modelValue", emitEvent);
     },
   },
   watch: {
     // Changing this will impact pre-selection data loads on vehicle-parts.
     // If changed, please regression test that vehicle-parts data still loads correctly with previous selections.
-    modelValue(newVal) {
+    // model
-      if (newVal !== undefined) {
-        this.checkValue = newVal.value;
-      }
-    },
     selectedValues(newVal) {
       if (typeof newVal === "string") {
-        this.handleChange(newVal);
         this.checkValue = newVal == this.value;
       }
       else if (newVal !== undefined) {
@@ -194,11 +192,20 @@ export default {
     const {
         handleChange,
         errors,
+        checked,
+        meta,
+        value
     } = useField(toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions); 
-    
+
+    // First land on the blank, unselected page, no handleChange
+    // Land on page with initial values, handleChange
+    const validateValue = value;
     return {
       handleChange,
       errors,
+      checked,
+      meta,
+      validateValue,
       fieldOptions, // only need to expose this for unit test purposes
     };
   },