@wix/headless-bookings 0.0.33 → 0.0.35

package/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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,
                 },
             },

package/cjs/dist/services/booking/book-action/types.d.ts

@@ -1,8 +1,9 @@
 /**
  * Types for the Book action
  */
-import type { ServiceSelection, Location } from '../booking.js';
+import type { ServiceSelection } from '../booking.js';
 import type { FormValues } from '@wix/form-public';
+import type { Location as TimeSlotLocationType } from '@wix/auto_sdk_bookings_availability-time-slots';
 /**
  * Result returned from the book action
  */
@@ -21,7 +22,7 @@ export interface BookingError {
  */
 export interface BookActionParams {
     serviceSelections: ServiceSelection[];
-    location: Location | null;
+    location: TimeSlotLocationType | null;
     formSubmission: FormValues | null;
     timezone?: string;
 }

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

@@ -4,8 +4,8 @@
  * Persists across page navigation in SPA until page refresh
  */
 import { type Signal } from '@wix/services-definitions/core-services/signals';
-import type { Service } from '@wix/auto_sdk_bookings_services';
-import type { Resource, EventInfo } from '@wix/auto_sdk_bookings_availability-time-slots';
+import type { Service, Location as ServiceLocationType } from '@wix/auto_sdk_bookings_services';
+import type { Resource, EventInfo, Location as TimeSlotLocationType } from '@wix/auto_sdk_bookings_availability-time-slots';
 import type { FormValues } from '@wix/form-public';
 import type { BookResult } from './book-action/types.js';
 export declare const ANY_STAFF_MEMBER_ID = "__any_staff_member__";
@@ -22,7 +22,7 @@ export interface ServiceSelectionTimeSlot {
     /** Resources available in this time slot (populated when slot is selected) */
     resources?: Resource[];
     /** Location of this time slot (populated when slot is selected) */
-    location?: Location;
+    location?: TimeSlotLocationType;
 }
 /**
  * ServiceSelection contains the service AND its related selections
@@ -39,10 +39,6 @@ export interface ServiceSelection {
     /** Number of participants for this service selection */
     totalParticipants?: number;
 }
-export interface Location {
-    id: string;
-    name?: string;
-}
 /**
  * BookingService actions - setters only, no API calls
  */
@@ -61,7 +57,7 @@ export interface BookingServiceActions {
     setResourceById(resourceId: string, resource: Resource, instanceId?: string): void;
     /** Gets a resource by ID from a service selection. If no instanceId provided, uses the first item. */
     getResourceById(resourceId: string, instanceId?: string): Resource | undefined;
-    setLocation(location: Location | null): void;
+    setLocation(location: ServiceLocationType | null): void;
     clearLocation(): void;
     setTimezone(timezone: string): void;
     setFormSubmission(values: FormValues | null): void;
@@ -77,7 +73,7 @@ export interface BookingService {
     /** Signal containing the service selections (services with their related data) */
     serviceSelections: Signal<ServiceSelection[]>;
     /** Signal containing the selected location */
-    location: Signal<Location | null>;
+    location: Signal<ServiceLocationType | null>;
     /** Signal containing the selected timezone */
     timezone: Signal<string | undefined>;
     /** Signal containing the form submission */
@@ -101,7 +97,7 @@ export interface BookingServiceConfig {
     /** Optional initial service selections to pre-populate */
     serviceSelections?: ServiceSelection[];
     /** Optional initial location */
-    location?: Location | null;
+    location?: ServiceLocationType | null;
     /** Optional initial timezone */
     timezone?: string;
     /** Optional initial form submission */

package/cjs/dist/services/index.d.ts

@@ -3,7 +3,7 @@
  * Main export file for all service definitions and implementations
  */
 export { ServiceService, ServiceServiceDefinition, type ServiceServiceAPI, type ServiceServiceConfig, type ServiceActions, type ServicePaymentData, loadServiceServiceInitialData, type SuccessServiceServiceConfigResult, type NotFoundServiceServiceConfigResult, } from './service/service.js';
-export { BookingService, BookingServiceDefinition, type BookingServiceConfig, type Location, type BookingServiceActions, type ServiceSelection, type ServiceSelectionTimeSlot, } from './booking/booking.js';
+export { BookingService, BookingServiceDefinition, type BookingServiceConfig, type BookingServiceActions, type ServiceSelection, type ServiceSelectionTimeSlot, } from './booking/booking.js';
 export { TimeSlotListService, TimeSlotListServiceDefinition, ViewMode, loadTimeSlotListConfig, type TimeSlotListServiceAPI, type TimeSlotListServiceActions, type TimeSlotListServiceConfig, type LoadTimeSlotListConfigOptions, type LoadTimeSlotListConfigResult, } from './time-slot-list/index.js';
 export { ServiceListService, ServiceListServiceDefinition, type ServiceListServiceAPI, type ServiceListServiceConfig, type ServiceListFilters, type ServiceListActions, type QueryOptions, loadServiceListServiceInitialData, type SuccessServiceListServiceConfigResult, type ErrorServiceListServiceConfigResult, } from './service-list/service-list.js';
 export { executeBookAction, canBook, buildBookingRequest, buildCheckoutRequest, type CanBookParams, type BookResult, type BookingError, type BookActionParams, type BookChildProps, type BookProps, type BuildCheckoutParams, } from './booking/book-action/index.js';