From 95e972a02fb6df9f3db4255cf536d06bfc5d06e1 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Mon, 19 Sep 2022 16:17:52 -0400
Subject: [PATCH] CSR-762 list-card with aggressive validation

---
 .../button-question/button-question.vue       |  6 +-
 .../input-button-wrapper.vue                  | 69 ++++++++++++++-----
 .../damage-location-question.vue              |  2 +-
 .../replace-options-question.vue              | 21 +++---
 src/layouts/vehicle-damage/vehicle-damage.vue |  6 +-
 .../windshield-chip-count-question.vue        |  1 +
 .../windshield-damage-type-question.vue       | 24 +++----
 src/mixins/button-question-wrapper-mixin.js   |  1 +
 .../list-button-horizontal.vue                | 67 ++++++++++--------
 src/ux-components/list-card/list-card.vue     |  2 +-
 10 files changed, 125 insertions(+), 74 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 9fdb19a7b..07897f0e6 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -263,9 +263,9 @@ export default {
     //   this.$emit("isCheckedChanged", val);
     // },
     handleAnswerChange(eventValue) {
-      console.log({
-        bqEvent: eventValue
-      })
+      // console.log({
+      //   bqEvent: eventValue
+      // })
       this.$emit("update:modelValue", eventValue);
     },
   },
diff --git a/src/common-components/input-button-wrapper/input-button-wrapper.vue b/src/common-components/input-button-wrapper/input-button-wrapper.vue
index 4c9e04397..374b4b5e0 100644
--- a/src/common-components/input-button-wrapper/input-button-wrapper.vue
+++ b/src/common-components/input-button-wrapper/input-button-wrapper.vue
@@ -2,7 +2,6 @@
   <label
     :class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
     :for="buttonId"
-    @mousedown.left="handleEventAction('click', $event)"
   >
     <!-- classes: {{classes}}<br/>
     value: {{value}} <br/>
@@ -17,7 +16,6 @@
       :value="value"
       :checked="isChecked"
       @keypress.enter="handleEventAction('keypressSubmit', $event)"
-      @keypress.space="handleEventAction('keypressSubmit', $event)"
       @change="handleEventAction('change', $event)"
     />
 
@@ -81,6 +79,14 @@ export default {
       hasFirstEventFired: false,
     };
   },
+  mounted() {
+    console.log({
+      isChecked: this.isChecked,
+      modelValue: this.modelValue
+    })
+
+    this.handleChange(this.modelValue)
+  },
   methods: {
     handleEventAction(eventType, e) {
       const eventTypes = {
@@ -89,25 +95,52 @@ export default {
         CLICK: "click",
       };
 
-      if (!this.hasFirstEventFired) {
-        switch (eventType) {
-          case eventTypes.CLICK:
-          case eventTypes.KEYPRESS_SUBMIT:
-            console.log("clicking");
-            this.handleClick(e);
-            break;
-          case eventTypes.CHANGE:
-            console.log("selectOnKeypress: ", this.selectOnKeypress);
-            this.selectOnKeypress
-              ? this.handleClick(e)
-              : this.handleSelectionChange(e);
-            break;
-        }
+      console.log({
+        handleKeypress: eventType,
+        hasFirstEventFired: this.hasFirstEventFired,
+      });
+
+      if (this.isMultiSelect) {
+        // if (true) {
+          switch (eventType) {
+            case eventTypes.CLICK:
+            case eventTypes.KEYPRESS_SUBMIT:
+              console.log("clicking");
+              this.hasFirstEventFired = true;
+              this.handleClick(e);
+              break;
+            case eventTypes.CHANGE:
+              console.log("selectOnKeypress: ", this.selectOnKeypress);
+              this.hasFirstEventFired = false;
+              this.selectOnKeypress
+                ? this.handleClick(e)
+                : this.handleSelectionChange(e);
+              break;
+          }
+          // if (this.hasFirstEventFired) {
+          //   this.hasFirstEventFired = eventType === eventTypes.CHANGE;
+          // }
+        // }
+      } else {
+        this.handleClick(e);
       }
 
-      this.hasFirstEventFired = eventType !== eventTypes.CHANGE;
+      // if (!this.hasFirstEventFired) {
 
-      console.log("handleKeypress: ", eventType);
+      // else {
+      //   this.hasFirstEventFired = eventType !== eventTypes.CHANGE;
+      // }
+
+      // else {
+      //   this.hasFirstEventFired = true;
+      //   this.selectOnKeypress
+      //     ? this.handleClick(e)
+      //     : this.handleSelectionChange(e);
+      // }
+
+      // this.hasFirstEventFired = eventType !== eventTypes.CHANGE;
+
+      // this.handleClick(e);
       // console.log({
       //   selectOnKeypress: this.selectOnKeypress,
       //   event: e,
diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
index 5a0a48e99..8c679d4f6 100644
--- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
+++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
@@ -78,7 +78,7 @@ export default ({
     },
     watch: {
         selectedValue(selectedValue) {
-            console.log("DLQ: ", selectedValue)
+            // console.log("DLQ: ", selectedValue)
             this.$emit("update:modelValue", selectedValue)
         }
     }
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 a11b052e5..9058f2fcb 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
@@ -8,7 +8,7 @@
                 :answers="answersToDisplay"
                 :groupName="groupName"
                 buttonType="listCard"
-                v-model="selectedValues"
+                v-model="selectedValue"
                 :validationRules="validationRules"
                 :suppressError="suppressError"
                 :isRequired=isRequired
@@ -20,9 +20,11 @@
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
 import store from "@/store";
+import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin";
 
 export default ({
     name: "replaceOptionsQuestion",
+    mixins: [buttonQuestionWrapperMixin],
     data(){
         return {
             replaceOptions: [],
@@ -32,7 +34,7 @@ export default ({
         isAvailable: Boolean,
         filterByVehicleCategory: Boolean,
         groupName: String,
-        modelValue: Array,
+        // modelValue: Array,
         isMultiSelect: Boolean,
         validationRules: String,
         suppressError: Boolean,
@@ -43,12 +45,13 @@ export default ({
         initializeComponent(replaceOptions){
             this.replaceOptions = replaceOptions;
         },
-        // updateSelectedValues() {
-        //     // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
-        //     if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
-        //         this.selectedValues = [this.answersToDisplay[0].Name];
-        //     }
-        // },
+        updateSelectedValues() {
+            // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
+            // ex: BackGlass stationary
+            if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
+                this.selectedValue = [this.answersToDisplay[0].Name];
+            }
+        },
     },
     computed: {
         questionText(){
@@ -91,7 +94,7 @@ export default ({
         },
         shouldDisplayReplaceOptionsQuestion(shouldDisplayReplaceOptionsQuestion) {
             if (!shouldDisplayReplaceOptionsQuestion) {
-                this.selectedValues = [];
+                this.selectedValue = [];
             }
         }
     },
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 6a6ccc1ea..87ca23963 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -38,14 +38,14 @@
             alertClass="alert-danger"
             :isDismissible="false"
           />
-          <!-- <sideDoorOptions
+          <sideDoorOptions
             ref="sideDoorOptions"
             cmsWidgetName="SideDoorSideQuestion"
             groupName="SideDoorSideQuestion"
             v-model="sideDoorOptionsData"
             v-show="!hasRepairReplaceConflict"
             :selectedDamageLocations="selectedDamageLocations"
-          /> -->
+          />
           <!-- <replaceOptionsQuestion
             ref="backGlassOptions"
             cmsWidgetName="RearReplaceOptionsQuestion"
@@ -401,7 +401,7 @@ export default {
     funnelFooter,
     vehicleBanner,
     funnelSubHeader,
-    // sideDoorOptions,
+    sideDoorOptions,
     damageLocationQuestion,
     windshieldOptions,
     // replaceOptionsQuestion,
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
index a08cc69af..191e263e7 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
@@ -30,6 +30,7 @@ export default ({
         cmsWidgetName: String,
     },
     methods: {
+        // TODO KO is this being used? Always three options
         updateSelectedValues() {
             // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
             if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) {
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
index 9bd614e65..2a349d4c1 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
@@ -50,17 +50,17 @@ export default ({
     components: {
         buttonQuestion,
     },
-    watch: {
-        isAvailable(isAvailable) {
-            if (!isAvailable) {
-                console.log({
-                    isAvailable: isAvailable
-                })
-                console.log("updating")
-                this.selectedValue = null;
-                // this.$emit("update:modelValue", null);
-            }
-        }
-    }
+    // watch: {
+    //     isAvailable(isAvailable) {
+    //         if (!isAvailable) {
+    //             // console.log({
+    //             //     isAvailable: isAvailable
+    //             // })
+    //             // console.log("updating")
+    //             this.selectedValue = null;
+    //             // this.$emit("update:modelValue", null);
+    //         }
+    //     }
+    // }
 })
 </script>
\ No newline at end of file
diff --git a/src/mixins/button-question-wrapper-mixin.js b/src/mixins/button-question-wrapper-mixin.js
index b5dc80d8a..14119d815 100644
--- a/src/mixins/button-question-wrapper-mixin.js
+++ b/src/mixins/button-question-wrapper-mixin.js
@@ -1,6 +1,7 @@
 export default {
   props: {
     modelValue: String,
+    
   },
   data() {
     return {
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 5934d35e4..370756162 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -1,12 +1,22 @@
 <template>
-  <div class="list-group list-button-horizontal d-flex flex-column w-100"
+  <inputButtonWrapper
+    :buttonWrapperClasses="[
+      'list-group list-button-horizontal d-flex flex-column w-100',
+      { 'radio-fancy': isCashOrInsurance, 'has-error': errors.length > 0 }
+    ]"
+    :isMultiSelect="isMultiSelect"
+    :modelValue="modelValue"
+    :value="value"
+    :groupName="groupName"
+    :validationRules="validationRules"
+    :selectOnKeypress="selectOnKeypress"
+    @change="handleAnswerChange"
+  >
+  <!-- <div class="list-group list-button-horizontal d-flex flex-column w-100"
     :class="[(errors.length > 0 || hasError) ? 'has-error' : '', isCashOrInsurance ? 'radio-fancy' : '']"
     @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" @change="handleInputChange()" />
-    <label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID"
-      class="d-flex flex-column justify-content-center p-3" @mouseup="triggerButton()">
+    @keyup.left="handleKeyupArrow()" @keyup.right="handleKeyupArrow()"> -->
+    <div :aria-labelledby="buttonID" class="list-button-horizontal-content d-flex flex-column justify-content-center p-3" @mouseup="triggerButton()">
       <span class="m-0" :class="textPosition">
         {{  buttonLabel  }}
       </span>
@@ -17,8 +27,9 @@
         {{  screenReaderOnlyText  }}
       </span>
       <loader v-if="isLoaderDisplayed && selectingInitiatesLoad" :class="[loaderColor, loaderPosition]" />
-    </label>
-  </div>
+    </div>
+  <!-- </div> -->
+  </inputButtonWrapper>
 </template>
 
 <script>
@@ -26,6 +37,7 @@ import { useField } from "vee-validate";
 import loader from "@/ux-components/loader/loader";
 import { toRef } from "vue";
 import { queryStrings } from "@/constants/query-strings";
+import inputButtonWrapper from "@/common-components/input-button-wrapper/input-button-wrapper";
 
 export default {
   name: "listButtonHorizontal",
@@ -116,6 +128,7 @@ export default {
   },
   components: {
     loader,
+    inputButtonWrapper
   },
   setup(props) {
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
@@ -159,33 +172,33 @@ export default {
     opacity: 0;
     width: 0;
 
-    &:focus-visible+label {
+    &:focus-visible+.list-button-horizontal-content {
       box-shadow: 0 0 0 2.5px $blue;
       z-index: 2;
     }
 
-    &:focus+label {
+    &:focus+.list-button-horizontal-content {
       box-shadow: 0 0 0 2.5px $blue;
       z-index: 3;
     }
 
-    &:checked+label {
+    &:checked+.list-button-horizontal-content {
       background: $blue-100;
       box-shadow: 0 0 0 1px $blue;
       outline: none;
       z-index: 2;
     }
 
-    &:checked:focus+label {
+    &:checked:focus+.list-button-horizontal-content {
       box-shadow: 0 0 0 2.5px $blue;
     }
 
-    &:checked+label p:first-child {
+    &:checked+.list-button-horizontal-content p:first-child {
       font-weight: 500;
     }
   }
 
-  label {
+  .list-button-horizontal-content {
     outline: none;
     position: relative;
     background: $white;
@@ -214,7 +227,7 @@ export default {
 
   // Cash/Insurance option radio button styling
   &.radio-fancy {
-    label {
+    .list-button-horizontal-content {
       border: 1px solid $blue-700;
       z-index: 2;
       color: $blue;
@@ -225,7 +238,7 @@ export default {
       }
     }
 
-    label:hover {
+    .list-button-horizontal-content:hover {
       background-color: $blue-700;
       color: $white;
       box-shadow: none;
@@ -238,16 +251,16 @@ export default {
       opacity: 0;
       width: 0;
 
-      &:focus-visible+label {
+      &:focus-visible+.list-button-horizontal-content {
         border-radius: 0.5rem;
         z-index: 2;
       }
 
-      &:focus+label {
+      &:focus+.list-button-horizontal-content {
         z-index: 3;
       }
 
-      &:checked+label {
+      &:checked+.list-button-horizontal-content {
         outline: none;
         box-shadow: none;
         color: $white;
@@ -256,11 +269,11 @@ export default {
         z-index: 5;
       }
 
-      &:checked:focus+label {
+      &:checked:focus+.list-button-horizontal-content {
         box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
       }
 
-      &:checked+label p:first-child {
+      &:checked+.list-button-horizontal-content p:first-child {
         font-weight: 500;
       }
     }
@@ -270,7 +283,7 @@ export default {
 .col {
   &:first-of-type {
     .list-button-horizontal {
-      label {
+      .list-button-horizontal-content {
         border-bottom-left-radius: 0.5rem;
         border-top-left-radius: 0.5rem;
       }
@@ -279,7 +292,7 @@ export default {
 
   &:last-of-type {
     .list-button-horizontal {
-      label {
+      .list-button-horizontal-content {
         border-bottom-right-radius: 0.5rem;
         border-top-right-radius: 0.5rem;
       }
@@ -290,12 +303,12 @@ export default {
   &:first-of-type {
     .list-button-horizontal.radio-fancy {
       input[type="radio"] {
-        &:checked+label {
+        &:checked+.list-button-horizontal-content {
           border-bottom-right-radius: 0;
           border-top-right-radius: 0;
         }
 
-        &:checked:focus+label {
+        &:checked:focus+.list-button-horizontal-content {
           border-bottom-right-radius: 0.5rem;
           border-top-right-radius: 0.5rem;
         }
@@ -306,12 +319,12 @@ export default {
   &:last-of-type {
     .list-button-horizontal.radio-fancy {
       input[type="radio"] {
-        &:checked+label {
+        &:checked+.list-button-horizontal-content {
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
         }
 
-        &:checked:focus+label {
+        &:checked:focus+.list-button-horizontal-content {
           border-bottom-left-radius: 0.5rem;
           border-top-left-radius: 0.5rem;
         }
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index d88657f9e..7615a8bf1 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -179,7 +179,7 @@ export default {
     //   this.$emit("isCheckedChanged", emitEvent);
     // },
     handleAnswerChange(e) {
-      console.log(e)
+      // console.log(e)
       this.$emit("change", e);
     },
   },