@wix/headless-bookings 0.0.26 → 0.0.28

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

@@ -6,7 +6,7 @@
  * 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 '@wix/auto_sdk_bookings_availability-time-slots';
 /**
  * Context value for TimeSlot components
  */
@@ -35,30 +35,6 @@ export interface TimeSlotProviderProps {
  * Not used directly by consumers - only by TimeSlotList.TimeSlotRepeater.
  */
 export declare function TimeSlotProvider(props: TimeSlotProviderProps): React.ReactNode;
-/**
- * Context value for Location components
- */
-export interface LocationContextValue {
-    location: LocationData;
-    selectLocation: () => void;
-}
-/**
- * Hook to access Location context
- * @throws Error if used outside of LocationProvider
- */
-export declare function useLocationContext(): LocationContextValue;
-/**
- * Props for LocationProvider
- */
-export interface LocationProviderProps {
-    children: React.ReactNode;
-    location: LocationData;
-}
-/**
- * Provider component used by LocationRepeater to provide context.
- * Not used directly by consumers - only by TimeSlot.LocationRepeater.
- */
-export declare function LocationProvider(props: LocationProviderProps): React.ReactNode;
 /**
  * Context value for StaffMember components
  */
@@ -94,6 +70,8 @@ export interface InfoProps {
         endDate: Date;
         /** Calculated duration in minutes */
         durationInMinutes: number;
+        /** Location name */
+        locationName: string;
         /** Whether the timeSlot is bookable */
         bookable: boolean;
         /** Whether this timeSlot is currently selected */
@@ -127,8 +105,8 @@ export interface ActionsProps {
     children: (data: {
         /** Action to select this timeSlot */
         selectTimeSlot: () => void;
-        /** Action to clear preferences */
-        clearPreferences?: () => void;
+        /** Action to clear staff selection */
+        clearStaffSelection?: () => void;
         /** The raw timeSlot object */
         timeSlot: TimeSlotType;
         /** Whether the timeSlot is bookable */
@@ -158,112 +136,6 @@ export interface ActionsProps {
  * ```
  */
 export declare function Actions(props: ActionsProps): React.ReactNode;
-/**
- * Location data with selection state
- */
-export interface LocationData {
-    /** Location ID */
-    id: string;
-    /** Location name */
-    name: string;
-    /** Whether this location is currently selected */
-    isSelected: boolean;
-    /** Whether this location is selectable (compatible with selected staff, or no staff selected) */
-    isSelectable: boolean;
-}
-/**
- * Props for Locations render prop component
- */
-export interface LocationsProps {
-    children: (data: {
-        /** Array of locations with selection state */
-        locations: LocationData[];
-        /** Action to select a location */
-        selectLocation: (locationId: string) => void;
-    }) => React.ReactNode;
-}
-/**
- * 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.
- *
- * Returns null if there's only 1 location (nothing to choose from).
- *
- * @component
- * @example
- * ```tsx
- * <CoreTimeSlot.Locations>
- *   {({ locations, locationsCount, selectLocation }) => (
- *     <GenericList.Root items={locations}>
- *       {children}
- *     </GenericList.Root>
- *   )}
- * </CoreTimeSlot.Locations>
- * ```
- */
-export declare function Locations(props: LocationsProps): React.ReactNode;
-/**
- * Props for LocationInfo render prop component
- */
-export interface LocationInfoProps {
-    children: (data: {
-        /** Location name */
-        name: string;
-        /** Whether this location is currently selected */
-        isSelected: boolean;
-        /** Whether this location is selectable */
-        isSelectable: boolean;
-        /** The raw location object */
-        location: LocationData;
-    }) => React.ReactNode;
-}
-/**
- * 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 declare function LocationInfo(props: LocationInfoProps): React.ReactNode;
-/**
- * Props for LocationActions render prop component
- */
-export interface LocationActionsProps {
-    children: (data: {
-        /** Action to select this location */
-        selectLocation: () => void;
-        /** Whether this location is currently selected */
-        isSelected: boolean;
-        /** Whether this location is selectable */
-        isSelectable: boolean;
-        /** The raw location object */
-        location: LocationData;
-    }) => React.ReactNode;
-}
-/**
- * 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 declare function LocationActions(props: LocationActionsProps): React.ReactNode;
 /**
  * Staff member data with selection state
  */
@@ -274,8 +146,6 @@ export interface StaffMemberData {
     name: string;
     /** Whether this staff member is currently selected */
     isSelected: boolean;
-    /** Whether this staff member is selectable (works at selected location, or no location selected) */
-    isSelectable: boolean;
 }
 /**
  * Props for StaffMembers render prop component
@@ -291,7 +161,7 @@ export interface StaffMembersProps {
 /**
  * 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.
+ * Each staff member includes isSelected based on current selection state.
  *
  * Returns null if there's only 1 staff member (nothing to choose from).
  *
@@ -317,8 +187,6 @@ export interface StaffMemberInfoProps {
         name: string;
         /** Whether this staff member is currently selected */
         isSelected: boolean;
-        /** Whether this staff member is selectable */
-        isSelectable: boolean;
         /** The raw staff member object */
         staffMember: StaffMemberData;
     }) => React.ReactNode;
@@ -331,7 +199,7 @@ export interface StaffMemberInfoProps {
  * @example
  * ```tsx
  * <StaffMemberInfo>
- *   {({ name, isSelected, isSelectable }) => (
+ *   {({ name, isSelected }) => (
  *     <span>{name}</span>
  *   )}
  * </StaffMemberInfo>
@@ -347,8 +215,6 @@ export interface StaffMemberActionsProps {
         selectStaffMember: () => void;
         /** Whether this staff member is currently selected */
         isSelected: boolean;
-        /** Whether this staff member is selectable */
-        isSelectable: boolean;
         /** The raw staff member object */
         staffMember: StaffMemberData;
     }) => React.ReactNode;
@@ -361,8 +227,8 @@ export interface StaffMemberActionsProps {
  * @example
  * ```tsx
  * <StaffMemberActions>
- *   {({ selectStaffMember, isSelected, isSelectable }) => (
- *     <button onClick={selectStaffMember} disabled={!isSelectable}>
+ *   {({ selectStaffMember, isSelected }) => (
+ *     <button onClick={selectStaffMember}>
  *       {isSelected ? 'Selected' : 'Select'}
  *     </button>
  *   )}

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

@@ -8,8 +8,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import React from 'react';
 import { useService } from '@wix/services-manager-react';
-import { TimeSlotListServiceDefinition, } from '../../../services/time-slot-list/time-slot-list.def.js';
-import { ANY_STAFF_MEMBER_ID } from '../../../services/booking/booking.js';
+import { TimeSlotListServiceDefinition } from '../../../services/time-slot-list/time-slot-list.def.js';
+import { ANY_STAFF_MEMBER_ID, BookingServiceDefinition, } from '../../../services/booking/booking.js';
 const TimeSlotContext = React.createContext(null);
 /**
  * Hook to access TimeSlot context
@@ -29,8 +29,11 @@ export function useTimeSlotContext() {
 export function TimeSlotProvider(props) {
     const { children, timeSlot } = props;
     const service = useService(TimeSlotListServiceDefinition);
-    const selection = service.selection.get();
-    const isSelected = selection?.slot?.id === timeSlot.id;
+    const bookingService = useService(BookingServiceDefinition);
+    const selectedTimeSlot = bookingService.serviceSelections.get()[0]?.timeSlot;
+    const selectedLocationId = bookingService.location.get()?.id;
+    const isSelected = selectedTimeSlot?.startDate === timeSlot.localStartDate &&
+        selectedLocationId === timeSlot.location?._id;
     const selectTimeSlot = () => {
         service.actions.selectSlot(timeSlot);
     };
@@ -41,34 +44,6 @@ export function TimeSlotProvider(props) {
     };
     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 = useService(TimeSlotListServiceDefinition);
-    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
@@ -118,6 +93,7 @@ export function Info(props) {
     const { timeSlot, isSelected } = useTimeSlotContext();
     const startDate = new Date(timeSlot.localStartDate);
     const endDate = new Date(timeSlot.localEndDate);
+    const locationName = timeSlot.location?.name ?? '';
     const bookable = timeSlot.bookable ?? false;
     // Calculate duration from start and end dates
     const durationInMinutes = Math.round((endDate.getTime() - startDate.getTime()) / (1000 * 60));
@@ -125,6 +101,7 @@ export function Info(props) {
         startDate,
         endDate,
         durationInMinutes,
+        locationName,
         bookable,
         isSelected,
         timeSlot,
@@ -153,128 +130,26 @@ export function Info(props) {
 export function Actions(props) {
     const { selectTimeSlot, timeSlot, isSelected } = useTimeSlotContext();
     const service = useService(TimeSlotListServiceDefinition);
-    const selection = service.selection.get();
+    const bookingService = useService(BookingServiceDefinition);
     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 = 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
+    const selectedStaffMemberId = bookingService.serviceSelections.get()[0]?.resources?.[0]?._id;
+    const staffFromSlot = timeSlot.availableResources[0].resources.map((r) => r._id);
+    const shouldShowClearStaffSelection = !!selectedStaffMemberId && staffFromSlot.length > 1;
+    const clearStaffSelection = shouldShowClearStaffSelection
+        ? service.actions.clearStaffSelection
         : undefined;
     return props.children({
         selectTimeSlot,
-        clearPreferences,
+        clearStaffSelection,
         timeSlot,
         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.
- *
- * Returns null if there's only 1 location (nothing to choose from).
- *
- * @component
- * @example
- * ```tsx
- * <CoreTimeSlot.Locations>
- *   {({ locations, locationsCount, selectLocation }) => (
- *     <GenericList.Root items={locations}>
- *       {children}
- *     </GenericList.Root>
- *   )}
- * </CoreTimeSlot.Locations>
- * ```
- */
-export function Locations(props) {
-    const { timeSlot } = useTimeSlotContext();
-    const service = useService(TimeSlotListServiceDefinition);
-    const selection = service.selection.get();
-    const selectedLocationId = selection?.locationId ?? null;
-    const selectedStaffMemberId = selection?.staffMemberId ?? null;
-    const isAnyStaffMemberSelected = selectedStaffMemberId === ANY_STAFF_MEMBER_ID;
-    // Build locations array from staffByLocation (names already included)
-    const locations = timeSlot.staffByLocation.map(({ location, staffMembers }) => {
-        // Check if this location is selectable based on selected staff
-        // If no staff selected, all locations are selectable
-        // If staff selected, only locations where that staff works are selectable
-        const isSelectable = !isAnyStaffMemberSelected && selectedStaffMemberId
-            ? staffMembers.some((s) => s.id === selectedStaffMemberId)
-            : true;
-        return {
-            id: location.id,
-            name: location.name,
-            isSelected: selectedLocationId === location.id,
-            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,
-    });
-}
-/**
- * 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.
+ * Each staff member includes isSelected based on current selection state.
  *
  * Returns null if there's only 1 staff member (nothing to choose from).
  *
@@ -293,33 +168,25 @@ export function LocationActions(props) {
 export function StaffMembers(props) {
     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 = 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]) => ({
-        id,
-        name: entries[0].name,
-        isSelected: selectedStaffMemberId === id,
-        isSelectable: !selectedLocationId ||
-            entries.some((e) => e.locationId === selectedLocationId),
+    const bookingService = useService(BookingServiceDefinition);
+    const selectedStaffMemberId = bookingService.serviceSelections.get()[0]?.resources?.[0]?._id;
+    const staffMembers = timeSlot.availableResources[0].resources;
+    // Return null if only 1 staff member - nothing to choose from
+    if (staffMembers.length <= 1) {
+        return null;
+    }
+    const staffMembersData = staffMembers.map((s) => ({
+        id: s._id,
+        name: s.name,
+        isSelected: selectedStaffMemberId === s._id,
     }));
     const anyStaffOption = {
         id: ANY_STAFF_MEMBER_ID,
         name: 'Any staff member',
         isSelected: selectedStaffMemberId === ANY_STAFF_MEMBER_ID,
-        isSelectable: true,
     };
-    // Return null if only 1 staff member - nothing to choose from
-    if (staffMembers.length <= 1) {
-        return null;
-    }
     return props.children({
-        staffMembers: [anyStaffOption, ...staffMembers],
+        staffMembers: [anyStaffOption, ...staffMembersData],
         selectStaffMember: service.actions.selectStaffMember,
     });
 }
@@ -331,7 +198,7 @@ export function StaffMembers(props) {
  * @example
  * ```tsx
  * <StaffMemberInfo>
- *   {({ name, isSelected, isSelectable }) => (
+ *   {({ name, isSelected }) => (
  *     <span>{name}</span>
  *   )}
  * </StaffMemberInfo>
@@ -342,7 +209,6 @@ export function StaffMemberInfo(props) {
     return props.children({
         name: staffMember.name,
         isSelected: staffMember.isSelected,
-        isSelectable: staffMember.isSelectable,
         staffMember,
     });
 }
@@ -354,8 +220,8 @@ export function StaffMemberInfo(props) {
  * @example
  * ```tsx
  * <StaffMemberActions>
- *   {({ selectStaffMember, isSelected, isSelectable }) => (
- *     <button onClick={selectStaffMember} disabled={!isSelectable}>
+ *   {({ selectStaffMember, isSelected }) => (
+ *     <button onClick={selectStaffMember}>
  *       {isSelected ? 'Selected' : 'Select'}
  *     </button>
  *   )}
@@ -367,7 +233,6 @@ export function StaffMemberActions(props) {
     return props.children({
         selectStaffMember,
         isSelected: staffMember.isSelected,
-        isSelectable: staffMember.isSelectable,
         staffMember,
     });
 }

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

@@ -3,13 +3,14 @@
  * Provides low-level access to TimeSlotListService via render props
  */
 import React from 'react';
-import { type TimeSlotListServiceConfig, type TimeSlot } from '../../../services/time-slot-list/index.js';
+import { type TimeSlotListServiceConfig } from '../../../services/time-slot-list/index.js';
+import type { TimeSlot } from '@wix/auto_sdk_bookings_availability-time-slots';
 /**
  * Props for Root component
  */
 export interface RootProps {
     children: React.ReactNode;
-    config?: TimeSlotListServiceConfig;
+    config: TimeSlotListServiceConfig;
 }
 /**
  * Root component that provides TimeSlotListService context to its children.

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

@@ -15,7 +15,7 @@ import { BookingServiceDefinition } from '../../../services/booking/booking.js';
  * ```
  */
 export function Root(props) {
-    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(TimeSlotListServiceDefinition, TimeSlotListService, props.config || {}), children: props.children }));
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(TimeSlotListServiceDefinition, TimeSlotListService, props.config), children: props.children }));
 }
 // ============================================================================
 // Timezone Component