@wix/headless-bookings 0.0.16 → 0.0.18

package/cjs/dist/react/time-slot-list/TimeSlotList.d.ts

@@ -7,14 +7,21 @@ import { ListVariant } from '@wix/headless-components/react';
 import { AsChildChildren } from '@wix/headless-utils/react';
 import type { TimeSlotListServiceConfig } from '../../services/time-slot-list/time-slot-list.def.js';
 export type { StartDateProps as TimeSlotStartDateProps, EndDateProps as TimeSlotEndDateProps, DurationProps as TimeSlotDurationProps, SelectProps as TimeSlotSelectProps, LocationsProps as TimeSlotLocationsProps, LocationRepeaterProps as TimeSlotLocationRepeaterProps, LocationNameProps as TimeSlotLocationNameProps, SelectLocationProps as TimeSlotSelectLocationProps, StaffMembersProps as TimeSlotStaffMembersProps, StaffMemberRepeaterProps as TimeSlotStaffMemberRepeaterProps, StaffMemberNameProps as TimeSlotStaffMemberNameProps, SelectStaffMemberProps as TimeSlotSelectStaffMemberProps, } from './TimeSlot.js';
+/**
+ * Render props for TimeSlotList.Timezone component
+ */
+export interface TimezoneRenderProps {
+    /** Raw IANA timezone string (e.g., "America/New_York") */
+    timezone: string | undefined;
+    /** User-friendly display name (e.g., "Eastern Standard Time") */
+    displayName: string;
+}
 /**
  * Props for TimeSlotList.Timezone component
  */
 export interface TimezoneProps {
     asChild?: boolean;
-    children?: AsChildChildren<{
-        timezone: string | undefined;
-    }>;
+    children?: AsChildChildren<TimezoneRenderProps>;
     className?: string;
 }
 /**
@@ -23,19 +30,14 @@ export interface TimezoneProps {
  * @component
  * @example
  * ```tsx
- * // Default usage
+ * // Default usage - shows display name
  * <TimeSlotList.Timezone className="text-sm text-gray-600" />
  *
- * // asChild with primitive
- * <TimeSlotList.Timezone asChild>
- *   <span className="font-medium" />
- * </TimeSlotList.Timezone>
- *
- * // asChild with render function
+ * // asChild with render function for custom formatting
  * <TimeSlotList.Timezone asChild>
- *   {({ timezone }) => (
+ *   {({ timezone, displayName }) => (
  *     <span className="text-sm">
- *       Timezone: {timezone || 'Not set'}
+ *       {displayName}  // "Eastern Standard Time"
  *     </span>
  *   )}
  * </TimeSlotList.Timezone>
@@ -153,6 +155,47 @@ export declare const LoadMore: React.ForwardRefExoticComponent<LoadMoreProps & R
 export declare const Actions: {
     LoadMore: React.ForwardRefExoticComponent<LoadMoreProps & React.RefAttributes<HTMLButtonElement>>;
 };
+/**
+ * Props for DateRange.Input component
+ */
+export interface DateRangeInputProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Children for custom rendering */
+    children?: AsChildChildren<{
+        startDate: Date;
+        endDate: Date;
+        onChange: (start: Date, end: Date) => void;
+    }>;
+    /** CSS classes to apply to the container */
+    className?: string;
+}
+/**
+ * Date range input for setting the start and end date filter.
+ * Uses the core DateRange component to access service data.
+ * Both dates are set together and trigger a single fetch.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlotList.DateRange.Input asChild>
+ *   {({ startDate, endDate, onChange }) => (
+ *     <MyDateRangePicker
+ *       start={startDate}
+ *       end={endDate}
+ *       onRangeChange={(start, end) => onChange(start, end)}
+ *     />
+ *   )}
+ * </TimeSlotList.DateRange.Input>
+ * ```
+ */
+export declare const DateRangeInput: React.ForwardRefExoticComponent<DateRangeInputProps & React.RefAttributes<HTMLElement>>;
+/**
+ * DateRange namespace for TimeSlotList date range filter
+ */
+export declare const DateRange: {
+    Input: React.ForwardRefExoticComponent<DateRangeInputProps & React.RefAttributes<HTMLElement>>;
+};
 /**
  * TimeSlot namespace containing components for displaying individual time slot data.
  * These components must be used within TimeSlotList.TimeSlotRepeater.

package/cjs/dist/react/time-slot-list/TimeSlotList.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * TimeSlotList - High-level component for displaying time slot list information
  * Provides components for displaying timezone and time slot data
@@ -8,7 +8,7 @@ import { GenericList } from '@wix/headless-components/react';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import * as CoreTimeSlotList from '../core/time-slot-list/TimeSlotList.js';
 import { TimeSlotProvider, Info as CoreTimeSlotInfo, } from '../core/time-slot-list/TimeSlot.js';
-import { StartDate, EndDate, Duration, Actions as TimeSlotActions, Locations, LocationRepeater, Location, StaffMembers, StaffMemberRepeater, StaffMember, } from './TimeSlot.js';
+import { StartDate as TimeSlotStartDate, EndDate as TimeSlotEndDate, Duration, Actions as TimeSlotActions, Locations, LocationRepeater, Location, StaffMembers, StaffMemberRepeater, StaffMember, } from './TimeSlot.js';
 /**
  * TimeSlot with required id field for GenericList
  */
@@ -19,6 +19,7 @@ var TestIds;
     TestIds["timeSlotListTimeSlot"] = "time-slot-list-time-slot";
     TestIds["timeSlotListTimezone"] = "time-slot-list-timezone";
     TestIds["timeSlotListLoadMore"] = "time-slot-list-load-more";
+    TestIds["timeSlotListDateRangeInput"] = "time-slot-list-date-range-input";
 })(TestIds || (TestIds = {}));
 /**
  * Displays the current timezone with customizable rendering.
@@ -26,19 +27,14 @@ var TestIds;
  * @component
  * @example
  * ```tsx
- * // Default usage
+ * // Default usage - shows display name
  * <TimeSlotList.Timezone className="text-sm text-gray-600" />
  *
- * // asChild with primitive
+ * // asChild with render function for custom formatting
  * <TimeSlotList.Timezone asChild>
- *   <span className="font-medium" />
- * </TimeSlotList.Timezone>
- *
- * // asChild with render function
- * <TimeSlotList.Timezone asChild>
- *   {({ timezone }) => (
+ *   {({ timezone, displayName }) => (
  *     <span className="text-sm">
- *       Timezone: {timezone || 'Not set'}
+ *       {displayName}  // "Eastern Standard Time"
  *     </span>
  *   )}
  * </TimeSlotList.Timezone>
@@ -46,7 +42,7 @@ var TestIds;
  */
 export const Timezone = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CoreTimeSlotList.Timezone, { children: ({ timezone }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotListTimezone, customElement: children, customElementProps: { timezone }, children: _jsx("span", { children: timezone }) })) }));
+    return (_jsx(CoreTimeSlotList.Timezone, { children: ({ timezone, displayName }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotListTimezone, customElement: children, customElementProps: { timezone, displayName }, children: _jsx("span", { children: displayName }) })) }));
 });
 Timezone.displayName = 'TimeSlotList.Timezone';
 /**
@@ -81,7 +77,7 @@ Root.displayName = 'TimeSlotList.Root';
  */
 const RootContent = React.forwardRef((props, ref) => {
     const { children, className, variant } = props;
-    return (_jsx(CoreTimeSlotList.ListData, { children: ({ timeSlots, hasMore, isLoading, loadMore }) => (_jsx(GenericList.Root, { items: timeSlots, loadMore: loadMore, hasMore: hasMore, isLoading: isLoading, className: className, ref: ref, "data-testid": TestIds.timeSlotListRoot, variant: variant, children: children })) }));
+    return (_jsx(CoreTimeSlotList.ListData, { children: ({ timeSlots, hasMore, isLoading, error, loadMore }) => (_jsx(GenericList.Root, { items: timeSlots, loadMore: loadMore, hasMore: hasMore, isLoading: isLoading, error: error, className: className, ref: ref, "data-testid": TestIds.timeSlotListRoot, variant: variant, children: children })) }));
 });
 RootContent.displayName = 'TimeSlotList.RootContent';
 /**
@@ -107,8 +103,8 @@ TimeSlots.displayName = 'TimeSlotList.TimeSlots';
  * Internal component that wraps each time slot item with context provider.
  * This is separate to allow using the service hook within the repeater.
  */
-const TimeSlotItemWrapper = ({ slot, children, }) => {
-    return (_jsx(TimeSlotProvider, { slot: slot, children: _jsx(CoreTimeSlotInfo, { children: ({ bookable, isSelected }) => (_jsx("div", { "data-testid": TestIds.timeSlotListTimeSlot, "data-slot-start": slot.localStartDate, "data-slot-id": slot.id, "data-bookable": bookable, "data-selected": isSelected, children: children })) }) }));
+const TimeSlotItemWrapper = ({ timeSlot, children, }) => {
+    return (_jsx(TimeSlotProvider, { timeSlot: timeSlot, children: _jsx(CoreTimeSlotInfo, { children: ({ bookable, isSelected }) => (_jsx("div", { "data-testid": TestIds.timeSlotListTimeSlot, "data-slot-start": timeSlot.localStartDate, "data-slot-id": timeSlot.id, "data-bookable": bookable, "data-selected": isSelected, children: children })) }) }));
 };
 /**
  * Repeater component that renders each time slot.
@@ -127,7 +123,7 @@ const TimeSlotItemWrapper = ({ slot, children, }) => {
  */
 export const TimeSlotRepeater = React.forwardRef((props, ref) => {
     const { children } = props;
-    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item: slot, children: itemChildren }) => (_jsx(TimeSlotItemWrapper, { slot: slot, children: itemChildren }, slot.id)), children: children }));
+    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item: timeSlot, children: itemChildren }) => (_jsx(TimeSlotItemWrapper, { timeSlot: timeSlot, children: itemChildren }, timeSlot.id)), children: children }));
 });
 TimeSlotRepeater.displayName = 'TimeSlotList.TimeSlotRepeater';
 /**
@@ -153,6 +149,40 @@ LoadMore.displayName = 'TimeSlotList.Actions.LoadMore';
 export const Actions = {
     LoadMore,
 };
+/**
+ * Date range input for setting the start and end date filter.
+ * Uses the core DateRange component to access service data.
+ * Both dates are set together and trigger a single fetch.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlotList.DateRange.Input asChild>
+ *   {({ startDate, endDate, onChange }) => (
+ *     <MyDateRangePicker
+ *       start={startDate}
+ *       end={endDate}
+ *       onRangeChange={(start, end) => onChange(start, end)}
+ *     />
+ *   )}
+ * </TimeSlotList.DateRange.Input>
+ * ```
+ */
+export const DateRangeInput = React.forwardRef((props, ref) => {
+    const { asChild, children, className, ...otherProps } = props;
+    return (_jsx(CoreTimeSlotList.DateRange, { children: ({ startDate, endDate, setDateRange }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotListDateRangeInput, customElement: children, customElementProps: {
+                startDate,
+                endDate,
+                onChange: setDateRange,
+            }, ...otherProps, children: _jsxs("div", { children: [startDate.toLocaleDateString(), " - ", endDate.toLocaleDateString()] }) })) }));
+});
+DateRangeInput.displayName = 'TimeSlotList.DateRange.Input';
+/**
+ * DateRange namespace for TimeSlotList date range filter
+ */
+export const DateRange = {
+    Input: DateRangeInput,
+};
 // ============================================================================
 // TimeSlot Entity Components (re-exported)
 // ============================================================================
@@ -186,8 +216,8 @@ export const Actions = {
  * ```
  */
 export const TimeSlot = {
-    StartDate,
-    EndDate,
+    StartDate: TimeSlotStartDate,
+    EndDate: TimeSlotEndDate,
     Duration,
     Actions: TimeSlotActions,
     Locations,

package/cjs/dist/services/index.d.ts

@@ -4,5 +4,5 @@
  */
 export { ServiceService, ServiceServiceDefinition, type ServiceServiceAPI, type ServiceServiceConfig, type ServiceActions, type ServicePaymentData, loadServiceServiceInitialData, type SuccessServiceServiceConfigResult, type NotFoundServiceServiceConfigResult, } from './service/service.js';
 export { BookingService, BookingServiceDefinition, type BookingServiceConfig, type Location, type BookingServiceActions, } from './booking/booking.js';
-export { TimeSlotListService, TimeSlotListServiceDefinition, ViewMode, loadTimeSlotListConfig, type TimeSlotListServiceAPI, type TimeSlotListServiceActions, type TimeSlotListServiceConfig, type SlotSelection, type LoadTimeSlotListConfigOptions, type LoadTimeSlotListConfigResult, } from './time-slot-list/index.js';
-export { ServiceListService, ServiceListServiceDefinition, type ServiceListServiceAPI, type ServiceListServiceConfig, type ServiceListActions, type QueryOptions, loadServiceListServiceInitialData, type SuccessServiceListServiceConfigResult, type ErrorServiceListServiceConfigResult, } from './service-list/service-list.js';
+export { TimeSlotListService, TimeSlotListServiceDefinition, ViewMode, loadTimeSlotListConfig, type TimeSlotListServiceAPI, type TimeSlotListServiceActions, type TimeSlotListServiceConfig, type SlotSelection, type TimeSlot, type LoadTimeSlotListConfigOptions, type LoadTimeSlotListConfigResult, } from './time-slot-list/index.js';
+export { ServiceListService, ServiceListServiceDefinition, type ServiceListServiceAPI, type ServiceListServiceConfig, type ServiceListFilters, type ServiceListActions, type QueryOptions, loadServiceListServiceInitialData, type SuccessServiceListServiceConfigResult, type ErrorServiceListServiceConfigResult, } from './service-list/service-list.js';

package/cjs/dist/services/time-slot-list/index.d.ts

@@ -2,5 +2,5 @@
  * TimeSlotList Service
  * Main export file for time slot list service
  */
-export { TimeSlotListServiceDefinition, ViewMode, type TimeSlot, type TimeSlotListServiceAPI, type TimeSlotListServiceActions, type TimeSlotListServiceConfig, type SlotSelection, } from './time-slot-list.def.js';
+export { TimeSlotListServiceDefinition, ViewMode, type TimeSlot, type TimeSlotListServiceAPI, type TimeSlotListServiceActions, type TimeSlotListServiceConfig, type TimeSlotsFilters, type SlotSelection, } from './time-slot-list.def.js';
 export { TimeSlotListService, loadTimeSlotListConfig, type LoadTimeSlotListConfigOptions, type LoadTimeSlotListConfigResult, } from './time-slot-list.js';

package/cjs/dist/services/time-slot-list/time-slot-list.d.ts

@@ -3,7 +3,7 @@
  * Manages time slot fetching, selection, and state
  */
 import type { Service } from '@wix/auto_sdk_bookings_services';
-import { type TimeSlotListServiceConfig, ViewMode } from './time-slot-list.def.js';
+import { type TimeSlotListServiceConfig, type TimeSlotsFilters } from './time-slot-list.def.js';
 export declare const TimeSlotListService: import("@wix/services-definitions").ServiceFactory<string & {
     __api: import("./time-slot-list.def.js").TimeSlotListServiceAPI;
     __config: {};
@@ -21,8 +21,8 @@ export interface LoadTimeSlotListConfigOptions {
     endDate?: Date;
     /** Timezone for formatting (defaults to UTC) */
     timezone?: string;
-    /** View mode (defaults to CLASSIC) */
-    viewMode?: ViewMode;
+    /** Filters for narrowing down time slots */
+    filters?: TimeSlotsFilters;
 }
 /**
  * Result type for SSR loader - either success with config or error

package/cjs/dist/services/time-slot-list/time-slot-list.def.d.ts

@@ -3,7 +3,7 @@
  * Defines interfaces and service contract for time slot management
  */
 import type { Signal } from '@wix/services-definitions/core-services/signals';
-import type { TimeSlot as ApiTimeSlot } from '@wix/auto_sdk_bookings_availability-time-slots';
+import type { TimeSlot as ApiTimeSlot, Location } from '@wix/auto_sdk_bookings_availability-time-slots';
 import type { Service } from '@wix/auto_sdk_bookings_services';
 export declare enum ViewMode {
     CLASSIC = "classic",
@@ -42,6 +42,26 @@ export interface SlotSelection {
     locationId: string | null;
     staffMemberId: string | null;
 }
+/**
+ * Filters for narrowing down available time slots
+ * Matches Wix Bookings API filter parameters
+ */
+export interface TimeSlotsFilters {
+    /** Filter by specific locations */
+    locations?: Location[];
+    /** Filter by specific staff member IDs */
+    staffMemberIds?: string[];
+    /** Maximum slots to return per day (useful for calendar views) */
+    slotsPerDay?: number;
+    /** Filter by bookable status. If undefined, returns both bookable and non-bookable */
+    bookable?: boolean;
+    /** Filter by booking policy violations */
+    bookingPolicyViolations?: {
+        tooEarlyToBook?: boolean;
+        tooLateToBook?: boolean;
+        bookOnlineDisabled?: boolean;
+    };
+}
 export interface TimeSlotListServiceConfig {
     /** Services to fetch time slots for */
     services?: Service[];
@@ -53,8 +73,8 @@ export interface TimeSlotListServiceConfig {
     endDate?: Date;
     /** Timezone for formatting */
     timezone?: string;
-    /** View mode */
-    viewMode?: ViewMode;
+    /** Filters for narrowing down time slots */
+    filters?: TimeSlotsFilters;
 }
 export interface TimeSlotListServiceActions {
     selectSlot: (slot: TimeSlot) => void;
@@ -71,7 +91,6 @@ export interface TimeSlotListServiceAPI {
     isLoading: Signal<boolean>;
     error: Signal<string | null>;
     hasMore: Signal<boolean>;
-    viewMode: Signal<ViewMode>;
     startDate: Signal<Date>;
     endDate: Signal<Date>;
     timezone: Signal<string | undefined>;

package/cjs/dist/services/time-slot-list/time-slot-list.js

@@ -68,7 +68,8 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
     const isLoadingSignal = signalsService.signal(false);
     const errorSignal = signalsService.signal(null);
     const hasMoreSignal = signalsService.signal(false);
-    const viewModeSignal = signalsService.signal(config.viewMode || ViewMode.CLASSIC);
+    // Internal only - viewMode is auto-detected based on service types
+    const viewModeSignal = signalsService.signal(ViewMode.CLASSIC);
     const startDateSignal = signalsService.signal(config.startDate || currentDate);
     const endDateSignal = signalsService.signal(config.endDate || getDefaultEndDate());
     const timezoneSignal = signalsService.signal(config.timezone ?? getClientTimezone());
@@ -81,12 +82,35 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
             return config.services;
         return bookingService.bookingItems.get().map((s) => s.service);
     };
+    /**
+     * Helper: Get filters from config or BookingService
+     */
+    const getFilters = () => {
+        // Get BookingService selections (these take priority)
+        const location = bookingService.location.get();
+        const selections = bookingService.bookingItems.get();
+        const selectedStaffMemberIds = selections
+            .map(({ resources }) => resources.map((r) => r._id))
+            .flat();
+        const selectedLocation = location ? { _id: location.id } : null;
+        // Merge config filters with BookingService selections (selections win)
+        return {
+            ...config.filters,
+            locations: selectedLocation
+                ? [selectedLocation]
+                : config.filters?.locations,
+            staffMemberIds: selectedStaffMemberIds.length
+                ? selectedStaffMemberIds
+                : config.filters?.staffMemberIds,
+        };
+    };
     /**
      * Fetch time slots from API
      * Called on initialization or when filters change
      */
     const fetchTimeSlots = async () => {
         const selectedServices = getServices();
+        const filters = getFilters();
         isLoadingSignal.set(true);
         errorSignal.set(null);
         cursorSignal.set(undefined);
@@ -97,6 +121,7 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
                 toLocalDate: toLocalDateString(endDateSignal.get()),
                 timeZone: timezoneSignal.get(),
                 viewMode: viewModeSignal.get(),
+                ...filters,
             });
             timeSlotsSignal.set(response.timeSlots);
             const nextCursor = response.cursorPagingMetadata?.cursors?.next ?? undefined;
@@ -279,6 +304,7 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         const selectedServices = getServices();
         if (selectedServices.length === 0)
             return;
+        const filters = getFilters();
         isLoadingSignal.set(true);
         try {
             const response = await fetchAvailability({
@@ -288,6 +314,7 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
                 timeZone: timezoneSignal.get(),
                 cursorPaging: { cursor },
                 viewMode: viewModeSignal.get(),
+                ...filters,
             });
             // API returns grouped slots, merge with existing
             const existing = timeSlotsSignal.get();
@@ -310,6 +337,12 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
      * Action: Update date range and refetch slots
      */
     const setDateRange = (newStartDate, newEndDate) => {
+        const currentStartDate = startDateSignal.get();
+        const currentEndDate = endDateSignal.get();
+        if (currentStartDate.getTime() === newStartDate.getTime() &&
+            currentEndDate.getTime() === newEndDate.getTime()) {
+            return;
+        }
         startDateSignal.set(newStartDate);
         endDateSignal.set(newEndDate);
         fetchTimeSlots();
@@ -333,8 +366,7 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         isLoading: isLoadingSignal,
         error: errorSignal,
         hasMore: hasMoreSignal,
-        // Configuration Signals
-        viewMode: viewModeSignal,
+        // Configuration Signals (viewMode is internal only)
         startDate: startDateSignal,
         endDate: endDateSignal,
         timezone: timezoneSignal,
@@ -375,23 +407,19 @@ export async function loadTimeSlotListConfig(options) {
     const now = new Date();
     const startDate = options.startDate || now;
     const endDate = options.endDate || getDefaultEndDate();
-    const viewMode = options.viewMode || ViewMode.CLASSIC;
-    // check for location and staff in config
     try {
         const response = await fetchAvailability({
             services: options.services || [],
             fromLocalDate: toLocalDateString(startDate),
             toLocalDate: toLocalDateString(endDate),
             timeZone: options.timezone ?? getClientTimezone(),
-            viewMode,
+            ...options.filters,
         });
         const config = {
-            services: options.services,
+            ...options,
             timeSlots: response.timeSlots || [],
             startDate,
             endDate,
-            timezone: options.timezone,
-            viewMode,
         };
         return { type: 'success', config };
     }

package/dist/api/time-slot-list/index.d.ts

@@ -11,8 +11,20 @@ export interface FetchAvailabilityOptions {
     toLocalDate?: string | null;
     timeZone?: string | null;
     locations?: Location[];
+    /** Filter by specific staff member IDs (passed as resourceIds to API) */
+    staffMemberIds?: string[];
     cursorPaging?: CursorPaging;
     viewMode?: ViewMode;
+    /** Maximum slots to return per day (useful for calendar views) */
+    slotsPerDay?: number;
+    /** Filter by bookable status. If undefined, returns both bookable and non-bookable */
+    bookable?: boolean;
+    /** Filter by booking policy violations */
+    bookingPolicyViolations?: {
+        tooEarlyToBook?: boolean;
+        tooLateToBook?: boolean;
+        bookOnlineDisabled?: boolean;
+    };
 }
 /**
  * Response from fetchAvailability with grouped time slots
@@ -42,12 +54,20 @@ export interface FetchAvailabilityResponse {
  * // response.timeSlots are grouped by time
  * ```
  */
-export declare function fetchAvailability({ services: selectedServices, viewMode, fromLocalDate, toLocalDate, timeZone, locations, cursorPaging, }: {
+export declare function fetchAvailability({ services: selectedServices, viewMode, fromLocalDate, toLocalDate, timeZone, locations, staffMemberIds, cursorPaging, slotsPerDay, bookable, bookingPolicyViolations, }: {
     services: Service[];
     fromLocalDate: string;
     toLocalDate: string;
     timeZone?: string;
     locations?: Location[];
+    staffMemberIds?: string[];
     cursorPaging?: CursorPaging;
     viewMode?: ViewMode;
+    slotsPerDay?: number;
+    bookable?: boolean;
+    bookingPolicyViolations?: {
+        tooEarlyToBook?: boolean;
+        tooLateToBook?: boolean;
+        bookOnlineDisabled?: boolean;
+    };
 }): Promise<FetchAvailabilityResponse>;

package/dist/api/time-slot-list/index.js

@@ -3,6 +3,7 @@
  * Fetches available time slots for booking services from Wix Bookings
  */
 import { listAvailabilityTimeSlots, } from '@wix/auto_sdk_bookings_availability-time-slots';
+import { listEventTimeSlots } from '@wix/auto_sdk_bookings_event-time-slots';
 import { ServiceType } from '@wix/auto_sdk_bookings_services';
 import { ViewMode, } from '../../services/time-slot-list/time-slot-list.def.js';
 // ============================================================================
@@ -101,20 +102,31 @@ function detectFlow(bookingServices, viewMode) {
  * // response.timeSlots are grouped by time
  * ```
  */
-export async function fetchAvailability({ services: selectedServices, viewMode = ViewMode.CLASSIC, fromLocalDate, toLocalDate, timeZone, locations, cursorPaging, }) {
+export async function fetchAvailability({ services: selectedServices, viewMode = ViewMode.CLASSIC, fromLocalDate, toLocalDate, timeZone, locations, staffMemberIds, cursorPaging, slotsPerDay, bookable, bookingPolicyViolations, }) {
     const flow = detectFlow(selectedServices, viewMode);
+    const serviceIds = selectedServices.map((s) => s._id);
     if (flow === FlowType.SINGLE_SERVICE) {
-        const serviceId = selectedServices[0]?._id;
-        if (!serviceId) {
-            throw new Error('Service ID is required');
-        }
+        // Build resourceTypes filter for staff members
+        // Staff member resource type ID is 1cd44cf8-756f-41c3-bd90-3e2ffcaf1155
+        const resourceTypes = staffMemberIds?.length
+            ? [
+                {
+                    resourceTypeId: '1cd44cf8-756f-41c3-bd90-3e2ffcaf1155',
+                    resourceIds: staffMemberIds,
+                },
+            ]
+            : undefined;
         const response = await listAvailabilityTimeSlots({
-            serviceId,
+            serviceId: serviceIds[0],
             fromLocalDate,
             toLocalDate,
             timeZone,
             locations,
             cursorPaging,
+            resourceTypes,
+            timeSlotsPerDay: slotsPerDay,
+            bookable,
+            bookingPolicyViolations,
         });
         return {
             timeSlots: groupTimeSlotsByTime(response.timeSlots || []),
@@ -126,8 +138,34 @@ export async function fetchAvailability({ services: selectedServices, viewMode =
         throw new Error('Multi-service appointments not yet supported');
     }
     if (flow === FlowType.CLASS) {
-        // Phase 2: Class support
-        throw new Error('Class bookings not yet supported');
+        // Build eventFilter for location and staff filtering
+        const locationIds = locations?.map((l) => l._id);
+        const eventFilter = {};
+        if (locationIds?.length) {
+            eventFilter['location.id'] = locationIds;
+        }
+        if (staffMemberIds?.length) {
+            eventFilter['resources.id'] = { $hasSome: staffMemberIds };
+        }
+        const response = await listEventTimeSlots({
+            fromLocalDate,
+            toLocalDate,
+            timeZone,
+            serviceIds: serviceIds.length ? serviceIds : undefined,
+            cursorPaging,
+            eventFilter: Object.keys(eventFilter).length ? eventFilter : undefined,
+            maxSlotsPerDay: slotsPerDay,
+            // bookable=true means only bookable, so includeNonBookable=false
+            // bookable=false means only non-bookable, so includeNonBookable=true
+            // bookable=undefined means both, so includeNonBookable=true (default)
+            includeNonBookable: bookable === undefined ? undefined : !bookable,
+            bookingPolicyViolations,
+        });
+        return {
+            timeSlots: groupTimeSlotsByTime(response.timeSlots || []),
+            // Note: listEventTimeSlots uses pagingMetadata instead of cursorPagingMetadata
+            cursorPagingMetadata: response.pagingMetadata,
+        };
     }
     throw new Error(`Unknown flow type: ${flow}`);
 }

package/dist/react/core/time-slot-list/TimeSlot.d.ts

@@ -6,17 +6,17 @@
  * which provides the TimeSlotProvider context.
  */
 import React from 'react';
-import type { TimeSlot as TimeSlotType } from '../../../services/time-slot-list/time-slot-list.def.js';
+import { type TimeSlot as TimeSlotType } from '../../../services/time-slot-list/time-slot-list.def.js';
 /**
  * Context value for TimeSlot components
  */
 export interface TimeSlotContextValue {
     /** The current time slot data */
-    slot: TimeSlotType;
-    /** Whether this slot is currently selected */
+    timeSlot: TimeSlotType;
+    /** Whether this time slot is currently selected */
     isSelected: boolean;
-    /** Action to select this slot */
-    selectSlot: () => void;
+    /** Action to select this time slot */
+    selectTimeSlot: () => void;
 }
 /**
  * Hook to access TimeSlot context
@@ -28,7 +28,7 @@ export declare function useTimeSlotContext(): TimeSlotContextValue;
  */
 export interface TimeSlotProviderProps {
     children: React.ReactNode;
-    slot: TimeSlotType;
+    timeSlot: TimeSlotType;
 }
 /**
  * Provider component used by TimeSlotRepeater to provide context.
@@ -88,18 +88,18 @@ export declare function StaffMemberProvider(props: StaffMemberProviderProps): Re
  */
 export interface InfoProps {
     children: (data: {
-        /** Raw localStartDate string from slot */
+        /** Raw localStartDate string from timeSlot */
         startDate: string | undefined;
-        /** Raw localEndDate string from slot */
+        /** Raw localEndDate string from timeSlot */
         endDate: string | undefined;
         /** Calculated duration in minutes (null if dates unavailable) */
         durationInMinutes: number | null;
-        /** Whether the slot is bookable */
+        /** Whether the timeSlot is bookable */
         bookable: boolean;
-        /** Whether this slot is currently selected */
+        /** Whether this timeSlot is currently selected */
         isSelected: boolean;
-        /** The raw slot object for advanced use cases */
-        slot: TimeSlotType;
+        /** The raw timeSlot object for advanced use cases */
+        timeSlot: TimeSlotType;
     }) => React.ReactNode;
 }
 /**
@@ -125,15 +125,15 @@ export declare function Info(props: InfoProps): React.ReactNode;
  */
 export interface ActionsProps {
     children: (data: {
-        /** Action to select this slot */
-        selectSlot: () => void;
+        /** Action to select this timeSlot */
+        selectTimeSlot: () => void;
         /** Action to clear preferences */
         clearPreferences?: () => void;
-        /** The raw slot object */
-        slot: TimeSlotType;
-        /** Whether the slot is bookable */
+        /** The raw timeSlot object */
+        timeSlot: TimeSlotType;
+        /** Whether the timeSlot is bookable */
         bookable: boolean;
-        /** Whether this slot is currently selected */
+        /** Whether this timeSlot is currently selected */
         isSelected: boolean;
     }) => React.ReactNode;
 }
@@ -187,6 +187,8 @@ export interface LocationsProps {
  * Extracts locations from slot.staffByLocation and enriches with name from originalSlots.
  * Each location includes isSelected and isSelectable based on current selection state.
  *
+ * Returns null if there's only 1 location (nothing to choose from).
+ *
  * @component
  * @example
  * ```tsx
@@ -291,6 +293,8 @@ export interface StaffMembersProps {
  * Extracts unique staff members from slot.staffByLocation (names already included).
  * Each staff member includes isSelected and isSelectable based on current selection state.
  *
+ * Returns null if there's only 1 staff member (nothing to choose from).
+ *
  * @component
  * @example
  * ```tsx