CSR-1790-ref remove watch on selectedDate and use direct events instead

(cherry picked from commit 2af1b71a52)

src/layouts/schedule/schedule.vue

@@ -1592,27 +1592,46 @@ export default {
             this.waitListRequested = value;
         },
         handleDateSelected(date) {
-            // do something to mark this as upcharge day or not...
+            const previousDate = this.selectedDate;
-            if (date.isPricingByDayUpchargeDay) {
+            
-                this.includePricingByDayUpcharge = true;
+            // check if date actually changed
-            } else {
+            if (previousDate !== date.dateString) {
-                this.includePricingByDayUpcharge = false;
+                this.handleDateChanged({
+                    newDate: date.dateString,
+                    oldDate: previousDate
+                });
             }
+
+            // TODO: REMOVE AS PART OF CASH-1634
+            // // do something to mark this as upcharge day or not...
+            // if (date.isPricingByDayUpchargeDay) {
+            //     this.includePricingByDayUpcharge = true;
+            // } else {
+            //     this.includePricingByDayUpcharge = false;
+            // }
+        },
+        handleDateChanged(newDate) {
+            // Clear time slot selection when date changes
+            this.selectedTimeSlotInfo = this.getEmptyTimeSlot();
+            this.updateFooterButtonText(this.selectedTimeSlotInfo);
+        },
+        getEmptyTimeSlot() {
+            return {
+                timeSlot: {
+                    date: null,
+                    routeCode: null,
+                    startTime: null,
+                    endTime: null,
+                    jobMaxMinutes: null,
+                    jobMinMinutes: null,
+                },
+                isPremiumAppointment: null,
+            };
         },
         updateTimeSlot(timeSlotObj) { 
             if (!timeSlotObj?.routeCode) {
                 this.appointmentType = AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF;
-                this.selectedTimeSlotInfo = {
+                this.selectedTimeSlotInfo = this.getEmptyTimeSlot();
-                    timeSlot: {
-                        date: null,
-                        routeCode: null,
-                        startTime: null,
-                        endTime: null,
-                        jobMaxMinutes: null,
-                        jobMinMinutes: null,
-                    },
-                    isPremiumAppointment: null,
-                };
                 return;
             }
             const timeSlot = this.timeSlotsForSelectedDate?.timeSlots?.find(
@@ -1709,6 +1728,9 @@ export default {
         },
         handleAppointmentTypeChange(newAppointmentType) {
             this.updateFooterButtonText();
+            // if time appointment type changes, clear any selected time slot
+            this.selectedTimeSlotInfo = this.getEmptyTimeSlot();
+
             if (newAppointmentType === AppointmentTypeStrings.MOBILE) {
                 // Remember last shop selected if previous selection was inshop/dropoff
                 if (
@@ -1717,17 +1739,6 @@ export default {
                         AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF) &&
                     this.selectedProvider
                 ) {
-                    this.selectedTimeSlotInfo = {
-                        timeSlot: {
-                            date: null,
-                            routeCode: null,
-                            startTime: null,
-                            endTime: null,
-                            jobMaxMinutes: null,
-                            jobMinMinutes: null,
-                        },
-                        isPremiumAppointment: null,
-                    };
                     this.lastSelectedInshopOrDropoffProvider = this.selectedProvider;
                 }
                 this.appointmentType = AppointmentTypeStrings.MOBILE;
@@ -1875,32 +1886,6 @@ export default {
                 this.handleAppointmentTypeChange(newValue);
             },
         },
-        selectedDate(newValue, oldValue) {
-            // Clear time slot selection if date selected changes
-            const selectedDate = this.getSelectedDateFromStore();
-            if (oldValue && this.appointmentType === AppointmentTypeStrings.MOBILE) {
-                oldValue = `${oldValue}-mobile`;
-            }
-            const hasValueChanged = newValue !== oldValue;
-            const isDateDifferent = (newValue || oldValue) !== selectedDate;
-
-            if (hasValueChanged && isDateDifferent && !this.selectedMobileFirstAppointment) {
-                this.selectedTimeSlotInfo = {
-                    timeSlot: {
-                        date: null,
-                        routeCode: null,
-                        startTime: null,
-                        endTime: null,
-                        jobMaxMinutes: null,
-                        jobMinMinutes: null,
-                    },
-                    isPremiumAppointment: null,
-                };
-            }
-        },
-        selectedTimeSlotInfo(newValue) {
-            this.updateFooterButtonText(newValue);
-        },
     },
     components: {
         funnelHeader,