@wix/headless-bookings 0.0.10 → 0.0.12

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

@@ -0,0 +1,185 @@
+/**
+ * ServiceList - High-level component for displaying services list
+ * Provides components for displaying services list with pagination
+ */
+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';
+/**
+ * Props for the ServiceList root component
+ */
+export interface ServiceListRootProps {
+    children: React.ReactNode;
+    serviceListConfig?: ServiceListServiceConfig;
+    className?: string;
+    variant?: ListVariant;
+}
+/**
+ * Root component that provides the ServiceList service context for rendering services lists.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { ServiceList } from '@wix/bookings/components';
+ *
+ * function ServicesPage({ serviceListConfig }) {
+ *   return (
+ *     <ServiceList.Root serviceListConfig={serviceListConfig}>
+ *       <ServiceList.Services emptyState={<div>No services available</div>}>
+ *         <ServiceList.ServiceRepeater>
+ *           <Service.Name />
+ *           <Service.Price />
+ *         </ServiceList.ServiceRepeater>
+ *       </ServiceList.Services>
+ *     </ServiceList.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare const Root: React.ForwardRefExoticComponent<ServiceListRootProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for ServiceList Services component
+ */
+export interface ServicesProps {
+    children: React.ReactNode;
+    emptyState?: React.ReactNode;
+    infiniteScroll?: boolean;
+    pageSize?: number;
+    className?: string;
+}
+/**
+ * Container for the services list with empty state support.
+ * Wraps GenericList.Items. Follows List Container Level pattern.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceList.Services emptyState={<div>No services found</div>}>
+ *   <ServiceList.ServiceRepeater>
+ *     <Service.Name />
+ *     <Service.Price />
+ *   </ServiceList.ServiceRepeater>
+ * </ServiceList.Services>
+ * ```
+ */
+export declare const Services: React.ForwardRefExoticComponent<ServicesProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Function children type for Service.Root component
+ * Receives { selected, bookable } props from Service.Root
+ */
+export type ServiceRootChildren = AsChildChildren<{
+    selected: boolean;
+    bookable: boolean;
+}>;
+/**
+ * Props for the itemWrapper function in asChild pattern
+ * Supports both ReactNode and function children that receive { selected, bookable }
+ */
+export interface ServiceItemWrapperProps {
+    item: services.Service;
+    index?: number;
+    /** Children can be ReactNode or a function that receives { selected, bookable } from Service.Root */
+    children: React.ReactNode | ServiceRootChildren;
+}
+/**
+ * Render props for ServiceRepeater asChild pattern
+ * Provides items array and itemWrapper function for custom rendering
+ */
+export interface ServiceRepeaterRenderProps {
+    items: services.Service[];
+    variant?: ListVariant;
+    /** Wraps each item in Service.Root - children can be ReactNode or function receiving { selected, bookable } */
+    itemWrapper: (props: ServiceItemWrapperProps) => React.ReactNode;
+}
+/**
+ * Props for ServiceList ServiceRepeater component
+ */
+export interface ServiceRepeaterProps {
+    /**
+     * Children can be:
+     * - ReactNode: Static content rendered for each service
+     * - ServiceRootChildren: Function receiving { selected, bookable } from Service.Root
+     * - Function (with asChild=true): Receives { items, itemWrapper } for custom rendering
+     */
+    children: React.ReactNode | ((props: ServiceRepeaterRenderProps, ref?: React.Ref<HTMLElement>) => React.ReactNode) | ServiceRootChildren;
+    /** Whether to render as child component (asChild pattern) */
+    asChild?: boolean;
+}
+/**
+ * Repeater component that renders Service.Root for each service.
+ * Follows Repeater Level pattern and uses GenericList.Repeater for consistency.
+ * Supports asChild pattern for advanced layout components.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Standard usage
+ * <ServiceList.ServiceRepeater>
+ *   <Service.Name />
+ *   <Service.Price />
+ * </ServiceList.ServiceRepeater>
+ *
+ * // AsChild usage with custom wrapper
+ * <ServiceList.ServiceRepeater asChild>
+ *   {({ items, variant, itemWrapper }) => (
+ *     <CustomWrapper
+ *       items={items}
+ *       variant={variant}
+ *       itemRenderer={(item, index) =>
+ *         itemWrapper({ item, index, children: <>
+ *           <Service.Name />
+ *           <Service.Price />
+ *         </> })
+ *       }
+ *     />
+ *   )}
+ * </ServiceList.ServiceRepeater>
+ * ```
+ */
+export declare const ServiceRepeater: React.ForwardRefExoticComponent<ServiceRepeaterProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for ServiceList LoadMore component
+ */
+export interface LoadMoreProps {
+    /** Custom render function when using asChild */
+    children?: React.ReactNode | React.ForwardRefRenderFunction<HTMLButtonElement, GenericListLoadMoreRenderProps>;
+    /**
+     * Whether to render as a child component.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * The CSS classes to apply to the button.
+     */
+    className?: string;
+    /**
+     * The label to display inside the button.
+     */
+    label?: string;
+    /**
+     * The loading state to display inside the button.
+     */
+    loadingState?: React.ReactNode;
+}
+/**
+ * Displays a button to load more services. Not rendered if infiniteScroll is false or no services are left to load.
+ * Follows the architecture rules - does not support asChild as it's a simple trigger component.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceList.Actions.LoadMore asChild>
+ *   <button>Load More</button>
+ * </ServiceList.Actions.LoadMore>
+ * ```
+ */
+export declare const LoadMore: React.ForwardRefExoticComponent<LoadMoreProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Actions namespace for ServiceList
+ */
+export declare const Actions: {
+    LoadMore: React.ForwardRefExoticComponent<LoadMoreProps & React.RefAttributes<HTMLButtonElement>>;
+};

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

@@ -0,0 +1,184 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * ServiceList - High-level component for displaying services list
+ * Provides components for displaying services list with pagination
+ */
+import React from 'react';
+import { GenericList, } from '@wix/headless-components/react';
+import { useService } from '@wix/services-manager-react';
+import { ServiceListServiceDefinition } from '../../services/service-list/service-list.js';
+import * as CoreServiceList from '../core/service-list/ServiceList.js';
+import * as Service from '../service/Service.js';
+/**
+ * Booking app ID constant
+ */
+const BOOKING_APP_ID = '13d21c63-b5ec-5912-8397-c3a5ddb27a97';
+var TestIds;
+(function (TestIds) {
+    TestIds["serviceListRoot"] = "service-list-root";
+    TestIds["serviceListServices"] = "service-list-services";
+    TestIds["serviceListService"] = "service-list-service";
+    TestIds["serviceListLoadMore"] = "service-list-load-more";
+})(TestIds || (TestIds = {}));
+/**
+ * Root component that provides the ServiceList service context for rendering services lists.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { ServiceList } from '@wix/bookings/components';
+ *
+ * function ServicesPage({ serviceListConfig }) {
+ *   return (
+ *     <ServiceList.Root serviceListConfig={serviceListConfig}>
+ *       <ServiceList.Services emptyState={<div>No services available</div>}>
+ *         <ServiceList.ServiceRepeater>
+ *           <Service.Name />
+ *           <Service.Price />
+ *         </ServiceList.ServiceRepeater>
+ *       </ServiceList.Services>
+ *     </ServiceList.Root>
+ *   );
+ * }
+ * ```
+ */
+export const Root = React.forwardRef((props, ref) => {
+    const { children, serviceListConfig, className, variant } = props;
+    const serviceConfig = serviceListConfig || {
+        services: [],
+        options: {
+            appId: BOOKING_APP_ID,
+            pagingMetadata: {
+                limit: 0,
+                offset: 0,
+                hasNext: false,
+            },
+        },
+    };
+    return (_jsx(CoreServiceList.Root, { serviceListConfig: serviceConfig, children: _jsx(RootContent, { className: className, ref: ref, variant: variant, children: children }) }));
+});
+Root.displayName = 'ServiceList.Root';
+/**
+ * Internal component to handle the Root content with service access
+ */
+const RootContent = React.forwardRef((props, ref) => {
+    const { children, className, variant } = props;
+    const serviceListService = useService(ServiceListServiceDefinition);
+    const items = serviceListService.servicesSignal
+        .get()
+        .map((service) => ({
+        ...service,
+        id: service._id,
+    }));
+    return (_jsx(GenericList.Root, { items: items, loadMore: () => serviceListService.actions.loadMore(10), hasMore: serviceListService.hasMoreServicesSignal.get(), isLoading: serviceListService.isLoadingSignal.get(), className: className, ref: ref, "data-testid": TestIds.serviceListRoot, variant: variant, children: children }));
+});
+/**
+ * Container for the services list with empty state support.
+ * Wraps GenericList.Items. Follows List Container Level pattern.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceList.Services emptyState={<div>No services found</div>}>
+ *   <ServiceList.ServiceRepeater>
+ *     <Service.Name />
+ *     <Service.Price />
+ *   </ServiceList.ServiceRepeater>
+ * </ServiceList.Services>
+ * ```
+ */
+export const Services = React.forwardRef((props, ref) => {
+    const { children, ...otherProps } = props;
+    return (_jsx(GenericList.Items, { ref: ref, "data-testid": TestIds.serviceListServices, ...otherProps, children: children }));
+});
+Services.displayName = 'ServiceList.Services';
+/**
+ * Repeater component that renders Service.Root for each service.
+ * Follows Repeater Level pattern and uses GenericList.Repeater for consistency.
+ * Supports asChild pattern for advanced layout components.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Standard usage
+ * <ServiceList.ServiceRepeater>
+ *   <Service.Name />
+ *   <Service.Price />
+ * </ServiceList.ServiceRepeater>
+ *
+ * // AsChild usage with custom wrapper
+ * <ServiceList.ServiceRepeater asChild>
+ *   {({ items, variant, itemWrapper }) => (
+ *     <CustomWrapper
+ *       items={items}
+ *       variant={variant}
+ *       itemRenderer={(item, index) =>
+ *         itemWrapper({ item, index, children: <>
+ *           <Service.Name />
+ *           <Service.Price />
+ *         </> })
+ *       }
+ *     />
+ *   )}
+ * </ServiceList.ServiceRepeater>
+ * ```
+ */
+export const ServiceRepeater = React.forwardRef((props, ref) => {
+    const { children, asChild } = props;
+    const serviceListService = useService(ServiceListServiceDefinition);
+    const appId = serviceListService.queryOptionsSignal.get().appId;
+    // Check if children is a function that matches ServiceRootChildren pattern
+    // (function with single parameter that receives { selected, bookable })
+    const isServiceRootFunction = typeof children === 'function' && children.length === 1 && !asChild;
+    // Custom itemWrapper that matches ItemWrapperProps signature
+    const serviceItemWrapper = (wrapperProps) => {
+        const { item: service, children: itemChildren } = wrapperProps;
+        return (_jsx(Service.Root, { service: service, appId: appId, "data-testid": TestIds.serviceListService, "data-service-id": service._id, "data-item-id": service._id, children: isServiceRootFunction
+                ? children
+                : itemChildren }, service._id));
+    };
+    // Transform children for asChild pattern to provide custom render props
+    const transformedChildren = asChild && typeof children === 'function'
+        ? (genericProps) => {
+            // Create properly typed render props for the consumer
+            const renderProps = {
+                items: genericProps.items,
+                variant: genericProps.variant,
+                itemWrapper: (props) => serviceItemWrapper({
+                    item: props.item,
+                    index: props.index ?? 0,
+                    children: props.children,
+                }),
+            };
+            return children(renderProps, ref);
+        }
+        : isServiceRootFunction
+            ? undefined
+            : children;
+    return (_jsx(GenericList.Repeater, { ref: ref, asChild: asChild, itemWrapper: serviceItemWrapper, children: transformedChildren }));
+});
+ServiceRepeater.displayName = 'ServiceList.ServiceRepeater';
+/**
+ * Displays a button to load more services. Not rendered if infiniteScroll is false or no services are left to load.
+ * Follows the architecture rules - does not support asChild as it's a simple trigger component.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceList.Actions.LoadMore asChild>
+ *   <button>Load More</button>
+ * </ServiceList.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.serviceListLoadMore, ...otherProps, children: children }));
+});
+LoadMore.displayName = 'ServiceList.Actions.LoadMore';
+/**
+ * Actions namespace for ServiceList
+ */
+export const Actions = {
+    LoadMore,
+};

package/cjs/dist/services/booking/booking.d.ts

@@ -7,12 +7,16 @@ import { type Signal } from '@wix/services-definitions/core-services/signals';
 import type { services, availabilityTimeSlots } from '@wix/bookings';
 import type { FormValues } from '@wix/form-public';
 /**
- * ServiceSelection contains the service AND its related selections
+ * BookingSelection contains the service AND its related selections
  */
-export interface ServiceSelection {
+export interface BookingSelection {
+    /** Unique identifier for this booking instance (allows same service multiple times) */
+    instanceId: string;
     service: services.Service;
     /** Selected resources (staff members, rooms, etc.) */
-    resources?: availabilityTimeSlots.Resource[];
+    staff?: availabilityTimeSlots.Resource;
+    /** Per-service slot data from nested slots (for multi-service bookings) */
+    nestedSlotData?: availabilityTimeSlots.NestedTimeSlot;
 }
 export interface Location {
     id: string;
@@ -22,10 +26,14 @@ export interface Location {
  * BookingService actions - setters only, no API calls
  */
 export interface BookingServiceActions {
-    setServices(services: ServiceSelection[]): void;
-    addService(service: ServiceSelection): void;
-    updateService(serviceId: string, updates: Partial<ServiceSelection>): void;
-    removeService(serviceId: string): void;
+    /** Clears all booking selections and sets a single service (instanceId is auto-generated) */
+    setService(service: Omit<BookingSelection, 'instanceId'>): string;
+    /** Adds a service and returns the generated instanceId */
+    addService(service: Omit<BookingSelection, 'instanceId'>): string;
+    /** Updates a booking selection by instanceId */
+    updateServiceByInstanceId(instanceId: string, updates: Partial<Omit<BookingSelection, 'instanceId'>>): void;
+    /** Removes a service selection by instanceId. If no instanceId provided, removes the first service. */
+    removeServiceByInstanceId(instanceId?: string): void;
     clearServices(): void;
     setTimeSlot(slot: availabilityTimeSlots.TimeSlot | null): void;
     clearTimeSlot(): void;
@@ -40,8 +48,8 @@ export interface BookingServiceActions {
  * Pure state management - no API calls
  */
 export interface BookingService {
-    /** Signal containing the currently selected services with their selections */
-    services: Signal<ServiceSelection[]>;
+    /** Signal containing the booking selections (services with their related data) */
+    bookingSelections: Signal<BookingSelection[]>;
     /** Signal containing the currently selected time slot */
     timeSlot: Signal<availabilityTimeSlots.TimeSlot | null>;
     /** Signal containing the selected location (derived from timeSlot) */
@@ -64,8 +72,8 @@ export declare const BookingServiceDefinition: string & {
  * Note: location is NOT in config - it's derived internally from timeSlot
  */
 export interface BookingServiceConfig {
-    /** Optional initial services to pre-populate */
-    initialServices?: ServiceSelection[];
+    /** Optional initial booking selections to pre-populate */
+    initialBookingSelections?: BookingSelection[];
     /** Optional initial time slot to pre-populate */
     initialTimeSlot?: availabilityTimeSlots.TimeSlot | null;
     /** Optional initial form values */

package/cjs/dist/services/booking/booking.js

@@ -5,6 +5,15 @@
  */
 import { defineService, implementService } from '@wix/services-definitions';
 import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
+// ============================================================================
+// Types
+// ============================================================================
+/**
+ * Generates a unique instance ID for service selections
+ */
+function generateInstanceId() {
+    return crypto.randomUUID();
+}
 /**
  * Service definition for Booking
  */
@@ -39,7 +48,12 @@ export const BookingServiceDefinition = defineService('booking');
 export const BookingService = implementService.withConfig()(BookingServiceDefinition, ({ getService, config }) => {
     const signalsService = getService(SignalsServiceDefinition);
     // Initialize signals with config values
-    const servicesSignal = signalsService.signal(config.initialServices || []);
+    // Ensure all initial booking selections have instanceIds
+    const initialSelectionsWithIds = (config.initialBookingSelections || []).map((s) => ({
+        ...s,
+        instanceId: s.instanceId || generateInstanceId(),
+    }));
+    const bookingSelectionsSignal = signalsService.signal(initialSelectionsWithIds);
     const timeSlotSignal = signalsService.signal(config.initialTimeSlot || null);
     // Location is derived internally - initialize as null
     const locationSignal = signalsService.signal(null);
@@ -49,25 +63,43 @@ export const BookingService = implementService.withConfig()(BookingServiceDefini
     // ========================================================================
     const actions = {
         // Services actions
-        setServices(newServices) {
-            servicesSignal.set(newServices);
+        setService(service) {
+            const instanceId = generateInstanceId();
+            const newSelection = {
+                ...service,
+                instanceId,
+            };
+            bookingSelectionsSignal.set([newSelection]);
+            return instanceId;
         },
         addService(service) {
-            const current = servicesSignal.get();
-            servicesSignal.set([...current, service]);
+            const instanceId = generateInstanceId();
+            const current = bookingSelectionsSignal.get();
+            const newSelection = {
+                ...service,
+                instanceId,
+            };
+            bookingSelectionsSignal.set([...current, newSelection]);
+            return instanceId;
         },
-        updateService(serviceId, updates) {
-            const current = servicesSignal.get();
-            const updated = current.map((s) => s.service._id === serviceId ? { ...s, ...updates } : s);
-            servicesSignal.set(updated);
+        updateServiceByInstanceId(instanceId, updates) {
+            const current = bookingSelectionsSignal.get();
+            const updated = current.map((s) => s.instanceId === instanceId ? { ...s, ...updates } : s);
+            bookingSelectionsSignal.set(updated);
         },
-        removeService(serviceId) {
-            const current = servicesSignal.get();
-            const filtered = current.filter((s) => s.service._id !== serviceId);
-            servicesSignal.set(filtered);
+        removeServiceByInstanceId(instanceId) {
+            const current = bookingSelectionsSignal.get();
+            if (!instanceId) {
+                // Remove first selection if no instanceId provided
+                bookingSelectionsSignal.set(current.slice(1));
+            }
+            else {
+                const filtered = current.filter((s) => s.instanceId !== instanceId);
+                bookingSelectionsSignal.set(filtered);
+            }
         },
         clearServices() {
-            servicesSignal.set([]);
+            bookingSelectionsSignal.set([]);
         },
         // Time Slot actions
         setTimeSlot(slot) {
@@ -92,14 +124,14 @@ export const BookingService = implementService.withConfig()(BookingServiceDefini
         },
         // Clear all
         clearAll() {
-            servicesSignal.set([]);
+            bookingSelectionsSignal.set([]);
             timeSlotSignal.set(null);
             locationSignal.set(null);
             formValuesSignal.set(null);
         },
     };
     return {
-        services: servicesSignal,
+        bookingSelections: bookingSelectionsSignal,
         timeSlot: timeSlotSignal,
         location: locationSignal,
         formValues: formValuesSignal,

package/cjs/dist/services/index.d.ts

@@ -2,5 +2,6 @@
  * Bookings Services
  * Main export file for all service definitions and implementations
  */
-export { ServiceService, ServiceServiceDefinition, type ServiceServiceAPI, type ServiceServiceConfig, loadServiceServiceConfig, type SuccessServiceServiceConfigResult, type NotFoundServiceServiceConfigResult, } from './service/service.js';
-export { BookingService, BookingServiceDefinition, type BookingServiceConfig, type ServiceSelection, type Location, type BookingServiceActions, } from './booking/booking.js';
+export { ServiceService, ServiceServiceDefinition, type ServiceServiceAPI, type ServiceServiceConfig, type ServiceActions, type ServicePaymentData, loadServiceServiceInitialData, type SuccessServiceServiceConfigResult, type NotFoundServiceServiceConfigResult, } from './service/service.js';
+export { BookingService, BookingServiceDefinition, type BookingServiceConfig, type BookingSelection, type Location, type BookingServiceActions, } from './booking/booking.js';
+export { ServiceListService, ServiceListServiceDefinition, type ServiceListServiceAPI, type ServiceListServiceConfig, type ServiceListActions, type QueryOptions, loadServiceListServiceInitialData, type SuccessServiceListServiceConfigResult, type ErrorServiceListServiceConfigResult, } from './service-list/service-list.js';

package/cjs/dist/services/index.js

@@ -2,5 +2,6 @@
  * Bookings Services
  * Main export file for all service definitions and implementations
  */
-export { ServiceService, ServiceServiceDefinition, loadServiceServiceConfig, } from './service/service.js';
+export { ServiceService, ServiceServiceDefinition, loadServiceServiceInitialData, } from './service/service.js';
 export { BookingService, BookingServiceDefinition, } from './booking/booking.js';
+export { ServiceListService, ServiceListServiceDefinition, loadServiceListServiceInitialData, } from './service-list/service-list.js';