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] 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: {