@wix/headless-bookings 0.0.30 → 0.0.31

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

@@ -0,0 +1,193 @@
+/**
+ * Core Payment Components
+ * Provides low-level access to PaymentService via render props
+ * Note: Currently supports single service only
+ */
+import React from 'react';
+import { type PaymentServiceConfig, type PaymentDetails, type SlotService } from '../../../services/payment/payment.js';
+import type { MoneyData } from '@wix/headless-components/react';
+/**
+ * Props for Payment.Root component
+ */
+export interface RootProps {
+    children: React.ReactNode | ((props: {
+        isLoading: boolean;
+        hasError: boolean;
+    }) => React.ReactNode);
+    /** Service config - SSR only (paymentDetails) */
+    paymentServiceConfig?: PaymentServiceConfig;
+    /** Slot services for lazy loading (triggers API call) */
+    slotServices?: SlotService[];
+    /** Number of participants for lazy loading */
+    numberOfParticipants?: number;
+}
+/**
+ * Root component that provides payment context.
+ * Supports 3 modes:
+ * 1. SSR: paymentServiceConfig.paymentDetails - pre-fetched data
+ * 2. Lazy loading: slotServices + numberOfParticipants props - calls API on init
+ * 3. Reactive: no config/props - reads from BookingService signals
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // SSR mode
+ * <Payment.Root paymentServiceConfig={{ paymentDetails }}>
+ *   <Payment.Summary />
+ * </Payment.Root>
+ *
+ * // Lazy loading mode
+ * <Payment.Root slotServices={[...]} numberOfParticipants={2}>
+ *   {({ isLoading }) => isLoading ? <div>Loading...</div> : <Payment.Summary />}
+ * </Payment.Root>
+ *
+ * // Reactive mode
+ * <Payment.Root>
+ *   <Payment.Summary />
+ * </Payment.Root>
+ * ```
+ */
+export declare function Root(props: RootProps): React.ReactNode;
+/**
+ * Props for Payment 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 {
+    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;
+    }) => 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.
+ *
+ * @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';
+/**
+ * Combined line item with SDK data and additional computed info
+ */
+export interface CombinedLineItem {
+    /** SDK line item data */
+    sdkLineItem: ApiCalculatedLineItem;
+    /** Additional computed info */
+    additionalInfo: LineItemAdditionalInfo | undefined;
+}
+/**
+ * Props for LineItems render prop component
+ */
+export interface LineItemsProps {
+    children: (data: {
+        lineItems: CombinedLineItem[];
+        hasLineItems: boolean;
+        currency: string;
+    }) => 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).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Payment.LineItems>
+ *   {({ lineItems, hasLineItems, currency }) => (
+ *     <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>
+ *       ))}
+ *     </ul>
+ *   )}
+ * </Payment.LineItems>
+ * ```
+ */
+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

@@ -0,0 +1,202 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WixServices, useService } from '@wix/services-manager-react';
+import { createServicesMap } from '@wix/services-manager';
+import { PaymentServiceDefinition, PaymentService, } from '../../../services/payment/payment.js';
+import { convertMultiCurrencyPriceToMoneyData } from '../../../utils/money.js';
+/**
+ * Internal content component that reads from service
+ */
+function RootContent({ children, }) {
+    const paymentService = useService(PaymentServiceDefinition);
+    const isLoading = paymentService.isLoadingSignal.get();
+    const error = paymentService.errorSignal.get();
+    const hasError = !!error;
+    if (typeof children === 'function') {
+        return children({ isLoading, hasError });
+    }
+    return children;
+}
+/**
+ * Root component that provides payment context.
+ * Supports 3 modes:
+ * 1. SSR: paymentServiceConfig.paymentDetails - pre-fetched data
+ * 2. Lazy loading: slotServices + numberOfParticipants props - calls API on init
+ * 3. Reactive: no config/props - reads from BookingService signals
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // SSR mode
+ * <Payment.Root paymentServiceConfig={{ paymentDetails }}>
+ *   <Payment.Summary />
+ * </Payment.Root>
+ *
+ * // Lazy loading mode
+ * <Payment.Root slotServices={[...]} numberOfParticipants={2}>
+ *   {({ isLoading }) => isLoading ? <div>Loading...</div> : <Payment.Summary />}
+ * </Payment.Root>
+ *
+ * // Reactive mode
+ * <Payment.Root>
+ *   <Payment.Summary />
+ * </Payment.Root>
+ * ```
+ */
+export function Root(props) {
+    const { children, paymentServiceConfig = {}, slotServices, numberOfParticipants } = props;
+    // Merge public config with lazy loading props into internal config
+    const internalConfig = {
+        ...paymentServiceConfig,
+        slotServices,
+        numberOfParticipants,
+    };
+    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.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Payment.Payment>
+ *   {({ paymentDetails, isLoading, error }) => (
+ *     isLoading ? <div>Loading...</div> : <div>{JSON.stringify(paymentDetails)}</div>
+ *   )}
+ * </Payment.Payment>
+ * ```
+ */
+export function Payment(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,
+    });
+}
+/**
+ * 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).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Payment.LineItems>
+ *   {({ lineItems, hasLineItems, currency }) => (
+ *     <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>
+ *       ))}
+ *     </ul>
+ *   )}
+ * </Payment.LineItems>
+ * ```
+ */
+export function LineItems(props) {
+    const paymentService = useService(PaymentServiceDefinition);
+    const paymentDetails = paymentService.paymentDetailsSignal.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,
+    });
+}

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

@@ -5,3 +5,5 @@ export * as ServiceMedia from './service/ServiceMedia.js';
 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

@@ -5,3 +5,5 @@ export * as ServiceMedia from './service/ServiceMedia.js';
 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';