From 5c70ff81fd1c3ce77f0ed073f1dcd72b98b97df8 Mon Sep 17 00:00:00 2001
From: Sneha <sneha.a@safelite.com>
Date: Thu, 27 Jul 2023 15:35:00 +0530
Subject: [PATCH 1/4] 1418

---
 .../vehicle-question/vehicle-question.vue     | 14 +++++---
 src/layouts/vehicle/vehicle.vue               | 33 +++++++++++--------
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/layouts/vehicle/vehicle-question/vehicle-question.vue b/src/layouts/vehicle/vehicle-question/vehicle-question.vue
index 283f26811..9f5fc52a9 100644
--- a/src/layouts/vehicle/vehicle-question/vehicle-question.vue
+++ b/src/layouts/vehicle/vehicle-question/vehicle-question.vue
@@ -8,6 +8,8 @@
 
 <script>
 import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
+// import { storeActions } from "@/constants/store-actions.js";
+// import baseMixin from "@/mixins/base-mixin.js";
 
 export default {
     name: "vehicle-question",
@@ -15,7 +17,6 @@ export default {
     data() {
         return {
             values: [],
-            selectedIndex: null,
         };
     },
 
@@ -38,11 +39,11 @@ export default {
                 newValue = newValue != null && newValue > -1 ? this.values[newValue] : null;
                 this.$emit("update:modelValue", newValue);
             },
-        },
+        }
     },
 
     methods: {
-        async getNewValues(selectedYMMS) {
+        async options(selectedYMMS) {
             const results = await this.updateValues();
             this.values = results?.data;
             if (this.values.length == 1) {
@@ -52,7 +53,12 @@ export default {
                     selectedYMMS != null ? this.values.indexOf(selectedYMMS) : null;
             }
         },
-
+        // loadInitialData() {
+        //     return baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_YEARS, {});
+        // },
+        // initializeComponent(initialData) {
+        //     this.values = initialData;
+        // },
         clearValues() {
             this.values = [];
             this.selectedValue = null;
diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index bea1fdd8e..caf541f00 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -16,7 +16,6 @@
                                     class="mb-2 mt-4"
                                     v-model="selectedYear"
                                     cmsWidgetName="VehicleYearQuestion"
-                                    :updateValues="updateYearValues"
                                     validationRules="year-required"
                                     placeHolderText="Select year"
                                     inputId="yearQuestionField" />
@@ -101,10 +100,10 @@ export default {
     name: "vehicle",
     data() {
         return {
-            selectedYear: null,
-            selectedMake: null,
-            selectedModel: null,
-            selectedStyle: null,
+            selectedYear: this.selectedYearfromStore,
+            selectedMake: this.selectedMakefromStore,
+            selectedModel: this.selectedModelfromStore,
+            selectedStyle: this.selectedStylefromStore,
         };
     },
 
@@ -113,9 +112,9 @@ export default {
         validationRules: String,
     },
 
-    mounted() {
-        this.$refs["vehicleYearQuestion"].getNewValues(this.selectedYearfromStore);
-    },
+    // mounted() {
+    //     this.$refs["vehicleYearQuestion"].getNewValues(this.selectedYearfromStore);
+    // },
 
     async beforeRouteEnter(to, from, next) {
         // Call APIs
@@ -124,6 +123,7 @@ export default {
         const experimentForLogging = store.getters.applicationUser.experiments.find(
             (e) => e.universeName === experimentUniverses.CONCEPT_FUNNEL
         );
+        const yearQuestionInitialDataPromise =  baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_YEARS, {});
 
         // If the concept funnel experiment is found, as it should be when coming from safelite.com, then log the experiment exposure.
         if (experimentForLogging !== undefined) {
@@ -146,6 +146,10 @@ export default {
                 resultKey: "cmsContent",
                 promise: cmsContentPromise,
             },
+            {
+                resultKey: "yearQuestionInitialData",
+                promise: yearQuestionInitialDataPromise,
+            },
         ];
 
         let resultMap = await settleAllPromises(promiseResultMap);
@@ -153,6 +157,7 @@ export default {
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
+            //vm.$refs.vehicleQuestion.initializeComponent(resultMap.yearQuestionInitialData);
         });
     },
 
@@ -161,7 +166,7 @@ export default {
             const parsedYear = parseInt(year);
             this.dispatchStoreAction(storeActions.SAVE_VEHICLE_YEAR, parsedYear);
             if (year) {
-                this.$refs["vehicleMakeQuestion"].getNewValues(this.selectedMakefromStore);
+                this.$refs["vehicleMakeQuestion"].options(this.selectedMakefromStore);
             } else {
                 this.$refs["vehicleMakeQuestion"].clearValues();
             }
@@ -169,7 +174,7 @@ export default {
         selectedMake(make) {
             this.dispatchStoreAction(storeActions.SAVE_VEHICLE_MAKE, make, false);
             if (make) {
-                this.$refs["vehicleModelQuestion"].getNewValues(this.selectedModelfromStore);
+                this.$refs["vehicleModelQuestion"].options(this.selectedModelfromStore);
             } else {
                 this.$refs["vehicleModelQuestion"].clearValues();
             }
@@ -177,7 +182,7 @@ export default {
         selectedModel(model) {
             this.dispatchStoreAction(storeActions.SAVE_VEHICLE_MODEL, model, false);
             if (model) {
-                this.$refs["vehicleStyleQuestion"].getNewValues(this.selectedStylefromStore);
+                this.$refs["vehicleStyleQuestion"].options(this.selectedStylefromStore);
             } else {
                 this.$refs["vehicleStyleQuestion"].clearValues();
             }
@@ -210,9 +215,9 @@ export default {
             this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route);
         },
 
-        async updateYearValues() {
-            return await baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_YEARS, {});
-        },
+        // async updateYearValues() {
+        //     return await baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_YEARS, {});
+        // },
 
         async updateMakeValues() {
             return await baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_MAKES, {

From 838acce4bdd2484db15fdacfb288157770b1a569 Mon Sep 17 00:00:00 2001
From: Sneha <sneha.a@safelite.com>
Date: Wed, 2 Aug 2023 15:51:30 +0530
Subject: [PATCH 2/4] CSR-1418

---
 src/constants/store-actions.js                |   1 +
 .../dropdown-vehicle/dropdown-vehicle.spec.js | 117 ++++++++++
 .../dropdown-vehicle/dropdown-vehicle.vue     | 147 ++++++++++++
 .../vehicle-question/vehicle-question.vue     |  50 +---
 src/layouts/vehicle/vehicle.vue               | 217 +++++++++++++-----
 src/store/index.js                            |  15 ++
 src/store/store.spec.js                       |  43 ++++
 7 files changed, 483 insertions(+), 107 deletions(-)
 create mode 100644 src/digital-components/dropdown-vehicle/dropdown-vehicle.spec.js
 create mode 100644 src/digital-components/dropdown-vehicle/dropdown-vehicle.vue

diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js
index 9d7d3ea6a..00a2dffea 100644
--- a/src/constants/store-actions.js
+++ b/src/constants/store-actions.js
@@ -62,6 +62,7 @@ const storeActions = {
     SAVE_VEHICLE_MAKE: "saveVehicleMake",
     SAVE_VEHICLE_MODEL: "saveVehicleModel",
     SAVE_VEHICLE_STYLE: "saveVehicleStyle",
+    SAVE_VEHICLE: "saveVehicle",
     SAVE_VEHICLE_DAMAGE: "saveVehicleDamage",
     SAVE_VIN_LOOKUP: "saveVinLookup",
     SAVE_SERVICE_ZIP_CODE_INFO: "saveServiceZipCodeInfo",
diff --git a/src/digital-components/dropdown-vehicle/dropdown-vehicle.spec.js b/src/digital-components/dropdown-vehicle/dropdown-vehicle.spec.js
new file mode 100644
index 000000000..17045e490
--- /dev/null
+++ b/src/digital-components/dropdown-vehicle/dropdown-vehicle.spec.js
@@ -0,0 +1,117 @@
+import { shallowMount } from "@vue/test-utils";
+import dropdownVehicle from "./dropdown-vehicle";
+
+// Mock CMS content
+const questionText = "Question Text";
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn().mockImplementation(() => {
+            return questionText;
+        }),
+    },
+};
+
+// TODO: Remove the following from dropdown-question.vue -> :class="(errors && errors.length) || hasError ? 'has-error' : ''"
+// It is not being used.
+describe("dropdownVehicle.vue", () => {
+    it("Should render a select input", async () => {
+        // Arrange
+        const wrapper = shallowMount(dropdownVehicle, {
+            propsData: {
+                options: {},
+            },
+            mixins: [mockMixin],
+        });
+
+        // Act
+        const select = wrapper.find("select");
+
+        // Assert
+        expect(select.exists()).toBe(true);
+    });
+
+    it("Should render the 'questionText' data value as the label text.", async () => {
+        // Arrange
+        const wrapper = shallowMount(dropdownVehicle, {
+            propsData: {
+                options: {},
+            },
+            mixins: [mockMixin],
+        });
+
+        // Act
+        const label = wrapper.find("label");
+
+        // Assert
+        expect(label.text()).toContain(questionText);
+    });
+
+    it("Should render the 'questionText' data value as the aria-label attribute.", async () => {
+        // Arrange
+        const wrapper = shallowMount(dropdownVehicle, {
+            propsData: {
+                options: {},
+            },
+            mixins: [mockMixin],
+        });
+
+        // Act
+        const label = wrapper.find("label");
+
+        // Assert
+        expect(label.attributes("aria-label")).toContain(questionText);
+    });
+
+    it("Should return aria-disabled state as disabled", async () => {
+        // Arrange
+        const wrapper = shallowMount(dropdownVehicle, {
+            propsData: {
+                options: {},
+                isDisabled: true,
+            },
+            mixins: [mockMixin],
+        });
+
+        // Act
+        const select = wrapper.find("select");
+
+        // Assert
+        expect(select.attributes("aria-disabled")).toEqual("true");
+    });
+
+    it("Should emit new value when modelValue is changed", async () => {
+        // Arrange
+        const wrapper = shallowMount(dropdownVehicle, {
+            propsData: {
+                options: {},
+                modelValue: "val",
+            },
+            mixins: [mockMixin],
+        });
+
+        // Act
+        await wrapper.find("select").setValue("val2");
+
+        // Assert
+        expect(wrapper.emitted()).toHaveProperty("change");
+    });
+
+    it("Should call this.handleChange with new value when selectedOption is changed", async () => {
+        // Arrange
+        const wrapper = shallowMount(dropdownVehicle, {
+            propsData: {
+                options: {},
+                modelValue: "0",
+            },
+            mixins: [mockMixin],
+        });
+
+        wrapper.vm.handleChange = jest.fn().mockImplementation(() => {});
+
+        // Act
+        wrapper.vm.$options.watch.selectedOption.call(wrapper.vm, 1);
+
+        // Assert
+        expect(wrapper.vm.handleChange).toHaveBeenCalled;
+    });
+});
diff --git a/src/digital-components/dropdown-vehicle/dropdown-vehicle.vue b/src/digital-components/dropdown-vehicle/dropdown-vehicle.vue
new file mode 100644
index 000000000..1d4d6f0b4
--- /dev/null
+++ b/src/digital-components/dropdown-vehicle/dropdown-vehicle.vue
@@ -0,0 +1,147 @@
+<template>
+    <div
+        class="dropdown-question"
+        :class="(errors && errors.length) || hasError ? 'has-error' : ''">
+        <label
+            :for="dropdownId"
+            :aria-label="questionText"
+            class="form-label"
+            v-html="questionText"></label>
+        <select
+            v-model="selectedOption"
+            class="form-select"
+            :id="dropdownId"
+            :name="dropdownId"
+            :aria-disabled="isDisabled"
+            :disabled="isDisabled"
+            :aria-required="isRequired"
+            :validationRules="validationRules"
+            :placeHolderText="placeHolderText">
+            <option v-if="placeHolderText" value="" selected>{{ placeHolderText }}</option>
+            <option v-for="value in options" :value="value" :key="value">
+                {{ value }}
+            </option>
+        </select>
+        <div v-show="errorMessage" class="row mt-2 form-test-error">
+            <span aria-atomic="true" aria-live="polite">{{ errorMessage }}</span>
+        </div>
+    </div>
+</template>
+
+<script>
+import { useField } from "vee-validate";
+import { v4 as uuidv4 } from "uuid";
+
+export default {
+    name: "dropdown-vehicle",
+    props: {
+        customDropdownId: String,
+        options: {
+            type: Object,
+            required: true,
+        },
+        modelValue: String,
+        isDisabled: Boolean,
+        isRequired: Boolean,
+        validationRules: String,
+        placeHolderText: String,
+        cmsWidgetName: String,
+        hasError: Boolean,
+    },
+    setup(props) {
+        const uuid = uuidv4();
+        const dropdownId = !props.customDropdownId ? `dropdown-${uuid}` : props.customDropdownId;
+
+        const propsClone = Object.assign({}, props);
+        const modelValue = propsClone.modelValue;
+        let initialValue;
+
+        switch (typeof modelValue) {
+            case "number":
+                initialValue = modelValue;
+                break;
+            default:
+                initialValue = modelValue && modelValue.length > 0 ? modelValue : "";
+                break;
+        }
+
+        const fieldOptions = {
+            type: "select",
+            value: props.modelValue,
+            initialValue: initialValue,
+        };
+
+        const { errorMessage, handleBlur, handleChange, meta, errors } = useField(
+            dropdownId,
+            props.validationRules,
+            fieldOptions
+        );
+
+        return {
+            dropdownId,
+            errorMessage,
+            handleBlur,
+            handleChange,
+            meta,
+            errors,
+        };
+    },
+    mounted() {
+        this.$emit("dropdownQuestionEvent.inputIdAssigned", this.inputId);
+    },
+    computed: {
+        questionText() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+        selectedOption: {
+            get: function () {
+                return !this.modelValue ? "" : this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+    },
+    watch: {
+        selectedOption(newValue) {
+            this.handleChange(newValue);
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+.dropdown-question {
+    label {
+        color: $black;
+        font-weight: 500;
+    }
+    .form-label {
+        margin-bottom: 0.25rem;
+    }
+    .form-select {
+        color: $gray-600;
+        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
+        border: 1px solid $gray-500;
+        border-radius: 0.5rem;
+        min-height: 3rem;
+        &:focus,
+        &:focus-visible {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:disabled,
+        &.disabled {
+            background-color: $gray-100;
+            filter: grayscale(100%);
+            &:hover {
+                box-shadow: 0 0 0 4px transparent;
+                border: 1px solid $gray-500;
+            }
+        }
+        &:hover {
+            border: 1px solid $gray-500;
+            box-shadow: 0 0 0 4px $blue-300;
+        }
+    }
+}
+</style>
diff --git a/src/layouts/vehicle/vehicle-question/vehicle-question.vue b/src/layouts/vehicle/vehicle-question/vehicle-question.vue
index 9f5fc52a9..f2863564d 100644
--- a/src/layouts/vehicle/vehicle-question/vehicle-question.vue
+++ b/src/layouts/vehicle/vehicle-question/vehicle-question.vue
@@ -1,67 +1,29 @@
 <template>
-    <dropdownQuestion
-        :options="values"
-        disableAutoFill
-        v-model="selectedValue"
-        :isDisabled="!values.length" />
+    <dropdownVehicle disableAutoFill v-model="selectedValue" />
 </template>
 
 <script>
-import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
-// import { storeActions } from "@/constants/store-actions.js";
-// import baseMixin from "@/mixins/base-mixin.js";
+import dropdownVehicle from "@/digital-components/dropdown-vehicle/dropdown-vehicle";
 
 export default {
     name: "vehicle-question",
 
-    data() {
-        return {
-            values: [],
-        };
-    },
-
     props: {
         modelValue: String,
-        updateValues: Function,
     },
 
     components: {
-        dropdownQuestion,
+        dropdownVehicle,
     },
 
     computed: {
         selectedValue: {
-            get() {
-                return this.selectedIndex?.toString();
+            get: function () {
+                return this.modelValue?.toString();
             },
-            set(newValue) {
-                this.selectedIndex = newValue;
-                newValue = newValue != null && newValue > -1 ? this.values[newValue] : null;
+            set: function (newValue) {
                 this.$emit("update:modelValue", newValue);
             },
-        }
-    },
-
-    methods: {
-        async options(selectedYMMS) {
-            const results = await this.updateValues();
-            this.values = results?.data;
-            if (this.values.length == 1) {
-                this.selectedValue = 0;
-            } else {
-                this.selectedValue =
-                    selectedYMMS != null ? this.values.indexOf(selectedYMMS) : null;
-            }
-        },
-        // loadInitialData() {
-        //     return baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_YEARS, {});
-        // },
-        // initializeComponent(initialData) {
-        //     this.values = initialData;
-        // },
-        clearValues() {
-            this.values = [];
-            this.selectedValue = null;
         },
     },
 };
diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index caf541f00..24ae0d215 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -15,6 +15,8 @@
                                     ref="vehicleYearQuestion"
                                     class="mb-2 mt-4"
                                     v-model="selectedYear"
+                                    :isDisabled="!yearOptions.length"
+                                    :options="yearOptions"
                                     cmsWidgetName="VehicleYearQuestion"
                                     validationRules="year-required"
                                     placeHolderText="Select year"
@@ -24,8 +26,9 @@
                                     ref="vehicleMakeQuestion"
                                     class="mb-2 mt-4"
                                     v-model="selectedMake"
+                                    :isDisabled="!makeOptions.length"
+                                    :options="makeOptions"
                                     cmsWidgetName="VehicleMakeQuestion"
-                                    :updateValues="updateMakeValues"
                                     validationRules="make-required"
                                     placeHolderText="Select make"
                                     inputId="makeQuestionField" />
@@ -35,7 +38,8 @@
                                     class="mb-2 mt-4"
                                     v-model="selectedModel"
                                     cmsWidgetName="VehicleModelQuestion"
-                                    :updateValues="updateModelValues"
+                                    :isDisabled="!modelOptions.length"
+                                    :options="modelOptions"
                                     validationRules="model-required"
                                     placeHolderText="Select model"
                                     inputId="modelQuestionField" />
@@ -45,7 +49,8 @@
                                     class="mb-2 mt-4"
                                     v-model="selectedStyle"
                                     cmsWidgetName="VehicleStyleQuestion"
-                                    :updateValues="updateStyleValues"
+                                    :isDisabled="!styleOptions.length"
+                                    :options="styleOptions"
                                     validationRules="style-required"
                                     placeHolderText="Select style"
                                     inputId="styleQuestionField" />
@@ -100,10 +105,14 @@ export default {
     name: "vehicle",
     data() {
         return {
-            selectedYear: this.selectedYearfromStore,
-            selectedMake: this.selectedMakefromStore,
-            selectedModel: this.selectedModelfromStore,
-            selectedStyle: this.selectedStylefromStore,
+            selectedYear: this.selectedYearfromStore(),
+            selectedMake: this.selectedMakefromStore(),
+            selectedModel: this.selectedModelfromStore(),
+            selectedStyle: this.selectedStylefromStore(),
+            yearOptions: [],
+            makeOptions: [],
+            modelOptions: [],
+            styleOptions: [],
         };
     },
 
@@ -112,10 +121,6 @@ export default {
         validationRules: String,
     },
 
-    // mounted() {
-    //     this.$refs["vehicleYearQuestion"].getNewValues(this.selectedYearfromStore);
-    // },
-
     async beforeRouteEnter(to, from, next) {
         // Call APIs
 
@@ -123,7 +128,43 @@ export default {
         const experimentForLogging = store.getters.applicationUser.experiments.find(
             (e) => e.universeName === experimentUniverses.CONCEPT_FUNNEL
         );
-        const yearQuestionInitialDataPromise =  baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_YEARS, {});
+        const yearQuestionInitialDataPromise = baseMixin.methods.dispatchStoreAction(
+            storeActions.GET_VEHICLE_YEARS,
+            {}
+        );
+        var makeQuestionInitialDataPromise = null;
+        var modelQuestionInitialDataPromise = null;
+        var styleQuestionInitialDataPromise = null;
+
+        if (
+            store.getters.order.vehicle.make &&
+            store.getters.order.vehicle.model &&
+            store.getters.order.vehicle.style
+        ) {
+            makeQuestionInitialDataPromise = baseMixin.methods.dispatchStoreAction(
+                storeActions.GET_VEHICLE_MAKES,
+                {
+                    year: store.getters.order.vehicle.year,
+                }
+            );
+
+            modelQuestionInitialDataPromise = baseMixin.methods.dispatchStoreAction(
+                storeActions.GET_VEHICLE_MODELS,
+                {
+                    year: store.getters.order.vehicle.year,
+                    make: store.getters.order.vehicle.make,
+                }
+            );
+
+            styleQuestionInitialDataPromise = baseMixin.methods.dispatchStoreAction(
+                storeActions.GET_VEHICLE_STYLES,
+                {
+                    year: store.getters.order.vehicle.year,
+                    make: store.getters.order.vehicle.make,
+                    model: store.getters.order.vehicle.model,
+                }
+            );
+        }
 
         // If the concept funnel experiment is found, as it should be when coming from safelite.com, then log the experiment exposure.
         if (experimentForLogging !== undefined) {
@@ -150,6 +191,18 @@ export default {
                 resultKey: "yearQuestionInitialData",
                 promise: yearQuestionInitialDataPromise,
             },
+            {
+                resultKey: "makeQuestionInitialData",
+                promise: makeQuestionInitialDataPromise,
+            },
+            {
+                resultKey: "modelQuestionInitialData",
+                promise: modelQuestionInitialDataPromise,
+            },
+            {
+                resultKey: "styleQuestionInitialData",
+                promise: styleQuestionInitialDataPromise,
+            },
         ];
 
         let resultMap = await settleAllPromises(promiseResultMap);
@@ -157,49 +210,74 @@ export default {
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
-            //vm.$refs.vehicleQuestion.initializeComponent(resultMap.yearQuestionInitialData);
+            vm.initializeYearComponent(resultMap.yearQuestionInitialData);
+
+            if (
+                makeQuestionInitialDataPromise &&
+                modelQuestionInitialDataPromise &&
+                styleQuestionInitialDataPromise
+            )
+                vm.initializeMMSComponent(
+                    resultMap.makeQuestionInitialData,
+                    resultMap.modelQuestionInitialData,
+                    resultMap.styleQuestionInitialData
+                );
         });
     },
 
     watch: {
-        selectedYear(year) {
-            const parsedYear = parseInt(year);
-            this.dispatchStoreAction(storeActions.SAVE_VEHICLE_YEAR, parsedYear);
+        async selectedYear(year) {
             if (year) {
-                this.$refs["vehicleMakeQuestion"].options(this.selectedMakefromStore);
+                const result = await this.getMakeOptions(year);
+                this.makeOptions = result?.data;
+                if (this.selectedYearfromStore() !== year) {
+                    this.selectedMake = null;
+                    this.selectedModel = null;
+                    this.selectedStyle = null;
+                }
             } else {
-                this.$refs["vehicleMakeQuestion"].clearValues();
+                this.makeOptions = [];
             }
         },
-        selectedMake(make) {
-            this.dispatchStoreAction(storeActions.SAVE_VEHICLE_MAKE, make, false);
+        async selectedMake(make) {
             if (make) {
-                this.$refs["vehicleModelQuestion"].options(this.selectedModelfromStore);
+                const result = await this.getModelOptions(this.selectedYear, make);
+                this.modelOptions = result?.data;
+                if (this.selectedMakefromStore() !== make) {
+                    this.selectedModel = null;
+                    this.selectedStyle = null;
+                }
             } else {
-                this.$refs["vehicleModelQuestion"].clearValues();
+                this.modelOptions = [];
             }
         },
-        selectedModel(model) {
-            this.dispatchStoreAction(storeActions.SAVE_VEHICLE_MODEL, model, false);
+        async selectedModel(model) {
             if (model) {
-                this.$refs["vehicleStyleQuestion"].options(this.selectedStylefromStore);
+                const result = await this.getStyleOptions(
+                    this.selectedYear,
+                    this.selectedMake,
+                    model
+                );
+                this.styleOptions = result?.data;
+                if (this.selectedModelfromStore() !== model) {
+                    this.selectedStyle = null;
+                }
             } else {
-                this.$refs["vehicleStyleQuestion"].clearValues();
+                this.styleOptions = [];
             }
         },
         selectedStyle(style) {
-            this.dispatchStoreAction(storeActions.SAVE_VEHICLE_STYLE, style, false);
-            this.setVehicle();
+            this.setVehicle(this.selectedYear, this.selectedMake, this.selectedModel, style);
         },
     },
 
     methods: {
-        setVehicle() {
+        setVehicle(year, make, model, style) {
             return this.dispatchStoreAction(this.storeActions.SET_VEHICLE, {
-                year: this.$store.getters.vehicle.year,
-                make: this.$store.getters.vehicle.make,
-                model: this.$store.getters.vehicle.model,
-                style: this.$store.getters.vehicle.style,
+                year: year,
+                make: make,
+                model: model,
+                style: style,
             });
         },
 
@@ -212,42 +290,29 @@ export default {
         },
 
         navigateForward() {
+            this.dispatchStoreAction(
+                storeActions.SAVE_VEHICLE,
+                {
+                    year: this.selectedYear,
+                    make: this.selectedMake,
+                    model: this.selectedModel,
+                    style: this.selectedStyle,
+                },
+                false
+            );
             this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route);
         },
 
-        // async updateYearValues() {
-        //     return await baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_YEARS, {});
-        // },
-
-        async updateMakeValues() {
-            return await baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_MAKES, {
-                year: store.getters.vehicle.year,
-            });
+        initializeYearComponent(initialData) {
+            this.yearOptions = initialData;
         },
-
-        async updateModelValues() {
-            return await baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_MODELS, {
-                year: store.getters.vehicle.year,
-
-                make: store.getters.vehicle.make,
-            });
-        },
-
-        async updateStyleValues() {
-            return baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_STYLES, {
-                year: store.getters.vehicle.year,
-                make: store.getters.vehicle.make,
-                model: store.getters.vehicle.model,
-            });
-        },
-    },
-
-    computed: {
-        displayGeneric() {
-            return !this.selectedStyle;
+        initializeMMSComponent(makeOptions, modelOptions, styleOptions) {
+            this.makeOptions = makeOptions;
+            this.modelOptions = modelOptions;
+            this.styleOptions = styleOptions;
         },
         selectedYearfromStore() {
-            return store.getters.vehicle.year;
+            return store.getters.vehicle.year?.toString();
         },
         selectedMakefromStore() {
             return store.getters.vehicle.make;
@@ -258,6 +323,32 @@ export default {
         selectedStylefromStore() {
             return store.getters.vehicle.style;
         },
+        async getMakeOptions(year) {
+            return await baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_MAKES, {
+                year: year,
+            });
+        },
+
+        async getModelOptions(year, make) {
+            return await baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_MODELS, {
+                year: year,
+                make: make,
+            });
+        },
+
+        async getStyleOptions(year, make, model) {
+            return await baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_STYLES, {
+                year: year,
+                make: make,
+                model: model,
+            });
+        },
+    },
+
+    computed: {
+        displayGeneric() {
+            return !this.selectedStyle;
+        },
     },
 
     components: {
diff --git a/src/store/index.js b/src/store/index.js
index fb86b61c3..fe05a4a53 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1619,6 +1619,21 @@ export const actions = {
         }
     },
 
+    saveVehicle(context, { year, make, model, style }) {
+        if (context.state.order.vehicle.year !== year) {
+            context.commit(storeMutations.UPDATE_YEAR, year);
+        }
+        if (context.state.order.vehicle.make !== make) {
+            context.commit(storeMutations.UPDATE_MAKE, make);
+        }
+        if (context.state.order.vehicle.model !== model) {
+            context.commit(storeMutations.UPDATE_MODEL, model);
+        }
+        if (context.state.order.vehicle.style !== style) {
+            context.commit(storeMutations.UPDATE_STYLE, style);
+        }
+    },
+
     saveVehicleDamage(
         context,
         { isWindshieldRepair, selectedGlassToReplace, selectedWindshieldChipCount }
diff --git a/src/store/store.spec.js b/src/store/store.spec.js
index 4a6788433..1081d383c 100644
--- a/src/store/store.spec.js
+++ b/src/store/store.spec.js
@@ -1702,6 +1702,49 @@ describe("Actions", () => {
         expect(commit).toBeCalledWith(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, null);
     });
 
+    it("saveVehicle, should save vehicle info", () => {
+        // Arrange
+        const context = state;
+
+        context.state = {
+            order: {
+                vehicle: {
+                    year: "2016",
+                    make: "Toyota",
+                    model: "Accord",
+                    style: "SUV",
+                },
+            },
+        };
+
+        const commit = jest.fn();
+
+        context.commit = commit;
+
+        //Act
+        const payload = {
+            year: "2015",
+            make: "Honda",
+            model: "Civic",
+            style: "Sedan",
+        };
+        actions.saveVehicle(context, payload);
+
+        //Assert
+        if (context.state.order.vehicle.year !== payload.year) {
+            expect(commit).toBeCalledWith(storeMutations.UPDATE_YEAR, payload.year);
+        }
+        if (context.state.order.vehicle.make !== payload.make) {
+            expect(commit).toBeCalledWith(storeMutations.UPDATE_MAKE, payload.make);
+        }
+        if (context.state.order.vehicle.model !== payload.model) {
+            expect(commit).toBeCalledWith(storeMutations.UPDATE_MODEL, payload.model);
+        }
+        if (context.state.order.vehicle.style !== payload.style) {
+            expect(commit).toBeCalledWith(storeMutations.UPDATE_STYLE, payload.style);
+        }
+    });
+
     it("saveVehicleDamage, should wipe out damage if different", () => {
         // Arrange
         const context = state;

From 591f512fdeb1ffd9aab1afd1c4cd3c9a45f68c23 Mon Sep 17 00:00:00 2001
From: Sneha <sneha.a@safelite.com>
Date: Wed, 2 Aug 2023 16:52:48 +0530
Subject: [PATCH 3/4] update index.js

---
 src/store/index.js      |  4 ++++
 src/store/store.spec.js | 10 ++++++++++
 2 files changed, 14 insertions(+)

diff --git a/src/store/index.js b/src/store/index.js
index fe05a4a53..41ca166c1 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1620,6 +1620,10 @@ export const actions = {
     },
 
     saveVehicle(context, { year, make, model, style }) {
+        context.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
+        context.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
+        context.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
+
         if (context.state.order.vehicle.year !== year) {
             context.commit(storeMutations.UPDATE_YEAR, year);
         }
diff --git a/src/store/store.spec.js b/src/store/store.spec.js
index 1081d383c..08aa406c9 100644
--- a/src/store/store.spec.js
+++ b/src/store/store.spec.js
@@ -1718,8 +1718,10 @@ describe("Actions", () => {
         };
 
         const commit = jest.fn();
+        const dispatch = jest.fn();
 
         context.commit = commit;
+        context.dispatch = dispatch;
 
         //Act
         const payload = {
@@ -1731,6 +1733,14 @@ describe("Actions", () => {
         actions.saveVehicle(context, payload);
 
         //Assert
+        expect(dispatch).toHaveBeenNthCalledWith(
+            1,
+            storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES
+        );
+        expect(dispatch).toHaveBeenNthCalledWith(
+            2,
+            storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES
+        );
         if (context.state.order.vehicle.year !== payload.year) {
             expect(commit).toBeCalledWith(storeMutations.UPDATE_YEAR, payload.year);
         }

From ba04a08c07ff4fae84594cb639d850a1d703e1c4 Mon Sep 17 00:00:00 2001
From: Sneha <sneha.a@safelite.com>
Date: Wed, 2 Aug 2023 17:25:24 +0530
Subject: [PATCH 4/4] adding prop

---
 .../dropdown-question/dropdown-question.vue   |  13 +-
 .../dropdown-vehicle/dropdown-vehicle.spec.js | 117 --------------
 .../dropdown-vehicle/dropdown-vehicle.vue     | 147 ------------------
 .../vehicle-question/vehicle-question.vue     |   6 +-
 4 files changed, 14 insertions(+), 269 deletions(-)
 delete mode 100644 src/digital-components/dropdown-vehicle/dropdown-vehicle.spec.js
 delete mode 100644 src/digital-components/dropdown-vehicle/dropdown-vehicle.vue

diff --git a/src/digital-components/dropdown-question/dropdown-question.vue b/src/digital-components/dropdown-question/dropdown-question.vue
index 7c0dd0d3b..6c032b740 100644
--- a/src/digital-components/dropdown-question/dropdown-question.vue
+++ b/src/digital-components/dropdown-question/dropdown-question.vue
@@ -16,9 +16,13 @@
             :disabled="isDisabled"
             :aria-required="isRequired"
             :validationRules="validationRules"
-            :placeHolderText="placeHolderText">
+            :placeHolderText="placeHolderText"
+            :valueAsKey="valueAsKey">
             <option v-if="placeHolderText" value="" selected>{{ placeHolderText }}</option>
-            <option v-for="(value, name, index) in options" :value="name" :key="index">
+            <option
+                v-for="(value, name, index) in options"
+                :value="valueAsKey == true ? value : name"
+                :key="valueAsKey == true ? value : index">
                 {{ value }}
             </option>
         </select>
@@ -47,6 +51,11 @@ export default {
         placeHolderText: String,
         cmsWidgetName: String,
         hasError: Boolean,
+        valueAsKey: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
     },
     setup(props) {
         const uuid = uuidv4();
diff --git a/src/digital-components/dropdown-vehicle/dropdown-vehicle.spec.js b/src/digital-components/dropdown-vehicle/dropdown-vehicle.spec.js
deleted file mode 100644
index 17045e490..000000000
--- a/src/digital-components/dropdown-vehicle/dropdown-vehicle.spec.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import dropdownVehicle from "./dropdown-vehicle";
-
-// Mock CMS content
-const questionText = "Question Text";
-const mockMixin = {
-    methods: {
-        getCmsContent: jest.fn().mockImplementation(() => {
-            return questionText;
-        }),
-    },
-};
-
-// TODO: Remove the following from dropdown-question.vue -> :class="(errors && errors.length) || hasError ? 'has-error' : ''"
-// It is not being used.
-describe("dropdownVehicle.vue", () => {
-    it("Should render a select input", async () => {
-        // Arrange
-        const wrapper = shallowMount(dropdownVehicle, {
-            propsData: {
-                options: {},
-            },
-            mixins: [mockMixin],
-        });
-
-        // Act
-        const select = wrapper.find("select");
-
-        // Assert
-        expect(select.exists()).toBe(true);
-    });
-
-    it("Should render the 'questionText' data value as the label text.", async () => {
-        // Arrange
-        const wrapper = shallowMount(dropdownVehicle, {
-            propsData: {
-                options: {},
-            },
-            mixins: [mockMixin],
-        });
-
-        // Act
-        const label = wrapper.find("label");
-
-        // Assert
-        expect(label.text()).toContain(questionText);
-    });
-
-    it("Should render the 'questionText' data value as the aria-label attribute.", async () => {
-        // Arrange
-        const wrapper = shallowMount(dropdownVehicle, {
-            propsData: {
-                options: {},
-            },
-            mixins: [mockMixin],
-        });
-
-        // Act
-        const label = wrapper.find("label");
-
-        // Assert
-        expect(label.attributes("aria-label")).toContain(questionText);
-    });
-
-    it("Should return aria-disabled state as disabled", async () => {
-        // Arrange
-        const wrapper = shallowMount(dropdownVehicle, {
-            propsData: {
-                options: {},
-                isDisabled: true,
-            },
-            mixins: [mockMixin],
-        });
-
-        // Act
-        const select = wrapper.find("select");
-
-        // Assert
-        expect(select.attributes("aria-disabled")).toEqual("true");
-    });
-
-    it("Should emit new value when modelValue is changed", async () => {
-        // Arrange
-        const wrapper = shallowMount(dropdownVehicle, {
-            propsData: {
-                options: {},
-                modelValue: "val",
-            },
-            mixins: [mockMixin],
-        });
-
-        // Act
-        await wrapper.find("select").setValue("val2");
-
-        // Assert
-        expect(wrapper.emitted()).toHaveProperty("change");
-    });
-
-    it("Should call this.handleChange with new value when selectedOption is changed", async () => {
-        // Arrange
-        const wrapper = shallowMount(dropdownVehicle, {
-            propsData: {
-                options: {},
-                modelValue: "0",
-            },
-            mixins: [mockMixin],
-        });
-
-        wrapper.vm.handleChange = jest.fn().mockImplementation(() => {});
-
-        // Act
-        wrapper.vm.$options.watch.selectedOption.call(wrapper.vm, 1);
-
-        // Assert
-        expect(wrapper.vm.handleChange).toHaveBeenCalled;
-    });
-});
diff --git a/src/digital-components/dropdown-vehicle/dropdown-vehicle.vue b/src/digital-components/dropdown-vehicle/dropdown-vehicle.vue
deleted file mode 100644
index 1d4d6f0b4..000000000
--- a/src/digital-components/dropdown-vehicle/dropdown-vehicle.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<template>
-    <div
-        class="dropdown-question"
-        :class="(errors && errors.length) || hasError ? 'has-error' : ''">
-        <label
-            :for="dropdownId"
-            :aria-label="questionText"
-            class="form-label"
-            v-html="questionText"></label>
-        <select
-            v-model="selectedOption"
-            class="form-select"
-            :id="dropdownId"
-            :name="dropdownId"
-            :aria-disabled="isDisabled"
-            :disabled="isDisabled"
-            :aria-required="isRequired"
-            :validationRules="validationRules"
-            :placeHolderText="placeHolderText">
-            <option v-if="placeHolderText" value="" selected>{{ placeHolderText }}</option>
-            <option v-for="value in options" :value="value" :key="value">
-                {{ value }}
-            </option>
-        </select>
-        <div v-show="errorMessage" class="row mt-2 form-test-error">
-            <span aria-atomic="true" aria-live="polite">{{ errorMessage }}</span>
-        </div>
-    </div>
-</template>
-
-<script>
-import { useField } from "vee-validate";
-import { v4 as uuidv4 } from "uuid";
-
-export default {
-    name: "dropdown-vehicle",
-    props: {
-        customDropdownId: String,
-        options: {
-            type: Object,
-            required: true,
-        },
-        modelValue: String,
-        isDisabled: Boolean,
-        isRequired: Boolean,
-        validationRules: String,
-        placeHolderText: String,
-        cmsWidgetName: String,
-        hasError: Boolean,
-    },
-    setup(props) {
-        const uuid = uuidv4();
-        const dropdownId = !props.customDropdownId ? `dropdown-${uuid}` : props.customDropdownId;
-
-        const propsClone = Object.assign({}, props);
-        const modelValue = propsClone.modelValue;
-        let initialValue;
-
-        switch (typeof modelValue) {
-            case "number":
-                initialValue = modelValue;
-                break;
-            default:
-                initialValue = modelValue && modelValue.length > 0 ? modelValue : "";
-                break;
-        }
-
-        const fieldOptions = {
-            type: "select",
-            value: props.modelValue,
-            initialValue: initialValue,
-        };
-
-        const { errorMessage, handleBlur, handleChange, meta, errors } = useField(
-            dropdownId,
-            props.validationRules,
-            fieldOptions
-        );
-
-        return {
-            dropdownId,
-            errorMessage,
-            handleBlur,
-            handleChange,
-            meta,
-            errors,
-        };
-    },
-    mounted() {
-        this.$emit("dropdownQuestionEvent.inputIdAssigned", this.inputId);
-    },
-    computed: {
-        questionText() {
-            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
-        },
-        selectedOption: {
-            get: function () {
-                return !this.modelValue ? "" : this.modelValue;
-            },
-            set: function (newValue) {
-                this.$emit("update:modelValue", newValue);
-            },
-        },
-    },
-    watch: {
-        selectedOption(newValue) {
-            this.handleChange(newValue);
-        },
-    },
-};
-</script>
-
-<style lang="scss">
-.dropdown-question {
-    label {
-        color: $black;
-        font-weight: 500;
-    }
-    .form-label {
-        margin-bottom: 0.25rem;
-    }
-    .form-select {
-        color: $gray-600;
-        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
-        border: 1px solid $gray-500;
-        border-radius: 0.5rem;
-        min-height: 3rem;
-        &:focus,
-        &:focus-visible {
-            box-shadow: 0 0 0 2.5px $blue;
-        }
-        &:disabled,
-        &.disabled {
-            background-color: $gray-100;
-            filter: grayscale(100%);
-            &:hover {
-                box-shadow: 0 0 0 4px transparent;
-                border: 1px solid $gray-500;
-            }
-        }
-        &:hover {
-            border: 1px solid $gray-500;
-            box-shadow: 0 0 0 4px $blue-300;
-        }
-    }
-}
-</style>
diff --git a/src/layouts/vehicle/vehicle-question/vehicle-question.vue b/src/layouts/vehicle/vehicle-question/vehicle-question.vue
index f2863564d..79b58bfaa 100644
--- a/src/layouts/vehicle/vehicle-question/vehicle-question.vue
+++ b/src/layouts/vehicle/vehicle-question/vehicle-question.vue
@@ -1,9 +1,9 @@
 <template>
-    <dropdownVehicle disableAutoFill v-model="selectedValue" />
+    <dropdownQuestion disableAutoFill v-model="selectedValue" :valueAsKey="true" />
 </template>
 
 <script>
-import dropdownVehicle from "@/digital-components/dropdown-vehicle/dropdown-vehicle";
+import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
 
 export default {
     name: "vehicle-question",
@@ -13,7 +13,7 @@ export default {
     },
 
     components: {
-        dropdownVehicle,
+        dropdownQuestion,
     },
 
     computed: {