@wix/headless-bookings 1.0.9 → 1.0.10

package/cjs/dist/__mocks__/services/services-mocks.d.ts

@@ -5,7 +5,7 @@ import type { Service, StaffMember } 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 { StaffMemberListServiceConfig } from '../../services/staff-member-list/staff-member-list.js';
-import type { PagingMetadata } from '../../api/query-services/index.js';
+import type { PagingMetadata, AvailabilityFilter, ServiceWithAvailabilityItem } from '../../api/query-services/index.js';
 import type { Category } from '../../api/query-categories/index.js';
 /**
  * Base mock service with all fields populated (APPOINTMENT type, FIXED pricing)
@@ -102,6 +102,22 @@ export declare const mockCategories: Category[];
  * Service list config with categories for filter testing
  */
 export declare const mockServiceListConfigWithCategories: ServiceListServiceConfig;
+/**
+ * Mock services enriched with an `available` flag (catalog-search results).
+ */
+export declare const mockServicesWithAvailability: ServiceWithAvailabilityItem[];
+/**
+ * Cursor-based paging metadata with a next cursor available.
+ */
+export declare const mockAvailabilityPagingMetadata: PagingMetadata;
+/**
+ * Cursor-based paging metadata for the last page (no next cursor).
+ */
+export declare const mockAvailabilityPagingMetadataLast: PagingMetadata;
+/**
+ * Mock availability filter (date window + timezone).
+ */
+export declare const mockAvailabilityFilter: AvailabilityFilter;
 /**
  * Base mock staff member with all fields
  */

package/cjs/dist/__mocks__/services/services-mocks.js

@@ -3,7 +3,7 @@
  * Shared mock data for booking service tests
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mockServiceInPerson = exports.mockServiceWithDeposit = exports.mockSingleStaffMemberListConfig = exports.mockEmptyStaffMemberListConfig = exports.mockStaffMemberListConfig = exports.mockStaffMembers = exports.mockStaffMemberNoName = exports.mockStaffMemberMinimal = exports.mockStaffMember2 = exports.mockStaffMember = exports.mockServiceListConfigWithCategories = exports.mockCategories = exports.mockServiceConfig = exports.mockEmptyServiceListConfig = exports.mockServiceListConfigWithMore = exports.mockServiceListConfig = exports.mockPagingMetadataEmpty = exports.mockPagingMetadataWithMore = exports.mockPagingMetadata = exports.mockServices = exports.mockServiceDayRange = exports.mockServiceHourRange = exports.mockServiceFixedDuration = exports.mockServiceMinimal = exports.mockServiceCourse = exports.mockServiceClass = exports.mockServiceNoFee = exports.mockServiceCustomPrice = exports.mockServiceVariedPrice = exports.mockService = void 0;
+exports.mockServiceInPerson = exports.mockServiceWithDeposit = exports.mockSingleStaffMemberListConfig = exports.mockEmptyStaffMemberListConfig = exports.mockStaffMemberListConfig = exports.mockStaffMembers = exports.mockStaffMemberNoName = exports.mockStaffMemberMinimal = exports.mockStaffMember2 = exports.mockStaffMember = exports.mockAvailabilityFilter = exports.mockAvailabilityPagingMetadataLast = exports.mockAvailabilityPagingMetadata = exports.mockServicesWithAvailability = exports.mockServiceListConfigWithCategories = exports.mockCategories = exports.mockServiceConfig = exports.mockEmptyServiceListConfig = exports.mockServiceListConfigWithMore = exports.mockServiceListConfig = exports.mockPagingMetadataEmpty = exports.mockPagingMetadataWithMore = exports.mockPagingMetadata = exports.mockServices = exports.mockServiceDayRange = exports.mockServiceHourRange = exports.mockServiceFixedDuration = exports.mockServiceMinimal = exports.mockServiceCourse = exports.mockServiceClass = exports.mockServiceNoFee = exports.mockServiceCustomPrice = exports.mockServiceVariedPrice = exports.mockService = void 0;
 exports.createLargeServiceList = createLargeServiceList;
 exports.createLargeStaffMemberList = createLargeStaffMemberList;
 const auto_sdk_bookings_services_1 = require("@wix/auto_sdk_bookings_services");
@@ -401,6 +401,40 @@ exports.mockServiceListConfigWithCategories = {
     },
 };
 // ============================================================================
+// Availability (catalog-search) Mocks
+// ============================================================================
+/**
+ * Mock services enriched with an `available` flag (catalog-search results).
+ */
+exports.mockServicesWithAvailability = exports.mockServices.map((service, index) => ({
+    ...service,
+    available: index !== 2, // third service is unavailable
+}));
+/**
+ * Cursor-based paging metadata with a next cursor available.
+ */
+exports.mockAvailabilityPagingMetadata = {
+    count: 3,
+    hasNext: true,
+    cursor: 'next-cursor-token',
+};
+/**
+ * Cursor-based paging metadata for the last page (no next cursor).
+ */
+exports.mockAvailabilityPagingMetadataLast = {
+    count: 3,
+    hasNext: false,
+    cursor: undefined,
+};
+/**
+ * Mock availability filter (date window + timezone).
+ */
+exports.mockAvailabilityFilter = {
+    localStartDate: '2026-06-01T09:00:00',
+    localEndDate: '2026-06-01T17:00:00',
+    timeZone: 'America/New_York',
+};
+// ============================================================================
 // Staff Member Mocks
 // ============================================================================
 /**

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

@@ -4,7 +4,7 @@
  *
  * @module API
  */
-export { getServiceById, getServiceBySlug, queryServices, convertPlatformFilterToApiFilter, type PagingMetadata, type QueryServicesRequest, SYNTHETIC_CUSTOM_ID, SYNTHETIC_CUSTOMER_ID, } from './query-services/index.js';
+export { getServiceById, getServiceBySlug, queryServices, convertPlatformFilterToApiFilter, type PagingMetadata, type QueryServicesRequest, type QueryServicesResult, type ServiceWithAvailabilityItem, AvailabilityLocationType, type AvailabilityFilter, type Attribute, type AvailabilityLocation, SYNTHETIC_CUSTOM_ID, SYNTHETIC_CUSTOMER_ID, } from './query-services/index.js';
 export { fetchAvailability } from './fetch-availability/index.js';
 export * from '@wix/auto_sdk_bookings_bookings';
 export { createBooking, type CreateBookingOptions, } from './create-booking/index.js';

package/cjs/dist/api/index.js

@@ -20,12 +20,13 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.queryCategories = exports.getLocationById = exports.queryLocations = exports.placeOrder = exports.calculateCart = exports.ChannelType = exports.createCart = exports.createMultiServiceBooking = exports.bulkCreateBooking = exports.createBooking = exports.fetchAvailability = exports.SYNTHETIC_CUSTOMER_ID = exports.SYNTHETIC_CUSTOM_ID = exports.convertPlatformFilterToApiFilter = exports.queryServices = exports.getServiceBySlug = exports.getServiceById = void 0;
+exports.queryCategories = exports.getLocationById = exports.queryLocations = exports.placeOrder = exports.calculateCart = exports.ChannelType = exports.createCart = exports.createMultiServiceBooking = exports.bulkCreateBooking = exports.createBooking = exports.fetchAvailability = exports.SYNTHETIC_CUSTOMER_ID = exports.SYNTHETIC_CUSTOM_ID = exports.AvailabilityLocationType = exports.convertPlatformFilterToApiFilter = exports.queryServices = exports.getServiceBySlug = exports.getServiceById = void 0;
 var index_js_1 = require("./query-services/index.js");
 Object.defineProperty(exports, "getServiceById", { enumerable: true, get: function () { return index_js_1.getServiceById; } });
 Object.defineProperty(exports, "getServiceBySlug", { enumerable: true, get: function () { return index_js_1.getServiceBySlug; } });
 Object.defineProperty(exports, "queryServices", { enumerable: true, get: function () { return index_js_1.queryServices; } });
 Object.defineProperty(exports, "convertPlatformFilterToApiFilter", { enumerable: true, get: function () { return index_js_1.convertPlatformFilterToApiFilter; } });
+Object.defineProperty(exports, "AvailabilityLocationType", { enumerable: true, get: function () { return index_js_1.AvailabilityLocationType; } });
 Object.defineProperty(exports, "SYNTHETIC_CUSTOM_ID", { enumerable: true, get: function () { return index_js_1.SYNTHETIC_CUSTOM_ID; } });
 Object.defineProperty(exports, "SYNTHETIC_CUSTOMER_ID", { enumerable: true, get: function () { return index_js_1.SYNTHETIC_CUSTOMER_ID; } });
 var index_js_2 = require("./fetch-availability/index.js");

package/cjs/dist/api/query-services/index.d.ts

@@ -1,8 +1,16 @@
 /**
  * Query Services API
- * Fetches single or multiple services with pagination and sorting
+ * Fetches single or multiple services with pagination and sorting.
+ *
+ * `queryServices` is the single entry point. It decides which underlying endpoint
+ * to call based on the request: when an `availabilityFilter` is present it queries
+ * the catalog-search `QueryServicesByAvailability` endpoint (cursor paging, each
+ * service enriched with an `available` flag); otherwise it uses the services
+ * `queryServices` endpoint (offset paging). Callers always get the same
+ * `{ services, pagingMetadata }` shape.
  */
 import { type Service, type Paging, type Sorting } from '@wix/auto_sdk_bookings_services';
+import { LocationType as AvailabilityLocationType, type AvailabilityFilter, type Attribute, type Location as AvailabilityLocation } from '@wix/auto_sdk_bookings_catalog-search';
 import type { FilterValue as Filter } from '@wix/headless-components/react';
 /**
  * Synthetic location ID constants for non-business locations
@@ -10,24 +18,48 @@ import type { FilterValue as Filter } from '@wix/headless-components/react';
 export declare const SYNTHETIC_CUSTOM_ID = "custom";
 export declare const SYNTHETIC_CUSTOMER_ID = "customer";
 /**
- * Paging metadata from query services response.
- * Extends the SDK's Paging type with hasNext flag to indicate if more services are available.
+ * Re-exported availability filter types so consumers can build availability UIs
+ * without importing the ambassador package directly.
+ */
+export { AvailabilityLocationType, type AvailabilityFilter, type Attribute, type AvailabilityLocation, };
+/**
+ * A service, optionally enriched with a bookable-availability flag.
+ * `available` is only populated when the query runs in availability mode.
+ */
+export type ServiceWithAvailabilityItem = Service & {
+    /** Whether the service has bookable slots in the requested window. */
+    available?: boolean;
+};
+/**
+ * Paging metadata from a query response. Extends the SDK's Paging type with a
+ * `hasNext` flag and an opaque `cursor` (used in availability/cursor mode).
  */
 export type PagingMetadata = Paging & {
     /** Number of items returned in the current page */
     count?: number;
     /** Whether there are more services available to load */
     hasNext?: boolean;
+    /** Opaque cursor for the next page (availability/cursor mode only). Undefined in offset mode. */
+    cursor?: string;
 };
 /**
- * Query services request options
- * Used internally by ServiceListService to track query state
+ * Query services request options.
+ * When `availabilityFilter` is present, services are queried by real bookable
+ * availability; `pagingMetadata.cursor` then drives pagination instead of `offset`.
  */
 export interface QueryServicesRequest {
     appId: string;
     filter?: Filter;
     pagingMetadata?: PagingMetadata;
     sort?: Sorting[];
+    availabilityFilter?: AvailabilityFilter;
+}
+/**
+ * Result shape shared by both query modes.
+ */
+export interface QueryServicesResult {
+    services: ServiceWithAvailabilityItem[];
+    pagingMetadata: PagingMetadata;
 }
 /**
  * Fetches a service by its ID
@@ -72,28 +104,41 @@ export declare const getServiceBySlug: (slug: string, appId?: string) => Promise
  * ```
  */
 export declare function convertPlatformFilterToApiFilter(platformFilter: Filter): Record<string, any>;
+/**
+ * Whether an availability filter carries a real bookable constraint that warrants
+ * routing to the availability endpoint. Modifiers that don't define a query on their
+ * own (`timeZone`, `exactMatch`, `includeUnavailable`) are ignored: only a complete
+ * date window (both `localStartDate` and `localEndDate`) or a resource constraint
+ * (`locations`/`attributes`/`resourceTypes`) counts.
+ *
+ * This is the single source of truth shared by the API dispatch and the service's
+ * `hasAvailabilityFilterSignal`.
+ */
+export declare function hasActiveAvailabilityFilter(availabilityFilter?: AvailabilityFilter): boolean;
 /**
  * Query services with pagination and sorting.
- * Returns services array and paging metadata including hasNext flag.
+ * Picks the underlying endpoint by request: availability filter present → catalog-search
+ * (cursor paging, `available` flag); otherwise the offset services query.
  *
- * @param params - Query parameters including appId, filter (platform Filter type), paging metadata, and sort options
+ * @param request - Query parameters including appId, filter (platform Filter type), paging
+ *   metadata, sort options, and an optional availability filter
  * @returns Promise that resolves to services array and paging metadata with hasNext flag
  *
  * @example
  * ```ts
+ * // Offset query
  * const { services, pagingMetadata } = await queryServices({
  *   appId: '13d21c63-b5ec-5912-8397-c3a5ddb27a97',
  *   filter: { '_id': { $in: ['service1', 'service2'] } },
  *   pagingMetadata: { limit: 20, offset: 0 },
- *   sort: [{ fieldName: 'name', order: 'ASC' }]
  * });
  *
- * if (pagingMetadata.hasNext) {
- *   // Load more services
- * }
+ * // Availability-aware query (cursor paging + `available` flag)
+ * const availability = await queryServices({
+ *   appId: '13d21c63-b5ec-5912-8397-c3a5ddb27a97',
+ *   availabilityFilter: { localStartDate: '...', localEndDate: '...', timeZone: '...' },
+ *   pagingMetadata: { limit: 20 },
+ * });
  * ```
  */
-export declare function queryServices({ appId, filter, pagingMetadata, sort, }: QueryServicesRequest): Promise<{
-    services: Service[];
-    pagingMetadata: PagingMetadata;
-}>;
+export declare function queryServices(request: QueryServicesRequest): Promise<QueryServicesResult>;

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

@@ -1,13 +1,23 @@
 "use strict";
 /**
  * Query Services API
- * Fetches single or multiple services with pagination and sorting
+ * Fetches single or multiple services with pagination and sorting.
+ *
+ * `queryServices` is the single entry point. It decides which underlying endpoint
+ * to call based on the request: when an `availabilityFilter` is present it queries
+ * the catalog-search `QueryServicesByAvailability` endpoint (cursor paging, each
+ * service enriched with an `available` flag); otherwise it uses the services
+ * `queryServices` endpoint (offset paging). Callers always get the same
+ * `{ services, pagingMetadata }` shape.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getServiceBySlug = exports.getServiceById = exports.SYNTHETIC_CUSTOMER_ID = exports.SYNTHETIC_CUSTOM_ID = void 0;
+exports.getServiceBySlug = exports.getServiceById = exports.AvailabilityLocationType = exports.SYNTHETIC_CUSTOMER_ID = exports.SYNTHETIC_CUSTOM_ID = void 0;
 exports.convertPlatformFilterToApiFilter = convertPlatformFilterToApiFilter;
+exports.hasActiveAvailabilityFilter = hasActiveAvailabilityFilter;
 exports.queryServices = queryServices;
 const auto_sdk_bookings_services_1 = require("@wix/auto_sdk_bookings_services");
+const auto_sdk_bookings_catalog_search_1 = require("@wix/auto_sdk_bookings_catalog-search");
+Object.defineProperty(exports, "AvailabilityLocationType", { enumerable: true, get: function () { return auto_sdk_bookings_catalog_search_1.LocationType; } });
 const constants_js_1 = require("../../services/constants.js");
 /**
  * Synthetic location ID constants for non-business locations
@@ -187,34 +197,100 @@ const buildServicesQueryRequest = ({ appId, filter: platformFilter, paging, sort
     const query = {
         filter: Object.keys(filter).length > 0 ? filter : undefined,
         paging: paging || {
-            limit: 100, // Default limit
+            limit: constants_js_1.DEFAULT_QUERY_LIMIT,
         },
         sort,
     };
     return { query };
 };
+/**
+ * Whether an availability filter carries a real bookable constraint that warrants
+ * routing to the availability endpoint. Modifiers that don't define a query on their
+ * own (`timeZone`, `exactMatch`, `includeUnavailable`) are ignored: only a complete
+ * date window (both `localStartDate` and `localEndDate`) or a resource constraint
+ * (`locations`/`attributes`/`resourceTypes`) counts.
+ *
+ * This is the single source of truth shared by the API dispatch and the service's
+ * `hasAvailabilityFilterSignal`.
+ */
+function hasActiveAvailabilityFilter(availabilityFilter) {
+    if (!availabilityFilter)
+        return false;
+    const { localStartDate, localEndDate, locationIds, attributes, resourceTypes, } = availabilityFilter;
+    const hasDateWindow = Boolean(localStartDate && localEndDate);
+    const hasResourceConstraint = (locationIds?.length ?? 0) > 0 ||
+        (attributes?.length ?? 0) > 0 ||
+        (resourceTypes?.length ?? 0) > 0;
+    return hasDateWindow || hasResourceConstraint;
+}
+/**
+ * Queries services by real bookable availability (catalog-search). Cursor-based.
+ * The WQL filter reuses the same platform→API conversion as the offset query.
+ */
+async function queryServicesByAvailability({ appId, filter, availabilityFilter, sort, pagingMetadata, }) {
+    const wqlFilter = {
+        appId: appId ?? constants_js_1.BOOKING_APP_ID,
+    };
+    if (filter) {
+        Object.assign(wqlFilter, convertPlatformFilterToApiFilter(filter));
+    }
+    const limit = pagingMetadata?.limit ?? constants_js_1.DEFAULT_QUERY_LIMIT;
+    const cursor = pagingMetadata?.cursor;
+    const availabilityQuery = {
+        filter: wqlFilter,
+        sort,
+        cursorPaging: { limit, ...(cursor ? { cursor } : {}) },
+    };
+    const response = await (0, auto_sdk_bookings_catalog_search_1.queryServicesByAvailability)({
+        query: availabilityQuery,
+        availabilityFilter,
+    });
+    const results = response.results ?? [];
+    return {
+        services: results.map((result) => ({
+            ...result.service,
+            available: result.available ?? true,
+        })),
+        pagingMetadata: {
+            limit,
+            count: response.pagingMetadata?.count ?? results.length,
+            hasNext: response.pagingMetadata?.hasNext ?? false,
+            cursor: response.pagingMetadata?.cursors?.next ?? undefined,
+        },
+    };
+}
 /**
  * Query services with pagination and sorting.
- * Returns services array and paging metadata including hasNext flag.
+ * Picks the underlying endpoint by request: availability filter present → catalog-search
+ * (cursor paging, `available` flag); otherwise the offset services query.
  *
- * @param params - Query parameters including appId, filter (platform Filter type), paging metadata, and sort options
+ * @param request - Query parameters including appId, filter (platform Filter type), paging
+ *   metadata, sort options, and an optional availability filter
  * @returns Promise that resolves to services array and paging metadata with hasNext flag
  *
  * @example
  * ```ts
+ * // Offset query
  * const { services, pagingMetadata } = await queryServices({
  *   appId: '13d21c63-b5ec-5912-8397-c3a5ddb27a97',
  *   filter: { '_id': { $in: ['service1', 'service2'] } },
  *   pagingMetadata: { limit: 20, offset: 0 },
- *   sort: [{ fieldName: 'name', order: 'ASC' }]
  * });
  *
- * if (pagingMetadata.hasNext) {
- *   // Load more services
- * }
+ * // Availability-aware query (cursor paging + `available` flag)
+ * const availability = await queryServices({
+ *   appId: '13d21c63-b5ec-5912-8397-c3a5ddb27a97',
+ *   availabilityFilter: { localStartDate: '...', localEndDate: '...', timeZone: '...' },
+ *   pagingMetadata: { limit: 20 },
+ * });
  * ```
  */
-async function queryServices({ appId, filter, pagingMetadata, sort, }) {
+async function queryServices(request) {
+    const { appId, filter, pagingMetadata, sort, availabilityFilter } = request;
+    // Decide the endpoint by the filters passed.
+    if (hasActiveAvailabilityFilter(availabilityFilter)) {
+        return queryServicesByAvailability(request);
+    }
     try {
         const queryRequest = buildServicesQueryRequest({
             appId,

package/cjs/dist/react/core/service-list/ServiceList.d.ts

@@ -4,8 +4,7 @@
  */
 import React from 'react';
 import { type ServiceListServiceConfig, type QueryOptions } from '../../../services/service-list/service-list.js';
-import type { Service } from '@wix/auto_sdk_bookings_services';
-import type { PagingMetadata } from '../../../api/query-services/index.js';
+import type { PagingMetadata, ServiceWithAvailabilityItem } from '../../../api/query-services/index.js';
 /**
  * Props for ServiceList.Root component
  */
@@ -37,7 +36,7 @@ export interface ServicesProps {
  */
 export interface ServicesRenderProps {
     /** Array of services */
-    services: Service[];
+    services: ServiceWithAvailabilityItem[];
     /** Whether services are currently loading */
     isLoading: boolean;
     /** Error message, or null if no error */

package/cjs/dist/react/service-list/ServiceList.d.ts

@@ -6,7 +6,7 @@ import React from 'react';
 import { ListVariant, GenericListLoadMoreRenderProps, type FilterRootProps } from '@wix/headless-components/react';
 import { AsChildChildren } from '@wix/headless-utils/react';
 import type { ServiceListServiceConfig } from '../../services/service-list/service-list.js';
-import type { Service as ServiceType } from '@wix/auto_sdk_bookings_services';
+import type { ServiceWithAvailabilityItem } from '../../api/query-services/index.js';
 export declare const TestIds: {
     readonly serviceListRoot: "service-list-root";
     readonly serviceListServices: "service-list-services";
@@ -95,7 +95,7 @@ export type ServiceRootChildren = AsChildChildren<{
  * Supports both ReactNode and function children that receive { selected, bookable }
  */
 export interface ServiceItemWrapperProps {
-    item: ServiceType;
+    item: ServiceWithAvailabilityItem;
     index?: number;
     /** Children can be ReactNode or a function that receives { selected, bookable } from Service.Root */
     children: React.ReactNode | ServiceRootChildren;
@@ -105,7 +105,7 @@ export interface ServiceItemWrapperProps {
  * Provides items array and itemWrapper function for custom rendering
  */
 export interface ServiceRepeaterRenderProps {
-    items: ServiceType[];
+    items: ServiceWithAvailabilityItem[];
     variant?: ListVariant;
     /** Wraps each item in Service.Root - children can be ReactNode or function receiving { selected, bookable } */
     itemWrapper: (props: ServiceItemWrapperProps) => React.ReactNode;

package/cjs/dist/react/service-list/ServiceList.js

@@ -160,7 +160,7 @@ exports.ServiceRepeater = react_1.default.forwardRef((props, ref) => {
     // Custom itemWrapper that matches ItemWrapperProps signature
     const serviceItemWrapper = (wrapperProps) => {
         const { item: service, children: itemChildren } = wrapperProps;
-        return ((0, jsx_runtime_1.jsx)(Service.Root, { service: service, "data-testid": exports.TestIds.serviceListService, "data-service-id": service._id, "data-item-id": service._id, children: isServiceRootFunction
+        return ((0, jsx_runtime_1.jsx)(Service.Root, { service: service, "data-testid": exports.TestIds.serviceListService, "data-service-id": service._id, "data-item-id": service._id, "data-available": service.available, children: isServiceRootFunction
                 ? children
                 : itemChildren }, service._id));
     };

package/cjs/dist/react/service-list/ServiceList.stories.d.ts

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import * as ServiceList from './ServiceList';
+/**
+ * ServiceList component story.
+ *
+ * ServiceList renders a list of bookings services. When the configured services
+ * carry an `available` flag (availability mode), stories can style each item by
+ * its availability. It supports filtering by categories, availability dates, and
+ * custom attributes.
+ */
+declare const meta: Meta<typeof ServiceList.Root>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Basic list with three services, two available and one unavailable.
+ */
+export declare const BasicList: Story;
+/**
+ * List with empty state message displayed when no services are available.
+ */
+export declare const EmptyState: Story;
+/**
+ * List with detailed service information (name and price).
+ */
+export declare const WithServiceDetails: Story;
+/**
+ * List with custom styling for available/unavailable items.
+ */
+export declare const WithAvailabilityStates: Story;

package/cjs/dist/react/service-list/ServiceList.stories.js

@@ -0,0 +1,125 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithAvailabilityStates = exports.WithServiceDetails = exports.EmptyState = exports.BasicList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ServiceList = __importStar(require("./ServiceList"));
+const Booking = __importStar(require("../booking/Booking"));
+const Service = __importStar(require("../service/Service"));
+const services_mocks_1 = require("../../__mocks__/services/services-mocks");
+const constants_1 = require("../../services/constants");
+const config = {
+    services: services_mocks_1.mockServicesWithAvailability,
+    categories: services_mocks_1.mockCategories,
+    options: { appId: constants_1.BOOKING_APP_ID },
+};
+const emptyConfig = {
+    services: [],
+    categories: [],
+    options: { appId: constants_1.BOOKING_APP_ID },
+};
+/**
+ * ServiceList component story.
+ *
+ * ServiceList renders a list of bookings services. When the configured services
+ * carry an `available` flag (availability mode), stories can style each item by
+ * its availability. It supports filtering by categories, availability dates, and
+ * custom attributes.
+ */
+const meta = {
+    title: 'Bookings/ServiceList',
+    component: ServiceList.Root,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+/**
+ * Basic list with three services, two available and one unavailable.
+ */
+exports.BasicList = {
+    render: () => ((0, jsx_runtime_1.jsx)(Booking.Root, { children: (0, jsx_runtime_1.jsx)(ServiceList.Root, { serviceListConfig: config, children: (0, jsx_runtime_1.jsx)(ServiceList.Services, { children: (0, jsx_runtime_1.jsx)(ServiceList.ServiceRepeater, { children: (0, jsx_runtime_1.jsx)(Service.Name, {}) }) }) }) })),
+};
+/**
+ * List with empty state message displayed when no services are available.
+ */
+exports.EmptyState = {
+    render: () => ((0, jsx_runtime_1.jsx)(Booking.Root, { children: (0, jsx_runtime_1.jsx)(ServiceList.Root, { serviceListConfig: emptyConfig, children: (0, jsx_runtime_1.jsx)(ServiceList.Services, { emptyState: (0, jsx_runtime_1.jsx)("div", { style: {
+                        padding: '2rem',
+                        textAlign: 'center',
+                        color: 'var(--color-muted-foreground)',
+                    }, children: "No services available" }), children: (0, jsx_runtime_1.jsx)(ServiceList.ServiceRepeater, { children: (0, jsx_runtime_1.jsx)(Service.Name, {}) }) }) }) })),
+};
+/**
+ * List with detailed service information (name and price).
+ */
+exports.WithServiceDetails = {
+    render: () => ((0, jsx_runtime_1.jsx)(Booking.Root, { children: (0, jsx_runtime_1.jsx)(ServiceList.Root, { serviceListConfig: config, children: (0, jsx_runtime_1.jsx)(ServiceList.Services, { children: (0, jsx_runtime_1.jsx)(ServiceList.ServiceRepeater, { asChild: true, children: ({ items, itemWrapper, }) => ((0, jsx_runtime_1.jsx)("ul", { style: { listStyle: 'none', padding: 0 }, children: items.map((service, index) => ((0, jsx_runtime_1.jsx)("li", { style: {
+                                padding: '1rem',
+                                borderBottom: '1px solid var(--color-border)',
+                                opacity: service.available === false ? 0.6 : 1,
+                            }, children: itemWrapper({
+                                item: service,
+                                index,
+                                children: ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Service.Name, {}), (0, jsx_runtime_1.jsx)(Service.Price, {})] })),
+                            }) }, service._id))) })) }) }) }) })),
+};
+/**
+ * List with custom styling for available/unavailable items.
+ */
+exports.WithAvailabilityStates = {
+    render: () => ((0, jsx_runtime_1.jsx)(Booking.Root, { children: (0, jsx_runtime_1.jsx)(ServiceList.Root, { serviceListConfig: config, children: (0, jsx_runtime_1.jsx)(ServiceList.Services, { children: (0, jsx_runtime_1.jsx)(ServiceList.ServiceRepeater, { asChild: true, children: ({ items, itemWrapper, }) => ((0, jsx_runtime_1.jsx)("ul", { style: { listStyle: 'none', padding: 0 }, children: items.map((service, index) => ((0, jsx_runtime_1.jsx)("li", { style: {
+                                padding: '1rem',
+                                marginBottom: '0.5rem',
+                                borderRadius: '4px',
+                                backgroundColor: service.available
+                                    ? 'color-mix(in srgb, var(--color-primary) 8%, transparent)'
+                                    : 'var(--color-secondary)',
+                                borderLeft: `4px solid ${service.available ? 'var(--color-primary)' : 'var(--color-border)'}`,
+                                opacity: service.available ? 1 : 0.7,
+                            }, children: itemWrapper({
+                                item: service,
+                                index,
+                                children: ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                        display: 'flex',
+                                        justifyContent: 'space-between',
+                                        alignItems: 'center',
+                                    }, children: [(0, jsx_runtime_1.jsx)(Service.Name, {}), (0, jsx_runtime_1.jsx)("span", { style: {
+                                                fontSize: '0.875rem',
+                                                fontWeight: 500,
+                                                color: service.available
+                                                    ? 'var(--color-primary)'
+                                                    : 'var(--color-muted-foreground)',
+                                            }, children: service.available ? 'Available' : 'Not Available' })] })),
+                            }) }, service._id))) })) }) }) }) })),
+};

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

@@ -5,6 +5,8 @@
  */
 /** Booking app definition ID */
 export declare const BOOKING_APP_ID = "13d21c63-b5ec-5912-8397-c3a5ddb27a97";
+/** Default page size for service queries (offset and cursor/availability modes) */
+export declare const DEFAULT_QUERY_LIMIT = 100;
 /** Resource type ID for staff members */
 export declare const STAFF_MEMBER_RESOURCE_TYPE_ID = "1cd44cf8-756f-41c3-bd90-3e2ffcaf1155";
 export declare const ClientServiceIds: {

package/cjs/dist/services/constants.js

@@ -5,9 +5,11 @@
  * @module Services/Constants
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ClientServiceIds = exports.STAFF_MEMBER_RESOURCE_TYPE_ID = exports.BOOKING_APP_ID = void 0;
+exports.ClientServiceIds = exports.STAFF_MEMBER_RESOURCE_TYPE_ID = exports.DEFAULT_QUERY_LIMIT = exports.BOOKING_APP_ID = void 0;
 /** Booking app definition ID */
 exports.BOOKING_APP_ID = '13d21c63-b5ec-5912-8397-c3a5ddb27a97';
+/** Default page size for service queries (offset and cursor/availability modes) */
+exports.DEFAULT_QUERY_LIMIT = 100;
 /** Resource type ID for staff members */
 exports.STAFF_MEMBER_RESOURCE_TYPE_ID = '1cd44cf8-756f-41c3-bd90-3e2ffcaf1155';
 exports.ClientServiceIds = {

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

@@ -5,8 +5,8 @@
 export { ServiceService, ServiceServiceDefinition, type ServiceServiceAPI, type ServiceServiceConfig, type ServiceActions, type ServicePaymentData, loadServiceServiceInitialData, type SuccessServiceServiceConfigResult, type NotFoundServiceServiceConfigResult, } from './service/service.js';
 export { BookingService, BookingServiceDefinition, type BookingServiceConfig, type BookingServiceActions, type ServiceSelection, type ServiceSelectionTimeSlot, } from './booking/booking.js';
 export { TimeSlotListService, TimeSlotListServiceDefinition, TimeSlotService, TimeSlotServiceDefinition, ViewMode, loadTimeSlotListConfig, type TimeSlotListServiceAPI, type TimeSlotListServiceActions, type TimeSlotListServiceConfig, type TimeSlotServiceAPI, type TimeSlotServiceConfig, type LoadTimeSlotListConfigOptions, type LoadTimeSlotListConfigResult, } from './time-slot-list/index.js';
-export { ServiceListService, ServiceListServiceDefinition, type ServiceListServiceAPI, type ServiceListServiceConfig, type ServiceListActions, type QueryOptions, loadServiceListServiceInitialData, type SuccessServiceListServiceConfigResult, type ErrorServiceListServiceConfigResult, } from './service-list/service-list.js';
-export { SYNTHETIC_CUSTOM_ID, SYNTHETIC_CUSTOMER_ID, } from '../api/query-services/index.js';
+export { ServiceListService, ServiceListServiceDefinition, type ServiceListServiceAPI, type ServiceListServiceConfig, type ServiceListActions, type QueryOptions, loadServiceListServiceInitialData, type LoadServiceListServiceOptions, type SuccessServiceListServiceConfigResult, type ErrorServiceListServiceConfigResult, } from './service-list/service-list.js';
+export { SYNTHETIC_CUSTOM_ID, SYNTHETIC_CUSTOMER_ID, AvailabilityLocationType, type ServiceWithAvailabilityItem, type AvailabilityFilter, type Attribute, type AvailabilityLocation, } from '../api/query-services/index.js';
 export { executeBookAction, canBook, buildBookingRequest, buildCartRequest, buildDayRangeBookingRequest, createBookingsForCart, isDayRangeService, getDayRangeBounds, type CanBookParams, type BookResult, type BookingError, type BookActionParams, type BookChildProps, type BookProps, type BuildCartParams, type BuildDayRangeBookingRequest, type CreatedBookings, type DayRangeBounds, } from './booking/book-action/index.js';
 export { BookingFormService, BookingFormServiceDefinition, type BookingFormServiceAPI, type BookingFormServiceConfig, } from './booking-form/booking-form.js';
 export { PaymentService, PaymentServiceDefinition, type PaymentServiceAPI, type PaymentServiceConfig, type PaymentDetails, type PricingServiceSelection, type LineItemAdditionalInfo, type ServicePaymentOptions, loadPaymentConfig, type SuccessPaymentConfigResult, type ErrorPaymentConfigResult, } from './payment/payment.js';