From 59a8202ad2116af404cd24ae2eff85ec1f232d3d Mon Sep 17 00:00:00 2001
From: Matt Caimi <Matt.Caimi@safelite.com>
Date: Wed, 30 Apr 2025 11:34:32 -0400
Subject: [PATCH] Revert "CASH-376 removing transition prevents rendering CTA
 on top of modal"

This reverts commit 6fa7dcb364bd4979d50c1ff4be57a55586c4808a.
---
 .../mobile-location-modal-questions.vue       | 130 +++++++++---------
 1 file changed, 66 insertions(+), 64 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 5b0a79255..96977dd2b 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,70 +1,72 @@
 <template>
-    <div class="mobile-location-questions">
-        <div class="text-center" :id="componentId">
-            <label
-                for="mobileLocationLinkPromptId"
-                :aria-label="mobileLocationLinkPromptText"
-                class="form-label fw-bold w-100 ps-4 pe-4 pt-4 text-black"
-                v-html="mobileLocationLinkPromptText"></label>
-            <div class="update-mobile-location-text-link">
-                <textLink
-                    ref="mobileLocationLink"
-                    id="mobileLocationLinkPromptId"
-                    linkType="text"
-                    :text="mobileLocationLinkText"
-                    href="#!"
-                    @click-event="openModal" />
+    <transition name="fade" mode="out-in">
+        <div class="mobile-location-questions">
+            <div class="text-center" :id="componentId">
+                <label
+                    for="mobileLocationLinkPromptId"
+                    :aria-label="mobileLocationLinkPromptText"
+                    class="form-label fw-bold w-100 ps-4 pe-4 pt-4 text-black"
+                    v-html="mobileLocationLinkPromptText"></label>
+                <div class="update-mobile-location-text-link">
+                    <textLink
+                        ref="mobileLocationLink"
+                        id="mobileLocationLinkPromptId"
+                        linkType="text"
+                        :text="mobileLocationLinkText"
+                        href="#!"
+                        @click-event="openModal" />
+                </div>
+                <div v-show="errorMessage" class="row my-1 form-test-error">
+                    <span
+                        class="d-inline-flex small mt-0 center-error-message"
+                        aria-atomic="true"
+                        aria-live="polite">
+                        {{ errorMessage }}
+                    </span>
+                </div>
+                <textBlock
+                    v-if="mobileFeeApplies"
+                    :customText="mobileFeeText"
+                    cmsWidgetName="MobileFeeDisclaimerWidget"
+                    typeStyle="caption" />
             </div>
-            <div v-show="errorMessage" class="row my-1 form-test-error">
-                <span
-                    class="d-inline-flex small mt-0 center-error-message"
-                    aria-atomic="true"
-                    aria-live="polite">
-                    {{ errorMessage }}
-                </span>
-            </div>
-            <textBlock
-                v-if="mobileFeeApplies"
-                :customText="mobileFeeText"
-                cmsWidgetName="MobileFeeDisclaimerWidget"
-                typeStyle="caption" />
+            <modal
+                :ref="modalName"
+                :headerText="modalHeaderText"
+                :footerButtonText="modalFooterText"
+                :onModalOpenedCallback="onModalOpened"
+                :onModalClosedCallback="onModalClosed"
+                @isModalOpened="setModalStatus"
+                @footer-button-event="setMobileLocation">
+                <template v-if="isModalOpened">
+                    <addressQuestions
+                        ref="addressQuestions"
+                        v-model="internalModel.addressQuestions"
+                        captureApartmentNumberOrBusinessName="true"
+                        preserveCityAndStateOnReset="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" />
+                    <alert
+                        ref="alertMismatchStateAndZip"
+                        v-if="displayMismatchStateAndZipAlert"
+                        class="my-4"
+                        cmsWidgetName="AlertMismatchStateAndZipWidget"
+                        alertClass="alert-danger"
+                        v-bind:isDismissible="false" />
+                </template>
+            </modal>
         </div>
-        <modal
-            :ref="modalName"
-            :headerText="modalHeaderText"
-            :footerButtonText="modalFooterText"
-            :onModalOpenedCallback="onModalOpened"
-            :onModalClosedCallback="onModalClosed"
-            @isModalOpened="setModalStatus"
-            @footer-button-event="setMobileLocation">
-            <template v-if="isModalOpened">
-                <addressQuestions
-                    ref="addressQuestions"
-                    v-model="internalModel.addressQuestions"
-                    captureApartmentNumberOrBusinessName="true"
-                    preserveCityAndStateOnReset="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" />
-                <alert
-                    ref="alertMismatchStateAndZip"
-                    v-if="displayMismatchStateAndZipAlert"
-                    class="my-4"
-                    cmsWidgetName="AlertMismatchStateAndZipWidget"
-                    alertClass="alert-danger"
-                    v-bind:isDismissible="false" />
-            </template>
-        </modal>
-    </div>
+    </transition>
 </template>
 
 <script>