@wix/headless-bookings 0.0.31 → 0.0.33

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

@@ -4,14 +4,6 @@
 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';
-/**
- * Mock time slot data
- */
-export declare const mockTimeSlot: ServiceSelectionTimeSlot;
-/**
- * Mock time slot for afternoon
- */
-export declare const mockTimeSlotAfternoon: ServiceSelectionTimeSlot;
 /**
  * Mock resource (staff member)
  */
@@ -24,6 +16,22 @@ export declare const mockResourceTwo: Resource;
  * Mock resource (room)
  */
 export declare const mockResourceRoom: Resource;
+/**
+ * Mock location
+ */
+export declare const mockLocation: Location;
+/**
+ * Mock location (second)
+ */
+export declare const mockLocationTwo: Location;
+/**
+ * Mock time slot data
+ */
+export declare const mockTimeSlot: ServiceSelectionTimeSlot;
+/**
+ * Mock time slot for afternoon
+ */
+export declare const mockTimeSlotAfternoon: ServiceSelectionTimeSlot;
 /**
  * Mock service selection with all data
  */
@@ -36,14 +44,6 @@ export declare const mockServiceSelectionWithoutTimeSlot: ServiceSelection;
  * Mock service selection for class
  */
 export declare const mockServiceSelectionClass: ServiceSelection;
-/**
- * Mock location
- */
-export declare const mockLocation: Location;
-/**
- * Mock location (second)
- */
-export declare const mockLocationTwo: Location;
 /**
  * Mock form submission (contact info)
  */

package/cjs/dist/__mocks__/booking.js

@@ -2,26 +2,6 @@
  * Shared mock data for booking service tests
  */
 import { mockService, mockServiceClass } from './services.js';
-/**
- * Mock time slot data
- */
-export const mockTimeSlot = {
-    startDate: '2024-03-15T10:00:00Z',
-    endDate: '2024-03-15T11:00:00Z',
-    totalCapacity: 10,
-    remainingCapacity: 5,
-    scheduleId: 'schedule-123',
-};
-/**
- * Mock time slot for afternoon
- */
-export const mockTimeSlotAfternoon = {
-    startDate: '2024-03-15T14:00:00Z',
-    endDate: '2024-03-15T15:00:00Z',
-    totalCapacity: 10,
-    remainingCapacity: 8,
-    scheduleId: 'schedule-456',
-};
 /**
  * Mock resource (staff member)
  */
@@ -48,6 +28,44 @@ export const mockResourceRoom = {
     name: 'Conference Room A',
     tag: 'RESOURCE',
 };
+/**
+ * Mock location
+ */
+export const mockLocation = {
+    id: 'location-1',
+    name: 'Main Office',
+};
+/**
+ * Mock location (second)
+ */
+export const mockLocationTwo = {
+    id: 'location-2',
+    name: 'Downtown Branch',
+};
+/**
+ * Mock time slot data
+ */
+export const mockTimeSlot = {
+    startDate: '2024-03-15T10:00:00Z',
+    endDate: '2024-03-15T11:00:00Z',
+    totalCapacity: 10,
+    remainingCapacity: 5,
+    scheduleId: 'schedule-123',
+    resources: [mockResource],
+    location: mockLocation,
+};
+/**
+ * Mock time slot for afternoon
+ */
+export const mockTimeSlotAfternoon = {
+    startDate: '2024-03-15T14:00:00Z',
+    endDate: '2024-03-15T15:00:00Z',
+    totalCapacity: 10,
+    remainingCapacity: 8,
+    scheduleId: 'schedule-456',
+    resources: [mockResourceTwo],
+    location: mockLocationTwo,
+};
 /**
  * Mock service selection with all data
  */
@@ -77,20 +95,6 @@ export const mockServiceSelectionClass = {
     timeSlot: mockTimeSlotAfternoon,
     totalParticipants: 3,
 };
-/**
- * Mock location
- */
-export const mockLocation = {
-    id: 'location-1',
-    name: 'Main Office',
-};
-/**
- * Mock location (second)
- */
-export const mockLocationTwo = {
-    id: 'location-2',
-    name: 'Downtown Branch',
-};
 /**
  * Mock form submission (contact info)
  */

package/cjs/dist/react/core/payment/Payment.js

@@ -43,7 +43,7 @@ function RootContent({ children, }) {
  * ```
  */
 export function Root(props) {
-    const { children, paymentServiceConfig = {}, slotServices, numberOfParticipants } = props;
+    const { children, paymentServiceConfig = {}, slotServices, numberOfParticipants, } = props;
     // Merge public config with lazy loading props into internal config
     const internalConfig = {
         ...paymentServiceConfig,

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

@@ -21,13 +21,13 @@ export interface StartDateProps {
     className?: string;
 }
 /**
- * Displays the time slot start date/time as a Date.
- * Consumer is responsible for formatting.
+ * Displays the time slot start time.
+ * Default formatting shows time as "10:00 AM" (hour:minute with AM/PM).
  *
  * @component
  * @example
  * ```tsx
- * // Default usage - displays Date.toString()
+ * // Default usage - displays "10:00 AM"
  * <TimeSlot.StartDate className="text-foreground" />
  *
  * // With custom formatting
@@ -50,13 +50,13 @@ export interface EndDateProps {
     className?: string;
 }
 /**
- * Displays the time slot end date/time as a Date.
- * Consumer is responsible for formatting.
+ * Displays the time slot end time.
+ * Default formatting shows time as "11:00 AM" (hour:minute with AM/PM).
  *
  * @component
  * @example
  * ```tsx
- * // Default usage - displays Date.toString()
+ * // Default usage - displays "11:00 AM"
  * <TimeSlot.EndDate className="text-foreground" />
  *
  * // With custom formatting
@@ -112,12 +112,16 @@ export interface SelectProps {
 }
 /**
  * Button to select this time slot.
+ * Default label is "Select".
  *
  * @component
  * @example
  * ```tsx
- * // Default button
- * <TimeSlot.Actions.Select label="Select" />
+ * // Default button with "Select" label
+ * <TimeSlot.Actions.Select />
+ *
+ * // With custom label
+ * <TimeSlot.Actions.Select label="Book" />
  *
  * // With asChild
  * <TimeSlot.Actions.Select asChild>
@@ -149,11 +153,15 @@ export interface ClearStaffSelectionProps {
 /**
  * Button to clear staff selection while keeping the slot selected.
  * Only renders when a staff member is selected and there are multiple staff options.
+ * Default label is "Change".
  *
  * @component
  * @example
  * ```tsx
- * // Default button - only shows when there's something to clear
+ * // Default button with "Change" label
+ * <TimeSlot.Actions.ClearStaffSelection />
+ *
+ * // With custom label
  * <TimeSlot.Actions.ClearStaffSelection label="Change staff" />
  *
  * // With asChild
@@ -297,12 +305,16 @@ export interface SelectStaffMemberProps {
 }
 /**
  * Button to select this staff member.
+ * Default label is "Select".
  *
  * @component
  * @example
  * ```tsx
- * // Default button
- * <TimeSlot.StaffMember.Actions.Select label="Select" />
+ * // Default button with "Select" label
+ * <TimeSlot.StaffMember.Actions.Select />
+ *
+ * // With custom label
+ * <TimeSlot.StaffMember.Actions.Select label="Choose" />
  *
  * // With asChild
  * <TimeSlot.StaffMember.Actions.Select asChild>

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

@@ -31,13 +31,13 @@ var TestIds;
     TestIds["timeSlotStaffMemberActionSelect"] = "time-slot-staff-member-action-select";
 })(TestIds || (TestIds = {}));
 /**
- * Displays the time slot start date/time as a Date.
- * Consumer is responsible for formatting.
+ * Displays the time slot start time.
+ * Default formatting shows time as "10:00 AM" (hour:minute with AM/PM).
  *
  * @component
  * @example
  * ```tsx
- * // Default usage - displays Date.toString()
+ * // Default usage - displays "10:00 AM"
  * <TimeSlot.StartDate className="text-foreground" />
  *
  * // With custom formatting
@@ -50,17 +50,20 @@ var TestIds;
  */
 export const StartDate = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CoreTimeSlot.Info, { children: ({ startDate }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStartDate, customElement: children, customElementProps: { startDate }, children: _jsx("span", { children: startDate.toString() }) })) }));
+    return (_jsx(CoreTimeSlot.Info, { children: ({ startDate }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStartDate, customElement: children, customElementProps: { startDate }, children: _jsx("span", { children: startDate.toLocaleTimeString([], {
+                    hour: '2-digit',
+                    minute: '2-digit',
+                }) }) })) }));
 });
 StartDate.displayName = 'TimeSlot.StartDate';
 /**
- * Displays the time slot end date/time as a Date.
- * Consumer is responsible for formatting.
+ * Displays the time slot end time.
+ * Default formatting shows time as "11:00 AM" (hour:minute with AM/PM).
  *
  * @component
  * @example
  * ```tsx
- * // Default usage - displays Date.toString()
+ * // Default usage - displays "11:00 AM"
  * <TimeSlot.EndDate className="text-foreground" />
  *
  * // With custom formatting
@@ -73,7 +76,10 @@ StartDate.displayName = 'TimeSlot.StartDate';
  */
 export const EndDate = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CoreTimeSlot.Info, { children: ({ endDate }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotEndDate, customElement: children, customElementProps: { endDate }, children: _jsx("span", { children: endDate.toString() }) })) }));
+    return (_jsx(CoreTimeSlot.Info, { children: ({ endDate }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotEndDate, customElement: children, customElementProps: { endDate }, children: _jsx("span", { children: endDate.toLocaleTimeString([], {
+                    hour: '2-digit',
+                    minute: '2-digit',
+                }) }) })) }));
 });
 EndDate.displayName = 'TimeSlot.EndDate';
 /**
@@ -101,12 +107,16 @@ export const Duration = React.forwardRef((props, ref) => {
 Duration.displayName = 'TimeSlot.Duration';
 /**
  * Button to select this time slot.
+ * Default label is "Select".
  *
  * @component
  * @example
  * ```tsx
- * // Default button
- * <TimeSlot.Actions.Select label="Select" />
+ * // Default button with "Select" label
+ * <TimeSlot.Actions.Select />
+ *
+ * // With custom label
+ * <TimeSlot.Actions.Select label="Book" />
  *
  * // With asChild
  * <TimeSlot.Actions.Select asChild>
@@ -124,7 +134,7 @@ Duration.displayName = 'TimeSlot.Duration';
  * ```
  */
 export const Select = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label } = props;
+    const { asChild, children, className, label = 'Select' } = props;
     return (_jsx(CoreTimeSlot.Actions, { children: ({ selectTimeSlot, isSelected, bookable }) => {
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotActionSelect, "data-selected": isSelected, "data-bookable": bookable, customElement: children, customElementProps: {
                     onClick: selectTimeSlot,
@@ -138,11 +148,15 @@ Select.displayName = 'TimeSlot.Actions.Select';
 /**
  * Button to clear staff selection while keeping the slot selected.
  * Only renders when a staff member is selected and there are multiple staff options.
+ * Default label is "Change".
  *
  * @component
  * @example
  * ```tsx
- * // Default button - only shows when there's something to clear
+ * // Default button with "Change" label
+ * <TimeSlot.Actions.ClearStaffSelection />
+ *
+ * // With custom label
  * <TimeSlot.Actions.ClearStaffSelection label="Change staff" />
  *
  * // With asChild
@@ -157,7 +171,7 @@ Select.displayName = 'TimeSlot.Actions.Select';
  * ```
  */
 export const ClearStaffSelection = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label } = props;
+    const { asChild, children, className, label = 'Change' } = props;
     return (_jsx(CoreTimeSlot.Actions, { children: ({ clearStaffSelection }) => {
             if (!clearStaffSelection) {
                 return null;
@@ -278,12 +292,16 @@ export const StaffMemberName = React.forwardRef((props, ref) => {
 StaffMemberName.displayName = 'TimeSlot.StaffMember.Name';
 /**
  * Button to select this staff member.
+ * Default label is "Select".
  *
  * @component
  * @example
  * ```tsx
- * // Default button
- * <TimeSlot.StaffMember.Actions.Select label="Select" />
+ * // Default button with "Select" label
+ * <TimeSlot.StaffMember.Actions.Select />
+ *
+ * // With custom label
+ * <TimeSlot.StaffMember.Actions.Select label="Choose" />
  *
  * // With asChild
  * <TimeSlot.StaffMember.Actions.Select asChild>
@@ -301,7 +319,7 @@ StaffMemberName.displayName = 'TimeSlot.StaffMember.Name';
  * ```
  */
 export const SelectStaffMember = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label } = props;
+    const { asChild, children, className, label = 'Select' } = props;
     return (_jsx(CoreTimeSlot.StaffMemberActions, { children: ({ selectStaffMember, isSelected }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStaffMemberActionSelect, "data-selected": isSelected, customElement: children, customElementProps: {
                 onClick: selectStaffMember,
                 isSelected,

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

@@ -190,9 +190,15 @@ export interface DateRangeInputProps {
  * 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.
+ *
  * @component
  * @example
  * ```tsx
+ * // Default usage - renders two date inputs
+ * <TimeSlotList.DateRange.Input className="flex gap-2" />
+ *
+ * // With asChild for custom rendering
  * <TimeSlotList.DateRange.Input asChild>
  *   {({ startDate, endDate, onChange }) => (
  *     <MyDateRangePicker

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

@@ -9,6 +9,15 @@ import { AsChildSlot } from '@wix/headless-utils/react';
 import * as CoreTimeSlotList from '../core/time-slot-list/TimeSlotList.js';
 import { TimeSlotProvider, Info as CoreTimeSlotInfo, } from '../core/time-slot-list/TimeSlot.js';
 import { StartDate as TimeSlotStartDate, EndDate as TimeSlotEndDate, Duration, Actions as TimeSlotActions, Location, StaffMembers, StaffMemberRepeater, StaffMember, } from './TimeSlot.js';
+// ============================================================================
+// Utilities
+// ============================================================================
+/**
+ * Converts a Date to ISO date string format (YYYY-MM-DD) for input[type="date"]
+ */
+function toISODateString(date) {
+    return date.toISOString().split('T')[0] ?? '';
+}
 /**
  * TimeSlot with required id field for GenericList
  */
@@ -178,9 +187,15 @@ 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.
+ *
  * @component
  * @example
  * ```tsx
+ * // Default usage - renders two date inputs
+ * <TimeSlotList.DateRange.Input className="flex gap-2" />
+ *
+ * // With asChild for custom rendering
  * <TimeSlotList.DateRange.Input asChild>
  *   {({ startDate, endDate, onChange }) => (
  *     <MyDateRangePicker
@@ -194,11 +209,14 @@ export const Actions = {
  */
 export const DateRangeInput = React.forwardRef((props, ref) => {
     const { asChild, children, className, ...otherProps } = props;
-    return (_jsx(CoreTimeSlotList.DateRange, { children: ({ startDate, endDate, setDateRange }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotListDateRangeInput, customElement: children, customElementProps: {
-                startDate,
-                endDate,
-                onChange: setDateRange,
-            }, ...otherProps, children: _jsxs("div", { children: [startDate.toLocaleDateString(), " - ", endDate.toLocaleDateString()] }) })) }));
+    return (_jsx(CoreTimeSlotList.DateRange, { children: ({ startDate, endDate, setDateRange }) => {
+            const defaultContent = (_jsxs("div", { ref: ref, className: className, "data-testid": TestIds.timeSlotListDateRangeInput, children: [_jsx("input", { type: "date", value: toISODateString(startDate), onChange: (e) => setDateRange(new Date(e.target.value), endDate) }), _jsx("span", { children: "-" }), _jsx("input", { type: "date", value: toISODateString(endDate), onChange: (e) => setDateRange(startDate, new Date(e.target.value)) })] }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotListDateRangeInput, customElement: children, customElementProps: {
+                    startDate,
+                    endDate,
+                    onChange: setDateRange,
+                }, ...otherProps, children: defaultContent }));
+        } }));
 });
 DateRangeInput.displayName = 'TimeSlotList.DateRange.Input';
 /**

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

@@ -43,8 +43,9 @@ export async function executeBookAction(params) {
         throw new Error('Failed to create booking');
     }
     // Step 2: Create checkout
-    // businessLocationId comes from location.id for multi-location support
-    const businessLocationId = params.location?.id ?? undefined;
+    // businessLocationId: prefer timeSlot.location, fallback to global location
+    const firstSelection = params.serviceSelections[0];
+    const businessLocationId = firstSelection?.timeSlot?.location?.id ?? undefined;
     const checkoutRequest = buildCheckoutRequest({
         bookingId,
         contactDetails,

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

@@ -46,8 +46,10 @@ export function buildBookingRequest(params) {
     if (!item.timeSlot) {
         throw new Error('No time slot selected for service selection');
     }
-    // Get resource from service selection
-    const resource = item.resources?.[0];
+    // Get resource: prefer timeSlot.resources, fallback to item.resources
+    const resource = item.timeSlot.resources?.[0] ?? item.resources?.[0];
+    // Get location: prefer timeSlot.location, fallback to params.location
+    const slotLocation = item.timeSlot.location ?? location;
     return {
         booking: {
             // Payment option derived from service payment settings
@@ -66,8 +68,8 @@ export function buildBookingRequest(params) {
                     resource: resource
                         ? { _id: resource._id, name: resource.name }
                         : undefined,
-                    location: location
-                        ? { _id: location.id, name: location.name }
+                    location: slotLocation
+                        ? { _id: slotLocation.id, name: slotLocation.name }
                         : undefined,
                 },
             },

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

@@ -19,6 +19,10 @@ export interface ServiceSelectionTimeSlot {
     remainingCapacity?: number;
     scheduleId?: string;
     eventInfo?: EventInfo;
+    /** 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;
 }
 /**
  * ServiceSelection contains the service AND its related selections

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

@@ -5,7 +5,7 @@
  */
 import { type PaymentServiceConfig, type PaymentServiceInternalConfig, type SlotService } from './payment.def.js';
 export { PaymentServiceDefinition, type PaymentServiceConfig, type PaymentDetails, type LineItemAdditionalInfo, type SlotService, } from './payment.def.js';
-export type { PaymentServiceAPI, PaymentServiceInternalConfig } from './payment.def.js';
+export type { PaymentServiceAPI, PaymentServiceInternalConfig, } from './payment.def.js';
 export declare const PaymentService: import("@wix/services-definitions").ServiceFactory<string & {
     __api: import("./payment.def.js").PaymentServiceAPI;
     __config: {};

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

@@ -86,6 +86,14 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
      * - Auto-selects staff only when there is exactly one staff option in this slot
      */
     const selectSlot = (slot) => {
+        const staffMembersFromSlot = slot.availableResources[0].resources.map((r) => ({
+            _id: r._id,
+            name: r.name,
+        }));
+        const slotLocation = {
+            id: slot.location?._id,
+            name: slot.location?.name ?? undefined,
+        };
         const timeSlot = {
             startDate: slot.localStartDate,
             endDate: slot.localEndDate,
@@ -93,15 +101,12 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
             remainingCapacity: slot.remainingCapacity ?? undefined,
             scheduleId: slot.scheduleId ?? undefined,
             eventInfo: slot.eventInfo ?? undefined,
+            resources: staffMembersFromSlot,
+            location: slotLocation,
         };
-        bookingService.actions.setLocation({
-            id: slot.location?._id,
-            name: slot.location?.name ?? undefined,
-        });
-        const staffMembersFromSlot = slot.availableResources[0].resources.map((r) => ({
-            id: r._id,
-            name: r.name,
-        }));
+        // 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,

package/dist/__mocks__/booking.d.ts

@@ -4,14 +4,6 @@
 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';
-/**
- * Mock time slot data
- */
-export declare const mockTimeSlot: ServiceSelectionTimeSlot;
-/**
- * Mock time slot for afternoon
- */
-export declare const mockTimeSlotAfternoon: ServiceSelectionTimeSlot;
 /**
  * Mock resource (staff member)
  */
@@ -24,6 +16,22 @@ export declare const mockResourceTwo: Resource;
  * Mock resource (room)
  */
 export declare const mockResourceRoom: Resource;
+/**
+ * Mock location
+ */
+export declare const mockLocation: Location;
+/**
+ * Mock location (second)
+ */
+export declare const mockLocationTwo: Location;
+/**
+ * Mock time slot data
+ */
+export declare const mockTimeSlot: ServiceSelectionTimeSlot;
+/**
+ * Mock time slot for afternoon
+ */
+export declare const mockTimeSlotAfternoon: ServiceSelectionTimeSlot;
 /**
  * Mock service selection with all data
  */
@@ -36,14 +44,6 @@ export declare const mockServiceSelectionWithoutTimeSlot: ServiceSelection;
  * Mock service selection for class
  */
 export declare const mockServiceSelectionClass: ServiceSelection;
-/**
- * Mock location
- */
-export declare const mockLocation: Location;
-/**
- * Mock location (second)
- */
-export declare const mockLocationTwo: Location;
 /**
  * Mock form submission (contact info)
  */

package/dist/__mocks__/booking.js

@@ -2,26 +2,6 @@
  * Shared mock data for booking service tests
  */
 import { mockService, mockServiceClass } from './services.js';
-/**
- * Mock time slot data
- */
-export const mockTimeSlot = {
-    startDate: '2024-03-15T10:00:00Z',
-    endDate: '2024-03-15T11:00:00Z',
-    totalCapacity: 10,
-    remainingCapacity: 5,
-    scheduleId: 'schedule-123',
-};
-/**
- * Mock time slot for afternoon
- */
-export const mockTimeSlotAfternoon = {
-    startDate: '2024-03-15T14:00:00Z',
-    endDate: '2024-03-15T15:00:00Z',
-    totalCapacity: 10,
-    remainingCapacity: 8,
-    scheduleId: 'schedule-456',
-};
 /**
  * Mock resource (staff member)
  */
@@ -48,6 +28,44 @@ export const mockResourceRoom = {
     name: 'Conference Room A',
     tag: 'RESOURCE',
 };
+/**
+ * Mock location
+ */
+export const mockLocation = {
+    id: 'location-1',
+    name: 'Main Office',
+};
+/**
+ * Mock location (second)
+ */
+export const mockLocationTwo = {
+    id: 'location-2',
+    name: 'Downtown Branch',
+};
+/**
+ * Mock time slot data
+ */
+export const mockTimeSlot = {
+    startDate: '2024-03-15T10:00:00Z',
+    endDate: '2024-03-15T11:00:00Z',
+    totalCapacity: 10,
+    remainingCapacity: 5,
+    scheduleId: 'schedule-123',
+    resources: [mockResource],
+    location: mockLocation,
+};
+/**
+ * Mock time slot for afternoon
+ */
+export const mockTimeSlotAfternoon = {
+    startDate: '2024-03-15T14:00:00Z',
+    endDate: '2024-03-15T15:00:00Z',
+    totalCapacity: 10,
+    remainingCapacity: 8,
+    scheduleId: 'schedule-456',
+    resources: [mockResourceTwo],
+    location: mockLocationTwo,
+};
 /**
  * Mock service selection with all data
  */
@@ -77,20 +95,6 @@ export const mockServiceSelectionClass = {
     timeSlot: mockTimeSlotAfternoon,
     totalParticipants: 3,
 };
-/**
- * Mock location
- */
-export const mockLocation = {
-    id: 'location-1',
-    name: 'Main Office',
-};
-/**
- * Mock location (second)
- */
-export const mockLocationTwo = {
-    id: 'location-2',
-    name: 'Downtown Branch',
-};
 /**
  * Mock form submission (contact info)
  */

package/dist/react/core/payment/Payment.js

@@ -43,7 +43,7 @@ function RootContent({ children, }) {
  * ```
  */
 export function Root(props) {
-    const { children, paymentServiceConfig = {}, slotServices, numberOfParticipants } = props;
+    const { children, paymentServiceConfig = {}, slotServices, numberOfParticipants, } = props;
     // Merge public config with lazy loading props into internal config
     const internalConfig = {
         ...paymentServiceConfig,

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

@@ -21,13 +21,13 @@ export interface StartDateProps {
     className?: string;
 }
 /**
- * Displays the time slot start date/time as a Date.
- * Consumer is responsible for formatting.
+ * Displays the time slot start time.
+ * Default formatting shows time as "10:00 AM" (hour:minute with AM/PM).
  *
  * @component
  * @example
  * ```tsx
- * // Default usage - displays Date.toString()
+ * // Default usage - displays "10:00 AM"
  * <TimeSlot.StartDate className="text-foreground" />
  *
  * // With custom formatting
@@ -50,13 +50,13 @@ export interface EndDateProps {
     className?: string;
 }
 /**
- * Displays the time slot end date/time as a Date.
- * Consumer is responsible for formatting.
+ * Displays the time slot end time.
+ * Default formatting shows time as "11:00 AM" (hour:minute with AM/PM).
  *
  * @component
  * @example
  * ```tsx
- * // Default usage - displays Date.toString()
+ * // Default usage - displays "11:00 AM"
  * <TimeSlot.EndDate className="text-foreground" />
  *
  * // With custom formatting
@@ -112,12 +112,16 @@ export interface SelectProps {
 }
 /**
  * Button to select this time slot.
+ * Default label is "Select".
  *
  * @component
  * @example
  * ```tsx
- * // Default button
- * <TimeSlot.Actions.Select label="Select" />
+ * // Default button with "Select" label
+ * <TimeSlot.Actions.Select />
+ *
+ * // With custom label
+ * <TimeSlot.Actions.Select label="Book" />
  *
  * // With asChild
  * <TimeSlot.Actions.Select asChild>
@@ -149,11 +153,15 @@ export interface ClearStaffSelectionProps {
 /**
  * Button to clear staff selection while keeping the slot selected.
  * Only renders when a staff member is selected and there are multiple staff options.
+ * Default label is "Change".
  *
  * @component
  * @example
  * ```tsx
- * // Default button - only shows when there's something to clear
+ * // Default button with "Change" label
+ * <TimeSlot.Actions.ClearStaffSelection />
+ *
+ * // With custom label
  * <TimeSlot.Actions.ClearStaffSelection label="Change staff" />
  *
  * // With asChild
@@ -297,12 +305,16 @@ export interface SelectStaffMemberProps {
 }
 /**
  * Button to select this staff member.
+ * Default label is "Select".
  *
  * @component
  * @example
  * ```tsx
- * // Default button
- * <TimeSlot.StaffMember.Actions.Select label="Select" />
+ * // Default button with "Select" label
+ * <TimeSlot.StaffMember.Actions.Select />
+ *
+ * // With custom label
+ * <TimeSlot.StaffMember.Actions.Select label="Choose" />
  *
  * // With asChild
  * <TimeSlot.StaffMember.Actions.Select asChild>

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

@@ -31,13 +31,13 @@ var TestIds;
     TestIds["timeSlotStaffMemberActionSelect"] = "time-slot-staff-member-action-select";
 })(TestIds || (TestIds = {}));
 /**
- * Displays the time slot start date/time as a Date.
- * Consumer is responsible for formatting.
+ * Displays the time slot start time.
+ * Default formatting shows time as "10:00 AM" (hour:minute with AM/PM).
  *
  * @component
  * @example
  * ```tsx
- * // Default usage - displays Date.toString()
+ * // Default usage - displays "10:00 AM"
  * <TimeSlot.StartDate className="text-foreground" />
  *
  * // With custom formatting
@@ -50,17 +50,20 @@ var TestIds;
  */
 export const StartDate = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CoreTimeSlot.Info, { children: ({ startDate }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStartDate, customElement: children, customElementProps: { startDate }, children: _jsx("span", { children: startDate.toString() }) })) }));
+    return (_jsx(CoreTimeSlot.Info, { children: ({ startDate }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStartDate, customElement: children, customElementProps: { startDate }, children: _jsx("span", { children: startDate.toLocaleTimeString([], {
+                    hour: '2-digit',
+                    minute: '2-digit',
+                }) }) })) }));
 });
 StartDate.displayName = 'TimeSlot.StartDate';
 /**
- * Displays the time slot end date/time as a Date.
- * Consumer is responsible for formatting.
+ * Displays the time slot end time.
+ * Default formatting shows time as "11:00 AM" (hour:minute with AM/PM).
  *
  * @component
  * @example
  * ```tsx
- * // Default usage - displays Date.toString()
+ * // Default usage - displays "11:00 AM"
  * <TimeSlot.EndDate className="text-foreground" />
  *
  * // With custom formatting
@@ -73,7 +76,10 @@ StartDate.displayName = 'TimeSlot.StartDate';
  */
 export const EndDate = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CoreTimeSlot.Info, { children: ({ endDate }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotEndDate, customElement: children, customElementProps: { endDate }, children: _jsx("span", { children: endDate.toString() }) })) }));
+    return (_jsx(CoreTimeSlot.Info, { children: ({ endDate }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotEndDate, customElement: children, customElementProps: { endDate }, children: _jsx("span", { children: endDate.toLocaleTimeString([], {
+                    hour: '2-digit',
+                    minute: '2-digit',
+                }) }) })) }));
 });
 EndDate.displayName = 'TimeSlot.EndDate';
 /**
@@ -101,12 +107,16 @@ export const Duration = React.forwardRef((props, ref) => {
 Duration.displayName = 'TimeSlot.Duration';
 /**
  * Button to select this time slot.
+ * Default label is "Select".
  *
  * @component
  * @example
  * ```tsx
- * // Default button
- * <TimeSlot.Actions.Select label="Select" />
+ * // Default button with "Select" label
+ * <TimeSlot.Actions.Select />
+ *
+ * // With custom label
+ * <TimeSlot.Actions.Select label="Book" />
  *
  * // With asChild
  * <TimeSlot.Actions.Select asChild>
@@ -124,7 +134,7 @@ Duration.displayName = 'TimeSlot.Duration';
  * ```
  */
 export const Select = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label } = props;
+    const { asChild, children, className, label = 'Select' } = props;
     return (_jsx(CoreTimeSlot.Actions, { children: ({ selectTimeSlot, isSelected, bookable }) => {
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotActionSelect, "data-selected": isSelected, "data-bookable": bookable, customElement: children, customElementProps: {
                     onClick: selectTimeSlot,
@@ -138,11 +148,15 @@ Select.displayName = 'TimeSlot.Actions.Select';
 /**
  * Button to clear staff selection while keeping the slot selected.
  * Only renders when a staff member is selected and there are multiple staff options.
+ * Default label is "Change".
  *
  * @component
  * @example
  * ```tsx
- * // Default button - only shows when there's something to clear
+ * // Default button with "Change" label
+ * <TimeSlot.Actions.ClearStaffSelection />
+ *
+ * // With custom label
  * <TimeSlot.Actions.ClearStaffSelection label="Change staff" />
  *
  * // With asChild
@@ -157,7 +171,7 @@ Select.displayName = 'TimeSlot.Actions.Select';
  * ```
  */
 export const ClearStaffSelection = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label } = props;
+    const { asChild, children, className, label = 'Change' } = props;
     return (_jsx(CoreTimeSlot.Actions, { children: ({ clearStaffSelection }) => {
             if (!clearStaffSelection) {
                 return null;
@@ -278,12 +292,16 @@ export const StaffMemberName = React.forwardRef((props, ref) => {
 StaffMemberName.displayName = 'TimeSlot.StaffMember.Name';
 /**
  * Button to select this staff member.
+ * Default label is "Select".
  *
  * @component
  * @example
  * ```tsx
- * // Default button
- * <TimeSlot.StaffMember.Actions.Select label="Select" />
+ * // Default button with "Select" label
+ * <TimeSlot.StaffMember.Actions.Select />
+ *
+ * // With custom label
+ * <TimeSlot.StaffMember.Actions.Select label="Choose" />
  *
  * // With asChild
  * <TimeSlot.StaffMember.Actions.Select asChild>
@@ -301,7 +319,7 @@ StaffMemberName.displayName = 'TimeSlot.StaffMember.Name';
  * ```
  */
 export const SelectStaffMember = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label } = props;
+    const { asChild, children, className, label = 'Select' } = props;
     return (_jsx(CoreTimeSlot.StaffMemberActions, { children: ({ selectStaffMember, isSelected }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStaffMemberActionSelect, "data-selected": isSelected, customElement: children, customElementProps: {
                 onClick: selectStaffMember,
                 isSelected,

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

@@ -190,9 +190,15 @@ export interface DateRangeInputProps {
  * 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.
+ *
  * @component
  * @example
  * ```tsx
+ * // Default usage - renders two date inputs
+ * <TimeSlotList.DateRange.Input className="flex gap-2" />
+ *
+ * // With asChild for custom rendering
  * <TimeSlotList.DateRange.Input asChild>
  *   {({ startDate, endDate, onChange }) => (
  *     <MyDateRangePicker

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

@@ -9,6 +9,15 @@ import { AsChildSlot } from '@wix/headless-utils/react';
 import * as CoreTimeSlotList from '../core/time-slot-list/TimeSlotList.js';
 import { TimeSlotProvider, Info as CoreTimeSlotInfo, } from '../core/time-slot-list/TimeSlot.js';
 import { StartDate as TimeSlotStartDate, EndDate as TimeSlotEndDate, Duration, Actions as TimeSlotActions, Location, StaffMembers, StaffMemberRepeater, StaffMember, } from './TimeSlot.js';
+// ============================================================================
+// Utilities
+// ============================================================================
+/**
+ * Converts a Date to ISO date string format (YYYY-MM-DD) for input[type="date"]
+ */
+function toISODateString(date) {
+    return date.toISOString().split('T')[0] ?? '';
+}
 /**
  * TimeSlot with required id field for GenericList
  */
@@ -178,9 +187,15 @@ 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.
+ *
  * @component
  * @example
  * ```tsx
+ * // Default usage - renders two date inputs
+ * <TimeSlotList.DateRange.Input className="flex gap-2" />
+ *
+ * // With asChild for custom rendering
  * <TimeSlotList.DateRange.Input asChild>
  *   {({ startDate, endDate, onChange }) => (
  *     <MyDateRangePicker
@@ -194,11 +209,14 @@ export const Actions = {
  */
 export const DateRangeInput = React.forwardRef((props, ref) => {
     const { asChild, children, className, ...otherProps } = props;
-    return (_jsx(CoreTimeSlotList.DateRange, { children: ({ startDate, endDate, setDateRange }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotListDateRangeInput, customElement: children, customElementProps: {
-                startDate,
-                endDate,
-                onChange: setDateRange,
-            }, ...otherProps, children: _jsxs("div", { children: [startDate.toLocaleDateString(), " - ", endDate.toLocaleDateString()] }) })) }));
+    return (_jsx(CoreTimeSlotList.DateRange, { children: ({ startDate, endDate, setDateRange }) => {
+            const defaultContent = (_jsxs("div", { ref: ref, className: className, "data-testid": TestIds.timeSlotListDateRangeInput, children: [_jsx("input", { type: "date", value: toISODateString(startDate), onChange: (e) => setDateRange(new Date(e.target.value), endDate) }), _jsx("span", { children: "-" }), _jsx("input", { type: "date", value: toISODateString(endDate), onChange: (e) => setDateRange(startDate, new Date(e.target.value)) })] }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotListDateRangeInput, customElement: children, customElementProps: {
+                    startDate,
+                    endDate,
+                    onChange: setDateRange,
+                }, ...otherProps, children: defaultContent }));
+        } }));
 });
 DateRangeInput.displayName = 'TimeSlotList.DateRange.Input';
 /**

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

@@ -43,8 +43,9 @@ export async function executeBookAction(params) {
         throw new Error('Failed to create booking');
     }
     // Step 2: Create checkout
-    // businessLocationId comes from location.id for multi-location support
-    const businessLocationId = params.location?.id ?? undefined;
+    // businessLocationId: prefer timeSlot.location, fallback to global location
+    const firstSelection = params.serviceSelections[0];
+    const businessLocationId = firstSelection?.timeSlot?.location?.id ?? undefined;
     const checkoutRequest = buildCheckoutRequest({
         bookingId,
         contactDetails,

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

@@ -46,8 +46,10 @@ export function buildBookingRequest(params) {
     if (!item.timeSlot) {
         throw new Error('No time slot selected for service selection');
     }
-    // Get resource from service selection
-    const resource = item.resources?.[0];
+    // Get resource: prefer timeSlot.resources, fallback to item.resources
+    const resource = item.timeSlot.resources?.[0] ?? item.resources?.[0];
+    // Get location: prefer timeSlot.location, fallback to params.location
+    const slotLocation = item.timeSlot.location ?? location;
     return {
         booking: {
             // Payment option derived from service payment settings
@@ -66,8 +68,8 @@ export function buildBookingRequest(params) {
                     resource: resource
                         ? { _id: resource._id, name: resource.name }
                         : undefined,
-                    location: location
-                        ? { _id: location.id, name: location.name }
+                    location: slotLocation
+                        ? { _id: slotLocation.id, name: slotLocation.name }
                         : undefined,
                 },
             },

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

@@ -19,6 +19,10 @@ export interface ServiceSelectionTimeSlot {
     remainingCapacity?: number;
     scheduleId?: string;
     eventInfo?: EventInfo;
+    /** 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;
 }
 /**
  * ServiceSelection contains the service AND its related selections

package/dist/services/payment/payment.d.ts

@@ -5,7 +5,7 @@
  */
 import { type PaymentServiceConfig, type PaymentServiceInternalConfig, type SlotService } from './payment.def.js';
 export { PaymentServiceDefinition, type PaymentServiceConfig, type PaymentDetails, type LineItemAdditionalInfo, type SlotService, } from './payment.def.js';
-export type { PaymentServiceAPI, PaymentServiceInternalConfig } from './payment.def.js';
+export type { PaymentServiceAPI, PaymentServiceInternalConfig, } from './payment.def.js';
 export declare const PaymentService: import("@wix/services-definitions").ServiceFactory<string & {
     __api: import("./payment.def.js").PaymentServiceAPI;
     __config: {};

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

@@ -86,6 +86,14 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
      * - Auto-selects staff only when there is exactly one staff option in this slot
      */
     const selectSlot = (slot) => {
+        const staffMembersFromSlot = slot.availableResources[0].resources.map((r) => ({
+            _id: r._id,
+            name: r.name,
+        }));
+        const slotLocation = {
+            id: slot.location?._id,
+            name: slot.location?.name ?? undefined,
+        };
         const timeSlot = {
             startDate: slot.localStartDate,
             endDate: slot.localEndDate,
@@ -93,15 +101,12 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
             remainingCapacity: slot.remainingCapacity ?? undefined,
             scheduleId: slot.scheduleId ?? undefined,
             eventInfo: slot.eventInfo ?? undefined,
+            resources: staffMembersFromSlot,
+            location: slotLocation,
         };
-        bookingService.actions.setLocation({
-            id: slot.location?._id,
-            name: slot.location?.name ?? undefined,
-        });
-        const staffMembersFromSlot = slot.availableResources[0].resources.map((r) => ({
-            id: r._id,
-            name: r.name,
-        }));
+        // 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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-bookings",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -72,5 +72,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "7f0622f4f250d712f40cd5c74b49c920e2e55e5b19b7e1a86f572158"
+  "falconPackageHash": "b5f66fe6afde6dde21cff958f2df9ecaa8bb6890eed0ee093057887e"
 }