@wix/headless-bookings 0.0.44 → 0.0.46

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,
                 },
             },
         };

package/dist/__mocks__/booking.d.ts

@@ -1,9 +1,14 @@
-/**
- * Shared mock data for booking service tests
- */
 import type { Resource } from '@wix/auto_sdk_bookings_availability-time-slots';
 import type { FormValues } from '@wix/form-public';
-import type { ServiceSelection, ServiceSelectionTimeSlot, BookingServiceConfig } from '../services/booking/booking.js';
+import type { ServiceSelection, ServiceSelectionTimeSlot, BookingServiceConfig, BookingService } from '../services/booking/booking.js';
+import type { Signal } from '@wix/services-definitions/core-services/signals';
+export declare function mockSignal<T>(initialValue: T): Signal<T>;
+export declare function createMockSignalsService(): {
+    signal: typeof mockSignal;
+    computed: <T>(fn: () => T) => Signal<T>;
+    effect: (fn: () => void) => void;
+};
+export declare function createMockBookingService(initialSelections?: ServiceSelection[]): BookingService;
 /**
  * Mock resource (staff member)
  */

package/dist/__mocks__/booking.js

@@ -1,7 +1,52 @@
-/**
- * Shared mock data for booking service tests
- */
 import { mockService, mockServiceClass } from './services.js';
+import { vi } from 'vitest';
+export function mockSignal(initialValue) {
+    let value = initialValue;
+    return {
+        get: () => value,
+        peek: () => value,
+        set: (newValue) => {
+            value = newValue;
+        },
+    };
+}
+export function createMockSignalsService() {
+    return {
+        signal: mockSignal,
+        computed: (fn) => mockSignal(fn()),
+        effect: vi.fn((fn) => {
+            fn();
+        }),
+    };
+}
+export function createMockBookingService(initialSelections = []) {
+    const serviceSelectionsSignal = mockSignal(initialSelections);
+    const locationSignal = mockSignal(null);
+    const timezoneSignal = mockSignal('UTC');
+    const formSubmissionSignal = mockSignal(null);
+    return {
+        serviceSelections: serviceSelectionsSignal,
+        location: locationSignal,
+        timezone: timezoneSignal,
+        formSubmission: formSubmissionSignal,
+        actions: {
+            updateItem: vi.fn(),
+            setItem: vi.fn(),
+            addItem: vi.fn(),
+            removeItem: vi.fn(),
+            clearItems: vi.fn(),
+            setResourceById: vi.fn(),
+            getResourceById: vi.fn(),
+            setLocation: vi.fn(),
+            clearLocation: vi.fn(),
+            setTimezone: vi.fn(),
+            setFormSubmission: vi.fn(),
+            clearFormSubmission: vi.fn(),
+            clearAll: vi.fn(),
+            book: vi.fn(),
+        },
+    };
+}
 /**
  * Mock resource (staff member)
  */

package/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/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/dist/__mocks__/time-slots.d.ts

@@ -0,0 +1,28 @@
+import type { TimeSlot } from '@wix/auto_sdk_bookings_availability-time-slots';
+import type { TimeSlotListServiceConfig, TimeSlotListServiceAPI } from '../services/time-slot-list/time-slot-list.def.js';
+import type { BookingService } from '../services/booking/booking.js';
+export declare function createTimeSlotListService(overrides?: Partial<TimeSlotListServiceConfig>): {
+    service: TimeSlotListServiceAPI;
+    bookingService: BookingService;
+};
+export declare function createTimeSlot(overrides?: Partial<TimeSlot>): TimeSlot;
+export declare function createTimeSlots(count: number): TimeSlot[];
+export declare function createTimeSlotListConfig(overrides?: Partial<TimeSlotListServiceConfig>): TimeSlotListServiceConfig;
+export declare const mockTimeSlot: TimeSlot;
+export declare const mockTimeSlotMultipleStaff: TimeSlot;
+export declare const mockTimeSlotNotBookable: TimeSlot;
+export declare const mockTimeSlots: TimeSlot[];
+export declare const mockStartDate: Date;
+export declare const mockEndDate: Date;
+export declare const mockTimezone = "America/New_York";
+export declare const mockTimeSlotListConfig: TimeSlotListServiceConfig;
+export declare const mockEmptyTimeSlotListConfig: TimeSlotListServiceConfig;
+export declare const mockCursorPagingMetadataWithMore: {
+    cursors: {
+        next: string;
+    };
+};
+export declare const mockCursorPagingMetadataNoMore: {
+    cursors: {};
+};
+export declare function createMockTimeSlotListService(config?: Partial<TimeSlotListServiceConfig>): TimeSlotListServiceAPI;

package/dist/__mocks__/time-slots.js

@@ -0,0 +1,116 @@
+import { vi } from 'vitest';
+import { TimeSlotListService } from '../services/time-slot-list/time-slot-list.js';
+import { createMockBookingService, createMockSignalsService, mockSignal, } from './booking.js';
+export function createTimeSlotListService(overrides = {}) {
+    const config = createTimeSlotListConfig(overrides);
+    const mockBookingService = createMockBookingService();
+    const mockSignalsService = createMockSignalsService();
+    const getService = (definition) => {
+        const def = definition;
+        if (def.name === 'signals') {
+            return mockSignalsService;
+        }
+        if (def.name === 'booking') {
+            return mockBookingService;
+        }
+        throw new Error(`Unknown service: ${def.name}`);
+    };
+    const service = TimeSlotListService({
+        getService,
+        config,
+    });
+    return {
+        service,
+        bookingService: mockBookingService,
+    };
+}
+export function createTimeSlot(overrides = {}) {
+    return {
+        localStartDate: '2024-01-15T10:00:00',
+        localEndDate: '2024-01-15T11:00:00',
+        bookable: true,
+        totalCapacity: 10,
+        remainingCapacity: 5,
+        scheduleId: 'schedule-1',
+        location: { _id: 'loc-1', name: 'Main Office' },
+        availableResources: [{ resources: [{ _id: 'staff-1', name: 'John Doe' }] }],
+        ...overrides,
+    };
+}
+export function createTimeSlots(count) {
+    return Array.from({ length: count }, (_, i) => createTimeSlot({
+        localStartDate: `2024-01-15T${String(9 + (i % 8)).padStart(2, '0')}:00:00`,
+        localEndDate: `2024-01-15T${String(10 + (i % 8)).padStart(2, '0')}:00:00`,
+        scheduleId: `schedule-${i}`,
+    }));
+}
+export function createTimeSlotListConfig(overrides = {}) {
+    const { startDate = new Date('2024-01-15T00:00:00'), endDate = new Date('2024-01-22T00:00:00'), timezone = 'America/New_York', timeSlots, ...rest } = overrides;
+    return {
+        startDate,
+        endDate,
+        timezone,
+        ...rest,
+        ...(timeSlots !== undefined ? { timeSlots } : {}),
+    };
+}
+export const mockTimeSlot = createTimeSlot();
+export const mockTimeSlotMultipleStaff = createTimeSlot({
+    availableResources: [
+        {
+            resources: [
+                { _id: 'staff-1', name: 'John Doe' },
+                { _id: 'staff-2', name: 'Jane Smith' },
+            ],
+        },
+    ],
+});
+export const mockTimeSlotNotBookable = createTimeSlot({
+    localStartDate: '2024-01-15T14:00:00',
+    localEndDate: '2024-01-15T15:00:00',
+    bookable: false,
+    remainingCapacity: 0,
+    location: { _id: 'loc-2', name: 'Downtown Branch' },
+});
+export const mockTimeSlots = [
+    mockTimeSlot,
+    mockTimeSlotMultipleStaff,
+    mockTimeSlotNotBookable,
+];
+export const mockStartDate = new Date('2024-01-15T00:00:00');
+export const mockEndDate = new Date('2024-01-22T00:00:00');
+export const mockTimezone = 'America/New_York';
+export const mockTimeSlotListConfig = createTimeSlotListConfig({
+    timeSlots: mockTimeSlots,
+});
+export const mockEmptyTimeSlotListConfig = createTimeSlotListConfig();
+export const mockCursorPagingMetadataWithMore = {
+    cursors: { next: 'next-cursor-token' },
+};
+export const mockCursorPagingMetadataNoMore = { cursors: {} };
+export function createMockTimeSlotListService(config = {}) {
+    const timeSlotsSignal = mockSignal(config.timeSlots || []);
+    const isLoadingSignal = mockSignal(false);
+    const errorSignal = mockSignal(null);
+    const hasMoreSignal = mockSignal(false);
+    const dateRangeSignal = mockSignal({
+        start: config.startDate || mockStartDate,
+        end: config.endDate || mockEndDate,
+    });
+    return {
+        timeSlots: timeSlotsSignal,
+        isLoading: isLoadingSignal,
+        error: errorSignal,
+        hasMore: hasMoreSignal,
+        dateRange: dateRangeSignal,
+        actions: {
+            selectSlot: vi.fn(),
+            selectStaffMember: vi.fn(),
+            clearStaffSelection: vi.fn(),
+            loadMore: vi.fn(),
+            setDateRange: vi.fn((start, end) => {
+                dateRangeSignal.set({ start, end });
+            }),
+        },
+    };
+}

package/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/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/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/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/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 || {