@wix/headless-bookings 0.0.60 → 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/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/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/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/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.60",
+  "version": "0.0.61",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -72,5 +72,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "42dc732173b7489bf0966f3c1db262dcc4ca3ee26f306b3ae0c74c8d"
+  "falconPackageHash": "cd07fd84714c0aeec8926487334181ea2b0381b631c601891b559528"
 }