@wix/headless-bookings 0.0.39 → 0.0.40

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

@@ -34,7 +34,8 @@ export interface PaymentDetails {
  */
 export interface SlotService {
     service: Service;
-    lineItemId: string;
+    /** Optional line item ID. If not provided, one will be generated. */
+    lineItemId?: string;
 }
 /**
  * Public config for PaymentService (SSR mode only):

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

@@ -9,6 +9,7 @@ import { calculateTotals, } from '@wix/auto_sdk_ecom_totals-calculator';
 import { BookingServiceDefinition } from '../booking/booking.js';
 import { RateType } from '@wix/auto_sdk_bookings_services';
 import { PaymentServiceDefinition, } from './payment.def.js';
+import { generateLineItemId } from '../../utils/guid.js';
 export { PaymentServiceDefinition, } from './payment.def.js';
 // ============================================================================
 // Constants
@@ -54,11 +55,16 @@ function buildLineItem(service, numberOfParticipants, lineItemId) {
     };
 }
 async function calculatePaymentDetails(slotServices, numberOfParticipants) {
-    const lineItems = slotServices.map((input) => buildLineItem(input.service, numberOfParticipants, input.lineItemId));
+    // Ensure all slot services have a lineItemId
+    const data = slotServices.map((slot) => ({
+        ...slot,
+        lineItemId: slot.lineItemId || generateLineItemId(),
+    }));
+    const lineItems = data.map((item) => buildLineItem(item.service, numberOfParticipants, item.lineItemId));
     const response = await calculateTotals({
         lineItems,
     });
-    const additionalInfoList = slotServices.map((input) => getAdditionalInfo(input.service, input.lineItemId));
+    const additionalInfoList = data.map((item) => getAdditionalInfo(item.service, item.lineItemId));
     return {
         response,
         additionalInfo: {

package/cjs/dist/utils/guid.d.ts

@@ -0,0 +1,7 @@
+/**
+ * ID generation utilities
+ */
+/**
+ * Generates a unique line item ID in Ecom's GUID format
+ */
+export declare function generateLineItemId(): string;

package/cjs/dist/utils/guid.js

@@ -0,0 +1,12 @@
+/**
+ * ID generation utilities
+ */
+/**
+ * Generates a unique line item ID in Ecom's GUID format
+ */
+export function generateLineItemId() {
+    const s4 = () => Math.floor((1 + Math.random()) * 0x10000)
+        .toString(16)
+        .substring(1);
+    return `${s4()}${s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
+}

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

@@ -4,7 +4,7 @@
  * Note: Currently supports single service only
  */
 import React from 'react';
-import { type PaymentServiceConfig, type 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/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/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/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';