/** * Core TimeSlot Components * Provides low-level access to TimeSlot data via render props * * Note: These components must be used within TimeSlotList.TimeSlotRepeater * which provides the TimeSlotProvider context. */ import React from 'react'; import type { TimeSlot as TimeSlotType } from '@wix/auto_sdk_bookings_availability-time-slots'; import { type TimeSlotServiceConfig } from '../../../services/time-slot-list/time-slot.js'; /** * Props for TimeSlot.Root component */ export interface RootProps { children: React.ReactNode; config: TimeSlotServiceConfig; } /** * Root component that provides TimeSlot context. * * @component * @example * ```tsx * * {children} * * ``` */ export declare function Root(props: RootProps): React.ReactNode; /** * Context value for StaffMember components */ export interface StaffMemberContextValue { staffMember: StaffMemberData; selectStaffMember: () => void; } /** * Hook to access StaffMember context * @throws Error if used outside of StaffMemberProvider */ export declare function useStaffMemberContext(): StaffMemberContextValue; /** * Props for StaffMemberProvider */ export interface StaffMemberProviderProps { children: React.ReactNode; staffMember: StaffMemberData; } /** * Provider component used by StaffMemberRepeater to provide context. * Not used directly by consumers - only by TimeSlot.StaffMemberRepeater. */ export declare function StaffMemberProvider(props: StaffMemberProviderProps): React.ReactNode; /** * Props for Info render prop component */ export interface InfoProps { children: (data: { /** Parsed localStartDate as Date (constructed from the raw localStartDate string) */ startDate: Date; /** Parsed localEndDate as Date (constructed from the raw localEndDate string) */ endDate: Date; /** Calculated duration in minutes */ durationInMinutes: number; /** Location name */ locationName: string; /** Whether the timeSlot is bookable */ bookable: boolean; /** Whether this timeSlot is currently selected */ isSelected: boolean; /** The raw timeSlot object for advanced use cases */ timeSlot: TimeSlotType; }) => React.ReactNode; } /** * Core component that provides access to time slot info via render props. * Includes start/end dates, duration, bookable status, and selection state. * * @component * @example * ```tsx * * {({ startDate, endDate, durationInMinutes, bookable, isSelected }) => ( *
* {startDate} * {durationInMinutes} min *
* )} *
* ``` */ export declare function Info(props: InfoProps): React.ReactNode; /** * Props for Actions render prop component */ export interface ActionsProps { children: (data: { /** Action to select this timeSlot */ selectTimeSlot: () => void; /** Action to clear staff selection */ clearStaffSelection?: () => void; /** The raw timeSlot object */ timeSlot: TimeSlotType; /** Whether the timeSlot is bookable */ bookable: boolean; /** Whether this timeSlot is currently selected */ isSelected: boolean; }) => React.ReactNode; } /** * Core component that provides slot actions via render props. * * @component * @example * ```tsx * * {({ selectSlot, isSelected, bookable, clearPreferences, shouldShowClearPreferences }) => ( *
* * {shouldShowClearPreferences && ( * * )} *
* )} *
* ``` */ export declare function Actions(props: ActionsProps): React.ReactNode; /** * Staff member data with selection state */ export interface StaffMemberData { /** Staff member ID */ id: string; /** Staff member name */ name: string; /** Whether this staff member is currently selected */ isSelected: boolean; } /** * Props for StaffMembers render prop component */ export interface StaffMembersProps { children: (data: { /** Array of staff members with selection state */ staffMembers: StaffMemberData[]; /** Action to select a staff member */ selectStaffMember: (staffMemberId: string) => void; }) => React.ReactNode; } /** * Core component that provides access to time slot staff members via render props. * Extracts unique staff members from slot.staffByLocation (names already included). * Each staff member includes isSelected based on current selection state. * * Returns null if there's only 1 staff member (nothing to choose from). * * @component * @example * ```tsx * * {({ staffMembers, selectStaffMember }) => ( * * {children} * * )} * * ``` */ export declare function StaffMembers(props: StaffMembersProps): React.ReactNode; /** * Props for StaffMemberInfo render prop component */ export interface StaffMemberInfoProps { children: (data: { /** Staff member name */ name: string; /** Whether this staff member is currently selected */ isSelected: boolean; /** The raw staff member object */ staffMember: StaffMemberData; }) => React.ReactNode; } /** * Core component that provides access to staff member info via render props. * Must be used within StaffMemberProvider. * * @component * @example * ```tsx * * {({ name, isSelected }) => ( * {name} * )} * * ``` */ export declare function StaffMemberInfo(props: StaffMemberInfoProps): React.ReactNode; /** * Props for StaffMemberActions render prop component */ export interface StaffMemberActionsProps { children: (data: { /** Action to select this staff member */ selectStaffMember: () => void; /** Whether this staff member is currently selected */ isSelected: boolean; /** The raw staff member object */ staffMember: StaffMemberData; }) => React.ReactNode; } /** * Core component that provides staff member actions via render props. * Must be used within StaffMemberProvider. * * @component * @example * ```tsx * * {({ selectStaffMember, isSelected }) => ( * * )} * * ``` */ export declare function StaffMemberActions(props: StaffMemberActionsProps): React.ReactNode;