From 78151929c90bc3b273177ac9a878326fff9c147b Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Wed, 28 Sep 2022 13:14:44 -0400
Subject: [PATCH] CSR-762 Button click events firing correctly

---
 .../base-input-button/base-input-button.vue   | 107 +++++++++++-------
 src/mixins/analytics-mixin.js                 |   2 +
 2 files changed, 66 insertions(+), 43 deletions(-)

diff --git a/src/common-components/base-input-button/base-input-button.vue b/src/common-components/base-input-button/base-input-button.vue
index 76fa8e134..e46e1a07d 100644
--- a/src/common-components/base-input-button/base-input-button.vue
+++ b/src/common-components/base-input-button/base-input-button.vue
@@ -2,7 +2,8 @@
     <label
         :class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
         :for="buttonId"
-        @mousedown.left="handleEventAction('click', $event)">
+        @mousedown.left="handleEventAction('click', $event)"
+        @keyup="handleKeyboardNavigation">
         <input
             :type="inputType"
             :id="buttonId"
@@ -13,7 +14,6 @@
             :value="value"
             :checked="isChecked"
             @blur="handleBlur"
-            @focus="handleFocus"
             @keypress.enter="handleEventAction('keypressSubmit', $event)"
             @change="handleEventAction('change', $event)" />
 
@@ -83,20 +83,16 @@ export default {
                     case eventTypes.KEYPRESS_SUBMIT:
                     case eventTypes.CHANGE:
                         this.handleClick(e);
+                        window.lastFocusedInputGroup = this.groupName;
+                        this.pushClickEventToGA();
                         break;
-                    // this.selectOnKeypress
-                    //     ? this.handleClick(e)
-                    //     : this.handleSelectionChange(e);
-                    // break;
                 }
             } else {
                 switch (eventType) {
                     case eventTypes.CLICK:
-                        console.log("RADIO CLICK");
-                    // falls through. Keep this comment for the linter
                     case eventTypes.KEYPRESS_SUBMIT:
-                        console.log("RADIO KEYPRESS CLICK");
                         this.handleClick(e);
+                        this.test();
                         break;
                     case eventTypes.CHANGE:
                         this.selectOnKeypress
@@ -130,27 +126,18 @@ export default {
         },
         handleClick(e) {
             this.handleSelectionChange(e);
-            // console.log("clicked/selected: ", this.valueToEmit)
-            if (this.isMultiSelect) {
-                this.pushClickEventToGA();
-            }
             this.$emit("buttonClicked", this.valueToEmit);
         },
         pushClickEventToGA(value) {
-            console.log("PUSHING: ", {
-                route: this.$route.query[queryStrings.FMG_PAGE],
-                value: value ?? this.value?.toString(),
-                valueToLogType: this.valueToLogType,
-            });
-
             window.firedGaClickEventValues =
                 window.firedGaClickEventValues ?? {};
             window.firedGaClickEventValues[window.lastFocusedInputGroup] =
                 value ?? this.value;
+
             this.pushEventToGA(
                 this.$route.query[queryStrings.FMG_PAGE],
                 this.GaActions.CLICKED,
-                value?.toString ?? this.value?.toString(),
+                value?.toString() ?? this.value?.toString(),
                 true,
                 this.valueToLogType
             );
@@ -159,32 +146,66 @@ export default {
             window.lastFocusedInputGroup = this.groupName;
             window.wasLastFocusedInputMultiselect = this.isMultiSelect;
         },
-        handleFocus() {
-            console.log("FOCUS: ", {
-                currentlySelectedValues: window.currentlySelectedValues,
-                firedGaClickEventValues: window.firedGaClickEventValues,
-                lastFocusedInputGroup: window.lastFocusedInputGroup,
-                wasLastFocusedInputMultiselect:
-                    window.wasLastFocusedInputMultiselect,
-                groupName: this.groupName,
-            });
-            if (
-                window.currentlySelectedValues &&
-                window.firedGaClickEventValues &&
-                window.lastFocusedInputGroup &&
-                !window.wasLastFocusedInputMultiselect &&
-                window.currentlySelectedValues[window.lastFocusedInputGroup] &&
-                window.lastFocusedInputGroup != this.groupName &&
-                window.firedGaClickEventValues[window.lastFocusedInputGroup] !=
+        handleKeyboardNavigation(key) {
+            this.test(key);
+        },
+        test(event) {
+            window.firedGaClickEventValues =
+                window.firedGaClickEventValues ?? {};
+            window.currentlySelectedValues =
+                window.currentlySelectedValues ?? {};
+
+            const keyCode = event?.code;
+            // Keyboard navigation
+            if (keyCode) {
+                if (
+                    window.currentlySelectedValues &&
+                    window.firedGaClickEventValues &&
+                    window.lastFocusedInputGroup &&
+                    !window.wasLastFocusedInputMultiselect &&
+                    window.currentlySelectedValues[
+                        window.lastFocusedInputGroup
+                    ] &&
+                    window.firedGaClickEventValues[
+                        window.lastFocusedInputGroup
+                    ] !=
+                        window.currentlySelectedValues[
+                            window.lastFocusedInputGroup
+                        ]
+                ) {
+                    if (keyCode === "Tab") {
+                        this.pushClickEventToGA(
+                            window.currentlySelectedValues[
+                                window.lastFocusedInputGroup
+                            ]
+                        );
+                    } else if (keyCode?.includes("Arrow")) {
+                        if (window.lastFocusedInputGroup != this.groupName) {
+                            this.pushClickEventToGA(
+                                window.currentlySelectedValues[
+                                    window.lastFocusedInputGroup
+                                ]
+                            );
+                        }
+                    }
+                }
+            } else {
+                // Radio click
+                window.lastFocusedInputGroup = this.groupName;
+                if (
+                    window.firedGaClickEventValues[
+                        window.lastFocusedInputGroup
+                    ] !=
                     window.currentlySelectedValues[window.lastFocusedInputGroup]
-            ) {
-                // TODO MAKE SURE THIS IS FIRING THE RIGHT VALUE
-                this.pushClickEventToGA(
-                    window.currentlySelectedValues[window.lastFocusedInputGroup]
-                );
+                ) {
+                    this.pushClickEventToGA(
+                        window.currentlySelectedValues[
+                            window.lastFocusedInputGroup
+                        ]
+                    );
+                }
             }
         },
-        test() {}
     },
     computed: {
         isChecked() {
diff --git a/src/mixins/analytics-mixin.js b/src/mixins/analytics-mixin.js
index 6eb18e462..556ca509e 100644
--- a/src/mixins/analytics-mixin.js
+++ b/src/mixins/analytics-mixin.js
@@ -29,6 +29,8 @@ export default {
     logCustomEvent(category, action, label, value) {
       const currentPageName = getPageNameByQueryString();
 
+      console.log("PUSHING: ", label)
+
       var payload = {
         userId: getDeviceIdValue(),
         sessionKey: getSessionKeyValue(),