From 2e26ddba39043378f114782690b5150093ea3f5c Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 22 Feb 2022 15:06:35 -0500
Subject: [PATCH] Creating fade animation

---
 src/App.vue                                   |  1 +
 .../replace-options-question.vue              | 12 ------
 .../side-door-options/side-door-options.vue   | 21 ++++++----
 src/layouts/vehicle-damage/vehicle-damage.vue |  2 +-
 .../windshield-chip-count-question.vue        |  7 ++--
 .../windshield-damage-type-question.vue       |  7 ++--
 .../windshield-options/windshield-options.vue | 38 +++++++++----------
 src/styles/common-animations.scss             |  9 +++++
 8 files changed, 48 insertions(+), 49 deletions(-)
 create mode 100644 src/styles/common-animations.scss

diff --git a/src/App.vue b/src/App.vue
index 76a01d29c..603bd2cb3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,4 +7,5 @@
   @import "@/styles/common-styles.scss";
   @import "@/styles/common-typography-styles.scss";
   @import "@/styles/common-error-styles.scss";
+  @import "@/styles/common-animations.scss";
 </style>
diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
index 081df53a8..79827cfad 100644
--- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
@@ -87,15 +87,3 @@ export default ({
     }
 })
 </script>
-
-<style lang="scss" scoped>
-    .fade-enter-active,
-    .fade-leave-active {
-        transition: opacity 0.3s ease;
-    }
-
-    .fade-enter-from,
-    .fade-leave-to {
-        opacity: 0;
-    }
-</style>
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 63aedf580..1372f23f6 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
@@ -1,13 +1,17 @@
 <template>
     <div class="side-door-options">
-        <buttonQuestion
-            :questionText="questionText"
-            isMultiSelect
-            :answers="answersToDisplay"
-            :groupName="groupName"
-            buttonType="listCard"
-            v-model="selectedDoorSidesValues"
-        />
+        <transition name="fade" mode="out-in">
+            <div class="side-doors" v-if="selectedDamageLocations.includes('SideDoor')" aria-live="polite">
+                <buttonQuestion
+                    :questionText="questionText"
+                    isMultiSelect
+                    :answers="answersToDisplay"
+                    :groupName="groupName"
+                    buttonType="listCard"
+                    v-model="selectedDoorSidesValues"
+                />
+            </div>
+        </transition>
         
         <replaceOptionsQuestion ref="driverSideOptions" :isAvailable="isDriverSideReplaceOptionsQuestionAvailable" groupName="driverSideOptions" filterByVehicleCategory v-model="selectedDriverSideReplacOptionsValues" />
 
@@ -35,6 +39,7 @@ export default ({
     props: {
         groupName: String,
         modelValue: Array,
+        selectedDamageLocations: Array,
     },
     methods: {
         initializeComponent(cmsContent, driverSideReplaceOptions, passengerSideReplaceOptions, driverSideOptions, passengerSideOptions){
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index a7d3e4f33..bce74b92f 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -4,11 +4,11 @@
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
         <funnelSubHeader ref="funnelSubHeader" />
         <damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
-        <sideDoorOptions ref="sideDoorOptions" isAvailable groupName="SideDoorSideQuestion" v-model="sideDoorOptionsData" />
         <windshieldOptions ref="windshieldOptions" 
           v-model="selectedWindshieldOptions" 
           :selectedDamageLocations="selectedDamageLocations"
         />
+        <sideDoorOptions ref="sideDoorOptions" groupName="SideDoorSideQuestion" v-model="sideDoorOptionsData" :selectedDamageLocations="selectedDamageLocations" />
         <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
     </div>
 </template>
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
index 41a3b872b..347ee2fdf 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
@@ -1,8 +1,7 @@
 <template>
-    <transition name="fade">
-        <div class="windshield-chip-count-question">
+    <transition name="fade" mode="out-in">
+        <div class="windshield-chip-count-question" v-if="isAvailable" aria-live="polite">
             <buttonQuestion
-                v-if="isAvailable"
                 :questionText="questionText"
                 :answers="answersFromCms"
                 :groupName="groupName"
@@ -49,4 +48,4 @@ export default ({
         buttonQuestion,
     }
 })
-</script>
+</script>
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
index 80656e0a4..8031db546 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
@@ -1,8 +1,7 @@
 <template>
-    <transition name="fade">
-        <div class="windshield-damage-type-question">
+    <transition name="fade" mode="out-in">
+        <div class="windshield-damage-type-question" v-if="isAvailable" aria-live="polite">
             <buttonQuestion
-                v-if="isAvailable"
                 :questionText="questionText"
                 :answers="answersFromCms"
                 :groupName="groupName"
@@ -68,4 +67,4 @@ export default ({
         buttonQuestion,
     }
 })
-</script>
+</script>
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index e407b33a9..694103d8a 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -1,24 +1,22 @@
 <template>
-    <transition name="fade">
-        <div class="windshield-options" aria-live="polite">
-            <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" 
-                :isAvailable=isWindshieldDamageLocation
-                :suppressError="suppressError"
-                groupName="WindshieldDamageTypeQuestion"
-                v-model="selectedWindshieldDamageTypeValues" 
-            />
-            <windshieldChipCountQuestion ref="windshieldChipCountQuestion" 
-                :isAvailable=isRepairOptionSelected
-                groupName="WindshieldChipCountQuestion"
-                v-model="selectedWindshieldChipCountValues" 
-            />
-            <replaceOptionsQuestion ref="replaceOptionsQuestion"
-                :isAvailable=isReplaceOptionSelected
-                groupName="WindshieldReplaceOptions"
-                v-model="selectedWindshieldReplaceOptionsValues"
-            />
-        </div>
-    </transition>
+    <div class="windshield-options">
+        <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" 
+            :isAvailable=isWindshieldDamageLocation
+            :suppressError="suppressError"
+            groupName="WindshieldDamageTypeQuestion"
+            v-model="selectedWindshieldDamageTypeValues" 
+        />
+        <windshieldChipCountQuestion ref="windshieldChipCountQuestion" 
+            :isAvailable=isRepairOptionSelected
+            groupName="WindshieldChipCountQuestion"
+            v-model="selectedWindshieldChipCountValues" 
+        />
+        <replaceOptionsQuestion ref="replaceOptionsQuestion"
+            :isAvailable=isReplaceOptionSelected
+            groupName="WindshieldReplaceOptions"
+            v-model="selectedWindshieldReplaceOptionsValues"
+        />
+    </div>
 </template>
 
 <script>
diff --git a/src/styles/common-animations.scss b/src/styles/common-animations.scss
new file mode 100644
index 000000000..91eea7db6
--- /dev/null
+++ b/src/styles/common-animations.scss
@@ -0,0 +1,9 @@
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.3s 2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
\ No newline at end of file