CSR-762 GA WIP, think it's working but needs more testing

.prettierrc

@@ -1,4 +1,4 @@
 {
-    "tabWidth": 2,
+    "tabWidth": 4,
     "bracketSameLine": true
 }

src/App.vue

@@ -1,36 +1,57 @@
 <template>
     <router-view v-slot="{ Component }">
-    <transition :duration="{ enter: 200, leave: 200 }" name="route-fade" mode="out-in">
+        lastFocusedInputGroupName: {{ lastFocusedInputGroupName }}
+        <transition
+            :duration="{ enter: 200, leave: 200 }"
+            name="route-fade"
+            mode="out-in">
             <!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
-      <component :is="Component" @inputFocus="handleFocus" @input-blur="handleBlur"/>
+            <component :is="Component" @focusin="handleChildFocus" />
         </transition>
     </router-view>
 </template>
 
 <script>
-  export default {
+export default {
     name: "app",
     data() {
         return {
             lastFocusedInputGroupName: "",
-        onFocusCallback: null
+            onFocusCallback: null,
-      }
+        };
     },
     methods: {
-      handleFocus(e) {
+        handleChildFocus(e) {
-        console.log("app focus: ", e)
+            const targetType = e.target.type;
-      },
+            if (targetType !== "radio") {
-      handleBlur(e) {
+                this.handleInputFocus({
-        console.log("app blur: ", e)
+                    groupName: null
-      },
+                });
             }
+        },
+        handleInputFocus(e) {
+            if (
+                e &&
+                this.lastFocusedInputGroupName !== e.groupName &&
+                this.onFocusCallback
+            ) {
+                this.onFocusCallback();
             }
+        },
+        handleInputBlur(e) {
+            if (e) {
+                this.lastFocusedInputGroupName = e.groupName;
+                this.onFocusCallback = e.onFocusCallback;
+            }
+        },
+    },
+};
 </script>
 
 <style lang="scss">
-  @import "./node_modules/bootstrap/scss/bootstrap";
+@import "./node_modules/bootstrap/scss/bootstrap";
-  @import "@/styles/common-styles.scss";
+@import "@/styles/common-styles.scss";
-  @import "@/styles/common-typography-styles.scss";
+@import "@/styles/common-typography-styles.scss";
-  @import "@/styles/common-error-styles.scss";
+@import "@/styles/common-error-styles.scss";
-  @import "@/styles/common-animations.scss";
+@import "@/styles/common-animations.scss";
 </style>

src/common-components/button-question/button-question.vue

@@ -125,7 +125,8 @@ export default {
     data() {
         return {
             primaryValue: "",
-            lastFocusedInputGroup: "",
+            // lastFocusedInputGroup: "",
+            lastPushedGaEventValue: null,
         };
     },
     computed: {
@@ -197,6 +198,9 @@ export default {
                 })
             );
         },
+        isValueSelectedOnClick() {
+            return this.isMultiSelect || this.selectingInitiatesLoad;
+        },
     },
     methods: {
         formatString(str) {
@@ -222,32 +226,47 @@ export default {
         },
         handleAnswerChange(primaryAnswerValue) {
             this.primaryValue = primaryAnswerValue;
-            console.log("hAC: ", primaryAnswerValue)
+
+            this.pushClickEventToGA(null, primaryAnswerValue);
+
             this.$emit("buttonQuestionChange", primaryAnswerValue);
             this.$emit("update:modelValue", primaryAnswerValue);
         },
         pushClickEventToGA(e, value) {
+            const valueToPushToGa =
+                value?.toString() ?? this.primaryValue?.toString();
+            console.log({
+                valueToPushToGa,
+                lastPushedGaEventValue: this.lastPushedGaEventValue,
+            });
+            if (valueToPushToGa !== this.lastPushedGaEventValue) {
+                this.lastPushedGaEventValue = valueToPushToGa;
                 this.pushEventToGA(
                     this.$route.query[queryStrings.FMG_PAGE],
                     this.GaActions.CLICKED,
-                value?.toString() ?? this.primaryValue?.toString(),
+                    valueToPushToGa,
                     true,
                     this.valueToLogType
                 );
-        },
-        handleFocus() {
-            this.$root.handleFocus({
-                groupName: this.groupName,
-                value: this.primaryValue
-            })
-        },
-        handleBlur() {
-            this.$root.handleBlur({
-                groupName: this.groupName,
-                value: this.primaryValue
-            })
             }
         },
+        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,
+            });
+        },
+    },
     components: {
         listButton,
         listButtonHorizontal,

src/mixins/base-mixin.js

@@ -61,39 +61,39 @@ export default {
         state: serviceZipValidationResponse.data.state,
       };
     },
-    pushRadioClickEventIfNecessary() {
+  //   pushRadioClickEventIfNecessary() {
-      const {
+  //     const {
-        firedGaClickEventValues,
+  //       firedGaClickEventValues,
-        currentlySelectedValues,
+  //       currentlySelectedValues,
-        lastFocusedInputGroup,
+  //       lastFocusedInputGroup,
-        wasLastFocusedInputMultiselect,
+  //       wasLastFocusedInputMultiselect,
-      } = this.$store.getters.gaClickInformation;
+  //     } = this.$store.getters.gaClickInformation;
 
-      // Keyboard navigation
+  //     // Keyboard navigation
-      if (
+  //     if (
-        !wasLastFocusedInputMultiselect &&
+  //       !wasLastFocusedInputMultiselect &&
-        currentlySelectedValues[lastFocusedInputGroup] &&
+  //       currentlySelectedValues[lastFocusedInputGroup] &&
-        firedGaClickEventValues[lastFocusedInputGroup] !=
+  //       firedGaClickEventValues[lastFocusedInputGroup] !=
-          currentlySelectedValues[lastFocusedInputGroup]
+  //         currentlySelectedValues[lastFocusedInputGroup]
-      ) {
+  //     ) {
-        const value =
+  //       const value =
-          currentlySelectedValues[lastFocusedInputGroup]?.toString();
+  //         currentlySelectedValues[lastFocusedInputGroup]?.toString();
-        // this.dispatchStoreAction(
+  //       // this.dispatchStoreAction(
-        //   gaStoreActions.UPDATE_FIRED_GA_CLICK_EVENT_VALUES,
+  //       //   gaStoreActions.UPDATE_FIRED_GA_CLICK_EVENT_VALUES,
-        //   {
+  //       //   {
-        //     groupName: lastFocusedInputGroup,
+  //       //     groupName: lastFocusedInputGroup,
-        //     value: value,
+  //       //     value: value,
-        //   }
+  //       //   }
+  //       // );
+
+  //       this.pushEventToGA(
+  //         this.$route.query[queryStrings.FMG_PAGE],
+  //         this.GaActions.CLICKED,
+  //         value,
+  //         true
   //       );
-
+  //     }
-        this.pushEventToGA(
+  //   },
-          this.$route.query[queryStrings.FMG_PAGE],
-          this.GaActions.CLICKED,
-          value,
-          true
-        );
-      }
-    },
   },
   computed: {
     storeActions() {