@wix/headless-bookings 0.0.33 → 0.0.35

package/cjs/dist/services/time-slot-list/time-slot-list.js

@@ -3,7 +3,7 @@
  * Manages time slot fetching, selection, and state
  */
 import { implementService } from '@wix/services-definitions';
-import { SignalsServiceDefinition } from '@wix/services-definitions/core-services/signals';
+import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
 import { TimeSlotListServiceDefinition, ViewMode, } from './time-slot-list.def.js';
 import { fetchAvailability } from '../../api/fetch-availability/index.js';
 import { BookingServiceDefinition, ANY_STAFF_MEMBER_ID, } from '../booking/booking.js';
@@ -44,27 +44,58 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         }
         return config.services ?? [];
     };
+    /**
+     * Helper: Get filters combining config with booking overrides
+     * Uses location and resources from booking if they exist (not from the slot)
+     */
+    const getFilters = () => {
+        const baseFilters = config.filters ?? {};
+        const selectedStaffMembersIds = bookingService.serviceSelections
+            .get()[0]
+            ?.resources?.map((resource) => resource._id);
+        const staffMemberIds = selectedStaffMembersIds?.length
+            ? selectedStaffMembersIds
+            : baseFilters.staffMemberIds;
+        const selectedLocation = bookingService.location.get();
+        const location = selectedLocation
+            ? {
+                id: selectedLocation._id,
+                locationType: selectedLocation.type,
+            }
+            : baseFilters.location;
+        return {
+            ...baseFilters,
+            location,
+            staffMemberIds,
+        };
+    };
     /**
      * Fetch time slots from API
-     * Called on initialization or when filters change
+     * If cursor is provided, appends to existing slots (pagination)
+     * If no cursor, resets state and fetches fresh slots
      */
-    const fetchTimeSlots = async () => {
-        const selectedServices = getServices();
+    const fetchTimeSlots = async ({ isLoadMore } = { isLoadMore: false }) => {
+        if (isLoadingSignal.get() || (isLoadMore && !cursorSignal.get())) {
+            return;
+        }
+        const cursor = isLoadMore ? cursorSignal.get() : undefined;
         isLoadingSignal.set(true);
         errorSignal.set(null);
-        cursorSignal.set(undefined);
-        timeSlotsSignal.set([]);
+        if (!isLoadMore) {
+            timeSlotsSignal.set([]);
+        }
         try {
             const response = await fetchAvailability({
-                services: selectedServices,
+                services: getServices(),
                 fromLocalDate: startDateSignal.get(),
                 toLocalDate: endDateSignal.get(),
                 timeZone: bookingService.timezone.get(),
                 viewMode: viewModeSignal.get(),
-                cursor: cursorSignal.get(),
-                ...config.filters,
+                cursor,
+                ...getFilters(),
             });
-            timeSlotsSignal.set(response.timeSlots);
+            const newSlots = response.timeSlots;
+            timeSlotsSignal.set(isLoadMore ? [...timeSlotsSignal.get(), ...newSlots] : newSlots);
             const nextCursor = response.cursorPagingMetadata?.cursors?.next ?? undefined;
             cursorSignal.set(nextCursor);
             hasMoreSignal.set(!!nextCursor);
@@ -72,7 +103,9 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         catch (error) {
             const message = error instanceof Error
                 ? error.message
-                : 'Failed to load time slots';
+                : isLoadMore
+                    ? 'Failed to load more time slots'
+                    : 'Failed to load time slots';
             errorSignal.set(message);
         }
         finally {
@@ -90,27 +123,19 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
             _id: r._id,
             name: r.name,
         }));
-        const slotLocation = {
-            id: slot.location?._id,
-            name: slot.location?.name ?? undefined,
-        };
+        const resources = staffMembersFromSlot.length === 1 ? staffMembersFromSlot : [];
         const timeSlot = {
             startDate: slot.localStartDate,
             endDate: slot.localEndDate,
             totalCapacity: slot.totalCapacity ?? undefined,
             remainingCapacity: slot.remainingCapacity ?? undefined,
             scheduleId: slot.scheduleId ?? undefined,
-            eventInfo: slot.eventInfo ?? undefined,
-            resources: staffMembersFromSlot,
-            location: slotLocation,
+            eventInfo: slot.eventInfo,
+            location: slot.location,
+            resources,
         };
-        // Keep setting top-level location (for pre-slot selection use cases)
-        bookingService.actions.setLocation(slotLocation);
-        // Auto-select resources only when single staff
-        const resources = staffMembersFromSlot.length === 1 ? staffMembersFromSlot : [];
         bookingService.actions.updateItem({
             timeSlot,
-            resources,
         });
     };
     /**
@@ -118,82 +143,46 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
      * Updates the booking service with the selected resource
      */
     const selectStaffMember = (staffMemberId) => {
-        const selectedBookingTimeSlot = bookingService.serviceSelections.get()[0]?.timeSlot;
-        if (!selectedBookingTimeSlot)
+        const selectedTimeSlot = bookingService.serviceSelections.get()[0]?.timeSlot;
+        if (!selectedTimeSlot)
             return;
-        const findStaffName = (id) => {
+        const getStaffName = (id) => {
+            if (id === ANY_STAFF_MEMBER_ID)
+                return 'Any staff member';
             const slots = timeSlotsSignal.get();
             return (slots
                 .flatMap((slot) => slot.availableResources[0].resources)
                 .find((r) => r._id === id)?.name ?? undefined);
         };
-        if (staffMemberId === ANY_STAFF_MEMBER_ID) {
-            bookingService.actions.updateItem({
-                resources: [
-                    {
-                        _id: ANY_STAFF_MEMBER_ID,
-                        name: 'Any staff member',
-                    },
-                ],
-            });
-            return;
-        }
+        const resources = [
+            {
+                _id: staffMemberId,
+                name: getStaffName(staffMemberId),
+            },
+        ];
         bookingService.actions.updateItem({
-            resources: [
-                {
-                    _id: staffMemberId,
-                    name: findStaffName(staffMemberId),
-                },
-            ],
+            timeSlot: {
+                ...selectedTimeSlot,
+                resources,
+            },
         });
     };
     /**
      * Action: Clear staff selection while keeping the selected time slot
      */
     const clearStaffSelection = () => {
-        const selectedBookingTimeSlot = bookingService.serviceSelections.get()[0]?.timeSlot;
-        if (!selectedBookingTimeSlot)
+        const selectedTimeSlot = bookingService.serviceSelections.get()[0]?.timeSlot;
+        if (!selectedTimeSlot)
             return;
         bookingService.actions.updateItem({
-            resources: [],
+            timeSlot: { ...selectedTimeSlot, resources: [] },
         });
     };
     /**
      * Action: Load more slots (pagination)
      */
     const loadMore = async () => {
-        const cursor = cursorSignal.get();
-        if (!cursor || isLoadingSignal.get())
-            return;
-        const selectedServices = getServices();
-        isLoadingSignal.set(true);
-        try {
-            const response = await fetchAvailability({
-                services: selectedServices,
-                fromLocalDate: startDateSignal.get(),
-                toLocalDate: endDateSignal.get(),
-                timeZone: bookingService.timezone.get(),
-                cursor,
-                viewMode: viewModeSignal.get(),
-                ...config.filters,
-            });
-            timeSlotsSignal.set([
-                ...timeSlotsSignal.get(),
-                ...response.timeSlots,
-            ]);
-            const nextCursor = response.cursorPagingMetadata?.cursors?.next ?? undefined;
-            cursorSignal.set(nextCursor);
-            hasMoreSignal.set(!!nextCursor);
-        }
-        catch (error) {
-            const message = error instanceof Error
-                ? error.message
-                : 'Failed to load more time slots';
-            errorSignal.set(message);
-        }
-        finally {
-            isLoadingSignal.set(false);
-        }
+        return fetchTimeSlots({ isLoadMore: true });
     };
     /**
      * Action: Update date range and refetch slots
@@ -207,22 +196,19 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         }
         startDateSignal.set(newStartDate);
         endDateSignal.set(newEndDate);
-        fetchTimeSlots();
     };
-    // Auto-fetch on initialization if no pre-loaded data provided
-    if (!config.timeSlots) {
-        fetchTimeSlots();
-    }
-    // Subscribe to timezone changes from BookingService to auto-refetch
-    // NOTE: This should depend ONLY on bookingService.timezone.
-    let firstTimezoneEffectRun = true;
+    const resourcesSignal = signalsService.computed(() => {
+        return bookingService.serviceSelections.get()[0]?.resources;
+    });
+    let isFirstRun = true;
     signalsService.effect(() => {
         bookingService.timezone.get();
-        if (firstTimezoneEffectRun) {
-            firstTimezoneEffectRun = false;
-            return;
+        bookingService.location.get();
+        resourcesSignal.get();
+        if (!isFirstRun || !config.timeSlots) {
+            fetchTimeSlots();
         }
-        fetchTimeSlots();
+        isFirstRun = false;
     });
     // Return service API
     return {

package/dist/__mocks__/booking.d.ts

@@ -3,7 +3,7 @@
  */
 import type { Resource } from '@wix/auto_sdk_bookings_availability-time-slots';
 import type { FormValues } from '@wix/form-public';
-import type { ServiceSelection, ServiceSelectionTimeSlot, Location, BookingServiceConfig } from '../services/booking/booking.js';
+import type { ServiceSelection, ServiceSelectionTimeSlot, BookingServiceConfig } from '../services/booking/booking.js';
 /**
  * Mock resource (staff member)
  */
@@ -19,11 +19,17 @@ export declare const mockResourceRoom: Resource;
 /**
  * Mock location
  */
-export declare const mockLocation: Location;
+export declare const mockLocation: {
+    _id: string;
+    name: string;
+};
 /**
  * Mock location (second)
  */
-export declare const mockLocationTwo: Location;
+export declare const mockLocationTwo: {
+    _id: string;
+    name: string;
+};
 /**
  * Mock time slot data
  */

package/dist/__mocks__/booking.js

@@ -32,14 +32,14 @@ export const mockResourceRoom = {
  * Mock location
  */
 export const mockLocation = {
-    id: 'location-1',
+    _id: 'location-1',
     name: 'Main Office',
 };
 /**
  * Mock location (second)
  */
 export const mockLocationTwo = {
-    id: 'location-2',
+    _id: 'location-2',
     name: 'Downtown Branch',
 };
 /**

package/dist/react/core/booking/Booking.d.ts

@@ -3,8 +3,9 @@
  * Provides low-level access to BookingService via render props and service setup
  */
 import React from 'react';
-import { type BookingServiceConfig, type ServiceSelection, type Location, type BookingServiceActions } from '../../../services/booking/booking.js';
+import { type BookingServiceConfig, type ServiceSelection, type BookingServiceActions } from '../../../services/booking/booking.js';
 import type { FormValues } from '@wix/form-public';
+import type { Location as TimeSlotLocationType } from '@wix/auto_sdk_bookings_availability-time-slots';
 /**
  * Props for Booking.Root component
  */
@@ -34,7 +35,7 @@ export declare function Root(props: RootProps): React.ReactNode;
  */
 export interface BookingData {
     serviceSelections: ServiceSelection[];
-    location: Location | null;
+    location: TimeSlotLocationType | null;
     timezone: string | undefined;
     formSubmission: FormValues | null;
     actions: BookingServiceActions;

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

@@ -31,9 +31,8 @@ export function TimeSlotProvider(props) {
     const service = useService(TimeSlotListServiceDefinition);
     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;
+        selectedTimeSlot?.location?._id === timeSlot.location?._id;
     const selectTimeSlot = () => {
         service.actions.selectSlot(timeSlot);
     };
@@ -132,7 +131,7 @@ export function Actions(props) {
     const service = useService(TimeSlotListServiceDefinition);
     const bookingService = useService(BookingServiceDefinition);
     const bookable = timeSlot.bookable ?? false;
-    const selectedStaffMemberId = bookingService.serviceSelections.get()[0]?.resources?.[0]?._id;
+    const selectedStaffMemberId = bookingService.serviceSelections.get()[0]?.timeSlot?.resources?.[0]?._id;
     const staffFromSlot = timeSlot.availableResources[0].resources.map((r) => r._id);
     const shouldShowClearStaffSelection = !!selectedStaffMemberId && staffFromSlot.length > 1;
     const clearStaffSelection = shouldShowClearStaffSelection
@@ -169,7 +168,7 @@ export function StaffMembers(props) {
     const { timeSlot } = useTimeSlotContext();
     const service = useService(TimeSlotListServiceDefinition);
     const bookingService = useService(BookingServiceDefinition);
-    const selectedStaffMemberId = bookingService.serviceSelections.get()[0]?.resources?.[0]?._id;
+    const selectedStaffMemberId = bookingService.serviceSelections.get()[0]?.timeSlot?.resources?.[0]?._id;
     const staffMembers = timeSlot.availableResources[0].resources;
     // Return null if only 1 staff member - nothing to choose from
     if (staffMembers.length <= 1) {

package/dist/react/payment/Payment.js

@@ -57,11 +57,7 @@ var TestIds;
 export const Root = React.forwardRef((props, ref) => {
     const { children, paymentServiceConfig, slotServices, numberOfParticipants, asChild, className, ...attrs } = props;
     return (_jsx(CorePayment.Root, { paymentServiceConfig: paymentServiceConfig, slotServices: slotServices, numberOfParticipants: numberOfParticipants, children: ({ isLoading, hasError }) => {
-            // Handle render function children regardless of asChild
-            const resolvedChildren = typeof children === 'function'
-                ? children({ isLoading, hasError })
-                : children;
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentRoot, "data-loading": isLoading, "data-has-error": hasError, customElement: resolvedChildren, customElementProps: { isLoading, hasError }, ...attrs, children: _jsx("div", { children: React.isValidElement(resolvedChildren) ? resolvedChildren : null }) }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentRoot, "data-loading": isLoading, "data-has-error": hasError, customElement: children, customElementProps: { isLoading, hasError }, ...attrs, children: children }));
         } }));
 });
 Root.displayName = 'Payment.Root';

package/dist/react/service/Service.d.ts

@@ -577,6 +577,7 @@ export interface RawProps {
  * @component
  * @example
  * ```tsx
+ * // Using render prop pattern to access raw service data
  * <Service.Raw>
  *   {({ service, isLoading, error }) => (
  *     <div>
@@ -586,6 +587,11 @@ export interface RawProps {
  *     </div>
  *   )}
  * </Service.Raw>
+ *
+ * // With asChild pattern
+ * <Service.Raw asChild>
+ *   <CustomServiceDisplay />
+ * </Service.Raw>
  * ```
  */
 export declare const Raw: React.ForwardRefExoticComponent<RawProps & React.RefAttributes<HTMLElement>>;
@@ -607,6 +613,7 @@ export declare namespace Actions {
         }) => React.ReactNode);
         className?: string;
         label?: string;
+        onClicked?: (service: Service) => void;
     }
     /**
      * Select action component - replaces selection with only this service.
@@ -622,6 +629,16 @@ export declare namespace Actions {
      *   <Button variant="primary">Select Service</Button>
      * </Service.Actions.Select>
      *
+     * // With onClicked callback for navigation
+     * <Service.Actions.Select
+     *   asChild
+     *   onClicked={(service) => {
+     *     router.push(`/booking/time-slots/${service._id}`);
+     *   }}
+     * >
+     *   <Button variant="primary">Select Service</Button>
+     * </Service.Actions.Select>
+     *
      * // Using render prop pattern to access bookable state
      * <Service.Actions.Select>
      *   {({ bookable, selected, onClick }) => (
@@ -647,6 +664,7 @@ export declare namespace Actions {
         }) => React.ReactNode);
         className?: string;
         label?: string;
+        onClicked?: (service: Service) => void;
     }
     /**
      * Add action component - adds service to selection array.
@@ -662,6 +680,16 @@ export declare namespace Actions {
      *   <Button variant="secondary">Add Service</Button>
      * </Service.Actions.Add>
      *
+     * // With onClicked callback for custom behavior after adding
+     * <Service.Actions.Add
+     *   asChild
+     *   onClicked={(service) => {
+     *     console.log(`Added service: ${service.name}`);
+     *   }}
+     * >
+     *   <Button variant="secondary">Add Service</Button>
+     * </Service.Actions.Add>
+     *
      * // Using render prop pattern to access bookable state
      * <Service.Actions.Add>
      *   {({ bookable, selected, onClick }) => (
@@ -687,6 +715,7 @@ export declare namespace Actions {
         }) => React.ReactNode);
         className?: string;
         label?: string;
+        onClicked?: (service: Service) => void;
     }
     /**
      * Remove action component - removes service from selection array.
@@ -702,6 +731,16 @@ export declare namespace Actions {
      *   <Button variant="destructive">Remove Service</Button>
      * </Service.Actions.Remove>
      *
+     * // With onClicked callback for custom behavior after removing
+     * <Service.Actions.Remove
+     *   asChild
+     *   onClicked={(service) => {
+     *     console.log(`Removed service: ${service.name}`);
+     *   }}
+     * >
+     *   <Button variant="destructive">Remove Service</Button>
+     * </Service.Actions.Remove>
+     *
      * // Using render prop pattern to access bookable state
      * <Service.Actions.Remove>
      *   {({ bookable, selected, onClick }) => (

package/dist/react/service/Service.js

@@ -539,6 +539,7 @@ StaffMemberRepeater.displayName = 'Service.StaffMembers.StaffMemberRepeater';
  * @component
  * @example
  * ```tsx
+ * // Using render prop pattern to access raw service data
  * <Service.Raw>
  *   {({ service, isLoading, error }) => (
  *     <div>
@@ -548,11 +549,16 @@ StaffMemberRepeater.displayName = 'Service.StaffMembers.StaffMemberRepeater';
  *     </div>
  *   )}
  * </Service.Raw>
+ *
+ * // With asChild pattern
+ * <Service.Raw asChild>
+ *   <CustomServiceDisplay />
+ * </Service.Raw>
  * ```
  */
 export const Raw = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CoreService.Service, { children: ({ service, isLoading, error }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceRaw, customElement: children, customElementProps: { service, isLoading, error }, children: _jsxs("div", { children: [isLoading && _jsx("div", { children: "Loading..." }), error && _jsxs("div", { children: ["Error: ", error] }), service && _jsx("pre", { children: JSON.stringify(service, null, 2) })] }) })) }));
+    return (_jsx(CoreService.Service, { children: ({ service, isLoading, error }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceRaw, customElement: children, customElementProps: { service, isLoading, error }, children: children })) }));
 });
 Raw.displayName = 'Service.Raw';
 /**
@@ -574,6 +580,16 @@ export var Actions;
      *   <Button variant="primary">Select Service</Button>
      * </Service.Actions.Select>
      *
+     * // With onClicked callback for navigation
+     * <Service.Actions.Select
+     *   asChild
+     *   onClicked={(service) => {
+     *     router.push(`/booking/time-slots/${service._id}`);
+     *   }}
+     * >
+     *   <Button variant="primary">Select Service</Button>
+     * </Service.Actions.Select>
+     *
      * // Using render prop pattern to access bookable state
      * <Service.Actions.Select>
      *   {({ bookable, selected, onClick }) => (
@@ -585,25 +601,19 @@ export var Actions;
      * ```
      */
     Actions.Select = React.forwardRef((props, ref) => {
-        const { asChild, children, className, label = 'Select Service' } = props;
+        const { asChild, children, className, label = 'Select Service', onClicked, } = props;
         return (_jsx(CoreService.Actions, { children: ({ select, rawService, bookable, selected, requiresAvailability, }) => {
-                // If children is a function, call it with bookable, selected, requiresAvailability and other props
-                if (typeof children === 'function') {
-                    return children({
-                        bookable,
-                        selected,
-                        requiresAvailability,
-                        onClick: select,
-                        service: rawService,
-                    });
-                }
+                const handleClick = () => {
+                    select();
+                    onClicked?.(rawService);
+                };
                 return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceActionSelect, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, customElement: children, customElementProps: {
-                        onClick: select,
+                        onClick: handleClick,
                         disabled: !bookable,
                         selected,
                         bookable,
                         requiresAvailability,
-                    }, children: _jsx("button", { onClick: select, disabled: !bookable, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, children: label }) }));
+                    }, children: _jsx("button", { onClick: handleClick, disabled: !bookable, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, children: label }) }));
             } }));
     });
     Actions.Select.displayName = 'Service.Actions.Select';
@@ -621,6 +631,16 @@ export var Actions;
      *   <Button variant="secondary">Add Service</Button>
      * </Service.Actions.Add>
      *
+     * // With onClicked callback for custom behavior after adding
+     * <Service.Actions.Add
+     *   asChild
+     *   onClicked={(service) => {
+     *     console.log(`Added service: ${service.name}`);
+     *   }}
+     * >
+     *   <Button variant="secondary">Add Service</Button>
+     * </Service.Actions.Add>
+     *
      * // Using render prop pattern to access bookable state
      * <Service.Actions.Add>
      *   {({ bookable, selected, onClick }) => (
@@ -632,27 +652,21 @@ export var Actions;
      * ```
      */
     Actions.Add = React.forwardRef((props, ref) => {
-        const { asChild, children, className, label = 'Add Service' } = props;
+        const { asChild, children, className, label = 'Add Service', onClicked, } = props;
         return (_jsx(CoreService.Actions, { children: ({ add, rawService, bookable, selected, requiresAvailability }) => {
-                // If children is a function, call it with bookable, selected, requiresAvailability and other props
-                if (typeof children === 'function') {
-                    return children({
-                        bookable,
-                        selected,
-                        requiresAvailability,
-                        onClick: add,
-                        service: rawService,
-                    });
-                }
                 // Disabled when already selected (can't add again) or not bookable
                 const isDisabled = selected || !bookable;
+                const handleClick = () => {
+                    add();
+                    onClicked?.(rawService);
+                };
                 return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceActionAdd, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, customElement: children, customElementProps: {
-                        onClick: add,
+                        onClick: handleClick,
                         disabled: isDisabled,
                         selected,
                         bookable,
                         requiresAvailability,
-                    }, children: _jsx("button", { onClick: add, disabled: isDisabled, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, children: label }) }));
+                    }, children: _jsx("button", { onClick: handleClick, disabled: isDisabled, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, children: label }) }));
             } }));
     });
     Actions.Add.displayName = 'Service.Actions.Add';
@@ -670,6 +684,16 @@ export var Actions;
      *   <Button variant="destructive">Remove Service</Button>
      * </Service.Actions.Remove>
      *
+     * // With onClicked callback for custom behavior after removing
+     * <Service.Actions.Remove
+     *   asChild
+     *   onClicked={(service) => {
+     *     console.log(`Removed service: ${service.name}`);
+     *   }}
+     * >
+     *   <Button variant="destructive">Remove Service</Button>
+     * </Service.Actions.Remove>
+     *
      * // Using render prop pattern to access bookable state
      * <Service.Actions.Remove>
      *   {({ bookable, selected, onClick }) => (
@@ -681,27 +705,21 @@ export var Actions;
      * ```
      */
     Actions.Remove = React.forwardRef((props, ref) => {
-        const { asChild, children, className, label = 'Remove Service' } = props;
+        const { asChild, children, className, label = 'Remove Service', onClicked, } = props;
         return (_jsx(CoreService.Actions, { children: ({ remove, rawService, bookable, selected, requiresAvailability, }) => {
-                // If children is a function, call it with bookable, selected, requiresAvailability and other props
-                if (typeof children === 'function') {
-                    return children({
-                        bookable,
-                        selected,
-                        requiresAvailability,
-                        onClick: remove,
-                        service: rawService,
-                    });
-                }
                 // Disabled when not selected (nothing to remove) or not bookable
                 const isDisabled = !selected || !bookable;
+                const handleClick = () => {
+                    remove();
+                    onClicked?.(rawService);
+                };
                 return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceActionRemove, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, customElement: children, customElementProps: {
-                        onClick: remove,
+                        onClick: handleClick,
                         disabled: isDisabled,
                         selected,
                         bookable,
                         requiresAvailability,
-                    }, children: _jsx("button", { onClick: remove, disabled: isDisabled, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, children: label }) }));
+                    }, children: _jsx("button", { onClick: handleClick, disabled: isDisabled, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, children: label }) }));
             } }));
     });
     Actions.Remove.displayName = 'Service.Actions.Remove';

package/dist/services/booking/book-action/bookAction.js

@@ -45,7 +45,7 @@ export async function executeBookAction(params) {
     // Step 2: Create checkout
     // businessLocationId: prefer timeSlot.location, fallback to global location
     const firstSelection = params.serviceSelections[0];
-    const businessLocationId = firstSelection?.timeSlot?.location?.id ?? undefined;
+    const businessLocationId = firstSelection?.timeSlot?.location?._id ?? undefined;
     const checkoutRequest = buildCheckoutRequest({
         bookingId,
         contactDetails,

package/dist/services/booking/book-action/buildBookingRequest.js

@@ -69,7 +69,7 @@ export function buildBookingRequest(params) {
                         ? { _id: resource._id, name: resource.name }
                         : undefined,
                     location: slotLocation
-                        ? { _id: slotLocation.id, name: slotLocation.name }
+                        ? { _id: slotLocation._id, name: slotLocation.name }
                         : undefined,
                 },
             },