@wix/headless-bookings 0.0.15 → 0.0.17

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

@@ -6,7 +6,7 @@ import { implementService } from '@wix/services-definitions';
 import { SignalsServiceDefinition } from '@wix/services-definitions/core-services/signals';
 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 { BookingServiceDefinition, } from '../booking/booking.js';
 // ============================================================================
 // Helpers
 // ============================================================================
@@ -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());
@@ -79,7 +80,29 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
     const getServices = () => {
         if (config.services?.length)
             return config.services;
-        return bookingService.bookingSelections.get().map((s) => s.service);
+        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
@@ -87,6 +110,7 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
      */
     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;
@@ -115,82 +140,139 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
     };
     /**
      * Action: Select a time slot
-     * Only updates booking service if there's exactly one location and one resource
-     * Otherwise, user must select location/resource before booking
+     * Auto-selects location/staff based on availability:
+     * - One location + one staff → auto-select both
+     * - One location + many staff → auto-select location only
+     * - Many locations + one staff → auto-select staff only
+     * - Many locations + many staff → don't auto-select anything
      */
     const selectSlot = (slot) => {
         const currentSelection = selectionSignal.get();
         if (currentSelection?.slot?.id === slot.id)
             return;
+        const timeSlot = {
+            startDate: slot.localStartDate,
+            endDate: slot.localEndDate,
+            totalCapacity: slot.totalCapacity ?? undefined,
+            remainingCapacity: slot.remainingCapacity ?? undefined,
+            scheduleId: slot.scheduleId ?? undefined,
+            eventInfo: slot.eventInfo ?? undefined,
+        };
         const hasOneLocation = slot.staffByLocation.length === 1;
-        const hasOneResource = hasOneLocation && slot.staffByLocation[0].staffMembers.length === 1;
-        if (hasOneLocation && hasOneResource) {
-            const originalSlot = slot.originalSlots[0];
-            const { location, staffMembers } = slot.staffByLocation[0];
-            const staffMemberId = staffMembers[0].id;
-            selectionSignal.set({
-                slot,
-                locationId: location.id,
-                staffMemberId,
-            });
-            bookingService.actions.setTimeSlot(originalSlot);
-            bookingService.actions.setLocation({
-                id: location.id,
-                name: location.name,
-            });
-            bookingService.actions.updateBookingSelection({
-                staff: {
-                    _id: staffMemberId,
-                    name: staffMembers[0].name,
-                },
+        // Collect all unique staff members across all locations
+        const allStaffMembers = slot.staffByLocation.flatMap((loc) => loc.staffMembers);
+        const uniqueStaffIds = new Set(allStaffMembers.map((s) => s.id));
+        const hasOneStaff = uniqueStaffIds.size === 1;
+        // Determine what to auto-select
+        let locationId = null;
+        let staffMemberId = null;
+        if (hasOneLocation) {
+            const { location } = slot.staffByLocation[0];
+            locationId = location.id;
+            bookingService.actions.setLocation(location);
+        }
+        else {
+            bookingService.actions.clearLocation();
+        }
+        if (hasOneStaff) {
+            const staffMember = allStaffMembers[0];
+            staffMemberId = staffMember.id;
+            bookingService.actions.updateItem({
+                timeSlot,
+                resources: [
+                    {
+                        _id: staffMemberId,
+                        name: staffMember.name,
+                    },
+                ],
             });
         }
         else {
-            selectionSignal.set({
-                slot,
-                locationId: null,
-                staffMemberId: null,
+            bookingService.actions.updateItem({
+                timeSlot,
+                resources: [],
             });
         }
+        selectionSignal.set({
+            slot,
+            locationId,
+            staffMemberId,
+        });
     };
     /**
      * Action: Select a location for the current slot
-     * Updates the booking service with the correct original slot for this location
+     * Updates the booking service with the location
+     * If the location has only one staff member, auto-selects that staff member too
      */
     const selectLocation = (locationId) => {
         const currentSelections = selectionSignal.get();
         if (!currentSelections?.slot)
             return;
-        selectionSignal.set({ ...currentSelections, locationId });
-        const location = currentSelections.slot.originalSlots.find((s) => s.location?._id === locationId)?.location;
-        if (location) {
-            bookingService.actions.setLocation({
-                id: location._id,
-                name: location.name,
+        const slot = currentSelections.slot;
+        const locationEntry = slot.staffByLocation.find((loc) => loc.location.id === locationId);
+        if (!locationEntry)
+            return;
+        const { location, staffMembers } = locationEntry;
+        bookingService.actions.setLocation(location);
+        // If this location has only one staff member, auto-select them
+        const hasOneStaff = staffMembers.length === 1;
+        if (hasOneStaff) {
+            const staffMember = staffMembers[0];
+            selectionSignal.set({
+                ...currentSelections,
+                locationId,
+                staffMemberId: staffMember.id,
+            });
+            bookingService.actions.updateItem({
+                resources: [
+                    {
+                        _id: staffMember.id,
+                        name: staffMember.name,
+                    },
+                ],
             });
         }
+        else {
+            selectionSignal.set({ ...currentSelections, locationId });
+        }
     };
     /**
      * Action: Select a staff member for the current slot
-     * Updates the booking service with the selected resource for the slot's service
+     * Updates the booking service with the selected resource
+     * If the staff member is only available at one location, auto-selects that location too
      */
     const selectStaffMember = (staffMemberId) => {
         const currentSelections = selectionSignal.get();
         if (!currentSelections?.slot)
             return;
-        selectionSignal.set({ ...currentSelections, staffMemberId });
         const slot = currentSelections.slot;
-        // Find the resource info from original slots
-        for (const originalSlot of slot.originalSlots) {
-            for (const resourceGroup of originalSlot.availableResources || []) {
-                const staff = resourceGroup.resources?.find((r) => r._id === staffMemberId);
-                if (staff) {
-                    bookingService.actions.updateBookingSelection({
-                        staff,
-                    });
-                    return;
-                }
-            }
+        // Find all locations that have this staff member
+        const locationsWithThisStaff = slot.staffByLocation.filter((loc) => loc.staffMembers.some((s) => s.id === staffMemberId));
+        // Find the staff member info
+        const staffMember = locationsWithThisStaff[0]?.staffMembers.find((s) => s.id === staffMemberId);
+        if (!staffMember)
+            return;
+        bookingService.actions.updateItem({
+            resources: [
+                {
+                    _id: staffMember.id,
+                    name: staffMember.name,
+                },
+            ],
+        });
+        // If this staff member is only at one location, auto-select that location
+        const hasOneLocation = locationsWithThisStaff.length === 1;
+        if (hasOneLocation) {
+            const location = locationsWithThisStaff[0].location;
+            selectionSignal.set({
+                ...currentSelections,
+                staffMemberId,
+                locationId: location.id,
+            });
+            bookingService.actions.setLocation(location);
+        }
+        else {
+            selectionSignal.set({ ...currentSelections, staffMemberId });
         }
     };
     /**
@@ -206,15 +288,11 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
             locationId: null,
             staffMemberId: null,
         });
-        // Clear location in booking service
+        // Clear selections in booking service
         bookingService.actions.clearLocation();
-        // Clear resources (staff) in booking service
-        const serviceId = currentSelection.slot.serviceId;
-        if (serviceId) {
-            bookingService.actions.updateBookingSelection({
-                staff: undefined,
-            });
-        }
+        bookingService.actions.updateItem({
+            resources: [],
+        });
     };
     /**
      * Action: Load more slots (pagination)
@@ -226,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({
@@ -235,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();
@@ -257,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();
@@ -280,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,
@@ -322,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/booking/Booking.d.ts

@@ -3,8 +3,8 @@
  * Provides low-level access to BookingService via render props and service setup
  */
 import React from 'react';
-import { type BookingServiceConfig, type BookingSelection } from '../../../services/booking/booking.js';
-import type { TimeSlot } from '@wix/auto_sdk_bookings_availability-time-slots';
+import { type BookingServiceConfig, type BookingItem, type Location, type BookingServiceActions } from '../../../services/booking/booking.js';
+import type { FormValues } from '@wix/form-public';
 /**
  * Props for Booking.Root component
  */
@@ -28,14 +28,22 @@ export interface RootProps {
  * ```
  */
 export declare function Root(props: RootProps): React.ReactNode;
+/**
+ * Data exposed by Booking.Data component
+ * Mirrors BookingServiceConfig structure with actions
+ */
+export interface BookingData {
+    bookingItems: BookingItem[];
+    location: Location | null;
+    formValues: FormValues | null;
+    numberOfParticipants: number;
+    actions: BookingServiceActions;
+}
 /**
  * Props for Data render prop component
  */
 export interface DataProps {
-    children: (data: {
-        bookingSelections: BookingSelection[];
-        selectedTimeSlot: TimeSlot | null;
-    }) => React.ReactNode;
+    children: (data: BookingData) => React.ReactNode;
 }
 /**
  * Core component that provides access to booking data via render props.
@@ -45,9 +53,9 @@ export interface DataProps {
  * @example
  * ```tsx
  * <Booking.Data>
- *   {({ bookingSelections }) => (
- *     bookingSelections.length > 0 ? (
- *       <div>{bookingSelections.map(s => s.service.name).join(', ')}</div>
+ *   {({ bookingItems, location, formValues, numberOfParticipants, actions }) => (
+ *     bookingItems.length > 0 ? (
+ *       <div>{bookingItems.map(item => item.service.name).join(', ')}</div>
  *     ) : (
  *       <div>No services selected</div>
  *     )

package/dist/react/core/booking/Booking.js

@@ -28,9 +28,9 @@ export function Root(props) {
  * @example
  * ```tsx
  * <Booking.Data>
- *   {({ bookingSelections }) => (
- *     bookingSelections.length > 0 ? (
- *       <div>{bookingSelections.map(s => s.service.name).join(', ')}</div>
+ *   {({ bookingItems, location, formValues, numberOfParticipants, actions }) => (
+ *     bookingItems.length > 0 ? (
+ *       <div>{bookingItems.map(item => item.service.name).join(', ')}</div>
  *     ) : (
  *       <div>No services selected</div>
  *     )
@@ -41,10 +41,16 @@ export function Root(props) {
 export function Data(props) {
     const { children } = props;
     const bookingService = useService(BookingServiceDefinition);
-    const bookingSelections = bookingService.bookingSelections.get();
-    const selectedTimeSlot = bookingService.timeSlot.get();
+    const bookingItems = bookingService.bookingItems.get();
+    const location = bookingService.location.get();
+    const formValues = bookingService.formValues.get();
+    const numberOfParticipants = bookingService.numberOfParticipants.get();
+    const { actions } = bookingService;
     return children({
-        bookingSelections,
-        selectedTimeSlot,
+        bookingItems,
+        location,
+        formValues,
+        numberOfParticipants,
+        actions,
     });
 }