From 1ac865171976417e27cba89a0ed1f126f6422666 Mon Sep 17 00:00:00 2001
From: Scott Kiener <scott.kiener@safelite.com>
Date: Mon, 29 Aug 2022 09:34:29 -0400
Subject: [PATCH 1/2] CSR-735 | Update list-button-horizontal to accept strings

---
 .../cash-or-insurance-question.vue            |  2 +-
 .../list-button-horizontal.vue                | 27 ++++++++++++++-----
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue b/src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue
index 4c9cfc0fc..3c3ab112a 100644
--- a/src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue
+++ b/src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue
@@ -30,7 +30,7 @@ export default ({
                 // Convert to CMS answer name from bool
                 var cmsAnswerValue = this.modelValue ? "InsuranceAnswer" : "CashAnswer";
                 // list-button-horizontal expects an array of values
-                return [cmsAnswerValue];
+                return cmsAnswerValue;
             },
             set: function(newValue) {
                 // Convert back to bool for parent component
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index aa645ebea..ac74761d0 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -24,6 +24,7 @@
 <script>
 import { useField } from "vee-validate";
 import loader from "@/ux-components/loader/loader";
+import { toRef } from "vue";
 import { queryStrings } from "@/constants/query-strings";
 
 export default {
@@ -57,14 +58,25 @@ export default {
       checkValue: Boolean,
     };
   },
-  created() {
-    if (Array.isArray(this.selectedValues)) {
-      this.checkValue = this.isMultiSelect
-        ? this.selectedValues.includes(this.value)
-        : this.selectedValues[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;
     }
   },
   methods: {
+    isValueSelectedByArray(arr) {
+      return this.isMultiSelect
+        ? arr.includes(this.value)
+        : arr[0];
+    },
     displayLoader() {
       this.isLoaderDisplayed = true;
     },
@@ -123,11 +135,14 @@ export default {
     const {
       handleChange,
       errors,
-    } = useField(props.groupName, props.validationRules, fieldOptions);
+      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
     };
   },

From 2296379e02cc003e17f97dc502c5d122c559759c Mon Sep 17 00:00:00 2001
From: Scott Kiener <scott.kiener@safelite.com>
Date: Mon, 29 Aug 2022 11:35:38 -0400
Subject: [PATCH 2/2] CSR-735 | Fix tests

---
 .../cash-or-insurance-question/cash-or-insurance-question.vue | 1 -
 .../list-button-horizontal/list-button-horizontal.spec.js     | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue b/src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue
index 3c3ab112a..b2431406d 100644
--- a/src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue
+++ b/src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue
@@ -29,7 +29,6 @@ export default ({
             get: function() {
                 // Convert to CMS answer name from bool
                 var cmsAnswerValue = this.modelValue ? "InsuranceAnswer" : "CashAnswer";
-                // list-button-horizontal expects an array of values
                 return cmsAnswerValue;
             },
             set: function(newValue) {
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
index 5c288f660..e74673c22 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
@@ -194,7 +194,7 @@ describe("list-button-horizontal.vue", () => {
     });
     wrapper.vm.handleCheckChange();
     // Assert
-    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean}]);
+    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean, buttonId: undefined, checkValue: undefined}]);
   });
 
   it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
@@ -215,7 +215,7 @@ describe("list-button-horizontal.vue", () => {
       },
     });
     // Assert
-    expect(wrapper.componentVM.checkValue).toEqual("Car-Front");
+    expect(wrapper.componentVM.checkValue).toEqual(["Car-Front"]);
   });
 
   it("Should run handleCheckChange if selectingInitiatesLoad is false and handleInputChange is triggered", async () => {