@wix/headless-bookings 0.0.45 → 0.0.46

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

@@ -5,6 +5,7 @@ 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';
+import type { Category } from '../api/query-categories/index.js';
 /**
  * Booking app ID constant
  */
@@ -73,3 +74,23 @@ export declare const mockServiceConfig: ServiceServiceConfig;
  * Helper to create a large list of services for pagination tests
  */
 export declare function createLargeServiceList(count: number): Service[];
+/**
+ * Mock categories for filter tests
+ */
+export declare const mockCategories: Category[];
+/**
+ * Empty categories array
+ */
+export declare const mockEmptyCategories: Category[];
+/**
+ * Service list config with categories for filter testing
+ */
+export declare const mockServiceListConfigWithCategories: ServiceListServiceConfig;
+/**
+ * Service list config with categories and hasNext for pagination + filter testing
+ */
+export declare const mockServiceListConfigWithCategoriesAndMore: ServiceListServiceConfig;
+/**
+ * Empty service list config with categories
+ */
+export declare const mockEmptyServiceListConfigWithCategories: ServiceListServiceConfig;

package/cjs/dist/__mocks__/services.js

@@ -306,3 +306,57 @@ export function createLargeServiceList(count) {
         },
     }));
 }
+/**
+ * Mock categories for filter tests
+ */
+export const mockCategories = [
+    {
+        _id: 'category-1',
+        name: 'Wellness',
+    },
+    {
+        _id: 'category-2',
+        name: 'Fitness',
+    },
+    {
+        _id: 'category-3',
+        name: 'Beauty',
+    },
+];
+/**
+ * Empty categories array
+ */
+export const mockEmptyCategories = [];
+/**
+ * Service list config with categories for filter testing
+ */
+export const mockServiceListConfigWithCategories = {
+    services: mockServices,
+    categories: mockCategories,
+    options: {
+        appId: BOOKING_APP_ID,
+        pagingMetadata: mockPagingMetadata,
+    },
+};
+/**
+ * Service list config with categories and hasNext for pagination + filter testing
+ */
+export const mockServiceListConfigWithCategoriesAndMore = {
+    services: mockServices,
+    categories: mockCategories,
+    options: {
+        appId: BOOKING_APP_ID,
+        pagingMetadata: mockPagingMetadataWithMore,
+    },
+};
+/**
+ * Empty service list config with categories
+ */
+export const mockEmptyServiceListConfigWithCategories = {
+    services: [],
+    categories: mockCategories,
+    options: {
+        appId: BOOKING_APP_ID,
+        pagingMetadata: mockPagingMetadataEmpty,
+    },
+};

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

@@ -9,6 +9,7 @@ export { fetchAvailability } from './fetch-availability/index.js';
 export { createBooking, type CreateBookingOptions, type Booking, type CreateBookingRequest, type CreateBookingResponse, type ParticipantNotification, type ContactDetails, } from './create-booking/index.js';
 export { createCheckout, ChannelType, type CreateCheckoutRequest, type CreateCheckoutResponse, } from './create-checkout/index.js';
 export { queryLocations, type QueryLocationsResult, type LocationData, } from './query-locations/index.js';
+export { queryCategories, type QueryCategoriesResult, type Category, } from './query-categories/index.js';
 /**
  * PagingMetadata includes:
  * - limit: Number of items per page

package/cjs/dist/api/index.js

@@ -9,6 +9,7 @@ export { fetchAvailability } from './fetch-availability/index.js';
 export { createBooking, } from './create-booking/index.js';
 export { createCheckout, ChannelType, } from './create-checkout/index.js';
 export { queryLocations, } from './query-locations/index.js';
+export { queryCategories, } from './query-categories/index.js';
 /**
  * PagingMetadata includes:
  * - limit: Number of items per page

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

@@ -0,0 +1,34 @@
+/**
+ * Query Categories API
+ * Fetches booking service categories from Wix Bookings
+ *
+ * @module API/QueryCategories
+ */
+import { categoriesV2 } from '@wix/bookings';
+/**
+ * Category type from the Wix Bookings Categories V2 API
+ */
+export type Category = categoriesV2.Category;
+/**
+ * Result from querying categories
+ */
+export interface QueryCategoriesResult {
+    /** Array of booking service categories */
+    categories: Category[];
+}
+/**
+ * Query all booking service categories.
+ * Returns an array of categories sorted by creation date (ascending).
+ *
+ * @returns Promise resolving to categories array
+ *
+ * @example
+ * ```ts
+ * const { categories } = await queryCategories();
+ *
+ * categories.forEach(category => {
+ *   console.log(category.name, category._id);
+ * });
+ * ```
+ */
+export declare function queryCategories(): Promise<QueryCategoriesResult>;

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

@@ -0,0 +1,28 @@
+/**
+ * Query Categories API
+ * Fetches booking service categories from Wix Bookings
+ *
+ * @module API/QueryCategories
+ */
+import { categoriesV2 } from '@wix/bookings';
+/**
+ * Query all booking service categories.
+ * Returns an array of categories sorted by creation date (ascending).
+ *
+ * @returns Promise resolving to categories array
+ *
+ * @example
+ * ```ts
+ * const { categories } = await queryCategories();
+ *
+ * categories.forEach(category => {
+ *   console.log(category.name, category._id);
+ * });
+ * ```
+ */
+export async function queryCategories() {
+    const result = await categoriesV2.queryCategories().find();
+    return {
+        categories: result.items || [],
+    };
+}

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

@@ -74,8 +74,15 @@ const buildServicesQueryRequest = ({ appId, filters, paging, sort, }) => {
     if (filters?.serviceIds && filters.serviceIds.length > 0) {
         filter['_id'] = { $in: filters.serviceIds };
     }
-    // Add other filters as they are implemented in future phases
-    // categoryIds, locationIds, staffMemberIds to be added later
+    // Add categoryIds filter if provided
+    if (filters?.categoryIds && filters.categoryIds.length > 0) {
+        filter['category.id'] = { $in: filters.categoryIds };
+    }
+    // Add locationIds filter if provided
+    if (filters?.locationIds && filters.locationIds.length > 0) {
+        filter['locations.business.id'] = { $hasSome: filters.locationIds };
+    }
+    // staffMemberIds to be added later
     const query = {
         filter: Object.keys(filter).length > 0 ? filter : undefined,
         paging: paging || {

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

@@ -0,0 +1,55 @@
+/**
+ * Core ServiceListFilter Components
+ * Provides render props for filter data from ServiceListService and BookingService
+ */
+import React from 'react';
+import type { FilterOption } from '@wix/headless-components/react';
+import { type ServiceListFilters } from '../../../services/service-list/service-list.js';
+/**
+ * Render props for the Root component
+ */
+export interface RootRenderProps {
+    /** Filter options configuration derived from categories */
+    filterOptions: FilterOption[];
+    /** Current filter state */
+    currentFilter: ServiceListFilters | null;
+    /** Function to update filter (includes location from BookingService) */
+    updateFilter: (filter: ServiceListFilters) => void;
+    /** Function to clear all filters */
+    clearFilters: () => void;
+    /** Whether any filters are active */
+    isFiltered: boolean;
+}
+/**
+ * Props for the Root component
+ */
+export interface RootProps {
+    /** Render function that receives filter data */
+    children: (props: RootRenderProps) => React.ReactNode;
+}
+/**
+ * Core render props component that provides filter data from services.
+ * Reads categories from ServiceListService and location from BookingService.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceListFilter.Root>
+ *   {({ filterOptions, currentFilter, updateFilter, clearFilters, isFiltered }) => (
+ *     <Filter.Root
+ *       value={currentFilter}
+ *       onChange={updateFilter}
+ *       filterOptions={filterOptions}
+ *     >
+ *       <Filter.FilterOptions>
+ *         <Filter.FilterOptionRepeater>
+ *           <Filter.FilterOption.Label />
+ *           <Filter.FilterOption.SingleFilter />
+ *         </Filter.FilterOptionRepeater>
+ *       </Filter.FilterOptions>
+ *     </Filter.Root>
+ *   )}
+ * </ServiceListFilter.Root>
+ * ```
+ */
+export declare function Root(props: RootProps): React.ReactNode;

package/cjs/dist/react/core/service-list/ServiceListFilter.js

@@ -0,0 +1,59 @@
+/**
+ * Core ServiceListFilter Components
+ * Provides render props for filter data from ServiceListService and BookingService
+ */
+import { useService } from '@wix/services-manager-react';
+import { ServiceListServiceDefinition, } from '../../../services/service-list/service-list.js';
+import { BookingServiceDefinition } from '../../../services/booking/booking.js';
+/**
+ * Core render props component that provides filter data from services.
+ * Reads categories from ServiceListService and location from BookingService.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceListFilter.Root>
+ *   {({ filterOptions, currentFilter, updateFilter, clearFilters, isFiltered }) => (
+ *     <Filter.Root
+ *       value={currentFilter}
+ *       onChange={updateFilter}
+ *       filterOptions={filterOptions}
+ *     >
+ *       <Filter.FilterOptions>
+ *         <Filter.FilterOptionRepeater>
+ *           <Filter.FilterOption.Label />
+ *           <Filter.FilterOption.SingleFilter />
+ *         </Filter.FilterOptionRepeater>
+ *       </Filter.FilterOptions>
+ *     </Filter.Root>
+ *   )}
+ * </ServiceListFilter.Root>
+ * ```
+ */
+export function Root(props) {
+    const serviceListService = useService(ServiceListServiceDefinition);
+    const bookingService = useService(BookingServiceDefinition);
+    // Get reactive data from signals
+    const filterOptions = serviceListService.filterOptionsSignal.get();
+    const currentFilter = serviceListService.filterSignal.get();
+    const isFiltered = serviceListService.isFilteredSignal.get();
+    const selectedLocation = bookingService.location.get();
+    const updateFilter = (newFilter) => {
+        // Include locationId from BookingService in the filter
+        const locationId = selectedLocation?.business?._id;
+        serviceListService.actions.setFilter({
+            ...newFilter,
+            ...(locationId ? { locationIds: [locationId] } : {}),
+        });
+    };
+    const clearFilters = () => {
+        serviceListService.actions.resetFilter();
+    };
+    return props.children({
+        filterOptions,
+        currentFilter,
+        updateFilter,
+        clearFilters,
+        isFiltered,
+    });
+}

package/cjs/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';
@@ -185,3 +185,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/cjs/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.
@@ -170,3 +173,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/cjs/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/cjs/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,
                 },
             },
         };