@wix/headless-bookings 0.0.92 → 0.0.94

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

@@ -24,28 +24,27 @@ import * as CoreTimeSlot from '../core/time-slot-list/TimeSlot.js';
  * ```
  */
 export const Root = React.forwardRef((props, ref) => {
-    const { children, timeSlot, asChild, className, ...attrs } = props;
-    return (_jsx(CoreTimeSlot.Root, { config: { timeSlot }, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, ...attrs, children: children }) }));
+    const { children, timeSlot, asChild, className } = props;
+    return (_jsx(CoreTimeSlot.Root, { config: { timeSlot }, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, children: children }) }));
 });
 Root.displayName = 'TimeSlot.Root';
 // ============================================================================
 // TestIds
 // ============================================================================
-export var TestIds;
-(function (TestIds) {
-    TestIds["timeSlotStartDate"] = "time-slot-start-date";
-    TestIds["timeSlotEndDate"] = "time-slot-end-date";
-    TestIds["timeSlotDuration"] = "time-slot-duration";
-    TestIds["timeSlotActionSelect"] = "time-slot-action-select";
-    TestIds["timeSlotActionClearStaffSelection"] = "time-slot-action-clear-staff-selection";
+export const TestIds = {
+    timeSlotStartDate: 'time-slot-start-date',
+    timeSlotEndDate: 'time-slot-end-date',
+    timeSlotDuration: 'time-slot-duration',
+    timeSlotActionSelect: 'time-slot-action-select',
+    timeSlotActionClearStaffSelection: 'time-slot-action-clear-staff-selection',
     // Location component
-    TestIds["timeSlotLocationName"] = "time-slot-location-name";
+    timeSlotLocationName: 'time-slot-location-name',
     // StaffMember components
-    TestIds["timeSlotStaffMembers"] = "time-slot-staff-members";
-    TestIds["timeSlotStaffMember"] = "time-slot-staff-member";
-    TestIds["timeSlotStaffMemberName"] = "time-slot-staff-member-name";
-    TestIds["timeSlotStaffMemberActionSelect"] = "time-slot-staff-member-action-select";
-})(TestIds || (TestIds = {}));
+    timeSlotStaffMembers: 'time-slot-staff-members',
+    timeSlotStaffMember: 'time-slot-staff-member',
+    timeSlotStaffMemberName: 'time-slot-staff-member-name',
+    timeSlotStaffMemberActionSelect: 'time-slot-staff-member-action-select',
+};
 /**
  * Displays the time slot start time.
  * Default formatting shows time as "10:00 AM" (hour:minute with AM/PM).
@@ -137,8 +136,8 @@ EndDate.displayName = 'TimeSlot.EndDate';
  * ```
  */
 export const Duration = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
-    return (_jsx(CoreTimeSlot.Info, { children: ({ durationInMinutes }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotDuration, customElement: children, customElementProps: { durationInMinutes }, children: _jsx("span", { children: durationInMinutes }) })) }));
+    const { asChild, children, ...rest } = props;
+    return (_jsx(CoreTimeSlot.Info, { children: ({ durationInMinutes }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, "data-testid": TestIds.timeSlotDuration, customElement: children, customElementProps: { durationInMinutes }, children: _jsx("span", { children: durationInMinutes }) })) }));
 });
 Duration.displayName = 'TimeSlot.Duration';
 /**
@@ -175,19 +174,19 @@ Duration.displayName = 'TimeSlot.Duration';
  * ```
  */
 export const Select = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label, onClick, ...buttonProps } = props;
+    const { asChild, children, className, label, onClick, ...rest } = props;
     return (_jsx(CoreTimeSlot.Actions, { children: ({ selectTimeSlot, timeSlot, isSelected, bookable }) => {
             const handleClick = () => {
                 selectTimeSlot();
                 onClick?.(timeSlot);
             };
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotActionSelect, "data-selected": isSelected, "data-bookable": bookable, customElement: children, customElementProps: {
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, className: className, disabled: !bookable, "data-testid": TestIds.timeSlotActionSelect, "data-selected": isSelected, "data-bookable": bookable, customElement: children, customElementProps: {
                     onClick: handleClick,
                     disabled: !bookable,
                     isSelected,
                     bookable,
                     timeSlot,
-                }, children: _jsx("button", { ...buttonProps, onClick: handleClick, disabled: !bookable, children: children || label }) }));
+                }, children: _jsx("button", { onClick: handleClick, children: children || label }) }));
         } }));
 });
 Select.displayName = 'TimeSlot.Actions.Select';
@@ -222,7 +221,7 @@ Select.displayName = 'TimeSlot.Actions.Select';
  * ```
  */
 export const ClearStaffSelection = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label, onClick, ...buttonProps } = props;
+    const { asChild, children, className, label, onClick, ...rest } = props;
     return (_jsx(CoreTimeSlot.Actions, { children: ({ clearStaffSelection, timeSlot }) => {
             if (!clearStaffSelection) {
                 return null;
@@ -231,9 +230,9 @@ export const ClearStaffSelection = React.forwardRef((props, ref) => {
                 clearStaffSelection();
                 onClick?.(timeSlot);
             };
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotActionClearStaffSelection, customElement: children, customElementProps: {
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, className: className, "data-testid": TestIds.timeSlotActionClearStaffSelection, customElement: children, customElementProps: {
                     onClick: handleClick,
-                }, children: _jsx("button", { ...buttonProps, onClick: handleClick, children: children || label }) }));
+                }, children: _jsx("button", { onClick: handleClick, children: children || label }) }));
         } }));
 });
 ClearStaffSelection.displayName = 'TimeSlot.Actions.ClearStaffSelection';
@@ -262,9 +261,9 @@ export const Actions = {
  * ```
  */
 export const LocationName = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, ...rest } = props;
     return (_jsx(CoreTimeSlot.Info, { children: ({ locationName }) => {
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotLocationName, customElement: children, customElementProps: { name: locationName }, children: _jsx("span", { children: locationName }) }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, "data-testid": TestIds.timeSlotLocationName, customElement: children, customElementProps: { name: locationName }, children: _jsx("span", { children: locationName }) }));
         } }));
 });
 LocationName.displayName = 'TimeSlot.Location.Name';
@@ -290,9 +289,9 @@ export const Location = {
  * ```
  */
 export const StaffMembers = React.forwardRef((props, ref) => {
-    const { children, className } = props;
+    const { children, ...attrs } = props;
     return (_jsx(CoreTimeSlot.StaffMembers, { children: ({ staffMembers }) => {
-            return (_jsx(GenericList.Root, { items: staffMembers, children: _jsx("div", { ref: ref, className: className, "data-testid": TestIds.timeSlotStaffMembers, children: children }) }));
+            return (_jsx(GenericList.Root, { items: staffMembers, children: _jsx("div", { ref: ref, ...attrs, "data-testid": TestIds.timeSlotStaffMembers, children: children }) }));
         } }));
 });
 StaffMembers.displayName = 'TimeSlot.StaffMembers';
@@ -341,8 +340,8 @@ StaffMemberRepeater.displayName = 'TimeSlot.StaffMemberRepeater';
  * ```
  */
 export const StaffMemberName = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
-    return (_jsx(CoreTimeSlot.StaffMemberInfo, { children: ({ name }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStaffMemberName, customElement: children, customElementProps: { name }, children: _jsx("span", { children: name }) })) }));
+    const { asChild, children, ...rest } = props;
+    return (_jsx(CoreTimeSlot.StaffMemberInfo, { children: ({ name }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, "data-testid": TestIds.timeSlotStaffMemberName, customElement: children, customElementProps: { name }, children: _jsx("span", { children: name }) })) }));
 });
 StaffMemberName.displayName = 'TimeSlot.StaffMember.Name';
 /**
@@ -379,17 +378,17 @@ StaffMemberName.displayName = 'TimeSlot.StaffMember.Name';
  * ```
  */
 export const SelectStaffMember = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label, onClick, ...buttonProps } = props;
+    const { asChild, children, className, label, onClick, ...rest } = props;
     return (_jsx(CoreTimeSlot.StaffMemberActions, { children: ({ selectStaffMember, isSelected, staffMember }) => {
             const handleClick = () => {
                 selectStaffMember();
                 onClick?.(staffMember);
             };
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStaffMemberActionSelect, "data-selected": isSelected, customElement: children, customElementProps: {
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, className: className, "data-testid": TestIds.timeSlotStaffMemberActionSelect, "data-selected": isSelected, customElement: children, customElementProps: {
                     onClick: handleClick,
                     isSelected,
                     staffMember,
-                }, children: _jsx("button", { ...buttonProps, onClick: handleClick, children: children || label }) }));
+                }, children: _jsx("button", { onClick: handleClick, children: children || label }) }));
         } }));
 });
 SelectStaffMember.displayName = 'TimeSlot.StaffMember.Actions.Select';

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

@@ -10,15 +10,15 @@ export type { StartDateProps as TimeSlotStartDateProps, EndDateProps as TimeSlot
 /**
  * TimeSlot with required id field for GenericList
  */
-export declare enum TestIds {
-    timeSlotListRoot = "time-slot-list-root",
-    timeSlotListTimeSlots = "time-slot-list-time-slots",
-    timeSlotListTimeSlot = "time-slot-list-time-slot",
-    timeSlotListTimezone = "time-slot-list-timezone",
-    timeSlotListLoadMore = "time-slot-list-load-more",
-    timeSlotListContinue = "time-slot-list-continue",
-    timeSlotListDateRangeInput = "time-slot-list-date-range-input"
-}
+export declare const TestIds: {
+    readonly timeSlotListRoot: "time-slot-list-root";
+    readonly timeSlotListTimeSlots: "time-slot-list-time-slots";
+    readonly timeSlotListTimeSlot: "time-slot-list-time-slot";
+    readonly timeSlotListTimezone: "time-slot-list-timezone";
+    readonly timeSlotListLoadMore: "time-slot-list-load-more";
+    readonly timeSlotListContinue: "time-slot-list-continue";
+    readonly timeSlotListDateRangeInput: "time-slot-list-date-range-input";
+};
 /**
  * Render props for TimeSlotList.Timezone component
  */
@@ -163,7 +163,7 @@ export declare const Actions: {
 /**
  * Props for DateRange.Input component
  */
-export interface DateRangeInputProps {
+export interface DateRangeInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'children' | 'type' | 'value' | 'defaultValue'> {
     /** Whether to render as a child component */
     asChild?: boolean;
     /** Children for custom rendering */
@@ -174,8 +174,6 @@ export interface DateRangeInputProps {
         /** IANA timezone string for the time slots (e.g., "America/New_York") */
         timezone: string | undefined;
     }>;
-    /** CSS classes to apply to the container */
-    className?: string;
 }
 /**
  * DateRange namespace for TimeSlotList date range filter

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

@@ -32,16 +32,15 @@ function toISODateString(date, timezone) {
 /**
  * TimeSlot with required id field for GenericList
  */
-export var TestIds;
-(function (TestIds) {
-    TestIds["timeSlotListRoot"] = "time-slot-list-root";
-    TestIds["timeSlotListTimeSlots"] = "time-slot-list-time-slots";
-    TestIds["timeSlotListTimeSlot"] = "time-slot-list-time-slot";
-    TestIds["timeSlotListTimezone"] = "time-slot-list-timezone";
-    TestIds["timeSlotListLoadMore"] = "time-slot-list-load-more";
-    TestIds["timeSlotListContinue"] = "time-slot-list-continue";
-    TestIds["timeSlotListDateRangeInput"] = "time-slot-list-date-range-input";
-})(TestIds || (TestIds = {}));
+export const TestIds = {
+    timeSlotListRoot: 'time-slot-list-root',
+    timeSlotListTimeSlots: 'time-slot-list-time-slots',
+    timeSlotListTimeSlot: 'time-slot-list-time-slot',
+    timeSlotListTimezone: 'time-slot-list-timezone',
+    timeSlotListLoadMore: 'time-slot-list-load-more',
+    timeSlotListContinue: 'time-slot-list-continue',
+    timeSlotListDateRangeInput: 'time-slot-list-date-range-input',
+};
 /**
  * Displays the current timezone with customizable rendering.
  *
@@ -182,7 +181,7 @@ export const Actions = {
  * Uses the core DateRange component to access service data.
  * Both dates are set together and trigger a single fetch.
  *
- * Default rendering provides two native date inputs.
+ * Default rendering provides a native date input.
  *
  * @component
  * @example
@@ -203,18 +202,19 @@ export const Actions = {
  * ```
  */
 const DateRangeInput = React.forwardRef((props, ref) => {
-    const { asChild, children, className, ...otherProps } = props;
+    const { asChild, children, className, onChange, ...rest } = props;
     return (_jsx(CoreTimeSlotList.DateRange, { children: ({ startDate, endDate, setDateRange, timezone }) => {
-            const defaultContent = (_jsx("input", { ref: ref, type: "date", className: className, "data-testid": TestIds.timeSlotListDateRangeInput, value: toISODateString(startDate, timezone), required: true, onChange: (e) => {
-                    const date = parse(e.target.value, 'yyyy-MM-dd', new Date());
-                    setDateRange(startOfDay(date), endOfDay(date));
-                } }));
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotListDateRangeInput, customElement: children, customElementProps: {
+            const handleChange = (e) => {
+                const date = parse(e.target.value, 'yyyy-MM-dd', new Date());
+                setDateRange(startOfDay(date), endOfDay(date));
+                onChange?.(e);
+            };
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, className: className, onChange: handleChange, "data-testid": TestIds.timeSlotListDateRangeInput, customElement: children, customElementProps: {
                     startDate,
                     endDate,
                     onChange: setDateRange,
                     timezone,
-                }, ...otherProps, children: defaultContent }));
+                }, children: _jsx("input", { ref: ref, type: "date", value: toISODateString(startDate, timezone) }) }));
         } }));
 });
 DateRangeInput.displayName = 'TimeSlotList.DateRange.Input';

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

@@ -3,8 +3,7 @@
  */
 import { LocationType as TimeSlotLocationType } from '@wix/auto_sdk_bookings_availability-time-slots';
 import { LocationType as BookingLocationType, SelectionMethod, } from '@wix/auto_sdk_bookings_bookings';
-/** Resource type ID for staff members */
-const STAFF_MEMBER_RESOURCE_TYPE_ID = '1cd44cf8-756f-41c3-bd90-3e2ffcaf1155';
+import { STAFF_MEMBER_RESOURCE_TYPE_ID } from '../../constants.js';
 /**
  * Derives the selected payment option from service payment settings.
  * Maps service.payment.options to booking API's selectedPaymentOption.

package/cjs/dist/services/booking/book-action/buildCheckoutRequest.js

@@ -2,7 +2,7 @@
  * Builds the createCheckout request
  */
 import { ChannelType, } from '../../../api/create-checkout/index.js';
-const BOOKINGS_APP_DEF_ID = '13d21c63-b5ec-5912-8397-c3a5ddb27a97';
+import { BOOKING_APP_ID } from '../../constants.js';
 /**
  * Builds a checkout request from the booking ID and contact details
  *
@@ -53,7 +53,7 @@ export function buildCheckoutRequest(params) {
                 quantity: 1,
                 catalogReference: {
                     catalogItemId: bookingId,
-                    appId: BOOKINGS_APP_DEF_ID,
+                    appId: BOOKING_APP_ID,
                 },
             },
         ],

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

@@ -0,0 +1,9 @@
+/**
+ * Shared constants for bookings services
+ *
+ * @module Services/Constants
+ */
+/** Booking app definition ID */
+export declare const BOOKING_APP_ID = "13d21c63-b5ec-5912-8397-c3a5ddb27a97";
+/** Resource type ID for staff members */
+export declare const STAFF_MEMBER_RESOURCE_TYPE_ID = "1cd44cf8-756f-41c3-bd90-3e2ffcaf1155";

package/cjs/dist/services/constants.js

@@ -0,0 +1,9 @@
+/**
+ * Shared constants for bookings services
+ *
+ * @module Services/Constants
+ */
+/** Booking app definition ID */
+export const BOOKING_APP_ID = '13d21c63-b5ec-5912-8397-c3a5ddb27a97';
+/** Resource type ID for staff members */
+export const STAFF_MEMBER_RESOURCE_TYPE_ID = '1cd44cf8-756f-41c3-bd90-3e2ffcaf1155';

package/cjs/dist/services/payment/payment.js

@@ -11,10 +11,7 @@ import { RateType } from '@wix/auto_sdk_bookings_services';
 import { PaymentServiceDefinition, } from './payment.def.js';
 import { generateLineItemId } from '../../utils/guid.js';
 export { PaymentServiceDefinition, } from './payment.def.js';
-// ============================================================================
-// Constants
-// ============================================================================
-const BOOKINGS_APP_DEF_ID = '13d21c63-b5ec-5912-8397-c3a5ddb27a97';
+import { BOOKING_APP_ID } from '../constants.js';
 // ============================================================================
 // Helper Functions
 // ============================================================================
@@ -52,7 +49,7 @@ function buildLineItem(service, totalParticipants, lineItemId) {
         _id: lineItemId,
         catalogReference: {
             catalogItemId: service._id || '',
-            appId: BOOKINGS_APP_DEF_ID,
+            appId: BOOKING_APP_ID,
         },
         price: String(price),
         ...(deposit ? { depositAmount: String(deposit) } : {}),

package/cjs/dist/services/service/service.js

@@ -11,7 +11,7 @@ import { convertToMoneyData } from '../../utils/money.js';
 /**
  * Booking app ID constant
  */
-const BOOKING_APP_ID = '13d21c63-b5ec-5912-8397-c3a5ddb27a97';
+import { BOOKING_APP_ID } from '../constants.js';
 /**
  * Service definition for the Service service.
  * This defines the contract that the ServiceService must implement.

package/cjs/dist/services/service-list/service-list.js

@@ -7,10 +7,7 @@ import { SignalsServiceDefinition, } from '@wix/services-definitions/core-servic
 import { queryServices } from '../../api/query-services/index.js';
 import { queryCategories, } from '../../api/query-categories/index.js';
 import { BookingServiceDefinition } from '../booking/booking.js';
-/**
- * Booking app ID constant
- */
-const BOOKING_APP_ID = '13d21c63-b5ec-5912-8397-c3a5ddb27a97';
+import { BOOKING_APP_ID } from '../constants.js';
 /**
  * Default query limit
  */

package/dist/__mocks__/services.d.ts

@@ -7,10 +7,6 @@ import type { ServiceListServiceConfig } from '../services/service-list/service-
 import type { StaffMemberListServiceConfig } from '../services/staff-member-list/staff-member-list.js';
 import type { PagingMetadata } from '../api/query-services/index.js';
 import type { Category } from '../api/query-categories/index.js';
-/**
- * Booking app ID constant
- */
-export declare const BOOKING_APP_ID = "13d21c63-b5ec-5912-8397-c3a5ddb27a97";
 /**
  * Base mock service with all fields populated (APPOINTMENT type, FIXED pricing)
  */

package/dist/__mocks__/services.js

@@ -2,10 +2,7 @@
  * Shared mock data for booking service tests
  */
 import { RateType, ServiceType } from '@wix/auto_sdk_bookings_services';
-/**
- * Booking app ID constant
- */
-export const BOOKING_APP_ID = '13d21c63-b5ec-5912-8397-c3a5ddb27a97';
+import { BOOKING_APP_ID } from '../services/constants.js';
 /**
  * Base mock service with all fields populated (APPOINTMENT type, FIXED pricing)
  */

package/dist/api/fetch-availability/index.js

@@ -7,6 +7,7 @@ import { listEventTimeSlots } from '@wix/auto_sdk_bookings_event-time-slots';
 import { ServiceType } from '@wix/auto_sdk_bookings_services';
 import { format } from 'date-fns';
 import { ViewMode, } from '../../services/time-slot-list/time-slot-list.def.js';
+import { STAFF_MEMBER_RESOURCE_TYPE_ID } from '../../services/constants.js';
 // ============================================================================
 // Internal Types
 // ============================================================================
@@ -16,7 +17,6 @@ var FlowType;
     FlowType["MULTI_SERVICE"] = "multi_service";
     FlowType["CLASS"] = "class";
 })(FlowType || (FlowType = {}));
-const STAFF_RESOURCE_TYPE_ID = '1cd44cf8-756f-41c3-bd90-3e2ffcaf1155';
 // ============================================================================
 // Helpers
 // ============================================================================
@@ -87,14 +87,14 @@ export async function fetchAvailability({ services: selectedServices, viewMode =
         const resourceTypes = staffMemberIds?.length
             ? [
                 {
-                    resourceTypeId: STAFF_RESOURCE_TYPE_ID,
+                    resourceTypeId: STAFF_MEMBER_RESOURCE_TYPE_ID,
                     resourceIds: staffMemberIds,
                 },
             ]
             : undefined;
         const includeResourceTypeIds = isFetchAvailabileDays
             ? undefined
-            : [STAFF_RESOURCE_TYPE_ID];
+            : [STAFF_MEMBER_RESOURCE_TYPE_ID];
         const locations = location
             ? [{ _id: location.id, locationType: location.locationType }]
             : undefined;

package/dist/api/query-services/index.js

@@ -3,10 +3,7 @@
  * Fetches single or multiple services with pagination and sorting
  */
 import { queryServices as queryServicesApi, LocationType, } from '@wix/auto_sdk_bookings_services';
-/**
- * Booking app ID constant
- */
-const BOOKING_APP_ID = '13d21c63-b5ec-5912-8397-c3a5ddb27a97';
+import { BOOKING_APP_ID } from '../../services/constants.js';
 /**
  * Synthetic location ID constants for non-business locations
  */

package/dist/react/booking/Book.d.ts

@@ -4,6 +4,9 @@
  */
 import React from 'react';
 import type { BookChildProps, BookingError } from '../../services/booking/book-action/types.js';
+export declare const TestIds: {
+    readonly bookingActionBook: "booking-action-book";
+};
 /**
  * Props for the high-level Book component
  */
@@ -11,7 +14,7 @@ export interface BookProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEle
     asChild?: boolean;
     children?: React.ReactNode | ((props: BookChildProps) => React.ReactNode);
     label?: string;
-    loadingState?: string;
+    loadingState?: React.ReactNode;
     disabled?: boolean;
     /**
      * Called when checkout is required for payment.

package/dist/react/booking/Book.js

@@ -7,10 +7,9 @@ import React from 'react';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import * as CoreBook from '../core/booking/Book.js';
 import { navigateToCheckout as navigateToCheckoutUtil } from '../../utils/navigation.js';
-var TestIds;
-(function (TestIds) {
-    TestIds["bookingActionBook"] = "booking-action-book";
-})(TestIds || (TestIds = {}));
+export const TestIds = {
+    bookingActionBook: 'booking-action-book',
+};
 /**
  * Book action button component with AsChildSlot pattern.
  *
@@ -57,7 +56,7 @@ var TestIds;
  * ```
  */
 export const Book = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label, loadingState, disabled, onCheckout, onComplete, onError, onClick, ...buttonProps } = props;
+    const { asChild, children, label, loadingState, disabled, onCheckout, onComplete, onError, onClick, ...rest } = props;
     return (_jsx(CoreBook.Book, { onCheckout: (result) => {
             // Create navigateToCheckout with checkoutId captured
             const navigateToCheckout = (options) => navigateToCheckoutUtil({
@@ -68,12 +67,15 @@ export const Book = React.forwardRef((props, ref) => {
             return onCheckout?.(navigateToCheckout);
         }, onComplete: (result) => {
             return onComplete?.({ orderId: result.orderId });
-        }, onError: onError, disabled: disabled, children: (childProps) => {
-            const handleClick = () => {
-                childProps.onClick();
-                onClick?.(childProps);
+        }, onError: onError, disabled: disabled, children: (coreBookProps) => {
+            const handleClick = async () => {
+                await coreBookProps.onClick();
+                onClick?.(coreBookProps);
             };
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.bookingActionBook, "data-in-progress": childProps.isLoading, customElement: children, customElementProps: childProps, children: _jsx("button", { ...buttonProps, onClick: handleClick, disabled: childProps.disabled, children: childProps.isLoading
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, disabled: coreBookProps.disabled, "data-testid": TestIds.bookingActionBook, "data-in-progress": coreBookProps.isLoading, "data-can-book": coreBookProps.canBook, customElement: children, customElementProps: {
+                    ...coreBookProps,
+                    onClick: handleClick,
+                }, children: _jsx("button", { onClick: handleClick, children: coreBookProps.isLoading
                         ? loadingState
                         : children || label }) }));
         } }));

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

@@ -6,6 +6,16 @@ import React from 'react';
 import * as CoreBooking from '../core/booking/Booking.js';
 import type { BookingServiceConfig } from '../../services/booking/booking.js';
 export type { BookingData, DataProps, BookingItem, } from '../core/booking/Booking.js';
+export declare const TestIds: {
+    readonly bookingItemsRoot: "booking-items-root";
+    readonly bookingItems: "booking-items";
+    readonly bookingItem: "booking-item";
+    readonly bookingItemService: "booking-item-service";
+    readonly bookingItemTimeSlot: "booking-item-time-slot";
+    readonly bookingItemPayment: "booking-item-payment";
+    readonly bookingLocation: "booking-location";
+    readonly bookingStaffName: "booking-staff-name";
+};
 /**
  * Props for Booking.Root component
  */

package/dist/react/booking/Booking.js

@@ -12,17 +12,16 @@ import { GenericList } from '@wix/headless-components/react';
 // ============================================================================
 // TestIds
 // ============================================================================
-var TestIds;
-(function (TestIds) {
-    TestIds["bookingItemsRoot"] = "booking-items-root";
-    TestIds["bookingItems"] = "booking-items";
-    TestIds["bookingItem"] = "booking-item";
-    TestIds["bookingItemService"] = "booking-item-service";
-    TestIds["bookingItemTimeSlot"] = "booking-item-time-slot";
-    TestIds["bookingItemPayment"] = "booking-item-payment";
-    TestIds["bookingLocation"] = "booking-location";
-    TestIds["bookingStaffName"] = "booking-staff-name";
-})(TestIds || (TestIds = {}));
+export const TestIds = {
+    bookingItemsRoot: 'booking-items-root',
+    bookingItems: 'booking-items',
+    bookingItem: 'booking-item',
+    bookingItemService: 'booking-item-service',
+    bookingItemTimeSlot: 'booking-item-time-slot',
+    bookingItemPayment: 'booking-item-payment',
+    bookingLocation: 'booking-location',
+    bookingStaffName: 'booking-staff-name',
+};
 /**
  * Root component that provides booking context to the entire app.
  *

package/dist/react/booking/BookingItem.d.ts

@@ -4,6 +4,11 @@
  */
 import React from 'react';
 import { type AsChildChildren } from '@wix/headless-utils/react';
+export declare const TestIds: {
+    readonly bookingItemService: "booking-item-service";
+    readonly bookingItemTimeSlot: "booking-item-time-slot";
+    readonly bookingItemStaffName: "booking-item-staff-name";
+};
 export interface ServiceProps {
     children: React.ReactNode;
 }
@@ -44,12 +49,11 @@ export declare function TimeSlot(props: TimeSlotProps): React.ReactNode;
 export declare namespace TimeSlot {
     var displayName: string;
 }
-export interface StaffNameProps {
+export interface StaffNameProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     asChild?: boolean;
     children?: AsChildChildren<{
         name: string;
     }>;
-    className?: string;
 }
 /**
  * Displays the staff member's name from the current booking item.

package/dist/react/booking/BookingItem.js

@@ -8,12 +8,11 @@ import * as CoreBooking from '../core/booking/Booking.js';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import * as ServiceComponent from '../service/Service.js';
 import * as TimeSlotComponent from '../time-slot-list/TimeSlot.js';
-var TestIds;
-(function (TestIds) {
-    TestIds["bookingItemService"] = "booking-item-service";
-    TestIds["bookingItemTimeSlot"] = "booking-item-time-slot";
-    TestIds["bookingItemStaffName"] = "booking-item-staff-name";
-})(TestIds || (TestIds = {}));
+export const TestIds = {
+    bookingItemService: 'booking-item-service',
+    bookingItemTimeSlot: 'booking-item-time-slot',
+    bookingItemStaffName: 'booking-item-staff-name',
+};
 /**
  * Wraps Service.Root with the service from the current booking item context.
  * Must be used within Booking.BookingItemRepeater.
@@ -61,11 +60,11 @@ TimeSlot.displayName = 'BookingItem.TimeSlot';
  * ```
  */
 export const StaffName = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, ...rest } = props;
     return (_jsx(CoreBooking.BookingItemInfo, { children: ({ staffName }) => {
             if (!staffName)
                 return null;
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.bookingItemStaffName, customElement: children, customElementProps: { name: staffName }, children: _jsx("span", { children: staffName }) }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, ...rest, "data-testid": TestIds.bookingItemStaffName, customElement: children, customElementProps: { name: staffName }, children: _jsx("span", { children: staffName }) }));
         } }));
 });
 StaffName.displayName = 'BookingItem.StaffName';

package/dist/react/booking-form/BookingForm.d.ts

@@ -6,6 +6,11 @@ import React from 'react';
 import { Form } from '@wix/headless-forms/react';
 import * as CoreBookingForm from '../core/booking-form/BookingForm.js';
 type FieldMap = Parameters<typeof Form.Fields>[0]['fieldMap'];
+export declare const TestIds: {
+    readonly bookingFormRoot: "booking-form-root";
+    readonly bookingFormFields: "booking-form-fields";
+    readonly bookingFormActionValidateFormSubmission: "booking-form-action-validate-form-submission";
+};
 /**
  * Props for BookingForm.Root component
  */