@wix/headless-bookings 0.0.38 → 0.0.40

package/cjs/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 PaymentDetails, type SlotService } from '../../../services/payment/payment.js';
+import { type PaymentServiceConfig, type SlotService } from '../../../services/payment/payment.js';
 import type { MoneyData } from '@wix/headless-components/react';
 /**
  * Props for Payment.Root component
@@ -33,122 +33,89 @@ export interface RootProps {
  * ```tsx
  * // SSR mode
  * <Payment.Root paymentServiceConfig={{ paymentDetails }}>
- *   <Payment.Summary />
+ *   <Payment.Total />
  * </Payment.Root>
  *
  * // Lazy loading mode
  * <Payment.Root slotServices={[...]} numberOfParticipants={2}>
- *   {({ isLoading }) => isLoading ? <div>Loading...</div> : <Payment.Summary />}
+ *   {({ isLoading }) => isLoading ? <div>Loading...</div> : <Payment.Total />}
  * </Payment.Root>
  *
  * // Reactive mode
  * <Payment.Root>
- *   <Payment.Summary />
+ *   <Payment.Total />
  * </Payment.Root>
  * ```
  */
 export declare function Root(props: RootProps): React.ReactNode;
 /**
- * Props for Payment render prop component
+ * Props for Data render prop component
  */
-export interface PaymentProps {
-    children: (data: {
-        paymentDetails: PaymentDetails | null;
-        isLoading: boolean;
-        error: string | null;
-    }) => React.ReactNode;
-}
-/**
- * Core component that provides access to full payment details via render props.
- *
- * @component
- * @example
- * ```tsx
- * <Payment.Payment>
- *   {({ paymentDetails, isLoading, error }) => (
- *     isLoading ? <div>Loading...</div> : <div>{JSON.stringify(paymentDetails)}</div>
- *   )}
- * </Payment.Payment>
- * ```
- */
-export declare function Payment(props: PaymentProps): React.ReactNode;
-/**
- * Props for Summary render prop component
- */
-export interface SummaryProps {
+export interface DataProps {
     children: (data: {
         subtotal: MoneyData | null;
         total: MoneyData | null;
-        currency: string;
         tax: MoneyData | null;
-        hasTax: boolean;
         discount: MoneyData | null;
-        hasDiscount: boolean;
         payNow: MoneyData | null;
         payLater: MoneyData | null;
-        isDeposit: boolean;
+        currency: string;
+        isLoading: boolean;
+        error: string | null;
     }) => React.ReactNode;
 }
 /**
- * Core component that provides access to payment summary totals via render props.
- * Returns all pricing totals with MoneyData format for the Money component.
- * Use data-attributes for conditional visibility via CSS.
+ * Core component that provides access to converted payment data.
+ * Returns MoneyData for each price field, ready for rendering.
  *
  * @component
- * @example
- * ```tsx
- * <Payment.Summary>
- *   {({ subtotal, tax, total, hasTax, hasDiscount, discount, isDeposit, payNow }) => (
- *     <div>
- *       <div>Subtotal: <Money money={subtotal} /></div>
- *       <div data-has-tax={hasTax}>Tax: <Money money={tax} /></div>
- *       <div data-has-discount={hasDiscount}>Discount: <Money money={discount} /></div>
- *       <div>Total: <Money money={total} /></div>
- *       <div data-has-deposit={isDeposit}>Pay Now: <Money money={payNow} /></div>
- *     </div>
- *   )}
- * </Payment.Summary>
- * ```
  */
-export declare function Summary(props: SummaryProps): React.ReactNode;
-import type { CalculatedLineItem as ApiCalculatedLineItem } from '@wix/auto_sdk_ecom_totals-calculator';
-import type { LineItemAdditionalInfo } from '../../../services/payment/payment.js';
+export declare function Data(props: DataProps): React.ReactNode;
 /**
- * Combined line item with SDK data and additional computed info
+ * Line item with pre-converted MoneyData prices
  */
-export interface CombinedLineItem {
-    /** SDK line item data */
-    sdkLineItem: ApiCalculatedLineItem;
-    /** Additional computed info */
-    additionalInfo: LineItemAdditionalInfo | undefined;
+export interface LineItem {
+    /** Unique identifier */
+    id: string;
+    /** Total price after tax */
+    totalPrice: MoneyData | null;
+    /** Subtotal (full price before discounts) */
+    subtotal: MoneyData | null;
+    /** Tax amount */
+    tax: MoneyData | null;
+    /** Discount amount */
+    discount: MoneyData | null;
+    /** Deposit amount */
+    deposit: MoneyData | null;
+    /** Custom price text (for CUSTOM rate type) */
+    priceText: string | null;
 }
 /**
  * Props for LineItems render prop component
  */
 export interface LineItemsProps {
     children: (data: {
-        lineItems: CombinedLineItem[];
+        lineItems: LineItem[];
         hasLineItems: boolean;
         currency: string;
+        isLoading: boolean;
+        error: string | null;
     }) => React.ReactNode;
 }
 /**
  * Core component that provides access to calculated line items via render props.
- * Combines SDK line items with additional computed info.
- * Note: Currently supports single service only (always 1 line item).
+ * Returns line items with pre-converted MoneyData prices.
  *
  * @component
  * @example
  * ```tsx
  * <Payment.LineItems>
- *   {({ lineItems, hasLineItems, currency }) => (
+ *   {({ lineItems, hasLineItems, currency, isLoading, error }) => (
  *     <ul data-has-items={hasLineItems}>
  *       {lineItems.map((item) => (
- *         <Payment.LineItem key={item.sdkLineItem.lineItemId} lineItem={item} currency={currency}>
- *           {({ totalPriceAfterTaxAndDiscount }) => (
- *             <li><Money money={totalPriceAfterTaxAndDiscount} /></li>
- *           )}
- *         </Payment.LineItem>
+ *         <li key={item.id}>
+ *           <Money money={item.totalPrice} />
+ *         </li>
  *       ))}
  *     </ul>
  *   )}
@@ -156,38 +123,3 @@ export interface LineItemsProps {
  * ```
  */
 export declare function LineItems(props: LineItemsProps): React.ReactNode;
-/**
- * Props for LineItem render prop component
- */
-export interface LineItemProps {
-    lineItem: CombinedLineItem;
-    currency: string;
-    children: (data: {
-        totalPrice: MoneyData | null;
-        subtotal: MoneyData | null;
-        tax: MoneyData | null;
-        discount: MoneyData | null;
-        deposit: MoneyData | null;
-        priceText: string | null;
-    }) => React.ReactNode;
-}
-/**
- * Core component that provides access to a single line item via render props.
- * Use data-attributes for conditional visibility via CSS.
- *
- * @component
- * @example
- * ```tsx
- * <Payment.LineItem lineItem={item} currency="USD">
- *   {({ totalPrice, subtotal, tax, discount, deposit, priceText }) => (
- *     <div>
- *       <span><Money money={totalPrice} /></span>
- *       <span data-has-discount={!!discount?.amount}><Money money={discount} /></span>
- *       <span data-has-deposit={!!deposit?.amount}><Money money={deposit} /></span>
- *       <span data-has-price-text={!!priceText}>{priceText}</span>
- *     </div>
- *   )}
- * </Payment.LineItem>
- * ```
- */
-export declare function LineItem(props: LineItemProps): React.ReactNode;

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

@@ -28,17 +28,17 @@ function RootContent({ children, }) {
  * ```tsx
  * // SSR mode
  * <Payment.Root paymentServiceConfig={{ paymentDetails }}>
- *   <Payment.Summary />
+ *   <Payment.Total />
  * </Payment.Root>
  *
  * // Lazy loading mode
  * <Payment.Root slotServices={[...]} numberOfParticipants={2}>
- *   {({ isLoading }) => isLoading ? <div>Loading...</div> : <Payment.Summary />}
+ *   {({ isLoading }) => isLoading ? <div>Loading...</div> : <Payment.Total />}
  * </Payment.Root>
  *
  * // Reactive mode
  * <Payment.Root>
- *   <Payment.Summary />
+ *   <Payment.Total />
  * </Payment.Root>
  * ```
  */
@@ -53,93 +53,40 @@ export function Root(props) {
     return (_jsx(WixServices, { servicesMap: createServicesMap().addService(PaymentServiceDefinition, PaymentService, internalConfig), children: _jsx(RootContent, { children: children }) }));
 }
 /**
- * Core component that provides access to full payment details via render props.
+ * Core component that provides access to converted payment data.
+ * Returns MoneyData for each price field, ready for rendering.
  *
  * @component
- * @example
- * ```tsx
- * <Payment.Payment>
- *   {({ paymentDetails, isLoading, error }) => (
- *     isLoading ? <div>Loading...</div> : <div>{JSON.stringify(paymentDetails)}</div>
- *   )}
- * </Payment.Payment>
- * ```
  */
-export function Payment(props) {
+export function Data(props) {
     const paymentService = useService(PaymentServiceDefinition);
     const paymentDetails = paymentService.paymentDetailsSignal.get();
     const isLoading = paymentService.isLoadingSignal.get();
     const error = paymentService.errorSignal.get();
-    return props.children({ paymentDetails, isLoading, error });
-}
-/**
- * Core component that provides access to payment summary totals via render props.
- * Returns all pricing totals with MoneyData format for the Money component.
- * Use data-attributes for conditional visibility via CSS.
- *
- * @component
- * @example
- * ```tsx
- * <Payment.Summary>
- *   {({ subtotal, tax, total, hasTax, hasDiscount, discount, isDeposit, payNow }) => (
- *     <div>
- *       <div>Subtotal: <Money money={subtotal} /></div>
- *       <div data-has-tax={hasTax}>Tax: <Money money={tax} /></div>
- *       <div data-has-discount={hasDiscount}>Discount: <Money money={discount} /></div>
- *       <div>Total: <Money money={total} /></div>
- *       <div data-has-deposit={isDeposit}>Pay Now: <Money money={payNow} /></div>
- *     </div>
- *   )}
- * </Payment.Summary>
- * ```
- */
-export function Summary(props) {
-    const paymentService = useService(PaymentServiceDefinition);
-    const paymentDetails = paymentService.paymentDetailsSignal.get();
     const currency = paymentDetails?.response?.currency || 'USD';
     const priceSummary = paymentDetails?.response?.priceSummary;
-    // Always present
     const subtotal = convertMultiCurrencyPriceToMoneyData(priceSummary?.subtotal, currency);
     const total = convertMultiCurrencyPriceToMoneyData(priceSummary?.total, currency);
-    // May or may not exist
     const tax = convertMultiCurrencyPriceToMoneyData(priceSummary?.tax, currency);
-    const hasTax = tax !== null && tax.amount > 0;
     const discount = convertMultiCurrencyPriceToMoneyData(priceSummary?.discount, currency);
-    const hasDiscount = discount !== null && discount.amount > 0;
-    // Deposit scenarios only
     const payNow = convertMultiCurrencyPriceToMoneyData(paymentDetails?.response?.payNow?.total, currency);
     const payLater = convertMultiCurrencyPriceToMoneyData(paymentDetails?.response?.payLater?.total, currency);
-    const isDeposit = payNow !== null && total !== null && payNow.amount < total.amount;
-    return props.children({
-        subtotal,
-        total,
-        currency,
-        tax,
-        hasTax,
-        discount,
-        hasDiscount,
-        payNow,
-        payLater,
-        isDeposit,
-    });
+    return props.children({ subtotal, total, tax, discount, payNow, payLater, currency, isLoading, error });
 }
 /**
  * Core component that provides access to calculated line items via render props.
- * Combines SDK line items with additional computed info.
- * Note: Currently supports single service only (always 1 line item).
+ * Returns line items with pre-converted MoneyData prices.
  *
  * @component
  * @example
  * ```tsx
  * <Payment.LineItems>
- *   {({ lineItems, hasLineItems, currency }) => (
+ *   {({ lineItems, hasLineItems, currency, isLoading, error }) => (
  *     <ul data-has-items={hasLineItems}>
  *       {lineItems.map((item) => (
- *         <Payment.LineItem key={item.sdkLineItem.lineItemId} lineItem={item} currency={currency}>
- *           {({ totalPriceAfterTaxAndDiscount }) => (
- *             <li><Money money={totalPriceAfterTaxAndDiscount} /></li>
- *           )}
- *         </Payment.LineItem>
+ *         <li key={item.id}>
+ *           <Money money={item.totalPrice} />
+ *         </li>
  *       ))}
  *     </ul>
  *   )}
@@ -149,54 +96,25 @@ export function Summary(props) {
 export function LineItems(props) {
     const paymentService = useService(PaymentServiceDefinition);
     const paymentDetails = paymentService.paymentDetailsSignal.get();
+    const isLoading = paymentService.isLoadingSignal.get();
+    const error = paymentService.errorSignal.get();
     const sdkLineItems = paymentDetails?.response?.calculatedLineItems || [];
     const additionalInfoList = paymentDetails?.additionalInfo?.lineItems || [];
     const currency = paymentDetails?.response?.currency || 'USD';
-    // Combine SDK line items with additional info
-    const lineItems = sdkLineItems.map((sdkLineItem) => ({
-        sdkLineItem,
-        additionalInfo: additionalInfoList.find((info) => info.lineItemId === sdkLineItem.lineItemId),
-    }));
-    const hasLineItems = lineItems.length > 0;
-    return props.children({ lineItems, hasLineItems, currency });
-}
-/**
- * Core component that provides access to a single line item via render props.
- * Use data-attributes for conditional visibility via CSS.
- *
- * @component
- * @example
- * ```tsx
- * <Payment.LineItem lineItem={item} currency="USD">
- *   {({ totalPrice, subtotal, tax, discount, deposit, priceText }) => (
- *     <div>
- *       <span><Money money={totalPrice} /></span>
- *       <span data-has-discount={!!discount?.amount}><Money money={discount} /></span>
- *       <span data-has-deposit={!!deposit?.amount}><Money money={deposit} /></span>
- *       <span data-has-price-text={!!priceText}>{priceText}</span>
- *     </div>
- *   )}
- * </Payment.LineItem>
- * ```
- */
-export function LineItem(props) {
-    const { lineItem, currency, children } = props;
-    const { sdkLineItem, additionalInfo } = lineItem;
-    const pricesBreakdown = sdkLineItem?.pricesBreakdown;
-    // Prices (from SDK)
-    const totalPrice = convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.totalPriceAfterTax, currency);
-    const subtotal = convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.fullPrice, currency);
-    const tax = convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.taxDetails?.totalTax, currency);
-    const discount = convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.totalDiscount, currency);
-    const deposit = convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.depositAmount, currency);
-    // Custom price text (for CUSTOM rate type)
-    const priceText = additionalInfo?.priceText || null;
-    return children({
-        totalPrice,
-        subtotal,
-        tax,
-        discount,
-        deposit,
-        priceText,
+    // Convert SDK line items to LineItem with MoneyData prices
+    const lineItems = sdkLineItems.map((sdkLineItem) => {
+        const pricesBreakdown = sdkLineItem?.pricesBreakdown;
+        const additionalInfo = additionalInfoList.find((info) => info.lineItemId === sdkLineItem.lineItemId);
+        return {
+            id: sdkLineItem.lineItemId || '',
+            totalPrice: convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.totalPriceAfterTax, currency),
+            subtotal: convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.fullPrice, currency),
+            tax: convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.taxDetails?.totalTax, currency),
+            discount: convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.totalDiscount, currency),
+            deposit: convertMultiCurrencyPriceToMoneyData(pricesBreakdown?.depositAmount, currency),
+            priceText: additionalInfo?.priceText || null,
+        };
     });
+    const hasLineItems = lineItems.length > 0;
+    return props.children({ lineItems, hasLineItems, currency, isLoading, error });
 }

package/cjs/dist/react/core/time-slot-list/TimeSlot.d.ts

@@ -7,34 +7,26 @@
  */
 import React from 'react';
 import type { TimeSlot as TimeSlotType } from '@wix/auto_sdk_bookings_availability-time-slots';
+import { type TimeSlotServiceConfig } from '../../../services/time-slot-list/time-slot.js';
 /**
- * Context value for TimeSlot components
+ * Props for TimeSlot.Root component
  */
-export interface TimeSlotContextValue {
-    /** The current time slot data */
-    timeSlot: TimeSlotType;
-    /** Whether this time slot is currently selected */
-    isSelected: boolean;
-    /** Action to select this time slot */
-    selectTimeSlot: () => void;
-}
-/**
- * Hook to access TimeSlot context
- * @throws Error if used outside of TimeSlotProvider
- */
-export declare function useTimeSlotContext(): TimeSlotContextValue;
-/**
- * Props for TimeSlotProvider
- */
-export interface TimeSlotProviderProps {
+export interface RootProps {
     children: React.ReactNode;
-    timeSlot: TimeSlotType;
+    config: TimeSlotServiceConfig;
 }
 /**
- * Provider component used by TimeSlotRepeater to provide context.
- * Not used directly by consumers - only by TimeSlotList.TimeSlotRepeater.
+ * Root component that provides TimeSlot context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlot.Root config={{ timeSlot }}>
+ *   {children}
+ * </TimeSlot.Root>
+ * ```
  */
-export declare function TimeSlotProvider(props: TimeSlotProviderProps): React.ReactNode;
+export declare function Root(props: RootProps): React.ReactNode;
 /**
  * Context value for StaffMember components
  */

package/cjs/dist/react/core/time-slot-list/TimeSlot.js

@@ -7,41 +7,24 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * which provides the TimeSlotProvider context.
  */
 import React from 'react';
-import { useService } from '@wix/services-manager-react';
+import { useService, WixServices } from '@wix/services-manager-react';
+import { createServicesMap } from '@wix/services-manager';
 import { TimeSlotListServiceDefinition } from '../../../services/time-slot-list/time-slot-list.def.js';
 import { ANY_STAFF_MEMBER_ID, BookingServiceDefinition, } from '../../../services/booking/booking.js';
-const TimeSlotContext = React.createContext(null);
+import { TimeSlotServiceDefinition, TimeSlotService, } from '../../../services/time-slot-list/time-slot.js';
 /**
- * Hook to access TimeSlot context
- * @throws Error if used outside of TimeSlotProvider
- */
-export function useTimeSlotContext() {
-    const context = React.useContext(TimeSlotContext);
-    if (!context) {
-        throw new Error('TimeSlot components must be used within TimeSlotList.TimeSlotRepeater');
-    }
-    return context;
-}
-/**
- * Provider component used by TimeSlotRepeater to provide context.
- * Not used directly by consumers - only by TimeSlotList.TimeSlotRepeater.
+ * Root component that provides TimeSlot context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlot.Root config={{ timeSlot }}>
+ *   {children}
+ * </TimeSlot.Root>
+ * ```
  */
-export function TimeSlotProvider(props) {
-    const { children, timeSlot } = props;
-    const service = useService(TimeSlotListServiceDefinition);
-    const bookingService = useService(BookingServiceDefinition);
-    const selectedTimeSlot = bookingService.serviceSelections.get()[0]?.timeSlot;
-    const isSelected = selectedTimeSlot?.startDate === timeSlot.localStartDate &&
-        selectedTimeSlot?.location?._id === timeSlot.location?._id;
-    const selectTimeSlot = () => {
-        service.actions.selectSlot(timeSlot);
-    };
-    const contextValue = {
-        timeSlot,
-        isSelected,
-        selectTimeSlot,
-    };
-    return (_jsx(TimeSlotContext.Provider, { value: contextValue, children: children }));
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(TimeSlotServiceDefinition, TimeSlotService, props.config), children: props.children }));
 }
 const StaffMemberContext = React.createContext(null);
 /**
@@ -89,7 +72,12 @@ export function StaffMemberProvider(props) {
  * ```
  */
 export function Info(props) {
-    const { timeSlot, isSelected } = useTimeSlotContext();
+    const timeSlotService = useService(TimeSlotServiceDefinition);
+    const timeSlot = timeSlotService.timeSlotSignal.get();
+    const bookingService = useService(BookingServiceDefinition);
+    const selectedTimeSlot = bookingService.serviceSelections.get()[0]?.timeSlot;
+    const isSelected = selectedTimeSlot?.startDate === timeSlot.localStartDate &&
+        selectedTimeSlot?.location?._id === timeSlot.location?._id;
     const startDate = new Date(timeSlot.localStartDate);
     const endDate = new Date(timeSlot.localEndDate);
     const locationName = timeSlot.location?.name ?? '';
@@ -127,9 +115,16 @@ export function Info(props) {
  * ```
  */
 export function Actions(props) {
-    const { selectTimeSlot, timeSlot, isSelected } = useTimeSlotContext();
+    const timeSlotService = useService(TimeSlotServiceDefinition);
+    const timeSlot = timeSlotService.timeSlotSignal.get();
     const service = useService(TimeSlotListServiceDefinition);
     const bookingService = useService(BookingServiceDefinition);
+    const selectedTimeSlot = bookingService.serviceSelections.get()[0]?.timeSlot;
+    const isSelected = selectedTimeSlot?.startDate === timeSlot.localStartDate &&
+        selectedTimeSlot?.location?._id === timeSlot.location?._id;
+    const selectTimeSlot = () => {
+        service.actions.selectSlot(timeSlot);
+    };
     const bookable = timeSlot.bookable ?? false;
     const selectedStaffMemberId = bookingService.serviceSelections.get()[0]?.timeSlot?.resources?.[0]?._id;
     const staffFromSlot = timeSlot.availableResources[0].resources.map((r) => r._id);
@@ -165,7 +160,8 @@ export function Actions(props) {
  * ```
  */
 export function StaffMembers(props) {
-    const { timeSlot } = useTimeSlotContext();
+    const timeSlotService = useService(TimeSlotServiceDefinition);
+    const timeSlot = timeSlotService.timeSlotSignal.get();
     const service = useService(TimeSlotListServiceDefinition);
     const bookingService = useService(BookingServiceDefinition);
     const selectedStaffMemberId = bookingService.serviceSelections.get()[0]?.timeSlot?.resources?.[0]?._id;

package/cjs/dist/react/index.d.ts

@@ -6,4 +6,3 @@ export * as TimeSlotList from './time-slot-list/TimeSlotList.js';
 export * as ServiceList from './service-list/ServiceList.js';
 export * as Location from './location/Location.js';
 export * as Payment from './payment/Payment.js';
-export * as PaymentLineItem from './payment/PaymentLineItem.js';

package/cjs/dist/react/index.js

@@ -6,4 +6,3 @@ export * as TimeSlotList from './time-slot-list/TimeSlotList.js';
 export * as ServiceList from './service-list/ServiceList.js';
 export * as Location from './location/Location.js';
 export * as Payment from './payment/Payment.js';
-export * as PaymentLineItem from './payment/PaymentLineItem.js';