@wix/headless-bookings 0.0.46 → 0.0.47

package/cjs/dist/react/core/service/Service.js

@@ -15,8 +15,14 @@ import { ServiceServiceDefinition, ServiceService, } from '../../../services/ser
  */
 function RootContent({ children, }) {
     const serviceService = useService(ServiceServiceDefinition);
+    const service = serviceService.serviceSignal.get();
     const selected = serviceService.selectedSignal.get();
     const bookable = serviceService.bookableSignal.get();
+    // In "from booking signal" mode, render null when no service is selected
+    // The signal will trigger a re-render when a service is selected
+    if (!service || !service._id) {
+        return null;
+    }
     if (typeof children === 'function') {
         return children({ selected, bookable });
     }

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

@@ -43,14 +43,32 @@ type ServiceRootWithSlug = ServiceRootBaseProps & {
     serviceId?: never;
     serviceSlug: string;
 };
+/**
+ * Props for Service.Root that reads from BookingService's selected service.
+ * When used without service config, the component reads from the booking signal.
+ * Requires BookingService to be available in the context.
+ */
+type ServiceRootFromBooking = ServiceRootBaseProps & {
+    service?: never;
+    serviceId?: never;
+    serviceSlug?: never;
+};
 /**
  * Props for Service.Root component.
- * Requires exactly one of: service, serviceId, or serviceSlug.
+ * Accepts one of:
+ * - service: Pre-loaded service object (SSR pattern)
+ * - serviceId: Service ID for dynamic loading
+ * - serviceSlug: Service slug for dynamic loading
+ * - No service config: Reads from BookingService's selected service
  */
-export type ServiceRootProps = ServiceRootWithService | ServiceRootWithId | ServiceRootWithSlug;
+export type ServiceRootProps = ServiceRootWithService | ServiceRootWithId | ServiceRootWithSlug | ServiceRootFromBooking;
 /**
  * Root component that provides service context to the entire app.
- * Requires exactly one of: service, serviceId, or serviceSlug.
+ * Can be used with:
+ * - service: Pre-loaded service object (SSR pattern)
+ * - serviceId: Service ID for dynamic loading
+ * - serviceSlug: Service slug for dynamic loading
+ * - No config: Reads from BookingService's selected service (requires BookingService)
  *
  * @order 1
  * @component
@@ -87,6 +105,17 @@ export type ServiceRootProps = ServiceRootWithService | ServiceRootWithId | Serv
  *     </Service.Root>
  *   );
  * }
+ *
+ * // Reading from BookingService's selected service
+ * // (requires Booking.Root parent context)
+ * function SelectedServiceDisplay() {
+ *   return (
+ *     <Service.Root>
+ *       <Service.Name />
+ *       <Service.Price />
+ *     </Service.Root>
+ *   );
+ * }
  * ```
  */
 export declare const Root: React.ForwardRefExoticComponent<ServiceRootProps & React.RefAttributes<HTMLElement>>;

package/cjs/dist/react/service/Service.js

@@ -49,7 +49,11 @@ var TestIds;
 })(TestIds || (TestIds = {}));
 /**
  * Root component that provides service context to the entire app.
- * Requires exactly one of: service, serviceId, or serviceSlug.
+ * Can be used with:
+ * - service: Pre-loaded service object (SSR pattern)
+ * - serviceId: Service ID for dynamic loading
+ * - serviceSlug: Service slug for dynamic loading
+ * - No config: Reads from BookingService's selected service (requires BookingService)
  *
  * @order 1
  * @component
@@ -86,11 +90,30 @@ var TestIds;
  *     </Service.Root>
  *   );
  * }
+ *
+ * // Reading from BookingService's selected service
+ * // (requires Booking.Root parent context)
+ * function SelectedServiceDisplay() {
+ *   return (
+ *     <Service.Root>
+ *       <Service.Name />
+ *       <Service.Price />
+ *     </Service.Root>
+ *   );
+ * }
  * ```
  */
 export const Root = React.forwardRef((props, ref) => {
     const { children, service, serviceId, serviceSlug, appId, asChild, className, ...attrs } = props;
-    return (_jsx(CoreService.Root, { serviceServiceConfig: { service, serviceId, serviceSlug, appId }, children: ({ selected, bookable }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceRoot, "data-selected": selected, "data-bookable": bookable, customElement: children, customElementProps: { selected, bookable }, ...attrs, children: children })) }));
+    // Build config - when no service config is provided, pass empty object
+    // to trigger "from booking signal" mode in ServiceService
+    const serviceServiceConfig = {
+        service,
+        serviceId,
+        serviceSlug,
+        appId,
+    };
+    return (_jsx(CoreService.Root, { serviceServiceConfig: serviceServiceConfig, children: ({ selected, bookable }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceRoot, "data-selected": selected, "data-bookable": bookable, customElement: children, customElementProps: { selected, bookable }, ...attrs, children: children })) }));
 });
 Root.displayName = 'Service.Root';
 /**

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

@@ -47,19 +47,28 @@ export declare const Root: React.ForwardRefExoticComponent<ServiceListRootProps
  */
 export interface ServicesProps {
     children: React.ReactNode;
+    /** Content to display when no services are available */
     emptyState?: React.ReactNode;
+    /** Content to display when loading and no services are available */
+    loadingState?: React.ReactNode;
+    /** Content to display when an error occurs and no services are available */
+    errorState?: React.ReactNode;
     infiniteScroll?: boolean;
     pageSize?: number;
     className?: string;
 }
 /**
- * Container for the services list with empty state support.
+ * Container for the services list with empty, loading, and error state support.
  * Wraps GenericList.Items. Follows List Container Level pattern.
  *
  * @component
  * @example
  * ```tsx
- * <ServiceList.Services emptyState={<div>No services found</div>}>
+ * <ServiceList.Services
+ *   emptyState={<div>No services found</div>}
+ *   loadingState={<div>Loading services...</div>}
+ *   errorState={<div>Failed to load services</div>}
+ * >
  *   <ServiceList.ServiceRepeater>
  *     <Service.Name />
  *     <Service.Price />

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

@@ -73,22 +73,26 @@ const DEFAULT_PAGE_SIZE = 100;
  */
 const RootContent = React.forwardRef((props, ref) => {
     const { children, className, variant, pageSize = DEFAULT_PAGE_SIZE } = props;
-    return (_jsx(CoreServiceList.Services, { children: ({ services: servicesList, isLoading, hasMore, loadMore }) => {
+    return (_jsx(CoreServiceList.Services, { children: ({ services: servicesList, isLoading, hasMore, loadMore, error }) => {
             const items = servicesList.map((service) => ({
                 ...service,
                 id: service._id,
             }));
-            return (_jsx(GenericList.Root, { items: items, loadMore: () => loadMore(pageSize), hasMore: hasMore, isLoading: isLoading, className: className, ref: ref, "data-testid": TestIds.serviceListRoot, variant: variant, children: children }));
+            return (_jsx(GenericList.Root, { items: items, loadMore: () => loadMore(pageSize), hasMore: hasMore, isLoading: isLoading, error: error, className: className, ref: ref, "data-testid": TestIds.serviceListRoot, variant: variant, children: children }));
         } }));
 });
 /**
- * Container for the services list with empty state support.
+ * Container for the services list with empty, loading, and error state support.
  * Wraps GenericList.Items. Follows List Container Level pattern.
  *
  * @component
  * @example
  * ```tsx
- * <ServiceList.Services emptyState={<div>No services found</div>}>
+ * <ServiceList.Services
+ *   emptyState={<div>No services found</div>}
+ *   loadingState={<div>Loading services...</div>}
+ *   errorState={<div>Failed to load services</div>}
+ * >
  *   <ServiceList.ServiceRepeater>
  *     <Service.Name />
  *     <Service.Price />
@@ -97,8 +101,8 @@ const RootContent = React.forwardRef((props, ref) => {
  * ```
  */
 export const Services = React.forwardRef((props, ref) => {
-    const { children, ...otherProps } = props;
-    return (_jsx(GenericList.Items, { ref: ref, "data-testid": TestIds.serviceListServices, ...otherProps, children: children }));
+    const { children, emptyState, loadingState, errorState, ...otherProps } = props;
+    return (_jsx(GenericList.Items, { ref: ref, "data-testid": TestIds.serviceListServices, emptyState: emptyState, loadingState: loadingState, errorState: errorState, ...otherProps, children: children }));
 });
 Services.displayName = 'ServiceList.Services';
 /**

package/cjs/dist/services/service/service.js

@@ -54,6 +54,8 @@ export const ServiceServiceDefinition = defineService('service');
  */
 export const ServiceService = implementService.withConfig()(ServiceServiceDefinition, ({ getService, config }) => {
     const signalsService = getService(SignalsServiceDefinition);
+    // Determine if we're in "from booking signal" mode (no service config provided)
+    const noExplicitService = !config.service && !config.serviceId && !config.serviceSlug;
     // Try to get BookingService (optional dependency for showcase mode)
     let bookingService = null;
     try {
@@ -63,9 +65,27 @@ export const ServiceService = implementService.withConfig()(ServiceServiceDefini
         // BookingService not available - showcase mode
         bookingService = null;
     }
-    // Initialize service signal - use empty service object if not provided
-    const initialService = config.service || {};
-    const serviceSignal = signalsService.signal(initialService);
+    // In "from booking signal" mode, BookingService must be available
+    if (noExplicitService && !bookingService) {
+        throw new Error('Service.Root requires either a service config (service, serviceId, or serviceSlug) or BookingService to be available');
+    }
+    // Initialize service signal
+    // In "from booking signal" mode, use a computed signal that reads from BookingService
+    let serviceSignal;
+    if (noExplicitService && bookingService) {
+        // Create a computed signal that reads from BookingService's first selected service
+        const computedServiceSignal = signalsService.computed(() => {
+            const selections = bookingService.serviceSelections.get();
+            return selections[0]?.service || null;
+        });
+        // Wrap computed signal as a Signal (read-only in practice for this mode)
+        serviceSignal = computedServiceSignal;
+    }
+    else {
+        // Standard mode: use provided service or empty object
+        const initialService = config.service || {};
+        serviceSignal = signalsService.signal(initialService);
+    }
     const isLoadingSignal = signalsService.signal(!!config.serviceId);
     const errorSignal = signalsService.signal(null);
     // Default appId to BOOKING_APP_ID if not provided

package/dist/react/core/service/Service.js

@@ -15,8 +15,14 @@ import { ServiceServiceDefinition, ServiceService, } from '../../../services/ser
  */
 function RootContent({ children, }) {
     const serviceService = useService(ServiceServiceDefinition);
+    const service = serviceService.serviceSignal.get();
     const selected = serviceService.selectedSignal.get();
     const bookable = serviceService.bookableSignal.get();
+    // In "from booking signal" mode, render null when no service is selected
+    // The signal will trigger a re-render when a service is selected
+    if (!service || !service._id) {
+        return null;
+    }
     if (typeof children === 'function') {
         return children({ selected, bookable });
     }

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

@@ -43,14 +43,32 @@ type ServiceRootWithSlug = ServiceRootBaseProps & {
     serviceId?: never;
     serviceSlug: string;
 };
+/**
+ * Props for Service.Root that reads from BookingService's selected service.
+ * When used without service config, the component reads from the booking signal.
+ * Requires BookingService to be available in the context.
+ */
+type ServiceRootFromBooking = ServiceRootBaseProps & {
+    service?: never;
+    serviceId?: never;
+    serviceSlug?: never;
+};
 /**
  * Props for Service.Root component.
- * Requires exactly one of: service, serviceId, or serviceSlug.
+ * Accepts one of:
+ * - service: Pre-loaded service object (SSR pattern)
+ * - serviceId: Service ID for dynamic loading
+ * - serviceSlug: Service slug for dynamic loading
+ * - No service config: Reads from BookingService's selected service
  */
-export type ServiceRootProps = ServiceRootWithService | ServiceRootWithId | ServiceRootWithSlug;
+export type ServiceRootProps = ServiceRootWithService | ServiceRootWithId | ServiceRootWithSlug | ServiceRootFromBooking;
 /**
  * Root component that provides service context to the entire app.
- * Requires exactly one of: service, serviceId, or serviceSlug.
+ * Can be used with:
+ * - service: Pre-loaded service object (SSR pattern)
+ * - serviceId: Service ID for dynamic loading
+ * - serviceSlug: Service slug for dynamic loading
+ * - No config: Reads from BookingService's selected service (requires BookingService)
  *
  * @order 1
  * @component
@@ -87,6 +105,17 @@ export type ServiceRootProps = ServiceRootWithService | ServiceRootWithId | Serv
  *     </Service.Root>
  *   );
  * }
+ *
+ * // Reading from BookingService's selected service
+ * // (requires Booking.Root parent context)
+ * function SelectedServiceDisplay() {
+ *   return (
+ *     <Service.Root>
+ *       <Service.Name />
+ *       <Service.Price />
+ *     </Service.Root>
+ *   );
+ * }
  * ```
  */
 export declare const Root: React.ForwardRefExoticComponent<ServiceRootProps & React.RefAttributes<HTMLElement>>;

package/dist/react/service/Service.js

@@ -49,7 +49,11 @@ var TestIds;
 })(TestIds || (TestIds = {}));
 /**
  * Root component that provides service context to the entire app.
- * Requires exactly one of: service, serviceId, or serviceSlug.
+ * Can be used with:
+ * - service: Pre-loaded service object (SSR pattern)
+ * - serviceId: Service ID for dynamic loading
+ * - serviceSlug: Service slug for dynamic loading
+ * - No config: Reads from BookingService's selected service (requires BookingService)
  *
  * @order 1
  * @component
@@ -86,11 +90,30 @@ var TestIds;
  *     </Service.Root>
  *   );
  * }
+ *
+ * // Reading from BookingService's selected service
+ * // (requires Booking.Root parent context)
+ * function SelectedServiceDisplay() {
+ *   return (
+ *     <Service.Root>
+ *       <Service.Name />
+ *       <Service.Price />
+ *     </Service.Root>
+ *   );
+ * }
  * ```
  */
 export const Root = React.forwardRef((props, ref) => {
     const { children, service, serviceId, serviceSlug, appId, asChild, className, ...attrs } = props;
-    return (_jsx(CoreService.Root, { serviceServiceConfig: { service, serviceId, serviceSlug, appId }, children: ({ selected, bookable }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceRoot, "data-selected": selected, "data-bookable": bookable, customElement: children, customElementProps: { selected, bookable }, ...attrs, children: children })) }));
+    // Build config - when no service config is provided, pass empty object
+    // to trigger "from booking signal" mode in ServiceService
+    const serviceServiceConfig = {
+        service,
+        serviceId,
+        serviceSlug,
+        appId,
+    };
+    return (_jsx(CoreService.Root, { serviceServiceConfig: serviceServiceConfig, children: ({ selected, bookable }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceRoot, "data-selected": selected, "data-bookable": bookable, customElement: children, customElementProps: { selected, bookable }, ...attrs, children: children })) }));
 });
 Root.displayName = 'Service.Root';
 /**

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

@@ -47,19 +47,28 @@ export declare const Root: React.ForwardRefExoticComponent<ServiceListRootProps
  */
 export interface ServicesProps {
     children: React.ReactNode;
+    /** Content to display when no services are available */
     emptyState?: React.ReactNode;
+    /** Content to display when loading and no services are available */
+    loadingState?: React.ReactNode;
+    /** Content to display when an error occurs and no services are available */
+    errorState?: React.ReactNode;
     infiniteScroll?: boolean;
     pageSize?: number;
     className?: string;
 }
 /**
- * Container for the services list with empty state support.
+ * Container for the services list with empty, loading, and error state support.
  * Wraps GenericList.Items. Follows List Container Level pattern.
  *
  * @component
  * @example
  * ```tsx
- * <ServiceList.Services emptyState={<div>No services found</div>}>
+ * <ServiceList.Services
+ *   emptyState={<div>No services found</div>}
+ *   loadingState={<div>Loading services...</div>}
+ *   errorState={<div>Failed to load services</div>}
+ * >
  *   <ServiceList.ServiceRepeater>
  *     <Service.Name />
  *     <Service.Price />

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

@@ -73,22 +73,26 @@ const DEFAULT_PAGE_SIZE = 100;
  */
 const RootContent = React.forwardRef((props, ref) => {
     const { children, className, variant, pageSize = DEFAULT_PAGE_SIZE } = props;
-    return (_jsx(CoreServiceList.Services, { children: ({ services: servicesList, isLoading, hasMore, loadMore }) => {
+    return (_jsx(CoreServiceList.Services, { children: ({ services: servicesList, isLoading, hasMore, loadMore, error }) => {
             const items = servicesList.map((service) => ({
                 ...service,
                 id: service._id,
             }));
-            return (_jsx(GenericList.Root, { items: items, loadMore: () => loadMore(pageSize), hasMore: hasMore, isLoading: isLoading, className: className, ref: ref, "data-testid": TestIds.serviceListRoot, variant: variant, children: children }));
+            return (_jsx(GenericList.Root, { items: items, loadMore: () => loadMore(pageSize), hasMore: hasMore, isLoading: isLoading, error: error, className: className, ref: ref, "data-testid": TestIds.serviceListRoot, variant: variant, children: children }));
         } }));
 });
 /**
- * Container for the services list with empty state support.
+ * Container for the services list with empty, loading, and error state support.
  * Wraps GenericList.Items. Follows List Container Level pattern.
  *
  * @component
  * @example
  * ```tsx
- * <ServiceList.Services emptyState={<div>No services found</div>}>
+ * <ServiceList.Services
+ *   emptyState={<div>No services found</div>}
+ *   loadingState={<div>Loading services...</div>}
+ *   errorState={<div>Failed to load services</div>}
+ * >
  *   <ServiceList.ServiceRepeater>
  *     <Service.Name />
  *     <Service.Price />
@@ -97,8 +101,8 @@ const RootContent = React.forwardRef((props, ref) => {
  * ```
  */
 export const Services = React.forwardRef((props, ref) => {
-    const { children, ...otherProps } = props;
-    return (_jsx(GenericList.Items, { ref: ref, "data-testid": TestIds.serviceListServices, ...otherProps, children: children }));
+    const { children, emptyState, loadingState, errorState, ...otherProps } = props;
+    return (_jsx(GenericList.Items, { ref: ref, "data-testid": TestIds.serviceListServices, emptyState: emptyState, loadingState: loadingState, errorState: errorState, ...otherProps, children: children }));
 });
 Services.displayName = 'ServiceList.Services';
 /**

package/dist/services/service/service.js

@@ -54,6 +54,8 @@ export const ServiceServiceDefinition = defineService('service');
  */
 export const ServiceService = implementService.withConfig()(ServiceServiceDefinition, ({ getService, config }) => {
     const signalsService = getService(SignalsServiceDefinition);
+    // Determine if we're in "from booking signal" mode (no service config provided)
+    const noExplicitService = !config.service && !config.serviceId && !config.serviceSlug;
     // Try to get BookingService (optional dependency for showcase mode)
     let bookingService = null;
     try {
@@ -63,9 +65,27 @@ export const ServiceService = implementService.withConfig()(ServiceServiceDefini
         // BookingService not available - showcase mode
         bookingService = null;
     }
-    // Initialize service signal - use empty service object if not provided
-    const initialService = config.service || {};
-    const serviceSignal = signalsService.signal(initialService);
+    // In "from booking signal" mode, BookingService must be available
+    if (noExplicitService && !bookingService) {
+        throw new Error('Service.Root requires either a service config (service, serviceId, or serviceSlug) or BookingService to be available');
+    }
+    // Initialize service signal
+    // In "from booking signal" mode, use a computed signal that reads from BookingService
+    let serviceSignal;
+    if (noExplicitService && bookingService) {
+        // Create a computed signal that reads from BookingService's first selected service
+        const computedServiceSignal = signalsService.computed(() => {
+            const selections = bookingService.serviceSelections.get();
+            return selections[0]?.service || null;
+        });
+        // Wrap computed signal as a Signal (read-only in practice for this mode)
+        serviceSignal = computedServiceSignal;
+    }
+    else {
+        // Standard mode: use provided service or empty object
+        const initialService = config.service || {};
+        serviceSignal = signalsService.signal(initialService);
+    }
     const isLoadingSignal = signalsService.signal(!!config.serviceId);
     const errorSignal = signalsService.signal(null);
     // Default appId to BOOKING_APP_ID if not provided

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-bookings",
-  "version": "0.0.46",
+  "version": "0.0.47",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -72,5 +72,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "e188c85a08b0f3efd04be3127dd88996b016941dcd522265f9a7de0b"
+  "falconPackageHash": "b4efe3be968a8e8d6806b0e818d5e30742584c3d834296262bc1572f"
 }