@wix/headless-bookings 0.0.13 → 0.0.15

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

@@ -0,0 +1,357 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Core TimeSlot Components
+ * Provides low-level access to TimeSlot data via render props
+ *
+ * Note: These components must be used within TimeSlotList.TimeSlotRepeater
+ * which provides the TimeSlotProvider context.
+ */
+import React from 'react';
+import { useTimeSlotListService } from './TimeSlotList.js';
+const TimeSlotContext = React.createContext(null);
+/**
+ * Hook to access TimeSlot context
+ * @throws Error if used outside of TimeSlotProvider
+ */
+export function useTimeSlotContext() {
+    const context = React.useContext(TimeSlotContext);
+    if (!context) {
+        throw new Error('TimeSlot components must be used within TimeSlotList.TimeSlotRepeater');
+    }
+    return context;
+}
+/**
+ * Provider component used by TimeSlotRepeater to provide context.
+ * Not used directly by consumers - only by TimeSlotList.TimeSlotRepeater.
+ */
+export function TimeSlotProvider(props) {
+    const { children, slot } = props;
+    const service = useTimeSlotListService();
+    const selection = service.selection.get();
+    const isSelected = selection?.slot?.id === slot.id;
+    const selectSlot = () => {
+        service.actions.selectSlot(slot);
+    };
+    const contextValue = {
+        slot,
+        isSelected,
+        selectSlot,
+    };
+    return (_jsx(TimeSlotContext.Provider, { value: contextValue, children: children }));
+}
+const LocationContext = React.createContext(null);
+/**
+ * Hook to access Location context
+ * @throws Error if used outside of LocationProvider
+ */
+export function useLocationContext() {
+    const context = React.useContext(LocationContext);
+    if (!context) {
+        throw new Error('Location components must be used within LocationProvider');
+    }
+    return context;
+}
+/**
+ * Provider component used by LocationRepeater to provide context.
+ * Not used directly by consumers - only by TimeSlot.LocationRepeater.
+ */
+export function LocationProvider(props) {
+    const { children, location } = props;
+    const service = useTimeSlotListService();
+    const selectLocation = () => {
+        service.actions.selectLocation(location.id);
+    };
+    const contextValue = {
+        location,
+        selectLocation,
+    };
+    return (_jsx(LocationContext.Provider, { value: contextValue, children: children }));
+}
+const StaffMemberContext = React.createContext(null);
+/**
+ * Hook to access StaffMember context
+ * @throws Error if used outside of StaffMemberProvider
+ */
+export function useStaffMemberContext() {
+    const context = React.useContext(StaffMemberContext);
+    if (!context) {
+        throw new Error('StaffMember components must be used within StaffMemberProvider');
+    }
+    return context;
+}
+/**
+ * Provider component used by StaffMemberRepeater to provide context.
+ * Not used directly by consumers - only by TimeSlot.StaffMemberRepeater.
+ */
+export function StaffMemberProvider(props) {
+    const { children, staffMember } = props;
+    const service = useTimeSlotListService();
+    const selectStaffMember = () => {
+        service.actions.selectStaffMember(staffMember.id);
+    };
+    const contextValue = {
+        staffMember,
+        selectStaffMember,
+    };
+    return (_jsx(StaffMemberContext.Provider, { value: contextValue, children: children }));
+}
+/**
+ * Core component that provides access to time slot info via render props.
+ * Includes start/end dates, duration, bookable status, and selection state.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlot.Info>
+ *   {({ startDate, endDate, durationInMinutes, bookable, isSelected }) => (
+ *     <div>
+ *       <span>{startDate}</span>
+ *       <span>{durationInMinutes} min</span>
+ *     </div>
+ *   )}
+ * </TimeSlot.Info>
+ * ```
+ */
+export function Info(props) {
+    const { slot, isSelected } = useTimeSlotContext();
+    const startDate = slot.localStartDate ?? undefined;
+    const endDate = slot.localEndDate ?? undefined;
+    const bookable = slot.bookable ?? false;
+    // Calculate duration from start and end dates
+    let durationInMinutes = null;
+    if (startDate && endDate) {
+        const startTime = new Date(startDate).getTime();
+        const endTime = new Date(endDate).getTime();
+        durationInMinutes = Math.round((endTime - startTime) / (1000 * 60));
+    }
+    return props.children({
+        startDate,
+        endDate,
+        durationInMinutes,
+        bookable,
+        isSelected,
+        slot,
+    });
+}
+/**
+ * Core component that provides slot actions via render props.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlot.Actions>
+ *   {({ selectSlot, isSelected, bookable, clearPreferences, shouldShowClearPreferences }) => (
+ *     <div>
+ *       <button onClick={selectSlot} disabled={!bookable}>
+ *         {isSelected ? 'Selected' : 'Select'}
+ *       </button>
+ *       {shouldShowClearPreferences && (
+ *          <button onClick={clearPreferences}>Change</button>
+ *       )}
+ *     </div>
+ *   )}
+ * </TimeSlot.Actions>
+ * ```
+ */
+export function Actions(props) {
+    const { selectSlot, slot, isSelected } = useTimeSlotContext();
+    const service = useTimeSlotListService();
+    const selection = service.selection.get();
+    const bookable = slot.bookable ?? false;
+    // Check if at least one preference is selected
+    const hasPreferenceSelected = !!selection?.locationId || !!selection?.staffMemberId;
+    // Check if there are multiple options
+    const locationCount = slot.staffByLocation.length;
+    const staffCount = new Set(slot.staffByLocation.flatMap(({ staffMembers }) => staffMembers.map((s) => s.id))).size;
+    const hasMultipleOptions = locationCount > 1 || staffCount > 1;
+    const shouldShowClearPreferences = hasPreferenceSelected && hasMultipleOptions;
+    const clearPreferences = shouldShowClearPreferences
+        ? service.actions.clearPreferences
+        : undefined;
+    return props.children({
+        selectSlot,
+        clearPreferences,
+        slot,
+        bookable,
+        isSelected,
+    });
+}
+/**
+ * Core component that provides access to time slot locations via render props.
+ * Extracts locations from slot.staffByLocation and enriches with name from originalSlots.
+ * Each location includes isSelected and isSelectable based on current selection state.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreTimeSlot.Locations>
+ *   {({ locations, locationsCount, selectLocation }) => (
+ *     <GenericList.Root items={locations}>
+ *       {children}
+ *     </GenericList.Root>
+ *   )}
+ * </CoreTimeSlot.Locations>
+ * ```
+ */
+export function Locations(props) {
+    const { slot } = useTimeSlotContext();
+    const service = useTimeSlotListService();
+    const selection = service.selection.get();
+    const selectedLocationId = selection?.locationId ?? null;
+    const selectedStaffMemberId = selection?.staffMemberId ?? null;
+    // Build locations array from staffByLocation (names already included)
+    const locations = slot.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
+            ? staffMembers.some((s) => s.id === selectedStaffMemberId)
+            : true;
+        return {
+            id: location.id,
+            name: location.name,
+            isSelected: selectedLocationId === location.id,
+            isSelectable,
+        };
+    });
+    return props.children({
+        locations,
+        selectLocation: service.actions.selectLocation,
+    });
+}
+/**
+ * Core component that provides access to location info via render props.
+ * Must be used within LocationProvider.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <LocationInfo>
+ *   {({ name, isSelected, isSelectable }) => (
+ *     <span>{name}</span>
+ *   )}
+ * </LocationInfo>
+ * ```
+ */
+export function LocationInfo(props) {
+    const { location } = useLocationContext();
+    return props.children({
+        name: location.name,
+        isSelected: location.isSelected,
+        isSelectable: location.isSelectable,
+        location,
+    });
+}
+/**
+ * Core component that provides location actions via render props.
+ * Must be used within LocationProvider.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <LocationActions>
+ *   {({ selectLocation, isSelected, isSelectable }) => (
+ *     <button onClick={selectLocation} disabled={!isSelectable}>
+ *       {isSelected ? 'Selected' : 'Select'}
+ *     </button>
+ *   )}
+ * </LocationActions>
+ * ```
+ */
+export function LocationActions(props) {
+    const { location, selectLocation } = useLocationContext();
+    return props.children({
+        selectLocation,
+        isSelected: location.isSelected,
+        isSelectable: location.isSelectable,
+        location,
+    });
+}
+/**
+ * Core component that provides access to time slot staff members via render props.
+ * Extracts unique staff members from slot.staffByLocation (names already included).
+ * Each staff member includes isSelected and isSelectable based on current selection state.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreTimeSlot.StaffMembers>
+ *   {({ staffMembers, selectStaffMember }) => (
+ *     <GenericList.Root items={staffMembers}>
+ *       {children}
+ *     </GenericList.Root>
+ *   )}
+ * </CoreTimeSlot.StaffMembers>
+ * ```
+ */
+export function StaffMembers(props) {
+    const { slot } = useTimeSlotContext();
+    const service = useTimeSlotListService();
+    const selection = service.selection.get();
+    const selectedStaffMemberId = selection?.staffMemberId ?? null;
+    const selectedLocationId = selection?.locationId ?? null;
+    // Build unique staff members array from staffByLocation
+    // Flatten all staff members with their location IDs, then dedupe by ID
+    const allStaff = slot.staffByLocation.flatMap(({ location, staffMembers }) => staffMembers.map((s) => ({ ...s, locationId: location.id })));
+    // Group by staff ID to get all locations per staff member
+    const grouped = Object.groupBy(allStaff, (s) => s.id);
+    const staffMembers = Object.entries(grouped).map(([id, entries]) => ({
+        id,
+        name: entries[0].name,
+        isSelected: selectedStaffMemberId === id,
+        isSelectable: !selectedLocationId ||
+            entries.some((e) => e.locationId === selectedLocationId),
+    }));
+    return props.children({
+        staffMembers,
+        selectStaffMember: service.actions.selectStaffMember,
+    });
+}
+/**
+ * Core component that provides access to staff member info via render props.
+ * Must be used within StaffMemberProvider.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <StaffMemberInfo>
+ *   {({ name, isSelected, isSelectable }) => (
+ *     <span>{name}</span>
+ *   )}
+ * </StaffMemberInfo>
+ * ```
+ */
+export function StaffMemberInfo(props) {
+    const { staffMember } = useStaffMemberContext();
+    return props.children({
+        name: staffMember.name,
+        isSelected: staffMember.isSelected,
+        isSelectable: staffMember.isSelectable,
+        staffMember,
+    });
+}
+/**
+ * Core component that provides staff member actions via render props.
+ * Must be used within StaffMemberProvider.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <StaffMemberActions>
+ *   {({ selectStaffMember, isSelected, isSelectable }) => (
+ *     <button onClick={selectStaffMember} disabled={!isSelectable}>
+ *       {isSelected ? 'Selected' : 'Select'}
+ *     </button>
+ *   )}
+ * </StaffMemberActions>
+ * ```
+ */
+export function StaffMemberActions(props) {
+    const { staffMember, selectStaffMember } = useStaffMemberContext();
+    return props.children({
+        selectStaffMember,
+        isSelected: staffMember.isSelected,
+        isSelectable: staffMember.isSelectable,
+        staffMember,
+    });
+}

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

@@ -0,0 +1,84 @@
+/**
+ * Core TimeSlotList Components
+ * Provides low-level access to TimeSlotListService via render props
+ */
+import React from 'react';
+import { type TimeSlotListServiceAPI, type TimeSlotListServiceConfig, type TimeSlot } from '../../../services/time-slot-list/index.js';
+/**
+ * Hook to access TimeSlotListService from within TimeSlotList.Root
+ */
+export declare const useTimeSlotListService: () => TimeSlotListServiceAPI;
+/**
+ * Props for Root component
+ */
+export interface RootProps {
+    children: React.ReactNode;
+    config?: TimeSlotListServiceConfig;
+}
+/**
+ * Root component that provides TimeSlotListService context to its children.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Root config={{ services, timeSlots, timezone }}>
+ *   {children}
+ * </Root>
+ * ```
+ */
+export declare function Root(props: RootProps): React.ReactNode;
+/**
+ * Props for Timezone render prop component
+ */
+export interface TimezoneProps {
+    children: (data: {
+        timezone: string | undefined;
+    }) => React.ReactNode;
+}
+/**
+ * Core component that provides access to the current timezone via render props.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Timezone>
+ *   {({ timezone }) => (
+ *     <span>{timezone}</span>
+ *   )}
+ * </Timezone>
+ * ```
+ */
+export declare function Timezone(props: TimezoneProps): React.ReactNode;
+/**
+ * Render props for ListData component
+ */
+export interface ListDataRenderProps {
+    timeSlots: TimeSlot[];
+    hasMore: boolean;
+    isLoading: boolean;
+    error: string | null;
+    loadMore: () => Promise<void>;
+}
+/**
+ * Props for ListData render prop component
+ */
+export interface ListDataProps {
+    children: (data: ListDataRenderProps) => React.ReactNode;
+}
+/**
+ * Core component that provides access to time slots list data via render props.
+ * Use this to build list containers with GenericList.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ListData>
+ *   {({ timeSlots, hasMore, isLoading, loadMore }) => (
+ *     <GenericList.Root items={timeSlots} hasMore={hasMore} isLoading={isLoading} loadMore={loadMore}>
+ *       {children}
+ *     </GenericList.Root>
+ *   )}
+ * </ListData>
+ * ```
+ */
+export declare function ListData(props: ListDataProps): React.ReactNode;

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

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useService, WixServices } from '@wix/services-manager-react';
+import { createServicesMap } from '@wix/services-manager';
+import { TimeSlotListServiceDefinition, TimeSlotListService, } from '../../../services/time-slot-list/index.js';
+/**
+ * Hook to access TimeSlotListService from within TimeSlotList.Root
+ */
+export const useTimeSlotListService = () => {
+    return useService(TimeSlotListServiceDefinition);
+};
+/**
+ * Root component that provides TimeSlotListService context to its children.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Root config={{ services, timeSlots, timezone }}>
+ *   {children}
+ * </Root>
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(TimeSlotListServiceDefinition, TimeSlotListService, props.config || {}), children: props.children }));
+}
+/**
+ * Core component that provides access to the current timezone via render props.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Timezone>
+ *   {({ timezone }) => (
+ *     <span>{timezone}</span>
+ *   )}
+ * </Timezone>
+ * ```
+ */
+export function Timezone(props) {
+    const service = useTimeSlotListService();
+    const timezone = service.timezone.get();
+    return props.children({ timezone });
+}
+/**
+ * Core component that provides access to time slots list data via render props.
+ * Use this to build list containers with GenericList.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ListData>
+ *   {({ timeSlots, hasMore, isLoading, loadMore }) => (
+ *     <GenericList.Root items={timeSlots} hasMore={hasMore} isLoading={isLoading} loadMore={loadMore}>
+ *       {children}
+ *     </GenericList.Root>
+ *   )}
+ * </ListData>
+ * ```
+ */
+export function ListData(props) {
+    const service = useTimeSlotListService();
+    return props.children({
+        timeSlots: service.timeSlots.get(),
+        hasMore: service.hasMore.get(),
+        isLoading: service.isLoading.get(),
+        error: service.error.get(),
+        loadMore: service.actions.loadMore,
+    });
+}

package/dist/react/index.d.ts

@@ -1,4 +1,5 @@
 export * as Booking from './booking/Booking.js';
 export * as Service from './service/Service.js';
+export * as TimeSlotList from './time-slot-list/TimeSlotList.js';
 export * as ServiceList from './service-list/ServiceList.js';
 export * as Location from './location/Location.js';

package/dist/react/index.js

@@ -1,4 +1,5 @@
 export * as Booking from './booking/Booking.js';
 export * as Service from './service/Service.js';
+export * as TimeSlotList from './time-slot-list/TimeSlotList.js';
 export * as ServiceList from './service-list/ServiceList.js';
 export * as Location from './location/Location.js';

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';
 /**