From 4ae0b4e54bbc4c9e608af688e41fcdf76824c02e Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Mon, 19 Sep 2022 14:06:04 -0400
Subject: [PATCH] CSR-762 Only read one event per action

---
 .../button-question/button-question.vue       |   6 +-
 .../input-button-wrapper.vue                  | 119 +++++++++++++-----
 .../damage-location-question.vue              |   1 +
 src/layouts/vehicle-damage/vehicle-damage.vue |  30 ++---
 .../windshield-damage-type-question.vue       |  35 ++++--
 .../windshield-options/windshield-options.vue |   9 +-
 src/ux-components/list-button/list-button.vue |   3 +-
 src/ux-components/list-card/list-card.vue     |   4 +-
 8 files changed, 147 insertions(+), 60 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 329b28538..6a2cbe165 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -55,6 +55,7 @@
               :isWide="isWide"
               :validationRules="validationRules"
               :textPosition="textPosition"
+              :selectOnKeypress="selectOnKeypress"
               @change="handleAnswerChange"
             />
             
@@ -151,6 +152,7 @@ export default {
     suppressError: Boolean,
     useTextForValue: Boolean,
     valueToLogType: String,
+    selectOnKeypress: Boolean,
   },
   computed: {
     getFieldSetClasses() {
@@ -261,7 +263,9 @@ export default {
     //   this.$emit("isCheckedChanged", val);
     // },
     handleAnswerChange(eventValue) {
-      console.log(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 34507107b..a1295f1bd 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,7 @@
   <label
     :class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
     :for="buttonId"
-    @mouseup.left="handleClick"
+    @mousedown.left="handleEventAction('click', $event)"
   >
     <!-- classes: {{classes}}<br/>
     value: {{value}} <br/>
@@ -16,9 +16,9 @@
       :aria-required="isRequired"
       :value="value"
       :checked="isChecked"
-      @keypress="handleSelectionChange"
-      @keypress.enter="handleClick"
-      @keypress.space="handleClick"
+      @keypress.enter="handleEventAction('keypressSubmit', $event)"
+      @keypress.space="handleEventAction('keypressSubmit', $event)"
+      @change="handleEventAction('keypress', $event)"
     />
 
     <slot></slot>
@@ -73,38 +73,99 @@ export default {
     buttonWrapperClasses: [String, Array, Object],
     inputClasses: [String, Array, Object],
     valueToLogType: String,
+    selectOnKeypress: Boolean,
   },
   data() {
     return {
       valueToEmit: null,
+      hasFirstEventFired: false,
     };
   },
   methods: {
-    handleSelectionChange(event) {
-      console.log(event);
+    handleEventAction(eventType, e) {
+      const eventTypes = {
+        KEYPRESS: "keypress",
+        KEYPRESS_SUBMIT: "keypressSubmit",
+        CLICK: "click",
+      };
+
+      if (!this.hasFirstEventFired) {
+        switch (eventType) {
+          case eventTypes.CLICK:
+          case eventTypes.KEYPRESS_SUBMIT:
+            console.log("clicking");
+            this.handleClick(e);
+            break;
+          case eventTypes.KEYPRESS:
+            console.log("selectOnKeypress: ", this.selectOnKeypress);
+            this.selectOnKeypress
+              ? this.handleClick(e)
+              : this.handleSelectionChange(e);
+            break;
+        }
+      }
+
+      this.hasFirstEventFired = eventType !== eventTypes.KEYPRESS;
+
+      console.log("handleKeypress: ", eventType);
+      // console.log({
+      //   selectOnKeypress: this.selectOnKeypress,
+      //   event: e,
+      //   eventType: eventType,
+      //   isClick: eventType === "click",
+      //   isKeypress: eventType === "keypress",
+      // });
+      // console.log(eventType)
+
+      // click => click, keypress
+      // space => keypressSubmit, keypress
+      // arrow left/right => keypress
+
+      // if selectOnKeypress (YMMS)
+      // if click => emit event
+      // if space/enter => emit event
+      // if arrow => emit event
+      // else (!selectOnKeypress)
+      // if click => emit event
+      // if space/enter => emit event
+      // if arrow => handleSelection
+
+      // if ((!this.selectOnKeypress && eventType === "click") || (this.selectOnKeypress && eventType === "keypress")) {
+      // this.handleClick(e);
+      // }
+      // else {
+      //   this.handleSelectionChange(e);
+      // }
+    },
+    handleSelectionChange(e) {
+      // console.log("HSC");
+      // console.log(e);
       // console.log(this.value);
       // console.log(this.modelValue);
       // let isChecked = event.target.checked;
       // console.log("BM value: ", this.value);
       // let valueToEmit;
-      console.log("isMultiselect")
-      console.log(this.isMultiSelect)
-      console.log({
-        modelValue: this.modelValue,
-        isMultiselect: this.isMultiSelect
-      })
-      if (this.isMultiSelect && (this.modelValue instanceof Array || this.modelValue == null)) {
+      // console.log("isMultiselect")
+      // console.log(this.isMultiSelect)
+      // console.log({
+      //   modelValue: this.modelValue,
+      //   isMultiselect: this.isMultiSelect
+      // })
+      if (
+        this.isMultiSelect &&
+        (this.modelValue instanceof Array || this.modelValue == null)
+      ) {
         let newValue = this.modelValue ? [...this.modelValue] : [];
-        console.log("newValue", newValue)
-        console.log({
-          newValue: newValue,
-          // isChecked: isChecked
-        })
+        // console.log("newValue", newValue)
+        // console.log({
+        //   newValue: newValue,
+        //   // isChecked: isChecked
+        // })
         if (!newValue.includes(this.value)) {
-          console.log("isChecked")
+          // console.log("isChecked")
           newValue.push(this.value);
         } else {
-          console.log("isn't checked")
+          // console.log("isn't checked")
           newValue.splice(newValue.indexOf(this.value), 1);
         }
 
@@ -113,19 +174,21 @@ export default {
         this.valueToEmit = this.value;
       }
 
-      // console.log("ButtonWrapper is emitting: ", valueToEmit);
-
-      console.log("Not emitting");
+      // console.log("handlingChange", this.valueToEmit);
       this.handleChange(this.valueToEmit);
-
       this.pushClickEventToGA();
+      // if (this.selectOnKeypress) {
+      //   this.handleClick(e)
+      // }
     },
     handleClick(e) {
-      console.log("emitting");
-      console.log(e);
+      console.log("handleClick");
       this.handleSelectionChange(e);
-      console.log("valueToEmit")
-      console.log(this.valueToEmit)
+      // console.log("HC");
+      // console.log({
+      //   eventEmitting: e,
+      //   valueToEmit: this.valueToEmit,
+      // });
       this.$emit("change", this.valueToEmit);
     },
     pushClickEventToGA() {
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 c5fe36eed..5a0a48e99 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
@@ -8,6 +8,7 @@
             buttonType="listCard"
             isRequired
             v-model="selectedValue"
+            :selectOnKeypress="true"
             validationRules="damage-location-required"
         />
     </div>
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index c55cb9f0c..6a6ccc1ea 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -38,22 +38,22 @@
             alertClass="alert-danger"
             :isDismissible="false"
           />
-          <sideDoorOptions
+          <!-- <sideDoorOptions
             ref="sideDoorOptions"
             cmsWidgetName="SideDoorSideQuestion"
             groupName="SideDoorSideQuestion"
             v-model="sideDoorOptionsData"
             v-show="!hasRepairReplaceConflict"
             :selectedDamageLocations="selectedDamageLocations"
-          />
-          <replaceOptionsQuestion
+          /> -->
+          <!-- <replaceOptionsQuestion
             ref="backGlassOptions"
             cmsWidgetName="RearReplaceOptionsQuestion"
             :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
             v-model="selectedRearReplaceOptions"
             groupName="BackGlassReplaceOptionsQuestion"
             validationRules="replace-options-required"
-          />
+          /> -->
           <funnel-footer
             cmsWidgetName="FunnelFooterWidget"
             :isForwardActionDisabled="!meta.valid"
@@ -126,15 +126,15 @@ export default {
       vm.$refs.damageLocation.initializeComponent(
         resultMap.damageOptions
       );
-      vm.$refs.sideDoorOptions.initializeComponent(
-        resultMap.damageOptions.driverSideOptions.availableReplacementOptions, resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
-      );
-      vm.$refs.windshieldOptions.initializeComponent(
-        resultMap.damageOptions.windshieldOptions.availableReplacementOptions
-      );
-      vm.$refs.backGlassOptions.initializeComponent(
-        resultMap.damageOptions.backGlassOptions.availableReplacementOptions
-      );
+      // vm.$refs.sideDoorOptions.initializeComponent(
+      //   resultMap.damageOptions.driverSideOptions.availableReplacementOptions, resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
+      // );
+      // vm.$refs.windshieldOptions.initializeComponent(
+      //   resultMap.damageOptions.windshieldOptions.availableReplacementOptions
+      // );
+      // vm.$refs.backGlassOptions.initializeComponent(
+      //   resultMap.damageOptions.backGlassOptions.availableReplacementOptions
+      // );
 
 
     });
@@ -401,10 +401,10 @@ export default {
     funnelFooter,
     vehicleBanner,
     funnelSubHeader,
-    sideDoorOptions,
+    // sideDoorOptions,
     damageLocationQuestion,
     windshieldOptions,
-    replaceOptionsQuestion,
+    // replaceOptionsQuestion,
     Form,
     alert,
   },
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 e76536103..9bd614e65 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
@@ -6,9 +6,10 @@
                 :answers="answersFromCms"
                 :groupName="groupName"
                 buttonType="listCard"
-                v-model="selectedValues"
+                v-model="selectedValue"
                 :suppressError="suppressError"
                 :validationRules="validationRules"
+                :selectOnKeypress="true"
                 isRequired
             />
         </div>
@@ -17,11 +18,13 @@
 
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
+import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin";
 
 export default ({
     name: "windshieldDamageTypeQuestion",
+    mixins: [buttonQuestionWrapperMixin],
     props: {
-        modelValue: String,
+        // modelValue: String,
         groupName: String,
         isAvailable: Boolean,
         suppressError: Boolean,
@@ -35,17 +38,29 @@ export default ({
         answersFromCms(){
             return this.getCmsContent(this.cmsWidgetName, 'Answers');
         },
-        selectedValues: {
-            get: function() {
-                return this.modelValue;
-            },
-            set: function(newValue) {
-                this.$emit("update:modelValue", newValue);
-            }
-        },
+        // selectedValues: {
+        //     get: function() {
+        //         return this.modelValue;
+        //     },
+        //     set: function(newValue) {
+        //         this.$emit("update:modelValue", newValue);
+        //     }
+        // },
     },
     components: {
         buttonQuestion,
+    },
+    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/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index e3524e3f0..290da4d6e 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -1,5 +1,7 @@
 <template>
     <div class="windshield-options">
+        selectedDamageLocations: {{ selectedDamageLocations }}
+        selectedWindshieldDamageTypeValue: {{selectedWindshieldDamageTypeValue}}
         <windshieldDamageTypeQuestion cmsWidgetName="WindshieldDamageTypeQuestion"
             :isAvailable="isWindshieldDamageLocation"
             :suppressError="hasRepairReplaceConflict || showNoReplacementAvailableError"
@@ -20,6 +22,7 @@
             v-model="selectedWindshieldChipCountValues"
             validationRules="windshield-chip-count-required"
         />
+        <!-- 
         <replaceOptionsQuestion ref="replaceOptionsQuestion" cmsWidgetName="WindshieldReplaceOptionsQuestion"
             :isAvailable="isReplaceOptionSelected"
             isMultiSelect
@@ -28,7 +31,7 @@
             validationRules="windshield-replace-options-required|prevent-split-and-single-together"
             :suppressError="hasSplitSingleConflict"
             isRequired
-        />
+        /> -->
         <alert
             v-if="hasSplitSingleConflict"
             class="mt-5"
@@ -114,7 +117,7 @@ export default ({
         },
         selectedWindshieldDamageTypeValue: {
             get: function() {
-                return this.selectedValues.selectedWindshieldDamageType;
+                return this.selectedDamageLocations.includes(damageLocationsSelected.WINDSHIELD) ? this.selectedValues.selectedWindshieldDamageType : null;
             },
             set: function(newValue) {
                 this.selectedValues = this.getWindshieldOptions(newValue, null, null);
@@ -178,7 +181,7 @@ export default ({
     components: {
         windshieldDamageTypeQuestion,
         windshieldChipCountQuestion,
-        replaceOptionsQuestion,
+        // replaceOptionsQuestion,
         alert,
     },
 })
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 7fb53eec2..10a86e1a7 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -31,7 +31,6 @@
 
   <inputButtonWrapper
     :isMultiSelect="isMultiSelect"
-    :modelValue="modelValue"
     :value="value"
     :groupName="groupName"
     buttonWrapperClasses="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
@@ -72,7 +71,7 @@ export default {
   props: {
     // groupName: String,
     buttonLabel: [Number, String],
-    buttonID: [Number, String],
+    // buttonID: [Number, String],
     // isRequired: Boolean,
     textPosition: String,
     buttonLabelSubCopy: String,
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 3d9c661e8..d88657f9e 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -9,6 +9,7 @@
     :value="value"
     :groupName="groupName"
     :validationRules="validationRules"
+    :selectOnKeypress="selectOnKeypress"
     @change="handleAnswerChange"
   >
 
@@ -88,7 +89,7 @@ export default {
     buttonLabel: String, //Required: Label text
     isRequired: Boolean, //Required: is aria-required required or not?
     altText: String, //Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
-    buttonID: String, // TODO KO We don't use this //Required: Unique
+    // buttonID: String, // TODO KO We don't use this //Required: Unique
     groupName: String, //Rquired: Unique
     buttonLabelSubCopy: String, //Optional: sub text
     value: {
@@ -101,6 +102,7 @@ export default {
     // selectedValues: [Array, String],
     // hasError: Boolean,
     valueToLogType: String,
+    selectOnKeypress: Boolean
   },
   data() {
     return {