commit

src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue

@@ -0,0 +1,87 @@
+<template>
+    <div class="damage-location-question">
+        <buttonQuestion
+            :questionText="questionText"
+            isMultiSelect
+            :answers="answersToDisplay"
+            :groupName="groupName"
+            buttonTypeString="listCard"
+            isRequired
+            v-model="selectedValues"
+            validationRules="damage-location-required" />
+    </div>
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+import { useMainStore } from '@/store';
+import { defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+
+// DEFINE VALIDATION RULES
+defineRule("damage-location-required", required(errorMessages.DAMAGE_LOCATION_REQUIRED));
+
+export default {
+    name: "damageLocationQuestion",
+    data() {
+        return {
+            damageOptions: Object,
+        };
+    },
+    props: {
+        modelValue: Array,
+        groupName: String,
+        cmsWidgetName: String,
+    },
+    methods: {
+        initializeComponent(damageOptions) {
+            this.damageOptions = damageOptions;
+        },
+    },
+    computed: {
+        questionText() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+        answersFromCms() {
+            return this.getCmsContent(this.cmsWidgetName, "Answers");
+        },
+        selectedValues: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+        damageOptionsMap() {
+            return {
+                Windshield: true,
+                SideDoor:
+                    this.damageOptions.driverSideOptions.availableReplacementOptions.length ||
+                    this.damageOptions.passengerSideOptions.availableReplacementOptions.length,
+                RearWindow: this.damageOptions.backGlassOptions.availableReplacementOptions.length,
+            };
+        },
+        answersToDisplay() {
+            const filteredAnswers = Array.isArray(this.answersFromCms)
+                ? this.answersFromCms.filter((ans) => {
+                      const name = ans.Name.split("-");
+                      return (
+                          name[0].toUpperCase() === useMainStore().getters.vehicle.category &&
+                          this.damageOptionsMap[name[1]]
+                      );
+                  })
+                : [];
+            return filteredAnswers.map((ans) => {
+                const newName = ans.Name.includes("-") ? ans.Name.split("-")[1] : ans.Name;
+                ans.Name = newName;
+                return ans;
+            });
+        },
+    },
+    components: {
+        buttonQuestion,
+    },
+};
+</script>

src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue

@@ -0,0 +1,109 @@
+<template>
+    <transition name="fade" mode="out-in">
+        <div
+            v-if="shouldDisplayReplaceOptionsQuestion"
+            class="replace-options-question"
+            :class="this.answersToDisplay.length < 2 ? 'd-none' : ''"
+            aria-live="polite">
+            <buttonQuestion
+                isWide
+                :questionText="questionText"
+                :isMultiSelect="isMultiSelect"
+                :answers="answersToDisplay"
+                :groupName="groupName"
+                buttonTypeString="listCard"
+                v-model="selectedValues"
+                :validationRules="validationRules"
+                :suppressError="suppressError"
+                :isRequired="isRequired" />
+        </div>
+    </transition>
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+import { useMainStore } from '@/store';
+
+export default {
+    name: "replaceOptionsQuestion",
+    data() {
+        return {
+            replaceOptions: this.isMultiSelect ? [] : "",
+        };
+    },
+    props: {
+        isAvailable: Boolean,
+        filterByVehicleCategory: Boolean,
+        groupName: String,
+        modelValue: [Array, String, Number],
+        isMultiSelect: Boolean,
+        validationRules: String,
+        suppressError: Boolean,
+        cmsWidgetName: String,
+        isRequired: Boolean,
+    },
+    methods: {
+        initializeComponent(replaceOptions) {
+            this.replaceOptions = replaceOptions;
+        },
+        updateSelectedValues() {
+            // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
+            if (Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
+                this.selectedValues = this.isMultiSelect
+                    ? [this.answersToDisplay[0].Name]
+                    : this.answersToDisplay[0].Name;
+            }
+        },
+    },
+    computed: {
+        questionText() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+        answersFromCms() {
+            return this.getCmsContent(this.cmsWidgetName, "Answers");
+        },
+        selectedValues: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+        answersToDisplay() {
+            const filteredAnswers = Array.isArray(this.answersFromCms)
+                ? this.answersFromCms.filter((ans) => {
+                      const name = ans.Name.split("-");
+                      return this.filterByVehicleCategory
+                          ? name[0].toUpperCase() === useMainStore().getters.vehicle.category &&
+                                this.replaceOptions.includes(name[1])
+                          : this.replaceOptions.includes(ans.Name);
+                  })
+                : [];
+
+            return filteredAnswers.map((ans) => {
+                const newName = ans.Name.includes("-") ? ans.Name.split("-")[1] : ans.Name;
+                ans.Name = newName;
+                return ans;
+            });
+        },
+        shouldDisplayReplaceOptionsQuestion() {
+            return this.isAvailable && this.answersToDisplay.length > 0;
+        },
+    },
+    watch: {
+        isAvailable(val) {
+            // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
+            val && this.updateSelectedValues();
+        },
+        shouldDisplayReplaceOptionsQuestion(shouldDisplayReplaceOptionsQuestion) {
+            if (!shouldDisplayReplaceOptionsQuestion) {
+                this.selectedValues = this.isMultiSelect ? [] : "";
+            }
+        },
+    },
+    components: {
+        buttonQuestion,
+    },
+};
+</script>

src/store/index.js

@@ -47,7 +47,9 @@ export const state = getDefaultState();
 export const useMainStore = defineStore({
     id: storeId,
     state: () => state,
-    getters: {},
+    getters: {
+      vehicle: this.order.vehicle
+    },
     actions:
     {
         // Content API Actions