@wix/headless-bookings 0.0.42 → 0.0.44

package/cjs/dist/react/location/LocationList.d.ts

@@ -0,0 +1,98 @@
+/**
+ * LocationList - High-level component for displaying locations list
+ * Follows the pattern from ServiceList.tsx
+ *
+ * @module React/LocationList
+ */
+import React from 'react';
+import { GenericListRepeaterProps, type ListVariant } from '@wix/headless-components/react';
+import { type AsChildChildren } from '@wix/headless-utils/react';
+import type { LocationListServiceConfig } from '../../services/location-list/location-list.js';
+import { type DisplayLocation } from '../../services/location-list/location-list.def.js';
+/**
+ * Props for the LocationList root component
+ */
+export interface RootProps {
+    children: React.ReactNode;
+    locationListConfig?: LocationListServiceConfig;
+    className?: string;
+    variant?: ListVariant;
+}
+/**
+ * Root component that provides the LocationList service context for rendering locations lists.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { LocationList, Location } from '@wix/bookings/react';
+ *
+ * function LocationsPage({ locationListConfig }) {
+ *   return (
+ *     <LocationList.Root locationListConfig={locationListConfig}>
+ *       <LocationList.Locations emptyState={<div>No locations available</div>}>
+ *         <LocationList.LocationRepeater>
+ *           <Location.Name />
+ *           <Location.Address />
+ *         </LocationList.LocationRepeater>
+ *       </LocationList.Locations>
+ *     </LocationList.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for LocationList.Locations component
+ */
+export interface LocationsProps {
+    children: React.ReactNode;
+    emptyState?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Container for the locations list with empty state support.
+ * Wraps GenericList.Items internally (no separate Items export).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <LocationList.Locations emptyState={<div>No locations available</div>}>
+ *   <LocationList.LocationRepeater>
+ *     <Location.Name />
+ *     <Location.Address />
+ *   </LocationList.LocationRepeater>
+ * </LocationList.Locations>
+ * ```
+ */
+export declare const Locations: React.ForwardRefExoticComponent<LocationsProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for LocationList.LocationRepeater component
+ */
+export type LocationRepeaterProps = GenericListRepeaterProps<DisplayLocation>;
+export declare const LocationRepeater: React.ForwardRefExoticComponent<LocationRepeaterProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for LocationList.Totals component
+ */
+export interface TotalsProps {
+    asChild?: boolean;
+    children?: React.ReactNode | AsChildChildren<{
+        count: number;
+        hasLocations: boolean;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the total count of locations.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <LocationList.Totals />
+ *
+ * // With asChild
+ * <LocationList.Totals asChild>
+ *   {({ count }) => <span>{count} locations available</span>}
+ * </LocationList.Totals>
+ * ```
+ */
+export declare const Totals: React.ForwardRefExoticComponent<TotalsProps & React.RefAttributes<HTMLElement>>;

package/cjs/dist/react/location/LocationList.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * LocationList - High-level component for displaying locations list
+ * Follows the pattern from ServiceList.tsx
+ *
+ * @module React/LocationList
+ */
+import React from 'react';
+import { GenericList, } from '@wix/headless-components/react';
+import { AsChildSlot } from '@wix/headless-utils/react';
+import * as CoreLocationList from '../core/location-list/LocationList.js';
+import * as Location from './Location.js';
+// ============================================================================
+// TestIds
+// ============================================================================
+var TestIds;
+(function (TestIds) {
+    TestIds["locationListRoot"] = "location-list-root";
+    TestIds["locationListLocations"] = "location-list-locations";
+    TestIds["locationListLocation"] = "location-list-location";
+})(TestIds || (TestIds = {}));
+/**
+ * Root component that provides the LocationList service context for rendering locations lists.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { LocationList, Location } from '@wix/bookings/react';
+ *
+ * function LocationsPage({ locationListConfig }) {
+ *   return (
+ *     <LocationList.Root locationListConfig={locationListConfig}>
+ *       <LocationList.Locations emptyState={<div>No locations available</div>}>
+ *         <LocationList.LocationRepeater>
+ *           <Location.Name />
+ *           <Location.Address />
+ *         </LocationList.LocationRepeater>
+ *       </LocationList.Locations>
+ *     </LocationList.Root>
+ *   );
+ * }
+ * ```
+ */
+export const Root = React.forwardRef((props, ref) => {
+    const { children, locationListConfig, className, variant } = props;
+    const config = locationListConfig || {
+        locations: [],
+    };
+    return (_jsx(CoreLocationList.Root, { locationListServiceConfig: config, children: _jsx(RootContent, { className: className, ref: ref, variant: variant, children: children }) }));
+});
+Root.displayName = 'LocationList.Root';
+/**
+ * Internal component to handle the Root content with service access
+ */
+const RootContent = React.forwardRef((props, ref) => {
+    const { children, className, variant } = props;
+    return (_jsx(CoreLocationList.Locations, { children: ({ displayLocations, isLoading }) => {
+            // Items already have id from DisplayLocation
+            return (_jsx(GenericList.Root, { items: displayLocations, hasMore: false, isLoading: isLoading, className: className, ref: ref, "data-testid": TestIds.locationListRoot, variant: variant, children: children }));
+        } }));
+});
+RootContent.displayName = 'LocationList.RootContent';
+/**
+ * Container for the locations list with empty state support.
+ * Wraps GenericList.Items internally (no separate Items export).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <LocationList.Locations emptyState={<div>No locations available</div>}>
+ *   <LocationList.LocationRepeater>
+ *     <Location.Name />
+ *     <Location.Address />
+ *   </LocationList.LocationRepeater>
+ * </LocationList.Locations>
+ * ```
+ */
+export const Locations = React.forwardRef((props, ref) => {
+    const { children, ...otherProps } = props;
+    return (_jsx(GenericList.Items, { ref: ref, "data-testid": TestIds.locationListLocations, ...otherProps, children: children }));
+});
+Locations.displayName = 'LocationList.Locations';
+export const LocationRepeater = React.forwardRef((props, ref) => {
+    const { children } = props;
+    // Custom itemWrapper that wraps each item in Location.Root
+    const locationItemWrapper = ({ item: displayLocation, children: itemChildren, }) => {
+        // Convert DisplayLocation to LocationInput
+        // If location is null, create a SyntheticLocation
+        const location = displayLocation.location ?? {
+            locationType: displayLocation.type,
+            synthetic: true,
+            id: displayLocation.id,
+        };
+        return (_jsx(Location.Root, { location: location, "data-testid": TestIds.locationListLocation, "data-location-id": displayLocation.id, "data-location-type": displayLocation.type, "data-item-id": displayLocation.id, children: itemChildren }, displayLocation.id));
+    };
+    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: locationItemWrapper, children: children }));
+});
+LocationRepeater.displayName = 'LocationList.LocationRepeater';
+/**
+ * Displays the total count of locations.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <LocationList.Totals />
+ *
+ * // With asChild
+ * <LocationList.Totals asChild>
+ *   {({ count }) => <span>{count} locations available</span>}
+ * </LocationList.Totals>
+ * ```
+ */
+export const Totals = React.forwardRef((props, ref) => {
+    const { asChild, children, className, ...attrs } = props;
+    return (_jsx(CoreLocationList.Locations, { children: ({ displayLocations, hasLocations }) => {
+            const count = displayLocations.length;
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, customElementProps: { count, hasLocations }, ...attrs, children: _jsx("span", { children: count }) }));
+        } }));
+});
+Totals.displayName = 'LocationList.Totals';

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

@@ -8,20 +8,49 @@ import { MoneyData } from '@wix/headless-components/react';
 import { type Service, type Payment } from '@wix/auto_sdk_bookings_services';
 import * as ServiceMediaModule from './ServiceMedia.js';
 /**
- * Props for Service.Root component
+ * Base props shared by all Service.Root variants
  */
-export interface ServiceRootProps {
+interface ServiceRootBaseProps {
     children?: React.ReactNode | AsChildChildren<{
         selected: boolean;
         bookable: boolean;
     }>;
-    service: Service;
     appId?: string;
     asChild?: boolean;
     className?: string;
 }
+/**
+ * Props for Service.Root with pre-loaded service object (SSR pattern)
+ */
+type ServiceRootWithService = ServiceRootBaseProps & {
+    service: Service;
+    serviceId?: never;
+    serviceSlug?: never;
+};
+/**
+ * Props for Service.Root with dynamic loading by service ID
+ */
+type ServiceRootWithId = ServiceRootBaseProps & {
+    service?: never;
+    serviceId: string;
+    serviceSlug?: never;
+};
+/**
+ * Props for Service.Root with dynamic loading by service slug
+ */
+type ServiceRootWithSlug = ServiceRootBaseProps & {
+    service?: never;
+    serviceId?: never;
+    serviceSlug: string;
+};
+/**
+ * Props for Service.Root component.
+ * Requires exactly one of: service, serviceId, or serviceSlug.
+ */
+export type ServiceRootProps = ServiceRootWithService | ServiceRootWithId | ServiceRootWithSlug;
 /**
  * Root component that provides service context to the entire app.
+ * Requires exactly one of: service, serviceId, or serviceSlug.
  *
  * @order 1
  * @component
@@ -29,6 +58,7 @@ export interface ServiceRootProps {
  * ```tsx
  * import { Service } from '@wix/bookings/components';
  *
+ * // With pre-loaded service object (SSR pattern)
  * function ServicePage({ service }) {
  *   return (
  *     <Service.Root service={service}>
@@ -37,6 +67,26 @@ export interface ServiceRootProps {
  *     </Service.Root>
  *   );
  * }
+ *
+ * // With dynamic loading by serviceId
+ * function ServicePageById({ serviceId }) {
+ *   return (
+ *     <Service.Root serviceId={serviceId}>
+ *       <Service.Name />
+ *       <Service.Description />
+ *     </Service.Root>
+ *   );
+ * }
+ *
+ * // With dynamic loading by serviceSlug
+ * function ServicePageBySlug({ slug }) {
+ *   return (
+ *     <Service.Root serviceSlug={slug}>
+ *       <Service.Name />
+ *       <Service.Description />
+ *     </Service.Root>
+ *   );
+ * }
  * ```
  */
 export declare const Root: React.ForwardRefExoticComponent<ServiceRootProps & React.RefAttributes<HTMLElement>>;
@@ -343,6 +393,7 @@ export interface LocationsProps {
  * Container for service locations list (Container Level).
  * Follows the 3-level List/Options/Repeater pattern.
  * Provides context and doesn't render when there are no locations.
+ * Internally uses LocationList.Root for consistent location handling.
  *
  * @component
  * @example
@@ -351,14 +402,8 @@ export interface LocationsProps {
  * <Service.Locations>
  *   <Service.Locations.List emptyState={<div>No locations available</div>}>
  *     <Service.Locations.LocationRepeater>
- *       {({ location }) => (
- *         <div>
- *           <span>{location.name}</span>
- *           <Address.Root address={location.address}>
- *             <Address.Formatted />
- *           </Address.Root>
- *         </div>
- *       )}
+ *       <Location.Name />
+ *       <Location.Address />
  *     </Service.Locations.LocationRepeater>
  *   </Service.Locations.List>
  * </Service.Locations>
@@ -368,7 +413,7 @@ export interface LocationsProps {
  *   <ul className="locations-list">
  *     <Service.Locations.List>
  *       <Service.Locations.LocationRepeater>
- *         {({ location }) => <li>{location.name}</li>}
+ *         <li><Location.Name /></li>
  *       </Service.Locations.LocationRepeater>
  *     </Service.Locations.List>
  *   </ul>
@@ -387,6 +432,7 @@ export interface LocationsListProps {
 /**
  * List container for locations with empty state support (List Container Level).
  * Renders emptyState when no locations, otherwise renders children.
+ * Internally delegates to LocationList.Locations.
  *
  * @component
  * @example
@@ -412,32 +458,29 @@ export interface LocationRepeaterRenderProps {
  * Props for Service Locations.LocationRepeater component
  */
 export interface LocationRepeaterProps {
-    children?: React.ReactNode | ((props: LocationRepeaterRenderProps) => React.ReactNode);
-    asChild?: boolean;
+    children?: React.ReactNode;
 }
 /**
  * Repeater component that renders Location.Root for each location.
- * Supports asChild pattern for custom rendering.
+ * Internally delegates to LocationList.LocationRepeater.
+ * Children are rendered inside each Location.Root context.
  *
  * @component
  * @example
  * ```tsx
  * // Standard usage - renders Location.Root for each location
  * <Service.Locations.LocationRepeater>
- *   <span className="location-badge">📍</span>
+ *   <Location.Name />
+ *   <Location.Address />
  * </Service.Locations.LocationRepeater>
  *
- * // AsChild usage with custom numbered list
- * <Service.Locations.LocationRepeater asChild>
- *   {({ items, itemWrapper }) => (
- *     <ol>
- *       {items.map((item, index) => (
- *         <li key={item.id}>
- *           {index + 1}. {itemWrapper({ item, index, children: null })}
- *         </li>
- *       ))}
- *     </ol>
- *   )}
+ * // With custom styling
+ * <Service.Locations.LocationRepeater>
+ *   <div className="location-card">
+ *     <Location.Name className="font-bold" />
+ *     <Location.Address />
+ *     <Location.Phone />
+ *   </div>
  * </Service.Locations.LocationRepeater>
  * ```
  */

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

@@ -8,7 +8,9 @@ import * as CoreService from '../core/service/Service.js';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import { Money, GenericList } from '@wix/headless-components/react';
 import { RateType, } from '@wix/auto_sdk_bookings_services';
-import * as Location from '../location/Location.js';
+import * as LocationList from '../location/LocationList.js';
+// Note: Location components are used inside LocationList.LocationRepeater
+// Users should import { Location } from '@wix/headless-bookings/react' for Location.Name, Location.Address, etc.
 import * as ServiceMediaModule from './ServiceMedia.js';
 var TestIds;
 (function (TestIds) {
@@ -47,6 +49,7 @@ var TestIds;
 })(TestIds || (TestIds = {}));
 /**
  * Root component that provides service context to the entire app.
+ * Requires exactly one of: service, serviceId, or serviceSlug.
  *
  * @order 1
  * @component
@@ -54,6 +57,7 @@ var TestIds;
  * ```tsx
  * import { Service } from '@wix/bookings/components';
  *
+ * // With pre-loaded service object (SSR pattern)
  * function ServicePage({ service }) {
  *   return (
  *     <Service.Root service={service}>
@@ -62,11 +66,31 @@ var TestIds;
  *     </Service.Root>
  *   );
  * }
+ *
+ * // With dynamic loading by serviceId
+ * function ServicePageById({ serviceId }) {
+ *   return (
+ *     <Service.Root serviceId={serviceId}>
+ *       <Service.Name />
+ *       <Service.Description />
+ *     </Service.Root>
+ *   );
+ * }
+ *
+ * // With dynamic loading by serviceSlug
+ * function ServicePageBySlug({ slug }) {
+ *   return (
+ *     <Service.Root serviceSlug={slug}>
+ *       <Service.Name />
+ *       <Service.Description />
+ *     </Service.Root>
+ *   );
+ * }
  * ```
  */
 export const Root = React.forwardRef((props, ref) => {
-    const { children, service, appId, asChild, className, ...attrs } = props;
-    return (_jsx(CoreService.Root, { serviceServiceConfig: { service, 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 })) }));
+    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 })) }));
 });
 Root.displayName = 'Service.Root';
 /**
@@ -331,6 +355,7 @@ Category.displayName = 'Service.Category';
  * Container for service locations list (Container Level).
  * Follows the 3-level List/Options/Repeater pattern.
  * Provides context and doesn't render when there are no locations.
+ * Internally uses LocationList.Root for consistent location handling.
  *
  * @component
  * @example
@@ -339,14 +364,8 @@ Category.displayName = 'Service.Category';
  * <Service.Locations>
  *   <Service.Locations.List emptyState={<div>No locations available</div>}>
  *     <Service.Locations.LocationRepeater>
- *       {({ location }) => (
- *         <div>
- *           <span>{location.name}</span>
- *           <Address.Root address={location.address}>
- *             <Address.Formatted />
- *           </Address.Root>
- *         </div>
- *       )}
+ *       <Location.Name />
+ *       <Location.Address />
  *     </Service.Locations.LocationRepeater>
  *   </Service.Locations.List>
  * </Service.Locations>
@@ -356,7 +375,7 @@ Category.displayName = 'Service.Category';
  *   <ul className="locations-list">
  *     <Service.Locations.List>
  *       <Service.Locations.LocationRepeater>
- *         {({ location }) => <li>{location.name}</li>}
+ *         <li><Location.Name /></li>
  *       </Service.Locations.LocationRepeater>
  *     </Service.Locations.List>
  *   </ul>
@@ -370,18 +389,14 @@ const LocationsBase = React.forwardRef((props, ref) => {
             if (!locations || locations.length === 0) {
                 return null;
             }
-            // Map locations to include required id field for GenericList
-            const items = locations.map((location, index) => ({
-                ...location,
-                id: location._id || String(index),
-            }));
-            return (_jsx(GenericList.Root, { items: items, children: _jsx(AsChildSlot, { ...attributes, ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceLocations, customElement: children, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
+            return (_jsx(LocationList.Root, { locationListConfig: { locations }, className: className, ref: ref, children: _jsx(AsChildSlot, { ...attributes, asChild: asChild, className: className, "data-testid": TestIds.serviceLocations, customElement: children, children: _jsx("div", { children: children }) }) }));
         } }));
 });
 LocationsBase.displayName = 'Service.Locations';
 /**
  * List container for locations with empty state support (List Container Level).
  * Renders emptyState when no locations, otherwise renders children.
+ * Internally delegates to LocationList.Locations.
  *
  * @component
  * @example
@@ -393,42 +408,36 @@ LocationsBase.displayName = 'Service.Locations';
  */
 export const LocationsList = React.forwardRef((props, ref) => {
     const { children, emptyState, className, ...otherProps } = props;
-    return (_jsx(GenericList.Items, { ref: ref, emptyState: emptyState, className: className, ...otherProps, children: children }));
+    return (_jsx(LocationList.Locations, { ref: ref, emptyState: emptyState, className: className, ...otherProps, children: children }));
 });
 LocationsList.displayName = 'Service.Locations.List';
 /**
  * Repeater component that renders Location.Root for each location.
- * Supports asChild pattern for custom rendering.
+ * Internally delegates to LocationList.LocationRepeater.
+ * Children are rendered inside each Location.Root context.
  *
  * @component
  * @example
  * ```tsx
  * // Standard usage - renders Location.Root for each location
  * <Service.Locations.LocationRepeater>
- *   <span className="location-badge">📍</span>
+ *   <Location.Name />
+ *   <Location.Address />
  * </Service.Locations.LocationRepeater>
  *
- * // AsChild usage with custom numbered list
- * <Service.Locations.LocationRepeater asChild>
- *   {({ items, itemWrapper }) => (
- *     <ol>
- *       {items.map((item, index) => (
- *         <li key={item.id}>
- *           {index + 1}. {itemWrapper({ item, index, children: null })}
- *         </li>
- *       ))}
- *     </ol>
- *   )}
+ * // With custom styling
+ * <Service.Locations.LocationRepeater>
+ *   <div className="location-card">
+ *     <Location.Name className="font-bold" />
+ *     <Location.Address />
+ *     <Location.Phone />
+ *   </div>
  * </Service.Locations.LocationRepeater>
  * ```
  */
 export const LocationRepeater = React.forwardRef((props, ref) => {
-    const { children, asChild } = props;
-    // Custom itemWrapper that renders Location.Root for each location
-    const locationItemWrapper = ({ item: location, children: itemChildren, }) => {
-        return (_jsx(Location.Root, { location: location, "data-testid": TestIds.serviceLocationRepeater, children: itemChildren || undefined }, location.id));
-    };
-    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: locationItemWrapper, asChild: asChild, children: children }));
+    const { children } = props;
+    return (_jsx(LocationList.LocationRepeater, { ref: ref, children: children }));
 });
 LocationRepeater.displayName = 'Service.Locations.LocationRepeater';
 /**
@@ -613,6 +622,7 @@ export var Actions;
                         selected,
                         bookable,
                         requiresAvailability,
+                        service: rawService,
                     }, children: _jsx("button", { onClick: handleClick, disabled: !bookable, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, children: label }) }));
             } }));
     });

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

@@ -9,3 +9,4 @@ export { ServiceListService, ServiceListServiceDefinition, type ServiceListServi
 export { executeBookAction, canBook, buildBookingRequest, buildCheckoutRequest, type CanBookParams, type BookResult, type BookingError, type BookActionParams, type BookChildProps, type BookProps, type BuildCheckoutParams, } from './booking/book-action/index.js';
 export { BookingFormService, BookingFormServiceDefinition, type BookingFormServiceAPI, type BookingFormServiceConfig, type BookingFormServiceInternalAPI, type ValidationResult, } from './booking-form/booking-form.js';
 export { PaymentService, PaymentServiceDefinition, type PaymentServiceAPI, type PaymentServiceConfig, type PaymentDetails, type SlotService, type LineItemAdditionalInfo, loadPaymentConfig, type SuccessPaymentConfigResult, type ErrorPaymentConfigResult, } from './payment/payment.js';
+export { LocationListService, LocationListServiceDefinition, LocationType, loadLocationListServiceInitialData, locationListServiceBinding, type LocationListServiceAPI, type LocationListServiceConfig, type LocationListActions, type LocationData, type DisplayLocation, type LoadLocationListServiceResult, } from './location-list/location-list.js';

package/cjs/dist/services/index.js

@@ -9,3 +9,4 @@ export { ServiceListService, ServiceListServiceDefinition, loadServiceListServic
 export { executeBookAction, canBook, buildBookingRequest, buildCheckoutRequest, } from './booking/book-action/index.js';
 export { BookingFormService, BookingFormServiceDefinition, } from './booking-form/booking-form.js';
 export { PaymentService, PaymentServiceDefinition, loadPaymentConfig, } from './payment/payment.js';
+export { LocationListService, LocationListServiceDefinition, LocationType, loadLocationListServiceInitialData, locationListServiceBinding, } from './location-list/location-list.js';