Merge branch 'develop' into feature/digital/SSR-448

src/iss-components/vehicle-question/vehicle-question.vue

@@ -0,0 +1,48 @@
+<template>
+  <dropdownQuestion
+  :options="Options"
+  disableAutoFill
+  placeHolderText="Select an option"
+  v-model="selectedValue"
+  />
+</template>
+
+<script>
+
+import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
+
+export default {
+  name: "vehicle-question",
+  data() {
+    return {
+      values: [],
+    };
+  },
+  props: {
+    modelValue: String,
+    updateValues: Function,    
+  },
+  components: {
+  dropdownQuestion
+},
+  computed: {
+    selectedValue: {
+      get: function() {    
+        return this.modelValue?.toString();
+      },
+      set: function(newValue) {
+        this.$emit("update:modelValue",newValue?.toString());
+      }
+    },
+    Options() {      
+          return this.values;
+      },
+  },
+  methods: {  
+    async getNewValues() {
+      const results = await this.updateValues();
+      this.values = results?.data;      
+    },
+  },
+};
+</script>

src/layouts/payment-page/payment-page.vue

@@ -3,7 +3,7 @@
         <div class="page-container-grouped-styles">
             <div class="fade-on-route-transition position-relative">
                 <siteHeader cmsWidgetName="SiteHeaderWidget"/>
-                <div class="container-fluid pb-2">
+                <div class="container-fluid pb-2 payment">
                     <p>Placeholder for payment page</p>
                     <siteFooter
                     cmsWidgetName="SiteFooterWidget"
@@ -79,4 +79,8 @@ export default {
     }
 </script>
 <style lang="scss">
+.payment p{
+    margin-bottom:0.75rem;
+
+}
 </style>

src/layouts/review-page/review-page.vue

@@ -3,7 +3,7 @@
         <div class="page-container-grouped-styles">
             <div class="fade-on-route-transition position-relative">
                 <siteHeader cmsWidgetName="SiteHeaderWidget"/>
-                <div class="container-fluid pb-2">
+                <div class="container-fluid pb-2 review">
                     <p>Placeholder for review page</p>
                     <siteFooter
                     cmsWidgetName="SiteFooterWidget"
@@ -74,4 +74,7 @@ export default {
     }
 </script>
 <style lang="scss">
+.review p{
+    margin-bottom:0.75rem;
+}
 </style>

src/layouts/tpa-confirmation/tpa-confirmation.vue

@@ -3,7 +3,7 @@
         <div class="page-container-grouped-styles">
             <div class="fade-on-route-transition position-relative">
                 <siteHeader cmsWidgetName="SiteHeaderWidget"/>
-                <div class="container-fluid pb-2">
+                <div class="container-fluid pb-2 confirmation">
                     <p>Placeholder for tpa-confrimation page</p>
                     <siteFooter
                     cmsWidgetName="SiteFooterWidget"
@@ -77,4 +77,8 @@ export default {
     }
 </script>
 <style lang="scss">
+.confirmation p{
+    margin-bottom:0.75rem;
+
+}
 </style>

src/layouts/tpa-search/tpa-search.vue

@@ -3,7 +3,7 @@
         <div class="page-container-grouped-styles">
             <div class="fade-on-route-transition position-relative">
                 <siteHeader cmsWidgetName="SiteHeaderWidget"/>
-                <div class="container-fluid pb-2">
+                <div class="container-fluid pb-2 search">
                     <p>Placeholder for TPA-Search</p>
                     <siteFooter
                     cmsWidgetName="SiteFooterWidget"
@@ -68,4 +68,8 @@ export default {
             Form,
         },
     }
-</script>
+</script><style lang="scss">
+.search p{
+    margin-bottom:0.75rem;
+}
+</style>

src/layouts/tpa-submit/tpa-submit.vue

@@ -3,7 +3,7 @@
         <div class="page-container-grouped-styles">
             <div class="fade-on-route-transition position-relative">
                 <siteHeader cmsWidgetName="SiteHeaderWidget"/>
-                <div class="container-fluid pb-2">
+                <div class="container-fluid pb-2 submit">
                     <p>Placeholder for TPA-Submit</p>
                     <siteFooter
                     cmsWidgetName="SiteFooterWidget"
@@ -83,4 +83,9 @@ export default {
     }
 </script>
 <style lang="scss">
+.submit {
+
+  margin-bottom:0.75rem;  
+}
+
 </style>

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

@@ -1,76 +0,0 @@
-<template>
-    <dropdownQuestion
-    cmsWidgetName="VehicleMakeQuestion"
-    ref="makeQuestion"
-    :options="makeOptions"
-    disableAutoFill
-    placeHolderText="Select an option"
-    validationRules="make-required"
-    inputId="makeQuestionField"
-    v-model="selectedValue"
-    />
-  </template>
-  
-  <script>
-
-  import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
-
-  import { errorMessages } from "@/constants/error-messages";
-import { required } from "@/helpers/validation-rules";
-import { defineRule } from "vee-validate";
-
-defineRule("make-required", required(errorMessages.MAKE_REQUIRED));
-  
-  export default {
-    name: "make-question",
-    data() {
-      return {
-        values: [],
-      };
-    },
-    props: {
-      modelValue: String,
-      cmsWidgetName: String,
-      validationRules: String,
-      updateValues: Function,
-    },
-    components: {
-    dropdownQuestion
-},
-    computed: {
-      questionText(){
-        return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
-      },
-      selectedValue: {
-        get: function() {    
-          return this.modelValue;
-        },
-        set: function(newValue) {
-          this.$emit("update:modelValue",newValue);
-        }
-      },
-       makeOptions() {
-             const makeAnswers = this.values;
-             const makeAnswersObj ={};
-             if(makeAnswers)
-             {
-                for (let answer of Object.values(makeAnswers)) {
-                    if (answer) {
-                         makeAnswersObj[answer] = answer;
-                     }
-                 }
-             }
-             return makeAnswersObj
-         },
-    },
-    methods: {
-      async getNewValues() {
-        const results = await this.updateValues();
-        this.values = results?.data;
-      },
-      initializeComponent(initialData) {
-        this.values = initialData;
-      },
-    },
-  };
-  </script>

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

@@ -1,77 +0,0 @@
-<template>
-    <dropdownQuestion
-    cmsWidgetName="VehicleModelQuestion"
-    ref="modelQuestion"
-    :options="modelOptions"
-    disableAutoFill
-    placeHolderText="Select an option"
-    validationRules="model-required"
-    inputId="modelQuestionField"
-    v-model="selectedValue"
-    />
-  </template>
-  
-  <script>
-
-  import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
-
-  import { errorMessages } from "@/constants/error-messages";
-import { required } from "@/helpers/validation-rules";
-import { defineRule } from "vee-validate";
-
-defineRule("model-required", required(errorMessages.MODEL_REQUIRED));
-
-  
-  export default {
-    name: "model-question",
-    data() {
-      return {
-        values: Array,
-      };
-    },
-    props: {
-      modelValue: String,
-      cmsWidgetName: String,
-      validationRules: String,
-      updateValues: Function,
-    },
-    components: {
-    dropdownQuestion
-},
-    computed: {
-      questionText(){
-        return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
-      },
-      modelOptions() {
-            const modelAnswers = this.values;
-            const modelAnswersObj ={};
-            if(modelAnswers)
-            {
-                for (let answer of Object.values(modelAnswers)) {
-                    if (answer) {
-                        modelAnswersObj[answer] = answer;
-                    }
-                }
-            }
-            return modelAnswersObj
-        },
-      selectedValue: {
-        get: function() {
-          return this.modelValue
-        },
-        set: function(newValue) {
-          this.$emit("update:modelValue", newValue);
-        }
-      }
-    },
-    methods: {
-      async getNewValues() {
-        const results = await this.updateValues();
-        this.values = results?.data;
-      },
-      initializeComponent(initialData) {
-        this.values = initialData;
-      },
-    },
-  };
-  </script>

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

@@ -1,76 +0,0 @@
-<template>
-    <dropdownQuestion
-    cmsWidgetName="VehicleStyleQuestion"
-    ref="styleQuestion"
-    :options="styleOptions"
-    disableAutoFill
-    placeHolderText="Select an option"
-    validationRules="style-required"
-    inputId="styleQuestionField"
-    v-model="selectedValue"
-    />
-  </template>
-  
-  <script>
-
-  import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
-  import { errorMessages } from "@/constants/error-messages";
-import { required } from "@/helpers/validation-rules";
-import { defineRule } from "vee-validate";
-
-defineRule("style-required", required(errorMessages.STYLE_REQUIRED));
-
-  
-  export default {
-    name: "style-question",
-    data() {
-      return {
-        values: [],
-      };
-    },
-    props: {
-      modelValue: String,
-      cmsWidgetName: String,
-      validationRules: String,
-      updateValues: Function,
-    },
-    components: {
-    dropdownQuestion
-},
-    computed: {
-      questionText(){
-        return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
-      },
-      styleOptions() {
-            const styleAnswers = this.values;
-            const styleAnswersObj ={};
-            if(styleAnswers)
-            {
-                for (let answer of Object.values(styleAnswers)) {
-                    if (answer) {
-                        styleAnswersObj[answer] = answer;
-                    }
-                }
-            }
-            return styleAnswersObj
-        },
-      selectedValue: {
-        get: function() {
-          return this.modelValue
-        },
-        set: function(newValue) {
-          this.$emit("update:modelValue", newValue);
-        }
-      }
-    },
-    methods: {
-      async getNewValues() {
-        const results = await this.updateValues();
-        this.values = results?.data;
-      },
-      initializeComponent(initialData) {
-        this.values = initialData;
-      },
-    },
-  };
-  </script>

src/layouts/vehicle-selection/vehicle-selection.vue

@@ -8,12 +8,12 @@
                    <div class="row">
                        <div class="col">
                            <div class="select-car-form rounded">
-                               <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="subheader" />
+                               <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-5" />
-                               <yearQuestion class="px-4 mb-2 mt-4" v-model="selectedYear" ref="yearQuestion" />
+                               <vehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedYear" ref="vehicleYearQuestion" cmsWidgetName="VehicleYearQuestion" :updateValues="updateYearValues" validationRules="year-required" inputId="yearQuestionField"/>
-                               <makeQuestion class="px-4 mb-2 mt-4" v-model="selectedMake" :updateValues="updateMakeValues" ref="makeQuestion"/>
+                               <vehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedMake" ref="vehicleMakeQuestion" :updateValues="updateMakeValues" cmsWidgetName="VehicleMakeQuestion" validationRules="make-required" inputId="makeQuestionField"/>
-                               <modelQuestion v-model="selectedModel" :updateValues="updateModelValues"  ref="modelQuestion" class="px-4 mb-2 mt-4"/>
+                               <vehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedModel" ref="vehicleModelQuestion" cmsWidgetName="VehicleModelQuestion" :updateValues="updateModelValues" validationRules="model-required" inputId="modelQuestionField"/>
-                               <styleQuestion v-model="selectedStyle" :updateValues="updateStyleValues" ref="styleQuestion" class="px-4 mb-2 mt-4"/>
+                               <vehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedStyle" ref="vehicleStyleQuestion" cmsWidgetName="VehicleStyleQuestion" :updateValues="updateStyleValues" validationRules="style-required" inputId="styleQuestionField"/>
-                              <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mt-2 mb-3" />
+                              <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mt-5 mb-3" />
                                <siteFooter
                                  cmsWidgetName="SiteFooterWidget"
                                  @ForwardClicked="forwardButtonAction"
@@ -37,16 +37,22 @@ import siteHeader from "@/iss-components/site-header/site-header";
 import siteFooter from "@/iss-components/site-footer/site-footer";
 import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
 import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
-import yearQuestion from "@/layouts/vehicle-selection/year-question/year-question";
+import vehicleQuestion from "@/iss-components/vehicle-question/vehicle-question";
-import makeQuestion from "@/layouts/vehicle-selection/make-question/make-question";
+import { useMainStore } from '@/store';
-import modelQuestion from "@/layouts/vehicle-selection/model-question/model-question";
-import styleQuestion from "@/layouts/vehicle-selection/style-question/style-question";
 
 // Supporting files
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
-import {Form} from "vee-validate";
+import { Form, defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+
+//define validation rules
+defineRule("year-required", required(errorMessages.YEAR_REQUIRED));
+defineRule("make-required", required(errorMessages.MAKE_REQUIRED));
+defineRule("model-required", required(errorMessages.MODEL_REQUIRED));
+defineRule("style-required", required(errorMessages.STYLE_REQUIRED));
 
 export default {
    name: "vehicle-selection",
@@ -57,17 +63,20 @@ export default {
            selectedMake: null,
            selectedModel: null,
            selectedStyle: null,           
-           years: []
        };
    },
+props:{
+    cmsWidgetName:String,
+    validationRules:String,
+},
+  
+   mounted(){     
+     this.Years.getNewValues();
+   },
 
    async beforeRouteEnter(to, from, next) {
        // Call APIs
        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);       
-       const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
-       const makeQuestionInitialDataPromise = makeQuestion.methods.getNewValues();
-        const modelQuestionInitialDataPromise = modelQuestion.methods.getNewValues();
-       const styleQuestionInitialDataPromise = styleQuestion.methods.getNewValues();
 
        // Settle promises and get results
        const promiseResultMap = [
@@ -75,71 +84,54 @@ export default {
                resultKey: "cmsContent",
                promise: cmsContentPromise,
            },        
-           {
-               resultKey: "yearQuestionInitialData",
-               promise: yearQuestionInitialDataPromise,
-           },
-           {
-               resultKey: "makeQuestionInitialData",
-               promise: makeQuestionInitialDataPromise,
-           },
-           {
-               resultKey: "modelQuestionInitialData",
-               promise: modelQuestionInitialDataPromise,
-           },
-           {
-               resultKey: "styleQuestionInitialData",
-               promise: styleQuestionInitialDataPromise,
-           },
-
        ];
 
        let resultMap = await settleAllPromises(promiseResultMap);
 
        // Call the "next" function to complete the transition to this page.
        next((vm) => {         
-        vm.years = resultMap.yearQuestionInitialData;
            vm.setCmsContent(resultMap.cmsContent);
-           vm.$refs.yearQuestion.initializeComponent(
-               resultMap.yearQuestionInitialData
-           );
-           vm.$refs.makeQuestion.initializeComponent(
-               resultMap.makeQuestionInitialData
-           );
-       
-           vm.$refs.modelQuestion.initializeComponent(
-               resultMap.modelQuestionInitialData
-           );
-           vm.$refs.styleQuestion.initializeComponent(
-               resultMap.styleQuestionInitialData
-               );
     });
       
   },
    watch: {
        selectedYear(yearIndex) {
            const parsedYearIndex = parseInt(yearIndex);           
-           this.mainStore.updateVehicleYear( this.years[parsedYearIndex] );
+           this.mainStore.updateVehicleYear(this.Years.values[parsedYearIndex]);
-
+           this.Makes.getNewValues();
-           this.$refs["makeQuestion"].getNewValues();
+       },
-
+       selectedMake(makeIndex) {
-       },
+        const parsedMakeIndex = parseInt(makeIndex);    
-       selectedMake(make) {
+           this.mainStore.updateVehicleMake(this.Makes.values[parsedMakeIndex]);
-           this.mainStore.updateVehicleMake( make );
+           this.Models.getNewValues();      
-           this.$refs["modelQuestion"].getNewValues();           
+       },
-       },
+       selectedModel(modelIndex) {
-       selectedModel(model) {
+        const parsedModelIndex = parseInt(modelIndex); 
-           this.mainStore.updateVehicleModel( model );
+           this.mainStore.updateVehicleModel(this.Models.values[parsedModelIndex]);
-           this.$refs["styleQuestion"].getNewValues(); 
+            this.Styles.getNewValues();           
-       },
+       },
-       selectedStyle(style) {
+       selectedStyle(styleIndex) {
-           this.mainStore.updateVehicleStyle( style );
+        const parsedStyleIndex = parseInt(styleIndex); 
-       },
+           this.mainStore.updateVehicleStyle(this.Styles.values[parsedStyleIndex]);
-   },
+       },
+   },
+computed:{
+    Years(){
+        return this.$refs["vehicleYearQuestion"];
+    },
+    Makes(){
+        return this.$refs["vehicleMakeQuestion"];
+    },
+    Models(){
+        return this.$refs["vehicleModelQuestion"];
+    },
+    Styles(){
+        return this.$refs["vehicleStyleQuestion"];
+    }
 
+},
    methods: {
        arePagePrerequisitesValid() {
-
            return true;
        },
        backButtonAction() {
@@ -157,6 +149,9 @@ export default {
                 );
             });
      },    
+     async updateYearValues() {
+        return await useMainStore().getVehicleYears();
+     },
      async updateMakeValues() {
         return await this.mainStore.getVehicleMakes();
      },
@@ -165,19 +160,15 @@ export default {
      },
      async updateStyleValues() {
         return await this.mainStore.getVehicleStyles();
-     }
      },
-
+    },
    components: {
-       yearQuestion,
-       makeQuestion,
-       modelQuestion,
        siteHeader,
        siteSubHeader,
        vehicleBanner,
        siteFooter,
        Form,
-       styleQuestion,
+       vehicleQuestion
    },
 };
 </script>

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

@@ -1,63 +0,0 @@
-<template>
-    <dropdownQuestion
-    cmsWidgetName="VehicleYearQuestion"
-    ref="yearQuestion"
-    :options="years"
-    disableAutoFill
-    inputId="yearQuestionField"
-    placeHolderText="Select an option"
-    validationRules="year-required"
-    v-model="selectedValue"
-    />
-  </template>
-  
-  <script>
-
-  import { useMainStore } from '@/store';
-  import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
-
-  import { errorMessages } from "@/constants/error-messages";
-import { required } from "@/helpers/validation-rules";
-import { defineRule } from "vee-validate";
-
-defineRule("year-required", required(errorMessages.YEAR_REQUIRED));
-
-
-  
-  export default {
-    name: "year-question",
-    data() {
-      return {
-        years : Array,
-      };
-    },
-    props: {
-      modelValue: Number,
-      cmsWidgetName: String,
-    },
-    components: {
-    dropdownQuestion
-},
-    computed: {
-      questionText(){
-        return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
-      },
-      selectedValue: {
-        get: function() {
-          return this.modelValue;
-        },
-        set: function(newValue) {
-          this.$emit("update:modelValue",newValue);
-        },
-      }
-    },
-    methods: {
-      loadInitialData() {
-        return useMainStore().getVehicleYears();
-      },
-      initializeComponent(initialData) {       
-        this.years = initialData;
-      },
-    },
-  };
-  </script>