@wix/headless-bookings 0.0.15 → 0.0.17

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

@@ -6,17 +6,17 @@
  * which provides the TimeSlotProvider context.
  */
 import React from 'react';
-import type { TimeSlot as TimeSlotType } from '../../../services/time-slot-list/time-slot-list.def.js';
+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 */
+    timeSlot: TimeSlotType;
+    /** Whether this time slot is currently selected */
     isSelected: boolean;
-    /** Action to select this slot */
-    selectSlot: () => void;
+    /** Action to select this time slot */
+    selectTimeSlot: () => void;
 }
 /**
  * Hook to access TimeSlot context
@@ -28,7 +28,7 @@ export declare function useTimeSlotContext(): TimeSlotContextValue;
  */
 export interface TimeSlotProviderProps {
     children: React.ReactNode;
-    slot: TimeSlotType;
+    timeSlot: TimeSlotType;
 }
 /**
  * Provider component used by TimeSlotRepeater to provide context.
@@ -88,18 +88,18 @@ export declare function StaffMemberProvider(props: StaffMemberProviderProps): Re
  */
 export interface InfoProps {
     children: (data: {
-        /** Raw localStartDate string from slot */
+        /** Raw localStartDate string from timeSlot */
         startDate: string | undefined;
-        /** Raw localEndDate string from slot */
+        /** Raw localEndDate string from timeSlot */
         endDate: string | undefined;
         /** Calculated duration in minutes (null if dates unavailable) */
         durationInMinutes: number | null;
-        /** Whether the slot is bookable */
+        /** Whether the timeSlot is bookable */
         bookable: boolean;
-        /** Whether this slot is currently selected */
+        /** Whether this timeSlot is currently selected */
         isSelected: boolean;
-        /** The raw slot object for advanced use cases */
-        slot: TimeSlotType;
+        /** The raw timeSlot object for advanced use cases */
+        timeSlot: TimeSlotType;
     }) => React.ReactNode;
 }
 /**
@@ -125,15 +125,15 @@ export declare function Info(props: InfoProps): React.ReactNode;
  */
 export interface ActionsProps {
     children: (data: {
-        /** Action to select this slot */
-        selectSlot: () => void;
+        /** Action to select this timeSlot */
+        selectTimeSlot: () => void;
         /** Action to clear preferences */
         clearPreferences?: () => void;
-        /** The raw slot object */
-        slot: TimeSlotType;
-        /** Whether the slot is bookable */
+        /** The raw timeSlot object */
+        timeSlot: TimeSlotType;
+        /** Whether the timeSlot is bookable */
         bookable: boolean;
-        /** Whether this slot is currently selected */
+        /** Whether this timeSlot is currently selected */
         isSelected: boolean;
     }) => React.ReactNode;
 }
@@ -187,6 +187,8 @@ export interface LocationsProps {
  * Extracts locations from slot.staffByLocation and enriches with name from originalSlots.
  * Each location includes isSelected and isSelectable based on current selection state.
  *
+ * Returns null if there's only 1 location (nothing to choose from).
+ *
  * @component
  * @example
  * ```tsx
@@ -291,6 +293,8 @@ export interface StaffMembersProps {
  * Extracts unique staff members from slot.staffByLocation (names already included).
  * Each staff member includes isSelected and isSelectable based on current selection state.
  *
+ * Returns null if there's only 1 staff member (nothing to choose from).
+ *
  * @component
  * @example
  * ```tsx

package/dist/react/core/time-slot-list/TimeSlot.js

@@ -7,7 +7,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * which provides the TimeSlotProvider context.
  */
 import React from 'react';
-import { useTimeSlotListService } from './TimeSlotList.js';
+import { useService } from '@wix/services-manager-react';
+import { TimeSlotListServiceDefinition, } from '../../../services/time-slot-list/time-slot-list.def.js';
 const TimeSlotContext = React.createContext(null);
 /**
  * Hook to access TimeSlot context
@@ -25,17 +26,17 @@ export function useTimeSlotContext() {
  * Not used directly by consumers - only by TimeSlotList.TimeSlotRepeater.
  */
 export function TimeSlotProvider(props) {
-    const { children, slot } = props;
-    const service = useTimeSlotListService();
+    const { children, timeSlot } = props;
+    const service = useService(TimeSlotListServiceDefinition);
     const selection = service.selection.get();
-    const isSelected = selection?.slot?.id === slot.id;
-    const selectSlot = () => {
-        service.actions.selectSlot(slot);
+    const isSelected = selection?.slot?.id === timeSlot.id;
+    const selectTimeSlot = () => {
+        service.actions.selectSlot(timeSlot);
     };
     const contextValue = {
-        slot,
+        timeSlot,
         isSelected,
-        selectSlot,
+        selectTimeSlot,
     };
     return (_jsx(TimeSlotContext.Provider, { value: contextValue, children: children }));
 }
@@ -57,7 +58,7 @@ export function useLocationContext() {
  */
 export function LocationProvider(props) {
     const { children, location } = props;
-    const service = useTimeSlotListService();
+    const service = useService(TimeSlotListServiceDefinition);
     const selectLocation = () => {
         service.actions.selectLocation(location.id);
     };
@@ -85,7 +86,7 @@ export function useStaffMemberContext() {
  */
 export function StaffMemberProvider(props) {
     const { children, staffMember } = props;
-    const service = useTimeSlotListService();
+    const service = useService(TimeSlotListServiceDefinition);
     const selectStaffMember = () => {
         service.actions.selectStaffMember(staffMember.id);
     };
@@ -113,10 +114,10 @@ export function StaffMemberProvider(props) {
  * ```
  */
 export function Info(props) {
-    const { slot, isSelected } = useTimeSlotContext();
-    const startDate = slot.localStartDate ?? undefined;
-    const endDate = slot.localEndDate ?? undefined;
-    const bookable = slot.bookable ?? false;
+    const { timeSlot, isSelected } = useTimeSlotContext();
+    const startDate = timeSlot.localStartDate ?? undefined;
+    const endDate = timeSlot.localEndDate ?? undefined;
+    const bookable = timeSlot.bookable ?? false;
     // Calculate duration from start and end dates
     let durationInMinutes = null;
     if (startDate && endDate) {
@@ -130,7 +131,7 @@ export function Info(props) {
         durationInMinutes,
         bookable,
         isSelected,
-        slot,
+        timeSlot,
     });
 }
 /**
@@ -154,24 +155,24 @@ export function Info(props) {
  * ```
  */
 export function Actions(props) {
-    const { selectSlot, slot, isSelected } = useTimeSlotContext();
-    const service = useTimeSlotListService();
+    const { selectTimeSlot, timeSlot, isSelected } = useTimeSlotContext();
+    const service = useService(TimeSlotListServiceDefinition);
     const selection = service.selection.get();
-    const bookable = slot.bookable ?? false;
+    const bookable = timeSlot.bookable ?? false;
     // Check if at least one preference is selected
     const hasPreferenceSelected = !!selection?.locationId || !!selection?.staffMemberId;
     // Check if there are multiple options
-    const locationCount = slot.staffByLocation.length;
-    const staffCount = new Set(slot.staffByLocation.flatMap(({ staffMembers }) => staffMembers.map((s) => s.id))).size;
+    const locationCount = timeSlot.staffByLocation.length;
+    const staffCount = new Set(timeSlot.staffByLocation.flatMap(({ staffMembers }) => staffMembers.map((s) => s.id))).size;
     const hasMultipleOptions = locationCount > 1 || staffCount > 1;
     const shouldShowClearPreferences = hasPreferenceSelected && hasMultipleOptions;
     const clearPreferences = shouldShowClearPreferences
         ? service.actions.clearPreferences
         : undefined;
     return props.children({
-        selectSlot,
+        selectTimeSlot,
         clearPreferences,
-        slot,
+        timeSlot,
         bookable,
         isSelected,
     });
@@ -181,6 +182,8 @@ export function Actions(props) {
  * Extracts locations from slot.staffByLocation and enriches with name from originalSlots.
  * Each location includes isSelected and isSelectable based on current selection state.
  *
+ * Returns null if there's only 1 location (nothing to choose from).
+ *
  * @component
  * @example
  * ```tsx
@@ -194,13 +197,13 @@ export function Actions(props) {
  * ```
  */
 export function Locations(props) {
-    const { slot } = useTimeSlotContext();
-    const service = useTimeSlotListService();
+    const { timeSlot } = useTimeSlotContext();
+    const service = useService(TimeSlotListServiceDefinition);
     const selection = service.selection.get();
     const selectedLocationId = selection?.locationId ?? null;
     const selectedStaffMemberId = selection?.staffMemberId ?? null;
     // Build locations array from staffByLocation (names already included)
-    const locations = slot.staffByLocation.map(({ location, staffMembers }) => {
+    const locations = timeSlot.staffByLocation.map(({ location, staffMembers }) => {
         // Check if this location is selectable based on selected staff
         // If no staff selected, all locations are selectable
         // If staff selected, only locations where that staff works are selectable
@@ -214,6 +217,10 @@ export function Locations(props) {
             isSelectable,
         };
     });
+    // Return null if only 1 location - nothing to choose from
+    if (locations.length <= 1) {
+        return null;
+    }
     return props.children({
         locations,
         selectLocation: service.actions.selectLocation,
@@ -272,6 +279,8 @@ export function LocationActions(props) {
  * Extracts unique staff members from slot.staffByLocation (names already included).
  * Each staff member includes isSelected and isSelectable based on current selection state.
  *
+ * Returns null if there's only 1 staff member (nothing to choose from).
+ *
  * @component
  * @example
  * ```tsx
@@ -285,14 +294,14 @@ export function LocationActions(props) {
  * ```
  */
 export function StaffMembers(props) {
-    const { slot } = useTimeSlotContext();
-    const service = useTimeSlotListService();
+    const { timeSlot } = useTimeSlotContext();
+    const service = useService(TimeSlotListServiceDefinition);
     const selection = service.selection.get();
     const selectedStaffMemberId = selection?.staffMemberId ?? null;
     const selectedLocationId = selection?.locationId ?? null;
     // Build unique staff members array from staffByLocation
     // Flatten all staff members with their location IDs, then dedupe by ID
-    const allStaff = slot.staffByLocation.flatMap(({ location, staffMembers }) => staffMembers.map((s) => ({ ...s, locationId: location.id })));
+    const allStaff = timeSlot.staffByLocation.flatMap(({ location, staffMembers }) => staffMembers.map((s) => ({ ...s, locationId: location.id })));
     // Group by staff ID to get all locations per staff member
     const grouped = Object.groupBy(allStaff, (s) => s.id);
     const staffMembers = Object.entries(grouped).map(([id, entries]) => ({
@@ -302,6 +311,10 @@ export function StaffMembers(props) {
         isSelectable: !selectedLocationId ||
             entries.some((e) => e.locationId === selectedLocationId),
     }));
+    // Return null if only 1 staff member - nothing to choose from
+    if (staffMembers.length <= 1) {
+        return null;
+    }
     return props.children({
         staffMembers,
         selectStaffMember: service.actions.selectStaffMember,

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

@@ -3,11 +3,7 @@
  * Provides low-level access to TimeSlotListService via render props
  */
 import React from 'react';
-import { type TimeSlotListServiceAPI, type TimeSlotListServiceConfig, type TimeSlot } from '../../../services/time-slot-list/index.js';
-/**
- * Hook to access TimeSlotListService from within TimeSlotList.Root
- */
-export declare const useTimeSlotListService: () => TimeSlotListServiceAPI;
+import { type TimeSlotListServiceConfig, type TimeSlot } from '../../../services/time-slot-list/index.js';
 /**
  * Props for Root component
  */
@@ -32,7 +28,10 @@ export declare function Root(props: RootProps): React.ReactNode;
  */
 export interface TimezoneProps {
     children: (data: {
+        /** Raw IANA timezone string (e.g., "America/New_York") */
         timezone: string | undefined;
+        /** User-friendly display name (e.g., "Eastern Standard Time") */
+        displayName: string;
     }) => React.ReactNode;
 }
 /**
@@ -42,8 +41,8 @@ export interface TimezoneProps {
  * @example
  * ```tsx
  * <Timezone>
- *   {({ timezone }) => (
- *     <span>{timezone}</span>
+ *   {({ timezone, displayName }) => (
+ *     <span>{displayName}</span>  // "Eastern Standard Time"
  *   )}
  * </Timezone>
  * ```
@@ -82,3 +81,36 @@ export interface ListDataProps {
  * ```
  */
 export declare function ListData(props: ListDataProps): React.ReactNode;
+/**
+ * Render props for DateRange component
+ */
+export interface DateRangeRenderProps {
+    startDate: Date;
+    endDate: Date;
+    setDateRange: (start: Date, end: Date) => void;
+}
+/**
+ * Props for DateRange render prop component
+ */
+export interface DateRangeProps {
+    children: (data: DateRangeRenderProps) => React.ReactNode;
+}
+/**
+ * Core component that provides access to date range data and actions via render props.
+ * Use this to build date range inputs for calendar/week view navigation.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <DateRange>
+ *   {({ startDate, endDate, setDateRange }) => (
+ *     <MyDateRangePicker
+ *       start={startDate}
+ *       end={endDate}
+ *       onChange={(start, end) => setDateRange(start, end)}
+ *     />
+ *   )}
+ * </DateRange>
+ * ```
+ */
+export declare function DateRange(props: DateRangeProps): React.ReactNode;

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

@@ -2,12 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useService, WixServices } from '@wix/services-manager-react';
 import { createServicesMap } from '@wix/services-manager';
 import { TimeSlotListServiceDefinition, TimeSlotListService, } from '../../../services/time-slot-list/index.js';
-/**
- * Hook to access TimeSlotListService from within TimeSlotList.Root
- */
-export const useTimeSlotListService = () => {
-    return useService(TimeSlotListServiceDefinition);
-};
 /**
  * Root component that provides TimeSlotListService context to its children.
  *
@@ -22,6 +16,30 @@ export const useTimeSlotListService = () => {
 export function Root(props) {
     return (_jsx(WixServices, { servicesMap: createServicesMap().addService(TimeSlotListServiceDefinition, TimeSlotListService, props.config || {}), children: props.children }));
 }
+// ============================================================================
+// Timezone Component
+// ============================================================================
+/**
+ * Gets the display name for a timezone using Intl.DateTimeFormat
+ * @param timezone - IANA timezone string (e.g., "America/New_York")
+ * @returns User-friendly display name (e.g., "Eastern Standard Time")
+ */
+function getTimezoneDisplayName(timezone) {
+    if (!timezone)
+        return '';
+    try {
+        const formatter = new Intl.DateTimeFormat('en', {
+            timeZone: timezone,
+            timeZoneName: 'long',
+        });
+        const parts = formatter.formatToParts(new Date());
+        const timeZonePart = parts.find((part) => part.type === 'timeZoneName');
+        return timeZonePart?.value || timezone;
+    }
+    catch {
+        return timezone;
+    }
+}
 /**
  * Core component that provides access to the current timezone via render props.
  *
@@ -29,16 +47,17 @@ export function Root(props) {
  * @example
  * ```tsx
  * <Timezone>
- *   {({ timezone }) => (
- *     <span>{timezone}</span>
+ *   {({ timezone, displayName }) => (
+ *     <span>{displayName}</span>  // "Eastern Standard Time"
  *   )}
  * </Timezone>
  * ```
  */
 export function Timezone(props) {
-    const service = useTimeSlotListService();
+    const service = useService(TimeSlotListServiceDefinition);
     const timezone = service.timezone.get();
-    return props.children({ timezone });
+    const displayName = getTimezoneDisplayName(timezone);
+    return props.children({ timezone, displayName });
 }
 /**
  * Core component that provides access to time slots list data via render props.
@@ -57,7 +76,7 @@ export function Timezone(props) {
  * ```
  */
 export function ListData(props) {
-    const service = useTimeSlotListService();
+    const service = useService(TimeSlotListServiceDefinition);
     return props.children({
         timeSlots: service.timeSlots.get(),
         hasMore: service.hasMore.get(),
@@ -66,3 +85,29 @@ export function ListData(props) {
         loadMore: service.actions.loadMore,
     });
 }
+/**
+ * Core component that provides access to date range data and actions via render props.
+ * Use this to build date range inputs for calendar/week view navigation.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <DateRange>
+ *   {({ startDate, endDate, setDateRange }) => (
+ *     <MyDateRangePicker
+ *       start={startDate}
+ *       end={endDate}
+ *       onChange={(start, end) => setDateRange(start, end)}
+ *     />
+ *   )}
+ * </DateRange>
+ * ```
+ */
+export function DateRange(props) {
+    const service = useService(TimeSlotListServiceDefinition);
+    return props.children({
+        startDate: service.startDate.get(),
+        endDate: service.endDate.get(),
+        setDateRange: service.actions.setDateRange,
+    });
+}

package/dist/react/time-slot-list/TimeSlot.js

@@ -128,13 +128,13 @@ Duration.displayName = 'TimeSlot.Duration';
  */
 export const Select = React.forwardRef((props, ref) => {
     const { asChild, children, className, label } = props;
-    return (_jsx(CoreTimeSlot.Actions, { children: ({ selectSlot, isSelected, bookable }) => {
+    return (_jsx(CoreTimeSlot.Actions, { children: ({ selectTimeSlot, isSelected, bookable }) => {
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotActionSelect, "data-selected": isSelected, "data-bookable": bookable, customElement: children, customElementProps: {
-                    onClick: selectSlot,
+                    onClick: selectTimeSlot,
                     disabled: !bookable,
                     isSelected,
                     bookable,
-                }, children: _jsx("button", { onClick: selectSlot, disabled: !bookable, children: label }) }));
+                }, children: _jsx("button", { onClick: selectTimeSlot, disabled: !bookable, children: label }) }));
         } }));
 });
 Select.displayName = 'TimeSlot.Actions.Select';

package/dist/react/time-slot-list/TimeSlotList.d.ts

@@ -7,14 +7,21 @@ import { ListVariant } from '@wix/headless-components/react';
 import { AsChildChildren } from '@wix/headless-utils/react';
 import type { TimeSlotListServiceConfig } from '../../services/time-slot-list/time-slot-list.def.js';
 export type { StartDateProps as TimeSlotStartDateProps, EndDateProps as TimeSlotEndDateProps, DurationProps as TimeSlotDurationProps, SelectProps as TimeSlotSelectProps, LocationsProps as TimeSlotLocationsProps, LocationRepeaterProps as TimeSlotLocationRepeaterProps, LocationNameProps as TimeSlotLocationNameProps, SelectLocationProps as TimeSlotSelectLocationProps, StaffMembersProps as TimeSlotStaffMembersProps, StaffMemberRepeaterProps as TimeSlotStaffMemberRepeaterProps, StaffMemberNameProps as TimeSlotStaffMemberNameProps, SelectStaffMemberProps as TimeSlotSelectStaffMemberProps, } from './TimeSlot.js';
+/**
+ * Render props for TimeSlotList.Timezone component
+ */
+export interface TimezoneRenderProps {
+    /** Raw IANA timezone string (e.g., "America/New_York") */
+    timezone: string | undefined;
+    /** User-friendly display name (e.g., "Eastern Standard Time") */
+    displayName: string;
+}
 /**
  * Props for TimeSlotList.Timezone component
  */
 export interface TimezoneProps {
     asChild?: boolean;
-    children?: AsChildChildren<{
-        timezone: string | undefined;
-    }>;
+    children?: AsChildChildren<TimezoneRenderProps>;
     className?: string;
 }
 /**
@@ -23,19 +30,14 @@ export interface TimezoneProps {
  * @component
  * @example
  * ```tsx
- * // Default usage
+ * // Default usage - shows display name
  * <TimeSlotList.Timezone className="text-sm text-gray-600" />
  *
- * // asChild with primitive
- * <TimeSlotList.Timezone asChild>
- *   <span className="font-medium" />
- * </TimeSlotList.Timezone>
- *
- * // asChild with render function
+ * // asChild with render function for custom formatting
  * <TimeSlotList.Timezone asChild>
- *   {({ timezone }) => (
+ *   {({ timezone, displayName }) => (
  *     <span className="text-sm">
- *       Timezone: {timezone || 'Not set'}
+ *       {displayName}  // "Eastern Standard Time"
  *     </span>
  *   )}
  * </TimeSlotList.Timezone>
@@ -153,6 +155,47 @@ export declare const LoadMore: React.ForwardRefExoticComponent<LoadMoreProps & R
 export declare const Actions: {
     LoadMore: React.ForwardRefExoticComponent<LoadMoreProps & React.RefAttributes<HTMLButtonElement>>;
 };
+/**
+ * Props for DateRange.Input component
+ */
+export interface DateRangeInputProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Children for custom rendering */
+    children?: AsChildChildren<{
+        startDate: Date;
+        endDate: Date;
+        onChange: (start: Date, end: Date) => void;
+    }>;
+    /** CSS classes to apply to the container */
+    className?: string;
+}
+/**
+ * Date range input for setting the start and end date filter.
+ * Uses the core DateRange component to access service data.
+ * Both dates are set together and trigger a single fetch.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlotList.DateRange.Input asChild>
+ *   {({ startDate, endDate, onChange }) => (
+ *     <MyDateRangePicker
+ *       start={startDate}
+ *       end={endDate}
+ *       onRangeChange={(start, end) => onChange(start, end)}
+ *     />
+ *   )}
+ * </TimeSlotList.DateRange.Input>
+ * ```
+ */
+export declare const DateRangeInput: React.ForwardRefExoticComponent<DateRangeInputProps & React.RefAttributes<HTMLElement>>;
+/**
+ * DateRange namespace for TimeSlotList date range filter
+ */
+export declare const DateRange: {
+    Input: React.ForwardRefExoticComponent<DateRangeInputProps & React.RefAttributes<HTMLElement>>;
+};
 /**
  * TimeSlot namespace containing components for displaying individual time slot data.
  * These components must be used within TimeSlotList.TimeSlotRepeater.