@wix/headless-bookings 0.0.57 → 0.0.59

package/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/dist/react/staff-member/StaffMemberList.js

@@ -152,7 +152,7 @@ const Clear = React.forwardRef((props, ref) => {
         // BookingService not available - likely no ServiceManagerProvider
     }
     const handleClick = () => {
-        bookingService?.actions.clearResourceById(STAFF_MEMBER_RESOURCE_TYPE_ID);
+        bookingService?.actions.clearResourceByType(STAFF_MEMBER_RESOURCE_TYPE_ID);
         onClicked?.();
     };
     return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.staffMemberListActionClear, customElement: children, customElementProps: {

package/dist/services/booking/booking.d.ts

@@ -9,6 +9,13 @@ import type { Resource, EventInfo, Location as TimeSlotLocationType } from '@wix
 import type { FormValues } from '@wix/form-public';
 import type { BookResult } from './book-action/types.js';
 export declare const ANY_STAFF_MEMBER_ID = "__any_staff_member__";
+/**
+ * Extended Resource type with a type field for categorization
+ */
+export interface ExtendedResource extends Resource {
+    /** Resource type identifier (e.g., 'staff', 'room', 'equipment') */
+    type: string;
+}
 /**
  * Minimal time slot data for service selections
  */
@@ -32,8 +39,8 @@ export interface ServiceSelection {
     instanceId: string;
     /** The selected service */
     service: Service;
-    /** Selected resources (staff members, rooms, etc.) */
-    resources: Resource[];
+    /** Selected resources (staff members, rooms, etc.) with type information */
+    resources: ExtendedResource[];
     /** Per-item time slot data */
     timeSlot?: ServiceSelectionTimeSlot;
     /** Number of participants for this service selection */
@@ -53,12 +60,12 @@ export interface BookingServiceActions {
     removeItem(instanceId?: string): void;
     /** Clears all service selections */
     clearItems(): void;
-    /** Sets a resource by ID within a service selection. If no instanceId provided, uses the first item. */
-    setResourceById(resourceId: string, resource: Resource, instanceId?: string): void;
-    /** Gets a resource by ID from a service selection. If no instanceId provided, uses the first item. */
-    getResourceById(resourceId: string, instanceId?: string): Resource | undefined;
-    /** Clears a resource by ID from a service selection. If no instanceId provided, uses the first item. */
-    clearResourceById(resourceId: string, instanceId?: string): void;
+    /** Sets a resource by type within a service selection. If no instanceId provided, uses the first item. Only one resource per type is allowed. The resourceType parameter specifies which type to set. */
+    setResource(resource: ExtendedResource, instanceId?: string): void;
+    /** Gets a resource by type from a service selection. If no instanceId provided, uses the first item. */
+    getResourceByType(resourceType: string, instanceId?: string): Resource | undefined;
+    /** Clears a resource by type from a service selection. If no instanceId provided, uses the first item. */
+    clearResourceByType(resourceType: string, instanceId?: string): void;
     setLocation(location: ServiceLocationType | null): void;
     clearLocation(): void;
     setTimezone(timezone: string): void;

package/dist/services/booking/booking.js

@@ -115,8 +115,7 @@ export const BookingService = implementService.withConfig()(BookingServiceDefini
         clearItems() {
             serviceSelectionsSignal.set([]);
         },
-        // Resource helpers
-        setResourceById(resourceId, resource, instanceId) {
+        setResource(resource, instanceId) {
             const current = serviceSelectionsSignal.get();
             // If no instanceId provided, use the first item
             const targetId = instanceId ?? current[0]?.instanceId;
@@ -125,20 +124,13 @@ export const BookingService = implementService.withConfig()(BookingServiceDefini
             const updated = current.map((item) => {
                 if (item.instanceId !== targetId)
                     return item;
-                // Find and replace resource by ID, or add if not found
-                const existingIndex = item.resources.findIndex((r) => r._id === resourceId);
-                const newResources = [...item.resources];
-                if (existingIndex >= 0) {
-                    newResources[existingIndex] = resource;
-                }
-                else {
-                    newResources.push(resource);
-                }
+                const newResources = item.resources.filter((r) => r.type !== resource.type);
+                newResources.push(resource);
                 return { ...item, resources: newResources };
             });
             serviceSelectionsSignal.set(updated);
         },
-        getResourceById(resourceId, instanceId) {
+        getResourceByType(resourceType, instanceId) {
             const current = serviceSelectionsSignal.get();
             // If no instanceId provided, use the first item
             const targetId = instanceId ?? current[0]?.instanceId;
@@ -147,9 +139,9 @@ export const BookingService = implementService.withConfig()(BookingServiceDefini
             const targetItem = current.find((item) => item.instanceId === targetId);
             if (!targetItem)
                 return undefined;
-            return targetItem.resources.find((r) => r._id === resourceId);
+            return targetItem.resources.find((r) => r.type === resourceType);
         },
-        clearResourceById(resourceId, instanceId) {
+        clearResourceByType(resourceType, instanceId) {
             const current = serviceSelectionsSignal.get();
             // If no instanceId provided, use the first item
             const targetId = instanceId ?? current[0]?.instanceId;
@@ -158,8 +150,8 @@ export const BookingService = implementService.withConfig()(BookingServiceDefini
             const updated = current.map((item) => {
                 if (item.instanceId !== targetId)
                     return item;
-                // Filter out the resource with matching ID
-                const newResources = item.resources.filter((r) => r._id !== resourceId);
+                // Filter out the resource with matching type
+                const newResources = item.resources.filter((r) => r.type !== resourceType);
                 return { ...item, resources: newResources };
             });
             serviceSelectionsSignal.set(updated);

package/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/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/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/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/services/time-slot-list/time-slot-list.js

@@ -195,7 +195,7 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         dateRangeSignal.set({ start: newStartDate, end: newEndDate });
     };
     const preSelectedStaffMemberId = signalsService.computed(() => {
-        const serviceSelections = bookingService.serviceSelections.peek();
+        const serviceSelections = bookingService.serviceSelections.get();
         return serviceSelections.length
             ? (serviceSelections[0]?.resources?.[0]?._id ?? undefined)
             : undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-bookings",
-  "version": "0.0.57",
+  "version": "0.0.59",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -72,5 +72,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "94e57cfc23b5dddf7ab80117e454a526cb7834e1fff7e8b473d4899e"
+  "falconPackageHash": "61ca8eb4d4959dd03911f50f6d490b55be609f85f03f0aff55af5948"
 }