@wix/headless-bookings 0.0.12 → 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';

package/dist/react/location/Location.d.ts

@@ -5,7 +5,7 @@
 import React from 'react';
 import * as CoreLocation from '../core/location/Location.js';
 import { AsChildChildren } from '@wix/headless-utils/react';
-import type { services } from '@wix/bookings';
+import { LocationType, type Service } from '@wix/auto_sdk_bookings_services';
 /**
  * Re-export AddressData type from core for convenience
  */
@@ -14,10 +14,10 @@ export type { AddressData } from '../core/location/Location.js';
  * Props for Location.Root component
  */
 export interface LocationRootProps {
-    location: NonNullable<services.Service['locations']>[number];
+    location: NonNullable<Service['locations']>[number];
     asChild?: boolean;
     children?: React.ReactNode | AsChildChildren<{
-        locationType: services.LocationType;
+        locationType: LocationType;
         address: CoreLocation.AddressData | null;
     }>;
     className?: string;

package/dist/react/service/Service.d.ts

@@ -5,7 +5,7 @@
 import React from 'react';
 import { AsChildChildren } from '@wix/headless-utils/react';
 import { MoneyData } from '@wix/headless-components/react';
-import { services } from '@wix/bookings';
+import { type Service, type Payment } from '@wix/auto_sdk_bookings_services';
 /**
  * Props for Service.Root component
  */
@@ -14,7 +14,7 @@ export interface ServiceRootProps {
         selected: boolean;
         bookable: boolean;
     }>;
-    service: services.Service;
+    service: Service;
     appId?: string;
     asChild?: boolean;
     className?: string;
@@ -106,8 +106,8 @@ export declare const Description: React.ForwardRefExoticComponent<DescriptionPro
 export interface PriceProps {
     asChild?: boolean;
     children?: AsChildChildren<{
-        servicePayment: services.Payment | undefined;
-        rateType: services.Payment['rateType'] | undefined;
+        servicePayment: Payment | undefined;
+        rateType: Payment['rateType'] | undefined;
         money: MoneyData | null;
         minPrice: MoneyData | null;
         maxPrice: MoneyData | null;
@@ -327,7 +327,7 @@ export declare const Category: React.ForwardRefExoticComponent<CategoryProps & R
 /**
  * Type for location
  */
-type LocationType = NonNullable<services.Service['locations']>[number] & {
+type LocationType = NonNullable<Service['locations']>[number] & {
     id: string;
 };
 /**
@@ -717,7 +717,7 @@ export declare const MediaItems: React.ForwardRefExoticComponent<MediaItemsProps
 export interface RawProps {
     asChild?: boolean;
     children?: AsChildChildren<{
-        service: services.Service;
+        service: Service;
         isLoading: boolean;
         error: string | null;
     }>;
@@ -755,7 +755,7 @@ export declare namespace Actions {
             selected: boolean;
             requiresAvailability: boolean;
             onClick: () => void;
-            service: services.Service;
+            service: Service;
         }) => React.ReactNode);
         className?: string;
         label?: string;
@@ -795,7 +795,7 @@ export declare namespace Actions {
             selected: boolean;
             requiresAvailability: boolean;
             onClick: () => void;
-            service: services.Service;
+            service: Service;
         }) => React.ReactNode);
         className?: string;
         label?: string;
@@ -835,7 +835,7 @@ export declare namespace Actions {
             selected: boolean;
             requiresAvailability: boolean;
             onClick: () => void;
-            service: services.Service;
+            service: Service;
         }) => React.ReactNode);
         className?: string;
         label?: string;

package/dist/react/service/Service.js

@@ -9,7 +9,7 @@ import { AsChildSlot } from '@wix/headless-utils/react';
 import { Money, GenericList } from '@wix/headless-components/react';
 import { WixMediaImage } from '@wix/headless-media/react';
 import { MediaGallery } from '@wix/headless-media/react';
-import { services } from '@wix/bookings';
+import { RateType, } from '@wix/auto_sdk_bookings_services';
 import * as Location from '../location/Location.js';
 var TestIds;
 (function (TestIds) {
@@ -160,17 +160,17 @@ export const Price = React.forwardRef((props, ref) => {
             // Default rendering based on rate type
             const renderDefaultPrice = () => {
                 switch (rateType) {
-                    case services.RateType.FIXED:
+                    case RateType.FIXED:
                         return money ? (_jsx(Money, { money: money, className: className })) : null;
-                    case services.RateType.VARIED:
+                    case RateType.VARIED:
                         if (minPrice && maxPrice) {
                             return (_jsxs("span", { className: className, "data-testid": TestIds.servicePrice, children: [_jsx(Money, { money: minPrice }), " - ", _jsx(Money, { money: maxPrice })] }));
                         }
                         // Fallback to defaultPrice if min/max not available
                         return money ? (_jsx(Money, { money: money, className: className })) : null;
-                    case services.RateType.CUSTOM:
+                    case RateType.CUSTOM:
                         return priceDescription ? (_jsx("span", { className: className, "data-testid": TestIds.servicePrice, children: priceDescription })) : null;
-                    case services.RateType.NO_FEE:
+                    case RateType.NO_FEE:
                         return money ? (_jsx(Money, { money: money, className: className })) : null;
                     default:
                         // UNKNOWN_RATE_TYPE or undefined

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

@@ -6,7 +6,7 @@ import React from 'react';
 import { ListVariant, GenericListLoadMoreRenderProps } from '@wix/headless-components/react';
 import { AsChildChildren } from '@wix/headless-utils/react';
 import type { ServiceListServiceConfig } from '../../services/service-list/service-list.js';
-import type { services } from '@wix/bookings';
+import type { Service as ServiceType } from '@wix/auto_sdk_bookings_services';
 /**
  * Props for the ServiceList root component
  */
@@ -79,7 +79,7 @@ export type ServiceRootChildren = AsChildChildren<{
  * Supports both ReactNode and function children that receive { selected, bookable }
  */
 export interface ServiceItemWrapperProps {
-    item: services.Service;
+    item: ServiceType;
     index?: number;
     /** Children can be ReactNode or a function that receives { selected, bookable } from Service.Root */
     children: React.ReactNode | ServiceRootChildren;
@@ -89,7 +89,7 @@ export interface ServiceItemWrapperProps {
  * Provides items array and itemWrapper function for custom rendering
  */
 export interface ServiceRepeaterRenderProps {
-    items: services.Service[];
+    items: ServiceType[];
     variant?: ListVariant;
     /** Wraps each item in Service.Root - children can be ReactNode or function receiving { selected, bookable } */
     itemWrapper: (props: ServiceItemWrapperProps) => React.ReactNode;