Merge pull request #2993 from Safelite/feature/CASH-1790-for-develop

Reapply PR for CASH-1790, 1 of 4

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) {
@@ -1130,29 +1132,6 @@ export default {
                 );
             }
         },
-        getTimeSlotInfo() {
-            // Get the current date
-            const currentDate = getTodayDate();
-
-            // Add 10 days to the current date
-            currentDate.setDate(currentDate.getDate() + 10);
-
-            // Format the date as yyyy-mm-dd
-            const year = currentDate.getFullYear();
-            const month = String(currentDate.getMonth() + 1).padStart(2, "0");
-            const day = String(currentDate.getDate()).padStart(2, "0");
-
-            const formattedDate = `${year}-${month}-${day}`;
-
-            return {
-                date: formattedDate,
-                endTime: "12:00",
-                jobMaxMinutes: "180",
-                jobMinMinutes: "120",
-                routeCode: "3357I-03357-M-I*20988*AM",
-                startTime: "08:00",
-            };
-        },
         onShopSelected(shopQuestionPopUpData) {
             this.resetWaitlist();
             this.preSelectedDate = null;
@@ -1241,6 +1220,8 @@ export default {
             }
 
             this.isShowMobileFirstAppt && this.hideLoadingModal();
+            await this.$nextTick();
+            this.isDatePickerDoneInitializing = true;
         },
         getScheduleApiResponse,
         getServiceZipCtuCodeFromStore() {
@@ -1876,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

@@ -1,6 +1,7 @@
 <template>
     <div class="time-slots-question">
         <buttonQuestion
+            ref="chooseDropOffOrInshop"
             v-if="isDropOffAppointmentAvailable"
             v-model="selectedAnswerForDropOffOrInshop"
             @update:modelValue="dropOffSelectionChanged"
@@ -23,8 +24,9 @@
             </div>
         </buttonQuestion>
         <buttonQuestion
-            ref="buttonQuestion"
+            ref="chooseTimeSlot"
-            v-if="shouldDisplayTimeSlotQuestion"
+            v-if="displayTimeSlotQuestion"
+            v-model="selectedAnswerForTimeSlots"
             @update:modelValue="timeSlotSelectionChanged"
             buttonTypeString="timeSlotModalListButton"
             :buttonTypeObject="timeSlotModalListButton"
@@ -34,10 +36,12 @@
                 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" />
@@ -133,6 +137,7 @@ export default {
         isSameDay: Boolean,
         displayWaitList: Boolean,
         selectedRouteCodeData: Object,
+        isDatePickerDoneInitializing: Boolean,
     },
     data() {
         return {
@@ -186,6 +191,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();
@@ -389,7 +397,7 @@ export default {
                 this.answersForDropOffQuestion[0].value !== PICK_A_TIME_BUTTON_VALUE
             );
         },
-        shouldDisplayTimeSlotQuestion() {
+        displayTimeSlotQuestion() {
             return (
                 this.selectedAnswerForDropOffOrInshop == PICK_A_TIME_BUTTON_VALUE ||
                 !this.isDropOffAppointmentAvailable