CSR-762 Edit how most button-question wrappers emit

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

@@ -122,7 +122,7 @@ export default {
         },
         handleClick(e) {
             this.handleSelectionChange(e);
-            this.$emit("change", this.valueToEmit);
+            this.$emit("buttonClicked", this.valueToEmit);
         },
         pushClickEventToGA() {
             this.pushEventToGA(
@@ -136,7 +136,7 @@ export default {
     },
     computed: {
         isChecked() {
-            if (this.isMultiSelect || this.modelValue instanceof Array) {
+            if (this.isMultiSelect && this.modelValue instanceof Array) {
                 return this.modelValue.includes(this.value);
             }
 
@@ -151,9 +151,6 @@ export default {
                 "-"
             )}`;
         },
-        // baseInputButtonProps() {
-
-        // }
     },
     setup(props) {
         const inputType = props.isMultiSelect ? "checkbox" : "radio";

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

@@ -51,7 +51,7 @@
                             :validationRules="validationRules"
                             :textPosition="textPosition"
                             :selectOnKeypress="selectOnKeypress"
-                            @change="handleAnswerChange" />
+                            @buttonClicked="handleAnswerChange" />
                         <!-- For nested questions -->
                         <transition name="fade" mode="out-in">
                             <div
@@ -222,7 +222,7 @@ export default {
         },
         handleAnswerChange(primaryAnswerValue) {
             this.primaryValue = primaryAnswerValue;
-            this.$emit("change", primaryAnswerValue);
+            this.$emit("buttonQuestionChange", primaryAnswerValue);
             this.$emit("update:modelValue", primaryAnswerValue);
         },
     },

src/helpers/heritage-integration/order-helper.js

@@ -18,6 +18,7 @@ export async function loadOrderIfPresent() {
         return null;
     }
 
+    // TODO KO isOrderDifferent and isOrderSubmitted
     // Reset state if cookie says to.
     if (funnelCookie.ShouldResetState) {
         baseMixin.methods.dispatchStoreAction(storeActions.RESET_STATE);
@@ -25,7 +26,6 @@ export async function loadOrderIfPresent() {
         return null;
     }
 
-
     // Load referral if there is a cookie, and it doesn't indicate it needs a state reset.
     return (await loadOrder(funnelCookie.ReferralNumber, funnelCookie.ReferralDate, funnelCookie.ReferralCorrelationId, funnelCookie.ReferralParentAccountNumber)).data;
 }

src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue

@@ -6,40 +6,39 @@
             buttonType="listButtonHorizontal"
             v-model="selectedValues"
             isCashOrInsurance
-            isRequired />
+            isRequired
+            />
     </div>
 </template>
 
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
 
-export default {
+export default ({
     name: "cashOrInsuranceQuestion",
-    props: {
+    props: {               
         modelValue: String,
         groupName: String,
         cmsWidgetName: String,
     },
     computed: {
-        answersFromCms() {
+        answersFromCms(){
-            return this.getCmsContent(this.cmsWidgetName, "Answers");
+            return this.getCmsContent(this.cmsWidgetName, 'Answers');
         },
         selectedValues: {
-            get: function () {
+            get: function() {
                 // Convert to CMS answer name from bool
-                var cmsAnswerValue = this.modelValue
+                var cmsAnswerValue = this.modelValue ? "InsuranceAnswer" : "CashAnswer";
-                    ? "InsuranceAnswer"
-                    : "CashAnswer";
                 return cmsAnswerValue;
             },
-            set: function (newValue) {
+            set: function(newValue) {
                 // Convert back to bool for parent component
                 this.$emit("update:modelValue", newValue === "InsuranceAnswer");
-            },
+            }
         },
     },
     components: {
         buttonQuestion,
     },
-};
+})
-</script>
+</script>

src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue

@@ -6,8 +6,7 @@
             :answers="answersToDisplay"
             :groupName="groupName"
             buttonType="listCard"
-            isRequired
+            v-model="selectedDamageLocations"
-            v-model="selectedValue"
             validationRules="damage-location-required"
         />
     </div>
@@ -19,22 +18,20 @@ import store from "@/store";
 import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
-import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin"
 
 // DEFINE VALIDATION RULES
 defineRule("damage-location-required", required(errorMessages.DAMAGE_LOCATION_REQUIRED));
 
 export default ({
     name: "damageLocationQuestion",
-    mixins: [buttonQuestionWrapperMixin],
     data(){
         return {
             damageOptions: {},
-            // selectedValue: []
+            selectedDamageLocations: this.modelValue
         }
     },
-    props: {               
+    props: {  
-        modelValue: Array,
+        modelValue: [Array, String, Number],             
         groupName: String,
         cmsWidgetName: String,
     },
@@ -72,13 +69,13 @@ export default ({
             });
         },
     },
+    watch: {
+        selectedDamageLocations(selectedDamageLocations) {
+            this.$emit("update:modelValue", selectedDamageLocations);
+        }
+    },
     components: {
         buttonQuestion,
     },
-    watch: {
-        selectedValue(selectedValue) {
-            this.$emit("update:modelValue", selectedValue)
-        }
-    }
 })
 </script>

src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue

@@ -8,7 +8,7 @@
                 :answers="answersToDisplay"
                 :groupName="groupName"
                 buttonType="listCard"
-                v-model="selectedValue"
+                v-model="selectedReplaceOptions"
                 :validationRules="validationRules"
                 :suppressError="suppressError"
                 :isRequired="isRequired"
@@ -20,21 +20,22 @@
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
 import store from "@/store";
-import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin";
+// import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin";
 
 export default ({
     name: "replaceOptionsQuestion",
-    mixins: [buttonQuestionWrapperMixin],
+    // mixins: [buttonQuestionWrapperMixin],
     data() {
         return {
             replaceOptions: [],
+            selectedReplaceOptions: this.modelValue
         }
     },
     props: {
+        modelValue: [Array, String, Number],
         isAvailable: Boolean,
         filterByVehicleCategory: Boolean,
         groupName: String,
-        // modelValue: Array,
         isMultiSelect: Boolean,
         validationRules: String,
         suppressError: Boolean,
@@ -50,7 +51,7 @@ export default ({
             // ex: BackGlass stationary
             if (Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
                 const selectedAnswer = this.answersToDisplay[0].Name;
-                this.selectedValue = this.isMultiSelect ? [selectedAnswer] : selectedAnswer;
+                this.selectedReplaceOptions = this.isMultiSelect ? [selectedAnswer] : selectedAnswer;
             }
         },
     },
@@ -87,8 +88,11 @@ export default ({
         },
         shouldDisplayReplaceOptionsQuestion(shouldDisplayReplaceOptionsQuestion) {
             if (!shouldDisplayReplaceOptionsQuestion) {
-                this.selectedValue = [];
+                this.selectedReplaceOptions = [];
             }
+        },
+        selectedReplaceOptions(selectedReplaceOptions) {
+            this.$emit("update:modelValue", selectedReplaceOptions);
         }
     },
     components: {

src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue

@@ -7,7 +7,7 @@
                 :groupName="groupName"
                 buttonType="listButtonHorizontal"
                 useTextForValue
-                v-model="selectedValue"
+                v-model="numberOfChips"
                 :validationRules="validationRules"
                 isRequired
             />
@@ -17,12 +17,18 @@
 
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
-import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin";
+// import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin";
 
 export default ({
-    name: "windshieldOptions",   
+    name: "windshieldChipCountQuestion",   
-    mixins: [buttonQuestionWrapperMixin],
+    // mixins: [buttonQuestionWrapperMixin],
+    data() {
+        return {
+            numberOfChips: this.modelValue
+        }
+    },
     props: {
+        modelValue: [String, Number],
         groupName: String,
         isAvailable: Boolean,
         validationRules: String,
@@ -38,6 +44,11 @@ export default ({
     },
     components: {
         buttonQuestion,
+    },
+    watch: {
+        numberOfChips(numberOfChips) {
+            this.$emit("update:modelValue", numberOfChips);
+        }
     }
 })
 </script>

src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue

@@ -1,28 +1,36 @@
 <template>
     <transition name="fade" mode="out-in">
-        <div class="windshield-damage-type-question" v-if="isAvailable" aria-live="polite">
+        <div
+            class="windshield-damage-type-question"
+            v-if="isAvailable"
+            aria-live="polite">
             <buttonQuestion
                 :questionText="questionText"
                 :answers="answersFromCms"
                 :groupName="groupName"
                 buttonType="listCard"
-                v-model="selectedValue"
+                v-model="selectedWindshieldDamageType"
                 :suppressError="suppressError"
                 :validationRules="validationRules"
-                isRequired
+                isRequired />
-            />
         </div>
     </transition>
 </template>
 
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
-import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin";
+// import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin";
 
-export default ({
+export default {
     name: "windshieldDamageTypeQuestion",
-    mixins: [buttonQuestionWrapperMixin],
+    // mixins: [buttonQuestionWrapperMixin],
+    data() {
+        return {
+            selectedWindshieldDamageType: this.modelValue,
+        };
+    },
     props: {
+        modelValue: String,
         groupName: String,
         isAvailable: Boolean,
         suppressError: Boolean,
@@ -30,15 +38,20 @@ export default ({
         cmsWidgetName: String,
     },
     computed: {
-        questionText(){
+        questionText() {
-            return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
         },
-        answersFromCms(){
+        answersFromCms() {
-            return this.getCmsContent(this.cmsWidgetName, 'Answers');
+            return this.getCmsContent(this.cmsWidgetName, "Answers");
+        },
+    },
+    watch: {
+        selectedWindshieldDamageType(selectedWindshieldDamageType) {
+            this.$emit("update:modelValue", selectedWindshieldDamageType);
         },
     },
     components: {
         buttonQuestion,
     },
-})
+};
-</script>
+</script>

src/layouts/vehicle-make/make-question/make-question.vue

@@ -1,16 +1,15 @@
 <template>
-  <buttonQuestion
+    <buttonQuestion
-    class="radioQuestion" 
+        class="radioQuestion"
-    isOverflowScrollable
+        isOverflowScrollable
-    selectingInitiatesLoad
+        selectingInitiatesLoad
-    :questionText="questionText"
+        :questionText="questionText"
-    :answers="makes"
+        :answers="makes"
-    groupName="ChooseVehicleMake"
+        groupName="ChooseVehicleMake"
-    textPosition="text-start"
+        textPosition="text-start"
-    v-model="selectedValue"
+        v-model="selectedMake"
-    :selectOnKeypress="false"
+        :selectOnKeypress="false"
-    isRequired
+        isRequired />
-  />
 </template>
 
 <script>
@@ -19,37 +18,44 @@ import buttonQuestion from "@/common-components/button-question/button-question"
 import store from "@/store";
 import { storeActions } from "@/constants/store-actions.js";
 import baseMixin from "@/mixins/base-mixin.js";
-import buttonQuestionWrapperMixin from "../../../mixins/button-question-wrapper-mixin";
+// import buttonQuestionWrapperMixin from "../../../mixins/button-question-wrapper-mixin";
 
 export default {
-  name: "make-question",
+    name: "make-question",
-  mixins: [buttonQuestionWrapperMixin],
+    // mixins: [buttonQuestionWrapperMixin],
-  data() {
+    data() {
-    return {
+        return {
-      makes: [],
+            makes: [],
-    };
+            selectedMake: ""
-  },
+        };
-  props: {
-    cmsWidgetName: String,
-  },
-  computed: {
-    questionText(){
-      return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
     },
-  },
+    props: {
-  components: {
+        modelValue: String,
-    buttonQuestion,
+        cmsWidgetName: String,
-  },
-  methods: {
-    loadInitialData() {
-      return baseMixin.methods.dispatchStoreAction(
-        storeActions.GET_VEHICLE_MAKES,
-        { year: store.getters.vehicle.year }
-      );
     },
-    initializeComponent(initialData) {
+    computed: {
-      this.makes = initialData;
+        questionText() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+    },
+    components: {
+        buttonQuestion,
+    },
+    methods: {
+        loadInitialData() {
+            return baseMixin.methods.dispatchStoreAction(
+                storeActions.GET_VEHICLE_MAKES,
+                { year: store.getters.vehicle.year }
+            );
+        },
+        initializeComponent(initialData) {
+            this.makes = initialData;
+        },
+    },
+    watch: {
+        selectedMake(selectedMake) {
+            this.$emit("update:modelValue", selectedMake);
+        },
     },
-  },
 };
 </script>

src/layouts/vehicle-model/model-question/model-question.vue

@@ -7,7 +7,7 @@
     :answers="models"
     groupName="ChooseVehicleModel"
     textPosition="text-start"
-    v-model="selectedValue"
+    v-model="selectedModel"
     :selectOnKeypress="false"
     isRequired
   />
@@ -27,9 +27,11 @@ export default {
   data() {
     return {
       models: [],
+      selectedModel: ""
     };
   },
   props: {
+    modelValue: String,
     cmsWidgetName: String,
   },
   computed: {
@@ -51,5 +53,10 @@ export default {
       this.models = initialData;
     },
   },
+  watch: {
+    selectedModel(selectedModel) {
+      this.$emit("update:modelValue", selectedModel);
+    }
+  }
 };
 </script>

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -64,10 +64,7 @@ import { settleAllPromises } from "@/helpers/layout-helper";
 import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
 import { Form } from "vee-validate";
 import store from "@/store";
-import { storeMutations } from "@/constants/store-mutations.js";
 import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
-import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
-import { assertParenthesizedExpression } from "@babel/types";
 
 export default {
     name: "vehicle-parts",

src/layouts/vehicle-style/style-question/style-question.vue

@@ -7,7 +7,7 @@
     :answers="styles"
     groupName="ChooseVehicleStyle"
     textPosition="text-start"
-    v-model="selectedValue"
+    v-model="selectedStyle"
     :selectOnKeypress="false"
     isRequired
   />
@@ -19,14 +19,15 @@ import buttonQuestion from "@/common-components/button-question/button-question"
 import store from "@/store";
 import { storeActions } from "@/constants/store-actions.js";
 import baseMixin from "@/mixins/base-mixin.js";
-import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin";
+// import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin";
 
 export default {
   name: "style-question",
-  mixins: [buttonQuestionWrapperMixin],
+  // mixins: [buttonQuestionWrapperMixin],
   data() {
     return {
       styles: [],
+      selectedStyle: ""
     };
   },
   props: {
@@ -55,5 +56,10 @@ export default {
       this.styles = initialData;
     },
   },
+  watch: {
+    selectedStyle(selectedStyle) {
+      this.$emit("update:modelValue", selectedStyle);
+    }
+  }
 };
 </script>

src/layouts/vehicle-year/year-question/year-question.vue

@@ -8,7 +8,7 @@
       :answers="years"
       groupName="ChooseVehicleYear"
       textPosition="text-start"
-      v-model="selectedValue"
+      v-model="selectedYear"
       :selectOnKeypress="false"
       isRequired
     />
@@ -20,14 +20,15 @@ import buttonQuestion from "@/common-components/button-question/button-question"
 // Supporting files
 import { storeActions } from "@/constants/store-actions.js";
 import baseMixin from "@/mixins/base-mixin.js";
-import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin";
+// import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin";
 
 export default {
   name: "year-question",
-  mixins: [buttonQuestionWrapperMixin],
+  // mixins: [buttonQuestionWrapperMixin],
   data() {
     return {
       years: [],
+      selectedYear: ""
     };
   },
   props: {
@@ -52,5 +53,10 @@ export default {
       this.years = initialData;
     },
   },
+  watch: {
+    selectedYear(selectedYear) {
+      this.$emit("update:modelValue", selectedYear);
+    }
+  }
 };
 </script>

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

@@ -1,20 +1,35 @@
+import { ref, isRef } from "vue";
+
 export default {
-  props: {
+    props: {
-    modelValue: [String, Number]
+        modelValue: [Array, String, Number],
-  },
+        // modelValueName: {
-  data() {
+        //     type: String,
-    return {
+        //     required: true,
-      selectedValue: null,
+        // },
-    };
+    },
-  },
+    data() {
-  mounted() {
+        return {
-    console.log("MOUNTED: ", this.modelValue)
+            selectedValue: null,
-    this.selectedValue = this.modelValue;
+        };
-  },
+    },
-  watch: {
+    created() {
-    selectedValue(selectedValue) {
+        this.selectedValue = this.modelValue;
-      console.log("selectedValue: ", selectedValue)
+
-      this.$emit("update:modelValue", selectedValue);
+        console.log("Created: ", {
+          selectedValue: this.selectedValue,
+          // modelValue: this.modelValue,
+          // modelValueName: this.modelValueName
+        })
+        if (this.modelValueName) {
+          this[this.modelValueName] = this.selectedValue;
+          // this.$on("update:modelValue", (dynamicModelValue) => {
+          //   console.log("ON HIT", {
+          //     dynamicModelValue: dynamicModelValue
+          //   })
+          //   this.selectedValue = dynamicModelValue;
+          //   this.$emit("update:modelValue", dynamicModelValue)
+          // })
+        }
     },
-  },
 };

src/mixins/vehicle-questions-mixin.js

@@ -74,6 +74,9 @@ export default {
             const hasChildPartQuestions = this.hasChildPartQuestions(partsOrQuestions);
             const hasCapabilityQuestions = this.hasCapabilityQuestions(partsOrQuestions);
 
+            console.log({
+                hasGlassLocationWithMultipleParts: hasGlassLocationWithMultipleParts
+            })
             if (hasPartQuestions && this.currentPageComesBeforePage(currentPage, fmgPageValues.PART_QUESTIONS)) {
                 self.$router.navigateWithSaving(self.navigationScenarios.HAS_PART_QUESTIONS, self.$route, {}, {}, { partsOrQuestions: partsOrQuestions });
             }

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -5,7 +5,7 @@
             'list-group list-button-horizontal d-flex flex-column w-100',
             { 'radio-fancy': isCashOrInsurance },
         ]"
-        @change="handleAnswerChange">
+        @buttonClicked="handleAnswerChange">
         <div
             class="list-button-horizontal-content d-flex flex-column justify-content-center p-3">
             <span class="m-0" :class="textPosition">

src/ux-components/list-button/list-button.vue

@@ -2,7 +2,7 @@
     <baseInputButton
         v-bind="$props"
         buttonWrapperClasses="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
-        @change="handleAnswerChange">
+        @buttonClicked="handleAnswerChange">
         <div
             tabindex="-1"
             :aria-label="buttonLabel"
@@ -66,6 +66,9 @@ export default {
 
 <style lang="scss" scoped>
 .list-group {
+    .loader {
+        position: absolute;
+    }
     &.list-button {
         outline: none;
         input[type="radio"],

src/ux-components/list-card/list-card.vue

@@ -5,7 +5,7 @@
             'list-card w-100 rounded-3 d-flex align-items-center h-100',
             { horizontal: isWide },
         ]"
-        @change="handleAnswerChange">
+        @buttonClicked="handleAnswerChange">
         <div
             class="d-flex w-100 align-items-center px-2 h-100 list-card-content"
             :class="getLabelClasses">

src/ux-components/loader/loader.vue

@@ -27,7 +27,6 @@ export default {
 <style lang="scss">
 .loader {
   display: flex;
-  position: absolute;
   
   //Open an overlay to prevent page interaction
   &:before {

src/ux-components/radio/radio.vue

@@ -3,7 +3,7 @@
         v-bind="$props"
         buttonWrapperClasses="ui-radio form-check"
         inputClasses="form-check-input"
-        @change="handleAnswerChange">
+        @buttonClicked="handleAnswerChange">
         <div class="d-flex align-items-start form-check-label" :for="buttonID">
             <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
             <span v-if="screenReaderOnlyText" class="sr-only">{{