@wix/headless-bookings 0.0.57 → 0.0.58

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/index.d.ts

@@ -8,6 +8,6 @@ export { TimeSlotListService, TimeSlotListServiceDefinition, TimeSlotService, Ti
 export { ServiceListService, ServiceListServiceDefinition, type ServiceListServiceAPI, type ServiceListServiceConfig, type ServiceListFilters, type ServiceListActions, type QueryOptions, loadServiceListServiceInitialData, type SuccessServiceListServiceConfigResult, type ErrorServiceListServiceConfigResult, } from './service-list/service-list.js';
 export { executeBookAction, canBook, buildBookingRequest, buildCheckoutRequest, type CanBookParams, type BookResult, type BookingError, type BookActionParams, type BookChildProps, type BookProps, type BuildCheckoutParams, } from './booking/book-action/index.js';
 export { BookingFormService, BookingFormServiceDefinition, type BookingFormServiceAPI, type BookingFormServiceConfig, type BookingFormServiceInternalAPI, type ValidationResult, } from './booking-form/booking-form.js';
-export { PaymentService, PaymentServiceDefinition, type PaymentServiceAPI, type PaymentServiceConfig, type PaymentDetails, type SlotService, type LineItemAdditionalInfo, loadPaymentConfig, type SuccessPaymentConfigResult, type ErrorPaymentConfigResult, } from './payment/payment.js';
+export { PaymentService, PaymentServiceDefinition, type PaymentServiceAPI, type PaymentServiceConfig, type PaymentDetails, type PricingServiceSelection, type LineItemAdditionalInfo, loadPaymentConfig, type SuccessPaymentConfigResult, type ErrorPaymentConfigResult, } from './payment/payment.js';
 export { LocationListService, LocationListServiceDefinition, LocationType, loadLocationListServiceInitialData, locationListServiceBinding, type LocationListServiceAPI, type LocationListServiceConfig, type LocationListActions, type LocationData, type DisplayLocation, type LoadLocationListServiceResult, } from './location-list/location-list.js';
 export { StaffMemberListService, StaffMemberListServiceDefinition, loadStaffMemberListServiceInitialData, staffMemberListServiceBinding, type StaffMemberListServiceAPI, type StaffMemberListServiceConfig, type StaffMemberListActions, type StaffMemberData, type LoadStaffMemberListServiceResult, } from './staff-member-list/staff-member-list.js';

package/cjs/dist/services/payment/payment.d.ts

@@ -3,8 +3,8 @@
  * Handles calculating total prices, taxes, discounts, and deposit information
  * Supports two modes: SSR (config with pre-fetched data) and lazy loading (reactive)
  */
-import { type PaymentServiceConfig, type PaymentServiceInternalConfig, type SlotService } from './payment.def.js';
-export { PaymentServiceDefinition, type PaymentServiceConfig, type PaymentDetails, type LineItemAdditionalInfo, type SlotService, } from './payment.def.js';
+import { type PaymentServiceConfig, type PaymentServiceInternalConfig, type PricingServiceSelection } from './payment.def.js';
+export { PaymentServiceDefinition, type PaymentServiceConfig, type PaymentDetails, type LineItemAdditionalInfo, type PricingServiceSelection, } from './payment.def.js';
 export type { PaymentServiceAPI, PaymentServiceInternalConfig, } from './payment.def.js';
 export declare const PaymentService: import("@wix/services-definitions").ServiceFactory<string & {
     __api: import("./payment.def.js").PaymentServiceAPI;
@@ -23,10 +23,10 @@ export type ErrorPaymentConfigResult = {
  * Load payment configuration for Server-Side Rendering (SSR).
  * Calls the pricing APIs and returns pre-calculated payment details.
  *
- * @param params.slotServices - Slot/service inputs for calculation
+ * @param params.pricingServiceSelections - Pricing service selections for calculation
  * @param params.numberOfParticipants - Number of participants (default: 1)
  */
 export declare function loadPaymentConfig(params: {
-    slotServices: SlotService[];
+    pricingServiceSelections: PricingServiceSelection[];
     numberOfParticipants?: number;
 }): Promise<SuccessPaymentConfigResult | ErrorPaymentConfigResult>;

package/cjs/dist/services/payment/payment.def.d.ts

@@ -30,9 +30,9 @@ export interface PaymentDetails {
     };
 }
 /**
- * Input for calculating payment for a slot/service
+ * Input for calculating payment for a booking service
  */
-export interface SlotService {
+export interface PricingServiceSelection {
     service: Service;
     /** Optional line item ID. If not provided, one will be generated. */
     lineItemId?: string;
@@ -50,8 +50,8 @@ export interface PaymentServiceConfig {
  * Not exposed publicly - Core merges this with PaymentServiceConfig
  */
 export interface PaymentServiceInternalConfig extends PaymentServiceConfig {
-    /** Slot services for lazy loading (internal use) */
-    slotServices?: SlotService[];
+    /** Booking services for lazy loading (internal use) */
+    pricingServiceSelections?: PricingServiceSelection[];
     /** Number of participants for lazy loading (internal use) */
     numberOfParticipants?: number;
 }

package/cjs/dist/services/payment/payment.js

@@ -60,11 +60,11 @@ function buildLineItem(service, numberOfParticipants, lineItemId) {
         paymentOption,
     };
 }
-async function calculatePaymentDetails(slotServices, numberOfParticipants) {
-    // Ensure all slot services have a lineItemId
-    const data = slotServices.map((slot) => ({
-        ...slot,
-        lineItemId: slot.lineItemId || generateLineItemId(),
+async function calculatePaymentDetails(pricingServiceSelections, numberOfParticipants) {
+    // Ensure all booking services have a lineItemId
+    const data = pricingServiceSelections.map((selection) => ({
+        ...selection,
+        lineItemId: selection.lineItemId || generateLineItemId(),
     }));
     const lineItems = data.map((item) => buildLineItem(item.service, numberOfParticipants, item.lineItemId));
     const response = await calculateTotals({
@@ -96,15 +96,15 @@ export const PaymentService = implementService.withConfig()(PaymentServiceDefini
     const isLoadingSignal = signalsService.signal(false);
     const errorSignal = signalsService.signal(null);
     // Internal calculate function
-    const calculate = async (slotServices, numberOfParticipants) => {
-        if (!slotServices.length) {
+    const calculate = async (pricingServiceSelections, numberOfParticipants) => {
+        if (!pricingServiceSelections.length) {
             paymentDetailsSignal.set(null);
             return;
         }
         isLoadingSignal.set(true);
         errorSignal.set(null);
         try {
-            const paymentDetails = await calculatePaymentDetails(slotServices, numberOfParticipants);
+            const paymentDetails = await calculatePaymentDetails(pricingServiceSelections, numberOfParticipants);
             paymentDetailsSignal.set(paymentDetails);
         }
         catch (error) {
@@ -122,22 +122,30 @@ export const PaymentService = implementService.withConfig()(PaymentServiceDefini
     if (config.paymentDetails) {
         // No-op - data is pre-fetched
     }
-    // Mode 2: Lazy loading - slotServices provided via internal config
-    else if (config.slotServices?.length) {
-        void calculate(config.slotServices, config.numberOfParticipants ?? 1);
+    // Mode 2: Lazy loading - pricingServiceSelections provided via internal config
+    else if (config.pricingServiceSelections?.length) {
+        void calculate(config.pricingServiceSelections, config.numberOfParticipants ?? 1);
     }
     // Mode 3: Reactive - observe BookingService signals (client-side only)
     else if (typeof window !== 'undefined' && bookingService) {
-        signalsService.effect(() => {
+        // Computed signal that only changes when services change (not participants)
+        const servicesKey = signalsService.computed(() => {
             const selections = bookingService?.serviceSelections.get() || [];
+            return selections.map((s) => s.service._id).join(',');
+        });
+        signalsService.effect(() => {
+            // Subscribe to servicesKey to trigger effect only when services change
+            servicesKey.get();
+            // Read current selections without subscribing (peek)
+            const selections = bookingService?.serviceSelections.peek() || [];
             // For single service mode, take the first selection
             const firstSelection = selections[0];
             const numParticipants = firstSelection?.totalParticipants || 1;
-            const services = selections.map((selection) => ({
+            const pricingServiceSelections = selections.map((selection) => ({
                 service: selection.service,
                 lineItemId: selection.instanceId,
             }));
-            void calculate(services, numParticipants);
+            void calculate(pricingServiceSelections, numParticipants);
         });
     }
     return {
@@ -150,19 +158,19 @@ export const PaymentService = implementService.withConfig()(PaymentServiceDefini
  * Load payment configuration for Server-Side Rendering (SSR).
  * Calls the pricing APIs and returns pre-calculated payment details.
  *
- * @param params.slotServices - Slot/service inputs for calculation
+ * @param params.pricingServiceSelections - Pricing service selections for calculation
  * @param params.numberOfParticipants - Number of participants (default: 1)
  */
 export async function loadPaymentConfig(params) {
     try {
-        const { slotServices, numberOfParticipants = 1 } = params;
-        if (!slotServices.length) {
+        const { pricingServiceSelections, numberOfParticipants = 1 } = params;
+        if (!pricingServiceSelections.length) {
             return {
                 type: 'success',
                 config: { paymentDetails: undefined },
             };
         }
-        const paymentDetails = await calculatePaymentDetails(slotServices, numberOfParticipants);
+        const paymentDetails = await calculatePaymentDetails(pricingServiceSelections, numberOfParticipants);
         return {
             type: 'success',
             config: { paymentDetails },

package/dist/react/booking/Booking.js

@@ -227,7 +227,7 @@ export function TimeSlot(props) {
  */
 export function Payment(props) {
     const { children } = props;
-    return (_jsx(CoreBooking.PaymentData, { children: ({ slotServices }) => (_jsx(PaymentComponent.Root, { slotServices: slotServices, children: children })) }));
+    return (_jsx(CoreBooking.PaymentData, { children: ({ pricingServiceSelections }) => (_jsx(PaymentComponent.Root, { pricingServiceSelections: pricingServiceSelections, children: children })) }));
 }
 /**
  * Wraps Location context with the location from the booking context.

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

@@ -7,7 +7,7 @@ import { type BookingServiceConfig, type ServiceSelection, type BookingServiceAc
 import type { FormValues } from '@wix/form-public';
 import type { TimeSlot, Resource } from '@wix/auto_sdk_bookings_availability-time-slots';
 import type { Service, Location as ServiceLocationType } from '@wix/auto_sdk_bookings_services';
-import type { SlotService } from '../../../services/payment/payment.js';
+import type { PricingServiceSelection } from '../../../services/payment/payment.js';
 /**
  * Props for Booking.Root component
  */
@@ -167,8 +167,8 @@ export declare function ItemsData(props: ItemsDataProps): React.ReactNode;
  * Data exposed by PaymentData render prop
  */
 export interface PaymentDataRenderProps {
-    /** SlotServices array for Payment.Root */
-    slotServices: SlotService[];
+    /** Pricing service selections array for Payment.Root */
+    pricingServiceSelections: PricingServiceSelection[];
 }
 /**
  * Props for PaymentData render prop component

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

@@ -267,9 +267,9 @@ export function PaymentData(props) {
     const { children } = props;
     const bookingService = useService(BookingServiceDefinition);
     const serviceSelections = bookingService.serviceSelections.get();
-    const slotServices = serviceSelections.map((selection) => ({
+    const pricingServiceSelections = serviceSelections.map((selection) => ({
         service: selection.service,
         lineItemId: selection.instanceId,
     }));
-    return children({ slotServices });
+    return children({ pricingServiceSelections });
 }

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