@wix/headless-bookings 0.0.45 → 0.0.47

package/dist/react/service/Service.js

@@ -49,7 +49,11 @@ var TestIds;
 })(TestIds || (TestIds = {}));
 /**
  * Root component that provides service context to the entire app.
- * Requires exactly one of: service, serviceId, or serviceSlug.
+ * Can be used with:
+ * - service: Pre-loaded service object (SSR pattern)
+ * - serviceId: Service ID for dynamic loading
+ * - serviceSlug: Service slug for dynamic loading
+ * - No config: Reads from BookingService's selected service (requires BookingService)
  *
  * @order 1
  * @component
@@ -86,11 +90,30 @@ var TestIds;
  *     </Service.Root>
  *   );
  * }
+ *
+ * // Reading from BookingService's selected service
+ * // (requires Booking.Root parent context)
+ * function SelectedServiceDisplay() {
+ *   return (
+ *     <Service.Root>
+ *       <Service.Name />
+ *       <Service.Price />
+ *     </Service.Root>
+ *   );
+ * }
  * ```
  */
 export const Root = React.forwardRef((props, ref) => {
     const { children, service, serviceId, serviceSlug, appId, asChild, className, ...attrs } = props;
-    return (_jsx(CoreService.Root, { serviceServiceConfig: { service, serviceId, serviceSlug, appId }, children: ({ selected, bookable }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceRoot, "data-selected": selected, "data-bookable": bookable, customElement: children, customElementProps: { selected, bookable }, ...attrs, children: children })) }));
+    // Build config - when no service config is provided, pass empty object
+    // to trigger "from booking signal" mode in ServiceService
+    const serviceServiceConfig = {
+        service,
+        serviceId,
+        serviceSlug,
+        appId,
+    };
+    return (_jsx(CoreService.Root, { serviceServiceConfig: serviceServiceConfig, children: ({ selected, bookable }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceRoot, "data-selected": selected, "data-bookable": bookable, customElement: children, customElementProps: { selected, bookable }, ...attrs, children: children })) }));
 });
 Root.displayName = 'Service.Root';
 /**

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

@@ -3,7 +3,7 @@
  * Provides components for displaying services list with pagination
  */
 import React from 'react';
-import { ListVariant, GenericListLoadMoreRenderProps } from '@wix/headless-components/react';
+import { ListVariant, GenericListLoadMoreRenderProps, Filter as FilterPrimitive } 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';
@@ -47,19 +47,28 @@ export declare const Root: React.ForwardRefExoticComponent<ServiceListRootProps
  */
 export interface ServicesProps {
     children: React.ReactNode;
+    /** Content to display when no services are available */
     emptyState?: React.ReactNode;
+    /** Content to display when loading and no services are available */
+    loadingState?: React.ReactNode;
+    /** Content to display when an error occurs and no services are available */
+    errorState?: React.ReactNode;
     infiniteScroll?: boolean;
     pageSize?: number;
     className?: string;
 }
 /**
- * Container for the services list with empty state support.
+ * Container for the services list with empty, loading, and error state support.
  * Wraps GenericList.Items. Follows List Container Level pattern.
  *
  * @component
  * @example
  * ```tsx
- * <ServiceList.Services emptyState={<div>No services found</div>}>
+ * <ServiceList.Services
+ *   emptyState={<div>No services found</div>}
+ *   loadingState={<div>Loading services...</div>}
+ *   errorState={<div>Failed to load services</div>}
+ * >
  *   <ServiceList.ServiceRepeater>
  *     <Service.Name />
  *     <Service.Price />
@@ -185,3 +194,64 @@ export declare const LoadMore: React.ForwardRefExoticComponent<LoadMoreProps & R
 export declare const Actions: {
     LoadMore: React.ForwardRefExoticComponent<LoadMoreProps & React.RefAttributes<HTMLButtonElement>>;
 };
+/**
+ * Data available through asChild pattern
+ */
+export interface FilterAsChildProps {
+    /** Filter options configuration derived from categories */
+    filterOptions: FilterPrimitive.FilterOption[];
+    /** Current filter state */
+    currentFilter: FilterPrimitive.Filter;
+    /** Function to update filter */
+    updateFilter: (filter: FilterPrimitive.Filter) => void;
+    /** Function to clear all active filters */
+    clearFilters: () => void;
+    /** Whether any filters are currently active */
+    isFiltered: boolean;
+}
+/**
+ * Props for ServiceList Filter component
+ */
+export interface FilterProps {
+    /** Child components that will have access to filter functionality */
+    children: React.ReactNode | ((props: FilterAsChildProps) => React.ReactNode);
+    /** When true, the component will not render its own div wrapper */
+    asChild?: boolean;
+    /** CSS classes to apply to the filter container */
+    className?: string;
+}
+/**
+ * Filter component that provides filtering functionality for service lists.
+ * Integrates with ServiceListService for categories and BookingService for location.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Filter } from '@wix/headless-components/react';
+ *
+ * <ServiceList.Filter className="filter-sidebar">
+ *   <Filter.FilterOptions>
+ *     <Filter.FilterOptionRepeater>
+ *       <Filter.FilterOption.Label />
+ *       <Filter.FilterOption.SingleFilter />
+ *     </Filter.FilterOptionRepeater>
+ *   </Filter.FilterOptions>
+ *   <Filter.Filtered>
+ *     <Filter.Action.Clear label="Clear Filters" />
+ *   </Filter.Filtered>
+ * </ServiceList.Filter>
+ *
+ * // With asChild pattern
+ * <ServiceList.Filter asChild>
+ *   <aside className="filter-sidebar">
+ *     <Filter.FilterOptions>
+ *       <Filter.FilterOptionRepeater>
+ *         <Filter.FilterOption.Label />
+ *         <Filter.FilterOption.SingleFilter />
+ *       </Filter.FilterOptionRepeater>
+ *     </Filter.FilterOptions>
+ *   </aside>
+ * </ServiceList.Filter>
+ * ```
+ */
+export declare const Filter: React.ForwardRefExoticComponent<FilterProps & React.RefAttributes<HTMLElement>>;

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

@@ -4,8 +4,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Provides components for displaying services list with pagination
  */
 import React from 'react';
-import { GenericList, } from '@wix/headless-components/react';
+import { GenericList, Filter as FilterPrimitive, } from '@wix/headless-components/react';
+import { AsChildSlot } from '@wix/headless-utils/react';
 import * as CoreServiceList from '../core/service-list/ServiceList.js';
+import * as CoreServiceListFilter from '../core/service-list/ServiceListFilter.js';
 import * as Service from '../service/Service.js';
 /**
  * Booking app ID constant
@@ -17,6 +19,7 @@ var TestIds;
     TestIds["serviceListServices"] = "service-list-services";
     TestIds["serviceListService"] = "service-list-service";
     TestIds["serviceListLoadMore"] = "service-list-load-more";
+    TestIds["serviceListFilter"] = "service-list-filter";
 })(TestIds || (TestIds = {}));
 /**
  * Root component that provides the ServiceList service context for rendering services lists.
@@ -70,22 +73,26 @@ const DEFAULT_PAGE_SIZE = 100;
  */
 const RootContent = React.forwardRef((props, ref) => {
     const { children, className, variant, pageSize = DEFAULT_PAGE_SIZE } = props;
-    return (_jsx(CoreServiceList.Services, { children: ({ services: servicesList, isLoading, hasMore, loadMore }) => {
+    return (_jsx(CoreServiceList.Services, { children: ({ services: servicesList, isLoading, hasMore, loadMore, error }) => {
             const items = servicesList.map((service) => ({
                 ...service,
                 id: service._id,
             }));
-            return (_jsx(GenericList.Root, { items: items, loadMore: () => loadMore(pageSize), hasMore: hasMore, isLoading: isLoading, className: className, ref: ref, "data-testid": TestIds.serviceListRoot, variant: variant, children: children }));
+            return (_jsx(GenericList.Root, { items: items, loadMore: () => loadMore(pageSize), hasMore: hasMore, isLoading: isLoading, error: error, className: className, ref: ref, "data-testid": TestIds.serviceListRoot, variant: variant, children: children }));
         } }));
 });
 /**
- * Container for the services list with empty state support.
+ * Container for the services list with empty, loading, and error state support.
  * Wraps GenericList.Items. Follows List Container Level pattern.
  *
  * @component
  * @example
  * ```tsx
- * <ServiceList.Services emptyState={<div>No services found</div>}>
+ * <ServiceList.Services
+ *   emptyState={<div>No services found</div>}
+ *   loadingState={<div>Loading services...</div>}
+ *   errorState={<div>Failed to load services</div>}
+ * >
  *   <ServiceList.ServiceRepeater>
  *     <Service.Name />
  *     <Service.Price />
@@ -94,8 +101,8 @@ const RootContent = React.forwardRef((props, ref) => {
  * ```
  */
 export const Services = React.forwardRef((props, ref) => {
-    const { children, ...otherProps } = props;
-    return (_jsx(GenericList.Items, { ref: ref, "data-testid": TestIds.serviceListServices, ...otherProps, children: children }));
+    const { children, emptyState, loadingState, errorState, ...otherProps } = props;
+    return (_jsx(GenericList.Items, { ref: ref, "data-testid": TestIds.serviceListServices, emptyState: emptyState, loadingState: loadingState, errorState: errorState, ...otherProps, children: children }));
 });
 Services.displayName = 'ServiceList.Services';
 /**
@@ -170,3 +177,52 @@ LoadMore.displayName = 'ServiceList.Actions.LoadMore';
 export const Actions = {
     LoadMore,
 };
+/**
+ * Filter component that provides filtering functionality for service lists.
+ * Integrates with ServiceListService for categories and BookingService for location.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Filter } from '@wix/headless-components/react';
+ *
+ * <ServiceList.Filter className="filter-sidebar">
+ *   <Filter.FilterOptions>
+ *     <Filter.FilterOptionRepeater>
+ *       <Filter.FilterOption.Label />
+ *       <Filter.FilterOption.SingleFilter />
+ *     </Filter.FilterOptionRepeater>
+ *   </Filter.FilterOptions>
+ *   <Filter.Filtered>
+ *     <Filter.Action.Clear label="Clear Filters" />
+ *   </Filter.Filtered>
+ * </ServiceList.Filter>
+ *
+ * // With asChild pattern
+ * <ServiceList.Filter asChild>
+ *   <aside className="filter-sidebar">
+ *     <Filter.FilterOptions>
+ *       <Filter.FilterOptionRepeater>
+ *         <Filter.FilterOption.Label />
+ *         <Filter.FilterOption.SingleFilter />
+ *       </Filter.FilterOptionRepeater>
+ *     </Filter.FilterOptions>
+ *   </aside>
+ * </ServiceList.Filter>
+ * ```
+ */
+export const Filter = React.forwardRef((props, ref) => {
+    const { children, asChild, className, ...otherProps } = props;
+    return (_jsx(CoreServiceListFilter.Root, { children: ({ filterOptions, currentFilter, updateFilter, clearFilters, isFiltered, }) => {
+            // Prepare asChildProps for function children
+            const asChildProps = {
+                filterOptions,
+                currentFilter: currentFilter,
+                updateFilter: (value) => updateFilter(value),
+                clearFilters,
+                isFiltered,
+            };
+            return (_jsx(FilterPrimitive.Root, { value: currentFilter, onChange: (value) => updateFilter(value), filterOptions: filterOptions, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceListFilter, "data-is-filtered": isFiltered, customElement: children, customElementProps: asChildProps, ...otherProps, children: children }) }));
+        } }));
+});
+Filter.displayName = 'ServiceList.Filter';

package/dist/services/service/service.js

@@ -54,6 +54,8 @@ export const ServiceServiceDefinition = defineService('service');
  */
 export const ServiceService = implementService.withConfig()(ServiceServiceDefinition, ({ getService, config }) => {
     const signalsService = getService(SignalsServiceDefinition);
+    // Determine if we're in "from booking signal" mode (no service config provided)
+    const noExplicitService = !config.service && !config.serviceId && !config.serviceSlug;
     // Try to get BookingService (optional dependency for showcase mode)
     let bookingService = null;
     try {
@@ -63,9 +65,27 @@ export const ServiceService = implementService.withConfig()(ServiceServiceDefini
         // BookingService not available - showcase mode
         bookingService = null;
     }
-    // Initialize service signal - use empty service object if not provided
-    const initialService = config.service || {};
-    const serviceSignal = signalsService.signal(initialService);
+    // In "from booking signal" mode, BookingService must be available
+    if (noExplicitService && !bookingService) {
+        throw new Error('Service.Root requires either a service config (service, serviceId, or serviceSlug) or BookingService to be available');
+    }
+    // Initialize service signal
+    // In "from booking signal" mode, use a computed signal that reads from BookingService
+    let serviceSignal;
+    if (noExplicitService && bookingService) {
+        // Create a computed signal that reads from BookingService's first selected service
+        const computedServiceSignal = signalsService.computed(() => {
+            const selections = bookingService.serviceSelections.get();
+            return selections[0]?.service || null;
+        });
+        // Wrap computed signal as a Signal (read-only in practice for this mode)
+        serviceSignal = computedServiceSignal;
+    }
+    else {
+        // Standard mode: use provided service or empty object
+        const initialService = config.service || {};
+        serviceSignal = signalsService.signal(initialService);
+    }
     const isLoadingSignal = signalsService.signal(!!config.serviceId);
     const errorSignal = signalsService.signal(null);
     // Default appId to BOOKING_APP_ID if not provided

package/dist/services/service-list/service-list.d.ts

@@ -4,7 +4,9 @@
  */
 import { type Signal, type ReadOnlySignal } from '@wix/services-definitions/core-services/signals';
 import type { Service } from '@wix/auto_sdk_bookings_services';
-import type { QueryServicesRequest, PagingMetadata } from '../../api/query-services/index.js';
+import type { QueryServicesRequest, PagingMetadata, ServiceListFilters } from '../../api/query-services/index.js';
+import { type Category } from '../../api/query-categories/index.js';
+import type { FilterOption } from '@wix/headless-components/react';
 export type { ServiceListFilters } from '../../api/query-services/index.js';
 /**
  * Query options without paging metadata (user-controlled request params)
@@ -16,6 +18,7 @@ export type QueryOptions = Omit<QueryServicesRequest, 'pagingMetadata'>;
  */
 export interface ServiceListServiceConfig {
     services?: Service[];
+    categories?: Category[];
     options?: QueryServicesRequest;
 }
 /**
@@ -24,6 +27,8 @@ export interface ServiceListServiceConfig {
 export interface ServiceListActions {
     loadMore: (count: number) => Promise<void>;
     setQueryOptions: (options: QueryOptions) => void;
+    setFilter: (filter: ServiceListFilters) => void;
+    resetFilter: () => void;
 }
 /**
  * API interface for the ServiceList service
@@ -39,6 +44,14 @@ export interface ServiceListServiceAPI {
     isLoadingSignal: Signal<boolean>;
     /** Reactive signal containing any error message, or null if no error */
     errorSignal: Signal<string | null>;
+    /** Reactive signal containing available categories for filtering */
+    categoriesSignal: Signal<Category[]>;
+    /** Reactive signal containing current filter state */
+    filterSignal: Signal<ServiceListFilters | null>;
+    /** Computed signal containing filter options derived from categories */
+    filterOptionsSignal: ReadOnlySignal<FilterOption[]>;
+    /** Computed signal indicating if any filters are active */
+    isFilteredSignal: ReadOnlySignal<boolean>;
     /** Actions object containing query actions */
     actions: ServiceListActions;
     /** Reactive signal indicating if there are more services to load */

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

@@ -5,6 +5,8 @@
 import { defineService, implementService } from '@wix/services-definitions';
 import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
 import { queryServices } from '../../api/query-services/index.js';
+import { queryCategories, } from '../../api/query-categories/index.js';
+import { BookingServiceDefinition } from '../booking/booking.js';
 /**
  * Booking app ID constant
  */
@@ -73,6 +75,7 @@ export const ServiceListServiceDefinition = defineService('service-list');
 export const ServiceListService = implementService.withConfig()(ServiceListServiceDefinition, ({ getService, config }) => {
     let firstRun = true;
     const signalsService = getService(SignalsServiceDefinition);
+    const bookingService = getService(BookingServiceDefinition);
     // Default appId to BOOKING_APP_ID if not provided
     const appId = config.options?.appId ?? BOOKING_APP_ID;
     // Check if services are provided (showcase mode vs query mode)
@@ -111,13 +114,59 @@ export const ServiceListService = implementService.withConfig()(ServiceListServi
     const pagingMetadataSignal = signalsService.signal(initialPagingMetadata);
     const isLoadingSignal = signalsService.signal(false);
     const errorSignal = signalsService.signal(null);
+    // Categories signal - initialized from config
+    const categoriesSignal = signalsService.signal(config.categories || []);
+    // Filter signal - current filter state (separate from queryOptions for UI)
+    const filterSignal = signalsService.signal(config.options?.filters || null);
+    // Computed filter options from categories
+    const filterOptionsSignal = signalsService.computed(() => {
+        const categories = categoriesSignal.get();
+        if (!categories.length)
+            return [];
+        return [
+            {
+                key: 'category',
+                label: 'Category',
+                type: 'single',
+                displayType: 'text',
+                fieldName: 'categoryIds',
+                validValues: categories
+                    .map((c) => c._id)
+                    .filter((id) => Boolean(id)),
+                valueFormatter: (id) => {
+                    const cat = categories.find((c) => c._id === id);
+                    return cat?.name || String(id);
+                },
+            },
+        ];
+    });
+    // Computed signal for filtered state
+    const isFilteredSignal = signalsService.computed(() => {
+        const filter = filterSignal.get();
+        return !!(filter?.categoryIds?.length || filter?.locationIds?.length);
+    });
+    // Helper to get effective filters including location from BookingService
+    const getEffectiveFilters = (baseFilters) => {
+        const selectedLocation = bookingService.location.get();
+        const locationId = selectedLocation?.business?._id;
+        if (!baseFilters && !locationId) {
+            return undefined;
+        }
+        return {
+            ...baseFilters,
+            ...(locationId ? { locationIds: [locationId] } : {}),
+        };
+    };
     // Auto-query on queryOptions changes (client-side only)
-    // IMPORTANT: Only subscribes to queryOptionsSignal, NOT pagingMetadataSignal
+    // IMPORTANT: Only subscribes to queryOptionsSignal and bookingService.location
     if (typeof window !== 'undefined') {
         signalsService.effect(async () => {
             // CRITICAL: Read queryOptionsSignal to establish dependency
             // Do NOT read pagingMetadataSignal here to avoid infinite loop
             const queryOptions = queryOptionsSignal.get();
+            // Also subscribe to location changes from BookingService
+            // Reading the signal here establishes the dependency
+            bookingService.location.get();
             if (firstRun) {
                 firstRun = false;
                 // If we have initial services (showcase mode), don't query on first run
@@ -126,13 +175,15 @@ export const ServiceListService = implementService.withConfig()(ServiceListServi
                 }
             }
             // Read paging metadata outside of dependency tracking for the fetch
-            const currentPaging = pagingMetadataSignal.get();
+            const currentPaging = pagingMetadataSignal.peek();
+            // Get effective filters including location from BookingService
+            const effectiveFilters = getEffectiveFilters(queryOptions.filters);
             try {
                 isLoadingSignal.set(true);
                 errorSignal.set(null);
                 const result = await queryServices({
                     appId: queryOptions.appId,
-                    filters: queryOptions.filters,
+                    filters: effectiveFilters,
                     pagingMetadata: {
                         limit: currentPaging.limit,
                         offset: 0, // Reset to first page when query options change
@@ -162,12 +213,14 @@ export const ServiceListService = implementService.withConfig()(ServiceListServi
             offset: nextOffset,
             hasNext: false, // Will be updated after query
         };
+        // Get effective filters including location from BookingService
+        const effectiveFilters = getEffectiveFilters(currentQueryOptions.filters);
         try {
             isLoadingSignal.set(true);
             errorSignal.set(null);
             const result = await queryServices({
                 appId: currentQueryOptions.appId,
-                filters: currentQueryOptions.filters,
+                filters: effectiveFilters,
                 pagingMetadata: nextPaging,
                 sort: currentQueryOptions.sort,
             });
@@ -189,6 +242,10 @@ export const ServiceListService = implementService.withConfig()(ServiceListServi
         pagingMetadataSignal,
         isLoadingSignal,
         errorSignal,
+        categoriesSignal,
+        filterSignal,
+        filterOptionsSignal,
+        isFilteredSignal,
         actions: {
             loadMore: async (count) => {
                 await loadMoreCursor(count);
@@ -204,6 +261,26 @@ export const ServiceListService = implementService.withConfig()(ServiceListServi
                 });
                 queryOptionsSignal.set(options);
             },
+            setFilter: (filter) => {
+                // Update filter signal
+                filterSignal.set(filter);
+                // Update query options with new filters (triggers re-fetch)
+                const currentOptions = queryOptionsSignal.get();
+                queryOptionsSignal.set({
+                    ...currentOptions,
+                    filters: filter,
+                });
+            },
+            resetFilter: () => {
+                // Clear filter signal
+                filterSignal.set(null);
+                // Clear filters from query options (triggers re-fetch)
+                const currentOptions = queryOptionsSignal.get();
+                queryOptionsSignal.set({
+                    ...currentOptions,
+                    filters: undefined,
+                });
+            },
         },
         hasMoreServicesSignal: signalsService.computed(() => {
             const paging = pagingMetadataSignal.get();
@@ -247,19 +324,24 @@ export const ServiceListService = implementService.withConfig()(ServiceListServi
  */
 export async function loadServiceListServiceInitialData(options) {
     try {
-        const result = await queryServices({
-            appId: options.appId,
-            filters: options.filters,
-            pagingMetadata: options.pagingMetadata,
-            sort: options.sort,
-        });
+        // Fetch services and categories in parallel
+        const [servicesResult, categoriesResult] = await Promise.all([
+            queryServices({
+                appId: options.appId,
+                filters: options.filters,
+                pagingMetadata: options.pagingMetadata,
+                sort: options.sort,
+            }),
+            queryCategories(),
+        ]);
         return {
             type: 'success',
             config: {
-                services: result.services,
+                services: servicesResult.services,
+                categories: categoriesResult.categories,
                 options: {
                     ...options,
-                    pagingMetadata: result.pagingMetadata,
+                    pagingMetadata: servicesResult.pagingMetadata,
                 },
             },
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-bookings",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -72,5 +72,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "122a9bd0c5095741e936f6e76ab60fa20cb7c69c33763af1a38937c5"
+  "falconPackageHash": "b4efe3be968a8e8d6806b0e818d5e30742584c3d834296262bc1572f"
 }