From 2588ddc0668471ab226ea54a7288f3afca1c48bd Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Thu, 28 Jul 2022 15:57:49 -0400
Subject: [PATCH 1/2] CSR-756 Fix validation issue on vehicle-damage page

---
 .../replace-options-question.vue              | 10 +++-
 .../side-door-options/side-door-options.vue   |  5 +-
 src/router/index.js                           |  2 +
 src/ux-components/list-card/list-card.spec.js | 21 ++-----
 src/ux-components/list-card/list-card.vue     | 55 +++++++++++--------
 5 files changed, 50 insertions(+), 43 deletions(-)

diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
index 53ef1e2fa..bb164f1bc 100644
--- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
+++ b/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: {
diff --git a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
index 284c3eee6..c1c9ba3b3 100644
--- a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
+++ b/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: {
diff --git a/src/router/index.js b/src/router/index.js
index e0c5d537b..cda5fb043 100644
--- a/src/router/index.js
+++ b/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);
 }
diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js
index 7db735ced..4e9edf5dc 100644
--- a/src/ux-components/list-card/list-card.spec.js
+++ b/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"],
       },
     });
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index a1c95157f..f368f95f4 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/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() {
-    if (Array.isArray(this.selectedValues)) {
-      this.checkValue = this.isMultiSelect
-        ? this.selectedValues.includes(this.value)
-        : this.selectedValues[0];
-    }
-    else if (Array.isArray(this.modelValue)) {
-      this.checkValue = this.isMultiSelect
-        ? this.modelValue.includes(this.value)
-        : this.modelValue[0];
+  mounted() {
+    if (Array.isArray(this.validateValue)) {
+      this.checkValue = this.isValueSelectedByArray(this.selectedValues);
+
+      const isSelectedByValidator = this.isValueSelectedByArray(this.validateValue);
+      
+      if (this.checkValue != isSelectedByValidator) {
+        this.handleChange(this.value);
+      }
     }
     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) {
-          this.handleCheckChange();
-        }
+      if(!this.selectingInitiatesLoad) {
+        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) {
-      if (newVal !== undefined) {
-        this.checkValue = newVal.value;
-      }
-    },
+    // model
     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
     };
   },

From 7450840a36fe27d773002ded37e3ca702a838271 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Thu, 28 Jul 2022 16:11:31 -0400
Subject: [PATCH 2/2] CSR-756 Cleanup

---
 src/router/index.js                       | 2 --
 src/ux-components/list-card/list-card.vue | 9 +--------
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index ec4d86c0b..767b9ab18 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -223,8 +223,6 @@ 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);
 }
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index f368f95f4..aa1044113 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -63,7 +63,7 @@
 
 <script>
 import { useField } from "vee-validate";
-import { toRef, computed } from "vue";
+import { toRef } from "vue";
 import { queryStrings } from "@/constants/query-strings";
 
 export default {
@@ -87,7 +87,6 @@ export default {
     colLength: String,
     validationRules: String,
     selectedValues: [Array, String],
-    // modelValue: Object,
     hasError: Boolean,
   },
   data() {
@@ -98,7 +97,6 @@ export default {
   mounted() {
     if (Array.isArray(this.validateValue)) {
       this.checkValue = this.isValueSelectedByArray(this.selectedValues);
-
       const isSelectedByValidator = this.isValueSelectedByArray(this.validateValue);
       
       if (this.checkValue != isSelectedByValidator) {
@@ -164,7 +162,6 @@ export default {
   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.
-    // model
     selectedValues(newVal) {
       if (typeof newVal === "string") {
         this.checkValue = newVal == this.value;
@@ -192,8 +189,6 @@ export default {
     const {
         handleChange,
         errors,
-        checked,
-        meta,
         value
     } = useField(toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions); 
 
@@ -203,8 +198,6 @@ export default {
     return {
       handleChange,
       errors,
-      checked,
-      meta,
       validateValue,
       fieldOptions, // only need to expose this for unit test purposes
     };