From 550c0d6e732c80de730b97b4a263982d729a423e Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Wed, 23 Feb 2022 15:59:18 -0500
Subject: [PATCH] Side door options fixes

---
 .../button-question/button-question.vue       |  6 ++-
 .../side-door-options.spec.js                 |  4 +-
 .../side-door-options/side-door-options.vue   | 40 ++++++-------------
 src/layouts/vehicle-damage/vehicle-damage.vue |  2 +-
 4 files changed, 20 insertions(+), 32 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index c828f9ff9..7937f0cca 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -122,15 +122,17 @@ export default {
   },
   methods: {
     handleCheckedChanged(val) {
+      const newSelectedValues = this.selectedValues;
       if(this.isMultiSelect && this.selectedValues) {
         // Add or remove item to array of data to emit
         if(Array.isArray(this.selectedValues)) {
-          const newSelectedValues = this.selectedValues;
           val.checkValue ? newSelectedValues.push(val.value) : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1);
           this.selectedValues = newSelectedValues;  
         }
       } else {
-        this.selectedValues = [val.value];
+        newSelectedValues.splice(0,newSelectedValues.length);
+        newSelectedValues.push(val.value);
+        this.selectedValues = newSelectedValues; 
       }
     },
   },
diff --git a/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js b/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js
index 239a54fd4..245076308 100644
--- a/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js
+++ b/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js
@@ -43,11 +43,11 @@ describe("replace-options-question.vue", () => {
       const { wrapper } = setupMocks({});
   
       //Act
-      wrapper.vm.selectedDriverSideReplacOptionsValues = ["FrontDoor"]
+      wrapper.vm.selectedDriverSideReplaceOptionsValues = ["FrontDoor"]
       await wrapper.vm.$nextTick();
   
       //Assert
-      expect(wrapper.emitted()["update:selectedDriverSideReplacOptions"][0]).toEqual([["FrontDoor"]]);
+      expect(wrapper.emitted()["update:selectedDriverSideReplaceOptions"][0]).toEqual([["FrontDoor"]]);
     });
   });
 
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
index 1372f23f6..540074779 100644
--- a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
+++ b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
@@ -13,9 +13,9 @@
             </div>
         </transition>
         
-        <replaceOptionsQuestion ref="driverSideOptions" :isAvailable="isDriverSideReplaceOptionsQuestionAvailable" groupName="driverSideOptions" filterByVehicleCategory v-model="selectedDriverSideReplacOptionsValues" />
+        <replaceOptionsQuestion ref="driverSideOptions" :isAvailable="isDriverSideReplaceOptionsQuestionAvailable" groupName="driverSideOptions" filterByVehicleCategory isMultiSelect v-model="selectedDriverSideReplaceOptionsValues" />
 
-        <replaceOptionsQuestion ref="passengerSideOptions" :isAvailable="isPassengerSideReplaceOptionsQuestionAvailable" groupName="passengerSideOptions" filterByVehicleCategory v-model="selectedPassengerSideReplaceOptionsValues" />
+        <replaceOptionsQuestion ref="passengerSideOptions" :isAvailable="isPassengerSideReplaceOptionsQuestionAvailable" groupName="passengerSideOptions" filterByVehicleCategory isMultiSelect v-model="selectedPassengerSideReplaceOptionsValues" />
     </div>
 </template>
 
@@ -30,10 +30,6 @@ export default ({
         return {
             questionText: String,
             answersFromCms: Array,
-            selectedDoorSides: [],
-            // Child component data
-            selectedDriverSideReplacOptions: [],
-            selectedPassengerSideReplaceOptions: [],
         }
     },
     props: {
@@ -49,11 +45,11 @@ export default ({
             this.$refs.driverSideOptions.initializeComponent(driverSideReplaceOptions, driverSideOptions);
             this.$refs.passengerSideOptions.initializeComponent(passengerSideReplaceOptions, passengerSideOptions);
         },
-        getSideDoorReplacementOptions(){
+        getSideDoorReplacementOptions(selectedDoorSides, selectedDriverSideReplaceOptions, selectedPassengerSideReplaceOptions){
             return {
-                selectedDoorSides: this.selectedDoorSides,
-                selectedDriverSideReplacOptions: this.selectedDriverSideReplacOptions,
-                selectedPassengerSideReplaceOptions: this.selectedPassengerSideReplaceOptions
+                selectedDoorSides: selectedDoorSides,
+                selectedDriverSideReplaceOptions: selectedDriverSideReplaceOptions,
+                selectedPassengerSideReplaceOptions: selectedPassengerSideReplaceOptions
             }
         },
     },
@@ -68,29 +64,26 @@ export default ({
         },
         selectedDoorSidesValues: {
             get: function() {
-                return this.selectedDoorSides;
+                return this.selectedValues.selectedDoorSides;
             },
             set: function(newValue) {
-                this.$emit("update:selectedDoorSides", newValue);
-                this.selectedValues = this.getSideDoorReplacementOptions();
+                this.selectedValues = this.getSideDoorReplacementOptions(newValue, this.selectedValues.selectedDriverSideReplaceOptions, this.selectedValues.selectedPassengerSideReplaceOptions);
             }
         },
-        selectedDriverSideReplacOptionsValues: {
+        selectedDriverSideReplaceOptionsValues: {
             get: function() {
-                return this.selectedDriverSideReplacOptions;
+                return this.selectedValues.selectedDriverSideReplaceOptions;
             },
             set: function(newValue) {
-                this.$emit("update:selectedDriverSideReplacOptions", newValue);
-                this.selectedValues = this.getSideDoorReplacementOptions();
+                this.selectedValues = this.getSideDoorReplacementOptions(this.selectedValues.selectedDoorSides, newValue, this.selectedValues.selectedPassengerSideReplaceOptions);
             }
         },
         selectedPassengerSideReplaceOptionsValues: {
             get: function() {
-                return this.selectedPassengerSideReplaceOptions;
+                return this.selectedValues.selectedPassengerSideReplaceOptions;
             },
             set: function(newValue) {
-                this.$emit("update:selectedPassengerSideReplaceOptions", newValue);
-                this.selectedValues = this.getSideDoorReplacementOptions();
+                this.selectedValues = this.getSideDoorReplacementOptions(this.selectedValues.selectedDoorSides, this.selectedValues.selectedDriverSideReplaceOptions, newValue);
             }
         },
          answersToDisplay(){
@@ -115,13 +108,6 @@ export default ({
             return Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes("PassengerSide");
         },
     },
-    mounted() {
-        if(typeof(this.selectedValues) === "object"){
-            this.selectedDoorSides = this.selectedValues.selectedDoorSides;
-            this.selectedDriverSideReplacOptions = this.selectedValues.selectedDriverSideReplacOptions;
-            this.selectedPassengerSideReplaceOptions = this.selectedValues.selectedPassengerSideReplaceOptions;
-        }
-    },
     components: {
         buttonQuestion,
         replaceOptionsQuestion,
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index edbaf3a0c..aa888e14a 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -115,7 +115,7 @@ export default {
       selectedDamageLocations: [],
       sideDoorOptionsData: {
         selectedDoorSides: [],
-        selectedDriverSideReplacOptions: [],
+        selectedDriverSideReplaceOptions: [],
         selectedPassengerSideReplaceOptions: []
       },
       selectedWindshieldOptions: [],