@wix/headless-bookings 0.0.24 → 0.0.26

package/cjs/dist/services/time-slot-list/time-slot-list.def.d.ts

@@ -3,8 +3,16 @@
  * Defines interfaces and service contract for time slot management
  */
 import type { Signal } from '@wix/services-definitions/core-services/signals';
-import type { TimeSlot as ApiTimeSlot, Location } from '@wix/auto_sdk_bookings_availability-time-slots';
+import type { TimeSlot as ApiTimeSlot, LocationTypeWithLiterals } from '@wix/auto_sdk_bookings_availability-time-slots';
 import type { Service } from '@wix/auto_sdk_bookings_services';
+/**
+ * Location filter input for availability calls.
+ * Require a stable `id` + `locationType` pair (no optional fields).
+ */
+export interface Location {
+    id: string;
+    locationType: LocationTypeWithLiterals;
+}
 export declare enum ViewMode {
     CLASSIC = "classic",
     AGENDA = "agenda"
@@ -48,7 +56,7 @@ export interface SlotSelection {
  */
 export interface TimeSlotsFilters {
     /** Filter by specific locations */
-    locations?: Location[];
+    location?: Location;
     /** Filter by specific staff member IDs */
     staffMemberIds?: string[];
     /** Filter by bookable status. If undefined, returns both bookable and non-bookable */

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

@@ -65,31 +65,13 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
      * Helper: Get services from config or BookingService
      */
     const getServices = () => {
-        if (config.services?.length)
-            return config.services;
-        return bookingService.serviceSelections.get().map((s) => s.service);
-    };
-    /**
-     * Helper: Get filters from config or BookingService
-     */
-    const getFilters = () => {
-        // Get BookingService selections (these take priority)
-        const location = bookingService.location.get();
-        const serviceSelections = bookingService.serviceSelections.get();
-        const selectedStaffMemberIds = serviceSelections
-            .map((serviceSelection) => serviceSelection.resources.map((r) => r._id))
-            .flat();
-        const selectedLocation = location ? { _id: location.id } : null;
-        // Merge config filters with BookingService selections (selections win)
-        return {
-            ...config.filters,
-            locations: selectedLocation
-                ? [selectedLocation]
-                : config.filters?.locations,
-            staffMemberIds: selectedStaffMemberIds.length
-                ? selectedStaffMemberIds
-                : config.filters?.staffMemberIds,
-        };
+        const selectedServices = bookingService.serviceSelections
+            .get()
+            .map((s) => s.service);
+        if (selectedServices.length) {
+            return selectedServices;
+        }
+        return config.services ?? [];
     };
     /**
      * Fetch time slots from API
@@ -97,7 +79,6 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
      */
     const fetchTimeSlots = async () => {
         const selectedServices = getServices();
-        const filters = getFilters();
         isLoadingSignal.set(true);
         errorSignal.set(null);
         cursorSignal.set(undefined);
@@ -110,7 +91,7 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
                 timeZone: bookingService.timezone.get(),
                 viewMode: viewModeSignal.get(),
                 cursor: cursorSignal.get(),
-                ...filters,
+                ...config.filters,
             });
             timeSlotsSignal.set(response.timeSlots);
             const nextCursor = response.cursorPagingMetadata?.cursors?.next ?? undefined;
@@ -303,7 +284,6 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         if (!cursor || isLoadingSignal.get())
             return;
         const selectedServices = getServices();
-        const filters = getFilters();
         isLoadingSignal.set(true);
         try {
             const response = await fetchAvailability({
@@ -313,7 +293,7 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
                 timeZone: bookingService.timezone.get(),
                 cursor,
                 viewMode: viewModeSignal.get(),
-                ...filters,
+                ...config.filters,
             });
             // API returns grouped slots, merge with existing
             const existing = timeSlotsSignal.get();

package/dist/__mocks__/services.d.ts

@@ -0,0 +1,75 @@
+/**
+ * Shared mock data for booking service tests
+ */
+import type { Service } from '@wix/auto_sdk_bookings_services';
+import type { ServiceServiceConfig } from '../services/service/service.js';
+import type { ServiceListServiceConfig } from '../services/service-list/service-list.js';
+import type { PagingMetadata } from '../api/query-services/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)
+ */
+export declare const mockService: Service;
+/**
+ * Mock service with VARIED pricing
+ */
+export declare const mockServiceVariedPrice: Service;
+/**
+ * Mock service with CUSTOM pricing
+ */
+export declare const mockServiceCustomPrice: Service;
+/**
+ * Mock service with NO_FEE pricing (free)
+ */
+export declare const mockServiceNoFee: Service;
+/**
+ * Mock CLASS type service
+ */
+export declare const mockServiceClass: Service;
+/**
+ * Mock COURSE type service
+ */
+export declare const mockServiceCourse: Service;
+/**
+ * Mock service without optional fields (minimal)
+ */
+export declare const mockServiceMinimal: Service;
+/**
+ * Array of mock services for list tests
+ */
+export declare const mockServices: Service[];
+/**
+ * Default paging metadata
+ */
+export declare const mockPagingMetadata: PagingMetadata;
+/**
+ * Paging metadata with more items available
+ */
+export declare const mockPagingMetadataWithMore: PagingMetadata;
+/**
+ * Empty paging metadata
+ */
+export declare const mockPagingMetadataEmpty: PagingMetadata;
+/**
+ * Service list config with services
+ */
+export declare const mockServiceListConfig: ServiceListServiceConfig;
+/**
+ * Service list config with hasNext for pagination testing
+ */
+export declare const mockServiceListConfigWithMore: ServiceListServiceConfig;
+/**
+ * Empty service list config
+ */
+export declare const mockEmptyServiceListConfig: ServiceListServiceConfig;
+/**
+ * Service config for single service
+ */
+export declare const mockServiceConfig: ServiceServiceConfig;
+/**
+ * Helper to create a large list of services for pagination tests
+ */
+export declare function createLargeServiceList(count: number): Service[];

package/dist/__mocks__/services.js

@@ -0,0 +1,308 @@
+/**
+ * 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';
+/**
+ * Base mock service with all fields populated (APPOINTMENT type, FIXED pricing)
+ */
+export const mockService = {
+    _id: 'test-service-id',
+    name: 'Test Service Name',
+    description: 'Test service description',
+    tagLine: 'Test tagline',
+    type: ServiceType.APPOINTMENT,
+    category: {
+        _id: 'category-1',
+        name: 'Test Category',
+    },
+    payment: {
+        rateType: RateType.FIXED,
+        fixed: {
+            price: {
+                value: '50.00',
+                currency: 'USD',
+            },
+        },
+    },
+    schedule: {
+        availabilityConstraints: {
+            sessionDurations: [60],
+        },
+    },
+    locations: [
+        {
+            _id: 'location-1',
+            type: 'BUSINESS',
+            business: {
+                _id: 'business-loc-1',
+                name: 'Main Office',
+                address: {
+                    formatted: '123 Main St, City, ST 12345',
+                },
+            },
+        },
+    ],
+    media: {
+        mainMedia: {
+            image: 'wix:image://v1/test-image.jpg',
+        },
+        coverMedia: {
+            image: 'wix:image://v1/test-cover.jpg',
+        },
+        items: [
+            { image: 'wix:image://v1/image1.jpg' },
+            { image: 'wix:image://v1/image2.jpg' },
+        ],
+    },
+    bookingPolicy: {
+        cancellationPolicy: {
+            enabled: true,
+            limitLatestCancellation: true,
+            latestCancellationInMinutes: 60,
+        },
+        limitLateBookingPolicy: {
+            enabled: true,
+            latestBookingInMinutes: 30,
+        },
+        limitEarlyBookingPolicy: {
+            enabled: true,
+            earliestBookingInMinutes: 10080, // 7 days
+        },
+        reschedulePolicy: {
+            enabled: true,
+            limitLatestReschedule: true,
+            latestRescheduleInMinutes: 120,
+        },
+        waitlistPolicy: {
+            enabled: true,
+            capacity: 10,
+        },
+        bookAfterStartPolicy: {
+            enabled: true,
+        },
+        participantsPolicy: {
+            maxParticipantsPerBooking: 5,
+        },
+    },
+    defaultCapacity: 20,
+};
+/**
+ * Mock service with VARIED pricing
+ */
+export const mockServiceVariedPrice = {
+    ...mockService,
+    _id: 'test-service-varied',
+    name: 'Varied Price Service',
+    payment: {
+        rateType: RateType.VARIED,
+        varied: {
+            defaultPrice: {
+                value: '50.00',
+                currency: 'USD',
+            },
+            minPrice: {
+                value: '30.00',
+                currency: 'USD',
+            },
+            maxPrice: {
+                value: '100.00',
+                currency: 'USD',
+            },
+        },
+    },
+};
+/**
+ * Mock service with CUSTOM pricing
+ */
+export const mockServiceCustomPrice = {
+    ...mockService,
+    _id: 'test-service-custom',
+    name: 'Custom Price Service',
+    payment: {
+        rateType: RateType.CUSTOM,
+        custom: {
+            description: 'Contact for pricing',
+        },
+    },
+};
+/**
+ * Mock service with NO_FEE pricing (free)
+ */
+export const mockServiceNoFee = {
+    ...mockService,
+    _id: 'test-service-no-fee',
+    name: 'Free Service',
+    payment: {
+        rateType: RateType.NO_FEE,
+    },
+};
+/**
+ * Mock CLASS type service
+ */
+export const mockServiceClass = {
+    ...mockService,
+    _id: 'test-service-class',
+    name: 'Class Service',
+    type: ServiceType.CLASS,
+    defaultCapacity: 15,
+};
+/**
+ * Mock COURSE type service
+ */
+export const mockServiceCourse = {
+    ...mockService,
+    _id: 'test-service-course',
+    name: 'Course Service',
+    type: ServiceType.COURSE,
+    defaultCapacity: 25,
+    schedule: {
+        ...mockService.schedule,
+        firstSessionStart: new Date('2024-01-15T09:00:00Z'),
+        lastSessionEnd: new Date('2024-03-15T17:00:00Z'),
+    },
+};
+/**
+ * Mock service without optional fields (minimal)
+ */
+export const mockServiceMinimal = {
+    _id: 'test-service-minimal',
+    name: 'Minimal Service',
+    description: '',
+};
+/**
+ * Array of mock services for list tests
+ */
+export const mockServices = [
+    {
+        _id: 'service-1',
+        name: 'Service One',
+        description: 'Description for service one',
+        type: ServiceType.APPOINTMENT,
+        payment: {
+            rateType: RateType.FIXED,
+            fixed: {
+                price: {
+                    value: '50.00',
+                    currency: 'USD',
+                },
+            },
+        },
+    },
+    {
+        _id: 'service-2',
+        name: 'Service Two',
+        description: 'Description for service two',
+        type: ServiceType.CLASS,
+        payment: {
+            rateType: RateType.FIXED,
+            fixed: {
+                price: {
+                    value: '75.00',
+                    currency: 'USD',
+                },
+            },
+        },
+        defaultCapacity: 15,
+    },
+    {
+        _id: 'service-3',
+        name: 'Service Three',
+        description: 'Description for service three',
+        type: ServiceType.COURSE,
+        payment: {
+            rateType: RateType.CUSTOM,
+            custom: {
+                description: 'Contact for pricing',
+            },
+        },
+        defaultCapacity: 25,
+    },
+];
+/**
+ * Default paging metadata
+ */
+export const mockPagingMetadata = {
+    limit: 10,
+    offset: 0,
+    count: 3,
+    hasNext: false,
+};
+/**
+ * Paging metadata with more items available
+ */
+export const mockPagingMetadataWithMore = {
+    limit: 10,
+    offset: 0,
+    count: 10,
+    hasNext: true,
+};
+/**
+ * Empty paging metadata
+ */
+export const mockPagingMetadataEmpty = {
+    limit: 10,
+    offset: 0,
+    count: 0,
+    hasNext: false,
+};
+/**
+ * Service list config with services
+ */
+export const mockServiceListConfig = {
+    services: mockServices,
+    options: {
+        appId: BOOKING_APP_ID,
+        pagingMetadata: mockPagingMetadata,
+    },
+};
+/**
+ * Service list config with hasNext for pagination testing
+ */
+export const mockServiceListConfigWithMore = {
+    services: mockServices,
+    options: {
+        appId: BOOKING_APP_ID,
+        pagingMetadata: mockPagingMetadataWithMore,
+    },
+};
+/**
+ * Empty service list config
+ */
+export const mockEmptyServiceListConfig = {
+    services: [],
+    options: {
+        appId: BOOKING_APP_ID,
+        pagingMetadata: mockPagingMetadataEmpty,
+    },
+};
+/**
+ * Service config for single service
+ */
+export const mockServiceConfig = {
+    service: mockService,
+    appId: BOOKING_APP_ID,
+};
+/**
+ * Helper to create a large list of services for pagination tests
+ */
+export function createLargeServiceList(count) {
+    return Array.from({ length: count }, (_, i) => ({
+        _id: `service-${i}`,
+        name: `Service ${i}`,
+        description: `Description for service ${i}`,
+        type: ServiceType.APPOINTMENT,
+        payment: {
+            rateType: RateType.FIXED,
+            fixed: {
+                price: {
+                    value: '50.00',
+                    currency: 'USD',
+                },
+            },
+        },
+    }));
+}

package/dist/api/fetch-availability/index.d.ts

@@ -2,15 +2,15 @@
  * Time Slot List API
  * Fetches available time slots for booking services from Wix Bookings
  */
-import { type Location, type CursorPaging, type CursorPagingMetadata } from '@wix/auto_sdk_bookings_availability-time-slots';
+import { type CursorPaging, type CursorPagingMetadata } from '@wix/auto_sdk_bookings_availability-time-slots';
 import { type Service } from '@wix/auto_sdk_bookings_services';
-import { ViewMode, type TimeSlot } from '../../services/time-slot-list/time-slot-list.def.js';
+import { ViewMode, type TimeSlot, type Location } from '../../services/time-slot-list/time-slot-list.def.js';
 export interface FetchAvailabilityOptions {
     services: Service[];
     fromLocalDate?: string | null;
     toLocalDate?: string | null;
     timeZone?: string | null;
-    locations?: Location[];
+    location?: Location;
     /** Filter by specific staff member IDs (passed as resourceIds to API) */
     staffMemberIds?: string[];
     cursorPaging?: CursorPaging;
@@ -52,12 +52,12 @@ export interface FetchAvailabilityResponse {
  * // response.timeSlots are grouped by time
  * ```
  */
-export declare function fetchAvailability({ services: selectedServices, viewMode, fromLocalDate, toLocalDate, timeZone, locations, staffMemberIds, cursor, slotsPerPage, bookable, bookingPolicyViolations, timeSlotsPerDay, }: {
+export declare function fetchAvailability({ services: selectedServices, viewMode, fromLocalDate, toLocalDate, timeZone, location, staffMemberIds, cursor, slotsPerPage, bookable, bookingPolicyViolations, timeSlotsPerDay, }: {
     services: Service[];
     fromLocalDate: Date;
     toLocalDate: Date;
     timeZone?: string;
-    locations?: Location[];
+    location?: Location;
     staffMemberIds?: string[];
     cursor?: string;
     viewMode?: ViewMode;

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

@@ -115,7 +115,7 @@ function detectFlow(bookingServices, viewMode) {
  * // response.timeSlots are grouped by time
  * ```
  */
-export async function fetchAvailability({ services: selectedServices, viewMode = ViewMode.CLASSIC, fromLocalDate, toLocalDate, timeZone, locations, staffMemberIds, cursor, slotsPerPage, bookable, bookingPolicyViolations, timeSlotsPerDay, }) {
+export async function fetchAvailability({ services: selectedServices, viewMode = ViewMode.CLASSIC, fromLocalDate, toLocalDate, timeZone, location, staffMemberIds, cursor, slotsPerPage, bookable, bookingPolicyViolations, timeSlotsPerDay, }) {
     const flow = detectFlow(selectedServices, viewMode);
     const serviceIds = selectedServices.map((s) => s._id);
     // Convert Date objects to local ISO strings
@@ -138,6 +138,12 @@ export async function fetchAvailability({ services: selectedServices, viewMode =
                 },
             ]
             : undefined;
+        const includeResourceTypeIds = isAnyStaffMemberSelected || isFetchAvailabileDays
+            ? undefined
+            : [STAFF_RESOURCE_TYPE_ID];
+        const locations = location
+            ? [{ _id: location.id, locationType: location.locationType }]
+            : undefined;
         const response = await listAvailabilityTimeSlots({
             serviceId: serviceIds[0],
             fromLocalDate: fromLocalDateStr,
@@ -148,9 +154,7 @@ export async function fetchAvailability({ services: selectedServices, viewMode =
             resourceTypes,
             bookable,
             bookingPolicyViolations,
-            includeResourceTypeIds: isAnyStaffMemberSelected || isFetchAvailabileDays
-                ? undefined
-                : [STAFF_RESOURCE_TYPE_ID],
+            includeResourceTypeIds,
             timeSlotsPerDay,
         });
         return {
@@ -164,7 +168,7 @@ export async function fetchAvailability({ services: selectedServices, viewMode =
     }
     if (flow === FlowType.CLASS) {
         // Build eventFilter for location and staff filtering
-        const locationIds = locations?.map((l) => l._id);
+        const locationIds = location ? [location.id] : undefined;
         const eventFilter = {};
         if (locationIds?.length) {
             eventFilter['location.id'] = locationIds;
@@ -185,7 +189,6 @@ export async function fetchAvailability({ services: selectedServices, viewMode =
         });
         return {
             timeSlots: groupTimeSlotsByTime(response.timeSlots || []),
-            // Note: listEventTimeSlots uses pagingMetadata instead of cursorPagingMetadata
             cursorPagingMetadata: response.pagingMetadata,
         };
     }

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

@@ -0,0 +1,49 @@
+/**
+ * Book - High-level headless component for the book action button
+ * Wraps core Book with AsChildSlot pattern for customization
+ */
+import React from 'react';
+import type { BookChildProps, BookResult, BookingError } from '../../services/booking/book-action/types.js';
+/**
+ * Props for the high-level Book component
+ */
+export interface BookProps {
+    asChild?: boolean;
+    children?: React.ReactNode | ((props: BookChildProps) => React.ReactNode);
+    className?: string;
+    label?: string;
+    loadingState?: string;
+    disabled?: boolean;
+    onCheckoutRequired?: (result: BookResult) => void;
+    onError?: (error: BookingError) => void;
+}
+/**
+ * Book action button component with AsChildSlot pattern
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * <Booking.Actions.Book />
+ *
+ * // With callbacks
+ * <Booking.Actions.Book
+ *   onCheckoutRequired={({ checkoutId }) => router.push(`/checkout?id=${checkoutId}`)}
+ *   onError={(error) => console.error(error.message)}
+ * />
+ *
+ * // With render function
+ * <Booking.Actions.Book onCheckoutRequired={handleCheckout}>
+ *   {({ isLoading, error, canBook, onClick, disabled }) => (
+ *     <button onClick={onClick} disabled={disabled}>
+ *       {isLoading ? <Spinner /> : 'Book Now'}
+ *     </button>
+ *   )}
+ * </Booking.Actions.Book>
+ *
+ * // With asChild
+ * <Booking.Actions.Book asChild onCheckoutRequired={handleCheckout}>
+ *   <CustomBookButton />
+ * </Booking.Actions.Book>
+ * ```
+ */
+export declare const Book: React.ForwardRefExoticComponent<BookProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/react/booking/Book.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Book - High-level headless component for the book action button
+ * Wraps core Book with AsChildSlot pattern for customization
+ */
+import React from 'react';
+import { AsChildSlot } from '@wix/headless-utils/react';
+import * as CoreBook from '../core/booking/Book.js';
+var TestIds;
+(function (TestIds) {
+    TestIds["bookingActionBook"] = "booking-action-book";
+})(TestIds || (TestIds = {}));
+/**
+ * Book action button component with AsChildSlot pattern
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * <Booking.Actions.Book />
+ *
+ * // With callbacks
+ * <Booking.Actions.Book
+ *   onCheckoutRequired={({ checkoutId }) => router.push(`/checkout?id=${checkoutId}`)}
+ *   onError={(error) => console.error(error.message)}
+ * />
+ *
+ * // With render function
+ * <Booking.Actions.Book onCheckoutRequired={handleCheckout}>
+ *   {({ isLoading, error, canBook, onClick, disabled }) => (
+ *     <button onClick={onClick} disabled={disabled}>
+ *       {isLoading ? <Spinner /> : 'Book Now'}
+ *     </button>
+ *   )}
+ * </Booking.Actions.Book>
+ *
+ * // With asChild
+ * <Booking.Actions.Book asChild onCheckoutRequired={handleCheckout}>
+ *   <CustomBookButton />
+ * </Booking.Actions.Book>
+ * ```
+ */
+export const Book = React.forwardRef((props, ref) => {
+    const { asChild, children, className, label = 'Book Now', loadingState = 'Booking...', disabled, onCheckoutRequired, onError, } = props;
+    return (_jsx(CoreBook.Book, { onCheckoutRequired: onCheckoutRequired, onError: onError, disabled: disabled, children: (childProps) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.bookingActionBook, "data-in-progress": childProps.isLoading, customElement: children, customElementProps: childProps, children: _jsx("button", { onClick: childProps.onClick, disabled: childProps.disabled, children: childProps.isLoading ? loadingState : label }) })) }));
+});
+Book.displayName = 'Booking.Actions.Book';

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

@@ -34,3 +34,21 @@ export declare const Root: {
     (props: BookingRootProps): React.ReactNode;
     displayName: string;
 };
+/**
+ * Actions namespace containing action components for booking
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * <Booking.Actions.Book />
+ *
+ * // With callbacks
+ * <Booking.Actions.Book
+ *   onCheckoutRequired={({ checkoutId }) => router.push(`/checkout?id=${checkoutId}`)}
+ *   onError={(error) => toast.error(error)}
+ * />
+ * ```
+ */
+export declare const Actions: {
+    Book: React.ForwardRefExoticComponent<import("./Book.js").BookProps & React.RefAttributes<HTMLButtonElement>>;
+};