@wix/headless-bookings 0.0.29 → 0.0.31

package/dist/react/service/ServiceMedia.d.ts

@@ -0,0 +1,191 @@
+/**
+ * ServiceMedia - Compound component for displaying service media
+ * Provides components for displaying main media, cover media, and media galleries
+ */
+import React from 'react';
+import { AsChildChildren } from '@wix/headless-utils/react';
+/**
+ * Props for ServiceMedia.Main component
+ */
+export interface MainProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        media: {
+            image?: string;
+        };
+    }>;
+    /** CSS class name */
+    className?: string;
+}
+/**
+ * Displays the service main media image using WixMediaImage.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <ServiceMedia.Main className="w-full h-64 object-cover rounded-lg" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with primitive img element
+ * <ServiceMedia.Main asChild>
+ *   <img className="w-full h-64 object-cover shadow-lg" />
+ * </ServiceMedia.Main>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with custom component accessing media data
+ * <ServiceMedia.Main asChild>
+ *   {React.forwardRef(({media, ...props}, ref) => (
+ *     <div ref={ref} {...props} className="relative aspect-video">
+ *       <WixMediaImage media={media} className="w-full h-full object-cover" />
+ *       <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/50 p-4">
+ *         <Service.Name className="text-primary-foreground" />
+ *       </div>
+ *     </div>
+ *   ))}
+ * </ServiceMedia.Main>
+ * ```
+ */
+export declare const Main: React.ForwardRefExoticComponent<MainProps & React.RefAttributes<HTMLImageElement>>;
+/**
+ * Props for ServiceMedia.Cover component
+ */
+export interface CoverProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: AsChildChildren<{
+        media: {
+            image?: string;
+        };
+    }>;
+    /** CSS class name */
+    className?: string;
+}
+/**
+ * Displays the service cover media image using WixMediaImage.
+ * The cover media is typically used as a hero/banner image.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <ServiceMedia.Cover className="w-full h-96 object-cover" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild as a background image container
+ * <ServiceMedia.Cover asChild>
+ *   <div className="w-full h-96 bg-cover bg-center" />
+ * </ServiceMedia.Cover>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with custom component accessing media data
+ * <ServiceMedia.Cover asChild>
+ *   {React.forwardRef(({media, ...props}, ref) => (
+ *     <header ref={ref} {...props} className="relative h-96">
+ *       <WixMediaImage media={media} className="w-full h-full object-cover" />
+ *       <div className="absolute inset-0 bg-black/40 flex items-center justify-center">
+ *         <h1 className="text-4xl font-bold text-primary-foreground">
+ *           <Service.Name />
+ *         </h1>
+ *       </div>
+ *     </header>
+ *   ))}
+ * </ServiceMedia.Cover>
+ * ```
+ */
+export declare const Cover: React.ForwardRefExoticComponent<CoverProps & React.RefAttributes<HTMLImageElement>>;
+/**
+ * Props for ServiceMedia.Gallery component
+ */
+export interface GalleryProps {
+    /** Child components to render within the gallery (MediaGallery components) */
+    children: React.ReactNode;
+    /** Whether the gallery should loop infinitely */
+    infinite?: boolean;
+    /** Auto-play configuration for the gallery */
+    autoPlay?: {
+        /** Direction of auto-play */
+        direction?: 'forward' | 'backward';
+        /** Interval between slides in milliseconds */
+        intervalMs?: number;
+    };
+}
+/**
+ * Container for service media items gallery.
+ * Renders a MediaGallery.Root with the service media items.
+ * Supports autoPlay and infinite scroll options for carousel behavior.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage with MediaGallery components
+ * <ServiceMedia.Gallery>
+ *   <MediaGallery.Thumbnails>
+ *     <MediaGallery.ThumbnailRepeater>
+ *       <MediaGallery.ThumbnailItem />
+ *     </MediaGallery.ThumbnailRepeater>
+ *   </MediaGallery.Thumbnails>
+ * </ServiceMedia.Gallery>
+ *
+ * // With autoPlay carousel
+ * <ServiceMedia.Gallery
+ *   autoPlay={{ direction: 'forward', intervalMs: 3000 }}
+ *   infinite
+ * >
+ *   <MediaGallery.Viewport />
+ *   <MediaGallery.Previous />
+ *   <MediaGallery.Next />
+ * </ServiceMedia.Gallery>
+ *
+ * // Full gallery with thumbnails and navigation
+ * <ServiceMedia.Gallery infinite>
+ *   <div className="gallery-container">
+ *     <MediaGallery.Viewport className="main-image" />
+ *     <div className="controls">
+ *       <MediaGallery.Previous>Prev</MediaGallery.Previous>
+ *       <MediaGallery.Next>Next</MediaGallery.Next>
+ *     </div>
+ *     <MediaGallery.Thumbnails>
+ *       <MediaGallery.ThumbnailRepeater>
+ *         <MediaGallery.ThumbnailItem />
+ *       </MediaGallery.ThumbnailRepeater>
+ *     </MediaGallery.Thumbnails>
+ *   </div>
+ * </ServiceMedia.Gallery>
+ * ```
+ */
+export declare const Gallery: React.FC<GalleryProps>;
+/**
+ * ServiceMedia compound component for displaying service media
+ *
+ * @example
+ * ```tsx
+ * import { Service, ServiceMedia } from '@wix/headless-bookings/react';
+ *
+ * function ServiceCard({ service }) {
+ *   return (
+ *     <Service.Root serviceServiceConfig={{ service }}>
+ *       <ServiceMedia.Main className="w-full h-48 object-cover" />
+ *       <Service.Name />
+ *     </Service.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare const ServiceMedia: {
+    Main: React.ForwardRefExoticComponent<MainProps & React.RefAttributes<HTMLImageElement>>;
+    Cover: React.ForwardRefExoticComponent<CoverProps & React.RefAttributes<HTMLImageElement>>;
+    Gallery: React.FC<GalleryProps>;
+};
+export default ServiceMedia;

package/dist/react/service/ServiceMedia.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * ServiceMedia - Compound component for displaying service media
+ * Provides components for displaying main media, cover media, and media galleries
+ */
+import React from 'react';
+import { AsChildSlot } from '@wix/headless-utils/react';
+import { WixMediaImage } from '@wix/headless-media/react';
+import { MediaGallery } from '@wix/headless-media/react';
+import * as CoreServiceMediaMain from '../core/service/ServiceMediaMain.js';
+import * as CoreServiceMediaCover from '../core/service/ServiceMediaCover.js';
+import * as CoreServiceMediaGallery from '../core/service/ServiceMediaGallery.js';
+var TestIds;
+(function (TestIds) {
+    TestIds["serviceMediaMain"] = "service-media-main";
+    TestIds["serviceMediaCover"] = "service-media-cover";
+})(TestIds || (TestIds = {}));
+/**
+ * Displays the service main media image using WixMediaImage.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <ServiceMedia.Main className="w-full h-64 object-cover rounded-lg" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with primitive img element
+ * <ServiceMedia.Main asChild>
+ *   <img className="w-full h-64 object-cover shadow-lg" />
+ * </ServiceMedia.Main>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with custom component accessing media data
+ * <ServiceMedia.Main asChild>
+ *   {React.forwardRef(({media, ...props}, ref) => (
+ *     <div ref={ref} {...props} className="relative aspect-video">
+ *       <WixMediaImage media={media} className="w-full h-full object-cover" />
+ *       <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/50 p-4">
+ *         <Service.Name className="text-primary-foreground" />
+ *       </div>
+ *     </div>
+ *   ))}
+ * </ServiceMedia.Main>
+ * ```
+ */
+export const Main = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreServiceMediaMain.MainMedia, { children: ({ mainMedia }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceMediaMain, customElement: children, customElementProps: { media: mainMedia }, children: mainMedia?.image ? _jsx(WixMediaImage, { media: mainMedia }) : null })) }));
+});
+Main.displayName = 'ServiceMedia.Main';
+/**
+ * Displays the service cover media image using WixMediaImage.
+ * The cover media is typically used as a hero/banner image.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <ServiceMedia.Cover className="w-full h-96 object-cover" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild as a background image container
+ * <ServiceMedia.Cover asChild>
+ *   <div className="w-full h-96 bg-cover bg-center" />
+ * </ServiceMedia.Cover>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // asChild with custom component accessing media data
+ * <ServiceMedia.Cover asChild>
+ *   {React.forwardRef(({media, ...props}, ref) => (
+ *     <header ref={ref} {...props} className="relative h-96">
+ *       <WixMediaImage media={media} className="w-full h-full object-cover" />
+ *       <div className="absolute inset-0 bg-black/40 flex items-center justify-center">
+ *         <h1 className="text-4xl font-bold text-primary-foreground">
+ *           <Service.Name />
+ *         </h1>
+ *       </div>
+ *     </header>
+ *   ))}
+ * </ServiceMedia.Cover>
+ * ```
+ */
+export const Cover = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreServiceMediaCover.CoverMedia, { children: ({ coverMedia }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceMediaCover, customElement: children, customElementProps: { media: coverMedia }, children: coverMedia?.image ? _jsx(WixMediaImage, { media: coverMedia }) : null })) }));
+});
+Cover.displayName = 'ServiceMedia.Cover';
+/**
+ * Container for service media items gallery.
+ * Renders a MediaGallery.Root with the service media items.
+ * Supports autoPlay and infinite scroll options for carousel behavior.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage with MediaGallery components
+ * <ServiceMedia.Gallery>
+ *   <MediaGallery.Thumbnails>
+ *     <MediaGallery.ThumbnailRepeater>
+ *       <MediaGallery.ThumbnailItem />
+ *     </MediaGallery.ThumbnailRepeater>
+ *   </MediaGallery.Thumbnails>
+ * </ServiceMedia.Gallery>
+ *
+ * // With autoPlay carousel
+ * <ServiceMedia.Gallery
+ *   autoPlay={{ direction: 'forward', intervalMs: 3000 }}
+ *   infinite
+ * >
+ *   <MediaGallery.Viewport />
+ *   <MediaGallery.Previous />
+ *   <MediaGallery.Next />
+ * </ServiceMedia.Gallery>
+ *
+ * // Full gallery with thumbnails and navigation
+ * <ServiceMedia.Gallery infinite>
+ *   <div className="gallery-container">
+ *     <MediaGallery.Viewport className="main-image" />
+ *     <div className="controls">
+ *       <MediaGallery.Previous>Prev</MediaGallery.Previous>
+ *       <MediaGallery.Next>Next</MediaGallery.Next>
+ *     </div>
+ *     <MediaGallery.Thumbnails>
+ *       <MediaGallery.ThumbnailRepeater>
+ *         <MediaGallery.ThumbnailItem />
+ *       </MediaGallery.ThumbnailRepeater>
+ *     </MediaGallery.Thumbnails>
+ *   </div>
+ * </ServiceMedia.Gallery>
+ * ```
+ */
+export const Gallery = (props) => {
+    const { children, infinite, autoPlay } = props;
+    return (_jsx(CoreServiceMediaGallery.MediaGallery, { children: ({ mediaItems }) => {
+            const mediaGalleryServiceConfig = {
+                media: mediaItems,
+                infinite,
+                autoPlay,
+            };
+            return (_jsx(MediaGallery.Root, { mediaGalleryServiceConfig: mediaGalleryServiceConfig, children: children }));
+        } }));
+};
+Gallery.displayName = 'ServiceMedia.Gallery';
+/**
+ * ServiceMedia compound component for displaying service media
+ *
+ * @example
+ * ```tsx
+ * import { Service, ServiceMedia } from '@wix/headless-bookings/react';
+ *
+ * function ServiceCard({ service }) {
+ *   return (
+ *     <Service.Root serviceServiceConfig={{ service }}>
+ *       <ServiceMedia.Main className="w-full h-48 object-cover" />
+ *       <Service.Name />
+ *     </Service.Root>
+ *   );
+ * }
+ * ```
+ */
+export const ServiceMedia = {
+    Main,
+    Cover,
+    Gallery,
+};
+export default ServiceMedia;

package/dist/services/index.d.ts

@@ -8,3 +8,4 @@ export { TimeSlotListService, TimeSlotListServiceDefinition, ViewMode, loadTimeS
 export { ServiceListService, ServiceListServiceDefinition, type ServiceListServiceAPI, type ServiceListServiceConfig, type ServiceListFilters, type ServiceListActions, type QueryOptions, loadServiceListServiceInitialData, type SuccessServiceListServiceConfigResult, type ErrorServiceListServiceConfigResult, } from './service-list/service-list.js';
 export { executeBookAction, canBook, buildBookingRequest, buildCheckoutRequest, type CanBookParams, type BookResult, type BookingError, type BookActionParams, type BookChildProps, type BookProps, type BuildCheckoutParams, } from './booking/book-action/index.js';
 export { BookingFormService, BookingFormServiceDefinition, type BookingFormServiceAPI, type BookingFormServiceConfig, type BookingFormServiceInternalAPI, type ValidationResult, } from './booking-form/booking-form.js';
+export { PaymentService, PaymentServiceDefinition, type PaymentServiceAPI, type PaymentServiceConfig, type PaymentDetails, type SlotService, type LineItemAdditionalInfo, loadPaymentConfig, type SuccessPaymentConfigResult, type ErrorPaymentConfigResult, } from './payment/payment.js';

package/dist/services/index.js

@@ -8,3 +8,4 @@ export { TimeSlotListService, TimeSlotListServiceDefinition, ViewMode, loadTimeS
 export { ServiceListService, ServiceListServiceDefinition, loadServiceListServiceInitialData, } from './service-list/service-list.js';
 export { executeBookAction, canBook, buildBookingRequest, buildCheckoutRequest, } from './booking/book-action/index.js';
 export { BookingFormService, BookingFormServiceDefinition, } from './booking-form/booking-form.js';
+export { PaymentService, PaymentServiceDefinition, loadPaymentConfig, } from './payment/payment.js';

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

@@ -0,0 +1,32 @@
+/**
+ * Payment Service - Pricing calculation and payment details management
+ * Handles calculating total prices, taxes, discounts, and deposit information
+ * Supports two modes: SSR (config with pre-fetched data) and lazy loading (reactive)
+ */
+import { type PaymentServiceConfig, type PaymentServiceInternalConfig, type SlotService } from './payment.def.js';
+export { PaymentServiceDefinition, type PaymentServiceConfig, type PaymentDetails, type LineItemAdditionalInfo, type SlotService, } from './payment.def.js';
+export type { PaymentServiceAPI, PaymentServiceInternalConfig } from './payment.def.js';
+export declare const PaymentService: import("@wix/services-definitions").ServiceFactory<string & {
+    __api: import("./payment.def.js").PaymentServiceAPI;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & import("./payment.def.js").PaymentServiceAPI, PaymentServiceInternalConfig>;
+export type SuccessPaymentConfigResult = {
+    type: 'success';
+    config: PaymentServiceConfig;
+};
+export type ErrorPaymentConfigResult = {
+    type: 'error';
+    error: string;
+};
+/**
+ * Load payment configuration for Server-Side Rendering (SSR).
+ * Calls the pricing APIs and returns pre-calculated payment details.
+ *
+ * @param params.slotServices - Slot/service inputs for calculation
+ * @param params.numberOfParticipants - Number of participants (default: 1)
+ */
+export declare function loadPaymentConfig(params: {
+    slotServices: SlotService[];
+    numberOfParticipants?: number;
+}): Promise<SuccessPaymentConfigResult | ErrorPaymentConfigResult>;

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

@@ -0,0 +1,66 @@
+/**
+ * Payment Service Definition
+ * Defines interfaces and service contract for payment calculation management
+ */
+import type { Signal } from '@wix/services-definitions/core-services/signals';
+import type { CalculateTotalsResponse } from '@wix/auto_sdk_ecom_totals-calculator';
+import type { Service } from '@wix/auto_sdk_bookings_services';
+/**
+ * Payment option for line items
+ */
+export type PaymentOption = 'FULL_PAYMENT_ONLINE' | 'FULL_PAYMENT_OFFLINE';
+/**
+ * Additional computed info for a line item (not in SDK response)
+ */
+export interface LineItemAdditionalInfo {
+    /** Line item ID to match with SDK's calculatedLineItems */
+    lineItemId: string;
+    /** Custom price text (for CUSTOM rate type services) */
+    priceText?: string;
+}
+/**
+ * Payment calculation result with SDK response and additional computed info
+ */
+export interface PaymentDetails {
+    /** The raw SDK CalculateTotals response */
+    response: CalculateTotalsResponse;
+    /** Additional computed information per line item */
+    additionalInfo: {
+        lineItems: LineItemAdditionalInfo[];
+    };
+}
+/**
+ * Input for calculating payment for a slot/service
+ */
+export interface SlotService {
+    service: Service;
+    lineItemId: string;
+}
+/**
+ * Public config for PaymentService (SSR mode only):
+ * Pass `paymentDetails` pre-fetched via loadPaymentConfig
+ */
+export interface PaymentServiceConfig {
+    /** Pre-calculated payment details for SSR (no API call) */
+    paymentDetails?: PaymentDetails;
+}
+/**
+ * Internal config used by Core component to pass lazy loading data
+ * Not exposed publicly - Core merges this with PaymentServiceConfig
+ */
+export interface PaymentServiceInternalConfig extends PaymentServiceConfig {
+    /** Slot services for lazy loading (internal use) */
+    slotServices?: SlotService[];
+    /** Number of participants for lazy loading (internal use) */
+    numberOfParticipants?: number;
+}
+export interface PaymentServiceAPI {
+    paymentDetailsSignal: Signal<PaymentDetails | null>;
+    isLoadingSignal: Signal<boolean>;
+    errorSignal: Signal<string | null>;
+}
+export declare const PaymentServiceDefinition: string & {
+    __api: PaymentServiceAPI;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & PaymentServiceAPI;

package/dist/services/payment/payment.def.js

@@ -0,0 +1,9 @@
+/**
+ * Payment Service Definition
+ * Defines interfaces and service contract for payment calculation management
+ */
+import { defineService } from '@wix/services-definitions';
+// ============================================================================
+// Service Definition
+// ============================================================================
+export const PaymentServiceDefinition = defineService('payment');

package/dist/services/payment/payment.js

@@ -0,0 +1,167 @@
+/**
+ * Payment Service - Pricing calculation and payment details management
+ * Handles calculating total prices, taxes, discounts, and deposit information
+ * Supports two modes: SSR (config with pre-fetched data) and lazy loading (reactive)
+ */
+import { implementService } from '@wix/services-definitions';
+import { SignalsServiceDefinition } from '@wix/services-definitions/core-services/signals';
+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';
+export { PaymentServiceDefinition, } from './payment.def.js';
+// ============================================================================
+// Constants
+// ============================================================================
+const BOOKINGS_APP_DEF_ID = '13d21c63-b5ec-5912-8397-c3a5ddb27a97';
+// ============================================================================
+// Helper Functions
+// ============================================================================
+function getAdditionalInfo(service, lineItemId) {
+    const payment = service.payment;
+    const priceText = payment?.rateType === RateType.CUSTOM && payment.custom?.description
+        ? payment.custom.description
+        : undefined;
+    return { lineItemId, priceText };
+}
+function getPaymentOption(service) {
+    const options = service.payment?.options;
+    if (options?.inPerson) {
+        return 'FULL_PAYMENT_OFFLINE';
+    }
+    return 'FULL_PAYMENT_ONLINE';
+}
+function buildLineItem(service, numberOfParticipants, lineItemId) {
+    // Get fixed price from service
+    const servicePrice = service.payment?.fixed?.price?.value;
+    const price = Number(servicePrice || 0) * numberOfParticipants;
+    // Get deposit if configured
+    const deposit = service.payment?.fixed?.deposit?.value
+        ? Number(service.payment.fixed.deposit.value) * numberOfParticipants
+        : undefined;
+    // Get payment option from service configuration
+    const paymentOption = getPaymentOption(service);
+    return {
+        _id: lineItemId,
+        catalogReference: {
+            catalogItemId: service._id || '',
+            appId: BOOKINGS_APP_DEF_ID,
+        },
+        price: String(price),
+        ...(deposit ? { depositAmount: String(deposit) } : {}),
+        quantity: 1,
+        paymentOption,
+    };
+}
+async function calculatePaymentDetails(slotServices, numberOfParticipants) {
+    const lineItems = slotServices.map((input) => buildLineItem(input.service, numberOfParticipants, input.lineItemId));
+    const response = await calculateTotals({
+        lineItems,
+    });
+    const additionalInfoList = slotServices.map((input) => getAdditionalInfo(input.service, input.lineItemId));
+    return {
+        response,
+        additionalInfo: {
+            lineItems: additionalInfoList,
+        },
+    };
+}
+// ============================================================================
+// Service Implementation
+// ============================================================================
+export const PaymentService = implementService.withConfig()(PaymentServiceDefinition, ({ getService, config }) => {
+    const signalsService = getService(SignalsServiceDefinition);
+    // Try to get BookingService (optional - for reactive mode)
+    let bookingService = null;
+    try {
+        bookingService = getService(BookingServiceDefinition);
+    }
+    catch {
+        bookingService = null;
+    }
+    // Initialize signals
+    const paymentDetailsSignal = signalsService.signal(config.paymentDetails || null);
+    const isLoadingSignal = signalsService.signal(false);
+    const errorSignal = signalsService.signal(null);
+    // Internal calculate function
+    const calculate = async (slotServices, numberOfParticipants) => {
+        if (!slotServices.length) {
+            paymentDetailsSignal.set(null);
+            return;
+        }
+        isLoadingSignal.set(true);
+        errorSignal.set(null);
+        try {
+            const paymentDetails = await calculatePaymentDetails(slotServices, numberOfParticipants);
+            paymentDetailsSignal.set(paymentDetails);
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error
+                ? error.message
+                : 'Failed to calculate payment';
+            errorSignal.set(errorMessage);
+            console.error('Payment calculation error:', error);
+        }
+        finally {
+            isLoadingSignal.set(false);
+        }
+    };
+    // Mode 1: SSR - paymentDetails already set in signal initialization
+    if (config.paymentDetails) {
+        // No-op - data is pre-fetched
+    }
+    // Mode 2: Lazy loading - slotServices provided via internal config
+    else if (config.slotServices?.length) {
+        void calculate(config.slotServices, config.numberOfParticipants ?? 1);
+    }
+    // Mode 3: Reactive - observe BookingService signals (client-side only)
+    else if (typeof window !== 'undefined' && bookingService) {
+        signalsService.effect(() => {
+            const selections = bookingService?.serviceSelections.get() || [];
+            // For single service mode, take the first selection
+            const firstSelection = selections[0];
+            const numParticipants = firstSelection?.totalParticipants || 1;
+            const services = selections.map((selection) => ({
+                service: selection.service,
+                lineItemId: selection.instanceId,
+            }));
+            void calculate(services, numParticipants);
+        });
+    }
+    return {
+        paymentDetailsSignal,
+        isLoadingSignal,
+        errorSignal,
+    };
+});
+/**
+ * Load payment configuration for Server-Side Rendering (SSR).
+ * Calls the pricing APIs and returns pre-calculated payment details.
+ *
+ * @param params.slotServices - Slot/service inputs for calculation
+ * @param params.numberOfParticipants - Number of participants (default: 1)
+ */
+export async function loadPaymentConfig(params) {
+    try {
+        const { slotServices, numberOfParticipants = 1 } = params;
+        if (!slotServices.length) {
+            return {
+                type: 'success',
+                config: { paymentDetails: undefined },
+            };
+        }
+        const paymentDetails = await calculatePaymentDetails(slotServices, numberOfParticipants);
+        return {
+            type: 'success',
+            config: { paymentDetails },
+        };
+    }
+    catch (error) {
+        const errorMessage = error instanceof Error ? error.message : 'Failed to load payment config';
+        console.error('Failed to load payment config:', error);
+        return {
+            type: 'error',
+            error: errorMessage,
+        };
+    }
+}

package/dist/utils/money.d.ts

@@ -19,3 +19,14 @@ export declare function convertToMoneyData(sdkMoney: {
     currency?: string;
     formattedValue?: string | null;
 } | undefined): MoneyData | 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 declare function convertMultiCurrencyPriceToMoneyData(price: {
+    amount?: string;
+} | undefined, currency: string): MoneyData | null;