From e546bad283757216b7d50cafaf8efa19f76b7040 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Mon, 3 Oct 2022 13:18:08 -0400
Subject: [PATCH] CSR-762 GA WIP

---
 src/App.vue                                   |  16 +-
 .../base-input-button/base-input-button.vue   | 198 +++++++++---------
 .../button-question/button-question.vue       |  29 ++-
 src/constants/store-actions.js                |  10 +-
 src/constants/store-mutations.js              |  10 +-
 src/main.js                                   |   2 -
 src/mixins/analytics-mixin.js                 |   2 +
 src/mixins/base-mixin.js                      |  15 +-
 src/store/gaState.js                          |  72 -------
 src/store/index.js                            |  12 +-
 src/ux-components/button-main/button-main.vue |   2 -
 11 files changed, 152 insertions(+), 216 deletions(-)
 delete mode 100644 src/store/gaState.js

diff --git a/src/App.vue b/src/App.vue
index 71b56feaf..501c46fd9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,11 +2,25 @@
   <router-view v-slot="{ Component }">
     <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" />
+      <component :is="Component" @input-focus="handleFocus" @input-blur="handleBlur"/>
     </transition>
   </router-view>
 </template>
 
+<script>
+  export default {
+    name: "app",
+    methods: {
+      handleFocus(e) {
+        console.log("app focus: ", e)
+      },
+      handleBlur(e) {
+        console.log("app blur: ", e)
+      }
+    }
+  }
+</script>
+
 <style lang="scss">
   @import "./node_modules/bootstrap/scss/bootstrap";
   @import "@/styles/common-styles.scss";
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 46ad82b6d..d6c63b06c 100644
--- a/src/common-components/base-input-button/base-input-button.vue
+++ b/src/common-components/base-input-button/base-input-button.vue
@@ -2,8 +2,7 @@
     <label
         :class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
         :for="buttonId"
-        @mousedown.left="handleEventAction('click', $event)"
-        @keyup="handleKeyboardNavigation">
+        @mousedown.left="handleEventAction('click', $event)">
         <input
             :type="inputType"
             :id="buttonId"
@@ -13,7 +12,6 @@
             :aria-required="isRequired"
             :value="value"
             :checked="isChecked"
-            @blur="handleBlur"
             @keypress.enter="handleEventAction('keypressSubmit', $event)"
             @change="handleEventAction('change', $event)" />
 
@@ -22,10 +20,10 @@
 </template>
 
 <script>
-import { queryStrings } from "@/constants/query-strings";
+// import { queryStrings } from "@/constants/query-strings";
 import { useField } from "vee-validate";
 import { toRef } from "vue";
-import { gaStoreActions } from "../../constants/store-actions";
+// import { gaStoreActions } from "../../constants/store-actions";
 
 export default {
     name: "base-input-button",
@@ -84,13 +82,13 @@ export default {
                     case eventTypes.KEYPRESS_SUBMIT:
                     case eventTypes.CHANGE:
                         this.handleClick(e);
-                        this.dispatchStoreAction(
-                            gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
-                            this.groupName,
-                            false
-                        );
+                        // this.dispatchStoreAction(
+                        //     gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
+                        //     this.groupName,
+                        //     false
+                        // );
                         
-                        this.pushClickEventToGA();
+                        // this.pushClickEventToGA();
                         break;
                 }
             } else {
@@ -98,7 +96,7 @@ export default {
                     case eventTypes.CLICK:
                     case eventTypes.KEYPRESS_SUBMIT:
                         this.handleClick(e);
-                        this.pushClickEventToGAIfReady();
+                        // this.pushClickEventToGAIfReady();
                         break;
                     case eventTypes.CHANGE:
                         this.selectOnKeypress
@@ -125,13 +123,13 @@ export default {
                 this.valueToEmit = this.value;
             }
 
-            this.dispatchStoreAction(
-                gaStoreActions.UPDATE_CURRENTLY_SELECTED_VALUES,
-                {
-                    groupName: this.groupName,
-                    value: this.value,
-                },
-            );
+            // this.dispatchStoreAction(
+            //     gaStoreActions.UPDATE_CURRENTLY_SELECTED_VALUES,
+            //     {
+            //         groupName: this.groupName,
+            //         value: this.value,
+            //     },
+            // );
 
             this.handleChange(this.valueToEmit);
         },
@@ -139,90 +137,90 @@ export default {
             this.handleSelectionChange(e);
             this.$emit("buttonClicked", 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,
-                },
-            );
+        // pushClickEventToGA(value) {
+        //     const lastFocusedInputGroup =
+        //         this.$store.getters.gaClickInformation.lastFocusedInputGroup;
+        //     // this.dispatchStoreAction(
+        //     //     gaStoreActions.UPDATE_FIRED_GA_CLICK_EVENT_VALUES,
+        //     //     {
+        //     //         groupName: lastFocusedInputGroup,
+        //     //         value: value ?? this.value,
+        //     //     },
+        //     // );
 
-            this.pushEventToGA(
-                this.$route.query[queryStrings.FMG_PAGE],
-                this.GaActions.CLICKED,
-                value?.toString() ?? this.value?.toString(),
-                true,
-                this.valueToLogType
-            );
-        },
-        handleBlur() {
-            this.dispatchStoreAction(
-                gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
-                this.groupName,
-                false
-            );
-            this.dispatchStoreAction(
-                gaStoreActions.UPDATE_WAS_LAST_FOCUSED_INPUT_MULTISELECT,
-                this.isMultiSelect,
-                false
-            );
-        },
-        handleKeyboardNavigation(key) {
-            this.pushClickEventToGAIfReady(key);
-        },
-        pushClickEventToGAIfReady(event) {
-            const gaClickInformation = this.$store.getters.gaClickInformation;
-            const firedGaClickEventValues =
-                gaClickInformation.firedGaClickEventValues;
-            const currentlySelectedValues =
-                gaClickInformation.currentlySelectedValues;
-            const lastFocusedInputGroup =
-                gaClickInformation.lastFocusedInputGroup;
-            const wasLastFocusedInputMultiselect =
-                gaClickInformation.wasLastFocusedInputMultiselect;
+        //     // this.pushEventToGA(
+        //     //     this.$route.query[queryStrings.FMG_PAGE],
+        //     //     this.GaActions.CLICKED,
+        //     //     value?.toString() ?? this.value?.toString(),
+        //     //     true,
+        //     //     this.valueToLogType
+        //     // );
+        // },
+        // handleBlur() {
+        //     // this.dispatchStoreAction(
+        //     //     gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
+        //     //     this.groupName,
+        //     //     false
+        //     // );
+        //     // this.dispatchStoreAction(
+        //     //     gaStoreActions.UPDATE_WAS_LAST_FOCUSED_INPUT_MULTISELECT,
+        //     //     this.isMultiSelect,
+        //     //     false
+        //     // );
+        // },
+        // handleKeyboardNavigation(key) {
+        //     this.pushClickEventToGAIfReady(key);
+        // },
+        // pushClickEventToGAIfReady(event) {
+        //     const gaClickInformation = this.$store.getters.gaClickInformation;
+        //     const firedGaClickEventValues =
+        //         gaClickInformation.firedGaClickEventValues;
+        //     const currentlySelectedValues =
+        //         gaClickInformation.currentlySelectedValues;
+        //     const lastFocusedInputGroup =
+        //         gaClickInformation.lastFocusedInputGroup;
+        //     const wasLastFocusedInputMultiselect =
+        //         gaClickInformation.wasLastFocusedInputMultiselect;
 
-            const keyCode = event?.code;
-            // Keyboard navigation
-            if (keyCode) {
-                if (
-                    !wasLastFocusedInputMultiselect &&
-                    currentlySelectedValues[lastFocusedInputGroup] &&
-                    firedGaClickEventValues[lastFocusedInputGroup] !=
-                        currentlySelectedValues[lastFocusedInputGroup]
-                ) {
-                    if (keyCode === "Tab") {
-                        this.pushClickEventToGA(
-                            currentlySelectedValues[lastFocusedInputGroup]
-                        );
-                    } else if (keyCode?.includes("Arrow")) {
-                        if (lastFocusedInputGroup != this.groupName) {
-                            this.pushClickEventToGA(
-                                currentlySelectedValues[lastFocusedInputGroup]
-                            );
-                        }
-                    }
-                }
-            } else {
-                // Radio click
-                this.dispatchStoreAction(
-                    gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
-                    this.groupName,
-                    false
-                );
+        //     const keyCode = event?.code;
+        //     // Keyboard navigation
+        //     if (keyCode) {
+        //         if (
+        //             !wasLastFocusedInputMultiselect &&
+        //             currentlySelectedValues[lastFocusedInputGroup] &&
+        //             firedGaClickEventValues[lastFocusedInputGroup] !=
+        //                 currentlySelectedValues[lastFocusedInputGroup]
+        //         ) {
+        //             if (keyCode === "Tab") {
+        //                 this.pushClickEventToGA(
+        //                     currentlySelectedValues[lastFocusedInputGroup]
+        //                 );
+        //             } else if (keyCode?.includes("Arrow")) {
+        //                 if (lastFocusedInputGroup != this.groupName) {
+        //                     this.pushClickEventToGA(
+        //                         currentlySelectedValues[lastFocusedInputGroup]
+        //                     );
+        //                 }
+        //             }
+        //         }
+        //     } else {
+        //         // Radio click
+        //         // this.dispatchStoreAction(
+        //         //     gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
+        //         //     this.groupName,
+        //         //     false
+        //         // );
                 
-                if (
-                    firedGaClickEventValues[this.groupName] !=
-                    currentlySelectedValues[this.groupName]
-                ) {
-                    this.pushClickEventToGA(
-                        currentlySelectedValues[this.groupName]
-                    );
-                } 
-            }
-        },
+        //         if (
+        //             firedGaClickEventValues[this.groupName] !=
+        //             currentlySelectedValues[this.groupName]
+        //         ) {
+        //             this.pushClickEventToGA(
+        //                 currentlySelectedValues[this.groupName]
+        //             );
+        //         } 
+        //     }
+        // },
     },
     computed: {
         isChecked() {
diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 1346a4f0e..a13cd4663 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -18,7 +18,9 @@
                 :aria-required="isRequired"
                 :class="getFieldSetClasses"
                 :role="isMultiSelect ? 'group' : 'radiogroup'"
-                :aria-labelledby="formatString(groupName)">
+                :aria-labelledby="formatString(groupName)"
+                @focusin="handleFocus"
+                @focusout="handleBlur">
                 <legend
                     class="sr-only"
                     :data-focus-target="formatString(groupName)"
@@ -77,8 +79,9 @@
 import listButton from "@/ux-components/list-button/list-button";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 import listCard from "@/ux-components/list-card/list-card";
-import { ErrorMessage } from "vee-validate";
 import radio from "@/ux-components/radio/radio";
+import { ErrorMessage } from "vee-validate";
+import { queryStrings } from "@/constants/query-strings";
 
 export default {
     name: "buttonQuestion",
@@ -219,9 +222,31 @@ export default {
         },
         handleAnswerChange(primaryAnswerValue) {
             this.primaryValue = primaryAnswerValue;
+            console.log("hAC: ", primaryAnswerValue)
             this.$emit("buttonQuestionChange", primaryAnswerValue);
             this.$emit("update:modelValue", primaryAnswerValue);
         },
+        pushClickEventToGA(e, value) {
+            this.pushEventToGA(
+                this.$route.query[queryStrings.FMG_PAGE],
+                this.GaActions.CLICKED,
+                value?.toString() ?? this.primaryValue?.toString(),
+                true,
+                this.valueToLogType
+            );
+        },
+        handleFocus() {
+            this.$emit("inputFocus", {
+                groupName: this.groupName,
+                value: this.primaryValue
+            })
+        },
+        handleBlur() {
+            this.$emit("inputBlur", {
+                groupName: this.groupName,
+                value: this.primaryValue
+            })
+        }
     },
     components: {
         listButton,
diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js
index fd2fad8fa..1545a1d61 100644
--- a/src/constants/store-actions.js
+++ b/src/constants/store-actions.js
@@ -65,12 +65,4 @@ const storeActions = {
   SAVE_CAPABILITY_QUESTION_ANSWERS: "saveCapabilityQuestionAnswers",
 };
 
-const gaStoreActions = {
-  UPDATE_CURRENTLY_SELECTED_VALUES: "updateCurrentlySelectedValues",
-  UPDATE_FIRED_GA_CLICK_EVENT_VALUES: "updateFiredGaClickEventValues",
-  UPDATE_LAST_FOCUSED_INPUT_GROUP: "updateLastFocusedInputGroup",
-  UPDATE_WAS_LAST_FOCUSED_INPUT_MULTISELECT:
-    "updateWasLastFocusedInputMultiselect",
-};
-
-export { storeActions, gaStoreActions };
+export { storeActions };
diff --git a/src/constants/store-mutations.js b/src/constants/store-mutations.js
index e1ff971bf..70763c8d0 100644
--- a/src/constants/store-mutations.js
+++ b/src/constants/store-mutations.js
@@ -68,12 +68,4 @@ const storeMutations = {
   UPDATE_TRIGGERED_SITE_ENTRY: "updateTriggeredSiteEntry",
 };
 
-const gaStoreMutations = {
-    UPDATE_CURRENTLY_SELECTED_VALUES: "updateCurrentlySelectedValues",
-    UPDATE_FIRED_GA_CLICK_EVENT_VALUES: "updateFiredGaClickEventValues",
-    UPDATE_LAST_FOCUSED_INPUT_GROUP: "updateLastFocusedInputGroup",
-    UPDATE_WAS_LAST_FOCUSED_INPUT_MULTISELECT:
-        "updateWasLastFocusedInputMultiselect",
-};
-
-export { storeMutations, gaStoreMutations };
+export { storeMutations };
diff --git a/src/main.js b/src/main.js
index 37c623b0b..01aa5406d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,14 +8,12 @@ import baseMixin from "@/mixins/base-mixin.js";
 import analyticsMixin from "@/mixins/analytics-mixin.js";
 import experimentMixin from "@/mixins/experiment-mixin.js";
 import "../node_modules/bootstrap/dist/js/bootstrap.js";
-import gaState from "./store/gaState";
 
 // Vue App Setup
 const vueApp = createApp(App);
 
 vueApp.use(router);
 vueApp.use(store);
-vueApp.use(gaState)
 vueApp.use(LoadScript);
 vueApp.use(Maska);
 vueApp.mixin(baseMixin);
diff --git a/src/mixins/analytics-mixin.js b/src/mixins/analytics-mixin.js
index 6eb18e462..1f535762b 100644
--- a/src/mixins/analytics-mixin.js
+++ b/src/mixins/analytics-mixin.js
@@ -57,6 +57,8 @@ export default {
         'path': `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}`
       }
 
+      console.log("PUSHING: ", labelToLog)
+
       pushToDataLayerIfDefined(eventToBePushed);
 
       if (pushToLogApp) {
diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js
index feac379f1..9e99307ee 100644
--- a/src/mixins/base-mixin.js
+++ b/src/mixins/base-mixin.js
@@ -6,7 +6,6 @@ import { vehicleCategories } from "@/constants/vehicle-categories.js";
 import { routerParams } from "@/router/router-constants/router-params";
 import { queryStrings } from "@/constants/query-strings";
 import { dynamicStrings } from "@/constants/dynamic-strings";
-import { gaStoreActions } from "../constants/store-actions";
 
 export default {
   data() {
@@ -79,13 +78,13 @@ export default {
       ) {
         const value =
           currentlySelectedValues[lastFocusedInputGroup]?.toString();
-        this.dispatchStoreAction(
-          gaStoreActions.UPDATE_FIRED_GA_CLICK_EVENT_VALUES,
-          {
-            groupName: lastFocusedInputGroup,
-            value: value,
-          }
-        );
+        // this.dispatchStoreAction(
+        //   gaStoreActions.UPDATE_FIRED_GA_CLICK_EVENT_VALUES,
+        //   {
+        //     groupName: lastFocusedInputGroup,
+        //     value: value,
+        //   }
+        // );
 
         this.pushEventToGA(
           this.$route.query[queryStrings.FMG_PAGE],
diff --git a/src/store/gaState.js b/src/store/gaState.js
deleted file mode 100644
index ab8e2dff8..000000000
--- a/src/store/gaState.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import { gaStoreMutations } from "@/constants/store-mutations";
-
-// Export State
-const getDefaultState = () => {
-  return {
-    gaClickInformation: {
-      currentlySelectedValues: {},
-      firedGaClickEventValues: {},
-      lastFocusedInputGroup: "",
-      wasLastFocusedInputMultiselect: undefined,
-    },
-  };
-};
-
-export const gaState = getDefaultState();
-
-// Export Mutations
-export const gaMutations = {
-  updateCurrentlySelectedValues(state, { groupName, value }) {
-    state.gaClickInformation.currentlySelectedValues[groupName] = value;
-  },
-  updateFiredGaClickEventValues(state, { groupName, value }) {
-    state.gaClickInformation.firedGaClickEventValues[groupName] = value;
-  },
-  updateLastFocusedInputGroup(state, groupName) {
-    state.gaClickInformation.lastFocusedInputGroup = groupName;
-  },
-  updateWasLastFocusedInputMultiselect(state, wasLastFocusedInputMultiselect) {
-    state.gaClickInformation.wasLastFocusedInputMultiselect =
-      wasLastFocusedInputMultiselect;
-  },
-};
-
-// Export Getters
-export const getters = {
-  gaClickInformation: (state) => state.gaClickInformation,
-};
-
-// Export Actions
-export const gaActions = {
-  updateCurrentlySelectedValues(context, { groupName, value }) {
-    context.commit(gaStoreMutations.UPDATE_CURRENTLY_SELECTED_VALUES, {
-      groupName,
-      value,
-    });
-  },
-  updateFiredGaClickEventValues(context, { groupName, value }) {
-    context.commit(gaStoreMutations.UPDATE_FIRED_GA_CLICK_EVENT_VALUES, {
-      groupName,
-      value,
-    });
-  },
-  updateLastFocusedInputGroup(context, groupName) {
-    context.commit(gaStoreMutations.UPDATE_LAST_FOCUSED_INPUT_GROUP, groupName);
-  },
-  updateWasLastFocusedInputMultiselect(
-    context,
-    wasLastFocusedInputMultiselect
-  ) {
-    context.commit(
-      gaStoreMutations.UPDATE_WAS_LAST_FOCUSED_INPUT_MULTISELECT,
-      wasLastFocusedInputMultiselect
-    );
-  },
-};
-
-export default {
-  state: gaState,
-  mutations: gaMutations,
-  getters,
-  actions: gaActions,
-};
diff --git a/src/store/index.js b/src/store/index.js
index 80dbae835..91347de94 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -9,7 +9,6 @@ import { applicationConfig } from "@/constants/application-config";
 import { experimentTriggers } from "@/constants/experiments";
 import { damageLocationsSelected } from "@/constants/damage-locations-selected";
 import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
-import gaState from "./gaState";
 
 // Export State
 const getDefaultState = () => {
@@ -1362,16 +1361,7 @@ export const actions = {
 };
 
 export default createStore({
-  plugins: [createPersistedState({
-    reducer: state => {
-      const { gaState, ...rest } = state    // Make sure gaState isn't persisted
-      return rest
-    }
-  })],
-  modules: {
-    gaState,
-  },
-
+  plugins: [createPersistedState()],
   // IMPORTANT: Be VERY careful when modifying these fields for at least a few reasons:
   //    * The CMS can reference the fields by name
   //    * Return users may have a previous "version" of the model, and we don't want
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index 7db1dc5bf..ade0a0730 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -19,8 +19,6 @@
 
 <script>
 import loader from "@/ux-components/loader/loader";
-import { gaStoreActions } from "../../constants/store-actions";
-import { queryStrings } from "../../constants/query-strings";
 
 export default {
   name: "buttonMain",