From 86d7760d771e5432b78200d560695e980da66be5 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Fri, 14 Apr 2023 15:57:49 -0400
Subject: [PATCH] Functionality mostly complete, need Bryan to take a stab at
 remaining styling

---
 .../service-location/service-location.vue     |  4 +-
 .../shop-list-button/shop-list-button.vue     | 60 ++++++++++---------
 .../shop-question/shop-question.vue           | 21 ++++---
 3 files changed, 44 insertions(+), 41 deletions(-)

diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index c5525ec54..422f5ba2f 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -66,7 +66,9 @@
                 modalWidgetName="MobileLocationModalWidget" />
             <shopQuestion
                 ref="shopQuestion"
-                v-show="selectedAppointmentType === 'Dropoff' || selectedAppointmentType === 'Inshop'"
+                v-show="
+                    selectedAppointmentType === 'Dropoff' || selectedAppointmentType === 'Inshop'
+                "
                 :isDropoff="isDropoff"
                 :serviceZipCode="zipCode"
                 :selectedAppointmentType="selectedAppointmentType"
diff --git a/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
index 2fa1b1392..45a18280f 100644
--- a/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
+++ b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
@@ -1,35 +1,37 @@
 <template>
-    <baseInputButton
-        v-bind="$props"
-        buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
-        v-model="selectedValue">
-        <div
-            :aria-label="buttonLabel"
-            class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
-            <div class="row-one">
-                <span class="m-0 button-label-copy" :class="textPosition">{{ buttonLabel }}</span>
-                <span class="m-0 button-label-sub-copy" :class="textPosition">{{
-                    buttonLabelSubCopy
-                }}</span>
-                <div
-                    class="availability-indicator"
-                    :class="availability === 'high' ? 'green' : 'red'">
-                    <span class="m-0 button-auxillary-copy">{{ buttonAuxillaryCopy }}</span>
+    <transition name="fade" mode="out-in">
+        <baseInputButton
+            v-bind="$props"
+            buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
+            v-model="selectedValue">
+            <div
+                :aria-label="buttonLabel"
+                class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
+                <div class="row-one">
+                    <span class="m-0 button-label-copy" :class="textPosition">{{ buttonLabel }}</span>
+                    <span class="m-0 button-label-sub-copy" :class="textPosition">{{
+                        buttonLabelSubCopy
+                    }}</span>
+                    <div
+                        class="availability-indicator"
+                        :class="availability === 'high' ? 'green' : 'red'">
+                        <span class="m-0 button-auxillary-copy">{{ buttonAuxillaryCopy }}</span>
+                    </div>
                 </div>
+                <span
+                    v-if="buttonBodyCopy"
+                    class="m-0 button-label-sub-copy small"
+                    :class="textPosition"
+                    v-html="buttonBodyCopy"></span>
+                <span v-if="screenReaderOnlyText" class="sr-only">
+                    {{ screenReaderOnlyText }}
+                </span>
+                <loader
+                    v-if="isLoaderDisplayed && selectingInitiatesLoad"
+                    :class="[this.loaderColor, this.loaderPosition]" />
             </div>
-            <span
-                v-if="buttonBodyCopy"
-                class="m-0 button-label-sub-copy small"
-                :class="textPosition"
-                v-html="buttonBodyCopy"></span>
-            <span v-if="screenReaderOnlyText" class="sr-only">
-                {{ screenReaderOnlyText }}
-            </span>
-            <loader
-                v-if="isLoaderDisplayed && selectingInitiatesLoad"
-                :class="[this.loaderColor, this.loaderPosition]" />
-        </div>
-    </baseInputButton>
+        </baseInputButton>
+    </transition>
 </template>
 
 <script>
diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue
index 26a315411..96d7debd8 100644
--- a/src/layouts/service-location/shop-question/shop-question.vue
+++ b/src/layouts/service-location/shop-question/shop-question.vue
@@ -33,7 +33,6 @@
 </template>
 
 <script>
-
 // Components
 import alert from "@/ux-components/alert/alert";
 import buttonQuestion from "@/digital-components/button-question/button-question";
@@ -142,9 +141,9 @@ export default {
             }
 
             await this.$nextTick();
-            
+
             const container = document.getElementsByClassName("page-container-grouped-styles")[0];
-            
+
             container.scrollTo({ top: container.scrollHeight, left: 0, behavior: "smooth" });
         },
     },
@@ -157,12 +156,14 @@ export default {
         selectedAppointmentType: {
             async handler() {
                 await this.$nextTick();
-                
-                const container = document.getElementsByClassName("page-container-grouped-styles")[0];
-                console.log(container.scrollHeight + 200)
-                container.scrollTo({ top: container.scrollHeight, left: 0, behavior: "smooth" });               
-            }
-        }
+
+                const container = document.getElementsByClassName(
+                    "page-container-grouped-styles"
+                )[0];
+                console.log(container.scrollHeight + 200);
+                container.scrollTo({ top: container.scrollHeight, left: 0, behavior: "smooth" });
+            },
+        },
     },
 };
 </script>
@@ -176,7 +177,6 @@ export default {
         .question-text {
             margin-top: 0.5rem !important;
         }
-
     }
 }
 
@@ -191,5 +191,4 @@ export default {
     padding-left: 1.5rem !important;
     padding-right: 0.5rem !important;
 }
-
 </style>