@wix/headless-bookings 0.0.59 → 0.0.61

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

@@ -192,31 +192,32 @@ export declare function TimeSlot(props: BookingTimeSlotProps): React.ReactNode;
  * Props for Booking.Payment component
  */
 export interface BookingPaymentProps {
-    children: React.ReactNode;
+    children?: React.ReactNode | ((props: {
+        isLoading: boolean;
+        hasError: boolean;
+    }) => React.ReactNode);
+    asChild?: boolean;
+    className?: string;
 }
 /**
  * Wraps Payment.Root with all services from all booking items.
  * Should be used outside of ItemRepeater - it calculates payment for all items.
  * Children can use all Payment.* components (Payment.Total, Payment.Subtotal, etc.).
- * Always renders with data-has-payment attribute for CSS targeting.
+ * Supports asChild to expose { isLoading, hasError } to children.
  *
  * @component
  * @example
  * ```tsx
- * <Booking.Root>
- *   <Booking.ItemsRoot>
- *     <Booking.Items>
- *       <Booking.ItemRepeater>
- *         <Booking.Service><Service.Name /></Booking.Service>
- *       </Booking.ItemRepeater>
- *     </Booking.Items>
- *   </Booking.ItemsRoot>
+ * // Standard usage
+ * <Booking.Payment>
+ *   <Payment.Total className="text-xl font-bold" />
+ *   <Payment.Subtotal />
+ * </Booking.Payment>
  *
- *   <Booking.Payment>
- *     <Payment.Total className="text-xl font-bold" />
- *     <Payment.Subtotal />
- *   </Booking.Payment>
- * </Booking.Root>
+ * // With asChild to access isLoading
+ * <Booking.Payment asChild>
+ *   {({ isLoading }) => isLoading ? <Skeleton /> : <PaymentSection />}
+ * </Booking.Payment>
  * ```
  */
 export declare function Payment(props: BookingPaymentProps): React.ReactNode;

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

@@ -204,30 +204,26 @@ export function TimeSlot(props) {
  * Wraps Payment.Root with all services from all booking items.
  * Should be used outside of ItemRepeater - it calculates payment for all items.
  * Children can use all Payment.* components (Payment.Total, Payment.Subtotal, etc.).
- * Always renders with data-has-payment attribute for CSS targeting.
+ * Supports asChild to expose { isLoading, hasError } to children.
  *
  * @component
  * @example
  * ```tsx
- * <Booking.Root>
- *   <Booking.ItemsRoot>
- *     <Booking.Items>
- *       <Booking.ItemRepeater>
- *         <Booking.Service><Service.Name /></Booking.Service>
- *       </Booking.ItemRepeater>
- *     </Booking.Items>
- *   </Booking.ItemsRoot>
+ * // Standard usage
+ * <Booking.Payment>
+ *   <Payment.Total className="text-xl font-bold" />
+ *   <Payment.Subtotal />
+ * </Booking.Payment>
  *
- *   <Booking.Payment>
- *     <Payment.Total className="text-xl font-bold" />
- *     <Payment.Subtotal />
- *   </Booking.Payment>
- * </Booking.Root>
+ * // With asChild to access isLoading
+ * <Booking.Payment asChild>
+ *   {({ isLoading }) => isLoading ? <Skeleton /> : <PaymentSection />}
+ * </Booking.Payment>
  * ```
  */
 export function Payment(props) {
-    const { children } = props;
-    return (_jsx(CoreBooking.PaymentData, { children: ({ pricingServiceSelections }) => (_jsx(PaymentComponent.Root, { pricingServiceSelections: pricingServiceSelections, children: children })) }));
+    const { children, asChild, className } = props;
+    return (_jsx(CoreBooking.PaymentData, { children: ({ pricingServiceSelections }) => (_jsx(PaymentComponent.Root, { pricingServiceSelections: pricingServiceSelections, asChild: asChild, className: className, children: children })) }));
 }
 /**
  * Wraps Location context with the location from the booking context.

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

@@ -95,6 +95,8 @@ export interface LineItem {
     deposit: MoneyData | null;
     /** Custom price text (for CUSTOM rate type) */
     priceText: string | null;
+    /** Whether this is a free service (NO_FEE rate type) */
+    isFree: boolean;
 }
 /**
  * Props for LineItems render prop component

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

@@ -77,12 +77,13 @@ export function Data(props) {
     const discount = convertMultiCurrencyPriceToMoneyData(priceSummary?.discount, currency);
     const payNow = convertMultiCurrencyPriceToMoneyData(paymentDetails?.response?.payNow?.total, currency);
     const payLater = convertMultiCurrencyPriceToMoneyData(paymentDetails?.response?.payLater?.total, currency);
-    // Get priceText from first line item (single service mode)
+    // Get priceText and isFree from first line item (single service mode)
     const additionalInfoList = paymentDetails?.additionalInfo?.lineItems || [];
     const firstLineItemInfo = additionalInfoList[0];
     const priceText = firstLineItemInfo?.priceText || null;
     const hasPriceText = !!priceText;
-    const isFree = total !== null && total.amount === 0 && !hasPriceText;
+    // Use isFree from service (NO_FEE rate type) if available, otherwise fallback to amount check
+    const isFree = firstLineItemInfo?.isFree ?? false;
     // Computed flags
     const hasTax = tax !== null && tax.amount > 0;
     const hasDiscount = discount !== null && discount.amount > 0;
@@ -145,6 +146,7 @@ export function LineItems(props) {
             discount: convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.totalDiscount, currency),
             deposit: convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.depositAmount, currency),
             priceText: additionalInfo?.priceText || null,
+            isFree: additionalInfo?.isFree ?? false,
         };
     });
     const hasLineItems = lineItems.length > 0;
@@ -212,9 +214,6 @@ export function LineItemInfo(props) {
     const { lineItem, currency } = useLineItemContext();
     // Computed flags
     const hasPriceText = !!lineItem.priceText;
-    const isFree = lineItem.totalPrice !== null &&
-        lineItem.totalPrice.amount === 0 &&
-        !hasPriceText;
     const hasDiscount = lineItem.discount !== null && lineItem.discount.amount > 0;
     const hasDeposit = lineItem.deposit !== null && lineItem.deposit.amount > 0;
     return props.children({
@@ -227,7 +226,7 @@ export function LineItemInfo(props) {
         deposit: lineItem.deposit,
         priceText: lineItem.priceText,
         hasPriceText,
-        isFree,
+        isFree: lineItem.isFree,
         hasDiscount,
         hasDeposit,
     });

package/cjs/dist/react/core/service/Service.d.ts

@@ -4,7 +4,7 @@
  */
 import React from 'react';
 import { type ServiceServiceConfig } from '../../../services/service/service.js';
-import type { Service, Payment, BookingPolicy, Schedule } from '@wix/auto_sdk_bookings_services';
+import type { Service, Payment, BookingPolicy, Schedule, StaffMember } from '@wix/auto_sdk_bookings_services';
 import type { MoneyData } from '@wix/headless-components/react';
 /**
  * Props for Service.Root component
@@ -56,10 +56,7 @@ export interface InfoProps {
             _id?: string;
         };
         locations?: Array<NonNullable<Service['locations']>[number]>;
-        staff?: Array<{
-            name?: string;
-            _id?: string;
-        }>;
+        staff?: StaffMember[];
         media?: Array<{
             url?: string;
             _id?: string;

package/cjs/dist/react/core/service/Service.js

@@ -92,10 +92,7 @@ export function Info(props) {
     const duration = service.schedule?.availabilityConstraints?.sessionDurations?.[0];
     // Get staff members from staffMemberDetails.staffMembers
     // (available when using conditionalFields: ['STAFF_MEMBER_DETAILS'] in queryServices)
-    const staff = service.staffMembers?.map((member) => ({
-        _id: member.staffMemberId,
-        name: member.name || undefined,
-    })) || [];
+    const staff = service.staffMembers || [];
     // Convert mainMedia to WixMediaImage format
     // Handle both snake_case (main_media) and camelCase (mainMedia) from API
     // Handle both string and object formats for image

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

@@ -179,12 +179,13 @@ export interface PayNowProps {
     asChild?: boolean;
     children?: AsChildChildren<{
         payNow: MoneyData | null;
+        isDeposit: boolean;
     }>;
     className?: string;
 }
 /**
- * Displays the pay now amount (for deposit scenarios).
- * Uses data-has-deposit attribute for conditional visibility.
+ * Displays the pay now amount (amount to pay upfront in deposit scenarios).
+ * Only renders in deposit mode when payNow has a valid amount.
  *
  * @component
  * @example
@@ -200,12 +201,13 @@ export interface PayLaterProps {
     asChild?: boolean;
     children?: AsChildChildren<{
         payLater: MoneyData | null;
+        isDeposit: boolean;
     }>;
     className?: string;
 }
 /**
  * Displays the pay later amount (for deposit scenarios).
- * Uses data-has-deposit attribute for conditional visibility.
+ * Only renders when in deposit mode and payLater has a valid amount.
  *
  * @component
  * @example

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

@@ -150,8 +150,8 @@ export const Total = React.forwardRef((props, ref) => {
 });
 Total.displayName = 'Payment.Total';
 /**
- * Displays the pay now amount (for deposit scenarios).
- * Uses data-has-deposit attribute for conditional visibility.
+ * Displays the pay now amount (amount to pay upfront in deposit scenarios).
+ * Only renders in deposit mode when payNow has a valid amount.
  *
  * @component
  * @example
@@ -161,12 +161,12 @@ Total.displayName = 'Payment.Total';
  */
 export const PayNow = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    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 }) })) }));
+    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, isDeposit }, children: isDeposit && payNow && payNow.amount > 0 && (_jsx(Money, { money: payNow })) })) }));
 });
 PayNow.displayName = 'Payment.PayNow';
 /**
  * Displays the pay later amount (for deposit scenarios).
- * Uses data-has-deposit attribute for conditional visibility.
+ * Only renders when in deposit mode and payLater has a valid amount.
  *
  * @component
  * @example
@@ -176,7 +176,7 @@ PayNow.displayName = 'Payment.PayNow';
  */
 export const PayLater = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    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 }) })) }));
+    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, isDeposit }, children: isDeposit && payLater && payLater.amount > 0 && (_jsx(Money, { money: payLater })) })) }));
 });
 PayLater.displayName = 'Payment.PayLater';
 /**

package/cjs/dist/react/staff-member/StaffMemberList.d.ts

@@ -9,13 +9,6 @@ import { GenericListRepeaterProps, type ListVariant } from '@wix/headless-compon
 import { type AsChildChildren } from '@wix/headless-utils/react';
 import type { StaffMemberListServiceConfig } from '../../services/staff-member-list/staff-member-list.js';
 import type { StaffMemberData } from '../../services/staff-member-list/staff-member-list.def.js';
-/**
- * Staff member with id for list rendering
- * Uses staffMemberId as the id (which equals resource id)
- */
-interface StaffMemberWithId extends StaffMemberData {
-    id: string;
-}
 /**
  * Props for the StaffMemberList root component
  */
@@ -73,7 +66,7 @@ export declare const StaffMembers: React.ForwardRefExoticComponent<StaffMembersP
 /**
  * Props for StaffMemberList.StaffMemberRepeater component
  */
-export type StaffMemberRepeaterProps = GenericListRepeaterProps<StaffMemberWithId>;
+export type StaffMemberRepeaterProps = GenericListRepeaterProps<StaffMemberData>;
 export declare const StaffMemberRepeater: React.ForwardRefExoticComponent<StaffMemberRepeaterProps & React.RefAttributes<HTMLElement>>;
 /**
  * Props for StaffMemberList.Totals component
@@ -120,4 +113,3 @@ export interface ClearProps {
 export declare const Actions: {
     Clear: React.ForwardRefExoticComponent<ClearProps & React.RefAttributes<HTMLButtonElement>>;
 };
-export {};

package/cjs/dist/react/staff-member/StaffMemberList.js

@@ -59,10 +59,9 @@ Root.displayName = 'StaffMemberList.Root';
 const RootContent = React.forwardRef((props, ref) => {
     const { children, className, variant } = props;
     return (_jsx(CoreStaffMemberList.StaffMembers, { children: ({ staffMembers, isLoading }) => {
-            // Add id to each staff member for GenericList (staffMemberId equals resource id)
-            const itemsWithId = staffMembers.map((staffMember, index) => ({
+            const itemsWithId = staffMembers.map((staffMember) => ({
                 ...staffMember,
-                id: staffMember.staffMemberId || String(index),
+                id: staffMember.staffMemberId,
             }));
             return (_jsx(GenericList.Root, { items: itemsWithId, hasMore: false, isLoading: isLoading, className: className, ref: ref, "data-testid": TestIds.staffMemberListRoot, variant: variant, children: children }));
         } }));
@@ -90,8 +89,8 @@ StaffMembers.displayName = 'StaffMemberList.StaffMembers';
 export const StaffMemberRepeater = React.forwardRef((props, ref) => {
     const { children } = props;
     // Custom itemWrapper that wraps each item in StaffMember.Root
-    const staffMemberItemWrapper = ({ item: staffMemberWithId, children: itemChildren, }) => {
-        return (_jsx(StaffMember.Root, { staffMember: staffMemberWithId, "data-testid": TestIds.staffMemberListStaffMember, "data-staff-member-id": staffMemberWithId.id, "data-item-id": staffMemberWithId.id, children: itemChildren }, staffMemberWithId.id));
+    const staffMemberItemWrapper = ({ item: staffMember, children: itemChildren, }) => {
+        return (_jsx(StaffMember.Root, { staffMember: staffMember, "data-testid": TestIds.staffMemberListStaffMember, "data-staff-member-id": staffMember.staffMemberId, "data-item-id": staffMember.staffMemberId, children: itemChildren }, staffMember.staffMemberId));
     };
     return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: staffMemberItemWrapper, children: children }));
 });

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

@@ -17,6 +17,8 @@ export interface LineItemAdditionalInfo {
     lineItemId: string;
     /** Custom price text (for CUSTOM rate type services) */
     priceText?: string;
+    /** Whether this is a free service (NO_FEE rate type) */
+    isFree?: boolean;
 }
 /**
  * Payment calculation result with SDK response and additional computed info

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

@@ -23,7 +23,8 @@ function getAdditionalInfo(service, lineItemId) {
     const priceText = payment?.rateType === RateType.CUSTOM && payment.custom?.description
         ? payment.custom.description
         : undefined;
-    return { lineItemId, priceText };
+    const isFree = payment?.rateType === RateType.NO_FEE;
+    return { lineItemId, priceText, isFree };
 }
 function getPaymentOption(service, hasDeposit) {
     const options = service.payment?.options;

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

@@ -192,31 +192,32 @@ export declare function TimeSlot(props: BookingTimeSlotProps): React.ReactNode;
  * Props for Booking.Payment component
  */
 export interface BookingPaymentProps {
-    children: React.ReactNode;
+    children?: React.ReactNode | ((props: {
+        isLoading: boolean;
+        hasError: boolean;
+    }) => React.ReactNode);
+    asChild?: boolean;
+    className?: string;
 }
 /**
  * Wraps Payment.Root with all services from all booking items.
  * Should be used outside of ItemRepeater - it calculates payment for all items.
  * Children can use all Payment.* components (Payment.Total, Payment.Subtotal, etc.).
- * Always renders with data-has-payment attribute for CSS targeting.
+ * Supports asChild to expose { isLoading, hasError } to children.
  *
  * @component
  * @example
  * ```tsx
- * <Booking.Root>
- *   <Booking.ItemsRoot>
- *     <Booking.Items>
- *       <Booking.ItemRepeater>
- *         <Booking.Service><Service.Name /></Booking.Service>
- *       </Booking.ItemRepeater>
- *     </Booking.Items>
- *   </Booking.ItemsRoot>
+ * // Standard usage
+ * <Booking.Payment>
+ *   <Payment.Total className="text-xl font-bold" />
+ *   <Payment.Subtotal />
+ * </Booking.Payment>
  *
- *   <Booking.Payment>
- *     <Payment.Total className="text-xl font-bold" />
- *     <Payment.Subtotal />
- *   </Booking.Payment>
- * </Booking.Root>
+ * // With asChild to access isLoading
+ * <Booking.Payment asChild>
+ *   {({ isLoading }) => isLoading ? <Skeleton /> : <PaymentSection />}
+ * </Booking.Payment>
  * ```
  */
 export declare function Payment(props: BookingPaymentProps): React.ReactNode;

package/dist/react/booking/Booking.js

@@ -204,30 +204,26 @@ export function TimeSlot(props) {
  * Wraps Payment.Root with all services from all booking items.
  * Should be used outside of ItemRepeater - it calculates payment for all items.
  * Children can use all Payment.* components (Payment.Total, Payment.Subtotal, etc.).
- * Always renders with data-has-payment attribute for CSS targeting.
+ * Supports asChild to expose { isLoading, hasError } to children.
  *
  * @component
  * @example
  * ```tsx
- * <Booking.Root>
- *   <Booking.ItemsRoot>
- *     <Booking.Items>
- *       <Booking.ItemRepeater>
- *         <Booking.Service><Service.Name /></Booking.Service>
- *       </Booking.ItemRepeater>
- *     </Booking.Items>
- *   </Booking.ItemsRoot>
+ * // Standard usage
+ * <Booking.Payment>
+ *   <Payment.Total className="text-xl font-bold" />
+ *   <Payment.Subtotal />
+ * </Booking.Payment>
  *
- *   <Booking.Payment>
- *     <Payment.Total className="text-xl font-bold" />
- *     <Payment.Subtotal />
- *   </Booking.Payment>
- * </Booking.Root>
+ * // With asChild to access isLoading
+ * <Booking.Payment asChild>
+ *   {({ isLoading }) => isLoading ? <Skeleton /> : <PaymentSection />}
+ * </Booking.Payment>
  * ```
  */
 export function Payment(props) {
-    const { children } = props;
-    return (_jsx(CoreBooking.PaymentData, { children: ({ pricingServiceSelections }) => (_jsx(PaymentComponent.Root, { pricingServiceSelections: pricingServiceSelections, children: children })) }));
+    const { children, asChild, className } = props;
+    return (_jsx(CoreBooking.PaymentData, { children: ({ pricingServiceSelections }) => (_jsx(PaymentComponent.Root, { pricingServiceSelections: pricingServiceSelections, asChild: asChild, className: className, children: children })) }));
 }
 /**
  * Wraps Location context with the location from the booking context.

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

@@ -95,6 +95,8 @@ export interface LineItem {
     deposit: MoneyData | null;
     /** Custom price text (for CUSTOM rate type) */
     priceText: string | null;
+    /** Whether this is a free service (NO_FEE rate type) */
+    isFree: boolean;
 }
 /**
  * Props for LineItems render prop component

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

@@ -77,12 +77,13 @@ export function Data(props) {
     const discount = convertMultiCurrencyPriceToMoneyData(priceSummary?.discount, currency);
     const payNow = convertMultiCurrencyPriceToMoneyData(paymentDetails?.response?.payNow?.total, currency);
     const payLater = convertMultiCurrencyPriceToMoneyData(paymentDetails?.response?.payLater?.total, currency);
-    // Get priceText from first line item (single service mode)
+    // Get priceText and isFree from first line item (single service mode)
     const additionalInfoList = paymentDetails?.additionalInfo?.lineItems || [];
     const firstLineItemInfo = additionalInfoList[0];
     const priceText = firstLineItemInfo?.priceText || null;
     const hasPriceText = !!priceText;
-    const isFree = total !== null && total.amount === 0 && !hasPriceText;
+    // Use isFree from service (NO_FEE rate type) if available, otherwise fallback to amount check
+    const isFree = firstLineItemInfo?.isFree ?? false;
     // Computed flags
     const hasTax = tax !== null && tax.amount > 0;
     const hasDiscount = discount !== null && discount.amount > 0;
@@ -145,6 +146,7 @@ export function LineItems(props) {
             discount: convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.totalDiscount, currency),
             deposit: convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.depositAmount, currency),
             priceText: additionalInfo?.priceText || null,
+            isFree: additionalInfo?.isFree ?? false,
         };
     });
     const hasLineItems = lineItems.length > 0;
@@ -212,9 +214,6 @@ export function LineItemInfo(props) {
     const { lineItem, currency } = useLineItemContext();
     // Computed flags
     const hasPriceText = !!lineItem.priceText;
-    const isFree = lineItem.totalPrice !== null &&
-        lineItem.totalPrice.amount === 0 &&
-        !hasPriceText;
     const hasDiscount = lineItem.discount !== null && lineItem.discount.amount > 0;
     const hasDeposit = lineItem.deposit !== null && lineItem.deposit.amount > 0;
     return props.children({
@@ -227,7 +226,7 @@ export function LineItemInfo(props) {
         deposit: lineItem.deposit,
         priceText: lineItem.priceText,
         hasPriceText,
-        isFree,
+        isFree: lineItem.isFree,
         hasDiscount,
         hasDeposit,
     });

package/dist/react/core/service/Service.d.ts

@@ -4,7 +4,7 @@
  */
 import React from 'react';
 import { type ServiceServiceConfig } from '../../../services/service/service.js';
-import type { Service, Payment, BookingPolicy, Schedule } from '@wix/auto_sdk_bookings_services';
+import type { Service, Payment, BookingPolicy, Schedule, StaffMember } from '@wix/auto_sdk_bookings_services';
 import type { MoneyData } from '@wix/headless-components/react';
 /**
  * Props for Service.Root component
@@ -56,10 +56,7 @@ export interface InfoProps {
             _id?: string;
         };
         locations?: Array<NonNullable<Service['locations']>[number]>;
-        staff?: Array<{
-            name?: string;
-            _id?: string;
-        }>;
+        staff?: StaffMember[];
         media?: Array<{
             url?: string;
             _id?: string;

package/dist/react/core/service/Service.js

@@ -92,10 +92,7 @@ export function Info(props) {
     const duration = service.schedule?.availabilityConstraints?.sessionDurations?.[0];
     // Get staff members from staffMemberDetails.staffMembers
     // (available when using conditionalFields: ['STAFF_MEMBER_DETAILS'] in queryServices)
-    const staff = service.staffMembers?.map((member) => ({
-        _id: member.staffMemberId,
-        name: member.name || undefined,
-    })) || [];
+    const staff = service.staffMembers || [];
     // Convert mainMedia to WixMediaImage format
     // Handle both snake_case (main_media) and camelCase (mainMedia) from API
     // Handle both string and object formats for image

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

@@ -179,12 +179,13 @@ export interface PayNowProps {
     asChild?: boolean;
     children?: AsChildChildren<{
         payNow: MoneyData | null;
+        isDeposit: boolean;
     }>;
     className?: string;
 }
 /**
- * Displays the pay now amount (for deposit scenarios).
- * Uses data-has-deposit attribute for conditional visibility.
+ * Displays the pay now amount (amount to pay upfront in deposit scenarios).
+ * Only renders in deposit mode when payNow has a valid amount.
  *
  * @component
  * @example
@@ -200,12 +201,13 @@ export interface PayLaterProps {
     asChild?: boolean;
     children?: AsChildChildren<{
         payLater: MoneyData | null;
+        isDeposit: boolean;
     }>;
     className?: string;
 }
 /**
  * Displays the pay later amount (for deposit scenarios).
- * Uses data-has-deposit attribute for conditional visibility.
+ * Only renders when in deposit mode and payLater has a valid amount.
  *
  * @component
  * @example

package/dist/react/payment/Payment.js

@@ -150,8 +150,8 @@ export const Total = React.forwardRef((props, ref) => {
 });
 Total.displayName = 'Payment.Total';
 /**
- * Displays the pay now amount (for deposit scenarios).
- * Uses data-has-deposit attribute for conditional visibility.
+ * Displays the pay now amount (amount to pay upfront in deposit scenarios).
+ * Only renders in deposit mode when payNow has a valid amount.
  *
  * @component
  * @example
@@ -161,12 +161,12 @@ Total.displayName = 'Payment.Total';
  */
 export const PayNow = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    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 }) })) }));
+    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, isDeposit }, children: isDeposit && payNow && payNow.amount > 0 && (_jsx(Money, { money: payNow })) })) }));
 });
 PayNow.displayName = 'Payment.PayNow';
 /**
  * Displays the pay later amount (for deposit scenarios).
- * Uses data-has-deposit attribute for conditional visibility.
+ * Only renders when in deposit mode and payLater has a valid amount.
  *
  * @component
  * @example
@@ -176,7 +176,7 @@ PayNow.displayName = 'Payment.PayNow';
  */
 export const PayLater = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    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 }) })) }));
+    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, isDeposit }, children: isDeposit && payLater && payLater.amount > 0 && (_jsx(Money, { money: payLater })) })) }));
 });
 PayLater.displayName = 'Payment.PayLater';
 /**

package/dist/react/staff-member/StaffMemberList.d.ts

@@ -9,13 +9,6 @@ import { GenericListRepeaterProps, type ListVariant } from '@wix/headless-compon
 import { type AsChildChildren } from '@wix/headless-utils/react';
 import type { StaffMemberListServiceConfig } from '../../services/staff-member-list/staff-member-list.js';
 import type { StaffMemberData } from '../../services/staff-member-list/staff-member-list.def.js';
-/**
- * Staff member with id for list rendering
- * Uses staffMemberId as the id (which equals resource id)
- */
-interface StaffMemberWithId extends StaffMemberData {
-    id: string;
-}
 /**
  * Props for the StaffMemberList root component
  */
@@ -73,7 +66,7 @@ export declare const StaffMembers: React.ForwardRefExoticComponent<StaffMembersP
 /**
  * Props for StaffMemberList.StaffMemberRepeater component
  */
-export type StaffMemberRepeaterProps = GenericListRepeaterProps<StaffMemberWithId>;
+export type StaffMemberRepeaterProps = GenericListRepeaterProps<StaffMemberData>;
 export declare const StaffMemberRepeater: React.ForwardRefExoticComponent<StaffMemberRepeaterProps & React.RefAttributes<HTMLElement>>;
 /**
  * Props for StaffMemberList.Totals component
@@ -120,4 +113,3 @@ export interface ClearProps {
 export declare const Actions: {
     Clear: React.ForwardRefExoticComponent<ClearProps & React.RefAttributes<HTMLButtonElement>>;
 };
-export {};

package/dist/react/staff-member/StaffMemberList.js

@@ -59,10 +59,9 @@ Root.displayName = 'StaffMemberList.Root';
 const RootContent = React.forwardRef((props, ref) => {
     const { children, className, variant } = props;
     return (_jsx(CoreStaffMemberList.StaffMembers, { children: ({ staffMembers, isLoading }) => {
-            // Add id to each staff member for GenericList (staffMemberId equals resource id)
-            const itemsWithId = staffMembers.map((staffMember, index) => ({
+            const itemsWithId = staffMembers.map((staffMember) => ({
                 ...staffMember,
-                id: staffMember.staffMemberId || String(index),
+                id: staffMember.staffMemberId,
             }));
             return (_jsx(GenericList.Root, { items: itemsWithId, hasMore: false, isLoading: isLoading, className: className, ref: ref, "data-testid": TestIds.staffMemberListRoot, variant: variant, children: children }));
         } }));
@@ -90,8 +89,8 @@ StaffMembers.displayName = 'StaffMemberList.StaffMembers';
 export const StaffMemberRepeater = React.forwardRef((props, ref) => {
     const { children } = props;
     // Custom itemWrapper that wraps each item in StaffMember.Root
-    const staffMemberItemWrapper = ({ item: staffMemberWithId, children: itemChildren, }) => {
-        return (_jsx(StaffMember.Root, { staffMember: staffMemberWithId, "data-testid": TestIds.staffMemberListStaffMember, "data-staff-member-id": staffMemberWithId.id, "data-item-id": staffMemberWithId.id, children: itemChildren }, staffMemberWithId.id));
+    const staffMemberItemWrapper = ({ item: staffMember, children: itemChildren, }) => {
+        return (_jsx(StaffMember.Root, { staffMember: staffMember, "data-testid": TestIds.staffMemberListStaffMember, "data-staff-member-id": staffMember.staffMemberId, "data-item-id": staffMember.staffMemberId, children: itemChildren }, staffMember.staffMemberId));
     };
     return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: staffMemberItemWrapper, children: children }));
 });

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

@@ -17,6 +17,8 @@ export interface LineItemAdditionalInfo {
     lineItemId: string;
     /** Custom price text (for CUSTOM rate type services) */
     priceText?: string;
+    /** Whether this is a free service (NO_FEE rate type) */
+    isFree?: boolean;
 }
 /**
  * Payment calculation result with SDK response and additional computed info

package/dist/services/payment/payment.js

@@ -23,7 +23,8 @@ function getAdditionalInfo(service, lineItemId) {
     const priceText = payment?.rateType === RateType.CUSTOM && payment.custom?.description
         ? payment.custom.description
         : undefined;
-    return { lineItemId, priceText };
+    const isFree = payment?.rateType === RateType.NO_FEE;
+    return { lineItemId, priceText, isFree };
 }
 function getPaymentOption(service, hasDeposit) {
     const options = service.payment?.options;

package/package.json

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