@wix/headless-bookings 0.0.52 → 0.0.54

package/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/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/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/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/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/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/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/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,
+};

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

@@ -514,14 +514,6 @@ export interface LocationRepeaterProps {
  * ```
  */
 export declare const LocationRepeater: React.ForwardRefExoticComponent<LocationRepeaterProps & React.RefAttributes<HTMLElement>>;
-/**
- * Type for staff member
- */
-type StaffMemberType = {
-    name?: string;
-    _id?: string;
-    id: string;
-};
 /**
  * Props for Service StaffMembers component (Container Level)
  */
@@ -534,6 +526,7 @@ export interface StaffMembersProps {
  * Container for service staff members list (Container Level).
  * Follows the 3-level List/Options/Repeater pattern.
  * Provides context and doesn't render when there are no staff members.
+ * Internally uses StaffMemberList.Root for consistent staff member handling.
  *
  * @component
  * @example
@@ -542,12 +535,7 @@ export interface StaffMembersProps {
  * <Service.StaffMembers>
  *   <Service.StaffMembers.List emptyState={<div>No staff assigned</div>}>
  *     <Service.StaffMembers.StaffMemberRepeater>
- *       {({ staffMember }) => (
- *         <div className="staff-card">
- *           <img src={staffMember.mainMedia?.image} alt={staffMember.name} />
- *           <span>{staffMember.name}</span>
- *         </div>
- *       )}
+ *       <StaffMember.Name />
  *     </Service.StaffMembers.StaffMemberRepeater>
  *   </Service.StaffMembers.List>
  * </Service.StaffMembers>
@@ -557,14 +545,14 @@ export interface StaffMembersProps {
  *   <ul className="staff-list">
  *     <Service.StaffMembers.List>
  *       <Service.StaffMembers.StaffMemberRepeater>
- *         {({ staffMember }) => <li>{staffMember.name}</li>}
+ *         <li><StaffMember.Name /></li>
  *       </Service.StaffMembers.StaffMemberRepeater>
  *     </Service.StaffMembers.List>
  *   </ul>
  * </Service.StaffMembers>
  * ```
  */
-export declare const StaffMembersBase: React.ForwardRefExoticComponent<StaffMembersProps & React.RefAttributes<HTMLElement>>;
+declare const StaffMembersBase: React.ForwardRefExoticComponent<StaffMembersProps & React.RefAttributes<HTMLElement>>;
 /**
  * Props for Service StaffMembers.List component (List Container Level)
  */
@@ -576,6 +564,7 @@ export interface StaffMembersListProps {
 /**
  * List container for staff members with empty state support (List Container Level).
  * Renders emptyState when no staff members, otherwise renders children.
+ * Internally delegates to StaffMemberList.StaffMembers.
  *
  * @component
  * @example
@@ -586,47 +575,30 @@ export interface StaffMembersListProps {
  * ```
  */
 export declare const StaffMembersList: React.ForwardRefExoticComponent<StaffMembersListProps & React.RefAttributes<HTMLElement>>;
-/**
- * Render props for StaffMemberRepeater asChild pattern
- */
-export interface StaffMemberRepeaterRenderProps {
-    items: StaffMemberType[];
-    itemWrapper: (props: {
-        item: StaffMemberType;
-        index: number;
-        children: React.ReactNode;
-    }) => React.ReactNode;
-}
 /**
  * Props for Service StaffMembers.StaffMemberRepeater component
  */
 export interface StaffMemberRepeaterProps {
-    children?: React.ReactNode | ((props: StaffMemberRepeaterRenderProps) => React.ReactNode);
-    asChild?: boolean;
+    children?: React.ReactNode;
 }
 /**
- * Repeater component that renders staff member name for each staff member.
- * Supports asChild pattern for custom rendering.
+ * Repeater component that renders StaffMember.Root for each staff member.
+ * Internally delegates to StaffMemberList.StaffMemberRepeater.
+ * Children are rendered inside each StaffMember.Root context.
  *
  * @component
  * @example
  * ```tsx
- * // Standard usage - renders staff member names
+ * // Standard usage - renders StaffMember.Root for each staff member
  * <Service.StaffMembers.StaffMemberRepeater>
- *   <span className="staff-badge">👤</span>
+ *   <StaffMember.Name />
  * </Service.StaffMembers.StaffMemberRepeater>
  *
- * // AsChild usage with custom numbered list
- * <Service.StaffMembers.StaffMemberRepeater asChild>
- *   {({ items, itemWrapper }) => (
- *     <ol>
- *       {items.map((item, index) => (
- *         <li key={item.id}>
- *           {index + 1}. {itemWrapper({ item, index, children: null })}
- *         </li>
- *       ))}
- *     </ol>
- *   )}
+ * // With custom styling
+ * <Service.StaffMembers.StaffMemberRepeater>
+ *   <div className="staff-card">
+ *     <StaffMember.Name className="font-bold" />
+ *   </div>
  * </Service.StaffMembers.StaffMemberRepeater>
  * ```
  */