@wix/headless-bookings 0.0.56 → 0.0.58

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

@@ -5,8 +5,7 @@
 import React from 'react';
 import { AsChildChildren } from '@wix/headless-utils/react';
 import { MoneyData } from '@wix/headless-components/react';
-import type { PaymentServiceConfig, SlotService } from '../../services/payment/payment.js';
-import type { LineItem as CoreLineItem } from '../core/payment/Payment.js';
+import type { PaymentServiceConfig, PricingServiceSelection } from '../../services/payment/payment.js';
 /**
  * Props for Payment.Root component
  */
@@ -17,8 +16,8 @@ export interface RootProps {
     }) => React.ReactNode);
     /** Service config for SSR (pre-fetched 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;
     asChild?: boolean;
@@ -28,7 +27,7 @@ export interface RootProps {
  * Root component that provides payment context to the entire app.
  * Supports 3 modes:
  * 1. SSR: paymentServiceConfig.paymentDetails - pre-fetched data
- * 2. Lazy loading: slotServices + numberOfParticipants props - calls API via useEffect
+ * 2. Lazy loading: pricingServiceSelections + numberOfParticipants props - calls API via useEffect
  * 3. Reactive: no config/props - reads from BookingService signals
  *
  * @order 1
@@ -64,17 +63,32 @@ export interface SubtotalProps {
     asChild?: boolean;
     children?: AsChildChildren<{
         subtotal: MoneyData | null;
+        priceText: string | null;
+        hasPriceText: boolean;
+        isFree: boolean;
     }>;
     className?: string;
 }
 /**
  * Displays the payment subtotal.
+ * Always displays the monetary value but exposes priceText, hasPriceText, and isFree for custom rendering.
  *
  * @component
  * @example
  * ```tsx
  * <Payment.Subtotal className="text-lg" />
  * ```
+ * @example
+ * ```tsx
+ * <Payment.Subtotal asChild>
+ *   {({ subtotal, priceText, hasPriceText, isFree }) => (
+ *     <div>
+ *       <Money money={subtotal} />
+ *       {hasPriceText && <span className="text-sm">({priceText})</span>}
+ *     </div>
+ *   )}
+ * </Payment.Subtotal>
+ * ```
  */
 export declare const Subtotal: React.ForwardRefExoticComponent<SubtotalProps & React.RefAttributes<HTMLElement>>;
 /**
@@ -126,17 +140,36 @@ export interface TotalProps {
     asChild?: boolean;
     children?: AsChildChildren<{
         total: MoneyData | null;
+        priceText: string | null;
+        hasPriceText: boolean;
+        isFree: boolean;
     }>;
     className?: string;
 }
 /**
  * Displays the payment total.
+ * Always displays the monetary value but exposes priceText, hasPriceText, and isFree for custom rendering.
  *
  * @component
  * @example
  * ```tsx
  * <Payment.Total className="text-2xl font-bold" />
  * ```
+ * @example
+ * ```tsx
+ * <Payment.Total asChild>
+ *   {({ total, priceText, hasPriceText, isFree }) => (
+ *     <div>
+ *       {isFree ? (
+ *         <span className="text-green-500">Free</span>
+ *       ) : (
+ *         <Money money={total} />
+ *       )}
+ *       {hasPriceText && <span className="text-sm">({priceText})</span>}
+ *     </div>
+ *   )}
+ * </Payment.Total>
+ * ```
  */
 export declare const Total: React.ForwardRefExoticComponent<TotalProps & React.RefAttributes<HTMLElement>>;
 /**
@@ -240,101 +273,74 @@ export interface LineItemsListProps {
  * ```
  */
 export declare const LineItemsList: React.ForwardRefExoticComponent<LineItemsListProps & React.RefAttributes<HTMLElement>>;
-/**
- * Render props for LineItemRepeater asChild pattern
- */
-export interface LineItemRepeaterRenderProps {
-    items: CoreLineItem[];
-    itemWrapper: (props: {
-        item: CoreLineItem;
-        index: number;
-        children: React.ReactNode;
-    }) => React.ReactNode;
-}
 /**
  * Props for Payment.LineItemRepeater component
  */
 export interface LineItemRepeaterProps {
-    children?: React.ReactNode | ((props: LineItemRepeaterRenderProps) => React.ReactNode);
-    asChild?: boolean;
+    children: React.ReactNode;
 }
 /**
- * Repeater component that renders LineItemRoot for each line item.
- * Supports asChild pattern for custom rendering.
+ * Repeater component that maps over line items and provides context per item.
+ * Uses GenericList.Repeater internally with itemWrapper that provides LineItemContext.
  *
  * @component
  * @example
  * ```tsx
- * // Standard usage
  * <Payment.LineItemRepeater>
- *   <Payment.LineItemPrice />
- * </Payment.LineItemRepeater>
- *
- * // AsChild usage with custom list
- * <Payment.LineItemRepeater asChild>
- *   {({ items, itemWrapper }) => (
- *     <ol>
- *       {items.map((item, index) => (
- *         <li key={item.id}>
- *           {itemWrapper({ item, index, children: <Payment.LineItemPrice /> })}
- *         </li>
- *       ))}
- *     </ol>
- *   )}
+ *   <Payment.LineItemTotal />
+ *   <Payment.LineItemDiscount />
  * </Payment.LineItemRepeater>
  * ```
  */
 export declare const LineItemRepeater: React.ForwardRefExoticComponent<LineItemRepeaterProps & React.RefAttributes<HTMLElement>>;
 /**
- * Props for Payment.LineItemRoot component
+ * Props for Payment.LineItemTotal component
  */
-export interface LineItemRootProps {
-    lineItem: CoreLineItem;
-    currency: string;
-    children?: React.ReactNode | AsChildChildren<{
-        lineItem: CoreLineItem;
-        currency: string;
-    }>;
+export interface LineItemTotalProps {
     asChild?: boolean;
+    children?: AsChildChildren<{
+        totalPrice: MoneyData | null;
+        priceText: string | null;
+        hasPriceText: boolean;
+        isFree: boolean;
+    }>;
     className?: string;
-    'data-testid'?: string;
 }
 /**
- * Root component for a single line item.
- * Provides context for child components.
+ * Displays the line item total (total price after tax).
+ * Shows priceText for CUSTOM rate type services, otherwise shows totalPrice.
  *
  * @component
  * @example
  * ```tsx
- * <Payment.LineItemRoot lineItem={item} currency="USD">
- *   <Payment.LineItemPrice />
- *   <Payment.LineItemDiscount />
- * </Payment.LineItemRoot>
+ * <Payment.LineItemTotal className="text-2xl font-bold" />
  * ```
  */
-export declare const LineItemRoot: React.ForwardRefExoticComponent<LineItemRootProps & React.RefAttributes<HTMLElement>>;
+export declare const LineItemTotal: React.ForwardRefExoticComponent<LineItemTotalProps & React.RefAttributes<HTMLElement>>;
 /**
- * Props for Payment.LineItemPrice component
+ * Props for Payment.LineItemSubtotal component
  */
-export interface LineItemPriceProps {
+export interface LineItemSubtotalProps {
     asChild?: boolean;
     children?: AsChildChildren<{
-        totalPrice: MoneyData | null;
+        subtotal: MoneyData | null;
         priceText: string | null;
+        hasPriceText: boolean;
+        isFree: boolean;
     }>;
     className?: string;
 }
 /**
- * Displays the line item price.
- * Shows priceText for CUSTOM rate type services, otherwise shows totalPrice.
+ * Displays the line item subtotal (full price before discounts).
+ * Shows priceText for CUSTOM rate type services, otherwise shows subtotal.
  *
  * @component
  * @example
  * ```tsx
- * <Payment.LineItemPrice className="text-lg font-bold" />
+ * <Payment.LineItemSubtotal className="text-lg" />
  * ```
  */
-export declare const LineItemPrice: React.ForwardRefExoticComponent<LineItemPriceProps & React.RefAttributes<HTMLElement>>;
+export declare const LineItemSubtotal: React.ForwardRefExoticComponent<LineItemSubtotalProps & React.RefAttributes<HTMLElement>>;
 /**
  * Props for Payment.LineItemDiscount component
  */

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

@@ -19,8 +19,8 @@ var TestIds;
     TestIds["paymentLineItems"] = "payment-line-items";
     TestIds["paymentLineItemsList"] = "payment-line-items-list";
     TestIds["paymentLineItemRepeater"] = "payment-line-item-repeater";
-    TestIds["paymentLineItemRoot"] = "payment-line-item-root";
-    TestIds["paymentLineItemPrice"] = "payment-line-item-price";
+    TestIds["paymentLineItemTotal"] = "payment-line-item-total";
+    TestIds["paymentLineItemSubtotal"] = "payment-line-item-subtotal";
     TestIds["paymentLineItemDiscount"] = "payment-line-item-discount";
     TestIds["paymentLineItemDeposit"] = "payment-line-item-deposit";
 })(TestIds || (TestIds = {}));
@@ -28,7 +28,7 @@ var TestIds;
  * Root component that provides payment context to the entire app.
  * Supports 3 modes:
  * 1. SSR: paymentServiceConfig.paymentDetails - pre-fetched data
- * 2. Lazy loading: slotServices + numberOfParticipants props - calls API via useEffect
+ * 2. Lazy loading: pricingServiceSelections + numberOfParticipants props - calls API via useEffect
  * 3. Reactive: no config/props - reads from BookingService signals
  *
  * @order 1
@@ -57,24 +57,36 @@ var TestIds;
  * ```
  */
 export const Root = React.forwardRef((props, ref) => {
-    const { children, paymentServiceConfig, slotServices, numberOfParticipants, asChild, className, ...attrs } = props;
-    return (_jsx(CorePayment.Root, { paymentServiceConfig: paymentServiceConfig, slotServices: slotServices, numberOfParticipants: numberOfParticipants, children: ({ isLoading, hasError }) => {
+    const { children, paymentServiceConfig, pricingServiceSelections, numberOfParticipants, asChild, className, ...attrs } = props;
+    return (_jsx(CorePayment.Root, { paymentServiceConfig: paymentServiceConfig, pricingServiceSelections: pricingServiceSelections, numberOfParticipants: numberOfParticipants, children: ({ isLoading, hasError }) => {
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentRoot, "data-loading": isLoading, "data-has-error": hasError, customElement: children, customElementProps: { isLoading, hasError }, ...attrs, children: children }));
         } }));
 });
 Root.displayName = 'Payment.Root';
 /**
  * Displays the payment subtotal.
+ * Always displays the monetary value but exposes priceText, hasPriceText, and isFree for custom rendering.
  *
  * @component
  * @example
  * ```tsx
  * <Payment.Subtotal className="text-lg" />
  * ```
+ * @example
+ * ```tsx
+ * <Payment.Subtotal asChild>
+ *   {({ subtotal, priceText, hasPriceText, isFree }) => (
+ *     <div>
+ *       <Money money={subtotal} />
+ *       {hasPriceText && <span className="text-sm">({priceText})</span>}
+ *     </div>
+ *   )}
+ * </Payment.Subtotal>
+ * ```
  */
 export const Subtotal = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.Data, { children: ({ subtotal }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentSubtotal, customElement: children, customElementProps: { subtotal }, children: subtotal ? _jsx(Money, { money: subtotal }) : null })) }));
+    return (_jsx(CorePayment.Data, { children: ({ subtotal, priceText, hasPriceText, isFree }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentSubtotal, "data-has-price-text": hasPriceText, "data-is-free": isFree, customElement: children, customElementProps: { subtotal, priceText, hasPriceText, isFree }, children: subtotal && _jsx(Money, { money: subtotal }) })) }));
 });
 Subtotal.displayName = 'Payment.Subtotal';
 /**
@@ -89,10 +101,7 @@ Subtotal.displayName = 'Payment.Subtotal';
  */
 export const Tax = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.Data, { children: ({ tax }) => {
-            const hasTax = tax !== null && tax.amount > 0;
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentTax, "data-has-tax": hasTax, customElement: children, customElementProps: { tax }, children: tax ? _jsx(Money, { money: tax }) : null }));
-        } }));
+    return (_jsx(CorePayment.Data, { children: ({ tax, hasTax }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentTax, "data-has-tax": hasTax, customElement: children, customElementProps: { tax }, children: hasTax && _jsx(Money, { money: tax }) })) }));
 });
 Tax.displayName = 'Payment.Tax';
 /**
@@ -107,24 +116,37 @@ Tax.displayName = 'Payment.Tax';
  */
 export const Discount = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.Data, { children: ({ discount }) => {
-            const hasDiscount = discount !== null && discount.amount > 0;
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentDiscount, "data-has-discount": hasDiscount, customElement: children, customElementProps: { discount }, children: discount ? _jsx(Money, { money: discount }) : null }));
-        } }));
+    return (_jsx(CorePayment.Data, { children: ({ discount, hasDiscount }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentDiscount, "data-has-discount": hasDiscount, customElement: children, customElementProps: { discount }, children: hasDiscount && _jsx(Money, { money: discount }) })) }));
 });
 Discount.displayName = 'Payment.Discount';
 /**
  * Displays the payment total.
+ * Always displays the monetary value but exposes priceText, hasPriceText, and isFree for custom rendering.
  *
  * @component
  * @example
  * ```tsx
  * <Payment.Total className="text-2xl font-bold" />
  * ```
+ * @example
+ * ```tsx
+ * <Payment.Total asChild>
+ *   {({ total, priceText, hasPriceText, isFree }) => (
+ *     <div>
+ *       {isFree ? (
+ *         <span className="text-green-500">Free</span>
+ *       ) : (
+ *         <Money money={total} />
+ *       )}
+ *       {hasPriceText && <span className="text-sm">({priceText})</span>}
+ *     </div>
+ *   )}
+ * </Payment.Total>
+ * ```
  */
 export const Total = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.Data, { children: ({ total }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentTotal, customElement: children, customElementProps: { total }, children: total ? _jsx(Money, { money: total }) : null })) }));
+    return (_jsx(CorePayment.Data, { children: ({ total, priceText, hasPriceText, isFree }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentTotal, "data-has-price-text": hasPriceText, "data-is-free": isFree, customElement: children, customElementProps: { total, priceText, hasPriceText, isFree }, children: total && _jsx(Money, { money: total }) })) }));
 });
 Total.displayName = 'Payment.Total';
 /**
@@ -139,10 +161,7 @@ Total.displayName = 'Payment.Total';
  */
 export const PayNow = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.Data, { children: ({ payNow, total }) => {
-            const isDeposit = payNow !== null && total !== null && payNow.amount < total.amount;
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentPayNow, "data-has-deposit": isDeposit, customElement: children, customElementProps: { payNow }, children: payNow ? _jsx(Money, { money: payNow }) : null }));
-        } }));
+    return (_jsx(CorePayment.Data, { children: ({ payNow, isDeposit }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentPayNow, "data-has-deposit": isDeposit, customElement: children, customElementProps: { payNow }, children: payNow && payNow.amount > 0 && _jsx(Money, { money: payNow }) })) }));
 });
 PayNow.displayName = 'Payment.PayNow';
 /**
@@ -157,10 +176,7 @@ PayNow.displayName = 'Payment.PayNow';
  */
 export const PayLater = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CorePayment.Data, { children: ({ payLater, payNow, total }) => {
-            const isDeposit = payNow !== null && total !== null && payNow.amount < total.amount;
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentPayLater, "data-has-deposit": isDeposit, customElement: children, customElementProps: { payLater }, children: payLater ? _jsx(Money, { money: payLater }) : null }));
-        } }));
+    return (_jsx(CorePayment.Data, { children: ({ payLater, isDeposit }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentPayLater, "data-has-deposit": isDeposit, customElement: children, customElementProps: { payLater }, children: payLater && payLater.amount > 0 && _jsx(Money, { money: payLater }) })) }));
 });
 PayLater.displayName = 'Payment.PayLater';
 /**
@@ -219,84 +235,60 @@ export const LineItemsList = React.forwardRef((props, ref) => {
 });
 LineItemsList.displayName = 'Payment.LineItemsList';
 /**
- * Repeater component that renders LineItemRoot for each line item.
- * Supports asChild pattern for custom rendering.
+ * Internal component that wraps each line item with context provider.
+ */
+const LineItemWrapper = ({ item, currency, children, }) => {
+    return (_jsx(CorePayment.LineItemProvider, { lineItem: item, currency: currency, children: children }));
+};
+/**
+ * Repeater component that maps over line items and provides context per item.
+ * Uses GenericList.Repeater internally with itemWrapper that provides LineItemContext.
  *
  * @component
  * @example
  * ```tsx
- * // Standard usage
  * <Payment.LineItemRepeater>
- *   <Payment.LineItemPrice />
- * </Payment.LineItemRepeater>
- *
- * // AsChild usage with custom list
- * <Payment.LineItemRepeater asChild>
- *   {({ items, itemWrapper }) => (
- *     <ol>
- *       {items.map((item, index) => (
- *         <li key={item.id}>
- *           {itemWrapper({ item, index, children: <Payment.LineItemPrice /> })}
- *         </li>
- *       ))}
- *     </ol>
- *   )}
+ *   <Payment.LineItemTotal />
+ *   <Payment.LineItemDiscount />
  * </Payment.LineItemRepeater>
  * ```
  */
 export const LineItemRepeater = React.forwardRef((props, ref) => {
-    const { children, asChild } = props;
+    const { children } = props;
     const { currency } = useLineItemsContext();
-    // Custom itemWrapper that renders LineItemRoot for each line item
-    const lineItemWrapper = ({ item, children: itemChildren, }) => {
-        return (_jsx(LineItemRoot, { lineItem: item, currency: currency, "data-testid": TestIds.paymentLineItemRepeater, children: itemChildren || undefined }, item.id));
-    };
-    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: lineItemWrapper, asChild: asChild, children: children }));
+    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: ({ item }) => (_jsx(LineItemWrapper, { item: item, currency: currency, children: children }, item.id)), children: undefined }));
 });
 LineItemRepeater.displayName = 'Payment.LineItemRepeater';
-const LineItemContext = React.createContext(null);
-function useLineItemContext() {
-    const context = React.useContext(LineItemContext);
-    if (!context) {
-        throw new Error('useLineItemContext must be used within a Payment.LineItemRoot component');
-    }
-    return context;
-}
 /**
- * Root component for a single line item.
- * Provides context for child components.
+ * Displays the line item total (total price after tax).
+ * Shows priceText for CUSTOM rate type services, otherwise shows totalPrice.
  *
  * @component
  * @example
  * ```tsx
- * <Payment.LineItemRoot lineItem={item} currency="USD">
- *   <Payment.LineItemPrice />
- *   <Payment.LineItemDiscount />
- * </Payment.LineItemRoot>
+ * <Payment.LineItemTotal className="text-2xl font-bold" />
  * ```
  */
-export const LineItemRoot = React.forwardRef((props, ref) => {
-    const { lineItem, currency, children, asChild, className, ...attrs } = props;
-    return (_jsx(LineItemContext.Provider, { value: { lineItem, currency }, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": attrs['data-testid'] || TestIds.paymentLineItemRoot, customElement: children, customElementProps: { lineItem, currency }, ...attrs, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
+export const LineItemTotal = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CorePayment.LineItemInfo, { children: ({ totalPrice, priceText, hasPriceText, isFree }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemTotal, "data-has-price-text": hasPriceText, "data-is-free": isFree, customElement: children, customElementProps: { totalPrice, priceText, hasPriceText, isFree }, children: priceText ? (_jsx("span", { children: priceText })) : (totalPrice && _jsx(Money, { money: totalPrice })) })) }));
 });
-LineItemRoot.displayName = 'Payment.LineItemRoot';
+LineItemTotal.displayName = 'Payment.LineItemTotal';
 /**
- * Displays the line item price.
- * Shows priceText for CUSTOM rate type services, otherwise shows totalPrice.
+ * Displays the line item subtotal (full price before discounts).
+ * Shows priceText for CUSTOM rate type services, otherwise shows subtotal.
  *
  * @component
  * @example
  * ```tsx
- * <Payment.LineItemPrice className="text-lg font-bold" />
+ * <Payment.LineItemSubtotal className="text-lg" />
  * ```
  */
-export const LineItemPrice = React.forwardRef((props, ref) => {
+export const LineItemSubtotal = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    const { lineItem } = useLineItemContext();
-    const { totalPrice, priceText } = lineItem;
-    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemPrice, "data-has-price-text": !!priceText, customElement: children, customElementProps: { totalPrice, priceText }, children: priceText ? (_jsx("span", { children: priceText })) : totalPrice ? (_jsx(Money, { money: totalPrice })) : null }));
+    return (_jsx(CorePayment.LineItemInfo, { children: ({ subtotal, priceText, hasPriceText, isFree }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemSubtotal, "data-has-price-text": hasPriceText, "data-is-free": isFree, customElement: children, customElementProps: { subtotal, priceText, hasPriceText, isFree }, children: priceText ? (_jsx("span", { children: priceText })) : (subtotal && _jsx(Money, { money: subtotal })) })) }));
 });
-LineItemPrice.displayName = 'Payment.LineItemPrice';
+LineItemSubtotal.displayName = 'Payment.LineItemSubtotal';
 /**
  * Displays the line item discount.
  * Uses data-has-discount attribute for conditional visibility.
@@ -309,10 +301,7 @@ LineItemPrice.displayName = 'Payment.LineItemPrice';
  */
 export const LineItemDiscount = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    const { lineItem } = useLineItemContext();
-    const { discount } = lineItem;
-    const hasDiscount = discount !== null && discount.amount > 0;
-    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemDiscount, "data-has-discount": hasDiscount, customElement: children, customElementProps: { discount }, children: discount ? _jsx(Money, { money: discount }) : null }));
+    return (_jsx(CorePayment.LineItemInfo, { children: ({ discount, hasDiscount }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemDiscount, "data-has-discount": hasDiscount, customElement: children, customElementProps: { discount }, children: hasDiscount && _jsx(Money, { money: discount }) })) }));
 });
 LineItemDiscount.displayName = 'Payment.LineItemDiscount';
 /**
@@ -327,9 +316,6 @@ LineItemDiscount.displayName = 'Payment.LineItemDiscount';
  */
 export const LineItemDeposit = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    const { lineItem } = useLineItemContext();
-    const { deposit } = lineItem;
-    const hasDeposit = deposit !== null && deposit.amount > 0;
-    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemDeposit, "data-has-deposit": hasDeposit, customElement: children, customElementProps: { deposit }, children: deposit ? _jsx(Money, { money: deposit }) : null }));
+    return (_jsx(CorePayment.LineItemInfo, { children: ({ deposit, hasDeposit }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentLineItemDeposit, "data-has-deposit": hasDeposit, customElement: children, customElementProps: { deposit }, children: hasDeposit && _jsx(Money, { money: deposit }) })) }));
 });
 LineItemDeposit.displayName = 'Payment.LineItemDeposit';

package/cjs/dist/services/booking-form/booking-form.d.ts

@@ -25,24 +25,44 @@ export interface ValidationResult {
     /** Array of validation failure messages */
     validationFailures: string[];
 }
+/**
+ * Error thrown when BookingFormService cannot be initialized due to missing configuration.
+ * This occurs when:
+ * - No config (formId or form) was provided
+ * - AND the component is not wrapped with Booking.Root (no BookingService available)
+ */
+export declare class BookingFormConfigurationError extends Error {
+    constructor(message?: string);
+}
 /**
  * Configuration for BookingFormService.
  * Supports two modes:
  * 1. Client-side loading: Provide formId to fetch the form dynamically
  * 2. SSR/SSG: Provide a pre-loaded form object (must be from bookings namespace)
  *
+ * Note: The config itself is optional. If not provided, the formId will be
+ * extracted from the selected service if available.
+ *
  * @example
  * ```tsx
  * // Pattern 1: Client-side loading
  * const config = { formId: 'form-123' };
  *
+ * // Pattern 1b: Client-side loading with service IDs
+ * const config = { formId: 'form-123', serviceIds: ['service-1', 'service-2'] };
+ *
  * // Pattern 2: Pre-loaded form (SSR/SSG)
  * const config = { form: preloadedForm };
+ *
+ * // Pattern 3: No config (formId extracted from service)
+ * // config = undefined
  * ```
  */
 export type BookingFormServiceConfig = {
     /** The form ID to load (client-side loading) */
     formId: string;
+    /** Optional list of service IDs associated with this booking form */
+    serviceIds?: string[];
 } | {
     /** Pre-loaded form object (SSR/SSG) - must be from bookings namespace */
     form: forms.Form;
@@ -79,18 +99,7 @@ export interface BookingFormServiceInternalAPI extends BookingFormServiceAPI {
     /** Internal: Register validate callback (called by core component) */
     _setValidateCallback: (callback: () => Promise<ValidationResult>) => void;
 }
-/**
- * Type guard to check if config has formId
- */
-export declare function hasFormId(config: BookingFormServiceConfig): config is {
-    formId: string;
-};
-/**
- * Type guard to check if config has pre-loaded form
- */
-export declare function hasForm(config: BookingFormServiceConfig): config is {
-    form: forms.Form;
-};
+export { hasFormId, hasForm, extractFormIdFromForm, extractFormIdFromConfig, type FormIdConfig, } from './utils.js';
 /**
  * Service definition for BookingForm.
  * Defines the contract that the BookingFormService must implement.
@@ -137,4 +146,4 @@ export declare const BookingFormService: import("@wix/services-definitions").Ser
     __api: BookingFormServiceAPI;
     __config: {};
     isServiceDefinition?: boolean;
-} & BookingFormServiceAPI, BookingFormServiceConfig>;
+} & BookingFormServiceAPI, BookingFormServiceConfig | undefined>;