Able to move time-slot-question out of date-picker

still lots of work to do
comments are in commented out timeslotquestion component in date-picker for help seeing what I did

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

@@ -140,9 +140,9 @@
                 @click="showAnotherMonth">
                 View more dates
             </button>
-            <timeSlotQuestion
+            <!--<timeSlotQuestion
                 ref="timeSlotModalQuestion"
-                v-model="selectedTimeSlotInfo"
+                v-model="selectedTimeSlotInfo" // Removed, some watcher logic for duration was in here, need ot recreate
                 cmsWidgetName="TimeSlotModalQuestion"
                 waitListLabelWidget="WaitListLabelWidget"
                 waitListQuestionWidget="WaitListQuestionWidget"
@@ -152,15 +152,14 @@
                 sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
                 overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
                 dropOffOrPickATimeQuestionCmsWidgetName="DropOffOrPickATimeQuestionWidget"
-                :selectedDate="selectedDate"
+                :selectedDate="selectedDate" // used in date-picker
-                :appointmentType="appointmentType"
+                :appointmentType="appointmentType" // used in date-picker for duration
-                :premiumAppointmentFee="premiumAppointmentFee"
+                :premiumAppointmentFee="premiumAppointmentFee" // Removed from date-picker
-                :displayWaitList="displayWaitList"
+                :displayWaitList="displayWaitList" // Removed from date-picker
-                :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
+                :timeSlotsForSelectedDate="timeSlotsForSelectedDate" // Removed from date-picker (but it had a null check for is-same-day)
-                :estimatedServiceMinutesMinimum="estimatedServiceMinutesMinimum"
+                :estimatedServiceMinutesMinimum="estimatedServiceMinutesMinimum" // used in date-picker for duration
-                :estimatedServiceMinutesMaximum="estimatedServiceMinutesMaximum"
+                :estimatedServiceMinutesMaximum="estimatedServiceMinutesMaximum" // used in date-picker for duration
-                @waitListRequested="handleWaitListRequested"
+                @waitListRequested="handleWaitListRequested" // removed, it's a pass-through /> -->
-                @time-slot-modal-closed="timeSlotModalClosed" />
         </fieldset>
     </div>
 </template>
@@ -206,7 +205,6 @@ export default {
             months: null,
             disableViewMoreDatesButton: false,
             hideSomeDaysForInitialView: null,
-            selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
             selectableDatesInshop: [], // NOTE: this and the mobile version below use monthNum (1-based), NOT monthIndex (0-based)
             selectableDatesMobile: [],
             durationTextBlockCopyForInshopOrDropoff: null,
@@ -243,12 +241,9 @@ export default {
         pricingByDayBasePrice: Number,
         pricingByDayUpcharge: Number,
         isPricingByDayExperiment: Boolean,
-        timeSlotsForSelectedDate: Object,
         appointmentType: String,
-        premiumAppointmentFee: Object,
         estimatedServiceMinutesMinimum: Number,
         estimatedServiceMinutesMaximum: Number,
-        displayWaitList: Boolean,
         isMobileSelected: Boolean,
     },
     setup(props) {
@@ -373,9 +368,6 @@ export default {
             return null;
         },
         isSameDay() {
-            if (!this.timeSlotsForSelectedDate) {
-                return false;
-            }
             const todaysDate = new Date().toISOString().split("T")[0];
             return this.selectedDate === todaysDate;
         },
@@ -383,7 +375,6 @@ export default {
     methods: {
         async initializeComponent(initialData) {
             await this.setCalendarData(initialData);
-            this.$refs.timeSlotModalQuestion.initializeComponent();
         },
         fireDateSelectedEvent(event, date) {
             // Ignore if arrow key selected radioButton
@@ -950,30 +941,9 @@ export default {
             };
             window.requestAnimationFrame(step);
         },
-        getSelectedTimeSlotInfo() {
-            const supportingItems = this.getSupportingItems();
-
-            var isPremiumAppointment = false;
-            if (supportingItems) {
-                isPremiumAppointment =
-                    !!supportingItems.filter(
-                        (lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE
-                    ).length > 0;
-            }
-
-            const selectedTimeSlotInfo = {
-                timeSlot: store.getters.order.schedule,
-                isPremiumAppointment: isPremiumAppointment,
-            };
-
-            return selectedTimeSlotInfo;
-        },
         getSupportingItems() {
             return store.getters.lineItems.supportingItems;
         },
-        handleWaitListRequested(value) {
-            this.$emit("waitListRequested", value);
-        },
         getDurationTextBlockCopyForInshopOrDropoff(selectedRouteCode) {
             if (selectedRouteCode?.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
                 return this.overnightDropoffDurationText;
@@ -999,17 +969,10 @@ export default {
                 this.scrollToElement("date-of-month-error");
             }
         },
-        selectedTimeSlotInfo(newValue) {
-            const routeCode = newValue?.timeSlot?.routeCode;
-            this.durationTextBlockCopyForInshopOrDropoff =
-                this.getDurationTextBlockCopyForInshopOrDropoff(routeCode);
-            this.$emit("TimeSlotSelected", newValue); // needed to update footer button text on Schedule page and to save to Store correctly
-        },
     },
     components: {
         loader,
         ErrorMessage,
-        timeSlotQuestion,
         textBlock,
         funnelSubHeader,
     },

src/layouts/schedule/schedule.vue

@@ -133,13 +133,28 @@
                         :pricingByDayUpcharge="pricingByDayUpcharge"
                         :showPricingByDay="showPricingByDay"
                         :isPricingByDayExperiment="isPricingByDayExperiment"
-                        :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
                         :appointmentType="appointmentType"
-                        :premiumAppointmentFee="mobilePremiumAppointmentFee"
                         :estimatedServiceMinutesMinimum="getServiceMinutesMin"
-                        :estimatedServiceMinutesMaximum="getServiceMinutesMax"
+                        :estimatedServiceMinutesMaximum="getServiceMinutesMax" />
+                    <timeSlotQuestion
+                        ref="timeSlotModalQuestion"
                         @timeSlotSelected="updateTimeSlot"
+                        cmsWidgetName="TimeSlotModalQuestion"
+                        waitListLabelWidget="WaitListLabelWidget"
+                        waitListQuestionWidget="WaitListQuestionWidget"
+                        mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
+                        mobileCmsWidgetName="MobileTimeSlotModal"
+                        dropoffCmsWidgetName="DropOffTimeSlotModal"
+                        sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
+                        overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
+                        dropOffOrPickATimeQuestionCmsWidgetName="DropOffOrPickATimeQuestionWidget"
+                        :selectedDate="selectedDate"
+                        :appointmentType="appointmentType"
+                        :premiumAppointmentFee="premiumAppointmentFee"
                         :displayWaitList="displayWaitList"
+                        :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
+                        :estimatedServiceMinutesMinimum="estimatedServiceMinutesMinimum"
+                        :estimatedServiceMinutesMaximum="estimatedServiceMinutesMaximum"
                         @waitListRequested="handleWaitListRequested" />
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
@@ -158,10 +173,10 @@
 import alert from "@/ux-components/alert/alert";
 import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
 import appointmentTypeQuestion from "@/layouts/service-location/appointment-type-question/appointment-type-question";
-import shopQuestion from "@/layouts/service-location/shop-question/shop-question";
 import shopQuestionPopup from "@/layouts/service-location/shop-question/shop-question-popup";
 import buttonQuestion from "@/digital-components/button-question/button-question.vue";
 import shopListButton from "@/layouts/service-location/shop-question/shop-list-button/shop-list-button";
+import timeSlotQuestion from "@/layouts/schedule/time-slot-question/time-slot-question.vue";
 
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
@@ -1161,6 +1176,7 @@ 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 =
@@ -1736,6 +1752,7 @@ export default {
         datePicker,
         locationAlerts,
         textBlock,
+        timeSlotQuestion,
 
         alert,
         serviceZipModalQuestion,

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

@@ -408,6 +408,10 @@ export default {
                 "update:modelValue",
                 this.getSelectedTimeSlotInfoObject(this.selectedRouteCode)
             );
+            this.$emit(
+                "TimeSlotSelected",
+                this.getSelectedTimeSlotInfoObject(this.selectedRouteCode)
+            );
         },
         getRelevantDropOffCmsWidgetNameForSelectedTimeSlot(
             selectedRouteCode,