@wix/headless-bookings 0.0.56 → 0.0.58

package/cjs/dist/react/core/booking-form/BookingForm.js

@@ -1,58 +1,42 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
+/**
+ * Core BookingForm Component
+ *
+ * Provides low-level access to booking form functionality via render props.
+ * Wraps CoreForm.Root and provides merged field map with booking defaults.
+ *
+ * Supports two modes:
+ * 1. Client-side: Provide formId to load the form dynamically
+ * 2. SSR/SSG: Provide a pre-loaded form object for server-side rendering
+ */
+import * as React from 'react';
+import { useMemo, useRef, useCallback } from 'react';
 import { WixServices, useService } from '@wix/services-manager-react';
 import { createServicesMap } from '@wix/services-manager';
-import { BookingFormServiceDefinition, BookingFormService, BOOKING_FORM_NAMESPACE, } from '../../../services/booking-form/booking-form.js';
+import { UniqueFieldSuffixContextProvider, } from '@wix/form-public';
+import { BookingFormServiceDefinition, BookingFormService, BookingFormConfigurationError, BOOKING_FORM_NAMESPACE, extractFormIdFromConfig, } from '../../../services/booking-form/booking-form.js';
+import { BookingServiceDefinition } from '../../../services/booking/booking.js';
 import { FormServiceDefinition, FormService, } from '@wix/headless-forms/services';
-// TODO: remove this when form will be updated to support optional field map
-const DEFAULT_BOOKING_FIELD_MAP = {
-    TEXT_INPUT: () => null,
-    TEXT_AREA: () => null,
-    PHONE_INPUT: () => null,
-    EMAIL_INPUT: () => null,
-    NUMBER_INPUT: () => null,
-    CHECKBOX: () => null,
-    DROPDOWN: () => null,
-    DATE_PICKER: () => null,
-    SUBMIT_BUTTON: () => null,
-    RADIO_GROUP: () => null,
-    CHECKBOX_GROUP: () => null,
-    DATE_INPUT: () => null,
-    DATE_TIME_INPUT: () => null,
-    TIME_INPUT: () => null,
-    FILE_UPLOAD: () => null,
-    SIGNATURE: () => null,
-    TEXT: () => null,
-    MULTILINE_ADDRESS: () => null,
-    RATING_INPUT: () => null,
-    TAGS: () => null,
-    PRODUCT_LIST: () => null,
-    FIXED_PAYMENT: () => null,
-    PAYMENT_INPUT: () => null,
-    DONATION: () => null,
-    APPOINTMENT: () => null,
-    IMAGE_CHOICE: () => null,
-};
 // ============================================================================
 // Component
 // ============================================================================
 /**
  * Extracts the form ID from props (either directly or from form object)
+ * Returns undefined if formId should be extracted from services by the service layer
  */
 function extractFormIdFromProps(props) {
-    if ('formId' in props && props.formId) {
-        return props.formId;
-    }
-    if ('form' in props && props.form) {
-        const form = props.form;
-        const formId = form.id ||
-            form._id;
-        if (!formId) {
-            throw new Error('BookingForm: Could not extract form ID from provided form object.');
-        }
-        return formId;
+    // Convert props to config-like object for the utility
+    const config = props.form
+        ? { form: props.form }
+        : props.formId
+            ? { formId: props.formId }
+            : undefined;
+    const formId = extractFormIdFromConfig(config);
+    // If form was provided but we couldn't extract formId, that's an error
+    if (props.form && !formId) {
+        throw new Error('BookingForm: Could not extract form ID from provided form object.');
     }
-    throw new Error('BookingForm: Either formId or form must be provided.');
+    return formId;
 }
 /**
  * Core component that provides booking form data via render props.
@@ -123,41 +107,75 @@ function extractFormIdFromProps(props) {
  * ```
  */
 export function Root(props) {
-    const { additionalMetadata, fieldMap: userFieldMap, children } = props;
+    const { serviceIds, additionalMetadata, fieldMap, children } = props;
     // Determine if we have a pre-loaded form
     const hasPreloadedForm = 'form' in props && props.form;
     const preloadedForm = hasPreloadedForm ? props.form : null;
     // Extract formId from props
-    const formId = extractFormIdFromProps(props);
-    // Merge user's partial field map with booking defaults
-    const fields = useMemo(() => ({
-        // ...DEFAULT_BOOKING_FIELD_MAP, // TODO: Add default field map
-        ...userFieldMap,
-    }), [userFieldMap]);
+    const propsFormId = extractFormIdFromProps(props);
+    // Try to get BookingService if available (to extract formId and serviceIds from services)
+    let bookingService = null;
+    try {
+        bookingService = useService(BookingServiceDefinition);
+    }
+    catch {
+        // BookingService not available - that's ok if formId and serviceIds were provided explicitly
+        bookingService = null;
+    }
+    // Determine final formId: use props formId if provided, otherwise extract from services
+    let formId = propsFormId;
+    if (!formId && bookingService) {
+        const serviceSelections = bookingService.serviceSelections.get();
+        const services = serviceSelections.length
+            ? serviceSelections.map((s) => s.service)
+            : [];
+        formId = services.find((s) => s.form?._id)?.form?._id;
+    }
+    // Determine final serviceIds: use props serviceIds if provided, otherwise extract from services
+    let resolvedServiceIds = serviceIds;
+    if (!resolvedServiceIds && bookingService) {
+        const serviceSelections = bookingService.serviceSelections.get();
+        resolvedServiceIds = serviceSelections
+            .map((s) => s.service._id)
+            .filter((id) => Boolean(id));
+    }
+    // Merge serviceIds into additionalMetadata
+    const mergedMetadata = {
+        ...additionalMetadata,
+        ...(resolvedServiceIds &&
+            resolvedServiceIds.length > 0 && { serviceIds: resolvedServiceIds }),
+    };
     // Build formServiceConfig for FormService
-    // If we have a pre-loaded form, pass it directly; otherwise pass formId
+    // If we have a pre-loaded form, pass it directly
+    // If we have formId, pass it with namespace and metadata
     const formServiceConfig = useMemo(() => {
         if (preloadedForm) {
             return { form: preloadedForm };
         }
-        return {
-            formId,
-            namespace: BOOKING_FORM_NAMESPACE,
-            ...(additionalMetadata && { additionalMetadata }),
-        };
-    }, [formId, additionalMetadata, preloadedForm]);
+        // Only provide config if formId is available
+        if (formId) {
+            return {
+                formId,
+                namespace: BOOKING_FORM_NAMESPACE,
+                ...(Object.keys(mergedMetadata).length > 0 && {
+                    additionalMetadata: mergedMetadata,
+                }),
+            };
+        }
+    }, [formId, mergedMetadata, preloadedForm]);
     // Build bookingFormServiceConfig
     const bookingFormServiceConfig = useMemo(() => {
         if (preloadedForm) {
             return { form: preloadedForm };
         }
-        return { formId };
-    }, [formId, preloadedForm]);
+        // formId is optional - service will extract from services if not provided
+        return formId ? { formId, serviceIds } : undefined;
+    }, [formId, preloadedForm, serviceIds]);
     // Both FormService and BookingFormService are added to the same WixServices context
     // This allows BookingFormService to access FormService via getService internally
     return (_jsx(WixServices, { servicesMap: createServicesMap()
             .addService(FormServiceDefinition, FormService, formServiceConfig)
-            .addService(BookingFormServiceDefinition, BookingFormService, bookingFormServiceConfig), children: _jsx(BookingFormContent, { formId: formId, fields: { ...DEFAULT_BOOKING_FIELD_MAP, ...fields }, children: children }) }));
+            .addService(BookingFormServiceDefinition, BookingFormService, bookingFormServiceConfig), children: _jsx(UniqueFieldSuffixContextProvider, { children: _jsx(BookingFormContent, { fields: fieldMap, children: children }) }) }));
 }
 /**
  * Internal component that consumes BookingFormService and provides render props.
@@ -165,17 +183,139 @@ export function Root(props) {
  *
  * Note: BookingFormService internally accesses FormService to get formValues,
  * so we only need to consume BookingFormService here.
+ *
+ * Also automatically syncs form submission to BookingService when available,
+ * so Booking.Actions.Book can check canBook() correctly.
+ *
+ * Note: BookingService must be available in a parent WixServices context
+ * (typically provided by Booking.Root) for the sync to work. If BookingService
+ * is not available, useService will throw. This is expected since Booking.Actions.Book
+ * requires Booking.Root to be in the component tree.
  */
-function BookingFormContent({ formId, fields, children, }) {
+function BookingFormContent({ fields, children, }) {
     const bookingFormService = useService(BookingFormServiceDefinition);
+    // Try to get BookingService from parent context (provided by Booking.Root)
+    // Note: useService must be called unconditionally per React hooks rules.
+    // If BookingService is not available, useService will throw an error.
+    // This is expected - Booking.Actions.Book requires Booking.Root to be in the tree.
+    // We use a wrapper component pattern to handle this gracefully.
+    // For now, we'll always attempt to get it and let it throw if not available
+    // The user should wrap BookingForm with Booking.Root when using Booking.Actions.Book
+    const bookingService = useService(BookingServiceDefinition);
+    // Create internal ref for form handle
+    const formRef = useRef(null);
+    // Create validate action that uses the form ref
+    const validate = useCallback(() => {
+        return formRef.current?.validate() ?? Promise.resolve(false);
+    }, []);
+    // Wrap setFormSubmission to also sync to BookingService when available
+    const setFormSubmission = useCallback((formValues) => {
+        // Set in BookingFormService (always)
+        bookingFormService.setFormSubmission(formValues);
+        // Also set in BookingService if available (for canBook check)
+        // This allows Booking.Actions.Book to work correctly
+        if (bookingService) {
+            bookingService.actions.setFormSubmission(formValues);
+        }
+    }, [bookingFormService, bookingService]);
     const formSubmission = bookingFormService.formSubmission.get();
     const formValues = bookingFormService.formValues.get();
+    // Get formId from service (it extracts from services if not provided in config)
+    const resolvedFormId = bookingFormService.formId.get();
     return children({
-        formId,
+        formId: resolvedFormId,
         formValues,
         formSubmission,
-        setFormSubmission: bookingFormService.setFormSubmission,
-        validateFormSubmission: bookingFormService.validateFormSubmission,
+        setFormSubmission,
+        validateFormSubmission: validate,
+        formRef,
         fields,
     });
 }
+/**
+ * Core component that provides booking form actions via render props.
+ * Must be used within BookingForm.Root context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreBookingForm.Root formId="form-123">
+ *   {({ fields }) => (
+ *     <>
+ *       <Form.Fields fieldMap={fields} />
+ *       <CoreBookingForm.Actions>
+ *         {({ validateFormSubmission, formId }) => (
+ *           <button onClick={async () => {
+ *             const result = await validateFormSubmission();
+ *             console.log('Validation result:', result);
+ *           }}>
+ *             Validate Form
+ *           </button>
+ *         )}
+ *       </CoreBookingForm.Actions>
+ *     </>
+ *   )}
+ * </CoreBookingForm.Root>
+ * ```
+ */
+export function Actions(props) {
+    const bookingFormService = useService(BookingFormServiceDefinition);
+    const formSubmission = bookingFormService.formSubmission.get();
+    const formValues = bookingFormService.formValues.get();
+    const formId = bookingFormService.formId.get();
+    return props.children({
+        validateFormSubmission: bookingFormService.validateFormSubmission,
+        formId,
+        formValues,
+        formSubmission,
+    });
+}
+/**
+ * Component to display when BookingForm fails to load due to configuration errors.
+ * This component should be used in an error boundary to catch BookingFormConfigurationError.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import * as CoreBookingForm from '@wix/headless-bookings/react/core/booking-form';
+ *
+ * // Default usage with className
+ * <CoreBookingForm.LoadError error={error} className="text-destructive p-4" />
+ *
+ * // Custom content
+ * <CoreBookingForm.LoadError error={error}>
+ *   <div className="error-container">
+ *     <h3>Error Loading Form</h3>
+ *     <p>Please try again later.</p>
+ *   </div>
+ * </CoreBookingForm.LoadError>
+ *
+ * // With asChild for custom components
+ * <CoreBookingForm.LoadError error={error} asChild>
+ *   <CustomErrorComponent />
+ * </CoreBookingForm.LoadError>
+ * ```
+ */
+export const LoadError = React.forwardRef((props, ref) => {
+    const { error, asChild, children, className, ...otherProps } = props;
+    const errorData = { error, message: error.message };
+    if (asChild && React.isValidElement(children)) {
+        return React.cloneElement(children, {
+            ref,
+            className,
+            'data-testid': 'booking-form-load-error',
+            role: 'alert',
+            ...errorData,
+            ...otherProps,
+        });
+    }
+    return (_jsx("div", { ref: ref, className: className, "data-testid": "booking-form-load-error", role: "alert", ...otherProps, children: children ?? error.message }));
+});
+/**
+ * Type guard to check if an error is a BookingFormConfigurationError
+ */
+export function isBookingFormConfigurationError(error) {
+    return error instanceof BookingFormConfigurationError;
+}
+// Re-export the error class for convenience
+export { BookingFormConfigurationError };

package/cjs/dist/react/core/payment/Payment.d.ts

@@ -4,7 +4,7 @@
  * Note: Currently supports single service only
  */
 import React from 'react';
-import { type PaymentServiceConfig, type SlotService } from '../../../services/payment/payment.js';
+import { type PaymentServiceConfig, type PricingServiceSelection } from '../../../services/payment/payment.js';
 import type { MoneyData } from '@wix/headless-components/react';
 /**
  * Props for Payment.Root component
@@ -16,8 +16,8 @@ export interface RootProps {
     }) => React.ReactNode);
     /** Service config - SSR only (paymentDetails) */
     paymentServiceConfig?: PaymentServiceConfig;
-    /** Slot services for lazy loading (triggers API call) */
-    slotServices?: SlotService[];
+    /** Pricing service selections for lazy loading (triggers API call) */
+    pricingServiceSelections?: PricingServiceSelection[];
     /** Number of participants for lazy loading */
     numberOfParticipants?: number;
 }
@@ -25,7 +25,7 @@ export interface RootProps {
  * Root component that provides payment context.
  * Supports 3 modes:
  * 1. SSR: paymentServiceConfig.paymentDetails - pre-fetched data
- * 2. Lazy loading: slotServices + numberOfParticipants props - calls API on init
+ * 2. Lazy loading: pricingServiceSelections + numberOfParticipants props - calls API on init
  * 3. Reactive: no config/props - reads from BookingService signals
  *
  * @component
@@ -37,7 +37,7 @@ export interface RootProps {
  * </Payment.Root>
  *
  * // Lazy loading mode
- * <Payment.Root slotServices={[...]} numberOfParticipants={2}>
+ * <Payment.Root pricingServiceSelections={[...]} numberOfParticipants={2}>
  *   {({ isLoading }) => isLoading ? <div>Loading...</div> : <Payment.Total />}
  * </Payment.Root>
  *
@@ -59,6 +59,12 @@ export interface DataProps {
         discount: MoneyData | null;
         payNow: MoneyData | null;
         payLater: MoneyData | null;
+        priceText: string | null;
+        hasPriceText: boolean;
+        isFree: boolean;
+        hasTax: boolean;
+        hasDiscount: boolean;
+        isDeposit: boolean;
         currency: string;
         isLoading: boolean;
         error: string | null;
@@ -123,3 +129,76 @@ export interface LineItemsProps {
  * ```
  */
 export declare function LineItems(props: LineItemsProps): React.ReactNode;
+/**
+ * Context value for LineItem components
+ */
+export interface LineItemContextValue {
+    lineItem: LineItem;
+    currency: string;
+}
+/**
+ * Hook to access the current LineItem from context.
+ * Must be used within LineItemProvider.
+ *
+ * @throws Error if used outside of LineItemProvider context
+ */
+export declare function useLineItemContext(): LineItemContextValue;
+/**
+ * Props for LineItemProvider
+ */
+export interface LineItemProviderProps {
+    children: React.ReactNode;
+    lineItem: LineItem;
+    currency: string;
+}
+/**
+ * Provider component used by repeaters to provide LineItem context.
+ * Can be used by core consumers to create their own repeater.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * {lineItems.map((item) => (
+ *   <LineItemProvider key={item.id} lineItem={item} currency={currency}>
+ *     {children}
+ *   </LineItemProvider>
+ * ))}
+ * ```
+ */
+export declare function LineItemProvider(props: LineItemProviderProps): React.ReactNode;
+/**
+ * Props for LineItemInfo render prop component
+ */
+export interface LineItemInfoProps {
+    children: (data: {
+        lineItem: LineItem;
+        currency: string;
+        totalPrice: MoneyData | null;
+        subtotal: MoneyData | null;
+        tax: MoneyData | null;
+        discount: MoneyData | null;
+        deposit: MoneyData | null;
+        priceText: string | null;
+        hasPriceText: boolean;
+        isFree: boolean;
+        hasDiscount: boolean;
+        hasDeposit: boolean;
+    }) => React.ReactNode;
+}
+/**
+ * Core component that provides access to line item info via render props.
+ * Must be used within LineItemProvider.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <LineItemInfo>
+ *   {({ totalPrice, priceText, lineItem }) => (
+ *     <div>
+ *       {priceText ? <span>{priceText}</span> : <Money money={totalPrice} />}
+ *     </div>
+ *   )}
+ * </LineItemInfo>
+ * ```
+ */
+export declare function LineItemInfo(props: LineItemInfoProps): React.ReactNode;

package/cjs/dist/react/core/payment/Payment.js

@@ -1,4 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Core Payment Components
+ * Provides low-level access to PaymentService via render props
+ * Note: Currently supports single service only
+ */
+import React from 'react';
 import { WixServices, useService } from '@wix/services-manager-react';
 import { createServicesMap } from '@wix/services-manager';
 import { PaymentServiceDefinition, PaymentService, } from '../../../services/payment/payment.js';
@@ -20,7 +26,7 @@ function RootContent({ children, }) {
  * Root component that provides payment context.
  * Supports 3 modes:
  * 1. SSR: paymentServiceConfig.paymentDetails - pre-fetched data
- * 2. Lazy loading: slotServices + numberOfParticipants props - calls API on init
+ * 2. Lazy loading: pricingServiceSelections + numberOfParticipants props - calls API on init
  * 3. Reactive: no config/props - reads from BookingService signals
  *
  * @component
@@ -32,7 +38,7 @@ function RootContent({ children, }) {
  * </Payment.Root>
  *
  * // Lazy loading mode
- * <Payment.Root slotServices={[...]} numberOfParticipants={2}>
+ * <Payment.Root pricingServiceSelections={[...]} numberOfParticipants={2}>
  *   {({ isLoading }) => isLoading ? <div>Loading...</div> : <Payment.Total />}
  * </Payment.Root>
  *
@@ -43,11 +49,11 @@ function RootContent({ children, }) {
  * ```
  */
 export function Root(props) {
-    const { children, paymentServiceConfig = {}, slotServices, numberOfParticipants, } = props;
+    const { children, paymentServiceConfig = {}, pricingServiceSelections, numberOfParticipants, } = props;
     // Merge public config with lazy loading props into internal config
     const internalConfig = {
         ...paymentServiceConfig,
-        slotServices,
+        pricingServiceSelections,
         numberOfParticipants,
     };
     return (_jsx(WixServices, { servicesMap: createServicesMap().addService(PaymentServiceDefinition, PaymentService, internalConfig), children: _jsx(RootContent, { children: children }) }));
@@ -71,6 +77,16 @@ export function Data(props) {
     const discount = convertMultiCurrencyPriceToMoneyData(priceSummary?.discount, currency);
     const payNow = convertMultiCurrencyPriceToMoneyData(paymentDetails?.response?.payNow?.total, currency);
     const payLater = convertMultiCurrencyPriceToMoneyData(paymentDetails?.response?.payLater?.total, currency);
+    // Get priceText from first line item (single service mode)
+    const additionalInfoList = paymentDetails?.additionalInfo?.lineItems || [];
+    const firstLineItemInfo = additionalInfoList[0];
+    const priceText = firstLineItemInfo?.priceText || null;
+    const hasPriceText = !!priceText;
+    const isFree = total !== null && total.amount === 0 && !hasPriceText;
+    // Computed flags
+    const hasTax = tax !== null && tax.amount > 0;
+    const hasDiscount = discount !== null && discount.amount > 0;
+    const isDeposit = payNow !== null && total !== null && payNow.amount < total.amount;
     return props.children({
         subtotal,
         total,
@@ -78,6 +94,12 @@ export function Data(props) {
         discount,
         payNow,
         payLater,
+        priceText,
+        hasPriceText,
+        isFree,
+        hasTax,
+        hasDiscount,
+        isDeposit,
         currency,
         isLoading,
         error,
@@ -134,3 +156,79 @@ export function LineItems(props) {
         error,
     });
 }
+const LineItemContext = React.createContext(null);
+/**
+ * Hook to access the current LineItem from context.
+ * Must be used within LineItemProvider.
+ *
+ * @throws Error if used outside of LineItemProvider context
+ */
+export function useLineItemContext() {
+    const context = React.useContext(LineItemContext);
+    if (!context) {
+        throw new Error('LineItem components must be used within LineItemProvider');
+    }
+    return context;
+}
+/**
+ * Provider component used by repeaters to provide LineItem context.
+ * Can be used by core consumers to create their own repeater.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * {lineItems.map((item) => (
+ *   <LineItemProvider key={item.id} lineItem={item} currency={currency}>
+ *     {children}
+ *   </LineItemProvider>
+ * ))}
+ * ```
+ */
+export function LineItemProvider(props) {
+    const { children, lineItem, currency } = props;
+    const contextValue = {
+        lineItem,
+        currency,
+    };
+    return (_jsx(LineItemContext.Provider, { value: contextValue, children: children }));
+}
+/**
+ * Core component that provides access to line item info via render props.
+ * Must be used within LineItemProvider.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <LineItemInfo>
+ *   {({ totalPrice, priceText, lineItem }) => (
+ *     <div>
+ *       {priceText ? <span>{priceText}</span> : <Money money={totalPrice} />}
+ *     </div>
+ *   )}
+ * </LineItemInfo>
+ * ```
+ */
+export function LineItemInfo(props) {
+    const { lineItem, currency } = useLineItemContext();
+    // Computed flags
+    const hasPriceText = !!lineItem.priceText;
+    const isFree = lineItem.totalPrice !== null &&
+        lineItem.totalPrice.amount === 0 &&
+        !hasPriceText;
+    const hasDiscount = lineItem.discount !== null && lineItem.discount.amount > 0;
+    const hasDeposit = lineItem.deposit !== null && lineItem.deposit.amount > 0;
+    return props.children({
+        lineItem,
+        currency,
+        totalPrice: lineItem.totalPrice,
+        subtotal: lineItem.subtotal,
+        tax: lineItem.tax,
+        discount: lineItem.discount,
+        deposit: lineItem.deposit,
+        priceText: lineItem.priceText,
+        hasPriceText,
+        isFree,
+        hasDiscount,
+        hasDeposit,
+    });
+}