@wix/headless-bookings 0.0.9 → 0.0.11

package/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/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/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;

package/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,
     });
 }