From 54533921035ca7a1fe8c8a9d7917f8e8b698921f Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Tue, 7 Mar 2023 14:09:54 -0500
Subject: [PATCH] Added transition element to mobile-location-modal-questions
 component

---
 .../mobile-location-modal-questions.vue       | 88 ++++++++++---------
 1 file changed, 46 insertions(+), 42 deletions(-)

diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
index 0aa64594d..4308d2b04 100644
--- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
+++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
@@ -1,47 +1,51 @@
 <template>
-    <div class="text-center">
-        <label
-            for="mobileLocationLinkPromptId"
-            :aria-label="mobileLocationLinkPromptText"
-            class="form-label fw-bold w-100 ps-4 pe-4 pt-4"
-            v-html="mobileLocationLinkPromptText"></label>
-        <div class="update-mobile-location-text-link">
-            <textLink
-                ref="mobileLocationLink"
-                id="mobileLocationLinkPromptId"
-                linkType="text"
-                :text="mobileLocationLinkText"
-                href="#!"
-                @click-event="openModal"
-                aria-label="Modal window" />
+    <transition name="fade" mode="out-in">
+        <div class="mobile-location-questions">
+            <div class="text-center">
+                <label
+                    for="mobileLocationLinkPromptId"
+                    :aria-label="mobileLocationLinkPromptText"
+                    class="form-label fw-bold w-100 ps-4 pe-4 pt-4"
+                    v-html="mobileLocationLinkPromptText"></label>
+                <div class="update-mobile-location-text-link">
+                    <textLink
+                        ref="mobileLocationLink"
+                        id="mobileLocationLinkPromptId"
+                        linkType="text"
+                        :text="mobileLocationLinkText"
+                        href="#!"
+                        @click-event="openModal"
+                        aria-label="Modal window" />
+                </div>
+                <textBlock
+                    :customText="mobileFeeText"
+                    cmsWidgetName="MobileFeeDisclaimerWidget"
+                    typeStyle="caption" />
+            </div>
+            <modal
+                :ref="modalName"
+                :headerText="modalHeaderText"
+                :footerButtonText="modalFooterText"
+                @footer-button-event="setMobileLocation">
+                <addressQuestions
+                    ref="addressQuestions"
+                    v-model="internalModel.addressQuestions"
+                    captureApartmentNumberOrBusinessName="true" />
+                <vehicleProtectedQuestion
+                    ref="vehicleProtectedQuestion"
+                    v-model="internalModel.isVehicleProtected"
+                    cmsWidgetName="VehicleProtectedQuestionWidget" />
+                <textBlock cmsWidgetName="WorkspaceRequirementsWidget" typeStyle="caption" />
+                <alert
+                    ref="alertInvalidZip"
+                    v-if="displayInvalidZipAlert"
+                    class="my-4"
+                    cmsWidgetName="AlertInvalidZipWidget"
+                    alertClass="alert-danger"
+                    v-bind:isDismissible="false" />
+            </modal>
         </div>
-        <textBlock
-            :customText="mobileFeeText"
-            cmsWidgetName="MobileFeeDisclaimerWidget"
-            typeStyle="caption" />
-    </div>
-    <modal
-        :ref="modalName"
-        :headerText="modalHeaderText"
-        :footerButtonText="modalFooterText"
-        @footer-button-event="setMobileLocation">
-        <addressQuestions
-            ref="addressQuestions"
-            v-model="internalModel.addressQuestions"
-            captureApartmentNumberOrBusinessName="true" />
-        <vehicleProtectedQuestion
-            ref="vehicleProtectedQuestion"
-            v-model="internalModel.isVehicleProtected"
-            cmsWidgetName="VehicleProtectedQuestionWidget" />
-        <textBlock cmsWidgetName="WorkspaceRequirementsWidget" typeStyle="caption" />
-        <alert
-            ref="alertInvalidZip"
-            v-if="displayInvalidZipAlert"
-            class="my-4"
-            cmsWidgetName="AlertInvalidZipWidget"
-            alertClass="alert-danger"
-            v-bind:isDismissible="false" />
-    </modal>
+    </transition>
 </template>
 
 <script>