Merge pull request #2900 from Safelite/revert-prs-from-CASH-1315

Revert prs from cash 1315

src/digital-components/date-picker/date-picker.vue

@@ -150,7 +150,6 @@ import {
 import {
     convertDateToDateString,
     convertDateStringToDate,
-    getTodayDateString,
 } from "@/layouts/schedule/helpers/schedule-helper";
 import { useField, ErrorMessage } from "vee-validate";
 import { deepClone } from "@/helpers/object-helper";
@@ -228,7 +227,7 @@ export default {
     },
     computed: {
         todayString() {
-            return this.todayOverrideDateString || getTodayDateString();
+            return this.todayOverrideDateString || convertDateToDateString(new Date());
         },
         todayDayIndex() {
             return convertDateStringToDate(this.todayString).getDay();
@@ -426,7 +425,7 @@ export default {
             } else if (config.todayOverrideDateString) {
                 todayDateString = config.todayOverrideDateString;
             } else {
-                todayDateString = getTodayDateString();
+                todayDateString = convertDateToDateString(new Date());
             }
             if (config.selectableDatesSetting === "past") calendarViewDirection = "past";
             if (config.selectableDatesSetting === "custom") calendarViewDirection = "future";
@@ -542,8 +541,6 @@ export default {
             }
             this.months = months;
             this.isLoading = false;
-            // if done loading dates, then set to first available date
-            if (!this.selectedDate) this.selectedDate = this.firstAvailableSelectableDate;
 
             if (config.preSelectedDate) {
                 this.$nextTick(() => {
@@ -777,9 +774,6 @@ export default {
                 );
 
                 this.isLoading = false;
-                // if done loading dates, then set to first available date
-                if (!this.selectedDate) this.selectedDate = this.firstAvailableSelectableDate;
-
                 this.hideSomeDaysForInitialView = false; // if hid days on initial partial view, this will reveal those days
                 monthToShow.monthClass = monthToShow.monthClass.replace(" month-hidden", "");
                 this.scrollToElement(monthToShow.monthString);
@@ -851,6 +845,12 @@ export default {
         },
     },
     watch: {
+        isLoading(newValue) {
+            // if done loading dates, then set to first available date
+            if (newValue === false && this.firstAvailableSelectableDate) {
+                this.selectedDate = this.firstAvailableSelectableDate;
+            }
+        },
         modelValue(newValue) {
             this.resetField({
                 value: newValue,

src/layouts/schedule/helpers/schedule-helper.js

@@ -71,11 +71,3 @@ export function isDropOffRouteCode(routeCode) {
         routeCode.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)
     );
 }
-
-export function getTodayDate(routeCode) {
-    return new Date();
-}
-
-export function getTodayDateString(routeCode) {
-    return convertDateToDateString(getTodayDate());
-}

src/layouts/schedule/schedule.vue

@@ -233,7 +233,6 @@ import {
     convertDateStringToDate,
     sumDateString,
     isDropOffRouteCode,
-    getTodayDate,
 } from "@/layouts/schedule/helpers/schedule-helper";
 
 import { DAYS_OF_WEEK } from "@/digital-components/date-picker/mixins/constants";
@@ -332,16 +331,12 @@ const getScheduleApiResponse = async ({
     const mobileTimeSlotsData = {
         days: [],
     };
+
     function compareDayStrings(a, b) {
         if (a.date < b.date) return -1;
         if (a.date > b.date) return 1;
         return 0;
     }
-    function removePastDates(array, todaysDate) {
-        return array.filter(function (a) {
-            return !(a.date < todaysDate);
-        });
-    }
 
     const makeParallelCalls = async () => {
         await Promise.all(
@@ -394,10 +389,6 @@ const getScheduleApiResponse = async ({
         inshopTimeSlotsData.days.sort(compareDayStrings);
         mobileTimeSlotsData.days.sort(compareDayStrings);
 
-        const todaysDate = getTodayDate().toISOString().split("T")[0];
-        inshopTimeSlotsData.days = removePastDates(inshopTimeSlotsData.days, todaysDate);
-        mobileTimeSlotsData.days = removePastDates(mobileTimeSlotsData.days, todaysDate);
-
         return {
             inshopTimeSlotsData: inshopTimeSlotsData,
             mobileTimeSlotsData: mobileTimeSlotsData,
@@ -431,6 +422,7 @@ export default {
             selectableDatesInshop: [],
             selectableDatesMobile: [],
             preSelectedDate: null,
+
             streetAddress: this.getServiceAddressFromStore(),
             apartmentNumberOrBusinessName: this.getServiceAddress2FromStore(),
             carId: this.getCarIdfromStore(),
@@ -620,7 +612,7 @@ export default {
                 this.selectedDate.includes("mobile") &&
                 !this.isMobileSelected
             ) {
-                this.setSelectedDateToFirstAvailable();
+                this.getNewSelectedDate();
             }
             return this.selectedDate && this.appointmentTypeFromAppointmentTypeQuestion;
         },
@@ -834,7 +826,7 @@ export default {
             }
         },
         isSameDay() {
-            const todaysDate = getTodayDate().toISOString().split("T")[0];
+            const todaysDate = new Date().toISOString().split("T")[0];
             return this.selectedDate === todaysDate;
         },
         isOvernightDropoff() {
@@ -1108,7 +1100,7 @@ export default {
         },
         getTimeSlotInfo() {
             // Get the current date
-            const currentDate = getTodayDate();
+            const currentDate = new Date();
 
             // Add 10 days to the current date
             currentDate.setDate(currentDate.getDate() + 10);
@@ -1187,23 +1179,45 @@ export default {
             datePickerInitialData.pricingByDayUpcharge = this.pricingByDayUpcharge;
             await this.$refs.datePicker.initializeComponent(datePickerInitialData);
             this.selectableDatesInshop =
-                await datePickerInitialData.initialShopTimeSlotsResponse.inshopTimeSlotsData;
+                datePickerInitialData.initialShopTimeSlotsResponse.inshopTimeSlotsData;
             this.selectableDatesMobile =
-                await datePickerInitialData.initialShopTimeSlotsResponse.mobileTimeSlotsData;
+                datePickerInitialData.initialShopTimeSlotsResponse.mobileTimeSlotsData;
             this.setDisplayWaitList();
 
-            if (this.preSelectedDate) {
+            if (this.preSelectedDate) this.selectedDate = this.preSelectedDate;
-                this.selectedDate = this.preSelectedDate;
+
-            } else {
+            if (!this.preSelectedDate) {
-                // if no date is preselected on load, make sure there are some dates available
+                // if no date is preselected on load, then select the first available
+                let selectedDateMobile = this.getSelectedDateForMobile();
+                let selectedDateInshop = this.getSelectedDateForInshop();
+
+                // if there is still no selected date, then load more and try again
                 if (
-                    this.selectableDatesInshop.days.length < 1 ||
+                    (this.isServiceableMobile && !selectedDateMobile) ||
-                    this.selectableDatesMobile.days.length < 1
+                    (this.isServiceableInshop && !selectedDateInshop) ||
+                    (this.isServiceableDropoff && !selectedDateInshop)
                 ) {
                     await this.$nextTick();
                     await this.$refs.datePicker.showAnotherMonth();
+
+                    // update all dates
+
+                    // > CHLOE HERD 7/22 -- CASH-1207
+                    // > Do not update the available dates again here;
+                    // > they have already been updated by `showAnotherMonth`.
+                    // > Doing so will likely add or remove dates,
+                    // > desyncing the schedule page and the date-picker.
+
                     this.setDisplayWaitList();
                 }
+
+                await this.$nextTick();
+
+                if (this.isMobileSelected) {
+                    this.selectedDate = this.getSelectedDateForMobile();
+                } else {
+                    this.selectedDate = this.getSelectedDateForInshop();
+                }
             }
         },
         getScheduleApiResponse,
@@ -1389,7 +1403,7 @@ export default {
                 const type = store.getters.isMobileAppointment ? "mobile" : "inshop";
                 gaLabel = `${status}_${type}`;
 
-                const currentDate = getTodayDate();
+                const currentDate = new Date();
                 const dateString = this.isMobileSelected
                     ? this.selectableDatesMobile.days[0].date
                     : this.selectableDatesInshop.days[0].date;
@@ -1463,7 +1477,7 @@ export default {
             ) {
                 const [year, month, day] = dateString.split("-").map(Number);
                 const targetDate = new Date(year, month - 1, day);
-                const currentDate = getTodayDate();
+                const currentDate = new Date();
                 const futureDate = new Date(currentDate);
                 const experimentThresholdDays = experimentMixin.methods.hasSetting(
                     experimentSettings.WAITLIST_THRESHOLD_DAYS
@@ -1608,7 +1622,7 @@ export default {
                 ? AppointmentTypeStrings.DROP_OFF
                 : AppointmentTypeStrings.IN_SHOP;
         },
-        getFirstAvailableDate() {
+        getSelectedDate() {
             let dateToSelect;
             if (this.isMobileSelected) {
                 dateToSelect = returnFirstDate(this.selectableDatesMobile);
@@ -1618,6 +1632,16 @@ export default {
             if (!dateToSelect) return null;
             return this.isMobileSelected ? dateToSelect + "-mobile" : dateToSelect;
         },
+        getSelectedDateForMobile() {
+            let dateToSelect = returnFirstDate(this.selectableDatesMobile);
+            if (!dateToSelect) return null;
+            return dateToSelect + "-mobile";
+        },
+        getSelectedDateForInshop() {
+            let dateToSelect = returnFirstDate(this.selectableDatesInshop);
+            if (!dateToSelect) return null;
+            return dateToSelect;
+        },
         resetSelectedProvider() {
             this.selectedProvider = new Provider();
             this.updateSelectedProvider();
@@ -1716,11 +1740,11 @@ export default {
             } else {
                 this.appointmentType = null;
             }
-            this.setSelectedDateToFirstAvailable();
+            this.selectedDate = this.getSelectedDate();
             this.setDisplayWaitList();
         },
-        setSelectedDateToFirstAvailable() {
+        getNewSelectedDate() {
-            this.selectedDate = this.getFirstAvailableDate();
+            this.selectedDate = this.getSelectedDate();
         },
     },
     watch: {