@wix/headless-bookings 0.0.19 → 0.0.21

package/cjs/dist/api/{time-slot-list → fetch-availability}/index.d.ts

@@ -15,8 +15,6 @@ export interface FetchAvailabilityOptions {
     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 */
@@ -54,20 +52,20 @@ export interface FetchAvailabilityResponse {
  * // response.timeSlots are grouped by time
  * ```
  */
-export declare function fetchAvailability({ services: selectedServices, viewMode, fromLocalDate, toLocalDate, timeZone, locations, staffMemberIds, cursorPaging, slotsPerDay, bookable, bookingPolicyViolations, }: {
+export declare function fetchAvailability({ services: selectedServices, viewMode, fromLocalDate, toLocalDate, timeZone, locations, staffMemberIds, cursor, slotsPerPage, bookable, bookingPolicyViolations, }: {
     services: Service[];
     fromLocalDate: string;
     toLocalDate: string;
     timeZone?: string;
     locations?: Location[];
     staffMemberIds?: string[];
-    cursorPaging?: CursorPaging;
+    cursor?: string;
     viewMode?: ViewMode;
-    slotsPerDay?: number;
     bookable?: boolean;
     bookingPolicyViolations?: {
         tooEarlyToBook?: boolean;
         tooLateToBook?: boolean;
         bookOnlineDisabled?: boolean;
     };
+    slotsPerPage?: number;
 }): Promise<FetchAvailabilityResponse>;

package/cjs/dist/api/{time-slot-list → fetch-availability}/index.js

@@ -5,6 +5,7 @@
 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 { ANY_STAFF_MEMBER_ID } from '../../services/booking/booking.js';
 import { ViewMode, } from '../../services/time-slot-list/time-slot-list.def.js';
 // ============================================================================
 // Internal Types
@@ -15,6 +16,7 @@ var FlowType;
     FlowType["MULTI_SERVICE"] = "multi_service";
     FlowType["CLASS"] = "class";
 })(FlowType || (FlowType = {}));
+const STAFF_RESOURCE_TYPE_ID = '1cd44cf8-756f-41c3-bd90-3e2ffcaf1155';
 // ============================================================================
 // Grouping Functions
 // ============================================================================
@@ -102,16 +104,15 @@ function detectFlow(bookingServices, viewMode) {
  * // response.timeSlots are grouped by time
  * ```
  */
-export async function fetchAvailability({ services: selectedServices, viewMode = ViewMode.CLASSIC, fromLocalDate, toLocalDate, timeZone, locations, staffMemberIds, cursorPaging, slotsPerDay, bookable, bookingPolicyViolations, }) {
+export async function fetchAvailability({ services: selectedServices, viewMode = ViewMode.CLASSIC, fromLocalDate, toLocalDate, timeZone, locations, staffMemberIds, cursor, slotsPerPage, bookable, bookingPolicyViolations, }) {
     const flow = detectFlow(selectedServices, viewMode);
     const serviceIds = selectedServices.map((s) => s._id);
     if (flow === FlowType.SINGLE_SERVICE) {
-        // Build resourceTypes filter for staff members
-        // Staff member resource type ID is 1cd44cf8-756f-41c3-bd90-3e2ffcaf1155
-        const resourceTypes = staffMemberIds?.length
+        const isAnyStaffMemberSelected = staffMemberIds?.length === 1 && staffMemberIds[0] === ANY_STAFF_MEMBER_ID;
+        const resourceTypes = staffMemberIds?.length && !isAnyStaffMemberSelected
             ? [
                 {
-                    resourceTypeId: '1cd44cf8-756f-41c3-bd90-3e2ffcaf1155',
+                    resourceTypeId: STAFF_RESOURCE_TYPE_ID,
                     resourceIds: staffMemberIds,
                 },
             ]
@@ -122,11 +123,16 @@ export async function fetchAvailability({ services: selectedServices, viewMode =
             toLocalDate,
             timeZone,
             locations,
-            cursorPaging,
+            cursorPaging: {
+                cursor,
+                limit: slotsPerPage,
+            },
             resourceTypes,
-            timeSlotsPerDay: slotsPerDay,
             bookable,
             bookingPolicyViolations,
+            includeResourceTypeIds: isAnyStaffMemberSelected
+                ? undefined
+                : [STAFF_RESOURCE_TYPE_ID],
         });
         return {
             timeSlots: groupTimeSlotsByTime(response.timeSlots || []),
@@ -152,13 +158,12 @@ export async function fetchAvailability({ services: selectedServices, viewMode =
             toLocalDate,
             timeZone,
             serviceIds: serviceIds.length ? serviceIds : undefined,
-            cursorPaging,
+            cursorPaging: {
+                cursor,
+                limit: slotsPerPage,
+            },
             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,
+            includeNonBookable: bookable ? !bookable : undefined,
             bookingPolicyViolations,
         });
         return {

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

@@ -5,7 +5,7 @@
  * @module API
  */
 export { getServiceById, getServiceBySlug, queryServices, type PagingMetadata, type ServiceListFilters, type QueryServicesRequest, } from './query-services/index.js';
-export { fetchAvailability } from './time-slot-list/index.js';
+export { fetchAvailability } from './fetch-availability/index.js';
 /**
  * PagingMetadata includes:
  * - limit: Number of items per page

package/cjs/dist/api/index.js

@@ -5,7 +5,7 @@
  * @module API
  */
 export { getServiceById, getServiceBySlug, queryServices, } from './query-services/index.js';
-export { fetchAvailability } from './time-slot-list/index.js';
+export { fetchAvailability } from './fetch-availability/index.js';
 /**
  * PagingMetadata includes:
  * - limit: Number of items per page

package/cjs/dist/react/core/time-slot-list/TimeSlot.js

@@ -9,6 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { useService } from '@wix/services-manager-react';
 import { TimeSlotListServiceDefinition, } from '../../../services/time-slot-list/time-slot-list.def.js';
+import { ANY_STAFF_MEMBER_ID } from '../../../services/booking/booking.js';
 const TimeSlotContext = React.createContext(null);
 /**
  * Hook to access TimeSlot context
@@ -202,12 +203,13 @@ export function Locations(props) {
     const selection = service.selection.get();
     const selectedLocationId = selection?.locationId ?? null;
     const selectedStaffMemberId = selection?.staffMemberId ?? null;
+    const isAnyStaffMemberSelected = selectedStaffMemberId === ANY_STAFF_MEMBER_ID;
     // Build locations array from staffByLocation (names already included)
     const locations = timeSlot.staffByLocation.map(({ location, staffMembers }) => {
         // Check if this location is selectable based on selected staff
         // If no staff selected, all locations are selectable
         // If staff selected, only locations where that staff works are selectable
-        const isSelectable = selectedStaffMemberId
+        const isSelectable = !isAnyStaffMemberSelected && selectedStaffMemberId
             ? staffMembers.some((s) => s.id === selectedStaffMemberId)
             : true;
         return {
@@ -311,12 +313,18 @@ export function StaffMembers(props) {
         isSelectable: !selectedLocationId ||
             entries.some((e) => e.locationId === selectedLocationId),
     }));
+    const anyStaffOption = {
+        id: ANY_STAFF_MEMBER_ID,
+        name: 'Any staff member',
+        isSelected: selectedStaffMemberId === ANY_STAFF_MEMBER_ID,
+        isSelectable: true,
+    };
     // Return null if only 1 staff member - nothing to choose from
     if (staffMembers.length <= 1) {
         return null;
     }
     return props.children({
-        staffMembers,
+        staffMembers: [anyStaffOption, ...staffMembers],
         selectStaffMember: service.actions.selectStaffMember,
     });
 }

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

@@ -5,7 +5,7 @@
 import React from 'react';
 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';
+import type { TimeSlotListServiceConfig, TimeSlot as TimeSlotType } 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
@@ -81,17 +81,23 @@ export declare const Root: React.ForwardRefExoticComponent<RootProps & React.Ref
  */
 export interface TimeSlotsProps {
     children: React.ReactNode;
+    /** Content to display when no time slots are available */
     emptyState?: React.ReactNode;
+    /** Content to display while time slots are loading */
+    loadingState?: React.ReactNode;
     className?: string;
 }
 /**
- * Container for the time slots list with empty state support.
+ * Container for the time slots list with empty state and loading state support.
  * Wraps GenericList.Items. Follows List Container Level pattern.
  *
  * @component
  * @example
  * ```tsx
- * <TimeSlotList.TimeSlots emptyState={<div>No slots available</div>}>
+ * <TimeSlotList.TimeSlots
+ *   emptyState={<div>No slots available</div>}
+ *   loadingState={<div>Loading...</div>}
+ * >
  *   <TimeSlotList.TimeSlotRepeater>
  *     {children}
  *   </TimeSlotList.TimeSlotRepeater>
@@ -99,11 +105,32 @@ export interface TimeSlotsProps {
  * ```
  */
 export declare const TimeSlots: React.ForwardRefExoticComponent<TimeSlotsProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Data provided to TimeSlotRepeater function children
+ */
+export interface TimeSlotRepeaterChildProps {
+    /** Whether the slot is currently selected */
+    isSelected: boolean;
+    /** Whether the slot can be booked */
+    bookable: boolean;
+    /** Start date/time as ISO string */
+    startDate: string | undefined;
+    /** End date/time as ISO string */
+    endDate: string | undefined;
+    /** Duration in minutes */
+    durationInMinutes: number | null;
+    /** The raw time slot data */
+    timeSlot: TimeSlotType;
+}
+/**
+ * Children type for TimeSlotRepeater - can be ReactNode or function
+ */
+type TimeSlotRepeaterChildren = React.ReactNode | ((props: TimeSlotRepeaterChildProps) => React.ReactNode);
 /**
  * Props for TimeSlotList.TimeSlotRepeater component
  */
 export interface TimeSlotRepeaterProps {
-    children: React.ReactNode;
+    children: TimeSlotRepeaterChildren;
 }
 /**
  * Repeater component that renders each time slot.
@@ -113,11 +140,21 @@ export interface TimeSlotRepeaterProps {
  * @component
  * @example
  * ```tsx
+ * // Standard usage with nested components
  * <TimeSlotList.TimeSlotRepeater>
  *   <TimeSlot.StartDate />
  *   <TimeSlot.Duration />
  *   <TimeSlot.Actions.Select />
  * </TimeSlotList.TimeSlotRepeater>
+ *
+ * // Function children pattern - all data available directly
+ * <TimeSlotList.TimeSlotRepeater>
+ *   {({ isSelected, bookable, startDate }) => (
+ *     <button disabled={!bookable} className={isSelected ? 'selected' : ''}>
+ *       {formatTime(startDate)}
+ *     </button>
+ *   )}
+ * </TimeSlotList.TimeSlotRepeater>
  * ```
  */
 export declare const TimeSlotRepeater: React.ForwardRefExoticComponent<TimeSlotRepeaterProps & React.RefAttributes<HTMLElement>>;

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

@@ -81,13 +81,16 @@ const RootContent = React.forwardRef((props, ref) => {
 });
 RootContent.displayName = 'TimeSlotList.RootContent';
 /**
- * Container for the time slots list with empty state support.
+ * Container for the time slots list with empty state and loading state support.
  * Wraps GenericList.Items. Follows List Container Level pattern.
  *
  * @component
  * @example
  * ```tsx
- * <TimeSlotList.TimeSlots emptyState={<div>No slots available</div>}>
+ * <TimeSlotList.TimeSlots
+ *   emptyState={<div>No slots available</div>}
+ *   loadingState={<div>Loading...</div>}
+ * >
  *   <TimeSlotList.TimeSlotRepeater>
  *     {children}
  *   </TimeSlotList.TimeSlotRepeater>
@@ -101,10 +104,12 @@ export const TimeSlots = React.forwardRef((props, ref) => {
 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.
+ * Supports both ReactNode and function children patterns.
  */
 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 })) }) }));
+    return (_jsx(TimeSlotProvider, { timeSlot: timeSlot, children: _jsx(CoreTimeSlotInfo, { children: (props) => {
+                return (_jsx("div", { "data-testid": TestIds.timeSlotListTimeSlot, "data-bookable": props.bookable, "data-selected": props.isSelected, children: typeof children === 'function' ? children(props) : children }));
+            } }) }));
 };
 /**
  * Repeater component that renders each time slot.
@@ -114,16 +119,26 @@ const TimeSlotItemWrapper = ({ timeSlot, children, }) => {
  * @component
  * @example
  * ```tsx
+ * // Standard usage with nested components
  * <TimeSlotList.TimeSlotRepeater>
  *   <TimeSlot.StartDate />
  *   <TimeSlot.Duration />
  *   <TimeSlot.Actions.Select />
  * </TimeSlotList.TimeSlotRepeater>
+ *
+ * // Function children pattern - all data available directly
+ * <TimeSlotList.TimeSlotRepeater>
+ *   {({ isSelected, bookable, startDate }) => (
+ *     <button disabled={!bookable} className={isSelected ? 'selected' : ''}>
+ *       {formatTime(startDate)}
+ *     </button>
+ *   )}
+ * </TimeSlotList.TimeSlotRepeater>
  * ```
  */
 export const TimeSlotRepeater = React.forwardRef((props, ref) => {
     const { children } = props;
-    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item: timeSlot, children: itemChildren }) => (_jsx(TimeSlotItemWrapper, { timeSlot: timeSlot, children: itemChildren }, timeSlot.id)), children: children }));
+    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item: timeSlot }) => (_jsx(TimeSlotItemWrapper, { timeSlot: timeSlot, children: children }, timeSlot.id)), children: undefined }));
 });
 TimeSlotRepeater.displayName = 'TimeSlotList.TimeSlotRepeater';
 /**

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

@@ -7,6 +7,7 @@ import { type Signal } from '@wix/services-definitions/core-services/signals';
 import type { Service } from '@wix/auto_sdk_bookings_services';
 import type { Resource, EventInfo } from '@wix/auto_sdk_bookings_availability-time-slots';
 import type { FormValues } from '@wix/form-public';
+export declare const ANY_STAFF_MEMBER_ID = "__any_staff_member__";
 /**
  * Minimal time slot data for service selections
  */

package/cjs/dist/services/booking/booking.js

@@ -6,6 +6,10 @@
 import { defineService, implementService } from '@wix/services-definitions';
 import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
 // ============================================================================
+// Constants
+// ============================================================================
+export const ANY_STAFF_MEMBER_ID = '__any_staff_member__';
+// ============================================================================
 // Types
 // ============================================================================
 /**

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

@@ -51,8 +51,6 @@ export interface TimeSlotsFilters {
     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 */
@@ -61,6 +59,17 @@ export interface TimeSlotsFilters {
         tooLateToBook?: boolean;
         bookOnlineDisabled?: boolean;
     };
+    /**
+     * Number of time slots to load per request.
+     * Controls how many slots are fetched initially and on each "Load More" action.
+     * Default: 1000. Max: 1000.
+     * @example
+     * ```ts
+     * // Load 6 slots at a time
+     * filters: { slotsPerPage: 6 }
+     * ```
+     */
+    slotsPerPage?: number;
 }
 export interface TimeSlotListServiceConfig {
     /** Services to fetch time slots for */

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

@@ -4,9 +4,10 @@
  */
 import { implementService } from '@wix/services-definitions';
 import { SignalsServiceDefinition } from '@wix/services-definitions/core-services/signals';
+import { format } from 'date-fns';
 import { TimeSlotListServiceDefinition, ViewMode, } from './time-slot-list.def.js';
-import { fetchAvailability } from '../../api/time-slot-list/index.js';
-import { BookingServiceDefinition, } from '../booking/booking.js';
+import { fetchAvailability } from '../../api/fetch-availability/index.js';
+import { BookingServiceDefinition, ANY_STAFF_MEMBER_ID, } from '../booking/booking.js';
 // ============================================================================
 // Helpers
 // ============================================================================
@@ -22,13 +23,8 @@ function getClientTimezone() {
  * Formats a Date to local ISO string (YYYY-MM-DDThh:mm:ss)
  */
 function toLocalDateString(date) {
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const day = String(date.getDate()).padStart(2, '0');
-    const hours = String(date.getHours()).padStart(2, '0');
-    const minutes = String(date.getMinutes()).padStart(2, '0');
-    const seconds = String(date.getSeconds()).padStart(2, '0');
-    return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
+    const pattern = "yyyy-MM-dd'T'HH:mm:ss";
+    return format(date, pattern);
 }
 /**
  * Merges new grouped slots with existing ones
@@ -88,8 +84,8 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
     const getFilters = () => {
         // Get BookingService selections (these take priority)
         const location = bookingService.location.get();
-        const selections = bookingService.serviceSelections.get();
-        const selectedStaffMemberIds = selections
+        const serviceSelections = bookingService.serviceSelections.get();
+        const selectedStaffMemberIds = serviceSelections
             .map(({ resources }) => resources.map((r) => r._id))
             .flat();
         const selectedLocation = location ? { _id: location.id } : null;
@@ -114,6 +110,7 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         isLoadingSignal.set(true);
         errorSignal.set(null);
         cursorSignal.set(undefined);
+        timeSlotsSignal.set([]);
         try {
             const response = await fetchAvailability({
                 services: selectedServices,
@@ -121,6 +118,7 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
                 toLocalDate: toLocalDateString(endDateSignal.get()),
                 timeZone: timezoneSignal.get(),
                 viewMode: viewModeSignal.get(),
+                cursor: cursorSignal.get(),
                 ...filters,
             });
             timeSlotsSignal.set(response.timeSlots);
@@ -245,6 +243,18 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         const currentSelections = selectionSignal.get();
         if (!currentSelections?.slot)
             return;
+        if (staffMemberId === ANY_STAFF_MEMBER_ID) {
+            bookingService.actions.updateItem({
+                resources: [
+                    {
+                        _id: ANY_STAFF_MEMBER_ID,
+                        name: 'Any staff member',
+                    },
+                ],
+            });
+            selectionSignal.set({ ...currentSelections, staffMemberId });
+            return;
+        }
         const slot = currentSelections.slot;
         // Find all locations that have this staff member
         const locationsWithThisStaff = slot.staffByLocation.filter((loc) => loc.staffMembers.some((s) => s.id === staffMemberId));
@@ -312,7 +322,7 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
                 fromLocalDate: toLocalDateString(startDateSignal.get()),
                 toLocalDate: toLocalDateString(endDateSignal.get()),
                 timeZone: timezoneSignal.get(),
-                cursorPaging: { cursor },
+                cursor,
                 viewMode: viewModeSignal.get(),
                 ...filters,
             });

package/dist/api/{time-slot-list → fetch-availability}/index.d.ts

@@ -15,8 +15,6 @@ export interface FetchAvailabilityOptions {
     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 */
@@ -54,20 +52,20 @@ export interface FetchAvailabilityResponse {
  * // response.timeSlots are grouped by time
  * ```
  */
-export declare function fetchAvailability({ services: selectedServices, viewMode, fromLocalDate, toLocalDate, timeZone, locations, staffMemberIds, cursorPaging, slotsPerDay, bookable, bookingPolicyViolations, }: {
+export declare function fetchAvailability({ services: selectedServices, viewMode, fromLocalDate, toLocalDate, timeZone, locations, staffMemberIds, cursor, slotsPerPage, bookable, bookingPolicyViolations, }: {
     services: Service[];
     fromLocalDate: string;
     toLocalDate: string;
     timeZone?: string;
     locations?: Location[];
     staffMemberIds?: string[];
-    cursorPaging?: CursorPaging;
+    cursor?: string;
     viewMode?: ViewMode;
-    slotsPerDay?: number;
     bookable?: boolean;
     bookingPolicyViolations?: {
         tooEarlyToBook?: boolean;
         tooLateToBook?: boolean;
         bookOnlineDisabled?: boolean;
     };
+    slotsPerPage?: number;
 }): Promise<FetchAvailabilityResponse>;

package/dist/api/{time-slot-list → fetch-availability}/index.js

@@ -5,6 +5,7 @@
 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 { ANY_STAFF_MEMBER_ID } from '../../services/booking/booking.js';
 import { ViewMode, } from '../../services/time-slot-list/time-slot-list.def.js';
 // ============================================================================
 // Internal Types
@@ -15,6 +16,7 @@ var FlowType;
     FlowType["MULTI_SERVICE"] = "multi_service";
     FlowType["CLASS"] = "class";
 })(FlowType || (FlowType = {}));
+const STAFF_RESOURCE_TYPE_ID = '1cd44cf8-756f-41c3-bd90-3e2ffcaf1155';
 // ============================================================================
 // Grouping Functions
 // ============================================================================
@@ -102,16 +104,15 @@ function detectFlow(bookingServices, viewMode) {
  * // response.timeSlots are grouped by time
  * ```
  */
-export async function fetchAvailability({ services: selectedServices, viewMode = ViewMode.CLASSIC, fromLocalDate, toLocalDate, timeZone, locations, staffMemberIds, cursorPaging, slotsPerDay, bookable, bookingPolicyViolations, }) {
+export async function fetchAvailability({ services: selectedServices, viewMode = ViewMode.CLASSIC, fromLocalDate, toLocalDate, timeZone, locations, staffMemberIds, cursor, slotsPerPage, bookable, bookingPolicyViolations, }) {
     const flow = detectFlow(selectedServices, viewMode);
     const serviceIds = selectedServices.map((s) => s._id);
     if (flow === FlowType.SINGLE_SERVICE) {
-        // Build resourceTypes filter for staff members
-        // Staff member resource type ID is 1cd44cf8-756f-41c3-bd90-3e2ffcaf1155
-        const resourceTypes = staffMemberIds?.length
+        const isAnyStaffMemberSelected = staffMemberIds?.length === 1 && staffMemberIds[0] === ANY_STAFF_MEMBER_ID;
+        const resourceTypes = staffMemberIds?.length && !isAnyStaffMemberSelected
             ? [
                 {
-                    resourceTypeId: '1cd44cf8-756f-41c3-bd90-3e2ffcaf1155',
+                    resourceTypeId: STAFF_RESOURCE_TYPE_ID,
                     resourceIds: staffMemberIds,
                 },
             ]
@@ -122,11 +123,16 @@ export async function fetchAvailability({ services: selectedServices, viewMode =
             toLocalDate,
             timeZone,
             locations,
-            cursorPaging,
+            cursorPaging: {
+                cursor,
+                limit: slotsPerPage,
+            },
             resourceTypes,
-            timeSlotsPerDay: slotsPerDay,
             bookable,
             bookingPolicyViolations,
+            includeResourceTypeIds: isAnyStaffMemberSelected
+                ? undefined
+                : [STAFF_RESOURCE_TYPE_ID],
         });
         return {
             timeSlots: groupTimeSlotsByTime(response.timeSlots || []),
@@ -152,13 +158,12 @@ export async function fetchAvailability({ services: selectedServices, viewMode =
             toLocalDate,
             timeZone,
             serviceIds: serviceIds.length ? serviceIds : undefined,
-            cursorPaging,
+            cursorPaging: {
+                cursor,
+                limit: slotsPerPage,
+            },
             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,
+            includeNonBookable: bookable ? !bookable : undefined,
             bookingPolicyViolations,
         });
         return {

package/dist/api/index.d.ts

@@ -5,7 +5,7 @@
  * @module API
  */
 export { getServiceById, getServiceBySlug, queryServices, type PagingMetadata, type ServiceListFilters, type QueryServicesRequest, } from './query-services/index.js';
-export { fetchAvailability } from './time-slot-list/index.js';
+export { fetchAvailability } from './fetch-availability/index.js';
 /**
  * PagingMetadata includes:
  * - limit: Number of items per page

package/dist/api/index.js

@@ -5,7 +5,7 @@
  * @module API
  */
 export { getServiceById, getServiceBySlug, queryServices, } from './query-services/index.js';
-export { fetchAvailability } from './time-slot-list/index.js';
+export { fetchAvailability } from './fetch-availability/index.js';
 /**
  * PagingMetadata includes:
  * - limit: Number of items per page

package/dist/react/core/time-slot-list/TimeSlot.js

@@ -9,6 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { useService } from '@wix/services-manager-react';
 import { TimeSlotListServiceDefinition, } from '../../../services/time-slot-list/time-slot-list.def.js';
+import { ANY_STAFF_MEMBER_ID } from '../../../services/booking/booking.js';
 const TimeSlotContext = React.createContext(null);
 /**
  * Hook to access TimeSlot context
@@ -202,12 +203,13 @@ export function Locations(props) {
     const selection = service.selection.get();
     const selectedLocationId = selection?.locationId ?? null;
     const selectedStaffMemberId = selection?.staffMemberId ?? null;
+    const isAnyStaffMemberSelected = selectedStaffMemberId === ANY_STAFF_MEMBER_ID;
     // Build locations array from staffByLocation (names already included)
     const locations = timeSlot.staffByLocation.map(({ location, staffMembers }) => {
         // Check if this location is selectable based on selected staff
         // If no staff selected, all locations are selectable
         // If staff selected, only locations where that staff works are selectable
-        const isSelectable = selectedStaffMemberId
+        const isSelectable = !isAnyStaffMemberSelected && selectedStaffMemberId
             ? staffMembers.some((s) => s.id === selectedStaffMemberId)
             : true;
         return {
@@ -311,12 +313,18 @@ export function StaffMembers(props) {
         isSelectable: !selectedLocationId ||
             entries.some((e) => e.locationId === selectedLocationId),
     }));
+    const anyStaffOption = {
+        id: ANY_STAFF_MEMBER_ID,
+        name: 'Any staff member',
+        isSelected: selectedStaffMemberId === ANY_STAFF_MEMBER_ID,
+        isSelectable: true,
+    };
     // Return null if only 1 staff member - nothing to choose from
     if (staffMembers.length <= 1) {
         return null;
     }
     return props.children({
-        staffMembers,
+        staffMembers: [anyStaffOption, ...staffMembers],
         selectStaffMember: service.actions.selectStaffMember,
     });
 }

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

@@ -5,7 +5,7 @@
 import React from 'react';
 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';
+import type { TimeSlotListServiceConfig, TimeSlot as TimeSlotType } 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
@@ -81,17 +81,23 @@ export declare const Root: React.ForwardRefExoticComponent<RootProps & React.Ref
  */
 export interface TimeSlotsProps {
     children: React.ReactNode;
+    /** Content to display when no time slots are available */
     emptyState?: React.ReactNode;
+    /** Content to display while time slots are loading */
+    loadingState?: React.ReactNode;
     className?: string;
 }
 /**
- * Container for the time slots list with empty state support.
+ * Container for the time slots list with empty state and loading state support.
  * Wraps GenericList.Items. Follows List Container Level pattern.
  *
  * @component
  * @example
  * ```tsx
- * <TimeSlotList.TimeSlots emptyState={<div>No slots available</div>}>
+ * <TimeSlotList.TimeSlots
+ *   emptyState={<div>No slots available</div>}
+ *   loadingState={<div>Loading...</div>}
+ * >
  *   <TimeSlotList.TimeSlotRepeater>
  *     {children}
  *   </TimeSlotList.TimeSlotRepeater>
@@ -99,11 +105,32 @@ export interface TimeSlotsProps {
  * ```
  */
 export declare const TimeSlots: React.ForwardRefExoticComponent<TimeSlotsProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Data provided to TimeSlotRepeater function children
+ */
+export interface TimeSlotRepeaterChildProps {
+    /** Whether the slot is currently selected */
+    isSelected: boolean;
+    /** Whether the slot can be booked */
+    bookable: boolean;
+    /** Start date/time as ISO string */
+    startDate: string | undefined;
+    /** End date/time as ISO string */
+    endDate: string | undefined;
+    /** Duration in minutes */
+    durationInMinutes: number | null;
+    /** The raw time slot data */
+    timeSlot: TimeSlotType;
+}
+/**
+ * Children type for TimeSlotRepeater - can be ReactNode or function
+ */
+type TimeSlotRepeaterChildren = React.ReactNode | ((props: TimeSlotRepeaterChildProps) => React.ReactNode);
 /**
  * Props for TimeSlotList.TimeSlotRepeater component
  */
 export interface TimeSlotRepeaterProps {
-    children: React.ReactNode;
+    children: TimeSlotRepeaterChildren;
 }
 /**
  * Repeater component that renders each time slot.
@@ -113,11 +140,21 @@ export interface TimeSlotRepeaterProps {
  * @component
  * @example
  * ```tsx
+ * // Standard usage with nested components
  * <TimeSlotList.TimeSlotRepeater>
  *   <TimeSlot.StartDate />
  *   <TimeSlot.Duration />
  *   <TimeSlot.Actions.Select />
  * </TimeSlotList.TimeSlotRepeater>
+ *
+ * // Function children pattern - all data available directly
+ * <TimeSlotList.TimeSlotRepeater>
+ *   {({ isSelected, bookable, startDate }) => (
+ *     <button disabled={!bookable} className={isSelected ? 'selected' : ''}>
+ *       {formatTime(startDate)}
+ *     </button>
+ *   )}
+ * </TimeSlotList.TimeSlotRepeater>
  * ```
  */
 export declare const TimeSlotRepeater: React.ForwardRefExoticComponent<TimeSlotRepeaterProps & React.RefAttributes<HTMLElement>>;

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

@@ -81,13 +81,16 @@ const RootContent = React.forwardRef((props, ref) => {
 });
 RootContent.displayName = 'TimeSlotList.RootContent';
 /**
- * Container for the time slots list with empty state support.
+ * Container for the time slots list with empty state and loading state support.
  * Wraps GenericList.Items. Follows List Container Level pattern.
  *
  * @component
  * @example
  * ```tsx
- * <TimeSlotList.TimeSlots emptyState={<div>No slots available</div>}>
+ * <TimeSlotList.TimeSlots
+ *   emptyState={<div>No slots available</div>}
+ *   loadingState={<div>Loading...</div>}
+ * >
  *   <TimeSlotList.TimeSlotRepeater>
  *     {children}
  *   </TimeSlotList.TimeSlotRepeater>
@@ -101,10 +104,12 @@ export const TimeSlots = React.forwardRef((props, ref) => {
 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.
+ * Supports both ReactNode and function children patterns.
  */
 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 })) }) }));
+    return (_jsx(TimeSlotProvider, { timeSlot: timeSlot, children: _jsx(CoreTimeSlotInfo, { children: (props) => {
+                return (_jsx("div", { "data-testid": TestIds.timeSlotListTimeSlot, "data-bookable": props.bookable, "data-selected": props.isSelected, children: typeof children === 'function' ? children(props) : children }));
+            } }) }));
 };
 /**
  * Repeater component that renders each time slot.
@@ -114,16 +119,26 @@ const TimeSlotItemWrapper = ({ timeSlot, children, }) => {
  * @component
  * @example
  * ```tsx
+ * // Standard usage with nested components
  * <TimeSlotList.TimeSlotRepeater>
  *   <TimeSlot.StartDate />
  *   <TimeSlot.Duration />
  *   <TimeSlot.Actions.Select />
  * </TimeSlotList.TimeSlotRepeater>
+ *
+ * // Function children pattern - all data available directly
+ * <TimeSlotList.TimeSlotRepeater>
+ *   {({ isSelected, bookable, startDate }) => (
+ *     <button disabled={!bookable} className={isSelected ? 'selected' : ''}>
+ *       {formatTime(startDate)}
+ *     </button>
+ *   )}
+ * </TimeSlotList.TimeSlotRepeater>
  * ```
  */
 export const TimeSlotRepeater = React.forwardRef((props, ref) => {
     const { children } = props;
-    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item: timeSlot, children: itemChildren }) => (_jsx(TimeSlotItemWrapper, { timeSlot: timeSlot, children: itemChildren }, timeSlot.id)), children: children }));
+    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item: timeSlot }) => (_jsx(TimeSlotItemWrapper, { timeSlot: timeSlot, children: children }, timeSlot.id)), children: undefined }));
 });
 TimeSlotRepeater.displayName = 'TimeSlotList.TimeSlotRepeater';
 /**

package/dist/services/booking/booking.d.ts

@@ -7,6 +7,7 @@ import { type Signal } from '@wix/services-definitions/core-services/signals';
 import type { Service } from '@wix/auto_sdk_bookings_services';
 import type { Resource, EventInfo } from '@wix/auto_sdk_bookings_availability-time-slots';
 import type { FormValues } from '@wix/form-public';
+export declare const ANY_STAFF_MEMBER_ID = "__any_staff_member__";
 /**
  * Minimal time slot data for service selections
  */

package/dist/services/booking/booking.js

@@ -6,6 +6,10 @@
 import { defineService, implementService } from '@wix/services-definitions';
 import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
 // ============================================================================
+// Constants
+// ============================================================================
+export const ANY_STAFF_MEMBER_ID = '__any_staff_member__';
+// ============================================================================
 // Types
 // ============================================================================
 /**

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

@@ -51,8 +51,6 @@ export interface TimeSlotsFilters {
     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 */
@@ -61,6 +59,17 @@ export interface TimeSlotsFilters {
         tooLateToBook?: boolean;
         bookOnlineDisabled?: boolean;
     };
+    /**
+     * Number of time slots to load per request.
+     * Controls how many slots are fetched initially and on each "Load More" action.
+     * Default: 1000. Max: 1000.
+     * @example
+     * ```ts
+     * // Load 6 slots at a time
+     * filters: { slotsPerPage: 6 }
+     * ```
+     */
+    slotsPerPage?: number;
 }
 export interface TimeSlotListServiceConfig {
     /** Services to fetch time slots for */

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

@@ -4,9 +4,10 @@
  */
 import { implementService } from '@wix/services-definitions';
 import { SignalsServiceDefinition } from '@wix/services-definitions/core-services/signals';
+import { format } from 'date-fns';
 import { TimeSlotListServiceDefinition, ViewMode, } from './time-slot-list.def.js';
-import { fetchAvailability } from '../../api/time-slot-list/index.js';
-import { BookingServiceDefinition, } from '../booking/booking.js';
+import { fetchAvailability } from '../../api/fetch-availability/index.js';
+import { BookingServiceDefinition, ANY_STAFF_MEMBER_ID, } from '../booking/booking.js';
 // ============================================================================
 // Helpers
 // ============================================================================
@@ -22,13 +23,8 @@ function getClientTimezone() {
  * Formats a Date to local ISO string (YYYY-MM-DDThh:mm:ss)
  */
 function toLocalDateString(date) {
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const day = String(date.getDate()).padStart(2, '0');
-    const hours = String(date.getHours()).padStart(2, '0');
-    const minutes = String(date.getMinutes()).padStart(2, '0');
-    const seconds = String(date.getSeconds()).padStart(2, '0');
-    return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
+    const pattern = "yyyy-MM-dd'T'HH:mm:ss";
+    return format(date, pattern);
 }
 /**
  * Merges new grouped slots with existing ones
@@ -88,8 +84,8 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
     const getFilters = () => {
         // Get BookingService selections (these take priority)
         const location = bookingService.location.get();
-        const selections = bookingService.serviceSelections.get();
-        const selectedStaffMemberIds = selections
+        const serviceSelections = bookingService.serviceSelections.get();
+        const selectedStaffMemberIds = serviceSelections
             .map(({ resources }) => resources.map((r) => r._id))
             .flat();
         const selectedLocation = location ? { _id: location.id } : null;
@@ -114,6 +110,7 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         isLoadingSignal.set(true);
         errorSignal.set(null);
         cursorSignal.set(undefined);
+        timeSlotsSignal.set([]);
         try {
             const response = await fetchAvailability({
                 services: selectedServices,
@@ -121,6 +118,7 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
                 toLocalDate: toLocalDateString(endDateSignal.get()),
                 timeZone: timezoneSignal.get(),
                 viewMode: viewModeSignal.get(),
+                cursor: cursorSignal.get(),
                 ...filters,
             });
             timeSlotsSignal.set(response.timeSlots);
@@ -245,6 +243,18 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         const currentSelections = selectionSignal.get();
         if (!currentSelections?.slot)
             return;
+        if (staffMemberId === ANY_STAFF_MEMBER_ID) {
+            bookingService.actions.updateItem({
+                resources: [
+                    {
+                        _id: ANY_STAFF_MEMBER_ID,
+                        name: 'Any staff member',
+                    },
+                ],
+            });
+            selectionSignal.set({ ...currentSelections, staffMemberId });
+            return;
+        }
         const slot = currentSelections.slot;
         // Find all locations that have this staff member
         const locationsWithThisStaff = slot.staffByLocation.filter((loc) => loc.staffMembers.some((s) => s.id === staffMemberId));
@@ -312,7 +322,7 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
                 fromLocalDate: toLocalDateString(startDateSignal.get()),
                 toLocalDate: toLocalDateString(endDateSignal.get()),
                 timeZone: timezoneSignal.get(),
-                cursorPaging: { cursor },
+                cursor,
                 viewMode: viewModeSignal.get(),
                 ...filters,
             });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-bookings",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -39,7 +39,8 @@
     "@wix/headless-media": "0.0.18",
     "@wix/headless-utils": "0.0.8",
     "@wix/services-definitions": "^0.1.4",
-    "@wix/services-manager-react": "^0.1.26"
+    "@wix/services-manager-react": "^0.1.26",
+    "date-fns": "^4.1.0"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
@@ -69,5 +70,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "2a71ca796bb480604700e6cc7fde7a950ba7f71c92a189dbd0a2375a"
+  "falconPackageHash": "d2842c53f889bbbdfd049c74e533eef301d158412ec519b08c80c87c"
 }