CSR-762 Update YMMS

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

@@ -50,6 +50,7 @@
               :groupName="groupName"
               :value="answer.value"
               :modelValue="modelValue"
+              selectingInitiatesLoad
               @change="(e) => handleAnswerChange(e)"
             />
             

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

@@ -7,7 +7,7 @@
     :answers="makes"
     groupName="ChooseVehicleMake"
     textPosition="text-start"
-    v-model="selectedValue"
+    v-model="selectedMake"
     isRequired
   />
 </template>
@@ -23,7 +23,8 @@ export default {
   name: "make-question",
   data() {
     return {
-      makes: Array,
+      makes: [],
+      selectedMake: null
     };
   },
   props: {
@@ -34,14 +35,6 @@ export default {
     questionText(){
       return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
     },
-    selectedValue: {
-      get: function() {
-        return this.modelValue
-      },
-      set: function(newValue) {
-        this.$emit("update:modelValue", newValue);
-      }
-    }
   },
   components: {
     buttonQuestion,
@@ -57,5 +50,10 @@ export default {
       this.makes = initialData;
     },
   },
+  watch: {
+    selectedMake(selectedMake) {
+      this.$emit("update:modelValue", selectedMake)
+    }
+  }
 };
 </script>

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

@@ -3,14 +3,21 @@
     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
-        <vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
+        <vehicleBanner
+          cmsWidgetName="VehicleBannerWidget"
+          displayGenericVehicleImage
+        />
         <funnelSubHeader
-            cmsWidgetName="FunnelSubHeaderWidget"
-            :hasBackButton="true"
-            @click-event="backButtonAction"
+          cmsWidgetName="FunnelSubHeaderWidget"
+          :hasBackButton="true"
+          @click-event="backButtonAction"
         />
         <div class="fade-on-route-transition">
-          <makeQuestion v-model="selectedMake" ref="makeQuestion" cmsWidgetName="VehicleMakeQuestion" />
+          <makeQuestion
+            v-model="selectedMake"
+            ref="makeQuestion"
+            cmsWidgetName="VehicleMakeQuestion"
+          />
         </div>
       </div>
     </div>
@@ -26,7 +33,6 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
-import { storeMutations } from "@/constants/store-mutations";
 import { storeActions } from "@/constants/store-actions";
 import store from "@/store";
 
@@ -75,7 +81,7 @@ export default {
       );
     },
     arePagePrerequisitesValid() {
-      if (store.getters.vehicle.year){
+      if (store.getters.vehicle.year) {
         return true;
       }
       return false;
@@ -84,7 +90,7 @@ export default {
 
   watch: {
     selectedMake(make) {
-      this.dispatchStoreAction(storeActions.SAVE_VEHICLE_MAKE, make, false); 
+      this.dispatchStoreAction(storeActions.SAVE_VEHICLE_MAKE, make, false);
       this.$router.navigateWithSaving(
         this.navigationScenarios.SELECTED_MAKE,
         this.$route

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"
     isRequired
   />
 </template>
@@ -23,7 +23,8 @@ export default {
   name: "model-question",
   data() {
     return {
-      models: Array,
+      models: [],
+      selectedModel: null
     };
   },
   props: {
@@ -34,14 +35,6 @@ export default {
     questionText(){
       return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
     },
-    selectedValue: {
-      get: function() {
-        return this.modelValue
-      },
-      set: function(newValue) {
-        this.$emit("update:modelValue", newValue);
-      }
-    }
   },
   components: {
     buttonQuestion,
@@ -57,5 +50,10 @@ export default {
       this.models = initialData;
     },
   },
+  watch: {
+    selectedModel(selectedModel) {
+      this.$emit("update:modelValue", selectedModel);
+    }
+  }
 };
 </script>

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"
     isRequired
   />
 </template>
@@ -23,7 +23,8 @@ export default {
   name: "style-question",
   data() {
     return {
-      styles: Array,
+      styles: [],
+      selectedStyle: null
     };
   },
   props: {
@@ -34,14 +35,6 @@ export default {
     questionText(){
       return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
     },
-    selectedValue: {
-      get: function() {
-        return this.modelValue
-      },
-      set: function(newValue) {
-        this.$emit("update:modelValue", newValue);
-      }
-    }
   },
   components: {
     buttonQuestion,
@@ -61,5 +54,10 @@ export default {
       this.styles = initialData;
     },
   },
+  watch: {
+    selectedStyle(selectedStyle) {
+      this.$emit("update:modelValue", selectedStyle);
+    }
+  }
 };
 </script>

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

@@ -1,18 +1,16 @@
 <template>
   <div>
-    YQ: {{ selectedValue }}
     <buttonQuestion
-    class="radioQuestion"
-    isOverflowScrollable
-    selectingInitiatesLoad
-    :questionText="questionText"
-    :answers="years"
-    groupName="ChooseVehicleYear"
-    textPosition="text-start"
-    v-model="selectedValue"
-    isRequired
-  />
-  
+      class="radioQuestion"
+      isOverflowScrollable
+      selectingInitiatesLoad
+      :questionText="questionText"
+      :answers="years"
+      groupName="ChooseVehicleYear"
+      textPosition="text-start"
+      v-model="selectedYear"
+      isRequired
+    />
   </div>
 </template>
 
@@ -26,7 +24,7 @@ export default {
   data() {
     return {
       years: [],
-      selectedValue: null
+      selectedYear: null,
     };
   },
   props: {
@@ -37,17 +35,9 @@ export default {
     buttonQuestion,
   },
   computed: {
-    questionText(){
-      return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
+    questionText() {
+      return this.getCmsContent(this.cmsWidgetName, "QuestionText");
     },
-    // selectedValue: {
-    //   get: function() {
-    //     return this.modelValue
-    //   },
-    //   set: function(newValue) {
-    //     this.$emit("update:modelValue", newValue);
-    //   }
-    // }
   },
   methods: {
     loadInitialData() {
@@ -60,5 +50,10 @@ export default {
       this.years = initialData;
     },
   },
+  watch: {
+    selectedYear(selectedYear) {
+      this.$emit("update:modelValue", selectedYear)
+    }
+  }
 };
 </script>

src/mixins/button-mixin.js

@@ -33,10 +33,7 @@ export default {
       type: String,
       required: true,
     },
-    validationRules: {
-      type: String,
-      required: true,
-    },
+    validationRules: String,
     classes: [String, Array, Object],
   },
   methods: {

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

@@ -85,7 +85,10 @@ export default {
     screenReaderOnlyText: String,
     selectingInitiatesLoad: Boolean,
     loaderColor: String,
-    loaderPosition: String,
+    loaderPosition: {
+      type: String,
+      default: "right"
+    },
     hasError: Boolean,
     valueToLogType: String,
   },

src/ux-components/loader/loader.vue

@@ -27,6 +27,8 @@ export default {
 <style lang="scss">
 .loader {
   display: flex;
+  position: absolute;
+  
   //Open an overlay to prevent page interaction
   &:before {
     content: "";
@@ -56,16 +58,13 @@ export default {
   }
   //Spinner position
   &.center {
-    position: absolute;
     right: 50%;
     transform: translateX(50%);
   }
   &.right {
-    position: absolute;
     right: 1rem;
   }
   &.left {
-    position: absolute;
     left: 1rem;
   }
   //Spinner color