CASH-1790: add check to keep watches from activating before initial load is complete to fix bug

(cherry picked from commit 9e9f6257a6)

src/layouts/schedule/schedule.vue

@@ -167,6 +167,7 @@
                         :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
                         :isSameDay="isSameDay"
                         :selectedRouteCodeData="selectedRouteCodeData"
+                        :isDatePickerDoneInitializing="isDatePickerDoneInitializing"
                         @waitListRequested="handleWaitListRequested" />
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
@@ -474,6 +475,7 @@ export default {
                 experimentSettings.SHOW_MOBILE_FIRST_APPT,
                 "true"
             ),
+            isDatePickerDoneInitializing: false,
         };
     },
     async beforeRouteEnter(to, from, next) {
@@ -1218,6 +1220,8 @@ export default {
             }
 
             this.isShowMobileFirstAppt && this.hideLoadingModal();
+            await this.$nextTick();
+            this.isDatePickerDoneInitializing = true;
         },
         getScheduleApiResponse,
         getServiceZipCtuCodeFromStore() {
@@ -1853,6 +1857,10 @@ export default {
             },
         },
         selectedDate(newValue, oldValue) {
+            if (!this.isDatePickerDoneInitializing) {
+                return;
+            } // needed otherwise it nulls selectedTimeSlotInfo too early and prevents a previously selected time slot from auto-selecting
+
             // Clear time slot selection if date selected changes
             const selectedDate = this.getSelectedDateFromStore();
             if (oldValue && this.appointmentType === AppointmentTypeStrings.MOBILE) {

src/layouts/schedule/time-slot-question/time-slot-question.vue

@@ -36,10 +36,9 @@
                 isInshopOrDropOffAppointment ? 'is-inshop-or-drop-off-appointment' : '',
             ]"
             :answers="availableTimeSlots"
-            :lazyLoad="{ isLazyLoad: !isMobileAppointment, amountToLoad: 10 }"
+            :lazyLoad="{ isLazyLoad: !isMobileAppointment && !selectedAnswerForTimeSlots, amountToLoad: 10 }"
             groupName="chooseTimeSlot"
             textPosition="text-center"
-            v-model="selectedAnswerForTimeSlots"
             questionText="Available times:"
             isRequired
             validationRules="time-slot-required" />
@@ -135,6 +134,7 @@ export default {
         isSameDay: Boolean,
         displayWaitList: Boolean,
         selectedRouteCodeData: Object,
+        isDatePickerDoneInitializing: Boolean,
     },    
     data() {
         return {
@@ -188,6 +188,9 @@ export default {
             this.updateDropoffAndTimeSlotAnswersFromSelectedRouteCodeData(newValue);
         },
         timeSlotsForSelectedDate() {
+            if (!this.isDatePickerDoneInitializing) {
+                return;
+            }   // needed otherwise it nulls these too early and prevents a previously selected time slot from auto-selecting
             this.selectedAnswerForDropOffOrInshop = null;
             this.selectedAnswerForTimeSlots = null;
             this.autoSelectTimeSlotIfOnlyOneIsAvailable();
@@ -391,7 +394,7 @@ export default {
                 this.answersForDropOffQuestion[0].value !== PICK_A_TIME_BUTTON_VALUE
             );
         },
-        shouldDisplayTimeSlotQuestion() {
+        displayTimeSlotQuestion() {
             return (
                 this.selectedAnswerForDropOffOrInshop == PICK_A_TIME_BUTTON_VALUE ||
                 !this.isDropOffAppointmentAvailable