@wix/headless-bookings 0.0.9 → 0.0.11

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

@@ -1,5 +1,14 @@
 /**
  * API Layer
  * Exports all Wix Bookings API functions
+ *
+ * @module API
+ */
+export { getServiceById, getServiceBySlug, queryServices, type PagingMetadata, type ServiceListFilters, type QueryServicesRequest, } from './query-services/index.js';
+/**
+ * PagingMetadata includes:
+ * - limit: Number of items per page
+ * - offset: Number of items to skip
+ * - count: Number of items returned in the current page
+ * - hasNext: Whether there are more services available to load
  */
-export { getServiceById, getServiceBySlug } from './query-service/index.js';

package/cjs/dist/api/index.js

@@ -1,5 +1,14 @@
 /**
  * API Layer
  * Exports all Wix Bookings API functions
+ *
+ * @module API
+ */
+export { getServiceById, getServiceBySlug, queryServices, } from './query-services/index.js';
+/**
+ * PagingMetadata includes:
+ * - limit: Number of items per page
+ * - offset: Number of items to skip
+ * - count: Number of items returned in the current page
+ * - hasNext: Whether there are more services available to load
  */
-export { getServiceById, getServiceBySlug } from './query-service/index.js';

package/cjs/dist/api/query-services/index.d.ts

@@ -0,0 +1,78 @@
+/**
+ * Query Services API
+ * Fetches single or multiple services with pagination and sorting
+ */
+import { services } from '@wix/bookings';
+import type { services as servicesTypes } from '@wix/bookings';
+/**
+ * Paging metadata from query services response.
+ * Extends the SDK's Paging type with hasNext flag to indicate if more services are available.
+ */
+export type PagingMetadata = services.Paging & {
+    /** Number of items returned in the current page */
+    count?: number;
+    /** Whether there are more services available to load */
+    hasNext?: boolean;
+};
+/**
+ * Service list filters
+ */
+export interface ServiceListFilters {
+    serviceIds?: string[];
+    categoryIds?: string[];
+    locationIds?: string[];
+    staffMemberIds?: string[];
+}
+/**
+ * Query services request options
+ * Used internally by ServiceListService to track query state
+ */
+export interface QueryServicesRequest {
+    appId: string;
+    filters?: ServiceListFilters;
+    pagingMetadata?: PagingMetadata;
+    sort?: services.Sorting[];
+}
+/**
+ * Fetches a service by its ID
+ * @param id - The service ID
+ * @param appId - Optional app ID, defaults to booking app ID
+ * @returns Object containing the service or null if not found
+ */
+export declare const getServiceById: (id: string, appId?: string) => Promise<{
+    service: servicesTypes.Service | null;
+}>;
+/**
+ * Fetches a service by its slug
+ * @param slug - The service slug
+ * @param appId - Optional app ID, defaults to booking app ID
+ * @returns Object containing the service or null if not found
+ */
+export declare const getServiceBySlug: (slug: string, appId?: string) => Promise<{
+    service: servicesTypes.Service | null;
+}>;
+/**
+ * Query services with pagination and sorting.
+ * Returns services array and paging metadata including hasNext flag.
+ *
+ * @param params - Query parameters including appId, filters, paging metadata, and sort options
+ * @returns Promise that resolves to services array and paging metadata with hasNext flag
+ *
+ * @example
+ * ```ts
+ * const { services, pagingMetadata } = await queryServices({
+ *   appId: '13d21c63-b5ec-5912-8397-c3a5ddb27a97',
+ *   filters: { serviceIds: ['service1', 'service2'] },
+ *   pagingMetadata: { limit: 20, offset: 0 },
+ *   sort: [{ fieldName: 'name', order: 'ASC' }]
+ * });
+ *
+ * if (pagingMetadata.hasNext) {
+ *   // Load more services
+ * }
+ * ```
+ */
+export declare function queryServices({ appId, filters, pagingMetadata, sort, }: QueryServicesRequest): Promise<{
+    services: servicesTypes.Service[];
+    pagingMetadata: PagingMetadata;
+}>;

package/cjs/dist/api/query-services/index.js

@@ -0,0 +1,137 @@
+/**
+ * Query Services API
+ * Fetches single or multiple services with pagination and sorting
+ */
+import { services } from '@wix/bookings';
+/**
+ * Booking app ID constant
+ */
+const BOOKING_APP_ID = '13d21c63-b5ec-5912-8397-c3a5ddb27a97';
+/**
+ * Fetches a service by its ID
+ * @param id - The service ID
+ * @param appId - Optional app ID, defaults to booking app ID
+ * @returns Object containing the service or null if not found
+ */
+export const getServiceById = async (id, appId) => {
+    try {
+        const finalAppId = appId ?? BOOKING_APP_ID;
+        // Query services where _id equals the provided id and appId matches
+        const query = services.queryServices({
+            conditionalFields: ['STAFF_MEMBER_DETAILS'],
+        });
+        const result = await query
+            .eq('_id', id)
+            // @ts-ignore
+            .eq('appId', finalAppId)
+            .limit(1)
+            .find();
+        const service = result.items?.[0] || null;
+        return { service };
+    }
+    catch (error) {
+        console.error(`Failed to load service for id "${id}":`, error);
+        return { service: null };
+    }
+};
+/**
+ * Fetches a service by its slug
+ * @param slug - The service slug
+ * @param appId - Optional app ID, defaults to booking app ID
+ * @returns Object containing the service or null if not found
+ */
+export const getServiceBySlug = async (slug, appId) => {
+    try {
+        const finalAppId = appId ?? BOOKING_APP_ID;
+        // Query services where mainSlug.name equals the provided slug and appId matches
+        const query = services.queryServices({
+            conditionalFields: ['STAFF_MEMBER_DETAILS'],
+        });
+        const result = await query
+            .eq('mainSlug.name', slug)
+            // @ts-ignore
+            .eq('appId', finalAppId)
+            .limit(1)
+            .find();
+        const service = result.items?.[0] || null;
+        return { service };
+    }
+    catch (error) {
+        console.error(`Failed to load service for slug "${slug}":`, error);
+        return { service: null };
+    }
+};
+/**
+ * Builds a QueryServicesRequest from appId, filters, paging, and sort
+ * @param params - Parameters including appId, filters, paging, and sort
+ * @returns QueryServicesRequest object
+ */
+const buildServicesQueryRequest = ({ appId, filters, paging, sort, }) => {
+    const filter = {
+        appId,
+    };
+    // Add serviceIds filter if provided
+    if (filters?.serviceIds && filters.serviceIds.length > 0) {
+        filter['_id'] = { $in: filters.serviceIds };
+    }
+    // Add other filters as they are implemented in future phases
+    // categoryIds, locationIds, staffMemberIds to be added later
+    const query = {
+        filter: Object.keys(filter).length > 0 ? filter : undefined,
+        paging: paging || {
+            limit: 100, // Default limit
+        },
+        sort,
+    };
+    return { query };
+};
+/**
+ * Query services with pagination and sorting.
+ * Returns services array and paging metadata including hasNext flag.
+ *
+ * @param params - Query parameters including appId, filters, paging metadata, and sort options
+ * @returns Promise that resolves to services array and paging metadata with hasNext flag
+ *
+ * @example
+ * ```ts
+ * const { services, pagingMetadata } = await queryServices({
+ *   appId: '13d21c63-b5ec-5912-8397-c3a5ddb27a97',
+ *   filters: { serviceIds: ['service1', 'service2'] },
+ *   pagingMetadata: { limit: 20, offset: 0 },
+ *   sort: [{ fieldName: 'name', order: 'ASC' }]
+ * });
+ *
+ * if (pagingMetadata.hasNext) {
+ *   // Load more services
+ * }
+ * ```
+ */
+export async function queryServices({ appId, filters, pagingMetadata, sort, }) {
+    try {
+        const queryRequest = buildServicesQueryRequest({
+            appId,
+            filters,
+            paging: pagingMetadata,
+            sort,
+        });
+        // Call queryServices with QueryServicesRequest and execute the query
+        const result = await services.queryServices(queryRequest).find();
+        // Construct PagingMetadata from result properties
+        // Includes count (number of items returned) and hasNext (whether more items are available)
+        const resultPagingMetadata = {
+            limit: pagingMetadata?.limit,
+            offset: pagingMetadata?.offset,
+            count: result.items.length,
+            hasNext: (result?.totalCount || 0) >
+                result.items.length + (pagingMetadata?.offset || 0),
+        };
+        return {
+            services: result.items || [],
+            pagingMetadata: resultPagingMetadata,
+        };
+    }
+    catch (error) {
+        console.error('Failed to query services:', error);
+        throw error;
+    }
+}

package/cjs/dist/react/core/booking/Booking.d.ts

@@ -3,8 +3,8 @@
  * Provides low-level access to BookingService via render props and service setup
  */
 import React from 'react';
-import { type BookingServiceConfig } from '../../../services/booking/booking.js';
-import type { services, availabilityTimeSlots } from '@wix/bookings';
+import { type BookingServiceConfig, type ServiceSelection } from '../../../services/booking/booking.js';
+import type { availabilityTimeSlots } from '@wix/bookings';
 /**
  * Props for Booking.Root component
  */
@@ -33,7 +33,7 @@ export declare function Root(props: RootProps): React.ReactNode;
  */
 export interface DataProps {
     children: (data: {
-        selectedServices: services.Service[];
+        selectedServices: ServiceSelection[];
         selectedTimeSlot: availabilityTimeSlots.TimeSlot | null;
     }) => React.ReactNode;
 }
@@ -47,7 +47,7 @@ export interface DataProps {
  * <Booking.Data>
  *   {({ selectedServices }) => (
  *     selectedServices.length > 0 ? (
- *       <div>{selectedServices.map(s => s.name).join(', ')}</div>
+ *       <div>{selectedServices.map(s => s.service.name).join(', ')}</div>
  *     ) : (
  *       <div>No services selected</div>
  *     )

package/cjs/dist/react/core/booking/Booking.js

@@ -30,7 +30,7 @@ export function Root(props) {
  * <Booking.Data>
  *   {({ selectedServices }) => (
  *     selectedServices.length > 0 ? (
- *       <div>{selectedServices.map(s => s.name).join(', ')}</div>
+ *       <div>{selectedServices.map(s => s.service.name).join(', ')}</div>
  *     ) : (
  *       <div>No services selected</div>
  *     )
@@ -41,8 +41,8 @@ export function Root(props) {
 export function Data(props) {
     const { children } = props;
     const bookingService = useService(BookingServiceDefinition);
-    const selectedServices = bookingService.selectedServices.get();
-    const selectedTimeSlot = bookingService.selectedTimeSlot.get();
+    const selectedServices = bookingService.services.get();
+    const selectedTimeSlot = bookingService.timeSlot.get();
     return children({
         selectedServices,
         selectedTimeSlot,

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

@@ -0,0 +1,44 @@
+/**
+ * Core Location Component - Parses service location data
+ * Handles business, custom, and customer location types
+ * Converts location data to Address component format
+ */
+import React from 'react';
+import { services } from '@wix/bookings';
+import type { AddressData as AddressDataType } from '@wix/headless-components/react';
+/**
+ * Re-export AddressData type from Address component for convenience
+ */
+export type AddressData = AddressDataType;
+/**
+ * Location render props passed to children
+ */
+export interface LocationRenderProps {
+    locationType: services.LocationType;
+    address: AddressData | null;
+}
+/**
+ * Props for the core Location component
+ */
+export interface LocationProps {
+    location: NonNullable<services.Service['locations']>[number];
+    children: (props: LocationRenderProps) => React.ReactNode;
+}
+/**
+ * Core Location component that parses service location data
+ * and provides location type and address data to children
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreLocation location={serviceLocation}>
+ *   {({ locationType, address }) => (
+ *     <div>
+ *       <span>Type: {locationType}</span>
+ *       {address && <Address.Root address={address}><Address.Formatted /></Address.Root>}
+ *     </div>
+ *   )}
+ * </CoreLocation>
+ * ```
+ */
+export declare function Location(props: LocationProps): React.ReactNode;

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

@@ -0,0 +1,78 @@
+/**
+ * Core Location Component - Parses service location data
+ * Handles business, custom, and customer location types
+ * Converts location data to Address component format
+ */
+import { services } from '@wix/bookings';
+/**
+ * Parses location data into Address component format
+ */
+function parseLocationAddress(location, locationType) {
+    // Handle customer location specially
+    if (locationType === services.LocationType.CUSTOMER) {
+        // For customer location, return an AddressData object with Customer's Place
+        return {
+            address: {
+                addressLine: "Customer's Place",
+                formattedAddress: "Customer's Place",
+                city: '',
+                subdivision: '',
+                postalCode: '',
+                country: '',
+            },
+        };
+    }
+    // Get the common address from the appropriate location type
+    const commonAddress = location.calculatedAddress ||
+        location.business?.address ||
+        location.custom?.address;
+    if (!commonAddress) {
+        return null;
+    }
+    // Convert CommonAddress to AddressData format (compatible with Address.Root from @wix/headless-components)
+    return {
+        address: {
+            addressLine: commonAddress.streetAddress?.name ||
+                commonAddress.addressLine ||
+                commonAddress.addressLine1 ||
+                '',
+            city: commonAddress.city || '',
+            subdivision: commonAddress.subdivision || '',
+            postalCode: commonAddress.postalCode || '',
+            country: commonAddress.country || '',
+            streetAddress: commonAddress.streetAddress
+                ? {
+                    number: commonAddress.streetAddress.number,
+                    name: commonAddress.streetAddress.name,
+                    apt: commonAddress.streetAddress.apt,
+                }
+                : undefined,
+        },
+    };
+}
+// ==========================================
+// Component
+// ==========================================
+/**
+ * Core Location component that parses service location data
+ * and provides location type and address data to children
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreLocation location={serviceLocation}>
+ *   {({ locationType, address }) => (
+ *     <div>
+ *       <span>Type: {locationType}</span>
+ *       {address && <Address.Root address={address}><Address.Formatted /></Address.Root>}
+ *     </div>
+ *   )}
+ * </CoreLocation>
+ * ```
+ */
+export function Location(props) {
+    const { location, children } = props;
+    const locationType = location.type;
+    const address = parseLocationAddress(location, locationType);
+    return children({ locationType, address });
+}

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

@@ -4,25 +4,18 @@
  */
 import React from 'react';
 import { type ServiceServiceConfig } from '../../../services/service/service.js';
-import type { services } from '@wix/bookings';
+import { services } from '@wix/bookings';
+import type { MoneyData } from '@wix/headless-components/react';
 /**
  * Props for Service.Root component
  */
 export interface RootProps {
-    children: React.ReactNode;
+    children: React.ReactNode | ((props: {
+        selected: boolean;
+        bookable: boolean;
+    }) => React.ReactNode);
     serviceServiceConfig: ServiceServiceConfig;
 }
-/**
- * Root component that provides service context.
- *
- * @component
- * @example
- * ```tsx
- * <Service.Root serviceServiceConfig={{ service }}>
- *   {children}
- * </Service.Root>
- * ```
- */
 export declare function Root(props: RootProps): React.ReactNode;
 /**
  * Props for Service render prop component
@@ -55,26 +48,101 @@ export interface InfoProps {
     children: (data: {
         name: string;
         description: string;
+        tagline?: string;
+        duration?: number;
+        type?: string;
+        category?: {
+            name?: string;
+            _id?: string;
+        };
+        locations?: Array<NonNullable<services.Service['locations']>[number]>;
+        staff?: Array<{
+            name?: string;
+            _id?: string;
+        }>;
+        media?: Array<{
+            url?: string;
+            _id?: string;
+        }>;
+        mainMedia?: {
+            image?: string;
+        };
+        coverMedia?: {
+            image?: string;
+        };
+        mediaItems?: Array<{
+            image?: string | null;
+            altText?: string | null;
+        }>;
+        price?: {
+            amount?: string;
+            formattedAmount?: string;
+            currency?: string;
+        };
+        defaultCapacity?: number;
+        selected: boolean;
     }) => React.ReactNode;
 }
 /**
  * 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>
  * ```
  */
 export declare function Info(props: InfoProps): React.ReactNode;
+/**
+ * Props for Price render prop component
+ */
+export interface PriceProps {
+    children: (data: {
+        servicePayment: services.Payment | undefined;
+        rateType: services.Payment['rateType'] | undefined;
+        money: MoneyData | null;
+        minPrice: MoneyData | null;
+        maxPrice: MoneyData | null;
+        priceDescription: string | null;
+        hasAddOns: boolean;
+        hasPricingPlans: boolean;
+    }) => React.ReactNode;
+}
+/**
+ * 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 declare function Price(props: PriceProps): React.ReactNode;
 /**
  * Props for Actions render prop component
  */
@@ -83,7 +151,10 @@ export interface ActionsProps {
         select: () => void;
         add: () => void;
         remove: () => void;
-        service: services.Service;
+        rawService: services.Service;
+        bookable: boolean;
+        selected: boolean;
+        requiresAvailability: boolean;
     }) => React.ReactNode;
 }
 /**
@@ -93,7 +164,7 @@ export interface ActionsProps {
  * @example
  * ```tsx
  * <Service.Actions>
- *   {({ select, add, remove, service }) => (
+ *   {({ select, add, remove, rawService, requiresAvailability }) => (
  *     <div>
  *       <button onClick={select}>Select</button>
  *       <button onClick={add}>Add</button>
@@ -104,3 +175,75 @@ export interface ActionsProps {
  * ```
  */
 export declare function Actions(props: ActionsProps): React.ReactNode;
+/**
+ * Props for Policy render prop component
+ */
+export interface PolicyProps {
+    children: (data: {
+        bookingPolicy: services.BookingPolicy | null;
+        cancellationPolicyEnabled: boolean;
+        limitLatestCancellationEnabled: boolean;
+        latestCancellationInMinutes: number | undefined;
+        latestBookingPolicyEnabled: boolean;
+        latestBookingInMinutes: number | undefined;
+        earliestBookingPolicyEnabled: boolean;
+        earliestBookingInMinutes: number | undefined;
+        reschedulePolicyEnabled: boolean;
+        limitLatestRescheduleEnabled: boolean;
+        latestRescheduleInMinutes: number | undefined;
+        waitlistPolicyEnabled: boolean;
+        waitlistCapacity: number | undefined;
+        bookAfterStartEnabled: boolean;
+        maxParticipantsPerBooking: number | undefined;
+    }) => React.ReactNode;
+}
+/**
+ * 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 declare function Policy(props: PolicyProps): React.ReactNode;
+/**
+ * Props for Schedule render prop component
+ */
+export interface ScheduleProps {
+    children: (data: {
+        schedule: services.Schedule | null;
+        isClassOrCourse: boolean;
+    }) => React.ReactNode;
+}
+/**
+ * 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 declare function Schedule(props: ScheduleProps): React.ReactNode;