Move some logic out of time-slot into schedule

Get rid of lots of watchers in time-slot

src/layouts/schedule/schedule.vue

@@ -146,7 +146,8 @@
                         :isPricingByDayExperiment="isPricingByDayExperiment" />
                     <timeSlotQuestion
                         ref="timeSlotModalQuestion"
-                        @timeSlotSelected="updateTimeSlot"
+                        v-if="showTimeSlotQuestion"
+                        @time-slot-selection-changed="updateTimeSlot"
                         cmsWidgetName="TimeSlotModalQuestion"
                         waitListLabelWidget="WaitListLabelWidget"
                         waitListQuestionWidget="WaitListQuestionWidget"
@@ -156,13 +157,12 @@
                         sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
                         overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
                         dropOffOrPickATimeQuestionCmsWidgetName="DropOffOrPickATimeQuestionWidget"
-                        :selectedDate="selectedDate"
                         :appointmentType="appointmentType"
-                        :premiumAppointmentFee="premiumAppointmentFee"
+                        :premiumAppointmentFee="mobilePremiumAppointmentFee"
                         :displayWaitList="displayWaitList"
                         :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
-                        :estimatedServiceMinutesMinimum="estimatedServiceMinutesMinimum"
+                        :isSameDay="isSameDay"
-                        :estimatedServiceMinutesMaximum="estimatedServiceMinutesMaximum"
+                        :selectedRouteCodeData="selectedRouteCodeData"
                         @waitListRequested="handleWaitListRequested" />
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
@@ -649,6 +649,11 @@ export default {
                 return this.isGlassServiceableMobile;
             }
         },
+        showTimeSlotQuestion() {
+            return (
+                this.selectedDate && this.appointmentTypeFromAppointmentTypeQuestion
+            )
+        },
         isMobileStaticRecalibrationApplicable() {
             return (
                 this.displayMSR &&
@@ -806,6 +811,18 @@ export default {
             }
             return [];
         },
+        selectedRouteCodeData() {
+            console.log('1', JSON.stringify(this.selectedTimeSlotInfo))
+            if (!this.selectedTimeSlotInfo?.timeSlot?.routeCode) {
+                console.log('returning null')
+                return null;
+            }
+            console.log('returning data');
+            return {
+                routeCode: this.selectedTimeSlotInfo.timeSlot.routeCode,
+                isPremiumAppointment: this.selectedTimeSlotInfo.isPremiumAppointment
+            }
+        },
         questionText() {
             return this.getCmsContent("YourSafeliteShopWidget", "QuestionText");
         },
@@ -1194,7 +1211,6 @@ export default {
             datePickerInitialData.pricingByDayBasePrice = this.pricingByDayBasePrice;
             datePickerInitialData.pricingByDayUpcharge = this.pricingByDayUpcharge;
             await this.$refs.datePicker.initializeComponent(datePickerInitialData);
-            await this.$refs.timeSlotModalQuestion.initializeComponent();
             this.selectableDatesInshop =
                 datePickerInitialData.initialShopTimeSlotsResponse.inshopTimeSlotsData;
             this.selectableDatesMobile =
@@ -1592,7 +1608,7 @@ export default {
             console.log("timeSlotObj", timeSlotObj);
             if (!timeSlotObj?.routeCode) {
                 this.appointmentType = AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF;
-                return {
+                this.selectedTimeSlotInfo = {
                     timeSlot: {
                         date: null,
                         routeCode: null,
@@ -1603,6 +1619,7 @@ export default {
                     },
                     isPremiumAppointment: null,
                 };
+                return;
             }
             const timeSlot = this.timeSlotsForSelectedDate?.timeSlots?.find(
                 (slot) => slot.id == timeSlotObj.routeCode
@@ -1788,6 +1805,7 @@ export default {
             }
         },
         selectedTimeSlotInfo(newValue) {
+            console.log('heard a change on selectedTimeslotInfo', newValue);
             this.updateFooterButtonText(newValue);
         },
     },

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

@@ -3,6 +3,7 @@
         <buttonQuestion
             v-if="isDropOffAppointmentAvailable"
             v-model="selectedAnswerForDropOffOrInshop"
+            @update:modelValue="dropOffSelectionChanged"
             :questionText="dropOffOrPickATimeQuestionLabelText"
             :answers="answersForDropOffQuestion"
             isRequired
@@ -22,6 +23,7 @@
         <buttonQuestion
             ref="buttonQuestion"
             v-if="shouldDisplayTimeSlotQuestion"
+            @update:modelValue="timeSlotSelectionChanged"
             buttonTypeString="timeSlotModalListButton"
             :buttonTypeObject="timeSlotModalListButton"
             class="mt-4 timeslots"
@@ -41,7 +43,7 @@
             v-if="supplementalInformationBlock"
             v-html="supplementalInformationBlock" />
         <div
-            v-if="hasWaitListExperiment && displayWaitListFeature && selectedDate"
+            v-if="hasWaitListExperiment && displayWaitListFeature"
             class="mt-5 bg-light rounded waitlist">
             <textBlock
                 cmsWidgetName="WaitListLabelWidget"
@@ -55,7 +57,7 @@
                 @click="waitListChecked" />
         </div>
         <div
-            v-if="waitListRequested && displayWaitList && selectedDate"
+            v-if="waitListRequested && displayWaitList"
             class="rounded waitlist-success"
             ref="waitlistSuccessMessage">
             <img :src="waitListSuccessImage" class="success-image" />
@@ -111,7 +113,7 @@ defineRule("time-slot-required", required(errorMessages.OPTION_REQUIRED));
 
 export default {
     name: "time-slot-question",
-    emits: ["update:modelValue", "TimeSlotSelected", "click-event"],
+    emits: ["update:modelValue", "time-slot-selection-changed",],
     props: {
         cmsWidgetName: String,
         mobileCmsWidgetName: String,
@@ -125,15 +127,15 @@ export default {
         premiumAppointmentFee: Object,
         validationRules: String,
         customComponentId: String,
-        selectedDate: String,
+        isSameDay: Boolean,
         displayWaitList: Boolean,
+        selectedRouteCodeData: Object,
     },
     data() {
         return {
-            selectedRouteCode: null,
             timeSlotModalListButton: timeSlotModalListButton,
             selectedAnswerForDropOffOrInshop: null,
-            selectedAnswerForTimeSlots: null,
+            selectedAnswerForTimeSlots: null
         };
     },
     setup(props) {
@@ -165,12 +167,28 @@ export default {
             errors,
         };
     },
+    watch: {
+        waitListRequested(newVal) {
+            if (newVal) {
+                this.$nextTick(() => {
+                    this.scrollToSuccessMessage();
+                });
+            }
+        },
+        selectedRouteCodeData(newValue) {
+            this.updateDropoffAndTimeSlotAnswersFromSelectedRouteCodeData(newValue);
+        },
+        timeSlotsForSelectedDate() {
+            this.selectedAnswerForDropOffOrInshop = null;
+            this.selectedAnswerForTimeSlots = null;
+        }
+    },
     computed: {
+
         supplementalInformationBlock() {
             let appointmentTypeCmsWidgetName;
 
             if (
-                this.selectedDate == null ||
                 this.appointmentType === AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF ||
                 this.appointmentType === AppointmentTypeStrings.IN_SHOP ||
                 this.appointmentType === AppointmentTypeStrings.DROP_OFF
@@ -192,11 +210,7 @@ export default {
                 //         );
                 // }
             } else {
-                if (!this.selectedAnswerForTimeSlots && this.selectedRouteCode) {
+                appointmentTypeCmsWidgetName = this.selectedRouteCodeData?.routeCode?.includes(
-                    // Clearing selectedRouteCode if no time slot is selected
-                    this.resetSelectedTimeSlot();
-                }
-                appointmentTypeCmsWidgetName = this.selectedRouteCode?.includes(
                     PREMIUM_TIME_SLOT_ID_FLAG
                 )
                     ? this.mobilePremiumCmsWidgetName
@@ -273,13 +287,6 @@ export default {
         //         return null;
         //     }
         // },
-        isSameDay() {
-            if (!this.timeSlotsForSelectedDate) {
-                return false;
-            }
-            const todaysDate = new Date().toISOString().split("T")[0];
-            return this.selectedDate === todaysDate;
-        },
         availableTimeSlots() {
             if (!this.timeSlotsForSelectedDate) {
                 return null;
@@ -381,16 +388,45 @@ export default {
         },
     },
     methods: {
-        initializeComponent() {
+        updateDropoffAndTimeSlotAnswersFromSelectedRouteCodeData(selectedRouteCodeData) {
-            this.setSelectedRouteCodeFromParent();
+            if (selectedRouteCodeData?.routeCode) {
+                if (isDropOffRouteCode(selectedRouteCodeData.routeCode)) {
+                    this.selectedAnswerForDropOffOrInshop = selectedRouteCodeData.routeCode;
+                } else {
+                    this.selectedAnswerForDropOffOrInshop = PICK_A_TIME_BUTTON_VALUE;
+                    this.selectedAnswerForTimeSlots = selectedRouteCodeData.routeCode;
+                }
+            } else {
+                this.selectedAnswerForDropOffOrInshop = null;
+                this.selectedAnswerForTimeSlots = null;
+            }
         },
-        async setSelectedTimeSlot() {
+        dropOffSelectionChanged(newValue) {
-            this.selectedRouteCode =
+            let newSelectedRouteCodeData = null;
-                this.selectedAnswerForTimeSlots || this.selectedAnswerForDropOffOrInshop;
+            if(newValue && newValue != PICK_A_TIME_BUTTON_VALUE) {
-            this.$emit(
+                newSelectedRouteCodeData ={
-                "TimeSlotSelected",
+                    routeCode: newValue,
-                this.getSelectedTimeSlotInfoObject(this.selectedRouteCode)
+                    isPremiumAppointment: false
-            );
+                };
+            }
+            this.selectedAnswerForTimeSlots = null;
+            this.$emit("time-slot-selection-changed", newSelectedRouteCodeData);
+        },
+        timeSlotSelectionChanged(newValue) {
+            console.log('heard time slot change', newValue);
+            if(newValue) {
+                let routeCode = newValue;
+                let isPremiumAppointment = routeCode.includes(
+                    PREMIUM_TIME_SLOT_ID_FLAG
+                );
+                if (isPremiumAppointment) {
+                    routeCode = this.removePremiumFlagFromInput(routeCode);
+                }
+                this.$emit("time-slot-selection-changed", {
+                    routeCode: routeCode,
+                    isPremiumAppointment: isPremiumAppointment
+                })
+            }
         },
         getRelevantDropOffCmsWidgetNameForSelectedTimeSlot(
             selectedRouteCode,
@@ -437,8 +473,6 @@ export default {
                 );
             }
 
-            this.resetSelectedTimeSlotIfDateChange(timeSlotsForSelectedDate);
-
             return availableTimeSlots;
         },
         getPremiumAppointmentTimeSlot(timeSlotData) {
@@ -454,27 +488,10 @@ export default {
                 },
             };
         },
-        setSelectedRouteCodeFromParent() {
-            if (!this.modelValue?.timeSlot?.routeCode) {
-                return;
-            }
-            const routeCodeFromParent = this.modelValue.timeSlot.routeCode;
-            if (this.modelValue?.isPremiumAppointment) {
-                // Mobile Only
-                this.selectedAnswerForTimeSlots = this.addPremiumFlagToInput(routeCodeFromParent);
-            } else {
-                if (isDropOffRouteCode(routeCodeFromParent)) {
-                    this.selectedAnswerForDropOffOrInshop = routeCodeFromParent;
-                } else {
-                    this.selectedAnswerForDropOffOrInshop = PICK_A_TIME_BUTTON_VALUE;
-                    this.selectedAnswerForTimeSlots = routeCodeFromParent;
-                }
-            }
-        },
         getWaitListRequestedFromStore() {
             return store.getters.order.customer?.waitListRequested;
         },
-        autoSelectTimeSlotIfOnlyOneIsAvailable() {
+        autoSelectTimeSlotIfOnlyOneIsAvailable() { // this needs to be fixed
             const numberOfOptions = this.timeSlotsForSelectedDate?.timeSlots?.length;
             if (this.appointmentType && numberOfOptions === 1) {
                 if (this.availableTimeSlots.length > 0) {
@@ -491,21 +508,6 @@ export default {
         removePremiumFlagFromInput(routeCode) {
             return routeCode.replace(PREMIUM_TIME_SLOT_ID_FLAG, "");
         },
-        getSelectedTimeSlotInfoObject(routeCode) {
-            // Pick a time button is not a time slot
-            if(routeCode === PICK_A_TIME_BUTTON_VALUE)
-                return null;
-
-            const routeCodeIncludesPremium = routeCode?.includes(PREMIUM_TIME_SLOT_ID_FLAG);
-            if (routeCodeIncludesPremium) {
-                routeCode = this.removePremiumFlagFromInput(routeCode);
-            }
-
-            return {
-                routeCode: routeCode,
-                isPremiumAppointment: routeCodeIncludesPremium
-            }
-        },
         waitListChecked(event) {
             this.$emit("waitListRequested", event.target.checked);
         },
@@ -515,59 +517,6 @@ export default {
                 successMessageElement.scrollIntoView({ behavior: "smooth" });
             }
         },
-        resetSelectedTimeSlotIfDateChange(timeSlotsForSelectedDate) {
-            if (this.selectedRouteCode) {
-                const selectedRouteCodeString = this.selectedRouteCode.replace(
-                    PREMIUM_TIME_SLOT_ID_FLAG,
-                    ""
-                );
-                const matchingTimeSlot = timeSlotsForSelectedDate.find((slot) => {
-                    return slot.id === selectedRouteCodeString;
-                });
-                if (!matchingTimeSlot) {
-                    this.resetSelectedTimeSlot();
-                }
-            }
-        },
-        resetSelectedTimeSlot() {
-            this.selectedRouteCode = null;
-        },
-    },
-    watch: {
-        waitListRequested(newVal) {
-            if (newVal) {
-                this.$nextTick(() => {
-                    this.scrollToSuccessMessage();
-                });
-            }
-        },
-        selectedDate: {
-            handler() {
-                this.resetSelectedTimeSlot();
-                this.selectedAnswerForDropOffOrInshop = null;
-                this.selectedAnswerForTimeSlots = null;
-                this.autoSelectTimeSlotIfOnlyOneIsAvailable();
-            },
-        },
-        selectedRouteCode(newValue) {
-            if (newValue) {
-                this.setSelectedTimeSlot();
-            }
-        },
-        selectedAnswerForDropOffOrInshop(newValue) {
-            if (newValue == PICK_A_TIME_BUTTON_VALUE) {
-                this.selectedRouteCode = null;
-                this.setSelectedTimeSlot();
-            } else {
-                this.selectedAnswerForTimeSlots = null;
-                this.selectedRouteCode = newValue;
-            }
-        },
-        selectedAnswerForTimeSlots(newValue) {
-            if (newValue) {
-                this.selectedRouteCode = newValue;
-            }
-        },
     },
     components: {
         textBlock,