@wix/headless-bookings 0.0.54 → 0.0.56

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

@@ -2,11 +2,16 @@
  * Query Services API
  * Fetches single or multiple services with pagination and sorting
  */
-import { queryServices as queryServicesApi, } from '@wix/auto_sdk_bookings_services';
+import { queryServices as queryServicesApi, LocationType, } from '@wix/auto_sdk_bookings_services';
 /**
  * Booking app ID constant
  */
 const BOOKING_APP_ID = '13d21c63-b5ec-5912-8397-c3a5ddb27a97';
+/**
+ * Synthetic location ID constants for non-business locations
+ */
+const SYNTHETIC_CUSTOM_ID = '__synthetic_custom__';
+const SYNTHETIC_CUSTOMER_ID = '__synthetic_customer__';
 /**
  * Fetches a service by its ID
  * @param id - The service ID
@@ -80,7 +85,28 @@ const buildServicesQueryRequest = ({ appId, filters, paging, sort, }) => {
     }
     // Add locationIds filter if provided
     if (filters?.locationIds && filters.locationIds.length > 0) {
-        filter['locations.business.id'] = { $hasSome: filters.locationIds };
+        // Separate synthetic IDs from business location IDs
+        const syntheticTypes = [];
+        const businessLocationIds = [];
+        for (const id of filters.locationIds) {
+            if (id === SYNTHETIC_CUSTOM_ID) {
+                syntheticTypes.push(LocationType.CUSTOM);
+            }
+            else if (id === SYNTHETIC_CUSTOMER_ID) {
+                syntheticTypes.push(LocationType.CUSTOMER);
+            }
+            else {
+                businessLocationIds.push(id);
+            }
+        }
+        // Filter by location type for synthetic locations
+        if (syntheticTypes.length > 0) {
+            filter['locations.type'] = { $hasSome: syntheticTypes };
+        }
+        // Filter by business ID for business locations
+        if (businessLocationIds.length > 0) {
+            filter['locations.business.id'] = { $hasSome: businessLocationIds };
+        }
     }
     // staffMemberIds to be added later
     const query = {

package/cjs/dist/react/core/location/Location.d.ts

@@ -25,8 +25,8 @@ export interface SyntheticLocation {
     locationType: LocationType.CUSTOMER | LocationType.CUSTOM;
     /** Marker to identify synthetic locations */
     synthetic: true;
-    /** Optional ID for tracking */
-    id?: string;
+    /** Optional ID for tracking (matches ServiceLocation._id) */
+    _id?: string;
 }
 /**
  * Union type - location prop accepts Service or Synthetic location

package/cjs/dist/react/core/location/Location.js

@@ -110,7 +110,7 @@ function computeLocationRenderProps(rawLocation) {
             locationType,
             address: null,
             name: undefined,
-            locationId: syntheticLoc.id,
+            locationId: syntheticLoc._id,
             isCustomerLocation: locationType === LocationType.CUSTOMER,
             isCustomLocation: locationType === LocationType.CUSTOM,
             isSynthetic: true,

package/cjs/dist/react/location/LocationList.js

@@ -92,7 +92,7 @@ export const LocationRepeater = React.forwardRef((props, ref) => {
         const location = displayLocation.location ?? {
             locationType: displayLocation.type,
             synthetic: true,
-            id: displayLocation.id,
+            _id: displayLocation.id,
         };
         return (_jsx(Location.Root, { location: location, "data-testid": TestIds.locationListLocation, "data-location-id": displayLocation.id, "data-location-type": displayLocation.type, "data-item-id": displayLocation.id, children: itemChildren }, displayLocation.id));
     };

package/cjs/dist/react/service/Service.d.ts

@@ -1133,6 +1133,41 @@ export interface DefaultCapacityProps {
  * ```
  */
 export declare const DefaultCapacity: React.ForwardRefExoticComponent<DefaultCapacityProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Service AvailableOnline component
+ */
+export interface AvailableOnlineProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        availableOnline: boolean;
+    }>;
+    className?: string;
+    label?: string;
+}
+/**
+ * Displays whether the service is available online (conferencing enabled).
+ * Headless component - contains zero formatting logic.
+ *
+ * Maps to: service.conferencing.enabled
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage - displays label only when available online
+ * <Service.AvailableOnline label="Available Online" className="text-sm text-secondary-foreground" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with custom component
+ * <Service.AvailableOnline asChild>
+ *   {({ availableOnline }) => availableOnline ? (
+ *     <span className="badge bg-green-500">Online</span>
+ *   ) : null}
+ * </Service.AvailableOnline>
+ * ```
+ */
+export declare const AvailableOnline: React.ForwardRefExoticComponent<AvailableOnlineProps & React.RefAttributes<HTMLElement>>;
 export declare const Locations: typeof LocationsBase & {
     List: typeof LocationsList;
     LocationRepeater: typeof LocationRepeater;

package/cjs/dist/react/service/Service.js

@@ -49,6 +49,8 @@ var TestIds;
     TestIds["serviceScheduleFirstSessionStart"] = "service-schedule-first-session-start";
     TestIds["serviceScheduleLastSessionEnd"] = "service-schedule-last-session-end";
     TestIds["serviceScheduleSessionDuration"] = "service-schedule-session-duration";
+    // Conferencing component TestIds
+    TestIds["serviceAvailableOnline"] = "service-available-online";
 })(TestIds || (TestIds = {}));
 /**
  * Root component that provides service context to the entire app.
@@ -1083,6 +1085,37 @@ export const DefaultCapacity = React.forwardRef((props, ref) => {
         } }));
 });
 DefaultCapacity.displayName = 'Service.DefaultCapacity';
+/**
+ * Displays whether the service is available online (conferencing enabled).
+ * Headless component - contains zero formatting logic.
+ *
+ * Maps to: service.conferencing.enabled
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage - displays label only when available online
+ * <Service.AvailableOnline label="Available Online" className="text-sm text-secondary-foreground" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with custom component
+ * <Service.AvailableOnline asChild>
+ *   {({ availableOnline }) => availableOnline ? (
+ *     <span className="badge bg-green-500">Online</span>
+ *   ) : null}
+ * </Service.AvailableOnline>
+ * ```
+ */
+export const AvailableOnline = React.forwardRef((props, ref) => {
+    const { asChild, children, className, label } = props;
+    return (_jsx(CoreService.Service, { children: ({ service }) => {
+            const availableOnline = service.conferencing?.enabled ?? false;
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceAvailableOnline, customElement: children, customElementProps: { availableOnline }, children: availableOnline && label ? _jsx("span", { children: label }) : null }));
+        } }));
+});
+AvailableOnline.displayName = 'Service.AvailableOnline';
 // Create Locations with nested components
 export const Locations = Object.assign(LocationsBase, {
     List: LocationsList,

package/cjs/dist/react/time-slot-list/TimeSlot.d.ts

@@ -8,6 +8,7 @@
 import React from 'react';
 import { AsChildChildren } from '@wix/headless-utils/react';
 import type { TimeSlot as TimeSlotType } from '@wix/auto_sdk_bookings_availability-time-slots';
+import * as CoreTimeSlot from '../core/time-slot-list/TimeSlot.js';
 export type { StaffMemberData } from '../core/time-slot-list/TimeSlot.js';
 /**
  * Props for TimeSlot.Root component
@@ -131,6 +132,7 @@ export interface SelectProps {
     }) => React.ReactNode);
     className?: string;
     label?: string;
+    onClicked?: (timeSlot: TimeSlotType) => void;
 }
 /**
  * Button to select this time slot.
@@ -150,6 +152,13 @@ export interface SelectProps {
  *   <button className="btn-primary">Book this slot</button>
  * </TimeSlot.Actions.Select>
  *
+ * // With onClicked callback for navigation
+ * <TimeSlot.Actions.Select
+ *   onClicked={(timeSlot) => {
+ *     router.push(`/booking/confirm/${timeSlot.localStartDate}`);
+ *   }}
+ * />
+ *
  * // Using render prop pattern
  * <TimeSlot.Actions.Select>
  *   {({ isSelected, bookable, onClick }) => (
@@ -171,6 +180,7 @@ export interface ClearStaffSelectionProps {
     }) => React.ReactNode);
     className?: string;
     label?: string;
+    onClicked?: (timeSlot: TimeSlotType) => void;
 }
 /**
  * Button to clear staff selection while keeping the slot selected.
@@ -191,6 +201,13 @@ export interface ClearStaffSelectionProps {
  *   <button className="btn-secondary">Clear staff</button>
  * </TimeSlot.Actions.ClearStaffSelection>
  *
+ * // With onClicked callback
+ * <TimeSlot.Actions.ClearStaffSelection
+ *   onClicked={(timeSlot) => {
+ *     console.log('Staff selection cleared for', timeSlot.localStartDate);
+ *   }}
+ * />
+ *
  * // Using render prop pattern
  * <TimeSlot.Actions.ClearStaffSelection>
  *   {({ onClick }) => <button onClick={onClick}>Change selection</button>}
@@ -324,6 +341,7 @@ export interface SelectStaffMemberProps {
     }) => React.ReactNode);
     className?: string;
     label?: string;
+    onClicked?: (staffMember: CoreTimeSlot.StaffMemberData) => void;
 }
 /**
  * Button to select this staff member.
@@ -343,6 +361,13 @@ export interface SelectStaffMemberProps {
  *   <button className="btn-primary">Choose Staff</button>
  * </TimeSlot.StaffMember.Actions.Select>
  *
+ * // With onClicked callback
+ * <TimeSlot.StaffMember.Actions.Select
+ *   onClicked={(staffMember) => {
+ *     console.log('Selected staff:', staffMember.name);
+ *   }}
+ * />
+ *
  * // Using render prop pattern
  * <TimeSlot.StaffMember.Actions.Select>
  *   {({ isSelected, onClick }) => (

package/cjs/dist/react/time-slot-list/TimeSlot.js

@@ -139,6 +139,13 @@ Duration.displayName = 'TimeSlot.Duration';
  *   <button className="btn-primary">Book this slot</button>
  * </TimeSlot.Actions.Select>
  *
+ * // With onClicked callback for navigation
+ * <TimeSlot.Actions.Select
+ *   onClicked={(timeSlot) => {
+ *     router.push(`/booking/confirm/${timeSlot.localStartDate}`);
+ *   }}
+ * />
+ *
  * // Using render prop pattern
  * <TimeSlot.Actions.Select>
  *   {({ isSelected, bookable, onClick }) => (
@@ -150,14 +157,18 @@ Duration.displayName = 'TimeSlot.Duration';
  * ```
  */
 export const Select = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label = 'Select' } = props;
-    return (_jsx(CoreTimeSlot.Actions, { children: ({ selectTimeSlot, isSelected, bookable }) => {
+    const { asChild, children, className, label = 'Select', onClicked } = props;
+    return (_jsx(CoreTimeSlot.Actions, { children: ({ selectTimeSlot, isSelected, bookable, timeSlot }) => {
+            const handleClick = () => {
+                selectTimeSlot();
+                onClicked?.(timeSlot);
+            };
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotActionSelect, "data-selected": isSelected, "data-bookable": bookable, customElement: children, customElementProps: {
-                    onClick: selectTimeSlot,
+                    onClick: handleClick,
                     disabled: !bookable,
                     isSelected,
                     bookable,
-                }, children: _jsx("button", { onClick: selectTimeSlot, disabled: !bookable, children: label }) }));
+                }, children: _jsx("button", { onClick: handleClick, disabled: !bookable, children: label }) }));
         } }));
 });
 Select.displayName = 'TimeSlot.Actions.Select';
@@ -180,6 +191,13 @@ Select.displayName = 'TimeSlot.Actions.Select';
  *   <button className="btn-secondary">Clear staff</button>
  * </TimeSlot.Actions.ClearStaffSelection>
  *
+ * // With onClicked callback
+ * <TimeSlot.Actions.ClearStaffSelection
+ *   onClicked={(timeSlot) => {
+ *     console.log('Staff selection cleared for', timeSlot.localStartDate);
+ *   }}
+ * />
+ *
  * // Using render prop pattern
  * <TimeSlot.Actions.ClearStaffSelection>
  *   {({ onClick }) => <button onClick={onClick}>Change selection</button>}
@@ -187,14 +205,18 @@ Select.displayName = 'TimeSlot.Actions.Select';
  * ```
  */
 export const ClearStaffSelection = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label = 'Change' } = props;
-    return (_jsx(CoreTimeSlot.Actions, { children: ({ clearStaffSelection }) => {
+    const { asChild, children, className, label = 'Change', onClicked } = props;
+    return (_jsx(CoreTimeSlot.Actions, { children: ({ clearStaffSelection, timeSlot }) => {
             if (!clearStaffSelection) {
                 return null;
             }
+            const handleClick = () => {
+                clearStaffSelection();
+                onClicked?.(timeSlot);
+            };
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotActionClearStaffSelection, customElement: children, customElementProps: {
-                    onClick: clearStaffSelection,
-                }, children: _jsx("button", { onClick: clearStaffSelection, children: label }) }));
+                    onClick: handleClick,
+                }, children: _jsx("button", { onClick: handleClick, children: label }) }));
         } }));
 });
 ClearStaffSelection.displayName = 'TimeSlot.Actions.ClearStaffSelection';
@@ -324,6 +346,13 @@ StaffMemberName.displayName = 'TimeSlot.StaffMember.Name';
  *   <button className="btn-primary">Choose Staff</button>
  * </TimeSlot.StaffMember.Actions.Select>
  *
+ * // With onClicked callback
+ * <TimeSlot.StaffMember.Actions.Select
+ *   onClicked={(staffMember) => {
+ *     console.log('Selected staff:', staffMember.name);
+ *   }}
+ * />
+ *
  * // Using render prop pattern
  * <TimeSlot.StaffMember.Actions.Select>
  *   {({ isSelected, onClick }) => (
@@ -335,11 +364,17 @@ StaffMemberName.displayName = 'TimeSlot.StaffMember.Name';
  * ```
  */
 export const SelectStaffMember = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label = 'Select' } = props;
-    return (_jsx(CoreTimeSlot.StaffMemberActions, { children: ({ selectStaffMember, isSelected }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStaffMemberActionSelect, "data-selected": isSelected, customElement: children, customElementProps: {
-                onClick: selectStaffMember,
-                isSelected,
-            }, children: _jsx("button", { onClick: selectStaffMember, children: label }) })) }));
+    const { asChild, children, className, label = 'Select', onClicked } = props;
+    return (_jsx(CoreTimeSlot.StaffMemberActions, { children: ({ selectStaffMember, isSelected, staffMember }) => {
+            const handleClick = () => {
+                selectStaffMember();
+                onClicked?.(staffMember);
+            };
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStaffMemberActionSelect, "data-selected": isSelected, customElement: children, customElementProps: {
+                    onClick: handleClick,
+                    isSelected,
+                }, children: _jsx("button", { onClick: handleClick, children: label }) }));
+        } }));
 });
 SelectStaffMember.displayName = 'TimeSlot.StaffMember.Actions.Select';
 /**

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

@@ -73,13 +73,14 @@ 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)
     const hasInitialServices = config.services && config.services.length > 0;
+    // Check if categories are provided (from SSR prefetch)
+    const hasInitialCategories = config.categories && config.categories.length > 0;
     // Initialize services signal - use empty array if not provided
     const initialServices = config.services || [];
     const servicesSignal = signalsService.signal(initialServices);
@@ -157,9 +158,43 @@ export const ServiceListService = implementService.withConfig()(ServiceListServi
             ...(locationId ? { locationIds: [locationId] } : {}),
         };
     };
-    // Auto-query on queryOptions changes (client-side only)
+    // Initial fetch - runs once on client when no prefetched data
+    // Fetches both services AND categories in parallel
+    if (typeof window !== 'undefined' && !hasInitialServices) {
+        const initialQueryOptions = queryOptionsSignal.peek();
+        const currentPaging = pagingMetadataSignal.peek();
+        const effectiveFilters = getEffectiveFilters(initialQueryOptions.filters);
+        isLoadingSignal.set(true);
+        Promise.all([
+            queryServices({
+                appId: initialQueryOptions.appId,
+                filters: effectiveFilters,
+                pagingMetadata: {
+                    limit: currentPaging.limit,
+                    offset: 0,
+                },
+                sort: initialQueryOptions.sort,
+            }),
+            !hasInitialCategories ? queryCategories() : Promise.resolve(null),
+        ])
+            .then(([servicesResult, categoriesResult]) => {
+            servicesSignal.set(servicesResult.services);
+            pagingMetadataSignal.set(servicesResult.pagingMetadata);
+            if (categoriesResult) {
+                categoriesSignal.set(categoriesResult.categories);
+            }
+        })
+            .catch((error) => {
+            errorSignal.set(error instanceof Error ? error.message : 'Unknown error');
+        })
+            .finally(() => {
+            isLoadingSignal.set(false);
+        });
+    }
+    // Reactive effect - only handles query/filter changes (not initial fetch)
     // IMPORTANT: Only subscribes to queryOptionsSignal and bookingService.location
     if (typeof window !== 'undefined') {
+        let isFirstEffectRun = true;
         signalsService.effect(async () => {
             // CRITICAL: Read queryOptionsSignal to establish dependency
             // Do NOT read pagingMetadataSignal here to avoid infinite loop
@@ -167,12 +202,10 @@ export const ServiceListService = implementService.withConfig()(ServiceListServi
             // 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
-                if (hasInitialServices) {
-                    return;
-                }
+            // Skip first run - initial fetch is handled separately above
+            if (isFirstEffectRun) {
+                isFirstEffectRun = false;
+                return;
             }
             // Read paging metadata outside of dependency tracking for the fetch
             const currentPaging = pagingMetadataSignal.peek();
@@ -202,7 +235,6 @@ export const ServiceListService = implementService.withConfig()(ServiceListServi
             }
         });
     }
-    firstRun = false;
     const loadMoreCursor = async (count) => {
         const currentQueryOptions = queryOptionsSignal.get();
         // Calculate next page offset based on current services count

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

@@ -2,11 +2,16 @@
  * Query Services API
  * Fetches single or multiple services with pagination and sorting
  */
-import { queryServices as queryServicesApi, } from '@wix/auto_sdk_bookings_services';
+import { queryServices as queryServicesApi, LocationType, } from '@wix/auto_sdk_bookings_services';
 /**
  * Booking app ID constant
  */
 const BOOKING_APP_ID = '13d21c63-b5ec-5912-8397-c3a5ddb27a97';
+/**
+ * Synthetic location ID constants for non-business locations
+ */
+const SYNTHETIC_CUSTOM_ID = '__synthetic_custom__';
+const SYNTHETIC_CUSTOMER_ID = '__synthetic_customer__';
 /**
  * Fetches a service by its ID
  * @param id - The service ID
@@ -80,7 +85,28 @@ const buildServicesQueryRequest = ({ appId, filters, paging, sort, }) => {
     }
     // Add locationIds filter if provided
     if (filters?.locationIds && filters.locationIds.length > 0) {
-        filter['locations.business.id'] = { $hasSome: filters.locationIds };
+        // Separate synthetic IDs from business location IDs
+        const syntheticTypes = [];
+        const businessLocationIds = [];
+        for (const id of filters.locationIds) {
+            if (id === SYNTHETIC_CUSTOM_ID) {
+                syntheticTypes.push(LocationType.CUSTOM);
+            }
+            else if (id === SYNTHETIC_CUSTOMER_ID) {
+                syntheticTypes.push(LocationType.CUSTOMER);
+            }
+            else {
+                businessLocationIds.push(id);
+            }
+        }
+        // Filter by location type for synthetic locations
+        if (syntheticTypes.length > 0) {
+            filter['locations.type'] = { $hasSome: syntheticTypes };
+        }
+        // Filter by business ID for business locations
+        if (businessLocationIds.length > 0) {
+            filter['locations.business.id'] = { $hasSome: businessLocationIds };
+        }
     }
     // staffMemberIds to be added later
     const query = {

package/dist/react/core/location/Location.d.ts

@@ -25,8 +25,8 @@ export interface SyntheticLocation {
     locationType: LocationType.CUSTOMER | LocationType.CUSTOM;
     /** Marker to identify synthetic locations */
     synthetic: true;
-    /** Optional ID for tracking */
-    id?: string;
+    /** Optional ID for tracking (matches ServiceLocation._id) */
+    _id?: string;
 }
 /**
  * Union type - location prop accepts Service or Synthetic location

package/dist/react/core/location/Location.js

@@ -110,7 +110,7 @@ function computeLocationRenderProps(rawLocation) {
             locationType,
             address: null,
             name: undefined,
-            locationId: syntheticLoc.id,
+            locationId: syntheticLoc._id,
             isCustomerLocation: locationType === LocationType.CUSTOMER,
             isCustomLocation: locationType === LocationType.CUSTOM,
             isSynthetic: true,

package/dist/react/location/LocationList.js

@@ -92,7 +92,7 @@ export const LocationRepeater = React.forwardRef((props, ref) => {
         const location = displayLocation.location ?? {
             locationType: displayLocation.type,
             synthetic: true,
-            id: displayLocation.id,
+            _id: displayLocation.id,
         };
         return (_jsx(Location.Root, { location: location, "data-testid": TestIds.locationListLocation, "data-location-id": displayLocation.id, "data-location-type": displayLocation.type, "data-item-id": displayLocation.id, children: itemChildren }, displayLocation.id));
     };

package/dist/react/service/Service.d.ts

@@ -1133,6 +1133,41 @@ export interface DefaultCapacityProps {
  * ```
  */
 export declare const DefaultCapacity: React.ForwardRefExoticComponent<DefaultCapacityProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Service AvailableOnline component
+ */
+export interface AvailableOnlineProps {
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        availableOnline: boolean;
+    }>;
+    className?: string;
+    label?: string;
+}
+/**
+ * Displays whether the service is available online (conferencing enabled).
+ * Headless component - contains zero formatting logic.
+ *
+ * Maps to: service.conferencing.enabled
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage - displays label only when available online
+ * <Service.AvailableOnline label="Available Online" className="text-sm text-secondary-foreground" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with custom component
+ * <Service.AvailableOnline asChild>
+ *   {({ availableOnline }) => availableOnline ? (
+ *     <span className="badge bg-green-500">Online</span>
+ *   ) : null}
+ * </Service.AvailableOnline>
+ * ```
+ */
+export declare const AvailableOnline: React.ForwardRefExoticComponent<AvailableOnlineProps & React.RefAttributes<HTMLElement>>;
 export declare const Locations: typeof LocationsBase & {
     List: typeof LocationsList;
     LocationRepeater: typeof LocationRepeater;

package/dist/react/service/Service.js

@@ -49,6 +49,8 @@ var TestIds;
     TestIds["serviceScheduleFirstSessionStart"] = "service-schedule-first-session-start";
     TestIds["serviceScheduleLastSessionEnd"] = "service-schedule-last-session-end";
     TestIds["serviceScheduleSessionDuration"] = "service-schedule-session-duration";
+    // Conferencing component TestIds
+    TestIds["serviceAvailableOnline"] = "service-available-online";
 })(TestIds || (TestIds = {}));
 /**
  * Root component that provides service context to the entire app.
@@ -1083,6 +1085,37 @@ export const DefaultCapacity = React.forwardRef((props, ref) => {
         } }));
 });
 DefaultCapacity.displayName = 'Service.DefaultCapacity';
+/**
+ * Displays whether the service is available online (conferencing enabled).
+ * Headless component - contains zero formatting logic.
+ *
+ * Maps to: service.conferencing.enabled
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage - displays label only when available online
+ * <Service.AvailableOnline label="Available Online" className="text-sm text-secondary-foreground" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with custom component
+ * <Service.AvailableOnline asChild>
+ *   {({ availableOnline }) => availableOnline ? (
+ *     <span className="badge bg-green-500">Online</span>
+ *   ) : null}
+ * </Service.AvailableOnline>
+ * ```
+ */
+export const AvailableOnline = React.forwardRef((props, ref) => {
+    const { asChild, children, className, label } = props;
+    return (_jsx(CoreService.Service, { children: ({ service }) => {
+            const availableOnline = service.conferencing?.enabled ?? false;
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceAvailableOnline, customElement: children, customElementProps: { availableOnline }, children: availableOnline && label ? _jsx("span", { children: label }) : null }));
+        } }));
+});
+AvailableOnline.displayName = 'Service.AvailableOnline';
 // Create Locations with nested components
 export const Locations = Object.assign(LocationsBase, {
     List: LocationsList,

package/dist/react/time-slot-list/TimeSlot.d.ts

@@ -8,6 +8,7 @@
 import React from 'react';
 import { AsChildChildren } from '@wix/headless-utils/react';
 import type { TimeSlot as TimeSlotType } from '@wix/auto_sdk_bookings_availability-time-slots';
+import * as CoreTimeSlot from '../core/time-slot-list/TimeSlot.js';
 export type { StaffMemberData } from '../core/time-slot-list/TimeSlot.js';
 /**
  * Props for TimeSlot.Root component
@@ -131,6 +132,7 @@ export interface SelectProps {
     }) => React.ReactNode);
     className?: string;
     label?: string;
+    onClicked?: (timeSlot: TimeSlotType) => void;
 }
 /**
  * Button to select this time slot.
@@ -150,6 +152,13 @@ export interface SelectProps {
  *   <button className="btn-primary">Book this slot</button>
  * </TimeSlot.Actions.Select>
  *
+ * // With onClicked callback for navigation
+ * <TimeSlot.Actions.Select
+ *   onClicked={(timeSlot) => {
+ *     router.push(`/booking/confirm/${timeSlot.localStartDate}`);
+ *   }}
+ * />
+ *
  * // Using render prop pattern
  * <TimeSlot.Actions.Select>
  *   {({ isSelected, bookable, onClick }) => (
@@ -171,6 +180,7 @@ export interface ClearStaffSelectionProps {
     }) => React.ReactNode);
     className?: string;
     label?: string;
+    onClicked?: (timeSlot: TimeSlotType) => void;
 }
 /**
  * Button to clear staff selection while keeping the slot selected.
@@ -191,6 +201,13 @@ export interface ClearStaffSelectionProps {
  *   <button className="btn-secondary">Clear staff</button>
  * </TimeSlot.Actions.ClearStaffSelection>
  *
+ * // With onClicked callback
+ * <TimeSlot.Actions.ClearStaffSelection
+ *   onClicked={(timeSlot) => {
+ *     console.log('Staff selection cleared for', timeSlot.localStartDate);
+ *   }}
+ * />
+ *
  * // Using render prop pattern
  * <TimeSlot.Actions.ClearStaffSelection>
  *   {({ onClick }) => <button onClick={onClick}>Change selection</button>}
@@ -324,6 +341,7 @@ export interface SelectStaffMemberProps {
     }) => React.ReactNode);
     className?: string;
     label?: string;
+    onClicked?: (staffMember: CoreTimeSlot.StaffMemberData) => void;
 }
 /**
  * Button to select this staff member.
@@ -343,6 +361,13 @@ export interface SelectStaffMemberProps {
  *   <button className="btn-primary">Choose Staff</button>
  * </TimeSlot.StaffMember.Actions.Select>
  *
+ * // With onClicked callback
+ * <TimeSlot.StaffMember.Actions.Select
+ *   onClicked={(staffMember) => {
+ *     console.log('Selected staff:', staffMember.name);
+ *   }}
+ * />
+ *
  * // Using render prop pattern
  * <TimeSlot.StaffMember.Actions.Select>
  *   {({ isSelected, onClick }) => (

package/dist/react/time-slot-list/TimeSlot.js

@@ -139,6 +139,13 @@ Duration.displayName = 'TimeSlot.Duration';
  *   <button className="btn-primary">Book this slot</button>
  * </TimeSlot.Actions.Select>
  *
+ * // With onClicked callback for navigation
+ * <TimeSlot.Actions.Select
+ *   onClicked={(timeSlot) => {
+ *     router.push(`/booking/confirm/${timeSlot.localStartDate}`);
+ *   }}
+ * />
+ *
  * // Using render prop pattern
  * <TimeSlot.Actions.Select>
  *   {({ isSelected, bookable, onClick }) => (
@@ -150,14 +157,18 @@ Duration.displayName = 'TimeSlot.Duration';
  * ```
  */
 export const Select = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label = 'Select' } = props;
-    return (_jsx(CoreTimeSlot.Actions, { children: ({ selectTimeSlot, isSelected, bookable }) => {
+    const { asChild, children, className, label = 'Select', onClicked } = props;
+    return (_jsx(CoreTimeSlot.Actions, { children: ({ selectTimeSlot, isSelected, bookable, timeSlot }) => {
+            const handleClick = () => {
+                selectTimeSlot();
+                onClicked?.(timeSlot);
+            };
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotActionSelect, "data-selected": isSelected, "data-bookable": bookable, customElement: children, customElementProps: {
-                    onClick: selectTimeSlot,
+                    onClick: handleClick,
                     disabled: !bookable,
                     isSelected,
                     bookable,
-                }, children: _jsx("button", { onClick: selectTimeSlot, disabled: !bookable, children: label }) }));
+                }, children: _jsx("button", { onClick: handleClick, disabled: !bookable, children: label }) }));
         } }));
 });
 Select.displayName = 'TimeSlot.Actions.Select';
@@ -180,6 +191,13 @@ Select.displayName = 'TimeSlot.Actions.Select';
  *   <button className="btn-secondary">Clear staff</button>
  * </TimeSlot.Actions.ClearStaffSelection>
  *
+ * // With onClicked callback
+ * <TimeSlot.Actions.ClearStaffSelection
+ *   onClicked={(timeSlot) => {
+ *     console.log('Staff selection cleared for', timeSlot.localStartDate);
+ *   }}
+ * />
+ *
  * // Using render prop pattern
  * <TimeSlot.Actions.ClearStaffSelection>
  *   {({ onClick }) => <button onClick={onClick}>Change selection</button>}
@@ -187,14 +205,18 @@ Select.displayName = 'TimeSlot.Actions.Select';
  * ```
  */
 export const ClearStaffSelection = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label = 'Change' } = props;
-    return (_jsx(CoreTimeSlot.Actions, { children: ({ clearStaffSelection }) => {
+    const { asChild, children, className, label = 'Change', onClicked } = props;
+    return (_jsx(CoreTimeSlot.Actions, { children: ({ clearStaffSelection, timeSlot }) => {
             if (!clearStaffSelection) {
                 return null;
             }
+            const handleClick = () => {
+                clearStaffSelection();
+                onClicked?.(timeSlot);
+            };
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotActionClearStaffSelection, customElement: children, customElementProps: {
-                    onClick: clearStaffSelection,
-                }, children: _jsx("button", { onClick: clearStaffSelection, children: label }) }));
+                    onClick: handleClick,
+                }, children: _jsx("button", { onClick: handleClick, children: label }) }));
         } }));
 });
 ClearStaffSelection.displayName = 'TimeSlot.Actions.ClearStaffSelection';
@@ -324,6 +346,13 @@ StaffMemberName.displayName = 'TimeSlot.StaffMember.Name';
  *   <button className="btn-primary">Choose Staff</button>
  * </TimeSlot.StaffMember.Actions.Select>
  *
+ * // With onClicked callback
+ * <TimeSlot.StaffMember.Actions.Select
+ *   onClicked={(staffMember) => {
+ *     console.log('Selected staff:', staffMember.name);
+ *   }}
+ * />
+ *
  * // Using render prop pattern
  * <TimeSlot.StaffMember.Actions.Select>
  *   {({ isSelected, onClick }) => (
@@ -335,11 +364,17 @@ StaffMemberName.displayName = 'TimeSlot.StaffMember.Name';
  * ```
  */
 export const SelectStaffMember = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label = 'Select' } = props;
-    return (_jsx(CoreTimeSlot.StaffMemberActions, { children: ({ selectStaffMember, isSelected }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStaffMemberActionSelect, "data-selected": isSelected, customElement: children, customElementProps: {
-                onClick: selectStaffMember,
-                isSelected,
-            }, children: _jsx("button", { onClick: selectStaffMember, children: label }) })) }));
+    const { asChild, children, className, label = 'Select', onClicked } = props;
+    return (_jsx(CoreTimeSlot.StaffMemberActions, { children: ({ selectStaffMember, isSelected, staffMember }) => {
+            const handleClick = () => {
+                selectStaffMember();
+                onClicked?.(staffMember);
+            };
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStaffMemberActionSelect, "data-selected": isSelected, customElement: children, customElementProps: {
+                    onClick: handleClick,
+                    isSelected,
+                }, children: _jsx("button", { onClick: handleClick, children: label }) }));
+        } }));
 });
 SelectStaffMember.displayName = 'TimeSlot.StaffMember.Actions.Select';
 /**

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

@@ -73,13 +73,14 @@ 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)
     const hasInitialServices = config.services && config.services.length > 0;
+    // Check if categories are provided (from SSR prefetch)
+    const hasInitialCategories = config.categories && config.categories.length > 0;
     // Initialize services signal - use empty array if not provided
     const initialServices = config.services || [];
     const servicesSignal = signalsService.signal(initialServices);
@@ -157,9 +158,43 @@ export const ServiceListService = implementService.withConfig()(ServiceListServi
             ...(locationId ? { locationIds: [locationId] } : {}),
         };
     };
-    // Auto-query on queryOptions changes (client-side only)
+    // Initial fetch - runs once on client when no prefetched data
+    // Fetches both services AND categories in parallel
+    if (typeof window !== 'undefined' && !hasInitialServices) {
+        const initialQueryOptions = queryOptionsSignal.peek();
+        const currentPaging = pagingMetadataSignal.peek();
+        const effectiveFilters = getEffectiveFilters(initialQueryOptions.filters);
+        isLoadingSignal.set(true);
+        Promise.all([
+            queryServices({
+                appId: initialQueryOptions.appId,
+                filters: effectiveFilters,
+                pagingMetadata: {
+                    limit: currentPaging.limit,
+                    offset: 0,
+                },
+                sort: initialQueryOptions.sort,
+            }),
+            !hasInitialCategories ? queryCategories() : Promise.resolve(null),
+        ])
+            .then(([servicesResult, categoriesResult]) => {
+            servicesSignal.set(servicesResult.services);
+            pagingMetadataSignal.set(servicesResult.pagingMetadata);
+            if (categoriesResult) {
+                categoriesSignal.set(categoriesResult.categories);
+            }
+        })
+            .catch((error) => {
+            errorSignal.set(error instanceof Error ? error.message : 'Unknown error');
+        })
+            .finally(() => {
+            isLoadingSignal.set(false);
+        });
+    }
+    // Reactive effect - only handles query/filter changes (not initial fetch)
     // IMPORTANT: Only subscribes to queryOptionsSignal and bookingService.location
     if (typeof window !== 'undefined') {
+        let isFirstEffectRun = true;
         signalsService.effect(async () => {
             // CRITICAL: Read queryOptionsSignal to establish dependency
             // Do NOT read pagingMetadataSignal here to avoid infinite loop
@@ -167,12 +202,10 @@ export const ServiceListService = implementService.withConfig()(ServiceListServi
             // 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
-                if (hasInitialServices) {
-                    return;
-                }
+            // Skip first run - initial fetch is handled separately above
+            if (isFirstEffectRun) {
+                isFirstEffectRun = false;
+                return;
             }
             // Read paging metadata outside of dependency tracking for the fetch
             const currentPaging = pagingMetadataSignal.peek();
@@ -202,7 +235,6 @@ export const ServiceListService = implementService.withConfig()(ServiceListServi
             }
         });
     }
-    firstRun = false;
     const loadMoreCursor = async (count) => {
         const currentQueryOptions = queryOptionsSignal.get();
         // Calculate next page offset based on current services count

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-bookings",
-  "version": "0.0.54",
+  "version": "0.0.56",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -72,5 +72,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "079a06fd7da27790c8fe3e4d05005528c07424a69a125f7f49da76e4"
+  "falconPackageHash": "8792da90af7c78ece12ac4244e507751fbe186381decf6b266bee92a"
 }