@wix/headless-bookings 0.0.13 → 0.0.15

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

@@ -0,0 +1,199 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * TimeSlotList - High-level component for displaying time slot list information
+ * Provides components for displaying timezone and time slot data
+ */
+import React from 'react';
+import { GenericList } from '@wix/headless-components/react';
+import { AsChildSlot } from '@wix/headless-utils/react';
+import * as CoreTimeSlotList from '../core/time-slot-list/TimeSlotList.js';
+import { TimeSlotProvider, Info as CoreTimeSlotInfo, } from '../core/time-slot-list/TimeSlot.js';
+import { StartDate, EndDate, Duration, Actions as TimeSlotActions, Locations, LocationRepeater, Location, StaffMembers, StaffMemberRepeater, StaffMember, } from './TimeSlot.js';
+/**
+ * TimeSlot with required id field for GenericList
+ */
+var TestIds;
+(function (TestIds) {
+    TestIds["timeSlotListRoot"] = "time-slot-list-root";
+    TestIds["timeSlotListTimeSlots"] = "time-slot-list-time-slots";
+    TestIds["timeSlotListTimeSlot"] = "time-slot-list-time-slot";
+    TestIds["timeSlotListTimezone"] = "time-slot-list-timezone";
+    TestIds["timeSlotListLoadMore"] = "time-slot-list-load-more";
+})(TestIds || (TestIds = {}));
+/**
+ * Displays the current timezone with customizable rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <TimeSlotList.Timezone className="text-sm text-gray-600" />
+ *
+ * // asChild with primitive
+ * <TimeSlotList.Timezone asChild>
+ *   <span className="font-medium" />
+ * </TimeSlotList.Timezone>
+ *
+ * // asChild with render function
+ * <TimeSlotList.Timezone asChild>
+ *   {({ timezone }) => (
+ *     <span className="text-sm">
+ *       Timezone: {timezone || 'Not set'}
+ *     </span>
+ *   )}
+ * </TimeSlotList.Timezone>
+ * ```
+ */
+export const Timezone = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreTimeSlotList.Timezone, { children: ({ timezone }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotListTimezone, customElement: children, customElementProps: { timezone }, children: _jsx("span", { children: timezone }) })) }));
+});
+Timezone.displayName = 'TimeSlotList.Timezone';
+/**
+ * Root component that provides the TimeSlotList service context.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { TimeSlotList } from '@wix/bookings/components';
+ *
+ * function TimeSlotsPage({ config }) {
+ *   return (
+ *     <TimeSlotList.Root config={config}>
+ *       <TimeSlotList.TimeSlots>
+ *         <TimeSlotList.TimeSlotRepeater>
+ *           {children}
+ *         </TimeSlotList.TimeSlotRepeater>
+ *       </TimeSlotList.TimeSlots>
+ *     </TimeSlotList.Root>
+ *   );
+ * }
+ * ```
+ */
+export const Root = React.forwardRef((props, ref) => {
+    const { children, config, className, variant } = props;
+    return (_jsx(CoreTimeSlotList.Root, { config: config, children: _jsx(RootContent, { className: className, ref: ref, variant: variant, children: children }) }));
+});
+Root.displayName = 'TimeSlotList.Root';
+/**
+ * Internal component to handle the Root content with core layer access
+ */
+const RootContent = React.forwardRef((props, ref) => {
+    const { children, className, variant } = props;
+    return (_jsx(CoreTimeSlotList.ListData, { children: ({ timeSlots, hasMore, isLoading, loadMore }) => (_jsx(GenericList.Root, { items: timeSlots, loadMore: loadMore, hasMore: hasMore, isLoading: isLoading, className: className, ref: ref, "data-testid": TestIds.timeSlotListRoot, variant: variant, children: children })) }));
+});
+RootContent.displayName = 'TimeSlotList.RootContent';
+/**
+ * Container for the time slots list with empty state support.
+ * Wraps GenericList.Items. Follows List Container Level pattern.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlotList.TimeSlots emptyState={<div>No slots available</div>}>
+ *   <TimeSlotList.TimeSlotRepeater>
+ *     {children}
+ *   </TimeSlotList.TimeSlotRepeater>
+ * </TimeSlotList.TimeSlots>
+ * ```
+ */
+export const TimeSlots = React.forwardRef((props, ref) => {
+    const { children, ...otherProps } = props;
+    return (_jsx(GenericList.Items, { ref: ref, "data-testid": TestIds.timeSlotListTimeSlots, ...otherProps, children: children }));
+});
+TimeSlots.displayName = 'TimeSlotList.TimeSlots';
+/**
+ * Internal component that wraps each time slot item with context provider.
+ * This is separate to allow using the service hook within the repeater.
+ */
+const TimeSlotItemWrapper = ({ slot, children, }) => {
+    return (_jsx(TimeSlotProvider, { slot: slot, children: _jsx(CoreTimeSlotInfo, { children: ({ bookable, isSelected }) => (_jsx("div", { "data-testid": TestIds.timeSlotListTimeSlot, "data-slot-start": slot.localStartDate, "data-slot-id": slot.id, "data-bookable": bookable, "data-selected": isSelected, children: children })) }) }));
+};
+/**
+ * Repeater component that renders each time slot.
+ * Follows Repeater Level pattern and uses GenericList.Repeater for consistency.
+ * Automatically provides TimeSlot context to children.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlotList.TimeSlotRepeater>
+ *   <TimeSlot.StartDate />
+ *   <TimeSlot.Duration />
+ *   <TimeSlot.Actions.Select />
+ * </TimeSlotList.TimeSlotRepeater>
+ * ```
+ */
+export const TimeSlotRepeater = React.forwardRef((props, ref) => {
+    const { children } = props;
+    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item: slot, children: itemChildren }) => (_jsx(TimeSlotItemWrapper, { slot: slot, children: itemChildren }, slot.id)), children: children }));
+});
+TimeSlotRepeater.displayName = 'TimeSlotList.TimeSlotRepeater';
+/**
+ * Displays a button to load more time slots. Not rendered if no more slots are left to load.
+ * Follows the architecture rules - does not support asChild as it's a simple trigger component.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlotList.Actions.LoadMore asChild>
+ *   <button>Load More</button>
+ * </TimeSlotList.Actions.LoadMore>
+ * ```
+ */
+export const LoadMore = React.forwardRef((props, ref) => {
+    const { children = _jsx("button", {}), ...otherProps } = props;
+    return (_jsx(GenericList.Actions.LoadMore, { ref: ref, "data-testid": TestIds.timeSlotListLoadMore, ...otherProps, children: children }));
+});
+LoadMore.displayName = 'TimeSlotList.Actions.LoadMore';
+/**
+ * Actions namespace for TimeSlotList
+ */
+export const Actions = {
+    LoadMore,
+};
+// ============================================================================
+// TimeSlot Entity Components (re-exported)
+// ============================================================================
+/**
+ * TimeSlot namespace containing components for displaying individual time slot data.
+ * These components must be used within TimeSlotList.TimeSlotRepeater.
+ *
+ * @example
+ * ```tsx
+ * <TimeSlotList.TimeSlotRepeater>
+ *   <TimeSlot.StartDate />
+ *   <TimeSlot.Duration />
+ *   <TimeSlot.Actions.Select />
+ *
+ *   // Location selection - visible when slot is selected
+ *   <TimeSlot.Locations>
+ *     <TimeSlot.LocationRepeater>
+ *       <TimeSlot.Location.Name />
+ *       <TimeSlot.Location.Actions.Select />
+ *     </TimeSlot.LocationRepeater>
+ *   </TimeSlot.Locations>
+ *
+ *   // Staff member selection - visible when slot is selected
+ *   <TimeSlot.StaffMembers>
+ *     <TimeSlot.StaffMemberRepeater>
+ *       <TimeSlot.StaffMember.Name />
+ *       <TimeSlot.StaffMember.Actions.Select />
+ *     </TimeSlot.StaffMemberRepeater>
+ *   </TimeSlot.StaffMembers>
+ * </TimeSlotList.TimeSlotRepeater>
+ * ```
+ */
+export const TimeSlot = {
+    StartDate,
+    EndDate,
+    Duration,
+    Actions: TimeSlotActions,
+    Locations,
+    LocationRepeater,
+    Location,
+    StaffMembers,
+    StaffMemberRepeater,
+    StaffMember,
+};

package/cjs/dist/services/time-slot-list/index.d.ts

@@ -2,5 +2,5 @@
  * TimeSlotList Service
  * Main export file for time slot list service
  */
-export { TimeSlotListServiceDefinition, ViewMode, type TimeSlotListServiceAPI, type TimeSlotListServiceActions, type TimeSlotListServiceConfig, type SlotSelection, } from './time-slot-list.def.js';
+export { TimeSlotListServiceDefinition, ViewMode, type TimeSlot, type TimeSlotListServiceAPI, type TimeSlotListServiceActions, type TimeSlotListServiceConfig, type SlotSelection, } from './time-slot-list.def.js';
 export { TimeSlotListService, loadTimeSlotListConfig, type LoadTimeSlotListConfigOptions, type LoadTimeSlotListConfigResult, } from './time-slot-list.js';

package/dist/react/core/service-list/ServiceList.d.ts

@@ -46,6 +46,10 @@ export interface ServicesRenderProps {
     queryOptions: QueryOptions;
     /** Pagination metadata (limit, offset, count, hasNext) */
     pagingMetadata: PagingMetadata;
+    /** Whether more services can be loaded */
+    hasMore: boolean;
+    /** Function to load more services */
+    loadMore: (count: number) => Promise<void>;
 }
 /**
  * Component that provides services list data through render props.

package/dist/react/core/service-list/ServiceList.js

@@ -48,11 +48,15 @@ export function Services(props) {
     const error = serviceListService.errorSignal.get();
     const queryOptions = serviceListService.queryOptionsSignal.get();
     const pagingMetadata = serviceListService.pagingMetadataSignal.get();
+    const hasMore = serviceListService.hasMoreServicesSignal.get();
+    const loadMore = serviceListService.actions.loadMore;
     return props.children({
         services,
         isLoading,
         error,
         queryOptions,
         pagingMetadata,
+        hasMore,
+        loadMore,
     });
 }

package/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;