@wix/headless-bookings 0.0.13 → 0.0.14

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

@@ -0,0 +1,357 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 { useTimeSlotListService } from './TimeSlotList.js';
+const TimeSlotContext = React.createContext(null);
+/**
+ * Hook to access TimeSlot context
+ * @throws Error if used outside of TimeSlotProvider
+ */
+export function useTimeSlotContext() {
+    const context = React.useContext(TimeSlotContext);
+    if (!context) {
+        throw new Error('TimeSlot components must be used within TimeSlotList.TimeSlotRepeater');
+    }
+    return context;
+}
+/**
+ * Provider component used by TimeSlotRepeater to provide context.
+ * Not used directly by consumers - only by TimeSlotList.TimeSlotRepeater.
+ */
+export function TimeSlotProvider(props) {
+    const { children, slot } = props;
+    const service = useTimeSlotListService();
+    const selection = service.selection.get();
+    const isSelected = selection?.slot?.id === slot.id;
+    const selectSlot = () => {
+        service.actions.selectSlot(slot);
+    };
+    const contextValue = {
+        slot,
+        isSelected,
+        selectSlot,
+    };
+    return (_jsx(TimeSlotContext.Provider, { value: contextValue, children: children }));
+}
+const LocationContext = React.createContext(null);
+/**
+ * Hook to access Location context
+ * @throws Error if used outside of LocationProvider
+ */
+export function useLocationContext() {
+    const context = React.useContext(LocationContext);
+    if (!context) {
+        throw new Error('Location components must be used within LocationProvider');
+    }
+    return context;
+}
+/**
+ * Provider component used by LocationRepeater to provide context.
+ * Not used directly by consumers - only by TimeSlot.LocationRepeater.
+ */
+export function LocationProvider(props) {
+    const { children, location } = props;
+    const service = useTimeSlotListService();
+    const selectLocation = () => {
+        service.actions.selectLocation(location.id);
+    };
+    const contextValue = {
+        location,
+        selectLocation,
+    };
+    return (_jsx(LocationContext.Provider, { value: contextValue, children: children }));
+}
+const StaffMemberContext = React.createContext(null);
+/**
+ * Hook to access StaffMember context
+ * @throws Error if used outside of StaffMemberProvider
+ */
+export function useStaffMemberContext() {
+    const context = React.useContext(StaffMemberContext);
+    if (!context) {
+        throw new Error('StaffMember components must be used within StaffMemberProvider');
+    }
+    return context;
+}
+/**
+ * Provider component used by StaffMemberRepeater to provide context.
+ * Not used directly by consumers - only by TimeSlot.StaffMemberRepeater.
+ */
+export function StaffMemberProvider(props) {
+    const { children, staffMember } = props;
+    const service = useTimeSlotListService();
+    const selectStaffMember = () => {
+        service.actions.selectStaffMember(staffMember.id);
+    };
+    const contextValue = {
+        staffMember,
+        selectStaffMember,
+    };
+    return (_jsx(StaffMemberContext.Provider, { value: contextValue, children: children }));
+}
+/**
+ * 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 function Info(props) {
+    const { slot, isSelected } = useTimeSlotContext();
+    const startDate = slot.localStartDate ?? undefined;
+    const endDate = slot.localEndDate ?? undefined;
+    const bookable = slot.bookable ?? false;
+    // Calculate duration from start and end dates
+    let durationInMinutes = null;
+    if (startDate && endDate) {
+        const startTime = new Date(startDate).getTime();
+        const endTime = new Date(endDate).getTime();
+        durationInMinutes = Math.round((endTime - startTime) / (1000 * 60));
+    }
+    return props.children({
+        startDate,
+        endDate,
+        durationInMinutes,
+        bookable,
+        isSelected,
+        slot,
+    });
+}
+/**
+ * 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 function Actions(props) {
+    const { selectSlot, slot, isSelected } = useTimeSlotContext();
+    const service = useTimeSlotListService();
+    const selection = service.selection.get();
+    const bookable = slot.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 hasMultipleOptions = locationCount > 1 || staffCount > 1;
+    const shouldShowClearPreferences = hasPreferenceSelected && hasMultipleOptions;
+    const clearPreferences = shouldShowClearPreferences
+        ? service.actions.clearPreferences
+        : undefined;
+    return props.children({
+        selectSlot,
+        clearPreferences,
+        slot,
+        bookable,
+        isSelected,
+    });
+}
+/**
+ * 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 function Locations(props) {
+    const { slot } = useTimeSlotContext();
+    const service = useTimeSlotListService();
+    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 }) => {
+        // 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
+        const isSelectable = selectedStaffMemberId
+            ? staffMembers.some((s) => s.id === selectedStaffMemberId)
+            : true;
+        return {
+            id: location.id,
+            name: location.name,
+            isSelected: selectedLocationId === location.id,
+            isSelectable,
+        };
+    });
+    return props.children({
+        locations,
+        selectLocation: service.actions.selectLocation,
+    });
+}
+/**
+ * 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 function LocationInfo(props) {
+    const { location } = useLocationContext();
+    return props.children({
+        name: location.name,
+        isSelected: location.isSelected,
+        isSelectable: location.isSelectable,
+        location,
+    });
+}
+/**
+ * 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 function LocationActions(props) {
+    const { location, selectLocation } = useLocationContext();
+    return props.children({
+        selectLocation,
+        isSelected: location.isSelected,
+        isSelectable: location.isSelectable,
+        location,
+    });
+}
+/**
+ * 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 function StaffMembers(props) {
+    const { slot } = useTimeSlotContext();
+    const service = useTimeSlotListService();
+    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 })));
+    // 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]) => ({
+        id,
+        name: entries[0].name,
+        isSelected: selectedStaffMemberId === id,
+        isSelectable: !selectedLocationId ||
+            entries.some((e) => e.locationId === selectedLocationId),
+    }));
+    return props.children({
+        staffMembers,
+        selectStaffMember: service.actions.selectStaffMember,
+    });
+}
+/**
+ * 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 function StaffMemberInfo(props) {
+    const { staffMember } = useStaffMemberContext();
+    return props.children({
+        name: staffMember.name,
+        isSelected: staffMember.isSelected,
+        isSelectable: staffMember.isSelectable,
+        staffMember,
+    });
+}
+/**
+ * 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 function StaffMemberActions(props) {
+    const { staffMember, selectStaffMember } = useStaffMemberContext();
+    return props.children({
+        selectStaffMember,
+        isSelected: staffMember.isSelected,
+        isSelectable: staffMember.isSelectable,
+        staffMember,
+    });
+}

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

@@ -0,0 +1,84 @@
+/**
+ * Core TimeSlotList Components
+ * 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;
+/**
+ * Props for Root component
+ */
+export interface RootProps {
+    children: React.ReactNode;
+    config?: TimeSlotListServiceConfig;
+}
+/**
+ * Root component that provides TimeSlotListService context to its children.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Root config={{ services, timeSlots, timezone }}>
+ *   {children}
+ * </Root>
+ * ```
+ */
+export declare function Root(props: RootProps): React.ReactNode;
+/**
+ * Props for Timezone render prop component
+ */
+export interface TimezoneProps {
+    children: (data: {
+        timezone: string | undefined;
+    }) => React.ReactNode;
+}
+/**
+ * Core component that provides access to the current timezone via render props.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Timezone>
+ *   {({ timezone }) => (
+ *     <span>{timezone}</span>
+ *   )}
+ * </Timezone>
+ * ```
+ */
+export declare function Timezone(props: TimezoneProps): React.ReactNode;
+/**
+ * Render props for ListData component
+ */
+export interface ListDataRenderProps {
+    timeSlots: TimeSlot[];
+    hasMore: boolean;
+    isLoading: boolean;
+    error: string | null;
+    loadMore: () => Promise<void>;
+}
+/**
+ * Props for ListData render prop component
+ */
+export interface ListDataProps {
+    children: (data: ListDataRenderProps) => React.ReactNode;
+}
+/**
+ * Core component that provides access to time slots list data via render props.
+ * Use this to build list containers with GenericList.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ListData>
+ *   {({ timeSlots, hasMore, isLoading, loadMore }) => (
+ *     <GenericList.Root items={timeSlots} hasMore={hasMore} isLoading={isLoading} loadMore={loadMore}>
+ *       {children}
+ *     </GenericList.Root>
+ *   )}
+ * </ListData>
+ * ```
+ */
+export declare function ListData(props: ListDataProps): React.ReactNode;

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

@@ -0,0 +1,68 @@
+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.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Root config={{ services, timeSlots, timezone }}>
+ *   {children}
+ * </Root>
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(TimeSlotListServiceDefinition, TimeSlotListService, props.config || {}), children: props.children }));
+}
+/**
+ * Core component that provides access to the current timezone via render props.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Timezone>
+ *   {({ timezone }) => (
+ *     <span>{timezone}</span>
+ *   )}
+ * </Timezone>
+ * ```
+ */
+export function Timezone(props) {
+    const service = useTimeSlotListService();
+    const timezone = service.timezone.get();
+    return props.children({ timezone });
+}
+/**
+ * Core component that provides access to time slots list data via render props.
+ * Use this to build list containers with GenericList.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ListData>
+ *   {({ timeSlots, hasMore, isLoading, loadMore }) => (
+ *     <GenericList.Root items={timeSlots} hasMore={hasMore} isLoading={isLoading} loadMore={loadMore}>
+ *       {children}
+ *     </GenericList.Root>
+ *   )}
+ * </ListData>
+ * ```
+ */
+export function ListData(props) {
+    const service = useTimeSlotListService();
+    return props.children({
+        timeSlots: service.timeSlots.get(),
+        hasMore: service.hasMore.get(),
+        isLoading: service.isLoading.get(),
+        error: service.error.get(),
+        loadMore: service.actions.loadMore,
+    });
+}

package/dist/react/index.d.ts

@@ -1,4 +1,5 @@
 export * as Booking from './booking/Booking.js';
 export * as Service from './service/Service.js';
+export * as TimeSlotList from './time-slot-list/TimeSlotList.js';
 export * as ServiceList from './service-list/ServiceList.js';
 export * as Location from './location/Location.js';

package/dist/react/index.js

@@ -1,4 +1,5 @@
 export * as Booking from './booking/Booking.js';
 export * as Service from './service/Service.js';
+export * as TimeSlotList from './time-slot-list/TimeSlotList.js';
 export * as ServiceList from './service-list/ServiceList.js';
 export * as Location from './location/Location.js';