From ee53cac9e3a14342f733d74f02627ecd2fad3e96 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Thu, 6 Oct 2022 12:57:40 -0400
Subject: [PATCH] CSR-762 GA WIP

---
 src/App.vue                                   |  12 +-
 .../base-input-button/base-input-button.vue   | 157 +++++++++++-----
 .../button-question/button-question.vue       | 171 ++++++++++++------
 src/mixins/input-button-wrapper-mixin.js      |  39 ++--
 4 files changed, 260 insertions(+), 119 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6693b2955..f84b92668 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,6 +12,8 @@
 </template>
 
 <script>
+    // TODO KO glass-part-question has nested button questions
+    // TODO KO selectedValues - make consistent for checkbox and radio if possible
 export default {
     name: "app",
     data() {
@@ -23,13 +25,18 @@ export default {
     methods: {
         handleChildFocus(e) {
             const targetType = e.target.type;
-            if (targetType !== "radio") {
+            // console.log(targetType)
+            if (targetType !== "radio" && targetType !== "checkbox") {
                 this.handleInputFocus({
                     groupName: null
                 });
             }
         },
         handleInputFocus(e) {
+            // console.log("app handleInputFocus: ", {
+            //     lastFocusedInputGroupName: this.lastFocusedInputGroupName,
+            //     groupName: e.groupName,
+            // })
             if (
                 e &&
                 this.lastFocusedInputGroupName !== e.groupName &&
@@ -39,6 +46,9 @@ export default {
             }
         },
         handleInputBlur(e) {
+            // console.log("app handleInputBlur: ", {
+            //     groupName: e.groupName,
+            // })
             if (e) {
                 this.lastFocusedInputGroupName = e.groupName;
                 this.onFocusCallback = e.onFocusCallback;
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 8f8bdaa16..12f2743b2 100644
--- a/src/common-components/base-input-button/base-input-button.vue
+++ b/src/common-components/base-input-button/base-input-button.vue
@@ -2,6 +2,8 @@
     <label
         :class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
         :for="buttonId"
+        @focusin="handleFocus"
+        @focusout="handleBlur"
         @mousedown.left="handleEventAction('click', $event)">
         <input
             :type="inputType"
@@ -59,10 +61,20 @@ export default {
             default: true,
         },
         isRequired: Boolean,
+        lastValuePushedToGa: {
+            type: [String, Number],
+            required: true,
+        },
+        // fullName: {
+        //     type: String,
+        //     default: "",
+        //     required: true,
+        // },
     },
     data() {
         return {
             valueToEmit: null,
+            // lastValuePushedToGa: null,
         };
     },
     mounted() {
@@ -72,19 +84,12 @@ export default {
     },
     methods: {
         handleEventAction(eventType, e) {
-            const eventTypes = {
-                CHANGE: "change",
-                ENTER: "enter",
-                SPACE: "space",
-                CLICK: "click",
-            };
-
             // console.log("Handling: ", eventType)
 
             if (this.isMultiSelect) {
                 switch (eventType) {
-                    case eventTypes.ENTER:
-                    case eventTypes.CHANGE:
+                    case this.eventTypes.ENTER:
+                    case this.eventTypes.CHANGE:
                         this.handleClick(e);
                         // this.dispatchStoreAction(
                         //     gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
@@ -92,26 +97,34 @@ export default {
                         //     false
                         // );
 
-                        // this.pushClickEventToGA();
+                        // even if it's pushing from here, it needs to keep track
+                        // of lastFocusedInputGroupName and such
+                        this.pushClickEventToGA();
                         break;
                 }
             } else {
                 switch (eventType) {
-                    case eventTypes.CLICK:  // TODO KO pushClickEventToGa?
-                        this.pushClickEventToGA();
-                    // fallthrough
-                    case eventTypes.ENTER:
-                    case eventTypes.SPACE:
+                    case this.eventTypes.CLICK: // TODO KO pushClickEventToGa?
+                    case this.eventTypes.ENTER:
+                    case this.eventTypes.SPACE:
                         this.handleClick(e);
+
                         // this.pushClickEventToGAIfReady();
                         break;
-                    case eventTypes.CHANGE:
+                    case this.eventTypes.CHANGE:
                         this.selectOnKeypress
                             ? this.handleClick(e)
                             : this.handleSelectionChange(e);
                         break;
                 }
+
+                if (eventType === this.eventTypes.CLICK) {
+                    console.log("PUSH FROM RADIO CLICK");
+                    this.pushClickEventToGA();
+                }
             }
+
+            // this.pushClickEventToGA(eventType);
         },
         handleSelectionChange(e) {
             if (
@@ -142,37 +155,76 @@ export default {
         },
         handleClick(e) {
             this.handleSelectionChange(e);
-            // console.log("addEventToBus: ", this.value?.toString())
-            eventBus.readAndPopEventFromBus("GA", "click")
-            eventBus.addEventToBus("GA", "click", {
-                category: this.$route.query[queryStrings.FMG_PAGE],
-                action: this.GaActions.CLICKED,
-                label: this.value?.toString(),
-                pushToLogApp: true,
-                valueToLogType: this.valueToLogType,
+            console.log("inputButtonClicked");
+            this.$emit("inputButtonClicked", {
+                selectedAnswers: this.valueToEmit,
+                lastValuePushedToGa: this.lastValuePushedToGa,
             });
-            this.$emit("inputButtonClicked", this.valueToEmit);
         },
-        pushClickEventToGA(value) {
-            // const lastFocusedInputGroup =
-            //     this.$store.getters.gaClickInformation.lastFocusedInputGroup;
-            // this.dispatchStoreAction(
-            //     gaStoreActions.UPDATE_FIRED_GA_CLICK_EVENT_VALUES,
-            //     {
-            //         groupName: lastFocusedInputGroup,
-            //         value: value ?? this.value,
-            //     },
-            // );
+        onFocusCallbackForRoot() {
+            // console.log("onFocusCallbackForRoot: ", {
+            //     isValueSelectedOnClick: this.isValueSelectedOnClick,
+            //     isChecked: this.isChecked,
+            //     value: this.value,
+            //     lastValuePushedToGa: this.lastValuePushedToGa,
+            // });
+            // if (
+            //     !this.isValueSelectedOnClick &&
+            //     this.isChecked &&
+            //     this.lastValuePushedToGa != this.value
+            // ) {
+            //     console.log("PUSH FROM ROOT CALLBACK");
+            //     this.pushClickEventToGA();
+            // }
 
-            console.log("BIB")
-            this.pushEventToGA(
-                this.$route.query[queryStrings.FMG_PAGE],
-                this.GaActions.CLICKED,
-                value?.toString() ?? this.value?.toString(),
-                true,
-                this.valueToLogType
-            );
+            this.pushClickEventToGA();
         },
+        handleFocus(e) {
+            // console.log("FOCUS: ", this.groupName);
+            // console.log("FOCUS :", {
+            //     groupName: this.groupName,
+            //     value: this.value,
+            // });
+            this.$root.handleInputFocus({
+                groupName: this.groupName,
+            });
+        },
+        handleBlur(e) {
+            // console.log("BLUR: ", this.groupName);
+            // console.log("BLUR :", {
+            //     groupName: this.groupName,
+            //     value: this.value
+            // })
+            this.$root.handleInputBlur({
+                groupName: this.groupName,
+                onFocusCallback: this.onFocusCallbackForRoot,
+            });
+        },
+        pushClickEventToGA(eventType) {
+            if (this.isMultiSelect || !eventType) {
+                console.log("PUSHING: ", this.value);
+            } else {
+                if (eventType === this.eventTypes.CLICK) {
+                    console.log("PUSHING: ", this.value);
+                } else {
+                    if (
+                        this.isChecked &&
+                        this.lastValuePushedToGa != this.value
+                    ) {
+                        console.log("PUSHING: ", this.value);
+                    }
+                }
+            }
+
+            // this.pushEventToGA(
+            //     this.$route.query[queryStrings.FMG_PAGE],
+            //     this.GaActions.CLICKED,
+            //     this.value?.toString(),
+            //     true,
+            //     this.valueToLogType
+            // );
+        },
+
         // handleBlur() {
         //     // this.dispatchStoreAction(
         //     //     gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
@@ -257,6 +309,25 @@ export default {
                 .toString()
                 ?.replace(" ", "-")}`;
         },
+        isValueSelectedOnClick() {
+            return this.isMultiSelect || this.selectingInitiatesLoad;
+        },
+        eventTypes() {
+            return {
+                CHANGE: "change",
+                ENTER: "enter",
+                SPACE: "space",
+                CLICK: "click",
+            };
+        },
+        // lastValuePushedToGaTest: {
+        //     get: () => {
+        //         return this.lastValuePushedToGa;
+        //     },
+        //     set: () => {
+        //         this.$emit("valuePushedToGa", this.value);
+        //     },
+        // },
     },
     setup(props) {
         const inputType = props.isMultiSelect ? "checkbox" : "radio";
diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index da932c3a4..2f4d1ec43 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -34,6 +34,7 @@
                     }}
                 </legend>
                 <div :class="getComponentLoopWrapperClasses">
+                    lastValuePushedToGa: {{ lastValuePushedToGa }}<br />
                     <div
                         :class="getComponentWrapperClasses"
                         v-for="answer in buttonsInfo"
@@ -48,6 +49,7 @@
                             :isMultiSelect="isMultiSelect"
                             :value="answer.value"
                             :modelValue="modelValue"
+                            v-model:lastValuePushedToGa="lastValuePushedToGa"
                             :selectingInitiatesLoad="selectingInitiatesLoad"
                             :isWide="isWide"
                             :validationRules="validationRules"
@@ -58,8 +60,8 @@
                         <transition name="fade" mode="out-in">
                             <div
                                 v-if="
-                                    typeof primaryValue == 'string' &&
-                                    primaryValue == answer.value
+                                    typeof selectedValues == 'string' &&
+                                    selectedValues == answer.value
                                 ">
                                 <slot></slot>
                             </div>
@@ -126,9 +128,10 @@ export default {
     },
     data() {
         return {
-            primaryValue: "",
+            selectedValues: "",
             // lastFocusedInputGroup: "",
             lastPushedGaEventValue: null,
+            mostRecentlySelectedValue: null,
         };
     },
     computed: {
@@ -200,9 +203,9 @@ export default {
                 })
             );
         },
-        isValueSelectedOnClick() {
-            return this.isMultiSelect || this.selectingInitiatesLoad;
-        },
+        // isValueSelectedOnClick() {
+        //     return this.isMultiSelect || this.selectingInitiatesLoad;
+        // },
     },
     methods: {
         formatString(str) {
@@ -226,58 +229,118 @@ export default {
                         : this.formatString(answer.toString());
             }
         },
-        handleAnswerChange(primaryAnswerValue) {
-            this.primaryValue = primaryAnswerValue;
+        handleAnswerChange({ selectedAnswers, mostRecentlySelectedValue }) {
+            this.selectedValues = selectedAnswers;
+            this.mostRecentlySelectedValue = mostRecentlySelectedValue;
 
-            if (this.isValueSelectedOnClick) {
-                this.pushClickEventToGA();
-            }
+            // if (this.isValueSelectedOnClick) {
+            //     this.pushClickEventToGA();
+            // }
 
-            this.$emit("buttonQuestionChange", primaryAnswerValue);
-            this.$emit("update:modelValue", primaryAnswerValue);
+            this.$emit("buttonQuestionChange", selectedAnswers);
+            this.$emit("update:modelValue", selectedAnswers);
         },
-        pushClickEventToGA() {
-            // const valueToPushToGa =
-            //     value?.toString() ?? this.primaryValue?.toString();
+/////////////////////////////
+        // onFocusCallbackForRoot() {
+        //     console.log("onFocusCallbackForRoot: ", {
+        //         isValueSelectedOnClick: this.isValueSelectedOnClick,
+        //         isChecked: this.isChecked,
+        //         value: this.value,
+        //         lastValuePushedToGa: this.lastValuePushedToGa,
+        //     });
+        //     if (
+        //         !this.isValueSelectedOnClick &&
+        //         // this.isChecked &&
+        //         this.lastValuePushedToGa != this.mostRecentlySelectedValue
+        //     ) {
+        //         console.log("PUSH FROM ROOT CALLBACK");
+        //         this.pushClickEventToGA();
+        //     }
+        // },
+        // handleFocus(e) {
+        //     // console.log("FOCUS :", {
+        //     //     groupName: this.groupName,
+        //     //     value: this.value,
+        //     // });
+        //     this.$root.handleInputFocus({
+        //         groupName: this.groupName,
+        //     });
+        // },
+        // handleBlur(e) {
+        //     // console.log("BLUR :", {
+        //     //     groupName: this.groupName,
+        //     //     value: this.value
+        //     // })
+        //     this.$root.handleInputBlur({
+        //         groupName: this.groupName,
+        //         onFocusCallback: this.onFocusCallbackForRoot,
+        //     });
+        // },
+        // pushClickEventToGA() {
+        //     // const lastFocusedInputGroup =
+        //     //     this.$store.getters.gaClickInformation.lastFocusedInputGroup;
+        //     // this.dispatchStoreAction(
+        //     //     gaStoreActions.UPDATE_FIRED_GA_CLICK_EVENT_VALUES,
+        //     //     {
+        //     //         groupName: lastFocusedInputGroup,
+        //     //         value: value ?? this.value,
+        //     //     },
+        //     // );
 
-            // console.log("pushing")
-            const event = eventBus.readAndPopEventFromBus("GA", "click");
-            const valueToPushToGa = event?.label;
-            // console.log({
-            //     valueToPushToGa,
-            //     lastPushedGaEventValue: this.lastPushedGaEventValue,
-            // });
-            if (
-                (valueToPushToGa &&
-                    valueToPushToGa !== this.lastPushedGaEventValue) ||
-                this.isValueSelectedOnClick
-            ) {
-                this.lastPushedGaEventValue = valueToPushToGa;
-                this.pushEventToGA(
-                    event.category,
-                    event.action,
-                    valueToPushToGa,
-                    event.pushToLogType,
-                    event.valueToLogType
-                );
-            }
-        },
-        onFocusCallbackForRoot() {
-            if (!this.isValueSelectedOnClick) {
-                this.pushClickEventToGA();
-            }
-        },
-        handleFocus(e) {
-            this.$root.handleInputFocus({
-                groupName: this.groupName,
-            });
-        },
-        handleBlur(e) {
-            this.$root.handleInputBlur({
-                groupName: this.groupName,
-                onFocusCallback: this.onFocusCallbackForRoot,
-            });
-        },
+        //     this.lastValuePushedToGa = this.mostRecentlySelectedValue;
+        //     console.log("BIB");
+        //     this.pushEventToGA(
+        //         this.$route.query[queryStrings.FMG_PAGE],
+        //         this.GaActions.CLICKED,
+        //         this.mostRecentlySelectedValue?.toString(),
+        //         true,
+        //         this.valueToLogType
+        //     );
+        // },
+//////////////////////////////////
+        // pushClickEventToGA() {
+        //     // const valueToPushToGa =
+        //     //     value?.toString() ?? this.selectedValues?.toString();
+
+        //     // console.log("pushing")
+        //     const event = eventBus.readAndPopEventFromBus("GA", "click");
+        //     const valueToPushToGa = event?.label;
+        //     console.log({
+        //         valueToPushToGa,
+        //         lastPushedGaEventValue: this.lastPushedGaEventValue,
+        //     });onFocusCallbackForRoot() {
+        //     console.log("Diff: ", this.isValueSelectedOnClick)
+        //     if (!this.isValueSelectedOnClick) {
+        //         this.pushClickEventToGA();
+        //     }
+        // },
+        // handleFocus(e) {
+        //     this.$root.handleInputFocus({
+        //         groupName: this.groupName,
+        //     });
+        // },
+        // handleBlur(e) {
+        //     this.$root.handleInputBlur({
+        //         groupName: this.groupName,
+        //         onFocusCallback: this.onFocusCallbackForRoot,
+        //     });
+        // },
+        //     if (
+        //         (event &&
+        //             valueToPushToGa !== this.lastPushedGaEventValue) ||
+        //         this.isValueSelectedOnClick
+        //     ) {
+        //         this.lastPushedGaEventValue = valueToPushToGa;
+        //         this.pushEventToGA(
+        //             event.category,
+        //             event.action,
+        //             valueToPushToGa,
+        //             event.pushToLogType,
+        //             event.valueToLogType
+        //         );
+        //     }
+        // },
+        //
     },
     components: {
         listButton,
diff --git a/src/mixins/input-button-wrapper-mixin.js b/src/mixins/input-button-wrapper-mixin.js
index 2c76bdb5b..fdf5b3fd1 100644
--- a/src/mixins/input-button-wrapper-mixin.js
+++ b/src/mixins/input-button-wrapper-mixin.js
@@ -19,33 +19,30 @@ export default {
         isRequired: {
             type: Boolean,
             default: true
-        }
-    },
-    data() {
-        return {
-            selectedValue: null,
-        };
-    },
-    mounted() {
-        this.selectedValue = this.modelValue;
+        },
+        // pushClickEventToGA: Function,
+        lastValuePushedToGa: [String, Number]
     },
     methods: {
         handleAnswerChange(e) {
             if (this.preHandleAnswerChange) {
-                this.preHandleAnswerChange(e)
+                this.preHandleAnswerChange(e.selectedAnswers)
             }
             
-            this.$emit("change", e);
+            this.$emit("change", e.selectedAnswers);
+            // this.$emit("update:lastValuePushedToGa", e.lastValuePushedToGa);
         },
+
+
     },
-    computed: {
-        selectedValue: {
-            get: () => {
-                return this.modelValue;
-            },
-            set: function(newValue) {
-                this.$emit("update:modelValue", newValue);
-            }
-        }
-    },
+    // computed: {
+    //     selectedValueHandler: {
+    //         get: () => {
+    //             return this.modelValue;
+    //         },
+    //         set: function(newValue) {
+    //             this.$emit("update:modelValue", newValue);
+    //         }
+    //     },
+    // },
 };