@wix/headless-bookings 0.0.10 → 0.0.11

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/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 { 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 ServiceSelection, 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';

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

@@ -2,8 +2,43 @@
  * Service Service - Reactive service data management
  * Handles loading and managing a single service's data, loading state, and errors.
  */
-import { type Signal } from '@wix/services-definitions/core-services/signals';
+import { type Signal, type ReadOnlySignal } from '@wix/services-definitions/core-services/signals';
 import { services } from '@wix/bookings';
+import type { MoneyData } from '@wix/headless-components/react';
+/**
+ * Actions object for service selection
+ */
+export interface ServiceActions {
+    /** Replace entire selection with this service (with current modifiers) */
+    select: () => void;
+    /** Add this service to selection (with current modifiers) */
+    add: () => void;
+    /** Remove this service from selection */
+    remove: () => void;
+}
+/**
+ * Payment data derived from service payment information
+ *
+ * @interface ServicePaymentData
+ */
+export interface ServicePaymentData {
+    /** The service payment information from the service */
+    servicePayment: services.Payment | undefined;
+    /** The rate type of the service (FIXED, VARIED, CUSTOM, NO_FEE, etc.) */
+    rateType: services.Payment['rateType'] | undefined;
+    /** Primary price (used for FIXED or VARIED default) */
+    money: MoneyData | null;
+    /** Minimum price (used for VARIED) */
+    minPrice: MoneyData | null;
+    /** Maximum price (used for VARIED) */
+    maxPrice: MoneyData | null;
+    /** Price description text (used for CUSTOM) */
+    priceDescription: string | null;
+    /** Whether the service has add-ons available */
+    hasAddOns: boolean;
+    /** Whether the service has pricing plans available */
+    hasPricingPlans: boolean;
+}
 /**
  * API interface for the Service service, providing reactive service data management.
  *
@@ -11,19 +46,23 @@ import { services } from '@wix/bookings';
  */
 export interface ServiceServiceAPI {
     /** Reactive signal containing the current service data */
-    service: Signal<services.Service>;
+    serviceSignal: Signal<services.Service>;
     /** Reactive signal indicating if a service is currently being loaded */
-    isLoading: Signal<boolean>;
+    isLoadingSignal: Signal<boolean>;
     /** Reactive signal containing any error message, or null if no error */
-    error: Signal<string | null>;
+    errorSignal: Signal<string | null>;
     /** Function to load a service by its id */
-    loadService: (id: string) => Promise<void>;
-    /** Function to select this service (replaces entire selection) */
-    select: () => void;
-    /** Function to add this service to the selection */
-    add: () => void;
-    /** Function to remove this service from the selection */
-    remove: () => void;
+    loadServiceById: (id: string) => Promise<void>;
+    /** Indicates if BookingService is available (false in showcase mode/lead nurturing) */
+    bookableSignal: ReadOnlySignal<boolean>;
+    /** Indicates if the current service is selected in BookingService */
+    selectedSignal: ReadOnlySignal<boolean>;
+    /** Indicates if the service requires availability selection (true for APPOINTMENT and CLASS, false for COURSE) */
+    requiresAvailabilitySignal: ReadOnlySignal<boolean>;
+    /** Reactive signal containing computed payment data derived from service */
+    paymentDataSignal: ReadOnlySignal<ServicePaymentData>;
+    /** Actions object containing service selection actions (only work when bookable is true) */
+    actions: ServiceActions;
 }
 /**
  * Service definition for the Service service.
@@ -47,6 +86,10 @@ export interface ServiceServiceConfig {
     service?: services.Service;
     /** The service ID to load if no initial service is provided */
     serviceId?: string;
+    /** The service slug to load if no initial service is provided */
+    serviceSlug?: string;
+    /** The app ID to filter services by app and determine bookable */
+    appId?: string;
 }
 /**
  * Implementation of the Service service that manages reactive service data.
@@ -70,9 +113,9 @@ export interface ServiceServiceConfig {
  *
  * function ServiceDisplay() {
  *   const serviceService = useService(ServiceServiceDefinition);
- *   const service = serviceService.service.get();
- *   const isLoading = serviceService.isLoading.get();
- *   const error = serviceService.error.get();
+ *   const service = serviceService.serviceSignal.get();
+ *   const isLoading = serviceService.isLoadingSignal.get();
+ *   const error = serviceService.errorSignal.get();
  *
  *   if (isLoading) return <div>Loading...</div>;
  *   if (error) return <div>Error: {error}</div>;
@@ -101,15 +144,19 @@ export type NotFoundServiceServiceConfigResult = {
  * This function is designed to be called during the build or server-side rendering phase
  * to pre-fetch service data before the React components are hydrated on the client.
  *
- * @param slug - The slug of the service to load (e.g., "group-trainings", "yoga-class")
+ * @param params - Either `{ slug: string, appId?: string }` or `{ serviceId: string, appId?: string }`
  * @returns A promise that resolves to either a success result with the config or a notFound result
  *
  * @example
  * ```ts
  * // In an Astro page or API route
- * import { loadServiceServiceConfig } from '@wix/headless-bookings/services';
+ * import { loadServiceServiceInitialData } from '@wix/headless-bookings/services';
+ *
+ * // Load by slug
+ * const serviceResult = await loadServiceServiceInitialData({ slug: 'group-trainings' });
  *
- * const serviceResult = await loadServiceServiceConfig('group-trainings');
+ * // Load by serviceId
+ * const serviceResult = await loadServiceServiceInitialData({ serviceId: 'service-id-123' });
  *
  * if (serviceResult.type === 'notFound') {
  *   return Astro.redirect('/404');
@@ -118,4 +165,10 @@ export type NotFoundServiceServiceConfigResult = {
  * const serviceConfig = serviceResult.config;
  * ```
  */
-export declare function loadServiceServiceConfig(slug: string): Promise<SuccessServiceServiceConfigResult | NotFoundServiceServiceConfigResult>;
+export declare function loadServiceServiceInitialData(params: {
+    slug: string;
+    appId?: string;
+} | {
+    serviceId: string;
+    appId?: string;
+}): Promise<SuccessServiceServiceConfigResult | NotFoundServiceServiceConfigResult>;