From 9b5fe2adf491ef2b4c23f54559cf647b69c4bdba Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 18 Feb 2022 09:48:29 -0500
Subject: [PATCH] Side Door Options

---
 .../side-door-options/side-door-options.vue   | 62 +++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 src/layouts/vehicle-damage/side-door-options/side-door-options.vue

diff --git a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
new file mode 100644
index 000000000..9f4cd0105
--- /dev/null
+++ b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
@@ -0,0 +1,62 @@
+<template>
+    <div class="side-door-options">
+        <buttonQuestion
+            :questionText="questionText"
+            isMultiSelect
+            :answers="answersToDisplay"
+            :groupName="groupName"
+            buttonType="listCard"
+            v-model="selectedValues"
+        />
+        <replaceOptionsQuestion />
+    </div>
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import store from "@/store";
+
+export default ({
+    name: "replaceOptionsQuestion",
+    data(){
+        return {
+            questionText: String,
+            answersFromCms: Array,
+        }
+    },
+    props: {
+        groupName: String,
+        modelValue: Array,
+    },
+    methods: {
+        initializeComponent(cmsContent){
+            this.questionText = cmsContent.QuestionText;
+            this.answersFromCms = cmsContent.Answers;
+        },
+    },
+    computed: {
+        selectedValues: {
+            get: function() {
+                return this.modelValue;
+            },
+            set: function(newValue) {
+                this.$emit("update:modelValue", newValue);
+            }
+        },
+        answersToDisplay(){
+            return  Array.isArray(this.answersFromCms) 
+                ? this.answersFromCms.filter(ans => 
+                    {
+                        const name = ans.Name.split('-');
+                        return name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1]);
+                    }) 
+                : [];
+        },
+    },
+    components: {
+        buttonQuestion,
+        replaceOptionsQuestion,
+    }
+})
+</script>
\ No newline at end of file