@wix/headless-bookings 0.0.29 → 0.0.31

package/cjs/dist/utils/money.js

@@ -32,3 +32,19 @@ export function convertToMoneyData(sdkMoney) {
     }
     return null;
 }
+/**
+ * Converts ecom MultiCurrencyPrice format to MoneyData format
+ * MultiCurrencyPrice uses 'amount' as string, while MoneyData uses 'amount' as number
+ *
+ * @param price - The MultiCurrencyPrice object with amount as string
+ * @param currency - The currency code (from response level)
+ * @returns MoneyData object or null if conversion fails
+ */
+export function convertMultiCurrencyPriceToMoneyData(price, currency) {
+    if (!price?.amount)
+        return null;
+    const parsed = parseFloat(price.amount);
+    if (isNaN(parsed) || parsed < 0)
+        return null;
+    return { amount: parsed, currency };
+}

package/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/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/dist/react/core/service/ServiceMediaCover.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Core ServiceMediaCover Component
+ * Provides low-level access to service cover media via render props
+ */
+import React from 'react';
+/**
+ * Render props for CoverMedia component
+ */
+export interface CoverMediaRenderProps {
+    /** Cover media object containing the image string */
+    coverMedia: {
+        image?: string;
+    };
+    /** Whether the service has a cover media image */
+    hasCoverMedia: boolean;
+}
+/**
+ * Props for CoverMedia component
+ */
+export interface CoverMediaProps {
+    /** Render prop function that receives cover media data */
+    children: (props: CoverMediaRenderProps) => React.ReactNode;
+}
+/**
+ * Core component that provides access to service cover media via render props.
+ * The cover media is typically used as a hero/banner image.
+ * Must be used within a Service.Root context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceMediaCover.CoverMedia>
+ *   {({ coverMedia, hasCoverMedia }) => (
+ *     hasCoverMedia ? (
+ *       <img src={coverMedia.image} alt="Service Cover" />
+ *     ) : (
+ *       <div>No cover image available</div>
+ *     )
+ *   )}
+ * </ServiceMediaCover.CoverMedia>
+ * ```
+ */
+export declare function CoverMedia(props: CoverMediaProps): React.ReactNode;

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

@@ -0,0 +1,34 @@
+/**
+ * Core ServiceMediaCover Component
+ * Provides low-level access to service cover media via render props
+ */
+import { useService } from '@wix/services-manager-react';
+import { ServiceServiceDefinition } from '../../../services/service/service.js';
+/**
+ * Core component that provides access to service cover media via render props.
+ * The cover media is typically used as a hero/banner image.
+ * Must be used within a Service.Root context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceMediaCover.CoverMedia>
+ *   {({ coverMedia, hasCoverMedia }) => (
+ *     hasCoverMedia ? (
+ *       <img src={coverMedia.image} alt="Service Cover" />
+ *     ) : (
+ *       <div>No cover image available</div>
+ *     )
+ *   )}
+ * </ServiceMediaCover.CoverMedia>
+ * ```
+ */
+export function CoverMedia(props) {
+    const serviceService = useService(ServiceServiceDefinition);
+    const service = serviceService.serviceSignal.get();
+    const coverMedia = {
+        image: service.media?.coverMedia?.image,
+    };
+    const hasCoverMedia = !!coverMedia.image;
+    return props.children({ coverMedia, hasCoverMedia });
+}

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

@@ -0,0 +1,50 @@
+/**
+ * Core ServiceMediaGallery Component
+ * Provides low-level access to service media gallery items via render props
+ */
+import React from 'react';
+/**
+ * Media item type for gallery items
+ */
+export interface MediaItem {
+    image?: string;
+}
+/**
+ * Render props for MediaGallery component
+ */
+export interface MediaGalleryRenderProps {
+    /** Array of media items in the gallery */
+    mediaItems: MediaItem[];
+    /** Whether the service has any media items */
+    hasMediaItems: boolean;
+}
+/**
+ * Props for MediaGallery component
+ */
+export interface MediaGalleryProps {
+    /** Render prop function that receives media gallery data */
+    children: (props: MediaGalleryRenderProps) => React.ReactNode;
+}
+/**
+ * Core component that provides access to service media gallery items via render props.
+ * Must be used within a Service.Root context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceMediaGallery.MediaGallery>
+ *   {({ mediaItems, hasMediaItems }) => (
+ *     hasMediaItems ? (
+ *       <div>
+ *         {mediaItems.map((item, index) => (
+ *           <img key={index} src={item.image} alt={`Gallery item ${index}`} />
+ *         ))}
+ *       </div>
+ *     ) : (
+ *       <div>No gallery items available</div>
+ *     )
+ *   )}
+ * </ServiceMediaGallery.MediaGallery>
+ * ```
+ */
+export declare function MediaGallery(props: MediaGalleryProps): React.ReactNode;

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

@@ -0,0 +1,37 @@
+/**
+ * Core ServiceMediaGallery Component
+ * Provides low-level access to service media gallery items via render props
+ */
+import { useService } from '@wix/services-manager-react';
+import { ServiceServiceDefinition } from '../../../services/service/service.js';
+/**
+ * Core component that provides access to service media gallery items via render props.
+ * Must be used within a Service.Root context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceMediaGallery.MediaGallery>
+ *   {({ mediaItems, hasMediaItems }) => (
+ *     hasMediaItems ? (
+ *       <div>
+ *         {mediaItems.map((item, index) => (
+ *           <img key={index} src={item.image} alt={`Gallery item ${index}`} />
+ *         ))}
+ *       </div>
+ *     ) : (
+ *       <div>No gallery items available</div>
+ *     )
+ *   )}
+ * </ServiceMediaGallery.MediaGallery>
+ * ```
+ */
+export function MediaGallery(props) {
+    const serviceService = useService(ServiceServiceDefinition);
+    const service = serviceService.serviceSignal.get();
+    const mediaItems = service.media?.items?.map((item) => ({
+        image: item.image,
+    })) || [];
+    const hasMediaItems = mediaItems.length > 0;
+    return props.children({ mediaItems, hasMediaItems });
+}

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

@@ -0,0 +1,42 @@
+/**
+ * Core ServiceMediaMain Component
+ * Provides low-level access to service main media via render props
+ */
+import React from 'react';
+/**
+ * Render props for MainMedia component
+ */
+export interface MainMediaRenderProps {
+    /** Main media object containing the image string */
+    mainMedia: {
+        image?: string;
+    };
+    /** Whether the service has a main media image */
+    hasMainMedia: boolean;
+}
+/**
+ * Props for MainMedia component
+ */
+export interface MainMediaProps {
+    /** Render prop function that receives main media data */
+    children: (props: MainMediaRenderProps) => React.ReactNode;
+}
+/**
+ * Core component that provides access to service main media via render props.
+ * Must be used within a Service.Root context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceMediaMain.MainMedia>
+ *   {({ mainMedia, hasMainMedia }) => (
+ *     hasMainMedia ? (
+ *       <img src={mainMedia.image} alt="Service" />
+ *     ) : (
+ *       <div>No image available</div>
+ *     )
+ *   )}
+ * </ServiceMediaMain.MainMedia>
+ * ```
+ */
+export declare function MainMedia(props: MainMediaProps): React.ReactNode;

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

@@ -0,0 +1,33 @@
+/**
+ * Core ServiceMediaMain Component
+ * Provides low-level access to service main media via render props
+ */
+import { useService } from '@wix/services-manager-react';
+import { ServiceServiceDefinition } from '../../../services/service/service.js';
+/**
+ * Core component that provides access to service main media via render props.
+ * Must be used within a Service.Root context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceMediaMain.MainMedia>
+ *   {({ mainMedia, hasMainMedia }) => (
+ *     hasMainMedia ? (
+ *       <img src={mainMedia.image} alt="Service" />
+ *     ) : (
+ *       <div>No image available</div>
+ *     )
+ *   )}
+ * </ServiceMediaMain.MainMedia>
+ * ```
+ */
+export function MainMedia(props) {
+    const serviceService = useService(ServiceServiceDefinition);
+    const service = serviceService.serviceSignal.get();
+    const mainMedia = {
+        image: service.media?.mainMedia?.image,
+    };
+    const hasMainMedia = !!mainMedia.image;
+    return props.children({ mainMedia, hasMainMedia });
+}

package/dist/react/index.d.ts

@@ -1,6 +1,9 @@
 export * as Booking from './booking/Booking.js';
 export * as BookingForm from './booking-form/BookingForm.js';
 export * as Service from './service/Service.js';
+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/dist/react/index.js

@@ -1,6 +1,9 @@
 export * as Booking from './booking/Booking.js';
 export * as BookingForm from './booking-form/BookingForm.js';
 export * as Service from './service/Service.js';
+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';