CSR-762 Push correct value on vehicle-parts nested question

src/common-components/base-input-button/base-input-button.vue

@@ -26,6 +26,7 @@
 import { useField } from "vee-validate";
 import { toRef } from "vue";
 import { queryStrings } from "@/constants/query-strings";
+import inputButtonWrapperMixin from "../../mixins/input-button-wrapper-mixin";
 
 export default {
     name: "base-input-button",
@@ -35,6 +36,7 @@ export default {
         event: "change",
     },
     props: {
+        // ...inputButtonWrapperMixin.props
         value: {
             type: [String, Number],
             required: true,
@@ -62,6 +64,7 @@ export default {
         isRequired: Boolean,
         lastValuePushedToGa: [String, Number],
         setLastValuePushedToGa: Function,
+        shouldPushClickEventToGAOnMount: Boolean,
     },
     data() {
         return {
@@ -69,12 +72,23 @@ export default {
         };
     },
     mounted() {
+        console.log("mounted: ", {
+            isChecked: this.isChecked
+        })
         if (this.isChecked) {
-            this.handleChange(this.modelValue);
+            // if (this.shouldPushClickEventToGAOnMount) {
+            //     this.handleEventAction(this.eventTypes.MOUNT)
+            // } else {
+                this.handleChange(this.modelValue);
+            // }
         }
     },
     methods: {
         handleEventAction(eventType, e) {
+            console.log("handleEventAction: ", {
+                eventType,
+                value: this.value,
+            });
             if (this.isMultiSelect) {
                 switch (eventType) {
                     case this.eventTypes.ENTER:
@@ -90,6 +104,7 @@ export default {
                     case this.eventTypes.CLICK:
                     case this.eventTypes.ENTER:
                     case this.eventTypes.SPACE:
+                    case this.eventTypes.MOUNT:
                         this.handleClick(e);
                         this.handlePushClickEventToGACheck(
                             this.eventTypes.CLICK
@@ -189,6 +204,7 @@ export default {
                 ENTER: "enter",
                 SPACE: "space",
                 CLICK: "click",
+                MOUNT: "mount"
             };
         },
     },

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

@@ -53,6 +53,7 @@
                             :selectOnKeypress="selectOnKeypress"
                             :lastValuePushedToGa="lastValuePushedToGa"
                             :setLastValuePushedToGa="setLastValuePushedToGa"
+                            :shouldPushClickEventToGAOnMount="shouldPushClickEventToGAOnMount"
                             @inputButtonClicked="handleAnswerChange" />
                         <!-- For nested questions -->
                         <transition name="fade" mode="out-in">
@@ -121,6 +122,7 @@ export default {
             type: Boolean,
             default: true,
         },
+        shouldPushClickEventToGAOnMount: Boolean
     },
     data() {
         return {

src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue

@@ -28,6 +28,7 @@
                                 isRequired
                                 :groupName="`${glassLocation}-${glassName}-${selectedTint}`"
                                 :validationRules="partValidationRules"
+                                :shouldPushClickEventToGAOnMount="shouldPushClickEventToGAOnMount"
                             />
                         </div>
                     </div>
@@ -56,6 +57,7 @@ export default {
             glassColorQuestion: "",
             glassFeatureQuestion: "",
             selectedTint: "",
+            shouldPushClickEventToGAOnMount: true
         };
     },
     props: {
@@ -110,7 +112,7 @@ export default {
 
         selectedPartNumber: {
             get() {
-                return this.modelValue?.partNumber;
+                return this.modelValue ? this.modelValue[this.glassLocation][0] : undefined;
             },
             set(newValue) {
                 this.$emit("update:modelValue", this.partsForSelectedTint.filter(part => part.partNumber == newValue)[0]);
@@ -198,9 +200,16 @@ export default {
         // Loads the preselected values from the store.
         LoadPreselectedValues() {
             this.$nextTick(() => {
+                console.log("LoadPreselectedValues: ", {
+                    modelValue: this.modelValue,
+                    alreadyPopulatedPartsData: this.alreadyPopulatedPartsData,
+                    selectedPartNumber: this.selectedPartNumber
+                })
                 if (this.modelValue !== undefined) {
                     // Populate button-question model-value if parts data already exists in VueX
+                    this.shouldPushClickEventToGAOnMount = false;
                     this.selectedTint = this.alreadyPopulatedPartsData.filter(part => part.partNumber === this.selectedPartNumber)[0]?.color;
+                    console.log({color: this.selectedTint})
                 }
             });
         },

src/mixins/input-button-wrapper-mixin.js

@@ -21,7 +21,8 @@ export default {
             default: true,
         },
         lastValuePushedToGa: [String, Number],
-        setLastValuePushedToGa: Function
+        setLastValuePushedToGa: Function,
+        shouldPushClickEventToGAOnMount: Boolean
     },
     methods: {
         handleAnswerChange(e) {