CASH-1535: Mobile First Modal updates

src/layouts/schedule/mobile-first-modal/mobile-first-modal.vue

@@ -7,7 +7,8 @@
             :onModalClosedCallback="onModalClosed"
             :footerButtonText="modalFooterText"
             :isFooterButtonPrimary="true"
-            @footer-button-event="confirmAppointment">
+            @footer-button-event="confirmAppointment"
+            @isModalOpened="setIsModalOpen">
             <p class="modal-body-inner" v-html="modalBodyText"></p>
             <template v-slot:modal-header-slot>
                 <span>{{ modalSubHeaderText }}</span>
@@ -48,6 +49,7 @@ export default {
     },
     data() {
         return {
+            isModalOpen: false,
             selectedAppontment: {
                 estimatedServiceMinutes: {
                     minimum: null,
@@ -81,6 +83,12 @@ export default {
         setSelectedAppointment(appointment) {
             this.selectedAppontment = appointment;
         },
+        getIsModalOpen() {
+            return this.isModalOpen;
+        },
+        setIsModalOpen(isOpen) {
+            this.isModalOpen = isOpen;
+        },
     },
     computed: {
         modalName() {

src/layouts/schedule/schedule.vue

@@ -2,7 +2,13 @@
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
         <loadingModal ref="loadingModal" />
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-        <div class="container page-container-grouped-styles">
+        <mobileFirstModal
+            modalWidgetName="MobileFirstModalWidget"
+            ref="mobileFirstModal"
+            @confirm-appointment="updateTimeSlotandNavigateForward" />
+        <div
+            class="container page-container-grouped-styles"
+            :class="[isMobileFirstModalOpen ? 'hidden-background' : '']">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <mobileFeeWaiverAlert
@@ -32,10 +38,6 @@
             </div>
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                    <mobileFirstModal
-                        modalWidgetName="MobileFirstModalWidget"
-                        ref="mobileFirstModal"
-                        @confirm-appointment="updateTimeSlotandNavigateForward" />
                     <alert
                         ref="alertMobileOnly"
                         class="mt-5 mb-5"
@@ -855,6 +857,9 @@ export default {
                 )
             );
         },
+        isMobileFirstModalOpen() {
+            return this.isMobileSelected ? this.$refs.mobileFirstModal?.getIsModalOpen() : false;
+        },
     },
     methods: {
         splitCopyOnCMSPlaceHolder,
@@ -1788,30 +1793,27 @@ export default {
                             "schedule",
                             false
                         );
+                    }
 
-                        if (isShowMobileFirstAppt) {
+                    if (isShowMobileFirstAppt) {
-                            if (
+                        if (firstMobilePMDate && numberOfDaysToFirstMobilePMDate <= pmMobileDays) {
-                                firstMobilePMDate &&
+                            preSelectedMobileAppointment = firstMobilePMAppt;
-                                numberOfDaysToFirstMobilePMDate <= pmMobileDays
+                        } else if (
-                            ) {
+                            firstMobilePMDate &&
-                                preSelectedMobileAppointment = firstMobilePMAppt;
+                            numberOfDaysToFirstMobilePMDate >= noPMMobileDays
-                            } else if (
+                        ) {
-                                firstMobilePMDate &&
+                            let firstMobileAMAppt = this.getFirstAvailableMobileApptByTOD("AM");
-                                numberOfDaysToFirstMobilePMDate >= noPMMobileDays
+                            preSelectedMobileAppointment = firstMobileAMAppt
-                            ) {
+                                ? firstMobileAMAppt
-                                let firstMobileAMAppt = this.getFirstAvailableMobileApptByTOD("AM");
+                                : null;
-                                preSelectedMobileAppointment = firstMobileAMAppt
+                            !preSelectedMobileAppointment &&
-                                    ? firstMobileAMAppt
+                                (preSelectedMobileAppointment = firstMobilePMAppt);
-                                    : null;
-                                !preSelectedMobileAppointment &&
-                                    (preSelectedMobileAppointment = firstMobilePMAppt);
-                            }
-
-                            this.$refs.mobileFirstModal.setSelectedAppointment(
-                                preSelectedMobileAppointment
-                            );
-                            this.$refs.mobileFirstModal.openModal();
                         }
+
+                        this.$refs.mobileFirstModal.setSelectedAppointment(
+                            preSelectedMobileAppointment
+                        );
+                        this.$refs.mobileFirstModal.openModal();
                     }
                 }
             }
@@ -1914,6 +1916,9 @@ export default {
             margin-bottom: 0.25rem;
         }
     }
+    &.hidden-background {
+        display: none;
+    }
 }
 .alert.alert-warning {
     .alert-heading {