@wix/headless-bookings 0.0.14 → 0.0.16

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
 // ============================================================================
@@ -79,7 +79,7 @@ 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);
     };
     /**
      * Fetch time slots from API
@@ -115,82 +115,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 +263,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)

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,
     });
 }

package/dist/react/core/service-list/ServiceList.d.ts

@@ -46,6 +46,10 @@ export interface ServicesRenderProps {
     queryOptions: QueryOptions;
     /** Pagination metadata (limit, offset, count, hasNext) */
     pagingMetadata: PagingMetadata;
+    /** Whether more services can be loaded */
+    hasMore: boolean;
+    /** Function to load more services */
+    loadMore: (count: number) => Promise<void>;
 }
 /**
  * Component that provides services list data through render props.

package/dist/react/core/service-list/ServiceList.js

@@ -48,11 +48,15 @@ export function Services(props) {
     const error = serviceListService.errorSignal.get();
     const queryOptions = serviceListService.queryOptionsSignal.get();
     const pagingMetadata = serviceListService.pagingMetadataSignal.get();
+    const hasMore = serviceListService.hasMoreServicesSignal.get();
+    const loadMore = serviceListService.actions.loadMore;
     return props.children({
         services,
         isLoading,
         error,
         queryOptions,
         pagingMetadata,
+        hasMore,
+        loadMore,
     });
 }

package/dist/react/service/Service.js

@@ -535,17 +535,7 @@ export const StaffMemberRepeater = React.forwardRef((props, ref) => {
     const staffMemberItemWrapper = ({ item: member, children: itemChildren, }) => {
         return (_jsxs(React.Fragment, { children: [_jsx("span", { "data-testid": TestIds.serviceStaffMemberRepeater, children: member.name }), itemChildren] }, member.id));
     };
-    // When asChild is true, provide custom render props
-    if (asChild && typeof children === 'function') {
-        return (_jsx(GenericList.Repeater, { ref: ref, asChild: true, itemWrapper: staffMemberItemWrapper, children: (genericProps) => {
-                const renderProps = {
-                    items: genericProps.items,
-                    itemWrapper: staffMemberItemWrapper,
-                };
-                return children(renderProps);
-            } }));
-    }
-    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: staffMemberItemWrapper, children: children }));
+    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: staffMemberItemWrapper, asChild: asChild, children: children }));
 });
 StaffMemberRepeater.displayName = 'Service.StaffMembers.StaffMemberRepeater';
 /**

package/dist/react/service-list/ServiceList.d.ts

@@ -15,6 +15,8 @@ export interface ServiceListRootProps {
     serviceListConfig?: ServiceListServiceConfig;
     className?: string;
     variant?: ListVariant;
+    /** Number of items to load per page. Defaults to config limit or 100 */
+    pageSize?: number;
 }
 /**
  * Root component that provides the ServiceList service context for rendering services lists.

package/dist/react/service-list/ServiceList.js

@@ -5,8 +5,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import React from 'react';
 import { GenericList, } from '@wix/headless-components/react';
-import { useService } from '@wix/services-manager-react';
-import { ServiceListServiceDefinition } from '../../services/service-list/service-list.js';
 import * as CoreServiceList from '../core/service-list/ServiceList.js';
 import * as Service from '../service/Service.js';
 /**
@@ -44,7 +42,7 @@ var TestIds;
  * ```
  */
 export const Root = React.forwardRef((props, ref) => {
-    const { children, serviceListConfig, className, variant } = props;
+    const { children, serviceListConfig, className, variant, pageSize } = props;
     const serviceConfig = serviceListConfig || {
         services: [],
         options: {
@@ -56,22 +54,29 @@ export const Root = React.forwardRef((props, ref) => {
             },
         },
     };
-    return (_jsx(CoreServiceList.Root, { serviceListConfig: serviceConfig, children: _jsx(RootContent, { className: className, ref: ref, variant: variant, children: children }) }));
+    // Calculate effective page size: prop > config limit > default
+    const effectivePageSize = pageSize ??
+        serviceListConfig?.options?.pagingMetadata?.limit ??
+        DEFAULT_PAGE_SIZE;
+    return (_jsx(CoreServiceList.Root, { serviceListConfig: serviceConfig, children: _jsx(RootContent, { className: className, ref: ref, variant: variant, pageSize: effectivePageSize, children: children }) }));
 });
 Root.displayName = 'ServiceList.Root';
+/**
+ * Default page size for load more
+ */
+const DEFAULT_PAGE_SIZE = 100;
 /**
  * Internal component to handle the Root content with service access
  */
 const RootContent = React.forwardRef((props, ref) => {
-    const { children, className, variant } = props;
-    const serviceListService = useService(ServiceListServiceDefinition);
-    const items = serviceListService.servicesSignal
-        .get()
-        .map((service) => ({
-        ...service,
-        id: service._id,
-    }));
-    return (_jsx(GenericList.Root, { items: items, loadMore: () => serviceListService.actions.loadMore(10), hasMore: serviceListService.hasMoreServicesSignal.get(), isLoading: serviceListService.isLoadingSignal.get(), className: className, ref: ref, "data-testid": TestIds.serviceListRoot, variant: variant, children: children }));
+    const { children, className, variant, pageSize = DEFAULT_PAGE_SIZE } = props;
+    return (_jsx(CoreServiceList.Services, { children: ({ services: servicesList, isLoading, hasMore, loadMore }) => {
+            const items = servicesList.map((service) => ({
+                ...service,
+                id: service._id,
+            }));
+            return (_jsx(GenericList.Root, { items: items, loadMore: () => loadMore(pageSize), hasMore: hasMore, isLoading: isLoading, className: className, ref: ref, "data-testid": TestIds.serviceListRoot, variant: variant, children: children }));
+        } }));
 });
 /**
  * Container for the services list with empty state support.
@@ -126,37 +131,20 @@ Services.displayName = 'ServiceList.Services';
  */
 export const ServiceRepeater = React.forwardRef((props, ref) => {
     const { children, asChild } = props;
-    const serviceListService = useService(ServiceListServiceDefinition);
-    const appId = serviceListService.queryOptionsSignal.get().appId;
     // Check if children is a function that matches ServiceRootChildren pattern
     // (function with single parameter that receives { selected, bookable })
     const isServiceRootFunction = typeof children === 'function' && children.length === 1 && !asChild;
     // Custom itemWrapper that matches ItemWrapperProps signature
     const serviceItemWrapper = (wrapperProps) => {
         const { item: service, children: itemChildren } = wrapperProps;
-        return (_jsx(Service.Root, { service: service, appId: appId, "data-testid": TestIds.serviceListService, "data-service-id": service._id, "data-item-id": service._id, children: isServiceRootFunction
+        return (_jsx(Service.Root, { service: service, "data-testid": TestIds.serviceListService, "data-service-id": service._id, "data-item-id": service._id, children: isServiceRootFunction
                 ? children
                 : itemChildren }, service._id));
     };
-    // Transform children for asChild pattern to provide custom render props
-    const transformedChildren = asChild && typeof children === 'function'
-        ? (genericProps) => {
-            // Create properly typed render props for the consumer
-            const renderProps = {
-                items: genericProps.items,
-                variant: genericProps.variant,
-                itemWrapper: (props) => serviceItemWrapper({
-                    item: props.item,
-                    index: props.index ?? 0,
-                    children: props.children,
-                }),
-            };
-            return children(renderProps, ref);
-        }
-        : isServiceRootFunction
-            ? undefined
-            : children;
-    return (_jsx(GenericList.Repeater, { ref: ref, asChild: asChild, itemWrapper: serviceItemWrapper, children: transformedChildren }));
+    // When isServiceRootFunction is true, children is a function for Service.Root (not repeater render props)
+    // so we pass undefined and let itemWrapper handle the children
+    const repeaterChildren = isServiceRootFunction ? undefined : children;
+    return (_jsx(GenericList.Repeater, { ref: ref, asChild: asChild, itemWrapper: serviceItemWrapper, children: repeaterChildren }));
 });
 ServiceRepeater.displayName = 'ServiceList.ServiceRepeater';
 /**

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

@@ -5,19 +5,31 @@
  */
 import { type Signal } from '@wix/services-definitions/core-services/signals';
 import type { Service } from '@wix/auto_sdk_bookings_services';
-import type { TimeSlot, Resource, NestedTimeSlot } from '@wix/auto_sdk_bookings_availability-time-slots';
+import type { Resource, EventInfo } from '@wix/auto_sdk_bookings_availability-time-slots';
 import type { FormValues } from '@wix/form-public';
 /**
- * BookingSelection contains the service AND its related selections
+ * Minimal time slot data for booking items
  */
-export interface BookingSelection {
+export interface BookingItemTimeSlot {
+    startDate: string;
+    endDate: string;
+    totalCapacity?: number;
+    remainingCapacity?: number;
+    scheduleId?: string;
+    eventInfo?: EventInfo;
+}
+/**
+ * BookingItem contains the service AND its related selections
+ */
+export interface BookingItem {
     /** Unique identifier for this booking instance (allows same service multiple times) */
     instanceId: string;
+    /** The selected service */
     service: Service;
     /** Selected resources (staff members, rooms, etc.) */
-    staff?: Resource;
-    /** Per-service slot data from nested slots (for multi-service bookings) */
-    nestedSlotData?: NestedTimeSlot;
+    resources: Resource[];
+    /** Per-item time slot data */
+    timeSlot?: BookingItemTimeSlot;
 }
 export interface Location {
     id: string;
@@ -27,21 +39,25 @@ export interface Location {
  * BookingService actions - setters only, no API calls
  */
 export interface BookingServiceActions {
-    /** Clears all booking selections and sets a single service (instanceId is auto-generated) */
-    setService(service: Omit<BookingSelection, 'instanceId'>): string;
-    /** Adds a service and returns the generated instanceId */
-    addService(service: Omit<BookingSelection, 'instanceId'>): string;
-    /** Updates a booking selection. If no instanceId provided, updates the first selection. */
-    updateBookingSelection(updates: Partial<Omit<BookingSelection, 'instanceId'>>, instanceId?: string): void;
-    /** Removes a booking selection. If no instanceId provided, removes the first selection. */
-    removeBookingSelection(instanceId?: string): void;
-    clearServices(): void;
-    setTimeSlot(slot: TimeSlot | null): void;
-    clearTimeSlot(): void;
+    /** Clears all booking items and sets a single item (instanceId is auto-generated) */
+    setItem(item: Omit<BookingItem, 'instanceId'>): string;
+    /** Adds an item and returns the generated instanceId */
+    addItem(item: Omit<BookingItem, 'instanceId'>): string;
+    /** Updates a booking item. If no instanceId provided, updates the first item. */
+    updateItem(updates: Partial<Omit<BookingItem, 'instanceId'>>, instanceId?: string): void;
+    /** Removes a booking item. If no instanceId provided, removes the first item. */
+    removeItem(instanceId?: string): void;
+    /** Clears all booking items */
+    clearItems(): void;
+    /** Sets a resource by ID within a booking item. If no instanceId provided, uses the first item. */
+    setResourceById(resourceId: string, resource: Resource, instanceId?: string): void;
+    /** Gets a resource by ID from a booking item. If no instanceId provided, uses the first item. */
+    getResourceById(resourceId: string, instanceId?: string): Resource | undefined;
     setLocation(location: Location | null): void;
     clearLocation(): void;
     setFormValues(values: FormValues | null): void;
     clearFormValues(): void;
+    setNumberOfParticipants(count: number): void;
     clearAll(): void;
 }
 /**
@@ -49,14 +65,14 @@ export interface BookingServiceActions {
  * Pure state management - no API calls
  */
 export interface BookingService {
-    /** Signal containing the booking selections (services with their related data) */
-    bookingSelections: Signal<BookingSelection[]>;
-    /** Signal containing the currently selected time slot */
-    timeSlot: Signal<TimeSlot | null>;
-    /** Signal containing the selected location (derived from timeSlot) */
+    /** Signal containing the booking items (services with their related data) */
+    bookingItems: Signal<BookingItem[]>;
+    /** Signal containing the selected location */
     location: Signal<Location | null>;
     /** Signal containing the form values */
     formValues: Signal<FormValues | null>;
+    /** Signal containing the number of participants */
+    numberOfParticipants: Signal<number>;
     /** Actions for modifying booking state */
     actions: BookingServiceActions;
 }
@@ -70,15 +86,17 @@ export declare const BookingServiceDefinition: string & {
 } & BookingService;
 /**
  * Configuration interface for BookingService
- * Note: location is NOT in config - it's derived internally from timeSlot
+ * Mirrors BookingService structure (without actions and Signal wrappers)
  */
 export interface BookingServiceConfig {
-    /** Optional initial booking selections to pre-populate */
-    initialBookingSelections?: BookingSelection[];
-    /** Optional initial time slot to pre-populate */
-    initialTimeSlot?: TimeSlot | null;
+    /** Optional initial booking items to pre-populate */
+    bookingItems?: BookingItem[];
+    /** Optional initial location */
+    location?: Location | null;
     /** Optional initial form values */
-    initialFormValues?: FormValues | null;
+    formValues?: FormValues | null;
+    /** Optional initial number of participants (defaults to 1) */
+    numberOfParticipants?: number;
 }
 /**
  * Implementation of BookingService
@@ -98,8 +116,8 @@ export interface BookingServiceConfig {
  *
  * // In any page - access booking data
  * <Booking.Data>
- *   {({ services, timeSlot, location, formValues, actions }) => (
- *     <div>{services.map(s => s.service.name).join(', ')}</div>
+ *   {({ bookingItems, location, formValues, actions }) => (
+ *     <div>{bookingItems.map(item => item.service.name).join(', ')}</div>
  *   )}
  * </Booking.Data>
  * ```