@wix/headless-bookings 0.0.16 → 0.0.17

package/cjs/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/cjs/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/cjs/dist/react/core/time-slot-list/TimeSlot.d.ts

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

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

@@ -7,7 +7,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * which provides the TimeSlotProvider context.
  */
 import React from 'react';
-import { useTimeSlotListService } from './TimeSlotList.js';
+import { useService } from '@wix/services-manager-react';
+import { TimeSlotListServiceDefinition, } from '../../../services/time-slot-list/time-slot-list.def.js';
 const TimeSlotContext = React.createContext(null);
 /**
  * Hook to access TimeSlot context
@@ -25,17 +26,17 @@ export function useTimeSlotContext() {
  * Not used directly by consumers - only by TimeSlotList.TimeSlotRepeater.
  */
 export function TimeSlotProvider(props) {
-    const { children, slot } = props;
-    const service = useTimeSlotListService();
+    const { children, timeSlot } = props;
+    const service = useService(TimeSlotListServiceDefinition);
     const selection = service.selection.get();
-    const isSelected = selection?.slot?.id === slot.id;
-    const selectSlot = () => {
-        service.actions.selectSlot(slot);
+    const isSelected = selection?.slot?.id === timeSlot.id;
+    const selectTimeSlot = () => {
+        service.actions.selectSlot(timeSlot);
     };
     const contextValue = {
-        slot,
+        timeSlot,
         isSelected,
-        selectSlot,
+        selectTimeSlot,
     };
     return (_jsx(TimeSlotContext.Provider, { value: contextValue, children: children }));
 }
@@ -57,7 +58,7 @@ export function useLocationContext() {
  */
 export function LocationProvider(props) {
     const { children, location } = props;
-    const service = useTimeSlotListService();
+    const service = useService(TimeSlotListServiceDefinition);
     const selectLocation = () => {
         service.actions.selectLocation(location.id);
     };
@@ -85,7 +86,7 @@ export function useStaffMemberContext() {
  */
 export function StaffMemberProvider(props) {
     const { children, staffMember } = props;
-    const service = useTimeSlotListService();
+    const service = useService(TimeSlotListServiceDefinition);
     const selectStaffMember = () => {
         service.actions.selectStaffMember(staffMember.id);
     };
@@ -113,10 +114,10 @@ export function StaffMemberProvider(props) {
  * ```
  */
 export function Info(props) {
-    const { slot, isSelected } = useTimeSlotContext();
-    const startDate = slot.localStartDate ?? undefined;
-    const endDate = slot.localEndDate ?? undefined;
-    const bookable = slot.bookable ?? false;
+    const { timeSlot, isSelected } = useTimeSlotContext();
+    const startDate = timeSlot.localStartDate ?? undefined;
+    const endDate = timeSlot.localEndDate ?? undefined;
+    const bookable = timeSlot.bookable ?? false;
     // Calculate duration from start and end dates
     let durationInMinutes = null;
     if (startDate && endDate) {
@@ -130,7 +131,7 @@ export function Info(props) {
         durationInMinutes,
         bookable,
         isSelected,
-        slot,
+        timeSlot,
     });
 }
 /**
@@ -154,24 +155,24 @@ export function Info(props) {
  * ```
  */
 export function Actions(props) {
-    const { selectSlot, slot, isSelected } = useTimeSlotContext();
-    const service = useTimeSlotListService();
+    const { selectTimeSlot, timeSlot, isSelected } = useTimeSlotContext();
+    const service = useService(TimeSlotListServiceDefinition);
     const selection = service.selection.get();
-    const bookable = slot.bookable ?? false;
+    const bookable = timeSlot.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 locationCount = timeSlot.staffByLocation.length;
+    const staffCount = new Set(timeSlot.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,
+        selectTimeSlot,
         clearPreferences,
-        slot,
+        timeSlot,
         bookable,
         isSelected,
     });
@@ -181,6 +182,8 @@ export function Actions(props) {
  * Extracts locations from slot.staffByLocation and enriches with name from originalSlots.
  * Each location includes isSelected and isSelectable based on current selection state.
  *
+ * Returns null if there's only 1 location (nothing to choose from).
+ *
  * @component
  * @example
  * ```tsx
@@ -194,13 +197,13 @@ export function Actions(props) {
  * ```
  */
 export function Locations(props) {
-    const { slot } = useTimeSlotContext();
-    const service = useTimeSlotListService();
+    const { timeSlot } = useTimeSlotContext();
+    const service = useService(TimeSlotListServiceDefinition);
     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 }) => {
+    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
@@ -214,6 +217,10 @@ export function Locations(props) {
             isSelectable,
         };
     });
+    // Return null if only 1 location - nothing to choose from
+    if (locations.length <= 1) {
+        return null;
+    }
     return props.children({
         locations,
         selectLocation: service.actions.selectLocation,
@@ -272,6 +279,8 @@ export function LocationActions(props) {
  * Extracts unique staff members from slot.staffByLocation (names already included).
  * Each staff member includes isSelected and isSelectable based on current selection state.
  *
+ * Returns null if there's only 1 staff member (nothing to choose from).
+ *
  * @component
  * @example
  * ```tsx
@@ -285,14 +294,14 @@ export function LocationActions(props) {
  * ```
  */
 export function StaffMembers(props) {
-    const { slot } = useTimeSlotContext();
-    const service = useTimeSlotListService();
+    const { timeSlot } = useTimeSlotContext();
+    const service = useService(TimeSlotListServiceDefinition);
     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 })));
+    const allStaff = timeSlot.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]) => ({
@@ -302,6 +311,10 @@ export function StaffMembers(props) {
         isSelectable: !selectedLocationId ||
             entries.some((e) => e.locationId === selectedLocationId),
     }));
+    // Return null if only 1 staff member - nothing to choose from
+    if (staffMembers.length <= 1) {
+        return null;
+    }
     return props.children({
         staffMembers,
         selectStaffMember: service.actions.selectStaffMember,

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

@@ -3,11 +3,7 @@
  * 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;
+import { type TimeSlotListServiceConfig, type TimeSlot } from '../../../services/time-slot-list/index.js';
 /**
  * Props for Root component
  */
@@ -32,7 +28,10 @@ export declare function Root(props: RootProps): React.ReactNode;
  */
 export interface TimezoneProps {
     children: (data: {
+        /** Raw IANA timezone string (e.g., "America/New_York") */
         timezone: string | undefined;
+        /** User-friendly display name (e.g., "Eastern Standard Time") */
+        displayName: string;
     }) => React.ReactNode;
 }
 /**
@@ -42,8 +41,8 @@ export interface TimezoneProps {
  * @example
  * ```tsx
  * <Timezone>
- *   {({ timezone }) => (
- *     <span>{timezone}</span>
+ *   {({ timezone, displayName }) => (
+ *     <span>{displayName}</span>  // "Eastern Standard Time"
  *   )}
  * </Timezone>
  * ```
@@ -82,3 +81,36 @@ export interface ListDataProps {
  * ```
  */
 export declare function ListData(props: ListDataProps): React.ReactNode;
+/**
+ * Render props for DateRange component
+ */
+export interface DateRangeRenderProps {
+    startDate: Date;
+    endDate: Date;
+    setDateRange: (start: Date, end: Date) => void;
+}
+/**
+ * Props for DateRange render prop component
+ */
+export interface DateRangeProps {
+    children: (data: DateRangeRenderProps) => React.ReactNode;
+}
+/**
+ * Core component that provides access to date range data and actions via render props.
+ * Use this to build date range inputs for calendar/week view navigation.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <DateRange>
+ *   {({ startDate, endDate, setDateRange }) => (
+ *     <MyDateRangePicker
+ *       start={startDate}
+ *       end={endDate}
+ *       onChange={(start, end) => setDateRange(start, end)}
+ *     />
+ *   )}
+ * </DateRange>
+ * ```
+ */
+export declare function DateRange(props: DateRangeProps): React.ReactNode;

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

@@ -2,12 +2,6 @@ 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.
  *
@@ -22,6 +16,30 @@ export const useTimeSlotListService = () => {
 export function Root(props) {
     return (_jsx(WixServices, { servicesMap: createServicesMap().addService(TimeSlotListServiceDefinition, TimeSlotListService, props.config || {}), children: props.children }));
 }
+// ============================================================================
+// Timezone Component
+// ============================================================================
+/**
+ * Gets the display name for a timezone using Intl.DateTimeFormat
+ * @param timezone - IANA timezone string (e.g., "America/New_York")
+ * @returns User-friendly display name (e.g., "Eastern Standard Time")
+ */
+function getTimezoneDisplayName(timezone) {
+    if (!timezone)
+        return '';
+    try {
+        const formatter = new Intl.DateTimeFormat('en', {
+            timeZone: timezone,
+            timeZoneName: 'long',
+        });
+        const parts = formatter.formatToParts(new Date());
+        const timeZonePart = parts.find((part) => part.type === 'timeZoneName');
+        return timeZonePart?.value || timezone;
+    }
+    catch {
+        return timezone;
+    }
+}
 /**
  * Core component that provides access to the current timezone via render props.
  *
@@ -29,16 +47,17 @@ export function Root(props) {
  * @example
  * ```tsx
  * <Timezone>
- *   {({ timezone }) => (
- *     <span>{timezone}</span>
+ *   {({ timezone, displayName }) => (
+ *     <span>{displayName}</span>  // "Eastern Standard Time"
  *   )}
  * </Timezone>
  * ```
  */
 export function Timezone(props) {
-    const service = useTimeSlotListService();
+    const service = useService(TimeSlotListServiceDefinition);
     const timezone = service.timezone.get();
-    return props.children({ timezone });
+    const displayName = getTimezoneDisplayName(timezone);
+    return props.children({ timezone, displayName });
 }
 /**
  * Core component that provides access to time slots list data via render props.
@@ -57,7 +76,7 @@ export function Timezone(props) {
  * ```
  */
 export function ListData(props) {
-    const service = useTimeSlotListService();
+    const service = useService(TimeSlotListServiceDefinition);
     return props.children({
         timeSlots: service.timeSlots.get(),
         hasMore: service.hasMore.get(),
@@ -66,3 +85,29 @@ export function ListData(props) {
         loadMore: service.actions.loadMore,
     });
 }
+/**
+ * Core component that provides access to date range data and actions via render props.
+ * Use this to build date range inputs for calendar/week view navigation.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <DateRange>
+ *   {({ startDate, endDate, setDateRange }) => (
+ *     <MyDateRangePicker
+ *       start={startDate}
+ *       end={endDate}
+ *       onChange={(start, end) => setDateRange(start, end)}
+ *     />
+ *   )}
+ * </DateRange>
+ * ```
+ */
+export function DateRange(props) {
+    const service = useService(TimeSlotListServiceDefinition);
+    return props.children({
+        startDate: service.startDate.get(),
+        endDate: service.endDate.get(),
+        setDateRange: service.actions.setDateRange,
+    });
+}

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

@@ -128,13 +128,13 @@ Duration.displayName = 'TimeSlot.Duration';
  */
 export const Select = React.forwardRef((props, ref) => {
     const { asChild, children, className, label } = props;
-    return (_jsx(CoreTimeSlot.Actions, { children: ({ selectSlot, isSelected, bookable }) => {
+    return (_jsx(CoreTimeSlot.Actions, { children: ({ selectTimeSlot, isSelected, bookable }) => {
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotActionSelect, "data-selected": isSelected, "data-bookable": bookable, customElement: children, customElementProps: {
-                    onClick: selectSlot,
+                    onClick: selectTimeSlot,
                     disabled: !bookable,
                     isSelected,
                     bookable,
-                }, children: _jsx("button", { onClick: selectSlot, disabled: !bookable, children: label }) }));
+                }, children: _jsx("button", { onClick: selectTimeSlot, disabled: !bookable, children: label }) }));
         } }));
 });
 Select.displayName = 'TimeSlot.Actions.Select';