Merge pull request #2901 from Safelite/feature/CASH-1315-redo

Feature/cash 1315 redo

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

@@ -150,6 +150,7 @@ import {
 import {
     convertDateToDateString,
     convertDateStringToDate,
+    getTodayDateString,
 } from "@/layouts/schedule/helpers/schedule-helper";
 import { useField, ErrorMessage } from "vee-validate";
 import { deepClone } from "@/helpers/object-helper";
@@ -227,7 +228,7 @@ export default {
     },
     computed: {
         todayString() {
-            return this.todayOverrideDateString || convertDateToDateString(new Date());
+            return this.todayOverrideDateString || getTodayDateString();
         },
         todayDayIndex() {
             return convertDateStringToDate(this.todayString).getDay();
@@ -425,7 +426,7 @@ export default {
             } else if (config.todayOverrideDateString) {
                 todayDateString = config.todayOverrideDateString;
             } else {
-                todayDateString = convertDateToDateString(new Date());
+                todayDateString = getTodayDateString();
             }
             if (config.selectableDatesSetting === "past") calendarViewDirection = "past";
             if (config.selectableDatesSetting === "custom") calendarViewDirection = "future";

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

@@ -71,3 +71,11 @@ 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,6 +233,7 @@ import {
     convertDateStringToDate,
     sumDateString,
     isDropOffRouteCode,
+    getTodayDate,
 } from "@/layouts/schedule/helpers/schedule-helper";
 
 import { DAYS_OF_WEEK } from "@/digital-components/date-picker/mixins/constants";
@@ -331,12 +332,16 @@ 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(
@@ -389,6 +394,10 @@ 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,
@@ -422,7 +431,6 @@ export default {
             selectableDatesInshop: [],
             selectableDatesMobile: [],
             preSelectedDate: null,
-
             streetAddress: this.getServiceAddressFromStore(),
             apartmentNumberOrBusinessName: this.getServiceAddress2FromStore(),
             carId: this.getCarIdfromStore(),
@@ -612,7 +620,7 @@ export default {
                 this.selectedDate.includes("mobile") &&
                 !this.isMobileSelected
             ) {
-                this.getNewSelectedDate();
+                this.setSelectedDateToFirstAvailable();
             }
             return this.selectedDate && this.appointmentTypeFromAppointmentTypeQuestion;
         },
@@ -826,7 +834,7 @@ export default {
             }
         },
         isSameDay() {
-            const todaysDate = new Date().toISOString().split("T")[0];
+            const todaysDate = getTodayDate().toISOString().split("T")[0];
             return this.selectedDate === todaysDate;
         },
         isOvernightDropoff() {
@@ -1100,7 +1108,7 @@ export default {
         },
         getTimeSlotInfo() {
             // Get the current date
-            const currentDate = new Date();
+            const currentDate = getTodayDate();
 
             // Add 10 days to the current date
             currentDate.setDate(currentDate.getDate() + 10);
@@ -1179,45 +1187,23 @@ export default {
             datePickerInitialData.pricingByDayUpcharge = this.pricingByDayUpcharge;
             await this.$refs.datePicker.initializeComponent(datePickerInitialData);
             this.selectableDatesInshop =
-                datePickerInitialData.initialShopTimeSlotsResponse.inshopTimeSlotsData;
+                await datePickerInitialData.initialShopTimeSlotsResponse.inshopTimeSlotsData;
             this.selectableDatesMobile =
-                datePickerInitialData.initialShopTimeSlotsResponse.mobileTimeSlotsData;
+                await datePickerInitialData.initialShopTimeSlotsResponse.mobileTimeSlotsData;
             this.setDisplayWaitList();
 
-            if (this.preSelectedDate) this.selectedDate = this.preSelectedDate;
+            if (this.preSelectedDate) {
-
+                this.selectedDate = this.preSelectedDate;
-            if (!this.preSelectedDate) {
+            } else {
-                // if no date is preselected on load, then select the first available
+                // if no date is preselected on load, make sure there are some dates available
-                let selectedDateMobile = this.getSelectedDateForMobile();
-                let selectedDateInshop = this.getSelectedDateForInshop();
-
-                // if there is still no selected date, then load more and try again
                 if (
-                    (this.isServiceableMobile && !selectedDateMobile) ||
+                    this.selectableDatesInshop.days.length < 1 ||
-                    (this.isServiceableInshop && !selectedDateInshop) ||
+                    this.selectableDatesMobile.days.length < 1
-                    (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,
@@ -1403,7 +1389,7 @@ export default {
                 const type = store.getters.isMobileAppointment ? "mobile" : "inshop";
                 gaLabel = `${status}_${type}`;
 
-                const currentDate = new Date();
+                const currentDate = getTodayDate();
                 const dateString = this.isMobileSelected
                     ? this.selectableDatesMobile.days[0].date
                     : this.selectableDatesInshop.days[0].date;
@@ -1477,7 +1463,7 @@ export default {
             ) {
                 const [year, month, day] = dateString.split("-").map(Number);
                 const targetDate = new Date(year, month - 1, day);
-                const currentDate = new Date();
+                const currentDate = getTodayDate();
                 const futureDate = new Date(currentDate);
                 const experimentThresholdDays = experimentMixin.methods.hasSetting(
                     experimentSettings.WAITLIST_THRESHOLD_DAYS
@@ -1622,7 +1608,7 @@ export default {
                 ? AppointmentTypeStrings.DROP_OFF
                 : AppointmentTypeStrings.IN_SHOP;
         },
-        getSelectedDate() {
+        getFirstAvailableDate() {
             let dateToSelect;
             if (this.isMobileSelected) {
                 dateToSelect = returnFirstDate(this.selectableDatesMobile);
@@ -1632,16 +1618,6 @@ 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();
@@ -1740,11 +1716,11 @@ export default {
             } else {
                 this.appointmentType = null;
             }
-            this.selectedDate = this.getSelectedDate();
+            this.setSelectedDateToFirstAvailable();
             this.setDisplayWaitList();
         },
-        getNewSelectedDate() {
+        setSelectedDateToFirstAvailable() {
-            this.selectedDate = this.getSelectedDate();
+            this.selectedDate = this.getFirstAvailableDate();
         },
     },
     watch: {