jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CASH-376 removing transition prevents rendering CTA on top of modal

Browse source
This commit is contained in:
Matt Caimi 2025-04-24 14:12:03 -04:00
parent 323dbe8f77
commit 0e3bdd8b60
1 changed files with 64 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

130
src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
View file

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