@wix/headless-bookings 0.0.13 → 0.0.14

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

@@ -0,0 +1,368 @@
+/**
+ * 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 '../../../services/time-slot-list/time-slot-list.def.js';
+/**
+ * Context value for TimeSlot components
+ */
+export interface TimeSlotContextValue {
+    /** The current time slot data */
+    slot: TimeSlotType;
+    /** Whether this slot is currently selected */
+    isSelected: boolean;
+    /** Action to select this slot */
+    selectSlot: () => void;
+}
+/**
+ * Hook to access TimeSlot context
+ * @throws Error if used outside of TimeSlotProvider
+ */
+export declare function useTimeSlotContext(): TimeSlotContextValue;
+/**
+ * Props for TimeSlotProvider
+ */
+export interface TimeSlotProviderProps {
+    children: React.ReactNode;
+    slot: TimeSlotType;
+}
+/**
+ * Provider component used by TimeSlotRepeater to provide context.
+ * Not used directly by consumers - only by TimeSlotList.TimeSlotRepeater.
+ */
+export declare function TimeSlotProvider(props: TimeSlotProviderProps): React.ReactNode;
+/**
+ * Context value for Location components
+ */
+export interface LocationContextValue {
+    location: LocationData;
+    selectLocation: () => void;
+}
+/**
+ * Hook to access Location context
+ * @throws Error if used outside of LocationProvider
+ */
+export declare function useLocationContext(): LocationContextValue;
+/**
+ * Props for LocationProvider
+ */
+export interface LocationProviderProps {
+    children: React.ReactNode;
+    location: LocationData;
+}
+/**
+ * Provider component used by LocationRepeater to provide context.
+ * Not used directly by consumers - only by TimeSlot.LocationRepeater.
+ */
+export declare function LocationProvider(props: LocationProviderProps): 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: {
+        /** Raw localStartDate string from slot */
+        startDate: string | undefined;
+        /** Raw localEndDate string from slot */
+        endDate: string | undefined;
+        /** Calculated duration in minutes (null if dates unavailable) */
+        durationInMinutes: number | null;
+        /** Whether the slot is bookable */
+        bookable: boolean;
+        /** Whether this slot is currently selected */
+        isSelected: boolean;
+        /** The raw slot object for advanced use cases */
+        slot: 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
+ * <TimeSlot.Info>
+ *   {({ startDate, endDate, durationInMinutes, bookable, isSelected }) => (
+ *     <div>
+ *       <span>{startDate}</span>
+ *       <span>{durationInMinutes} min</span>
+ *     </div>
+ *   )}
+ * </TimeSlot.Info>
+ * ```
+ */
+export declare function Info(props: InfoProps): React.ReactNode;
+/**
+ * Props for Actions render prop component
+ */
+export interface ActionsProps {
+    children: (data: {
+        /** Action to select this slot */
+        selectSlot: () => void;
+        /** Action to clear preferences */
+        clearPreferences?: () => void;
+        /** The raw slot object */
+        slot: TimeSlotType;
+        /** Whether the slot is bookable */
+        bookable: boolean;
+        /** Whether this slot is currently selected */
+        isSelected: boolean;
+    }) => React.ReactNode;
+}
+/**
+ * Core component that provides slot actions via render props.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlot.Actions>
+ *   {({ selectSlot, isSelected, bookable, clearPreferences, shouldShowClearPreferences }) => (
+ *     <div>
+ *       <button onClick={selectSlot} disabled={!bookable}>
+ *         {isSelected ? 'Selected' : 'Select'}
+ *       </button>
+ *       {shouldShowClearPreferences && (
+ *          <button onClick={clearPreferences}>Change</button>
+ *       )}
+ *     </div>
+ *   )}
+ * </TimeSlot.Actions>
+ * ```
+ */
+export declare function Actions(props: ActionsProps): React.ReactNode;
+/**
+ * Location data with selection state
+ */
+export interface LocationData {
+    /** Location ID */
+    id: string;
+    /** Location name */
+    name: string;
+    /** Whether this location is currently selected */
+    isSelected: boolean;
+    /** Whether this location is selectable (compatible with selected staff, or no staff selected) */
+    isSelectable: boolean;
+}
+/**
+ * Props for Locations render prop component
+ */
+export interface LocationsProps {
+    children: (data: {
+        /** Array of locations with selection state */
+        locations: LocationData[];
+        /** Action to select a location */
+        selectLocation: (locationId: string) => void;
+    }) => React.ReactNode;
+}
+/**
+ * Core component that provides access to time slot locations via render props.
+ * Extracts locations from slot.staffByLocation and enriches with name from originalSlots.
+ * Each location includes isSelected and isSelectable based on current selection state.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreTimeSlot.Locations>
+ *   {({ locations, locationsCount, selectLocation }) => (
+ *     <GenericList.Root items={locations}>
+ *       {children}
+ *     </GenericList.Root>
+ *   )}
+ * </CoreTimeSlot.Locations>
+ * ```
+ */
+export declare function Locations(props: LocationsProps): React.ReactNode;
+/**
+ * Props for LocationInfo render prop component
+ */
+export interface LocationInfoProps {
+    children: (data: {
+        /** Location name */
+        name: string;
+        /** Whether this location is currently selected */
+        isSelected: boolean;
+        /** Whether this location is selectable */
+        isSelectable: boolean;
+        /** The raw location object */
+        location: LocationData;
+    }) => React.ReactNode;
+}
+/**
+ * Core component that provides access to location info via render props.
+ * Must be used within LocationProvider.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <LocationInfo>
+ *   {({ name, isSelected, isSelectable }) => (
+ *     <span>{name}</span>
+ *   )}
+ * </LocationInfo>
+ * ```
+ */
+export declare function LocationInfo(props: LocationInfoProps): React.ReactNode;
+/**
+ * Props for LocationActions render prop component
+ */
+export interface LocationActionsProps {
+    children: (data: {
+        /** Action to select this location */
+        selectLocation: () => void;
+        /** Whether this location is currently selected */
+        isSelected: boolean;
+        /** Whether this location is selectable */
+        isSelectable: boolean;
+        /** The raw location object */
+        location: LocationData;
+    }) => React.ReactNode;
+}
+/**
+ * Core component that provides location actions via render props.
+ * Must be used within LocationProvider.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <LocationActions>
+ *   {({ selectLocation, isSelected, isSelectable }) => (
+ *     <button onClick={selectLocation} disabled={!isSelectable}>
+ *       {isSelected ? 'Selected' : 'Select'}
+ *     </button>
+ *   )}
+ * </LocationActions>
+ * ```
+ */
+export declare function LocationActions(props: LocationActionsProps): 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;
+    /** Whether this staff member is selectable (works at selected location, or no location selected) */
+    isSelectable: 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 and isSelectable based on current selection state.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreTimeSlot.StaffMembers>
+ *   {({ staffMembers, selectStaffMember }) => (
+ *     <GenericList.Root items={staffMembers}>
+ *       {children}
+ *     </GenericList.Root>
+ *   )}
+ * </CoreTimeSlot.StaffMembers>
+ * ```
+ */
+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;
+        /** Whether this staff member is selectable */
+        isSelectable: 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
+ * <StaffMemberInfo>
+ *   {({ name, isSelected, isSelectable }) => (
+ *     <span>{name}</span>
+ *   )}
+ * </StaffMemberInfo>
+ * ```
+ */
+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;
+        /** Whether this staff member is selectable */
+        isSelectable: 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
+ * <StaffMemberActions>
+ *   {({ selectStaffMember, isSelected, isSelectable }) => (
+ *     <button onClick={selectStaffMember} disabled={!isSelectable}>
+ *       {isSelected ? 'Selected' : 'Select'}
+ *     </button>
+ *   )}
+ * </StaffMemberActions>
+ * ```
+ */
+export declare function StaffMemberActions(props: StaffMemberActionsProps): React.ReactNode;