@wix/headless-bookings 0.0.10 → 0.0.12

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

@@ -13,8 +13,17 @@ import { ServiceServiceDefinition, ServiceService, } from '../../../services/ser
  * </Service.Root>
  * ```
  */
+function RootContent({ children, }) {
+    const serviceService = useService(ServiceServiceDefinition);
+    const selected = serviceService.selectedSignal.get();
+    const bookable = serviceService.bookableSignal.get();
+    if (typeof children === 'function') {
+        return children({ selected, bookable });
+    }
+    return children;
+}
 export function Root(props) {
-    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ServiceServiceDefinition, ServiceService, props.serviceServiceConfig), children: props.children }));
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ServiceServiceDefinition, ServiceService, props.serviceServiceConfig), children: _jsx(RootContent, { children: props.children }) }));
 }
 /**
  * Core component that provides access to full service data via render props.
@@ -31,23 +40,27 @@ export function Root(props) {
  */
 export function Service(props) {
     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();
     return props.children({ service, isLoading, error });
 }
 /**
  * Core component that provides access to service catalog info via render props.
- * Includes name and description for static catalog display.
+ * Includes name, description, tagline, duration, type, category, locations, staff, media, and price.
  *
  * @component
  * @example
  * ```tsx
  * <Service.Info>
- *   {({ name, description }) => (
+ *   {({ name, description, tagline, duration, type, category, locations, staff, media, price }) => (
  *     <div>
  *       <h1>{name}</h1>
  *       <p>{description}</p>
+ *       {tagline && <p>{tagline}</p>}
+ *       {duration && <p>Duration: {duration} minutes</p>}
+ *       {type && <p>Type: {type}</p>}
+ *       {category && <p>Category: {category.name}</p>}
  *     </div>
  *   )}
  * </Service.Info>
@@ -55,12 +68,99 @@ export function Service(props) {
  */
 export function Info(props) {
     const serviceService = useService(ServiceServiceDefinition);
-    const service = serviceService.service.get();
+    const service = serviceService.serviceSignal.get();
+    const selected = serviceService.selectedSignal.get();
+    // Extract price from service.payment for Info component
+    const payment = service.payment;
+    let priceInfo = undefined;
+    if (payment?.rateType === 'FIXED' && payment.fixed?.price) {
+        const priceValue = payment.fixed.price.value;
+        const currency = payment.fixed.price.currency || 'USD';
+        priceInfo = {
+            amount: priceValue || undefined,
+            currency,
+        };
+    }
+    // Extract duration from schedule.availabilityConstraints.sessionDurations
+    // Use the first duration if multiple are available
+    const duration = service.schedule?.availabilityConstraints?.sessionDurations?.[0];
+    // Get staff members from staffMemberDetails.staffMembers
+    // (available when using conditionalFields: ['STAFF_MEMBER_DETAILS'] in queryServices)
+    const staff = service.staffMembers?.map((member) => ({
+        _id: member.staffMemberId,
+        name: member.name || undefined,
+    })) || [];
+    // Convert mainMedia to WixMediaImage format
+    // Handle both snake_case (main_media) and camelCase (mainMedia) from API
+    // Handle both string and object formats for image
+    const serviceMedia = service.media;
+    const mainMedia = {
+        image: serviceMedia?.mainMedia?.image,
+    };
+    // Convert coverMedia to WixMediaImage format
+    // Handle both snake_case (cover_media) and camelCase (coverMedia) from API
+    // Handle both string and object formats for image
+    const coverMedia = {
+        image: serviceMedia?.coverMedia?.image,
+    };
+    // Convert media items to MediaGallery format
+    // Handle both string and object formats for image
+    const mediaItems = service.media?.items?.map((item) => {
+        return {
+            image: item.image,
+        };
+    }) || [];
+    // Extract default capacity directly from service (convert null to undefined)
+    const defaultCapacity = service.defaultCapacity ?? undefined;
     return props.children({
         name: service.name || '',
         description: service.description || '',
+        tagline: service.tagLine || undefined,
+        duration: duration,
+        type: service.type,
+        category: service.category
+            ? {
+                name: service.category.name || undefined,
+                _id: service.category._id || undefined,
+            }
+            : undefined,
+        locations: service.locations,
+        staff: staff,
+        mainMedia: mainMedia,
+        coverMedia: coverMedia,
+        mediaItems: mediaItems.length > 0 ? mediaItems : undefined,
+        price: priceInfo,
+        defaultCapacity: defaultCapacity,
+        selected,
     });
 }
+/**
+ * Core component that provides access to service price via render props.
+ * Returns comprehensive pricing data including money, rate type, and service capabilities.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Service.Price>
+ *   {({ money, rateType, minPrice, maxPrice, priceDescription, hasAddOns, hasPricingPlans }) => (
+ *     rateType === 'FIXED' && money ? (
+ *       <Money money={money} />
+ *     ) : rateType === 'VARIED' && minPrice && maxPrice ? (
+ *       <span><Money money={minPrice} /> - <Money money={maxPrice} /></span>
+ *     ) : rateType === 'CUSTOM' && priceDescription ? (
+ *       <span>{priceDescription}</span>
+ *     ) : rateType === 'NO_FEE' ? (
+ *       <span>Free</span>
+ *     ) : null
+ *   )}
+ * </Service.Price>
+ * ```
+ */
+export function Price(props) {
+    const serviceService = useService(ServiceServiceDefinition);
+    const paymentData = serviceService.paymentDataSignal.get();
+    return props.children(paymentData);
+}
 /**
  * Core component that provides booking selection actions via render props.
  *
@@ -68,7 +168,7 @@ export function Info(props) {
  * @example
  * ```tsx
  * <Service.Actions>
- *   {({ select, add, remove, service }) => (
+ *   {({ select, add, remove, rawService, requiresAvailability }) => (
  *     <div>
  *       <button onClick={select}>Select</button>
  *       <button onClick={add}>Add</button>
@@ -80,11 +180,109 @@ export function Info(props) {
  */
 export function Actions(props) {
     const serviceService = useService(ServiceServiceDefinition);
-    const service = serviceService.service.get();
+    const rawService = serviceService.serviceSignal.get();
+    const bookable = serviceService.bookableSignal.get();
+    const selected = serviceService.selectedSignal.get();
+    const requiresAvailability = serviceService.requiresAvailabilitySignal.get();
+    return props.children({
+        select: serviceService.actions.select,
+        add: serviceService.actions.add,
+        remove: serviceService.actions.remove,
+        rawService,
+        bookable,
+        selected,
+        requiresAvailability,
+    });
+}
+/**
+ * Core component that provides access to service booking policy via render props.
+ * Computes all enabled flags and values from the booking policy.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Service.Policy>
+ *   {({ bookingPolicy, cancellationPolicyEnabled, latestCancellationInMinutes }) => (
+ *     cancellationPolicyEnabled ? (
+ *       <div>Cancel up to {latestCancellationInMinutes} minutes before</div>
+ *     ) : null
+ *   )}
+ * </Service.Policy>
+ * ```
+ */
+export function Policy(props) {
+    const serviceService = useService(ServiceServiceDefinition);
+    const service = serviceService.serviceSignal.get();
+    const bookingPolicy = service.bookingPolicy || null;
+    // Compute all flags here (not in headless components)
+    const cancellationPolicy = bookingPolicy?.cancellationPolicy;
+    const cancellationPolicyEnabled = cancellationPolicy?.enabled ?? false;
+    const limitLatestCancellationEnabled = cancellationPolicy?.limitLatestCancellation ?? false;
+    const latestCancellationInMinutes = cancellationPolicy?.latestCancellationInMinutes;
+    const lateBookingPolicy = bookingPolicy?.limitLateBookingPolicy;
+    const latestBookingPolicyEnabled = lateBookingPolicy?.enabled ?? false;
+    const latestBookingInMinutes = lateBookingPolicy?.latestBookingInMinutes;
+    const earlyBookingPolicy = bookingPolicy?.limitEarlyBookingPolicy;
+    const earliestBookingPolicyEnabled = earlyBookingPolicy?.enabled ?? false;
+    const earliestBookingInMinutes = earlyBookingPolicy?.earliestBookingInMinutes;
+    const reschedulePolicy = bookingPolicy?.reschedulePolicy;
+    const reschedulePolicyEnabled = reschedulePolicy?.enabled ?? false;
+    const limitLatestRescheduleEnabled = reschedulePolicy?.limitLatestReschedule ?? false;
+    const latestRescheduleInMinutes = reschedulePolicy?.latestRescheduleInMinutes;
+    const waitlistPolicy = bookingPolicy?.waitlistPolicy;
+    const waitlistPolicyEnabled = waitlistPolicy?.enabled ?? false;
+    const waitlistCapacity = waitlistPolicy?.capacity;
+    const bookAfterStartPolicy = bookingPolicy?.bookAfterStartPolicy;
+    const bookAfterStartEnabled = bookAfterStartPolicy?.enabled ?? false;
+    const participantsPolicy = bookingPolicy?.participantsPolicy;
+    const maxParticipantsPerBooking = participantsPolicy?.maxParticipantsPerBooking;
+    return props.children({
+        bookingPolicy,
+        cancellationPolicyEnabled,
+        limitLatestCancellationEnabled,
+        latestCancellationInMinutes,
+        latestBookingPolicyEnabled,
+        latestBookingInMinutes,
+        earliestBookingPolicyEnabled,
+        earliestBookingInMinutes,
+        reschedulePolicyEnabled,
+        limitLatestRescheduleEnabled,
+        latestRescheduleInMinutes,
+        waitlistPolicyEnabled,
+        waitlistCapacity,
+        bookAfterStartEnabled,
+        maxParticipantsPerBooking,
+    });
+}
+/**
+ * Core component that provides access to service schedule via render props.
+ * Uses the SDK's Schedule type directly. Only renders for CLASS or COURSE service types.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Service.Schedule>
+ *   {({ schedule, isClassOrCourse }) => (
+ *     schedule && isClassOrCourse ? (
+ *       <div>
+ *         {schedule.firstSessionStart && (
+ *           <span>Starts: {new Date(schedule.firstSessionStart).toLocaleDateString()}</span>
+ *         )}
+ *         {schedule.lastSessionEnd && (
+ *           <span>Ends: {new Date(schedule.lastSessionEnd).toLocaleDateString()}</span>
+ *         )}
+ *       </div>
+ *     ) : null
+ *   )}
+ * </Service.Schedule>
+ * ```
+ */
+export function Schedule(props) {
+    const serviceService = useService(ServiceServiceDefinition);
+    const service = serviceService.serviceSignal.get();
+    const isClassOrCourse = service.type === 'CLASS' || service.type === 'COURSE';
     return props.children({
-        select: serviceService.select,
-        add: serviceService.add,
-        remove: serviceService.remove,
-        service,
+        schedule: service.schedule || null,
+        isClassOrCourse,
     });
 }

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

@@ -0,0 +1,75 @@
+/**
+ * Core ServiceList Components
+ * Provides low-level access to ServiceListService via render props
+ */
+import React from 'react';
+import { type ServiceListServiceConfig, type QueryOptions } from '../../../services/service-list/service-list.js';
+import type { services } from '@wix/bookings';
+import type { PagingMetadata } from '../../../api/query-services/index.js';
+/**
+ * Props for ServiceList.Root component
+ */
+export interface RootProps {
+    children: React.ReactNode;
+    serviceListConfig: ServiceListServiceConfig;
+}
+/**
+ * Root component that provides ServiceList service context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceList.Root serviceListConfig={{ services: myServices }}>
+ *   {children}
+ * </ServiceList.Root>
+ * ```
+ */
+export declare function Root(props: RootProps): React.ReactNode;
+/**
+ * Props for Services render prop component
+ */
+export interface ServicesProps {
+    /** Render function that receives services list and metadata */
+    children: (props: ServicesRenderProps) => React.ReactNode;
+}
+/**
+ * Render props for Services component
+ */
+export interface ServicesRenderProps {
+    /** Array of services */
+    services: services.Service[];
+    /** Whether services are currently loading */
+    isLoading: boolean;
+    /** Error message, or null if no error */
+    error: string | null;
+    /** Current query options (appId, filters, sort) */
+    queryOptions: QueryOptions;
+    /** Pagination metadata (limit, offset, count, hasNext) */
+    pagingMetadata: PagingMetadata;
+}
+/**
+ * Component that provides services list data through render props.
+ * Exposes services, loading state, error, query options, and pagination metadata (including hasNext flag).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceList.Services>
+ *   {({ services, isLoading, error, pagingMetadata }) => {
+ *     if (isLoading) return <div>Loading...</div>;
+ *     if (error) return <div>Error: {error}</div>;
+ *     return (
+ *       <div>
+ *         {services.map(service => (
+ *           <div key={service._id}>{service.name}</div>
+ *         ))}
+ *         {pagingMetadata.hasNext && (
+ *           <button>Load More Services</button>
+ *         )}
+ *       </div>
+ *     );
+ *   }}
+ * </ServiceList.Services>
+ * ```
+ */
+export declare function Services(props: ServicesProps): React.ReactNode;

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

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useService, WixServices } from '@wix/services-manager-react';
+import { createServicesMap } from '@wix/services-manager';
+import { ServiceListServiceDefinition, ServiceListService, } from '../../../services/service-list/service-list.js';
+/**
+ * Root component that provides ServiceList service context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceList.Root serviceListConfig={{ services: myServices }}>
+ *   {children}
+ * </ServiceList.Root>
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ServiceListServiceDefinition, ServiceListService, props.serviceListConfig), children: props.children }));
+}
+/**
+ * Component that provides services list data through render props.
+ * Exposes services, loading state, error, query options, and pagination metadata (including hasNext flag).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceList.Services>
+ *   {({ services, isLoading, error, pagingMetadata }) => {
+ *     if (isLoading) return <div>Loading...</div>;
+ *     if (error) return <div>Error: {error}</div>;
+ *     return (
+ *       <div>
+ *         {services.map(service => (
+ *           <div key={service._id}>{service.name}</div>
+ *         ))}
+ *         {pagingMetadata.hasNext && (
+ *           <button>Load More Services</button>
+ *         )}
+ *       </div>
+ *     );
+ *   }}
+ * </ServiceList.Services>
+ * ```
+ */
+export function Services(props) {
+    const serviceListService = useService(ServiceListServiceDefinition);
+    const services = serviceListService.servicesSignal.get();
+    const isLoading = serviceListService.isLoadingSignal.get();
+    const error = serviceListService.errorSignal.get();
+    const queryOptions = serviceListService.queryOptionsSignal.get();
+    const pagingMetadata = serviceListService.pagingMetadataSignal.get();
+    return props.children({
+        services,
+        isLoading,
+        error,
+        queryOptions,
+        pagingMetadata,
+    });
+}

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

@@ -1,2 +1,4 @@
 export * as Booking from './booking/Booking.js';
 export * as Service from './service/Service.js';
+export * as ServiceList from './service-list/ServiceList.js';
+export * as Location from './location/Location.js';

package/cjs/dist/react/index.js

@@ -1,2 +1,4 @@
 export * as Booking from './booking/Booking.js';
 export * as Service from './service/Service.js';
+export * as ServiceList from './service-list/ServiceList.js';
+export * as Location from './location/Location.js';

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

@@ -0,0 +1,77 @@
+/**
+ * Location - Headless component for displaying service location information
+ * Provides components for displaying location type and address
+ */
+import React from 'react';
+import * as CoreLocation from '../core/location/Location.js';
+import { AsChildChildren } from '@wix/headless-utils/react';
+import type { services } from '@wix/bookings';
+/**
+ * Re-export AddressData type from core for convenience
+ */
+export type { AddressData } from '../core/location/Location.js';
+/**
+ * Props for Location.Root component
+ */
+export interface LocationRootProps {
+    location: NonNullable<services.Service['locations']>[number];
+    asChild?: boolean;
+    children?: React.ReactNode | AsChildChildren<{
+        locationType: services.LocationType;
+        address: CoreLocation.AddressData | null;
+    }>;
+    className?: string;
+}
+/**
+ * Root component that provides location context and handles location type detection
+ * and address parsing.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Location } from '@wix/bookings/components';
+ *
+ * // Default usage - automatically renders Address.Formatted
+ * function ServiceLocations({ location }) {
+ *   return (
+ *     <Location.Root location={location} />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With asChild to access location data
+ * <Location.Root location={location} asChild>
+ *   {({ locationType, address }) => (
+ *     <div>
+ *       <span className="badge">{locationType}</span>
+ *       {address && (
+ *         <Address.Root address={address}>
+ *           <Address.Formatted />
+ *         </Address.Root>
+ *       )}
+ *     </div>
+ *   )}
+ * </Location.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Conditional rendering based on location type
+ * <Location.Root location={location} asChild>
+ *   {({ locationType, address }) => (
+ *     locationType === 'customer' ? (
+ *       <span className="text-primary">At your location</span>
+ *     ) : (
+ *       address && (
+ *         <Address.Root address={address}>
+ *           <Address.Formatted />
+ *         </Address.Root>
+ *       )
+ *     )
+ *   )}
+ * </Location.Root>
+ * ```
+ */
+export declare const Root: React.ForwardRefExoticComponent<LocationRootProps & React.RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Location - Headless component for displaying service location information
+ * Provides components for displaying location type and address
+ */
+import React from 'react';
+import * as CoreLocation from '../core/location/Location.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
+import { Address } from '@wix/headless-components/react';
+// ==========================================
+// TestIds Enum
+// ==========================================
+var TestIds;
+(function (TestIds) {
+    TestIds["locationRoot"] = "location-root";
+})(TestIds || (TestIds = {}));
+// ==========================================
+// Components
+// ==========================================
+/**
+ * Root component that provides location context and handles location type detection
+ * and address parsing.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Location } from '@wix/bookings/components';
+ *
+ * // Default usage - automatically renders Address.Formatted
+ * function ServiceLocations({ location }) {
+ *   return (
+ *     <Location.Root location={location} />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With asChild to access location data
+ * <Location.Root location={location} asChild>
+ *   {({ locationType, address }) => (
+ *     <div>
+ *       <span className="badge">{locationType}</span>
+ *       {address && (
+ *         <Address.Root address={address}>
+ *           <Address.Formatted />
+ *         </Address.Root>
+ *       )}
+ *     </div>
+ *   )}
+ * </Location.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Conditional rendering based on location type
+ * <Location.Root location={location} asChild>
+ *   {({ locationType, address }) => (
+ *     locationType === 'customer' ? (
+ *       <span className="text-primary">At your location</span>
+ *     ) : (
+ *       address && (
+ *         <Address.Root address={address}>
+ *           <Address.Formatted />
+ *         </Address.Root>
+ *       )
+ *     )
+ *   )}
+ * </Location.Root>
+ * ```
+ */
+export const Root = React.forwardRef((props, ref) => {
+    const { location, asChild, children, className, ...attrs } = props;
+    return (_jsx(CoreLocation.Location, { location: location, children: ({ locationType, address }) => {
+            // If asChild is used with custom children, always pass location data to children
+            if (asChild && children) {
+                return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.locationRoot, "data-location-type": locationType, customElement: children, customElementProps: { locationType, address }, ...attrs, children: address ? (_jsx(Address.Root, { address: address, children: _jsx(Address.Formatted, {}) })) : null }));
+            }
+            // Default rendering: return null if no address data
+            if (!address) {
+                return null;
+            }
+            // Default rendering with Address.Formatted and optional children
+            return (_jsxs("span", { ref: ref, "data-testid": TestIds.locationRoot, "data-location-type": locationType, className: className, ...attrs, children: [_jsx(Address.Root, { address: address, children: _jsx(Address.Formatted, {}) }), typeof children !== 'function'
+                        ? children
+                        : null] }));
+        } }));
+});
+Root.displayName = 'Location.Root';