@wix/headless-bookings 0.0.52 → 0.0.54

package/cjs/dist/__mocks__/booking.js

@@ -37,6 +37,7 @@ export function createMockBookingService(initialSelections = []) {
             clearItems: vi.fn(),
             setResourceById: vi.fn(),
             getResourceById: vi.fn(),
+            clearResourceById: vi.fn(),
             setLocation: vi.fn(),
             clearLocation: vi.fn(),
             setTimezone: vi.fn(),

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

@@ -1,9 +1,10 @@
 /**
  * Shared mock data for booking service tests
  */
-import type { Service } from '@wix/auto_sdk_bookings_services';
+import type { Service, StaffMember } from '@wix/auto_sdk_bookings_services';
 import type { ServiceServiceConfig } from '../services/service/service.js';
 import type { ServiceListServiceConfig } from '../services/service-list/service-list.js';
+import type { StaffMemberListServiceConfig } from '../services/staff-member-list/staff-member-list.js';
 import type { PagingMetadata } from '../api/query-services/index.js';
 import type { Category } from '../api/query-categories/index.js';
 /**
@@ -94,3 +95,39 @@ export declare const mockServiceListConfigWithCategoriesAndMore: ServiceListServ
  * Empty service list config with categories
  */
 export declare const mockEmptyServiceListConfigWithCategories: ServiceListServiceConfig;
+/**
+ * Base mock staff member with all fields
+ */
+export declare const mockStaffMember: StaffMember;
+/**
+ * Second mock staff member
+ */
+export declare const mockStaffMember2: StaffMember;
+/**
+ * Staff member without optional fields (minimal)
+ */
+export declare const mockStaffMemberMinimal: StaffMember;
+/**
+ * Staff member with no name
+ */
+export declare const mockStaffMemberNoName: StaffMember;
+/**
+ * Array of mock staff members for list tests
+ */
+export declare const mockStaffMembers: StaffMember[];
+/**
+ * Staff member list config with staff members
+ */
+export declare const mockStaffMemberListConfig: StaffMemberListServiceConfig;
+/**
+ * Empty staff member list config
+ */
+export declare const mockEmptyStaffMemberListConfig: StaffMemberListServiceConfig;
+/**
+ * Single staff member list config
+ */
+export declare const mockSingleStaffMemberListConfig: StaffMemberListServiceConfig;
+/**
+ * Helper to create a large list of staff members for tests
+ */
+export declare function createLargeStaffMemberList(count: number): StaffMember[];

package/cjs/dist/__mocks__/services.js

@@ -360,3 +360,85 @@ export const mockEmptyServiceListConfigWithCategories = {
         pagingMetadata: mockPagingMetadataEmpty,
     },
 };
+// ============================================================================
+// Staff Member Mocks
+// ============================================================================
+/**
+ * Base mock staff member with all fields
+ */
+export const mockStaffMember = {
+    staffMemberId: 'staff-member-1',
+    name: 'John Doe',
+    mainMedia: {
+        image: 'wix:image://v1/staff-member-1.jpg',
+    },
+};
+/**
+ * Second mock staff member
+ */
+export const mockStaffMember2 = {
+    staffMemberId: 'staff-member-2',
+    name: 'Jane Smith',
+    mainMedia: {
+        image: 'wix:image://v1/staff-member-2.jpg',
+    },
+};
+/**
+ * Staff member without optional fields (minimal)
+ */
+export const mockStaffMemberMinimal = {
+    staffMemberId: 'staff-member-minimal',
+};
+/**
+ * Staff member with no name
+ */
+export const mockStaffMemberNoName = {
+    staffMemberId: 'staff-member-no-name',
+    mainMedia: {
+        image: 'wix:image://v1/staff-no-name.jpg',
+    },
+};
+/**
+ * Array of mock staff members for list tests
+ */
+export const mockStaffMembers = [
+    mockStaffMember,
+    mockStaffMember2,
+    {
+        staffMemberId: 'staff-member-3',
+        name: 'Bob Johnson',
+        mainMedia: {
+            image: 'wix:image://v1/staff-member-3.jpg',
+        },
+    },
+];
+/**
+ * Staff member list config with staff members
+ */
+export const mockStaffMemberListConfig = {
+    staffMembers: mockStaffMembers,
+};
+/**
+ * Empty staff member list config
+ */
+export const mockEmptyStaffMemberListConfig = {
+    staffMembers: [],
+};
+/**
+ * Single staff member list config
+ */
+export const mockSingleStaffMemberListConfig = {
+    staffMembers: [mockStaffMember],
+};
+/**
+ * Helper to create a large list of staff members for tests
+ */
+export function createLargeStaffMemberList(count) {
+    return Array.from({ length: count }, (_, i) => ({
+        staffMemberId: `staff-member-${i}`,
+        name: `Staff Member ${i}`,
+        mainMedia: {
+            image: `wix:image://v1/staff-member-${i}.jpg`,
+        },
+    }));
+}

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

@@ -122,7 +122,11 @@ export async function queryServices({ appId, filters, pagingMetadata, sort, }) {
             sort,
         });
         // Call queryServices with QueryServicesRequest and execute the query
-        const result = await queryServicesApi(queryRequest).find();
+        // Include conditionalFields to fetch staff member details
+        const result = await queryServicesApi({
+            ...queryRequest,
+            conditionalFields: ['STAFF_MEMBER_DETAILS'],
+        }).find();
         // Construct PagingMetadata from result properties
         // Includes count (number of items returned) and hasNext (whether more items are available)
         const resultPagingMetadata = {

package/cjs/dist/react/core/staff-member/StaffMember.d.ts

@@ -0,0 +1,104 @@
+/**
+ * Core StaffMember Component - Parses staff member data
+ * Handles staff member display with name
+ *
+ * @module Core/StaffMember
+ */
+import React from 'react';
+import type { StaffMember as StaffMemberType } from '@wix/auto_sdk_bookings_services';
+/**
+ * StaffMember type from SDK
+ * Contains staffMemberId (which equals resource id), name, and mainMedia
+ */
+export type StaffMemberData = StaffMemberType;
+/**
+ * Staff member render props passed to children
+ */
+export interface StaffMemberRenderProps {
+    /** Staff member name */
+    name: string | undefined;
+    /** Raw staff member object */
+    rawStaffMember: StaffMemberData | null;
+}
+/**
+ * Props for the Core StaffMember Root component
+ */
+export interface RootProps {
+    /** Raw staff member data */
+    staffMember?: StaffMemberData;
+    /** Children */
+    children: React.ReactNode;
+}
+/**
+ * Props for the Core StaffMember Data component
+ */
+export interface DataProps {
+    /** Children render prop that receives staff member data */
+    children: (props: StaffMemberRenderProps) => React.ReactNode;
+}
+/**
+ * Hook to access staff member context from CoreStaffMember.Root
+ * @throws Error if used outside of CoreStaffMember.Root
+ */
+export declare function useStaffMemberContext(): StaffMemberRenderProps;
+/**
+ * Core StaffMember Root component that provides staff member context.
+ * Parses staff member data and makes it available to all child components via context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreStaffMember.Root staffMember={staffMemberData}>
+ *   <StaffMember.Name />
+ * </CoreStaffMember.Root>
+ * ```
+ */
+export declare function Root(props: RootProps): React.ReactNode;
+/**
+ * Core StaffMember Data component that exposes staff member data via render props.
+ * Must be used within a CoreStaffMember.Root component.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreStaffMember.Root staffMember={staffMemberData}>
+ *   <CoreStaffMember.Data>
+ *     {({ name, rawStaffMember }) => (
+ *       <div>
+ *         <span>{name}</span>
+ *       </div>
+ *     )}
+ *   </CoreStaffMember.Data>
+ * </CoreStaffMember.Root>
+ * ```
+ */
+export declare function Data(props: DataProps): React.ReactNode;
+/**
+ * Props for Actions render prop component
+ */
+export interface ActionsProps {
+    children: (actions: {
+        select: () => void;
+        rawStaffMember: StaffMemberData | null;
+        selected: boolean;
+    }) => React.ReactNode;
+}
+/**
+ * Core component that provides staff member selection actions via render props.
+ * Integrates with BookingService to persist selection state.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreStaffMember.Root staffMember={staffMemberData}>
+ *   <CoreStaffMember.Actions>
+ *     {({ select, selected, rawStaffMember }) => (
+ *       <button onClick={select}>
+ *         {selected ? 'Selected' : 'Select'}
+ *       </button>
+ *     )}
+ *   </CoreStaffMember.Actions>
+ * </CoreStaffMember.Root>
+ * ```
+ */
+export declare function Actions(props: ActionsProps): React.ReactNode;

package/cjs/dist/react/core/staff-member/StaffMember.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Core StaffMember Component - Parses staff member data
+ * Handles staff member display with name
+ *
+ * @module Core/StaffMember
+ */
+import { createContext, useContext } from 'react';
+import { useService } from '@wix/services-manager-react';
+import { BookingServiceDefinition } from '../../../services/booking/booking.js';
+/** Resource type ID for staff members */
+const STAFF_MEMBER_RESOURCE_TYPE_ID = '1cd44cf8-756f-41c3-bd90-3e2ffcaf1155';
+// ==========================================
+// Context
+// ==========================================
+/**
+ * Staff member context value - same as StaffMemberRenderProps
+ */
+const StaffMemberContext = createContext(null);
+/**
+ * Hook to access staff member context from CoreStaffMember.Root
+ * @throws Error if used outside of CoreStaffMember.Root
+ */
+export function useStaffMemberContext() {
+    const context = useContext(StaffMemberContext);
+    if (!context) {
+        throw new Error('useStaffMemberContext must be used within a CoreStaffMember.Root component');
+    }
+    return context;
+}
+// ==========================================
+// Helper function for computing render props
+// ==========================================
+/**
+ * Computes StaffMemberRenderProps from staff member input
+ */
+function computeStaffMemberRenderProps(rawStaffMember) {
+    // Handle no staff member
+    if (!rawStaffMember) {
+        return {
+            name: undefined,
+            rawStaffMember: null,
+        };
+    }
+    return {
+        name: rawStaffMember.name ?? undefined,
+        rawStaffMember,
+    };
+}
+// ==========================================
+// Root Component (Context Provider)
+// ==========================================
+/**
+ * Core StaffMember Root component that provides staff member context.
+ * Parses staff member data and makes it available to all child components via context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreStaffMember.Root staffMember={staffMemberData}>
+ *   <StaffMember.Name />
+ * </CoreStaffMember.Root>
+ * ```
+ */
+export function Root(props) {
+    const { staffMember, children } = props;
+    const renderProps = computeStaffMemberRenderProps(staffMember);
+    return (_jsx(StaffMemberContext.Provider, { value: renderProps, children: children }));
+}
+// ==========================================
+// Data Component (Render Props)
+// ==========================================
+/**
+ * Core StaffMember Data component that exposes staff member data via render props.
+ * Must be used within a CoreStaffMember.Root component.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreStaffMember.Root staffMember={staffMemberData}>
+ *   <CoreStaffMember.Data>
+ *     {({ name, rawStaffMember }) => (
+ *       <div>
+ *         <span>{name}</span>
+ *       </div>
+ *     )}
+ *   </CoreStaffMember.Data>
+ * </CoreStaffMember.Root>
+ * ```
+ */
+export function Data(props) {
+    const context = useStaffMemberContext();
+    return props.children(context);
+}
+/**
+ * Core component that provides staff member selection actions via render props.
+ * Integrates with BookingService to persist selection state.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreStaffMember.Root staffMember={staffMemberData}>
+ *   <CoreStaffMember.Actions>
+ *     {({ select, selected, rawStaffMember }) => (
+ *       <button onClick={select}>
+ *         {selected ? 'Selected' : 'Select'}
+ *       </button>
+ *     )}
+ *   </CoreStaffMember.Actions>
+ * </CoreStaffMember.Root>
+ * ```
+ */
+export function Actions(props) {
+    const { rawStaffMember } = useStaffMemberContext();
+    let bookingService = null;
+    try {
+        bookingService = useService(BookingServiceDefinition);
+    }
+    catch {
+        // BookingService not available - likely no ServiceManagerProvider
+    }
+    const serviceSelections = bookingService?.serviceSelections.get() ?? [];
+    // Derive selected state - check if THIS staff member is currently selected
+    const staffMemberId = rawStaffMember?.staffMemberId;
+    const selected = staffMemberId
+        ? (serviceSelections[0]?.resources?.some((r) => r._id === staffMemberId) ??
+            false)
+        : false;
+    const select = () => {
+        if (!rawStaffMember?.staffMemberId || !bookingService)
+            return;
+        // Use resource type ID as the lookup key, staff member ID as the actual resource ID
+        bookingService.actions.setResourceById(STAFF_MEMBER_RESOURCE_TYPE_ID, {
+            _id: rawStaffMember.staffMemberId,
+            name: rawStaffMember.name,
+        });
+    };
+    return props.children({
+        select,
+        rawStaffMember,
+        selected,
+    });
+}

package/cjs/dist/react/core/staff-member-list/StaffMemberList.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Core StaffMemberList Component
+ * Bridge between StaffMemberListService and headless components using render props
+ *
+ * @module Core/StaffMemberList
+ */
+import React from 'react';
+import { type StaffMemberListServiceConfig } from '../../../services/staff-member-list/staff-member-list.js';
+import type { StaffMemberData } from '../../../services/staff-member-list/staff-member-list.def.js';
+/**
+ * Props for StaffMemberList.Root component
+ */
+export interface RootProps {
+    children: React.ReactNode;
+    staffMemberListServiceConfig: StaffMemberListServiceConfig;
+}
+/**
+ * Root component that provides StaffMemberList service context
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreStaffMemberList.Root staffMemberListServiceConfig={config}>
+ *   <CoreStaffMemberList.StaffMembers>
+ *     {({ staffMembers }) => (
+ *       // render staff members
+ *     )}
+ *   </CoreStaffMemberList.StaffMembers>
+ * </CoreStaffMemberList.Root>
+ * ```
+ */
+export declare function Root(props: RootProps): React.ReactNode;
+/**
+ * Render props for StaffMembers component
+ */
+export interface StaffMembersRenderProps {
+    /** Staff members array from the service */
+    staffMembers: StaffMemberData[];
+    /** Whether there are any staff members */
+    hasStaffMembers: boolean;
+    /** Whether staff members are currently loading */
+    isLoading: boolean;
+    /** Error message if any */
+    error: string | null;
+}
+/**
+ * Props for StaffMembers render prop component
+ */
+export interface StaffMembersProps {
+    children: (data: StaffMembersRenderProps) => React.ReactNode;
+}
+/**
+ * Core component that provides access to staff members list via render props
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreStaffMemberList.StaffMembers>
+ *   {({ staffMembers, hasStaffMembers, isLoading }) => (
+ *     isLoading ? <Spinner /> : staffMembers.map(...)
+ *   )}
+ * </CoreStaffMemberList.StaffMembers>
+ * ```
+ */
+export declare function StaffMembers(props: StaffMembersProps): React.ReactNode;
+/**
+ * Render props for Actions component
+ */
+export interface ActionsRenderProps {
+    /** Select a staff member */
+    select: (staffMember: StaffMemberData) => void;
+    /** Currently selected staff member */
+    selectedStaffMember: StaffMemberData | null;
+}
+/**
+ * Props for Actions render prop component
+ */
+export interface ActionsProps {
+    children: (actions: ActionsRenderProps) => React.ReactNode;
+}
+/**
+ * Core component that provides staff member actions via render props
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreStaffMemberList.Actions>
+ *   {({ select, selectedStaffMember }) => (
+ *     <button onClick={() => select(staffMember)}>
+ *       {selectedStaffMember?.name || 'Select'}
+ *     </button>
+ *   )}
+ * </CoreStaffMemberList.Actions>
+ * ```
+ */
+export declare function Actions(props: ActionsProps): React.ReactNode;

package/cjs/dist/react/core/staff-member-list/StaffMemberList.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WixServices, useService } from '@wix/services-manager-react';
+import { createServicesMap } from '@wix/services-manager';
+import { StaffMemberListServiceDefinition, StaffMemberListService, } from '../../../services/staff-member-list/staff-member-list.js';
+/**
+ * Root component that provides StaffMemberList service context
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreStaffMemberList.Root staffMemberListServiceConfig={config}>
+ *   <CoreStaffMemberList.StaffMembers>
+ *     {({ staffMembers }) => (
+ *       // render staff members
+ *     )}
+ *   </CoreStaffMemberList.StaffMembers>
+ * </CoreStaffMemberList.Root>
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(StaffMemberListServiceDefinition, StaffMemberListService, props.staffMemberListServiceConfig), children: props.children }));
+}
+/**
+ * Core component that provides access to staff members list via render props
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreStaffMemberList.StaffMembers>
+ *   {({ staffMembers, hasStaffMembers, isLoading }) => (
+ *     isLoading ? <Spinner /> : staffMembers.map(...)
+ *   )}
+ * </CoreStaffMemberList.StaffMembers>
+ * ```
+ */
+export function StaffMembers(props) {
+    const service = useService(StaffMemberListServiceDefinition);
+    return props.children({
+        staffMembers: service.staffMembers.get(),
+        hasStaffMembers: service.hasStaffMembers.get(),
+        isLoading: service.isLoading.get(),
+        error: service.error.get(),
+    });
+}
+/**
+ * Core component that provides staff member actions via render props
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreStaffMemberList.Actions>
+ *   {({ select, selectedStaffMember }) => (
+ *     <button onClick={() => select(staffMember)}>
+ *       {selectedStaffMember?.name || 'Select'}
+ *     </button>
+ *   )}
+ * </CoreStaffMemberList.Actions>
+ * ```
+ */
+export function Actions(props) {
+    const service = useService(StaffMemberListServiceDefinition);
+    return props.children({
+        select: service.actions.select,
+        selectedStaffMember: service.selectedStaffMember.get(),
+    });
+}

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

@@ -7,4 +7,6 @@ export * as TimeSlot from './time-slot-list/TimeSlot.js';
 export * as ServiceList from './service-list/ServiceList.js';
 export * as Location from './location/Location.js';
 export * as LocationList from './location/LocationList.js';
+export * as StaffMember from './staff-member/StaffMember.js';
+export * as StaffMemberList from './staff-member/StaffMemberList.js';
 export * as Payment from './payment/Payment.js';

package/cjs/dist/react/index.js

@@ -7,4 +7,6 @@ export * as TimeSlot from './time-slot-list/TimeSlot.js';
 export * as ServiceList from './service-list/ServiceList.js';
 export * as Location from './location/Location.js';
 export * as LocationList from './location/LocationList.js';
+export * as StaffMember from './staff-member/StaffMember.js';
+export * as StaffMemberList from './staff-member/StaffMemberList.js';
 export * as Payment from './payment/Payment.js';

package/cjs/dist/react/location/LocationList.d.ts

@@ -96,3 +96,22 @@ export interface TotalsProps {
  * ```
  */
 export declare const Totals: React.ForwardRefExoticComponent<TotalsProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for LocationList.Actions.Clear component
+ */
+export interface ClearProps {
+    asChild?: boolean;
+    children?: React.ReactNode | ((props: {
+        onClick: () => void;
+    }) => React.ReactNode);
+    className?: string;
+    label?: string;
+    /** Callback fired when the clear button is clicked */
+    onClicked?: () => void;
+}
+/**
+ * Actions namespace for location list-level actions
+ */
+export declare const Actions: {
+    Clear: React.ForwardRefExoticComponent<ClearProps & React.RefAttributes<HTMLButtonElement>>;
+};

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

@@ -8,6 +8,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { GenericList, } from '@wix/headless-components/react';
 import { AsChildSlot } from '@wix/headless-utils/react';
+import { useService } from '@wix/services-manager-react';
+import { BookingServiceDefinition } from '../../services/booking/booking.js';
 import * as CoreLocationList from '../core/location-list/LocationList.js';
 import * as Location from './Location.js';
 // ============================================================================
@@ -18,6 +20,7 @@ var TestIds;
     TestIds["locationListRoot"] = "location-list-root";
     TestIds["locationListLocations"] = "location-list-locations";
     TestIds["locationListLocation"] = "location-list-location";
+    TestIds["locationListActionClear"] = "location-list-action-clear";
 })(TestIds || (TestIds = {}));
 /**
  * Root component that provides the LocationList service context for rendering locations lists.
@@ -118,3 +121,51 @@ export const Totals = React.forwardRef((props, ref) => {
         } }));
 });
 Totals.displayName = 'LocationList.Totals';
+/**
+ * Button to clear the location selection.
+ * Clears the location from the BookingService.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default button with "Clear" label
+ * <LocationList.Actions.Clear />
+ *
+ * // With custom label
+ * <LocationList.Actions.Clear label="Clear selection" />
+ *
+ * // With asChild
+ * <LocationList.Actions.Clear asChild>
+ *   <button className="btn-secondary">Clear location</button>
+ * </LocationList.Actions.Clear>
+ *
+ * // Using render prop pattern
+ * <LocationList.Actions.Clear>
+ *   {({ onClick }) => <button onClick={onClick}>Clear selection</button>}
+ * </LocationList.Actions.Clear>
+ * ```
+ */
+const Clear = React.forwardRef((props, ref) => {
+    const { asChild, children, className, label = 'Clear', onClicked } = props;
+    let bookingService = null;
+    try {
+        bookingService = useService(BookingServiceDefinition);
+    }
+    catch {
+        // BookingService not available - likely no ServiceManagerProvider
+    }
+    const handleClick = () => {
+        bookingService?.actions.clearLocation();
+        onClicked?.();
+    };
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationListActionClear, customElement: children, customElementProps: {
+            onClick: handleClick,
+        }, children: _jsx("button", { type: "button", onClick: handleClick, children: label }) }));
+});
+Clear.displayName = 'LocationList.Actions.Clear';
+/**
+ * Actions namespace for location list-level actions
+ */
+export const Actions = {
+    Clear,
+};